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

annzee

This commit is contained in:
Bruce-Stark 2021-04-17 19:54:49 +08:00
parent 1ce657bce8
commit c6422ebdd6
9 changed files with 21292 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21047
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
src/components/FormData/index.js
View File

@ -9,7 +9,7 @@ export const FormData = {
const res = []
for (const k in e) {
res.push(<td>{this.dataMap[e[k]]}</td>)
res.push(<td>{this.data[e[k]]}</td>)
res.push(<td>{this.data[e[k] || '-']}</td>)
}
return res
}

6
src/layout/components/AppMain.vue
View File

@ -1,9 +1,11 @@
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<router-view :key="key" />
{{ $route.meta.keepAlive }}
<keep-alive v-if="$route.meta.keepAlive">
<router-view :include="cachedViews" />
</keep-alive>
<router-view v-else :key="key" :include="cachedViews" />
</transition>
</section>
</template>

28
src/router/index.js
View File

@ -100,17 +100,29 @@ export const constantRoutes = [
meta: { title: '节点管理', icon: 'el-icon-s-management', affix: true }
},
{
path: '/nodeManagement/:name/status',
path: '/nodeManagement/:name',
component: () => import('@/views/nodeManagement/detail'),
name: 'nodeManagementDetail',
meta: { activeMenu: '/nodeManagement' },
hidden: true
// children: [
// {
// path:'/status',
// component: () => import('@/views/nodeManagement/status'),
// }
// ]
hidden: true,
children: [
{
path: 'status',
component: () => import('@/views/nodeManagement/status'),
meta: { activeMenu: '/nodeManagement', keepAlive: true }
},
{
path: 'pods',
component: () => import('@/views/nodeManagement/pods'),
meta: { activeMenu: '/nodeManagement', keepAlive: true }
},
{
path: 'monitors',
component: () => import('@/views/nodeManagement/monitors'),
meta: { activeMenu: '/nodeManagement', keepAlive: true }
}
]
}
]
},

20
src/views/nodeManagement/detail.vue
View File

@ -4,7 +4,7 @@
<el-page-header content="详情" @back="goBack" />
<h2>{{ $route.params.name }}</h2>
<FormData :data="formData" :data-map="dataMap" />
<el-tabs v-model="activeName">
<el-tabs v-model="activeName" @tab-click="switchTab">
<el-tab-pane key="status" label="运行状态" />
<el-tab-pane key="pods" label="容器组" />
<el-tab-pane key="monitors" label="监控" />
@ -48,14 +48,30 @@ export default {
structure: '系统架构',
createTime: '创建时间'
},
activeName: ''
activeName: '',
tabList: {
'0': 'status',
'1': 'pods',
'2': 'monitors'
}
}
},
created() {
for (const i in Object.keys(this.tabList)) {
if (this.$route.path.split('/')[3] === this.tabList[i]) {
this.activeName = i
}
}
},
methods: {
goBack() {
this.$router.go(-1)
},
switchTab(e) {
const tab = this.tabList[e.index]
if (this.$route.path.indexOf(tab) === -1) {
this.$router.push(tab)
}
}
}

109
src/views/nodeManagement/monitors.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<div>
<div id="myEchart" ref="myEchart" style="width:1000px; height:600px" />
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
interval: '',
second: 0
}
},
created() {
this.$nextTick(() => {
this.dynamicData()
})
},
methods: {
randomData() {
this.second += 1
const value = Math.random() * 21
return {
name: `${this.second}s`,
value: [
`${this.second}s`,
Math.round(value)
]
}
},
dynamicData() {
const data = []
for (let i = 0; i < 10; i += 1) {
data.push(this.randomData())
}
const option = {
title: {
text: '动态数据'
},
tooltip: {
trigger: 'axis',
// formatter: function (params) {
// params = params[0];
// var date = new Date(params.name);
// return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear()
// + ' : ' + params.value[1];
// },
axisPointer: {
animation: false
}
},
xAxis: {
type: 'category',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data
}]
}
// const myChart = echarts.init(this.$refs.myEchart);
// window.onresize = myChart.resize;
// myChart.setOption(
// option);
let flag = false
const myChart = echarts.init(this.$refs.myEchart, 'dark')
this.interval = setInterval(() => {
for (let i = 0; i < 5; i += 1) {
// data.shift();
data.push(this.randomData())
}
this.percentage += 10
myChart.setOption(option)
if (flag === false) {
flag = true
setTimeout(() => {
clearInterval(this.interval)
}, 9000)// 停止
}
}, 1000) // 启动,func不能使用括号
},
beforeDestroy() {
clearInterval(this.interval)
}
}
}
</script>
<style lang="scss" scoped>
</style>

15
src/views/nodeManagement/pods.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div>
ddd
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>

89
src/views/nodeManagement/status.vue
View File

@ -1,15 +1,100 @@
<template>
<div>
11111
<h5>
资源使用状态
</h5>
<FormData :column="4" :data="formData" :data-map="dataMap" />
<div id="lineChart" ref="lineChart" />
<h5>
已分配资源
</h5>
<FormData :column="4" :data="formData1" :data-map="dataMap1" />
<h5>健康状态</h5>
</div>
</template>
<script>
import { FormData } from '@/components/FormData'
import * as echarts from 'echarts'
export default {
components: { FormData },
data() {
return {
dataMap: {
cpuUsage: 'CPU 使用率',
storageUsage: '内存使用率',
podUsage: '容器组用量',
localStorage: '本地存储用量'
},
formData: {
cpuUsage: '4.18%',
storageUsage: '32.3%',
podUsage: '15.45%',
localStorage: '34.22%'
},
dataMap1: {
cpuUsage: 'CPU 请求',
storageUsage: 'CPU 限制',
podUsage: '内存请求',
localStorage: '内存限制'
},
formData1: {
cpuUsage: '0.787 Core (39%)',
storageUsage: '10.4 Core (520%)',
podUsage: '1.225 Gi (31%)',
localStorage: '20.857 Gi (543%)'
},
lineChartOption: {
title: {
subtext: 'CPU使用率'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [
'09:57:32',
'10:06:32',
'10:15:32',
'10:24:32',
'10:33:32',
'10:42:32',
'10:57:32'
]
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}%'
}
},
series: [
{
name: 'CPU使用率',
type: 'line',
data: [10, 11, 13, 11, 12, 12, 9]
}
]
}
}
},
mounted() {
this.$nextTick(() => {
const lineChart = echarts.init(this.$refs.lineChart, 'dark')
lineChart.setOption(this.lineChartOption)
})
}
}
</script>
<style lang="scss" scoped>
#lineChart{
width:100%;
height: 200px;
}
</style>

16
yarn.lock
View File

@ -4628,7 +4628,7 @@
"resolved" "https://registry.npm.taobao.org/etag/download/etag-1.8.1.tgz"
"version" "1.8.1"
"eve@git://github.com/adobe-webplatform/eve.git#eef80ed":
"eve@eve@git://github.com/adobe-webplatform/eve.git#eef80ed":
"resolved" "git+ssh://git@github.com/adobe-webplatform/eve.git#eef80ed8d188423c2272746fb8ae5cc8dad84cb1"
"event-pubsub@4.3.0":
@ -9687,10 +9687,10 @@
"resolved" "https://registry.npm.taobao.org/range-parser/download/range-parser-1.2.1.tgz"
"version" "1.2.1"
"raphael@git+https://github.com/nhn/raphael.git#2.2.0-c":
"raphael@raphael@git+https://github.com/nhn/raphael.git#2.2.0-c":
"resolved" "git+ssh://git@github.com/nhn/raphael.git#78a6ed3ec269f33b6457b0ec66f8c3d1f2ed70e0"
dependencies:
"eve" "git://github.com/adobe-webplatform/eve.git#eef80ed"
"eve" "eve@git://github.com/adobe-webplatform/eve.git#eef80ed"
"raw-body@2.4.0":
"integrity" "sha1-oc5vucm8NWylLoklarWQWeE9AzI="
@ -10739,7 +10739,7 @@
"resolved" "https://registry.npm.taobao.org/sprintf-js/download/sprintf-js-1.0.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsprintf-js%2Fdownload%2Fsprintf-js-1.0.3.tgz"
"version" "1.0.3"
"squire-rte@github:sohee-lee7/Squire#b1e0e1031fa18912d233c204cbe7c7fae4a42621":
"squire-rte@squire-rte@github:sohee-lee7/Squire#b1e0e1031fa18912d233c204cbe7c7fae4a42621":
"resolved" "git+ssh://git@github.com/sohee-lee7/Squire.git#b1e0e1031fa18912d233c204cbe7c7fae4a42621"
"ssf@~0.10.2":
@ -11305,8 +11305,8 @@
"neo-async" "^2.6.0"
"three@^0.126.1":
"integrity" "sha1-z05OUgYP2VL28NVEDL1CLGa8S+c="
"resolved" "https://registry.npm.taobao.org/three/download/three-0.126.1.tgz?cache=0&sync_timestamp=1614766698919&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthree%2Fdownload%2Fthree-0.126.1.tgz"
"integrity" "sha512-eOEXnZeE1FDV0XgL1u08auIP13jxdN9LQBAEmlErYzMxtIIfuGIAZbijOyookALUhqVzVOx0Tywj6n192VM+nQ=="
"resolved" "https://registry.npmjs.org/three/-/three-0.126.1.tgz"
"version" "0.126.1"
"throat@^4.0.0":
@ -11532,7 +11532,7 @@
"version" "3.11.2"
dependencies:
"core-js" "^3.6.4"
"raphael" "git+https://github.com/nhn/raphael.git#2.2.0-c"
"raphael" "raphael@git+https://github.com/nhn/raphael.git#2.2.0-c"
"tui-code-snippet" "^2.3.1"
"tui-code-snippet@^1.5.0":
@ -11571,7 +11571,7 @@
"markdown-it" "^8.4.0"
"plantuml-encoder" "^1.2.5"
"resize-observer-polyfill" "^1.5.0"
"squire-rte" "github:sohee-lee7/Squire#b1e0e1031fa18912d233c204cbe7c7fae4a42621"
"squire-rte" "squire-rte@github:sohee-lee7/Squire#b1e0e1031fa18912d233c204cbe7c7fae4a42621"
"to-mark" "^1.1.4"
"tui-chart" "^3.0.1"
"tui-code-snippet" "^1.5.0"