Browse Source

地图开发

zhaojijng 3 years ago
parent
commit
82337985a4

+ 34 - 3
mock/environment.ts

@@ -14,17 +14,20 @@ export default {
           value: 20,
           name: '董事办公室',
           type: 'office',
-          lamp: 'all',
+          lamp: 'all', //灯的不同状态会显示 不同的颜色
           air: 'part',
           curtain: 'part',
           //device 到时候需要生成
-          //当前设备的状态status all全部开启 part部分开启 close全都关闭
-          //还有设备类型type 包括air lamp curtain
+          //当前设备的状态status :all全部开启 part部分开启 close全都关闭
+          //还有设备类型type :包括air lamp curtain
           device: [
             { type: 'lamp', status: 'close' },
             { type: 'air', status: 'part' },
             { type: 'curtain', status: 'all' },
           ],
+          timeList: ['08:00-16:00', '08:00-16:00'],
+          //normalRun: 22, overtimeWork: 22,  overtimeBook: 22,
+          runTimeStatus: 'normalRun',
         },
         {
           left: 500,
@@ -41,6 +44,7 @@ export default {
             { type: 'lamp', status: 'close' },
             { type: 'air', status: 'close' },
           ],
+          runTimeStatus: 'overtimeWork',
         },
         {
           left: 1000,
@@ -56,6 +60,7 @@ export default {
             { type: 'air', status: 'part' },
             { type: 'curtain', status: 'part' },
           ],
+          runTimeStatus: 'overtimeBook',
         },
         {
           left: 0,
@@ -289,4 +294,30 @@ export default {
       success: true,
     });
   },
+  'POST /api/environment/Building': (req: Request, res: Response) => {
+    res.send({
+      data: [
+        { name: '11#', id: '11111' },
+        { name: '22#', id: '22222' },
+        { name: '33#', id: '33333' },
+        { name: '44#', id: '444444' },
+      ],
+      success: true,
+    });
+  },
+  'POST /api/environment/Floor': (req: Request, res: Response) => {
+    res.send({
+      data: [
+        { name: 'F1', id: 'ffff1' },
+        { name: 'F2', id: 'ffff2' },
+        { name: 'F3', id: 'ffff3' },
+        { name: 'F4', id: 'ffff4' },
+        { name: 'F5', id: 'ffff5' },
+        { name: 'F6', id: 'ffff6' },
+        { name: 'F7', id: 'ffff7' },
+        { name: 'F8', id: 'ffff8' },
+      ],
+      success: true,
+    });
+  },
 };

+ 5 - 0
src/components/map/index.less

@@ -0,0 +1,5 @@
+.map {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

+ 26 - 0
src/components/map/index.tsx

@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from 'react';
+import mapstyles from '@/assets/css/map.less';
+import { getMapList } from '@/services/ant-design-pro/environment';
+
+type MapProps = {
+  //mapList: API.MapInfo[];
+  render: (item: API.MapInfo, index: number) => React.ReactNode;
+};
+
+const Map: React.FC<MapProps> = ({ render }) => {
+  const [mapList, setMapList] = useState<API.MapInfo[]>([]);
+  useEffect(() => {
+    getMapList({ floorId: 'sffsdfdsfdf', floorNumber: 22 }).then(function (res) {
+      var data: API.MapInfo[] = res.data || [];
+      setMapList(data);
+    });
+  }, []);
+  return (
+    <div className={mapstyles.map}>
+      {mapList.map(function (item, index) {
+        return render(item, index);
+      })}
+    </div>
+  );
+};
+export default Map;

+ 2 - 1
src/pages/Environment/components/topNavigator/index.less

@@ -11,8 +11,9 @@
     align-items: center;
     float: left;
     //justify-content: center;
-    width: 140px;
+    width: 120px;
     height: 100%;
+    border-right: 1px solid rgba(196, 196, 196, 0.4);
   }
   .navigator {
     display: flex;

+ 66 - 28
src/pages/Environment/components/topNavigator/index.tsx

@@ -2,15 +2,14 @@ import React, { useState, useEffect, useCallback } from 'react';
 import styles from './index.less';
 import cx from 'classnames';
 import { Select } from 'antd';
-//import type { topNavRightProps } from '@/pages/Equipment/components/topNavRight';
-import RunNavRight from '@/pages/Runtime/components/topNavRight';
 
 import type { navigatorItem } from '@/pages/Environment/index';
+import { getBuildingList, getFloorList } from '@/services/ant-design-pro/environment';
 
 export type topNavigatorProps = {
-  navigatorList: navigatorItem[];
+  navigatorList?: navigatorItem[];
   type: string;
-  navigatorChange(item: navigatorItem): void;
+  navigatorChange?(item: navigatorItem): void;
   // action?: React.ReactElement<topNavRightProps>[];
   action?: React.ReactNode;
 };
@@ -18,41 +17,65 @@ type floorItem = {
   value: string;
   [key: string]: any;
 };
-
+type buildItem = {
+  value: string;
+  [key: string]: any;
+};
 const TopNavigator: React.FC<topNavigatorProps> = ({
   navigatorList = [],
   type,
   navigatorChange,
   action,
 }) => {
-  const [floorList, setFloorList] = useState<floorItem[]>([
-    {
-      value: 'F1',
-    },
-    {
-      value: 'F2',
-    },
-    {
-      value: 'F3',
-    },
-    {
-      value: 'F4',
-    },
-  ]);
-  const [currentFloor, setCurrentFloor] = useState<string>('F2');
+  const [buildList, setBuildList] = useState<buildItem[]>([]);
+  const [currentBuild, setCurrentBuild] = useState<any>();
+
+  const [floorList, setFloorList] = useState<floorItem[]>([]);
+  const [currentFloor, setCurrentFloor] = useState<string>();
 
   const [selParamObj, setSelParamObj] = useState(navigatorList[0]);
 
-  //   useEffect(() => {
-  //     console.log('chartModal-effect');
-  //     setSelParamObj(navigatorList[0]);
-  //   }, []);
+  useEffect(() => {
+    getBuildingList({}).then((res) => {
+      //debugger;
+      var resData = res.data || [];
+      setBuildList(
+        (resData || []).map((item) => {
+          return { label: item.name, value: item.id };
+        }),
+      );
+      // debugger;
+      setCurrentBuild((resData[0] || {}).id); //设置第一个值
+    });
+  }, []);
+
+  useEffect(() => {
+    if (currentBuild) {
+      getFloorList({ buildId: currentBuild }).then((res) => {
+        //debugger;
+        var resData = res.data || [];
+        setFloorList(
+          (resData || []).map((item) => {
+            return { label: item.name, value: item.id };
+          }),
+        );
+        //debugger;
+        setCurrentFloor((resData[0] || {}).id); //设置第一个值
+      });
+    }
+  }, [currentBuild]);
 
-  const changHandle = useCallback((val) => {
+  const changBuildHandle = useCallback((val) => {
+    //console.log('select-onChange', val);
+    //debugger;
+    setCurrentBuild(val);
+  }, []);
+  const changFloorHandle = useCallback((val) => {
+    //console.log('select-onChange', val);
     //debugger;
-    console.log('select-onChange', val);
     setCurrentFloor(val);
   }, []);
+
   //当前切换导航条时
   const itemClick = (item: navigatorItem) => {
     setSelParamObj(item);
@@ -66,9 +89,24 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
     <div className={styles.topnavigator}>
       <div className={styles.floor}>
         <Select
+          options={buildList}
+          placeholder="楼栋"
+          value={currentBuild}
+          onChange={changBuildHandle}
+          size="large"
+          dropdownMatchSelectWidth={true}
+          style={{ width: '100%' }}
+          bordered={false}
+          //   labelInValue={true}
+          // fieldNames={{ label: 'name', value: 'id' }}
+        />
+      </div>
+      <div className={styles.floor}>
+        <Select
           options={floorList}
+          placeholder="楼层"
           value={currentFloor}
-          onChange={changHandle}
+          onChange={changFloorHandle}
           size="large"
           dropdownMatchSelectWidth={true}
           style={{ width: '100%' }}
@@ -105,7 +143,7 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
         </div>
       )}
       {type === 'equipment' && action}
-      {type === 'runtime' && <RunNavRight></RunNavRight>}
+      {type === 'runtime' && action}
     </div>
   );
 };

+ 37 - 15
src/pages/Environment/index.tsx

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

+ 2 - 2
src/pages/Equipment/components/topNavRight/index.tsx

@@ -1,10 +1,10 @@
 // 设备管理 导航条的右侧
 import React, { useState, useEffect } from 'react';
-import { Dropdown, Menu, Modal, Button } from 'antd';
+import { Dropdown, Menu, Modal } from 'antd';
 import Icon from '@/tenants-ui/Icon';
 import { EllipsisOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import styles from './index.less';
-import { equipImageMap } from '@/config/image.js';
+//import { equipImageMap } from '@/config/image.js';
 import type { navigatorItem } from '@/pages/Environment/index';
 
 export type topNavRightProps = {

+ 59 - 55
src/pages/Equipment/index.tsx

@@ -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>

+ 0 - 49
src/pages/Runtime/components/topNavRight/index.jsx

@@ -1,49 +0,0 @@
-// 设备管理 导航条的右侧
-import React, { useState, useEffect } from 'react';
-
-import cx from 'classnames';
-import styles from './index.less';
-
-export default ({}) => {
-  const [allList] = useState([
-    {
-      name: '运行中',
-      id: 'run',
-      num: 7,
-    },
-    {
-      name: '加班/超时运行',
-      id: 'overtime',
-      num: 60,
-    },
-    {
-      name: '不在运行时间',
-      id: 'nottime',
-      num: 33,
-    },
-  ]);
-
-  return (
-    <>
-      <div className={styles.right}>
-        <div className={styles.allList}>
-          <div className={styles.item}>
-            <div className={cx(styles.run, styles.circle)}></div>
-            <div className={styles.title}>运行中</div>
-            <div className={styles.num}>22</div>
-          </div>
-          <div className={styles.item}>
-            <div className={cx(styles.overtime, styles.circle)}></div>
-            <div className={styles.title}>加班/超时运行</div>
-            <div className={styles.num}>5</div>
-          </div>
-          <div className={styles.item}>
-            <div className={cx(styles.nottime, styles.circle)}></div>
-            <div className={styles.title}>不在运行时间</div>
-            <div className={styles.num}>15</div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};

+ 14 - 8
src/pages/Runtime/components/topNavRight/index.less

@@ -5,7 +5,7 @@
   justify-content: center;
   float: right;
   height: 100%;
-  padding-right: 46px;
+  //   padding-right: 46px;
   white-space: nowrap;
   .title {
     color: #c4c4c4;
@@ -13,25 +13,26 @@
   }
   .allList {
     display: flex;
+    height: 100%;
     .item {
       display: flex;
       align-items: center;
       justify-content: center;
       //width: 50px;
-      margin-left: 38px;
+      margin-right: 38px;
       .circle {
         width: 18px;
         height: 18px;
         border-radius: 100%;
       }
-      .run {
-        background: rgb(197, 247, 205);
+      .normalRun {
+        background: rgba(196, 196, 196, 0.2);
       }
-      .overtime {
-        background: rgb(45, 223, 70);
+      .overtimeWork {
+        background: rgba(94, 139, 207, 0.2);
       }
-      .nottime {
-        background: #f5f5f5;
+      .overtimeBook {
+        background: rgba(0, 220, 35, 0.2);
       }
       .title {
         margin: 0 10px;
@@ -44,4 +45,9 @@
       }
     }
   }
+  .date {
+    display: flex;
+    height: 100%;
+    border-left: 1px solid rgba(196, 196, 196, 0.4);
+  }
 }

+ 45 - 0
src/pages/Runtime/components/topNavRight/index.tsx

@@ -0,0 +1,45 @@
+// 设备管理 导航条的右侧
+import React, { useState, useEffect } from 'react';
+import { DatePicker } from 'antd';
+import cx from 'classnames';
+import styles from './index.less';
+import moment from 'moment';
+
+export type TopNavRightProps = {
+  runtimeNav: any;
+};
+
+const TopNavRight: React.FC<TopNavRightProps> = ({ runtimeNav }) => {
+  const dateFormat = 'YYYY/MM/DD';
+  return (
+    <>
+      <div className={styles.right}>
+        <div className={styles.allList}>
+          <div className={styles.item}>
+            <div className={cx(styles.normalRun, styles.circle)}></div>
+            <div className={styles.title}>正常运行</div>
+            <div className={styles.num}>{runtimeNav.normalRun}</div>
+          </div>
+          <div className={styles.item}>
+            <div className={cx(styles.overtimeWork, styles.circle)}></div>
+            <div className={styles.title}>加班</div>
+            <div className={styles.num}>{runtimeNav.overtimeWork}</div>
+          </div>
+          <div className={styles.item}>
+            <div className={cx(styles.overtimeBook, styles.circle)}></div>
+            <div className={styles.title}>会议预约</div>
+            <div className={styles.num}>{runtimeNav.overtimeBook}</div>
+          </div>
+        </div>
+        <div className={styles.date}>
+          <DatePicker
+            bordered={false}
+            defaultValue={moment('2015/01/01', dateFormat)}
+            format={dateFormat}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+export default TopNavRight;

+ 0 - 74
src/pages/Runtime/index.jsx

@@ -1,74 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import PageHeader from '@/components/PageHeader';
-import TopNavigator from '../Environment/components/topNavigator';
-import { FormattedMessage, history } from 'umi';
-import SearchInput from '@/tenants-ui/SearchInput';
-import styles from './index.less';
-import mapstyles from '@/assets/css/map.less';
-import Icon from '@/tenants-ui/Icon';
-import { equipImageMap } from '@/config/image.js';
-
-export default function Runtime(props) {
-  const { maptemp6 } = equipImageMap;
-
-  const [searchText, setSearchText] = useState();
-  const [navigatorList] = useState([]);
-  const [mapImg, setMapImg] = useState(maptemp6);
-
-  const checkRecord = () => {
-    history.push('/runtime/recordList');
-    console.log('showR');
-  };
-  return (
-    <div>
-      <PageHeader
-        title={<FormattedMessage id="menu.runtime" />}
-        action={
-          <div className={styles.headerRight}>
-            <SearchInput
-              placeholder="搜索空间"
-              onSearch={(s) => {
-                setSearchText(s || undefined);
-              }}
-              onCancel={() => {
-                setSearchText();
-              }}
-            />
-            <div className={styles.check} onClick={checkRecord}>
-              <Icon style={{ marginRight: 6 }} type="document" />
-              <span>查看加班记录</span>
-            </div>
-          </div>
-        }
-      />
-      <div style={{ marginTop: '26px' }}>
-        <TopNavigator type={'runtime'}></TopNavigator>
-        <div className={styles.mapwrap}>
-          <div className={styles.top}>
-            <div className={styles.right}></div>
-          </div>
-          {/* <div className={styles.map}>
-            <div className={styles.specialRoom}></div>
-            <img src={mapImg}></img>
-          </div> */}
-
-          <div className={mapstyles.map}>
-            <div
-              className={mapstyles.house}
-              style={{
-                width: 180,
-                height: 100,
-              }}
-            >
-              <div className={mapstyles.allTime}>08:00-23:00</div>
-              <div className={mapstyles.content}>
-                <Icon type="office" style={{ fontSize: 20 }}></Icon>
-                <div className={mapstyles.name}>Jozy Zone</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

+ 140 - 0
src/pages/Runtime/index.tsx

@@ -0,0 +1,140 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import PageHeader from '@/components/PageHeader';
+import Map from '@/components/map';
+import TopNavigator from '../Environment/components/topNavigator';
+import RunNavRight from './components/topNavRight';
+import { FormattedMessage, history } from 'umi';
+import { Input } from 'antd';
+import styles from './index.less';
+import mapstyles from '@/assets/css/map.less';
+import Icon from '@/tenants-ui/Icon';
+//import { equipImageMap } from '@/config/image.js';
+//import { getMapList } from '@/services/ant-design-pro/environment';
+
+type runtimeNavType = {
+  normalRun: number;
+  overtimeWork: number;
+  overtimeBook: number;
+};
+
+const Runtime: React.FC = () => {
+  // const { maptemp6 } = equipImageMap;
+
+  const [searchText, setSearchText] = useState<string>();
+  const [runtimeNav] = useState<runtimeNavType>({
+    normalRun: 22,
+    overtimeWork: 22,
+    overtimeBook: 22,
+  });
+  //const [mapList, setMapList] = useState<API.MapInfo[]>([]);
+
+  const checkRecord = () => {
+    history.push('/runtime/recordList');
+    console.log('showR');
+  };
+  //   useEffect(() => {
+  //     getMapList({ floorId: 'sffsdfdsfdf', floorNumber: 22 }).then(function (res) {
+  //       var data: API.MapInfo[] = res.data || [];
+  //       data.forEach((item, index) => {});
+  //       setMapList(data);
+  //     });
+  //   }, []);
+  return (
+    <div>
+      <PageHeader
+        title={<FormattedMessage id="menu.runtime" />}
+        action={
+          <div className={styles.headerRight}>
+            {/* <SearchInput
+              placeholder="搜索空间"
+              onSearch={(s) => {
+                setSearchText(s || undefined);
+              }}
+              onCancel={() => {
+                setSearchText();
+              }}
+            /> */}
+            <Input.Search
+              size="large"
+              allowClear
+              style={{ width: '230px' }}
+              placeholder={'搜索空间'}
+              onSearch={(s) => {
+                setSearchText(s || undefined);
+              }}
+            />
+            <div className={styles.check} onClick={checkRecord} style={{ display: 'none' }}>
+              <Icon className="" style={{ marginRight: 6 }} type="document" />
+              <span>查看加班记录</span>
+            </div>
+          </div>
+        }
+      />
+      <div style={{ marginTop: '26px' }}>
+        <TopNavigator
+          type={'runtime'}
+          action={<RunNavRight runtimeNav={runtimeNav}></RunNavRight>}
+        ></TopNavigator>
+        <div className={styles.mapwrap}>
+          <div className={styles.top}>
+            <div className={styles.right}></div>
+          </div>
+          {/* <div className={styles.map}>
+            <div className={styles.specialRoom}></div>
+            <img src={mapImg}></img>
+          </div> */}
+
+          <div className={mapstyles.map}>
+            {/* <div
+              className={mapstyles.house}
+              style={{
+                width: 180,
+                height: 100,
+              }}
+            >
+              <div className={mapstyles.allTime}>08:00-23:00</div>
+              <div className={mapstyles.content}>
+                <Icon className="" type="office" style={{ fontSize: 20 }}></Icon>
+                <div className={mapstyles.name}>Jozy Zone</div>
+              </div>
+            </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:
+                        item.runTimeStatus == 'normalRun'
+                          ? 'rgba(196, 196, 196, 0.2)'
+                          : item.runTimeStatus == 'overtimeWork'
+                          ? 'rgba(94, 139, 207, 0.2)'
+                          : 'rgba(0, 220, 35, 0.2)',
+                    }}
+                  >
+                    <div className={mapstyles.allTime}>
+                      {(item.timeList || []).map(function (titem: string, tindex: number) {
+                        return <span key={tindex + 'time'}>{titem},</span>;
+                      })}
+                    </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>
+    </div>
+  );
+};
+export default Runtime;

+ 22 - 0
src/services/ant-design-pro/environment.ts

@@ -11,3 +11,25 @@ export async function getMapList(body: any, options?: { [key: string]: any }) {
     data: body,
   });
 }
+export async function getBuildingList(body: any, options?: { [key: string]: any }) {
+  // debugger;
+  return request<API.BuildFloorList>('/api/environment/Building', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    ...(options || {}),
+    data: body,
+  });
+}
+export async function getFloorList(body: any, options?: { [key: string]: any }) {
+  // debugger;
+  return request<API.BuildFloorList>('/api/environment/Floor', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    ...(options || {}),
+    data: body,
+  });
+}

+ 9 - 0
src/services/ant-design-pro/typings.d.ts

@@ -113,4 +113,13 @@ declare namespace API {
     data?: MapInfo[];
     success?: boolean;
   };
+  //楼层建筑都是这种类型
+  type BuildFloorItem = {
+    name: string;
+    id: string;
+  };
+  type BuildFloorList = {
+    data?: BuildFloorItem[];
+    success?: boolean;
+  };
 }