├── .gitignore
├── README.md
├── _config.yml
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.png
    │   └── nebula-helper.png
    ├── background.js
    ├── components
    │   └── Main.vue
    ├── main.js
    └── plugins
    │   └── element.js
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nebula Helper
 2 | > 使用 Vue + Electron + node-serialport 实现的现代串行端口调试助手  
 3 |   A modern serial port debugging assistant implemented using Vue + Electron + node-serialport
 4 | ## 项目地址
 5 |   [GitHub](https://github.com/rymcu/nebula-helper) | [Gitee](https://gitee.com/ronger-x/nebula-helper)
 6 | ## 功能特性
 7 | - [x] 基础串口通信
 8 | - [x] 自动发送信息
 9 | - [x] 16 进制收发信息
10 | - [x] 停止/恢复显示
11 | - [x] 文件传输
12 | - [x] 保存/加载配置信息
13 | - [x] 刷新串口列表(手动刷新 视图->刷新串口列表)
14 | - [ ] 版本更新(不用每次下载完整的安装包,仅 `app.asar` 文件)
15 | ## 未来计划
16 | - [ ] 单片机程序下载(拷录程序到单片机)
17 | ## 开发指南
18 | > 本项目使用 Electron + Vue + Node-serialport 实现，以下步骤是 windows 操作系统环境配置步骤，1-5 步为安装 node-gyp ,其他操作系统请参考[官方教程](https://github.com/nodejs/node-gyp)
19 | 1. 安装 LTS 版 NodeJS
20 | 2. 安装 Python 2.7
21 | 3. 安装 Visitor Studio 2017 及更高版本(我使用的是 2019)
22 | 4. 执行 `npm install node-gyp -g`
23 | 5. 执行 `node-gyp list` 查看依赖是否全部安装
24 | 6. 执行 `git clone https://github.com/rymcu/nebula-helper.git`
25 | 7. 执行 `npm install`
26 | 8. 执行 `npm run electron:serve`  
27 | ## 项目截图
28 | ![nebula-helper](https://github.com/rymcu/nebula-helper/blob/master/src/assets/nebula-helper.png?raw=true)
29 | ## 鸣谢
30 | - [Electron](https://github.com/electron/electron) :electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS
31 | - [Vue](https://github.com/vuejs/vue) 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
32 | - [node-serialport](https://github.com/serialport/node-serialport) Access serial ports with JavaScript. Linux, OSX and Windows. Welcome your robotic JavaScript overlords. Better yet, program them!
33 | - [vue-cli-plugin-electron-builder](https://github.com/nklayman/vue-cli-plugin-electron-builder) Easily Build Your Vue.js App For Desktop With Electron
34 | "# nebula-iot-helper" 
35 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-architect


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nebula-helper",
 3 |   "version": "0.1.5",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "electron:build": "vue-cli-service electron:build",
10 |     "electron:serve": "vue-cli-service electron:serve",
11 |     "postinstall": "electron-builder install-app-deps",
12 |     "postuninstall": "electron-builder install-app-deps",
13 |     "install": "npm rebuild --runtime=electron --target=8.4.0 --disturl=https://npm.taobao.org/mirrors/atom-shell --abi=76"
14 |   },
15 |   "author": {
16 |     "name": "ronger",
17 |     "email": "ronger-x@outlook.com",
18 |     "url": "https://rymcu.com"
19 |   },
20 |   "main": "background.js",
21 |   "dependencies": {
22 |     "@serialport/bindings": "^9.0.0",
23 |     "core-js": "^3.6.5",
24 |     "electron-log": "^4.2.2",
25 |     "element-ui": "^2.4.5",
26 |     "iconv-lite": "^0.6.2",
27 |     "serialport": "^9.0.0",
28 |     "vue": "^2.6.11"
29 |   },
30 |   "devDependencies": {
31 |     "@vue/cli-plugin-babel": "^4.4.0",
32 |     "@vue/cli-plugin-eslint": "^4.4.0",
33 |     "@vue/cli-service": "^4.4.0",
34 |     "babel-eslint": "^10.1.0",
35 |     "electron": "^8.4.0",
36 |     "electron-devtools-installer": "^3.1.0",
37 |     "eslint": "^6.7.2",
38 |     "eslint-plugin-vue": "^6.2.2",
39 |     "vue-cli-plugin-electron-builder": "^2.0.0-rc.4",
40 |     "vue-cli-plugin-element": "^1.0.1",
41 |     "vue-template-compiler": "^2.6.11"
42 |   },
43 |   "eslintConfig": {
44 |     "root": true,
45 |     "env": {
46 |       "node": true
47 |     },
48 |     "extends": [
49 |       "plugin:vue/essential",
50 |       "eslint:recommended"
51 |     ],
52 |     "parserOptions": {
53 |       "parser": "babel-eslint"
54 |     },
55 |     "rules": {}
56 |   },
57 |   "browserslist": [
58 |     "> 1%",
59 |     "last 2 versions",
60 |     "not dead"
61 |   ]
62 | }
63 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rymcu/nebula-helper/80c742bf46b4c0fe9be4ab55014d4e7362c30726/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <script>
10 |       window.electron = require('electron');
11 |     </script>
12 |   </head>
13 |   <body style="overflow: hidden;">
14 |     <noscript>
15 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
16 |     </noscript>
17 |     <div id="app"></div>
18 |     <!-- built files will be auto injected -->
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Main></Main>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Main from './components/Main.vue'
 9 | export default {
10 |   name: 'app',
11 |   components: {
12 |     Main
13 |   }
14 | }
15 | </script>
16 | 
17 | <style>
18 | #app {
19 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
20 |   -webkit-font-smoothing: antialiased;
21 |   -moz-osx-font-smoothing: grayscale;
22 |   text-align: center;
23 |   color: #2c3e50;
24 | }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rymcu/nebula-helper/80c742bf46b4c0fe9be4ab55014d4e7362c30726/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/nebula-helper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rymcu/nebula-helper/80c742bf46b4c0fe9be4ab55014d4e7362c30726/src/assets/nebula-helper.png


--------------------------------------------------------------------------------
/src/background.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | 
  3 | import {app, protocol, BrowserWindow, Menu, shell} from 'electron'
  4 | import {createProtocol} from 'vue-cli-plugin-electron-builder/lib'
  5 | import installExtension, {VUEJS_DEVTOOLS} from 'electron-devtools-installer'
  6 | 
  7 | const isDevelopment = process.env.NODE_ENV !== 'production'
  8 | const serialPort = require('serialport');
  9 | const iconv = require('iconv-lite');
 10 | 
 11 | const log = require('electron-log')
 12 | console.log = log.log
 13 | 
 14 | const fs = require('fs');
 15 | 
 16 | global.SerialPort = serialPort;
 17 | global.iconv = iconv;
 18 | global.log = log.log;
 19 | global.fs = fs;
 20 | 
 21 | let menuTemplate = [
 22 |     {
 23 |         label: '文件',
 24 |         role: 'fileMenu',
 25 |         submenu: [
 26 |             {
 27 |                 label: '保存接收数据',
 28 |                 accelerator: 'Ctrl + S',
 29 |                 click: function () {
 30 |                     win.webContents.send('writeFile');
 31 |                 }
 32 |             },
 33 |             {
 34 |                 label: '读取文件数据',
 35 |                 accelerator: 'Ctrl + L',
 36 |                 click: function () {
 37 |                     win.webContents.send('readFile');
 38 |                 }
 39 |             }
 40 |             ,
 41 |             {
 42 |                 label: '保存配置信息',
 43 |                 accelerator: 'Ctrl + 1',
 44 |                 click: function () {
 45 |                     win.webContents.send('saveOptions');
 46 |                 }
 47 |             },
 48 |             {
 49 |                 label: '加载配置文件',
 50 |                 accelerator: 'Ctrl + 2',
 51 |                 click: function () {
 52 |                     win.webContents.send('loadOptions');
 53 |                 }
 54 |             },
 55 |             {
 56 |                 label: '关闭',
 57 |                 accelerator: 'Ctrl + W',
 58 |                 click: function () {
 59 |                     app.quit();
 60 |                 }
 61 |             }
 62 |         ]
 63 |     },
 64 |     {
 65 |         label: '视图',
 66 |         role: 'viewMenu',
 67 |         submenu: [
 68 |             {
 69 |                 label: '刷新端口列表',
 70 |                 accelerator: 'Ctrl + R',
 71 |                 click: function () {
 72 |                     win.webContents.send('reloadPorts');
 73 |                 }
 74 |             }
 75 |         ]
 76 |     },
 77 |     {
 78 |         label: '帮助',
 79 |         role: 'help',
 80 |         accelerator: 'Ctrl + H',
 81 |         submenu: [
 82 |             {
 83 |                 label: '问题反馈',
 84 |                 click: function () {
 85 |                     shell.openExternal('https://github.com/rymcu/nebula-helper/issues')
 86 |                 }
 87 |             },
 88 |             {
 89 |                 label: '关于我们',
 90 |                 click: function () {
 91 |                     shell.openExternal('https://rymcu.com')
 92 |                 }
 93 |             }
 94 |         ]
 95 |     }
 96 | ]
 97 | // Keep a global reference of the window object, if you don't, the window will
 98 | // be closed automatically when the JavaScript object is garbage collected.
 99 | let win
100 | 
101 | // Scheme must be registered before the app is ready
102 | protocol.registerSchemesAsPrivileged([
103 |     {scheme: 'app', privileges: {secure: true, standard: true}}
104 | ])
105 | 
106 | function createWindow() {
107 |     // Create the browser window.
108 |     win = new BrowserWindow({
109 |         width: 800,
110 |         height: 600,
111 |         resizable: false,
112 |         webPreferences: {
113 |             // Use pluginOptions.nodeIntegration, leave this alone
114 |             // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
115 |             // nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
116 |             nodeIntegration: true,
117 |             nodeIntegrationInWorker: true
118 |         },
119 |         show: false
120 |     })
121 | 
122 |     if (process.env.WEBPACK_DEV_SERVER_URL) {
123 |         // Load the url of the dev server if in development mode
124 |         win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
125 |         if (!process.env.IS_TEST) win.webContents.openDevTools()
126 |     } else {
127 |         createProtocol('app')
128 |         // Load the index.html when not in development
129 |         win.loadURL('app://./index.html')
130 |     }
131 | 
132 |     win.on('closed', () => {
133 |         win = null
134 |     })
135 | 
136 |     win.once('ready-to-show', () => {
137 |         win.show()
138 |     })
139 | 
140 |     const menu = Menu.buildFromTemplate(menuTemplate);
141 |     Menu.setApplicationMenu(menu);
142 | }
143 | 
144 | // Quit when all windows are closed.
145 | app.on('window-all-closed', () => {
146 |     // On macOS it is common for applications and their menu bar
147 |     // to stay active until the user quits explicitly with Cmd + Q
148 |     if (process.platform !== 'darwin') {
149 |         app.quit()
150 |     }
151 | })
152 | 
153 | app.on('activate', () => {
154 |     // On macOS it's common to re-create a window in the app when the
155 |     // dock icon is clicked and there are no other windows open.
156 |     if (win === null) {
157 |         createWindow()
158 |     }
159 | })
160 | 
161 | // This method will be called when Electron has finished
162 | // initialization and is ready to create browser windows.
163 | // Some APIs can only be used after this event occurs.
164 | app.on('ready', async () => {
165 |     if (isDevelopment && !process.env.IS_TEST) {
166 |         // Install Vue Devtools
167 |         try {
168 |             await installExtension(VUEJS_DEVTOOLS)
169 |         } catch (e) {
170 |             console.error('Vue Devtools failed to install:', e.toString())
171 |         }
172 |     }
173 |     createWindow()
174 | })
175 | 
176 | // Exit cleanly on request from parent process in development mode.
177 | if (isDevelopment) {
178 |     if (process.platform === 'win32') {
179 |         process.on('message', (data) => {
180 |             if (data === 'graceful-exit') {
181 |                 app.quit()
182 |             }
183 |         })
184 |     } else {
185 |         process.on('SIGTERM', () => {
186 |             app.quit()
187 |         })
188 |     }
189 | }
190 | 


--------------------------------------------------------------------------------
/src/components/Main.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <el-container>
  3 |         <el-aside style="padding-right: 20px;">
  4 |             <el-form :label-position="labelPosition" label-width="80px">
  5 |                 <el-form-item label="端口">
  6 |                     <el-select v-model="com" :disabled="isOpen" placeholder="请选择">
  7 |                         <el-option v-for="port in ports" :label="port.label" :value="port.value"
  8 |                                    :key="port.value"></el-option>
  9 |                     </el-select>
 10 |                 </el-form-item>
 11 |                 <el-form-item label="波特率">
 12 |                     <el-select v-model="options.baudRate" :disabled="isOpen" placeholder="请选择">
 13 |                         <el-option v-for="baudRate in baudRateList" :label="baudRate.label" :value="baudRate.value"
 14 |                                    :key="baudRate.value"></el-option>
 15 |                     </el-select>
 16 |                 </el-form-item>
 17 |                 <el-form-item label="校验位">
 18 |                     <el-select v-model="options.parity" :disabled="isOpen" placeholder="请选择">
 19 |                         <el-option v-for="parity in parityList" :label="parity.label" :value="parity.value"
 20 |                                    :key="parity.value"></el-option>
 21 |                     </el-select>
 22 |                 </el-form-item>
 23 |                 <el-form-item label="数据位">
 24 |                     <el-select v-model="options.dataBits" :disabled="isOpen" placeholder="请选择">
 25 |                         <el-option v-for="dataBit in dataBitList" :label="dataBit.label" :value="dataBit.value"
 26 |                                    :key="dataBit.value"></el-option>
 27 |                     </el-select>
 28 |                 </el-form-item>
 29 |                 <el-form-item label="停止位">
 30 |                     <el-select v-model="options.stopBits" :disabled="isOpen" placeholder="请选择">
 31 |                         <el-option v-for="stopBit in stopBitList" :label="stopBit.label" :value="stopBit.value"
 32 |                                    :key="stopBit.value"></el-option>
 33 |                     </el-select>
 34 |                 </el-form-item>
 35 |                 <el-form-item v-if="state == 0">
 36 |                     <el-col :span="10">
 37 |                         <el-button :size="buttonSize" type="info" circle icon="el-icon-switch-button"></el-button>
 38 |                     </el-col>
 39 |                     <el-col :span="10">
 40 |                         <el-button :size="buttonSize" @click="openCom">打开串口</el-button>
 41 |                     </el-col>
 42 |                 </el-form-item>
 43 |                 <el-form-item v-else>
 44 |                     <el-col :span="10">
 45 |                         <el-button :size="buttonSize" type="success" circle icon="el-icon-switch-button"></el-button>
 46 |                     </el-col>
 47 |                     <el-col :span="10">
 48 |                         <el-button :size="buttonSize" @click="closeCom">关闭串口</el-button>
 49 |                     </el-col>
 50 |                 </el-form-item>
 51 |             </el-form>
 52 |             <el-form>
 53 |                 <el-form-item>
 54 |                     <el-col :span="8">
 55 |                         <el-button :size="buttonSize" @click="resetPullData">清空接收区</el-button>
 56 |                     </el-col>
 57 |                     <el-col :span="8">
 58 |                         <el-button :size="buttonSize" v-if="isShowPullDate" @click="updateShowPullDate">停止显示</el-button>
 59 |                         <el-button :size="buttonSize" v-else @click="updateShowPullDate">恢复显示</el-button>
 60 |                     </el-col>
 61 |                     <el-col :span="8">
 62 |                         <el-button :size="buttonSize" @click="writeFile">保存接收数据</el-button>
 63 |                     </el-col>
 64 |                 </el-form-item>
 65 |                 <el-form-item>
 66 |                     <el-col :span="12">
 67 |                         <el-checkbox v-model="autoClean">自动清空</el-checkbox>
 68 |                     </el-col>
 69 |                     <el-col :span="12">
 70 |                         <el-checkbox v-model="hexDisplay">十六进制显示</el-checkbox>
 71 |                     </el-col>
 72 |                 </el-form-item>
 73 |             </el-form>
 74 |             <el-form style="align-items: center;">
 75 |                 <el-form-item>
 76 |                     <span style="margin-right: 1rem;"><span style="color: red;">{{stateText}}</span></span>
 77 |                 </el-form-item>
 78 |             </el-form>
 79 |         </el-aside>
 80 |         <el-main style="padding: 0 20px 0 0;">
 81 |             <el-form v-model="com">
 82 |                 <el-form-item>
 83 |                     <el-input id="pullDta" type="textarea" resize="none" placeholder="显示区" v-model="pullData" :rows="10" readonly></el-input>
 84 |                 </el-form-item>
 85 |                 <el-form-item>
 86 |                     <el-input type="textarea" resize="none" placeholder="输入区" v-model="pushData" :rows="4" @input="hexRegExp"></el-input>
 87 |                 </el-form-item>
 88 |                 <el-form-item>
 89 |                     <el-col :span="24" style="margin-top: 1rem;">
 90 |                         <el-input type="number" v-model="autoSendRate">
 91 |                             <template slot="prepend">自动发送周期</template>
 92 |                             <template slot="append">毫秒</template>
 93 |                         </el-input>
 94 |                     </el-col>
 95 |                     <el-col :span="12">
 96 |                         <el-checkbox v-model="autoSend" @change="autoSendData" style="margin-top: 1rem;">自动发送</el-checkbox>
 97 |                         <el-checkbox v-model="hexSend" style="margin-top: 1rem;">十六进制发送</el-checkbox>
 98 |                     </el-col>
 99 |                     <el-col :span="6" style="padding-top: 1rem;">
100 |                         <span :size="buttonSize" type="text" style="margin-right: 1rem;">
101 |                             Tx: {{pushBit}}
102 |                         </span>
103 |                     </el-col>
104 |                     <el-col :span="6" style="padding-top: 1rem;">
105 |                         <span :size="buttonSize" type="text" style="margin-right: 1rem;">
106 |                             Rx: {{pullBit}}
107 |                         </span>
108 |                     </el-col>
109 |                 </el-form-item>
110 |                 <el-form-item style="text-align: right;">
111 |                     <el-button :size="buttonSize" @click="readFile">读取文件</el-button>
112 |                     <el-button :size="buttonSize" @click="resetPushData">清空重填</el-button>
113 |                     <el-button :size="buttonSize" @click="resetCountBit">计数清零</el-button>
114 |                     <el-button :size="buttonSize" @click="portWrite">手动发送</el-button>
115 |                 </el-form-item>
116 |             </el-form>
117 |         </el-main>
118 |     </el-container>
119 | </template>
120 | 
121 | <script>
122 |     import Vue from 'vue'
123 | 
124 |     export default {
125 |         name: 'Main',
126 |         watch: {
127 |             autoSendRate(val) {
128 |                 let _ts = this;
129 |                 if (val > 0) {
130 |                     _ts.autoSendData(_ts.autoSend);
131 |                 }
132 |             }
133 |         },
134 |         data() {
135 |             return {
136 |                 buttonSize: 'small',
137 |                 timer: null,    // 定时器
138 |                 port: null, // 串口实体
139 |                 isOpen: false,  // 串口打开状态
140 |                 isShowPullDate: true,   // 是否显示
141 |                 labelPosition: 'right', // 对齐方式
142 |                 state: 0,   // 串口状态 0: 未打开, 1: 打开
143 |                 com: '',    // 串口路径 COM1
144 |                 pullData: '',   // 接收到的数据
145 |                 pushData: '',   // 发送的数据
146 |                 stateText: '准备就绪',  // 状态提示
147 |                 pushBit: 0, // 发送字节数
148 |                 pullBit: 0, // 接收字节数
149 |                 autoSendRate: 1000, // 自动发送频率 ms
150 |                 autoClean: false,   // 自动清空
151 |                 hexDisplay: false,  // 16 进制显示
152 |                 autoSend: false,    // 自动发送状态
153 |                 hexSend: false, // 16 进制发送
154 |                 sendState: false, // 16 进制发送
155 |                 options: {  // 串口配置信息
156 |                     baudRate: 9600,
157 |                     parity: 'none',
158 |                     dataBits: 8,
159 |                     stopBits: 1,
160 |                     autoOpen: false
161 |                 },
162 |                 ports: [],  // 本机串口列表
163 |                 baudRateList: [
164 |                     {
165 |                         label: '300',
166 |                         value: 300
167 |                     },
168 |                     {
169 |                         label: '600',
170 |                         value: 600
171 |                     },
172 |                     {
173 |                         label: '1200',
174 |                         value: 1200
175 |                     },
176 |                     {
177 |                         label: '2400',
178 |                         value: 2400
179 |                     },
180 |                     {
181 |                         label: '4800',
182 |                         value: 4800
183 |                     },
184 |                     {
185 |                         label: '9600',
186 |                         value: 9600
187 |                     },
188 |                     {
189 |                         label: '19200',
190 |                         value: 19200
191 |                     },
192 |                     {
193 |                         label: '38400',
194 |                         value: 38400
195 |                     },
196 |                     {
197 |                         label: '43000',
198 |                         value: 43000
199 |                     },
200 |                     {
201 |                         label: '56000',
202 |                         value: 56000
203 |                     },
204 |                     {
205 |                         label: '57600',
206 |                         value: 57600
207 |                     },
208 |                     {
209 |                         label: '115200',
210 |                         value: 115200
211 |                     },
212 |                     {
213 |                         label: '128000',
214 |                         value: 128000
215 |                     },
216 |                     {
217 |                         label: '230400',
218 |                         value: 230400
219 |                     },
220 |                     {
221 |                         label: '256000',
222 |                         value: 256000
223 |                     },
224 |                     {
225 |                         label: '460800',
226 |                         value: 460800
227 |                     }
228 |                 ],
229 |                 parityList: [
230 |                     {
231 |                         label: 'None',
232 |                         value: 'none'
233 |                     },
234 |                     {
235 |                         label: 'Odd',
236 |                         value: 'odd'
237 |                     },
238 |                     {
239 |                         label: 'Even',
240 |                         value: 'even'
241 |                     },
242 |                     {
243 |                         label: 'Mark',
244 |                         value: 'mark'
245 |                     },
246 |                     {
247 |                         label: 'Space',
248 |                         value: 'space'
249 |                     }
250 |                 ],
251 |                 dataBitList: [
252 |                     {
253 |                         label: '5',
254 |                         value: 5
255 |                     },
256 |                     {
257 |                         label: '6',
258 |                         value: 6
259 |                     },
260 |                     {
261 |                         label: '7',
262 |                         value: 7
263 |                     },
264 |                     {
265 |                         label: '8',
266 |                         value: 8
267 |                     }
268 |                 ],
269 |                 stopBitList: [
270 |                     {
271 |                         label: '1',
272 |                         value: 1
273 |                     },
274 |                     {
275 |                         label: '1.5',
276 |                         value: 1.5
277 |                     },
278 |                     {
279 |                         label: '2',
280 |                         value: 2
281 |                     }
282 |                 ]
283 |             }
284 |         },
285 |         methods: {
286 |             openCom() {
287 |                 let _ts = this
288 |                 let port = _ts.port;
289 |                 if (port) {
290 |                     _ts.closeCom();
291 |                 }
292 |                 port = new Vue.SerialPort(_ts.com, _ts.options);
293 | 
294 |                 port.open(function (err) {
295 |                     if (err) {
296 |                         _ts.$set(_ts, 'stateText', err);
297 |                         new Notification('Nebula Helper', {
298 |                             body: err
299 |                         })
300 |                         return console.log('Error opening port: ', err)
301 |                     }
302 |                     // Because there's no callback to write, write errors will be emitted on the port:
303 |                     _ts.$set(_ts, 'state', 1);
304 |                     _ts.$set(_ts, 'stateText', '串口已开启');
305 |                     _ts.$set(_ts, 'isOpen', true);
306 |                     _ts.$set(_ts, 'port', port);
307 |                 })
308 | 
309 |                 // The open event is always emitted
310 |                 port.on('open', function () {
311 |                     // open logic
312 |                     console.log('打开中...');
313 |                     console.log('串口打开状态', port.isOpen);
314 |                 })
315 | 
316 |                 port.on('error', (error) => {
317 |                     //捕获错误
318 |                     new Notification('Nebula Helper', {
319 |                         body: error
320 |                     })
321 |                     _ts.$set(_ts, 'stateText', error);
322 |                     console.log('Error: ', error);
323 |                 })
324 |                 // 串口设备传来的数据 是buffer对象，用toString转一下码
325 |                 port.on('data', function (data) {
326 |                     // 判断是否显示接收的数据
327 |                     if (_ts.isShowPullDate) {
328 |                         let pullData;
329 |                         if (_ts.hexDisplay) {
330 |                             pullData = _ts.handlerHexDisplay(data.toString('hex').toLocaleUpperCase());
331 |                         } else {
332 |                             if (_ts.isGBK(data)) {
333 |                                 let encoding = 'GB2312';
334 |                                 pullData = window.iconv.decode(data, encoding);
335 |                             } else {
336 |                                 pullData = data.toString();
337 |                             }
338 |                         }
339 | 
340 |                         _ts.$set(_ts, 'pullData', _ts.pullData + pullData);
341 |                         // 接收字节数
342 |                         _ts.$set(_ts, 'pullBit', _ts.pullBit + pullData.length);
343 |                         setTimeout(function () {
344 |                             let pullDataElement = document.getElementById('pullDta');
345 |                             pullDataElement.scrollTop = pullDataElement.scrollHeight;
346 |                         }, 400);
347 |                     }
348 |                 })
349 |             },
350 |             closeCom() {
351 |                 let _ts = this
352 |                 let port = _ts.port;
353 |                 if (port) {
354 |                     try {
355 |                         if (port.isOpen) {
356 |                             port.close();
357 |                         } else {
358 |                             _ts.genPorts();
359 |                         }
360 |                         _ts.$set(_ts, 'state', 0);
361 |                         _ts.$set(_ts, 'isOpen', false);
362 |                         _ts.$set(_ts, 'stateText', '串口已关闭');
363 |                         console.log('关闭中...');
364 |                         console.log('串口打开状态', port.isOpen);
365 |                     } catch (e) {
366 |                         _ts.$set(_ts, 'stateText', e);
367 |                         console.log(e);
368 |                     }
369 |                 }
370 |             },
371 |             portWrite() {
372 |                 let _ts = this
373 |                 let port = _ts.port;
374 |                 if (port && port.isOpen && _ts.pushData) {
375 |                     let encoding = 'utf-8';
376 |                     let pushData;
377 |                     if (_ts.hexSend) {
378 |                         if (!_ts.sendState) {
379 |                             return;
380 |                         }
381 |                         encoding = 'hex';
382 |                         pushData = _ts.handlerHex(_ts.pushData);
383 |                     } else {
384 |                         pushData = window.iconv.encode(_ts.pushData, 'GB2312');
385 |                     }
386 |                     port.write(pushData, encoding, function (err, result) {
387 |                         if (err) {
388 |                             console.log('Error while sending message : ' + err);
389 |                         }
390 |                         if (result) {
391 |                             console.log('Response received after sending message : ' + result);
392 |                         }
393 |                         // 接收字节数
394 |                         _ts.$set(_ts, 'pushBit', _ts.pushBit + _ts.pushData.length);
395 |                         console.log('message written');
396 |                     })
397 |                     port.drain(error => {
398 |                         if (error) {
399 |                             console.log(error)
400 |                         }
401 |                     })
402 |                 }
403 |             },
404 |             genPorts() {
405 |                 let _ts = this;
406 |                 Vue.SerialPort.list().then(
407 |                     ports => {
408 |                         let portList = new Array();
409 |                         for (let i in ports) {
410 |                             let port = {
411 |                                 label: ports[i].path,
412 |                                 value: ports[i].path
413 |                             }
414 |                             portList.push(port)
415 |                         }
416 |                         if (portList.length > 0) {
417 |                             portList.sort(function (port1, port2) {
418 |                                 let s1 = _ts.strToBinary(port1.value, 10);
419 |                                 let s2 = _ts.strToBinary(port2.value, 10);
420 |                                 return s1 - s2
421 |                             });
422 |                             _ts.$set(_ts, 'stateText', '初始化成功');
423 |                             if (!_ts.com) {
424 |                                 _ts.$set(_ts, 'com', portList[0].value);
425 |                             }
426 |                         } else {
427 |                             _ts.$set(_ts, 'stateText', '未获取到串口信息');
428 |                             _ts.$set(_ts, 'com', '');
429 |                         }
430 |                         _ts.$set(_ts, 'ports', portList)
431 |                     },
432 |                     err => console.error(err)
433 |                 )
434 |             },
435 |             genRenderer() {
436 |                 let _ts = this;
437 |                 let ipcRenderer = window.electron.ipcRenderer;
438 |                 ipcRenderer.on('saveOptions', (event) => {
439 |                     if (event) {
440 |                         _ts.saveOptions();
441 |                     }
442 |                 });
443 |                 ipcRenderer.on('loadOptions', (event) => {
444 |                     if (event) {
445 |                         _ts.loadOptions();
446 |                     }
447 |                 });
448 |                 ipcRenderer.on('reloadPorts', (event) => {
449 |                     if (event) {
450 |                         _ts.genPorts();
451 |                     }
452 |                 });
453 |                 ipcRenderer.on('writeFile', (event) => {
454 |                     if (event) {
455 |                         _ts.writeFile();
456 |                     }
457 |                 });
458 |                 ipcRenderer.on('readFile', (event) => {
459 |                     if (event) {
460 |                         _ts.readFile();
461 |                     }
462 |                 });
463 |                 let remote = window.electron.remote;
464 |                 const SerialPort = remote.getGlobal('SerialPort');
465 |                 window.iconv = remote.getGlobal('iconv');
466 |                 window.fs = remote.getGlobal('fs');
467 |                 console.log = remote.getGlobal('log');
468 |                 Vue.SerialPort = Vue.prototype.$SerialPort = SerialPort;
469 |                 _ts.genPorts();
470 |             },
471 |             resetPushData() {
472 |                 this.$set(this, 'pushData', '');
473 |             },
474 |             resetPullData() {
475 |                 this.$set(this, 'pullData', '');
476 |             },
477 |             updateShowPullDate() {
478 |                 this.$set(this, 'isShowPullDate', !this.isShowPullDate)
479 |             },
480 |             autoSendData(val) {
481 |                 let _ts = this;
482 |                 if (_ts.timer) {
483 |                     window.clearInterval(_ts.timer);
484 |                 }
485 |                 if (val) {
486 |                     _ts.timer = setInterval(function () {
487 |                         _ts.portWrite();
488 |                     }, _ts.autoSendRate);
489 |                 }
490 |             },
491 |             strToBinary(str, binary) {
492 |                 let result = [];
493 |                 let list = str.split("");
494 |                 for (let i = 0; i < list.length; i++) {
495 |                     let item = list[i];
496 |                     let data = item.charCodeAt(0).toString(binary);
497 |                     result.push(data);
498 |                 }
499 |                 return result.join("");
500 |             },
501 |             resetCountBit() {
502 |                 this.$set(this, 'pushBit', 0);
503 |                 this.$set(this, 'pullBit', 0);
504 |             },
505 |             isGBK(data) {
506 |                 if (data[0] == 0xff && data[1] == 0xfe) {
507 |                     console.log('unicode');
508 |                     return false;
509 |                 } else if (data[0] == 0xfe && data[1] == 0xff) {
510 |                     console.log('unicode');
511 |                     return false;
512 |                 } else if (data[0] == 0xef && data[1] == 0xbb) {
513 |                     console.log('utf8');
514 |                     return false;
515 |                 } else {
516 |                     return true;
517 |                 }
518 |             },
519 |             readFile() {
520 |                 let _ts = this;
521 |                 let filters = [
522 |                     {name: 'txt', extensions: ['txt']}
523 |                 ]
524 |                 _ts.read('读取文件', 'loadPushData', filters)
525 |             },
526 |             writeFile() {
527 |                 let _ts = this;
528 |                 let filters = [
529 |                     {name: 'txt', extensions: ['txt']}
530 |                 ];
531 |                 _ts.write('保存接收数据', _ts.pullData, filters);
532 |             },
533 |             saveOptions() {
534 |                 let _ts = this;
535 |                 let filters = [{
536 |                     name: 'json', extensions: ['json']
537 |                 }];
538 |                 let option = {
539 |                     port: _ts.com,
540 |                     options: _ts.options
541 |                 }
542 |                 _ts.write('保存配置信息', JSON.stringify(option), filters);
543 |             },
544 |             loadOptions() {
545 |                 let _ts = this;
546 |                 let filters = [{
547 |                     name: 'json', extensions: ['json']
548 |                 }];
549 |                 _ts.read('加载配置信息', 'loadOptions', filters);
550 |             },
551 |             read(title, method, filters) {
552 |                 let _ts = this;
553 |                 const {dialog} = window.electron.remote;
554 |                 const win = window.electron.remote.getCurrentWindow();
555 |                 dialog.showOpenDialog(win, {
556 |                     title: title,
557 |                     multiSelections: false,
558 |                     filters: filters
559 |                 }).then(result => {
560 |                     if (result.canceled) {
561 |                         return;
562 |                     }
563 |                     // 创建可读流
564 |                     let readStream = window.fs.createReadStream(result.filePaths[0], {
565 |                         flags: 'r',       // 设置文件只读模式打开文件
566 |                         encoding: 'utf8'  // 设置读取文件的内容的编码
567 |                     });
568 | 
569 |                     // 打开文件流的事件。
570 |                     readStream.on('open', fd => {
571 |                         console.log('文件可读流已打开，句柄：%s', fd);
572 |                     });
573 | 
574 |                     // 可读流打开后，会源源不断的触发此事件方法，回调函数参数就是读取的数据。
575 |                     readStream.on('data', data => {
576 |                         if (method === 'loadOptions') {
577 |                             if (data) {
578 |                                 let option = JSON.parse(data.toString());
579 |                                 _ts.$set(_ts, 'com', option.port);
580 |                                 _ts.$set(_ts, 'options', option.options);
581 |                             }
582 |                         } else {
583 |                             _ts.$set(_ts, 'pushData', data.toString());
584 |                         }
585 |                     });
586 | 
587 |                     readStream.on('close', () => {
588 |                         console.log('文件可读流结束！');
589 |                     });
590 |                 }).catch(err => {
591 |                     console.log(err)
592 |                 })
593 |             },
594 |             write(title, data, filters) {
595 |                 const {dialog} = window.electron.remote;
596 |                 const win = window.electron.remote.getCurrentWindow();
597 |                 dialog.showSaveDialog(win, {
598 |                     title: title,
599 |                     filters: filters
600 |                 }).then(result => {
601 |                     if (result.canceled) {
602 |                         return;
603 |                     }
604 |                     // 创建一个可以写入的流，写入到文件 output.txt 中
605 |                     const writerStream = window.fs.createWriteStream(result.filePath);
606 |                     // 使用 utf8 编码写入数据
607 |                     writerStream.write(data);
608 |                     // 标记文件末尾
609 |                     writerStream.end();
610 |                     // 处理流事件 --> data, end, and error
611 |                     writerStream.on('finish', function () {
612 |                         console.log("写入完成。");
613 |                     });
614 |                     writerStream.on('error', function (err) {
615 |                         console.log(err.stack);
616 |                     });
617 |                 }).catch(err => {
618 |                     console.log(err)
619 |                 })
620 |             },
621 |             handlerHex(data) {
622 |                 let _ts = this;
623 |                 let dataStr = '';
624 |                 if (data.trim().indexOf(' ') > -1) {
625 |                     let hexArr = data.trim().split(' ');
626 |                     for(let i in hexArr) {
627 |                         if (hexArr[i].length == 1) {
628 |                             dataStr += '0';
629 |                         }
630 |                         dataStr += hexArr[i];
631 |                     }
632 |                 } else {
633 |                     dataStr = _ts.handlerHexDisplay(data.trim());
634 |                 }
635 |                 return dataStr.replace(/\s+/g,'');
636 |             },
637 |             handlerHexDisplay(data) {
638 |                 let dataStr = '';
639 |                 let isOdd = true;
640 |                 if (data.length % 2 == 0) {
641 |                     isOdd = false;
642 |                 }
643 |                 for (let i = 0, len = data.length; i < len; i++) {
644 |                     // 自动补零
645 |                     if (isOdd && len - i == 1) {
646 |                         dataStr += '0';
647 |                     }
648 |                     // 字符拼接
649 |                     dataStr += data.charAt(i);
650 |                     // 每两个字符加一个空格
651 |                     if (i % 2 > 0 || len - i == 1) {
652 |                         dataStr += ' ';
653 |                     }
654 |                 }
655 |                 return dataStr;
656 |             },
657 |             hexRegExp(value) {
658 |                 if (!this.hexSend) {
659 |                     return;
660 |                 }
661 |                 let _ts = this;
662 |                 let reg = /^[0-9a-fA-F]*$/
663 |                 if (value.indexOf(' ') > -1) {
664 |                     const hexArr = value.split(' ');
665 |                     for (let i in hexArr) {
666 |                         if (hexArr[i].length > 2) {
667 |                             _ts.$set(_ts, 'sendState', false);
668 |                             _ts.$set(_ts, 'stateText', '非法 16 进制值');
669 |                             return;
670 |                         } else {
671 |                             if (!reg.test(hexArr[i])) {
672 |                                 _ts.$set(_ts, 'sendState', false);
673 |                                 _ts.$set(_ts, 'pushData', value.substring(0, value.length - 1));
674 |                                 _ts.$set(_ts, 'stateText', '非法 16 进制值');
675 |                                 return;
676 |                             }
677 |                         }
678 |                     }
679 |                 } else {
680 |                     if (!reg.test(value)) {
681 |                         _ts.$set(_ts, 'sendState', false);
682 |                         _ts.$set(_ts, 'pushData', value.substring(0, value.length - 1));
683 |                         _ts.$set(_ts, 'stateText', '非法 16 进制值');
684 |                         return;
685 |                     }
686 |                 }
687 | 
688 |                 _ts.$set(_ts, 'pushData', value.toLocaleUpperCase());
689 |                 _ts.$set(_ts, 'stateText', '');
690 |                 _ts.$set(_ts, 'sendState', true);
691 |             }
692 |         },
693 |         mounted() {
694 |             this.genRenderer();
695 |         }
696 |     }
697 | </script>
698 | 
699 | <style scoped>
700 | </style>
701 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import './plugins/element.js'
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/src/plugins/element.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Element from 'element-ui'
3 | import 'element-ui/lib/theme-chalk/index.css'
4 | 
5 | Vue.use(Element)
6 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     pluginOptions: {
 3 |         electronBuilder: {
 4 |             builderOptions: {
 5 |                 "appId": "com.rymcu.nebula-helper",
 6 |                 "productName": "nebula-helper",
 7 |                 "copyright": "Copyright © rymcu.com",
 8 |                 "win": {
 9 |                     "icon": "./favicon.ico",
10 |                     "target": [
11 |                         {
12 |                             "target": "nsis",
13 |                             "arch": [
14 |                                 "x64",
15 |                                 "ia32"
16 |                             ]
17 |                         }
18 |                     ]
19 |                 },
20 |                 "linux": {
21 |                     "icon": "./favicon.ico",
22 |                     "target": [
23 |                         "snap"
24 |                     ]
25 |                 }
26 |             }
27 |         }
28 |     }
29 | }


--------------------------------------------------------------------------------