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)"
        @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: { title: String, type: Number, datas: Object },
  data() {
    return {
      values: [],
      dialogVisible: false,
      currentWindturbine:{},
    };
  },
  components: {
    WindturbineDetailPages,
  },
  methods: {
    // 点击卡片事件
    onSelectHandler(item) {
      item.active = !item.active;
    },
    sendMsg: function (itm) {
      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);
      }
    },
  },
  watch: {
    "$store.getters.windturbinelist": {
      deep: true,
      handler: function (json) {
        var vs = {};
        for (var id in json) {
          var val = json[id];
          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;
          }
        }
        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>