|
|
@@ -40,19 +40,51 @@
|
|
|
<div class="row">
|
|
|
<div class="col py-3 h4">
|
|
|
料箱号：
|
|
|
- <div v-if="task&&task.station_task_material_boxes">
|
|
|
- <div v-for="taskMaterialBox in task.station_task_material_boxes">
|
|
|
- <span v-if="taskMaterialBox.status==='处理中'">
|
|
|
- @{{taskMaterialBox.material_box.code}}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
+ <div v-if="task&&processingTaskMaterialBox">
|
|
|
+ @{{processingTaskMaterialBox.material_box.code}}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row pt-2">
|
|
|
- <div class="col">
|
|
|
- {{-- @include("station.monitor._svg")--}}
|
|
|
- <img src="{{asset('images/demoBin.png')}}" alt="" class="img">
|
|
|
+ <div class="col text-center">
|
|
|
+ <svg class="box-display" width="300" height="160" viewBox="0 0 300 160">
|
|
|
+ <rect x="0" y="80" width="300" height="80"
|
|
|
+ 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"
|
|
|
+ style="stroke:rgb(11,51,71);stroke-width:3;" />
|
|
|
+
|
|
|
+
|
|
|
+ <polygon class="spot half-left" points="0,80 50,0 150,0 150,80"
|
|
|
+ style="stroke:rgb(11,51,71);stroke-width:3;" />
|
|
|
+ <polygon class="spot half-right" points="150,0 150,80 300,80 250,0"
|
|
|
+ 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"
|
|
|
+ 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"
|
|
|
+ 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"
|
|
|
+ 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"
|
|
|
+ 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"
|
|
|
+ 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"
|
|
|
+ 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"
|
|
|
+ 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"
|
|
|
+ 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"
|
|
|
+ style="stroke:rgb(11,51,71);stroke-width:3;" />
|
|
|
+ </svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -119,6 +151,49 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <style>
|
|
|
+ .box-display .spot{
|
|
|
+ }
|
|
|
+ /*.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
|
|
|
|
|
|
@section('lastScript')
|
|
|
@@ -127,14 +202,28 @@
|
|
|
$vue=new Vue({
|
|
|
el:"#container",
|
|
|
data:{
|
|
|
- mounted:false,
|
|
|
broadcastName : "{{config('database.redis.options.prefix').'station-'.$station->id}}",
|
|
|
channelName : ".App\\Events\\BroadcastToStation",
|
|
|
error:"",
|
|
|
station:{!! $station??[] !!},
|
|
|
+ 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:'',},},
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.mounted=true;
|
|
|
this._makeMenuHiding();
|
|
|
this._listenBroadcast();
|
|
|
},
|
|
|
@@ -236,7 +325,22 @@
|
|
|
return total+taskCommodity.amount;
|
|
|
})
|
|
|
},
|
|
|
+ processingTaskMaterialBox(){
|
|
|
+ let taskMaterialBox=null;
|
|
|
+ this.task.station_task_material_boxes.some(function(taskMaterialBox_in){
|
|
|
+ if(taskMaterialBox_in.status==='处理中'){
|
|
|
+ taskMaterialBox=taskMaterialBox_in;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return taskMaterialBox;
|
|
|
+ },
|
|
|
+ boxIndicator(){
|
|
|
+ let gridAmount=this.processingTaskMaterialBox.material_box.grid_amount;
|
|
|
+ },
|
|
|
},
|
|
|
+ watch:{
|
|
|
+
|
|
|
+ }
|
|
|
});
|
|
|
</script>
|
|
|
@endsection
|
LD