南昌市物联网技防平台-前端
zengh
2023-01-16 8aa3edd56c279100c9053576f3e90fa55459fe77
src/views/supervisoryConsole/card.vue
@@ -17,6 +17,9 @@
      <div class="radio">
        <el-radio-group v-model="radio" @change="siteStatus">
          <el-radio label="全部">全部</el-radio>
          <el-radio label="一键求助">一键求助</el-radio>
          <el-radio label="一键报警">一键报警</el-radio>
          <el-radio label="监控设备">监控设备</el-radio>
          <el-radio label="仅显示预警设备">仅显示预警设备</el-radio>
          <el-radio label="仅显示设备掉线">仅显示设备掉线</el-radio>
          <el-radio label="仅显示设备故障">仅显示设备故障</el-radio>
@@ -26,7 +29,12 @@
    <el-row
      v-infinite-scroll="load"
      :infinite-scroll-disabled="disabled"
      style="margin-top: 10px"
      style="
        margin-top: 10px;
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
      "
    >
      <el-col
        class="card-container"
@@ -35,29 +43,62 @@
        :key="index"
      >
        <a href="javascript:void(0);" @click.stop="goToDetails(item)">
          <el-card
          <!-- <el-card
            :style="
              item.state == ''
              item.jtype == 1
                ? 'background: #F34A4Ae6'
                : item.state == ''
                ? item.onlineStatus == 1
                  ? 'background: #1DBB99e6'
                  : 'background: #C9C9C9e6'
                : 'background: #F48F57e6'
            "
          > -->
          <el-card
            :style="
              item.dtype == 0
                ? 'background: #C9C9C9e6'
                : item.dtype == 1
                ? 'background: #1DBB99e6'
                : item.dtype == 2
                ? 'background: #F34A4Ae6'
                : item.dtype == 3
                ? 'background: #F48F57e6'
                : ''
            "
          >
            <div>{{ item.deviceName }}</div>
            <div>{{ item.street }}</div>
            <div style="width: 80%">{{ item.street }}</div>
            <div class="cet">
            <!-- <div class="cet">
              {{
                item.state == ""
                item.jtype == 1
                  ? "设备预警"
                  : item.state == ""
                  ? item.onlineStatus == 1
                    ? "设备在线"
                    ? "设备正常"
                    : "设备掉线"
                  : "设备故障"
              }}
            </div> -->
            <div class="cet">
              {{
                item.dtype == 0
                  ? "设备掉线"
                  : item.dtype == 1
                  ? "设备正常"
                  : item.dtype == 2
                  ? "设备预警"
                  : item.dtype == 3
                  ? "设备故障"
                  : ""
              }}
            </div>
            <img src="/img/alarm.png" alt="" />
            <img v-if="item.deviceType == '监控设备'" src="/img/jiank.png" alt="" />
            <img v-if="item.deviceType == '一键报警'" src="/img/baojin.png" alt="" />
            <img v-if="item.deviceType == '一键求助'" src="/img/alarm.png" alt="" />
            <div class="bot">
              <span>
@@ -120,9 +161,99 @@
        this.loading = false;
      }, 2000);
    },
    siteStatus(value, e) {
      console.log(this.radio, value);
    inputSearchBtn() {
      this.getEquipmentLists();
    },
    siteStatus() {
      this.inputSearchValue = "";
      this.getEquipmentLists();
    },
    getEquipmentLists() {
      getList({ deviceName: this.inputSearchValue }).then((res) => {
        var a = [],
          b = [],
          c = [],
          f = [];
        if (this.radio == "全部") {
          res.data.data.forEach((item) => {
            if (item.dtype == 2) {
              f.push(item);
            } else {
              if (item.dtype == 3) a.push(item);
              if (item.dtype == 1) c.push(item);
              if (item.dtype == 0) b.push(item);
            }
          });
        } else if (this.radio == "仅显示预警设备") {
          res.data.data.forEach((item) => {
            if (item.dtype == 2) c.push(item);
          });
        } else if (this.radio == "仅显示设备掉线") {
          res.data.data.forEach((item) => {
            if (item.dtype == 0) b.push(item);
          });
        } else if (this.radio == "仅显示设备故障") {
          res.data.data.forEach((item) => {
            if (item.dtype == 3) a.push(item);
          });
        }
        //  if (this.radio == "全部") {
        //   res.data.data.forEach((item) => {
        //     if (item.jtype == 1) {
        //       f.push(item);
        //     } else {
        //       if (item.state != "") a.push(item);
        //       if (item.state == "" && item.onlineStatus == 1) c.push(item);
        //       if (item.state == "" && item.onlineStatus != 1) b.push(item);
        //     }
        //   });
        // } else if (this.radio == "仅显示预警设备") {
        //   res.data.data.forEach((item) => {
        //     if (item.jtype == 1) c.push(item);
        //   });
        // } else if (this.radio == "仅显示设备掉线") {
        //   res.data.data.forEach((item) => {
        //     if (item.onlineStatus != 1) b.push(item);
        //   });
        // } else if (this.radio == "仅显示设备故障") {
        //   res.data.data.forEach((item) => {
        //     if (item.state != "") a.push(item);
        //   });
        // }
        if (this.radio == "一键求助") {
          res.data.data.forEach((item) => {
            if (item.deviceType.indexOf("一键求助") != -1) c.push(item);
          });
        } else if (this.radio == "一键报警") {
          res.data.data.forEach((item) => {
            if (item.deviceType.indexOf("一键报警") != -1) c.push(item);
          });
        } else if (this.radio == "监控设备") {
          res.data.data.forEach((item) => {
            if (item.deviceType.indexOf("监控设备") != -1) c.push(item);
          });
        }
        var d = f.concat(a.concat(c.concat(b)));
        this.count = [];
        d.forEach((item) => {
          this.count.push(item);
        });
        this.option = [];
        for (var i = 0; i <= 24; i++) {
          if (this.count.length > 0) {
            this.option.push(this.count[0]);
            this.count.shift();
          }
        }
        this.inputSearchValue = "";
      });
    },
    goToDetails(data) {
      this.$router.push({ path: "/dataL/dataL", query: data });
    },
@@ -217,8 +348,7 @@
  height: 172px !important;
  box-sizing: border-box;
  margin-bottom: 20px !important;
  min-width: 368px;
  max-width: 370px;
  width: 20% !important;
  a {
    width: 100%;
    height: 100%;
@@ -268,4 +398,4 @@
    }
  }
}
</style>
</style>