|
@@ -0,0 +1,228 @@
|
|
|
+import React, { useState, useEffect, useCallback } from 'react';
|
|
|
+import { FormattedMessage } from 'umi';
|
|
|
+
|
|
|
+// import SearchInput from '@/tenants-ui/SearchInput';
|
|
|
+import PageHeader from '@/components/PageHeader';
|
|
|
+import TopNavigator from '../Environment/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 cx from 'classnames';
|
|
|
+// import './map.less';
|
|
|
+import { equipImageMap } from '@/config/image.js';
|
|
|
+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';
|
|
|
+
|
|
|
+const Environment: React.FC = () => {
|
|
|
+ const { envir_all, equip_air, equip_lamp, envir_curtain } = equipImageMap;
|
|
|
+ const [searchText, setSearchText] = useState<string>('');
|
|
|
+ const [showModal, setShowModal] = useState<boolean>(false);
|
|
|
+ const [navigatorList] = useState<navigatorItem[]>([
|
|
|
+ {
|
|
|
+ name: '全部设备',
|
|
|
+ id: 'all',
|
|
|
+ src: envir_all,
|
|
|
+ //color: '#E5574F',
|
|
|
+ color: '#E89E32',
|
|
|
+ colorStr: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '空调',
|
|
|
+ id: 'air',
|
|
|
+ src: equip_air,
|
|
|
+ num: 11,
|
|
|
+ color: '#5E8BCF',
|
|
|
+ colorStr: '94,139,207,',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '照明',
|
|
|
+ id: 'lamp',
|
|
|
+ src: equip_lamp,
|
|
|
+ num: 10,
|
|
|
+ color: '#FFE823',
|
|
|
+ colorStr: '255,232,35,',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '窗帘',
|
|
|
+ id: 'curtain',
|
|
|
+ src: envir_curtain,
|
|
|
+ num: 50,
|
|
|
+ color: '#E89E32',
|
|
|
+ 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 [selNav, setSelNav] = useState<navigatorItem>(navigatorList[0]);
|
|
|
+ const navigatorChange = (item: navigatorItem) => {
|
|
|
+ //debugger;
|
|
|
+ if (item.id == 'all') {
|
|
|
+ }
|
|
|
+ if (item.id == 'air') {
|
|
|
+ }
|
|
|
+ if (item.id == 'lamp') {
|
|
|
+ }
|
|
|
+ setSelNav(item);
|
|
|
+ };
|
|
|
+ const showModalClick = () => {
|
|
|
+ console.log('showChart');
|
|
|
+ setShowModal(true);
|
|
|
+ };
|
|
|
+ //当前设备的状态 all全部开启 part部分开启 close全都关闭 还有类型type 包括air lamp curtain
|
|
|
+ //根据设备状态返回不同的 颜色
|
|
|
+ const getColorOpacity = (value: string, type?: string): string => {
|
|
|
+ //debugger;
|
|
|
+ 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 == 'part') {
|
|
|
+ return 'rgba(' + colorStr + '0.4)';
|
|
|
+ } else if (value == 'all') {
|
|
|
+ return 'rgba(' + colorStr + '1)';
|
|
|
+ } else {
|
|
|
+ return 'rgba(196, 196, 196, 0.6)';
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <PageHeader
|
|
|
+ title={<FormattedMessage id="menu.equipment" />}
|
|
|
+ action={
|
|
|
+ // <SearchInput
|
|
|
+ // placeholder="搜索空间"
|
|
|
+ // onSearch={(s) => {
|
|
|
+ // setSearchText(s || undefined);
|
|
|
+ // }}
|
|
|
+ // onCancel={() => {
|
|
|
+ // setSearchText();
|
|
|
+ // }}
|
|
|
+ // />
|
|
|
+ <Input.Search
|
|
|
+ size="large"
|
|
|
+ allowClear
|
|
|
+ style={{ width: '20%' }}
|
|
|
+ placeholder={'搜索空间'}
|
|
|
+ onSearch={(s) => {
|
|
|
+ setSearchText(s || undefined);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <div style={{ marginTop: '26px' }}>
|
|
|
+ <TopNavigator
|
|
|
+ navigatorList={navigatorList}
|
|
|
+ type={'equipment'}
|
|
|
+ navigatorChange={navigatorChange}
|
|
|
+ action={<TopNavRight selNavObj={selNav} navigatorList={navigatorList}></TopNavRight>}
|
|
|
+ ></TopNavigator>
|
|
|
+
|
|
|
+ <div className={styles.mapwrap}>
|
|
|
+ <div className={styles.top}>
|
|
|
+ {selNav.id !== 'all' && (
|
|
|
+ <div className={styles.right}>
|
|
|
+ <div>
|
|
|
+ <span
|
|
|
+ className={styles.circle}
|
|
|
+ style={{ backgroundColor: 'rgba(' + selNav.colorStr + '1)' }}
|
|
|
+ ></span>
|
|
|
+ <span>开启</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span
|
|
|
+ className={styles.circle}
|
|
|
+ style={{ backgroundColor: 'rgba(' + selNav.colorStr + '0.4)' }}
|
|
|
+ ></span>
|
|
|
+ <span>部分开启</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span
|
|
|
+ className={styles.circle}
|
|
|
+ style={{ backgroundColor: 'rgba(196, 196, 196, 0.6)' }}
|
|
|
+ ></span>
|
|
|
+ <span>关闭</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </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>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </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>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {showModal && (
|
|
|
+ <DeviceModal
|
|
|
+ onClose={() => {
|
|
|
+ setShowModal(false);
|
|
|
+ }}
|
|
|
+ ></DeviceModal>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default Environment;
|