139 lines
3.4 KiB
Vue
139 lines
3.4 KiB
Vue
<template>
|
|
<el-row class="stat-container">
|
|
<!-- <dv-border-box-8 :reverse="true" style="height: 74px"> -->
|
|
<div class="stat-border" style="top: -2px"></div>
|
|
<div class="stat-border" style="top: -2px; right: 1px"></div>
|
|
<div class="stat-border" style="bottom: 0; right: 1px"></div>
|
|
<div class="stat-border" style="bottom: 0;"></div>
|
|
<el-col :span="24 / configs.length" class="stat-part" v-for="item in configs" :key="item.title">
|
|
<div class="title">
|
|
<i class="icon" :class="item.icon"></i>
|
|
<span>{{ item.title }}</span>
|
|
</div>
|
|
<div class="stat-count" v-for="(cell, index) in item.data" :key="index">
|
|
<div :class="['hover', { active: activePlateform === index }]" v-if="item.title === '平台情况' && item.type === 'COUNT'" @click="plateformClick(index)">
|
|
<div>{{ cell.title }}</div>
|
|
<div class="number" :class="cell.className" :style="cell.style">{{ cell.value }} {{ cell.unit }}</div>
|
|
</div>
|
|
<div v-else>
|
|
<div>{{ cell.title }}</div>
|
|
<div class="number" :class="cell.className" :style="cell.style">{{ cell.value }} {{ cell.unit }}</div>
|
|
</div>
|
|
<div v-if="item.type === 'PROGRESS'">
|
|
<div :style="item.titleStyle">{{ cell.title }}</div>
|
|
<div class="progress-wrap">
|
|
<Progress :used="cell.used" :total="cell.total" :unit="cell.unit" :color="cell.color"></Progress>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<!-- </dv-border-box-8> -->
|
|
</el-row>
|
|
</template>
|
|
<script>
|
|
import Progress from 'components/progress'
|
|
export default {
|
|
components: { Progress },
|
|
props: {
|
|
configs: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
activePlateform: ''
|
|
}
|
|
},
|
|
methods: {
|
|
plateformClick(index) {
|
|
let isPublic
|
|
if (this.activePlateform === index) {
|
|
this.activePlateform = ''
|
|
isPublic = null
|
|
} else {
|
|
this.activePlateform = index
|
|
isPublic = index === 1
|
|
}
|
|
this.$emit('plateformClick', isPublic)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.hover {
|
|
cursor: pointer;
|
|
padding-left: 5px;
|
|
&:hover {
|
|
background: #161c5f;
|
|
}
|
|
&.active {
|
|
background: #161c5f;
|
|
}
|
|
}
|
|
.stat-container {
|
|
position: relative;
|
|
height: 74px;
|
|
width: 100%;
|
|
background: url('~assets/img/stat_bg.png');
|
|
border-bottom: 1px solid #0391d8;
|
|
border-top: 1px solid #0391d8;
|
|
margin: 10px 0;
|
|
.stat-border {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 2px;
|
|
background: #009ce0;
|
|
}
|
|
.stat-part {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
height: 72px;
|
|
overflow: hidden;
|
|
.stat-count {
|
|
font-size: 17px;
|
|
flex: 1;
|
|
padding-left: 20px;
|
|
padding-right: 10px;
|
|
.number {
|
|
font-size: 25px;
|
|
font-weight: bold;
|
|
&.lgreen {
|
|
color: #42edf8;
|
|
}
|
|
&.green {
|
|
color: #39db3c;
|
|
}
|
|
&.purple {
|
|
color: #b34ef9;
|
|
}
|
|
&.yellow {
|
|
color: #ffc400;
|
|
}
|
|
}
|
|
}
|
|
.progress-wrap {
|
|
margin-top: 10px;
|
|
}
|
|
.title {
|
|
color: #fff;
|
|
height: 68px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 17px;
|
|
width: 140px;
|
|
background: #1b3c88;
|
|
.icon {
|
|
font-size: 28px;
|
|
margin-right: 5px;
|
|
}
|
|
span {
|
|
max-width: 90px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|