机械分厂三合一环境添加传感器监测
This commit is contained in:
hzz
parent
75b1a15957
commit
5a7375fb91
208
src/views/generalEnvironmentMechanical/index.vue
Normal file
208
src/views/generalEnvironmentMechanical/index.vue
Normal file
@ -0,0 +1,208 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="$style['container']">
|
||||||
|
<div class="header">
|
||||||
|
<div class="title">
|
||||||
|
<header2 ref="headerref" :width="'100%'" :height="'150px'" :title="t('messages.generalEnvironment')"
|
||||||
|
:titleTip="titleTip" :typeFun="['AbnormalData', 'time']"
|
||||||
|
:alarmType="['noiseAlarm', 'temphuim', 'dustAlarm', 'saving']"></header2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content" ref="Acontent">
|
||||||
|
<div class="top-box">
|
||||||
|
<div style="width: 12%; height: 250px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-evenly;"
|
||||||
|
v-for="item in store.newVerticalNum">
|
||||||
|
<verticalNumLoop :title="item.title" :icon="item.icon" :limit="item.limit" :unit="item.unit"
|
||||||
|
:value="item.value"></verticalNumLoop>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="bottom-box"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||||
|
import header2 from '@/components/headerBox/header2.vue'
|
||||||
|
import verticalNumLoop from './components/verticalNumLoop.vue'
|
||||||
|
import { getSafeWarningData, getpipeData } from "@/http/realtimeSecurity";
|
||||||
|
import { getnoiseData } from "@/http/generalEnvironment";
|
||||||
|
import { getHumitureData, getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
|
||||||
|
import { getPowerData } from "@/http/energyConsume";
|
||||||
|
import { useSocketStore } from "@/store/moduleSocketMechanics";
|
||||||
|
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||||
|
import { gettime, clacendTime } from "@/utils/time"
|
||||||
|
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
let { t } = useI18n();
|
||||||
|
const store = useSocketStore();
|
||||||
|
let deptIds = '6,7,9,10,11'
|
||||||
|
let titleTip = [
|
||||||
|
{
|
||||||
|
color: "#E43961",
|
||||||
|
name: t('messages.abnormal'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "#20AEC5",
|
||||||
|
name: t('messages.NoAbnormal'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "#A7A6BD",
|
||||||
|
name: t('messages.disconnection'),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const verticalType = {
|
||||||
|
'TVOC': { icon: 'icon-TVOC-Outlined', title: t('messages.TVOCDetection'), unit: 'mg/m³' },
|
||||||
|
'Smoke': { icon: 'icon-yanwubaojingqi', title: t('messages.smokeDetection'), unit: "ppm" },
|
||||||
|
'Methane': { icon: 'icon-ranqi', title: t('messages.gasDetection'), unit: null },
|
||||||
|
'CH2O': { icon: 'icon-app_icons--', title: t('messages.CH2ODetection'), unit: 'mg/m³' },
|
||||||
|
'FIRE': { icon: 'icon-weibiaoti1', title: t('messages.flameDetection'), unit: null },
|
||||||
|
'noise': { icon: 'icon-shengyin', title: t('messages.noiseDetection'), unit: 'dB' },
|
||||||
|
}
|
||||||
|
|
||||||
|
let headerref=ref()
|
||||||
|
let verticalList: any[] = reactive([])
|
||||||
|
async function getSensorData() {
|
||||||
|
let list = []
|
||||||
|
const res: any = await Promise.all([
|
||||||
|
getnoiseData({ deptIds }),
|
||||||
|
getSafeWarningData({ deptIds }),
|
||||||
|
])
|
||||||
|
let noiseData = {
|
||||||
|
limit: res[0].data.top.value,
|
||||||
|
type: 'noise',
|
||||||
|
value: res[0].data.listData.map((item: any) => {
|
||||||
|
return {
|
||||||
|
devId: item.devId,
|
||||||
|
name: item.name + '噪音监测',
|
||||||
|
type: 'noise',
|
||||||
|
status: true,
|
||||||
|
val: item.value,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
list.push(noiseData);
|
||||||
|
list.push(...res[1].data)
|
||||||
|
|
||||||
|
let datetime = new Date().getTime();
|
||||||
|
let handle_vertical = list.map((item: any) => {
|
||||||
|
item.value.forEach(element => {
|
||||||
|
if (element.name.includes("TVOC")) {
|
||||||
|
element.name = element.name.split('TVOC')[0] + verticalType[item.type].title
|
||||||
|
}
|
||||||
|
|
||||||
|
if (element.val > item.limit) {
|
||||||
|
element.date = gettime(element.ts),
|
||||||
|
element.time = element.ts || datetime
|
||||||
|
element.continuous = clacendTime(datetime, element.ts || datetime)
|
||||||
|
} else {
|
||||||
|
element.date = null
|
||||||
|
element.time = null
|
||||||
|
element.continuous = null
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
type: item.type,
|
||||||
|
icon: verticalType[item.type].icon,
|
||||||
|
title: verticalType[item.type].title,
|
||||||
|
limit: item.limit,
|
||||||
|
unit: verticalType[item.type].unit,
|
||||||
|
value: item.value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
store.setNewVerticalNum(handle_vertical)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getWebsocket(val) {
|
||||||
|
headerref.value.HeadergetWebsocket(val)
|
||||||
|
try{
|
||||||
|
let data = JSON.parse(val);
|
||||||
|
|
||||||
|
//精饰车间燃气监测
|
||||||
|
if (data.type == "paintingGas") {
|
||||||
|
let verticalData = {name:data.msg.devName,val:data.msg.paintingGas.value,devId:data.msg.devId}
|
||||||
|
store.changeNewVerticalNum({type:'Methane',data:verticalData})
|
||||||
|
|
||||||
|
}
|
||||||
|
//甲醛TVOC
|
||||||
|
if (data.type == "TVOC_CH2O") {
|
||||||
|
let verticalData_TVOC = {name:data.msg.TVOC.name,val:data.msg.TVOC.value,devId:data.msg.TVOC.devId}
|
||||||
|
store.changeNewVerticalNum({type:'TVOC',data:verticalData_TVOC})
|
||||||
|
let verticalData_CH2O = {name:data.msg.CH2O.name,val:data.msg.CH2O.value,devId:data.msg.CH2O.devId}
|
||||||
|
store.changeNewVerticalNum({type:'CH2O',data:verticalData_CH2O})
|
||||||
|
|
||||||
|
}
|
||||||
|
//火焰传感器？
|
||||||
|
if (data.type == "flame") {
|
||||||
|
let verticalData = {name:data.msg.devName,val:data.msg.flame.value,devId:data.msg.devId}
|
||||||
|
store.changeNewVerticalNum({type:'FIRE',data:verticalData})
|
||||||
|
|
||||||
|
}
|
||||||
|
//精饰车间烟雾传感器
|
||||||
|
if (data.type == "smoke") {
|
||||||
|
let verticalData = {name:data.msg.devName,val:data.msg.smoke.value,devId:data.msg.devId}
|
||||||
|
store.changeNewVerticalNum({type:'Smoke',data:verticalData})
|
||||||
|
// console.log(JSON.stringify({type:'Smoke',data:verticalData}),"烟雾传感器");
|
||||||
|
}
|
||||||
|
// if (data.type == "airPressure") {
|
||||||
|
// store.changePressure(data.msg);
|
||||||
|
// }
|
||||||
|
// if (data.type == "waterPressure") {
|
||||||
|
// store.changePipe(data.msg);
|
||||||
|
// }
|
||||||
|
|
||||||
|
}catch(err){
|
||||||
|
console.log(err,"报错了大哥",console.log(val)
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function errWebsocket(val) {
|
||||||
|
headerref.value?headerref.value.HeadererrWebsocket(val):''
|
||||||
|
// console.log(val);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getSensorData()
|
||||||
|
|
||||||
|
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style module>
|
||||||
|
.container {
|
||||||
|
height: 1080px;
|
||||||
|
width: 1920px;
|
||||||
|
color: #20aec5;
|
||||||
|
background-color: #100c2a;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style scoped>
|
||||||
|
.content {
|
||||||
|
width: 1920px;
|
||||||
|
height: 980px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-box {
|
||||||
|
width: 1920px;
|
||||||
|
height: 300px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-box {
|
||||||
|
width: 1920px;
|
||||||
|
height: 670px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
/* background-color: #afb; */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user