修改冀北问题

2025-12-09 20:04:55 +08:00
parent 8c41a8fc77
commit 0fe2d2b911
49 changed files with 6357 additions and 5917 deletions
--- a/src/components/tree/index.vue
+++ b/src/components/tree/index.vue
@@ -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>