guzijian / wvp-GB28181-pro · Files

<template>
  <el-container class="live-container">
    <el-aside :width="sidebarState ? '280px' : '0px'">
      <div class="sidebar-content">
        <vehicle-list
          ref="vehicleList"
          @tree-loaded="handleTreeLoaded"
          @node-click="nodeClick"
          @node-contextmenu="nodeContextmenu"
        />
      </div>
    </el-aside>

    <div
      v-show="contextMenuVisible"
      :style="{left: contextMenuLeft + 'px', top: contextMenuTop + 'px'}"
      class="custom-context-menu"
      @click.stop
    >
      <div class="menu-item" @click="handleContextCommand('playback')">
        <i class="el-icon-video-play"></i> 一键播放该设备
      </div>
    </div>

    <el-container class="right-container">
      <el-header height="40px" class="player-header">
        <i :class="sidebarState ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
           @click="updateSidebarState"
           class="fold-btn"
           title="折叠/展开设备列表"
        />

        <window-num-select v-model="windowNum"></window-num-select>
        <el-button type="danger" size="mini" @click="closeAllVideo">全部关闭</el-button>
        <el-button type="warning" size="mini" @click="closeVideo">关闭选中</el-button>
        <el-button type="primary" size="mini" icon="el-icon-full-screen" @click="toggleFullscreen"></el-button>

        <el-button
          :type="isCarouselRunning ? 'danger' : 'success'"
          size="mini"
          :icon="isCarouselRunning ? 'el-icon-video-pause' : 'el-icon-video-play'"
          @click="openCarouselConfig"
        >
          {{ isCarouselRunning ? '停止轮播' : '轮播设置' }}
        </el-button>

        <div v-if="isCarouselRunning" class="carousel-status">
          <template v-if="isWithinSchedule">
            <i class="el-icon-loading" style="margin-right:4px"></i>
            <span style="color: #67C23A; font-weight: bold;">轮播运行中</span>
            <span style="font-size: 10px; color: #909399; margin-left: 5px;">(缓冲: {{channelBuffer.length}}路)</span>
          </template>
          <template v-else>
            <i class="el-icon-time" style="margin-right:4px"></i>
            <span style="color: #E6A23C;">等待时段生效</span>
          </template>
        </div>

        <span class="header-right-info">选中窗口 : {{ windowClickIndex }}</span>
      </el-header>

      <carousel-config
        ref="carouselConfig"
        :device-tree-data="deviceTreeData"
        @save="startCarousel"
      ></carousel-config>

      <el-main ref="videoMain" class="player-main" @click.native="hideContextMenu">
        <player-list-component
          ref="playListComponent"
          @playerClick="handleClick"
          :video-url="videoUrl"
          :videoDataList="videoDataList"
          v-model="windowNum"
          style="width: 100%; height: 100%;"
        ></player-list-component>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import VehicleList from "./JT1078Components/deviceList/VehicleList.vue";
import CarouselConfig from "./CarouselConfig.vue";
import WindowNumSelect from "./WindowNumSelect.vue";
import PlayerListComponent from './common/PlayerListComponent.vue';

export default {
  name: "live",
  components: {
    VehicleList,
    CarouselConfig,
    WindowNumSelect,
    PlayerListComponent
  },
  data() {
    return {
      isFullscreen: false,
      sidebarState: true,
      windowNum: '4',
      windowClickIndex: 1,
      windowClickData: null,

      // 右键菜单相关
      contextMenuVisible: false,
      contextMenuLeft: 0,
      contextMenuTop: 0,
      rightClickNode: null,

      videoUrl: [],
      videoDataList: [],
      deviceTreeData: [],
      isCarouselRunning: false,
      isWithinSchedule: true,
      carouselConfig: null,
      carouselTimer: null,
      carouselDeviceList: [],
      channelBuffer: [],
      deviceCursor: 0,
    };
  },
  mounted() {
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
    window.addEventListener('beforeunload', this.handleBeforeUnload);
    // 全局点击隐藏右键菜单
    document.addEventListener('click', this.hideContextMenu);
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
    document.removeEventListener('click', this.hideContextMenu);
    this.stopCarousel();
  },
  // 路由离开守卫
  beforeRouteLeave(to, from, next) {
    if (this.isCarouselRunning) {
      this.$confirm('轮播正在进行中，离开将停止播放，是否确认？', '提示', {
        type: 'warning'
      }).then(() => {
        this.stopCarousel();
        next();
      }).catch(() => next(false));
    } else {
      next();
    }
  },
  methods: {
    // --- 侧边栏折叠逻辑 ---
    updateSidebarState() {
      this.sidebarState = !this.sidebarState;
      // 触发 resize 事件让播放器自适应
      setTimeout(() => {
        const event = new Event('resize');
        window.dispatchEvent(event);
      }, 310);
    },

    // --- 数据同步 ---
    handleTreeLoaded(data) {
      this.deviceTreeData = data;
    },

    // --- 播放器交互 ---
    handleClick(data, index) {
      this.windowClickIndex = index + 1;
      this.windowClickData = data;
    },

    toggleFullscreen() {
      const element = this.$refs.videoMain.$el;
      if (!this.isFullscreen) {
        if (element.requestFullscreen) element.requestFullscreen();
        else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen();
      } else {
        if (document.exitFullscreen) document.exitFullscreen();
        else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
      }
    },
    handleFullscreenChange() {
      this.isFullscreen = !!document.fullscreenElement;
    },

    // ==========================================
    // 1. 左键点击播放逻辑
    // ==========================================
    nodeClick(data, node) {
      if (this.isCarouselRunning) {
        this.$message.warning("请先停止轮播再手动播放");
        return;
      }
      // 判断是否为叶子节点（通道）
      if (!data.children || data.children.length === 0) {
        this.playSingleChannel(data);
      }
    },

    playSingleChannel(data) {
      // data.code 格式假设为 "deviceId_sim_channel"
      let stream = data.code.replace('-', '_'); // 容错处理
      let arr = stream.split("_");

      // 容错: 确保能解析出 sim 和 channel
      if (arr.length < 3) {
        console.warn("Invalid channel code:", data.code);
        return;
      }

      this.$axios.get(`/api/jt1078/query/send/request/io/${arr[1]}/${arr[2]}`).then(res => {
        if (res.data.code === 0 || res.data.code === 200) {
          // 兼容 http/https 协议
          const url = (location.protocol === "https:") ? res.data.data.wss_flv : res.data.data.ws_flv;
          const idx = this.windowClickIndex - 1;

          // 使用 $set 确保数组响应式更新
          this.$set(this.videoUrl, idx, url);
          this.$set(this.videoDataList, idx, {...data, videoUrl: url});

          // 自动跳到下一个窗口
          const maxWindow = parseInt(this.windowNum) || 4;
          this.windowClickIndex = (this.windowClickIndex % maxWindow) + 1;
        } else {
          this.$message.error(res.data.msg || "获取视频流失败");
        }
      }).catch(err => {
        this.$message.error("请求播放地址异常");
      });
    },

    // ==========================================
    // 2. 右键菜单逻辑
    // ==========================================
    nodeContextmenu(event, data, node) {
      // 只有父设备节点(有子级)才显示菜单
      if (data.children && data.children.length > 0) {
        this.rightClickNode = node;
        this.contextMenuVisible = true;
        this.contextMenuLeft = event.clientX;
        this.contextMenuTop = event.clientY;
      }
    },

    hideContextMenu() {
      this.contextMenuVisible = false;
    },

    handleContextCommand(command) {
      this.hideContextMenu();
      if (command === 'playback') {
        if (this.isCarouselRunning) return this.$message.warning("轮播中无法操作");

        const channels = this.rightClickNode.data.children;
        if (channels && channels.length > 0) {
          // 1. 清屏
          this.videoUrl = [];
          this.videoDataList = [];

          // 2. 自动切换分屏布局
          if (channels.length > 16) this.windowNum = '25';
          else if (channels.length > 9) this.windowNum = '16';
          else if (channels.length > 4) this.windowNum = '9';
          else this.windowNum = '4';

          // 3. 构造批量请求参数
          const ids = channels.map(c => {
            // 假设 code 是 id_sim_channel，后端需要 sim-channel
            const parts = c.code.replaceAll('_', '-').split('-');
            return parts.slice(1).join('-');
          });

          this.$axios.post('/api/jt1078/query/beachSend/request/io', ids).then(res => {
            if (res.data && res.data.data) {
              const list = res.data.data || [];
              list.forEach((item, i) => {
                if (channels[i]) {
                  const url = (location.protocol === "https:") ? item.wss_flv : item.ws_flv;
                  this.$set(this.videoUrl, i, url);
                  this.$set(this.videoDataList, i, {...channels[i], videoUrl: url});
                }
              });
            } else {
              this.$message.warning("批量获取流地址为空");
            }
          }).catch(e => {
            this.$message.error("批量播放失败");
          });
        } else {
          this.$message.warning("该设备下没有通道");
        }
      }
    },

    // ==========================================
    // 3. 视频关闭逻辑
    // ==========================================
    async checkCarouselPermission(actionName) {
      if (!this.isCarouselRunning) return true;
      try {
        await this.$confirm(`正在轮播，"${actionName}"将停止轮播，是否继续？`, '提示', {type: 'warning'});
        this.stopCarousel();
        return true;
      } catch (e) {
        return false;
      }
    },

    async closeAllVideo() {
      if (!(await this.checkCarouselPermission('关闭所有视频'))) return;
      this.videoUrl = new Array(parseInt(this.windowNum)).fill(null);
      this.videoDataList = new Array(parseInt(this.windowNum)).fill(null);
    },

    async closeVideo() {
      if (!(await this.checkCarouselPermission('关闭当前窗口'))) return;
      const idx = Number(this.windowClickIndex) - 1;
      if (this.videoUrl && this.videoUrl[idx]) {
        this.$confirm(`确认关闭窗口 [${this.windowClickIndex}] ？`, '提示', {type: 'warning'})
          .then(() => {
            this.$set(this.videoUrl, idx, null);
            this.$set(this.videoDataList, idx, null);
          }).catch(() => {
        });
      }
    },

    // ==========================================
    // 4. 轮播逻辑 (补全部分)
    // ==========================================
    openCarouselConfig() {
      if (this.isCarouselRunning) {
        this.$confirm('确定要停止轮播吗？', '提示').then(() => this.stopCarousel());
      } else {
        this.$refs.carouselConfig.open(this.carouselConfig);
      }
    },

    stopCarousel() {
      this.isCarouselRunning = false;
      if (this.carouselTimer) {
        clearTimeout(this.carouselTimer);
        this.carouselTimer = null;
      }
      this.$message.info("轮播已停止");
    },

    async startCarousel(config) {
      this.carouselConfig = config;

      // 1. 筛选目标设备
      let targetNodes = [];
      if (config.sourceType === 'all_online') {
        const collectOnline = (nodes) => {
          nodes.forEach(node => {
            if (node.abnormalStatus === 1) targetNodes.push(node);
            if (node.children && node.children.length > 0) collectOnline(node.children);
          });
        };
        collectOnline(this.deviceTreeData);
      } else {
        targetNodes = config.selectedNodes.filter(n => n.abnormalStatus === 1);
      }

      if (targetNodes.length === 0) {
        this.$message.warning("当前范围内没有在线设备可供轮播");
        return;
      }

      // 2. 初始化状态
      this.carouselDeviceList = targetNodes;
      this.channelBuffer = [];
      this.deviceCursor = 0;
      this.isCarouselRunning = true;
      this.isWithinSchedule = true;

      this.$message.success(`轮播已启动，共 ${targetNodes.length} 台在线设备`);

      // 3. 立即执行第一轮
      await this.executeFirstRound();
    },

    async executeFirstRound() {
      if (this.windowNum !== this.carouselConfig.layout) {
        this.windowNum = this.carouselConfig.layout;
      }

      const batch = await this.fetchNextBatchData();
      if (batch) {
        this.applyVideoBatch(batch);
        this.runCarouselLoop();
      } else {
        this.$message.error("首轮加载失败，尝试重试...");
        this.runCarouselLoop();
      }
    },

    runCarouselLoop() {
      if (!this.isCarouselRunning) return;

      const {runMode, timeRange, interval} = this.carouselConfig;

      // 1. 检查定时
      if (runMode === 'schedule') {
        if (!this.checkTimeRange(timeRange[0], timeRange[1])) {
          this.isWithinSchedule = false;
          if (this.videoUrl.some(v => v)) this.closeAllVideoNoConfirm();
          this.carouselTimer = setTimeout(() => this.runCarouselLoop(), 10000);
          return;
        }
        this.isWithinSchedule = true;
      }

      // 2. 计算时间轴
      const PRELOAD_TIME = 15;
      const intervalSec = Math.max(interval, 30);
      const waitTime = (intervalSec - PRELOAD_TIME) * 1000;

      // 3. 计时循环
      this.carouselTimer = setTimeout(async () => {
        if (!this.isCarouselRunning) return;

        const nextBatch = await this.fetchNextBatchData();

        this.carouselTimer = setTimeout(() => {
          if (!this.isCarouselRunning) return;
          if (nextBatch) this.applyVideoBatch(nextBatch);
          this.runCarouselLoop();
        }, PRELOAD_TIME * 1000);

      }, waitTime);
    },

    applyVideoBatch({urls, infos}) {
      this.videoUrl = new Array(parseInt(this.windowNum)).fill(null);
      setTimeout(() => {
        urls.forEach((url, index) => {
          setTimeout(() => {
            this.$set(this.videoUrl, index, url);
            this.$set(this.videoDataList, index, infos[index]);
          }, index * 100);
        });
      }, 200);
    },

    async fetchNextBatchData() {
      let pageSize = parseInt(this.windowNum) || 4;
      if (isNaN(pageSize)) pageSize = 4;

      // 填充缓冲区
      let safetyCounter = 0;
      while (this.channelBuffer.length < pageSize && safetyCounter < 100) {
        safetyCounter++;
        if (this.deviceCursor >= this.carouselDeviceList.length) {
          this.deviceCursor = 0;
        }

        const device = this.carouselDeviceList[this.deviceCursor];
        if (device && device.children && device.children.length > 0) {
          const codes = device.children
            .filter(child => !child.disabled)
            .map(child => child.code);
          this.channelBuffer.push(...codes);
        }
        this.deviceCursor++;
      }

      if (this.channelBuffer.length === 0) return null;

      const currentCodes = this.channelBuffer.splice(0, pageSize);
      const streamParams = currentCodes.map(c => c.replaceAll('_', '-').split('-').slice(1).join('-'));

      try {
        const res = await this.$axios.post('/api/jt1078/query/beachSend/request/io', streamParams, {timeout: 20000});
        if (res.data && res.data.data) {
          const resultList = res.data.data;
          const urls = new Array(pageSize).fill('');
          const infos = new Array(pageSize).fill(null);

          resultList.forEach((item, i) => {
            if (i < currentCodes.length) {
              const url = (location.protocol === "https:") ? item.wss_flv : item.ws_flv;
              urls[i] = url;
              infos[i] = {
                code: currentCodes[i],
                name: `通道 ${i + 1}`,
                videoUrl: url
              };
            }
          });
          return {urls, infos};
        }
      } catch (e) {
        console.error("批量请求流地址失败", e);
      }
      return null;
    },

    checkTimeRange(startStr, endStr) {
      if (!startStr || !endStr) return true;
      const now = new Date();
      const current = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
      const parse = (str) => {
        const [h, m, s] = str.split(':').map(Number);
        return h * 3600 + m * 60 + s;
      };
      const start = parse(startStr);
      const end = parse(endStr);
      if (end < start) return current >= start || current <= end;
      return current >= start && current <= end;
    },

    closeAllVideoNoConfirm() {
      this.videoUrl = new Array(parseInt(this.windowNum)).fill(null);
      this.videoDataList = new Array(parseInt(this.windowNum)).fill(null);
    },

    handleBeforeUnload(e) {
      if (this.isCarouselRunning) {
        e.preventDefault();
        e.returnValue = '';
      }
    },
  }
};
</script>

<style scoped>
/* 1. 容器高度设为 100%，由 App.vue 的 el-main 决定高度
  这样就不会出现双重滚动条，Header 也不会被遮挡
*/
.live-container {
  height: 100%;
  width: 100%;
  overflow: hidden; /* 防止内部溢出 */
}

/* 2. 侧边栏样式优化 */
.el-aside {
  background-color: #fff;
  color: #333;
  text-align: center;
  height: 100%;
  overflow: hidden; /* 隐藏收起时的内容 */
  border-right: 1px solid #dcdfe6;
  transition: width 0.3s ease-in-out; /* 添加平滑过渡动画 */
}

/* 侧边栏内容包裹层，保持宽度固定，防止文字挤压 */
.sidebar-content {
  width: 280px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* 3. 右侧容器 */
.right-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 4. 播放器头部控制栏 */
.player-header {
  background-color: #e9eef3; /* 与 App 背景色协调 */
  color: #333;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 15px;
  border-bottom: 1px solid #dcdfe6;
  box-sizing: border-box;
}

.fold-btn {
  font-size: 20px;
  margin-right: 5px;
  cursor: pointer;
  color: #606266;
}

.fold-btn:hover {
  color: #409EFF;
}

.header-right-info {
  margin-left: auto;
  font-weight: bold;
  font-size: 14px;
  color: #606266;
}

/* 5. 播放器主体区域 */
.player-main {
  background-color: #000; /* 黑色背景 */
  padding: 0 !important; /* 去掉 Element UI 默认 padding */
  margin: 0;
  overflow: hidden;
  flex: 1; /* 占据剩余高度 */
}

/* 右键菜单 */
.custom-context-menu {
  position: fixed;
  background: #fff;
  border: 1px solid #EBEEF5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  z-index: 3000;
  border-radius: 4px;
  padding: 5px 0;
  min-width: 120px;
}

.menu-item {
  padding: 8px 15px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
}

.menu-item:hover {
  background: #ecf5ff;
  color: #409EFF;
}

.carousel-status {
  margin-left: 15px;
  font-size: 12px;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid #dcdfe6;
}
</style>