<template> <transition> <div v-show="show" class="wrapper myCenter"> <div class="left"> <div class="title-wrapper"> <div class="title">{{ 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" style="width: 100%" class="el-bottom" :key="Math.random()" > <!-- :height="tableHeight" --> <el-table-column prop="detectorCode" label="设备编号" width="180"> <template slot-scope="scope"> <div :title="scope.row.detectorCode" class="ddd" v-unValue> {{ scope.row.detectorCode }} </div> </template> </el-table-column> <el-table-column prop="detectorName" label="设备名称" width="120"> <template slot-scope="scope"> <div :title="scope.row.detectorName" class="ddd" v-unValue> {{ scope.row.detectorName }} </div> </template> </el-table-column> <el-table-column prop="medium" label="监测介质" width=""> <template slot-scope="scope"> <div v-unValue>{{ scope.row.medium }}</div> </template> </el-table-column> <el-table-column prop="linkman" label="联系人" width="100"> <template slot-scope="scope"> <div v-unValue>{{ scope.row.linkman }}</div> </template> </el-table-column> <el-table-column prop="phone" label="联系电话" width=""> </el-table-column> <el-table-column prop="detectorStatus" label="设备状态" width="100"> </el-table-column> <el-table-column prop="alarmTime" label="预警时间" width="180"> <template slot-scope="scope"> <div v-unValue>{{ scope.row.alarmTime }}</div> </template> </el-table-column> </el-table> <div> <el-pagination @current-change="handleCurrentChangvale" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total" :hide-on-single-page="total <= pageSize" :key="total + '' + pageSize" > </el-pagination> </div> </div> </div> </div> </transition> </template> <script> // import Velocity from "velocity-animate"; // import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm"; import { listDetectorInfo } from "@/api/detector/detectorInfo"; export default { props: { detcetorList: { type: Array, default: () => [], }, show: { type: Boolean, }, title: { type: String, }, userId: { type: [Number, String], }, total: { type: Number, }, pageSize: { type: Number, }, }, data() { return { // 动画效果的切换 // tableHeight: 600, tableData: [ // { // deviceCode: "2016-05-05", // name: "王小虎", // province: "上海", // city: "普陀区", // address: "上海市普陀区金沙江路", // }, ], }; }, created() { console.log("list", this.detcetorList); // this.getList(); }, watch: { // 当组件显示的时候 detcetorList(newData) { // console.log(bol); // if (bol) { console.log(newData); this.tableData = [...newData]; // } }, }, methods: { handleSizeChange(val) { console.log(val); }, handleCurrentChangvale(val) { this.$parent.getDetectorInfoList( listDetectorInfo, { userId: this.userId, pageNum: val, pageSize: this.pageSize, }, this.title ); }, close() { // this.fade = "fade"; this.$parent.userCenterShow = false; }, }, }; </script> <style lang="scss" scoped> .wrapper { // 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: 100%; height: 30px; display: flex; justify-content: space-between; background: #1890ff; padding: 5px; .title { width: 100%; color: #fff; text-align: center; } .close { box-sizing: border-box; padding-top: 2px; 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>