排水系统

src/common/m3u8.vue

@@ -16,7 +16,7 @@ export default {
   props: {
     src: {
       type: String,
-      default: "http://stream.snrtv.com/sxbc-star-noquyZ.m3u8",
+      default: "123",
     },
   },
   data() {

src/views/compressed/configImg/configImg.vue

@@ -4,112 +4,52 @@
       <el-header>
         <div>
           <img
-            style="margin-top:10px"
+            style="margin-top: 10px"
             src="@/assets/img/compressed/back.png"
             id="imgSwitch"
           />
         </div>
         <div id="fan">
           <div class="fan1">
-            <ul :class="{
+            <ul
+              :class="{
                 blades: tableData[0].isStart,
                 bld: !tableData[0].isStart,
-              }">
-              <li :class="[
-                  'b1',
-                  !tableData[0].isAlarm
-                    ? !tableData[0].isWarning
-                      ? 'green'
-                      : 'red'
-                    : 'red',
-                ]"></li>
-              <li :class="[
-                  'b2',
-                  !tableData[0].isAlarm
-                    ? !tableData[0].isWarning
-                      ? 'green'
-                      : 'red'
-                    : 'red',
-                ]"></li>
-              <li :class="[
-                  'b3',
-                  !tableData[0].isAlarm
-                    ? !tableData[0].isWarning
-                      ? 'green'
-                      : 'red'
-                    : 'red',
-                ]"></li>
+              }"
+            >
+              <li :class="['b1', tableData[0].isStart ? 'green' : 'red']"></li>
+              <li :class="['b2', tableData[0].isStart ? 'green' : 'red']"></li>
+              <li :class="['b3', tableData[0].isStart ? 'green' : 'red']"></li>
             </ul>
           </div>
           <div class="fan2">
-            <ul :class="{
+            <ul
+              :class="{
                 blades: tableData[1].isStart,
                 bld: !tableData[1].isStart,
-              }">
-              <li :class="[
-                  'b1',
-                  !tableData[1].isAlarm
-                    ? !tableData[1].isWarning
-                      ? 'green'
-                      : 'red'
-                    : 'red',
-                ]"></li>
-              <li :class="[
-                  'b2',
-                  !tableData[1].isAlarm
-                    ? !tableData[1].isWarning
-                      ? 'green'
-                      : 'red'
-                    : 'red',
-                ]"></li>
-              <li :class="[
-                  'b3',
-                  !tableData[1].isAlarm
-                    ? !tableData[1].isWarning
-                      ? 'green'
-                      : 'red'
-                    : 'red',
-                ]"></li>
+              }"
+            >
+              <li :class="['b1', tableData[1].isStart ? 'green' : 'red']"></li>
+              <li :class="['b2', tableData[1].isStart ? 'green' : 'red']"></li>
+              <li :class="['b3', tableData[1].isStart ? 'green' : 'red']"></li>
             </ul>
           </div>
           <div class="fan3">
-            <ul :class="{
+            <ul
+              :class="{
                 blades: tableData[2].isStart,
                 bld: !tableData[2].isStart,
-              }">
-              <li :class="[
-                  'b1',
-                  !tableData[2].isAlarm
-                    ? !tableData[2].isWarning
-                      ? 'green'
-                      : 'red'
-                    : 'red',
-                ]"></li>
-              <li :class="[
-                  'b2',
-                  !tableData[2].isAlarm
-                    ? !tableData[2].isWarning
-                      ? 'green'
-                      : 'red'
-                    : 'red',
-                ]"></li>
-              <li :class="[
-                  'b3',
-                  !tableData[2].isAlarm
-                    ? !tableData[2].isWarning
-                      ? 'green'
-                      : 'red'
-                    : 'red',
-                ]"></li>
+              }"
+            >
+              <li :class="['b1', tableData[2].isStart ? 'green' : 'red']"></li>
+              <li :class="['b2', tableData[2].isStart ? 'green' : 'red']"></li>
+              <li :class="['b3', tableData[2].isStart ? 'green' : 'red']"></li>
             </ul>
           </div>
         </div>
       </el-header>
       <el-main>
-        <el-row
-          style="margin-top: 80px"
-          :gutter="20"
-        >
+        <el-row style="margin-top: 80px" :gutter="20">
           <el-col :span="8">
             <div class="center">
               <data-table
@@ -190,7 +130,6 @@ export default {
           this.tableData[i].runningTime + this.getRandomNum(0, 3);
         temp.loadingTime =
           this.tableData[i].loadingTime + this.getRandomNum(0, 3);
-
         this.tableData.splice(i, 1, temp);
       }
     }, 3000);
@@ -239,16 +178,16 @@ li {
 .fan1 {
   margin-left: 15px;
   position: absolute;
-  margin-top:-25px;
+  margin-top: -30px;
 }
 .fan2 {
-  margin-left: 520px;
-  margin-top: -25px;
+  margin-left: 460px;
+  margin-top: -30px;
   position: absolute;
 }
 .fan3 {
-  margin-left: 1040px;
-  margin-top: -25px;
+  margin-left: 950px;
+  margin-top: -30px;
   position: absolute;
 }
 #fan {
@@ -309,12 +248,11 @@ li {
   }
 }
 .red {
-   background: linear-gradient(145deg, #c21e41, #e7234d);
+  background: linear-gradient(145deg, #c21e41, #e7234d);
   box-shadow: 17px 17px 34px #be1d3f;
 }
 .green {
-   background: linear-gradient(145deg, #63ac7d, #76cc95);
+  background: linear-gradient(145deg, #63ac7d, #76cc95);
   box-shadow: 17px 17px 34px #61a87a;
 }
-
 </style>

src/views/drain/configImg/index.vue

@@ -156,90 +156,90 @@ export default {
   /* margin-left: 30px; */
 }
 .botton0 {
-  width: 10px;
+  width: 15px;
   height: 30px;
   position: absolute;
   top: 68px;
   left: 63px;
 }
 .botton1 {
-  width: 10px;
+  width: 15px;
   height: 30px;
   position: absolute;
   top: 374px;
   left: 146px;
 }
 .botton2 {
-  width: 15px;
-  height: 15px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
   position: absolute;
-  top: 380px;
-  left: 376px;
+  top: 375px;
+  left: 378px;
 }
 .botton3 {
-  width: 15px;
-  height: 15px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
   position: absolute;
-  top: 307px;
-  left: 427px;
+  top: 305px;
+  left: 430px;
 }
 .botton4 {
-  width: 10px;
+  width: 15px;
   height: 30px;
   position: absolute;
   top: 140px;
-  left: 537px;
+  left: 542px;
 }
 .botton5 {
-  width: 10px;
+  width: 15px;
   height: 30px;
   position: absolute;
   top: 375px;
-  left: 620px;
+  left: 624px;
 }
 .botton6 {
-  width: 15px;
-  height: 15px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
   position: absolute;
-  top: 380px;
-  left: 850px;
+  top: 375px;
+  left: 855px;
 }
 .botton7 {
-  width: 15px;
-  height: 15px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
   position: absolute;
-  top: 307px;
-  left: 900px;
+  top: 305px;
+  left: 907px;
 }
 .botton8 {
-  width: 10px;
+  width: 15px;
   height: 30px;
   position: absolute;
-  top: 140px;
-  left: 1011px;
+  top: 137px;
+  left: 1021px;
 }
 .botton9 {
-  width: 10px;
+  width: 15px;
   height: 30px;
   position: absolute;
-  top: 376px;
-  left: 1093px;
+  top: 372px;
+  left: 1103px;
 }
 .botton10 {
-  width: 15px;
-  height: 15px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
   position: absolute;
   top: 380px;
   right: 245px;
 }
 .botton11 {
-  width: 15px;
-  height: 15px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
   position: absolute;
   top: 306px;