修改冀北问题
This commit is contained in:
guanj
205
src/components/tree/details/monitoringPointDetails.vue
Normal file
205
src/components/tree/details/monitoringPointDetails.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<el-dialog draggable v-model="dialogVisible" :title="title" width="1200px">
|
||||
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="监测点详情" name="tab1">
|
||||
<el-descriptions :column="3" border label-width="150px">
|
||||
<el-descriptions-item label="项目工程">
|
||||
{{ details.areaName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="项目单位">
|
||||
{{ details.gdName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="所属变电站">
|
||||
{{ details.bdName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级">
|
||||
{{ details.scale }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="终端厂家">
|
||||
{{ details.manufacturer }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="终端名称">
|
||||
{{ details.devName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="网络参数">
|
||||
{{ details.ip }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="监测点名称">
|
||||
{{ details.lineName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="监测点序号">
|
||||
{{ details.id }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="通讯状态">
|
||||
{{ details.comFlag }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="干扰源类型">
|
||||
{{ details.loadType }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="监测点对象名称">
|
||||
{{ details.objName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="接线方式">
|
||||
{{ details.ptType }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="PT变比">
|
||||
{{ details.pt }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="CT变比">
|
||||
{{ details.ct }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="基准容量(MVA)">
|
||||
{{ details.standardCapacity }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="最小短路容量(MVA)">
|
||||
{{ details.shortCapacity }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="供电设备容量(MVA)">
|
||||
{{ details.devCapacity }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="用户协议容量(MVA)">
|
||||
{{ details.dealCapacity }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="监测点限值" name="tab2">
|
||||
<el-descriptions :column="3" border label-width="250px">
|
||||
<el-descriptions-item label="电压偏差上限值(%)">
|
||||
{{ limitValue.voltageDev }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压偏差下限值(%)">
|
||||
{{ limitValue.uvoltageDev }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="频率偏差限值(Hz)">
|
||||
{{ limitValue.freqDev }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="三相电压不平衡度限值(%)">
|
||||
{{ limitValue.ubalance }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="负序电流限值(A)">
|
||||
{{ limitValue.ineg }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="长时闪变限值(%)">
|
||||
{{ limitValue.flicker }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压总畸变率限值(%)">
|
||||
{{ limitValue.uaberrance }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="奇次谐波电压含有率限值(%)">
|
||||
{{ limitValue.oddHarm }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="偶次谐波电压含有率限值(%)">
|
||||
{{ limitValue.evenHarm }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="3次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm3 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="4次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm4 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="5次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm5 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="6次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm6 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="7次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm7 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="8次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm8 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="9次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm9 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="10次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm10 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="11次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm11 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="12次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm12 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="13次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm13 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="14次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm14 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="15次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm15 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="16次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm16 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="17次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm17 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="18次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm18 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="19次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm19 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="20次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm20 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="21次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm21 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="22次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm22 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="23次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm23 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="24次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm24 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="25次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm25 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="0.5-1.5次间谐波电压含有率限值(%)">
|
||||
{{ limitValue.inUharm }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="2.5-15.5次谐波电压含有率限值(%)">
|
||||
{{ limitValue.inUharm16 }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { getLineOverLimitData, getLineDetailData } from '@/api/device-boot/line'
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const activeName = ref('tab1')
|
||||
const details: any = ref([])
|
||||
const limitValue: any = ref([])
|
||||
const open = (data: any) => {
|
||||
details.value = []
|
||||
limitValue.value = []
|
||||
activeName.value = 'tab1'
|
||||
title.value = data.name.replace(/（[^）]*）/g, '') + '_详情'
|
||||
|
||||
getLineDetailData(data.id).then(res => {
|
||||
details.value = res.data
|
||||
|
||||
})
|
||||
getLineOverLimitData(data.id).then(res => {
|
||||
limitValue.value = res.data
|
||||
})
|
||||
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const handleClick = (tab: any, event: Event) => {}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-upload-list__item) {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
34
src/components/tree/details/substationDetails.vue
Normal file
34
src/components/tree/details/substationDetails.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<el-dialog draggable v-model="dialogVisible" :title="title" width="500px">
|
||||
<el-descriptions class="margin-top" :column="1" border label-width="150px">
|
||||
<el-descriptions-item label="变电站名称">{{ list[0]?.srbName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级">{{ list[0]?.scale }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经度">{{ list[0]?.coordY }}</el-descriptions-item>
|
||||
<el-descriptions-item label="纬度">{{ list[0]?.coordX }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { getSubstationSelectLine } from '@/api/device-boot/line'
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const list: any = ref([])
|
||||
const open = (data: any) => {
|
||||
list.value = []
|
||||
title.value = data.name.replace(/（[^）]*）/g, '') + '_详情'
|
||||
|
||||
getSubstationSelectLine(data.id).then(res => {
|
||||
list.value = res.data
|
||||
})
|
||||
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-upload-list__item) {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,162 +1,245 @@
|
||||
<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" />
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElTree } from 'element-plus'
|
||||
import { ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
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 filterText = 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 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
|
||||
}
|
||||
// 添加树
|
||||
const onAddTree = () => {
|
||||
emit('onAddTree')
|
||||
}
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
defineExpose({ treeRef })
|
||||
</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>
|
||||
<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 } 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 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
|
||||
}
|
||||
// 添加树
|
||||
const onAddTree = () => {
|
||||
emit('onAddTree')
|
||||
}
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
defineExpose({ treeRef })
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user