|
@@ -5,9 +5,10 @@ import Map from '@/components/map';
|
|
|
import SearchInput from '@/components/SearchInput';
|
|
|
import TopNavigator from '@/components/topNavigator';
|
|
|
import ChartModal from './components/chartModal';
|
|
|
-
|
|
|
+import moment from 'moment';
|
|
|
+import { getMapList, queryEnvironmentParam } from '@/services/ant-design-pro/environment';
|
|
|
import { equipImageMap } from '@/config/image.js';
|
|
|
-import { Input } from 'antd';
|
|
|
+
|
|
|
import Icon from '@/tenants-ui/Icon';
|
|
|
|
|
|
import styles from './index.less';
|
|
@@ -31,78 +32,84 @@ const Environment: React.FC = () => {
|
|
|
const [searchText, setSearchText] = useState<{ text: any }>();
|
|
|
const [showChart, setShowChart] = useState(false);
|
|
|
const [selFloorId, setSelFloorId] = useState<string>();
|
|
|
+ const [selBuildId, setSelBuildId] = useState<string>();
|
|
|
const [navigatorList] = useState<navigatorItem[]>([
|
|
|
{
|
|
|
name: '温度',
|
|
|
id: 'Tdb',
|
|
|
src: envir_temperature,
|
|
|
unit: '℃',
|
|
|
- num: 24.3,
|
|
|
color: '#E5574F',
|
|
|
colorStr: '229,87,79,',
|
|
|
opacity: 0.2,
|
|
|
indicator: [18, 21, 24, 27, 30],
|
|
|
+ fixed: 1,
|
|
|
},
|
|
|
{
|
|
|
name: '湿度',
|
|
|
id: 'RH',
|
|
|
src: envir_wet,
|
|
|
unit: '%',
|
|
|
- num: 70,
|
|
|
color: '#9FB7CD',
|
|
|
colorStr: '159,183,205,',
|
|
|
opacity: 0.2,
|
|
|
indicator: [25, 35, 45, 55, 65],
|
|
|
+ fixed: 1,
|
|
|
},
|
|
|
{
|
|
|
name: 'CO₂',
|
|
|
id: 'CO2',
|
|
|
src: envir_co2,
|
|
|
unit: 'ppm',
|
|
|
- num: 600,
|
|
|
color: '#00DC23',
|
|
|
colorStr: '0,220,35,',
|
|
|
opacity: 0.2,
|
|
|
indicator: [500, 700, 1000, 2000, 3000],
|
|
|
+ fixed: 0,
|
|
|
},
|
|
|
{
|
|
|
name: 'PM2.5',
|
|
|
id: 'PM2d5',
|
|
|
src: envir_pm25,
|
|
|
unit: 'ug/m³',
|
|
|
- num: 33,
|
|
|
color: '#E89E32',
|
|
|
colorStr: '232,158,50,',
|
|
|
opacity: 0.2,
|
|
|
indicator: [15, 25, 35, 75, 90],
|
|
|
+ fixed: 1,
|
|
|
},
|
|
|
{
|
|
|
name: '甲醛',
|
|
|
id: 'HCHO',
|
|
|
src: envir_jiaquan,
|
|
|
unit: 'mg/m³',
|
|
|
- num: 50,
|
|
|
color: '#140050',
|
|
|
colorStr: '20,0,80,',
|
|
|
opacity: 0.25,
|
|
|
indicator: [0.02, 0.05, 0.1, 0.15], //指标梯度
|
|
|
+ fixed: 2,
|
|
|
},
|
|
|
]);
|
|
|
const [selNav, setSelNav] = useState<navigatorItem>(navigatorList[0]);
|
|
|
+ const [selNavId, setSelNavId] = useState<string>(navigatorList[0].id);
|
|
|
+ const [mapList, setMapList] = useState<API.MapInfo[]>([]);
|
|
|
+ const [envirMapList, setEnvirMapList] = useState<API.MapInfo[]>([]);
|
|
|
+ const [mapCombineList, setMapCombineList] = useState<any[]>([]);
|
|
|
+
|
|
|
const changeFloorId = (data: string) => {
|
|
|
//debugger;
|
|
|
setSelFloorId(data);
|
|
|
};
|
|
|
+ const changeBuildId = (data: string) => {
|
|
|
+ //debugger;
|
|
|
+ setSelBuildId(data);
|
|
|
+ };
|
|
|
//导航切换时
|
|
|
const navigatorChange = (item: navigatorItem) => {
|
|
|
- if (item.id == 'Tdb') {
|
|
|
- }
|
|
|
+ debugger;
|
|
|
setSelNav(item);
|
|
|
+ setSelNavId(item.id);
|
|
|
};
|
|
|
- // const specialRoomClick = () => {
|
|
|
- // console.log('showChart');
|
|
|
- // setShowChart(true);
|
|
|
- // };
|
|
|
|
|
|
//根据指标的值 得到不同的透明度等级 第一级0.2 第二级0.4 依次往后
|
|
|
const getColorOpacity = (value: number): number => {
|
|
@@ -117,13 +124,66 @@ const Environment: React.FC = () => {
|
|
|
}
|
|
|
return res;
|
|
|
};
|
|
|
+ //获取地图 mapList
|
|
|
+ useEffect(() => {
|
|
|
+ if (selFloorId) {
|
|
|
+ getMapList({ floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454', projectId: '' }).then(
|
|
|
+ (res) => {
|
|
|
+ //debugger;
|
|
|
+ var data: API.MapInfo[] = (res.data || {}).spaceList || [];
|
|
|
+ setMapList(data);
|
|
|
+ },
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }, [selFloorId]);
|
|
|
+ //请求环境数据
|
|
|
+ useEffect(() => {
|
|
|
+ if (selNavId && selFloorId) {
|
|
|
+ debugger;
|
|
|
+ var floorParams = [
|
|
|
+ { id: 'Fl11010802593241ec348ecb4148806b9034c8957454', projectId: 'Pj1101080259' },
|
|
|
+ ];
|
|
|
+ var endTime = moment();
|
|
|
+ var startTime = moment().subtract(30, 'minutes');
|
|
|
+ var startStr = startTime.format('YYYYMMDDHHmmss');
|
|
|
+ var endStr = endTime.format('YYYYMMDDHHmmss');
|
|
|
+
|
|
|
+ queryEnvironmentParam(floorParams, {
|
|
|
+ endTime: endStr,
|
|
|
+ startTime: startStr,
|
|
|
+ param: selNavId,
|
|
|
+ }).then((res) => {
|
|
|
+ //debugger;
|
|
|
+ var avgValues = (res.data || {}).avgValues;
|
|
|
+ avgValues = avgValues ? avgValues.toFixed(selNav.fixed) : avgValues;
|
|
|
+ var navTemp = { ...selNav, avgValues: avgValues };
|
|
|
+ setSelNav(navTemp);
|
|
|
+ var dataSpaces = ((res.data || {}).floors[0] || {}).dataSpaces || [];
|
|
|
+ setEnvirMapList(dataSpaces);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, [selNavId, selFloorId]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ var combineList: any = [];
|
|
|
+ mapList.map(function (mitem) {
|
|
|
+ var spaceId = mitem.spaceId;
|
|
|
+ var filterSpace = envirMapList.filter((ele) => {
|
|
|
+ return ele.id == spaceId;
|
|
|
+ });
|
|
|
|
|
|
+ var combine = Object.assign({}, mitem, filterSpace[0]);
|
|
|
+ combineList.push(combine);
|
|
|
+ });
|
|
|
+ setMapCombineList(combineList);
|
|
|
+ }, [envirMapList, mapList]);
|
|
|
return (
|
|
|
<>
|
|
|
<PageHeader
|
|
|
title={<FormattedMessage id="menu.environment" />}
|
|
|
action={
|
|
|
<SearchInput
|
|
|
+ mapList={mapList}
|
|
|
onSearch={(s) => {
|
|
|
setSearchText({ text: s });
|
|
|
}}
|
|
@@ -146,6 +206,8 @@ const Environment: React.FC = () => {
|
|
|
type={'enviroment'}
|
|
|
navigatorChange={navigatorChange}
|
|
|
changeFloorId={changeFloorId}
|
|
|
+ changeBuildId={changeBuildId}
|
|
|
+ selParamObj={selNav}
|
|
|
></TopNavigator>
|
|
|
<div className={styles.maptop}>
|
|
|
<div className={styles.right}>
|
|
@@ -169,6 +231,7 @@ const Environment: React.FC = () => {
|
|
|
type={'enviroment'}
|
|
|
searchText={searchText}
|
|
|
selFloorId={selFloorId}
|
|
|
+ mapList={mapCombineList}
|
|
|
render={(item: API.MapInfo, index: number) => {
|
|
|
return (
|
|
|
<div
|
|
@@ -182,7 +245,7 @@ const Environment: React.FC = () => {
|
|
|
backgroundColor:
|
|
|
'rgba(' +
|
|
|
selNav.colorStr +
|
|
|
- (selNav.opacity as number) * getColorOpacity(item[selNav.id]) +
|
|
|
+ (selNav.opacity as number) * getColorOpacity(item.avgValues) +
|
|
|
')',
|
|
|
}}
|
|
|
>
|