151 lines
3.5 KiB
Vue
151 lines
3.5 KiB
Vue
<template>
|
||
<div class="monitor">
|
||
<div class="listLeft">
|
||
<el-date-picker
|
||
@change="credad"
|
||
v-model="shootingTime"
|
||
value-format="yyyy-MM-dd"
|
||
type="date"
|
||
placeholder="选择日期时间"
|
||
:clearable ="true"
|
||
>
|
||
</el-date-picker>
|
||
<vue-scroll>
|
||
<div class="list-item" v-for="(item, index) in uavList" :key="index" @click="checkM(item)">
|
||
<div class="areaName">
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
<div class="date">
|
||
<span>拍摄时间：</span><span>{{ item.shootingTime }}</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="uavList==0"
|
||
class="empty"
|
||
style="position: absolute;left: 40%;top: 40%;
|
||
transform: translate(-50%, -50%);
|
||
"
|
||
>
|
||
<img src="@/assets/images/noData3.png" />
|
||
<div style="text-align: center; color: #5b626b; font-size: 14px">
|
||
暂无数据
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
|
||
<div class="mpRight">
|
||
<video
|
||
:src="$store.state.FILEURL + videoUrl"
|
||
style="width: 100%; height: 100%"
|
||
ref="vueMiniPlayer"
|
||
autoplay
|
||
controls
|
||
loop
|
||
></video>
|
||
<!-- <video class="topInner" :src="$store.state.FILEURL + videoUrl"></video> -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getUavVideoApi } from "@/assets/js/api/zhongjianFourth";
|
||
export default {
|
||
data() {
|
||
return {
|
||
shootingTime: '', //日期
|
||
uavList: [], //列表数据
|
||
videoUrl: "", //视频
|
||
};
|
||
},
|
||
created() {
|
||
this.credad();
|
||
},
|
||
methods: {
|
||
//获取无人机列表数据
|
||
credad(val) {
|
||
let data = ""
|
||
if(val) {
|
||
data = val
|
||
}
|
||
console.log("获取无人机列表数据 :时间参数 -- " ,val);
|
||
getUavVideoApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
shootingDate: data,
|
||
}).then((res) => {
|
||
console.log("无人机res", res);
|
||
this.uavList = res.result;
|
||
this.uavList.forEach((item) => {
|
||
this.videoUrl = item.videoUrl;
|
||
});
|
||
console.log("this.videoUrl", this.videoUrl);
|
||
});
|
||
},
|
||
//切换视频
|
||
checkM(item){
|
||
console.log('点击切换',item);
|
||
this.videoUrl=item.videoUrl
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.monitor {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.listLeft {
|
||
width: 15%;
|
||
height: 100%;
|
||
.list-item {
|
||
width: 300px;
|
||
height: 120px;
|
||
background: url("~@/assets/images/zjsj/frameBG.png") no-repeat;
|
||
background-size: 90% 100%;
|
||
font-size: 16px;
|
||
margin-top: 20px;
|
||
cursor: pointer;
|
||
.areaName {
|
||
font-size: 20px;
|
||
span {
|
||
display: inline-block;
|
||
margin: 25px 0 0 30px;
|
||
}
|
||
}
|
||
.date {
|
||
font-size: 12px;
|
||
margin: 30px 0 0 30px;
|
||
}
|
||
}
|
||
}
|
||
.mpRight {
|
||
width: 84%;
|
||
height: 96%;
|
||
// background: url(../assets/temp/tab6.png) center center;
|
||
// background-repeat: no-repeat;
|
||
// background-size: 100%;
|
||
.video {
|
||
width: calc(100% - 33px);
|
||
height: calc(100% - 62px);
|
||
margin: 15px 0 15px 15px;
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .el-date-editor.el-input,
|
||
.el-date-editor.el-input__inner {
|
||
width: 275px;
|
||
}
|
||
::v-deep .el-input__inner {
|
||
background: transparent !important ;
|
||
border: 1px solid #66d3d8 !important;
|
||
}
|
||
::v-deep .el-input__icon {
|
||
line-height: 30px;
|
||
color: #66d3d8;
|
||
}
|
||
</style> |