admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

湖里大屏(进度计划):添加倒计时模块以及接口对接

Browse Source
This commit is contained in:
骆乐 2022-08-17 16:54:55 +08:00
parent 0617936964
commit 9eab2b7401
1 changed files with 166 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
src/views/projectAdmin/jlw/planProgress/leftTop.vue
View File

@ -1,8 +1,51 @@
<template>
<!-- 进度总览 -->
<div class="containerBox">
<div class="titleTxt">{{ title }}</div>
<div class="content">
<!-- 进度总览 -->
<div class="containerBox">
<div class="titleTxt">
{{ title }}
<i class="el-icon-s-tools" @click="dialogVisible=true"></i>
</div>
<!-- 配置项目竣工日期 -->
<div class="blockContent">
<p>
<!-- 项目整体倒计时： -->
{{$t('message.dataBoard.projectCountDown')+':'}}
</p>
<div class="days">
<span class="num">{{endDate?leftDays:'--'}}</span>
<span>
<!-- 天 -->
{{$t('message.dataBoard.textList')[0]}}
</span>
</div>
<img src="@/assets/images/daysBG.png" class="daysBG" />
<p class="endDate">
<!-- 竣工时间： -->
{{$t('message.dataBoard.completeTime')+':'}}{{endDate}}
</p>
</div>
<el-dialog
:modal-append-to-body="false"
:title="$t('message.dataBoard.configProjectCompleteDate')"
:visible.sync="dialogVisible"
width="667px"
>
<div style="text-align:center;margin-bottom:30px">
<el-date-picker
size="medium"
v-model="endDate"
type="date"
:placeholder="$t('message.dataBoard.chooseDate')"
value-format="yyyy-MM-dd"
></el-date-picker>
<!-- <br> -->
<el-button type="primary" size="medium" @click="saveDataFn" style="margin-left: 20px">
<!-- 保存 -->
{{$t('message.dataBoard.save')}}
</el-button>
</div>
</el-dialog>
<!-- <div class="content">
<div class="num">
679
<p>完成任务数</p>
@ -38,15 +81,19 @@
{ value: 6, name: '' }
]"/>
</div>
</div>
</div>
</div>-->
</div>
</template>
<script>
import JRingChart from '../jChart/pie/JRingChart.vue'
// import JRingChart from "../jChart/pie/JRingChart.vue";
import {
editProjectExtendApi,
getProjectExtendInfoApi
} from "@/assets/js/api/baseInfo.js";
import {GetDateStr} from "@/assets/js/util"
export default {
components: { JRingChart },
// components: { JRingChart },
props: {
title: {
type: String,
@ -55,12 +102,61 @@ export default {
},
data() {
return {
endDate: "",
leftDays: 0,
dialogVisible: false
};
},
}
mounted() {
this.getDataDateils();
},
methods: {
//获取项目详情
getDataDateils() {
let data = {
projectSn: this.$store.state.projectSn
};
getProjectExtendInfoApi(data).then(res => {
// console.log(res);
this.endDate = res.result.engineeringEndTime;
if (this.endDate) {
this.getDaysBetween();
}
});
},
saveDataFn() {
if (this.endDate == "") {
// 请选择日期！
this.$message.error(
this.$t("message.dataBoard.pleaseChooseDate") + "!"
);
return;
}
editProjectExtendApi({
projectSn: this.$store.state.projectSn,
engineeringEndTime: this.endDate
}).then(res => {
// '保存成功！'
this.$message.success(this.$t("message.dataBoard.saveSuccess") + "!");
this.dialogVisible = false;
this.getDaysBetween();
});
},
getDaysBetween() {
var startDate = Date.parse(GetDateStr(0, "-"));
var endDate = Date.parse(this.endDate);
if (startDate > endDate) {
return 0;
}
if (startDate == endDate) {
return 1;
}
var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
// return days;
this.leftDays = days;
}
}
};
</script>
<style lang="less" scoped>
@ -74,36 +170,67 @@ export default {
color: #6ee4f0;
margin-top: 5px;
margin-left: 5px;
}
.content{
display: flex;
justify-content: center;
align-items: center;
margin-top:20px;
margin-left: 30px;
}
.num{
width: 88px;
line-height: 38px;
height: 38px;
text-align: center;
margin-right: 35px;
color: #47b1c4;
background-image: url(~@/assets/images/projectImg/numBgc.png);
p{
color: #d3d5d9;
font-size: 14px;
.el-icon-s-tools {
margin-left: 380px;
}
}
.charts {
padding: 10px 30px 0;
display: flex;
justify-content: space-around;
.chart {
width: 200px;
height: 200px;
// .content{
// display: flex;
// justify-content: center;
// align-items: center;
// margin-top:20px;
// margin-left: 30px;
// }
// .num{
// width: 88px;
// line-height: 38px;
// height: 38px;
// text-align: center;
// margin-right: 35px;
// color: #47b1c4;
// background-image: url(~@/assets/images/projectImg/numBgc.png);
// p{
// color: #d3d5d9;
// font-size: 14px;
// }
// }
// .charts {
// padding: 10px 30px 0;
// display: flex;
// justify-content: space-around;
// .chart {
// width: 200px;
// height: 200px;
// }
// }
.blockContent {
padding: 20px 40px;
height: calc(100% - 20px - 24px);
position: relative;
z-index: 2;
}
.days {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
.num {
font-size: 46px;
}
}
.daysBG {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.endDate {
position: absolute;
right: 20px;
bottom: 40px;
// font-size: 13px;
}
}
</style>