RightBototmData.vue

<template>
  <div class="wrapper">
    <div class="left">
      <div class="top">
        <span>设备报警最新记录</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="170"
        >
        
          <el-table-column prop="deviceCode" label="设备编号" width="100">
          </el-table-column>
          <el-table-column prop="deviceName" label="设备名称" width="">
          </el-table-column>
          <el-table-column prop="alarmType" label="报警类型" width="80">
          </el-table-column>
          <el-table-column prop="createTime" label="报警开始时间" width="170">
          </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",
      },
      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");
      // 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,
              alarmValue,
            } = item;
            return {
              deviceCode,
              deviceName,
              alarmType,
              createTime,
              alarmValue,
            };
          });
          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;
  overflow: hidden;
  // background-color: #fff;
  display: flex;
  justify-content: space-between;
  & > div {
  }
  .left {
    width: 680px;
    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;
    .top {
      height: 32px;
      background-color: #053b6a;
      color: #fff;
      line-height: 32px;
      padding-left: 12px;
      // position: relative;

      span {
        display: inline-block;
      }
      .repeat {
        margin-left: 20px;
        cursor: pointer;
        &:hover {
          color: #2788ea;
        }
      }
      .repeat2 {
        margin-left: 20px;
        color:#67c23a;
      }
      .more {
        float: right;
        margin-right: 20px;
        cursor: pointer;
        &:hover {
          color: #2788ea;
        }
      }
    }
    .bottom {
      .table-top {
        // background-color: red;
        // display: flex;
        // justify-content: space-between;
        // div {
        //   width: 100%;
        //   text-align: center;
        // }
      }
    }
  }
  .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>