pointtree

2024-02-22 14:51:05 +08:00
parent 777fc7fb40
commit 19a7ad5603
9 changed files with 178 additions and 310 deletions
--- a/src/components/tree/govern/deviceTree.vue
+++ b/src/components/tree/govern/deviceTree.vue
@@ -1,73 +0,0 @@
-<template>
-    <Tree
-        ref="treRef"
-        @check-change="handleCheckChange"
-        :default-checked-keys="defaultCheckedKeys"
-        :show-checkbox="props.showCheckbox"
-        :data="tree"
-    />
-</template>
-
-<script lang="ts" setup>
-import { ref, nextTick } from 'vue'
-import Tree from '../index.vue'
-import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
-import { useConfig } from '@/stores/config'
-defineOptions({
-    name: 'govern/deviceTree'
-})
-const props = withDefaults(
-    defineProps<{
-        showCheckbox?: boolean
-        defaultCheckedKeys?: any
-    }>(),
-    {
-        showCheckbox: false,
-        defaultCheckedKeys: []
-    }
-)
-
-const emit = defineEmits(['init', 'checkChange'])
-const config = useConfig()
-const tree = ref()
-const treRef = ref()
-getDeviceTree().then(res => {
-    let arr: any[] = []
-    res.data.forEach((item: any) => {
-        item.icon = 'el-icon-HomeFilled'
-        item.color = config.getColorVal('elementUiPrimary')
-        item.children.forEach((item2: any) => {
-            item2.icon = 'el-icon-List'
-            item2.color = config.getColorVal('elementUiPrimary')
-            item2.children.forEach((item3: any) => {
-                item3.icon = 'el-icon-Platform'
-                item3.color = config.getColorVal('elementUiPrimary')
-                if (item3.comFlag === 1) {
-                    item3.color = '#e26257 !important'
-                }
-                arr.push(item3)
-            })
-        })
-    })
-    tree.value = res.data
-    nextTick(() => {
-        if (arr.length) {
-            treRef.value.treeRef.setCurrentKey(arr[0].id)
-            // 注册父组件事件
-            emit('init', {
-                level: 2,
-                ...arr[0]
-            })
-        } else {
-            emit('init')
-        }
-    })
-})
-const handleCheckChange = (data: any, checked: any, indeterminate: any) => {
-    emit('checkChange', {
-        data,
-        checked,
-        indeterminate
-    })
-}
-</script>
--- a/src/components/tree/govern/getMarketList.vue
+++ b/src/components/tree/govern/getMarketList.vue
@@ -1,29 +0,0 @@
-<template>
-    <Tree ref="treRef" :data="tree" />
-</template>
-<script setup lang="ts">
-import { getMarketList } from '@/api/user-boot/user'
-import Tree from '../index.vue'
-import { useConfig } from '@/stores/config'
-import { ref, reactive, nextTick } from 'vue'
-const config = useConfig()
-const tree = ref()
-const treRef = ref()
-const emit = defineEmits(['selectUser'])
-getMarketList().then((res: any) => {
-    if (res.code === 'A0000') {
-        tree.value = res.data.map((item: any) => {
-            return {
-                ...item,
-                icon: 'el-icon-User',
-                color: 'royalblue'
-            }
-        })
-        emit('selectUser', tree.value[0])
-        nextTick(() => {
-            treRef.value.treeRef.setCurrentKey(tree.value[0].id)
-        })
-    }
-})
-</script>
-<style lang="scss" scoped></style>
--- a/src/components/tree/govern/pointTree.vue
+++ b/src/components/tree/govern/pointTree.vue
@@ -1,52 +0,0 @@
-<template>
-    <Tree ref="treRef" :data="tree" />
-</template>
-
-<script lang="ts" setup>
-import { ref, nextTick } from 'vue'
-import Tree from '../index.vue'
-import { getLineTree } from '@/api/cs-device-boot/csLedger'
-import { useConfig } from '@/stores/config'
-defineOptions({
-    name: 'govern/deviceTree'
-})
-const emit = defineEmits(['init'])
-const config = useConfig()
-const tree = ref()
-const treRef = ref()
-getLineTree().then(res => {
-    let arr: any[] = []
-    res.data.forEach((item: any) => {
-        item.icon = 'el-icon-HomeFilled'
-        item.color = config.getColorVal('elementUiPrimary')
-        item.children.forEach((item2: any) => {
-            item2.icon = 'el-icon-List'
-            item.color = config.getColorVal('elementUiPrimary')
-            item2.children.forEach((item3: any) => {
-                item3.icon = 'el-icon-Platform'
-                item3.color = config.getColorVal('elementUiPrimary')
-                if (item3.comFlag === 1) {
-                    item3.color = '#e26257 !important'
-                }
-                item3.children.forEach((item4: any) => {
-                    item4.icon = 'el-icon-LocationFilled'
-                    arr.push(item4)
-                })
-            })
-        })
-    })
-    tree.value = res.data
-    nextTick(() => {
-        if (arr.length) {
-            treRef.value.treeRef.setCurrentKey(arr[0].id)
-            // 注册父组件事件
-            emit('init', {
-                level: 2,
-                ...arr[0]
-            })
-        } else {
-            emit('init')
-        }
-    })
-})
-</script>
--- a/src/components/tree/index.vue
+++ b/src/components/tree/index.vue
@@ -1,50 +1,50 @@
 <template>
-    <div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
+    <div  :style="{ width: menuCollapse ? '40px' : props.width }" style='transition: all 0.3s; overflow: hidden'>
        <Icon
-            v-show="menuCollapse"
-            @click="onMenuCollapse"
+            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"
+            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>
+        <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>
                    <template #prefix>
-                        <Icon name="el-icon-Search" style="font-size: 16px" />
+                        <Icon name='el-icon-Search' style='font-size: 16px' />
                    </template>
                </el-input>
                <Icon
-                    @click="onMenuCollapse"
+                    @click='onMenuCollapse'
                    :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
                    :class="menuCollapse ? 'unfold' : ''"
-                    size="18"
-                    class="fold ml10 menu-collapse"
-                    style="cursor: pointer"
+                    size='18'
+                    class='fold ml10 menu-collapse'
+                    style='cursor: pointer'
                    v-if='props.canExpand'
                />
            </div>
            <el-tree
-                style="flex: 1; overflow: auto"
-                ref="treeRef"
-                :props="defaultProps"
-                v-bind="$attrs"
+                style='flex: 1; overflow: auto'
+                ref='treeRef'
+                :props='defaultProps'
                highlight-current
                default-expand-all
-                :filter-node-method="filterNode"
-                node-key="id"
+                :filter-node-method='filterNode'
+                node-key='id'
+                v-bind='$attrs'
            >
-                <template #default="{ node, data }">
-                    <span class="custom-tree-node">
+                <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"
+                            :name='data.icon'
+                            style='font-size: 16px'
+                            :style='{ color: data.color }'
+                            v-if='data.icon'
                        />
-                        <span style="margin-left: 4px">{{ node.label }}</span>
+                        <span style='margin-left: 4px'>{{ node.label }}</span>
                    </span>
                </template>
            </el-tree>
@@ -52,7 +52,7 @@
    </div>
 </template>

-<script lang="ts" setup>
+<script lang='ts' setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
 import { ref, watch } from 'vue'
@@ -60,6 +60,7 @@ import { ref, watch } from 'vue'
 defineOptions({
    name: 'govern/tree'
 })
+
 interface Props {
    width?: string
    canExpand?: boolean
@@ -91,7 +92,7 @@ const treeRef = ref<InstanceType<typeof ElTree>>()
 defineExpose({ treeRef })
 </script>

-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .cn-tree {
    flex-shrink: 0;
    display: flex;
@@ -100,16 +101,20 @@ defineExpose({ treeRef })
    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;
--- a/src/components/tree/pms/pointTree.vue
+++ b/src/components/tree/pms/pointTree.vue
@@ -1,23 +1,32 @@
 <template>
-    <div style='height: 100%;width: 100%;display: flex;flex-direction: column'>
-        <el-select v-model='formData.statisticalType' placeholder='请选择' style='min-width: unset;padding: 10px 10px 0'
-                   @change='loadData'>
-            <el-option v-for='item in classificationData' :key='item.id' :label='item.name'
-                       :value='item.id'></el-option>
+    <div class="point-tree" style="height: 100%; width: 100%; display: flex; flex-direction: column">
+        <el-select
+            v-model="formData.statisticalType"
+            placeholder="请选择"
+            style="min-width: unset; padding: 10px 10px 0"
+            @change="loadData"
+        >
+            <el-option
+                v-for="item in classificationData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+            ></el-option>
        </el-select>
-        <div style='flex: 1;overflow: hidden'>
-            <Tree ref='treRef' :data='tree' style='width: 100%;height: 100%' :canExpand='false' />
+        <div style="flex: 1; overflow: hidden">
+            <Tree ref="treRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
        </div>
    </div>
 </template>

-<script lang='ts' setup>
-import { ref, nextTick } from 'vue'
+<script lang="ts" setup>
+import { ref, nextTick, watch } from 'vue'
 import Tree from '../index.vue'
 import { useAdminInfo } from '@/stores/adminInfo'
 import { useDictData } from '@/stores/dictData'
 import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
 import { useConfig } from '@/stores/config'
+import { ElTree } from 'element-plus'

 defineOptions({
    name: 'pms/pointTree'
@@ -40,13 +49,12 @@ const formData = ref({
    statisticalType: classificationData[0].id,
    scale: null
 })
-console.log(formData)
+
 const loadData = () => {
    let form = JSON.parse(JSON.stringify(formData.value))
    form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
    getTerminalTreeForFive(form).then(res => {
        console.log(res)
-        let arr: any[] = []
        res.data.forEach((item: any) => {
            item.icon = 'fa-solid fa-synagogue'
            item.color = config.getColorVal('elementUiPrimary')
@@ -59,7 +67,10 @@ const loadData = () => {
                    item3.children.forEach((item4: any) => {
                        item4.icon = 'fa-solid fa-tower-observation'
                        item4.color = config.getColorVal('elementUiPrimary')
-                        item4.children.forEach((item5: any) => {
+                        item4.children.forEach((item5: anyObj, index: number) => {
+                            // if (!props.currentNodeKey && index === 0) {
+                            //     treRef.value.setCurrentKey(item5.id)
+                            // }
                            item5.icon = 'fa-solid fa-location-dot'
                            item5.color = config.getColorVal('elementUiPrimary')
                            if (item5.comFlag === 0) {
@@ -78,39 +89,4 @@ const loadData = () => {
    })
 }
 loadData()
-// getTerminalTreeForFive().then(res => {
-//     let arr: any[] = []
-//     res.data.forEach((item: any) => {
-//         item.icon = 'el-icon-HomeFilled'
-//         item.color = config.getColorVal('elementUiPrimary')
-//         item.children.forEach((item2: any) => {
-//             item2.icon = 'el-icon-List'
-//             item.color = config.getColorVal('elementUiPrimary')
-//             item2.children.forEach((item3: any) => {
-//                 item3.icon = 'el-icon-Platform'
-//                 item3.color = config.getColorVal('elementUiPrimary')
-//                 if (item3.comFlag === 1) {
-//                     item3.color = '#e26257 !important'
-//                 }
-//                 item3.children.forEach((item4: any) => {
-//                     item4.icon = 'el-icon-LocationFilled'
-//                     arr.push(item4)
-//                 })
-//             })
-//         })
-//     })
-//     tree.value = res.data
-//     nextTick(() => {
-//         if (arr.length) {
-//             treRef.value.treeRef.setCurrentKey(arr[0].id)
-//             // 注册父组件事件
-//             emit('init', {
-//                 level: 2,
-//                 ...arr[0]
-//             })
-//         } else {
-//             emit('init')
-//         }
-//     })
-// })
 </script>