|
@@ -85,7 +85,8 @@ const Environment: React.FC = () => {
|
|
|
colorStr: '232, 158, 50,',
|
|
|
},
|
|
|
]);
|
|
|
- const [scale, setScale] = useState<number>(1);
|
|
|
+ const [scale, setScale] = useState<number>(0.8);
|
|
|
+ const [maxScale, setMaxScale] = useState<number>(1);
|
|
|
const [mapList, setMapList] = useState<API.MapInfo[]>([]);
|
|
|
const mapListCopy = useRef<any[]>([]);
|
|
|
const [mapSize, setMapSize] = useState<any>({});
|
|
@@ -257,6 +258,27 @@ const Environment: React.FC = () => {
|
|
|
item.left = item.left * mscale;
|
|
|
item.top = item.top * mscale;
|
|
|
});
|
|
|
+ var maxScaleTemp = 1.1;
|
|
|
+ if (data.length > 0) {
|
|
|
+ //找到合适的最大缩放倍数
|
|
|
+ for (var i = 1; i < 12; i++) {
|
|
|
+ var num = 0;
|
|
|
+ data.forEach((item, index) => {
|
|
|
+ var mwidth = item.width * maxScaleTemp;
|
|
|
+ if (mwidth > 65) {
|
|
|
+ num = num + 1;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log('width', num, data.length, i);
|
|
|
+
|
|
|
+ if (num / data.length > 0.92) {
|
|
|
+ break;
|
|
|
+ } else {
|
|
|
+ maxScaleTemp = maxScaleTemp + 0.1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setMaxScale(maxScaleTemp);
|
|
|
|
|
|
setMapList(data);
|
|
|
mapListCopy.current = data;
|
|
@@ -272,7 +294,7 @@ const Environment: React.FC = () => {
|
|
|
|
|
|
const changeMapList = useCallback(
|
|
|
(mscale, moveWidth, moveHeight) => {
|
|
|
- setScale(mscale < 1 ? mscale : 1);
|
|
|
+ setScale(mscale);
|
|
|
console.log('mscale', mscale);
|
|
|
var mapListTemp = JSON.parse(JSON.stringify(mapListCopy.current));
|
|
|
var mapListTemp2 = mapListTemp.map((item, index) => {
|
|
@@ -485,6 +507,7 @@ const Environment: React.FC = () => {
|
|
|
changeMapList={changeMapList}
|
|
|
mapList={mapCombineList}
|
|
|
mapSize={mapSize}
|
|
|
+ maxscale={maxScale}
|
|
|
type={'equipment'}
|
|
|
selFloorId={selFloorId}
|
|
|
render={(item, index) => {
|
|
@@ -537,7 +560,18 @@ const Environment: React.FC = () => {
|
|
|
<div
|
|
|
className={mapstyles.allDevice}
|
|
|
style={{
|
|
|
- transform: `scale(${scale},${scale})`,
|
|
|
+ transform:
|
|
|
+ scale == maxScale
|
|
|
+ ? 'scale(1)'
|
|
|
+ : item.width < 30 || item.height < 20
|
|
|
+ ? 'scale(0.3)'
|
|
|
+ : item.width < 40 || item.height < 30
|
|
|
+ ? 'scale(0.5)'
|
|
|
+ : item.width < 55 || item.height < 40
|
|
|
+ ? 'scale(0.6)'
|
|
|
+ : item.width < 75 || item.height < 50
|
|
|
+ ? 'scale(0.8)'
|
|
|
+ : 'scale(1)',
|
|
|
}}
|
|
|
>
|
|
|
{/* 所有设备的图标列表 */}
|
|
@@ -553,7 +587,7 @@ const Environment: React.FC = () => {
|
|
|
<Icon
|
|
|
className=""
|
|
|
type={ditem.equipType}
|
|
|
- style={{ color: '#fff', fontWeight: 'bold' }}
|
|
|
+ style={{ color: '#fff', fontWeight: 'bold', fontSize: '8px' }}
|
|
|
></Icon>
|
|
|
</div>
|
|
|
);
|
|
@@ -578,10 +612,10 @@ const Environment: React.FC = () => {
|
|
|
lastTime = new Date().getTime();
|
|
|
}}
|
|
|
style={{
|
|
|
- transform: `scale(${scale},${scale})`,
|
|
|
+ transform: `scale(${scale - 0.1 < 1 ? scale - 0.1 : 1})`,
|
|
|
}}
|
|
|
>
|
|
|
- <Icon className="" type="hover"></Icon>
|
|
|
+ <Icon className="" type="hover" style={{ fontSize: '10px' }}></Icon>
|
|
|
</div>
|
|
|
)}
|
|
|
<div className={mapstyles.content}>
|