修改大屏问题
parent
7c736b0fd5
commit
c50517a26c
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div class="screen-module">
|
||||
<div class="screen-one-3-2">
|
||||
<div class="module-title">
|
||||
<span>{{label}}</span>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<div class="screen-module">
|
||||
<div class="screen-one-3-3" :class="notitle?'no-title':''">
|
||||
<div class="module-title">
|
||||
<span>{{label}}</span>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
},
|
||||
notitle: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -13,6 +13,8 @@ import moduleOne21 from "../components/module/module-one-2-1.vue";
|
|||
import moduleOne22 from "../components/module/module-one-2-2.vue";
|
||||
import moduleOne23 from "../components/module/module-one-2-3.vue";
|
||||
import moduleOne31 from "../components/module/module-one-3-1.vue";
|
||||
import moduleOne32 from "../components/module/module-one-3-2.vue";
|
||||
import moduleOne33 from "../components/module/module-one-3-3.vue";
|
||||
import staffSurveyChart from "../components/staffSurveyChart.vue";
|
||||
import trendChartLine from "../components/trend-chart-line.vue";
|
||||
import trendLineChart from "../components/trend-line-chart.vue";
|
||||
|
|
@ -36,6 +38,8 @@ Vue.component("module-one-2-1", moduleOne21);
|
|||
Vue.component("module-one-2-2", moduleOne22);
|
||||
Vue.component("module-one-2-3", moduleOne23);
|
||||
Vue.component("module-one-3-1", moduleOne31);
|
||||
Vue.component("module-one-3-2", moduleOne32);
|
||||
Vue.component("module-one-3-3", moduleOne33);
|
||||
Vue.component("people-number", peopleNumber);
|
||||
Vue.component("staff-survey-chart", staffSurveyChart);
|
||||
Vue.component("trend-chart-line", trendChartLine);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,183 +1,208 @@
|
|||
<template>
|
||||
<div class="project-photography main-page">
|
||||
<el-col :span="6" class="h100">
|
||||
<module-one-3-1 label="项目全景列表">
|
||||
<div class="left-list scroll">
|
||||
<template v-if="infoList && infoList.length > 0">
|
||||
<div
|
||||
v-for="(item, index) in infoList"
|
||||
:key="index"
|
||||
class="video-item"
|
||||
@click.stop="playVideo(item)"
|
||||
>
|
||||
<span class="div-date">{{ item.videoDate }}</span>
|
||||
<i
|
||||
class="header-icon el-icon-camera-solid"
|
||||
style="font-size: 24px; color: aqua"
|
||||
></i>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else style="text-align: center" class="div-no-data">
|
||||
<img src="images/nodata.png" style="width: 120px" />
|
||||
<div style="text-align: center; font-size: 12px; color: #888">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</module-one-3-1>
|
||||
</el-col>
|
||||
<el-col :span="18" class="no-title">
|
||||
<module-one-3-3 :notitle="true">
|
||||
<template v-if="info">
|
||||
<div class="right-title">
|
||||
<span class="sp-title">{{ info.videoDate }}</span>
|
||||
</div>
|
||||
<video style="width: 98%;" controls>
|
||||
<source :src="info.videoUrl" type="video/mp4" />
|
||||
您的浏览器不支持Video标签。
|
||||
</video>
|
||||
</template>
|
||||
<div v-else style="text-align: center" class="div-no-data">
|
||||
<img src="images/nodata.png" style="width: 120px" />
|
||||
<div style="text-align: center; font-size: 12px; color: #888">暂无数据</div>
|
||||
</div>
|
||||
</module-one-3-3>
|
||||
</el-col>
|
||||
</div>
|
||||
<div class="project-photography main-page">
|
||||
<el-col :span="6" class="h100">
|
||||
<module-one-3-1 label="项目全景列表">
|
||||
<div class="left-list scroll">
|
||||
<template v-if="infoList && infoList.length > 0">
|
||||
<div v-for="(item, index) in infoList" :key="index" :class="info==item?'is-active':''" class="video-item" @click.stop="playVideo(item)">
|
||||
<span class="div-date">{{ item.videoDate }}</span>
|
||||
<i class="header-icon el-icon-camera-solid" style="font-size: 24px; color: aqua"></i>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else style="text-align: center" class="div-no-data">
|
||||
<img src="images/nodata.png" style="width: 120px" />
|
||||
<div style="text-align: center; font-size: 12px; color: #888">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</module-one-3-1>
|
||||
</el-col>
|
||||
<el-col :span="18" class="no-title">
|
||||
<module-one-3-3 :notitle="true">
|
||||
<template v-if="info">
|
||||
<div class="right-title">
|
||||
<span class="sp-title">{{ info.videoDate }}</span>
|
||||
</div>
|
||||
<video style="width: 98%;" controls>
|
||||
<source :src="info.videoUrl" type="video/mp4" />您的浏览器不支持Video标签。
|
||||
</video>
|
||||
</template>
|
||||
<div v-else style="text-align: center" class="div-no-data">
|
||||
<img src="images/nodata.png" style="width: 120px" />
|
||||
<div style="text-align: center; font-size: 12px; color: #888">暂无数据</div>
|
||||
</div>
|
||||
</module-one-3-3>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
info: null,
|
||||
activeNames: [],
|
||||
infoList: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
window.photography = this;
|
||||
this.$store.dispatch("ChangeNav", 501);
|
||||
this.$bus.$on("projectChange", (prj) => {
|
||||
this.selProject = prj;
|
||||
this.init();
|
||||
});
|
||||
this.selProject = this.$store.getters.selProject;
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
playVideo(it) {
|
||||
this.info = null;
|
||||
setTimeout(() => {
|
||||
this.info = it;
|
||||
}, 400);
|
||||
},
|
||||
init() {
|
||||
if (!this.selProject) {
|
||||
return;
|
||||
}
|
||||
this.$api.detail.photographyList(this.selProject.id).then((d) => {
|
||||
if (d.data.length > 0) {
|
||||
this.info = d.data[0];
|
||||
} else {
|
||||
this.info = null;
|
||||
data() {
|
||||
return {
|
||||
info: null,
|
||||
activeNames: [],
|
||||
infoList: {},
|
||||
}
|
||||
this.infoList = d.data;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
mounted() {
|
||||
window.photography = this
|
||||
this.$store.dispatch('ChangeNav', 501)
|
||||
this.$bus.$on('projectChange', (prj) => {
|
||||
this.selProject = prj
|
||||
this.init()
|
||||
})
|
||||
this.selProject = this.$store.getters.selProject
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
playVideo(it) {
|
||||
this.info = null
|
||||
setTimeout(() => {
|
||||
this.info = it
|
||||
}, 400)
|
||||
},
|
||||
init() {
|
||||
if (!this.selProject) {
|
||||
return
|
||||
}
|
||||
this.$api.detail.photographyList(this.selProject.id).then((d) => {
|
||||
if (d.data.length > 0) {
|
||||
this.info = d.data[0]
|
||||
} else {
|
||||
this.info = null
|
||||
}
|
||||
this.infoList = d.data
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.project-photography {
|
||||
.div-no-data {
|
||||
text-align: center;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.no-title {
|
||||
.right-title {
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.div-no-data {
|
||||
text-align: center;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.sp-title {
|
||||
display: inline-block;
|
||||
line-height: 72px;
|
||||
padding: 0px 40px;
|
||||
font-size: 40px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../../assets/images/bgphoto.png");
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
height: calc(100% - 201px);
|
||||
}
|
||||
/deep/ .screen-one-3-3 {
|
||||
background-image: none;
|
||||
border: solid 1px #409eff5c;
|
||||
.module-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-list {
|
||||
max-height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
/deep/ .screen-one-3-1 {
|
||||
.el-collapse {
|
||||
border: none;
|
||||
margin-top: 4px;
|
||||
|
||||
.el-collapse-item {
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
background-color: #097fca2e;
|
||||
color: #089fff;
|
||||
border-bottom: dotted 1px #089fff77;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
.img-item {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
.no-title {
|
||||
.right-title {
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.video-item {
|
||||
position: relative;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-bottom: solid 1px #089fff77;
|
||||
.div-date {
|
||||
width: calc(90% - 24px);
|
||||
text-align: left;
|
||||
bottom: 0px;
|
||||
color: #089fff;
|
||||
padding-left: 24px;
|
||||
}
|
||||
.sp-title {
|
||||
display: inline-block;
|
||||
line-height: 72px;
|
||||
padding: 0px 40px;
|
||||
font-size: 40px;
|
||||
background-size: 100% 100%;
|
||||
background-image: url('../../assets/images/bgphoto.png');
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
height: calc(100% - 201px);
|
||||
}
|
||||
/deep/ .screen-one-3-3 {
|
||||
background-image: none;
|
||||
border: solid 1px #409eff5c;
|
||||
.module-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-list {
|
||||
max-height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
.screen-one-3-1 {
|
||||
height: calc(100% - 20px) !important;
|
||||
.left-list {
|
||||
padding: 10px 10px 10px 0px;
|
||||
.video-item {
|
||||
line-height: 40px;
|
||||
border: solid 1px #1e8fff83;
|
||||
padding: 0px 20px;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
&:first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.header-icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
&.is-active {
|
||||
background-color: #089fff;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background-color: #089fff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: #08a0ff95;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .screen-one-3-1 {
|
||||
.el-collapse {
|
||||
border: none;
|
||||
margin-top: 4px;
|
||||
|
||||
.el-collapse-item {
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
background-color: #097fca2e;
|
||||
color: #089fff;
|
||||
border-bottom: dotted 1px #089fff77;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
.img-item {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
.video-item {
|
||||
position: relative;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-bottom: solid 1px #089fff77;
|
||||
.div-date {
|
||||
width: calc(90% - 24px);
|
||||
text-align: left;
|
||||
bottom: 0px;
|
||||
color: #089fff;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue