dev_xd
姜玉琦 2025-04-13 22:40:19 +08:00
commit 6d1663f282
5 changed files with 1752 additions and 1755 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

@ -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>