zhouqunjie
/
JCC-RIP
forked from JointCloud/JCC-RIP
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/master'

This commit is contained in:
ann 2024-02-05 13:51:31 +08:00
parent 5ab97552da 9f608326ee
commit d8022f642f
10 changed files with 202 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 87 KiB

BIN
src/assets/images/menubg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 51 KiB

BIN
src/assets/images/pod/r-img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 184 KiB

BIN
src/assets/img/monitorSelect_bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 131 KiB

364
src/components/ClusterManagement/resourceUsage.vue
View File

@ -1,40 +1,12 @@
<template>
<div>
<div id="radarChart" ref="radarChart" />
<el-row v-if="clusterName === 'gpu-huawei'" :gutter="24">
<el-col :span="12">
<table class="info">
<div>GPU 利用率</div>
<tr>
<td rowspan="2">
<el-progress type="circle" color="#30C0B7" :percentage="15.43" :width="60" />
</td>
<td>1.234 Core</td>
<td>8 Core</td>
</tr>
<tr>
<td>已使用</td>
<td>总计</td>
</tr>
</table>
</el-col>
<el-col :span="12">
<table class="info">
<div>GPU内存利用率</div>
<tr>
<td rowspan="2">
<el-progress type="circle" color="#3182CE" :percentage="16.56" :width="60" />
</td>
<td>2.65 Gib</td>
<td>16 Gib</td>
</tr>
<tr>
<td>已使用</td>
<td>总计</td>
</tr>
</table>
</el-col>
</el-row>
<div class="resource-usage">
<!-- <div id="radarChart" ref="radarChart" /> -->
<div class="radarChart">
<div class="num_1">本地存储 36%</div>
<div class="num_2">容器组 36%</div>
<div class="num_3">CPU 36%</div>
<div class="num_4">内存 36%</div>
</div>
<el-row :gutter="24">
<el-col :span="12">
<table class="info">
@ -107,9 +79,9 @@
</template>
<script>
import { getClusterResource } from '@/api/container/overview'
import * as echarts from 'echarts'
import variables from '@/styles/variables.js'
// import { getClusterResource } from '@/api/container/overview'
// import * as echarts from 'echarts'
// import variables from '@/styles/variables.js'
export default {
name: 'ResourceUsage',
@ -131,67 +103,67 @@ export default {
}
},
created() {
return new Promise((resolve, reject) => {
const cpuData = []; const memoryData = []; const podData = []; const diskData = []
const cpuObj = {}; const memoryObj = {}; const podObj = {}; const diskObj = {}
getClusterResource({ clusterName: this.clusterName }).then(response => {
let clusterCPUUsage, clusterCPUTotal
let clusterMemoryUsage, clusterMemoryTotal
let clusterPodUsage, clusterPodTotal
let clusterDiskUsage, clusterDiskTotal
for (let l = 0; l < response['data'].length; l++) {
if (response['data'][l]['metric_name'] === 'cluster_cpu_usage') { clusterCPUUsage = parseFloat(response['data'][l]['data']['result'][0]['values'][0][1]).toFixed(2) }
if (response['data'][l]['metric_name'] === 'cluster_cpu_total') { clusterCPUTotal = parseFloat(response['data'][l]['data']['result'][0]['values'][0][1]) }
// return new Promise((resolve, reject) => {
// const cpuData = []; const memoryData = []; const podData = []; const diskData = []
// const cpuObj = {}; const memoryObj = {}; const podObj = {}; const diskObj = {}
// getClusterResource({ clusterName: this.clusterName }).then(response => {
// let clusterCPUUsage, clusterCPUTotal
// let clusterMemoryUsage, clusterMemoryTotal
// let clusterPodUsage, clusterPodTotal
// let clusterDiskUsage, clusterDiskTotal
// for (let l = 0; l < response['data'].length; l++) {
// if (response['data'][l]['metric_name'] === 'cluster_cpu_usage') { clusterCPUUsage = parseFloat(response['data'][l]['data']['result'][0]['values'][0][1]).toFixed(2) }
// if (response['data'][l]['metric_name'] === 'cluster_cpu_total') { clusterCPUTotal = parseFloat(response['data'][l]['data']['result'][0]['values'][0][1]) }
if (response['data'][l]['metric_name'] === 'cluster_memory_usage_wo_cache') { clusterMemoryUsage = (parseFloat(response['data'][l]['data']['result'][0]['values'][0][1]) / (1024 * 1024 * 1024)).toFixed(2) }
if (response['data'][l]['metric_name'] === 'cluster_memory_total') { clusterMemoryTotal = (parseFloat(response['data'][l]['data']['result'][0]['values'][0][1]) / (1024 * 1024 * 1024)).toFixed(2) }
// if (response['data'][l]['metric_name'] === 'cluster_memory_usage_wo_cache') { clusterMemoryUsage = (parseFloat(response['data'][l]['data']['result'][0]['values'][0][1]) / (1024 * 1024 * 1024)).toFixed(2) }
// if (response['data'][l]['metric_name'] === 'cluster_memory_total') { clusterMemoryTotal = (parseFloat(response['data'][l]['data']['result'][0]['values'][0][1]) / (1024 * 1024 * 1024)).toFixed(2) }
if (response['data'][l]['metric_name'] === 'cluster_pod_running_count') { clusterPodUsage = parseInt(response['data'][l]['data']['result'][0]['values'][0][1]) }
if (response['data'][l]['metric_name'] === 'cluster_pod_quota') { clusterPodTotal = parseInt(response['data'][l]['data']['result'][0]['values'][0][1]) }
// if (response['data'][l]['metric_name'] === 'cluster_pod_running_count') { clusterPodUsage = parseInt(response['data'][l]['data']['result'][0]['values'][0][1]) }
// if (response['data'][l]['metric_name'] === 'cluster_pod_quota') { clusterPodTotal = parseInt(response['data'][l]['data']['result'][0]['values'][0][1]) }
if (response['data'][l]['metric_name'] === 'cluster_disk_size_usage') { clusterDiskUsage = (parseFloat(response['data'][l]['data']['result'][0]['values'][0][1]) / (1000 * 1000 * 1000)).toFixed(2) }
if (response['data'][l]['metric_name'] === 'cluster_disk_size_capacity') { clusterDiskTotal = (parseFloat(response['data'][l]['data']['result'][0]['values'][0][1]) / (1000 * 1000 * 1000)).toFixed(2) }
}
// CPU
cpuObj.used = clusterCPUUsage + ' Core'
cpuObj.total = clusterCPUTotal + ' Core'
cpuObj.cpuPer = Math.round(clusterCPUUsage / clusterCPUTotal * 10000) / 100.00
cpuObj.cpu = (Math.round(clusterCPUUsage / clusterCPUTotal * 10000) / 100.00) + '%'
// if (response['data'][l]['metric_name'] === 'cluster_disk_size_usage') { clusterDiskUsage = (parseFloat(response['data'][l]['data']['result'][0]['values'][0][1]) / (1000 * 1000 * 1000)).toFixed(2) }
// if (response['data'][l]['metric_name'] === 'cluster_disk_size_capacity') { clusterDiskTotal = (parseFloat(response['data'][l]['data']['result'][0]['values'][0][1]) / (1000 * 1000 * 1000)).toFixed(2) }
// }
// // CPU
// cpuObj.used = clusterCPUUsage + ' Core'
// cpuObj.total = clusterCPUTotal + ' Core'
// cpuObj.cpuPer = Math.round(clusterCPUUsage / clusterCPUTotal * 10000) / 100.00
// cpuObj.cpu = (Math.round(clusterCPUUsage / clusterCPUTotal * 10000) / 100.00) + '%'
// 内存
memoryObj.used = clusterMemoryUsage + ' Gi'
memoryObj.total = clusterMemoryTotal + ' Gi'
memoryObj.memoryPer = Math.round(clusterMemoryUsage / clusterMemoryTotal * 10000) / 100.00
memoryObj.memory = (Math.round(clusterMemoryUsage / clusterMemoryTotal * 10000) / 100.00) + '%'
// // 内存
// memoryObj.used = clusterMemoryUsage + ' Gi'
// memoryObj.total = clusterMemoryTotal + ' Gi'
// memoryObj.memoryPer = Math.round(clusterMemoryUsage / clusterMemoryTotal * 10000) / 100.00
// memoryObj.memory = (Math.round(clusterMemoryUsage / clusterMemoryTotal * 10000) / 100.00) + '%'
// 容器节点
podObj.used = clusterPodUsage
podObj.total = clusterPodTotal
podObj.podPer = Math.round(clusterPodUsage / clusterPodTotal * 10000) / 100.00
podObj.pod = (Math.round(clusterPodUsage / clusterPodTotal * 10000) / 100.00) + '%'
// // 容器节点
// podObj.used = clusterPodUsage
// podObj.total = clusterPodTotal
// podObj.podPer = Math.round(clusterPodUsage / clusterPodTotal * 10000) / 100.00
// podObj.pod = (Math.round(clusterPodUsage / clusterPodTotal * 10000) / 100.00) + '%'
// 本地存储
diskObj.used = clusterDiskUsage + ' GB'
diskObj.total = clusterDiskTotal + ' GB'
diskObj.diskPer = Math.round(clusterDiskUsage / clusterDiskTotal * 10000) / 100.00
diskObj.disk = (Math.round(clusterDiskUsage / clusterDiskTotal * 10000) / 100.00) + '%'
// // 本地存储
// diskObj.used = clusterDiskUsage + ' GB'
// diskObj.total = clusterDiskTotal + ' GB'
// diskObj.diskPer = Math.round(clusterDiskUsage / clusterDiskTotal * 10000) / 100.00
// diskObj.disk = (Math.round(clusterDiskUsage / clusterDiskTotal * 10000) / 100.00) + '%'
cpuData[0] = cpuObj
memoryData[0] = memoryObj
podData[0] = podObj
diskData[0] = diskObj
// cpuData[0] = cpuObj
// memoryData[0] = memoryObj
// podData[0] = podObj
// diskData[0] = diskObj
this.cpuCard = cpuData
this.memoryCard = memoryData
this.podCard = podData
this.diskCard = diskData
// this.cpuCard = cpuData
// this.memoryCard = memoryData
// this.podCard = podData
// this.diskCard = diskData
const radarChart = echarts.init(this.$refs.radarChart)
radarChart.setOption(this.returnRadarChart([this.diskCard[0].diskPer, this.podCard[0].podPer, this.memoryCard[0].memoryPer, this.cpuCard[0].cpuPer]))
}).catch(error => {
console.log(error)
})
})
// const radarChart = echarts.init(this.$refs.radarChart)
// radarChart.setOption(this.returnRadarChart([this.diskCard[0].diskPer, this.podCard[0].podPer, this.memoryCard[0].memoryPer, this.cpuCard[0].cpuPer]))
// }).catch(error => {
// console.log(error)
// })
// })
},
mounted() {
// this.$nextTick(() => {
@ -201,96 +173,140 @@ export default {
// })
},
methods: {
returnRadarChart(data) {
return {
radar: {
shape: 'circle',
splitArea: {
show: true,
areaStyle: {
// color: ['#F4F7FE']
color: variables[this.jcceTheme].radarBgColor
// shadowColor: 'rgba(0, 0, 0, 0.2)',
// shadowBlur: 10
}
},
splitLine: {
show: this.jcceTheme === 'jcceLight',
lineStyle: {
width: 1,
color: ['#E8E9ED']
}
},
indicator: [
{ name: '本地存储', max: 100 },
{ name: '容器节点', max: 100 },
{ name: '内存', max: 100 },
{ name: 'cpu', max: 100 }
]
},
series: [{
type: 'radar',
data: [
{
value: data
}
],
itemStyle: {
color: ['red'],
opacity: 1
},
lineStyle: {
color: '#3182CE'
// color: new echarts.graphic.LinearGradient( // 设置渐变色
// 1, 0, 0, 0,
// [
// { offset: 0, color: 'rgba(241,163,86, 0.8)' },
// { offset: 1, color: 'rgba(0, 155, 171, 1)' }
// ]
// )
},
areaStyle: // 雷达图辐射区域的样式
{
color: '#3182CE'
// color: new echarts.graphic.LinearGradient(
// 0, 0, 0, 1,
// [
// { offset: 0, color: 'rgba(128,57,171, 0.5)' },
// { offset: 0.3, color: 'rgba(46, 101, 253, 0.7)' },
// { offset: 1, color: 'rgba(55, 193, 184, 0.8)' }
// ]
// )
}
}]
}
}
// returnRadarChart(data) {
// return {
// radar: {
// shape: 'circle',
// splitArea: {
// show: true,
// areaStyle: {
// // color: ['#F4F7FE']
// color: variables[this.jcceTheme].radarBgColor
// // shadowColor: 'rgba(0, 0, 0, 0.2)',
// // shadowBlur: 10
// }
// },
// splitLine: {
// show: this.jcceTheme === 'jcceLight',
// lineStyle: {
// width: 1,
// color: ['#E8E9ED']
// }
// },
// indicator: [
// { name: '本地存储', max: 100 },
// { name: '容器节点', max: 100 },
// { name: '内存', max: 100 },
// { name: 'cpu', max: 100 }
// ]
// },
// series: [{
// type: 'radar',
// data: [
// {
// value: data
// }
// ],
// itemStyle: {
// color: ['red'],
// opacity: 1
// },
// lineStyle: {
// color: '#3182CE'
// // color: new echarts.graphic.LinearGradient( // 设置渐变色
// // 1, 0, 0, 0,
// // [
// // { offset: 0, color: 'rgba(241,163,86, 0.8)' },
// // { offset: 1, color: 'rgba(0, 155, 171, 1)' }
// // ]
// // )
// },
// areaStyle: // 雷达图辐射区域的样式
// {
// color: '#3182CE'
// // color: new echarts.graphic.LinearGradient(
// // 0, 0, 0, 1,
// // [
// // { offset: 0, color: 'rgba(128,57,171, 0.5)' },
// // { offset: 0.3, color: 'rgba(46, 101, 253, 0.7)' },
// // { offset: 1, color: 'rgba(55, 193, 184, 0.8)' }
// // ]
// // )
// }
// }]
// }
// }
}
}
</script>
<style lang="scss" scoped>
#radarChart{
width: 100%;
height: 352px;
}
.info{
width: 100%;
background: var(--infoDivBgColor);
border-radius: 10px;
margin-top: 24px;
padding: 22px 24px 17px;
font-size: 14px;
color: var(--infoDivColor);
&>:first-child{
.resource-usage{
.radarChart{
width: 100%;
height: 352px;
position: relative;
background: url(../../assets/images/pod/r-img.png) center no-repeat;
background-size: auto 130% ;
.num_1, .num_2, .num_3, .num_4{
border: 1px solid #30bfb865;
background: linear-gradient(0deg, #2a529867 100%, #1E3C72 0%);
padding: 10px 20px;
min-width: 150px;
position: absolute;
text-align: center;
&::before, &::after{
content: '';
width: 20px;
height: 2px;
background-color: #30bfb8;
display: block;
position: absolute;
left: 0;
bottom: -1px;
}
&::after{
left: calc(100% - 20px);
top: -1px;
}
}
.num_1{
top: 0;
left: 50%;
}
.num_2{
top: 15%;
left: 0;
}
.num_3{
top: 20%;
right: 2%;
}
.num_4{
top: 50%;
left: 60%;
}
}
.info{
width: 100%;
background: var(--infoDivBgColor);
border-radius: 10px;
margin-top: 24px;
padding: 22px 24px 17px;
font-size: 14px;
color: var(--infoDivFirstColor);
margin-bottom: 10px;
}
tr td:last-child{
width: 30%;
}
tr:last-child{
color: var(--infoDivColor);
&>:first-child{
font-size: 14px;
color: var(--infoDivFirstColor);
margin-bottom: 10px;
}
tr td:last-child{
width: 30%;
}
tr:last-child{
color: var(--infoDivColor);
}
}
}
</style>

2
src/layout/components/Navbar.vue
View File

@ -9,7 +9,7 @@
<div class="right-menu">
<router-link class="selectBtn" to="/monitorSelectBk">
<svg-icon icon-class="ziyuanguanli" />
资源中心
云际全域资源态势感知
</router-link>
<!-- <el-dropdown class="right-menu-item hover-effect" trigger="click">
<div class="selectBtn avatar-wrapper">

2
src/styles/index.scss
View File

@ -32,7 +32,7 @@ html {
min-width: 1200px;
overflow: auto;
background-color: #050f27;
background-image: url('../assets//images/monitorSelect/top-bg.png');
background-image: url('../assets/images/monitorSelect/top-bg.png');
background-position: center top; /* 设置每张图片的位置 */
background-repeat: no-repeat; /* 设置每张图片的重复方式 */
background-size: 100% 91vh ; /* 设置每张图片的尺寸 */

2
src/styles/variables.scss
View File

@ -34,7 +34,7 @@ $menuBg-jcceDark:inherit;
// [-- 不同色系样式变量 style中使用 --]
// 浅色系
:root[jcceTheme='jcceLight']{
--bgStyle: #f4f7fe url(~@/assets/images/bg.png) no-repeat fixed top; // 背景样式
--bgStyle: #f4f7fe; // 背景样式
--bgSize: 100.1% 478px; // 背景尺寸
--bgColor: #333333; // body字体样式
--menuActiveText:#3182CE; // 菜单颜色

2
src/views/monitorSelect/index-bk.vue
View File

@ -25,7 +25,7 @@ export default {
id: 'yunsuan',
title: '云算',
icon: 'yunsuan',
path: '/cluster/clusterMapViews'
path: '/clusterSelect'
},
{
id: 'chaosuan',

16
src/views/overview/index.vue
View File

@ -16,14 +16,6 @@
<ComponentStatus />
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<div slot="header" class="clearfix">
<span>集群资源使用情况</span>
</div>
<ResourceUsage />
</el-card>
</el-col>
<el-col :span="12">
<el-col :span="24">
<el-card>
@ -42,6 +34,14 @@
</el-card>
</el-col>
</el-col>
<el-col :span="12">
<el-card>
<div slot="header" class="clearfix">
<span>集群资源使用情况</span>
</div>
<ResourceUsage />
</el-card>
</el-col>
</el-row>
</template>