邓洁 : 完善首页

src/components/content/airInfo/AirInfo.vue

@@ -1,13 +1,12 @@
 <template>
   <div id="air-info">
     <div class="fan-speed">
-      <img src="../../../../public/images/airInfo/fan-v-icon.png" alt="" />
+      <img src="/images/airInfo/fan-v-icon.png" alt="" />
       <div class="fan-info">
         <div class="input-fan"><span>风速</span><span>进风：13m/s</span></div>
         <div class="output-fan"><span>风速</span><span>出风：13m/s</span></div>
       </div>
     </div>
-    unit="%"
     <item-info
       :wp="info"
       icon="/images/airInfo/o2-icon.png"

src/components/content/fanInfo/FanInfo.vue

@@ -11,21 +11,21 @@
         <div class="option-nav">
           <div class="state">
             <div :class="{ stopColor: !isStart }">
-              <span> <img :src="stateIcon1" alt="" />状态：</span
+              <span> <img :src="stateIcon1" alt=""/>状态：</span
               ><span>{{ state }}</span>
             </div>
             <div class="switch">
               <div
-                id="auto"
+                  id="auto"
-                :class="{ active: isStart }"
+                  :class="{ active: isStart }"
-                @click="isStart = true"
+                  @click="isStart = true"
               >
                 启动
               </div>
               <div
-                id="stop"
+                  id="stop"
-                :class="{ active: !isStart }"
+                  :class="{ active: !isStart }"
-                @click="isStart = false"
+                  @click="isStart = false"
               >
                 停止
               </div>
@@ -41,7 +41,7 @@
             <div class="edit-power">
               <span style="color: white">当前功率</span>
               <span class="units"
-                ><input
+              ><input
                   type="number"
                   min="0"
                   v-model="fan01_option.series[0].data[0].value"
@@ -61,21 +61,21 @@
         <div class="option-nav">
           <div class="state">
             <div :class="{ stopColor: !isStart2 }">
-              <span><img :src="stateIcon2" alt="" />状态：{{ state2 }}</span
+              <span><img :src="stateIcon2" alt=""/>状态：{{ state2 }}</span
               ><span></span>
             </div>
             <div class="switch">
               <div
-                id="auto"
+                  id="auto"
-                :class="{ active: isStart2 }"
+                  :class="{ active: isStart2 }"
-                @click="isStart2 = true"
+                  @click="isStart2 = true"
               >
                 启动
               </div>
               <div
-                id="stop"
+                  id="stop"
-                :class="{ active: !isStart2 }"
+                  :class="{ active: !isStart2 }"
-                @click="isStart2 = false"
+                  @click="isStart2 = false"
               >
                 停止
               </div>
@@ -91,7 +91,7 @@
             <div class="edit-power">
               <span style="color: white">当前功率</span>
               <span class="units"
-                ><input
+              ><input
                   type="number"
                   min="0"
                   v-model="fan02_option.series[0].data[0].value"
@@ -107,7 +107,7 @@
 
 <script setup>
 import * as echarts from "echarts";
-import { ref, reactive, onMounted, computed, watch } from "vue";
+import {ref, reactive, onMounted, computed, watch} from "vue";
 
 onMounted(handleOnMounted);
 
@@ -184,8 +184,7 @@ const option = {
               },
             ],
             global: false, // 缺省为 false
-          },
+          }
-          borderWidth: 10,
         },
       },
       max: 1000,
@@ -295,8 +294,7 @@ const option2 = {
               },
             ],
             global: false, // 缺省为 false
-          },
+          }
-          borderWidth: 10,
         },
       },
       max: 1000,
@@ -340,8 +338,9 @@ const option2 = {
   ],
 };
 
-const fan01_option = reactive(option, { deep: true });
+const fan01_option = reactive(option, {deep: true});
-const fan02_option = reactive(option2, { deep: true });
+const fan02_option = reactive(option2, {deep: true});
+
 function handleOnMounted() {
   Echarts_info1 = echarts.init(info1.value);
   Echarts_info1.setOption(fan01_option);
@@ -363,18 +362,18 @@ let state = computed(() => {
   return isStart.value ? "启动" : "停止";
 });
 const stateIcon1 = computed(() =>
-  isStart.value
+    isStart.value
-    ? "/images/fanInfo/blue-state-icon.png"
+        ? "/images/fanInfo/blue-state-icon.png"
-    : "/images/fanInfo/red-state-icon.png"
+        : "/images/fanInfo/red-state-icon.png"
 );
 const isStart2 = ref(true);
 let state2 = computed(() => {
   return isStart2.value ? "启动" : "停止";
 });
 const stateIcon2 = computed(() =>
-  isStart2.value
+    isStart2.value
-    ? "/images/fanInfo/blue-state-icon.png"
+        ? "/images/fanInfo/blue-state-icon.png"
-    : "/images/fanInfo/red-state-icon.png"
+        : "/images/fanInfo/red-state-icon.png"
 );
 let is = ref("isInput");
 // 功率是否自动
@@ -392,12 +391,14 @@ let isSAuto2 = ref("false");
   align-items: center;
   justify-content: center;
 }
+
 ::v-deep .el-radio__label {
   font-size: 28px;
   font-family: MicrosoftYaHei;
   color: #38cafb;
   line-height: 37px;
 }
+
 #fan_info {
   height: 521px;
   width: 830px;
@@ -413,6 +414,7 @@ let isSAuto2 = ref("false");
   background-repeat: no-repeat;
   //clip-path: polygon(0% 0%, 40% 0%, 48% 15%, 100% 15%, 100% 100%, 0% 100%);
   color: #2fb0df;
+
   .title {
     width: 40%;
     text-align: left;
@@ -424,12 +426,15 @@ let isSAuto2 = ref("false");
     color: #38cafb;
     line-height: 42px;
   }
+
   .fans {
     height: calc(100% - 30px);
+
     .fan-item {
       height: 50%;
       display: flex;
       font-size: 14px;
+
       .echart {
         height: 100%;
         width: 30%;
@@ -448,6 +453,7 @@ let isSAuto2 = ref("false");
         left: 50%;
         transform: translate(-50%, 60%);
       }
+
       .fan-name {
         width: 39px;
         height: 140px;
@@ -459,9 +465,11 @@ let isSAuto2 = ref("false");
         margin-right: 42px;
         transform: translateY(33%);
       }
+
       .option-nav {
         display: flex;
         width: 70%;
+
         .state {
           flex: 1;
           display: flex;
@@ -472,10 +480,12 @@ let isSAuto2 = ref("false");
           color: #38cafb;
           line-height: 35px;
           gap: 33px;
+
           img {
             margin-right: 4px;
             transform: translateY(15%);
           }
+
           .switch {
             display: flex;
             width: 160px;
@@ -487,6 +497,7 @@ let isSAuto2 = ref("false");
             font-weight: bold;
             color: #127399;
             line-height: 35px;
+
             & > div {
               flex: 1;
               text-align: center;
@@ -506,6 +517,7 @@ let isSAuto2 = ref("false");
           color: #38cafb;
           line-height: 37px;
           gap: 33px;
+
           .edit-power {
             margin-top: 10px;
 
@@ -528,9 +540,11 @@ let isSAuto2 = ref("false");
     }
   }
 }
+
 .units {
   position: relative;
 }
+
 .units::after {
   content: "Hz";
 
@@ -543,10 +557,12 @@ let isSAuto2 = ref("false");
   color: #38cafb;
   line-height: 37px;
 }
+
 .active {
   color: white;
   background: #0f7da9;
 }
+
 .stopColor {
   color: red;
 }

src/views/tunnel/index.vue

@@ -50,7 +50,6 @@
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
     </div>
-
     <div class="switch-btn">
       <div class="arrow" @click="previousBtn"></div>
       <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false">
@@ -62,8 +61,6 @@
       </el-carousel>
       <div class="arrow right" @click="nextBtn"></div>
     </div>
-
-
   </div>
 </template>
 
@@ -87,7 +84,7 @@ const drawerRight = ref(true)
 const currentSite = ref('松江站')
 const currentUser = ref('admin')
 const currentDate = ref(dateFormat())
-const tunnelBtn=ref()
+const tunnelBtn = ref()
 const tunnelList = ref([
   {
     value: 0,
@@ -130,8 +127,6 @@ const previousBtn = () => {
 }
 const nextBtn = () => {
   tunnelBtn.value.next();
-  // tunnelList.value.push(tunnelList.value.shift())
-  // console.log('tunnelList.value', tunnelList.value)
 }
 </script>