项目主页和进度管理
This commit is contained in:
quantulr
@ -1,19 +1,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<u-tabs :list="tabList"></u-tabs>
|
<u-tabs :list="tabList" class='tabs' @change="activedIndexChanged"></u-tabs>
|
||||||
|
<view class="sized-box"></view>
|
||||||
|
<ProjectDetailHome v-if="activedIndex==0"></ProjectDetailHome>
|
||||||
|
<ProjectProgress v-else-if="activedIndex==1"> </ProjectProgress>
|
||||||
|
<QualityManage v-else-if="activedIndex==2"> </QualityManage>
|
||||||
|
<view v-else>
|
||||||
|
<text>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit dolor similique molestiae, nostrum
|
||||||
|
ducimus provident aperiam consequuntur adipisci id in impedit rem officiis ipsam alias error! Ipsam
|
||||||
|
facere numquam omnis.</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ProjectDetailHome from './project_detail_home/project_detail_home.vue'
|
import ProjectDetailHome from './project_detail_home/project_detail_home.vue'
|
||||||
|
import ProjectProgress from './project_progress/project_progress.vue'
|
||||||
|
import QualityManage from './quality_manage/quality_manage.vue'
|
||||||
export default {
|
export default {
|
||||||
name: 'ProjectHome',
|
name: 'ProjectHome',
|
||||||
components: {
|
components: {
|
||||||
ProjectDetailHome
|
ProjectDetailHome,
|
||||||
|
ProjectProgress,
|
||||||
|
QualityManage
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
activedIndex: 2,
|
||||||
tabList: [{
|
tabList: [{
|
||||||
name: '主页'
|
name: '主页'
|
||||||
}, {
|
}, {
|
||||||
@ -25,18 +38,31 @@
|
|||||||
{
|
{
|
||||||
name: '安全管理'
|
name: '安全管理'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: '材料管理'
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
activedIndexChanged(item) {
|
||||||
|
this.activedIndex = item.index;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
page {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tabs {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 99;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sized-box {
|
||||||
|
height: 88rpx;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,161 @@
|
|||||||
|
<template>
|
||||||
|
<view style="background-color: white;">
|
||||||
|
<image class="banner" src="@/static/project_detail_home_example.png" mode=""></image>
|
||||||
|
<view class="project-desc">
|
||||||
|
<view class="project-desc-item">
|
||||||
|
<text class="desc-title">
|
||||||
|
项目编号
|
||||||
|
</text>
|
||||||
|
<text class="desc-content">
|
||||||
|
345872935792034976NKJ
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-desc-item">
|
||||||
|
<text class="desc-title">
|
||||||
|
总投资
|
||||||
|
</text>
|
||||||
|
<text class="desc-content">
|
||||||
|
3789（万元）
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-desc-item">
|
||||||
|
<text class="desc-title">
|
||||||
|
总面积
|
||||||
|
</text>
|
||||||
|
<text class="desc-content">
|
||||||
|
1500平方
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-desc-item">
|
||||||
|
<text class="desc-title">
|
||||||
|
建设性质
|
||||||
|
</text>
|
||||||
|
<text class="desc-content">
|
||||||
|
商用土地
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-desc-item">
|
||||||
|
<text class="desc-title">
|
||||||
|
项目分类
|
||||||
|
</text>
|
||||||
|
<text class="desc-content">
|
||||||
|
二类
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-desc-item">
|
||||||
|
<text class="desc-title">
|
||||||
|
设计单位
|
||||||
|
</text>
|
||||||
|
<text class="desc-content">
|
||||||
|
建筑研究院
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-desc-item">
|
||||||
|
<text class="desc-title">
|
||||||
|
设计主要负责人
|
||||||
|
</text>
|
||||||
|
<text class="desc-content">
|
||||||
|
周大福/李林来/王新
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-desc-item">
|
||||||
|
<text class="desc-title">
|
||||||
|
施工单位
|
||||||
|
</text>
|
||||||
|
<text class="desc-content">
|
||||||
|
内蒙航天建工集团
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-desc-item">
|
||||||
|
<text class="desc-title">
|
||||||
|
施工主要负责人
|
||||||
|
</text>
|
||||||
|
<text class="desc-content">
|
||||||
|
董动/赵四/王武
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-desc-item">
|
||||||
|
<text class="desc-title">
|
||||||
|
监理单位
|
||||||
|
</text>
|
||||||
|
<text class="desc-content">
|
||||||
|
建华监理单位
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-desc-item">
|
||||||
|
<text class="desc-title">
|
||||||
|
监理负责人
|
||||||
|
</text>
|
||||||
|
<text class="desc-content">
|
||||||
|
车晓
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-desc-item">
|
||||||
|
<text class="desc-title">
|
||||||
|
立项时间
|
||||||
|
</text>
|
||||||
|
<text class="desc-content">
|
||||||
|
2022.2.19
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-desc-item">
|
||||||
|
<text class="desc-title">
|
||||||
|
项目起止日期
|
||||||
|
</text>
|
||||||
|
<text class="desc-content">
|
||||||
|
2022/3/14-2022/12/30
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-desc-item">
|
||||||
|
<text class="desc-title">
|
||||||
|
项目地址
|
||||||
|
</text>
|
||||||
|
<text class="desc-content">
|
||||||
|
赛罕区长江路9号
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.banner {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-desc {
|
||||||
|
padding: 0 32rpx 0;
|
||||||
|
|
||||||
|
.project-desc-item {
|
||||||
|
height: 160rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 36rpx 0 36rpx;
|
||||||
|
border-bottom: 1rpx solid #f4f4f4;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.desc-title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc-content {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999999;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -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>
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="quality-issues">
|
||||||
|
<view class="quality-issue-item">
|
||||||
|
<image class="banner" src="@/static/quality_manage_example.png"></image>
|
||||||
|
<view class="issue-title"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.quality-issues {
|
||||||
|
padding: 20rpx;
|
||||||
|
|
||||||
|
.quality-issue-item:not(:last-child) {
|
||||||
|
margin-bottom: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quality-issue-item {
|
||||||
|
.banner {
|
||||||
|
width: 100%;
|
||||||
|
height: 454rpx;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
border-radius: 16rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<image src="../../../../static/project_detail_home_example.png" mode=""></image>
|
安全管理
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -9,11 +9,14 @@
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
};
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -34,7 +34,6 @@
|
|||||||
<view class="scroll-y">
|
<view class="scroll-y">
|
||||||
<u-swipe-action class="swiper-item" v-for="item in projectList" :key="item.id">
|
<u-swipe-action class="swiper-item" v-for="item in projectList" :key="item.id">
|
||||||
<u-swipe-action-item :options="options">
|
<u-swipe-action-item :options="options">
|
||||||
<!-- <navigator url='pages/project_supervision/project_detail/project_detail'> -->
|
|
||||||
<view class="project-item" @tap="goDetail">
|
<view class="project-item" @tap="goDetail">
|
||||||
<view class="project-status"
|
<view class="project-status"
|
||||||
:style="`background-image: linear-gradient(219deg, ${statusDict[item.status].color1} 0%, ${statusDict[item.status].color2} 99%)`">
|
:style="`background-image: linear-gradient(219deg, ${statusDict[item.status].color1} 0%, ${statusDict[item.status].color2} 99%)`">
|
||||||
|
|||||||
BIN
static/quality_manage_example.png
Normal file
BIN
static/quality_manage_example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 415 KiB |
2603
unpackage/dist/dev/app-plus/app-service.js
vendored
2603
unpackage/dist/dev/app-plus/app-service.js
vendored
File diff suppressed because one or more lines are too long
2459
unpackage/dist/dev/app-plus/app-view.js
vendored
2459
unpackage/dist/dev/app-plus/app-view.js
vendored
File diff suppressed because one or more lines are too long
BIN
unpackage/dist/dev/app-plus/static/quality_manage_example.png
vendored
Normal file
BIN
unpackage/dist/dev/app-plus/static/quality_manage_example.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 415 KiB |
Reference in New Issue
Block a user