1.更新精加车间传感器图例以及图例样式修改
This commit is contained in:
15133876896-BGG25
parent
da0a2425f9
commit
64ff4a16d0
250
src/views/PaintShopView/components/humidity.vue
Normal file
250
src/views/PaintShopView/components/humidity.vue
Normal file
@ -0,0 +1,250 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\machiningView\chart\humidity.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-10 13:27:36
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content-small" ref="humiture"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { EDataPerson, EDataPersonItem } from "@/type/generalEnvironment";
|
||||
import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch } from "vue";
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
let props = defineProps<{
|
||||
name: String;
|
||||
title: any;
|
||||
}>();
|
||||
let humiture = ref();
|
||||
const echartsData = reactive<EDataPerson>({
|
||||
humiture: {
|
||||
div: null,
|
||||
data: null,
|
||||
title: "",
|
||||
box: null,
|
||||
},
|
||||
});
|
||||
/**
|
||||
* @函数功能:
|
||||
* @param {*} value 需要设置的数据
|
||||
* @param {*} type 1为创建 2为更新
|
||||
* @出口参数:
|
||||
* @函数备注:
|
||||
*/
|
||||
const setData = (value: any) => {
|
||||
echartsData.humiture!.div = humiture.value;
|
||||
echartsData.humiture!.title = props.title;
|
||||
echartsData.humiture!.data = {
|
||||
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%", "90%"],
|
||||
startAngle: 190,
|
||||
endAngle: -10,
|
||||
radius: "30%",
|
||||
min: -30,
|
||||
max: 70,
|
||||
splitNumber: 10,
|
||||
progress: {
|
||||
show: false,
|
||||
width: 5
|
||||
},
|
||||
pointer: {
|
||||
itemStyle: {
|
||||
color: 'inherit'
|
||||
}
|
||||
},
|
||||
//刻度轴宽
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: [
|
||||
[0.15, '#FF6E76'],
|
||||
[0.75, '#7CFFB2'],
|
||||
[1, '#FF6E76']
|
||||
]
|
||||
}
|
||||
},
|
||||
//刻度线
|
||||
axisTick: {
|
||||
show:false,
|
||||
distance: -5,
|
||||
splitNumber: 5,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
//刻度线
|
||||
splitLine: {
|
||||
distance: -10,
|
||||
length: 3,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
//表刻度值
|
||||
axisLabel: {
|
||||
distance: -20,
|
||||
color: '#999',
|
||||
fontSize: 12
|
||||
},
|
||||
anchor: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
// width: '10%',
|
||||
// lineHeight: 5,
|
||||
// borderRadius: 8,
|
||||
// offsetCenter: [0, '-15%'],
|
||||
fontSize: 12,
|
||||
// fontWeight: 'bolder',
|
||||
formatter: '{value} °C',
|
||||
color: 'inherit'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: value.c
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "gauge",
|
||||
center: ["50%", "55%"],
|
||||
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: -40,
|
||||
color: '#999',
|
||||
fontSize: 20
|
||||
},
|
||||
anchor: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: [0, '15%'],
|
||||
fontSize: 15,
|
||||
formatter: '{value} %RH',
|
||||
color: 'inherit'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: value.h
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
};
|
||||
change(echartsData.humiture);
|
||||
};
|
||||
|
||||
const change = (item: EDataPersonItem) => {
|
||||
let Ebox;
|
||||
//判断是否已经生成过一次dom，没生成就新建生成过就拿之前的dom
|
||||
if (!item.box) {
|
||||
Ebox = markRaw(proxy.$echarts.init(item.div, "dark"))
|
||||
} else {
|
||||
Ebox = item.box;
|
||||
}
|
||||
//将拿到的dom设置数据源
|
||||
Ebox.setOption(item.data);
|
||||
//保存新设置的dom
|
||||
item.box = Ebox;
|
||||
};
|
||||
const updata = (item: EDataPersonItem) => {
|
||||
item.box.setOption(item.data);
|
||||
};
|
||||
function setchartWH(width: any, height: any) {
|
||||
echartsData.humiture!.div = humiture.value;
|
||||
humiture.value.style.height = height + "px";
|
||||
humiture.value.style.width = width + "px";
|
||||
if (echartsData.humiture.box) {
|
||||
echartsData.humiture.box.resize();
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
// setData()
|
||||
});
|
||||
|
||||
// return{setchartWH}
|
||||
defineExpose({
|
||||
setchartWH,
|
||||
setData,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scope>
|
||||
.content-small{
|
||||
margin-right: 3px;
|
||||
}
|
||||
</style>
|
||||
234
src/views/PaintShopView/components/pm.vue
Normal file
234
src/views/PaintShopView/components/pm.vue
Normal file
@ -0,0 +1,234 @@
|
||||
<!--
|
||||
* @FilePath: \gitscreenFront\src\views\PaintShopView\components\pm.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-10 13:27:36
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content-small" ref="humiture"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { EDataPerson, EDataPersonItem } from "@/type/generalEnvironment";
|
||||
import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch } from "vue";
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
let props = defineProps<{
|
||||
name: String;
|
||||
title: any;
|
||||
}>();
|
||||
let humiture = ref();
|
||||
const echartsData = reactive<EDataPerson>({
|
||||
humiture: {
|
||||
div: null,
|
||||
data: null,
|
||||
title: "",
|
||||
box: null,
|
||||
},
|
||||
});
|
||||
/**
|
||||
* @函数功能:
|
||||
* @param {*} value 需要设置的数据
|
||||
* @param {*} type 1为创建 2为更新
|
||||
* @出口参数:
|
||||
* @函数备注:
|
||||
*/
|
||||
const setData = (value: any) => {
|
||||
echartsData.humiture!.div = humiture.value;
|
||||
echartsData.humiture!.title = value.title;
|
||||
echartsData.humiture!.data = {
|
||||
title: {
|
||||
text: value.title,
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
},
|
||||
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: 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: value.ten,
|
||||
name: "PM10",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
change(echartsData.humiture);
|
||||
};
|
||||
|
||||
const change = (item: EDataPersonItem) => {
|
||||
let Ebox;
|
||||
//判断是否已经生成过一次dom，没生成就新建生成过就拿之前的dom
|
||||
if (!item.box) {
|
||||
Ebox = markRaw(proxy.$echarts.init(item.div, "dark"))
|
||||
} else {
|
||||
Ebox = item.box;
|
||||
}
|
||||
//将拿到的dom设置数据源
|
||||
Ebox.setOption(item.data);
|
||||
//保存新设置的dom
|
||||
item.box = Ebox;
|
||||
};
|
||||
const updata = (item: EDataPersonItem) => {
|
||||
item.box.setOption(item.data);
|
||||
};
|
||||
function setchartWH(width: any, height: any) {
|
||||
echartsData.humiture!.div = humiture.value;
|
||||
humiture.value.style.height = height + "px";
|
||||
humiture.value.style.width = width + "px";
|
||||
if (echartsData.humiture.box) {
|
||||
echartsData.humiture.box.resize();
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
// setData()
|
||||
});
|
||||
|
||||
// return{setchartWH}
|
||||
defineExpose({
|
||||
setchartWH,
|
||||
setData,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scope></style>
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \screenFront\src\views\PaintShopView\components\verticalNum.vue
|
||||
* @FilePath: \gitscreenFront\src\views\PaintShopView\components\verticalNum.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 08:22:35
|
||||
@ -8,14 +8,14 @@
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div ref="numBox1" :style="{ height: boxSize.height, width: boxSize.width, marginBottom: '10px' }">
|
||||
<div ref="numBox1" :style="{ height: boxSize.height, width: boxSize.width }">
|
||||
<border3 ref="refborder3">
|
||||
<template v-slot>
|
||||
<div class="box" ref="classBox1">
|
||||
<h2>{{ item.name }}</h2>
|
||||
<h5 v-if="value.unit">{{
|
||||
`${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
|
||||
<h2>{{ item.name }}</h2>
|
||||
<i :class="+item.val > +value.quota
|
||||
? 'iconfont ' + value.iconname + ' icon-red iconbig-size'
|
||||
: 'iconfont ' + value.iconname + ' icon-blue iconbig-size'
|
||||
@ -113,14 +113,14 @@
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.box>h5 {
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: -50px;
|
||||
/* margin-bottom: 20px; */
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* .contentbox{
|
||||
@ -168,12 +168,15 @@
|
||||
align-items: center;
|
||||
vertical-align: top;
|
||||
font-size: 25px;
|
||||
height: 0;
|
||||
height: 5;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.box>h2 {
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left:20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\finishView\bottom.vue
|
||||
* @FilePath: \gitscreenFront\src\views\PaintShopView\finishView\bottom.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 14:43:28
|
||||
@ -17,11 +17,11 @@
|
||||
:option="powerOption.option"
|
||||
ref="powerref"
|
||||
></chart>
|
||||
<!-- <chart
|
||||
<chart
|
||||
:title="powerOption.title"
|
||||
:option="powerOption.option"
|
||||
ref="Productionref"
|
||||
></chart> -->
|
||||
></chart>
|
||||
<!-- <div>
|
||||
<border3 ref="borderref">
|
||||
<template v-slot>
|
||||
@ -53,7 +53,7 @@ const store = useEnergyConsumeStore();
|
||||
const router = useRouter();
|
||||
|
||||
let powerref = ref();
|
||||
// let Productionref = ref();
|
||||
let Productionref = ref();
|
||||
// let borderref=ref()
|
||||
// let pmref=ref()
|
||||
|
||||
@ -80,10 +80,10 @@ function reset(val: any) {
|
||||
}
|
||||
|
||||
const powerBox = (width: any, height: any) => {
|
||||
let a = calcWH(height, width, 1, 1, 0);
|
||||
let a = calcWH(height, width, 1, 2, 0);
|
||||
//修改高度
|
||||
powerref.value.setchartWH(a.oWidth-20, a.oHeight-20);
|
||||
// Productionref.value.setchartWH(a.oWidth-20, a.oHeight-20);
|
||||
Productionref.value.setchartWH(a.oWidth-20, a.oHeight-20);
|
||||
// pmref.value.setchartWH(a.oWidth-40,a.oHeight-40)
|
||||
// yields.value.setchartWH(a.oWidth, a.oHeight - 30);
|
||||
};
|
||||
@ -130,6 +130,49 @@ let powerOption = reactive({
|
||||
],
|
||||
},
|
||||
});
|
||||
let ProductionOption = reactive({
|
||||
title: "",
|
||||
option: {
|
||||
title: {
|
||||
text: t('messages.Production_2023'),
|
||||
textStyle: {
|
||||
color: "rgb(255,255,255,0.9)",
|
||||
},
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
axisPointer: {
|
||||
// Use axis to trigger tooltip
|
||||
type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
|
||||
axis: "auto",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
width:800,
|
||||
right:20,
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
left: "3%",
|
||||
right: "0%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
],
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
],
|
||||
},
|
||||
});
|
||||
// async function getpower() {
|
||||
// let result: any = await getPowerData({ time: 1 });
|
||||
|
||||
@ -188,6 +231,48 @@ function setcontentData(val){
|
||||
powerref.value.changeData(powerOption.option)
|
||||
|
||||
|
||||
let monthData2=[]
|
||||
let powerMonth2=[]
|
||||
for(let key in val.rate){
|
||||
monthData2.push(key)
|
||||
powerMonth2.push(val.rate[key])
|
||||
}
|
||||
ProductionOption.option.xAxis.data=[]
|
||||
ProductionOption.option.series=[]
|
||||
ProductionOption.option.xAxis.data=monthData2.reverse()
|
||||
ProductionOption.option.series.push({
|
||||
data: powerMonth2.reverse(),
|
||||
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:'30%',
|
||||
label: {
|
||||
show: true,
|
||||
color:'#fff',
|
||||
formatter: function(params){
|
||||
console.log(params);
|
||||
return params.value.toLocaleString()
|
||||
},
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
Productionref.value.changeData(ProductionOption.option)
|
||||
// pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\finishView\index.vue
|
||||
* @FilePath: \gitscreenFront\src\views\PaintShopView\finishView\index.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-04-11 13:50:05
|
||||
@ -27,21 +27,21 @@
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<top
|
||||
:width="size.oWidth * 16"
|
||||
:width="size.oWidth * 24"
|
||||
:height="size.oHeight"
|
||||
ref="topref"
|
||||
></top>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<bottom
|
||||
:width="size.oWidth * 16"
|
||||
:width="size.oWidth * 24"
|
||||
:height="size.oHeight * 2"
|
||||
ref="bottomref"
|
||||
></bottom>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div>
|
||||
<!-- <div>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<right
|
||||
@ -51,7 +51,7 @@
|
||||
></right>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -74,7 +74,7 @@ let Acontent = ref();
|
||||
let time = ref(null);
|
||||
let topref = ref();
|
||||
let bottomref = ref();
|
||||
let rightref = ref();
|
||||
// let rightref = ref();
|
||||
let size = reactive({
|
||||
oWidth: 0,
|
||||
oHeight: 0,
|
||||
@ -90,7 +90,7 @@ async function getSensorByDeptfun() {
|
||||
if (result.code == 200) {
|
||||
topref.value.setcontentData(result.data);
|
||||
bottomref.value.setcontentData(result.data);
|
||||
rightref.value.setcontentData(result.data);
|
||||
// rightref.value.setcontentData(result.data);
|
||||
}
|
||||
}
|
||||
function getWebsocket(val) {
|
||||
@ -101,7 +101,7 @@ function getWebsocket(val) {
|
||||
// store.changenoise(data.msg);
|
||||
topref.value.setcontentData(data.msg);
|
||||
bottomref.value.setcontentData(data.msg);
|
||||
rightref.value.setcontentData(data.msg);
|
||||
// rightref.value.setcontentData(data.msg);
|
||||
}
|
||||
} catch (err) {}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\finishView\top.vue
|
||||
* @FilePath: \gitscreenFront\src\views\PaintShopView\finishView\top.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 14:43:28
|
||||
@ -15,11 +15,8 @@
|
||||
<!-- <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> -->
|
||||
<verticalNum ref="verticalNum6" :title="'甲醛监测'"></verticalNum>
|
||||
<verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum>
|
||||
<div>
|
||||
<border3 ref="borderref">
|
||||
<template v-slot>
|
||||
@ -32,6 +29,14 @@
|
||||
: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>
|
||||
@ -39,7 +44,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
|
||||
import border6 from "@/components/borderBox/border6.vue";
|
||||
import border3 from "@/components/borderBox/border3.vue";
|
||||
import { calcWH } from "@/components/ts/selfAdaption";
|
||||
@ -47,7 +52,8 @@ import { calcWH } from "@/components/ts/selfAdaption";
|
||||
import { getSensorByDept} from "@/http/PaintShopView/index";
|
||||
import humidity from "./chart/humidity.vue";
|
||||
import chart from "@/components/assembly/chart2.vue";
|
||||
import verticalNum from "./chart/verticalNum.vue";
|
||||
import verticalNum from "../components/verticalNum.vue";
|
||||
import pm from "../components/pm.vue"
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useEnergyConsumeStore } from "@/store/module/energyConsume";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@ -58,11 +64,14 @@ const router = useRouter();
|
||||
// let verticalNum3 = ref();
|
||||
let verticalNum4 = ref();
|
||||
// let verticalNum5 = ref();
|
||||
// let verticalNum6 = ref();
|
||||
// let verticalNum7 = ref();
|
||||
let verticalNum6 = ref();
|
||||
let verticalNum7 = ref();
|
||||
let pmref = ref()
|
||||
let borderref=ref()
|
||||
let humidityref=ref()
|
||||
let ductref=ref()
|
||||
let temp_humi_timer = null
|
||||
let pm_timer = null
|
||||
|
||||
let props = defineProps<{
|
||||
width: number;
|
||||
@ -90,12 +99,13 @@ 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*8-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*3-20,a.oHeight-20)
|
||||
// verticalNum7.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
|
||||
humidityref.value.setchartWH(a.oWidth*8-40,a.oHeight-40)
|
||||
ductref.value.setchartWH(a.oWidth*8-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-40,a.oHeight-40)
|
||||
ductref.value.setchartWH(a.oWidth*4-20, a.oHeight-20);
|
||||
pmref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 40)
|
||||
};
|
||||
let ductOption = reactive({
|
||||
title: "",
|
||||
@ -257,14 +267,40 @@ let ductOption = reactive({
|
||||
|
||||
// }
|
||||
// }
|
||||
let pm_index = 0
|
||||
let temp_humi_index = 0
|
||||
|
||||
function setcontentData(val){
|
||||
console.log(val);
|
||||
|
||||
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(val.noise,'icon-shengyin',120,"dB")
|
||||
verticalNum4.value.setData(noise,'icon-shengyin',120,"dB")
|
||||
// verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
|
||||
// verticalNum6.value.setData(val.TVOC_CH2O.CH2O,'icon-app_icons--',5,"mg/m3")
|
||||
// verticalNum7.value.setData(val.TVOC_CH2O.TVOC,'icon-TVOC-Outlined',5,"PPM")
|
||||
verticalNum6.value.setData(CH2O,'icon-app_icons--',5,"mg/m3")
|
||||
verticalNum7.value.setData(TVOC,'icon-TVOC-Outlined',5,"PPM")
|
||||
// console.log(pmref.value);
|
||||
humidityref.value.setData({h:val.temp_humi.huim,c:val.temp_humi.temp})
|
||||
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){
|
||||
@ -309,7 +345,17 @@ let ductOption = reactive({
|
||||
// },
|
||||
// },
|
||||
// })
|
||||
|
||||
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}}
|
||||
@ -317,6 +363,10 @@ onMounted(() => {
|
||||
|
||||
|
||||
});
|
||||
onUnmounted(()=>{
|
||||
clearInterval(temp_humi_timer)
|
||||
clearInterval(pm_timer)
|
||||
})
|
||||
defineExpose({
|
||||
setcontentData,
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\machiningView\bottom.vue
|
||||
* @FilePath: \gitscreenFront\src\views\PaintShopView\machiningView\bottom.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 14:43:28
|
||||
@ -17,11 +17,11 @@
|
||||
:option="powerOption.option"
|
||||
ref="powerref"
|
||||
></chart>
|
||||
<!-- <chart
|
||||
:title="powerOption.title"
|
||||
:option="powerOption.option"
|
||||
<chart
|
||||
:title="ProductionOption.title"
|
||||
:option="ProductionOption.option"
|
||||
ref="Productionref"
|
||||
></chart> -->
|
||||
></chart>
|
||||
<!-- <div>
|
||||
<border3 ref="borderref">
|
||||
<template v-slot>
|
||||
@ -53,7 +53,7 @@ const store = useEnergyConsumeStore();
|
||||
const router = useRouter();
|
||||
|
||||
let powerref = ref();
|
||||
// let Productionref = ref();
|
||||
let Productionref = ref();
|
||||
let borderref=ref()
|
||||
// let pmref=ref()
|
||||
|
||||
@ -80,10 +80,10 @@ function reset(val: any) {
|
||||
}
|
||||
|
||||
const powerBox = (width: any, height: any) => {
|
||||
let a = calcWH(height, width, 1, 1, 0);
|
||||
let a = calcWH(height, width, 1, 2, 0);
|
||||
//修改高度
|
||||
powerref.value.setchartWH(a.oWidth-20, a.oHeight-20);
|
||||
// Productionref.value.setchartWH(a.oWidth-20, a.oHeight-20);
|
||||
Productionref.value.setchartWH(a.oWidth-20, a.oHeight-20);
|
||||
// pmref.value.setchartWH(a.oWidth-40,a.oHeight-40)
|
||||
// yields.value.setchartWH(a.oWidth, a.oHeight - 30);
|
||||
};
|
||||
@ -233,48 +233,48 @@ function setcontentData(val){
|
||||
powerref.value.changeData(powerOption.option)
|
||||
|
||||
|
||||
// let monthData2=[]
|
||||
// let powerMonth2=[]
|
||||
// for(let key in val.rate){
|
||||
// monthData2.push(key)
|
||||
// powerMonth2.push(val.rate[key])
|
||||
// }
|
||||
// ProductionOption.option.xAxis.data=[]
|
||||
// ProductionOption.option.series=[]
|
||||
// ProductionOption.option.xAxis.data=monthData2.reverse()
|
||||
// ProductionOption.option.series.push({
|
||||
// data: powerMonth2.reverse(),
|
||||
// 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: function(params){
|
||||
// console.log(params);
|
||||
// return params.value.toLocaleString()
|
||||
// },
|
||||
// position: "top",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 14,
|
||||
// },
|
||||
// },
|
||||
// })
|
||||
let monthData2=[]
|
||||
let powerMonth2=[]
|
||||
for(let key in val.rate){
|
||||
monthData2.push(key)
|
||||
powerMonth2.push(val.rate[key])
|
||||
}
|
||||
ProductionOption.option.xAxis.data=[]
|
||||
ProductionOption.option.series=[]
|
||||
ProductionOption.option.xAxis.data=monthData2.reverse()
|
||||
ProductionOption.option.series.push({
|
||||
data: powerMonth2.reverse(),
|
||||
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:'30%',
|
||||
label: {
|
||||
show: true,
|
||||
color:'#fff',
|
||||
formatter: function(params){
|
||||
console.log(params);
|
||||
return params.value.toLocaleString()
|
||||
},
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
// Productionref.value.changeData(ProductionOption.option)
|
||||
Productionref.value.changeData(ProductionOption.option)
|
||||
// pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\machiningView\index.vue
|
||||
* @FilePath: \gitscreenFront\src\views\PaintShopView\machiningView\index.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-04-11 13:50:05
|
||||
@ -27,21 +27,21 @@
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<top
|
||||
:width="size.oWidth * 16"
|
||||
:width="size.oWidth * 24"
|
||||
:height="size.oHeight"
|
||||
ref="topref"
|
||||
></top>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<bottom
|
||||
:width="size.oWidth * 16"
|
||||
:width="size.oWidth * 24"
|
||||
:height="size.oHeight * 2"
|
||||
ref="bottomref"
|
||||
></bottom>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div>
|
||||
<!-- <div>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<right
|
||||
@ -51,7 +51,7 @@
|
||||
></right>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -74,7 +74,7 @@ let Acontent = ref();
|
||||
let time = ref(null);
|
||||
let topref = ref();
|
||||
let bottomref = ref();
|
||||
let rightref = ref();
|
||||
// let rightref = ref();
|
||||
let size = reactive({
|
||||
oWidth: 0,
|
||||
oHeight: 0,
|
||||
@ -90,7 +90,7 @@ async function getSensorByDeptfun() {
|
||||
if (result.code == 200) {
|
||||
topref.value.setcontentData(result.data);
|
||||
bottomref.value.setcontentData(result.data);
|
||||
rightref.value.setcontentData(result.data);
|
||||
// rightref.value.setcontentData(result.data);
|
||||
}
|
||||
}
|
||||
function getWebsocket(val) {
|
||||
@ -101,7 +101,7 @@ function getWebsocket(val) {
|
||||
// store.changenoise(data.msg);
|
||||
topref.value.setcontentData(data.msg);
|
||||
bottomref.value.setcontentData(data.msg);
|
||||
rightref.value.setcontentData(data.msg);
|
||||
// rightref.value.setcontentData(data.msg);
|
||||
}
|
||||
} catch (err) {}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\machiningView\top.vue
|
||||
* @FilePath: \gitscreenFront\src\views\PaintShopView\machiningView\top.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 14:43:28
|
||||
@ -15,11 +15,8 @@
|
||||
<!-- <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> -->
|
||||
<verticalNum ref="verticalNum6" :title="'甲醛监测'"></verticalNum>
|
||||
<verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum>
|
||||
<div>
|
||||
<border3 ref="borderref">
|
||||
<template v-slot>
|
||||
@ -32,6 +29,13 @@
|
||||
: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>
|
||||
@ -39,7 +43,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
|
||||
import border6 from "@/components/borderBox/border6.vue";
|
||||
import border3 from "@/components/borderBox/border3.vue";
|
||||
import { calcWH } from "@/components/ts/selfAdaption";
|
||||
@ -47,7 +51,8 @@ import { calcWH } from "@/components/ts/selfAdaption";
|
||||
import { getSensorByDept} from "@/http/PaintShopView/index";
|
||||
import humidity from "./chart/humidity.vue";
|
||||
import chart from "@/components/assembly/chart2.vue";
|
||||
import verticalNum from "./chart/verticalNum.vue";
|
||||
import verticalNum from "../components/verticalNum.vue";
|
||||
import pm from "../components/pm.vue"
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useEnergyConsumeStore } from "@/store/module/energyConsume";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@ -58,12 +63,15 @@ const router = useRouter();
|
||||
// let verticalNum3 = ref();
|
||||
let verticalNum4 = ref();
|
||||
// let verticalNum5 = ref();
|
||||
// let verticalNum6 = ref();
|
||||
// let verticalNum7 = ref();
|
||||
let verticalNum6 = ref();
|
||||
let verticalNum7 = ref();
|
||||
let borderrefPM = ref()
|
||||
let pmref = ref()
|
||||
let borderref=ref()
|
||||
let humidityref=ref()
|
||||
let ductref=ref()
|
||||
|
||||
let temp_humi_timer = null
|
||||
let pm_timer = null
|
||||
let props = defineProps<{
|
||||
width: number;
|
||||
height: number;
|
||||
@ -84,18 +92,20 @@ function reset(val: any) {
|
||||
//重置盒子尺寸
|
||||
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*8-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*3-20,a.oHeight-20)
|
||||
// verticalNum7.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
|
||||
humidityref.value.setchartWH(a.oWidth*8-40,a.oHeight-40)
|
||||
ductref.value.setchartWH(a.oWidth*8-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-40,a.oHeight-40)
|
||||
ductref.value.setchartWH(a.oWidth*4-20, a.oHeight-20);
|
||||
pmref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 40)
|
||||
};
|
||||
let ductOption = reactive({
|
||||
title: "",
|
||||
@ -257,14 +267,37 @@ let ductOption = reactive({
|
||||
|
||||
// }
|
||||
// }
|
||||
let pm_index = 0
|
||||
let temp_humi_index = 0
|
||||
|
||||
function setcontentData(val){
|
||||
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(val.noise,'icon-shengyin',120,"dB")
|
||||
verticalNum4.value.setData(noise,'icon-shengyin',120,"dB")
|
||||
// verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
|
||||
// verticalNum6.value.setData(val.TVOC_CH2O.CH2O,'icon-app_icons--',5,"mg/m3")
|
||||
// verticalNum7.value.setData(val.TVOC_CH2O.TVOC,'icon-TVOC-Outlined',5,"PPM")
|
||||
verticalNum6.value.setData(CH2O,'icon-app_icons--',5,"mg/m3")
|
||||
verticalNum7.value.setData(TVOC,'icon-TVOC-Outlined',5,"PPM")
|
||||
// console.log(pmref.value);
|
||||
humidityref.value.setData({h:val.temp_humi.huim,c:val.temp_humi.temp})
|
||||
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){
|
||||
@ -309,7 +342,16 @@ let ductOption = reactive({
|
||||
// },
|
||||
// },
|
||||
// })
|
||||
|
||||
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}}
|
||||
@ -317,6 +359,10 @@ onMounted(() => {
|
||||
|
||||
|
||||
});
|
||||
onUnmounted(()=>{
|
||||
clearInterval(temp_humi_timer)
|
||||
clearInterval(pm_timer)
|
||||
})
|
||||
defineExpose({
|
||||
setcontentData,
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user