1、增加vuex

2、修复问题区卡片不能选中bug

package.json

@@ -23,7 +23,8 @@
     "electron-squirrel-startup": "^1.0.0",
     "element-plus": "^1.0.2-beta.48",
     "stompjs": "^2.3.3",
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@electron-forge/cli": "^6.0.0-beta.57",

src/App.vue

@@ -9,6 +9,8 @@ import TitleBar from "./components/TitleBar.vue";
 import CenterPage from "./components/CenterPage.vue";
 import StatusBar from "./components/StatusBar.vue";
 
+import MessageBridge from "./assets/script/MessageBridge";
+
 export default {
   name: "App",
   components: {
@@ -20,9 +22,18 @@ export default {
     
   },
   created: function () {
-    
+    this.initData()
   },
   methods: {
+    initData: function () {
+      var mb = MessageBridge.getInstance();
+      var vs = [{ key: "/topic/windturbine", action: this.windturbineMessage }];
+      mb.register(vs);
+    },
+    windturbineMessage(msg) {
+      var json = JSON.parse(msg);
+      this.$store.commit('windturbinelist', json)
+    },
   },
 };
 </script>

src/components/area/ProblemArea.vue

@@ -7,21 +7,20 @@
     content-style="89"
     @parentRun="run"
   >
-    <MatrixCard title="故障" :datas="ls.malfunction"></MatrixCard>
-    <MatrixCard title="维护" :datas="ls.maintain"></MatrixCard>
-    <MatrixCard title="离线" :datas="ls.offline"></MatrixCard>
-    <MatrixCard title="挂牌" :datas="ls.lockd"></MatrixCard>
+    <ProblemMatrixCard title="故障" :type="5"></ProblemMatrixCard>
+    <ProblemMatrixCard title="维护" :type="6"></ProblemMatrixCard>
+    <ProblemMatrixCard title="离线" :type="7"></ProblemMatrixCard>
+    <ProblemMatrixCard title="挂牌" :type="-1"></ProblemMatrixCard>
   </gy-card>
 </template>
 
 <script>
-import MatrixCard from "./windturbine/MatrixCard.vue";
-import MessageBridge from "../../assets/script/MessageBridge";
+import ProblemMatrixCard from "./windturbine/problem/ProblemMatrixCard.vue";
 
 export default {
   name: "ProblemArea",
   components: {
-    MatrixCard,
+    ProblemMatrixCard,
   },
   props: {},
   data() {
@@ -32,48 +31,10 @@ export default {
         offline: { key: "离线", value: [] },
         lockd: { key: "挂牌", value: [] },
       },
-      datas: new Array(),
     };
   },
-  computed: {
-    
-  },
-  created: function () {
-    this.initData();
-  },
-  methods: {
-    initData: function () {
-      var mb = MessageBridge.getInstance();
-      var vs = [{ key: "/topic/windturbine", action: this.windturbineMessage }];
-      mb.register(vs);
-    },
-    windturbineMessage(msg) {
-      var ll = {
-        maintain: { key: "维护", value: [] },
-        malfunction: { key: "故障", value: [] },
-        offline: { key: "离线", value: [] },
-        lockd: { key: "挂牌", value: [] },
-      }
-      var mmsg = JSON.parse(msg);
-      for (var id in mmsg) {
-        var val = mmsg[id];
-        if (val.status == 6) {
-          // 维护
-          ll.maintain.value.push(val);
-        } else if (val.status == 7) {
-          // 离线
-          ll.offline.value.push(val);
-        } else if (val.status == 5) {
-          // 故障
-          ll.malfunction.value.push(val);
-        }
-        if (val.lockValue > 0) {
-          // 挂牌
-          ll.lockd.value.push(val);
-        }
-      }
-      this.ls=ll;
-    },
-  },
+  computed: {},
+  created() {},
+  methods: {},
 };
 </script>

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

@@ -11,7 +11,7 @@
             ? 'card-select-' + item.status
             : 'card-unselect-' + item.status
         "
-        @click="onSelectHandler(item.active, item.windturbineId)"
+        @click="onSelectHandler(item)"
       >
         <div
           class="card-left"
@@ -43,62 +43,50 @@
 </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: {},
+  created() {},
   methods: {
-    initData: function () {
-      var mb = MessageBridge.getInstance();
-      var vs = [{ key: "/topic/windturbine", action: this.windturbineMessage }];
-      mb.register(vs);
+    // 点击卡片事件
+    onSelectHandler(item) {
+      item.active = !item.active;
     },
-    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;
+  },
+  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,
+          };
+          // 替换实时刷新的值
+          this.values.splice(i, 1, obj);
         });
-        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>
 
@@ -231,7 +219,6 @@ export default {
   border-left: 2px dashed rgb(05, 187, 76);
 }
 
-
 /* ***********颜色************ */
 /* *********************** */
 /*  最外层卡片选中和未选中 */

src/main.js

@@ -1,10 +1,12 @@
-import {createApp} from 'vue'
+import { createApp } from 'vue'
 import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
 import App from './App.vue';
+import store from './store/index'
 import gyCard from './components/area';
 
 const app = createApp(App)
 app.use(ElementPlus)
 app.use(gyCard)
+app.use(store)
 app.mount('#app')

src/store/index.js

@@ -0,0 +1,27 @@
+import { createStore } from 'vuex'
+
+// 创建一个新的 store 实例
+const store = createStore({
+     // 值的存储  获取: this.$store.state.xxxx
+     state() {
+          return {
+               windturbinelist: Object  // 服务器推送的风机详细信息
+          }
+     },
+
+     //计算state的值  获取: this.$store.getters.xxxx
+     getters: {
+          windturbinelist(state) {
+               return state.windturbinelist;
+          }
+     },
+
+     // 数据更新 使用: this.$store.commit('函数名','val')
+     mutations: {
+          windturbinelist(state, data) {
+               state.windturbinelist = data;
+          }
+     }
+})
+
+export default store