<template lang="pug">
  <div class='monitor_monitor'>
    <el-container style='padding-left:0px;'>
      <el-aside width='333px' style='height:85vh;'>
          <el-card style='height:450px;'>
            <div class="monitor_monitor_left_top">
              <div class="monitor_monitor_left_topL">
                <div :class="[activeName==1?'on':'']" @click="handleClick(1)">摄像头列表</div>
                <div :class="[activeName==2?'on':'']" @click="handleClick(2)">收藏夹</div>
              </div>
              <div style="float:right; margin:5px 5px 0 5px">
                <el-button type="text" size="mini" icon='el-icon-shoucang' @click="treeDataOffClick()"></el-button>
              </div>
              <div class="monitor_monitor_left_topR">
                <el-input suffix-icon="el-icon-search" size="small" v-model="searchInput" clearable></el-input>
              </div>
            </div>
            <div class="tree-container">
              //- <el-tree class="dic_tree" :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' >
              <el-tree class="dic_tree" :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :filter-node-method="filterNode" :props="defaultProps" show-checkbox :check-strictly='true' :default-expand-all='false' @check-change="handleCheckChange" @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' node-key='id' >
                <span class="custom-tree-node" style='width:80%;line-height: 18px;' slot-scope="{ node, data }">
                  <span v-if="node.data.level != 6 && node.data.iconB" class="el-icon-wq-treeIcon1 xa-icon"></span>
                  <span v-if="node.data.level != 6 && !node.data.iconB" class="el-icon-wq-treeIcon xa-icon"></span>
                  <span v-if="node.data.level == 6 && node.data.type=='b6af764f2a6e454490a6b1b3c9057e57'" class="el-icon-wq-treeQiang xa-icon"></span>
                  <span v-if="node.data.level == 6 && node.data.type=='ece0b8b2db27411886254e81134988a3'" class="el-icon-wq-treeQiu xa-icon"></span>
                  <span v-if="node.label.indexOf('在线') == -1 && node.label.indexOf('离线') == -1 ">&nbsp;{{node.label}}</span>
                  <span v-if="node.label.indexOf('在线') > -1">&nbsp;{{node.label.substring(0,node.label.length - 4)}}<span style='color:green;'>[在线]</span></span>
                  <span v-if="node.label.indexOf('离线') > -1">&nbsp;{{node.label.substring(0,node.label.length - 4)}}<span style='color:red;'>[离线]</span></span>
                  <span style="float:right;">
                    <el-button style="padding:0;" v-if="activeName == 2 && node.data.level == 6" type='text' icon="el-icon-delete" @click="treeDataDeleteClick(node,data)" ></el-button>
                  </span>
                  span(v-if=" node.data.iconB" class='el-icon-my-treeFlag')
                </span>
              </el-tree>
            </div>
          </el-card>

          <div style="padding-bottom:40px;">
            <div class="monitor_monitor_left_top">
              <div class="monitor_monitor_left_topL">
                <div :class="[videoTabSta==1?'on':'']" @click="videoTabClick(1)">云台</div>
                <div :class="[videoTabSta==2?'on':'']" @click="videoTabClick(2)">预置点</div>
              </div>
            </div>
            <div class="info-form" v-show="videoTabSta == 1">
              <div class="operate">
                <div class="btns">
                  <img v-show="imgUrl == ''" src="@/assets/images/btns.png" alt="">
                  <img v-show="imgUrl == 's'" src="@/assets/images/s.png" alt="">
                  <img v-show="imgUrl == 'x'" src="@/assets/images/x.png" alt="">
                  <img v-show="imgUrl == 'z'" src="@/assets/images/z.png" alt="">
                  <img v-show="imgUrl == 'y'" src="@/assets/images/y.png" alt="">
                  <img v-show="imgUrl == 'ys'" src="@/assets/images/ys.png" alt="">
                  <img v-show="imgUrl == 'yx'" src="@/assets/images/yx.png" alt="">
                  <img v-show="imgUrl == 'zs'" src="@/assets/images/zs.png" alt="">
                  <img v-show="imgUrl == 'zx'" src="@/assets/images/zx.png" alt="">
                  <div class="fx">方向</div>
                  <div class="zs" @mousedown="clickPTZControl(25,0,'zs')" @mouseup="clickPTZControl(25,1)" title="云台左上">
                  </div>
                  <div class="s" @mousedown="clickPTZControl(21,0,'s')" @mouseup="clickPTZControl(21,1)" title="云台上仰">
                  </div>
                  <div class="ys" @mousedown="clickPTZControl(26,0,'ys')" @mouseup="clickPTZControl(26,1)" title="云台右上">
                  </div>
                  <div class="y" @mousedown="clickPTZControl(24,0,'y')" @mouseup="clickPTZControl(24,1)" title="云台右转">
                  </div>
                  <div class="yx" @mousedown="clickPTZControl(28,0,'yx')" @mouseup="clickPTZControl(24,1)" title="云台右下">
                  </div>
                  <div class="x" @mousedown="clickPTZControl(22,0,'x')" @mouseup="clickPTZControl(22,1)" title="云台下转">
                  </div>
                  <div class="zx" @mousedown="clickPTZControl(27,0,'zx')" @mouseup="clickPTZControl(27,1)" title="云台左下">
                  </div>
                  <div class="z" @mousedown="clickPTZControl(23,0,'z')" @mouseup="clickPTZControl(23,1)" title="云台左转">
                  </div>
                </div>
                <div class="ytBox ytBox2">
                  <div class="bbBtn">
                    <div @mousedown="clickPTZControl(11,0,'right')" @mouseup="clickPTZControl(11,1,'right')" title="变倍+">
                      <img v-show="imgRightUrl11" src="@/assets/images/r1.png" alt="">
                      <img v-show="!imgRightUrl11" src="@/assets/images/r1b.png" alt="">
                    </div>
                    <div @mousedown="clickPTZControl(12,0,'right')" @mouseup="clickPTZControl(12,1,'right')" title="变倍-">
                      <img v-show="imgRightUrl12" src="@/assets/images/r2.png" alt="">
                      <img v-show="!imgRightUrl12" src="@/assets/images/r2b.png" alt="">
                    </div>
                  </div>
                  <div class="bbBtn">
                    <div @mousedown="clickPTZControl(13,0,'right')" @mouseup="clickPTZControl(13,1,'right')" title="变焦+">
                      <img v-show="imgRightUrl13" src="@/assets/images/r3.png" alt="">
                      <img v-show="!imgRightUrl13" src="@/assets/images/r3b.png" alt="">
                    </div>
                    <div @mousedown="clickPTZControl(14,0,'right')" @mouseup="clickPTZControl(14,1,'right')" title="变焦-">
                      <img v-show="imgRightUrl14" src="@/assets/images/r4.png" alt="">
                      <img v-show="!imgRightUrl14" src="@/assets/images/r4b.png" alt="">
                    </div>
                  </div>
                  <div class="bbBtn">
                    <div @mousedown="clickPTZControl(15,0,'right')" @mouseup="clickPTZControl(15,1,'right')" title="光圈+">
                      <img v-show="imgRightUrl15" src="@/assets/images/r5.png" alt="">
                      <img v-show="!imgRightUrl15" src="@/assets/images/r5b.png" alt="">
                    </div>
                    <div @mousedown="clickPTZControl(16,0,'right')" @mouseup="clickPTZControl(16,1,'right')" title="光圈-">
                      <img v-show="imgRightUrl16" src="@/assets/images/r6.png" alt="">
                      <img v-show="!imgRightUrl16" src="@/assets/images/r6b.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="videoTabSta == 2" style="background: #f4f4f4;height: 210px;">

              <div class="mllx" style="padding-top: 8px;">
                <span style="margin-left:8px;">选择预置点：</span>
                <el-select v-model="yzdh" placeholder="请选择"  style="width:67%;height: 40px;background-color: transparent;">
                  <el-option v-for="item in options" :key="item.orderNum" :label="item.orderNum+'、'+item.name" :value="item.orderNum"></el-option>
                </el-select>
              </div>
              <div class="mllx" style="text-align: center;margin-top:15px;">
                //- <el-button type='primary' @click='clickSetPreset()' size='mini' style="width: 47%;">设置</el-button>
                <el-button v-if="isAuth('monitor:monitor:call')" type='primary' @click='clickGoPreset()' size='mini' style="width: 95%;height: 40px;">调用</el-button>
              </div>
            </div>
          </div>
      </el-aside>
      <el-main style="padding:0px; height:755px;">
        <el-card style="height:99.5%;position:relative;" class="videoBg">

          <el-row v-for="(rowItem,rowIndex) in videoList.size" :key="rowIndex" :span="24" >
            <el-col :style="colHeight" v-for="(colItem,colIndex) in videoList.size" :key="colIndex" :span="24/videoList.size" style='border:1px solid #000;'>
              <div style="background:#000; height:inherit;"  @click="videoClick(videoList.list[(rowIndex*videoList.size)+colIndex])">
                <video v-if="videoList.list[(rowIndex*videoList.size)+colIndex]" height="100%" width="100%" style="object-fit:fill;" :id="'video'+((rowIndex*videoList.size)+colIndex*1)" ref="video" src="" muted autoplay controls></video>
                <img v-else style="height:100%; width:100%" src="@/assets/images/videoImg.png" alt="">
              </div>
            </el-col>
          </el-row>

          <div class="vidoeSizeButton" v-if='videoList.list.length>0'>
            <div class="vidoeSizeButton_buttonList">
              <div class="vidoeSizeButton_button" :class="[videoButtonSta == 1?'on':'']">1x</div>
              <div class="vidoeSizeButton_button" :class="[videoButtonSta == 2?'on':'']">4x</div>
              <div class="vidoeSizeButton_button" :class="[videoButtonSta == 3?'on':'']">9x</div>
              <div class="vidoeSizeButton_button" :class="[videoButtonSta == 4?'on':'']">16x</div>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getUUID } from '@/util'
import Vue from 'vue'
import { isAuth } from '../../../util'
let that
export default {
  name: 'sys-user',
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 20) {
        return value.slice(0, 20) + '...'
      }
      return value
    }
  },
  data () {
    return {
      flvPlayer: null,
      isFor: 0,
      imgUrl: '',
      imgRightUrl11: false,
      imgRightUrl12: false,
      imgRightUrl13: false,
      imgRightUrl14: false,
      imgRightUrl15: false,
      imgRightUrl16: false,
      actionList: ['', '', '', '', '', '', '', '', '设置预置点', '清除预置点', '', '变倍+', '变倍-', '变焦+',
      '变焦-', '光圈+', '光圈-', '', '', '', '', '上仰', '下俯', '左转', '右转', '左上', '右上', '左下',
      '右下', '自动扫描', '', '', '', '', '', '', '', '', '', '转到预置点'],
      dataForm: {},
      yzdh: '',
      options: [],
      videoButtonSta: 1,
      videoTabSta: 1,
      isCollapse: true,
      treeData: [],
      defaultExpandedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        level1: 'level'
      },
      nodeKey: 'id',
      checkedData: {
        lineId: '',
        lineName: '',
        stationId: '',
        stationName: '',
        subSystem: '',
        tierId: '',
        tierName: '',
        resourceId: '',
        sId: localStorage.getItem('stationId'),
        subCode: '01'
      },
      currentNode: {},
      checkedKeysOrigin: [], //资源树选中
      checkedKeysEnshrine: [], //收藏夹选中
      checkedKeys: [], //应展示的选中
      activeName: '1',
      searchInput: '',
      colHeight: '233px',
      videoList: {
        size: 1,
        signArr: [],
        list: []
      }
    }
  },
  components: {
  },
  watch: {
    searchInput (val) {
      this.$refs.tree.filter(val)
    }
  },
  created () {
    that = this
    this.initTreeStationMap()
  },
  mounted() {
    // 用于监听浏览器切换Tab页
    document.addEventListener('visibilitychange', function() {
      let videoEleObj = document.getElementsByTagName('video') // 获取当前页面video节点
      console.log('videoEleObj', videoEleObj)
      // 用户离开了当前页面
      if (document.visibilityState === 'hidden') {
        //   console.log('hidden');
      }

      // 用户打开或回到页面
      if (document.visibilityState === 'visible') {
        // 防止视频延时
        for (let video in videoEleObj) {
          let buffered = videoEleObj[video].buffered
          if (buffered && buffered.length > 0) {
            videoEleObj[video].currentTime = buffered.end(0) - 0.5
          }
        }
      }
    })
  },
  methods: {
    // 树节点过滤
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    clickPTZControl (ptz, dwStop, img) {
      // console.log(this.videoList, '======')
      // if (this.videoList.list && this.videoList.list.length > 1) {
      //   this.$message.warning('请选择一个摄像头操作')
      //   return
      // }
      if (!this.videoList.list || this.videoList.list.length == 0 || this.videoList.list[this.videoList.list.length - 1].data.type == 'b6af764f2a6e454490a6b1b3c9057e57') {
        if (ptz < 11 || ptz > 16) {
          return
        }
      }
      if (!isAuth('monitor:monitor:corona')) {
        this.$message({
          type: 'warning',
          message: '没有操作权限，请联系管理员',
          duration: 1000
        })
        return
      }

      if (img && img != 'right') {
        this.imgUrl = img
      }
      if (dwStop) {
        this.imgUrl = ''
      }
      if (img && img == 'right') {
        this['imgRightUrl' + ptz] = true
      }
      if (dwStop && img == 'right') {
        this['imgRightUrl' + ptz] = false
      }
      this.$http({
        url: this.$http.adornUrlEq('/camera/ptzControl'),
        method: 'post',
        data: {
          resourceId: this.currentNode.id,
          stationId: this.currentNode.stationId,
          userId: localStorage.getItem('userId'),
          levelType: 1,
          controlType: 3,
          ip: this.currentNode.addressCode, //ip地址
          port: this.currentNode.port, //端口
          username: this.currentNode.username, //账号
          password: this.currentNode.password, //密码
          brand: this.currentNode.brand, //品牌
          channel: this.currentNode.byx1, //通道
          stream: 'main', //主码流
          dwPtzCommand: ptz, //云台控制命令
          dwStop: dwStop //云台控制0开始和1结束
        }
      }).then(data => {
        if (data && data.code === 0) {
          if (dwStop == 0) { //云台控制0开始和1结束
            this.saveLog(1, ptz)// 执行结果 成功 1  失败 2
            this.$message.success(data.msg)
          }
        } else {
          if (dwStop == 0) { //云台控制0开始和1结束
            this.saveLog(2, ptz)// 执行结果 成功 1  失败 2
            this.$message.error(data.msg)
          }
        }
      })
    },
    //调用日志保存记录操作指令
    saveLog (result, ptz) {
      this.$http({
        url: this.$http.adornUrlEq('/orVideoMonitor/save'),
        method: 'post',
        data: {
          actionName: this.actionList[ptz],
          resourceId: this.currentNode.id,
          stationId: this.currentNode.stationId,
          type: this.currentNode.type,
          result: result
        }
      }).then(data => {

      })
    },
    videoClick(now) {
      if (now) {
        this.currentNode = now.data
      } else {
        this.currentNode = null
      }
    },
    handleClick(tab, event) { //左侧tab切换
      if (tab) {
        this.activeName = tab
      }

      if (this.activeName == 1) {
        //由收藏夹切换过来，先查询收藏夹选中节点key
          this.checkedKeysEnshrine = this.$refs.tree.getCheckedKeys()
          // console.log('this.checkedKeysEnshrine:', this.checkedKeysEnshrine)
          this.checkedKeys = this.checkedKeys.concat(this.checkedKeysEnshrine.filter(v => !this.checkedKeys.includes(v))) // [1,2,3,4,5]
          // console.log('this.checkedKeys:', this.checkedKeys)
          // this.videoList.list = ''
          // this.videoList.list = []
          // this.videoList.size = 1
          // this.videoButtonSta = 1
        this.initTreeStationMap()
      } else {
        //切换至收藏夹，先查询源选中节点key
          this.checkedKeysOrigin = this.$refs.tree.getCheckedKeys()
          // console.log('this.checkedKeysOrigin:', this.checkedKeysOrigin)
          this.checkedKeys = this.checkedKeys.concat(this.checkedKeysOrigin.filter(v => !this.checkedKeys.includes(v))) // [1,2,3,4,5]
          // console.log('this.checkedKeys:', this.checkedKeys)
          // this.videoList.list = ''
          // this.videoList.list = []
          // this.videoList.size = 1
          // this.videoButtonSta = 1
          this.initTreeStationMap(true)
      }
    },
    //重新计算选中的key
    reCalCheckedKeys() {
      let keys = this.$refs.tree.getCheckedKeys()
      this.checkedKeys = this.checkedKeys.concat(keys.filter(v => !this.checkedKeys.includes(v))) // [1,2,3,4,5]
    },
    videoTabClick(now) {
      this.videoTabSta = now
    },
    treeDataDeleteClick(node, data) { //左侧tree取消收藏按钮
      this.$confirm('确认取消该收藏?', '取消收藏', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
      .then(() => {
        this.$http({
          url: this.$http.adornUrlEq('/liEnshrine/delete'),
          method: 'post',
          data: {
            resourceId: node.data.id,
            stationId: this.checkedData.sId
          }
        }).then(data => {
          if (data && data.code === 0) {
            this.$message.success('取消收藏成功')
            this.initTreeStationMap(true)
          }
        })
      })
    },
    treeDataOffClick () { //左侧tree收藏按钮
      let node = this.$refs.tree.getCurrentNode()
      if (node) {
        if (node.level != 6) {
          this.$message.warning('只能收藏资源点')
          return
        }
      } else {
        this.$message.warning('未选择资源点')
        return
      }

      this.$http({
        url: this.$http.adornUrlEq('/liEnshrine/save'),
        method: 'post',
        data: {
          resourceId: node.id,
          stationId: this.checkedData.sId
        }
      }).then(data => {
        if (data && data.code === 0) {
          if (data.msg === '收藏成功') {
            this.$message.success(data.msg)
          } else {
            this.$message.warning(data.msg)
          }
        }
      })
    },
    //初始化站点下的资源点
    initTreeStationMap(save) {
      this.treeData = []
      // console.log(this.videoList.list, '111')
      let url = ''
      if (!save) { // 摄像头列表接口路径
        url = this.$http.adornUrlEq('/liResource/getStationMapCodeTreeList')
      } else { // 收藏夹接口路径
        url = this.$http.adornUrlEq('/liEnshrine/getEnshrineStationMapTreeList')
      }
      this.$http({
        url: url,
        method: 'post',
        data: {
          subCode: this.checkedData.subCode,
          stationId: this.checkedData.sId,
          resourceName: this.searchInput,
          byx1: 'sp'
        }
      }).then(data => {
        if (data && data.code === 0) {
          this.treeData = data.nodes
          if (this.treeData && this.treeData.length > 0) {
            this.$refs.tree.updateKeyChildren(this.checkedData.sId, data.nodes)
            Vue.set(this.treeData[0], 'iconB', true)
          }
        }
      }).then(() => {
        if (this.treeData && this.treeData.length > 0) {
          this.defaultExpandedKeys = [this.treeData[0].id]
          //设置选中的节点
          this.isFlag(this.treeData, this.treeData[0].id)
          this.$nextTick(() => {
            this.$refs.tree.setCurrentNode(this.treeData[0])
            this.$refs.tree.setCheckedKeys(this.checkedKeys)
          })
        }
        this.currentNode = null
      })
    },
    //初始化每个摄像头的预置点信息
    sysPresetList(id) {
      this.$http({
        url: this.$http.adornUrlEq('/sysPreset/queryByResourceId'),
        method: 'post',
        data: {
          resourceId: id,
          stationId: this.checkedData.sId,
          page: this.pageIndex,
          rows: 100
        }
      }).then(data => {
        if (data && data.code === 0) {
          this.options = data.page
        }
      })
    },
    isFlag(data, id) {
      data.forEach(res => {
        if (res.id === id) {
            Vue.set(res, 'iconB', true)
        } else {
            Vue.set(res, 'iconB', false)
        }
        if (res.children) {
          this.isFlag(res.children, id)
        }
      })
    },
    //设置预置点号
    clickSetPreset() {
      if (this.yzdh) {
        this.$http({
          url: this.$http.adornUrlEq('/camera/presetControl'),
          method: 'post',
          data: {
            resourceId: this.currentNode.id,
            stationId: this.currentNode.stationId,
            userId: localStorage.getItem('userId'),
            levelType: 1,
            controlType: 3,
            ip: this.currentNode.addressCode, //ip地址
            port: this.currentNode.port, //端口
            username: this.currentNode.username, //账号
            password: this.currentNode.password, //密码
            channel: '1', //通道
            // stream:'main',//主码流
            preset: this.yzdh, //预置点号
            dwPtzCommand: 8 //云台控制命令，8=设置预置点，9=清除预置点，39=转到预置点
          }
        }).then((data) => {
            if (data && data.code === 0) {
              this.$message.success(data.msg)
              this.saveLog(1, 8)// 执行结果 成功 1  失败 2
            } else {
              this.$message.error(data.msg)
              this.saveLog(2, 8)// 执行结果 成功 1  失败 2
            }
          })
      } else {
        this.$message.warning('请选择预置点!')
      }
    },
    // 调用转动到指定预制点号
    clickGoPreset() {
      if (this.yzdh) {
        this.$http({
          url: this.$http.adornUrlEq('/camera/presetControl'),
          method: 'post',
          data: {
            resourceId: this.currentNode.id,
            stationId: this.currentNode.stationId,
            userId: localStorage.getItem('userId'),
            levelType: 1,
            controlType: 3,
            ip: this.currentNode.addressCode, //ip地址
            port: this.currentNode.port, //端口
            username: this.currentNode.username, //账号
            password: this.currentNode.password, //密码
            channel: this.currentNode.byx1, //通道
            // stream:'main',//主码流
            preset: this.yzdh, //预置点号
            dwPtzCommand: 39 //云台控制命令，8=设置预置点，9=清除预置点，39=转到预置点
          }
        }).then((data) => {
          if (data && data.code === 0) {
            this.$message.success(data.msg)
            this.saveLog(1, 39)// 执行结果 成功 1  失败 2
          } else {
            this.$message.error(data.msg)
            this.saveLog(2, 39)// 执行结果 成功 1  失败 2
          }
        })
      } else {
        this.$message.warning('请选择预置点!')
      }
    },
    //线路资源点树节点勾选事件
    handleCheckChange(node, checked, indeterminate) {
      // console.log(node, checked, indeterminate)
      //第一次选中
      console.log('this.checkedKeys.length:' + this.checkedKeys.length)
      if (this.checkedKeys.length === 0) {
        this.videoList.list = []
        this.videoList.signArr = []
        this.videoList.size = 0
        this.videoButtonSta = 1
      }
      let id = node.id
      if (checked) {
        console.log('选中节点：', this.checkedKeys)
        let checkedIdx = this.checkedKeys.findIndex(item => item === id)
        if (checkedIdx >= 0) {
          return
        }
        this.reCalCheckedKeys()
        //判断，如果摄像头选择个数达到16个，则不能再进行选择，并进行提示
        if (this.videoList.list.length == 16) {
          this.$message.warning('您选择的摄像头个数超过了当前系统界面最大支持数!')
          return
        }
        // if (this.currentNode === null) {
          // console.log('切换tab后第一次选中，清空之前list数据')
          // this.videoList.list = []
          // this.videoList.signArr = []
          // this.videoList.size = 1
          // this.videoButtonSta = 1
        // }

        this.treeData.forEach(res => {
          if (res.id === id) {
            Vue.set(res, 'iconB', true)
          } else {
            Vue.set(res, 'iconB', false)
          }
        })
        this.currentNode = node
        this.$nextTick(() => {
           this.$refs.tree.setCurrentNode(node)
        })
        this.yzdh = null
        //视频直播
        // var src = 'ws://10.20.72.26:8000/live/' + node.byx1 + '.flv'
        var src = ''
        this.$http({
          url: this.$http.adornUrlEq('/camera/camerasPlay'),
          method: 'post',
          data: {
            id: node.id,
            stationId: node.stationId,
            userId: localStorage.getItem('userId'),
            levelType: 1,
            controlType: 3
          }
        }).then(data => {
          src = data.url
          //循环判断一下，是否存在已经取消的播放，如果存在则替换已经取消的位置进行播放
          var bj = 0, bb = 0
          for (let i = 0; i < this.videoList.list.length; i++) {
            var sign = this.videoList.signArr[i]
            if (sign == 0) {
              bj = 1
              bb = i
              break
            }
          }
          //如果标记不等于0，则说明存在已经取消的播放窗口，需要替换播放
          if (bj != 0) {
            this.videoList.list[bb] = { src: src, data: node }
            this.videoList.signArr[bb] = 1
          } else {
            this.videoList.list.push({ src: src, data: node })
            this.videoList.signArr.push(1)
            if (this.videoList.list.length <= 1) {
              this.videoList.size = 1
              this.videoButtonSta = 1
            } else if (this.videoList.list.length > 1 && this.videoList.list.length <= 4) {
              this.videoList.size = 2
              this.videoButtonSta = 2
            } else if (this.videoList.list.length > 4 && this.videoList.list.length <= 9) {
              this.videoList.size = 3
              this.videoButtonSta = 3
            } else if (this.videoList.list.length > 9 && this.videoList.list.length <= 16) {
              this.videoList.size = 4
              this.videoButtonSta = 4
            }
            this.colHeight = 'height:' + (755 / this.videoList.size - 3) + 'px'
            if (this.videoList.list.length == 10) {
              //勾选中第十个，第九个必然会黑屏，现在写重新加载
              //先把第九个给停掉，然后过一秒后，重新加载
              var flvPlayer = this.videoList.list[8].flvPlayer
              flvPlayer.pause()
              flvPlayer.unload()
              flvPlayer.detachMediaElement()
              flvPlayer.destroy()
              flvPlayer = null
              this.videoList.list[8].flvPlayer = null
              setTimeout(() => { //设置延迟执行
                var flvPlayer = flvjs.createPlayer({
                  type: 'flv',
                  enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
                  isLive: true, //直播模式
                  hasAudio: false, //关闭音频
                  hasVideo: true,
                  stashInitialSize: 128,
                  enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
                  url: this.videoList.list[8].src
                })
                this.$nextTick(function () {
                  flvPlayer.attachMediaElement(this.$refs.video[8])
                  this.videoList.list[8].flvPlayer = flvPlayer
                  flvPlayer.load()
                })
              }, 1000)
            }
          }
          // console.log('videoList:', this.videoList)
          //视频连接
          if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
              type: 'flv',
              enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
              isLive: true, //直播模式
              hasAudio: false, //关闭音频
              hasVideo: true,
              stashInitialSize: 128,
              enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
              url: src
            })
            this.$nextTick(function () {
              if (bj != 0) {
                flvPlayer.attachMediaElement(this.$refs.video[bb])
                this.videoList.list[bb].flvPlayer = flvPlayer
              } else {
                flvPlayer.attachMediaElement(this.$refs.video[this.videoList.list.length - 1])
                this.videoList.list[this.videoList.list.length - 1].flvPlayer = flvPlayer
              }
              flvPlayer.load()
            })
          }
          this.sysPresetList(node.id)
        })
      } else {
        console.log('反勾选！')
        this.checkedKeys.forEach((e, i) => {
          if (e === id) {
            this.checkedKeys.splice(i, 1)
          }
        })
        //没有选中对象，证明没有任何被选中，测试为切换tab，不执行删除
        // if (this.currentNode === null) {
        //   // console.log('没有选中对象，证明没有任何被选中，测试为切换tab，不执行删除')
        //   return
        // }
        //取消选择 删除记录
        var index = this.videoList.list.findIndex(function(item) {
          return item.data.id == id
        })
        var flvPlayer = this.videoList.list[index].flvPlayer
        flvPlayer.pause()
        flvPlayer.unload()
        flvPlayer.detachMediaElement()
        flvPlayer.destroy()
        flvPlayer = null
        this.videoList.list[index].flvPlayer = null
        this.videoList.signArr[index] = 0
        var winSize = 0
        for (let i = 0; i < this.videoList.signArr.length; i++) {
          const element = this.videoList.signArr[i]
          if (element == 1) {
            winSize++
          }
        }
        if (winSize == 0) {
          console.log('没有播放的画面了:' + winSize)
          this.videoList.list = []
          this.videoList.signArr = []
          this.videoList.size = 0
          this.videoButtonSta = 1
        } else {
          var pd = 0//标记是否变了宫格数量
          if (winSize <= 1 && this.videoList.size != 1) {
            pd = 1
            this.videoList.size = 1
            this.videoButtonSta = 1
          } else if (this.videoList.size != 2 && winSize > 1 && winSize <= 4) {
            pd = 1
            this.videoList.size = 2
            this.videoButtonSta = 2
          } else if (this.videoList.size != 3 && winSize > 4 && winSize <= 9) {
            pd = 1
            this.videoList.size = 3
            this.videoButtonSta = 3
          } else if (this.videoList.size != 4 && winSize > 9 && winSize <= 16) {
            pd = 1
            this.videoList.size = 4
            this.videoButtonSta = 4
          }
          if (pd == 1) {
            console.log('pd标记如果为1，则证明改变了宫格数量:' + this.colHeight + '---:' + this.videoList.size)
            this.colHeight = 'height:' + (755 / this.videoList.size - 3) + 'px'
            var arrPd = []
            //pd标记如果为1，则证明改变了宫格数量
            for (let i = 0; i < this.videoList.signArr.length; i++) {
              const element = this.videoList.signArr[i]
              if (element == 0) {
                //为0则证明该video已经不需要了
                arrPd.push(i)
              }
            }
            if (arrPd) {
              for (let j = arrPd.length; j > 0; j--) {
                const element2 = arrPd[j - 1]
                console.log('element2:' + element2 + '---j:' + j)
                this.videoList.list.splice(arrPd[j - 1], 1)
                this.videoList.signArr.splice(arrPd[j - 1], 1)
              }
              var list = this.videoList.list
              console.log('list.length:' + list.length)

              // this.videoList.list = []
              this.videoList.signArr = []
              for (let k = 0; k < list.length; k++) {
                setTimeout(() => { //设置延迟执行
                  var src = ''
                  this.$http({
                    url: this.$http.adornUrlEq('/camera/camerasPlay'),
                    method: 'post',
                    data: {
                      id: list[k].data.id,
                      stationId: list[k].data.stationId,
                      userId: localStorage.getItem('userId'),
                      levelType: 1,
                      controlType: 3
                    }
                  }).then(data => {
                    src = data.url
                    var flvPlayer2 = this.videoList.list[k].flvPlayer
                    this.videoList.list[k] = { src: src, data: list[k].data }
                    this.videoList.signArr.push(1)
                    //视频连接
                    if (flvjs.isSupported()) {
                      if (flvPlayer2) {
                        flvPlayer2.pause()
                        flvPlayer2.unload()
                        flvPlayer2.detachMediaElement()
                        flvPlayer2.destroy()
                        flvPlayer2 = null
                        this.videoList.list[k].flvPlayer = null
                      }
                      var flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
                        isLive: true, //直播模式
                        hasAudio: false, //关闭音频
                        hasVideo: true,
                        stashInitialSize: 128,
                        enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
                        url: src
                      })
                      this.$nextTick(function () {
                        flvPlayer.attachMediaElement(this.$refs.video[k])
                        this.videoList.list[k].flvPlayer = flvPlayer
                        flvPlayer.load()
                      })
                    }
                  })
                }, 500)
              }
            }
          }
          console.log('video长度：' + this.videoList.list.length + '---sa:' + this.videoList.signArr.length)
        }
      }
    },
    //线路资源点树节点点击事件
    handleNodeClick(node) {
      let id = node.id
      this.isFlag(this.treeData, id)
      if (node.level == 6) {
        let keys = this.$refs.tree.getCheckedKeys(true)
        // console.log(keys, '-------')
        let flag = false
        if (keys) {
          keys.forEach(e => {
            if (e === node.id) {
              flag = true
            }
          })
        }

        if (flag) {
          this.$nextTick(() => {
            this.$refs.tree.setChecked(node.id, false)
            this.$refs.tree.setCurrentKey()
          })
        } else {
          this.currentNode = node
          this.$nextTick(() => {
              this.$refs.tree.setChecked(node.id, true)
          })
        }
        // console.log('1111111111')
      }
    }
  }
}
</script>
<style lang='scss' scoped>

    .dic_tree {
        background: #f4f4f4;
        font-size: 14px;
        transform: translateX(-6px);
        margin-top: 20px;
    }
    .dic_tree /deep/ .el-tree-node__content {
        padding-left: 0px !important;
        .el-checkbox__inner{
            left:4px;
        }
    }

    .dic_tree /deep/ .el-tree-node {
        position: relative;
        padding-left: 16px;
    }

    .dic_tree /deep/ .el-tree-node__children {
        padding-left: 8px;
    }

    .dic_tree /deep/ .el-tree-node :last-child:before {
        height: 38px;
    }

    .dic_tree /deep/ .el-tree > .el-tree-node:before {
        border-left: none;
    }

    .tree-container /deep/ .el-tree > .el-tree-node:after {
        border-top: none;
    }

    .dic_tree /deep/ .el-tree-node:before {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .dic_tree /deep/ .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .dic_tree /deep/ .el-tree-node:before {
        border-left: 1px dashed #bfbfbf;
        bottom: 0px;
        height: 100%;
        top: -26px;
        width: 1px;
    }

    .dic_tree /deep/ .el-tree-node:after {
        border-top: 1px dashed #bfbfbf;
        height: 20px;
        top: 12px;
        width: 36px;
    }
    .tree-container /deep/ .el-tree > .el-tree-node:after {
        border-top: none;
    }

    .tree-container {
        /* 树的parent，样式自定 */
    }
    .dic_tree /deep/ .el-tree-node__expand-icon.expanded {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    .dic_tree /deep/ .el-icon-caret-right:before {
        background: url("../../../assets/images/add.png");
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        font-size: 18px;
        background-size: 18px;
    }
    .dic_tree
    /deep/
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        background: url("../../../assets/images/sub.png");
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        font-size: 18px;
        background-size: 18px;
    }
    .dic_tree /deep/.el-tree-node__content > .el-tree-node__expand-icon{
      padding:0px;
    }
    .dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
        opacity: 0;
    }
    .dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
      // margin-left: -15px !important;
    }
</style>
<style lang='scss'>
    .info-form {
      padding: 10px;
    }
.inputWidth {
  width: 130px;
}

.resource-container {
  width: 100%;
  height: 100%;
  position: relative;
  border: 0px solid black;
  overflow: auto;
}

.monitor_monitor{
  .el-card__body{
    padding: 0;
    border: none;
  }
  .el-aside{
    .el-tree{
      background: #f4f4f4;
      font-size: 12px;
       overflow-y:scroll;
      height: 370px;
      .el-tree-node__content{
        width: 100%;
      }
    }
    .el-card__body{
      padding: 0;
    }
    .el-card {
      height: 490px;
      background: #f4f4f4;
    }
    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
      background-color: #f4f4f4 !important;
      color: #fff !important;
      .el-button--text{
        color: #fff;
      }
      .custom-tree-node{
        background-color:#35aff8 !important;
      }
    }
  }

  .monitor_monitor_left_top{
    height: 50px; background: #e1edf4; padding-left:10px;
    .monitor_monitor_left_topL{
      height: 40px; padding-top:10px; float: left;
      div{
        height: 40px;  float: left; padding: 0 10px 0 10px; line-height: 40px; cursor:pointer; font-size: 14px;
        border: 1px solid transparent;
        span{
          color:#35aff8;
        }
      }
      div.on{
        background: #fff; border: 1px solid #c3c3c3 ; border-bottom: none;font-family:Microsoft YaHei;
        font-weight:400;
      }
    }
    .monitor_monitor_left_topR{
      float: right;margin-top: 10px;
      .el-input{
        width: 109px;
      }
    }
  }

  .operate {
    padding: 5px 0;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    border-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.5),
        rgba(213, 213, 213, 0.5),
        rgba(255, 255, 255, 0.5),
        rgba(218, 218, 218, 0.5),
        rgba(255, 255, 255, 0.5)
      )
      2 2;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    .btns {
      width: 194px;
      height: 194px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      div {
        cursor: pointer;
        padding: 10px;
      }
      .s {
        position: absolute;
        top: 10px;
        left: 75px;
        width: 24px;
        height: 24px;
      }
      .x {
        position: absolute;
        bottom: 10px;
        left: 75px;
        width: 24px;
        height: 24px;
      }
      .z {
        position: absolute;
        top: 75px;
        left: 10px;
        width: 24px;
        height: 24px;
      }
      .y {
        position: absolute;
        top: 75px;
        right: 10px;
        width: 24px;
        height: 24px;
      }
      .zs {
        position: absolute;
        top: 32px;
        left: 32px;
        width: 24px;
        height: 24px;
      }
      .zx {
        position: absolute;
        bottom: 32px;
        left: 32px;
        width: 24px;
        height: 24px;
      }
      .ys {
        position: absolute;
        top: 32px;
        right: 32px;
        width: 24px;
        height: 24px;
      }
      .yx {
        position: absolute;
        bottom: 32px;
        right: 32px;
        width: 24px;
        height: 24px;
      }
      .fx {
        position: absolute;
        padding: 0;
        cursor: default;
        top: 50%;
        left: 50%;
        width: 65px;
        height: 65px;
        background: #ececec;
        border-radius: 50%;
        line-height: 65px;
        text-align: center;
        color: #969696;
        transform: translate(-50%, -50%);
      }
    }
    .ytBox {
      width: 90px;
      font-size: 16px;
      padding: 10px 0 10px 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .mllx {
        display: flex;
        justify-content: space-between;
        width: 90%;
        span {
          line-height: 40px;
          text-align: center;
          width: 35%;
        }
      }
      .bbBtn {
        height: 40px;
        display: flex;
        margin-left: 10px;
        justify-content: flex-start;
        div {
          width: 40px;
          height: 40px;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .vidoeSizeButton{
    width: 100%; height: 25px; background: #4F789D; padding-top: 5px;
    position: absolute;
    bottom: 0;
    .vidoeSizeButton_buttonList{
      float: right;
      .vidoeSizeButton_button{
        height: 18px; width: 30px; background: #476C8D; color: #B3BFCB; line-height: 18px; text-align:center; float: left; margin-right: 2px; font-size: 12px;
      }
      .vidoeSizeButton_button.on{
        color: #fff; background: #6186A7;
      }
    }
  }
}
.videoBg{
  background: url('~@/assets/images/videoImg.png');
  background-size: 100% 100%;

}
</style>
