联调承载能力评估

2024-03-06 20:37:36 +08:00
parent e4745f891f
commit f92e820986
18 changed files with 168 additions and 105 deletions
--- a/src/components/tree/pqs/Terminal.vue
+++ b/src/components/tree/pqs/Terminal.vue
@@ -0,0 +1,83 @@
+<template>
+    <Tree ref="treRef" :data="tree" :expanded="expanded" />
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick } from 'vue'
+import Tree from './index.vue'
+
+import { getTerminalTree } from '@/api/device-boot/Business.ts'
+import { useConfig } from '@/stores/config'
+defineOptions({
+    name: 'govern/deviceTree'
+})
+const emit = defineEmits(['init'])
+const config = useConfig()
+const expanded: any = ref([])
+const tree = ref()
+const treRef = ref()
+const info = (id: any) => {
+  
+    expanded.value = [id]
+    getTerminalTree().then(res => {
+        // let arr: any[] = []
+        res.data.forEach((item: any) => {
+            item.icon = 'el-icon-Menu'
+            item.level = 0
+            item.children.forEach((item2: any) => {
+                item2.icon = 'el-icon-HomeFilled'
+                item2.level = 100
+                expanded.value.push(item2.id)
+                item2.children.forEach((item3: any) => {
+                    item3.icon = 'el-icon-CollectionTag'
+                    item3.level = 200
+                    item3.children.forEach((item4: any) => {
+                        item4.icon = 'el-icon-Flag'
+                        item4.level = 300
+                        // arr.push(item4)
+                        item4.children.forEach((item5: any) => {
+                            item5.icon = 'el-icon-OfficeBuilding'
+                            item5.level = 400
+                            item5.children.forEach((item6: any) => {
+                                item6.icon = 'el-icon-Film'
+                                item6.level = 500
+                                item6.children.forEach((item7: any) => {
+                                    item7.icon = 'el-icon-Share'
+                                    item7.level = 600
+                                    item7.children.forEach((item8: any) => {
+                                        item8.icon = 'el-icon-Location'
+                                        item8.level = 700
+                                    })
+                                })
+                            })
+                        })
+                    })
+                })
+            })
+        })
+        tree.value = res.data
+
+        nextTick(() => {
+            treRef.value.setCurrentKey(id)
+            // if (arr.length) {
+            //     treRef.value.treeRef.setCurrentKey(arr[0].id)
+            //     // 注册父组件事件
+            //     emit('init', {
+            //         level: 2,
+            //         ...arr[0]
+            //     })
+            // } else {
+            //     emit('init')
+            // }
+        })
+    })
+}
+info('')
+
+defineExpose({ info })
+</script>
+<style lang="scss" scoped>
+.el-tree {
+    background: #efeff0;
+}
+</style>
--- a/src/components/tree/pqs/index.vue
+++ b/src/components/tree/pqs/index.vue
@@ -0,0 +1,120 @@
+<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>
+                    <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"
+                />
+            </div>
+            <el-tree
+                style="flex: 1; overflow: auto"
+                ref="treeRef"
+                :props="defaultProps"
+                v-bind="$attrs"
+                highlight-current
+                :default-expanded-keys="expanded"
+                :filter-node-method="filterNode"
+                node-key="id"
+            >
+                <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'
+
+defineOptions({
+    name: 'govern/tree'
+})
+interface Props {
+    width?: string,
+    expanded?: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    width: '280px',
+    expanded:[]
+})
+const { proxy } = useCurrentInstance()
+const menuCollapse = ref(false)
+const filterText = ref('')
+const defaultProps = {
+    label: 'name',
+    value: 'id'
+}
+watch(filterText, val => {
+    treeRef.value!.filter(val)
+})
+const onMenuCollapse = () => {
+    menuCollapse.value = !menuCollapse.value
+    proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
+}
+const filterNode = (value: string, data: any) => {
+    if (!value) return true
+    return data.name.includes(value)
+}
+const treeRef = ref<InstanceType<typeof ElTree>>()
+ const setCurrentKey=(e:string)=>{
+     treeRef.value!.setCurrentKey(e)
+ }
+
+defineExpose({ treeRef,setCurrentKey })
+</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>
--- a/src/components/tree/pqs/loadBearingTree.vue
+++ b/src/components/tree/pqs/loadBearingTree.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="point-tree">
+        <div style="flex: 1; overflow: hidden">
+            <Tree ref="treeRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, ref, useAttrs } from 'vue'
+import Tree from '../index.vue'
+
+import { useDictData } from '@/stores/dictData'
+import { carryCapacityTree } from '@/api/advance-boot/bearingCapacity'
+import { useConfig } from '@/stores/config'
+
+defineOptions({
+    name: 'pms/pointTree'
+})
+const emit = defineEmits(['init'])
+const attrs = useAttrs()
+
+const dictData = useDictData()
+const config = useConfig()
+const tree = ref()
+const treeRef = ref()
+
+const loadData = () => {
+    let nodeKey = ''
+    carryCapacityTree().then(res => {
+        console.log(res)
+        nodeKey = res.data[0].children[0].children[0].children[0].children[0].children[0].id
+        emit('init', res.data[0].children[0].children[0].children[0].children[0].children[0])
+        tree.value = res.data
+        if (nodeKey) {
+            nextTick(() => {
+                treeRef.value.treeRef.setCurrentKey(nodeKey)
+                // treeRef.value.treeRef.setExpandedKeys(nodeKey)
+            })
+        }
+    })
+}
+loadData()
+</script>
+<style lang="scss">
+.point-tree {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border: 1px solid var(--el-border-color);
+}
+</style>
--- a/src/components/tree/pqs/pointTree.vue
+++ b/src/components/tree/pqs/pointTree.vue
@@ -0,0 +1,122 @@
+<template>
+    <div class="point-tree">
+        <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="treeRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, ref, useAttrs } 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'
+
+defineOptions({
+    name: 'pms/pointTree'
+})
+const emit = defineEmits(['init'])
+const attrs = useAttrs()
+const adminInfo = useAdminInfo()
+const dictData = useDictData()
+const config = useConfig()
+const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
+const tree = ref()
+const treeRef = ref()
+const formData = ref({
+    deptIndex: adminInfo.$state.deptIndex,
+    monitorFlag: 2,
+    powerFlag: 2,
+    loadType: null,
+    manufacturer: null,
+    serverName: 'event-boot',
+    statisticalType: classificationData[2].id,
+    scale: null
+})
+const loadData = () => {
+    let obj = classificationData.find(function (i) {
+        return i.id === formData.value.statisticalType
+    }) || { code: '' }
+    let form = JSON.parse(JSON.stringify(formData.value))
+    form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
+    let nodeKey = ''
+    getTerminalTreeForFive(form).then(res => {
+        console.log(res)
+        if (obj.code == 'Power_Network') {
+            res.data = [
+                {
+                    name: '电网拓扑',
+                    level: -1,
+                    id: 0,
+                    children: res.data
+                }
+            ]
+        }
+        res.data.forEach((item: any) => {
+            item.icon = 'fa-solid fa-synagogue'
+            item.color = config.getColorVal('elementUiPrimary')
+            item.children.forEach((item2: any) => {
+                item2.icon = 'fa-solid fa-city'
+                item.color = config.getColorVal('elementUiPrimary')
+                item2.children.forEach((item3: any) => {
+                    item3.icon = 'fa-solid fa-building'
+                    item3.color = config.getColorVal('elementUiPrimary')
+                    item3.children.forEach((item4: any) => {
+                        item4.icon = 'fa-solid fa-tower-observation'
+                        item4.color = config.getColorVal('elementUiPrimary')
+                        item4.children.forEach((item5: anyObj) => {
+                            if (!attrs['current-node-key'] && !nodeKey) {
+                                nodeKey = item5.id
+                                emit('init', item5)
+                            }
+                            item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
+                            item5.icon = 'fa-solid fa-location-dot'
+                            item5.color = config.getColorVal('elementUiPrimary')
+                            if (item5.comFlag === 0) {
+                                item5.color = 'red !important'
+                            } else if (item5.comFlag === 1) {
+                                item5.color = '#00f93b !important'
+                            } else if (item5.comFlag === 2) {
+                                item5.color = '#8c8c8c !important'
+                            }
+                        })
+                    })
+                })
+            })
+        })
+        tree.value = res.data
+        if (nodeKey) {
+            nextTick(() => {
+                treeRef.value.treeRef.setCurrentKey(nodeKey)
+                // treeRef.value.treeRef.setExpandedKeys(nodeKey)
+            })
+        }
+    })
+}
+loadData()
+</script>
+<style lang="scss">
+.point-tree {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border: 1px solid var(--el-border-color);
+}
+</style>