2D监控

ruoyi-admin/src/main/java/com/ruoyi/RuoYiApplication.java

@@ -21,15 +21,6 @@ public class RuoYiApplication
     {
         // System.setProperty("spring.devtools.restart.enabled", "false");
         SpringApplication.run(RuoYiApplication.class, args);
-        System.out.println("(♥◠‿◠)ﾉﾞ  若依启动成功   ლ(´ڡ`ლ)ﾞ  \n" +
+        System.out.println("(♥◠‿◠)ﾉﾞ  福来瑞达WCS系统启动成功   ლ(´ڡ`ლ)ﾞ ");
-                " .-------.       ____     __        \n" +
-                " |  _ _   \\      \\   \\   /  /    \n" +
-                " | ( ' )  |       \\  _. /  '       \n" +
-                " |(_ o _) /        _( )_ .'         \n" +
-                " | (_,_).' __  ___(_ o _)'          \n" +
-                " |  |\\ \\  |  ||   |(_,_)'         \n" +
-                " |  | \\ `'   /|   `-'  /           \n" +
-                " |  |  \\    /  \\      /           \n" +
-                " ''-'   `'-'    `-..-'              ");
     }
 }

ruoyi-admin/src/main/java/com/ruoyi/largeScreen/controller/LargeScreenDdjController.java

@@ -0,0 +1,37 @@
+package com.ruoyi.largeScreen.controller;
+
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import com.ruoyi.common.annotation.Anonymous;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import com.ruoyi.common.core.domain.AjaxResult;
+import com.ruoyi.largeScreen.service.ILargeScreenDdjService;
+
+/**
+ * 大屏堆垛机数据Controller
+ * 
+ * @author ruoyi
+ */
+@RestController
+@RequestMapping("/largeScreen/ddj")
+public class LargeScreenDdjController {
+    @Autowired
+    private ILargeScreenDdjService largeScreenDdjService;
+
+    /**
+     * 查询堆垛机数据列表
+     */
+    @GetMapping("/list")
+    public AjaxResult list() {
+        Map<String, Object> result = new HashMap<>();
+        result.put("msg", "操作成功");
+        result.put("code", 0);
+        result.put("data", largeScreenDdjService.queryDdjList());
+        return AjaxResult.success(result);
+    }
+}

ruoyi-admin/src/main/java/com/ruoyi/largeScreen/service/ILargeScreenDdjService.java

@@ -0,0 +1,18 @@
+package com.ruoyi.largeScreen.service;
+
+import java.util.List;
+import java.util.Map;
+
+/**
+ * 大屏堆垛机数据Service接口
+ * 
+ * @author ruoyi
+ */
+public interface ILargeScreenDdjService {
+    /**
+     * 查询堆垛机数据列表
+     * 
+     * @return 堆垛机数据列表
+     */
+    public List<Map<String, Object>> queryDdjList();
+}

ruoyi-admin/src/main/java/com/ruoyi/largeScreen/service/impl/LargeScreenDdjServiceImpl.java

@@ -0,0 +1,51 @@
+package com.ruoyi.largeScreen.service.impl;
+
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import com.ruoyi.device.ddj.domain.MsgDdj;
+import com.ruoyi.device.ddj.mapper.MsgDdjMapper;
+import com.ruoyi.largeScreen.service.ILargeScreenDdjService;
+
+/**
+ * 大屏堆垛机数据Service业务层处理
+ * 
+ * @author ruoyi
+ */
+@Service
+public class LargeScreenDdjServiceImpl implements ILargeScreenDdjService {
+    @Autowired
+    private MsgDdjMapper msgDdjMapper;
+
+    /**
+     * 查询堆垛机数据列表
+     * 
+     * @return 堆垛机数据列表
+     */
+    @Override
+    public List<Map<String, Object>> queryDdjList() {
+        List<MsgDdj> ddjList = msgDdjMapper.selectMsgDdjList(null);
+        List<Map<String, Object>> resultList = new ArrayList<>();
+        
+        for (MsgDdj ddj : ddjList) {
+            Map<String, Object> map = new HashMap<>();
+            map.put("id", ddj.getId().toString());
+            map.put("name", ddj.getName());
+            map.put("zxjd", ddj.getJdbz().toString());
+            map.put("sbzt", ddj.getSbzt().toString());
+            map.put("rwh", ddj.getRwh().toString());
+            map.put("yp", ddj.getYph().toString());
+            map.put("ywz", ddj.getYlh().toString());
+            map.put("yc", ddj.getYch().toString());
+            map.put("mbp", ddj.getMbph().toString());
+            map.put("mbwz", ddj.getMblh().toString());
+            map.put("mbc", ddj.getMbch().toString());
+            resultList.add(map);
+        }
+        
+        return resultList;
+    }
+}

ruoyi-ui/public/monitor/css/style.css

@@ -0,0 +1,344 @@
+/* 页面基本样式 */
+body {
+    background-color: #f3f3f4; /* 设置背景色 */
+    margin: 0;
+    padding: 0;
+    overflow: hidden; /* 防止出现滚动条 */
+}
+
+/* 主容器样式 */
+#main {
+    position: absolute;
+    margin-top: 0;
+    margin-left: 0;
+    z-index: -99; /* 确保在最底层 */
+    height: 500px;
+    width: 500px;
+    transform: scale(0.9);
+    transform-origin: center center;
+    cursor: default;
+}
+
+#main.dragging {
+    cursor: move;
+}
+
+/* 小方块样式 */
+.small-box {
+    position: absolute;
+    background-color: #3c8dbc;
+    border: 2px solid #ffffff;
+    display: inline-block;
+    transition: all 0.3s ease; /* 添加过渡动画效果 */
+}
+
+/* 控制按钮容器样式 */
+.control-buttons {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    gap: 10px;
+    z-index: 1000;
+}
+
+/* 控制按钮样式 */
+.control-buttons button {
+    padding: 10px 20px;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+#enableDragBtn {
+    background-color: #4CAF50;
+}
+
+#enableDragBtn:hover:not(:disabled) {
+    background-color: #45a049;
+}
+
+#disableDragBtn {
+    background-color: #f44336;
+}
+
+#disableDragBtn:hover:not(:disabled) {
+    background-color: #da190b;
+}
+
+.control-buttons button:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+/* 设备拖动控制按钮样式 */
+.drag-control-buttons {
+    display: flex;
+    gap: 10px;
+    margin-top: 5px;
+}
+
+.drag-control-btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    color: white;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.3s ease;
+}
+
+.drag-control-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.enable-drag {
+    background-color: #4CAF50;
+}
+
+.enable-drag:hover:not(:disabled) {
+    background-color: #45a049;
+}
+
+.disable-drag {
+    background-color: #f44336;
+}
+
+.disable-drag:hover:not(:disabled) {
+    background-color: #da190b;
+}
+
+/* 链条输送机样式 */
+.conveyor {
+    position: absolute;
+    background-image: url('../img/Lssj.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    cursor: grab;
+    user-select: none;
+    transition: transform 0.1s ease;
+    z-index: 1;
+}
+
+.conveyor:hover {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.conveyor:active {
+    cursor: grabbing;
+    transform: scale(1.02);
+}
+
+.conveyor-center {
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    background-color: #51bfff;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: none;
+}
+
+/* 滚筒输送机样式 */
+.roller-conveyor {
+    position: absolute;
+    background-image: url('../img/Gssj.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    cursor: grab;
+    user-select: none;
+    transition: transform 0.1s ease;
+    z-index: 2;
+}
+
+.roller-conveyor:hover {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.roller-conveyor:active {
+    cursor: grabbing;
+    transform: scale(1.02);
+}
+
+.roller-conveyor-center {
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    background-color: #51bfff;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: none;
+}
+
+/* 堆垛机样式 */
+.stacker {
+    position: absolute;
+    background-image: url('../img/ddj.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    cursor: grab;
+    user-select: none;
+    transition: transform 0.1s ease, left 0.5s ease-in-out;
+}
+
+.stacker:hover {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+.stacker:active {
+    cursor: grabbing;
+    transform: scale(1.02);
+}
+
+.stacker-center {
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    background-color: #51bfff;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: none;
+}
+
+/* RGV样式 */
+.rgv {
+    position: absolute;
+    background-image: url('../img/rgv.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    cursor: grab;
+    user-select: none;
+    transition: transform 0.1s ease, left 0.5s ease-in-out;
+}
+
+.rgv:hover {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+.rgv:active {
+    cursor: grabbing;
+    transform: scale(1.02);
+}
+
+.rgv-center {
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    background-color: #51bfff;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: none;
+}
+
+/* 堆垛机轨道样式 */
+.track {
+    position: absolute;
+    background-image: url('../img/gd.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    cursor: grab;
+    user-select: none;
+    transition: transform 0.1s ease;
+}
+
+.track:hover {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+.track:active {
+    cursor: grabbing;
+    transform: scale(1.02);
+}
+
+/* 报警闪红光 */
+.breathing-border {
+    border: 1px solid #ff0000;
+    box-sizing: border-box;
+    animation: breathing 1.5s ease-in-out infinite;
+}
+
+@keyframes breathing {
+    0% {
+        border-color: #ff0000;
+        box-shadow: 0 0 0px 0px rgb(255, 0, 0);
+    }
+
+    50% {
+        border-color: #ff0000;
+        box-shadow: 0 0 15px 15px rgba(0, 123, 255, 0);
+    }
+
+    100% {
+        border-color: #ff0000;
+        box-shadow: 0 0 0px 0px rgba(255, 0, 0, 0);
+    }
+}
+
+/* 报警信息滚动动画 */
+@keyframes scroll-left {
+    0% {
+        left: 20%;
+    }
+    100% {
+        left: -150%;
+    }
+}
+
+/* 慢速滚动动画 */
+@keyframes scroll-left-slow {
+    0% {
+        left: 100%;
+    }
+    100% {
+        left: -100%;
+    }
+}
+
+/* 列位置显示样式 */
+.column-positions {
+    margin-top: 10px;
+    max-height: 300px;
+    overflow-y: auto;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    padding: 10px;
+}
+
+.column-positions-info p {
+    margin: 0 0 10px 0;
+    font-weight: bold;
+}
+
+.positions-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 8px;
+}
+
+.position-item {
+    background-color: #fff;
+    padding: 8px;
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.position-item span:first-child {
+    color: #666;
+    font-size: 0.9em;
+}
+
+.position-item span:last-child {
+    font-weight: bold;
+    color: #333;
+}

ruoyi-ui/public/monitor/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2D可视化监控系统</title>
+    <script src="/monitor/js/jquery-3.1.1.min.js"></script>
+    <link rel="stylesheet" href="/monitor/css/style.css">
+</head>
+<body>
+    <!-- 页面标题 -->
+    <h1 id="pageTitle" style="position: absolute; left: 50%; transform: translateX(-50%); margin: 0; padding: 20px 0;">2D可视化监控系统</h1>
+
+    <!-- 报警信息容器 -->
+    <div id="alarm-container" style="position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); width: 600px; height: 40px; background: linear-gradient(135deg, #999999, #777777); border-radius: 8px; box-shadow: 0 4px 15px rgba(153, 153, 153, 0.3); display: block; z-index: 1000; color: white; font-family: 'Microsoft YaHei', sans-serif; overflow: hidden;margin-bottom: 150px;margin-left: -100px">
+        <div style="display: flex; align-items: center; height: 100%; padding: 0 15px;">
+            <div style="font-size: 14px; font-weight: bold; margin-right: 10px; white-space: nowrap;">
+                🚨 <span id="alarm-count">0</span>条报警
+            </div>
+            <div id="alarm-scroll" style="flex: 1; height: 100%; position: relative; overflow: hidden;">
+                <div id="alarm-text" style="position: absolute; top: 50%; left: 0%; transform: translateY(-50%); white-space: nowrap; font-size: 13px;"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 主容器，用于放置小方块 -->
+    <div id="main"></div>
+
+    <!-- 弹框 -->
+    <div id="box" style="display: none; position: absolute; z-index: 999; width: 600px; height: 520px; background-color: #fff; border: 2px solid #006666; border-radius: 12px; box-shadow: 0 6px 12px rgba(0, 102, 102, 0.15); padding: 20px; left: 50%; top: 50%; transform: translate(-50%, -50%); cursor: move;">
+        <!-- 拖动标题栏 -->
+        <div id="box-header" style="position: absolute; top: 0; left: 0; right: 0; height: 40px; cursor: move; background: linear-gradient(135deg, #006666 0%, #008080 100%); border-radius: 10px 10px 0 0; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 16px; user-select: none;">
+            设备详情
+        </div>
+        <div onclick="closeBox()" style="cursor: pointer; position: absolute; right: 8px; top: 8px; font-size: 18px; color: white; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; background-color: rgba(255, 255, 255, 0.2); z-index: 1000;" onmouseover="this.style.backgroundColor='rgba(255, 255, 255, 0.3)'" onmouseout="this.style.backgroundColor='rgba(255, 255, 255, 0.2)'">×</div>
+        <div id="device-details" style="font-size: 13px; line-height: 1.5; margin-top: 40px;"></div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
+    <!-- 1. 先引入本地的 request.js（路径完全可控，不会错）-->
+    <script src="/monitor/js/request.js"></script>
+    <!-- 2. 再引入你的业务脚本 -->
+    <script src="/monitor/js/main.js"></script>
+    <script src="/monitor/js/index.js"></script>
+    <!-- 3. 调用接口（此时 request 已全局可用）-->
+<!--    <script>-->
+<!--      // 调试：先确认 request 存在-->
+<!--      console.log("全局 request 变量：", window.request);-->
+<!--      // 调用接口-->
+<!--      request({-->
+<!--        url: '/largeScreen/ddj/list',-->
+<!--        method: 'get'-->
+<!--      }).then(response => {-->
+<!--        console.log('接口数据：', response); // 注意：若依接口返回的 data 已被拦截器处理，直接用 response 即可（原 res.data）-->
+<!--      }).catch(error => {-->
+<!--        console.error('请求失败：', error);-->
+<!--      });-->
+<!--    </script>-->
+</body>
+</html>

ruoyi-ui/public/monitor/js/request.js

@@ -0,0 +1,52 @@
+// 1. 直接使用 CDN 全局的 axios
+const axios = window.axios;
+
+// 2. 基础配置（无 export 语句）
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
+const service = axios.create({
+  baseURL: '/', // 匹配若依代理，无需改
+  timeout: 10000
+});
+
+// 3. request 拦截器（删除所有依赖若依工具的代码）
+service.interceptors.request.use(config => {
+  // 从 cookie 取若依的 Admin-Token（确保登录状态）
+  const token = document.cookie.replace(/(?:(?:^|.*;\s*)Admin-Token\s*=\s*([^;]*).*$)|^.*$/, '$1');
+  if (token) {
+    config.headers['Authorization'] = 'Bearer ' + token;
+  }
+  return config;
+}, error => {
+  console.log(error);
+  return Promise.reject(error); // 必须加 return，否则吞错误
+});
+
+// 4. response 拦截器（简化，无 element-ui 依赖）
+service.interceptors.response.use(res => {
+  // 二进制数据直接返回（如需下载可保留）
+  if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
+    return res.data;
+  }
+  // 状态码处理（用原生 alert 替代弹窗）
+  const code = res.data.code || 200;
+  if (code === 401) {
+    alert('登录过期，请重新登录若依系统');
+    return Promise.reject('登录过期');
+  } else if (code !== 200) {
+    alert('接口失败：' + (res.data.msg || '未知错误'));
+    return Promise.reject('接口错误');
+  } else {
+    return res.data; // 若依接口返回的 data 已处理，直接返回
+  }
+}, error => {
+  // 错误提示（原生 alert）
+  let msg = error.message;
+  if (msg === "Network Error") msg = "后端连接异常";
+  else if (msg.includes("timeout")) msg = "请求超时";
+  else if (msg.includes("status code")) msg = "接口" + msg.substr(-3) + "异常";
+  alert(msg);
+  return Promise.reject(error);
+});
+
+// 5. 核心：挂载到全局 window，无任何 export
+window.request = service;

ruoyi-ui/public/monitor/json/Lssj.json

@@ -0,0 +1,69 @@
+{
+  "msg": "操作成功",
+  "code": 0,
+  "data": [
+    {
+      "id": "L1001",
+      "name": "输送机",
+      "kx": "0",
+      "dw": "1",
+      "rwh": "123454564564",
+      "sbzt": 10,
+      "trayCode": 12345678945454
+    },
+    {
+      "id": "L1002",
+      "name": "输送机",
+      "kx": "1",
+      "dw": "0",
+      "rwh": "123454564564",
+      "sbzt": 3,
+      "trayCode": 12345678945454
+    },
+    {
+      "id": "L1003",
+      "name": "输送机",
+      "kx": "0",
+      "dw": "1",
+      "rwh": "88888888",
+      "sbzt": 4,
+      "trayCode": 123456789
+    },
+    {
+      "id": "L1004",
+      "name": "输送机",
+      "kx": "0",
+      "dw": "1",
+      "rwh": "88888888",
+      "sbzt": 1,
+      "trayCode": 123456789
+    },
+    {
+      "id": "G1001",
+      "name": "输送机",
+      "kx": "0",
+      "dw": "0",
+      "rwh": "99999",
+      "sbzt": 1,
+      "trayCode": 12345678988888
+    },
+    {
+      "id": "G1002",
+      "name": "输送机",
+      "kx": "0",
+      "dw": "1",
+      "rwh": "0",
+      "sbzt": 1,
+      "trayCode": 123456789
+    },
+    {
+      "id": "G1003",
+      "name": "输送机",
+      "kx": "0",
+      "dw": "1",
+      "rwh": "0",
+      "sbzt": 101,
+      "trayCode": 123456789
+    }
+  ]
+}

ruoyi-ui/public/monitor/json/alarm.json

@@ -0,0 +1,29 @@
+{
+    "alarm": [
+
+         {
+            "id":   "L1011",
+            "name": "输送机",
+            "code": "102",
+            "content": "运行异常"
+        },
+        {
+            "id": "1",
+            "name": "堆垛机",
+            "code": "1001",
+            "content": "运行异常"
+        },
+        {
+            "id": "2",
+            "name": "堆垛机",
+            "code": "1001",
+            "content": "运行异常"
+        },
+        {
+            "id": "3",
+            "name": "堆垛机",
+            "code": "1001",
+            "content": "运行异常"
+        }
+    ]
+}

ruoyi-ui/public/monitor/json/config.json

@@ -0,0 +1,349 @@
+{
+    "boxRows": [
+        {
+            "id": "row1",
+            "boxWidth": 20,
+            "boxHeight": 17,
+            "boxCount": 46,
+            "rowGap": 0
+        },
+        {
+            "id": "row2",
+            "boxWidth": 20,
+            "boxHeight": 17,
+            "boxCount": 46,
+            "rowGap": 30
+        },
+        {
+            "id": "row3",
+            "boxWidth": 12,
+            "boxHeight": 20,
+            "boxCount": 69,
+            "rowGap": 10
+        },
+        {
+            "id": "row4",
+            "boxWidth": 12,
+            "boxHeight": 20,
+            "boxCount": 69,
+            "rowGap": 30
+        },
+        {
+            "id": "row1_1",
+            "boxWidth": 20,
+            "boxHeight": 17,
+            "boxCount": 46,
+            "rowGap": 200
+        },
+        {
+            "id": "row2_1",
+            "boxWidth": 20,
+            "boxHeight": 17,
+            "boxCount": 46,
+            "rowGap": 30
+        },
+        {
+            "id": "row3_1",
+            "boxWidth": 12,
+            "boxHeight": 20,
+            "boxCount": 69,
+            "rowGap": 10
+        },
+        {
+            "id": "row4_1",
+            "boxWidth": 12,
+            "boxHeight": 20,
+            "boxCount": 69,
+            "rowGap": 30
+        }
+    ],
+    "conveyors": [
+        {
+            "id": "L1002",
+            "width": 45,
+            "height": 25,
+            "rotation": 0,
+            "x": 362,
+            "y": 330
+        },
+        {
+            "id": "L1001",
+            "width": 45,
+            "height": 25,
+            "rotation": 0,
+            "x": 316,
+            "y": 330
+        },
+        {
+            "id": "L1011",
+            "width": 30,
+            "height": 25,
+            "rotation": 0,
+            "x": 285,
+            "y": 330
+        },
+        {
+            "id": "L1004",
+            "width": 45,
+            "height": 25,
+            "rotation": 0,
+            "x": 362,
+            "y": 415
+        },
+        {
+            "id": "L1003",
+            "width": 45,
+            "height": 25,
+            "rotation": 0,
+            "x": 316,
+            "y": 415
+        },
+        {
+            "id": "L1012",
+            "width": 30,
+            "height": 25,
+            "rotation": 0,
+            "x": 285,
+            "y": 415
+        },
+        {
+            "id": "L2001",
+            "width": 45,
+            "height": 25,
+            "rotation": 0,
+            "x": 1513,
+            "y": 638
+        },
+        {
+            "id": "L2002",
+            "width": 45,
+            "height": 25,
+            "rotation": 0,
+            "x": 1559,
+            "y": 638
+        },
+        {
+            "id": "L2003",
+            "width": 45,
+            "height": 25,
+            "rotation": 0,
+            "x": 1513,
+            "y": 689
+        },
+        {
+            "id": "L2004",
+            "width": 45,
+            "height": 25,
+            "rotation": 0,
+            "x": 1559,
+            "y": 689
+        },
+        {
+            "id": "L2012",
+            "width": 30,
+            "height": 25,
+            "rotation": 0,
+            "x": 1605,
+            "y": 689
+        },
+        {
+            "id": "L2005",
+            "width": 45,
+            "height": 25,
+            "rotation": 0,
+            "x": 1513,
+            "y": 722
+        },
+        {
+            "id": "L2006",
+            "width": 50,
+            "height": 25,
+            "rotation": 0,
+            "x": 1559,
+            "y": 722
+        },
+        {
+            "id": "L1013",
+            "width": 25,
+            "height": 25,
+            "rotation": 0,
+            "x": 1610,
+            "y": 722
+        },
+        {
+            "id": "L2007",
+            "width": 45,
+            "height": 25,
+            "rotation": 0,
+            "x": 1513,
+            "y": 776
+        },
+        {
+            "id": "L2008",
+            "width": 45,
+            "height": 25,
+            "rotation": 0,
+            "x": 1559,
+            "y": 776
+        }
+    ],
+    "stackers": [
+        {
+            "id": "1",
+            "width": 60,
+            "height": 28,
+            "rotation": 0,
+            "x": 441,
+            "y": 302,
+            "shelfId": "row1"
+        },
+        {
+            "id": "2",
+            "width": 60,
+            "height": 28,
+            "rotation": 0,
+            "x": 441,
+            "y": 388,
+            "shelfId": "row3"
+        }
+    ],
+    "tracks": [
+        {
+            "id": "gd1",
+            "width": 1230,
+            "height": 2,
+            "rotation": 0,
+            "x": 346,
+            "y": 314
+        },
+        {
+            "id": "gd2",
+            "width": 1230,
+            "height": 2,
+            "rotation": 0,
+            "x": 346,
+            "y": 400
+        },
+        {
+            "id": "gd1_1",
+            "width": 1230,
+            "height": 2,
+            "rotation": 0,
+            "x": 346,
+            "y": 676
+        },
+        {
+            "id": "gd2_1",
+            "width": 1230,
+            "height": 2,
+            "rotation": 0,
+            "x": 346,
+            "y": 760
+        }
+    ],
+    "rollerConveyors": [
+        {
+            "id": "G1005",
+            "width": 20,
+            "height": 45,
+            "rotation": 90,
+            "x": 376,
+            "y": 463
+        },
+        {
+            "id": "G1006",
+            "width": 20,
+            "height": 45,
+            "rotation": 90,
+            "x": 423,
+            "y": 463
+        }
+    ],
+    "deviceDraggable": false,
+    "editMode": false,
+    "labels": [
+        {
+            "id": "bq",
+            "content": "一 层",
+            "fontSize": 24,
+            "fontColor": "#000000",
+            "bgColor": "#ffffff",
+            "borderRadius": 4,
+            "x": 882,
+            "y": 198
+        },
+        {
+            "id": "bq2",
+            "content": "二 层",
+            "fontSize": 24,
+            "fontColor": "#000000",
+            "bgColor": "#ffffff",
+            "borderRadius": 4,
+            "x": 882,
+            "y": 562
+        },
+        {
+            "id": "bq3",
+            "content": "一巷道",
+            "fontSize": 16,
+            "fontColor": "#ffffff",
+            "bgColor": "#006666",
+            "borderRadius": 4,
+            "x": 189,
+            "y": 293
+        },
+        {
+            "id": "bq4",
+            "content": "一巷道",
+            "fontSize": 16,
+            "fontColor": "#ffffff",
+            "bgColor": "#006666",
+            "borderRadius": 4,
+            "x": 189,
+            "y": 658
+        },
+        {
+            "id": "bq5",
+            "content": "二巷道",
+            "fontSize": 16,
+            "fontColor": "#ffffff",
+            "bgColor": "#006666",
+            "borderRadius": 4,
+            "x": 189,
+            "y": 383
+        },
+        {
+            "id": "bq6",
+            "content": "二巷道",
+            "fontSize": 16,
+            "fontColor": "#ffffff",
+            "bgColor": "#006666",
+            "borderRadius": 4,
+            "x": 189,
+            "y": 743
+        }
+    ],
+    "titleSettings": {
+        "content": "",
+        "fontSize": 50,
+        "color": "#106c7b",
+        "shadowSize": 1,
+        "shadowColor": "#555353"
+    },
+    "allowBackendAccess": true,
+    "lastUpdated": 1758849785613,
+    "alarmSettings": {
+        "width": 700,
+        "height": 40,
+        "scrollSpeed": 50,
+        "position": "bottom-center"
+    },
+    "apiSettings": {
+        "stackerApiUrl": "/largeScreen/ddj/list",
+        "conveyorApiUrl": "json/Lssj.json",
+        "rgvApiUrl": "json/rgv.json",
+        "alarmApiUrl": "json/alarm.json",
+        "configApiUrl": "json/config.json"
+    },
+    "rgvs": []
+}

ruoyi-ui/public/monitor/json/ddj.json

@@ -0,0 +1,55 @@
+{
+    "msg": "操作成功",
+    "code": 0,
+    "data": [
+        {
+            "id":"1",
+            "name":"堆垛机",
+            "zxjd":"1",
+            "sbzt":"100",
+            "rwh": "123454564564",
+            "yp":"1",
+            "ywz":"3",
+            "yc":"1",
+            "mbp":"2",
+            "mbwz":"46",
+            "mbc":"5"
+        },{
+            "id":"2",
+            "name":"堆垛机",
+            "zxjd":"1",
+            "sbzt":"100",
+            "rwh": "123",
+            "yp":"3",
+            "ywz":"3",
+            "yc":"5",
+            "mbp":"4",
+            "mbwz":"3",
+            "mbc":"5"
+        },{
+            "id":"3",
+            "name":"堆垛机",
+            "zxjd":"1",
+            "sbzt":"100",
+            "rwh": "123",
+            "yp":"3",
+            "ywz":"1",
+            "yc":"5",
+            "mbp":"4",
+            "mbwz":"1",
+            "mbc":"5"
+        },{
+            "id":"4",
+            "name":"堆垛机",
+            "zxjd":"1",
+            "sbzt":"100",
+            "rwh": "123",
+            "yp":"3",
+            "ywz":"1",
+            "yc":"5",
+            "mbp":"4",
+            "mbwz":"1",
+            "mbc":"5"
+        }
+    ]
+}

ruoyi-ui/public/monitor/json/rgv.json

@@ -0,0 +1,23 @@
+{
+    "msg": "操作成功",
+    "code": 0,
+    "data": [
+        {
+            "id":"001",
+            "name":"RGV",
+            "zxjd":"4",
+            "sbzt":"1001",
+            "rwh": "123454564564",
+            "ywz":"L1001",
+            "mbwz":"L1002"
+        },{
+            "id":"002",
+            "name":"RGV",
+            "zxjd":"5",
+            "sbzt":"100",
+            "rwh": "123",
+            "ywz":"L1003",
+            "mbwz":"L1004"
+        }
+    ]
+}

ruoyi-ui/src/assets/styles/index.scss

@@ -192,4 +192,5 @@ aside {
 .app-main {
   padding-top: 78px; // 根据导航栏实际高度调整
   min-height: calc(100vh - 78px); // 保持高度正确
+  height: 930px;
 }

ruoyi-ui/src/views/largeScreen/monitor/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="monitor-container">
+    <iframe :src="'/monitor/index.html'" style="width:1920px; height:1080px; border:none;" frameborder="0"></iframe>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LargeScreenMonitor"
+}
+</script>
+
+<style scoped>
+
+.monitor-container {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+</style>
+

ruoyi-ui/vue.config.js

@@ -9,32 +9,22 @@ const CompressionPlugin = require('compression-webpack-plugin')
 
 const name = process.env.VUE_APP_TITLE || 'FORTUCKY WCS SYSTEM' // 网页标题
 
-const baseUrl = 'http://localhost:8081' // 后端接口
+const baseUrl = 'http://localhost:8081' // 后端接口地址（你的后端端口是8081）
 
-const port = process.env.port || process.env.npm_config_port || 80 // 端口
+const port = process.env.port || process.env.npm_config_port || 80 // 前端端口
 
-// vue.config.js 配置说明
-//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
-// 这里只列一部分，具体配置参考文档
 module.exports = {
-  // 部署生产环境和开发环境下的URL。
-  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
-  // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
   publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
-  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
   outputDir: 'dist',
-  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
   assetsDir: 'static',
-  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
   productionSourceMap: false,
   transpileDependencies: ['quill'],
-  // webpack-dev-server 相关配置
   devServer: {
     host: '0.0.0.0',
     port: port,
     open: true,
     proxy: {
-      // detail: https://cli.vuejs.org/config/#devserver-proxy
+      // 保留原有的基础API代理（如 /api）
       [process.env.VUE_APP_BASE_API]: {
         target: baseUrl,
         changeOrigin: true,
@@ -42,7 +32,14 @@ module.exports = {
           ['^' + process.env.VUE_APP_BASE_API]: ''
         }
       },
-      // springdoc proxy
+      // 新增：转发 /largeScreen 开头的接口（你的堆垛机接口路径）
+      '/largeScreen': {
+        target: baseUrl, // 转发到后端地址 http://localhost:8081
+        changeOrigin: true,
+        // 不需要 pathRewrite，因为后端接口本身就是 /largeScreen/ddj/list
+        // 转发后实际请求地址为：http://localhost:8081/largeScreen/ddj/list
+      },
+      // 保留原有的springdoc proxy
       '^/v3/api-docs/(.*)': {
         target: baseUrl,
         changeOrigin: true
@@ -65,22 +62,20 @@ module.exports = {
       }
     },
     plugins: [
-      // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
       new CompressionPlugin({
-        cache: false,                                  // 不启用文件缓存
+        cache: false,
-        test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i,  // 压缩文件格式
+        test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i,
-        filename: '[path][base].gz[query]',            // 压缩后的文件名
+        filename: '[path][base].gz[query]',
-        algorithm: 'gzip',                             // 使用gzip压缩
+        algorithm: 'gzip',
-        minRatio: 0.8,                                 // 压缩比例，小于 80% 的文件不会被压缩
+        minRatio: 0.8,
-        deleteOriginalAssets: false                    // 压缩后删除原文件
+        deleteOriginalAssets: false
       })
     ],
   },
   chainWebpack(config) {
-    config.plugins.delete('preload') // TODO: need test
+    config.plugins.delete('preload')
-    config.plugins.delete('prefetch') // TODO: need test
+    config.plugins.delete('prefetch')
 
-    // set svg-sprite-loader
     config.module
       .rule('svg')
       .exclude.add(resolve('src/assets/icons'))
@@ -98,39 +93,39 @@ module.exports = {
       .end()
 
     config.when(process.env.NODE_ENV !== 'development', config => {
-          config
+      config
-            .plugin('ScriptExtHtmlWebpackPlugin')
+        .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
+        .after('html')
-            .use('script-ext-html-webpack-plugin', [{
+        .use('script-ext-html-webpack-plugin', [{
-            // `runtime` must same as runtimeChunk name. default is `runtime`
+          inline: /runtime\..*\.js$/
-              inline: /runtime\..*\.js$/
+        }])
-            }])
+        .end()
-            .end()
 
-          config.optimization.splitChunks({
+      config.optimization.splitChunks({
-            chunks: 'all',
+        chunks: 'all',
-            cacheGroups: {
+        cacheGroups: {
-              libs: {
+          libs: {
-                name: 'chunk-libs',
+            name: 'chunk-libs',
-                test: /[\\/]node_modules[\\/]/,
+            test: /[\\/]node_modules[\\/]/,
-                priority: 10,
+            priority: 10,
-                chunks: 'initial' // only package third parties that are initially dependent
+            chunks: 'initial'
-              },
+          },
-              elementUI: {
+          elementUI: {
-                name: 'chunk-elementUI', // split elementUI into a single package
+            name: 'chunk-elementUI',
-                test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
+            test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
-                priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app
+            priority: 20
-              },
+          },
-              commons: {
+          commons: {
-                name: 'chunk-commons',
+            name: 'chunk-commons',
-                test: resolve('src/components'), // can customize your rules
+            test: resolve('src/components'),
-                minChunks: 3, //  minimum common number
+            minChunks: 3,
-                priority: 5,
+            priority: 5,
-                reuseExistingChunk: true
+            reuseExistingChunk: true
-              }
+          }
-            }
+        }
-          })
+      })
-          config.optimization.runtimeChunk('single')
+      config.optimization.runtimeChunk('single')
     })
   }
 }
+