<template>
|
<div>
|
<el-dialog
|
style="margin-top:10vh;"
|
ref="myModelRef"
|
:visible.sync="dialogVisible"
|
:show-close="true"
|
width="550px"
|
class="el-dialog_jes"
|
>
|
<div class="d-flex">
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'catch'?'active':'']"
|
@click="tableType='catch'"
|
>
|
<b>大图</b>
|
</div>
|
<div class="flex-vertical-center px-3">
|
<span class="text-light">|</span>
|
</div>
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'alarm'?'active':'']"
|
@click="tableType='alarm'"
|
>
|
<b>视频</b>
|
</div>
|
</div>
|
<div class="d-flex">
|
<!-- 大图和视频 -->
|
<div style="float:left;width:480px;height:270px;">
|
<httpImg
|
v-if="tableType==='catch'"
|
:src="BigPicUrl"
|
v-img
|
style="max-width:480px;max-height:270px;"
|
></httpImg>
|
|
<div v-if="tableType==='alarm'" style="float:left;width:480px;height:270px;">
|
<video controls="controls" autoplay="autoplay">
|
<source :src="videoUrl" type="video/mp4" style="float:left;width:480px;height:270px;">Your browser does not support the video tag.
|
</video>
|
</div>
|
</div>
|
<!-- 大图和视频 end-->
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import { Row, Col, Dialog, Button } from 'element-ui'
|
import speciaButton from '@/components/specialButton/speciaButton.vue'
|
import { mapActions } from 'vuex'
|
import {
|
getBigPic,
|
accompanyPerson,
|
getVideoByCServer
|
} from '../../../../server/searchList/commomList.js'
|
import silider from '../silider/silider2'
|
export default {
|
components: {
|
elRow: Row,
|
elCol: Col,
|
elButton: Button,
|
elDialog: Dialog,
|
speciaButton,
|
silider,
|
getBigPic,
|
accompanyPerson,
|
getVideoByCServer,
|
mapActions
|
},
|
props: {
|
parentData: {
|
default: () => {},
|
type: Object
|
},
|
BigPicParam: {
|
default: () => {},
|
type: Object
|
},
|
accompanyPersonParam: {
|
default: () => {},
|
type: Object
|
}
|
},
|
watch: {},
|
data() {
|
return {
|
BigPicUrl: '',
|
dialogVisible: false,
|
vxgPlayerId: 'vxgPlayerId',
|
videoUrl: '',
|
/** 设备信息 */
|
deviceInfo: {},
|
/** tab标签对象 */
|
tableType: 'catch'
|
}
|
},
|
methods: {
|
...mapActions(['openNewWindowtab']),
|
// 查找此人
|
searchPerson(obj) {
|
this.openNewWindowtab({
|
urlStr: window.document.location.href.substring(
|
0,
|
window.document.location.href.indexOf('#') + 2
|
),
|
query: 'tabType=table&tableType=mapList&urlPath=' + obj.picSmUrl
|
})
|
},
|
// 查看轨迹
|
orbit(obj) {
|
localStorage.setItem('personId', obj.personId)
|
let jsonstr = localStorage.getItem('sear')
|
localStorage.removeItem('esList') // 清除esList
|
let json = JSON.parse(jsonstr)
|
json.path = obj.picSmUrl
|
localStorage.setItem('searParams', JSON.stringify(json))
|
this.openNewWindowtab({
|
urlStr: window.document.location.href.substring(
|
0,
|
window.document.location.href.indexOf('#') + 2
|
),
|
query: 'tabType=map'
|
})
|
},
|
// 得到大图
|
async getBigImg(BigPicParam) {
|
this.BigPicUrl = ''
|
console.log(BigPicParam, '得到大图的参数')
|
let res = await getBigPic(BigPicParam)
|
let res2 = await getVideoByCServer(BigPicParam)
|
this.videoUrl = res2.data.filepath
|
console.log(res2, '视频url')
|
console.log(res, '得到大图')
|
if (res && res.success) {
|
this.BigPicUrl = res.data.img_url
|
console.log(this.BigPicUrl, '大图路径')
|
}
|
},
|
async getVideoByCServer(BigPicParam) {
|
let res2 = await getVideoByCServer(BigPicParam)
|
if (res2 && res2.success) {
|
this.videoUrl = res2.data.filepath
|
}
|
},
|
/** 显示model框 */
|
/* eslint-disable */
|
// 使弹框显示并，取得大图数据
|
async showModel(BigPicParam, Img) {
|
console.log(BigPicParam, '从普通列表传来的参数')
|
this.BigPicUrl = ''
|
this.videoUrl = ''
|
this.dialogVisible = true
|
this.tableType = 'catch'
|
//this.getBigImg(BigPicParam)
|
this.BigPicUrl = Img
|
this.getVideoByCServer(BigPicParam)
|
}
|
},
|
mounted() {}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.table-type-btns {
|
font-size: 14px;
|
padding: 10px 0px;
|
font-weight: 400;
|
color: #868686;
|
transition: all 0.5s;
|
cursor: pointer;
|
&:after {
|
content: '';
|
display: block;
|
background: transparent;
|
width: 0%;
|
height: 2px;
|
transition: all 0.5s;
|
}
|
&.active {
|
color: #35bde7;
|
&:after {
|
background: #35bde7;
|
width: 100%;
|
}
|
}
|
}
|
.el-dialog .el-dialog__body {
|
padding: 0px 20px 20px;
|
padding-top: 0px !important;
|
padding-right: 20px;
|
padding-bottom: 20px;
|
padding-left: 20px;
|
color: #606266;
|
font-size: 14px;
|
}
|
.zuhe {
|
float: left;
|
width: 50%;
|
border: 2px solid #76bef7;
|
overflow: hidden;
|
}
|
.imgdiv {
|
float: left;
|
width: 50%;
|
}
|
.img43 {
|
width: 160px;
|
height: 160px;
|
max-width: 100%;
|
max-height: 100%;
|
}
|
.percentage-redss {
|
text-align: center;
|
background: url('/static/img/search/red.png');
|
height: 20px;
|
float: left;
|
width: 75px;
|
color: white;
|
margin: -20px 76px;
|
}
|
.percentage-greenss {
|
text-align: center;
|
background: url('/static/img/search/green.png');
|
height: 20px;
|
float: left;
|
width: 75px;
|
color: white;
|
margin: -20px 76px;
|
}
|
.omit {
|
width: 70%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
ul {
|
list-style-type: none;
|
line-height: 1.8em;
|
}
|
.myion {
|
width: 30px;
|
height: 30px;
|
}
|
.green1 {
|
color: green;
|
}
|
.red1 {
|
color: red;
|
}
|
.xiangqing {
|
width: 100%;
|
text-align: center;
|
}
|
video {
|
width: 100%;
|
height: auto;
|
}
|
</style>
|
