278 lines
7.7 KiB
Vue
278 lines
7.7 KiB
Vue
<template>
|
||
<div class="fullHeight videoOverview">
|
||
<closePage></closePage>
|
||
<div class="header">
|
||
<span>视频回放中心</span>
|
||
</div>
|
||
<div class="videoContent">
|
||
<div class="videoListBox fullHeight">
|
||
<div class="pageTitle">视频列表</div>
|
||
<div class="videoBox" v-if="dataType == 1">
|
||
<vue-scroll>
|
||
<ul v-if="devList.length > 0">
|
||
<li
|
||
@click.stop="changeVideo(item)"
|
||
v-for="(item, index) in devList"
|
||
:key="index"
|
||
>
|
||
<img
|
||
v-if="item.deviceType == 2"
|
||
src="@/assets/images/icon-video2-white.png"
|
||
/>
|
||
<img v-else src="@/assets/images/icon-video-white.png" />
|
||
{{ item.videoName }}
|
||
</li>
|
||
</ul>
|
||
<div class="placeholderBox" v-else>
|
||
<img src="@/assets/images/noData2-dark.png" alt="" srcset="" />
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
<div class="videoBox" v-else>
|
||
<vue-scroll>
|
||
<el-collapse v-model="activeNames" style="padding: 0 20px">
|
||
<el-collapse-item
|
||
:title="item.name"
|
||
:name="index"
|
||
v-for="(item, index) in devList"
|
||
:key="index"
|
||
>
|
||
<ul v-if="item.list.length > 0">
|
||
<li
|
||
@click.stop="changeVideo(data)"
|
||
v-for="(data, index2) in item.list"
|
||
:key="index2"
|
||
>
|
||
<img
|
||
v-if="data.deviceType == 2"
|
||
src="@/assets/images/icon-video2-white.png"
|
||
/>
|
||
<img v-else src="@/assets/images/icon-video-white.png" />
|
||
{{ data.videoName }}
|
||
</li>
|
||
</ul>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</vue-scroll>
|
||
</div>
|
||
<div class="timeBox">
|
||
<div class="time-select">
|
||
<span>回放开始时间：</span>
|
||
<el-date-picker
|
||
v-model="selectDate.startTime"
|
||
size="small"
|
||
type="datetime"
|
||
placeholder="选择日期时间"
|
||
format="yyyy-MM-dd HH:mm:ss"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
style="width: 68%;"
|
||
:clearable="false"
|
||
@focus="showVideo = false"
|
||
@blur="showVideo = true"
|
||
></el-date-picker>
|
||
</div>
|
||
<div class="time-select">
|
||
<span>回放结束时间：</span>
|
||
<el-date-picker
|
||
v-model="selectDate.endTime"
|
||
size="small"
|
||
type="datetime"
|
||
placeholder="选择日期时间"
|
||
format="yyyy-MM-dd HH:mm:ss"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
style="width: 68%;"
|
||
:clearable="false"
|
||
@focus="showVideo = false"
|
||
@blur="showVideo = true"
|
||
></el-date-picker>
|
||
</div>
|
||
<div class="btn-option">
|
||
<div class="start-play" @click="replayVideo">回放</div>
|
||
<div class="stop-play" @click="isReplayNum = 0">停止全部回放</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<playBack class="playVideoBox" :showVideo="showVideo" :devList="selectList" :isReplayNum="isReplayNum" :startTime="selectDate.startTime" :endTime="selectDate.endTime" v-if="selectList.length > 0"></playBack>
|
||
<div class="noVideoContent" v-else></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
selectProjectVideoListApi,
|
||
selectUserVideoListApi,
|
||
} from "@/assets/js/api/equipmentCenter/cameraList";
|
||
import playBack from "./components/playBack/playBack.vue";
|
||
import closePage from "@/components/closePage";
|
||
import { dateFormat } from "@/util/nowDate/index"
|
||
export default {
|
||
components: { playBack, closePage },
|
||
data() {
|
||
return {
|
||
devList: [],
|
||
selectList: [],
|
||
dataType: 1,
|
||
activeNames: [0],
|
||
screens: {},
|
||
pluginType: "",
|
||
selectDate: {
|
||
startTime: "",
|
||
endTime: "",
|
||
},
|
||
isReplayNum: 1,
|
||
showVideo: true
|
||
};
|
||
},
|
||
mounted() {
|
||
// console.dir(window.parent)
|
||
// console.log(window.parent.document.getElementById("myFrame"), 12312313)
|
||
// if (this.$store.state.userInfo.accountType != 6) {
|
||
// this.loadData()
|
||
// } else {
|
||
// this.loadData2()
|
||
// }
|
||
//设置录像回放时间的默认值
|
||
this.selectDate.startTime = dateFormat(new Date(), "yyyy-MM-dd 00:00:00");
|
||
this.selectDate.endTime = dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss");
|
||
this.loadData();
|
||
},
|
||
|
||
methods: {
|
||
// 回放视频
|
||
replayVideo(){
|
||
this.isReplayNum = this.isReplayNum + 1;
|
||
},
|
||
changeVideo(item) {
|
||
console.log("点击了列表----");
|
||
|
||
console.log(item, "xxxxxxxxxx");
|
||
this.selectList = [item];
|
||
console.log("右边的值", this.selectList);
|
||
},
|
||
loadData() {
|
||
selectProjectVideoListApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
}).then((res) => {
|
||
var DATA = res.result.videoList;
|
||
this.devList = DATA;
|
||
console.log("视频的列表", res.result);
|
||
this.dataType = res.result.type;
|
||
});
|
||
},
|
||
loadData2() {
|
||
selectUserVideoListApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
userId: this.$store.state.userInfo.userId,
|
||
}).then((res) => {
|
||
var DATA = res.result.videoList;
|
||
this.devList = DATA;
|
||
this.dataType = res.result.type;
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import "./style.less";
|
||
.videoListBox {
|
||
float: left;
|
||
width: 300px;
|
||
color: white;
|
||
background-color: #01112d;
|
||
}
|
||
.pageTitle {
|
||
margin: 12px 0;
|
||
background-color: #01112d;
|
||
&::before {
|
||
background-color: #00fafa;
|
||
}
|
||
}
|
||
.videoBox {
|
||
background-color: #030919;
|
||
height: calc(100% - 240px);
|
||
margin: 0 10px 0 10px;
|
||
position: relative;
|
||
li {
|
||
padding: 10px 25px;
|
||
font-size: 15px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
img {
|
||
margin-right: 8px;
|
||
}
|
||
&:hover {
|
||
background-color: #003e4b;
|
||
}
|
||
}
|
||
/deep/.el-collapse-item__header,
|
||
/deep/.el-collapse-item__wrap {
|
||
background-color: transparent;
|
||
color: white;
|
||
}
|
||
/deep/.el-collapse-item__content {
|
||
color: white;
|
||
padding-bottom: 0;
|
||
}
|
||
}
|
||
.timeBox {
|
||
margin: 10px 10px 0 10px;
|
||
background: rgba(31, 59, 64, 0.71);
|
||
padding: 10px 0px;
|
||
.time-select {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 5px;
|
||
margin-bottom: 10px;
|
||
span {
|
||
color: white;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
.btn-option {
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.start-play {
|
||
padding: 6px 8px;
|
||
background: url("./../../../assets/images/overview/startPlay.png")
|
||
no-repeat;
|
||
background-size: 100%;
|
||
margin-right: 20px;
|
||
cursor: pointer;
|
||
}
|
||
.stop-play {
|
||
padding: 6px 8px;
|
||
background: url("./../../../assets/images/overview/stopPlay.png")
|
||
no-repeat;
|
||
background-size: 100%;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.noVideoContent{
|
||
width: calc(100% - 302px);
|
||
height: calc(100% - 24px);
|
||
background-color: #030303;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
border-color: #CDBE23;
|
||
float: left;
|
||
position: relative;
|
||
}
|
||
/deep/.playVideoBox {
|
||
background-color: #030303;
|
||
float: left;
|
||
width: calc(100% - 300px);
|
||
height: calc(100% - 22px)
|
||
}
|
||
// element 样式
|
||
/deep/.el-date-editor .el-input__inner {
|
||
background: rgba(5, 177, 194, 0.15);
|
||
border-radius: 2px 2px 2px 2px;
|
||
border: 1px solid #00fdff;
|
||
color: white;
|
||
}
|
||
</style>
|