suojin
/
HIYL-localization-web
23
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

视讯-页面搭建

Browse Source
main
ysn 3 weeks ago
parent e2fe2c7696
commit 9f25ca8527
2 changed files with 516 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/layout/components/Navbar.vue
  2. 514
      src/views/video/index.vue

4
src/layout/components/Navbar.vue
Unescape View File

@ -12,13 +12,13 @@
<template v-if="device!=='mobile'">
<search id="header-search" class="right-menu-item" />
<el-tooltip content="源码地址" effect="dark" placement="bottom">
<!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip>
<el-tooltip content="文档地址" effect="dark" placement="bottom">
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip>
</el-tooltip> -->
<screenfull id="screenfull" class="right-menu-item hover-effect" />

514
src/views/video/index.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save