404 lines
12 KiB
Vue
404 lines
12 KiB
Vue
<!--点击地图上单个点或者聚合点之后出现的操作弹窗autoplay -->
|
||
<template>
|
||
<div class="pop-box">
|
||
<div class="List-camera-pop">
|
||
<a-carousel arrows>
|
||
<template #prevArrow>
|
||
<div class="custom-slick-arrow" style="left: 10px; z-index: 1">
|
||
<!-- <div style="background-color:red">11111111</div> -->
|
||
<div class="arrow-left" @click="handlePrev()"></div>
|
||
</div>
|
||
</template>
|
||
<template #nextArrow>
|
||
<div class="custom-slick-arrow" style="right: 10px">
|
||
<!-- <right-circle-outlined /> -->
|
||
<div class="arrow-right" @click="handleNext()"></div>
|
||
</div>
|
||
</template>
|
||
<div
|
||
v-for="url in cameraDataList"
|
||
:width="800"
|
||
:height="400"
|
||
:key="url"
|
||
>
|
||
</div>
|
||
</a-carousel>
|
||
<div class="operation-content" style="position:ab">
|
||
<div class="text-label">
|
||
<span>{{defaultIndex+1}}</span>/<span>{{cameraDataList.length}}</span>
|
||
</div>
|
||
<div class="video-content">
|
||
<h5-player :video-url="videoUrl" :stop-flag="selectedFlag"></h5-player>
|
||
</div>
|
||
<div class="text-label des-label">
|
||
<span>通道名称: {{cameraDataList[defaultIndex].channelName}}</span>
|
||
<span>通道编码: {{cameraDataList[defaultIndex].channelId}}</span>
|
||
</div>
|
||
<div class="footer-button" v-if="showFlag">
|
||
<a-button type="primary" @click="applyNow(cameraDataList[defaultIndex])">立即申请</a-button>
|
||
<a-button type="primary" style="margin-left:20px" @click="addIntoCart(cameraDataList[defaultIndex])">加入申请列表</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
// import VideoPlay from '@/views/videoPlay/index.vue'
|
||
// import 'viewerjs/dist/viewer.css'
|
||
// import { directive as viewer } from "v-viewer"
|
||
import {
|
||
LeftCircleOutlined,
|
||
RightCircleOutlined,
|
||
} from '@ant-design/icons-vue'
|
||
import { getUserInfo, getRole } from '@/api/user'
|
||
// import { useRouter } from 'vue-router'
|
||
import H5Player from '@/views/home/components/H5Player.vue'
|
||
import mybus from '@/myplugins/mybus'
|
||
import { message } from 'ant-design-vue'
|
||
import { getStreamByChannelCode } from '@/api/videoSurveillance'
|
||
import {getCameraLiveStream} from '@/api/file'
|
||
import {willApplyCameraSelect,
|
||
getApplyCameraListXha,
|
||
} from '@/api/home'
|
||
export default {
|
||
name: '',
|
||
components: {
|
||
// VideoPlay,
|
||
H5Player,
|
||
LeftCircleOutlined,
|
||
RightCircleOutlined
|
||
},
|
||
props: {
|
||
cameraDataList: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
},
|
||
},
|
||
resetFlag:{
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
|
||
getUserInfo().then((res) => {
|
||
if (res.data.data.superAdmin == '1') {
|
||
this.showFlag = true
|
||
} else {
|
||
res.data.data.roleIdList.map((val) => {
|
||
getRole(val).then((role) => {
|
||
if (role.data.data.name === '视频管理员') {
|
||
this.showFlag = true
|
||
}
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// directives: {
|
||
// viewer: viewer({
|
||
// debug: true,
|
||
// }),
|
||
// },
|
||
watch: {
|
||
resetFlag: {
|
||
// 关闭弹窗刷新底部个数显示数值
|
||
handler(newVal, oldVal) {
|
||
if (newVal) {
|
||
this.defaultIndex = 0;
|
||
}
|
||
},
|
||
// 立即处理 进入页面就触发
|
||
immediate: true,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
openVideo: false,
|
||
videoStream: '',
|
||
videoUrl:'', //视频预览url
|
||
defaultIndex:0,//默认显示列表中的对一个
|
||
selectedFlag:true,
|
||
showFlag:false
|
||
// router:useRouter()
|
||
}
|
||
},
|
||
methods: {
|
||
openCurrentVideo(channelCode) {
|
||
bus.$emit('openCurrentVideoSurveillance', channelCode)
|
||
},
|
||
show() {
|
||
const viewer = this.$el.querySelector('.images').$viewer
|
||
viewer.show()
|
||
},
|
||
//立即申请
|
||
applyNow(item){
|
||
getApplyCameraListXha().then(res => {
|
||
let flag = true
|
||
if (res.data.code == 0) {
|
||
if(res.data.data.length >=10 ){
|
||
message.warning('最多只能申请10个感知资源！')
|
||
return
|
||
}else{
|
||
res.data.data.map((val) => {
|
||
val.cameraInfo = JSON.parse(val.cameraInfo)
|
||
console.log('applyNowapplyNow',val.cameraInfo);
|
||
if(flag && val.cameraInfo.channelId == item.channelId){
|
||
flag = false
|
||
}
|
||
})
|
||
}
|
||
if(flag){
|
||
willApplyCameraSelect().then(res1 => {
|
||
if (res1.data.code == 0) {
|
||
if(res.data.data.length+res1.data.data.length>=10){
|
||
message.warning('最多只能申请10个感知资源！')
|
||
return
|
||
}
|
||
res1.data.data.map(val => {
|
||
if(item.channelId == val.channelId){
|
||
item.id = val.id
|
||
}
|
||
})
|
||
}
|
||
let obj = {
|
||
arr: [
|
||
{
|
||
checked: true,
|
||
delFlag: 0,
|
||
id: '1593084734789996545',
|
||
idtCameraChannel: '790582098133127168',
|
||
loading: false,
|
||
note1: '',
|
||
resourceId: '1522550195055828996',
|
||
resourceName: '摄像头列表',
|
||
type: '基础设施',
|
||
},
|
||
],
|
||
deptName: '西海岸新区工业和信息化局',
|
||
deptId: '732560225344761856',
|
||
}
|
||
item.type = '基础设施'
|
||
item.delFlag = 0
|
||
item.resourceId = item.channelId
|
||
item.resourceName = item.channelName
|
||
obj.arr[0].note1 = JSON.stringify([item])
|
||
if (obj.arr.length > 0) {
|
||
localStorage.setItem('applyList', JSON.stringify([obj]))
|
||
console.log('applyNowapplyNowobj',obj);
|
||
this.$router.push({
|
||
path: '/apply',
|
||
})
|
||
}
|
||
})
|
||
}else{
|
||
message.warning('该感知资源已申请！')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//加入申购车
|
||
addIntoCart(item){
|
||
console.log('addIntoCartaddIntoCart',item);
|
||
mybus.emit('selectCamera', item)
|
||
},
|
||
//获取视频控件所需播放地址
|
||
getVideoUrl(data){
|
||
let param = data;
|
||
getCameraLiveStream(param).then((res) => {
|
||
//console.log('555555rrrrr',res)
|
||
if(res.data.data){
|
||
this.videoUrl = res.data.data.url;
|
||
}
|
||
//visible.value = true
|
||
//options.src = res.data.data
|
||
//options.src ="wss://10.134.135.45:6014/proxy/10.10.20.15:559/openUrl/0kIF7La"
|
||
})
|
||
},
|
||
//查看前一个
|
||
handlePrev(){
|
||
let maxLength = this.cameraDataList.length-1;
|
||
console.log('opopopop',this.cameraDataList[maxLength]);
|
||
if(this.defaultIndex === 0){
|
||
this.defaultIndex = maxLength;
|
||
console.log('opopopop',this.cameraDataList[maxLength]);
|
||
//根据当前数据的channelId查询视频播放的url传递给H5组件调用接口
|
||
//this.videoUrl =
|
||
this.getVideoUrl(this.cameraDataList[maxLength]);
|
||
} else{
|
||
this.defaultIndex = this.defaultIndex - 1;
|
||
console.log('uyutyuyopopopop',this.cameraDataList[this.defaultIndex]);
|
||
this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
|
||
}
|
||
|
||
},
|
||
//查看下一个
|
||
handleNext(){
|
||
let lastIndex = this.cameraDataList.length-1;
|
||
if(this.defaultIndex === Number(lastIndex)){
|
||
this.defaultIndex = 0;
|
||
console.log('opopopop',this.cameraDataList[0]);
|
||
this.getVideoUrl(this.cameraDataList[0]);
|
||
}else{
|
||
this.defaultIndex = this.defaultIndex + 1;
|
||
console.log('opopopop',this.cameraDataList[this.defaultIndex]);
|
||
this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
|
||
}
|
||
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.List-camera-pop {
|
||
// width: 640px;
|
||
// height: 320px;
|
||
//background-color: #193059;
|
||
font-size: 16px;
|
||
padding-bottom: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
.content {
|
||
// width: 280px;
|
||
min-height: 100px;
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.green-cicle {
|
||
width: 18px;
|
||
height: 18px;
|
||
background-color: rgba(0, 218, 128, 0.4);
|
||
border-radius: 50%;
|
||
position: relative;
|
||
div {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background-color: #00da80;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
margin-left: -5px;
|
||
margin-top: -5px;
|
||
}
|
||
}
|
||
b {
|
||
color: #fff;
|
||
}
|
||
p {
|
||
color: #1eacd6;
|
||
}
|
||
}
|
||
.images {
|
||
width: 290px;
|
||
height: 160px;
|
||
cursor: pointer;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.button {
|
||
width: 80px;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
text-align: center;
|
||
background-color: #2fe2ed;
|
||
border-radius: 4px;
|
||
margin: 8px auto 0;
|
||
cursor: pointer;
|
||
}
|
||
.operation-content{
|
||
position: absolute;
|
||
z-index: 800;
|
||
top: 0.1rem;
|
||
//right: 0.1rem;
|
||
left:0.8rem;
|
||
.text-label{
|
||
width:800px;
|
||
height:30px;
|
||
margin-top:-20px;
|
||
text-align:center;
|
||
font-size: 18px;
|
||
// color: #1eacd6;
|
||
}
|
||
.des-label {
|
||
color: #000;
|
||
margin-top:10px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
.video-content{
|
||
width: 750px;
|
||
height:600px;
|
||
text-align: left;
|
||
padding: 5px;
|
||
}
|
||
.footer-button{
|
||
display: flex;
|
||
justify-content: center;
|
||
// width: 750px;
|
||
//height:50px;
|
||
text-align: center;
|
||
padding-top:5px;
|
||
}
|
||
}
|
||
.ant-carousel {
|
||
width: 960px;
|
||
//height: 700px;
|
||
margin-left: 8px;
|
||
}
|
||
.ant-carousel :deep(.slick-slide) {
|
||
text-align: center;
|
||
height: 650px;
|
||
line-height: 200px;
|
||
//background: #ccc;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
|
||
width: 50px;
|
||
height: 50px;
|
||
font-size: 50px;
|
||
color: #fff;
|
||
//background-color: rgba(31, 45, 61, 0.11);
|
||
opacity: 0.8;
|
||
z-index: 1;
|
||
.arrow-left{
|
||
width:48px;
|
||
height:48px;
|
||
background-image: url('~@/assets/home/arrow-left.png');
|
||
}
|
||
.arrow-right{
|
||
width:48px;
|
||
height:48px;
|
||
background-image: url('~@/assets/home/arrow-right.png');
|
||
}
|
||
}
|
||
.ant-carousel :deep(.custom-slick-arrow:before) {
|
||
display: none;
|
||
}
|
||
.ant-carousel :deep(.custom-slick-arrow:hover) {
|
||
opacity: 1;
|
||
}
|
||
|
||
.ant-carousel :deep(.slick-slide h3) {
|
||
color: #fff;
|
||
}
|
||
|
||
.ant-carousel :deep(.slick-dots) {
|
||
display: none !important;
|
||
}
|
||
|
||
}
|
||
// .current-video {
|
||
// width: 320px;
|
||
// height: 180px;
|
||
// }
|
||
</style>
|