project-neic/src/components/area/windturbine/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)"
      >
        <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>{{ item.power.toFixed(2) }} kw</div>
          <div>{{ item.windSpeed.toFixed(2) }} m/s</div>
          <div>{{ item.rollSpeed.toFixed(2) }} rpm</div>
        </div>
      </div>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
export default {
  name: "ControlMatrixCard",
  props: { title: String, type: Number, datas: Object },
  data() {
    return {
      values: [],
    };
  },
  created() {},
  methods: {
    // 点击卡片事件
    onSelectHandler(item) {
      item.active = !item.active;
    },
    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;
    },
  },
  watch: {
    "$store.getters.windturbinelist": {
      deep: true,
      handler: function (json) {
        for (var id in json) {
          var val = json[id];
          if (val.status == this.type) {
            var active = false;
            var array = this.filter(this.values, val.windturbineId);
            if (!array[0]) {
              // 维护
              val.active = active;
              this.values.push(val);
            } else {
              val.active = array[2];
              this.values.splice(array[1], 1, val);
            }
          }
        }
      },
    },
  },
};
</script>

<style scoped>
.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: 50px;
  font-size: 12px;
  margin-right: 3px;
  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-select-0 {
  border: 2px solid rgb(255, 255, 255, 0.5);
}
/*  左边卡片选中和未选中 */
.card-left-select-0 {
  background-color: rgb(255, 255, 255, 0.5);
}
.card-left-unselect-0 {
  background-color: rgb(255, 255, 255);
}
/*  右边卡片选中和未选中 */
.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);
}

/* ***********颜色************ */
/* *********************** */
/*  最外层卡片选中和未选中 */
.card-select-1 {
  border: 2px solid rgb(121, 73, 81, 0.5);
}
.card-unselect-1 {
  border: 2px solid rgb(121, 73, 81);
}
.card-select-1 {
  border: 2px solid rgb(121, 73, 81, 0.5);
}
/*  左边卡片选中和未选中 */
.card-left-select-1 {
  background-color: rgb(121, 73, 81, 0.5);
}
.card-left-unselect-1 {
  background-color: rgb(121, 73, 81);
}
/*  右边卡片选中和未选中 */
.card-right-select-1 {
  border-left: 2px dashed rgb(121, 73, 81, 0.5);
}
.card-right-unselect-1 {
  border-left: 2px dashed rgb(121, 73, 81);
}

/* ***********颜色************ */
/* *********************** */
/*  最外层卡片选中和未选中 */
.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);
}
/*  右边卡片选中和未选中 */
.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);
}

/* ***********颜色************ */
/* *********************** */
/*  最外层卡片选中和未选中 */
.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);
}
/*  右边卡片选中和未选中 */
.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);
}

/* ***********颜色************ */
/* *********************** */
/*  最外层卡片选中和未选中 */
.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);
}
/*  右边卡片选中和未选中 */
.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);
}

/* ***********颜色************ */
/* *********************** *
/*  最外层卡片选中和未选中 */
.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);
}
/*  右边卡片选中和未选中 */
.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);
}

/* ***********颜色************ */
/* *********************** *
/*  最外层卡片选中和未选中 */
.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);
}
/*  右边卡片选中和未选中 */
.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);
}

/* ***********颜色************ */
/* *********************** *
/*  最外层卡片选中和未选中 */
.card-select-7 {
  border: 2px solid rgb(159, 163, 165, 0.5);
}
.card-unselect-7 {
  border: 2px solid rgb(159, 163, 165);
}
.card-select-7 {
  border: 2px solid rgb(159, 163, 165, 0.5);
}
/*  左边卡片选中和未选中 */
.card-left-select-7 {
  background-color: rgb(159, 163, 165, 0.5);
}
.card-left-unselect-7 {
  background-color: rgb(2159, 163, 165);
}
/*  右边卡片选中和未选中 */
.card-right-select-7 {
  border-left: 2px dashed rgb(159, 163, 165, 0.5);
}
.card-right-unselect-7 {
  border-left: 2px dashed rgb(159, 163, 165);
}
</style>