113 lines
4.1 KiB
Vue
113 lines
4.1 KiB
Vue
<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>
|