<template>
|
<div class="table-container">
|
<!-- <wrapper-title
|
:title="'区域设备数据'"
|
:path="'/monitorServe/recovery'"
|
></wrapper-title> -->
|
<div class="table-content" ref="tabContent">
|
<div class="table-wrapper">
|
<el-table
|
:data="tableData"
|
border
|
:height="tableHeight"
|
:max-height="tableHeight"
|
class="rank-table"
|
>
|
<el-table-column prop="area" 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">
|
{{ scope.row.faceNormalNum }}
|
</div>
|
</div>
|
<div class="tip-item">
|
<div class="tip-label">设备异常数:</div>
|
<div class="tip-info tip-danger">
|
{{ scope.row.faceErrorNum }}
|
</div>
|
</div>
|
</div>
|
<div class="tip-num">
|
{{
|
scope.row.faceRate?(
|
(scope.row.faceNormalNum / scope.row.faceRate) *
|
100
|
).toFixed(0)+'%':'--'
|
}}
|
</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">
|
{{ scope.row.carNormalNum }}
|
</div>
|
</div>
|
<div class="tip-item">
|
<div class="tip-label">设备异常数:</div>
|
<div class="tip-info tip-danger">
|
{{ scope.row.carNormalNum }}
|
</div>
|
</div>
|
</div>
|
<div class="tip-num">
|
{{
|
scope.row.carRate?(
|
(scope.row.carNormalNum / scope.row.carRate) *
|
100
|
).toFixed(0)+'%':'--'
|
}}
|
</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">
|
{{ scope.row.videoNormalNum }}
|
</div>
|
</div>
|
<div class="tip-item">
|
<div class="tip-label">设备异常数:</div>
|
<div class="tip-info tip-danger">
|
{{ scope.row.videoNormalNum }}
|
</div>
|
</div>
|
</div>
|
<div class="tip-num">
|
{{
|
scope.row.videoRate?(
|
(scope.row.videoNormalNum / scope.row.videoRate) *
|
100
|
).toFixed(0)+'%':'--'
|
}}
|
</div>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import WrapperTitle from "../wrapper-title/index";
|
|
export default {
|
name: "ScreenTable",
|
props: {
|
tableData: {
|
type: Array,
|
default: null,
|
},
|
},
|
components: {
|
WrapperTitle,
|
},
|
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: 240px;
|
position: relative;
|
|
display: flex;
|
flex-direction: column;
|
|
.table-content {
|
flex: 1;
|
// background: url("../../../../assets/images/screen/cardBg.png");
|
// background-size: cover !important;
|
// background-repeat: no-repeat !important;
|
// background-position: center center !important;
|
}
|
}
|
|
.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>
|
