|
|
@@ -0,0 +1,217 @@
|
|
|
+<template>
|
|
|
+ <view class="d-flex">
|
|
|
+ <view class="flex-s tag" :style="projectInfo[1]" >{{ projectInfo[0] }}</view>
|
|
|
+ <u-time-line-item nodeTop="2" class="u-margin-left-62 u-margin-bottom-0">
|
|
|
+ <!-- 此处自定义了左边内容，用一个图标替代 -->
|
|
|
+ <template v-slot:node>
|
|
|
+ <!-- 此处为uView的icon组件 -->
|
|
|
+ <u-icon class="icon-bgcolor" :name="projectInfo[3]" :size="42" :color="projectInfo[2]"></u-icon>
|
|
|
+ </template>
|
|
|
+ <template v-slot:content>
|
|
|
+ <view class="card-style">
|
|
|
+ <view class="d-flex j-sb">
|
|
|
+ <view class="word-one">立项审批</view>
|
|
|
+ <view class="word-two">
|
|
|
+ <text>2019.6.7</text>
|
|
|
+ -
|
|
|
+ <text>2019.6.9</text>
|
|
|
+ </view>
|
|
|
+ <view class="word-four">额定天数: 4天</view>
|
|
|
+ </view>
|
|
|
+ <view class="d-flex j-sb">
|
|
|
+ <view class="word-three">部门:营销部</view>
|
|
|
+ <view class="word-four">实际天数: 4天</view>
|
|
|
+ </view>
|
|
|
+ <view class="d-flex a-center j-sb">
|
|
|
+ <view class="word-seven">位置: 1.11111 2.1111</view>
|
|
|
+ <view style="margin-right:30rpx">
|
|
|
+ <view class="word-six" @click="jump_project_info_point_order"><text>批示</text></view>
|
|
|
+ <view class="word-six" style="margin-top:10rpx" @click="jump_project_accessory"><text>查看附件</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="word-five">现场图片:</text>
|
|
|
+ <view class="d-flex u-m-b-5">
|
|
|
+ <u-image class="u-m-r-15" width="121rpx" height="92rpx" src="/static/images/example.png" :fade="false"></u-image>
|
|
|
+ <!-- <u-image class="u-m-r-15" width="92rpx" height="92rpx" src="/static/images/upload_img.png" :fade="false"></u-image> -->
|
|
|
+ <!-- <u-image class="u-m-r-15" width="92rpx" height="92rpx" src="/static/images/upload_fj.png" :fade="false"></u-image> -->
|
|
|
+ </view>
|
|
|
+ <view class="word-three">备注:1231231231</view>
|
|
|
+ </view>
|
|
|
+ <u-line v-if="projectIndex !== 9" style="margin-left: -15rpx;" length="560rpx" color="black" margin="10.5rpx" border-style="dashed"/>
|
|
|
+ </template>
|
|
|
+ </u-time-line-item>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ // 是否逾期 决定左侧文字背景颜色 图标颜色 进程颜色 实际天数颜色 逾期原因的展示
|
|
|
+ // 1 如期完成 2 预期完成 3项目终止
|
|
|
+ projectStatus: {
|
|
|
+ type: [ Number, String ],
|
|
|
+ default: 1
|
|
|
+ },
|
|
|
+ // 项目进度
|
|
|
+ projectIndex: {
|
|
|
+ type: [ Number, String ],
|
|
|
+ default: 1
|
|
|
+ },
|
|
|
+ // 项目数据
|
|
|
+ // projectData: {
|
|
|
+ // type: Object,
|
|
|
+ // default: () => {
|
|
|
+ // return {}
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ value: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ projectInfo() {
|
|
|
+ if ( parseInt(this.projectStatus) === 0 ) {
|
|
|
+ return ['进行中', {'background-color': '#E7AE5E'}, '#E7AE5E','clock-fill']
|
|
|
+ } else if ( parseInt(this.projectStatus) === 1 ) {
|
|
|
+ return ['逾期完成', {'background-color': '#4CB1FF'}, '#4CB1FF','checkmark-circle-fill']
|
|
|
+ } else if ( parseInt(this.projectStatus) === 2 ) {
|
|
|
+ return ['逾期完成', {'background-color': '#F17E38'}, '#F17E38','checkmark-circle-fill']
|
|
|
+ } else {
|
|
|
+ return ['项目终止', {'background-color': '#FF0014'}, '#FF0014','close-circle-fill']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ projectPlan() {
|
|
|
+ switch(parseInt(this.projectIndex)) {
|
|
|
+ case 1:
|
|
|
+ return '立项审批'
|
|
|
+ case 2:
|
|
|
+ return '设计委托'
|
|
|
+ case 3:
|
|
|
+ return '初设评审'
|
|
|
+ case 4:
|
|
|
+ return '占地进度'
|
|
|
+ case 5:
|
|
|
+ return '现场施工'
|
|
|
+ case 6:
|
|
|
+ return '竣工验收'
|
|
|
+ case 7:
|
|
|
+ return '物资管理'
|
|
|
+ case 8:
|
|
|
+ return '工程结算'
|
|
|
+ case 9:
|
|
|
+ return '资料归档'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 跳到节点批示页
|
|
|
+ jump_project_info_point_order() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/index/projectInfoPointOrder'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 跳到附件页
|
|
|
+ jump_project_accessory() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/index/accessory'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .tag {
|
|
|
+ width: 110rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 36rpx;
|
|
|
+ font-size: 21rpx;
|
|
|
+ font-family: SimSun;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-top:5rpx;
|
|
|
+ }
|
|
|
+ .icon-bgcolor {
|
|
|
+ background-color: #F7FBFF;
|
|
|
+ }
|
|
|
+ .card-style{
|
|
|
+ width: 560rpx;
|
|
|
+ // height: 130rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0rpx 2rpx 13rpx rgba(0, 0, 0, 0.16);
|
|
|
+ border-radius: 17rpx;
|
|
|
+ margin-left: -15rpx;
|
|
|
+ padding: 12rpx 20rpx 10rpx;
|
|
|
+ .word-one {
|
|
|
+ width: 117rpx;
|
|
|
+ height: 29rpx;
|
|
|
+ font-size: 29rpx;
|
|
|
+ font-family: SimSun;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .word-two {
|
|
|
+ width: 213rpx;
|
|
|
+ height: 25rpx;
|
|
|
+ font-size: 25rpx;
|
|
|
+ font-family: SimSun;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 33rpx;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .word-three {
|
|
|
+ // width: 75rpx;
|
|
|
+ // height: 25rpx;
|
|
|
+ font-size: 25rpx;
|
|
|
+ font-family: SimSun;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 33rpx;
|
|
|
+ color: #000000;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ .word-four {
|
|
|
+ width: 163rpx;
|
|
|
+ height: 25rpx;
|
|
|
+ font-size: 25rpx;
|
|
|
+ font-family: SimSun;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 33rpx;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .word-five {
|
|
|
+ width: 125rpx;
|
|
|
+ height: 25rpx;
|
|
|
+ font-size: 25rpx;
|
|
|
+ font-family: SimSun;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 33rpx;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .word-six {
|
|
|
+ width: 106rpx;
|
|
|
+ height: 33rpx;
|
|
|
+ background: #4CB2FF;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 21rpx;
|
|
|
+ font-family: SimSun;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 33rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 17rpx;
|
|
|
+ }
|
|
|
+ .word-seven {
|
|
|
+ // width: 75rpx;
|
|
|
+ height: 25rpx;
|
|
|
+ font-size: 25rpx;
|
|
|
+ font-family: SimSun;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 33rpx;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
zhaozhipeng
