energy-visual-editor/src/views/ems/report/vibrationBoard/comparison/index.vue

<template>
  <div v-loading="loading" class="app-container vibration-board-page">
    <VibrationBoardFilter
      :selection-label="queryForm.selectionLabel"
      :time-range="daterangeRecordTime"
      :sampling-interval="queryForm.samplingInterval"
      @update:time-range="setTimeRange"
      @update:sampling-interval="setSamplingInterval"
      @query="handleQuery"
    />

    <el-row :gutter="16" class="mt-4 vibration-grid">
      <el-col :xs="24" :lg="7" :xl="6">
        <VibrationBoardDeviceTree :loading="treeLoading" :tree-data="monitorTreeOptions" :tree-props="treeProps" @node-click="handleTreeNodeClick" />
      </el-col>
      <el-col :xs="24" :lg="17" :xl="18">
        <el-alert
          type="info"
          :closable="false"
          show-icon
          class="section-tip"
          title="对比分析建议选择设备组或全部位移设备，这样横向排名与散点聚类才更有参考价值。"
        />

        <el-row :gutter="16" class="vibration-grid">
          <el-col :xs="24" :xl="12">
            <el-card shadow="never" class="chart-card">
              <template #header>
                <div class="card-header">
                  <div class="card-title-group">
                    <div class="card-title">设备排名对比图</div>
                    <div class="card-subtitle">同时对比位移均值和最新值，适合快速筛出“当前状态已经偏离历史常态”的设备。</div>
                  </div>
                  <HelpButton title="设备排名对比图" :content="COMPARISON_HELP" />
                </div>
              </template>
              <div ref="rankChartRef" class="chart-container-lg" />
            </el-card>
          </el-col>
          <el-col :xs="24" :xl="12">
            <el-card shadow="never" class="chart-card">
              <template #header>
                <div class="card-header">
                  <div class="card-title-group">
                    <div class="card-title">设备散点图</div>
                    <div class="card-subtitle">横轴看均值，纵轴看峰值，气泡越大表示样本量越充足，判断更稳。</div>
                  </div>
                  <HelpButton title="设备散点图" :content="COMPARISON_HELP" />
                </div>
              </template>
              <div ref="scatterChartRef" class="chart-container-lg" />
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { getDisplacementComparisonData, type DisplacementComparisonPageVO } from '@/api/ems/report/displacementBoard';
import HelpButton from '../components/HelpButton.vue';
import VibrationBoardFilter from '../components/VibrationBoardFilter.vue';
import VibrationBoardDeviceTree from '../components/VibrationBoardDeviceTree.vue';
import { COMPARISON_HELP } from '../components/helpContent';
import { useChartResize } from '../components/useChartResize';
import { useVibrationBoardQueryState } from '../components/useVibrationBoardQueryState';
import { buildCategoryDataZoom, getVibrationMetricOption, toNumber, vibrationMetricOptions } from '../components/vibrationBoardShared';

defineOptions({ name: 'VibrationBoardComparison' });

const rankChartRef = ref<HTMLElement>();
const scatterChartRef = ref<HTMLElement>();
const { getChart } = useChartResize(rankChartRef, scatterChartRef);

const {
  loading,
  treeLoading,
  monitorTreeOptions,
  treeProps,
  daterangeRecordTime,
  queryForm,
  loadTree,
  handleTreeNodeClick,
  setTimeRange,
  setSamplingInterval,
  buildQuery
} = useVibrationBoardQueryState();

const comparisonData = ref<DisplacementComparisonPageVO>({ rankItems: [], scatterItems: [] });
const metricColorMap = Object.fromEntries(vibrationMetricOptions.map((item) => [item.field, item.color]));
const activeMetric = computed(() => getVibrationMetricOption(comparisonData.value.metricField));

const renderCharts = () => {
  const rankChart = getChart(rankChartRef);
  const scatterChart = getChart(scatterChartRef);
  const unit = comparisonData.value.unit || activeMetric.value.unit;
  const rankItems = comparisonData.value.rankItems || [];
  const scatterItems = comparisonData.value.scatterItems || [];
  const currentMetricColor = metricColorMap[comparisonData.value.metricField || ''] || activeMetric.value.color;

  if (rankChart) {
    if (!rankItems.length) {
      rankChart.clear();
    } else {
      const categoryNames = rankItems.map((item) => item.monitorName || item.monitorId || '--');
      rankChart.setOption(
        {
          color: [currentMetricColor, '#36cfc9'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            formatter: (params: any[]) => {
              const rows = params.map((item) => `${item.marker}${item.seriesName}: <b>${Number(item.value).toFixed(2)} ${unit}</b>`);
              return [`<b>${params[0]?.name || '--'}</b>`, ...rows].join('<br/>');
            }
          },
          legend: {
            top: 8,
            data: ['均值', '最新值'],
            textStyle: { color: '#475569' }
          },
          grid: { left: 150, right: 28, top: 56, bottom: 20 },
          xAxis: {
            type: 'value',
            name: unit,
            splitLine: { lineStyle: { type: 'dashed', color: 'rgba(148, 163, 184, 0.35)' } },
            axisLabel: { color: '#64748b' }
          },
          yAxis: {
            type: 'category',
            data: categoryNames,
            axisLabel: { color: '#334155', width: 110, overflow: 'truncate' }
          },
          dataZoom: buildCategoryDataZoom(categoryNames.length),
          series: [
            {
              name: '均值',
              type: 'bar',
              barMaxWidth: 16,
              data: rankItems.map((item) => toNumber(item.avg)),
              itemStyle: {
                borderRadius: [0, 6, 6, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: currentMetricColor },
                  { offset: 1, color: `${currentMetricColor}55` }
                ])
              }
            },
            {
              name: '最新值',
              type: 'bar',
              barMaxWidth: 16,
              data: rankItems.map((item) => toNumber(item.latest)),
              itemStyle: {
                borderRadius: [0, 6, 6, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: '#36cfc9' },
                  { offset: 1, color: '#a7f3d0' }
                ])
              }
            }
          ]
        },
        true
      );
    }
  }

  if (scatterChart) {
    if (!scatterItems.length) {
      scatterChart.clear();
      return;
    }
    const sampleCounts = scatterItems.map((item) => toNumber(item.sampleCount));
    scatterChart.setOption(
      {
        tooltip: {
          formatter: (params: any) =>
            [
              `<b>${params.value[3]}</b>`,
              `均值: ${Number(params.value[0]).toFixed(2)} ${unit}`,
              `峰值: ${Number(params.value[1]).toFixed(2)} ${unit}`,
              `采样量: ${params.value[2]}`
            ].join('<br/>')
        },
        visualMap: {
          min: sampleCounts.length ? Math.min(...sampleCounts) : 0,
          max: sampleCounts.length ? Math.max(...sampleCounts) : 0,
          dimension: 2,
          orient: 'horizontal',
          left: 'center',
          bottom: 6,
          calculable: true,
          text: ['采样量高', '采样量低'],
          inRange: {
            symbolSize: [14, 42],
            color: ['#dbeafe', currentMetricColor]
          }
        },
        grid: { left: 60, right: 24, top: 24, bottom: 80 },
        xAxis: {
          type: 'value',
          name: `均值（${unit}）`,
          splitLine: { lineStyle: { type: 'dashed', color: 'rgba(148, 163, 184, 0.35)' } },
          axisLabel: { color: '#64748b' }
        },
        yAxis: {
          type: 'value',
          name: `峰值（${unit}）`,
          splitLine: { lineStyle: { type: 'dashed', color: 'rgba(148, 163, 184, 0.35)' } },
          axisLabel: { color: '#64748b' }
        },
        series: [
          {
            name: '设备散点',
            type: 'scatter',
            emphasis: { focus: 'series' },
            label: {
              show: true,
              position: 'top',
              color: '#334155',
              fontSize: 11,
              formatter: (params: any) => params.value[3]
            },
            itemStyle: {
              shadowBlur: 12,
              shadowColor: 'rgba(15, 23, 42, 0.14)'
            },
            data: scatterItems.map((item) => [
              toNumber(item.avg),
              toNumber(item.max),
              toNumber(item.sampleCount),
              item.monitorName || item.monitorId || '--'
            ])
          }
        ]
      },
      true
    );
  }
};

const handleQuery = async () => {
  loading.value = true;
  try {
    const { data } = await getDisplacementComparisonData(buildQuery());
    comparisonData.value = data || { rankItems: [], scatterItems: [] };
    await nextTick();
    // 对比页经常在切换设备树后快速重复查询，这里统一在下一帧重绘，避免旧尺寸和旧图层残留。
    renderCharts();
  } finally {
    loading.value = false;
  }
};

onMounted(async () => {
  await loadTree();
  await handleQuery();
});
</script>

<style scoped lang="scss">
@import '../components/vibrationBoardReport.scss';
</style>