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

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

@ -1,115 +1,122 @@
<template>
<el-dialog
class="dialog"
:title="title"
:visible.sync="visible"
:close-on-click-modal="false"
width="1600px"
@close="close"
class="dialog"
:title="title"
:visible.sync="visible"
:close-on-click-modal="false"
width="1600px"
@close="close"
>
<div class="dialog_box">
<div class="left_box">
<!-- 拟标题 -->
<div class="left_box_title">
<div class="left_box_title_text">重点人员信息</div>
<div class="in_box">
<div class="in_box_text">
<div class="in_box_text_item">设备名称:</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="dialog_box">
<div class="left_box">
<!-- 拟标题 -->
<div class="left_box_title">
<div class="left_box_title_text">重点人员信息</div>
<div class="in_box">
<div class="in_box_text">
<div class="in_box_text_item">设备名称:</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>
<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 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 class="btn_box">
<div class="video_btn">
<div class="video_icon"></div>
<div class="video_text">视频回放</div>
</div>
<div class="video_btn">
<div class="around_video_icon"></div>
<div class="video_text">周边视频</div>
</div>
</div>
</div>
<div class="btn_box">
<div class="video_btn">
<div class="video_icon"></div>
<div class="video_text">视频回放</div>
</div>
<div class="video_btn">
<div class="around_video_icon"></div>
<div class="video_text">周边视频</div>
</div>
</div>
<div class="footer_box">
<div class="start_time_box">
<div class="time_text">开始时间：</div>
<el-date-picker
v-model="starttime"
type="datetime"
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 class="footer_box">
<div class="start_time_box">
<div class="time_text">开始时间：</div>
<el-date-picker
v-model="starttime"
type="datetime"
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 class="right_box">
<LivePlayer
:videoUrl="url"
fluent
:autoplay="true"
style="width: 52.1vw"
></LivePlayer>
</div>
</div>
<div class="right_box">
<LivePlayer :videoUrl="url" fluent :autoplay="true" style="width: 52.1vw;"></LivePlayer>
</div>
</div>
</el-dialog>
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
import { login } from '@/api/facility'
export default {
name:'VideoDialog',
name: 'VideoDialog',
components: { LivePlayer },
data() {
return {
visible: false,
title:'',
in:{
channel_name:'',
device_id:'',
longitude:'',
latitude:''
title: '',
in: {
channel_name: '',
device_id: '',
longitude: '',
latitude: ''
},
starttime:'',
endtime:"",
url:'',
token:'',
starttime: '',
endtime: '',
url: '',
token: ''
}
},
created() {
this.getGbsToken()
},
methods:{
open(item,data) {
methods: {
open(item, data) {
this.visible = true
console.log('item',item)
console.log('item', item)
this.title = item.ChannelName
this.in.channel_name = item.ChannelName
this.in.device_id = item.DeviceID
this.in.longitude = data.longitude
this.in.latitude = data.latitude
this.url = item.WS_FLV + `?token=${this.token}`
console.log('this', this.url);
console.log('this', this.url)
},
getGbsToken() {
login().then(res=>{
console.log('tttt',res);
login().then((res) => {
console.log('tttt', res)
this.token = res.URLToken
})
},
@ -121,7 +128,7 @@ export default {
</script>
<style lang="scss" scoped>
::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-repeat: no-repeat;
height: 68vh;
@ -141,13 +148,13 @@ export default {
.left_box {
width: 20vw;
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-repeat: no-repeat;
.left_box_title {
width: 20vw;
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-repeat: no-repeat;
.left_box_title_text {
@ -197,7 +204,7 @@ export default {
.video_btn {
width: 9vw;
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-repeat: no-repeat;
display: flex;
@ -207,14 +214,14 @@ export default {
.video_icon {
width: 1vw;
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-repeat: no-repeat;
}
.around_video_icon {
width: 1vw;
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-repeat: no-repeat;
}
@ -227,7 +234,7 @@ export default {
}
}
.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 {
@ -245,7 +252,7 @@ export default {
color: #bfe7f9;
}
.el-input__inner {
background: rgba(0,0,0,0);
background: rgba(0, 0, 0, 0);
border: 0.1px solid #00539f;
border-radius: 0;
color: #edf1f7;
@ -266,7 +273,7 @@ export default {
color: #bfe7f9;
}
.el-input__inner {
background: rgba(0,0,0,0);
background: rgba(0, 0, 0, 0);
border: 0.1px solid #00539f;
border-radius: 0;
color: #edf1f7;

Write Preview
Loading…
Cancel
Save