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

Merge branch 'earth' of code.gitlink.org.cn:JCCE/kubeX-frontend into earth

This commit is contained in:
ann 2023-03-08 11:47:30 +08:00
parent 8427fac534 8a972588a4
commit f6b82d518d
8 changed files with 114 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/images/monitorSelect/pending.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.62 13.81"><defs><style>.cls-1{font-size:12px;font-family:Fontquan-XinYiGuanHeiTi-Regular, Fontquan-XinYiGuanHeiTi;}.cls-1,.cls-2{fill:#ffec00;}</style></defs><title>资源 9</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><text class="cls-1" transform="translate(14.02 9.6)">等待中</text><path class="cls-2" d="M5,1.33a5,5,0,1,0,5,5A5,5,0,0,0,5,1.33ZM7.37,6.74a.14.14,0,0,1-.13.13H2.68a.14.14,0,0,1-.13-.13v-.9a.12.12,0,0,1,0-.09.11.11,0,0,1,.09,0H7.24a.11.11,0,0,1,.09,0,.12.12,0,0,1,0,.09v.9Z"/></g></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 607 B

1
src/assets/images/monitorSelect/running.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.94 13.81"><defs><style>.cls-1{font-size:12px;font-family:Fontquan-XinYiGuanHeiTi-Regular, Fontquan-XinYiGuanHeiTi;}.cls-1,.cls-2{fill:#1890ff;}</style></defs><title>资源 8</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><text class="cls-1" transform="translate(14.34 9.6)">运行中</text><path class="cls-2" d="M5,1.3a5,5,0,1,1-5,5A5,5,0,0,1,5,1.3ZM2.62,5.2A2.71,2.71,0,0,0,6.23,8.81l-.7-.7A1.81,1.81,0,0,1,3.32,5.9ZM7,4.45A2.7,2.7,0,0,0,3.5,4.16l.65.65A1.8,1.8,0,0,1,6.62,7.28l.65.65A2.7,2.7,0,0,0,7,4.45Z"/></g></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 619 B

1
src/assets/images/monitorSelect/succeeded.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.62 13.81"><defs><style>.cls-1{font-size:12px;font-family:Fontquan-XinYiGuanHeiTi-Regular, Fontquan-XinYiGuanHeiTi;}.cls-1,.cls-2{fill:#1ee7e7;}</style></defs><title>资源 10</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><text class="cls-1" transform="translate(14.02 9.6)">已完成</text><path class="cls-2" d="M5,1.07a5,5,0,1,0,5,5A5,5,0,0,0,5,1.07ZM4,8.51,1.49,6l.7-.7L4,7.11,7.73,3.35l.7.7Z"/></g></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 507 B

12
src/views/monitorSelect/components/ComputeDomain.vue
View File

@ -28,18 +28,22 @@ export default {
.top{
display: flex;
justify-content: space-between;
padding: 5px 3%;
.img{
padding-left: 2%;
width: 25%;
// padding-left: 3%;
width: 102px;
height: 67px;
}
.text{
width: 70%;
width: 65%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.area{
font-size: 18px;
background-image: linear-gradient(0deg, #00C0FF 0%, #ffffff 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
padding-top: 5px;
}
span{
color: #DDDDDD;

84
src/views/monitorSelect/components/ComputingResourceLoad.vue
View File

@ -1,10 +1,9 @@
<!-- 计算资源负载 -->
<template>
<div id="myBarEchart" ref="myBarEchart" />
<div id="myBarEchart" ref="myBarEchart" style="width: 100%; height: 235px" />
</template>
<script>
import variables from '@/styles/variables.js'
import * as echarts from 'echarts'
import { getTotalAverage } from '@/api/top-menu/TotalNum'
import moment from 'moment'
@ -14,7 +13,7 @@ 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('MM月DD日')
day[i][1] = moment().subtract(7 - i, 'days').endOf('day').format('MMDD')
}
return {
day,
@ -75,13 +74,21 @@ export default {
// const legend = ['CPU整体负载', '内存整体负载', 'CPU平均负载']
chart.setOption({
legend: {
right: '0',
itemWidth: 15,
data: legend,
selectedMode: false, // 是否允许点击
textStyle: {
color: variables[this.jcceTheme].resourceColor1,
color: '#FFFFFF',
fontSize: 12
}
},
grid: {
right: '1%',
bottom: '18%',
top: '18%',
left: '15%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
@ -100,18 +107,24 @@ export default {
},
axisLabel: {
textStyle: {
color: '#999999'
color: 'rgba(221, 221, 221, 1)'
},
interval: 0,
rotate: -10,
padding: [0, 0, 0, -20],
margin: 14
},
axisLine: {
lineStyle: {
color: 'rgba(135, 189, 245, 0.01)'
}
}
},
yAxis: [
{
name: '',
axisLabel: {
textStyle: {
color: 'rgba(221, 221, 221, 1)'
},
formatter: '{value}'
},
splitLine: {
@ -123,17 +136,25 @@ export default {
color: '#DDDDDD'
}
},
splitNumber: 4,
position: 'left',
alignTicks: true
},
{
name: '',
axisLabel: {
textStyle: {
color: 'rgba(221, 221, 221, 1)'
},
formatter: '{value}'
},
position: 'right',
alignTicks: true,
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.1)'
}},
splitNumber: 4,
axisLine: {
lineStyle: {
color: '#999999'
@ -143,20 +164,6 @@ export default {
],
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',
@ -173,29 +180,15 @@ export default {
{
type: 'bar',
name: legend[0],
barWidth: '15',
barWidth: '10',
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)' }])
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(5, 155, 252, 0)' }, { offset: 1, color: 'rgba(5, 155, 252, 1)' }])
}
},
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,
@ -212,11 +205,12 @@ export default {
{
type: 'bar',
name: legend[1],
barWidth: '15',
barWidth: '10',
barGap: '80%',
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)' }])
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(5, 155, 252, 0)' }, { offset: 1, color: 'rgba(62, 223, 252, 1)' }])
}
},
data: this.ramLoad
@ -226,11 +220,10 @@ export default {
data: this.cpuAverage,
type: 'line',
yAxisIndex: 0,
showSymbol: false,
showSymbol: true,
lineStyle: {
color: '#27C391',
width: 1,
type: 'dashed'
width: 1
},
smooth: true
},
@ -239,11 +232,10 @@ export default {
data: this.ramAverage,
yAxisIndex: 0,
type: 'line',
showSymbol: false,
showSymbol: true,
lineStyle: {
color: '#3282CE',
width: 1,
type: 'dashed'
width: 1
},
smooth: true
}
@ -259,7 +251,5 @@ export default {
<style lang="scss" scoped>
#myBarEchart{
width: 100%;
height: 100%
}
</style>

44
src/views/monitorSelect/components/CumulativeTasks.vue
View File

@ -1,6 +1,12 @@
<template>
<div>
<dt-srcoll v-if="fresh" :new-data="dutyRateData" :menu-data="menuData" :line-height="5" :table-height="36" />
<el-row class="taskDiv">
<el-col v-for="(item,index) in taskDetail" :key="'task'+index" :span="8">
<div class="num">{{ item.num }}</div>
<div class="name">{{ item.name }}</div>
</el-col>
</el-row>
<dt-srcoll v-if="fresh" :new-data="dutyRateData" :menu-data="menuData" :line-height="4" :table-height="33" />
</div>
</template>
<script>
@ -17,6 +23,20 @@ export default {
},
data() {
return {
taskDetail: [
{
name: '运行任务合计',
num: '100'
},
{
name: '运行卡时数',
num: '100'
},
{
name: '运行时长',
num: '100'
}
],
menuData: [ // 表格内容
{
name: '名称',
@ -52,5 +72,27 @@ export default {
}
</script>
<style lang="scss" scoped>
.taskDiv{
display: flex;
justify-content: space-around;
text-align: center;
margin: 1% 0;
>div{
width: 30%;
.num{
font-size: 24px;
font-family: Impact;
color: #FFFFFF;
}
.name{
font-size: 14px;
font-weight: bold;
height: 70px;
line-height: 60px;
background: url('../../../assets/images/monitorSelect/task.png') no-repeat center;
background-size: auto 100%;
}
}
}
</style>

57
src/views/monitorSelect/components/Table.vue
View File

@ -1,57 +0,0 @@
<template>
<div>
<dt-srcoll v-if="fresh" :new-data="dutyRateData" :menu-data="menuData" :line-height="5" :table-height="36" />
</div>
</template>
<script>
import DtSrcoll from '../components/scroll'
export default {
components: {
DtSrcoll
},
props: {
data: {
type: Array,
default: () => []
}
},
data() {
return {
menuData: [ // 表格内容
{
name: '名称',
prop: 'name'
},
{
name: '状态',
prop: 'status'
},
{
name: '承接方',
prop: 'undertaker'
}
],
dutyRateData: [],
fresh: false
}
},
watch: {
data: {
handler(newValue, oldValue) {
this.fresh = false
this.dutyRateData = newValue
this.$nextTick(() => {
this.fresh = true
})
},
deep: true
}
}
}
</script>
<style lang="scss" scoped>
</style>

49
src/views/monitorSelect/components/scroll.vue
View File

@ -9,12 +9,12 @@
/>
<el-table-column label="状态" min-width="100" align="center">
<template slot-scope="scope">
<div v-if="scope.row.status=='pending'" class="pending" />
<div v-if="scope.row.status=='running'" class="running" />
<div v-if="scope.row.status=='pending'" class="pending">等待中</div>
<div v-if="scope.row.status=='running'" class="running">运行中</div>
<div
v-if="scope.row.status=='succeeded'||scope.row.status=='failed'||scope.row.status=='stopped'||scope.row.status=='unknown'"
class="other"
/>
>已完成</div>
</template>
</el-table-column>
<el-table-column :label="menuData[2].name" :prop="menuData[2].prop" min-width="150" align="left" :show-overflow-tooltip="true" />
@ -31,7 +31,7 @@ export default {
menuData: Array, // 表格行内容
lineHeight: { // 页面需要显示的行数
type: Number,
default: 5
default: 4
},
rowTime: { // 每一行滚动切换等待的时间（毫秒）
type: Number,
@ -43,7 +43,7 @@ export default {
},
tableHeight: { // 行高
type: Number,
default: 50
default: 33
},
isClear: { // 数据滚动到最后一行是否停止滚动
type: Boolean,
@ -118,7 +118,7 @@ export default {
transition: all 500ms linear;
background-color: transparent !important;
color: #fff;
font-size: 14px;
font-size: 12px;
overflow: hidden;
}
@ -135,6 +135,9 @@ export default {
background-color: transparent !important;
}
.el-table tr:nth-child(even) td{
background: rgba(35,185,255,0.06) !important;
}
.el-table--border,
.el-table--group {
border: 0px;
@ -157,8 +160,8 @@ export default {
.el-table__footer-wrapper,
.el-table__header-wrapper {
font-size: 16px;
background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 255, 0.2))
font-size: 12px;
background: rgba(35,185,255,0.12);
}
.el-table--scrollable-x .el-table__body-wrapper {
@ -213,27 +216,27 @@ export default {
}
.pending {
background-image: url("../../../assets/images/monitorSelect/pending.svg");
width: 100%;
height: 18px;
background-repeat: no-repeat;
background-size: 100% 100%;
width: 58px;
height: 17px;
line-height: 17px;
background: linear-gradient(90deg, #0BBAFB 0%, #4285EC 100%);
border-radius: 8px;
}
.running {
background-image: url("../../../assets/images/monitorSelect/running.svg");
width: 100%;
height: 18px;
background-repeat: no-repeat;
background-size: 100% 100%;
width: 58px;
height: 17px;
line-height: 17px;
background: linear-gradient(90deg, #0BBAFB 0%, #4285EC 100%);
border-radius: 8px;
}
.other {
background-image: url("../../../assets/images/monitorSelect/succeeded.svg");
width: 100%;
height: 18px;
background-repeat: no-repeat;
background-size: 100% 100%;
width: 58px;
height: 17px;
line-height: 17px;
background: linear-gradient(90deg, #0BBAFB 0%, #4285EC 100%);
border-radius: 8px;
}
}
</style>