mes开发流程7
今天把数据库的表都搞好，把系统原型做出来
index.jsp代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.List, java.util.ArrayList, java.util.Map, java.util.HashMap" %> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MES系统</title> <style> body, html { margin: 0; padding: 0; font-family: Arial, sans-serif; height: 100%; } .app-container { display: flex; height: 100%; } .sidebar { width: 200px; background-color: #2c3e50; color: white; padding: 20px; overflow-y: auto; } .logo { display: flex; align-items: center; margin-bottom: 20px; } .logo img { width: 40px; height: 40px; margin-right: 10px; } .sidebar button { width: 100%; background-color: #2c3e50; color: white; border: none; padding: 15px; margin-bottom: 10px; text-align: left; font-size: 16px; cursor: pointer; border-radius: 4px; transition: background-color 0.3s; } .sidebar button:hover { background-color: #409EFF; } .sub-buttons { display: none; margin-left: 10px; } .sub-buttons button { background-color: #34495e; padding: 10px; font-size: 14px; text-align: left; border-radius: 4px; border: none; color: white; width: 100%; margin: 5px 0; transition: background-color 0.3s; } .sub-buttons button:hover { background-color: #409EFF; } .main-content { flex-grow: 1; padding: 20px; background-color: #f5f5f5; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .search-bar input { padding: 5px 10px; width: 300px; } .header nav a { margin-left: 10px; text-decoration: none; color: #333; } .header nav a.active { font-weight: bold; } .table-container { background-color: white; border-radius: 5px; padding: 20px; } .table-header { display: flex; justify-content: space-between; margin-bottom: 10px; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } .qr-code { width: 50px; height: 50px; } </style> <script> function toggleSubButtons(button) { const subButtons = button.nextElementSibling; if (subButtons.style.display === "none" || subButtons.style.display === "") { subButtons.style.display = "block"; } else { subButtons.style.display = "none"; } } </script> </head> <body> <div class="app-container"> <!-- Sidebar --> <aside class="sidebar"> <div class="logo"> <img src="logo.png" alt="Logo" /> <span>MES</span> </div> <nav> <button onclick="toggleSubButtons(this)">生产计划管理</button> <div class="sub-buttons"> <button onclick="location.href='index.jsp'">合同生成</button> <button onclick="location.href='1.2.jsp'">确认投产数量</button> <button onclick="location.href='1.3.jsp'">生成生产计划</button> </div> <button onclick="toggleSubButtons(this)">生产管理</button> <div class="sub-buttons"> <button onclick="toggleSubButtons(this)">蜡模车间管理</button> <div class="sub-buttons"> <button onclick="location.href='#'">接收蜡模信息</button> <button onclick="location.href='#'">工组人员分配</button> <button onclick="location.href='#'">工序完成情况</button> <button onclick="location.href='#'">蜡模工序审核</button> </div> <button onclick="toggleSubButtons(this)">制壳车间管理</button> <div class="sub-buttons"> <button onclick="location.href='2.2.1.jsp'">接收蜡模信息</button> <button onclick="location.href='#'">工组人员分配</button> <button onclick="location.href='#'">工序完成情况</button> <button onclick="location.href='#'">制壳工序审核</button> </div> <button onclick="toggleSubButtons(this)">融化车间管理</button> <div class="sub-buttons"> <button onclick="location.href='#'">接收融化信息</button> <button onclick="location.href='#'">工组人员分配</button> <button onclick="location.href='#'">工序完成情况</button> <button onclick="location.href='#'">融化工序审核</button> </div> <button onclick="toggleSubButtons(this)">后处理车间管理</button> <div class="sub-buttons"> <button onclick="location.href='#'">接收后处理信息</button> <button onclick="location.href='#'">工组人员分配</button> <button onclick="location.href='#'">工序完成情况</button> <button onclick="location.href='#'">后处理工序审核</button> </div> <button onclick="toggleSubButtons(this)">机加工车间管理</button> <div class="sub-buttons"> <button onclick="location.href='#'">接收机加工信息</button> <button onclick="location.href='#'">工组人员分配</button> <button onclick="location.href='#'">工序完成情况</button> <button onclick="location.href='#'">机加工工序审核</button> </div> </div> <button onclick="toggleSubButtons(this)">仓库管理</button> <div class="sub-buttons"> <button onclick="location.href='#'">接收信息</button> <button onclick="location.href='#'">仓库管理</button> </div> <button onclick="toggleSubButtons(this)">基础管理</button> <div class="sub-buttons"> <button onclick="location.href='#'">工序管理</button> <button onclick="location.href='#'">员工管理</button> </div> </nav> </aside> <!-- Main Content --> <main class="main-content"> <!-- Header --> <header class="header"> <div class="search-bar"> <input type="text" placeholder="请输入您需要查询的内容..." /> </div> <nav> <a href="#">首页</a> <a href="#" class="active">合同生成</a> </nav> </header> <!-- Table --> <div class="table-container"> <div class="table-header"> <div class="entries-select"> <span>每页</span> <select> <option value="10">10</option> <option value="20">20</option> <option value="50">50</option> </select> <span>条记录</span> </div> <div class="search"> <input type="text" placeholder="查找..." /> </div> </div> <table> <thead> <tr> <th>总制令</th> <th>分制令</th> <th>子制令</th> <th>二维码</th> </tr> </thead> <tbody> <% List<Map<String, Object>> tableData = new ArrayList<>(); tableData.add(new HashMap<String, Object>() {{ put("id", 1); put("totalOrder", 1); put("subOrder", 1); put("childOrder", "课桌"); put("qrCode", "placeholder.svg"); }}); tableData.add(new HashMap<String, Object>() {{ put("id", 2); put("totalOrder", 2); put("subOrder", 2); put("childOrder", "椅子"); put("qrCode", "placeholder.svg"); }}); tableData.add(new HashMap<String, Object>() {{ put("id", 3); put("totalOrder", 3); put("subOrder", 3); put("childOrder", "电脑"); put("qrCode", "placeholder.svg"); }}); tableData.add(new HashMap<String, Object>() {{ put("id", 4); put("totalOrder", 4); put("subOrder", 4); put("childOrder", "显示"); put("qrCode", "placeholder.svg"); }}); tableData.add(new HashMap<String, Object>() {{ put("id", 5); put("totalOrder", 5); put("subOrder", 5); put("childOrder", "键盘"); put("qrCode", "placeholder.svg"); }}); tableData.add(new HashMap<String, Object>() {{ put("id", 6); put("totalOrder", 6); put("subOrder", 6); put("childOrder", "水杯"); put("qrCode", "placeholder.svg"); }}); tableData.add(new HashMap<String, Object>() {{ put("id", 7); put("totalOrder", 7); put("subOrder", 7); put("childOrder", "手机"); put("qrCode", "placeholder.svg"); }}); for (Map<String, Object> item : tableData) { %> <tr> <td><%= item.get("totalOrder") %></td> <td><%= item.get("subOrder") %></td> <td><%= item.get("childOrder") %></td> <td> <img src="<%= item.get("qrCode") %>" alt="QR Code" class="qr-code" /> </td> </tr> <% } %> </tbody> </table> </div> </main> </div> </body> </html>
