From 195b15baf2d6d7cfdb0d928586602f8760863e04 Mon Sep 17 00:00:00 2001
From: Junjie <DELL@qq.com>
Date: 星期二, 02 十二月 2025 15:48:11 +0800
Subject: [PATCH] #

---
 src/main/webapp/views/watch/console2.html |  491 ++++++++++++++++++++++++++++++++----------------------
 1 files changed, 292 insertions(+), 199 deletions(-)

diff --git a/src/main/webapp/views/watch/console2.html b/src/main/webapp/views/watch/console2.html
index 5657f1c..50082dd 100644
--- a/src/main/webapp/views/watch/console2.html
+++ b/src/main/webapp/views/watch/console2.html
@@ -86,6 +86,7 @@
     let pixiCrnMap = new Map();
     let pixiShelfMap = new Map();
     let pixiTrackMap = new Map();
+    let pixiDevpTextureMap = new Map();
     let crnList = [];
     let objectsContainer;
     let objectsContainer2;
@@ -101,15 +102,12 @@
         map: [],
         currentLev: 1,
         floorList: [], //褰撳墠椤圭洰妤煎眰
-        currentLevShuttleList: [],//褰撳墠妤煎眰鍥涘悜绌挎杞﹂泦鍚�
-        shuttleColorList: [],//鍥涘悜绌挎杞﹂鑹查泦鍚�
         drawer: false,
         drawerLocNo: false,
         drawerLocNoData: null,
         drawerLocDetls: [],
         mapFps: 0,
         currentLevStaList: [],//褰撳墠妤煎眰绔欑偣list
-        reloadSta: true,
         drawerSta: false,
         drawerStaData: null,
       },
@@ -149,13 +147,10 @@
             that.getMap(this.currentLev)
           }, 1000);
 
-          // this.consoleInterval = setInterval(() => {
-          //   this.getMap(this.currentLev) //鑾峰彇瀹炴椂鍦板浘鏁版嵁
-          //   this.getShuttleStateInfo() //鑾峰彇鍥涘悜绌挎杞︿俊鎭�
-          //   this.getLiftStateInfo() //鑾峰彇鎻愬崌鏈轰俊鎭�
-          //   this.getSiteInfo() //鑾峰彇杈撻�佺珯鐐规暟鎹�
-          //   // this.getCodeData()//鑾峰彇鏉$爜
-          // }, 1000)
+          this.consoleInterval = setInterval(() => {
+            this.getCrnInfo() //鑾峰彇鍫嗗灈鏈烘暟鎹�
+            this.getSiteInfo() //鑾峰彇杈撻�佺珯鐐规暟鎹�
+          }, 1000)
 
         },
         initLev() {
@@ -202,7 +197,6 @@
         changeFloor(lev) {
           this.currentLev = lev
           this.currentLevShuttleList = []
-          this.reloadSta = true
           this.getMap(lev)
 
           //娓呯┖棰勮璺緞
@@ -227,7 +221,7 @@
           // 浠嶨raphics瀵硅薄鍒涘缓涓�涓汗鐞�
           // graphicsShelf = pixiApp.renderer.generateTexture(getContainer('shelf'));
           // graphicsDevp = pixiApp.renderer.generateTexture(getContainer('devp'));
-          graphicsCrn = createCrnTexture(25,25);
+          // graphicsCrn = createCrnTexture(40,40);
           graphicsCrnTrack = createTrackTexture(25,25);
 
           // 鍒涘缓涓�涓鍣ㄦ潵绠$悊澶ф壒閲忕殑鏄剧ず瀵硅薄
@@ -292,29 +286,16 @@
           pixiApp.view.addEventListener('wheel', (event) => {
             event.stopPropagation();
             event.preventDefault();
-            // 鍥犱负鐢诲竷鏄厖婊¤绐楃殑锛屾墍浠lientX绛変簬mouse point鍦╮enderer涓婄殑x鍧愭爣
-            const globalPos = [event.clientX, event.clientY];
-            const delta = event.deltaY;
+            const sx = event.clientX;
+            const sy = event.clientY;
             const oldZoom = pixiApp.stage.scale.x;
+            const delta = event.deltaY;
             let newZoom = oldZoom * 0.999 ** delta;
-
-            // const oldStageMatrix = app.stage.localTransform.clone();
-            // const oldStagePos = oldStageMatrix.applyInverse(pointerGlobalPos);
-            const oldStagePos = globalPos;
-            const dx = oldStagePos[0] * oldZoom - oldStagePos[0] * newZoom;
-            const dy = oldStagePos[1] * oldZoom - oldStagePos[1] * newZoom;
-
-            pixiApp.stage.setTransform(
-              pixiApp.stage.position.x + dx,
-              pixiApp.stage.position.y + dy,
-              newZoom,
-              newZoom,
-              0,
-              0,
-              0,
-              0,
-              0
-            );
+            const worldX = (sx - pixiApp.stage.position.x) / oldZoom;
+            const worldY = (sy - pixiApp.stage.position.y) / oldZoom;
+            const newPosX = sx - worldX * newZoom;
+            const newPosY = sy - worldY * newZoom;
+            pixiApp.stage.setTransform(newPosX, newPosY, newZoom, newZoom, 0, 0, 0, 0, 0);
 
           });
           //*******************缂╂斁鐢诲竷*******************
@@ -352,7 +333,7 @@
 
           map.forEach((item, index) => {
             for(let idx = 0;idx < item.length;idx++){
-              let val = item[idx];
+              let val = item[idx]
               let cellWidth = val.cellWidth / 40;
               let cellHeight = val.cellHeight / 8;
 
@@ -378,12 +359,11 @@
               if(val.colSpan  > 1) {
                 for(let i = 1;i < val.colSpan;i++){
                   let nextMerge = map[index][idx + i];
-                  if(nextMerge.type != 'merge'){
-                    continue;
-                  }
+                  if (!nextMerge) { continue; }
                   
                   let mergeCellWidth = nextMerge.cellWidth / 40;
                   mergeWidth += mergeCellWidth;
+                  nextMerge.isMergedPart = true;
                 }
                 
                 val.width = mergeWidth;
@@ -401,13 +381,31 @@
 
           map.forEach((row, rowIndex) => {
             let xCursor = 0;
+            let anchorX = 0;
             for (let colIndex = 0; colIndex < row.length; colIndex++) {
               let val = row[colIndex];
+
               let cellWidth = val.width;
               let cellHeight = val.height;
 
+              if (val.isMergedPart) {
+                val.posX = anchorX;
+                val.posY = yOffsets[rowIndex];
+                continue;
+              }
+
               val.posX = xCursor;
               val.posY = yOffsets[rowIndex];
+              anchorX = xCursor;
+
+              if (val.colSpan > 1) {
+                for (let i = 1; i < val.colSpan; i++) {
+                  const next = row[colIndex + i];
+                  if (!next) { break; }
+                  next.posX = anchorX;
+                  next.posY = yOffsets[rowIndex];
+                }
+              }
 
               xCursor += cellWidth;
             }
@@ -448,31 +446,57 @@
           });
 
           crnList.forEach((item) => {
-              let sprite = new PIXI.Sprite(graphicsCrn);
-              const deviceNo = getDeviceNo(item.value);
-              const taskNo = getTaskNo(item.value);
-              const style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 12, fill: '#ffffff', stroke: '#000000', strokeThickness: 2 });
-              const txt = taskNo > 0 ? (deviceNo + "(" + taskNo + ")") : String(deviceNo);
-              const text = new PIXI.Text(txt, style);
-              text.anchor.set(0.5);
-              text.position.set(sprite.width / 2, sprite.height / 2);
-              sprite.addChild(text);
-              sprite.textObj = text;
-              sprite.zIndex = 1;
+            if(graphicsCrn == null) {
+              graphicsCrn = createCrnTexture(item.width * 0.9,item.height * 0.9);
+            }
+            let sprite = new PIXI.Sprite(graphicsCrn);
+            const deviceNo = getDeviceNo(item.value);
+            const taskNo = getTaskNo(item.value);
+            const style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 12, fill: '#ffffff', stroke: '#000000', strokeThickness: 2 });
+            const txt = taskNo > 0 ? (deviceNo + "(" + taskNo + ")") : String(deviceNo);
+            const text = new PIXI.Text(txt, style);
+            text.anchor.set(0.5);
+            text.position.set(sprite.width / 2, sprite.height / 2);
+            sprite.addChild(text);
+            sprite.textObj = text;
+            sprite.zIndex = 1;
 
-              sprite.position.set(item.posX, item.posY);
-              sprite.interactive = true; // 蹇呴』瑕佽缃墠鑳芥帴鏀朵簨浠�
-              sprite.buttonMode = true; // 璁╁厜鏍囧湪hover鏃跺彉涓烘墜鍨嬫寚閽�
+            sprite.position.set(item.posX, item.posY);
+            sprite.interactive = true; // 蹇呴』瑕佽缃墠鑳芥帴鏀朵簨浠�
+            sprite.buttonMode = true; // 璁╁厜鏍囧湪hover鏃跺彉涓烘墜鍨嬫寚閽�
 
-              pixiCrnMap.set(parseInt(deviceNo), sprite);
-              objectsContainer2.addChild(sprite);
+            let rowIndexForCrn = 0;
+            for (let r = 0; r < map.length; r++) {
+              if (map[r].length > 0) {
+                const rowY = map[r][0].posY;
+                if (Math.abs(rowY - item.posY) < 0.5) {
+                  rowIndexForCrn = r;
+                  break;
+                }
+              }
+            }
+            sprite.rowIndex = rowIndexForCrn;
+
+            pixiCrnMap.set(parseInt(deviceNo), sprite);
+            objectsContainer2.addChild(sprite);
           })
           
 
-          //瑙嗚灞呬腑
-          let containerWidth = (pixiApp.view.width - objectsContainer.width) / 2;
-          let containerHeight = (pixiApp.view.height - objectsContainer.height) / 2;
-          pixiApp.stage.position.set(containerWidth, containerHeight);
+          const b1 = objectsContainer.getLocalBounds();
+          const b2 = objectsContainer2.getLocalBounds();
+          const minX = Math.min(b1.x, b2.x);
+          const minY = Math.min(b1.y, b2.y);
+          const maxX = Math.max(b1.x + b1.width, b2.x + b2.width);
+          const maxY = Math.max(b1.y + b1.height, b2.y + b2.height);
+          const contentW = Math.max(0, maxX - minX);
+          const contentH = Math.max(0, maxY - minY);
+          const vw = pixiApp.view.width;
+          const vh = pixiApp.view.height;
+          let scale = Math.min(vw / contentW, vh / contentH) * 0.95;
+          if (!isFinite(scale) || scale <= 0) { scale = 1; }
+          const posX = (vw - contentW * scale) / 2 - minX * scale;
+          const posY = (vh - contentH * scale) / 2 - minY * scale;
+          pixiApp.stage.setTransform(posX, posY, scale, scale, 0, 0, 0, 0, 0);
 
           this.map = map;
         },
@@ -521,34 +545,6 @@
             locSts: this.map[x][y].locSts, row: this.map[x][y].row, bay: this.map[x][y].bay, lev: this.currentLev
           };
         },
-        checkStaInListDiff(sta, list) {
-          //妫�娴嬬珯鐐规槸鍚﹀湪闆嗗悎涓湁鍙樺姩
-          if (list.length == 0) {
-            return false;//闆嗗悎涓虹┖
-          }
-
-          let tmp = null;
-          for (var i = 0; i < list.length; i++) {
-            if (sta.siteId == list[i].siteId) {
-              tmp = list[i];//鎵惧埌鐩稿悓绔欑偣
-              break
-            }
-          }
-
-          if (tmp == null) {
-            return false;//娌℃湁鎵惧埌鐩稿悓绔欑偣
-          }
-
-          if (sta.siteStatus != tmp.siteStatus) {
-            return false;//绔欑偣鐘舵�佷笉鐩稿悓
-          }
-
-          if (sta.workNo != tmp.workNo) {
-            return false;//绔欑偣宸ヤ綔鍙蜂笉鐩稿悓
-          }
-
-          return true;//鏃犲彉鍖�
-        },
         webSocketOnOpen(e) {
           console.log("open");
         },
@@ -579,118 +575,49 @@
             ws.send(message)
           }
         },
-        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})`;
-        },
-        updateShuttleXY(item) {
-          const shuttle = pixiShuttleMap.get(item.shuttleNo);
-          if (shuttle.updateMoveStatus) {//鍔ㄧ敾鎵ц瀹屾垚鎵嶅彲缁х画鎵ц鍔ㄧ敾
-            shuttle.updateMoveStatus = false;//鍔ㄧ敾鎵ц涓�
-            // 璁$畻涓ょ偣涔嬮棿鐨勮窛绂�1
-            const distance = Math.sqrt(Math.pow((item.wcsPoint.x * width) - shuttle.x, 2) + Math.pow((item.wcsPoint.y * height) - shuttle.y, 2));
-            gsap.killTweensOf(shuttle); // 鏉�姝绘墍鏈夐拡瀵�".class"鐨勫姩鐢�
-            gsap.to(shuttle, {
-              x: (item.wcsPoint.y - 0) * width, // 鐩爣浣嶇疆
-              y: (item.wcsPoint.x - 1) * height, // 鐩爣浣嶇疆
-              duration: 0.2, // 鍔ㄧ敾鎸佺画鏃堕棿锛堢锛�
-              ease: "power1.inOut", // 缂撳姩绫诲瀷
-              onComplete: () => {
-                shuttle.updateMoveStatus = true;//鍔ㄧ敾鎵ц瀹屾垚
-              }
-            });
-          }
-        },
-        getSiteInfo() {
-          //鑾峰彇杈撻�佺珯鐐规暟鎹�
-          this.sendWs(JSON.stringify({
-            "url": "/console/latest/data/site",
-            "data": {}
-          }))
-        },
         setSiteInfo(res) {
-          // var test = "{\"msg\":\"鎿嶄綔鎴愬姛\",\"code\":200,\"data\":[{\"siteId\":\"300\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"301\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"302\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"303\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"304\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"305\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"306\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"307\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"308\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"309\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"310\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"311\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"312\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"313\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"314\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"315\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"316\",\"siteStatus\":\"site-auto-run\",\"workNo\":0},{\"siteId\":\"317\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"318\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"319\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"320\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"321\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"322\",\"siteStatus\":\"site-auto-run\",\"workNo\":0},{\"siteId\":\"323\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"324\",\"siteStatus\":\"site-auto-run\",\"workNo\":0},{\"siteId\":\"325\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"326\",\"siteStatus\":\"site-auto-id\",\"workNo\":5451},{\"siteId\":\"327\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"200\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"328\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"201\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"329\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"202\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"330\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"203\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"331\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"204\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"332\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"205\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"333\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"334\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"335\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"336\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"337\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"338\",\"siteStatus\":\"site-auto-run\",\"workNo\":0},{\"siteId\":\"339\",\"siteStatus\":\"site-auto-run-id\",\"workNo\":5447},{\"siteId\":\"340\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"341\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"342\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"343\",\"siteStatus\":\"site-auto-run\",\"workNo\":0},{\"siteId\":\"344\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"345\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"346\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"100\",\"siteStatus\":\"site-auto-run-id\",\"workNo\":8851},{\"siteId\":\"101\",\"siteStatus\":\"site-auto-run-id\",\"workNo\":8855},{\"siteId\":\"102\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"103\",\"siteStatus\":\"site-auto\",\"workNo\":0},{\"siteId\":\"104\",\"siteStatus\":\"site-auto-run\",\"workNo\":0},{\"siteId\":\"105\",\"siteStatus\":\"site-auto\",\"workNo\":0}]}";
-          // res = JSON.parse(test)
-          //鑾峰彇杈撻�佺珯鐐规暟鎹�
-          if (res.code === 200) {
-            var sites = res.data;
-            if (this.reloadSta && pixiStaMap.size > 0) {
-              //閲嶆柊娓叉煋鎵�鏈夎緭閫佺珯鐐�
-              this.currentLevStaList = sites;
-              this.reloadSta = false;
-              sites.forEach((item, index) => {
-                let sta = pixiStaMap.get(parseInt(item.siteId));
-                if (sta != undefined) {
-                  if (item.workNo > 0) {
-                    sta.textObj.text = item.siteId + "(" + item.workNo + ")";
-                  }
-
-                  //鍒涘缓閬僵灞�
-                  if (item.siteStatus == "site-auto") {
-                    //鑷姩鐘舵�侊紝绉婚櫎閬僵灞�
-                    if (sta.statusObj != null) {
-                      objectsContainer.removeChild(sta.statusObj)
-                      sta.statusObj = null;
-                    }
-                  } else if (item.siteStatus == "site-auto-run" || item.siteStatus == "site-auto-run-id") {
-                    //鑷姩鏈夌墿
-                    let graphics = getGraphics(0xfa51f6, width, height, sta.x, sta.y);
-                    graphics.addChild(sta.textObj);//缁ф壙鏂囧瓧淇℃伅
-                    sta.statusObj = graphics;
-                    objectsContainer.addChild(graphics);
-                  } else if (item.siteStatus == "site-unauto") {
-                    //闈炶嚜鍔�
-                    let graphics = getGraphics(0xb8b8b8, width, height, sta.x, sta.y);
-                    graphics.addChild(sta.textObj);//缁ф壙鏂囧瓧淇℃伅
-                    sta.statusObj = graphics;
-                    objectsContainer.addChild(graphics);
-                  }
-                }
-              });
-            } else {
-              //妫�娴嬩笉鐩稿悓绔欑偣杩涜灞�閮ㄦ洿鏂�
-              this.currentLevStaList.forEach((item, index) => {
-                let result = this.checkStaInListDiff(item, sites);
-                if (!result) {
-                  //闇�瑕佹洿鏂�
-                  let sta = pixiStaMap.get(parseInt(item.siteId));
-                  if (item.workNo > 0) {
-                    sta.textObj.text = item.siteId + "(" + item.workNo + ")";
-                  } else {
-                    sta.textObj.text = item.siteId;
-                  }
-
-                  //鍒涘缓閬僵灞�
-                  if (item.siteStatus == "site-auto") {
-                    //鑷姩鐘舵�侊紝绉婚櫎閬僵灞�
-                    if (sta.statusObj != null) {
-                      objectsContainer.removeChild(sta.statusObj)
-                      sta.statusObj = null;
-                    }
-                  } else if (item.siteStatus == "site-auto-run") {
-                    //鑷姩鏈夌墿
-                    let graphics = getGraphics(0xfa51f6, width, height, sta.x, sta.y);
-                    graphics.addChild(sta.textObj);//缁ф壙鏂囧瓧淇℃伅
-                    sta.statusObj = graphics;
-                    objectsContainer.addChild(graphics);
-                  } else if (item.siteStatus == "site-unauto") {
-                    //闈炶嚜鍔�
-                    let graphics = getGraphics(0xb8b8b8, width, height, sta.x, sta.y);
-                    graphics.addChild(sta.textObj);//缁ф壙鏂囧瓧淇℃伅
-                    sta.statusObj = graphics;
-                    objectsContainer.addChild(graphics);
-                  }
-                }
-              });
-            }
-          } else if (res.code === 403) {
-            parent.location.href = baseUrl + "/login";
-          } else {
-            console.log(res.msg);
+          let sites = Array.isArray(res) ? res : (res && res.code === 200 ? res.data : null);
+          if (res && !Array.isArray(res)) {
+            if (res.code === 403) { parent.location.href = baseUrl + "/login"; return; }
+            if (res.code !== 200) { console.log(res.msg); return; }
           }
+          if (!sites) { return; }
+          this.currentLevStaList = sites;
+          sites.forEach((item) => {
+            let id = item.siteId != null ? item.siteId : item.stationId;
+            let status = item.siteStatus != null ? item.siteStatus : item.stationStatus;
+            let workNo = item.workNo != null ? item.workNo : item.taskNo;
+            if (id == null) { return; }
+            let sta = pixiStaMap.get(parseInt(id));
+            if (sta == undefined) { return; }
+            if (workNo != null && workNo > 0) {
+              sta.textObj.text = id + "(" + workNo + ")";
+            } else {
+              sta.textObj.text = String(id);
+            }
+            if (sta.statusObj) {
+              objectsContainer.removeChild(sta.statusObj);
+              sta.statusObj = null;
+              if (sta.textObj.parent !== sta) {
+                sta.addChild(sta.textObj);
+                sta.textObj.position.set(sta.width / 2, sta.height / 2);
+              }
+            }
+
+            if (status === "site-auto") {
+              updateColor(sta, 0x78ff81);
+            } else if (status === "site-auto-run" || status === "site-auto-run-id") {
+              updateColor(sta, 0xfa51f6);
+            } else if (status === "site-unauto") {
+              updateColor(sta, 0xb8b8b8);
+            } else if (status === "machine-pakin") {
+              updateColor(sta, 0x30bffc);
+            } else if (status === "machine-pakout") {
+              updateColor(sta, 0x97b400);
+            } else {
+              updateColor(sta, 0xb8b8b8);
+            }
+          });
         },
         openDrawerSta(data) {
           let that = this
@@ -712,6 +639,98 @@
               }
             }
           })
+        },
+        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;
+                for (var i = 0; i < crns.length; i++) {
+                  const id = parseInt(crns[i].crnId);
+                  const sprite = pixiCrnMap.get(id);
+                  if (!sprite) { continue; }
+
+                  const taskNo = crns[i].taskNo;
+                  if (taskNo != null && taskNo > 0) {
+                    sprite.textObj.text = id + "(" + taskNo + ")";
+                  } else {
+                    sprite.textObj.text = String(id);
+                  }
+
+                  const status = crns[i].crnStatus;
+                  const statusColor = getCrnStatusColor(status);
+                  updateCrnTextureColor(sprite, statusColor);
+
+                  let bay = parseInt(crns[i].bay, 10);
+                  if (isNaN(bay) || bay < 1 || bay === -2) {
+                    bay = 1;
+                  }
+
+                  let rowIndex = (sprite.rowIndex != null) ? sprite.rowIndex : -1;
+                  if (rowIndex === -1) {
+                    for (let r = 0; r < that.map.length; r++) {
+                      if (that.map[r].length > 0) {
+                        const rowY = that.map[r][0].posY;
+                        if (Math.abs(rowY - sprite.y) < 0.5) {
+                          rowIndex = r;
+                          break;
+                        }
+                      }
+                    }
+                    if (rowIndex === -1) { rowIndex = 0; }
+                  }
+
+                  let targetCell = null;
+                  let crnCount = 0;
+                  for (let c = 0; c < that.map[rowIndex].length; c++) {
+                    const cell = that.map[rowIndex][c];
+                    if (cell && cell.type === 'crn') {
+                      crnCount++;
+                      if (crnCount === bay) {
+                        targetCell = cell;
+                        break;
+                      }
+                    }
+                  }
+                  if (!targetCell) {
+                    for (let c = that.map[rowIndex].length - 1; c >= 0; c--) {
+                      const cell = that.map[rowIndex][c];
+                      if (cell && cell.type === 'crn') {
+                        targetCell = cell;
+                        break;
+                      }
+                    }
+                  }
+                  if (!targetCell) { continue; }
+
+                  const targetX = targetCell.posX + (targetCell.width - sprite.width) / 2;
+
+                  gsap.killTweensOf(sprite);
+                  gsap.to(sprite, { x: targetX, duration: 0.5, ease: "power1.inOut" });
+                }
+              } else if (res.code === 403) {
+                parent.location.href = baseUrl + "/login";
+              } else {
+                console.log(res.msg);
+              }
+            }
+          });
+        },
+        getSiteInfo() {
+          let that = this;
+          $.ajax({
+            url: baseUrl + "/console/latest/data/station",
+            headers: {'token': localStorage.getItem('token')},
+            method: 'POST',
+            success: function (res) {
+              that.setSiteInfo(res);
+            }
+          });
         },
       }
     })
@@ -741,7 +760,7 @@
       let graphics = new PIXI.Graphics();
       let drawBorder = true;
       if (type == 'shelf') {
-        graphics.beginFill(0x55aaff);
+        graphics.beginFill(0xb6e2e2);
       } else if (type == 'devp') {
         graphics.beginFill(0x00ff7f);
         graphics.visible = true;
@@ -822,6 +841,67 @@
       return rt;
     }
 
+    function createCrnTextureColoredDevice(deviceWidth, height, color) {
+      const g = new PIXI.Graphics();
+      const yTop = Math.round(height * 0.1);
+      g.beginFill(0x999999);
+      g.drawRect(2, yTop, 3, height - yTop - 2);
+      g.drawRect(deviceWidth - 5, yTop, 3, height - yTop - 2);
+      g.endFill();
+      g.beginFill(0x999999);
+      g.drawRect(0, yTop, deviceWidth, 3);
+      g.endFill();
+      const cabW = Math.round(deviceWidth * 0.68);
+      const cabH = Math.round(height * 0.38);
+      const cabX = Math.round((deviceWidth - cabW) / 2);
+      const cabY = Math.round(height * 0.52 - cabH / 2);
+      g.beginFill(color);
+      g.drawRect(cabX, cabY, cabW, cabH);
+      g.endFill();
+      const winW = Math.round(cabW * 0.6);
+      const winH = Math.round(cabH * 0.45);
+      const winX = cabX + Math.round((cabW - winW) / 2);
+      const winY = cabY + Math.round((cabH - winH) / 2);
+      g.beginFill(0xd0e8ff);
+      g.drawRect(winX, winY, winW, winH);
+      g.endFill();
+      const forkW = Math.round(deviceWidth * 0.8);
+      const forkH = Math.max(2, Math.round(height * 0.08));
+      const forkX = Math.round((deviceWidth - forkW) / 2);
+      const forkY = cabY + cabH;
+      g.beginFill(0x666666);
+      g.drawRect(forkX, forkY, forkW, forkH);
+      g.endFill();
+      const rt = PIXI.RenderTexture.create({ width: deviceWidth, height: height });
+      pixiApp.renderer.render(g, rt);
+      return rt;
+    }
+
+    function createDevpTextureColoredRect(width, height, color) {
+      const g = new PIXI.Graphics();
+      g.beginFill(color);
+      g.lineStyle(1, 0xffffff, 1);
+      g.drawRect(0, 0, width, height);
+      g.endFill();
+      const rt = PIXI.RenderTexture.create({ width: width, height: height });
+      pixiApp.renderer.render(g, rt);
+      return rt;
+    }
+
+    function updateCrnTextureColor(sprite, color) {
+      const tex = createCrnTextureColoredDevice(sprite.width, sprite.height, color);
+      sprite.texture = tex;
+    }
+
+    function getCrnStatusColor(status) {
+      if (status === "machine-auto") { return 0x21BA45; }
+      if (status === "machine-un-auto") { return 0xBBBBBB; }
+      if (status === "machine-error") { return 0xDB2828; }
+      if (status === "machine-pakin") { return 0x30bffc; }
+      if (status === "machine-pakout") { return 0x97b400; }
+      return 0xBBBBBB;
+    }
+
     function getGraphics(color, width, height, x, y) {
       let graphics = new PIXI.Graphics();
       graphics.beginFill(color);
@@ -841,6 +921,7 @@
         const graphics = getContainer('devp', item.width, item.height);
         const texture = pixiApp.renderer.generateTexture(graphics);
         sprite = new PIXI.Sprite(texture);
+        sprite._kind = 'devp';
         let siteId = getStationId(value);
         if (siteId === -1) {
           siteId = item.data;
@@ -880,9 +961,21 @@
      * 鏇存柊棰滆壊
      */
     function updateColor(sprite, color) {
-      // graphics.clear()
-      // graphics.beginFill(color);
-      // graphics.drawRect(0, 0, width, height);
+      if (sprite && sprite._kind === 'devp') {
+        const key = sprite.width + '-' + sprite.height + '-' + color;
+        let texture = pixiDevpTextureMap.get(key);
+        if (!texture) {
+          texture = createDevpTextureColoredRect(Math.round(sprite.width), Math.round(sprite.height), color);
+          pixiDevpTextureMap.set(key, texture);
+        }
+        const textObj = sprite.textObj;
+        sprite.texture = texture;
+        if (textObj) {
+          if (textObj.parent !== sprite) { sprite.addChild(textObj); }
+          textObj.position.set(sprite.width / 2, sprite.height / 2);
+        }
+        return;
+      }
       sprite.tint = color;
     }
 

--
Gitblit v1.9.1