|
@@ -10,6 +10,7 @@ import DeviceModal from './components/deviceModal';
|
|
|
|
|
|
import styles from './index.less';
|
|
|
import mapstyles from '@/assets/css/map.less';
|
|
|
+import cx from 'classnames';
|
|
|
import { Spin, Modal, message } from 'antd';
|
|
|
import moment from 'moment';
|
|
|
|
|
@@ -44,10 +45,8 @@ type statistics = {
|
|
|
};
|
|
|
const Environment: React.FC = () => {
|
|
|
const { getSpaceFunc } = useModel('spaceFunc');
|
|
|
- const { changeSearchFloorId } = useModel('searchInfo');
|
|
|
const { envir_all, equip_air, equip_lamp, envir_curtain } = equipImageMap;
|
|
|
|
|
|
- const [searchText, setSearchText] = useState<{ text: any }>();
|
|
|
//const [searchSpace, setSearchSpace] = useState<{}>();
|
|
|
// const [searchFloorId, setSearchFloorId] = useState<{}>();
|
|
|
// const [searchBuildId, setSearchBuildId] = useState<{}>();
|
|
@@ -214,7 +213,6 @@ const Environment: React.FC = () => {
|
|
|
};
|
|
|
//获取地图 mapList
|
|
|
useEffect(() => {
|
|
|
- //changeSearchFloorId('');
|
|
|
if (selFloorId) {
|
|
|
setLoading(true);
|
|
|
|
|
@@ -392,90 +390,100 @@ const Environment: React.FC = () => {
|
|
|
render={(item, index) => {
|
|
|
return (
|
|
|
<div
|
|
|
+ className={mapstyles.houseWrap}
|
|
|
key={index + item.id}
|
|
|
- className={mapstyles.house}
|
|
|
style={{
|
|
|
left: item.left,
|
|
|
top: item.top,
|
|
|
width: item.width,
|
|
|
height: item.height,
|
|
|
- background: item.roomFuncType
|
|
|
- ? selNav.id == 'all'
|
|
|
- ? 'rgba(196, 196, 196, 0.2)'
|
|
|
- : getColorOpacity(item[selNav.id])
|
|
|
- : 'repeating-linear-gradient(45deg, rgb(226 226 226), #ffffff 8px)',
|
|
|
- }}
|
|
|
- onClick={(event) => {
|
|
|
- event.stopPropagation();
|
|
|
- if (lastTime - firtTime < 200) {
|
|
|
- spaceControl(item, index);
|
|
|
- }
|
|
|
- }}
|
|
|
- onMouseDown={(event) => {
|
|
|
- //event.stopPropagation();
|
|
|
- firtTime = new Date().getTime();
|
|
|
- }}
|
|
|
- onMouseUp={(event) => {
|
|
|
- //event.stopPropagation();
|
|
|
- lastTime = new Date().getTime();
|
|
|
}}
|
|
|
>
|
|
|
- {selNav.id !== 'all' && item[selNav.id] == 'not' && (
|
|
|
- <div className={mapstyles.noDevice}>
|
|
|
- <span className={mapstyles.noText}>无设备</span>
|
|
|
+ <div
|
|
|
+ style={{
|
|
|
+ backgroundColor: item.roomFuncType
|
|
|
+ ? selNav.id == 'all'
|
|
|
+ ? 'rgba(196, 196, 196, 0.4)'
|
|
|
+ : getColorOpacity(item[selNav.id])
|
|
|
+ : '',
|
|
|
+ }}
|
|
|
+ className={cx(mapstyles.house, {
|
|
|
+ [mapstyles.notclick]:
|
|
|
+ !item.roomFuncType || (selNav.id !== 'all' && item[selNav.id] == 'not'),
|
|
|
+ })}
|
|
|
+ onClick={(event) => {
|
|
|
+ event.stopPropagation();
|
|
|
+ if (lastTime - firtTime < 200) {
|
|
|
+ spaceControl(item, index);
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ onMouseDown={(event) => {
|
|
|
+ //event.stopPropagation();
|
|
|
+ firtTime = new Date().getTime();
|
|
|
+ }}
|
|
|
+ onMouseUp={(event) => {
|
|
|
+ //event.stopPropagation();
|
|
|
+ lastTime = new Date().getTime();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {/* {selNav.id !== 'all' && item[selNav.id] == 'not' && (
|
|
|
+ <div className={mapstyles.noDevice}>
|
|
|
+ <span className={mapstyles.noText}>无设备</span>
|
|
|
+ </div>
|
|
|
+ )} */}
|
|
|
+ {selNav.id == 'all' && (
|
|
|
+ <div className={mapstyles.allDevice}>
|
|
|
+ {/* 所有设备的图标列表 */}
|
|
|
+ {(item.equipStatusList || []).map((ditem: equipStatus, dindex: number) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ key={dindex + 'device'}
|
|
|
+ className={mapstyles.icon}
|
|
|
+ style={{
|
|
|
+ backgroundColor: getColorOpacity(ditem.status, ditem.equipType),
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Icon
|
|
|
+ className=""
|
|
|
+ type={ditem.equipType}
|
|
|
+ style={{ color: '#ffffff', fontWeight: 'bold' }}
|
|
|
+ ></Icon>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ {item.roomFuncType && (
|
|
|
+ <div
|
|
|
+ className={mapstyles.showModal}
|
|
|
+ onClick={(event) => {
|
|
|
+ event.stopPropagation();
|
|
|
+ if (lastTime - firtTime < 200) {
|
|
|
+ showModalClick(item);
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ onMouseDown={(event) => {
|
|
|
+ //event.stopPropagation();
|
|
|
+ firtTime = new Date().getTime();
|
|
|
+ }}
|
|
|
+ onMouseUp={(event) => {
|
|
|
+ //event.stopPropagation();
|
|
|
+ lastTime = new Date().getTime();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Icon className="" type="hover"></Icon>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ <div className={mapstyles.content}>
|
|
|
+ <div className={mapstyles.contentDiv}>
|
|
|
+ <Icon
|
|
|
+ className=""
|
|
|
+ type={getSpaceFunc(item.roomFuncType)}
|
|
|
+ style={{ fontSize: 20 }}
|
|
|
+ ></Icon>
|
|
|
+ <div className={mapstyles.name}>{item.localName}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- )}
|
|
|
- {selNav.id == 'all' && (
|
|
|
- <div className={mapstyles.allDevice}>
|
|
|
- {/* 所有设备的图标列表 */}
|
|
|
- {(item.equipStatusList || []).map((ditem: equipStatus, dindex: number) => {
|
|
|
- return (
|
|
|
- <div
|
|
|
- key={dindex + 'device'}
|
|
|
- className={mapstyles.icon}
|
|
|
- style={{
|
|
|
- backgroundColor: getColorOpacity(ditem.status, ditem.equipType),
|
|
|
- }}
|
|
|
- >
|
|
|
- <Icon
|
|
|
- className=""
|
|
|
- type={ditem.equipType}
|
|
|
- style={{ color: '#ffffff', fontWeight: 'bold' }}
|
|
|
- ></Icon>
|
|
|
- </div>
|
|
|
- );
|
|
|
- })}
|
|
|
- </div>
|
|
|
- )}
|
|
|
- {item.roomFuncType && (
|
|
|
- <div
|
|
|
- className={mapstyles.showModal}
|
|
|
- onClick={(event) => {
|
|
|
- event.stopPropagation();
|
|
|
- if (lastTime - firtTime < 200) {
|
|
|
- showModalClick(item);
|
|
|
- }
|
|
|
- }}
|
|
|
- onMouseDown={(event) => {
|
|
|
- //event.stopPropagation();
|
|
|
- firtTime = new Date().getTime();
|
|
|
- }}
|
|
|
- onMouseUp={(event) => {
|
|
|
- //event.stopPropagation();
|
|
|
- lastTime = new Date().getTime();
|
|
|
- }}
|
|
|
- >
|
|
|
- <Icon className="" type="hover"></Icon>
|
|
|
- </div>
|
|
|
- )}
|
|
|
-
|
|
|
- <div className={mapstyles.content}>
|
|
|
- <Icon
|
|
|
- className=""
|
|
|
- type={getSpaceFunc(item.roomFuncType)}
|
|
|
- style={{ fontSize: 20 }}
|
|
|
- ></Icon>
|
|
|
- <div className={mapstyles.name}>{item.localName}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|