forked from JointCloud/JCC-RIP
change layout
This commit is contained in:
ann
parent
54be303066
commit
0462617a02
|
|
@ -1,83 +1,207 @@
|
|||
<template>
|
||||
<div class="monitor-select">
|
||||
<div v-if="jcceTheme === 'jcceDark'">
|
||||
<Navbar />
|
||||
<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="spin-container">
|
||||
<!-- <div class="box" style="transform: rotateY(57deg) translateZ(-800px);">
|
||||
<svg-icon icon-class="rongqiguanli" />
|
||||
容器管理
|
||||
</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 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="rongqiguanli" /> 容器管理
|
||||
<svg-icon :icon-class="item.icon" /> {{ item.title }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="box" style="transform: rotateY(34deg) translateZ(-800px);">
|
||||
<a @click="selectMonitor('/virtual/overview')">
|
||||
<div class="inner-box">
|
||||
<svg-icon icon-class="xunijiguanlimokuai" /> 虚拟机管理
|
||||
</div>
|
||||
</a>
|
||||
</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>
|
||||
</a>
|
||||
</div>
|
||||
<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>
|
||||
<a v-show="filteredDarkTab.length > 6" class="darkRight" @click="changePage('right')">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a v-show="filteredLightTab.length > 6" class="lightRight" @click="changePage('right')">
|
||||
<svg-icon icon-class="youjiantou" />
|
||||
</a>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from '@/layout/components/Navbar'
|
||||
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
name: 'MonitorSelect',
|
||||
components: { Navbar },
|
||||
data() {
|
||||
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() {
|
||||
},
|
||||
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) {
|
||||
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.$router.push({ path: monitor })
|
||||
}
|
||||
|
|
@ -86,6 +210,90 @@ export default {
|
|||
</script>
|
||||
|
||||
<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{
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
|
|
@ -95,6 +303,18 @@ export default {
|
|||
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);
|
||||
|
|
|
|||
|
|
@ -1,163 +1,312 @@
|
|||
<template>
|
||||
<div v-if="jcceTheme === 'jcceDark'">
|
||||
<Navbar />
|
||||
<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="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 class="monitor">
|
||||
<div class="top">
|
||||
<div class="weather">
|
||||
天气晴
|
||||
</div>
|
||||
<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 class="left_2">
|
||||
<div class="title">告警通知</div>
|
||||
<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 class="warn_div">
|
||||
<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>
|
||||
<a v-show="filteredLightTab.length > 6" class="lightLeft" @click="changePage('left')">
|
||||
<svg-icon icon-class="zuojiantou" />
|
||||
</a>
|
||||
<div class="div-block">
|
||||
<!-- <div class="block"></div> -->
|
||||
<div v-for="item in filteredLightTab" :key="item.id">
|
||||
<a class="monitorSelectDiv" @click.prevent="selectMonitor(item.path)">
|
||||
<div class="monitorSelectBtn">
|
||||
<svg-icon :icon-class="item.icon" />
|
||||
<div>
|
||||
<div class="selectTitle">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a v-show="filteredDarkTab.length > 6" class="darkRight" @click="changePage('right')">
|
||||
<svg-icon icon-class="youjiantou" />
|
||||
</a>
|
||||
<a v-show="filteredLightTab.length > 6" class="lightRight" @click="changePage('right')">
|
||||
<svg-icon icon-class="youjiantou" />
|
||||
</a>
|
||||
</el-row>
|
||||
</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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a v-show="filteredLightTab.length > 6" class="lightRight" @click="changePage('right')">
|
||||
<svg-icon icon-class="youjiantou" />
|
||||
</a>
|
||||
</el-row>
|
||||
<Earth />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from '@/layout/components/Navbar'
|
||||
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 {
|
||||
name: 'MonitorSelect',
|
||||
components: { Navbar },
|
||||
components: {
|
||||
ProgressChart,
|
||||
ProgressChart1,
|
||||
AverageChart,
|
||||
TotalLoadChart,
|
||||
TotalRevenueChart,
|
||||
PercentPieChart,
|
||||
LeftPieChart,
|
||||
Earth
|
||||
},
|
||||
data() {
|
||||
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'
|
||||
}
|
||||
],
|
||||
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))
|
||||
}
|
||||
},
|
||||
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: {
|
||||
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) {
|
||||
|
|
@ -204,178 +361,269 @@ export default {
|
|||
}
|
||||
this.$store.dispatch('user/setRouteType', monitor.split('/')[1])
|
||||
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>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
<style lang="scss" >
|
||||
@import "~@/styles/variables.scss";
|
||||
|
||||
.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{
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
perspective: 1000px;
|
||||
width: 100%;
|
||||
.back{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -10%;
|
||||
.darkLeft{
|
||||
font-size: 90px;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
color: #6ECAFC;
|
||||
right: 12px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.darkRight{
|
||||
font-size: 90px;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
color: #6ECAFC;
|
||||
.title{
|
||||
color: #{$monitorColor};
|
||||
font-size: 24px;
|
||||
}
|
||||
#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;
|
||||
.floatLeft,.floatRight {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
height: 90%;
|
||||
padding: 0 3.13%;
|
||||
.el-col{
|
||||
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);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&::after{
|
||||
content: url('../../assets/images/star.png');
|
||||
position:absolute;
|
||||
top: -88px;
|
||||
left: 260px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
svg{
|
||||
font-size: 150px;
|
||||
display: block;
|
||||
.left_3 {
|
||||
width: 100%;
|
||||
margin: 20% 0 -10%;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
#spin-container{
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin: auto;
|
||||
transform-style: preserve-3d;
|
||||
width: 300px;
|
||||
height: 380px;
|
||||
.floatLeft{
|
||||
left: 0;
|
||||
width: 25vw;
|
||||
}
|
||||
}
|
||||
@keyframes spinRevert {
|
||||
from{
|
||||
transform: rotateY(5deg);
|
||||
} to{
|
||||
transform: rotateY(15deg);
|
||||
.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;
|
||||
color: #DDD;
|
||||
}
|
||||
.lightRight{
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 3vh;
|
||||
z-index: 10;
|
||||
color: #DDD;
|
||||
}
|
||||
// display：flex 样式
|
||||
.div-block{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.monitorSelectDiv{
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 8.33vw;
|
||||
}
|
||||
> div{
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 8.5vw;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
&:hover{
|
||||
color: #3182CE;
|
||||
}
|
||||
.svg-icon {
|
||||
font-size: 80px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.selectTitle {
|
||||
margin-bottom: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
span{
|
||||
display: block;
|
||||
padding: 0 100px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" rel="stylesheet/less">
|
||||
@import "../../common/font/font.css";
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
<!-- 中国地图版本 -->
|
||||
<template>
|
||||
<div class="monitor">
|
||||
<div class="title" @click="toRoot">
|
||||
|
|
|
|||
|
|
@ -60,8 +60,8 @@ module.exports = {
|
|||
},
|
||||
'^/jcc-': {
|
||||
ws: false,
|
||||
target: 'https://10.101.15.6/apis', /* 测试环境 */
|
||||
// target: 'https://jointcloud.net/apis', /* 演示环境 */
|
||||
// target: 'https://10.101.15.6/apis', /* 测试环境 */
|
||||
target: 'https://jointcloud.net/apis', /* 演示环境 */
|
||||
changeOrigin: true,
|
||||
secure: false
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue