Merge branch 'dev_xd' of http://62.234.3.186:3000/jiangyq/YZProjectCloud into dev_xd
commit
6d1663f282
|
@ -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 moduleOne22 from "../components/module/module-one-2-2.vue";
|
||||||
import moduleOne23 from "../components/module/module-one-2-3.vue";
|
import moduleOne23 from "../components/module/module-one-2-3.vue";
|
||||||
import moduleOne31 from "../components/module/module-one-3-1.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 staffSurveyChart from "../components/staffSurveyChart.vue";
|
||||||
import trendChartLine from "../components/trend-chart-line.vue";
|
import trendChartLine from "../components/trend-chart-line.vue";
|
||||||
import trendLineChart from "../components/trend-line-chart.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-2", moduleOne22);
|
||||||
Vue.component("module-one-2-3", moduleOne23);
|
Vue.component("module-one-2-3", moduleOne23);
|
||||||
Vue.component("module-one-3-1", moduleOne31);
|
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("people-number", peopleNumber);
|
||||||
Vue.component("staff-survey-chart", staffSurveyChart);
|
Vue.component("staff-survey-chart", staffSurveyChart);
|
||||||
Vue.component("trend-chart-line", trendChartLine);
|
Vue.component("trend-chart-line", trendChartLine);
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,183 +1,208 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="project-photography main-page">
|
<div class="project-photography main-page">
|
||||||
<el-col :span="6" class="h100">
|
<el-col :span="6" class="h100">
|
||||||
<module-one-3-1 label="项目全景列表">
|
<module-one-3-1 label="项目全景列表">
|
||||||
<div class="left-list scroll">
|
<div class="left-list scroll">
|
||||||
<template v-if="infoList && infoList.length > 0">
|
<template v-if="infoList && infoList.length > 0">
|
||||||
<div
|
<div v-for="(item, index) in infoList" :key="index" :class="info==item?'is-active':''" class="video-item" @click.stop="playVideo(item)">
|
||||||
v-for="(item, index) in infoList"
|
<span class="div-date">{{ item.videoDate }}</span>
|
||||||
:key="index"
|
<i class="header-icon el-icon-camera-solid" style="font-size: 24px; color: aqua"></i>
|
||||||
class="video-item"
|
</div>
|
||||||
@click.stop="playVideo(item)"
|
</template>
|
||||||
>
|
<div v-else style="text-align: center" class="div-no-data">
|
||||||
<span class="div-date">{{ item.videoDate }}</span>
|
<img src="images/nodata.png" style="width: 120px" />
|
||||||
<i
|
<div style="text-align: center; font-size: 12px; color: #888">暂无数据</div>
|
||||||
class="header-icon el-icon-camera-solid"
|
</div>
|
||||||
style="font-size: 24px; color: aqua"
|
</div>
|
||||||
></i>
|
</module-one-3-1>
|
||||||
</div>
|
</el-col>
|
||||||
</template>
|
<el-col :span="18" class="no-title">
|
||||||
<div v-else style="text-align: center" class="div-no-data">
|
<module-one-3-3 :notitle="true">
|
||||||
<img src="images/nodata.png" style="width: 120px" />
|
<template v-if="info">
|
||||||
<div style="text-align: center; font-size: 12px; color: #888">暂无数据</div>
|
<div class="right-title">
|
||||||
</div>
|
<span class="sp-title">{{ info.videoDate }}</span>
|
||||||
</div>
|
</div>
|
||||||
</module-one-3-1>
|
<video style="width: 98%;" controls>
|
||||||
</el-col>
|
<source :src="info.videoUrl" type="video/mp4" />您的浏览器不支持Video标签。
|
||||||
<el-col :span="18" class="no-title">
|
</video>
|
||||||
<module-one-3-3 :notitle="true">
|
</template>
|
||||||
<template v-if="info">
|
<div v-else style="text-align: center" class="div-no-data">
|
||||||
<div class="right-title">
|
<img src="images/nodata.png" style="width: 120px" />
|
||||||
<span class="sp-title">{{ info.videoDate }}</span>
|
<div style="text-align: center; font-size: 12px; color: #888">暂无数据</div>
|
||||||
</div>
|
</div>
|
||||||
<video style="width: 98%;" controls>
|
</module-one-3-3>
|
||||||
<source :src="info.videoUrl" type="video/mp4" />
|
</el-col>
|
||||||
您的浏览器不支持Video标签。
|
</div>
|
||||||
</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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
info: null,
|
info: null,
|
||||||
activeNames: [],
|
activeNames: [],
|
||||||
infoList: {},
|
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;
|
|
||||||
}
|
}
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.project-photography {
|
.project-photography {
|
||||||
.div-no-data {
|
.div-no-data {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
height: 600px;
|
height: 600px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
|
||||||
.no-title {
|
|
||||||
.right-title {
|
|
||||||
height: 200px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
.sp-title {
|
.no-title {
|
||||||
display: inline-block;
|
.right-title {
|
||||||
line-height: 72px;
|
height: 200px;
|
||||||
padding: 0px 40px;
|
display: flex;
|
||||||
font-size: 40px;
|
align-items: center;
|
||||||
background-size: 100% 100%;
|
justify-content: center;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
.video-item {
|
.sp-title {
|
||||||
position: relative;
|
display: inline-block;
|
||||||
line-height: 30px;
|
line-height: 72px;
|
||||||
display: flex;
|
padding: 0px 40px;
|
||||||
align-items: center;
|
font-size: 40px;
|
||||||
cursor: pointer;
|
background-size: 100% 100%;
|
||||||
border-bottom: solid 1px #089fff77;
|
background-image: url('../../assets/images/bgphoto.png');
|
||||||
.div-date {
|
}
|
||||||
width: calc(90% - 24px);
|
video {
|
||||||
text-align: left;
|
width: 100%;
|
||||||
bottom: 0px;
|
height: calc(100% - 201px);
|
||||||
color: #089fff;
|
}
|
||||||
padding-left: 24px;
|
/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>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue