<template>
|
<div class="data-container">
|
<el-row>
|
<el-col>
|
<h1 class="title">运维报表</h1>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" class="data-plane">
|
<el-col :xs='24' :md="6" :xl="{ span: '4-8' }" :sm="12" v-for="item, index in dataList" :key="item.id">
|
<div class="col-content">
|
<el-card>
|
<el-row type="flex" align="middle" justify="space-between">
|
<el-col :xl="8" :lg="8" :md="10" :sm="8" :xs="6">
|
<div class="icon-container" :style="{ backgroundColor: iconList[index].color }">
|
<i :class="iconList[index].icon" class="icon-font"></i>
|
</div>
|
</el-col>
|
<el-col :xl="14" :lg="14" :md="12" :sm="14" :xs="16">
|
<div class="data-info">
|
<div class="data-num">{{ item.num }}</div>
|
<div class="data-lable">{{ item.type }}</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-card>
|
</div>
|
</el-col>
|
|
</el-row>
|
</div>
|
|
</template>
|
|
<script>
|
export default {
|
name: 'DataView',
|
data() {
|
return {
|
dataList: [
|
{ id: 1, type: '工单数', num: 523, },
|
{ id: 2, type: '恢复数', num: 50, },
|
{ id: 3, type: '待恢复数', num: 523, },
|
{ id: 4, type: '产生违约事项数', num: 123, },
|
{ id: 5, type: '产生违约责任书', num: 512323, },
|
],
|
iconList: [
|
{ icon: 'el-icon-tickets', color: '#7868d9' },
|
{ icon: 'el-icon-s-claim', color: '#3eba45' },
|
{ icon: 'el-icon-edit', color: '#3da7f8' },
|
{ icon: 'el-icon-warning', color: '#ffbe40' },
|
{ icon: 'el-icon-error', color: '#fe640d' },
|
]
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.data-container {
|
margin-bottom: 20px;
|
}
|
.title {
|
text-align: left;
|
}
|
|
.icon-container {
|
height: 80px;
|
}
|
|
.col-content {
|
margin-bottom: 10px;
|
}
|
|
.icon-container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 8px;
|
|
.icon-font {
|
font-size: 30px;
|
color: #fff;
|
}
|
}
|
|
.data-info {
|
display: flex;
|
height: 100%;
|
flex-direction: column;
|
justify-content: center;
|
text-align: left;
|
|
.data-num {
|
font-size: 32px;
|
}
|
|
.data-lable {
|
font-size: 16px;
|
text-indent: 3px;
|
}
|
}
|
|
@media screen and (min-width: 1200px) {
|
.el-col-md-6 {
|
width: 20%;
|
}
|
}
|
</style>
|
