forked from JointCloud/JCC-RIP
拓扑图接口替换、算力数据样式添加、节点页面bug解决
This commit is contained in:
parent
6c628bdd42
commit
6ca79e5b5e
|
|
@ -40,7 +40,7 @@ export function getNodeBriefMessage(params) {
|
|||
// 容器拓扑页面-异构资源厂商
|
||||
export function getClusterUserRate() {
|
||||
return request({
|
||||
url: '/jcc-extend/container/cluster/queryClusterUseRate',
|
||||
url: '/jcc-schedule/api/v1/domain/usedRate',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const getNodeStatusList = (clusterName, params) => {
|
|||
getNodeMetrics({ clusterName: params.clusterName }).then(response => {
|
||||
response.data.map((v) => {
|
||||
v?.data?.result?.map((s) => {
|
||||
if (getByValue(namespace, s.metric.node)) {
|
||||
if (namespace.includes(s.metric.node)) {
|
||||
list[getByValue(namespace, s.metric.node)][v.metric_name] = s.values[0][1]
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,260 @@
|
|||
<template>
|
||||
<div id="myBarEchart" ref="myBarEchart" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import variables from '@/styles/variables.js'
|
||||
import * as echarts from 'echarts'
|
||||
import { getTotalAverage } from '@/api/top-menu/TotalNum'
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const day = [[], [], [], [], [], [], []]
|
||||
for (let i = 0; i < 7; i++) {
|
||||
day[i][0] = moment().subtract(7 - i, 'days').endOf('day').unix()
|
||||
day[i][1] = moment().subtract(7 - i, 'days').endOf('day').format('MM月DD日')
|
||||
}
|
||||
return {
|
||||
day,
|
||||
ramLoad: [], // 内存整体负载
|
||||
cpuLoad: [], // CPU整体负载
|
||||
cpuAverage: [], // cpu 平均负载
|
||||
ramAverage: [] // 内存平均负载
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
jcceTheme() {
|
||||
return localStorage.getItem('jcceTheme')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getAllData()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 获取资源负载状况
|
||||
async getAllData() {
|
||||
await getTotalAverage().then(res => {
|
||||
const data = res.data
|
||||
// 内存整体负载 （GB）
|
||||
const ramData = data.find(item => item.metric_name === 'mem_total_usage').data.result[0].values || []
|
||||
ramData.forEach(element => {
|
||||
this.ramLoad.push(((element[1] - 0) / 1024 / 1024 / 1024).toFixed(2))
|
||||
// this.date.push(moment(element[0] * 1000).format('MM/DD'))
|
||||
})
|
||||
// CPU整体负载 （Core）
|
||||
const cpuLoad = data.find(item => item.metric_name === 'cpu_total_usage').data.result[0].values || []
|
||||
cpuLoad.forEach(element => {
|
||||
this.cpuLoad.push(((element[1] - 0)).toFixed(2))
|
||||
})
|
||||
// cpu 平均负载 (%)
|
||||
const cpuData = data.find(item => item.metric_name === 'cpu_avg_usage').data.result[0].values || []
|
||||
cpuData.forEach(element => {
|
||||
this.cpuAverage.push((element[1] - 0).toFixed(2))
|
||||
// this.date.push(moment(element[0] * 1000).format('MM/DD'))
|
||||
})
|
||||
// 内存平均负载 (%)
|
||||
const ramAverage = data.find(item => item.metric_name === 'mem_avg_usage').data.result[0].values || []
|
||||
ramAverage.forEach(element => {
|
||||
this.ramAverage.push(((element[1] - 0) / 1024 / 1024 / 1024).toFixed(2))
|
||||
})
|
||||
})
|
||||
this.initCharts()
|
||||
},
|
||||
// 资源负载状况echart图表
|
||||
initCharts() {
|
||||
const chart = echarts.init(this.$refs.myBarEchart)
|
||||
// 把配置和数据放这里
|
||||
// const legend = ['CPU整体负载', '内存整体负载', 'CPU平均负载', '内存平均负载']
|
||||
const legend = ['CPU整体负载', '内存整体负载', 'CPU平均负载']
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: legend,
|
||||
bottom: 0,
|
||||
selectedMode: false, // 是否允许点击
|
||||
textStyle: {
|
||||
color: variables[this.jcceTheme].resourceColor1,
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#283b56'
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.day.map(n => n[1]),
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#999999'
|
||||
},
|
||||
interval: 0,
|
||||
rotate: -10,
|
||||
padding: [0, 0, 0, -20],
|
||||
margin: 14
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.1)'
|
||||
}},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
position: 'left',
|
||||
alignTicks: true
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
position: 'right',
|
||||
alignTicks: true,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.1)'
|
||||
}},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
color: '#3282CE',
|
||||
series: [
|
||||
{
|
||||
name: legend[0],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [15, 7],
|
||||
symbolOffset: [-9, -5],
|
||||
symbolPosition: 'end',
|
||||
yAxisIndex: 1,
|
||||
z: 12,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
color: '#30C0B7',
|
||||
data: this.cpuLoad
|
||||
},
|
||||
{
|
||||
name: legend[0],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [15, 6],
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
symbolOffset: [-9, 5],
|
||||
z: 12,
|
||||
color: 'rgba(48, 191, 183, 0.25)',
|
||||
data: this.cpuLoad
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: legend[0],
|
||||
barWidth: '15',
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#30C0B7' }, { offset: 1, color: 'rgba(48, 191, 183, 0.25)' }])
|
||||
}
|
||||
},
|
||||
data: this.cpuLoad
|
||||
},
|
||||
{
|
||||
name: legend[1],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [15, 10],
|
||||
yAxisIndex: 1,
|
||||
symbolOffset: [9, -5],
|
||||
symbolPosition: 'end',
|
||||
z: 12,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
color: '#3182CE',
|
||||
data: this.ramLoad
|
||||
},
|
||||
{
|
||||
name: legend[1],
|
||||
yAxisIndex: 1,
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [15, 7],
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
symbolOffset: [9, 6],
|
||||
z: 12,
|
||||
color: 'rgba(49, 130, 206, 0.35)',
|
||||
data: this.ramLoad
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: legend[1],
|
||||
barWidth: '15',
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#3182CE' }, { offset: 1, color: 'rgba(49, 130, 206, 0.35)' }])
|
||||
}
|
||||
},
|
||||
data: this.ramLoad
|
||||
},
|
||||
{
|
||||
name: legend[2],
|
||||
data: this.cpuAverage,
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
color: '#27C391',
|
||||
width: 1,
|
||||
type: 'dashed'
|
||||
},
|
||||
smooth: true
|
||||
}
|
||||
// {
|
||||
// name: legend[3],
|
||||
// data: this.ramAverage,
|
||||
// yAxisIndex: 0,
|
||||
// type: 'line',
|
||||
// showSymbol: false,
|
||||
// lineStyle: {
|
||||
// color: '#3282CE',
|
||||
// width: 1,
|
||||
// type: 'dashed'
|
||||
// },
|
||||
// smooth: true
|
||||
// }
|
||||
]
|
||||
})
|
||||
window.addEventListener('resize', function() {
|
||||
chart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#myBarEchart{
|
||||
width: 100%;
|
||||
height: 332px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<template>
|
||||
<div id="pieChart" ref="pieChart" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import variables from '@/styles/variables.js'
|
||||
import { getClusterUserRate } from '@/api/container/overview'
|
||||
export default {
|
||||
computed: {
|
||||
jcceTheme() {
|
||||
return localStorage.getItem('jcceTheme')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getClusterData()
|
||||
},
|
||||
methods: {
|
||||
// 获取异构资源厂商
|
||||
getClusterData() {
|
||||
getClusterUserRate().then(e => {
|
||||
const data = JSON.parse(JSON.stringify(e.data).replace(/domainName/g, 'name').replace(/rate/g, 'value'))
|
||||
let clusterNum = 0
|
||||
e.data.forEach(n => {
|
||||
clusterNum = clusterNum + n.clusterCount
|
||||
})
|
||||
// 异构资源厂商
|
||||
const bottomChart = echarts.init(this.$refs.pieChart)
|
||||
const bottomOption = {
|
||||
color: [
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#25C390' }, { offset: 1, color: '#FFFFFF' }]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#366FF1' }, { offset: 1, color: '#FFFFFF' }]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00A8FF' }, { offset: 1, color: '#FFFFFF' }]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#DC3427' }, { offset: 1, color: '#FFFFFF' }]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FFFFFF' }, { offset: 1, color: '#3DB7CE' }]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FFFFFF' }, { offset: 1, color: '#FF6A00' }])
|
||||
].reverse(),
|
||||
title: {
|
||||
text: clusterNum,
|
||||
subtext: '主控集群',
|
||||
x: 'center',
|
||||
y: '38%',
|
||||
subtextStyle: {
|
||||
fontSize: 17,
|
||||
color: variables[this.jcceTheme].userRateColor4
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 44,
|
||||
fontFamily: 'Impact',
|
||||
fontWeight: 400,
|
||||
color: variables[this.jcceTheme].userRateColor1
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} ({d}%)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '半径模式',
|
||||
type: 'pie',
|
||||
radius: ['60%', '75%'],
|
||||
center: ['50%', '50%'],
|
||||
minShowLabelAngle: 10,
|
||||
label: {
|
||||
show: true,
|
||||
normal: {
|
||||
position: 'outside',
|
||||
fontSize: 12,
|
||||
color: variables[this.jcceTheme].userRateColor2,
|
||||
formatter: params => {
|
||||
return `${params.name} \n ${(params.value * 100).toFixed(2)}%`
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: { normal: {
|
||||
borderColor: variables[this.jcceTheme].userRateColor3,
|
||||
borderWidth: 10
|
||||
}},
|
||||
labelLine: {
|
||||
length: 15,
|
||||
length2: 15,
|
||||
lineStyle: {
|
||||
color: '#33A0FF',
|
||||
cap: 'round'
|
||||
}
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
bottomChart.setOption(bottomOption)
|
||||
window.addEventListener('resize', function() {
|
||||
bottomChart.resize()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#pieChart{
|
||||
width: 100%;
|
||||
height: 332px;
|
||||
}
|
||||
#pieChart{
|
||||
background-image: url('../../../assets/images/clusterMap.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: auto 55%
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -25,7 +25,14 @@
|
|||
<Earth ref="earthChart" :map-type="mapType" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<Exhibition :data="exhibitionArray" :span="8" class="exhibition" />
|
||||
<el-carousel height="120px" direction="vertical" :autoplay="true">
|
||||
<el-carousel-item>
|
||||
<Exhibition :data="exhibitionArray1" :span="8" class="exhibition" />
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<Exhibition :data="exhibitionArray2" :span="8" class="exhibition" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
|
|
@ -34,10 +41,9 @@
|
|||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>异构资源厂商</span>
|
||||
|
||||
<el-button style="float: right; padding: 3px 0" type="text" @click="toSelect">更多</el-button>
|
||||
</div>
|
||||
<div id="pieChart" ref="pieChart" />
|
||||
<PieChart />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
|
|
@ -45,7 +51,7 @@
|
|||
<div slot="header" class="clearfix">
|
||||
<span>资源负载状况</span>
|
||||
</div>
|
||||
<div id="myBarEchart" ref="myBarEchart" />
|
||||
<BarChart />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -56,37 +62,22 @@
|
|||
|
||||
<script>
|
||||
import Earth from './components/Earth'
|
||||
import PieChart from './components/PieChart'
|
||||
import BarChart from './components/BarChart'
|
||||
import Exhibition from '@/components/Exhibition'
|
||||
import Navbar from '@/layout/components/Navbar'
|
||||
import List from '@/components/list'
|
||||
import * as echarts from 'echarts'
|
||||
import { getClusterUserRate } from '@/api/container/overview'
|
||||
import { getTotalAverage } from '@/api/top-menu/TotalNum'
|
||||
import { getProjectNamespaceList, getMapDomainList, getNamespaceDescribe, getResourceCount } from '@/api/dispatching-center/dispatchingCenter'
|
||||
import moment from 'moment'
|
||||
import variables from '@/styles/variables.js'
|
||||
|
||||
export default {
|
||||
components: { List, Earth, Exhibition, Navbar },
|
||||
components: { List, Earth, Exhibition, Navbar, BarChart, PieChart },
|
||||
data() {
|
||||
const day = [[], [], [], [], [], [], []]
|
||||
for (let i = 0; i < 7; i++) {
|
||||
day[i][0] = moment().subtract(7 - i, 'days').endOf('day').unix()
|
||||
day[i][1] = moment().subtract(7 - i, 'days').endOf('day').format('MM月DD日')
|
||||
}
|
||||
return {
|
||||
day,
|
||||
mapType: 'china',
|
||||
data2: [65, 45, 34, 76, 97, 43, 87],
|
||||
filterMap: {
|
||||
namespace: {
|
||||
label: '名称'
|
||||
}
|
||||
},
|
||||
height: '600',
|
||||
loading: false,
|
||||
tableListData: [],
|
||||
exhibitionArray: [
|
||||
exhibitionArray1: [
|
||||
{
|
||||
name: '纳管资源域',
|
||||
src: 'dataIcon-1',
|
||||
|
|
@ -103,15 +94,28 @@ export default {
|
|||
value: '-'
|
||||
}
|
||||
],
|
||||
exhibitionArray2: [
|
||||
{
|
||||
name: '纳管算力总计',
|
||||
src: 'dataIcon-3',
|
||||
value: '-'
|
||||
},
|
||||
{
|
||||
name: '峰值算力',
|
||||
src: 'dataIcon-3',
|
||||
value: '-'
|
||||
},
|
||||
{
|
||||
name: '当前运行算力',
|
||||
src: 'dataIcon-3',
|
||||
value: '-'
|
||||
}
|
||||
],
|
||||
columns: [
|
||||
{ prop: 'ns_name', width: 100, label: '项目名称', formatter: (row) => { return (row.state === 'Active' ? <div><span class='round ' />{row.ns_name}</div> : <div><span class='round error' />{row.ns_name}</div>) } },
|
||||
{ prop: 'available_pod_num', width: 80, label: 'Pods', formatter: (row) => { return <span class='box'>{row.available_pod_num}</span> } },
|
||||
{ prop: 'cross_domain', label: '任务类型', formatter: (row) => { return row.cross_domain ? '广域任务' : '单域任务' } }
|
||||
],
|
||||
ramLoad: [], // 内存整体负载
|
||||
cpuLoad: [], // CPU整体负载
|
||||
cpuAverage: [], // cpu 平均负载
|
||||
ramAverage: [], // 内存平均负载
|
||||
intervalMap: null
|
||||
}
|
||||
},
|
||||
|
|
@ -133,8 +137,6 @@ export default {
|
|||
mounted() {
|
||||
this.getMapData()
|
||||
this.getTableList()
|
||||
this.getAllData()
|
||||
this.getClusterData()
|
||||
this.getResourceData()
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -214,9 +216,9 @@ export default {
|
|||
},
|
||||
getResourceData() {
|
||||
getResourceCount().then(e => {
|
||||
this.exhibitionArray[0].value = e.data?.domain || '-'
|
||||
this.exhibitionArray[1].value = e.data?.cluster || '-'
|
||||
this.exhibitionArray[2].value = e.data?.pod || '-'
|
||||
this.exhibitionArray1[0].value = e.data?.domain || '-'
|
||||
this.exhibitionArray1[1].value = e.data?.cluster || '-'
|
||||
this.exhibitionArray1[2].value = e.data?.pod || '-'
|
||||
})
|
||||
},
|
||||
// 获取地图的全量数据
|
||||
|
|
@ -231,303 +233,8 @@ export default {
|
|||
// 设置图表
|
||||
this.$refs.earthChart.resetChart()
|
||||
})
|
||||
},
|
||||
// 获取异构资源厂商
|
||||
getClusterData() {
|
||||
getClusterUserRate().then(e => {
|
||||
const data = JSON.parse(JSON.stringify(e.data.ClusterRateVoList).replace(/regionName/g, 'name').replace(/clusterUseRate/g, 'value'))
|
||||
// 异构资源厂商
|
||||
const bottomChart = echarts.init(this.$refs.pieChart)
|
||||
const bottomOption = {
|
||||
color: [
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#25C390' }, { offset: 1, color: '#FFFFFF' }]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#366FF1' }, { offset: 1, color: '#FFFFFF' }]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00A8FF' }, { offset: 1, color: '#FFFFFF' }]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#DC3427' }, { offset: 1, color: '#FFFFFF' }]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FFFFFF' }, { offset: 1, color: '#3DB7CE' }]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FFFFFF' }, { offset: 1, color: '#FF6A00' }])
|
||||
].reverse(),
|
||||
title: {
|
||||
text: e.data.ClusterNum,
|
||||
subtext: '主控集群',
|
||||
x: 'center',
|
||||
y: '38%',
|
||||
subtextStyle: {
|
||||
fontSize: 17,
|
||||
color: variables[this.jcceTheme].userRateColor4
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 44,
|
||||
fontFamily: 'Impact',
|
||||
fontWeight: 400,
|
||||
color: variables[this.jcceTheme].userRateColor1
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} ({d}%)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '半径模式',
|
||||
type: 'pie',
|
||||
radius: ['60%', '75%'],
|
||||
center: ['50%', '50%'],
|
||||
minShowLabelAngle: 10,
|
||||
label: {
|
||||
show: true,
|
||||
normal: {
|
||||
position: 'outside',
|
||||
fontSize: 12,
|
||||
color: variables[this.jcceTheme].userRateColor2,
|
||||
formatter: params => {
|
||||
return `${params.name} \n ${(params.value * 100).toFixed(2)}%`
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: { normal: {
|
||||
borderColor: variables[this.jcceTheme].userRateColor3,
|
||||
borderWidth: 10
|
||||
}},
|
||||
labelLine: {
|
||||
length: 15,
|
||||
length2: 15,
|
||||
lineStyle: {
|
||||
color: '#33A0FF',
|
||||
cap: 'round'
|
||||
}
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
bottomChart.setOption(bottomOption)
|
||||
window.addEventListener('resize', function() {
|
||||
bottomChart.resize()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取资源负载状况
|
||||
async getAllData() {
|
||||
await getTotalAverage().then(res => {
|
||||
const data = res.data
|
||||
// 内存整体负载 （GB）
|
||||
const ramData = data.find(item => item.metric_name === 'mem_total_usage').data.result[0].values || []
|
||||
ramData.forEach(element => {
|
||||
this.ramLoad.push(((element[1] - 0) / 1024 / 1024 / 1024).toFixed(2))
|
||||
// this.date.push(moment(element[0] * 1000).format('MM/DD'))
|
||||
})
|
||||
// CPU整体负载 （Core）
|
||||
const cpuLoad = data.find(item => item.metric_name === 'cpu_total_usage').data.result[0].values || []
|
||||
cpuLoad.forEach(element => {
|
||||
this.cpuLoad.push(((element[1] - 0)).toFixed(2))
|
||||
})
|
||||
})
|
||||
|
||||
await getTotalAverage().then(res => {
|
||||
const data = res.data
|
||||
// cpu 平均负载 (%)
|
||||
const cpuData = data.find(item => item.metric_name === 'cpu_avg_usage').data.result[0].values || []
|
||||
cpuData.forEach(element => {
|
||||
this.cpuAverage.push((element[1] - 0).toFixed(2))
|
||||
// this.date.push(moment(element[0] * 1000).format('MM/DD'))
|
||||
})
|
||||
// 内存平均负载 (%)
|
||||
const ramData = data.find(item => item.metric_name === 'mem_avg_usage').data.result[0].values || []
|
||||
ramData.forEach(element => {
|
||||
this.ramAverage.push(((element[1] - 0) / 1024 / 1024 / 1024).toFixed(2))
|
||||
})
|
||||
})
|
||||
this.initCharts()
|
||||
},
|
||||
// 资源负载状况echart图表
|
||||
initCharts() {
|
||||
const chart = echarts.init(this.$refs.myBarEchart)
|
||||
// 把配置和数据放这里
|
||||
// const legend = ['CPU整体负载', '内存整体负载', 'CPU平均负载', '内存平均负载']
|
||||
const legend = ['CPU整体负载', '内存整体负载', 'CPU平均负载']
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: legend,
|
||||
bottom: 0,
|
||||
selectedMode: false, // 是否允许点击
|
||||
textStyle: {
|
||||
color: variables[this.jcceTheme].resourceColor1,
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#283b56'
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.day.map(n => n[1]),
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#999999'
|
||||
},
|
||||
interval: 0,
|
||||
rotate: -10,
|
||||
padding: [0, 0, 0, -20],
|
||||
margin: 14
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.1)'
|
||||
}},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
position: 'left',
|
||||
alignTicks: true
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
position: 'right',
|
||||
alignTicks: true,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.1)'
|
||||
}},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
color: '#3282CE',
|
||||
series: [
|
||||
{
|
||||
name: legend[0],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [15, 7],
|
||||
symbolOffset: [-9, -5],
|
||||
symbolPosition: 'end',
|
||||
yAxisIndex: 1,
|
||||
z: 12,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
color: '#30C0B7',
|
||||
data: this.cpuLoad
|
||||
},
|
||||
{
|
||||
name: legend[0],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [15, 6],
|
||||
yAxisIndex: 1,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
symbolOffset: [-9, 5],
|
||||
z: 12,
|
||||
color: 'rgba(48, 191, 183, 0.25)',
|
||||
data: this.cpuLoad
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: legend[0],
|
||||
barWidth: '15',
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#30C0B7' }, { offset: 1, color: 'rgba(48, 191, 183, 0.25)' }])
|
||||
}
|
||||
},
|
||||
data: this.cpuLoad
|
||||
},
|
||||
{
|
||||
name: legend[1],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [15, 10],
|
||||
yAxisIndex: 1,
|
||||
symbolOffset: [9, -5],
|
||||
symbolPosition: 'end',
|
||||
z: 12,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
color: '#3182CE',
|
||||
data: this.ramLoad
|
||||
},
|
||||
{
|
||||
name: legend[1],
|
||||
yAxisIndex: 1,
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [15, 7],
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
symbolOffset: [9, 6],
|
||||
z: 12,
|
||||
color: 'rgba(49, 130, 206, 0.35)',
|
||||
data: this.ramLoad
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: legend[1],
|
||||
barWidth: '15',
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#3182CE' }, { offset: 1, color: 'rgba(49, 130, 206, 0.35)' }])
|
||||
}
|
||||
},
|
||||
data: this.ramLoad
|
||||
},
|
||||
{
|
||||
name: legend[2],
|
||||
data: this.cpuAverage,
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
color: '#27C391',
|
||||
width: 1,
|
||||
type: 'dashed'
|
||||
},
|
||||
smooth: true
|
||||
}
|
||||
// {
|
||||
// name: legend[3],
|
||||
// data: this.ramAverage,
|
||||
// yAxisIndex: 0,
|
||||
// type: 'line',
|
||||
// showSymbol: false,
|
||||
// lineStyle: {
|
||||
// color: '#3282CE',
|
||||
// width: 1,
|
||||
// type: 'dashed'
|
||||
// },
|
||||
// smooth: true
|
||||
// }
|
||||
]
|
||||
})
|
||||
window.addEventListener('resize', function() {
|
||||
chart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -545,17 +252,7 @@ export default {
|
|||
text-align: right;
|
||||
margin: 20px 0 10px
|
||||
}
|
||||
#myBarEchart, #pieChart{
|
||||
width: 100%;
|
||||
height: 332px;
|
||||
}
|
||||
#pieChart{
|
||||
background-image: url('../../assets/images/clusterMap.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: auto 55%
|
||||
|
||||
}
|
||||
.exhibition{
|
||||
margin: 30px 10% ;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue