Skip to content

A
aozhiYX
Commit abcfa1eb by suyuchen
Options

feat(sidebar): 添加侧边栏导航和升级记录页面

- 创建 aside.html 侧边栏组件，包含设备管理、工单管理、基本设置等导航菜单 - 实现可折叠子菜单功能，支持设备编码管理、工单池、升级记录等功能入口 - 添加 toggleSubmenu JavaScript 函数用于控制子菜单展开收起 - 创建 escalation-records.html 升级记录列表页面，包含完整的页面结构和样式 - 实现升级记录表格展示功能，支持筛选和分页操作 - 配置 .gitignore 文件忽略 IDE 相关文件和配置
parent 9e304fa8
Showing with 233 additions and 11 deletions
aside.html
......@@ -21,19 +21,75 @@
<a href="二维码列表页.html" class="nav-subitem ">
设备编码管理
</a>
<a href="设备档案.html" class="nav-subitem ">
<a href="设备档案1.html" class="nav-subitem ">
设备档案
</a>
<a href="认证管理.html" class="nav-subitem ">
认证管理
<a href="设备机型.html" class="nav-subitem ">
设备机型
</a>
<a href="制造商维护.html" class="nav-subitem ">
制造商维护
</div>
<div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M4 4h12a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"/>
<path d="M7 9h6M7 12h4"/>
</svg>
<span>认证管理</span>
</div>
<svg class="nav-arrow nav-icon" viewBox="0 0 20 20">
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
</svg>
</div>
<div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M4 4h12a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"/>
<path d="M7 9h6M7 12h4"/>
</svg>
<span>邀请注册</span>
</div>
<svg class="nav-arrow nav-icon" viewBox="0 0 20 20">
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
</svg>
</div>
<div class="nav-submenu">
<a href="我的黄页.html" class="nav-subitem ">
我的黄页
</a>
</div>
<div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M4 4h12a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"/>
<path d="M7 9h6M7 12h4"/>
</svg>
<span>账户管理</span>
</div>
<svg class="nav-arrow nav-icon" viewBox="0 0 20 20">
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
</svg>
</div>
<div class="nav-submenu">
<a href="账户档案.html" class="nav-subitem ">
账户档案
</a>
</div>
<div class="nav-item has-submenu expanded" onclick="toggleSubmenu(this)">
<div style="display: flex; align-items: center; gap: 12px;">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M4 4h12a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"/>
<path d="M7 9h6M7 12h4"/>
</svg>
<span>知识库</span>
</div>
<svg class="nav-arrow nav-icon" viewBox="0 0 20 20">
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
</svg>
</div>
<div class="nav-submenu">
<a href="知识仓库.html" class="nav-subitem ">
知识仓库
</a>
</div>
<!-- 工单管理 -->
......
h5.html 0 → 100644
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
</style>
<body>
<img src="./h5.png" alt="" style="margin: 0 auto;display:block;"/>
</body>
</html>
\ No newline at end of file
h5.png 0 → 100644
h5.png

353 KB

img.png 0 → 100644
img.png

75.3 KB

img_1.png 0 → 100644
img_1.png

107 KB

img_2.png 0 → 100644
img_2.png

118 KB

img_3.png 0 → 100644
img_3.png

9.02 KB

img_4.png 0 → 100644
img_4.png

58.9 KB

js.js
......@@ -8,4 +8,117 @@ async function loadSidebar() {
}
}
document.addEventListener('DOMContentLoaded', loadSidebar);
\ No newline at end of file
// 批量上传功能
function initBatchUpload() {
const batchUploadBtn = document.getElementById('batch-upload-btn');
const batchUploadModal = document.getElementById('batch-upload-modal');
const closeBatchUploadModal = document.getElementById('close-batch-upload-modal');
const cancelBatchUploadBtn = document.getElementById('cancel-batch-upload-btn');
const startUploadBtn = document.getElementById('start-upload-btn');
if (batchUploadBtn && batchUploadModal) {
// 显示批量上传模态框
batchUploadBtn.addEventListener('click', () => {
batchUploadModal.style.display = 'flex';
});
// 关闭批量上传模态框
function closeUploadModal() {
batchUploadModal.style.display = 'none';
}
if (closeBatchUploadModal) {
closeBatchUploadModal.addEventListener('click', closeUploadModal);
}
if (cancelBatchUploadBtn) {
cancelBatchUploadBtn.addEventListener('click', closeUploadModal);
}
// 点击模态框外部区域关闭模态框
batchUploadModal.addEventListener('click', (event) => {
if (event.target === batchUploadModal) {
closeUploadModal();
}
});
}
// 文件上传功能
const uploadArea = document.getElementById('upload-area');
const batchFileInput = document.getElementById('batch-file-input');
const fileNameDisplay = document.getElementById('file-name-display');
const progressSection = document.getElementById('progress-section');
if (uploadArea && batchFileInput) {
// 点击上传区域触发文件选择
uploadArea.addEventListener('click', () => {
batchFileInput.click();
});
// 文件选择事件
batchFileInput.addEventListener('change', (event) => {
if (event.target.files.length > 0) {
const file = event.target.files[0];
if (fileNameDisplay) {
fileNameDisplay.textContent = `已选择文件: ${file.name}`;
fileNameDisplay.style.display = 'block';
}
if (startUploadBtn) {
startUploadBtn.disabled = false;
}
if (progressSection) {
progressSection.style.display = 'block';
}
}
});
// 拖拽上传功能
uploadArea.addEventListener('dragover', (event) => {
event.preventDefault();
uploadArea.classList.add('dragover');
});
uploadArea.addEventListener('dragleave', () => {
uploadArea.classList.remove('dragover');
});
uploadArea.addEventListener('drop', (event) => {
event.preventDefault();
uploadArea.classList.remove('dragover');
if (event.dataTransfer.files.length > 0) {
const file = event.dataTransfer.files[0];
// 检查文件类型
if (file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
file.type === 'application/vnd.ms-excel' ||
file.type === 'text/csv') {
// 创建新的FileList来更新input的值
batchFileInput.files = event.dataTransfer.files;
if (fileNameDisplay) {
fileNameDisplay.textContent = `已选择文件: ${file.name}`;
fileNameDisplay.style.display = 'block';
}
if (startUploadBtn) {
startUploadBtn.disabled = false;
}
if (progressSection) {
progressSection.style.display = 'block';
}
} else {
alert('请上传Excel或CSV文件');
}
}
});
}
}
document.addEventListener('DOMContentLoaded', () => {
loadSidebar();
initBatchUpload();
});
\ No newline at end of file
二维码列表页.html
This source diff could not be displayed because it is too large. You can view the blob instead.
认证管理.html
<!DOCTYPE html>
<!DOCTYPE html>
......@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备编码信息</title>
<title>设备档案</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
......@@ -1300,8 +1300,40 @@
<body>
<div class="app-container">
<div id="sidebar-container"></div>
<img src="./企业微信截图_09590b68-0b98-4b07-9d10-48af38e122a6.png" alt="" style="width: 80%;position: fixed;right: 0;top: 0">
<header class="top-header">
<div class="header-left">
<div class="breadcrumb">
<span>首页</span>
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current">设备档案编辑</span>
</div>
</div>
<div class="header-right">
<button class="header-icon-btn" title="通知">
<svg class="nav-icon" viewBox="0 0 20 20">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/>
</svg>
<span class="notification-badge"></span>
</button>
<div class="lang-switcher">
<button class="lang-btn active">中文</button>
<button class="lang-btn">EN</button>
</div>
<div class="user-avatar">管</div>
</div>
</header>
<div class="main-content">
<div class="content-area">
<div class="card">
<img src="./企业微信截图_09590b68-0b98-4b07-9d10-48af38e122a6.png" alt="" style="width: 100%;">
</div>
</div>
</div>
</div>
</body>
<script src="./js.js"></script>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment