|
@@ -3,6 +3,7 @@ import { FormattedMessage } from 'umi';
|
|
|
|
|
|
// import SearchInput from '@/tenants-ui/SearchInput';
|
|
|
import PageHeader from '@/components/PageHeader';
|
|
|
+import Map from '@/components/map';
|
|
|
import TopNavigator from '../Environment/components/topNavigator';
|
|
|
import TopNavRight from './components/topNavRight';
|
|
|
import DeviceModal from './components/deviceModal';
|
|
@@ -16,7 +17,7 @@ import { Input } from 'antd';
|
|
|
import Icon from '@/tenants-ui/Icon';
|
|
|
import type { navigatorItem } from '@/pages/Environment/index';
|
|
|
|
|
|
-import { getMapList } from '@/services/ant-design-pro/environment';
|
|
|
+//import { getMapList } from '@/services/ant-design-pro/environment';
|
|
|
|
|
|
const Environment: React.FC = () => {
|
|
|
const { envir_all, equip_air, equip_lamp, envir_curtain } = equipImageMap;
|
|
@@ -56,14 +57,14 @@ const Environment: React.FC = () => {
|
|
|
colorStr: '232, 158, 50,',
|
|
|
},
|
|
|
]);
|
|
|
- const [mapList, setMapList] = useState<API.MapInfo[]>([]);
|
|
|
- useEffect(() => {
|
|
|
- getMapList({ floorId: 'sffsdfdsfdf', floorNumber: 22 }).then(function (res) {
|
|
|
- var data: API.MapInfo[] = res.data || [];
|
|
|
- data.forEach((item, index) => {});
|
|
|
- setMapList(data);
|
|
|
- });
|
|
|
- }, []);
|
|
|
+ // const [mapList, setMapList] = useState<API.MapInfo[]>([]);
|
|
|
+ // useEffect(() => {
|
|
|
+ // getMapList({ floorId: 'sffsdfdsfdf', floorNumber: 22 }).then(function (res) {
|
|
|
+ // var data: API.MapInfo[] = res.data || [];
|
|
|
+ // data.forEach((item, index) => {});
|
|
|
+ // setMapList(data);
|
|
|
+ // });
|
|
|
+ // }, []);
|
|
|
const [selNav, setSelNav] = useState<navigatorItem>(navigatorList[0]);
|
|
|
const navigatorChange = (item: navigatorItem) => {
|
|
|
//debugger;
|
|
@@ -118,7 +119,7 @@ const Environment: React.FC = () => {
|
|
|
<Input.Search
|
|
|
size="large"
|
|
|
allowClear
|
|
|
- style={{ width: '20%' }}
|
|
|
+ style={{ width: '230px' }}
|
|
|
placeholder={'搜索空间'}
|
|
|
onSearch={(s) => {
|
|
|
setSearchText(s || undefined);
|
|
@@ -163,53 +164,56 @@ const Environment: React.FC = () => {
|
|
|
)}
|
|
|
</div>
|
|
|
<div className={cx(mapstyles.map, mapstyles.equipmentMap)}>
|
|
|
- {mapList.map(function (item, index) {
|
|
|
- return (
|
|
|
- <div
|
|
|
- key={index + 'house'}
|
|
|
- className={mapstyles.house}
|
|
|
- style={{
|
|
|
- left: item.left,
|
|
|
- top: item.top,
|
|
|
- width: item.width,
|
|
|
- height: item.height,
|
|
|
- backgroundColor:
|
|
|
- selNav.id == 'all'
|
|
|
- ? 'rgba(196, 196, 196, 0.2)'
|
|
|
- : getColorOpacity(item[selNav.id]),
|
|
|
- }}
|
|
|
- >
|
|
|
- {/* {selNav.id == 'all' && (
|
|
|
- <div className={mapstyles.allDevice}>
|
|
|
- {item.device.map((ditem, dindex: number) => {
|
|
|
- return (
|
|
|
- <div
|
|
|
- key={dindex + 'device'}
|
|
|
- className={mapstyles.icon}
|
|
|
- style={{
|
|
|
- backgroundColor: getColorOpacity(ditem.status, ditem.type),
|
|
|
- }}
|
|
|
- >
|
|
|
- <Icon
|
|
|
- className=""
|
|
|
- type={ditem.type}
|
|
|
- style={{ color: '#ffffff' }}
|
|
|
- ></Icon>
|
|
|
- </div>
|
|
|
- );
|
|
|
- })}
|
|
|
+ <Map
|
|
|
+ render={(item, index) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ key={index + 'house'}
|
|
|
+ className={mapstyles.house}
|
|
|
+ style={{
|
|
|
+ left: item.left,
|
|
|
+ top: item.top,
|
|
|
+ width: item.width,
|
|
|
+ height: item.height,
|
|
|
+ backgroundColor:
|
|
|
+ selNav.id == 'all'
|
|
|
+ ? 'rgba(196, 196, 196, 0.2)'
|
|
|
+ : getColorOpacity(item[selNav.id]),
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {selNav.id == 'all' && (
|
|
|
+ <div className={mapstyles.allDevice}>
|
|
|
+ {/* 所有设备的图标列表 */}
|
|
|
+ {item.device.map((ditem, dindex: number) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ key={dindex + 'device'}
|
|
|
+ className={mapstyles.icon}
|
|
|
+ style={{
|
|
|
+ backgroundColor: getColorOpacity(ditem.status, ditem.type),
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Icon
|
|
|
+ className=""
|
|
|
+ type={ditem.type}
|
|
|
+ style={{ color: '#ffffff' }}
|
|
|
+ ></Icon>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ <div className={mapstyles.showModal} onClick={showModalClick}>
|
|
|
+ <Icon className="" type="hover"></Icon>
|
|
|
+ </div>
|
|
|
+ <div className={mapstyles.content}>
|
|
|
+ <Icon className="" type={item.type} style={{ fontSize: 20 }}></Icon>
|
|
|
+ <div className={mapstyles.name}>{item.name}</div>
|
|
|
</div>
|
|
|
- )} */}
|
|
|
- <div className={mapstyles.showModal} onClick={showModalClick}>
|
|
|
- <Icon className="" type="hover"></Icon>
|
|
|
- </div>
|
|
|
- <div className={mapstyles.content}>
|
|
|
- <Icon className="" type={item.type} style={{ fontSize: 20 }}></Icon>
|
|
|
- <div className={mapstyles.name}>{item.name}</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- );
|
|
|
- })}
|
|
|
+ );
|
|
|
+ }}
|
|
|
+ ></Map>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|