修改环境大屏和机械分厂环境大屏 粉尘显示效果 固定 焊接，精饰 大件粉尘传感器devId
This commit is contained in:
hzz
parent
d669e39c55
commit
873baee839
@ -9,7 +9,7 @@
|
|||||||
*/
|
*/
|
||||||
import { defineStore } from "pinia";
|
import { defineStore } from "pinia";
|
||||||
import { Names } from '@/store/storeName'
|
import { Names } from '@/store/storeName'
|
||||||
import {gettime,clacendTime} from "@/utils/time"
|
import { gettime, clacendTime } from "@/utils/time"
|
||||||
export const useSocketStore = defineStore(Names.socket, {
|
export const useSocketStore = defineStore(Names.socket, {
|
||||||
// 使用方式
|
// 使用方式
|
||||||
// const Index= useIndexStore()
|
// const Index= useIndexStore()
|
||||||
@ -172,17 +172,36 @@ export const useSocketStore = defineStore(Names.socket, {
|
|||||||
* @函数备注:
|
* @函数备注:
|
||||||
*/
|
*/
|
||||||
changePM(val) {
|
changePM(val) {
|
||||||
if (val.enName == 'welding') {
|
let arr = ['083e3900-3435-11ed-a7e1-fd42bca6c8c6', 'bcbfb530-88b2-11ed-a926-570995ad0254', '01336fd0-1fa0-11ed-9223-7db1174970a8']
|
||||||
this.pm.welding.two = val.pm25
|
|
||||||
this.pm.welding.ten = val.pm10
|
// if (arr.indexOf(val.devId) > -1) {
|
||||||
} else if (val.enName == 'stuff') {
|
// console.log(val,'这三个设备');
|
||||||
this.pm.stuff.two = val.pm25
|
|
||||||
this.pm.stuff.ten = val.pm10
|
// }
|
||||||
} else if (val.enName == 'ornaments') {
|
|
||||||
this.pm.ornaments.two = val.pm25
|
if (val.devId == '083e3900-3435-11ed-a7e1-fd42bca6c8c6') {
|
||||||
this.pm.ornaments.ten = val.pm10
|
this.pm.welding.two = val.pm25
|
||||||
|
this.pm.welding.ten = val.pm10
|
||||||
|
} else if (val.devId == 'bcbfb530-88b2-11ed-a926-570995ad0254') {
|
||||||
|
this.pm.ornaments.two = val.pm25
|
||||||
|
this.pm.ornaments.ten = val.pm10
|
||||||
|
} else if (val.devId == '01336fd0-1fa0-11ed-9223-7db1174970a8') {
|
||||||
|
this.pm.stuff.two = val.pm25
|
||||||
|
this.pm.stuff.ten = val.pm10
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// if (val.enName == 'welding') {
|
||||||
|
// this.pm.welding.two = val.pm25
|
||||||
|
// this.pm.welding.ten = val.pm10
|
||||||
|
// } else if (val.enName == 'stuff') {
|
||||||
|
// this.pm.stuff.two = val.pm25
|
||||||
|
// this.pm.stuff.ten = val.pm10
|
||||||
|
// } else if (val.enName == 'ornaments') {
|
||||||
|
// this.pm.ornaments.two = val.pm25
|
||||||
|
// this.pm.ornaments.ten = val.pm10
|
||||||
|
// }
|
||||||
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @函数功能:
|
* @函数功能:
|
||||||
@ -325,7 +344,7 @@ export const useSocketStore = defineStore(Names.socket, {
|
|||||||
cIndex = this.newVerticalNum[pIndex].value.findIndex(item => item.name == val.data.name)
|
cIndex = this.newVerticalNum[pIndex].value.findIndex(item => item.name == val.data.name)
|
||||||
}
|
}
|
||||||
if (cIndex != -1) {
|
if (cIndex != -1) {
|
||||||
if (val.data.val>this.newVerticalNum[pIndex].limit) {
|
if (val.data.val > this.newVerticalNum[pIndex].limit) {
|
||||||
|
|
||||||
let now = new Date().getTime()
|
let now = new Date().getTime()
|
||||||
if (this.newVerticalNum[pIndex].value[cIndex].date == null) {
|
if (this.newVerticalNum[pIndex].value[cIndex].date == null) {
|
||||||
@ -335,7 +354,7 @@ export const useSocketStore = defineStore(Names.socket, {
|
|||||||
|
|
||||||
let time = this.newVerticalNum[pIndex].value[cIndex].time
|
let time = this.newVerticalNum[pIndex].value[cIndex].time
|
||||||
|
|
||||||
this.newVerticalNum[pIndex].value[cIndex].continuous = clacendTime(now,time)
|
this.newVerticalNum[pIndex].value[cIndex].continuous = clacendTime(now, time)
|
||||||
} else {
|
} else {
|
||||||
this.newVerticalNum[pIndex].value[cIndex].date = null
|
this.newVerticalNum[pIndex].value[cIndex].date = null
|
||||||
this.newVerticalNum[pIndex].value[cIndex].time = null
|
this.newVerticalNum[pIndex].value[cIndex].time = null
|
||||||
|
|||||||
@ -172,16 +172,16 @@ export const useSocketStore = defineStore(Names.socketjixiefenchang,{
|
|||||||
* @函数备注:
|
* @函数备注:
|
||||||
*/
|
*/
|
||||||
changePM(val){
|
changePM(val){
|
||||||
if(val.enName=='welding'){
|
if (val.devId == '083e3900-3435-11ed-a7e1-fd42bca6c8c6') {
|
||||||
this.pm.welding.two=val.pm25
|
this.pm.welding.two = val.pm25
|
||||||
this.pm.welding.ten=val.pm10
|
this.pm.welding.ten = val.pm10
|
||||||
}else if(val.enName=='stuff'){
|
} else if (val.devId == 'bcbfb530-88b2-11ed-a926-570995ad0254') {
|
||||||
this.pm.stuff.two=val.pm25
|
this.pm.ornaments.two = val.pm25
|
||||||
this.pm.stuff.ten=val.pm10
|
this.pm.ornaments.ten = val.pm10
|
||||||
}else if(val.enName=='ornaments'){
|
} else if (val.devId == '01336fd0-1fa0-11ed-9223-7db1174970a8') {
|
||||||
this.pm.ornaments.two=val.pm25
|
this.pm.stuff.two = val.pm25
|
||||||
this.pm.ornaments.ten=val.pm10
|
this.pm.stuff.ten = val.pm10
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -1,119 +1,121 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="content-right">
|
<div class="content-right">
|
||||||
<el-row >
|
<el-row @click="toPmData">
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<border2 ref="borderElectriccontrol">
|
<border2 ref="borderElectriccontrol">
|
||||||
<template v-slot>
|
<template v-slot>
|
||||||
<pm name="Electriccontrol" :title="t('messages.pmHanJie')" ref="refwelding"></pm>
|
<pm name="Electriccontrol" :title="t('messages.pmHanJie')" ref="refwelding"></pm>
|
||||||
</template>
|
</template>
|
||||||
</border2>
|
</border2>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<border2 ref="borderfinish">
|
<border2 ref="borderfinish">
|
||||||
<template v-slot>
|
<template v-slot>
|
||||||
<pm name="finish" :title="t('messages.pmJingShi')" ref="refornaments"></pm>
|
<pm name="finish" :title="t('messages.pmJingShi')" ref="refornaments"></pm>
|
||||||
</template>
|
</template>
|
||||||
</border2>
|
</border2>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<border2 ref="borderlarge">
|
<border2 ref="borderlarge">
|
||||||
<template v-slot>
|
<template v-slot>
|
||||||
<pm name="large" :title="t('messages.pmDaJian')" ref="refstuff"></pm>
|
<pm name="large" :title="t('messages.pmDaJian')" ref="refstuff"></pm>
|
||||||
</template>
|
</template>
|
||||||
</border2>
|
</border2>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row >
|
<el-row>
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<border2 ref="borderhumiture">
|
<border2 ref="borderhumiture">
|
||||||
<template v-slot>
|
<template v-slot>
|
||||||
<humiture ref="Refhumiture"></humiture>
|
<humiture ref="Refhumiture"></humiture>
|
||||||
</template>
|
</template>
|
||||||
</border2>
|
</border2>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import border2 from "@/components/borderBox/border2.vue";
|
import border2 from "@/components/borderBox/border2.vue";
|
||||||
import pm from "./chart/pm.vue"
|
import pm from "./chart/pm.vue"
|
||||||
import humiture from './chart/humiture.vue'
|
import humiture from './chart/humiture.vue'
|
||||||
import { calcWH } from "@/components/ts/selfAdaption";
|
import { calcWH } from "@/components/ts/selfAdaption";
|
||||||
import { getHumitureData,getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
|
import { getHumitureData, getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
|
||||||
// import { getHumitureData,getPmtenData, getPmtwoData } from "@/http/environment";
|
// import { getHumitureData,getPmtenData, getPmtwoData } from "@/http/environment";
|
||||||
import {onMounted, reactive, ref, watch} from "vue"
|
import { onMounted, reactive, ref, watch } from "vue"
|
||||||
import { useSocketStore } from "@/store/moduleSocket"
|
import { useSocketStore } from "@/store/moduleSocket"
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useRouter } from "vue-router";
|
||||||
let {t} = useI18n();
|
import { useI18n } from 'vue-i18n'
|
||||||
const store = useSocketStore()
|
let { t } = useI18n();
|
||||||
let props=defineProps<{
|
const store = useSocketStore()
|
||||||
width:number,
|
const router = useRouter()
|
||||||
height:number,
|
let props = defineProps<{
|
||||||
}>()
|
width: number,
|
||||||
|
height: number,
|
||||||
|
}>()
|
||||||
|
|
||||||
watch(()=>props,(newVal, oldVal)=>{
|
watch(() => props, (newVal, oldVal) => {
|
||||||
//监听父组件宽高变化，随时重置本组件尺寸
|
//监听父组件宽高变化，随时重置本组件尺寸
|
||||||
reset(newVal)
|
reset(newVal)
|
||||||
},{immediate:true,deep:true,flush:'post'})
|
}, { immediate: true, deep: true, flush: 'post' })
|
||||||
|
|
||||||
//边框dom
|
//边框dom
|
||||||
let borderElectriccontrol=ref()
|
let borderElectriccontrol = ref()
|
||||||
let borderfinish=ref()
|
let borderfinish = ref()
|
||||||
let borderlarge=ref()
|
let borderlarge = ref()
|
||||||
let borderhumiture=ref()
|
let borderhumiture = ref()
|
||||||
|
|
||||||
//内容dom
|
//内容dom
|
||||||
let refwelding=ref()
|
let refwelding = ref()
|
||||||
let refornaments=ref()
|
let refornaments = ref()
|
||||||
let refstuff=ref()
|
let refstuff = ref()
|
||||||
let Refhumiture=ref()
|
let Refhumiture = ref()
|
||||||
function reset(val:any){
|
function reset(val: any) {
|
||||||
//宽高为0时跳出该方法
|
//宽高为0时跳出该方法
|
||||||
if(!val.width && !val.height) return
|
if (!val.width && !val.height) return
|
||||||
|
|
||||||
//重置边框尺寸
|
//重置边框尺寸
|
||||||
resetBorder()
|
resetBorder()
|
||||||
//重置盒子尺寸
|
//重置盒子尺寸
|
||||||
threebox(val.width,val.height)
|
threebox(val.width, val.height)
|
||||||
onebox(val.width,val.height)
|
onebox(val.width, val.height)
|
||||||
}
|
|
||||||
|
|
||||||
const resetBorder=()=>{
|
|
||||||
borderElectriccontrol.value.resetWH()
|
|
||||||
borderfinish.value.resetWH()
|
|
||||||
borderlarge.value.resetWH()
|
|
||||||
borderhumiture.value.resetWH()
|
|
||||||
}
|
|
||||||
|
|
||||||
const threebox=(width:any,height:any)=>{
|
|
||||||
let a=calcWH(height,width,3,3,0)
|
|
||||||
//修改高度
|
|
||||||
refwelding.value.setchartWH(a.oWidth,a.oHeight)
|
|
||||||
refornaments.value.setchartWH(a.oWidth,a.oHeight)
|
|
||||||
refstuff.value.setchartWH(a.oWidth,a.oHeight)
|
|
||||||
}
|
}
|
||||||
const onebox=(width:any,height:any)=>{
|
|
||||||
let a=calcWH(height,width,3,1,0)
|
const resetBorder = () => {
|
||||||
|
borderElectriccontrol.value.resetWH()
|
||||||
|
borderfinish.value.resetWH()
|
||||||
|
borderlarge.value.resetWH()
|
||||||
|
borderhumiture.value.resetWH()
|
||||||
|
}
|
||||||
|
|
||||||
|
const threebox = (width: any, height: any) => {
|
||||||
|
let a = calcWH(height, width, 3, 3, 0)
|
||||||
//修改高度
|
//修改高度
|
||||||
Refhumiture.value.setchartWH(a.oWidth,a.oHeight*2-49)
|
refwelding.value.setchartWH(a.oWidth, a.oHeight)
|
||||||
|
refornaments.value.setchartWH(a.oWidth, a.oHeight)
|
||||||
|
refstuff.value.setchartWH(a.oWidth, a.oHeight)
|
||||||
|
}
|
||||||
|
const onebox = (width: any, height: any) => {
|
||||||
|
let a = calcWH(height, width, 3, 1, 0)
|
||||||
|
//修改高度
|
||||||
|
Refhumiture.value.setchartWH(a.oWidth, a.oHeight * 2 - 49)
|
||||||
}
|
}
|
||||||
watch(
|
watch(
|
||||||
() => store.humiture,
|
() => store.humiture,
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
//动态更新echarts
|
//动态更新echarts
|
||||||
// if(oldVal)
|
// if(oldVal)
|
||||||
Refhumiture.value.setData(newVal,2)
|
Refhumiture.value.setData(newVal, 2)
|
||||||
},
|
},
|
||||||
{ deep: true, flush: "post" }
|
{ deep: true, flush: "post" }
|
||||||
);
|
);
|
||||||
async function gethumitureData(){
|
async function gethumitureData() {
|
||||||
let result:any = await getHumitureData({})
|
let result: any = await getHumitureData({})
|
||||||
|
|
||||||
if(result.code==200){
|
if (result.code == 200) {
|
||||||
Refhumiture.value.setData(result.data,1)
|
Refhumiture.value.setData(result.data, 1)
|
||||||
store.$patch((state)=>{
|
store.$patch((state) => {
|
||||||
state.humiture=result.data
|
state.humiture = result.data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -126,9 +128,9 @@ watch(
|
|||||||
() => store.pm,
|
() => store.pm,
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
//动态更新echarts
|
//动态更新echarts
|
||||||
refwelding.value.setData(newVal.welding,2)
|
refwelding.value.setData(newVal.welding, 2)
|
||||||
refornaments.value.setData(newVal.ornaments,2)
|
refornaments.value.setData(newVal.ornaments, 2)
|
||||||
refstuff.value.setData(newVal.stuff,2)
|
refstuff.value.setData(newVal.stuff, 2)
|
||||||
},
|
},
|
||||||
{ deep: true, flush: "post" }
|
{ deep: true, flush: "post" }
|
||||||
);
|
);
|
||||||
@ -137,48 +139,75 @@ watch(
|
|||||||
* @出口参数:
|
* @出口参数:
|
||||||
* @函数备注:
|
* @函数备注:
|
||||||
*/
|
*/
|
||||||
async function getPmtwoDatafun(){
|
async function getPmtwoDatafun() {
|
||||||
let resulttwo:any = await getPmtwoData()
|
let resulttwo: any = await getPmtwoData()
|
||||||
if(resulttwo.code==200){
|
if (resulttwo.code == 200) {
|
||||||
return resulttwo
|
return resulttwo
|
||||||
}
|
}
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getPmtenDatafun(){
|
async function getPmtenDatafun() {
|
||||||
let resultten:any = await getPmtenData()
|
let resultten: any = await getPmtenData()
|
||||||
if(resultten.code==200){
|
if (resultten.code == 200) {
|
||||||
return resultten
|
return resultten
|
||||||
}
|
}
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
async function getPmData(){
|
async function getPmData() {
|
||||||
// let resulttwo:any = await getPmtwoData()
|
// let resulttwo:any = await getPmtwoData()
|
||||||
// let resultten:any = await getPmtenData()
|
// let resultten:any = await getPmtenData()
|
||||||
let data=reactive({welding:{two:null,ten:null},stuff:{two:null,ten:null},ornaments:{two:null,ten:null}})
|
|
||||||
Promise.all([getPmtwoDatafun(),getPmtenDatafun()]).then((res)=>{
|
//焊接车间 083e3900-3435-11ed-a7e1-fd42bca6c8c6
|
||||||
if(res){
|
//精饰车间 bcbfb530-88b2-11ed-a926-570995ad0254
|
||||||
res[0].data.forEach(ele=>{
|
//大件车间 01336fd0-1fa0-11ed-9223-7db1174970a8
|
||||||
if(data[ele.enName]){
|
let arr = ['01336fd0-1fa0-11ed-9223-7db1174970a8', '083e3900-3435-11ed-a7e1-fd42bca6c8c6', 'bcbfb530-88b2-11ed-a926-570995ad0254']
|
||||||
data[ele.enName].two=ele.value
|
let data = reactive({ welding: { two: null, ten: null }, stuff: { two: null, ten: null }, ornaments: { two: null, ten: null } })
|
||||||
}
|
Promise.all([getPmtwoDatafun(), getPmtenDatafun()]).then((res) => {
|
||||||
|
if (res) {
|
||||||
|
res[0].data.forEach(ele => {
|
||||||
|
|
||||||
|
switch (ele.devId) {
|
||||||
|
case '083e3900-3435-11ed-a7e1-fd42bca6c8c6':
|
||||||
|
data.welding.two = ele.value
|
||||||
|
break;
|
||||||
|
case 'bcbfb530-88b2-11ed-a926-570995ad0254':
|
||||||
|
data.ornaments.two = ele.value
|
||||||
|
break;
|
||||||
|
case '01336fd0-1fa0-11ed-9223-7db1174970a8':
|
||||||
|
data.stuff.two = ele.value
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if(res){
|
if (res) {
|
||||||
res[1].data.forEach(ele=>{
|
res[1].data.forEach(ele => {
|
||||||
if(data[ele.enName]){
|
|
||||||
data[ele.enName].ten=ele.value
|
switch (ele.devId) {
|
||||||
}
|
case '083e3900-3435-11ed-a7e1-fd42bca6c8c6':
|
||||||
|
data.welding.ten = ele.value
|
||||||
|
break;
|
||||||
|
case 'bcbfb530-88b2-11ed-a926-570995ad0254':
|
||||||
|
data.ornaments.ten = ele.value
|
||||||
|
break;
|
||||||
|
case '01336fd0-1fa0-11ed-9223-7db1174970a8':
|
||||||
|
data.stuff.ten = ele.value
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
refwelding.value.setData(data.welding,1)
|
refwelding.value.setData(data.welding, 1)
|
||||||
refornaments.value.setData(data.ornaments,1)
|
refornaments.value.setData(data.ornaments, 1)
|
||||||
refstuff.value.setData(data.stuff,1)
|
refstuff.value.setData(data.stuff, 1)
|
||||||
|
|
||||||
store.$patch((state)=>{
|
store.$patch((state) => {
|
||||||
state.pm=data
|
state.pm = data
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
// if(resulttwo.code==200){
|
// if(resulttwo.code==200){
|
||||||
@ -201,16 +230,19 @@ async function getPmData(){
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(()=>{
|
function toPmData() {
|
||||||
|
router.push({ path: '/pmData' })
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
gethumitureData()
|
gethumitureData()
|
||||||
getPmData()
|
getPmData()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scope>
|
<style scope>
|
||||||
.content-right{
|
.content-right {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,120 +1,123 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="content-right">
|
<div class="content-right">
|
||||||
<el-row >
|
<el-row @click="toPmData">
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<border2 ref="borderElectriccontrol">
|
<border2 ref="borderElectriccontrol">
|
||||||
<template v-slot>
|
<template v-slot>
|
||||||
<pm name="Electriccontrol" :title="t('messages.pmHanJie')" ref="refwelding"></pm>
|
<pm name="Electriccontrol" :title="t('messages.pmHanJie')" ref="refwelding"></pm>
|
||||||
</template>
|
</template>
|
||||||
</border2>
|
</border2>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<border2 ref="borderfinish">
|
<border2 ref="borderfinish">
|
||||||
<template v-slot>
|
<template v-slot>
|
||||||
<pm name="finish" :title="t('messages.pmJingShi')" ref="refornaments"></pm>
|
<pm name="finish" :title="t('messages.pmJingShi')" ref="refornaments"></pm>
|
||||||
</template>
|
</template>
|
||||||
</border2>
|
</border2>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<border2 ref="borderlarge">
|
<border2 ref="borderlarge">
|
||||||
<template v-slot>
|
<template v-slot>
|
||||||
<pm name="large" :title="t('messages.pmDaJian')" ref="refstuff"></pm>
|
<pm name="large" :title="t('messages.pmDaJian')" ref="refstuff"></pm>
|
||||||
</template>
|
</template>
|
||||||
</border2>
|
</border2>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row >
|
<el-row>
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<border2 ref="borderhumiture">
|
<border2 ref="borderhumiture">
|
||||||
<template v-slot>
|
<template v-slot>
|
||||||
<humiture ref="Refhumiture"></humiture>
|
<humiture ref="Refhumiture"></humiture>
|
||||||
</template>
|
</template>
|
||||||
</border2>
|
</border2>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import border2 from "@/components/borderBox/border2.vue";
|
import border2 from "@/components/borderBox/border2.vue";
|
||||||
import pm from "./chart/pm.vue"
|
import pm from "./chart/pm.vue"
|
||||||
import humiture from './chart/humiture.vue'
|
import humiture from './chart/humiture.vue'
|
||||||
import { calcWH } from "@/components/ts/selfAdaption";
|
import { calcWH } from "@/components/ts/selfAdaption";
|
||||||
import { getHumitureData,getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
|
import { getHumitureData, getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
|
||||||
// import { getHumitureData,getPmtenData, getPmtwoData } from "@/http/environment";
|
// import { getHumitureData,getPmtenData, getPmtwoData } from "@/http/environment";
|
||||||
import {onMounted, ref, watch} from "vue"
|
import { onMounted, ref, watch } from "vue"
|
||||||
import { useSocketStore } from "@/store/moduleSocketjixie";
|
import { useRouter } from "vue-router";
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useSocketStore } from "@/store/moduleSocketjixie";
|
||||||
let {t} = useI18n();
|
import { useI18n } from 'vue-i18n'
|
||||||
const store = useSocketStore()
|
let { t } = useI18n();
|
||||||
let props=defineProps<{
|
|
||||||
width:number,
|
|
||||||
height:number,
|
|
||||||
}>()
|
|
||||||
|
|
||||||
watch(()=>props,(newVal, oldVal)=>{
|
const router = useRouter()
|
||||||
//监听父组件宽高变化，随时重置本组件尺寸
|
const store = useSocketStore()
|
||||||
reset(newVal)
|
let props = defineProps<{
|
||||||
},{immediate:true,deep:true,flush:'post'})
|
width: number,
|
||||||
|
height: number,
|
||||||
|
}>()
|
||||||
|
|
||||||
//边框dom
|
watch(() => props, (newVal, oldVal) => {
|
||||||
let borderElectriccontrol=ref()
|
//监听父组件宽高变化，随时重置本组件尺寸
|
||||||
let borderfinish=ref()
|
reset(newVal)
|
||||||
let borderlarge=ref()
|
}, { immediate: true, deep: true, flush: 'post' })
|
||||||
let borderhumiture=ref()
|
|
||||||
|
//边框dom
|
||||||
|
let borderElectriccontrol = ref()
|
||||||
|
let borderfinish = ref()
|
||||||
|
let borderlarge = ref()
|
||||||
|
let borderhumiture = ref()
|
||||||
|
|
||||||
//内容dom
|
//内容dom
|
||||||
let refwelding=ref()
|
let refwelding = ref()
|
||||||
let refornaments=ref()
|
let refornaments = ref()
|
||||||
let refstuff=ref()
|
let refstuff = ref()
|
||||||
let Refhumiture=ref()
|
let Refhumiture = ref()
|
||||||
function reset(val:any){
|
function reset(val: any) {
|
||||||
//宽高为0时跳出该方法
|
//宽高为0时跳出该方法
|
||||||
if(!val.width && !val.height) return
|
if (!val.width && !val.height) return
|
||||||
|
|
||||||
//重置边框尺寸
|
//重置边框尺寸
|
||||||
resetBorder()
|
resetBorder()
|
||||||
//重置盒子尺寸
|
//重置盒子尺寸
|
||||||
threebox(val.width,val.height)
|
threebox(val.width, val.height)
|
||||||
onebox(val.width,val.height)
|
onebox(val.width, val.height)
|
||||||
}
|
|
||||||
|
|
||||||
const resetBorder=()=>{
|
|
||||||
borderElectriccontrol.value.resetWH()
|
|
||||||
borderfinish.value.resetWH()
|
|
||||||
borderlarge.value.resetWH()
|
|
||||||
borderhumiture.value.resetWH()
|
|
||||||
}
|
|
||||||
|
|
||||||
const threebox=(width:any,height:any)=>{
|
|
||||||
let a=calcWH(height,width,3,3,0)
|
|
||||||
//修改高度
|
|
||||||
refwelding.value.setchartWH(a.oWidth,a.oHeight)
|
|
||||||
refornaments.value.setchartWH(a.oWidth,a.oHeight)
|
|
||||||
refstuff.value.setchartWH(a.oWidth,a.oHeight)
|
|
||||||
}
|
}
|
||||||
const onebox=(width:any,height:any)=>{
|
|
||||||
let a=calcWH(height,width,3,1,0)
|
const resetBorder = () => {
|
||||||
|
borderElectriccontrol.value.resetWH()
|
||||||
|
borderfinish.value.resetWH()
|
||||||
|
borderlarge.value.resetWH()
|
||||||
|
borderhumiture.value.resetWH()
|
||||||
|
}
|
||||||
|
|
||||||
|
const threebox = (width: any, height: any) => {
|
||||||
|
let a = calcWH(height, width, 3, 3, 0)
|
||||||
//修改高度
|
//修改高度
|
||||||
Refhumiture.value.setchartWH(a.oWidth,a.oHeight*2-49)
|
refwelding.value.setchartWH(a.oWidth, a.oHeight)
|
||||||
|
refornaments.value.setchartWH(a.oWidth, a.oHeight)
|
||||||
|
refstuff.value.setchartWH(a.oWidth, a.oHeight)
|
||||||
|
}
|
||||||
|
const onebox = (width: any, height: any) => {
|
||||||
|
let a = calcWH(height, width, 3, 1, 0)
|
||||||
|
//修改高度
|
||||||
|
Refhumiture.value.setchartWH(a.oWidth, a.oHeight * 2 - 49)
|
||||||
}
|
}
|
||||||
watch(
|
watch(
|
||||||
() => store.humiture,
|
() => store.humiture,
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
//动态更新echarts
|
//动态更新echarts
|
||||||
// if(oldVal)
|
// if(oldVal)
|
||||||
Refhumiture.value.setData(newVal,2)
|
Refhumiture.value.setData(newVal, 2)
|
||||||
},
|
},
|
||||||
{ deep: true, flush: "post" }
|
{ deep: true, flush: "post" }
|
||||||
);
|
);
|
||||||
async function gethumitureData(){
|
async function gethumitureData() {
|
||||||
let pageValue='6,7,9,10,11'
|
let pageValue = '6,7,9,10,11'
|
||||||
let result:any = await getHumitureData({deptIds:pageValue})
|
let result: any = await getHumitureData({ deptIds: pageValue })
|
||||||
|
|
||||||
if(result.code==200){
|
if (result.code == 200) {
|
||||||
Refhumiture.value.setData(result.data,1)
|
Refhumiture.value.setData(result.data, 1)
|
||||||
store.$patch((state)=>{
|
store.$patch((state) => {
|
||||||
state.humiture=result.data
|
state.humiture = result.data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -127,9 +130,9 @@ watch(
|
|||||||
() => store.pm,
|
() => store.pm,
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
//动态更新echarts
|
//动态更新echarts
|
||||||
refwelding.value.setData(newVal.welding,2)
|
refwelding.value.setData(newVal.welding, 2)
|
||||||
refornaments.value.setData(newVal.ornaments,2)
|
refornaments.value.setData(newVal.ornaments, 2)
|
||||||
refstuff.value.setData(newVal.stuff,2)
|
refstuff.value.setData(newVal.stuff, 2)
|
||||||
},
|
},
|
||||||
{ deep: true, flush: "post" }
|
{ deep: true, flush: "post" }
|
||||||
);
|
);
|
||||||
@ -138,46 +141,71 @@ watch(
|
|||||||
* @出口参数:
|
* @出口参数:
|
||||||
* @函数备注:
|
* @函数备注:
|
||||||
*/
|
*/
|
||||||
async function getPmData(){
|
async function getPmData() {
|
||||||
let resulttwo:any = await getPmtwoData()
|
let resulttwo: any = await getPmtwoData()
|
||||||
let resultten:any = await getPmtenData()
|
let resultten: any = await getPmtenData()
|
||||||
let data={welding:{two:null,ten:null},stuff:{two:null,ten:null},ornaments:{two:null,ten:null}}
|
let data = { welding: { two: null, ten: null }, stuff: { two: null, ten: null }, ornaments: { two: null, ten: null } }
|
||||||
if(resulttwo.code==200){
|
if (resulttwo) {
|
||||||
resulttwo.data.forEach(res=>{
|
resulttwo.data.forEach(ele => {
|
||||||
if(data[res.enName]){
|
|
||||||
data[res.enName].two=res.value
|
switch (ele.devId) {
|
||||||
|
case '083e3900-3435-11ed-a7e1-fd42bca6c8c6':
|
||||||
|
data.welding.two = ele.value
|
||||||
|
break;
|
||||||
|
case 'bcbfb530-88b2-11ed-a926-570995ad0254':
|
||||||
|
data.ornaments.two = ele.value
|
||||||
|
break;
|
||||||
|
case '01336fd0-1fa0-11ed-9223-7db1174970a8':
|
||||||
|
data.stuff.two = ele.value
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if(resultten.code==200){
|
|
||||||
resultten.data.forEach(res=>{
|
|
||||||
if(data[res.enName]){
|
|
||||||
data[res.enName].ten=res.value
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
refwelding.value.setData(data.welding,1)
|
if (resultten) {
|
||||||
refornaments.value.setData(data.ornaments,1)
|
resultten.data.forEach(ele => {
|
||||||
refstuff.value.setData(data.stuff,1)
|
|
||||||
|
switch (ele.devId) {
|
||||||
|
case '083e3900-3435-11ed-a7e1-fd42bca6c8c6':
|
||||||
|
data.welding.ten = ele.value
|
||||||
|
break;
|
||||||
|
case 'bcbfb530-88b2-11ed-a926-570995ad0254':
|
||||||
|
data.ornaments.ten = ele.value
|
||||||
|
break;
|
||||||
|
case '01336fd0-1fa0-11ed-9223-7db1174970a8':
|
||||||
|
data.stuff.ten = ele.value
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
refwelding.value.setData(data.welding, 1)
|
||||||
|
refornaments.value.setData(data.ornaments, 1)
|
||||||
|
refstuff.value.setData(data.stuff, 1)
|
||||||
|
|
||||||
|
|
||||||
store.$patch((state)=>{
|
store.$patch((state) => {
|
||||||
state.pm=data
|
state.pm = data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(()=>{
|
function toPmData() {
|
||||||
|
router.push({ path: '/pmData' })
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
gethumitureData()
|
gethumitureData()
|
||||||
getPmData()
|
getPmData()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scope>
|
<style scope>
|
||||||
.content-right{
|
.content-right {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
</style>
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user