560 lines
18 KiB
Vue
560 lines
18 KiB
Vue
<script setup lang="ts">
|
||
import { Button, Input, InputNumber, Radio, Select, Switch } from 'ant-design-vue'
|
||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||
import { ColorPicker } from 'vue3-colorpicker'
|
||
import 'vue3-colorpicker/style.css'
|
||
|
||
import {
|
||
WaveformChart,
|
||
type WaveformAnnotation,
|
||
type WaveformData,
|
||
type WaveformDisplayMode,
|
||
type WaveformFrameStyle,
|
||
type WaveformInteractionMode,
|
||
type WaveformLegendOrientation,
|
||
type WaveformLegendPosition,
|
||
type WaveformOverlayMode,
|
||
type WaveformSeries,
|
||
type WaveformTitleOptions,
|
||
type WaveformZoomEndPayload,
|
||
} from './components'
|
||
import chartWaveformsJson from './data/chartWaveforms.json'
|
||
import demoWaveformsJson from './data/demoWaveforms.json'
|
||
|
||
interface WaveformSourcePoint {
|
||
x: number
|
||
y: number
|
||
error?: number
|
||
lowerError?: number
|
||
upperError?: number
|
||
}
|
||
|
||
interface WaveformSourceRow {
|
||
chnl: string
|
||
chnl_id: number
|
||
dat_unit: string
|
||
data: WaveformSourcePoint[]
|
||
dev: number
|
||
shot: number
|
||
time?: number[]
|
||
time_unit: 'ms'
|
||
}
|
||
|
||
const sourceRows = chartWaveformsJson as unknown as WaveformSourceRow[]
|
||
const displayMode = ref<WaveformDisplayMode>('independent')
|
||
const overlayMode = ref<WaveformOverlayMode>('single-axis')
|
||
const rowCount = ref(2)
|
||
const columnCount = ref(1)
|
||
const frameBorderColor = ref('#1f2937')
|
||
const frameBorderWidth = ref(1)
|
||
const frameBorderStyle = ref<'solid' | 'dashed'>('solid')
|
||
const frameBackgroundColor = ref('rgba(255, 255, 255, 0)')
|
||
const frameWatermarkVisible = ref(true)
|
||
const annotations = ref<WaveformAnnotation[]>([])
|
||
const annotationsVisible = ref(true)
|
||
const interactionMode = ref<WaveformInteractionMode>('zoom')
|
||
const legendPosition = ref<WaveformLegendPosition>('top-right')
|
||
const legendOrientation = ref<WaveformLegendOrientation>('auto')
|
||
const legendBackgroundColor = ref('rgba(255, 255, 255, 0.7)')
|
||
const hiddenSeriesIds = ref<string[]>([])
|
||
const titleVisible = ref(true)
|
||
const titleText = ref(`Shot:${sourceRows[0]?.shot ?? 4712}`)
|
||
const titleAlign = ref<NonNullable<WaveformTitleOptions['align']>>('center')
|
||
const titleFontFamily = ref('"Microsoft YaHei", "微软雅黑", sans-serif')
|
||
const titleFontSize = ref(14)
|
||
const titleRotation = ref(0)
|
||
const titleColor = ref('#1f2937')
|
||
const titleBold = ref(false)
|
||
const titleItalic = ref(false)
|
||
const titleUnderline = ref(false)
|
||
const controlsOpen = ref(false)
|
||
const legendPositionOptions: Array<{ label: string; value: WaveformLegendPosition }> = [
|
||
{ label: '左上', value: 'top-left' },
|
||
{ label: '上', value: 'top' },
|
||
{ label: '右上', value: 'top-right' },
|
||
{ label: '右', value: 'right' },
|
||
{ label: '右下', value: 'bottom-right' },
|
||
{ label: '下', value: 'bottom' },
|
||
{ label: '左下', value: 'bottom-left' },
|
||
{ label: '左', value: 'left' },
|
||
]
|
||
const legendOrientationOptions: Array<{ label: string; value: WaveformLegendOrientation }> = [
|
||
{ label: '自动', value: 'auto' },
|
||
{ label: '水平', value: 'horizontal' },
|
||
{ label: '垂直', value: 'vertical' },
|
||
]
|
||
const frameBorderStyleOptions = [
|
||
{ label: '实线', value: 'solid' },
|
||
{ label: '虚线', value: 'dashed' },
|
||
]
|
||
const titleAlignOptions: Array<{
|
||
label: string
|
||
value: NonNullable<WaveformTitleOptions['align']>
|
||
}> = [
|
||
{ label: '左对齐', value: 'left' },
|
||
{ label: '居中', value: 'center' },
|
||
{ label: '右对齐', value: 'right' },
|
||
]
|
||
const titleFontFamilyOptions = [
|
||
{ label: '微软雅黑', value: '"Microsoft YaHei", "微软雅黑", sans-serif' },
|
||
{ label: '宋体', value: 'SimSun, serif' },
|
||
{ label: '黑体', value: 'SimHei, sans-serif' },
|
||
{ label: 'Arial', value: 'Arial, sans-serif' },
|
||
{ label: 'Consolas', value: 'Consolas, monospace' },
|
||
]
|
||
const frameStyle = computed<WaveformFrameStyle>(() => ({
|
||
borderColor: frameBorderColor.value,
|
||
borderWidth: frameBorderWidth.value,
|
||
borderStyle: frameBorderStyle.value,
|
||
backgroundColor: frameBackgroundColor.value,
|
||
}))
|
||
|
||
const seriesStylePresets: Array<Pick<WaveformSeries, 'lineType' | 'pointType' | 'errorBar'>> = [
|
||
{ lineType: 'none', pointType: 'triangle', errorBar: { visible: true } },
|
||
{ lineType: 'linear', pointType: 'none' },
|
||
{ lineType: 'step-after', pointType: 'circle', errorBar: { visible: true } },
|
||
{ lineType: 'linear', pointType: 'diamond', errorBar: { visible: true } },
|
||
]
|
||
|
||
const waveformSeries: WaveformSeries[] = sourceRows.map((row, seriesIndex) => {
|
||
const presetStyle = seriesStylePresets[seriesIndex % seriesStylePresets.length]!
|
||
const style: Pick<WaveformSeries, 'lineType' | 'pointType' | 'errorBar'> =
|
||
row.chnl === 'TEST_CH_4'
|
||
? { lineType: 'linear', pointType: 'circle', errorBar: { visible: false } }
|
||
: presetStyle
|
||
return {
|
||
id: String(row.chnl_id),
|
||
trackId:
|
||
row.chnl.startsWith('TEST_CH_') && row.chnl !== 'TEST_CH_2'
|
||
? String(sourceRows[0]?.chnl_id ?? row.chnl_id)
|
||
: undefined,
|
||
name: row.chnl,
|
||
unit: row.dat_unit,
|
||
...style,
|
||
data: {
|
||
kind: 'points',
|
||
points: row.data,
|
||
},
|
||
}
|
||
})
|
||
|
||
const demoWaveforms = demoWaveformsJson as {
|
||
stepDemoValues: Array<{
|
||
id: string
|
||
name: string
|
||
color: string
|
||
lineType: 'step-start' | 'step-middle' | 'step-end'
|
||
values: number[]
|
||
}>
|
||
basicCurveDemoSeries: Array<{
|
||
id: string
|
||
name: string
|
||
color: string
|
||
lineType: 'none' | 'linear'
|
||
pointType: 'circle' | 'none'
|
||
points: Array<{ x: number; y: number }>
|
||
}>
|
||
}
|
||
|
||
const stepDemoSeries: WaveformSeries[] = demoWaveforms.stepDemoValues.map((series) => ({
|
||
id: series.id,
|
||
trackId: 'step-demo',
|
||
name: series.name,
|
||
color: series.color,
|
||
lineType: series.lineType,
|
||
pointType: 'circle',
|
||
data: {
|
||
kind: 'points',
|
||
points: series.values.map((y, index) => ({ x: index / 1000, y })),
|
||
},
|
||
}))
|
||
|
||
const frameOneTrackId = String(sourceRows[0]?.chnl_id ?? 'frame-one')
|
||
const basicCurveDemoSeries: WaveformSeries[] = demoWaveforms.basicCurveDemoSeries.map((series) => ({
|
||
id: series.id,
|
||
trackId: frameOneTrackId,
|
||
name: series.name,
|
||
color: series.color,
|
||
lineType: series.lineType,
|
||
pointType: series.pointType,
|
||
data: { kind: 'points', points: series.points },
|
||
}))
|
||
const frameOneSeries = waveformSeries.filter(
|
||
(series) => series.id === frameOneTrackId || series.trackId === frameOneTrackId,
|
||
)
|
||
const remainingSeries = waveformSeries.filter((series) => !frameOneSeries.includes(series))
|
||
const fullChartData: WaveformData = {
|
||
kind: 'series',
|
||
series: [...frameOneSeries, ...basicCurveDemoSeries, ...stepDemoSeries, ...remainingSeries],
|
||
}
|
||
const chartData = ref<WaveformData>(fullChartData)
|
||
let zoomRequestSequence = 0
|
||
|
||
function filterWaveformData(data: WaveformData, start: number, end: number): WaveformData {
|
||
const lower = Math.min(start, end)
|
||
const upper = Math.max(start, end)
|
||
if (data.kind === 'samples') return data
|
||
if (data.kind === 'points') {
|
||
return {
|
||
kind: 'points',
|
||
points: data.points.filter((point) => point.x >= lower && point.x <= upper),
|
||
}
|
||
}
|
||
return {
|
||
kind: 'series',
|
||
series: data.series.map((series) => ({
|
||
...series,
|
||
data:
|
||
series.data.kind === 'points'
|
||
? {
|
||
kind: 'points',
|
||
points: series.data.points.filter((point) => point.x >= lower && point.x <= upper),
|
||
}
|
||
: series.data,
|
||
})),
|
||
}
|
||
}
|
||
|
||
async function handleZoomEnd(payload: WaveformZoomEndPayload) {
|
||
// Demo-only sequence number cancellation. Production code should use AbortController
|
||
// to cancel in-flight requests when a newer zoom gesture arrives.
|
||
const requestSequence = ++zoomRequestSequence
|
||
await new Promise((resolve) => window.setTimeout(resolve, 80))
|
||
if (requestSequence !== zoomRequestSequence) return
|
||
|
||
// Demo-only stand-in for the backend response. Production code should replace this
|
||
// with a request using payload.start/payload.end and the optional channel metadata.
|
||
chartData.value = filterWaveformData(fullChartData, payload.start, payload.end)
|
||
}
|
||
const titleOptions = computed<WaveformTitleOptions>(() => ({
|
||
visible: titleVisible.value,
|
||
text: titleText.value,
|
||
align: titleAlign.value,
|
||
textStyle: {
|
||
color: titleColor.value,
|
||
fontSize: titleFontSize.value,
|
||
fontFamily: titleFontFamily.value,
|
||
rotation: titleRotation.value,
|
||
fontWeight: titleBold.value ? 700 : 400,
|
||
fontStyle: titleItalic.value ? 'italic' : 'normal',
|
||
textDecoration: titleUnderline.value ? 'underline' : 'none',
|
||
},
|
||
}))
|
||
function closeControls() {
|
||
controlsOpen.value = false
|
||
}
|
||
|
||
function resetTitleTextStyle() {
|
||
titleBold.value = false
|
||
titleItalic.value = false
|
||
titleUnderline.value = false
|
||
}
|
||
|
||
function handleWindowKeydown(event: KeyboardEvent) {
|
||
if (event.key === 'Escape') closeControls()
|
||
}
|
||
|
||
onMounted(() => window.addEventListener('keydown', handleWindowKeydown))
|
||
onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown))
|
||
</script>
|
||
|
||
<template>
|
||
<main class="workspace">
|
||
<Button
|
||
class="mobile-control-toggle"
|
||
size="small"
|
||
:aria-expanded="controlsOpen"
|
||
aria-controls="waveform-control-panel"
|
||
@click="controlsOpen = true"
|
||
>
|
||
控制面板
|
||
</Button>
|
||
|
||
<button
|
||
v-if="controlsOpen"
|
||
type="button"
|
||
class="control-backdrop"
|
||
aria-label="关闭控制面板"
|
||
@click="closeControls"
|
||
/>
|
||
|
||
<aside
|
||
id="waveform-control-panel"
|
||
class="control-panel"
|
||
:class="{ 'is-open': controlsOpen }"
|
||
aria-label="波形图控制"
|
||
>
|
||
<div class="control-panel__scroll">
|
||
<Button class="control-panel__close" type="text" size="small" @click="closeControls">
|
||
关闭
|
||
</Button>
|
||
|
||
<section class="control-section">
|
||
<h2>显示方式</h2>
|
||
<Radio.Group
|
||
v-model:value="displayMode"
|
||
class="display-mode-control"
|
||
button-style="solid"
|
||
size="small"
|
||
aria-label="波形展示方式"
|
||
>
|
||
<Radio.Button value="independent">单独坐标</Radio.Button>
|
||
<Radio.Button value="separated">多道分离</Radio.Button>
|
||
<Radio.Button value="compact">多道紧凑</Radio.Button>
|
||
</Radio.Group>
|
||
</section>
|
||
|
||
<section class="control-section">
|
||
<h2>叠加方式</h2>
|
||
<Radio.Group
|
||
v-model:value="overlayMode"
|
||
class="display-mode-control"
|
||
button-style="solid"
|
||
size="small"
|
||
aria-label="波形叠加方式"
|
||
>
|
||
<Radio.Button value="single-axis">单值轴</Radio.Button>
|
||
<Radio.Button value="multi-axis">多值轴</Radio.Button>
|
||
</Radio.Group>
|
||
</section>
|
||
|
||
<section class="control-section">
|
||
<h2>图框布局</h2>
|
||
<div class="grid-size-control" aria-label="波形网格尺寸">
|
||
<InputNumber v-model:value="rowCount" :min="1" :max="10" size="small" />
|
||
<span>行</span>
|
||
<span class="control-separator">×</span>
|
||
<InputNumber v-model:value="columnCount" :min="1" :max="10" size="small" />
|
||
<span>列</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="control-section">
|
||
<h2>图框样式</h2>
|
||
<div class="frame-style-controls">
|
||
<label class="frame-style-control">
|
||
<span>边框颜色</span>
|
||
<ColorPicker
|
||
v-model:pure-color="frameBorderColor"
|
||
aria-label="图框边框颜色"
|
||
use-type="pure"
|
||
picker-type="chrome"
|
||
format="rgb"
|
||
:disable-alpha="false"
|
||
:blur-close="true"
|
||
/>
|
||
</label>
|
||
<label class="frame-style-control">
|
||
<span>背景颜色</span>
|
||
<ColorPicker
|
||
v-model:pure-color="frameBackgroundColor"
|
||
aria-label="图框背景颜色"
|
||
use-type="pure"
|
||
picker-type="chrome"
|
||
format="rgb"
|
||
:disable-alpha="false"
|
||
:blur-close="true"
|
||
/>
|
||
</label>
|
||
<label class="frame-style-control">
|
||
<span>线宽</span>
|
||
<InputNumber
|
||
v-model:value="frameBorderWidth"
|
||
:min="0"
|
||
:max="10"
|
||
:step="0.5"
|
||
size="small"
|
||
aria-label="图框线宽"
|
||
/>
|
||
</label>
|
||
<label class="frame-style-control">
|
||
<span>线型</span>
|
||
<Select
|
||
v-model:value="frameBorderStyle"
|
||
:options="frameBorderStyleOptions"
|
||
size="small"
|
||
aria-label="图框线型"
|
||
/>
|
||
</label>
|
||
<label class="frame-style-control frame-style-control--switch">
|
||
<span>水印</span>
|
||
<Switch
|
||
v-model:checked="frameWatermarkVisible"
|
||
size="small"
|
||
aria-label="显示图框水印"
|
||
/>
|
||
</label>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="control-section title-control-section">
|
||
<div class="control-section__header">
|
||
<h2>标题</h2>
|
||
<Switch v-model:checked="titleVisible" size="small" aria-label="显示标题" />
|
||
</div>
|
||
|
||
<div class="title-controls">
|
||
<label class="title-control title-control--wide">
|
||
<span>标题名称</span>
|
||
<Input v-model:value="titleText" size="small" aria-label="标题名称" />
|
||
</label>
|
||
<label class="title-control title-control--wide">
|
||
<span>对齐方式</span>
|
||
<Select
|
||
v-model:value="titleAlign"
|
||
:options="titleAlignOptions"
|
||
size="small"
|
||
aria-label="标题对齐方式"
|
||
/>
|
||
</label>
|
||
<label class="title-control">
|
||
<span>字体</span>
|
||
<Select
|
||
v-model:value="titleFontFamily"
|
||
:options="titleFontFamilyOptions"
|
||
size="small"
|
||
aria-label="标题字体"
|
||
/>
|
||
</label>
|
||
<label class="title-control">
|
||
<span>字号</span>
|
||
<InputNumber
|
||
v-model:value="titleFontSize"
|
||
:min="8"
|
||
:max="72"
|
||
:step="1"
|
||
size="small"
|
||
aria-label="标题字号"
|
||
/>
|
||
</label>
|
||
<div class="title-control">
|
||
<span>字体样式</span>
|
||
<div class="title-style-controls" role="group" aria-label="标题字体样式">
|
||
<button
|
||
type="button"
|
||
aria-label="恢复标题常规样式"
|
||
title="恢复常规样式"
|
||
@click="resetTitleTextStyle"
|
||
>
|
||
A
|
||
</button>
|
||
<button
|
||
type="button"
|
||
:class="{ 'is-active': titleBold }"
|
||
:aria-pressed="titleBold"
|
||
aria-label="标题粗体"
|
||
title="粗体"
|
||
@click="titleBold = !titleBold"
|
||
>
|
||
<b>B</b>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
:class="{ 'is-active': titleItalic }"
|
||
:aria-pressed="titleItalic"
|
||
aria-label="标题斜体"
|
||
title="斜体"
|
||
@click="titleItalic = !titleItalic"
|
||
>
|
||
<i>I</i>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
:class="{ 'is-active': titleUnderline }"
|
||
:aria-pressed="titleUnderline"
|
||
aria-label="标题下划线"
|
||
title="下划线"
|
||
@click="titleUnderline = !titleUnderline"
|
||
>
|
||
<u>U</u>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<label class="title-control">
|
||
<span>旋转</span>
|
||
<InputNumber
|
||
v-model:value="titleRotation"
|
||
:min="-180"
|
||
:max="180"
|
||
:step="1"
|
||
addon-after="°"
|
||
size="small"
|
||
aria-label="标题旋转角度"
|
||
/>
|
||
</label>
|
||
<div class="title-control title-control--color">
|
||
<span>颜色</span>
|
||
<ColorPicker
|
||
v-model:pure-color="titleColor"
|
||
aria-label="标题颜色"
|
||
use-type="pure"
|
||
picker-type="chrome"
|
||
format="hex"
|
||
:disable-alpha="true"
|
||
:blur-close="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="control-section">
|
||
<h2>图例</h2>
|
||
<label class="select-control">
|
||
<span>位置</span>
|
||
<Select
|
||
v-model:value="legendPosition"
|
||
:options="legendPositionOptions"
|
||
size="small"
|
||
aria-label="图例位置"
|
||
/>
|
||
</label>
|
||
<label class="select-control">
|
||
<span>排列</span>
|
||
<Select
|
||
v-model:value="legendOrientation"
|
||
:options="legendOrientationOptions"
|
||
size="small"
|
||
aria-label="图例排列"
|
||
/>
|
||
</label>
|
||
<label class="legend-color-control">
|
||
<span>背景</span>
|
||
<ColorPicker
|
||
v-model:pure-color="legendBackgroundColor"
|
||
aria-label="图例背景颜色"
|
||
use-type="pure"
|
||
picker-type="chrome"
|
||
format="rgb"
|
||
:disable-alpha="false"
|
||
:blur-close="true"
|
||
/>
|
||
</label>
|
||
</section>
|
||
</div>
|
||
</aside>
|
||
|
||
<section class="chart-panel">
|
||
<WaveformChart
|
||
:data="chartData"
|
||
:display-mode="displayMode"
|
||
:overlay-mode="overlayMode"
|
||
:grid="{ rowCount, columnCount, showPagination: true }"
|
||
:title="titleOptions"
|
||
:legend="{
|
||
position: legendPosition,
|
||
orientation: legendOrientation,
|
||
backgroundColor: legendBackgroundColor,
|
||
interactive: true,
|
||
}"
|
||
:frame-style="frameStyle"
|
||
:frame-number="frameWatermarkVisible ? 1 : undefined"
|
||
v-model:annotations="annotations"
|
||
v-model:annotations-visible="annotationsVisible"
|
||
v-model:interaction-mode="interactionMode"
|
||
v-model:hidden-series-ids="hiddenSeriesIds"
|
||
@zoom-end="handleZoomEnd"
|
||
/>
|
||
</section>
|
||
</main>
|
||
</template>
|