forked from JointCloud/JCC-RIP
change layout
This commit is contained in:
ann
parent
54be303066
commit
0462617a02
|
|
@ -1,83 +1,207 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="monitor-select">
|
<div v-if="jcceTheme === 'jcceDark'">
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<div id="menuChoose">
|
<div id="menuChoose">
|
||||||
|
<a v-show="filteredDarkTab.length > 6" class="darkLeft" @click="changePage('left')">
|
||||||
|
<svg-icon icon-class="zuojiantou" />
|
||||||
|
</a>
|
||||||
<div id="drag-container">
|
<div id="drag-container">
|
||||||
<div id="spin-container">
|
<div id="spin-container">
|
||||||
<!-- <div class="box" style="transform: rotateY(57deg) translateZ(-800px);">
|
<div v-for="item in filteredDarkTab.slice((pageNum - 1) * pageSize, pageNum * pageSize)" :key="item.id" class="box" :style="{ 'transform': 'rotateY('+item.Y+'deg) translateZ(-800px)' }">
|
||||||
<svg-icon icon-class="rongqiguanli" />
|
<a @click="selectMonitor(item.path)">
|
||||||
容器管理
|
|
||||||
</div>
|
|
||||||
<div class="box" style="transform: rotateY(32deg) translateZ(-800px);">
|
|
||||||
<svg-icon icon-class="rongqiguanli" />
|
|
||||||
容器管理
|
|
||||||
</div>
|
|
||||||
<div class="box" style="transform: rotateY(-22deg) translateZ(-800px);">
|
|
||||||
<svg-icon icon-class="rongqiguanli" />
|
|
||||||
容器管理
|
|
||||||
</div>
|
|
||||||
<div class="box" style="transform: rotateY(-54deg) translateZ(-800px);">
|
|
||||||
<svg-icon icon-class="rongqiguanli" />
|
|
||||||
容器管理
|
|
||||||
</div> -->
|
|
||||||
<div class="box" style="transform: rotateY(57deg) translateZ(-800px);">
|
|
||||||
<a @click="selectMonitor('/cluster/clusterMapViews')">
|
|
||||||
<div class="inner-box">
|
<div class="inner-box">
|
||||||
<svg-icon icon-class="rongqiguanli" /> 容器管理
|
<svg-icon :icon-class="item.icon" /> {{ item.title }}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="box" style="transform: rotateY(34deg) translateZ(-800px);">
|
</div>
|
||||||
<a @click="selectMonitor('/virtual/overview')">
|
</div>
|
||||||
<div class="inner-box">
|
<a v-show="filteredDarkTab.length > 6" class="darkRight" @click="changePage('right')">
|
||||||
<svg-icon icon-class="xunijiguanlimokuai" /> 虚拟机管理
|
<svg-icon icon-class="youjiantou" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="monitor-select">
|
||||||
|
<Navbar />
|
||||||
|
<el-row>
|
||||||
|
<a v-show="filteredLightTab.length > 6" class="lightLeft" @click="changePage('left')">
|
||||||
|
<svg-icon icon-class="zuojiantou" />
|
||||||
|
</a>
|
||||||
|
<div class="div-block">
|
||||||
|
<div v-for="item in filteredLightTab.slice((pageNum - 1) * pageSize, pageNum * pageSize)" :key="item.id">
|
||||||
|
<a class="monitorSelectDiv" @click.prevent="selectMonitor(item.path)">
|
||||||
|
<div class="monitorSelectBtn">
|
||||||
|
<svg-icon :style="{'margin-top': filteredLightTab.length <6 ? '33vh' : '40vh'}" :icon-class="item.icon" />
|
||||||
|
<div>
|
||||||
|
<div class="selectTitle">{{ item.title }}</div>
|
||||||
|
<span v-if="filteredLightTab.length < 6">{{ item.description }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="box" style="transform:rotateY(11deg) translateZ(-800px)">
|
|
||||||
<a @click="selectMonitor('/functions/overview')">
|
|
||||||
<div class="inner-box">
|
|
||||||
<svg-icon icon-class="gongzuofuzai" /> 函数管理
|
|
||||||
</div>
|
</div>
|
||||||
|
<a v-show="filteredLightTab.length > 6" class="lightRight" @click="changePage('right')">
|
||||||
|
<svg-icon icon-class="youjiantou" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</el-row>
|
||||||
<div class="box" style="transform: rotateY(-12deg) translateZ(-800px)">
|
|
||||||
<a @click="selectMonitor('/blockChain/blockChainBrowser')">
|
|
||||||
<div class="inner-box">
|
|
||||||
<svg-icon icon-class="yunjijizhang" /> 云际记账
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="box" style="transform: rotateY(-35deg) translateZ(-800px)">
|
|
||||||
<div class="inner-box">
|
|
||||||
<svg-icon icon-class="xunijiguanli-juan" /> 存储管理
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="box" style="transform: rotateY(-58deg) translateZ(-800px)">
|
|
||||||
<div class="inner-box">
|
|
||||||
<svg-icon icon-class="yunweijiankongmokuai" /> 运维监控
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Navbar from '@/layout/components/Navbar'
|
import Navbar from '@/layout/components/Navbar'
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
export default {
|
export default {
|
||||||
name: 'MonitorSelect',
|
name: 'MonitorSelect',
|
||||||
components: { Navbar },
|
components: { Navbar },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
pageSize: 6,
|
||||||
|
pageNum: 1,
|
||||||
|
tabDarkList: [
|
||||||
|
{
|
||||||
|
id: 'cluster',
|
||||||
|
Y: 57,
|
||||||
|
title: '容器管理',
|
||||||
|
icon: 'rongqiguanli',
|
||||||
|
path: '/cluster/clusterMapViews'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'virtual',
|
||||||
|
Y: 34,
|
||||||
|
title: '虚拟机管理',
|
||||||
|
icon: 'xunijiguanlimokuai',
|
||||||
|
path: '/virtual/overview'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'functions',
|
||||||
|
Y: 11,
|
||||||
|
title: '函数管理',
|
||||||
|
icon: 'gongzuofuzai',
|
||||||
|
path: '/functions/overview'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'blockChain',
|
||||||
|
Y: -12,
|
||||||
|
title: '云际记账',
|
||||||
|
icon: 'yunjijizhang',
|
||||||
|
path: '/blockChain/blockChainBrowser'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'disk',
|
||||||
|
Y: -35,
|
||||||
|
title: '存储管理',
|
||||||
|
icon: 'xunijiguanli-juan',
|
||||||
|
path: '/disk'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'monitorManagement',
|
||||||
|
Y: -58,
|
||||||
|
title: '运维监控',
|
||||||
|
icon: 'yunweijiankongmokuai',
|
||||||
|
path: '/monitorManagement/warnList'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'hpc',
|
||||||
|
Y: 57,
|
||||||
|
title: '超算中心',
|
||||||
|
icon: 'fuwu',
|
||||||
|
path: '/hpc/hpcOverview'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tabLightList: [
|
||||||
|
{
|
||||||
|
id: 'cluster',
|
||||||
|
title: '容器管理',
|
||||||
|
icon: 'rongqiguanli',
|
||||||
|
description: '从容器维度中支持以跨云跨域多源异构方式，提供高性能可伸缩的容器应用管理服务。',
|
||||||
|
path: '/cluster/clusterMapViews'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'virtual',
|
||||||
|
title: '虚拟机管理',
|
||||||
|
icon: 'xunijiguanlimokuai',
|
||||||
|
description: '在虚拟机的控制台中管理属于主机或群集的单个虚拟机或一组虚拟机。',
|
||||||
|
path: '/virtual/overview'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'jccSchedule',
|
||||||
|
title: '调度中心',
|
||||||
|
icon: 'yunweijiankongmokuai',
|
||||||
|
description: '针对业务应用，设计多类型资源策略，实现标签话综合策略调度管理。',
|
||||||
|
path: '/jccSchedule/resourceLogicView'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'disk',
|
||||||
|
title: '云际存储',
|
||||||
|
icon: 'xunijiguanli-juan',
|
||||||
|
description: '以广域异构分布式存储服务，提供用户快捷、安全的数据管理。',
|
||||||
|
path: '/disk'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'functions',
|
||||||
|
title: '函数管理',
|
||||||
|
icon: 'fuwu',
|
||||||
|
description: '支持一个服务下对多个函数进行创建、编辑、运行，对函数运行全生命周期进行监控调度。',
|
||||||
|
path: '/functions/overview'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'blockChain',
|
||||||
|
title: '云际记账',
|
||||||
|
icon: 'yunjijizhang',
|
||||||
|
description: '基于区块链分布记账机制，以去中心化的方式对云际交易数据进行留痕存证。',
|
||||||
|
path: '/blockChain/blockChainBrowser'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'hpc',
|
||||||
|
title: '超算管理',
|
||||||
|
icon: 'fuwu',
|
||||||
|
description: '提供屏蔽资源异构的跨域调度超算服务，确保计算任务在各大超算节点的稳定运行。',
|
||||||
|
path: '/hpc/hpcOverview'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters([
|
||||||
|
'name',
|
||||||
|
'menus'
|
||||||
|
]),
|
||||||
|
jcceTheme() {
|
||||||
|
return localStorage.getItem('jcceTheme')
|
||||||
|
},
|
||||||
|
filteredDarkTab() {
|
||||||
|
return this.tabDarkList.filter(e => this.menus.includes(e.id))
|
||||||
|
},
|
||||||
|
filteredLightTab() {
|
||||||
|
return this.tabLightList.filter(e => this.menus.includes(e.id))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
changePage(type) {
|
||||||
|
if (type === 'left') {
|
||||||
|
this.pageNum = this.pageNum === 1 ? 1 : this.pageNum - 1
|
||||||
|
} else {
|
||||||
|
if (this.jcceTheme === 'jcceLight') {
|
||||||
|
this.pageNum = this.pageNum < (this.filteredLightTab.length / this.pageSize) ? this.pageNum + 1 : this.pageNum
|
||||||
|
} else {
|
||||||
|
this.pageNum = this.pageNum < (this.filteredDarkTab.length / this.pageSize) ? this.pageNum + 1 : this.pageNum
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getImg(src) {
|
||||||
|
const srcName = src === 'disk' || src === 'jccSchedule' ? 'blockChain' : src
|
||||||
|
return require('@/assets/img/' + srcName + '.png')
|
||||||
|
},
|
||||||
selectMonitor(monitor) {
|
selectMonitor(monitor) {
|
||||||
|
if (monitor === '/disk') {
|
||||||
|
if (this.name === 'admin') {
|
||||||
|
window.location.href = '/disk/storage/sourceSetting'
|
||||||
|
} else {
|
||||||
|
window.location.href = '/disk/storage/diskList'
|
||||||
|
}
|
||||||
|
}
|
||||||
this.$store.dispatch('user/setRouteType', monitor.split('/')[1])
|
this.$store.dispatch('user/setRouteType', monitor.split('/')[1])
|
||||||
this.$router.push({ path: monitor })
|
this.$router.push({ path: monitor })
|
||||||
}
|
}
|
||||||
|
|
@ -86,6 +210,90 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
.monitor-select{
|
||||||
|
height: 100%;
|
||||||
|
background: white url('../../assets/img/monitorSelect_bg.png') center no-repeat;
|
||||||
|
position: relative;
|
||||||
|
.navbar{
|
||||||
|
background-color: transparent;
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
z-index: 10;
|
||||||
|
.right-menu .avatar-container{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.selectBtn {
|
||||||
|
color: #454B53;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightLeft{
|
||||||
|
font-size: 90px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 45%;
|
||||||
|
z-index: 10;
|
||||||
|
color: #DDD;
|
||||||
|
}
|
||||||
|
.lightRight{
|
||||||
|
font-size: 90px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
top: 45%;
|
||||||
|
z-index: 10;
|
||||||
|
color: #DDD;
|
||||||
|
}
|
||||||
|
// display：flex 样式
|
||||||
|
.div-block{
|
||||||
|
display: flex;
|
||||||
|
.monitorSelectDiv{
|
||||||
|
display: block;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
> div{
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 20%;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #333333;
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
&:hover{
|
||||||
|
color: #ffffff;
|
||||||
|
background: #3182CE;
|
||||||
|
}
|
||||||
|
&::after{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 100vh;
|
||||||
|
background: #CCD9E0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
&:last-of-type a::after{
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
.svg-icon {
|
||||||
|
font-size: 100px;
|
||||||
|
margin: 36vh auto;
|
||||||
|
margin-bottom: 51px;
|
||||||
|
}
|
||||||
|
.selectTitle {
|
||||||
|
margin-bottom: 35px;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
display: block;
|
||||||
|
padding: 0 100px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#menuChoose{
|
#menuChoose{
|
||||||
width: 80%;
|
width: 80%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -95,6 +303,18 @@ export default {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
margin-top: -10%;
|
margin-top: -10%;
|
||||||
|
.darkLeft{
|
||||||
|
font-size: 90px;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
color: #6ECAFC;
|
||||||
|
}
|
||||||
|
.darkRight{
|
||||||
|
font-size: 90px;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
color: #6ECAFC;
|
||||||
|
}
|
||||||
#drag-container {
|
#drag-container {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
background: rgba(248, 0, 0, 0.075);
|
background: rgba(248, 0, 0, 0.075);
|
||||||
|
|
|
||||||
|
|
@ -1,40 +1,115 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="jcceTheme === 'jcceDark'">
|
<div class="monitor">
|
||||||
<Navbar />
|
<div class="top">
|
||||||
<div id="menuChoose">
|
<div class="weather">
|
||||||
<a v-show="filteredDarkTab.length > 6" class="darkLeft" @click="changePage('left')">
|
天气晴
|
||||||
<svg-icon icon-class="zuojiantou" />
|
|
||||||
</a>
|
|
||||||
<div id="drag-container">
|
|
||||||
<div id="spin-container">
|
|
||||||
<div v-for="item in filteredDarkTab.slice((pageNum - 1) * pageSize, pageNum * pageSize)" :key="item.id" class="box" :style="{ 'transform': 'rotateY('+item.Y+'deg) translateZ(-800px)' }">
|
|
||||||
<a @click="selectMonitor(item.path)">
|
|
||||||
<div class="inner-box">
|
|
||||||
<svg-icon :icon-class="item.icon" /> {{ item.title }}
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
<div class="time">
|
||||||
|
2023年2月22日
|
||||||
|
</div>
|
||||||
|
<h1>区域运维服务实时监控</h1>
|
||||||
|
</div>
|
||||||
|
<div class="floatLeft">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left_1">
|
||||||
|
<div class="title">服务器总数量</div>
|
||||||
|
<div class="left_12">{{ number }}</div>
|
||||||
|
<div class="left_22">
|
||||||
|
<div class="left_22_chart">
|
||||||
|
<PercentPieChart id="PercentPieChart" />
|
||||||
|
</div>
|
||||||
|
<div class="left_22_num">
|
||||||
|
<div class="left_22_title">
|
||||||
|
<span> 已部署 </span>
|
||||||
|
<span style="color: #23B9FF"> {{ usagedCount }} </span>
|
||||||
|
</div>
|
||||||
|
<ProgressChart id="progress1" color="#23B9FF" />
|
||||||
|
<div class="left_22_title">
|
||||||
|
<span> 未部署 </span>
|
||||||
|
<span> {{ usageingCount }} </span>
|
||||||
|
</div>
|
||||||
|
<ProgressChart1 id="progress2" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a v-show="filteredDarkTab.length > 6" class="darkRight" @click="changePage('right')">
|
<div class="left_2">
|
||||||
<svg-icon icon-class="youjiantou" />
|
<div class="title">告警通知</div>
|
||||||
</a>
|
<div class="warn">
|
||||||
|
<div class="warn_div">
|
||||||
|
<img class="warn_icon" src="@/assets/monitor/icon_11.png" alt="">
|
||||||
|
<div>
|
||||||
|
<div>紧急通知</div>
|
||||||
|
<span class="warn_num">12</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="monitor-select">
|
<div class="warn_div">
|
||||||
<Navbar />
|
<img class="warn_icon" src="@/assets/monitor/icon_12.png" alt="">
|
||||||
|
<div>
|
||||||
|
<div>重要通知</div>
|
||||||
|
<span class="warn_num">8</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="warn_div">
|
||||||
|
<img class="warn_icon" src="@/assets/monitor/icon_13.png" alt="">
|
||||||
|
<div>
|
||||||
|
<div>一般通知</div>
|
||||||
|
<span class="warn_num">5</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="warn_div">
|
||||||
|
<img class="warn_icon" src="@/assets/monitor/icon_14.png" alt="">
|
||||||
|
<div>
|
||||||
|
<div>待办事项</div>
|
||||||
|
<span class="warn_num">15</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="left_3">
|
||||||
|
<span class="title"> 整体总负载 </span>
|
||||||
|
<div class="cartDraw">
|
||||||
|
<TotalLoadChart id="loadChart" :data="dataBar" :data2="dataBar2" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="floatRight">
|
||||||
|
<div class="right">
|
||||||
|
<div class="right_1">
|
||||||
|
<div class="title">资源服务厂商占比</div>
|
||||||
|
<LeftPieChart id="bottomChart" />
|
||||||
|
</div>
|
||||||
|
<div class="right_2">
|
||||||
|
<span class="allGet">
|
||||||
|
<span class="title">计量计费</span>
|
||||||
|
<span>
|
||||||
|
<span class="num">{{ num }}</span>
|
||||||
|
元
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<TotalRevenueChart id="allGetChart" :data="dataBar" :data2="dataBar2" />
|
||||||
|
</div>
|
||||||
|
<div class="right_3">
|
||||||
|
<span class="title"> 平均使用情况 </span>
|
||||||
|
<div class="cartDraw">
|
||||||
|
<AverageChart id="averageChart" :data="dataList" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="fixedBottom">
|
||||||
<el-row>
|
<el-row>
|
||||||
<a v-show="filteredLightTab.length > 6" class="lightLeft" @click="changePage('left')">
|
<a v-show="filteredLightTab.length > 6" class="lightLeft" @click="changePage('left')">
|
||||||
<svg-icon icon-class="zuojiantou" />
|
<svg-icon icon-class="zuojiantou" />
|
||||||
</a>
|
</a>
|
||||||
<div class="div-block">
|
<div class="div-block">
|
||||||
<div v-for="item in filteredLightTab.slice((pageNum - 1) * pageSize, pageNum * pageSize)" :key="item.id">
|
<!-- <div class="block"></div> -->
|
||||||
|
<div v-for="item in filteredLightTab" :key="item.id">
|
||||||
<a class="monitorSelectDiv" @click.prevent="selectMonitor(item.path)">
|
<a class="monitorSelectDiv" @click.prevent="selectMonitor(item.path)">
|
||||||
<div class="monitorSelectBtn">
|
<div class="monitorSelectBtn">
|
||||||
<svg-icon :style="{'margin-top': filteredLightTab.length <6 ? '33vh' : '40vh'}" :icon-class="item.icon" />
|
<svg-icon :icon-class="item.icon" />
|
||||||
<div>
|
<div>
|
||||||
<div class="selectTitle">{{ item.title }}</div>
|
<div class="selectTitle">{{ item.title }}</div>
|
||||||
<span v-if="filteredLightTab.length < 6">{{ item.description }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -45,119 +120,193 @@
|
||||||
</a>
|
</a>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
|
<Earth />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Navbar from '@/layout/components/Navbar'
|
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
|
import ProgressChart from '@/views/prometheusMonitorNew/components/ProgressChart'
|
||||||
|
import ProgressChart1 from '@/views/prometheusMonitorNew/components/ProgressChart1'
|
||||||
|
import AverageChart from '@/views/prometheusMonitorNew/components/AverageChart'
|
||||||
|
import TotalLoadChart from '@/views/prometheusMonitorNew/components/TotalLoadChart'
|
||||||
|
import TotalRevenueChart from '@/views/prometheusMonitorNew/components/TotalRevenueChart'
|
||||||
|
import PercentPieChart from '@/views/prometheusMonitorNew/components/PercentPieChart'
|
||||||
|
import LeftPieChart from '@/views/prometheusMonitorNew/components/LeftPieChart'
|
||||||
|
import Earth from '@/views/prometheusMonitor/earth'
|
||||||
|
import { getTotalNum, getMeasure } from '@/api/top-menu/TotalNum'
|
||||||
|
// 获取七天前日期方法
|
||||||
|
function getDay(day) {
|
||||||
|
var today = new Date()
|
||||||
|
var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
|
||||||
|
today.setTime(targetday_milliseconds) // 注意，这行是关键代码
|
||||||
|
// var tYear = today.getFullYear()
|
||||||
|
var tMonth = today.getMonth()
|
||||||
|
var tDate = today.getDate()
|
||||||
|
tMonth = doHandleMonth(tMonth + 1)
|
||||||
|
tDate = doHandleMonth(tDate)
|
||||||
|
return tMonth + '/' + tDate
|
||||||
|
}
|
||||||
|
function doHandleMonth(month) {
|
||||||
|
var m = month
|
||||||
|
if (month.toString().length === 1) {
|
||||||
|
m = '0' + month
|
||||||
|
}
|
||||||
|
return m
|
||||||
|
}
|
||||||
export default {
|
export default {
|
||||||
name: 'MonitorSelect',
|
components: {
|
||||||
components: { Navbar },
|
ProgressChart,
|
||||||
|
ProgressChart1,
|
||||||
|
AverageChart,
|
||||||
|
TotalLoadChart,
|
||||||
|
TotalRevenueChart,
|
||||||
|
PercentPieChart,
|
||||||
|
LeftPieChart,
|
||||||
|
Earth
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
pageSize: 6,
|
|
||||||
pageNum: 1,
|
|
||||||
tabDarkList: [
|
|
||||||
{
|
|
||||||
id: 'cluster',
|
|
||||||
Y: 57,
|
|
||||||
title: '容器管理',
|
|
||||||
icon: 'rongqiguanli',
|
|
||||||
path: '/cluster/clusterMapViews'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'virtual',
|
|
||||||
Y: 34,
|
|
||||||
title: '虚拟机管理',
|
|
||||||
icon: 'xunijiguanlimokuai',
|
|
||||||
path: '/virtual/overview'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'functions',
|
|
||||||
Y: 11,
|
|
||||||
title: '函数管理',
|
|
||||||
icon: 'gongzuofuzai',
|
|
||||||
path: '/functions/overview'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'blockChain',
|
|
||||||
Y: -12,
|
|
||||||
title: '云际记账',
|
|
||||||
icon: 'yunjijizhang',
|
|
||||||
path: '/blockChain/blockChainBrowser'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'disk',
|
|
||||||
Y: -35,
|
|
||||||
title: '存储管理',
|
|
||||||
icon: 'xunijiguanli-juan',
|
|
||||||
path: '/disk'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'monitorManagement',
|
|
||||||
Y: -58,
|
|
||||||
title: '运维监控',
|
|
||||||
icon: 'yunweijiankongmokuai',
|
|
||||||
path: '/monitorManagement/warnList'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'hpc',
|
|
||||||
Y: 57,
|
|
||||||
title: '超算中心',
|
|
||||||
icon: 'fuwu',
|
|
||||||
path: '/hpc/hpcOverview'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
tabLightList: [
|
tabLightList: [
|
||||||
{
|
{
|
||||||
id: 'cluster',
|
id: 'cluster',
|
||||||
title: '容器管理',
|
title: '容器管理',
|
||||||
icon: 'rongqiguanli',
|
icon: 'rongqiguanli',
|
||||||
description: '从容器维度中支持以跨云跨域多源异构方式，提供高性能可伸缩的容器应用管理服务。',
|
|
||||||
path: '/cluster/clusterMapViews'
|
path: '/cluster/clusterMapViews'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'virtual',
|
id: 'virtual',
|
||||||
title: '虚拟机管理',
|
title: '虚拟机管理',
|
||||||
icon: 'xunijiguanlimokuai',
|
icon: 'xunijiguanlimokuai',
|
||||||
description: '在虚拟机的控制台中管理属于主机或群集的单个虚拟机或一组虚拟机。',
|
|
||||||
path: '/virtual/overview'
|
path: '/virtual/overview'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'jccSchedule',
|
id: 'jccSchedule',
|
||||||
title: '调度中心',
|
title: '调度中心',
|
||||||
icon: 'yunweijiankongmokuai',
|
icon: 'yunweijiankongmokuai',
|
||||||
description: '针对业务应用，设计多类型资源策略，实现标签话综合策略调度管理。',
|
|
||||||
path: '/jccSchedule/resourceLogicView'
|
path: '/jccSchedule/resourceLogicView'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'disk',
|
id: 'disk',
|
||||||
title: '云际存储',
|
title: '云际存储',
|
||||||
icon: 'xunijiguanli-juan',
|
icon: 'xunijiguanli-juan',
|
||||||
description: '以广域异构分布式存储服务，提供用户快捷、安全的数据管理。',
|
|
||||||
path: '/disk'
|
path: '/disk'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'functions',
|
id: 'functions',
|
||||||
title: '函数管理',
|
title: '函数管理',
|
||||||
icon: 'fuwu',
|
icon: 'fuwu',
|
||||||
description: '支持一个服务下对多个函数进行创建、编辑、运行，对函数运行全生命周期进行监控调度。',
|
|
||||||
path: '/functions/overview'
|
path: '/functions/overview'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'blockChain',
|
id: 'blockChain',
|
||||||
title: '云际记账',
|
title: '云际记账',
|
||||||
icon: 'yunjijizhang',
|
icon: 'yunjijizhang',
|
||||||
description: '基于区块链分布记账机制，以去中心化的方式对云际交易数据进行留痕存证。',
|
|
||||||
path: '/blockChain/blockChainBrowser'
|
path: '/blockChain/blockChainBrowser'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'hpc',
|
id: 'hpc',
|
||||||
title: '超算管理',
|
title: '超算管理',
|
||||||
icon: 'fuwu',
|
icon: 'fuwu',
|
||||||
description: '提供屏蔽资源异构的跨域调度超算服务，确保计算任务在各大超算节点的稳定运行。',
|
|
||||||
path: '/hpc/hpcOverview'
|
path: '/hpc/hpcOverview'
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
num: '2643.68',
|
||||||
|
number: 12345,
|
||||||
|
usagedCount: 12345,
|
||||||
|
usageingCount: 12345,
|
||||||
|
// 平均
|
||||||
|
dataList: [
|
||||||
|
{
|
||||||
|
name: '02/12'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/13'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/14'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/16'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/17'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/1'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
bottomList: [
|
||||||
|
{
|
||||||
|
name: 'UCloud',
|
||||||
|
value: '0.02'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '金山云',
|
||||||
|
value: '0.10'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '腾讯云',
|
||||||
|
value: '0.02'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '华为云',
|
||||||
|
value: '0.13'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '阿里云',
|
||||||
|
value: '0.10'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dataBar: [
|
||||||
|
{
|
||||||
|
name: '02/12'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/13'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/14'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/16'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/17'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/16'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 计量和整体
|
||||||
|
dataBar2: [
|
||||||
|
{
|
||||||
|
name: '02/12'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/13'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/14'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/16'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/17'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '02/17'
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -176,18 +325,26 @@ export default {
|
||||||
return this.tabLightList.filter(e => this.menus.includes(e.id))
|
return this.tabLightList.filter(e => this.menus.includes(e.id))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
beforeMount() {
|
||||||
|
this.getTotalNumber()
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const loading = this.$loading({
|
||||||
|
lock: true,
|
||||||
|
text: 'Loading',
|
||||||
|
spinner: 'el-icon-loading',
|
||||||
|
background: 'rgba(0, 0, 0, 0.7)'
|
||||||
|
})
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.close()
|
||||||
|
}, 1000)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
changePage(type) {
|
changePage(type) {
|
||||||
if (type === 'left') {
|
if (type === 'left') {
|
||||||
this.pageNum = this.pageNum === 1 ? 1 : this.pageNum - 1
|
// 滑动到最左
|
||||||
} else {
|
} else {
|
||||||
if (this.jcceTheme === 'jcceLight') {
|
// 滑到最右
|
||||||
this.pageNum = this.pageNum < (this.filteredLightTab.length / this.pageSize) ? this.pageNum + 1 : this.pageNum
|
|
||||||
} else {
|
|
||||||
this.pageNum = this.pageNum < (this.filteredDarkTab.length / this.pageSize) ? this.pageNum + 1 : this.pageNum
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getImg(src) {
|
getImg(src) {
|
||||||
|
|
@ -204,85 +361,256 @@ export default {
|
||||||
}
|
}
|
||||||
this.$store.dispatch('user/setRouteType', monitor.split('/')[1])
|
this.$store.dispatch('user/setRouteType', monitor.split('/')[1])
|
||||||
this.$router.push({ path: monitor })
|
this.$router.push({ path: monitor })
|
||||||
|
},
|
||||||
|
toRoot() {
|
||||||
|
this.$router.replace('/')
|
||||||
|
},
|
||||||
|
getTotalNumber() {
|
||||||
|
getTotalNum().then(res => {
|
||||||
|
this.number = res.data.deviceCount
|
||||||
|
this.usagedCount = res.data.usagedCount
|
||||||
|
this.usageingCount = res.data.usageingCount
|
||||||
|
})
|
||||||
|
const a = Math.round(new Date() / 1000)
|
||||||
|
// console.log(a)
|
||||||
|
const b = a - 604800
|
||||||
|
getMeasure(b, a, 86400).then(res => {
|
||||||
|
const demo1 = Number(res.results[1].data.result[0].fee)
|
||||||
|
const demo2 = Number(res.results[2].data.result[0].fee)
|
||||||
|
const demo3 = Number(res.results[3].data.result[0].fee)
|
||||||
|
const demo4 = Number(res.results[4].data.result[0].fee)
|
||||||
|
const demo = demo1 + demo2 + demo3 + demo4
|
||||||
|
this.num = demo.toFixed(2)
|
||||||
|
// const demo = res
|
||||||
|
// console.log(this.num)
|
||||||
|
const Day = []
|
||||||
|
for (let i = 0; i < 7; i++) {
|
||||||
|
Day[i] = getDay(i - 6)
|
||||||
}
|
}
|
||||||
|
this.dataBar2.name = Day
|
||||||
|
this.dataList.name = Day
|
||||||
|
this.dataBar.name = Day
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" >
|
<style lang="scss" >
|
||||||
.monitor-select{
|
@import "~@/styles/variables.scss";
|
||||||
height: 100%;
|
|
||||||
background: white url('../../assets/img/monitorSelect_bg.png') center no-repeat;
|
|
||||||
position: relative;
|
|
||||||
.navbar{
|
|
||||||
background-color: transparent;
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
z-index: 10;
|
|
||||||
.right-menu .avatar-container{
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
.selectBtn {
|
|
||||||
color: #454B53;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.lightLeft{
|
.back{
|
||||||
font-size: 90px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0px;
|
right: 12px;
|
||||||
top: 45%;
|
top: 22px;
|
||||||
|
color: #ddd;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.monitor {
|
||||||
|
background: url('../../assets/monitor/monitor_bg.jpeg') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
color: white;
|
||||||
|
font-family: 'SourceHanSansCN';
|
||||||
|
font-weight: 400;
|
||||||
|
.top {
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
padding: 2% 3.13%;
|
||||||
|
text-align: center;
|
||||||
|
color: #FEFCFC;
|
||||||
|
h1{
|
||||||
|
font-size: 40px;
|
||||||
|
margin:0;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.weather{
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.time{
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
color: #{$monitorColor};
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.floatLeft,.floatRight {
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
height: 90%;
|
||||||
|
padding: 0 3.13%;
|
||||||
|
.el-col{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
height: 100%;
|
||||||
|
padding-top: 3vh;
|
||||||
|
.left_1{
|
||||||
|
height: 34.6%;
|
||||||
|
.left_12{
|
||||||
|
font-size: 7vh;
|
||||||
|
font-family: Impact;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding-top: 1vh;
|
||||||
|
}
|
||||||
|
.left_22{
|
||||||
|
height: 14vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.left_22_chart{
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
.left_22_num{
|
||||||
|
width: 50%;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #D3D9D9;
|
||||||
|
.left_22_title{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 1.5vh 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left_2 {
|
||||||
|
height: 27.4%;
|
||||||
|
.warn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.warn_div{
|
||||||
|
display: flex;
|
||||||
|
width: 50%;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 2vh;
|
||||||
|
font-size: 16px;
|
||||||
|
justify-content: space-around;
|
||||||
|
> div{
|
||||||
|
margin: 0 4%;
|
||||||
|
}
|
||||||
|
.warn_icon{
|
||||||
|
width: 6vh;
|
||||||
|
height: 6vh;
|
||||||
|
}
|
||||||
|
.warn_num{
|
||||||
|
font-size: 24px;
|
||||||
|
font-family: Impact;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left_3 {
|
||||||
|
width: 100%;
|
||||||
|
height: 37.8%;
|
||||||
|
.cartDraw{
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
border-radius: 4px;
|
||||||
|
height: 100%;
|
||||||
|
padding-top: 9%;
|
||||||
|
.right_1{
|
||||||
|
height: 37%;
|
||||||
|
.allGet{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 18px;
|
||||||
|
color: white;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 400;
|
||||||
|
.num{
|
||||||
|
font-size: 36px;
|
||||||
|
color: #{$monitorColor};
|
||||||
|
font-family: Impact;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right_2{
|
||||||
|
height: 33%;
|
||||||
|
}
|
||||||
|
.right_3{
|
||||||
|
height: 27%;
|
||||||
|
}
|
||||||
|
.cartDraw {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.floatLeft{
|
||||||
|
left: 0;
|
||||||
|
width: 25vw;
|
||||||
|
}
|
||||||
|
.floatRight{
|
||||||
|
width: 25vw;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.fixedBottom {
|
||||||
|
width:50vw;
|
||||||
|
bottom: 0;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
height: 13vh;
|
||||||
|
left: 25vw;
|
||||||
|
.el-row{position:relative; height: 100%}
|
||||||
|
.lightLeft{
|
||||||
|
font-size: 30px;
|
||||||
|
position: absolute;
|
||||||
|
left: -20px;
|
||||||
|
top: 3vh;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
color: #DDD;
|
color: #DDD;
|
||||||
}
|
}
|
||||||
.lightRight{
|
.lightRight{
|
||||||
font-size: 90px;
|
font-size: 30px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0px;
|
right: -20px;
|
||||||
top: 45%;
|
top: 3vh;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
color: #DDD;
|
color: #DDD;
|
||||||
}
|
}
|
||||||
// display：flex 样式
|
// display：flex 样式
|
||||||
.div-block{
|
.div-block{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
.monitorSelectDiv{
|
.monitorSelectDiv{
|
||||||
display: block;
|
display: block;
|
||||||
height: 100vh;
|
height: 100%;
|
||||||
|
width: 8.33vw;
|
||||||
}
|
}
|
||||||
> div{
|
> div{
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 20%;
|
max-width: 8.5vw;
|
||||||
font-size: 24px;
|
font-size: 20px;
|
||||||
color: #333333;
|
color: #ffffff;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
&:hover{
|
&:hover{
|
||||||
color: #ffffff;
|
color: #3182CE;
|
||||||
background: #3182CE;
|
|
||||||
}
|
|
||||||
&::after{
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 100vh;
|
|
||||||
background: #CCD9E0;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
&:last-of-type a::after{
|
|
||||||
width: 0;
|
|
||||||
}
|
}
|
||||||
.svg-icon {
|
.svg-icon {
|
||||||
font-size: 100px;
|
font-size: 80px;
|
||||||
margin: 36vh auto;
|
margin: 0 auto;
|
||||||
margin-bottom: 51px;
|
|
||||||
}
|
}
|
||||||
.selectTitle {
|
.selectTitle {
|
||||||
margin-bottom: 35px;
|
margin-bottom: 24px;
|
||||||
font-size: 30px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
span{
|
span{
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -293,89 +621,9 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#menuChoose{
|
|
||||||
width: 80%;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
perspective: 1000px;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -10%;
|
|
||||||
.darkLeft{
|
|
||||||
font-size: 90px;
|
|
||||||
position: relative;
|
|
||||||
margin: auto;
|
|
||||||
color: #6ECAFC;
|
|
||||||
}
|
|
||||||
.darkRight{
|
|
||||||
font-size: 90px;
|
|
||||||
position: relative;
|
|
||||||
margin: auto;
|
|
||||||
color: #6ECAFC;
|
|
||||||
}
|
|
||||||
#drag-container {
|
|
||||||
width: 1200px;
|
|
||||||
background: rgba(248, 0, 0, 0.075);
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
margin: auto;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
background: url('../../assets/images/menubg.png') top no-repeat;
|
|
||||||
background-size: 130%;
|
|
||||||
.box {
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
border-bottom: 2px solid #6ECAFC;
|
|
||||||
-webkit-box-reflect: below 20px linear-gradient(transparent, transparent, #0005);
|
|
||||||
|
|
||||||
.inner-box{
|
|
||||||
width: 100%;
|
|
||||||
height: 98%;
|
|
||||||
line-height: 200px;
|
|
||||||
font-size: 30px;
|
|
||||||
text-align: center;
|
|
||||||
background: #1425389d ;
|
|
||||||
background-position: 200px -160px;
|
|
||||||
background-size: 70%;
|
|
||||||
border: 2px solid #6ECAFC;
|
|
||||||
border-radius: 20px;
|
|
||||||
&:hover {
|
|
||||||
box-shadow: 0 0 15px #6ECAFC;
|
|
||||||
-webkit-box-reflect: below 40px linear-gradient(transparent, transparent, #0007);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&::after{
|
|
||||||
content: url('../../assets/images/star.png');
|
|
||||||
position:absolute;
|
|
||||||
top: -88px;
|
|
||||||
left: 260px;
|
|
||||||
}
|
|
||||||
svg{
|
|
||||||
font-size: 150px;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
margin: 20% 0 -10%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#spin-container{
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
margin: auto;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
width: 300px;
|
|
||||||
height: 380px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes spinRevert {
|
|
||||||
from{
|
|
||||||
transform: rotateY(5deg);
|
|
||||||
} to{
|
|
||||||
transform: rotateY(15deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<style lang="less" rel="stylesheet/less">
|
||||||
|
@import "../../common/font/font.css";
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
<!-- 中国地图版本 -->
|
||||||
<template>
|
<template>
|
||||||
<div class="monitor">
|
<div class="monitor">
|
||||||
<div class="title" @click="toRoot">
|
<div class="title" @click="toRoot">
|
||||||
|
|
|
||||||
|
|
@ -60,8 +60,8 @@ module.exports = {
|
||||||
},
|
},
|
||||||
'^/jcc-': {
|
'^/jcc-': {
|
||||||
ws: false,
|
ws: false,
|
||||||
target: 'https://10.101.15.6/apis', /* 测试环境 */
|
// target: 'https://10.101.15.6/apis', /* 测试环境 */
|
||||||
// target: 'https://jointcloud.net/apis', /* 演示环境 */
|
target: 'https://jointcloud.net/apis', /* 演示环境 */
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
secure: false
|
secure: false
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue