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;
      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);
      }
    },

    // 单路播放 API 请求
    playSingleChannel(data) {
      // 假设 data.code 格式为 "deviceId_sim_channel"
      // 根据您的接口调整这里的解析逻辑
      let stream = data.code.replace('-', '_'); // 容错处理
      let arr = stream.split("_");

      // 假设 ID 结构是: id_sim_channel，取后两段
      if(arr.length < 3) 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) {
          const url = res.data.data.ws_flv; // 或者 wss_flv
          const idx = this.windowClickIndex - 1;

          // 更新播放地址和信息
          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;

        // 阻止默认浏览器右键菜单
        // 注意：VehicleList 组件内部也需要处理 @contextmenu.prevent
      }
    },

    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
            const parts = c.code.replaceAll('_', '-').split('-');
            // 取 sim-channel 部分
            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]) {
                  this.$set(this.videoUrl, i, item.ws_flv);
                  this.$set(this.videoDataList, i, { ...channels[i], videoUrl: item.ws_flv });
                }
              });
            } 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);
    },

    async startCarousel(config) {
      this.carouselConfig = config;
      let targetNodes = [];

      // ... (保留您之前的 startCarousel 完整逻辑，这里简略以节省篇幅，请确保您之前的代码已粘贴进来) ...
      // 如果没有之前的代码，请告诉我，我再发一遍完整的 startCarousel
      // 这里简单模拟一个启动
      this.isCarouselRunning = true;
      this.$message.success("轮播已启动 (需要补全 startCarousel 完整逻辑)");
    },

    // ... 其他轮播辅助函数 (fetchNextBatchData, applyVideoBatch 等) ...
    // 请确保这些函数存在，否则轮播会报错
    fetchNextBatchData() {},
    runCarouselLoop() {},
    applyVideoBatch() {},

    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>