forked from JointCloud/JCC-RIP
超算页面
This commit is contained in:
parent
cf163bda23
commit
ea10097685
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="hpc-overview">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
|
|
@ -13,20 +13,19 @@
|
|||
<div slot="header" class="clearfix">
|
||||
<span>超算域</span>
|
||||
</div>
|
||||
<el-row gutter="24">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<List
|
||||
ref="multipleTable"
|
||||
class="multipleTable"
|
||||
:columns="columns1"
|
||||
:query="{'clusterName': clusterName, 'pageNum':1, 'pageSize':999 }"
|
||||
height="200"
|
||||
:get-list-action="getServiceList"
|
||||
:table-list-data="listData"
|
||||
:pagination="false"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<NodeMessageBar />
|
||||
<div id="barChart" ref="barChart" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
|
@ -42,9 +41,8 @@
|
|||
ref="multipleTable"
|
||||
class="multipleTable"
|
||||
:columns="columns2"
|
||||
:query="{'clusterName': clusterName, 'pageNum':1, 'pageSize':999 }"
|
||||
height="315"
|
||||
:get-list-action="getServiceList"
|
||||
:table-list-data="listData"
|
||||
:pagination="false"
|
||||
/>
|
||||
</el-card>
|
||||
|
|
@ -57,9 +55,9 @@
|
|||
</div>
|
||||
<el-row class="resource">
|
||||
<el-col :span="12">
|
||||
<div>CPU <span>0</span> 核</div>
|
||||
<div>CPU <span class="impact num">0</span> 核</div>
|
||||
<div class="money">
|
||||
<el-row>
|
||||
<el-row class="impact">
|
||||
<el-col :span="12">0%</el-col>
|
||||
<el-col :span="12">0%</el-col>
|
||||
</el-row>
|
||||
|
|
@ -72,9 +70,9 @@
|
|||
<span class="tips">过去24小时利用率</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div>GPU <span>0</span> 卡</div>
|
||||
<div>GPU <span class="impact num">0</span> 卡</div>
|
||||
<div class="money money1">
|
||||
<el-row>
|
||||
<el-row class="impact">
|
||||
<el-col :span="12">0%</el-col>
|
||||
<el-col :span="12">0%</el-col>
|
||||
</el-row>
|
||||
|
|
@ -87,7 +85,6 @@
|
|||
<span class="tips">过去24小时利用率</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-col>
|
||||
|
|
@ -97,19 +94,22 @@
|
|||
|
||||
<script>
|
||||
import List from '@/components/list'
|
||||
import NodeMessageBar from '@/components/ClusterManagement/nodeMessageBar'
|
||||
import Exhibition from '@/components/Exhibition'
|
||||
import { getServiceList } from '@/api/container/serviceManagement'
|
||||
import * as echarts from 'echarts'
|
||||
import variables from '@/styles/variables.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Exhibition,
|
||||
List,
|
||||
NodeMessageBar
|
||||
List
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
getServiceList,
|
||||
data: [21, 44, 55, 77, 22, 32],
|
||||
data2: [22, 33, 22, 11, 44, 77],
|
||||
data3: [11, 22, 55, 44, 66, 33],
|
||||
xAxis: [],
|
||||
listData: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
|
||||
exhibitionArray: [
|
||||
{ name: '高性能计算域合计', src: 'hpc-1', value: '0' },
|
||||
{ name: '运行作业数量', src: 'blockChainBrowser-1', value: '0' },
|
||||
|
|
@ -117,10 +117,10 @@ export default {
|
|||
{ name: '连接调用接口数量', src: 'blockChainBrowser-5', value: '0' }
|
||||
],
|
||||
columns1: [
|
||||
{ prop: 'name', label: '名称', formatter: (row) => { return <a onClick={() => this.viewDetail(row)}>{row.metadata.name}</a> } },
|
||||
{ prop: 'project', label: '项目', formatter: (row) => row.metadata.namespace },
|
||||
{ prop: 'type', label: '服务类型', formatter: (row) => '自定义创建' },
|
||||
{ prop: 'internetAccess', label: '外网访问', formatter: (row) => '-' }
|
||||
{ prop: 'name', label: '超算域', formatter: (row) => { return <a onClick={() => this.viewDetail(row)}>{row.metadata.name}</a> } },
|
||||
{ prop: 'project', label: '运行作业', formatter: (row) => row.metadata.namespace },
|
||||
{ prop: 'type', label: '调用异构技术栈', formatter: (row) => '自定义创建' },
|
||||
{ prop: 'internetAccess', label: '调用接口数量', formatter: (row) => '-' }
|
||||
],
|
||||
columns2: [
|
||||
{ prop: 'name', label: '名称', formatter: (row) => { return <a onClick={() => this.viewDetail(row)}>{row.metadata.name}</a> } },
|
||||
|
|
@ -133,41 +133,297 @@ export default {
|
|||
computed: {
|
||||
clusterName() {
|
||||
return localStorage.getItem('clusterName')
|
||||
},
|
||||
jcceTheme() {
|
||||
return localStorage.getItem('jcceTheme')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
return new Promise(() => {
|
||||
this.drawChart()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
drawChart() {
|
||||
const axisLabel = {
|
||||
textStyle: {
|
||||
color: variables[this.jcceTheme].barColor,
|
||||
fontSize: 12
|
||||
},
|
||||
interval: 'auto',
|
||||
formatter: '{value}'
|
||||
}
|
||||
const option = {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
const legend = ['运行作业', '调用异构技术栈', '调用接口数量']
|
||||
// 整体总负载
|
||||
const barChart = echarts.init(this.$refs.barChart)
|
||||
const loadOption = {
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
top: '15%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: legend,
|
||||
selectedMode: false, // 是否允许点击
|
||||
textStyle: {
|
||||
color: '#999999',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
...option,
|
||||
type: 'category',
|
||||
data: this.xAxis,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: -10,
|
||||
padding: [0, 0, 0, -40],
|
||||
margin: 14,
|
||||
textStyle: {
|
||||
color: variables[this.jcceTheme].barColor,
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '',
|
||||
...option,
|
||||
axisLabel
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: legend[0],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 7],
|
||||
symbolOffset: [-20, -5],
|
||||
symbolPosition: 'end',
|
||||
z: 12,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
color: '#3182CE',
|
||||
data: this.data
|
||||
},
|
||||
{
|
||||
name: legend[0],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 6],
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
symbolOffset: [-20, 5],
|
||||
z: 12,
|
||||
color: 'rgba(49, 130, 206, 0.4)',
|
||||
data: this.data
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: legend[0],
|
||||
barWidth: '17',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: '#3182CE'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(49, 130, 206, 0.25)'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
data: this.data
|
||||
},
|
||||
{
|
||||
name: legend[1],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 10],
|
||||
symbolOffset: [0, -5],
|
||||
symbolPosition: 'end',
|
||||
z: 12,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
color: '#30BFB7',
|
||||
data: this.data2
|
||||
},
|
||||
{
|
||||
name: legend[1],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 7],
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
symbolOffset: [0, 6],
|
||||
z: 12,
|
||||
color: 'rgba(48, 191, 183, 0.4)',
|
||||
data: this.data2
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: legend[1],
|
||||
barWidth: '17',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: '#30C0B7'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(48, 191, 183, 0.25)'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
data: this.data2
|
||||
},
|
||||
{
|
||||
name: legend[2],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 10],
|
||||
symbolOffset: [20, -5],
|
||||
symbolPosition: 'end',
|
||||
z: 12,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
color: '#00CCFF',
|
||||
data: this.data3
|
||||
},
|
||||
{
|
||||
name: legend[2],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 7],
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
symbolOffset: [21, 6],
|
||||
z: 12,
|
||||
color: 'rgba(0,204,255,0.35)',
|
||||
data: this.data3
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: legend[2],
|
||||
barWidth: '17',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: '#00CCFF'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,204,255,0.35)'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
data: this.data3
|
||||
}
|
||||
]
|
||||
}
|
||||
barChart.setOption(loadOption)
|
||||
window.addEventListener('resize', function() {
|
||||
barChart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.resource{
|
||||
text-align: center;
|
||||
.money{
|
||||
display: inline-block;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border: 30px solid #dfebf7;
|
||||
background: linear-gradient(135deg, #41A0F8 0%, #3182CE 100%);
|
||||
// box-shadow: 0px 10px 26px 5px rgb(52 72 90 / 20%);
|
||||
border-radius: 50%;
|
||||
.hpc-overview{
|
||||
.resource{
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
padding-top: 70px;
|
||||
margin: 0 auto;
|
||||
margin-top: 14px;
|
||||
p{
|
||||
font-family: Impact;
|
||||
font-size: 36px;
|
||||
.money{
|
||||
display: inline-block;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border: 30px solid #dfebf7;
|
||||
background: linear-gradient(135deg, #41A0F8 0%, #3182CE 100%);
|
||||
// box-shadow: 0px 10px 26px 5px rgb(52 72 90 / 20%);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
padding-top: 50px;
|
||||
margin: 0 auto;
|
||||
margin-top: 14px;
|
||||
p{
|
||||
font-family: Impact;
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
.money1{
|
||||
background: linear-gradient(90deg, #21B8AF 0%, #3182CE 100%);
|
||||
}
|
||||
}
|
||||
.money1{
|
||||
background: linear-gradient(90deg, #21B8AF 0%, #3182CE 100%);
|
||||
.impact{
|
||||
font-size: 30px;
|
||||
font-family: Impact;
|
||||
font-weight: 400;
|
||||
}
|
||||
.num{
|
||||
font-size: 24px;
|
||||
}
|
||||
.list-btns {
|
||||
display: none;
|
||||
}
|
||||
#barChart {
|
||||
width: 100%;
|
||||
height: 216px;
|
||||
}
|
||||
}
|
||||
// .list-btns {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue