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

package-lock.json

@@ -3272,63 +3272,6 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995625950&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995297666&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
-          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "ssri": {
           "version": "8.0.1",
           "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364735533&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
@@ -3337,28 +3280,6 @@
           "requires": {
             "minipass": "^3.1.1"
           }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.2.0",
-          "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.2.0.tgz",
-          "integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -3518,6 +3439,11 @@
         }
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.0.0-beta.14",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.14.tgz",
+      "integrity": "sha512-44fPrrN1cqcs6bFkT0C+yxTM6PZXLbR+ESh1U1j8UD22yO04gXvxH62HApMjLbS3WqJO/iCNC+CYT+evPQh2EQ=="
+    },
     "@vue/preload-webpack-plugin": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/@vue/preload-webpack-plugin/download/@vue/preload-webpack-plugin-1.1.2.tgz?cache=0&sync_timestamp=1613214843074&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fpreload-webpack-plugin%2Fdownload%2F%40vue%2Fpreload-webpack-plugin-1.1.2.tgz",
@@ -7265,7 +7191,7 @@
     },
     "electron": {
       "version": "12.0.11",
-      "resolved": "https://registry.nlark.com/electron/download/electron-12.0.11.tgz",
+      "resolved": "https://registry.nlark.com/electron/download/electron-12.0.11.tgz?cache=0&sync_timestamp=1623341150449&other_urls=https%3A%2F%2Fregistry.nlark.com%2Felectron%2Fdownload%2Felectron-12.0.11.tgz",
       "integrity": "sha1-VV3Bz2Y+Mg8vLL34kxk1Kwj8WfI=",
       "dev": true,
       "requires": {
@@ -13490,7 +13416,7 @@
     },
     "postcss": {
       "version": "7.0.36",
-      "resolved": "https://registry.nlark.com/postcss/download/postcss-7.0.36.tgz?cache=0&sync_timestamp=1623677287157&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpostcss%2Fdownload%2Fpostcss-7.0.36.tgz",
+      "resolved": "https://registry.nlark.com/postcss/download/postcss-7.0.36.tgz?cache=0&sync_timestamp=1623380305104&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpostcss%2Fdownload%2Fpostcss-7.0.36.tgz",
       "integrity": "sha1-BW+M/6k5ZiqPWQWVDAfVKFZE38s=",
       "dev": true,
       "requires": {
@@ -13604,7 +13530,7 @@
     },
     "postcss-load-config": {
       "version": "2.1.2",
-      "resolved": "https://registry.nlark.com/postcss-load-config/download/postcss-load-config-2.1.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/postcss-load-config/download/postcss-load-config-2.1.2.tgz?cache=0&sync_timestamp=1612743037145&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-load-config%2Fdownload%2Fpostcss-load-config-2.1.2.tgz",
       "integrity": "sha1-xepQTyxK7zPHNZo03jVzdyrXUCo=",
       "dev": true,
       "requires": {
@@ -14723,7 +14649,7 @@
     },
     "regexpp": {
       "version": "2.0.1",
-      "resolved": "https://registry.nlark.com/regexpp/download/regexpp-2.0.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/regexpp/download/regexpp-2.0.1.tgz",
       "integrity": "sha1-jRnTHPYySCtYkEn4KB+T28uk0H8=",
       "dev": true
     },
@@ -17727,6 +17653,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.2.0",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
+      "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.3.tgz",
@@ -17751,6 +17758,14 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.nlark.com/watchpack/download/watchpack-1.7.5.tgz",
@@ -17902,7 +17917,7 @@
     },
     "webpack": {
       "version": "4.46.0",
-      "resolved": "https://registry.nlark.com/webpack/download/webpack-4.46.0.tgz",
+      "resolved": "https://registry.nlark.com/webpack/download/webpack-4.46.0.tgz?cache=0&sync_timestamp=1622151377755&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwebpack%2Fdownload%2Fwebpack-4.46.0.tgz",
       "integrity": "sha1-v5tEBOogoHNgXgoBHRiNd8tq1UI=",
       "dev": true,
       "requires": {

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/assets/script/BackgroundData.js

@@ -90,7 +90,8 @@ export default class BackgroundData {
     Accidents = new Array();
 
     /* 标记数据 */
-    Marks=[{title:"QG01_01",value:"温度过高"}];
+    Marks = [];
+    MarkIndex = 0;
 
     constructor() {
         this.refreshTPData = this.refreshTPData.bind(this);
@@ -104,8 +105,9 @@ export default class BackgroundData {
         this.refreshRecommendData = this.refreshRecommendData.bind(this);
         this.onRDMessage = this.onRDMessage.bind(this);
         this.showdialog = this.showdialog.bind(this);
-        this.windturbineControl=this.windturbineControl.bind(this);
-        this.marking=this.marking.bind(this);
+        this.windturbineControl = this.windturbineControl.bind(this);
+        this.marking = this.marking.bind(this);
+        this.removeMarked = this.removeMarked.bind(this);
 
         this.refreshTPData();
         this.refreshAlarmData();
@@ -270,13 +272,13 @@ export default class BackgroundData {
     }
 
     login(uname, psd, action) {
-        axios.get(`http://${config.calcUrl}/user/login?userName=${uname}&psd=${psd}`)
+        axios.get(`http://${config.calcUrl}/api/user/login?userName=${uname}&psd=${psd}`)
             .then(action)
-            .catch(err => action("登录出现错误："+err.message));
+            .catch(err => action("登录出现错误：" + err.message));
     }
 
     /* 显示提示框 */
-    showdialog(title,message,detail) {
+    showdialog(title, message, detail) {
         const { remote } = require("electron");
         const { dialog } = remote;
         dialog.showMessageBox(remote.getCurrentWindow(), {
@@ -290,14 +292,47 @@ export default class BackgroundData {
     }
 
     /* 风机控制 */
-    windturbineControl(windturbines){
-        console.log(windturbines);
+    windturbineControl(windturbines) {
+        var pairs={};
+        for (var ind in windturbines) {
+            var wb = windturbines[ind];
+            var ct = {
+                windturbineId:wb.windturbineId,
+                stationId:wb.stationId,
+                projectId:wb.projectId,
+                modelId:wb.modelId,
+                controlType:wb.controlType,
+                lockType:wb.lockType,
+                userName:this.LoginUser.userName,
+                userId:this.LoginUser.id,
+            };
+            pairs[ct.windturbineId]=ct;
+        }
+        var heads={
+
+        };
+        console.log(heads);
+    }
+
+    /* 标记 */
+    marking(windturbines) {
+        for (var v in windturbines) {
+            ++this.MarkIndex;
+            this.Marks.push({ title: windturbines[v].windturbineId, id: this.MarkIndex });
+        }
     }
 
-    marking(windturbines){
-        for(var v in windturbines){
-            this.Marks.push({title:windturbines[v].windturbineId});
+    /* 移除标记 */
+    removeMarked(mk) {
+        var indx = -1;
+        for (var id in this.Marks) {
+            if (this.Marks[id].id == mk.id) {
+                indx = id;
+                break;
+            }
         }
+        if (indx < 0) return;
+        this.Marks.splice(indx, 1);
     }
 
     /* 单例 */

src/components/TitleBar.vue

@@ -179,15 +179,17 @@
       </el-col>
 
       <el-col :span="1.6">
-        <el-popover placement="bottom" :width="150" trigger="hover" :show-arrow="false">
+        <el-popover  placement="bottom" :width="150" trigger="hover" :show-arrow="false">
           <template #reference>
             <el-button @click="userClick" style="top: 10px; right: 76px; color: #ffffff; position: absolute;background-color:black;border:none;font-size:16px;">{{usreName}}</el-button>
           </template>
-          <form style="background-color: #363636;">
-            <el-button class="loginoption">编&emsp;辑</el-button>
-            <br>
-            <el-button class="loginoption">注&emsp;销</el-button>
-          </form>
+          <div style="background-color: #363636;">
+            <!-- <el-button class="loginoption">编&emsp;辑</el-button>
+            <br> -->
+            <el-button v-if="!isLogin" class="loginoption" @click="userClick">登&emsp;录</el-button>
+            <br v-if="!isLogin">
+            <el-button class="loginoption" @click="logout">注&emsp;销</el-button>
+          </div>
         </el-popover>
 
         <!-- <div @click="userClick" style="top: 18px; right: 100px; color: #ffffff; position: absolute">{{usreName}}</div> -->
@@ -221,6 +223,7 @@ export default {
     return {
       dialogVisible: false,
       dialogFormVisible: false,
+      isLogin:false,
       form: {
         name: "",
         psd: "",
@@ -305,12 +308,21 @@ export default {
       this.dialogVisible = false;
       this.loginMessage = "";
       this.form.name = this.form.psd = "";
+
+      this.isLogin=true;
     },
 
     /* 用户点击 */
     userClick() {
       this.dialogVisible = true;
     },
+
+    /* 用户注销 */
+    logout(){
+      BackgroundData.getInstance().LoginUser=null;
+      this.usreName = '未登录...';
+      this.isLogin=false;
+    }
   },
 };
 </script>

src/components/area/ControlArea.vue

@@ -151,7 +151,7 @@ export default {
     menuClicked(msg) {
       var bd = BackgroundData.getInstance();
       if (!bd.LoginUser) {
-        bd.showdialog("提示", "控制出现错误：", "未登录");
+        bd.showdialog("提示", "请登录：", "在控制之前需要先登录！");
         return;
       }
       if (msg.type == "lock") {

src/components/area/LabelArea.vue

@@ -1,7 +1,7 @@
 /* 标注区 */
 <template>
     <gy-card title="标注区" area-style="label" circle-style="yellow" content-style="25">
-        <div v-for="mk in values" :key="mk" style="width:100px;margin-left:10px;margin-top:10px;display: inline-block;">
+        <div v-for="mk in values" :key="mk" @contextmenu="contextmenu(mk)" style="width:100px;margin-left:10px;margin-top:10px;display: inline-block;">
             <img src="../../assets/img/LabelArea/flag.png" style="float:left;margin-top:5px;margin-left:12px;"/>
             <div style="text-align:center;font-size:12px;float:right;margin-right:12px;">{{mk.title}}</div>
             <input v-model="mk.value" style="font-size:12px;border:none;background-color:#292929;height:26px;border-radius:6px;text-align:center;outline:none;width:100px;color:rgb(220,220,220);"/>
@@ -10,27 +10,55 @@
 </template>
 
 <script>
-import BackgroundData from '../../assets/script/BackgroundData'
+import BackgroundData from "../../assets/script/BackgroundData";
 
-export default{
-    name:'LabelArea',
-    data(){
-        return{
-            values:new Array(),
-        }
-    },
-    created(){
-        this.refreshTimer = setInterval(this.refreshData,1000);
+export default {
+  name: "LabelArea",
+  data() {
+    return {
+      values: new Array(),
+    };
+  },
+  created() {
+    this.refreshTimer = setInterval(this.refreshData, 1000);
+  },
+  methods: {
+    refreshData() {
+      this.values = new Array();
+      this.values = BackgroundData.getInstance().Marks;
     },
-    methods:{
-        refreshData(){
-            this.values=new Array();
-            this.values=BackgroundData.getInstance().Marks;
+
+    contextmenu(mk) {
+      const { remote } = require("electron");
+      var that = this;
+      const menuTemplate = [
+        {
+          label: "删除",
+          click() {
+            that.remove(mk);
+          },
         },
-    }
-}
+      ];
+      const menu = remote.Menu.buildFromTemplate(menuTemplate);
+
+      menu.popup(remote.getCurrentWindow());
+    },
+
+    remove(mk) {
+      var indx = -1;
+      for (var ind in this.values) {
+        if (this.values[ind].id == mk.id) {
+          indx = ind;
+          break;
+        }
+      }
+      if (indx < 0) return;
+      this.values.splice(indx, 1);
+      BackgroundData.getInstance().removeMarked(mk);
+    },
+  },
+};
 </script>
 
 <style scoped>
-
 </style>

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" ref="malfunction"></ProblemMatrixCard>
+    <ProblemMatrixCard title="维护" :type="6" ref="maintain"></ProblemMatrixCard>
+    <ProblemMatrixCard title="离线" :type="7" ref="offline"></ProblemMatrixCard>
+    <ProblemMatrixCard title="挂牌" :type="-1" ref="lock"></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,46 +33,13 @@ 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;
-    },
     /* 右键菜单 */
     contextmenu() {
       const { remote } = require("electron");
@@ -141,7 +107,7 @@ export default {
     menuClicked(msg) {
       var bd = BackgroundData.getInstance();
       if (!bd.LoginUser) {
-        bd.showdialog("提示", "控制出现错误：", "未登录");
+        bd.showdialog("提示", "请登录：", "在控制之前需要先登录！");
         return;
       }
       if (msg.type == "lock") {
@@ -150,7 +116,28 @@ export default {
         // 取消挂牌
       } else if (msg.type == "marking") {
         // 标注
+        var vs = this.getSelectedItems();
+        bd.marking(vs);
       }
+      this.clearSelected();
+    },
+
+    /* 获取选中的项目，isControl：是否是控制 */
+    getSelectedItems(){
+      var ls = new Array();
+      this.$refs.malfunction.outputSelectedItems(ls);
+      this.$refs.maintain.outputSelectedItems(ls);
+      this.$refs.offline.outputSelectedItems(ls);
+      this.$refs.lock.outputSelectedItems(ls);
+      return ls;
+    },
+    
+    /* 清除所有选择 */
+    clearSelected(){
+      this.$refs.malfunction.clearSelected();
+      this.$refs.maintain.clearSelected();
+      this.$refs.offline.clearSelected();
+      this.$refs.lock.clearSelected();
     },
   },
 };

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,58 +43,21 @@
 </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);
-    },
-    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;
-          }
-        });
-        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;
-      });
+    onSelectHandler(item) {
+      item.active = !item.active;
     },
+    
     /* 获取选中的项目 */
     getSelectedItems() {
       var ls = new Array();
@@ -119,8 +82,34 @@ export default {
       this.values.forEach((item) => (item.active = false));
     },
   },
-  components: {
-    // ControlWindCard,
+  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);
+        });
+      },
+    },
   },
 };
 </script>

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

@@ -0,0 +1,402 @@
+<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;
+    },
+    addCard(val) {
+      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);
+      }
+    },
+    /* 获取选中的项目 */
+    getSelectedItems() {
+      var ls = new Array();
+      this.values.forEach((item) => {
+        if (item.active) {
+          ls.push(item);
+        }
+      });
+      return ls;
+    },
+    /* 将选中的项目填充到数组中 */
+    outputSelectedItems(ls) {
+      this.values.forEach((item) => {
+        if (item.active&&!this.isHas(item,ls)) {
+          ls.push(item);
+        }
+      });
+    },
+
+    /* 清除选中的项目 */
+    clearSelected() {
+      this.values.forEach((item) => (item.active = false));
+    },
+
+    isHas(item,ls){
+      for(var id in ls){
+        if(ls[id].windturbineId==item.windturbineId){
+          return true;
+        }
+      }
+      return false;
+    }
+  },
+  watch: {
+    "$store.getters.windturbinelist": {
+      deep: true,
+      handler: function (json) {
+        for (var id in json) {
+          var val = json[id];
+          if (val.status == this.type) {
+            this.addCard(val);
+          }
+          if (this.type < 0 && val.lockValue) {
+            this.addCard(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;
+  margin-bottom: 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