import React, { useState, useEffect, useRef, useCallback } from 'react'; import { FormattedMessage, useModel } from 'umi'; import SearchInput from '@/sagacare_components/SearchInput'; import PageHeader from '@/sagacare_components/PageHeader'; import Map from '@/sagacare_components/map'; import TopNavigator from '@/sagacare_components/topNavigator'; import TopNavRight from './components/topNavRight'; import DeviceModal from './components/deviceModal'; import styles from './index.less'; import mapstyles from '@/sagacare_components/map/index.less'; import cx from 'classnames'; import { Spin, Modal, message } from 'antd'; import moment from 'moment'; import { getMaxScale } from '@/hooks/useMap'; import { ExclamationCircleOutlined } from '@ant-design/icons'; import { equipImageMap } from '@/config/sagacare/sagacare_image.js'; import Icon from '@/tenants-ui/SgIcon'; import type { navigatorItem } from '@/pages/Environment/index'; import { projectObj } from '@/config/api.js'; import { getMapList, queryEquipStatistics, queryDeviceTimeManage, queryProjectEquipType, } from '@/services/sagacare_service/environment'; import { changeCurtain, changeAir, changeLight, getLamp, getAirInfo, } from '@/pages/Equipment/equipmentControl'; //设备状态 type equipStatus = { equipType: string; status: number; }; //设备开启数量 type statistics = { equipType: string; runCount: 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 [showModal, setShowModal] = useState(false); const [showSpace, setShowSpace] = useState({}); //当前弹框选中的空间 const [navigatorList, setNavigatorList] = useState([ { name: '全部设备', id: 'all', src: envir_all, //color: '#E5574F', color: '#E89E32', colorStr: '', }, { name: '空调', id: 'airConditioner', src: equip_air, num: 0, color: '#5E8BCF', colorStr: '94,139,207,', }, { name: '照明', id: 'light', src: equip_lamp, num: 0, color: '#FFE823', colorStr: '255,232,35,', }, { name: '窗帘', id: 'curtain', src: envir_curtain, num: 0, color: '#E89E32', colorStr: '232, 158, 50,', }, ]); const [scale, setScale] = useState(0.8); const [maxScale, setMaxScale] = useState(1); const [transXInit, setTransXInit] = useState(0); const [mapList, setMapList] = useState([]); const mapListCopy = useRef([]); const [mapSize, setMapSize] = useState({}); const [equipMapList, setEquipMapList] = useState([]); const [timeMapList, setTimeMapList] = useState([]); const [selNav, setSelNav] = useState(navigatorList[0]); const [selFloorId, setSelFloorId] = useState(); const [mapCombineList, setMapCombineList] = useState([]); const [loading, setLoading] = useState(false); const changeFloorId = (data: string) => { //debugger; setSelFloorId(data); }; //导航条切换 const navigatorChange = (item: navigatorItem) => { setSelNav(item); }; const showModalClick = (item) => { // console.log('showChart', item); setShowModal(true); setShowSpace(item); }; //当前设备的状态 all全部开启 part部分开启 close全都关闭 还有类型type 包括airConditioner light curtain //根据设备状态返回不同的 颜色 const getColorOpacity = (value: any, type?: string): string => { let colorStr = ''; if (selNav.id == 'all') { //全部设备时 colorStr赋值 var filterRes = navigatorList.filter(function (item) { return item.id == type; }); colorStr = (filterRes[0] || {}).colorStr; } else { colorStr = selNav.colorStr; } if (selNav.id == 'curtain' || type == 'curtain') { if (value == 'noHave') { //没有 return 'rgba(196, 196, 196, 0)'; } else { return 'rgba(' + colorStr + '1)'; } } else { if (value === 2) { //2 是部分开启 return 'rgba(' + colorStr + '0.4)'; } else if (value === 1) { //1 是开启 return 'rgba(' + colorStr + '1)'; } else if (value === 0 || value == 'nostatus') { //0是关闭 return 'rgba(196, 196, 196, 0.6)'; } } }; const { confirm } = Modal; //单个空间的点击事情 const spaceControl = (item, index: number) => { //全部设备 或者没有房间类型 则不可以点击 if (selNav.id == 'all' || !item.canClick) return; //没有设备时 if (item[selNav.id] == 'noHave') return; if (item[selNav.id] == 'nostatus') { message.success('该空间设备离线'); return; } if (item[selNav.id] === 2) { //半开时 confirm({ title: '请确认', icon: , content: `是否进入单空间进行调节?`, okText: '确认', cancelText: '取消', onOk() { showModalClick(item); }, onCancel() { //console.log('Cancel'); }, }); return; } var status = item[selNav.id] === 1 ? '关闭' : '打开'; confirm({ title: '请确认', icon: , content: `确认${status}该${selNav.name}吗?`, okText: '确认', cancelText: '取消', onOk() { //现在加上循环调用 所以把手动去了 function callback() { //这是在手动改变状态 // var mapCopy = JSON.parse(JSON.stringify(mapCombineList)); // mapCopy[index][selNav.id] = item[selNav.id] === 1 ? 0 : 1; // setMapCombineList(mapCopy); } //如果是空调 if (selNav.id == 'airConditioner') { changeAir(item, index, callback); } if (selNav.id == 'light') { changeLight('one', [item], callback, status); } if (selNav.id == 'curtain') { changeCurtain('one', [item], callback, status); } }, onCancel() { //console.log('Cancel'); }, }); }; //获取地图 mapList useEffect(() => { if (selFloorId) { getProjectEquipType(); changeLastFloorId(selFloorId); setLoading(true); getMapList({ //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454', floorId: selFloorId, }) .then((res) => { setLoading(false); var data: API.MapInfo[] = (res.data || {}).spaceList || []; var bodyWidth = document.body.offsetWidth; var mapWidth = (res.data || {}).width || 800; if (mapWidth < bodyWidth) { var mscale = 1; setTransXInit((bodyWidth - mapWidth) / 2); } else { var mscale = Number((bodyWidth / mapWidth).toFixed(4)); setTransXInit(0); } var mapSize: any = { width: mapWidth * mscale, height: (res.data || {}).height * mscale, }; setMapSize(mapSize); //把地图变成 屏幕大小 data.forEach((item, index) => { item.width = item.width * mscale; item.height = item.height * mscale; item.left = item.left * mscale; item.top = item.top * mscale; }); var maxScaleTemp = getMaxScale(data); setMaxScale(maxScaleTemp); setMapList(data); mapListCopy.current = data; //setSelNav(navigatorList[0]); //每当重新请求地图时 让选中导航的默认是第一个 }) .catch(() => { setLoading(false); }); } else { setMapList([]); } }, [selFloorId]); const changeMapList = useCallback( (mscale, moveWidth, moveHeight) => { setScale(mscale); console.log('mscale', mscale); var mapListTemp = JSON.parse(JSON.stringify(mapListCopy.current)); var mapListTemp2 = mapListTemp.map((item, index) => { if (index == 0) { // console.log('mapListTemp', mscale, item.width, item.width * mscale); } item.width = item.width * mscale; item.height = item.height * mscale; item.left = item.left * mscale - moveWidth; item.top = item.top * mscale - moveHeight; return item; }); setMapList(mapListTemp2); }, [mapListCopy], ); const queryDeviceManage = () => { //setLoading(true); return queryEquipStatistics({ floorId: selFloorId, projectId: projectObj.projectId, }) .then((res) => { // setLoading(false); //if (!setTimer.current) return; var statistics = res.data.statistics || []; //赋值 运行中的设备数量 navigatorList.forEach(function (nItem) { var fres = statistics.filter((sItem: statistics) => { return sItem.equipType == nItem.id; }); nItem.num = (fres[0] || {}).runCount; }); setNavigatorList(navigatorList); //设备空间信息 var spaceList = res.data.spaceList || []; spaceList.forEach((item: any) => { var allType = ['airConditioner', 'light', 'curtain']; allType.forEach((etype) => { var filterEquip = (item.equipList || []).filter((eItem: any) => { return eItem.equipType == etype; }); //有当前设备 if (filterEquip.length > 0) { item.equipStatusList = item.equipStatusList ? item.equipStatusList : []; var filterRes = (item.equipStatusList || []).filter((eItem: equipStatus) => { return eItem.equipType == etype; }); //不存时 赋值not 如果没有设备状态 则说明没有设备 1 是开启 0是关闭 if (filterRes.length > 0) { item[etype] = filterRes[0].status; } else { item[etype] = 'nostatus'; item.equipStatusList.push({ equipType: etype, status: 'nostatus', }); } } else { item[etype] = 'noHave'; } }); }); //console.log('spaceList', spaceList); //debugger; setEquipMapList(spaceList); return 'next'; }) .catch(() => { // setLoading(false); }); }; let setTimer1 = useRef(); let setTimer2 = useRef(); async function getDeviceStatus() { await queryDeviceManage().then((res) => { setTimer1.current = setTimeout(() => { getDeviceStatus(); }, 8000); }); } function getProjectEquipType() { // 项目拥有的设备 return queryProjectEquipType().then((res) => { const resData = res.data || []; const copynNavigatorList = JSON.parse(JSON.stringify(navigatorList)); copynNavigatorList.map((item: any, idx: any) => { if (idx === 0) return; // 第一个为全部设备,不参与对比 let hasEquip = false; // 没有此设备 resData.map((resItem: any) => { if (item.id === resItem) { hasEquip = true; } }); if (!hasEquip) { navigatorList.splice(idx, 1); setNavigatorList(navigatorList); } }); console.log(navigatorList, '-----navigatorList'); }); } function getSpaceHasPerson(sfId: any) { //获取有人无人 querySpaceAdjustList(sfId).then((res) => { //debugger; setTimer2.current = setTimeout(() => { getSpaceHasPerson(sfId); }, 8000); }); } //获取设备状态 设备种类 useEffect(() => { if (selFloorId) { getDeviceStatus(); getSpaceHasPerson(selFloorId); // queryDeviceManage(); //第一次执行 // if (setTimer.current) { // clearInterval(setTimer.current); // setTimer.current = null; // } // //循环调接口 // setTimer.current = setInterval(() => { // queryDeviceManage(); // }, 3000); } return () => { //clearInterval(setTimer.current); clearTimeout(setTimer1.current); clearTimeout(setTimer2.current); }; }, [selFloorId]); // useEffect(() => { // if (selFloorId) { // querySpaceAdjustList(selFloorId); // } // }, [selFloorId]); //获取时间列表 spaceTimeList useEffect(() => { if (selFloorId) { //setLoading(true); queryDeviceTimeManage({ floorId: selFloorId, //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454', date: moment().format('YYYYMMDD'), }) .then(function (res) { // setLoading(false); var resList = res.content || []; setTimeMapList(resList); }) .catch(() => { // setLoading(false); }); } }, [selFloorId]); //合并空间设备数据 和 空间数据 useEffect(() => { var combineList: any = []; mapList.map(function (mitem) { var spaceId = mitem.spaceId; var filterSpace1 = equipMapList.filter((ele) => { return ele.id == spaceId; }); var filterSpace2 = timeMapList.filter((ele) => { return ele.id == spaceId; }); var filterSpace3 = hasPersonList.filter((ele) => { return ele.id == spaceId; }); var combine = Object.assign({}, filterSpace3[0], filterSpace1[0], filterSpace2[0], mitem); combineList.push(combine); }); setMapCombineList(combineList); console.log('combine'); }, [equipMapList, mapList, timeMapList, hasPersonList]); let firtTime: number = 0; let lastTime: number = 0; return ( <> } action={} /> } changeFloorId={changeFloorId} selParamObj={selNav} >
{selNav.id !== 'all' && selNav.id !== 'curtain' && (
有人 无人
)} {selNav.id !== 'all' && selNav.id !== 'curtain' && (
开启
部分开启
关闭
)} {selNav.id == 'curtain' && (
)}
{mapCombineList.length > 0 && ( { return (
{ 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] == 'noHave' && (
无设备
style={{ display: item.width > 80 && item.height > 50 ? 'flex' : 'none' }} )} */} {selNav.id == 'all' && (
{/* 所有设备的图标列表 */} {(item.equipStatusList || []).map((ditem: equipStatus, dindex: number) => { return (
); })}
)} {(selNav.id == 'airConditioner' || selNav.id == 'light') && item.isPassengerPass && item.canClick && (
)} {(selNav.id == 'airConditioner' || selNav.id == 'light') && item.isPassengerPass == false && item.canClick && (
)} {item.canClick && item[selNav.id] != 'noHave' && (
{ event.stopPropagation(); if (lastTime - firtTime < 400) { showModalClick(item); } }} onMouseDown={(event) => { //event.stopPropagation(); firtTime = new Date().getTime(); }} onMouseUp={(event) => { //event.stopPropagation(); lastTime = new Date().getTime(); }} style={{ transform: `scale(${scale - 0.1 < 1 ? scale - 0.1 : 1})`, }} >
)}
28 && item.height > 50 ? 'block' : 'none', }} >
64 && item.height > 80) || item.height > 140 || item.width > 120 || scale == maxScale ? 'block' : 'none', }} > {item.localName}
{(getSpaceFunc(item.roomFuncType) || item.localName) && !( (getSpaceFunc(item.roomFuncType) && item.width > 28 && item.height > 50) || (item.localName && ((item.width > 64 && item.height > 80) || item.height > 140 || item.width > 120 || scale == maxScale)) ) &&
.
}
); }} >
)}
{showModal && ( { setShowModal(false); }} > )} ); }; export default Environment;