You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
307 lines
12 KiB
307 lines
12 KiB
2 years ago
|
<template>
|
||
|
|
<div class="devicePrt">
|
||
|
|
<div class="deviceImg deviceImgA" v-if="zoneType === 1">
|
||
|
|
<div class="card card_a">
|
||
|
|
<div class="dataInfo" v-html="doubleCount('013', 0)"></div>
|
||
|
|
<div class="dataInfo" v-html="doubleCount('011', 0)"></div>
|
||
|
|
<div class="dataInfo" v-html="doubleCount('014', 0)"></div>
|
||
|
|
<div class="dataInfo" v-html="doubleCount('012', 0)"></div>
|
||
|
|
</div>
|
||
|
|
<div class="card card_b">
|
||
|
|
<div class="dataInfo" v-html="doubleCount('002', 0)"></div>
|
||
|
|
<div class="dataInfo" v-html="doubleCount('007', 0)"></div>
|
||
|
|
</div>
|
||
|
|
<div class="card card_c">
|
||
|
|
<div class="dataInfo dataFlex">
|
||
|
|
<div class="flexItem" v-html="doubleCount('047', 0)"></div>
|
||
|
|
<div class="flexItem" v-html="doubleCount('045', 0)"></div>
|
||
|
|
</div>
|
||
|
|
<div class="dataInfo dataFlex">
|
||
|
|
<div class="flexItem" v-html="doubleCount('048', 0)"></div>
|
||
|
|
<div class="flexItem" v-html="doubleCount('046', 0)"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card card_f">
|
||
|
|
<div class="dataInfo" v-html="doubleCount('015', 0)"></div>
|
||
|
|
</div>
|
||
|
|
<img class="deviceImg" src="@/assets/images/device01.gif" />
|
||
|
|
</div>
|
||
|
|
<div class="deviceImg deviceImgB" v-if="zoneType === 2">
|
||
|
|
<div class="card card_a">
|
||
|
|
<div class="dataInfo" v-html="doubleCount('013', 0)"></div>
|
||
|
|
<div class="dataInfo" v-html="doubleCount('011', 0)"></div>
|
||
|
|
<div class="dataInfo" v-html="doubleCount('014', 0)"></div>
|
||
|
|
<div class="dataInfo" v-html="doubleCount('012', 0)"></div>
|
||
|
|
</div>
|
||
|
|
<div class="card card_b">
|
||
|
|
<div class="dataInfo" v-html="doubleCount('002', 0)"></div>
|
||
|
|
<div class="dataInfo" v-html="doubleCount('007', 0)"></div>
|
||
|
|
</div>
|
||
|
|
<div class="card card_c">
|
||
|
|
<div class="dataInfo dataFlex">
|
||
|
|
<div class="flexItem" v-html="doubleCount('047', 0)"></div>
|
||
|
|
<div class="flexItem" v-html="doubleCount('045', 0)"></div>
|
||
|
|
</div>
|
||
|
|
<div class="dataInfo dataFlex">
|
||
|
|
<div class="flexItem" v-html="doubleCount('048', 0)"></div>
|
||
|
|
<div class="flexItem" v-html="doubleCount('046', 0)"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card card_d">
|
||
|
|
<div class="dataInfo dataFlex">
|
||
|
|
<div class="flexItem" v-html="doubleCount('047', 1)"></div>
|
||
|
|
<div class="flexItem" v-html="doubleCount('045', 1)"></div>
|
||
|
|
</div>
|
||
|
|
<div class="dataInfo dataFlex">
|
||
|
|
<div class="flexItem" v-html="doubleCount('048', 1)"></div>
|
||
|
|
<div class="flexItem" v-html="doubleCount('046', 1)"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card card_f">
|
||
|
|
<div class="dataInfo" v-html="doubleCount('015', 0)"></div>
|
||
|
|
</div>
|
||
|
|
<img class="deviceImg" src="@/assets/images/device02.jpg" />
|
||
|
|
</div>
|
||
|
|
<div class="deviceImg deviceImgC" v-if="zoneType === 3">
|
||
|
|
<div class="card card_a">
|
||
|
|
<div class="dataInfo" v-html="doubleCount('013', 0)"></div>
|
||
|
|
<div class="dataInfo" v-html="doubleCount('011', 0)"></div>
|
||
|
|
<div class="dataInfo" v-html="doubleCount('014', 0)"></div>
|
||
|
|
<div class="dataInfo" v-html="doubleCount('012', 0)"></div>
|
||
|
|
</div>
|
||
|
|
<div class="card card_b">
|
||
|
|
<div class="dataInfo" v-html="doubleCount('002', 0)"></div>
|
||
|
|
<div class="dataInfo" v-html="doubleCount('007', 0)"></div>
|
||
|
|
</div>
|
||
|
|
<div class="card card_c">
|
||
|
|
<div class="dataInfo dataFlex">
|
||
|
|
<div class="flexItem" v-html="doubleCount('047', 0)"></div>
|
||
|
|
<div class="flexItem" v-html="doubleCount('045', 0)"></div>
|
||
|
|
</div>
|
||
|
|
<div class="dataInfo dataFlex">
|
||
|
|
<div class="flexItem" v-html="doubleCount('048', 0)"></div>
|
||
|
|
<div class="flexItem" v-html="doubleCount('046', 0)"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card card_d">
|
||
|
|
<div class="dataInfo dataFlex">
|
||
|
|
<div class="flexItem" v-html="doubleCount('047', 1)"></div>
|
||
|
|
<div class="flexItem" v-html="doubleCount('045', 1)"></div>
|
||
|
|
</div>
|
||
|
|
<div class="dataInfo dataFlex">
|
||
|
|
<div class="flexItem" v-html="doubleCount('048', 1)"></div>
|
||
|
|
<div class="flexItem" v-html="doubleCount('046', 1)"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card card_e">
|
||
|
|
<div class="dataInfo dataFlex">
|
||
|
|
<div class="flexItem" v-html="doubleCount('047', 2)"></div>
|
||
|
|
<div class="flexItem" v-html="doubleCount('045', 2)"></div>
|
||
|
|
</div>
|
||
|
|
<div class="dataInfo dataFlex">
|
||
|
|
<div class="flexItem" v-html="doubleCount('048', 2)"></div>
|
||
|
|
<div class="flexItem" v-html="doubleCount('046', 2)"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card card_f">
|
||
|
|
<div class="dataInfo" v-html="doubleCount('015', 0)"></div>
|
||
|
|
</div>
|
||
|
|
<img class="deviceImg" src="@/assets/images/device03.jpg" />
|
||
|
|
</div>
|
||
|
|
<!-- <div class="deviceImg deviceImgA" v-if="zoneType===1">
|
||
|
|
<div class="dataInfo dataInfo0" v-html="doubleCount('002',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo1" v-html="doubleCount('007',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo2" v-html="doubleCount('013',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo3" v-html="doubleCount('011',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo4" v-html="doubleCount('014',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo5" v-html="doubleCount('012',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo6" v-html="doubleCount('047',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo7" v-html="doubleCount('045',0)"></div>
|
||
|
|
<img class="deviceImg" src="@/assets/images/device01.gif" />
|
||
|
|
</div>
|
||
|
|
<div class="deviceImg deviceImgB" v-if="zoneType===2">
|
||
|
|
<div class="dataInfo dataInfo0" v-html="doubleCount('002',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo1" v-html="doubleCount('007',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo2" v-html="doubleCount('013',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo3" v-html="doubleCount('011',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo4" v-html="doubleCount('014',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo5" v-html="doubleCount('012',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo6" v-html="doubleCount('047',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo7" v-html="doubleCount('045',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo8" v-html="doubleCount('047',1)"></div>
|
||
|
|
<div class="dataInfo dataInfo9" v-html="doubleCount('045',1)"></div>
|
||
|
|
<img class="deviceImg" src="@/assets/images/device02.jpg" />
|
||
|
|
</div>
|
||
|
|
<div class="deviceImg deviceImgC" v-if="zoneType===3">
|
||
|
|
<div class="dataInfo dataInfo0" v-html="doubleCount('002',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo1" v-html="doubleCount('007',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo2" v-html="doubleCount('013',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo3" v-html="doubleCount('011',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo4" v-html="doubleCount('014',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo5" v-html="doubleCount('012',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo6" v-html="doubleCount('047',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo7" v-html="doubleCount('045',0)"></div>
|
||
|
|
<div class="dataInfo dataInfo8" v-html="doubleCount('047',1)"></div>
|
||
|
|
<div class="dataInfo dataInfo9" v-html="doubleCount('045',1)"></div>
|
||
|
|
<div class="dataInfo dataInfo10" v-html="doubleCount('047',2)"></div>
|
||
|
|
<div class="dataInfo dataInfo11" v-html="doubleCount('045',2)"></div>
|
||
|
|
<img class="deviceImg" src="@/assets/images/device03.jpg" />
|
||
|
|
</div> -->
|
||
|
|
<div class="devicInfo">
|
||
|
|
<div class="valves">
|
||
|
|
<div class="title l_green">阀门控制</div>
|
||
|
|
<div class="info">
|
||
|
|
<!-- <div class="select orange">
|
||
|
|
长岛三期分区参数选择:
|
||
|
|
<n-button class="orange" type="info" size="small">
|
||
|
|
低区
|
||
|
|
</n-button>
|
||
|
|
<n-button class="orange" type="info" size="small">
|
||
|
|
中区
|
||
|
|
</n-button>
|
||
|
|
<n-button class="orange" type="info" size="small">
|
||
|
|
高区
|
||
|
|
</n-button>
|
||
|
|
</div> -->
|
||
|
|
<div class="table">
|
||
|
|
<div class="item" v-for="(item, index) in infoData" :key="index">
|
||
|
|
<div class="lable l_green">{{ item.label }}</div>
|
||
|
|
<div class="parameters">
|
||
|
|
<span class="name" v-for="(res, index) in item.header_valve" :key="index">{{ res.label }}:{{ res.value }}
|
||
|
|
{{ res.paramUnit }}</span>
|
||
|
|
<!-- <div class="set">
|
||
|
|
<span class="orange">设定开度:100.0%</span>
|
||
|
|
<span class="l_blue">反馈开度:100.0%</span>
|
||
|
|
</div> -->
|
||
|
|
<!-- <div class="set l_blue">
|
||
|
|
控阀方式:
|
||
|
|
<n-radio-group v-model:value="value" name="radiogroup" size="small">
|
||
|
|
<n-space>
|
||
|
|
<n-radio :value="0">远程控阀</n-radio>
|
||
|
|
<n-radio :value="1">就地控阀</n-radio>
|
||
|
|
</n-space>
|
||
|
|
</n-radio-group>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- <div class="switch">
|
||
|
|
<span class="orange">
|
||
|
|
一补二电磁阀状态:
|
||
|
|
<n-switch v-model:value="active" size="small">
|
||
|
|
<template #checked>
|
||
|
|
开
|
||
|
|
</template>
|
||
|
|
<template #unchecked>
|
||
|
|
关
|
||
|
|
</template>
|
||
|
|
</n-switch>
|
||
|
|
</span>
|
||
|
|
<span class="l_blue">
|
||
|
|
是否启动一补二电磁阀:
|
||
|
|
<n-switch v-model:value="active" size="small">
|
||
|
|
<template #checked>
|
||
|
|
开
|
||
|
|
</template>
|
||
|
|
<template #unchecked>
|
||
|
|
关
|
||
|
|
</template>
|
||
|
|
</n-switch>
|
||
|
|
</span>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pump">
|
||
|
|
<div class="item" v-for="(item, index) in infoData" :key="index">
|
||
|
|
<div class="title l_green">
|
||
|
|
{{ item.label }}循环泵控制
|
||
|
|
</div>
|
||
|
|
<div class="info">
|
||
|
|
<span class="name" v-for="(res, index) in item.header_pump" :key="index">{{ res.label }}:{{ res.value }}
|
||
|
|
{{ res.paramUnit }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { getViewInfo } from '@/api/device/index';
|
||
|
|
import { deviceVo } from '@/api/device/types';
|
||
|
|
import mitt from '@/plugins/bus';
|
||
|
|
|
||
|
|
const value = ref(0)
|
||
|
|
// const active = ref(true)
|
||
|
|
const menuKey = ref();
|
||
|
|
const infoData = ref([
|
||
|
|
{ header_main: [] }
|
||
|
|
]);
|
||
|
|
const zoneType = ref()//1:一个分区,2:2个分区,3:3:个分区,4:别墅区
|
||
|
|
const timer = ref()
|
||
|
|
const isCurrentRoute = ref(true)
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
sidebarHeight: {
|
||
|
|
type: Number,
|
||
|
|
default: 0,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
mitt.on('menuKey', (res: any) => {
|
||
|
|
//监听部门点击
|
||
|
|
menuKey.value = res;
|
||
|
|
gitDevice();
|
||
|
|
});
|
||
|
|
|
||
|
|
function gitDevice() {
|
||
|
|
//获取组态信息
|
||
|
|
const params = menuKey.value;
|
||
|
|
getViewInfo(params).then((res: any) => {
|
||
|
|
if (res.code === 200) {
|
||
|
|
if (isCurrentRoute) {
|
||
|
|
timer.value = setTimeout(async () => {
|
||
|
|
await (timer.value && clearTimeout(timer.value));
|
||
|
|
await gitDevice();
|
||
|
|
}, 20000)
|
||
|
|
}
|
||
|
|
infoData.value = res.data.datas;
|
||
|
|
zoneType.value = res.data.pCounts
|
||
|
|
} else {
|
||
|
|
clearTimeout(timer.value);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
//组件注销前清除setTimeout
|
||
|
|
if (timer.value !== null||timer.value !== undefined) {
|
||
|
|
clearTimeout(timer.value);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
// function doubleCount (id:string) {
|
||
|
|
// const arr = infoData.value[0].header_main
|
||
|
|
// const obj=arr.find((item: any) => item.id === id)
|
||
|
|
// const lable=obj!=undefined?`${obj.label}:${obj.value}`:''
|
||
|
|
// debugger
|
||
|
|
// return lable;
|
||
|
|
// };
|
||
|
|
|
||
|
|
// const doubleCount = computed(() => {
|
||
|
|
// function doubleCount(id: string) {
|
||
|
|
// const arr = infoData.value[0].header_main
|
||
|
|
// const obj = arr.find((item: any) => item.id === id)
|
||
|
|
// const lable = obj != undefined ? `${obj.label}:${obj.value}` : ''
|
||
|
|
// debugger
|
||
|
|
// return lable;
|
||
|
|
// };
|
||
|
|
// });
|
||
|
|
const doubleCount = (id: string, index: number) => {
|
||
|
|
const arr = infoData.value[index].header_main
|
||
|
|
const obj = arr.find((item: any) => item.id === id)
|
||
|
|
const lable = obj != undefined ? `<span>${obj.label}</span><span>${obj.value} ${obj.paramUnit}</span>` : ''
|
||
|
|
// const lable = obj != undefined ? `${obj.label}` : ''
|
||
|
|
// const value = obj != undefined ? `${obj.value}` : '0.0'
|
||
|
|
return lable;
|
||
|
|
}
|
||
|
|
console.log("doubleCount-", doubleCount)
|
||
|
|
</script>
|