From d208018dbf63bd8d23c7600002fd51b6cef782f5 Mon Sep 17 00:00:00 2001
From: 15133876896-BGG25 <2233720980@qq.com>
Date: Tue, 16 May 2023 15:14:29 +0800
Subject: [PATCH] =?UTF-8?q?1.=E6=9C=BA=E6=A2=B0=E5=88=86=E5=8E=82=E6=B8=A9?=
 =?UTF-8?q?=E6=B9=BF=E5=BA=A6=E5=9B=BE=E4=BE=8B=E4=BF=AE=E6=94=B9=202.?=
 =?UTF-8?q?=E7=94=B5=E6=8E=A7=E5=BA=93=E6=88=BF=E5=9B=BE=E4=BE=8B=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=203.=E6=9C=BA=E6=A2=B0=E5=88=86=E5=8E=82=E7=8E=AF?=
 =?UTF-8?q?=E5=A2=83=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PaintShopView/components/humidity.vue     |  26 +--
 src/views/PaintShopView/finishView/top.vue    |   4 +-
 src/views/PaintShopView/machiningView/top.vue |   2 +-
 .../chart/humidity.vue                        |  26 +--
 .../chart/verticalNum.vue                     | 173 +++++++++++-------
 src/views/electronicControlAmbient/top.vue    |  26 ++-
 .../content/chart/gas.vue                     |   8 +-
 .../content/top.vue                           |  12 +-
 8 files changed, 169 insertions(+), 108 deletions(-)

diff --git a/src/views/PaintShopView/components/humidity.vue b/src/views/PaintShopView/components/humidity.vue
index 1b92a86..08b19cf 100644
--- a/src/views/PaintShopView/components/humidity.vue
+++ b/src/views/PaintShopView/components/humidity.vue
@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \screenFront\src\views\PaintShopView\components\humidity.vue
+ * @FilePath: \gitscreenFront\src\views\PaintShopView\components\humidity.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-10 13:27:36
@@ -59,10 +59,10 @@ const setData = (value: any) => {
     series: [
       {
         type: "gauge",
-        center: ["50%", "90%"],
+        center: ["50%", "85%"],
         startAngle: 190,
         endAngle: -10,
-        radius: "30%",
+        radius: "50%",
         min: -30,
         max: 70,
         splitNumber: 10,
@@ -78,7 +78,7 @@ const setData = (value: any) => {
       //刻度轴宽
       axisLine: {
         lineStyle: {
-          width: 5,
+          width: 10,
           color: [
             [0.15, '#FF6E76'],
             [0.75, '#7CFFB2'],
@@ -98,7 +98,7 @@ const setData = (value: any) => {
       },
       //刻度线
       splitLine: {
-        distance: -10,
+        distance: 5,
         length: 3,
         lineStyle: {
           width: 3,
@@ -107,9 +107,9 @@ const setData = (value: any) => {
       },
       //表刻度值
       axisLabel: {
-        distance: -20,
+        distance: 15,
         color: '#999',
-        fontSize: 12
+        fontSize: 10
       },
       anchor: {
         show: false
@@ -122,8 +122,8 @@ const setData = (value: any) => {
         // width: '10%',
         // lineHeight: 5,
         // borderRadius: 8,
-        // offsetCenter: [0, '-15%'],
-        fontSize: 12,
+        offsetCenter: [0, '25%'],
+        fontSize: 15,
         // fontWeight: 'bolder',
         formatter: '{value} °C',
         color: 'inherit'
@@ -136,7 +136,7 @@ const setData = (value: any) => {
       },
       {
         type: "gauge",
-        center: ["50%", "55%"],
+        center: ["50%", "50%"],
         startAngle: 200,
         endAngle: -20,
         min: 0,
@@ -180,9 +180,9 @@ const setData = (value: any) => {
         }
       },
       axisLabel: {
-        distance: -40,
+        distance: 15,
         color: '#999',
-        fontSize: 20
+        fontSize: 12
       },
       anchor: {
         show: false
@@ -193,7 +193,7 @@ const setData = (value: any) => {
       detail: {
         valueAnimation: true,
      offsetCenter: [0, '15%'],
-        fontSize: 15,
+     fontSize: 20,
         formatter: '{value} %RH',
         color: 'inherit'
       },
diff --git a/src/views/PaintShopView/finishView/top.vue b/src/views/PaintShopView/finishView/top.vue
index a2b2559..66fecbf 100644
--- a/src/views/PaintShopView/finishView/top.vue
+++ b/src/views/PaintShopView/finishView/top.vue
@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \screenFront\src\views\PaintShopView\finishView\top.vue
+ * @FilePath: \gitscreenFront\src\views\PaintShopView\finishView\top.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 14:43:28
@@ -50,7 +50,7 @@ import border3 from "@/components/borderBox/border3.vue";
 import { calcWH } from "@/components/ts/selfAdaption";
 // import {getPowerData} from '@/http/environment'
 import { getSensorByDept} from "@/http/PaintShopView/index";
-import humidity from "./chart/humidity.vue";
+import humidity from "./../components/humidity.vue";
 import chart from "@/components/assembly/chart2.vue";
 import verticalNum from "../components/verticalNum.vue";
 import pm from "../components/pm.vue"
diff --git a/src/views/PaintShopView/machiningView/top.vue b/src/views/PaintShopView/machiningView/top.vue
index 4c88110..c141d0d 100644
--- a/src/views/PaintShopView/machiningView/top.vue
+++ b/src/views/PaintShopView/machiningView/top.vue
@@ -49,7 +49,7 @@ import border3 from "@/components/borderBox/border3.vue";
 import { calcWH } from "@/components/ts/selfAdaption";
 // import {getPowerData} from '@/http/environment'
 import { getSensorByDept} from "@/http/PaintShopView/index";
-import humidity from "./chart/humidity.vue";
+import humidity from "./../components/humidity.vue";
 import chart from "@/components/assembly/chart2.vue";
 import verticalNum from "../components/verticalNum.vue";
 import pm from "../components/pm.vue"
diff --git a/src/views/electronicControlAmbient/chart/humidity.vue b/src/views/electronicControlAmbient/chart/humidity.vue
index 21b3c9f..b6ae028 100644
--- a/src/views/electronicControlAmbient/chart/humidity.vue
+++ b/src/views/electronicControlAmbient/chart/humidity.vue
@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\finishView\chart\humidity.vue
+ * @FilePath: \gitscreenFront\src\views\electronicControlAmbient\chart\humidity.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-10 13:27:36
@@ -59,10 +59,10 @@ const setData = (value: any) => {
     series: [
       {
         type: "gauge",
-        center: ["50%", "90%"],
+        center: ["50%", "85%"],
         startAngle: 190,
         endAngle: -10,
-        radius: "30%",
+        radius: "50%",
         min: -30,
         max: 70,
         splitNumber: 10,
@@ -78,7 +78,7 @@ const setData = (value: any) => {
       //刻度轴宽
       axisLine: {
         lineStyle: {
-          width: 5,
+          width: 10,
           color: [
             [0.15, '#FF6E76'],
             [0.75, '#7CFFB2'],
@@ -98,7 +98,7 @@ const setData = (value: any) => {
       },
       //刻度线
       splitLine: {
-        distance: -10,
+        distance: 5,
         length: 3,
         lineStyle: {
           width: 3,
@@ -107,9 +107,9 @@ const setData = (value: any) => {
       },
       //表刻度值
       axisLabel: {
-        distance: -20,
+        distance: 15,
         color: '#999',
-        fontSize: 12
+        fontSize: 10
       },
       anchor: {
         show: false
@@ -122,8 +122,8 @@ const setData = (value: any) => {
         // width: '10%',
         // lineHeight: 5,
         // borderRadius: 8,
-        // offsetCenter: [0, '-15%'],
-        fontSize: 12,
+        offsetCenter: [0, '25%'],
+        fontSize: 15,
         // fontWeight: 'bolder',
         formatter: '{value} °C',
         color: 'inherit'
@@ -136,7 +136,7 @@ const setData = (value: any) => {
       },
       {
         type: "gauge",
-        center: ["50%", "55%"],
+        center: ["50%", "50%"],
         startAngle: 200,
         endAngle: -20,
         min: 0,
@@ -180,9 +180,9 @@ const setData = (value: any) => {
         }
       },
       axisLabel: {
-        distance: -40,
+        distance: 15,
         color: '#999',
-        fontSize: 20
+        fontSize: 12
       },
       anchor: {
         show: false
@@ -193,7 +193,7 @@ const setData = (value: any) => {
       detail: {
         valueAnimation: true,
      offsetCenter: [0, '15%'],
-        fontSize: 15,
+     fontSize: 20,
         formatter: '{value} %RH',
         color: 'inherit'
       },
diff --git a/src/views/electronicControlAmbient/chart/verticalNum.vue b/src/views/electronicControlAmbient/chart/verticalNum.vue
index 1381d12..a9bd9db 100644
--- a/src/views/electronicControlAmbient/chart/verticalNum.vue
+++ b/src/views/electronicControlAmbient/chart/verticalNum.vue
@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\chart\verticalNum.vue
+ * @FilePath: \gitscreenFront\src\views\electronicControlAmbient\chart\verticalNum.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 08:22:35
@@ -8,24 +8,22 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
 -->
 <template>
-  <div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width,position:'relative'}">
+  <div ref="numBox1" :style="{ height: boxSize.height, width: boxSize.width }">
     <border3 ref="refborder3">
       <template v-slot>
         <div class="box" ref="classBox1">
-          <!-- <div class="contentbox"> -->
-            <h2>{{ title }}</h2>
-
-            <h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
-          <i
-            :class="
-              value.data > value.quota
-                ? 'iconfont ' + value.iconname + ' icon-red'
-                : 'iconfont ' + value.iconname + ' icon-blue'
-            "
-          ></i>
-          
-          <p  class="unit"><p v-show="value.data&&value.unit"  :class="'num'">{{value.data}}</p><span>{{value.unit}}</span></p>
-          <!-- </div> -->
+          <h2>{{ props.title }}</h2>
+          <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">
+          <p class="num">{{ item.val }}</p>
+          <span>{{ value.unit }}</span>
+          </p>
 
         </div>
       </template>
@@ -34,18 +32,24 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from "vue";
+import { onMounted, reactive, ref, watch, computed, 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 { t } = useI18n();
 let props = defineProps<{
   title: string;
 }>();
+let i = ref(0)
+let item = computed(() => {
+
+  return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0 };
+});
 let keynum = ref(0);
-const value = reactive<verticalNumPerson>({
-  data: null,
+const value = reactive<any>({
+  data: [],
   unit: "",
   quota: null,
   iconname: "",
@@ -53,17 +57,23 @@ const value = reactive<verticalNumPerson>({
 
 let refborder3 = ref();
 let numBox1 = ref();
-const classBox1=ref()
-onMounted(() => {});
+const classBox1 = ref()
+let timer: any = null;
+onMounted(() => {
 
-const boxSize=reactive({
-  height:'',
-  width:''
+});
+onUnmounted(() => {
+  clearInterval(timer);
+})
+
+const boxSize = reactive({
+  height: '',
+  width: ''
 })
 
 function setchartWH(width: any, height: any) {
-  boxSize.height=height+'px'
-  boxSize.width=width+'px'
+  boxSize.height = height + 'px'
+  boxSize.width = width + 'px'
   refborder3.value.resetWH();
 }
 
@@ -77,15 +87,15 @@ const setData = (
   value.iconname = iconname;
   value.quota = quota;
   value.unit = unit;
-
-  // if (data > quota) {
-  //   //使用定时器解决通知重叠问题
-  //   let navdebug = setTimeout(() => {
-  //     warningNot(props.title, "出现异常，异常值为："+value.data+"，请排查！");
-  //     clearTimeout(navdebug);
-  //   }, 0);
-  // }
   keynum.value++;
+
+  clearInterval(timer);
+  timer = setInterval(() => {
+    i.value++;
+    if (i.value >= value.data.length) {
+      i.value = 0;
+    }
+  }, 5000);
 };
 
 defineExpose({
@@ -96,15 +106,23 @@ defineExpose({
 
 <style scoped>
 @import "@/assets/css/iconfont.css";
+
 .box {
   height: 50%;
   width: 100%;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
-  /* position: relative; */
 }
+
+.box>h5 {
+  font-size: 15px;
+  /* margin-bottom: 20px; */
+  margin-top: 20px;
+}
+
 /* .contentbox{
   height: 100%;
   width: 100%;
@@ -116,59 +134,84 @@ defineExpose({
 h2 {
   color: #fff;
 }
+
 p {
   color: #fff;
 }
+
 .icon-red {
-  font-size: 150px;
+  font-size: 100px;
   color: #E43961;
   animation: redstart 2s infinite;
   /* position: relative; */
   /* top: -15px; */
 }
+
 .icon-blue {
-  font-size: 150px;
+  font-size: 100px;
   color: #20AEC5;
   /* position: relative; */
   /* top: -15px; */
 }
-.icon-red,
-.icon-blue {
-  /* margin-bottom: 20%; */
-}
-.box>h2{
+
+.iconsmall-size {
   font-size: 20px;
-  position: absolute;
-  top: 15px;
-  left:20px;
 }
-.box>h5{
-  font-size: 15px;
-  /* margin-bottom: 20px; */
-  margin-top: -10px;
-}
-.num{
+
+.num {
   font-size: 16px;
 }
-.unit{
+
+.unit {
   display: flex;
   justify-content: center;
   align-items: center;
   vertical-align: top;
   font-size: 16px;
-  height: 0;
+  height: 5;
   width: 100px;
 }
 
-@keyframes redstart {
-    0% {
-        
-      }
-      50% {
-        text-shadow: #fff 1px 0 10px;
-    }
-      100% {
-       
-      }
+.box>h2 {
+  font-size: 20px;
+  position: absolute;
+top: 15px;
+left:20px;
 }
-</style>
+
+
+.icontip {
+  display: flex;
+  margin-top: -60px;
+  width: 100px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+}
+
+.icontipBox li {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 5px;
+}
+
+.icontipBox li p:nth-child(1) {
+  width: 40%;
+  text-align: left;
+}
+
+.icontipBox li p:nth-child(2) {
+  flex: 1;
+}
+
+@keyframes redstart {
+  0% {}
+
+  50% {
+    text-shadow: #fff 1px 0 10px;
+  }
+
+  100% {}
+}</style>
diff --git a/src/views/electronicControlAmbient/top.vue b/src/views/electronicControlAmbient/top.vue
index 46f7ffa..a17a750 100644
--- a/src/views/electronicControlAmbient/top.vue
+++ b/src/views/electronicControlAmbient/top.vue
@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient\top.vue
+ * @FilePath: \gitscreenFront\src\views\electronicControlAmbient\top.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 14:43:28
@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from "vue";
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
 import border6 from "@/components/borderBox/border6.vue";
 import border3 from "@/components/borderBox/border3.vue";
 import { calcWH } from "@/components/ts/selfAdaption";
@@ -63,6 +63,7 @@ let verticalNum4 = ref();
 let borderref=ref()
 let humidityref=ref()
 let ductref=ref()
+let temp_humi_timer = null
 
 let props = defineProps<{
   width: number;
@@ -257,14 +258,28 @@ let ductOption = reactive({
     
 //     }
 //   }
+let temp_humi_index = 0
   function setcontentData(val){
+    let noise = val.noise.map((item) => {
+    return { name: item.name, val: item.data };
+  });
     // verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
-    verticalNum4.value.setData(val.noise,'icon-shengyin',120,"dB")
+    verticalNum4.value.setData(noise,'icon-shengyin',120,"dB")
     // verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
     // verticalNum6.value.setData(val.TVOC_CH2O.CH2O,'icon-app_icons--',5,"mg/m3")
     // verticalNum7.value.setData(val.TVOC_CH2O.TVOC,'icon-TVOC-Outlined',5,"PPM")
     // console.log(pmref.value);
-    humidityref.value.setData({h:val.temp_humi.huim,c:val.temp_humi.temp})
+    humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp })
+  if (val.temp_humi.length > 1) {
+    temp_humi_timer = setInterval(() => {
+      humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp })
+      temp_humi_index++
+      if (temp_humi_index >= val.temp_humi.length) {
+        temp_humi_index = 0
+      }
+    }, 3000)
+  }
+
     let type=[]
     let valueduct=[]
     for(let key in val.water_pressure){
@@ -317,6 +332,9 @@ onMounted(() => {
 
     
 });
+onUnmounted(()=>{
+  clearInterval(temp_humi_timer)
+})
 defineExpose({
   setcontentData,
 });
diff --git a/src/views/energyConsumeJixiefenchang/content/chart/gas.vue b/src/views/energyConsumeJixiefenchang/content/chart/gas.vue
index 4ca792f..a1b34fe 100644
--- a/src/views/energyConsumeJixiefenchang/content/chart/gas.vue
+++ b/src/views/energyConsumeJixiefenchang/content/chart/gas.vue
@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\energyConsumeJixiefenchang\content\chart\gas.vue
+ * @FilePath: \gitscreenFront\src\views\energyConsumeJixiefenchang\content\chart\gas.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-14 13:24:12
@@ -10,12 +10,12 @@
 
 <template>
     <div class="gasborder">
-  <border4 ref="refborder4">
+  <border6 ref="refborder4">
       <template v-slot>
         <!-- <h1>{{props.title}}</h1> -->
         <div ref="gas" ></div>
       </template>
-  </border4>
+  </border6>
   </div>
 </template>
 
@@ -23,7 +23,7 @@
 import {getCurrentInstance, onMounted, reactive, ref} from "vue"
 import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
 import 'echarts-liquidfill'
-import border4 from "@/components/borderBox/border4.vue"
+import border6 from "@/components/borderBox/border6.vue";
 const { proxy } = getCurrentInstance() as any;
 let props=defineProps<{
       title:string,
diff --git a/src/views/energyConsumeJixiefenchang/content/top.vue b/src/views/energyConsumeJixiefenchang/content/top.vue
index 6eb89b6..1c43885 100644
--- a/src/views/energyConsumeJixiefenchang/content/top.vue
+++ b/src/views/energyConsumeJixiefenchang/content/top.vue
@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\energyConsumeJixiefenchang\content\top.vue
+ * @FilePath: \gitscreenFront\src\views\energyConsumeJixiefenchang\content\top.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 14:43:28
@@ -156,7 +156,7 @@ const powerBox = (width: any, height: any) => {
   let a = calcWH(height, width, 1, 4, 0);
   //修改高度
   ratio.value.setchartWH(a.oWidth * 3, a.oHeight);
-  gasref.value.setchartWH(a.oWidth, a.oHeight);
+  gasref.value.setchartWH(a.oWidth-20, a.oHeight);
 };
 const clickPowerChart = () => {
   router.push({
@@ -222,7 +222,7 @@ watch(
           backgroundStyle: {
             color: "rgba(180, 180, 180, 0.2)",
           },
-          barWidth:'50%',
+          barWidth:'80px',
           label: {
             show: true,
           },
@@ -237,7 +237,7 @@ watch(
           backgroundStyle: {
             color: "rgba(180, 180, 180, 0.2)",
           },
-          barWidth:'30%',
+          barWidth:'80px',
           label: {
             show: true,
           },
@@ -253,7 +253,7 @@ watch(
           backgroundStyle: {
             color: "rgba(180, 180, 180, 0.2)",
           },
-          barWidth:'30%',
+          barWidth:'80px',
           label: {
             show: true,
           },
@@ -268,7 +268,7 @@ watch(
           backgroundStyle: {
             color: "rgba(180, 180, 180, 0.2)",
           },
-          barWidth:'30%',
+          barWidth:'80px',
           label: {
             show: true,
           },