|
@@ -30,6 +30,7 @@ import {
|
|
|
changeCurtain,
|
|
|
changeAir,
|
|
|
changeLight,
|
|
|
+ changeSocket,
|
|
|
getLamp,
|
|
|
getAirInfo,
|
|
|
} from '@/pages/Equipment/equipmentControl';
|
|
@@ -44,13 +45,19 @@ type statistics = {
|
|
|
equipType: string;
|
|
|
runCount: number;
|
|
|
};
|
|
|
+
|
|
|
+export type socketType = {
|
|
|
+ scode: string;
|
|
|
+ code: string;
|
|
|
+ name: string;
|
|
|
+ openNum: number;
|
|
|
+};
|
|
|
const Environment: React.FC = () => {
|
|
|
const { hasPersonList, querySpaceAdjustList } = useModel('sagacare_spaceFunc');
|
|
|
-
|
|
|
const { changeLastFloorId } = useModel('sagacare_buildFloor');
|
|
|
const { searchSpace } = useModel('sagacare_searchInfo');
|
|
|
const { getSpaceFunc } = useModel('sagacare_spaceFunc');
|
|
|
- const { envir_all, equip_air, equip_lamp, envir_curtain } = equipImageMap;
|
|
|
+ const { envir_all, equip_air, equip_lamp, envir_curtain, envir_socket } = equipImageMap;
|
|
|
|
|
|
const [showModal, setShowModal] = useState<boolean>(false);
|
|
|
const [showSpace, setShowSpace] = useState<API.MapInfo>({}); //当前弹框选中的空间
|
|
@@ -67,7 +74,7 @@ const Environment: React.FC = () => {
|
|
|
name: '空调',
|
|
|
id: 'airConditioner',
|
|
|
src: equip_air,
|
|
|
- num: 0,
|
|
|
+ num: '--',
|
|
|
color: '#5E8BCF',
|
|
|
colorStr: '94,139,207,',
|
|
|
},
|
|
@@ -75,7 +82,7 @@ const Environment: React.FC = () => {
|
|
|
name: '照明',
|
|
|
id: 'light',
|
|
|
src: equip_lamp,
|
|
|
- num: 0,
|
|
|
+ num: '--',
|
|
|
color: '#FFE823',
|
|
|
colorStr: '255,232,35,',
|
|
|
},
|
|
@@ -83,11 +90,33 @@ const Environment: React.FC = () => {
|
|
|
name: '窗帘',
|
|
|
id: 'curtain',
|
|
|
src: envir_curtain,
|
|
|
- num: 0,
|
|
|
+ num: '--',
|
|
|
color: '#E89E32',
|
|
|
colorStr: '232, 158, 50,',
|
|
|
},
|
|
|
+ {
|
|
|
+ name: '插座',
|
|
|
+ id: 'socket',
|
|
|
+ src: envir_socket,
|
|
|
+ num: '--',
|
|
|
+ color: '#9FB7CD',
|
|
|
+ colorStr: '159, 183, 205,',
|
|
|
+ },
|
|
|
];
|
|
|
+ const socketTypeObj = {
|
|
|
+ socket_1: '民用插座',
|
|
|
+ socket_2: '工业用插座',
|
|
|
+ socket_3: '防水插座',
|
|
|
+ socket_4: '普通插座',
|
|
|
+ socket_5: '电源插座',
|
|
|
+ socket_6: '电脑插座',
|
|
|
+ socket_7: '电话插座',
|
|
|
+ socket_8: '视频、音频插座',
|
|
|
+ socket_9: '移动插座',
|
|
|
+ socket_10: 'USB插座',
|
|
|
+ socket_11: '饮水设备插座',
|
|
|
+ socket_99: '其他',
|
|
|
+ };
|
|
|
const [navigatorList, setNavigatorList] = useState<any[]>([]);
|
|
|
const [scale, setScale] = useState<number>(0.8);
|
|
|
const [maxScale, setMaxScale] = useState<number>(1);
|
|
@@ -104,7 +133,13 @@ const Environment: React.FC = () => {
|
|
|
const [selFloorId, setSelFloorId] = useState<string>();
|
|
|
const [mapCombineList, setMapCombineList] = useState<any[]>([]);
|
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
|
-
|
|
|
+ const [socketTypeArr, setSocketTypeArr] = useState<socketType[]>([]);
|
|
|
+ const [selSocketType, setSelSocketType] = useState<socketType>({
|
|
|
+ name: '全部',
|
|
|
+ scode: 'all',
|
|
|
+ code: 'all',
|
|
|
+ openNum: 0,
|
|
|
+ });
|
|
|
const changeFloorId = (data: string) => {
|
|
|
//debugger;
|
|
|
setSelFloorId(data);
|
|
@@ -113,6 +148,16 @@ const Environment: React.FC = () => {
|
|
|
const navigatorChange = (item: navigatorItem) => {
|
|
|
setSelNav(item);
|
|
|
};
|
|
|
+ //插座的二级菜单
|
|
|
+ const socketTypeChange = (item: socketType) => {
|
|
|
+ setSelSocketType(item);
|
|
|
+ // navigatorList.forEach(function (nItem) {
|
|
|
+ // if (nItem.id == 'socket') {
|
|
|
+ // nItem.num = selSocketType;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // setNavigatorList(navigatorList);
|
|
|
+ };
|
|
|
const showModalClick = (item) => {
|
|
|
// console.log('showChart', item);
|
|
|
setShowModal(true);
|
|
@@ -134,7 +179,8 @@ const Environment: React.FC = () => {
|
|
|
colorStr = selNav.colorStr;
|
|
|
}
|
|
|
if (selNav.id == 'curtain' || type == 'curtain') {
|
|
|
- if (value == 'noHave') {
|
|
|
+ //console.log('valuevaluevaluevalue', value);
|
|
|
+ if (value == 'noHave' || !value) {
|
|
|
//没有
|
|
|
return 'rgba(196, 196, 196, 0)';
|
|
|
} else {
|
|
@@ -160,7 +206,11 @@ const Environment: React.FC = () => {
|
|
|
//全部设备 或者没有房间类型 则不可以点击
|
|
|
if (selNav.id == 'all' || !item.canClick) return;
|
|
|
//没有设备时
|
|
|
- if (item[selNav.id] == 'noHave') return;
|
|
|
+ if (
|
|
|
+ item[selNav.id] == 'noHave' ||
|
|
|
+ (selNav.id == 'socket' && item[selSocketType.scode] == 'noHave')
|
|
|
+ )
|
|
|
+ return;
|
|
|
if (item[selNav.id] == 'nostatus') {
|
|
|
message.success('该空间设备离线');
|
|
|
return;
|
|
@@ -187,7 +237,10 @@ const Environment: React.FC = () => {
|
|
|
confirm({
|
|
|
title: '请确认',
|
|
|
icon: <ExclamationCircleOutlined />,
|
|
|
- content: `确认${status}该${selNav.name}吗?`,
|
|
|
+ content:
|
|
|
+ selNav.id == 'socket' && selSocketType.code !== 'all'
|
|
|
+ ? `确认${status}${selSocketType.name}吗?`
|
|
|
+ : `确认${status}该${selNav.name}吗?`,
|
|
|
okText: '确认',
|
|
|
cancelText: '取消',
|
|
|
onOk() {
|
|
@@ -209,6 +262,9 @@ const Environment: React.FC = () => {
|
|
|
if (selNav.id == 'curtain') {
|
|
|
changeCurtain('one', [item], callback, status);
|
|
|
}
|
|
|
+ if (selNav.id == 'socket') {
|
|
|
+ changeSocket('one', [item], status, selSocketType);
|
|
|
+ }
|
|
|
},
|
|
|
onCancel() {
|
|
|
//console.log('Cancel');
|
|
@@ -271,7 +327,7 @@ const Environment: React.FC = () => {
|
|
|
const changeMapList = useCallback(
|
|
|
(mscale, moveWidth, moveHeight) => {
|
|
|
setScale(mscale);
|
|
|
- console.log('mscale', mscale);
|
|
|
+ //console.log('mscale', mscale);
|
|
|
var mapListTemp = JSON.parse(JSON.stringify(mapListCopy.current));
|
|
|
var mapListTemp2 = mapListTemp.map((item, index) => {
|
|
|
if (index == 0) {
|
|
@@ -299,7 +355,6 @@ const Environment: React.FC = () => {
|
|
|
//if (!setTimer.current) return;
|
|
|
var statistics = res.data.statistics || [];
|
|
|
//赋值 运行中的设备数量
|
|
|
-
|
|
|
equiptTypeArr.forEach(function (nItem) {
|
|
|
var fres = statistics.filter((sItem: statistics) => {
|
|
|
return sItem.equipType == nItem.id;
|
|
@@ -308,11 +363,68 @@ const Environment: React.FC = () => {
|
|
|
});
|
|
|
//console.log('queryDeviceManage333-arr', equiptTypeArr);
|
|
|
setNavigatorList(equiptTypeArr);
|
|
|
+ var socketTypeArray: socketType[] = [];
|
|
|
//设备空间信息
|
|
|
var spaceList = res.data.spaceList || [];
|
|
|
spaceList.forEach((item: any) => {
|
|
|
- var allType = ['airConditioner', 'light', 'curtain'];
|
|
|
+ (item.equipList || []).forEach((eItem: any) => {
|
|
|
+ if (eItem?.equipType == 'socket') {
|
|
|
+ var scode = eItem?.infos?.SocketType;
|
|
|
+ scode = scode ? 'socket_' + scode : scode;
|
|
|
+ var stIndex = socketTypeArray.findIndex((ele) => {
|
|
|
+ return ele.scode == scode;
|
|
|
+ });
|
|
|
+ //存在code,并且数组中没有 就放入数组
|
|
|
+ if (scode && stIndex == -1) {
|
|
|
+ socketTypeArray.push({
|
|
|
+ name: socketTypeObj[scode],
|
|
|
+ scode: scode,
|
|
|
+ code: eItem?.infos?.SocketType,
|
|
|
+ openNum: 0,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ //console.log('socketTypeArray', socketTypeArray);
|
|
|
+ const openEquipIds: string[] = [];
|
|
|
+ spaceList.forEach((item: any) => {
|
|
|
+ socketTypeArray.forEach((stItem: socketType) => {
|
|
|
+ var code = stItem.code;
|
|
|
+ var scode = stItem.scode;
|
|
|
+ //寻找对应类型的插座
|
|
|
+ var stEquip = (item.equipList || []).filter((ele: any) => {
|
|
|
+ return ele?.infos?.SocketType == code;
|
|
|
+ });
|
|
|
+ if (stEquip.length > 0) {
|
|
|
+ //寻找对应类型的 开启状态的插座
|
|
|
+ var openStEquip = stEquip.filter((ele: any) => {
|
|
|
+ return ele.runStatus == 1;
|
|
|
+ });
|
|
|
+ //如果有重复的设备 则不重复计算 运行设备数量
|
|
|
+ var openStEquip2 = stEquip.filter((ele: any) => {
|
|
|
+ if (openEquipIds.includes(ele.id)) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ openEquipIds.push(ele.id);
|
|
|
+ return ele.runStatus == 1;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //如果某种类型的插座都开启 则为1,部分开启则为2
|
|
|
+ openStEquip.length == stEquip.length
|
|
|
+ ? (item[scode] = 1)
|
|
|
+ : openStEquip.length > 0
|
|
|
+ ? (item[scode] = 2)
|
|
|
+ : (item[scode] = 0);
|
|
|
+ stItem.openNum = stItem.openNum + openStEquip2.length; //累加对应类型插座开启数量 运行中的数量
|
|
|
+ } else {
|
|
|
+ item[scode] = 'noHave';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
|
|
|
+ spaceList.forEach((item: any) => {
|
|
|
+ var allType = ['airConditioner', 'light', 'curtain', 'socket'];
|
|
|
allType.forEach((etype) => {
|
|
|
var filterEquip = (item.equipList || []).filter((eItem: any) => {
|
|
|
return eItem.equipType == etype;
|
|
@@ -338,13 +450,20 @@ const Environment: React.FC = () => {
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
- //console.log('spaceList', spaceList);
|
|
|
+ //console.log('spaceList', spaceList, socketTypeArray);
|
|
|
//debugger;
|
|
|
setEquipMapList(spaceList);
|
|
|
+ socketTypeArray.splice(0, 0, {
|
|
|
+ name: '全部',
|
|
|
+ scode: 'all',
|
|
|
+ code: 'all',
|
|
|
+ openNum: 0,
|
|
|
+ });
|
|
|
+ setSocketTypeArr(socketTypeArray);
|
|
|
return 'next';
|
|
|
})
|
|
|
.catch(() => {
|
|
|
- setNavigatorList(equiptTypeArr);
|
|
|
+ //setNavigatorList(equiptTypeArr);
|
|
|
// setLoading(false);
|
|
|
});
|
|
|
};
|
|
@@ -382,7 +501,7 @@ const Environment: React.FC = () => {
|
|
|
}
|
|
|
});
|
|
|
//console.log('setNavigatorList-arr1111', arr);
|
|
|
- //setNavigatorList(arr);
|
|
|
+ setNavigatorList(arr);
|
|
|
return arr;
|
|
|
});
|
|
|
}
|
|
@@ -471,6 +590,8 @@ const Environment: React.FC = () => {
|
|
|
<TopNavRight
|
|
|
selNavObj={selNav}
|
|
|
navigatorList={navigatorList}
|
|
|
+ selSocketType={selSocketType}
|
|
|
+ socketTypeArr={socketTypeArr}
|
|
|
mapList={mapCombineList}
|
|
|
></TopNavRight>
|
|
|
)
|
|
@@ -479,7 +600,27 @@ const Environment: React.FC = () => {
|
|
|
selParamObj={selNav}
|
|
|
></TopNavigator>
|
|
|
<div className={styles.maptop}>
|
|
|
- {selNav.id !== 'all' && selNav.id !== 'curtain' && (
|
|
|
+ {selNav.id == 'socket' && (
|
|
|
+ <div className={cx(styles.left, styles.stBox)}>
|
|
|
+ {socketTypeArr.map((stItem, stIndex) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ className={cx(styles.stItem, {
|
|
|
+ [styles.sel]: selSocketType.scode == stItem.scode,
|
|
|
+ })}
|
|
|
+ key={stIndex + 'socket'}
|
|
|
+ onClick={(event) => {
|
|
|
+ event.stopPropagation();
|
|
|
+ socketTypeChange(stItem);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {stItem.name}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ {selNav.id !== 'all' && selNav.id !== 'curtain' && selNav.id !== 'socket' && (
|
|
|
<div className={styles.left}>
|
|
|
<span>
|
|
|
<Icon
|
|
@@ -569,11 +710,16 @@ const Environment: React.FC = () => {
|
|
|
backgroundColor: item.canClick
|
|
|
? selNav.id == 'all'
|
|
|
? 'rgba(196, 196, 196, 0.4)'
|
|
|
+ : selNav.id == 'socket' && selSocketType.scode !== 'all'
|
|
|
+ ? getColorOpacity(item[selSocketType.scode])
|
|
|
: getColorOpacity(item[selNav.id])
|
|
|
: '',
|
|
|
}}
|
|
|
className={cx(mapstyles.house, {
|
|
|
- [mapstyles.notclick]: !item.canClick || item[selNav.id] == 'noHave',
|
|
|
+ [mapstyles.notclick]:
|
|
|
+ !item.canClick ||
|
|
|
+ item[selNav.id] == 'noHave' ||
|
|
|
+ (selNav.id == 'socket' && item[selSocketType.scode] == 'noHave'),
|
|
|
[mapstyles.searchSel]: item.spaceId && item.spaceId === searchSpace.spaceId,
|
|
|
})}
|
|
|
onClick={(event) => {
|
|
@@ -673,7 +819,11 @@ const Environment: React.FC = () => {
|
|
|
></Icon>
|
|
|
</div>
|
|
|
)}
|
|
|
- {item.canClick && item[selNav.id] != 'noHave' && (
|
|
|
+ {!(
|
|
|
+ !item.canClick ||
|
|
|
+ item[selNav.id] == 'noHave' ||
|
|
|
+ (selNav.id == 'socket' && item[selSocketType.scode] == 'noHave')
|
|
|
+ ) && (
|
|
|
<div
|
|
|
className={mapstyles.showModal}
|
|
|
onClick={(event) => {
|