一些改进

Author: guohaomeng

src/App.vue

@@ -11,7 +11,10 @@
       <!-- 右半屏幕 -->
       <el-col :span="12">
         <el-row justify="end" style="height:32px;">
-          <el-form-item label="深色模式">
+          <el-form-item label="连接设备" style="margin-right: 20px;">
+            <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="开"
               inactive-text="关" />
           </el-form-item>
@@ -39,6 +42,7 @@
 </style>
 <script setup lang="ts">
 import { ref } from 'vue'
+import { onMounted } from 'vue'
 import {
   ElNotification,
   ElRow,
@@ -52,11 +56,19 @@ import { useDark, useToggle } from '@vueuse/core'
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
 let switchVal = ref(isDark.value)
+let isConnected = ref(false)
 
 function UseDarkMode() {
   WaveGenChart.darkMode(isDark.value);
   OSChart.darkMode(isDark.value);
 };
+function connectDevice() {
+  console.log("连接设备");
+}
+onMounted(() => {
+  UseDarkMode();
+  switchVal = ref(isDark.value);
+});
 
 </script>
 <script lang="ts">

src/components/OSChart.vue

@@ -1,6 +1,15 @@
 <template>
   <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-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>
+    </el-form-item>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -21,6 +30,13 @@ import { CanvasRenderer } from 'echarts/renderers';
 import { onMounted } from 'vue';
 import { EChartsType } from 'echarts/core';
 
+import { ref } from "vue";
+import {
+  ElFormItem,
+  ElInputNumber,
+  ElButton,
+} from 'element-plus'
+
 echarts.use([
   ToolboxComponent,
   TooltipComponent,
@@ -76,6 +92,17 @@ var option: EChartsOption;
 var myChart: EChartsType;
 var chartDom: HTMLElement;
 
+let isRun = true;
+const sampleRate = ref(8000);
+const sampleRateChange = (value: number) => {
+  console.log(value);
+}
+function OSCRun(){
+  isRun = true;
+};
+function OSCStop(){
+  isRun = false;
+};
 function func(x: number) {
   x /= 10;
   return Math.sin(x) * 3.3;
@@ -193,4 +220,8 @@ export default {
 .OSChart {
   margin: 0 auto;
 }
+.OSCForm {
+  width: 50%;
+  margin: 0 auto;
+}
 </style>

src/components/WaveGen.vue

@@ -11,7 +11,7 @@
           <el-option label="锯齿波" value="3"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="频率" style="width:100%s">
+      <el-form-item label="频率" style="width:100%">
         <el-input-number v-model="freq" @change="freqChange(freq)" :min="1" :max="1500" :step="1" label="频率">
         </el-input-number>
       </el-form-item>
@@ -28,8 +28,8 @@
           :step="0.2" label="频率"></el-input-number>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSubmit" style="width: 40%; margin-right: 5%;">立即设置</el-button>
-        <el-button style="width: 40%; margin-left: 0%;">取消</el-button>
+        <el-button type="primary" @click="onSubmit" style="width: 45%; margin-right: 5%;">立即设置</el-button>
+        <el-button style="width: 45%; margin-left: 5%;">取消</el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -108,7 +108,7 @@ export default {
 
 <style>
 .waveGen {
-  width: 50%;
+  width: 55%;
   height: auto;
   margin: 0 auto;
   font-size: 2em;

src/components/WaveGenChart.vue

@@ -134,7 +134,7 @@ option = {
     {
       show: true,
       type: 'inside',
-      filterMode: 'filter',
+      filterMode: 'none',
       xAxisIndex: [0],
       startValue: 0,
       endValue: 300,
@@ -145,7 +145,7 @@ option = {
       type: 'inside',
       // disabled: true,
       // zoomLock: true,
-      filterMode: 'empty',
+      filterMode: 'none',
       yAxisIndex: [0],
       startValue: -1,
       endValue: 5
@@ -197,8 +197,7 @@ function wave_gen(index: number) {
   else if (index == 3) //锯齿波
   {
     for (var i = -128; i < 128; i++) {
-      waveTab1[i + 128] = ((i + (offSetValue * 255 / 3.3)) * (uMaxValue / 3.3));
-
+      waveTab1[i + 128] = (i * (uMaxValue / 3.3) + (offSetValue * 255 / 3.3));
     }
     console.log("波形表重设成功，当前为锯齿波\n");
   }