cxc/construction_site_supervision
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

项目主页和进度管理

Browse Source
This commit is contained in:
quantulr
2022-09-14 01:00:58 +08:00
parent 3ffbc93e9b
commit f272e21b7c
10 changed files with 4165 additions and 1344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
pages/project_supervision/project_detail/project_progress/project_progress.vue Normal file
View File

@ -0,0 +1,186 @@
<template>
<view>
<view class="project-progress">
<div class="project-pregress-item" v-for="(item,index) in progessList" :key="index">
<view class="pregress-status"
:style="`background-image: linear-gradient(219deg, ${statusDict[item.status].color1} 0%, ${statusDict[item.status].color2} 99%)`">
<text>{{statusDict[item.status].name}}</text>
</view>
<text class="progress-title">
{{item.name}}
</text>
<view class="progress-desc">
<view class="progress-desc-item">
<view class="desc-title">
<text>开竣日期</text>
</view>
<text class="desc-content">{{item.startDate}}~{{item.endTime}}</text>
</view>
<view class="progress-desc-item">
<view class="desc-title">
<text>完成情况</text>
</view>
<u-line-progress :percentage="item.completionRatio" height="8"></u-line-progress>
</view>
<view class="progress-desc-item">
<view class="desc-title">
<text>发生工期</text>
</view>
<u-line-progress :percentage="item.durationRatio" height="8"></u-line-progress>
</view>
<view class="progress-desc-item">
<view class="desc-title">
<text>编制人</text>
</view>
<text class="desc-content">{{item.editor}}</text>
</view>
<view class="progress-desc-item" style="align-items: flex-start;">
<view class="desc-title">
<text>任务内容</text>
</view>
<view style="width: 540rpx;">
<text class="desc-content">{{item.taskContent}}</text>
</view>
</view>
<view class="progress-desc-item">
<view class="desc-title">
<text>进度负责</text>
</view>
<text class="desc-content">{{item.progressManager}}</text>
</view>
</view>
</div>
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusDict: {
0: {
name: '滞后',
color1: '#FFA000',
color2: '#FEC35D'
},
1: {
name: '正常',
color1: '#39DAAA ',
color2: '#02C489'
},
2: {
name: '严重滞后',
color1: '#FE3E33',
color2: '#FE7E66'
}
},
progessList: [{
name: '一层电工临电布置',
status: 1,
startDate: '2022-01-12',
endTime: '2022-01-13',
completionRatio: 56,
durationRatio: 46,
editor: '李山上',
taskContent: '采购电缆已就位，工人拆装进行整体铺设购电缆已就位，工人拆装进行整体铺设',
progressManager: '李华'
}, {
name: '一层电工临电布置',
status: 0,
startDate: '2022-01-12',
endTime: '2022-01-13',
completionRatio: 56,
durationRatio: 46,
editor: '李山上',
taskContent: '采购电缆已就位，工人拆装进行整体铺设购电缆已就位，工人拆装进行整体铺设',
progressManager: '李华'
}, {
name: '一层电工临电布置',
status: 2,
startDate: '2022-01-12',
endTime: '2022-01-13',
completionRatio: 56,
durationRatio: 46,
editor: '李山上',
taskContent: '采购电缆已就位，工人拆装进行整体铺设购电缆已就位，工人拆装进行整体铺设',
progressManager: '李华'
}, ]
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.project-progress {
padding: 20rpx;
.project-pregress-item:not(:last-child) {
margin-bottom: 36rpx;
}
.project-pregress-item {
position: relative;
background: #FFFFFF;
border-radius: 8rpx;
padding: 28rpx 20rpx 20rpx;
.pregress-status {
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 120rpx;
height: 48rpx;
background-image: linear-gradient(219deg, #FD934E 0%, #FF7442 99%);
border-radius: 0 8rpx 0 32rpx;
text {
font-size: 14rpx;
color: #fff;
}
}
.progress-title {
// display: block;
// width: 120rpx;
font-size: 32rpx;
color: #232930;
line-height: 48px;
font-weight: 400;
}
.progress-desc {
.progress-desc-item {
display: flex;
align-items: center;
.desc-title {
width: 125rpx;
text {
font-size: 28rpx;
color: #8F959E;
line-height: 44rpx;
font-weight: 400;
margin-right: 10rpx;
}
}
.desc-content {
font-size: 28rpx;
color: #333333;
line-height: 44rpx;
font-weight: 400;
}
}
}
}
}
</style>