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="list"
          :show-header="false"
          stripe
          height="calc(100vh - 550px)"
        >
          <el-table-column label="头像" prop="avatar" align="center" width="50">
            <template slot-scope="scope">
              <!-- MINIO_ENDPOINT_HTTPS+scope.row.avatar -->
              <el-avatar
                :src="
                  $store.state.user.netConfig.MINIO_ENDPOINT_HTTPS +
                  scope.row.avatar
                "
              />
            </template>
          </el-table-column>
          <el-table-column label="会诊名称" prop="name" align="center" />
          <el-table-column
            label="会议类型名称"
            prop="meet_type_name"
            align="center"
          />
          <el-table-column label="创建时间" prop="create_time" align="center" />
          <!-- 状态status 1-开始 0-结束 -->
          <el-table-column label="操作" align="center" width="50">
            <template slot-scope="scope">
              <el-button
                type="text"
                icon="el-icon-more"
                class="more-btn"
                @click="handleDetail(scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <pagination
        v-show="queryParams.total > 0"
        :total="queryParams.total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.size"
        @pagination="getList"
      />
    </el-card>
    <!-- 会诊详情弹框 -->
    <el-dialog
      :title="meetingDetail.name"
      :visible.sync="meetingDetailVisible"
      width="35%"
      :close-on-click-modal="false"
    >
      <el-form :model="meetingDetail" label-width="110px">
        <el-form-item>
          {{ getStatusText(meetingDetail.status) }}
        </el-form-item>
        <el-divider />
        <el-form-item label="会议时间">
          {{ meetingDetail.create_time || "" }}
        </el-form-item>
        <el-form-item label="会议持续时间">
          {{ formatDuration(meetingDetail.duration) }}
        </el-form-item>
        <el-form-item label="病例数记录">
          <el-form-item label="总病例数">
            {{ meetingDetail.total_patients }}例
          </el-form-item>
          <el-form-item label="阳性病例数">
            {{ meetingDetail.positive_patients }}例
          </el-form-item>
          <el-form-item label="上级转诊病例数">
            {{ meetingDetail.transfer_patients }}例
          </el-form-item>
        </el-form-item>
        <el-divider />
        <el-form-item label="会议发起人">
          <el-row>
            <el-col :span="3">
              <el-form-item>
                <el-avatar
                  :src="
                    meetingDetail.user_list && meetingDetail.user_list[0]
                      ? $store.state.user.netConfig.MINIO_ENDPOINT_HTTPS +
                        meetingDetail.user_list[0].avatar
                      : ''
                  "
                  class="person-avatar"
                />
              </el-form-item>
            </el-col>
            <el-col :span="21">
              <el-form-item>
                {{ meetingDetail.user_name || "" }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-divider />
        <el-form-item label="参会人员" label-position="top">
          <el-row v-for="(item, index) in meetingDetail.user_list" :key="index">
            <el-col :span="3">
              <el-form-item>
                <el-avatar
                  :src="
                    $store.state.user.netConfig.MINIO_ENDPOINT_HTTPS +
                    item.avatar
                  "
                  class="person-avatar"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                {{ item.name || "" }}
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="入会时间">
                {{ item.join_time || "" }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getConsultationList,
  getConsultationMeetingInfo,
} from "@/api/videoCommunication";

export default {
  name: "VideoPage",
  data() {
    return {
      meetingCode: "",
      loading: false,
      queryParams: {
        page: 1,
        size: 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-chat-line-square",
          color: "greenblue",
          routeName: "CaseStudy",
          routePath: "/videoCommunication/caseStudy",
        },
      ],
      list: [],
      meetingDetailVisible: false,
      meetingDetail: {},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: "已结束",
        1: "进行中",
        2: "空闲",
      };
      return statusMap[status] || "已结束";
    },
    // 格式化时长（秒转时分秒）
    formatDuration(seconds) {
      if (!seconds) return "-";
      const h = Math.floor(seconds / 3600);
      const m = Math.floor((seconds % 3600) / 60);
      const s = seconds % 60;
      return `${h}时${m}分${s}秒`;
    },
    // 口令入会
    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 });
    },

    // 会议记录列表
    getList() {
      this.loading = true;
      getConsultationList(this.queryParams).then((res) => {
        console.log("会诊记录", res.data.list);
        this.list = res.data.list;
        this.queryParams.total = Number(res.data.total);
        this.loading = false;
      });
    },
    // 会议详情
    handleDetail(row) {
      getConsultationMeetingInfo(row).then((res) => {
        console.log("会诊记录详情", res.data);
        this.meetingDetail = res.data;
        this.meetingDetailVisible = true;
      });
    },
  },
};
</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>