This commit is contained in:
hzz 2023-05-19 17:55:03 +08:00
commit f93821e318
13 changed files with 208 additions and 190 deletions

View File

@ -1,5 +1,5 @@
/* /*
* @FilePath: \wwwd:\code\screenFront\src\store\moduleSocket.ts * @FilePath: \screenFront\src\store\moduleSocket.ts
* @Author: * @Author:
* @文件版本: V1.0.0 * @文件版本: V1.0.0
* @Date: 2023-02-06 15:58:13 * @Date: 2023-02-06 15:58:13
@ -341,6 +341,7 @@ export const useSocketStore = defineStore(Names.socket, {
this.newVerticalNum[pIndex].value[cIndex].time = null this.newVerticalNum[pIndex].value[cIndex].time = null
} }
this.newVerticalNum[pIndex].value[cIndex].val = val.data.val this.newVerticalNum[pIndex].value[cIndex].val = val.data.val
this.newVerticalNum[pIndex].value[cIndex].status = true
} }
} }
} }

View File

@ -253,16 +253,16 @@ let ductOption = reactive({
let temp_humi_index = 0 let temp_humi_index = 0
function setcontentData(val) { function setcontentData(val) {
let CH2O = val.TVOC_CH2O.map((item) => { let CH2O = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.CH2O }; return { name: item.name, val: item.CH2O,status:item.status };
}); });
let TVOC = val.TVOC_CH2O.map((item) => { let TVOC = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.TVOC }; return { name: item.name, val: item.TVOC,status:item.status };
}); });
let Smoke = val.Smoke.map((item) => { let Smoke = val.Smoke.map((item) => {
return { name: item.name, val: item.data }; return { name: item.name, val: item.data,status:item.status };
}); });
let noise = val.noise.map((item) => { let noise = val.noise.map((item) => {
return { name: item.name, val: item.data }; return { name: item.name, val: item.data,status:item.status };
}); });
verticalNum3.value.setData(val.FIRE, 'icon-ranqi', 0, "") verticalNum3.value.setData(val.FIRE, 'icon-ranqi', 0, "")
verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB") verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB")

View File

@ -16,11 +16,12 @@
<h5 v-if="value.unit">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5> <h5 v-if="value.unit">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
<h5 v-else>&nbsp; </h5> <h5 v-else>&nbsp; </h5>
<!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> --> <!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
<i :class="+item.val > +value.quota <!-- <i :class="+item.val > +value.quota
? 'iconfont ' + value.iconname + ' icon-red iconbig-size' ? 'iconfont ' + value.iconname + ' icon-red iconbig-size'
: 'iconfont ' + value.iconname + ' icon-blue iconbig-size' : 'iconfont ' + value.iconname + ' icon-blue iconbig-size'
"></i> "></i> -->
<p class="unit" v-if="value.unit"> <i :class="['iconfont','iconbig-size',icon,iconcolor]"></i>
<p class="unit" v-if="value.unit&&item.status">
<p class="num">{{ item.val }}&nbsp;</p> <p class="num">{{ item.val }}&nbsp;</p>
<span>{{ value.unit }}</span> <span>{{ value.unit }}</span>
</p> </p>
@ -48,8 +49,22 @@ let props = defineProps<{
}>(); }>();
let i = ref(0) let i = ref(0)
let item = computed(() => { let item = computed(() => {
console.log(value.data[i.value]);
return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0,"status":false};
});
let icon = computed(() => {
return value.iconname
});
let iconcolor = computed(() => {
console.log(value.data[i.value]);
//
if(value.data[i.value]){
return value.data[i.value].status? +value.data[i.value].val > +value.quota ? "icon-red" : "icon-blue":"icon-grey";
}else{
return "icon-grey"
}
return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0 };
}); });
let keynum = ref(0); let keynum = ref(0);
const value = reactive<any>({ const value = reactive<any>({
@ -91,6 +106,7 @@ const setData = (
return { return {
name: item.name.split("车间")[1] || item.name, name: item.name.split("车间")[1] || item.name,
val: item.val, val: item.val,
status:item.status
}; };
}); });
value.data = temp_data; value.data = temp_data;
@ -164,7 +180,12 @@ defineExpose({
/* position: relative; */ /* position: relative; */
/* top: -15px; */ /* top: -15px; */
} }
.icon-grey {
color: rgb(167, 166, 189);
font-size: 100px;
/* position: relative; */
/* top: -15px; */
}
.iconsmall-size { .iconsmall-size {
font-size: 20px; font-size: 20px;
} }

View File

@ -274,13 +274,13 @@ let temp_humi_index = 0
console.log(val); console.log(val);
let CH2O = val.TVOC_CH2O.map((item) => { let CH2O = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.CH2O }; return { name: item.name, val: item.CH2O,status:item.status };
}); });
let TVOC = val.TVOC_CH2O.map((item) => { let TVOC = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.TVOC }; return { name: item.name, val: item.TVOC,status:item.status };
}); });
let noise = val.noise.map((item) => { let noise = val.noise.map((item) => {
return { name: item.name, val: item.data }; return { name: item.name, val: item.data,status:item.status };
}); });
// verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"") // verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
verticalNum4.value.setData(noise,'icon-shengyin',120,"dB") verticalNum4.value.setData(noise,'icon-shengyin',120,"dB")

View File

@ -272,13 +272,13 @@ let temp_humi_index = 0
function setcontentData(val){ function setcontentData(val){
let CH2O = val.TVOC_CH2O.map((item) => { let CH2O = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.CH2O }; return { name: item.name, val: item.CH2O,status:item.status };
}); });
let TVOC = val.TVOC_CH2O.map((item) => { let TVOC = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.TVOC }; return { name: item.name, val: item.TVOC,status:item.status };
}); });
let noise = val.noise.map((item) => { let noise = val.noise.map((item) => {
return { name: item.name, val: item.data }; return { name: item.name, val: item.data,status:item.status };
}); });
// verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"") // verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
verticalNum4.value.setData(noise,'icon-shengyin',120,"dB") verticalNum4.value.setData(noise,'icon-shengyin',120,"dB")

View File

@ -1,5 +1,5 @@
<!-- <!--
* @FilePath: \screenFront\src\views\PaintShopView\stuffView\top.vue * @FilePath: \gitscreenFront\src\views\PaintShopView\stuffView\top.vue
* @Author: 王路平 * @Author: 王路平
* @文件版本: V1.0.0 * @文件版本: V1.0.0
* @Date: 2023-02-13 14:43:28 * @Date: 2023-02-13 14:43:28
@ -272,13 +272,13 @@ function setcontentData(val) {
clearInterval(temp_humi_timer) clearInterval(temp_humi_timer)
clearInterval(pm_timer) clearInterval(pm_timer)
let CH2O = val.TVOC_CH2O.map((item) => { let CH2O = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.CH2O }; return { name: item.name, val: item.CH2O,status:item.status };
}); });
let TVOC = val.TVOC_CH2O.map((item) => { let TVOC = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.TVOC }; return { name: item.name, val: item.TVOC,status:item.status };
}); });
let noise = val.noise.map((item) => { let noise = val.noise.map((item) => {
return { name: item.name, val: item.data }; return { name: item.name, val: item.data,status:item.status };
}); });
// verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"") // verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB") verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB")

View File

@ -1,5 +1,5 @@
<!-- <!--
* @FilePath: \screenFront\src\views\PaintShopView\weldView\top.vue * @FilePath: \gitscreenFront\src\views\PaintShopView\weldView\top.vue
* @Author: 王路平 * @Author: 王路平
* @文件版本: V1.0.0 * @文件版本: V1.0.0
* @Date: 2023-02-13 14:43:28 * @Date: 2023-02-13 14:43:28
@ -271,13 +271,13 @@ function setcontentData(val) {
clearInterval(pm_timer) clearInterval(pm_timer)
let CH2O = val.TVOC_CH2O.map((item) => { let CH2O = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.CH2O }; return { name: item.name, val: item.CH2O,status:item.status };
}); });
let TVOC = val.TVOC_CH2O.map((item) => { let TVOC = val.TVOC_CH2O.map((item) => {
return { name: item.name, val: item.TVOC }; return { name: item.name, val: item.TVOC,status:item.status };
}); });
let noise = val.noise.map((item) => { let noise = val.noise.map((item) => {
return { name: item.name, val: item.data }; return { name: item.name, val: item.data,status:item.status };
}); });
// verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"") // verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB") verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB")

View File

@ -1,5 +1,5 @@
<!-- <!--
* @FilePath: \wwwd:\code\screenFront\src\views\electronicControl\index.vue * @FilePath: \screenFront\src\views\electronicControl\index.vue
* @Author: 王路平 * @Author: 王路平
* @文件版本: V1.0.0 * @文件版本: V1.0.0
* @Date: 2023-04-11 13:50:05 * @Date: 2023-04-11 13:50:05
@ -107,24 +107,10 @@ function checkImgExists(imgurl) {
}) })
} }
onMounted(() => { onMounted(() => {
// deviceCountsSecondaryOfOutPlantDatafun()
// deviceTypeCountsSecondaryOfOutPlantDatafun()
// deviceStatusCountsSecondaryOfOutPlantDatafun()
// secondaryOutPlantDatafun()
getdata() getdata()
let contentBox = Acontent.value let contentBox = Acontent.value
// let Timedombox=Timedom.value
window.document.title = t('messages.electronicControl') window.document.title = t('messages.electronicControl')
WH(contentBox) WH(contentBox)
// window.addEventListener('resize', () => {
// if (time.value) {
// clearTimeout(time.value)
// time.value = null
// }
// time.value = setTimeout(() => {
// WH(contentBox)
// }, 1000);
// })
}) })
onUnmounted(() => { onUnmounted(() => {
clearTimeout(time) clearTimeout(time)

View File

@ -1,5 +1,5 @@
<!-- <!--
* @FilePath: \gitscreenFront\src\views\electronicControlAmbient\chart\humidity.vue * @FilePath: \screenFront\src\views\electronicControlAmbient\chart\humidity.vue
* @Author: 王路平 * @Author: 王路平
* @文件版本: V1.0.0 * @文件版本: V1.0.0
* @Date: 2023-02-10 13:27:36 * @Date: 2023-02-10 13:27:36
@ -47,7 +47,7 @@ const setData = (value: any) => {
color: "#fff", color: "#fff",
fontSize: 20, fontSize: 20,
}, },
top:5 top: 5
}, },
grid: { grid: {
// //
@ -62,9 +62,9 @@ const setData = (value: any) => {
center: ["50%", "85%"], center: ["50%", "85%"],
startAngle: 190, startAngle: 190,
endAngle: -10, endAngle: -10,
min: 0,
max: 100,
radius: "50%", radius: "50%",
min: -30,
max: 70,
splitNumber: 10, splitNumber: 10,
progress: { progress: {
show: false, show: false,
@ -80,15 +80,15 @@ const setData = (value: any) => {
lineStyle: { lineStyle: {
width: 10, width: 10,
color: [ color: [
[0.15, '#FF6E76'], [0.4, '#FF6E76'],
[0.75, '#7CFFB2'], [0.7, '#7CFFB2'],
[1, '#FF6E76'] [1, '#1089E7']
] ]
} }
}, },
//线 //线
axisTick: { axisTick: {
show:false, show: false,
distance: -5, distance: -5,
splitNumber: 5, splitNumber: 5,
lineStyle: { lineStyle: {
@ -125,12 +125,12 @@ const setData = (value: any) => {
offsetCenter: [0, '25%'], offsetCenter: [0, '25%'],
fontSize: 15, fontSize: 15,
// fontWeight: 'bolder', // fontWeight: 'bolder',
formatter: '{value} °C', formatter: '{value} %RH',
color: 'inherit' color: 'inherit'
}, },
data: [ data: [
{ {
value: value.c value: value.h
} }
] ]
}, },
@ -139,8 +139,8 @@ const setData = (value: any) => {
center: ["50%", "50%"], center: ["50%", "50%"],
startAngle: 200, startAngle: 200,
endAngle: -20, endAngle: -20,
min: 0, min: -30,
max: 100, max: 70,
progress: { progress: {
show: false, show: false,
width: 5 width: 5
@ -155,8 +155,8 @@ const setData = (value: any) => {
lineStyle: { lineStyle: {
width: 10, width: 10,
color: [ color: [
[0.15, '#FF6E76'], [0.46, '#1089E7'],
[0.75, '#7CFFB2'], [0.58, '#7CFFB2'],
[1, '#FF6E76'] [1, '#FF6E76']
] ]
} }
@ -194,12 +194,12 @@ const setData = (value: any) => {
valueAnimation: true, valueAnimation: true,
offsetCenter: [0, '15%'], offsetCenter: [0, '15%'],
fontSize: 20, fontSize: 20,
formatter: '{value} %RH', formatter: '{value} °C',
color: 'inherit' color: 'inherit'
}, },
data: [ data: [
{ {
value: value.h value: value.c
} }
] ]
}, },
@ -244,7 +244,7 @@ defineExpose({
</script> </script>
<style scope> <style scope>
.content-small{ .content-small {
margin-right: 3px; margin-right: 3px;
} }
</style> </style>

View File

@ -1,5 +1,5 @@
<!-- <!--
* @FilePath: \gitscreenFront\src\views\electronicControlAmbient\chart\verticalNum.vue * @FilePath: \screenFront\src\views\electronicControlAmbient\chart\verticalNum.vue
* @Author: 王路平 * @Author: 王路平
* @文件版本: V1.0.0 * @文件版本: V1.0.0
* @Date: 2023-02-13 08:22:35 * @Date: 2023-02-13 08:22:35
@ -16,11 +16,8 @@
<h5 v-if="value.unit">{{ <h5 v-if="value.unit">{{
`${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5> `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
<!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> --> <!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
<i :class="+item.val > +value.quota <i :class="['iconfont',value.iconname,iconColor,'iconbig-size']"></i>
? 'iconfont ' + value.iconname + ' icon-red iconbig-size' <p class="unit" v-if="value.unit&&item.status">
: 'iconfont ' + value.iconname + ' icon-blue iconbig-size'
"></i>
<p class="unit" v-if="value.unit">
<p class="num">{{ item.val }}</p> <p class="num">{{ item.val }}</p>
<span>{{ value.unit }}</span> <span>{{ value.unit }}</span>
</p> </p>
@ -44,8 +41,11 @@ let props = defineProps<{
}>(); }>();
let i = ref(0) let i = ref(0)
let item = computed(() => { let item = computed(() => {
return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0,status:false };
});
return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0 }; let iconColor = computed(() => {
return value.data[i.value]?.status?(value.data[i.value].val > value.quota ? "icon-red" : "icon-blue"):"icon-grey";
}); });
let keynum = ref(0); let keynum = ref(0);
const value = reactive<any>({ const value = reactive<any>({
@ -139,8 +139,11 @@ p {
color: #fff; color: #fff;
} }
.icon-red { .iconbig-size {
font-size: 100px; font-size: 100px;
}
.icon-red {
color: #E43961; color: #E43961;
animation: redstart 2s infinite; animation: redstart 2s infinite;
/* position: relative; */ /* position: relative; */
@ -148,11 +151,15 @@ p {
} }
.icon-blue { .icon-blue {
font-size: 100px;
color: #20AEC5; color: #20AEC5;
/* position: relative; */ /* position: relative; */
/* top: -15px; */ /* top: -15px; */
} }
.icon-grey {
color: rgb(167, 166, 189);
/* position: relative; */
/* top: -15px; */
}
.iconsmall-size { .iconsmall-size {
font-size: 20px; font-size: 20px;

View File

@ -1,5 +1,5 @@
<!-- <!--
* @FilePath: \gitscreenFront\src\views\electronicControlAmbient\index.vue * @FilePath: \screenFront\src\views\electronicControlAmbient\index.vue
* @Author: 王路平 * @Author: 王路平
* @文件版本: V1.0.0 * @文件版本: V1.0.0
* @Date: 2023-04-11 13:50:05 * @Date: 2023-04-11 13:50:05
@ -113,6 +113,7 @@ function getWebsocket(val) {
let data = JSON.parse(val); let data = JSON.parse(val);
if (data.type == "electronicView") { if (data.type == "electronicView") {
// store.changenoise(data.msg); // store.changenoise(data.msg);
console.log(data.msg, "电控监测");
topref.value.setcontentData(data.msg); topref.value.setcontentData(data.msg);
bottomref.value.setcontentData(data.msg); bottomref.value.setcontentData(data.msg);

View File

@ -1,5 +1,5 @@
<!-- <!--
* @FilePath: \gitscreenFront\src\views\electronicControlAmbient\top.vue * @FilePath: \screenFront\src\views\electronicControlAmbient\top.vue
* @Author: 王路平 * @Author: 王路平
* @文件版本: V1.0.0 * @文件版本: V1.0.0
* @Date: 2023-02-13 14:43:28 * @Date: 2023-02-13 14:43:28
@ -139,7 +139,7 @@ let ductOption = reactive({
lineStyle: { lineStyle: {
width: 8, width: 8,
color: [ color: [
[0.6, "#7CFFB2"], [0.4, "#7CFFB2"],
[1, "#FF6E76"], [1, "#FF6E76"],
], ],
}, },
@ -200,7 +200,7 @@ let ductOption = reactive({
lineStyle: { lineStyle: {
width: 10, width: 10,
color: [ color: [
[0.6, "#7CFFB2"], [0.4, "#7CFFB2"],
[1, "#FF6E76"], [1, "#FF6E76"],
], ],
}, },
@ -261,8 +261,10 @@ let ductOption = reactive({
let temp_humi_index = 0 let temp_humi_index = 0
function setcontentData(val){ function setcontentData(val){
let noise = val.noise.map((item) => { let noise = val.noise.map((item) => {
return { name: item.name, val: item.data }; return { name: item.name, val: item.data,status:item.status||false };
}); });
console.log(noise);
// verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"") // verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
verticalNum4.value.setData(noise,'icon-shengyin',120,"dB") verticalNum4.value.setData(noise,'icon-shengyin',120,"dB")
// verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"") // verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")

View File

@ -66,7 +66,7 @@ let item:any = computed(() => {
return props.value[i.value]; return props.value[i.value];
}); });
let iconcolor = computed(() => { let iconcolor = computed(() => {
return props.value[i.value].status?item.val > props.limit ? "icon-red" : "icon-blue":"icon-grey"; return props.value[i.value].status?props.value[i.value].val > props.limit ? "icon-red" : "icon-blue":"icon-grey";
}); });
let props = defineProps<{ let props = defineProps<{
title: string; title: string;