|
@@ -1,16 +1,17 @@
|
|
import React, { useState, useEffect } from 'react';
|
|
import React, { useState, useEffect } from 'react';
|
|
import { FormattedMessage } from 'umi';
|
|
import { FormattedMessage } from 'umi';
|
|
import PageHeader from '@/components/PageHeader';
|
|
import PageHeader from '@/components/PageHeader';
|
|
|
|
+import Map from '@/components/map';
|
|
// import SearchInput from '@/tenants-ui/SearchInput';
|
|
// import SearchInput from '@/tenants-ui/SearchInput';
|
|
import TopNavigator from './components/topNavigator';
|
|
import TopNavigator from './components/topNavigator';
|
|
import ChartModal from './components/chartModal';
|
|
import ChartModal from './components/chartModal';
|
|
|
|
+
|
|
import { equipImageMap } from '@/config/image.js';
|
|
import { equipImageMap } from '@/config/image.js';
|
|
import { Input } from 'antd';
|
|
import { Input } from 'antd';
|
|
import Icon from '@/tenants-ui/Icon';
|
|
import Icon from '@/tenants-ui/Icon';
|
|
|
|
|
|
import styles from './index.less';
|
|
import styles from './index.less';
|
|
import mapstyles from '@/assets/css/map.less';
|
|
import mapstyles from '@/assets/css/map.less';
|
|
-import { getMapList } from '@/services/ant-design-pro/environment';
|
|
|
|
|
|
|
|
export type navigatorItem = {
|
|
export type navigatorItem = {
|
|
name: string;
|
|
name: string;
|
|
@@ -28,7 +29,7 @@ const Environment: React.FC = () => {
|
|
const { envir_temperature, envir_wet, envir_co2, envir_pm25, envir_jiaquan } = equipImageMap;
|
|
const { envir_temperature, envir_wet, envir_co2, envir_pm25, envir_jiaquan } = equipImageMap;
|
|
|
|
|
|
const [searchText, setSearchText] = useState<string>();
|
|
const [searchText, setSearchText] = useState<string>();
|
|
- const [mapList, setMapList] = useState<API.MapInfo[]>([]);
|
|
|
|
|
|
+
|
|
const [showChart, setShowChart] = useState(false);
|
|
const [showChart, setShowChart] = useState(false);
|
|
const [navigatorList] = useState<navigatorItem[]>([
|
|
const [navigatorList] = useState<navigatorItem[]>([
|
|
{
|
|
{
|
|
@@ -84,7 +85,7 @@ const Environment: React.FC = () => {
|
|
color: '#140050',
|
|
color: '#140050',
|
|
colorStr: '20,0,80,',
|
|
colorStr: '20,0,80,',
|
|
opacity: 0.25,
|
|
opacity: 0.25,
|
|
- indicator: [0.02, 0.05, 0.1, 0.15],
|
|
|
|
|
|
+ indicator: [0.02, 0.05, 0.1, 0.15], //指标梯度
|
|
},
|
|
},
|
|
]);
|
|
]);
|
|
const [selNav, setSelNav] = useState<navigatorItem>(navigatorList[0]);
|
|
const [selNav, setSelNav] = useState<navigatorItem>(navigatorList[0]);
|
|
@@ -97,15 +98,10 @@ const Environment: React.FC = () => {
|
|
// console.log('showChart');
|
|
// console.log('showChart');
|
|
// setShowChart(true);
|
|
// setShowChart(true);
|
|
// };
|
|
// };
|
|
- useEffect(() => {
|
|
|
|
- getMapList({ floorId: 'sffsdfdsfdf', floorNumber: 22 }).then(function (res) {
|
|
|
|
- var data: API.MapInfo[] = res.data || [];
|
|
|
|
- setMapList(data);
|
|
|
|
- });
|
|
|
|
- }, []);
|
|
|
|
|
|
+
|
|
//根据指标的值 得到不同的透明度等级 第一级0.2 第二级0.4 依次往后
|
|
//根据指标的值 得到不同的透明度等级 第一级0.2 第二级0.4 依次往后
|
|
const getColorOpacity = (value: number): number => {
|
|
const getColorOpacity = (value: number): number => {
|
|
- var indicator: number[] = selNav.indicator || [];
|
|
|
|
|
|
+ var indicator: number[] = selNav.indicator || []; //指标梯度
|
|
var number = indicator.length;
|
|
var number = indicator.length;
|
|
var res = 1;
|
|
var res = 1;
|
|
for (var i = 0; i < number; i++) {
|
|
for (var i = 0; i < number; i++) {
|
|
@@ -135,7 +131,7 @@ const Environment: React.FC = () => {
|
|
<Input.Search
|
|
<Input.Search
|
|
size="large"
|
|
size="large"
|
|
allowClear
|
|
allowClear
|
|
- style={{ width: '20%' }}
|
|
|
|
|
|
+ style={{ width: '230px' }}
|
|
placeholder={'搜索空间'}
|
|
placeholder={'搜索空间'}
|
|
onSearch={(s) => {
|
|
onSearch={(s) => {
|
|
setSearchText(s || undefined);
|
|
setSearchText(s || undefined);
|
|
@@ -152,7 +148,7 @@ const Environment: React.FC = () => {
|
|
<div className={styles.mapwrap}>
|
|
<div className={styles.mapwrap}>
|
|
<div className={styles.top}>
|
|
<div className={styles.top}>
|
|
<div className={styles.right}>
|
|
<div className={styles.right}>
|
|
- {selNav.indicator.map((item, index) => {
|
|
|
|
|
|
+ {(selNav.indicator || []).map((item, index) => {
|
|
return (
|
|
return (
|
|
<div className={styles.indicatorBox} key={index + 'indicator'}>
|
|
<div className={styles.indicatorBox} key={index + 'indicator'}>
|
|
<div className={styles.text}>{item}</div>
|
|
<div className={styles.text}>{item}</div>
|
|
@@ -173,8 +169,34 @@ const Environment: React.FC = () => {
|
|
})}
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div className={mapstyles.map}>
|
|
|
|
- {mapList.map(function (item, index) {
|
|
|
|
|
|
+ <div>
|
|
|
|
+ <Map
|
|
|
|
+ render={(item: API.MapInfo, index: number): React.ReactNode => {
|
|
|
|
+ return (
|
|
|
|
+ <div
|
|
|
|
+ key={index + 'house'}
|
|
|
|
+ className={mapstyles.house}
|
|
|
|
+ style={{
|
|
|
|
+ left: item.left,
|
|
|
|
+ top: item.top,
|
|
|
|
+ width: item.width,
|
|
|
|
+ height: item.height,
|
|
|
|
+ backgroundColor:
|
|
|
|
+ 'rgba(' +
|
|
|
|
+ selNav.colorStr +
|
|
|
|
+ (selNav.opacity as number) * getColorOpacity(item.value) +
|
|
|
|
+ ')',
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <div className={mapstyles.content}>
|
|
|
|
+ <Icon className="" type={item.type} style={{ fontSize: 20 }}></Icon>
|
|
|
|
+ <div className={mapstyles.name}>{item.name}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ );
|
|
|
|
+ }}
|
|
|
|
+ ></Map>
|
|
|
|
+ {/* {mapList.map(function (item, index) {
|
|
return (
|
|
return (
|
|
<div
|
|
<div
|
|
key={index + 'house'}
|
|
key={index + 'house'}
|
|
@@ -197,7 +219,7 @@ const Environment: React.FC = () => {
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
);
|
|
- })}
|
|
|
|
|
|
+ })} */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|