parent
e2fe2c7696
commit
9f25ca8527
2 changed files with 516 additions and 2 deletions
@ -0,0 +1,514 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<!-- 1. 会议模式卡片 --> |
||||||
|
<el-card class="card" style="margin-bottom: 10px"> |
||||||
|
<div slot="header" class="card-header"> |
||||||
|
<span class="line"></span> |
||||||
|
会议模式 |
||||||
|
</div> |
||||||
|
<!-- 口令入会区域 --> |
||||||
|
<div class="join-area"> |
||||||
|
<el-input |
||||||
|
v-model="meetingCode" |
||||||
|
placeholder="请输入数字口令" |
||||||
|
class="join-input" |
||||||
|
@keyup.enter="joinMeeting" |
||||||
|
/> |
||||||
|
<el-button type="success" class="join-btn" @click="joinMeeting"> |
||||||
|
入会 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
<!-- 四种模式卡片 --> |
||||||
|
<div class="mode-list"> |
||||||
|
<div |
||||||
|
v-for="(mode, index) in meetingModes" |
||||||
|
:key="index" |
||||||
|
:class="['mode-item', mode.color]" |
||||||
|
@click="handleModeClick(mode)" |
||||||
|
> |
||||||
|
<div class="title"> |
||||||
|
{{ mode.title }} |
||||||
|
</div> |
||||||
|
<div class="icon-bg"> |
||||||
|
<i :class="mode.icon"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
<!-- 2. 会诊记录卡片 --> |
||||||
|
<el-card class="card"> |
||||||
|
<div slot="header" class="card-header"> |
||||||
|
<span class="line"></span> |
||||||
|
会诊记录 |
||||||
|
</div> |
||||||
|
<!-- 会诊表格 --> |
||||||
|
<div class="table-wrapper"> |
||||||
|
<el-table |
||||||
|
v-loading="loading" |
||||||
|
:data="recordList" |
||||||
|
:show-header="false" |
||||||
|
stripe |
||||||
|
height="calc(100vh - 550px)" |
||||||
|
> |
||||||
|
<el-table-column label="头像" prop="avatar" align="center" width="50"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-avatar :src="scope.row.avatar" /> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="会议名称" prop="name" align="center" /> |
||||||
|
<el-table-column label="类型" prop="type" align="center" /> |
||||||
|
<el-table-column label="时间" prop="time" align="center" /> |
||||||
|
<el-table-column label="操作" align="center" width="50"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button |
||||||
|
type="text" |
||||||
|
icon="el-icon-more" |
||||||
|
class="more-btn" |
||||||
|
@click="showDetail(scope.row)" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
<!-- 分页 --> |
||||||
|
<pagination |
||||||
|
v-show="queryParams.total > 0" |
||||||
|
:total="queryParams.total" |
||||||
|
:page.sync="queryParams.pageNum" |
||||||
|
:limit.sync="queryParams.pageSize" |
||||||
|
@pagination="getList" |
||||||
|
/> |
||||||
|
</el-card> |
||||||
|
<!-- 会诊详情弹框 --> |
||||||
|
<el-dialog |
||||||
|
title="会诊详情" |
||||||
|
:visible.sync="showDetailDialog" |
||||||
|
width="400px" |
||||||
|
:close-on-click-modal="false" |
||||||
|
> |
||||||
|
<el-form :model="selectedRecord" label-width="110px"> |
||||||
|
<el-form-item label="会议状态"> |
||||||
|
{{ selectedRecord.status || "已结束" }} |
||||||
|
</el-form-item> |
||||||
|
<el-divider /> |
||||||
|
<el-form-item label="会议时间"> |
||||||
|
{{ selectedRecord.time || "" }} |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="会议持续时间"> |
||||||
|
{{ selectedRecord.duration || "0分钟0秒" }} |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="病例数记录"> |
||||||
|
<el-form-item label="总病例数"> |
||||||
|
{{ selectedRecord.totalCases || "2" }} |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="阳性病例数"> |
||||||
|
{{ selectedRecord.positiveCases || "0" }} |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="阴性病例数"> |
||||||
|
{{ selectedRecord.negativeCases || "0" }} |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="上级转诊病例数"> |
||||||
|
{{ selectedRecord.referralCases || "4" }} |
||||||
|
</el-form-item> |
||||||
|
</el-form-item> |
||||||
|
<el-divider /> |
||||||
|
<el-form-item label="会议发起人"> |
||||||
|
{{ selectedRecord.sponsor || "" }} |
||||||
|
</el-form-item> |
||||||
|
<el-divider /> |
||||||
|
<el-form-item label="参会人员"> |
||||||
|
{{ selectedRecord.participants || "" }} |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
// import { listMeeting, getMeeting, joinMeeting } from "@/api/videoCommunication"; |
||||||
|
|
||||||
|
// 假数据：和截图保持一致 |
||||||
|
const mockRecordList = [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: "超声事业部的云诊室", |
||||||
|
type: "会诊", |
||||||
|
time: "2026-05-07 09:09:23", |
||||||
|
avatar: |
||||||
|
"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", |
||||||
|
iconType: "blue", |
||||||
|
duration: "0分钟0秒", |
||||||
|
totalCases: "2", |
||||||
|
positiveCases: "0", |
||||||
|
negativeCases: "0", |
||||||
|
referralCases: "4", |
||||||
|
status: "已结束", |
||||||
|
sponsor: "张三", |
||||||
|
participants: "李四、王五", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
name: "超声事业部的云诊室", |
||||||
|
type: "会诊", |
||||||
|
time: "2026-05-06 13:40:51", |
||||||
|
avatar: |
||||||
|
"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", |
||||||
|
iconType: "blue", |
||||||
|
duration: "0分钟0秒", |
||||||
|
totalCases: "2", |
||||||
|
positiveCases: "0", |
||||||
|
negativeCases: "0", |
||||||
|
referralCases: "4", |
||||||
|
status: "已结束", |
||||||
|
sponsor: "张三", |
||||||
|
participants: "李四、王五", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
name: "超声事业部的云教学", |
||||||
|
type: "教学", |
||||||
|
time: "2026-05-06 13:40:38", |
||||||
|
avatar: |
||||||
|
"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", |
||||||
|
iconType: "orange", |
||||||
|
duration: "0分钟0秒", |
||||||
|
totalCases: "2", |
||||||
|
positiveCases: "0", |
||||||
|
negativeCases: "0", |
||||||
|
referralCases: "4", |
||||||
|
status: "已结束", |
||||||
|
sponsor: "张三", |
||||||
|
participants: "李四、王五", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 4, |
||||||
|
name: "超声事业部的云诊室", |
||||||
|
type: "会诊", |
||||||
|
time: "2026-04-29 13:16:48", |
||||||
|
avatar: |
||||||
|
"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", |
||||||
|
iconType: "blue", |
||||||
|
duration: "0分钟0秒", |
||||||
|
totalCases: "2", |
||||||
|
positiveCases: "0", |
||||||
|
negativeCases: "0", |
||||||
|
referralCases: "4", |
||||||
|
status: "已结束", |
||||||
|
sponsor: "张三", |
||||||
|
participants: "李四、王五", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 5, |
||||||
|
name: "质控会议-6019100", |
||||||
|
type: "质控", |
||||||
|
time: "2026-04-20 18:14:20", |
||||||
|
avatar: |
||||||
|
"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", |
||||||
|
iconType: "blue", |
||||||
|
duration: "0分钟0秒", |
||||||
|
totalCases: "2", |
||||||
|
positiveCases: "0", |
||||||
|
negativeCases: "0", |
||||||
|
referralCases: "4", |
||||||
|
status: "已结束", |
||||||
|
sponsor: "张三", |
||||||
|
participants: "李四、王五", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 6, |
||||||
|
name: "超声事业部的云诊室", |
||||||
|
type: "会诊", |
||||||
|
time: "2026-04-20 18:14:09", |
||||||
|
avatar: |
||||||
|
"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", |
||||||
|
iconType: "blue", |
||||||
|
duration: "0分钟0秒", |
||||||
|
totalCases: "2", |
||||||
|
positiveCases: "0", |
||||||
|
negativeCases: "0", |
||||||
|
referralCases: "4", |
||||||
|
status: "已结束", |
||||||
|
sponsor: "张三", |
||||||
|
participants: "李四、王五", |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "VideoPage", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
meetingCode: "", |
||||||
|
loading: false, |
||||||
|
queryParams: { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
total: 125, // 和截图保持一致：共125场 |
||||||
|
}, |
||||||
|
meetingModes: [ |
||||||
|
{ |
||||||
|
title: "实时会诊", |
||||||
|
icon: "el-icon-user-solid", |
||||||
|
color: "blue", |
||||||
|
routeName: "RealTimeConsultation", |
||||||
|
routePath: "/videoCommunication/realTimeConsultation", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "带教培训", |
||||||
|
icon: "el-icon-video-play", |
||||||
|
color: "yellow", |
||||||
|
routeName: "Training", |
||||||
|
routePath: "/videoCommunication/training", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "在线质控", |
||||||
|
icon: "el-icon-lightbulb", |
||||||
|
color: "grayblue", |
||||||
|
routeName: "QualityControl", |
||||||
|
routePath: "/videoCommunication/qualityControl", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "病例研讨", |
||||||
|
icon: "el-icon-chat-line-square", |
||||||
|
color: "greenblue", |
||||||
|
routeName: "CaseDiscussion", |
||||||
|
routePath: "/videoCommunication/caseDiscussion", |
||||||
|
}, |
||||||
|
], |
||||||
|
recordList: [], |
||||||
|
showDetailDialog: false, |
||||||
|
selectedRecord: {}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
totalPage() { |
||||||
|
return Math.ceil(this.queryParams.total / this.queryParams.pageSize); |
||||||
|
}, |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getList(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 口令入会 |
||||||
|
joinMeeting() { |
||||||
|
if (!this.meetingCode.trim()) { |
||||||
|
this.$message.warning("请输入数字口令"); |
||||||
|
return; |
||||||
|
} |
||||||
|
this.loading = true; |
||||||
|
// 模拟接口调用 |
||||||
|
// joinMeeting({ meetingCode: this.meetingCode }) |
||||||
|
// .then(() => { |
||||||
|
// this.$message.success("成功加入会议"); |
||||||
|
// this.meetingCode = ""; |
||||||
|
// }) |
||||||
|
// .catch(() => { |
||||||
|
// this.$message.error("入会失败，请检查口令是否正确"); |
||||||
|
// }) |
||||||
|
// .finally(() => { |
||||||
|
// this.loading = false; |
||||||
|
// }); |
||||||
|
|
||||||
|
// 模拟请求 |
||||||
|
setTimeout(() => { |
||||||
|
this.$message.success("成功加入会议"); |
||||||
|
this.meetingCode = ""; |
||||||
|
this.loading = false; |
||||||
|
}, 500); |
||||||
|
}, |
||||||
|
|
||||||
|
// 处理会议模式点击 |
||||||
|
handleModeClick(mode) { |
||||||
|
this.$router.push({ name: mode.routeName }); |
||||||
|
}, |
||||||
|
|
||||||
|
// 查询会诊记录列表（含接口失败降级逻辑） |
||||||
|
async getList() { |
||||||
|
this.loading = true; |
||||||
|
try { |
||||||
|
// 真实接口 |
||||||
|
// const response = await listMeeting(this.queryParams); |
||||||
|
// this.recordList = response.rows; |
||||||
|
// this.queryParams.total = response.total; |
||||||
|
|
||||||
|
// 模拟接口调用（这里直接抛出错误，测试降级逻辑） |
||||||
|
throw new Error("接口请求失败"); |
||||||
|
} catch (error) { |
||||||
|
console.warn("接口请求失败，使用假数据：", error); |
||||||
|
this.$message.warning("获取会议列表失败，已加载模拟数据"); |
||||||
|
// 接口失败时，使用假数据 |
||||||
|
this.recordList = [...mockRecordList]; |
||||||
|
this.queryParams.total = 125; |
||||||
|
} finally { |
||||||
|
this.loading = false; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 分页操作 |
||||||
|
goFirst() { |
||||||
|
this.queryParams.pageNum = 1; |
||||||
|
this.getList(); |
||||||
|
}, |
||||||
|
goPrev() { |
||||||
|
if (this.queryParams.pageNum > 1) { |
||||||
|
this.queryParams.pageNum--; |
||||||
|
this.getList(); |
||||||
|
} |
||||||
|
}, |
||||||
|
goNext() { |
||||||
|
if (this.queryParams.pageNum < this.totalPage) { |
||||||
|
this.queryParams.pageNum++; |
||||||
|
this.getList(); |
||||||
|
} |
||||||
|
}, |
||||||
|
goLast() { |
||||||
|
this.queryParams.pageNum = this.totalPage; |
||||||
|
this.getList(); |
||||||
|
}, |
||||||
|
|
||||||
|
// 显示详情弹框（含接口失败降级逻辑） |
||||||
|
async showDetail(record) { |
||||||
|
this.loading = true; |
||||||
|
try { |
||||||
|
// 真实接口 |
||||||
|
// const response = await getMeeting(record.id); |
||||||
|
// this.selectedRecord = response.data; |
||||||
|
|
||||||
|
// 模拟接口调用失败，直接使用当前行数据 |
||||||
|
throw new Error("获取详情失败"); |
||||||
|
} catch (error) { |
||||||
|
console.warn("获取详情接口失败，使用当前记录数据：", error); |
||||||
|
this.$message.warning("获取会议详情失败，已加载基础信息"); |
||||||
|
this.selectedRecord = { ...record }; |
||||||
|
} finally { |
||||||
|
this.showDetailDialog = true; |
||||||
|
this.loading = false; |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.app-container { |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
// 卡片通用样式 |
||||||
|
.card { |
||||||
|
.card-header { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 500; |
||||||
|
color: #333; |
||||||
|
|
||||||
|
.line { |
||||||
|
display: inline-block; |
||||||
|
width: 3px; |
||||||
|
height: 16px; |
||||||
|
background-color: #009696; |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 口令入会区域 |
||||||
|
.join-area { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 20px; |
||||||
|
|
||||||
|
.join-input { |
||||||
|
width: 250px; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.join-btn { |
||||||
|
background-color: #009696; |
||||||
|
border-color: #009696; |
||||||
|
color: #fff; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background-color: #00796b; |
||||||
|
border-color: #00796b; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 会议模式列表 |
||||||
|
.mode-list { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(4, 1fr); |
||||||
|
gap: 10px; |
||||||
|
|
||||||
|
.mode-item { |
||||||
|
height: 115px; |
||||||
|
border-radius: 8px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
color: #fff; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
cursor: pointer; |
||||||
|
transition: transform 0.2s ease, box-shadow 0.2s ease; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
transform: translateY(-3px); |
||||||
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); |
||||||
|
} |
||||||
|
|
||||||
|
&:active { |
||||||
|
transform: translateY(-1px); |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 18px; |
||||||
|
margin-bottom: 10px; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-bg { |
||||||
|
position: absolute; |
||||||
|
right: 20px; |
||||||
|
bottom: 20px; |
||||||
|
font-size: 40px; |
||||||
|
opacity: 0.3; |
||||||
|
} |
||||||
|
|
||||||
|
&::after { |
||||||
|
content: ""; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 60px; |
||||||
|
background: rgba(255, 255, 255, 0.1); |
||||||
|
border-radius: 100% 100% 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
&.blue { |
||||||
|
background: linear-gradient(to right, #67c2ef, #2196f3); |
||||||
|
} |
||||||
|
|
||||||
|
&.yellow { |
||||||
|
background: linear-gradient(to right, #ffd54f, #ff9800); |
||||||
|
} |
||||||
|
|
||||||
|
&.grayblue { |
||||||
|
background: linear-gradient(to right, #b0bec5, #29b6f6); |
||||||
|
} |
||||||
|
|
||||||
|
&.greenblue { |
||||||
|
background: linear-gradient(to right, #43d8c9, #29b6f6); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 会诊记录表格 |
||||||
|
.more-btn { |
||||||
|
color: #009696; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue