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

193
src/components/tree/device.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="device-tree-root">
<!-- <Icon
v-show="menuCollapse"
@click="onMenuCollapse"
@@ -11,7 +11,7 @@
style="cursor: pointer"
/> -->
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
<div style="display: flex; align-items: center" class="mb10">
<div class="tree-search mb10">
<el-input maxlength="32" show-word-limit
v-model.trim="filterText"
@@ -48,29 +48,29 @@
<el-collapse
:accordion="true"
v-model="activeName"
style="flex: 1; height: 100%"
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"
:default-expand-all="false"
v-bind="$attrs"
:data="zlDevList"
style="overflow: auto"
>
<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"
:default-expand-all="false"
v-bind="$attrs"
:data="zlDevList"
class="collapse-tree"
>
<template #default="{ node, data: nodeData }">
<span class="custom-tree-node">
<Icon
@@ -83,20 +83,21 @@
</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"
>
<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
@@ -109,20 +110,21 @@
</span>
</template>
</el-tree>
</div>
</el-collapse-item>
<el-collapse-item title="监测设备" name="2" v-if="frontDeviceData.length">
<el-tree
:style="{ height: otherTreeHeight }"
ref="treeRef3"
:props="defaultProps"
highlight-current
:default-expand-all="false"
:filter-node-method="filterNode"
node-key="id"
:data="frontDeviceData"
v-bind="$attrs"
style="overflow: auto"
>
<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="frontDeviceData"
v-bind="$attrs"
class="collapse-tree"
>
<template #default="{ node, data: nodeData }">
<span class="custom-tree-node">
<Icon
@@ -135,11 +137,11 @@
</span>
</template>
</el-tree>
</div>
</el-collapse-item>
</el-collapse>
<div v-if="treeType == '2'" v-loading="loading">
<div v-if="treeType == '2'" class="engineering-tree-wrap" v-loading="loading">
<el-tree
:style="{ height: engineeringTreeHeight }"
ref="treeRef4"
:props="defaultProps"
highlight-current
@@ -147,7 +149,7 @@
node-key="id"
v-bind="$attrs"
:data="props.data"
style="overflow: auto"
class="engineering-tree"
:default-expand-all="false"
>
<template #default="{ node, data: nodeData }">
@@ -170,7 +172,7 @@
<script lang="ts" setup>
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree, type CollapseModelValue } from 'element-plus'
import { ref, watch, onMounted, nextTick, computed } from 'vue'
import { ref, watch, onMounted, nextTick } from 'vue'
import { collectDeviceLeaves } from './govern/lineTreeUtils'
import { collectDeviceApiLeaves } from './govern/deviceTreeUtils'
@@ -222,12 +224,6 @@ const zlDevList = ref<any[]>([])
const bxsDeviceData = ref<any[]>([])
const frontDeviceData = 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>>()
@@ -384,6 +380,13 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.device-tree-root {
display: flex;
overflow: hidden;
height: 100%;
min-height: 0;
}
.cn-tree {
flex-shrink: 0;
display: flex;
@@ -391,7 +394,10 @@ onMounted(() => {
box-sizing: border-box;
padding: 10px;
height: 100%;
min-height: 0;
max-height: 100%;
width: 100%;
overflow: hidden;
:deep(.el-tree) {
border: 1px solid var(--el-border-color);
@@ -401,6 +407,85 @@ onMounted(() => {
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);
}