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

2023-06-07 19:02:08 +08:00 · 2023-06-07 19:02:08 +08:00 · c52c841f2f
commit c52c841f2f
parent d679ed7978
9 changed files with 607 additions and 21 deletions
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@ -271,5 +271,6 @@ export default {
        '料场':'Raw Material Area',
        '危废暂存间':'dangerous waste temporary storage room',
        '历史数据':'Historical Data',
+        '环境 实时监测系统':'环境 实时监测系统',
      }
  }
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@ -271,5 +271,6 @@ export default {
        '料场':'料场',
        '危废暂存间':'危废暂存间',
        '历史数据':'历史数据',
+        '环境 实时监测系统':'环境 实时监测系统',
      }
  }
--- a/src/store/moduleSocketMechanics.ts
+++ b/src/store/moduleSocketMechanics.ts
@ -19,6 +19,22 @@ export const useSocketStore = defineStore(Names.socketjixiefenchang,{
    // 4、通过action修改
    state: () => {
        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",
--- a/src/views/Mechanics/child/son/index.vue
+++ b/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
--- a/src/views/generalEnvironmentMechanical/components/humidity.vue
+++ b/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>
+  
--- a/src/views/generalEnvironmentMechanical/components/pm.vue
+++ b/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>
--- a/src/views/generalEnvironmentMechanical/components/power.vue
+++ b/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>
--- a/src/views/generalEnvironmentMechanical/components/power2023.vue
+++ b/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,

--- a/src/views/generalEnvironmentMechanical/index.vue
+++ b/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,7 +281,6 @@ 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'){
@ -204,8 +288,6 @@ async function getconsumeDetailfun(){
        }
    })
    
-    console.log(gasData.value);
-    
  }
 }
 async function getpipeDatafun() {
@ -273,6 +355,8 @@ onMounted(() => {
    getPower_data()
    getpipeDatafun()
    getconsumeDetailfun()
+    gethumitureData()
+    getPmData()
    connectWebsocket(null, null, getWebsocket, errWebsocket);
 })
 onUnmounted(() => {