bug：数据不实施刷新、选中状态随着刷新失效

src/App.vue

@@ -27,7 +27,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
 @import "./assets/style/main.css";
 /*#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -41,4 +41,12 @@ export default {
   margin: 0;
   border: none;
 } */
+
+body {
+  /* 设置内容不可选中 */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
 </style>

src/components/area/ControlArea.vue

@@ -6,22 +6,22 @@
     circle-style="green"
     content-style="44"
   >
-    <MatrixCard title="待启动" :datas="ls.start"></MatrixCard>
-    <MatrixCard title="待停机" :datas="ls.stop"></MatrixCard>
-    <MatrixCard title="待维护" :datas="ls.maintain"></MatrixCard>
-    <MatrixCard title="待取消维护" :datas="ls.unmaintain"></MatrixCard>
-    <MatrixCard title="待复位" :datas="ls.reset"></MatrixCard>
+    <ControlMatrixCard title="待启动" :datas="ls.start"></ControlMatrixCard>
+    <ControlMatrixCard title="待停机" :datas="ls.stop"></ControlMatrixCard>
+    <ControlMatrixCard title="待维护" :datas="ls.maintain"></ControlMatrixCard>
+    <ControlMatrixCard title="待取消维护" :datas="ls.unmaintain"></ControlMatrixCard>
+    <ControlMatrixCard title="待复位" :datas="ls.reset"></ControlMatrixCard>
   </gy-card>
 </template>
 
 <script>
-import MatrixCard from "./windturbine/MatrixCard.vue";
+import ControlMatrixCard from "./windturbine/control/ControlMatrixCard.vue";
 import MessageBridge from "../../assets/script/MessageBridge";
 
 export default {
   name: "ControlArea",
   components: {
-    MatrixCard,
+    ControlMatrixCard,
   },
   created: function () {
     this.initData();
@@ -41,59 +41,42 @@ export default {
     initData: function () {
       var mb = MessageBridge.getInstance();
       var vs = [
-        { key: "/topic/windturbine", action: this.windturbineMessage },
         { key: "/topic/suggestion", action: this.suggestion },
       ];
       mb.register(vs);
     },
-    windturbineMessage: function (msg) {
-        var val = JSON.parse(msg);
-        for(var v in this.ls){
-            var vv = this.ls[v];
-            for(var it in vv.value){
-                vv.value[it].status = val[it].status;
-            }
-        }
-    },
-    suggestion: function (msg) {
+    suggestion(msg) {
       var val = JSON.parse(msg);
-      var ll = {
-        start: { key: "待启动", value: [] },
-        stop: { key: "待停机", value: [] },
-        maintain: { key: "待维护", value: [] },
-        unmaintain: { key: "待取消维护", value: [] },
-        reset: { key: "待复位", value: [] },
-      };
       for (var vv in val) {
-          var v = val[vv];
+        var v = val[vv];
+        var windturbineId = parseInt(v.status) + v.windturbineId;
         if (v.adviceOperateStyle == "UnMaintain") {
-          // 推荐取消维护
-          ll.unmaintain.value.push(this.getCardValue(v));
+          if (!this.ls.unmaintain.value.includes(windturbineId)) {
+            this.ls.unmaintain.value.push(windturbineId);
+          }
         } else if (v.adviceOperateStyle == "Start") {
           //推荐启动
-          ll.start.value.push(this.getCardValue(v));
+          if (!this.ls.start.value.includes(windturbineId)) {
+            this.ls.start.value.push(windturbineId);
+          }
         } else if (v.adviceOperateStyle == "Stop") {
           // 推荐停机
-          ll.stop.value.push(this.getCardValue(v));
+          if (!this.ls.stop.value.includes(windturbineId)) {
+            this.ls.stop.value.push(windturbineId);
+          }
         } else if (v.adviceOperateStyle == "Reset") {
           // 推荐复位
-          ll.reset.value.push(this.getCardValue(v));
+          if (!this.ls.reset.value.includes(windturbineId)) {
+            this.ls.reset.value.push(windturbineId);
+          }
         } else if (v.adviceOperateStyle == "Maintain") {
           // 推荐维护
-          ll.maintain.value.push(this.getCardValue(v));
+          if (!this.ls.maintain.value.includes(windturbineId)) {
+            this.ls.maintain.value.push(windturbineId);
+          }
         }
       }
-      this.ls=ll;
     },
-    getCardValue(val){
-        return {
-            status:0,
-            power:0,
-            windSpeed:0,
-            rollSpeed:0,
-            windturbineId:val.windturbineId,
-        }
-    }
   },
 };
 </script>

src/components/area/windturbine/MatrixCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main">
+  <div class="main" v-if="values.length > 0">
     <div>{{ title }}</div>
     <div class="content">
       <WindturbineMinCard

src/components/area/windturbine/control/ControlMatrixCard.vue

@@ -0,0 +1,233 @@
+<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].slice(1);
+        var data = json[key];
+        var active = undefined;
+        var status = this.datas.value[i].slice(0, 1);
+        // 设置当前状态
+        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-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);
+}
+</style>