sheyang
/
sheyangCoastalSystem
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
hezhengao
何峥傲 1 year ago
parent f5345e1452
commit 3d17616047
1 changed files with 95 additions and 88 deletions
Show Stats Download Patch File Download Diff File

183
src/views/videoMonitor/components/videoDialog.vue
Unescape View File

@ -1,115 +1,122 @@
<template> <template>
<el-dialog <el-dialog
class="dialog" class="dialog"
:title="title" :title="title"
:visible.sync="visible" :visible.sync="visible"
:close-on-click-modal="false" :close-on-click-modal="false"
width="1600px" width="1600px"
@close="close" @close="close"
> >
<div class="dialog_box"> <div class="dialog_box">
<div class="left_box"> <div class="left_box">
<!-- 拟标题 --> <!-- 拟标题 -->
<div class="left_box_title"> <div class="left_box_title">
<div class="left_box_title_text">重点人员信息</div> <div class="left_box_title_text">重点人员信息</div>
<div class="in_box"> <div class="in_box">
<div class="in_box_text"> <div class="in_box_text">
<div class="in_box_text_item">设备名称:</div> <div class="in_box_text_item">设备名称:</div>
<div class="in_box_text_item">设备IP:</div> <div class="in_box_text_item">设备IP:</div>
<div class="in_box_text_item">监控类型:</div> <div class="in_box_text_item">监控类型:</div>
<div class="in_box_text_item">国际编码:</div> <div class="in_box_text_item">国际编码:</div>
<div class="in_box_text_item">设备方位:</div> <div class="in_box_text_item">设备方位:</div>
<div class="in_box_text_item">设备品牌:</div> <div class="in_box_text_item">设备品牌:</div>
<div class="in_box_text_item">设备经度:</div> <div class="in_box_text_item">设备经度:</div>
<div class="in_box_text_item">设备纬度:</div> <div class="in_box_text_item">设备纬度:</div>
</div>
<div class="in_box_value">
<div class="in_box_value_item blue">
{{ this.in.channel_name }}
</div>
<div class="in_box_value_item">{{ this.in.device_id }}</div>
<div class="in_box_value_item"></div>
<div class="in_box_value_item"></div>
<div class="in_box_value_item"></div>
<div class="in_box_value_item"></div>
<div class="in_box_value_item">{{ this.in.longitude }}</div>
<div class="in_box_value_item">{{ this.in.latitude }}</div>
</div>
</div> </div>
<div class="in_box_value"> <div class="btn_box">
<div class="in_box_value_item blue">{{ this.in.channel_name }}</div> <div class="video_btn">
<div class="in_box_value_item">{{ this.in.device_id }}</div> <div class="video_icon"></div>
<div class="in_box_value_item"></div> <div class="video_text">视频回放</div>
<div class="in_box_value_item"></div> </div>
<div class="in_box_value_item"></div> <div class="video_btn">
<div class="in_box_value_item"></div> <div class="around_video_icon"></div>
<div class="in_box_value_item">{{ this.in.longitude }}</div> <div class="video_text">周边视频</div>
<div class="in_box_value_item">{{ this.in.latitude }}</div> </div>
</div> </div>
</div> <div class="footer_box">
<div class="btn_box"> <div class="start_time_box">
<div class="video_btn"> <div class="time_text">开始时间：</div>
<div class="video_icon"></div> <el-date-picker
<div class="video_text">视频回放</div> v-model="starttime"
</div> type="datetime"
<div class="video_btn"> placeholder="选择开始时间"
<div class="around_video_icon"></div> ></el-date-picker>
<div class="video_text">周边视频</div> </div>
</div> <div class="end_time_box">
</div> <div class="time_text">结束时间：</div>
<div class="footer_box"> <el-date-picker
<div class="start_time_box"> v-model="endtime"
<div class="time_text">开始时间：</div> type="datetime"
<el-date-picker placeholder="选择结束时间"
v-model="starttime" ></el-date-picker>
type="datetime" </div>
placeholder="选择开始时间"
></el-date-picker>
</div>
<div class="end_time_box">
<div class="time_text">结束时间：</div>
<el-date-picker
v-model="endtime"
type="datetime"
placeholder="选择结束时间"
></el-date-picker>
</div> </div>
</div> </div>
</div> </div>
<div class="right_box">
<LivePlayer
:videoUrl="url"
fluent
:autoplay="true"
style="width: 52.1vw"
></LivePlayer>
</div>
</div> </div>
<div class="right_box">
<LivePlayer :videoUrl="url" fluent :autoplay="true" style="width: 52.1vw;"></LivePlayer>
</div>
</div>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import LivePlayer from '@liveqing/liveplayer' import LivePlayer from '@liveqing/liveplayer'
import { login } from '@/api/facility' import { login } from '@/api/facility'
export default { export default {
name:'VideoDialog', name: 'VideoDialog',
components: { LivePlayer }, components: { LivePlayer },
data() { data() {
return { return {
visible: false, visible: false,
title:'', title: '',
in:{ in: {
channel_name:'', channel_name: '',
device_id:'', device_id: '',
longitude:'', longitude: '',
latitude:'' latitude: ''
}, },
starttime:'', starttime: '',
endtime:"", endtime: '',
url:'', url: '',
token:'', token: ''
} }
}, },
created() { created() {
this.getGbsToken() this.getGbsToken()
}, },
methods:{ methods: {
open(item,data) { open(item, data) {
this.visible = true this.visible = true
console.log('item',item) console.log('item', item)
this.title = item.ChannelName this.title = item.ChannelName
this.in.channel_name = item.ChannelName this.in.channel_name = item.ChannelName
this.in.device_id = item.DeviceID this.in.device_id = item.DeviceID
this.in.longitude = data.longitude this.in.longitude = data.longitude
this.in.latitude = data.latitude this.in.latitude = data.latitude
this.url = item.WS_FLV + `?token=${this.token}` this.url = item.WS_FLV + `?token=${this.token}`
console.log('this', this.url); console.log('this', this.url)
}, },
getGbsToken() { getGbsToken() {
login().then(res=>{ login().then((res) => {
console.log('tttt',res); console.log('tttt', res)
this.token = res.URLToken this.token = res.URLToken
}) })
}, },
@ -121,7 +128,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-dialog { ::v-deep .el-dialog {
background-image: url("~@/assets/icon-hza/dialog_back01.png"); background-image: url('~@/assets/icon-hza/dialog_back01.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 68vh; height: 68vh;
@ -141,13 +148,13 @@ export default {
.left_box { .left_box {
width: 20vw; width: 20vw;
height: 60vh; height: 60vh;
background-image: url("~@/assets/icon-hza/bg_left02.png"); background-image: url('~@/assets/icon-hza/bg_left02.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
.left_box_title { .left_box_title {
width: 20vw; width: 20vw;
height: 5vh; height: 5vh;
background-image: url("~@/assets/icon-hza/bg_title02.png"); background-image: url('~@/assets/icon-hza/bg_title02.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
.left_box_title_text { .left_box_title_text {
@ -197,7 +204,7 @@ export default {
.video_btn { .video_btn {
width: 9vw; width: 9vw;
height: 4vh; height: 4vh;
background-image: url("~@/assets/icon-hza/video_btn.png"); background-image: url('~@/assets/icon-hza/video_btn.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
display: flex; display: flex;
@ -207,14 +214,14 @@ export default {
.video_icon { .video_icon {
width: 1vw; width: 1vw;
height: 2vh; height: 2vh;
background-image: url("~@/assets/icon-hza/check_video.png"); background-image: url('~@/assets/icon-hza/check_video.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.around_video_icon { .around_video_icon {
width: 1vw; width: 1vw;
height: 2vh; height: 2vh;
background-image: url("~@/assets/icon-hza/around_video.png"); background-image: url('~@/assets/icon-hza/around_video.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -227,7 +234,7 @@ export default {
} }
} }
.video_btn:hover { .video_btn:hover {
background-image: url("~@/assets/icon-hza/video_btn_hover.png"); background-image: url('~@/assets/icon-hza/video_btn_hover.png');
} }
} }
.footer_box { .footer_box {
@ -245,7 +252,7 @@ export default {
color: #bfe7f9; color: #bfe7f9;
} }
.el-input__inner { .el-input__inner {
background: rgba(0,0,0,0); background: rgba(0, 0, 0, 0);
border: 0.1px solid #00539f; border: 0.1px solid #00539f;
border-radius: 0; border-radius: 0;
color: #edf1f7; color: #edf1f7;
@ -266,7 +273,7 @@ export default {
color: #bfe7f9; color: #bfe7f9;
} }
.el-input__inner { .el-input__inner {
background: rgba(0,0,0,0); background: rgba(0, 0, 0, 0);
border: 0.1px solid #00539f; border: 0.1px solid #00539f;
border-radius: 0; border-radius: 0;
color: #edf1f7; color: #edf1f7;
@ -286,4 +293,4 @@ export default {
} }
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save