his/openhis-ui-vue3/src/views/inpatient/nurse/vitalsign/TemperatureChart.vue

<template>
  <div class="temperature-chart-container">
    <div class="chart-wrapper" ref="chartRef" data-cy="chart-area"></div>
    <div class="table-wrapper">
      <table class="vitalsign-table" data-cy="vitalsign-table">
        <thead>
          <tr>
            <th>时间</th>
            <th>体温(℃)</th>
            <th>脉搏(次/分)</th>
            <th>心率(次/分)</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in tableData" :key="row.timeKey">
            <td>{{ row.timeLabel }}</td>
            <td :data-cy="`table-cell-${row.timeKey}-temp`">{{ row.temp ?? '-' }}</td>
            <td :data-cy="`table-cell-${row.timeKey}-pulse`">{{ row.pulse ?? '-' }}</td>
            <td :data-cy="`table-cell-${row.timeKey}-hr`">{{ row.hr ?? '-' }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { getVitalSignsByPatient } from '@/api/inpatient/vitalsign'

const props = defineProps({
  patientId: { type: String, required: true }
})

const chartRef = ref(null)
let chartInstance = null
const tableData = ref([])
const rawData = ref([])

const fetchData = async () => {
  try {
    const res = await getVitalSignsByPatient(props.patientId)
    rawData.value = res.data || []
    processChartData()
    processTableData()
  } catch (e) {
    console.error('Failed to fetch vital signs:', e)
  }
}

const processTableData = () => {
  const timeSlots = ['02:00', '06:00', '10:00', '14:00', '18:00', '22:00']
  const grouped = {}
  rawData.value.forEach(item => {
    const key = `${item.recordDate} ${item.recordTime}`
    grouped[key] = item
  })

  tableData.value = timeSlots.map(slot => {
    const date = rawData.value[0]?.recordDate || new Date().toISOString().split('T')[0]
    const fullKey = `${date} ${slot}`
    const item = grouped[fullKey] || {}
    return {
      timeKey: `${date}-${slot.replace(':', '')}`,
      timeLabel: `${date.slice(5)} ${slot.slice(0, 2)}点`,
      temp: item.temperature,
      pulse: item.pulse,
      hr: item.heartRate
    }
  })
}

const processChartData = () => {
  if (!chartInstance) return

  const dates = [...new Set(rawData.value.map(d => d.recordDate))].sort()
  const xAxisData = []
  const tempData = []
  const pulseData = []
  const hrData = []

  dates.forEach(date => {
    ['02:00', '06:00', '10:00', '14:00', '18:00', '22:00'].forEach(time => {
      xAxisData.push(`${date.slice(5)} ${time.slice(0, 2)}点`)
      const record = rawData.value.find(r => r.recordDate === date && r.recordTime === time)
      tempData.push(record ? record.temperature : null)
      pulseData.push(record ? record.pulse : null)
      hrData.push(record ? record.heartRate : null)
    })
  })

  const option = {
    tooltip: { trigger: 'axis' },
    grid: { top: 40, bottom: 40, left: 50, right: 30 },
    xAxis: { type: 'category', data: xAxisData, axisLabel: { rotate: 30 } },
    yAxis: [
      { type: 'value', name: '体温(℃)', min: 35, max: 42, splitNumber: 7 },
      { type: 'value', name: '脉搏/心率', min: 0, max: 180, splitNumber: 9, position: 'right' }
    ],
    series: [
      {
        name: '体温',
        type: 'line',
        yAxisIndex: 0,
        data: tempData,
        symbol: 'x',
        symbolSize: 8,
        itemStyle: { color: '#1890ff' },
        lineStyle: { color: '#1890ff', width: 2 },
        connectNulls: false
      },
      {
        name: '脉搏',
        type: 'line',
        yAxisIndex: 1,
        data: pulseData,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: { color: '#ff4d4f' },
        lineStyle: { color: '#ff4d4f', width: 2 },
        connectNulls: false
      },
      {
        name: '心率',
        type: 'line',
        yAxisIndex: 1,
        data: hrData,
        symbol: 'emptyCircle',
        symbolSize: 8,
        itemStyle: { color: '#ff4d4f', borderColor: '#ff4d4f', borderWidth: 2 },
        lineStyle: { color: '#ff4d4f', width: 2 },
        connectNulls: false
      }
    ]
  }

  chartInstance.setOption(option, true)
}

const initChart = () => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value)
    window.addEventListener('resize', chartInstance.resize)
  }
}

onMounted(() => {
  initChart()
  fetchData()
})

onUnmounted(() => {
  window.removeEventListener('resize', chartInstance?.resize)
  chartInstance?.dispose()
})

defineExpose({ refresh: fetchData })
</script>

<style scoped>
.temperature-chart-container { display: flex; flex-direction: column; gap: 16px; }
.chart-wrapper { height: 400px; width: 100%; }
.vitalsign-table { width: 100%; border-collapse: collapse; }
.vitalsign-table th, .vitalsign-table td { border: 1px solid #ddd; padding: 8px; text-align: center; }
</style>