FPGA_WebLab/src/views/Project/Oscilloscope.vue

154 lines
4.4 KiB
Vue

<template>
<div class="bg-base-100 flex flex-col gap-4">
<!-- 波形展示 -->
<div class="card bg-base-200 shadow-xl mx-5">
<div class="card-body">
<h2 class="card-title">
<Activity class="w-5 h-5" />
波形显示
</h2>
<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>
<script setup lang="ts">
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>