LD 5 лет назад
Родитель
Сommit
692ff947bc
1 измененных файлов с 231 добавлено и 108 удалено
  1. 231 108
      resources/views/station/monitor/show.blade.php

+ 231 - 108
resources/views/station/monitor/show.blade.php

@@ -41,7 +41,7 @@
                             <div class="col py-3 h4">
                                 料箱号:
                                 <div v-if="task&&processingTaskMaterialBox">
-                                        @{{processingTaskMaterialBox.material_box.code}}
+                                    @{{processingTaskMaterialBox.material_box.code}}
                                 </div>
                             </div>
                         </div>
@@ -52,37 +52,102 @@
                                           style="fill:#ffffff;stroke-width:3;stroke:rgb(11,51,71)"/>
                                     <polygon points="0,80 50,0 250,0 300,80"
                                              style="fill:#ffffff;stroke:rgb(11,51,71);stroke-width:3;" />
-                                    <polygon class="spot single" points="0,80 50,0 250,0 300,80"
+                                    <polygon v-if="grids.single.status"
+                                             class="spot single" points="0,80 50,0 250,0 300,80"
+                                             :class="[
+                                                grids.single.status==='启用'?'normal':'',
+                                                grids.single.status==='处理中'?'box-spot-color n1':'',
+                                             ]"
                                              style="stroke:rgb(11,51,71);stroke-width:3;" />
 
 
-                                    <polygon class="spot half-left" points="0,80 50,0 150,0 150,80"
+                                    <polygon v-if="grids.half.left.status"
+                                             class="spot half-left" points="0,80 50,0 150,0 150,80"
+                                             :class="[
+                                                grids.half.left.status==='启用'?'normal':'',
+                                                grids.half.left.status==='处理中'?'box-spot-color n1':'',
+                                             ]"
                                              style="stroke:rgb(11,51,71);stroke-width:3;" />
-                                    <polygon class="spot half-right" points="150,0 150,80 300,80 250,0"
+                                    <polygon v-if="grids.half.right.status"
+                                             class="spot half-right" points="150,0 150,80 300,80 250,0"
+                                             :class="[
+                                                grids.half.right.status==='启用'?'normal':'',
+                                                grids.half.right.status==='处理中'?'box-spot-color n2':'',
+                                             ]"
                                              style="stroke:rgb(11,51,71);stroke-width:3;" />
 
-                                    <polygon class="spot quarter-left-bottom" points="0,80 29.17,33.33 150,33.33 150,80"
+                                    <polygon v-if="grids.quarter.left.top.status"
+                                             :class="[
+                                                grids.quarter.left.top.status==='启用'?'normal':'',
+                                                grids.quarter.left.top.status==='处理中'?'box-spot-color n1':'',
+                                             ]"
+                                             class="spot quarter-left-top" points="29.17,33.33 50,0 150,0 150,33.33"
                                              style="stroke:rgb(11,51,71);stroke-width:3;" />
-                                    <polygon class="spot quarter-right-bottom" points="150,33.33 150,80 300,80 270.83,33.33"
+                                    <polygon v-if="grids.quarter.left.bottom.status"
+                                             :class="[
+                                                grids.quarter.left.bottom.status==='启用'?'normal':'',
+                                                grids.quarter.left.bottom.status==='处理中'?'box-spot-color n2':'',
+                                             ]"
+                                             class="spot quarter-left-bottom" points="0,80 29.17,33.33 150,33.33 150,80"
                                              style="stroke:rgb(11,51,71);stroke-width:3;" />
 
-                                    <polygon class="spot quarter-left-top" points="29.17,33.33 50,0 150,0 150,33.33"
+                                    <polygon v-if="grids.quarter.right.top.status"
+                                             :class="[
+                                                grids.quarter.right.top.status==='启用'?'normal':'',
+                                                grids.quarter.right.top.status==='处理中'?'box-spot-color n3':'',
+                                             ]"
+                                             class="spot quarter-right-top" points="150,33.33 150,0 250,0 270.83,33.33"
                                              style="stroke:rgb(11,51,71);stroke-width:3;" />
-                                    <polygon class="spot quarter-right-top" points="150,33.33 150,0 250,0 270.83,33.33"
+                                    <polygon v-if="grids.quarter.right.bottom.status"
+                                             :class="[
+                                                grids.quarter.right.bottom.status==='启用'?'normal':'',
+                                                grids.quarter.right.bottom.status==='处理中'?'box-spot-color n4':'',
+                                             ]"
+                                             class="spot quarter-right-bottom" points="150,33.33 150,80 300,80 270.83,33.33"
                                              style="stroke:rgb(11,51,71);stroke-width:3;" />
 
-                                    <polygon class="spot sixth-left-bottom" points="0,80 29.17,33.33 110.39,33.33 100,80"
+                                    <polygon v-if="grids.sixth.left.top.status"
+                                             :class="[
+                                                grids.sixth.left.top.status==='启用'?'normal':'',
+                                                grids.sixth.left.top.status==='处理中'?'box-spot-color n1':'',
+                                             ]"
+                                             class="spot sixth-left-top" points="29.17,33.33 50,0 117,0 110.39,33.33"
                                              style="stroke:rgb(11,51,71);stroke-width:3;" />
-                                    <polygon class="spot sixth-mid-bottom" points="110.39,33.33 100,80 200,80 191.61,33.33"
-                                             style="stroke:rgb(11,51,71);stroke-width:3;" />
-                                    <polygon class="spot sixth-right-bottom" points="200,80 191.61,33.33 270.83,33.33 300,80"
+                                    <polygon v-if="grids.sixth.left.bottom.status"
+                                             :class="[
+                                                grids.sixth.left.bottom.status==='启用'?'normal':'',
+                                                grids.sixth.left.bottom.status==='处理中'?'box-spot-color n2':'',
+                                             ]"
+                                             class="spot sixth-left-bottom" points="0,80 29.17,33.33 110.39,33.33 100,80"
                                              style="stroke:rgb(11,51,71);stroke-width:3;" />
 
-                                    <polygon class="spot sixth-left-top" points="29.17,33.33 50,0 117,0 110.39,33.33"
+                                    <polygon v-if="grids.sixth.mid.top.status"
+                                             :class="[
+                                                grids.sixth.mid.top.status==='启用'?'normal':'',
+                                                grids.sixth.mid.top.status==='处理中'?'box-spot-color n3':'',
+                                             ]"
+                                             class="spot sixth-mid-top" points="117,0 110.39,33.33 191.61,33.33 185.5,0"
+                                             style="stroke:rgb(11,51,71);stroke-width:3;" />
+                                    <polygon v-if="grids.sixth.mid.bottom.status"
+                                             :class="[
+                                                grids.sixth.mid.bottom.status==='启用'?'normal':'',
+                                                grids.sixth.mid.bottom.status==='处理中'?'box-spot-color n4':'',
+                                             ]"
+                                             class="spot sixth-mid-bottom" points="110.39,33.33 100,80 200,80 191.61,33.33"
                                              style="stroke:rgb(11,51,71);stroke-width:3;" />
-                                    <polygon class="spot sixth-mid-top" points="117,0 110.39,33.33 191.61,33.33 185.5,0"
+                                    <polygon v-if="grids.sixth.right.top.status"
+                                             :class="[
+                                                grids.sixth.right.top.status==='启用'?'normal':'',
+                                                grids.sixth.right.top.status==='处理中'?'box-spot-color n5':'',
+                                             ]"
+                                             class="spot sixth-right-top" points="191.61,33.33 185.5,0 250,0 270.83,33.33"
                                              style="stroke:rgb(11,51,71);stroke-width:3;" />
-                                    <polygon class="spot sixth-right-top" points="191.61,33.33 185.5,0 250,0 270.83,33.33"
+                                    <polygon v-if="grids.sixth.right.bottom.status"
+                                             :class="[
+                                                grids.sixth.right.bottom.status==='启用'?'normal':'',
+                                                grids.sixth.right.bottom.status==='处理中'?'box-spot-color n6':'',
+                                             ]"
+                                             class="spot sixth-right-bottom" points="200,80 191.61,33.33 270.83,33.33 300,80"
                                              style="stroke:rgb(11,51,71);stroke-width:3;" />
                                 </svg>
                             </div>
@@ -94,11 +159,18 @@
                                 <div class="d-flex flex-row" v-for="row in wall">
                                     <div class="border p-1 flex-grow-1" v-for="column in row"
                                          :class="[
-                                            column.status?'':'text-muted',
+                                            column.status?'':'small text-muted',
+                                            column.status==='待处理'?'small text-muted':'',
                                             column.status==='异常'?'bg-danger':'',
                                             column.status==='处理队列'?'font-weight-bold':'',
-                                            column.status==='处理中'?'font-weight-bold bg-primary':'',
-                                            column.status==='完成'?'text-white bg-success':'',
+                                            column.status==='完成'?'small text-muted bg-success':'',
+                                            column.status==='处理中' && !column.taskCommodity.material_box_position?'font-weight-bold bg-primary':'',
+                                            column.status==='处理中' && column.taskCommodity.material_box_position===1?'font-weight-bold box-spot-color n1':'',
+                                            column.status==='处理中' && column.taskCommodity.material_box_position===2?'font-weight-bold box-spot-color n2':'',
+                                            column.status==='处理中' && column.taskCommodity.material_box_position===3?'font-weight-bold box-spot-color n3':'',
+                                            column.status==='处理中' && column.taskCommodity.material_box_position===4?'font-weight-bold box-spot-color n4':'',
+                                            column.status==='处理中' && column.taskCommodity.material_box_position===5?'font-weight-bold box-spot-color n5':'',
+                                            column.status==='处理中' && column.taskCommodity.material_box_position===6?'font-weight-bold box-spot-color n6':'',
                                          ]"
                                          :style="{
                                             opacity:column.status?1:0.5,
@@ -133,15 +205,21 @@
                                         taskCommodity.status==='待处理'?'text-muted':'',
                                         taskCommodity.status==='挂起'?'bg-white':'',
                                         taskCommodity.status==='处理队列'?'font-weight-bold':'',
-                                        taskCommodity.status==='处理中'?'bg-primary':'',
                                         taskCommodity.status==='完成'?'bg-success':'',
                                         taskCommodity.status==='异常'?'bg-danger':'',
                                         taskCommodity.status==='取消'?'text-muted':'',
+                                        taskCommodity.status==='处理中' && !taskCommodity.material_box_position?'bg-primary':'',
+                                        taskCommodity.status==='处理中' && taskCommodity.material_box_position===1?'box-spot-color n1':'',
+                                        taskCommodity.status==='处理中' && taskCommodity.material_box_position===2?'box-spot-color n2':'',
+                                        taskCommodity.status==='处理中' && taskCommodity.material_box_position===3?'box-spot-color n3':'',
+                                        taskCommodity.status==='处理中' && taskCommodity.material_box_position===4?'box-spot-color n4':'',
+                                        taskCommodity.status==='处理中' && taskCommodity.material_box_position===5?'box-spot-color n5':'',
+                                        taskCommodity.status==='处理中' && taskCommodity.material_box_position===6?'box-spot-color n6':'',
                                         ]">
                                         <td style="opacity: 0.6">@{{ i+1 }}</td>
                                         <td>@{{ taskCommodity.commodity.name }}</td>
                                         <td>@{{ taskCommodity.amount }}</td>
-                                        <td><small class="text-dark font-weight-bold" v-for="barcode in taskCommodity.commodity.barcodes">@{{ barcode.code }}</small><br></td>
+                                        <td><small class="font-weight-bold" v-for="barcode in taskCommodity.commodity.barcodes">@{{ barcode.code }}</small><br></td>
                                     </tr>
                                 </table>
                             </div>
@@ -152,47 +230,37 @@
         </div>
     </div>
     <style>
-        .box-display .spot{
+        .spot.normal{
+            fill: #fff;
+        }
+        .box-spot-color{
+            color: #fff;
+        }
+        .box-spot-color.n1{
+            background: #1d0939;
+            fill: #1d0939;
+        }
+        .box-spot-color.n2{
+            background: #393409;
+            fill: #393409;
+        }
+        .box-spot-color.n3{
+            background: #391709;
+            fill: #391709;
+        }
+        .box-spot-color.n4{
+            background: #092039;
+            fill: #092039;
+        }
+        .box-spot-color.n5{
+            background: #390931;
+            fill: #390931;
+        }
+        .box-spot-color.n6{
+            background: #1a0106;
+            fill: #1a0106;
         }
-        /*.box-display .single{*/
-
-        /*}*/
-        /*.box-display .half-left{*/
-
-        /*}*/
-        /*.box-display .half-right{*/
-
-        /*}*/
-        /*.box-display .quarter-left-bottom{*/
-
-        /*}*/
-        /*.box-display .quarter-right-bottom{*/
-
-        /*}*/
-        /*.box-display .quarter-left-top{*/
-
-        /*}*/
-        /*.box-display .quarter-right-top{*/
-
-        /*}*/
-        /*.box-display .sixth-left-bottom{*/
-
-        /*}*/
-        /*.box-display .sixth-mid-bottom{*/
-
-        /*}*/
-        /*.box-display .sixth-right-bottom{*/
-
-        /*}*/
-        /*.box-display .sixth-left-top{*/
-
-        /*}*/
-        /*.box-display .sixth-mid-top{*/
-
-        /*}*/
-        /*.box-display .sixth-right-top{*/
 
-        /*}*/
     </style>
 @endsection
 
@@ -262,9 +330,9 @@
                         this.station['current_station_task']['station_task_commodities']
                             .forEach(function (taskCommodity) {
                                 if (typeof (_this.taskCommoditiesListByBinVar[taskCommodity['bin_number']]) === 'undefined') {
-                                    _this.taskCommoditiesListByBinVar[taskCommodity['bin_number']] = [];
+                                    _this.taskCommoditiesListByBinVar[taskCommodity['bin_number']] = null;
                                 }
-                                _this.taskCommoditiesListByBinVar[taskCommodity['bin_number']].push(taskCommodity);
+                                _this.taskCommoditiesListByBinVar[taskCommodity['bin_number']]=taskCommodity;
                             })
                         return this.taskCommoditiesListByBinVar;
                     }
@@ -293,36 +361,39 @@
                             for(let cI=0;cI<columnLength;cI++){
                                 let number=((wI*rowLength+rI)*columnLength)+cI+1;
                                 let commoditiesInBin={
-                                    taskCommodities:this.taskCommoditiesListByBin[number],
+                                    taskCommodity:this.taskCommoditiesListByBin[number],
                                     number:number,
                                     status:''
                                 };
-                                if(typeof(commoditiesInBin.taskCommodities)==='undefined'){
-                                    commoditiesInBin.taskCommodities=[];
+                                if(typeof(commoditiesInBin.taskCommodity)==='undefined'
+                                    ||!commoditiesInBin.taskCommodity){
+                                    commoditiesInBin.taskCommodity={};
                                 }else{
-                                    commoditiesInBin.status=commoditiesInBin.taskCommodities[0]['status'];
+                                    commoditiesInBin.status=commoditiesInBin.taskCommodity['status'];
                                 }
                                 row.push(commoditiesInBin);
                             }
                             wall.push(row);
-                        };
+                        }
                         walls.push(wall)
                     }
                     return walls
                 },
                 processedCommodities(){
-                    return this.task['station_task_commodities'].reduce(function(total,taskCommodity){
-                        if(typeof(total)==='object')total=0;
-                        if(taskCommodity.status==='完成'){
-                            return total+taskCommodity.amount;
+                    return this.task['station_task_commodities'].reduce(function (item, taskCommodity) {
+                        if (typeof (item) === 'object' && item.status === '完成') {
+                            return item.amount;
+                        }
+                        if (taskCommodity.status === '完成') {
+                            return item + taskCommodity.amount;
                         }
-                        return total;
+                        return item;
                     })
                 },
                 totalCommodities(){
-                    return this.task['station_task_commodities'].reduce(function(total,taskCommodity){
-                        if(typeof(total)==='object')total=0;
-                        return total+taskCommodity.amount;
+                    return this.task['station_task_commodities'].reduce(function(item,taskCommodity){
+                        if(typeof(item)==='object')item=item.amount;
+                        return item+taskCommodity.amount;
                     })
                 },
                 processingTaskMaterialBox(){
@@ -339,42 +410,94 @@
                 },
             },
             watch:{
-                station(newStation){
-                    let gridsAmount=function(){
-                        let taskMaterialBox=null;
-                        newStation.current_station_task.station_task_material_boxes.some(function(taskMaterialBox_in){
-                            if(taskMaterialBox_in.status==='处理中'){
-                                taskMaterialBox=taskMaterialBox_in;
+                'station':{
+                    immediate:true,
+                    deep:true,
+                    handler:function(newStation){
+                        let gridsAmount=(function(){
+                                let taskMaterialBox=null;
+                                newStation.current_station_task.station_task_material_boxes.some(function(taskMaterialBox_in){
+                                    if(taskMaterialBox_in.status==='处理中'){
+                                        taskMaterialBox=taskMaterialBox_in;
+                                    }
+                                });
+                                return taskMaterialBox.material_box.grid_amount;
                             }
-                        });
-                        return taskMaterialBox.grids_amount;
-                    }
-                    let taskCommodities_Processing=function(){
-                        let taskCommodities=[];
-                        newStation.current_station_task['station_task_commodities'].forEach(function(taskCommodity){
-                            if(taskCommodity.status==='处理中'){
-                                taskCommodities.push(taskCommodity)
-                            }
-                        });
-                        return taskCommodities;
-                    };
-                    this.grids={
-                        single:{status:'',},
-                        half:{
-                            left:{status:'',},
-                            right:{status:'',}
-                        },
-                        quarter:{
-                            left:{top:{status:'',},bottom:{status:'',},},
-                            right:{top:{status:'',},bottom:{status:'',},},
-                        },
-                        sixth:{
-                            left:{top:{status:'',},bottom:{status:'',},},
-                            mid:{top:{status:'',},bottom:{status:'',},},
-                            right:{top:{status:'',},bottom:{status:'',},},
-                        },
+                        )();
+                        let positions=(function(){
+                            let positions=[];
+                            newStation.current_station_task['station_task_commodities'].forEach(function(taskCommodity){
+                                if(taskCommodity.status==='处理中'){
+                                    positions.push(taskCommodity.material_box_position)
+                                }
+                            });
+                            return positions;
+                        })();
+                        let grids={
+                            single:{status:'',},
+                            half:{
+                                left:{status:'',},
+                                right:{status:'',}
+                            },
+                            quarter:{
+                                left:{top:{status:'',},bottom:{status:'',},},
+                                right:{top:{status:'',},bottom:{status:'',},},
+                            },
+                            sixth:{
+                                left:{top:{status:'',},bottom:{status:'',},},
+                                mid:{top:{status:'',},bottom:{status:'',},},
+                                right:{top:{status:'',},bottom:{status:'',},},
+                            },
+                        };
+                        switch (gridsAmount){
+                            case 1:
+                                if(positions.length>0){
+                                    grids.single.status='处理中';
+                                }break;
+                            case 2:
+                                positions.forEach(function(position){
+                                    grids.half.left.status = '启用';
+                                    grids.half.left.status = '启用';
+                                    switch (position){
+                                        case 1: grids.half.left.status = '处理中';break;
+                                        case 2: grids.half.left.status = '处理中';break;
+                                    }
+                                });break;
+                            case 4:
+                                positions.forEach(function(position){
+                                    grids.quarter.left.top.status = '启用';
+                                    grids.quarter.right.top.status = '启用';
+                                    grids.quarter.left.bottom.status = '启用';
+                                    grids.quarter.right.bottom.status = '启用';
+                                    switch (position){
+                                        case 1: grids.quarter.left.top.status = '处理中';break;
+                                        case 2: grids.quarter.left.bottom.status = '处理中';break;
+                                        case 3: grids.quarter.right.top.status = '处理中';break;
+                                        case 4: grids.quarter.right.bottom.status = '处理中';break;
+                                    }
+                                });break;
+                            case 6:
+                                positions.forEach(function(position){
+                                    grids.sixth.left.top.status = '启用';
+                                    grids.sixth.mid.top.status = '启用';
+                                    grids.sixth.right.top.status = '启用';
+                                    grids.sixth.left.bottom.status = '启用';
+                                    grids.sixth.mid.bottom.status = '启用';
+                                    grids.sixth.right.bottom.status = '启用';
+                                    switch (position){
+                                        case 1: grids.sixth.left.top.status = '处理中';break;
+                                        case 2: grids.sixth.left.bottom.status = '处理中';break;
+                                        case 3: grids.sixth.mid.top.status = '处理中';break;
+                                        case 4: grids.sixth.mid.bottom.status = '处理中';break;
+                                        case 5: grids.sixth.right.top.status = '处理中';break;
+                                        case 6: grids.sixth.right.bottom.status = '处理中';break;
+                                    }
+                                });break;
+                        }
+                        this.grids=grids;
                     }
-                }
+
+                },
             }
         });
     </script>