157 lines
4.2 KiB
Vue
157 lines
4.2 KiB
Vue
<template>
|
|
<div class="fullHeight videoOverview">
|
|
<closePage></closePage>
|
|
<div class="header"></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="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="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>
|
|
<videoModule class="playVideoBox"
|
|
:type="'project'"
|
|
:value="selectList"
|
|
:displayBottomMod="false"
|
|
:winNumBer="9"
|
|
:autoplay="false"
|
|
:showCaptrue="false"
|
|
:showControl="false"
|
|
:showPlayback="false"
|
|
:xxx="7"
|
|
></videoModule>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { selectProjectVideoListApi,selectUserVideoListApi } from "@/assets/js/api/equipmentCenter/cameraList";
|
|
import videoModule from "@/components/videoModule/videoModule.vue";
|
|
import closePage from "@/components/closePage"
|
|
export default {
|
|
components: { videoModule,closePage },
|
|
data() {
|
|
return {
|
|
devList: [],
|
|
selectList:[],
|
|
dataType:1,
|
|
activeNames: [0],
|
|
screens:{},
|
|
pluginType:'',
|
|
};
|
|
},
|
|
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()
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
changeVideo(item){
|
|
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: #00091a;
|
|
height: calc(100% - 52px);
|
|
margin: 0 15px 0 0;
|
|
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;
|
|
}
|
|
}
|
|
/deep/.playVideoBox{
|
|
background-color: #030303;
|
|
float: left;
|
|
width: calc(100% - 300px);
|
|
}
|
|
</style> |