|
|
@@ -1,213 +0,0 @@
|
|
|
-@extends('layouts.app')
|
|
|
-@section('title'){{$station->name}} - 监视器 - 站@endsection
|
|
|
-
|
|
|
-@section('content')
|
|
|
- <div class="container-fluid body" id="container">
|
|
|
- <div class="card">
|
|
|
- <div class="card-body">
|
|
|
- <div class="row border" style="opacity: 0.75">
|
|
|
- <div class="col-4 text-center h3 py-2 font-weight-bold text-info">宝时云仓</div>
|
|
|
- <div class="col text-center h3 py-2 text-muted">智能分拣</div>
|
|
|
- </div>
|
|
|
- <div class="row pt-3">
|
|
|
- <div class="col-4">
|
|
|
- <div class="row">
|
|
|
- <div class="col py-3 h4">
|
|
|
- <div>波次号:</div>
|
|
|
- <div class=" text-center">
|
|
|
- <b>@{{ task.taskBatch.batch.code }}</b>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="col py-3 text-muted text-center">
|
|
|
- <img id="barcode" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="col py-3 h4">
|
|
|
- 料箱号:<b v-if="task.currentCommodityIndex && task.currentCommodityIndex!==-1">@{{task.taskCommodities[task.currentCommodityIndex]['materialBox']['code']}}</b>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row pt-2">
|
|
|
- <div class="col">
|
|
|
- {{-- @include("station.monitor._svg")--}}
|
|
|
- <img src="{{asset('images/demoBin.png')}}" alt="" class="img">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="col text-center">
|
|
|
- <div class="row">
|
|
|
- <div class="col py-3 h4" v-for="stationTypeBinMonitor in stationTypeBinMonitors">
|
|
|
- <table class="table border">
|
|
|
- <tr v-for="row in stationTypeBinMonitor">
|
|
|
- <td class="border p-0"
|
|
|
- v-for="column in row"
|
|
|
- :class="
|
|
|
- task.currentCommodityIndex
|
|
|
- && task.currentCommodityIndex!==-1
|
|
|
- && task.taskCommodities[task.currentCommodityIndex]['binNumber'] === column
|
|
|
- ? 'bg-info'
|
|
|
- : ''
|
|
|
- ">
|
|
|
- <span style="opacity:0.25">@{{ column }}</span></td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row mb-1">
|
|
|
- <div class="col-1 text-left font-weight-bold">数量:</div>
|
|
|
- <div class="col-2 text-left">@{{ task.currentSum }}/@{{ task.sum }}</div>
|
|
|
- <div class="col-1 offset-2 text-muted" v-if="error">异常:</div>
|
|
|
- <div class="col-6" v-if="error">@{{ error }}</div>
|
|
|
- </div>
|
|
|
- <div class="row">
|
|
|
- <div class="col py-1">
|
|
|
- <table class="table table-hover border">
|
|
|
- <tr class="text-muted">
|
|
|
- <th class="py-2">序号</th>
|
|
|
- <th class="py-2">商品</th>
|
|
|
- <th class="py-2">数量</th>
|
|
|
- <th class="py-2">条码</th>
|
|
|
- </tr>
|
|
|
- <tr class="text-muted" v-for="(taskCommodity,i) in task.taskCommodities" :class="taskCommodity.bg">
|
|
|
- <td>@{{ i+1 }}</td>
|
|
|
- <td>@{{ taskCommodity.name }}</td>
|
|
|
- <td>@{{ taskCommodity.amount }}</td>
|
|
|
- <td><small class="text-dark font-weight-bold" v-for="barcode in taskCommodity.barcodes">@{{ barcode.code }}</small><br></td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-@endsection
|
|
|
-
|
|
|
-@section('lastScript')
|
|
|
- <script type="text/javascript" src="{{mix('js/utilities/barcode.js')}}"></script>
|
|
|
- <script>
|
|
|
- $vue=new Vue({
|
|
|
- el:"#container",
|
|
|
- data:{
|
|
|
- {{--broadcastName : "{{config('database.redis.options.prefix').'presence-station-'.$station->id}}",--}}
|
|
|
- broadcastName : "{{config('database.redis.options.prefix').'station-'.$station->id}}",
|
|
|
- channelName : ".App\\Events\\BroadcastToStation",
|
|
|
- task : {
|
|
|
- currentCommodityIndex : -1,
|
|
|
- taskCommodities:[
|
|
|
- /*{amount:"",binNumber:"",name:"",barcodes:[]},*/
|
|
|
- ],
|
|
|
- taskBatch:{
|
|
|
- batch:{
|
|
|
- code:"",
|
|
|
- },
|
|
|
- },
|
|
|
- box:{},
|
|
|
- sum : 0,
|
|
|
- currentSum : 0,
|
|
|
- },
|
|
|
- boxes:[],
|
|
|
- stationTypeBinMonitors:[],
|
|
|
- stationTypeBinMonitor:{
|
|
|
- row:Number("{{$stationTypeBinMonitor->bin_row_length}}"),
|
|
|
- column:Number("{{$stationTypeBinMonitor->bin_column_length}}"),
|
|
|
- amount:Number("{{$stationTypeBinMonitor->bin_wall_amount}}"),
|
|
|
- },
|
|
|
- color:"red",
|
|
|
- error:"",
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- $('.navbar,.nav1,.nav2').hide();
|
|
|
- $('.nav3').on('mouseenter', function () {
|
|
|
- $('.navbar,.nav1,.nav2').show();
|
|
|
- });
|
|
|
- $('.body').on('mouseenter', function () {
|
|
|
- $('.navbar,.nav1,.nav2').hide();
|
|
|
- });
|
|
|
- this._broadcast();
|
|
|
- console.log(this.stationTypeBinMonitor);
|
|
|
- this._renderingstationTypeBinMonitor(this.stationTypeBinMonitor.amount,this.stationTypeBinMonitor.row,this.stationTypeBinMonitor.column);
|
|
|
- /* this._renderingBox(3,5);*/
|
|
|
- },
|
|
|
- methods:{
|
|
|
- _broadcast(){
|
|
|
- initEcho();
|
|
|
- window.Echo.channel(this.broadcastName).listen(this.channelName,(msg)=> {
|
|
|
- console.log(1231,msg)
|
|
|
- let json = JSON.parse(msg.json);
|
|
|
- console.log(json)
|
|
|
- this._refreshData(json);
|
|
|
- });
|
|
|
- },
|
|
|
- //刷新数据
|
|
|
- _refreshData(obj){
|
|
|
- let task={};
|
|
|
- task.taskCommodities = [];
|
|
|
- task.sum = 0;
|
|
|
- task.currentSum = 0;
|
|
|
- task.currentCommodityIndex = "";
|
|
|
- obj.station_task_commodities.forEach((taskCommodity,i)=> {
|
|
|
- task.sum += Number(taskCommodity.amount);
|
|
|
- if (taskCommodity.status === '完成') task.currentSum += Number(taskCommodity.amount);
|
|
|
- if (taskCommodity.status === '处理中') task.currentCommodityIndex = i;
|
|
|
- task.taskCommodities.push({
|
|
|
- bg:this._setColor(taskCommodity.status),
|
|
|
- amount:taskCommodity.amount,
|
|
|
- binNumber:taskCommodity.bin_number,
|
|
|
- name:taskCommodity.commodity?taskCommodity.commodity.name:'',
|
|
|
- barcodes:taskCommodity.commodity?taskCommodity.commodity.barcodes:[],
|
|
|
- materialBox:taskCommodity.material_box,
|
|
|
- });
|
|
|
- });
|
|
|
- task.taskBatch=obj.station_task_batches[0];
|
|
|
- setBarcode(task.taskBatch.batch.code,"#barcode",1,50,false);
|
|
|
- console.log(task)
|
|
|
- this.task = task;
|
|
|
- },
|
|
|
- //渲染墙格口
|
|
|
- _renderingstationTypeBinMonitor(amount, row, column){
|
|
|
- for (let i=0;i<amount;i++){
|
|
|
- this.stationTypeBinMonitors.push(this._createstationTypeBinMonitor(row, column, i*(row*column)));
|
|
|
- }
|
|
|
- },
|
|
|
- _setColor(status){
|
|
|
- switch (status) {
|
|
|
- case "待处理":return "";
|
|
|
- case "挂起" :return "bg-white";
|
|
|
- case "处理中" :return "bg-primary";
|
|
|
- case "完成" :return "bg-success";
|
|
|
- case "异常" :return "bg-danger";
|
|
|
- case "取消" :return "bg-dark text-white";
|
|
|
- }
|
|
|
- return "";
|
|
|
- },
|
|
|
- //生成墙格口
|
|
|
- _createstationTypeBinMonitor(row, column, increment){
|
|
|
- let stationTypeBinMonitor = [];
|
|
|
- for (let i=1;i<=row;i++){
|
|
|
- let columns = [];
|
|
|
- for (let j=((i-1)*column)+1;j<=i*column;j++){
|
|
|
- columns.push(j+increment);
|
|
|
- }
|
|
|
- stationTypeBinMonitor.unshift(columns);
|
|
|
- }
|
|
|
- return stationTypeBinMonitor;
|
|
|
- },
|
|
|
- //渲染料箱格口
|
|
|
- _renderingBox(row, column, x=79, y=72, width=21, height=12){
|
|
|
- let boxes = [];
|
|
|
- for (let i=0;i<column;i++){
|
|
|
- for (let j=row-1;j>=0;j--){
|
|
|
- if (boxes.length===5) boxes.push({x:((i+j)*width)+x,y:(y+(i*height))-(j*height),sign:true});
|
|
|
- else boxes.push({x:((i+j)*width)+x,y:(y+(i*height))-(j*height),sign:false});
|
|
|
- }
|
|
|
- }
|
|
|
- this.boxes = boxes;
|
|
|
- },
|
|
|
- },
|
|
|
- });
|
|
|
- </script>
|
|
|
-@endsection
|