[Fix 0000]历史数据问题修改

pages/device/index.vue

@@ -17,6 +17,7 @@
       <DeviceMenu @menuClick="menuClick"></DeviceMenu>
     </view>
     <u-tabs
+      v-if="!menushow"
       class="devic-box-tab"
       :current="PageCur"
       :list="tabList"

pages/history/history.vue

@@ -129,7 +129,17 @@
                   class="datacard"
                   v-for="(showitem, index) in deviceShowList"
                   :key="index"
-                  v-if="showitem.appShow == 1"
+                  v-if="
+                    showitem.appShow == 1 &&
+                    showitem.monitorcode != 'strinstallpos' &&
+                    showitem.monitorcode != 'gdevicename' &&
+                    showitem.monitorcode != 'ginstallpos' &&
+                    showitem.monitorcode != 'netStatus' &&
+                    showitem.monitorcode != 'warnFlag' &&
+                    showitem.monitorcode != 'gcreatetime' &&
+                    showitem.monitorcode != 'ttime' &&
+                    showitem.monitorcode != 'time'
+                  "
                 >
                   <view
                     :class="TabCur"
@@ -295,6 +305,7 @@ export default {
       pageNo: 1, // 当前页码（用于请求数据时分页）
       stationType: "plc1", // 站点类型（用于请求数据时的参数）
       strType: "", //设备小类
+      sysId: "",
     };
   },
   components: {
@@ -324,8 +335,6 @@ export default {
   },
   created() {
     this.colums = this.showColum;
-    const key = this.TabCur + "_history";
-    this.deviceShowList = this.colums[key];
     const startTime = new Date().getTime() - 3600 * 1000 * 24 * 30;
     const endTime = new Date();
     this.StartTime = dayjs(startTime).format("YYYY-MM-DD HH:mm:ss");
@@ -333,7 +342,11 @@ export default {
   },
   mounted() {
     // this.TabCur = deviceType;
-    this.loadData(this.TabCur);
+    if (this.TabCur.startsWith("sys_")) {
+      this.loadNewData(this.TabCur);
+    } else {
+      this.loadData(this.TabCur);
+    }
   },
 
   computed: {},
@@ -360,6 +373,50 @@ export default {
           });
       });
     },
+    loadNewData(type) {
+      return new Promise((resolve, reject) => {
+        api
+          .getSysList({
+            strtype: type,
+            pagetype: "normal",
+          })
+          .then((response) => {
+            if (response.data.code == 200) {
+              this.sysId = response.data.result.records[0].id;
+              this.loadSysData({
+                devicetype: "sys",
+                systemID: this.sysId,
+              });
+            } else {
+              resolve(response);
+            }
+          })
+          .catch((error) => {
+            // console.log("catch===>response", response);
+            reject(error);
+          });
+      });
+    },
+    //加载场景类数据
+    loadSysData(data) {
+      new Promise((resolve, reject) => {
+        api
+          .getDeviceMonitor(data)
+          .then((response) => {
+            if (response.data.code == 200) {
+              this.deviceList[this.TabCur] =
+                response.data.result.msgTxt[0].datalist;
+              this.curlist = this.deviceList[this.TabCur];
+              this.setData(this.curlist);
+            } else {
+              resolve(response);
+            }
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
     //选择设备选择器  保存对应的id
     setData(data) {
       this.devices = [];
@@ -380,10 +437,22 @@ export default {
       // this.deviceId = e.value[0].id;
       this.deviceID = e.value[0].ID;
       this.stationType = e.value[0].stationtype;
-      this.strType = e.value[0].strtype;
+      this.strType = e.value[0].type;
       this.deviceType1 = e.value[0].type;
       this.deviceName = e.value[0].strinstallpos;
       this.deviceShow = false;
+      let original = this.TabCur;
+      let newName = original.startsWith("sys_")
+        ? original.substring(4)
+        : original;
+      const key = newName + "_history";
+      const key1 = this.deviceType1 + "_history";
+      console.log(key1, "key1");
+      if (this.showColum?.[key1]?.length > 0) {
+        this.deviceShowList = this.showColum[key1];
+      } else {
+        this.deviceShowList = this.showColum[key] ?? [];
+      }
     },
     selectDevice1(e) {
       this.deviceNum = e.value[0].value;
@@ -419,7 +488,6 @@ export default {
       } else {
         this.getHistoryData2();
       }
-      // this.getHistoryData2();
     },
     // 查询历史数据
     getHistoryData() {
@@ -430,7 +498,7 @@ export default {
         skip: this.skip,
         pageNo: this.pageNo,
         pageSize: 10,
-        strtype: this.TabCur,
+        strtype: this.strType,
       };
       new Promise((resolve, reject) => {
         api
@@ -462,24 +530,32 @@ export default {
         isEmployee: this.TabCur.startsWith("vehicle") ? false : true,
         pageNum: 1,
         pageSize: 10,
-        strtype: this.TabCur + "*",
+        strtype:
+          (this.TabCur.startsWith("sys_")
+            ? this.TabCur.substring(4)
+            : this.TabCur) + "*",
       };
-      api
-        .getDeviceHistory2(params)
-        .then((response) => {
-          if (response.data.code === 200) {
-            const result1 = response.data.result;
-            if (result1.records.length != 0) {
-              this.historyData = result1.records;
+      if (this.TabCur.startsWith("sys")) {
+        params.sysId = this.sysId;
+      }
+      new Promise((resolve, reject) => {
+        api
+          .getDeviceHistory2(params)
+          .then((response) => {
+            if (response.data.code === 200) {
+              const result1 = response.data.result;
+              if (result1.records.length != 0) {
+                this.historyData = result1.records;
+              }
+              // this.pageNo = response1.data.result.datalist.current;
+            } else {
+              resolve(response);
             }
-            // this.pageNo = response1.data.result.datalist.current;
-          } else {
-            reject(new Error(`请求失败，错误码：${response.data.code}`));
-          }
-        })
-        .catch((error) => {
-          reject(error);
-        });
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
     },
     async loadMoreData() {
       if (this.loading || !this.hasMoreData) return;

pages/home/detail/autodoor/autodoor.vue

@@ -98,7 +98,7 @@
           >
           </fanlocalAnimate>
         </div>
-        <!-- <div class="flcard" v-if="this.TabCur == 'fanmain'">
+        <div class="flcard" v-if="this.TabCur == 'fanmain'">
           <fanmainAnimate
             ref="fanpage"
             style="width: 100%"
@@ -110,7 +110,7 @@
             :fundoor2="fundoor2"
             :nowfengji="qidongfengji"
           ></fanmainAnimate>
-        </div> -->
+        </div>
         <div class="flcard" style="" v-if="this.TabCur == 'window'">
           <windowAnimate
             :windowAngle="windowAngle"
@@ -210,7 +210,7 @@
                 <div>主机</div>
                 <div
                   class="itemback"
-                  v-for="(item, index) in showColum[TabCur + '_monitor_left']"
+                  v-for="(item, index) in deviceShowList1"
                   :key="index"
                   v-show="item.appShow == 1"
                 >
@@ -300,7 +300,7 @@
                 <div>备机</div>
                 <div
                   class="itemback"
-                  v-for="(item, index) in showColum[TabCur + '_monitor_left']"
+                  v-for="(item, index) in deviceShowList1"
                   :key="index"
                   v-show="item.appShow == 1"
                 >
@@ -394,7 +394,7 @@
                 <div>主机</div>
                 <div
                   class="itemback"
-                  v-for="(item, index) in showColum[TabCur + '_monitor_right']"
+                  v-for="(item, index) in deviceShowList1"
                   :key="index"
                   v-show="item.appShow == 1"
                 >
@@ -484,7 +484,7 @@
                 <div>备机</div>
                 <div
                   class="itemback"
-                  v-for="(item, index) in showColum[TabCur + '_monitor_right']"
+                  v-for="(item, index) in deviceShowList1"
                   :key="index"
                   v-show="item.appShow == 1"
                 >
@@ -673,6 +673,7 @@ export default {
       cameraList: [], //摄像数据
       showColum: {},
       deviceShowList: [],
+      deviceShowList1: [],
       isFirstRequest: true, // 是否是第一次请求
       fanMsStatus: true,
       qidongfengji: "1",
@@ -700,10 +701,10 @@ export default {
     fanmainAnimate,
   },
   created() {
-    this.getShowColum();
     if (this.isFirstRequest) {
       this.getDeviceInfo(this.itemId);
     }
+    this.getShowColum();
   },
   mounted() {
     this.startTimer();
@@ -735,12 +736,34 @@ export default {
               var showlist = response.data.result;
               this.$store.commit("SET_SHOWCOLUM", showlist);
               this.showColum = showlist;
-              const key = this.TabCur + "_monitor";
-              const key1 = this.deviceType + "_monitor";
-              if (this.showColum?.[key1]?.length > 0) {
-                this.deviceShowList = this.showColum[key1];
+              let original = this.TabCur;
+              let newName = original.startsWith("sys_")
+                ? original.substring(4)
+                : original;
+              if (this.TabCur == "fanlocal") {
+                const key = this.TabCur + "_monitor_right";
+                const key1 = this.deviceType + "_monitor_right";
+                if (this.showColum?.[key1]?.length > 0) {
+                  this.deviceShowList1 = this.showColum[key1];
+                } else {
+                  this.deviceShowList1 = this.showColum[key] ?? [];
+                }
+              } else if (this.TabCur == "fanmain") {
+                const key = this.TabCur + "_monitor_left";
+                const key1 = this.deviceType + "_monitor_left";
+                if (this.showColum?.[key1]?.length > 0) {
+                  this.deviceShowList1 = this.showColum[key1];
+                } else {
+                  this.deviceShowList1 = this.showColum[key] ?? [];
+                }
               } else {
-                this.deviceShowList = this.showColum[key] ?? [];
+                const key = newName + "_monitor";
+                const key1 = this.deviceType + "_monitor";
+                if (this.showColum?.[key1]?.length > 0) {
+                  this.deviceShowList = this.showColum[key1];
+                } else {
+                  this.deviceShowList = this.showColum[key] ?? [];
+                }
               }
 
               // this.deviceShowList = this.showColum[key];
@@ -806,14 +829,27 @@ export default {
               this.doorNetStatus = result.netStatus;
               this.warnFlag = result.warnLevel_str;
               this.readTime = result.readTime;
-
-              this.qidongfengji = "1";
-              this.fundoor1 = 1;
-              this.door1 = 1;
-              this.topdoor1 = 1;
-              this.fundoor2 = 0;
-              this.door2 = 0;
-              this.topdoor2 = 0;
+              this.qidongfengji =
+                result.readData.Fan1MOT2_RunningStatus1 == "1" ||
+                result.readData.Fan1StartStatus == "1"
+                  ? "1"
+                  : "2";
+              if (this.qidongfengji == "1") {
+                this.fundoor1 = 1;
+                this.door1 = 1;
+                this.topdoor1 = 0;
+                this.fundoor2 = 0;
+                this.door2 = 0;
+                this.topdoor2 = 0;
+              } else if (this.qidongfengji == "2") {
+                this.fundoor1 = 0;
+                this.door1 = 0;
+                this.topdoor1 = 0;
+                this.fundoor2 = 1;
+                this.door2 = 1;
+                this.topdoor2 = 0;
+              }
+              this.$refs.fanpage.setQidongfengji(this.qidongfengji);
               var maxarea = result.maxarea;
               this.windowAngle =
                 (this.tableData.forntArea / maxarea) * 100 * 0.9;

pages/home/detail/fanmainAnimate/fanmainAnimate.vue

@@ -274,11 +274,7 @@
             ></div>
           </div>
           <!-- <div class="box-left" style="width:5.5%;height:14%;top: 15%;left: 20%;"></div> -->
-          <div
-            class="box"
-            style="top: 12.2%; left: 30.4%"
-            v-if="groupType != 'lh' && groupType !== 'wlyk'"
-          >
+          <div class="box" style="top: 12.2%; left: 30.4%">
             <div id="box2" :class="reverseVal ? 'fz' : 'zz'">
               <span></span>
               <span></span>
@@ -288,15 +284,7 @@
             <!-- <div class="box-right" style="width:6%;height:14%;top: 15%;left:32%;"> -->
             <!-- 风机旁边阀门 -->
           </div>
-          <div
-            class="box-s"
-            style="top: 12.2%; left: 34.5%"
-            :style="
-              groupType != 'lh' && groupType !== 'wlyk'
-                ? 'top: 12.2%;left: 34.5%;'
-                : 'top: 12.2%;left: 32.5%;'
-            "
-          >
+          <div class="box-s" style="top: 12.2%; left: 34.5%">
             <div id="box2-s" :class="reverseVal ? 'fz1' : 'zz1'">
               <span></span>
               <span></span>
@@ -305,11 +293,7 @@
             </div>
           </div>
           <!-- <div class="box-left" style="width:5.5%;height:14%;top: 80%;left: 20%;"></div> -->
-          <div
-            class="box"
-            style="bottom: 11.7%; left: 27.8%"
-            v-if="groupType != 'lh' && groupType !== 'wlyk'"
-          >
+          <div class="box" style="bottom: 11.7%; left: 27.8%">
             <div id="box1" :class="reverseVal ? 'fz' : 'zz'">
               <span></span>
               <span></span>
@@ -344,15 +328,7 @@
           </div>
           <!-- 风机 -->
           <!-- <div class="box-right" style="width:6%;height:14%;top: 80%;left:32.5%;"> -->
-          <div
-            class="box-s"
-            style="bottom: 11.7%; left: 32.4%"
-            :style="
-              groupType != 'lh' && groupType !== 'wlyk'
-                ? 'bottom: 11.7%;left:32.4%;'
-                : 'bottom: 11.7%;left:30.4%;'
-            "
-          >
+          <div class="box-s" style="bottom: 11.7%; left: 32.4%">
             <div id="box1-s" :class="reverseVal ? 'fz1' : 'zz1'">
               <span></span>
               <span></span>
@@ -411,7 +387,7 @@
         <span v-if="topindex == 2">1#风机</span>
         <span v-if="topindex == 1">2#风机</span>
       </div>
-      <div style="position: absolute; color: #fff; bottom: 19%; left: 31.4%">
+      <div style="position: absolute; color: #fff; top: 19%; left: 31.4%">
         <span v-if="topindex == 2">2#风机</span>
         <span v-if="topindex == 1">1#风机</span>
       </div>
@@ -536,6 +512,113 @@ div.ventilate {
   background-size: 100% 100%;
   perspective: 800px;
 }
+div.arrowpic1,
+div.arrowpic2,
+div.arrowpic3,
+div.arrowpic4,
+div.arrowpic5,
+div.arrowpic6,
+div.arrowpic7,
+div.arrowpic8,
+div.arrowpic9,
+div.arrowpic10,
+div.arrowpic1-2,
+div.arrowpic2-2,
+div.arrowpic3-2,
+div.arrowpic4-2,
+div.arrowpic5-2,
+div.arrowpic6-2,
+div.arrowpic7-2,
+div.arrowpic8-2,
+div.arrowpic9-2,
+div.arrowpic10-2,
+div.arrowpic1-3,
+div.arrowpic2-3,
+div.arrowpic3-3,
+div.arrowpic4-3,
+div.arrowpic5-3,
+div.arrowpic6-3,
+div.arrowpic7-3,
+div.arrowpic8-3,
+div.arrowpic9-3,
+div.arrowpic10-3,
+div.arrowpic1-4,
+div.arrowpic2-4,
+div.arrowpic3-4,
+div.arrowpic4-4,
+div.arrowpic5-4,
+div.arrowpic6-4,
+div.arrowpic7-4,
+div.arrowpic8-4,
+div.arrowpic9-4,
+div.arrowpic10-4 {
+  position: absolute;
+  right: 40px;
+  opacity: 0;
+  top: 96px;
+  width: 30px;
+  height: 15px;
+  box-sizing: border-box;
+  float: right;
+  z-index: 100;
+  transition: all 2s ease;
+  background-image: url(/static/mainfan/arrow-icon.png);
+  background-size: 100% 100%;
+}
+
+div.reverse-arrowpic1,
+div.reverse-arrowpic2,
+div.reverse-arrowpic3,
+div.reverse-arrowpic4,
+div.reverse-arrowpic5,
+div.reverse-arrowpic6,
+div.reverse-arrowpic7,
+div.reverse-arrowpic8,
+div.reverse-arrowpic9,
+div.reverse-arrowpic10,
+div.reverse-arrowpic1-2,
+div.reverse-arrowpic2-2,
+div.reverse-arrowpic3-2,
+div.reverse-arrowpic4-2,
+div.reverse-arrowpic5-2,
+div.reverse-arrowpic6-2,
+div.reverse-arrowpic7-2,
+div.reverse-arrowpic8-2,
+div.reverse-arrowpic9-2,
+div.reverse-arrowpic10-2,
+div.reverse-arrowpic1-3,
+div.reverse-arrowpic2-3,
+div.reverse-arrowpic3-3,
+div.reverse-arrowpic4-3,
+div.reverse-arrowpic5-3,
+div.reverse-arrowpic6-3,
+div.reverse-arrowpic7-3,
+div.reverse-arrowpic8-3,
+div.reverse-arrowpic9-3,
+div.reverse-arrowpic10-3,
+div.reverse-arrowpic1-4,
+div.reverse-arrowpic2-4,
+div.reverse-arrowpic3-4,
+div.reverse-arrowpic4-4,
+div.reverse-arrowpic5-4,
+div.reverse-arrowpic6-4,
+div.reverse-arrowpic7-4,
+div.reverse-arrowpic8-4,
+div.reverse-arrowpic9-4,
+div.reverse-arrowpic10-4 {
+  position: absolute;
+  right: 40px;
+  opacity: 0;
+  top: 96px;
+  width: 30px;
+  height: 15px;
+  box-sizing: border-box;
+  float: right;
+  z-index: 100;
+  transition: all 2s ease;
+  background-image: url(/static/mainfan/arrow-icon.png);
+  background-size: 100% 100%;
+}
 </style>
 <style scoped>
 @media screen and (max-width: 4096px) {
@@ -796,3 +879,1515 @@ div.box-left {
   }
 }
 </style>
+<style scoped>
+.arrowpic1 {
+  position: relative;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+}
+
+@keyframes myfirstani1 {
+  0% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  18% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  20% {
+    right: 14%;
+    top: 46%;
+    -webkit-transform: rotate(30deg);
+    opacity: 1;
+  }
+  30% {
+    right: 22%;
+    top: 22%;
+    -webkit-transform: rotate(30deg);
+    opacity: 1;
+  }
+  32% {
+    right: 24%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  92% {
+    right: 86%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 88%;
+    top: 18%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 88%;
+    top: 10%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 88%;
+    top: 0%;
+    -webkit-transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes myfirstani1 /* Safari 和 Chrome */ {
+  0% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  18% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  20% {
+    right: 14%;
+    top: 46%;
+    -webkit-transform: rotate(30deg);
+    opacity: 1;
+  }
+  30% {
+    right: 22%;
+    top: 22%;
+    -webkit-transform: rotate(30deg);
+    opacity: 1;
+  }
+  32% {
+    right: 24%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  92% {
+    right: 94%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 95%;
+    top: 18%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 95%;
+    top: 10%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 95%;
+    top: 7%;
+    -webkit-transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+.arrowpic2 {
+  position: relative;
+  animation-delay: -18s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.arrowpic3 {
+  position: relative;
+  animation-delay: -16s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.arrowpic4 {
+  position: relative;
+  animation-delay: -14s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.arrowpic5 {
+  position: relative;
+  animation-delay: -12s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.arrowpic6 {
+  position: relative;
+  animation-delay: -10s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.arrowpic7 {
+  position: relative;
+  animation-delay: -8s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.arrowpic8 {
+  position: relative;
+  animation-delay: -6s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.arrowpic9 {
+  position: relative;
+  animation-delay: -4s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.arrowpic10 {
+  position: relative;
+  animation-delay: -2s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+.arrowpic1-2 {
+  position: relative;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+}
+
+@keyframes myfirstani1-2 {
+  0% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  15% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  17% {
+    right: 14%;
+    top: 50%;
+    -webkit-transform: rotate(-30deg);
+    opacity: 1;
+  }
+  29% {
+    right: 22%;
+    top: 68%;
+    -webkit-transform: rotate(-30deg);
+    opacity: 1;
+  }
+  31% {
+    right: 24%;
+    top: 69%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  92% {
+    right: 94%;
+    top: 69%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 95%;
+    top: 67%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 95%;
+    top: 58%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 95%;
+    top: 45%;
+    -webkit-transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes myfirstani1-2 /* Safari 和 Chrome */ {
+  0% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  15% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  17% {
+    right: 14%;
+    top: 50%;
+    -webkit-transform: rotate(-30deg);
+    opacity: 1;
+  }
+  29% {
+    right: 22%;
+    top: 68%;
+    -webkit-transform: rotate(-30deg);
+    opacity: 1;
+  }
+  31% {
+    right: 24%;
+    top: 69%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  92% {
+    right: 94%;
+    top: 69%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 95%;
+    top: 67%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 95%;
+    top: 58%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 95%;
+    top: 45%;
+    -webkit-transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+.arrowpic2-2 {
+  position: relative;
+  animation-delay: -18s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.arrowpic3-2 {
+  position: relative;
+  animation-delay: -16s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.arrowpic4-2 {
+  position: relative;
+  animation-delay: -14s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.arrowpic5-2 {
+  position: relative;
+  animation-delay: -12s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.arrowpic6-2 {
+  position: relative;
+  animation-delay: -10s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.arrowpic7-2 {
+  position: relative;
+  animation-delay: -8s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.arrowpic8-2 {
+  position: relative;
+  animation-delay: -6s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.arrowpic9-2 {
+  position: relative;
+  animation-delay: -4s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.arrowpic10-2 {
+  position: relative;
+  animation-delay: -2s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+
+.arrowpic1-3 {
+  position: relative;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+}
+
+@keyframes myfirstani1-3 {
+  0% {
+    right: 41.5%;
+    top: 0%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  5% {
+    right: 41.5%;
+    top: 16%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  8% {
+    right: 43.5%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  92% {
+    right: 94%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 95%;
+    top: 18%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 95%;
+    top: 14%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 95%;
+    top: 11%;
+    -webkit-transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes myfirstani1-3 /* Safari 和 Chrome */ {
+  0% {
+    right: 41.5%;
+    top: 0%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  5% {
+    right: 41.5%;
+    top: 16%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  8% {
+    right: 43.5%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  92% {
+    right: 94%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 95%;
+    top: 18%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 95%;
+    top: 14%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 95%;
+    top: 11%;
+    -webkit-transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+.arrowpic2-3 {
+  position: relative;
+  animation-delay: -18s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.arrowpic3-3 {
+  position: relative;
+  animation-delay: -16s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.arrowpic4-3 {
+  position: relative;
+  animation-delay: -14s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.arrowpic5-3 {
+  position: relative;
+  animation-delay: -12s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.arrowpic6-3 {
+  position: relative;
+  animation-delay: -10s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.arrowpic7-3 {
+  position: relative;
+  animation-delay: -8s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.arrowpic8-3 {
+  position: relative;
+  animation-delay: -6s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.arrowpic9-3 {
+  position: relative;
+  animation-delay: -4s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.arrowpic10-3 {
+  position: relative;
+  animation-delay: -2s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+
+.arrowpic1-4 {
+  position: relative;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+}
+
+@keyframes myfirstani1-4 {
+  0% {
+    right: 41.5%;
+    top: 67%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  6% {
+    right: 41.5%;
+    top: 81%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  8% {
+    right: 43.5%;
+    top: 84%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  92% {
+    right: 94%;
+    top: 84%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 95%;
+    top: 82%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 95%;
+    top: 78%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 95%;
+    top: 75%;
+    -webkit-transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes myfirstani1-4 /* Safari 和 Chrome */ {
+  0% {
+    right: 41.5%;
+    top: 67%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  6% {
+    right: 41.5%;
+    top: 81%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  8% {
+    right: 43.5%;
+    top: 84%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  98% {
+    right: 97%;
+    top: 84%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    right: 98%;
+    top: 84%;
+    -webkit-transform: rotate(0deg);
+    opacity: 0;
+  }
+}
+
+.arrowpic2-4 {
+  position: relative;
+  animation-delay: -18s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.arrowpic3-4 {
+  position: relative;
+  animation-delay: -16s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.arrowpic4-4 {
+  position: relative;
+  animation-delay: -14s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.arrowpic5-4 {
+  position: relative;
+  animation-delay: -12s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.arrowpic6-4 {
+  position: relative;
+  animation-delay: -10s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.arrowpic7-4 {
+  position: relative;
+  animation-delay: -8s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.arrowpic8-4 {
+  position: relative;
+  animation-delay: -6s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.arrowpic9-4 {
+  position: relative;
+  animation-delay: -4s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.arrowpic10-4 {
+  position: relative;
+  animation-delay: -2s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+
+.reverse-arrowpic1 {
+  position: relative;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+}
+
+@keyframes reverse-myfirstani1 {
+  0% {
+    right: 88%;
+    top: 0%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 88%;
+    top: 10%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 88%;
+    top: 18%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  8% {
+    right: 86%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  68% {
+    right: 24%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  70% {
+    right: 22%;
+    top: 22%;
+    -webkit-transform: rotate(210deg);
+    opacity: 1;
+  }
+  80% {
+    right: 14%;
+    top: 46%;
+    -webkit-transform: rotate(210deg);
+    opacity: 1;
+  }
+  82% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  100% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes reverse-myfirstani1 /* Safari 和 Chrome */ {
+  0% {
+    right: 88%;
+    top: 0%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 88%;
+    top: 10%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 88%;
+    top: 18%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  8% {
+    right: 86%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  68% {
+    right: 24%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  70% {
+    right: 22%;
+    top: 22%;
+    -webkit-transform: rotate(210deg);
+    opacity: 1;
+  }
+  80% {
+    right: 14%;
+    top: 46%;
+    -webkit-transform: rotate(210deg);
+    opacity: 1;
+  }
+  82% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  100% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+}
+
+.reverse-arrowpic2 {
+  position: relative;
+  animation-delay: -18s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.reverse-arrowpic3 {
+  position: relative;
+  animation-delay: -16s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.reverse-arrowpic4 {
+  position: relative;
+  animation-delay: -14s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.reverse-arrowpic5 {
+  position: relative;
+  animation-delay: -12s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.reverse-arrowpic6 {
+  position: relative;
+  animation-delay: -10s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.reverse-arrowpic7 {
+  position: relative;
+  animation-delay: -8s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.reverse-arrowpic8 {
+  position: relative;
+  animation-delay: -6s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.reverse-arrowpic9 {
+  position: relative;
+  animation-delay: -4s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.reverse-arrowpic10 {
+  position: relative;
+  animation-delay: -2s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+.reverse-arrowpic1-2 {
+  position: relative;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+}
+
+@keyframes reverse-myfirstani1-2 {
+  0% {
+    right: 95%;
+    top: 45%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 95%;
+    top: 58%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 95%;
+    top: 67%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  8% {
+    right: 94%;
+    top: 69%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  69% {
+    right: 24%;
+    top: 69%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  71% {
+    right: 22%;
+    top: 68%;
+    -webkit-transform: rotate(150deg);
+    opacity: 1;
+  }
+  83% {
+    right: 14%;
+    top: 50%;
+    -webkit-transform: rotate(150deg);
+    opacity: 1;
+  }
+  85% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  100% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes reverse-myfirstani1-2 /* Safari 和 Chrome */ {
+  0% {
+    right: 95%;
+    top: 45%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 95%;
+    top: 58%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 95%;
+    top: 67%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  8% {
+    right: 94%;
+    top: 69%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  69% {
+    right: 24%;
+    top: 69%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  71% {
+    right: 22%;
+    top: 68%;
+    -webkit-transform: rotate(150deg);
+    opacity: 1;
+  }
+  83% {
+    right: 14%;
+    top: 50%;
+    -webkit-transform: rotate(150deg);
+    opacity: 1;
+  }
+  85% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  100% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+}
+
+.reverse-arrowpic2-2 {
+  position: relative;
+  animation-delay: -18s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.reverse-arrowpic3-2 {
+  position: relative;
+  animation-delay: -16s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.reverse-arrowpic4-2 {
+  position: relative;
+  animation-delay: -14s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.reverse-arrowpic5-2 {
+  position: relative;
+  animation-delay: -12s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.reverse-arrowpic6-2 {
+  position: relative;
+  animation-delay: -10s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.reverse-arrowpic7-2 {
+  position: relative;
+  animation-delay: -8s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.reverse-arrowpic8-2 {
+  position: relative;
+  animation-delay: -6s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.reverse-arrowpic9-2 {
+  position: relative;
+  animation-delay: -4s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.reverse-arrowpic10-2 {
+  position: relative;
+  animation-delay: -2s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+
+.reverse-arrowpic1-3 {
+  position: relative;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+}
+
+@keyframes reverse-myfirstani1-3 {
+  0% {
+    right: 95%;
+    top: 11%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 95%;
+    top: 14%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 95%;
+    top: 18%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  8% {
+    right: 94%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  92% {
+    right: 43.5%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  95% {
+    right: 41.5%;
+    top: 16%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 41.5%;
+    top: 0%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes reverse-myfirstani1-3 /* Safari 和 Chrome */ {
+  0% {
+    right: 95%;
+    top: 11%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 95%;
+    top: 14%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 95%;
+    top: 18%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  8% {
+    right: 94%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  92% {
+    right: 43.5%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  95% {
+    right: 41.5%;
+    top: 16%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 41.5%;
+    top: 0%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+}
+
+.reverse-arrowpic2-3 {
+  position: relative;
+  animation-delay: -18s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.reverse-arrowpic3-3 {
+  position: relative;
+  animation-delay: -16s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.reverse-arrowpic4-3 {
+  position: relative;
+  animation-delay: -14s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.reverse-arrowpic5-3 {
+  position: relative;
+  animation-delay: -12s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.reverse-arrowpic6-3 {
+  position: relative;
+  animation-delay: -10s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.reverse-arrowpic7-3 {
+  position: relative;
+  animation-delay: -8s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.reverse-arrowpic8-3 {
+  position: relative;
+  animation-delay: -6s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.reverse-arrowpic9-3 {
+  position: relative;
+  animation-delay: -4s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.reverse-arrowpic10-3 {
+  position: relative;
+  animation-delay: -2s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+
+.reverse-arrowpic1-4 {
+  position: relative;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+}
+
+@keyframes reverse-myfirstani1-4 {
+  0% {
+    right: 95%;
+    top: 75%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 95%;
+    top: 78%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 95%;
+    top: 82%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  8% {
+    right: 94%;
+    top: 84%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  92% {
+    right: 43.5%;
+    top: 84%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  94% {
+    right: 41.5%;
+    top: 81%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 41.5%;
+    top: 67%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes reverse-myfirstani1-4 /* Safari 和 Chrome */ {
+  0% {
+    right: 95%;
+    top: 75%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 95%;
+    top: 78%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 95%;
+    top: 82%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  8% {
+    right: 94%;
+    top: 84%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  92% {
+    right: 43.5%;
+    top: 84%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  94% {
+    right: 41.5%;
+    top: 81%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 41.5%;
+    top: 67%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+}
+
+.reverse-arrowpic2-4 {
+  position: relative;
+  animation-delay: -18s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.reverse-arrowpic3-4 {
+  position: relative;
+  animation-delay: -16s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.reverse-arrowpic4-4 {
+  position: relative;
+  animation-delay: -14s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.reverse-arrowpic5-4 {
+  position: relative;
+  animation-delay: -12s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.reverse-arrowpic6-4 {
+  position: relative;
+  animation-delay: -10s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.reverse-arrowpic7-4 {
+  position: relative;
+  animation-delay: -8s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.reverse-arrowpic8-4 {
+  position: relative;
+  animation-delay: -6s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.reverse-arrowpic9-4 {
+  position: relative;
+  animation-delay: -4s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.reverse-arrowpic10-4 {
+  position: relative;
+  animation-delay: -2s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+</style>

pages/home/home.vue

@@ -78,7 +78,8 @@
                         showitem.monitorcode != 'strinstallpos' &&
                         showitem.monitorcode != 'netStatus' &&
                         showitem.monitorcode != 'warnFlag' &&
-                        showitem.monitorcode != 'readTime'
+                        showitem.monitorcode != 'readTime' &&
+                        showitem.monitorcode != ''
                       "
                     >
                       <view
@@ -93,10 +94,7 @@
                         "
                       >
                         <view
-                          v-if="
-                            showitem.datatype == 1 &&
-                            showitem.monitorcode == 'doorUse'
-                          "
+                          v-if="showitem.monitorcode == 'doorUse'"
                           class="demo-layout bg-purple-light"
                           style="
                             margin-top: 10rpx;
@@ -114,24 +112,7 @@
                           }}
                         </view>
                         <view
-                          v-else-if="showitem.datatype == 1"
-                          class="demo-layout bg-purple-light"
-                          style="
-                            margin-top: 10rpx;
-                            color: #3787fe;
-                            font-size: 30rpx;
-                            margin-top: 20rpx;
-                          "
-                        >
-                          {{
-                            item[showitem.monitorcode] == null ||
-                            item[showitem.monitorcode] == ""
-                              ? "-"
-                              : item[showitem.monitorcode]
-                          }}
-                        </view>
-                        <view
-                          v-else-if="showitem.datatype == 2"
+                          v-else
                           class="demo-layout bg-purple-light"
                           style="
                             color: #3787fe;
@@ -146,7 +127,6 @@
                               : item.readData[showitem.monitorcode]
                           }}
                         </view>
-
                         <view
                           class="demo-layout bg-purple-light"
                           style="
@@ -190,28 +170,7 @@
                         "
                       >
                         <view
-                          v-if="
-                            showitem.datatype == 1 &&
-                            showitem.monitorcode == 'doorUse'
-                          "
-                          class="demo-layout bg-purple-light"
-                          style="
-                            margin-top: 10rpx;
-                            color: #3787fe;
-                            font-size: 30rpx;
-                            margin-top: 20rpx;
-                          "
-                        >
-                          {{
-                            item[showitem.monitorcode] == "2"
-                              ? "行人"
-                              : item[showitem.monitorcode] == "1"
-                              ? "行车"
-                              : "-"
-                          }}
-                        </view>
-                        <view
-                          v-else-if="showitem.datatype == 1"
+                          v-if="showitem.datatype == 1"
                           class="demo-layout bg-purple-light"
                           style="
                             margin-top: 10rpx;
@@ -314,28 +273,7 @@
                         "
                       >
                         <view
-                          v-if="
-                            showitem.datatype == 1 &&
-                            showitem.monitorcode == 'doorUse'
-                          "
-                          class="demo-layout bg-purple-light"
-                          style="
-                            margin-top: 10rpx;
-                            color: #3787fe;
-                            font-size: 30rpx;
-                            margin-top: 20rpx;
-                          "
-                        >
-                          {{
-                            item[showitem.monitorcode] == "2"
-                              ? "行人"
-                              : item[showitem.monitorcode] == "1"
-                              ? "行车"
-                              : "-"
-                          }}
-                        </view>
-                        <view
-                          v-else-if="showitem.datatype == 1"
+                          v-if="showitem.datatype == 1"
                           class="demo-layout bg-purple-light"
                           style="
                             margin-top: 10rpx;
@@ -430,14 +368,18 @@ import { computed } from "vue";
 export default {
   data() {
     return {
+      deviceShow1: false,
       menushow: false,
-      TabCur: "gate",
+      TabCur: "",
       curlist: [],
       deviceList: {},
+      List: [],
       colums: {},
       typeList: [], //详情页展示数据
       deviceShowList: [], //设备展示字段
       isWarnVisible: false,
+      deviceType1: "",
+      devices1: [],
     };
   },
   props: ["showColum", "deviceType"],
@@ -465,12 +407,9 @@ export default {
   },
   created() {
     this.colums = this.showColum;
-    const key = this.TabCur + "_monitor";
-    this.deviceShowList = this.colums[key];
-    this.loadData("gate");
+    // this.deviceShowList = this.colums[key];
   },
-  async mounted() {
-    await this.loadData(this.TabCur);
+  mounted() {
     this.startTimer();
   },
   methods: {
@@ -530,7 +469,22 @@ export default {
                 } else {
                   item.readData.midGateOpen = "关闭";
                 }
+                this.deviceType1 = item.deviceType;
+                let original = this.TabCur;
+                let newName = original.startsWith("sys_")
+                  ? original.substring(4)
+                  : original;
+                const key = newName + "_monitor";
+                const key1 = this.deviceType1 + "_monitor";
+                if (this.showColum?.[key1]?.length > 0) {
+                  this.deviceShowList = this.showColum[key1];
+                } else {
+                  this.deviceShowList = this.showColum[key] ?? [];
+                }
               });
+              if (this.TabCur == "sys_pulping") {
+                this.loadNewData(this.curlist[0].deviceID);
+              }
             } else {
               resolve(response);
             }
@@ -541,6 +495,32 @@ export default {
           });
       });
     },
+    loadNewData(ID) {
+      return new Promise((resolve, reject) => {
+        api
+          .getDeviceMonitor({
+            devicetype: "sys",
+            systemID: ID,
+          })
+          .then((response) => {
+            if (response.data.code == 200) {
+              this.curlist = [];
+              this.List = response.data.result.msgTxt;
+              this.List.forEach((item) => {
+                if (item.type === "pulping_auto") {
+                  this.curlist.push(item.datalist[0]);
+                }
+              });
+            } else {
+              resolve(response);
+            }
+          })
+          .catch((error) => {
+            // console.log("catch===>response", response);
+            reject(error);
+          });
+      });
+    },
     devicemenuShow(e) {
       this.menushow = !this.menushow;
     },
@@ -548,7 +528,7 @@ export default {
     getShowList(type) {
       const params = {
         devicekind: type,
-        pagetype: "detail",
+        pagetype: "monitor",
         pageNo: 1,
         pageSize: 100,
       };
@@ -575,14 +555,13 @@ export default {
         type: this.TabCur,
       };
       const reqparams = uni.$u.queryParams(reqData);
-      this.getShowList(this.TabCur).then(() => {
-        if (this.typeList.length > 0) {
-          this.$destroy();
-          uni.navigateTo({
-            url: `/pages/home/detail/autodoor/autodoor${reqparams}`,
-          });
-        }
-      });
+      const key = this.deviceType1 + "_monitor";
+      if (this.showColum[key].length > 0) {
+        this.$destroy();
+        uni.navigateTo({
+          url: `/pages/home/detail/autodoor/autodoor${reqparams}`,
+        });
+      }
       //   this.$destroy();
       //   uni.navigateTo({
       //     url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,