Web/admin-sjzx
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

绘制并联调icd文件管理页面

Browse Source 
绘制并联调终端型号管理页面
This commit is contained in:
GGJ
2025-04-17 16:26:09 +08:00
parent 021a1ae89b
commit c97efb5beb
13 changed files with 807 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/views/pqs/business/terminal/TerminalManagement/components/detail.vue Normal file
View File

@@ -0,0 +1,112 @@
<template>
<el-dialog draggable v-model="dialogVisible" v-if="dialogVisible" title="终端使用详情" width="70%">
<MyEchart :options="echartsXq" style="width: 100%; height: 300px" />
<vxe-table v-bind="defaultAttribute" height="400" :data="tableData">
<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>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue'
import {} from '@/api/device-boot/Business'
const echartsXq: any = ref([])
const dialogVisible = ref(false)
const tableData = ref([])
const open = (e: any) => {
console.log("🚀 ~ open ~ e:", e)
echartsXq.value = {
title: {
text: e.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]
]
}
]
}
}
dialogVisible.value = true
}
const cancel = () => {
dialogVisible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>

130
src/views/pqs/business/terminal/TerminalManagement/components/disposition.vue Normal file
View File

@@ -0,0 +1,130 @@
<template>
<!-- 网路参数 终端状态 基础流量 扩展流量 流量策略 策略类型 -->
<!-- 新增 -->
<el-dialog draggable :title="title" v-model="dialogVisible" width="50%" :before-close="cancel">
<el-form :inline="true" :model="formInline" style="display: flex; justify-content: space-between">
<el-form-item label="终端状态">
<el-select v-model="formInline.state" placeholder="Select" size="large" style="width: 240px">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-button type="primary" icon="el-icon-Check" @click="submit">设置提交</el-button>
</el-form>
<div :style="`height: calc(50vh)`">
<vxe-table
v-loading="loading"
height="auto"
auto-resize
ref="tableRef"
v-bind="defaultAttribute"
:data="treeData"
show-overflow
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
: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="ip" title="网络参数"></vxe-column>
<vxe-column field="runFlag" title="终端状态" v-if="key == 0">
<template #default="{ row }">
<el-tag v-if="row.runFlag === 0" type="success" size="small">投运</el-tag>
<el-tag v-if="row.runFlag === 1" type="warning" size="small">热备用</el-tag>
<el-tag v-if="row.runFlag === 2" type="danger" size="small">停运</el-tag>
</template>
</vxe-column>
<vxe-column field="baseFlowMeal" title="基础套餐(MB)" v-if="key == 1"></vxe-column>
<vxe-column field="reamFlowMeal" title="扩展套餐(MB)" v-if="key == 1"></vxe-column>
<vxe-column field="flowStrategy" title="流量策略" v-if="key == 2"></vxe-column>
<vxe-column field="strategyFlag" title="策略类型" v-if="key == 2">
<template #default="{ row }">
<el-tag v-if="row.level === 4" type="primary">
{{ row.strategyFlag === 0 ? '定制' : '默认' }}
</el-tag>
</template>
</vxe-column>
</vxe-table>
</div>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useDictData } from '@/stores/dictData'
import { ElMessage } from 'element-plus'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getStatusManageList, updateRunFlagManage } from '@/api/device-boot/Business'
const dictData = useDictData()
const dialogVisible = ref(false)
const emit = defineEmits(['onSubmit'])
const loading = ref(false)
const title = ref('')
const tableRef = ref()
const key = ref(0) //判断是什么配置
const treeData: any = ref([])
const treeDataCopy: any = ref([])
const formInline = reactive({
state: '0'
})
const ids = ref([])
const options = [
{ value: '0', label: '投运' },
{ value: '1', label: '热备用' },
{ value: '2', label: '停运' }
]
const open = (e: any) => {
ids.value = []
title.value = e.title
loading.value = true
key.value = e.key
ids.value = e.id
getStatusManageList(e.id).then(res => {
treeData.value = tree2List(res.data, Math.random() * 1000)
treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
setTimeout(() => {
tableRef.value.setAllTreeExpand(true)
}, 0)
loading.value = false
})
dialogVisible.value = true
}
// 提交配置
const submit = () => {
updateRunFlagManage({
ids: ids.value,
runFlag: formInline.state
}).then(res => {
ElMessage.success('设置成功')
emit('onSubmit')
dialogVisible.value = false
})
}
// 处理大数据卡顿
const tree2List = (list: any, id: any) => {
//存储结果的数组
let arr: any = []
// 遍历 tree 数组
list.forEach((item: any) => {
item.uPid = id
item.uId = Math.random() * 1000
// 判断item是否存在children
if (!item.children) return arr.push(item)
// 函数递归，对children数组进行tree2List的转换
const children = tree2List(item.children, item.uId)
// 删除item的children属性
delete item.children
// 把item和children数组添加至结果数组
//..children: 意思是把children数组展开
arr.push(item, ...children)
})
// 返回结果数组
return arr
}
const cancel = () => {
dialogVisible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>