<!DOCTYPE html> 
 | 
<html lang="en"> 
 | 
    <head> 
 | 
        <meta charset="UTF-8"> 
 | 
        <title>WCS控制中心</title> 
 | 
        <link rel="stylesheet" href="../static/css/animate.min.css"> 
 | 
        <link rel="stylesheet" href="../static/vue/element/element.css"> 
 | 
        <link rel="stylesheet" href="../static/css/console_vue.css"> 
 | 
        <link rel="stylesheet" href="../static/css/toggle-switch.css"> 
 | 
        <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> 
 | 
        <script type="text/javascript" src="../static/layui/layui.js"></script> 
 | 
        <script type="text/javascript" src="../static/js/handlebars/handlebars-v4.5.3.js"></script> 
 | 
        <script type="text/javascript" src="../static/js/common.js"></script> 
 | 
        <script type="text/javascript" src="../static/vue/js/vue.min.js"></script> 
 | 
        <script type="text/javascript" src="../static/vue/element/element.js"></script> 
 | 
    </head> 
 | 
    <body> 
 | 
        <div id="app"> 
 | 
            <div style="display: flex;justify-content: center;align-items: center;width: 100%;margin-top: 150px;"> 
 | 
                <div id="mapDataId" style="zoom: 0.7;position: relative;"> 
 | 
                    <div class="pointContainer" v-for="(row,index) in map" :key="index"> 
 | 
                        <div v-for="(col,idx) in row" :key="idx"> 
 | 
                            <div v-if="col.value == 0"> 
 | 
                                <!-- 子轨道 路径为穿梭车预计路径则显示穿梭车颜色和穿梭车号 --> 
 | 
                                <div :style="{background: checkAdvancePath(index,idx).length == 0 ? '':shuttleColorList[checkAdvancePath(index,idx)[0]]}" class="item" v-if="col.data.length > 0">{{col.data}}</div> 
 | 
                                <div :style="{background: checkAdvancePath(index,idx).length == 0 ? '':shuttleColorList[checkAdvancePath(index,idx)[0]]}" class="item" v-else>{{checkAdvancePath(index,idx).length == 0 ? idx:checkAdvancePath(index,idx)}}</div> 
 | 
                            </div> 
 | 
                            <div v-else-if="col.value == 3"> 
 | 
                                <!-- 母轨道 路径为穿梭车预计路径则显示穿梭车颜色和穿梭车号 --> 
 | 
                                <div :style="{background: checkAdvancePath(index,idx).length == 0 ? '#5af':shuttleColorList[checkAdvancePath(index,idx)[0]]}" class="item">{{checkAdvancePath(index,idx).length == 0 ? '⇅⇄':checkAdvancePath(index,idx)}}</div> 
 | 
                            </div> 
 | 
                            <div v-else-if="col.value == 4"> 
 | 
                                <!-- 站点 --> 
 | 
                                <div class="site" :id="'site-' + col.data" @click="openSite(col.data)">{{col.data}}</div> 
 | 
                            </div> 
 | 
                            <div v-else-if="col.value == 5"> 
 | 
                                <!-- 充电桩 --> 
 | 
                                <div class="item" style="font-size: 24px">⚡</div> 
 | 
                            </div> 
 | 
                            <div v-else-if="col.value == -999"> 
 | 
                                <!-- 路径占用区域 --> 
 | 
                                <div class="item" style="background:#f83333;color: #fff;">{{idx}}</div> 
 | 
                            </div> 
 | 
                            <div v-else-if="col.value < 0"> 
 | 
                                <!-- 禁止显示区域 --> 
 | 
                                <div class="item" style="visibility: hidden">{{idx}}</div> 
 | 
                            </div> 
 | 
                            <div v-else> 
 | 
                                <div class="item" v-if="col.data.length > 0">{{col.data}}</div> 
 | 
                                <div class="item" v-else>{{idx}}-{{col.value}}</div> 
 | 
                            </div> 
 | 
                        </div> 
 | 
  
 | 
                        <div> 
 | 
                            <!-- 显示行号 --> 
 | 
                            <div class="item" style="background: none;color: #000;">#{{index+1}}</div> 
 | 
                        </div> 
 | 
                    </div> 
 | 
  
 | 
                    <!--输出小车--> 
 | 
                    <div v-for="(car,idx) in currentLevShuttleList" 
 | 
                         :style="{ 
 | 
                         left: getCarPosition(car.wcsPoint.x,car.wcsPoint.y)[1] 
 | 
                         ,top: getCarPosition(car.wcsPoint.x,car.wcsPoint.y)[0] 
 | 
                         ,color: shuttleColorList[car.shuttleNo] 
 | 
                         }" 
 | 
                         class="sxcar" :id="'sxcar-' + car.shuttleNo"> 
 | 
                        {{car.shuttleNo}} 
 | 
                    </div> 
 | 
  
 | 
                </div> 
 | 
  
 | 
                <!--输出楼层--> 
 | 
                <div style="height: 100%;"> 
 | 
                    <div class="floorBtnBox" v-for="(lev,idx) in floorList"> 
 | 
                        <el-button :style="{background:currentLev === lev ? '#7DCDFF':''}" @click="changFloor(lev)">{{lev}}F</el-button> 
 | 
                    </div> 
 | 
                    <div> 
 | 
                        <el-button @click="testMove()">测试移动车</el-button> 
 | 
                        <el-button @click="resetMap()">重置地图</el-button> 
 | 
                    </div> 
 | 
                </div> 
 | 
            </div> 
 | 
  
 | 
            <div class="footer"> 
 | 
                <!-- 总开关 --> 
 | 
                <div class="line-status"> 
 | 
                    <div class="body-head">总开关</div> 
 | 
                    <div class="switch" @click="systemSwitch"> 
 | 
                        <label id="system-toggle" class="toggle-switch" style="margin-left: 20px;"> 
 | 
                            <input id="system-toggle-checked" disabled type="checkbox"> 
 | 
                            <div class="button"> 
 | 
                                <div class="light"></div> 
 | 
                                <div class="dots"></div> 
 | 
                                <div class="characters"></div> 
 | 
                                <div class="shine"></div> 
 | 
                                <div class="shadow"></div> 
 | 
                            </div> 
 | 
                        </label> 
 | 
  
 | 
                        <div class="switch_r"> 
 | 
                            <p>系统状态</p> 
 | 
                            <p id="system-run-desc">系统运行中</p> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                </div> 
 | 
                <!-- 四向穿梭车状态 --> 
 | 
                <div class="line-status"> 
 | 
                    <div class="body-head">穿梭车状态</div> 
 | 
                    <div class="shuttle-status-box"> 
 | 
                        <div v-for="(item,idx) in shuttleList" class="state"> 
 | 
                            <span :style="{color: shuttleColorList[item.shuttleNo]}">四向穿梭车 {{item.shuttleNo}}</span> 
 | 
                            <span v-if="item.protocolStatus == 1" 
 | 
                                class="state-ss shuttle-idle">{{item.protocolStatus$}}</span> 
 | 
                            <span v-else-if="item.protocolStatus == 2" 
 | 
                                class="state-ss shuttle-working">{{item.protocolStatus$}}</span> 
 | 
                            <span v-else-if="item.protocolStatus == 3" 
 | 
                                class="state-ss shuttle-waiting">{{item.protocolStatus$}}</span> 
 | 
                            <span v-else-if="item.protocolStatus == 4" 
 | 
                                class="state-ss shuttle-charging">{{item.protocolStatus$}}</span> 
 | 
                            <span v-else-if="item.protocolStatus == 5" 
 | 
                                class="state-ss shuttle-charging-waiting">{{item.protocolStatus$}}</span> 
 | 
                            <span v-else-if="item.protocolStatus == 6" 
 | 
                                class="state-ss shuttle-fixing">{{item.protocolStatus$}}</span> 
 | 
                            <span v-else-if="item.protocolStatus == 7" 
 | 
                                class="state-ss shuttle-offline">{{item.protocolStatus$}}</span> 
 | 
                            <span v-else class="state-ss shuttle-offline">{{item.protocolStatus$}}</span> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                    <div class="allStatus"><span>所有状态</span></div> 
 | 
                    <div class="allStatus item-group"> 
 | 
                        <span class="shuttle-idle">空闲</span> 
 | 
                        <span class="shuttle-working">作业中</span> 
 | 
                        <span class="shuttle-waiting">等待确认</span> 
 | 
                        <span class="shuttle-charging">充电中</span> 
 | 
                        <span class="shuttle-charging-waiting">充电任务等待确认</span> 
 | 
                        <span class="shuttle-fixing">故障修复中</span> 
 | 
                        <span class="shuttle-offline">离线</span> 
 | 
                    </div> 
 | 
                </div> 
 | 
                <!-- 提升机状态 --> 
 | 
                <div class="line-status"> 
 | 
                    <div class="body-head">提升机状态</div> 
 | 
                    <div class="lift-status-box"> 
 | 
                        <div v-for="(item,idx) in liftList" class="state states"> 
 | 
                            <span>提升机 {{item.liftNo}}</span> 
 | 
                            <span v-if="item.protocolStatus == 1" 
 | 
                                class="state-ss lift-idle">{{item.protocolStatus$}}</span> 
 | 
                            <span v-else-if="item.protocolStatus == 2" 
 | 
                                class="state-ss lift-working">{{item.protocolStatus$}}</span> 
 | 
                            <span v-else-if="item.protocolStatus == 3" 
 | 
                                class="state-ss lift-waiting">{{item.protocolStatus$}}</span> 
 | 
                            <span v-else-if="item.protocolStatus == 4" 
 | 
                                class="state-ss lift-offline">{{item.protocolStatus$}}</span> 
 | 
                            <span v-else class="state-ss lift-offline">{{item.protocolStatus$}}</span> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                    <div class="allStatus"><span>所有状态</span></div> 
 | 
                    <div class="allStatus item-group"> 
 | 
                        <span class="lift-idle">空闲</span> 
 | 
                        <span class="lift-working">作业中</span> 
 | 
                        <span class="lift-waiting">等待确认</span> 
 | 
                        <span class="lift-offline">离线</span> 
 | 
                    </div> 
 | 
                </div> 
 | 
                <!-- 输送线状态 --> 
 | 
                <div class="line-status"> 
 | 
                    <div class="body-head">输送线状态</div> 
 | 
                    <div class="state states"> 
 | 
                        <span>运输线总数</span> 
 | 
                        <span class="line-ss">9</span> 
 | 
                    </div> 
 | 
                    <div class="allStatus"><span>所有状态</span></div> 
 | 
                    <div class="allStatus item-group"> 
 | 
                        <span class="site-auto-run-id">自动+有物+ID</span> 
 | 
                        <span class="site-auto-run">自动+有物</span> 
 | 
                        <span class="site-auto-id">自动+ID</span> 
 | 
                        <span class="site-auto">自动</span> 
 | 
                        <span class="site-unauto">非自动/手动</span> 
 | 
                    </div> 
 | 
                </div> 
 | 
                <!-- 条码表格 --> 
 | 
                <div class="bar-code"> 
 | 
                    <div class="body-head" id="code">条码扫描器</div> 
 | 
                    <div class="tablebox"> 
 | 
                        <div class="table-head"> 
 | 
                            <li><span>条码名称</span><span class="right">扫码时间</span></li> 
 | 
                        </div> 
 | 
                        <div id="barcode1" class="table-body"> 
 | 
                            <li v-for="(item,index) in codeList1" :key="index"><span>{{item.barcode}}</span><span class="right">{{item.time}}</span></li> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                    <div class="tablebox"> 
 | 
                        <div class="table-head"> 
 | 
                            <li><span>条码名称</span><span class="right">扫码时间</span></li> 
 | 
                        </div> 
 | 
                        <div id="barcode2" class="table-body"> 
 | 
                            <li v-for="(item,index) in codeList2" :key="index"><span>{{item.barcode}}</span><span class="right">{{item.time}}</span></li> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                </div> 
 | 
            </div> 
 | 
  
 | 
            <!-- 输送设备弹窗 --> 
 | 
            <div id="siteWindow" :style="{display:siteWindow?'block':'none'}" class="animate__animated animate__fadeIn"> 
 | 
                <!-- 表头 --> 
 | 
                <div id="siteWindow-head"> 
 | 
                    <div class="detailed"></div> 
 | 
                    <button @click="siteWindow = false"></button> 
 | 
                </div> 
 | 
                <!-- 表内容 --> 
 | 
                <div class="siteWindow-body"> 
 | 
                    <form> 
 | 
                        <!-- 设备号 --> 
 | 
                        <div class="form-item"> 
 | 
                            <div class="form-item-label"> 
 | 
                                <span>设备号:</span> 
 | 
                            </div> 
 | 
                            <div class="form-item-input"> 
 | 
                                <input type="text" name="siteId" value=""> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                        <!-- 工作号 --> 
 | 
                        <div class="form-item"> 
 | 
                            <div class="form-item-label"> 
 | 
                                <span>工作号:</span> 
 | 
                            </div> 
 | 
                            <div class="form-item-input"> 
 | 
                                <input type="text" name="workNo" value=""> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                        <!-- 工作状态 --> 
 | 
                        <div class="form-item"> 
 | 
                            <div class="form-item-label"> 
 | 
                                <span>工作状态:</span> 
 | 
                            </div> 
 | 
                            <div class="form-item-input"> 
 | 
                                <input type="text" name="wrkSts" value=""> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                        <div class="form-item"> 
 | 
                            <!-- 自动 --> 
 | 
                            <div class="form-item-checkbox"> 
 | 
                                <div class="form-item-label-checkbox"> 
 | 
                                    <span>自动</span> 
 | 
                                </div> 
 | 
                                <div class="form-item-input-checkbox"> 
 | 
                                    <input type="checkbox" name="autoing"> 
 | 
                                </div> 
 | 
                            </div> 
 | 
                            <!-- 有物 --> 
 | 
                            <div class="form-item-checkbox"> 
 | 
                                <div class="form-item-label-checkbox"> 
 | 
                                    <span>有物</span> 
 | 
                                </div> 
 | 
                                <div class="form-item-input-checkbox"> 
 | 
                                    <input type="checkbox" name="loading"> 
 | 
                                </div> 
 | 
                            </div> 
 | 
                            <!-- 能入 --> 
 | 
                            <div class="form-item-checkbox"> 
 | 
                                <div class="form-item-label-checkbox"> 
 | 
                                    <span>能入</span> 
 | 
                                </div> 
 | 
                                <div class="form-item-input-checkbox"> 
 | 
                                    <input type="checkbox" name="canining"> 
 | 
                                </div> 
 | 
                            </div> 
 | 
                            <!-- 能出 --> 
 | 
                            <div class="form-item-checkbox"> 
 | 
                                <div class="form-item-label-checkbox"> 
 | 
                                    <span>能出</span> 
 | 
                                </div> 
 | 
                                <div class="form-item-input-checkbox"> 
 | 
                                    <input type="checkbox" name="canouting"> 
 | 
                                </div> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                        <!-- 出入类型 --> 
 | 
                        <div class="form-item"> 
 | 
                            <div class="form-item-label"> 
 | 
                                <span>出入类型:</span> 
 | 
                            </div> 
 | 
                            <div class="form-item-input"> 
 | 
                                <input type="text" name="ioType" value=""> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                        <!-- 源站 --> 
 | 
                        <div class="form-item"> 
 | 
                            <div class="form-item-label"> 
 | 
                                <span>源站:</span> 
 | 
                            </div> 
 | 
                            <div class="form-item-input"> 
 | 
                                <input type="text" name="sourceStaNo" value=""> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                        <!-- 目标站 --> 
 | 
                        <div class="form-item"> 
 | 
                            <div class="form-item-label"> 
 | 
                                <span>目标站:</span> 
 | 
                            </div> 
 | 
                            <div class="form-item-input"> 
 | 
                                <input type="text" name="staNo" value=""> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                        <!-- 源库位 --> 
 | 
                        <div class="form-item"> 
 | 
                            <div class="form-item-label"> 
 | 
                                <span>源库位:</span> 
 | 
                            </div> 
 | 
                            <div class="form-item-input"> 
 | 
                                <input type="text" name="sourceLocNo" value=""> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                        <!-- 目标库位 --> 
 | 
                        <div class="form-item"> 
 | 
                            <div class="form-item-label"> 
 | 
                                <span>目标库位:</span> 
 | 
                            </div> 
 | 
                            <div class="form-item-input"> 
 | 
                                <input type="text" name="locNo" value=""> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                    </form> 
 | 
                </div> 
 | 
            </div> 
 | 
  
 | 
        </div> 
 | 
        <script> 
 | 
            var app = new Vue({ 
 | 
                el: '#app', 
 | 
                data: { 
 | 
                    map: [],//地图数据 
 | 
                    currentLev: 1,//地图当前楼层 
 | 
                    siteWindow: false, //站点弹窗显示默认不显示 
 | 
                    floorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], //当前项目楼层 
 | 
                    shuttleList: [], //四向穿梭车集合 
 | 
                    currentLevShuttleList: [],//当前楼层四向穿梭车集合 
 | 
                    shuttleColorList: [],//四向穿梭车颜色集合 
 | 
                    liftList: [], //提升机集合 
 | 
                    systemStatus: true,//系统运行状态 
 | 
                    consoleInterval: null,//定时器存储变量 
 | 
                    codeList1: [],//条码List 
 | 
                    codeList2: [],//条码List 
 | 
                    ws: null, 
 | 
                }, 
 | 
                created() { 
 | 
                    this.init() 
 | 
                }, 
 | 
                watch: { 
 | 
  
 | 
                }, 
 | 
                methods: { 
 | 
                    init() { 
 | 
                        this.ws = new WebSocket("ws://" + window.location.host + baseUrl + "/console/websocket"); 
 | 
                        this.ws.onopen = this.webSocketOnOpen 
 | 
                        this.ws.onerror = this.webSocketOnError 
 | 
                        this.ws.onmessage = this.webSocketOnMessage 
 | 
                        this.ws.onclose = this.webSocketClose 
 | 
  
 | 
                        this.getMap(this.currentLev) 
 | 
                        this.getSystemRunningStatus() //获取系统运行状态 
 | 
  
 | 
                        this.consoleInterval = setInterval(() => { 
 | 
                            this.getShuttleStateInfo() //获取四向穿梭车信息 
 | 
                            this.getLiftStateInfo() //获取提升机信息 
 | 
                            this.getSiteInfo() //获取输送站点数据 
 | 
                            this.getMap(this.currentLev) //获取实时地图数据 
 | 
                            this.getCodeData()//获取条码 
 | 
                        }, 1000) 
 | 
                    }, 
 | 
                    //获取地图数据 
 | 
                    getMap(lev) { 
 | 
                        this.sendWs(JSON.stringify({ 
 | 
                            "url": "/console/map/auth", 
 | 
                            "data": lev 
 | 
                        })) 
 | 
                    }, 
 | 
                    setMap(res) { 
 | 
                        //获取地图数据 
 | 
                        let data = res.data 
 | 
                        let tmp = [] 
 | 
                        for (let i = 1; i < data.length - 1; i++) { 
 | 
                            tmp.push(data[i]) 
 | 
                        } 
 | 
                        // console.log(tmp) 
 | 
                        this.map = tmp 
 | 
                    }, 
 | 
                    openSite(id) { 
 | 
                        this.siteWindow = true; //打开站点信息弹窗 
 | 
                        $(".detailed").empty(); 
 | 
                        $('.detailed').append(id + '站点详细信息'); 
 | 
                        $.ajax({ 
 | 
                            url: baseUrl + "/console/site/detail", 
 | 
                            headers: { 
 | 
                                'token': localStorage.getItem('token') 
 | 
                            }, 
 | 
                            data: { 
 | 
                                siteId: id 
 | 
                            }, 
 | 
                            method: 'post', 
 | 
                            success: function(res) { 
 | 
                                for (var val in res.data) { 
 | 
                                    var find = $("#siteWindow").find(":input[name='" + val + "']"); 
 | 
                                    if (find[0].type === 'text') { 
 | 
                                        find.val(res.data[val]); 
 | 
                                    } else if (find[0].type === 'checkbox') { 
 | 
                                        find.attr("checked", res.data[val] === 'Y'); 
 | 
                                    } 
 | 
                                } 
 | 
                            } 
 | 
  
 | 
                        }) 
 | 
                    }, 
 | 
                    getSiteInfo() { 
 | 
                        //获取输送站点数据 
 | 
                        this.sendWs("{\"url\":\"/console/latest/data/site\",\"data\":{}}") 
 | 
                    }, 
 | 
                    setSiteInfo(res) { 
 | 
                        //获取输送站点数据 
 | 
                        if (res.code === 200){ 
 | 
                            var sites = res.data; 
 | 
                            for (var i = 0; i < sites.length; i++){ 
 | 
                                var siteEl = $("#site-"+sites[i].siteId); 
 | 
                                siteEl.attr("class", "site " + sites[i].siteStatus); 
 | 
                                if (sites[i].workNo != null && sites[i].workNo>0) { 
 | 
                                    siteEl.html(sites[i].siteId + "[" + sites[i].workNo + "]"); 
 | 
                                } else { 
 | 
                                    siteEl.html(sites[i].siteId); 
 | 
                                } 
 | 
                            } 
 | 
                        } else if (res.code === 403){ 
 | 
                            parent.location.href = baseUrl+"/login"; 
 | 
                        }  else { 
 | 
                            console.log(res.msg); 
 | 
                        } 
 | 
                    }, 
 | 
                    changFloor(lev) { 
 | 
                        this.currentLev = lev 
 | 
                        this.currentLevShuttleList = [] 
 | 
                        this.getMap(lev) 
 | 
                    }, 
 | 
                    getShuttleStateInfo() { 
 | 
                        this.sendWs("{\"url\":\"/shuttle/table/shuttle/state\",\"data\":{}}") 
 | 
                    }, 
 | 
                    setShuttleStateInfo(res) { 
 | 
                        // 四向穿梭车信息表获取 
 | 
                        let that = this 
 | 
                        if (res.code == 200) { 
 | 
                            let currentLevShuttle = []//当前楼层小车集合 
 | 
                            res.data.forEach((item,idx) => { 
 | 
                                if (item != null && item.point != undefined && item.point != null) { 
 | 
                                    if (item.point.z == that.currentLev) { 
 | 
                                        currentLevShuttle.push(item); 
 | 
                                    } 
 | 
                                } 
 | 
                            }) 
 | 
                            that.currentLevShuttleList = currentLevShuttle 
 | 
                            that.shuttleList = res.data 
 | 
  
 | 
                            if (that.shuttleColorList.length == 0) { 
 | 
                                let colorList = []//随机小车颜色 
 | 
                                res.data.forEach((item,idx) => { 
 | 
                                    colorList[item.shuttleNo] = that.colorRGB() 
 | 
                                }) 
 | 
                                that.shuttleColorList = colorList 
 | 
                            } 
 | 
                        } 
 | 
                    }, 
 | 
                    getLiftStateInfo() { 
 | 
                        // 提升机信息表获取 
 | 
                        this.sendWs("{\"url\":\"/lift/table/lift/state\",\"data\":{}}") 
 | 
                    }, 
 | 
                    setLiftStateInfo(res) { 
 | 
                        // 提升机信息表获取 
 | 
                        if (res.code == 200) { 
 | 
                            this.liftList = res.data 
 | 
                        } 
 | 
                    }, 
 | 
                    systemSwitch() { 
 | 
                        // 系统开关 
 | 
                        let that = this 
 | 
                        if (this.systemStatus) { 
 | 
                            this.$prompt('请输入口令,并停止WCS系统', '提示', { 
 | 
                                confirmButtonText: '确定', 
 | 
                                cancelButtonText: '取消', 
 | 
                            }).then(({ 
 | 
                                value 
 | 
                            }) => { 
 | 
                                that.doSwitch(0, value) 
 | 
                            }).catch(() => { 
 | 
  
 | 
                            }); 
 | 
                        } else { 
 | 
                            this.doSwitch(1) 
 | 
                        } 
 | 
                    }, 
 | 
                    doSwitch(operatorType, password) { 
 | 
                        let that = this 
 | 
                        $.ajax({ 
 | 
                            url: baseUrl + "/console/system/switch", 
 | 
                            headers: { 
 | 
                                'token': localStorage.getItem('token') 
 | 
                            }, 
 | 
                            data: { 
 | 
                                operatorType: operatorType, 
 | 
                                password: password 
 | 
                            }, 
 | 
                            method: 'POST', 
 | 
                            success: function(res) { 
 | 
                                if (res.code === 200) { 
 | 
                                    if (res.data.status) { 
 | 
                                        $('#system-toggle-checked').attr("checked", true); 
 | 
                                        $('#system-run-desc').html("系统运行中..."); 
 | 
                                        that.systemStatus = true; 
 | 
                                        parent.systemRunning = true; 
 | 
                                    } else { 
 | 
                                        $('#system-toggle-checked').attr("checked", false); 
 | 
                                        $('#system-run-desc').html("系统已停止!"); 
 | 
                                        that.systemStatus = false; 
 | 
                                        parent.systemRunning = false; 
 | 
                                    } 
 | 
                                } else if (res.code === 403) { 
 | 
                                    parent.location.href = baseUrl + "/login"; 
 | 
                                } else { 
 | 
                                    that.$message({ 
 | 
                                        message: res.msg, 
 | 
                                        type: 'error' 
 | 
                                    }); 
 | 
                                } 
 | 
                            } 
 | 
                        }); 
 | 
                    }, 
 | 
                    getSystemRunningStatus() { 
 | 
                        // 获取wcs系统运行状态 
 | 
                        let that = this 
 | 
                        $.ajax({ 
 | 
                            url: baseUrl + "/console/system/running/status", 
 | 
                            headers: { 
 | 
                                'token': localStorage.getItem('token') 
 | 
                            }, 
 | 
                            method: 'POST', 
 | 
                            success: function(res) { 
 | 
                                if (res.code === 200) { 
 | 
                                    if (res.data.status) { 
 | 
                                        $('#system-toggle-checked').attr("checked", true); 
 | 
                                        $('#system-run-desc').html("系统运行中..."); 
 | 
                                        that.systemStatus = true; 
 | 
                                        parent.systemRunning = true; 
 | 
                                    } else { 
 | 
                                        $('#system-toggle-checked').attr("checked", false); 
 | 
                                        $('#system-run-desc').html("系统已停止!"); 
 | 
                                        that.systemStatus = false; 
 | 
                                        parent.systemRunning = false; 
 | 
                                    } 
 | 
                                } else if (res.code === 403) { 
 | 
                                    parent.location.href = baseUrl + "/login"; 
 | 
                                } else { 
 | 
                                    that.$message({ 
 | 
                                        message: res.msg, 
 | 
                                        type: 'error' 
 | 
                                    }); 
 | 
                                } 
 | 
                            } 
 | 
                        }); 
 | 
                    }, 
 | 
                    getCarPosition(x,y) { 
 | 
                        //计算四向穿梭车图标位置 
 | 
                        let top = (x * 35 - 35) + "px" //需要减去小车自己所占高度 
 | 
                        let left = (y * 35) + "px" //需要减去小车自己所占宽度 
 | 
                        return [top,left]; 
 | 
                    }, 
 | 
                    testMove() { 
 | 
                        let that = this 
 | 
                        clearInterval(this.consoleInterval)//清理定时器 
 | 
  
 | 
                        let shuttleList = this.currentLevShuttleList 
 | 
                        $.ajax({ 
 | 
                            url: baseUrl + "/static/testMoveData.json", 
 | 
                            headers: { 
 | 
                                'token': localStorage.getItem('token') 
 | 
                            }, 
 | 
                            method: 'GET', 
 | 
                            success: function(res) { 
 | 
                                shuttleList[0].moveAdvancePath = res 
 | 
                                that.currentLevShuttleList = shuttleList 
 | 
  
 | 
                                let index = 0 
 | 
                                let tmp = null 
 | 
                                tmp = setInterval(() => { 
 | 
                                    if (index < res.length) { 
 | 
                                        that.currentLevShuttleList[0].wcsPoint.y = res[index].y 
 | 
                                        that.currentLevShuttleList[0].wcsPoint.x = res[index].x 
 | 
                                        index++ 
 | 
                                    }else { 
 | 
                                        clearInterval(tmp) 
 | 
                                        that.init() 
 | 
                                    } 
 | 
                                },1000) 
 | 
                            } 
 | 
                        }); 
 | 
                    }, 
 | 
                    colorRGB(){ 
 | 
                        //随机颜色 
 | 
                        const r = Math.floor(Math.random()*256); 
 | 
                        const g = Math.floor(Math.random()*256); 
 | 
                        const b = Math.floor(Math.random()*256); 
 | 
                        return `rgb(${r},${g},${b})`; 
 | 
                    }, 
 | 
                    checkAdvancePath(x,y) { 
 | 
                        //检测路径是否为穿梭车预计路径,如x和y路径是穿梭车预计路径,则返回小车号 
 | 
                        this.currentLevShuttleList.forEach((item,idx) => { 
 | 
                            if (item.moveAdvancePath != null) { 
 | 
                                item.moveAdvancePath.forEach((path,index) => { 
 | 
                                    if (path.x === x && path.y === y) { 
 | 
                                        return item.shuttleNo; 
 | 
                                    } 
 | 
                                }) 
 | 
                            } 
 | 
                        }) 
 | 
                        let data = [] 
 | 
                        let shuttleList = this.currentLevShuttleList; 
 | 
                        for (var i = 0; i < shuttleList.length; i++) { 
 | 
                            let shuttle = shuttleList[i] 
 | 
                            let moveAdvancePath = shuttle.moveAdvancePath 
 | 
                            if (moveAdvancePath != null) { 
 | 
                                for (var j = 0; j < moveAdvancePath.length; j++) { 
 | 
                                    let path = moveAdvancePath[j] 
 | 
                                    if (path.x-1 === x && path.y === y) {//路径符合 
 | 
                                        data.push(shuttle.shuttleNo) 
 | 
                                        continue; 
 | 
                                    } 
 | 
                                } 
 | 
                            } 
 | 
                        } 
 | 
                        return data;//返回小车号集合 
 | 
                    }, 
 | 
                    resetMap() { 
 | 
                        //重置地图 
 | 
                        let that = this 
 | 
                        $.ajax({ 
 | 
                            url:baseUrl+"/console/map/resetMap/" + this.currentLev, 
 | 
                            headers:{ 
 | 
                                'token': localStorage.getItem('token') 
 | 
                            }, 
 | 
                            data:{}, 
 | 
                            method:'get', 
 | 
                            success:function (res) { 
 | 
                                that.$message({ 
 | 
                                    message: that.currentLev + '层地图重置完成', 
 | 
                                    type: 'success' 
 | 
                                }); 
 | 
                            } 
 | 
                        }) 
 | 
                    }, 
 | 
                    getCodeData(){ 
 | 
                        this.sendWs(JSON.stringify({ 
 | 
                            "url": "/console/barcode/output/site", 
 | 
                            "data": {} 
 | 
                        })) 
 | 
                    }, 
 | 
                    setCodeData(res) { 
 | 
                        if(res.code === 200){ 
 | 
                            let data = JSON.parse(res.data) 
 | 
                            if (data.length <= 5) { 
 | 
                                this.codeList1 = data; 
 | 
                            } else { 
 | 
                                this.codeList1 = data.slice(0, 5); 
 | 
                                this.codeList2 = data.splice(5, 10); 
 | 
                            } 
 | 
                        } 
 | 
                    }, 
 | 
                    webSocketOnOpen(e) { 
 | 
                        console.log("open"); 
 | 
                    }, 
 | 
                    webSocketOnError(e) { 
 | 
                        console.log(e); 
 | 
                    }, 
 | 
                    webSocketOnMessage(e) { 
 | 
                        const result = JSON.parse(e.data); 
 | 
                        if (result.url == "/shuttle/table/shuttle/state") { 
 | 
                            this.setShuttleStateInfo(JSON.parse(result.data)) 
 | 
                        }else if (result.url == "/lift/table/lift/state") { 
 | 
                            this.setLiftStateInfo(JSON.parse(result.data)) 
 | 
                        }else if (result.url == "/console/latest/data/site") { 
 | 
                            this.setSiteInfo(JSON.parse(result.data)) 
 | 
                        }else if (result.url == "/console/map/auth") { 
 | 
                            this.setMap(JSON.parse(result.data)) 
 | 
                        }else if (result.url == "/console/barcode/output/site") { 
 | 
                            this.setCodeData(JSON.parse(result.data)) 
 | 
                        } 
 | 
                    }, 
 | 
                    webSocketClose(e) { 
 | 
                        console.log("close"); 
 | 
                    }, 
 | 
                    sendWs(message) { 
 | 
                        if (this.ws.readyState == WebSocket.OPEN) { 
 | 
                            this.ws.send(message) 
 | 
                        } 
 | 
                    } 
 | 
                } 
 | 
            }) 
 | 
        </script> 
 | 
    </body> 
 | 
</html> 
 |