92 lines
3.4 KiB
Vue
92 lines
3.4 KiB
Vue
<template>
|
|
<div style="padding: 8px 20px 20px;">
|
|
<div class="w100 plr-20" style="font-size: 14px">
|
|
<div v-for="item of formListTow" class="w50 disInlineBlock p10">
|
|
<span class="w50 disInlineBlock">{{item.name}}</span><span class="w50">{{item.value}}</span>
|
|
</div>
|
|
</div>
|
|
<div v-for="item of resultData" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
|
|
<EchartsLine class="w100 h100" :sideIcon="{iconName: [{name: '添加到首页',type: 'add'}]}" :lineData="item.dataVal" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item)"></EchartsLine>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import EchartsLine from "@/components/echartsList/line.vue";
|
|
export default {
|
|
name: 'ResMonitorDigitalSuper',
|
|
components: {EchartsLine},
|
|
data() {
|
|
return {
|
|
formListTow: [],
|
|
paramsData: {},
|
|
resultData: [{
|
|
title: '设备CPU使用率(%)',
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
gridTop: '35%',
|
|
legend: {top: '15%', left: '10%'},
|
|
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
|
|
dataList: [{
|
|
name: '设备CPU使用率',
|
|
data: [120, 132, 101, 134, 90, 230, 210],
|
|
}]
|
|
}
|
|
},{
|
|
title: '设备内存使用率(%)',
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
gridTop: '35%',
|
|
legend: {top: '15%', left: '10%'},
|
|
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
|
|
dataList: [{
|
|
name: '设备内存使用率',
|
|
data: [120, 132, 101, 134, 90, 230, 210],
|
|
},{
|
|
name: 'CPU运行用户进程所花费的时间',
|
|
data: [220, 182, 191, 234, 290, 330, 310]
|
|
}]
|
|
}
|
|
}],
|
|
}
|
|
},
|
|
created() {
|
|
// this.paramsData = this.$route && this.$route.query;
|
|
this.fnFormList('1');
|
|
// this.switchList();
|
|
},
|
|
methods: {
|
|
// formList集合
|
|
fnFormList(num) {
|
|
let formFirst = [
|
|
{name: '系统描述', value: 'aaa'},
|
|
{name: '系统位置', value: 'aaa'},
|
|
{name: '系统Object ID', value: 'aaa'},
|
|
{name: '系统MAC地址', value: 'aaa'},
|
|
{name: '系统运行时间', value: 'aaa'},
|
|
{name: '设备名称', value: 'aaa'},
|
|
{name: '系统联系信息', value: 'aaa'},
|
|
{name: '设备软件版本', value: 'aaa'},
|
|
{name: '系统名称', value: 'aaa'},
|
|
];
|
|
let formSecond = [
|
|
{name: '总内存', value: 'aaa'},
|
|
{name: '操作系统', value: 'aaa'},
|
|
{name: '操作系统架构', value: 'aaa'},
|
|
{name: '最大进程数', value: 'aaa'},
|
|
{name: '硬盘总可用空间', value: 'aaa'},
|
|
{name: '系统启动时间', value: 'aaa'},
|
|
{name: '系统描述', value: 'aaa'},
|
|
{name: '系统正常运行时间', value: 'aaa'},
|
|
{name: '系统本地时间', value: 'aaa'},
|
|
{name: 'CPU数量', value: 'aaa'},
|
|
];
|
|
this.formListTow = num && num === '1' ? formFirst : formSecond;
|
|
},
|
|
chartDataEvent(val, itemVal) {
|
|
console.log('val===1111',val);
|
|
}
|
|
}
|
|
}
|
|
</script>
|