273 lines
9.1 KiB
Vue
273 lines
9.1 KiB
Vue
<template>
|
||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; 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"
|
||
/>
|
||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||
<div style="display: flex; align-items: center" class="mb10">
|
||
<el-input
|
||
v-model="filterText"
|
||
placeholder="请输入内容"
|
||
clearable
|
||
maxlength="10"
|
||
show-word-limit
|
||
@input="change"
|
||
>
|
||
<template #prefix>
|
||
<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"
|
||
style="cursor: pointer"
|
||
v-if="props.canExpand"
|
||
/>
|
||
<el-button icon="el-icon-Plus" v-if="props.addTree" type="primary" class="ml10" @click="onAddTree">
|
||
新增
|
||
</el-button>
|
||
</div>
|
||
<el-tree
|
||
style="flex: 1; overflow: auto"
|
||
ref="treeRef"
|
||
:props="defaultProps"
|
||
highlight-current
|
||
:filter-node-method="filterNode"
|
||
node-key="id"
|
||
v-bind="$attrs"
|
||
>
|
||
<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"
|
||
/>
|
||
|
||
<el-tooltip
|
||
class="box-item"
|
||
effect="customized"
|
||
placement="bottom-start"
|
||
:offset="0"
|
||
v-if="data.level == 6"
|
||
>
|
||
<template #content>
|
||
<el-button type="primary" plain @click="viewDetails(data)">
|
||
{{ data.level == 3 ? '变电站详情' : '监测点详情' }}
|
||
</el-button>
|
||
</template>
|
||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||
</el-tooltip>
|
||
<span v-else style="margin-left: 4px">{{ node.label }}</span>
|
||
</span>
|
||
</template>
|
||
</el-tree>
|
||
</div>
|
||
<!-- 变电站详情 -->
|
||
<SubstationDetails ref="SubstationRef" />
|
||
<!-- 监测点详情 -->
|
||
<MonitoringPointDetails ref="MonitoringPointRef" />
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||
import { ElTree } from 'element-plus'
|
||
import { ref, watch, onMounted, nextTick } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import MonitoringPointDetails from './details/monitoringPointDetails.vue'
|
||
import SubstationDetails from './details/substationDetails.vue'
|
||
|
||
defineOptions({
|
||
name: 'govern/tree'
|
||
})
|
||
const emit = defineEmits(['onAddTree'])
|
||
interface Props {
|
||
width?: string
|
||
canExpand?: boolean
|
||
addTree?: boolean
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
width: '280px',
|
||
canExpand: true,
|
||
addTree: false
|
||
})
|
||
const { proxy } = useCurrentInstance()
|
||
const menuCollapse = ref(false)
|
||
const MonitoringPointRef = ref()
|
||
const SubstationRef = ref()
|
||
const filterText = ref('')
|
||
const treeRef = ref()
|
||
const defaultProps = {
|
||
label: 'name',
|
||
value: 'id'
|
||
}
|
||
const specialCharsPattern = /[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g
|
||
const change = val => {
|
||
if (specialCharsPattern.test(val)) {
|
||
ElMessage.warning('禁止输入特殊字符!')
|
||
filterText.value = val.replace(
|
||
/[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g,
|
||
''
|
||
)
|
||
console.log('🚀 ~ change ~ filterText.value:', filterText.value)
|
||
|
||
treeRef.value!.filter(filterText.value)
|
||
} else {
|
||
treeRef.value!.filter(filterText.value)
|
||
}
|
||
}
|
||
// watch(filterText, val => {
|
||
|
||
// console.log("🚀 ~ val:", specialCharsPattern.test(val))
|
||
// if (specialCharsPattern.test(val)) {
|
||
// ElMessage.warning('禁止输入特殊字符!')
|
||
// filterText.value = val.replace(/[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g, "")
|
||
// console.log("🚀 ~ filterText.value:", filterText.value)
|
||
// treeRef.value!.filter(filterText.value)
|
||
// }else{
|
||
// treeRef.value!.filter(filterText.value)
|
||
// }
|
||
|
||
// })
|
||
const onMenuCollapse = () => {
|
||
menuCollapse.value = !menuCollapse.value
|
||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||
}
|
||
// 查看详情
|
||
const viewDetails = (data: any) => {
|
||
console.log('🚀 ~ viewDetails ~ data:', data)
|
||
if (data.level == 3) {
|
||
// 变电站详情
|
||
// substationDetails
|
||
SubstationRef.value.open(data)
|
||
} else {
|
||
// 监测点详情
|
||
MonitoringPointRef.value.open(data)
|
||
}
|
||
|
||
// proxy.eventBus.emit('viewDetails', data)
|
||
}
|
||
const filterNode = (value: string, data: any, node: any) => {
|
||
if (!value) return true
|
||
// return data.name.includes(value)
|
||
if (data.name) {
|
||
return chooseNode(value, data, node)
|
||
}
|
||
}
|
||
|
||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
|
||
const chooseNode = (value: string, data: any, node: any) => {
|
||
if (data.name.indexOf(value) !== -1) {
|
||
return true
|
||
}
|
||
const level = node.level
|
||
// 如果传入的节点本身就是一级节点就不用校验了
|
||
if (level === 1) {
|
||
return false
|
||
}
|
||
// 先取当前节点的父节点
|
||
let parentData = node.parent
|
||
// 遍历当前节点的父节点
|
||
let index = 0
|
||
while (index < level - 1) {
|
||
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
|
||
if (parentData.data.name.indexOf(value) !== -1) {
|
||
return true
|
||
}
|
||
// 否则的话再往上一层做匹配
|
||
parentData = parentData.parent
|
||
index++
|
||
}
|
||
// 没匹配到返回false
|
||
return false
|
||
}
|
||
|
||
onMounted(async () => {
|
||
// 等待树渲染完成
|
||
await nextTick()
|
||
// 可以等待更长时间确保树完全展开
|
||
})
|
||
|
||
const scrollToNode = (id: string) => {
|
||
console.log("🚀 ~ scrollToNode ~ id:", id)
|
||
if (!treeRef.value) return
|
||
|
||
// 获取目标节点的元素
|
||
const targetNode = treeRef.value.getNode(id)
|
||
if (!targetNode) return
|
||
|
||
// 获取节点的DOM元素
|
||
const nodeElement = document.querySelector(`[data-key="${id}"]`)
|
||
if (nodeElement) {
|
||
// 滚动到节点位置
|
||
nodeElement.scrollIntoView({
|
||
behavior: 'smooth', // 平滑滚动
|
||
block: 'center', // 垂直方向居中
|
||
inline: 'nearest' // 水平方向最近
|
||
})
|
||
|
||
// 如果需要高亮当前节点
|
||
treeRef.value.setCurrentKey(id)
|
||
}
|
||
}
|
||
// 添加树
|
||
const onAddTree = () => {
|
||
emit('onAddTree')
|
||
}
|
||
defineExpose({ treeRef, scrollToNode })
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.cn-tree {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
height: 100%;
|
||
width: 100%;
|
||
|
||
:deep(.el-tree) {
|
||
border: 1px solid var(--el-border-color);
|
||
}
|
||
|
||
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||
background-color: var(--el-color-primary-light-7);
|
||
}
|
||
|
||
.menu-collapse {
|
||
color: var(--el-color-primary);
|
||
}
|
||
}
|
||
|
||
.custom-tree-node {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style>
|
||
<style>
|
||
.el-popper.is-customized {
|
||
/* Set padding to ensure the height is 32px */
|
||
padding: 0;
|
||
background: var(--el-color-primary-light-3);
|
||
}
|
||
|
||
.el-popper.is-customized .el-popper__arrow::before {
|
||
background: var(--el-color-primary-light-3);
|
||
right: 0;
|
||
display: none;
|
||
}
|
||
</style>
|