统一报表图表并接通首页与负责人待办

yeg

2026-09-09 528d52f2c7c6f911c54cae6e3f25500eab4384fe

 src/components/ConsoleChartPanel.vue

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { stepCurveChartOption } from '@/utils/stepCurveChart'
import { toTestDisplayValue } from '@/utils/testDataUnits'
import { computed, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
@@ -415,68 +416,9 @@
    const zero = points[0]?.time
    return points.map(point => ({ ...point, time: zero == null ? null : (point.time as number) - zero }))
  })
  const timestamps = [...new Set(seriesData.flat().map(point => point.time as number))].sort((a, b) => a - b)
  const values = seriesData.flat().map(point => point.value)
  const dataMin = values.length ? Math.min(...values) : 0
  const dataMax = values.length ? Math.max(...values) : 1
  const margin = Math.max((dataMax - dataMin) * 0.16, metric.key === 'temperature' ? 1 : toTestDisplayValue(metric.key, 0.08))
  const createYAxis = (position: 'left' | 'right') => ({
    type: 'value',
    name: metric.unit,
    position,
    nameLocation: 'middle',
    nameGap: 42,
    nameRotate: position === 'left' ? 90 : -90,
    min: Number((dataMin - margin).toFixed(2)),
    max: Number((dataMax + margin).toFixed(2)),
    nameTextStyle: { color: '#8795a3', fontSize: 10 },
    axisLine: { show: true, lineStyle: { color: '#cbd8e4' } },
    axisTick: { show: true, lineStyle: { color: '#cbd8e4' } },
    splitLine: { show: position === 'left', lineStyle: { color: '#e8eef4' } },
    axisLabel: { color: '#8795a3', fontSize: 10, margin: 8 },
  })

  return {
    animation: false,
    color: cellIndexes.map(index => seriesColors.value[index]),
    grid: { top: 62, right: 62, bottom: 46, left: 62 },
    tooltip: { trigger: 'axis' },
    legend: {
      top: 4,
      right: 6,
      type: 'scroll',
      icon: 'roundRect',
      itemWidth: 14,
      itemHeight: 8,
      itemGap: 12,
      formatter: (name: string) => name.split('·').pop()?.trim() || name,
      textStyle: { fontSize: 10, color: '#52606d' },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      name: '设备时间',
      nameLocation: 'middle',
      nameGap: 29,
      data: timestamps.map(value => `${(value / 3600000).toFixed(3)} h`),
      axisLine: { lineStyle: { color: '#cbd8e4' } },
      axisLabel: { color: '#8795a3', fontSize: 10, interval: 4 },
      nameTextStyle: { color: '#52606d', fontSize: 10 },
    },
    yAxis: [createYAxis('left'), createYAxis('right')],
    series: selectedCells.value.map((cell, index) => ({
      name: cell.no,
      type: 'line',
      smooth: false,
      showSymbol: false,
      lineStyle: { width: 2 },
      data: timestamps.map(timestamp => {
        const point = seriesData[index].find(item => item.time === timestamp)
        return point ? point.value : null
      }),
    })),
  }
  return stepCurveChartOption(metric, selectedCells.value.map((cell, index) => ({ name: cell.no, points: seriesData[index].map(point => [(point.time as number) / 1000, point.value]) })), cellIndexes.map(index => seriesColors.value[index]))
}

</script>

<template>