commit

.gitignore

@@ -1,2 +1,4 @@
 node_modules
-dist
+dist
+#Electron-builder output
+/dist_electron

package.json

@@ -5,8 +5,13 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "electron:build": "vue-cli-service electron:build",
+    "electron:serve": "vue-cli-service electron:serve",
+    "postinstall": "electron-builder install-app-deps",
+    "postuninstall": "electron-builder install-app-deps"
   },
+  "main": "background.js",
   "dependencies": {
     "@jiaminghi/data-view": "^2.10.0",
     "core-js": "^3.6.5",
@@ -15,6 +20,7 @@
     "vue": "^2.6.11",
     "vue-native-websocket": "^2.0.15",
     "vue-router": "^3.5.2",
+    "vue-worker": "^1.2.1",
     "vuex": "^3.1.0"
   },
   "devDependencies": {
@@ -22,11 +28,14 @@
     "@vue/cli-plugin-eslint": "~4.5.9",
     "@vue/cli-service": "~4.5.9",
     "babel-eslint": "^10.1.0",
+    "electron": "^11.0.0",
+    "electron-devtools-installer": "^3.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "sass": "^1.26.8",
     "sass-loader": "^8.0.2",
     "svg-sprite-loader": "^3.8.0",
+    "vue-cli-plugin-electron-builder": "~2.1.1",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/background.js

@@ -0,0 +1,82 @@
+'use strict'
+
+import { app, protocol, BrowserWindow, Menu} from 'electron'
+import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
+import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+// Scheme must be registered before the app is ready
+protocol.registerSchemesAsPrivileged([
+  { scheme: 'app', privileges: { secure: true, standard: true } }
+])
+
+async function createWindow() {
+  Menu.setApplicationMenu(null) // null值取消顶部菜单栏
+  // Create the browser window.
+  const win = new BrowserWindow({
+    width: 1920,
+    height: 1080,
+    webPreferences: {
+      
+      // Use pluginOptions.nodeIntegration, leave this alone
+      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
+      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
+    }
+  })
+
+  if (process.env.WEBPACK_DEV_SERVER_URL) {
+    // Load the url of the dev server if in development mode
+    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
+    if (!process.env.IS_TEST) win.webContents.openDevTools()
+  } else {
+    createProtocol('app')
+    // Load the index.html when not in development
+    win.loadURL('app://./index.html')
+  }
+}
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (BrowserWindow.getAllWindows().length === 0) createWindow()
+})
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', async () => {
+  if (isDevelopment && !process.env.IS_TEST) {
+    // Install Vue Devtools
+    try {
+      await installExtension(VUEJS_DEVTOOLS)
+    } catch (e) {
+      console.error('Vue Devtools failed to install:', e.toString())
+    }
+  }
+  createWindow()
+})
+
+// Exit cleanly on request from parent process in development mode.
+if (isDevelopment) {
+  if (process.platform === 'win32') {
+    process.on('message', (data) => {
+      if (data === 'graceful-exit') {
+        app.quit()
+      }
+    })
+  } else {
+    process.on('SIGTERM', () => {
+      app.quit()
+    })
+  }
+}

src/main.js

@@ -12,6 +12,8 @@ import SvgIcon from '@/components/svgIcon/index.vue'// svg component
 import '@/assets/svg'  // 导入图标资源
 // 将自动注册所有组件为全局组件
 import dataV from '@jiaminghi/data-view'
+import VueWorker from 'vue-worker' // Web worker插件
+Vue.use(VueWorker)
 Vue.use(dataV)
 Vue.use(websocket, 'ws://localhost:1234', {// 这里要填的是服务器的地址，可以换一个在线服务器wss://echo.websocket.org
   reconnection: true, // (Boolean)是否自动重连，默认false

src/views/situation/index.vue

@@ -292,63 +292,43 @@ export default ({
   },
   methods: {
     setTimer() {
-      
+      if(this.timer == null) {
       this.timer = setInterval(() => {
         setTimeout(this.echartsInit(), 0);
         
-      }, 2000)
-      
+      }, 1000)
+      }
     },
     //初始化echarts
     echartsInit() {
+      if (this.mapEchart == null) {
+          this.mapEchart = this.$echarts.init(document.getElementById('mapEchart'))
+        }
       if (this.pattern == 'local') {
         if (this.init == 100) { this.$wst.send({ url: 'getLocalMap' }) }
         if (this.map != null && this.map.type == 'local') { this.submitForm('mapEchart') }
-        if (this.mapEchart == null) {
-          this.mapEchart = this.$echarts.init(document.getElementById('mapEchart'))
-        }
-        this.mapEchart.setOption(this.mapOption);
       } else
-        if (this.pattern == 'remote') {
-          if (this.init == 100) { this.$wst.send({ url: 'getRemoteMap' }) }
-          if (this.map != null && this.map.type == 'remote') { this.submitForm('mapEchart') }
-          if (this.mapEchart == null) {
-            this.mapEchart = this.$echarts.init(document.getElementById('mapEchart'))
-          }
-          this.mapEchart.setOption(this.mapOption);
-        } else
-          if (this.pattern == 'combine') {
-            if (this.init == 100) { this.$wst.send({ url: 'getCombineMap' }) }
-            if (this.map != null && this.map.type == 'combine') { this.submitForm('mapEchart') }
-            if (this.mapEchart == null) {
-              this.mapEchart = this.$echarts.init(document.getElementById('mapEchart'))
-            }
-            this.mapEchart.setOption(this.mapOption);
-          } else
-            if (this.pattern == 'global') {
-              if (this.init == 100) { this.$wst.send({ url: 'getGlobalMap' }) }
-              if (this.map != null && this.map.type == 'global') { this.submitForm('mapEchart') }
-              if (this.mapEchart == null) {
-                this.mapEchart = this.$echarts.init(document.getElementById('mapEchart'))
-              }
-              this.mapEchart.setOption(this.mapOption);
-            }
-      this.resizeDom()
+      if (this.pattern == 'remote') {
+        if (this.init == 100) { this.$wst.send({ url: 'getRemoteMap' }) }
+        if (this.map != null && this.map.type == 'remote') { this.submitForm('mapEchart') }
+      } else
+      if (this.pattern == 'combine') {
+        if (this.init == 100) { this.$wst.send({ url: 'getCombineMap' }) }
+        if (this.map != null && this.map.type == 'combine') { this.submitForm('mapEchart') }
+      } else
+      if (this.pattern == 'global') {
+        if (this.init == 100) { this.$wst.send({ url: 'getGlobalMap' }) }
+        if (this.map != null && this.map.type == 'global') { this.submitForm('mapEchart') }
+        
+      }
+      this.mapEchart.setOption(this.mapOption);
+      // this.resizeDom()
 
     },
     //通过窗体高宽计算容器高宽，渲染echart图表的div的宽高度以达到自适应目的
     resizeDom() {
       console.log("高度自适应")
-      this.$echarts.init(document.getElementById('mapEchart')).resize()
-      // var mapEchart = document.getElementById('mapEchart')
-      // var mapEchart = document.getElementById('mapEchart')
-      // var mapEchart = document.getElementById('mapEchart')
-      // var mapEchart = document.getElementById('mapEchart')
-      // const boxHeight = document.getElementsByClassName("echarts-box")[0].clientHeight
-      // mapEchart.style.height = (boxHeight/2-65)+'px';
-      // mapEchart.style.height = (boxHeight/2-65)+'px';
-      // mapEchart.style.height = (boxHeight/2-65)+'px';
-      // mapEchart.style.height = (boxHeight/2-65)+'px';
+      this.mapEchart.resize()
     },
     echartsChange() {
       this.timerDestory()
@@ -366,7 +346,7 @@ export default ({
       this.mapOption.series[0].data = this.map.data.friend;
       // this.mapOption.series[1].data = this.map.data.friend.Missiles;
       this.mapOption.series[2].data = this.map.data.enemy;
-      this.$echarts.init(document.getElementById(map)).setOption(this.mapOption);
+      this.mapEchart.setOption(this.mapOption);
       console.log(this.mapOption);
     },
     instanceChange(val) {
@@ -377,26 +357,26 @@ export default ({
           data: { InstanceID: val.instanceID }
         })
       } else
-        if (val.instanceName.includes("导航")) {
+      if (val.instanceName.includes("导航")) {
           this.$wst.send({
             url: 'getNavParams',
             data: { InstanceID: val.instanceID }
           })
 
-        } else
-          if (val.instanceName.includes("雷达")) {
+      } else
+      if (val.instanceName.includes("雷达")) {
             this.$wst.send({
               url: 'getRadarParams',
               data: { InstanceID: val.instanceID }
             })
 
-          } else
-            if (val.instanceName.includes("电子攻击")) {
+      } else
+      if (val.instanceName.includes("电子攻击")) {
               this.$wst.send({
                 url: 'getECMParams',
                 data: { InstanceID: val.instanceID }
-              })
-            }
+            })
+      }
 
     }
   },

vue.config.js

@@ -43,21 +43,22 @@ module.exports = {
         .set("assets", resolve("src/assets"))
         .set("components", resolve("src/components"))
         .set("public", resolve("public"));
-    // set svg-sprite-loader
-    config.module
-      .rule('svg')
-      .exclude.add(resolve('src/assets'))  // 存放 svg 目录的目录
-      .end()
-    config.module
-      .rule('assets')
-      .test(/\.svg$/)
-      .include.add(resolve('src/assets'))  // 存放 svg 目录的目录
-      .end()
-      .use('svg-sprite-loader')
-      .loader('svg-sprite-loader')
-      .options({
-        symbolId: 'icon-[name]'
-      })
-      .end()
+      // set svg-sprite-loader
+      config.module
+        .rule('svg')
+        .exclude.add(resolve('src/assets'))  // 存放 svg 目录的目录
+        .end()
+      config.module
+        .rule('assets')
+        .test(/\.svg$/)
+        .include.add(resolve('src/assets'))  // 存放 svg 目录的目录
+        .end()
+        .use('svg-sprite-loader')
+        .loader('svg-sprite-loader')
+        .options({
+          symbolId: 'icon-[name]'
+        })
+        .end()
     }
+
   }