Web/admin-govern
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

修改测试bug 优化页面

Browse Source
This commit is contained in:
guanj
2026-01-04 14:55:31 +08:00
parent cc0f8bc8b6
commit a765cdf9ee
68 changed files with 5396 additions and 3096 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/components/tree/point.vue
View File

@@ -1,9 +1,16 @@
<!-- 设备监控使用折叠面板渲染多个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>
@@ -11,13 +18,23 @@
<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>
@@ -26,14 +43,25 @@
</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" v-bind="$attrs" :data="zlDevList" style="overflow: auto"
:default-expand-all="false">
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 380px)' : 'calc(100vh - 278px)' }"
ref="treeRef1"
:props="defaultProps"
highlight-current
:filter-node-method="filterNode"
node-key="id"
v-bind="$attrs"
:data="zlDevList"
style="overflow: auto"
:default-expand-all="false"
>
<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>
@@ -41,14 +69,25 @@
</el-collapse-item>
<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="false"
:filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
style="overflow: auto" >
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)' }"
ref="treeRef2"
:props="defaultProps"
highlight-current
:default-expand-all="false"
: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>
@@ -56,14 +95,25 @@
</el-collapse-item>
<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="false"
:filter-node-method="filterNode" node-key="id" :data="yqfDeviceData" v-bind="$attrs"
style="overflow: auto">
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)' }"
ref="treeRef3"
:props="defaultProps"
highlight-current
:default-expand-all="false"
: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>
@@ -118,27 +168,25 @@ watch(
() => props.data,
(val, oldVal) => {
if (val && val.length != 0) {
val.map((item: any) => {
if (item.name == '治理设备') {
zlDeviceData.value = []
item.children.map((vv: any) => {
zlDeviceData.value.push(vv)
})
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
} else if (item.name == '便携式设备') {
bxsDeviceData.value = []
item.children.map((vv: any) => {
bxsDeviceData.value.push(vv)
})
}else if (item.name == '在线设备') {
} else if (item.name == '在线设备') {
yqfDeviceData.value = []
item.children.map((vv: any) => {
yqfDeviceData.value.push(vv)
})
}
})
}
},
{
@@ -157,12 +205,10 @@ watch(filterText, val => {
}
})
watch(process, val => {
if (val == '') {
if (val == '' || val == undefined) {
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
} else {
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
}
setTimeout(() => {
@@ -170,9 +216,8 @@ watch(process, val => {
}, 0)
})
const changeDevice = (val: any) => {
console.log('🚀 ~ changeDevice ~ val:', val)
let arr1: any = []
//zlDeviceData
@@ -263,8 +308,7 @@ function filterProcess(nodes: any) {
// 1. 如果有满足条件的子节点则保留
// 2. 如果本身 process 值匹配则保留
// 3. 如果是叶子节点也保留（监测点通常没有子节点）
if (children.length > 0 || node.process == process.value ||
(!node.children || node.children.length === 0)) {
if (children.length > 0 || node.process == process.value || !node.children || node.children.length === 0) {
return {
...node,
children: children
@@ -276,7 +320,6 @@ function filterProcess(nodes: any) {
.filter(Boolean) // 移除null节点
}
// function filterProcess(nodes: any) {
// if (process.value == '') {
// return nodes
@@ -332,11 +375,9 @@ const treeRef1 = ref<InstanceType<typeof ElTree>>()
const treeRef2 = ref<InstanceType<typeof ElTree>>()
//在线
const treeRef3 = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef1, treeRef2 })
defineExpose({ treeRef1, treeRef2, treeRef3 })
onMounted(() => {
setTimeout(() => {
if (zlDeviceData.value.length != 0) {
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
activeName.value = '0'
@@ -344,8 +385,11 @@ onMounted(() => {
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
activeName.value = '1'
}
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length === 0) {
activeName.value = '2'
}
if (!zlDeviceData.value && !bxsDeviceData.value) {
activeName.value = ''
activeName.value = '2'
}
nextTick(() => {
changeDevice(activeName.value)