HIYL-localization-web/src/views/videoCommunication/index.vue

<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: "CaseStudy",
          routePath: "/videoCommunication/caseStudy",
        },
      ],
      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);
      }
    }
  }

  // 会诊记录表格ss
  .more-btn {
    color: #009696;
    cursor: pointer;
  }
}
</style>