Przeglądaj źródła

地图对接接口

zhaojijng 3 lat temu
rodzic
commit
fb049f7001

+ 5 - 4
config/proxy.ts

@@ -11,24 +11,25 @@ export default {
     // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
     '/api/': {
       // 要代理的地址
-      target: 'https://preview.pro.ant.design',
+      target: 'http://192.168.0.14:52015/',
       // 配置了这个可以从 http 代理到 https
       // 依赖 origin 的功能可能需要这个,比如 cookie
       changeOrigin: true,
+      pathRewrite: { '^/api': '' },
     },
   },
   test: {
     '/api/': {
-      target: 'https://proapi.azurewebsites.net',
+      target: 'http://192.168.0.14:52015/',
       changeOrigin: true,
-      pathRewrite: { '^': '' },
+      pathRewrite: { '^/api': '' },
     },
   },
   pre: {
     '/api/': {
       target: 'your pre url',
       changeOrigin: true,
-      pathRewrite: { '^': '' },
+      pathRewrite: { '^/api': '' },
     },
   },
 };

Plik diff jest za duży
+ 581 - 577
mock/environment.ts


+ 3 - 3
src/assets/css/antd-tenants.less

@@ -4,13 +4,13 @@
 @body-background: #eef1f2;
 
 @primary-color: #f0da21;
-@text-color: #4D5262;
+@text-color: #4d5262;
 
 @height-lg: 50px;
 
 // @btn-text-hover-bg: #fff;
 @btn-primary-color: #000;
-@btn-primary-bg: #FFE823;
+@btn-primary-bg: #eef1f2;
 @btn-primary-shadow: 0px 4px 6px rgba(0, 0, 0, 0.07), 0px 0px 1px rgba(0, 0, 0, 0.15);
 @btn-font-size-lg: 14px;
 @btn-padding-horizontal-lg: 30px;
@@ -23,4 +23,4 @@
 @table-padding-vertical: 8px;
 @table-header-cell-split-color: transparent;
 
-@popover-arrow-width: 0px;
+@popover-arrow-width: 0px;

+ 5 - 3
src/assets/css/map.less

@@ -1,19 +1,21 @@
 .mapwrap {
   position: relative;
-  height: calc(100% - 280px);
+  height: calc(100% - 285px);
   overflow: hidden;
   .mapControl {
     position: absolute;
     right: 20px;
     bottom: 20px;
     z-index: 1;
+
     .zoom {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 44px;
-      height: 44px;
+      width: 40px;
+      height: 40px;
       margin-bottom: 7px;
+      font-size: 22px;
       background: #fff;
       border-radius: 4px;
       box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 4px 15px rgba(0, 0, 0, 0.05);

+ 3 - 0
src/components/SearchInput/index.less

@@ -0,0 +1,3 @@
+.headerSearch {
+  border-bottom: 1px solid #c4c4c4;
+}

+ 76 - 0
src/components/SearchInput/index.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react';
+import styles from './index.less';
+import { Select } from 'antd';
+import useMapList from '@/hooks/useMapList';
+import { SearchOutlined } from '@ant-design/icons';
+
+type mapResType = {
+  text: string;
+  value: string;
+};
+const { Option } = Select;
+
+type SearchInputProps = {
+  onSearch: (s: string) => void;
+};
+const SearchInput: React.FC<SearchInputProps> = ({ onSearch }) => {
+  const mapList = useMapList();
+  const [resData, setResData] = useState<mapResType[]>([]);
+  const [value, setValue] = useState<any>();
+
+  const handleSearch = (value: string) => {
+    //debugger;
+    if (value) {
+      let data: mapResType[] = [];
+      mapList.map((item, index) => {
+        if (item.localName.indexOf(value) > -1) {
+          data.push({
+            text: item.localName,
+            value: item.localName,
+          });
+        }
+        setResData(data);
+      });
+    } else {
+      setResData([]);
+    }
+  };
+
+  const handleChange = (sel: string) => {
+    setValue(null); //清空输入的值
+    setResData([]); //清空搜索匹配列表
+    onSearch(sel);
+  };
+  return (
+    <div className={styles.headerSearch}>
+      <SearchOutlined style={{ fontSize: 16 }} />
+      <Select
+        showSearch
+        value={value}
+        placeholder="搜索空间"
+        defaultActiveFirstOption={false}
+        showArrow={false}
+        filterOption={false}
+        onSearch={handleSearch}
+        onChange={handleChange}
+        notFoundContent={null}
+        bordered={false}
+        style={{ width: 150, borderColor: '#c4c4c4' }}
+        //   suffixIcon={
+        //     <AudioOutlined
+        //       style={{
+        //         fontSize: 16,
+        //         color: '#1890ff',
+        //       }}
+        //     />
+        //   }
+      >
+        {resData.map(function (item, index) {
+          return <Option key={item.value}>{item.text}</Option>;
+        })}
+      </Select>
+    </div>
+  );
+};
+
+export default SearchInput;

+ 51 - 14
src/components/map/index.tsx

@@ -1,17 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import mapstyles from '@/assets/css/map.less';
-import { getMapList } from '@/services/ant-design-pro/environment';
+import useMapList from '@/hooks/useMapList';
+
 import cx from 'classnames';
 import Icon from '@/tenants-ui/Icon';
 
 type MapProps = {
-  //mapList: API.MapInfo[];
   type: string;
+  searchText: string;
   render: (item: API.MapInfo, index: number) => React.ReactNode;
 };
 
-const Map: React.FC<MapProps> = ({ type, render }) => {
-  const [mapList, setMapList] = useState<API.MapInfo[]>([]);
+const Map: React.FC<MapProps> = ({ type, searchText, render }) => {
+  const mapList = useMapList();
 
   const [startPageX, setStartPageX] = useState<number>(0);
   const [startPageY, setStartPageY] = useState<number>(0);
@@ -20,8 +21,8 @@ const Map: React.FC<MapProps> = ({ type, render }) => {
   const [translateY, setTranslateY] = useState<number>(0);
   const [mscale, setMscale] = useState<number>(1);
   const [canMove, setCanMove] = useState<boolean>(false);
-  let mapWidth = 3000,
-    mapHeight = 1200;
+  //   let mapWidth:number = 3000,
+  //     mapHeight:number = 1200;
 
   const mouseDownEvent = (event: React.MouseEvent) => {
     // startPageX = event.pageX;
@@ -42,7 +43,7 @@ const Map: React.FC<MapProps> = ({ type, render }) => {
       setTranslateX(translateX + nowPageX - startPageX);
       setTranslateY(translateY + nowPageY - startPageY);
       console.log('mouseMoveEvent-xx', translateX, nowPageX, startPageX);
-      console.log('mouseMoveEvent-yy', translateY, nowPageY, startPageY);
+      // console.log('mouseMoveEvent-yy', translateY, nowPageY, startPageY);
 
       setStartPageX(event.pageX);
       setStartPageY(event.pageY);
@@ -50,19 +51,37 @@ const Map: React.FC<MapProps> = ({ type, render }) => {
   };
   const mapZoom = (event: React.MouseEvent) => {
     event.stopPropagation();
-    setMscale(mscale + 0.1);
+    if (mscale < 1.6) {
+      setMscale(mscale + 0.1);
+    }
   };
   const mapReduce = (event: React.MouseEvent) => {
     event.stopPropagation();
     console.log('mapReduce', mscale);
-    setMscale(mscale - 0.1);
+    if (mscale > 0.3) {
+      setMscale(mscale - 0.1);
+    }
   };
+
   useEffect(() => {
-    getMapList({ floorId: 'sffsdfdsfdf', floorNumber: 22 }).then(function (res) {
-      var data: API.MapInfo[] = res.data || [];
-      setMapList(data);
-    });
-  }, []);
+    debugger;
+    console.log('searchText', searchText);
+    if (searchText) {
+      let left: any = 0,
+        top: any = 0;
+      mapList.map((item, index) => {
+        if (item.localName == searchText) {
+          left = -(item.left || 0);
+          top = -(item.top || 0);
+        }
+      });
+      // debugger;
+      setTranslateX(left);
+      setTranslateY(top);
+    }
+    searchText = '';
+  }, [searchText]);
+
   //   useEffect(() => {// todo 要不要用呢
   //     document.querySelector('#root').addEventListener(
   //       'mouseup',
@@ -97,6 +116,24 @@ const Map: React.FC<MapProps> = ({ type, render }) => {
           return render(item, index);
         })}
       </div>
+      <div className={mapstyles.mapControl}>
+        <div
+          className={mapstyles.zoom}
+          onClick={(event) => {
+            mapZoom(event);
+          }}
+        >
+          <Icon className="" type="zoom"></Icon>
+        </div>
+        <div
+          className={mapstyles.zoom}
+          onClick={(event) => {
+            mapReduce(event);
+          }}
+        >
+          <Icon className="" type="reduce"></Icon>
+        </div>
+      </div>
     </div>
   );
 };

+ 19 - 0
src/hooks/useMapList.ts

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+import { getMapList } from '@/services/ant-design-pro/environment';
+
+export default function () {
+  const [mapList, setMapList] = useState<API.MapInfo[]>([]);
+
+  useEffect(() => {
+    //debugger;
+    getMapList({ floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454', projectId: '' }).then(
+      (res) => {
+        debugger;
+        var data: API.MapInfo[] = (res.data || {}).spaceList || [];
+        setMapList(data);
+      },
+    );
+  }, []);
+
+  return mapList;
+}

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

@@ -5,7 +5,7 @@
   box-sizing: border-box;
   //   display: flex;
   height: 68px;
-  margin-top: 18px;
+  margin-top: 23px;
   background: #fff;
   .floor {
     display: flex;

+ 3 - 3
src/pages/Environment/components/topNavigator/index.tsx

@@ -37,15 +37,15 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
 
   useEffect(() => {
     //console.log('TopNavigator----getBuildingList');
+    //请求建筑的接口
     getBuildingList({}).then((res) => {
-      //debugger;
       var resData = res.data || [];
       setBuildList(
         (resData || []).map((item) => {
           return { label: item.name, value: item.id };
         }),
       );
-      // debugger;
+      //debugger;
       setCurrentBuild((resData[0] || {}).id); //设置第一个值
     });
   }, []);
@@ -53,6 +53,7 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
   useEffect(() => {
     if (currentBuild) {
       getFloorList({ buildId: currentBuild }).then((res) => {
+        //请求楼层的接口
         //debugger;
         var resData = res.data || [];
         setFloorList(
@@ -60,7 +61,6 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
             return { label: item.name, value: item.id };
           }),
         );
-        //debugger;
         setCurrentFloor((resData[0] || {}).id); //设置第一个值
       });
     }

+ 14 - 17
src/pages/Environment/index.tsx

@@ -2,7 +2,7 @@ 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 SearchInput from '@/components/SearchInput';
 import TopNavigator from './components/topNavigator';
 import ChartModal from './components/chartModal';
 
@@ -118,25 +118,21 @@ const Environment: React.FC = () => {
       <PageHeader
         title={<FormattedMessage id="menu.environment" />}
         action={
-          //   <SearchInput
-          //     placeholder="搜索空间"
-          //     onSearch={(s) => {
-          //       setSearchText(s || undefined);
-          //     }}
-          //     onCancel={() => {
-          //       setSearchText();
-          //     }}
-          //   />
-
-          <Input.Search
-            size="large"
-            allowClear
-            style={{ width: '230px' }}
-            placeholder={'搜索空间'}
+          <SearchInput
             onSearch={(s) => {
-              setSearchText(s || undefined);
+              setSearchText(s);
             }}
           />
+
+          //   <Input.Search
+          //     size="large"
+          //     allowClear
+          //     style={{ width: '230px' }}
+          //     placeholder={'搜索空间'}
+          //     onSearch={(s) => {
+          //       setSearchText(s);
+          //     }}
+          //   />
         }
       />
       <TopNavigator
@@ -165,6 +161,7 @@ const Environment: React.FC = () => {
 
       <Map
         type={'enviroment'}
+        searchText={searchText}
         render={(item: API.MapInfo, index: number) => {
           return (
             <div

+ 9 - 12
src/pages/Equipment/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { FormattedMessage } from 'umi';
 
-// import SearchInput from '@/tenants-ui/SearchInput';
+import SearchInput from '@/components/SearchInput';
 import PageHeader from '@/components/PageHeader';
 import Map from '@/components/map';
 import TopNavigator from '../Environment/components/topNavigator';
@@ -21,7 +21,7 @@ import type { navigatorItem } from '@/pages/Environment/index';
 
 const Environment: React.FC = () => {
   const { envir_all, equip_air, equip_lamp, envir_curtain } = equipImageMap;
-  const [searchText, setSearchText] = useState<string>('');
+  const [searchText, setSearchText] = useState<string>();
   const [showModal, setShowModal] = useState<boolean>(false);
   const [navigatorList] = useState<navigatorItem[]>([
     {
@@ -34,7 +34,7 @@ const Environment: React.FC = () => {
     },
     {
       name: '空调',
-      id: 'air',
+      id: 'airConditioner',
       src: equip_air,
       num: 11,
       color: '#5E8BCF',
@@ -70,7 +70,7 @@ const Environment: React.FC = () => {
     //debugger;
     if (item.id == 'all') {
     }
-    if (item.id == 'air') {
+    if (item.id == 'airConditioner') {
     }
     if (item.id == 'lamp') {
     }
@@ -80,7 +80,7 @@ const Environment: React.FC = () => {
     console.log('showChart');
     setShowModal(true);
   };
-  //当前设备的状态 all全部开启 part部分开启 close全都关闭  还有类型type 包括air lamp curtain
+  //当前设备的状态 all全部开启 part部分开启 close全都关闭  还有类型type 包括airConditioner lamp curtain
   //根据设备状态返回不同的 颜色
   const getColorOpacity = (value: string, type?: string): string => {
     //debugger;
@@ -107,13 +107,9 @@ const Environment: React.FC = () => {
       <PageHeader
         title={<FormattedMessage id="menu.equipment" />}
         action={
-          <Input.Search
-            size="large"
-            allowClear
-            style={{ width: '230px' }}
-            placeholder={'搜索空间'}
+          <SearchInput
             onSearch={(s) => {
-              setSearchText(s || undefined);
+              setSearchText(s);
             }}
           />
         }
@@ -152,6 +148,7 @@ const Environment: React.FC = () => {
         )}
       </div>
       <Map
+        searchText={searchText}
         type={'equipment'}
         render={(item, index) => {
           return (
@@ -172,7 +169,7 @@ const Environment: React.FC = () => {
               {selNav.id == 'all' && (
                 <div className={mapstyles.allDevice}>
                   {/* 所有设备的图标列表 */}
-                  {item.device.map((ditem, dindex: number) => {
+                  {(item.device || []).map((ditem, dindex: number) => {
                     return (
                       <div
                         key={dindex + 'device'}

+ 14 - 24
src/pages/Runtime/index.tsx

@@ -8,6 +8,8 @@ import { Input } from 'antd';
 import styles from './index.less';
 import mapstyles from '@/assets/css/map.less';
 import Icon from '@/tenants-ui/Icon';
+import SearchInput from '@/components/SearchInput';
+
 //import { equipImageMap } from '@/config/image.js';
 //import { getMapList } from '@/services/ant-design-pro/environment';
 
@@ -44,30 +46,17 @@ const Runtime: React.FC = () => {
       <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 className={styles.headerRight}>
+          //     <div className={styles.check} onClick={checkRecord} style={{ display: 'none' }}>
+          //       <Icon className="" style={{ marginRight: 6 }} type="document" />
+          //       <span>查看加班记录</span>
+          //     </div>
+          //   </div>
+          <SearchInput
+            onSearch={(s) => {
+              setSearchText(s);
+            }}
+          />
         }
       />
       <TopNavigator
@@ -95,6 +84,7 @@ const Runtime: React.FC = () => {
               </div>
             </div> */}
       <Map
+        searchText={searchText}
         type={'runtime'}
         render={(item, index) => {
           return (

+ 1 - 1
src/services/ant-design-pro/environment.ts

@@ -2,7 +2,7 @@
 import { request } from 'umi';
 
 export async function getMapList(body: any, options?: { [key: string]: any }) {
-  return request<API.MapList>('/api/environment/map', {
+  return request<API.MapInfoRes>('/api/map/queryMapInfo', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

+ 10 - 4
src/services/ant-design-pro/typings.d.ts

@@ -109,10 +109,16 @@ declare namespace API {
     type?: string;
     [key: string]: any;
   };
-  type MapList = {
-    data?: MapInfo[];
-    success?: boolean;
+
+  type MapInfoRes = {
+    data?: {
+      height?: number;
+      width?: number;
+      spaceList?: MapInfo[];
+    };
+    result?: string;
   };
+
   //楼层建筑都是这种类型
   type BuildFloorItem = {
     name: string;
@@ -120,6 +126,6 @@ declare namespace API {
   };
   type BuildFloorList = {
     data?: BuildFloorItem[];
-    success?: boolean;
+    result?: string;
   };
 }

+ 1 - 1
src/tenants-ui/Icon/index.jsx

@@ -1,7 +1,7 @@
 import { createFromIconfontCN } from '@ant-design/icons';
 
 const Icon = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_3184967_yamfb93ms7g.js',
+  scriptUrl: '//at.alicdn.com/t/font_3184967_nhdn0ferz2.js',
 });
 
 export default ({ type, className, style = {} }) => {