<template>
|
<div class="table-container">
|
<div class="table-content" ref="tabContent">
|
<el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table">
|
<el-table-column prop="name" label="地区" align="center" width="100">
|
</el-table-column>
|
|
<el-table-column label="人脸设备正常率" align="center">
|
<template slot-scope="scope">
|
<el-tooltip placement="top">
|
<div slot="content">
|
<div class="tip-item">
|
<div class="tip-label">设备正常数:</div>
|
<div class="tip-info tip-success">12</div>
|
</div>
|
<div class="tip-item">
|
<div class="tip-label">设备异常数:</div>
|
<div class="tip-info tip-danger">4</div>
|
</div>
|
</div>
|
<div class="tip-num">75%</div>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="车辆设备正常率" align="center">
|
<template slot-scope="scope">
|
<el-tooltip placement="top">
|
<div slot="content">
|
<div class="tip-item">
|
<div class="tip-label">设备正常数:</div>
|
<div class="tip-info tip-success">12</div>
|
</div>
|
<div class="tip-item">
|
<div class="tip-label">设备异常数:</div>
|
<div class="tip-info tip-danger">4</div>
|
</div>
|
</div>
|
<div class="tip-num">75%</div>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="视频设备正常率" align="center">
|
<template slot-scope="scope">
|
<el-tooltip placement="top">
|
<div slot="content">
|
<div class="tip-item">
|
<div class="tip-label">设备正常数:</div>
|
<div class="tip-info tip-success">12</div>
|
</div>
|
<div class="tip-item">
|
<div class="tip-label">设备异常数:</div>
|
<div class="tip-info tip-danger">4</div>
|
</div>
|
</div>
|
<div class="tip-num">75%</div>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
tableHeight: 40,
|
tableData: [
|
{
|
name: '富顺县',
|
data1: 1123,
|
data2: 1123,
|
data3: 1123
|
},
|
{
|
name: '荣县',
|
data1: 1123,
|
data2: 1123,
|
data3: 1123
|
},
|
{
|
name: '高新区',
|
data1: 1123,
|
data2: 1123,
|
data3: 1123
|
},
|
{
|
name: '自流井区',
|
data1: 1123,
|
data2: 1123,
|
data3: 1123
|
},
|
{
|
name: '贡井区',
|
data1: 1123,
|
data2: 1123,
|
data3: 1123
|
},
|
{
|
name: '大安区',
|
data1: 1123,
|
data2: 1123,
|
data3: 1123
|
},
|
{
|
name: '沿滩区',
|
data1: 1123,
|
data2: 1123,
|
data3: 1123
|
},
|
]
|
}
|
},
|
methods: {
|
computedHeight() {
|
this.$nextTick(() => {
|
setTimeout(() => {
|
const content = this.$refs.tabContent;
|
this.tableHeight = content.offsetHeight;
|
})
|
})
|
}
|
},
|
mounted() {
|
this.computedHeight();
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.table-container {
|
width: 100%;
|
// flex: 1;
|
height: 350px;
|
position: relative;
|
background: rgba(67, 102, 155, 0.3);
|
border: 1px solid rgba(47, 91, 157, 0.8);
|
|
.table-content {
|
position: absolute;
|
width: 100%;
|
top: 0;
|
bottom: 0;
|
}
|
}
|
|
|
|
.rank-table {
|
background-color: transparent !important;
|
color: #fff !important;
|
|
//滚动条的背景色
|
::-webkit-scrollbar-track {
|
background-color: transparent;
|
}
|
}
|
|
::v-deep .el-table tr {
|
background-color: transparent !important;
|
}
|
|
::v-deep .el-table .el-table__header-wrapper th,
|
.el-table .el-table__fixed-header-wrapper th {
|
background-color: transparent !important;
|
|
}
|
|
::v-deep .el-table--group,
|
.el-table--border {
|
border: 0;
|
}
|
|
::v-deep .el-table th.el-table__cell.is-leaf,
|
.el-table td.el-table__cell {
|
border-color: #56739e99 !important;
|
}
|
|
::v-deep .el-table--border .el-table__cell {
|
border-color: #56739e99 !important;
|
}
|
|
::v-deep .el-table th.el-table__cell>.cell {
|
color: #447ED6;
|
}
|
|
::v-deep .el-scrollbar__bar.is-vertical {
|
display: none !important;
|
}
|
|
::v-deep .el-table::before,
|
.el-table--group::after,
|
.el-table--border::after {
|
background-color: transparent !important;
|
}
|
|
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
|
background-color: #447ed648;
|
}
|
|
.tip-item {
|
display: flex;
|
align-items: center;
|
margin-bottom: 10px;
|
font-size: 16px;
|
|
&:last-of-type {
|
margin-bottom: 0;
|
}
|
|
.tip-label {
|
color: #5b83bd;
|
margin-right: 10px;
|
}
|
|
.tip-success {
|
color: #0cd81d;
|
}
|
|
.tip-danger {
|
color: #e20c0c;
|
}
|
}
|
</style>
|
