SikongJueluo/FPGA_WebLab
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 修改示波器外观

Browse Source
This commit is contained in:
SikongJueluo
2025-07-22 02:17:45 +08:00
parent ef267721fd
commit 10e4a82e5b
2 changed files with 65 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Oscilloscope/OscilloscopeManager.ts
View File

@@ -26,7 +26,7 @@ const DEFAULT_CONFIG: OscilloscopeFullConfig = new OscilloscopeFullConfig({
triggerLevel: 128,
triggerRisingEdge: true,
horizontalShift: 0,
decimationRate: 0,
decimationRate: 50,
autoRefreshRAM: false,
});
@@ -137,6 +137,7 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
if (refreshIntervalId !== undefined) {
clearInterval(refreshIntervalId);
refreshIntervalId = undefined;
isCapturing.value = false;
}
};
@@ -161,7 +162,6 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
isCapturing.value = false;
stopAutoRefresh();
} finally {
isCapturing.value = false;
release();
}
};
@@ -181,6 +181,7 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
alert.info("捕获已停止", 2000);
} catch (error) {
alert.error("停止捕获失败", 3000);
isCapturing.value = true;
} finally {
release();
}
@@ -226,7 +227,7 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
try {
const ok = await client.refreshRAM();
if (ok) {
alert.success("RAM已刷新", 2000);
// alert.success("RAM已刷新", 2000);
} else {
throw new Error();
}

164
src/views/Project/Oscilloscope.vue
View File

@@ -3,9 +3,16 @@
<!-- 波形展示 -->
<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 class="card-title flex flex-row justify-between">
<div class="flex items-center gap-2">
<Activity class="w-5 h-5" />
波形显示
</div>
<div>
<button class="btn btn-warning" @click="osc.stopCapture" :disabled="!osc.isCapturing.value">
停止捕获
</button>
</div>
</h2>
<OscilloscopeWaveformDisplay />
</div>
@@ -16,122 +23,73 @@
<div class="card-body">
<h2 class="card-title">示波器配置</h2>
<form class="flex flex-col gap-2" @submit.prevent="applyConfiguration">
<div class="flex gap-4">
<div class="flex flex-row items-center justify-between 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"
>
边沿触发:
<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>
水平偏移:
<input
type="number"
v-model="osc.config.horizontalShift"
class="input input-bordered w-24"
/>
<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>
抽取率:
<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"
/>
<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-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 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.isOperationInProgress.value">
应用配置
</button>
<button class="btn btn-secondary" type="button" @click="osc.resetConfiguration"
:disabled="osc.isOperationInProgress.value">
重置
</button>
<button class="btn btn-outline" @click="osc.refreshRAM" :disabled="osc.isOperationInProgress.value">
刷新RAM
</button>
<!-- <button class="btn btn-accent" @click="osc.generateTestData" :disabled="osc.isOperationInProgress.value">
生成测试数据
</button> -->
</div>
</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>