feat(data-tools): 新增入库类型选择功能并优化数据工具界面

- 在补数任务面板中添加入库类型单选按钮组，支持 MySQL 和 InfluxDB - 更新 AddData 接口定义，添加 StorageType 相关类型和选项接口 - 修改补数 API 请求逻辑，根据入库类型动态调整接口路径前缀 - 重构台账设备表单，统一使用装置网络参数作为 MAC 和 NDID 的单一数据源 - 优化台账线路表单，仅当存在 ID 时才设置 lineId 字段，避免空值传递 - 添加入库类型列表获取接口和相关数据处理逻辑 - 更新台账字典代码常量，新增终端型号字典码 - 优化台账树节点添加逻辑，增加前置条件验证和禁用原因提示 - 添加 InfluxDB 配置文件到额外资源目录 - 更新稳定数据分析视图，优化台账树数据结构处理和样式布局 - 完善 API 调试契约检查，确保设备和线路数据映射正确性 - 优化趋势查询性能，禁用全局加载状态提升用户体验
2026-05-21 14:07:10 +08:00
parent f1eaabae0e
commit b9ddfb5275
23 changed files with 2462 additions and 180 deletions
--- a/frontend/src/views/steady/steadyDataView/components/SteadyTrendChartPanel.vue
+++ b/frontend/src/views/steady/steadyDataView/components/SteadyTrendChartPanel.vue
@@ -1,23 +1,79 @@
 <template>
    <section class="card trend-chart-panel" v-loading="loading">
-        <div v-if="trendResult" class="panel-header">
-            <span class="panel-meta">
-                {{ trendResult.bucket || '-' }} / {{ trendResult.displayPointCount || 0 }} 点
-            </span>
+        <div class="panel-header">
+            <span v-if="trendResult" class="panel-meta">{{ trendResult.displayPointCount || 0 }} 点</span>
+            <span v-else class="panel-meta">趋势图</span>
+
+            <div class="trend-tool-groups">
+                <div v-for="group in trendToolGroups" :key="group.key" class="trend-tool-group">
+                    <el-tooltip
+                        v-for="item in group.items"
+                        :key="item.action"
+                        :content="getTrendToolTooltip(item)"
+                        placement="top"
+                    >
+                        <el-button
+                            :type="isTrendToolActive(item.action) ? 'primary' : 'default'"
+                            :icon="item.icon"
+                            :disabled="isTrendToolDisabled(item.action)"
+                            circle
+                            @click="handleTrendToolAction(item.action)"
+                        />
+                    </el-tooltip>
+                </div>
+            </div>
        </div>

-        <div v-if="hasSeries" class="chart-body">
-            <LineChart :options="chartOptions" />
+        <div v-if="hasSeries" ref="chartExportTargetRef" class="chart-list steady-trend-export-target">
+            <div v-for="group in chartGroups" :key="group.key" class="chart-group">
+                <div class="chart-body">
+                    <LineChart :options="group.options" :group="group.group" @chart-data-zoom="handleChartDataZoom" />
+                </div>
+            </div>
        </div>
        <el-empty v-else class="chart-empty" description="请选择监测点和指标后查询趋势" />
+
+        <el-dialog v-model="fullscreenVisible" title="趋势图全屏展示" fullscreen append-to-body destroy-on-close>
+            <div v-if="hasSeries" class="fullscreen-chart-body">
+                <div v-for="group in chartGroups" :key="group.key" class="chart-group">
+                    <div class="chart-body">
+                        <LineChart
+                            :options="group.options"
+                            :group="group.group"
+                            @chart-data-zoom="handleChartDataZoom"
+                        />
+                    </div>
+                </div>
+            </div>
+            <el-empty v-else class="chart-empty" description="请选择监测点和指标后查询趋势" />
+        </el-dialog>
+
+        <SteadyTrendDataTableDialog v-model="dataTableVisible" :trend-result="trendResult" />
    </section>
 </template>

 <script setup lang="ts">
-import { computed } from 'vue'
+import {
+    ArrowDownBold,
+    ArrowLeftBold,
+    ArrowRightBold,
+    ArrowUpBold,
+    Crop,
+    DataAnalysis,
+    FullScreen,
+    Mouse,
+    Picture,
+    Pointer,
+    RefreshLeft
+} from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import html2canvas from 'html2canvas'
+import { computed, nextTick, ref, watch } from 'vue'
 import LineChart from '@/components/echarts/line/index.vue'
 import type { SteadyDataView } from '@/api/steady/steadyDataView/interface'
-import { buildSteadyTrendChartOptions } from '../utils/trendOptions'
+import { buildSteadyTrendChartGroups, type SteadyTrendZoomRange } from '../utils/trendOptions'
+import SteadyTrendDataTableDialog from './SteadyTrendDataTableDialog.vue'
+import type { Component } from 'vue'

 defineOptions({
    name: 'SteadyTrendChartPanel'
@@ -28,8 +84,235 @@ const props = defineProps<{
    loading: boolean
 }>()

+type SteadyTrendInteractionMode = 'none' | 'box-zoom' | 'pan'
+type SteadyTrendToolAction =
+    | 'x-zoom-in'
+    | 'x-zoom-out'
+    | 'y-zoom-in'
+    | 'y-zoom-out'
+    | 'box-zoom'
+    | 'wheel-zoom'
+    | 'reset'
+    | 'pan'
+    | 'fullscreen'
+    | 'download-image'
+    | 'query-data'
+
+const trendToolGroups: Array<{
+    key: string
+    items: Array<{
+        action: SteadyTrendToolAction
+        label: string
+        icon: Component
+    }>
+}> = [
+    {
+        key: 'viewport',
+        items: [
+            { action: 'wheel-zoom', label: '滚轮缩放', icon: Mouse },
+            { action: 'x-zoom-in', label: 'X坐标放大', icon: ArrowRightBold },
+            { action: 'x-zoom-out', label: 'X坐标缩小', icon: ArrowLeftBold },
+            { action: 'y-zoom-in', label: 'Y坐标放大', icon: ArrowUpBold },
+            { action: 'y-zoom-out', label: 'Y坐标缩小', icon: ArrowDownBold },
+            { action: 'box-zoom', label: '框选放大', icon: Crop },
+            { action: 'reset', label: '恢复', icon: RefreshLeft },
+            { action: 'pan', label: '平移', icon: Pointer }
+        ]
+    },
+    {
+        key: 'view',
+        items: [
+            { action: 'fullscreen', label: '全屏展示', icon: FullScreen },
+            { action: 'download-image', label: '下载图片', icon: Picture },
+            { action: 'query-data', label: '数据查询', icon: DataAnalysis }
+        ]
+    }
+]
+
+const clampPercent = (value: number) => Math.min(Math.max(value, 0), 100)
+const DEFAULT_STEADY_TREND_X_ZOOM_RANGE: SteadyTrendZoomRange = { start: 0, end: 10 }
+const trendXZoomRange = ref<SteadyTrendZoomRange>({ ...DEFAULT_STEADY_TREND_X_ZOOM_RANGE })
+const trendYZoomScale = ref(1)
+const activeTrendInteractionMode = ref<SteadyTrendInteractionMode>('none')
+const wheelZoomEnabled = ref(false)
+const fullscreenVisible = ref(false)
+const dataTableVisible = ref(false)
+const chartExportTargetRef = ref<HTMLElement>()
 const hasSeries = computed(() => Boolean(props.trendResult?.series?.length))
-const chartOptions = computed(() => buildSteadyTrendChartOptions(props.trendResult?.series || []))
+const chartGroups = computed(() =>
+    buildSteadyTrendChartGroups(props.trendResult?.series || [], trendXZoomRange.value, {
+        activeTool: activeTrendInteractionMode.value,
+        wheelZoomEnabled: wheelZoomEnabled.value,
+        yZoomScale: trendYZoomScale.value
+    })
+)
+const canPanTrendChart = computed(() => {
+    const { start, end } = trendXZoomRange.value
+
+    return hasSeries.value && (start > 0 || end < 100)
+})
+const isDefaultTrendXZoomRange = computed(() => {
+    const { start, end } = trendXZoomRange.value
+
+    return start === DEFAULT_STEADY_TREND_X_ZOOM_RANGE.start && end === DEFAULT_STEADY_TREND_X_ZOOM_RANGE.end
+})
+const canResetTrendChart = computed(() => {
+    const changedYZoom = trendYZoomScale.value !== 1
+    const changedInteractionMode = activeTrendInteractionMode.value !== 'none'
+    const changedWheelZoom = wheelZoomEnabled.value
+
+    return hasSeries.value && (!isDefaultTrendXZoomRange.value || changedYZoom || changedInteractionMode || changedWheelZoom)
+})
+
+const resetTrendToolState = () => {
+    trendXZoomRange.value = { ...DEFAULT_STEADY_TREND_X_ZOOM_RANGE }
+    trendYZoomScale.value = 1
+    activeTrendInteractionMode.value = 'none'
+    wheelZoomEnabled.value = false
+}
+
+const zoomTrendXAxis = (ratio: number) => {
+    const { start, end } = trendXZoomRange.value
+    const center = (start + end) / 2
+    const nextWidth = Math.min(Math.max((end - start) * ratio, 1), 100)
+    const nextStart = clampPercent(center - nextWidth / 2)
+    const nextEnd = clampPercent(center + nextWidth / 2)
+
+    if (nextStart === 0) {
+        trendXZoomRange.value = { start: 0, end: nextWidth }
+        return
+    }
+
+    if (nextEnd === 100) {
+        trendXZoomRange.value = { start: 100 - nextWidth, end: 100 }
+        return
+    }
+
+    trendXZoomRange.value = { start: nextStart, end: nextEnd }
+}
+
+const isTrendToolActive = (action: SteadyTrendToolAction) => {
+    if (action === 'fullscreen') return fullscreenVisible.value
+    if (action === 'wheel-zoom') return wheelZoomEnabled.value
+    if (action === 'box-zoom' || action === 'pan') return activeTrendInteractionMode.value === action
+
+    return false
+}
+
+const isTrendToolDisabled = (action: SteadyTrendToolAction) => {
+    if (action === 'query-data') return false
+    if (!hasSeries.value) return true
+    if (action === 'pan') return !canPanTrendChart.value
+    if (action === 'reset') return !canResetTrendChart.value
+
+    return false
+}
+
+const getTrendToolTooltip = (item: { action: SteadyTrendToolAction; label: string }) => {
+    if (item.action === 'pan' && isTrendToolDisabled(item.action) && hasSeries.value) {
+        return '请先放大 X 轴或框选局部区域后再平移'
+    }
+
+    return item.label
+}
+
+const downloadSteadyTrendImage = async () => {
+    await nextTick()
+
+    const targetElement = chartExportTargetRef.value
+
+    if (!targetElement) {
+        ElMessage.warning('暂无可下载的趋势图')
+        return
+    }
+
+    const canvas = await html2canvas(targetElement, {
+        backgroundColor: '#ffffff',
+        scale: window.devicePixelRatio || 1,
+        useCORS: true
+    })
+    const imageUrl = canvas.toDataURL('image/png')
+    const exportFile = document.createElement('a')
+
+    exportFile.style.display = 'none'
+    exportFile.download = `steady-trend-${Date.now()}.png`
+    exportFile.href = imageUrl
+    document.body.appendChild(exportFile)
+    exportFile.click()
+    document.body.removeChild(exportFile)
+
+    ElMessage.success('趋势图图片下载成功')
+}
+
+const handleTrendToolAction = async (action: SteadyTrendToolAction) => {
+    if (isTrendToolDisabled(action)) return
+
+    switch (action) {
+        case 'x-zoom-in':
+            zoomTrendXAxis(0.8)
+            break
+        case 'x-zoom-out':
+            zoomTrendXAxis(1.25)
+            break
+        case 'y-zoom-in':
+            trendYZoomScale.value = Math.max(trendYZoomScale.value * 0.8, 0.1)
+            break
+        case 'y-zoom-out':
+            trendYZoomScale.value = Math.min(trendYZoomScale.value * 1.25, 10)
+            break
+        case 'box-zoom':
+            activeTrendInteractionMode.value = activeTrendInteractionMode.value === 'box-zoom' ? 'none' : 'box-zoom'
+            break
+        case 'wheel-zoom':
+            wheelZoomEnabled.value = !wheelZoomEnabled.value
+            break
+        case 'pan':
+            if (!canPanTrendChart.value) {
+                ElMessage.info('请先放大 X 轴或框选局部区域后再平移')
+                activeTrendInteractionMode.value = 'none'
+                break
+            }
+            activeTrendInteractionMode.value = activeTrendInteractionMode.value === 'pan' ? 'none' : 'pan'
+            break
+        case 'reset':
+            resetTrendToolState()
+            break
+        case 'fullscreen':
+            fullscreenVisible.value = true
+            break
+        case 'download-image':
+            await downloadSteadyTrendImage()
+            break
+        case 'query-data':
+            if (!hasSeries.value) {
+                ElMessage.warning('请先查询趋势数据')
+                break
+            }
+            dataTableVisible.value = true
+            break
+        default:
+            break
+    }
+}
+
+const handleChartDataZoom = (value: SteadyTrendZoomRange) => {
+    trendXZoomRange.value = {
+        start: clampPercent(value.start),
+        end: clampPercent(value.end)
+    }
+
+    if (!canPanTrendChart.value && activeTrendInteractionMode.value === 'pan') {
+        activeTrendInteractionMode.value = 'none'
+    }
+}
+
+watch(
+    () => props.trendResult,
+    () => {
+        // 新查询结果应回到完整时间范围，避免沿用上一批数据的局部缩放窗口。
+        resetTrendToolState()
+    }
+)
 </script>

 <style scoped lang="scss">
@@ -46,8 +329,8 @@ const chartOptions = computed(() => buildSteadyTrendChartOptions(props.trendResu
    display: flex;
    flex: none;
    align-items: center;
-    justify-content: flex-end;
-    gap: 10px;
+    justify-content: flex-start;
+    gap: 12px;
    margin-bottom: 10px;
 }

@@ -56,9 +339,64 @@ const chartOptions = computed(() => buildSteadyTrendChartOptions(props.trendResu
    font-size: 12px;
 }

+.trend-tool-groups {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    min-width: 0;
+}
+
+.trend-tool-group {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.trend-tool-group + .trend-tool-group {
+    padding-left: 8px;
+    border-left: 1px dashed var(--el-border-color);
+}
+
+.trend-tool-group :deep(.el-button.is-circle) {
+    width: 28px;
+    height: 28px;
+    padding: 6px;
+}
+
+.chart-list {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 0;
+    overflow: auto;
+}
+
+.fullscreen-chart-body {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    height: calc(100vh - 96px);
+    min-height: 0;
+    overflow: auto;
+}
+
+.chart-group {
+    display: flex;
+    flex: 1 0 240px;
+    flex-direction: column;
+    min-height: 220px;
+    overflow: hidden;
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 4px;
+    background: var(--cn-color-canvas-bg);
+}
+
 .chart-body {
    flex: 1;
    min-height: 0;
+    padding: 0 8px 8px;
 }

 .chart-empty {