127 lines
4.6 KiB
Vue
127 lines
4.6 KiB
Vue
<template>
|
|
<div style="padding: 8px 20px 20px;">
|
|
<el-collapse v-model="activeNames">
|
|
<el-collapse-item v-for="(val,index) of linuxSystem" :title="val.title" :name="index">
|
|
<div class="mt10 w100">
|
|
<!-- <Form :formList="val.formList" :ruleFormData="val.formModel" :config="val.config" @fnClick="callback"></Form>-->
|
|
<div class="w100 plr-20" style="font-size: 14px">
|
|
<div v-for="item of val.formList" class="w50 disInlineBlock p10">
|
|
<span class="w50 disInlineBlock">{{item.name}}</span><span class="w50">{{item.value}}</span>
|
|
</div>
|
|
</div>
|
|
<div v-for="item of val.echartList" 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>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import EchartsLine from "@/components/echartsList/line.vue";
|
|
export default {
|
|
name: 'ResMonitorDigitalAutoFind',
|
|
components: {EchartsLine},
|
|
data() {
|
|
return {
|
|
activeNames: [0, 1],
|
|
linuxSystem: [],
|
|
}
|
|
},
|
|
created() {
|
|
// this.$nextTick(() => {
|
|
this.secondList();
|
|
// });
|
|
},
|
|
methods: {
|
|
// 第二节点 自动发现项
|
|
secondList(){
|
|
this.linuxSystem = [{
|
|
title: '网络端口GE1/0/1',
|
|
formList: [
|
|
{name: '端口名称', value: 'aaa'},
|
|
{name: '端口类型', value: 'aaa'},
|
|
{name: '端口状态', value: 'aaa'},
|
|
{name: '端口适配速率(Mbps)', value: 'aaa'},
|
|
],
|
|
formModel: {},
|
|
config: {labelWidth: '160px', buttonGroup: []},
|
|
echartList: [{
|
|
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]
|
|
}]
|
|
}
|
|
}]
|
|
},{
|
|
title: '光模块sabc',
|
|
formList: [{name: '光模块端口名称', value: 'aaa'}],
|
|
formModel: {},
|
|
config: {buttonGroup: []},
|
|
echartList: [{
|
|
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]
|
|
}]
|
|
}
|
|
}]
|
|
}];
|
|
},
|
|
chartDataEvent(val, itemVal) {
|
|
console.log('val===',val);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
::v-deep .el-collapse-item__header {
|
|
background-color: #d4e3fc!important;
|
|
/*color: #fff!important;*/
|
|
padding-left: 20px;
|
|
font-size: 1rem;
|
|
}
|
|
</style>
|