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

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);
 //     }
 //   }
-function setcontentData(val){
+  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
@@ -8,141 +8,151 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
 -->
 <template>
-    <div class="container">
+  <div class="container">
-     <div class="header">
+    <div class="header">
-           <div class="title">
+      <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')"
-           </div>
+          :titleTip="[]" :typeFun="['time']" :alarmType="[]"></header2>
-         </div>
+      </div>
-         <div class="content" ref="Acontent">
+    </div>
-           <el-row>
+    <div class="content" ref="Acontent">
-               <el-col :span="24">
+      <el-row>
-                   <top :width="size.oWidth*24" :height="size.oHeight" ref="topref"></top>
+        <el-col :span="24">
-               </el-col>
+          <top :width="size.oWidth * 24" :height="size.oHeight" ref="topref"></top>
-               <el-col :span="24">
+        </el-col>
-                   <bottom :width="size.oWidth*24" :height="size.oHeight*2" ref="bottomref"></bottom>
+        <el-col :span="24">
-               </el-col>
+          <bottom :width="size.oWidth * 24" :height="size.oHeight * 2" ref="bottomref"></bottom>
-             </el-row>
+        </el-col>
-         </div>
+      </el-row>
-       </div>
+    </div>
-   </template>
+  </div>
+</template>
    
-   <script setup lang="ts">
+<script setup lang="ts">
-   import {onMounted, onUnmounted, reactive, ref} from "vue"
+import { onMounted, onUnmounted, reactive, ref } from "vue"
-   import devSwiper from "@/components/EquipmentStatusDiagram/EquipmentStatusDiagram.vue"
+import devSwiper from "@/components/EquipmentStatusDiagram/EquipmentStatusDiagram.vue"
-   import header2 from '@/components/headerBox/header2.vue'
+import header2 from '@/components/headerBox/header2.vue'
-   import {calcWH} from '@/components/ts/selfAdaption'
+import { calcWH } from '@/components/ts/selfAdaption'
-   import { Offsite } from "@/store/module/offsite";
+import { Offsite } from "@/store/module/offsite";
-   import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
+import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
-   import { getSensorByDept} from "@/http/PaintShopView/index";
+import { getSensorByDept } from "@/http/PaintShopView/index";
-   import bottom from "./bottom.vue"
+import bottom from "./bottom.vue"
-   import top from "./top.vue"
+import top from "./top.vue"
-   import { useI18n } from 'vue-i18n'
+import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+let { t } = useI18n();
-   const store=Offsite()
+const store = Offsite()
-   let Acontent=ref()
+let Acontent = ref()
-   let time=ref(null)
+let time = ref(null)
-   let topref=ref()
+let topref = ref()
-   let bottomref=ref()
+let bottomref = ref()
-   let size=reactive({
+let size = reactive({
-       oWidth:0,
+  oWidth: 0,
-       oHeight:0
+  oHeight: 0
-     });
+});
-     function WH(div:HTMLElement){
+function WH(div: HTMLElement) {
-       let a=calcWH(div.offsetHeight,div.offsetWidth,3,24,0)
+  let a = calcWH(div.offsetHeight, div.offsetWidth, 3, 24, 0)
-     size.oWidth=a.oWidth
+  size.oWidth = a.oWidth
-     size.oHeight=a.oHeight
+  size.oHeight = a.oHeight
-       
-     }
-     async function getSensorByDeptfun() {
-    let result: any = await getSensorByDept({ depts: 6 });
 
-    if (result.code == 200) {
+}
-      topref.value.setcontentData(result.data)
+async function getSensorByDeptfun() {
-      bottomref.value.setcontentData(result.data)
+  let result: any = await getSensorByDept({ depts: 6 });
-    }
+
+  if (result.code == 200) {
+    topref.value.setcontentData(result.data)
+    bottomref.value.setcontentData(result.data)
   }
-  function getWebsocket(val) {
+}
+function getWebsocket(val) {
   // headerref.value.HeadergetWebsocket(val)
   try {
     let data = JSON.parse(val);
     if (data.type == "PaintShopView") {
+      
       // store.changenoise(data.msg);
       topref.value.setcontentData(data.msg)
       bottomref.value.setcontentData(data.msg)
     }
-  } catch (err) {}
+  } catch (err) { }
 }
 function errWebsocket(val) {
   // headerref.value.HeadererrWebsocket(val)
   // console.log(val);
 }
-     onMounted(()=>{
+onMounted(() => {
-       let contentBox=Acontent.value
+  let contentBox = Acontent.value
-       // let Timedombox=Timedom.value
+  // let Timedombox=Timedom.value
-       window.document.title=t('messages.JingShi_generalEnvironment')
+  window.document.title = t('messages.JingShi_generalEnvironment')
-       WH(contentBox)
+  WH(contentBox)
-       window.addEventListener('resize',()=>{
+  window.addEventListener('resize', () => {
-         if(time.value){
+    if (time.value) {
-           clearTimeout(time.value)
+      clearTimeout(time.value)
-           time.value=null
+      time.value = null
-         }
+    }
-         time.value = setTimeout(() => {WH(contentBox)
+    time.value = setTimeout(() => {
-         }, 1000);
+      WH(contentBox)
-       })
+    }, 1000);
-       getSensorByDeptfun()
+  })
-       connectWebsocket(null, null, getWebsocket, errWebsocket);
+  getSensorByDeptfun()
-     })
+  connectWebsocket(null, null, getWebsocket, errWebsocket);
-     onUnmounted(() => {
+})
-      closeWebsocket();
+onUnmounted(() => {
-       clearTimeout(time)
+  closeWebsocket();
-       // store.resetAllData()
+  clearTimeout(time)
-     })
+  // store.resetAllData()
-   </script>
+})
+</script>
    
-   <style scoped>
+<style scoped>
-   .container {
+.container {
-    height: 1080px;
+  height: 1080px;
   width: 1920px;
-       color: #20aec5;
+  color: #20aec5;
-       background-color: #100c2a;
+  background-color: #100c2a;
-     }
+}
-     .title {
+
-       width: 100%;
+.title {
-       display: flex;
+  width: 100%;
-       justify-content: center;
+  display: flex;
-       align-items: center;
+  justify-content: center;
-       position: relative;
+  align-items: center;
-     }
+  position: relative;
-     .title > h1 {
+}
-       font-size: 30px;
+
-       position: absolute;
+.title>h1 {
-       top: 10px;
+  font-size: 30px;
-     }
+  position: absolute;
-     .header{
+  top: 10px;
-         position: relative;
+}
-     }
+
-     .header p{
+.header {
-         position: absolute;
+  position: relative;
-         right: 50px;
+}
-         bottom: 20px;
+
-         font-size:20px;
+.header p {
-     }
+  position: absolute;
-     .content{
+  right: 50px;
-         width:100%;
+  bottom: 20px;
-         --header:100px;
+  font-size: 20px;
-         height:calc(1080px - var(--header))
+}
-     }
+
-   </style>
+.content {
-   <style>
+  width: 100%;
-   body {
+  --header: 100px;
-     
+  height: calc(1080px - var(--header))
-     /* --content:calc(100vh - var(--header)) */
+}
-     overflow: hidden !important;
+</style>
-     -ms-overflow-style: none; /* IE + Edge */
+<style>
-     scrollbar-width: none; /* Firefox */
+body {
-   }
+
-   ::-webkit-scrollbar {
+  /* --content:calc(100vh - var(--header)) */
-     display: none;
+  overflow: hidden !important;
-   }
+  -ms-overflow-style: none;
-   </style>
+  /* IE + Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+::-webkit-scrollbar {
+  display: none;
+}</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,23 +15,16 @@
           <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">
-                  <template v-slot>
+              <template v-slot>
-                      <humidity name="Electriccontrol" :title="t('messages.TemperatureHumidity')" ref="humidityref"></humidity>
+                <humidity name="Electriccontrol" :title="t('messages.TemperatureHumidity')" ref="humidityref"></humidity>
-                  </template>
+              </template>
-              </border3>
+            </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,19 +32,19 @@
 </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";
 // import {getPowerData} from '@/http/environment'
-import { getSensorByDept} from "@/http/PaintShopView/index";
+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'
-let {t} = useI18n();
+let { t } = useI18n();
 const store = useEnergyConsumeStore();
 const router = useRouter();
 
@@ -60,10 +53,10 @@ let verticalNum4 = ref();
 let verticalNum5 = ref();
 let verticalNum6 = ref();
 let verticalNum7 = ref();
-let borderref=ref()
+let borderref = ref()
-let humidityref=ref()
+let humidityref = ref()
-let ductref=ref()
+let ductref = ref()
-
+let temp_humi_timer = null
 let props = defineProps<{
   width: number;
   height: number;
@@ -89,13 +82,13 @@ function reset(val: any) {
 const powerBox = (width: any, height: any) => {
   let a = calcWH(height, width, 1, 24, 0);
   //修改高度
-  verticalNum3.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
+  verticalNum3.value.setchartWH(a.oWidth * 3 - 20, a.oHeight - 20)
-  verticalNum4.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
+  verticalNum4.value.setchartWH(a.oWidth * 3 - 20, a.oHeight - 20)
-  verticalNum5.value.setchartWH(a.oWidth*3-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 * 3 - 20, a.oHeight - 20)
-  verticalNum7.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
+  verticalNum7.value.setchartWH(a.oWidth * 3 - 20, a.oHeight - 20)
-  humidityref.value.setchartWH(a.oWidth*5-40,a.oHeight-40)
+  humidityref.value.setchartWH(a.oWidth * 5 - 40, a.oHeight - 40)
-  ductref.value.setchartWH(a.oWidth*4-20, a.oHeight-20);
+  ductref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20);
 };
 let ductOption = reactive({
   title: "",
@@ -254,70 +247,97 @@ let ductOption = reactive({
 //     let result: any = await getSensorByDept({ depts: 6 });
 
 //     if (result.code == 200) {
-    
+
 //     }
 //   }
-  function setcontentData(val){
+  let temp_humi_index = 0
-    verticalNum3.value.setData(val.FIRE,'icon-ranqi',0,"")
+function setcontentData(val) {
-    verticalNum4.value.setData(val.noise,'icon-shengyin',120,"dB")
+  let CH2O = val.TVOC_CH2O.map((item) => {
-    verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',100,"")
+    return { name: item.name, val: item.CH2O };
-    verticalNum6.value.setData(val.TVOC_CH2O.CH2O,'icon-app_icons--',0.08,"mg/m3")
+  });
-    verticalNum7.value.setData(val.TVOC_CH2O.TVOC,'icon-TVOC-Outlined',0.5,"mg/m3")
+  let TVOC = val.TVOC_CH2O.map((item) => {
-    // console.log(pmref.value);
+    return { name: item.name, val: item.TVOC };
-    humidityref.value.setData({h:val.temp_humi.huim,c:val.temp_humi.temp})
+  });
-    let type=[]
+  let Smoke = val.Smoke.map((item) => {
-    let valueduct=[]
+    return { name: item.name, val: item.data };
-    for(let key in val.water_pressure){
+  });
-      if(key=='大件-精饰水暖管道压力29（进水1）'){
+  let noise = val.noise.map((item) => {
-        // type.push('进水')
+    return { name: item.name, val: item.data };
-        ductOption.option.series[0].data[0].value=val.water_pressure[key]
+  });
-      }else{
+  verticalNum3.value.setData(val.FIRE, 'icon-ranqi', 0, "")
-        // type.push('回水')
+  verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB")
-        ductOption.option.series[1].data[0].value=val.water_pressure[key]
+  verticalNum5.value.setData(Smoke, 'icon-yanwubaojingqi', 100, "")
+  verticalNum6.value.setData(CH2O, 'icon-app_icons--', 0.08, "mg/m3")
+  verticalNum7.value.setData(TVOC, 'icon-TVOC-Outlined', 0.5, "mg/m3")
+  // console.log(pmref.value);
+  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)
-        // valueduct.push(val.water_pressure[key])
-    }
-    
-    // ductOption.option.yAxis.data=[]
-    // ductOption.option.series=[]
-    // ductOption.option.yAxis.data=type
-    // ductOption.option.series.push({
-    //   data: valueduct,
-    //   type: 'bar',
-    //   showBackground: true,
-    //   backgroundStyle: {
-    //     color: 'rgba(180, 180, 180, 0.2)'
-    //   },
-    //   itemStyle: {
-    //         color: function(params) {
-    //             // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
-    //             // console.log(params)
-    //             let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
-    //             // return colors[params.dataIndex];
-    //             return color[params.dataIndex];
-    //         }
-    //     },
-    // barWidth:'50%',
-    // label: {
-    //         show: true,
-    //         color:'#fff',
-    //         formatter: "{c}",
-    //         position: "right",
-    //         textStyle: {
-    //           color: "#fff",
-    //           fontSize: 14,
-    //         },
-    //     },
-    // })
-    
-    ductref.value.changeData(ductOption.option)
   }
-let Data={power:{"管道1":11,"管道2":22}}
+
+
+  let type = []
+  let valueduct = []
+  for (let key in val.water_pressure) {
+    if (key == '大件-精饰水暖管道压力29（进水1）') {
+      // type.push('进水')
+      ductOption.option.series[0].data[0].value = val.water_pressure[key]
+    } else {
+      // type.push('回水')
+      ductOption.option.series[1].data[0].value = val.water_pressure[key]
+    }
+
+    // valueduct.push(val.water_pressure[key])
+  }
+
+  // ductOption.option.yAxis.data=[]
+  // ductOption.option.series=[]
+  // ductOption.option.yAxis.data=type
+  // ductOption.option.series.push({
+  //   data: valueduct,
+  //   type: 'bar',
+  //   showBackground: true,
+  //   backgroundStyle: {
+  //     color: 'rgba(180, 180, 180, 0.2)'
+  //   },
+  //   itemStyle: {
+  //         color: function(params) {
+  //             // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+  //             // console.log(params)
+  //             let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+  //             // return colors[params.dataIndex];
+  //             return color[params.dataIndex];
+  //         }
+  //     },
+  // barWidth:'50%',
+  // label: {
+  //         show: true,
+  //         color:'#fff',
+  //         formatter: "{c}",
+  //         position: "right",
+  //         textStyle: {
+  //           color: "#fff",
+  //           fontSize: 14,
+  //         },
+  //     },
+  // })
+
+  ductref.value.changeData(ductOption.option)
+}
+let Data = { power: { "管道1": 11, "管道2": 22 } }
 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,29 +15,22 @@
           <!-- <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>
+              <template v-slot>
-                      <humidity name="Electriccontrol" :title="t('messages.TemperatureHumidity')" ref="humidityref"></humidity>
+                <humidity name="Electriccontrol" :title="t('messages.TemperatureHumidity')" ref="humidityref"></humidity>
-                  </template>
+              </template>
-              </border3>
+            </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>
+              <template v-slot>
-                      <pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
+                <pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
-                  </template>
+              </template>
-              </border3>
+            </border3>
           </div>
         </div>
       </el-col>
@@ -46,34 +39,35 @@
 </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";
 // import {getPowerData} from '@/http/environment'
-import { getSensorByDept} from "@/http/PaintShopView/index";
+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'
-let {t} = useI18n();
+let { t } = useI18n();
 const store = useEnergyConsumeStore();
 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 borderref = ref()
-let humidityref=ref()
+let humidityref = ref()
-let ductref=ref()
+let ductref = ref()
-let borderrefPM=ref()
+let borderrefPM = ref()
-let pmref=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: "",
@@ -266,68 +260,106 @@ let ductOption = reactive({
 //     let result: any = await getSensorByDept({ depts: 6 });
 
 //     if (result.code == 200) {
-    
+
 //     }
 //   }
-  function setcontentData(val){
+
-    // verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
+let pm_index = 0
-    verticalNum4.value.setData(val.noise,'icon-shengyin',120,"dB")
+
-    // verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
+let temp_humi_index = 0
-    // verticalNum6.value.setData(val.TVOC_CH2O.CH2O,'icon-app_icons--',5,"mg/m3")
+function setcontentData(val) {
-    // verticalNum7.value.setData(val.TVOC_CH2O.TVOC,'icon-TVOC-Outlined',5,"PPM")
+
-    // console.log(pmref.value);
+  clearInterval(temp_humi_timer)
-    humidityref.value.setData({h:val.temp_humi.huim,c:val.temp_humi.temp})
+  clearInterval(pm_timer)
-    let type=[]
+  let CH2O = val.TVOC_CH2O.map((item) => {
-    let valueduct=[]
+    return { name: item.name, val: item.CH2O };
-    for(let key in val.water_pressure){
+  });
-      if(key==' 大件-精饰水暖管道压力30（进水2）'){
+  let TVOC = val.TVOC_CH2O.map((item) => {
-        // type.push('进水')
+    return { name: item.name, val: item.TVOC };
-        ductOption.option.series[0].data[0].value=val.water_pressure[key]
+  });
-      }else{
+  let noise = val.noise.map((item) => {
-        // type.push('回水')
+    return { name: item.name, val: item.data };
-        ductOption.option.series[1].data[0].value=val.water_pressure[key]
+  });
+  // verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
+  verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB")
+  // verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
+  verticalNum6.value.setData(CH2O, 'icon-app_icons--', 0.05, "mg/m3")
+  verticalNum7.value.setData(TVOC, 'icon-TVOC-Outlined', 0.5, "mg/m3")
+  
+  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)
-        // valueduct.push(val.water_pressure[key])
-    }
-    // ductOption.option.yAxis.data=[]
-    // ductOption.option.series=[]
-    // ductOption.option.yAxis.data=type
-    // ductOption.option.series.push({
-    //   data: valueduct,
-    //   type: 'bar',
-    //   showBackground: true,
-    //   backgroundStyle: {
-    //     color: 'rgba(180, 180, 180, 0.2)'
-    //   },
-    //   itemStyle: {
-    //         color: function(params) {
-    //             // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
-    //             // console.log(params)
-    //             let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
-    //             // return colors[params.dataIndex];
-    //             return color[params.dataIndex];
-    //         }
-    //     },
-    // barWidth:'50%',
-    // label: {
-    //         show: true,
-    //         color:'#fff',
-    //         formatter: "{c}",
-    //         position: "right",
-    //         textStyle: {
-    //           color: "#fff",
-    //           fontSize: 14,
-    //         },
-    //     },
-    // })
-    pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
-    ductref.value.changeData(ductOption.option)
   }
-let Data={power:{"管道1":11,"管道2":22}}
+  let type = []
+  let valueduct = []
+  for (let key in val.water_pressure) {
+    if (key == ' 大件-精饰水暖管道压力30（进水2）') {
+      // type.push('进水')
+      ductOption.option.series[0].data[0].value = val.water_pressure[key]
+    } else {
+      // type.push('回水')
+      ductOption.option.series[1].data[0].value = val.water_pressure[key]
+    }
+
+    // valueduct.push(val.water_pressure[key])
+  }
+  // ductOption.option.yAxis.data=[]
+  // ductOption.option.series=[]
+  // ductOption.option.yAxis.data=type
+  // ductOption.option.series.push({
+  //   data: valueduct,
+  //   type: 'bar',
+  //   showBackground: true,
+  //   backgroundStyle: {
+  //     color: 'rgba(180, 180, 180, 0.2)'
+  //   },
+  //   itemStyle: {
+  //         color: function(params) {
+  //             // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+  //             // console.log(params)
+  //             let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+  //             // return colors[params.dataIndex];
+  //             return color[params.dataIndex];
+  //         }
+  //     },
+  // barWidth:'50%',
+  // label: {
+  //         show: true,
+  //         color:'#fff',
+  //         formatter: "{c}",
+  //         position: "right",
+  //         textStyle: {
+  //           color: "#fff",
+  //           fontSize: 14,
+  //         },
+  //     },
+  // })
+  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,29 +15,22 @@
           <!-- <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>
+              <template v-slot>
-                      <humidity name="Electriccontrol" :title="t('messages.TemperatureHumidity')" ref="humidityref"></humidity>
+                <humidity name="Electriccontrol" :title="t('messages.TemperatureHumidity')" ref="humidityref"></humidity>
-                  </template>
+              </template>
-              </border3>
+            </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>
+              <template v-slot>
-                      <pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
+                <pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
-                  </template>
+              </template>
-              </border3>
+            </border3>
           </div>
         </div>
       </el-col>
@@ -46,34 +39,35 @@
 </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";
 // import {getPowerData} from '@/http/environment'
-import { getSensorByDept} from "@/http/PaintShopView/index";
+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'
-let {t} = useI18n();
+let { t } = useI18n();
 const store = useEnergyConsumeStore();
 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 borderref = ref()
-let humidityref=ref()
+let humidityref = ref()
-let ductref=ref()
+let ductref = ref()
-let borderrefPM=ref()
+let borderrefPM = ref()
-let pmref=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: "",
@@ -266,68 +260,101 @@ let ductOption = reactive({
 //     let result: any = await getSensorByDept({ depts: 6 });
 
 //     if (result.code == 200) {
-    
+
 //     }
 //   }
-  function setcontentData(val){
+let pm_index = 0
-    // verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
+
-    verticalNum4.value.setData(val.noise,'icon-shengyin',120,"dB")
+let temp_humi_index = 0
-    // verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
+function setcontentData(val) {
-    // verticalNum6.value.setData(val.TVOC_CH2O.CH2O,'icon-app_icons--',5,"mg/m3")
+  clearInterval(temp_humi_timer)
-    // verticalNum7.value.setData(val.TVOC_CH2O.TVOC,'icon-TVOC-Outlined',5,"PPM")
+  clearInterval(pm_timer)
-    // console.log(pmref.value);
+
-    humidityref.value.setData({h:val.temp_humi.huim,c:val.temp_humi.temp})
+  let CH2O = val.TVOC_CH2O.map((item) => {
-    let type=[]
+    return { name: item.name, val: item.CH2O };
-    let valueduct=[]
+  });
-    for(let key in val.water_pressure){
+  let TVOC = val.TVOC_CH2O.map((item) => {
-      if(key=='焊接车间水暖管道压力36（进水）'){
+    return { name: item.name, val: item.TVOC };
-        ductOption.option.series[0].data[0].value=val.water_pressure[key]
+  });
-        // type.push('进水')
+  let noise = val.noise.map((item) => {
-      }else{
+    return { name: item.name, val: item.data };
-        // type.push('回水')
+  });
-        ductOption.option.series[1].data[0].value=val.water_pressure[key]
+  // verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
+  verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB")
+  // verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
+  verticalNum6.value.setData(CH2O, 'icon-app_icons--', 5, "mg/m3")
+  verticalNum7.value.setData(TVOC, 'icon-TVOC-Outlined', 5, "PPM")
+  // console.log(pmref.value);
+  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)
-        // valueduct.push(val.water_pressure[key])
-    }
-    // ductOption.option.yAxis.data=[]
-    // ductOption.option.series=[]
-    // ductOption.option.yAxis.data=type
-    // ductOption.option.series.push({
-    //   data: valueduct,
-    //   type: 'bar',
-    //   showBackground: true,
-    //   backgroundStyle: {
-    //     color: 'rgba(180, 180, 180, 0.2)'
-    //   },
-    //   itemStyle: {
-    //         color: function(params) {
-    //             // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
-    //             // console.log(params)
-    //             let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
-    //             // return colors[params.dataIndex];
-    //             return color[params.dataIndex];
-    //         }
-    //     },
-    // barWidth:'50%',
-    // label: {
-    //         show: true,
-    //         color:'#fff',
-    //         formatter: "{c}",
-    //         position: "right",
-    //         textStyle: {
-    //           color: "#fff",
-    //           fontSize: 14,
-    //         },
-    //     },
-    // })
-    pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
-    ductref.value.changeData(ductOption.option)
   }
-let Data={power:{"管道1":11,"管道2":22}}
+  let type = []
+  let valueduct = []
+  for (let key in val.water_pressure) {
+    if (key == '焊接车间水暖管道压力36（进水）') {
+      ductOption.option.series[0].data[0].value = val.water_pressure[key]
+      // type.push('进水')
+    } else {
+      // type.push('回水')
+      ductOption.option.series[1].data[0].value = val.water_pressure[key]
+    }
+
+    // valueduct.push(val.water_pressure[key])
+  }
+  // ductOption.option.yAxis.data=[]
+  // ductOption.option.series=[]
+  // ductOption.option.yAxis.data=type
+  // ductOption.option.series.push({
+  //   data: valueduct,
+  //   type: 'bar',
+  //   showBackground: true,
+  //   backgroundStyle: {
+  //     color: 'rgba(180, 180, 180, 0.2)'
+  //   },
+  //   itemStyle: {
+  //         color: function(params) {
+  //             // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+  //             // console.log(params)
+  //             let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+  //             // return colors[params.dataIndex];
+  //             return color[params.dataIndex];
+  //         }
+  //     },
+  // barWidth:'50%',
+  // label: {
+  //         show: true,
+  //         color:'#fff',
+  //         formatter: "{c}",
+  //         position: "right",
+  //         textStyle: {
+  //           color: "#fff",
+  //           fontSize: 14,
+  //         },
+  //     },
+  // })
+  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(() => {
 
-    
+
 });
 defineExpose({
   setcontentData,