修改安全大屏传感器断联状态颜色

src/views/realtimeSecurity/content/chart/verticalNumLoop.vue

@@ -4,7 +4,7 @@
       <template v-slot>
         <div class="box" ref="classBox1">
           <div class="icontip">
-            <div v-for="items in value" style="margin: auto 5px;" v-show="+items.val > +limit">
+            <div v-for="items in value" style="margin: auto 5px;" v-show="(+items.val > +limit)&&items.status">
               <el-popover placement="bottom" :width="250" trigger="hover" effect="dark"
                 :popper-style="{ 'background-color': 'rgba(0,0,0,.8)' }">
                 <ul class="icontipBox">
@@ -40,11 +40,8 @@
           </div>
           <!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
           <h2>{{ item.name}}</h2>
-            <i :class="+item.val > +limit
-                ? 'iconfont ' + icon + ' icon-red iconbig-size'
-                : 'iconfont ' + icon + ' icon-blue iconbig-size'
-              "></i>
-            <p class="unit" v-if="unit">
+            <i :class="['iconfont',icon,iconcolor,'iconbig-size']"></i>
+            <p class="unit" v-if="unit&&item.status">
               <p class="num">{{item.val}}</p>
               <span>{{ unit }}</span>
             </p>
@@ -61,15 +58,16 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch,onUnmounted } from "vue";
 import border3 from "@/components/borderBox/border3.vue";
-import { verticalNumPerson } from "@/type/realtimeSecurity";
-import { warningNot } from "@/utils/notification";
 import { useI18n } from 'vue-i18n'
 let {t} = useI18n();
 let i =ref(0)
 let timer = null;
-let item = computed(() => {
+let item:any = computed(() => {
   return props.value[i.value];
 });
+let iconcolor = computed(() => {
+  return item.status?item.val > props.limit ? "icon-red" : "icon-blue":"icon-grey";
+});
 let props = defineProps<{
   title: string;
   icon: string;
@@ -78,13 +76,6 @@ let props = defineProps<{
   value: Array<any>;
 }>();
 let keynum = ref(0);
-const valuee = reactive({
-  title: "",
-  icon: "",
-  limit: null,
-  unit: "",
-  value: null,
-});
 
 let refborder3 = ref();
 let numBox1 = ref();
@@ -104,38 +95,6 @@ const boxSize = reactive({
   height: "",
   width: "",
 });
-
-function setchartWH(width: any, height: any) {
-  boxSize.height = height + "px";
-  boxSize.width = width + "px";
-  refborder3.value.resetWH();
-}
-
-// const setData = (val:any) => {
-
-//   value.type=val.
-//   // if (data > quota) {
-//   //   //使用定时器解决通知重叠问题
-//   //   let navdebug = setTimeout(() => {
-//   //     warningNot(props.title, "出现异常，异常值为："+value.data+"，请排查！");
-//   //     clearTimeout(navdebug);
-//   //   }, 0);
-//   // }
-//   keynum.value++;
-// };
-// watch(() => props, (val) => {
-//   valuee.title=val.title
-//   valuee.icon=val.icon
-//   valuee.limit=val.limit
-//   valuee.unit=val.unit
-//   valuee.value=val.value
-//   keynum.value++
-// }, { deep: true })
-
-defineExpose({
-  // setchartWH,
-  // setData,
-});
 </script>
 
 <style scoped>
@@ -181,6 +140,11 @@ p {
   /* top: -15px; */
 }
 
+.icon-grey {
+  color: rgb(167, 166, 189);
+  /* position: relative; */
+  /* top: -15px; */
+}
 .icon-blue {
   color: #20aec5;
   /* position: relative; */