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.active, item.windturbineId)"
      >
        <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>
import MessageBridge from "../../../../assets/script/MessageBridge";

export default {
  name: "ControlMatrixCard",
  props: { title: String, datas: Object },
  data() {
    return {
      values: [],
      count: 0,
    };
  },
  created: function () {
    this.initData();
  },
  computed: {},
  methods: {
    initData: function () {
      var mb = MessageBridge.getInstance();
      var vs = [{ key: "/topic/windturbine", action: this.windturbineMessage }];
      mb.register(vs);
    },
    windturbineMessage: function (msg) {
      var json = JSON.parse(msg);
      for (var i = 0; i < this.datas.value.length; i++) {
        var key = this.datas.value[i];
        var data = json[key];
        var active = undefined;
        var status = data.status;
        // 设置当前状态
        this.values.forEach((item) => {
          if (item.windturbineId == key) {
            active = item.active;
          }
        });
        var obj = {
          active: active,
          status: status,
          power: data.power,
          windSpeed: data.windSpeed,
          rollSpeed: data.rollSpeed,
          windturbineId: key,
        };
        // 替换实时刷新的值
        this.values.splice(i, 1, obj);
      }
    },
    // 点击卡片事件
    onSelectHandler(active, windturbineId) {
      this.values.forEach((item) => {
        if (item.windturbineId == windturbineId) item.active = !active;
      });
    },
  },
  components: {
    // ControlWindCard,
  },
};
</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>