修改机械分厂 精饰 大件 焊接车间样式
This commit is contained in:
123456
parent
0332ee828b
commit
2b840facb3
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \daping\src\components\borderBox\border3.vue
|
||||
* @FilePath: \screenFront\src\components\borderBox\border3.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-01-31 15:03:08
|
||||
@ -37,6 +37,7 @@ defineExpose({ resetWH })
|
||||
.slot{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* @FilePath: \wwwd:\code\screenFront\src\utils\devSever.ts
|
||||
* @FilePath: \screenFront\src\utils\devSever.ts
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-03-03 08:59:37
|
||||
@ -8,8 +8,8 @@
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
*/
|
||||
|
||||
// export const development={xhr:process.env.VUE_APP_BASE_API,ws:"ws://192.168.110.237:9018/",imgxhr:process.env.VUE_APP_BASE_API+"/image/"}
|
||||
export const development={xhr:process.env.VUE_APP_BASE_API,ws:"ws://8.130.165.100:9018/",imgxhr:process.env.VUE_APP_BASE_API+"/image/"}
|
||||
export const development={xhr:process.env.VUE_APP_BASE_API,ws:"ws://192.168.3.97:9018/",imgxhr:process.env.VUE_APP_BASE_API+"/image/"}
|
||||
// export const development={xhr:process.env.VUE_APP_BASE_API,ws:"ws://8.130.165.100:9018/",imgxhr:process.env.VUE_APP_BASE_API+"/image/"}
|
||||
export const production={xhr:process.env.VUE_APP_BASE_API,ws:"ws://8.130.165.100:9018/",imgxhr:process.env.VUE_APP_BASE_API+"/image/"}
|
||||
//拼接图片url路径
|
||||
export function imgurlAddXhr(img){
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\View1\bottom.vue
|
||||
* @FilePath: \screenFront\src\views\PaintShopView\View1\bottom.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 14:43:28
|
||||
@ -36,7 +36,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
import { onMounted, reactive, ref, watch,onUnmounted } from "vue";
|
||||
import { calcWH } from "@/components/ts/selfAdaption";
|
||||
// import {getPowerData} from '@/http/environment'
|
||||
import { getPowerData, getconsumeDetail } from "@/http/energyConsume";
|
||||
@ -56,7 +56,7 @@ let powerref = ref();
|
||||
let Productionref = ref();
|
||||
let borderref=ref()
|
||||
let pmref=ref()
|
||||
|
||||
let pm_timer = null
|
||||
let props = defineProps<{
|
||||
width: number;
|
||||
height: number;
|
||||
@ -188,7 +188,9 @@ let Data={power:{"1月":11,"2月":22,"3月":11,"4月":22},Production:{"1月":11,
|
||||
// // yields.value.setData(result.data);
|
||||
// }
|
||||
// }
|
||||
let pm_index = 0
|
||||
function setcontentData(val){
|
||||
clearInterval(pm_timer)
|
||||
let monthData=[]
|
||||
let powerMonth=[]
|
||||
for(let key in val.power){
|
||||
@ -219,7 +221,7 @@ function setcontentData(val){
|
||||
show: true,
|
||||
color:'#fff',
|
||||
formatter: function(params){
|
||||
console.log(params);
|
||||
// console.log(params);
|
||||
return params.value.toLocaleString()
|
||||
},
|
||||
position: "top",
|
||||
@ -263,7 +265,7 @@ function setcontentData(val){
|
||||
show: true,
|
||||
color:'#fff',
|
||||
formatter: function(params){
|
||||
console.log(params);
|
||||
// console.log(params);
|
||||
return params.value.toLocaleString()
|
||||
},
|
||||
position: "top",
|
||||
@ -275,12 +277,21 @@ function setcontentData(val){
|
||||
})
|
||||
|
||||
Productionref.value.changeData(ProductionOption.option)
|
||||
pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
|
||||
pmref.value.setData({two:val.dust[pm_index].pm25,ten:val.dust[pm_index].pm10,title:val.dust[pm_index].name})
|
||||
if (val.dust.length > 1) {
|
||||
pm_timer = setInterval(() => {
|
||||
pmref.value.setData({two:val.dust[pm_index].pm25,ten:val.dust[pm_index].pm10,title:val.dust[pm_index].name})
|
||||
pm_index++
|
||||
if (pm_index >= val.dust.length) {
|
||||
pm_index = 0
|
||||
}
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
|
||||
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval(pm_timer)
|
||||
});
|
||||
defineExpose({
|
||||
setcontentData,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\View1\chart\pm.vue
|
||||
* @FilePath: \screenFront\src\views\PaintShopView\View1\chart\pm.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-10 13:27:36
|
||||
@ -38,10 +38,10 @@ const echartsData = reactive<EDataPerson>({
|
||||
*/
|
||||
const setData = (value: any) => {
|
||||
echartsData.humiture!.div = humiture.value;
|
||||
echartsData.humiture!.title = props.title;
|
||||
echartsData.humiture!.title = value.title;
|
||||
echartsData.humiture!.data = {
|
||||
title: {
|
||||
text: props.title,
|
||||
text: value.title,
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\View1\index.vue
|
||||
* @FilePath: \screenFront\src\views\PaintShopView\View1\index.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-04-11 13:50:05
|
||||
@ -11,7 +11,8 @@
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.JingShi_generalEnvironment')" :titleTip="[]" :typeFun="['time']" :alarmType="[]"></header2>
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.JingShi_generalEnvironment')"
|
||||
:titleTip="[]" :typeFun="['time']" :alarmType="[]"></header2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" ref="Acontent">
|
||||
@ -67,6 +68,7 @@ let {t} = useI18n();
|
||||
try {
|
||||
let data = JSON.parse(val);
|
||||
if (data.type == "PaintShopView") {
|
||||
|
||||
// store.changenoise(data.msg);
|
||||
topref.value.setcontentData(data.msg)
|
||||
bottomref.value.setcontentData(data.msg)
|
||||
@ -87,7 +89,8 @@ function errWebsocket(val) {
|
||||
clearTimeout(time.value)
|
||||
time.value = null
|
||||
}
|
||||
time.value = setTimeout(() => {WH(contentBox)
|
||||
time.value = setTimeout(() => {
|
||||
WH(contentBox)
|
||||
}, 1000);
|
||||
})
|
||||
getSensorByDeptfun()
|
||||
@ -107,6 +110,7 @@ function errWebsocket(val) {
|
||||
color: #20aec5;
|
||||
background-color: #100c2a;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -114,20 +118,24 @@ function errWebsocket(val) {
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title>h1 {
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header p {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
bottom: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
--header: 100px;
|
||||
@ -139,10 +147,12 @@ function errWebsocket(val) {
|
||||
|
||||
/* --content:calc(100vh - var(--header)) */
|
||||
overflow: hidden !important;
|
||||
-ms-overflow-style: none; /* IE + Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none;
|
||||
/* IE + Edge */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\View1\top.vue
|
||||
* @FilePath: \screenFront\src\views\PaintShopView\View1\top.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 14:43:28
|
||||
@ -15,10 +15,7 @@
|
||||
<verticalNum ref="verticalNum3" :title="t('messages.gasDetection')"></verticalNum>
|
||||
<verticalNum ref="verticalNum5" :title="t('messages.smokeDetection')"></verticalNum>
|
||||
<verticalNum ref="verticalNum4" :title="t('messages.noiseDetection')"></verticalNum>
|
||||
<verticalNum
|
||||
ref="verticalNum6"
|
||||
:title="t('messages.CH2Ojiance')"
|
||||
></verticalNum>
|
||||
<verticalNum ref="verticalNum6" :title="t('messages.CH2Ojiance')"></verticalNum>
|
||||
<verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum>
|
||||
<div>
|
||||
<border3 ref="borderref">
|
||||
@ -27,11 +24,7 @@
|
||||
</template>
|
||||
</border3>
|
||||
</div>
|
||||
<chart
|
||||
:title="ductOption.title"
|
||||
:option="ductOption.option"
|
||||
ref="ductref"
|
||||
></chart>
|
||||
<chart :title="ductOption.title" :option="ductOption.option" ref="ductref"></chart>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -39,7 +32,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
import { onMounted, reactive, ref, watch,onUnmounted } from "vue";
|
||||
import border6 from "@/components/borderBox/border6.vue";
|
||||
import border3 from "@/components/borderBox/border3.vue";
|
||||
import { calcWH } from "@/components/ts/selfAdaption";
|
||||
@ -47,7 +40,7 @@ import { calcWH } from "@/components/ts/selfAdaption";
|
||||
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 verticalNum from "./../components/verticalNum.vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useEnergyConsumeStore } from "@/store/module/energyConsume";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@ -63,7 +56,7 @@ let verticalNum7 = ref();
|
||||
let borderref = ref()
|
||||
let humidityref = ref()
|
||||
let ductref = ref()
|
||||
|
||||
let temp_humi_timer = null
|
||||
let props = defineProps<{
|
||||
width: number;
|
||||
height: number;
|
||||
@ -257,14 +250,38 @@ let ductOption = reactive({
|
||||
|
||||
// }
|
||||
// }
|
||||
let temp_humi_index = 0
|
||||
function setcontentData(val) {
|
||||
let CH2O = val.TVOC_CH2O.map((item) => {
|
||||
return { name: item.name, val: item.CH2O };
|
||||
});
|
||||
let TVOC = val.TVOC_CH2O.map((item) => {
|
||||
return { name: item.name, val: item.TVOC };
|
||||
});
|
||||
let Smoke = val.Smoke.map((item) => {
|
||||
return { name: item.name, val: item.data };
|
||||
});
|
||||
let noise = val.noise.map((item) => {
|
||||
return { name: item.name, val: item.data };
|
||||
});
|
||||
verticalNum3.value.setData(val.FIRE, 'icon-ranqi', 0, "")
|
||||
verticalNum4.value.setData(val.noise,'icon-shengyin',120,"dB")
|
||||
verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',100,"")
|
||||
verticalNum6.value.setData(val.TVOC_CH2O.CH2O,'icon-app_icons--',0.08,"mg/m3")
|
||||
verticalNum7.value.setData(val.TVOC_CH2O.TVOC,'icon-TVOC-Outlined',0.5,"mg/m3")
|
||||
verticalNum4.value.setData(noise, 'icon-shengyin', 120, "dB")
|
||||
verticalNum5.value.setData(Smoke, 'icon-yanwubaojingqi', 100, "")
|
||||
verticalNum6.value.setData(CH2O, 'icon-app_icons--', 0.08, "mg/m3")
|
||||
verticalNum7.value.setData(TVOC, 'icon-TVOC-Outlined', 0.5, "mg/m3")
|
||||
// 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 valueduct = []
|
||||
for (let key in val.water_pressure) {
|
||||
@ -318,6 +335,9 @@ onMounted(() => {
|
||||
|
||||
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval(temp_humi_timer)
|
||||
})
|
||||
defineExpose({
|
||||
setcontentData,
|
||||
});
|
||||
|
||||
215
src/views/PaintShopView/components/verticalNum.vue
Normal file
215
src/views/PaintShopView/components/verticalNum.vue
Normal file
@ -0,0 +1,215 @@
|
||||
<!--
|
||||
* @FilePath: \screenFront\src\views\PaintShopView\components\verticalNum.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 08:22:35
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div ref="numBox1" :style="{ height: boxSize.height, width: boxSize.width, marginBottom: '10px' }">
|
||||
<border3 ref="refborder3">
|
||||
<template v-slot>
|
||||
<div class="box" ref="classBox1">
|
||||
<h5 v-if="value.unit">{{
|
||||
`${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
|
||||
<!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
|
||||
<h2>{{ item.name }}</h2>
|
||||
<i :class="+item.val > +value.quota
|
||||
? 'iconfont ' + value.iconname + ' icon-red iconbig-size'
|
||||
: 'iconfont ' + value.iconname + ' icon-blue iconbig-size'
|
||||
"></i>
|
||||
<p class="unit" v-if="value.unit">
|
||||
<p class="num">{{ item.val }}</p>
|
||||
<span>{{ value.unit }}</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</border3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, watch, computed, onUnmounted } from "vue";
|
||||
import border3 from "@/components/borderBox/border3.vue";
|
||||
import { verticalNumPerson } from "@/type/realtimeSecurity";
|
||||
import { warningNot } from "@/utils/notification";
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let { t } = useI18n();
|
||||
let props = defineProps<{
|
||||
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);
|
||||
const value = reactive<any>({
|
||||
data: [],
|
||||
unit: "",
|
||||
quota: null,
|
||||
iconname: "",
|
||||
});
|
||||
|
||||
let refborder3 = ref();
|
||||
let numBox1 = ref();
|
||||
const classBox1 = ref()
|
||||
let timer: any = null;
|
||||
onMounted(() => {
|
||||
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
})
|
||||
|
||||
const boxSize = reactive({
|
||||
height: '',
|
||||
width: ''
|
||||
})
|
||||
|
||||
function setchartWH(width: any, height: any) {
|
||||
boxSize.height = height + 'px'
|
||||
boxSize.width = width + 'px'
|
||||
refborder3.value.resetWH();
|
||||
}
|
||||
|
||||
const setData = (
|
||||
data?: number | null,
|
||||
iconname?: string,
|
||||
quota?: number | null,
|
||||
unit?: string
|
||||
) => {
|
||||
value.data = data;
|
||||
value.iconname = iconname;
|
||||
value.quota = quota;
|
||||
value.unit = unit;
|
||||
keynum.value++;
|
||||
|
||||
clearInterval(timer);
|
||||
timer = setInterval(() => {
|
||||
i.value++;
|
||||
if (i.value >= value.data.length) {
|
||||
i.value = 0;
|
||||
}
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
setchartWH,
|
||||
setData,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/assets/css/iconfont.css";
|
||||
|
||||
.box {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.box>h5 {
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
/* .contentbox{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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; */
|
||||
}
|
||||
|
||||
.iconsmall-size {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
vertical-align: top;
|
||||
font-size: 25px;
|
||||
height: 0;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.box>h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
|
||||
.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% {
|
||||
text-shadow: #fff 1px 0 10px;
|
||||
}
|
||||
|
||||
100% {}
|
||||
}</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\stuffView\bottom.vue
|
||||
* @FilePath: \screenFront\src\views\PaintShopView\stuffView\bottom.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 14:43:28
|
||||
@ -219,7 +219,7 @@ function setcontentData(val){
|
||||
show: true,
|
||||
color:'#fff',
|
||||
formatter: function(params){
|
||||
console.log(params);
|
||||
// console.log(params);
|
||||
return params.value.toLocaleString()
|
||||
},
|
||||
position: "top",
|
||||
@ -263,7 +263,7 @@ function setcontentData(val){
|
||||
show: true,
|
||||
color:'#fff',
|
||||
formatter: function(params){
|
||||
console.log(params);
|
||||
// console.log(params);
|
||||
return params.value.toLocaleString()
|
||||
},
|
||||
position: "top",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\stuffView\chart\pm.vue
|
||||
* @FilePath: \screenFront\src\views\PaintShopView\stuffView\chart\pm.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-10 13:27:36
|
||||
@ -38,10 +38,10 @@ const echartsData = reactive<EDataPerson>({
|
||||
*/
|
||||
const setData = (value: any) => {
|
||||
echartsData.humiture!.div = humiture.value;
|
||||
echartsData.humiture!.title = props.title;
|
||||
echartsData.humiture!.title = value.title;
|
||||
echartsData.humiture!.data = {
|
||||
title: {
|
||||
text: props.title,
|
||||
text: value.title,
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\stuffView\top.vue
|
||||
* @FilePath: \screenFront\src\views\PaintShopView\stuffView\top.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 14:43:28
|
||||
@ -15,11 +15,8 @@
|
||||
<!-- <verticalNum ref="verticalNum3" :title="'燃气检测'"></verticalNum>
|
||||
<verticalNum ref="verticalNum5" :title="'烟雾检测'"></verticalNum> -->
|
||||
<verticalNum ref="verticalNum4" :title="t('messages.noiseDetection')"></verticalNum>
|
||||
<!-- <verticalNum
|
||||
ref="verticalNum6"
|
||||
:title="'甲醛监测'"
|
||||
></verticalNum>
|
||||
<verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum> -->
|
||||
<verticalNum ref="verticalNum6" :title="'甲醛监测'"></verticalNum>
|
||||
<verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum>
|
||||
<div>
|
||||
<border3 ref="borderref">
|
||||
<template v-slot>
|
||||
@ -27,11 +24,7 @@
|
||||
</template>
|
||||
</border3>
|
||||
</div>
|
||||
<chart
|
||||
:title="ductOption.title"
|
||||
:option="ductOption.option"
|
||||
ref="ductref"
|
||||
></chart>
|
||||
<chart :title="ductOption.title" :option="ductOption.option" ref="ductref"></chart>
|
||||
<div>
|
||||
<border3 ref="borderrefPM">
|
||||
<template v-slot>
|
||||
@ -46,7 +39,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
import { onMounted, reactive, ref, watch, onUnmounted } from "vue";
|
||||
import border6 from "@/components/borderBox/border6.vue";
|
||||
import border3 from "@/components/borderBox/border3.vue";
|
||||
import { calcWH } from "@/components/ts/selfAdaption";
|
||||
@ -55,7 +48,7 @@ import { getSensorByDept} from "@/http/PaintShopView/index";
|
||||
import humidity from "./chart/humidity.vue";
|
||||
import pm from "./chart/pm.vue";
|
||||
import chart from "@/components/assembly/chart2.vue";
|
||||
import verticalNum from "./chart/verticalNum.vue";
|
||||
import verticalNum from "./../components/verticalNum.vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useEnergyConsumeStore } from "@/store/module/energyConsume";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@ -66,14 +59,15 @@ const router = useRouter();
|
||||
// let verticalNum3 = ref();
|
||||
let verticalNum4 = ref();
|
||||
// let verticalNum5 = ref();
|
||||
// let verticalNum6 = ref();
|
||||
// let verticalNum7 = ref();
|
||||
let verticalNum6 = ref();
|
||||
let verticalNum7 = ref();
|
||||
let borderref = ref()
|
||||
let humidityref = ref()
|
||||
let ductref = ref()
|
||||
let borderrefPM = ref()
|
||||
let pmref = ref()
|
||||
|
||||
let temp_humi_timer = null
|
||||
let pm_timer = null
|
||||
let props = defineProps<{
|
||||
width: number;
|
||||
height: number;
|
||||
@ -101,13 +95,13 @@ 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*6-20,a.oHeight-20)
|
||||
verticalNum4.value.setchartWH(a.oWidth * 4 - 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*6-40,a.oHeight-40)
|
||||
ductref.value.setchartWH(a.oWidth*6-20, a.oHeight-20);
|
||||
pmref.value.setchartWH(a.oWidth*6-40,a.oHeight-40)
|
||||
verticalNum6.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
|
||||
verticalNum7.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
|
||||
humidityref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
|
||||
ductref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20);
|
||||
pmref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
|
||||
};
|
||||
let ductOption = reactive({
|
||||
title: "",
|
||||
@ -269,14 +263,39 @@ let ductOption = reactive({
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
let pm_index = 0
|
||||
|
||||
let temp_humi_index = 0
|
||||
function setcontentData(val) {
|
||||
|
||||
clearInterval(temp_humi_timer)
|
||||
clearInterval(pm_timer)
|
||||
let CH2O = val.TVOC_CH2O.map((item) => {
|
||||
return { name: item.name, val: item.CH2O };
|
||||
});
|
||||
let TVOC = val.TVOC_CH2O.map((item) => {
|
||||
return { name: item.name, val: item.TVOC };
|
||||
});
|
||||
let noise = val.noise.map((item) => {
|
||||
return { name: item.name, val: item.data };
|
||||
});
|
||||
// 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,"")
|
||||
// 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.huim,c:val.temp_humi.temp})
|
||||
verticalNum6.value.setData(CH2O, 'icon-app_icons--', 0.05, "mg/m3")
|
||||
verticalNum7.value.setData(TVOC, 'icon-TVOC-Outlined', 0.5, "mg/m3")
|
||||
|
||||
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 valueduct = []
|
||||
for (let key in val.water_pressure) {
|
||||
@ -321,13 +340,26 @@ let ductOption = reactive({
|
||||
// },
|
||||
// },
|
||||
// })
|
||||
pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
|
||||
pmref.value.setData({two:val.dust[pm_index].pm25,ten:val.dust[pm_index].pm10,title:val.dust[pm_index].name})
|
||||
if (val.dust.length > 1) {
|
||||
pm_timer = setInterval(() => {
|
||||
pmref.value.setData({two:val.dust[pm_index].pm25,ten:val.dust[pm_index].pm10,title:val.dust[pm_index].name})
|
||||
pm_index++
|
||||
if (pm_index >= val.dust.length) {
|
||||
pm_index = 0
|
||||
}
|
||||
}, 3000)
|
||||
}
|
||||
ductref.value.changeData(ductOption.option)
|
||||
}
|
||||
let Data = { power: { "管道1": 11, "管道2": 22 } }
|
||||
onMounted(() => {
|
||||
|
||||
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval(temp_humi_timer)
|
||||
clearInterval(pm_timer)
|
||||
});
|
||||
defineExpose({
|
||||
setcontentData,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\weldView\bottom.vue
|
||||
* @FilePath: \screenFront\src\views\PaintShopView\weldView\bottom.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 14:43:28
|
||||
@ -219,7 +219,7 @@ function setcontentData(val){
|
||||
show: true,
|
||||
color:'#fff',
|
||||
formatter:function(params){
|
||||
console.log(params);
|
||||
// console.log(params);
|
||||
return params.value.toLocaleString()
|
||||
},
|
||||
position: "top",
|
||||
@ -263,7 +263,7 @@ function setcontentData(val){
|
||||
show: true,
|
||||
color:'#fff',
|
||||
formatter:function(params){
|
||||
console.log(params);
|
||||
// console.log(params);
|
||||
return params.value.toLocaleString()
|
||||
},
|
||||
position: "top",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\weldView\chart\pm.vue
|
||||
* @FilePath: \screenFront\src\views\PaintShopView\weldView\chart\pm.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-10 13:27:36
|
||||
@ -38,10 +38,10 @@ const echartsData = reactive<EDataPerson>({
|
||||
*/
|
||||
const setData = (value: any) => {
|
||||
echartsData.humiture!.div = humiture.value;
|
||||
echartsData.humiture!.title = props.title;
|
||||
echartsData.humiture!.title = value.title;
|
||||
echartsData.humiture!.data = {
|
||||
title: {
|
||||
text: props.title,
|
||||
text: value.title,
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
@ -109,9 +109,6 @@ const setData = (value: any) => {
|
||||
anchor: {
|
||||
show: false,
|
||||
},
|
||||
title: {
|
||||
show: false,
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
width: "60%",
|
||||
@ -124,6 +121,7 @@ const setData = (value: any) => {
|
||||
color: "inherit",
|
||||
},
|
||||
title: {
|
||||
show: false,
|
||||
offsetCenter: [0, "-20%"],
|
||||
},
|
||||
data: [
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\weldView\top.vue
|
||||
* @FilePath: \screenFront\src\views\PaintShopView\weldView\top.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-13 14:43:28
|
||||
@ -15,11 +15,8 @@
|
||||
<!-- <verticalNum ref="verticalNum3" :title="'燃气检测'"></verticalNum> -->
|
||||
<!-- <verticalNum ref="verticalNum5" :title="'烟雾检测'"></verticalNum> -->
|
||||
<verticalNum ref="verticalNum4" :title="t('messages.noiseDetection')"></verticalNum>
|
||||
<!-- <verticalNum
|
||||
ref="verticalNum6"
|
||||
:title="'甲醛监测'"
|
||||
></verticalNum>
|
||||
<verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum> -->
|
||||
<verticalNum ref="verticalNum6" :title="'甲醛监测'"></verticalNum>
|
||||
<verticalNum ref="verticalNum7" :title="'TVOC'"></verticalNum>
|
||||
<div>
|
||||
<border3 ref="borderref">
|
||||
<template v-slot>
|
||||
@ -27,11 +24,7 @@
|
||||
</template>
|
||||
</border3>
|
||||
</div>
|
||||
<chart
|
||||
:title="ductOption.title"
|
||||
:option="ductOption.option"
|
||||
ref="ductref"
|
||||
></chart>
|
||||
<chart :title="ductOption.title" :option="ductOption.option" ref="ductref"></chart>
|
||||
<div>
|
||||
<border3 ref="borderrefPM">
|
||||
<template v-slot>
|
||||
@ -46,7 +39,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
import { onMounted, reactive, ref, watch, onUnmounted } from "vue";
|
||||
import border6 from "@/components/borderBox/border6.vue";
|
||||
import border3 from "@/components/borderBox/border3.vue";
|
||||
import { calcWH } from "@/components/ts/selfAdaption";
|
||||
@ -55,7 +48,7 @@ import { getSensorByDept} from "@/http/PaintShopView/index";
|
||||
import humidity from "./chart/humidity.vue";
|
||||
import chart from "@/components/assembly/chart2.vue";
|
||||
import pm from "./chart/pm.vue";
|
||||
import verticalNum from "./chart/verticalNum.vue";
|
||||
import verticalNum from "./../components/verticalNum.vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useEnergyConsumeStore } from "@/store/module/energyConsume";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@ -66,14 +59,15 @@ const router = useRouter();
|
||||
// let verticalNum3 = ref();
|
||||
let verticalNum4 = ref();
|
||||
// let verticalNum5 = ref();
|
||||
// let verticalNum6 = ref();
|
||||
// let verticalNum7 = ref();
|
||||
let verticalNum6 = ref();
|
||||
let verticalNum7 = ref();
|
||||
let borderref = ref()
|
||||
let humidityref = ref()
|
||||
let ductref = ref()
|
||||
let borderrefPM = ref()
|
||||
let pmref = ref()
|
||||
|
||||
let temp_humi_timer = null
|
||||
let pm_timer = null
|
||||
let props = defineProps<{
|
||||
width: number;
|
||||
height: number;
|
||||
@ -101,13 +95,13 @@ 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*6-20,a.oHeight-20)
|
||||
verticalNum4.value.setchartWH(a.oWidth * 4 - 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*6-40,a.oHeight-40)
|
||||
ductref.value.setchartWH(a.oWidth*6-20, a.oHeight-20);
|
||||
pmref.value.setchartWH(a.oWidth*6-40,a.oHeight-40)
|
||||
verticalNum6.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
|
||||
verticalNum7.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20)
|
||||
humidityref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 40)
|
||||
ductref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 20);
|
||||
pmref.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 40)
|
||||
};
|
||||
let ductOption = reactive({
|
||||
title: "",
|
||||
@ -269,14 +263,38 @@ let ductOption = reactive({
|
||||
|
||||
// }
|
||||
// }
|
||||
let pm_index = 0
|
||||
|
||||
let temp_humi_index = 0
|
||||
function setcontentData(val) {
|
||||
clearInterval(temp_humi_timer)
|
||||
clearInterval(pm_timer)
|
||||
|
||||
let CH2O = val.TVOC_CH2O.map((item) => {
|
||||
return { name: item.name, val: item.CH2O };
|
||||
});
|
||||
let TVOC = val.TVOC_CH2O.map((item) => {
|
||||
return { name: item.name, val: item.TVOC };
|
||||
});
|
||||
let noise = val.noise.map((item) => {
|
||||
return { name: item.name, val: item.data };
|
||||
});
|
||||
// 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,"")
|
||||
// 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")
|
||||
verticalNum6.value.setData(CH2O, 'icon-app_icons--', 5, "mg/m3")
|
||||
verticalNum7.value.setData(TVOC, 'icon-TVOC-Outlined', 5, "PPM")
|
||||
// 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 valueduct = []
|
||||
for (let key in val.water_pressure) {
|
||||
@ -321,7 +339,16 @@ let ductOption = reactive({
|
||||
// },
|
||||
// },
|
||||
// })
|
||||
pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
|
||||
pmref.value.setData({ two: val.dust[pm_index].pm25, ten: val.dust[pm_index].pm10, title: val.dust[pm_index].name })
|
||||
if (val.dust.length > 1) {
|
||||
pm_timer = setInterval(() => {
|
||||
pmref.value.setData({ two: val.dust[pm_index].pm25, ten: val.dust[pm_index].pm10, title: val.dust[pm_index].name })
|
||||
pm_index++
|
||||
if (pm_index >= val.dust.length) {
|
||||
pm_index = 0
|
||||
}
|
||||
}, 3000)
|
||||
}
|
||||
ductref.value.changeData(ductOption.option)
|
||||
}
|
||||
let Data = { power: { "管道1": 11, "管道2": 22 } }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user