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

restyle

This commit is contained in:
ann 2023-06-01 22:47:40 +08:00
parent 20e4110c50
commit 4514067674
9 changed files with 111 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/click-point.svg Normal file
View File

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="_层_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 36 38" style="enable-background:new 0 0 36 38;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:url(#形状_6_拷贝_3_2_);}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:url(#形状_6_拷贝_3_3_);}
</style>
<radialGradient id="SVGID_1_" cx="18.1244" cy="1032.4509" r="9.92" gradientTransform="matrix(1.8182 0 0 1.5085 -14.9171 -1535.1727)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFF76A;stop-opacity:0.5"/>
<stop offset="1" style="stop-color:#FFE66A;stop-opacity:0"/>
</radialGradient>
<ellipse class="st0" cx="18" cy="22.9" rx="18" ry="15.1"/>
<linearGradient id="形状_6_拷贝_3_2_" gradientUnits="userSpaceOnUse" x1="17.7698" y1="24.9024" x2="18.0223" y2="0.9229">
<stop offset="0.2549" style="stop-color:#FFD153"/>
<stop offset="1" style="stop-color:#FFD153;stop-opacity:0"/>
</linearGradient>
<path id="形状_6_拷贝_3" class="st1" d="M1.8,0L18,25L34.3,0"/>
<linearGradient id="形状_6_拷贝_3_3_" gradientUnits="userSpaceOnUse" x1="17.8853" y1="18.3956" x2="18.0265" y2="4.9804">
<stop offset="0.2644" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</linearGradient>
<path id="形状_6_拷贝_3_1_" class="st2" d="M8.9,4.5l9.1,14l9.1-14"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

13
public/point.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="_层_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 25.3 22" style="enable-background:new 0 0 25.3 22;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#形状_6_拷贝_3_1_);}
</style>
<linearGradient id="形状_6_拷贝_3_1_" gradientUnits="userSpaceOnUse" x1="12.4196" y1="21.8865" x2="12.6413" y2="0.822">
<stop offset="0.2441" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</linearGradient>
<path id="形状_6_拷贝_3" class="st0" d="M0,0l12.6,22L25.3,0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 802 B

BIN
src/assets/images/monitorSelect/btn-p.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/images/monitorSelect/btn.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/images/monitorSelect/dataBg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 51 KiB

BIN
src/assets/images/monitorSelect/total.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

55
src/views/monitorSelect/components/ComputingPowerTotal.vue
View File

@ -1,7 +1,6 @@
<template>
<!-- 算力中心总数 -->
<div>
<div class="one"> 算力中心总数（计算域）<span class="num">54</span></div>
<div class="two">
<div v-for="(item, index) in dataArray" :key="'data'+index">
<p class="title">{{ item.name }}</p>
@ -17,24 +16,16 @@ export default {
return {
dataArray: [
{
name: '已接入/待接入算力 POps@FP16',
value: '4674 / 2865'
name: '算力中心总数（计算域）',
value: 100
},
{
name: '已接入/待接入存储 PB',
value: '202 / 25'
},
{
name: '已接入CPU/GPU核数',
value: '1349'
name: '已接入算力 POps@FP16',
value: '4674'
},
{
name: '接入集群数',
value: '67'
},
{
name: '接入节点数',
value: '596'
}
]
}
@ -47,38 +38,32 @@ export default {
</script>
<style lang="scss" scoped>
.one{
background: url('../../../assets/images/monitorSelect/total.png') no-repeat left center;
background-size: 37px 37px;
padding-left: 60px;
padding-top: 5px;
height: 50px;
line-height: 30px;
font-weight: bold;
font-size: 1.13rem;
.num{
font-size: 2.25rem;
font-family: Impact;
font-weight: 400;
color: #3EDFFC;
}
}
.two{
display: flex;
justify-content: space-between;
text-align: center;
margin-top: 10px;
// text-align: center;
>div{
padding: 10px;
padding-top: 0;
background: url('../../../assets/images/monitorSelect/dataBg.png') no-repeat left;
background-size: auto 100%;
}
.title{
font-size: 0.75rem;
font-size: 1rem;
margin: 0.5rem;
margin-bottom: 0.3rem;
letter-spacing: 0.1rem;
color: #DDDDDD;
}
.num{
font-size: 1.5rem;
font-size: 1.8rem;
font-family: Impact;
font-weight: 400;
// padding-bottom: 5px;
text-align: center;
background: url('../../../assets/images/monitorSelect/dataBg.png') no-repeat center bottom;
background-size: 100% 55%;
// text-align: center;
text-indent: 130%;
display: inline-block;
padding: 0 15px 3px;
}

17
src/views/monitorSelect/index.vue
View File

@ -505,13 +505,12 @@ export default {
line-height: 2.5rem;
padding: 0 1.75rem;
vertical-align: baseline;
border-bottom: 1px solid #031C42;
margin-bottom: 0.625rem;
font-size: 1rem;
font-weight: 500;
position: absolute;
background: #02020a96;
box-shadow: 30px 0px 30px 0px #02020a96;
// background: #02020a96;
// box-shadow: 30px 0px 30px 0px #02020a96;
.top-title{
margin:0;
font-size: 1.88rem;
@ -531,11 +530,22 @@ export default {
}
.top-right{
float: right;
position: relative;
&:after{
content: '';
width: 100%;
height: 1px;
background: linear-gradient(-90deg, #163F7B 0%, #052862 100%);
position: absolute;
left: 0;
bottom: 0;
}
.menu{
font-size: 1.13rem;
a{
display: inline-block;
padding: 0.9rem 60px;
height: 4.5rem;
&:first-child{
background-image: url('../../assets/images/monitorSelect/left.png'),
url('../../assets/images/monitorSelect/right.png');
@ -543,6 +553,7 @@ export default {
background-position: left bottom, right top;
}
}
}
}

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

@ -2,28 +2,19 @@
<div>
<div id="earth" />
<transition name="el-zoom-in-bottom">
<div v-show="!globe&&cp" class="chinaDetail">
<el-button :class="activeTab === 'ys' ? 'active':''" @click="filterData('ys')"><svg-icon icon-class="ys" />云算中心 {{ yscount }}</el-button>
<el-button :class="activeTab === 'zs' ? 'active':''" @click="filterData('zs')"><svg-icon icon-class="zs" />智算中心 {{ zscount }}</el-button>
<el-button :class="activeTab === 'cs' ? 'active':''" @click="filterData('cs')"><svg-icon icon-class="cs" />超算中心 {{ cscount }}</el-button>
<el-button :class="activeTab === 'dsxs' ? 'active':''" @click="filterData('dsxs')"><svg-icon icon-class="dsxs" />东数西算 {{ dsxs.length }}</el-button>
<p v-for="(it,ind) in connectionStateMap" :key="ind"><svg-icon :icon-class="connectionStateSVG[ind]" />{{ it + ':' +connectionState[ind] }}</p>
<!-- <p v-for="(it,ind) in connectionStateMap" :key="ind"><span class="statusIcon" :class="'statusIcon-' + connectionStateSVG[ind]" />{{ it + ':' +connectionState[ind] }}</p> -->
</div>
</transition>
<transition name="el-zoom-in-bottom">
<div v-show="!globe&&!cp" class="chinaDetail">
<div v-show="!globe&&activeTab === 'net'" class="chinaDetail">
<p v-for="(it,ind) in networkMap" :key="ind"><svg-icon :icon-class="ind" />{{ it }}</p>
</div>
</transition>
<transition name="el-zoom-in-bottom">
<div v-show="!globe&&cp&&(activeTab === 'dsxs')" class="provinceDetail">
<div v-show="!globe&&activeTab === 'dsxs'" class="provinceDetail">
<province :map-type="mapType" :count="mapCount" />
</div>
</transition>
<div v-show="!globe" class="switchDataBtn">
<el-button :class="cp?'active':''" @click="switchData(true)">算力网</el-button>
<el-button :class="!cp?'active':''" @click="switchData(false)">新型网络</el-button>
<el-button :class="activeTab === 'cp'?'active':''" @click="switchData('cp')">算力网</el-button>
<el-button :class="activeTab === 'dsxs' ? 'active':''" @click="switchData('dsxs')">东数西算</el-button>
<el-button :class="activeTab === 'net' ? 'active':''" @click="switchData('net')">新型网络</el-button>
</div>
<a class="switchBtn toChina" :class="!globe?'activeBtn':''" @click="toChina"><svg-icon icon-class="china" /></a>
<a class="switchBtn" :class="globe?'activeBtn':''" @click="toWorld"><svg-icon icon-class="globe" /></a>
@ -98,26 +89,16 @@ export default {
'0': '智算',
'1': '超算'
},
zs: [],
ys: [],
cs: [],
dsxs: [],
zscount: 0,
yscount: 0,
cscount: 0,
connectionState: {
'1': 0,
'2': 0,
'3': 0
},
connectionStateSVG: {
'1': 'statusIng',
'2': 'statusUn',
'3': 'statusEnd'
},
worldMapTexture: undefined,
chinaMapTexture: undefined,
activeTab: 'zs',
activeTab: 'cp',
flyLineArray: []
}
},
@ -165,87 +146,46 @@ export default {
methods: {
getEarth() {
getEarthRegion().then(res => {
const zs = []
const cs = []
const ys = []
const dsxs = []
const mapMarks = []
this.zscount = 0
this.cscount = 0
this.yscount = 0
res.data.centers.forEach(ele => {
if (ele.area === '中国') {
if (ele.type === '云算资源' && ele.centerSource === 'nudt') {
this.yscount++
ys.push(ele)
} else {
if (ele.type === '超算资源') {
cs.push(ele)
this.cscount++
} else {
zs.push(ele)
this.zscount++
}
if (ele.type === '超算资源') {
cs.push(ele)
}
if (ele.name.indexOf('集群') > -1) {
dsxs.push(ele)
}
this.connectionState[ele.status]++
} else {
// if (ele.centerSource === '公有云') {
mapMarks.push(ele)
// }
}
})
this.zs = filterRepeatPoint(zs)
this.cs = filterRepeatPoint(cs)
this.ys = filterRepeatPoint(ys)
this.dsxs = filterRepeatPoint(dsxs)
this.mapMarks = filterRepeatPoint(mapMarks)
this.mapCount = {
ys: this.ys.filter(e => { return e.hubCode === this.mapType }).length,
zs: this.zs.filter(e => { return e.hubCode === this.mapType }).length,
cs: this.cs.filter(e => { return e.hubCode === this.mapType }).length
}
this.init()
})
},
filterData(type) {
switchData(type) {
if (type === this.activeTab) {
return false
}
if (this.activeTab !== 'dsxs') {
this.scene.getObjectByName(this.activeTab + 'Text').children.forEach(ele => {
this.scene.getObjectByName('csText').children.forEach(ele => {
ele.visible = false
})
}
this.activeTab = type
this.scene.getObjectByName('ys').visible = false
this.scene.getObjectByName('zs').visible = false
this.scene.getObjectByName('cs').visible = false
this.scene.getObjectByName('dsxs').visible = false
this.scene.getObjectByName(this.activeTab).visible = true
this.scene.getObjectByName('dsxs').visible = type === 'dsxs'
this.scene.getObjectByName('dsxsText').visible = type === 'dsxs'
},
switchData(type) {
if (type === this.cp) {
return false
}
if (this.activeTab !== 'dsxs') {
this.scene.getObjectByName(this.activeTab + 'Text').children.forEach(ele => {
ele.visible = false
})
} else {
// this.scene.getObjectByName(this.activeTab + 'Text')
}
this.activeTab = 'zs'
this.cp = !this.cp
this.scene.getObjectByName('cs').visible = type === 'cp'
this.scene.getObjectByName('earthLine').visible = false
this.scene.getObjectByName('point').visible = !this.cp
this.scene.getObjectByName('pointText').visible = !this.cp
this.scene.getObjectByName('pointLine').visible = !this.cp
this.scene.getObjectByName('zs').visible = this.cp
this.scene.getObjectByName('ys').visible = false
this.scene.getObjectByName('cs').visible = false
this.scene.getObjectByName('dsxs').visible = false
this.scene.getObjectByName('dsxsText').visible = false
this.scene.getObjectByName('point').visible = type === 'net'
this.scene.getObjectByName('pointText').visible = type === 'net'
this.scene.getObjectByName('pointLine').visible = type === 'net'
},
toWorld() {
if (this.globe === true) return false
@ -254,9 +194,7 @@ export default {
this.scene.getObjectByName('point').visible = false
this.scene.getObjectByName('pointText').visible = false
this.scene.getObjectByName('pointLine').visible = false
this.scene.getObjectByName('zs').visible = false
this.scene.getObjectByName('cs').visible = false
this.scene.getObjectByName('ys').visible = false
this.scene.getObjectByName('dsxs').visible = false
this.scene.getObjectByName('dsxsText').visible = false
var s = 140
@ -283,10 +221,9 @@ export default {
// this.scene.getObjectByName('globeAreaMark').visible = this.globe
this.scene.getObjectByName('globePoint').visible = this.globe
// this.scene.getObjectByName('globePointText').visible = this.globe
this.activeTab = 'zs'
this.activeTab = 'cp'
// this.scene.getObjectByName('zs').visible = !this.globe
this.camera.lookAt(this.scene.position)
this.cp = true
},
toChina() {
if (this.globe === false) return false
@ -300,7 +237,7 @@ export default {
this.zoomAnimate()
this.originPosition = this.camera.position
const tweenL1 = new TWEEN.Tween(
this.camera.position).to({ x: -300, y: 300, z: 1700 }, 1800)
this.camera.position).to({ x: -400, y: 500, z: 1700 }, 1800)
.easing(TWEEN.Easing.Sinusoidal.InOut)
const tweenL2 = new TWEEN.Tween(this.camera).to({ left: -s * this.k, right: s * this.k, top: s, bottom: -s }, 1000).easing(TWEEN.Easing.Sinusoidal.InOut)
const tweenL3 = new TWEEN.Tween(this.scene.getObjectByName('earth').material.color).to(new Three.Color(0x0a263e80), 1000).easing(TWEEN.Easing.Sinusoidal.InOut)
@ -310,7 +247,7 @@ export default {
this.scene.getObjectByName('earthLine').visible = false
this.scene.getObjectByName('earth').material.map = this.chinaMapTexture
this.scene.getObjectByName('chinaProvince').visible = true
this.scene.getObjectByName('zs').visible = true
this.scene.getObjectByName('cs').visible = true
})
// const tweenL4 = new TWEEN.Tween(this.scene.getObjectByName('chinaProvince').material.color).to(new Three.Color(0x0a263e80), 1000).easing(TWEEN.Easing.Sinusoidal.InOut)
// this.scene.getObjectByName('chinaProvince').children.forEach(ele => {
@ -336,8 +273,6 @@ export default {
this.scene.add(groupLines)
this.setAreaMark()
this.setDsxs(this.dsxs)
this.setCpPoint('ys')
this.setCpPoint('zs')
this.setCpPoint('cs')
this.setPointLine()
// this.setCpPoint('dsxs')
@ -373,13 +308,13 @@ export default {
var textureLoader = new Three.TextureLoader()
var mesh = new Three.Sprite(
new Three.SpriteMaterial({
map: textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/' + this.connectionStateSVG[ele.status.slice(0, 1)] + '.svg'),
map: textureLoader.load(process.env.VUE_APP_PUBLIC_SOURCE_API + '/point.svg'),
transparent: true,
depthWrite: false
})
)
mesh.scale.x = 1.2
mesh.scale.y = 1.8
mesh.scale.x = 2
mesh.scale.y = 1.5
mesh.center = new Three.Vector2(0.6, 0)
mesh.position.set(markPos.x, markPos.y, markPos.z)
let txt = { name: type === 'ys' ? ele.city : ele.name }
@ -681,7 +616,7 @@ export default {
},
initScene() {
this.scene = new Three.Scene()
this.scene.position.y -= 30
this.scene.position.y -= 20
},
initCamera() {
var s = 140 // 三维场景显示范围控制系数，系数越大，显示的范围越大
@ -926,34 +861,27 @@ export default {
// var vector = new Three.Vector3(mouse.x, mouse.y, 0.5).unproject(this.camera)
if (this.camera && this.scene) {
this.raycaster.setFromCamera(this.mouse, this.camera)
const arr = this.scene.getObjectByName('zs').children.concat(this.scene.getObjectByName('cs').children).concat(this.scene.getObjectByName('ys').children).concat(this.scene.getObjectByName('dsxs').children)
const arr = this.scene.getObjectByName('cs').children.concat(this.scene.getObjectByName('dsxs').children)
var intersects = this.raycaster.intersectObjects(arr, true)
if (this.activeTab !== 'dsxs') {
if (intersects.length) {
this.scene.getObjectByName('ysText').visible = false
this.scene.getObjectByName('csText').visible = false
this.scene.getObjectByName('zsText').visible = false
// this.scene.getObjectByName('dsxsText').visible = false
if (this.cp === true) {
this.scene.getObjectByName(this.activeTab + 'Text').visible = true
if (this.activeTab === 'cp') {
this.scene.getObjectByName('csText').visible = true
// markPos.x - 1, markPos.y - 0.5, markPos.z - 2
this.scene.getObjectByName(this.activeTab + 'Text').children.forEach(ele => {
this.scene.getObjectByName('csText').children.forEach(ele => {
ele.visible = intersects[0].object.name === ele.name
})
}
} else {
this.scene.getObjectByName(this.activeTab + 'Text').children.forEach(ele => {
ele.visible = false
this.scene.getObjectByName('dsxsText').children.forEach(ele => {
ele.visible = true
})
}
} else {
if (intersects.length && intersects.filter(e => { return e.object.parent.name === 'dsxs' }).length > 0) {
this.mapType = intersects.filter(e => { return e.object.parent.name === 'dsxs' })[0].object.name
this.mapCount = {
ys: this.ys.filter(e => { return e.hubCode === this.mapType }).length,
zs: this.zs.filter(e => { return e.hubCode === this.mapType }).length,
cs: this.cs.filter(e => { return e.hubCode === this.mapType }).length
}
}
}
}
@ -1086,15 +1014,15 @@ export default {
<style lang="scss" scoped>
.switchBtn {
font-size: 1.5rem;
font-size: 2.5rem;
position: absolute;
bottom: 50px;
right: 29.5vw;
bottom: 7vh;
right: 30vw;
z-index: 100;
color: #fff;
}
.toChina{
right: 32vw;
bottom: 3vh;
}
.activeBtn{
color: #3EDFFC
@ -1140,8 +1068,8 @@ export default {
}
.switchDataBtn{
position: absolute;
bottom: 2vh;
right: 40vw;
bottom: 3vh;
right: 35vw;
.el-button,.el-button + .el-button{
width: 10vw;
margin-bottom: 5px;