<template>
    <div class="realTimeManage" style="width: 100%;height: 80vh;background-color: #ffffff;box-shadow: 10px 10px 5px #000000;">
            <div class="left">
              <div class="leftTop">
                <div class="title1">
                  实时监控
                </div>
                <div class="controlDeck">
                    <div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                    </div>
  
                    <div>
                      <div>聚焦</div>
                      <div>缩放</div>
                      <div>光圈</div>
                    </div>
                </div>
                <div class="monitorList" >
                  <!--  -->
                  <el-tree :data="monitorList"  icon="el-icon-search" node-key="id" :default-expanded-keys="[1]"
                    @node-click="handleNodeClick" :render-content="renderContent" style="font-size: 14px;"/>
                </div>
              </div>
              <div class="rightTop">
                  <div class="title">
                    <el-tabs v-model="splitScreenName" class="demo-tabs" @tab-click="splitScreenClick">
                      <el-tab-pane label="一画面" class="realTimeManage" name="first">
                        <div style="width: 100%;height: 52vh;">
                          <video id="video" class="vjs-default-skin" autoplay controls preload="none"
                            style="height:100%;width:100%;object-fit: fill"></video>
                        </div>
                      </el-tab-pane>
                      <el-tab-pane label="四画面" class="personManage" name="second">
                        <<!-- div style="width: 100%;height: 52vh;">
                          <video id="video" class="vjs-default-skin" autoplay controls preload="none"
                            style="height:50%;width:50%;object-fit: fill"></video>
                          <video id="video" class="vjs-default-skin" autoplay controls preload="none"
                            style="height:50%;width:50%;object-fit: fill"></video>
                          <video id="video" class="vjs-default-skin" autoplay controls preload="none"
                            style="height:50%;width:50%;object-fit: fill"></video>
                          <video id="video" class="vjs-default-skin" autoplay controls preload="none"
                            style="height:50%;width:50%;object-fit: fill"></video>
                        </div> -->
                      </el-tab-pane>
                    </el-tabs>
                  </div>
              </div>
              <div class="down">
                <div v-for="(item, index) in violationPhoto" :key="item.id">
                  <div>
                    <img :src="item.path" style="width: 100%;height: 100%;"/>
                  </div>
                  <div>
                    <span>{{ item.cameraName }}</span>
                    <span>{{ item.time }}</span>
                  </div>
                  <div>{{ item.content }}</div>
                </div>
  
  
              </div>
            </div>
            <div class="right">
              <div>预警信息</div>
              <div>
                <el-table :data="tableData" style="width: 100%" :show-header="false">
                  <el-table-column prop="deviceType" label="设备类型"/>
                  <el-table-column prop="deviceName" label="设备名称"/>
                  <el-table-column prop="time" label="预警时间" />
                  <el-table-column prop="warnContent" label="预警内容" />
                </el-table>
                <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
                  :background="true" layout="prev, pager, next, jumper,->,total, sizes" :total="total"
                  @current-change="getHasRole" @size-change="handler" />
              </div>
            </div>
    </div>
  </template>
  
  <script>
  import { include } from '../../../../utils/video/include.js'
  import { video } from '../../../../utils/video/video-7.19.1.min.js'
  import { flv } from '../../../../utils/video/flv.js'
  import { talk } from '../../../../utils/video/talk.js'
  import { h5live } from '../../../../utils/video/h5live-1.0.6.js'
  // import { videoPage } from '../../../../utils/video/videoPage';
  import { videoQX } from '../../../../utils/video/videoQX';
  
  import $ from 'jquery';
  export default {
    name: 'realTimeManage',
    data() {
      return {
        //页码
        pageNo: 1,
        //每页条数
        pageSize: 5,

        //保存球机数据
        monitorList: [
          {
            id: '1',
            label: '工程xxxxxxx',
            children: [
              {
                label: '张三',
                puId: '123123123123'
              },
            ],
          },
          {
            label: '工程xxxxxxx',
            children: [
              {
                label: '张三1',
                puId: '798779798779877'
              },
            ],
          },
          {
            label: '工程xxxxxxx',
            children: [
              {
                label: '#张三2',
                puId: '565445646464654'
              },
            ],
          },
        ],
        splitScreenName: 'first',
        //保存违章照片
        violationPhoto: [{"id": "1", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "2", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "3", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "4", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "5", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "6", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "7", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "8", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "9", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}, {"id": "10", "path": "http://192.168.0.14:1909/file/ynRealName/violationBlack/2024/05/13/08ffd23539df47ed873058a163249ffe005Qblgkgy1h3h38c7wwrj30q70q7gs5.jpg", "cameraName": "违规10", "time": "2024-03-03", "content": "未正确佩戴安全帽10"}]
        //保存表格数据
        ,tableData: [
          {
            deviceType: '监控设备',
            deviceName: 'xxxxx球机',
            time: '2024-03-03',
            warnContent: '人员未佩戴安全帽阿三大苏打啊飒飒大苏打飒飒打撒打撒'
          },{
            deviceType: '监控设备',
            deviceName: 'xxxxx球机',
            time: '2024-03-03',
            warnContent: '人员未佩戴安全帽'
          },{
            deviceType: '监控设备',
            deviceName: 'xxxxx球机',
            time: '2024-03-03',
            warnContent: '人员未佩戴安全帽'
          },{
            deviceType: '监控设备',
            deviceName: 'xxxxx球机',
            time: '2024-03-03',
            warnContent: '人员未佩戴安全帽'
          },
          {
            deviceType: '监控设备',
            deviceName: 'xxxxx球机',
            time: '2024-03-03',
            warnContent: '人员未佩戴安全帽'
          }
        ]
      };
    },
    created() {
    },
    mounted(){
      this.loadExternalScript();
      // const queryParams = this.$route.query;
      // console.log("queryParams");
    },
    methods: {
      async loadExternalScript() {
        try {
          // 假设你的JavaScript文件位于'/path/to/your/script.js'
          const module = await import('../../../../utils/video/videoPage');
          // 如果你需要使用module.export导出的内容，可以在这里进行操作
        } catch (e) {
          console.error('Error loading the external script:', e);
        }
      },



      splitScreenClick(pane, event){
        console.log("pane:", );
        console.log("event:", event);
  
        if(pane.name === 'first'){
  
        }
        if(pane.name === 'second'){
  
        }
      },
      //树组件节点点击
      handleNodeClick(data){
        console.log(data.puId)
      },
      //给梳妆街头不同层级设置不同的icon
      renderContent(h, { node, data }) {
        // 根据层级使用不同的图标
        let icon;
        if (node.level === 1) {
          icon = 'el-icon-coin'; // 第一层使用主页图标
        } else if (node.level === 2) {
          icon = 'el-icon-s-unfold'; // 第二层使用展开图标
        } else {
          icon = 'el-icon-user'; // 其他层级使用平台图标
        }
  
        return (
          <span class="custom-tree-node">
            <i class={icon}></i>
            <span>{node.label}</span>
          </span>
        );
      },

      //
      //分页器设置
      handler(){
          getHasRole()
      },
      //获取表格数据
      getHasRole (page = 1){
        //修改当前页码
        this.pageNo = page;
        /* let request = await reqAllRoleList(pageNo.value, pageSize.value, keyWord.value);
        if (request.data.code == 200) {
            total.value = request.data.data.total;
            roleArr.value = request.data.data.records;
        } */
      }
    }
  };
  </script>
  
  <style scoped>


    .realTimeManage>div>div{
      float: left;
    }
    .realTimeManage .left{
      width: 66%;
      height: 100%;
    }
    .realTimeManage .left>div{
      float: left;
    }
    .realTimeManage .left>.leftTop{
      width: 23%;
      height: 75%;
    }
    .realTimeManage .left>.leftTop>.title1{
      font-weight: 600;
      font-size: 14px;
      color: #333333;
      width: 100%;
      height: 8%;
      display: flex;
      align-items: center;
      text-indent: 20px;
    }
    .realTimeManage .left>.leftTop>.controlDeck{
      width: 100%;
      height: 42%;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1){
      width: 100%;
      height: 85%;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div{
      width: 40px;
      height: 40px;
      cursor: pointer;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(1){
      position: absolute;
      top: 7%;
      left: 6.35%;
      background-image: url('../../../../assets/images/control1.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(2){
      position: absolute;
      top: 12.55%;
      left: 3.7%;
      background-image: url('../../../../assets/images/control2.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(3){
      position: absolute;
      top: 12.5%;
      left: 9%;
      background-image: url('../../../../assets/images/control3.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(4){
      position: absolute;
      top: 18%;
      left: 6.35%;
      background-image: url('../../../../assets/images/control4.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(5){
      position: absolute;
      top: 21.9%;
      left: 1%;
      background-image: url('../../../../assets/images/control5.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(6){
      position: absolute;
      top: 27%;
      left: 1%;
      background-image: url('../../../../assets/images/control6.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(7){
      position: absolute;
      top: 27%;
      left: 5.3%;
      background-image: url('../../../../assets/images/control7.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(8){
      position: absolute;
      top: 27%;
      left: 7.55%;
      background-image: url('../../../../assets/images/control8.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(9){
      position: absolute;
      top: 21.9%;
      left: 11.8%;
      background-image: url('../../../../assets/images/control9.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(1)>div:nth-child(10){
      position: absolute;
      top: 27%;
      left: 11.8%;
      background-image: url('../../../../assets/images/control10.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2){
      width: 100%;
      height: 15%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2)>div{
      color: #06182E; 
      font-size: 14px;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2)>div:nth-child(1){
      margin-left: 9%;
    }
    .realTimeManage .left>.leftTop>.controlDeck>div:nth-child(2)>div:nth-child(3){
      margin-right: 9%;
    }
  
  
    .realTimeManage .left>.leftTop>.monitorList{
      width: 100%;
      height: 50%;
      overflow: auto;
    }
  
    .realTimeManage .left>.leftTop>.monitorList>div:nth-child(1){
      border-top: 0.5px solid #F5F4F4;
    }
  
  
  
    .realTimeManage .left>.rightTop{
      width: 77%;
      height: 75%;
    }
    .realTimeManage .left>.down{
      margin-top: 1%;
      width: 100%;
      height: 23%;
      overflow-x: auto;
      white-space: nowrap;
      overflow-y: hidden;
    }
    .realTimeManage .left>.down>div{
      height: 100%;
      width: 17%;
      margin-left: 2%;
      display: inline-block;
    }
    .realTimeManage .left>.down>div>div:nth-child(1){
      width: 100%;
      height: 68%;
    }
    .realTimeManage .left>.down>div>div:nth-child(2){
      width: 100%;
      height: 16%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .realTimeManage .left>.down>div>div:nth-child(2)>span{
      text-indent: 8px;
      color: #333333;
      font-size: 14px;
    }
    .realTimeManage .left>.down>div>div:nth-child(3){
      width: 100%;
      height: 16%;
      text-indent: 8px;
      color: #333333;
      font-size: 14px;
    }
    .realTimeManage .right{
      margin-left: 1%;
      width:32%;
      height: 100%;
    }
    .realTimeManage .right>div:nth-child(1){
      width: 100%;
      height: 6%;
      color: #333333;
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      text-indent: 20px;
    }
    .realTimeManage .right>div:nth-child(2){
      width: 100%;
      height: 94%;
      overflow: auto;
    }
  
  
  
    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
  }
  /* 滚动槽 */
  
  ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px #e8eceb;
      border-radius: 5px;
  }
  
  /* 滚动条滑块 */
  
  ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: #ffffff;
      -webkit-box-shadow: inset 0 0 6px #cbb7b7;
  }
  
  ::-webkit-scrollbar-thumb:window-inactive {
      background: #e8eceb;
  }
  
  ::-webkit-scrollbar-corner {
      background-color: #e8eceb;
  }
  </style>