pinganxiaoyuan/SafeCampus.WEB/src/views/screen/classroom.vue

<template>
  <div class="fullscreen-container">
    <myHeader place="1" ref="myHeaderRef" @getClassRoomInfo="getClassRoomInfo"></myHeader>
    <div style="position: absolute; width: 100%; display: flex; justify-content: space-between; top: 102px">
      <img style="width: 846px" src="/static/screen/img/header-aside-left.png" alt="" />
      <img style="width: 845px" src="/static/screen/img/header-aside-right.png" alt="" />
    </div>
    <main v-if="ready">
      <div class="main-top">
        <div class="tearchBox myborder">
          <div class="headimgBox">
            <div class="imgBox">
              <img src="/static/screen/testimg/7.png" alt="" />
            </div>
            <div class="title">{{ classRoom.teacher }}老师</div>
            <div class="status" :style="{ backgroundColor: classRoom.isClassing ? '#11ca2e' : '#b1b3b8' }">
              {{ classRoom.isClassing ? "正在上课" : "未上课" }}
            </div>
            <!-- <img class="setting" src="/static/screen/img/setting.png" alt="" /> -->
          </div>
          <div class="classTime">
            <div>
              <div>上课时间</div>
              <div class="time">{{ classRoom.classTime }}</div>
            </div>
            <div>
              <div>下课时间</div>
              <div class="time">{{ classRoom.classBreakTime }}</div>
            </div>
          </div>
        </div>
        <div class="video">
          <!-- <img style="width: 100%; height: 100%" src="/static/screen/testimg/3.png" alt="" /> -->
          <iframe :src="rtsUrl" frameborder="0" style="width: 100%; height: 100%"></iframe>
        </div>
        <div class="stuEnterList myborder">
          <stuEnterList ref="stuEnterListRef" :screenData="screenData"></stuEnterList>
        </div>
      </div>
      <div class="main-bottom">
        <div class="classStatistics myborder">
          <classStatistics ref="classStatisticsRef" :screenData="screenData"></classStatistics>
        </div>
        <div class="classNotice myborder">
          <classNotice ref="classNoticeRef" :screenData="screenData"></classNotice>
        </div>
        <div class="classAnalysis myborder">
          <classAnalysis ref="classAnalysisRef" :screenData="screenData" />
        </div>
      </div>
    </main>
  </div>
</template>
<script setup>
import myHeader from "./component/header.vue";
import stuEnterList from "./component/classroom/stuEnterList.vue";
import classNotice from "./component/classroom/classNotice.vue";
import classAnalysis from "./component/classroom/classAnalysis.vue";
import classStatistics from "./component/classroom/classStatistics.vue";
import { screenApi } from "@/api";
const myHeaderRef = ref(null);
const screenData = ref({});
const classInfo = ref({});
const ready = ref(false);
const classRoom = ref({});
const stuEnterListRef = ref(null);
const classStatisticsRef = ref(null);
const classNoticeRef = ref(null);
const classAnalysisRef = ref(null);
const getClassRoomInfo = obj => {
  if (obj) classInfo.value = obj;
  if (!timer) refresh(getClassRoomInfo, 60000);
  // 归寝人数信息
  return screenApi.getSmartClassroom({ personSetId: classInfo.value.value }).then(res => {
    if (res.code == 200) {
      screenData.value = res.data;
      classRoom.value = screenData.value.classRoom;
      let classTime = new Date(classRoom.value.classTime).valueOf();
      let classBreakTime = new Date(classRoom.value.classBreakTime).valueOf();
      let currTime = new Date().valueOf();
      if (currTime > classTime && currTime < classBreakTime) {
        classRoom.value.isClassing = true;
      }
      showRts(classRoom.value.cameraId);
      console.log(res.data);
      ready.value = true;
      nextTick(() => {
        stuEnterListRef.value.init();
        classStatisticsRef.value.init();
        classNoticeRef.value.init();
        classAnalysisRef.value.init();
        myHeaderRef.value.setBoder();
      });
    }
  });
};
// 定时刷新
var timer = "";
const refresh = (fn = () => {}, time = 5000) => {
  timer = setInterval(async () => {
    await fn();
    // stuEnterListRef.value.init();
    // classStatisticsRef.value.init();
    // classNoticeRef.value.init();
    // classAnalysisRef.value.init();
  }, time);
};
// 监控
const streamId = ref("");
const videoToken = ref("");
const rtsUrl = ref("");
const sensorId = ref("");
const showRts = sensorId_ => {
  if (sensorId_) {
    if (sensorId.value == sensorId_) return;
    if (streamId.value) stopUrl();
    let rtsUrl_ = "/static/rtsPlayer.html?height=556px&rtsUrl=";
    sensorId.value = sensorId_;
    screenApi.detail({ sensorId: sensorId_ }).then(res => {
      // if (res.code == 200) {
      //   if (res.data.rtsPullStreamUrls[0]) {
      //     rtsUrl.value = rtsUrl_ + res.data.rtsPullStreamUrls[0].url;
      //   }
      //   streamId.value = res.data.streamId;
      //   videoToken.value = res.data.videoToken;
      // }
      // 演示
      rtsUrl.value = rtsUrl_ + "http://123.57.209.16:8004/video/5.mp4";
    });
  }
};
const stopUrl = () => {
  if (!streamId.value) return;
  screenApi.stopUrl({
    sensorId: sensorId.value,
    streamId: streamId.value,
    videoToken: videoToken.value
  });
};
onUnmounted(() => {
  stopUrl();
  timer && clearInterval(timer);
});
</script>
<style lang="scss" scoped>
main {
  padding: 41px 53px 0px 58px;
  .main-top {
    height: 556px;
    display: flex;
    justify-content: space-between;
    > div {
      height: 100%;
      box-sizing: border-box;
    }
    .tearchBox {
      width: 208px;
      .headimgBox {
        box-sizing: border-box;
        border-bottom: 1px solid #2e84e5;
        height: 304px;
        text-align: center;
        position: relative;
        .setting {
          position: absolute;
          top: 37px;
          right: 24px;
          width: 25px;
        }
        .imgBox {
          margin-top: 83px;
          width: 87px;
          height: 87px;
          border-radius: 50%;
          overflow: hidden;
          display: inline-block;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .title {
          color: #fff;
          font-size: 18px;
          margin-top: 16px;
        }
        .status {
          margin-top: 16px;
          display: inline-block;
          border-radius: 4px;
          width: 67px;
          height: 26px;
          color: #fff;
          font-size: 12px;
          line-height: 26px;
        }
      }
      .classTime {
        color: #78dfff;
        text-align: center;
        font-size: 14px;
        > div {
          margin-top: 50px;
          .time {
            margin-top: 11px;
          }
        }
      }
    }
    .video {
      width: 872px;
    }
    .stuEnterList {
      width: 1338px;
      padding: 35px 40px;
    }
  }
  .main-bottom {
    height: 652px;
    margin-top: 36px;
    display: flex;
    justify-content: space-between;
    > div {
      height: 100%;
      box-sizing: border-box;
    }
    .classStatistics {
      width: 579px;
      padding: 35px 37px;
    }
    .classNotice {
      width: 1095px;
      padding: 30px 40px;
    }
    .classAnalysis {
      width: 742px;
      padding: 30px 45px;
    }
  }
}
</style>