Jelajahi Sumber

空调loading

anxiaoxia 2 tahun lalu
induk
melakukan
f44c193183

+ 2 - 1
config/proxy.ts

@@ -14,7 +14,8 @@ export default {
       target: 'http://10.100.28.79',
       changeOrigin: true,
       pathRewrite: {
-        '^/sgadmin': '/',
+        '^/sgadmin': '/sgadmin',
+        // '^/sgadmin': '/',
       },
     },
   },

+ 2 - 2
src/config/api.js

@@ -1,3 +1,3 @@
 export const BASE_PATH = '/api';
-export const projectId = 'Pj3301100002';//之江
-//export const projectId = 'Pj1101080259';
+// export const projectId = 'Pj3301100002';//之江
+export const projectId = 'Pj1101080259';

+ 60 - 24
src/pages/Equipment/components/deviceModal/airEq/index.jsx

@@ -1,10 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { message } from 'antd';
 import styles from './index.less';
 import commonStyles from '../common.less';
-import { equipImageMap } from '@/config/image.js';
+import { equipImageMap } from '@/config/sagacare_image.js';
 import AnSwitch from '../anSwitch';
-import { getFeedbackDocumentsHttp, changeAirHttp } from '@/services/ant-design-pro/equipment';
+import { getFeedbackDocumentsHttp, changeAirHttp } from '@/services/sagacare_service/equipment';
 
 export default ({ spaceId, projectId }) => {
   const {
@@ -19,9 +19,13 @@ export default ({ spaceId, projectId }) => {
     wind_down,
   } = equipImageMap;
   const hasAir = true;
-  const [isOpen, setIsOpen] = useState(true);
+  let isNowAirStatus = useRef('');
+  let firstLoading = useRef(true);
+  let [isOpen, setIsOpen] = useState(false);
+  let [isLoading, setIsLoading] = useState(false);
   const [imgSrc, setImgSrc] = useState(null);
   let timer = useRef(null);
+  let airLoadingTimer = useRef(null);
   const [spaceStatus, setStatusText] = useState('null');
   const airExpend = [
     {
@@ -59,30 +63,61 @@ export default ({ spaceId, projectId }) => {
   };
 
   function timerGetAirInfo(timeLong) {
-    clearInterval(timer.current);
-    timer.current = setInterval(() => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
       getAirInfo(); // 获取空调状态
     }, timeLong);
   }
 
   function changeSwitch(val) {
-    const itemIdSum = val ? 12 : 10; // 10关闭 12开启
-    clearInterval(timer.current);
-    changeAir(itemIdSum);
+    if (!isLoading) {
+      setIsLoading(true);
+      changeIsLoading(val);
+      const itemIdSum = val ? 12 : 10; // 10关闭 12开启¬
+      changeAir(itemIdSum);
+    }
   }
 
-  const getAirInfo = () => {
+  const changeIsLoading = (val) => {
+    let countTimer = 0;
+    airLoadingTimer.current = setInterval(() => {
+      if (countTimer >= 30 || isNowAirStatus === val) {
+        setIsOpen(val); // 开关
+        setIsLoading(false);
+        clearInterval(airLoadingTimer.current);
+      } else {
+        countTimer++;
+      }
+    }, 1000);
+  };
+
+  const getAirInfo = useCallback(() => {
     const paramsObj = {
       objectId: spaceId,
       projectId: projectId,
     };
-    getFeedbackDocumentsHttp(paramsObj).then((res) => {
-      const val = res.icon == 7 ? false : true;
-      setIsOpen(val); // 开关
-      setStatusText(res.spaceStatus); // 状态文案
-      statusImg(res.icon); // icon
-    });
-  };
+    getFeedbackDocumentsHttp(paramsObj)
+      .then((res) => {
+        const val = res.icon == 7 ? false : true;
+        if (firstLoading) {
+          isNowAirStatus = val;
+          setIsOpen(val); // 开关
+          setIsLoading(false);
+        } else {
+          isNowAirStatus = val;
+        }
+        firstLoading = false;
+        // setFirstLoading(false)
+        timerGetAirInfo(1000);
+        setStatusText(res.spaceStatus); // 状态文案
+        statusImg(res.icon); // icon
+      })
+      .catch(() => {
+        timerGetAirInfo(1000);
+        firstLoading = false;
+        // setIsLoading(false);
+      });
+  }, []);
 
   const changeAir = (itemId) => {
     const paramsObj = {
@@ -92,20 +127,20 @@ export default ({ spaceId, projectId }) => {
     };
     changeAirHttp(paramsObj).then((res) => {
       if (res.result == 'success') {
-        message.success('指令下发成功');
-        getAirInfo();
-        timerGetAirInfo(3000);
+        // message.success('指令下发成功');
+        // getAirInfo();
+        // timerGetAirInfo(2000);
       } else {
-        message.error('操作失败,请重试');
+        // message.error('操作失败,请重试');
       }
     });
   };
 
   useEffect(() => {
     getAirInfo(); // 获取空调状态
-    timerGetAirInfo(3000);
+    timerGetAirInfo(2000);
     return () => {
-      clearInterval(timer.current);
+      clearTimeout(timer.current);
     };
   }, []);
 
@@ -162,7 +197,8 @@ export default ({ spaceId, projectId }) => {
             }}
             className={commonStyles.eqBtn}
           >
-            <AnSwitch isOpen={isOpen} />
+            <AnSwitch isOpen={isOpen} isAir={true} isLoading={isLoading} />
+            {/*<Switch loading isOpen />*/}
           </div>
         </div>
       </div>

+ 1 - 2
src/pages/Equipment/components/deviceModal/airEq/index.less

@@ -3,7 +3,7 @@
   margin-bottom: 15px;
   background: hsl(0, 0%, 100%);
   border-radius: 25px;
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.07), 0 4px 10px rgba(0, 0, 0, 0.05);
   .content {
     .env {
       position: relative;
@@ -89,7 +89,6 @@
       padding-left: 27px;
       color: rgba(196, 196, 196, 1);
       font-weight: 400;
-
       font-size: 14px;
       line-height: 20px;
       border-top: 1px solid rgba(196, 196, 196, 0.4);

+ 17 - 3
src/pages/Equipment/components/deviceModal/anSwitch/index.jsx

@@ -1,11 +1,25 @@
 import React, { useState, useEffect } from 'react';
+import { Spin } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+
+const antIcon = (
+  <LoadingOutlined
+    style={{
+      fontSize: 14,
+    }}
+    spin
+  />
+);
 import './index.less';
 
-export default ({ isOpen }) => {
+export default ({ isOpen, isAir, isLoading }) => {
   return (
     <div className="box">
-      <div className={`content ${isOpen ? null : 'closeBg'}`}>
-        <div className={`point  ${isOpen ? null : 'closePt'}`}></div>
+      {isAir && isLoading ? (
+        <Spin indicator={antIcon} className={`box-loading ${isOpen ? '' : 'box-close-loading'}`} />
+      ) : null}
+      <div className={`content ${isOpen ? '' : 'closeBg'}`}>
+        <div className={`point  ${isOpen ? '' : 'closePt'}`}></div>
       </div>
     </div>
   );

+ 18 - 2
src/pages/Equipment/components/deviceModal/anSwitch/index.less

@@ -1,9 +1,22 @@
 .box {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 54px;
   height: 30px;
+
+  .box-loading {
+    position: absolute;
+    top: 50%;
+    left: 60%;
+    z-index: 333;
+    transform: translateY(-50%);
+  }
+  .box-close-loading {
+    left: 14%;
+  }
+
   .content {
     position: relative;
     width: 48px;
@@ -12,21 +25,24 @@
     background: #ffe823;
     border-radius: 12px;
     transition: background-color 0.3s;
+
     &.closeBg {
       background: #c4c4c433;
       transition: background-color 0.3s;
     }
+
     .point {
       position: absolute;
       top: 0;
       width: 24px;
       height: 24px;
-      background: #ffffff;
+      background: #fff;
       border: 1px solid #c4c4c4;
       border-radius: 50%;
-      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.03);
+      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.03);
       transform: translate(90%, 0%);
       transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
+
       &.closePt {
         transform: translate(-10%, 0%);
       }