jayq_vue_newbigdata/src/views/safe/center/watchDetailDialog.vue

<template>
  <div class="container">
    <!-- 遮罩层区域 -->
    <div class="mask" @click="handleClose"></div>
    <!-- 弹窗内容区域 -->
    <div class="watch" id="draggable">
      <!-- 标题区域 -->
      <div class="title" :title="currentWatch">{{ currentWatch }}</div>

      <!-- 监控信息展示区域 -->
      <div class="content">
        <!-- 左边列表区域 -->
        <div class="content_list">
          <div
            class="list_item"
            :class="{ active: current === index }"
            v-for="(item, index) in videoList"
            :key="index"
            @click="handleChange(index, item)"
          >
            {{ item.d || "未知"
            }}{{ item.installationSite ? "-" + item.installationSite : "" }}
          </div>
        </div>

        <!-- 右边展示监控区域 -->
        <div class="content_video">
          <!-- 无信号区域 -->
          <div class="noSignal">无信号</div>

          <!-- 监控展示区域 -->
          <div class="iframe" id="videoDom5"></div>
        </div>
      </div>

      <!-- 关闭按钮区域 -->
      <div class="close" @click="handleClose"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
// 引入监控数据
import { watchData } from "@/components/map/watchData";
// 引入监控相关的数据接口
import {
  getVedio,
  reqVideoLogin,
  reqVideoList,
  reqVideoPull,
} from "@/api/video/index";
// @ts-ignore
import WasmPlayer from "@easydarwin/easywasmplayer";
// 引入拖拽功能文件
import { draggableFun } from "@/utils/draggable";

const props = defineProps(["currentWatch"]);
const $emit = defineEmits(["closeDialog"]);

// 监控实例
const player = ref();

// 是否展示监控
const isShow = ref(false);

// 延时器实例
const timer = ref();

// 当前索引
const current = ref(0);

// 监控列表
const videoList = ref<any>([]);

// 当前通道
const currentD = ref("");

onMounted(() => {
  console.log(props.currentWatch);

  if (props.currentWatch === "三爪仑观音岩") {
    let admin_token = localStorage.getItem("admin_token");

    if (admin_token) {
      // 获取监控列表数据
      getVideoList();
    } else {
      // 登录获取监控权限
      handleLogin();
    }
  } else {
    videoList.value.push({
      d: props.currentWatch,
      rtspaddr: "",
    });

    // 获取监控视频地址
    getVideosData("");
  }

  // 调用拖拽功能
  draggableFun("draggable");
});

onUnmounted(() => {
  // 页面卸载时销毁WasmPlayer实例
  player.value?.destroy();

  // 页面卸载时销毁延时器实例
  clearTimeout(timer.value);
});

// 登录获取监控权限
const handleLogin = async () => {
  const res = await reqVideoLogin({
    username: "admin",
    password: "admin.123456",
  });
  // console.log(res);
  if ((res as any).code === 200) {
    localStorage.setItem("admin_token", res.data.token);

    // 获取监控列表数据
    getVideoList();
  }
};

// 获取监控列表数据
const getVideoList = async () => {
  const res = await reqVideoList({
    pageNum: 1,
    pageSize: 100,
    spot: props.currentWatch,
  });
  // console.log(res);
  if ((res as any).code === 200) {
    videoList.value = res.data.list;
    currentD.value = videoList.value[0].d;
    // 拉流
    addStreamSource();
  }
};

// 拉流请求
const addStreamSource = async () => {
  const res = await reqVideoPull({
    d: currentD.value,
    nowLine: "1",
  });
  // console.log(res);
  if ((res as any).code === 200) {
    getVideosData(res.data.flv_ws);
  }
};
// 获取监控视频地址
const getVideosData = async (url: string) => {
  let res;
  if (url) {
    res = url;
  } else {
    const Obj = watchData.find((ele) => ele.title === props.currentWatch);

    res = await getVedio(Obj?.rtspaddr as string);
  }

  player.value = new WasmPlayer(null, "videoDom5", (_a: any) => {
    // a表示当前播放的状态
    // if (a === "videoTimestamp") {
    //   isShow.value = true;
    // } else {
    //   // 开启一个延时10秒的延时器
    //   if (!timer.value) {
    //     timer.value = setTimeout(() => {
    //       //  如果isShow为false表示播放失败，此时断开连接节约性能
    //       if (!isShow.value) {
    //         player.value.destroy();
    //       }
    //     }, 10000);
    //   }
    // }
  });

  player.value.play(res, 1);
};

// 监控列表切换回调
const handleChange = (index: number, item: any) => {
  if (props.currentWatch === "三爪仑观音岩") {
    current.value = index;
    currentD.value = item.d;
    isShow.value = false;
    player.value?.destroy();
    clearTimeout(timer.value);
    addStreamSource();
  }
};

// 点击关闭按钮回调
const handleClose = () => {
  $emit("closeDialog", false);
};
</script>

<style lang="scss" scoped>
.container {
  z-index: 9999;
  position: absolute;
  top: -151px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 7072px;
  height: 1872px;
  background-color: rgba($color: #000000, $alpha: 0.4);

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 7072px;
    height: 1872px;
  }

  .watch {
    position: absolute;
    padding: 0 50px;
    width: 1156px;
    height: 700px;
    background-image: url(@/assets/images/75.png);
    background-size: 100% 100%;
    user-select: none; /* 防止文字被选中 */

    .title {
      padding: 0 20px;
      margin-left: 366px;
      margin-bottom: 90px;
      width: 345px;
      height: 72px;
      line-height: 72px;
      text-align: center;
      font-size: 35px;
      color: #ccffe6;
      font-family: "庞门正道标题体";
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .content {
      display: flex;
      padding: 0 20px;
      height: 425px;

      .content_list {
        padding: 10px;
        width: 220px;
        height: 100%;
        overflow-y: auto;

        .list_item {
          margin-bottom: 10px;
          padding: 0 10px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 20px;
          border-radius: 10px;
          cursor: pointer;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          background-color: rgba($color: #fff, $alpha: 0.1);
        }

        .active {
          color: skyblue;
          background: linear-gradient(
            90deg,
            rgba(138, 208, 255, 0.09) 41.47%,
            rgba(163, 248, 255, 0) 100%
          );
        }
      }

      .content_video {
        position: relative;
        flex: 1;
        height: 425px;
        margin: 0 20px;

        .noSignal {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30px;
          background-color: #000;
        }
      }
    }

    .close {
      position: absolute;
      top: 10px;
      right: 6px;
      width: 42px;
      height: 42px;
      cursor: pointer;
      background-image: url(@/assets/images/12.png);
      background-size: 100% 100%;
    }
  }
}
</style>