hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://codeup.aliyun.com/645deca397d94d909e439238/iotplatform_sourcecode/screenFront into dismap

Browse Source
This commit is contained in:
hzz 2023-05-22 10:22:03 +08:00
commit 8c49fc4a37
3 changed files with 199 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
src/views/PaintShopView/components/verticalNum.vue
View File

@ -1,5 +1,5 @@
<!-- <!--
* @FilePath: \gitscreenFront\src\views\PaintShopView\components\verticalNum.vue * @FilePath: \screenFront\src\views\PaintShopView\components\verticalNum.vue
* @Author: 王路平 * @Author: 王路平
* @文件版本: V1.0.0 * @文件版本: V1.0.0
* @Date: 2023-02-13 08:22:35 * @Date: 2023-02-13 08:22:35
@ -20,14 +20,14 @@
? '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> -->
<i :class="['iconfont','iconbig-size',icon,iconcolor]"></i> <i :class="['iconfont', 'iconbig-size', icon, iconcolor]"></i>
<p class="unit" v-if="value.unit&&item.status"> <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>
<p class="unit" v-else> <p class="unit" v-else>
<p class="num">&nbsp;</p> <p class="num">&nbsp;</p>
<span>&nbsp;</span> <span>&nbsp;</span>
</p> </p>
</div> </div>
@ -50,8 +50,8 @@ let props = defineProps<{
let i = ref(0) let i = ref(0)
let item = computed(() => { let item = computed(() => {
console.log(value.data[i.value]); 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(() => { let icon = computed(() => {
return value.iconname return value.iconname
@ -59,12 +59,12 @@ let icon = computed(() => {
let iconcolor = computed(() => { let iconcolor = computed(() => {
console.log(value.data[i.value]); console.log(value.data[i.value]);
//开始进入渲染是没有获取到该数据则需要判断 如果没有则返回空 //开始进入渲染是没有获取到该数据则需要判断 如果没有则返回空
if(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"; return value.data[i.value].status ? +value.data[i.value].val > +value.quota ? "icon-red" : "icon-blue" : "icon-grey";
}else{ } else {
return "icon-grey" return "icon-grey"
} }
}); });
let keynum = ref(0); let keynum = ref(0);
const value = reactive<any>({ const value = reactive<any>({
@ -106,7 +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 status: item.status
}; };
}); });
value.data = temp_data; value.data = temp_data;
@ -135,22 +135,22 @@ defineExpose({
.box { .box {
height: 50%; height: 50%;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
} }
.box>h5 { .box>h5 {
font-size: 15px; font-size: 15px;
/* margin-bottom: 20px; */ /* margin-bottom: 20px; */
margin-top: 20px; margin-top: 20px;
} }
/* .contentbox{ /* .contentbox{
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
@ -158,85 +158,87 @@ defineExpose({
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
} */ } */
h2 { h2 {
color: #fff; color: #fff;
} }
p { p {
color: #fff; color: #fff;
} }
.icon-red { .icon-red {
font-size: 100px; font-size: 100px;
color: #E43961; color: #E43961;
animation: redstart 2s infinite; animation: redstart 2s infinite;
/* position: relative; */ /* position: relative; */
/* top: -15px; */ /* top: -15px; */
} }
.icon-blue { .icon-blue {
font-size: 100px; font-size: 100px;
color: #20AEC5; color: #20AEC5;
/* position: relative; */ /* position: relative; */
/* top: -15px; */ /* top: -15px; */
} }
.icon-grey {
.icon-grey {
color: rgb(167, 166, 189); color: rgb(167, 166, 189);
font-size: 100px; font-size: 100px;
/* position: relative; */ /* position: relative; */
/* top: -15px; */ /* top: -15px; */
} }
.iconsmall-size {
font-size: 20px; .iconsmall-size {
} font-size: 20px;
}
.num {
font-size: 16px; .num {
} font-size: 16px;
}
.unit {
display: flex; .unit {
justify-content: center; display: flex;
align-items: center; justify-content: center;
vertical-align: top; align-items: center;
font-size: 16px; vertical-align: top;
height: 5; font-size: 16px;
width: 100px; height: 5;
} width: 100px;
}
.box>h2 {
font-size: 20px; .box>h2 {
position: absolute; font-size: 20px;
position: absolute;
top: 15px; top: 15px;
left:20px; left: 20px;
} }
.icontip { .icontip {
display: flex; display: flex;
margin-top: -60px; margin-top: -60px;
width: 100px; width: 100px;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 60px; height: 60px;
} }
.icontipBox li { .icontipBox li {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
margin-bottom: 5px; margin-bottom: 5px;
} }
.icontipBox li p:nth-child(1) { .icontipBox li p:nth-child(1) {
width: 40%; width: 40%;
text-align: left; text-align: left;
} }
.icontipBox li p:nth-child(2) { .icontipBox li p:nth-child(2) {
flex: 1; flex: 1;
} }
@keyframes redstart { @keyframes redstart {
0% {} 0% {}

150
src/views/electronicControlAmbient/top.vue
View File

@ -22,16 +22,12 @@
<verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum> --> <verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum> -->
<div> <div>
<border3 ref="borderref"> <border3 ref="borderref">
<template v-slot> <template v-slot>
<humidity name="Electriccontrol" :title="t('messages.TemperatureHumidity')" ref="humidityref"></humidity> <humidity name="Electriccontrol" :title="t('messages.TemperatureHumidity')" ref="humidityref"></humidity>
</template> </template>
</border3> </border3>
</div> </div>
<chart <chart :title="ductOption.title" :option="ductOption.option" ref="ductref"></chart>
:title="ductOption.title"
:option="ductOption.option"
ref="ductref"
></chart>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -44,14 +40,14 @@ import border6 from "@/components/borderBox/border6.vue";
import border3 from "@/components/borderBox/border3.vue"; import border3 from "@/components/borderBox/border3.vue";
import { calcWH } from "@/components/ts/selfAdaption"; import { calcWH } from "@/components/ts/selfAdaption";
// import {getPowerData} from '@/http/environment' // import {getPowerData} from '@/http/environment'
import { getSensorByDept} from "@/http/PaintShopView/index"; import { getSensorByDept } from "@/http/PaintShopView/index";
import humidity from "./chart/humidity.vue"; import humidity from "./chart/humidity.vue";
import chart from "@/components/assembly/chart2.vue"; import chart from "@/components/assembly/chart2.vue";
import verticalNum from "./chart/verticalNum.vue"; import verticalNum from "./chart/verticalNum.vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useEnergyConsumeStore } from "@/store/module/energyConsume"; import { useEnergyConsumeStore } from "@/store/module/energyConsume";
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
let {t} = useI18n(); let { t } = useI18n();
const store = useEnergyConsumeStore(); const store = useEnergyConsumeStore();
const router = useRouter(); const router = useRouter();
@ -60,9 +56,9 @@ let verticalNum4 = ref();
// let verticalNum5 = ref(); // let verticalNum5 = ref();
// let verticalNum6 = ref(); // let verticalNum6 = ref();
// let verticalNum7 = ref(); // let verticalNum7 = ref();
let borderref=ref() let borderref = ref()
let humidityref=ref() let humidityref = ref()
let ductref=ref() let ductref = ref()
let temp_humi_timer = null let temp_humi_timer = null
let props = defineProps<{ let props = defineProps<{
@ -91,12 +87,12 @@ const powerBox = (width: any, height: any) => {
let a = calcWH(height, width, 1, 24, 0); let a = calcWH(height, width, 1, 24, 0);
//修改高度 //修改高度
// verticalNum3.value.setchartWH(a.oWidth*3-20,a.oHeight-20) // 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) // verticalNum5.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
// verticalNum6.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) // verticalNum7.value.setchartWH(a.oWidth*3-20,a.oHeight-20)
humidityref.value.setchartWH(a.oWidth*8-40,a.oHeight-40) humidityref.value.setchartWH(a.oWidth * 8 - 40, a.oHeight - 40)
ductref.value.setchartWH(a.oWidth*8-20, a.oHeight-20); ductref.value.setchartWH(a.oWidth * 8 - 20, a.oHeight - 20);
}; };
let ductOption = reactive({ let ductOption = reactive({
title: "", title: "",
@ -255,23 +251,23 @@ let ductOption = reactive({
// let result: any = await getSensorByDept({ depts: 6 }); // let result: any = await getSensorByDept({ depts: 6 });
// if (result.code == 200) { // if (result.code == 200) {
// } // }
// } // }
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,status:item.status||false }; return { name: item.name, val: item.data, status: item.status || false };
}); });
console.log(noise); 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,"")
// verticalNum6.value.setData(val.TVOC_CH2O.CH2O,'icon-app_icons--',5,"mg/m3") // 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") // verticalNum7.value.setData(val.TVOC_CH2O.TVOC,'icon-TVOC-Outlined',5,"PPM")
// console.log(pmref.value); // console.log(pmref.value);
humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].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) { if (val.temp_humi.length > 1) {
temp_humi_timer = setInterval(() => { temp_humi_timer = setInterval(() => {
humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp }) 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) }, 3000)
} }
let type=[] let type = []
let valueduct=[] let valueduct = []
for(let key in val.water_pressure){ for (let key in val.water_pressure) {
if(key=='精加车间水暖管道压力43（进水）'){ if (key == '电控水暖管道压力(进水)24') {
// type.push('进水') // type.push('进水')
ductOption.option.series[0].data[0].value=val.water_pressure[key] ductOption.option.series[0].data[0].value = val.water_pressure[key]
}else{ } else {
// type.push('回水') // type.push('回水')
ductOption.option.series[1].data[0].value=val.water_pressure[key] ductOption.option.series[1].data[0].value = val.water_pressure[key]
}
// valueduct.push(val.water_pressure[key])
} }
// ductOption.option.yAxis.data=[]
// ductOption.option.series=[] // valueduct.push(val.water_pressure[key])
// 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}} // 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(() => { onMounted(() => {
}); });
onUnmounted(()=>{ onUnmounted(() => {
clearInterval(temp_humi_timer) clearInterval(temp_humi_timer)
}) })
defineExpose({ defineExpose({

29
src/views/realtimeSecurityJixiefenchang/content/chart/verticalNum.vue
View File

@ -1,5 +1,5 @@
<!-- <!--
* @FilePath: \wwwd:\code\screenFront-branches\src\views\realtimeSecurity\content\chart\verticalNum.vue * @FilePath: \screenFront\src\views\realtimeSecurityJixiefenchang\content\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
@ -13,7 +13,7 @@
<template v-slot> <template v-slot>
<div class="box" ref="classBox1"> <div class="box" ref="classBox1">
<div class="icontip"> <div class="icontip">
<div v-for="items in value.data" style="margin: auto 5px;" v-show="+items.val > +value.quota"> <div v-for="items in value.data" style="margin: auto 5px;" v-show="(+items.val > +value.quota)&&item.status">
<el-popover placement="bottom" :width="250" trigger="hover" effect="dark" <el-popover placement="bottom" :width="250" trigger="hover" effect="dark"
:popper-style="{ 'background-color': 'rgba(0,0,0,.8)' }"> :popper-style="{ 'background-color': 'rgba(0,0,0,.8)' }">
<ul class="icontipBox"> <ul class="icontipBox">
@ -49,11 +49,8 @@
</div> </div>
<!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> --> <!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
<h2>{{ item.name}}</h2> <h2>{{ item.name}}</h2>
<i :class="+item.val > +value.quota <i :class="['iconfont', 'iconbig-size', value.iconname, iconcolor]"></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>
@ -78,7 +75,17 @@ 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}; 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); let keynum = ref(0);
const value = reactive<any>({ const value = reactive<any>({
@ -169,6 +176,12 @@ p {
/* position: relative; */ /* position: relative; */
/* top: -15px; */ /* top: -15px; */
} }
.icon-grey {
color: rgb(167, 166, 189);
font-size: 140px;
/* position: relative; */
/* top: -15px; */
}
.icon-blue { .icon-blue {
font-size: 140px; font-size: 140px;
color: #20AEC5; color: #20AEC5;