admin-sjzx/src/views/pqs/business/terminal/TerminalManagement/index.vue

<template>
    <div class="default-main" style="position: relative">
        <TableHeader>
            <template #select>
                <el-form-item label="终端型号">
                    <el-select v-model="tableStore.table.params.devType" clearable placeholder="请选择终端型号">
                        <el-option
                            v-for="item in teriminaloption"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="终端状态">
                    <el-select v-model="tableStore.table.params.runFlag" clearable placeholder="请选择终端状态">
                        <el-option
                            v-for="item in teriminalstatusoption"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="通讯状态">
                    <el-select v-model="tableStore.table.params.comFlag" clearable placeholder="请选择通讯状态">
                        <el-option
                            v-for="item in stateoption"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="筛选">
                    <el-input v-model="tableStore.table.params.filterName" @keyup="searchEvent" placeholder="输入关键字筛选" />
                </el-form-item>
            </template>
            <template #operation>
                <!-- <el-button icon="el-icon-Download" type="primary" @click="add">导出</el-button>
                <el-button icon="el-icon-Check" type="primary" @click="add">批量升级</el-button> -->
                <el-button type="primary" icon="el-icon-Success" @click="deviceData">终端状态管理</el-button>
                <el-button type="primary" icon="el-icon-s-order" @click="liuniangconfig">流量套餐配置</el-button>
                <el-button type="primary" icon="el-icon-Menu" @click="configliul">流量策略配置</el-button>
                <el-button type="primary" icon="el-icon-s-data" @click="liultjData">流量统计</el-button>
                <el-button type="primary" icon="el-icon-Setting" @click="resect">重启前置程序</el-button>
            </template>
        </TableHeader>
        <div :style="`height: calc(${tableStore.table.height} + 58px)`">
            <vxe-table
                v-loading="tableStore.table.loading"
                height="auto"
                auto-resize
                ref="tableRef"
                v-bind="defaultAttribute"
                :data="treeData"
                show-overflow
                :tree-config="{ transform: true, parentField: 'pid' }"
                :scroll-y="{ enabled: true }"
                :checkbox-config="{ labelField: 'name' }"
            >
                <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>
                <vxe-column field="reamFlowMeal" title="扩展套餐(MB)"></vxe-column>
                <vxe-column title="剩余流量(MB)">
                    <template #default="{ row }">
                        <el-tag v-if="row.level === 4" type="primary">
                            {{
                                row.level === 4
                                    ? (row.baseFlowMeal + row.reamFlowMeal - row.statisValue).toFixed(2)
                                    : ''
                            }}
                        </el-tag>
                    </template>
                </vxe-column>
                <vxe-column title="流量使用占比(%)">
                    <template #default="{ row }">
                        {{
                            row.level === 4
                                ? ((row.statisValue / (row.baseFlowMeal + row.reamFlowMeal)) * 100).toFixed(2)
                                : ''
                        }}
                    </template>
                </vxe-column>
                <vxe-column field="runFlag" title="终端状态">
                    <template #default="{ row }">
                        <el-tag
                          
                            v-if="row.runFlag === 0"
                            style="color: #fff; background: #0099cc"
                            size="small"
                        >
                            投运
                        </el-tag>
                        <el-tag
                          
                            v-if="row.runFlag === 1"
                            style="color: #fff; background: #996600"
                            size="small"
                        >
                            热备用
                        </el-tag>
                        <el-tag
                          
                            v-if="row.runFlag === 2"
                            style="color: #fff; background: #cc0000"
                            size="small"
                        >
                            停运
                        </el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="comFlag" title="通讯状态">
                    <template #default="{ row }">
                        <el-tag
                          
                            v-if="row.comFlag === 0"
                            style="color: #fff; background: #cc0000"
                            size="small"
                        >
                            中断
                        </el-tag>
                        <el-tag
                          
                            v-if="row.comFlag === 1"
                            style="color: #fff; background: #2e8b57"
                            size="small"
                        >
                            正常
                        </el-tag>
                    </template>
                </vxe-column>

                <vxe-column title="操作" min-width="100">
                    <template #default="{ row }">
                        <el-button
                            v-if="row.level === 4"
                            type="primary"
                            size="small"
                            link
                            @click="uesdealia(row)"
                            icon="el-icon-view"
                        >
                            终端详情
                        </el-button>
                        <el-button
                            v-if="row.level === 4"
                            :disabled="row.state == 1 ? true : false"
                            type="primary"
                            size="small"
                            link
                            icon="el-icon-view"
                            @click="queryview(row)"
                        >
                            流量详情
                        </el-button>
                    </template>
                </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">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import TableHeader from '@/components/table/header/index.vue'
import { mainHeight } from '@/utils/layout'
import { getTerminalUpLog } from '@/api/device-boot/Business.ts'
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 dictData = useDictData()
const teriminaloption: any = dictData.getBasicData('Dev_Type')
const teriminalstatusoption = ref([
    { name: '全部', id: '' },
    { name: '投运', id: 0 },
    { name: '热备用', id: 1 },
    { name: '停运', id: 2 }
])
const stateoption = ref([
    { name: '全部', id: '' },
    { name: '正常', id: 1 },
    { name: '中断', id: 0 }
])
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 treeData: any = ref([])
const treeDataCopy: any = ref([])
const echartsXq: any = ref([])

const logtableData: any = ref([])
const tableRef = ref()
const status = ref('')
const tableStore = new TableStore({
    url: '/device-boot/maintain/getTerminalMainList',
    method: 'POST',
    column: [],
    loadCallback: () => {
        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)
    }
})
tableStore.table.params.devType=''
tableStore.table.params.runFlag=''
tableStore.table.params.comFlag=''
tableStore.table.params.filterName=''
// 处理大数据卡顿
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
onMounted(() => {
    tableStore.index()
})

// 终端状态管理
const deviceData = () => {}
// 流量套餐配置
const liuniangconfig = () => {}
// 流量策略配置
const configliul = () => {}
// 流量统计
const liultjData = () => {}
// 重启前置程序
const resect = () => {}

// 终端详情
const uesdealia = (row: any) => {
    echartsXq.value = {
        title: {
            text: row.name + '性能详情'
        },

        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]
                    ]
                }
            ]
        }
    }

    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 => {
    const filterVal = XEUtils.toValueString(tableStore.table.params.filterName).trim().toLowerCase()
    if (filterVal) {
        const options = { children: 'children' }
        const searchProps = ['name']
        const rest = XEUtils.searchTree(
            treeDataCopy.value,
            (item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
            options
        )
        treeData.value = rest

        // 搜索之后默认展开所有子节点
    } else {
        treeData.value = treeDataCopy.value
    }
    nextTick(() => {
        const $table = tableRef.value
        if ($table) {
            $table.setAllTreeExpand(true)
        }
    })
}, 500)
</script>