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

大屏接口

This commit is contained in:
李亮 2022-02-28 16:19:36 +08:00
parent 0251b0871d
commit 6ae94da982
7 changed files with 204 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/api/screen -one-class-page/TotalNum.js Normal file
View File

@ -0,0 +1,120 @@
// 大屏云厂商服务器数量查询接口
import request from '@/utils/request'
export function getTotalName() {
return request({
url: process.env.VUE_APP_BASE_API + '/function/device/queryByManufacturer',
method: 'get',
data: JSON,
headers: {
'Content-Type': 'application/json'
}
})
}
// 大屏服务器数量统计接口
export function getTotalNum() {
return request({
url: process.env.VUE_APP_BASE_API + '/function/device/queryDeviceCount',
method: 'get',
data: JSON,
headers: {
'Content-Type': 'application/json'
}
})
}
// 大屏地球地区查询接口
export function getEarthRegion() {
return request({
url: process.env.VUE_APP_BASE_API + '/function/device/queryByArea',
method: 'get',
data: JSON,
headers: {
'Content-Type': 'application/json'
}
})
}
// 大屏地球各个区域服务器资源详细接口
export function getEarthDetails(area) {
return request({
url: process.env.VUE_APP_BASE_API + '/function/device/queryResDetailByArea?area=' + area,
method: 'get',
data: JSON,
headers: {
'Content-Type': 'application/json'
}
})
}
// CPU平均使用率接口
export function getCpuAverage(start, end, step) {
return request({
url: process.env.VUE_APP_BASE_API + '/monitoringscreen/api/v1/query_range?query=avg(1%20-%20avg(rate(node_cpu_seconds_total%7Borigin_prometheus%3D~%22%22%2Cjob%3D~%22node-exporter%22%2Cmode%3D%22idle%22%7D%5B2m%5D))%20by%20(instance))%20*%20100' + '&start=' + start + '&end=' + end + '&step=' + step + '&_=1642578431700',
method: 'get',
data: JSON,
headers: {
'Content-Type': 'application/json'
}
})
}
// 内存平均使用率接口
export function getRamAverage(start, end, step) {
return request({
url: process.env.VUE_APP_BASE_API + '/monitoringscreen/api/v1/query_range?query=(sum(node_memory_MemTotal_bytes%7Borigin_prometheus%3D~%22%22%2Cjob%3D~%22node-exporter%22%7D%20-%20node_memory_MemAvailable_bytes%7Borigin_prometheus%3D~%22%22%2Cjob%3D~%22node-exporter%22%7D)%20%2F%20sum(node_memory_MemTotal_bytes%7Borigin_prometheus%3D~%22%22%2Cjob%3D~%22node-exporter%22%7D))*100' + '&start=' + start + '&end=' + end + '&step=' + step + '&_=1642578431700',
method: 'get',
data: JSON,
headers: {
'Content-Type': 'application/json'
}
})
}
// 计量计费接口总价格
export function getMeasure(start, end, step) {
return request({
url: process.env.VUE_APP_BASE_API + '/kapis/clusters/fedjcce-ten002/metering.kubesphere.io/v1alpha1/cluster' + '?start=' + start + '&end=' + end + '&step=' + step + 's&metrics_filter=meter_cluster_cpu_usage%7Cmeter_cluster_memory_usage%7Cmeter_cluster_net_bytes_transmitted%7Cmeter_cluster_net_bytes_received%7Cmeter_cluster_pvc_bytes_total&resources_filter=fedjcce-ten002',
method: 'get',
data: JSON,
headers: {
'Content-Type': 'application/json'
}
})
}
// 内存整体负载接口
export function getRamLoad(start, end, step) {
return request({
url: process.env.VUE_APP_BASE_API + '/monitoringscreen/api/v1/query_range?query=sum(node_memory_MemTotal_bytes%7Borigin_prometheus%3D~%22%22%2Cjob%3D~%22node-exporter%22%7D%20-%20node_memory_MemAvailable_bytes%7Borigin_prometheus%3D~%22%22%2Cjob%3D~%22node-exporter%22%7D)&start=' + start + '&end=' + end + '&step=' + step + '&_=1642669327729',
method: 'get',
data: JSON,
headers: {
'Content-Type': 'application/json'
}
})
}
// 计量计费列表接口
export function getMeteringList(start, end, step) {
return request({
url: process.env.VUE_APP_BASE_API + '/kapis/clusters/fedjcce-ten002/metering.kubesphere.io/v1alpha1/cluster' + '?start=' + start + '&end=' + end + '&step=' + step + 's&metrics_filter=meter_cluster_cpu_usage%7Cmeter_cluster_memory_usage%7Cmeter_cluster_net_bytes_transmitted%7Cmeter_cluster_net_bytes_received%7Cmeter_cluster_pvc_bytes_total&resources_filter=fedjcce-ten002',
method: 'get',
data: JSON,
headers: {
'Content-Type': 'application/json'
}
})
}
// CPU整体负载接口
export function getCpuAllload(start, end) {
return request({
url: process.env.VUE_APP_BASE_API + '/monitoringscreen/api/v1/query_range?query=node_load15%7Binstance%3D~%22jcc-txy-001%22%7D&start=' + start + '&end=' + end + '&step=900&_=1645409802467',
method: 'get',
data: JSON,
headers: {
'Content-Type': 'application/json'
}
})
}

BIN
src/assets/monitor/bottom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/assets/monitor/two_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/assets/monitor/two_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

16
src/router/index.js
View File

@ -1,6 +1,5 @@
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
@ -10,7 +9,6 @@ import podRouter from './modules/pod'
import virtualMachineRouter from './modules/virtualMachine'
import blockChainRouter from './modules/blockChain'
import functionsRouter from './modules/functions'
import costStatisticsRouter from './modules/costStatistics'
/* Router Modules */
// import componentsRouter from './modules/components'
// import chartsRouter from './modules/charts'
@ -43,6 +41,7 @@ import costStatisticsRouter from './modules/costStatistics'
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [
{
path: '/redirect',
@ -106,16 +105,15 @@ export const constantRoutes = [
component: () => import('@/views/prometheusMonitor/index'),
hidden: true
},
// {
// path: '/prometheusMonitorNew',
// component: () => import('@/views/prometheusMonitorNew/index'),
// hidden: true
// },
{
path: '/prometheusMonitorNew',
component: () => import('@/views/prometheusMonitorNew/index'),
hidden: true
},
podRouter,
virtualMachineRouter,
blockChainRouter,
functionsRouter,
costStatisticsRouter
functionsRouter
// {
// path: '/prometheus',
// component: Layout,

92
src/views/prometheusMonitor/earth.vue
View File

@ -4,33 +4,23 @@
<script>
import * as Three from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { getEarthRegion } from '@/api/screen -one-class-page/TotalNum'
import { getEarthDetails } from '@/api/screen -one-class-page/TotalNum'
export default {
data() {
return {
mshs: 1.0,
satellitesArr: [],
mapMarks: [
{
value: [116.423784, 39.876303],
name: '北京',
count: 1637
},
{
value: [120.161360422694918, 30.25886728953814],
name: '杭州',
count: 1328
},
{ name: '东京', value: [139.766037, 35.724993], count: 615 },
{ name: '新加坡', value: [103.865254, 1.35353], count: 5 },
{ name: '孟买', value: [72.841576, 19.017378], count: 5 },
{ name: '伦敦', value: [-0.138681, 51.529409], count: 11 },
{ name: '迪拜', value: [55.331252, 25.290169], count: 2 }
]
mapMarks: [],
area: []
}
},
mounted() {
this.getEarth()
// this.date_trans()
this.$nextTick(() => {
setTimeout(() => {
this.$nextTick(() => {
// this.drawBarchart()
// this.chinaConfigure()
// this.load_average()
@ -38,11 +28,40 @@ export default {
// this.memory_total()
// this.memory_average()
// this.resource_used()
this.init()
this.init()
// this.animate()
})
})
}, 1000)
},
methods: {
getEarth() {
getEarthRegion().then(res => {
const demo = res.data
const that = this
// console.log(demo)
for (let i = 0; i < demo.length; i++) {
const modelItem = []
const value = []
modelItem['name'] = demo[i].area
modelItem['count'] = demo[i].areaCount
value[0] = demo[i].value[0]
value[1] = demo[i].value[1]
modelItem['value'] = value
that.mapMarks[i] = modelItem
}
// console.log(that.mapMarks)
})
getEarthDetails('杭州').then(res => {
const demo = res.data
const that = this
that.area['resourceArea'] = demo.resourceArea
that.area['userNum'] = demo.userNum
that.area['areaCount'] = demo.areaCount
that.area['clusterNum'] = demo.clusterNum
that.area['usagedRate'] = demo.usagedRate
console.log(that.area)
})
},
init() {
const earth = document.getElementById('earth')
@ -134,7 +153,7 @@ export default {
// this.scene.add(this.mesh4)
// this.scene.add(this.mesh5)
this.setMark(this.mapMarks)
this.setAreaMark()
this.setAreaMark(this.area)
this.renderer.setSize(width, height)// 设置渲染区域尺寸
// this.renderer.setClearColor(0x03060f, 1) // 设置背景颜色
earth.appendChild(this.renderer.domElement)
@ -213,7 +232,7 @@ export default {
context.stroke()
return canvas
},
setAreaMark() {
setAreaMark(_area) {
const borderSize = 2
const ctx = document.createElement('canvas').getContext('2d')
// measure how long the name will be
@ -230,11 +249,11 @@ export default {
ctx.strokeStyle = '#008aff'
ctx.strokeRect(0, 0, width, 580)
ctx.fillStyle = 'white'
ctx.fillText('资源区域：亚太1区', borderSize * 30, borderSize * 20)
ctx.fillText('活跃用户：1574', borderSize * 30, borderSize * 20 + 100)
ctx.fillText('服务器数量：3580', borderSize * 30, borderSize * 20 + 200)
ctx.fillText('集群数量：284', borderSize * 30, borderSize * 20 + 300)
ctx.fillText('资源使用率：50%', borderSize * 30, borderSize * 20 + 400)
ctx.fillText('资源区域: ' + _area.resourceArea, borderSize * 30, borderSize * 20)
ctx.fillText('活跃用户: ' + _area.userNum, borderSize * 30, borderSize * 20 + 100)
ctx.fillText('服务器数量: ' + _area.areaCount, borderSize * 30, borderSize * 20 + 200)
ctx.fillText('集群数量: ' + _area.clusterNum, borderSize * 30, borderSize * 20 + 300)
ctx.fillText('资源使用率: ' + _area.usagedRate, borderSize * 30, borderSize * 20 + 400)
const markPos = this.getPosition(130.21029 + 90, 23.527138, 100)
var texture = new Three.CanvasTexture(ctx.canvas)
@ -284,14 +303,17 @@ export default {
this.marking.add(mesh)
// text
// console.log(typeof (_markData[i].name + '：' + _markData[i].count + '个'))
var texture = new Three.CanvasTexture(this.getCanvasFont(_markData[i].name + '：' + _markData[i].count + '个'))
// console.log(_markData[i].count.toString().length)
const fontNumber = _markData[i].count.toString().length * 5.8642578125 + _markData[i].name.length * 10 + 10 + 2.4072265625 + 5
texture.needsUpdate = true
var fontMesh = new Three.Sprite(
new Three.SpriteMaterial({
map: texture
})
)
fontMesh.scale.x = 40
fontMesh.scale.x = fontNumber
fontMesh.scale.y = 10
fontMesh.position.set(markPos.x + 10, markPos.y + 10, markPos.z - 20)
this.textMarking.add(fontMesh)
@ -304,19 +326,25 @@ export default {
const ctx = document.createElement('canvas').getContext('2d')
// measure how long the name will be
const doubleBorderSize = borderSize * 2
const width = (ctx.measureText(name).width + doubleBorderSize) * 10
const width = (ctx.measureText(name).width + doubleBorderSize * 2) * 11
ctx.canvas.width = width
// ctx.canvas.height = height
// ctx.canvas.height = hei ght
// need to set font again after resizing canvas
ctx.textBaseline = 'top'
ctx.font = '80px Arial'
ctx.font = '85px Arial'
ctx.lineWidth = 15
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
ctx.fillRect(0, 0, width, 150)
ctx.strokeStyle = '#00ffd2'
ctx.strokeRect(0, 0, width, 150)
ctx.fillStyle = 'white'
ctx.fillText(name, borderSize * 30, borderSize * 20)
console.log(ctx.measureText(name).width)
if (ctx.measureText(name).width > 540) {
ctx.fillText(name, borderSize * 80, borderSize * 20)
} else {
ctx.fillText(name, borderSize * 60, borderSize * 20)
}
return ctx.canvas
},
getPosition(_longitude, _latitude, _radius) {

18
vue.config.js
View File

@ -61,6 +61,13 @@ module.exports = {
// target: 'http://39.103.233.49:30881/', /* BJ-Member2 */
// changeOrigin: true,
},
'^/dockerhub/api/': {
target: 'http://119.45.100.73:30880/'
// pathRewrite: {
// '^/dockerhub': '/api'
// },
// secure: false
},
'^/prom': {
ws: false,
target: 'http://119.3.157.144:9090/', /* KubeX */
@ -76,8 +83,9 @@ module.exports = {
},
'^/api/': {
ws: false,
changeOrigin: true,
// target: 'http://10.105.20.4:30766'
target: 'https://jointcloud.net/prod-api/'/* Host */
// changeOrigin: true,
},
'^/apis/': {
ws: false,
@ -99,6 +107,11 @@ module.exports = {
ws: true,
changeOrigin: true,
target: 'ws://jointcloud.net/prod-api/' /* Host */
},
'/monitoringscreen/': {
ws: true,
changeOrigin: true,
target: 'https://jointcloud.net' /* Host */
}
}
// before: require('./mock/mock-server.js')
@ -111,6 +124,9 @@ module.exports = {
alias: {
'@': resolve('src')
}
},
module: {
unknownContextCritical: false
}
},
chainWebpack(config) {