项目详情增加视频切换功能
parent
d7a12c5a2a
commit
1535514b0f
|
|
@ -4,6 +4,7 @@
|
|||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"serve:prod": "vue-cli-service serve --mode production",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,8 +14,7 @@ export default {
|
|||
this.$store.dispatch('ChangeNav', 1);
|
||||
this.$bus.$on('projectChange', prj => {
|
||||
this.selProject = prj;
|
||||
});
|
||||
this.$router.push("/detail");
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -202,12 +202,6 @@
|
|||
</el-col>
|
||||
<el-col :span="12" class="h100">
|
||||
<module-one-2-2 label="" class="no-title no-border">
|
||||
<div v-autoscroll="20" style="height: 100px; overflow: hidden;" v-if="1 == 2">
|
||||
<svg-icon icon-class="money"></svg-icon>
|
||||
<div v-for="(it, idx) in [1, 2, 3, 4, 5, 6, 7, 8, 9]" :key="idx">
|
||||
{{ it }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div class="modify-project-amount" @mouseout="costMouseout" @mouseover="costMouseover">
|
||||
|
|
@ -224,7 +218,7 @@
|
|||
总投资
|
||||
</p>
|
||||
<div>
|
||||
<span class="led-number">{{ costOutData.totalInv||0 }}</span> 万元
|
||||
<span class="led-number">{{ costOutData.totalInv || 0 }}</span> 万元
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -237,7 +231,7 @@
|
|||
本月完成
|
||||
</p>
|
||||
<div>
|
||||
<span class="led-number">{{ costOutData.curMonth||0 }}</span> 万元
|
||||
<span class="led-number">{{ costOutData.curMonth || 0 }}</span> 万元
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -251,7 +245,7 @@
|
|||
本年完成
|
||||
</p>
|
||||
<div>
|
||||
<span class="led-number">{{ costOutData.totalYear||0 }}</span> 万元
|
||||
<span class="led-number">{{ costOutData.totalYear || 0 }}</span> 万元
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -265,7 +259,7 @@
|
|||
开累完成
|
||||
</p>
|
||||
<div>
|
||||
<span class="led-number">{{ costOutData.totalMonth||0 }}</span> 万元
|
||||
<span class="led-number">{{ costOutData.totalMonth || 0 }}</span> 万元
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -280,7 +274,8 @@
|
|||
计划开工日期
|
||||
</p>
|
||||
<div>
|
||||
<span class="led-number">{{ selProject.scheduledStartTime | toDate }}</span>
|
||||
<span class="led-number">{{ selProject.scheduledStartTime | toDate
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -295,7 +290,8 @@
|
|||
计划竣工日期
|
||||
</p>
|
||||
<div>
|
||||
<span class="led-number">{{ selProject.plannedCompletionTime | toDate }}</span>
|
||||
<span class="led-number">{{ selProject.plannedCompletionTime | toDate
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -309,7 +305,8 @@
|
|||
实际开工日期
|
||||
</p>
|
||||
<div>
|
||||
<span class="led-number">{{ selProject.actualOperatingTime | toDate }}</span>
|
||||
<span class="led-number">{{ selProject.actualOperatingTime | toDate
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -323,7 +320,7 @@
|
|||
合同工期
|
||||
</p>
|
||||
<div>
|
||||
<span class="led-number">{{ selProject.projectTimeLimit||'' }}</span> 天
|
||||
<span class="led-number">{{ selProject.projectTimeLimit || '' }}</span> 天
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -338,7 +335,7 @@
|
|||
建筑面积
|
||||
</p>
|
||||
<div>
|
||||
<span class="led-number">{{ selProject.floorArea||'' }}</span> 平方米
|
||||
<span class="led-number">{{ selProject.floorArea || '' }}</span> 平方米
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -351,11 +348,23 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="prj-img-list">
|
||||
<el-carousel height="100%" :autoplay="false">
|
||||
<span class="prj-img-nav" v-if="showImgVideo">
|
||||
<span class="prj-img-nav-item" :class="imgVideoSel == 1 ? 'is-active' : ''"
|
||||
@click="imgVideoSel = 1">效果图</span>
|
||||
<span class="prj-img-nav-item" :class="imgVideoSel == 2 ? 'is-active' : ''"
|
||||
@click="imgVideoSel = 2">视频</span>
|
||||
</span>
|
||||
<el-carousel height="100%" :autoplay="false" v-if="imgVideoSel == 1">
|
||||
<el-carousel-item v-for="(it, idx) in prjImgs" :key="idx">
|
||||
<el-image style="width: 100%; height: 100%" :src="it" fit="contain" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<div class="prj-video-layout" v-if="imgVideoSel == 2">
|
||||
<video class="prj-video">
|
||||
<source :src="prjVideo" type="video/mp4" />
|
||||
您的浏览器不支持Video标签。
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</module-one-2-2>
|
||||
<module-one-1-2 label="项目节点计划预警" class="prj-plan">
|
||||
|
|
@ -524,6 +533,9 @@ export default {
|
|||
deptType5: [],//检测单位
|
||||
deptType6: [],//勘察单位
|
||||
prjImgs: [],
|
||||
prjVideo: null,
|
||||
showImgVideo: false,
|
||||
imgVideoSel: 1,
|
||||
attendanceNav: 0,
|
||||
attendanceTotal: 0,
|
||||
attendanceData: [
|
||||
|
|
@ -548,7 +560,7 @@ export default {
|
|||
projectBuildNode: [],
|
||||
maxWidth: 0,
|
||||
minWidth: 100,
|
||||
costOutData:{},
|
||||
costOutData: {},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -592,6 +604,9 @@ export default {
|
|||
return objs.length > 0 ? objs[0] : null;
|
||||
};
|
||||
this.prjImgs = (this.prjInfo?.setting?.orgImage || '').split(",").filter(d => d);
|
||||
this.prjVideo = this.prjInfo?.setting?.orgVideo || '';
|
||||
this.showImgVideo = this.prjImgs.length > 0 && this.prjVideo;
|
||||
this.imgVideoSel = 1;
|
||||
this.deptType1 = func('建设单位');
|
||||
this.deptType2 = func('设计单位');
|
||||
this.deptType3 = { deptName: this.prjInfo.disDeptName, leader: this.prjInfo.projectPerson, phone: this.prjInfo.projectPersonPhone };
|
||||
|
|
@ -617,18 +632,18 @@ export default {
|
|||
this.loadMilestoneData();
|
||||
this.loadCostOutput();
|
||||
},
|
||||
loadCostOutput(){
|
||||
loadCostOutput() {
|
||||
let dt = this.$dt(new Date());
|
||||
this.$api.detail.costOutputSelectYearAndMonth({
|
||||
comId: this.selProject.comId,
|
||||
projectId: this.selProject.id,
|
||||
year: dt.$y,
|
||||
month: dt.$M + 1,
|
||||
}).then(d=>{
|
||||
this.costOutData=d;
|
||||
}).then(d => {
|
||||
this.costOutData = d;
|
||||
});
|
||||
},
|
||||
loadMilestoneData() {
|
||||
loadMilestoneData() {
|
||||
this.$api.detail.milestoneList({
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
|
|
@ -850,6 +865,36 @@ export default {
|
|||
|
||||
.prj-img-list {
|
||||
height: calc(100% - 130px);
|
||||
position: relative;
|
||||
|
||||
.prj-img-nav {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
|
||||
.prj-img-nav-item {
|
||||
display: inline-block;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
width: 90px;
|
||||
text-align: center;
|
||||
background-color: #192c648a;
|
||||
border: solid 1px #1e90ff8a;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
|
||||
&.is-active {
|
||||
background-color: #50a2eb8a;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prj-video-layout {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.el-carousel {
|
||||
height: 100%;
|
||||
|
|
@ -1117,6 +1162,16 @@ export default {
|
|||
.prj-img-list {
|
||||
height: calc(100% - 150px);
|
||||
|
||||
.prj-img-nav {
|
||||
.prj-img-nav-item {
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
width: 110px;
|
||||
font-size: 18px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.el-carousel {
|
||||
height: 100%;
|
||||
|
||||
|
|
@ -1399,7 +1454,14 @@ export default {
|
|||
|
||||
.prj-img-list {
|
||||
height: calc(100% - 190px);
|
||||
|
||||
.prj-img-nav {
|
||||
.prj-img-nav-item {
|
||||
line-height: 60px;
|
||||
height: 60px;
|
||||
width: 130px;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.el-carousel {
|
||||
height: 100%;
|
||||
|
||||
|
|
|
|||
|
|
@ -16,15 +16,23 @@ module.exports = defineConfig({
|
|||
proxy: {
|
||||
// https://cn.vitejs.dev/config/#server-proxy
|
||||
"/dev-api": {
|
||||
target: "http://localhost:8080",
|
||||
//target: 'http://62.234.3.186/prod-api/',
|
||||
target: "http://localhost:8080",
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
"^/dev-api": "/",
|
||||
},
|
||||
},
|
||||
"/prod-api": {
|
||||
//target: "http://localhost:8080",
|
||||
target: 'http://62.234.3.186/prod-api/',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
"^/prod-api": "/",
|
||||
},
|
||||
},
|
||||
"/xd/": {
|
||||
target: "http://localhost/xd",
|
||||
//target: "http://localhost/xd",
|
||||
target: 'http://62.234.3.186/xd/',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
"^/xd/": "/",
|
||||
|
|
@ -45,7 +53,8 @@ module.exports = defineConfig({
|
|||
},
|
||||
},
|
||||
"/statics/": {
|
||||
target: `http://localhost:9300/statics/`,
|
||||
//target: `http://localhost:9300/statics/`,
|
||||
target: `http://62.234.3.186/statics/`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
"^/statics/": "/",
|
||||
|
|
|
|||
Loading…
Reference in New Issue