Bottom.vue

<template>
  <div class="wrapper">
    <div class="left">
      <div class="top">
        <span class="title">设备报警最新记录</span>
        <span @click="repeatClick" class="repeat">刷新</span>

        <transition name="fade">
          <span v-show="repeatFinshed" class="repeat2"> 数据刷新成功</span>
        </transition>

        <span @click="moreClick" class="more">更多</span>
      </div>

      <div class="bottom right-bottom-data-left">
        <!-- <div class="table-top">
          <div>编号</div>
          <div>名称</div>
          <div>类型</div>
          <div>内容</div>
          <div>事件</div>
        </div> -->
        <!-- <div class="one">设备编号:<span>1123123123</span></div>
        <div class="two">报警时间:<span>34523452345</span></div> -->

        <el-table
          size="mini"
          :data="tableData"
          style="width: 100%"
          :height="tableHeight"
          class="el-bottom"
        >
          <el-table-column prop="deviceCode" label="设备编号" width="100">
          </el-table-column>
          <el-table-column prop="deviceName" label="设备名称" width="150">
          </el-table-column>
          <el-table-column prop="alarmType" label="报警类型" width="">
          </el-table-column>
          <el-table-column prop="createTime" label="报警开始时间" width="">
          </el-table-column>
          <el-table-column label="处理状态" align="center" prop="dealStatus">
            <template slot-scope="scope">
              <span v-if="scope.row.orderId == null || scope.row.orderId == ''"
                >未生成工单</span
              >
              <span v-else-if="!scope.row.dealStatus && scope.row.orderId"
                >暂未处理</span
              >
              <span v-else-if="scope.row.dealStatus == 1">不需处理</span>
              <span v-else-if="scope.row.dealStatus == 2">已处理完成</span>
              <span v-else-if="scope.row.dealStatus == 3">未处理完成</span>
              <span v-else> - </span>
            </template>
          </el-table-column>
          <el-table-column prop="alarmValue" label="报警内容" width="100">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- <div class="right">
      <template v-for="(item, index) in list">
        <div
          class="right-content"
          :class="{ three: index == 2 }"
          :key="item.type"
        >
          <div class="text-icon">
            <i
              class="iconfont"
              :class="[iconClass(item), { iconFontSize: item.type == 4 }]"
            ></i>
          </div>
          <div class="text">
            <div class="top">{{ typeName[item.type] }}</div>
            <div class="bottom">
              {{ item.number }}{{ item.type == 99 ? "M" : "个" }}
            </div>
          </div>
        </div>
      </template>
    </div> -->
  </div>
</template>

<script>
import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";

export default {
  props: {
    list: {
      type: Array,
    },
  },
  data() {
    return {
      timer: null,
      repeatFinshed: false,
      typeName: {
        1: "调压箱",
        2: "阀门井",
        3: "流量计",
        4: "压力表",
        99: "管道",
      },
      iconList: {
        1: "icon-tyxgs",
        2: "icon-fmjgs",
        3: "icon-lljgs",
        4: "icon-ylbgs",
        99: "icon-gdcd",
      },
      tableHeight: 170,
      tableData: [
        {
          deviceCode: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  created() {
    console.log("list", this.list);
    this.getList();
  },

  methods: {
    iconClass(item) {
      return this.iconList[item.type];
    },
    moreClick() {
      this.$router.push("/dataMonitoring/deviceAlarm?back=1");
      // route.push(`dataMonitoring/deviceAlarm`)
    },
    repeatClick() {
      // this.tableData=[];
      if (this.repeatFinshed) return;
      this.getList(true);
    },
    getList(bool) {
      this.loading = true;
      listDeviceAlarm({ pageNum: 1, pageSize: 10 }).then((res) => {
        if (res.code == 200) {
          const arr = res.rows.map((item) => {
            const {
              deviceCode,
              deviceName,
              alarmType,
              createTime,
              dealStatus,
              alarmValue,
              orderId,
            } = item;
            return {
              deviceCode,
              deviceName,
              alarmType,
              createTime,
              dealStatus,
              alarmValue,
              orderId,
            };
          });
          this.tableData = arr;
          if (bool) {
            this.timer = null;
            this.repeatFinshed = true;
            this.timer = setTimeout(() => {
              this.repeatFinshed = false;
            }, 1000);
          }
        }
      });
    },
  },
};
</script>

<style lang="scss"  scoped>
.wrapper {
  // width: 978px;
  height: 200px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  // background-color: #fff;
  display: flex;
  justify-content: space-between;

  & > div {
  }
  .left {
    width: 716px;
    height: 198px;
    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;
    background-image: url(../../../../assets/images/bottomBg.png);

    .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: 680px;
      margin: 0 auto;
    }
  }
  .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;
        }
      }
    }
  }
  // 单独调整下最后一个icon的大小
  .iconFontSize {
    font-size: 50px !important;
  }
  .fade-enter-to,
  .fade-leave {
    opacity: 1;
  }
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter-active {
    transition: opacity 0s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
}
</style>