This commit is contained in:
sjl
2025-10-14 09:55:29 +08:00
237 changed files with 6047 additions and 1217 deletions

View File

@@ -1,47 +1,27 @@
<!-- 设备管理使用折叠面板渲染多个tree -->
<template>
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
<Icon
v-show="menuCollapse"
@click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 mt20 menu-collapse"
style="cursor: pointer"
/>
<Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse"
style="cursor: pointer" />
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
<div style="display: flex; align-items: center" class="mb10">
<!-- <el-form-item> -->
<el-input
maxlength="32"
show-word-limit
v-model.trim="filterText"
autocomplete="off"
placeholder="请输入内容"
clearable
>
<el-input maxlength="32" show-word-limit v-model.trim="filterText" autocomplete="off"
placeholder="请输入内容" clearable>
<template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>
</el-input>
<!-- </el-form-item> -->
<Icon
@click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 menu-collapse"
style="cursor: pointer"
v-if="props.canExpand"
/>
<Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
style="cursor: pointer" v-if="props.canExpand" />
</div>
<el-collapse
:accordion="true"
v-model.trim="activeName"
style="flex: 1; height: 100%"
@change="changeDevice"
>
<el-collapse :accordion="true" v-model.trim="activeName" style="flex: 1; height: 100%"
@change="changeDevice">
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
<el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
<el-option label="功能调试" value="2"></el-option>
@@ -50,24 +30,12 @@
</el-select>
<el-tree
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 278px)' }"
ref="treeRef1"
:props="defaultProps"
highlight-current
:filter-node-method="filterNode"
node-key="id"
default-expand-all
v-bind="$attrs"
:data="zlDevList"
style="overflow: auto"
>
ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
node-key="id" default-expand-all v-bind="$attrs" :data="zlDevList" style="overflow: auto">
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
v-if="data.icon" />
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
@@ -76,24 +44,13 @@
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
<el-tree
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
ref="treeRef2"
:props="defaultProps"
highlight-current
default-expand-all
:filter-node-method="filterNode"
node-key="id"
:data="bxsDeviceData"
v-bind="$attrs"
style="overflow: auto"
>
ref="treeRef2" :props="defaultProps" highlight-current default-expand-all
:filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
style="overflow: auto">
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
v-if="data.icon" />
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
@@ -102,24 +59,13 @@
<el-collapse-item title="在线设备" name="2" v-if="frontDeviceData.length != 0">
<el-tree
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
ref="treeRef3"
:props="defaultProps"
highlight-current
default-expand-all
:filter-node-method="filterNode"
node-key="id"
:data="frontDeviceData"
v-bind="$attrs"
style="overflow: auto"
>
ref="treeRef3" :props="defaultProps" highlight-current default-expand-all
:filter-node-method="filterNode" node-key="id" :data="frontDeviceData" v-bind="$attrs"
style="overflow: auto">
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
v-if="data.icon" />
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
@@ -174,18 +120,22 @@ watch(
if (val && val.length != 0) {
val.map((item: any) => {
if (item.name == '治理设备') {
zlDeviceData.value = []
item.children.map((vv: any) => {
zlDeviceData.value.push(vv)
})
} else if (item.name == '便携式设备') {
bxsDeviceData.value = []
item.children.map((vv: any) => {
bxsDeviceData.value.push(vv)
})
}else if (item.name == '在线设备') {
frontDeviceData.value = []
item.children.map((vv: any) => {
frontDeviceData.value.push(vv)
})
}
})
}
@@ -199,13 +149,15 @@ watch(
watch(filterText, val => {
if (activeName.value == '0') {
treeRef1.value!.filter(val)
} else if(activeName.value == '1'){
} else if (activeName.value == '1') {
treeRef2.value!.filter(val)
}else {
} else {
treeRef3.value!.filter(val)
}
})
watch(process, val => {
if (val == '') {
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
} else {
@@ -281,6 +233,7 @@ const changeDevice = (val: any) => {
let arr1: any = []
//zlDeviceData
zlDevList.value.forEach((item: any) => {
item.children.forEach((item2: any) => {
item2.children.forEach((item3: any) => {
@@ -288,6 +241,7 @@ const changeDevice = (val: any) => {
})
})
})
let arr2: any = []
bxsDeviceData.value.forEach((item: any) => {
// item.children.forEach((item2: any) => {
@@ -296,7 +250,7 @@ const changeDevice = (val: any) => {
})
let arr3: any = []
frontDeviceData.value.forEach((item: any) => {
item.children.forEach((item2: any) => {
item.children.forEach((item2: any) => {
item2.children.forEach((item3: any) => {
arr3.push(item3)
})
@@ -306,21 +260,21 @@ const changeDevice = (val: any) => {
arr2.map((item: any) => {
item.checked = false
})
treeRef1.value && treeRef1.value.setCurrentKey(arr1[0].id)
treeRef1.value && treeRef1.value.setCurrentKey(arr1[0]?.id)
emit('changeDeviceType', activeName.value, arr1[0])
}
if (val == '1') {
arr1.map((item: any) => {
item.checked = false
})
treeRef2.value && treeRef2.value.setCurrentKey(arr2[0].id)
treeRef2.value && treeRef2.value.setCurrentKey(arr2[0]?.id)
emit('changeDeviceType', activeName.value, arr2[0])
}
if (val == '2') {
arr3.map((item: any) => {
item.checked = false
})
treeRef3.value && treeRef3.value.setCurrentKey(arr3[0].id)
treeRef3.value && treeRef3.value.setCurrentKey(arr3[0]?.id)
emit('changeDeviceType', activeName.value, arr3[0])
}
}

View File

@@ -1,16 +1,9 @@
<!-- 设备监控使用折叠面板渲染多个tree -->
<template>
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
<Icon
v-show="menuCollapse"
@click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 mt20 menu-collapse"
style="cursor: pointer"
v-if="route.path != '/admin/govern/reportCore/statistics/index'"
/>
<Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse" style="cursor: pointer"
v-if="route.path != '/admin/govern/reportCore/statistics/index'" />
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
<div style="display: flex; align-items: center" class="mb10">
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
@@ -18,22 +11,13 @@
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>
</el-input>
<Icon
@click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 menu-collapse"
<Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
style="cursor: pointer"
v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'"
/>
v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'" />
</div>
<el-collapse
:accordion="true"
v-model.trim="activeName"
style="flex: 1; height: 100%"
@change="changeDevice"
>
<el-collapse :accordion="true" v-model.trim="activeName" style="flex: 1; height: 100%"
@change="changeDevice">
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
<el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
<el-option label="功能调试" value="2"></el-option>
@@ -43,24 +27,12 @@
<el-tree
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 278px)' }"
ref="treeRef1"
:props="defaultProps"
highlight-current
:filter-node-method="filterNode"
node-key="id"
default-expand-all
v-bind="$attrs"
:data="zlDevList"
style="overflow: auto"
>
ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
node-key="id" default-expand-all v-bind="$attrs" :data="zlDevList" style="overflow: auto">
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
v-if="data.icon" />
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
@@ -69,24 +41,13 @@
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
<el-tree
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 330px)' : 'calc(100vh - 238px)' }"
ref="treeRef2"
:props="defaultProps"
highlight-current
default-expand-all
:filter-node-method="filterNode"
node-key="id"
:data="bxsDeviceData"
v-bind="$attrs"
style="overflow: auto"
>
ref="treeRef2" :props="defaultProps" highlight-current default-expand-all
:filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
style="overflow: auto">
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
v-if="data.icon" />
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
@@ -95,24 +56,13 @@
<el-collapse-item title="在线设备" name="2" v-if="yqfDeviceData.length != 0">
<el-tree
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 330px)' : 'calc(100vh - 238px)' }"
ref="treeRef3"
:props="defaultProps"
highlight-current
default-expand-all
:filter-node-method="filterNode"
node-key="id"
:data="yqfDeviceData"
v-bind="$attrs"
style="overflow: auto"
>
ref="treeRef3" :props="defaultProps" highlight-current default-expand-all
:filter-node-method="filterNode" node-key="id" :data="yqfDeviceData" v-bind="$attrs"
style="overflow: auto">
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
v-if="data.icon" />
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
@@ -169,21 +119,24 @@ watch(
if (val && val.length != 0) {
val.map((item: any) => {
if (item.name == '治理设备') {
zlDeviceData.value = []
item.children.map((vv: any) => {
zlDeviceData.value.push(vv)
})
// console.log('🚀 ~ item.children.map ~ zlDeviceData.value:', zlDeviceData.value)
} else if (item.name == '便携式设备') {
bxsDeviceData.value = []
item.children.map((vv: any) => {
bxsDeviceData.value.push(vv)
})
}else if (item.name == '在线设备') {
yqfDeviceData.value = []
item.children.map((vv: any) => {
yqfDeviceData.value.push(vv)
})
}
})
}
},
{
@@ -195,9 +148,9 @@ watch(
watch(filterText, val => {
if (activeName.value == '0') {
treeRef1.value!.filter(val)
} else if(activeName.value == '1') {
} else if (activeName.value == '1') {
treeRef2.value!.filter(val)
}else {
} else {
treeRef3.value!.filter(val)
}
})
@@ -213,7 +166,7 @@ watch(process, val => {
})
const changeDevice = (val: any) => {
console.log('changeDevice', val)
console.log('changeDevice', val)
let arr1: any = []
//zlDeviceData
zlDevList.value.forEach((item: any) => {
@@ -233,7 +186,7 @@ const changeDevice = (val: any) => {
})
let arr3: any = []
yqfDeviceData.value.forEach((item: any) => {
item.children.forEach((item2: any) => {
item.children.forEach((item2: any) => {
item2.children.forEach((item3: any) => {
item3.children.forEach((item4: any) => {
arr3.push(item4)
@@ -256,7 +209,7 @@ const changeDevice = (val: any) => {
treeRef2?.value && treeRef2.value.setCurrentKey(arr2[0]?.id)
emit('changePointType', activeName.value, arr2[0])
}
if(val == '2'){
if (val == '2') {
arr3.map((item: any) => {
item.checked = false
})
@@ -381,6 +334,4 @@ onMounted(() => {
display: flex;
align-items: center;
}
</style>