FPGA_WebLab/src/components/Oscilloscope/OscilloscopeWaveformDisplay.vue

<template>
  <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 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>

<script setup lang="ts">
import { computed } from "vue";
import { forEach } from "lodash";
import VChart from "vue-echarts";
import { useOscilloscopeState } from "./OscilloscopeManager";

// Echarts
import { use } from "echarts/core";
import { LineChart } from "echarts/charts";
import {
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  DataZoomComponent,
  GridComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import type { ComposeOption } from "echarts/core";
import type { LineSeriesOption } from "echarts/charts";
import type {
  TooltipComponentOption,
  LegendComponentOption,
  ToolboxComponentOption,
  DataZoomComponentOption,
  GridComponentOption,
} from "echarts/components";
import { useRequiredInjection } from "@/utils/Common";
import { Play, Square } from "lucide-vue-next";

use([
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  DataZoomComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
]);

type EChartsOption = ComposeOption<
  | TooltipComponentOption
  | LegendComponentOption
  | ToolboxComponentOption
  | DataZoomComponentOption
  | GridComponentOption
  | LineSeriesOption
>;

// 使用 manager 获取 oscilloscope 数据
const oscManager = useRequiredInjection(useOscilloscopeState);

const oscData = computed(() => oscManager.oscData.value);

const hasData = computed(() => {
  return (
    oscData.value &&
    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)
  );
});

const option = computed((): EChartsOption => {
  if (!oscData.value || !oscData.value.x || !oscData.value.y) {
    return {};
  }

  const series: LineSeriesOption[] = [];

  // 兼容单通道和多通道，确保 yChannels 为 number[][]
  const yChannels: number[][] = Array.isArray(oscData.value.y[0])
    ? (oscData.value.y as number[][])
    : [oscData.value.y as number[]];

  forEach(yChannels, (yData, index) => {
    if (!oscData.value || !yData) return;
    const seriesData = oscData.value.x.map((xValue, i) => [
      xValue,
      yData && yData[i] !== undefined ? yData[i] : 0,
    ]);
    series.push({
      type: "line",
      name: `通道 ${index + 1}`,
      data: seriesData,
      smooth: false,
      symbol: "none",
      lineStyle: {
        width: 2,
      },
    });
  });

  return {
    grid: {
      left: "10%",
      right: "10%",
      top: "15%",
      bottom: "25%",
    },
    tooltip: {
      trigger: "axis",
      formatter: (params: any) => {
        if (!oscData.value) return "";
        let result = `时间: ${params[0].data[0].toFixed(2)} ${oscData.value.xUnit}<br/>`;
        params.forEach((param: any) => {
          result += `${param.seriesName}: ${param.data[1].toFixed(3)} ${oscData.value?.yUnit ?? ""}<br/>`;
        });
        return result;
      },
    },
    legend: {
      top: "5%",
      data: series.map((s) => s.name) as string[],
    },
    toolbox: {
      feature: {
        restore: {},
        saveAsImage: {},
      },
    },
    dataZoom: [
      {
        type: "inside",
        start: 0,
        end: 100,
      },
      {
        start: 0,
        end: 100,
      },
    ],
    xAxis: {
      type: "value",
      name: oscData.value ? `时间 (${oscData.value.xUnit})` : "时间",
      nameLocation: "middle",
      nameGap: 30,
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: oscData.value ? `电压 (${oscData.value.yUnit})` : "电压",
      nameLocation: "middle",
      nameGap: 40,
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      },
      splitLine: {
        show: false,
      },
    },
    series: series,
  };
});
</script>