forked from JointCloud/JCC-RIP
code private
This commit is contained in:
ann
parent
de861272af
commit
2791a5d01d
Binary file not shown.
|
Before Width: | Height: | Size: 9.1 MiB |
BIN
public/earth.png
BIN
public/earth.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 MiB |
BIN
public/light.png
BIN
public/light.png
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
BIN
public/point.png
BIN
public/point.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
|
|
@ -1,382 +0,0 @@
|
|||
<template>
|
||||
<div class="monitor">
|
||||
<a class="back" @click.prevent="toRoot"> <i class="el-icon-back" /> 返回 </a>
|
||||
<div class="top">区域运维服务实时监控</div>
|
||||
<div class="floatLeft" :span="4">
|
||||
<div class="left">
|
||||
<div class="left_1">
|
||||
<div class="left_11">服务器总数量</div>
|
||||
<div class="left_12">3152326</div>
|
||||
</div>
|
||||
<div class="left_2">
|
||||
<div>
|
||||
<span> 已使用设备资源 </span>
|
||||
<span class="pangmen"> 65% </span>
|
||||
</div>
|
||||
<div class="pangmen" style="font-size: 24px">2124153</div>
|
||||
<div><ProgressChart id="progress1" /></div>
|
||||
<div>
|
||||
<span> 未使用设备资源 </span>
|
||||
<span class="pangmen"> 35% </span>
|
||||
</div>
|
||||
<div class="pangmen" style="font-size: 24px">1098173</div>
|
||||
<div><ProgressChart id="progress2" /></div>
|
||||
</div>
|
||||
<div class="left_3">
|
||||
<div>
|
||||
<img class="info_icon" src="@/assets/monitor/icon_11.png" alt="">
|
||||
<span>紧急通知</span>
|
||||
<span class="info_num">12</span>
|
||||
</div>
|
||||
<div>
|
||||
<img class="info_icon" src="@/assets/monitor/icon_12.png" alt="">
|
||||
<span>重要通知</span>
|
||||
<span class="info_num">8</span>
|
||||
</div>
|
||||
<div>
|
||||
<img class="info_icon" src="@/assets/monitor/icon_13.png" alt="">
|
||||
<span>一般通知</span>
|
||||
<span class="info_num">5</span>
|
||||
</div>
|
||||
<div>
|
||||
<img class="info_icon" src="@/assets/monitor/icon_14.png" alt="">
|
||||
<span>待办事项</span>
|
||||
<span class="info_num">15</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_4">
|
||||
<LeftBottomChart id="bottomChart" :data="bottomList" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :span="7" class="floatRight">
|
||||
<div class="right">
|
||||
<div class="right_1">
|
||||
<span class="allGet">
|
||||
<span class="title">总营收</span>
|
||||
<span>
|
||||
<span class="num">13523.52</span>
|
||||
元
|
||||
</span>
|
||||
</span>
|
||||
<TotalRevenueChart id="allGetChart" :data="dataBar" :data2="dataBar2" />
|
||||
</div>
|
||||
<div class="right_2">
|
||||
<span class="title"> 整体总负载 </span>
|
||||
<div class="cartDraw">
|
||||
<TotalLoadChart id="loadChart" :data="dataBar" :data2="dataBar2" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_3">
|
||||
<span class="title"> 平均使用情况 </span>
|
||||
<div class="cartDraw">
|
||||
<AverageChart id="averageChart" :data="dataList" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Earth />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProgressChart from './components/ProgressChart'
|
||||
import LeftBottomChart from './components/LeftBottomChart'
|
||||
import AverageChart from './components/AverageChart'
|
||||
import TotalLoadChart from './components/TotalLoadChart'
|
||||
import TotalRevenueChart from './components/TotalRevenueChart'
|
||||
import Earth from '../prometheusMonitor/earth'
|
||||
export default {
|
||||
components: {
|
||||
ProgressChart,
|
||||
LeftBottomChart,
|
||||
AverageChart,
|
||||
TotalLoadChart,
|
||||
TotalRevenueChart,
|
||||
Earth
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [
|
||||
{
|
||||
name: '09/01',
|
||||
value: '80'
|
||||
},
|
||||
{
|
||||
name: '09/02',
|
||||
value: '100'
|
||||
},
|
||||
{
|
||||
name: '09/03',
|
||||
value: '40'
|
||||
},
|
||||
{
|
||||
name: '09/04',
|
||||
value: '20'
|
||||
},
|
||||
{
|
||||
name: '09/05',
|
||||
value: '80'
|
||||
},
|
||||
{
|
||||
name: '09/06',
|
||||
value: '70'
|
||||
},
|
||||
{
|
||||
name: '09/07',
|
||||
value: '30'
|
||||
}
|
||||
],
|
||||
bottomList: [
|
||||
{
|
||||
name: 'UCloud',
|
||||
value: '0.02'
|
||||
},
|
||||
{
|
||||
name: '金山云',
|
||||
value: '0.10'
|
||||
},
|
||||
{
|
||||
name: '腾讯云',
|
||||
value: '0.02'
|
||||
},
|
||||
{
|
||||
name: '华为云',
|
||||
value: '0.13'
|
||||
},
|
||||
{
|
||||
name: '阿里云',
|
||||
value: '0.10'
|
||||
}
|
||||
],
|
||||
dataBar: [
|
||||
{
|
||||
name: '09/01',
|
||||
value: '80'
|
||||
},
|
||||
{
|
||||
name: '09/02',
|
||||
value: '100'
|
||||
},
|
||||
{
|
||||
name: '09/03',
|
||||
value: '40'
|
||||
},
|
||||
{
|
||||
name: '09/04',
|
||||
value: '20'
|
||||
},
|
||||
{
|
||||
name: '09/05',
|
||||
value: '80'
|
||||
},
|
||||
{
|
||||
name: '09/06',
|
||||
value: '70'
|
||||
},
|
||||
{
|
||||
name: '09/07',
|
||||
value: '30'
|
||||
}
|
||||
],
|
||||
dataBar2: [
|
||||
{
|
||||
name: '09/01',
|
||||
value: '20'
|
||||
},
|
||||
{
|
||||
name: '09/02',
|
||||
value: '50'
|
||||
},
|
||||
{
|
||||
name: '09/03',
|
||||
value: '60'
|
||||
},
|
||||
{
|
||||
name: '09/04',
|
||||
value: '20'
|
||||
},
|
||||
{
|
||||
name: '09/05',
|
||||
value: '80'
|
||||
},
|
||||
{
|
||||
name: '09/06',
|
||||
value: '60'
|
||||
},
|
||||
{
|
||||
name: '09/07',
|
||||
value: '30'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
setTimeout(() => {
|
||||
loading.close()
|
||||
}, 3000)
|
||||
},
|
||||
methods: {
|
||||
toRoot() {
|
||||
this.$router.replace('/')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.back{
|
||||
position: absolute;
|
||||
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';
|
||||
.top {
|
||||
height: 10%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 0 3.13%;
|
||||
font-size: 48px;
|
||||
font-weight: 400;
|
||||
color: #FEFCFC;
|
||||
}
|
||||
.floatLeft,.floatRight {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
height: 90%;
|
||||
padding: 0 3.13%;
|
||||
.el-col{
|
||||
height: 100%;
|
||||
}
|
||||
.left {
|
||||
height: 100%;
|
||||
padding-top: 18%;
|
||||
.left_1{
|
||||
height: 16%;
|
||||
.left_11{
|
||||
font-size: 30px;
|
||||
color: #51FFFF;
|
||||
}
|
||||
.left_12{
|
||||
font-size: 35px;
|
||||
padding: 14px 10px 8px 10px;
|
||||
margin: 20px 0;
|
||||
color: #51FFFF;
|
||||
text-align: center;
|
||||
font-family: 'DISPLAY FREE TFB';
|
||||
background:
|
||||
linear-gradient(to top, #51FFFF, #51FFFF) left top no-repeat,/*上左*/
|
||||
linear-gradient(to right, #51FFFF, #51FFFF) left top no-repeat,/*左上*/
|
||||
linear-gradient(to left, #51FFFF, #51FFFF) right top no-repeat,/*上右*/
|
||||
linear-gradient(to bottom, #51FFFF, #51FFFF) right top no-repeat,/*上右*/
|
||||
linear-gradient(to left, #51FFFF, #51FFFF) left bottom no-repeat,/*下左*/
|
||||
linear-gradient(to bottom, #51FFFF, #51FFFF) left bottom no-repeat,/*左下*/
|
||||
linear-gradient(to top, #51FFFF, #51FFFF) right bottom no-repeat,/*下右*/
|
||||
linear-gradient(to left, #51FFFF, #51FFFF) right bottom no-repeat;/*右下*/
|
||||
background-size: 1px 10px, 10px 1px, 1px 10px, 10px 1px;
|
||||
background-color: #0B2436;
|
||||
}
|
||||
}
|
||||
.left_2 {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 10px 5px 5px;
|
||||
}
|
||||
}
|
||||
.left_3 {
|
||||
height: 33%;
|
||||
padding: 0 10px 0;
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.info_icon{
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
margin: 5px;
|
||||
}
|
||||
.info_num{
|
||||
font-size: 30px;
|
||||
font-family: 'PangMenZhengDao';
|
||||
}
|
||||
}
|
||||
}
|
||||
.left_4 {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
}
|
||||
.pangmen{
|
||||
font-family: 'PangMenZhengDao';
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
.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: #51FFFF;
|
||||
font-family: 'DISPLAY FREE TFB';
|
||||
}
|
||||
}
|
||||
}
|
||||
.right_2{
|
||||
height: 33%;
|
||||
}
|
||||
.right_3{
|
||||
height: 27%;
|
||||
}
|
||||
.cartDraw {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
}
|
||||
.title{
|
||||
color: #51FFFF;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.floatLeft{
|
||||
left: 0;
|
||||
width: 25%;
|
||||
}
|
||||
.floatRight{
|
||||
width: 30%;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" rel="stylesheet/less">
|
||||
@import "../../common/font/font.css";
|
||||
</style>
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
<template>
|
||||
<div :id="id" :ref="id" style="width: 100%;height: 100%;" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
this.drawChart()
|
||||
},
|
||||
methods: {
|
||||
drawChart() {
|
||||
const textStyle = {
|
||||
color: '#999999',
|
||||
fontFamily: 'SourceHanSansCN',
|
||||
fontSize: '14'
|
||||
}
|
||||
const legendStyle = {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
}
|
||||
// 平均使用情况
|
||||
const averageChart = echarts.init(this.$refs.averageChart)
|
||||
const averageOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
x: 'right',
|
||||
textStyle: legendStyle
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '5%',
|
||||
top: '8%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
name: 'x',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: textStyle,
|
||||
interval: 0
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
// 网格线
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.data.map(n => n.name)
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'log',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: textStyle
|
||||
},
|
||||
// 网格线
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'CPU使用情况',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
color: {
|
||||
type: 'linear',
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#51FFFF'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [1, 3, 247, 27, 81, 5, 741, 2223, 6669]
|
||||
},
|
||||
{
|
||||
name: '内存使用情况',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#419EFF'
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
|
||||
}
|
||||
]
|
||||
}
|
||||
averageChart.setOption(averageOption)
|
||||
window.addEventListener('resize', function() {
|
||||
averageChart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
<template>
|
||||
<div :id="id" :ref="id" style="width: 100%;height: 90%;" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
this.drawChart()
|
||||
},
|
||||
methods: {
|
||||
drawChart() {
|
||||
// 左侧下方折线图
|
||||
const bottomChart = echarts.init(this.$refs.bottomChart)
|
||||
const bottomOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: '5%',
|
||||
top: 0,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
color: 'white'
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: this.data.map(n => n.name)
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'name',
|
||||
type: 'line',
|
||||
smooth: true, // 是否平滑曲线显示
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
color: {
|
||||
type: 'linear',
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#51FFFF' // 100% 处的颜色
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(81,255,255,0.4)'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
data: this.data
|
||||
}
|
||||
]
|
||||
}
|
||||
bottomChart.setOption(bottomOption)
|
||||
window.addEventListener('resize', function() {
|
||||
bottomChart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,123 +0,0 @@
|
|||
<template>
|
||||
<div :id="id" :ref="id" style="width: 100%; height: 85%" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
this.drawChart()
|
||||
},
|
||||
methods: {
|
||||
drawChart() {
|
||||
var colors = [
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(65,158,255,0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(65,158,255,0.8)'
|
||||
}
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(81,255,255,0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(81,255,255,0.8)'
|
||||
}
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(65,158,255,0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(65,158,255,0.8)'
|
||||
}
|
||||
]),
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(81,255,255,0.8)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(81,255,255,0)'
|
||||
}
|
||||
])
|
||||
].reverse()
|
||||
var data = [
|
||||
{
|
||||
name: '阿里云',
|
||||
value: 36
|
||||
},
|
||||
{
|
||||
name: 'Azure',
|
||||
value: 17
|
||||
},
|
||||
{
|
||||
name: '华为云',
|
||||
value: 17
|
||||
},
|
||||
{
|
||||
name: '腾讯云',
|
||||
value: 27
|
||||
}
|
||||
]
|
||||
const loadOption = {
|
||||
color: colors,
|
||||
series: [
|
||||
{
|
||||
name: '半径模式',
|
||||
type: 'pie',
|
||||
radius: ['35%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'radius',
|
||||
minShowLabelAngle: 10,
|
||||
label: {
|
||||
show: true,
|
||||
normal: {
|
||||
position: 'outside',
|
||||
fontSize: 12,
|
||||
lineHeight: 18,
|
||||
color: '#fff',
|
||||
formatter: params => {
|
||||
return `${params.name}\n${params.value}%`
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
length: 1,
|
||||
length2: 10
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
const loadChart = echarts.init(this.$refs[this.id])
|
||||
loadChart.setOption(loadOption)
|
||||
window.addEventListener('resize', function() {
|
||||
loadChart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
<template>
|
||||
<div :id="id" :ref="id" style="width: 100%; height: 100%" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
this.drawChart()
|
||||
},
|
||||
methods: {
|
||||
drawChart() {
|
||||
const color = ['#4BF8F7', '#333A3F']
|
||||
const loadOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
color: color,
|
||||
title: {
|
||||
text: '48%',
|
||||
subtext: '占比',
|
||||
x: 'center',
|
||||
y: '25%',
|
||||
textStyle: {
|
||||
fontWeight: 'bold',
|
||||
color: 'white',
|
||||
fontFamily: 'Impact',
|
||||
fontSize: 28
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 12,
|
||||
color: '#A4ACBF'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '来源',
|
||||
type: 'pie',
|
||||
radius: ['80%', '100%'],
|
||||
avoidLabelOverlap: false,
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 48,
|
||||
name: '已部署'
|
||||
},
|
||||
{
|
||||
value: 52,
|
||||
name: '未部署'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
const loadChart = echarts.init(this.$refs[this.id])
|
||||
loadChart.setOption(loadOption)
|
||||
window.addEventListener('resize', function() {
|
||||
loadChart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
<template>
|
||||
<div :id="id" :ref="id" style="width: 100%;height: 5px" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'white'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
this.drawChart()
|
||||
},
|
||||
methods: {
|
||||
drawChart() {
|
||||
const loadOption = {
|
||||
grid: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0]
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [''],
|
||||
axisLine: { show: false },
|
||||
axisTick: [
|
||||
{
|
||||
show: false
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '金额',
|
||||
type: 'bar',
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: this.color
|
||||
}
|
||||
},
|
||||
barWidth: 20,
|
||||
data: [10]
|
||||
},
|
||||
{
|
||||
name: '背景',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
barGap: '-100%',
|
||||
data: [20],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#737373'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
const loadChart = echarts.init(this.$refs[this.id])
|
||||
loadChart.setOption(loadOption)
|
||||
window.addEventListener('resize', function() {
|
||||
loadChart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,240 +0,0 @@
|
|||
<template>
|
||||
<div :id="id" :ref="id" style="width: 100%;height: 100%;" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
data2: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
this.drawChart()
|
||||
},
|
||||
methods: {
|
||||
drawChart() {
|
||||
const fontSize = '14'
|
||||
const textStyle = {
|
||||
color: '#999999',
|
||||
fontFamily: 'SourceHanSansCN',
|
||||
fontSize: '14'
|
||||
}
|
||||
const legendStyle = {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
}
|
||||
// 整体总负载
|
||||
const loadChart = echarts.init(this.$refs.loadChart)
|
||||
const loadOption = {
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
top: '15%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
fontSize: fontSize
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
x: 'right',
|
||||
textStyle: legendStyle
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
textStyle: textStyle,
|
||||
interval: 0
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.data2.map(n => n.name)
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: textStyle
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
// {
|
||||
// name: '',
|
||||
// type: 'pictorialBar',
|
||||
// symbolSize: ['20', 10],
|
||||
// symbolOffset: [-12, -5],
|
||||
// symbolPosition: 'end',
|
||||
// z: 12,
|
||||
// tooltip: {
|
||||
// show: false
|
||||
// },
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// position: 'top',
|
||||
// fontSize: fontSize,
|
||||
// color: '#fff'
|
||||
// }
|
||||
// },
|
||||
// color: '#008ED7',
|
||||
// data: this.data
|
||||
// },
|
||||
// {
|
||||
// name: '',
|
||||
// type: 'pictorialBar',
|
||||
// symbolSize: [20, 10],
|
||||
// tooltip: {
|
||||
// show: false
|
||||
// },
|
||||
// symbolOffset: [-12, 5],
|
||||
// z: 12,
|
||||
// color: '#00ABFF',
|
||||
// data: this.data
|
||||
// },
|
||||
{
|
||||
type: 'bar',
|
||||
name: 'CPU整体负载',
|
||||
barWidth: '30%',
|
||||
// barGap: '200%',
|
||||
// barCateGoryGap: '10%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: '#00D5FF'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#00ABFF'
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
data: this.data
|
||||
},
|
||||
// {
|
||||
// name: '',
|
||||
// type: 'pictorialBar',
|
||||
// symbolSize: [20, 10],
|
||||
// symbolOffset: [12, -5],
|
||||
// symbolPosition: 'end',
|
||||
// z: 12,
|
||||
// tooltip: {
|
||||
// show: false
|
||||
// },
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// position: 'top',
|
||||
// fontSize: fontSize,
|
||||
// color: '#fff'
|
||||
// }
|
||||
// },
|
||||
// color: '#25BD97',
|
||||
// data: this.data2
|
||||
// },
|
||||
// {
|
||||
// name: '',
|
||||
// type: 'pictorialBar',
|
||||
// symbolSize: [20, 10],
|
||||
// tooltip: {
|
||||
// show: false
|
||||
// },
|
||||
// symbolOffset: [12, 5],
|
||||
// z: 12,
|
||||
// color: '#27C69B',
|
||||
// data: this.data2
|
||||
// },
|
||||
{
|
||||
type: 'bar',
|
||||
name: '内存整体负载',
|
||||
barWidth: '30%',
|
||||
// barGap: '200%',
|
||||
// barCateGoryGap: '10%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: '#3BFEFA'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#25BD97'
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
data: this.data2
|
||||
}
|
||||
]
|
||||
}
|
||||
loadChart.setOption(loadOption)
|
||||
window.addEventListener('resize', function() {
|
||||
loadChart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,185 +0,0 @@
|
|||
<template>
|
||||
<div :id="id" :ref="id" style="width: 100%;height: 80%;" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
data2: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
this.drawChart()
|
||||
},
|
||||
methods: {
|
||||
drawChart() {
|
||||
const textStyle = {
|
||||
color: '#999999',
|
||||
fontFamily: 'SourceHanSansCN',
|
||||
fontSize: '14'
|
||||
}
|
||||
const legendStyle = {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
}
|
||||
|
||||
// 总营收
|
||||
const allGetChart = echarts.init(this.$refs.allGetChart)
|
||||
const allGetOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
x: 'right',
|
||||
textStyle: legendStyle
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '5%',
|
||||
top: '8%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
textStyle: textStyle
|
||||
},
|
||||
data: this.data2.map(n => n.name)
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: textStyle
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '服务租赁营收',
|
||||
type: 'line',
|
||||
smooth: true, // 是否平滑曲线显示
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
color: {
|
||||
type: 'linear',
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#51FFFF'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(81,255,255,0.3)'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
data: this.data2
|
||||
},
|
||||
{
|
||||
name: '代理运维营收',
|
||||
type: 'line',
|
||||
smooth: true, // 是否平滑曲线显示
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
color: {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#419EFF'
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
}
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(65,158,255, 0.4)'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
data: this.data
|
||||
}
|
||||
]
|
||||
}
|
||||
allGetChart.setOption(allGetOption)
|
||||
window.addEventListener('resize', function() {
|
||||
allGetChart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,424 +0,0 @@
|
|||
<template>
|
||||
<div class="monitor">
|
||||
<a class="back" @click.prevent="toRoot"> <i class="el-icon-back" /> 返回 </a>
|
||||
<div class="top">云际运维服务实时监控</div>
|
||||
<div class="floatLeft" :span="4">
|
||||
<div class="left">
|
||||
<div class="left_1">
|
||||
<div class="title">服务器总数量</div>
|
||||
<div class="left_12">1,205,534</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: #51FFFF"> 578656 </span>
|
||||
</div>
|
||||
<ProgressChart id="progress1" color="#51FFFF" />
|
||||
<div class="left_22_title">
|
||||
<span> 未部署 </span>
|
||||
<span> 626878 </span>
|
||||
</div>
|
||||
<ProgressChart 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">
|
||||
<div class="title">资源服务厂商占比</div>
|
||||
<LeftPieChart id="bottomChart" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :span="7" class="floatRight">
|
||||
<div class="right">
|
||||
<div class="right_1">
|
||||
<span class="allGet">
|
||||
<span class="title">云际计量计费</span>
|
||||
<span>
|
||||
<span class="num">13523.52</span>
|
||||
元
|
||||
</span>
|
||||
</span>
|
||||
<TotalRevenueChart id="allGetChart" :data="dataBar" :data2="dataBar2" />
|
||||
</div>
|
||||
<div class="right_2">
|
||||
<div class="title"> 整体总负载 </div>
|
||||
<div class="cartDraw">
|
||||
<TotalLoadChart id="loadChart" :data="dataBar" :data2="dataBar2" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_3">
|
||||
<div class="title"> 平均使用情况 </div>
|
||||
<div class="cartDraw">
|
||||
<AverageChart id="averageChart" :data="dataList" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Earth />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProgressChart from './components/ProgressChart'
|
||||
import AverageChart from './components/AverageChart'
|
||||
import TotalLoadChart from './components/TotalLoadChart'
|
||||
import TotalRevenueChart from './components/TotalRevenueChart'
|
||||
import PercentPieChart from './components/PercentPieChart'
|
||||
import LeftPieChart from './components/LeftPieChart'
|
||||
import Earth from '../prometheusMonitor/earth'
|
||||
export default {
|
||||
components: {
|
||||
ProgressChart,
|
||||
AverageChart,
|
||||
TotalLoadChart,
|
||||
TotalRevenueChart,
|
||||
PercentPieChart,
|
||||
LeftPieChart,
|
||||
Earth
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [
|
||||
{
|
||||
name: '09/04',
|
||||
value: '80'
|
||||
},
|
||||
{
|
||||
name: '09/05',
|
||||
value: '100'
|
||||
},
|
||||
{
|
||||
name: '09/06',
|
||||
value: '40'
|
||||
},
|
||||
{
|
||||
name: '09/07',
|
||||
value: '20'
|
||||
},
|
||||
{
|
||||
name: '09/08',
|
||||
value: '80'
|
||||
},
|
||||
{
|
||||
name: '09/09',
|
||||
value: '70'
|
||||
},
|
||||
{
|
||||
name: '09/10',
|
||||
value: '30'
|
||||
}
|
||||
],
|
||||
bottomList: [
|
||||
{
|
||||
name: 'UCloud',
|
||||
value: '0.02'
|
||||
},
|
||||
{
|
||||
name: '金山云',
|
||||
value: '0.10'
|
||||
},
|
||||
{
|
||||
name: '腾讯云',
|
||||
value: '0.02'
|
||||
},
|
||||
{
|
||||
name: '华为云',
|
||||
value: '0.13'
|
||||
},
|
||||
{
|
||||
name: '阿里云',
|
||||
value: '0.10'
|
||||
}
|
||||
],
|
||||
dataBar: [
|
||||
{
|
||||
name: '09/04',
|
||||
value: '80'
|
||||
},
|
||||
{
|
||||
name: '09/05',
|
||||
value: '100'
|
||||
},
|
||||
{
|
||||
name: '09/06',
|
||||
value: '40'
|
||||
},
|
||||
{
|
||||
name: '09/07',
|
||||
value: '20'
|
||||
},
|
||||
{
|
||||
name: '09/08',
|
||||
value: '80'
|
||||
},
|
||||
{
|
||||
name: '09/09',
|
||||
value: '70'
|
||||
},
|
||||
{
|
||||
name: '09/10',
|
||||
value: '30'
|
||||
}
|
||||
],
|
||||
dataBar2: [
|
||||
{
|
||||
name: '09/04',
|
||||
value: '20'
|
||||
},
|
||||
{
|
||||
name: '09/05',
|
||||
value: '50'
|
||||
},
|
||||
{
|
||||
name: '09/06',
|
||||
value: '60'
|
||||
},
|
||||
{
|
||||
name: '09/07',
|
||||
value: '20'
|
||||
},
|
||||
{
|
||||
name: '09/08',
|
||||
value: '80'
|
||||
},
|
||||
{
|
||||
name: '09/09',
|
||||
value: '60'
|
||||
},
|
||||
{
|
||||
name: '09/10',
|
||||
value: '30'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.setHtmlFontSize()
|
||||
window.addEventListener(
|
||||
'resize', this.setHtmlFontSize, false
|
||||
)
|
||||
},
|
||||
mounted() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
setTimeout(() => {
|
||||
loading.close()
|
||||
}, 3000)
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener(
|
||||
'resize', this.setHtmlFontSize, false
|
||||
)
|
||||
document.documentElement.style.fontSize = ''
|
||||
},
|
||||
methods: {
|
||||
toRoot() {
|
||||
this.$router.replace('/')
|
||||
},
|
||||
setHtmlFontSize() {
|
||||
// 设计稿是1920 X 1080 所以1rem = 192px
|
||||
const docEle = document.documentElement
|
||||
const screenRatioByDesign = 16 / 9
|
||||
const screenRatio = docEle.clientWidth / docEle.clientHeight
|
||||
const fontSize = ((screenRatio > screenRatioByDesign ? screenRatioByDesign / screenRatio : 1) * docEle.clientWidth) / 10
|
||||
docEle.style.fontSize = fontSize.toFixed(3) + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.back{
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 22px;
|
||||
color: #ddd;
|
||||
font-size: 0.1rem;
|
||||
}
|
||||
.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 {
|
||||
height: 8%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 0 0.31rem;
|
||||
font-size: 0.26rem;
|
||||
font-weight: 400;
|
||||
color: #FEFCFC;
|
||||
}
|
||||
.title{
|
||||
color: #51FFFF;
|
||||
font-size: 0.14rem;
|
||||
font-weight: 400;
|
||||
line-height: 0.19rem;
|
||||
}
|
||||
.floatLeft,.floatRight {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
height: 92%;
|
||||
padding: 0 0.31rem;
|
||||
.el-col{
|
||||
height: 100%;
|
||||
}
|
||||
.left {
|
||||
height: 100%;
|
||||
padding-top: 3vh;
|
||||
.left_1{
|
||||
height: 34.6%;
|
||||
.left_12{
|
||||
font-size: 0.36rem;
|
||||
font-family: Impact;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
padding-top: 0.13rem;
|
||||
}
|
||||
.left_22{
|
||||
height: 14vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 1.5vh 0;
|
||||
.left_22_chart{
|
||||
width: 40%;
|
||||
}
|
||||
.left_22_num{
|
||||
width: 55%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #D3D9D9;
|
||||
.left_22_title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1.5vh 0;
|
||||
font-size: 0.09rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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: 0.17rem;
|
||||
font-size: 0.08rem;
|
||||
line-height: 0.15rem;
|
||||
justify-content: space-around;
|
||||
> div{
|
||||
margin: 0 4%;
|
||||
}
|
||||
.warn_icon{
|
||||
width: 0.33rem;
|
||||
height: 0.33rem;
|
||||
}
|
||||
.warn_num{
|
||||
font-size: 0.14rem;
|
||||
font-family: Impact;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.left_3 {
|
||||
width: 100%;
|
||||
height: 37.8%;
|
||||
}
|
||||
}
|
||||
.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: #51FFFF;
|
||||
font-family: Impact;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right_2{
|
||||
height: 33%;
|
||||
}
|
||||
.right_3{
|
||||
height: 27%;
|
||||
}
|
||||
.cartDraw {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.floatLeft{
|
||||
left: 0;
|
||||
width: 25%;
|
||||
}
|
||||
.floatRight{
|
||||
width: 30%;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" rel="stylesheet/less">
|
||||
@import "../../common/font/font.css";
|
||||
</style>
|
||||
Loading…
Reference in New Issue