national_health_backend_vue/write-examination-lab.cjs

const fs = require('fs');
const path = 'D:/new_project/plus-ui/src/views/health/examinationLab/index.vue';

const content = `<template>
  <div class="analysis-page">
    <div class="page-header">
      <div>
        <h2>检查检验分析</h2>
        <p class="subtitle">通过检查概况、检验概况监控检查检验的情况</p>
      </div>
    </div>

    <!-- ==================== 检查概况模块 ==================== -->
    <div class="section-title">一、检查概况</div>

    <!-- 1. 工作量体量维度 -->
    <div class="sub-title">1. 工作量体量维度</div>
    <div class="metrics-grid-2">
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#667eea,#764ba2)">
          <el-icon :size="24"><Document /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.outpatientExamCount ?? '---' }}</div>
          <div class="metric-label">门诊检查例次</div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#4facfe,#00f2fe)">
          <el-icon :size="24"><FirstAidKit /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.inpatientExamCount ?? '---' }}</div>
          <div class="metric-label">住院检查例次</div>
        </div>
      </div>
    </div>

    <div class="sub-title">各类检查分项例数及占比</div>
    <div class="chart-card">
      <div ref="examCategoryChartRef" class="chart-container"></div>
    </div>

    <!-- 2. 时效运营维度 -->
    <div class="sub-title">2. 时效运营维度</div>
    <div class="metrics-grid-3">
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#43e97b,#38f9d7)">
          <el-icon :size="24"><Timer /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.avgBookingWaitTime ?? '---' }}<span class="unit">分钟</span></div>
          <div class="metric-label">平均预约等待时长</div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#e6a23c,#f5af19)">
          <el-icon :size="24"><Timer /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.avgExamWaitTime ?? '---' }}<span class="unit">分钟</span></div>
          <div class="metric-label">检查等候时长</div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#f5576c,#f093fb)">
          <el-icon :size="24"><Timer /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.avgReportTime ?? '---' }}<span class="unit">小时</span></div>
          <div class="metric-label">报告出具时长</div>
        </div>
      </div>
    </div>

    <!-- 3. 收入与费用结构维度 -->
    <div class="sub-title">3. 收入与费用结构维度</div>
    <div class="charts-row">
      <div class="chart-card">
        <div class="chart-header"><h3>门诊各类设备项目收入占比</h3></div>
        <div ref="outpatientExamIncomeChartRef" class="chart-container"></div>
      </div>
      <div class="chart-card">
        <div class="chart-header"><h3>住院各类设备项目收入占比</h3></div>
        <div ref="inpatientExamIncomeChartRef" class="chart-container"></div>
      </div>
    </div>

    <!-- 4. 设备资源负荷维度 -->
    <div class="sub-title">4. 设备资源负荷维度</div>
    <div class="charts-row">
      <div class="chart-card">
        <div class="chart-header"><h3>各类型设备利用率(%)</h3></div>
        <div ref="equipmentUtilChartRef" class="chart-container"></div>
      </div>
      <div class="chart-card">
        <div class="chart-header"><h3>新设备/老旧设备工作量对比</h3></div>
        <div ref="equipmentAgeChartRef" class="chart-container"></div>
      </div>
    </div>

    <!-- ==================== 检验概况模块 ==================== -->
    <div class="section-title">二、检验概况</div>

    <!-- 1. 工作量体量维度 -->
    <div class="sub-title">1. 工作量体量维度</div>
    <div class="metrics-grid-2">
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#667eea,#764ba2)">
          <el-icon :size="24"><DataAnalysis /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.totalLabSpecimenCount ?? '---' }}</div>
          <div class="metric-label">检验总标本量</div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#4facfe,#00f2fe)">
          <el-icon :size="24"><TrendCharts /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.totalLabItemCount ?? '---' }}</div>
          <div class="metric-label">检验总项目数</div>
        </div>
      </div>
    </div>

    <div class="sub-title">各类检验标本数量及占比</div>
    <div class="chart-card">
      <div ref="labCategoryChartRef" class="chart-container"></div>
    </div>

    <!-- 2. 流程时效维度 -->
    <div class="sub-title">2. 流程时效维度</div>
    <div class="metrics-grid-2">
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#f5576c,#f093fb)">
          <el-icon :size="24"><Timer /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.emergencyTat ?? '---' }}<span class="unit">分钟</span></div>
          <div class="metric-label">急诊检验平均周转时间TAT</div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#43e97b,#38f9d7)">
          <el-icon :size="24"><Timer /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.routineTat ?? '---' }}<span class="unit">分钟</span></div>
          <div class="metric-label">常规检验平均周转时间TAT</div>
        </div>
      </div>
    </div>

    <!-- 3. 收入费用维度 -->
    <div class="sub-title">3. 收入费用维度</div>
    <div class="charts-row">
      <div class="chart-card">
        <div class="chart-header"><h3>门诊各类检验项目收入结构占比</h3></div>
        <div ref="outpatientLabIncomeChartRef" class="chart-container"></div>
      </div>
      <div class="chart-card">
        <div class="chart-header"><h3>住院各类检验项目收入结构占比</h3></div>
        <div ref="inpatientLabIncomeChartRef" class="chart-container"></div>
      </div>
    </div>

    <!-- 4. 质控与诊疗规范维度 -->
    <div class="sub-title">4. 质控与诊疗规范维度</div>
    <div class="metrics-grid-5">
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#43e97b,#38f9d7)">
          <el-icon :size="24"><CircleCheck /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.labPositiveRate ?? '---' }}%</div>
          <div class="metric-label">检验阳性检出率</div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#f5576c,#f093fb)">
          <el-icon :size="24"><Warning /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.criticalValueCount ?? '---' }}</div>
          <div class="metric-label">危急值标本数量</div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#4facfe,#00f2fe)">
          <el-icon :size="24"><CircleCheck /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.criticalValueNotifyRate ?? '---' }}%</div>
          <div class="metric-label">危急值通知闭环落实率</div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#667eea,#764ba2)">
          <el-icon :size="24"><DataAnalysis /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.microbeExamCount ?? '---' }}</div>
          <div class="metric-label">微生物送检例数</div>
        </div>
      </div>
    </div>

    <!-- ==================== 跨模块综合对比 ==================== -->
    <div class="section-title">三、跨模块综合对比</div>

    <div class="sub-title">1. 门急诊、住院患者人均检查项目数、人均检验费用对比</div>
    <div class="metrics-grid-4">
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#667eea,#764ba2)">
          <el-icon :size="24"><Document /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.outpatientPerCapitaExamCount ?? '---' }}</div>
          <div class="metric-label">门急诊人均检查项目数</div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#4facfe,#00f2fe)">
          <el-icon :size="24"><FirstAidKit /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.inpatientPerCapitaExamCount ?? '---' }}</div>
          <div class="metric-label">住院人均检查项目数</div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#e6a23c,#f5af19)">
          <el-icon :size="24"><Money /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.outpatientPerCapitaLabCost ?? '---' }}<span class="unit">元</span></div>
          <div class="metric-label">门急诊人均检验费用</div>
        </div>
      </div>
      <div class="metric-card">
        <div class="metric-icon" style="background:linear-gradient(135deg,#f5576c,#f093fb)">
          <el-icon :size="24"><Money /></el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.inpatientPerCapitaLabCost ?? '---' }}<span class="unit">元</span></div>
          <div class="metric-label">住院人均检验费用</div>
        </div>
      </div>
    </div>

    <div class="sub-title">2. 各临床科室检查检验占比横向排名</div>
    <div class="chart-card">
      <div ref="deptExamLabRateChartRef" class="chart-container"></div>
    </div>
  </div>
</template>

<script setup name="ExaminationLab" lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue';
import type { ComponentInternalInstance } from 'vue';
import * as echarts from 'echarts';
import { Document, FirstAidKit, Timer, Money, TrendCharts, DataAnalysis, CircleCheck, Warning } from '@element-plus/icons-vue';
import { getExaminationLabStats } from '@/api/health/examinationLab';
import type { ExaminationLabStatsVO } from '@/api/health/examinationLab/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const stats = ref<ExaminationLabStatsVO>({} as ExaminationLabStatsVO);

// Chart refs
const examCategoryChartRef = ref<HTMLElement>();
const outpatientExamIncomeChartRef = ref<HTMLElement>();
const inpatientExamIncomeChartRef = ref<HTMLElement>();
const equipmentUtilChartRef = ref<HTMLElement>();
const equipmentAgeChartRef = ref<HTMLElement>();
const labCategoryChartRef = ref<HTMLElement>();
const outpatientLabIncomeChartRef = ref<HTMLElement>();
const inpatientLabIncomeChartRef = ref<HTMLElement>();
const deptExamLabRateChartRef = ref<HTMLElement>();

let charts: echarts.ECharts[] = [];

function initChart(el: HTMLElement | undefined, option: any): echarts.ECharts | null {
  if (!el) return null;
  const chart = echarts.init(el);
  chart.setOption(option);
  charts.push(chart);
  return chart;
}

function loadStats() {
  getExaminationLabStats().then((response: any) => {
    stats.value = response.data || {};
    nextTick(() => renderCharts());
  });
}

function renderCharts() {
  charts.forEach(c => c.dispose());
  charts = [];
  const s = stats.value;

  // 1. 各类检查分项例数及占比
  initChart(examCategoryChartRef.value, {
    tooltip: { trigger: 'item', formatter: '{b}: {c}例 ({d}%)' },
    legend: { orient: 'vertical', left: 10, top: 'middle' },
    color: ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#9b59b6', '#1abc9c', '#34495e'],
    series: [{ name: '检查分项', type: 'pie', radius: ['40%', '70%'], center: ['60%', '50%'],
      data: s.examCategoryList || [], itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
      label: { formatter: '{b}: {c}例 ({d}%)' } }]
  });

  // 2. 门诊各类设备项目收入占比
  initChart(outpatientExamIncomeChartRef.value, {
    tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
    legend: { orient: 'vertical', left: 10, top: 'middle' },
    color: ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#9b59b6'],
    series: [{ name: '门诊设备收入占比', type: 'pie', radius: ['40%', '70%'], center: ['60%', '50%'],
      data: s.outpatientExamIncomeList || [], itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
      label: { formatter: '{b}: {c}%' } }]
  });

  // 3. 住院各类设备项目收入占比
  initChart(inpatientExamIncomeChartRef.value, {
    tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
    legend: { orient: 'vertical', left: 10, top: 'middle' },
    color: ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#9b59b6'],
    series: [{ name: '住院设备收入占比', type: 'pie', radius: ['40%', '70%'], center: ['60%', '50%'],
      data: s.inpatientExamIncomeList || [], itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
      label: { formatter: '{b}: {c}%' } }]
  });

  // 4. 各类型设备利用率
  const utilData = s.equipmentUtilizationList || [];
  initChart(equipmentUtilChartRef.value, {
    tooltip: { trigger: 'axis', formatter: '{b}: {c}%' },
    grid: { top: 30, left: 80, right: 30, bottom: 30 },
    xAxis: { type: 'value', max: 100, axisLabel: { formatter: '{value}%' } },
    yAxis: { type: 'category', data: utilData.map((d: any) => d.name), inverse: true },
    series: [{ name: '利用率', type: 'bar', data: utilData.map((d: any) => d.value),
      itemStyle: { color: (params: any) => params.value >= 80 ? '#f56c6c' : params.value >= 60 ? '#e6a23c' : '#67c23a', borderRadius: [0, 4, 4, 0] },
      barWidth: 20, label: { show: true, position: 'right', formatter: '{c}%' } }]
  });

  // 5. 新设备/老旧设备工作量对比
  const ageData = s.equipmentAgeCompareList || [];
  initChart(equipmentAgeChartRef.value, {
    tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
    legend: { bottom: 10 },
    color: ['#409eff', '#e6a23c'],
    series: [{ name: '设备工作量', type: 'pie', radius: ['40%', '70%'], center: ['50%', '45%'],
      data: ageData, itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
      label: { formatter: '{b}\\n{c}%' } }]
  });

  // 6. 各类检验标本数量及占比
  initChart(labCategoryChartRef.value, {
    tooltip: { trigger: 'item', formatter: '{b}: {c}例 ({d}%)' },
    legend: { orient: 'vertical', left: 10, top: 'middle' },
    color: ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#9b59b6', '#1abc9c'],
    series: [{ name: '检验标本', type: 'pie', radius: ['40%', '70%'], center: ['60%', '50%'],
      data: s.labCategoryList || [], itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
      label: { formatter: '{b}: {c}例 ({d}%)' } }]
  });

  // 7. 门诊各类检验项目收入结构占比
  initChart(outpatientLabIncomeChartRef.value, {
    tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
    legend: { orient: 'vertical', left: 10, top: 'middle' },
    color: ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#9b59b6', '#1abc9c'],
    series: [{ name: '门诊检验收入占比', type: 'pie', radius: ['40%', '70%'], center: ['60%', '50%'],
      data: s.outpatientLabIncomeList || [], itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
      label: { formatter: '{b}: {c}%' } }]
  });

  // 8. 住院各类检验项目收入结构占比
  initChart(inpatientLabIncomeChartRef.value, {
    tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
    legend: { orient: 'vertical', left: 10, top: 'middle' },
    color: ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#9b59b6', '#1abc9c'],
    series: [{ name: '住院检验收入占比', type: 'pie', radius: ['40%', '70%'], center: ['60%', '50%'],
      data: s.inpatientLabIncomeList || [], itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
      label: { formatter: '{b}: {c}%' } }]
  });

  // 9. 各临床科室检查检验占比横向排名
  const deptData = s.deptExamLabRateList || [];
  initChart(deptExamLabRateChartRef.value, {
    tooltip: { trigger: 'axis', formatter: '{b}: {c}%' },
    grid: { top: 30, left: 120, right: 30, bottom: 30 },
    xAxis: { type: 'value', max: 100, axisLabel: { formatter: '{value}%' } },
    yAxis: { type: 'category', data: deptData.map((d: any) => d.name).reverse(), inverse: false },
    series: [{ name: '检查检验占比', type: 'bar', data: deptData.map((d: any) => d.value).reverse(),
      itemStyle: { color: '#409eff', borderRadius: [0, 4, 4, 0] }, barWidth: 20,
      label: { show: true, position: 'right', formatter: '{c}%' } }]
  });
}

function handleResize() { charts.forEach(c => c?.resize()); }

onMounted(() => { loadStats(); window.addEventListener('resize', handleResize); });
onBeforeUnmount(() => { window.removeEventListener('resize', handleResize); charts.forEach(c => c?.dispose()); });
</script>

<style scoped lang="scss">
.analysis-page { padding: 20px; background: #f5f7fa; min-height: 100vh; }
.page-header { background: white; padding: 20px 24px; border-radius: 8px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center;
  h2 { margin: 0 0 4px; font-size: 22px; color: #2c3e50; } .subtitle { margin: 0; font-size: 13px; color: #909399; }
}
.section-title { font-size: 18px; font-weight: 700; color: #2c3e50; margin: 24px 0 12px; padding-left: 12px; border-left: 4px solid #409eff; }
.sub-title { font-size: 15px; font-weight: 600; color: #303133; margin: 16px 0 10px; }
.metrics-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }
.metrics-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.metrics-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.metrics-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 16px; }
.metric-card { background: white; padding: 20px; border-radius: 8px; display: flex; gap: 16px; align-items: center;
  .metric-icon { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; }
  .metric-content { flex: 1; } .metric-value { font-size: 22px; font-weight: 700; color: #2c3e50; } .metric-label { font-size: 13px; color: #909399; margin-top: 4px; }
  .unit { font-size: 13px; font-weight: 400; color: #909399; margin-left: 2px; }
}
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.chart-card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 16px;
  .chart-header { margin-bottom: 12px; h3 { margin: 0; font-size: 16px; color: #2c3e50; } }
  .chart-container { height: 320px; }
}
</style>
`;

fs.writeFileSync(path, content, 'utf-8');
console.log('File written successfully, size:', fs.statSync(path).size);