9.30
今天把数据库的表都搞好，把系统原型做出来
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>
浙公网安备 33010602011771号