进度汇报--工单列表

pages/produce/execute/components/orderlist.vue

@@ -15,42 +15,46 @@
             <Button class="fr">时间正序排列</Button>
         </div>
         <div class="card_box">
-            <Card class="card_order">
-                <p slot="title">CJ_181212_002_001 <span class="fr">执行中</span></p>
-                <p>发动机</p>
-                <p><Icon type="ios-pricetags" />工序1：领料</p>
-                <p>2018-12-12 ~ 2018-12-30</p>
+            <Card class="card_order" v-for="(item,index) in listTask"
+                @click.native="goPage(item)" :key="index"
+                :class="item.status=='未开工'? 'card_border1' : (item.status=='执行中' ? 'card_border2': (item.status=='暂停中' ?'card_border3':
+                (item.status=='交检中'?'card_border4':(item.status=='交接中'?'card_border5':''))))"
+                >
+                <p slot="title">{{item.title}} <span class="fr" >{{item.status}}</span></p>
+                <p class="order_tit">{{item.shebei}}</p>
+                <p><Icon type="ios-pricetags" />{{item.gongxu}}</p>
+                <p>{{item.time}}</p>
             </Card>
-            <Card class="card_order">
+            <!-- <Card class="card_order">
                 <p slot="title">CJ_181212_002_001 <span class="fr">未开工</span></p>
-                <p>发动机</p>
+                <p class="order_tit">发动机</p>
                 <p><Icon type="ios-pricetags" />工序1：领料</p>
                 <p>2018-12-12 ~ 2018-12-30</p>
             </Card>
             <Card class="card_order">
                 <p slot="title">CJ_181212_002_001 <span class="fr">执行中</span></p>
-                <p>发动机</p>
+                <p class="order_tit">发动机</p>
                 <p><Icon type="ios-pricetags" />工序1：领料</p>
                 <p>2018-12-12 ~ 2018-12-30</p>
             </Card>
             <Card class="card_order">
                 <p slot="title">CJ_181212_002_001 <span class="fr">暂停中</span></p>
-                <p>发动机</p>
+                <p class="order_tit">发动机</p>
                 <p><Icon type="ios-pricetags" />工序1：领料</p>
                 <p>2018-12-12 ~ 2018-12-30</p>
             </Card>
             <Card class="card_order">
                 <p slot="title">CJ_181212_002_001 <span class="fr">交检中</span></p>
-                <p>发动机</p>
+                <p class="order_tit">发动机</p>
                 <p><Icon type="ios-pricetags" />工序1：领料</p>
                 <p>2018-12-12 ~ 2018-12-30</p>
             </Card>
             <Card class="card_order">
                 <p slot="title">CJ_181212_002_001 <span class="fr">已完成</span></p>
-                <p>发动机</p>
+                <p class="order_tit">发动机</p>
                 <p><Icon type="ios-pricetags" />工序1：领料</p>
                 <p>2018-12-12 ~ 2018-12-30</p>
-            </Card>
+            </Card> -->
         </div>
     </div>
 </template>
@@ -85,11 +89,59 @@ export default {
                     label: '已完成'
                 },
             ],
+            listTask:[
+                {
+                    title: 'CJ_181212_002_001',
+                    status: '已完成',
+                    shebei: '发动机',
+                    gongxu: '工序1：领料',
+                    time: '2018-12-12 ~ 2018-12-30',
+                },{
+                    title: 'CJ_181212_002_002',
+                    status: '未开工',
+                    shebei: '发动机',
+                    gongxu: '工序1：领料',
+                    time: '2018-12-12 ~ 2018-12-30',
+                },{
+                    title: 'CJ_181212_002_003',
+                    status: '执行中',
+                    shebei: '发动机',
+                    gongxu: '工序1：领料',
+                    time: '2018-12-12 ~ 2018-12-30',
+                },{
+                    title: 'CJ_181212_002_004',
+                    status: '暂停中',
+                    shebei: '发动机',
+                    gongxu: '工序1：领料',
+                    time: '2018-12-12 ~ 2018-12-30',
+                },{
+                    title: 'CJ_181212_002_005',
+                    status: '交检中',
+                    shebei: '发动机',
+                    gongxu: '工序1：领料',
+                    time: '2018-12-12 ~ 2018-12-30',
+                },{
+                    title: 'CJ_181212_002_006',
+                    status: '交接中',
+                    shebei: '发动机',
+                    gongxu: '工序1：领料',
+                    time: '2018-12-12 ~ 2018-12-30',
+                },{
+                    title: 'CJ_181212_002_007',
+                    status: '已完成',
+                    shebei: '发动机',
+                    gongxu: '工序1：领料',
+                    time: '2018-12-12 ~ 2018-12-30',
+                },
+            ],
         }        
     },
     methods: {
         gnFunto(number,type){
             this.gnFlag = number
+        },
+        goPage(item){
+            console.log(item)
         }
     },
 }

pages/produce/execute/execute.less

@@ -98,6 +98,25 @@
                             padding: 0 15px;
                             .card_order{
                                 margin: 15px 0;
+                                border-left: 4px solid #ccc;
+                                .order_tit{
+                                    color: #2680EB;
+                                }
+                            }
+                            .card_border1{
+                                border-left: 4px solid #707070;
+                            }
+                            .card_border2{
+                                border-left: 4px solid #0DD78D;
+                            }
+                            .card_border3{
+                                border-left: 4px solid #FE7777;
+                            }
+                            .card_border4{
+                                border-left: 4px solid #FFA000;
+                            }
+                            .card_border5{
+                                border-left: 4px solid #720193;
                             }
                         }
                     }