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

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
@ -180,12 +180,14 @@ defineExpose({
/* 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 { .iconsmall-size {
font-size: 20px; font-size: 20px;
} }

View File

@ -27,11 +27,7 @@
</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>
@ -285,7 +281,7 @@ let temp_humi_index = 0
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 {

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;