134 lines
4.9 KiB
Vue
134 lines
4.9 KiB
Vue
<template>
|
||
<a-spin :spinning="confirmLoading">
|
||
<div style="width: 236px;float:left;margin-top:14px;">
|
||
<a-menu
|
||
style="width: 236px;margin-top: -11px;border-radius: 8px;"
|
||
mode="inline"
|
||
v-model:selectedKeys="current"
|
||
>
|
||
<a-sub-menu :key="item.nuId" v-for="(item,index) in dataList" @titleClick="handleSblist(item.map,'all','')">
|
||
<template #title >NUID：{{item.nuId}}</template>
|
||
<a-menu-item @click="handleSblist(item.map,'1',itemA.id)" :key="itemA.id" v-for="(itemA,index) in item.map.cameraInfoList" >{{itemA.sn}}[摄像头]</a-menu-item>
|
||
<a-menu-item @click="handleSblist(item.map,'2',itemB.id)" :key="itemB.id" v-for="(itemB,index) in item.map.electricityMeterList" >{{itemB.cid}}[电表]</a-menu-item>
|
||
<a-menu-item @click="handleSblist(item.map,'3',itemC.id)" :key="itemC.id" v-for="(itemC,index) in item.map.humidDeviceList" >{{itemC.sn}}[温湿度计]</a-menu-item>
|
||
<a-menu-item @click="handleSblist(item.map,'4',itemD.id)" :key="itemD.id" v-for="(itemD,index) in item.map.waterMeterList" >{{itemD.cid}}[水表]</a-menu-item>
|
||
|
||
<a-menu-item :key="item.id" @click="handleSblist(null,'all','')" v-if="getSblb(item)" >暂无数据</a-menu-item>
|
||
</a-sub-menu>
|
||
</a-menu>
|
||
</div>
|
||
<div style="width: calc(100% - 236px);float:left;margin-top: -10px;">
|
||
<a-row>
|
||
<SxtList :tableData="sbList.cameraInfoList" @ok="hadleSuccess"></SxtList>
|
||
<DbList :tableData="sbList.electricityMeterList" @ok="hadleSuccess"></DbList>
|
||
<SbList :tableData="sbList.waterMeterList" @ok="hadleSuccess"></SbList>
|
||
<WsdjList :tableData="sbList.humidDeviceList" @ok="hadleSuccess"></WsdjList>
|
||
</a-row>
|
||
<a-row v-if="sbList.cameraInfoList.length==0 && sbList.electricityMeterList.length==0 && sbList.waterMeterList.length==0 && sbList.humidDeviceList.length==0">
|
||
<a-col>
|
||
<a-empty></a-empty>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</a-spin>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
|
||
import { defHttp } from '/@/utils/http/axios';
|
||
import { useMessage } from '/@/hooks/web/useMessage';
|
||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
||
import { getValueType } from '/@/utils';
|
||
import { Form,Modal } from 'ant-design-vue';
|
||
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
||
import SxtList from './SxtList.vue'
|
||
import DbList from './DbList.vue'
|
||
import SbList from './SbList.vue'
|
||
import WsdjList from './WsdjList.vue'
|
||
import { set } from 'lodash-es';
|
||
|
||
|
||
const formRef = ref();
|
||
const useForm = Form.useForm;
|
||
const nuInfo = ref<any>({})
|
||
const dataList = ref<any>([])
|
||
const sbList = ref<any>({cameraInfoList:[], waterMeterList:[], electricityMeterList:[], humidDeviceList:[]})
|
||
const { createMessage } = useMessage();
|
||
const confirmLoading = ref<boolean>(false);
|
||
const rootSubmenuKeys = [];
|
||
const openKeys= ref<any>([]);
|
||
const selectedKeys= [];
|
||
|
||
const current = ref<string[]>([]);
|
||
function hadleSuccess(){
|
||
reload();
|
||
}
|
||
|
||
function getSblb(item){
|
||
var listA = item.map.cameraInfoList;
|
||
var listB = item.map.electricityMeterList;
|
||
var listC = item.map.humidDeviceList;
|
||
var listD = item.map.waterMeterList;
|
||
if(!listA && !listB && !listC && !listD){
|
||
return true;
|
||
}else if(listA.length == 0 && listB.length == 0 && listC.length == 0 && listD.length == 0){
|
||
return true;
|
||
}else{
|
||
return false;
|
||
}
|
||
}
|
||
/**
|
||
* 初始化
|
||
*/
|
||
function init(record) {
|
||
console.log("🚀 ~ add ~ record:", record)
|
||
nextTick(() => {
|
||
nuInfo.value = record;
|
||
reload();
|
||
});
|
||
}
|
||
|
||
function reload() {
|
||
sbList.value = {}
|
||
defHttp.get({ url: '/iot/devicesIot/priviewList', params: { orgCode: nuInfo.value.orgCode } }).then((res) => {
|
||
console.log("🚀 ~ reload ~ res:", res)
|
||
dataList.value = res;
|
||
if(res.length>0){
|
||
sbList.value = res[0].map;
|
||
openKeys.value.push(res[1].nuId) ;
|
||
console.log("🚀 ~ reload ~ sbList.value:", sbList.value)
|
||
}
|
||
});
|
||
}
|
||
function handleSblist(dataSource,type,deviceId){
|
||
console.log("🚀 ~ handleSblist ~ type:", type)
|
||
sbList.value = {cameraInfoList:[], waterMeterList:[], electricityMeterList:[], humidDeviceList:[]};
|
||
if(type == 'all'){
|
||
if(dataSource){
|
||
sbList.value = dataSource;
|
||
}
|
||
}else if(type == '1'){
|
||
sbList.value.cameraInfoList = dataSource.cameraInfoList.filter(item=>item.id == deviceId);
|
||
}else if(type == '2'){
|
||
sbList.value.electricityMeterList = dataSource.electricityMeterList.filter(item=>item.id == deviceId);
|
||
}else if(type == '3'){
|
||
sbList.value.humidDeviceList = dataSource.humidDeviceList.filter(item=>item.id == deviceId);
|
||
}else if(type == '4'){
|
||
sbList.value.waterMeterList = dataSource.waterMeterList.filter(item=>item.id == deviceId);
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
defineExpose({
|
||
init,
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.antd-modal-form {
|
||
padding: 14px;
|
||
}
|
||
</style>
|