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

修改测试问题

Browse Source
This commit is contained in:
guanj
2026-06-30 08:38:05 +08:00
parent 490b52b525
commit 536f22584d
103 changed files with 3220 additions and 2394 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
<!-- 设备监控使用折叠面板渲染多个tree -->
<template>
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
<div :style="{ width: menuCollapse ? '40px' : props.width }" class="point-tree-root">
<!-- <Icon
v-show="menuCollapse"
@click="onMenuCollapse"
@@ -12,16 +12,12 @@
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 v-model.trim="filterText" placeholder="请输入内容" clearable>
<div class="tree-search mb10">
<el-input v-model.trim="filterText" placeholder="请输入内容" clearable>
<template #prepend>
<el-select v-model="treeType" @change="changeTreeType" style="min-width: 75px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</template>
<template #prefix>
@@ -39,120 +35,67 @@
/> -->
</div>
<el-collapse
:accordion="true"
v-model="activeName"
style="flex: 1; height: 100%"
@change="changeDevice"
v-if="treeType == '1'"
v-loading="loading"
>
<el-collapse :accordion="true" v-model="activeName" class="device-collapse" @change="changeDevice"
v-if="treeType == '1'" v-loading="loading">
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length">
<el-select v-model="process" clearable placeholder="请选择状态" class="mb10">
<el-option label="功能调试" value="2" />
<el-option label="出厂调试" value="3" />
<el-option label="正式投运" value="4" />
</el-select>
<el-tree
:style="{ height: governTreeHeight }"
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: nodeData }">
<span class="custom-tree-node">
<Icon
:name="nodeData.icon"
style="font-size: 16px"
:style="{ color: nodeData.color }"
v-if="nodeData.icon"
/>
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
</el-tree>
<div class="collapse-tree-panel collapse-tree-panel--govern">
<el-select v-model="process" clearable placeholder="请选择状态" class="mb10">
<el-option label="功能调试" value="2" />
<el-option label="出厂调试" value="3" />
<el-option label="正式投运" value="4" />
</el-select>
<el-tree ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
node-key="id" v-bind="$attrs" :data="zlDevList" class="collapse-tree"
:default-expand-all="false">
<template #default="{ node, data: nodeData }">
<span class="custom-tree-node">
<Icon :name="nodeData.icon" style="font-size: 16px"
:style="{ color: nodeData.color }" v-if="nodeData.icon" />
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
</el-tree>
</div>
</el-collapse-item>
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length">
<el-tree
:style="{ height: otherTreeHeight }"
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: nodeData }">
<span class="custom-tree-node">
<Icon
:name="nodeData.icon"
style="font-size: 16px"
:style="{ color: nodeData.color }"
v-if="nodeData.icon"
/>
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
</el-tree>
<div class="collapse-tree-panel">
<el-tree ref="treeRef2" :props="defaultProps" highlight-current :default-expand-all="false"
:filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
class="collapse-tree">
<template #default="{ node, data: nodeData }">
<span class="custom-tree-node">
<Icon :name="nodeData.icon" style="font-size: 16px"
:style="{ color: nodeData.color }" v-if="nodeData.icon" />
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
</el-tree>
</div>
</el-collapse-item>
<el-collapse-item title="监测设备" name="2" v-if="yqfDeviceData.length">
<el-tree
:style="{ height: otherTreeHeight }"
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: nodeData }">
<span class="custom-tree-node">
<Icon
:name="nodeData.icon"
style="font-size: 16px"
:style="{ color: nodeData.color }"
v-if="nodeData.icon"
/>
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
</el-tree>
<div class="collapse-tree-panel">
<el-tree ref="treeRef3" :props="defaultProps" highlight-current :default-expand-all="false"
:filter-node-method="filterNode" node-key="id" :data="yqfDeviceData" v-bind="$attrs"
class="collapse-tree">
<template #default="{ node, data: nodeData }">
<span class="custom-tree-node">
<Icon :name="nodeData.icon" style="font-size: 16px"
:style="{ color: nodeData.color }" v-if="nodeData.icon" />
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
</el-tree>
</div>
</el-collapse-item>
</el-collapse>
<div v-if="treeType == '2'" v-loading="loading">
<el-tree
:style="{ height: engineeringTreeHeight }"
class="pt10"
ref="treeRef4"
:props="defaultProps"
highlight-current
:filter-node-method="filterNode"
node-key="id"
v-bind="$attrs"
:data="props.data"
style="overflow: auto"
:default-expand-all="false"
>
<div v-if="treeType == '2'" class="engineering-tree-wrap" v-loading="loading">
<el-tree class="engineering-tree pt10 collapse-tree" ref="treeRef4" :props="defaultProps"
highlight-current :filter-node-method="filterNode" node-key="id" v-bind="$attrs" :data="props.data"
:default-expand-all="false">
<template #default="{ node, data: nodeData }">
<span class="custom-tree-node">
<Icon
:name="nodeData.icon"
style="font-size: 16px"
:style="{ color: nodeData.color }"
v-if="nodeData.icon"
/>
<Icon :name="nodeData.icon" style="font-size: 16px" :style="{ color: nodeData.color }"
v-if="nodeData.icon" />
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
@@ -165,7 +108,7 @@
<script lang="ts" setup>
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree, type CollapseModelValue } from 'element-plus'
import { ref, watch, nextTick, computed } from 'vue'
import { ref, watch, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { collectDeviceLeaves } from './govern/lineTreeUtils'
@@ -214,12 +157,6 @@ const zlDevList = ref<any[]>([])
const bxsDeviceData = ref<any[]>([])
const yqfDeviceData = ref<any[]>([])
const governTreeHeight = computed(() => `calc(100vh - 380px - ${props.height}px)`)
const otherTreeHeight = computed(() =>
zlDeviceData.value.length ? `calc(100vh - 340px - ${props.height}px)` : `calc(100vh - 238px - ${props.height}px)`
)
const engineeringTreeHeight = computed(() => `calc(100vh - 188px - ${props.height}px)`)
const treeRef1 = ref<InstanceType<typeof ElTree>>()
const treeRef2 = ref<InstanceType<typeof ElTree>>()
const treeRef3 = ref<InstanceType<typeof ElTree>>()
@@ -381,6 +318,17 @@ const changeTreeType = (val: string) => {
</script>
<style lang="scss" scoped>
:deep(.el-tree-node) {
white-space: none;
}
.point-tree-root {
display: flex;
overflow: hidden;
height: 100%;
min-height: 0;
}
.cn-tree {
flex-shrink: 0;
display: flex;
@@ -388,8 +336,11 @@ const changeTreeType = (val: string) => {
box-sizing: border-box;
padding: 10px;
height: 100%;
min-height: 0;
max-height: 100%;
width: 280px;
background: #fff;
overflow: hidden;
:deep(.el-tree) {
border: 1px solid var(--el-border-color);
@@ -399,6 +350,85 @@ const changeTreeType = (val: string) => {
background-color: var(--el-color-primary-light-7);
}
.tree-search {
display: flex;
align-items: center;
flex-shrink: 0;
}
.device-collapse {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
border: none;
:deep(.el-collapse-item) {
flex-shrink: 0;
.el-collapse-item__header {
height: 48px;
line-height: 48px;
}
&.is-active {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
.el-collapse-item__wrap {
flex: 1;
min-height: 0;
}
.el-collapse-item__content {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
padding-bottom: 0;
box-sizing: border-box;
}
}
}
}
.engineering-tree-wrap {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.engineering-tree {
flex: 1;
min-height: 0;
overflow: auto;
}
.collapse-tree-panel {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
height: 100%;
overflow: hidden;
&--govern>.el-select {
flex-shrink: 0;
}
}
.collapse-tree {
flex: 1;
min-height: 0;
overflow: auto;
}
.menu-collapse {
color: var(--el-color-primary);
}
@@ -408,7 +438,9 @@ const changeTreeType = (val: string) => {
display: flex;
align-items: center;
}
:deep(.el-input-group__prepend) {
background-color: var(--el-fill-color-blank);
}
</style>