1.更新精加车间传感器图例以及图例样式修改

src/views/PaintShopView/components/humidity.vue

@@ -0,0 +1,250 @@
+<!--
+ * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\machiningView\chart\humidity.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-02-10 13:27:36
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+
+<template>
+  <div class="content-small" ref="humiture"></div>
+</template>
+
+<script setup lang="ts">
+import { EDataPerson, EDataPersonItem } from "@/type/generalEnvironment";
+import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch } from "vue";
+const { proxy } = getCurrentInstance() as any;
+let props = defineProps<{
+  name: String;
+  title: any;
+}>();
+let humiture = ref();
+const echartsData = reactive<EDataPerson>({
+  humiture: {
+    div: null,
+    data: null,
+    title: "",
+    box: null,
+  },
+});
+/**
+ * @函数功能:
+ * @param {*} value 需要设置的数据
+ * @param {*} type 1为创建 2为更新
+ * @出口参数:
+ * @函数备注:
+ */
+const setData = (value: any) => {
+  echartsData.humiture!.div = humiture.value;
+  echartsData.humiture!.title = props.title;
+  echartsData.humiture!.data = {
+    title: {
+      text: props.title,
+      show: true,
+      textStyle: {
+        color: "#fff",
+        fontSize: 20,
+      },
+      top:5
+    },
+    grid: {
+      // 让图表占满容器
+      top: "0px",
+      left: "0px",
+      right: "0px",
+      bottom: "0px",
+    },
+    series: [
+      {
+        type: "gauge",
+        center: ["50%", "90%"],
+        startAngle: 190,
+        endAngle: -10,
+        radius: "30%",
+        min: -30,
+        max: 70,
+        splitNumber: 10,
+      progress: {
+        show: false,
+        width: 5
+      },
+      pointer: {
+        itemStyle: {
+          color: 'inherit'
+        }
+      },
+      //刻度轴宽
+      axisLine: {
+        lineStyle: {
+          width: 5,
+          color: [
+            [0.15, '#FF6E76'],
+            [0.75, '#7CFFB2'],
+            [1, '#FF6E76']
+          ]
+        }
+      },
+      //刻度线
+      axisTick: {
+        show:false,
+        distance: -5,
+        splitNumber: 5,
+        lineStyle: {
+          width: 2,
+          color: '#999'
+        }
+      },
+      //刻度线
+      splitLine: {
+        distance: -10,
+        length: 3,
+        lineStyle: {
+          width: 3,
+          color: '#999'
+        }
+      },
+      //表刻度值
+      axisLabel: {
+        distance: -20,
+        color: '#999',
+        fontSize: 12
+      },
+      anchor: {
+        show: false
+      },
+      title: {
+        show: false
+      },
+      detail: {
+        valueAnimation: true,
+        // width: '10%',
+        // lineHeight: 5,
+        // borderRadius: 8,
+        // offsetCenter: [0, '-15%'],
+        fontSize: 12,
+        // fontWeight: 'bolder',
+        formatter: '{value} °C',
+        color: 'inherit'
+      },
+      data: [
+        {
+          value: value.c
+        }
+      ]
+      },
+      {
+        type: "gauge",
+        center: ["50%", "55%"],
+        startAngle: 200,
+        endAngle: -20,
+        min: 0,
+        max: 100,
+        progress: {
+        show: false,
+        width: 5
+      },
+      pointer: {
+        itemStyle: {
+          color: 'inherit'
+        }
+      },
+      //刻度轴宽
+      axisLine: {
+        lineStyle: {
+          width: 10,
+          color: [
+            [0.15, '#FF6E76'],
+            [0.75, '#7CFFB2'],
+            [1, '#FF6E76']
+          ]
+        }
+      },
+       //刻度线
+      axisTick: {
+        distance: 0,
+        splitNumber: 5,
+        lineStyle: {
+          width: 2,
+          color: '#999'
+        }
+      },
+       //刻度线
+      splitLine: {
+        distance: 5,
+        length: 3,
+        lineStyle: {
+          width: 3,
+          color: '#999'
+        }
+      },
+      axisLabel: {
+        distance: -40,
+        color: '#999',
+        fontSize: 20
+      },
+      anchor: {
+        show: false
+      },
+      title: {
+        show: false
+      },
+      detail: {
+        valueAnimation: true,
+     offsetCenter: [0, '15%'],
+        fontSize: 15,
+        formatter: '{value} %RH',
+        color: 'inherit'
+      },
+      data: [
+        {
+          value: value.h
+        }
+      ]
+      },
+    ],
+  };
+    change(echartsData.humiture);
+};
+
+const change = (item: EDataPersonItem) => {
+  let Ebox;
+  //判断是否已经生成过一次dom，没生成就新建生成过就拿之前的dom
+  if (!item.box) {
+    Ebox = markRaw(proxy.$echarts.init(item.div, "dark"))
+  } else {
+    Ebox = item.box;
+  }
+  //将拿到的dom设置数据源
+  Ebox.setOption(item.data);
+  //保存新设置的dom
+  item.box = Ebox;
+};
+const updata = (item: EDataPersonItem) => {
+  item.box.setOption(item.data);
+};
+function setchartWH(width: any, height: any) {
+  echartsData.humiture!.div = humiture.value;
+  humiture.value.style.height = height + "px";
+  humiture.value.style.width = width  + "px";
+  if (echartsData.humiture.box) {
+    echartsData.humiture.box.resize();
+  }
+}
+onMounted(() => {
+  // setData()
+});
+
+// return{setchartWH}
+defineExpose({
+  setchartWH,
+  setData,
+});
+</script>
+
+<style scope>
+.content-small{
+  margin-right: 3px;
+}
+</style>

src/views/PaintShopView/components/pm.vue

@@ -0,0 +1,234 @@
+<!--
+ * @FilePath: \gitscreenFront\src\views\PaintShopView\components\pm.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-02-10 13:27:36
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+
+<template>
+  <div class="content-small" ref="humiture"></div>
+</template>
+
+<script setup lang="ts">
+import { EDataPerson, EDataPersonItem } from "@/type/generalEnvironment";
+import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch } from "vue";
+const { proxy } = getCurrentInstance() as any;
+let props = defineProps<{
+  name: String;
+  title: any;
+}>();
+let humiture = ref();
+const echartsData = reactive<EDataPerson>({
+  humiture: {
+    div: null,
+    data: null,
+    title: "",
+    box: null,
+  },
+});
+/**
+ * @函数功能:
+ * @param {*} value 需要设置的数据
+ * @param {*} type 1为创建 2为更新
+ * @出口参数:
+ * @函数备注:
+ */
+const setData = (value: any) => {
+  echartsData.humiture!.div = humiture.value;
+  echartsData.humiture!.title = value.title;
+  echartsData.humiture!.data = {
+    title: {
+      text: value.title,
+      show: true,
+      textStyle: {
+        color: "#fff",
+        fontSize: 20,
+      },
+      top:'2%'
+    },
+    grid: {
+      // 让图表占满容器
+      top: "0px",
+      left: "0px",
+      right: "0px",
+      bottom: "0px",
+    },
+    series: [
+      {
+        type: "gauge",
+        center: ["50%", "90%"],
+        startAngle: 190,
+        endAngle: -10,
+        radius: "50%",
+        min: 0,
+        max: 100,
+        splitNumber: 10,
+        pointer: {
+          icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
+          length: "12%",
+          width: 10,
+          offsetCenter: [0, "-40%"],
+          itemStyle: {
+            color: "inherit",
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            width: 8,
+            color: [
+              [0.35, "#7CFFB2"],
+              [0.75, "#FDDD60"],
+              [1, "#FF6E76"],
+            ],
+          },
+        },
+        axisTick: {
+          distance: 0,
+          splitNumber: 5,
+          lineStyle: {
+            width: 2,
+            color: "#999",
+          },
+        },
+        splitLine: {
+          distance: 5,
+          length: 8,
+          lineStyle: {
+            width: 3,
+            color: "#999",
+          },
+        },
+        axisLabel: {
+          distance: 12,
+          color: "#999",
+          fontSize: 10,
+        },
+        anchor: {
+          show: false,
+        },
+        detail: {
+          valueAnimation: true,
+          width: "60%",
+          lineHeight: 20,
+          borderRadius: 8,
+          offsetCenter: [0, "20%"],
+          fontSize: 15,
+          fontWeight: "bolder",
+          formatter: "{value} μg/m3",
+          color: "inherit",
+        },
+        title: {
+          show: false,
+          offsetCenter: [0, "-20%"],
+        },
+        data: [
+          {
+            value: value.two,
+            name: "PM2.5",
+          },
+        ],
+      },
+      {
+        type: "gauge",
+        center: ["50%", "50%"],
+        startAngle: 200,
+        endAngle: -20,
+        min: 0,
+        max: 200,
+        axisLine: {
+          lineStyle: {
+            width: 10,
+            color: [
+              [0.35, "#7CFFB2"],
+              [0.75, "#FDDD60"],
+              [1, "#FF6E76"],
+            ],
+          },
+        },
+        pointer: {
+          itemStyle: {
+            color: "inherit",
+          },
+        },
+        axisTick: {
+          distance: -10,
+          length: 6,
+          lineStyle: {
+            color: "#fff",
+            width: 2,
+          },
+        },
+        splitLine: {
+          distance: -10,
+          length: 10,
+          lineStyle: {
+            color: "#fff",
+            width: 4,
+          },
+        },
+        axisLabel: {
+          color: "inherit",
+          distance: 20,
+          fontSize: 10,
+        },
+        detail: {
+          valueAnimation: true,
+          offsetCenter: [0, "20%"],
+          fontSize: 20,
+          formatter: "{value} μg/m3",
+          color: "inherit",
+        },
+        title: {
+          offsetCenter: [0, "-50%"],
+        },
+        data: [
+          {
+            value: value.ten,
+            name: "PM10",
+          },
+        ],
+      },
+    ],
+  };
+    change(echartsData.humiture);
+};
+
+const change = (item: EDataPersonItem) => {
+  let Ebox;
+  //判断是否已经生成过一次dom，没生成就新建生成过就拿之前的dom
+  if (!item.box) {
+    Ebox = markRaw(proxy.$echarts.init(item.div, "dark"))
+  } else {
+    Ebox = item.box;
+  }
+  //将拿到的dom设置数据源
+  Ebox.setOption(item.data);
+  //保存新设置的dom
+  item.box = Ebox;
+};
+const updata = (item: EDataPersonItem) => {
+  item.box.setOption(item.data);
+};
+function setchartWH(width: any, height: any) {
+  echartsData.humiture!.div = humiture.value;
+  humiture.value.style.height = height + "px";
+  humiture.value.style.width = width + "px";
+  if (echartsData.humiture.box) {
+    echartsData.humiture.box.resize();
+  }
+}
+onMounted(() => {
+  // setData()
+});
+
+// return{setchartWH}
+defineExpose({
+  setchartWH,
+  setData,
+});
+</script>
+
+<style scope></style>

src/views/PaintShopView/components/verticalNum.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \screenFront\src\views\PaintShopView\components\verticalNum.vue
+ * @FilePath: \gitscreenFront\src\views\PaintShopView\components\verticalNum.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 08:22:35
@@ -8,14 +8,14 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
 -->
 <template>
-    <div ref="numBox1" :style="{ height: boxSize.height, width: boxSize.width, marginBottom: '10px' }">
+    <div ref="numBox1" :style="{ height: boxSize.height, width: boxSize.width }">
       <border3 ref="refborder3">
         <template v-slot>
           <div class="box" ref="classBox1">
+            <h2>{{ item.name }}</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> -->
-            <h2>{{ item.name }}</h2>
             <i :class="+item.val > +value.quota
               ? 'iconfont ' + value.iconname + ' icon-red iconbig-size'
               : 'iconfont ' + value.iconname + ' icon-blue iconbig-size'
@@ -113,14 +113,14 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    justify-content: space-around;
+    justify-content: space-evenly;
     align-items: center;
   }
   
   .box>h5 {
     font-size: 15px;
-    margin-bottom: 20px;
+    /* margin-bottom: 20px; */
-    margin-top: -50px;
+    margin-top: 20px;
   }
   
   /* .contentbox{
@@ -168,12 +168,15 @@
     align-items: center;
     vertical-align: top;
     font-size: 25px;
-    height: 0;
+    height: 5;
     width: 100px;
   }
   
   .box>h2 {
-    font-size: 24px;
+    font-size: 20px;
+    position: absolute;
+  top: 15px;
+  left:20px;
   }
   
   

src/views/PaintShopView/finishView/bottom.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\finishView\bottom.vue
+ * @FilePath: \gitscreenFront\src\views\PaintShopView\finishView\bottom.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 14:43:28
@@ -17,11 +17,11 @@
             :option="powerOption.option"
             ref="powerref"
           ></chart>
-          <!-- <chart
+          <chart
             :title="powerOption.title"
             :option="powerOption.option"
             ref="Productionref"
-          ></chart> -->
+          ></chart>
           <!-- <div>
             <border3 ref="borderref">
                   <template v-slot>
@@ -53,7 +53,7 @@ const store = useEnergyConsumeStore();
 const router = useRouter();
 
 let powerref = ref();
-// let Productionref = ref();
+let Productionref = ref();
 // let borderref=ref()
 // let pmref=ref()
 
@@ -80,10 +80,10 @@ function reset(val: any) {
 }
 
 const powerBox = (width: any, height: any) => {
-  let a = calcWH(height, width, 1, 1, 0);
+  let a = calcWH(height, width, 1, 2, 0);
   //修改高度
   powerref.value.setchartWH(a.oWidth-20, a.oHeight-20);
-  // Productionref.value.setchartWH(a.oWidth-20, a.oHeight-20);
+  Productionref.value.setchartWH(a.oWidth-20, a.oHeight-20);
   // pmref.value.setchartWH(a.oWidth-40,a.oHeight-40)
 //   yields.value.setchartWH(a.oWidth, a.oHeight - 30);
 };
@@ -130,6 +130,49 @@ let powerOption = reactive({
     ],
   },
 });
+let ProductionOption = reactive({
+  title: "",
+  option: {
+    title: {
+      text: t('messages.Production_2023'),
+      textStyle: {
+        color: "rgb(255,255,255,0.9)",
+      },
+    },
+   
+    tooltip: {
+      trigger: "item",
+      axisPointer: {
+        // Use axis to trigger tooltip
+        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
+        axis: "auto",
+      },
+    },
+    legend: {
+      type: "scroll",
+      width:800,
+  right:20,
+    },
+    grid: {
+      top: "8%",
+      left: "3%",
+      right: "0%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: [
+      ],
+      
+    },
+    yAxis: {
+      type: 'value', 
+    },
+    series: [
+    ],
+  },
+});
 //   async function getpower() {
 //     let result: any = await getPowerData({ time: 1 });
 
@@ -188,6 +231,48 @@ function setcontentData(val){
     powerref.value.changeData(powerOption.option)
 
 
+    let monthData2=[]
+    let powerMonth2=[]
+    for(let key in val.rate){
+        monthData2.push(key)
+        powerMonth2.push(val.rate[key])
+    }
+    ProductionOption.option.xAxis.data=[]
+    ProductionOption.option.series=[]
+    ProductionOption.option.xAxis.data=monthData2.reverse()
+    ProductionOption.option.series.push({
+      data: powerMonth2.reverse(),
+      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:'30%',
+    label: {
+            show: true,
+            color:'#fff',
+            formatter: function(params){
+              console.log(params);
+              return params.value.toLocaleString()
+            },
+            position: "top",
+            textStyle: {
+              color: "#fff",
+              fontSize: 14,
+            },
+        },
+    })
+    
+    Productionref.value.changeData(ProductionOption.option)
     // pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
 }
 onMounted(() => {

src/views/PaintShopView/finishView/index.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\finishView\index.vue
+ * @FilePath: \gitscreenFront\src\views\PaintShopView\finishView\index.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-04-11 13:50:05
@@ -27,21 +27,21 @@
         <el-row>
           <el-col :span="24">
             <top
-              :width="size.oWidth * 16"
+              :width="size.oWidth * 24"
               :height="size.oHeight"
               ref="topref"
             ></top>
           </el-col>
           <el-col :span="24">
             <bottom
-              :width="size.oWidth * 16"
+              :width="size.oWidth * 24"
               :height="size.oHeight * 2"
               ref="bottomref"
             ></bottom>
           </el-col>
         </el-row>
       </div>
-      <div>
+      <!-- <div>
         <el-row>
           <el-col :span="24">
             <right
@@ -51,7 +51,7 @@
             ></right>
           </el-col>
         </el-row>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -74,7 +74,7 @@ let Acontent = ref();
 let time = ref(null);
 let topref = ref();
 let bottomref = ref();
-let rightref = ref();
+// let rightref = ref();
 let size = reactive({
   oWidth: 0,
   oHeight: 0,
@@ -90,7 +90,7 @@ async function getSensorByDeptfun() {
   if (result.code == 200) {
     topref.value.setcontentData(result.data);
     bottomref.value.setcontentData(result.data);
-    rightref.value.setcontentData(result.data);
+    // rightref.value.setcontentData(result.data);
   }
 }
 function getWebsocket(val) {
@@ -101,7 +101,7 @@ function getWebsocket(val) {
       // store.changenoise(data.msg);
       topref.value.setcontentData(data.msg);
       bottomref.value.setcontentData(data.msg);
-      rightref.value.setcontentData(data.msg);
+      // rightref.value.setcontentData(data.msg);
     }
   } catch (err) {}
 }

src/views/PaintShopView/finishView/top.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\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
@@ -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>
@@ -32,6 +29,14 @@
             :option="ductOption.option"
             ref="ductref"
           ></chart>
+
+          <div>
+            <border3 ref="borderrefPM">
+              <template v-slot>
+                <pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
+              </template>
+            </border3>
+          </div>
         </div>
       </el-col>
     </el-row>
@@ -39,7 +44,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";
@@ -47,7 +52,8 @@ 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 pm from "../components/pm.vue"
 import { useRoute, useRouter } from "vue-router";
 import { useEnergyConsumeStore } from "@/store/module/energyConsume";
 import { useI18n } from 'vue-i18n'
@@ -58,11 +64,14 @@ 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 pmref = ref()
 let borderref=ref()
 let humidityref=ref()
 let ductref=ref()
+let temp_humi_timer = null
+let pm_timer = null
 
 let props = defineProps<{
   width: number;
@@ -90,12 +99,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*8-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*8-40,a.oHeight-40)
+  humidityref.value.setchartWH(a.oWidth*4-40,a.oHeight-40)
-  ductref.value.setchartWH(a.oWidth*8-20, a.oHeight-20);
+  ductref.value.setchartWH(a.oWidth*4-20, a.oHeight-20);
+  pmref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 40)
 };
 let ductOption = reactive({
   title: "",
@@ -257,14 +267,40 @@ let ductOption = reactive({
     
 //     }
 //   }
+let pm_index = 0
+let temp_humi_index = 0
+
   function setcontentData(val){
+    console.log(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 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){
@@ -309,6 +345,16 @@ let ductOption = reactive({
     //         },
     //     },
     // })
+    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)
   }
@@ -317,6 +363,10 @@ onMounted(() => {
 
     
 });
+onUnmounted(()=>{
+  clearInterval(temp_humi_timer)
+  clearInterval(pm_timer)
+})
 defineExpose({
   setcontentData,
 });

src/views/PaintShopView/machiningView/bottom.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\machiningView\bottom.vue
+ * @FilePath: \gitscreenFront\src\views\PaintShopView\machiningView\bottom.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 14:43:28
@@ -17,11 +17,11 @@
             :option="powerOption.option"
             ref="powerref"
           ></chart>
-          <!-- <chart
+          <chart
-            :title="powerOption.title"
+            :title="ProductionOption.title"
-            :option="powerOption.option"
+            :option="ProductionOption.option"
             ref="Productionref"
-          ></chart> -->
+          ></chart>
           <!-- <div>
             <border3 ref="borderref">
                   <template v-slot>
@@ -53,7 +53,7 @@ const store = useEnergyConsumeStore();
 const router = useRouter();
 
 let powerref = ref();
-// let Productionref = ref();
+let Productionref = ref();
 let borderref=ref()
 // let pmref=ref()
 
@@ -80,10 +80,10 @@ function reset(val: any) {
 }
 
 const powerBox = (width: any, height: any) => {
-  let a = calcWH(height, width, 1, 1, 0);
+  let a = calcWH(height, width, 1, 2, 0);
   //修改高度
   powerref.value.setchartWH(a.oWidth-20, a.oHeight-20);
-  // Productionref.value.setchartWH(a.oWidth-20, a.oHeight-20);
+  Productionref.value.setchartWH(a.oWidth-20, a.oHeight-20);
   // pmref.value.setchartWH(a.oWidth-40,a.oHeight-40)
 //   yields.value.setchartWH(a.oWidth, a.oHeight - 30);
 };
@@ -233,48 +233,48 @@ function setcontentData(val){
     powerref.value.changeData(powerOption.option)
 
 
-    // let monthData2=[]
+    let monthData2=[]
-    // let powerMonth2=[]
+    let powerMonth2=[]
-    // for(let key in val.rate){
+    for(let key in val.rate){
-    //     monthData2.push(key)
+        monthData2.push(key)
-    //     powerMonth2.push(val.rate[key])
+        powerMonth2.push(val.rate[key])
-    // }
+    }
-    // ProductionOption.option.xAxis.data=[]
+    ProductionOption.option.xAxis.data=[]
-    // ProductionOption.option.series=[]
+    ProductionOption.option.series=[]
-    // ProductionOption.option.xAxis.data=monthData2.reverse()
+    ProductionOption.option.xAxis.data=monthData2.reverse()
-    // ProductionOption.option.series.push({
+    ProductionOption.option.series.push({
-    //   data: powerMonth2.reverse(),
+      data: powerMonth2.reverse(),
-    //   type: 'bar',
+      type: 'bar',
-    //   showBackground: true,
+      showBackground: true,
-    //   backgroundStyle: {
+      backgroundStyle: {
-    //     color: 'rgba(180, 180, 180, 0.2)'
+        color: 'rgba(180, 180, 180, 0.2)'
-    //   },
+      },
-    //   itemStyle: {
+      itemStyle: {
-    //         color: function(params) {
+            color: function(params) {
-    //             // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+                // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
-    //             // console.log(params)
+                // console.log(params)
-    //             let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+                let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
-    //             // return colors[params.dataIndex];
+                // return colors[params.dataIndex];
-    //             return color[params.dataIndex];
+                return color[params.dataIndex];
-    //         }
+            }
-    //     },
+        },
-    // barWidth:'50%',
+    barWidth:'30%',
-    // label: {
+    label: {
-    //         show: true,
+            show: true,
-    //         color:'#fff',
+            color:'#fff',
-    //         formatter: function(params){
+            formatter: function(params){
-    //           console.log(params);
+              console.log(params);
-    //           return params.value.toLocaleString()
+              return params.value.toLocaleString()
-    //         },
+            },
-    //         position: "top",
+            position: "top",
-    //         textStyle: {
+            textStyle: {
-    //           color: "#fff",
+              color: "#fff",
-    //           fontSize: 14,
+              fontSize: 14,
-    //         },
+            },
-    //     },
+        },
-    // })
+    })
     
-    // Productionref.value.changeData(ProductionOption.option)
+    Productionref.value.changeData(ProductionOption.option)
     // pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
 }
 onMounted(() => {

src/views/PaintShopView/machiningView/index.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\machiningView\index.vue
+ * @FilePath: \gitscreenFront\src\views\PaintShopView\machiningView\index.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-04-11 13:50:05
@@ -27,21 +27,21 @@
         <el-row>
           <el-col :span="24">
             <top
-              :width="size.oWidth * 16"
+              :width="size.oWidth * 24"
               :height="size.oHeight"
               ref="topref"
             ></top>
           </el-col>
           <el-col :span="24">
             <bottom
-              :width="size.oWidth * 16"
+              :width="size.oWidth * 24"
               :height="size.oHeight * 2"
               ref="bottomref"
             ></bottom>
           </el-col>
         </el-row>
       </div>
-      <div>
+      <!-- <div>
         <el-row>
           <el-col :span="24">
             <right
@@ -51,7 +51,7 @@
             ></right>
           </el-col>
         </el-row>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -74,7 +74,7 @@ let Acontent = ref();
 let time = ref(null);
 let topref = ref();
 let bottomref = ref();
-let rightref = ref();
+// let rightref = ref();
 let size = reactive({
   oWidth: 0,
   oHeight: 0,
@@ -90,7 +90,7 @@ async function getSensorByDeptfun() {
   if (result.code == 200) {
     topref.value.setcontentData(result.data);
     bottomref.value.setcontentData(result.data);
-    rightref.value.setcontentData(result.data);
+    // rightref.value.setcontentData(result.data);
   }
 }
 function getWebsocket(val) {
@@ -101,7 +101,7 @@ function getWebsocket(val) {
       // store.changenoise(data.msg);
       topref.value.setcontentData(data.msg);
       bottomref.value.setcontentData(data.msg);
-      rightref.value.setcontentData(data.msg);
+      // rightref.value.setcontentData(data.msg);
     }
   } catch (err) {}
 }

src/views/PaintShopView/machiningView/top.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\machiningView\top.vue
+ * @FilePath: \gitscreenFront\src\views\PaintShopView\machiningView\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>
@@ -32,6 +29,13 @@
             :option="ductOption.option"
             ref="ductref"
           ></chart>
+          <div>
+            <border3 ref="borderrefPM">
+              <template v-slot>
+                <pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
+              </template>
+            </border3>
+          </div>
         </div>
       </el-col>
     </el-row>
@@ -39,7 +43,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";
@@ -47,7 +51,8 @@ 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 pm from "../components/pm.vue"
 import { useRoute, useRouter } from "vue-router";
 import { useEnergyConsumeStore } from "@/store/module/energyConsume";
 import { useI18n } from 'vue-i18n'
@@ -58,12 +63,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 borderrefPM = ref()
+let pmref = ref()
 let borderref=ref()
 let humidityref=ref()
 let ductref=ref()
-
+let temp_humi_timer = null
+let pm_timer = null
 let props = defineProps<{
   width: number;
   height: number;
@@ -84,18 +92,20 @@ function reset(val: any) {
   //重置盒子尺寸
   powerBox(val.width, val.height);
   borderref.value.resetWH()
+  borderrefPM.value.resetWH()
 }
 
 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*8-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*8-40,a.oHeight-40)
+  humidityref.value.setchartWH(a.oWidth*4-40,a.oHeight-40)
-  ductref.value.setchartWH(a.oWidth*8-20, a.oHeight-20);
+  ductref.value.setchartWH(a.oWidth*4-20, a.oHeight-20);
+  pmref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 40)
 };
 let ductOption = reactive({
   title: "",
@@ -257,14 +267,37 @@ let ductOption = reactive({
     
 //     }
 //   }
+let pm_index = 0
+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 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){
@@ -309,7 +342,16 @@ let ductOption = reactive({
     //         },
     //     },
     // })
-    
+    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}}
@@ -317,6 +359,10 @@ onMounted(() => {
 
     
 });
+onUnmounted(()=>{
+  clearInterval(temp_humi_timer)
+  clearInterval(pm_timer)
+})
 defineExpose({
   setcontentData,
 });