优化数形表格 大数据卡顿 终端运维管理 20%

src/components/echarts/MyEchart.vue

@@ -108,6 +108,9 @@ const initChart = () => {
         ],
         ...props.options.options
     })
+    setTimeout(() => {
+        chart.resize()
+    },0)
 }
 const handlerYAxis = () => {
     let temp = {

src/styles/vxeTable.scss

@@ -44,7 +44,7 @@
 .vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
 .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,
 .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon {
-    color: var(--el-color-primary-light-8);
+    color: var(--el-color-primary-light-3);
 }
 
 .vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,

src/views/pms/BusinessAdministrator/TerminalManagement/ProgramManagement.vue

@@ -59,8 +59,9 @@
                 ref="tableRef"
                 v-bind="defaultAttribute"
                 :data="treeData"
-                :column-config="{ resizable: true }"
+                show-overflow
-                :tree-config="{}"
+                :tree-config="{ transform: true, parentField: 'pid' }"
+                :scroll-y="{ enabled: true }"
             >
                 <vxe-column field="name" align="left" title="电网拓扑" min-width="200" tree-node></vxe-column>
                 <vxe-column field="devType" title="终端型号" :formatter="formFilter"></vxe-column>
@@ -243,6 +244,7 @@ const dialogVisible = ref(false)
 const protitle = ref('')
 const filterName = ref('')
 const treeData: any = ref([])
+const treeDataCopy: any = ref([])
 //进度条对象
 const percentageoption = ref([
     {
@@ -270,13 +272,36 @@ const tableStore = new TableStore({
     method: 'POST',
     column: [],
     loadCallback: () => {
-        treeData.value = tableStore.table.data
+        tableStore.table.data.forEach((item: any) => {
+            if (item.children.length > 0) {
+                item.id = item.children[0].pid
+            }
+        })
+        treeData.value = tree2List(tableStore.table.data)
+        treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
         setTimeout(() => {
             tableRef.value.setAllTreeExpand(true)
         }, 0)
     }
 })
-
+const tree2List = (list: any) => {
+    //存储结果的数组
+    let arr: any = []
+    // 遍历 tree 数组
+    list.forEach((item: any) => {
+        // 判断item是否存在children
+        if (!item.children) return arr.push(item)
+        // 函数递归，对children数组进行tree2List的转换
+        const children = tree2List(item.children)
+        // 删除item的children属性
+        delete item.children
+        // 把item和children数组添加至结果数组
+        //..children: 意思是把children数组展开
+        arr.push(item, ...children)
+    })
+    // 返回结果数组
+    return arr
+}
 provide('tableStore', tableStore)
 tableStore.table.params.searchValue = ''
 tableStore.table.params.searchState = 0
@@ -330,8 +355,8 @@ const searchEvent = debounce(e => {
         const options = { children: 'children' }
         const searchProps = ['name']
         const rest = XEUtils.searchTree(
-            tableStore.table.data,
+            treeDataCopy,
-            (item:any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
+            (item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
             options
         )
 
@@ -339,7 +364,7 @@ const searchEvent = debounce(e => {
 
         // 搜索之后默认展开所有子节点
     } else {
-        treeData.value = tableStore.table.data
+        treeData.value = treeDataCopy
     }
     nextTick(() => {
         const $table = tableRef.value

src/views/pms/BusinessAdministrator/TerminalManagement/TerminalManagement.vue

@@ -55,10 +55,19 @@
                 ref="tableRef"
                 v-bind="defaultAttribute"
                 :data="treeData"
-                :column-config="{ resizable: true }"
+                show-overflow
-                :scroll-y="{ enabled: true, gt: 30 }"
+                :tree-config="{ transform: true, parentField: 'pid' }"
+                :scroll-y="{ enabled: true }"
+                :checkbox-config="{ labelField: 'name' }"
             >
-                <vxe-column field="name" align="left" title="电网拓扑" min-width="200" tree-node></vxe-column>
+                <vxe-column
+                    field="name"
+                    align="left"
+                    type="checkbox"
+                    title="电网拓扑"
+                    min-width="200"
+                    tree-node
+                ></vxe-column>
                 <vxe-column field="devType" title="终端型号"></vxe-column>
                 <vxe-column field="version" title="版本信息"></vxe-column>
                 <vxe-column field="baseFlowMeal" title="基础套餐(MB)"></vxe-column>
@@ -137,7 +146,8 @@
                         <el-button
                             v-if="row.level === 4"
                             type="primary"
-                            size="small" link
+                            size="small"
+                            link
                             @click="uesdealia(row)"
                             icon="el-icon-view"
                         >
@@ -147,7 +157,8 @@
                             v-if="row.level === 4"
                             :disabled="row.state == 1 ? true : false"
                             type="primary"
-                            size="small" link
+                            size="small"
+                            link
                             icon="el-icon-view"
                             @click="queryview(row)"
                         >
@@ -157,6 +168,36 @@
                 </vxe-column>
             </vxe-table>
         </div>
+        <!-- 终端使用详情 -->
+        <el-dialog
+            v-model="dialogVisiblexq"
+            v-if="dialogVisiblexq"
+            title="终端使用详情"
+            width="70%"
+            :before-close="handleClose"
+        >
+            <MyEchart :options="echartsXq" style="width: 100%; height: 300px" />
+            <vxe-table v-bind="defaultAttribute" height="400" :data="logtableData">
+                <vxe-colgroup title="cup使用率">
+                    <vxe-column field="date" title="使用率"></vxe-column>
+                    <vxe-column field="date" title="总量"></vxe-column>
+                    <vxe-column field="date" title="使用量"></vxe-column>
+                    <vxe-column field="date" title="未使用量"></vxe-column>
+                </vxe-colgroup>
+                <vxe-colgroup title="内存使用率">
+                    <vxe-column field="date" title="使用率"></vxe-column>
+                    <vxe-column field="date" title="总量"></vxe-column>
+                    <vxe-column field="date" title="使用量"></vxe-column>
+                    <vxe-column field="date" title="未使用量"></vxe-column>
+                </vxe-colgroup>
+                <vxe-colgroup title="磁盘使用率">
+                    <vxe-column field="date" title="使用率"></vxe-column>
+                    <vxe-column field="date" title="总量"></vxe-column>
+                    <vxe-column field="date" title="使用量"></vxe-column>
+                    <vxe-column field="date" title="未使用量"></vxe-column>
+                </vxe-colgroup>
+            </vxe-table>
+        </el-dialog>
     </div>
 </template>
 <script setup lang="ts">
@@ -169,12 +210,13 @@ import { getTerminalUpLog } from '@/api/Business'
 import XEUtils from 'xe-utils'
 import { debounce } from 'lodash-es'
 import { useDictData } from '@/stores/dictData'
+import MyEchart from '@/components/echarts/MyEchart.vue'
 defineOptions({
     name: 'BusinessAdministrator/TerminalManagement/TerminalManagement'
 })
 
 const pageHeight = mainHeight(83)
-const dialogHeight = mainHeight(300)
+
 const dictData = useDictData()
 const teriminaloption: any = dictData.getBasicData('Dev_Type')
 const teriminalstatusoption = ref([
@@ -188,11 +230,18 @@ const stateoption = ref([
     { name: '正常', id: 1 },
     { name: '中断', id: 0 }
 ])
-const prodialogVisible = ref(false)
+const dialogVisiblexq = ref(false)
 const dialogVisible = ref(false)
+const prodialogVisible = ref(false)
+const liudialogVisible = ref(false)
+const condialogVisible = ref(false)
+const tjdialogVisible = ref(false)
+
 const protitle = ref('')
 const filterName = ref('')
 const treeData: any = ref([])
+const treeDataCopy: any = ref([])
+const echartsXq: any = ref([])
 
 const logtableData: any = ref([])
 const tableRef = ref()
@@ -202,12 +251,37 @@ const tableStore = new TableStore({
     method: 'POST',
     column: [],
     loadCallback: () => {
-        treeData.value = tableStore.table.data
+        tableStore.table.data.forEach((item: any) => {
+            if (item.children.length > 0) {
+                item.id = item.children[0].pid
+            }
+        })
+        treeData.value = tree2List(tableStore.table.data)
+        treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
         setTimeout(() => {
             tableRef.value.setAllTreeExpand(true)
         }, 0)
     }
 })
+// 处理大数据卡顿
+const tree2List = (list: any) => {
+    //存储结果的数组
+    let arr: any = []
+    // 遍历 tree 数组
+    list.forEach((item: any) => {
+        // 判断item是否存在children
+        if (!item.children) return arr.push(item)
+        // 函数递归，对children数组进行tree2List的转换
+        const children = tree2List(item.children)
+        // 删除item的children属性
+        delete item.children
+        // 把item和children数组添加至结果数组
+        //..children: 意思是把children数组展开
+        arr.push(item, ...children)
+    })
+    // 返回结果数组
+    return arr
+}
 
 provide('tableStore', tableStore)
 tableStore.table.params.searchValue = ''
@@ -215,7 +289,6 @@ tableStore.table.params.searchState = 0
 onMounted(() => {
     tableStore.index()
 })
-const add = () => {}
 
 // 终端状态管理
 const deviceData = () => {}
@@ -229,17 +302,84 @@ const liultjData = () => {}
 const resect = () => {}
 
 // 终端详情
-const uesdealia = (row: any) => {}
+const uesdealia = (row: any) => {
-// 流量详情
+    echartsXq.value = {
-const queryview = (row: any) => {
+        title: {
-    dialogVisible.value = true
+            text: row.name + '性能详情'
-    protitle.value = row.name
+        },
-    let data = {
+
-        id: row.id
+        legend: {
+            data: ['cpu使用率', '内存使用率', '磁盘使用率'],
+            icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z'
+        },
+        xAxis: {
+            type: 'time',
+            name: '时间'
+        },
+        yAxis: {
+            max: '100',
+            name: '%'
+        },
+        options: {
+            series: [
+                {
+                    name: 'cpu使用率',
+                    type: 'line',
+                    smooth: true,
+                    data: [
+                        ['2022-02-01 12:12:11', 10],
+                        ['2022-02-01 12:12:12', 20],
+                        ['2022-02-01 12:12:13', 30],
+                        ['2022-02-01 12:12:14', 44],
+                        ['2022-02-01 12:12:15', 50],
+                        ['2022-02-01 12:12:16', 65],
+                        ['2022-02-01 12:12:17', 76]
+                    ]
+                },
+                {
+                    name: '内存使用率',
+                    type: 'line',
+                    smooth: true,
+                    data: [
+                        ['2022-02-01 12:12:11', 13],
+                        ['2022-02-01 12:12:12', 54],
+                        ['2022-02-01 12:12:13', 34],
+                        ['2022-02-01 12:12:14', 44],
+                        ['2022-02-01 12:12:15', 35],
+                        ['2022-02-01 12:12:16', 53]
+                    ]
+                },
+                {
+                    name: '磁盘使用率',
+                    type: 'line',
+                    smooth: true,
+                    data: [
+                        ['2022-02-01 12:12:11', 13],
+                        ['2022-02-01 12:12:12', 2],
+                        ['2022-02-01 12:12:13', 2],
+                        ['2022-02-01 12:12:14', 32],
+                        ['2022-02-01 12:12:15', 43],
+                        ['2022-02-01 12:12:16', 23],
+                        ['2022-02-01 12:12:17', 23]
+                    ]
                 }
-    getTerminalUpLog(data).then((res: any) => {
+            ]
-        logtableData.value = res.data
+        }
-    })
+    }
+
+    dialogVisiblexq.value = true
+}
+// 流量详情
+const queryview = (row: any) => {}
+// 关闭
+const handleClose = () => {
+    dialogVisible.value = false
+    prodialogVisible.value = false
+    liudialogVisible.value = false
+    condialogVisible.value = false
+    tjdialogVisible.value = false
+    dialogVisiblexq.value = false
+    // this.getList()
 }
 // 表格过滤
 const searchEvent = debounce(e => {
@@ -248,16 +388,15 @@ const searchEvent = debounce(e => {
         const options = { children: 'children' }
         const searchProps = ['name']
         const rest = XEUtils.searchTree(
-            tableStore.table.data,
+            treeDataCopy.value,
             (item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
             options
         )
-
         treeData.value = rest
 
         // 搜索之后默认展开所有子节点
     } else {
-        treeData.value = tableStore.table.data
+        treeData.value = treeDataCopy.value
     }
     nextTick(() => {
         const $table = tableRef.value
@@ -265,5 +404,5 @@ const searchEvent = debounce(e => {
             $table.setAllTreeExpand(true)
         }
     })
-}, 300)
+}, 500)
 </script>