407 lines
11 KiB
Vue
407 lines
11 KiB
Vue
<template>
|
||
<Card title="实际进度">
|
||
<!-- <div class="topDiv">
|
||
<div class="buildindDiv">
|
||
楼层
|
||
<el-select placeholder="请选择" @change="checkBuild" v-model="floorId">
|
||
<el-option
|
||
v-for="(item, index) in buildList"
|
||
:key="index"
|
||
:value="item.id"
|
||
:label="item.name"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="buildindDiv">
|
||
专业
|
||
<el-select placeholder="请选择" @change="checkMajor" v-model="major">
|
||
<el-option
|
||
v-for="(item, index) in MajorList"
|
||
:key="index"
|
||
:value="item"
|
||
:label="item"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div> -->
|
||
<div class="list" style="position: relative; height: 130%">
|
||
<vue-scroll v-if="todoList.length">
|
||
<div class="list-item" v-for="(item, index) in actualList" :key="index">
|
||
<!-- <div class="delay orange">
|
||
<span
|
||
class="delayDiv"
|
||
:class="[
|
||
item.dataTypeName === '已完成'
|
||
? 'Color2'
|
||
: item.dataTypeName === '已逾期'
|
||
? 'Color1'
|
||
: item.dataTypeName === '进行中'
|
||
? 'Color3'
|
||
: item.dataTypeName === '未开始'
|
||
? 'Color5'
|
||
: 'Color4',
|
||
]"
|
||
>{{ item.dataTypeName }} {{ Number(item.day) }} 天</span
|
||
>
|
||
|
||
</div> -->
|
||
|
||
<!-- <div class="endTime">
|
||
<div class="todo" style="margin-left:20px;padding-top: 30px;">地下室结构施工
|
||
</div>
|
||
|
||
</div> -->
|
||
<div class="endTime">
|
||
<div class="todo" style="padding: 20px 0 0 20px">
|
||
{{ item.taskName }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <el-progress :percentage="item.progressRatio"></el-progress> -->
|
||
<div class="startTime">
|
||
<img
|
||
style="width: 16px; height: 16px"
|
||
src="~@/assets/images/zjsj/dateIcon.png"
|
||
alt=""
|
||
/>
|
||
<span class="grey">计划开始时间：</span
|
||
><span class="blue">{{ item.startDate }}</span>
|
||
</div>
|
||
<div class="endTime">
|
||
<img
|
||
style="width: 16px; height: 16px"
|
||
src="~@/assets/images/zjsj/dateIcon.png"
|
||
alt=""
|
||
/>
|
||
<span class="grey">计划结束时间：</span
|
||
><span class="blue">{{ item.finishDate }}</span>
|
||
</div>
|
||
<div class="endTime">
|
||
<img
|
||
style="width: 16px; height: 16px"
|
||
src="~@/assets/images/zjsj/dateIcon.png"
|
||
alt=""
|
||
/>
|
||
<span class="grey">实际开始时间：</span
|
||
><span class="blue">{{ item.actualStartDate }}</span>
|
||
</div>
|
||
<div class="endTime">
|
||
<span class="grey">状态：</span>
|
||
<span style="color: orange" v-if="item.status == 1">{{
|
||
item.status == 1 ? "提前" : item.status == 2 ? "正常" : "延迟"
|
||
}}</span>
|
||
<span style="color: green" v-if="item.status == 2">{{
|
||
item.status == 1 ? "提前" : item.status == 2 ? "正常" : "延迟"
|
||
}}</span>
|
||
<span style="color: red" v-if="item.status == 3">{{
|
||
item.status == 1 ? "提前" : item.status == 2 ? "正常" : "延迟"
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
<div
|
||
v-else
|
||
class="empty"
|
||
style="
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
"
|
||
>
|
||
<img src="@/assets/images/noData3.png" />
|
||
<div style="text-align: center; color: #5b626b; font-size: 14px">
|
||
暂无数据
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getLastSevenDaysApi,
|
||
getProjectFloorApi, //楼层列表
|
||
getMajorListByFloorIdApi, //专业列表
|
||
getactualProgressApi,
|
||
getProgressTApi,
|
||
} from "@/assets/js/api/zhongjianFourth";
|
||
import { mapState } from "vuex";
|
||
|
||
import Card from "../components/Card.vue";
|
||
export default {
|
||
components: { Card },
|
||
data() {
|
||
return {
|
||
// 激活的tab
|
||
activeTab: 0,
|
||
todoList: [],
|
||
buildList: [],
|
||
floorId: "",
|
||
MajorList: [],
|
||
major: "",
|
||
actualList: [],
|
||
};
|
||
},
|
||
created() {
|
||
this.getList();
|
||
this.getData();
|
||
},
|
||
computed: {
|
||
...mapState(["projectSn"]),
|
||
},
|
||
methods: {
|
||
getData() {
|
||
//查询实际进度
|
||
getProgressTApi({ projectSn: this.$store.state.projectSn }).then(
|
||
(res) => {
|
||
console.log("实际进度数据", res);
|
||
this.actualList = res.result;
|
||
}
|
||
);
|
||
},
|
||
//------------分割线
|
||
checkBuild(val) {
|
||
console.log("楼层改动值 ： ", val);
|
||
this.floorId = val;
|
||
this.getMajorList();
|
||
},
|
||
checkMajor(val) {
|
||
console.log("专业改动值 ： ", val);
|
||
this.major = val;
|
||
this.getLastSevenDaysData();
|
||
},
|
||
//查询楼层列表
|
||
getList() {
|
||
getProjectFloorApi({ projectSn: this.$store.state.projectSn }).then(
|
||
(res) => {
|
||
console.log("楼层数据", res);
|
||
this.buildList = res.result;
|
||
if (res.result.length >= 1) {
|
||
this.floorId = res.result[0].id;
|
||
this.getMajorList();
|
||
}
|
||
}
|
||
);
|
||
},
|
||
//查询专业
|
||
getMajorList() {
|
||
getMajorListByFloorIdApi({
|
||
floorId: this.floorId,
|
||
}).then((res) => {
|
||
console.log("专业", res.result);
|
||
this.MajorList = res.result;
|
||
if (res.result.length >= 1) {
|
||
this.major = res.result[0];
|
||
this.getLastSevenDaysData();
|
||
}
|
||
});
|
||
},
|
||
// 进度任务列表
|
||
getLastSevenDaysData() {
|
||
getactualProgressApi({
|
||
floorId: this.floorId,
|
||
major: this.major,
|
||
}).then((res) => {
|
||
this.todoList = res.result;
|
||
// day 已延期：状态为未开始；已逾期：状态为进行中;为空时表示正常
|
||
|
||
// status 状态，0未开始 ,1进行中，2已完成 默认未开始
|
||
this.todoList.forEach((res) => {
|
||
if (res.status == 0 && res.day != null) {
|
||
res.dataTypeName = "已延期";
|
||
} else if (res.status == 1 && res.day != null) {
|
||
res.dataTypeName = "已逾期";
|
||
} else if (res.status == 0) {
|
||
res.dataTypeName = "未开始";
|
||
} else if (res.status == 1) {
|
||
res.dataTypeName = "进行中";
|
||
} else if (res.status == 2) {
|
||
res.dataTypeName = "已完成";
|
||
}
|
||
});
|
||
console.log("进度任务列表数据", this.todoList);
|
||
});
|
||
},
|
||
compareTime(gettime) {
|
||
var today = new Date(); //获取当前时间
|
||
gettime = gettime.replace(/-/g, "/");
|
||
var endTime = new Date(gettime); //自己的时间
|
||
console.log(
|
||
"today",
|
||
today + ":endTime -",
|
||
endTime + "--today.getTime() :",
|
||
today.getTime() + ": endTime.getTime() -- ",
|
||
endTime.getTime()
|
||
);
|
||
if (today.getTime() > endTime.getTime()) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
},
|
||
// 计算时间差
|
||
dateDiff(date1, date2) {
|
||
let date1Str = date1.split("-"); //将日期字符串分隔为数组,数组元素分别为年.月.日
|
||
//根据年 . 月 . 日的值创建Date对象
|
||
let date1Obj = new Date(date1Str[0], date1Str[1] - 1, date1Str[2]);
|
||
let date2Str = date2.split("-");
|
||
let date2Obj = new Date(date2Str[0], date2Str[1] - 1, date2Str[2]);
|
||
let date3Obj = new Date();
|
||
console.log(
|
||
"date1Obj",
|
||
date1Obj + ":date2Str -",
|
||
date2Str + "--date3Obj :",
|
||
date3Obj
|
||
);
|
||
|
||
let t1 = date1Obj.getTime(); //开始时间
|
||
let t2 = date2Obj.getTime(); //结束时间
|
||
let t3 = date3Obj.getTime(); //
|
||
let dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数
|
||
let minusDays = Math.floor((t2 - t1) / dateTime); //计算出两个日期的天数差
|
||
let halfyear = Math.floor((t3 - t1) / dateTime); //计算出两个日期的天数差
|
||
let days = Math.abs(minusDays); //取绝对值
|
||
let halfyeardays = Math.abs(halfyear); //取绝对值
|
||
this.diff = days + 1;
|
||
return days + 1;
|
||
},
|
||
format(percentage) {
|
||
return percentage === 100 ? "满" : `${percentage}%`;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.tabs {
|
||
display: flex;
|
||
color: #fff;
|
||
.tab {
|
||
width: 100px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
&.checked {
|
||
color: #2de1fa;
|
||
}
|
||
}
|
||
}
|
||
.topDiv {
|
||
display: flex;
|
||
.buildindDiv {
|
||
width: 220px;
|
||
height: 50px;
|
||
.el-select {
|
||
// background: transparent;
|
||
width: 120px;
|
||
margin: 20px 15px 0 0;
|
||
// background: url("~@/assets/images/zjsj/frameBG.png") no-repeat;
|
||
// background-size: 100% 100%;
|
||
background: transparent;
|
||
}
|
||
}
|
||
::v-deep .el-input--suffix .el-input__inner {
|
||
background: transparent !important;
|
||
color: #fff !important;
|
||
border: 1px solid #66d3d8 !important ;
|
||
z-index: 999;
|
||
}
|
||
::v-deep .el-select-dropdown__item {
|
||
width: 100px !important;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
padding-top: 20px;
|
||
// padding-left: 25px;
|
||
height: calc(100% - 17px);
|
||
color: #fff;
|
||
.list-item {
|
||
width: 400px;
|
||
height: 220px;
|
||
background: url("~@/assets/images/zjsj/frameBG.png") no-repeat;
|
||
background-size: 88% 100%;
|
||
font-size: 16px;
|
||
.todo {
|
||
width: 330px;
|
||
font-size: 24px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
&:not(:last-child) {
|
||
margin-bottom: 20px;
|
||
}
|
||
&:not(:first-child) {
|
||
// margin-top: 50px;
|
||
}
|
||
div {
|
||
&:not(:first-child) {
|
||
margin-top: 15px;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
.delayDiv {
|
||
width: 120px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
background: url("~@/assets/images/zjsj/framBG2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 14px;
|
||
margin-left: 20px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
::v-deep .el-progress-bar {
|
||
width: 85%;
|
||
}
|
||
::v-deep .el-progress__text {
|
||
color: #fff;
|
||
}
|
||
::v-deep .el-progress-bar__inner {
|
||
background-color: #5ce2f6;
|
||
}
|
||
.grey {
|
||
color: #ccc;
|
||
margin-left: 10px;
|
||
font-weight: normal;
|
||
}
|
||
.blue {
|
||
color: #66d4d9;
|
||
}
|
||
.orange {
|
||
color: #f56c35;
|
||
}
|
||
|
||
.Color1 {
|
||
color: red;
|
||
display: inline-block;
|
||
margin-top: 20px;
|
||
}
|
||
.Color2 {
|
||
color: green;
|
||
display: inline-block;
|
||
margin-top: 20px;
|
||
}
|
||
.Color3 {
|
||
color: yellow;
|
||
display: inline-block;
|
||
margin-top: 20px;
|
||
}
|
||
.Color4 {
|
||
color: red;
|
||
display: inline-block;
|
||
margin-top: 20px;
|
||
}
|
||
.Color5 {
|
||
color: gray;
|
||
display: inline-block;
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|