1、局扇动画

2、监测页面调整

api/dictApi.js

@@ -0,0 +1,4 @@
+import { http } from '@/common/service/service.js' 
+import configService from '@/common/service/config.service.js';
+//字典标签专用（通过code获取字典数组）
+export const ajaxGetDictItems = (code, params)=>http.get(`/sys/dict/getDictItems/${code}`,params);

common/util/dictUtil.js

@@ -0,0 +1,32 @@
+
+import {ajaxGetDictItems} from '@/api/api';
+
+import store from '@/store/index.js';
+import Vue from 'vue';
+/**
+ * 获取字典数组
+ * @param dictCode 字典Code
+ * @return List<Map>
+ */
+export async function initDictOptions(dictCode) {
+  if (!dictCode) {
+    return '字典Code不能为空!';
+  }
+  //优先从缓存中读取字典配置
+  if(getDictItemsFromCache(dictCode)){
+    let res = {}
+    res.result = getDictItemsFromCache(dictCode);
+    res.success = true;
+    return res;
+  }
+  //获取字典数组
+  let res = await ajaxGetDictItems(dictCode);
+  return res;
+}
+
+function getDictItemsFromCache(dictCode) {
+  if (store.state.dicts != null && store.state.dicts[dictCode]) {
+    let dictItems = store.state.dicts[dictCode];
+    return dictItems;
+  }
+}

pages.json

@@ -179,19 +179,23 @@
     {
       "path": "pages/home/detail/autodoor/autodoor"
     },
-    {
-      "path": "pages/home/detail/doorAnimate/doorAnimate"
-    },
-    {
-      "path": "pages/home/detail/windowAnimate/windowAnimate"
-    },
-    {
-      "path": "pages/home/detail/windrectAnimate/windrectAnimate"
-    },
-    {
-      "path": "pages/home/detail/fanlocalAnimate/fanlocalAnimate"
-    }
-  ],
+      {
+      	"path" : "pages/home/detail/doorAnimate/doorAnimate"
+      },
+	  {
+	  	"path" : "pages/home/detail/windowAnimate/windowAnimate"
+	  },
+	  {
+	  	"path" : "pages/home/detail/windrectAnimate/windrectAnimate"
+	  },
+	  {
+	  	"path" : "pages/home/detail/fanlocalAnimate/fanlocalAnimate"
+	  },
+	  {
+	  	"path" : "pages/home/detail/fanlocalAnimate/fanlocalAnimate2"
+	  }
+	    
+    ],
   "globalStyle": {
     "mp-alipay": {
       /* 支付宝小程序特有相关 */

pages/home/detail/autodoor/autodoor.vue

@@ -92,6 +92,15 @@
             :type="deviceType"
           ></windrectAnimate>
         </div>
+        <div class="flcard" v-if="this.TabCur == 'fanlocal'">
+          <fanlocalAnimate
+            :fan1State="fan1State"
+            :fan2State="fan2State"
+            :title="title"
+            :videoURL="viedeoUrl"
+            :height="height"
+          ></fanlocalAnimate>
+        </div>
         <div
           class="flcard"
           v-if="this.TabCur == 'window' && this.nwindownum == 1"
@@ -131,11 +140,17 @@
               </div>
               <div class="datacard" v-if="item.monitorcode !== 'readTime'">
                 <div class="left-content">
-                  <view
+                  <view v-if="item.monitorcode == 'ndoortype'"
+                    class="demo-layout bg-purple-light"
+                    style="margin-top: 10rpx; color: #3787fe"
+                  >
+                    {{ tableData[item.monitorcode] == '1'?'行人':tableData[item.monitorcode] == '2'?'行车':'-' }}
+                  </view>
+                  <view v-else
                     class="demo-layout bg-purple-light"
                     style="margin-top: 10rpx; color: #3787fe"
                   >
-                    {{ tableData[item.monitorcode] }}
+                    {{ tableData[item.monitorcode] == null || tableData[item.monitorcode] == ''?'-':tableData[item.monitorcode]}}
                   </view>
                   <div class="spacer"></div>
                   <!-- 间距 -->
@@ -159,6 +174,8 @@
                         ? 'url(\'../../../../static/model/doorNet.png\')'
                         : item.monitorcode === 'rearGateOpen'
                         ? 'url(\'../../../../static/model/doorNet.png\')'
+                        : item.monitorcode === 'midGateOpen'
+                        ? 'url(\'../../../../static/model/doorNet.png\')'
                         : item.monitorcode === 'warnFlag'
                         ? 'url(\'../../../../static/model/9432.png\')'
                         : item.monitorcode === 'netStatus'
@@ -216,10 +233,11 @@
 
 <script>
 import api from "@/api/api";
+import initDictOptions from "@/common/util/dictUtil.js";
 import doorAnimate from "../doorAnimate/doorAnimate.vue";
 import windowAnimate from "../windowAnimate/windowAnimate.vue";
 import windrectAnimate from "../windrectAnimate/windrectAnimate.vue";
-import fanlocalAnimate from "../fanlocalAnimate/fanlocalAnimate.vue";
+import fanlocalAnimate from "../fanlocalAnimate/fanlocalAnimate2.vue";
 export default {
   data() {
     return {
@@ -252,7 +270,9 @@ export default {
       windowArea: "", //风窗面积设定值
       viedeoUrl: "", //监控url
 	  sign:"",
-	  title:"测风设备"
+	  title:"测风设备",
+	  fan1State:'',
+	  fan2State:''
     };
   },
   onLoad(query) {
@@ -319,30 +339,38 @@ export default {
         api
           .getDeviceMonitor({ devicetype: this.TabCur, ids: IDString })
           .then((response) => {
-            if (response.data.code == 200) {
+            if (response.data.code == 200 && response.data.result.msgTxt[0].datalist.length>0) {
+				var result = response.data.result.msgTxt[0].datalist[0];
               this.tableData =
-                response.data.result.msgTxt[0].datalist[0].readData;
+                result.readData;
               if (this.tableData.frontGateOpen == "1") {
                 this.tableData.frontGateOpen = "打开";
               } else {
                 this.tableData.frontGateOpen = "关闭";
               }
+              if (this.tableData.midGateOpen == "1") {
+                this.tableData.midGateOpen = "打开";
+              } else {
+                this.tableData.midGateOpen = "关闭";
+              }
               if (this.tableData.rearGateOpen == "1") {
                 this.tableData.rearGateOpen = "打开";
               } else {
                 this.tableData.rearGateOpen = "关闭";
               }
+			  this.fan1State = result.readData.Fan1StartStatus
+			  this.fan2State = result.readData.Fan2StartStatus
               this.nwindownum =
-                response.data.result.msgTxt[0].datalist[0].nwindownum;
+                result.nwindownum;
               this.ndoorcount =
-                response.data.result.msgTxt[0].datalist[0].ndoorcount;
+                result.ndoorcount;
               this.deviceType =
-                response.data.result.msgTxt[0].datalist[0].deviceType;
+                result.deviceType;
               this.state =
-                response.data.result.msgTxt[0].datalist[0].readData.sign;
+                result.readData.sign;
               this.frontGateStatus = this.tableData.frontGateOpen;
               this.rearGateStatus = this.tableData.rearGateOpen;
-              var maxarea = response.data.result.msgTxt[0].datalist[0].maxarea;
+              var maxarea = result.maxarea;
               this.windowAngle =
                 (this.tableData.forntArea / maxarea) * 100 * 0.9;
               this.windowAngle1 =
@@ -419,7 +447,7 @@ export default {
       this.ctrlDevice(this.password);
       // 发起请求后关闭密码输入弹窗
       this.show = false;
-    },
+    }
   },
   destroyed() {
     // 停止定时器

pages/home/detail/fanlocalAnimate/fanlocalAnimate.vue

@@ -1,8 +1,1053 @@
 <template>
+  <view style="width: 100%; height: 100%">
+    <div class="pageback">
+    <div class="ventilate" id="topPic">
+      <!-- 进风箭头 -->
+      <div :class="nowfengji == '2'?'arrow1':nowfengji == '1'?'arrow1-fan1':''" id="arrow1"></div>
+      <div :class="nowfengji == '2'?'arrow2':nowfengji == '1'?'arrow2-fan1':''" id="arrow2"></div>
+      <div :class="nowfengji == '2'?'arrow3':nowfengji == '1'?'arrow3-fan1':''" id="arrow3"></div>
+      <div :class="nowfengji == '2'?'arrow4':nowfengji == '1'?'arrow4-fan1':''" id="arrow4"></div>
+      <div :class="nowfengji == '2'?'arrow5':nowfengji == '1'?'arrow5-fan1':''" id="arrow5"></div>
+      <div :class="nowfengji == '2'?'arrow6':nowfengji == '1'?'arrow6-fan1':''" id="arrow6"></div>
+      <div :class="nowfengji == '2'?'arrow7':nowfengji == '1'?'arrow7-fan1':''" id="arrow7"></div>
+      <div :class="nowfengji == '2'?'arrow8':nowfengji == '1'?'arrow8-fan1':''" id="arrow8"></div>
+      <div :class="nowfengji == '2'?'arrow9':nowfengji == '1'?'arrow9-fan1':''" id="arrow9"></div>
+      <div :class="nowfengji == '2'?'arrow10':nowfengji == '1'?'arrow10-fan1':''" id="arrow10"></div>
+      <!-- 回风箭头 -->
+      <div class="arrow101" id="arrow101" v-show="nowfengji != ''"></div>
+      <div class="arrow102" id="arrow102" v-show="nowfengji != ''"></div>
+      <div class="arrow103" id="arrow103" v-show="nowfengji != ''"></div>
+      <div class="arrow104" id="arrow104" v-show="nowfengji != ''"></div>
+      <div class="arrow105" id="arrow105" v-show="nowfengji != ''"></div>
+      <div class="arrow106" id="arrow106" v-show="nowfengji != ''"></div>
+      <!-- <div class="arrow107" id="arrow107"></div>
+      <div class="arrow108" id="arrow108"></div>-->
+      <!-- 回风 -->
+      <div class="arrow201" id="arrow201"></div>
+      <div class="arrow202" id="arrow202"></div>
+      <div class="arrow203" id="arrow203"></div>
+      <div class="arrow204" id="arrow204"></div>
+      <div class="arrow205" id="arrow205"></div>
+      <div
+        style="color:#fff;font-size:14px;position:absolute;top:12%;left:80%;width:auto;height:60px"
+        @click="fanclick(1)"
+      >
+        <span>主风机</span>
+      </div>
+      <div
+        style="color:#fff;font-size:14px;position:absolute;top:16%;left:80%;width:auto;height:60px"
+        @click="fanclick(2)"
+      >
+        <span>备用风机</span>
+      </div>
+      <!-- 风扇动画展示 -->
+      <div class="box2" style="top: 12.8%;right: 29%;" @click="fanclick(1)">
+        <div id="box2">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+      <div class="box" style="top: 15.5%;right: 29%;" @click="fanclick(2)">
+        <div id="box1">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+    </div>
+  </div>
+  </view>
 </template>
 
 <script>
+export default {
+  data() {
+    return {
+      fengliangUp: "", // 风量上限
+      fengliangDown: "", // 风量下限
+      controTypeName: "变频器频率",
+      // 界面风机动画
+
+      // 控制类型 1 变频器频率 2 需风量
+      controlType: "1",
+      loading: "", // 数据加载
+      yMax1: 100,
+      yMax2: 10,
+      yMax3: 1000,
+      textColor: "#000",
+      option1: {},
+      readData: {},
+      nowfengji: "1"
+    };
+  },
+  props: {
+    mainFanText: {
+      type: String,
+      default: "主风机",
+    },
+    subFanText: {
+      type: String,
+      default: "备风机",
+    },
+  },
+  methods: {
+	  
+	      setnowfengji(val) {
+	        if (this.nowfengji != val) {
+	          this.nowfengji = val;
+	          this.setFengjiDonghua();
+	        }
+	      },
+	      fanclick(val) {
+	        this.$emit("fanclick", val);
+	      },
+	      setFengjiDonghua() {
+	        if (this.nowfengji == "2") {
+	          document.getElementById("box1").style.animationPlayState = "running";
+	          document.getElementById("box1").style.WebkitAnimationPlayState =
+	            "running";
+	  
+	          document.getElementById("box2").style.animationPlayState = "paused";
+	          document.getElementById("box2").style.WebkitAnimationPlayState =
+	            "paused";
+	        } else if (this.nowfengji == "1") {
+	          document.getElementById("box2").style.animationPlayState = "running";
+	          document.getElementById("box2").style.WebkitAnimationPlayState =
+	            "running";
+	          document.getElementById("box1").style.animationPlayState = "paused";
+	          document.getElementById("box1").style.WebkitAnimationPlayState =
+	            "paused";
+	        } else {
+	          document.getElementById("box2").style.animationPlayState = "paused";
+	          document.getElementById("box2").style.WebkitAnimationPlayState =
+	            "paused";
+	          document.getElementById("box1").style.animationPlayState = "paused";
+	          document.getElementById("box1").style.WebkitAnimationPlayState =
+	            "paused";
+	        }
+	      }
+  },
+  watch: {
+  },
+  onLoad(query) {
+    this.setFengjiDonghua();
+	},
+};
 </script>
 
-<style>
+<style scoped>
+div.pageback {
+  padding-top:10px;
+  margin-top: 12px;
+  width: 100%;
+  height: calc(80% - 50px);
+  min-height: 350px;
+  background-image: url(../../../../static/fan/page-back.png);
+  background-size: 100% 100%;
+}
+div.ventilate {
+  min-width: 300px;
+  width: 60%;
+  margin-left:10%;
+  height: 80%;
+  height: calc(80% - 120px);
+  min-height: 330px;
+  background-image: url(../../../../static/fan/localfan-back.png);
+  background-size: 100% 100%;
+}
+div.arrow1,
+div.arrow2,
+div.arrow3,
+div.arrow4,
+div.arrow5,
+div.arrow6,
+div.arrow7,
+div.arrow8,
+div.arrow9,
+div.arrow10,
+div.arrow1-fan1,
+div.arrow2-fan1,
+div.arrow3-fan1,
+div.arrow4-fan1,
+div.arrow5-fan1,
+div.arrow6-fan1,
+div.arrow7-fan1,
+div.arrow8-fan1,
+div.arrow9-fan1,
+div.arrow10-fan1 {
+  position: absolute;
+  right: 40px;
+  opacity: 0;
+  top: 96px;
+  width: 30px;
+  height: 15px;
+  box-sizing: border-box;
+  float: right;
+  z-index: 1;
+  transition: all 2s ease;
+  background-image: url(../../../../static/fan/arrow-in.png);
+  background-size: 100% 100%;
+}
+div.arrow101,
+div.arrow102,
+div.arrow103,
+div.arrow104,
+div.arrow105,
+div.arrow106,
+div.arrow107,
+div.arrow108 {
+  position: absolute;
+  right: 70px;
+  opacity: 0;
+  top: 516px;
+  width: 30px;
+  height: 13px;
+  box-sizing: border-box;
+  float: right;
+  z-index: 1;
+  transition: all 2s ease;
+  background-image: url(../../../../static/fan/arrow-out.png);
+  background-size: 100% 100%;
+}
+div.arrow201,
+div.arrow202,
+div.arrow203,
+div.arrow204,
+div.arrow205 {
+  position: absolute;
+  right: 0px;
+  opacity: 0;
+  top: 30px;
+  width: 45px;
+  height: 23px;
+  box-sizing: border-box;
+  float: right;
+  z-index: 10;
+  transition: all 2s ease;
+  background-image: url(../../../../static/fan/arrow-in.png);
+  background-size: 100% 100%;
+}
+</style>
+<style scoped>
+.arrow1 {
+  position: relative;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+}
+
+@keyframes myfirst1 {
+  0% {
+    right: 10%;
+    top: 16%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  10% {
+    right: 33%;
+    top: 16%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  11% {
+    right: 34%;
+    top: 15%;
+    -webkit-transform: rotate(40deg);
+    opacity: 1;
+  }
+  14% {
+    right: 40%;
+    top: 13%;
+    -webkit-transform: rotate(40deg);
+    opacity: 1;
+  }
+  15% {
+    right: 41%;
+    top: 13%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  22% {
+    right: 60%;
+    top: 13%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  23% {
+    right: 60.5%;
+    top: 14%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 60.5%;
+    top: 91%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 60.5%;
+    top: 93%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes myfirst1 /* Safari 和 Chrome */ {
+  0% {
+    right: 10%;
+    top: 16%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  10% {
+    right: 33%;
+    top: 16%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  11% {
+    right: 34%;
+    top: 15%;
+    -webkit-transform: rotate(30deg);
+    opacity: 1;
+  }
+  14% {
+    right: 40%;
+    top: 12%;
+    -webkit-transform: rotate(30deg);
+    opacity: 1;
+  }
+  15% {
+    right: 41%;
+    top: 12%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  22% {
+    right: 60%;
+    top: 12%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  23% {
+    right: 60.5%;
+    top: 13%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 60.5%;
+    top: 91%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 60.5%;
+    top: 93%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+.arrow2 {
+  position: relative;
+  animation-delay: -18s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.arrow3 {
+  position: relative;
+  animation-delay: -16s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.arrow4 {
+  position: relative;
+  animation-delay: -14s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.arrow5 {
+  position: relative;
+  animation-delay: -12s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.arrow6 {
+  position: relative;
+  animation-delay: -10s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.arrow7 {
+  position: relative;
+  animation-delay: -8s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.arrow8 {
+  position: relative;
+  animation-delay: -6s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.arrow9 {
+  position: relative;
+  animation-delay: -4s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.arrow10 {
+  position: relative;
+  animation-delay: -2s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+</style>
+
+<style scoped>
+.arrow101 {
+  position: relative;
+  animation-delay: -10s;
+  animation: myfirst101 12s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst101 12s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+@keyframes myfirst101 {
+  0% {
+    right: 62.5%;
+    top: 94%;
+    -webkit-transform: rotate(-180deg);
+    opacity: 1;
+  }
+  15% {
+    right: 73%;
+    top: 94%;
+    -webkit-transform: rotate(-180deg);
+    opacity: 1;
+  }
+  17% {
+    right: 73%;
+    top: 93%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  62% {
+    right: 73%;
+    top: 57%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  64% {
+    right: 73%;
+    top: 55%;
+    -webkit-transform: rotate(-180deg);
+    opacity: 1;
+  }
+  66% {
+    right: 74%;
+    top: 55%;
+    -webkit-transform: rotate(-180deg);
+    opacity: 1;
+  }
+  90% {
+    right: 93%;
+    top: 55%;
+    -webkit-transform: rotate(-180deg);
+    opacity: 1;
+  }
+  100% {
+    right: 98%;
+    top: 55%;
+    -webkit-transform: rotate(-180deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes myfirst101 /* Safari 和 Chrome */ {
+  0% {
+    right: 62.5%;
+    top: 94%;
+    -webkit-transform: rotate(-180deg);
+    opacity: 1;
+  }
+  15% {
+    right: 73%;
+    top: 94%;
+    -webkit-transform: rotate(-180deg);
+    opacity: 1;
+  }
+  17% {
+    right: 73%;
+    top: 93%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  62% {
+    right: 73%;
+    top: 57%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  64% {
+    right: 73%;
+    top: 55%;
+    -webkit-transform: rotate(-180deg);
+    opacity: 1;
+  }
+  66% {
+    right: 74%;
+    top: 55%;
+    -webkit-transform: rotate(-180deg);
+    opacity: 1;
+  }
+  90% {
+    right: 93%;
+    top: 55%;
+    -webkit-transform: rotate(-180deg);
+    opacity: 1;
+  }
+  100% {
+    right: 98%;
+    top: 55%;
+    -webkit-transform: rotate(-180deg);
+    opacity: 0;
+  }
+}
+
+.arrow102 {
+  position: relative;
+  animation-delay: -8s;
+  animation: myfirst101 12s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst101 12s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+.arrow103 {
+  position: relative;
+  animation-delay: -6s;
+  animation: myfirst101 12s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst101 12s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+.arrow104 {
+  position: relative;
+  animation-delay: -4s;
+  animation: myfirst101 12s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst101 12s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+.arrow105 {
+  position: relative;
+  animation-delay: -2s;
+  animation: myfirst101 12s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst101 12s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+.arrow106 {
+  position: relative;
+  animation-delay: 0s;
+  animation: myfirst101 12s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst101 12s infinite linear;
+  -webkit-animation-delay: 0s;
+}
+</style>
+<style scoped>
+.arrow1-fan1 {
+  position: relative;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+}
+
+@keyframes myfirst1-fan1 {
+  0% {
+    right: 10%;
+    top: 10%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  10% {
+    right: 33%;
+    top: 10%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  11% {
+    right: 34%;
+    top: 11%;
+    -webkit-transform: rotate(-40deg);
+    opacity: 1;
+  }
+  14% {
+    right: 40%;
+    top: 13%;
+    -webkit-transform: rotate(-40deg);
+    opacity: 1;
+  }
+  15% {
+    right: 41%;
+    top: 13%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  22% {
+    right: 60%;
+    top: 13%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  23% {
+    right: 60.5%;
+    top: 14%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 60.5%;
+    top: 89%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 60.5%;
+    top: 91%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes myfirst1-fan1 /* Safari 和 Chrome */ {
+  0% {
+    right: 10%;
+    top: 10%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  10% {
+    right: 33%;
+    top: 10%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  11% {
+    right: 34%;
+    top: 11%;
+    -webkit-transform: rotate(-40deg);
+    opacity: 1;
+  }
+  14% {
+    right: 40%;
+    top: 13%;
+    -webkit-transform: rotate(-40deg);
+    opacity: 1;
+  }
+  15% {
+    right: 41%;
+    top: 13%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  22% {
+    right: 60%;
+    top: 13%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  23% {
+    right: 60.5%;
+    top: 14%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 60.5%;
+    top: 89%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 60.5%;
+    top: 91%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+.arrow2-fan1 {
+  position: relative;
+  animation-delay: -18s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.arrow3-fan1 {
+  position: relative;
+  animation-delay: -16s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.arrow4-fan1 {
+  position: relative;
+  animation-delay: -14s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.arrow5-fan1 {
+  position: relative;
+  animation-delay: -12s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.arrow6-fan1 {
+  position: relative;
+  animation-delay: -10s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.arrow7-fan1 {
+  position: relative;
+  animation-delay: -8s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.arrow8-fan1 {
+  position: relative;
+  animation-delay: -6s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.arrow9-fan1 {
+  position: relative;
+  animation-delay: -4s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.arrow10-fan1 {
+  position: relative;
+  animation-delay: -2s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
 </style>
+
+<style scoped>
+.arrow201 {
+  position: relative;
+  animation-delay: -8s;
+  animation: myfirst201 10s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst201 10s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+@keyframes myfirst201 {
+  0% {
+    right: 0px;
+    top: 90px;
+    -webkit-transform: rotate(0deg);
+    opacity: 0;
+  }
+  2% {
+    right: 10px;
+    top: 90px;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 530px;
+    top: 90px;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    right: 570px;
+    top: 90px;
+    -webkit-transform: rotate(0deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes myfirst201 /* Safari 和 Chrome */ {
+  0% {
+    right: 0px;
+    top: 90px;
+    -webkit-transform: rotate(0deg);
+    opacity: 0;
+  }
+  2% {
+    right: 10px;
+    top: 90px;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 530px;
+    top: 90px;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    right: 570px;
+    top: 90px;
+    -webkit-transform: rotate(0deg);
+    opacity: 0;
+  }
+}
+.arrow202 {
+  position: relative;
+  animation-delay: -6s;
+  animation: myfirst201 10s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst201 10s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.arrow203 {
+  position: relative;
+  animation-delay: -4s;
+  animation: myfirst201 10s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst201 10s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.arrow204 {
+  position: relative;
+  animation-delay: -2s;
+  animation: myfirst201 10s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst201 10s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+
+.arrow205 {
+  position: relative;
+  animation-delay: -0.1s;
+  animation: myfirst201 10s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst201 10s infinite linear;
+  -webkit-animation-delay: -0.1s;
+}
+</style>
+<style scoped>
+.box,
+.box2 {
+  position: absolute;
+  transform: perspective(1000px) rotateY(-70deg);
+  width: 5px;
+  height: 15px;
+  transform-style: preserve-3d;
+}
+.box::before,
+.box2::before {
+  content: "";
+  position: absolute;
+  bottom: -20px;
+  left: 0;
+  width: 100%;
+  height: 10px;
+  background: #000;
+  filter: blur(10px);
+  opacity: 0.5;
+  transform: rotateX(90deg);
+}
+.box div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  animation: animate 5s linear infinite;
+}
+.box2 div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  animation: animate 5s linear infinite;
+  animation-play-state: paused;
+  -webkit-animation-play-state: paused;
+}
+.box div span,
+.box2 div span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(0deg, #f1f1f1, #999, #f1f1f1);
+  border-radius: 5px;
+}
+
+.box div span:nth-child(1),
+.box2 div span:nth-child(1) {
+  transform: rotateX(0deg);
+}
+.box div span:nth-child(2),
+.box2 div span:nth-child(2) {
+  transform: rotateX(45deg);
+}
+.box div span:nth-child(3),
+.box2 div span:nth-child(3) {
+  transform: rotateX(-45deg);
+}
+.box div span:nth-child(4),
+.box2 div span:nth-child(4) {
+  transform: rotateX(90deg);
+}
+@keyframes animate {
+  0% {
+    transform: perspective(1000px) rotateX(0deg);
+  }
+  100% {
+    transform: perspective(1000px) rotateX(359deg);
+  }
+}
+</style>
+<style scoped>
+.localT1 {
+  position: absolute;
+  width: 70px;
+}
+.localT1 div:nth-child(1) {
+  float: left;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  background: #1515e9;
+  font-size: 12px;
+  font-weight: 100;
+  color: #fff;
+  border: 1px solid #000;
+  box-shadow: #1515e9 0px 0px 10px;
+}
+.localT1 div:nth-child(2) {
+  float: left;
+  width: 40px;
+  height: 20px;
+  padding-top: 3px;
+  text-align: center;
+  background: #fd1f0f;
+  font-size: 10px;
+  font-weight: 300;
+  color: #fff;
+  border: 1px solid rgb(124, 80, 80);
+  box-shadow: #fd1f0f 0px 0px 10px;
+}
+.localF1 {
+  position: absolute;
+  width: 62px;
+}
+.localF1 div:nth-child(1) {
+  float: left;
+  width: 17px;
+  height: 19px;
+  padding: 2px;
+  background: #a9a9e6;
+  font-size: 12px;
+  font-weight: 100;
+  color: #fff;
+  border: 1px solid #000;
+  box-shadow: #a9a9e6 0px 0px 10px;
+}
+.localF1 div:nth-child(2) {
+  float: left;
+  width: 35px;
+  height: 20px;
+  padding-top: 3px;
+  text-align: center;
+  background: #16f179;
+  font-size: 10px;
+  font-weight: 300;
+  color: #fff;
+  border: 1px solid rgb(118, 153, 108);
+  box-shadow: #16f179 0px 0px 10px;
+}
+
+.imgF2 {
+  top: 80%;
+  right: 62%;
+  position: absolute;
+  width: 20px;
+  height: 4px;
+  background: #f80404;
+  border: 1px solid rgb(182, 85, 85);
+  box-shadow: #f80404 0px 0px 10px;
+}
+.imgF1 {
+  top: 12.5%;
+  right: 53%;
+  position: absolute;
+  height: 18px;
+  width: 4px;
+  background: #f80404;
+  border: 1px solid rgb(182, 85, 85);
+  box-shadow: #f80404 0px 0px 10px;
+}
+</style>

pages/home/detail/fanlocalAnimate/fanlocalAnimate2.vue

@@ -0,0 +1,602 @@
+<template>
+  <view style="width: 100%; height: 100%">
+   <div class="ventilate" id="topPic">
+            <!-- 进风箭头 -->
+            <div :class="nowfengji == '2'?'arrow1':nowfengji == '1'?'arrow1-fan1':''" id="arrow1"></div>
+            <div :class="nowfengji == '2'?'arrow2':nowfengji == '1'?'arrow2-fan1':''" id="arrow2"></div>
+            <div :class="nowfengji == '2'?'arrow3':nowfengji == '1'?'arrow3-fan1':''" id="arrow3"></div>
+            <div :class="nowfengji == '2'?'arrow4':nowfengji == '1'?'arrow4-fan1':''" id="arrow4"></div>
+            <div :class="nowfengji == '2'?'arrow5':nowfengji == '1'?'arrow5-fan1':''" id="arrow5"></div>
+            <div :class="nowfengji == '2'?'arrow6':nowfengji == '1'?'arrow6-fan1':''" id="arrow6"></div>
+            <div :class="nowfengji == '2'?'arrow7':nowfengji == '1'?'arrow7-fan1':''" id="arrow7"></div>
+            <div :class="nowfengji == '2'?'arrow8':nowfengji == '1'?'arrow8-fan1':''" id="arrow8"></div>
+            <div :class="nowfengji == '2'?'arrow9':nowfengji == '1'?'arrow9-fan1':''" id="arrow9"></div>
+            <div :class="nowfengji == '2'?'arrow10':nowfengji == '1'?'arrow10-fan1':''" id="arrow10"></div>
+          
+           <div style="top:14%;left:18%" v-if="nowfengji == '1'" class="devfan1"></div>
+           <div style="top:14%;left:27.5%" v-if="nowfengji == '1'" class="devfan1"></div>
+           <div style="bottom:13%;left:18%" v-if="nowfengji == '2'" class="devfan1"></div>
+           <div style="bottom:13%;left:27.5%" v-if="nowfengji == '2'" class="devfan1"></div>
+
+            <div style="top:3%;left:9%"  class="state1" v-if="nowfengji == '1'" >运行</div>
+            <div style="top:3%;left:9%"  class="state2" v-else>停止</div>
+            
+            <div style="top:3%;left:34%"  class="state1" v-if="nowfengji == '1'" >运行</div>
+            <div style="top:3%;left:34%"  class="state2" v-else>停止</div>
+
+            
+            <div style="bottom:25%;left:9%"  class="state1" v-if="nowfengji == '2'" >运行</div>
+            <div style="bottom:25%;left:9%"  class="state2" v-else>停止</div>
+            
+            <div style="bottom:25%;left:34%"  class="state1" v-if="nowfengji == '2'" >运行</div>
+            <div style="bottom:25%;left:34%"  class="state2" v-else>停止</div>
+
+
+           <div style="top:17%;right:41%"  class="textshow">主风机</div>
+           <div style="bottom:15%;right:41%"  class="textshow">备风机</div>
+           
+           <div style="top:32%;left:6%"  class="textshow2">前级电机</div>
+           <div style="top:32%;left:34%"  class="textshow2">后级电机</div>
+           <div style="bottom:-2%;left:6%"  class="textshow2">前级电机</div>
+           <div style="bottom:-2%;left:34%"  class="textshow2">后级风机</div>
+    </div>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      nowfengji: ""
+    };
+  },
+  props: {
+    mainFanText: {
+      type: String,
+      default: "主风机",
+    },
+    subFanText: {
+      type: String,
+      default: "备风机",
+    },
+	fan1State: {
+      type: String,
+      default: "",
+    },
+	fan2State: {
+      type: String,
+      default: "",
+    },
+  },
+  methods: {
+	  
+	      setnowfengji(val) {
+	        if (this.nowfengji != val) {
+	          this.nowfengji = val;
+	          this.setFengjiDonghua();
+	        }
+	      },
+	      setFengjiDonghua() {
+	        if (this.nowfengji == "2") {
+	        } else if (this.nowfengji == "1") {
+	        } else {
+	        }
+	      },
+		  setNowStart(){
+			  		  if(this.fan1State=="1"){
+			  			  this.nowfengji = "1"
+			  		  }
+			  		  else if(this.fan2State=="1"){
+			  			  this.nowfengji = "2"
+			  		  }
+			  		  else{
+			  			  this.nowfengji = ""
+			  		  }
+		  }
+  },
+  watch:{
+	  fan1State(val){
+		  this.setNowStart()
+	  },
+	  fan2State(val){
+		  this.setNowStart()
+	  }
+  },
+  onLoad(query) {
+    this.setFengjiDonghua();
+	},
+};
+</script>
+
+<style scoped>
+div.ventilate {
+  width: 100%;
+  height:200px;
+  min-height: 200px;
+  min-width: 300px;
+  background-image: url(../../../../static/fan/fan.png);
+  background-size: 100% 100%;
+  perspective: 800px;
+}
+.state1{
+  position: absolute;
+  z-index: 2;
+  width:8%;
+  height: 14px;
+  padding-bottom: 5px;
+  padding-left: 3px;
+  background-color: rgba(78, 155, 1, 0.438);
+  border:none;
+  color: rgb(255, 255, 255);
+  font-size: 12px;
+}
+.state2{
+  position: absolute;
+  z-index: 2;
+  width:8%;
+  height: 14px;
+  padding-bottom: 5px;
+  padding-left: 3px;
+  background-color: rgba(167, 42, 11, 0.5);
+  border:none;
+  color: rgb(206, 206, 212);
+  font-size: 12px;
+}
+.textshow{
+  position: absolute;
+  z-index: 2;
+  color: rgb(20, 19, 19);
+  font-size: 16px;
+}
+.textshow2{
+  position: absolute;
+  z-index: 2;
+  color: rgb(100, 106, 136);
+  font-size: 14px;
+}
+.devfan1,
+.devfan2{
+  position: absolute !important;
+  z-index: 2;
+  min-width: 20px;
+  min-height: 20px;
+  height: 22px;
+  width:22px;
+  background-image: url(../../../../static/fan/devFan.png);
+  background-size: 100% 100%;
+}
+
+.devfan1 {
+  position: relative;
+  animation: rotate1 3s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: rotate1 3s infinite linear;
+}
+
+@keyframes rotate1 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    opacity:1;
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    opacity: 1;
+  }
+}
+div.arrow1,
+div.arrow2,
+div.arrow3,
+div.arrow4,
+div.arrow5,
+div.arrow6,
+div.arrow7,
+div.arrow8,
+div.arrow9,
+div.arrow10,
+div.arrow1-fan1,
+div.arrow2-fan1,
+div.arrow3-fan1,
+div.arrow4-fan1,
+div.arrow5-fan1,
+div.arrow6-fan1,
+div.arrow7-fan1,
+div.arrow8-fan1,
+div.arrow9-fan1,
+div.arrow10-fan1 {
+  position: absolute;
+  right: 40px;
+  opacity: 0;
+  top: 96px;
+  width: 30px;
+  height: 15px;
+  box-sizing: border-box;
+  float: right;
+  z-index: 1;
+  transition: all 2s ease;
+  background-image: url(../../../../static/fan/arrow-in.png);
+  background-size: 100% 100%;
+}
+</style>
+<style scoped>
+.arrow1 {
+  position: relative;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+}
+
+@keyframes myfirst1 {
+  0% {
+    left: -5%;
+    top: 80%;
+    -webkit-transform: rotate(180deg);
+    opacity: 0;
+  }
+  3% {
+    left: 0%;
+    top: 80%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  71% {
+    left: 75%;
+    top: 80%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  72% {
+    left: 76%;
+    top: 78%;
+    -webkit-transform: rotate(135deg);
+    opacity: 1;
+  }
+  85% {
+    left: 85%;
+    top: 53%;
+    -webkit-transform: rotate(135deg);
+    opacity: 1;
+  }
+  86% {
+    left: 86%;
+    top: 50%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  99% {
+    left: 99%;
+    top: 50%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    top: 50%;
+    -webkit-transform: rotate(180deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes myfirst1 /* Safari 和 Chrome */ {
+  0% {
+    left: -5%;
+    top: 80%;
+    -webkit-transform: rotate(180deg);
+    opacity: 0;
+  }
+  3% {
+    left: 0%;
+    top: 80%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  71% {
+    left: 75%;
+    top: 80%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  72% {
+    left: 76%;
+    top: 78%;
+    -webkit-transform: rotate(135deg);
+    opacity: 1;
+  }
+  85% {
+    left: 85%;
+    top: 53%;
+    -webkit-transform: rotate(135deg);
+    opacity: 1;
+  }
+  86% {
+    left: 86%;
+    top: 50%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  99% {
+    left: 99%;
+    top: 50%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    top: 50%;
+    -webkit-transform: rotate(180deg);
+    opacity: 0;
+  }
+}
+
+.arrow2 {
+  position: relative;
+  animation-delay: -18s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.arrow3 {
+  position: relative;
+  animation-delay: -16s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.arrow4 {
+  position: relative;
+  animation-delay: -14s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.arrow5 {
+  position: relative;
+  animation-delay: -12s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.arrow6 {
+  position: relative;
+  animation-delay: -10s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.arrow7 {
+  position: relative;
+  animation-delay: -8s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.arrow8 {
+  position: relative;
+  animation-delay: -6s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.arrow9 {
+  position: relative;
+  animation-delay: -4s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.arrow10 {
+  position: relative;
+  animation-delay: -2s;
+  animation: myfirst1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+</style>
+
+<style scoped>
+.arrow1-fan1 {
+  position: relative;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+}
+
+@keyframes myfirst1-fan1 {
+  0% {
+    left: -5%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 0;
+  }
+  3% {
+    left: 0%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  71% {
+    left: 75%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  72% {
+    left: 76%;
+    top: 22%;
+    -webkit-transform: rotate(225deg);
+    opacity: 1;
+  }
+  85% {
+    left: 85%;
+    top: 47%;
+    -webkit-transform: rotate(225deg);
+    opacity: 1;
+  }
+  86% {
+    left: 86%;
+    top: 50%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  99% {
+    left: 99%;
+    top: 50%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    top: 50%;
+    -webkit-transform: rotate(180deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes myfirst1-fan1 /* Safari 和 Chrome */ {
+  0% {
+    left: -5%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 0;
+  }
+  3% {
+    left: 0%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  71% {
+    left: 75%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  72% {
+    left: 76%;
+    top: 22%;
+    -webkit-transform: rotate(225deg);
+    opacity: 1;
+  }
+  85% {
+    left: 85%;
+    top: 47%;
+    -webkit-transform: rotate(225deg);
+    opacity: 1;
+  }
+  86% {
+    left: 86%;
+    top: 50%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  99% {
+    left: 99%;
+    top: 50%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    top: 50%;
+    -webkit-transform: rotate(180deg);
+    opacity: 0;
+  }
+}
+
+.arrow2-fan1 {
+  position: relative;
+  animation-delay: -18s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.arrow3-fan1 {
+  position: relative;
+  animation-delay: -16s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.arrow4-fan1 {
+  position: relative;
+  animation-delay: -14s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.arrow5-fan1 {
+  position: relative;
+  animation-delay: -12s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.arrow6-fan1 {
+  position: relative;
+  animation-delay: -10s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.arrow7-fan1 {
+  position: relative;
+  animation-delay: -8s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.arrow8-fan1 {
+  position: relative;
+  animation-delay: -6s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.arrow9-fan1 {
+  position: relative;
+  animation-delay: -4s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.arrow10-fan1 {
+  position: relative;
+  animation-delay: -2s;
+  animation: myfirst1-fan1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirst1-fan1 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+</style>

pages/home/firstmodel.vue

@@ -1,369 +1,368 @@
 <template>
-  <view class="container">
-    <!-- 建议放在外层 -->
-    <u-navbar
-      title="设备监测"
-      @leftClick="devicemenuShow"
-      :safeAreaInsetTop="false"
-    >
-      <view class="u-nav-slot" slot="left">
-        <u-icon name="list" size="20"> </u-icon>
-      </view>
-    </u-navbar>
+	<view class="container">
+		<!-- 建议放在外层 -->
+		<u-navbar title="设备监测" @leftClick="devicemenuShow" :safeAreaInsetTop="false">
+			<view class="u-nav-slot" slot="left">
+				<u-icon name="list" size="20"> </u-icon>
+			</view>
+		</u-navbar>
 
-    <view v-show="menushow" class="menupage">
-      <DeviceMenu @menuClick="menuClick"></DeviceMenu>
-    </view>
+		<view v-show="menushow" class="menupage">
+			<DeviceMenu @menuClick="menuClick"></DeviceMenu>
+		</view>
 
-    <view v-show="!menushow" class="main">
-      <view class="u-page">
-        <u-list>
-          <u-list-item
-            class="itemback"
-            v-for="(item, index) in curlist"
-            :key="index"
-          >
-            <div @tap="openNewPage(item)">
-              <u-row gutter="5" customStyle="margin-bottom: 10px">
-                <u-col span="24">
-                  <u--text :text="item.strinstallpos"></u--text>
-                </u-col>
-              </u-row>
-              <u-row gutter="5" customStyle="margin-bottom: 10px">
-                <u-col span="2" style="margin-right: 15rpx">
-                  <div v-if="item.netStatus == 0" class="error-tag1">
-                    <img
-                      src="'../../../../static/model/connectFalse.svg "
-                      alt=""
-                      class="icon-style"
-                    />
-                    <span style="float: right">断开</span>
-                  </div>
-                  <div v-else class="success-tag">
-                    <img
-                      src="'../../../../static/model/connectTrue.svg "
-                      alt=""
-                      class="icon-style"
-                    />
-                    <span style="float: right">连接</span>
-                  </div>
-                </u-col>
-                <u-col span="2">
-                  <div v-if="item.warnFlag == 0" class="success-tag">
-                    <img
-                      src="'../../../../static/model/alarmTrue.svg "
-                      alt=""
-                      class="icon-style"
-                    />
-                    <span style="float: right">{{ item.warnLevel_str }}</span>
-                  </div>
-                  <div v-else class="error-tag">
-                    <img
-                      src="'../../../../static/model/alarmFalse.svg "
-                      alt=""
-                      class="icon-style"
-                    />
-                    <span style="float: right">{{ item.warnLevel_str }}</span>
-                  </div>
-                </u-col>
-                <u-col span="3"> </u-col>
-                <u-col span="5">
-                  <u--text class="timetext" :text="item.readTime"></u--text>
-                </u-col>
-              </u-row>
-              <view v-if="colums[TabCur + '_monitor'] != null">
-                <view
-                  class="datacard"
-                  v-for="(showitem, index) in colums[TabCur + '_monitor']"
-                  :key="index"
-                  v-show="showitem.appShow == 1"
-                >
-                  <view
-                    class="content"
-                    :style="{
-                      backgroundImage:
-                        showitem.monitorcode === 'frontRearDP' ||
-                        showitem.monitorcode === 'frontRearDifference'
-                          ? 'url(\'../../../../static/model/Pa.png\')'
-                          : showitem.monitorcode === 'sourcePressure'
-                          ? 'url(\'../../../../static/model/MPa.png\')'
-                          : showitem.monitorcode === 'frontGateOpen'
-                          ? 'url(\'../../../../static/model/doorNet.png\')'
-                          : showitem.monitorcode === 'rearGateOpen'
-                          ? 'url(\'../../../../static/model/doorNet.png\')'
-                          : showitem.monitorcode === 'warnFlag'
-                          ? 'url(\'../../../../static/model/9432.png\')'
-                          : showitem.monitorcode === 'netStatus'
-                          ? 'url(\'../../../../static/model/9431.png\')'
-                          : showitem.monitorcode === 'm3'
-                          ? 'url(\'../../../../static/model/windM3.png\')'
-                          : showitem.monitorcode === 'fsectarea'
-                          ? 'url(\'../../../../static/model/duanArea.png\')'
-                          : showitem.monitorcode === 'incipientWindSpeed1' ||
-                            showitem.monitorcode === 'incipientWindSpeed2' ||
-                            showitem.monitorcode === 'incipientWindSpeed3' ||
-                            showitem.monitorcode === 'va'
-                          ? 'url(\'../../../../static/model/fengsu.png\')'
-                          : 'url(\'\')',
-                      backgroundSize: '100% 100%',
-                    }"
-                  >
-                    <view
-                      v-show="
+		<view v-show="!menushow" class="main">
+			<view class="u-page">
+				<u-list>
+					<u-list-item class="itemback" v-for="(item, index) in curlist" :key="index">
+						<div @tap="openNewPage(item)">
+							<u-row gutter="5" customStyle="margin-bottom: 10px">
+								<u-col span="24">
+
+									<img style="position: absolute;width: 35rpx;height:35rpx;" class="icon"
+										:src="getIcon(TabCur)" alt="Icon" />
+									<span class="title">{{item.strinstallpos}}</span>
+								</u-col>
+							</u-row>
+							<u-row gutter="5" customStyle="margin-bottom: 10px">
+								<u-col span="3" style="margin-right: 5rpx">
+									<div v-if="item.netStatus == 0" class="error-tag1">
+										<img src="'../../../../static/model/connectFalse.svg " alt=""
+											class="icon-style" />
+										<span style="float: right">断开</span>
+									</div>
+									<div v-else class="success-tag">
+										<img src="'../../../../static/model/connectTrue.svg " alt=""
+											class="icon-style" />
+										<span style="float: right">连接</span>
+									</div>
+								</u-col>
+								<u-col span="4">
+									<div v-if="item.warnFlag == 0" class="success-tag">
+										<img src="'../../../../static/model/alarmTrue.svg " alt="" class="icon-style" />
+										<span style="float: right">{{ item.warnLevel_str }}</span>
+									</div>
+									<div v-else class="error-tag">
+										<img src="'../../../../static/model/alarmFalse.svg " alt=""
+											class="icon-style" />
+										<span style="float: right">{{ item.warnDes }}</span>
+									</div>
+								</u-col>
+								<u-col span="5">
+									<u--text class="timetext" :text="item.readTime"></u--text>
+								</u-col>
+							</u-row>
+							<view v-if="colums[TabCur + '_monitor'] != null">
+								<view class="datacard" v-for="(showitem, index) in colums[TabCur + '_monitor']"
+									:key="index" v-show="showitem.appShow == 1 && 
                         showitem.monitorcode != 'strinstallpos' &&
                         showitem.monitorcode != 'netStatus' &&
                         showitem.monitorcode != 'warnFlag' &&
                         showitem.monitorcode != 'readTime' &&
-                        showitem.monitorcode != ''
-                      "
-                    >
-                      <view
-                        v-if="
-                          showitem.datatype == 1 &&
-                          item.readData[showitem.monitorcode] !== undefined &&
-                          item.readData[showitem.monitorcode] !== null
-                        "
-                        class="demo-layout bg-purple-light"
-                        style="margin-top: 10rpx; color: #3787fe"
-                        >{{ item[showitem.monitorcode] }}</view
-                      >
-                      <view
-                        v-else-if="
+                        showitem.monitorcode != ''">
+											<view :class="TabCur" style="padding-top:10rpx;padding-bottom: 10rpx;">
+												<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: 5rpx;">
+													{{ item[showitem.monitorcode] == '2'?'行人':item[showitem.monitorcode] == '1'?'行车':'-' }}
+												</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: 5rpx;">
+													{{ item[showitem.monitorcode] == null || item[showitem.monitorcode] == ''?'-':item[showitem.monitorcode]}}
+												</view>
+												<view v-else-if="
                           showitem.datatype == 2 &&
                           item.readData[showitem.monitorcode] !== undefined &&
                           item.readData[showitem.monitorcode] !== null
-                        "
-                        class="demo-layout bg-purple-light"
-                        style="color: #3787fe"
-                        >{{ item.readData[showitem.monitorcode] }}</view
-                      >
-                      <view
-                        v-else
-                        class="demo-layout bg-purple-light"
-                        style="color: #3787fe"
-                        >--</view
-                      >
-                      <view
-                        class="demo-layout bg-purple-light"
-                        style="margin-top: 10px; color: #677799"
-                        >{{ showitem.des }}</view
-                      >
-                    </view>
-                  </view>
-                </view>
-              </view>
-            </div>
-          </u-list-item>
-        </u-list>
-      </view>
-    </view>
-  </view>
+                        " class="demo-layout bg-purple-light"
+													style="color: #3787fe;font-size: 30rpx;margin-top: 5rpx;">
+													{{ item.readData[showitem.monitorcode]==null || item.readData[showitem.monitorcode] == ''?'-':item.readData[showitem.monitorcode] }}
+												</view>
+
+													<view class="demo-layout bg-purple-light"
+														style="margin-top: 6rpx; color: #677799;margin-bottom: 5rpx;">
+														{{ showitem.des }}
+													</view>
+											</view>
+										</view>
+									</view>
+						</div>
+					</u-list-item>
+				</u-list>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-import DeviceMenu from "./devicemenu/devicemenu.vue";
-import api from "@/api/api";
-export default {
-  data() {
-    return {
-      menushow: false,
-      TabCur: "gate",
-      curlist: [],
-      deviceList: {},
-      scrollLeft: 0,
-      currentTab: 0,
-      colums: {},
-    };
-  },
-  components: {
-    DeviceMenu,
-  },
-  props: ["showColum"],
-  watch: {
-    showColum(data) {
-      this.colums = data;
-      console.log(this.colums);
-    },
-  },
-  created() {
-    this.colums = this.showColum;
-  },
-  mounted() {
-    this.startTimer();
-  },
-  methods: {
-    startTimer() {
-      // 每隔一段时间执行某个操作
-      this.timer = setInterval(() => {
-        // 执行定时任务
-        this.loadData(this.TabCur);
-        console.log("定时任务执行中...");
-      }, 5000);
-    },
-    stopTimer() {
-      // 停止定时器
-      clearInterval(this.timer);
-    },
-    loadData(type) {
-      new Promise((resolve, reject) => {
-        api
-          .getDeviceMonitor({
-            devicetype: type,
-            pagetype: "normal",
-            filterParams: {},
-          })
-          .then((response) => {
-            if (response.data.code == 200) {
-              this.deviceList[type] = response.data.result.msgTxt[0].datalist;
-              this.curlist = this.deviceList[type];
-              this.curlist.forEach((item) => {
-                if (item.readData.frontGateOpen == 1) {
-                  item.readData.frontGateOpen = "打开";
-                } else {
-                  item.readData.frontGateOpen = "关闭";
-                }
-                if (item.readData.rearGateOpen == 1) {
-                  item.readData.rearGateOpen = "打开";
-                } else {
-                  item.readData.rearGateOpen = "关闭";
-                }
-                if (item.readData.midGateOpen == 1) {
-                  item.readData.midGateOpen = "打开";
-                } else {
-                  item.readData.midGateOpen = "关闭";
-                }
-              });
-            } else {
-              resolve(response);
-            }
-          })
-          .catch((error) => {
-            console.log("catch===>response", response);
-            reject(error);
-          });
-      });
-    },
-    tabSelect(e) {
-      this.currentTab = e.currentTarget.dataset.id;
-      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
-    },
-    devicemenuShow(e) {
-      this.menushow = true;
-    },
-    menuClick(id) {
-      this.TabCur = id;
-      // 显示该分类的数据
-      this.curlist = this.deviceList[this.TabCur];
+	import DeviceMenu from "./devicemenu/devicemenu.vue";
+	import api from "@/api/api";
+	export default {
+		data() {
+			return {
+				menushow: false,
+				TabCur: "gate",
+				curlist: [],
+				deviceList: {},
+				scrollLeft: 0,
+				currentTab: 0,
+				colums: {},
+			};
+		},
+		components: {
+			DeviceMenu,
+		},
+		props: ["showColum"],
+		watch: {
+			showColum(data) {
+				this.colums = data;
+				console.log(this.colums);
+			},
+		},
+		created() {
+			this.colums = this.showColum;
+		},
+		mounted() {
+			this.startTimer();
+		},
+		methods: {
+			startTimer() {
+				// 每隔一段时间执行某个操作
+				this.timer = setInterval(() => {
+					// 执行定时任务
+					this.loadData(this.TabCur);
+					console.log("定时任务执行中...");
+				}, 5000);
+			},
+			stopTimer() {
+				// 停止定时器
+				clearInterval(this.timer);
+			},
+			getIcon(itemValue) {
+				// 根据itemValue获取对应的图标路径，如果找不到对应关系则返回默认图标
+				return '/static/sidebar/' + itemValue + ".svg";
+			},
+			getValueIcon(itemValue) {
+				// 根据itemValue获取对应的图标路径，如果找不到对应关系则返回默认图标
+				return '/static/sidebar/' + itemValue + ".svg";
+			},
+			loadData(type) {
+				new Promise((resolve, reject) => {
+					api
+						.getDeviceMonitor({
+							devicetype: type,
+							pagetype: "normal",
+							filterParams: {},
+						})
+						.then((response) => {
+							if (response.data.code == 200) {
+								this.deviceList[type] = response.data.result.msgTxt[0].datalist;
+								this.curlist = this.deviceList[type];
+								this.curlist.forEach((item) => {
+									if (item.readData.frontGateOpen == 1) {
+										item.readData.frontGateOpen = "打开";
+									} else {
+										item.readData.frontGateOpen = "关闭";
+									}
+									if (item.readData.midGateOpen == 1) {
+										item.readData.midGateOpen = "打开";
+									} else {
+										item.readData.midGateOpen = "关闭";
+									}
+									if (item.readData.rearGateOpen == 1) {
+										item.readData.rearGateOpen = "打开";
+									} else {
+										item.readData.rearGateOpen = "关闭";
+									}
+									if (item.readData.midGateOpen == 1) {
+										item.readData.midGateOpen = "打开";
+									} else {
+										item.readData.midGateOpen = "关闭";
+									}
+								});
+							} else {
+								resolve(response);
+							}
+						})
+						.catch((error) => {
+							console.log("catch===>response", response);
+							reject(error);
+						});
+				});
+			},
+			tabSelect(e) {
+				this.currentTab = e.currentTarget.dataset.id;
+				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
+			},
+			devicemenuShow(e) {
+				this.menushow = true;
+			},
+			menuClick(id) {
+				this.TabCur = id;
+				// 显示该分类的数据
+				this.curlist = this.deviceList[this.TabCur];
 
-      if (this.curlist == null) {
-        this.curlist = [];
-      }
-      // 选择设备分类，重新获取数据
-      this.loadData(this.TabCur);
-      this.menushow = false;
-    },
-    openNewPage(params) {
-      this.$destroy();
-      uni.navigateTo({
-        url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,
-      });
-    },
-  },
-  destroyed() {
-    // 停止定时器
-    this.stopTimer();
-  },
-};
+				if (this.curlist == null) {
+					this.curlist = [];
+				}
+				// 选择设备分类，重新获取数据
+				this.loadData(this.TabCur);
+				this.menushow = false;
+			},
+			openNewPage(params) {
+				this.$destroy();
+				uni.navigateTo({
+					url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,
+				});
+			},
+		},
+		destroyed() {
+			// 停止定时器
+			this.stopTimer();
+		},
+	};
 </script>
 
 <style>
-.top-nav {
-  height: 100rpx;
-  line-height: 100rpx;
-  background-color: #2aa9f3;
-  color: #daaaa;
-}
-.top-nav2 {
-  background-color: #ffffff;
-}
-.main {
-  margin-top: 100rpx;
-  display: flex;
-  flex-direction: column;
-}
-.card {
-  background-color: #ffffff;
-  margin: auto;
-  margin-top: 20rpx;
-  width: 90%;
-  height: 280rpx;
-  border: 1rpx solid #000000;
-  border-radius: 20rpx;
-}
-.menupage {
-  position: absolute;
-  z-index: 2;
-  top: 40rpx;
-  height: calc(100% - 40rpx);
-  width: 100%;
-}
-.timetext {
-  text-align: right;
-  float: right;
-}
-.itemback {
-  padding: 20rpx;
-  background-color: #ffffff;
-  margin-bottom: 5rpx;
-}
-.datacard {
-  width: 30%;
-  margin: 1%;
-  float: left;
-  height: 100rpx;
-  text-align: center;
-  background: linear-gradient(
-    to right,
-    rgba(55, 135, 254, 0.08),
-    rgba(4, 184, 255, 0.08),
-    rgba(60, 161, 237, 0.08)
-  );
-}
-.error-tag {
-  border-radius: 10%;
-  display: inline-block;
-  color: #e90000;
-  line-height: 50rpx;
-  font-size: 14px;
-  text-align: center;
-  width: 120rpx;
-  height: 50rpx;
-  background-color: rgba(233, 0, 0, 0.2);
-}
-.error-tag1 {
-  border-radius: 10%;
-  display: inline-block;
-  color: #696969;
-  line-height: 50rpx;
-  font-size: 14px;
-  text-align: center;
-  width: 120rpx;
-  height: 50rpx;
-  background-color: rgba(105, 105, 105, 0.2);
-}
-.success-tag {
-  border-radius: 10%;
-  color: #42c000;
-  line-height: 50rpx;
-  font-size: 14px;
-  width: 120rpx;
-  height: 50rpx;
-  display: inline-block;
-  background-color: rgba(226, 250, 214);
-}
-.icon-style {
-  margin: 15rpx;
-  width: 14px;
-  height: 14px;
-}
+	.top-nav {
+		height: 100rpx;
+		line-height: 100rpx;
+		background-color: #2aa9f3;
+		color: #daaaa;
+	}
+
+	.top-nav2 {
+		background-color: #ffffff;
+	}
+
+	.main {
+		margin-top: 100rpx;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.card {
+		background-color: #ffffff;
+		margin: auto;
+		margin-top: 20rpx;
+		width: 10%;
+		height: 280rpx;
+		border: 1rpx solid #000000;
+		border-radius: 20rpx;
+	}
+
+	.menupage {
+		position: absolute;
+		z-index: 2;
+		top: 40rpx;
+		height: calc(100% - 40rpx);
+		width: 100%;
+	}
+
+	.timetext {
+		text-align: right;
+		float: right;
+	}
+
+	.itemback {
+		padding: 20rpx;
+		background-color: #ffffff;
+		margin-bottom: 5rpx;
+	}
+
+	.datacard .content {
+		width: 30rpx;
+		height: 30rpx;
+		left: 0rpx;
+		top: 0rpx;
+		position: absolute;
+	}
+
+	.datacard {
+		border-radius: 10rpx;
+		border: rgba(55, 135, 254, 0.28);
+		width: 30%;
+		margin: 1%;
+		float: left;
+		height: 105rpx;
+		text-align: center;
+		background: linear-gradient(to right,
+				rgba(55, 135, 254, 0.08),
+				rgba(4, 184, 255, 0.08),
+				rgba(60, 161, 237, 0.08));
+	}
+
+	.datacard .gate {
+		background: linear-gradient(to right,
+				rgba(75, 135, 254, 0.08),
+				rgba(24, 184, 255, 0.08),
+				rgba(80, 161, 237, 0.08));
+	}
+
+	.datacard .window {
+		background: linear-gradient(to right,
+				rgba(55, 125, 254, 0.08),
+				rgba(4, 164, 255, 0.08),
+				rgba(60, 131, 237, 0.08));
+	}
+
+	.datacard .windrect {
+		background: linear-gradient(to right,
+				rgba(85, 125, 254, 0.08),
+				rgba(34, 164, 255, 0.08),
+				rgba(90, 131, 237, 0.08));
+	}
+
+	.error-tag {
+		border-radius: 10%;
+		display: inline-block;
+		color: #e90000;
+		line-height: 50rpx;
+		font-size: 14px;
+		text-align: center;
+		float: left;
+		width: 180rpx;
+		height: 50rpx;
+		padding-right: 30rpx;
+		background-color: rgba(233, 0, 0, 0.2);
+	}
+
+	.error-tag1 {
+		border-radius: 10%;
+		display: inline-block;
+		color: #696969;
+		line-height: 50rpx;
+		font-size: 14px;
+		text-align: center;
+		margin-top: 10rpx;
+		float: left;
+		width: 120rpx;
+		height: 50rpx;
+		background-color: rgba(105, 105, 105, 0.2);
+	}
+
+	.success-tag {
+		border-radius: 10%;
+		color: #42c000;
+		line-height: 50rpx;
+		font-size: 14px;
+		width: 120rpx;
+		height: 50rpx;
+		padding-right: 30rpx;
+		background-color: rgba(226, 250, 214);
+	}
+
+	.icon-style {
+		margin: 15rpx;
+		width: 14px;
+		height: 14px;
+	}
+
+	.title {
+		margin-left: 40rpx;
+		float: left;
+		font-size: 28rpx;
+		font-weight: 400;
+	}
 </style>

pages/home/firstmodel.vue.bak

@@ -0,0 +1,446 @@
+<template>
+  <view class="container">
+    <!-- 建议放在外层 -->
+    <u-navbar
+      title="设备监测"
+      @leftClick="devicemenuShow"
+      :safeAreaInsetTop="false"
+    >
+      <view class="u-nav-slot" slot="left">
+        <u-icon name="list" size="20"> </u-icon>
+      </view>
+    </u-navbar>
+
+    <view v-show="menushow" class="menupage">
+      <DeviceMenu @menuClick="menuClick"></DeviceMenu>
+    </view>
+
+    <view v-show="!menushow" class="main">
+      <view class="u-page">
+        <u-list>
+          <u-list-item
+            class="itemback"
+            v-for="(item, index) in curlist"
+            :key="index"
+          >
+            <div @tap="openNewPage(item)">
+              <u-row gutter="5" customStyle="margin-bottom: 10px">
+                <u-col span="24">
+					
+				 <img style="position: absolute;width: 35rpx;height:35ropx;" class="icon" :src="getIcon(TabCur)" alt="Icon" />
+                    <span class="title">{{item.strinstallpos}}</span>
+                </u-col>
+              </u-row>
+              <u-row gutter="5" customStyle="margin-bottom: 10px">
+                <u-col span="3" style="margin-right: 5rpx">
+                  <div v-if="item.netStatus == 0" class="error-tag1">
+                    <img
+                      src="'../../../../static/model/connectFalse.svg "
+                      alt=""
+                      class="icon-style"
+                    />
+                    <span style="float: right">断开</span>
+                  </div>
+                  <div v-else class="success-tag">
+                    <img
+                      src="'../../../../static/model/connectTrue.svg "
+                      alt=""
+                      class="icon-style"
+                    />
+                    <span style="float: right">连接</span>
+                  </div>
+                </u-col>
+                <u-col span="4">
+                  <div v-if="item.warnFlag == 0" class="success-tag">
+                    <img
+                      src="'../../../../static/model/alarmTrue.svg "
+                      alt=""
+                      class="icon-style"
+                    />
+                    <span style="float: right">{{ item.warnLevel_str }}</span>
+                  </div>
+                  <div v-else class="error-tag">
+                    <img
+                      src="'../../../../static/model/alarmFalse.svg "
+                      alt=""
+                      class="icon-style"
+                    />
+                    <span style="float: right">{{ item.warnDes }}</span>
+                  </div>
+                </u-col>
+                <u-col span="5">
+                  <u--text class="timetext" :text="item.readTime"></u--text>
+                </u-col>
+              </u-row>
+              <view v-if="colums[TabCur + '_monitor'] != null">
+                <view
+                  class="datacard"
+                  v-for="(showitem, index) in colums[TabCur + '_monitor']"
+<<<<<<< Updated upstream
+                  :key="index"
+                  v-show="showitem.appShow == 1"
+                >
+                  <view
+                    class="content"
+                    :style="{
+                      backgroundImage:
+                        showitem.monitorcode === 'frontRearDP' ||
+                        showitem.monitorcode === 'frontRearDifference'
+                          ? 'url(\'../../../../static/model/Pa.png\')'
+                          : showitem.monitorcode === 'sourcePressure'
+                          ? 'url(\'../../../../static/model/MPa.png\')'
+                          : showitem.monitorcode === 'frontGateOpen'
+                          ? 'url(\'../../../../static/model/doorNet.png\')'
+                          : showitem.monitorcode === 'rearGateOpen'
+                          ? 'url(\'../../../../static/model/doorNet.png\')'
+                          : showitem.monitorcode === 'warnFlag'
+                          ? 'url(\'../../../../static/model/9432.png\')'
+                          : showitem.monitorcode === 'netStatus'
+                          ? 'url(\'../../../../static/model/9431.png\')'
+                          : showitem.monitorcode === 'm3'
+                          ? 'url(\'../../../../static/model/windM3.png\')'
+                          : showitem.monitorcode === 'fsectarea'
+                          ? 'url(\'../../../../static/model/duanArea.png\')'
+                          : showitem.monitorcode === 'incipientWindSpeed1' ||
+                            showitem.monitorcode === 'incipientWindSpeed2' ||
+                            showitem.monitorcode === 'incipientWindSpeed3' ||
+                            showitem.monitorcode === 'va'
+                          ? 'url(\'../../../../static/model/fengsu.png\')'
+                          : 'url(\'\')',
+                      backgroundSize: '100% 100%',
+                    }"
+                  >
+                    <view
+                      v-show="
+=======
+                  v-show="showitem.appShow == 1 && 
+>>>>>>> Stashed changes
+                        showitem.monitorcode != 'strinstallpos' &&
+                        showitem.monitorcode != 'netStatus' &&
+                        showitem.monitorcode != 'warnFlag' &&
+                        showitem.monitorcode != 'readTime' &&
+<<<<<<< Updated upstream
+                        showitem.monitorcode != ''
+                      "
+                    >
+                      <view
+                        v-if="
+                          showitem.datatype == 1 &&
+                          item.readData[showitem.monitorcode] !== undefined &&
+                          item.readData[showitem.monitorcode] !== null
+                        "
+=======
+                        showitem.monitorcode != '' &&
+                        showitem.monitorcode != null"
+                >
+				<view :class="TabCur">
+                    <view style="padding-top:10rpx;padding-bottom: 10rpx;">
+					  <view v-if="showitem.datatype == 1 && showitem.monitorcode == 'doorUse'"
+>>>>>>> Stashed changes
+                        class="demo-layout bg-purple-light"
+                        style="margin-top: 10rpx; color: #3787fe;font-size: 30rpx;margin-top: 5rpx;"
+					  >
+					    {{ item[showitem.monitorcode] == '2'?'行人':item[showitem.monitorcode] == '1'?'行车':'-' }}
+					  </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: 5rpx;"
+					  >
+					    {{ item[showitem.monitorcode] == null || item[showitem.monitorcode] == ''?'-':item[showitem.monitorcode]}}
+					  </view>
+                      <view
+                        v-else-if="
+                          showitem.datatype == 2 &&
+                          item.readData[showitem.monitorcode] !== undefined &&
+                          item.readData[showitem.monitorcode] !== null
+                        "
+                        class="demo-layout bg-purple-light"
+                        style="color: #3787fe;font-size: 30rpx;margin-top: 5rpx;"
+                        >{{ item.readData[showitem.monitorcode]==null || item.readData[showitem.monitorcode] == ''?'-':item.readData[showitem.monitorcode] }}</view
+                      >
+                      <view
+                        v-else
+                        class="demo-layout bg-purple-light"
+                        style="color: #3787fe"
+                        >--</view
+                      >
+                      <view
+                        class="demo-layout bg-purple-light"
+                        style="margin-top: 6rpx; color: #677799;margin-bottom: 5rpx;"
+                        >{{ showitem.des }}</view
+                      >
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </div>
+          </u-list-item>
+        </u-list>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import DeviceMenu from "./devicemenu/devicemenu.vue";
+import api from "@/api/api";
+export default {
+  data() {
+    return {
+      menushow: false,
+      TabCur: "gate",
+      curlist: [],
+      deviceList: {},
+      scrollLeft: 0,
+      currentTab: 0,
+      colums: {},
+    };
+  },
+  components: {
+    DeviceMenu,
+  },
+  props: ["showColum"],
+  watch: {
+    showColum(data) {
+      this.colums = data;
+      console.log(this.colums);
+    },
+  },
+  created() {
+    this.colums = this.showColum;
+  },
+  mounted() {
+    this.startTimer();
+  },
+  methods: {
+    startTimer() {
+      // 每隔一段时间执行某个操作
+      this.timer = setInterval(() => {
+        // 执行定时任务
+        this.loadData(this.TabCur);
+        console.log("定时任务执行中...");
+      }, 5000);
+    },
+    stopTimer() {
+      // 停止定时器
+      clearInterval(this.timer);
+    },
+    getIcon(itemValue) {
+      // 根据itemValue获取对应的图标路径，如果找不到对应关系则返回默认图标
+      return '/static/sidebar/'+itemValue+".svg";
+    },
+    getValueIcon(itemValue) {
+      // 根据itemValue获取对应的图标路径，如果找不到对应关系则返回默认图标
+      return '/static/sidebar/'+itemValue+".svg";
+    },
+    loadData(type) {
+      new Promise((resolve, reject) => {
+        api
+          .getDeviceMonitor({
+            devicetype: type,
+            pagetype: "normal",
+            filterParams: {},
+          })
+          .then((response) => {
+            if (response.data.code == 200) {
+              this.deviceList[type] = response.data.result.msgTxt[0].datalist;
+              this.curlist = this.deviceList[type];
+              this.curlist.forEach((item) => {
+                if (item.readData.frontGateOpen == 1) {
+                  item.readData.frontGateOpen = "打开";
+                } else {
+                  item.readData.frontGateOpen = "关闭";
+                }
+                if (item.readData.midGateOpen == 1) {
+                  item.readData.midGateOpen = "打开";
+                } else {
+                  item.readData.midGateOpen = "关闭";
+                }
+                if (item.readData.rearGateOpen == 1) {
+                  item.readData.rearGateOpen = "打开";
+                } else {
+                  item.readData.rearGateOpen = "关闭";
+                }
+                if (item.readData.midGateOpen == 1) {
+                  item.readData.midGateOpen = "打开";
+                } else {
+                  item.readData.midGateOpen = "关闭";
+                }
+              });
+            } else {
+              resolve(response);
+            }
+          })
+          .catch((error) => {
+            console.log("catch===>response", response);
+            reject(error);
+          });
+      });
+    },
+    tabSelect(e) {
+      this.currentTab = e.currentTarget.dataset.id;
+      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
+    },
+    devicemenuShow(e) {
+      this.menushow = true;
+    },
+    menuClick(id) {
+      this.TabCur = id;
+      // 显示该分类的数据
+      this.curlist = this.deviceList[this.TabCur];
+
+      if (this.curlist == null) {
+        this.curlist = [];
+      }
+      // 选择设备分类，重新获取数据
+      this.loadData(this.TabCur);
+      this.menushow = false;
+    },
+    openNewPage(params) {
+      this.$destroy();
+      uni.navigateTo({
+        url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,
+      });
+    },
+  },
+  destroyed() {
+    // 停止定时器
+    this.stopTimer();
+  },
+};
+</script>
+
+<style>
+.top-nav {
+  height: 100rpx;
+  line-height: 100rpx;
+  background-color: #2aa9f3;
+  color: #daaaa;
+}
+.top-nav2 {
+  background-color: #ffffff;
+}
+.main {
+  margin-top: 100rpx;
+  display: flex;
+  flex-direction: column;
+}
+.card {
+  background-color: #ffffff;
+  margin: auto;
+  margin-top: 20rpx;
+  width: 10%;
+  height: 280rpx;
+  border: 1rpx solid #000000;
+  border-radius: 20rpx;
+}
+.menupage {
+  position: absolute;
+  z-index: 2;
+  top: 40rpx;
+  height: calc(100% - 40rpx);
+  width: 100%;
+}
+.timetext {
+  text-align: right;
+  float: right;
+}
+.itemback {
+  padding: 20rpx;
+  background-color: #ffffff;
+  margin-bottom: 5rpx;
+}
+.datacard .content{
+	width: 30rpx;
+	height: 30rpx;
+	left: 0rpx;
+	top:0rpx;
+	position: absolute;
+}
+.datacard {
+	border-radius: 10rpx;
+	border: rgba(55, 135, 254, 0.28);
+  width: 30%;
+  margin: 1%;
+  float: left;
+  height: 105rpx;
+  text-align: center;
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08),
+    rgba(60, 161, 237, 0.08)
+  );
+}
+.datacard .gate{
+  background: linear-gradient(
+    to right,
+    rgba(75, 135, 254, 0.08),
+    rgba(24, 184, 255, 0.08),
+    rgba(80, 161, 237, 0.08)
+  );
+}
+.datacard .window{
+  background: linear-gradient(
+    to right,
+    rgba(55, 125, 254, 0.08),
+    rgba(4, 164, 255, 0.08),
+    rgba(60, 131, 237, 0.08)
+  );
+}
+.datacard .windrect{
+  background: linear-gradient(
+    to right,
+    rgba(85, 125, 254, 0.08),
+    rgba(34, 164, 255, 0.08),
+    rgba(90, 131, 237, 0.08)
+  );
+}
+.error-tag {
+  border-radius: 10%;
+  display: inline-block;
+  color: #e90000;
+  line-height: 50rpx;
+  font-size: 14px;
+  text-align: center;
+  float: left;
+  width: 180rpx;
+  height: 50rpx;
+  padding-right:30rpx;
+  background-color: rgba(233, 0, 0, 0.2);
+}
+.error-tag1 {
+  border-radius: 10%;
+  display: inline-block;
+  color: #696969;
+  line-height: 50rpx;
+  font-size: 14px;
+  text-align: center;
+  margin-top: 10rpx;
+  float: left;
+  width: 120rpx;
+  height: 50rpx;
+  background-color: rgba(105, 105, 105, 0.2);
+}
+.success-tag {
+  border-radius: 10%;
+  color: #42c000;
+  line-height: 50rpx;
+  font-size: 14px;
+  width: 120rpx;
+  height: 50rpx;
+  padding-right:30rpx;
+  background-color: rgba(226, 250, 214);
+}
+.icon-style {
+  margin: 15rpx;
+  width: 14px;
+  height: 14px;
+}
+.title{
+	margin-left: 40rpx;
+	float: left;
+	font-size: 32rpx;
+	font-weight: 400;
+}
+</style>

static/fan/数据展示框.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="209" height="37" viewBox="0 0 209 37">
+  <defs>
+    <filter id="矩形" x="0" y="0" width="209" height="37" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="1.5" result="blur"/>
+      <feFlood flood-color="#020421"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g id="编组_41" data-name="编组 41" transform="translate(4.5 4.5)">
+    <g id="数字_匡备份" data-name="数字/匡备份">
+      <rect id="数字_匡_background" data-name="数字/匡 background" width="200" height="28" fill="none"/>
+      <g id="编组_3" data-name="编组 3">
+        <g transform="matrix(1, 0, 0, 1, -4.5, -4.5)" filter="url(#矩形)">
+          <g id="矩形-2" data-name="矩形" transform="translate(4.5 4.5)" fill="rgba(61,246,255,0.1)" stroke="rgba(53,147,255,0.55)" stroke-miterlimit="10" stroke-width="1">
+            <rect width="200" height="28" stroke="none"/>
+            <rect x="0.5" y="0.5" width="199" height="27" fill="none"/>
+          </g>
+        </g>
+        <g id="编组_2" data-name="编组 2" transform="translate(1.374 1)">
+          <path id="路径_7" data-name="路径 7" d="M0,4V0H5" fill="none" stroke="#3593ff" stroke-miterlimit="10" stroke-width="1.5"/>
+          <path id="路径_7-2" data-name="路径 7" d="M0,4V0H-5" transform="translate(197.817)" fill="none" stroke="#3593ff" stroke-miterlimit="10" stroke-width="1.5"/>
+        </g>
+        <g id="编组" transform="translate(1.374 23)">
+          <path id="路径_7-3" data-name="路径 7" d="M0-4V0H5" transform="translate(0 4)" fill="none" stroke="#3593ff" stroke-miterlimit="10" stroke-width="1.5"/>
+          <path id="路径_7-4" data-name="路径 7" d="M0,4V0H5" transform="translate(197.817 4) rotate(180)" fill="none" stroke="#3593ff" stroke-miterlimit="10" stroke-width="1.5"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

static/sidebar/atomizing.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="34.032" viewBox="0 0 34 34.032">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13823" data-name="组 13823" transform="translate(-125.29 -262.264)">
+    <path id="路径_55483" data-name="路径 55483" d="M146.683,167.411a1.7,1.7,0,0,1-1.7-1.7V152.083a1.692,1.692,0,0,1,.5-1.206l3.447-3.42a1.711,1.711,0,0,1,1.195-.494h5.051v-6.8h-7.866l-7.383,6.368v19.179a1.7,1.7,0,0,1-3.4,0V145.752a1.7,1.7,0,0,1,.59-1.285l8.445-7.287a1.7,1.7,0,0,1,1.11-.414h10.2a1.7,1.7,0,0,1,1.7,1.7v10.2a1.7,1.7,0,0,1-1.7,1.7h-6.044l-2.448,2.427v12.922a1.7,1.7,0,0,1-1.7,1.7Zm17-27.246a1.7,1.7,0,0,1-.935-3.118l5.152-3.389a1.7,1.7,0,1,1,1.864,2.841l-5.152,3.389A1.708,1.708,0,0,1,163.684,140.165Zm5.147,5.162h-5.152a1.7,1.7,0,0,1,0-3.4h5.152a1.7,1.7,0,1,1,0,3.4Zm0,8.455a1.705,1.705,0,0,1-.94-.281l-5.152-3.42a1.7,1.7,0,0,1,1.88-2.836l5.152,3.42a1.7,1.7,0,0,1-.94,3.118Z" transform="translate(-11.244 128.885)" opacity="0.4" fill="url(#radial-gradient)"/>
+    <path id="路径_55484" data-name="路径 55484" d="M145.422,163.182a1.487,1.487,0,0,1-1.488-1.488V149.759a1.482,1.482,0,0,1,.442-1.056l3.019-3a1.5,1.5,0,0,1,1.046-.433h4.423v-5.954h-6.888L139.51,144.9v16.8a1.488,1.488,0,1,1-2.977,0V144.215a1.488,1.488,0,0,1,.516-1.126l7.4-6.381a1.489,1.489,0,0,1,.972-.363h8.93a1.487,1.487,0,0,1,1.488,1.488v8.93a1.487,1.487,0,0,1-1.488,1.488h-5.293l-2.144,2.126v11.316a1.487,1.487,0,0,1-1.488,1.488Zm14.889-23.861a1.487,1.487,0,0,1-.819-2.73L164,133.624a1.488,1.488,0,1,1,1.633,2.488l-4.512,2.967A1.5,1.5,0,0,1,160.31,139.321Zm4.507,4.521h-4.512a1.488,1.488,0,0,1,0-2.977h4.512a1.488,1.488,0,1,1,0,2.977Zm0,7.4a1.493,1.493,0,0,1-.823-.247l-4.512-3a1.49,1.49,0,0,1,1.647-2.484l4.512,3a1.489,1.489,0,0,1-.823,2.73Z" transform="translate(-9.131 130.999)" fill="url(#radial-gradient)"/>
+  </g>
+</svg>

static/sidebar/bundletube.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="34" viewBox="0 0 34 34">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13839" data-name="组 13839" transform="translate(-111.468 -258.41)">
+    <g id="组_13816" data-name="组 13816" transform="translate(111.468 258.41)" opacity="0.4">
+      <path id="椭圆_2583" data-name="椭圆 2583" d="M17,2.429A14.571,14.571,0,1,0,31.571,17,14.588,14.588,0,0,0,17,2.429M17,0A17,17,0,1,1,0,17,17,17,0,0,1,17,0Z" transform="translate(0)" fill="url(#radial-gradient)"/>
+      <path id="路径_55457" data-name="路径 55457" d="M6.452,1.038a4.857,4.857,0,1,0,4.857,4.857A4.863,4.863,0,0,0,6.452,1.038m0-1.214A6.071,6.071,0,1,1,.381,5.895,6.071,6.071,0,0,1,6.452-.177Z" transform="translate(5.401 2.176)" fill="url(#radial-gradient)"/>
+      <path id="椭圆_2585" data-name="椭圆 2585" d="M4.857,1.214A3.643,3.643,0,1,0,8.5,4.857,3.647,3.647,0,0,0,4.857,1.214M4.857,0A4.857,4.857,0,1,1,0,4.857,4.857,4.857,0,0,1,4.857,0Z" transform="translate(17 2.429)" fill="url(#radial-gradient)"/>
+      <path id="路径_55458" data-name="路径 55458" d="M4.98.737A4.223,4.223,0,1,0,9.2,4.959,4.228,4.228,0,0,0,4.98.737m0-1.214A5.437,5.437,0,1,1-.457,4.959,5.437,5.437,0,0,1,4.98-.478Z" transform="translate(12.311 12.041)" fill="url(#radial-gradient)"/>
+      <path id="椭圆_2586" data-name="椭圆 2586" d="M4.857,1.214A3.643,3.643,0,1,0,8.5,4.857,3.647,3.647,0,0,0,4.857,1.214M4.857,0A4.857,4.857,0,1,1,0,4.857,4.857,4.857,0,0,1,4.857,0Z" transform="translate(21.857 9.714)" fill="url(#radial-gradient)"/>
+      <path id="路径_55454" data-name="路径 55454" d="M4.88.79A4.16,4.16,0,1,0,9.04,4.95,4.165,4.165,0,0,0,4.88.79m0-1.214A5.374,5.374,0,1,1-.494,4.95,5.374,5.374,0,0,1,4.88-.424Z" transform="translate(13.956 22.646)" fill="url(#radial-gradient)"/>
+      <path id="路径_55455" data-name="路径 55455" d="M4.311.513A4.005,4.005,0,1,0,8.316,4.518,4.01,4.01,0,0,0,4.311.513m0-1.214A5.219,5.219,0,1,1-.908,4.518,5.219,5.219,0,0,1,4.311-.7Z" transform="translate(5.988 20.13)" fill="url(#radial-gradient)"/>
+      <path id="路径_55456" data-name="路径 55456" d="M4.563.513A4.257,4.257,0,1,0,8.82,4.77,4.262,4.262,0,0,0,4.563.513m0-1.214A5.471,5.471,0,1,1-.908,4.77,5.471,5.471,0,0,1,4.563-.7Z" transform="translate(1.131 11.616)" fill="url(#radial-gradient)"/>
+      <path id="路径_55459" data-name="路径 55459" d="M3.742.606A3.643,3.643,0,1,0,7.385,4.249,3.647,3.647,0,0,0,3.742.606m0-1.214A4.857,4.857,0,1,1-1.115,4.249,4.857,4.857,0,0,1,3.742-.608Z" transform="translate(22.47 18.717)" fill="url(#radial-gradient)"/>
+    </g>
+    <g id="组_13817" data-name="组 13817" transform="translate(113.622 260.564)">
+      <path id="椭圆_2583-2" data-name="椭圆 2583" d="M14.846,2.121A12.725,12.725,0,1,0,27.571,14.846,12.739,12.739,0,0,0,14.846,2.121m0-2.121A14.846,14.846,0,1,1,0,14.846,14.846,14.846,0,0,1,14.846,0Z" transform="translate(0)" fill="url(#radial-gradient)"/>
+      <path id="路径_55457-2" data-name="路径 55457" d="M5.683.884A4.242,4.242,0,1,0,9.925,5.125,4.247,4.247,0,0,0,5.683.884m0-1.06a5.3,5.3,0,1,1-5.3,5.3A5.3,5.3,0,0,1,5.683-.177Z" transform="translate(4.669 1.923)" fill="url(#radial-gradient)"/>
+      <path id="椭圆_2585-2" data-name="椭圆 2585" d="M4.242,1.06A3.181,3.181,0,1,0,7.423,4.242,3.185,3.185,0,0,0,4.242,1.06m0-1.06A4.242,4.242,0,1,1,0,4.242,4.242,4.242,0,0,1,4.242,0Z" transform="translate(14.846 2.121)" fill="url(#radial-gradient)"/>
+      <path id="路径_55458-2" data-name="路径 55458" d="M4.291.583A3.688,3.688,0,1,0,7.979,4.271,3.692,3.692,0,0,0,4.291.583m0-1.06A4.748,4.748,0,1,1-.457,4.271,4.748,4.748,0,0,1,4.291-.478Z" transform="translate(10.809 10.575)" fill="url(#radial-gradient)"/>
+      <path id="椭圆_2586-2" data-name="椭圆 2586" d="M4.242,1.06A3.181,3.181,0,1,0,7.423,4.242,3.185,3.185,0,0,0,4.242,1.06m0-1.06A4.242,4.242,0,1,1,0,4.242,4.242,4.242,0,0,1,4.242,0Z" transform="translate(19.088 8.483)" fill="url(#radial-gradient)"/>
+      <path id="路径_55454-2" data-name="路径 55454" d="M4.2.637A3.633,3.633,0,1,0,7.832,4.269,3.637,3.637,0,0,0,4.2.637m0-1.06A4.693,4.693,0,1,1-.494,4.269,4.693,4.693,0,0,1,4.2-.424Z" transform="translate(12.25 19.83)" fill="url(#radial-gradient)"/>
+      <path id="路径_55455-2" data-name="路径 55455" d="M3.65.359a3.5,3.5,0,1,0,3.5,3.5,3.5,3.5,0,0,0-3.5-3.5m0-1.06A4.558,4.558,0,1,1-.908,3.856,4.558,4.558,0,0,1,3.65-.7Z" transform="translate(5.345 17.668)" fill="url(#radial-gradient)"/>
+      <path id="路径_55456-2" data-name="路径 55456" d="M3.87.359A3.718,3.718,0,1,0,7.588,4.076,3.722,3.722,0,0,0,3.87.359m0-1.06A4.778,4.778,0,1,1-.908,4.076,4.778,4.778,0,0,1,3.87-.7Z" transform="translate(1.103 10.233)" fill="url(#radial-gradient)"/>
+      <path id="路径_55459-2" data-name="路径 55459" d="M3.126.452A3.181,3.181,0,1,0,6.308,3.633,3.185,3.185,0,0,0,3.126.452m0-1.06A4.242,4.242,0,1,1-1.115,3.633,4.242,4.242,0,0,1,3.126-.608Z" transform="translate(19.764 16.423)" fill="url(#radial-gradient)"/>
+    </g>
+  </g>
+</svg>

static/sidebar/drilling.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="31.986" height="35.705" viewBox="0 0 31.986 35.705">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13849" data-name="组 13849" transform="translate(-118.467 -258.63)">
+    <path id="路径_55507" data-name="路径 55507" d="M141.058,70.937h-4.3v4.958h-.047l-4.91,7.437-.039,2.479a2.479,2.479,0,0,1-2.479,2.479h-1.239v3.718a1.239,1.239,0,0,1-2.479,0V88.289h-1.239a2.479,2.479,0,0,1-2.479-2.479l-.047-2.479-4.91-7.437h.039V70.937H112.55a1.239,1.239,0,0,1,0-2.479h4.377V65.979a2.479,2.479,0,0,1,2.479-2.479h14.873a2.479,2.479,0,0,1,2.479,2.479v2.479h4.3a1.239,1.239,0,0,1,0,2.479Zm-11.775-2.479h-4.958a1.239,1.239,0,1,0,0,2.479h4.958a1.239,1.239,0,0,0,0-2.479Zm-2.435,24.828c1.913,0,3.853.753,4.247,2.021.455,1.465-1.506,2.9-4.29,2.9s-4.72-1.432-4.239-2.9C122.981,94.038,124.935,93.286,126.847,93.286Zm-1.815,2.909.958,0,.166.462.725-.346.7.207.158-.474.846-.147-.467-.356.548-.45-.874-.027-.12-.536-.782.372-.809-.292-.135.573-1,.152.631.4Z" transform="translate(7.656 195.63)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" opacity="0.4" fill="url(#radial-gradient)"/>
+    <path id="路径_55508" data-name="路径 55508" d="M137.58,70.067h-3.8v4.378h-.042L129.4,81.013l-.034,2.189a2.189,2.189,0,0,1-2.189,2.189h-1.095v3.284a1.095,1.095,0,0,1-2.189,0V85.391H122.8a2.189,2.189,0,0,1-2.189-2.189l-.042-2.189-4.336-6.567h.034V70.067h-3.865a1.095,1.095,0,0,1,0-2.189h3.865V65.689a2.189,2.189,0,0,1,2.189-2.189h13.134a2.189,2.189,0,0,1,2.189,2.189v2.189h3.8a1.095,1.095,0,0,1,0,2.189Zm-10.4-2.189H122.8a1.095,1.095,0,1,0,0,2.189h4.378a1.095,1.095,0,1,0,0-2.189ZM125.031,89.8c1.689,0,3.4.665,3.75,1.785.4,1.294-1.33,2.559-3.789,2.559s-4.168-1.264-3.743-2.559C121.617,90.468,123.343,89.8,125.031,89.8Zm-1.6,2.569.846,0,.147.408.64-.306.617.183.14-.419.747-.13-.412-.314.484-.4-.772-.024-.106-.473-.691.328-.714-.258-.119.506-.881.135.557.352Z" transform="translate(9.468 197.659)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#radial-gradient)"/>
+  </g>
+</svg>

static/sidebar/dusting.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35.725" height="31.593" viewBox="0 0 35.725 31.593">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13824" data-name="组 13824" transform="translate(-130 -258.41)">
+    <g id="组_13084" data-name="组 13084" transform="translate(130 258.41)" opacity="0.4">
+      <path id="路径_55299" data-name="路径 55299" d="M396.614,91.872m-4.422,0a4.422,4.422,0,1,0,4.422-4.422A4.422,4.422,0,0,0,392.192,91.872Z" transform="translate(-378.428 -87.45)" fill="url(#radial-gradient)"/>
+      <path id="路径_55300" data-name="路径 55300" d="M638.383,588m-4.424,0a4.424,4.424,0,1,0,4.424-4.424A4.424,4.424,0,0,0,633.959,588Z" transform="translate(-611.351 -565.429)" fill="url(#radial-gradient)"/>
+      <path id="路径_55301" data-name="路径 55301" d="M20.348,579.963m-4.424,0a4.424,4.424,0,1,0,4.424-4.424A4.424,4.424,0,0,0,15.924,579.963Z" transform="translate(-15.924 -557.685)" fill="url(#radial-gradient)"/>
+      <path id="路径_55302" data-name="路径 55302" d="M395.029,796.079m-2.888,0a2.888,2.888,0,1,0,2.888-2.888A2.888,2.888,0,0,0,392.141,796.079Z" transform="translate(-378.378 -767.374)" fill="url(#radial-gradient)"/>
+      <path id="路径_55303" data-name="路径 55303" d="M837.5,340.808m-2.888,0a2.888,2.888,0,1,0,2.888-2.888A2.888,2.888,0,0,0,834.612,340.808Z" transform="translate(-804.663 -328.757)" fill="url(#radial-gradient)"/>
+      <path id="路径_55486" data-name="路径 55486" d="M836.56,339.869m-1.949,0a1.949,1.949,0,1,0,1.949-1.949A1.949,1.949,0,0,0,834.612,339.869Z" transform="translate(-812.346 -326.879)" fill="url(#radial-gradient)"/>
+      <path id="路径_55304" data-name="路径 55304" d="M290.837,387.092m-2.888,0a2.888,2.888,0,1,0,2.888-2.888A2.888,2.888,0,0,0,287.949,387.092Z" transform="translate(-277.998 -373.349)" fill="url(#radial-gradient)"/>
+      <path id="路径_55305" data-name="路径 55305" d="M31.151,220.181m-2.888,0a2.888,2.888,0,1,0,2.888-2.888A2.888,2.888,0,0,0,28.263,220.181Z" transform="translate(-27.811 -212.543)" fill="url(#radial-gradient)"/>
+    </g>
+    <g id="组_13824-2" data-name="组 13824" transform="translate(132.946 261.015)">
+      <path id="路径_55299-2" data-name="路径 55299" d="M395.885,91.143m-3.693,0a3.693,3.693,0,1,0,3.693-3.693A3.693,3.693,0,0,0,392.192,91.143Z" transform="translate(-380.698 -87.45)" fill="url(#radial-gradient)"/>
+      <path id="路径_55300-2" data-name="路径 55300" d="M637.653,587.272m-3.694,0a3.694,3.694,0,1,0,3.694-3.694A3.694,3.694,0,0,0,633.959,587.272Z" transform="translate(-615.08 -568.422)" fill="url(#radial-gradient)"/>
+      <path id="路径_55301-2" data-name="路径 55301" d="M19.618,579.234m-3.694,0a3.694,3.694,0,1,0,3.694-3.694A3.694,3.694,0,0,0,15.924,579.234Z" transform="translate(-15.924 -560.63)" fill="url(#radial-gradient)"/>
+      <path id="路径_55302-2" data-name="路径 55302" d="M394.552,795.6m-2.412,0a2.412,2.412,0,1,0,2.412-2.412A2.412,2.412,0,0,0,392.141,795.6Z" transform="translate(-380.648 -771.632)" fill="url(#radial-gradient)"/>
+      <path id="路径_55303-2" data-name="路径 55303" d="M837.023,340.331m-2.412,0a2.412,2.412,0,1,0,2.412-2.412A2.412,2.412,0,0,0,834.612,340.331Z" transform="translate(-809.603 -330.268)" fill="url(#radial-gradient)"/>
+      <path id="路径_55485" data-name="路径 55485" d="M836.084,339.392m-1.472,0a1.472,1.472,0,1,0,1.472-1.472A1.472,1.472,0,0,0,834.612,339.392Z" transform="translate(-815.732 -328.191)" fill="url(#radial-gradient)"/>
+      <path id="路径_55304-2" data-name="路径 55304" d="M290.36,386.616m-2.412,0a2.412,2.412,0,1,0,2.412-2.412A2.412,2.412,0,0,0,287.949,386.616Z" transform="translate(-279.639 -375.139)" fill="url(#radial-gradient)"/>
+      <path id="路径_55305-2" data-name="路径 55305" d="M30.674,219.7m-2.412,0a2.412,2.412,0,1,0,2.412-2.412A2.412,2.412,0,0,0,28.263,219.7Z" transform="translate(-27.886 -213.326)" fill="url(#radial-gradient)"/>
+    </g>
+  </g>
+</svg>

static/sidebar/fanlocal.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33.623" height="34" viewBox="0 0 33.623 34">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13834" data-name="组 13834" transform="translate(-113.324 -260.47)">
+    <g id="组_13806" data-name="组 13806" transform="translate(113.324 260.47)" opacity="0.4">
+      <path id="路径_55286" data-name="路径 55286" d="M463.862,413.366a2.64,2.64,0,1,0-2.64,2.639A2.639,2.639,0,0,0,463.862,413.366Z" transform="translate(-444.538 -396.245)" fill="url(#radial-gradient)"/>
+      <path id="路径_55287" data-name="路径 55287" d="M164.927,91.021a17.271,17.271,0,0,0-5.566-13.214L152.9,84.82a7.408,7.408,0,0,0-3.452-1.711V73.3c-.332-.016-.649-.03-.98-.03l-.015.015a17.222,17.222,0,0,0-13.048,5.943l7.109,6.173A7.4,7.4,0,0,0,140.6,89.7l-9.131-.267h-.091c-.03.332-.045.649-.06.981l.016.015a17.268,17.268,0,0,0,5.566,13.214l6.683-7.256c-.025-.024-.047-.05-.072-.074a7.391,7.391,0,0,0,3.451,1.441v9.479c.332.015.649.03.98.03l.015-.015A17.222,17.222,0,0,0,161,101.308L153.8,95.051a7.4,7.4,0,0,0,1.512-3.311l9.479.277h.09c.03-.332.045-.649.06-.981ZM143.175,90.4A4.827,4.827,0,1,1,148,95.229,4.821,4.821,0,0,1,143.175,90.4Z" transform="translate(-131.319 -73.267)" fill="url(#radial-gradient)"/>
+    </g>
+    <g id="组_13807" data-name="组 13807" transform="translate(115.794 262.968)">
+      <path id="路径_55286-2" data-name="路径 55286" d="M463.086,412.978a2.252,2.252,0,1,0-2.252,2.252A2.252,2.252,0,0,0,463.086,412.978Z" transform="translate(-446.602 -398.373)" fill="url(#radial-gradient)"/>
+      <path id="路径_55287-2" data-name="路径 55287" d="M159.989,88.412a14.733,14.733,0,0,0-4.748-11.273l-5.511,5.983a6.32,6.32,0,0,0-2.945-1.459V73.292c-.283-.013-.553-.026-.836-.026l-.013.012a14.692,14.692,0,0,0-11.131,5.07l6.064,5.266a6.317,6.317,0,0,0-1.633,3.673l-7.79-.228h-.078c-.026.283-.038.553-.051.837l.013.013a14.731,14.731,0,0,0,4.748,11.273l5.7-6.19c-.021-.02-.04-.043-.061-.063a6.305,6.305,0,0,0,2.944,1.229v8.086c.283.013.553.026.836.026l.013-.013a14.692,14.692,0,0,0,11.131-5.07L150.5,91.85a6.312,6.312,0,0,0,1.29-2.825l8.087.236h.077c.026-.283.039-.553.051-.837Zm-18.556-.528A4.118,4.118,0,1,1,145.551,92,4.113,4.113,0,0,1,141.433,87.885Z" transform="translate(-131.319 -73.267)" fill="url(#radial-gradient)"/>
+    </g>
+  </g>
+</svg>

static/sidebar/fanmain.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30.78" height="34" viewBox="0 0 30.78 34">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13836" data-name="组 13836" transform="translate(-131.141 -260.47)">
+    <g id="组_13083" data-name="组 13083" transform="translate(131.141 260.47)" opacity="0.4">
+      <path id="路径_55288" data-name="路径 55288" d="M211.536,365.477a14.077,14.077,0,0,0-.311-1.623c-.213-.825-15-8.071-15.226-8.9a2.742,2.742,0,0,0-1.893-1.089.273.273,0,0,1-.039.01,13.907,13.907,0,1,0,17.468,11.6Zm-13.875,7.545a5.7,5.7,0,1,1,5.7-5.7A5.7,5.7,0,0,1,197.661,373.023Z" transform="translate(-183.831 -347.216)" fill="url(#radial-gradient)"/>
+      <path id="路径_55290" data-name="路径 55290" d="M252.428,339.975c-4.193,0-19.877-11.593-19.071-11.878l18.515-6.6a1.549,1.549,0,0,1,2.067,1.453l.039,15.477a1.535,1.535,0,0,1-.454,1.1A1.555,1.555,0,0,1,252.428,339.975Z" transform="translate(-223.198 -321.404)" fill="url(#radial-gradient)"/>
+    </g>
+    <g id="组_13083-2" data-name="组 13083" transform="translate(134.811 264.524)">
+      <path id="路径_55288-2" data-name="路径 55288" d="M204.929,362.707a10.721,10.721,0,0,0-.237-1.236c-.162-.628-11.425-6.146-11.595-6.774a2.088,2.088,0,0,0-1.442-.829l-.03.008a10.59,10.59,0,1,0,13.3,8.832Zm-10.566,5.746a4.34,4.34,0,1,1,4.34-4.34A4.341,4.341,0,0,1,194.363,368.453Z" transform="translate(-183.831 -348.8)" fill="url(#radial-gradient)"/>
+      <path id="路径_55290-2" data-name="路径 55290" d="M247.873,335.547c-3.193,0-15.137-8.829-14.523-9.046l14.1-5.029a1.18,1.18,0,0,1,1.574,1.107l.029,11.786a1.169,1.169,0,0,1-.346.835A1.185,1.185,0,0,1,247.873,335.547Z" transform="translate(-225.614 -321.404)" fill="url(#radial-gradient)"/>
+    </g>
+  </g>
+</svg>

static/sidebar/fiber.svg

@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35.763" height="34.645" viewBox="0 0 35.763 34.645">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13837" data-name="组 13837" transform="translate(-113.808 -251.637)">
+    <g id="组_13794" data-name="组 13794" transform="translate(113.809 251.637)" opacity="0.4">
+      <path id="路径_55460" data-name="路径 55460" d="M-18832.912,4269l.541-.8c-.648-.443-15.934-10.862-21.437-12.458l-.268.929C-18848.719,4258.228-18833.076,4268.9-18832.912,4269Z" transform="translate(18854.076 -4246.302)" fill="url(#radial-gradient)"/>
+      <path id="路径_55461" data-name="路径 55461" d="M-18834.967,4267.749l.594-.769-19.723-15.169-.592.767Z" transform="translate(18857.639 -4245.76)" fill="url(#radial-gradient)"/>
+      <path id="路径_55464" data-name="路径 55464" d="M.6,0,0,.759,19.465,16.176l.6-.759Z" transform="matrix(-0.996, 0.087, -0.087, -0.996, 23.687, 22.784)" fill="url(#radial-gradient)"/>
+      <path id="路径_55463" data-name="路径 55463" d="M.589,0,0,.767,19.723,15.939l.591-.768Z" transform="matrix(-0.998, -0.07, 0.07, -0.998, 24.66, 22.678)" fill="url(#radial-gradient)"/>
+      <path id="路径_55465" data-name="路径 55465" d="M.589,0,0,.767,19.723,15.939l.591-.768Z" transform="translate(25.353 22.656) rotate(-172)" fill="url(#radial-gradient)"/>
+      <path id="路径_55462" data-name="路径 55462" d="M.672,0,0,.7c4.226,4.085,15.369,15.22,16.175,17.653l.919-.305a17.426,17.426,0,0,0-3.071-4.252c-1.4-1.615-3.275-3.637-5.572-6.01C4.543,3.745.71.037.672,0Z" transform="matrix(-0.998, -0.07, 0.07, -0.998, 23.644, 19.496)" fill="url(#radial-gradient)"/>
+      <g id="组_13474" data-name="组 13474" transform="translate(38.656 28.768) rotate(135)">
+        <path id="路径_55456" data-name="路径 55456" d="M3.783,0H.437C.2,0,0,.527,0,1.179V5.12H4.22V1.179C4.22.527,4.024,0,3.783,0Z" transform="translate(4.092 0)" fill="url(#radial-gradient)"/>
+        <path id="路径_55459" data-name="路径 55459" d="M7.353,0H.849C.38,0,0,.527,0,1.179V5.12H8.2V1.179C8.2.527,7.822,0,7.353,0Z" transform="translate(2.101 13.69)" fill="url(#radial-gradient)"/>
+        <path id="路径_55458" data-name="路径 55458" d="M1.449,0,2.36,4.133H0l.015.019L4.507,9.615l-1-3.953H5.893ZM.048,4.156h2.34l0-.014L1.492.092,5.847,5.64H3.475L4.46,9.522.048,4.156Z" transform="translate(3.262 6.061)" fill="url(#radial-gradient)"/>
+        <path id="路径_55454" data-name="路径 55454" d="M12.136,12.027a.158.158,0,0,1-.143.169H.163a.158.158,0,0,1-.143-.169s-.045-1.779,0-2.368c.115-1.5.689-4.465.788-5.971,0,0,0,0,0-.006C1.877,2.414,3.486,2.092,3.84.63a.757.757,0,0,1,.7-.63H7.621a.757.757,0,0,1,.7.63c.355,1.462,1.964,1.784,3.033,3.052,0,0,0,0,0,.006.1,1.506.673,4.467.788,5.971C12.182,10.248,12.136,12.027,12.136,12.027Z" transform="translate(0 4.44)" fill="url(#radial-gradient)"/>
+      </g>
+    </g>
+    <g id="组_13814" data-name="组 13814" transform="translate(118.005 255.598)">
+      <path id="路径_55460-2" data-name="路径 55460" d="M-18836.658,4266.656l.445-.658c-.535-.364-13.111-8.94-17.645-10.253l-.219.764C-18849.668,4257.789-18836.793,4266.567-18836.658,4266.656Z" transform="translate(18854.076 -4247.974)" fill="url(#radial-gradient)"/>
+      <path id="路径_55461-2" data-name="路径 55461" d="M-18838.457,4264.928l.488-.632-16.234-12.485-.484.631Z" transform="translate(18857.115 -4246.831)" fill="url(#radial-gradient)"/>
+      <path id="路径_55464-2" data-name="路径 55464" d="M.5,0,0,.625,16.02,13.314l.494-.625Z" transform="matrix(-0.996, 0.087, -0.087, -0.996, 19.495, 18.752)" fill="url(#radial-gradient)"/>
+      <path id="路径_55463-2" data-name="路径 55463" d="M.485,0,0,.632,16.232,13.118l.487-.632Z" transform="matrix(-0.998, -0.07, 0.07, -0.998, 20.296, 18.665)" fill="url(#radial-gradient)"/>
+      <path id="路径_55465-2" data-name="路径 55465" d="M.485,0,0,.632,16.232,13.118l.487-.632Z" transform="translate(20.866 18.646) rotate(-172)" fill="url(#radial-gradient)"/>
+      <path id="路径_55462-2" data-name="路径 55462" d="M.553,0,0,.573C3.478,3.935,12.649,13.1,13.313,15.1l.756-.251a14.342,14.342,0,0,0-2.527-3.5C10.39,10.021,8.846,8.357,6.956,6.4,3.739,3.082.585.03.553,0Z" transform="matrix(-0.998, -0.07, 0.07, -0.998, 19.46, 16.046)" fill="url(#radial-gradient)"/>
+      <g id="组_13474-2" data-name="组 13474" transform="translate(31.815 23.676) rotate(135)">
+        <path id="路径_55456-2" data-name="路径 55456" d="M3.114,0H.359C.161,0,0,.434,0,.97V4.214H3.473V.97C3.473.434,3.312,0,3.114,0Z" transform="translate(3.368 0)" fill="url(#radial-gradient)"/>
+        <path id="路径_55459-2" data-name="路径 55459" d="M6.052,0H.7C.313,0,0,.434,0,.97V4.214H6.75V.97C6.751.434,6.438,0,6.052,0Z" transform="translate(1.729 11.267)" fill="url(#radial-gradient)"/>
+        <path id="路径_55458-2" data-name="路径 55458" d="M1.192,0l.75,3.4H0l.012.015,3.7,4.5L2.884,4.661H4.85ZM.039,3.42H1.966l0-.011L1.228.076,4.812,4.642H2.86l.811,3.2L.039,3.42Z" transform="translate(2.685 4.988)" fill="url(#radial-gradient)"/>
+        <path id="路径_55454-2" data-name="路径 55454" d="M9.989,9.9a.13.13,0,0,1-.118.139H.134A.13.13,0,0,1,.017,9.9s-.037-1.464,0-1.949C.111,6.711.584,4.275.665,3.035c0,0,0,0,0-.005.88-1.043,2.2-1.308,2.5-2.512A.623.623,0,0,1,3.733,0H6.272a.623.623,0,0,1,.572.518c.292,1.2,1.616,1.468,2.5,2.512,0,0,0,0,0,.005.081,1.24.554,3.676.648,4.915C10.026,8.435,9.989,9.9,9.989,9.9Z" transform="translate(0 3.654)" fill="url(#radial-gradient)"/>
+      </g>
+    </g>
+  </g>
+</svg>

static/sidebar/gasmonitor.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35.911" height="34.688" viewBox="0 0 35.911 34.688">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13848" data-name="组 13848" transform="translate(-1089 -6938)">
+    <g id="图标_瓦斯预警" transform="translate(1089 6938)" opacity="0.4">
+      <path id="路径_55296" data-name="路径 55296" d="M24.4,58.4a4.414,4.414,0,0,0-.943.09,10.522,10.522,0,0,1-3.771,3.232,5.06,5.06,0,0,0-.293,1.661v2.289a7.9,7.9,0,1,1-15.8,0V52.856a1.8,1.8,0,1,0-3.591,0V65.694a11.514,11.514,0,1,0,23.029-.022V63.4a1.4,1.4,0,1,1,2.806,0v6.038a1.8,1.8,0,1,0,3.591,0V63.4A5.058,5.058,0,0,0,24.4,58.4Z" transform="translate(0 -42.51)" fill="url(#radial-gradient)"/>
+      <path id="路径_55297" data-name="路径 55297" d="M53.119,62.494a5.028,5.028,0,0,0-3.771,3.232A10.272,10.272,0,0,0,53.119,62.494Zm-10.549,4.2c-.022.248-.022.472-.022.718V69.7a1.415,1.415,0,1,1-2.828,0V65.681A10.538,10.538,0,0,1,36.13,62.6V69.7a5.006,5.006,0,1,0,10.011-.022V67.408c0-.224,0-.426.022-.65a11.312,11.312,0,0,1-3.591-.068Zm12.5-10.75v.449a10.055,10.055,0,0,1-.472,3.1,7.972,7.972,0,0,1,7.362,7.922v6.038a1.819,1.819,0,0,0,.515,1.278,1.809,1.809,0,0,0,3.076-1.278V67.408A11.538,11.538,0,0,0,55.071,55.94Z" transform="translate(-29.643 -46.513)" fill="url(#radial-gradient)"/>
+      <path id="路径_55298" data-name="路径 55298" d="M42.32,3.44a9.45,9.45,0,1,0,9.45,9.45A9.45,9.45,0,0,0,42.32,3.44ZM41.289,20.284l1.031-6.358H38.2l5.148-8.477L42.32,11.8h4.117Z" transform="translate(-26.968 -3.44)" fill="url(#radial-gradient)"/>
+    </g>
+    <g id="图标_瓦斯预警-2" data-name="图标_瓦斯预警" transform="translate(1091.055 6939.985)">
+      <path id="路径_55296-2" data-name="路径 55296" d="M21.606,57.56a3.909,3.909,0,0,0-.835.08A9.318,9.318,0,0,1,17.432,60.5a4.481,4.481,0,0,0-.259,1.471V64A7,7,0,1,1,3.18,64V52.65a1.59,1.59,0,1,0-3.18,0V64.019A10.2,10.2,0,1,0,20.393,64V61.992a1.243,1.243,0,1,1,2.485,0v5.347a1.59,1.59,0,0,0,3.18,0V61.992A4.479,4.479,0,0,0,21.606,57.56Z" transform="translate(0 -43.488)" fill="url(#radial-gradient)"/>
+      <path id="路径_55297-2" data-name="路径 55297" d="M51.175,61.744a4.452,4.452,0,0,0-3.339,2.862A9.1,9.1,0,0,0,51.175,61.744ZM41.834,65.46c-.019.219-.019.418-.019.636v2.027a1.253,1.253,0,1,1-2.5,0V64.566a9.332,9.332,0,0,1-3.18-2.724v6.281A4.433,4.433,0,1,0,45,68.1V66.1c0-.2,0-.377.019-.576a10.017,10.017,0,0,1-3.18-.06Zm11.072-9.52v.4a8.9,8.9,0,0,1-.418,2.743A7.06,7.06,0,0,1,59.006,66.1v5.347a1.611,1.611,0,0,0,.456,1.132,1.6,1.6,0,0,0,2.724-1.132V66.1A10.218,10.218,0,0,0,52.9,55.94Z" transform="translate(-30.385 -47.592)" fill="url(#radial-gradient)"/>
+      <path id="路径_55298-2" data-name="路径 55298" d="M41.239,3.44a8.369,8.369,0,1,0,8.369,8.369A8.369,8.369,0,0,0,41.239,3.44Zm-.913,14.916.913-5.63H37.593l4.559-7.507-.913,5.624h3.646Z" transform="translate(-27.643 -3.44)" fill="url(#radial-gradient)"/>
+    </g>
+  </g>
+</svg>

static/sidebar/gate.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="30.141" viewBox="0 0 34 30.141">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13083" data-name="组 13083" transform="translate(-120.639 -264.789)">
+    <g id="图标_自动风门" transform="translate(120.639 264.789)" opacity="0.4">
+      <path id="路径_55283" data-name="路径 55283" d="M35.671,20.707V39.816l11.08,4.516V16.77ZM37.244,31.7c0,.318-.155.575-.35.575s-.35-.258-.35-.575V29.4c0-.318.158-.574.35-.574s.35.256.35.574ZM19.34,16.77V44.329l11.08-4.516V20.707ZM29.545,31.7c0,.318-.156.575-.35.575s-.34-.258-.34-.575V29.4c0-.318.156-.574.34-.574s.35.256.35.574Z" transform="translate(-16.046 -15.623)" fill="url(#radial-gradient)"/>
+      <path id="路径_55284" data-name="路径 55284" d="M33.039,38.329H31.534V11.917A2.023,2.023,0,0,0,29.495,9.91H4.413a2.023,2.023,0,0,0-2.039,2.007h0V38.329H.867a.879.879,0,0,0-.79.419.85.85,0,0,0,0,.883.879.879,0,0,0,.79.419H33.039a.879.879,0,0,0,.79-.419.85.85,0,0,0,0-.883A.879.879,0,0,0,33.039,38.329ZM13.453,15.612V33.523L4.121,37.328V12.285Zm1.208,19.3a.86.86,0,0,0,.542-.8V14.995a.859.859,0,0,0-.583-.81L7.437,11.629H26.468l-7.183,2.556a.859.859,0,0,0-.583.81V34.1a.86.86,0,0,0,.542.8l8.423,3.446H6.238ZM29.784,12.294V37.328l-9.33-3.805V15.612Z" transform="translate(0.047 -9.91)" fill="url(#radial-gradient)"/>
+    </g>
+    <g id="图标_自动风门-2" data-name="图标_自动风门" transform="translate(123.974 267.745)">
+      <path id="路径_55283-2" data-name="路径 55283" d="M32.467,19.935V35.294l8.906,3.63V16.77Zm1.265,8.832c0,.255-.124.462-.281.462s-.281-.207-.281-.462V26.922c0-.255.127-.461.281-.461s.281.206.281.461Zm-14.391-12V38.922l8.906-3.63V19.935Zm8.2,12c0,.255-.126.462-.281.462s-.273-.207-.273-.462V26.922c0-.255.126-.461.273-.461s.281.206.281.461Z" transform="translate(-16.692 -15.848)" fill="url(#radial-gradient)"/>
+      <path id="路径_55284-2" data-name="路径 55284" d="M26.547,32.753h-1.21V11.523A1.626,1.626,0,0,0,23.7,9.91H3.538A1.626,1.626,0,0,0,1.9,11.523h0V32.753H.687a.706.706,0,0,0-.635.337.683.683,0,0,0,0,.71.706.706,0,0,0,.635.337h25.86a.706.706,0,0,0,.635-.337.683.683,0,0,0,0-.71A.706.706,0,0,0,26.547,32.753ZM10.8,14.493v14.4L3.3,31.949V11.819ZM11.775,30a.691.691,0,0,0,.436-.641V14a.69.69,0,0,0-.468-.651L5.969,11.292h15.3l-5.773,2.054a.691.691,0,0,0-.468.651V29.355A.691.691,0,0,0,15.46,30l6.77,2.77H5ZM23.931,11.826V31.949l-7.5-3.059v-14.4Z" transform="translate(0.047 -9.91)" fill="url(#radial-gradient)"/>
+    </g>
+  </g>
+</svg>

static/sidebar/nitrogen.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.24" height="34" viewBox="0 0 18.24 34">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13840" data-name="组 13840" transform="translate(-127.311 -256.294)">
+    <g id="图层_2" data-name="图层 2" transform="translate(127.311 256.294)" opacity="0.4">
+      <g id="图层_1" data-name="图层 1" transform="translate(0 0)">
+        <path id="路径_55479" data-name="路径 55479" d="M5.216,34c-.656-.292-1.246-.549-1.824-.826-.077-.037-.1-.174-.1-.266-.008-.807-.011-1.614,0-2.417,0-.184-.077-.29-.284-.38a5.488,5.488,0,0,1-1.821-1.2,1.991,1.991,0,0,1-.59-1.946,2.035,2.035,0,0,0,.056-.525,2.275,2.275,0,0,1,.328-1.168,1.5,1.5,0,0,0,.127-.635c.023-.341.02-.683.02-1.024q0-6.181.007-12.362a1.432,1.432,0,0,0-.4-1.014,2.766,2.766,0,0,1,.713-4.3c.69-.434,1.334-.912,2.027-1.346a9.437,9.437,0,0,1,4.289-1.4c.246-.021.385-.094.351-.3a.432.432,0,0,1,0-.151c.051-.267-.066-.424-.417-.53a.979.979,0,0,1-.819-.879A.979.979,0,0,1,7.663.247a4.376,4.376,0,0,1,2.994.034.961.961,0,0,1,.7,1.114.864.864,0,0,1-.742.778c-.556.132-.642.4-.576.769.009.05.007.1.012.177.4.05.806.1,1.206.16a8.362,8.362,0,0,1,4.36,1.929,9.815,9.815,0,0,0,1.057.666,2.989,2.989,0,0,1,1.493,1.861,2.72,2.72,0,0,1-.6,2.457,1.9,1.9,0,0,0-.542,1.286c.017,4.054.007,8.107.009,12.161,0,.425.016.85.037,1.274a.421.421,0,0,0,.109.232,2.572,2.572,0,0,1,.424,2.071,2.985,2.985,0,0,1-1.808,2.525.6.6,0,0,0-.384.605c.02.813,0,1.628.012,2.442a.371.371,0,0,1-.283.378c-.488.2-.966.422-1.439.645a.5.5,0,0,1-.475.006q-.752-.353-1.526-.68a.322.322,0,0,1-.243-.342c.012-.555,0-1.1,0-1.69-.55.037-1.049.094-1.543.1-.8.006-1.609-.018-2.413-.042-.234-.007-.276.073-.275.222,0,.512.007,1.024,0,1.536a.308.308,0,0,1-.117.262c-.57.274-1.156.529-1.8.82" transform="translate(0.007 0)" fill="url(#radial-gradient)"/>
+      </g>
+    </g>
+    <g id="图层_2-2" data-name="图层 2" transform="translate(128.555 258.614)">
+      <g id="图层_1-2" data-name="图层 1" transform="translate(0 0)">
+        <path id="路径_55479-2" data-name="路径 55479" d="M4.5,29.359c-.566-.252-1.076-.474-1.575-.713-.067-.032-.089-.151-.091-.23-.007-.7-.01-1.394,0-2.087,0-.159-.067-.25-.245-.328a4.739,4.739,0,0,1-1.572-1.039,1.719,1.719,0,0,1-.51-1.68,1.757,1.757,0,0,0,.048-.454,1.965,1.965,0,0,1,.283-1.009,1.293,1.293,0,0,0,.109-.549c.02-.294.018-.59.018-.885q0-5.338.006-10.676a1.236,1.236,0,0,0-.348-.876,2.389,2.389,0,0,1,.616-3.713c.6-.375,1.152-.788,1.751-1.162A8.15,8.15,0,0,1,6.7,2.747c.212-.018.332-.081.3-.261a.373.373,0,0,1,0-.131c.044-.231-.057-.366-.36-.457a.846.846,0,0,1-.707-.759A.845.845,0,0,1,6.617.213,3.779,3.779,0,0,1,9.2.243a.83.83,0,0,1,.6.962.746.746,0,0,1-.641.672c-.48.114-.554.344-.5.664.007.044.006.087.01.153.349.044.7.087,1.042.138A7.221,7.221,0,0,1,13.484,4.5a8.476,8.476,0,0,0,.913.575,2.581,2.581,0,0,1,1.29,1.607,2.349,2.349,0,0,1-.52,2.121A1.639,1.639,0,0,0,14.7,9.911c.015,3.5.006,7,.008,10.5,0,.367.014.734.032,1.1a.364.364,0,0,0,.094.2A2.221,2.221,0,0,1,15.2,23.5a2.577,2.577,0,0,1-1.561,2.181.521.521,0,0,0-.331.523c.017.7,0,1.406.01,2.109a.32.32,0,0,1-.244.327c-.421.174-.834.364-1.243.557a.431.431,0,0,1-.41.005q-.65-.305-1.317-.588a.278.278,0,0,1-.209-.3c.01-.479,0-.954,0-1.459-.475.032-.906.081-1.332.084-.694,0-1.389-.015-2.083-.037-.2-.006-.238.063-.237.192,0,.442.006.884,0,1.326a.266.266,0,0,1-.1.226c-.492.236-1,.456-1.557.708" transform="translate(0.007 0)" fill="url(#radial-gradient)"/>
+      </g>
+    </g>
+  </g>
+</svg>

static/sidebar/obfurage.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="34" viewBox="0 0 34 34">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13838" data-name="组 13838" transform="translate(-124 -259.627)">
+    <g id="组_13808" data-name="组 13808" transform="translate(124 259.627)" opacity="0.4">
+      <path id="路径_55289" data-name="路径 55289" d="M81,64A17,17,0,1,0,98,81,17,17,0,0,0,81,64ZM91.3,91.3a14.538,14.538,0,1,1,3.123-4.633A14.509,14.509,0,0,1,91.3,91.3Z" transform="translate(-64 -64)" fill="url(#radial-gradient)"/>
+      <path id="路径_55290" data-name="路径 55290" d="M204.913,192.8a12.112,12.112,0,1,0,12.113,12.112A12.112,12.112,0,0,0,204.913,192.8ZM203.7,214.52a9.5,9.5,0,0,1-2.554-.687,9.685,9.685,0,0,1-5.84-7.707h2.425A7.289,7.289,0,0,0,203.7,212.1Zm0-16.791a7.289,7.289,0,0,0-5.969,5.969H195.3a9.5,9.5,0,0,1,.687-2.554,9.685,9.685,0,0,1,7.707-5.84Zm10.135,10.951a9.685,9.685,0,0,1-7.707,5.84V212.1a7.289,7.289,0,0,0,5.969-5.969h2.425A9.5,9.5,0,0,1,213.834,208.68Zm.687-4.982H212.1a7.289,7.289,0,0,0-5.969-5.969V195.3a9.5,9.5,0,0,1,2.554.687,9.726,9.726,0,0,1,5.153,5.153A9.5,9.5,0,0,1,214.521,203.7Z" transform="translate(-187.913 -187.912)" fill="url(#radial-gradient)"/>
+    </g>
+    <g id="组_13815" data-name="组 13815" transform="translate(127.165 262.792)">
+      <path id="路径_55289-2" data-name="路径 55289" d="M77.835,64A13.835,13.835,0,1,0,91.669,77.835,13.836,13.836,0,0,0,77.835,64Zm8.384,22.219a11.831,11.831,0,1,1,2.541-3.771A11.808,11.808,0,0,1,86.219,86.219Z" transform="translate(-64 -64)" fill="url(#radial-gradient)"/>
+      <path id="路径_55290-2" data-name="路径 55290" d="M202.657,192.8a9.857,9.857,0,1,0,9.857,9.857A9.857,9.857,0,0,0,202.657,192.8Zm-.988,17.676a7.731,7.731,0,0,1-2.078-.559,7.882,7.882,0,0,1-4.753-6.272h1.973a5.932,5.932,0,0,0,4.857,4.857Zm0-13.665a5.932,5.932,0,0,0-4.857,4.858h-1.973a7.731,7.731,0,0,1,.559-2.078,7.882,7.882,0,0,1,6.272-4.753Zm8.248,8.912a7.882,7.882,0,0,1-6.272,4.753V208.5a5.932,5.932,0,0,0,4.857-4.857h1.973A7.729,7.729,0,0,1,209.917,205.723Zm.559-4.055H208.5a5.932,5.932,0,0,0-4.857-4.858v-1.973a7.729,7.729,0,0,1,2.078.559,7.915,7.915,0,0,1,4.194,4.194A7.729,7.729,0,0,1,210.476,201.669Z" transform="translate(-188.823 -188.822)" fill="url(#radial-gradient)"/>
+    </g>
+  </g>
+</svg>

static/sidebar/pulping.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="29.597" height="35" viewBox="0 0 29.597 35">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13819" data-name="组 13819" transform="translate(-125.859 -255.993)">
+    <path id="路径_55478" data-name="路径 55478" d="M28.6,2.826v.166a4.872,4.872,0,0,0-.048.488V14.807a4.865,4.865,0,0,0,.048.489v.083c-.135.189-.285.368-.406.566q-2.949,4.837-5.891,9.677c-.7,1.156-1.406,2.314-2.13,3.506l3.439,2.18V34H8.479V31.292l3.47-2.21L8.737,24.933q-3.542-4.58-7.094-9.153a1.384,1.384,0,0,1-.313-.932c.011-2.962.006-5.925.006-8.887V5.38L0,5.57V3.907l1.334.062V3.535c0-.855,0-.861.849-1.052C2.65,2.376,3.123,2.3,3.6,2.2c.009-.092.014-.16.022-.228.04-.318.011-.873.135-.909A1.03,1.03,0,0,0,4.469.452c.032-.068.2-.07.305-.106C5.1.232,5.415.116,5.736,0h.249A1.135,1.135,0,0,0,7.3.755C8.943.659,10.592.6,12.237.61c3.543.017,7.087.071,10.629.139,1.008.02,2.014.14,3.021.212.291.021.41.161.382.46a6.766,6.766,0,0,0,0,.693ZM4.572.739l.037.138L6.061.77,6.082.622C5.953.548,5.808.392,5.7.416A11.146,11.146,0,0,0,4.572.739Z" transform="translate(126.359 256.493)" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0.4" fill="url(#radial-gradient)"/>
+    <path id="路径_55480" data-name="路径 55480" d="M23.3,2.3v.135a3.969,3.969,0,0,0-.039.4v9.227a3.964,3.964,0,0,0,.039.4v.068c-.11.154-.232.3-.33.461q-2.4,3.941-4.8,7.884c-.574.942-1.145,1.885-1.735,2.856l2.8,1.776V27.7H6.908V25.493l2.827-1.8-2.617-3.38q-2.886-3.732-5.779-7.456a1.128,1.128,0,0,1-.255-.759c.009-2.413,0-4.827,0-7.24V4.383L0,4.537V3.183l1.087.05V2.88c0-.7,0-.7.691-.857.381-.087.766-.152,1.155-.229.007-.075.012-.131.018-.186.033-.259.009-.711.11-.741a.839.839,0,0,0,.579-.5C3.667.313,3.8.312,3.889.282,4.151.189,4.411.094,4.673,0h.2A.925.925,0,0,0,5.947.615C7.286.537,8.629.491,9.969.5c2.886.014,5.773.058,8.659.113.821.016,1.641.114,2.461.173.237.017.334.131.311.375a5.512,5.512,0,0,0,0,.565ZM3.725.6l.03.112L4.938.627,4.955.507c-.1-.06-.223-.188-.312-.168A9.081,9.081,0,0,0,3.725.6Z" transform="translate(129.009 259.644)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#radial-gradient)"/>
+  </g>
+</svg>

static/sidebar/pump.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.78" height="34.032" viewBox="0 0 24.78 34.032">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13850" data-name="组 13850" transform="translate(-140.534 -259.13)">
+    <g id="组_13850-2" data-name="组 13850" transform="translate(2.294 259.13)" opacity="0.4">
+      <path id="路径_55509" data-name="路径 55509" d="M325.411,267.573a5.637,5.637,0,0,0-5.488,5.807,5.552,5.552,0,0,0,5.679,5.445h.17a5.637,5.637,0,1,0-.362-11.252Z" transform="translate(-175.643 -258.661)" fill="url(#radial-gradient)"/>
+      <path id="路径_55510" data-name="路径 55510" d="M160.467,14.889V3.4h2.552V0h-8.508V3.4h2.531V6.764a10.635,10.635,0,0,0-17.654,8.125,10.4,10.4,0,0,0,5.126,8.721L138.24,34.032h23.4l-6.275-10.465a11.039,11.039,0,0,0,2.3-1.808,10.359,10.359,0,0,0,2.808-6.87Zm-5.3,4.552a7.126,7.126,0,0,1-5,2.255h-.362a7.019,7.019,0,0,1-7.019-6.806,7.147,7.147,0,0,1,6.913-7.53h.255a7.168,7.168,0,0,1,5.211,12.081Z" transform="translate(0)" fill="url(#radial-gradient)"/>
+    </g>
+    <g id="组_13851" data-name="组 13851" transform="translate(3.823 261.229)">
+      <path id="路径_55509-2" data-name="路径 55509" d="M324.734,267.57a4.941,4.941,0,0,0-4.811,5.09,4.867,4.867,0,0,0,4.978,4.773h.149a4.941,4.941,0,1,0-.317-9.864Z" transform="translate(-176.388 -259.758)" fill="url(#radial-gradient)"/>
+      <path id="路径_55510-2" data-name="路径 55510" d="M157.725,13.052V2.983h2.237V0H152.5V2.983h2.219V5.929a9.323,9.323,0,0,0-15.476,7.123A9.118,9.118,0,0,0,143.74,20.7l-5.5,9.136h20.51l-5.5-9.174a9.676,9.676,0,0,0,2.014-1.585,9.08,9.08,0,0,0,2.461-6.023Zm-4.643,3.99a6.246,6.246,0,0,1-4.382,1.976h-.317a6.153,6.153,0,0,1-6.153-5.967,6.265,6.265,0,0,1,6.06-6.6h.224a6.284,6.284,0,0,1,4.568,10.591Z" transform="translate(0)" fill="url(#radial-gradient)"/>
+    </g>
+  </g>
+</svg>

static/sidebar/spray.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.149" height="32.498" viewBox="0 0 40.149 32.498">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13832" data-name="组 13832" transform="translate(-132.106 -259.604)">
+    <path id="路径_55503" data-name="路径 55503" d="M85.274,132.275V128H52.024v4.275Zm-13.937,7.96v-7.126H66.52v7.126ZM60.008,141.55a1.035,1.035,0,1,0,.476-1.384A1.035,1.035,0,0,0,60.008,141.55Zm16.208.476a1.035,1.035,0,1,0-.476-1.384A1.035,1.035,0,0,0,76.216,142.025Zm4.273,2.549a1.478,1.478,0,1,0-.68-1.976,1.478,1.478,0,0,0,.68,1.976Zm-25.323-.633a1.478,1.478,0,1,0,.68-1.976A1.478,1.478,0,0,0,55.166,143.941ZM49.5,146.672a1.922,1.922,0,1,0,.911-2.519,1.922,1.922,0,0,0-.911,2.519Zm36.035.882a1.92,1.92,0,1,0-.886-2.566,1.921,1.921,0,0,0,.886,2.566ZM62.562,146.52a1.035,1.035,0,1,0-.279-1.436A1.035,1.035,0,0,0,62.562,146.52Zm11.046-.278a1.035,1.035,0,1,0,.279-1.436A1.035,1.035,0,0,0,73.608,146.242ZM68.8,147.8a1.034,1.034,0,1,0-1.034-1.034A1.034,1.034,0,0,0,68.8,147.8Zm7.23,2.779a1.477,1.477,0,1,0,.4-2.05,1.477,1.477,0,0,0-.4,2.05Zm-16.47.433a1.477,1.477,0,1,0-.4-2.051,1.477,1.477,0,0,0,.4,2.051Zm9.266,2.2a1.478,1.478,0,1,0-1.478-1.478A1.478,1.478,0,0,0,68.831,153.213Zm-12.8,3a1.921,1.921,0,1,0-.519-2.667,1.921,1.921,0,0,0,.519,2.667Zm22.888-.518a1.921,1.921,0,1,0,.518-2.667,1.921,1.921,0,0,0-.518,2.667ZM68.8,159.5a1.921,1.921,0,1,0-1.921-1.921A1.921,1.921,0,0,0,68.8,159.5Z" transform="translate(83.404 132.104)" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0.4" fill="url(#radial-gradient)"/>
+    <path id="路径_55504" data-name="路径 55504" d="M81.162,131.786V128H51.716v3.786ZM68.82,138.835v-6.311H64.553v6.311ZM58.787,140a.916.916,0,1,0,.421-1.226A.916.916,0,0,0,58.787,140Zm14.354.421a.916.916,0,1,0-.421-1.226A.916.916,0,0,0,73.14,140.421Zm3.784,2.257a1.309,1.309,0,1,0-.6-1.75A1.309,1.309,0,0,0,76.924,142.678ZM54.5,142.117a1.309,1.309,0,1,0,.6-1.75A1.309,1.309,0,0,0,54.5,142.117Zm-5.016,2.418a1.7,1.7,0,1,0,.807-2.231,1.7,1.7,0,0,0-.807,2.231Zm31.912.781a1.7,1.7,0,1,0-.784-2.273,1.7,1.7,0,0,0,.784,2.273ZM61.049,144.4a.916.916,0,1,0-.247-1.272A.916.916,0,0,0,61.049,144.4Zm9.782-.246a.916.916,0,1,0,.247-1.272A.916.916,0,0,0,70.831,144.155Zm-4.255,1.384a.916.916,0,1,0-.916-.916A.916.916,0,0,0,66.576,145.539Zm6.4,2.461a1.308,1.308,0,1,0,.353-1.815A1.308,1.308,0,0,0,72.979,148Zm-14.586.383a1.308,1.308,0,1,0-.354-1.816,1.308,1.308,0,0,0,.354,1.816Zm8.206,1.945a1.309,1.309,0,1,0-1.309-1.309A1.309,1.309,0,0,0,66.6,150.328Zm-11.339,2.655a1.7,1.7,0,1,0-.459-2.362,1.7,1.7,0,0,0,.459,2.362Zm20.269-.459a1.7,1.7,0,1,0,.459-2.362,1.7,1.7,0,0,0-.459,2.362Zm-8.954,3.37a1.7,1.7,0,1,0-1.7-1.7A1.7,1.7,0,0,0,66.576,155.894Z" transform="translate(85.636 133.906)" stroke="rgba(0,0,0,0)" stroke-width="1" fill="url(#radial-gradient)"/>
+  </g>
+</svg>

static/sidebar/window.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="28" viewBox="0 0 34 28">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13833" data-name="组 13833" transform="translate(-123.972 -262.222)">
+    <g id="组_13081" data-name="组 13081" transform="translate(123.972 262.222)" opacity="0.4">
+      <path id="矩形_4115" data-name="矩形 4115" d="M2,2V26H32V2H2M0,0H34V28H0Z" fill="url(#radial-gradient)"/>
+      <rect id="矩形_4116" data-name="矩形 4116" width="20.425" height="4.642" transform="translate(6.661 5.922)" fill="url(#radial-gradient)"/>
+      <rect id="矩形_4117" data-name="矩形 4117" width="20.425" height="2.785" transform="translate(6.661 16.251)" fill="url(#radial-gradient)"/>
+      <rect id="矩形_4120" data-name="矩形 4120" width="20.425" height="2.785" transform="translate(6.661 12.215)" fill="url(#radial-gradient)"/>
+      <rect id="矩形_4118" data-name="矩形 4118" width="20.425" height="1.857" transform="translate(6.661 20.777)" fill="url(#radial-gradient)"/>
+      <path id="矩形_4119" data-name="矩形 4119" d="M2,2V16H20V2H2M0,0H22V18H0Z" transform="translate(6 6)" fill="url(#radial-gradient)"/>
+    </g>
+    <g id="组_13082" data-name="组 13082" transform="translate(125.74 263.678)">
+      <path id="矩形_4115-2" data-name="矩形 4115" d="M1.792,1.792V23.3H28.671V1.792H1.792M0,0H30.463V25.087H0Z" transform="translate(0)" fill="url(#radial-gradient)"/>
+      <rect id="矩形_4116-2" data-name="矩形 4116" width="18.301" height="4.159" transform="translate(5.968 5.306)" fill="url(#radial-gradient)"/>
+      <rect id="矩形_4117-2" data-name="矩形 4117" width="18.301" height="2.496" transform="translate(5.968 14.827)" fill="url(#radial-gradient)"/>
+      <rect id="矩形_4119-2" data-name="矩形 4119" width="18.301" height="2.496" transform="translate(5.968 11.038)" fill="url(#radial-gradient)"/>
+      <rect id="矩形_4118-2" data-name="矩形 4118" width="18.301" height="1.664" transform="translate(5.968 18.616)" fill="url(#radial-gradient)"/>
+      <path id="矩形_4119-3" data-name="矩形 4119" d="M1.792,1.792V14.336H17.919V1.792H1.792M0,0H19.711V16.128H0Z" transform="translate(5.376 5.376)" fill="url(#radial-gradient)"/>
+    </g>
+  </g>
+</svg>

static/sidebar/windrect.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33.552" height="33.57" viewBox="0 0 33.552 33.57">
+  <defs>
+    <radialGradient id="radial-gradient" cx="0.146" cy="0.042" r="1.072" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#eb947b"/>
+      <stop offset="0.505" stop-color="#faa000"/>
+      <stop offset="0.793" stop-color="#febd10"/>
+      <stop offset="1" stop-color="#fec421"/>
+    </radialGradient>
+  </defs>
+  <g id="组_13857" data-name="组 13857" transform="translate(1610.852 -5459)">
+    <g id="图标_一键测风" transform="translate(-1610.852 5459)" opacity="0.4">
+      <path id="路径_55281" data-name="路径 55281" d="M15.64,12.4H28.113A6.2,6.2,0,1,0,23.846,1.759a6.279,6.279,0,0,0-1.363,1.966A1.694,1.694,0,1,0,25.6,5.054a2.814,2.814,0,1,1,2.531,3.958H15.64a1.7,1.7,0,0,0,0,3.389Zm.557,9.042.024,1.7Zm18.556-.274-16.092.237-.772.012a1.7,1.7,0,0,0,.052,3.389l.772-.012c4.7-.07,15.64-.233,16.051-.237A2.811,2.811,0,1,1,32.176,28.5a1.694,1.694,0,0,0-3.11,1.343,6.108,6.108,0,0,0,1.363,1.966A6.2,6.2,0,1,0,34.76,21.169Z" transform="translate(-11.666 0)" fill="url(#radial-gradient)"/>
+      <path id="路径_55282" data-name="路径 55282" d="M29.769,38.832a1.678,1.678,0,0,0-2.278,1.559v.055a1.668,1.668,0,0,0,1.039,1.548,2.813,2.813,0,0,1-1.042,5.427H1.75a1.7,1.7,0,0,0,0,3.389H27.491a6.21,6.21,0,0,0,2.278-11.971Z" transform="translate(-0.108 -32.222)" fill="url(#radial-gradient)"/>
+    </g>
+    <g id="图标_一键测风-2" data-name="图标_一键测风" transform="translate(-1608.827 5461.027)">
+      <path id="路径_55281-2" data-name="路径 55281" d="M15.442,10.9H26.409a5.452,5.452,0,1,0-3.752-9.357,5.521,5.521,0,0,0-1.2,1.728A1.489,1.489,0,1,0,24.2,4.444a2.474,2.474,0,1,1,2.226,3.48H15.442a1.491,1.491,0,0,0,0,2.98Zm.49,7.95.021,1.491Zm16.316-.241L18.1,18.822l-.679.01a1.491,1.491,0,0,0,.046,2.98l.679-.01c4.132-.062,13.752-.205,14.114-.208a2.472,2.472,0,1,1-2.276,3.47,1.489,1.489,0,0,0-2.735,1.181,5.371,5.371,0,0,0,1.2,1.728,5.453,5.453,0,1,0,3.808-9.358Z" transform="translate(-11.948 0)" fill="url(#radial-gradient)"/>
+      <path id="路径_55282-2" data-name="路径 55282" d="M26.188,38.818a1.476,1.476,0,0,0-2,1.371v.049A1.467,1.467,0,0,0,25.1,41.6a2.474,2.474,0,0,1-.917,4.771H1.551a1.491,1.491,0,0,0,0,2.98H24.185a5.461,5.461,0,0,0,2-10.526Z" transform="translate(-0.108 -33.006)" fill="url(#radial-gradient)"/>
+    </g>
+  </g>
+</svg>

store/index.js

@@ -14,6 +14,7 @@ export default new Vuex.Store({
     realname: '',
     welcome: '',
     avatar: '',
+    dicts: '',
     showColum: {}
   },
   mutations: {
@@ -30,6 +31,9 @@ export default new Vuex.Store({
     },
     SET_SHOWCOLUM: (state, showColum) => {
       state.showColum = showColum
+    },
+    SET_DICT: (state, dicts) => {
+      state.dicts = dicts
     }
   },
   actions: {
@@ -43,6 +47,7 @@ export default new Vuex.Store({
 			uni.setStorageSync(ACCESS_TOKEN,result.token);
 			uni.setStorageSync(USER_INFO,userInfo);
             commit('SET_TOKEN', result.token)
+            commit('SET_DICT', result.sysAllDictItems)
             commit('SET_AVATAR', userInfo.avatar)
             commit('SET_NAME', { username: userInfo.username,realname: userInfo.realname})
             resolve(response)