85 lines
2.4 KiB
Vue
85 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-row :gutter="5">
|
||
|
|
<el-col :span="12" v-for="chart in typeData" :key="chart.value">
|
||
|
|
<chart-box :params-data="chart" :item-data="dashboradData[chart.value]"></chart-box>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import chartBox from 'views/components/chartBox.vue'
|
||
|
|
export default {
|
||
|
|
components: { chartBox },
|
||
|
|
props: {
|
||
|
|
detailId: {
|
||
|
|
type: Number
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
typeData: [
|
||
|
|
{
|
||
|
|
title: '内存总量',
|
||
|
|
value: 'total',
|
||
|
|
expr: JSON.stringify(['round(node_memory_MemTotal_bytes{host_id="' + this.detailId + '"}/1024/1024/1024,0.01)']),
|
||
|
|
name: '["内存总量"]',
|
||
|
|
unit: 'GB'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '内存空闲量',
|
||
|
|
value: 'free',
|
||
|
|
expr: JSON.stringify(['round(node_memory_MemFree_bytes{host_id="' + this.detailId + '"}/1024/1024/1024,0.01)']),
|
||
|
|
name: '["内存空闲量"]',
|
||
|
|
unit: 'GB'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '内存使用量',
|
||
|
|
value: 'used',
|
||
|
|
expr: JSON.stringify([
|
||
|
|
'round((node_memory_MemTotal_bytes{host_id="' +
|
||
|
|
this.detailId +
|
||
|
|
'"} - ' +
|
||
|
|
'node_memory_MemFree_bytes{host_id="' +
|
||
|
|
this.detailId +
|
||
|
|
'"} - ' +
|
||
|
|
'(node_memory_Cached_bytes{host_id="' +
|
||
|
|
this.detailId +
|
||
|
|
'"} + ' +
|
||
|
|
'node_memory_Buffers_bytes{host_id="' +
|
||
|
|
this.detailId +
|
||
|
|
'"}))/1024/1024/1024,0.01)'
|
||
|
|
]),
|
||
|
|
name: '["内存使用量"]',
|
||
|
|
unit: 'GB'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '缓存内存使用量',
|
||
|
|
value: 'cached',
|
||
|
|
expr: JSON.stringify(['round((node_memory_Cached_bytes{host_id="' + this.detailId + '"} + ' + 'node_memory_Buffers_bytes{host_id="' + this.detailId + '"})/1024/1024/1024,0.01)']),
|
||
|
|
name: '["缓存内存使用量"]',
|
||
|
|
unit: 'GB'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
dashboradData: {
|
||
|
|
total: {},
|
||
|
|
free: {},
|
||
|
|
used: {},
|
||
|
|
cached: {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
beforeDestroy() {},
|
||
|
|
methods: {},
|
||
|
|
created() {
|
||
|
|
for (const key in this.dashboradData) {
|
||
|
|
const element = this.dashboradData[key]
|
||
|
|
this.$set(element, 'step', null)
|
||
|
|
this.$set(element, 'stepValue', 20)
|
||
|
|
this.$set(element, 'defindTime', [])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style></style>
|