|
|
@ -1,31 +1,31 @@ |
|
|
|
|
|
|
|
|
<template> |
|
|
<template> |
|
|
<div style="overflow:hidden ;"> |
|
|
<div style="overflow:hidden ;"> |
|
|
<p style="font-weight: 600; color:#0047EC;">视频墙</p> |
|
|
<p style="font-weight: 600; color:#0047EC;">视频墙</p> |
|
|
<div class="div_table" :style="{ height: maxTableHeight + 'px' }"> |
|
|
<div class="div_table" :style="{ height: maxTableHeight + 'px' }"> |
|
|
<div class="card"> |
|
|
<div class="card"> |
|
|
<div class="bgC"> |
|
|
<div class="bgC"> |
|
|
<div class="item" v-for="(item,index) in tableData" :key="index" @click="handelClickImg(item)"> |
|
|
<div class="item" v-for="(item,index) in tableData" :key="index" @click="handelClickImg(item)"> |
|
|
<img width="100%" src="../../../../assets/img/login_bg.jpg" alt=""> |
|
|
<img width="100%" src="../../../../assets/img/login_bg.jpg" alt=""> |
|
|
<div > |
|
|
<div > |
|
|
<p>{{item.deviceName}}</p> |
|
|
<p>{{item.deviceName}}</p> |
|
|
<p style="color:#666666 ;font-size: 14px; display: flex; align-items: center;"><img src="../../../../assets/img/arrow-down.png" alt=""> {{item.deviceAddress}}</p> |
|
|
<p style="color:#666666 ;font-size: 14px; display: flex; align-items: center;"><img src="../../../../assets/img/arrow-down.png" alt=""> {{item.deviceAddress}}</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="pagination"> |
|
|
<div class="pagination"> |
|
|
<el-pagination @size-change="handleSizeChange" |
|
|
<el-pagination @size-change="handleSizeChange" |
|
|
@current-change="handleCurrentChange" |
|
|
@current-change="handleCurrentChange" |
|
|
:current-page.sync="pageNo" |
|
|
:current-page.sync="pageNo" |
|
|
:page-sizes="[20, 50, 100, 200]" |
|
|
:page-sizes="[20, 50, 100, 200]" |
|
|
:page-size="parseInt(pageSize)" |
|
|
:page-size="parseInt(pageSize)" |
|
|
layout="sizes, prev, pager, next, total" |
|
|
layout="sizes, prev, pager, next, total" |
|
|
:total="total"> |
|
|
:total="total"> |
|
|
</el-pagination></div> |
|
|
</el-pagination></div> |
|
|
<video-dialog :dataV="selfVideo" ref="videoDialog"></video-dialog> |
|
|
<video-dialog :dataV="selfVideo" ref="videoDialog"></video-dialog> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
@ -33,82 +33,83 @@ import { requestPost,requestGet } from "@/js/dai/request"; |
|
|
import { mapGetters } from "vuex"; |
|
|
import { mapGetters } from "vuex"; |
|
|
import videoDialog from "./videoDialog.vue"; |
|
|
import videoDialog from "./videoDialog.vue"; |
|
|
export default { |
|
|
export default { |
|
|
components: {videoDialog}, |
|
|
components: {videoDialog}, |
|
|
|
|
|
|
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
pageNo: '', |
|
|
pageNo: '', |
|
|
pageSize: 20, |
|
|
pageSize: 20, |
|
|
total: 0, |
|
|
total: 0, |
|
|
tableData: [], |
|
|
tableData: [], |
|
|
selfVideo:{}, |
|
|
selfVideo:{}, |
|
|
token:"" |
|
|
token:"" |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
maxTableHeight() { |
|
|
maxTableHeight() { |
|
|
return this.clientHeight - 230; |
|
|
return this.clientHeight - 230; |
|
|
}, |
|
|
}, |
|
|
...mapGetters(["clientHeight", "iframeHeight"]), |
|
|
...mapGetters(["clientHeight", "iframeHeight"]), |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
watch: { |
|
|
watch: { |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
mounted() { |
|
|
this.getTableData() |
|
|
this.getTableData() |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
async getTableData(){ |
|
|
async getTableData(){ |
|
|
let url = "/gov/org/icmonitoringdevice/page" |
|
|
let url = "/gov/org/icmonitoringdevice/page" |
|
|
let params = { |
|
|
let params = { |
|
|
pageNo: this.pageNo, |
|
|
pageNo: this.pageNo, |
|
|
pageSize: this.pageSize, |
|
|
pageSize: this.pageSize, |
|
|
} |
|
|
} |
|
|
let {data,code,msg} = await requestPost(url, params) |
|
|
let {data,code,msg} = await requestPost(url, params) |
|
|
if (code == 0) { |
|
|
if (code == 0) { |
|
|
this.tableData = data.list |
|
|
this.tableData = data.list |
|
|
this.total = data.total |
|
|
this.total = data.total |
|
|
console.log(this.tableData,'获取列表成功'); |
|
|
console.log(this.tableData,'获取列表成功'); |
|
|
}else{ |
|
|
}else{ |
|
|
this.$message.error(msg) |
|
|
this.$message.error(msg) |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
handleSizeChange (val) { |
|
|
handleSizeChange (val) { |
|
|
console.log(`每页 ${val} 条`); |
|
|
console.log(`每页 ${val} 条`); |
|
|
this.pageSize = val; |
|
|
this.pageSize = val; |
|
|
window.localStorage.setItem("pageSize", val); |
|
|
window.localStorage.setItem("pageSize", val); |
|
|
this.getTableData(); |
|
|
this.getTableData(); |
|
|
}, |
|
|
}, |
|
|
handleCurrentChange (val) { |
|
|
handleCurrentChange (val) { |
|
|
console.log(`当前页: ${val}`); |
|
|
console.log(`当前页: ${val}`); |
|
|
this.pageNo = val; |
|
|
this.pageNo = val; |
|
|
this.getTableData(); |
|
|
this.getTableData(); |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
async videoLogin(){ |
|
|
async videoLogin(){ |
|
|
console.log(this.dataV); |
|
|
console.log(this.dataV); |
|
|
let url = "/auth/thirdlogin/video/login" |
|
|
let url = "/auth/thirdlogin/video/login" |
|
|
let {data,code,msg} = await requestPost(url) |
|
|
let {data,code,msg} = await requestPost(url) |
|
|
if(code == 0 ){ |
|
|
if(code == 0 ){ |
|
|
// this.playerOptions.sources[0].src = "http://172.20.41.195:9015/video-play-plug?token="+data.token+"&playType=realPlay"+"&cameraCode="+this.dataV.deviceCode |
|
|
// this.playerOptions.sources[0].src = "http://172.20.41.195:9015/video-play-plug?token="+data.token+"&playType=realPlay"+"&cameraCode="+this.dataV.deviceCode |
|
|
// this.sendMessageToIframe(data.token) |
|
|
// this.sendMessageToIframe(data.token) |
|
|
// console.log(this.playerOptions.sources[0].src,"视频"); |
|
|
// console.log(this.playerOptions.sources[0].src,"视频"); |
|
|
this.token = data.token |
|
|
this.token = data.token |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
async handelClickImg(item){ |
|
|
async handelClickImg(item){ |
|
|
// this.selfVideo = item |
|
|
// this.selfVideo = item |
|
|
await this.videoLogin() |
|
|
await this.videoLogin() |
|
|
// this.$nextTick(()=>{ |
|
|
// this.$nextTick(()=>{ |
|
|
// this.$refs['videoDialog'].dialogVisible = true |
|
|
// this.$refs['videoDialog'].dialogVisible = true |
|
|
// this.$refs['videoDialog'].videoLogin() |
|
|
// this.$refs['videoDialog'].videoLogin() |
|
|
// }) |
|
|
// }) |
|
|
let src = `http://172.20.41.195:9015/video-play-plug?token="+${this.token}+"&playType=realPlay"+"&cameraCode="+${item.deviceCode}` |
|
|
console.log(this.token); |
|
|
console.log(src); |
|
|
let src = `http://172.20.41.195:9015/video-play-plug?token=${this.token}&playType=realPlay&cameraCode=${item.deviceCode}` |
|
|
window.open(src) |
|
|
console.log(src); |
|
|
} |
|
|
window.open(src) |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
@ -116,37 +117,36 @@ export default { |
|
|
@import "@/assets/scss/modules/management/list-main.scss"; |
|
|
@import "@/assets/scss/modules/management/list-main.scss"; |
|
|
|
|
|
|
|
|
.div_table { |
|
|
.div_table { |
|
|
overflow-y: hidden; |
|
|
overflow-y: hidden; |
|
|
padding: 0 !important; |
|
|
padding: 0 !important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.div_table .card { |
|
|
.div_table .card { |
|
|
background-color: #fff; |
|
|
background-color: #fff; |
|
|
overflow: auto; |
|
|
overflow: auto; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
|
|
|
|
|
|
.bgC { |
|
|
.bgC { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
flex-wrap: wrap; |
|
|
padding: 40px; |
|
|
padding: 40px; |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
background-color: #fbfcfd; |
|
|
background-color: #fbfcfd; |
|
|
|
|
|
|
|
|
.item { |
|
|
.item { |
|
|
flex: 0 0 calc(25% - 30px); |
|
|
flex: 0 0 calc(25% - 30px); |
|
|
/* 这里计算宽度为25%减去30px */ |
|
|
/* 这里计算宽度为25%减去30px */ |
|
|
margin: 0 0 30px 30px; |
|
|
margin: 0 0 30px 30px; |
|
|
background-color: #fff; |
|
|
background-color: #fff; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// |
|
|
// |
|
|
.item:nth-child(4n+1) { |
|
|
.item:nth-child(4n+1) { |
|
|
margin-left: 0; |
|
|
margin-left: 0; |
|
|
/* 每行的第一个item左边距为0 */ |
|
|
/* 每行的第一个item左边距为0 */ |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.pagination{ |
|
|
.pagination{ |
|
|
} |
|
|
} |
|
|
}</style> |
|
|
}</style> |
|
|
|
|
|
|
