import React, { useState, useEffect, useCallback } from 'react'; import { FormattedMessage, useModel } from 'umi'; import SearchInput from '@/components/SearchInput'; import PageHeader from '@/components/PageHeader'; import Map from '@/components/map'; import TopNavigator from '@/components/topNavigator'; import TopNavRight from './components/topNavRight'; import DeviceModal from './components/deviceModal'; import styles from './index.less'; import mapstyles from '@/assets/css/map.less'; 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'; import { getMapList, queryEquipStatistics, queryDeviceTimeManage, } from '@/services/ant-design-pro/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 { getSpaceFunc, projectId } = useModel('spaceFunc'); const { changeSearchFloorId } = useModel('buildFloor'); 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<{}>(); 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 [mapList, setMapList] = 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'); setShowModal(true); setShowSpace(item); }; //当前设备的状态 all全部开启 part部分开启 close全都关闭 还有类型type 包括airConditioner light curtain //根据设备状态返回不同的 颜色 const getColorOpacity = (value: number, 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 (value === 2) { //2 是部分开启 return 'rgba(' + colorStr + '0.4)'; } else if (value === 1) { //1 是开启 return 'rgba(' + colorStr + '1)'; } else if (value === 0) { //0是关闭 return 'rgba(196, 196, 196, 0.6)'; } }; const { confirm } = Modal; //单个空间的点击事情 const spaceControl = (item, index: number) => { //全部设备 或者没有房间类型 则不可以点击 if (selNav.id == 'all' || !item.roomFuncType) return; //没有设备时 //if (item[selNav.id] == 'not') 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 getDeviceStatus() { // var interval = setInterval(() => { // queryDeviceManage(); // }, 1000); // setTimeout(() => { // console.log('setTimeout'); // clearInterval(interval); // }, 60000); // } 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') { function getDeviceStatus() { //执行查询函数 getAirInfo(item, callback, 10, projectId); } changeAir(item, index, getDeviceStatus); } if (selNav.id == 'light') { function getDeviceStatus() { //请求状态 10是指循环调10次 getLamp(item, callback, 10); } changeLight('one', [item], getDeviceStatus, status); } if (selNav.id == 'curtain') { changeCurtain('one', [item], callback, status); } }, onCancel() { //console.log('Cancel'); }, }); }; //获取地图 mapList useEffect(() => { //changeSearchFloorId(''); if (selFloorId) { setLoading(true); getMapList({ //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454', floorId: selFloorId, }) .then((res) => { setLoading(false); var data: API.MapInfo[] = (res.data || {}).spaceList || []; setMapList(data); //setSelNav(navigatorList[0]); //每当重新请求地图时 让选中导航的默认是第一个 }) .catch(() => { setLoading(false); }); } else { setMapList([]); } }, [selFloorId]); const queryDeviceManage = () => { //setLoading(true); queryEquipStatistics({ floorId: selFloorId, projectId: projectId, }) .then((res) => { // setLoading(false); 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 filterRes = (item.equipStatusList || []).filter((eItem: equipStatus) => { return eItem.equipType == etype; }); //不存时 赋值not filterRes.length > 0 ? (item[etype] = filterRes[0].status) : (item[etype] = 'not'); }); }); //console.log('spaceList', spaceList); setEquipMapList(spaceList); }) .catch(() => { // setLoading(false); }); }; //获取设备状态 设备种类 useEffect(() => { if (selFloorId) { queryDeviceManage(); } }, [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 combine = Object.assign({}, mitem, filterSpace1[0], filterSpace2[0]); combineList.push(combine); }); setMapCombineList(combineList); console.log('combine'); }, [equipMapList, mapList, timeMapList]); let firtTime: number = 0; let lastTime: number = 0; return ( <> } action={ { //触发了搜索 如果楼层改变 重新更新地图 //setSelFloorId(s.floorId); //一个建筑 搜索其他楼层 setSearchText({ text: s.localName }); }} /> } /> } changeFloorId={changeFloorId} selParamObj={selNav} >
{selNav.id !== 'all' && (
开启
部分开启
关闭
)}
{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] == 'not' && (
无设备
)} {selNav.id == 'all' && (
{/* 所有设备的图标列表 */} {(item.equipStatusList || []).map((ditem: equipStatus, dindex: number) => { return (
); })}
)} {item.roomFuncType && (
{ event.stopPropagation(); if (lastTime - firtTime < 200) { showModalClick(item); } }} onMouseDown={(event) => { //event.stopPropagation(); firtTime = new Date().getTime(); }} onMouseUp={(event) => { //event.stopPropagation(); lastTime = new Date().getTime(); }} >
)}
{item.localName}
); }} >
)}
{showModal && ( { setShowModal(false); }} > )} ); }; export default Environment;