feat: not finish logic analyzer ui

components.d.ts

@@ -29,6 +29,7 @@ declare module 'vue' {
     LabCanvasNew: typeof import('./src/components/LabCanvas/LabCanvasNew.vue')['default']
     LabComponentsDrawer: typeof import('./src/components/LabCanvasNew/LabComponentsDrawer.vue')['default']
     LabComponentsDrawerNew: typeof import('./src/components/LabCanvas/LabComponentsDrawerNew.vue')['default']
+    LogicalWaveFormDisplay: typeof import('./src/components/LogicAnalyzer/LogicalWaveFormDisplay.vue')['default']
     LoginCard: typeof import('./src/components/LoginCard.vue')['default']
     MarkdownRenderer: typeof import('./src/components/MarkdownRenderer.vue')['default']
     MechanicalButton: typeof import('./src/components/equipments/MechanicalButton.vue')['default']

src/components/LogicAnalyzer/LogicalWaveFormDisplay.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="w-full h-100">
+    <v-chart v-if="true" class="w-full h-full" :option="option" autoresize />
+    <div
+      v-else
+      class="w-full h-full flex items-center justify-center text-gray-500"
+    >
+      暂无数据
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+// Echarts
+import { use } from "echarts/core";
+import { LineChart } from "echarts/charts";
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  ToolboxComponent,
+  GridComponent,
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import type { ComposeOption } from "echarts/core";
+import type { LineSeriesOption } from "echarts/charts";
+import type {
+  TitleComponentOption,
+  TooltipComponentOption,
+  LegendComponentOption,
+  ToolboxComponentOption,
+  GridComponentOption,
+} from "echarts/components";
+
+use([
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  ToolboxComponent,
+  GridComponent,
+  LineChart,
+  CanvasRenderer,
+]);
+
+type EChartsOption = ComposeOption<
+  | TitleComponentOption
+  | TooltipComponentOption
+  | LegendComponentOption
+  | ToolboxComponentOption
+  | GridComponentOption
+  | LineSeriesOption
+>;
+
+const option = computed((): EChartsOption => {
+  return {
+    title: {
+      text: "Stacked Area Chart",
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+        label: {
+          backgroundColor: "#6a7985",
+        },
+      },
+    },
+    legend: {
+      data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {},
+      },
+    },
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: "category",
+        boundaryGap: false,
+        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+      },
+    ],
+    series: [
+      {
+        name: "Email",
+        type: "line",
+        stack: "Total",
+        areaStyle: {},
+        emphasis: {
+          focus: "series",
+        },
+        data: [120, 132, 101, 134, 90, 230, 210],
+      },
+      {
+        name: "Union Ads",
+        type: "line",
+        stack: "Total",
+        areaStyle: {},
+        emphasis: {
+          focus: "series",
+        },
+        data: [220, 182, 191, 234, 290, 330, 310],
+      },
+      {
+        name: "Video Ads",
+        type: "line",
+        stack: "Total",
+        areaStyle: {},
+        emphasis: {
+          focus: "series",
+        },
+        data: [150, 232, 201, 154, 190, 330, 410],
+      },
+      {
+        name: "Direct",
+        type: "line",
+        stack: "Total",
+        areaStyle: {},
+        emphasis: {
+          focus: "series",
+        },
+        data: [320, 332, 301, 334, 390, 330, 320],
+      },
+      {
+        name: "Search Engine",
+        type: "line",
+        stack: "Total",
+        label: {
+          show: true,
+          position: "top",
+        },
+        areaStyle: {},
+        emphasis: {
+          focus: "series",
+        },
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+      },
+    ],
+  };
+});
+</script>

src/views/Project/LogicAnalyzer.vue

@@ -7,6 +7,7 @@
           <Zap class="w-5 h-5" />
           逻辑信号分析
         </h2>
+        <LogicalWaveFormDisplay />
       </div>
     </div>
 
@@ -37,7 +38,8 @@
 <script setup lang="ts">
 import { Zap, Settings, Layers } from "lucide-vue-next";
 import { useEquipments } from "@/stores/equipments";
+import LogicalWaveFormDisplay from "@/components/LogicAnalyzer/LogicalWaveFormDisplay.vue";
 
 // 使用全局设备配置
 const equipments = useEquipments();
-</script>
+</script>