修改

zengh

2023-01-16 8aa3edd56c279100c9053576f3e90fa55459fe77

 src/views/supervisoryConsole/card.vue

@@ -1,49 +1,126 @@
<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>
    <div class="card-search">
      <div class="input-search">
        <el-input
          placeholder="按设备号、名称、地址"
          v-model="inputSearchValue"
          class="input-with-select"
        >
          <div>{{ item.deviceName }}</div>
          <div>{{ item.street }}</div>

          <div class="cet">
            {{
              item.state == ""
          <el-button
            slot="append"
            icon="el-icon-search"
            @click.stop="inputSearchBtn"
          ></el-button>
        </el-input>
      </div>
      <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>
        </el-radio-group>
      </div>
    </div>
    <el-row
      v-infinite-scroll="load"
      :infinite-scroll-disabled="disabled"
      style="
        margin-top: 10px;
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
      "
    >
      <el-col
        class="card-container"
        :span="1"
        v-for="(item, index) in option"
        :key="index"
      >
        <a href="javascript:void(0);" @click.stop="goToDetails(item)">
          <!-- <el-card
            :style="
              item.jtype == 1
                ? 'background: #F34A4Ae6'
                : item.state == ''
                ? item.onlineStatus == 1
                  ? "设备在线"
                  : "设备掉线"
                : "设备故障"
            }}
          </div>
                  ? '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 style="width: 80%">{{ item.street }}</div>

          <img src="/img/alarm.png" alt="" />
            <!-- <div class="cet">
              {{
                item.jtype == 1
                  ? "设备预警"
                  : item.state == ""
                  ? item.onlineStatus == 1
                    ? "设备正常"
                    : "设备掉线"
                  : "设备故障"
              }}
            </div> -->

          <div class="bot">
            <span>
              {{ item.deviceNumber }}
            </span>
            <span>
              {{ item.stime }}
            </span>
          </div>
        </el-card>
      </a>
    </el-col>
  </el-row>
            <div class="cet">
              {{
                item.dtype == 0
                  ? "设备掉线"
                  : item.dtype == 1
                  ? "设备正常"
                  : item.dtype == 2
                  ? "设备预警"
                  : item.dtype == 3
                  ? "设备故障"
                  : ""
              }}
            </div>

            <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>
                {{ item.deviceNumber }}
              </span>
              <span>
                {{ item.stime }}
              </span>
            </div>
          </el-card>
        </a>
      </el-col>
    </el-row>
    <div class="card-load-btm">
      <div class="spinner" v-if="loading" style="margin: auto; width: 70px">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
      <div v-if="noMore">我是有底线的！</div>
    </div>
  </div>
</template>

<script>
@@ -52,34 +129,226 @@
  data() {
    return {
      option: [],
      count: [],
      loading: false,
      radio: "全部",
      inputSearchValue: "",
    };
  },
  computed: {
    noMore() {
      return this.option.length >= this.count.length;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  created() {
    getList().then((res) => {
      var a = [],
        b = [],
        c = [];
    this.getEquipmentLists();
  },

      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);
  methods: {
    load() {
      this.loading = true;

      setTimeout(() => {
        for (var i = 0; i <= 20; i++) {
          if (this.count.length > 0) {
            this.option.push(this.count[0]);
            this.count.shift();
          }
        }
        this.loading = false;
      }, 2000);
    },

    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 = "";
      });
    },

      this.option = a.concat(c.concat(b));
    });
    goToDetails(data) {
      this.$router.push({ path: "/dataL/dataL", query: data });
    },
  },
};
</script>

<style lang="scss">
@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  to {
    -webkit-transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  to {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.card-search {
  padding: 0 5px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e4e4e4;
  .input-search {
    min-width: 360px;
    float: left;
    .el-input__inner,
    .el-input-group__append {
      height: 32px;
      border: none;
      background-color: #fff;
    }
    .el-input-group__append {
      padding-left: 20px;
      padding-right: 16px;
      button {
        padding: 9px 10px;
      }
    }
  }
  .radio {
    float: right;
  }
}
.card-load-btm {
  line-height: 40px;
  text-align: center;
  color: #9e9d9d;
  .spinner {
    margin: auto;
    width: 70px;
    text-align: center;
    div {
      display: inline-block;
      width: 15px;
      height: 15px;
      border-radius: 100%;
      background-color: #9e9e9e;
      -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
      animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }
    .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
    .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }
    div + * {
      margin-left: 5px;
    }
  }
}
.card-container {
  padding: 0 10px;
  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%;
@@ -129,4 +398,4 @@
    }
  }
}
</style>
</style>