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

Merge branch 'master' of https://gitlink.org.cn/JointCloud/JCC-RIP into cetc

This commit is contained in:
ann 2024-06-25 19:18:32 +08:00
parent 40395305d3 fc78767b88
commit 1c3e811e66
9 changed files with 82 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.production
View File

@ -3,5 +3,5 @@ ENV = 'production'
# base api
VUE_APP_BASE_API = '/jcc-ks'
VUE_APP_PUBLIC_SOURCE_API = '/monitor'
VUE_APP_PUBLIC_SOURCE_API = ''

2
public/locales/en.json
View File

@ -98,7 +98,7 @@
"storageMana": "Storage Mgmt",
"appObserve": "App Monitoring",
"logMana": "Log Mgmt",
"monitorSelectPcm": "材料AI云际计算平台"
"monitorSelectPcm": "JCCE"
},
"check": {
"input": "Please Input",

2
public/locales/zh.json
View File

@ -98,7 +98,7 @@
"storageMana": "存储管理",
"appObserve": "应用观测",
"logMana": "日志管理",
"monitorSelectPcm": "材料AI云际计算平台"
"monitorSelectPcm": "云际算力网基础平台"
},
"check": {
"input": "请输入",

3
src/api/top-menu/TotalNum.js
View File

@ -70,7 +70,8 @@ export function getEarthDetails(area) {
// 整体总负载 平均使用情况
export function getTotalAverage() {
return request({
url: '/jcc-schedule/api/v1/resource/getOverallMetrics',
url: '/pcm/v1/core/getScreenChart',
// url: '/jcc-schedule/api/v1/resource/getOverallMetrics',
method: 'get'
})
}

33
src/views/monitorSelectPcm/components/ComputeDomain.vue
View File

@ -33,7 +33,7 @@
</el-row>
<el-row class="bottom">
<el-col :span="10">
<div id="radarChart" ref="radarChart" style="width: 100%; height: 14vh" />
<div id="radarChart" ref="radarChart" style="width: 100%; height: 16vh" />
</el-col>
<el-col :span="14">
<div class="text">
@ -43,7 +43,7 @@
<span>本地存储</span>
</td>
<td>
<el-progress :stroke-width="8" :percentage="Number(computePercent.disk)" />
<el-progress :stroke-width="8" :percentage="Number(computePercent.diskUsage)" />
</td>
<td>
<span>/ {{ computePercent.diskTotal }} GB</span>
@ -54,7 +54,7 @@
<span>节点数</span>
</td>
<td>
<el-progress :stroke-width="8" :percentage="Number(computePercent.nodeCount)" />
<el-progress :stroke-width="8" :percentage="Number(computePercent.nodeUsage)" />
</td>
<td>
<span> / {{ computePercent.nodeTotal }}</span>
@ -65,7 +65,7 @@
<span>内存</span>
</td>
<td>
<el-progress :stroke-width="8" :percentage="Number(computePercent.memory)" />
<el-progress :stroke-width="8" :percentage="Number(computePercent.memoryUsage)" />
</td>
<td>
<span>/ {{ computePercent.memoryTotal }} GB</span>
@ -73,10 +73,10 @@
</tr>
<tr>
<td>
<span>cpu</span>
<span>cpuUsage</span>
</td>
<td>
<el-progress :stroke-width="8" :percentage="Number(computePercent.cpu)" />
<el-progress :stroke-width="8" :percentage="Number(computePercent.cpuUsage)" />
</td>
<td>
<span>/ {{ computePercent.cpuTotal }} Core</span>
@ -100,10 +100,10 @@ export default {
areaItem: [],
radarChart: undefined,
computePercent: {
disk: 0,
memory: 0,
nodeCount: 0,
cpu: 0
diskUsage: 0,
memoryUsage: 0,
nodeUsage: 0,
cpuUsage: 0
}
}
},
@ -111,9 +111,9 @@ export default {
getComputeArea().then((res) => {
this.areaItem = res.data.domainResourceList
const charts = echarts.init(this.$refs.radarChart)
const { disk, memory, nodeCount, cpu } = this.areaItem[0]
const { diskUsage, memoryUsage, nodeUsage, cpuUsage } = this.areaItem[0]
this.computePercent = this.areaItem[0]
charts.setOption(this.returnRadarChart([disk, memory, nodeCount, cpu]))
charts.setOption(this.returnRadarChart([diskUsage, memoryUsage, nodeUsage, cpuUsage]))
window.addEventListener('resize', debounce(() => {
charts.resize()
}, 100))
@ -122,9 +122,9 @@ export default {
},
methods: {
changeItem(e) {
const { disk, memory, nodeCount, cpu } = this.areaItem[e]
const { diskUsage, memoryUsage, nodeUsage, cpuUsage } = this.areaItem[e]
this.computePercent = this.areaItem[e]
this.radarChart.setOption(this.returnRadarChart([disk, memory, nodeCount, cpu]))
this.radarChart.setOption(this.returnRadarChart([diskUsage, memoryUsage, nodeUsage, cpuUsage]))
},
fontSize(rem) {
const scale = window.innerHeight / 900
@ -166,7 +166,7 @@ export default {
{ name: '本地存储', max: 100 },
{ name: '内存', max: 100 },
{ name: '节点数', max: 100 },
{ name: 'cpu', max: 100 }
{ name: 'cpuUsage', max: 100 }
],
nameGap: 4
},
@ -249,8 +249,9 @@ export default {
}
}
.bottom{
margin-top: 2vh;
.text{
margin-top: 0.5vh;
margin-top: 1.5vh;
height: 14vh;
}
table tr td:nth-child(2) {

2
src/views/monitorSelectPcm/components/ComputingPowerTrend.vue
View File

@ -95,7 +95,7 @@ export default {
},
axisLabel: {
show: true,
interval: 28,
// interval: 28,
// rotate: -18,
// padding: [1, 0, 0, -10],
margin: scaleRate ? 14 : 10,

69
src/views/monitorSelectPcm/components/ComputingResourceLoad.vue
View File

@ -14,14 +14,14 @@ export default {
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('MMDD')
day[i][1] = moment().subtract(7 - i, 'days').endOf('day').format('MM/DD')
}
return {
day,
ramLoad: [2, 3, 4, 5, 6, 4, 5], // 内存整体负载
cpuLoad: [1, 2, 3, 4, 5, 3, 4], // CPU整体负载
cpuAverage: [3, 4, 5, 3, 4, 3, 4], // cpu 平均负载
ramAverage: [7, 6, 5, 4, 6, 5, 4] // 内存平均负载
ramLoad: [], // 内存整体负载
cpuLoad: [], // CPU整体负载
cpuAverage: [], // cpu 平均负载
ramAverage: [] // 内存平均负载
}
},
computed: {
@ -40,33 +40,38 @@ export default {
// 获取资源负载状况
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'))
})
this.ramLoad = this.ramLoad.slice(0, 7)
// 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))
})
this.cpuLoad = this.cpuLoad.slice(0, 7)
// 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'))
})
this.cpuAverage = this.cpuAverage.slice(0, 7)
// 内存平均负载 (%)
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.ramAverage = this.ramAverage.slice(0, 7)
this.ramLoad = res.data.memoryLoad
this.ramAverage = res.data.memoryAvg
this.cpuLoad = res.data.cpuLoad
this.cpuAverage = res.data.cpuAvg
// 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'))
// })
// this.ramLoad = this.ramLoad.slice(0, 7)
// // 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))
// })
// this.cpuLoad = this.cpuLoad.slice(0, 7)
// // 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'))
// })
// this.cpuAverage = this.cpuAverage.slice(0, 7)
// // 内存平均负载 (%)
// 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.ramAverage = this.ramAverage.slice(0, 7)
})
this.initCharts()
},

18
src/views/monitorSelectPcm/components/StorageResourceUsage.vue
View File

@ -20,17 +20,25 @@
</template>
<script>
import { getStorageData } from '@/api/container/monitorSelect'
export default {
props: {
data: {
type: Object,
default: () => ({})
}
},
data() {
return {
storageData: {}
}
},
mounted() {
getStorageData().then(e => {
this.storageData = e
})
watch: {
data: {
handler(newValue, oldValue) {
this.storageData = newValue
},
deep: true
}
}
}
</script>

20
src/views/monitorSelectPcm/index.vue
View File

@ -13,7 +13,7 @@
</div>
<div class="top">
<div class="top-title">
<h1> 云际计算基础平台</h1>
<h1> {{ $t('menu.monitorSelectPcm') }}</h1>
</div>
</div>
<div class="floatLeft">
@ -44,7 +44,7 @@
</div>
<div class="right_3">
<div class="title"><p>存储资源用量</p></div>
<StorageResourceUsage />
<StorageResourceUsage :data="powerData" />
</div>
</div>
</div>
@ -190,7 +190,7 @@ export default {
this.tendData = { used: [], xData: [] }
const arr = res.data?.chart?.thirtyDayData // 模拟一个假数据
if (arr !== null) {
arr.forEach((item) => {
arr.reverse().forEach((item) => {
this.tendData.used.push(item.cardTime)
this.tendData.xData.push(item.perDay)
})
@ -198,7 +198,8 @@ export default {
})
},
getAccrueCenter() {
getCPUsage().then((res) => {
getCPUsage().then((response) => {
const res = response.data?.chart
this.centerData = { used: [], xData: [] }
if (res.perCenterComputerPowers) {
const data = res.accOtJobInfo
@ -218,7 +219,7 @@ export default {
data1.sort(order)
data1.forEach((item) => {
if (item.computerPower !== 0) {
this.centerData.used.push(item.computerPower.toFixed(1))
this.centerData.used.push(item.computerPower.toFixed(2))
this.centerData.xData.push(item.centerName)
}
})
@ -439,18 +440,15 @@ export default {
left: -2vh;
}
.left_1{
height: 29vh;
height: 34vh;
overflow: hidden;
}
.left_2 {
height: 21vh;
height: 26vh;
}
.left_3 {
width: 100%;
height: 23vh;
}
.left_4{
height: 12vh;
height: 24vh;
}
}
}