hb_sis_zhfx/src/views/WindSite/pages/Info/Warning.vue

<template>
  <div class="wind-site-warning">
    <div class="search pd-16">
      <el-row class="mg-b-16">
        <div class="query">
          <input class="search-input" name="query" v-model="query" />
        </div>
        <button class="btn search" @click="search">搜索</button>
        <div class="empty"></div>
        <button class="btn empty-btn" @click="reset">重置</button>
      </el-row>
      <el-row class="options">
        <el-col class="option-item" :span="8" v-for="(option, index) in options" :key="option" @click="onOptionClick(option, index)" :class="{ active: option.isActive, 'has-value': option.count != '' }">
          <div class="count">{{ option.count }}</div>
          <div class="text">{{ option.text }}</div>
        </el-col>
      </el-row>
    </div>
    <div class="warning-list">
      <Table :data="warning" />
    </div>
  </div>
</template>

<script>
import Table from "../../../../components/coms/table/table.vue";
export default {
  components: {
    Table,
  },
  data() {
    return {
      query: "",
      options: [],
      ackupData: {},
      warning: {
        column: [
          // {
          //   name: "报警编号",
          //   field: "Code",
          //   is_num: true, // 是否为数字
          // },
          {
            name: "PLC变量名",
            field: "name",
          },
          {
            name: "报警信息",
            field: "value",
          },
          {
            name: "报警状态",
            field: "data1",
            template: function(data) {
              if (data === 1) return "<div class='error-state'></div>";
              else return "正常";
            },
          },
        ],
        data: [],
      },
      activeArray: [],
      isSearch: false,
    };
  },

  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },

  mounted() {
    this.backupData = this.BASE.deepCopy(this.data);
    this.riseData(this.data);
  },

  methods: {
    onOptionClick(option, index) {
      option.isActive = !option.isActive;
      this.activeArray[index] = !this.activeArray[index];

      let warningData = [];

      this.activeArray.forEach((bool, index) => {
        if (bool) {
          this.options[index].vos.forEach((ele) => {
            warningData.push(ele);
          });
        }
      });

      this.warning.data = warningData;
      this.isSearch = false;
      this.query = "";
    },

    // 格式化数据
    riseData(data) {
      let options = [];
      let warningData = [];
      let index = 0;

      for (let key in data) {
        data.index = index;

        if (this.activeArray.length < index + 1) {
          this.activeArray.push(false);
        }

        options.push({
          id: data[key].id,
          text: data[key].name,
          vos: data[key].vos,
          count: data[key].vos.length,
          isActive: this.activeArray[index],
        });

        if (this.activeArray[index]) {
          data[key].vos.forEach((ele) => {
            warningData.push(ele);
          });
        }

        index++;
      }

      this.options = options;
      this.warning.data = warningData;

      if (this.isSearch) {
        this.search();
      }
    },

    search() {
      // 压器类总
      this.isSearch = true;
      if (this.query) {
        let warningData = [];
        this.BASE.deepCopy(this.warning.data).forEach((ele) => {
          if (ele.name.indexOf(this.query) !== -1) {
            warningData.push(ele);
          }
        });
        this.warning.data = warningData;
      } else {
        this.riseData(this.data);
      }
    },

    reset() {
      for (let i = 0; i < this.activeArray.length; i++) {
        this.activeArray[i] = false;
      }

      this.isSearch = false;
      this.query = "";
      let sourceMap = this.BASE.deepCopy(this.backupData);
      this.riseData(sourceMap, true);
    },
  },

  watch: {
    data(res) {
      this.backupData = this.BASE.deepCopy(res);
      this.riseData(res);
    },
  },
};
</script>

<style lang="less">
.wind-site-warning {
  border: 1px solid @darkgray;

  .search {
    .query {
      height: 100%;
      flex: 0 0 auto;
      .search-input {
        background: transparent;
        border: 1px solid @darkgray;
        padding: 0.741vh;
        color: @gray;
        outline: unset;
        border-radius: 0%;
        margin-right: 0.741vh;
      }
    }

    button {
      height: 100%;
      flex: 0 0 auto;
      background: transparent;
      border: 1px solid @darkgray;
      padding: 0.741vh 1.481vh;
      color: @gray;
      font-size: @fontsize-s;
      cursor: pointer;
    }

    .empty {
      flex: auto;
    }

    .options {
      .option-item {
        display: flex;
        padding-bottom: 0.741vh;
        color: @gray;
        cursor: pointer;
        font-size: @fontsize-s;

        .count {
          flex: 0 0 3.704vh;
          padding: 0.37vh;
          text-align: center;
          border: 1px solid @darkgray;
          margin-right: 0.37vh;
          line-height: 2.222vh;
        }

        .text {
          flex: 1 0 auto;
          padding: 0.741vh;
          text-align: center;
          border: 1px solid @darkgray;
        }

        & + .option-item {
          padding-left: 0.741vh;
        }

        &:nth-child(3n + 1) {
          padding-left: 0px;
        }

        &.has-value {
          .text,
          .count {
            border-color: @purple;
            color: @purple;
          }
        }

        &.active,
        &:hover {
          .text,
          .count {
            border-color: @green;
            color: @green;
          }
        }
      }
    }
  }

  .warning-list {
    .error-state {
      width: 0.741vh;
      height: 0.741vh;
      border-radius: 50%;
      background-color: @red;
      margin: auto;
    }

    tbody {
      height: 571px;
    }
  }
}
</style>