修改机械分厂环境大屏 调整温湿度和用气量位置
告警红色图标改为文字显示 粉尘添加报警框并添加报警文字提示 添加机械分厂用水量
This commit is contained in:
hzz
parent
f323611ffe
commit
9307cc4bce
@ -10,7 +10,7 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { Names } from '@/store/storeName'
|
||||
import { gettime, clacendTime } from "@/utils/time"
|
||||
export const useSocketStore = defineStore(Names.socketjixiefenchang, {
|
||||
export const useSocketStore = defineStore(Names.socketMechanics, {
|
||||
// 使用方式
|
||||
// const Index= useIndexStore()
|
||||
// 1、Index.{数据}++
|
||||
@ -19,23 +19,58 @@ 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" }
|
||||
// ],
|
||||
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" }
|
||||
],
|
||||
|
||||
humiture:{Humiture:[],bottom:{humidity:null,temp:null,name:null},top:{humidity:null,temp:null,name:null}}, //温湿度
|
||||
// humiture:{Humiture:[],bottom:{humidity:null,temp:null,name:null},top:{humidity:null,temp:null,name:null}}, //温湿度
|
||||
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" }
|
||||
{
|
||||
"devId": "01336fd0-1fa0-11ed-9223-7db1174970a8",
|
||||
"name": "大件车间中部粉尘",
|
||||
"pm25": "45",
|
||||
"pm10": "53"
|
||||
},
|
||||
{
|
||||
"devId": "083e3900-3435-11ed-a7e1-fd42bca6c8c6",
|
||||
"name": "焊接车间粉尘",
|
||||
"pm25": "30",
|
||||
"pm10": "36"
|
||||
},
|
||||
{
|
||||
"devId": "270e1500-eee1-11ed-b2ee-2d727e0cafab",
|
||||
"name": "精加车间粉尘",
|
||||
"pm25": "71",
|
||||
"pm10": "84"
|
||||
},
|
||||
{
|
||||
"devId": "54058c30-eee3-11ed-b2ee-2d727e0cafab",
|
||||
"name": "机加车间粉尘",
|
||||
"pm25": "22",
|
||||
"pm10": "26"
|
||||
},
|
||||
{
|
||||
"devId": "76efb040-eee3-11ed-b2ee-2d727e0cafab",
|
||||
"name": "大件车间东部粉尘",
|
||||
"pm25": "53",
|
||||
"pm10": "60"
|
||||
},
|
||||
{
|
||||
"devId": "a6020310-eee3-11ed-b2ee-2d727e0cafab",
|
||||
"name": "大件车间西部粉尘",
|
||||
"pm25": "66",
|
||||
"pm10": "75"
|
||||
},
|
||||
{
|
||||
"devId": "bcbfb530-88b2-11ed-a926-570995ad0254",
|
||||
"name": "精饰车间粉尘",
|
||||
"pm25": "6",
|
||||
"pm10": "7"
|
||||
}
|
||||
],
|
||||
newVerticalNum: [
|
||||
{
|
||||
@ -174,23 +209,31 @@ export const useSocketStore = defineStore(Names.socketjixiefenchang, {
|
||||
* @出口参数:
|
||||
* @函数备注:
|
||||
*/
|
||||
changeHumiture(val){
|
||||
changeHumiture(val) {
|
||||
// console.log(this.humiture.Humiture);
|
||||
|
||||
if(this.humiture.Humiture.length==0){
|
||||
this.humiture=val
|
||||
}else{
|
||||
val.Humiture.forEach(res=>{
|
||||
this.humiture.Humiture.forEach(ele=>{
|
||||
if(res.name==ele.name){
|
||||
ele.humidity=res.humidity
|
||||
ele.temp=res.temp
|
||||
}
|
||||
})
|
||||
|
||||
val.Humiture.forEach(res => {
|
||||
this.humiture.forEach(ele => {
|
||||
if (res.devId == ele.devId) {
|
||||
ele.humidity = res.humidity
|
||||
ele.temp = res.temp
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
/**
|
||||
* 更新粉尘数据
|
||||
*/
|
||||
changeDust(val) {
|
||||
this.pm.forEach(res => {
|
||||
if (res.devId == val.devId) {
|
||||
res.pm25 = val.pm25
|
||||
res.pm10 = val.pm10
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
@ -27,4 +27,5 @@ export const enum Names{
|
||||
MechanicalViewJijia="MechanicalViewJijia",
|
||||
MechanicalViewJingjia="MechanicalViewJingjia",
|
||||
MechanicalViewJingshi="MechanicalViewJingshi",
|
||||
socketMechanics='socketMechanics',
|
||||
}
|
||||
@ -21,6 +21,12 @@ const { proxy } = getCurrentInstance() as any;
|
||||
let props=defineProps<{
|
||||
title:string,
|
||||
value:any;
|
||||
color:{
|
||||
step0:string,
|
||||
step1:string,
|
||||
border:string
|
||||
color:string
|
||||
};
|
||||
}>()
|
||||
let gas=ref()
|
||||
|
||||
@ -65,11 +71,11 @@ const setData=()=>{
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#186945',
|
||||
color: props.color.step0,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#1b7a4f',
|
||||
color: props.color.step1,
|
||||
},
|
||||
],
|
||||
globalCoord: false,
|
||||
@ -79,8 +85,8 @@ const setData=()=>{
|
||||
amplitude: 10, //振幅
|
||||
backgroundStyle: {
|
||||
borderWidth: 2, //边框大小
|
||||
borderColor:'rgba(8, 206, 120, 0.8)',//边框颜色
|
||||
color: 'rgba(8, 206, 120, 0.4)',
|
||||
borderColor:props.color.border,//边框颜色
|
||||
color: props.color.color, //背景色
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
|
||||
@ -1,26 +1,46 @@
|
||||
<template>
|
||||
<div class="container" ref="humiture">
|
||||
<border13 :color="errList.length>0?borderColor:[]">
|
||||
<div class="container">
|
||||
<div class="errList">
|
||||
<div class="err-item icon-red" v-for="item in errList">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="echartbox" ref="humiture"></div>
|
||||
</div>
|
||||
</border13>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch } from "vue";
|
||||
import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch, onUnmounted,computed } from "vue";
|
||||
import { useSocketStore } from "@/store/moduleSocketMechanics";
|
||||
import border13 from '@/components/border/Border13.vue'
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const props = defineProps<{
|
||||
title: String;
|
||||
value: any;
|
||||
}>();
|
||||
const store = useSocketStore();
|
||||
let index = 0;
|
||||
let humiture = ref();
|
||||
let chart = null
|
||||
watch(props, (newVal) => {
|
||||
init()
|
||||
}, { deep: true, })
|
||||
let timer = null
|
||||
const props = defineProps<{
|
||||
top: any;
|
||||
bottom: any;
|
||||
}>();
|
||||
let errList = computed(() => {
|
||||
let arr = JSON.parse(JSON.stringify(store.humiture.filter(item=>{
|
||||
return item.temp>props.top.temp||item.temp<props.bottom.temp||item.humidity>props.top.hum||item.humidity<props.bottom.hum
|
||||
}))).map(item=>{
|
||||
item.name = item.name.split('车间')[0]
|
||||
return item
|
||||
})
|
||||
return arr;
|
||||
})
|
||||
const borderColor = ["#E43961","#E43961"]
|
||||
function init() {
|
||||
|
||||
const chart = proxy.$echarts.init(humiture.value, 'dark');
|
||||
if (!chart) {
|
||||
chart = proxy.$echarts.init(humiture.value, 'dark');
|
||||
}
|
||||
let option = {
|
||||
title: {
|
||||
text: props.title,
|
||||
text: store.humiture[index].name+"温湿度",
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
@ -109,7 +129,7 @@ function init() {
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: props.value.c
|
||||
value: store.humiture[index].temp
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -178,7 +198,7 @@ function init() {
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: props.value.h
|
||||
value: store.humiture[index].humidity
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -190,6 +210,16 @@ function init() {
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
timer = setInterval(() => {
|
||||
index = index + 1;
|
||||
if (index >= store.humiture.length) {
|
||||
index = 0;
|
||||
}
|
||||
init();
|
||||
}, 5000);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -198,5 +228,39 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.errList {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.echartbox {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.icon-red {
|
||||
color: #e43961;
|
||||
animation: redstart 2s infinite;
|
||||
font-size: 14px;
|
||||
/* position: relative; */
|
||||
/* top: -15px; */
|
||||
}
|
||||
.err-item {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
@keyframes redstart {
|
||||
0% {}
|
||||
|
||||
50% {
|
||||
text-shadow: #fff 1px 0 10px;
|
||||
}
|
||||
|
||||
100% {}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,27 +1,53 @@
|
||||
<template>
|
||||
<div class="container" ref="dust">
|
||||
<border13 :color="errList.length>0?borderColor:[]">
|
||||
<div class="container">
|
||||
<div class="errList">
|
||||
<div class="err-item icon-red" v-for="item in errList">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="echartbox" ref="dust">
|
||||
</div>
|
||||
</div>
|
||||
</border13>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch } from "vue";
|
||||
import { getCurrentInstance, markRaw, onMounted, onUnmounted, reactive, ref, watch,computed } from "vue";
|
||||
import { useSocketStore } from "@/store/moduleSocketMechanics";
|
||||
import border13 from '@/components/border/Border13.vue'
|
||||
import { number } from "echarts/core";
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const props = defineProps<{
|
||||
title: String;
|
||||
value: any;
|
||||
}>();
|
||||
const store = useSocketStore();
|
||||
let index = 0;
|
||||
let dust = ref();
|
||||
let chart = ref(null)
|
||||
watch(props,(newVal)=>{
|
||||
init()
|
||||
}, { deep: true,})
|
||||
let timer = null
|
||||
const props = defineProps({
|
||||
pm10limit:{
|
||||
type:Number,
|
||||
default:150
|
||||
},
|
||||
pm25limit:{
|
||||
type:Number,
|
||||
default:75
|
||||
}
|
||||
})
|
||||
let errList = computed(() => {
|
||||
let arr = JSON.parse(JSON.stringify(store.pm.filter(item=>{
|
||||
return +item.pm10>props.pm10limit||+item.pm25>props.pm25limit
|
||||
}))).map(item=>{
|
||||
item.name = item.name.split('车间')[0]
|
||||
return item
|
||||
})
|
||||
return arr;
|
||||
})
|
||||
const borderColor = ["#E43961","#E43961"]
|
||||
function init() {
|
||||
if (!chart.value) {
|
||||
chart.value = proxy.$echarts.init(dust.value, 'dark');
|
||||
chart.value = proxy.$echarts.init(dust.value, 'dark');
|
||||
}
|
||||
let option = {
|
||||
title: {
|
||||
text: props.title,
|
||||
text: store.pm[index].name,
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
@ -106,7 +132,7 @@ function init() {
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: props.value.two,
|
||||
value: store.pm[index].pm25,
|
||||
name: "PM2.5",
|
||||
},
|
||||
],
|
||||
@ -166,7 +192,7 @@ function init() {
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: props.value.ten,
|
||||
value: store.pm[index].pm10,
|
||||
name: "PM10",
|
||||
},
|
||||
],
|
||||
@ -179,7 +205,17 @@ function init() {
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
timer = setInterval(() => {
|
||||
index = index + 1;
|
||||
if (index >= store.humiture.length) {
|
||||
index = 0;
|
||||
}
|
||||
init();
|
||||
}, 5000);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -187,4 +223,38 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.errList {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.echartbox {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.icon-red {
|
||||
color: #e43961;
|
||||
animation: redstart 2s infinite;
|
||||
font-size: 14px;
|
||||
/* position: relative; */
|
||||
/* top: -15px; */
|
||||
}
|
||||
.err-item {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
@keyframes redstart {
|
||||
0% {}
|
||||
|
||||
50% {
|
||||
text-shadow: #fff 1px 0 10px;
|
||||
}
|
||||
|
||||
100% {}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -30,10 +30,14 @@
|
||||
</li>
|
||||
</ul>
|
||||
<template #reference>
|
||||
<i :class="+items.val > +limit
|
||||
<!-- <i :class="+items.val > +limit
|
||||
? 'iconfont ' + icon + ' icon-red iconsmall-size'
|
||||
: 'iconfont ' + icon + ' icon-blue iconsmall-size'
|
||||
"></i>
|
||||
"></i> -->
|
||||
<text :class="+items.val > +limit
|
||||
? ' icon-red iconsmall-size cursor'
|
||||
: ' icon-blue iconsmall-size'
|
||||
">{{ items.name.split('车间')[0]}}</text>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
@ -140,7 +144,10 @@ p {
|
||||
}
|
||||
|
||||
.iconsmall-size {
|
||||
font-size: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-red {
|
||||
@ -181,7 +188,7 @@ p {
|
||||
.icontip {
|
||||
display: flex;
|
||||
margin-top: -60px;
|
||||
width: 100px;
|
||||
width: 150px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -9,34 +9,18 @@
|
||||
</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 @click="gotoTrendChart(item.value, item.unit)" :title="item.title" :icon="item.icon" :limit="item.limit" :unit="item.unit"
|
||||
:value="item.value"></verticalNumLoop>
|
||||
<div class="top-box-item" v-for="item in store.newVerticalNum">
|
||||
<verticalNumLoop @click="gotoTrendChart(item.value, item.unit)" :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;" @click="gotoTrendChart(store.pm, 'μg/m3')">
|
||||
<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 class="top-box-item" @click="gotoTrendChart(store.pm, 'μg/m3')">
|
||||
<pm :pm10limit="150" :pm25limit="75"></pm>
|
||||
</div>
|
||||
<div style="width: 12%;height: 250px;margin-bottom: 10px;">
|
||||
<border13>
|
||||
<template v-slot>
|
||||
<gas :title="t('messages.gashistory')" :value="gasData"></gas>
|
||||
</template>
|
||||
</border13>
|
||||
<div class="top-box-item" @click="gotoTrendChart(store.humiture, '℃/%RH')">
|
||||
<humidity :top="humidityTop" :bottom="humidityBottom"></humidity>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-box">
|
||||
<div style="width: 33%;height: 100%;">
|
||||
<border13>
|
||||
<power :title="powerData.title" :seriesVal="powerData.seriesVal" :httpValue="powerData.value">
|
||||
</power>
|
||||
</border13>
|
||||
</div>
|
||||
<div style="width: 33%;height: 100%;">
|
||||
<border13>
|
||||
<pipe :title="t('messages.PipelinePressure_Mpa')" :value="pipeData"></pipe>
|
||||
@ -44,8 +28,24 @@
|
||||
</div>
|
||||
<div style="width: 33%;height: 100%;">
|
||||
<border13>
|
||||
<humidityBar :title="'温湿度'" :data="humidityData" :bottom="humidityBottom" :top="humidityTop">
|
||||
</humidityBar>
|
||||
<power :title="powerData.title" :seriesVal="powerData.seriesVal" :httpValue="powerData.value">
|
||||
</power>
|
||||
</border13>
|
||||
</div>
|
||||
<div style="width: 16%;height: 100%;">
|
||||
<border13>
|
||||
<!-- <humidityBar :title="'温湿度'" :data="humidityData" :bottom="humidityBottom" :top="humidityTop">
|
||||
</humidityBar> -->
|
||||
<gas :title="t('messages.gashistory')" :value="gasData"
|
||||
:color="gascolor"></gas>
|
||||
</border13>
|
||||
</div>
|
||||
<div style="width: 16%;height: 100%;">
|
||||
<border13>
|
||||
<!-- <humidityBar :title="'温湿度'" :data="humidityData" :bottom="humidityBottom" :top="humidityTop">
|
||||
</humidityBar> -->
|
||||
<gas :title="t('messages.waterhistory')" :value="waterData"
|
||||
:color="watercolor"></gas>
|
||||
</border13>
|
||||
</div>
|
||||
</div>
|
||||
@ -61,6 +61,7 @@ import verticalNumLoop from './components/verticalNumLoop.vue'
|
||||
import power from './components/power2023.vue';
|
||||
import pm from './components/pm.vue';
|
||||
import humidityBar from './components/humidityBar.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'
|
||||
@ -71,8 +72,9 @@ import { getPowerData, getconsumeDetail } from "@/http/energyConsume";
|
||||
import { useSocketStore } from "@/store/moduleSocketMechanics";
|
||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||
import { gettime, clacendTime } from "@/utils/time"
|
||||
import {useRouter} from 'vue-router'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { hu } from 'element-plus/es/locale';
|
||||
let { t } = useI18n();
|
||||
let router = useRouter()
|
||||
const store = useSocketStore();
|
||||
@ -104,34 +106,35 @@ const verticalType = {
|
||||
let powerData = ref({ value: { name: [] }, seriesVal: [], title: t('messages.Powerto2023') })
|
||||
|
||||
let gasData = ref(0)
|
||||
|
||||
let waterData = ref(0)
|
||||
let pipeData = ref({ listData: [], top: 0 })
|
||||
|
||||
let headerref = ref()
|
||||
let verticalList: any[] = reactive([])
|
||||
let pmtimer = null
|
||||
let humittimer = null
|
||||
let humidityTop = ref({})
|
||||
let humidityBottom = ref({})
|
||||
|
||||
/**
|
||||
* 跳转到趋势图
|
||||
*/
|
||||
function gotoTrendChart(value, unit) {
|
||||
let ids = value.map((item) => item.devId).toString();
|
||||
ElMessageBox.confirm(
|
||||
'即将跳转到传感器监测走势图页面，是否继续？',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'info',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
router.push({ path: '/TrendChart', query: { ids: ids, unit: unit } })
|
||||
})
|
||||
.catch(() => {
|
||||
function gotoTrendChart(value, unit) {
|
||||
let ids = value.map((item) => item.devId).toString();
|
||||
ElMessageBox.confirm(
|
||||
'即将跳转到传感器监测走势图页面，是否继续？',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'info',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
router.push({ path: '/TrendChart', query: { ids: ids, unit: unit } })
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
@ -194,10 +197,13 @@ async function gethumitureData() {
|
||||
|
||||
if (result.code == 200) {
|
||||
store.$patch((state) => {
|
||||
state.humiture = result.data
|
||||
state.humiture = result.data.Humiture
|
||||
})
|
||||
humidityBottom.value = result.data.bottom
|
||||
humidityTop.value = result.data.top
|
||||
}
|
||||
}
|
||||
/**用电量柱状图
|
||||
let humidityData = ref({})
|
||||
let humidityBottom = ref({})
|
||||
let humidityTop = ref({})
|
||||
@ -212,7 +218,7 @@ watch(() => store.humiture, (newVal, oldVal) => {
|
||||
humidityBottom.value = newVal.bottom;
|
||||
humidityTop.value = newVal.top;
|
||||
}, { deep: true, immediate: true })
|
||||
|
||||
*/
|
||||
//获取粉尘数据
|
||||
let pmindex = ref(0);
|
||||
async function getPmData() {
|
||||
@ -233,8 +239,8 @@ async function getPmData() {
|
||||
if (arr.indexOf(ele.devId) > -1) {
|
||||
data[ele.devId] = {
|
||||
devId: ele.devId,
|
||||
name: ele.name + '粉尘',
|
||||
pm2: ele.value,
|
||||
name: ele.devName.split('监测')[0],
|
||||
pm25: ele.value,
|
||||
pm10: null
|
||||
}
|
||||
}
|
||||
@ -249,15 +255,10 @@ async function getPmData() {
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
store.$patch((state) => {
|
||||
state.pm = Object.values(data)
|
||||
})
|
||||
pmtimer = setInterval(() => {
|
||||
pmindex.value++
|
||||
if (pmindex.value >= store.pm.length) {
|
||||
pmindex.value = 0
|
||||
}
|
||||
}, 5000)
|
||||
|
||||
}
|
||||
//获取用电量数据
|
||||
@ -314,6 +315,10 @@ async function getPower_data() {
|
||||
powerData.value.title = '机械分厂用电量'
|
||||
}
|
||||
}
|
||||
|
||||
let gascolor = {step0:'#186945',step1:'#1b7a4f',border:'rgba(8, 206, 120, 0.8)',color:'rgba(8, 206, 120, 0.4)'}
|
||||
let watercolor = {step0:'#0D73B3',step1:'#1176C6',border:'#1E4D7B',color:'#0F2A57'}
|
||||
//获取用气量数据
|
||||
async function getconsumeDetailfun() {
|
||||
let result: any = await getconsumeDetail()
|
||||
if (result.code == 200) {
|
||||
@ -321,6 +326,9 @@ async function getconsumeDetailfun() {
|
||||
if (res.deptName == '喷漆车间' && res.type == 'GasDetail') {
|
||||
gasData.value = res.usageNum
|
||||
}
|
||||
if (res.deptName == '生产区' && res.type == 'WaterDetail') {
|
||||
waterData.value = res.usageNum
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
@ -334,7 +342,8 @@ async function getpipeDatafun() {
|
||||
pipeData.value.top = result.data.top
|
||||
}
|
||||
}
|
||||
|
||||
/************************************************************ */
|
||||
//socket
|
||||
function getWebsocket(val) {
|
||||
headerref.value.HeadergetWebsocket(val)
|
||||
try {
|
||||
@ -376,9 +385,12 @@ function getWebsocket(val) {
|
||||
store.changeHumiture(data.msg);
|
||||
}
|
||||
|
||||
if (data.type == "dust") {
|
||||
store.changeDust(data.msg);
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.log(err, "报错了大哥", console.log(val)
|
||||
);
|
||||
console.log(err, "报错了大哥", console.log(val));
|
||||
|
||||
}
|
||||
}
|
||||
@ -399,7 +411,6 @@ onMounted(() => {
|
||||
})
|
||||
onUnmounted(() => {
|
||||
closeWebsocket();
|
||||
clearInterval(pmtimer)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -424,15 +435,24 @@ onUnmounted(() => {
|
||||
|
||||
.top-box {
|
||||
width: 1920px;
|
||||
height: 290px;
|
||||
height: 340px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-box-item {
|
||||
width: 12%;
|
||||
height: 300px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
width: 1920px;
|
||||
height: 630px;
|
||||
height: 580px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user