265 lines
7.4 KiB
Vue
265 lines
7.4 KiB
Vue
|
<template>
|
||
|
|
<div class="project-photography main-page">
|
||
|
|
<el-col :span="6" class="h100">
|
||
|
|
<module-one-1-1 label="项目全景">
|
||
|
|
<div class="photography-list">
|
||
|
|
<template v-if="photographyList && photographyList.length > 0">
|
||
|
|
<el-carousel height="100%" :autoplay="false">
|
||
|
|
<el-carousel-item v-for="(item, idx) in photographyList" :key="idx">
|
||
|
|
<video controls="controls" class="photography-video" loop="loop">
|
||
|
|
<source :src="item.videoUrl" type="video/mp4" :key="item.videoUrl" />
|
||
|
|
您的浏览器不支持Video标签。
|
||
|
|
</video>
|
||
|
|
<div class="photography-list-title">{{ item.videoDate }}</div>
|
||
|
|
</el-carousel-item>
|
||
|
|
</el-carousel>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<div class="photography-list-nodata">
|
||
|
|
<div>
|
||
|
|
<i class="video-play">
|
||
|
|
<svg
|
||
|
|
class="icon"
|
||
|
|
style="
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
vertical-align: middle;
|
||
|
|
fill: currentColor;
|
||
|
|
overflow: hidden;
|
||
|
|
"
|
||
|
|
viewBox="0 0 1024 1024"
|
||
|
|
version="1.1"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
p-id="4551"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M128 138.666667c0-47.232 33.322667-66.666667 74.176-43.562667l663.146667 374.954667c40.96 23.168 40.853333 60.8 0 83.882666L202.176 928.896C161.216 952.064 128 932.565333 128 885.333333v-746.666666z"
|
||
|
|
fill="#3D3D3D"
|
||
|
|
p-id="4552"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</i>
|
||
|
|
</div>
|
||
|
|
<div class="photography-list-no-title">暂无数据</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</module-one-1-1>
|
||
|
|
<module-one-2-1 label="进行中的计划">
|
||
|
|
<div
|
||
|
|
class="equipment-list-min equipment-list-min_div quality-target-index-min quality-target-index-min_div"
|
||
|
|
>
|
||
|
|
<div class="czz-number-img czz-number-img-blue">
|
||
|
|
<svg-icon icon-class="notesearch"></svg-icon>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="equipment-list-data equipment-list-data_div_top">
|
||
|
|
<span>测试计划名称1</span>
|
||
|
|
</div>
|
||
|
|
<div class="equipment-list-data equipment-list-data_div_bottom">
|
||
|
|
<span class="sp-data">{{ it.value || 0 }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="equipment-list-min equipment-list-min_div quality-target-index-min quality-target-index-min_div"
|
||
|
|
>
|
||
|
|
<div class="czz-number-img czz-number-img-blue">
|
||
|
|
<svg-icon icon-class="notesearch"></svg-icon>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="equipment-list-data equipment-list-data_div_top">
|
||
|
|
<span>测试计划名称2</span>
|
||
|
|
</div>
|
||
|
|
<div class="equipment-list-data equipment-list-data_div_bottom">
|
||
|
|
<span class="sp-data">{{ it.value || 0 }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</module-one-2-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 {
|
||
|
|
photographyList: [],
|
||
|
|
info: null,
|
||
|
|
activeNames: [],
|
||
|
|
infoList: {},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
window.photography = this;
|
||
|
|
this.$store.dispatch("ChangeNav", 502);
|
||
|
|
this.$bus.$on("projectChange", (prj) => {
|
||
|
|
this.selProject = prj;
|
||
|
|
this.init();
|
||
|
|
});
|
||
|
|
this.selProject = this.$store.getters.selProject;
|
||
|
|
this.init();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
init() {
|
||
|
|
if (!this.selProject) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.initPhotographyList();
|
||
|
|
},
|
||
|
|
initPhotographyList() {
|
||
|
|
this.$api.detail.photographyList(this.selProject.id).then((d) => {
|
||
|
|
this.photographyList = 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;
|
||
|
|
}
|
||
|
|
.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>
|