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 v-if="recordList.length === 0" class="no-data">
        ----- 无会诊记录 -----
      </div>

      <!-- 会诊表格 -->
      <el-table
        v-loading="loading"
        v-else
        :data="recordList"
        :show-header="false"
        stripe
      >
        <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 class="pagination-wrapper">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryParams.pageSize"
          layout="prev, pager, next"
          :total="queryParams.total"
        >
        </el-pagination>
      </div>
    </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";
export default {
  name: "VideoPage",
  data() {
    return {
      meetingCode: "",
      // 查询参数
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      // 会议模式配置
      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-user-solid",
          color: "greenblue",
          routeName: "CaseDiscussion",
          routePath: "/videoCommunication/caseDiscussion",
        },
      ],
      // 会诊记录表格数据
      recordList: [],
      // 详情弹框
      showDetailDialog: false,
      selectedRecord: {},
    };
  },
  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;
        });
    },
    // 处理会议模式点击
    handleModeClick(mode) {
      this.$router.push({ name: mode.routeName });
    },
    // 查询会诊记录列表
    getList() {
      this.loading = true;
      listMeeting(this.queryParams)
        .then((response) => {
          this.recordList = response.rows || [];
          this.queryParams.total = response.total || 0;
        })
        .catch(() => {
          this.$message.error("获取会议列表失败");
        })
        .finally(() => {
          // 接口失败时，用空数据模拟无记录状态
          this.recordList = [];
          this.queryParams.total = 0;
          this.loading = false;
        });
    },
    // 显示详情弹框
    showDetail(record) {
      this.loading = true;
      getMeeting(record.id)
        .then((response) => {
          this.selectedRecord = response.data || record;
          this.showDetailDialog = true;
        })
        .catch(() => {
          this.$message.error("获取会议详情失败");
          this.selectedRecord = record;
          this.showDetailDialog = true;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 分页处理
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
  },
};
</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: flex;
    gap: 10px;

    .mode-item {
      flex: 1;
      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);
      }
    }
  }

  // 无会诊记录样式
  .no-data {
    text-align: center;
    padding: 50px 0;
    color: #999;
  }

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

  // 分页样式
  .pagination-wrapper {
    text-align: center;
    margin-top: 15px;
  }
}
</style>