|
|
@@ -0,0 +1,363 @@
|
|
|
+<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>
|
