feat: 完善示波器前端

src/components/Oscilloscope/OscilloscopeWaveformDisplay.vue

@@ -1,11 +1,40 @@
 <template>
-  <div class="w-full h-100">
+  <div class="w-full h-100 flex flex-col">
+    <!-- 原有内容 -->
     <v-chart v-if="hasData" class="w-full h-full" :option="option" autoresize />
     <div
       v-else
-      class="w-full h-full flex items-center justify-center text-gray-500"
+      class="w-full h-full flex flex-col gap-4 items-center justify-center text-gray-500"
     >
-      暂无数据
+      <span> 暂无数据 </span>
+      <!-- 采集控制按钮 -->
+      <div class="flex justify-center items-center mb-2">
+        <button
+          class="group relative px-8 py-3 bg-gradient-to-r text-white font-medium rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 active:scale-95"
+          :class="{
+            'from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 focus:ring-blue-300':
+              !oscManager.isCapturing.value,
+            'from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 focus:ring-red-300':
+              oscManager.isCapturing.value,
+          }"
+          @click="
+            oscManager.isCapturing.value
+              ? oscManager.stopCapture()
+              : oscManager.startCapture()
+          "
+        >
+          <span class="flex items-center gap-2">
+            <template v-if="oscManager.isCapturing.value">
+              <Square class="w-5 h-5" />
+              停止采集
+            </template>
+            <template v-else>
+              <Play class="w-5 h-5" />
+              开始采集
+            </template>
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -37,6 +66,7 @@ import type {
   GridComponentOption,
 } from "echarts/components";
 import { useRequiredInjection } from "@/utils/Common";
+import { Play, Square } from "lucide-vue-next";
 
 use([
   TooltipComponent,
@@ -58,7 +88,9 @@ type EChartsOption = ComposeOption<
 >;
 
 // 使用 manager 获取 oscilloscope 数据
-const { oscData } = useRequiredInjection(useOscilloscopeState);
+const oscManager = useRequiredInjection(useOscilloscopeState);
+
+const oscData = computed(() => oscManager.oscData.value);
 
 const hasData = computed(() => {
   return (
@@ -66,11 +98,9 @@ const hasData = computed(() => {
     oscData.value.x &&
     oscData.value.y &&
     oscData.value.x.length > 0 &&
-    (
-      Array.isArray(oscData.value.y[0])
-        ? oscData.value.y.some((channel: any) => channel.length > 0)
-        : oscData.value.y.length > 0
-    )
+    (Array.isArray(oscData.value.y[0])
+      ? oscData.value.y.some((channel: any) => channel.length > 0)
+      : oscData.value.y.length > 0)
   );
 });
 

src/views/Project/Oscilloscope.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-base-100 flex flex-col">
+  <div class="bg-base-100 flex flex-col gap-4">
     <!-- 波形展示 -->
     <div class="card bg-base-200 shadow-xl mx-5">
       <div class="card-body">
@@ -10,6 +10,128 @@
         <OscilloscopeWaveformDisplay />
       </div>
     </div>
+
+    <!-- 示波器配置 -->
+    <div class="card bg-base-200 shadow-xl mx-5">
+      <div class="card-body">
+        <h2 class="card-title">示波器配置</h2>
+        <form class="flex flex-col gap-2" @submit.prevent="applyConfiguration">
+          <div class="flex gap-4">
+            <label>
+              触发电平:
+              <input
+                type="number"
+                v-model="osc.config.triggerLevel"
+                min="0"
+                max="255"
+                class="input input-bordered w-24"
+              />
+            </label>
+            <label>
+              边沿:
+              <select
+                v-model="osc.config.triggerRisingEdge"
+                class="select select-bordered w-24"
+              >
+                <option :value="true">上升沿</option>
+                <option :value="false">下降沿</option>
+              </select>
+            </label>
+            <label>
+              水平偏移:
+              <input
+                type="number"
+                v-model="osc.config.horizontalShift"
+                class="input input-bordered w-24"
+              />
+            </label>
+            <label>
+              抽取率:
+              <input
+                type="number"
+                v-model="osc.config.decimationRate"
+                min="0"
+                class="input input-bordered w-24"
+              />
+            </label>
+            <label>
+              自动刷新RAM:
+              <input
+                type="checkbox"
+                v-model="osc.config.autoRefreshRAM"
+                class="checkbox"
+              />
+            </label>
+          </div>
+          <div class="flex gap-2 mt-2">
+            <button
+              class="btn btn-primary"
+              type="submit"
+              :disabled="osc.isOperationInProgress.value"
+            >
+              应用配置
+            </button>
+            <button
+              class="btn btn-secondary"
+              type="button"
+              @click="osc.resetConfiguration"
+              :disabled="osc.isOperationInProgress.value"
+            >
+              重置
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- 捕获控制 -->
+    <div class="card bg-base-200 shadow-xl mx-5">
+      <div class="card-body flex gap-2">
+        <h2 class="card-title">捕获控制</h2>
+        <button
+          class="btn btn-success"
+          @click="osc.startCapture"
+          :disabled="osc.isOperationInProgress.value"
+        >
+          开始捕获
+        </button>
+        <button
+          class="btn btn-warning"
+          @click="osc.stopCapture"
+          :disabled="!osc.isCapturing.value"
+        >
+          停止捕获
+        </button>
+        <button
+          class="btn btn-info"
+          @click="osc.getOscilloscopeData"
+          :disabled="osc.isOperationInProgress.value"
+        >
+          获取数据
+        </button>
+        <button
+          class="btn btn-accent"
+          @click="osc.generateTestData"
+          :disabled="osc.isOperationInProgress.value"
+        >
+          生成测试数据
+        </button>
+      </div>
+    </div>
+
+    <!-- RAM刷新 -->
+    <div class="card bg-base-200 shadow-xl mx-5">
+      <div class="card-body flex gap-2">
+        <h2 class="card-title">RAM 操作</h2>
+        <button
+          class="btn btn-outline"
+          @click="osc.refreshRAM"
+          :disabled="osc.isOperationInProgress.value"
+        >
+          刷新RAM
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -17,7 +139,15 @@
 import { Activity } from "lucide-vue-next";
 import { OscilloscopeWaveformDisplay } from "@/components/Oscilloscope";
 import { useEquipments } from "@/stores/equipments";
+import { useOscilloscopeState } from "@/components/Oscilloscope/OscilloscopeManager";
+import { useRequiredInjection } from "@/utils/Common";
 
 // 使用全局设备配置
 const equipments = useEquipments();
+
+// 获取示波器状态和操作
+const osc = useRequiredInjection(useOscilloscopeState);
+
+// 应用配置
+const applyConfiguration = () => osc.applyConfiguration();
 </script>