卡片模式的相关调整

shuishen

2021-04-09 6f58ac928c7b9d9ef463dcd6d01826626b4e6d6e

卡片模式的相关调整

 src/api/supervisory/card.js

@@ -1,9 +1,9 @@
import request from '@/router/axios';

export const getList = () => {
export const getList = (res) => {
  return request({
    url: '/api/blade-jfpts/equipment/equipment/listAll',
    method: 'get',
    params: {}
    params: {...res}
  })
}

 src/views/supervisoryConsole/card.vue

@@ -7,12 +7,17 @@
          v-model="inputSearchValue"
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
          <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-group>
@@ -29,7 +34,7 @@
        v-for="(item, index) in option"
        :key="index"
      >
       <!-- @click.stop="goToDetails(item.deviceNumber)" -->
        <!-- @click.stop="goToDetails(item.deviceNumber)" -->
        <a :href="'/#/dataL/index?deviceNumber=' + item.deviceNumber">
          <el-card
            :style="
@@ -86,7 +91,7 @@
      option: [],
      count: [],
      loading: false,
      radio: "仅显示设备在线",
      radio: "全部",
      inputSearchValue: "",
    };
  },
@@ -99,30 +104,7 @@
    },
  },
  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);
      });

      var d = a.concat(c.concat(b));

      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.getEquipmentLists();
  },

  methods: {
@@ -142,8 +124,54 @@
    siteStatus(value, e) {
      console.log(this.radio, value);
    },
    goToDetails(data) {
      this.$router.push({ path: "/dataL ", query: data });
    inputSearchBtn() {
      this.getEquipmentLists();
    },

    siteStatus() {
      this.inputSearchValue = "";
      this.getEquipmentLists();
    },

    getEquipmentLists() {
      getList({ deviceName: this.inputSearchValue }).then((res) => {
        var a = [],
          b = [],
          c = [];
        if (this.radio == "全部") {
          res.data.data.forEach((item) => {
            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.state == "" && item.onlineStatus == 1) c.push(item);
          });
        } else if (this.radio == "仅显示设备掉线") {
          res.data.data.forEach((item) => {
            if (item.state == "" && item.onlineStatus != 1) b.push(item);
          });
        } else if (this.radio == "仅显示设备故障") {
          res.data.data.forEach((item) => {
            if (item.state != "") a.push(item);
          });
        }

        var d = a.concat(c.concat(b));

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