<template> <div v-if="show" class="myCenter"> <div class="left"> <div class="title-wrapper"> <div class="title">报警器列表</div> <div class="close" @click="close"> <img src="@/assets/mapImages/closeBtn.png" alt="" /> </div> </div> <div class="bottom right-bottom-data-left"> <el-table size="mini" :data="tableData" class="el-bottom" > <!-- :height="tableHeight" --> <el-table-column prop="detectorCode" label="设备编号" width=""> <template slot-scope="scope"> <div :title="scope.row.deviceNo" class="zzz"> {{ scope.row.deviceNo }} </div> </template> </el-table-column> <el-table-column prop="deviceType" label="设备类型" width=""> <template slot-scope="scope"> <div :title="scope.row.deviceType" class="zzz"> {{ scope.row.deviceType == 1 ? "流量计" : "压力表" }} </div> </template> </el-table-column> <el-table-column prop="deviceState" label="设备状态" width=""> <template slot-scope="scope"> <div v-if="scope.row.deviceState == 1">正常</div> <div style="color: red" v-else-if="scope.row.deviceState == 2"> 报警 </div> <div v-else>-</div> </template> </el-table-column> <el-table-column prop="reportTime" label="预警时间" width=""> <template slot-scope="scope"> <div v-unValue>{{ scope.row.reportTime }}</div> </template> </el-table-column> </el-table> <div> <el-pagination @current-change="handleCurrentChangvale" :page-size="pageSize" :current-page="pageCurrent" layout="prev, pager, next, jumper" :total="total" :hide-on-single-page="total < pageSize" > </el-pagination> </div> </div> </div> </div> </template> <script> export default { props: { centerData: { type: Array, }, show: { type: Boolean, }, }, data() { return { // 动画效果的切换 tableHeight: 600, pageSize: 16, pageCurrent: 1, }; }, created() { // this.getList(); }, watch: { // 当组件显示的时候 show(newVal) { if (newVal) { this.pageCurrent = 1; } }, }, computed: { total() { return this.centerData.length; }, tableData() { return this.centerData.filter((item, index) => { return ( index < this.pageCurrent * this.pageSize && index >= (this.pageCurrent - 1) * this.pageSize ); }); }, }, methods: { handleSizeChange(val) { console.log(val); this.pageCurrent = val; }, handleCurrentChangvale(val) { console.log(val); this.pageCurrent = val; }, close() { this.$parent.myCenterShow(false); }, }, }; </script> <style lang="scss" scoped> .myCenter { // width: 978px; max-height: 600px; position: fixed; top: 50%; left: 50%; margin-top: -300px; margin-left: -500px; // background-color: #fff; display: flex; justify-content: space-between; z-index: 9999; & > div { } .left { // width: 100px; max-height: 598px; margin-right: 12px; // box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16); // background-color: #fff; // color: #fff; font-size: 14px; font-weight: 400; .title-wrapper { // width: 99%; width: 100%; height: 30px; display: flex; justify-content: space-between; background: #1890ff; padding: 5px; .title { width: 100%; color: #fff; text-align: center; line-height: 30px; } .close { box-sizing: border-box; padding-top: 5px; padding-right: 5px; cursor: pointer; } } .el-table__body-wrappe { height: 140px !important; } .top { height: 19px; // background-color: #053b6a; color: #fff; // line-height: 32px; // padding-left: 12px; position: relative; .title { position: absolute; left: 50%; margin-left: -92px; top: -5px; } .repeat { position: absolute; top: -5px; right: 160px; color: #fff; cursor: pointer; &:hover { color: #2788ea; } } .repeat2 { position: absolute; right: 206px; color: #67c23a; } .more { position: absolute; right: 38px; top: -5px; color: #fff; float: right; margin-right: 20px; cursor: pointer; &:hover { color: #2788ea; } } } .bottom { width: 1000px; margin: 0 auto; position: relative; } } .right { width: 740px; display: flex; flex-wrap: wrap; // justify-content: space-between; align-content: flex-start; // margin-top: 7px; & > .right-content { background-color: #fff; width: 238px; height: 82px; margin-bottom: 29px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16); margin-right: 10px; display: flex; &.three { margin-right: 0px; } // align-items: center; .text-icon { line-height: 82px; padding-left: 22px; margin-right: 22px; i { color: #053b6a; font-size: 60px; } } .text { font-size: 14px; padding-top: 16px; .top { color: #000; margin-bottom: 10px; font-weight: 600; } .bottom { color: #2788ea; } } } } .iconfont { cursor: pointer; } // 单独调整下最后一个icon的大小 .iconFontSize { font-size: 50px !important; } } </style>