将机械分厂 安全,常规,能耗大屏数据整合到一个屏上

src/locales/lang/en.ts

@@ -271,5 +271,6 @@ export default {
         '料场':'Raw Material Area',
         '危废暂存间':'dangerous waste temporary storage room',
         '历史数据':'Historical Data',
+        '环境 实时监测系统':'环境 实时监测系统',
       }
   }

src/locales/lang/zh.ts

@@ -271,5 +271,6 @@ export default {
         '料场':'料场',
         '危废暂存间':'危废暂存间',
         '历史数据':'历史数据',
+        '环境 实时监测系统':'环境 实时监测系统',
       }
   }

src/store/moduleSocketMechanics.ts

@@ -8,17 +8,33 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
  */
 import { defineStore } from "pinia";
-import {Names} from '@/store/storeName'
+import { Names } from '@/store/storeName'
-import {gettime,clacendTime} from "@/utils/time"
+import { gettime, clacendTime } from "@/utils/time"
-export const useSocketStore = defineStore(Names.socketjixiefenchang,{
+export const useSocketStore = defineStore(Names.socketjixiefenchang, {
     // 使用方式
     // const Index= useIndexStore()
     // 1、Index.{数据}++
     // 2、Index.$patch({数据:??})
     // 3、Index.$patch((state)=>{ state.数据=??})
     // 4、通过action修改
-    state:()=>{
+    state: () => {
-        return{
+        return {
+            humiture: [
+                { "devId": "c6f036c0-33fc-11ed-a7e1-fd42bca6c8c6", "name": "精饰车间", "temp": "33.4", "humidity": "30.9" },
+                { "devId": "c651b930-3b15-11ed-b6af-15994988a6b3", "name": "精加车间", "temp": "26.1", "humidity": "47" },
+                { "devId": "9c4be1e0-33fb-11ed-a7e1-fd42bca6c8c6", "name": "焊接车间", "temp": "29.3", "humidity": "37.6" },
+                { "devId": "0e77f0b0-33fc-11ed-a7e1-fd42bca6c8c6", "name": "大件车间", "temp": "28.6", "humidity": "38.4" },
+                { "devId": "91f6d000-33fc-11ed-a7e1-fd42bca6c8c6", "name": "机加车间", "temp": "29.9", "humidity": "36.2" }
+            ],
+            pm: [
+                { "devId": "01336fd0-1fa0-11ed-9223-7db1174970a8", "name": "大件车间粉尘", "pm2": "26", "pm10": "33" }, 
+                { "devId": "083e3900-3435-11ed-a7e1-fd42bca6c8c6", "name": "焊接车间粉尘", "pm2": "46", "pm10": "59" }, 
+                { "devId": "270e1500-eee1-11ed-b2ee-2d727e0cafab", "name": "精加车间粉尘", "pm2": "131", "pm10": "155" }, 
+                { "devId": "54058c30-eee3-11ed-b2ee-2d727e0cafab", "name": "机加车间粉尘", "pm2": "38", "pm10": "44" }, 
+                { "devId": "76efb040-eee3-11ed-b2ee-2d727e0cafab", "name": "大件车间粉尘", "pm2": "52", "pm10": "67" }, 
+                { "devId": "a6020310-eee3-11ed-b2ee-2d727e0cafab", "name": "大件车间粉尘", "pm2": "42", "pm10": "52" }, 
+                { "devId": "bcbfb530-88b2-11ed-a926-570995ad0254", "name": "精饰车间粉尘", "pm2": "9", "pm10": "12" }
+            ],
             newVerticalNum: [
                 {
                     "type": "TVOC",
@@ -114,16 +130,16 @@ export const useSocketStore = defineStore(Names.socketjixiefenchang,{
     //需要使用return将数据抛出
     //getters内可相互使用计算结果
     //使用时可直接放入标签内<div>Index.方法()</div>
-    getters:{
+    getters: {
 
     },
-    actions:{
+    actions: {
         //设置新的安全检测数据
         setNewVerticalNum(val) {
             this.newVerticalNum = val
         },
         //更新 新的安全检测数据
-        changeNewVerticalNum(val) {            
+        changeNewVerticalNum(val) {
             //{"type":"Smoke","data":{"name":"精饰车间烟雾传感器","val":"100"}}
             let pIndex = this.newVerticalNum.findIndex(item => item.type == val.type)
             let cIndex = null
@@ -131,17 +147,17 @@ export const useSocketStore = defineStore(Names.socketjixiefenchang,{
                 cIndex = this.newVerticalNum[pIndex].value.findIndex(item => item.devId == val.data.devId)
             }
             if (cIndex != -1) {
-                if (val.data.val>this.newVerticalNum[pIndex].limit) {
+                if (val.data.val > this.newVerticalNum[pIndex].limit) {
-                    
+
                     let now = new Date().getTime()
                     if (this.newVerticalNum[pIndex].value[cIndex].date == null) {
                         this.newVerticalNum[pIndex].value[cIndex].date = gettime()
                         this.newVerticalNum[pIndex].value[cIndex].time = now
                     }
-                    
+
                     let time = this.newVerticalNum[pIndex].value[cIndex].time
 
-                    this.newVerticalNum[pIndex].value[cIndex].continuous = clacendTime(now,time)
+                    this.newVerticalNum[pIndex].value[cIndex].continuous = clacendTime(now, time)
                 } else {
                     this.newVerticalNum[pIndex].value[cIndex].date = null
                     this.newVerticalNum[pIndex].value[cIndex].time = null
@@ -150,5 +166,5 @@ export const useSocketStore = defineStore(Names.socketjixiefenchang,{
                 this.newVerticalNum[pIndex].value[cIndex].status = true
             }
         }
-    }   
+    }
 })

src/views/Mechanics/child/son/index.vue

@@ -127,7 +127,7 @@ let data={
     stoptime:val.stoptime,//急停时长
     data:'2020-05-06',//采购日期
     src:imgurlAddXhr(val.data),//设备图片
-    timeguagu:Math.abs((val.ontime)/(val.ontime+val.offtime)*100).toFixed(1),//时间稼动率
+    timeguagu:Math.abs((val.ontime)/(val.ontime+val.offtime)*100).toFixed(1)||0,//时间稼动率
     MTBF:2724,//MTBF
     MTTR:169,//MTTR
     MTTF:2555,//MTTF

src/views/generalEnvironmentMechanical/components/humidity.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="container" ref="humiture">
+  </div>
+</template>
+  
+<script setup lang='ts'>
+import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch } from "vue";
+const { proxy } = getCurrentInstance() as any;
+const props = defineProps<{
+  title: String;
+  value: any;
+}>();
+let humiture = ref();
+let chart = null
+watch(props, (newVal) => {
+  init()
+}, { deep: true, })
+function init() {
+
+  const chart = proxy.$echarts.init(humiture.value, 'dark');
+  let option = {
+    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%", "85%"],
+        startAngle: 190,
+        endAngle: -10,
+        radius: "50%",
+        min: -30,
+        max: 70,
+        splitNumber: 10,
+        progress: {
+          show: false,
+          width: 5
+        },
+        pointer: {
+          itemStyle: {
+            color: 'inherit'
+          }
+        },
+        //刻度轴宽
+        axisLine: {
+          lineStyle: {
+            width: 10,
+            color: [
+              [0.15, '#FF6E76'],
+              [0.75, '#7CFFB2'],
+              [1, '#FF6E76']
+            ]
+          }
+        },
+        //刻度线
+        axisTick: {
+          show: false,
+          distance: -5,
+          splitNumber: 5,
+          lineStyle: {
+            width: 2,
+            color: '#999'
+          }
+        },
+        //刻度线
+        splitLine: {
+          distance: 5,
+          length: 3,
+          lineStyle: {
+            width: 3,
+            color: '#999'
+          }
+        },
+        //表刻度值
+        axisLabel: {
+          distance: 15,
+          color: '#999',
+          fontSize: 10
+        },
+        anchor: {
+          show: false
+        },
+        title: {
+          show: false
+        },
+        detail: {
+          valueAnimation: true,
+          // width: '10%',
+          // lineHeight: 5,
+          // borderRadius: 8,
+          offsetCenter: [0, '25%'],
+          fontSize: 15,
+          // fontWeight: 'bolder',
+          formatter: '{value} °C',
+          color: 'inherit'
+        },
+        data: [
+          {
+            value: props.value.c
+          }
+        ]
+      },
+      {
+        type: "gauge",
+        center: ["50%", "50%"],
+        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: 15,
+          color: '#999',
+          fontSize: 12
+        },
+        anchor: {
+          show: false
+        },
+        title: {
+          show: false
+        },
+        detail: {
+          valueAnimation: true,
+          offsetCenter: [0, '15%'],
+          fontSize: 20,
+          formatter: '{value} %RH',
+          color: 'inherit'
+        },
+        data: [
+          {
+            value: props.value.h
+          }
+        ]
+      },
+    ],
+  };
+
+  chart.setOption(option);
+}
+
+onMounted(() => {
+  init();
+});
+</script>
+  
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>
+  

src/views/generalEnvironmentMechanical/components/pm.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="container" ref="dust">
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch } from "vue";
+const { proxy } = getCurrentInstance() as any;
+const props = defineProps<{
+  title: String;
+  value: any;
+}>();
+let dust = ref();
+let chart = ref(null)
+watch(props,(newVal)=>{
+  init()
+}, { deep: true,})
+function init() {
+  if (!chart.value) {
+  chart.value = proxy.$echarts.init(dust.value, 'dark');    
+  }
+  let option = {
+    title: {
+      text: props.title,
+      show: true,
+      textStyle: {
+        color: "#fff",
+        fontSize: 18,
+      },
+      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: props.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: props.value.ten,
+            name: "PM10",
+          },
+        ],
+      },
+    ],
+  };
+
+  chart.value.setOption(option);
+}
+
+onMounted(() => {
+  init();
+});
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/generalEnvironmentMechanical/components/power.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="container">
+        <border4 ref="refborder4">
+            <template v-slot>
+                <div ref="power"></div>
+            </template>
+        </border4>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { getCurrentInstance, onMounted, reactive, ref,watch,onUpdated } from "vue"
+import border4 from "@/components/borderBox/border6.vue"
+const { proxy } = getCurrentInstance() as any;
+let props = defineProps<{
+    title: string,
+    series: any,
+    listName:string[]
+}>()
+
+let power = ref()
+let Ebox = null
+function init() {
+    Ebox = proxy.$echarts.init(power.value, "dark");
+    let option = {
+        title: {
+            text: props.title,
+            show: true,
+            textStyle: {
+                color: '#fff',
+                fontSize: 20
+            },
+            top: '3%',
+        },
+        tooltip: {
+            trigger: 'item',
+            axisPointer: {
+                // Use axis to trigger tooltip
+                type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow',
+                axis: 'auto',
+
+            },
+        },
+        // color:color,
+        legend: {
+            type: 'scroll',
+            // width:400,
+            // right:20,
+            top: '11%',
+            // itemStyle:{
+            //     data:yue
+            //   },
+        },
+        grid: {
+            top: "20%",
+            left: "3%",
+            right: "10%",
+            bottom: "3%",
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'value',
+            splitLine: {
+                show: false
+            }
+        },
+        yAxis: {
+            type: 'category',
+            data: props.listName
+        },
+        series: props.series
+    };
+    Ebox.setOption(option)
+}
+
+watch(props,(newVal)=>{
+    
+},{deep:true})
+
+onMounted(()=>{
+    init()
+})
+
+</script>
+
+<style scoped>
+.container {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+}
+</style>

src/views/generalEnvironmentMechanical/components/power2023.vue

@@ -74,7 +74,7 @@ const initEchart = () => {
       data: data0,
       color: "#bbf",
       stack: props.httpValue.listData[1].years,
-      // barWidth: 30,
+      barWidth: 40,
       label: {
         show: true,
 

src/views/generalEnvironmentMechanical/index.vue

@@ -2,7 +2,7 @@
     <div :class="$style['container']">
         <div class="header">
             <div class="title">
-                <header2 ref="headerref" :width="'100%'" :height="'150px'" :title="t('messages.generalEnvironment')"
+                <header2 ref="headerref" :width="'100%'" :height="'150px'" :title="t('messages.环境 实时监测系统')"
                     :titleTip="titleTip" :typeFun="['AbnormalData', 'time']"
                     :alarmType="['noiseAlarm', 'temphuim', 'dustAlarm', 'saving']"></header2>
             </div>
@@ -14,7 +14,20 @@
                     <verticalNumLoop :title="item.title" :icon="item.icon" :limit="item.limit" :unit="item.unit"
                         :value="item.value"></verticalNumLoop>
                 </div>
-
+                <div style="width: 12%;height: 250px;margin-bottom: 10px;">
+                    <border13>
+                        <template v-slot>
+                            <pm :value="{two:store.pm[pmindex].pm10,ten:store.pm[pmindex].pm2}" :title="store.pm[pmindex].name"></pm>
+                        </template>
+                    </border13>
+                </div>
+                <div style="width: 12%;height: 250px;margin-bottom: 10px;">
+                    <border13>
+                        <template v-slot>
+                            <humidity :value="{c:store.humiture[humitureindex].temp,h:store.humiture[humitureindex].humidity}" :title="store.humiture[humitureindex].name+'温湿度'"></humidity>
+                        </template>
+                    </border13>
+                </div>
             </div>
             <div class="bottom-box">
                 <div style="width: 33%;height: 100%;">
@@ -42,6 +55,8 @@ import { onMounted, onUnmounted, reactive, ref } from 'vue'
 import header2 from '@/components/headerBox/header2.vue'
 import verticalNumLoop from './components/verticalNumLoop.vue'
 import power from './components/power2023.vue';
+import pm from './components/pm.vue';
+import humidity from './components/humidity.vue';
 import gas from './components/gas.vue'
 import pipe from './components/pipe.vue'
 import border13 from '@/components/border/Border13.vue'
@@ -88,6 +103,10 @@ let pipeData=ref({listData:[],top:0})
 
 let headerref = ref()
 let verticalList: any[] = reactive([])
+let pmtimer = null
+let humittimer = null
+
+
 //获取传感器实时数据
 async function getSensorData() {
     let list = []
@@ -140,7 +159,73 @@ async function getSensorData() {
 
     store.setNewVerticalNum(handle_vertical)
 }
+//获取温湿度数据
+let humitureindex = ref(0);
+async function gethumitureData() {
+  let result: any = await getHumitureData({ deptIds })
 
+  if (result.code == 200) {
+    store.$patch((state) => {
+      state.humiture = result.data.Humiture
+    })
+  }
+
+  humittimer = setInterval(()=>{
+    humitureindex.value++
+    if(humitureindex.value>=store.humiture.length){
+        humitureindex.value=0
+    }
+  },5000)
+}
+
+//获取粉尘数据
+let pmindex = ref(0);
+async function getPmData() {
+let resulttwo: any = await getPmtwoData()
+  let resultten: any = await getPmtenData()
+  let arr = [
+    '01336fd0-1fa0-11ed-9223-7db1174970a8',
+    '083e3900-3435-11ed-a7e1-fd42bca6c8c6',
+    '270e1500-eee1-11ed-b2ee-2d727e0cafab',
+    '54058c30-eee3-11ed-b2ee-2d727e0cafab',
+    '76efb040-eee3-11ed-b2ee-2d727e0cafab',
+    'a6020310-eee3-11ed-b2ee-2d727e0cafab',
+    'bcbfb530-88b2-11ed-a926-570995ad0254'
+  ]
+  let data = {}
+  if (resulttwo) {
+    resulttwo.data.forEach(ele => {
+        if (arr.indexOf(ele.devId) >-1 ) {
+            data[ele.devId] = {
+                devId: ele.devId,
+                name: ele.name + '粉尘',
+                pm2: ele.value,
+                pm10: null
+            }
+        }  
+    })
+  }
+
+  if (resultten) {
+    resultten.data.forEach(ele => {
+        if (data.hasOwnProperty(ele.devId)) {
+            data[ele.devId].pm10 = ele.value
+        }
+        
+    })
+  }
+  store.$patch((state) => {
+    state.pm = Object.values(data)
+  })
+  pmtimer = setInterval(()=>{
+    pmindex.value++
+    if(pmindex.value>=store.pm.length){
+      pmindex.value=0
+    }
+  },5000)
+
+}
+//获取用电量数据
 async function getPower_data() {
   let result: any = await getPowerData({ time: 1 });
 
@@ -180,7 +265,7 @@ async function getPower_data() {
     data: data0,
     color: "#bbf",
     stack: result.data.listData[1].years,
-    // barWidth: 30,
+    barWidth: 40,
     label: {
       show: true,
 
@@ -196,15 +281,12 @@ async function getPower_data() {
 }
 async function getconsumeDetailfun(){
   let result:any = await getconsumeDetail()
-  console.log(gasData.value);
   if(result.code==200){
     result.data.forEach(res=>{
         if(res.deptName=='喷漆车间' && res.type=='GasDetail'){
             gasData.value=res.usageNum
         }
     })
-
-    console.log(gasData.value);
     
   }
 }
@@ -273,6 +355,8 @@ onMounted(() => {
     getPower_data()
     getpipeDatafun()
     getconsumeDetailfun()
+    gethumitureData()
+    getPmData()
     connectWebsocket(null, null, getWebsocket, errWebsocket);
 })
 onUnmounted(() => {