数据接入

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <TitleBar />
-  <CenterPage ref="center" :problemDatas="problemDatas" :values="values"></CenterPage>
+  <CenterPage/>
   <StatusBar />
 </template>
 
@@ -8,7 +8,6 @@
 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",
@@ -21,52 +20,9 @@ export default {
     
   },
   created: function () {
-    this.initData();
+    
   },
   methods: {
-    initData() {
-      var mb = MessageBridge.getInstance();
-      var vs = [
-        { key: "/topic/windturbine", action: this.windturbineMessage },
-        { key: "/topic/suggestion", action: this.suggestion },
-      ];
-      mb.register(vs);
-    },
-    windturbineMessage(msg) {
-      console.log(msg);
-      var val = JSON.parse(msg);
-      this.problem(val);
-      this.$refs.center.windturbineInfo(msg);
-      console.log(val);
-    },
-
-    suggestion(msg) {
-      console.log(msg);
-    },
-
-    problem(msg) {
-      var ls = { maintain: [], malfunction: [], offline: [], lockd: [] };
-      for (var id in msg) {
-        var val = msg[id];
-        if (val.status == 6) {
-          // 维护
-          ls.maintain.push(val);
-        } else if (val.status == 7) {
-          // 离线
-          ls.offline.push(val);
-          console.log(id);
-        } else if (val.status == 5) {
-          // 故障
-          ls.malfunction.push(val);
-          console.log(id);
-        } else if (val.lockValue > 0) {
-          // 挂牌
-          ls.lockd.push(val);
-          console.log(id);
-        }
-      }
-      this.problemDatas=ls;
-    },
   },
 };
 </script>

src/assets/script/MessageBridge.js

@@ -36,7 +36,9 @@ export default class MessageBridge {
     if (msg.command != "MESSAGE" || !msg.headers.destination) return;
     var os = this.getActions(msg.headers.destination);
     for (var id in os) {
-      os[id].action(msg.body);
+      try{
+        os[id].action(msg.body);
+      }catch(e){console.log(e);}
     }
   }
 

src/components/CenterPage.vue

@@ -1,86 +1,105 @@
 /* 中间页面 */
 <template>
-    <div class='center-bar'>
-        <el-row :gutter="10">
-            <el-col :span="8">
-                <ProblemArea ref="problem" :datas="problemDatas"/>
-            </el-col>
-            <el-col :span="8">
-                <el-row>
-                    <el-col :span="24">
-                        <CheckArea/>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="24">
-                        <ControlArea/>
-                    </el-col>
-                </el-row>
-            </el-col>
-            <el-col :span="8">
-                <el-row>
-                    <el-col :span="24">
-                        <RecommendedArea/>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="24">
-                        <LabelArea/>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="24">
-                        <AlarmArea/>
-                    </el-col>
-                </el-row>
-            </el-col>
+  <div class="center-bar">
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <ProblemArea ref="problempg" :problems="problems" />
+      </el-col>
+      <el-col :span="8">
+        <el-row>
+          <el-col :span="24">
+            <CheckArea />
+          </el-col>
         </el-row>
-    </div>
+        <el-row>
+          <el-col :span="24">
+            <ControlArea />
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="8">
+        <el-row>
+          <el-col :span="24">
+            <RecommendedArea />
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <LabelArea />
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <AlarmArea />
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 <script>
-    import AlarmArea from './area/AlarmArea.vue'
-    import CheckArea from './area/CheckArea.vue'
-    import ControlArea from './area/ControlArea.vue'
-    import LabelArea from './area/LabelArea.vue'
-    import ProblemArea from './area/ProblemArea.vue'
-    import RecommendedArea from './area/RecommendedArea.vue'
+import AlarmArea from "./area/AlarmArea.vue";
+import CheckArea from "./area/CheckArea.vue";
+import ControlArea from "./area/ControlArea.vue";
+import LabelArea from "./area/LabelArea.vue";
+import ProblemArea from "./area/ProblemArea.vue";
+import RecommendedArea from "./area/RecommendedArea.vue";
 
-    export default {
-        components: {
-            AlarmArea,
-            CheckArea,
-            ControlArea,
-            LabelArea,
-            ProblemArea,
-            RecommendedArea
-        },
-        props:{
-            problemDatas:Array,
-        },
-        methods:{
-            windturbineInfo(infos){
-                console.log(infos);
-            }
+export default {
+  components: {
+    AlarmArea,
+    CheckArea,
+    ControlArea,
+    LabelArea,
+    ProblemArea,
+    RecommendedArea,
+  },
+  props: {
+    /* temp: {
+      type: Onject | Array,
+      default: [],
+    }, */
+  },
+  created: function () {
+      
+  },
+  computed: {
+    problems: {
+      get: function () {
+        return this.datas;
+      },
+      set: function (params) {
+        this.datas = params;
+        this.$refs.problempg.problems = params;
+      },
+    },
+  },
+  methods: {
 
-        }
-    }
+  },
+  watch: {
+    /* temp(res) {
+      this.mapData = res;
+    }, */
+  },
+};
 </script>
 
 <style scoped>
-    .center-bar {
-        position: relative;
-        box-sizing: border-box;
-        height: 90vh;
-        background-color: #000000;
-        padding-top: 10px;
-        padding-left: 5px;
-        padding-right: 5px;
-        padding-bottom: 5px;
-        margin-top: 0;
-        margin-right: 0;
-        margin-bottom: 3px;
-        margin-left: 0;
-        display: flex;
-        flex-direction: column;
-    }
+.center-bar {
+  position: relative;
+  box-sizing: border-box;
+  height: 90vh;
+  background-color: #000000;
+  padding-top: 10px;
+  padding-left: 5px;
+  padding-right: 5px;
+  padding-bottom: 5px;
+  margin-top: 0;
+  margin-right: 0;
+  margin-bottom: 3px;
+  margin-left: 0;
+  display: flex;
+  flex-direction: column;
+}
 </style>

src/components/area/ProblemArea.vue

@@ -1,39 +1,78 @@
 /* 问题区 */
 <template>
-    <gy-card
-            title="问题区"
-            area-style="problem"
-            circle-style="green"
-            content-style="89"
-            @parentRun="run">
-        <div v-for="mc in datas" :key="mc">
-            <MatrixCard title="故障"></MatrixCard>
-        </div>
-    </gy-card>
+  <gy-card
+    title="问题区"
+    area-style="problem"
+    circle-style="green"
+    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>
+  </gy-card>
 </template>
 
 <script>
-    import MatrixCard from "./windturbine/MatrixCard.vue";
+import MatrixCard from "./windturbine/MatrixCard.vue";
+import MessageBridge from "../../assets/script/MessageBridge";
 
-    export default {
-        name: "ProblemArea",
-        components: {
-            MatrixCard
-        },
-        props:{
-            datas:Array,
-            values:Array,
-        },
-        methods: {
-            run() {
-            },
-            addCard() {
-            }
-        },
-        created: function () {
-            this.addCard({
-                cardStyle: "card-style-1"
-            });
-        }
+export default {
+  name: "ProblemArea",
+  components: {
+    MatrixCard,
+  },
+  props: {},
+  data() {
+    return {
+      ls: {
+        maintain: { key: "维护", value: [] },
+        malfunction: { key: "故障", value: [] },
+        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);
+        } else if (val.lockValue > 0) {
+          // 挂牌
+          ll.lockd.value.push(val);
+        }
+      }
+      this.ls=ll;
+    },
+  },
+};
 </script>

src/components/area/windturbine/MatrixCard.vue

@@ -1,42 +1,56 @@
 <template>
-<div class="main">
-    <div>{{title}}</div>
+  <div class="main">
+    <div>{{ title }}</div>
     <div class="content">
-        <div v-for="o in 10" :key="o">
-            <WindturbineMinCard status="1"></WindturbineMinCard>
-        </div>
+      <div v-for="vs in aa" :key="vs">
+        <WindturbineMinCard :status="vs.status"></WindturbineMinCard>
+      </div>
     </div>
     <div class="bottom"></div>
-</div>
+  </div>
 </template>
 
 <script>
-import WindturbineMinCard from './WindturbineMinCard.vue'
-export default{
-    name:"MatrixCard",
-    props:{
-        title:String,
+import WindturbineMinCard from "./WindturbineMinCard.vue";
+export default {
+  name: "MatrixCard",
+  props: ["title", "datas"],
+  data() {
+    return {
+      aa: [],
+    };
+  },
+
+  mounted() {
+    this.aa = this.datas.value || [];
+  },
+
+  components: {
+    WindturbineMinCard,
+  },
+
+  watch: {
+    datas(val) {
+      this.aa = val.value;
     },
-    components:{
-        WindturbineMinCard,
-    }
-}
+  },
+};
 </script>
 
 <style scoped>
-.content{
-    display: grid;
-    grid-template-columns: repeat(5,20%);
+.content {
+  display: grid;
+  grid-template-columns: repeat(5, 20%);
 }
-.bottom{
-    background-color: #292929;
-    width:100%;
-    height: 2px;
-    margin-top: 5px;
+.bottom {
+  background-color: #292929;
+  width: 100%;
+  height: 2px;
+  margin-top: 5px;
 }
-.main{
-    margin-bottom: 15px;
-    margin-left: 5px;
-    margin-right: 5px;
+.main {
+  margin-bottom: 15px;
+  margin-left: 5px;
+  margin-right: 5px;
 }
 </style>

src/components/area/windturbine/WindturbineMinCard.vue

@@ -29,7 +29,7 @@
     export default {
         name: "WindturbineMinCard",
         props: {
-            status: String,
+            status: Number,
         },
         data() {
             return {