1.机械分厂温湿度图例修改
2.电控库房图例修改 3.机械分厂环境修改
This commit is contained in:
parent
7a793f9f86
commit
d208018dbf
@ -1,5 +1,5 @@
|
|||||||
<!--
|
<!--
|
||||||
* @FilePath: \screenFront\src\views\PaintShopView\components\humidity.vue
|
* @FilePath: \gitscreenFront\src\views\PaintShopView\components\humidity.vue
|
||||||
* @Author: 王路平
|
* @Author: 王路平
|
||||||
* @文件版本: V1.0.0
|
* @文件版本: V1.0.0
|
||||||
* @Date: 2023-02-10 13:27:36
|
* @Date: 2023-02-10 13:27:36
|
||||||
@ -59,10 +59,10 @@ const setData = (value: any) => {
|
|||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: "gauge",
|
type: "gauge",
|
||||||
center: ["50%", "90%"],
|
center: ["50%", "85%"],
|
||||||
startAngle: 190,
|
startAngle: 190,
|
||||||
endAngle: -10,
|
endAngle: -10,
|
||||||
radius: "30%",
|
radius: "50%",
|
||||||
min: -30,
|
min: -30,
|
||||||
max: 70,
|
max: 70,
|
||||||
splitNumber: 10,
|
splitNumber: 10,
|
||||||
@ -78,7 +78,7 @@ const setData = (value: any) => {
|
|||||||
//刻度轴宽
|
//刻度轴宽
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 5,
|
width: 10,
|
||||||
color: [
|
color: [
|
||||||
[0.15, '#FF6E76'],
|
[0.15, '#FF6E76'],
|
||||||
[0.75, '#7CFFB2'],
|
[0.75, '#7CFFB2'],
|
||||||
@ -98,7 +98,7 @@ const setData = (value: any) => {
|
|||||||
},
|
},
|
||||||
//刻度线
|
//刻度线
|
||||||
splitLine: {
|
splitLine: {
|
||||||
distance: -10,
|
distance: 5,
|
||||||
length: 3,
|
length: 3,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 3,
|
width: 3,
|
||||||
@ -107,9 +107,9 @@ const setData = (value: any) => {
|
|||||||
},
|
},
|
||||||
//表刻度值
|
//表刻度值
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
distance: -20,
|
distance: 15,
|
||||||
color: '#999',
|
color: '#999',
|
||||||
fontSize: 12
|
fontSize: 10
|
||||||
},
|
},
|
||||||
anchor: {
|
anchor: {
|
||||||
show: false
|
show: false
|
||||||
@ -122,8 +122,8 @@ const setData = (value: any) => {
|
|||||||
// width: '10%',
|
// width: '10%',
|
||||||
// lineHeight: 5,
|
// lineHeight: 5,
|
||||||
// borderRadius: 8,
|
// borderRadius: 8,
|
||||||
// offsetCenter: [0, '-15%'],
|
offsetCenter: [0, '25%'],
|
||||||
fontSize: 12,
|
fontSize: 15,
|
||||||
// fontWeight: 'bolder',
|
// fontWeight: 'bolder',
|
||||||
formatter: '{value} °C',
|
formatter: '{value} °C',
|
||||||
color: 'inherit'
|
color: 'inherit'
|
||||||
@ -136,7 +136,7 @@ const setData = (value: any) => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "gauge",
|
type: "gauge",
|
||||||
center: ["50%", "55%"],
|
center: ["50%", "50%"],
|
||||||
startAngle: 200,
|
startAngle: 200,
|
||||||
endAngle: -20,
|
endAngle: -20,
|
||||||
min: 0,
|
min: 0,
|
||||||
@ -180,9 +180,9 @@ const setData = (value: any) => {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
distance: -40,
|
distance: 15,
|
||||||
color: '#999',
|
color: '#999',
|
||||||
fontSize: 20
|
fontSize: 12
|
||||||
},
|
},
|
||||||
anchor: {
|
anchor: {
|
||||||
show: false
|
show: false
|
||||||
@ -193,7 +193,7 @@ const setData = (value: any) => {
|
|||||||
detail: {
|
detail: {
|
||||||
valueAnimation: true,
|
valueAnimation: true,
|
||||||
offsetCenter: [0, '15%'],
|
offsetCenter: [0, '15%'],
|
||||||
fontSize: 15,
|
fontSize: 20,
|
||||||
formatter: '{value} %RH',
|
formatter: '{value} %RH',
|
||||||
color: 'inherit'
|
color: 'inherit'
|
||||||
},
|
},
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<!--
|
<!--
|
||||||
* @FilePath: \screenFront\src\views\PaintShopView\finishView\top.vue
|
* @FilePath: \gitscreenFront\src\views\PaintShopView\finishView\top.vue
|
||||||
* @Author: 王路平
|
* @Author: 王路平
|
||||||
* @文件版本: V1.0.0
|
* @文件版本: V1.0.0
|
||||||
* @Date: 2023-02-13 14:43:28
|
* @Date: 2023-02-13 14:43:28
|
||||||
@ -50,7 +50,7 @@ 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 "./../components/humidity.vue";
|
||||||
import chart from "@/components/assembly/chart2.vue";
|
import chart from "@/components/assembly/chart2.vue";
|
||||||
import verticalNum from "../components/verticalNum.vue";
|
import verticalNum from "../components/verticalNum.vue";
|
||||||
import pm from "../components/pm.vue"
|
import pm from "../components/pm.vue"
|
||||||
|
@ -49,7 +49,7 @@ 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 "./../components/humidity.vue";
|
||||||
import chart from "@/components/assembly/chart2.vue";
|
import chart from "@/components/assembly/chart2.vue";
|
||||||
import verticalNum from "../components/verticalNum.vue";
|
import verticalNum from "../components/verticalNum.vue";
|
||||||
import pm from "../components/pm.vue"
|
import pm from "../components/pm.vue"
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<!--
|
<!--
|
||||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\finishView\chart\humidity.vue
|
* @FilePath: \gitscreenFront\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
|
||||||
@ -59,10 +59,10 @@ const setData = (value: any) => {
|
|||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: "gauge",
|
type: "gauge",
|
||||||
center: ["50%", "90%"],
|
center: ["50%", "85%"],
|
||||||
startAngle: 190,
|
startAngle: 190,
|
||||||
endAngle: -10,
|
endAngle: -10,
|
||||||
radius: "30%",
|
radius: "50%",
|
||||||
min: -30,
|
min: -30,
|
||||||
max: 70,
|
max: 70,
|
||||||
splitNumber: 10,
|
splitNumber: 10,
|
||||||
@ -78,7 +78,7 @@ const setData = (value: any) => {
|
|||||||
//刻度轴宽
|
//刻度轴宽
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 5,
|
width: 10,
|
||||||
color: [
|
color: [
|
||||||
[0.15, '#FF6E76'],
|
[0.15, '#FF6E76'],
|
||||||
[0.75, '#7CFFB2'],
|
[0.75, '#7CFFB2'],
|
||||||
@ -98,7 +98,7 @@ const setData = (value: any) => {
|
|||||||
},
|
},
|
||||||
//刻度线
|
//刻度线
|
||||||
splitLine: {
|
splitLine: {
|
||||||
distance: -10,
|
distance: 5,
|
||||||
length: 3,
|
length: 3,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 3,
|
width: 3,
|
||||||
@ -107,9 +107,9 @@ const setData = (value: any) => {
|
|||||||
},
|
},
|
||||||
//表刻度值
|
//表刻度值
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
distance: -20,
|
distance: 15,
|
||||||
color: '#999',
|
color: '#999',
|
||||||
fontSize: 12
|
fontSize: 10
|
||||||
},
|
},
|
||||||
anchor: {
|
anchor: {
|
||||||
show: false
|
show: false
|
||||||
@ -122,8 +122,8 @@ const setData = (value: any) => {
|
|||||||
// width: '10%',
|
// width: '10%',
|
||||||
// lineHeight: 5,
|
// lineHeight: 5,
|
||||||
// borderRadius: 8,
|
// borderRadius: 8,
|
||||||
// offsetCenter: [0, '-15%'],
|
offsetCenter: [0, '25%'],
|
||||||
fontSize: 12,
|
fontSize: 15,
|
||||||
// fontWeight: 'bolder',
|
// fontWeight: 'bolder',
|
||||||
formatter: '{value} °C',
|
formatter: '{value} °C',
|
||||||
color: 'inherit'
|
color: 'inherit'
|
||||||
@ -136,7 +136,7 @@ const setData = (value: any) => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "gauge",
|
type: "gauge",
|
||||||
center: ["50%", "55%"],
|
center: ["50%", "50%"],
|
||||||
startAngle: 200,
|
startAngle: 200,
|
||||||
endAngle: -20,
|
endAngle: -20,
|
||||||
min: 0,
|
min: 0,
|
||||||
@ -180,9 +180,9 @@ const setData = (value: any) => {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
distance: -40,
|
distance: 15,
|
||||||
color: '#999',
|
color: '#999',
|
||||||
fontSize: 20
|
fontSize: 12
|
||||||
},
|
},
|
||||||
anchor: {
|
anchor: {
|
||||||
show: false
|
show: false
|
||||||
@ -193,7 +193,7 @@ const setData = (value: any) => {
|
|||||||
detail: {
|
detail: {
|
||||||
valueAnimation: true,
|
valueAnimation: true,
|
||||||
offsetCenter: [0, '15%'],
|
offsetCenter: [0, '15%'],
|
||||||
fontSize: 15,
|
fontSize: 20,
|
||||||
formatter: '{value} %RH',
|
formatter: '{value} %RH',
|
||||||
color: 'inherit'
|
color: 'inherit'
|
||||||
},
|
},
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<!--
|
<!--
|
||||||
* @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\chart\verticalNum.vue
|
* @FilePath: \gitscreenFront\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
|
||||||
@ -8,24 +8,22 @@
|
|||||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width,position:'relative'}">
|
<div ref="numBox1" :style="{ height: boxSize.height, width: boxSize.width }">
|
||||||
<border3 ref="refborder3">
|
<border3 ref="refborder3">
|
||||||
<template v-slot>
|
<template v-slot>
|
||||||
<div class="box" ref="classBox1">
|
<div class="box" ref="classBox1">
|
||||||
<!-- <div class="contentbox"> -->
|
<h2>{{ props.title }}</h2>
|
||||||
<h2>{{ title }}</h2>
|
<h5 v-if="value.unit">{{
|
||||||
|
`${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||||
<h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
<!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
|
||||||
<i
|
<i :class="+item.val > +value.quota
|
||||||
:class="
|
? 'iconfont ' + value.iconname + ' icon-red iconbig-size'
|
||||||
value.data > value.quota
|
: 'iconfont ' + value.iconname + ' icon-blue iconbig-size'
|
||||||
? 'iconfont ' + value.iconname + ' icon-red'
|
"></i>
|
||||||
: 'iconfont ' + value.iconname + ' icon-blue'
|
<p class="unit" v-if="value.unit">
|
||||||
"
|
<p class="num">{{ item.val }}</p>
|
||||||
></i>
|
<span>{{ value.unit }}</span>
|
||||||
|
</p>
|
||||||
<p class="unit"><p v-show="value.data&&value.unit" :class="'num'">{{value.data}}</p><span>{{value.unit}}</span></p>
|
|
||||||
<!-- </div> -->
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -34,18 +32,24 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, reactive, ref, watch } from "vue";
|
import { onMounted, reactive, ref, watch, computed, onUnmounted } from "vue";
|
||||||
import border3 from "@/components/borderBox/border3.vue";
|
import border3 from "@/components/borderBox/border3.vue";
|
||||||
import { verticalNumPerson } from "@/type/realtimeSecurity";
|
import { verticalNumPerson } from "@/type/realtimeSecurity";
|
||||||
import { warningNot } from "@/utils/notification";
|
import { warningNot } from "@/utils/notification";
|
||||||
|
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
let { t } = useI18n();
|
let { t } = useI18n();
|
||||||
let props = defineProps<{
|
let props = defineProps<{
|
||||||
title: string;
|
title: string;
|
||||||
}>();
|
}>();
|
||||||
|
let i = ref(0)
|
||||||
|
let item = computed(() => {
|
||||||
|
|
||||||
|
return value.data[i.value] || { "name": "", "val": "0", "type": "", "field": "", "ts": 0 };
|
||||||
|
});
|
||||||
let keynum = ref(0);
|
let keynum = ref(0);
|
||||||
const value = reactive<verticalNumPerson>({
|
const value = reactive<any>({
|
||||||
data: null,
|
data: [],
|
||||||
unit: "",
|
unit: "",
|
||||||
quota: null,
|
quota: null,
|
||||||
iconname: "",
|
iconname: "",
|
||||||
@ -54,7 +58,13 @@ const value = reactive<verticalNumPerson>({
|
|||||||
let refborder3 = ref();
|
let refborder3 = ref();
|
||||||
let numBox1 = ref();
|
let numBox1 = ref();
|
||||||
const classBox1 = ref()
|
const classBox1 = ref()
|
||||||
onMounted(() => {});
|
let timer: any = null;
|
||||||
|
onMounted(() => {
|
||||||
|
|
||||||
|
});
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer);
|
||||||
|
})
|
||||||
|
|
||||||
const boxSize = reactive({
|
const boxSize = reactive({
|
||||||
height: '',
|
height: '',
|
||||||
@ -77,15 +87,15 @@ const setData = (
|
|||||||
value.iconname = iconname;
|
value.iconname = iconname;
|
||||||
value.quota = quota;
|
value.quota = quota;
|
||||||
value.unit = unit;
|
value.unit = unit;
|
||||||
|
|
||||||
// if (data > quota) {
|
|
||||||
// //使用定时器解决通知重叠问题
|
|
||||||
// let navdebug = setTimeout(() => {
|
|
||||||
// warningNot(props.title, "出现异常,异常值为:"+value.data+",请排查!");
|
|
||||||
// clearTimeout(navdebug);
|
|
||||||
// }, 0);
|
|
||||||
// }
|
|
||||||
keynum.value++;
|
keynum.value++;
|
||||||
|
|
||||||
|
clearInterval(timer);
|
||||||
|
timer = setInterval(() => {
|
||||||
|
i.value++;
|
||||||
|
if (i.value >= value.data.length) {
|
||||||
|
i.value = 0;
|
||||||
|
}
|
||||||
|
}, 5000);
|
||||||
};
|
};
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
@ -96,15 +106,23 @@ defineExpose({
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@import "@/assets/css/iconfont.css";
|
@import "@/assets/css/iconfont.css";
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
height: 50%;
|
height: 50%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
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;
|
||||||
/* position: relative; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.box>h5 {
|
||||||
|
font-size: 15px;
|
||||||
|
/* margin-bottom: 20px; */
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
/* .contentbox{
|
/* .contentbox{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -116,59 +134,84 @@ defineExpose({
|
|||||||
h2 {
|
h2 {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-red {
|
.icon-red {
|
||||||
font-size: 150px;
|
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: 150px;
|
font-size: 100px;
|
||||||
color: #20AEC5;
|
color: #20AEC5;
|
||||||
/* position: relative; */
|
/* position: relative; */
|
||||||
/* top: -15px; */
|
/* top: -15px; */
|
||||||
}
|
}
|
||||||
.icon-red,
|
|
||||||
.icon-blue {
|
.iconsmall-size {
|
||||||
/* margin-bottom: 20%; */
|
|
||||||
}
|
|
||||||
.box>h2{
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
left:20px;
|
|
||||||
}
|
|
||||||
.box>h5{
|
|
||||||
font-size: 15px;
|
|
||||||
/* margin-bottom: 20px; */
|
|
||||||
margin-top: -10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.num {
|
.num {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.unit {
|
.unit {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
height: 0;
|
height: 5;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes redstart {
|
.box>h2 {
|
||||||
0% {
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes redstart {
|
||||||
|
0% {}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
text-shadow: #fff 1px 0 10px;
|
text-shadow: #fff 1px 0 10px;
|
||||||
}
|
}
|
||||||
100% {
|
|
||||||
|
|
||||||
}
|
100% {}
|
||||||
}
|
}</style>
|
||||||
</style>
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<!--
|
<!--
|
||||||
* @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient\top.vue
|
* @FilePath: \gitscreenFront\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
|
||||||
@ -39,7 +39,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<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 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";
|
||||||
@ -63,6 +63,7 @@ let verticalNum4 = 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 props = defineProps<{
|
let props = defineProps<{
|
||||||
width: number;
|
width: number;
|
||||||
@ -257,14 +258,28 @@ let ductOption = reactive({
|
|||||||
|
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
let temp_humi_index = 0
|
||||||
function setcontentData(val){
|
function setcontentData(val){
|
||||||
|
let noise = val.noise.map((item) => {
|
||||||
|
return { name: item.name, val: item.data };
|
||||||
|
});
|
||||||
// verticalNum3.value.setData(val.FIRE,'icon-ranqi',5,"")
|
// 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,"")
|
// 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.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 type=[]
|
||||||
let valueduct=[]
|
let valueduct=[]
|
||||||
for(let key in val.water_pressure){
|
for(let key in val.water_pressure){
|
||||||
@ -317,6 +332,9 @@ onMounted(() => {
|
|||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
onUnmounted(()=>{
|
||||||
|
clearInterval(temp_humi_timer)
|
||||||
|
})
|
||||||
defineExpose({
|
defineExpose({
|
||||||
setcontentData,
|
setcontentData,
|
||||||
});
|
});
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<!--
|
<!--
|
||||||
* @FilePath: \wwwd:\code\screenFront\src\views\energyConsumeJixiefenchang\content\chart\gas.vue
|
* @FilePath: \gitscreenFront\src\views\energyConsumeJixiefenchang\content\chart\gas.vue
|
||||||
* @Author: 王路平
|
* @Author: 王路平
|
||||||
* @文件版本: V1.0.0
|
* @文件版本: V1.0.0
|
||||||
* @Date: 2023-02-14 13:24:12
|
* @Date: 2023-02-14 13:24:12
|
||||||
@ -10,12 +10,12 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="gasborder">
|
<div class="gasborder">
|
||||||
<border4 ref="refborder4">
|
<border6 ref="refborder4">
|
||||||
<template v-slot>
|
<template v-slot>
|
||||||
<!-- <h1>{{props.title}}</h1> -->
|
<!-- <h1>{{props.title}}</h1> -->
|
||||||
<div ref="gas" ></div>
|
<div ref="gas" ></div>
|
||||||
</template>
|
</template>
|
||||||
</border4>
|
</border6>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -23,7 +23,7 @@
|
|||||||
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
|
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
|
||||||
import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
|
import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
|
||||||
import 'echarts-liquidfill'
|
import 'echarts-liquidfill'
|
||||||
import border4 from "@/components/borderBox/border4.vue"
|
import border6 from "@/components/borderBox/border6.vue";
|
||||||
const { proxy } = getCurrentInstance() as any;
|
const { proxy } = getCurrentInstance() as any;
|
||||||
let props=defineProps<{
|
let props=defineProps<{
|
||||||
title:string,
|
title:string,
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<!--
|
<!--
|
||||||
* @FilePath: \wwwd:\code\screenFront\src\views\energyConsumeJixiefenchang\content\top.vue
|
* @FilePath: \gitscreenFront\src\views\energyConsumeJixiefenchang\content\top.vue
|
||||||
* @Author: 王路平
|
* @Author: 王路平
|
||||||
* @文件版本: V1.0.0
|
* @文件版本: V1.0.0
|
||||||
* @Date: 2023-02-13 14:43:28
|
* @Date: 2023-02-13 14:43:28
|
||||||
@ -156,7 +156,7 @@ const powerBox = (width: any, height: any) => {
|
|||||||
let a = calcWH(height, width, 1, 4, 0);
|
let a = calcWH(height, width, 1, 4, 0);
|
||||||
//修改高度
|
//修改高度
|
||||||
ratio.value.setchartWH(a.oWidth * 3, a.oHeight);
|
ratio.value.setchartWH(a.oWidth * 3, a.oHeight);
|
||||||
gasref.value.setchartWH(a.oWidth, a.oHeight);
|
gasref.value.setchartWH(a.oWidth-20, a.oHeight);
|
||||||
};
|
};
|
||||||
const clickPowerChart = () => {
|
const clickPowerChart = () => {
|
||||||
router.push({
|
router.push({
|
||||||
@ -222,7 +222,7 @@ watch(
|
|||||||
backgroundStyle: {
|
backgroundStyle: {
|
||||||
color: "rgba(180, 180, 180, 0.2)",
|
color: "rgba(180, 180, 180, 0.2)",
|
||||||
},
|
},
|
||||||
barWidth:'50%',
|
barWidth:'80px',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
},
|
},
|
||||||
@ -237,7 +237,7 @@ watch(
|
|||||||
backgroundStyle: {
|
backgroundStyle: {
|
||||||
color: "rgba(180, 180, 180, 0.2)",
|
color: "rgba(180, 180, 180, 0.2)",
|
||||||
},
|
},
|
||||||
barWidth:'30%',
|
barWidth:'80px',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
},
|
},
|
||||||
@ -253,7 +253,7 @@ watch(
|
|||||||
backgroundStyle: {
|
backgroundStyle: {
|
||||||
color: "rgba(180, 180, 180, 0.2)",
|
color: "rgba(180, 180, 180, 0.2)",
|
||||||
},
|
},
|
||||||
barWidth:'30%',
|
barWidth:'80px',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
},
|
},
|
||||||
@ -268,7 +268,7 @@ watch(
|
|||||||
backgroundStyle: {
|
backgroundStyle: {
|
||||||
color: "rgba(180, 180, 180, 0.2)",
|
color: "rgba(180, 180, 180, 0.2)",
|
||||||
},
|
},
|
||||||
barWidth:'30%',
|
barWidth:'80px',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user