添加websocket通讯模块,完善指令系统及示波器界面

Author: guohaomeng

src/App.vue

@@ -12,7 +12,8 @@
       <el-col :span="12">
         <el-row justify="end" style="height:32px;">
           <el-form-item label="连接设备" style="margin-right: 20px;">
-            <el-switch v-model="isConnected" @change="connectDevice()" inline-prompt active-text="开" inactive-text="关" />
+            <el-switch v-model="isConnected" @change="connectDevice()" inline-prompt active-text="开"
+              inactive-text="关" />
           </el-form-item>
           <el-form-item label="深色模式" style="margin-right: 20px;">
             <el-switch v-model="switchVal" @change="toggleDark(), UseDarkMode()" inline-prompt active-text="开"
@@ -63,8 +64,25 @@ function UseDarkMode() {
   OSChart.darkMode(isDark.value);
 };
 function connectDevice() {
-  console.log("连接设备");
+  if (isConnected.value == true) {
+    console.log("连接设备");
+    socket.init(receiveMessage);
+  }
+  else {
+    console.log("断开连接");
+    socket.close();
+  }
+}
+function receiveMessage(message: any) {
+  if (message.data[0] == '{') {
+    var data = JSON.parse(message.data);
+    OSChart.refreshData(data);
+  } else {
+    console.log(message.data);
+  }
+
 }
+
 onMounted(() => {
   UseDarkMode();
   switchVal = ref(isDark.value);
@@ -75,6 +93,8 @@ onMounted(() => {
 import WaveGen from './components/WaveGen.vue'
 import WaveGenChart from './components/WaveGenChart.vue'
 import OSChart from './components/OSChart.vue'
+import socket from './script/websocket'
+
 
 export default {
   name: 'App',

src/components/OSChart.vue

@@ -2,11 +2,12 @@
   <div :style="`width:${width}px;height:${height}px;`" :id="container" class="OSChart"></div>
   <div class="OSCForm">
     <el-form-item size="large">
-        <el-button type="primary" @click="OSCRun" style="width: 45%; margin-right: 5%;">运行</el-button>
-        <el-button @click="OSCStop" style="width: 45%; margin-left: 5%;">停止</el-button>
-      </el-form-item>
+      <el-button type="primary" @click="OSCRun" style="width: 45%; margin-right: 5%;">运行</el-button>
+      <el-button @click="OSCStop" style="width: 45%; margin-left: 5%;">停止</el-button>
+    </el-form-item>
     <el-form-item size="large" label="采样频率/Hz">
-      <el-input-number v-model="sampleRate" @change="sampleRateChange(sampleRate)" :min="1000" :max="128000" :step="1000" step-strictly label="采样频率/Hz">
+      <el-input-number v-model="sampleRate" @change="sampleRateChange(sampleRate)" :min="1000" :max="128000"
+        :step="1000" step-strictly label="采样频率/Hz">
       </el-input-number>
     </el-form-item>
   </div>
@@ -29,12 +30,14 @@ import { UniversalTransition } from 'echarts/features';
 import { CanvasRenderer } from 'echarts/renderers';
 import { onMounted } from 'vue';
 import { EChartsType } from 'echarts/core';
+import socket from '../script/websocket'
 
 import { ref } from "vue";
 import {
   ElFormItem,
   ElInputNumber,
   ElButton,
+  ElMessage
 } from 'element-plus'
 
 echarts.use([
@@ -93,15 +96,19 @@ var myChart: EChartsType;
 var chartDom: HTMLElement;
 
 let isRun = true;
+var OSCData = new Array();
 const sampleRate = ref(8000);
 const sampleRateChange = (value: number) => {
-  console.log(value);
+  console.log("R" + value + "\n");
+  sendData("R" + value);
 }
-function OSCRun(){
+function OSCRun() {
   isRun = true;
+  sendData("CT");
 };
-function OSCStop(){
+function OSCStop() {
   isRun = false;
+  sendData("CF");
 };
 function func(x: number) {
   x /= 10;
@@ -110,8 +117,15 @@ function func(x: number) {
 
 function generateData() {
   let data = [];
-  for (let i = 0; i <= 300; i += 1) {
-    data.push([i, func(i)]);
+  if (OSCData.length < 10) {
+    for (var i = 0; i < 256; i++) {
+      OSCData[i] = 0;
+      data.push([i, OSCData[i]]);
+    }
+  } else {
+    for (var i = 0; i < 256; i++) {
+      data.push([i, OSCData[i]]);
+    }
   }
   return data;
 }
@@ -149,7 +163,7 @@ option = {
     }
   },
   xAxis: {
-    name: 'x',
+    name: 'Div',
     min: 0,
     max: 256,
     minorTick: {
@@ -160,9 +174,9 @@ option = {
     }
   },
   yAxis: {
-    name: 'y',
-    min: -5,
-    max: 5,
+    name: '电压/V',
+    min: -0.2,
+    max: 3.5,
     minorTick: {
       show: true
     },
@@ -174,18 +188,18 @@ option = {
     {
       show: true,
       type: 'inside',
-      filterMode: 'filter',
+      filterMode: 'none',
       xAxisIndex: [0],
-      startValue: -20,
-      endValue: 20
+      startValue: 0,
+      endValue: 40
     },
     {
       show: true,
       type: 'inside',
-      filterMode: 'empty',
+      filterMode: 'none',
       yAxisIndex: [0],
-      startValue: -20,
-      endValue: 20
+      startValue: -1,
+      endValue: 5
     }
   ],
   series: [
@@ -205,9 +219,38 @@ function darkMode(isDark: boolean) {
     myChart = echarts.init(chartDom);
   myChart.setOption(option);
 }
+
+const sendData = (data: string) => {
+  if (socket.socket_open) {
+    socket.send(data);
+  } else {
+    ElMessage({
+      type: 'error',
+      message: '请先建立连接',
+      duration: 0,
+      center: true,
+      grouping: true,
+      showClose: true
+    })
+  }
+}
+function refreshData(message: any) {
+  if (isRun) {
+    OSCData = [];
+    OSCData = message.a;
+    myChart.setOption({
+      series: [
+        {
+          data: generateData()
+        }
+      ]
+    });
+  }
+}
 export default {
   name: "OSChart",
   darkMode,
+  refreshData,
   props2: {
     msg: String,
     option: Object
@@ -220,6 +263,7 @@ export default {
 .OSChart {
   margin: 0 auto;
 }
+
 .OSCForm {
   width: 50%;
   margin: 0 auto;

src/components/WaveGen.vue

@@ -5,7 +5,7 @@
     <!-- 表单1 -->
     <el-form ref="form" :model="form" label-width="auto" :size="formSize" :label-position="labelPosition">
       <el-form-item label="波形选择">
-        <el-select v-model="waveType" placeholder="请选择波形">
+        <el-select v-model="waveType" @change="waveTypeChange(waveType)" placeholder="请选择波形">
           <el-option label="正弦波" value="1"></el-option>
           <el-option label="方波" value="2"></el-option>
           <el-option label="锯齿波" value="3"></el-option>
@@ -43,15 +43,15 @@ import {
   ElButton,
   ElOption,
   ElInputNumber,
-  ElRow,
-  ElCol,
+  ElMessage,
   ElSelect,
   ElSlider,
   ElSwitch,
 } from 'element-plus'
 
 import { reactive } from 'vue'
 import WaveGenChart from './WaveGenChart.vue'
+import socket from '../script/websocket'
 
 defineProps<{ msg: string }>();
 
@@ -75,23 +75,47 @@ const form = reactive({
 
 })
 
+const sendData = (data: string) => {
+  if (socket.socket_open) {
+    socket.send(data);
+  } else {
+    ElMessage({
+      type: 'error',
+      message: '请先建立连接',
+      duration: 0,
+      center: true,
+      grouping: true,
+      showClose: true
+    })
+  }
+}
+
 const onSubmit = () => {
   WaveGenChart.refreshData();
   console.log('submit!')
 }
+const waveTypeChange = (value: string) => {
+  console.log("W" + value);
+  form.waveType = value;
+  sendData("W" + value);
+}
 const freqChange = (value: number) => {
-  console.log(value);
+  console.log("F" + value);
   form.freq = value;
+  sendData("F" + value);
 }
 const dutyChange = (value: number) => {
   console.log(value);
   form.duty = value;
+  sendData("D"+value);
 }
 const uMaxValueChange = (value: number) => {
   console.log(value);
+  sendData("U"+value);
 }
 const biasChange = (value: number) => {
   console.log(value);
+  sendData("B"+value);
 }
 export default {
   name: "WaveGen",