|
@@ -10,9 +10,10 @@ import DeviceModal from './components/deviceModal';
|
|
|
|
|
|
import styles from './index.less';
|
|
|
import mapstyles from '@/assets/css/map.less';
|
|
|
-import { Spin } from 'antd';
|
|
|
+import { Spin, Modal, message } from 'antd';
|
|
|
import moment from 'moment';
|
|
|
|
|
|
+import { ExclamationCircleOutlined } from '@ant-design/icons';
|
|
|
import { equipImageMap } from '@/config/image.js';
|
|
|
import Icon from '@/tenants-ui/Icon';
|
|
|
import type { navigatorItem } from '@/pages/Environment/index';
|
|
@@ -21,6 +22,7 @@ import {
|
|
|
queryEquipStatistics,
|
|
|
queryDeviceTimeManage,
|
|
|
} from '@/services/ant-design-pro/environment';
|
|
|
+import { getFeedbackDocumentsHttp, changeAirHttp } from '@/services/ant-design-pro/equipment';
|
|
|
|
|
|
//设备状态
|
|
|
type equipStatus = {
|
|
@@ -93,7 +95,6 @@ const Environment: React.FC = () => {
|
|
|
const showModalClick = (item) => {
|
|
|
console.log('showChart');
|
|
|
setShowModal(true);
|
|
|
-
|
|
|
setShowSpace(item);
|
|
|
};
|
|
|
|
|
@@ -122,10 +123,63 @@ const Environment: React.FC = () => {
|
|
|
return 'rgba(196, 196, 196, 0.6)';
|
|
|
}
|
|
|
};
|
|
|
+ const { confirm } = Modal;
|
|
|
+ //空调的调节 0是关闭 1 是开启 2 是部分开启
|
|
|
+ //这是存在疑惑 部分开启怎么办
|
|
|
+ const changeAir = (sitem, index) => {
|
|
|
+ const itemId = sitem.airConditioner === 0 ? 12 : 10; // 10关闭 12开启
|
|
|
+ const paramsObj = {
|
|
|
+ objectId: sitem.id, // 空间id
|
|
|
+ valueType: 1, // 固定为1
|
|
|
+ itemId: itemId,
|
|
|
+ };
|
|
|
+ changeAirHttp(paramsObj).then((res) => {
|
|
|
+ if (res.result == 'success') {
|
|
|
+ message.success('指令下发成功');
|
|
|
+ //这是没有部分开启一说吧
|
|
|
+ debugger;
|
|
|
+ // sitem.airConditioner = res.isClose ? 0 : 1; //改变某空间空调的状态
|
|
|
+ //mapCombineList[index]['airConditioner'] = res.isClose ? 0 : 1;
|
|
|
+ var mapCopy = JSON.parse(JSON.stringify(mapCombineList));
|
|
|
+ mapCopy[index]['airConditioner'] = res.isClose ? 0 : 1;
|
|
|
+ setMapCombineList(mapCopy);
|
|
|
+ } else {
|
|
|
+ message.error('操作失败,请重试');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ //单个空间的点击事情
|
|
|
+ const spaceControl = (item, index: number) => {
|
|
|
+ if (selNav.id == 'all' || !item.roomFuncType) return;
|
|
|
+ var status = item[selNav.id] === 0 ? '打开' : '关闭';
|
|
|
+ confirm({
|
|
|
+ title: '确认',
|
|
|
+ icon: <ExclamationCircleOutlined />,
|
|
|
+ content: `确认${status}该${selNav.name}吗?`,
|
|
|
+ okText: '确认',
|
|
|
+ cancelText: '取消',
|
|
|
+ onOk() {
|
|
|
+ //如果是空调
|
|
|
+ if (selNav.id == 'airConditioner') {
|
|
|
+ changeAir(item, index);
|
|
|
+ }
|
|
|
+ if (selNav.id == 'light') {
|
|
|
+ }
|
|
|
+ if (selNav.id == 'curtain') {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onCancel() {
|
|
|
+ //console.log('Cancel');
|
|
|
+ },
|
|
|
+ });
|
|
|
+ };
|
|
|
//获取地图 mapList
|
|
|
useEffect(() => {
|
|
|
if (selFloorId) {
|
|
|
- getMapList({ floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454' }).then((res) => {
|
|
|
+ getMapList({
|
|
|
+ //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
|
|
|
+ floorId: selFloorId,
|
|
|
+ }).then((res) => {
|
|
|
//debugger;
|
|
|
var data: API.MapInfo[] = (res.data || {}).spaceList || [];
|
|
|
setMapList(data);
|
|
@@ -137,7 +191,8 @@ const Environment: React.FC = () => {
|
|
|
if (selFloorId) {
|
|
|
setLoading(true);
|
|
|
queryEquipStatistics({
|
|
|
- floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
|
|
|
+ //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
|
|
|
+ floorId: selFloorId,
|
|
|
projectId: 'Pj1101080259',
|
|
|
})
|
|
|
.then((res) => {
|
|
@@ -174,8 +229,8 @@ const Environment: React.FC = () => {
|
|
|
if (selFloorId) {
|
|
|
setLoading(true);
|
|
|
queryDeviceTimeManage({
|
|
|
- //floorId: selFloorId,
|
|
|
- floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
|
|
|
+ floorId: selFloorId,
|
|
|
+ //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
|
|
|
date: moment().format('YYYYMMDD'),
|
|
|
})
|
|
|
.then(function (res) {
|
|
@@ -204,8 +259,12 @@ const Environment: React.FC = () => {
|
|
|
|
|
|
combineList.push(combine);
|
|
|
});
|
|
|
+ //debugger;
|
|
|
setMapCombineList(combineList);
|
|
|
+ debugger;
|
|
|
}, [equipMapList, mapList, timeMapList]);
|
|
|
+ let firtTime: number = 0;
|
|
|
+ let lastTime: number = 0;
|
|
|
return (
|
|
|
<>
|
|
|
<PageHeader
|
|
@@ -255,69 +314,91 @@ const Environment: React.FC = () => {
|
|
|
)}
|
|
|
</div>
|
|
|
<Spin spinning={loading}>
|
|
|
- <Map
|
|
|
- searchText={searchText}
|
|
|
- mapList={mapCombineList}
|
|
|
- type={'equipment'}
|
|
|
- render={(item, index) => {
|
|
|
- return (
|
|
|
- <div
|
|
|
- key={index + 'house'}
|
|
|
- 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)',
|
|
|
- }}
|
|
|
- >
|
|
|
- {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>
|
|
|
- )}
|
|
|
+ {mapCombineList.length > 0 && (
|
|
|
+ <Map
|
|
|
+ searchText={searchText}
|
|
|
+ mapList={mapCombineList}
|
|
|
+ type={'equipment'}
|
|
|
+ render={(item, index) => {
|
|
|
+ return (
|
|
|
<div
|
|
|
- className={mapstyles.showModal}
|
|
|
- onClick={() => {
|
|
|
- showModalClick(item);
|
|
|
+ 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 < 300) {
|
|
|
+ spaceControl(item, index);
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ onMouseDown={(event) => {
|
|
|
+ console.log(1);
|
|
|
+ //event.stopPropagation();
|
|
|
+ firtTime = new Date().getTime();
|
|
|
+ }}
|
|
|
+ onMouseUp={(event) => {
|
|
|
+ console.log(2);
|
|
|
+ //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>
|
|
|
+ {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();
|
|
|
+ showModalClick(item);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <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>
|
|
|
- </div>
|
|
|
- );
|
|
|
- }}
|
|
|
- ></Map>
|
|
|
+ );
|
|
|
+ }}
|
|
|
+ ></Map>
|
|
|
+ )}
|
|
|
</Spin>
|
|
|
{showModal && (
|
|
|
<DeviceModal
|