标记区雏形，添加右键菜单

src/assets/script/BackgroundData.js

@@ -88,6 +88,10 @@ export default class BackgroundData {
     Failure = new Array();
     /* 事故数据 */
     Accidents = new Array();
+
+    /* 标记数据 */
+    Marks=[{title:"QG01_01",value:"温度过高"}];
+
     constructor() {
         this.refreshTPData = this.refreshTPData.bind(this);
         this.onTPMessage = this.onTPMessage.bind(this);
@@ -99,6 +103,7 @@ export default class BackgroundData {
         this.isContains = this.isContains.bind(this);
         this.refreshRecommendData = this.refreshRecommendData.bind(this);
         this.onRDMessage = this.onRDMessage.bind(this);
+        this.showdialog = this.showdialog.bind(this);
 
         this.refreshTPData();
         this.refreshAlarmData();
@@ -262,10 +267,24 @@ export default class BackgroundData {
         return false;
     }
 
-    login(uname,psd,action){
+    login(uname, psd, action) {
         axios.get(`http://${config.calcUrl}/user/login?userName=${uname}&psd=${psd}`)
-        .then(action)
-        .catch(err=>console.log(err));
+            .then(action)
+            .catch(err => action("登录出现错误："+err.message));
+    }
+
+    /* 显示提示框 */
+    showdialog(title,message,detail) {
+        const { remote } = require("electron");
+        const { dialog } = remote;
+        dialog.showMessageBox(remote.getCurrentWindow(), {
+            type: "none",
+            title: title,
+            message: message,
+            detail: detail,
+            buttons: ["确定"],
+            noLink: true,
+        });
     }
 
     /* 单例 */

src/components/StatusBar.vue

@@ -26,44 +26,46 @@
             </div>
           </template>
           <el-scrollbar>
-          <el-table
-            :data="hiddenDangerData"
-            border
-            border-color="rgb(36,36,36)"
-            max-height="650px"
-            :header-cell-style="{
-              background: 'Black',
-              color: 'rgb(220,220,220)',
-              border:'0px'
-            }"
-            :cell-style="{ background: 'Black', color: 'rgb(220,220,220)',}"
-          >
-            <el-table-column
-              width="160"
-              property="lastUpdateTime"
-              label="时间"
-              align="center"
-            ></el-table-column>
-            <el-table-column
-              width="110"
-              property="windturbineId"
-              label="设备"
-              align="center"
-            ></el-table-column>
-            <el-table-column
-              width="250"
-              property="alertText"
-              label="故障信息"
-              align="center"
-            ></el-table-column>
-          </el-table>
+            <el-table
+              :data="hiddenDangerData"
+              border
+              border-color="rgb(36,36,36)"
+              max-height="650px"
+              :header-cell-style="{
+                background: 'Black',
+                color: 'rgb(220,220,220)',
+                border: '0px',
+              }"
+              :cell-style="{ background: 'Black', color: 'rgb(220,220,220)' }"
+            >
+              <el-table-column
+                width="160"
+                property="lastUpdateTime"
+                label="时间"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                width="110"
+                property="windturbineId"
+                label="设备"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                width="250"
+                property="alertText"
+                label="故障信息"
+                align="center"
+              ></el-table-column>
+            </el-table>
           </el-scrollbar>
         </el-popover>
-        <el-popover placement="top-start"
+        <el-popover
+          placement="top-start"
           :width="521"
           trigger="hover"
           class="popoverBack"
-          :show-arrow="false">
+          :show-arrow="false"
+        >
           <template #reference>
             <div class="status-list">
               <img
@@ -82,9 +84,10 @@
             :header-cell-style="{
               background: 'Black',
               color: 'rgb(220,220,220)',
-              border:'0px'
+              border: '0px',
             }"
-            :cell-style="{ background: 'Black', color: 'rgb(220,220,220)',}">
+            :cell-style="{ background: 'Black', color: 'rgb(220,220,220)' }"
+          >
             <el-table-column
               width="160"
               property="lastUpdateTime"
@@ -110,7 +113,8 @@
           :width="521"
           trigger="hover"
           class="popoverBack"
-          :show-arrow="false">
+          :show-arrow="false"
+        >
           <template #reference>
             <div class="status-list">
               <img
@@ -129,9 +133,10 @@
             :header-cell-style="{
               background: 'Black',
               color: 'rgb(220,220,220)',
-              border:'0px'
+              border: '0px',
             }"
-            :cell-style="{ background: 'Black', color: 'rgb(220,220,220)',}">
+            :cell-style="{ background: 'Black', color: 'rgb(220,220,220)' }"
+          >
             <el-table-column
               width="160"
               property="lastUpdateTime"
@@ -157,7 +162,8 @@
           :width="521"
           trigger="hover"
           class="popoverBack"
-          :show-arrow="false">
+          :show-arrow="false"
+        >
           <template #reference>
             <div class="status-list">
               <img
@@ -176,9 +182,10 @@
             :header-cell-style="{
               background: 'Black',
               color: 'rgb(220,220,220)',
-              border:'0px'
+              border: '0px',
             }"
-            :cell-style="{ background: 'Black', color: 'rgb(220,220,220)',}">
+            :cell-style="{ background: 'Black', color: 'rgb(220,220,220)' }"
+          >
             <el-table-column
               width="160"
               property="lastUpdateTime"
@@ -205,7 +212,7 @@
 </template>
 
 <script>
-import BackgroundData from '../assets/script/BackgroundData'
+import BackgroundData from "../assets/script/BackgroundData";
 export default {
   data() {
     return {
@@ -216,10 +223,10 @@ export default {
       statusTimer: "",
       currentTime: "",
 
-      hiddenDangerData:new Array(),
-      defectData:new Array(),
-      malfunctionData:new Array(),
-      accidentData:new Array(),
+      hiddenDangerData: new Array(),
+      defectData: new Array(),
+      malfunctionData: new Array(),
+      accidentData: new Array(),
     };
   },
   mounted() {
@@ -254,7 +261,7 @@ export default {
         return obj;
       }
     },
-    refreshData(){
+    refreshData() {
       var bd = BackgroundData.getInstance();
       this.hiddenDangerNum = bd.HiddenProblems.length;
       this.defectNum = bd.Defects.length;
@@ -265,21 +272,23 @@ export default {
       this.defectData = bd.Defects;
       this.malfunctionData = bd.Failure;
       this.accidentData = bd.Accidents;
-      if(this.accidentData.length<=0){
-        this.accidentData=[{lastUpdateTime:"-",stationName:"-",alertText:"-"}];
+      if (this.accidentData.length <= 0) {
+        this.accidentData = [
+          { lastUpdateTime: "-", stationName: "-", alertText: "-" },
+        ];
       }
-    }
+    },
   },
 };
 </script>
 
 <style scoped>
-/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+:deep(.el-table__body-wrapper::-webkit-scrollbar) {
   width: 8px;
   background-color: black;
 }
 
-/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb  {
+:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
   background-color: #292929;
   border-radius: 6px;
 }
@@ -330,6 +339,4 @@ span {
 .status-label.accident {
   color: #af3e3d;
 }
-
-
 </style>

src/components/TitleBar.vue

@@ -274,12 +274,13 @@ export default {
     /* 登录 */
     login() {
       var bd = BackgroundData.getInstance();
+        this.loginMessage='正在登录...';
       bd.login(this.form.name,this.form.psd,this.onLoged);
     },
 
     onLoged(msg){
       if(!msg.data){
-        this.loginMessage="登录出现错误，请重新登录";
+        this.loginMessage=msg;
         return;
       }
       var user = msg.data;

src/components/area/LabelArea.vue

@@ -1,8 +1,35 @@
 /* 标注区 */
 <template>
     <gy-card title="标注区" area-style="label" circle-style="yellow" content-style="25">
-        <div>
-            
+        <div v-for="mk in values" :key="mk">
+            <img/>
+            <div>{{mk.title}}</div>
+            <input v-model="mk.value"/>
         </div>
     </gy-card>
 </template>
+
+<script>
+import BackgroundData from '../../assets/script/BackgroundData'
+
+export default{
+    name:'LabelArea',
+    data(){
+        return{
+            values:new Array(),
+        }
+    },
+    created(){
+        this.refreshTimer = setInterval(this.refreshData,1000);
+    },
+    methods:{
+        refreshData(){
+            this.values=BackgroundData.getInstance().Marks;
+        },
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/area/ProblemArea.vue

@@ -6,6 +6,7 @@
     circle-style="green"
     content-style="89"
     @parentRun="run"
+    @contextmenu="contextmenu"
   >
     <MatrixCard title="故障" :datas="ls.malfunction"></MatrixCard>
     <MatrixCard title="维护" :datas="ls.maintain"></MatrixCard>
@@ -17,6 +18,7 @@
 <script>
 import MatrixCard from "./windturbine/MatrixCard.vue";
 import MessageBridge from "../../assets/script/MessageBridge";
+import BackgroundData from "../../assets/script/BackgroundData";
 
 export default {
   name: "ProblemArea",
@@ -35,9 +37,7 @@ export default {
       datas: new Array(),
     };
   },
-  computed: {
-    
-  },
+  computed: {},
   created: function () {
     this.initData();
   },
@@ -53,7 +53,7 @@ export default {
         malfunction: { key: "故障", value: [] },
         offline: { key: "离线", value: [] },
         lockd: { key: "挂牌", value: [] },
-      }
+      };
       var mmsg = JSON.parse(msg);
       for (var id in mmsg) {
         var val = mmsg[id];
@@ -72,7 +72,85 @@ export default {
           ll.lockd.value.push(val);
         }
       }
-      this.ls=ll;
+      this.ls = ll;
+    },
+    /* 右键菜单 */
+    contextmenu() {
+      const { remote } = require("electron");
+      var that = this;
+      const menuTemplate = [
+        {
+          label: "标注",
+          click() {
+            that.menuClicked({ type: "marking" });
+          },
+        },
+        {
+          label: "挂牌",
+          submenu: [
+            {
+              label: "检修",
+              click() {
+                that.menuClicked({ type: "lock", value: 8 });
+              },
+            },
+            {
+              label: "故障维修",
+              click() {
+                that.menuClicked({ type: "lock", value: 7 });
+              },
+            },
+            {
+              label: "场内受累检修",
+              click() {
+                that.menuClicked({ type: "lock", value: 2 });
+              },
+            },
+            {
+              label: "场内受累故障",
+              click() {
+                that.menuClicked({ type: "lock", value: 3 });
+              },
+            },
+            {
+              label: "场外受累电网",
+              click() {
+                that.menuClicked({ type: "lock", value: 4 });
+              },
+            },
+            {
+              label: "场外受累天气",
+              click() {
+                that.menuClicked({ type: "lock", value: 5 });
+              },
+            },
+          ],
+        },
+        {
+          label: "取消挂牌",
+          click() {
+            that.menuClicked({ type: "unlock" });
+          },
+        },
+      ];
+      const menu = remote.Menu.buildFromTemplate(menuTemplate);
+
+      menu.popup(remote.getCurrentWindow());
+    },
+
+    menuClicked(msg) {
+      var bd = BackgroundData.getInstance();
+      if (!bd.LoginUser) {
+        bd.showdialog("提示", "控制出现错误：", "未登录");
+        return;
+      }
+      if (msg.type == "lock") {
+        // 挂牌
+      } else if (msg.type == "unlock") {
+        // 取消挂牌
+      } else if (msg.type == "marking") {
+        // 标注
+      }
     },
   },
 };

src/components/area/gy-card.vue

@@ -2,8 +2,8 @@
 <template>
     <transition>
         <div :class='areaClass' @mouseover="hover = false"
-             @mouseleave="hover = false" @contextmenu="rightClick" onselectstart="return false">
-            <div :class="headerClass" @dblclick="gyCardDbClick">
+             @mouseleave="hover = false" onselectstart="return false">
+            <div :class="headerClass"> <!-- @dblclick="gyCardDbClick" -->
                 <div :class='circleClass'></div>
                 <span class="gy-card-title">{{ title }}</span>
                 <img class="gy-card-decoration01" src="../../assets/img/controlcenter/decoration01.png">
@@ -73,7 +73,7 @@
                 }
             },
             circleClass() {
-                return `gy-card-circle-${this.circleStyle}`;
+                return `gy-card-circle gy-card-circle-${this.circleStyle}`;
             },
             contentClass() {
                 if (this.big) {
@@ -91,37 +91,14 @@
             }
         },
         methods: {
-            gyCardDbClick() {
+            /* gyCardDbClick() {
                 let big = this.big
                 if (big) {
                     this.big = false
                 } else {
                     this.big = false
                 }
-            },
-            rightClick() {
-                const {remote} = window.require('electron');
-                const {Menu, MenuItem} = remote
-                const menu = new Menu()
-                menu.append(new MenuItem({
-                    label: 'test1',
-                    click: function () {
-                        console.info("右键test1")
-                    }
-                }))
-                menu.append(new MenuItem({type: 'separator'}));
-                menu.append(new MenuItem({
-                    label: 'test2',
-                    click: function () {
-                        console.info("右键test2")
-                    }
-                }))
-                // window.addEventListener('contextmenu', (e) => {
-                //     e.preventDefault();
-                //     menu.popup({window: remote.getCurrentWindow()})
-                // }, false)
-                menu.popup(remote.getCurrentWindow())
-            }
+            }, */
         }
     }
 </script>
@@ -171,28 +148,23 @@
         border-radius: 7px;
     }
 
-    .gy-card-circle-green {
+    .gy-card-circle{
         position: relative;
-        top: 10px;
+        top: 7px;
         display: inline-block;
-        width: 10px;
-        height: 10px;
-        background-color: #008000;
+        width: 7px;
+        height: 7px;
         -moz-border-radius: 50%;
         -webkit-border-radius: 50%;
         border-radius: 50%;
     }
 
+    .gy-card-circle-green {
+        background-color: #008000;
+    }
+
     .gy-card-circle-yellow {
-        position: relative;
-        top: 10px;
-        display: inline-block;
-        width: 10px;
-        height: 10px;
         background-color: #ffff00;
-        -moz-border-radius: 50%;
-        -webkit-border-radius: 50%;
-        border-radius: 50%;
     }
 
     .gy-card-title {