数据绑定通过

.gitignore

@@ -25,4 +25,7 @@ node_modules
 
 #Electron-builder output
 /dist_electron
-/out
+/out
+
+#vs
+.vs

src/components/area/ControlArea.vue

@@ -1,7 +1,58 @@
 /* 控制区 */
 <template>
-    <gy-card title="控制区" area-style="control" circle-style="green" content-style="44">
-        <div>动态内容</div>
-    </gy-card>
+  <gy-card
+    title="控制区"
+    area-style="control"
+    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>
+  </gy-card>
 </template>
 
+<script>
+import MatrixCard from "./windturbine/MatrixCard.vue";
+import MessageBridge from "../../assets/script/MessageBridge";
+
+export default {
+  name: "ControlArea",
+  components: {
+    MatrixCard,
+  },
+  created: function () {
+    this.initData();
+  },
+  data() {
+    return {
+      ls: {
+        start: { key: "待启动", value: [] },
+        stop: { key: "待停机", value: [] },
+        maintain: { key: "待维护", value: [] },
+        unmaintain: { key: "待取消维护", value: [] },
+        reset: { key: "待复位", value: [] },
+      },
+    };
+  },
+  methods: {
+    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) {
+      console.log(msg);
+    },
+    suggestion: function (msg) {
+      console.log(msg);
+    },
+  },
+};
+</script>
+

src/components/area/ProblemArea.vue

@@ -66,7 +66,8 @@ export default {
         } else if (val.status == 5) {
           // 故障
           ll.malfunction.value.push(val);
-        } else if (val.lockValue > 0) {
+        }
+        if (val.lockValue > 0) {
           // 挂牌
           ll.lockd.value.push(val);
         }

src/components/area/RecommendedArea.vue

@@ -1,6 +1,30 @@
 /* 推荐区 */
 <template>
-    <gy-card title="推荐区" area-style="recommended" circle-style="green" content-style="37">
-        <div>动态内容</div>
-    </gy-card>
+  <gy-card
+    title="推荐区"
+    area-style="recommended"
+    circle-style="green"
+    content-style="37"
+  >
+    <div>动态内容</div>
+  </gy-card>
 </template>
+
+<script>
+export default {
+  name: "RecommendedArea",
+  props: ["datas"],
+  data() {
+    return {
+      
+    };
+  },
+  mounted() {
+    
+  },
+  watch: {
+    
+  },
+};
+</script>
+

src/components/area/windturbine/MatrixCard.vue

@@ -2,9 +2,14 @@
   <div class="main">
     <div>{{ title }}</div>
     <div class="content">
-      <div v-for="vs in aa" :key="vs">
-        <WindturbineMinCard :status="vs.status"></WindturbineMinCard>
-      </div>
+      <WindturbineMinCard
+        v-for="vs in values"
+        :key="vs"
+        :status="vs.status"
+        :power="vs.power"
+        :windSpeed="vs.windSpeed"
+        :rollSpeed="vs.rollSpeed"
+      ></WindturbineMinCard>
     </div>
     <div class="bottom"></div>
   </div>
@@ -17,12 +22,12 @@ export default {
   props: ["title", "datas"],
   data() {
     return {
-      aa: [],
+      values: [],
     };
   },
 
   mounted() {
-    this.aa = this.datas.value || [];
+    this.values = this.datas.value || [];
   },
 
   components: {
@@ -31,7 +36,7 @@ export default {
 
   watch: {
     datas(val) {
-      this.aa = val.value;
+      this.values = val.value;
     },
   },
 };

src/components/area/windturbine/WindturbineMinCard.vue

@@ -12,13 +12,13 @@
             </div>
             <div :class="rightStyle">
                 <el-row>
-                    <div :class="contentStyle" style="font-size: 12px;">123.54 kw</div>
+                    <div :class="contentStyle" style="font-size: 12px;">{{power.toFixed(2)}} kw</div>
                 </el-row>
                 <el-row>
-                    <div :class="contentStyle" style="font-size: 12px;">8.23 m/s</div>
+                    <div :class="contentStyle" style="font-size: 12px;">{{windSpeed.toFixed(2)}} m/s</div>
                 </el-row>
                 <el-row>
-                    <div :class="contentStyle" style="font-size: 12px;">1234.56 rpm</div>
+                    <div :class="contentStyle" style="font-size: 12px;">{{rollSpeed.toFixed(2)}} rpm</div>
                 </el-row>
             </div>
         </el-row>
@@ -30,6 +30,9 @@
         name: "WindturbineMinCard",
         props: {
             status: Number,
+            power:Number,
+            windSpeed:Number,
+            rollSpeed:Number,
         },
         data() {
             return {