248 lines
6.3 KiB
Vue
248 lines
6.3 KiB
Vue
<template>
|
|
<div class="content-right">
|
|
<el-row @click="toPmData">
|
|
<el-col :span="8">
|
|
<border2 ref="borderElectriccontrol">
|
|
<template v-slot>
|
|
<pm name="Electriccontrol" :title="t('messages.pmHanJie')" ref="refwelding"></pm>
|
|
</template>
|
|
</border2>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<border2 ref="borderfinish">
|
|
<template v-slot>
|
|
<pm name="finish" :title="t('messages.pmJingShi')" ref="refornaments"></pm>
|
|
</template>
|
|
</border2>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<border2 ref="borderlarge">
|
|
<template v-slot>
|
|
<pm name="large" :title="t('messages.pmDaJian')" ref="refstuff"></pm>
|
|
</template>
|
|
</border2>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<border2 ref="borderhumiture">
|
|
<template v-slot>
|
|
<humiture ref="Refhumiture"></humiture>
|
|
</template>
|
|
</border2>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import border2 from "@/components/borderBox/border2.vue";
|
|
import pm from "./chart/pm.vue"
|
|
import humiture from './chart/humiture.vue'
|
|
import { calcWH } from "@/components/ts/selfAdaption";
|
|
import { getHumitureData, getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
|
|
// import { getHumitureData,getPmtenData, getPmtwoData } from "@/http/environment";
|
|
import { onMounted, reactive, ref, watch } from "vue"
|
|
import { useSocketStore } from "@/store/moduleSocket"
|
|
import { useRouter } from "vue-router";
|
|
import { useI18n } from 'vue-i18n'
|
|
let { t } = useI18n();
|
|
const store = useSocketStore()
|
|
const router = useRouter()
|
|
let props = defineProps<{
|
|
width: number,
|
|
height: number,
|
|
}>()
|
|
|
|
watch(() => props, (newVal, oldVal) => {
|
|
//监听父组件宽高变化，随时重置本组件尺寸
|
|
reset(newVal)
|
|
}, { immediate: true, deep: true, flush: 'post' })
|
|
|
|
//边框dom
|
|
let borderElectriccontrol = ref()
|
|
let borderfinish = ref()
|
|
let borderlarge = ref()
|
|
let borderhumiture = ref()
|
|
|
|
//内容dom
|
|
let refwelding = ref()
|
|
let refornaments = ref()
|
|
let refstuff = ref()
|
|
let Refhumiture = ref()
|
|
function reset(val: any) {
|
|
//宽高为0时跳出该方法
|
|
if (!val.width && !val.height) return
|
|
|
|
//重置边框尺寸
|
|
resetBorder()
|
|
//重置盒子尺寸
|
|
threebox(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)
|
|
//修改高度
|
|
Refhumiture.value.setchartWH(a.oWidth, a.oHeight * 2 - 49)
|
|
}
|
|
watch(
|
|
() => store.humiture,
|
|
(newVal, oldVal) => {
|
|
//动态更新echarts
|
|
// if(oldVal)
|
|
Refhumiture.value.setData(newVal, 2)
|
|
},
|
|
{ deep: true, flush: "post" }
|
|
);
|
|
async function gethumitureData() {
|
|
let result: any = await getHumitureData({})
|
|
|
|
if (result.code == 200) {
|
|
Refhumiture.value.setData(result.data, 1)
|
|
store.$patch((state) => {
|
|
state.humiture = result.data
|
|
})
|
|
}
|
|
}
|
|
/**
|
|
* @函数功能: 监听缓存数据数据改变更新视图
|
|
* @出口参数:
|
|
* @函数备注:
|
|
*/
|
|
watch(
|
|
() => store.pm,
|
|
(newVal, oldVal) => {
|
|
//动态更新echarts
|
|
refwelding.value.setData(newVal.welding, 2)
|
|
refornaments.value.setData(newVal.ornaments, 2)
|
|
refstuff.value.setData(newVal.stuff, 2)
|
|
},
|
|
{ deep: true, flush: "post" }
|
|
);
|
|
/**
|
|
* @函数功能: 获取所有空气质量数据
|
|
* @出口参数:
|
|
* @函数备注:
|
|
*/
|
|
async function getPmtwoDatafun() {
|
|
let resulttwo: any = await getPmtwoData()
|
|
if (resulttwo.code == 200) {
|
|
return resulttwo
|
|
}
|
|
return false
|
|
}
|
|
|
|
async function getPmtenDatafun() {
|
|
let resultten: any = await getPmtenData()
|
|
if (resultten.code == 200) {
|
|
return resultten
|
|
}
|
|
return false
|
|
}
|
|
async function getPmData() {
|
|
// let resulttwo:any = await getPmtwoData()
|
|
// let resultten:any = await getPmtenData()
|
|
|
|
//焊接车间 083e3900-3435-11ed-a7e1-fd42bca6c8c6
|
|
//精饰车间 bcbfb530-88b2-11ed-a926-570995ad0254
|
|
//大件车间 01336fd0-1fa0-11ed-9223-7db1174970a8
|
|
let arr = ['01336fd0-1fa0-11ed-9223-7db1174970a8', '083e3900-3435-11ed-a7e1-fd42bca6c8c6', 'bcbfb530-88b2-11ed-a926-570995ad0254']
|
|
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) {
|
|
res[1].data.forEach(ele => {
|
|
|
|
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) => {
|
|
state.pm = data
|
|
})
|
|
})
|
|
|
|
// if(resulttwo.code==200){
|
|
// resulttwo.data.forEach(res=>{
|
|
// if(data[res.name]){
|
|
// data[res.name].two=res.value
|
|
// }
|
|
|
|
// })
|
|
// }
|
|
// if(resultten.code==200){
|
|
// resultten.data.forEach(res=>{
|
|
// if(data[res.name]){
|
|
// data[res.name].ten=res.value
|
|
// }
|
|
// })
|
|
// }
|
|
|
|
|
|
|
|
}
|
|
|
|
function toPmData() {
|
|
router.push({ path: '/pmData' })
|
|
}
|
|
|
|
onMounted(() => {
|
|
gethumitureData()
|
|
getPmData()
|
|
})
|
|
</script>
|
|
|
|
<style scope>
|
|
.content-right {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|