You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
620 lines
17 KiB
620 lines
17 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>维护规则</title>
|
|
<style>
|
|
/* --- Basic Reset & Global Styles (Copied from maintain.html) --- */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background-color: #f0f2f5;
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app-layout {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* --- Sidebar Styles (Copied and potentially slightly adjusted) --- */
|
|
.sidebar {
|
|
width: 220px;
|
|
background-color: #ffffff;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
box-shadow: 2px 0 6px rgba(0,21,41,.15);
|
|
z-index: 10;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 20px;
|
|
margin-bottom: 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
text-align: center;
|
|
}
|
|
|
|
.sidebar-header h2 {
|
|
color: #333;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar-nav {
|
|
flex-grow: 1;
|
|
overflow-y: auto;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.sidebar ul {
|
|
list-style: none;
|
|
}
|
|
|
|
.sidebar li a.nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
color: #555;
|
|
text-decoration: none;
|
|
transition: background-color 0.2s, color 0.2s;
|
|
font-size: 0.9rem;
|
|
position: relative;
|
|
}
|
|
.nav-arrow {
|
|
margin-left: auto;
|
|
font-size: 0.7rem;
|
|
transition: transform 0.2s;
|
|
}
|
|
.has-submenu.open > .nav-link .nav-arrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
|
|
.sidebar li a.nav-link:hover,
|
|
.sidebar li.active > a.nav-link {
|
|
background-color: #e6f7ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
/* 子菜单 */
|
|
.submenu {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
max-height: 0; /* 默认隐藏 */
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-out;
|
|
background-color: #fafafa;
|
|
}
|
|
.has-submenu.open > .submenu {
|
|
max-height: 500px;
|
|
}
|
|
|
|
|
|
.submenu li a {
|
|
display: block;
|
|
padding: 8px 20px 8px 46px;
|
|
color: #555;
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
transition: background-color 0.2s, color 0.2s;
|
|
}
|
|
|
|
.submenu li a:hover,
|
|
.submenu li.active a {
|
|
background-color: #dcf4ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding: 15px 20px;
|
|
border-top: 1px solid #f0f0f0;
|
|
color: #888;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* --- Main Content & Table Styles (Copied from maintain.html) --- */
|
|
.main-content {
|
|
flex-grow: 1;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
background-color: #f0f2f5;
|
|
}
|
|
|
|
.content-wrapper {
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.toolbar {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 15px;
|
|
border: 1px solid #d9d9d9;
|
|
background-color: #fff;
|
|
color: #555;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.btn:hover {
|
|
border-color: #1890ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #1890ff;
|
|
border-color: #1890ff;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #40a9ff;
|
|
border-color: #40a9ff;
|
|
color: #fff;
|
|
}
|
|
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.data-table th,
|
|
.data-table td {
|
|
border: 1px solid #f0f0f0;
|
|
padding: 12px 15px;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.data-table th {
|
|
background-color: #fafafa;
|
|
font-weight: 600;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.data-table tbody tr:hover {
|
|
background-color: #f5faff;
|
|
}
|
|
|
|
.data-table .action-links a {
|
|
color: #1890ff;
|
|
text-decoration: none;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.data-table .action-links a:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.data-table .action-links a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* --- Modal Styles (Copied from maintain.html) --- */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1050;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0,0,0,0.5);
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal.show {
|
|
display: flex;
|
|
}
|
|
|
|
.modal-dialog {
|
|
position: relative;
|
|
margin: auto;
|
|
pointer-events: none;
|
|
max-width: 600px;
|
|
width: 90%;
|
|
}
|
|
|
|
.modal-content {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
pointer-events: auto;
|
|
background-color: #fff;
|
|
background-clip: padding-box;
|
|
border: 1px solid rgba(0,0,0,.2);
|
|
border-radius: 0.3rem;
|
|
outline: 0;
|
|
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.5);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 1rem 1rem;
|
|
border-bottom: 1px solid #dee2e6;
|
|
border-top-left-radius: calc(0.3rem - 1px);
|
|
border-top-right-radius: calc(0.3rem - 1px);
|
|
}
|
|
|
|
.modal-title {
|
|
margin-bottom: 0;
|
|
line-height: 1.5;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.close-button {
|
|
padding: 1rem 1rem;
|
|
margin: -1rem -1rem -1rem auto;
|
|
background-color: transparent;
|
|
border: 0;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
color: #000;
|
|
text-shadow: 0 1px 0 #fff;
|
|
opacity: .5;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.close-button:hover {
|
|
opacity: .75;
|
|
}
|
|
|
|
.modal-body {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding: 0.75rem;
|
|
border-top: 1px solid #dee2e6;
|
|
border-bottom-right-radius: calc(0.3rem - 1px);
|
|
border-bottom-left-radius: calc(0.3rem - 1px);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.form-group input[type="text"],
|
|
.form-group input[type="date"],
|
|
.form-group select,
|
|
.form-group textarea {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.9rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: #495057;
|
|
background-color: #fff;
|
|
background-clip: padding-box;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 0.25rem;
|
|
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
|
}
|
|
.form-group textarea {
|
|
resize: vertical;
|
|
}
|
|
.form-text {
|
|
font-size: 0.8rem;
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* "生成计划时机"控件容器 */
|
|
.timing-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px; /* 控件之间的间距 */
|
|
}
|
|
|
|
/* 调整 timing-controls 内部控件宽度 */
|
|
.timing-controls select,
|
|
.timing-controls input {
|
|
width: auto; /* 允许控件根据内容调整宽度 */
|
|
flex-shrink: 0; /* 防止控件被过度压缩 */
|
|
}
|
|
|
|
.timing-controls input[type="number"] {
|
|
width: 80px; /* 保持数字输入框的固定宽度 */
|
|
flex-shrink: 1; /* 允许数字输入框被压缩 */
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app-layout">
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>系统管理</h2>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<ul>
|
|
<li>
|
|
<a href="#" class="nav-link">系统首页</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="nav-link">信息管理</a>
|
|
</li>
|
|
<li>
|
|
<a href="3d.html" class="nav-link">库存管理</a> <!-- Link to the map page -->
|
|
</li>
|
|
<!-- Updated Maintenance Menu -->
|
|
<li class="has-submenu open active"> <!-- Keep parent active -->
|
|
<a href="#" class="nav-link">
|
|
维护管理 <span class="nav-arrow">▶</span>
|
|
</a>
|
|
<ul class="submenu">
|
|
<li><a href="maintain.html">维护记录</a></li> <!-- Link to records page -->
|
|
<li class="active"><a href="#">维护规则</a></li> <!-- Activate this sub-item -->
|
|
</ul>
|
|
</li>
|
|
<li><a href="#" class="nav-link">统计报表</a></li>
|
|
<li><a href="#" class="nav-link">应急防御</a></li>
|
|
<!-- Add other menu items if needed -->
|
|
</ul>
|
|
</nav>
|
|
<div class="sidebar-footer">
|
|
收起左边
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<div class="page-header">
|
|
<h1 class="page-title">维护规则</h1> <!-- Page Title -->
|
|
</div>
|
|
|
|
<div class="content-wrapper">
|
|
<div class="toolbar">
|
|
<button class="btn btn-primary" id="addRuleBtn">新增规则</button> <!-- Add Rule Button -->
|
|
</div>
|
|
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>规则名称</th>
|
|
<th>重复周期</th>
|
|
<th>起始日期设定</th>
|
|
<th>生成计划时机</th>
|
|
<th>已用于物资数</th>
|
|
<th>未完成时下次计划</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Sample Rule 1 -->
|
|
<tr>
|
|
<td>水泵月度检查</td>
|
|
<td>每月</td>
|
|
<td>每年第一天开始运算</td>
|
|
<td>提前 7 天</td>
|
|
<td>5</td>
|
|
<td>暂停生成</td>
|
|
<td class="action-links">
|
|
<a href="#">编辑</a>
|
|
<a href="#">删除</a>
|
|
<a href="#">关联物资</a>
|
|
</td>
|
|
</tr>
|
|
<!-- Sample Rule 2 -->
|
|
<tr>
|
|
<td>发电机季度保养</td>
|
|
<td>每季度</td>
|
|
<td>首次关联物资时</td>
|
|
<td>提前 14 天</td>
|
|
<td>2</td>
|
|
<td>强制生成</td>
|
|
<td class="action-links">
|
|
<a href="#">编辑</a>
|
|
<a href="#">删除</a>
|
|
<a href="#">关联物资</a>
|
|
</td>
|
|
</tr>
|
|
<!-- Sample Rule 3 -->
|
|
<tr>
|
|
<td>挡板年度检修</td>
|
|
<td>每年</td>
|
|
<td>每年第一天开始运算</td>
|
|
<td>提前 30 天</td>
|
|
<td>12</td>
|
|
<td>暂停生成</td>
|
|
<td class="action-links">
|
|
<a href="#">编辑</a>
|
|
<a href="#">删除</a>
|
|
<a href="#">关联物资</a>
|
|
</td>
|
|
</tr>
|
|
<!-- Add more sample rules -->
|
|
</tbody>
|
|
</table>
|
|
<!-- Pagination can be added here if needed -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Rule Modal -->
|
|
<div id="addRuleModal" class="modal">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">新增维护规则</h3>
|
|
<button class="close-button" data-dismiss="modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="addRuleForm">
|
|
<div class="form-group">
|
|
<label for="rule-name">规则名称:</label>
|
|
<input type="text" id="rule-name" name="rule-name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="repeat-cycle">重复周期:</label>
|
|
<select id="repeat-cycle" name="repeat-cycle" required>
|
|
<option value="">请选择</option>
|
|
<option value="monthly">每月</option>
|
|
<option value="quarterly">每季度</option>
|
|
<option value="half">每半年</option>
|
|
<option value="yearly">每年</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="start-date-setting">起始日期设定:</label>
|
|
<select id="start-date-setting" name="start-date-setting" required>
|
|
<option value="">请选择</option>
|
|
<option value="specific_date">从每年第一天开始运算</option>
|
|
<option value="first_association">首次关联物资时</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="generation-timing-value">生成计划时机:</label>
|
|
<div class="timing-controls">
|
|
<select id="generation-timing-unit" name="generation-timing-unit" required>
|
|
<option value="days">提前</option>
|
|
<!-- Add other units if needed -->
|
|
</select>
|
|
<input type="number" id="generation-timing-value" name="generation-timing-value" required min="1" style="width: 80px;">
|
|
<select id="generation-timing-period" name="generation-timing-period" required>
|
|
<option value="days">天</option>
|
|
<!-- Add other periods if needed -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="next-plan-generation">存在未完成计划时生成下一次计划的方式:</label>
|
|
<select id="next-plan-generation" name="next-plan-generation" required>
|
|
<option value="">请选择</option>
|
|
<option value="skip">暂停生成（直到上次计划已经执行完成）</option>
|
|
<option value="force">强制生成（忽略未完成状态）</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="rule-notes">备注:</label>
|
|
<textarea id="rule-notes" name="notes" rows="3"></textarea>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn" data-dismiss="modal">取消</button>
|
|
<button type="submit" form="addRuleForm" class="btn btn-primary">保存规则</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// --- Sidebar Submenu Logic ---
|
|
document.querySelectorAll('.sidebar .has-submenu > .nav-link').forEach(link => {
|
|
link.addEventListener('click', function(event) {
|
|
// Allow navigation if it's not just a toggle link (e.g., has real href)
|
|
if (!this.getAttribute('href') || this.getAttribute('href') === '#') {
|
|
event.preventDefault();
|
|
const parentLi = this.closest('.has-submenu');
|
|
parentLi.classList.toggle('open');
|
|
}
|
|
});
|
|
});
|
|
|
|
// --- Add Rule Modal Logic ---
|
|
const addRuleModal = document.getElementById('addRuleModal');
|
|
const addRuleBtn = document.getElementById('addRuleBtn');
|
|
const startDateSettingSelect = document.getElementById('start-date-setting');
|
|
|
|
function openAddRuleModal() {
|
|
// Reset form (optional)
|
|
const form = document.getElementById('addRuleForm');
|
|
if (form) form.reset();
|
|
if (addRuleModal) addRuleModal.classList.add('show');
|
|
}
|
|
|
|
function closeAddRuleModal() {
|
|
if (addRuleModal) addRuleModal.classList.remove('show');
|
|
}
|
|
|
|
if (addRuleBtn) {
|
|
addRuleBtn.addEventListener('click', openAddRuleModal);
|
|
}
|
|
|
|
if (addRuleModal) {
|
|
// Close buttons
|
|
addRuleModal.querySelectorAll('[data-dismiss="modal"]').forEach(button => {
|
|
button.addEventListener('click', closeAddRuleModal);
|
|
});
|
|
// Backdrop click
|
|
addRuleModal.addEventListener('click', (event) => {
|
|
if (event.target === addRuleModal) {
|
|
closeAddRuleModal();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Handle Add Rule Form Submission (Simulation)
|
|
const addRuleForm = document.getElementById('addRuleForm');
|
|
if(addRuleForm) {
|
|
addRuleForm.addEventListener('submit', (event) => {
|
|
event.preventDefault();
|
|
alert('维护规则已保存（模拟）');
|
|
// Add logic here to actually save data and potentially update the table
|
|
closeAddRuleModal();
|
|
});
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |