From 9fd5e6fbcb1d8badf1835478d862ac40bfb60f3c Mon Sep 17 00:00:00 2001
From: zzgtfwq <zzgtfwq>
Date: 星期三, 10 十二月 2025 16:59:09 +0800
Subject: [PATCH] #

---
 src/main/java/com/zy/core/thread/LedThread.java             |    1 
 src/main/java/com/zy/asrs/service/impl/MainServiceImpl.java |   42 +
 src/main/webapp/static/images/zy_logo_dark_color.png        |    0 
 src/main/webapp/static/wcs/js/testPosition.js               |  586 +++++++++++++++++++
 src/main/webapp/views/index.html                            |    1 
 src/main/webapp/views/indexT.html                           |   77 ++
 src/main/webapp/static/wcs/css/indexHCDD.css                |  467 +++++++++++++++
 src/main/resources/application.yml                          |    9 
 src/main/webapp/views/deviceOperate/wcsOperate.html         |  551 +++++++++---------
 src/main/webapp/views/indexTV.html                          |   10 
 10 files changed, 1,445 insertions(+), 299 deletions(-)

diff --git a/src/main/java/com/zy/asrs/service/impl/MainServiceImpl.java b/src/main/java/com/zy/asrs/service/impl/MainServiceImpl.java
index c285e6a..1a455ab 100644
--- a/src/main/java/com/zy/asrs/service/impl/MainServiceImpl.java
+++ b/src/main/java/com/zy/asrs/service/impl/MainServiceImpl.java
@@ -137,16 +137,6 @@
                 if (barcodeThread == null) {
                     continue;
                 }
-                String barcode = barcodeThread.getBarcode();
-
-                if (!Cools.isEmpty(barcode)) {
-//                    log.info("{}鍙锋潯鐮佹壂鎻忓櫒妫�娴嬫潯鐮佷俊鎭細{}", inSta.getBarcode(), barcode);
-                    if ("00000000".endsWith(barcode) || "NG".endsWith(barcode) || "NoRead".equals(barcode) || !CodeDetectionUtil.barcodeDetection(barcode)) {
-                        continue;
-                    }
-                } else {
-                    continue;
-                }
 
                 // 鑾峰彇鍏ュ簱绔欎俊鎭�
 //                SiemensDevpThread devpThread = (SiemensDevpThread) SlaveConnection.get(SlaveType.Devp, devp.getId());
@@ -156,6 +146,17 @@
                     continue;
                 } else {
                     staProtocol = staProtocol.clone();
+                }
+
+                String barcode = barcodeThread.getBarcode();
+
+                if (!Cools.isEmpty(barcode)) {
+//                    log.info("{}鍙锋潯鐮佹壂鎻忓櫒妫�娴嬫潯鐮佷俊鎭細{}", inSta.getBarcode(), barcode);
+                    if ("00000000".endsWith(barcode) || "NG".endsWith(barcode) || "NoRead".equals(barcode) || !CodeDetectionUtil.barcodeDetection(barcode)) {
+                        continue;
+                    }
+                } else {
+                    continue;
                 }
 
                 // 灏哄妫�娴嬪紓甯�
@@ -191,6 +192,15 @@
                 }
                 // 閫�鍥�
                 if (back) {
+                    barcodeThread.setBarcode("");
+                    // 鑾峰彇宸ヤ綔鍙�
+                    int workNo = commonService.getWorkNo(3);
+
+                    staProtocol.setWorkNo(workNo);
+                    staProtocol.setStaNo(inSta.getBackSta().shortValue());
+
+                    devpThread.setPakMk(staProtocol.getSiteId(), false,201);
+                    boolean result = MessageQueue.offer(SlaveType.Devp, devp.getId(), new Task(2, staProtocol));
                     // led 寮傚父鏄剧ず
                     LedErrorThreadUtil.ledErrorThread(errMsg,inSta.getLed(), LedErrorAreaType.FOUR_BARCODE.getDesc());
                     continue;
@@ -274,7 +284,9 @@
 //                            if(Cools.isEmpty(dto.getRgvNo()) || dto.getRgvNo() <= 0) {
 //                                staProtocol.setStaNo(607);//607
 //                            } else {//濡傛灉瀛樺湪RGV缂栧彿锛岃鏄庨渶瑕丷GV鎺ラ┏锛屽厛涓嬪彂浠诲姟鍒癛GV婧愮珯
-                            staProtocol.setStaNo(dto.getRgvSstaNo().shortValue());
+//                            staProtocol.setStaNo(dto.getRgvSstaNo().shortValue());
+                            staProtocol.setStaNo(wrkMast.getStaNoSou$().shortValue());
+
 //                            }
 
                             devpThread.setPakMk(staProtocol.getSiteId(), false,283);
@@ -284,6 +296,14 @@
                                 throw new CoolException("鏇存柊plc绔欑偣淇℃伅澶辫触");
                             }
                         } else {
+                            // 鑾峰彇宸ヤ綔鍙�
+                            int workNo = commonService.getWorkNo(3);
+
+                            staProtocol.setWorkNo(workNo);
+                            staProtocol.setStaNo(inSta.getBackSta().shortValue());
+
+                            devpThread.setPakMk(staProtocol.getSiteId(), false,201);
+                            boolean result = MessageQueue.offer(SlaveType.Devp, devp.getId(), new Task(2, staProtocol));
                             // led 寮傚父鏄剧ず
                             LedErrorThreadUtil.ledErrorThread("鍏ュ簱璇锋眰澶辫触"+jsonObject.getInteger("code"),inSta.getLed(), LedErrorAreaType.ONE_OTHER.getDesc());
                             log.error("璇锋眰鎺ュ彛澶辫触锛侊紒锛乽rl锛歿}锛況equest锛歿}锛況esponse锛歿}", wmsUrl + "/rpc/pakin/loc/v1", JSON.toJSONString(param), response);
diff --git a/src/main/java/com/zy/core/thread/LedThread.java b/src/main/java/com/zy/core/thread/LedThread.java
index ece3e06..14cbeaa 100644
--- a/src/main/java/com/zy/core/thread/LedThread.java
+++ b/src/main/java/com/zy/core/thread/LedThread.java
@@ -107,6 +107,7 @@
     private void reset() {
         commandList = null;
         stringBuffer.delete(0, stringBuffer.length());
+        this.errorMsg.delete(0, errorMsg.length());
     }
 
 
diff --git a/src/main/resources/application.yml b/src/main/resources/application.yml
index 26a3a8f..98d25d0 100644
--- a/src/main/resources/application.yml
+++ b/src/main/resources/application.yml
@@ -843,4 +843,11 @@
     ip: 10.10.10.214
     port: 5005
     devpPlcId: ${wcs-slave.devp[1].id}
-    staArr: 225
\ No newline at end of file
+    staArr: 225
+  # LED6
+  led[6]:
+    id: 7
+    ip: 10.10.10.208
+    port: 5005
+    devpPlcId: ${wcs-slave.devp[0].id}
+    staArr: 1111
\ No newline at end of file
diff --git a/src/main/webapp/static/images/zy_logo_dark_color.png b/src/main/webapp/static/images/zy_logo_dark_color.png
new file mode 100644
index 0000000..8278ca7
--- /dev/null
+++ b/src/main/webapp/static/images/zy_logo_dark_color.png
Binary files differ
diff --git a/src/main/webapp/static/wcs/css/indexHCDD.css b/src/main/webapp/static/wcs/css/indexHCDD.css
new file mode 100644
index 0000000..ba85409
--- /dev/null
+++ b/src/main/webapp/static/wcs/css/indexHCDD.css
@@ -0,0 +1,467 @@
+.system-control-panel {
+    position: absolute;
+    top: 15px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(240, 248, 255, 0.7);
+    border-radius: 16px;
+    padding: 8px 20px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(6px);
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    min-width: 260px;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.system-control-panel:hover {
+    background: rgba(240, 248, 255, 0.85);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+}
+
+.system-status {
+    display: flex;
+    align-items: center;
+    margin-right: 12px;
+}
+
+.status-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: 8px;
+}
+
+.status-running {
+    background-color: #13ce66;
+    box-shadow: 0 0 6px rgba(19, 206, 102, 0.8);
+    animation: pulse-green 2s infinite;
+}
+
+.status-stopped {
+    background-color: #A64036;
+    box-shadow: 0 0 6px rgba(166, 64, 54, 0.6);
+}
+
+.status-text {
+    font-weight: 600;
+    font-size: 13px;
+    color: #2c3e50;
+}
+
+.custom-switch {
+    display: flex;
+    align-items: center;
+}
+
+.el-switch {
+    transform: scale(0.9);
+}
+
+@keyframes pulse-green {
+    0% { box-shadow: 0 0 0 0 rgba(19, 206, 102, 0.5); }
+    70% { box-shadow: 0 0 0 6px rgba(19, 206, 102, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(19, 206, 102, 0); }
+}
+
+.license-info {
+    position: absolute;
+    top: 60px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(255, 255, 255, 0.85);
+    padding: 8px 18px;
+    border-radius: 6px;
+    font-size: 22px;
+    font-weight: 600;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    backdrop-filter: blur(4px);
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    transition: all 0.3s ease;
+    max-width: 80%;
+    text-align: center;
+}
+
+.license-info.normal {
+    color: #13ce66;
+    background: rgba(255, 255, 255, 0.85);
+    display: none; /* 澶т簬30澶╂椂闅愯棌 */
+}
+
+.license-info.warning {
+    color: #e6a23c;
+    background: rgba(255, 247, 230, 0.85);
+    border: 1px solid rgba(230, 162, 60, 0.3);
+}
+
+.license-info.expired {
+    color: #f56c6c;
+    background: rgba(255, 235, 235, 0.85);
+    border: 1px solid rgba(245, 108, 108, 0.3);
+    animation: pulse-red 2s infinite;
+}
+
+.license-icon {
+    margin-right: 8px;
+    font-size: 14px;
+}
+
+@keyframes pulse-red {
+    0% { box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.3); }
+    70% { box-shadow: 0 0 0 6px rgba(245, 108, 108, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(245, 108, 108, 0); }
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #a0d2eb;
+    color: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+
+    background: linear-gradient(135deg, #e6f7ff 0%, #f0f8ff 100%);
+    overflow: hidden;
+    position: relative;
+}
+.tech-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+.grid-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image:
+            linear-gradient(rgba(66, 134, 244, 0.08) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(66, 134, 244, 0.08) 1px, transparent 1px);
+    background-size: 40px 40px;
+    perspective: 1000px;
+    transform-style: preserve-3d;
+    transform: perspective(500px) rotateX(60deg);
+}
+
+.glow-effect {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background:
+            radial-gradient(circle at 20% 30%, rgba(41, 128, 185, 0.3) 0%, transparent 40%),
+            radial-gradient(circle at 80% 70%, rgba(46, 204, 113, 0.3) 0%, transparent 40%);
+    filter: blur(10px);
+}
+
+.particles-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+.particle {
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 50%;
+    animation: float 15s infinite ease-in-out;
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0) translateX(0);
+        opacity: 0.2;
+    }
+    50% {
+        transform: translateY(-20px) translateX(20px);
+        opacity: 0.6;
+    }
+}
+
+header {
+    background-color: #2196F3;
+    color: white;
+    padding: 15px 20px;
+    text-align: center;
+    font-size: 24px;
+    letter-spacing: 1px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+}
+.map {
+    position: relative;
+    width: 52vw;
+    height: 72vh;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.inner-ring, .outer-ring {
+    position: absolute;
+    border-radius: 50%;
+}
+.inner-ring {
+    width: 72vh;
+    height: 72vh;
+    border: 4px solid #00E676;
+    box-shadow: inset 0 0 30px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.5);
+}
+.outer-ring {
+    width: 80vh;
+    height: 80vh;
+    border: 4px solid #00E676;
+    box-shadow: inset 0 0 30px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.5);
+}
+.station {
+    position: absolute;
+    width: 20px;
+    height: 14px;
+    text-align: center;
+    line-height: 1.5; /* 璋冩暣琛岄珮涓庡瓧浣撳ぇ灏忕殑姣斿�� */
+    font-size: 10px; /* 璁剧疆鏇村皬鐨勫瓧浣� */
+    font-weight: bold;
+    transition: transform 0.3s ease;
+    background-color: #ab1839;
+    transform: scale(1); /* 鍙�夛細濡傛灉涓嶉渶瑕佹斁澶ф晥鏋� */
+}
+.bus {
+    font-size: 10px;
+    background-color: #2196F3;
+    /*border: 10px solid #ffffff;*/
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 15px;
+    font-weight: bold;
+    transition: transform 0.3s ease;
+    /* 3D鏁堟灉 */
+    transform: translateZ(0);
+    border: 10px solid rgba(255, 255, 255, 0.8);
+}
+
+@keyframes pulse {
+    0% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7); }
+    70% { box-shadow: 0 0 0 10px rgba(33, 150, 243, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
+}
+.station:hover, .bus:hover {
+    transform: scale(1.4);
+    z-index: 999;
+}
+
+.task-bar-left {
+    position: fixed;
+    top: 1%;
+    /*transform: translateY(-50%);*/
+    width: 25%; /* 璁剧疆瀹藉害 */
+    background-color: rgba(255, 255, 255, 0); /* 鍗婇�忔槑鑳屾櫙 */
+
+    border-radius: 5px;
+    padding: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0);
+    z-index: 1000; /* 纭繚鍦ㄥ叾浠栧厓绱犱箣涓� */
+}
+
+.task-bar-left1 {
+    position: fixed;
+    top: 8%;
+    /*transform: translateY(-50%);*/
+    width: 25%; /* 璁剧疆瀹藉害 */
+    background-color: rgba(255, 255, 255, 0); /* 鍗婇�忔槑鑳屾櫙 */
+
+    border-radius: 5px;
+    padding: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0);
+    z-index: 1000; /* 纭繚鍦ㄥ叾浠栧厓绱犱箣涓� */
+}
+
+.task-bar-right {
+    position: fixed;
+    top: 1%;
+    /*transform: translateY(-50%);*/
+    width: 25%; /* 璁剧疆瀹藉害 */
+    background-color: rgba(255, 255, 255, 0); /* 鍗婇�忔槑鑳屾櫙 */
+
+    border-radius: 5px;
+    padding: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0);
+    z-index: 1000; /* 纭繚鍦ㄥ叾浠栧厓绱犱箣涓� */
+}
+
+.task-bar-right1 {
+    position: fixed;
+    top: 5%;
+    /*transform: translateY(-50%);*/
+    width: 25%; /* 璁剧疆瀹藉害 */
+    background-color: rgba(255, 255, 255, 0);
+
+    border-radius: 5px;
+    padding: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0);
+    z-index: 1000;
+}
+
+.task-bar-div1 {
+    /*width: 100%; !* 璁剧疆瀹藉害 *!*/
+    background-color: rgba(255, 255, 255, 0.8);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.left-task-bar {
+    left: 20px;
+    /*bottom: 100px;*/
+}
+
+.right-task-bar {
+    /*bottom: 100px;*/
+    right: 20px;
+}
+
+.el-table .warning-row {
+    background: oldlace;
+}
+
+.el-table .success-row {
+    background: #f0f9eb;
+}
+.container {
+    width: 52vw;
+    height: 72vh;
+    position: absolute;
+    /*background: #8c939d;*/
+}
+.bus-station {
+    width: 100vh;
+    height: 72vh;
+    position: absolute;
+    display: flex;
+    /*background: #8c939d;*/
+}
+.bus-item-top {
+    background: red;
+    position: relative;
+    width: 40px;
+    height: 60px;
+    line-height: 60px;
+    top: 880px;
+    text-align: center;
+}
+.bus-item-left {
+    background: red;
+    position: relative;
+    width: 60px;
+    height: 40px;
+    line-height: 40px;
+    left: 1230px;
+    text-align: center;
+}
+.bus-item-left2 {
+    background: red;
+    position: relative;
+    width: 60px;
+    height: 40px;
+    line-height: 40px;
+    left: 1000px;
+    text-align: center;
+}
+
+.station {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+    line-height: 24px;
+    font-size: 10px;
+    font-weight: bold;
+    transition: all 0.3s ease;
+    background-color: #ab1839;
+    border-radius: 4px;
+    color: white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    transform: scale(1);
+    z-index: 10;
+    /* 宓屽鏁堟灉 */
+    border: 2px solid white;
+}
+
+.station::before {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    right: 3px;
+    bottom: 3px;
+    /*border: 1px solid rgba(255, 255, 255, 0.8);*/
+    border-radius: 2px;
+    pointer-events: none;
+}
+
+.station::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+}
+
+.station .corner {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 4px 4px 0;
+    border-color: transparent #ffffff transparent transparent;
+}
+
+.station .corner-tl {
+    top: -2px;
+    left: -2px;
+    transform: rotate(0deg);
+}
+
+.station .corner-tr {
+    top: -2px;
+    right: -2px;
+    transform: rotate(90deg);
+}
+
+.station .corner-bl {
+    bottom: -2px;
+    left: -2px;
+    transform: rotate(270deg);
+}
+
+.station .corner-br {
+    bottom: -2px;
+    right: -2px;
+    transform: rotate(180deg);
+}
+
+.station:hover {
+    transform: scale(1.6);
+    z-index: 999;
+    box-shadow: 0 0 15px rgba(171, 24, 57, 0.8);
+}
\ No newline at end of file
diff --git a/src/main/webapp/static/wcs/js/testPosition.js b/src/main/webapp/static/wcs/js/testPosition.js
new file mode 100644
index 0000000..df65b97
--- /dev/null
+++ b/src/main/webapp/static/wcs/js/testPosition.js
@@ -0,0 +1,586 @@
+var busPsto = [
+    {
+        index: 1,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1215,
+        valueY: 775
+    },
+    // 121, 132, 143, 154
+    {
+        index: 2,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1215,
+        valueY: 800
+    },
+    {
+        index: 3,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1210,
+        valueY: 820
+    },
+    {
+        index: 3,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 220,
+        valueY: 882
+    },
+    {
+        index: 4,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1200,
+        valueY: 840
+    },
+    {
+        index: 5,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1190,
+        valueY: 855
+    },
+    {
+        index: 6,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1155,
+        valueY: 875
+    },
+    {
+        index: 7,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1145,
+        valueY: 877
+    },
+    {
+        index: 8,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1135,
+        valueY: 878
+    },
+    {
+        index: 9,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1125,
+        valueY: 880
+    },
+    {
+        index: 10,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 882
+    },
+    {
+        index: 11,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 660,
+        valueY: 882
+    },
+    {
+        index: 12,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 715,
+        valueY: 882
+    },
+    {
+        index: 13,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 770,
+        valueY: 882
+    },
+    {
+        index: 14,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 825,
+        valueY: 882
+    },
+    {
+        index: 15,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 880,
+        valueY: 882
+    },
+    {
+        index: 16,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 935,
+        valueY: 882
+    },
+    {
+        index: 17,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 990,
+        valueY: 882
+    },
+    {
+        index: 18,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1215,
+        valueY: 620
+    },
+    {
+        index: 19,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1215,
+        valueY: 520
+    },
+    {
+        index: 20,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1215,
+        valueY: 430
+    },
+    {
+        index: 21,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1215,
+        valueY: 340
+    },
+    {
+        index: 22,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1215,
+        valueY: 250
+    },
+    {
+        index: 23,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 150
+    },
+    {
+        index: 24,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 200
+    },
+    {
+        index: 25,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 250
+    },
+    {
+        index: 26,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 300
+    },
+    {
+        index: 27,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 350
+    },
+    {
+        index: 28,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 400
+    },
+    {
+        index: 29,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 450
+    },
+    {
+        index: 30,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 500
+    },
+    {
+        index: 31,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 550
+    },
+    {
+        index: 32,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 600
+    },
+    {
+        index: 33,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 650
+    },
+]
+
+// 绌虹櫧鍖哄煙
+var busPsto1 = [
+
+    {
+        index: 1,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 65,
+        valueY: 882
+    },
+    {
+        index: 2,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 882
+    },
+    {
+        index: 3,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1185,
+        valueY: 850
+    },
+    {
+        index: 4,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1215,
+        valueY: 775
+    },
+    {
+        index: 5,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1215,
+        valueY: 125
+    },
+    {
+        index: 6,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1164,
+        valueY: 80
+    },
+    {
+        index: 7,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 125
+    },
+    {
+        index: 8,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 720
+    },
+    {
+        index: 9,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 720
+    },
+    {
+        index: 10,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1100,
+        valueY: 750
+    },
+    {
+        index: 11,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1075,
+        valueY: 775
+    },
+    {
+        index: 12,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 65,
+        valueY: 775
+    },
+    {
+        index: 13,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 25,
+        valueY: 830
+    },
+
+]
+
+var busPsto3 = [
+    {
+        index: 1,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 83,
+        valueY: 882
+    },
+    {
+        index: 2,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 138,
+        valueY: 882
+    },
+    {
+        index: 3,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 193,
+        valueY: 882
+    },
+    {
+        index: 4,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 248,
+        valueY: 882
+    },
+    {
+        index: 5,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 303,
+        valueY: 882
+    },
+    {
+        index: 6,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 358,
+        valueY: 882
+    },
+    {
+        index: 7,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 413,
+        valueY: 882
+    },
+    {
+        index: 8,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 468,
+        valueY: 882
+    },
+    {
+        index: 9,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 523,
+        valueY: 882
+    },
+    {
+        index: 10,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 578,
+        valueY: 882
+    },
+    {
+        index: 11,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 633,
+        valueY: 882
+    },
+    {
+        index: 12,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 688,
+        valueY: 882
+    },
+    {
+        index: 13,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 743,
+        valueY: 882
+    },
+    {
+        index: 14,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 798,
+        valueY: 882
+    },
+    {
+        index: 15,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 853,
+        valueY: 882
+    },
+    {
+        index: 16,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 908,
+        valueY: 882
+    },
+    {
+        index: 17,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 963,
+        valueY: 882
+    },
+    {
+        index: 18,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1018,
+        valueY: 882
+    },
+    {
+        index: 19,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1073,
+        valueY: 882
+    },
+    {
+        index: 20,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1215,
+        valueY: 565
+    },
+    {
+        index: 21,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1215,
+        valueY: 475
+    },
+    {
+        index: 22,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1215,
+        valueY: 385
+    },
+    {
+        index: 23,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1215,
+        valueY: 295
+    },
+    {
+        index: 24,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1215,
+        valueY: 205
+    },
+    {
+        index: 25,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 175
+    },
+    {
+        index: 26,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 225
+    },
+    {
+        index: 27,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 275
+    },
+    {
+        index: 28,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 325
+    },
+    {
+        index: 29,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 375
+    },
+    {
+        index: 30,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 425
+    },
+    {
+        index: 31,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 475
+    },
+    {
+        index: 32,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 525
+    },
+    {
+        index: 33,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 575
+    },
+    {
+        index: 34,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 625
+    },
+    {
+        index: 35,
+        modeColor: "#4B5CC4",
+        statusColor: "#1F3696",
+        valueX: 1115,
+        valueY: 675
+    },
+]
\ No newline at end of file
diff --git a/src/main/webapp/views/deviceOperate/wcsOperate.html b/src/main/webapp/views/deviceOperate/wcsOperate.html
index c97edfd..1b17c0b 100644
--- a/src/main/webapp/views/deviceOperate/wcsOperate.html
+++ b/src/main/webapp/views/deviceOperate/wcsOperate.html
@@ -2,249 +2,141 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>鐜舰绌挎杞︽櫤鑳界郴缁�</title>
+	<title>鏅鸿兘绯荤粺</title>
+	<link rel="icon" href="../../static/images/favicon.ico" type="image/x-icon">
+
 	<link rel="stylesheet" href="../../static/wcs/css/element.css">
+	<link rel="stylesheet" href="../../static/wcs/css/indexHCDD.css">
+	<link rel="stylesheet" href="../../static/wcs/css/element-ui.css">
 	<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
 	<script type="text/javascript" src="../../static/js/common.js"></script>
 	<script type="text/javascript" src="../../static/wcs/js/vue.min.js"></script>
 	<script type="text/javascript" src="../../static/wcs/js/element.js"></script>
+	<script type="text/javascript" src="../../static/wcs/js/testPosition.js"></script>
 	<style>
-		body {
-			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-			margin: 0;
-			padding: 0;
-			background-color: #a0d2eb;
-			color: #ffffff;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			height: 100vh;
-		}
-		header {
-			background-color: #2196F3;
-			color: white;
-			padding: 15px 20px;
-			text-align: center;
-			font-size: 24px;
-			letter-spacing: 1px;
-			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-		}
-		.map {
-			position: relative;
-			width: 52vw;
-			height: 80vh;
-			border-radius: 50%;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-		.inner-ring, .outer-ring {
-			position: absolute;
-			border-radius: 50%;
-		}
-		.inner-ring {
-			width: 72vh;
-			height: 72vh;
-			border: 4px solid #00E676;
-			box-shadow: inset 0 0 30px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.5);
-		}
-		.outer-ring {
-			width: 80vh;
-			height: 80vh;
-			border: 4px solid #00E676;
-			box-shadow: inset 0 0 30px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.5);
-		}
-		.station {
-			position: absolute;
-			width: 20px;
-			height: 14px;
-			text-align: center;
-			line-height: 1.5; /* 璋冩暣琛岄珮涓庡瓧浣撳ぇ灏忕殑姣斿�� */
-			font-size: 10px; /* 璁剧疆鏇村皬鐨勫瓧浣� */
-			font-weight: bold;
-			transition: transform 0.3s ease;
-			background-color: #ab1839;
-			transform: scale(1); /* 鍙�夛細濡傛灉涓嶉渶瑕佹斁澶ф晥鏋� */
-		}
-		.bus {
-			font-size: 10px;
-			background-color: #2196F3;
-			border: 10px solid #ffffff;
-			position: absolute;
-			width: 15px;
-			height: 15px;
-			border-radius: 50%;
-			text-align: center;
-			line-height: 15px;
-			font-weight: bold;
-			transition: transform 0.3s ease;
-		}
-		.station:hover, .bus:hover {
-			transform: scale(1.4);
-			z-index: 999;
+
+		.site-logo {
+			position: absolute; /* 浣跨敤缁濆瀹氫綅锛屽皢Logo鑴辩姝e父鏂囨。娴� */
+			top: 10px; /* 璺濈椤堕儴10鍍忕礌锛屽彲鏍规嵁闇�瑕佽皟鏁� */
+			left: 10px; /* 璺濈宸︿晶10鍍忕礌锛屽彲鏍规嵁闇�瑕佽皟鏁� */
+			padding: 0; /* 绉婚櫎鍘熸湁鐨勫唴杈硅窛 */
+			text-align: left; /* 灏嗗浘鐗囧榻愭柟寮忔敼涓哄乏瀵归綈 */
+			z-index: 1000; /* 纭繚Logo鏄剧ず鍦ㄦ渶涓婂眰锛岄伩鍏嶈鍏朵粬鍏冪礌閬尅 */
 		}
 
-		.task-bar-left {
-			position: fixed;
-			top: 1%;
-			/*transform: translateY(-50%);*/
-			width: 25%; /* 璁剧疆瀹藉害 */
-			background-color: rgba(255, 255, 255, 0); /* 鍗婇�忔槑鑳屾櫙 */
-
-			border-radius: 5px;
-			padding: 10px;
-			box-shadow: 0 0 10px rgba(0, 0, 0, 0);
-			z-index: 1000; /* 纭繚鍦ㄥ叾浠栧厓绱犱箣涓� */
-		}
-
-		.task-bar-left1 {
-			position: fixed;
-			top: 8%;
-			/*transform: translateY(-50%);*/
-			width: 25%; /* 璁剧疆瀹藉害 */
-			background-color: rgba(255, 255, 255, 0); /* 鍗婇�忔槑鑳屾櫙 */
-
-			border-radius: 5px;
-			padding: 10px;
-			box-shadow: 0 0 10px rgba(0, 0, 0, 0);
-			z-index: 1000; /* 纭繚鍦ㄥ叾浠栧厓绱犱箣涓� */
-		}
-
-		.task-bar-right {
-			position: fixed;
-			top: 1%;
-			/*transform: translateY(-50%);*/
-			width: 25%; /* 璁剧疆瀹藉害 */
-			background-color: rgba(255, 255, 255, 0); /* 鍗婇�忔槑鑳屾櫙 */
-
-			border-radius: 5px;
-			padding: 10px;
-			box-shadow: 0 0 10px rgba(0, 0, 0, 0);
-			z-index: 1000; /* 纭繚鍦ㄥ叾浠栧厓绱犱箣涓� */
-		}
-
-		.task-bar-right1 {
-			position: fixed;
-			top: 5%;
-			/*transform: translateY(-50%);*/
-			width: 25%; /* 璁剧疆瀹藉害 */
-			background-color: rgba(255, 255, 255, 0); /* 鍗婇�忔槑鑳屾櫙 */
-
-			border-radius: 5px;
-			padding: 10px;
-			box-shadow: 0 0 10px rgba(0, 0, 0, 0);
-			z-index: 1000; /* 纭繚鍦ㄥ叾浠栧厓绱犱箣涓� */
-		}
-
-		.task-bar-div1 {
-			/*width: 100%; !* 璁剧疆瀹藉害 *!*/
-			background-color: rgba(255, 255, 255, 0.8); /* 鍗婇�忔槑鑳屾櫙 */
-			box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-		}
-
-		.left-task-bar {
-			left: 20px; /* 璺濈宸﹁竟鐨勮窛绂� */
-			/*bottom: 100px;*/
-		}
-
-		.right-task-bar {
-			/*bottom: 100px;*/
-			right: 20px; /* 璺濈鍙宠竟鐨勮窛绂� */
-		}
-
-		.el-table .warning-row {
-			background: oldlace;
-		}
-
-		.el-table .success-row {
-			background: #f0f9eb;
-		}
-		.container {
-			width: 100vh;
-			height: 72vh;
-			position: absolute;
-			/*background: #8c939d;*/
-		}
-		.bus-station {
-			width: 100vh;
-			height: 72vh;
-			position: absolute;
-			display: flex;
-			/*background: #8c939d;*/
-		}
-		.bus-item-top {
-			background: red;
-			position: relative;
-			width: 40px;
-			height: 60px;
-			line-height: 60px;
-			top: 880px;
-			text-align: center;
-		}
-		.bus-item-left {
-			background: red;
-			position: relative;
-			width: 60px;
-			height: 40px;
-			line-height: 40px;
-			left: 1230px;
-			text-align: center;
-		}
-		.bus-item-left2 {
-			background: red;
-			position: relative;
-			width: 60px;
-			height: 40px;
-			line-height: 40px;
-			left: 1000px;
-			text-align: center;
+		.site-logo img {
+			max-width: 80%; /* Logo鏈�澶у搴︿负瀹瑰櫒瀹藉害鐨�80% */
+			height: auto; /* 楂樺害鑷姩锛屼繚鎸佹瘮渚� */
+			max-height: 60px; /* 璁剧疆Logo鏈�澶ч珮搴� */
 		}
 	</style>
 </head>
-<body>
-<!--<header>-->
-<!--    鐜舰绌挎杞︽櫤鑳界郴缁�-->
-<!--</header>-->
+<body >
+<div class="tech-background">
+	<div class="grid-overlay"></div>
+	<div class="glow-effect"></div>
+	<div class="particles-container" id="particles-container"></div>
+</div>
 <div id="app">
+	<!-- 娣诲姞Logo -->
+	<div class="site-logo">
+		<img src="../../static/images/zy_logo_dark_color.png" alt="鑷姩浠撳簱WCS绯荤粺 Logo">
+	</div>
 	<div  class="map">
-		<div v-if="licenseDayI <=30 ">
-			<div style="color: red">{{licenseDay}}</div>
+		<div class="system-control-panel">
+			<div class="system-status">
+				<div class="status-indicator" :class="valueSystem ? 'status-running' : 'status-stopped'"></div>
+				<span class="status-text">{{ valueSystem ? '绯荤粺杩愯涓�' : '绯荤粺宸插仠姝�' }}</span>
+			</div>
+			<div class="custom-switch">
+				<el-switch
+						v-model="valueSystem"
+						active-color="#13ce66"
+						inactive-color="#A64036"
+						@change='upDateValueSystem'>
+				</el-switch>
+			</div>
 		</div>
-		<svg class="container">
-			<path d="M 1200,750
-                        L 1200,100
-                        C 1200,100 1200,50 1150,50
-                        C 1150,50 1100,50 1100,100
-                        L 1100,700
-                        C 1100,700 1100,750 1050,750
-                        L 60,750
-                        C 60,750 10,750 10,800
-                        C 10,800 10,850 60,850
-                        L 1100,850
-                        C 1100,850 1200,850 1200,750
-"
-				  style="fill:none; stroke:blue; stroke-width:4;" />
+
+		<div class="license-info" :class="getLicenseClass()"  v-if="licenseDayI <=30">
+			<span class="license-icon">馃搫</span>
+			{{ licenseDay }}
+		</div>
+		<!--        <div class="inner-ring"></div>-->
+		<!--        <div class="outer-ring"></div>-->
+		<!--            <div v-for="track in energyGatheringRing" class="inner-ring" :style="{  borderColor: track.trackColor , boxShadow :  'inset 0 0 30px '+track.radiationColor+', 0 0 20px '+track.radiationColor}"></div>-->
+		<!--            <div v-for="track in energyGatheringRing" class="outer-ring" :style="{  borderColor: track.trackColor , boxShadow :  'inset 0 0 30px '+track.radiationColor+', 0 0 20px '+track.radiationColor}"></div>-->
+		<svg class="container"
+			 viewBox="0 0 1200 850"
+			 preserveAspectRatio="xMidYMid meet">
+			<path d="M 100,225 L 1100,225"
+				  style="fill:none; stroke:blue; stroke-width:3; stroke-dasharray:10,1;"/>
+			<path d="M 100,625 L 1100,625"
+				  style="fill:none; stroke:blue; stroke-width:3; stroke-dasharray:10,1;"/>
 		</svg>
-		<div v-for="station in tableDataDev" class="station" :style="{ top: station.valueY + 'px', left: station.valueX + 'px' }">{{ station.index }}</div>
-		<div>
-			<el-switch
-					style="display: block"
-					v-model="valueSystem"
-					active-color="#13ce66"
-					inactive-color="#A64036"
-					active-text="绯荤粺杩愯涓�..."
-					inactive-text="绯荤粺宸插仠姝�!"
-					@change='upDateValueSystem'>
-			</el-switch>
+
+		<div v-for="station in tableDataDev" class="station" :style="{
+                top: convertToCSSPosition2(station.index,station.valueX, station.valueY).y + 'px',
+                left: convertToCSSPosition2(station.index,station.valueX, station.valueY).x + 'px',
+                backgroundColor: station.modeColor}">
+			<div class="corner corner-tl"></div>
+			<div class="corner corner-tr"></div>
+			<div class="corner corner-bl"></div>
+			<div class="corner corner-br"></div>
+			{{ station.index }}
 		</div>
-		<div v-for="bus in tableDataRgv" class="bus" :style="{ top: bus.valueY + 'px', left: bus.valueX + 'px' , borderColor: bus.modeColor, backgroundColor: bus.statusColor}">{{ bus.index }}</div>
+
+		<!-- Buses -->
+		<div v-for="bus in tableDataRgv" class="bus" :style="{
+                top: convertToCSSPositionWithOffset(bus.valueX, bus.valueY).y + 'px',
+                left: convertToCSSPositionWithOffset(bus.valueX, bus.valueY).x + 'px',
+                animation: 'pulse ' +  bus.animation + 's infinite',
+                borderColor: bus.modeColor, backgroundColor: bus.statusColor}">{{ bus.index }}
+		</div>
+
 	</div>
 </div>
 
 <script>
+	// 鍦╒ue瀹炰緥澶栨坊鍔犵矑瀛愮敓鎴愬嚱鏁�
+	function createParticles() {
+		const container = document.getElementById('particles-container');
+		const particleCount = 30;
+
+		for (let i = 0; i < particleCount; i++) {
+			const particle = document.createElement('div');
+			particle.classList.add('particle');
+
+			// 闅忔満澶у皬鍜屼綅缃�
+			const size = Math.random() * 3 + 1;
+			const posX = Math.random() * 100;
+			const posY = Math.random() * 100;
+			const delay = Math.random() * 15;
+
+			particle.style.width = `${size}px`;
+			particle.style.height = `${size}px`;
+			particle.style.left = `${posX}vw`;
+			particle.style.top = `${posY}vh`;
+			particle.style.animationDelay = `${delay}s`;
+
+			container.appendChild(particle);
+		}
+	}
+
+	// 椤甸潰鍔犺浇瀹屾垚鍚庡垱寤虹矑瀛�
+	document.addEventListener('DOMContentLoaded', createParticles);
+	// 鍦╒ue瀹炰緥澶栬幏鍙朾ody灏哄
+	function getBodySize() {
+		return {
+			width: document.body.clientWidth,
+			height: document.body.clientHeight
+		};
+	}
 	var app = new Vue({
 		el: '#app',
 		data: {
+			containerSize: { width: 0, height: 0},
+			bodySize: { width: 0, height: 0 },
 			activeNames: ['1'],
 			valueLeft: '0',
 			valueLeft1: '0',
@@ -259,54 +151,31 @@
 			tableDataLeft: [],
 			tableDataLeft1: [],
 			tableDataRight: [],
-			tableDataRight1: [],
-			devpPos1:[
-				{dev_no: 116,pos:633980},
-				{dev_no: 117,pos:604043},
-				{dev_no: 118,pos:574323},
-				{dev_no: 119,pos:559534},
-				{dev_no: 120,pos:544682},
-				{dev_no: 121,pos:514912},
-				{dev_no: 122,pos:485227},
-				{dev_no: 123,pos:470367},
-				{dev_no: 124,pos:455514},
-				{dev_no: 125,pos:425768},
-				{dev_no: 126,pos:396268},
-				{dev_no: 127,pos:381106},
-				{dev_no: 128,pos:366311},
-				{dev_no: 129,pos:336638},
-				{dev_no: 130,pos:306820},
-				{dev_no: 131,pos:277067},
-				{dev_no: 132,pos:257418},
-				{dev_no: 133,pos:217730},
-			],
-			devpPos2:[
-				{dev_no: 112,pos:891000},
-				{dev_no: 113,pos:865000},
-				{dev_no: 114,pos:800000},
-				{dev_no: 115,pos:780000},
-			],
-			devpPos3:[
-				{dev_no: 101,pos:1269958},
-				{dev_no: 102,pos:1243454},
-				{dev_no: 103,pos:1229081},
-				{dev_no: 104,pos:1202099},
-				{dev_no: 105,pos:1187564},
-				{dev_no: 106,pos:1160630},
-				{dev_no: 107,pos:1146152},
-				{dev_no: 108,pos:1119463},
-				{dev_no: 109,pos:1105038},
-				{dev_no: 110,pos:1077961},
-				{dev_no: 111,pos:1063813},
-			],
+			tableDataRight1: []
 		},
 		created(){
 			this.init();
-			this.devpPos1.reverse()
-			this.devpPos3.reverse()
 		},
 		watch: {
 
+		},
+
+		// 鍦� mounted 涓垵濮嬪寲灏哄鍜岀洃鍚�
+		mounted() {
+			this.updateContainerSize();
+			this.updateBodySize();
+			window.addEventListener('resize', this.handleResize);
+		},
+		beforeDestroy() {
+			window.removeEventListener('resize', this.handleResize);
+		},
+		computed: {
+			mappedStations() {
+				return this.tableDataDev.map(station => ({
+					...station,
+					position: this.convertToCSSPosition2(station.index,station.valueX, station.valueY)
+				}));
+			}
 		},
 		methods: {
 			init(){
@@ -320,20 +189,133 @@
 				this.getValueSystem()
 				this.getLicenseDays()
 
+				// 楂橀鏇存柊锛氬皬杞﹀拰璁惧浣嶇疆锛�1.5绉掞級
 				setInterval(() => {
 					this.getTableDataRgv()
-					this.getTableDataDev()
-					this.getTableDataTrack()
+				}, 1000)
+
+				// 楂橀鏇存柊锛氬疄鏃朵换鍔″垪琛ㄧ瓑锛�2绉掞級
+				setInterval(() => {
 					this.getTableDataLeft()
-					this.getTableDataLeft1()
 					this.getTableDataRight()
+				}, 2000)
+
+				// 楂橀鏇存柊锛氬疄鏃剁珯鐐逛俊鎭瓑锛�3绉掞級
+				setInterval(() => {
+					this.getTableDataDev()
+				}, 3000)
+
+				// 浣庨鏇存柊锛氫换鍔″垪琛ㄧ瓑锛�10绉掞級
+				setInterval(() => {
+					this.getTableDataLeft1()
 					this.getTableDataRight1()
 					this.getValueSystem()
-					this.getLicenseDays()
+				}, 10*1000)
 
-				}, 1000)
+				// 浣庨鏇存柊锛氳鍙瘉淇℃伅锛�30绉掞級
+				setInterval(() => {
+					this.getLicenseDays()
+				}, 30000)
+
+				// 闈欐�佷綆棰戞洿鏂帮細PLC锛�1灏忔椂锛�
+				setInterval(() => {
+					this.getTableDataTrack()
+				}, 60*60*1000)
+			},
+			// 鑾峰彇瀹瑰櫒瀹為檯灏哄
+			updateContainerSize() {
+				const mapEl = this.$el.querySelector('.map');
+				this.containerSize = {
+					width: mapEl.clientWidth,
+					height: mapEl.clientHeight
+				};
+			},
+			convertToCSSPositionWithOffset(svgX, svgY, radius) {
+				const basePos = this.convertToCSSPosition(svgX, svgY);
+				return {
+					x: basePos.x-16.5,
+					y: basePos.y-16.5
+				};
+			},
+			// 鏇存柊body灏哄
+			updateBodySize() {
+				this.bodySize = getBodySize();
 			},
 
+			// 鍧愭爣杞崲鍑芥暟
+			convertToCSSPosition(svgX, svgY) {
+				const svgWidth = 1200;  // SVG 鍘熷瀹藉害
+				let svgWidthR = 0;  //
+				const svgHeight = 850; // SVG 鍘熷楂樺害
+				let svgHeightR = 0; //
+				if (svgX>svgWidth/2){
+					svgWidthR = (((svgX-svgWidth/2)/svgWidth) * this.containerSize.width) + this.bodySize.width/2 - this.bodySize.width*((1-0.52)/2);
+				} else {
+					svgWidthR = this.bodySize.width/2 - (((svgWidth/2 - svgX)/svgWidth) * this.containerSize.width)  - this.bodySize.width*((1-0.52)/2);
+				}
+				if (svgY>svgHeight/2){
+					svgHeightR = (((svgY-svgHeight/2)/svgHeight) * this.containerSize.height) + this.bodySize.height/2 - this.bodySize.height*((1-0.72)/2);
+				} else {
+					svgHeightR = this.bodySize.height/2 - (((svgHeight/2 - svgY)/svgHeight) * this.containerSize.height)  - this.bodySize.height*((1-0.72)/2);
+				}
+				return {
+					x: svgWidthR,
+					y: svgHeightR
+				};
+			},
+
+			// 鍧愭爣杞崲鍑芥暟
+			convertToCSSPosition2(devNo,svgX, svgY) {
+				const svgWidth = 1200;  // SVG 鍘熷瀹藉害
+				let svgWidthR = 0;  //
+				const svgHeight = 850; // SVG 鍘熷楂樺害
+				let svgHeightR = 0; //
+				if (svgX>svgWidth/2){
+					svgWidthR = (((svgX-svgWidth/2)/svgWidth) * this.containerSize.width) + this.bodySize.width/2 - this.bodySize.width*((1-0.52)/2);
+				} else {
+					svgWidthR = this.bodySize.width/2 - (((svgWidth/2 - svgX)/svgWidth) * this.containerSize.width)  - this.bodySize.width*((1-0.52)/2);
+				}
+				if (svgY>svgHeight/2){
+					svgHeightR = (((svgY-svgHeight/2)/svgHeight) * this.containerSize.height) + this.bodySize.height/2 - this.bodySize.height*((1-0.72)/2);
+				} else {
+					svgHeightR = this.bodySize.height/2 - (((svgHeight/2 - svgY)/svgHeight) * this.containerSize.height)  - this.bodySize.height*((1-0.72)/2);
+				}
+				svgHeightR = svgHeightR-60;
+				if(devNo>200){
+					if (devNo>216){
+						svgHeightR = svgHeightR+80;
+					}
+				} else {
+					if (devNo>116){
+						svgHeightR = svgHeightR+80;
+					} else {
+						if(devNo === 114 || devNo === 112 ){
+							svgWidthR = svgWidthR-20;
+						} else {
+							svgWidthR = svgWidthR+40;
+						}
+
+					}
+				}
+				if(devNo === 116){
+					svgHeightR = svgHeightR-35;
+				}
+				return {
+					x: svgWidthR,
+					y: svgHeightR
+				};
+			},
+
+			handleZoom(e) {
+				const scaleDelta = e.deltaY > 0 ? 0.9 : 1.1;
+				const currentScale = this.scale || 1;
+				const newScale = Math.max(0.5, Math.min(2, currentScale * scaleDelta));
+
+				// 搴旂敤缂╂斁
+				const svgEl = this.$el.querySelector('.container');
+				svgEl.style.transform = `scale(${newScale})`;
+				this.scale = newScale;
+			},
 			verifyPassword(callback) {
 				this.$prompt('璇疯緭鍏ョ鐞嗗憳瀵嗙爜: root', '楠岃瘉', {
 					confirmButtonText: '纭畾',
@@ -350,11 +332,9 @@
 				});
 			},
 			handleChange(val) {
-				console.log(val);
 				if (val.length === 0){
 					valueRight = '0';
 				} else {
-					console.log("2222"+val);
 
 					if (val.length >= 1){
 						this.handleChangeValueRight(1)
@@ -362,12 +342,9 @@
 				}
 			},
 			handleChange1(val) {
-				console.log(val);
 				if (val.length === 0){
 					valueRight1 = '0';
 				} else {
-					console.log("2222"+val);
-
 					if (val.length >= 1){
 						this.handleChangeValueRight1(1)
 					}
@@ -375,7 +352,7 @@
 			},
 			taskDelete(row) {
 				let that = this;
-				that.$confirm('纭瑕佸垹闄よ浠诲姟鍚�?', '鎻愮ず', {
+				that.$confirm('纭瑕佸垹闄よ璁惧鍚�?', '鎻愮ず', {
 					confirmButtonText: '纭畾',
 					cancelButtonText: '鍙栨秷',
 					type: 'warning'
@@ -455,8 +432,6 @@
 				});
 			},
 			handleChangeValueRight(val) {
-				console.log("33333"+val);
-
 				switch (val){
 					case 1:
 						valueRight = '100';
@@ -471,8 +446,6 @@
 				}
 			},
 			handleChangeValueRight1(val) {
-				console.log("33333"+val);
-
 				switch (val){
 					case 1:
 						valueRight1 = '100';
@@ -493,6 +466,17 @@
 					return 'success-row';
 				}
 				return '';
+			},
+
+			// 鑾峰彇璁稿彲璇佹牱寮忕被
+			getLicenseClass() {
+				if (this.licenseDayI > 30) {
+					return 'normal';
+				} else if (this.licenseDayI > 0) {
+					return 'warning';
+				} else {
+					return 'expired';
+				}
 			},
 			getLicenseDays(){
 				let that = this;
@@ -549,7 +533,9 @@
 						method: 'POST',
 						success: function (res) {
 							if (res.code === 200) {
-								that.valueSystem = res.data.status;
+								that.$message.success(`鐘舵�佹洿鏂版垚鍔焋);
+							} else {
+								that.$message.error('鐘舵�佹洿鏂板け璐�');
 							}
 						}
 					});
@@ -621,8 +607,6 @@
 			},
 			getTableDataRgv() {
 				let that = this;
-				// that.tableDataRgv = busPsto
-				// return
 				$.ajax({
 					url: baseUrl + "/rgv/ring/through/rgv/position/data",
 					headers: {
@@ -668,7 +652,12 @@
 						that.energyGatheringRing = res.data
 					}
 				});
-			}
+			},
+			// 澶勭悊绐楀彛澶у皬鍙樺寲
+			handleResize: _.debounce(function() {
+				this.updateContainerSize();
+				this.updateBodySize();
+			}, 100)
 		}
 	})
 
diff --git a/src/main/webapp/views/index.html b/src/main/webapp/views/index.html
index 18a8c03..f5e23af 100644
--- a/src/main/webapp/views/index.html
+++ b/src/main/webapp/views/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="utf-8">
     <title>鑷姩浠撳簱WCS绯荤粺</title>
+    <link rel="icon" href="../static/images/favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="../static/css/index.css">
     <link rel="stylesheet" href="../static/css/layx.min.css" type="text/css" />
     <script src="../static/js/jquery/jquery-3.3.1.min.js"></script>
diff --git a/src/main/webapp/views/indexT.html b/src/main/webapp/views/indexT.html
new file mode 100644
index 0000000..c30290f
--- /dev/null
+++ b/src/main/webapp/views/indexT.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>鑷姩浠撳簱WCS绯荤粺</title>
+    <link rel="icon" href="../static/images/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="../static/css/index.css">
+    <link rel="stylesheet" href="../static/css/layx.min.css" type="text/css" />
+    <script src="../static/js/jquery/jquery-3.3.1.min.js"></script>
+    <script src="../static/js/tools/layx.min.js"></script>
+    <style>
+        .layx-window.layx-skin-news .layx-control-bar {
+            background-color: #333333;
+        }
+        html{
+            /*transform: scale(1) translate(0,0);*/
+            transform: scale(0.5) translate(-50%,-50%);
+            height: 190%;
+            width: 190%;
+        }
+        .site-logo {
+            text-align: center; /* 璁㎜ogo姘村钩灞呬腑 */
+            padding: 15px 0; /* 鍦↙ogo涓婁笅娣诲姞鍐呰竟璺� */
+            border-bottom: 1px solid #eee; /* 鍙�夛細娣诲姞涓�鏉″垎闅旂嚎 */
+        }
+
+        .site-logo img {
+            max-width: 80%; /* Logo鏈�澶у搴︿负瀹瑰櫒瀹藉害鐨�80% */
+            height: auto; /* 楂樺害鑷姩锛屼繚鎸佹瘮渚� */
+            max-height: 60px; /* 璁剧疆Logo鏈�澶ч珮搴� */
+        }
+    </style>
+</head>
+<body>
+<!-- 娣诲姞Logo -->
+<div class="site-logo">
+    <img src="../static/images/zy_logo_dark_color.png" alt="鑷姩浠撳簱WCS绯荤粺 Logo">
+</div>
+<!-- 瀵艰埅鏍� -->
+<!--		<div class="nav">-->
+<!--			<li class="right">娉ㄩ攢<a id="about" class="nav-unselect" onclick="logout()" href="#"></a></li>-->
+<!--		</div>-->
+<div class="sidebar">
+    <div class="nav">
+        <ul class="cl-effect-4">
+            <li><a id="console" onclick="nav(this.id)" class="nav-select" href="#">涓绘帶鍥�</a></li>
+            <li><a id="pipeline" onclick="nav(this.id)" class="nav-unselect" href="#">杈撻�佽澶�</a></li>
+            <li><a id="crn" onclick="nav(this.id)" class="nav-unselect" href="#">鍫嗗灈鏈�</a></li>
+        </ul>
+    </div>
+</div>
+<!--<div style="z-index: 999; position: absolute; top: 250px; left: 900px; width: 200px; height: 200px; opacity: 0.5;background-color: #0000FF">-->
+
+<!--</div>-->
+<!-- 涓讳綋鍐呭 -->
+<iframe id="content" src="console.html"></iframe>
+<!--<footer class="footer">-->
+<!--    Copyright 漏 2023 All Rights Reserved. <a href="http://www.zoneyung.com" target="_blank">娴欐睙涓壃绔嬪簱鎶�鏈湁闄愬叕鍙�</a>  淇濈暀鎵�鏈夋潈鍒�-->
+<!--</footer>-->
+</body>
+<script>
+    // 瀵艰埅鏍�
+    function nav(id) {
+        $('.nav-select').attr("class", "nav-unselect");
+        $('#'+id).attr("class", "nav-select");
+        $('#content').attr("src", id+".html");
+    }
+
+    // function logout() {
+    //     localStorage.removeItem("token");
+    //     window.location.href = baseUrl + "/login";
+    // }
+
+    // 绯荤粺杩愯鐘舵��
+    var systemRunning = true;
+</script>
+</html>
diff --git a/src/main/webapp/views/indexTV.html b/src/main/webapp/views/indexTV.html
index 711a467..5b14184 100644
--- a/src/main/webapp/views/indexTV.html
+++ b/src/main/webapp/views/indexTV.html
@@ -17,11 +17,9 @@
             height: 190%;
             width: 190%;
         }
-
     </style>
 </head>
 <body>
-
 <!-- 瀵艰埅鏍� -->
 <!--		<div class="nav">-->
 <!--			<li class="right">娉ㄩ攢<a id="about" class="nav-unselect" onclick="logout()" href="#"></a></li>-->
@@ -52,10 +50,10 @@
         $('#content').attr("src", id+".html");
     }
 
-    function logout() {
-        localStorage.removeItem("token");
-        window.location.href = baseUrl + "/login";
-    }
+    // function logout() {
+    //     localStorage.removeItem("token");
+    //     window.location.href = baseUrl + "/login";
+    // }
 
     // 绯荤粺杩愯鐘舵��
     var systemRunning = true;

--
Gitblit v1.9.1