370 lines
10 KiB
Vue
370 lines
10 KiB
Vue
<!--
|
||
* @FilePath: \screenFront\src\views\PaintShopView\stuffView\top.vue
|
||
* @Author: 王路平
|
||
* @文件版本: V1.0.0
|
||
* @Date: 2023-02-13 14:43:28
|
||
* @Description:
|
||
*
|
||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||
-->
|
||
<template>
|
||
<div>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
|
||
<!-- <verticalNum ref="verticalNum3" :title="'燃气检测'"></verticalNum>
|
||
<verticalNum ref="verticalNum5" :title="'烟雾检测'"></verticalNum> -->
|
||
<verticalNum ref="verticalNum4" :title="t('messages.noiseDetection')"></verticalNum>
|
||
<verticalNum ref="verticalNum6" :title="'甲醛监测'"></verticalNum>
|
||
<verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum>
|
||
<div>
|
||
<border3 ref="borderref">
|
||
<template v-slot>
|
||
<humidity name="Electriccontrol" :title="t('messages.TemperatureHumidity')" ref="humidityref"></humidity>
|
||
</template>
|
||
</border3>
|
||
</div>
|
||
<chart :title="ductOption.title" :option="ductOption.option" ref="ductref"></chart>
|
||
<div>
|
||
<border3 ref="borderrefPM">
|
||
<template v-slot>
|
||
<pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
|
||
</template>
|
||
</border3>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, reactive, ref, watch, onUnmounted } from "vue";
|
||
import border6 from "@/components/borderBox/border6.vue";
|
||
import border3 from "@/components/borderBox/border3.vue";
|
||
import { calcWH } from "@/components/ts/selfAdaption";
|
||
// import {getPowerData} from '@/http/environment'
|
||
import { getSensorByDept } from "@/http/PaintShopView/index";
|
||
import humidity from "./chart/humidity.vue";
|
||
import pm from "./chart/pm.vue";
|
||
import chart from "@/components/assembly/chart2.vue";
|
||
import verticalNum from "./../components/verticalNum.vue";
|
||
import { useRoute, useRouter } from "vue-router";
|
||
import { useEnergyConsumeStore } from "@/store/module/energyConsume";
|
||
import { useI18n } from 'vue-i18n'
|
||
let { t } = useI18n();
|
||
const store = useEnergyConsumeStore();
|
||
const router = useRouter();
|
||
|
||
// let verticalNum3 = ref();
|
||
let verticalNum4 = ref();
|
||
// let verticalNum5 = ref();
|
||
let verticalNum6 = ref();
|
||
let verticalNum7 = ref();
|
||
let borderref = ref()
|
||
let humidityref = ref()
|
||
let ductref = ref()
|
||
let borderrefPM = ref()
|
||
let pmref = ref()
|
||
let temp_humi_timer = null
|
||
let pm_timer = null
|
||
let props = defineProps<{
|
||
width: number;
|
||
height: number;
|
||
}>();
|
||
watch(
|
||
() => props,
|
||
(newVal, oldVal) => {
|
||
//监听父组件宽高变化，随时重置本组件尺寸
|
||
reset(newVal);
|
||
},
|
||
{ immediate: true, deep: true, flush: "post" }
|
||
);
|
||
function reset(val: any) {
|
||
//宽高为0时跳出该方法
|
||
|
||
if (!val.width && !val.height) return;
|
||
|
||
//重置盒子尺寸
|
||
powerBox(val.width, val.height);
|
||
borderref.value.resetWH()
|
||
borderrefPM.value.resetWH()
|
||
}
|
||
|
||
const powerBox = (width: any, height: any) => {
|
||
let a = calcWH(height, width, 1, 24, 0);
|
||
//修改高度
|
||
// verticalNum3.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
|
||
verticalNum4.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
|
||
// verticalNum5.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
|
||
verticalNum6.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
|
||
verticalNum7.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
|
||
humidityref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
|
||
ductref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20);
|
||
pmref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
|
||
};
|
||
let ductOption = reactive({
|
||
title: "",
|
||
option: {
|
||
title: {
|
||
text: t('messages.PipelinePressure_Mpa'),
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
},
|
||
grid: {
|
||
// 让图表占满容器
|
||
top: "0px",
|
||
left: "0px",
|
||
right: "0px",
|
||
bottom: "0px",
|
||
},
|
||
series: [
|
||
{
|
||
type: "gauge",
|
||
center: ["50%", "90%"],
|
||
startAngle: 190,
|
||
endAngle: -10,
|
||
radius: "50%",
|
||
min: 0,
|
||
max: 2,
|
||
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.4, "#7CFFB2"],
|
||
[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} Mpa",
|
||
color: "inherit",
|
||
},
|
||
title: {
|
||
offsetCenter: [0, "-20%"],
|
||
},
|
||
data: [
|
||
{
|
||
value: 0.2,
|
||
name: "进水",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "gauge",
|
||
center: ["50%", "50%"],
|
||
startAngle: 200,
|
||
endAngle: -20,
|
||
min: 0,
|
||
max: 2,
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 10,
|
||
color: [
|
||
[0.4, "#7CFFB2"],
|
||
[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} Mpa",
|
||
color: "inherit",
|
||
},
|
||
title: {
|
||
offsetCenter: [0, "-50%"],
|
||
},
|
||
data: [
|
||
{
|
||
value: 0.2,
|
||
name: "回水",
|
||
},
|
||
],
|
||
},
|
||
],
|
||
}
|
||
});
|
||
// async function getSensorByDeptfun() {
|
||
// let result: any = await getSensorByDept({ depts: 6 });
|
||
|
||
// if (result.code == 200) {
|
||
|
||
// }
|
||
// }
|
||
|
||
let pm_index = 0
|
||
|
||
let temp_humi_index = 0
|
||
function setcontentData(val) {
|
||
|
||
clearInterval(temp_humi_timer)
|
||
clearInterval(pm_timer)
|
||
let CH2O = val.TVOC_CH2O.map((item) => {
|
||
return { name: item.name, val: item.CH2O };
|
||
});
|
||
let TVOC = val.TVOC_CH2O.map((item) => {
|
||
return { name: item.name, val: item.TVOC };
|
||
});
|
||
let noise = val.noise.map((item) => {
|
||
return { name: item.name, val: item.data };
|
||
});
|
||
// verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
|
||
verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB")
|
||
// verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
|
||
verticalNum6.value.setData(CH2O, 'icon-app_icons--', 0.08, "mg/m3")
|
||
verticalNum7.value.setData(TVOC, 'icon-TVOC-Outlined', 0.5, "mg/m3")
|
||
|
||
humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp })
|
||
if (val.temp_humi.length > 1) {
|
||
temp_humi_timer = setInterval(() => {
|
||
humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp })
|
||
temp_humi_index++
|
||
if (temp_humi_index >= val.temp_humi.length) {
|
||
temp_humi_index = 0
|
||
}
|
||
}, 3000)
|
||
}
|
||
let type = []
|
||
let valueduct = []
|
||
for (let key in val.water_pressure) {
|
||
if (key == ' 大件-精饰水暖管道压力30（进水2）') {
|
||
// type.push('进水')
|
||
ductOption.option.series[0].data[0].value = val.water_pressure[key]
|
||
} else {
|
||
// type.push('回水')
|
||
ductOption.option.series[1].data[0].value = val.water_pressure[key]
|
||
}
|
||
|
||
// valueduct.push(val.water_pressure[key])
|
||
}
|
||
// ductOption.option.yAxis.data=[]
|
||
// ductOption.option.series=[]
|
||
// ductOption.option.yAxis.data=type
|
||
// ductOption.option.series.push({
|
||
// data: valueduct,
|
||
// type: 'bar',
|
||
// showBackground: true,
|
||
// backgroundStyle: {
|
||
// color: 'rgba(180, 180, 180, 0.2)'
|
||
// },
|
||
// itemStyle: {
|
||
// color: function(params) {
|
||
// // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
||
// // console.log(params)
|
||
// let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
||
// // return colors[params.dataIndex];
|
||
// return color[params.dataIndex];
|
||
// }
|
||
// },
|
||
// barWidth:'50%',
|
||
// label: {
|
||
// show: true,
|
||
// color:'#fff',
|
||
// formatter: "{c}",
|
||
// position: "right",
|
||
// textStyle: {
|
||
// color: "#fff",
|
||
// fontSize: 14,
|
||
// },
|
||
// },
|
||
// })
|
||
pmref.value.setData({two:val.dust[pm_index].pm25,ten:val.dust[pm_index].pm10,title:val.dust[pm_index].name})
|
||
if (val.dust.length > 1) {
|
||
pm_timer = setInterval(() => {
|
||
pmref.value.setData({two:val.dust[pm_index].pm25,ten:val.dust[pm_index].pm10,title:val.dust[pm_index].name})
|
||
pm_index++
|
||
if (pm_index >= val.dust.length) {
|
||
pm_index = 0
|
||
}
|
||
}, 3000)
|
||
}
|
||
ductref.value.changeData(ductOption.option)
|
||
}
|
||
let Data = { power: { "管道1": 11, "管道2": 22 } }
|
||
onMounted(() => {
|
||
|
||
|
||
});
|
||
onUnmounted(() => {
|
||
clearInterval(temp_humi_timer)
|
||
clearInterval(pm_timer)
|
||
});
|
||
defineExpose({
|
||
setcontentData,
|
||
});
|
||
</script>
|
||
|
||
<style scoped></style>
|