修改机械分厂 精饰 大件 焊接车间样式

src/components/borderBox/border3.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \daping\src\components\borderBox\border3.vue
+ * @FilePath: \screenFront\src\components\borderBox\border3.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-01-31 15:03:08
@@ -37,6 +37,7 @@ defineExpose({ resetWH })
   .slot{
     width: 100%;
     height: 100%;
+    box-sizing: border-box;
       display: flex;
       justify-content: center;
       align-items: center;

src/utils/devSever.ts

@@ -1,5 +1,5 @@
 /*
- * @FilePath: \wwwd:\code\screenFront\src\utils\devSever.ts
+ * @FilePath: \screenFront\src\utils\devSever.ts
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-03-03 08:59:37
@@ -8,8 +8,8 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
  */
 
-// export const development={xhr:process.env.VUE_APP_BASE_API,ws:"ws://192.168.110.237:9018/",imgxhr:process.env.VUE_APP_BASE_API+"/image/"}
+export const development={xhr:process.env.VUE_APP_BASE_API,ws:"ws://192.168.3.97:9018/",imgxhr:process.env.VUE_APP_BASE_API+"/image/"}
-export const development={xhr:process.env.VUE_APP_BASE_API,ws:"ws://8.130.165.100:9018/",imgxhr:process.env.VUE_APP_BASE_API+"/image/"}
+// export const development={xhr:process.env.VUE_APP_BASE_API,ws:"ws://8.130.165.100:9018/",imgxhr:process.env.VUE_APP_BASE_API+"/image/"}
 export const production={xhr:process.env.VUE_APP_BASE_API,ws:"ws://8.130.165.100:9018/",imgxhr:process.env.VUE_APP_BASE_API+"/image/"}
 //拼接图片url路径
 export function imgurlAddXhr(img){

src/views/PaintShopView/View1/bottom.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\View1\bottom.vue
+ * @FilePath: \screenFront\src\views\PaintShopView\View1\bottom.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 14:43:28
@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from "vue";
+import { onMounted, reactive, ref, watch,onUnmounted } from "vue";
 import { calcWH } from "@/components/ts/selfAdaption";
 // import {getPowerData} from '@/http/environment'
 import { getPowerData, getconsumeDetail } from "@/http/energyConsume";
@@ -56,7 +56,7 @@ let powerref = ref();
 let Productionref = ref();
 let borderref=ref()
 let pmref=ref()
-
+let pm_timer = null
 let props = defineProps<{
   width: number;
   height: number;
@@ -188,7 +188,9 @@ let Data={power:{"1月":11,"2月":22,"3月":11,"4月":22},Production:{"1月":11,
 //       // yields.value.setData(result.data);
 //     }
 //   }
+  let pm_index = 0
 function setcontentData(val){  
+  clearInterval(pm_timer)
   let monthData=[]
     let powerMonth=[]
     for(let key in val.power){
@@ -219,7 +221,7 @@ function setcontentData(val){
             show: true,
             color:'#fff',
             formatter: function(params){
-              console.log(params);
+              // console.log(params);
               return params.value.toLocaleString()
             },
             position: "top",
@@ -263,7 +265,7 @@ function setcontentData(val){
             show: true,
             color:'#fff',
             formatter: function(params){
-              console.log(params);
+              // console.log(params);
               return params.value.toLocaleString()
             },
             position: "top",
@@ -275,12 +277,21 @@ function setcontentData(val){
     })
     
     Productionref.value.changeData(ProductionOption.option)
-    pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
+    pmref.value.setData({two:val.dust[pm_index].pm25,ten:val.dust[pm_index].pm10,title:val.dust[pm_index].name})
+  if (val.dust.length > 1) {
+    pm_timer = setInterval(() => {
+      pmref.value.setData({two:val.dust[pm_index].pm25,ten:val.dust[pm_index].pm10,title:val.dust[pm_index].name})
+      pm_index++
+      if (pm_index >= val.dust.length) {
+        pm_index = 0
+      }
+    }, 3000)
+  }
 }
 onMounted(() => {
-    
+});
-
+onUnmounted(() => {
-
+  clearInterval(pm_timer)
 });
 defineExpose({
   setcontentData,

src/views/PaintShopView/View1/chart/pm.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\View1\chart\pm.vue
+ * @FilePath: \screenFront\src\views\PaintShopView\View1\chart\pm.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-10 13:27:36
@@ -38,10 +38,10 @@ const echartsData = reactive<EDataPerson>({
  */
 const setData = (value: any) => {
   echartsData.humiture!.div = humiture.value;
-  echartsData.humiture!.title = props.title;
+  echartsData.humiture!.title = value.title;
   echartsData.humiture!.data = {
     title: {
-      text: props.title,
+      text: value.title,
       show: true,
       textStyle: {
         color: "#fff",

src/views/PaintShopView/View1/index.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\View1\index.vue
+ * @FilePath: \screenFront\src\views\PaintShopView\View1\index.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-04-11 13:50:05
@@ -11,7 +11,8 @@
   <div class="container">
     <div class="header">
       <div class="title">
-             <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.JingShi_generalEnvironment')" :titleTip="[]" :typeFun="['time']" :alarmType="[]"></header2>
+        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.JingShi_generalEnvironment')"
+          :titleTip="[]" :typeFun="['time']" :alarmType="[]"></header2>
       </div>
     </div>
     <div class="content" ref="Acontent">
@@ -67,6 +68,7 @@ let {t} = useI18n();
   try {
     let data = JSON.parse(val);
     if (data.type == "PaintShopView") {
+      
       // store.changenoise(data.msg);
       topref.value.setcontentData(data.msg)
       bottomref.value.setcontentData(data.msg)
@@ -87,7 +89,8 @@ function errWebsocket(val) {
       clearTimeout(time.value)
       time.value = null
     }
-         time.value = setTimeout(() => {WH(contentBox)
+    time.value = setTimeout(() => {
+      WH(contentBox)
     }, 1000);
   })
   getSensorByDeptfun()
@@ -107,6 +110,7 @@ function errWebsocket(val) {
   color: #20aec5;
   background-color: #100c2a;
 }
+
 .title {
   width: 100%;
   display: flex;
@@ -114,20 +118,24 @@ function errWebsocket(val) {
   align-items: center;
   position: relative;
 }
+
 .title>h1 {
   font-size: 30px;
   position: absolute;
   top: 10px;
 }
+
 .header {
   position: relative;
 }
+
 .header p {
   position: absolute;
   right: 50px;
   bottom: 20px;
   font-size: 20px;
 }
+
 .content {
   width: 100%;
   --header: 100px;
@@ -139,10 +147,12 @@ function errWebsocket(val) {
 
   /* --content:calc(100vh - var(--header)) */
   overflow: hidden !important;
-     -ms-overflow-style: none; /* IE + Edge */
+  -ms-overflow-style: none;
-     scrollbar-width: none; /* Firefox */
+  /* IE + Edge */
+  scrollbar-width: none;
+  /* Firefox */
 }
+
 ::-webkit-scrollbar {
   display: none;
-   }
+}</style>
-   </style>

src/views/PaintShopView/View1/top.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\View1\top.vue
+ * @FilePath: \screenFront\src\views\PaintShopView\View1\top.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 14:43:28
@@ -15,10 +15,7 @@
           <verticalNum ref="verticalNum3" :title="t('messages.gasDetection')"></verticalNum>
           <verticalNum ref="verticalNum5" :title="t('messages.smokeDetection')"></verticalNum>
           <verticalNum ref="verticalNum4" :title="t('messages.noiseDetection')"></verticalNum>
-          <verticalNum
+          <verticalNum ref="verticalNum6" :title="t('messages.CH2Ojiance')"></verticalNum>
-            ref="verticalNum6"
-            :title="t('messages.CH2Ojiance')"
-          ></verticalNum>
           <verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum>
           <div>
             <border3 ref="borderref">
@@ -27,11 +24,7 @@
               </template>
             </border3>
           </div>
-          <chart
+          <chart :title="ductOption.title" :option="ductOption.option" ref="ductref"></chart>
-            :title="ductOption.title"
-            :option="ductOption.option"
-            ref="ductref"
-          ></chart>
         </div>
       </el-col>
     </el-row>
@@ -39,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from "vue";
+import { onMounted, reactive, ref, watch,onUnmounted } from "vue";
 import border6 from "@/components/borderBox/border6.vue";
 import border3 from "@/components/borderBox/border3.vue";
 import { calcWH } from "@/components/ts/selfAdaption";
@@ -47,7 +40,7 @@ import { calcWH } from "@/components/ts/selfAdaption";
 import { getSensorByDept } from "@/http/PaintShopView/index";
 import humidity from "./chart/humidity.vue";
 import chart from "@/components/assembly/chart2.vue";
-import verticalNum from "./chart/verticalNum.vue";
+import verticalNum from "./../components/verticalNum.vue";
 import { useRoute, useRouter } from "vue-router";
 import { useEnergyConsumeStore } from "@/store/module/energyConsume";
 import { useI18n } from 'vue-i18n'
@@ -63,7 +56,7 @@ let verticalNum7 = ref();
 let borderref = ref()
 let humidityref = ref()
 let ductref = ref()
-
+let temp_humi_timer = null
 let props = defineProps<{
   width: number;
   height: number;
@@ -257,14 +250,38 @@ let ductOption = reactive({
 
 //     }
 //   }
+  let temp_humi_index = 0
 function setcontentData(val) {
+  let CH2O = val.TVOC_CH2O.map((item) => {
+    return { name: item.name, val: item.CH2O };
+  });
+  let TVOC = val.TVOC_CH2O.map((item) => {
+    return { name: item.name, val: item.TVOC };
+  });
+  let Smoke = val.Smoke.map((item) => {
+    return { name: item.name, val: item.data };
+  });
+  let noise = val.noise.map((item) => {
+    return { name: item.name, val: item.data };
+  });
   verticalNum3.value.setData(val.FIRE, 'icon-ranqi', 0, "")
-    verticalNum4.value.setData(val.noise,'icon-shengyin',120,"dB")
+  verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB")
-    verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',100,"")
+  verticalNum5.value.setData(Smoke, 'icon-yanwubaojingqi', 100, "")
-    verticalNum6.value.setData(val.TVOC_CH2O.CH2O,'icon-app_icons--',0.08,"mg/m3")
+  verticalNum6.value.setData(CH2O, 'icon-app_icons--', 0.08, "mg/m3")
-    verticalNum7.value.setData(val.TVOC_CH2O.TVOC,'icon-TVOC-Outlined',0.5,"mg/m3")
+  verticalNum7.value.setData(TVOC, 'icon-TVOC-Outlined', 0.5, "mg/m3")
   // 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) {
@@ -318,6 +335,9 @@ onMounted(() => {
 
 
 });
+onUnmounted(() => {
+  clearInterval(temp_humi_timer)
+})
 defineExpose({
   setcontentData,
 });

src/views/PaintShopView/components/verticalNum.vue

@@ -0,0 +1,215 @@
+<!--
+ * @FilePath: \screenFront\src\views\PaintShopView\components\verticalNum.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-02-13 08:22:35
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+<template>
+    <div ref="numBox1" :style="{ height: boxSize.height, width: boxSize.width, marginBottom: '10px' }">
+      <border3 ref="refborder3">
+        <template v-slot>
+          <div class="box" ref="classBox1">
+            <h5 v-if="value.unit">{{
+              `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
+            <!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
+            <h2>{{ item.name }}</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>
+      </border3>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  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 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<any>({
+    data: [],
+    unit: "",
+    quota: null,
+    iconname: "",
+  });
+  
+  let refborder3 = ref();
+  let numBox1 = ref();
+  const classBox1 = ref()
+  let timer: any = null;
+  onMounted(() => {
+  
+  });
+  onUnmounted(() => {
+    clearInterval(timer);
+  })
+  
+  const boxSize = reactive({
+    height: '',
+    width: ''
+  })
+  
+  function setchartWH(width: any, height: any) {
+    boxSize.height = height + 'px'
+    boxSize.width = width + 'px'
+    refborder3.value.resetWH();
+  }
+  
+  const setData = (
+    data?: number | null,
+    iconname?: string,
+    quota?: number | null,
+    unit?: string
+  ) => {
+    value.data = data;
+    value.iconname = iconname;
+    value.quota = quota;
+    value.unit = unit;
+    keynum.value++;
+  
+    clearInterval(timer);
+    timer = setInterval(() => {
+      i.value++;
+      if (i.value >= value.data.length) {
+        i.value = 0;
+      }
+    }, 5000);
+  };
+  
+  defineExpose({
+    setchartWH,
+    setData,
+  });
+  </script>
+  
+  <style scoped>
+  @import "@/assets/css/iconfont.css";
+  
+  .box {
+    height: 50%;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+  }
+  
+  .box>h5 {
+    font-size: 15px;
+    margin-bottom: 20px;
+    margin-top: -50px;
+  }
+  
+  /* .contentbox{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+  } */
+  h2 {
+    color: #fff;
+  }
+  
+  p {
+    color: #fff;
+  }
+  
+  .icon-red {
+    font-size: 100px;
+    color: #E43961;
+    animation: redstart 2s infinite;
+    /* position: relative; */
+    /* top: -15px; */
+  }
+  
+  .icon-blue {
+    font-size: 100px;
+    color: #20AEC5;
+    /* position: relative; */
+    /* top: -15px; */
+  }
+  
+  .iconsmall-size {
+    font-size: 20px;
+  }
+  
+  .num {
+    font-size: 32px;
+  }
+  
+  .unit {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    vertical-align: top;
+    font-size: 25px;
+    height: 0;
+    width: 100px;
+  }
+  
+  .box>h2 {
+    font-size: 24px;
+  }
+  
+  
+  .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>
+  

src/views/PaintShopView/stuffView/bottom.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\stuffView\bottom.vue
+ * @FilePath: \screenFront\src\views\PaintShopView\stuffView\bottom.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 14:43:28
@@ -219,7 +219,7 @@ function setcontentData(val){
             show: true,
             color:'#fff',
             formatter: function(params){
-              console.log(params);
+              // console.log(params);
               return params.value.toLocaleString()
             },
             position: "top",
@@ -263,7 +263,7 @@ function setcontentData(val){
             show: true,
             color:'#fff',
             formatter: function(params){
-              console.log(params);
+              // console.log(params);
               return params.value.toLocaleString()
             },
             position: "top",

src/views/PaintShopView/stuffView/chart/pm.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\stuffView\chart\pm.vue
+ * @FilePath: \screenFront\src\views\PaintShopView\stuffView\chart\pm.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-10 13:27:36
@@ -38,10 +38,10 @@ const echartsData = reactive<EDataPerson>({
  */
 const setData = (value: any) => {
   echartsData.humiture!.div = humiture.value;
-  echartsData.humiture!.title = props.title;
+  echartsData.humiture!.title = value.title;
   echartsData.humiture!.data = {
     title: {
-      text: props.title,
+      text: value.title,
       show: true,
       textStyle: {
         color: "#fff",

src/views/PaintShopView/stuffView/top.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\stuffView\top.vue
+ * @FilePath: \screenFront\src\views\PaintShopView\stuffView\top.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 14:43:28
@@ -15,11 +15,8 @@
           <!-- <verticalNum ref="verticalNum3" :title="'燃气检测'"></verticalNum>
           <verticalNum ref="verticalNum5" :title="'烟雾检测'"></verticalNum> -->
           <verticalNum ref="verticalNum4" :title="t('messages.noiseDetection')"></verticalNum>
-          <!-- <verticalNum
+          <verticalNum ref="verticalNum6" :title="'甲醛监测'"></verticalNum>
-            ref="verticalNum6"
+          <verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum>
-            :title="'甲醛监测'"
-          ></verticalNum>
-          <verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum> -->
           <div>
             <border3 ref="borderref">
               <template v-slot>
@@ -27,11 +24,7 @@
               </template>
             </border3>
           </div>
-          <chart
+          <chart :title="ductOption.title" :option="ductOption.option" ref="ductref"></chart>
-            :title="ductOption.title"
-            :option="ductOption.option"
-            ref="ductref"
-          ></chart>
           <div>
             <border3 ref="borderrefPM">
               <template v-slot>
@@ -46,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from "vue";
+import { onMounted, reactive, ref, watch, onUnmounted } from "vue";
 import border6 from "@/components/borderBox/border6.vue";
 import border3 from "@/components/borderBox/border3.vue";
 import { calcWH } from "@/components/ts/selfAdaption";
@@ -55,7 +48,7 @@ import { getSensorByDept} from "@/http/PaintShopView/index";
 import humidity from "./chart/humidity.vue";
 import pm from "./chart/pm.vue";
 import chart from "@/components/assembly/chart2.vue";
-import verticalNum from "./chart/verticalNum.vue";
+import verticalNum from "./../components/verticalNum.vue";
 import { useRoute, useRouter } from "vue-router";
 import { useEnergyConsumeStore } from "@/store/module/energyConsume";
 import { useI18n } from 'vue-i18n'
@@ -66,14 +59,15 @@ const router = useRouter();
 // let verticalNum3 = ref();
 let verticalNum4 = ref();
 // let verticalNum5 = ref();
-// let verticalNum6 = ref();
+let verticalNum6 = ref();
-// let verticalNum7 = ref();
+let verticalNum7 = ref();
 let borderref = ref()
 let humidityref = ref()
 let ductref = ref()
 let borderrefPM = ref()
 let pmref = ref()
-
+let temp_humi_timer = null
+let pm_timer = null
 let props = defineProps<{
   width: number;
   height: number;
@@ -101,13 +95,13 @@ const powerBox = (width: any, height: any) => {
   let a = calcWH(height, width, 1, 24, 0);
   //修改高度
   // verticalNum3.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
-  verticalNum4.value.setchartWH(a.oWidth*6-20,a.oHeight-20)
+  verticalNum4.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
   // verticalNum5.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
-  // verticalNum6.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
+  verticalNum6.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
-  // verticalNum7.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
+  verticalNum7.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
-  humidityref.value.setchartWH(a.oWidth*6-40,a.oHeight-40)
+  humidityref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
-  ductref.value.setchartWH(a.oWidth*6-20, a.oHeight-20);
+  ductref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20);
-  pmref.value.setchartWH(a.oWidth*6-40,a.oHeight-40)
+  pmref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
 };
 let ductOption = reactive({
   title: "",
@@ -269,14 +263,39 @@ let ductOption = reactive({
 
 //     }
 //   }
+
+let pm_index = 0
+
+let temp_humi_index = 0
 function setcontentData(val) {
+
+  clearInterval(temp_humi_timer)
+  clearInterval(pm_timer)
+  let CH2O = val.TVOC_CH2O.map((item) => {
+    return { name: item.name, val: item.CH2O };
+  });
+  let TVOC = val.TVOC_CH2O.map((item) => {
+    return { name: item.name, val: item.TVOC };
+  });
+  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")
+  verticalNum6.value.setData(CH2O, 'icon-app_icons--', 0.05, "mg/m3")
-    // verticalNum7.value.setData(val.TVOC_CH2O.TVOC,'icon-TVOC-Outlined',5,"PPM")
+  verticalNum7.value.setData(TVOC, 'icon-TVOC-Outlined', 0.5, "mg/m3")
-    // 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) {
@@ -321,13 +340,26 @@ let ductOption = reactive({
   //         },
   //     },
   // })
-    pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
+  pmref.value.setData({two:val.dust[pm_index].pm25,ten:val.dust[pm_index].pm10,title:val.dust[pm_index].name})
+  if (val.dust.length > 1) {    
+    pm_timer = setInterval(() => {      
+      pmref.value.setData({two:val.dust[pm_index].pm25,ten:val.dust[pm_index].pm10,title:val.dust[pm_index].name})
+      pm_index++
+      if (pm_index >= val.dust.length) {
+        pm_index = 0
+      }
+    }, 3000)
+  }
   ductref.value.changeData(ductOption.option)
 }
 let Data = { power: { "管道1": 11, "管道2": 22 } }
 onMounted(() => {
 
 
+});
+onUnmounted(() => {
+  clearInterval(temp_humi_timer)
+  clearInterval(pm_timer)
 });
 defineExpose({
   setcontentData,

src/views/PaintShopView/weldView/bottom.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\weldView\bottom.vue
+ * @FilePath: \screenFront\src\views\PaintShopView\weldView\bottom.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 14:43:28
@@ -219,7 +219,7 @@ function setcontentData(val){
             show: true,
             color:'#fff',
             formatter:function(params){
-              console.log(params);
+              // console.log(params);
               return params.value.toLocaleString()
             },
             position: "top",
@@ -263,7 +263,7 @@ function setcontentData(val){
             show: true,
             color:'#fff',
             formatter:function(params){
-              console.log(params);
+              // console.log(params);
               return params.value.toLocaleString()
             },
             position: "top",

src/views/PaintShopView/weldView/chart/pm.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\weldView\chart\pm.vue
+ * @FilePath: \screenFront\src\views\PaintShopView\weldView\chart\pm.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-10 13:27:36
@@ -38,10 +38,10 @@ const echartsData = reactive<EDataPerson>({
  */
 const setData = (value: any) => {
   echartsData.humiture!.div = humiture.value;
-  echartsData.humiture!.title = props.title;
+  echartsData.humiture!.title = value.title;
   echartsData.humiture!.data = {
     title: {
-      text: props.title,
+      text: value.title,
       show: true,
       textStyle: {
         color: "#fff",
@@ -109,9 +109,6 @@ const setData = (value: any) => {
         anchor: {
           show: false,
         },
-        title: {
-          show: false,
-        },
         detail: {
           valueAnimation: true,
           width: "60%",
@@ -124,6 +121,7 @@ const setData = (value: any) => {
           color: "inherit",
         },
         title: {
+          show: false,
           offsetCenter: [0, "-20%"],
         },
         data: [

src/views/PaintShopView/weldView/top.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\weldView\top.vue
+ * @FilePath: \screenFront\src\views\PaintShopView\weldView\top.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 14:43:28
@@ -15,11 +15,8 @@
           <!-- <verticalNum ref="verticalNum3" :title="'燃气检测'"></verticalNum> -->
           <!-- <verticalNum ref="verticalNum5" :title="'烟雾检测'"></verticalNum> -->
           <verticalNum ref="verticalNum4" :title="t('messages.noiseDetection')"></verticalNum>
-          <!-- <verticalNum
+          <verticalNum ref="verticalNum6" :title="'甲醛监测'"></verticalNum>
-            ref="verticalNum6"
+          <verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum>
-            :title="'甲醛监测'"
-          ></verticalNum>
-          <verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum> -->
           <div>
             <border3 ref="borderref">
               <template v-slot>
@@ -27,11 +24,7 @@
               </template>
             </border3>
           </div>
-          <chart
+          <chart :title="ductOption.title" :option="ductOption.option" ref="ductref"></chart>
-            :title="ductOption.title"
-            :option="ductOption.option"
-            ref="ductref"
-          ></chart>
           <div>
             <border3 ref="borderrefPM">
               <template v-slot>
@@ -46,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from "vue";
+import { onMounted, reactive, ref, watch, onUnmounted } from "vue";
 import border6 from "@/components/borderBox/border6.vue";
 import border3 from "@/components/borderBox/border3.vue";
 import { calcWH } from "@/components/ts/selfAdaption";
@@ -55,7 +48,7 @@ import { getSensorByDept} from "@/http/PaintShopView/index";
 import humidity from "./chart/humidity.vue";
 import chart from "@/components/assembly/chart2.vue";
 import pm from "./chart/pm.vue";
-import verticalNum from "./chart/verticalNum.vue";
+import verticalNum from "./../components/verticalNum.vue";
 import { useRoute, useRouter } from "vue-router";
 import { useEnergyConsumeStore } from "@/store/module/energyConsume";
 import { useI18n } from 'vue-i18n'
@@ -66,14 +59,15 @@ const router = useRouter();
 // let verticalNum3 = ref();
 let verticalNum4 = ref();
 // let verticalNum5 = ref();
-// let verticalNum6 = ref();
+let verticalNum6 = ref();
-// let verticalNum7 = ref();
+let verticalNum7 = ref();
 let borderref = ref()
 let humidityref = ref()
 let ductref = ref()
 let borderrefPM = ref()
 let pmref = ref()
-
+let temp_humi_timer = null
+let pm_timer = null
 let props = defineProps<{
   width: number;
   height: number;
@@ -101,13 +95,13 @@ const powerBox = (width: any, height: any) => {
   let a = calcWH(height, width, 1, 24, 0);
   //修改高度
   // verticalNum3.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
-  verticalNum4.value.setchartWH(a.oWidth*6-20,a.oHeight-20)
+  verticalNum4.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
   // verticalNum5.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
-  // verticalNum6.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
+  verticalNum6.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
-  // verticalNum7.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
+  verticalNum7.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
-  humidityref.value.setchartWH(a.oWidth*6-40,a.oHeight-40)
+  humidityref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 40)
-  ductref.value.setchartWH(a.oWidth*6-20, a.oHeight-20);
+  ductref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20);
-  pmref.value.setchartWH(a.oWidth*6-40,a.oHeight-40)
+  pmref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 40)
 };
 let ductOption = reactive({
   title: "",
@@ -269,14 +263,38 @@ let ductOption = reactive({
 
 //     }
 //   }
+let pm_index = 0
+
+let temp_humi_index = 0
 function setcontentData(val) {
+  clearInterval(temp_humi_timer)
+  clearInterval(pm_timer)
+
+  let CH2O = val.TVOC_CH2O.map((item) => {
+    return { name: item.name, val: item.CH2O };
+  });
+  let TVOC = val.TVOC_CH2O.map((item) => {
+    return { name: item.name, val: item.TVOC };
+  });
+  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")
+  verticalNum6.value.setData(CH2O, 'icon-app_icons--', 5, "mg/m3")
-    // verticalNum7.value.setData(val.TVOC_CH2O.TVOC,'icon-TVOC-Outlined',5,"PPM")
+  verticalNum7.value.setData(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) {
@@ -321,7 +339,16 @@ let ductOption = reactive({
   //         },
   //     },
   // })
-    pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
+  pmref.value.setData({ two: val.dust[pm_index].pm25, ten: val.dust[pm_index].pm10, title: val.dust[pm_index].name })
+  if (val.dust.length > 1) {
+    pm_timer = setInterval(() => {
+      pmref.value.setData({ two: val.dust[pm_index].pm25, ten: val.dust[pm_index].pm10, title: val.dust[pm_index].name })
+      pm_index++
+      if (pm_index >= val.dust.length) {
+        pm_index = 0
+      }
+    }, 3000)
+  }
   ductref.value.changeData(ductOption.option)
 }
 let Data = { power: { "管道1": 11, "管道2": 22 } }