anxiaoxia 3 years ago
parent
commit
54e9648fd3

+ 1 - 1
src/assets/css/antd-reset.less

@@ -6,7 +6,7 @@
       border-radius: 20px;
     }
     .ant-modal-confirm-body > .anticon {
-      display: none;
+      //display: none;
     }
     .ant-modal-confirm-body > .anticon + .ant-modal-confirm-title + .ant-modal-confirm-content {
       margin: 20px auto;

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

@@ -16,7 +16,7 @@
 @btn-padding-horizontal-lg: 30px;
 @btn-border-radius-base: 30px;
 @btn-text-shadow: none;
-@btn-default-hover-bg: rgba(196, 196, 196, 0.2);
+@btn-default-hover-bg: rgba(196, 196, 196);
 
 @table-bg: transparent;
 @table-header-bg: transparent;

+ 2 - 2
src/components/SearchInput/index.tsx

@@ -33,7 +33,7 @@ const SearchInput: React.FC<SearchInputProps> = ({ onSearch, mapList }) => {
         }
       });
       setMatchData(data);
-      console.log('search', data);
+      //console.log('search', data);
     } else {
       setMatchData([]);
     }
@@ -48,7 +48,7 @@ const SearchInput: React.FC<SearchInputProps> = ({ onSearch, mapList }) => {
   };
   const handelInputKeyDown = (e) => {
     // 如果点击回车的操作
-    console.log('keydown', matchData);
+    //console.log('keydown', matchData);
     if (e.code == 'Enter') {
       if (matchData.length == 1) {
         onSearch(matchData[0].text);

+ 11 - 6
src/components/map/index.tsx

@@ -19,7 +19,7 @@ const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render, mapList
   //   useEffect(() => {
   //     getMapListData(selFloorId);
   //   }, [selFloorId]);
-
+  console.log('map-shuxin');
   const [startPageX, setStartPageX] = useState<number>(0);
   const [startPageY, setStartPageY] = useState<number>(0);
 
@@ -28,6 +28,7 @@ const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render, mapList
   const [mscale, setMscale] = useState<number>(1);
   const [canMove, setCanMove] = useState<boolean>(false);
 
+  const [mapKey, setMapKey] = useState<number>(0);
   //   let mapWidth: number = 3000,
   //     mapHeight: number = 1200;
 
@@ -36,11 +37,11 @@ const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render, mapList
     //startPageY = event.pageY;
     setStartPageX(event.pageX);
     setStartPageY(event.pageY);
-    console.log('mouseDownEvent', startPageX, event.pageY);
+    //console.log('mouseDownEvent', startPageX, event.pageY);
     setCanMove(true);
   };
   const mouseUpEvent = (event: React.MouseEvent) => {
-    console.log('mouseUpEvent', event);
+    //console.log('mouseUpEvent', event);
     setCanMove(false);
   };
   const mouseMoveEvent = (event: React.MouseEvent) => {
@@ -49,7 +50,7 @@ const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render, mapList
       let nowPageY = event.pageY;
       setTranslateX(translateX + nowPageX - startPageX);
       setTranslateY(translateY + nowPageY - startPageY);
-      console.log('mouseMoveEvent-xx', translateX, nowPageX, startPageX);
+      //console.log('mouseMoveEvent-xx', translateX, nowPageX, startPageX);
       // console.log('mouseMoveEvent-yy', translateY, nowPageY, startPageY);
 
       setStartPageX(event.pageX);
@@ -64,14 +65,15 @@ const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render, mapList
   };
   const mapReduce = (event: React.MouseEvent) => {
     event.stopPropagation();
-    console.log('mapReduce', mscale);
+    //console.log('mapReduce', mscale);
     if (mscale > 0.3) {
       setMscale(mscale - 0.1);
     }
   };
 
+  //实现搜索 搜索时 出现结果
   useEffect(() => {
-    console.log('searchText', searchText);
+    //console.log('searchText', searchText);
     if (searchText && searchText.text) {
       let left: any = 0,
         top: any = 0;
@@ -86,6 +88,9 @@ const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render, mapList
       setTranslateY(top);
     }
   }, [searchText]);
+  useEffect(() => {
+    debugger;
+  }, [mapList]);
 
   //   useEffect(() => {// todo 要不要用呢
   //     document.querySelector('#root').addEventListener(

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

@@ -92,18 +92,18 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
     //console.log('select-onChange', val);
     //debugger;
     setCurrentFloor(val);
-    console.log('changeFloorId', changeFloorId);
+    //console.log('changeFloorId', changeFloorId);
     changeFloorId && changeFloorId(val);
   }, []);
 
   //当前切换导航条时
   const itemClick = (item: navigatorItem) => {
-    console.log('itemclick', item);
+    //console.log('itemclick', item);
     //debugger;
     navigatorChange && navigatorChange(item);
   };
 
-  console.log('top渲染');
+  //console.log('top渲染');
 
   return (
     <div className={styles.topnavigator}>

+ 1 - 1
src/hooks/useMapList.ts

@@ -6,7 +6,7 @@ let mapListData: any = [];
 function useMapList(selFloorId: string) {
   const [mapList, setMapList] = useState<API.MapInfo[]>([]);
 
-  console.log(mapListData, 'mapListData');
+  //console.log(mapListData, 'mapListData');
 
   //当selFloorId 改变时调用
   useEffect(() => {

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

@@ -22,10 +22,11 @@ const TopNavRight: React.FC<topNavRightProps> = ({ selNavObj, navigatorList }) =
   const menuClick = (key) => {
     console.log('key', key);
   };
+  const { confirm } = Modal;
   const showModal = () => {
     console.log('showModal');
     // setModalvisible(true);
-    Modal.confirm({
+    confirm({
       title: '',
       icon: <ExclamationCircleOutlined />,
       content: '确认全部关闭吗?',

+ 146 - 65
src/pages/Equipment/index.tsx

@@ -10,9 +10,10 @@ import DeviceModal from './components/deviceModal';
 
 import styles from './index.less';
 import mapstyles from '@/assets/css/map.less';
-import { Spin } from 'antd';
+import { Spin, Modal, message } from 'antd';
 import moment from 'moment';
 
+import { ExclamationCircleOutlined } from '@ant-design/icons';
 import { equipImageMap } from '@/config/image.js';
 import Icon from '@/tenants-ui/Icon';
 import type { navigatorItem } from '@/pages/Environment/index';
@@ -21,6 +22,7 @@ import {
   queryEquipStatistics,
   queryDeviceTimeManage,
 } from '@/services/ant-design-pro/environment';
+import { getFeedbackDocumentsHttp, changeAirHttp } from '@/services/ant-design-pro/equipment';
 
 //设备状态
 type equipStatus = {
@@ -93,7 +95,6 @@ const Environment: React.FC = () => {
   const showModalClick = (item) => {
     console.log('showChart');
     setShowModal(true);
-
     setShowSpace(item);
   };
 
@@ -122,10 +123,63 @@ const Environment: React.FC = () => {
       return 'rgba(196, 196, 196, 0.6)';
     }
   };
+  const { confirm } = Modal;
+  //空调的调节      0是关闭 1 是开启  2 是部分开启
+  //这是存在疑惑 部分开启怎么办
+  const changeAir = (sitem, index) => {
+    const itemId = sitem.airConditioner === 0 ? 12 : 10; // 10关闭 12开启
+    const paramsObj = {
+      objectId: sitem.id, // 空间id
+      valueType: 1, // 固定为1
+      itemId: itemId,
+    };
+    changeAirHttp(paramsObj).then((res) => {
+      if (res.result == 'success') {
+        message.success('指令下发成功');
+        //这是没有部分开启一说吧
+        debugger;
+        // sitem.airConditioner = res.isClose ? 0 : 1; //改变某空间空调的状态
+        //mapCombineList[index]['airConditioner'] = res.isClose ? 0 : 1;
+        var mapCopy = JSON.parse(JSON.stringify(mapCombineList));
+        mapCopy[index]['airConditioner'] = res.isClose ? 0 : 1;
+        setMapCombineList(mapCopy);
+      } else {
+        message.error('操作失败,请重试');
+      }
+    });
+  };
+  //单个空间的点击事情
+  const spaceControl = (item, index: number) => {
+    if (selNav.id == 'all' || !item.roomFuncType) return;
+    var status = item[selNav.id] === 0 ? '打开' : '关闭';
+    confirm({
+      title: '确认',
+      icon: <ExclamationCircleOutlined />,
+      content: `确认${status}该${selNav.name}吗?`,
+      okText: '确认',
+      cancelText: '取消',
+      onOk() {
+        //如果是空调
+        if (selNav.id == 'airConditioner') {
+          changeAir(item, index);
+        }
+        if (selNav.id == 'light') {
+        }
+        if (selNav.id == 'curtain') {
+        }
+      },
+      onCancel() {
+        //console.log('Cancel');
+      },
+    });
+  };
   //获取地图 mapList
   useEffect(() => {
     if (selFloorId) {
-      getMapList({ floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454' }).then((res) => {
+      getMapList({
+        //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
+        floorId: selFloorId,
+      }).then((res) => {
         //debugger;
         var data: API.MapInfo[] = (res.data || {}).spaceList || [];
         setMapList(data);
@@ -137,7 +191,8 @@ const Environment: React.FC = () => {
     if (selFloorId) {
       setLoading(true);
       queryEquipStatistics({
-        floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
+        //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
+        floorId: selFloorId,
         projectId: 'Pj1101080259',
       })
         .then((res) => {
@@ -174,8 +229,8 @@ const Environment: React.FC = () => {
     if (selFloorId) {
       setLoading(true);
       queryDeviceTimeManage({
-        //floorId: selFloorId,
-        floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
+        floorId: selFloorId,
+        //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
         date: moment().format('YYYYMMDD'),
       })
         .then(function (res) {
@@ -204,8 +259,12 @@ const Environment: React.FC = () => {
 
       combineList.push(combine);
     });
+    //debugger;
     setMapCombineList(combineList);
+    debugger;
   }, [equipMapList, mapList, timeMapList]);
+  let firtTime: number = 0;
+  let lastTime: number = 0;
   return (
     <>
       <PageHeader
@@ -255,69 +314,91 @@ const Environment: React.FC = () => {
         )}
       </div>
       <Spin spinning={loading}>
-        <Map
-          searchText={searchText}
-          mapList={mapCombineList}
-          type={'equipment'}
-          render={(item, index) => {
-            return (
-              <div
-                key={index + 'house'}
-                className={mapstyles.house}
-                style={{
-                  left: item.left,
-                  top: item.top,
-                  width: item.width,
-                  height: item.height,
-                  background: item.roomFuncType
-                    ? selNav.id == 'all'
-                      ? 'rgba(196, 196, 196, 0.2)'
-                      : getColorOpacity(item[selNav.id])
-                    : 'repeating-linear-gradient(45deg, rgb(226 226 226), #ffffff 8px)',
-                }}
-              >
-                {selNav.id == 'all' && (
-                  <div className={mapstyles.allDevice}>
-                    {/* 所有设备的图标列表 */}
-                    {(item.equipStatusList || []).map((ditem: equipStatus, dindex: number) => {
-                      return (
-                        <div
-                          key={dindex + 'device'}
-                          className={mapstyles.icon}
-                          style={{
-                            backgroundColor: getColorOpacity(ditem.status, ditem.equipType),
-                          }}
-                        >
-                          <Icon
-                            className=""
-                            type={ditem.equipType}
-                            style={{ color: '#ffffff', fontWeight: 'bold' }}
-                          ></Icon>
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
+        {mapCombineList.length > 0 && (
+          <Map
+            searchText={searchText}
+            mapList={mapCombineList}
+            type={'equipment'}
+            render={(item, index) => {
+              return (
                 <div
-                  className={mapstyles.showModal}
-                  onClick={() => {
-                    showModalClick(item);
+                  key={index + item.id}
+                  className={mapstyles.house}
+                  style={{
+                    left: item.left,
+                    top: item.top,
+                    width: item.width,
+                    height: item.height,
+                    background: item.roomFuncType
+                      ? selNav.id == 'all'
+                        ? 'rgba(196, 196, 196, 0.2)'
+                        : getColorOpacity(item[selNav.id])
+                      : 'repeating-linear-gradient(45deg, rgb(226 226 226), #ffffff 8px)',
+                  }}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    if (lastTime - firtTime < 300) {
+                      spaceControl(item, index);
+                    }
+                  }}
+                  onMouseDown={(event) => {
+                    console.log(1);
+                    //event.stopPropagation();
+                    firtTime = new Date().getTime();
+                  }}
+                  onMouseUp={(event) => {
+                    console.log(2);
+                    //event.stopPropagation();
+                    lastTime = new Date().getTime();
                   }}
                 >
-                  <Icon className="" type="hover"></Icon>
-                </div>
-                <div className={mapstyles.content}>
-                  <Icon
-                    className=""
-                    type={getSpaceFunc(item.roomFuncType)}
-                    style={{ fontSize: 20 }}
-                  ></Icon>
-                  <div className={mapstyles.name}>{item.localName}</div>
+                  {selNav.id == 'all' && (
+                    <div className={mapstyles.allDevice}>
+                      {/* 所有设备的图标列表 */}
+                      {(item.equipStatusList || []).map((ditem: equipStatus, dindex: number) => {
+                        return (
+                          <div
+                            key={dindex + 'device'}
+                            className={mapstyles.icon}
+                            style={{
+                              backgroundColor: getColorOpacity(ditem.status, ditem.equipType),
+                            }}
+                          >
+                            <Icon
+                              className=""
+                              type={ditem.equipType}
+                              style={{ color: '#ffffff', fontWeight: 'bold' }}
+                            ></Icon>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                  {item.roomFuncType && (
+                    <div
+                      className={mapstyles.showModal}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        showModalClick(item);
+                      }}
+                    >
+                      <Icon className="" type="hover"></Icon>
+                    </div>
+                  )}
+
+                  <div className={mapstyles.content}>
+                    <Icon
+                      className=""
+                      type={getSpaceFunc(item.roomFuncType)}
+                      style={{ fontSize: 20 }}
+                    ></Icon>
+                    <div className={mapstyles.name}>{item.localName}</div>
+                  </div>
                 </div>
-              </div>
-            );
-          }}
-        ></Map>
+              );
+            }}
+          ></Map>
+        )}
       </Spin>
       {showModal && (
         <DeviceModal