|
|
|
@ -24,7 +24,10 @@ |
|
|
|
<div class="card card_f"> |
|
|
|
<div class="dataInfo" v-html="doubleCount('015', 0)"></div> |
|
|
|
</div> |
|
|
|
<img class="deviceImg" src="@/assets/images/device01.gif" /> |
|
|
|
<!-- <div class="switch switch_a" @click="switchClick('001', 0)"></div> --> |
|
|
|
<!-- <div class="switch switch_b" @click="switchClick('065', 0)"></div> --> |
|
|
|
<img class="deviceImg" :src="deviceImg" /> |
|
|
|
<!-- <img class="deviceImg" src="@/assets/images/device01.gif" /> --> |
|
|
|
</div> |
|
|
|
<div class="deviceImg deviceImgB" v-if="zoneType === 2"> |
|
|
|
<div class="card card_a"> |
|
|
|
@ -60,7 +63,8 @@ |
|
|
|
<div class="card card_f"> |
|
|
|
<div class="dataInfo" v-html="doubleCount('015', 0)"></div> |
|
|
|
</div> |
|
|
|
<img class="deviceImg" src="@/assets/images/device02.gif" /> |
|
|
|
<img class="deviceImg" :src="deviceImg" /> |
|
|
|
<!-- <img class="deviceImg" src="@/assets/images/device02.gif" /> --> |
|
|
|
</div> |
|
|
|
<div class="deviceImg deviceImgC" v-if="zoneType === 3"> |
|
|
|
<div class="card card_a"> |
|
|
|
@ -106,47 +110,9 @@ |
|
|
|
<div class="card card_f"> |
|
|
|
<div class="dataInfo" v-html="doubleCount('015', 0)"></div> |
|
|
|
</div> |
|
|
|
<img class="deviceImg" src="@/assets/images/device03.gif" /> |
|
|
|
</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> --> |
|
|
|
<img class="deviceImg" :src="deviceImg" /> |
|
|
|
<!-- <img class="deviceImg" src="@/assets/images/device03.gif" /> --> |
|
|
|
</div> |
|
|
|
<div class="devicInfo" v-if="infoData?.length != 0"> |
|
|
|
<div class="title"> |
|
|
|
<i /> |
|
|
|
@ -158,11 +124,40 @@ |
|
|
|
<template #arrow> |
|
|
|
<img src="@/assets/images/col_icon.png" /> |
|
|
|
</template> |
|
|
|
<n-collapse-item class="colItem" :title="item.label" :name="index" v-for="(item, index) in infoData" |
|
|
|
:key="index"> |
|
|
|
<n-collapse-item |
|
|
|
class="colItem" |
|
|
|
:title="item.label" |
|
|
|
:name="index" |
|
|
|
v-for="(item, index) in infoData" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
<div class="content"> |
|
|
|
<span v-for="(res, index) in item.header_valve" :key="index">{{ res.label }}: {{ res.value }}{{ |
|
|
|
res.paramUnit }}</span> |
|
|
|
<span v-for="(res, index) in item.header_valve" :key="index"> |
|
|
|
<i>{{ res.label }}： </i> |
|
|
|
<i v-if="res.ctrlFlag === 0">{{ res.value }}{{ res.paramUnit }}</i> |
|
|
|
<i v-if="res.ctrlFlag === 1"> |
|
|
|
<n-switch |
|
|
|
class="switch" |
|
|
|
size="small" |
|
|
|
v-model:value="res.value" |
|
|
|
style="--n-rail-color-active: #409eff; --n-rail-color: #ff4949" |
|
|
|
@update:value="handleBlur(res)" |
|
|
|
v-if="res.ctrlpro.valueType === 'bool'" |
|
|
|
> |
|
|
|
<template #checked>Y</template> |
|
|
|
<template #unchecked>N</template> |
|
|
|
</n-switch> |
|
|
|
<n-input-number |
|
|
|
size="tiny" |
|
|
|
v-model:value="res.value" |
|
|
|
style="width: 100px; opacity: 0.9" |
|
|
|
button-placement="both" |
|
|
|
placeholder="" |
|
|
|
@blur="handleBlur(res)" |
|
|
|
v-if="res.ctrlpro.valueType != 'bool'" |
|
|
|
/> |
|
|
|
</i> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</n-collapse-item> |
|
|
|
</n-collapse> |
|
|
|
@ -172,11 +167,39 @@ |
|
|
|
<template #arrow> |
|
|
|
<img src="@/assets/images/col_icon.png" /> |
|
|
|
</template> |
|
|
|
<n-collapse-item class="colItem" :title="item.label" :name="index" v-for="(item, index) in infoData" |
|
|
|
:key="index"> |
|
|
|
<n-collapse-item |
|
|
|
class="colItem" |
|
|
|
:title="item.label" |
|
|
|
:name="index" |
|
|
|
v-for="(item, index) in infoData" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
<div class="content pump"> |
|
|
|
<span v-for="(res, index) in item.header_pump" :key="index">{{ res.label }}: {{ res.value }}{{ |
|
|
|
res.paramUnit }}</span> |
|
|
|
<span v-for="(res, index) in item.header_pump" :key="index"> |
|
|
|
<i>{{ res.label }}： </i> |
|
|
|
<i v-if="res.ctrlFlag === 0">{{ res.value }}{{ res.paramUnit }}</i> |
|
|
|
<i v-if="res.ctrlFlag === 1"> |
|
|
|
<n-switch |
|
|
|
class="switch" |
|
|
|
size="small" |
|
|
|
v-model:value="res.value" |
|
|
|
style="--n-rail-color-active: #409eff; --n-rail-color: #ff4949" |
|
|
|
@update:value="handleBlur(res)" |
|
|
|
v-if="res.ctrlpro.valueType === 'bool'" |
|
|
|
> |
|
|
|
<template #checked>Y</template> |
|
|
|
<template #unchecked>N</template> |
|
|
|
</n-switch> |
|
|
|
<n-input-number |
|
|
|
size="tiny" |
|
|
|
v-model:value="res.value" |
|
|
|
style="width: 100px; opacity: 0.9" |
|
|
|
button-placement="both" |
|
|
|
placeholder="" |
|
|
|
v-if="res.ctrlpro.valueType != 'bool'" |
|
|
|
/> |
|
|
|
</i> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</n-collapse-item> |
|
|
|
</n-collapse> |
|
|
|
@ -213,23 +236,38 @@ |
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { getViewInfo } from '@/api/device/index'; |
|
|
|
import { sendCtrl } from '@/api/table/list'; |
|
|
|
import { deviceVo } from '@/api/device/types'; |
|
|
|
import mitt from '@/plugins/bus'; |
|
|
|
|
|
|
|
const value = ref(0) |
|
|
|
// const active = ref(true) |
|
|
|
const deviceMenuKey = ref(); |
|
|
|
const infoData = ref<deviceVo[]>(); |
|
|
|
const zoneType = ref()//1:一个分区,2:2个分区,3:3:个分区,4:别墅区 |
|
|
|
const timer = ref() |
|
|
|
const isCurrentRoute = ref(true) |
|
|
|
const zoneType = ref(); //1:一个分区,2:2个分区,3:3:个分区,4:别墅区 |
|
|
|
const deviceImg = ref(); |
|
|
|
const timer = ref(); |
|
|
|
const isCurrentRoute = ref(true); |
|
|
|
|
|
|
|
// const collapseDefault = ref<any[]>(); |
|
|
|
|
|
|
|
interface FormDataVO { |
|
|
|
//url: string; |
|
|
|
deviceName: string; |
|
|
|
paramCode: string; |
|
|
|
value: string; |
|
|
|
} |
|
|
|
const formData = ref<FormDataVO>({ |
|
|
|
//url: '', |
|
|
|
deviceName: '', |
|
|
|
paramCode: '', |
|
|
|
value: '' |
|
|
|
}); |
|
|
|
|
|
|
|
defineProps({ |
|
|
|
sidebarHeight: { |
|
|
|
type: Number, |
|
|
|
default: 0, |
|
|
|
}, |
|
|
|
default: 0 |
|
|
|
} |
|
|
|
}); |
|
|
|
mitt.on('deviceMenuKey', (res: any) => { |
|
|
|
//监听部门点击 |
|
|
|
@ -246,10 +284,13 @@ function gitDevice() { |
|
|
|
timer.value = setTimeout(async () => { |
|
|
|
await (timer.value && clearTimeout(timer.value)); |
|
|
|
await gitDevice(); |
|
|
|
}, 20000) |
|
|
|
}, 20000); |
|
|
|
} |
|
|
|
infoData.value = Object.keys(res.data).length === 0 ? [] : res.data.datas; |
|
|
|
zoneType.value = Object.keys(res.data).length === 0 ? 0 : res.data.pCounts; |
|
|
|
deviceImg.value = |
|
|
|
Object.keys(res.data).length === 0 ? '' : 'src/assets/images/device/' + res.data.imgIndex + '.gif'; |
|
|
|
console.log(deviceImg.value); |
|
|
|
} else { |
|
|
|
clearTimeout(timer.value); |
|
|
|
} |
|
|
|
@ -261,7 +302,7 @@ onUnmounted(() => { |
|
|
|
if (timer.value !== null || timer.value !== undefined) { |
|
|
|
clearTimeout(timer.value); |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
|
|
|
|
// function doubleCount (id:string) { |
|
|
|
// const arr = infoData.value[0].header_main |
|
|
|
@ -281,12 +322,25 @@ onUnmounted(() => { |
|
|
|
// }; |
|
|
|
// }); |
|
|
|
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 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); |
|
|
|
|
|
|
|
function handleBlur(data: any) { |
|
|
|
//点击阀门/泵开关 |
|
|
|
const submitData = data.ctrlpro; |
|
|
|
submitData.value = data.value; |
|
|
|
console.log(submitData); |
|
|
|
sendCtrl(submitData).then((res: any) => { |
|
|
|
if (res.code === 200) { |
|
|
|
console.log(res.data); |
|
|
|
ElMessage(res.data.msg); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
console.log("doubleCount-", doubleCount) |
|
|
|
</script> |
fuguobin
1 year ago
