<template>
|
<base-stage :stage-data="stageData" :case-info="caseInfo">
|
<template #header>
|
<el-alert
|
:title="`器官获取 - ${getStatusText()}`"
|
:type="getAlertType()"
|
:description="getAlertDescription()"
|
show-icon
|
:closable="false"
|
/>
|
</template>
|
|
<el-row :gutter="20" style="margin-top: 20px;">
|
<el-col :span="8">
|
<el-card>
|
<div slot="header" class="card-header">
|
<span>获取手术信息</span>
|
</div>
|
<el-descriptions :column="1" border size="small">
|
<el-descriptions-item label="手术时间">
|
{{ formatTime(procurementDetails.surgeryTime) }}
|
</el-descriptions-item>
|
<el-descriptions-item label="手术地点">
|
{{ procurementDetails.location }}
|
</el-descriptions-item>
|
<el-descriptions-item label="主刀医生">
|
{{ procurementDetails.surgeon }}
|
</el-descriptions-item>
|
<el-descriptions-item label="麻醉医生">
|
{{ procurementDetails.anesthesiologist }}
|
</el-descriptions-item>
|
<el-descriptions-item label="手术状态">
|
<el-tag :type="procurementDetails.status === 'completed' ? 'success' : 'warning'">
|
{{ procurementDetails.status === 'completed' ? '已完成' : '进行中' }}
|
</el-tag>
|
</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
</el-col>
|
|
<el-col :span="8">
|
<el-card>
|
<div slot="header" class="card-header">
|
<span>器官获取统计</span>
|
</div>
|
<div class="procurement-stats">
|
<div class="stat-item">
|
<span class="label">计划获取:</span>
|
<span class="value">{{ procurementStats.planned }} 个</span>
|
</div>
|
<div class="stat-item">
|
<span class="label">实际获取:</span>
|
<span class="value">{{ procurementStats.actual }} 个</span>
|
</div>
|
<div class="stat-item">
|
<span class="label">获取成功率:</span>
|
<el-progress
|
:percentage="procurementStats.successRate"
|
:status="procurementStats.successRate > 90 ? 'success' : 'warning'"
|
/>
|
</div>
|
<div class="stat-item">
|
<span class="label">质量评估:</span>
|
<el-rate
|
v-model="procurementStats.qualityRating"
|
disabled
|
show-score
|
text-color="#ff9900"
|
score-template="{value} 星"
|
/>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
|
<el-col :span="8">
|
<el-card>
|
<div slot="header" class="card-header">
|
<span>保存与运输</span>
|
</div>
|
<div class="preservation-info">
|
<div class="info-item">
|
<span class="label">保存方式:</span>
|
<span>{{ preservationDetails.method }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">保存温度:</span>
|
<span>{{ preservationDetails.temperature }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">灌注液:</span>
|
<span>{{ preservationDetails.perfusionSolution }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">预计存活时间:</span>
|
<el-tag :type="getSurvivalTimeType()">
|
{{ preservationDetails.survivalTime }}
|
</el-tag>
|
</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="handleStartProcurement">
|
开始获取手术
|
</el-button>
|
</div>
|
<el-table :data="organProcurementData" 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="getProcurementStatusTag(scope.row.status)">
|
{{ scope.row.status }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="获取时间" width="160" align="center">
|
<template slot-scope="scope">
|
{{ formatTime(scope.row.procurementTime) || '-' }}
|
</template>
|
</el-table-column>
|
<el-table-column label="重量(g)" prop="weight" width="100" align="center" />
|
<el-table-column label="质量评估" width="120" align="center">
|
<template slot-scope="scope">
|
<el-rate
|
v-model="scope.row.qualityScore"
|
disabled
|
show-score
|
text-color="#ff9900"
|
score-template="{value}"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="灌注情况" width="100" align="center">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.perfusionStatus ? 'success' : 'warning'">
|
{{ scope.row.perfusionStatus ? '已完成' : '待灌注' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="保存方式" prop="preservationMethod" width="120" />
|
<el-table-column label="操作" width="150" align="center">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="handleViewOrgan(scope.row)">
|
查看详情
|
</el-button>
|
<el-button
|
v-if="scope.row.status !== '已获取'"
|
type="text"
|
size="small"
|
@click="handleRecordProcurement(scope.row)"
|
>
|
记录获取
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
|
<el-card style="margin-top: 20px;">
|
<div slot="header" class="card-header">
|
<span>手术记录与影像</span>
|
</div>
|
<el-tabs v-model="activeMedicalTab">
|
<el-tab-pane label="手术记录" name="surgeryRecord">
|
<div class="surgery-record">
|
<el-timeline>
|
<el-timeline-item
|
v-for="record in surgeryRecords"
|
:key="record.time"
|
:timestamp="formatTime(record.time)"
|
:type="record.type"
|
:icon="record.icon"
|
>
|
<p>{{ record.content }}</p>
|
<div v-if="record.images && record.images.length > 0" class="record-images">
|
<el-image
|
v-for="(img, index) in record.images"
|
:key="index"
|
:src="img"
|
:preview-src-list="record.images"
|
style="width: 100px; height: 100px; margin-right: 10px;"
|
/>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
</el-tab-pane>
|
|
<el-tab-pane label="器官影像" name="organImages">
|
<div class="organ-images">
|
<el-row :gutter="15">
|
<el-col v-for="organ in organImages" :key="organ.name" :span="8">
|
<el-card shadow="hover">
|
<div slot="header" class="image-header">
|
<span>{{ organ.name }}</span>
|
</div>
|
<el-image
|
:src="organ.image"
|
:preview-src-list="[organ.image]"
|
fit="cover"
|
style="width: 100%; height: 200px;"
|
/>
|
<div style="padding: 10px;">
|
<p>{{ organ.description }}</p>
|
<el-tag size="small">{{ organ.status }}</el-tag>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</el-tab-pane>
|
|
<el-tab-pane label="质量检测报告" name="qualityReport">
|
<div class="quality-report">
|
<el-table :data="qualityReports" border>
|
<el-table-column label="检测项目" prop="item" width="150" />
|
<el-table-column label="检测结果" prop="result" width="120">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.pass ? 'success' : 'danger'">
|
{{ scope.row.pass ? '合格' : '不合格' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="参考范围" prop="reference" width="120" />
|
<el-table-column label="检测值" prop="value" width="100" />
|
<el-table-column label="检测时间" width="160">
|
<template slot-scope="scope">
|
{{ formatTime(scope.row.testTime) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="检测医生" prop="doctor" width="120" />
|
</el-table>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
|
<template #footer>
|
<div class="action-buttons" style="margin-top: 20px; text-align: center;">
|
<el-button type="primary" @click="handleCompleteProcurement">
|
完成器官获取
|
</el-button>
|
<el-button type="success" @click="handleGenerateReport">
|
生成获取报告
|
</el-button>
|
<el-button type="warning" @click="handleUploadEvidence">
|
上传手术证据
|
</el-button>
|
</div>
|
</template>
|
</base-stage>
|
</template>
|
|
<script>
|
import BaseStage from './BaseStage.vue';
|
|
export default {
|
name: 'OrganProcurementStage',
|
components: { BaseStage },
|
props: {
|
stageData: {
|
type: Object,
|
default: () => ({})
|
},
|
caseInfo: {
|
type: Object,
|
default: () => ({})
|
}
|
},
|
data() {
|
return {
|
activeMedicalTab: 'surgeryRecord',
|
procurementDetails: {
|
surgeryTime: '2023-12-04 14:00:00',
|
location: '手术室一号',
|
surgeon: '张主任',
|
anesthesiologist: '王医生',
|
status: 'in_progress'
|
},
|
procurementStats: {
|
planned: 3,
|
actual: 0,
|
successRate: 0,
|
qualityRating: 0
|
},
|
preservationDetails: {
|
method: '低温机械灌注[9](@ref)',
|
temperature: '4°C',
|
perfusionSolution: 'UW保存液',
|
survivalTime: '肝脏12小时[1](@ref)'
|
},
|
organProcurementData: [
|
{
|
organName: '肝脏',
|
status: '获取中',
|
procurementTime: '',
|
weight: 1500,
|
qualityScore: 0,
|
perfusionStatus: false,
|
preservationMethod: '低温保存'
|
},
|
{
|
organName: '肾脏',
|
status: '待获取',
|
procurementTime: '',
|
weight: 0,
|
qualityScore: 0,
|
perfusionStatus: false,
|
preservationMethod: ''
|
},
|
{
|
organName: '心脏',
|
status: '待获取',
|
procurementTime: '',
|
weight: 0,
|
qualityScore: 0,
|
perfusionStatus: false,
|
preservationMethod: ''
|
}
|
],
|
surgeryRecords: [
|
{
|
time: '2023-12-04 14:00:00',
|
content: '手术开始，患者体位摆放，消毒铺巾',
|
type: 'primary',
|
icon: 'el-icon-video-play'
|
},
|
{
|
time: '2023-12-04 14:30:00',
|
content: '开腹手术，暴露腹腔器官',
|
type: 'success',
|
icon: 'el-icon-scissors'
|
},
|
{
|
time: '2023-12-04 15:00:00',
|
content: '肝脏游离，血管解剖分离',
|
type: 'warning',
|
icon: 'el-icon-medal'
|
}
|
],
|
organImages: [
|
{
|
name: '肝脏',
|
image: '/images/liver-procurement.jpg',
|
description: '获取的肝脏器官，形态完整',
|
status: '质量良好'
|
}
|
],
|
qualityReports: [
|
{
|
item: '肝功能酶学',
|
result: true,
|
reference: '<40 U/L',
|
value: '35 U/L',
|
testTime: '2023-12-04 16:00:00',
|
doctor: '李检验师'
|
},
|
{
|
item: '组织完整性',
|
result: true,
|
reference: '完整',
|
value: '完整',
|
testTime: '2023-12-04 16:15:00',
|
doctor: '张病理师'
|
}
|
]
|
};
|
},
|
methods: {
|
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 '器官获取手术进行中，请密切关注手术进展';
|
}
|
return '等待开始器官获取手术';
|
},
|
getProcurementStatusTag(status) {
|
const map = {
|
'已获取': 'success',
|
'获取中': 'warning',
|
'待获取': 'info'
|
};
|
return map[status] || 'info';
|
},
|
getSurvivalTimeType() {
|
return this.preservationDetails.survivalTime.includes('小时') ? 'success' : 'danger';
|
},
|
handleStartProcurement() {
|
this.$confirm('确认开始器官获取手术吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$message.success('器官获取手术已开始');
|
});
|
},
|
handleRecordProcurement(row) {
|
this.$prompt('请输入器官重量(g)', '记录器官获取', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
inputPattern: /^\d+$/,
|
inputErrorMessage: '请输入有效的重量数字'
|
}).then(({ value }) => {
|
row.status = '已获取';
|
row.procurementTime = new Date().toISOString().replace('T', ' ').substring(0, 19);
|
row.weight = parseInt(value);
|
row.qualityScore = 4.5;
|
row.perfusionStatus = true;
|
|
this.procurementStats.actual++;
|
this.procurementStats.successRate = Math.round(
|
(this.procurementStats.actual / this.procurementStats.planned) * 100
|
);
|
this.procurementStats.qualityRating = 4.2;
|
|
this.$message.success(`${row.organName}获取记录已保存`);
|
});
|
},
|
handleViewOrgan(row) {
|
this.$message.info(`查看${row.organName}的详细信息`);
|
},
|
handleCompleteProcurement() {
|
this.$confirm('确认完成所有器官获取吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'success'
|
}).then(() => {
|
this.$message.success('器官获取阶段已完成');
|
});
|
},
|
handleGenerateReport() {
|
this.$message.info('生成器官获取报告');
|
},
|
handleUploadEvidence() {
|
this.$message.info('上传手术证据材料');
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.procurement-stats, .preservation-info {
|
padding: 10px 0;
|
}
|
|
.stat-item, .info-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 15px;
|
padding: 8px 0;
|
border-bottom: 1px solid #f0f0f0;
|
}
|
|
.stat-item .label, .info-item .label {
|
color: #606266;
|
font-weight: 500;
|
min-width: 100px;
|
}
|
|
.stat-item .value {
|
font-weight: 600;
|
color: #409EFF;
|
}
|
|
.surgery-record {
|
padding: 20px;
|
}
|
|
.record-images {
|
margin-top: 10px;
|
}
|
|
.image-header {
|
font-weight: 600;
|
color: #303133;
|
}
|
|
.quality-report {
|
padding: 10px 0;
|
}
|
</style>
|
