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