From 9f25ca852718cde739a32085df7a758b796474b8 Mon Sep 17 00:00:00 2001
From: ysn <2126564605@qq.com>
Date: Wed, 13 May 2026 11:44:04 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E8=AE=AF-=E9=A1=B5=E9=9D=A2=E6=90=AD?=
 =?UTF-8?q?=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Navbar.vue |   4 +-
 src/views/video/index.vue        | 514 +++++++++++++++++++++++++++++++
 2 files changed, 516 insertions(+), 2 deletions(-)
 create mode 100644 src/views/video/index.vue

diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 16d6ba8..98fa1d7 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -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" />
 
diff --git a/src/views/video/index.vue b/src/views/video/index.vue
new file mode 100644
index 0000000..4222471
--- /dev/null
+++ b/src/views/video/index.vue
@@ -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>
\ No newline at end of file