lc_smart_admin/web/src/view/monitoring/multiScreen/multiScreen.vue

<template>
  <div class="wrap" style="padding: 30px 0px">
    <el-row :gutter="20" style="background:#fff;padding-top:10px;">
      <el-col :span="8">
        <div class="top-operate-box">{{cameraName1}}  <p class="lishihuifang" v-show="url1 !== ''"><router-link :to="{name:'playback',query:{cameraName:cameraName1+'('+code1+')',streamId:streamId1,deviceAddress:deviceAddress1}}" style="color: rgb(40, 198, 217);"><img src="/img/map/lishi-icon.png" />录像回放</router-link> <span @click="editHand(1)">更换</span> <span @click="delHand(1)">删除</span></p></div>
        <div class="video-box">
          <el-icon class="el-icon-plus" @click="editHand(1)"><Plus /></el-icon>
          <video-play :url="url1" v-show="url1 !== ''" ref="child1"></video-play>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="top-operate-box">{{cameraName2}}  <p class="lishihuifang" v-show="url2 !== ''"><router-link :to="{name:'playback',query:{cameraName:cameraName2+'('+code2+')',streamId:streamId2,deviceAddress:deviceAddress2}}" style="color: rgb(40, 198, 217);"><img src="/img/map/lishi-icon.png" />录像回放</router-link> <span @click="editHand(2)">更换</span> <span @click="delHand(2)">删除</span></p></div>
        <div class="video-box">
          <el-icon class="el-icon-plus" @click="editHand(2)"><Plus /></el-icon>
          <video-play2 :url="url2" v-show="url2 !== ''" ref="child2"></video-play2>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="top-operate-box">{{cameraName3}}  <p class="lishihuifang" v-show="url3 !== ''"><router-link :to="{name:'playback',query:{cameraName:cameraName3+'('+code3+')',streamId:streamId3,deviceAddress:deviceAddress3}}" style="color: rgb(40, 198, 217);"><img src="/img/map/lishi-icon.png" />录像回放</router-link> <span @click="editHand(3)">更换</span> <span @click="delHand(3)">删除</span></p></div>
        <div class="video-box">
          <el-icon class="el-icon-plus" @click="editHand(3)"><Plus /></el-icon>
          <video-play3 :url="url3" v-show="url3 !== ''" ref="child3"></video-play3>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px;">
      <el-col :span="8">
        <div class="top-operate-box">{{cameraName4}}  <p class="lishihuifang" v-show="url4 !== ''"><router-link :to="{name:'playback',query:{cameraName:cameraName4+'('+code4+')',streamId:streamId4,deviceAddress:deviceAddress4}}" style="color: rgb(40, 198, 217);"><img src="/img/map/lishi-icon.png" />录像回放</router-link> <span @click="editHand(4)">更换</span> <span @click="delHand(4)">删除</span></p></div>
        <div class="video-box">
          <el-icon class="el-icon-plus" @click="editHand(4)"><Plus /></el-icon>
          <video-play4 :url="url4" v-show="url4 !== ''" ref="child4"></video-play4>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="top-operate-box">{{cameraName5}}  <p class="lishihuifang" v-show="url5 !== ''"><router-link :to="{name:'playback',query:{cameraName:cameraName5+'('+code5+')',streamId:streamId5,deviceAddress:deviceAddress5}}" style="color: rgb(40, 198, 217);"><img src="/img/map/lishi-icon.png" />录像回放</router-link> <span @click="editHand(5)">更换</span> <span @click="delHand(5)">删除</span></p></div>
        <div class="video-box">
          <el-icon class="el-icon-plus" @click="editHand(5)"><Plus /></el-icon>
          <video-play5 :url="url5" v-show="url5 !== ''" ref="child5"></video-play5>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="top-operate-box">{{cameraName6}}  <p class="lishihuifang" v-show="url6 !== ''"><router-link :to="{name:'playback',query:{cameraName:cameraName6+'('+code6+')',streamId:streamId6,deviceAddress:deviceAddress6}}" style="color: rgb(40, 198, 217);"><img src="/img/map/lishi-icon.png" />录像回放</router-link> <span @click="editHand(6)">更换</span> <span @click="delHand(6)">删除</span></p></div>
        <div class="video-box">
          <el-icon class="el-icon-plus" @click="editHand(6)"><Plus /></el-icon>
          <video-play6 :url="url6" v-show="url6 !== ''" ref="child6"></video-play6>
        </div>
      </el-col>
    </el-row>
    <el-dialog
        title="选择监控设备" left :close-on-click-modal="false"
        v-model="dialogSelMonitor"
        width="600px" :modal="false">
      <el-tree highlight-current :data="cameraList" :props="defaultProps" @node-click="cameranodeClick"></el-tree>
      <el-button type="primary" style="margin:10px auto 0;display:block;" @click="addChangeVideo">添加</el-button>
    </el-dialog>
  </div>
</template>
<script setup>
import {GetDevicesCameras, GetmultiscreenList,multiscreenSubmit} from "@/api/multiScreen";
import {ref,onMounted} from 'vue';
import videoPlay from './videoplay.vue'
import videoPlay2 from './videoplay2.vue'
import videoPlay3 from './videoplay3.vue'
import videoPlay4 from './videoplay4.vue'
import videoPlay5 from './videoplay5.vue'
import videoPlay6 from './videoplay6.vue'
import {Plus} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
const url1 = ref("")
const url2 = ref("")
const url3 = ref("")
const url4 = ref("")
const url5 = ref("")
const url6 = ref("")
const cameraName1 = ref("")
const cameraName2 = ref("")
const cameraName3 = ref("")
const cameraName4 = ref("")
const cameraName5 = ref("")
const cameraName6 = ref("")
const code1 =ref("")
const code2 =ref("")
const code3 =ref("")
const code4 =ref("")
const code5 =ref("")
const code6 =ref("")
const streamId1 = ref("")
const streamId2 = ref("")
const streamId3 = ref("")
const streamId4 = ref("")
const streamId5 = ref("")
const streamId6 = ref("")
const deviceAddress1 = ref("")
const deviceAddress2 = ref("")
const deviceAddress3 = ref("")
const deviceAddress4 = ref("")
const deviceAddress5 = ref("")
const deviceAddress6 = ref("")

const current = ref(0)
const cameraId = ref(0)
const dialogSelMonitor = ref(false)
const cameraList = ref([])
const defaultProps = ref({
  children: 'cameraList',
  label: 'poleGroupName'
})

onMounted(()=>{
  multiscreenListFun()
  getCameraLiveList()
})

const editHand = (val)=> {
  current.value = val
  dialogSelMonitor.value = true
}

const cameranodeClick = (val)=>{
  if (!val.cameraList && val.cameraList !== null){
    cameraId.value =  val.id
  }
}
const addChangeVideo = async () => {
  const res = await multiscreenSubmit(current.value, cameraId.value);
  if (res.code === 0) {
    dialogSelMonitor.value = false
    ElMessage({ type: 'success', message: '操作成功' })
    multiscreenListFun()
  }
}

const child1 = ref()
const child2 = ref()
const child3 = ref()
const child4 = ref()
const child5 = ref()
const child6 = ref()
const delHand =(val)=> {
  ElMessageBox.confirm('您确定要删除该摄像头吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(async() => {
        if (val===1){
          url1.value = ""
          child1.value.endde()
        }else if(val===2){
          url2.value = ""
          child2.value.endde()
        }else if(val===3){
          url3.value = ""
          child3.value.endde()
        }else if(val===4){
          url4.value = ""
          child4.value.endde()
        }else if(val===5){
          url5.value = ""
          child5.value.endde()
        }else{
          url6.value = ""
          child6.value.endde()
        }
        const res = await multiscreenSubmit(val,-1)
        if (res.code === 0) {
          ElMessage({
            type: 'success',
            message: '删除成功!',
          })
          multiscreenListFun()
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除',
        })
      })
}
const props = ref(['url','cameraName','code','streamId','deviceAddress'])

const multiscreenListFun = async () => {
  const res = await GetmultiscreenList()
  if (res.code === 0) {
    url1.value = res.data.list[0].url;
    url2.value = res.data.list[1].url;
    url3.value = res.data.list[2].url;
    url4.value = res.data.list[3].url;
    url5.value = res.data.list[4].url;
    url6.value = res.data.list[5].url;
    cameraName1.value = res.data.list[0].name;
    cameraName2.value = res.data.list[1].name;
    cameraName3.value = res.data.list[2].name;
    cameraName4.value = res.data.list[3].name;
    cameraName5.value = res.data.list[4].name;
    cameraName6.value = res.data.list[5].name;
    code1.value = res.data.list[0].code;
    code2.value = res.data.list[1].code;
    code3.value = res.data.list[2].code;
    code4.value = res.data.list[3].code;
    code5.value = res.data.list[4].code;
    code6.value = res.data.list[5].code;
    streamId1.value = res.data.list[0].streamId;
    streamId2.value = res.data.list[1].streamId;
    streamId3.value = res.data.list[2].streamId;
    streamId4.value = res.data.list[3].streamId;
    streamId5.value = res.data.list[4].streamId;
    streamId6.value = res.data.list[5].streamId;
    deviceAddress1.value = res.data.list[0].deviceAddress;
    deviceAddress2.value = res.data.list[1].deviceAddress;
    deviceAddress3.value = res.data.list[2].deviceAddress;
    deviceAddress4.value = res.data.list[3].deviceAddress;
    deviceAddress5.value = res.data.list[4].deviceAddress;
    deviceAddress6.value = res.data.list[5].deviceAddress;

  }
}

const getCameraLiveList =async () => {
  const res = await GetDevicesCameras()
  cameraList.value = res.data
}

</script>
<style scoped>
.wrap{background:#fff;}
.icon-tuichuquanping{
  position:absolute;
  top:5px;
  right:6px;
  cursor:pointer;
}
.video-box{
  /* border:1px solid #ced7ea; */
  border-radius:4px;
  width:100%;
  height:56.2%;
  min-height:282px;
  position:relative;
  background: #fff;
}
.video-box .el-icon-plus{
  font-size:100px;
  color:#d8d8d8;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  cursor:pointer;
}

.lishihuifang{
  position:absolute;
  top:0;
  right:0;
  color: rgb(40, 198, 217);
  width:187px;
  margin:0;
  padding:0;
  font-size:14px;

}
.lishihuifang img{
  vertical-align: middle;
  margin-right:4px;
  position:relative;
  top:-2px;
}
.lishihuifang span{
  margin-left:20px;
  cursor:pointer;
}
.top-operate-box{
  position:relative;width:100%;margin-bottom:10px;
  height:20px;
}

</style>