监控台模块下3个模式得相关修改

shuishen

2021-04-07 eebbc840b49f3c14ced71dbb49e7e9fe6110315d

 src/views/supervisoryConsole/card.vue

@@ -1,13 +1,132 @@
<template>
  
  <el-row>
    <el-col
      class="card-container"
      :span="1"
      v-for="(item, index) in option"
      :key="index"
    >
      <a href="">
        <el-card
          :style="
            item.state == ''
              ? item.onlineStatus == 1
                ? 'background: #1DBB99e6'
                : 'background: #C9C9C9e6'
              : 'background: #F48F57e6'
          "
          @click="alert(1)"
        >
          <div>{{ item.deviceName }}</div>
          <div>{{ item.street }}</div>

          <div class="cet">
            {{
              item.state == ""
                ? item.onlineStatus == 1
                  ? "设备在线"
                  : "设备掉线"
                : "设备故障"
            }}
          </div>

          <img src="/img/alarm.png" alt="" />

          <div class="bot">
            <span>
              {{ item.deviceNumber }}
            </span>
            <span>
              {{ item.stime }}
            </span>
          </div>
        </el-card>
      </a>
    </el-col>
  </el-row>
</template>

<script>
import { getList } from "@/api/supervisory/card";
export default {
  data() {
    return {
      option: [],
    };
  },
  created() {
    getList().then((res) => {
      var a = [],
        b = [],
        c = [];

}
      res.data.data.forEach((item) => {
        if (item.state != "") a.push(item);
        if (item.state == "" && item.onlineStatus != 1) b.push(item);
        if (item.state == "" && item.onlineStatus == 1) c.push(item);
      });

      this.option = a.concat(c.concat(b));
    });
  },
};
</script>

<style>

<style lang="scss">
.card-container {
  padding: 0 10px;
  height: 172px !important;
  box-sizing: border-box;
  margin-bottom: 20px !important;
  min-width: 368px;
  max-width: 370px;
  a {
    width: 100%;
    height: 100%;
    cursor: pointer;
    .el-card {
      height: 100%;
      color: #180808;
      &:hover {
        transform: scale(1.04);
      }
      .el-card__body {
        position: relative;
        height: 100%;
        box-sizing: border-box;
        .bot {
          position: absolute;
          left: 16px;
          bottom: 16px;
          width: calc(100% - 32px);
          span:nth-child(1) {
            float: left;
          }
          span:nth-child(2) {
            float: right;
          }
        }
        .cet {
          position: absolute;
          top: 50%;
          left: 16px;
        }
        div {
          line-height: 24px;
          font-size: 14px;
        }
        img {
          position: absolute;
          right: 16px;
          top: 40%;
          width: 40px;
        }
      }
    }
    &:hover {
      color: #180808;
      text-decoration: none;
    }
  }
}
</style>