Merge branch 'master' of http://49.4.49.126:3000/GYEE_R.D/neic

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/LabelArea.vue

@@ -1,10 +1,10 @@
 /* 标注区 */
 <template>
     <gy-card title="标注区" area-style="label" circle-style="yellow" content-style="25">
-        <div v-for="mk in values" :key="mk">
-            <img/>
-            <div>{{mk.title}}</div>
-            <input v-model="mk.value"/>
+        <div v-for="mk in values" :key="mk" style="width:120px;margin-left:10px;margin-top:10px;">
+            <img src="../../assets/img/LabelArea/flag.png" style="float:left;margin-top:5px;margin-left:15px;"/>
+            <div style="text-align:center;">{{mk.title}}</div>
+            <input v-model="mk.value" style="border:none;background-color:#292929;height:30px;border-radius:6px;text-align:center;outline:none;width:120px;color:rgb(220,220,220);"/>
         </div>
     </gy-card>
 </template>

src/components/area/ProblemArea.vue

@@ -8,22 +8,21 @@
     @parentRun="run"
     @contextmenu="contextmenu"
   >
-    <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";
 import BackgroundData from "../../assets/script/BackgroundData";
 
 export default {
   name: "ProblemArea",
   components: {
-    MatrixCard,
+    ProblemMatrixCard,
   },
   props: {},
   data() {
@@ -34,7 +33,6 @@ export default {
         offline: { key: "离线", value: [] },
         lockd: { key: "挂牌", value: [] },
       },
-      datas: new Array(),
     };
   },
   computed: {},
@@ -42,38 +40,6 @@ export default {
     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;
-    },
     /* 右键菜单 */
     contextmenu() {
       const { remote } = require("electron");

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,57 +43,48 @@
 </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;
-      });
+      },
     },
     /* 获取选中的项目 */
     getSelectedItems() {
@@ -119,9 +110,6 @@ export default {
       this.values.forEach((item) => (item.active = false));
     },
   },
-  components: {
-    // ControlWindCard,
-  },
 };
 </script>
 

src/components/area/windturbine/problem/ProblemMatrixCard.vue

@@ -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>

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