change layout

This commit is contained in:
ann 2023-02-22 17:28:01 +08:00
parent 54be303066
commit 0462617a02
4 changed files with 787 additions and 318 deletions

View File

@ -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;
}
// displayflex
.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);

View File

@ -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;
} }
// displayflex // displayflex
.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;
@ -292,90 +620,10 @@ 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>

View File

@ -1,3 +1,4 @@
<!-- 中国地图版本 -->
<template> <template>
<div class="monitor"> <div class="monitor">
<div class="title" @click="toRoot"> <div class="title" @click="toRoot">

View File

@ -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
}, },