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

2023-05-19 14:45:27 +08:00 · 2023-05-19 14:45:27 +08:00 · 5e71dbdbce
commit 5e71dbdbce
parent 9259b0951b
7 changed files with 163 additions and 166 deletions
--- a/src/store/moduleSocket.ts
+++ b/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
            }
        }
    }
--- a/src/views/electronicControl/index.vue
+++ b/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)
--- a/src/views/electronicControlAmbient/chart/humidity.vue
+++ b/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: {
-        show: false,
-        width: 5
-      },
-      pointer: {
-        itemStyle: {
+        progress: {
+          show: false,
+          width: 5
+        },
+        pointer: {
+          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'
-        }
-      },
-      //刻度轴宽
-      axisLine: {
-        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
-        }
-      ]
+        },
+        data: [
+          {
+            value: value.h
+          }
+        ]
      },
      {
        type: "gauge",
        center: ["50%", "50%"],
        startAngle: 200,
        endAngle: -20,
-        min: 0,
-        max: 100,
+        min: -30,
+        max: 70,
        progress: {
-        show: false,
-        width: 5
-      },
-      pointer: {
-        itemStyle: {
+          show: false,
+          width: 5
+        },
+        pointer: {
+          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'
-        }
-      },
-      //刻度轴宽
-      axisLine: {
-        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
-        }
-      ]
+        },
+        data: [
+          {
+            value: value.c
+          }
+        ]
      },
    ],
  };
-    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>
--- a/src/views/electronicControlAmbient/chart/verticalNum.vue
+++ b/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
-            ? 'iconfont ' + value.iconname + ' icon-red iconbig-size'
-            : 'iconfont ' + value.iconname + ' icon-blue iconbig-size'
-            "></i>
-          <p class="unit" v-if="value.unit">
+          <i :class="['iconfont',value.iconname,iconColor,'iconbig-size']"></i>
+          <p class="unit" v-if="value.unit&&item.status">
          <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;
--- a/src/views/electronicControlAmbient/index.vue
+++ b/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,7 +113,8 @@ 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);
      rightref.value.setcontentData(data.msg);
--- a/src/views/electronicControlAmbient/top.vue
+++ b/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,"")
--- a/src/views/realtimeSecurity/content/chart/verticalNumLoop.vue
+++ b/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;