#

Junjie

6 天以前 32004d6bb7db528c151cca5bd78c4e557171a9ee

#

 src/main/java/com/zy/asrs/ws/ConsoleWebSocket.java

@@ -1,6 +1,14 @@
package com.zy.asrs.ws;


import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.core.common.R;
import com.core.common.SpringUtils;
import com.zy.asrs.controller.CrnController;
import com.zy.asrs.controller.RgvController;
import com.zy.asrs.controller.BasMapController;
import com.zy.asrs.controller.ConsoleController;
import lombok.Data;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
@@ -64,7 +72,56 @@
     */
    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
//        log.info("收到来自连接：" + sessionId + "的信息:" + message);
        Object resObj = null;
        String url = null;
        try {
            JSONObject req = JSON.parseObject(message);
            url = req.getString("url");
            if (url == null) {
                return;
            }
            if (url.startsWith("/basMap/lev/") && url.endsWith("/auth")) {
                String[] segs = url.split("/");
                Integer lev = null;
                for (int i = 0; i < segs.length; i++) {
                    if ("lev".equals(segs[i]) && i + 1 < segs.length) {
                        try {
                            lev = Integer.parseInt(segs[i + 1]);
                        } catch (Exception ignore) {}
                        break;
                    }
                }
                BasMapController basMapController = SpringUtils.getBean(BasMapController.class);
                R r = basMapController.getByLev(lev);
                resObj = r;
            } else if ("/console/latest/data/station".equals(url)) {
                ConsoleController consoleController = SpringUtils.getBean(ConsoleController.class);
                resObj = consoleController.stationLatestData();
            } else if ("/console/latest/data/crn".equals(url)) {
                ConsoleController consoleController = SpringUtils.getBean(ConsoleController.class);
                resObj = consoleController.crnLatestData();
            } else if ("/console/latest/data/rgv".equals(url)) {
                ConsoleController consoleController = SpringUtils.getBean(ConsoleController.class);
                resObj = consoleController.rgvLatestData();
            } else if ("/crn/table/crn/state".equals(url)) {
                resObj = SpringUtils.getBean(CrnController.class).crnStateTable();
            } else if ("/rgv/table/rgv/state".equals(url)) {
                resObj = SpringUtils.getBean(RgvController.class).rgvStateTable();
            }
        } catch (Exception e) {
            R err = R.error(e.getMessage());
            JSONObject out = new JSONObject();
            out.put("url", "error");
            out.put("data", JSON.toJSONString(err));
            this.sendMessage(out.toJSONString());
            return;
        }
        if (resObj != null && url != null) {
            JSONObject out = new JSONObject();
            out.put("url", url);
            out.put("data", JSON.toJSONString(resObj));
            this.sendMessage(out.toJSONString());
        }
    }

    /**

 src/main/webapp/components/DevpCard.js

@@ -110,15 +110,15 @@
      this.currentPage = 1;
    },
    getDevpStateInfo() {
      let that = this;
      $.ajax({
        url: baseUrl + "/console/latest/data/station",
        headers: {
          token: localStorage.getItem("token"),
      if (this.$root.sendWs) {
        this.$root.sendWs(JSON.stringify({
          "url": "/console/latest/data/station",
          "data": {}
        }));
      }
        },
        method: "post",
        success: (res) => {
          // 堆垛机信息表获取
    setStationList(res) {
      let that = this;
          if (res.code == 200) {
            let list = res.data;

@@ -135,8 +135,6 @@
              that.currentPage = 1;
            }
          }
        },
      });
    },
    openControl() {
      this.showControl = !this.showControl;

 src/main/webapp/components/MapCanvas.js

@@ -13,6 +13,7 @@
      map: [],
      currentLev: 1,
      mapFps: 0,
      ws: null,
      pixiApp: null,
      pixiStageList: [],
      pixiStaMap: new Map(),
@@ -43,7 +44,16 @@
  mounted() {
    this.currentLev = this.lev || 1;
    this.createMap();
    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;
    
    setTimeout(() => {
    this.getMap(this.currentLev);
    }, 1000);

    this.timer = setInterval(() => {
      this.getCrnInfo();
      this.getSiteInfo();
@@ -187,16 +197,7 @@
      }
    },
    getMap() {
      $.ajax({
        url: baseUrl + "/basMap/lev/" + this.currentLev + "/auth",
        headers: { 'token': localStorage.getItem('token') },
        method: 'get',
        success: (res) => {
          const data = res.data;
          const mapData = JSON.parse(data);
          this.createMapData(mapData);
        }
      })
      this.sendWs(JSON.stringify({ url: "/basMap/lev/" + this.currentLev + "/auth", data: {} }));
    },
    changeFloor(lev) {
      this.currentLev = lev;
@@ -488,13 +489,19 @@
    },
    getCrnInfo() {
      if (this.isSwitchingFloor) { return; }
      $.ajax({
        url: baseUrl + "/console/latest/data/crn",
        headers: { 'token': localStorage.getItem('token') },
        method: 'POST',
        success: (res) => {
          if (res.code === 200) {
            var crns = res.data;
      this.sendWs(JSON.stringify({ url: "/console/latest/data/crn", data: {} }));
    },
    getSiteInfo() {
      if (this.isSwitchingFloor) { return; }
      this.sendWs(JSON.stringify({ url: "/console/latest/data/station", data: {} }));
    },
    getRgvInfo() {
      if (this.isSwitchingFloor) { return; }
      this.sendWs(JSON.stringify({ url: "/console/latest/data/rgv", data: {} }));
    },
    setCrnInfo(res) {
      let crns = Array.isArray(res) ? res : (res && res.code === 200 ? res.data : null);
      if (!crns) { return; }
            for (var i = 0; i < crns.length; i++) {
              const id = parseInt(crns[i].crnId);
              const sprite = this.pixiCrnMap.get(id);
@@ -541,29 +548,11 @@
                sprite.x = targetX;
              }
            }
          }
          this.scheduleAdjustLabels();
        }
      });
    },
    getSiteInfo() {
      if (this.isSwitchingFloor) { return; }
      $.ajax({
        url: baseUrl + "/console/latest/data/station",
        headers: { 'token': localStorage.getItem('token') },
        method: 'POST',
        success: (res) => { this.setSiteInfo(res); }
      });
    },
    getRgvInfo() {
      if (this.isSwitchingFloor) { return; }
      $.ajax({
        url: baseUrl + "/console/latest/data/rgv",
        headers: { 'token': localStorage.getItem('token') },
        method: 'POST',
        success: (res) => {
          if (res.code === 200) {
            const rgvs = res.data;
    setRgvInfo(res) {
      let rgvs = Array.isArray(res) ? res : (res && res.code === 200 ? res.data : null);
      if (!rgvs) { return; }
            for (let i = 0; i < rgvs.length; i++) {
              const id = parseInt(rgvs[i].rgvNo, 10);
              const sprite = this.pixiRgvMap.get(id);
@@ -601,10 +590,33 @@
                sprite.x = targetX;
              }
            }
          }
          this.scheduleAdjustLabels();
    },
    setMap(res) {
      this.createMapData(JSON.parse(res.data));
    },
    webSocketOnOpen(e) {
    },
    webSocketOnError(e) {
    },
    webSocketOnMessage(e) {
      const result = JSON.parse(e.data);
      if (result.url === "/console/latest/data/station" || result.url === "/console/latest/data/site") {
        this.setSiteInfo(JSON.parse(result.data));
      } else if (result.url === "/console/latest/data/crn") {
        this.setCrnInfo(JSON.parse(result.data));
      } else if (result.url === "/console/latest/data/rgv") {
        this.setRgvInfo(JSON.parse(result.data));
      } else if (typeof result.url === "string" && result.url.indexOf("/basMap/lev/") === 0) {
        this.setMap(JSON.parse(result.data));
        }
      });
    },
    webSocketClose(e) {
    },
    sendWs(message) {
      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(message);
      }
    },
    createShelfSprite(width, height) {
      let idx = width + "-" + height;

 src/main/webapp/components/WatchCrnCard.js

@@ -123,15 +123,15 @@
      this.currentPage = 1;
    },
    getCrnStateInfo() {
      let that = this;
      $.ajax({
        url: baseUrl + "/crn/table/crn/state",
        headers: {
          token: localStorage.getItem("token"),
      if (this.$root.sendWs) {
        this.$root.sendWs(JSON.stringify({
          "url": "/crn/table/crn/state",
          "data": {}
        }));
      }
        },
        method: "post",
        success: (res) => {
          // 堆垛机信息表获取
    setCrnList(res) {
      let that = this;
          if (res.code == 200) {
            let list = res.data;

@@ -148,8 +148,6 @@
              that.currentPage = 1;
            }
          }
        },
      });
    },
    openControl() {
      this.showControl = !this.showControl;

 src/main/webapp/components/WatchRgvCard.js

@@ -112,14 +112,15 @@
      this.currentPage = 1;
    },
    getRgvStateInfo() {
      let that = this;
      $.ajax({
        url: baseUrl + "/rgv/table/rgv/state",
        headers: {
          token: localStorage.getItem("token"),
      if (this.$root.sendWs) {
        this.$root.sendWs(JSON.stringify({
          "url": "/rgv/table/rgv/state",
          "data": {}
        }));
      }
        },
        method: "post",
        success: (res) => {
    setRgvList(res) {
      let that = this;
          if (res.code == 200) {
            let list = res.data || [];
            if (that.searchRgvNo == "") {
@@ -135,8 +136,6 @@
              that.currentPage = 1;
            }
          }
        },
      });
    },
    openControl() {
      this.showControl = !this.showControl;

 src/main/webapp/views/watch/console.html

@@ -21,13 +21,13 @@
                <div style="width: 20%;height: 60vh;margin-right: 20px;margin-top: 30px;">
                    <el-tabs type="border-card" v-model="activateCard" @tab-click="handleCardClick">
                        <el-tab-pane label="堆垛机" name="crn">
                            <watch-crn-card :param="crnParam"></watch-crn-card>
                            <watch-crn-card ref="watchCrnCard" :param="crnParam"></watch-crn-card>
                        </el-tab-pane>
                        <el-tab-pane label="输送站" name="devp">
                            <devp-card :param="devpParam"></devp-card>
                            <devp-card ref="devpCard" :param="devpParam"></devp-card>
                        </el-tab-pane>
                        <el-tab-pane label="RGV" name="rgv">
                            <watch-rgv-card :param="rgvParam"></watch-rgv-card>
                            <watch-rgv-card ref="watchRgvCard" :param="rgvParam"></watch-rgv-card>
                        </el-tab-pane>
                        <!-- <el-tab-pane label="地图配置" name="mapSetting">
                            <map-setting-card :param="mapSettingParam"></map-setting-card>
@@ -52,6 +52,7 @@
        <script src="../../components/WatchRgvCard.js"></script>
        <script src="../../components/MapCanvas.js"></script>
        <script>
            let ws;
            var app = new Vue({
                el: '#app',
                data: {
@@ -85,13 +86,59 @@

                },
                methods: {
                    sendWs(data) {
                        if (ws && ws.readyState === WebSocket.OPEN) {
                            ws.send(data);
                        }
                    },
                    webSocketOnOpen() {
                        console.log("WebSocket连接成功");
                    },
                    webSocketOnError() {
                        console.log("WebSocket连接发生错误");
                    },
                    webSocketClose() {
                        console.log("WebSocket连接关闭");
                    },
                    webSocketOnMessage(e) {
                        const result = JSON.parse(e.data);
                        if (result.url == "/crn/table/crn/state") {
                             if(this.$refs.watchCrnCard) {
                                 this.$refs.watchCrnCard.setCrnList(JSON.parse(result.data));
                             }
                        } else if (result.url == "/console/latest/data/station") {
                             if(this.$refs.devpCard) {
                                 this.$refs.devpCard.setStationList(JSON.parse(result.data));
                             }
                        } else if (result.url == "/rgv/table/rgv/state") {
                             if(this.$refs.watchRgvCard) {
                                 this.$refs.watchRgvCard.setRgvList(JSON.parse(result.data));
                             }
                        } else if (result.url == "/basMap/lev/" + this.currentLev + "/auth") {
                            // 地图数据
                             let res = JSON.parse(result.data);
                             if (res.code === 200) {
                                 this.map = res.data;
                             }
                        }
                    },
                    getMap() {
                        this.sendWs(JSON.stringify({
                            "url": "/basMap/lev/" + this.currentLev + "/auth",
                            "data": {}
                        }))
                    },
                    init() {
                        this.getMap()
                        ws = new WebSocket("ws://" + window.location.host + baseUrl + "/console/websocket");
                        ws.onopen = this.webSocketOnOpen;
                        ws.onerror = this.webSocketOnError;
                        ws.onmessage = this.webSocketOnMessage;
                        ws.onclose = this.webSocketClose;

                        this.getSystemRunningStatus() //获取系统运行状态
                        this.getLevList() //获取地图层级列表
                        this.getLocMastData() //获取库位数据
                    },
					
                    getLevList() {
                        let that = this;
                        $.ajax({
@@ -103,39 +150,6 @@
                            success: (res) => {
                                let data = res.data;
                                that.levList = data;
                            }
                        })
                    },
                    //获取地图数据
                    getMap() {
                        let that = this
                        let rowPx = 35;
                        let colPx = 35;

                        $.ajax({
                            url: baseUrl + "/basMap/lev/" + this.currentLev + "/auth",
                            headers: {
                                'token': localStorage.getItem('token')
                            },
                            method: "get",
                            success: (res) => {
                                let data = res.data;
                                let mapData = JSON.parse(data)
                                mapData.forEach((row) => {
                                    let shelfIdx = 1;
                                    row.forEach((col) => {
                                        if (col.type == 'shelf') {
                                            col.shelfIdx = shelfIdx;
                                            shelfIdx++;
                                        }

                                        col.rowPx = (col.rowSpan * rowPx) + "px";
                                        col.colPx = (col.colSpan * colPx) + "px";

                                        col.width = (col.cellWidth / 30) + "px";
                                    })
                                })
                                that.map = mapData;
                            }
                        })
                    },
@@ -155,160 +169,6 @@
                    openSite(id) {
                        this.devpParam.stationId = id;
                        this.activateCard = 'devp';
                    },
                    getSiteInfo() {
                        //获取输送站点数据
                        $.ajax({
                            url: baseUrl + "/console/latest/data/station",
                            headers: {'token': localStorage.getItem('token')},
                            method: 'POST',
                            success: function (res) {
                                if (res.code === 200) {
                                    var sites = res.data;
                                    for (var i = 0; i < sites.length; i++){
                                        var siteEl = $("#site-"+sites[i].stationId);
                                        siteEl.attr("class", "site " + sites[i].stationStatus);
                                        if (sites[i].taskNo != null && sites[i].taskNo>0) {
                                            siteEl.html(sites[i].stationId + "[" + sites[i].taskNo + "]");
                                        } else {
                                            siteEl.html(sites[i].stationId);
                                        }
                                    }
                                } else if (res.code === 403) {
                                    parent.location.href = baseUrl + "/login";
                                } else {
                                    console.log(res.msg);
                                }
                            }
                        });
                    },
                    getCrnInfo() {
                        let that = this
                        //获取堆垛机数据
                        $.ajax({
                            url: baseUrl + "/console/latest/data/crn",
                            headers: {'token': localStorage.getItem('token')},
                            method: 'POST',
                            success: function (res) {
                                if (res.code === 200) {
                                    var crns = res.data;

                                    let crnList = []
                                    for (var i = 0; i < crns.length; i++) {
                                        var crnEl = $("#crn-" + crns[i].crnId);
                                        crnEl.attr("class", "crn-item " + crns[i].crnStatus);

                                        if (crns[i].taskNo != null && crns[i].taskNo > 0) {
                                            crnEl.html(crns[i].crnId + "[" + crns[i].taskNo + "]");
                                        } else {
                                            crnEl.html(crns[i].crnId);
                                        }

                                        let bay = parseInt(crns[i].bay, 10);
                                        if (isNaN(bay) || bay < 1 || bay === -2) {
                                            bay = 1;
                                        }

                                        // 根据列值定位到当前行的目标单元格，避免随机偏移导致的误差
                                        let targetCell = that.getCrnTargetCell(crnEl, bay);
                                        if (!targetCell || targetCell.length === 0) {
                                            continue;
                                        }
                                        if (targetCell.offset() == undefined) {
                                            continue;
                                        }
                                        if (crnEl.offsetParent().offset() == undefined) {
                                            continue;
                                        }

                                        let parentLeft = crnEl.offsetParent().offset().left;
                                        let cellLeft = targetCell.offset().left - parentLeft;
                                        let offsetWithinCell = (targetCell.outerWidth() - crnEl.outerWidth()) / 2;
                                        let zoomFactor = that.mapSettingParam.zoom ? (that.mapSettingParam.zoom / 100) : 1;
                                        if (zoomFactor <= 0) { zoomFactor = 1; }

                                        let finalOffset = (cellLeft + offsetWithinCell) / zoomFactor;
                                        if(finalOffset < 0) {
                                            finalOffset = 0;
                                        }
										
                                        crnEl.animate({left: finalOffset + 'px'}, 500);

                                        crnList.push({
                                            crnNo: crns[i].crnId,
                                            crnStatus: crns[i].crnStatus
                                        })
                                    }
                                } else if (res.code === 403) {
                                    parent.location.href = baseUrl + "/login";
                                } else {
                                    console.log(res.msg);
                                }
                            }
                        });
                    },
                    getRgvInfo() {
                        let that = this
                        //获取RGV数据
                        $.ajax({
                            url: baseUrl + "/console/latest/data/rgv",
                            headers: {'token': localStorage.getItem('token')},
                            method: 'POST',
                            success: function (res) {
                                if (res.code === 200) {
                                    var rgvs = res.data;

                                    if (that.rgvPosition.length == 0) {
                                        let position = []
                                        for (var i = 0; i < rgvs.length; i++) {
                                            var rgvEl = $("#rgv-" + rgvs[i].rgvNo);
                                            if(rgvEl.offset() == undefined) {
                                                continue;
                                            }
                                            position.push({
                                                id: rgvs[i].rgvNo,
                                                trackSiteNo: rgvs[i].trackSiteNo,
                                                initLeft: rgvEl.offset().left
                                            })
                                        }
                                        that.rgvPosition = position
                                        return;
                                    }

                                    for (var i = 0; i < rgvs.length; i++) {
                                        var rgvEl = $("#rgv-" + rgvs[i].rgvNo);
                                        if (rgvs[i].rgvStatus == 'idle') {
                                            rgvEl.attr("class", "rgv-item");
                                        }else if (rgvs[i].rgvStatus == 'working') {
                                            rgvEl.attr("class", "rgv-item machine-working");
                                        }else if (rgvs[i].rgvStatus == 'waiting') {
                                            rgvEl.attr("class", "rgv-item machine-working");
                                        }else {
                                            rgvEl.attr("class", "rgv-item machine-un-auto");
                                        }

                                        let trackSiteNo = rgvs[i].trackSiteNo;
                                        let trackSiteEl = $("#rgvTrackSiteNo-" + trackSiteNo);

                                        if(rgvEl.offsetParent().offset() == undefined) {
                                            continue;
                                        }
										
                                        let parentLeft = rgvEl.offsetParent().offset().left;
                                        let targetPosition = trackSiteEl.parent().parent().offset().left - parentLeft;
                                        let rgvPosition = rgvEl.position().left;
                                        let zoomFactor = that.mapSettingParam.zoom ? (that.mapSettingParam.zoom / 100) : 1;
                                        if (zoomFactor <= 0) { zoomFactor = 1; }
                                        let finalOffset = targetPosition / zoomFactor;
                                        rgvEl.animate({left: finalOffset + "px"}, 500);
                                    }
                                } else if (res.code === 403) {
                                    parent.location.href = baseUrl + "/login";
                                } else {
                                    console.log(res.msg);
                                }
                            }
                        });
                    },
                    systemSwitch() {
                        // 系统开关
@@ -511,7 +371,7 @@
                            return locInfo.row1 + '-' + locInfo.bay1;
                        }
                        return '';
                    }
                    },
                }
            })
            </script>