机械分厂三合一环境添加传感器监测
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