413 lines
16 KiB
Vue
413 lines
16 KiB
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>
|