neic-hefeng/src/components/area/windturbine/control/ControlMatrixCard.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, datas: Object,operateStyle:Number },
  data() {
    return {
      values: [],
    };
  },
  created() {},
  methods: {
    // 点击卡片事件
    onSelectHandler(item) {
      item.active = !item.active;
    },
    
    /* 获取选中的项目 */
    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) {
          ls.push(item);
        }
      });
    },

    /* 清除选中的项目 */
    clearSelected() {
      this.values.forEach((item) => (item.active = false));
    },
  },
  watch: {
    "$store.getters.windturbinelist": {
      deep: true,
      handler: function (json) {
        this.datas.value.forEach((item) => {
          var data = json[item];
          var active = undefined;
          var status = data.status;
          // 设置当前状态
          for (var i = 0; i < this.values.length; i++) {
            if (this.values[i].windturbineId == item) {
              active = this.values[i].active;
              break;
            }
          }
          var obj = {
            active: active,
            status: status,
            power: data.power,
            windSpeed: data.windSpeed,
            rollSpeed: data.rollSpeed,
            windturbineId: item,
            modelId:data.modelId,
            projectId:data.projectId,
            stationId:data.stationId,
            controlType:this.operateStyle,
          };
          // 替换实时刷新的值
          this.values.splice(i, 1, obj);
        });
      },
    },
  },
};
</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: 110px;
  height: 49px;
  font-size: 12px;
  margin-top: 5px;
  margin-left: 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-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>