neic-hefeng/src/components/problem/ProblemMatrixCard.vue

<template>
  <div class="main" v-if="values.length > 0">
    <div>{{ title }}</div>
    <div class="content">
      <div class="card" v-for="(item, index) in values" :key="index" :class="
          item.active
            ? 'card-select-' + item.status
            : 'card-unselect-' + item.status
        " @click="onSelectHandler(item)" @dblclick="sendMsg(item)">
        <div class="card-left" :class="
            item.active
              ? 'card-left-select-' + item.status
              : 'card-left-unselect-' + item.status
          ">
          <div>{{ item.windturbineId.slice(0, 2) }}</div>
          <div>{{ item.windturbineId.slice(5) }}</div>
        </div>
        <div class="card-right" :class="
            item.active
              ? 'card-right-select-' + item.status
              : 'card-right-unselect-' + item.status
          ">
          <div class="rightrow">{{ item.windSpeed.toFixed(2) }} m/s</div>
          <div class="rightrow">{{ item.power.toFixed(2) }} kw</div>
          <div class="rightrow">{{ item.rollSpeed.toFixed(2) }} rpm</div>
        </div>
      </div>
    </div>
    <div class="bottom"></div>
  </div>
  <!-- <WindturbineDetailPages v-model="dialogVisible" :windturbine="currentWindturbine"></WindturbineDetailPages> -->
</template>

<script>
  // import WindturbineDetailPages from "../WindturbineDetailPages.vue";
  export default {
    name: "ControlMatrixCard",
    props: {
      // dateClick,
      title: String,
      type: Number,
      datas: Object,
      flag: {
        type: Boolean,
        default: false,
      }
    },
    data() {
      return {
        values: [],
        dialogVisible: false,
        currentWindturbine: {},
        cacheFlag: false,
      };
    },
    components: {
      // WindturbineDetailPages,
    },
    methods: {
      
      // 点击卡片事件
      onSelectHandler(item) {
        item.active = !item.active;
      },
      sendMsg: function (itm) {
        if (this.flag) {
          this.$emit("showWindows", itm);
        } else {
          this.dialogVisible = true;
          this.currentWindturbine = itm;
        }
      },
      filter(value, windturbineId) {
        var array = [];
        var flag = false;
        for (var i = 0; i < value.length; i++) {
          if (value[i].windturbineId == windturbineId) {
            flag = true;
            array.push(flag); // 风机是否已经存在
            array.push(i); // 风机在values数组的位置
            array.push(value[i].active); // 当前风机是否被选中
            break;
          }
        }
        return array;
      },
      addCard(val) {
        var active = false;
        var array = this.filter(this.values, val.windturbineId);
        if (!array[0]) {
          // 维护
          val.active = active;
          if (val.modelId.indexOf("105") >= 0) {
            val.rollSpeed *= 9.55;
          }
          this.values.push(val);
        } else {
          val.active = array[2];
          this.values.splice(array[1], 1, val);
        }
      },
      /* 获取选中的项目 */
      getSelectedItems() {
        var ls = new Array();
        this.values.forEach((item) => {
          if (item.active) {
            ls.push(item);
          }
        });
        return ls;
      },
      /* 将选中的项目填充到数组中 */
      outputSelectedItems(ls) {
        this.values.forEach((item) => {
          if (item.active && !this.isHas(item, ls)) {
            ls.push(item);
          }
        });
      },

      /* 清除选中的项目 */
      clearSelected() {
        this.values.forEach((item) => (item.active = false));
      },

      isHas(item, ls) {
        for (var id in ls) {
          if (ls[id].windturbineId == item.windturbineId) {
            return true;
          }
        }
        return false;
      },

      clear(vs) {
        var ll = new Array();
        this.values.forEach((item) => {
          var it = vs[item.windturbineId];
          if (typeof it === "undefined") {
            ll.push(item);
          }
        });
        for (var v1 in ll) {
          var ind = this.values.indexOf(ll[v1]);
          if (ind < 0) continue;
          this.values.splice(ind, 1);
        }
      },
      dateClick(type){
        console.log(this.cacheDate);
        var vs = {};
        var address = ''
          switch (type) {
            case 0:
              address = 'MG'
              break;
            case 1:
              address = 'NG'
              break;
            case 2:
              address = 'QG'
              break;
            case 3:
              address = 'SG'
              break;
            case 4:
              address = 'XG'
              break;
          }
          let arr = Object.keys(this.cacheDate).sort()
          for (var id of arr) {
            var val = this.cacheDate[id];
            if (val.windturbineId.substring(0, 2) === address) {
                this.addCard(val);
                vs[val.windturbineId] = 0;
              }
          }
          this.clear(vs);
      },
    },
    watch: {
      "$store.getters.windturbinelist": {
        deep: true,
        handler: function (json) {
          var vs = {};
          var address = ''
          switch (this.type) {
            case 0:
              address = 'MG'
              break;
            case 1:
              address = 'NG'
              break;
            case 2:
              address = 'QG'
              break;
            case 3:
              address = 'SG'
              break;
            case 4:
              address = 'XG'
              break;
          }
          if (this.flag && !this.cacheFlag){
            this.cacheDate = json
            this.cacheFlag = true
          }
          let arr = Object.keys(json).sort()
          for (var id of arr) {
            var val = json[id];
            if (this.flag) {
              if (val.windturbineId.substring(0, 2) === address) {
                this.addCard(val);
                vs[val.windturbineId] = 0;
              }
            } else {
              if (val.status == this.type) {
                this.addCard(val);
                vs[val.windturbineId] = 0;
              }
              if (this.type < 0 && val.lockValue) {
                this.addCard(val);
                vs[val.windturbineId] = 0;
              }
            }
          }
          // console.log(this.values);
          this.clear(vs);
        },
      },
    },
  };
</script>

<style scoped>
  .rightrow {
    margin-right: 3px;
  }

  .content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .bottom {
    background-color: #292929;
    width: 100%;
    height: 2px;
    margin-top: 5px;
  }

  .main {
    margin: 0 5px 15px 5px;
  }

  /*  最外层卡片 */
  .card {
    width: 112px;
    height: 49px;
    font-size: 12px;
    margin-left: 3px;
    margin-top: 4px;
    display: flex;
    flex-direction: row;
    cursor: pointer;
    /* border: 2px solid rgb(75, 85, 174); */
  }

  /*  卡片左边部分 */
  .card-left {
    width: 25px;
    margin: 3px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    /* background-color: rgb(75, 85, 174); */
  }

  /* 卡片右边部分 */
  .card-right {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
    padding-right: 3px;
    /* border-left: 2px dashed rgb(75, 85, 174); */
  }

  /* ***********颜色************ */
  /* *********************** */
  /*  最外层卡片选中和未选中 */
  .card-select-0 {
    border: 2px solid rgb(255, 255, 255, 0.5);
  }

  .card-unselect-0 {
    border: 2px solid rgb(255, 255, 255);
  }

  /*  左边卡片选中和未选中 */
  .card-left-select-0 {
    background-color: rgb(255, 255, 255, 0.5);
    color: rgb(0, 0, 0, 0.5);
  }

  .card-left-unselect-0 {
    background-color: rgb(255, 255, 255, .5);
    color: rgb(0, 0, 0);
  }

  /*  右边卡片选中和未选中 */
  .card-right-select-0 {
    border-left: 2px dashed rgb(255, 255, 255, 0.5);
  }

  .card-right-unselect-0 {
    border-left: 2px dashed rgb(255, 255, 255, .5);
    background-color: rgb(255, 255, 255, .15);
  }

  /* ***********颜色************ */
  /* *********************** */
  /*  最外层卡片选中和未选中 */
  .card-select-1 {
    border: 2px solid rgb(197, 48, 200, 0.5);
  }

  .card-unselect-1 {
    border: 2px solid rgb(197, 48, 200);
  }

  .card-select-1 {
    border: 2px solid rgb(197, 48, 200, 0.5);
  }

  /*  左边卡片选中和未选中 */
  .card-left-select-1 {
    background-color: rgb(197, 48, 200, 0.5);
  }

  .card-left-unselect-1 {
    background-color: rgb(197, 48, 200, .5);
  }

  /*  右边卡片选中和未选中 */
  .card-right-select-1 {
    border-left: 2px dashed rgb(197, 48, 200, 0.5);
  }

  .card-right-unselect-1 {
    border-left: 2px dashed rgb(197, 48, 200, .5);
    background-color: rgb(197, 48, 200, .15);
  }

  /* ***********颜色************ */
  /* *********************** */
  /*  最外层卡片选中和未选中 */
  .card-select-2 {
    border: 2px solid rgb(05, 187, 76, 0.5);
  }

  .card-unselect-2 {
    border: 2px solid rgb(05, 187, 76);
  }

  .card-select-2 {
    border: 2px solid rgb(05, 187, 76, 0.5);
  }

  /*  左边卡片选中和未选中 */
  .card-left-select-2 {
    background-color: rgb(05, 187, 76, 0.5);
  }

  .card-left-unselect-2 {
    background-color: rgb(05, 187, 76, .5);
  }

  /*  右边卡片选中和未选中 */
  .card-right-select-2 {
    border-left: 2px dashed rgb(05, 187, 76, 0.5);
  }

  .card-right-unselect-2 {
    border-left: 2px dashed rgb(05, 187, 76, .5);
    background-color: rgb(05, 187, 76, .15);
  }

  /* ***********颜色************ */
  /* *********************** */
  /*  最外层卡片选中和未选中 */
  .card-select-3 {
    border: 2px solid rgb(05, 187, 76, 0.5);
  }

  .card-unselect-3 {
    border: 2px solid rgb(05, 187, 76);
  }

  .card-select-3 {
    border: 2px solid rgb(05, 187, 76, 0.5);
  }

  /*  左边卡片选中和未选中 */
  .card-left-select-3 {
    background-color: rgb(05, 187, 76, 0.5);
  }

  .card-left-unselect-3 {
    background-color: rgb(05, 187, 76, .5);
  }

  /*  右边卡片选中和未选中 */
  .card-right-select-3 {
    border-left: 2px dashed rgb(05, 187, 76, 0.5);
  }

  .card-right-unselect-3 {
    border-left: 2px dashed rgb(05, 187, 76, .5);
    background-color: rgb(05, 187, 76, .15);
  }

  /* ***********颜色************ */
  /* *********************** */
  /*  最外层卡片选中和未选中 */
  .card-select-4 {
    border: 2px solid rgb(75, 85, 174, 0.5);
  }

  .card-unselect-4 {
    border: 2px solid rgb(75, 85, 174);
  }

  .card-select-4 {
    border: 2px solid rgb(75, 85, 174, 0.5);
  }

  /*  左边卡片选中和未选中 */
  .card-left-select-4 {
    background-color: rgb(75, 85, 174, 0.5);
  }

  .card-left-unselect-4 {
    background-color: rgb(75, 85, 174, .5);
  }

  /*  右边卡片选中和未选中 */
  .card-right-select-4 {
    border-left: 2px dashed rgb(75, 85, 174, 0.5);
  }

  .card-right-unselect-4 {
    border-left: 2px dashed rgb(75, 85, 174, .5);
    background-color: rgb(75, 85, 174, .15);
  }

  /* ***********颜色************ */
  /* *********************** *
/*  最外层卡片选中和未选中 */
  .card-select-5 {
    border: 2px solid rgb(186, 50, 55, 0.5);
  }

  .card-unselect-5 {
    border: 2px solid rgb(186, 50, 55);
  }

  .card-select-5 {
    border: 2px solid rgb(186, 50, 55, 0.5);
  }

  /*  左边卡片选中和未选中 */
  .card-left-select-5 {
    background-color: rgb(186, 50, 55, 0.5);
  }

  .card-left-unselect-5 {
    background-color: rgb(186, 50, 55, .5);
  }

  /*  右边卡片选中和未选中 */
  .card-right-select-5 {
    border-left: 2px dashed rgb(186, 50, 55, 0.5);
  }

  .card-right-unselect-5 {
    border-left: 2px dashed rgb(186, 50, 55, .5);
    background-color: rgb(186, 50, 55, .15);
  }

  /* ***********颜色************ */
  /* *********************** *
/*  最外层卡片选中和未选中 */
  .card-select-6 {
    border: 2px solid rgb(225, 125, 36, 0.5);
  }

  .card-unselect-6 {
    border: 2px solid rgb(225, 125, 36);
  }

  .card-select-6 {
    border: 2px solid rgb(225, 125, 36, 0.5);
  }

  /*  左边卡片选中和未选中 */
  .card-left-select-6 {
    background-color: rgb(225, 125, 36, 0.5);
  }

  .card-left-unselect-6 {
    background-color: rgb(225, 125, 36, .5);
  }

  /*  右边卡片选中和未选中 */
  .card-right-select-6 {
    border-left: 2px dashed rgb(225, 125, 36, 0.5);
  }

  .card-right-unselect-6 {
    border-left: 2px dashed rgb(225, 125, 36, .5);
    background-color: rgb(225, 125, 36, .15);
  }

  /* ***********颜色************ */
  /* *********************** *
/*  最外层卡片选中和未选中 */
  .card-select-7 {
    border: 2px solid rgb(96, 103, 105, 0.5);
  }

  .card-unselect-7 {
    border: 2px solid rgb(96, 103, 105);
  }

  .card-select-7 {
    border: 2px solid rgb(96, 103, 105, 0.5);
  }

  /*  左边卡片选中和未选中 */
  .card-left-select-7 {
    background-color: rgb(96, 103, 105, 0.5);
  }

  .card-left-unselect-7 {
    background-color: rgb(96, 103, 105, .5);
  }

  /*  右边卡片选中和未选中 */
  .card-right-select-7 {
    border-left: 2px dashed rgb(96, 103, 105, 0.5);
  }

  .card-right-unselect-7 {
    border-left: 2px dashed rgb(96, 103, 105, .5);
    background-color: rgb(96, 103, 105, .15);
  }
</style>