5.5首页设备预警监测颜色修改-提交

src/views/vent/home/colliery/components/wind-device.vue

@@ -10,16 +10,6 @@
             </div>
             <div></div>
             <img :src="item.url" :alt="item.text" />
-
-            <!-- <div
-              class="level-text"
-              :class="{
-                'level-text-0': item['count'] == 0,
-                'level-text-5': item['count'] > 0,
-              }"
-              >{{ item['count'] == 0 ? '正常' : `${item['count']}` }}</div
-            >
-          </div> -->
             <div class="level-text">
               <div class="all-count">
                 <span>{{ `${item.allText}&nbsp:&nbsp` }}</span>
@@ -27,11 +17,11 @@
               </div>
               <div class="warn-count">
                 <span>{{ `${item.warnText}&nbsp:&nbsp` }}</span>
-                <span class="num-count">{{ item.warnCount || 0 }}</span>
+                <span :class="item.warnCount ? 'num-count1' : 'num-count'">{{ item.warnCount || 0 }}</span>
               </div>
               <div class="close-count">
                 <span> {{ `${item.closeText}&nbsp:&nbsp` }}</span>
-                <span class="num-count">{{ item.closeCount || 0 }}</span>
+                <span :class="item.closeCount ? 'num-count1' : 'num-count'">{{ item.closeCount || 0 }}</span>
               </div>
             </div>
           </div>
@@ -42,410 +32,368 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, defineProps, watch } from 'vue';
-  import { getAssetURL } from '/@/utils/ui';
-  let props = defineProps({
-    devicedata: Object,
-  });
-  const emit = defineEmits(['goDetail']);
-  let iconsMonitor = reactive({
-    // fanmain: {
-    //   url: getAssetURL('home-container/device/zhushan.png'),
-    //   level: 0,
-    //   text: '',
-    // },
+import { ref, reactive, defineProps, watch } from 'vue';
+import { getAssetURL } from '/@/utils/ui';
+let props = defineProps({
+  devicedata: Object,
+});
+const emit = defineEmits(['goDetail']);
+let iconsMonitor = reactive({
+  fanmain: {
+    url: getAssetURL('vent/alarm-icons/zhushan.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  fanlocal: {
+    url: getAssetURL('vent/alarm-icons/js.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  fanlocaldp: {
+    url: getAssetURL('vent/alarm-icons/js.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  gate: {
+    url: getAssetURL('vent/alarm-icons/fm.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  window: {
+    url: getAssetURL('vent/alarm-icons/fc.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  windrect: {
+    url: getAssetURL('vent/alarm-icons/cf.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  forcFan: {
+    url: getAssetURL('vent/alarm-icons/yafeng.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  spray: {
+    url: getAssetURL('vent/alarm-icons/penlin.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  dustdev: {
+    url: getAssetURL('vent/alarm-icons/penfen.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  nitrogen: {
+    url: getAssetURL('vent/alarm-icons/zhudan.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  pulping: {
+    url: getAssetURL('vent/alarm-icons/zhujiang.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  atomizing: {
+    url: getAssetURL('vent/alarm-icons/pw.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  dustsensor: {
+    url: getAssetURL('vent/alarm-icons/ccq.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  gas: {
+    url: getAssetURL('vent/alarm-icons/wasichoucaig.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  pump: {
+    url: getAssetURL('vent/alarm-icons/wasibeng.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+  modelsensor: {
+    url: getAssetURL('vent/alarm-icons/cf.png'),
+    level: 100,
+    text: '',
+    allText: '总数',
+    warnText: '报警数',
+    closeText: '断开数',
+    allCount: 0,
+    warnCount: 0,
+    closeCount: 0,
+  },
+});
 
-    fanmain: {
-      url: getAssetURL('vent/alarm-icons/zhushan.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-    fanlocal: {
-      url: getAssetURL('vent/alarm-icons/js.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-    fanlocaldp: {
-      url: getAssetURL('vent/alarm-icons/js.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-    gate: {
-      url: getAssetURL('vent/alarm-icons/fm.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-    window: {
-      url: getAssetURL('vent/alarm-icons/fc.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-    windrect: {
-      url: getAssetURL('vent/alarm-icons/cf.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-    forcFan: {
-      url: getAssetURL('vent/alarm-icons/yafeng.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-    spray: {
-      url: getAssetURL('vent/alarm-icons/penlin.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-    dustdev: {
-      url: getAssetURL('vent/alarm-icons/penfen.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-    nitrogen: {
-      url: getAssetURL('vent/alarm-icons/zhudan.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-    pulping: {
-      url: getAssetURL('vent/alarm-icons/zhujiang.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-    atomizing: {
-      url: getAssetURL('vent/alarm-icons/pw.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-    dustsensor: {
-      url: getAssetURL('vent/alarm-icons/ccq.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-    gas: {
-      url: getAssetURL('vent/alarm-icons/wasichoucaig.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-    pump: {
-      url: getAssetURL('vent/alarm-icons/wasibeng.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-    modelsensor: {
-      url: getAssetURL('vent/alarm-icons/cf.png'),
-      level: 100,
-      text: '',
-      allText: '总数',
-      warnText: '报警数',
-      closeText: '断开数',
-      allCount: 0,
-      warnCount: 0,
-      closeCount: 0,
-    },
-  });
+const resetScroll = (e: Event) => {
+  if (e.target && e.target) (e.target as Element).scrollTop = 0;
+};
 
-  const resetScroll = (e: Event) => {
-    if (e.target && e.target) (e.target as Element).scrollTop = 0;
-  };
+//跳转详情
+function getDetail() {
+  // emit('goDetail', 'windrect')
+}
 
-  //跳转详情
-  function getDetail() {
-    // emit('goDetail', 'windrect')
+watch(
+  () => props.devicedata,
+  (val) => {
+    Object.keys(iconsMonitor).forEach((el) => {
+      if (val && val[el]) {
+        iconsMonitor[el].level = val[el].maxLevel;
+        iconsMonitor[el]['text'] = val[el].name;
+        // iconsMonitor[el]['count'] = val[el].count;
+        iconsMonitor[el].allCount = val[el].totalcount;
+        iconsMonitor[el].warnCount = val[el].count;
+        iconsMonitor[el].closeCount = val[el].netstatus;
+      }
+    });
+  },
+  {
+    deep: true,
   }
-
-  watch(
-    () => props.devicedata,
-    (val) => {
-      Object.keys(iconsMonitor).forEach((el) => {
-        if (val && val[el]) {
-          iconsMonitor[el].level = val[el].maxLevel;
-          iconsMonitor[el]['text'] = val[el].name;
-          // iconsMonitor[el]['count'] = val[el].count;
-          iconsMonitor[el].allCount = val[el].totalcount;
-          iconsMonitor[el].warnCount = val[el].count;
-          iconsMonitor[el].closeCount = val[el].netstatus;
-        }
-      });
-    },
-    {
-      deep: true,
-    }
-  );
+);
 </script>
 
 <style lang="less" scoped>
-  @font-face {
-    font-family: 'douyuFont';
-    src: url('../../../../../assets/font/douyuFont.otf');
-  }
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../../assets/font/douyuFont.otf');
+}
 
-  .windDevice {
-    width: 100%;
-    // min-width: ;
-    height: 100%;
-    position: relative;
+.windDevice {
+  width: 100%;
+  // min-width: ;
+  height: 100%;
+  position: relative;
 
-    .title-top {
-      position: absolute;
-      top: 9px;
-      left: 46px;
-      color: #fff;
-      font-size: 16px;
-      font-family: 'douyuFont';
-      cursor: pointer;
+  .title-top {
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    color: #fff;
+    font-size: 16px;
+    font-family: 'douyuFont';
+    cursor: pointer;
 
-      &:hover {
-        color: #66ffff;
-      }
+    &:hover {
+      color: #66ffff;
     }
+  }
 
-    .device-contents {
-      position: absolute;
-      top: 30px;
-      left: 0;
-      height: calc(100% - 30px);
-      padding: 10px 15px;
-      box-sizing: border-box;
-      width: 100%;
-      overflow-y: auto;
+  .device-contents {
+    position: absolute;
+    top: 30px;
+    left: 0;
+    height: calc(100% - 30px);
+    padding: 10px 15px;
+    box-sizing: border-box;
+    width: 100%;
+    overflow-y: auto;
 
-      .icons-box {
-        // display: flex; lxh
-        // flex-wrap: wrap; lxh
-        // justify-content: space-around;
-        // justify-content: space-between; lxh
-        height: 100%;
+    .icons-box {
+      // display: flex; lxh
+      // flex-wrap: wrap; lxh
+      // justify-content: space-around;
+      // justify-content: space-between; lxh
+      height: 100%;
 
-        // overflow-y: hidden;
-        // align-items: start ;
-        // &:hover {
-        //   overflow-y: auto;
-        //   & > .icon-item {
-        //     // animation-play-state: paused; lxh
-        //     // animation: move1 2s linear;lxh
-        //   }
-        // }
-        .icon-item {
-          position: relative;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 3px;
-          // animation: move 10s linear infinite;lxh
+      // overflow-y: hidden;
+      // align-items: start ;
+      // &:hover {
+      //   overflow-y: auto;
+      //   & > .icon-item {
+      //     // animation-play-state: paused; lxh
+      //     // animation: move1 2s linear;lxh
+      //   }
+      // }
+      .icon-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 3px;
+        // animation: move 10s linear infinite;lxh
 
-          .level-text {
-            width: 220px;
-            display: flex;
-            justify-content: space-between;
-            position: absolute;
-            // top: 42px;lxh
-            // right: 25px;lxh
-            // color: #fff;lxh
-            // font-family: 'douyuFont';lxh
-            // font-size: 12px;lxh
-            top: 47px;
-            left: 185px;
-            color: #ffffffe0;
-            font-size: 13px;
-            text-align: center;
-            letter-spacing: 1px;
+        .level-text {
+          width: 220px;
+          display: flex;
+          justify-content: space-between;
+          position: absolute;
+          // top: 42px;lxh
+          // right: 25px;lxh
+          // color: #fff;lxh
+          // font-family: 'douyuFont';lxh
+          // font-size: 12px;lxh
+          top: 47px;
+          left: 185px;
+          color: #ffffffe0;
+          font-size: 13px;
+          text-align: center;
+          letter-spacing: 1px;
 
-            .all-count,
-            .warn-count,
-            .close-count {
-              // margin: 0px 5px;
-              .num-count {
-                font-family: 'douyuFont';
-                font-size: 12px;
-              }
-            }
+          .num-count,
+          .num-count1 {
+            font-family: 'douyuFont';
+            font-size: 12px;
           }
 
-          // .level-text-0 {
-          //   color: rgb(145, 230, 9);
-          //   text-shadow: 2px 2px 4px #001c22;
-          // }
-
-          // .level-text-1 {
-          //   color: rgb(0, 242, 255);
-          //   text-shadow: 2px 2px 4px #001c22;
-          // }
-
-          // .level-text-2 {
-          //   color: #ffff35;
-          //   text-shadow: 2px 2px 4px #313100;
-          // }
-
-          // .level-text-3 {
-          //   color: #ffbe69;
-          //   text-shadow: 2px 2px 4px #271600;
-          // }
-
-          // .level-text-4 {
-          //   color: #ff6f00;
-          //   // color: #09caff;
-          //   text-shadow: 2px 2px 4px #060200;
-          // }
-
-          // .level-text-5 {
-          //   width: 35px;
-          //   color: #ff0000;
-          //   text-shadow: 2px 2px 4px #200000;
-          // }
-
-          // .level-text-6 {
-          //   color: #bbb;
-          //   text-shadow: 2px 2px 4px #001c22;
-          // }
-
-          img {
-            // width: 208px; //lxh
-            // height: 69px;//lxh
-            width: 427px;
-            height: 79px;
+          .warn-count,.close-count {
+            .num-count {
+              color: #ffffffe0;
+            }
+            .num-count1 {
+              color: #ff0000;
+            }
           }
         }
 
-        @keyframes move {
-          0% {
-            transform: translateY(0px);
-          }
-
-          100% {
-            transform: translateY(-269px);
-          }
+        img {
+          width: 427px;
+          height: 79px;
         }
+      }
 
-        @keyframes move1 {
-          0% {
-            transform: translateY(0px);
-          }
+      @keyframes move {
+        0% {
+          transform: translateY(0px);
         }
 
-        .wrapper {
-          position: absolute;
-          // top: 40px;  lxh
-          // left: 82px;lxh
-          top: 47px;
-          left: 100px;
-          color: #ffffffe0;
-          font-size: 13px;
-          text-align: center;
-          letter-spacing: 1px;
+        100% {
+          transform: translateY(-269px);
         }
+      }
 
-        .level-warning {
-          font-weight: 600;
-          color: #ff2e2e;
-          text-shadow: 2px 2px 4px #000000;
+      @keyframes move1 {
+        0% {
+          transform: translateY(0px);
         }
       }
+
+      .wrapper {
+        position: absolute;
+        top: 47px;
+        left: 100px;
+        color: #ffffffe0;
+        font-size: 13px;
+        text-align: center;
+        letter-spacing: 1px;
+      }
+
+      .level-warning {
+        font-weight: 600;
+        color: #ff2e2e;
+        text-shadow: 2px 2px 4px #000000;
+      }
     }
   }
+}
 
-  :deep .zxm-select-selector {
-    width: 100%;
-    height: 30px !important;
-    padding: 0 11px 0px 25px !important;
-    background-color: rgba(8, 148, 255, 0.3) !important;
-    border: 1px solid #1d80da !important;
-  }
+:deep .zxm-select-selector {
+  width: 100%;
+  height: 30px !important;
+  padding: 0 11px 0px 25px !important;
+  background-color: rgba(8, 148, 255, 0.3) !important;
+  border: 1px solid #1d80da !important;
+}
 
-  :deep .zxm-select-selection-item {
-    color: #fff !important;
-    line-height: 28px !important;
-  }
+:deep .zxm-select-selection-item {
+  color: #fff !important;
+  line-height: 28px !important;
+}
 
-  :deep .zxm-select-arrow {
-    color: #fff !important;
-  }
+:deep .zxm-select-arrow {
+  color: #fff !important;
+}
 </style>

src/views/vent/monitorManager/alarmMonitor/index.vue

@@ -687,15 +687,7 @@ onUnmounted(() => {
             font-family: 'douyuFont';
             font-size: 12px;
           }
-          .warn-count {
-            .num-count {
-              color: #ffffffe0;
-            }
-            .num-count1 {
-              color: #ff0000;
-            }
-          }
-          .close-count {
+          .warn-count,.close-count {
             .num-count {
               color: #ffffffe0;
             }