<template>
|
<div class="box">
|
<div class="header">
|
<div class="title1">重点视频选择区</div>
|
<div class="title2">
|
<div class="bg1"></div>
|
<div @click="shwoAllVideoChange">查看全部</div>
|
</div>
|
</div>
|
<div class="content">
|
<div class="divBox">
|
<div class="imageBox image6"
|
:class="{ active: currentIndex == 5 }"
|
@click="imageChange(5)"></div>
|
</div>
|
<div class="divBox">
|
<div class="imageBox image5"
|
:class="{ active: currentIndex == 2 }"
|
@click="imageChange(2)"></div>
|
</div>
|
<div class="divBox">
|
<div class="imageBox image3"
|
:class="{ active: currentIndex == 3 }"
|
@click="imageChange(3)"></div>
|
</div>
|
<div class="divBox">
|
<div class="imageBox image4"
|
:class="{ active: currentIndex == 1 }"
|
@click="imageChange(1)"></div>
|
</div>
|
<div class="divBox">
|
<div class="imageBox image1"
|
:class="{ active: currentIndex == 4 }"
|
@click="imageChange(4)"></div>
|
</div>
|
<div class="divBox">
|
<div class="imageBox image2"
|
:class="{ active: currentIndex == 6 }"
|
@click="imageChange(6)"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { fsync } from 'fs'
|
import { videoPreviewSubjectTree } from '../../../utils/api.js'
|
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data () {
|
//这里存放数据
|
return {
|
currentIndex: 0
|
}
|
},
|
//方法集合
|
methods: {
|
async imageChange (id) {
|
this.currentIndex = id;
|
//this.$store.state.showVideoFlag = true
|
var vs = { 5: '区域全景', 2: '荣京东街', 3: '大族广场', 1: '荣华路', 4: '博大公园', 6: '高点摄像头' };
|
//var res = { 6: 6, 5: 1, 4: 5, 3: 4, 2: 3, 1: 2 };
|
switch (id) {
|
case 1:
|
this.$store.state.xOffset = Offset[5].xOffset;
|
this.$store.state.yOffset = Offset[5].yOffset;
|
break;
|
case 2:
|
this.$store.state.xOffset = Offset[0].xOffset;
|
this.$store.state.yOffset = Offset[0].yOffset;
|
break;
|
case 3:
|
this.$store.state.xOffset = Offset[2].xOffset;
|
this.$store.state.yOffset = Offset[2].yOffset;
|
break;
|
case 4:
|
this.$store.state.xOffset = Offset[3].xOffset;
|
this.$store.state.yOffset = Offset[3].yOffset;
|
break;
|
case 5:
|
this.$store.state.xOffset = Offset[1].xOffset;
|
this.$store.state.yOffset = Offset[1].yOffset;
|
break;
|
case 6:
|
this.$store.state.xOffset = Offset[4].xOffset;
|
this.$store.state.yOffset = Offset[4].yOffset;
|
break;
|
}
|
this.$bus.$emit('stopPlay');
|
|
if (this.$store.state.videoId != null) {
|
map.execute('grapi', 'RoamingEnd', { time: 0.1 }, function () { }); // 停止漫游
|
}
|
var rs = await videoPreviewSubjectTree(VIDEO_SORT[id]);
|
console.log('FocusPage => ', rs);
|
if (!rs || rs.status != 200) return;
|
|
this.$store.state.index = -1;
|
this.$store.state.videoName = vs[id];
|
this.$store.state.videoId = id;
|
|
this.$store.commit('addVideos', rs.data.data.channelList);
|
setTimeout(() => {
|
this.$bus.$emit('playVideo', 0)
|
}, 500); // 3500
|
},
|
shwoAllVideoChange () {
|
this.$store.state.ShowPanoramicFlag = true
|
}
|
},
|
created () { }
|
}
|
</script>
|
<style lang="less" scoped>
|
.box {
|
// display: flex;
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
.active {
|
border: 1px solid #14fad7;
|
}
|
.header {
|
width: 100%;
|
height: 67px;
|
background: url('../../../assets/img/FoucesVideoHeader.png') no-repeat
|
center;
|
background-size: 100% 100%;
|
position: absolute;
|
|
.title1 {
|
line-height: 67px;
|
margin-left: 23.57px;
|
position: absolute;
|
float: left;
|
font-size: 32px;
|
color: white;
|
font-family: SourceHanSansCN;
|
}
|
.bg1 {
|
height: 16px;
|
width: 16px;
|
float: right;
|
right: 86px;
|
background: url('../../../assets/img/Dot.png') no-repeat center;
|
background-size: 100% 100%;
|
position: absolute;
|
}
|
|
.title2 {
|
top: 23.8px;
|
position: absolute;
|
font-size: 20px;
|
height: 18.84px;
|
right: 20.86px;
|
line-height: 18.84px;
|
float: right;
|
color: #14fad7;
|
cursor: pointer;
|
font-family: SourceHanSansCN;
|
}
|
}
|
.content {
|
width: 100%;
|
height: 670px;
|
background: url('../../../assets/img/Rectangle 894.png') no-repeat center;
|
background-size: 100% 100%;
|
padding-top: 75px;
|
.imageBox {
|
width: 100%;
|
height: 100%;
|
}
|
|
.divBox {
|
width: 38%;
|
height: 26%;
|
margin-left: 5%;
|
margin-top: 2%;
|
float: left;
|
|
padding: 1%;
|
}
|
.image1 {
|
background: url('../../../assets/img/video/博大公园.png') no-repeat center;
|
background-size: 100% 100%;
|
}
|
.image2 {
|
background: url('../../../assets/img/video/创意生活广场.png') no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
.image3 {
|
background: url('../../../assets/img/video/大族广场.png') no-repeat center;
|
background-size: 100% 100%;
|
}
|
.image4 {
|
background: url('../../../assets/img/video/荣华路.png') no-repeat center;
|
background-size: 100% 100%;
|
}
|
.image5 {
|
background: url('../../../assets/img/video/容京街.png') no-repeat center;
|
background-size: 100% 100%;
|
}
|
.image6 {
|
background: url('../../../assets/img/video/同仁医院.png') no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
</style>
|
