<script lang="ts">
export default {
  name: "videomonitor", // 视频监控
};
</script>

<script setup lang="ts">
import { ref, onMounted, nextTick,onBeforeUnmount } from "vue";
import {  ElMessage,ElMessageBox } from "element-plus";
import { getCameraByArea, getSubstationDeviceById } from "@/api/videomonitor/index";
import Cookies from 'js-cookie';
import {getDeviceByType} from "@/api/device";
import JessibucaPlayer from '@/components/jessibuca/index1.vue'
import Classstyle from '@/components/jessibuca/cssindex.vue'
import axios from 'axios';
import { useUserStore } from '@/store/modules/user';
import { localStorage } from '@/utils/localStorage';
import { updatePersonalInfo,queryUserByID } from '@/api/user';
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
import Videorecord from '@/views/videomonitor/videorecord/index.vue';
const userStore = useUserStore();
function getData() {
  getInit()
}
const CameraName = ref("")
const navlist: any = ref([])
const treeData: any = ref([])
navlist.value = [{
  name: '全部'
}, {
  name: '在线'
}, {
  name: '离线'
}]
const activeIndex = ref(0)
const status: any = ref(null)
function navClick(index: any) {
  activeIndex.value = index
  if (activeIndex.value == 0) {
    status.value = null
  } else if (activeIndex.value == 1) {
    status.value = 1
  } else if (activeIndex.value == 2) {
    status.value = 0
  }
  getInit()
}
function getInit() {
  const params = {
    stationId: userStore.stationId,
    deviceName: CameraName.value,
    status: status.value
  }
  getCameraByArea(params).then((res: any) => {
    treeData.value = res.data
  })
}

interface Tree {
  id: string
  label: string
  children?: Tree[]
}
const defaultprops = {
  label: "patroldeviceName",
}

const JessibucaList: any = ref([])


const isLighting = ref("0")
function lightingClick(row: any) { // 灯光方法 
  if (cameraInfo.value.online != "1") {
    return
  }
  if (channelId.value == "" || channelId.value == undefined) {
    ElMessage({
      type: 'error',
      message: '暂时无法调试，请先检查视频监控是否正常！',
    })
    return
  }
  axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=10&parameter1=' + isLighting.value + '&parameter2=128&combindCode2=0', {}).then((res: any) => { })
}
const isInfrared = ref("0")
function infraredClick(row: any) { // 红外方法
  if (cameraInfo.value.online != "1") {
    return
  }
  if (channelId.value == "" || channelId.value == undefined) {
    ElMessage({
      type: 'error',
      message: '暂时无法调试，请先检查视频监控是否正常！',
    })
    return
  }
  axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=13&parameter1=' + isInfrared.value + '&parameter2=128&combindCode2=0', {}).then((res: any) => { })
}
const beforehandPosition = ref(1)
const CameraActive = ref(-1)

const screenNum = ref(1)
for (let i = 0; i < 16; i++) {
  JessibucaList.value.push({
    id: i + 1,
    urls: "",
    hide: false,
    deviceId: "",
    channelId: "",
    patroldeviceId: "",
    issignal: false
  })
 
}
function screenNumClick(num: any) {
  screenNum.value = num
  deviceId.value = JessibucaList.value[0].deviceId
  channelId.value = JessibucaList.value[0].channelId
  CameraActive.value = 0
  CameraCLick(CameraActive.value)
  currentPage.value = 1
  pagingClick(CameraActive.value,num)
  animationInfo()
}
const deviceId = ref("")  // 摄像头国标编号
const channelId = ref("") // 通道国标编号
const isswitch = ref(false) // 连击开关

function videoInit(row: any) {

  if (isswitch.value == true) {
    ElMessage({
      type: 'warning',
      message: '正在加载监控视频！',
    })
    return
  }
  queryRecordDetails()
  isswitch.value = true
  for (let i = 0; i < JessibucaList.value.length; i++) {
        if ((JessibucaList.value[i].deviceId == row.deviceId) && (JessibucaList.value[i].channelId == row.channelId)) {
          JessibucaList.value[i].urls = ""
          JessibucaList.value[i].videofmp4 = ""
          JessibucaList.value[i].deviceId = ""
          JessibucaList.value[i].channelId = ""
          JessibucaList.value[i].patroldeviceId = ""
          JessibucaList.value[i].hide = false
          JessibucaList.value[i].issignal = false
        }
      }
  setTimeout(()=>{
    axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + deviceId.value + '/' + channelId.value, {}).then((res: any) => {
      isswitch.value = false
      if (res.data.data != undefined) {
        JessibucaList.value[CameraActive.value].urls = res.data.data.ws_flv
        JessibucaList.value[CameraActive.value].videofmp4 = res.data.data.fmp4
        JessibucaList.value[CameraActive.value].hide = true
        JessibucaList.value[CameraActive.value].deviceId = row.deviceId
        JessibucaList.value[CameraActive.value].channelId = row.channelId
        JessibucaList.value[CameraActive.value].patroldeviceId = row.patroldeviceId
      } else {
        JessibucaList.value[CameraActive.value].urls = ""
        JessibucaList.value[CameraActive.value].videofmp4 = ""
        JessibucaList.value[CameraActive.value].hide = false
        JessibucaList.value[CameraActive.value].deviceId = row.deviceId
        JessibucaList.value[CameraActive.value].channelId = row.channelId
        JessibucaList.value[CameraActive.value].patroldeviceId = row.patroldeviceId
        JessibucaList.value[CameraActive.value].issignal = true
      }
    }).catch(function (error: any) {
      isswitch.value = false
    })
  },100)

}

function handleNodeClick(data: any, node: any) {
  if (data.children) {
    node.isCurrent = false
    currentNodeKey.value = ""
    nextTick(() => {
      // currentNodeKey.value = orgId.value
    })
  } else {
    // loading.value = true
    // Maindata.value = data
    // orgId.value = data.bayId;
    if (CameraActive.value == -1) {
      ElMessage({
        type: 'error',
        message: '请先选中您所要摆放视频监控的区域！',
      })
      return
    }
    deviceId.value = data.deviceId
    channelId.value = data.channelId
    videoInit(data)
    let patroldeviceId: any = data.patroldeviceId
    const params = {
      id: patroldeviceId,
      channelid:data.channelId
    }
    getSubstationDeviceById(params).then((res: any) => {
      if (res.data == null) {
        cameraInfo.value = {
          patroldeviceName: "",
          type: null,
          place: "",
          duration:"",
          rate:""
        }
      } else {
        cameraInfo.value = res.data
      }
    })
  }
}
const currentNodeKey = ref("")
function updateVideoRecord(){
  const obj = {
    JessibucaList: JessibucaList.value,
    screenNum: screenNum.value
  }
  const params = {
    id: userStore.userId,
    custom1: JSON.stringify(obj),
  }
  updatePersonalInfo(params).then((res:any) => {
  })
}

onBeforeUnmount(() => {
  updateVideoRecord()
  if(timer.value !=null){
    clearInterval(timer.value)
  }
  
})
function mouseleave(){
  updateVideoRecord()
}

function videoRefresh() {
  JessibucaList.value[CameraActive.value].urls = JessibucaList.value[CameraActive.value].urls + '?Math=' + Math.random()
}
const controSpeed = ref(100) // 摄像头转动速度默认值 30
function ptzCamera(command: any) { // 监控视频控制方法\
  isGaoliang.value = command
  if (cameraInfo.value.online != "1") {
    return
  }
  if (channelId.value == "" || channelId.value == undefined) {
    ElMessage({
      type: 'error',
      message: '暂时无法调试，请先检查视频监控是否正常！',
    })
    return
  }
  axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
    if (res.data.data == "0") {
      axios.post(userStore.webApiMonitorUrl + '/api/ptz/control/' + deviceId.value + '/' + channelId.value + '?command=' + command +
        '&horizonSpeed=' + controSpeed.value + '&verticalSpeed=' + controSpeed.value + '&zoomSpeed=' + controSpeed.value, {}).then((res: any) => { })
    }
  })

}
function presetPosition(cmdCode: any, presetPos: any) { // 预置位操作 ---设置、删除、调用
  if (cameraInfo.value.online != "1") {
    return
  }
  if (channelId.value == "" || channelId.value == undefined) {
    ElMessage({
      type: 'error',
      message: '暂时无法调试，请先检查视频监控是否正常！',
    })
    return
  }
  axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
    if (res.data.data == "0") {
      axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=' + cmdCode + '&parameter1=0&parameter2=' + presetPos + '&combindCode2=0', {}).then((res: any) => { })
    }
  })

}
function quxiao(){
  isGaoliang.value = ''
}
function condensationChang(command: any) { // 光聚方法  
  const cmdCode = ref()
  if (command == '加') {
    cmdCode.value = 65
    isGaoliang.value = '65'
  } else if (command == '减') {
    isGaoliang.value = '66'
    cmdCode.value = 66
  }
  if (cameraInfo.value.online != "1") {
    return
  }
  if (channelId.value == "" || channelId.value == undefined) {
    ElMessage({
      type: 'error',
      message: '暂时无法调试，请先检查视频监控是否正常！',
    })
    return
  }
  // 近（42H ）    66    远（41H） 65
  
  axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
    if (res.data.data == "0") {
      axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=' + cmdCode.value + '&parameter1=80&parameter2=0&combindCode2=0', {}).then((res: any) => { })
    }
  })

}
function apertureChang(command: any) { // 光圈方法
  const cmdCode = ref(72)
  if (command == '加') {
    cmdCode.value = 70
    isGaoliang.value = '70'
  } else if (command == '减') {
    cmdCode.value = 72
    isGaoliang.value = '72'
  }
  if (cameraInfo.value.online != "1") {
    return
  }
  if (channelId.value == "" || channelId.value == undefined) {
    ElMessage({
      type: 'error',
      message: '暂时无法调试，请先检查视频监控是否正常！',
    })
    return
  }
  // 缩小（48H ）    72    放大（44H） 70
  
  axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
    if (res.data.data == "0") {
      axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=' + cmdCode.value + '&parameter1=0&parameter2=80&combindCode2=0', {}).then((res: any) => { })
    }
  })
}
function closeVideo(index: any) { // 关闭视频
  JessibucaList.value[index].urls = ""
  JessibucaList.value[index].videofmp4 = ""
  JessibucaList.value[index].hide = false
  JessibucaList.value[index].deviceId = ""
  JessibucaList.value[index].channelId = ""
  JessibucaList.value[index].patroldeviceId = ""
  JessibucaList.value[index].issignal = false
}
const playbackInfo:any = ref({})
const dialogVisible:any = ref(false)
function playbackVideo(index:any){
  playbackInfo.value =  JessibucaList.value[index]
//   channelId: "34020000001320000002"
// deviceId:"34020000001320000002"
// hide: true
// id:1
// issignal: false
// patroldeviceId: "3f2c9db2bc994ed69c4c9ae2e040ae95"
// urls: "ws://192.168.1.151:81/rtp/34020000001320000002_34020000001320000002.live.flv?0.5651038611217907"
// videofmp4:"http://192.168.1.151:81/rtp/34020000001320000002_34020000001320000002.live.mp4"

  if(playbackInfo.value.channelId != null){
    dialogVisible.value = true
  }
  
}
function handleClose(){
  dialogVisible.value = false
}


const cameraInfo: any = ref({
  patroldeviceName: "",
  type: null,
  place: "",
  duration:"",
  rate:""
})
function CameraCLick(index:any) {
  if(isswitch.value == true){
    ElMessage({
        type: 'error',
        message: '正在加载监控视频,请耐心等待！',
    })
    return
  }
  CameraActive.value = index
  deviceId.value = JessibucaList.value[CameraActive.value].deviceId
  channelId.value = JessibucaList.value[CameraActive.value].channelId
  queryRecordDetails()
  const params = {
    id: JessibucaList.value[CameraActive.value].patroldeviceId,
    channelid:JessibucaList.value[CameraActive.value].channelId
  }
  getSubstationDeviceById(params).then((res: any) => {
    if (res.data == null) {
      cameraInfo.value = {
        patroldeviceName: "",
        type: null,
        place: "",
        duration:"",
        rate:""
      }
    } else {
      cameraInfo.value = res.data
    }

  })
}

const CameraTypeList: any = ref([])
function getDict() {
  const params = {
    dictcode: 'CameraType'
  }
  getDeviceByType(params).then((res: any) => {
    CameraTypeList.value = res.data
  })
}
function currency(list: any, itemcode: any) {
  let dictname = ''
  list.forEach((element: any) => {
    if (element.itemcode == itemcode) {
      dictname = element.dictname
    }
  })
  return dictname
}

function timeout(videoUrl: any) {
  for (let i = 0; i < JessibucaList.value.length; i++) {
    if (JessibucaList.value[i].urls == videoUrl) {
      JessibucaList.value[i].hide = false
      JessibucaList.value[i].issignal = true
    }
  }
}
function RefreshLoad(info: any) {
  if(info.deviceId == ""){
    return
  }
  deviceId.value = info.deviceId
  channelId.value = info.channelId
  if (isswitch.value == true) {
    ElMessage({
      type: 'warning',
      message: '正在加载监控视频！',
    })
    return
  }
  isswitch.value = true
  axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + deviceId.value + '/' + channelId.value, {}).then((res: any) => {
    isswitch.value = false
    if (res.data.data != undefined) {
      JessibucaList.value[CameraActive.value].urls = res.data.data.ws_flv
      JessibucaList.value[CameraActive.value].videofmp4 = res.data.data.fmp4
      JessibucaList.value[CameraActive.value].hide = true
      JessibucaList.value[CameraActive.value].deviceId = info.deviceId
      JessibucaList.value[CameraActive.value].channelId = info.channelId
      JessibucaList.value[CameraActive.value].patroldeviceId = info.patroldeviceId
    } else {
      JessibucaList.value[CameraActive.value].urls = ""
      JessibucaList.value[CameraActive.value].hide = false
      JessibucaList.value[CameraActive.value].deviceId = info.deviceId
      JessibucaList.value[CameraActive.value].channelId = info.channelId
      JessibucaList.value[CameraActive.value].patroldeviceId = info.patroldeviceId
      JessibucaList.value[CameraActive.value].issignal = true
    }
  }).catch(function (error: any) {
    isswitch.value = false
  })
}
function allRefresh() {
  for (let i = 0; i < tableData.value.length; i++) {
    if (JessibucaList.value[i + strlength.value].deviceId != '') {
      axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + JessibucaList.value[i + strlength.value].deviceId + '/' + JessibucaList.value[i + strlength.value].channelId, {}).then((res: any) => {
        if (res.data.data != undefined) {
          tableData.value[i].urls = res.data.data.ws_flv + '?' + Math.random()
          tableData.value[i].videofmp4 = res.data.data.fmp4
          tableData.value[i].hide = true
          JessibucaList.value[i + strlength.value].urls = res.data.data.ws_flv + '?' + Math.random()
          JessibucaList.value[i + strlength.value].videofmp4 = res.data.data.fmp4
          JessibucaList.value[i + strlength.value].hide = true
        } else {
          tableData.value[i].urls = ""
          tableData.value[i].videofmp4 = ""
          tableData.value[i].hide = false
          tableData.value[i].issignal = true
          JessibucaList.value[i + strlength.value].urls = ""
          JessibucaList.value[i + strlength.value].videofmp4 = ""
          JessibucaList.value[i + strlength.value].hide = false
          JessibucaList.value[i + strlength.value].issignal = true

        }
      }).catch(function (error: any) {
        isswitch.value = false
      })

    }
  }
}

function allClose() {
  for (let i = 0; i < JessibucaList.value.length; i++) {
    JessibucaList.value[i].urls = ""
    JessibucaList.value[i].videofmp4 = ""
    JessibucaList.value[i].hide = false
    JessibucaList.value[i].deviceId = ""
    JessibucaList.value[i].channelId = ""
    JessibucaList.value[i].patroldeviceId = ""
    JessibucaList.value[i].issignal = false
  }
}



onMounted(() => {
  setTimeout(() => {
    const oBox = document.getElementById('telescopicids')
    const leftid: any = document.getElementById('richleft')
    const contentid: any = document.getElementById('contentid')
    const rightid: any = document.getElementById('richright')
    const idbox: any = document.getElementById('richboxid')
    let X: any, oBoxW: any, oBoxW1: any, oBoxW2: any
    if (oBox) {
      oBox.onmousedown = (ev) => {
        oBox.style.backgroundColor = "#fff"
        var elem = document.createElement('div')
        elem.style.cssText = 'position:absolute;top: 0;width:100%;height:100%;z-index:9999;cursor:w-resize'
        elem.id = 'newMask'
        document.body.appendChild(elem)
        var oEvent = ev || event
        X = oEvent.clientX
        oBoxW = leftid.offsetWidth
        oBoxW1 = contentid.offsetWidth
        oBoxW2 = rightid.offsetWidth
        // // 鼠标移动
        document.onmousemove = (ev) => {
          var oEvent = ev || event
          var XX = oEvent.clientX
          leftid.style.width = 100 / ((idbox.offsetWidth - oBoxW2 - 20) / (oBoxW + (XX - X))) + '%'
          contentid.style.width = 100 / ((idbox.offsetWidth - oBoxW2 - 20) / (oBoxW1 + (X - XX))) + '%'
        }
        // 鼠标移开
        document.onmouseup = (ev) => {
          oBox.style.backgroundColor = ""
          var newMask: any = document.getElementById('newMask')
          if (newMask) {
            newMask.parentNode.removeChild(newMask)
          }
          document.onmousedown = null
          document.onmousemove = null
          // basicsId.style.cursor = ''
        }
      }
    }
  }, 100)
  getVideoList()
  getDict()
  getInit()
})
function getVideoList() {
  const params = {
    id: userStore.userId
  }
  queryUserByID(params).then((res: any) => {
    if (res.data.custom1 != ''&&res.data.custom1 != null) {
      let CookiesName: any =res.data.custom1;
      JessibucaList.value = JSON.parse(CookiesName).JessibucaList
      screenNum.value = JSON.parse(CookiesName).screenNum
      deviceId.value = JessibucaList.value[0].deviceId
      channelId.value = JessibucaList.value[0].channelId
      CameraActive.value = 0
      CameraCLick(CameraActive.value)
      allRefresh()
    } else {
    CameraActive.value = 0
    }
    pagingClick(0,screenNum.value)
  }).catch(()=>{
    CameraActive.value = 0
  })
}
const boxRefs: any = ref([]);
const setRef = (el: any) => {
  if (el) {
    boxRefs.value.push(el);
  }
};
const ishide = ref(true)
function hideClick(is: any) {
  isHideRight.value = is
  let contentid: any = document.getElementById('contentid');
  if (ishide.value == false) {
    ishide.value = true
    contentid.style.width = "calc(100vw - 630px)"
  } else {
    ishide.value = false
    contentid.style.width = "calc(100vw - 325px)"
  }

}
const isHideRight = ref(true)


function GetDateTime(dayNum: any) {
  var dateDay = new Date();
  dateDay.setDate(dateDay.getDate() + dayNum) //获取dayNum天后的日期
  var y = dateDay.getFullYear();
  var m = (dateDay.getMonth() + 1) < 10 ? "0" + (dateDay.getMonth() + 1) : (dateDay.getMonth() + 1); //获取当前月份的日期，不足10补0
  var d = dateDay.getDate() < 10 ? "0" + dateDay.getDate() : dateDay.getDate(); //获取当前几号，不足10补0
  return y + "-" + m + "-" + d;
}



function queryRecordDetails(){
  let startTime = GetDateTime(-90) +' 00:00:00'
  let endTime = GetDateTime(0) +' 23:59:59'
  if(deviceId.value == undefined || deviceId.value ==''){
      return
  }
}

function addVideo(){
  ElMessageBox.confirm(
    '确定新增视频组吗',
    '新增提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then( async () => {

    for (let i = 0; i < 16; i++) {
      JessibucaList.value.push({
        id: 1 + JessibucaList.value.length,
        urls: "",
        hide: false,
        deviceId: "",
        channelId: "",
        patroldeviceId: "",
        issignal: false
      })
    }
    pagingClick(currentPage.value-1,screenNum.value)
  })
}

function delVideo(){
  ElMessageBox.confirm(
    '确定删除视频组吗?',
    '删除提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then( async () => {
    JessibucaList.value.splice(JessibucaList.value.length-16,16)
    pagingClick(0,screenNum.value)
  })
}
const currentPage:any = ref(1)
const tableData:any = ref([])
const total:any = ref(0)
const totalSize:any = ref(0)
const isTimer=ref(false)
const temporaryList:any=ref([])
const strlength:any=ref(0)
const endlength:any=ref(0)
function pagingClick(pageIndex:any ,pageNum:any ){
  
  tableData.value=[]
  temporaryList.value=[]
  if(screenNum.value != 16){
    let num = 0
    for(let a=JessibucaList.value.length -1;a>=0;a--){
      if(JessibucaList.value[a].urls !=""){
        num = a
        break
      }
    }
    if(screenNum.value == 1){
      for(let b=0;b<=num;b++){
        temporaryList.value.push(JessibucaList.value[b])
      }
      total.value = num + 1
    }else if(screenNum.value == 4 || screenNum.value == 9){
      for(let b=0;b<=num;b++){
        temporaryList.value.push(JessibucaList.value[b])
      }
      total.value = num + 1
      let remainder = 0
      
      remainder = (num + 1)%screenNum.value
      if((num + 1)<screenNum.value){
        remainder = screenNum.value - remainder
      }
      for(let c=0;c<remainder;c++){
        temporaryList.value.push({
          id: 1 + temporaryList.value.length,
          urls: "",
          hide: false,
          deviceId: "",
          channelId: "",
          patroldeviceId: "",
          issignal: false
        })
      }
    }

  }else{
    temporaryList.value= JessibucaList.value
    total.value = JessibucaList.value.length
  }
  
  strlength.value = pageNum * (pageIndex);
  endlength.value = pageNum  * (pageIndex + 1);
  totalSize.value = Math.ceil(temporaryList.value.length/pageNum)
  if(endlength>temporaryList.value.length){
    endlength.value = temporaryList.value.length
    }
  //第五步：循环获取当前页数的数据，放入展示的数组中
  for (let i = strlength.value; i < endlength.value; i++) {
    tableData.value.push(temporaryList.value[i]);
  }
  setTimeout(()=>{
    allRefresh()
  },100)

  
}
const handleCurrentChange = (val: number) => {
  pagingClick(val-1,screenNum.value)
  CameraActive.value =screenNum.value * (val-1)
}
const timer:any =ref(null)
//轮播动画
function animationInfo(){
  if(timer.value != null){
    clearInterval(timer.value)
  }
  if(isTimer.value == true){
    var tast = /^\+?[1-9][0-9]*$/; //正整数 
    if(tast.test(minute.value) == false){
      ElMessage({
      type: 'error',
      message: '请输入正整数',
    })
    minute.value = ''
    isTimer.value = false
    return false
    }
    var millisecond = JSON.parse(JSON.stringify(minute.value)) * 60000
    timer.value = setInterval(()=>{
      if(currentPage.value >= totalSize.value){
        currentPage.value = 1
      }else{
        currentPage.value = currentPage.value + 1
      }
      pagingClick(currentPage.value-1,screenNum.value)
      CameraActive.value =screenNum.value * (currentPage.value-1)
    },millisecond)
  }
}
const minute:any =  ref(2)
const isGaoliang:any = ref("")
</script>
<template>
  <div>
    <div id="richboxid" class="videomonitor-box" @mouseleave="mouseleave">
      <div id="richleft" class="videomonitor-left">
        <div class="stationboard-box-title" style="padding-left: 0;">
          <div class="imgname">摄像机列表</div>
        </div>
        <el-input v-model="CameraName" clearable placeholder="请输入摄像头名称" @clear="getData()" @keyup.enter="getData()"
          style="width:100%;margin-top: 10px;" class="videomonitor-input">
          <template #suffix>
            <img src="@/assets/videoimg/u2937.png" style="cursor:pointer ;" @click="getData">
          </template>
        </el-input>
        <div class="nav-box">
          <div class="nav-list" v-for="(item, index) in navlist" :class="{ 'nav-active': activeIndex == index }"
            @click="navClick(index)">
            {{ item.name }}
          </div>
        </div>
        <el-scrollbar style="margin-left:0px ;margin-top:10px ;" height="calc(100vh - 270px)">
          <el-tree :data="treeData" :props="defaultprops" @node-click="handleNodeClick" default-expand-all
            :current-node-key="currentNodeKey" node-key="bayId">
            <template #default="{ node }">
              <span v-if="node.data.type == 10 && node.data.useMode == 10">
                <span v-if="node.level != 1" :style="{ color: node.data.online == '1' ? '#009bff' : 'red' }">
                  <svg style="margin-right: 5px;" t="1682315445615" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="11437" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
                    height="20">
                    <path fill="currentColor" d="M218.3 124.6h77.8l635.8 415.2-223.8 165.5h-48.7L117.7 338.7v-51.9z"
                      p-id="11438"></path>
                    <path fill="currentColor"
                      d="M701.6 799.3c-3.1 0-6.2-0.9-8.9-2.7L138.8 432.5c-7.5-4.9-9.6-15-4.6-22.5 4.9-7.5 15-9.6 22.5-4.6l542.9 356.9 29.6-29.6c6.3-6.3 16.6-6.3 22.9 0 6.3 6.3 6.3 16.6 0 22.9l-38.9 38.9c-3.3 3.2-7.4 4.8-11.6 4.8zM130.7 895.6c-9 0-16.2-7.3-16.2-16.2V530.1c0-9 7.3-16.2 16.2-16.2 9 0 16.2 7.3 16.2 16.2v349.3c0 9-7.3 16.2-16.2 16.2z"
                      p-id="11439"></path>
                    <path fill="currentColor"
                      d="M292.9 721.5H130.7c-9 0-16.2-7.3-16.2-16.2s7.3-16.2 16.2-16.2h153l56.9-95.9c4.6-7.7 14.5-10.2 22.2-5.7 7.7 4.6 10.2 14.5 5.7 22.2l-61.6 103.8c-3 5-8.3 8-14 8z"
                      p-id="11440"></path>
                  </svg>
                </span>
              </span>
              <span v-if="node.data.type == 10 && node.data.useMode == 11">
                <span v-if="node.level != 1" :style="{ color: node.data.online == '1' ? '#009bff' : 'red' }">
                  <svg t="1686725618148" class="icon" viewBox="0 0 1024 1024" version="1.1" style="margin-right: 5px;"
                    xmlns="http://www.w3.org/2000/svg" p-id="2814" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
                    height="18">
                    <path fill="currentColor"
                      d="M954.88 590.72a432.64 432.64 0 0 0-409.6-457.6V0H151.04v64h263.04v76.8c-201.6 38.4-344.96 203.52-344.96 448-1.28 0.64 887.04 4.48 885.76 1.92zM197.76 661.12C198.4 860.16 311.68 1024 512 1024s314.24-161.92 314.24-360.96H197.76zM512 912A85.76 85.76 0 0 1 420.48 832 86.4 86.4 0 0 1 512 752.64 86.4 86.4 0 0 1 603.52 832 85.76 85.76 0 0 1 512 912z"
                      p-id="2815"></path>
                  </svg>
                </span>

              </span>
              <span>{{ node.data.name }}</span>
              <span>{{ node.label }}</span>
            </template>
          </el-tree>
        </el-scrollbar>
      </div>
      <div id="telescopicids" class="telescopicidsbgcolor"
        style="margin-left: 8px; min-width: 4px !important;height: calc(100vh - 90px); cursor:w-resize; z-index:1"></div>
      <div class="videomonitor-content" id="contentid">
        <div class="videomonitor-content-nav">
          <div style="display: flex;align-items: center;">
            <img v-if="screenNum == 1" src="@/assets/videoimg/spjk_1p1.png" alt="">
            <img v-else src="@/assets/monitorsystem/spjk_1p.png" alt="" @click="screenNumClick(1)">
            <img v-if="screenNum == 4" src="@/assets/videoimg/spjk_4p1.png" alt="">
            <img v-else src="@/assets/monitorsystem/spjk_4p.png" alt="" @click="screenNumClick(4)">
            <img v-if="screenNum == 9" src="@/assets/videoimg/spjk_9p1.png" alt="">
            <img v-else src="@/assets/monitorsystem/spjk_9p.png" alt="" @click="screenNumClick(9)">
            <img v-if="screenNum == 16" src="@/assets/videoimg/spjk_16p1.png" alt="">
            <img v-else src="@/assets/monitorsystem/spjk_16p.png" alt="" @click="screenNumClick(16)">
          </div>
          <div style="display: flex;align-items: center;">
            <el-checkbox v-model="isTimer" label="轮播" size="large" @change="animationInfo" style="margin:0 10px 0px 30px">轮播</el-checkbox>
            <el-input v-model="minute"  placeholder=""  oninput="value=value.replace(/^\.+|[^\d]/g,'')" 
              style="margin-right:20px ;width: 80px;height: 28px;" class="videomonitor-input">
              <template #suffix>
                <span>分钟</span>
              </template>
            </el-input>
            <el-pagination
            class="paginationclass"
              background
              v-model:current-page="currentPage"
              :page-size="screenNum"
              :small="true"
              layout="pager"
              :total="total"
              @current-change="handleCurrentChange"
            />
            <div title="添加视频版块" style="position: relative; margin-left:10px;margin-right:5px;cursor:pointer; width:24px;height:24px;font-size:18px;background:rgba(0, 155, 255, 1);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:3px"
              @click="addVideo" v-if="screenNum == 16" >
              <!-- <el-icon><Plus /></el-icon> -->
              <div style="
                  width: 12px;
                  height: 2px;
                  background: inherit;
                  background-color: #fff"></div>
                  <div style="
                  position: absolute;
                  top: 6px;
                  left: 11px;
                  width: 2px;
                  height: 12px;
                  background: inherit;
                  background-color: #fff"></div>
            </div> 

            <div title="删除视频版块" style="cursor:pointer; width:24px;height:24px;font-size:18px;background:rgba(0, 155, 255, 1);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:3px"
              @click="delVideo" v-if="screenNum == 16 && JessibucaList.length>16">
              <div style="
                width: 12px;
                height: 2px;
                background: inherit;
                background-color: #fff"></div>
            </div> 
            <img title="监控视频全部重载" src="@/assets/monitorpublic/spjk_sx.png" style=""
              @click="allRefresh" />
            <img title="监控视频全部关闭" src="@/assets/monitorsystem/spjk_gb.png" style=""
              @click="allClose" />

          </div>
          
          
          
        </div>
        <div class="Jessibuca-box">

          <div class="Camera-img" v-if="screenNum == 1" v-for="(item, index) in tableData" :key="item.id"
            :class="{ 'CameraActive': (item.id -1) == CameraActive }" @click="CameraCLick(item.id - 1)">
           <div style="position: absolute;z-index: 99;color: #fff;
            border-radius:50%;height:22px;width:22px;line-height:22px;text-align:center"> {{ item.id }}</div> 
            <JessibucaPlayer v-if="JessibucaList[index + strlength].hide == true" :isClose="true" :ref="setRef" :_uid="JessibucaList[index + strlength].id" :visible.sync="true"
            :devicechannelInfo="{'deviceId':JessibucaList[index + strlength].deviceId,'channelId':JessibucaList[index + strlength].channelId}" :videofmp4="JessibucaList[index + strlength].videofmp4" :videoUrl="JessibucaList[index + strlength].urls" :hasAudio="false" fluent autoplay live
              @closeVideo="closeVideo" @timeout="timeout" @playbackVideo="playbackVideo"></JessibucaPlayer>
            <Classstyle v-if="JessibucaList[index + strlength].hide == false" :_uid="JessibucaList[index + strlength].id" @closeVideo="closeVideo" :ref="setRef" :VideoInfo="JessibucaList[index + strlength]"
              :issignal="JessibucaList[index + strlength].issignal" @RefreshLoad="RefreshLoad"></Classstyle>
          </div>
          <div class="Camera-img4" v-if="screenNum == 4" v-for="(item, index) in tableData" :key="item.id"
            :class="{ 'CameraActive': (item.id -1) == CameraActive }" @click="CameraCLick(item.id - 1)">
            <div style="position: absolute;z-index: 99;color: #fff;
            border-radius:50%;height:22px;width:22px;line-height:22px;text-align:center"> {{ item.id }}</div> 
            <JessibucaPlayer v-if="JessibucaList[index + strlength].hide == true" :isClose="true" :ref="setRef" :_uid="JessibucaList[index + strlength].id" :visible.sync="true"
            :devicechannelInfo="{'deviceId':JessibucaList[index + strlength].deviceId,'channelId':JessibucaList[index + strlength].channelId}" :videofmp4="JessibucaList[index + strlength].videofmp4" :videoUrl="JessibucaList[index + strlength].urls" :hasAudio="false" fluent autoplay live
              @closeVideo="closeVideo" @timeout="timeout" @playbackVideo="playbackVideo"></JessibucaPlayer>
            <Classstyle v-if="JessibucaList[index + strlength].hide == false" :_uid="JessibucaList[index + strlength].id" @closeVideo="closeVideo" :ref="setRef" :VideoInfo="JessibucaList[index + strlength]"
             :issignal="JessibucaList[index + strlength].issignal" @RefreshLoad="RefreshLoad"></Classstyle>
          </div>
          <div class="Camera-img9" v-if="screenNum == 9" v-for="(item, index) in tableData" :key="item.id"
            :class="{ 'CameraActive': (item.id -1) == CameraActive }" @click="CameraCLick(item.id - 1)">
           <div style="position: absolute;z-index: 99;color: #fff;
            border-radius:50%;height:22px;width:22px;line-height:22px;text-align:center"> {{ item.id }}</div> 
            <JessibucaPlayer v-if="JessibucaList[index + strlength].hide == true" :isClose="true" :ref="setRef" :_uid="JessibucaList[index + strlength].id" :visible.sync="true"
            :devicechannelInfo="{'deviceId':JessibucaList[index + strlength].deviceId,'channelId':JessibucaList[index + strlength].channelId}" :videofmp4="JessibucaList[index + strlength].videofmp4" :videoUrl="JessibucaList[index + strlength].urls" :hasAudio="false" fluent autoplay live
              @closeVideo="closeVideo" @timeout="timeout" @playbackVideo="playbackVideo"></JessibucaPlayer>
            <Classstyle v-if="JessibucaList[index + strlength].hide == false" :_uid="JessibucaList[index + strlength].id" @closeVideo="closeVideo" :ref="setRef" :VideoInfo="JessibucaList[index + strlength]"
              :issignal="JessibucaList[index + strlength].issignal" @RefreshLoad="RefreshLoad"></Classstyle>
          </div>
          <div class="Camera-img16" v-if="screenNum == 16" v-for="(item, index) in tableData" :key="item.id"
            :class="{ 'CameraActive': (item.id -1) == CameraActive }" @click="CameraCLick(item.id - 1)">
           <div style="position: absolute;z-index: 99;color: #fff;
            border-radius:50%;height:22px;width:22px;line-height:22px;text-align:center"> {{ item.id }}</div> 
            <!-- <video style="width:100%;height:100% ;" :src="'http://192.168.1.119:81/rtp/34020000001320000002_34020000001320000002.live.mp4'" autoplay controls /> -->
            <JessibucaPlayer v-if="JessibucaList[index + strlength].hide == true" :isClose="true" :ref="setRef" :_uid="JessibucaList[index + strlength].id" :visible.sync="true"
            :devicechannelInfo="{'deviceId':JessibucaList[index + strlength].deviceId,'channelId':JessibucaList[index + strlength].channelId}" :videofmp4="JessibucaList[index + strlength].videofmp4" :videoUrl="JessibucaList[index + strlength].urls" :hasAudio="false" fluent autoplay live
              @closeVideo="closeVideo" @timeout="timeout" @playbackVideo="playbackVideo"></JessibucaPlayer>
            <Classstyle v-if="JessibucaList[index + strlength].hide == false" :_uid="JessibucaList[index + strlength].id" :ref="setRef" @closeVideo="closeVideo" :VideoInfo="JessibucaList[index + strlength]"
              :issignal="JessibucaList[index + strlength].issignal" @RefreshLoad="RefreshLoad"></Classstyle>
          </div>
        </div>

      </div>
      <div class="videomonitor-righthide" id="righthide">
        <img v-if="isHideRight" style="cursor: pointer;" src="@/assets/publicimg/put1.png" alt="" @click="hideClick(false)">
        <img v-if="!isHideRight" style="cursor: pointer;" src="@/assets/publicimg/putaway.png" alt="" @click="hideClick(true)">
      </div>
      <div class="videomonitor-right" id="richright" v-show="ishide">
        <div class="stationboard-box-title">
          <div class="imgname">云台控制</div>
        </div>
        <div class="Camera-buttons-box">
            <div class="Camera-left-button1" @mousedown="ptzCamera('up')" @mouseup="ptzCamera('stop')"></div>
            <div class="Camera-left-button2" @mousedown="ptzCamera('upright')" @mouseup="ptzCamera('stop')"></div>
            <div class="Camera-left-button3" @mousedown="ptzCamera('right')" @mouseup="ptzCamera('stop')"></div>
            <div class="Camera-left-button4" @mousedown="ptzCamera('downright')" @mouseup="ptzCamera('stop')"></div>
            <div class="Camera-left-button5"  @mousedown="ptzCamera('down')" @mouseup="ptzCamera('stop')"></div>
            <div class="Camera-left-button6" @mousedown="ptzCamera('downleft')" @mouseup="ptzCamera('stop')"></div>
            <div class="Camera-left-button7" @mousedown="ptzCamera('left')" @mouseup="ptzCamera('stop')"></div>
            <div class="Camera-left-button8"  @mousedown="ptzCamera('upleft')" @mouseup="ptzCamera('stop')"></div>
            <div class="Camera-left-button9"  @click="presetPosition(130, beforehandPosition)"></div> 
        </div>
        <div class="focallengthbox">
          <div class="focallength1" :class="{'gaolaing': isGaoliang=='zoomout'}" @mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')">
            <img src="@/assets/videoimg/left.png" style="width:8px;height:12px" alt="">
          </div>
          <div class="focallength2">缩放</div>
          <div class="focallength1" :class="{'gaolaing': isGaoliang=='zoomin'}" @mousedown="ptzCamera('zoomin')" @mouseup="ptzCamera('stop')">
            <img src="@/assets/videoimg/right.png" style="width:8px;height:12px" alt="">
          </div>
        </div>
        <div class="focallengthbox">
          <div class="focallength1" :class="{'gaolaing': isGaoliang=='66'}" @mousedown="condensationChang('减')" @mouseup="quxiao">
            <img src="@/assets/videoimg/left.png" style="width:8px;height:12px" alt="">
          </div>
          <div class="focallength2">光聚</div>
          <div class="focallength1" :class="{'gaolaing': isGaoliang=='65'}" @mousedown="condensationChang('加')" @mouseup="quxiao">
            <img src="@/assets/videoimg/right.png" style="width:8px;height:12px" alt="">
          </div>
        </div>
        <div class="focallengthbox">
          <div class="focallength1" :class="{'gaolaing': isGaoliang=='72'}" @mousedown="apertureChang('减')" @mouseup="quxiao">
            <img src="@/assets/videoimg/left.png" style="width:8px;height:12px" alt="">
          </div>
          <div class="focallength2">光圈</div>
          <div class="focallength1" :class="{'gaolaing': isGaoliang=='70'}" @mousedown="apertureChang('加')" @mouseup="quxiao">
            <img src="@/assets/videoimg/right.png" style="width:8px;height:12px" alt="">
          </div>
        </div>

        <div style="display: flex;padding-top: 25px;padding-left: 30px;">
          <span style="display: block;padding-left: 10px;font-size: 14px;     font-family: '微软雅黑';
            font-weight: 400;
            font-style: normal;
            color: #FFFFFF;">灯光</span>
          <el-switch style="display: block;margin-left:10px" v-model="isLighting" inline-prompt  @change="lightingClick" active-value="255" inactive-value="0" />
          <span style="display: block;padding-left:70px;font-size: 14px; color: rgba(255, 255, 255, 0.8);">红外</span>
          <el-switch style="display: block;margin-left:10px" v-model="isInfrared" inline-prompt  @change="infraredClick" active-value="255" inactive-value="0" />
        </div>
        <div style="display: flex;align-items: center; padding-top: 25px;padding-left: 15px;">
          <span
            style="display: block;padding-left: 10px;padding-right: 10px;font-size: 14px; color: rgba(255, 255, 255, 0.8);">预置位</span>
            <el-input-number class="beforehandPosition-input" style="width: 75px" v-model="beforehandPosition" :min="1"
            :max="10" controls-position="right" size="large" />
          <div title="设置" class="Camera-operate-buttons" @click="presetPosition(129, beforehandPosition)">
            <img src="@/assets/videoimg/u3366.png" alt="" style="cursor: pointer;">
          </div>
          <div title="删除" class="Camera-operate-buttons" @click="presetPosition(131, beforehandPosition)">
            <img src="@/assets/videoimg/u3368.png" alt="">
          </div>
          <div title="调用"  class="Camera-operate-buttons" @click="presetPosition(130, beforehandPosition)">
            <img src="@/assets/videoimg/u3370.png" alt="">
          </div>
        </div>
        <div style="width: 250px;height: 1px;background: rgba(50, 177, 245, 0.2); margin: 20px;"></div>
        <div style="padding-top:0px;padding-left:20px;padding-bottom:10px;font-family: 'Arial Normal', 'Arial'; 
          font-weight: 400; font-style: normal; font-size: 14px;color: #009BFF;display: flex;
          align-items: center;">
          <div style="width: 4px;
            height: 10px;
            background: inherit;
            background-color: #009BFF;margin-right: 5px;"></div>
          <div>摄像机信息</div>
        </div>
        <div style="display:flex;padding-left:20px;">
          <div class="informationtitle">摄像机名称</div>
          <div class="informationcontent" :title="cameraInfo.patroldeviceName">{{ cameraInfo.patroldeviceName }}</div>
        </div>
        <div style="display:flex;padding-left:20px;">
          <div class="informationtitle informationtop0">摄像机类型</div>
          <div class="informationcontent informationtop0" :title="currency(CameraTypeList, cameraInfo.type)">
            {{ currency(CameraTypeList, cameraInfo.type) }}</div>
        </div>
        <div style="display:flex;padding-left:20px;">
          <div class="informationtitle informationtop0">安装位置</div>
          <div class="informationcontent informationtop0" :title="cameraInfo.place">{{ cameraInfo.place }}</div>
        </div>
        <div style="display:flex;padding-left:20px;">
          <div class="informationtitle informationtop0">录像时长</div>
          <div class="informationcontent informationtop0">{{ cameraInfo.duration }}</div>
        </div>
        <div style="display:flex;padding-left:20px;">
          <div class="informationtitle informationtop0">录像完整率</div>
          <div class="informationcontent informationtop0">{{ cameraInfo.rate }}</div>
        </div>
      </div>
    </div>


    <Eldialog v-if="dialogVisible" :title="'视频回放'" :zIndex="2000" :width="'calc(100vw - 80px)'" 
      @before-close="handleClose" :elclass="'ylclass'" >
        <template v-slot:PopFrameContent>
          <Videorecord v-if="dialogVisible" :playbackInfo="playbackInfo"> </Videorecord>
        </template>
      </Eldialog>
  </div>
</template>
<style scoped lang="scss">
.imgbg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

.videomonitor-box {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding: 15px;
  padding-bottom: 0;
  height: calc(100vh - 100px);

  .telescopicidsbgcolor {
    background: #409Eff !important;
  }

  .telescopicidsbgcolor:hover {
    background: linear-gradient(to left, #b1b1b1, #ebebeb, #b1b1b1) !important;

  }

  .videomonitor-left {
    width: 261px;
    min-width: 261px;
    height: calc(100vh - 115px);
    // border: 1px solid rgba(0, 249, 162, 0.2);
    // background: rgba(17, 52, 44, 0.9);
    background: url(@/assets/videoimg/jcpz_260.png) no-repeat;
    background-size: 100% 100%;
     padding:0 14px;
    .nav-box {
      padding-top: 10px;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .nav-list {
        width: 65px;
        height: 30px;
        line-height: 30px;
        font-family: 'MicrosoftYaHei Regular', 'MicrosoftYaHei';
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        background: transparent;
        color: rgba(255, 255, 255, 0.5);
        border: 1px solid #225b7e;
      }

      .nav-active {
        // font-weight: bold;
        // color: rgb(255, 255, 255);
        color: #009bff !important;
        border: 1px solid #009bff !important;
        background: rgba(0, 155, 255, 0.2) !important;
      }
    }

    .el-tree {
      background: transparent;
      color: #ffffff;
      --el-tree-node-hover-bg-color: transparent;
      --el-tree-text-color: rgba(50, 177, 245, 0.4);
      // --el-tree-expand-icon-color: var(--el-text-color-placeholder);

    }

  }

  .stationboard-box-title {
    font-family: '阿里妈妈数黑体 Bold', '阿里妈妈数黑体';
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #FFBD00;
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-top: 25px;
    padding-bottom: 20px;
  }

  .imgname {
    color: #FFFFFF;
  }

  .titleline {
    width: 100%;
    height: 1px;
    // background-image: linear-gradient(to right, rgb(0, 249, 162, 0.5), transparent);
  }
}

.videomonitor-content {
  margin: 0 8px;
  width: calc(100vw - 630px);
  // background: #000000;

  .videomonitor-content-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    // background: #323030;

    img {
      // width: 20px;
      // height: 20px;
      // text-align: center;
      // background: #00F9A2;
      margin: 0 10px;
      cursor: pointer;
    }
  }
}

.Camera-buttons-box {
  position: relative;
  height: 204px;
  height: 204px;
  margin-top:  20px;
  margin-left:  50px;
  margin-bottom: 10px;
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: center;
}

.Camera-img {
  width: 100%;
  height: calc(100vh - 155px);
  border: 2px solid #fff;
}

.Jessibuca-box {
  width: 100%;
  height: calc(100% - 40px);
  display: flex;
  flex-wrap: wrap;
  .Camera-img4 {
    width: 50%;
    height: 50%;
    // border: 2px solid transparent;
    border: 1px solid #fff;
  }

  .Camera-img9 {
    width: 33.33%;
    height: 33.33%;
    border: 1px solid #fff;

  }

  .Camera-img16 {
    width: 25%;
    height: 25%;
    border: 1px solid #fff;

  }

  .CameraActive {
    border: 2px solid #409Eff;
  }
}

.videomonitor-righthide {
  width: 20px;
  min-width: 20px;
  height: calc(100vh - 115px);
  // background: rgb(0, 255, 170,0.2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.videomonitor-righthide:hover {
  // height: rgb(0, 255, 170);
}

.videomonitor-right {
  position: relative;
  width: 300px;
  min-width: 300px;
  height: calc(100vh - 115px);
  background: url(@/assets/videoimg/spjk_300.png) no-repeat center center;
  background-size: 100% 100%;
  :deep(img){
    pointer-events:none;
    -webkit-touch-callout:none;  /*系统默认菜单被禁用*/  
    -webkit-user-select:none; /*webkit浏览器*/  
    -khtml-user-select:none; /*早期浏览器*/  
    -moz-user-select:none;/*火狐*/  
    -ms-user-select:none; /*IE10*/  
    user-select:none;
  }

  .Camera-operate-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    // border: 1px solid rgb(7, 162, 110);
    cursor: pointer;
    margin-left: 15px;
  }

  .Camera-operate-buttons:hover {
    // background-color: rgba(33, 191, 149, 0.2);
  }

  .informationtitle {
    width: 100px;
    height: 36px;
    line-height: 36px;
    border: 1px solid rgba(50, 177, 245, 0.4);
    border-right: 0;
    padding-left: 10px;
    font-size: 14px;
    color: rgba(181, 215, 255, 0.5);
    text-align: left;

  }
  .informationcontent {
    width: 165px;
    height: 36px;
    line-height: 36px;
    border: 1px solid rgba(50, 177, 245, 0.4);
    padding-left: 10px;
    font-size: 14px;
    color: #FFFFFF;
    text-align: left;
    overflow: hidden;
    /*内容超出后隐藏*/
    text-overflow: ellipsis;
    /* 超出内容显示为省略号*/
    white-space: nowrap;
    /*文本不进行换行*/
  }

  .informationtop0 {
    border-top: 0;
  }

}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px rgba(50, 177, 245, 1) !important;
}

:deep(input::-webkit-input-placeholder) {

  -webkit-text-fill-color: rgba(255, 255, 255, 0.3);

}

:deep(.el-input__inner) {
  color: #fff !important;
}

:deep(.el-icon) {
  transform: scale(1) !important;
}

// :deep(.el-input__wrapper) {
//   background: transparent;
//   box-shadow: 0 0 0 1px rgb(0, 249, 162, 0.3) inset;
//   border-radius: 1px;
// }

// :deep(.el-input__wrapper:hover) {
//   box-shadow: 0 0 0 1px rgba(0, 249, 162, 1) inset;
// }

// :deep(.el-input__wrapper .el-input__icon) {
//   color: rgb(7, 168, 114);
// }
.paginationclass{
  :deep(.el-pager li){
    margin: 0 5px;
  }
  
}

  :deep(.is-checked .el-checkbox__inner::after) {
    color: #ffffff;
  }

  :deep(.el-checkbox__label) {
    color: rgba(255, 255, 255, 1) !important;
  }
  
  .Camera-left-button1{
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 63px;
    width: 74px;
    height: 57px;
    background: url(@/assets/videoimg/sxj_1.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .Camera-left-button2{
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: 122px;
    width: 73px;
    height: 72px;
    background: url(@/assets/videoimg/sxj_2.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .Camera-left-button3{
    cursor: pointer;
    position: absolute;
    top: 62px;
    left: 147px;
    width: 57px;
    height: 75px;
    background: url(@/assets/videoimg/sxj_3.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .Camera-left-button4{
    cursor: pointer;
    position: absolute;
    top: 121px;
    left: 124px;
    width: 73px;
    height: 73px;
    background: url(@/assets/videoimg/sxj_4.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .Camera-left-button5{
    cursor: pointer;
    position: absolute;
    top: 147px;
    left: 67px;
    width: 74px;
    height: 57px;
    background: url(@/assets/videoimg/sxj_5.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .Camera-left-button6{
    cursor: pointer;
    position: absolute;
    top: 125px;
    left: 12px;
    width: 72px;
    height: 72px;
    background: url(@/assets/videoimg/sxj_6.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .Camera-left-button7{
    cursor: pointer;
    position: absolute;
    top: 69px;
    left: 2px;
    width: 57px;
    height: 73px;
    background: url(@/assets/videoimg/sxj_7.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .Camera-left-button8{
    cursor: pointer;
    position: absolute;
    top: 12px;
    left: 10px;
    width: 72px;
    height: 72px;
    background: url(@/assets/videoimg/sxj_8.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .Camera-left-button9{
    cursor: pointer;
    position: absolute;
    top: 58px;
    left: 57px;
    width: 91px;
    height: 91px;
    background: url(@/assets/videoimg/sxj_9.png) no-repeat center center;
    background-size: 100% 100%;
  }

  .Camera-left-button1:hover{
    background: url(@/assets/videoimg/sxj_1.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_11.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .Camera-left-button2:hover{
    background: url(@/assets/videoimg/sxj_2.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_21.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .Camera-left-button3:hover{
    background: url(@/assets/videoimg/sxj_3.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_31.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .Camera-left-button4:hover{
    background: url(@/assets/videoimg/sxj_4.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_41.png) no-repeat center center;
    background-size: 100% 100%;
  }

  .Camera-left-button5:hover{
    background: url(@/assets/videoimg/sxj_5.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_51.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .Camera-left-button6:hover{
    background: url(@/assets/videoimg/sxj_6.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_61.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .Camera-left-button7:hover{
    background: url(@/assets/videoimg/sxj_7.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_71.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .Camera-left-button8:hover{
    background: url(@/assets/videoimg/sxj_8.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_81.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .Camera-left-button9:hover{
    background: url(@/assets/videoimg/sxj_9.png) no-repeat center center;
    background: url(@/assets/videoimg/sxj_91.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .focallengthbox{
    display: flex;
    padding-left: 40px;
    padding-top: 10px;
    .focallength1{
      border: 1px solid rgba(50, 177, 245,0.4);
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items:center ;
      cursor: pointer;
    }
    .focallength2{
      pointer-events: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      border-top: 1px solid rgba(50, 177, 245,0.4);
      border-bottom: 1px solid rgba(50, 177, 245,0.4);
      width: 140px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items:center ;
      font-size: 14px;
      color: #B5D7FF;
    }
  }
  .gaolaing{
      background:rgba(50, 177, 245,0.4)
    }
</style>
 
