修改看板

src/views/board/index.vue

@@ -1,46 +1,227 @@
 <template>
-  <main class="board-page">
+  <div class="board-page">
     <section class="board-device-stage">
       <img class="board-device" src="@/assets/board/index/device.png" alt="" />
     </section>
 
     <section class="board-chart-panel" aria-label="数据图表">
       <article class="board-card">
-        <header class="board-card-title">实时数据</header>
+        <header class="board-card-title">位移区间分布</header>
-        <div class="bar-chart" aria-hidden="true">
+        <div ref="intervalChartRef" class="interval-chart" />
-          <span style="--value: 56%"></span>
-          <span style="--value: 78%"></span>
-          <span style="--value: 42%"></span>
-          <span style="--value: 88%"></span>
-          <span style="--value: 64%"></span>
-          <span style="--value: 72%"></span>
-          <span style="--value: 50%"></span>
-          <span style="--value: 82%"></span>
-        </div>
       </article>
 
       <article class="board-card">
-        <header class="board-card-title">设备数据</header>
+        <header class="board-card-title">位移对比</header>
-        <svg class="line-chart" viewBox="0 0 420 120" role="img" aria-label="设备数据曲线图" preserveAspectRatio="none">
+        <div ref="trendChartRef" class="trend-chart" />
-          <defs>
-            <linearGradient id="deviceLine" x1="0" x2="1" y1="0" y2="0">
-              <stop offset="0%" stop-color="#61f1ff" />
-              <stop offset="100%" stop-color="#f9d56f" />
-            </linearGradient>
-            <linearGradient id="deviceArea" x1="0" x2="0" y1="0" y2="1">
-              <stop offset="0%" stop-color="#61f1ff" stop-opacity="0.28" />
-              <stop offset="100%" stop-color="#61f1ff" stop-opacity="0" />
-            </linearGradient>
-          </defs>
-          <path class="line-chart-grid" d="M0 28H420M0 58H420M0 88H420" />
-          <path class="line-chart-area" d="M0 82 C48 70 68 38 112 48 C158 58 172 96 218 72 C260 50 278 30 318 42 C358 54 372 82 420 56 L420 120 L0 120 Z" />
-          <path class="line-chart-path" d="M0 82 C48 70 68 38 112 48 C158 58 172 96 218 72 C260 50 278 30 318 42 C358 54 372 82 420 56" />
-        </svg>
       </article>
     </section>
-  </main>
+  </div>
 </template>
 
+<script setup lang="ts">
+import * as echarts from 'echarts';
+import {
+  getDisplacementDistributionData,
+  getDisplacementTrendData,
+  type DisplacementDistributionPageVO,
+  type DisplacementTrendPageVO
+} from '@/api/ems/report/displacementBoard';
+import { useVibrationBoardQueryState } from '@/views/ems/report/vibrationBoard/components/useVibrationBoardQueryState';
+import { getVibrationMetricOption, toNumber } from '@/views/ems/report/vibrationBoard/components/vibrationBoardShared';
+
+const intervalChartRef = ref<HTMLElement>();
+const trendChartRef = ref<HTMLElement>();
+let intervalChart: echarts.ECharts | null = null;
+let trendChart: echarts.ECharts | null = null;
+let chartResizeObserver: ResizeObserver | null = null;
+
+const { loadTree, buildQuery } = useVibrationBoardQueryState();
+const distributionData = ref<DisplacementDistributionPageVO>({ intervalBuckets: [] });
+const trendData = ref<DisplacementTrendPageVO>({ series: [] });
+const trendPalette = ['#5b8ff9', '#36cfc9', '#f97316', '#8b5cf6', '#ef4444', '#10b981'];
+const activeMetric = computed(() => getVibrationMetricOption(trendData.value.metricField || distributionData.value.metricField));
+
+const renderIntervalChart = () => {
+  if (!intervalChartRef.value) {
+    return;
+  }
+
+  const intervalData = distributionData.value.intervalBuckets || [];
+  intervalChart ||= echarts.init(intervalChartRef.value);
+  if (!intervalData.length) {
+    intervalChart.clear();
+    return;
+  }
+
+  intervalChart.setOption(
+    {
+      color: ['#0ea5a4', '#38bdf8', '#60a5fa', '#facc15', '#fb923c', '#ef4444'],
+      tooltip: {
+        trigger: 'item',
+        formatter: (params: any) => `${params.name}<br/>样本数: <b>${params.value}</b><br/>占比: <b>${params.percent}%</b>`
+      },
+      legend: {
+        type: 'scroll',
+        orient: 'vertical',
+        left: 0,
+        top: 'middle',
+        itemWidth: 10,
+        itemHeight: 10,
+        textStyle: {
+          color: 'rgba(226, 248, 255, 0.86)',
+          fontSize: 12
+        },
+        pageIconColor: 'rgba(97, 241, 255, 0.9)',
+        pageIconInactiveColor: 'rgba(226, 248, 255, 0.28)',
+        pageTextStyle: {
+          color: 'rgba(226, 248, 255, 0.72)'
+        }
+      },
+      series: [
+        {
+          name: '区间分布',
+          type: 'pie',
+          radius: ['42%', '72%'],
+          center: ['64%', '54%'],
+          roseType: 'radius',
+          itemStyle: {
+            borderRadius: 8,
+            borderColor: 'rgba(4, 18, 31, 0.92)',
+            borderWidth: 2
+          },
+          label: {
+            formatter: '{d}%',
+            color: 'rgba(226, 248, 255, 0.9)'
+          },
+          labelLine: {
+            lineStyle: {
+              color: 'rgba(226, 248, 255, 0.35)'
+            }
+          },
+          data: intervalData.map((item) => ({ name: item.label || '--', value: toNumber(item.count) }))
+        }
+      ]
+    },
+    true
+  );
+};
+
+const renderTrendChart = () => {
+  if (!trendChartRef.value) {
+    return;
+  }
+
+  const series = trendData.value.series || [];
+  const unit = trendData.value.unit || activeMetric.value.unit;
+  trendChart ||= echarts.init(trendChartRef.value);
+  if (!series.length) {
+    trendChart.clear();
+    return;
+  }
+
+  trendChart.setOption(
+    {
+      color: series.map((_, index) => trendPalette[index % trendPalette.length]),
+      tooltip: {
+        trigger: 'axis',
+        formatter: (params: any[]) => {
+          const rows = params.map((item) => `${item.marker}${item.seriesName}: <b>${Number(item.value?.[1] ?? 0).toFixed(2)} ${unit}</b>`);
+          return [`<b>${params[0]?.axisValueLabel || '--'}</b>`, ...rows].join('<br/>');
+        }
+      },
+      legend: {
+        type: 'scroll',
+        top: 0,
+        right: 0,
+        data: series.map((item) => item.name || '--'),
+        textStyle: {
+          color: 'rgba(226, 248, 255, 0.86)'
+        },
+        pageIconColor: 'rgba(97, 241, 255, 0.9)',
+        pageIconInactiveColor: 'rgba(226, 248, 255, 0.28)',
+        pageTextStyle: {
+          color: 'rgba(226, 248, 255, 0.72)'
+        }
+      },
+      grid: { left: 44, right: 18, top: 36, bottom: 34 },
+      dataZoom: [{ type: 'inside', xAxisIndex: 0, filterMode: 'none' }],
+      xAxis: {
+        type: 'time',
+        axisLabel: {
+          color: 'rgba(226, 248, 255, 0.68)'
+        },
+        axisLine: {
+          lineStyle: { color: 'rgba(185, 240, 255, 0.18)' }
+        }
+      },
+      yAxis: {
+        type: 'value',
+        name: unit,
+        nameTextStyle: {
+          color: 'rgba(226, 248, 255, 0.72)'
+        },
+        splitLine: {
+          lineStyle: { type: 'dashed', color: 'rgba(185, 240, 255, 0.14)' }
+        },
+        axisLabel: {
+          color: 'rgba(226, 248, 255, 0.68)'
+        }
+      },
+      series: series.map((item) => ({
+        name: item.name || '--',
+        type: 'line',
+        smooth: true,
+        showSymbol: false,
+        connectNulls: true,
+        sampling: 'lttb',
+        lineStyle: { width: 2.4 },
+        emphasis: { focus: 'series' },
+        data: (item.points || []).map((point) => [point.time, toNumber(point.value)])
+      }))
+    },
+    true
+  );
+};
+
+const loadBoardChartData = async () => {
+  await loadTree();
+  const query = buildQuery();
+  const [distributionResponse, trendResponse] = await Promise.all([getDisplacementDistributionData(query), getDisplacementTrendData(query)]);
+  distributionData.value = distributionResponse.data || { intervalBuckets: [] };
+  trendData.value = trendResponse.data || { series: [] };
+  await nextTick();
+  renderIntervalChart();
+  renderTrendChart();
+};
+
+onMounted(async () => {
+  await nextTick();
+  await loadBoardChartData();
+
+  if (intervalChartRef.value || trendChartRef.value) {
+    chartResizeObserver = new ResizeObserver(() => {
+      intervalChart?.resize();
+      trendChart?.resize();
+    });
+    if (intervalChartRef.value) {
+      chartResizeObserver.observe(intervalChartRef.value);
+    }
+    if (trendChartRef.value) {
+      chartResizeObserver.observe(trendChartRef.value);
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  chartResizeObserver?.disconnect();
+  intervalChart?.dispose();
+  trendChart?.dispose();
+  chartResizeObserver = null;
+  intervalChart = null;
+  trendChart = null;
+});
+</script>
+
 <style lang="scss" scoped>
 .board-page {
   position: fixed;
@@ -50,17 +231,19 @@
   flex-direction: column;
   gap: 16px;
   overflow: hidden;
+  width: 100vw;
+  height: 100vh;
   padding: 24px 32px 28px;
-  background: url('@/assets/board/index/bg.jpg') center / cover no-repeat;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-image: url('@/assets/board/index/bg.jpg');
 }
 
 .board-device-stage {
-  display: flex;
+  position: fixed;
-  flex: 1;
+  width: 95vw;
-  min-height: 0;
+  height: 26.426vw;
-  align-items: center;
+  top: 12%;
-  justify-content: center;
-  width: 100%;
 }
 
 .board-device {
@@ -72,22 +255,27 @@
 }
 
 .board-chart-panel {
+  height: calc(100vh - 12vh - 26.426vw - 6vh);
   display: grid;
   flex: 0 0 auto;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 22px;
   width: calc(100vw - 64px);
   margin: 0 auto;
+  position: fixed;
+  top: calc(12vh + 26.426vw + 3vh);
 }
 
 .board-card {
-  height: clamp(180px, 22vh, 280px);
+  height: 100%;
   padding: 16px 20px 18px;
   overflow: hidden;
   border: 1px solid rgb(130 231 255 / 28%);
   border-radius: 8px;
   background: linear-gradient(180deg, rgb(8 29 47 / 62%), rgb(4 18 31 / 38%));
-  box-shadow: 0 18px 46px rgb(0 0 0 / 24%), inset 0 1px 0 rgb(255 255 255 / 12%);
+  box-shadow:
+    0 18px 46px rgb(0 0 0 / 24%),
+    inset 0 1px 0 rgb(255 255 255 / 12%);
   backdrop-filter: blur(8px);
 }
 
@@ -98,46 +286,15 @@
   line-height: 1;
 }
 
-.bar-chart {
+.interval-chart {
-  display: flex;
   height: calc(100% - 20px);
-  align-items: end;
-  gap: 16px;
-  padding: 14px 8px 0;
-  border-bottom: 1px solid rgb(185 240 255 / 18%);
-}
-
-.bar-chart span {
-  flex: 1;
-  min-width: 12px;
-  height: var(--value);
-  border-radius: 4px 4px 0 0;
-  background: linear-gradient(180deg, #f9d56f 0%, #52e0ff 55%, rgb(82 224 255 / 35%) 100%);
-  box-shadow: 0 0 18px rgb(82 224 255 / 28%);
-}
-
-.line-chart {
-  width: 100%;
-  height: calc(100% - 26px);
   margin-top: 8px;
 }
 
-.line-chart-grid {
+.trend-chart {
-  fill: none;
+  width: 100%;
-  stroke: rgb(185 240 255 / 12%);
+  height: calc(100% - 26px);
-  stroke-width: 1;
+  margin-top: 8px;
-}
-
-.line-chart-area {
-  fill: url('#deviceArea');
-}
-
-.line-chart-path {
-  fill: none;
-  stroke: url('#deviceLine');
-  stroke-linecap: round;
-  stroke-width: 4;
-  filter: drop-shadow(0 0 8px rgb(97 241 255 / 52%));
 }
 
 @media (max-width: 768px) {
@@ -161,8 +318,8 @@
     transform: translateY(14px);
   }
 
-  .bar-chart,
+  .interval-chart,
-  .line-chart {
+  .trend-chart {
     height: calc(100% - 24px);
   }
 }