index.tsx 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738
  1. import React, { useState, useEffect, useRef, useCallback } from 'react';
  2. import { FormattedMessage, useModel } from 'umi';
  3. import SearchInput from '@/sagacare_components/SearchInput';
  4. import PageHeader from '@/sagacare_components/PageHeader';
  5. import Map from '@/sagacare_components/map';
  6. import TopNavigator from '@/sagacare_components/topNavigator';
  7. import TopNavRight from './components/topNavRight';
  8. import DeviceModal from './components/deviceModal';
  9. import styles from './index.less';
  10. import mapstyles from '@/sagacare_components/map/index.less';
  11. import cx from 'classnames';
  12. import { Spin, Modal, message } from 'antd';
  13. import moment from 'moment';
  14. import { getMaxScale } from '@/hooks/useMap';
  15. import { ExclamationCircleOutlined } from '@ant-design/icons';
  16. import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
  17. import Icon from '@/tenants-ui/SgIcon';
  18. import type { navigatorItem } from '@/pages/Environment/index';
  19. import { projectObj } from '@/config/api.js';
  20. import {
  21. getMapList,
  22. queryEquipStatistics,
  23. queryDeviceTimeManage,
  24. } from '@/services/sagacare_service/environment';
  25. import {
  26. changeCurtain,
  27. changeAir,
  28. changeLight,
  29. getLamp,
  30. getAirInfo,
  31. } from '@/pages/Equipment/equipmentControl';
  32. //设备状态
  33. type equipStatus = {
  34. equipType: string;
  35. status: number;
  36. };
  37. //设备开启数量
  38. type statistics = {
  39. equipType: string;
  40. runCount: number;
  41. };
  42. const Environment: React.FC = () => {
  43. const { hasPersonList, querySpaceAdjustList } = useModel('sagacare_spaceFunc');
  44. const { changeLastFloorId } = useModel('sagacare_buildFloor');
  45. const { searchSpace } = useModel('sagacare_searchInfo');
  46. const { getSpaceFunc } = useModel('sagacare_spaceFunc');
  47. const { envir_all, equip_air, equip_lamp, envir_curtain } = equipImageMap;
  48. const [showModal, setShowModal] = useState<boolean>(false);
  49. const [showSpace, setShowSpace] = useState<API.MapInfo>({}); //当前弹框选中的空间
  50. const [navigatorList, setNavigatorList] = useState<navigatorItem[]>([
  51. {
  52. name: '全部设备',
  53. id: 'all',
  54. src: envir_all,
  55. //color: '#E5574F',
  56. color: '#E89E32',
  57. colorStr: '',
  58. },
  59. {
  60. name: '空调',
  61. id: 'airConditioner',
  62. src: equip_air,
  63. num: 0,
  64. color: '#5E8BCF',
  65. colorStr: '94,139,207,',
  66. },
  67. {
  68. name: '照明',
  69. id: 'light',
  70. src: equip_lamp,
  71. num: 0,
  72. color: '#FFE823',
  73. colorStr: '255,232,35,',
  74. },
  75. {
  76. name: '窗帘',
  77. id: 'curtain',
  78. src: envir_curtain,
  79. num: 0,
  80. color: '#E89E32',
  81. colorStr: '232, 158, 50,',
  82. },
  83. ]);
  84. const [scale, setScale] = useState<number>(0.8);
  85. const [maxScale, setMaxScale] = useState<number>(1);
  86. const [transXInit, setTransXInit] = useState<number>(0);
  87. const [mapList, setMapList] = useState<API.MapInfo[]>([]);
  88. const mapListCopy = useRef<any[]>([]);
  89. const [mapSize, setMapSize] = useState<any>({});
  90. const [equipMapList, setEquipMapList] = useState<any[]>([]);
  91. const [timeMapList, setTimeMapList] = useState<any[]>([]);
  92. const [selNav, setSelNav] = useState<navigatorItem>(navigatorList[0]);
  93. const [selFloorId, setSelFloorId] = useState<string>();
  94. const [mapCombineList, setMapCombineList] = useState<any[]>([]);
  95. const [loading, setLoading] = useState<boolean>(false);
  96. const changeFloorId = (data: string) => {
  97. //debugger;
  98. setSelFloorId(data);
  99. };
  100. //导航条切换
  101. const navigatorChange = (item: navigatorItem) => {
  102. setSelNav(item);
  103. };
  104. const showModalClick = (item) => {
  105. // console.log('showChart', item);
  106. setShowModal(true);
  107. setShowSpace(item);
  108. };
  109. //当前设备的状态 all全部开启 part部分开启 close全都关闭 还有类型type 包括airConditioner light curtain
  110. //根据设备状态返回不同的 颜色
  111. const getColorOpacity = (value: any, type?: string): string => {
  112. let colorStr = '';
  113. if (selNav.id == 'all') {
  114. //全部设备时 colorStr赋值
  115. var filterRes = navigatorList.filter(function (item) {
  116. return item.id == type;
  117. });
  118. colorStr = (filterRes[0] || {}).colorStr;
  119. } else {
  120. colorStr = selNav.colorStr;
  121. }
  122. if (selNav.id == 'curtain' || type == 'curtain') {
  123. if (value == 'noHave') {
  124. //没有
  125. return 'rgba(196, 196, 196, 0)';
  126. } else {
  127. return 'rgba(' + colorStr + '1)';
  128. }
  129. } else {
  130. if (value === 2) {
  131. //2 是部分开启
  132. return 'rgba(' + colorStr + '0.4)';
  133. } else if (value === 1) {
  134. //1 是开启
  135. return 'rgba(' + colorStr + '1)';
  136. } else if (value === 0 || value == 'nostatus') {
  137. //0是关闭
  138. return 'rgba(196, 196, 196, 0.6)';
  139. }
  140. }
  141. };
  142. const { confirm } = Modal;
  143. //单个空间的点击事情
  144. const spaceControl = (item, index: number) => {
  145. //全部设备 或者没有房间类型 则不可以点击
  146. if (selNav.id == 'all' || !item.canClick) return;
  147. //没有设备时
  148. if (item[selNav.id] == 'noHave') return;
  149. if (item[selNav.id] == 'nostatus') {
  150. message.success('该空间设备离线');
  151. return;
  152. }
  153. if (item[selNav.id] === 2) {
  154. //半开时
  155. confirm({
  156. title: '请确认',
  157. icon: <ExclamationCircleOutlined />,
  158. content: `是否进入单空间进行调节?`,
  159. okText: '确认',
  160. cancelText: '取消',
  161. onOk() {
  162. showModalClick(item);
  163. },
  164. onCancel() {
  165. //console.log('Cancel');
  166. },
  167. });
  168. return;
  169. }
  170. var status = item[selNav.id] === 1 ? '关闭' : '打开';
  171. confirm({
  172. title: '请确认',
  173. icon: <ExclamationCircleOutlined />,
  174. content: `确认${status}该${selNav.name}吗?`,
  175. okText: '确认',
  176. cancelText: '取消',
  177. onOk() {
  178. // function getDeviceStatus() {
  179. // var interval = setInterval(() => {
  180. // queryDeviceManage();
  181. // }, 1000);
  182. // setTimeout(() => {
  183. // console.log('setTimeout');
  184. // clearInterval(interval);
  185. // }, 60000);
  186. // }
  187. //现在加上循环调用 所以把手动关了
  188. function callback() {
  189. //这是在手动改变状态
  190. // var mapCopy = JSON.parse(JSON.stringify(mapCombineList));
  191. // mapCopy[index][selNav.id] = item[selNav.id] === 1 ? 0 : 1;
  192. // setMapCombineList(mapCopy);
  193. }
  194. //如果是空调
  195. if (selNav.id == 'airConditioner') {
  196. // function getDeviceStatus() {
  197. // //执行查询函数
  198. // getAirInfo(item, callback, 10, projectId);
  199. // }
  200. //changeAir(item, index, getDeviceStatus);
  201. changeAir(item, index, callback);
  202. }
  203. if (selNav.id == 'light') {
  204. // function getDeviceStatus() {
  205. // //请求状态 10是指循环调10次
  206. // getLamp(item, callback, 10);
  207. // }
  208. //debugger;
  209. // changeLight('one', [item], getDeviceStatus, status);
  210. changeLight('one', [item], callback, status);
  211. }
  212. if (selNav.id == 'curtain') {
  213. changeCurtain('one', [item], callback, status);
  214. }
  215. },
  216. onCancel() {
  217. //console.log('Cancel');
  218. },
  219. });
  220. };
  221. //获取地图 mapList
  222. useEffect(() => {
  223. if (selFloorId) {
  224. changeLastFloorId(selFloorId);
  225. setLoading(true);
  226. getMapList({
  227. //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
  228. floorId: selFloorId,
  229. })
  230. .then((res) => {
  231. setLoading(false);
  232. var data: API.MapInfo[] = (res.data || {}).spaceList || [];
  233. var bodyWidth = document.body.offsetWidth;
  234. var mapWidth = (res.data || {}).width || 800;
  235. if (mapWidth < bodyWidth) {
  236. var mscale = 1;
  237. setTransXInit((bodyWidth - mapWidth) / 2);
  238. } else {
  239. var mscale = Number((bodyWidth / mapWidth).toFixed(4));
  240. setTransXInit(0);
  241. }
  242. var mapSize: any = {
  243. width: mapWidth * mscale,
  244. height: (res.data || {}).height * mscale,
  245. };
  246. setMapSize(mapSize);
  247. //把地图变成 屏幕大小
  248. data.forEach((item, index) => {
  249. item.width = item.width * mscale;
  250. item.height = item.height * mscale;
  251. item.left = item.left * mscale;
  252. item.top = item.top * mscale;
  253. });
  254. var maxScaleTemp = getMaxScale(data);
  255. setMaxScale(maxScaleTemp);
  256. setMapList(data);
  257. mapListCopy.current = data;
  258. //setSelNav(navigatorList[0]); //每当重新请求地图时 让选中导航的默认是第一个
  259. })
  260. .catch(() => {
  261. setLoading(false);
  262. });
  263. } else {
  264. setMapList([]);
  265. }
  266. }, [selFloorId]);
  267. const changeMapList = useCallback(
  268. (mscale, moveWidth, moveHeight) => {
  269. setScale(mscale);
  270. console.log('mscale', mscale);
  271. var mapListTemp = JSON.parse(JSON.stringify(mapListCopy.current));
  272. var mapListTemp2 = mapListTemp.map((item, index) => {
  273. if (index == 0) {
  274. // console.log('mapListTemp', mscale, item.width, item.width * mscale);
  275. }
  276. item.width = item.width * mscale;
  277. item.height = item.height * mscale;
  278. item.left = item.left * mscale - moveWidth;
  279. item.top = item.top * mscale - moveHeight;
  280. return item;
  281. });
  282. setMapList(mapListTemp2);
  283. },
  284. [mapListCopy],
  285. );
  286. const queryDeviceManage = () => {
  287. //setLoading(true);
  288. return queryEquipStatistics({
  289. floorId: selFloorId,
  290. projectId: projectObj.projectId,
  291. })
  292. .then((res) => {
  293. // setLoading(false);
  294. if (!setTimer.current) return;
  295. var statistics = res.data.statistics || [];
  296. //赋值 运行中的设备数量
  297. navigatorList.forEach(function (nItem) {
  298. var fres = statistics.filter((sItem: statistics) => {
  299. return sItem.equipType == nItem.id;
  300. });
  301. nItem.num = (fres[0] || {}).runCount;
  302. });
  303. setNavigatorList(navigatorList);
  304. //设备空间信息
  305. var spaceList = res.data.spaceList || [];
  306. spaceList.forEach((item: any) => {
  307. var allType = ['airConditioner', 'light', 'curtain'];
  308. allType.forEach((etype) => {
  309. var filterEquip = (item.equipList || []).filter((eItem: any) => {
  310. return eItem.equipType == etype;
  311. });
  312. //有当前设备
  313. if (filterEquip.length > 0) {
  314. item.equipStatusList = item.equipStatusList ? item.equipStatusList : [];
  315. var filterRes = (item.equipStatusList || []).filter((eItem: equipStatus) => {
  316. return eItem.equipType == etype;
  317. });
  318. //不存时 赋值not 如果没有设备状态 则说明没有设备 1 是开启 0是关闭
  319. if (filterRes.length > 0) {
  320. item[etype] = filterRes[0].status;
  321. } else {
  322. item[etype] = 'nostatus';
  323. item.equipStatusList.push({
  324. equipType: etype,
  325. status: 'nostatus',
  326. });
  327. }
  328. } else {
  329. item[etype] = 'noHave';
  330. }
  331. });
  332. });
  333. //console.log('spaceList', spaceList);
  334. //debugger;
  335. setEquipMapList(spaceList);
  336. return 'next';
  337. })
  338. .catch(() => {
  339. // setLoading(false);
  340. });
  341. };
  342. let setTimer = useRef({});
  343. //获取设备状态 设备种类
  344. useEffect(() => {
  345. // function getDeviceStatus() {
  346. // queryDeviceManage().then((res) => {
  347. // setTimeout(() => {
  348. // getDeviceStatus();
  349. // }, 20000);
  350. // });
  351. // }
  352. if (selFloorId) {
  353. queryDeviceManage(); //第一次执行
  354. if (setTimer.current) {
  355. clearInterval(setTimer.current);
  356. setTimer.current = null;
  357. }
  358. //循环调接口
  359. setTimer.current = setInterval(() => {
  360. queryDeviceManage();
  361. }, 3000);
  362. return () => {
  363. //console.log('selFloorId', selFloorId);
  364. clearInterval(setTimer.current);
  365. setTimer.current = null;
  366. };
  367. }
  368. }, [selFloorId]);
  369. //获取时间列表 spaceTimeList
  370. useEffect(() => {
  371. if (selFloorId) {
  372. //setLoading(true);
  373. queryDeviceTimeManage({
  374. floorId: selFloorId,
  375. //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
  376. date: moment().format('YYYYMMDD'),
  377. })
  378. .then(function (res) {
  379. // setLoading(false);
  380. var resList = res.content || [];
  381. setTimeMapList(resList);
  382. })
  383. .catch(() => {
  384. // setLoading(false);
  385. });
  386. }
  387. }, [selFloorId]);
  388. useEffect(() => {
  389. if (selFloorId) {
  390. querySpaceAdjustList(selFloorId);
  391. }
  392. }, [selFloorId]);
  393. //合并空间设备数据 和 空间数据
  394. useEffect(() => {
  395. var combineList: any = [];
  396. mapList.map(function (mitem) {
  397. var spaceId = mitem.spaceId;
  398. var filterSpace1 = equipMapList.filter((ele) => {
  399. return ele.id == spaceId;
  400. });
  401. var filterSpace2 = timeMapList.filter((ele) => {
  402. return ele.id == spaceId;
  403. });
  404. var filterSpace3 = hasPersonList.filter((ele) => {
  405. return ele.id == spaceId;
  406. });
  407. var combine = Object.assign({}, filterSpace3[0], filterSpace1[0], filterSpace2[0], mitem);
  408. combineList.push(combine);
  409. });
  410. setMapCombineList(combineList);
  411. console.log('combine');
  412. }, [equipMapList, mapList, timeMapList, hasPersonList]);
  413. let firtTime: number = 0;
  414. let lastTime: number = 0;
  415. return (
  416. <>
  417. <PageHeader title={<FormattedMessage id="menu.equipment" />} action={<SearchInput />} />
  418. <TopNavigator
  419. navigatorList={navigatorList}
  420. type={'equipment'}
  421. navigatorChange={navigatorChange}
  422. action={
  423. <TopNavRight
  424. selNavObj={selNav}
  425. navigatorList={navigatorList}
  426. mapList={mapCombineList}
  427. queryDeviceManage={queryDeviceManage}
  428. ></TopNavRight>
  429. }
  430. changeFloorId={changeFloorId}
  431. selParamObj={selNav}
  432. ></TopNavigator>
  433. <div className={styles.maptop}>
  434. {selNav.id !== 'all' && selNav.id !== 'curtain' && (
  435. <div className={styles.left}>
  436. <span>
  437. <Icon
  438. className=""
  439. type="youren"
  440. style={{ color: '#CE9F27', fontWeight: 'bold' }}
  441. ></Icon>
  442. 有人
  443. </span>
  444. <span>
  445. <Icon
  446. className=""
  447. type="wuren"
  448. style={{ color: '#8B949E', fontWeight: 'bold' }}
  449. ></Icon>
  450. 无人
  451. </span>
  452. </div>
  453. )}
  454. {selNav.id !== 'all' && selNav.id !== 'curtain' && (
  455. <div className={styles.right}>
  456. <div className={styles.rightOpen}>
  457. <div>
  458. <span
  459. className={styles.circle}
  460. style={{ backgroundColor: 'rgba(' + selNav.colorStr + '1)' }}
  461. ></span>
  462. <span>开启</span>
  463. </div>
  464. <div>
  465. <span
  466. className={styles.circle}
  467. style={{ backgroundColor: 'rgba(' + selNav.colorStr + '0.4)' }}
  468. ></span>
  469. <span>部分开启</span>
  470. </div>
  471. <div>
  472. <span
  473. className={styles.circle}
  474. style={{ backgroundColor: 'rgba(196, 196, 196, 0.6)' }}
  475. ></span>
  476. <span>关闭</span>
  477. </div>
  478. </div>
  479. </div>
  480. )}
  481. {selNav.id == 'curtain' && (
  482. <div className={styles.right}>
  483. <div>
  484. <span
  485. className={styles.circle}
  486. style={{ backgroundColor: 'rgba(' + selNav.colorStr + '1)' }}
  487. ></span>
  488. <span>有</span>
  489. </div>
  490. <div>
  491. <span className={cx(styles.circle, styles.noCurtain)}></span>
  492. <span>无</span>
  493. </div>
  494. </div>
  495. )}
  496. </div>
  497. <Spin spinning={loading} wrapperClassName={mapstyles.spinnclass}>
  498. {mapCombineList.length > 0 && (
  499. <Map
  500. changeMapList={changeMapList}
  501. mapList={mapCombineList}
  502. mapSize={mapSize}
  503. maxscale={maxScale}
  504. transXInit={transXInit}
  505. type={'equipment'}
  506. selFloorId={selFloorId}
  507. render={(item, index) => {
  508. return (
  509. <div
  510. className={mapstyles.houseWrap}
  511. key={index + item.id}
  512. style={{
  513. left: item.left,
  514. top: item.top,
  515. width: item.width,
  516. height: item.height,
  517. }}
  518. >
  519. <div
  520. style={{
  521. backgroundColor: item.canClick
  522. ? selNav.id == 'all'
  523. ? 'rgba(196, 196, 196, 0.4)'
  524. : getColorOpacity(item[selNav.id])
  525. : '',
  526. }}
  527. className={cx(mapstyles.house, {
  528. [mapstyles.notclick]: !item.canClick || item[selNav.id] == 'noHave',
  529. [mapstyles.searchSel]: item.spaceId && item.spaceId === searchSpace.spaceId,
  530. })}
  531. onClick={(event) => {
  532. event.stopPropagation();
  533. if (lastTime - firtTime < 200) {
  534. spaceControl(item, index);
  535. }
  536. }}
  537. onMouseDown={(event) => {
  538. //event.stopPropagation();
  539. firtTime = new Date().getTime();
  540. }}
  541. onMouseUp={(event) => {
  542. //event.stopPropagation();
  543. lastTime = new Date().getTime();
  544. }}
  545. >
  546. {/* {selNav.id !== 'all' && item[selNav.id] == 'noHave' && (
  547. <div className={mapstyles.noDevice}>
  548. <span className={mapstyles.noText}>无设备</span>
  549. </div>
  550. style={{ display: item.width > 80 && item.height > 50 ? 'flex' : 'none' }}
  551. )} */}
  552. {selNav.id == 'all' && (
  553. <div
  554. className={mapstyles.allDevice}
  555. style={{
  556. transform:
  557. scale == maxScale
  558. ? 'scale(1)'
  559. : item.width < 24 * (item.equipStatusList || []).length ||
  560. item.height < 24
  561. ? 'scale(0.3)'
  562. : 'scale(1)',
  563. }}
  564. >
  565. {/* 所有设备的图标列表 */}
  566. {(item.equipStatusList || []).map((ditem: equipStatus, dindex: number) => {
  567. return (
  568. <div
  569. key={dindex + 'device'}
  570. className={mapstyles.icon}
  571. style={{
  572. backgroundColor: getColorOpacity(ditem.status, ditem.equipType),
  573. }}
  574. >
  575. <Icon
  576. className=""
  577. type={ditem.equipType}
  578. style={{ color: '#fff', fontWeight: 'bold', fontSize: '8px' }}
  579. ></Icon>
  580. </div>
  581. );
  582. })}
  583. </div>
  584. )}
  585. {(selNav.id == 'airConditioner' || selNav.id == 'light') &&
  586. item.isPassengerPass &&
  587. item.canClick && (
  588. <div
  589. className={mapstyles.hasPerson}
  590. style={{
  591. transform:
  592. scale == maxScale
  593. ? 'scale(1)'
  594. : item.width < 46 || item.height < 25
  595. ? 'scale(0.4)'
  596. : 'scale(1)',
  597. }}
  598. >
  599. <Icon
  600. className=""
  601. type="youren"
  602. style={{ color: '#CE9F27', fontWeight: 'bold' }}
  603. ></Icon>
  604. </div>
  605. )}
  606. {(selNav.id == 'airConditioner' || selNav.id == 'light') &&
  607. item.isPassengerPass == false &&
  608. item.canClick && (
  609. <div
  610. className={mapstyles.hasPerson}
  611. style={{
  612. transform:
  613. scale == maxScale
  614. ? 'scale(1)'
  615. : item.width < 46 || item.height < 25
  616. ? 'scale(0.4)'
  617. : 'scale(1)',
  618. }}
  619. >
  620. <Icon
  621. className=""
  622. type="wuren"
  623. style={{ color: '#8B949E', fontWeight: 'bold' }}
  624. ></Icon>
  625. </div>
  626. )}
  627. {item.canClick && item[selNav.id] != 'noHave' && (
  628. <div
  629. className={mapstyles.showModal}
  630. onClick={(event) => {
  631. event.stopPropagation();
  632. if (lastTime - firtTime < 400) {
  633. showModalClick(item);
  634. }
  635. }}
  636. onMouseDown={(event) => {
  637. //event.stopPropagation();
  638. firtTime = new Date().getTime();
  639. }}
  640. onMouseUp={(event) => {
  641. //event.stopPropagation();
  642. lastTime = new Date().getTime();
  643. }}
  644. style={{
  645. transform: `scale(${scale - 0.1 < 1 ? scale - 0.1 : 1})`,
  646. }}
  647. >
  648. <Icon className="" type="hover" style={{ fontSize: '10px' }}></Icon>
  649. </div>
  650. )}
  651. <div className={mapstyles.content}>
  652. <Icon
  653. className=""
  654. type={getSpaceFunc(item.roomFuncType)}
  655. style={{
  656. fontSize: 18,
  657. display: item.width > 28 && item.height > 50 ? 'block' : 'none',
  658. }}
  659. ></Icon>
  660. <div
  661. className={mapstyles.name}
  662. style={{
  663. display:
  664. (item.width > 64 && item.height > 80) ||
  665. item.height > 140 ||
  666. item.width > 120 ||
  667. scale == maxScale
  668. ? 'block'
  669. : 'none',
  670. }}
  671. >
  672. {item.localName}
  673. </div>
  674. {(getSpaceFunc(item.roomFuncType) || item.localName) &&
  675. !(
  676. (getSpaceFunc(item.roomFuncType) &&
  677. item.width > 28 &&
  678. item.height > 50) ||
  679. (item.localName &&
  680. ((item.width > 64 && item.height > 80) ||
  681. item.height > 140 ||
  682. item.width > 120 ||
  683. scale == maxScale))
  684. ) && <div className={mapstyles.pointer}>.</div>}
  685. </div>
  686. </div>
  687. </div>
  688. );
  689. }}
  690. ></Map>
  691. )}
  692. </Spin>
  693. {showModal && (
  694. <DeviceModal
  695. showSpace={showSpace}
  696. onClose={() => {
  697. setShowModal(false);
  698. }}
  699. ></DeviceModal>
  700. )}
  701. </>
  702. );
  703. };
  704. export default Environment;