117 lines
4.8 KiB
Vue
117 lines
4.8 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 flex flex-row justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<Activity class="w-5 h-5" />
|
|
波形显示
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button class="btn btn-sm btn-warning" @click="osc.stopCapture" :disabled="!osc.isCapturing.value">
|
|
停止捕获
|
|
</button>
|
|
<div class="flex items-center gap-2">
|
|
<button class="btn btn-sm btn-error" @click="osc.clearOscilloscopeData">
|
|
清空
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</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 flex-row items-center justify-between gap-4">
|
|
<label>
|
|
边沿触发:
|
|
<select v-model="osc.config.triggerRisingEdge" class="select select-bordered w-24">
|
|
<option :value="true">上升沿</option>
|
|
<option :value="false">下降沿</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
触发电平:
|
|
<div class="flex items-center gap-2">
|
|
<input type="range" min="0" max="255" step="1" v-model="osc.config.triggerLevel"
|
|
class="range range-sm w-50" />
|
|
<input type="number" v-model="osc.config.triggerLevel" min="0" max="255"
|
|
class="input input-bordered w-24" />
|
|
</div>
|
|
</label>
|
|
<label>
|
|
水平偏移:
|
|
<div class="flex items-center gap-2">
|
|
<input type="range" min="0" max="1000" step="1" v-model="osc.config.horizontalShift"
|
|
class="range range-sm w-50" />
|
|
<input type="number" v-model="osc.config.horizontalShift" min="0" max="1000"
|
|
class="input input-bordered w-24" />
|
|
</div>
|
|
</label>
|
|
<label>
|
|
抽取率:
|
|
<div class="flex items-center gap-2">
|
|
<input type="range" min="0" max="100" step="1" v-model="osc.config.decimationRate"
|
|
class="range range-sm w-50" />
|
|
<input type="number" v-model="osc.config.decimationRate" min="0" max="100"
|
|
class="input input-bordered w-24" />
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2 mt-2">
|
|
<label>
|
|
刷新间隔(ms):
|
|
<div class="flex items-center gap-2">
|
|
<input type="range" min="100" max="3000" step="100" v-model="osc.refreshIntervalMs.value"
|
|
class="range range-sm w-50" />
|
|
<input type="number" min="100" max="3000" step="100" v-model="osc.refreshIntervalMs.value"
|
|
class="input input-bordered w-24" />
|
|
</div>
|
|
</label>
|
|
<div class="flex items-center gap-2">
|
|
<button class="btn btn-primary" type="submit" :disabled="osc.isApplying.value || osc.isCapturing.value">
|
|
应用配置
|
|
</button>
|
|
<button class="btn btn-secondary" type="button" @click="osc.resetConfiguration"
|
|
:disabled="osc.isApplying.value || osc.isCapturing.value">
|
|
重置
|
|
</button>
|
|
<button class="btn btn-outline" @click="osc.refreshRAM" :disabled="osc.isApplying.value || osc.isCapturing.value">
|
|
刷新RAM
|
|
</button>
|
|
<!-- <button class="btn btn-accent" @click="osc.generateTestData" :disabled="osc.isOperationInProgress.value">
|
|
生成测试数据
|
|
</button> -->
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</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>
|