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>