From 32d03bd9eec3f2414d3e66460ff0e1a276e75473 Mon Sep 17 00:00:00 2001
From: blak-kong <546598185@qq.com>
Date: Wed, 27 Mar 2024 14:25:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=A0=B7=E5=BC=8F=E5=86=B2=E7=AA=81?=
 =?UTF-8?q?=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/popup/popup-countdown.less     | 110 ++++++-------
 src/moduleIOT/pages/iotCarePlan/WL200.tsx     |  10 +-
 .../iotCarePlan/components/Echart/index.less  | 150 ++++++++----------
 .../iotCarePlan/components/Echart/index.tsx   |  64 ++++----
 src/pages/index/index.tsx                     |   9 +-
 5 files changed, 166 insertions(+), 177 deletions(-)

diff --git a/src/components/popup/popup-countdown.less b/src/components/popup/popup-countdown.less
index 5b33adf..624f3ee 100644
--- a/src/components/popup/popup-countdown.less
+++ b/src/components/popup/popup-countdown.less
@@ -15,65 +15,65 @@
     display: flex;
     justify-content: center;
   }
-}
-
-.countdown-popup-loading {
-  position: relative;
-}
 
-.countdown-popup-loading-time {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 50rpx;
-  height: 50rpx;
-  line-height: 50rpx;
-  margin: auto;
-  font-size: 54rpx;
-  text-align: center;
-  color: #ecf0f3;
-  font-weight: bold;
-}
+  .countdown-popup-loading {
+    position: relative;
+  }
 
-.ui-loading__bg {
-  position: relative;
-  width: 160rpx;
-  height: 160rpx;
-  border-radius: 50%;
-  background-color: #ecf0f3;
-  /* background-image: conic-gradient(#3CACFF 100%,#000 0%); */
-}
-.ui-loading__bg::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 140rpx;
-  height: 140rpx;
-  border-radius: 50%;
-  background-color: #fff;
-}
+  .countdown-popup-loading-time {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 50rpx;
+    height: 50rpx;
+    line-height: 50rpx;
+    margin: auto;
+    font-size: 54rpx;
+    text-align: center;
+    color: #ecf0f3;
+    font-weight: bold;
+  }
 
-.ui-loading {
-  position: absolute;
-  width: 160rpx;
-  height: 160rpx;
-  border-radius: 50%;
-  background: transparent;
-  box-sizing: border-box;
-  border: 10rpx solid #3cacff;
-  clip-path: polygon(0% 0%, 25% 0%, 50% 50%, 0% 25%);
-  animation: rotate 1s linear infinite;
-}
+  .ui-loading__bg {
+    position: relative;
+    width: 160rpx;
+    height: 160rpx;
+    border-radius: 50%;
+    background-color: #ecf0f3;
+    /* background-image: conic-gradient(#3CACFF 100%,#000 0%); */
+  }
+  .ui-loading__bg::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 140rpx;
+    height: 140rpx;
+    border-radius: 50%;
+    background-color: #fff;
+  }
 
-@keyframes rotate {
-  from {
-    transform: rotateZ(0deg);
+  .ui-loading {
+    position: absolute;
+    width: 160rpx;
+    height: 160rpx;
+    border-radius: 50%;
+    background: transparent;
+    box-sizing: border-box;
+    border: 10rpx solid #3cacff;
+    clip-path: polygon(0% 0%, 25% 0%, 50% 50%, 0% 25%);
+    animation: countdownRotate 1s linear infinite;
   }
-  to {
-    transform: rotateZ(360deg);
+
+  @keyframes countdownRotate {
+    from {
+      transform: rotateZ(0deg);
+    }
+    to {
+      transform: rotateZ(360deg);
+    }
   }
 }
diff --git a/src/moduleIOT/pages/iotCarePlan/WL200.tsx b/src/moduleIOT/pages/iotCarePlan/WL200.tsx
index e9f56c2..32cc37f 100644
--- a/src/moduleIOT/pages/iotCarePlan/WL200.tsx
+++ b/src/moduleIOT/pages/iotCarePlan/WL200.tsx
@@ -272,7 +272,12 @@ class IotCarePlanWL200 extends Component<any, any> {
         title: obj.name,
       });
 
+      Taro.showLoading({
+        title: "请求中...",
+        mask: true,
+      });
       await this.GetModeList(obj.id);
+      Taro.hideLoading();
 
       // 如果不存在设备模式值，则判断为首次进入，弹窗提示
       let isFirstTipShow = getStorageSync("first_instrument_" + obj.id);
@@ -1928,7 +1933,10 @@ class IotCarePlanWL200 extends Component<any, any> {
   goFaceReport = () => {
     // 跳转前置空定时器，防止重复提交
     if (currentTimeTimer) clearInterval(currentTimeTimer);
-    go("/recording/pages/face_report/face_report?id=" + this.state.currentDevice.id);
+    go(
+      "/recording/pages/face_report/face_report?id=" +
+        this.state.currentDevice.id
+    );
   };
 
   // 完成配对
diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less
index 8e475ac..2c746aa 100644
--- a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less
+++ b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less
@@ -1,4 +1,4 @@
-.box {
+.echart-component {
   width: 690rpx;
   height: 320rpx;
   margin: 28rpx auto 150rpx;
@@ -8,94 +8,84 @@
   box-sizing: border-box;
   position: relative;
 
-
-  // writing-mode: vertical-lr;
-  // text-orientation: upright;
-  // white-space: nowrap;
-  // font-size: 18px;
-  // font-weight: bold;
-  // background-color: #c2e5f3;
-  // color: #fff;
-  // width: 100%;
-}
-
-.fullscreen {
-  position: fixed;
-  top: 450rpx;
-  left: -450rpx;
-  right: 0;
-  bottom: 0;
-  width: 100vh;
-  height: 100vw;
-  z-index: 9999;
-  background-color: rgba(0, 0, 0, 0.5); /* 背景色 */
-  transform: rotate(90deg);
-  // animation: rotate 0s linear;
-}
-
-@keyframes rotate {
-  from {
-    width: 690rpx;
-    height: 320rpx;
-    transform: rotate(0deg);
-  }
-  to {
+  .fullscreen {
+    position: fixed;
+    top: 450rpx;
+    left: -450rpx;
+    right: 0;
+    bottom: 0;
     width: 100vh;
     height: 100vw;
-    transform: rotate(0deg);
+    z-index: 9999;
+    background-color: rgba(0, 0, 0, 0.5); /* 背景色 */
+    transform: rotate(90deg);
+    // animation: rotate 0s linear;
   }
-}
 
-.box_background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 690rpx;
-  height: 320rpx;
-  border-radius: 30rpx;
-  background-color: #fff;
-  .power {
-    margin: 34rpx 0 28rpx 28rpx;
-    font-family: PingFang-SC;
-    font-weight: 500;
-    font-size: 18rpx;
-    color: #cccccc;
+  @keyframes echartRotate {
+    from {
+      width: 690rpx;
+      height: 320rpx;
+      transform: rotate(0deg);
+    }
+    to {
+      width: 100vh;
+      height: 100vw;
+      transform: rotate(0deg);
+    }
   }
-  .full {
-    width: 24rpx;
-    height: 24rpx;
+
+  .box_background {
     position: absolute;
-    top: 32rpx;
-    right: 26rpx;
-    z-index: 2;
-  }
-  .line {
-    margin: 0 0 6rpx 35rpx;
-    font-family: PingFang-SC;
-    font-size: 14rpx;
-    color: #cccccc;
-    display: flex;
-    position: relative;
-    height: 18rpx;
-    .bottom_line {
-      // border-bottom: 1rpx #ccc dashed;
-      width: 550rpx;
-      margin-left: 20rpx;
+    top: 0;
+    left: 0;
+    width: 690rpx;
+    height: 320rpx;
+    border-radius: 30rpx;
+    background-color: #fff;
+    .power {
+      margin: 34rpx 0 28rpx 28rpx;
+      font-family: PingFang-SC;
+      font-weight: 500;
+      font-size: 18rpx;
+      color: #cccccc;
+    }
+    .full {
+      width: 24rpx;
+      height: 24rpx;
       position: absolute;
-      bottom: -6rpx;
-      right: 74rpx;
-      height: 4rpx;
-      color: #fff;
+      top: 32rpx;
+      right: 26rpx;
+      z-index: 2;
+    }
+    .line {
+      margin: 0 0 6rpx 35rpx;
+      font-family: PingFang-SC;
+      font-size: 14rpx;
+      color: #cccccc;
+      display: flex;
+      position: relative;
+      height: 18rpx;
+      .bottom_line {
+        // border-bottom: 1rpx #ccc dashed;
+        width: 550rpx;
+        margin-left: 20rpx;
+        position: absolute;
+        bottom: -6rpx;
+        right: 74rpx;
+        height: 4rpx;
+        color: #fff;
+      }
     }
-  }
 
-  .time {
-    position: absolute;
-    bottom: 22rpx;
-    right: 24rpx;
-    font-family: PingFang-SC;
-    font-size: 18rpx;
-    color: #cccccc;
+    .time {
+      position: absolute;
+      bottom: 22rpx;
+      right: 24rpx;
+      font-family: PingFang-SC;
+      font-size: 18rpx;
+      color: #cccccc;
+    }
   }
 }
 
diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx
index c535cc2..24a6c54 100644
--- a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx
+++ b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx
@@ -9,13 +9,11 @@ import echarts from "@/utils/echarts.min.js";
 import "./index.less";
 
 interface Props {
-  series: any,
-  full:any
+  series: any;
+  full: any;
 }
 
-
-
-function Index({ series ,full}: Props) {
+function Index({ series, full }: Props) {
   const echartsRef = useRef<EchartsHandle>(null);
   const [options, setOptions] = useState({
     animation: false,
@@ -145,40 +143,36 @@ function Index({ series ,full}: Props) {
         color: "#ff8410",
       },
     },
-    series: []
-  })
+    series: [],
+  });
 
   const level = [8, 7, 6, 5, 4, 3, 2];
-  const [newOptions, setNewOptions] = useState(options)
+  const [newOptions, setNewOptions] = useState(options);
 
   const updata = useCallback((res) => {
-    let option = JSON.parse(JSON.stringify(options))
-    option.series = JSON.parse(JSON.stringify(res))
+    let option = JSON.parse(JSON.stringify(options));
+    option.series = JSON.parse(JSON.stringify(res));
     // 更新图表数据
-    setNewOptions(option)
-  }, [])
+    setNewOptions(option);
+  }, []);
 
   const cancelFull = useCallback((res) => {
-    full()
-  }, [])
-
-
+    full();
+  }, []);
 
   useEffect(() => {
-    setOptions(newOptions)
+    setOptions(newOptions);
   }, [newOptions]);
 
-
   useEffect(() => {
-    updata(series)
-  }, [series])
-
+    updata(series);
+  }, [series]);
 
   return (
     <Block>
-      <View id='box' className='box'>
+      <View id="box" className="echart-component">
         <Echarts
-          force-use-old-canvas='false'
+          force-use-old-canvas="false"
           echarts={echarts}
           option={options}
           ref={echartsRef}
@@ -186,22 +180,26 @@ function Index({ series ,full}: Props) {
           // style自定义设置echarts宽高
           style={{ width: "630rpx", height: "260rpx", zIndex: 1 }}
         />
-        <View className='box_background'>
-          <Image className='full' src={require("@/img/full-scran.png")} onClick={cancelFull}></Image>
-          <View className='power'>实时能量</View>
+        <View className="box_background">
+          <Image
+            className="full"
+            src={require("@/img/full-scran.png")}
+            onClick={cancelFull}
+          ></Image>
+          <View className="power">实时能量</View>
           {level.map((item) => (
-            <View className='line' key={item}>
-              <View className='number'>{item}</View>
-              <View className='bottom_line'></View>
+            <View className="line" key={item}>
+              <View className="number">{item}</View>
+              <View className="bottom_line"></View>
             </View>
           ))}
-          <View className='line'>
-            <View className='number'>1</View>
+          <View className="line">
+            <View className="number">1</View>
           </View>
-          <View className='time'>时间</View>
+          <View className="time">时间</View>
         </View>
       </View>
-    </Block >
+    </Block>
   );
 }
 
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 58088f5..10496c3 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1132,7 +1132,7 @@ class Index extends Component<any, any> {
 
     return (
       <Block>
-        {/* <PageMeta pageOrientation="landscape"> */}
+        {/* <PageMeta pageOrientation="landscape"></PageMeta> */}
         <View catchMove>
           <PopupAlert
             isShow={isCommonError}
@@ -1457,13 +1457,6 @@ class Index extends Component<any, any> {
         <Popup show={show} className="custom-popup" overlay={false}>
           <View className="popBox">你已绑定所有设备</View>
         </Popup>
-        {/* </PageMeta>
-        <View
-          style="position:fixed;width:100vw;height:100vh"
-          onClick={this.goTest}
-        >
-          横屏了
-        </View> */}
       </Block>
     );
   }