修改电控分厂实时 和安全大屏页面

src/store/moduleSocket.ts

@@ -1,5 +1,5 @@
 /*
- * @FilePath: \wwwd:\code\screenFront\src\store\moduleSocket.ts
+ * @FilePath: \screenFront\src\store\moduleSocket.ts
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-06 15:58:13
@@ -341,6 +341,7 @@ export const useSocketStore = defineStore(Names.socket, {
                     this.newVerticalNum[pIndex].value[cIndex].time = null
                 }
                 this.newVerticalNum[pIndex].value[cIndex].val = val.data.val
+                this.newVerticalNum[pIndex].value[cIndex].status = true
             }
         }
     }

src/views/electronicControl/index.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\electronicControl\index.vue
+ * @FilePath: \screenFront\src\views\electronicControl\index.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-04-11 13:50:05
@@ -107,24 +107,10 @@ function checkImgExists(imgurl) {
     })
 }
 onMounted(() => {
-  // deviceCountsSecondaryOfOutPlantDatafun()
-  // deviceTypeCountsSecondaryOfOutPlantDatafun()
-  // deviceStatusCountsSecondaryOfOutPlantDatafun()
-  // secondaryOutPlantDatafun()
   getdata()
   let contentBox = Acontent.value
-  // let Timedombox=Timedom.value
   window.document.title = t('messages.electronicControl')
   WH(contentBox)
-  // window.addEventListener('resize', () => {
-  //   if (time.value) {
-  //     clearTimeout(time.value)
-  //     time.value = null
-  //   }
-  //   time.value = setTimeout(() => {
-  //     WH(contentBox)
-  //   }, 1000);
-  // })
 })
 onUnmounted(() => {
   clearTimeout(time)

src/views/electronicControlAmbient/chart/humidity.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \gitscreenFront\src\views\electronicControlAmbient\chart\humidity.vue
+ * @FilePath: \screenFront\src\views\electronicControlAmbient\chart\humidity.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-10 13:27:36
@@ -47,7 +47,7 @@ const setData = (value: any) => {
         color: "#fff",
         fontSize: 20,
       },
-      top:5
+      top: 5
     },
     grid: {
       // 让图表占满容器
@@ -62,150 +62,150 @@ const setData = (value: any) => {
         center: ["50%", "85%"],
         startAngle: 190,
         endAngle: -10,
+        min: 0,
+        max: 100,
         radius: "50%",
-        min: -30,
-        max: 70,
         splitNumber: 10,
-      progress: {
+        progress: {
-        show: false,
+          show: false,
-        width: 5
+          width: 5
-      },
+        },
-      pointer: {
+        pointer: {
-        itemStyle: {
+          itemStyle: {
+            color: 'inherit'
+          }
+        },
+        //刻度轴宽
+        axisLine: {
+          lineStyle: {
+            width: 10,
+            color: [
+              [0.4, '#FF6E76'],
+              [0.7, '#7CFFB2'],
+              [1, '#1089E7']
+            ]
+          }
+        },
+        //刻度线
+        axisTick: {
+          show: false,
+          distance: -5,
+          splitNumber: 5,
+          lineStyle: {
+            width: 2,
+            color: '#999'
+          }
+        },
+        //刻度线
+        splitLine: {
+          distance: 5,
+          length: 3,
+          lineStyle: {
+            width: 3,
+            color: '#999'
+          }
+        },
+        //表刻度值
+        axisLabel: {
+          distance: 15,
+          color: '#999',
+          fontSize: 10
+        },
+        anchor: {
+          show: false
+        },
+        title: {
+          show: false
+        },
+        detail: {
+          valueAnimation: true,
+          // width: '10%',
+          // lineHeight: 5,
+          // borderRadius: 8,
+          offsetCenter: [0, '25%'],
+          fontSize: 15,
+          // fontWeight: 'bolder',
+          formatter: '{value} %RH',
           color: 'inherit'
-        }
+        },
-      },
+        data: [
-      //刻度轴宽
+          {
-      axisLine: {
+            value: value.h
-        lineStyle: {
+          }
-          width: 10,
+        ]
-          color: [
-            [0.15, '#FF6E76'],
-            [0.75, '#7CFFB2'],
-            [1, '#FF6E76']
-          ]
-        }
-      },
-      //刻度线
-      axisTick: {
-        show:false,
-        distance: -5,
-        splitNumber: 5,
-        lineStyle: {
-          width: 2,
-          color: '#999'
-        }
-      },
-      //刻度线
-      splitLine: {
-        distance: 5,
-        length: 3,
-        lineStyle: {
-          width: 3,
-          color: '#999'
-        }
-      },
-      //表刻度值
-      axisLabel: {
-        distance: 15,
-        color: '#999',
-        fontSize: 10
-      },
-      anchor: {
-        show: false
-      },
-      title: {
-        show: false
-      },
-      detail: {
-        valueAnimation: true,
-        // width: '10%',
-        // lineHeight: 5,
-        // borderRadius: 8,
-        offsetCenter: [0, '25%'],
-        fontSize: 15,
-        // fontWeight: 'bolder',
-        formatter: '{value} °C',
-        color: 'inherit'
-      },
-      data: [
-        {
-          value: value.c
-        }
-      ]
       },
       {
         type: "gauge",
         center: ["50%", "50%"],
         startAngle: 200,
         endAngle: -20,
-        min: 0,
+        min: -30,
-        max: 100,
+        max: 70,
         progress: {
-        show: false,
+          show: false,
-        width: 5
+          width: 5
-      },
+        },
-      pointer: {
+        pointer: {
-        itemStyle: {
+          itemStyle: {
+            color: 'inherit'
+          }
+        },
+        //刻度轴宽
+        axisLine: {
+          lineStyle: {
+            width: 10,
+            color: [
+              [0.46, '#1089E7'],
+              [0.58, '#7CFFB2'],
+              [1, '#FF6E76']
+            ]
+          }
+        },
+        //刻度线
+        axisTick: {
+          distance: 0,
+          splitNumber: 5,
+          lineStyle: {
+            width: 2,
+            color: '#999'
+          }
+        },
+        //刻度线
+        splitLine: {
+          distance: 5,
+          length: 3,
+          lineStyle: {
+            width: 3,
+            color: '#999'
+          }
+        },
+        axisLabel: {
+          distance: 15,
+          color: '#999',
+          fontSize: 12
+        },
+        anchor: {
+          show: false
+        },
+        title: {
+          show: false
+        },
+        detail: {
+          valueAnimation: true,
+          offsetCenter: [0, '15%'],
+          fontSize: 20,
+          formatter: '{value} °C',
           color: 'inherit'
-        }
+        },
-      },
+        data: [
-      //刻度轴宽
+          {
-      axisLine: {
+            value: value.c
-        lineStyle: {
+          }
-          width: 10,
+        ]
-          color: [
-            [0.15, '#FF6E76'],
-            [0.75, '#7CFFB2'],
-            [1, '#FF6E76']
-          ]
-        }
-      },
-       //刻度线
-      axisTick: {
-        distance: 0,
-        splitNumber: 5,
-        lineStyle: {
-          width: 2,
-          color: '#999'
-        }
-      },
-       //刻度线
-      splitLine: {
-        distance: 5,
-        length: 3,
-        lineStyle: {
-          width: 3,
-          color: '#999'
-        }
-      },
-      axisLabel: {
-        distance: 15,
-        color: '#999',
-        fontSize: 12
-      },
-      anchor: {
-        show: false
-      },
-      title: {
-        show: false
-      },
-      detail: {
-        valueAnimation: true,
-     offsetCenter: [0, '15%'],
-     fontSize: 20,
-        formatter: '{value} %RH',
-        color: 'inherit'
-      },
-      data: [
-        {
-          value: value.h
-        }
-      ]
       },
     ],
   };
-    change(echartsData.humiture);
+  change(echartsData.humiture);
 };
 
 const change = (item: EDataPersonItem) => {
@@ -227,7 +227,7 @@ const updata = (item: EDataPersonItem) => {
 function setchartWH(width: any, height: any) {
   echartsData.humiture!.div = humiture.value;
   humiture.value.style.height = height + "px";
-  humiture.value.style.width = width  + "px";
+  humiture.value.style.width = width + "px";
   if (echartsData.humiture.box) {
     echartsData.humiture.box.resize();
   }
@@ -244,7 +244,7 @@ defineExpose({
 </script>
 
 <style scope>
-.content-small{
+.content-small {
   margin-right: 3px;
 }
 </style>

src/views/electronicControlAmbient/chart/verticalNum.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \gitscreenFront\src\views\electronicControlAmbient\chart\verticalNum.vue
+ * @FilePath: \screenFront\src\views\electronicControlAmbient\chart\verticalNum.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 08:22:35
@@ -16,11 +16,8 @@
           <h5 v-if="value.unit">{{
             `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
           <!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
-          <i :class="+item.val > +value.quota
+          <i :class="['iconfont',value.iconname,iconColor,'iconbig-size']"></i>
-            ? 'iconfont ' + value.iconname + ' icon-red iconbig-size'
+          <p class="unit" v-if="value.unit&&item.status">
-            : 'iconfont ' + value.iconname + ' icon-blue iconbig-size'
-            "></i>
-          <p class="unit" v-if="value.unit">
           <p class="num">{{ item.val }}</p>
           <span>{{ value.unit }}</span>
           </p>
@@ -44,8 +41,11 @@ let props = defineProps<{
 }>();
 let i = ref(0)
 let item = computed(() => {
+  return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0,status:false };
+});
 
-  return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0 };
+let iconColor = computed(() => {
+  return value.data[i.value]?.status?(value.data[i.value].val > value.quota ? "icon-red" : "icon-blue"):"icon-grey";
 });
 let keynum = ref(0);
 const value = reactive<any>({
@@ -139,8 +139,11 @@ p {
   color: #fff;
 }
 
-.icon-red {
+.iconbig-size {  
   font-size: 100px;
+}
+
+.icon-red {
   color: #E43961;
   animation: redstart 2s infinite;
   /* position: relative; */
@@ -148,11 +151,15 @@ p {
 }
 
 .icon-blue {
-  font-size: 100px;
   color: #20AEC5;
   /* position: relative; */
   /* top: -15px; */
 }
+.icon-grey {
+  color: rgb(167, 166, 189);
+  /* position: relative; */
+  /* top: -15px; */
+}
 
 .iconsmall-size {
   font-size: 20px;

src/views/electronicControlAmbient/index.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \gitscreenFront\src\views\electronicControlAmbient\index.vue
+ * @FilePath: \screenFront\src\views\electronicControlAmbient\index.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-04-11 13:50:05
@@ -113,6 +113,7 @@ function getWebsocket(val) {
     let data = JSON.parse(val);
     if (data.type == "electronicView") {
       // store.changenoise(data.msg);
+      console.log(data.msg, "电控监测");
       
       topref.value.setcontentData(data.msg);
       bottomref.value.setcontentData(data.msg);

src/views/electronicControlAmbient/top.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \gitscreenFront\src\views\electronicControlAmbient\top.vue
+ * @FilePath: \screenFront\src\views\electronicControlAmbient\top.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 14:43:28
@@ -139,7 +139,7 @@ let ductOption = reactive({
           lineStyle: {
             width: 8,
             color: [
-              [0.6, "#7CFFB2"],
+              [0.4, "#7CFFB2"],
               [1, "#FF6E76"],
             ],
           },
@@ -200,7 +200,7 @@ let ductOption = reactive({
           lineStyle: {
             width: 10,
             color: [
-              [0.6, "#7CFFB2"],
+              [0.4, "#7CFFB2"],
               [1, "#FF6E76"],
             ],
           },
@@ -261,8 +261,10 @@ let ductOption = reactive({
 let temp_humi_index = 0
   function setcontentData(val){
     let noise = val.noise.map((item) => {
-    return { name: item.name, val: item.data };
+    return { name: item.name, val: item.data,status:item.status||false };
   });
+  console.log(noise);
+  
     // verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
     verticalNum4.value.setData(noise,'icon-shengyin',120,"dB")
     // verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")

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

@@ -66,7 +66,7 @@ let item:any = computed(() => {
   return props.value[i.value];
 });
 let iconcolor = computed(() => {  
-  return props.value[i.value].status?item.val > props.limit ? "icon-red" : "icon-blue":"icon-grey";
+  return props.value[i.value].status?props.value[i.value].val > props.limit ? "icon-red" : "icon-blue":"icon-grey";
 });
 let props = defineProps<{
   title: string;