forked from JointCloud/JCC-RIP
新版大屏修改
This commit is contained in:
parent
205cd7dc56
commit
e224e5547f
|
|
@ -0,0 +1,19 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 算力累积趋势
|
||||
export function getTend(params) {
|
||||
return request({
|
||||
url: '/openapi/v1/sharescreen/computepower/dailytrend',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 每个中心累积任务情况
|
||||
export function getAccrueCenter(params) {
|
||||
return request({
|
||||
url: '/openapi/v1/sharescreen/computepower/percenter',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
|
|
@ -201,3 +201,14 @@ export function getOriginData(item) {
|
|||
'metadata.managedFields'
|
||||
])
|
||||
}
|
||||
|
||||
// 对象某一项进行排序
|
||||
export function order(a, b) {
|
||||
if (a.computerPower > b.computerPower) {
|
||||
return -1
|
||||
} else if (a.computerPower < b.computerPower) {
|
||||
return 1
|
||||
} else if (a.computerPower === b.computerPower) {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<!-- 计算域信息 -->
|
||||
<div>11</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<!-- 算力中心总数 -->
|
||||
<div>77</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,213 @@
|
|||
<!-- 算力使用趋势 -->
|
||||
<template>
|
||||
<div :id="id" ref="echart" style="width: 100%; height: 235px" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'LineChart',
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Data: { used: [], xData: [] }
|
||||
// xDataNumber: 120,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(newValue, oldValue) {
|
||||
// console.log(newValue)
|
||||
const TempData = JSON.parse(JSON.stringify(newValue))
|
||||
this.Data.used = TempData.used
|
||||
this.Data.xData = TempData.xData
|
||||
this.drawLine()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.Data = { used: [59688.1, 59252.5, 59189.0, 55766.5, 55537.2, 54804.4, 52764.9], xData: ["2022-06-30", "2022-07-31", "2022-07-31", "2022-08-31", "2022-09-30", "2022-10-31", "2022-11-30"] }
|
||||
this.$nextTick(() => {
|
||||
this.drawLine()
|
||||
})
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
drawLine() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.myChart = this.$echarts.init(this.$refs.echart)
|
||||
var option
|
||||
option = {
|
||||
title: {
|
||||
text: '',
|
||||
textStyle: {
|
||||
color: '#008B45'
|
||||
}
|
||||
},
|
||||
color: ['#1890ff'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'none',
|
||||
show: false
|
||||
},
|
||||
backgroundColor: '#000033',
|
||||
textStyle: { color: '#fff' },
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
right: '0',
|
||||
itemHeight: 1,
|
||||
itemWidth: 40,
|
||||
textStyle: { color: '#fff' }
|
||||
},
|
||||
grid: {
|
||||
right: '7%',
|
||||
bottom: '18%',
|
||||
top: '12%',
|
||||
left: this.config.unit.length > 7 ? '15%' : '8%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.Data.xData,
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
fontSize: '10',
|
||||
lineHeight: 40,
|
||||
color: '#fff',
|
||||
fontFamily: 'Microsoft YaHei'
|
||||
},
|
||||
formatter: function(params) {
|
||||
switch (params) {
|
||||
case '2022-12-31':
|
||||
return params
|
||||
case '2022-11-30':
|
||||
return params
|
||||
case '2022-10-31':
|
||||
return params
|
||||
case '2022-09-30':
|
||||
return params
|
||||
case '2022-08-31':
|
||||
return params
|
||||
case '2022-07-31':
|
||||
return params
|
||||
case '2022-06-30':
|
||||
return params
|
||||
case '2022-05-31':
|
||||
return params
|
||||
case '2022-04-30':
|
||||
return params
|
||||
case '2022-03-31':
|
||||
return params
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
// x轴刻度相关设置
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: this.config.unit,
|
||||
nameTextStyle: { // 关键代码
|
||||
padding: this.config.unit.length > 7 ? [0, 0, 0, 45] : [0, 0, 0, 0]
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
nameGap: 10,
|
||||
data: [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
align: 'right',
|
||||
textStyle: {
|
||||
fontSize: '8',
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
scale: true,
|
||||
min: 0,
|
||||
splitNumber: 3
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.config.status[0] ? this.config.status[0] : '',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: this.Data.used,
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(24,144,255,0.7)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(30,231,231,0.7)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
animation: true,
|
||||
animationDuration: function(idx) {
|
||||
// 越往后的数据时长越大
|
||||
return idx * 500
|
||||
},
|
||||
animationEasing: 'backln'
|
||||
}
|
||||
option && this.myChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,321 @@
|
|||
|
||||
<!-- 算力使用情况 -->
|
||||
<template>
|
||||
<div :id="id" ref="echart" style="width: 100%; height: 235px" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Histogram',
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
Data: {
|
||||
unused: [], used: [], xData: []
|
||||
},
|
||||
BarWidth: 25,
|
||||
Max: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(newValue, oldValue) {
|
||||
const Data = { unused: [], used: [], xData: [] }
|
||||
clearInterval(this.timer)
|
||||
const TempData = JSON.parse(JSON.stringify(newValue))
|
||||
if (TempData.xData.length <= 5) {
|
||||
this.barWidth = 40
|
||||
} else {
|
||||
this.barWidth = 25
|
||||
}
|
||||
Data.xData = TempData.xData
|
||||
Data.used = TempData.used ? TempData.used : []
|
||||
Data.unused = TempData.unused ? TempData.unused : []
|
||||
if (Data.unused.length !== 0) { this.Max = Math.max(...Data.used) + Math.max(...Data.unused) } else { this.Max = Math.max(...Data.used) }
|
||||
const num = this.digit(this.Max)
|
||||
let number = this.Max.toString()[0]
|
||||
number = parseFloat(number)
|
||||
if (number < 9) {
|
||||
number++
|
||||
if (num <= 3) { this.Max = number + '00' } else if (num <= 4) { this.Max = number + '000' } else if (num <= 5) { this.Max = number + '0000' }
|
||||
} else {
|
||||
if (num <= 3) { this.Max = 1000 } else if (num <= 4) { this.Max = 10000 } else if (num <= 5) { this.Max = 100000 }
|
||||
}
|
||||
if (TempData.xData.length <= 5) {
|
||||
this.Data = Data
|
||||
this.drawLine()
|
||||
} else {
|
||||
this.Data.unused = Data.unused.slice(0, 5)
|
||||
this.Data.used = Data.used.slice(0, 5)
|
||||
this.Data.xData = Data.xData.slice(0, 5)
|
||||
this.drawLine()
|
||||
this.timer = setInterval(() => {
|
||||
const unused = Data.unused.shift()
|
||||
const used = Data.used.shift()
|
||||
const xData = Data.xData.shift()
|
||||
Data.unused.push(unused)
|
||||
Data.used.push(used)
|
||||
Data.xData.push(xData)
|
||||
this.Data.unused = Data.unused.slice(0, 5)
|
||||
this.Data.used = Data.used.slice(0, 5)
|
||||
this.Data.xData = Data.xData.slice(0, 5)
|
||||
this.drawLine()
|
||||
}, 3000)
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.Data = {
|
||||
// used: [1400, 700, 200, 800, 600], xData
|
||||
// : ["鹏城云脑一", "云脑二号智算", "武汉智算", "北京大学GPU智算","中科类脑智算"]
|
||||
// }
|
||||
this.$nextTick(() => {
|
||||
this.drawLine()
|
||||
})
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
drawLine() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.myChart = this.$echarts.init(this.$refs.echart)
|
||||
var option
|
||||
option = {
|
||||
title: {
|
||||
text: '',
|
||||
textStyle: {
|
||||
color: '#008B45'
|
||||
},
|
||||
padding: [10, 0, 0, 10] // 位置
|
||||
},
|
||||
color: ['#1890ff', '#1ee7e7'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'none',
|
||||
show: false
|
||||
},
|
||||
backgroundColor: '#000033',
|
||||
textStyle: { color: '#fff' },
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
right: '0',
|
||||
itemWidth: 15,
|
||||
textStyle: { color: '#fff' }
|
||||
},
|
||||
grid: {
|
||||
right: '5%',
|
||||
bottom: '18%',
|
||||
top: '12%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.Data.xData,
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
fontSize: '10',
|
||||
lineHeight: 40,
|
||||
color: '#fff',
|
||||
fontFamily: 'Microsoft YaHei'
|
||||
},
|
||||
margin: this.config.unit.length > 10 ? 35 : 8,
|
||||
formatter: function(params) {
|
||||
var newParamsName = ''
|
||||
var paramsNameNumber = params.length
|
||||
var provideNumber = 6 // 一行显示几个字
|
||||
var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
|
||||
if (paramsNameNumber > provideNumber) {
|
||||
for (var p = 0; p < rowNumber; p++) {
|
||||
var tempStr = ''
|
||||
var start = p * provideNumber
|
||||
var end = start + provideNumber
|
||||
if (p === rowNumber - 1) {
|
||||
tempStr = params.substring(start, paramsNameNumber)
|
||||
} else {
|
||||
tempStr = params.substring(start, end) + '\n'
|
||||
}
|
||||
newParamsName += tempStr
|
||||
}
|
||||
} else {
|
||||
newParamsName = params
|
||||
}
|
||||
return newParamsName
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
// x轴刻度相关设置
|
||||
alignWithLabel: true
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
offset: this.config.unit.length > 10 ? -40 : 0,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
name: this.config.unit,
|
||||
data: [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: '8',
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
scale: true,
|
||||
min: 0,
|
||||
max: this.Max,
|
||||
splitNumber: 3
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.config.status[0] ? this.config.status[0] : '',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: this.barWidth,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: this.Data.used ? this.Data.used : [],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(24, 144, 255,0.5)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(24, 144, 255)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: this.config.status[1] ? this.config.status[1] : '',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: this.barWidth,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: this.Data.unused !== [] ? this.Data.unused : [],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(30, 231, 231,0.5)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(30, 231, 231)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
animation: true,
|
||||
animationDuration: function(idx) {
|
||||
// 越往后的数据时长越大
|
||||
return idx * 100
|
||||
},
|
||||
animationEasing: 'backln'
|
||||
}
|
||||
if (this.Data.xData.length > 8) {
|
||||
option.xAxis.axisLabel.formatter = function(params) {
|
||||
var newParamsName = ''
|
||||
var paramsNameNumber = params.length
|
||||
var provideNumber = 4 // 一行显示几个字
|
||||
var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
|
||||
if (paramsNameNumber > provideNumber) {
|
||||
for (var p = 0; p < rowNumber; p++) {
|
||||
var tempStr = ''
|
||||
var start = p * provideNumber
|
||||
var end = start + provideNumber
|
||||
if (p === rowNumber - 1) {
|
||||
tempStr = params.substring(start, paramsNameNumber)
|
||||
} else {
|
||||
tempStr = params.substring(start, end) + '\n'
|
||||
}
|
||||
newParamsName += tempStr
|
||||
}
|
||||
} else {
|
||||
newParamsName = params
|
||||
}
|
||||
return newParamsName
|
||||
}
|
||||
}
|
||||
|
||||
option && this.myChart.setOption(option)
|
||||
},
|
||||
digit(val) {
|
||||
let num = Math.trunc(val)
|
||||
// const number = num.toString() // 把数字转换成字符串
|
||||
// var temp = num
|
||||
var count = 0
|
||||
if (num === 0) {
|
||||
return 0
|
||||
} else {
|
||||
while (num !== 0) {
|
||||
count++ // 统计位数；
|
||||
num = parseInt(num / 10) // 赋值给 num 以备下次循环使用；
|
||||
}
|
||||
return count
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<!-- 计算资源负载 -->
|
||||
<div>555</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<!-- 累计任务情况 -->
|
||||
<div>
|
||||
444
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<!-- 存储资源用量 -->
|
||||
<div>
|
||||
666
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,109 +1,57 @@
|
|||
<template>
|
||||
<div class="monitor">
|
||||
<div class="top">
|
||||
<div class="weather">
|
||||
天气晴
|
||||
<h1>算力网络平台(C2NET)</h1>
|
||||
<div class="top-right">
|
||||
<span class="menu">
|
||||
云算 智算 超算
|
||||
</span>
|
||||
<span class="time">
|
||||
天气晴 2023年2月22日 星期一
|
||||
</span>
|
||||
</div>
|
||||
<div class="time">
|
||||
2023年2月22日
|
||||
</div>
|
||||
<h1>区域运维服务实时监控</h1>
|
||||
</div>
|
||||
<div class="floatLeft">
|
||||
<div class="left">
|
||||
<div class="left_1">
|
||||
<div class="title">服务器总数量</div>
|
||||
<div class="left_12">{{ number }}</div>
|
||||
<div class="left_22">
|
||||
<div class="left_22_chart">
|
||||
<PercentPieChart id="PercentPieChart" />
|
||||
</div>
|
||||
<div class="left_22_num">
|
||||
<div class="left_22_title">
|
||||
<span> 已部署 </span>
|
||||
<span style="color: #23B9FF"> {{ usagedCount }} </span>
|
||||
</div>
|
||||
<ProgressChart id="progress1" color="#23B9FF" />
|
||||
<div class="left_22_title">
|
||||
<span> 未部署 </span>
|
||||
<span> {{ usageingCount }} </span>
|
||||
</div>
|
||||
<ProgressChart1 id="progress2" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">计算域信息</div>
|
||||
<ComputeDomain />
|
||||
</div>
|
||||
<div class="left_2">
|
||||
<div class="title">告警通知</div>
|
||||
<div class="warn">
|
||||
<div class="warn_div">
|
||||
<img class="warn_icon" src="@/assets/monitor/icon_11.png" alt="">
|
||||
<div>
|
||||
<div>紧急通知</div>
|
||||
<span class="warn_num">12</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="warn_div">
|
||||
<img class="warn_icon" src="@/assets/monitor/icon_12.png" alt="">
|
||||
<div>
|
||||
<div>重要通知</div>
|
||||
<span class="warn_num">8</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="warn_div">
|
||||
<img class="warn_icon" src="@/assets/monitor/icon_13.png" alt="">
|
||||
<div>
|
||||
<div>一般通知</div>
|
||||
<span class="warn_num">5</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="warn_div">
|
||||
<img class="warn_icon" src="@/assets/monitor/icon_14.png" alt="">
|
||||
<div>
|
||||
<div>待办事项</div>
|
||||
<span class="warn_num">15</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">算力使用趋势</div>
|
||||
<ComputingPowerTrend id="ComputingPowerTrend" :data="tendData" :config="tendConfig" />
|
||||
</div>
|
||||
<div class="left_3">
|
||||
<span class="title"> 整体总负载 </span>
|
||||
<div class="cartDraw">
|
||||
<TotalLoadChart id="loadChart" :data="dataBar" :data2="dataBar2" />
|
||||
</div>
|
||||
<div class="title">算力使用情况</div>
|
||||
<ComputingPowerUse id="ComputingPowerUse" :data="centerData" :config="statusConfig" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<ComputingPowerTotal />
|
||||
</div>
|
||||
<div class="floatRight">
|
||||
<div class="right">
|
||||
<div class="right_1">
|
||||
<div class="title">资源服务厂商占比</div>
|
||||
<LeftPieChart id="bottomChart" />
|
||||
<div class="title">累计任务情况</div>
|
||||
<CumulativeTasks />
|
||||
</div>
|
||||
<div class="right_2">
|
||||
<span class="allGet">
|
||||
<span class="title">计量计费</span>
|
||||
<span>
|
||||
<span class="num">{{ num }}</span>
|
||||
元
|
||||
</span>
|
||||
</span>
|
||||
<TotalRevenueChart id="allGetChart" :data="dataBar" :data2="dataBar2" />
|
||||
<div class="title">计算资源负载</div>
|
||||
<ComputingResourceLoad />
|
||||
</div>
|
||||
<div class="right_3">
|
||||
<span class="title"> 平均使用情况 </span>
|
||||
<div class="cartDraw">
|
||||
<AverageChart id="averageChart" :data="dataList" />
|
||||
</div>
|
||||
<div class="title">存储资源用量</div>
|
||||
<StorageResourceUsage />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixedBottom">
|
||||
<!-- <div class="fixedBottom">
|
||||
<el-row>
|
||||
<a v-show="filteredLightTab.length > 6" class="lightLeft" @click="changePage('left')">
|
||||
<svg-icon icon-class="zuojiantou" />
|
||||
</a>
|
||||
<div class="div-block">
|
||||
<!-- <div class="block"></div> -->
|
||||
<div v-for="item in filteredLightTab" :key="item.id">
|
||||
<a class="monitorSelectDiv" @click.prevent="selectMonitor(item.path)">
|
||||
<div class="monitorSelectBtn">
|
||||
|
|
@ -119,54 +67,32 @@
|
|||
<svg-icon icon-class="youjiantou" />
|
||||
</a>
|
||||
</el-row>
|
||||
</div>
|
||||
</div> -->
|
||||
<Earth />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import ProgressChart from '@/views/prometheusMonitorNew/components/ProgressChart'
|
||||
import ProgressChart1 from '@/views/prometheusMonitorNew/components/ProgressChart1'
|
||||
import AverageChart from '@/views/prometheusMonitorNew/components/AverageChart'
|
||||
import TotalLoadChart from '@/views/prometheusMonitorNew/components/TotalLoadChart'
|
||||
import TotalRevenueChart from '@/views/prometheusMonitorNew/components/TotalRevenueChart'
|
||||
import PercentPieChart from '@/views/prometheusMonitorNew/components/PercentPieChart'
|
||||
import LeftPieChart from '@/views/prometheusMonitorNew/components/LeftPieChart'
|
||||
import moment from 'moment'
|
||||
import ComputeDomain from './components/ComputeDomain.vue'
|
||||
import ComputingPowerTotal from './components/ComputingPowerTotal.vue'
|
||||
import ComputingPowerTrend from './components/ComputingPowerTrend.vue'
|
||||
import ComputingPowerUse from './components/ComputingPowerUse.vue'
|
||||
import ComputingResourceLoad from './components/ComputingResourceLoad.vue'
|
||||
import CumulativeTasks from './components/CumulativeTasks.vue'
|
||||
import StorageResourceUsage from './components/StorageResourceUsage.vue'
|
||||
import Earth from '@/views/prometheusMonitor/earth'
|
||||
import { getTotalNum, getMeasure } from '@/api/top-menu/TotalNum'
|
||||
// 获取七天前日期方法
|
||||
function getDay(day) {
|
||||
var today = new Date()
|
||||
var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
|
||||
today.setTime(targetday_milliseconds) // 注意，这行是关键代码
|
||||
// var tYear = today.getFullYear()
|
||||
var tMonth = today.getMonth()
|
||||
var tDate = today.getDate()
|
||||
tMonth = doHandleMonth(tMonth + 1)
|
||||
tDate = doHandleMonth(tDate)
|
||||
return tMonth + '/' + tDate
|
||||
}
|
||||
function doHandleMonth(month) {
|
||||
var m = month
|
||||
if (month.toString().length === 1) {
|
||||
m = '0' + month
|
||||
}
|
||||
return m
|
||||
}
|
||||
import { getTend, getAccrueCenter } from '@/api/container/monitorSelect.js'
|
||||
import { order } from '@/utils/data-process'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ProgressChart,
|
||||
ProgressChart1,
|
||||
AverageChart,
|
||||
TotalLoadChart,
|
||||
TotalRevenueChart,
|
||||
PercentPieChart,
|
||||
LeftPieChart,
|
||||
Earth
|
||||
},
|
||||
components: { ComputeDomain, ComputingPowerTotal, ComputingPowerTrend, ComputingPowerUse, ComputingResourceLoad, CumulativeTasks, StorageResourceUsage, Earth },
|
||||
data() {
|
||||
return {
|
||||
tendData: { used: [], xData: [] },
|
||||
centerData: { used: [], xData: [] },
|
||||
tendConfig: { unit: '单位: 卡时', status: ['使用量'] },
|
||||
statusConfig: { unit: '单位: 卡时', status: ['使用量'] },
|
||||
tabLightList: [
|
||||
{
|
||||
id: 'cluster',
|
||||
|
|
@ -210,123 +136,22 @@ export default {
|
|||
icon: 'fuwu',
|
||||
path: '/hpc/hpcOverview'
|
||||
}
|
||||
],
|
||||
num: '2643.68',
|
||||
number: 12345,
|
||||
usagedCount: 12345,
|
||||
usageingCount: 12345,
|
||||
// 平均
|
||||
dataList: [
|
||||
{
|
||||
name: '02/12'
|
||||
},
|
||||
{
|
||||
name: '02/13'
|
||||
},
|
||||
{
|
||||
name: '02/14'
|
||||
},
|
||||
{
|
||||
name: '02/15'
|
||||
},
|
||||
{
|
||||
name: '02/16'
|
||||
},
|
||||
{
|
||||
name: '02/17'
|
||||
},
|
||||
{
|
||||
name: '02/1'
|
||||
}
|
||||
],
|
||||
bottomList: [
|
||||
{
|
||||
name: 'UCloud',
|
||||
value: '0.02'
|
||||
},
|
||||
{
|
||||
name: '金山云',
|
||||
value: '0.10'
|
||||
},
|
||||
{
|
||||
name: '腾讯云',
|
||||
value: '0.02'
|
||||
},
|
||||
{
|
||||
name: '华为云',
|
||||
value: '0.13'
|
||||
},
|
||||
{
|
||||
name: '阿里云',
|
||||
value: '0.10'
|
||||
}
|
||||
],
|
||||
dataBar: [
|
||||
{
|
||||
name: '02/12'
|
||||
},
|
||||
{
|
||||
name: '02/13'
|
||||
},
|
||||
{
|
||||
name: '02/14'
|
||||
},
|
||||
{
|
||||
name: '02/15'
|
||||
},
|
||||
{
|
||||
name: '02/16'
|
||||
},
|
||||
{
|
||||
name: '02/17'
|
||||
},
|
||||
{
|
||||
name: '02/16'
|
||||
}
|
||||
],
|
||||
// 计量和整体
|
||||
dataBar2: [
|
||||
{
|
||||
name: '02/12'
|
||||
},
|
||||
{
|
||||
name: '02/13'
|
||||
},
|
||||
{
|
||||
name: '02/14'
|
||||
},
|
||||
{
|
||||
name: '02/15'
|
||||
},
|
||||
{
|
||||
name: '02/16'
|
||||
},
|
||||
{
|
||||
name: '02/17'
|
||||
},
|
||||
{
|
||||
name: '02/17'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'name',
|
||||
'menus'
|
||||
]),
|
||||
jcceTheme() {
|
||||
return localStorage.getItem('jcceTheme')
|
||||
},
|
||||
filteredDarkTab() {
|
||||
return this.tabDarkList.filter(e => this.menus.includes(e.id))
|
||||
},
|
||||
filteredLightTab() {
|
||||
return this.tabLightList.filter(e => this.menus.includes(e.id))
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.getTotalNumber()
|
||||
},
|
||||
created() {
|
||||
this.getTend()
|
||||
this.getAccrueCenter()
|
||||
},
|
||||
mounted() {
|
||||
const loading = this.$loading({
|
||||
|
|
@ -362,42 +187,68 @@ export default {
|
|||
this.$store.dispatch('user/setRouteType', monitor.split('/')[1])
|
||||
this.$router.push({ path: monitor })
|
||||
},
|
||||
toRoot() {
|
||||
this.$router.replace('/')
|
||||
},
|
||||
getTotalNumber() {
|
||||
getTotalNum().then(res => {
|
||||
this.number = res.data.deviceCount
|
||||
this.usagedCount = res.data.usagedCount
|
||||
this.usageingCount = res.data.usageingCount
|
||||
})
|
||||
const a = Math.round(new Date() / 1000)
|
||||
// console.log(a)
|
||||
const b = a - 604800
|
||||
getMeasure(b, a, 86400).then(res => {
|
||||
const demo1 = Number(res.results[1].data.result[0].fee)
|
||||
const demo2 = Number(res.results[2].data.result[0].fee)
|
||||
const demo3 = Number(res.results[3].data.result[0].fee)
|
||||
const demo4 = Number(res.results[4].data.result[0].fee)
|
||||
const demo = demo1 + demo2 + demo3 + demo4
|
||||
this.num = demo.toFixed(2)
|
||||
// const demo = res
|
||||
// console.log(this.num)
|
||||
const Day = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
Day[i] = getDay(i - 6)
|
||||
getTend() {
|
||||
getTend().then((res) => {
|
||||
this.tendData = { used: [], xData: [] }
|
||||
if (res.dailyComputerPowers !== null) {
|
||||
const timeArr = []// 最近12个月的月份
|
||||
for (let i = 0; i < 180; i++) {
|
||||
timeArr.push(
|
||||
`${moment(new Date()).subtract(i, 'days').format('YYYY-MM-DD')}`
|
||||
)
|
||||
}
|
||||
timeArr.reverse()// 时间排序
|
||||
const arr = [] // 模拟一个假数据
|
||||
for (let i = 0; i < timeArr.length; i++) {
|
||||
arr.push({ date: timeArr[i], computerPower: 0 })
|
||||
// 将真实数据塞进arr里面
|
||||
for (let j = 0; j < res.dailyComputerPowers.length; j++) {
|
||||
if (res.dailyComputerPowers[j].date === timeArr[i]) {
|
||||
arr[i] = { date: res.dailyComputerPowers[j].date, computerPower: res.dailyComputerPowers[j].computerPower }
|
||||
}
|
||||
}
|
||||
}
|
||||
arr.forEach((item) => {
|
||||
this.tendData.used.push(item.computerPower.toFixed(1))
|
||||
this.tendData.xData.push(item.date)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getAccrueCenter() {
|
||||
getAccrueCenter().then((res) => {
|
||||
this.centerData = { used: [], xData: [] }
|
||||
if (res.perCenterComputerPowers) {
|
||||
const data = res.accOtJobInfo
|
||||
this.accrueData = {
|
||||
config1: data.accCardRunSec,
|
||||
config2: data.accOtJobNum,
|
||||
config3: data.accRunSec
|
||||
}
|
||||
const data1 = res.perCenterComputerPowers.filter(item => {
|
||||
if (item.computerPower !== 0) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
this.timer = setInterval(() => {
|
||||
this.getTaskTotal()
|
||||
}, 1000)
|
||||
data1.sort(order)
|
||||
data1.forEach((item) => {
|
||||
if (item.computerPower !== 0) {
|
||||
this.centerData.used.push(item.computerPower.toFixed(1))
|
||||
this.centerData.xData.push(item.centerName)
|
||||
}
|
||||
})
|
||||
}
|
||||
this.dataBar2.name = Day
|
||||
this.dataList.name = Day
|
||||
this.dataBar.name = Day
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/styles/variables.scss";
|
||||
|
||||
.back{
|
||||
|
|
@ -418,22 +269,21 @@ export default {
|
|||
font-weight: 400;
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
padding: 2% 3.13%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
color: #FEFCFC;
|
||||
height: 8%;
|
||||
padding: 1% 3.13%;
|
||||
vertical-align: baseline;
|
||||
h1{
|
||||
font-size: 40px;
|
||||
margin:0;
|
||||
font-weight: 400;
|
||||
}
|
||||
.weather{
|
||||
float: left;
|
||||
}
|
||||
.time{
|
||||
.top-right{
|
||||
float: right;
|
||||
.menu{
|
||||
}
|
||||
.time{
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
|
|
@ -446,7 +296,6 @@ export default {
|
|||
position: absolute;
|
||||
z-index: 10;
|
||||
height: 90%;
|
||||
margin-top: 10vh;
|
||||
padding: 0 3.13%;
|
||||
// box-shadow: -87px 0px 20px 18px #12141491;
|
||||
// background: #12141491;
|
||||
|
|
@ -558,75 +407,79 @@ export default {
|
|||
width: 25vw;
|
||||
// box-shadow: 87px 0px 20px 18px #12141491;
|
||||
}
|
||||
.middle{
|
||||
width: 50vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.floatRight{
|
||||
width: 25vw;
|
||||
right: 0;
|
||||
}
|
||||
.fixedBottom {
|
||||
width:50vw;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
height: 13vh;
|
||||
left: 25vw;
|
||||
.el-row{position:relative; height: 100%}
|
||||
.lightLeft{
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 3vh;
|
||||
z-index: 10;
|
||||
color: #DDD;
|
||||
}
|
||||
.lightRight{
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 3vh;
|
||||
z-index: 10;
|
||||
color: #DDD;
|
||||
}
|
||||
// display：flex 样式
|
||||
.div-block{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.monitorSelectDiv{
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 8.33vw;
|
||||
}
|
||||
> div{
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 8.5vw;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
&:hover{
|
||||
color: #3182CE;
|
||||
}
|
||||
.svg-icon {
|
||||
font-size: 80px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.selectTitle {
|
||||
margin-bottom: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
span{
|
||||
display: block;
|
||||
padding: 0 100px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .fixedBottom {
|
||||
// width:50vw;
|
||||
// bottom: 0;
|
||||
// display: block;
|
||||
// position: absolute;
|
||||
// z-index: 10;
|
||||
// height: 13vh;
|
||||
// left: 25vw;
|
||||
// .el-row{position:relative; height: 100%}
|
||||
// .lightLeft{
|
||||
// font-size: 30px;
|
||||
// position: absolute;
|
||||
// left: -20px;
|
||||
// top: 3vh;
|
||||
// z-index: 10;
|
||||
// color: #DDD;
|
||||
// }
|
||||
// .lightRight{
|
||||
// font-size: 30px;
|
||||
// position: absolute;
|
||||
// right: -20px;
|
||||
// top: 3vh;
|
||||
// z-index: 10;
|
||||
// color: #DDD;
|
||||
// }
|
||||
// // display：flex 样式
|
||||
// .div-block{
|
||||
// display: flex;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// overflow: hidden;
|
||||
// .monitorSelectDiv{
|
||||
// display: block;
|
||||
// height: 100%;
|
||||
// width: 8.33vw;
|
||||
// }
|
||||
// > div{
|
||||
// display: block;
|
||||
// width: 100%;
|
||||
// max-width: 8.5vw;
|
||||
// font-size: 20px;
|
||||
// color: #ffffff;
|
||||
// height: 100vh;
|
||||
// position: relative;
|
||||
// text-align: center;
|
||||
// &:hover{
|
||||
// color: #3182CE;
|
||||
// }
|
||||
// .svg-icon {
|
||||
// font-size: 80px;
|
||||
// margin: 0 auto;
|
||||
// }
|
||||
// .selectTitle {
|
||||
// margin-bottom: 24px;
|
||||
// font-size: 16px;
|
||||
// }
|
||||
// span{
|
||||
// display: block;
|
||||
// padding: 0 100px;
|
||||
// font-size: 14px;
|
||||
// line-height: 24px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -76,6 +76,11 @@ module.exports = {
|
|||
target: 'https://10.101.15.6/apis',
|
||||
// target: 'https://jointcloud.net/apis', /* 演示环境 */
|
||||
changeOrigin: true
|
||||
},
|
||||
'/openapi': {
|
||||
ws: false,
|
||||
target: 'http://grampus.openi.org.cn/',
|
||||
changeOrigin: true
|
||||
}
|
||||
// '^/edgex': {
|
||||
// ws: false,
|
||||
|
|
|
|||
Loading…
Reference in New Issue