From 9e1b84f941ca2a2f9f5d8cdcca42f1231bd01725 Mon Sep 17 00:00:00 2001 From: hzz Date: Mon, 22 May 2023 08:19:15 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=9C=BA=E6=A2=B0=E5=88=86?= =?UTF-8?q?=E5=8E=82=E7=8E=AF=E5=A2=83=20=E4=BC=A0=E6=84=9F=E5=99=A8?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=98=BE=E7=A4=BA=EF=BC=8C=E7=94=B5=E6=8E=A7?= =?UTF-8?q?=E5=88=86=E5=8E=82=E7=AE=A1=E9=81=93=E5=8E=8B=E5=8A=9B=E6=98=BE?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PaintShopView/components/verticalNum.vue | 208 +++++++++--------- src/views/electronicControlAmbient/top.vue | 150 ++++++------- .../content/chart/verticalNum.vue | 29 ++- 3 files changed, 199 insertions(+), 188 deletions(-) diff --git a/src/views/PaintShopView/components/verticalNum.vue b/src/views/PaintShopView/components/verticalNum.vue index e513e5d..f510a96 100644 --- a/src/views/PaintShopView/components/verticalNum.vue +++ b/src/views/PaintShopView/components/verticalNum.vue @@ -1,5 +1,5 @@ - -

-

{{ item.val }} 

- {{ value.unit }} + +

+

{{ item.val }} 

+ {{ value.unit }}

-

 

-   +

 

+  

@@ -50,8 +50,8 @@ let props = defineProps<{ let i = ref(0) let item = computed(() => { console.log(value.data[i.value]); - - 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, "status": false }; }); let icon = computed(() => { return value.iconname @@ -59,12 +59,12 @@ let icon = computed(() => { 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{ + 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" } - + }); let keynum = ref(0); const value = reactive({ @@ -106,7 +106,7 @@ const setData = ( return { name: item.name.split("车间")[1] || item.name, val: item.val, - status:item.status + status: item.status }; }); value.data = temp_data; @@ -135,22 +135,22 @@ defineExpose({ .box { - height: 50%; - width: 100%; - box-sizing: border-box; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - } - - .box>h5 { - font-size: 15px; - /* margin-bottom: 20px; */ - margin-top: 20px; - } - - /* .contentbox{ + height: 50%; + width: 100%; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; +} + +.box>h5 { + font-size: 15px; + /* margin-bottom: 20px; */ + margin-top: 20px; +} + +/* .contentbox{ height: 100%; width: 100%; display: flex; @@ -158,85 +158,87 @@ defineExpose({ justify-content: space-around; align-items: center; } */ - h2 { - color: #fff; - } - - p { - color: #fff; - } - - .icon-red { - font-size: 100px; - color: #E43961; - animation: redstart 2s infinite; - /* position: relative; */ - /* top: -15px; */ - } - - .icon-blue { - font-size: 100px; - color: #20AEC5; - /* position: relative; */ - /* top: -15px; */ - } - .icon-grey { +h2 { + color: #fff; +} + +p { + color: #fff; +} + +.icon-red { + font-size: 100px; + color: #E43961; + animation: redstart 2s infinite; + /* position: relative; */ + /* top: -15px; */ +} + +.icon-blue { + font-size: 100px; + color: #20AEC5; + /* position: relative; */ + /* top: -15px; */ +} + +.icon-grey { color: rgb(167, 166, 189); font-size: 100px; /* position: relative; */ /* top: -15px; */ } - .iconsmall-size { - font-size: 20px; - } - - .num { - font-size: 16px; - } - - .unit { - display: flex; - justify-content: center; - align-items: center; - vertical-align: top; - font-size: 16px; - height: 5; - width: 100px; - } - - .box>h2 { - font-size: 20px; - position: absolute; + +.iconsmall-size { + font-size: 20px; +} + +.num { + font-size: 16px; +} + +.unit { + display: flex; + justify-content: center; + align-items: center; + vertical-align: top; + font-size: 16px; + height: 5; + width: 100px; +} + +.box>h2 { + font-size: 20px; + position: absolute; top: 15px; - left:20px; - } - - - .icontip { - display: flex; - margin-top: -60px; - width: 100px; - flex-wrap: wrap; - align-items: center; - justify-content: center; - height: 60px; - } - - .icontipBox li { - display: flex; - align-items: center; - justify-content: flex-start; - margin-bottom: 5px; - } - - .icontipBox li p:nth-child(1) { - width: 40%; - text-align: left; - } - - .icontipBox li p:nth-child(2) { - flex: 1; - } + left: 20px; +} + + +.icontip { + display: flex; + margin-top: -60px; + width: 100px; + flex-wrap: wrap; + align-items: center; + justify-content: center; + height: 60px; +} + +.icontipBox li { + display: flex; + align-items: center; + justify-content: flex-start; + margin-bottom: 5px; +} + +.icontipBox li p:nth-child(1) { + width: 40%; + text-align: left; +} + +.icontipBox li p:nth-child(2) { + flex: 1; +} @keyframes redstart { 0% {} diff --git a/src/views/electronicControlAmbient/top.vue b/src/views/electronicControlAmbient/top.vue index 32ea53b..064e5fb 100644 --- a/src/views/electronicControlAmbient/top.vue +++ b/src/views/electronicControlAmbient/top.vue @@ -22,16 +22,12 @@ -->
- - + +
- + @@ -44,14 +40,14 @@ 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 { 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 { useRoute, useRouter } from "vue-router"; import { useEnergyConsumeStore } from "@/store/module/energyConsume"; import { useI18n } from 'vue-i18n' -let {t} = useI18n(); +let { t } = useI18n(); const store = useEnergyConsumeStore(); const router = useRouter(); @@ -60,9 +56,9 @@ let verticalNum4 = ref(); // let verticalNum5 = ref(); // let verticalNum6 = ref(); // let verticalNum7 = ref(); -let borderref=ref() -let humidityref=ref() -let ductref=ref() +let borderref = ref() +let humidityref = ref() +let ductref = ref() let temp_humi_timer = null let props = defineProps<{ @@ -91,12 +87,12 @@ 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 * 8 - 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); + humidityref.value.setchartWH(a.oWidth * 8 - 40, a.oHeight - 40) + ductref.value.setchartWH(a.oWidth * 8 - 20, a.oHeight - 20); }; let ductOption = reactive({ title: "", @@ -255,23 +251,23 @@ let ductOption = reactive({ // let result: any = await getSensorByDept({ depts: 6 }); // if (result.code == 200) { - + // } // } let temp_humi_index = 0 - function setcontentData(val){ - let noise = val.noise.map((item) => { - return { name: item.name, val: item.data,status:item.status||false }; +function setcontentData(val) { + let noise = val.noise.map((item) => { + return { name: item.name, val: item.data, status: item.status || false }; }); console.log(noise); - - // 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(val.TVOC_CH2O.CH2O,'icon-app_icons--',5,"mg/m3") - // verticalNum7.value.setData(val.TVOC_CH2O.TVOC,'icon-TVOC-Outlined',5,"PPM") - // console.log(pmref.value); - humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp }) + + // 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(val.TVOC_CH2O.CH2O,'icon-app_icons--',5,"mg/m3") + // verticalNum7.value.setData(val.TVOC_CH2O.TVOC,'icon-TVOC-Outlined',5,"PPM") + // console.log(pmref.value); + 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 }) @@ -282,59 +278,59 @@ let temp_humi_index = 0 }, 3000) } - let type=[] - let valueduct=[] - for(let key in val.water_pressure){ - if(key=='精加车间水暖管道压力43（进水）'){ - // 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]) + let type = [] + let valueduct = [] + for (let key in val.water_pressure) { + if (key == '电控水暖管道压力(进水)24') { + // 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] } - // 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, - // }, - // }, - // }) - - ductref.value.changeData(ductOption.option) + + // valueduct.push(val.water_pressure[key]) } -let Data={power:{"管道1":11,"管道2":22}} + // 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, + // }, + // }, + // }) + + ductref.value.changeData(ductOption.option) +} +let Data = { power: { "管道1": 11, "管道2": 22 } } onMounted(() => { - + }); -onUnmounted(()=>{ +onUnmounted(() => { clearInterval(temp_humi_timer) }) defineExpose({ diff --git a/src/views/realtimeSecurityJixiefenchang/content/chart/verticalNum.vue b/src/views/realtimeSecurityJixiefenchang/content/chart/verticalNum.vue index 3ead2c6..cc838b1 100644 --- a/src/views/realtimeSecurityJixiefenchang/content/chart/verticalNum.vue +++ b/src/views/realtimeSecurityJixiefenchang/content/chart/verticalNum.vue @@ -1,5 +1,5 @@

{{ item.name}}

- -

+ +

{{item.val}}

{{ value.unit }}

@@ -78,7 +75,17 @@ let props = defineProps<{ let i =ref(0) let item = computed(() => { - return value.data[i.value]||{"name":"","val":"0","type":"","field":"","ts":0}; + return value.data[i.value]||{"name":"","val":"0","type":"","field":"","ts":0,"status":false}; +}); +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" + } + }); let keynum = ref(0); const value = reactive({ @@ -169,6 +176,12 @@ p { /* position: relative; */ /* top: -15px; */ } +.icon-grey { + color: rgb(167, 166, 189); + font-size: 140px; + /* position: relative; */ + /* top: -15px; */ +} .icon-blue { font-size: 140px; color: #20AEC5;