From f97446f3ac63e3381f87df01e42611ecbffc586e Mon Sep 17 00:00:00 2001
From: sunmeng <1162067978@qq.com>
Date: Mon, 28 Oct 2024 16:02:51 +0800
Subject: [PATCH] 1

---
 src/views/page/largeScreen.vue | 638 ++++++++++++---------------------
 1 file changed, 232 insertions(+), 406 deletions(-)

diff --git a/src/views/page/largeScreen.vue b/src/views/page/largeScreen.vue
index 3c76ad4..b14a44d 100644
--- a/src/views/page/largeScreen.vue
+++ b/src/views/page/largeScreen.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <div class="park" v-if="limitUserId == 2" @click="handlerOther">{{other_show ? '后退':'园区简介'}}</div>
+    <div class="park" v-if="limitUserId == 2" @click="handlerOther">{{ other_show ? '后退' : '园区简介' }}</div>
     <div class="other" v-show="other_show"></div>
     <div class="kuang">
       <div class="title">温室智慧云数据统计</div>
@@ -44,17 +44,9 @@
           <div class="weather">
             <div>
               <marquee behavior="" direction="" scrollamount="3">
-                <div
-                  class="item"
-                  v-for="(item, index) in weatherDataList"
-                  :key="index"
-                >
-                  <img
-                    :src="
-                      require(`../../assets/image/real-time-${item.formula}.png`)
-                    "
-                    alt=""
-                  />
+                <div class="item" v-for="(item, index) in weatherDataList" :key="index">
+                  <img :src="require(`../../assets/image/real-time-${item.formula}.png`)
+                    " alt="" />
                   <span>{{ item.environmentDataId }} : </span>
                   <span>{{
                     item.environmentData + getTypeList(item.formula)
@@ -70,11 +62,7 @@
             <div class="e_title">温室环境数据</div>
             <div class="detail">
               <!-- <div class="title_child">一号温室</div> -->
-              <vue-seamless
-                class="e_content"
-                :data="list"
-                :class-option="defaultOption"
-              >
+              <vue-seamless class="e_content" :data="list" :class-option="defaultOption">
                 <div class="item" v-for="(el, index) in list" :key="index">
                   <!-- <img :src="el.formula" alt=""> -->
                   <img :src="el.img" alt="" />
@@ -98,21 +86,14 @@
 
           <div class="thisWeekTemperature">
             <div class="e_title">本周温度统计</div>
-            <div
-              class="thisWeekTemperature_echart"
-              id="thisWeekTemperature_echart"
-            ></div>
+            <div class="thisWeekTemperature_echart" id="thisWeekTemperature_echart"></div>
           </div>
         </div>
         <div class="left" v-show="limitUserId == 5" style="height: calc(100% - 0.9rem);">
           <div class="environmentData" style="height: 100%;overflow: hidden;">
             <div class="e_title">温室环境数据</div>
             <div class="detail" style="height: 100%;">
-              <vue-seamless
-                class="e_content e_content1"
-                :data="list"
-                :class-option="defaultOption"
-              >
+              <vue-seamless class="e_content e_content1" :data="list" :class-option="defaultOption">
                 <div class="item" v-for="(el, index) in list" :key="index">
                   <img :src="el.img" alt="" />
                   <div class="item_child">
@@ -130,156 +111,49 @@
               <!-- 丽水 -->
               <div class="drag_box" ref="drag_box" v-show="limitUserId == 1">
                 <img class="drag_img" src="../../assets/img/map.png" alt="" />
-                <img
-                  class="axis_1"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_1"
-                />
-                <img
-                  class="axis_2"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_1"
-                />
-                <img
-                  class="axis_3"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_1"
-                />
-                <img
-                  class="axis_4"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_1"
-                />
-                <img
-                  class="axis_5"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_1"
-                />
-                <img
-                  class="axis_6"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_1"
-                />
-                <img
-                  class="axis_7"
-                  src="../../assets/img/axis2.png"
-                  alt=""
-                  @click="handlerAxis_1"
-                />
+                <img class="axis_1" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
+                <img class="axis_2" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
+                <img class="axis_3" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
+                <img class="axis_4" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
+                <img class="axis_5" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
+                <img class="axis_6" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
+                <img class="axis_7" src="../../assets/img/axis2.png" alt="" @click="handlerAxis_1" />
               </div>
               <!-- 东北 -->
               <div class="drag_box1" ref="drag_box1" v-show="limitUserId == 2">
                 <img class="drag_img" src="../../assets/img/map1.png" alt="" />
-                <img
-                  class="axis_init"
-                  :class="'axis_' + (index + 8)"
-                  src="../../assets/img/axis1.png"
-                  :style="'left:' + (44.5 + index * 4.1) + '%'"
-                  alt=""
-                  @click="handlerAxis_2"
-                  v-for="(i, index) in 10"
-                  :key="index + '_1'"
-                />
+                <img class="axis_init" :class="'axis_' + (index + 8)" src="../../assets/img/axis1.png"
+                  :style="'left:' + (44.5 + index * 4.1) + '%'" alt="" @click="handlerAxis_2" v-for="(i, index) in 10"
+                  :key="index + '_1'" />
 
-                <img
-                  class="axis_init1"
-                  :class="'axis_' + (index1 + 17)"
-                  src="../../assets/img/axis1.png"
-                  :style="
-                    'top:' +
-                    (22 + index1 * 0.105) +
-                    '%' +
-                    ';' +
-                    'left:' +
-                    (8.25 + index1 * 3.3) +
-                    '%' +
-                    ';'
-                  "
-                  alt=""
-                  @click="handlerAxis_2"
-                  v-for="(i, index1) in 24"
-                  :key="index1 + '_2'"
-                />
+                <img class="axis_init1" :class="'axis_' + (index1 + 17)" src="../../assets/img/axis1.png" :style="'top:' +
+                  (22 + index1 * 0.105) +
+                  '%' +
+                  ';' +
+                  'left:' +
+                  (8.25 + index1 * 3.3) +
+                  '%' +
+                  ';'
+                  " alt="" @click="handlerAxis_2" v-for="(i, index1) in 24" :key="index1 + '_2'" />
               </div>
               <!-- 石门 -->
               <div class="drag_box5" ref="drag_box5" v-show="limitUserId == 5">
                 <img class="drag_img" src="../../assets/img/map2.png" alt="" />
-                <img
-                  class="axis_shimen"
-                  src="../../assets/img/axis2.png"
-                  alt=""
-                  @click="handlerAxis_5"
-                />
-                <img
-                  class="axis_shimen1"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_5"
-                />
-                <img
-                  class="axis_shimen2"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_5"
-                />
-                <img
-                  class="axis_shimen3"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_5"
-                />
-                <img
-                  class="axis_shimen4"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_5"
-                />
+                <img class="axis_shimen" src="../../assets/img/axis2.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen1" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen2" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen3" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen4" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
               </div>
               <!-- 大冶鑫 -->
               <div class="drag_box7" ref="drag_box7" v-show="limitUserId == 7">
                 <img class="drag_img" src="../../assets/img/map3.jpg" alt="" />
-                <img
-                  class="axis_shimen"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_5"
-                />
-                <img
-                  class="axis_shimen1"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_5"
-                />
-                <img
-                  class="axis_shimen2"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_5"
-                />
-                <img
-                  class="axis_shimen3"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_5"
-                />
-                <img
-                  class="axis_shimen4"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_5"
-                />
-                <img
-                  class="axis_shimen5"
-                  src="../../assets/img/axis1.png"
-                  alt=""
-                  @click="handlerAxis_5"
-                />
+                <img class="axis_shimen" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen1" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen2" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen3" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen4" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen5" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
               </div>
             </div>
           </div>
@@ -290,17 +164,9 @@
           <div class="liveVideo_content">
             <div class="swiper-container mySwiper_video">
               <div class="swiper-wrapper">
-                <div
-                  class="swiper-slide swiper-slide_video"
-                  v-for="(item, index) in get_sel_eqbyid_list"
-                  :key="index"
-                >
+                <div class="swiper-slide swiper-slide_video" v-for="(item, index) in get_sel_eqbyid_list" :key="index">
                   <div class="monitor" :id="'monitor' + item.number">
-                    <div
-                      ref="videoPlayer"
-                      class="video-js"
-                      :id="'video-js' + item.number"
-                    ></div>
+                    <div ref="videoPlayer" class="video-js" :id="'video-js' + item.number"></div>
                   </div>
                   <div class="c_bottom">{{ item.deviceTypeName }}</div>
                 </div>
@@ -319,22 +185,13 @@
           <div class="device_detail">
             <div class="swiper_timer">
               <div>
-                <div
-                  class="swiper-container middle_disasterWarningAnalysis"
-                  :style="styleContainer"
-                >
+                <div class="swiper-container middle_disasterWarningAnalysis" :style="styleContainer">
                   <div class="swiper-wrapper">
-                    <div
-                      :class="
-                        (limitUserId == 1 ? current : current1) == index
-                          ? 'swiper-slide swiper-slide2'
-                          : 'swiper-slide swiper-slide1'
-                      "
-                      v-for="(item, index) in dataList"
-                      :key="index"
-                      :style="styleItem"
-                      @click="getCurrent(index, item)"
-                    >
+                    <div :class="(limitUserId == 1 ? current : current1) == index
+                        ? 'swiper-slide swiper-slide2'
+                        : 'swiper-slide swiper-slide1'
+                      " v-for="(item, index) in dataList" :key="index" :style="styleItem"
+                      @click="getCurrent(index, item)">
                       {{
                         item.greenhouseName
                       }}
@@ -373,47 +230,32 @@
               <div class="i_content">
                 <div class="i_content_item">
                   <span>1#风机</span>
-                  <span
-                    :style="fanStatus.status[0] == 1 ? '' : 'color:#86C2FF;'"
-                    >{{ fanStatus.status[0] == 1 ? "打开" : "关闭" }}</span
-                  >
+                  <span :style="fanStatus.status[0] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[0] == 1 ? "打开" :
+                    "关闭" }}</span>
                   <span class="line"></span>
                   <span>2#风机</span>
-                  <span
-                    :style="fanStatus.status[1] == 1 ? '' : 'color:#86C2FF;'"
-                    >{{ fanStatus.status[1] == 1 ? "打开" : "关闭" }}</span
-                  >
+                  <span :style="fanStatus.status[1] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[1] == 1 ? "打开" :
+                    "关闭" }}</span>
                 </div>
                 <div class="line1"></div>
                 <div class="i_content_item">
                   <span>3#风机</span>
-                  <span
-                    :style="fanStatus.status[2] == 1 ? '' : 'color:#86C2FF;'"
-                    >{{ fanStatus.status[2] == 1 ? "打开" : "关闭" }}</span
-                  >
+                  <span :style="fanStatus.status[2] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[2] == 1 ? "打开" :
+                    "关闭" }}</span>
                   <span class="line"></span>
                   <span>4#风机</span>
-                  <span
-                    :style="fanStatus.status[3] == 1 ? '' : 'color:#86C2FF;'"
-                    >{{ fanStatus.status[3] == 1 ? "打开" : "关闭" }}</span
-                  >
+                  <span :style="fanStatus.status[3] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[3] == 1 ? "打开" :
+                    "关闭" }}</span>
                 </div>
                 <div class="line1"></div>
                 <div class="i_content_item" style="width: 50%">
                   <span>5#风机</span>
-                  <span
-                    :style="fanStatus.status[4] == 1 ? '' : 'color:#86C2FF;'"
-                    >{{ fanStatus.status[4] == 1 ? "打开" : "关闭" }}</span
-                  >
+                  <span :style="fanStatus.status[4] == 1 ? '' : 'color:#86C2FF;'">{{ fanStatus.status[4] == 1 ? "打开" :
+                    "关闭" }}</span>
                   <span class="line"></span>
                 </div>
               </div>
-              <div
-                class="i_title_"
-                style="margin-top: 0.2rem"
-                v-for="(item, index) in statusList"
-                :key="index"
-              >
+              <div class="i_title_" style="margin-top: 0.2rem" v-for="(item, index) in statusList" :key="index">
                 <template v-if="item.open != 0">
                   <img src="../../assets/img/i_title_img.png" alt="" />
                   <span>{{ item.name }}</span>
@@ -446,9 +288,7 @@
                     item.controlState == 1 ? "自动控制" : "手机控制"
                   }}</span>
                   <span class="line"></span>
-                  <i class="progress" v-if="Number(item.progress) == ''"
-                    >进度{{ item.progress }}%</i
-                  >
+                  <i class="progress" v-if="Number(item.progress) == ''">进度{{ item.progress }}%</i>
                   <span>菜单</span>
                 </div>
                 <div class="i_title" v-else>
@@ -473,9 +313,7 @@
                     item.controlState == 1 ? "自动控制" : "手机控制"
                   }}</span>
                   <span class="line"></span>
-                  <i class="progress" v-if="Number(item.progress) == ''"
-                    >进度{{ item.progress }}%</i
-                  >
+                  <i class="progress" v-if="Number(item.progress) == ''">进度{{ item.progress }}%</i>
                   <span>菜单</span>
                 </div>
                 <div class="i_title" v-else>
@@ -488,8 +326,8 @@
                 </div>
               </div>
             </div>
-             <!-- 大冶鑫 -->
-             <div class="content_item" v-if="limitUserId == 7">
+            <!-- 大冶鑫 -->
+            <div class="content_item" v-if="limitUserId == 7">
               <div v-for="(item, index) in fiveControlList" :key="index" style="margin-bottom: 0.15rem">
                 <div class="i_title" v-if="item.controlState != 0">
                   <img src="../../assets/img/i_title_img.png" alt="" />
@@ -499,9 +337,7 @@
                     item.controlState == 1 ? "自动控制" : "手机控制"
                   }}</span>
                   <span class="line"></span>
-                  <i class="progress" v-if="Number(item.progress) == ''"
-                    >进度{{ item.progress }}%</i
-                  >
+                  <i class="progress" v-if="Number(item.progress) == ''">进度{{ item.progress }}%</i>
                   <span>菜单</span>
                 </div>
                 <div class="i_title" v-else>
@@ -553,7 +389,7 @@ export default {
   },
   data() {
     return {
-      other_show:false,
+      other_show: false,
       list: [],
       device_item_current: 0,
       menu_current: false,
@@ -1019,7 +855,7 @@ export default {
       ],
     };
   },
-  beforeMount(){
+  beforeMount() {
     this.login();
   },
   mounted() {
@@ -1035,10 +871,17 @@ export default {
     clearInterval(this.timer_) && this.timer_;
   },
   methods: {
-    handlerOther(){
+    handlerOther() {
       this.other_show = !this.other_show
     },
-
+    //排序
+    compare(property) {
+      return function (a, b) {
+        let value1 = a[property];
+        let value2 = b[property];
+        return value1 - value2;
+      };
+    },
     // 根据用户id查询对应的设备大数据信息
     dataInit(userid, limitUserId) {
       this.api.Bigdata_getAllControl(userid).then((res) => {
@@ -1063,12 +906,22 @@ export default {
             // this.get_readControl_getState(el.deviceId)
           });
           if (limitUserId == 1) {
+            // 获取控制器第一个Id
+            const list = []
+            this.$store.state.equipmentList.forEach((el, index) => {
+              if (el.deviceName == 10) {
+                list.push(el)
+              }
+            })
+            list.sort(this.compare('equipmentStatu'))
+            console.log(list, 123);
+
             // 丽水
-            this.get_weather_echart_data(2023042214250027);
-            this.get_thisWeekTemperature_echart_data(2023042214250027);
-            this.get_environmentData(2023042214250027);
-            this.get_readControl_getState(2023042214250027);
-            this.getWeatherData(2023042214250027);
+            this.get_weather_echart_data(list[0].deviceId);
+            this.get_thisWeekTemperature_echart_data(list[0].deviceId);
+            this.get_environmentData(list[0].deviceId);
+            this.get_readControl_getState(list[0].deviceId);
+            this.getWeatherData(list[0].deviceId);
           } else if (limitUserId == 2) {
             // 东北
             this.get_weather_echart_data(2023072517320001);
@@ -1076,14 +929,14 @@ export default {
             this.get_environmentData(2023112911050004);
             this.get_readControl_getState(2023112911050004);
             this.getWeatherData(2023112911050004);
-          }else if (limitUserId == 5) {
+          } else if (limitUserId == 5) {
             // 石门
             // this.get_weather_echart_data(2023042214250070);
             // this.get_thisWeekTemperature_echart_data(2023042214250070);
             this.get_environmentData(2023042214250070);
             this.get_readControl_getState(2023042214250070);
             // this.getWeatherData(2023042214250070);
-          }else if (limitUserId == 7) {
+          } else if (limitUserId == 7) {
             // 大冶鑫
             this.get_weather_echart_data(2023120613270120);
             this.get_thisWeekTemperature_echart_data(2023120613270120);
@@ -1196,8 +1049,8 @@ export default {
         res.data.data.forEach((item, index) => {
           if (
             item.cameraSerialNumber != null &&
-            (item.deviceId == 2023042214250027||
-            item.deviceId == 2023120613270115)
+            (item.deviceId == 2023042214250027 ||
+              item.deviceId == 2023120613270115)
           ) {
             this.get_sel_eqbyid_list.push({ ...item, number: index });
 
@@ -1347,14 +1200,14 @@ export default {
           // id == 1 丽水;
           // id == 5 石门;
           // id == 5 大冶鑫;
-          this.limitUserId = (res.data.data.filter(el=>el.id == 2 || el.id == 1 || el.id == 5 ||el.id == 7))[0].id;
+          this.limitUserId = (res.data.data.filter(el => el.id == 2 || el.id == 1 || el.id == 5 || el.id == 7))[0].id;
           if (this.limitUserId == 1) {
             this.drag_boxHandler();
             this.dataInit(userId, this.limitUserId);
           } else if (this.limitUserId == 2) {
             this.drag_boxHandler1();
             this.dataInit(userId, this.limitUserId);
-          }else if (this.limitUserId == 5) {
+          } else if (this.limitUserId == 5) {
             this.drag_boxHandler5();
             this.dataInit(userId, this.limitUserId);
           } else if (this.limitUserId == 7) {
@@ -1439,16 +1292,16 @@ export default {
       this.current1 = index;
       // console.log(item,'00000000000000');
       // this.get_readControl_getState(item.deviceId);
-      if(this.limitUserId == 1){
+      if (this.limitUserId == 1) {
         this.get_readControl_getState(2023042214250027);
-      }else if(this.limitUserId == 2){
+      } else if (this.limitUserId == 2) {
         this.get_readControl_getState(2023112911050004);
-      }else if(this.limitUserId == 5){
+      } else if (this.limitUserId == 5) {
         this.get_readControl_getState(2023042214250070);
-      }else if(this.limitUserId == 7){
+      } else if (this.limitUserId == 7) {
         this.get_readControl_getState(2023120613270120);
       }
-      
+
     },
 
     drag_boxHandler() {
@@ -1706,27 +1559,28 @@ export default {
 <style lang="scss">
 .environmentData {
   .e_content {
-    
-    > div {
-      width: 100% !important;
-      
 
-      > div {
+    >div {
+      width: 100% !important;
+
+
+      >div {
         width: 100% !important;
-        
+
         display: flex;
         flex-wrap: wrap;
       }
     }
   }
 
-  .e_content1{
+  .e_content1 {
     height: 100%;
-    > div {
+
+    >div {
       width: 100% !important;
       height: 100%;
 
-      > div {
+      >div {
         width: 100% !important;
         height: 100%;
         display: flex;
@@ -1746,7 +1600,7 @@ export default {
   padding-bottom: 0.1rem;
   position: relative;
 
-  .park{
+  .park {
     position: absolute;
     top: .2rem;
     right: .65rem;
@@ -1758,7 +1612,7 @@ export default {
     color: #7ABAFF;
   }
 
-  .other{
+  .other {
     width: 100%;
     height: 100%;
     position: fixed;
@@ -1792,12 +1646,10 @@ export default {
       opacity: 0.9;
       text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
 
-      background: linear-gradient(
-        to bottom,
-        #ffffff 45%,
-        #e9f8ff 90%,
-        #77baff 100%
-      );
+      background: linear-gradient(to bottom,
+          #ffffff 45%,
+          #e9f8ff 90%,
+          #77baff 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-align: center;
@@ -1812,7 +1664,7 @@ export default {
       display: flex;
       align-items: center;
 
-      > span {
+      >span {
         width: 0.8rem;
         height: 0.3rem;
         background: rgba(14, 91, 165, 0.1);
@@ -1828,12 +1680,10 @@ export default {
       }
 
       .act {
-        background: linear-gradient(
-          -35deg,
-          #56a8d5 0%,
-          rgba(0, 55, 110, 0.75) 50%,
-          #56a8d5 100%
-        );
+        background: linear-gradient(-35deg,
+            #56a8d5 0%,
+            rgba(0, 55, 110, 0.75) 50%,
+            #56a8d5 100%);
         border: 1px solid rgba(122, 225, 255, 0.75);
         font-size: 0.18rem;
         font-family: MicrosoftYaHei;
@@ -1854,7 +1704,7 @@ export default {
       align-items: center;
       justify-content: center;
 
-      > img {
+      >img {
         width: 0.2rem;
         height: 0.2rem;
       }
@@ -1870,26 +1720,26 @@ export default {
       align-items: center;
       justify-content: space-between;
 
-      > img {
+      >img {
         width: 0.28rem;
         height: 0.3rem;
       }
 
-      > span:nth-child(2) {
+      >span:nth-child(2) {
         font-size: 0.24rem;
         font-family: PingFang-SC-Bold;
         font-weight: bold;
         color: #7abaff;
       }
 
-      > span:nth-child(4) {
+      >span:nth-child(4) {
         font-size: 0.2rem;
         font-family: PingFang-SC-Bold;
         font-weight: bold;
         color: #7abaff;
       }
 
-      > span:nth-child(6) {
+      >span:nth-child(6) {
         font-size: 0.3rem;
         font-family: PingFang-SC-Bold;
         font-weight: bold;
@@ -1920,12 +1770,12 @@ export default {
         align-items: center;
         justify-content: center;
 
-        > img {
+        >img {
           width: 1.08rem;
           height: 0.91rem;
         }
 
-        > span {
+        >span {
           font-size: 0.2rem;
           font-family: AlibabaPuHuiTiB;
           font-weight: bold;
@@ -1939,12 +1789,12 @@ export default {
         align-items: center;
         justify-content: center;
 
-        > img {
+        >img {
           width: 1.08rem;
           height: 0.91rem;
         }
 
-        > span {
+        >span {
           font-size: 0.2rem;
           font-family: AlibabaPuHuiTiB;
           font-weight: bold;
@@ -1974,8 +1824,7 @@ export default {
         .weatherStation {
           width: 4rem;
           height: 0.43rem;
-          background: url("../../assets/img/weatherStation.png") center
-            no-repeat;
+          background: url("../../assets/img/weatherStation.png") center no-repeat;
           background-size: 100% 100%;
         }
 
@@ -1983,7 +1832,7 @@ export default {
           width: 3.84rem;
           height: 0.34rem;
 
-          > div {
+          >div {
             width: 100%;
             height: 100%;
             box-sizing: border-box;
@@ -2011,7 +1860,7 @@ export default {
                 margin-right: 0.1rem;
                 display: inline-block;
 
-                > img {
+                >img {
                   width: 0.3rem;
                   height: 0.3rem;
                   position: relative;
@@ -2019,7 +1868,7 @@ export default {
                   margin-right: 0.05rem;
                 }
 
-                > span {
+                >span {
                   font-size: 0.16rem;
                   font-weight: 400;
                   color: #fff;
@@ -2040,8 +1889,7 @@ export default {
         .e_title {
           width: 3.98rem;
           height: 0.19rem;
-          background: url("../../assets/img/environmentData_bg.png") center
-            no-repeat;
+          background: url("../../assets/img/environmentData_bg.png") center no-repeat;
           background-size: 100% 100%;
           font-size: 0.18rem;
           font-family: AlibabaPuHuiTiM;
@@ -2087,7 +1935,7 @@ export default {
                 box-sizing: border-box;
                 padding-bottom: 0.1rem;
 
-                > img {
+                >img {
                   width: 0.62rem;
                   height: 0.68rem;
                   margin: 0 0.16rem 0 0.13rem;
@@ -2097,14 +1945,14 @@ export default {
                   display: flex;
                   flex-direction: column;
 
-                  > span:nth-child(1) {
+                  >span:nth-child(1) {
                     font-size: 0.16rem;
                     font-family: MicrosoftYaHei-Bold;
                     font-weight: bold;
                     color: #86c2ff;
                   }
 
-                  > span:nth-child(2) {
+                  >span:nth-child(2) {
                     font-size: 0.22rem;
                     font-family: AlibabaPuHuiTiB;
                     font-weight: bold;
@@ -2135,15 +1983,13 @@ export default {
           top: 0;
           left: 0;
           z-index: 99;
-          -webkit-mask-image: linear-gradient(
-            90deg,
-            transparent 22%,
-            transparent 10%,
-            blue 30%,
-            blue 70%,
-            transparent 75%,
-            transparent 100%
-          );
+          -webkit-mask-image: linear-gradient(90deg,
+              transparent 22%,
+              transparent 10%,
+              blue 30%,
+              blue 70%,
+              transparent 75%,
+              transparent 100%);
 
           .map1 {
             width: 60%;
@@ -2156,12 +2002,10 @@ export default {
             //     blue 80%,
             //     transparent 100%,
             //     transparent 100%);
-            -webkit-mask-image: linear-gradient(
-              transparent 0%,
-              blue 8%,
-              blue 85%,
-              transparent 100%
-            );
+            -webkit-mask-image: linear-gradient(transparent 0%,
+                blue 8%,
+                blue 85%,
+                transparent 100%);
             // transform: scale(0.6);
             position: absolute;
             top: 50%;
@@ -2176,23 +2020,19 @@ export default {
               // top: 0.3rem;
               // left: 0.5rem;
               z-index: 10;
-              -webkit-mask-image: linear-gradient(
-                90deg,
-                transparent 0%,
-                blue 5%,
-                blue 93%,
-                transparent 99%
-              );
+              -webkit-mask-image: linear-gradient(90deg,
+                  transparent 0%,
+                  blue 5%,
+                  blue 93%,
+                  transparent 99%);
 
               .drag_img {
                 width: 100%;
                 height: 100%;
-                -webkit-mask-image: linear-gradient(
-                  transparent 0%,
-                  blue 13%,
-                  blue 73%,
-                  transparent 97%
-                );
+                -webkit-mask-image: linear-gradient(transparent 0%,
+                    blue 13%,
+                    blue 73%,
+                    transparent 97%);
               }
 
               .axis_init {
@@ -2211,33 +2051,29 @@ export default {
               }
             }
 
-            .drag_box5{
+            .drag_box5 {
               width: 100%;
               height: 100%;
               position: absolute;
               // top: 0.3rem;
               // left: 0.5rem;
               z-index: 10;
-              -webkit-mask-image: linear-gradient(
-                90deg,
-                transparent 0%,
-                blue 5%,
-                blue 93%,
-                transparent 99%
-              );
+              -webkit-mask-image: linear-gradient(90deg,
+                  transparent 0%,
+                  blue 5%,
+                  blue 93%,
+                  transparent 99%);
 
               .drag_img {
                 width: 100%;
                 height: 100%;
-                -webkit-mask-image: linear-gradient(
-                  transparent 0%,
-                  blue 13%,
-                  blue 73%,
-                  transparent 97%
-                );
+                -webkit-mask-image: linear-gradient(transparent 0%,
+                    blue 13%,
+                    blue 73%,
+                    transparent 97%);
               }
 
-              .axis_shimen{
+              .axis_shimen {
                 width: 0.4rem;
                 height: 0.5rem;
                 position: absolute;
@@ -2246,7 +2082,7 @@ export default {
                 z-index: 99;
               }
 
-              .axis_shimen1{
+              .axis_shimen1 {
                 width: 0.3rem;
                 height: 0.4rem;
                 position: absolute;
@@ -2255,7 +2091,7 @@ export default {
                 z-index: 99;
               }
 
-              .axis_shimen2{
+              .axis_shimen2 {
                 width: 0.3rem;
                 height: 0.4rem;
                 position: absolute;
@@ -2263,7 +2099,8 @@ export default {
                 left: 18%;
                 z-index: 99;
               }
-              .axis_shimen3{
+
+              .axis_shimen3 {
                 width: 0.3rem;
                 height: 0.4rem;
                 position: absolute;
@@ -2271,7 +2108,8 @@ export default {
                 left: 20%;
                 z-index: 99;
               }
-              .axis_shimen4{
+
+              .axis_shimen4 {
                 width: 0.3rem;
                 height: 0.4rem;
                 position: absolute;
@@ -2280,34 +2118,31 @@ export default {
                 z-index: 99;
               }
             }
-            .drag_box7{
+
+            .drag_box7 {
               width: 100%;
               height: auto;
               position: absolute;
               // top: 0.3rem;
               // left: 0.5rem;
               z-index: 10;
-              top:-64px;
-              -webkit-mask-image: linear-gradient(
-                90deg,
-                transparent 0%,
-                blue 5%,
-                blue 93%,
-                transparent 99%
-              );
+              top: -64px;
+              -webkit-mask-image: linear-gradient(90deg,
+                  transparent 0%,
+                  blue 5%,
+                  blue 93%,
+                  transparent 99%);
 
               .drag_img {
                 width: 100%;
                 height: auto;
-                -webkit-mask-image: linear-gradient(
-                  transparent 0%,
-                  blue 13%,
-                  blue 73%,
-                  transparent 97%
-                );
+                -webkit-mask-image: linear-gradient(transparent 0%,
+                    blue 13%,
+                    blue 73%,
+                    transparent 97%);
               }
 
-              .axis_shimen{
+              .axis_shimen {
                 width: 0.4rem;
                 height: auto;
                 position: absolute;
@@ -2317,7 +2152,7 @@ export default {
                 cursor: pointer;
               }
 
-              .axis_shimen1{
+              .axis_shimen1 {
                 width: 0.4rem;
                 height: auto;
                 position: absolute;
@@ -2327,7 +2162,7 @@ export default {
                 cursor: pointer;
               }
 
-              .axis_shimen2{
+              .axis_shimen2 {
                 width: 0.4rem;
                 height: auto;
                 position: absolute;
@@ -2336,7 +2171,8 @@ export default {
                 cursor: pointer;
                 z-index: 99;
               }
-              .axis_shimen3{
+
+              .axis_shimen3 {
                 width: 0.4rem;
                 height: auto;
                 position: absolute;
@@ -2345,7 +2181,8 @@ export default {
                 z-index: 99;
                 cursor: pointer;
               }
-              .axis_shimen4{
+
+              .axis_shimen4 {
                 width: 0.4rem;
                 height: auto;
                 position: absolute;
@@ -2354,7 +2191,8 @@ export default {
                 z-index: 99;
                 cursor: pointer;
               }
-              .axis_shimen5{
+
+              .axis_shimen5 {
                 width: 0.4rem;
                 height: auto;
                 position: absolute;
@@ -2364,6 +2202,7 @@ export default {
                 cursor: pointer;
               }
             }
+
             .drag_box {
               width: 100%;
               height: 100%;
@@ -2371,23 +2210,19 @@ export default {
               // top: 0.3rem;
               // left: 0.5rem;
               z-index: 10;
-              -webkit-mask-image: linear-gradient(
-                90deg,
-                transparent 4%,
-                blue 18%,
-                blue 88%,
-                transparent 100%
-              );
+              -webkit-mask-image: linear-gradient(90deg,
+                  transparent 4%,
+                  blue 18%,
+                  blue 88%,
+                  transparent 100%);
 
               .drag_img {
                 width: 100%;
                 height: 100%;
-                -webkit-mask-image: linear-gradient(
-                  transparent 0%,
-                  blue 13%,
-                  blue 73%,
-                  transparent 97%
-                );
+                -webkit-mask-image: linear-gradient(transparent 0%,
+                    blue 13%,
+                    blue 73%,
+                    transparent 97%);
               }
 
               .axis_1 {
@@ -2559,7 +2394,7 @@ export default {
             width: 100%;
             height: 0.54rem;
 
-            > div {
+            >div {
               width: 100%;
               height: 0.54rem;
               cursor: pointer;
@@ -2579,17 +2414,14 @@ export default {
                 width: 0.84rem !important;
               }
 
-              .swiper-slide1 {
-              }
+              .swiper-slide1 {}
 
               ::v-deep .swiper-slide2 {
                 color: #ffffff !important;
-                background: linear-gradient(
-                  -35deg,
-                  #56a8d5 0%,
-                  rgba(0, 55, 110, 0.75) 50%,
-                  #56a8d5 100%
-                ) !important;
+                background: linear-gradient(-35deg,
+                    #56a8d5 0%,
+                    rgba(0, 55, 110, 0.75) 50%,
+                    #56a8d5 100%) !important;
                 border: 1px solid rgba(122, 225, 255, 0.75) !important;
               }
 
@@ -2673,8 +2505,7 @@ export default {
             .i_title {
               // width: 4rem;
               height: 0.5rem;
-              background: url("../../assets/img/i_title_bg.png") center
-                no-repeat;
+              background: url("../../assets/img/i_title_bg.png") center no-repeat;
               background-size: 100% 100%;
               display: flex;
               align-items: center;
@@ -2682,12 +2513,12 @@ export default {
               box-sizing: border-box;
               padding: 0 0.1rem 0 0.05rem;
 
-              > img {
+              >img {
                 width: 0.5rem;
                 height: 0.5rem;
               }
 
-              > span:nth-child(2) {
+              >span:nth-child(2) {
                 font-size: 0.16rem;
                 font-family: MicrosoftYaHei-Bold;
                 font-weight: bold;
@@ -2701,7 +2532,7 @@ export default {
                 opacity: 0.2;
               }
 
-              > span:nth-child(4) {
+              >span:nth-child(4) {
                 font-size: 0.14rem;
                 font-family: MicrosoftYaHei;
                 font-weight: 400;
@@ -2726,15 +2557,13 @@ export default {
                 margin-right: 0.47rem;
               }
 
-              > span:nth-child(6),
-              > span:nth-child(7) {
+              >span:nth-child(6),
+              >span:nth-child(7) {
                 width: 0.66rem;
                 height: 0.3rem;
-                background: linear-gradient(
-                  -35deg,
-                  rgba(122, 225, 255, 0.49) 1%,
-                  rgba(122, 225, 255, 0.5) 100%
-                );
+                background: linear-gradient(-35deg,
+                    rgba(122, 225, 255, 0.49) 1%,
+                    rgba(122, 225, 255, 0.5) 100%);
                 border: 0.01rem solid rgba(122, 225, 255, 0.5);
                 border-radius: 0.15rem;
                 font-size: 0.14rem;
@@ -2749,8 +2578,7 @@ export default {
             .i_title_ {
               // width: 4rem;
               height: 0.5rem;
-              background: url("../../assets/img/i_title_bg.png") center
-                no-repeat;
+              background: url("../../assets/img/i_title_bg.png") center no-repeat;
               background-size: 100% 100%;
               display: flex;
               align-items: center;
@@ -2758,12 +2586,12 @@ export default {
               box-sizing: border-box;
               padding: 0 0.1rem 0 0.05rem;
 
-              > img {
+              >img {
                 width: 0.5rem;
                 height: 0.5rem;
               }
 
-              > span:nth-child(2) {
+              >span:nth-child(2) {
                 width: 18%;
                 font-size: 0.16rem;
                 font-family: MicrosoftYaHei-Bold;
@@ -2779,7 +2607,7 @@ export default {
                 margin-right: 0.1rem;
               }
 
-              > span:nth-child(4) {
+              >span:nth-child(4) {
                 width: 18%;
                 font-size: 0.14rem;
                 font-family: MicrosoftYaHei;
@@ -2787,7 +2615,7 @@ export default {
                 color: #4effd5;
               }
 
-              > span:nth-child(6) {
+              >span:nth-child(6) {
                 width: 18%;
                 font-size: 0.14rem;
                 font-family: MicrosoftYaHei;
@@ -2796,14 +2624,12 @@ export default {
                 margin-right: 0.47rem;
               }
 
-              > span:nth-child(7) {
+              >span:nth-child(7) {
                 width: 0.66rem;
                 height: 0.3rem;
-                background: linear-gradient(
-                  -35deg,
-                  rgba(122, 225, 255, 0.49) 1%,
-                  rgba(122, 225, 255, 0.5) 100%
-                );
+                background: linear-gradient(-35deg,
+                    rgba(122, 225, 255, 0.49) 1%,
+                    rgba(122, 225, 255, 0.5) 100%);
                 border: 0.01rem solid rgba(122, 225, 255, 0.5);
                 border-radius: 0.15rem;
                 font-size: 0.14rem;
@@ -2830,16 +2656,16 @@ export default {
                 align-items: center;
                 justify-content: space-between;
 
-                > span:nth-child(1),
-                > span:nth-child(4) {
+                >span:nth-child(1),
+                >span:nth-child(4) {
                   font-size: 0.14rem;
                   font-family: MicrosoftYaHei;
                   font-weight: 400;
                   color: #ffffff;
                 }
 
-                > span:nth-child(2),
-                > span:nth-child(5) {
+                >span:nth-child(2),
+                >span:nth-child(5) {
                   font-size: 0.14rem;
                   font-family: MicrosoftYaHei;
                   font-weight: 400;