各表单布局调整

WXL

4 天以前 c4599aa279fd2f90b741608392e056fbae2282d5

 src/views/business/course/components/OrganUtilizationStage.vue

@@ -1,812 +1,1279 @@
<template>
  <base-stage :stage-data="stageData" :case-info="caseInfo">
    <!-- 头部警告信息 -->
    <template #header>
      <el-alert
        :title="`器官利用 - ${getStatusText()}`"
        :type="getAlertType()"
        :description="getAlertDescription()"
        show-icon
        :closable="false"
      />
    </template>
  <div class="organ-procurement-detail">
    <!-- <case-basic-info :case-id="caseId" :show-attachment="true":column="3" /> -->

    <!-- 统计概览行 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="6">
        <el-card>
          <div slot="header" class="card-header">
            <span>利用概况</span>
          </div>
          <div class="utilization-overview">
            <div class="overview-item">
              <div class="overview-icon" style="color: #67C23A;">
                <i class="el-icon-success"></i>
              </div>
              <div class="overview-content">
                <div class="value">{{ utilizationStats.transplanted }}</div>
                <div class="label">已移植器官</div>
              </div>
            </div>
            <div class="overview-item">
              <div class="overview-icon" style="color: #E6A23C;">
                <i class="el-icon-time"></i>
              </div>
              <div class="overview-content">
                <div class="value">{{ utilizationStats.inProgress }}</div>
                <div class="label">移植中</div>
              </div>
            </div>
            <div class="overview-item">
              <div class="overview-icon" style="color: #F56C6C;">
                <i class="el-icon-warning"></i>
              </div>
              <div class="overview-content">
                <div class="value">{{ utilizationStats.failed }}</div>
                <div class="label">移植失败</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card>
          <div slot="header" class="card-header">
            <span>成功率统计</span>
          </div>
          <div class="success-stats">
            <div class="success-item">
              <span class="label">移植成功率:</span>
              <el-progress
                :percentage="utilizationStats.successRate"
                :status="utilizationStats.successRate > 85 ? 'success' : 'warning'"
              />
            </div>
            <div class="success-item">
              <span class="label">器官利用率:</span>
              <el-progress
                :percentage="utilizationStats.utilizationRate"
                status="success"
              />
            </div>
            <div class="success-item">
              <span class="label">患者存活率:</span>
              <el-progress
                :percentage="utilizationStats.survivalRate"
                status="success"
              />
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card>
          <div slot="header" class="card-header">
            <span>时间跟踪</span>
          </div>
          <div class="time-tracking">
            <div class="time-item">
              <span class="label">获取到移植:</span>
              <span class="value">{{ timeTracking.procurementToTransplant }}</span>
            </div>
            <div class="time-item">
              <span class="label">冷缺血时间:</span>
              <span class="value">{{ timeTracking.coldIschemiaTime }}</span>
            </div>
            <div class="time-item">
              <span class="label">手术时长:</span>
              <span class="value">{{ timeTracking.surgeryDuration }}</span>
            </div>
            <div class="time-item">
              <span class="label">ICU停留:</span>
              <span class="value">{{ timeTracking.icuStay }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card>
          <div slot="header" class="card-header">
            <span>质量评估</span>
          </div>
          <div class="quality-assessment">
            <div class="quality-item">
              <span class="label">器官质量评分:</span>
              <el-rate
                v-model="qualityStats.organQuality"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </div>
            <div class="quality-item">
              <span class="label">手术质量:</span>
              <el-rate
                v-model="qualityStats.surgeryQuality"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </div>
            <div class="quality-item">
              <span class="label">随访完成率:</span>
              <el-progress
                :percentage="qualityStats.followupCompletionRate"
                status="success"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据可视化部分 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 器官利用分布图 -->
      <el-col :span="12">
        <el-card>
          <div slot="header" class="card-header">
            <span>器官利用分布</span>
            <el-radio-group v-model="chartView" size="small" @change="updateCharts">
              <el-radio-button label="bar">柱状图</el-radio-button>
              <el-radio-button label="pie">饼图</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-container">
            <div ref="organDistributionChart" style="width: 100%; height: 300px;"></div>
          </div>
        </el-card>
      </el-col>

      <!-- 成功率趋势图 -->
      <el-col :span="12">
        <el-card>
          <div slot="header" class="card-header">
            <span>移植成功率趋势</span>
          </div>
          <div class="chart-container">
            <div ref="successTrendChart" style="width: 100%; height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 随访数据统计 -->
      <el-col :span="12">
        <el-card>
          <div slot="header" class="card-header">
            <span>随访数据统计</span>
          </div>
          <div class="chart-container">
            <div ref="followupStatsChart" style="width: 100%; height: 300px;"></div>
          </div>
        </el-card>
      </el-col>

      <!-- 并发症分析 -->
      <el-col :span="12">
        <el-card>
          <div slot="header" class="card-header">
            <span>并发症分析</span>
          </div>
          <div class="chart-container">
            <div ref="complicationChart" style="width: 100%; height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细数据表格 -->
    <el-card style="margin-top: 20px;">
      <div slot="header" class="card-header">
        <span>器官利用详情</span>
        <el-button type="primary" size="small" @click="exportData">
          导出数据
        </el-button>
    <!-- 基本信息 -->
    <el-card class="detail-card">
      <div slot="header" class="clearfix">
        <span class="detail-title">器官获取基本信息</span>
      </div>

      <el-table :data="organUtilizationData" v-loading="loading" border>
        <el-table-column label="器官名称" prop="organName" width="120" align="center" />
        <el-table-column label="移植状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="getTransplantStatusTag(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="受体信息" width="150">
          <template slot-scope="scope">
            <div>{{ scope.row.recipientName }}</div>
            <div style="font-size: 12px; color: #909399;">{{ scope.row.recipientAge }}岁/{{ scope.row.recipientGender }}</div>
          </template>
        </el-table-column>
        <el-table-column label="移植医院" prop="hospital" min-width="180" />
        <el-table-column label="移植时间" width="160" align="center">
          <template slot-scope="scope">
            {{ formatTime(scope.row.transplantTime) }}
          </template>
        </el-table-column>
        <el-table-column label="随访次数" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.followupCount > 0 ? 'success' : 'info'">
              {{ scope.row.followupCount }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="当前状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag :type="getRecipientStatusTag(scope.row.recipientStatus)">
              {{ scope.row.recipientStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleViewDetails(scope.row)">
              查看详情
            </el-button>
            <el-button type="text" size="small" @click="handleAddFollowup(scope.row)">
              添加随访
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-descriptions title="手术信息" :column="descriptionColumn" border size="small">
        <el-descriptions-item label="手术医生">{{ form.operationdoctor || '-' }}</el-descriptions-item>
        <el-descriptions-item label="手术开始时间">{{ form.operationbegtime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="手术结束时间">{{ form.operationendtime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="腹主动脉插管时间">{{ form.abdominalaortacannulatime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="腹主动脉灌注时间">{{ form.abdominalaortaperfusiontime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="门静脉插管时间">{{ form.portalveincannulatime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="门静脉灌注时间">{{ form.portalveinperfusiontime || '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="协调员信息" :column="descriptionColumn" border size="small">
        <el-descriptions-item label="进手术室时间">{{ form.coordinatorInOperating || '-' }}</el-descriptions-item>
        <el-descriptions-item label="出手术室时间">{{ form.coordinatorOutOperating || '-' }}</el-descriptions-item>
        <el-descriptions-item label="是否默哀缅怀">{{ form.isspendremember === 1 ? '是' : form.isspendremember === 0 ? '否' : '-' }}</el-descriptions-item>
        <el-descriptions-item label="恢复遗体仪容">{{ form.isrestoreremains === 1 ? '是' : form.isrestoreremains === 0 ? '否' : '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="负责人信息" :column="descriptionColumn" border size="small">
        <el-descriptions-item label="负责人姓名">{{ form.responsibleusername || '-' }}</el-descriptions-item>
        <el-descriptions-item label="协调员一">{{ form.coordinatedusernameo || '-' }}</el-descriptions-item>
        <el-descriptions-item label="协调员二">{{ form.coordinatedusernamet || '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="获取机构信息" :column="descriptionColumn" border size="small">
        <el-descriptions-item label="获取机构名称">{{ form.gainhospitalname || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 行动按钮 -->
    <template #footer>
      <div class="action-buttons" style="margin-top: 20px; text-align: center;">
        <el-button type="primary" @click="handleGenerateReport">
          生成利用报告
        </el-button>
        <el-button type="success" @click="handleCompleteUtilization">
          完成器官利用
        </el-button>
        <el-button type="warning" @click="handleStatistics">
          统计数据分析
        </el-button>
    <!-- 器官获取记录部分 -->
    <el-card class="procurement-card">
      <div slot="header" class="clearfix">
        <span class="detail-title">器官获取记录</span>
        <div style="float: right;">
          <dict-tag
            :options="dict.type.Obtain_status"
            :value="form.witnessState"
          />
        </div>
      </div>
    </template>
  </base-stage>

      <el-descriptions title="捐献器官" :column="1" border size="small" style="margin-bottom: 16px;">
        <el-descriptions-item label="捐献器官">
          <template v-if="selectedOrgans && selectedOrgans.length">
            <span v-for="(v, i) in selectedOrgans" :key="v">
              {{ getOrganLabel(v) }}<span v-if="i < selectedOrgans.length - 1">、</span>
            </span>
          </template>
          <template v-else>-</template>
        </el-descriptions-item>
      </el-descriptions>

      <el-table :data="displayOrgans" v-loading="loading" border style="width: 100%">
        <el-table-column label="器官名称" align="center" prop="organname" />
        <el-table-column label="获取开始时间" align="center" prop="organStartTime" />
        <el-table-column label="器官离体时间" align="center" prop="organgettime" />
        <el-table-column label="获取医院" align="center" prop="gainhospitalname" show-overflow-tooltip />
        <el-table-column label="获取医师" align="center" prop="organgetdoct" />
        <el-table-column label="说明" align="center" prop="notgetreason" min-width="200" show-overflow-tooltip />
      </el-table>

      <div v-if="!displayOrgans.length" class="empty-procurement">
        <el-empty description="暂无获取记录" :image-size="80" />
      </div>
    </el-card>

    <!-- 附件管理部分 - 分类Tab展示 -->
    <el-card class="attachment-card">
      <div slot="header" class="clearfix">
        <span class="detail-title">相关附件</span>
      </div>

      <!-- 附件列表 - 分类Tab展示 -->
      <el-tabs v-model="activeTab" type="border-card">
        <el-tab-pane
          v-for="category in categories"
          :key="category"
          :label="category + '(' + getCategoryCount(category) + ')'"
          :name="category"
        >
          <el-table
            :data="getCategoryFiles(category)"
            style="width: 100%"
            size="small"
            border
          >
            <el-table-column label="文件名" min-width="180">
              <template #default="scope">
                <i
                  class="el-icon-document"
                  style="margin-right: 8px; color: #409EFF;"
                ></i>
                <span class="file-name">{{ scope.row.fileName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="分类" width="150">
              <template #default="scope">
                <span>{{ scope.row.fileType || '未分类' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="文件类型" width="100">
              <template #default="scope">
                <el-tag size="small">{{
                  getFileTypeText(scope.row.fileName)
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="上传时间" width="160">
              <template #default="scope">
                <span>{{ formatDateTime(scope.row.uploadTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="文件大小" width="100">
              <template #default="scope">
                <span>{{ formatFileSize(scope.row.fileSize) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100" fixed="right">
              <template #default="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handlePreview(scope.row)"
                  >预览</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div
            v-if="getCategoryFiles(category).length === 0"
            style="text-align:center; padding:20px; color:#909399;"
          >
            暂无附件
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 文件预览弹窗 -->
    <FilePreviewDialog
      :visible="previewVisible"
      :file="currentPreviewFile"
      @close="previewVisible = false"
      @download="handleDownload"
    />
  </div>
</template>

<script>
import BaseStage from './BaseStage.vue';
import * as echarts from 'echarts';
import { witnessList, witnessadd, witnessedit } from "@/api/businessApi";
import FilePreviewDialog from "@/components/FilePreviewDialog";
import CaseBasicInfo from "@/components/CaseBasicInfo";
import { getToken } from "@/utils/auth";
import dayjs from "dayjs";
import readonlyDescriptionsMixin from "./readonlyDescriptionsMixin";

export default {
  name: 'OrganUtilizationStage',
  components: { BaseStage },
  name: "OrganProcurementDetail",
  components: {
    FilePreviewDialog,
    CaseBasicInfo
  },
  mixins: [readonlyDescriptionsMixin],
  dicts: [
    "sys_BloodType",
    "Geta_hospital",
    "sys_DonationCategory",
    "sys_Organ",
    "Obtain_status"
  ],
  props: {
    stageData: {
      type: Object,
      default: () => ({})
    },
    caseInfo: {
      type: Object,
      default: () => ({})
    infoid: {
      type: String,
      default: true
    }
  },
  data() {
    return {
      chartView: 'bar',
      caseId: null,
      // 表单数据
      form: {
        id: undefined,
        infoid: undefined,
        name: "",
        inpatientno: "",
        witnessState: "2",
        caseNo: "",
        donorno: "",
        treatmenthospitalname: "",
        treatmenthospitalno: "",
        sex: "",
        age: "",
        bloodtype: "",
        idcardno: "",
        diagnosisname: "",
        coordinatorName: "",
        gainhospitalno: "",
        gainhospitalname: "",
        deathtime: "",
        deathreason: "",
        deathjudgedocto: "",
        deathjudgedoctt: "",
        deathjudgeannex: "",
        operationbegtime: "",
        operationendtime: "",
        operationdoctor: "",
        isspendremember: 1,
        isrestoreremains: 1,
        rememberannex: "",
        responsibleuserid: "",
        responsibleusername: "",
        coordinateduserido: "",
        coordinatedusernameo: "",
        coordinateduseridt: "",
        coordinatedusernamet: "",
        abdominalaortacannulatime: "",
        abdominalaortaperfusiontime: "",
        portalveincannulatime: "",
        portalveinperfusiontime: "",
        pulmonaryarterycannulatime: "",
        pulmonaryarteryperfusiontime: "",
        aortacannulatime: "",
        aortaperfusiontime: "",
        organdonation: "",
        organdonationOther: "",
        donationcategory: "",
        coordinatorInOperating: "",
        coordinatorOutOperating: "",
        coordinatorSign: "",
        coordinatorSignTime: "",
        attachments: []
      },
      activeTab: "原表拍照", // 当前激活的附件分类Tab
      presetCategories: [
        "原表拍照",
        "伦理审查材料",
        "死亡判定材料",
        "默哀仪式照片",
        "捐献见证视频"
      ], // 预设分类
      organExpansionMap: {
        C64: { subItems: ["C64L", "C64R"], subNames: ["左肾", "右肾"] },
        C34: { subItems: ["C34L", "C34R"], subNames: ["左肺", "右肺"] }
      },
      // 表单验证规则
      rules: {
        name: [
          { required: true, message: "捐献者姓名不能为空", trigger: "blur" }
        ],
        diagnosisname: [
          { required: true, message: "疾病诊断不能为空", trigger: "blur" }
        ],
        donationcategory: [
          { required: true, message: "捐献类别不能为空", trigger: "change" }
        ],
        operationdoctor: [
          { required: true, message: "手术医生不能为空", trigger: "blur" }
        ]
      },
      // 获取记录验证规则
      procurementRules: {},
      // 保存加载状态
      saveLoading: false,
      confirmLoading: false,
      // 加载状态
      loading: false,
      utilizationStats: {
        transplanted: 3,
        inProgress: 0,
        failed: 0,
        successRate: 95,
        utilizationRate: 100,
        survivalRate: 92
      // 选中的器官
      selectedOrgans: [],
      // 医院列表
      hospitalList: [],
      // 获取记录数据
      procurementData: {
        serviceDonationwitnessorgans: []
      },
      timeTracking: {
        procurementToTransplant: '4.5小时',
        coldIschemiaTime: '肝脏:6h,肾脏:8h,心脏:3h',
        surgeryDuration: '肝脏:4h,肾脏:3h,心脏:5h',
        icuStay: '肝脏:3天,肾脏:2天,心脏:5天'
      // 附件数据
      attachments: [],
      // 上传相关
      uploadAction: process.env.VUE_APP_BASE_API + "/common/upload",
      headers: {
        Authorization: "Bearer " + getToken()
      },
      qualityStats: {
        organQuality: 4.5,
        surgeryQuality: 4.8,
        followupCompletionRate: 85
      },
      organUtilizationData: [
        {
          organName: '肝脏',
          status: '移植成功',
          recipientName: '王先生',
          recipientAge: 45,
          recipientGender: '男',
          hospital: '北京协和医院移植中心',
          transplantTime: '2025-12-04 16:00:00',
          followupCount: 3,
          recipientStatus: '恢复良好'
        },
        {
          organName: '肾脏',
          status: '移植成功',
          recipientName: '李女士',
          recipientAge: 38,
          recipientGender: '女',
          hospital: '上海瑞金医院移植中心',
          transplantTime: '2025-12-04 17:30:00',
          followupCount: 2,
          recipientStatus: '稳定恢复'
        },
        {
          organName: '心脏',
          status: '移植成功',
          recipientName: '陈先生',
          recipientAge: 52,
          recipientGender: '男',
          hospital: '广州中山医院心脏中心',
          transplantTime: '2025-12-04 18:15:00',
          followupCount: 1,
          recipientStatus: '密切观察'
        }
      ],
      // 图表实例
      organDistributionChart: null,
      successTrendChart: null,
      followupStatsChart: null,
      complicationChart: null
      uploadDialogVisible: false,
      uploadLoading: false,
      tempFileList: [],
      currentUploadCategory: "",
      // 编辑对话框
      editDialogVisible: false,
      currentRecord: {},
      currentEditIndex: -1,
      // 文件预览相关
      previewVisible: false,
      currentPreviewFile: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts();
    });
  computed: {
    // 当前用户信息
    currentUser() {
      return JSON.parse(sessionStorage.getItem("user") || "{}");
    },
    displayOrgans() {
      return (this.procurementData.serviceDonationwitnessorgans || []).filter(
        item => item.delFlag !== 1
      );
    },
    categories() {
      // 始终返回所有预设分类 + 未分类，无论是否有数据
      return [
        "原表拍照",
        "伦理审查材料",
        "死亡判定材料",
        "默哀仪式照片",
        "捐献见证视频",
        "未分类"
      ];
    },
    organReverseMap() {
      const map = {};
      for (const key in this.organExpansionMap) {
        const { subItems } = this.organExpansionMap[key];
        subItems.forEach(item => {
          map[item] = key;
        });
      }
      return map;
    },
    // 不完整的记录数量
    incompleteRecords() {
      if (!this.procurementData.serviceDonationwitnessorgans) return 0;
      return this.procurementData.serviceDonationwitnessorgans.filter(
        record =>
          !record.organStartTime ||
          !record.organgettime ||
          !record.gainhospitalno ||
          !record.organgetdoct
      ).length;
    },
    // 唯一医院数量
    uniqueHospitals() {
      if (!this.procurementData.serviceDonationwitnessorgans) return 0;
      const hospitals = this.procurementData.serviceDonationwitnessorgans
        .map(record => record.gainhospitalno)
        .filter(Boolean);
      return new Set(hospitals).size;
    },
    // 获取器官字典
    organDict() {
      return this.dict.type.sys_Organ || [];
    }
  },
  beforeDestroy() {
    // 销毁图表实例
    if (this.organDistributionChart) {
      this.organDistributionChart.dispose();
    }
    if (this.successTrendChart) {
      this.successTrendChart.dispose();
    }
    if (this.followupStatsChart) {
      this.followupStatsChart.dispose();
    }
    if (this.complicationChart) {
      this.complicationChart.dispose();
    }
  created() {
    this.caseId = this.infoid;

    this.initData();
  },
  methods: {
    // 初始化图表
    initCharts() {
      this.initOrganDistributionChart();
      this.initSuccessTrendChart();
      this.initFollowupStatsChart();
      this.initComplicationChart();
    // 根据字典value获取label
    getOrganLabel(organValue) {
      const dictItem = this.organDict.find(item => item.value === organValue);
      return dictItem ? dictItem.label : organValue;
    },

    // 初始化器官分布图表
    initOrganDistributionChart() {
      this.organDistributionChart = echarts.init(this.$refs.organDistributionChart);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: ['肝脏', '肾脏', '心脏', '肺脏', '角膜', '其他']
        },
        series: [
          {
            name: '器官利用',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 35, name: '肝脏' },
              { value: 30, name: '肾脏' },
              { value: 15, name: '心脏' },
              { value: 10, name: '肺脏' },
              { value: 8, name: '角膜' },
              { value: 2, name: '其他' }
            ]
          }
        ]
      };
      this.organDistributionChart.setOption(option);
    },
    // 初始化数据
    initData() {
      const infoid = this.infoid;

    // 初始化成功率趋势图表
    initSuccessTrendChart() {
      this.successTrendChart = echarts.init(this.$refs.successTrendChart);
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['肝脏移植', '肾脏移植', '心脏移植', '平均成功率']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: {
          type: 'value',
          min: 80,
          max: 100
        },
        series: [
          {
            name: '肝脏移植',
            type: 'line',
            smooth: true,
            data: [92, 93, 94, 95, 96, 95, 96]
          },
          {
            name: '肾脏移植',
            type: 'line',
            smooth: true,
            data: [94, 95, 95, 96, 95, 96, 97]
          },
          {
            name: '心脏移植',
            type: 'line',
            smooth: true,
            data: [88, 89, 90, 91, 92, 91, 92]
          },
          {
            name: '平均成功率',
            type: 'line',
            smooth: true,
            lineStyle: {
              type: 'dashed'
            },
            data: [91.3, 92.3, 93, 94, 94.3, 94, 95]
          }
        ]
      };
      this.successTrendChart.setOption(option);
    },
      if (!infoid) {
        this.$message.error("缺少必要的路由参数 infoid");
        this.$router.back();
        return;
      }

    // 初始化随访统计图表
    initFollowupStatsChart() {
      this.followupStatsChart = echarts.init(this.$refs.followupStatsChart);
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['计划随访', '已完成', '逾期未完成']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['1个月', '3个月', '6个月', '1年', '2年', '5年']
        },
        series: [
          {
            name: '计划随访',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 60]
          },
          {
            name: '已完成',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [115, 125, 95, 120, 85, 55]
          },
          {
            name: '逾期未完成',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [5, 7, 6, 14, 5, 5]
          }
        ]
      };
      this.followupStatsChart.setOption(option);
    },
      this.form.infoid = infoid;
      // this.generateDonorNo();

    // 初始化并发症分析图表
    initComplicationChart() {
      this.complicationChart = echarts.init(this.$refs.complicationChart);
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        radar: {
          indicator: [
            { name: '感染风险', max: 100 },
            { name: '排斥反应', max: 100 },
            { name: '血管并发症', max: 100 },
            { name: '胆道并发症', max: 100 },
            { name: '代谢异常', max: 100 },
            { name: '其他并发症', max: 100 }
          ]
        },
        series: [
          {
            type: 'radar',
            data: [
              {
                value: [85, 90, 78, 82, 75, 70],
                name: '肝脏移植',
                areaStyle: {}
              },
              {
                value: [78, 85, 72, 65, 80, 68],
                name: '肾脏移植',
                areaStyle: {}
              },
              {
                value: [90, 88, 85, 60, 82, 75],
                name: '心脏移植',
                areaStyle: {}
              }
            ]
          }
        ]
      };
      this.complicationChart.setOption(option);
    },
      if (infoid) {
        this.getDetail(infoid);
      }

    // 更新图表视图
    updateCharts() {
      if (this.chartView === 'bar') {
        this.updateToBarChart();
      } else {
        this.initOrganDistributionChart(); // 切回饼图
      this.getHospitalData();
    },
    getOrganNameByNo(organno) {
      // 检查是否在映射的子项中
      for (const key in this.organExpansionMap) {
        const { subItems, subNames } = this.organExpansionMap[key];
        const idx = subItems.indexOf(organno);
        if (idx !== -1) {
          return subNames[idx];
        }
      }
      // 否则从字典中获取
      return this.getOrganLabel(organno);
    },
    // 获取详情
    async getDetail(infoid) {
      this.loading = true;
      try {
        const response = await witnessList({ infoid });
        if (
          response.code === 200 &&
          response.data &&
          response.data.length > 0
        ) {
          const data = response.data[0];
          if (!data.witnessState || data.witnessState == 1) {
            data.witnessState = "2";
          }

          // 填充表单数据
          Object.assign(this.form, data);

          // 初始化附件
          if (this.form.deathjudgeannex) {
            const parsed = JSON.parse(this.form.deathjudgeannex);
            this.attachments = parsed.map(item => ({
              ...item,
              fileType: item.fileType || "" // 默认空字符串表示未分类
            }));
            this.form.attachments = this.attachments;
          } else {
            this.attachments = [];
          }

          // 处理捐献器官字段
          if (data.organdonation) {
            const organArray = Array.isArray(data.organdonation)
              ? data.organdonation
              : (data.organdonation || "").split(",").filter(item => item);
            this.selectedOrgans = organArray;
            this.form.organdonationOther = data.organdonationOther || "";
          }

          // 处理器官获取记录
          if (data.serviceDonationwitnessorgans) {
            this.procurementData.serviceDonationwitnessorgans = Array.isArray(
              data.serviceDonationwitnessorgans
            )
              ? data.serviceDonationwitnessorgans
              : [];
          }

          this.$message.success("数据加载成功");
          this.syncOrgansFromSelection();
        } else {
          this.$message.warning("未找到对应的器官获取数据");
        }
      } catch (error) {
        console.error("获取器官获取详情失败:", error);
        this.$message.error("获取详情失败");
      } finally {
        this.loading = false;
      }
    },
    syncOrgansFromSelection() {
      const records = this.procurementData.serviceDonationwitnessorgans || [];
      const targetNos = [];
      this.selectedOrgans.forEach(val => {
        if (this.organExpansionMap[val]) {
          targetNos.push(...this.organExpansionMap[val].subItems);
        } else {
          targetNos.push(val);
        }
      });

    // 更新为柱状图
    updateToBarChart() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
      // 新增或恢复
      targetNos.forEach(no => {
        const existing = records.find(r => r.organno === no);
        if (existing) {
          if (existing.delFlag === 1) {
            existing.delFlag = 0; // 恢复显示
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['肝脏', '肾脏', '心脏', '肺脏', '角膜', '其他']
        },
        yAxis: {
          type: 'value',
          name: '数量'
        },
        series: [
          {
            name: '器官利用数量',
            type: 'bar',
            data: [35, 30, 15, 10, 8, 2],
            itemStyle: {
              color: function(params) {
                const colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'];
                return colorList[params.dataIndex];
              }
        } else {
          records.push({
            id: null,
            organname: this.getOrganNameByNo(no),
            organno: no,
            organStartTime: "",
            organgettime: "",
            gainhospitalno: "",
            gainhospitalname: "",
            organgetdoct: "",
            assistant: "",
            procurementNurse: "",
            operatingRoomNurse: "",
            anesthesiologist: "",
            organstate: "1",
            notgetreason: "",
            delFlag: 0
          });
        }
      });

      // （可选）如果加载时后端返回了 delFlag=1 的记录，但实际应该显示，强制重置
      records.forEach(r => {
        if (r.delFlag === 1) r.delFlag = 0;
      });

      this.form.organdonation = this.selectedOrgans.join(",");
    },
    // 获取医院数据
    async getHospitalData() {
      try {
        // TODO: 替换为实际的医院列表接口
        // 暂时使用模拟数据
        this.hospitalList = [
          { hospitalNo: "H001", hospitalName: "北京协和医院" },
          { hospitalNo: "H002", hospitalName: "上海华山医院" },
          { hospitalNo: "H003", hospitalName: "广州中山医院" },
          { hospitalNo: "H004", hospitalName: "武汉同济医院" },
          { hospitalNo: "H005", hospitalName: "成都华西医院" }
        ];
      } catch (error) {
        console.error("获取医院数据失败:", error);
        this.$message.error("获取医院数据失败");
      }
    },
    // 移植医院模糊搜索
    queryHospitalSearch(queryString, cb) {
      const hospitals = this.dict.type.Geta_hospital || [];
      const results = queryString
        ? hospitals.filter(item =>
            item.label.toLowerCase().includes(queryString.toLowerCase())
          )
        : hospitals;

      // el-autocomplete 需要 value 字段
      cb(results.map(item => ({ value: item.label })));
    },
    // 器官选择状态变化
    async handleOrganSelectionChange(selectedValues) {
      // 1. 处理互斥逻辑（修改 this.selectedOrgans）
      this.handleExclusiveSelections(selectedValues);

      const finalSelected = this.selectedOrgans;
      const records = this.procurementData.serviceDonationwitnessorgans || [];

      // 2. 构建目标器官编号列表（展开组合器官）
      const targetOrganNos = [];
      finalSelected.forEach(val => {
        if (this.organExpansionMap[val]) {
          targetOrganNos.push(...this.organExpansionMap[val].subItems);
        } else {
          targetOrganNos.push(val);
        }
      });

      // 3. 新增或恢复目标器官记录（无弹窗）
      targetOrganNos.forEach(no => {
        const existing = records.find(r => r.organno === no);
        if (existing) {
          if (existing.delFlag === 1) {
            existing.delFlag = 0; // 恢复显示
          }
        } else {
          records.push({
            id: null,
            organname: this.getOrganNameByNo(no),
            organno: no,
            organStartTime: "",
            organgettime: "",
            gainhospitalno: "",
            gainhospitalname: "",
            organgetdoct: "",
            assistant: "",
            procurementNurse: "",
            operatingRoomNurse: "",
            anesthesiologist: "",
            organstate: "1",
            notgetreason: "",
            delFlag: 0
          });
        }
      });

      // 4. 找出需要取消的记录（不在目标集合中）
      const toRemove = records.filter(r => !targetOrganNos.includes(r.organno));
      const toRemoveSaved = toRemove.filter(r => r.id); // 已保存，需确认
      const toRemoveUnsaved = toRemove.filter(r => !r.id); // 未保存，直接移除

      // 4.1 直接移除未保存的记录
      toRemoveUnsaved.forEach(r => {
        const idx = records.indexOf(r);
        if (idx !== -1) records.splice(idx, 1);
      });

      // 4.2 处理已保存的记录：弹窗确认
      if (toRemoveSaved.length > 0) {
        const organNames = toRemoveSaved.map(r => r.organname).join("、");
        try {
          await this.$confirm(
            `您确定要取消以下已保存的器官获取记录吗？\n${organNames}\n取消后，这些记录将从列表中移除（数据仍保留，可恢复）。`,
            "提示",
            {
              confirmButtonText: "确定移除",
              cancelButtonText: "取消",
              type: "warning"
            }
          }
        ]
      };
      this.organDistributionChart.setOption(option);
    },

    // 获取状态文本
    getStatusText() {
      const status = this.stageData.status;
      return status === 'completed' ? '已完成' :
             status === 'in_progress' ? '进行中' : '未开始';
    },

    // 获取警告类型
    getAlertType() {
      const status = this.stageData.status;
      return status === 'completed' ? 'success' :
             status === 'in_progress' ? 'warning' : 'info';
    },

    // 获取警告描述
    getAlertDescription() {
      const status = this.stageData.status;
      if (status === 'completed') {
        return '器官利用阶段已完成，所有器官均已成功移植并开始随访';
      } else if (status === 'in_progress') {
        return '器官利用进行中，移植手术已完成，正在进行术后随访';
          );
          // 用户确认：标记 delFlag=1
          toRemoveSaved.forEach(r => {
            r.delFlag = 1;
          });
        } catch (error) {
          // 用户取消：恢复选中状态
          const parentToRestore = new Set();
          toRemoveSaved.forEach(r => {
            const parent = this.organReverseMap[r.organno];
            if (parent) {
              parentToRestore.add(parent);
            } else {
              parentToRestore.add(r.organno);
            }
          });
          parentToRestore.forEach(val => {
            if (!this.selectedOrgans.includes(val)) {
              this.selectedOrgans.push(val);
            }
          });
          this.$message.info("已取消删除操作");
          // 更新表单字段（保持一致性）
          this.form.organdonation = this.selectedOrgans.join(",");
          return; // 退出方法，避免继续执行
        }
      }
      return '等待开始器官利用流程';

      // 5. 更新表单字段
      this.form.organdonation = this.selectedOrgans.join(",");
    },

    // 获取移植状态标签
    getTransplantStatusTag(status) {
      const map = {
        '移植成功': 'success',
        '移植中': 'warning',
        '移植失败': 'danger'
      };
      return map[status] || 'info';
    // 处理互斥选择
    handleExclusiveSelections(selectedValues) {
      // 双肾与左右肾互斥
      if (selectedValues.includes("C64")) {
        this.selectedOrgans = selectedValues.filter(
          item => item !== "C64L" && item !== "C64R"
        );
      } else if (
        selectedValues.includes("C64L") ||
        selectedValues.includes("C64R")
      ) {
        this.selectedOrgans = selectedValues.filter(item => item !== "C64");
      }

      // 全肺与左右肺互斥
      if (selectedValues.includes("C34")) {
        this.selectedOrgans = selectedValues.filter(
          item => item !== "C34L" && item !== "C34R"
        );
      } else if (
        selectedValues.includes("C34L") ||
        selectedValues.includes("C34R")
      ) {
        this.selectedOrgans = selectedValues.filter(item => item !== "C34");
      }
    },

    // 获取受体状态标签
    getRecipientStatusTag(status) {
      const map = {
        '恢复良好': 'success',
        '稳定恢复': 'warning',
        '密切观察': 'danger'
      };
      return map[status] || 'info';
    },
    // 创建器官记录
    createOrganRecord(organValue) {
      const organName = this.getOrganLabel(organValue);

    // 查看详情
    handleViewDetails(row) {
      this.$message.info(`查看${row.organName}移植详情`);
    },

    // 添加随访
    handleAddFollowup(row) {
      this.$message.info(`为${row.recipientName}添加随访记录`);
    },

    // 生成报告
    handleGenerateReport() {
      this.$message.info('生成器官利用分析报告');
    },

    // 完成利用
    handleCompleteUtilization() {
      this.$confirm('确认完成器官利用阶段吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        this.$message.success('器官利用阶段已完成');
      this.procurementData.serviceDonationwitnessorgans.push({
        id: null,
        organname: organName,
        organno: organValue,
        organStartTime: "",
        organgettime: "",
        gainhospitalno: "",
        gainhospitalname: "",
        organgetdoct: "",
        assistant: "",
        procurementNurse: "",
        operatingRoomNurse: "",
        anesthesiologist: "",
        organstate: "1",
        notgetreason: ""
      });
    },

    // 统计数据分析
    handleStatistics() {
      this.$message.info('打开统计分析面板');
    // 医院选择变化
    handleHospitalChange(row, hospitalNo) {
      const hospital = this.hospitalList.find(
        item => item.hospitalNo === hospitalNo
      );
      if (hospital) {
        row.gainhospitalname = hospital.hospitalName;
      }
    },
    // 编辑获取记录
    handleEditProcurement(row) {
      const index = this.procurementData.serviceDonationwitnessorgans.findIndex(
        item => item.organno === row.organno
      );
      if (index !== -1) {
        this.currentRecord = { ...row };
        this.currentEditIndex = index;
        this.editDialogVisible = true;
      }
    },
    // 确认编辑
    handleEditConfirm() {
      if (this.currentEditIndex !== -1) {
        this.procurementData.serviceDonationwitnessorgans[
          this.currentEditIndex
        ] = {
          ...this.currentRecord
        };
        this.$message.success("获取记录更新成功");
        this.editDialogVisible = false;
      }
    },
    // 器官行样式
    getOrganRowClassName({ row }) {
      if (
        !row.organStartTime ||
        !row.organgettime ||
        !row.gainhospitalno ||
        !row.organgetdoct
      ) {
        return "warning-row";
      }
      return "";
    },
    // 保存基本信息
    async handleSave() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.saveLoading = true;
          try {
            console.log(this.procurementData.serviceDonationwitnessorgans);

            const saveData = {
              ...this.form,
              deathjudgeannex: JSON.stringify(this.attachments),
              organdonation: this.selectedOrgans.join(","),
              serviceDonationwitnessorganList:
                this.procurementData.serviceDonationwitnessorgans || [],
              serviceDonationwitnessorgans:
                this.procurementData.serviceDonationwitnessorgans || []
            };
            console.log(saveData.serviceDonationwitnessorganList);
            console.log(saveData.serviceDonationwitnessorgans);

            const apiMethod = this.form.id ? witnessedit : witnessadd;
            const response = await apiMethod(saveData);

            if (response.code === 200) {
              this.$message.success("保存成功");
              if (!this.form.id && response.data && response.data.id) {
                this.form.id = response.data.id;
                this.$router.replace({
                  query: { ...this.$route.query, id: this.form.id }
                });
              }
            } else {
              this.$message.error("保存失败：" + (response.msg || "未知错误"));
            }
          } catch (error) {
            console.error("保存失败:", error);
            this.$message.error("保存失败");
          } finally {
            this.saveLoading = false;
          }
        }
      });
    },
    // 保存获取记录
    async handleSaveProcurement() {
      if (!this.form.id) {
        this.$message.warning("请先保存基本信息");
        return;
      }

      this.saveLoading = true;
      try {
        const saveData = {
          ...this.form,
          attachments: this.attachments,
          organdonation: this.selectedOrgans.join(","),
          serviceDonationwitnessorgans:
            this.procurementData.serviceDonationwitnessorgans || []
        };

        const response = await witnessedit(saveData);

        if (response.code === 200) {
          this.$message.success("获取记录保存成功");
        } else {
          this.$message.error(
            "保存获取记录失败：" + (response.msg || "未知错误")
          );
        }
      } catch (error) {
        console.error("保存获取记录失败:", error);
        this.$message.error("保存获取记录失败");
      } finally {
        this.saveLoading = false;
      }
    },
    // 确认完成获取
    async handleConfirmProcurement() {
      if (this.incompleteRecords > 0) {
        this.$message.warning("请先完善所有获取记录的信息");
        return;
      }

      this.$confirm("确认完成器官获取吗？完成后将无法修改获取信息。", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          this.confirmLoading = true;
          this.form.witnessState = "3";
          this.form.operationendtime =
            this.form.operationendtime ||
            new Date()
              .toISOString()
              .replace("T", " ")
              .substring(0, 19);

          try {
            const saveData = {
              ...this.form,
              attachments: this.attachments,
              organdonation: this.selectedOrgans.join(","),
              serviceDonationwitnessorgans:
                this.procurementData.serviceDonationwitnessorgans || []
            };

            const response = await witnessedit(saveData);

            if (response.code === 200) {
              this.$message.success("器官获取已完成");
            } else {
              this.$message.error(
                "确认获取失败：" + (response.msg || "未知错误")
              );
              this.form.witnessState = "2";
              this.form.operationendtime = "";
            }
          } catch (error) {
            console.error("确认获取失败:", error);
            this.$message.error("确认获取失败");
            this.form.witnessState = "2";
            this.form.operationendtime = "";
          } finally {
            this.confirmLoading = false;
          }
        })
        .catch(() => {});
    },
    // 确认获取按钮别名
    handleProcure() {
      this.handleConfirmProcurement();
    },

    // 导出数据
    exportData() {
      this.$message.info('导出器官利用数据');
    // ===== 附件相关方法 =====
    // 打开上传对话框
    openUploadDialog(category) {
      this.currentUploadCategory = category;
      this.tempFileList = [];
      this.uploadDialogVisible = true;
      this.$nextTick(() => {
        if (this.$refs.uploadRef) {
          this.$refs.uploadRef.clearFiles();
        }
      });
    },

    // 上传前校验
    beforeUpload(file) {
      const allowedTypes = [
        "application/pdf",
        "image/jpeg",
        "image/png",
        "application/msword",
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      ];
      const maxSize = 10 * 1024 * 1024;
      const isTypeOk =
        allowedTypes.includes(file.type) ||
        file.name.endsWith(".pdf") ||
        file.name.endsWith(".jpg") ||
        file.name.endsWith(".jpeg") ||
        file.name.endsWith(".png") ||
        file.name.endsWith(".doc") ||
        file.name.endsWith(".docx");
      if (!isTypeOk) {
        this.$message.error(
          "文件格式不支持，请上传pdf、jpg、png、doc或docx格式文件"
        );
        return false;
      }
      if (file.size > maxSize) {
        this.$message.error("文件大小不能超过10MB");
        return false;
      }
      return true;
    },

    // 文件选择变化
    handleFileChange(file, fileList) {
      this.tempFileList = fileList;
    },

    // 临时移除
    handleTempRemove(file, fileList) {
      this.tempFileList = fileList;
    },

    // 上传成功处理
    handleUploadSuccess(response, file, fileList) {
      if (response.code !== 200) {
        this.$message.error(response.msg || "上传失败");
        return;
      }
      // 未分类对应空字符串，与展示/保存逻辑一致
      const category =
        this.currentUploadCategory === "未分类"
          ? ""
          : this.currentUploadCategory;
      const attachmentObj = {
        fileName: file.name,
        path: response.fileUrl || response.url || response.data || file.url,
        fileUrl: response.fileUrl || response.url || response.data || file.url,
        fileType: category,
        fileSize: file.size,
        uploadTime: dayjs().format("YYYY-MM-DD HH:mm:ss")
      };
      if (!Array.isArray(this.attachments)) {
        this.attachments = [];
      }
      this.attachments.push(attachmentObj);
      this.$message.success("文件上传成功");
      this.uploadLoading = false;
      this.uploadDialogVisible = false;
      this.tempFileList = [];
    },

    // 提交上传
    submitUpload() {
      if (this.tempFileList.length === 0) {
        this.$message.warning("请先选择要上传的文件");
        return;
      }
      this.uploadLoading = true;
      this.$refs.uploadRef.submit();
    },

    // 获取某分类的文件数量
    getCategoryCount(category) {
      return this.attachments.filter(item => {
        const type = item.fileType || "";
        if (category === "未分类") {
          return !this.presetCategories.includes(type);
        }
        return type === category;
      }).length;
    },

    // 获取某分类的文件列表
    getCategoryFiles(category) {
      return this.attachments.filter(item => {
        const type = item.fileType || "";
        if (category === "未分类") {
          return !this.presetCategories.includes(type);
        }
        return type === category;
      });
    },

    // 更新附件分类（下拉修改时触发）
    updateAttachmentCategory(row, newVal) {
      const target = this.attachments.find(item => item === row);
      if (target) {
        target.fileType = newVal;
        const currentTabHasFiles =
          this.getCategoryFiles(this.activeTab).length > 0;
        if (!currentTabHasFiles) {
          const firstCategory = this.categories[0];
          if (firstCategory) this.activeTab = firstCategory;
        }
      }
    },

    // 按文件对象删除（用于表格中的删除按钮）
    handleRemoveAttachmentByFile(file) {
      this.$confirm("确定要删除这个附件吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const index = this.attachments.findIndex(item => item === file);
          if (index > -1) {
            this.attachments.splice(index, 1);
            this.$message.success("附件删除成功");
          }
        })
        .catch(() => {});
    },

    // 文件预览
    handlePreview(file) {
      this.currentPreviewFile = {
        fileName: file.fileName,
        fileUrl: file.path || file.fileUrl,
        fileType: this.getFileType(file.fileName)
      };
      this.previewVisible = true;
    },

    // 文件下载
    handleDownload(file) {
      const fileUrl = file.path || file.fileUrl;
      const fileName = file.fileName;

      if (fileUrl) {
        const link = document.createElement("a");
        link.href = fileUrl;
        link.download = fileName;
        link.style.display = "none";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        this.$message.success("开始下载文件");
      } else {
        this.$message.warning("文件路径不存在，无法下载");
      }
    },

    /** 获取文件类型 */
    getFileType(fileName) {
      if (!fileName) return "other";
      const extension = fileName
        .split(".")
        .pop()
        .toLowerCase();
      const imageTypes = ["jpg", "jpeg", "png", "gif", "bmp", "webp"];
      const pdfTypes = ["pdf"];
      const officeTypes = ["doc", "docx", "xls", "xlsx", "ppt", "pptx"];
      if (imageTypes.includes(extension)) return "image";
      if (pdfTypes.includes(extension)) return "pdf";
      if (officeTypes.includes(extension)) return "office";
      return "other";
    },

    /** 获取文件图标颜色 */
    getFileIconColor(fileName) {
      const type = this.getFileType(fileName);
      const colorMap = {
        image: "#67C23A",
        pdf: "#F56C6C",
        office: "#409EFF",
        other: "#909399"
      };
      return colorMap[type] || "#909399";
    },

    /** 获取文件标签类型 */
    getFileTagType(fileName) {
      const type = this.getFileType(fileName);
      const typeMap = {
        image: "success",
        pdf: "danger",
        office: "primary",
        other: "info"
      };
      return typeMap[type] || "info";
    },

    /** 获取文件类型文本 */
    getFileTypeText(fileName) {
      const type = this.getFileType(fileName);
      const textMap = {
        image: "图片",
        pdf: "PDF",
        office: "文档",
        other: "其他"
      };
      return textMap[type] || "未知";
    },

    /** 检查是否可预览 */
    isPreviewable(fileName) {
      const type = this.getFileType(fileName);
      return ["image", "pdf"].includes(type);
    },

    /** 获取文件扩展名 */
    getFileExtension(filename) {
      return filename
        .split(".")
        .pop()
        .toLowerCase();
    },

    /** 格式化文件大小 */
    formatFileSize(bytes) {
      if (!bytes || bytes === 0) return "0 B";
      const k = 1024;
      const sizes = ["B", "KB", "MB", "GB"];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
    },

    /** 日期时间格式化 */
    formatDateTime(dateTime) {
      if (!dateTime) return "";
      try {
        const date = new Date(dateTime);
        if (isNaN(date.getTime())) return dateTime;
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0");
        const day = String(date.getDate()).padStart(2, "0");
        const hours = String(date.getHours()).padStart(2, "0");
        const minutes = String(date.getMinutes()).padStart(2, "0");
        return `${year}-${month}-${day} ${hours}:${minutes}`;
      } catch (error) {
        return dateTime;
      }
    }
  }
};
</script>

<style scoped>
.utilization-overview {
  padding: 10px 0;
.organ-procurement-detail {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.overview-item {
.detail-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e7ed;
}

.procurement-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e7ed;
}

.attachment-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #e4e7ed;
  padding: 20px;
  background: #fafafa;
}

.attachment-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
}

.overview-icon {
  font-size: 24px;
  margin-right: 15px;
}

.overview-content .value {
  font-size: 24px;
  font-weight: bold;
.attachment-title {
  font-weight: 600;
  color: #303133;
}

.overview-content .label {
.attachment-tip {
  font-size: 12px;
  color: #909399;
  margin-left: auto;
}

.success-stats, .time-tracking, .quality-assessment {
  padding: 10px 0;
.attachment-list {
  margin-top: 16px;
}

.success-item, .time-item, .quality-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.success-item .label, .time-item .label, .quality-item .label {
  color: #606266;
.list-title {
  font-weight: bold;
  margin-bottom: 12px;
  color: #303133;
  font-size: 14px;
  min-width: 80px;
}

.time-item .value {
.file-name {
  font-size: 13px;
  margin-left: 8px;
}

.detail-title {
  font-size: 18px;
  font-weight: 600;
  color: #409EFF;
  color: #303133;
  line-height: 1.4;
}

.chart-container {
  position: relative;
  min-height: 300px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
/* 统计信息样式 */
.procurement-stats {
  margin-top: 20px;
  padding: 15px;
  background: linear-gradient(135deg, #a6b2e7 0%, #8a66ad 100%);
  border-radius: 8px;
  color: white;
}

.card-header {
.stat-item {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  text-align: center;
}

.stat-label {
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.9);
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: white;
}

/* 空状态样式 */
.empty-procurement {
  text-align: center;
  padding: 40px 0;
  color: #909399;
  background: #fafafa;
  border-radius: 4px;
  margin: 20px 0;
}

/* 对话框底部按钮 */
.dialog-footer {
  margin-top: 20px;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

.dialog-footer .el-button {
  margin: 0 10px;
  min-width: 120px;
}

/* 表格行样式 */
:deep(.warning-row) {
  background-color: #fff7e6 !important;
}

:deep(.warning-row:hover) {
  background-color: #ffecc2 !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .organ-procurement-detail {
    padding: 10px;
  }

  .procurement-stats .el-col {
    margin-bottom: 10px;
  }
}
</style>