parent
8361925273
commit
0323f7332e
8 changed files with 3360 additions and 1452 deletions
@ -1,514 +0,0 @@ |
||||
<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> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue