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 7257 additions and 1178 deletions
aside.html
...@@ -21,19 +21,75 @@ ...@@ -21,19 +21,75 @@
<a href="二维码列表页.html" class="nav-subitem "> <a href="二维码列表页.html" class="nav-subitem ">
设备编码管理 设备编码管理
</a> </a>
<a href="设备档案.html" class="nav-subitem "> <a href="设备档案1.html" class="nav-subitem ">
设备档案 设备档案
</a> </a>
<a href="认证管理.html" class="nav-subitem "> <a href="设备机型.html" class="nav-subitem ">
认证管理 设备机型
</a> </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> </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 href="知识仓库.html" class="nav-subitem ">
知识仓库 知识仓库
</a> </a>
</div> </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() { ...@@ -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
<!DOCTYPE html> <!DOCTYPE html>
...@@ -3,9 +3,13 @@ ...@@ -3,9 +3,13 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style> <style>
a {
text-decoration: none;
}
:root { :root {
--primary-color: #1B64F3; --primary-color: #1B64F3;
--primary-hover: #1554D3; --primary-hover: #1554D3;
...@@ -334,7 +338,12 @@ ...@@ -334,7 +338,12 @@
} }
/* 主内容区域 - 已调整左右内边距 */ /* 主内容区域 - 已调整左右内边距 */
.main-content {flex: 1; padding: 24px; overflow-y: auto; min-height: 100vh; margin-left: 260px; .main-content {
flex: 1;
padding: 24px;
overflow-y: auto;
min-height: 100vh;
margin-left: 260px;
margin-left: var(--sidebar-width); margin-left: var(--sidebar-width);
margin-top: var(--header-height); margin-top: var(--header-height);
/* 调整左右内边距，从 8px 增加到 32px，以利用更多空间 */ /* 调整左右内边距，从 8px 增加到 32px，以利用更多空间 */
...@@ -1127,14 +1136,14 @@ ...@@ -1127,14 +1136,14 @@
</style> </style>
</head> </head>
<body> <body>
<div class="app-container"> <div class="app-container">
<div id="sidebar-container"></div> <div id="sidebar-container"></div>
<header class="top-header"> <header class="top-header">
<div class="header-left"> <div class="header-left">
<div class="breadcrumb"> <div class="breadcrumb">
<span>首页</span> <span>首页</span>
<span class="breadcrumb-separator">/</span> <span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current">设备编码管理</span> <span class="breadcrumb-current">设备编码信息</span>
</div> </div>
</div> </div>
<div class="header-right"> <div class="header-right">
...@@ -1157,14 +1166,6 @@ ...@@ -1157,14 +1166,6 @@
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<div class="card-title">设备编码信息</div> <div class="card-title">设备编码信息</div>
<div style="display: flex; gap: 12px;">
<button class="btn btn-primary" id="add-qrcode-btn">
<i class="fas fa-plus"></i> 新增二维码
</button>
<button class="btn btn-primary" id="batch-upload-btn" style="background: #17a2b8;">
<i class="fas fa-upload"></i> 批量上传
</button>
</div>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="table-container"> <div class="table-container">
...@@ -1178,13 +1179,16 @@ ...@@ -1178,13 +1179,16 @@
<th>生成时间</th> <th>生成时间</th>
<th>创建人所属部门</th> <th>创建人所属部门</th>
<th>创建人</th> <th>创建人</th>
<th>信息披露</th>
<th>操作</th> <th>操作</th>
</tr> </tr>
</thead> </thead>
<tbody id="qrcode-table-body"> <tbody id="qrcode-table-body">
<tr data-id="1"> <tr data-id="1">
<td><strong>客服终端-01</strong></td> <td><strong>客服终端-01</strong></td>
<td><code style="background: rgba(27, 100, 243, 0.1); padding: 4px 8px; border-radius: 4px; color: var(--primary-color);">KF-2023001</code></td> <td><code
style="background: rgba(27, 100, 243, 0.1); padding: 4px 8px; border-radius: 4px; color: var(--primary-color);">KF-2023001</code>
</td>
<td>智能客服终端</td> <td>智能客服终端</td>
<td class="table-cell-number">3</td> <td class="table-cell-number">3</td>
<td class="table-cell-date">2023-06-15</td> <td class="table-cell-date">2023-06-15</td>
...@@ -1192,24 +1196,84 @@ ...@@ -1192,24 +1196,84 @@
<td>张三</td> <td>张三</td>
<td> <td>
<div class="action-buttons"> <div class="action-buttons">
<button class="action-btn view-btn" > <a href="设备档案1.html" title="设备档案">
<!-- <input type="radio" name="qrcode-radio"/>--> <div style="position: relative">
设备档案 <span style=" border-radius: 50%;
</button> position: absolute;
<button class="action-btn view-btn" > right: -6px;
<!-- <input type="radio" name="qrcode-radio"/>--> top: -14px;
认证管理 color: red;
</button> font-size: 12px;">+9</span>
<button class="action-btn copy-btn" > <svg t="1767089813064" class="icon" viewBox="0 0 1024 1024"
<!-- <input type="radio" name="qrcode-radio"/>--> version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7734"
制造商 width="20" height="20">
</button> <path d="M603.757 37.735H379.595l-81.665 82.174v60.363h305.827V37.735zM563.27 139.95h-61.604V78.222h61.604v61.728zM644.568 833.878H256.792l-61.198 81.463h-40.853v40.851h592.733v-40.851h-40.853zM950.803 466.081v-40.813l-61.361-41.219v-44.516c0-76.781-62.256-138.998-138.997-138.998h-45.247v0.244h-590.74L12 302.833v387.328l101.196 102.051h643.067v-0.529c74.057-3.092 133.179-63.924 133.179-138.713v-44.19l61.605-40.607v-40.365l60.953-0.162v-61.85l-61.197 0.285zM705.197 710.587H154.09V649.39h551.107v61.197z m0-122.395H154.09v-61.32h551.107v61.32z m0-122.558H154.09v-60.873h551.107v60.873z m0-122.153H154.09v-61.076h551.107v61.076z"
<button class="action-btn copy-btn" > fill="#d6d6d6" p-id="7735"></path>
<!-- <input type="radio" name="qrcode-radio"/>--> </svg>
知识仓库 </div>
</button> <!-- <input type="radio" name="qrcode-radio"/>-->
</a>
<a href="认证管理.html" title="认证管理">
<svg t="1767093026856" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="20603" width="20" height="20">
<path d="M870.6413903266091 65.81519746696068H168.21865706862025c-59.70593416290013 0-105.36340980691891 45.65747927960523-105.36340980691891 105.36340980691891v702.4227332579883c0 59.70593416290013 45.65747927960523 105.36340980691891 105.36340980691891 105.36340980691891h702.4227332579883c59.70593416290013 0 105.36340980691891-45.65747927960523 105.36340980691891-105.36340980691891V171.17860727387927c0-59.70593416290013-45.65747927960523-105.36340980691891-105.36340980691891-105.36340980691891z m-101.8512951771986 597.0593234510693c-45.65747927960523 70.24227441647477-105.36340980691891 126.4360903140681-186.14202447696837 158.04511471037844-17.56056951301529 7.02422562385427-35.12113539044417 10.536340253574611-52.68170853904588 14.048454883294953-24.584795136869555 3.512114629720343-45.65747927960523-3.512114629720343-66.730156151168-10.536340253574611-49.16959027373911-17.56056951301529-87.80284029390361-45.65747927960523-126.43609394965456-77.26650004032905-31.609024396310243-28.096909766589906-56.19381953317981-59.70593416290013-77.26650004032905-94.82706955334432-10.536340253574611-28.096909766589906-21.072680507149222-63.21804515703405-21.07268414273563-94.82706955334432v-259.896409887577c14.048454883294953 0 31.609024396310243 0 45.65747927960523-3.512114629720343 49.16959027373911-3.512114629720343 91.31495492362396-17.56056951301529 136.9724342032292-35.12113902603058 31.609024396310243-14.048454883294953 66.73015978675444-31.609024396310243 94.82706955334432-52.681704903459455 3.512114629720343-3.512114629720343 7.02422562385427-3.512114629720343 7.02422562385427 0 42.14536464988486 31.609024396310243 91.31495492362396 52.681704903459455 143.99665982708342 70.24227441647477 38.633250020164525 14.048454883294953 80.77861467004938 17.56056951301529 122.92397931993422 17.56056951301529h10.536340253574611V557.5111111111112c0 38.633250020164525-10.536340253574611 73.75438541060868-31.609020760723848 105.36340980691891z"
p-id="20604" fill="#67C23A"></path>
<path d="M480.79677185965676 564.5353367349655l-73.75438541060868-63.21804515703405-38.633250020164525 42.14536464988486 119.41186469021387 94.82706955334432 182.62990984724792-196.6783647305429-42.14536464988486-35.12113902603058z"
p-id="20605" fill="#67C23A"></path>
</svg>
</a>
<a href="账户档案.html" title="制造商">
<svg t="1767093151248" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="21778" width="20" height="20">
<path d="M849.95335 558.361727a17.650062 17.650062 0 0 0-25.141233-0.781453 18.188995 18.188995 0 0 0-0.754507 25.437647l0.296414 0.296413 26.946659 26.219099a19.563275 19.563275 0 0 0 26.192153 0 17.865635 17.865635 0 0 0 5.389332-13.123023 16.167996 16.167996 0 0 0-5.389332-11.85653z"
fill="#67C23A" p-id="21779"></path>
<path d="M835.644674 513.549433h44.084735a17.811742 17.811742 0 0 0 1.293439-35.56959h-44.084734a17.811742 17.811742 0 0 0-1.53596 35.56959z"
fill="#67C23A" p-id="21780"></path>
<path d="M836.911167 438.15268a18.862662 18.862662 0 0 0 13.06913-5.039025l26.946659-26.192153a17.838688 17.838688 0 0 0 5.389332-13.14997 16.410516 16.410516 0 0 0-5.604905-11.964316 18.458462 18.458462 0 0 0-25.464593 0.16168l-26.94666 26.192152a17.650062 17.650062 0 0 0-5.389331 13.123023 16.410516 16.410516 0 0 0 5.793531 12.206837 20.371674 20.371674 0 0 0 12.206837 4.661772z"
fill="#67C23A" p-id="21781"></path>
<path d="M641.52094 651.785795h0.511987c9.781637 0.269467 17.946475-31.877898 18.242888-41.767322v-47.91116a36.29715 36.29715 0 0 0-10.56309-26.326886 38.264256 38.264256 0 0 0-24.952607-11.263704l8.353465-11.883477a16.006316 16.006316 0 0 0 2.991079-9.970263v-20.317782a37.132497 37.132497 0 0 0-37.213337-37.051656h-173.779005a37.132497 37.132497 0 0 0-37.99479 36.243257v21.099234a18.404568 18.404568 0 0 0 2.182679 8.515144l7.518118 13.47333a37.967843 37.967843 0 0 0-33.683324 37.375016v47.533907c0.458093 10.212784 8.973238 42.467935 19.078235 42.009842 9.431331-0.4042 17.003342-32.335991 17.434489-42.009842v-47.533907a2.101839 2.101839 0 0 1 2.047946-1.994052h25.787953a19.644115 19.644115 0 0 0 8.622931-2.074893 4.122839 4.122839 0 0 0 1.185653-0.835347 6.682772 6.682772 0 0 0 1.212599-1.643746 16.167996 16.167996 0 0 0 3.718639-4.365359 18.054262 18.054262 0 0 0 2.964133-7.302544 3.206652 3.206652 0 0 1-0.215574 1.212599 8.515144 8.515144 0 0 0 0.754507-2.694666 4.607879 4.607879 0 0 0-1.104813-3.206652 10.778664 10.778664 0 0 0-1.077866-5.389332l-19.778848-35.89295v-15.467383a1.53596 1.53596 0 0 1 1.509013-1.482066h173.455645a1.562906 1.562906 0 0 1 1.509013 1.482066v14.60509l-24.467566 34.59951a8.461251 8.461251 0 0 0-2.26352 5.389332 9.134918 9.134918 0 0 0-1.805426 5.227652 4.527039 4.527039 0 0 0 0.673667 2.479093 15.251809 15.251809 0 0 0 2.829399 5.874371 11.560117 11.560117 0 0 1 0.511986 0.997027 8.515144 8.515144 0 0 0 2.398253 3.664746 4.419252 4.419252 0 0 0 2.101839 2.155732 11.344544 11.344544 0 0 0 4.607879 0.997027 9.350491 9.350491 0 0 0 5.092919 1.616799h31.904844a2.101839 2.101839 0 0 1 2.047947 1.994053v47.533907c-0.08084 9.916371 7.868425 42.306255 17.650061 42.306255z"
fill="#67C23A" p-id="21782"></path>
<path d="M143.816143 513.603326h43.114655a17.865635 17.865635 0 0 0 18.242888-17.434488v-0.350307a18.269835 18.269835 0 0 0-18.269835-17.784795H144.112556a17.811742 17.811742 0 0 0-18.242888 17.434489v0.350306a17.838688 17.838688 0 0 0 17.946475 17.784795z"
fill="#67C23A" p-id="21783"></path>
<path d="M147.561729 406.463409l26.515513 25.814899a16.464409 16.464409 0 0 0 12.880503 5.928266 18.108155 18.108155 0 0 0 13.096076-5.012079 17.784795 17.784795 0 0 0 5.389332-13.176917 16.167996 16.167996 0 0 0-5.389332-11.77569l-26.946659-26.731086a19.051288 19.051288 0 0 0-13.47333-5.389332 17.811742 17.811742 0 0 0-12.637983 29.803006z"
fill="#67C23A" p-id="21784"></path>
<path d="M173.915562 558.361727l-26.94666 26.2191a17.865635 17.865635 0 0 0-5.389332 13.123023 16.167996 16.167996 0 0 0 5.389332 11.829583 19.509381 19.509381 0 0 0 26.165206 0l26.94666-26.192153a17.703955 17.703955 0 0 0 5.389332-13.123023 16.302729 16.302729 0 0 0-5.577959-11.991263 19.293808 19.293808 0 0 0-25.976579 0.134733z"
fill="#67C23A" p-id="21785"></path>
<path d="M958.871747 781.722586l-112.717876-111.235809a35.623484 35.623484 0 0 0-26.219099-10.590037H204.365287a39.288229 39.288229 0 0 0-26.596353 10.590037L65.024111 781.69564A37.34807 37.34807 0 0 0 53.895141 809.127339a36.13547 36.13547 0 0 0 11.587064 25.572379 38.937923 38.937923 0 0 0 52.545985-0.485039l49.36628-48.665667v174.156259A64.914502 64.914502 0 0 0 231.446679 1024h561.029447a64.941449 64.941449 0 0 0 64.025262-64.402516v-174.075419l49.554907 48.908187a39.045709 39.045709 0 0 0 52.330412 0.296413 36.027683 36.027683 0 0 0 11.69485-25.57238 37.375016 37.375016 0 0 0-11.20981-27.431699z m-176.689245-47.533907v216.112208H242.25229v-216.112208z"
fill="#67C23A" p-id="21786"></path>
<path d="M275.100267 641.788585h32.012631a37.18639 37.18639 0 0 0 1.428173-74.238047h-17.084182v-108.271677l142.978975-85.82511h0.134733a139.475909 139.475909 0 0 0 154.700771-0.134733l143.140654 85.90595v107.786637h-14.308676a36.243257 36.243257 0 0 0-25.841846 9.835531 37.42891 37.42891 0 0 0-11.53317 25.841846 36.728297 36.728297 0 0 0 34.51867 38.560669h32.713245a58.743717 58.743717 0 0 0 58.71677-58.501197v-144.434094a23.659167 23.659167 0 0 0-1.104813-7.248651 36.916923 36.916923 0 0 0-5.928265-12.934397 38.021736 38.021736 0 0 0-2.883292-4.041999 33.548591 33.548591 0 0 0-3.476119-4.338412 23.55138 23.55138 0 0 0-4.688719-3.637799l-150.335412-89.570695a137.724376 137.724376 0 0 0 2.209626-111.370543l79.546538-33.198284a25.141233 25.141233 0 0 0 8.083998-5.389332 32.335991 32.335991 0 0 0 8.515144-10.212784 30.530565 30.530565 0 0 0 3.341386-7.329491 27.189179 27.189179 0 0 0 2.856346-11.802637V79.142338a79.708218 79.708218 0 0 0-78.145312-79.223178H358.769644a79.600432 79.600432 0 0 0-79.169285 78.818978v59.040131a24.009473 24.009473 0 0 0 2.398253 10.616984c0.8084 2.317413 1.724586 4.580932 2.856346 7.033078a23.605274 23.605274 0 0 0 4.419252 6.116891 17.030289 17.030289 0 0 0 2.883293 2.50604 27.485592 27.485592 0 0 0 10.778663 7.706744l80.004632 33.198285a141.281335 141.281335 0 0 0-10.778664 53.623852 136.080629 136.080629 0 0 0 12.880503 57.935317L234.707225 406.086156a23.63222 23.63222 0 0 0-9.161864 9.99721 29.452699 29.452699 0 0 0-2.694666 4.661772 40.931975 40.931975 0 0 0-3.853372 8.326518 29.317965 29.317965 0 0 0-1.805427 9.242704v144.461041a59.013184 59.013184 0 0 0 57.908371 59.013184z m241.792374-448.095998a63.917476 63.917476 0 0 1 60.683877 64.887556 65.534275 65.534275 0 0 1-64.402516 65.130075h-1.023973a61.680903 61.680903 0 0 1-43.788321-20.721981 65.722902 65.722902 0 0 1-16.814716-46.69856 63.486329 63.486329 0 0 1 64.375569-62.624037z m152.113892-114.388569v34.141418l-76.771032 32.335991a133.844057 133.844057 0 0 0-79.546539-26.2191h-0.592826a133.763217 133.763217 0 0 0-80.112418 25.787953l-77.444699-32.335991V78.872872a4.473145 4.473145 0 0 1 4.311465-4.553986h305.14397a5.389332 5.389332 0 0 1 5.200705 5.092919z"
fill="#67C23A" p-id="21787"></path>
</svg>
</a>
<a href="知识仓库.html" title="知识仓库">
<svg t="1767093178753" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="22899" width="20" height="20">
<path d="M828.8256 74.0864c43.9296 0 79.9744 35.072 79.9744 78.848V881.152c0 43.776-36.0448 78.848-80.0256 78.848H195.2256a79.4112 79.4112 0 0 1-79.9744-78.848V152.9856c0-43.8272 36.0448-78.848 80.0256-78.848h633.5488z m0 76.8H195.2256c-2.048 0-3.2256 1.1776-3.2256 2.048V881.152c0 0.8704 1.1776 2.048 3.2256 2.048h633.5488c2.048 0 3.2256-1.1776 3.2256-2.048V152.9856c0-0.9216-1.1776-2.048-3.2256-2.048z"
fill="#67C23A" p-id="22900"></path>
<path d="M724.7872 74.0864a38.4 38.4 0 0 1 38.4 38.4V476.672a38.4 38.4 0 0 1-65.7408 26.9312l-97.4848-99.1232-97.3824 99.1232a38.4 38.4 0 0 1-65.4336-21.6576l-0.3584-5.2736V112.5376a38.4 38.4 0 0 1 38.4-38.4h249.6z m-38.4 76.8h-172.8v231.936l59.0336-60.0064a38.4 38.4 0 0 1 50.432-3.7888l4.3008 3.7888 59.0336 59.9552V150.8864z"
fill="#67C23A" p-id="22901"></path>
</svg>
</a>
</div> </div>
</td> </td>
<td>
<span style="margin-right: 10px;cursor: pointer;" id="code">
<svg t="1767089679295" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="5676" width="20" height="20"><path
d="M423.836543 114.819049l0-0.274246L204.08256 114.544803c-45.911656 0-83.09451 36.932144-83.356476 82.59309l-0.023536 0 0 207.579709c0 2.468215 0.500397 4.782933 1.239224 7.000438 6.678096 39.245839 40.831964 69.164243 82.140789 69.164243L423.836543 480.882282l0-0.237407c38.877449-2.432399 70.477144-31.363312 76.798107-68.926836 0.763386-2.217505 1.289366-4.532223 1.289366-7.000438L501.924016 197.137893l-0.025583 0C501.683539 153.253406 467.244168 117.538997 423.836543 114.819049zM458.038506 393.46021c0 24.14798-19.654642 43.705408-43.88551 43.705408L208.445938 437.165618c-24.230867 0-43.858904-19.557428-43.858904-43.705408L164.587034 201.980177c0-24.149003 19.628036-43.717687 43.858904-43.717687l205.708082 0c24.230867 0 43.88551 19.569708 43.88551 43.717687L458.039529 393.46021zM902.246517 195.111746c-0.215918-42.799782-33.818223-77.644381-76.153424-80.304977l0-0.261966L634.384863 114.544803c-44.790112 0-81.040734 36.037774-81.304747 80.56592l-0.023536 0 0 202.511273c0 2.407839 0.476861 4.673439 1.240247 6.831592 6.487761 38.292118 39.830147 67.472717 80.08906 67.472717l191.70823 0 0-0.226151c37.921681-2.385327 68.734454-30.613228 74.961272-67.246567 0.738827-2.158153 1.216711-4.423753 1.216711-6.831592L902.2721 195.111746 902.246517 195.111746zM859.461061 386.638851c0 23.551392-19.152199 42.643216-42.813085 42.643216L638.678656 429.282067c-23.658839 0-42.834574-19.091824-42.834574-42.643216L595.844082 199.832258c0-23.552415 19.175735-42.643216 42.834574-42.643216l177.969321 0c23.660886 0 42.813085 19.091824 42.813085 42.643216L859.461061 386.638851zM415.680792 539.887141l0-0.260943L201.839473 539.626197c-44.670385 0-80.874959 35.94363-81.114412 80.375585l-0.023536 0 0 201.974038c0 2.420119 0.477884 4.687766 1.215688 6.821359 6.464225 38.181601 39.73498 67.316152 79.922261 67.316152L415.680792 896.113331l0-0.236384c37.824467-2.350534 68.567655-30.529317 74.744331-67.079768 0.762363-2.133593 1.24127-4.40124 1.24127-6.821359L491.666394 620.001783l-0.049119 0C491.402381 577.308425 457.919802 542.53648 415.680792 539.887141zM448.975083 811.04077c0 23.493064-19.127639 42.524512-42.691311 42.524512L212.953601 853.565283c0 0-0.022513 0-0.047072 0l-6.822382 0c-23.563672 0-42.690288-19.031449-42.690288-42.524512L163.393859 624.687502c0-23.469528 19.126616-42.525536 42.690288-42.525536l200.200648 0c23.563672 0 42.691311 19.056008 42.691311 42.525536L448.976106 811.04077zM721.154066 753.120616c-14.741749 0-26.66736 11.508102-26.66736 25.699312l0 51.395554c0 14.228049 11.924587 25.721825 26.66736 25.721825 14.736633 0 26.663266-11.492752 26.663266-25.721825l0-51.395554C747.817332 764.628718 735.891721 753.120616 721.154066 753.120616zM834.775846 727.398792c-14.739702 0-26.665313 11.494799-26.665313 25.697265l0 77.118402c0 14.214746 11.924587 25.701358 26.665313 25.701358 14.763239 0 26.688849-11.487635 26.688849-25.701358l0-77.118402C861.464695 738.894613 849.538061 727.398792 834.775846 727.398792zM834.775846 573.172221c-14.739702 0-26.665313 11.506055-26.665313 25.722848l0 51.395554c0 14.189164 11.924587 25.697265 26.665313 25.697265 14.763239 0 26.688849-11.508102 26.688849-25.697265l0-51.395554C861.464695 584.679299 849.538061 573.172221 834.775846 573.172221zM721.154066 573.195757c-14.741749 0-26.66736 11.507078-26.66736 25.709545L694.486706 701.735295c0 14.192234 11.924587 25.686009 26.66736 25.686009 14.736633 0 26.663266-11.492752 26.663266-25.686009L747.817332 598.905302C747.817332 584.702835 735.891721 573.195757 721.154066 573.195757zM606.050538 701.735295c-14.68956 0-26.640754 11.435447-26.640754 25.663496l0 102.81669c0 14.214746 11.951193 25.701358 26.640754 25.701358 14.787798 0 26.712385-11.487635 26.712385-25.701358L632.762923 727.398792C632.763946 713.170742 620.838336 701.735295 606.050538 701.735295zM606.050538 573.172221c-14.68956 0-26.640754 11.506055-26.640754 25.722848l0 25.709545c0 14.201443 11.951193 25.686009 26.640754 25.686009 14.787798 0 26.712385-11.484565 26.712385-25.686009l0-25.709545C632.763946 584.679299 620.838336 573.172221 606.050538 573.172221z"
fill="#5D5D5D" p-id="5677"></path></svg>
</span>
<span style="cursor: pointer;">
<a href="h5.html">
<svg t="1767089714605" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="6703" width="20" height="20"><path
d="M512 736a224 224 0 1 1 0-448 224 224 0 0 1 0 448z m0-64a160 160 0 1 0 0-320 160 160 0 0 0 0 320z"
p-id="6704"></path><path
d="M512 864C323.232 864 154.144 751.264 5.44 529.856a32 32 0 0 1 0-35.712C154.144 272.704 323.2 160 512 160c188.768 0 357.856 112.736 506.56 334.144a32 32 0 0 1 0 35.712C869.856 751.296 700.8 864 512 864z m0-64c159.84 0 306.72-94.784 441.248-288C818.72 318.784 671.84 224 512 224c-159.84 0-306.72 94.784-441.248 288C205.28 705.216 352.16 800 512 800z"
p-id="6705"></path></svg>
</a>
</span>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -1218,9 +1282,9 @@ ...@@ -1218,9 +1282,9 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="modal" id="view-modal"> <div class="modal" id="view-modal">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">二维码详情</h3> <h3 class="modal-title">二维码详情</h3>
...@@ -1229,7 +1293,8 @@ ...@@ -1229,7 +1293,8 @@
<div class="modal-body"> <div class="modal-body">
<div class="qrcode-preview-large"> <div class="qrcode-preview-large">
<div class="qrcode-image" id="modal-qrcode-image"> <div class="qrcode-image" id="modal-qrcode-image">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjZmZmIj48cmVjdCB3aWR0aD0iMTkwIiBoZWlnaHQ9IjE5MCIgZmlsbD0iIzAwMCIvPjxyZWN0IHg9IjIwIiB5PSIyMCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjcwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMTEwIiB5PSIyMCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjcwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMjAiIHk9IjExMCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjcwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMTEwIiB5PSIxMTAiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgZmlsbD0iIzAwMCIvPjxyZWN0IHg9IjIwIiB5PSIxOTAiIHdpZHRoPSI3MCIgaGVpZ2h0PSIwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMTEwIiB5PSIxOTAiIHdpZHRoPSI3MCIgaGVpZ2h0PSIwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PC9zdmc+" alt="二维码"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjZmZmIj48cmVjdCB3aWR0aD0iMTkwIiBoZWlnaHQ9IjE5MCIgZmlsbD0iIzAwMCIvPjxyZWN0IHg9IjIwIiB5PSIyMCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjcwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMTEwIiB5PSIyMCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjcwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMjAiIHk9IjExMCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjcwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMTEwIiB5PSIxMTAiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgZmlsbD0iIzAwMCIvPjxyZWN0IHg9IjIwIiB5PSIxOTAiIHdpZHRoPSI3MCIgaGVpZ2h0PSIwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMTEwIiB5PSIxOTAiIHdpZHRoPSI3MCIgaGVpZ2h0PSIwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PC9zdmc+"
alt="二维码">
</div> </div>
<p>扫描二维码可查看设备详情并联系客服</p> <p>扫描二维码可查看设备详情并联系客服</p>
</div> </div>
...@@ -1272,9 +1337,9 @@ ...@@ -1272,9 +1337,9 @@
<button class="btn btn-secondary" id="modal-close-btn">关闭</button> <button class="btn btn-secondary" id="modal-close-btn">关闭</button>
</div> </div>
</div> </div>
</div> </div>
<div class="modal" id="delete-modal"> <div class="modal" id="delete-modal">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">确认删除</h3> <h3 class="modal-title">确认删除</h3>
...@@ -1288,10 +1353,10 @@ ...@@ -1288,10 +1353,10 @@
<button class="btn btn-danger" id="confirm-delete-btn">确认删除</button> <button class="btn btn-danger" id="confirm-delete-btn">确认删除</button>
</div> </div>
</div> </div>
</div> </div>
<!-- 批量上传模态框 --> <!-- 批量上传模态框 -->
<div class="modal batch-upload-modal" id="batch-upload-modal"> <div class="modal batch-upload-modal" id="batch-upload-modal">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">批量上传设备信息</h3> <h3 class="modal-title">批量上传设备信息</h3>
...@@ -1379,16 +1444,34 @@ ...@@ -1379,16 +1444,34 @@
<button class="btn btn-primary" id="start-upload-btn" disabled>开始上传</button> <button class="btn btn-primary" id="start-upload-btn" disabled>开始上传</button>
</div> </div>
</div> </div>
</div> </div>
<div class="model" id="code-modal"
style="display:none;position: fixed;z-index:9999;);width: 100%;height: 100%;left: 0;top: 0;background: rgba(0,0,0,0.8);">
<img src="./img_3.png" alt="" style="width: 200px;display:block;margin: 0 auto;position:fixed;left: 50%;top: 50%;transform: translate(-50%, -50%)"/>
</div>
<script>
let codeBtn = document.getElementById('code');
let codeModal = document.getElementById('code-modal');
codeBtn.addEventListener('click', function () {
codeModal.style.display = 'block';
})
codeModal.addEventListener('click', function (e) {
if (e.target === codeModal) {
codeModal.style.display = 'none';
}
})
<script>
// 子菜单切换功能 // 子菜单切换功能
function toggleSubmenu(element) { function toggleSubmenu(element) {
element.classList.toggle('expanded'); element.classList.toggle('expanded');
} }
// 等待DOM完全加载后再执行所有JavaScript代码 // 等待DOM完全加载后再执行所有JavaScript代码
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function () {
console.log('DOM已完全加载，开始初始化事件监听器'); console.log('DOM已完全加载，开始初始化事件监听器');
// 当前选中的行ID // 当前选中的行ID
...@@ -1422,7 +1505,7 @@ ...@@ -1422,7 +1505,7 @@
const viewButtons = document.querySelectorAll('[data-action="view"]'); const viewButtons = document.querySelectorAll('[data-action="view"]');
if (viewButtons.length > 0) { if (viewButtons.length > 0) {
viewButtons.forEach(button => { viewButtons.forEach(button => {
button.addEventListener('click', function() { button.addEventListener('click', function () {
const row = this.closest('tr'); const row = this.closest('tr');
currentRowId = row.getAttribute('data-id'); currentRowId = row.getAttribute('data-id');
...@@ -1563,7 +1646,7 @@ ...@@ -1563,7 +1646,7 @@
// 点击模态框外部关闭模态框 - 增强版本 // 点击模态框外部关闭模态框 - 增强版本
try { try {
window.addEventListener('click', function(event) { window.addEventListener('click', function (event) {
try { try {
const viewModal = document.getElementById('view-modal'); const viewModal = document.getElementById('view-modal');
const deleteModal = document.getElementById('delete-modal'); const deleteModal = document.getElementById('delete-modal');
...@@ -1587,7 +1670,7 @@ ...@@ -1587,7 +1670,7 @@
try { try {
const addQrcodeBtn = document.getElementById('add-qrcode-btn'); const addQrcodeBtn = document.getElementById('add-qrcode-btn');
if (addQrcodeBtn) { if (addQrcodeBtn) {
addQrcodeBtn.addEventListener('click', function() { addQrcodeBtn.addEventListener('click', function () {
console.log('新增二维码按钮被点击'); console.log('新增二维码按钮被点击');
try { try {
// 跳转到机器二维码制造信息页面，使用相对路径 // 跳转到机器二维码制造信息页面，使用相对路径
...@@ -1633,7 +1716,7 @@ ...@@ -1633,7 +1716,7 @@
try { try {
const batchUploadBtn = document.getElementById('batch-upload-btn'); const batchUploadBtn = document.getElementById('batch-upload-btn');
if (batchUploadBtn) { if (batchUploadBtn) {
batchUploadBtn.addEventListener('click', function() { batchUploadBtn.addEventListener('click', function () {
console.log('批量上传按钮被点击'); console.log('批量上传按钮被点击');
// 重置状态 // 重置状态
resetBatchUploadModal(); resetBatchUploadModal();
...@@ -1669,7 +1752,7 @@ ...@@ -1669,7 +1752,7 @@
try { try {
const templateSelect = document.getElementById('device-template-select'); const templateSelect = document.getElementById('device-template-select');
if (templateSelect) { if (templateSelect) {
templateSelect.addEventListener('change', function() { templateSelect.addEventListener('change', function () {
currentDeviceTemplate = this.value; currentDeviceTemplate = this.value;
console.log('选择的模板:', currentDeviceTemplate); console.log('选择的模板:', currentDeviceTemplate);
}); });
...@@ -1682,7 +1765,7 @@ ...@@ -1682,7 +1765,7 @@
try { try {
const downloadTemplateBtn = document.getElementById('download-template-btn'); const downloadTemplateBtn = document.getElementById('download-template-btn');
if (downloadTemplateBtn) { if (downloadTemplateBtn) {
downloadTemplateBtn.addEventListener('click', function() { downloadTemplateBtn.addEventListener('click', function () {
const selectedTemplate = document.getElementById('device-template-select').value; const selectedTemplate = document.getElementById('device-template-select').value;
if (!selectedTemplate) { if (!selectedTemplate) {
alert('请先选择设备类型模板'); alert('请先选择设备类型模板');
...@@ -1711,7 +1794,7 @@ ...@@ -1711,7 +1794,7 @@
}).join(',') + '\n'; }).join(',') + '\n';
// 创建Blob并下载 // 创建Blob并下载
const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' }); const blob = new Blob(['\ufeff' + csvContent], {type: 'text/csv;charset=utf-8;'});
const link = document.createElement('a'); const link = document.createElement('a');
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
link.setAttribute('href', url); link.setAttribute('href', url);
...@@ -1731,27 +1814,27 @@ ...@@ -1731,27 +1814,27 @@
if (uploadArea && fileInput) { if (uploadArea && fileInput) {
// 点击上传区域 // 点击上传区域
uploadArea.addEventListener('click', function() { uploadArea.addEventListener('click', function () {
fileInput.click(); fileInput.click();
}); });
// 文件选择 // 文件选择
fileInput.addEventListener('change', function(e) { fileInput.addEventListener('change', function (e) {
handleFileSelect(e.target.files[0]); handleFileSelect(e.target.files[0]);
}); });
// 拖拽上传 // 拖拽上传
uploadArea.addEventListener('dragover', function(e) { uploadArea.addEventListener('dragover', function (e) {
e.preventDefault(); e.preventDefault();
uploadArea.classList.add('dragover'); uploadArea.classList.add('dragover');
}); });
uploadArea.addEventListener('dragleave', function(e) { uploadArea.addEventListener('dragleave', function (e) {
e.preventDefault(); e.preventDefault();
uploadArea.classList.remove('dragover'); uploadArea.classList.remove('dragover');
}); });
uploadArea.addEventListener('drop', function(e) { uploadArea.addEventListener('drop', function (e) {
e.preventDefault(); e.preventDefault();
uploadArea.classList.remove('dragover'); uploadArea.classList.remove('dragover');
const file = e.dataTransfer.files[0]; const file = e.dataTransfer.files[0];
...@@ -1782,7 +1865,7 @@ ...@@ -1782,7 +1865,7 @@
try { try {
const startUploadBtn = document.getElementById('start-upload-btn'); const startUploadBtn = document.getElementById('start-upload-btn');
if (startUploadBtn) { if (startUploadBtn) {
startUploadBtn.addEventListener('click', function() { startUploadBtn.addEventListener('click', function () {
if (!selectedFile) { if (!selectedFile) {
alert('请先选择文件'); alert('请先选择文件');
return; return;
...@@ -1810,7 +1893,7 @@ ...@@ -1810,7 +1893,7 @@
// 根据文件类型选择不同的读取方式 // 根据文件类型选择不同的读取方式
if (file.name.endsWith('.csv')) { if (file.name.endsWith('.csv')) {
// CSV文件：使用文本方式读取 // CSV文件：使用文本方式读取
reader.onload = function(e) { reader.onload = function (e) {
let csvData = null; let csvData = null;
let parseError = null; let parseError = null;
...@@ -1845,14 +1928,14 @@ ...@@ -1845,14 +1928,14 @@
alert('数据校验失败：' + error.message); alert('数据校验失败：' + error.message);
} }
}; };
reader.onerror = function(error) { reader.onerror = function (error) {
console.error('文件读取失败:', error); console.error('文件读取失败:', error);
alert('文件读取失败，请重试'); alert('文件读取失败，请重试');
}; };
reader.readAsText(file, 'UTF-8'); reader.readAsText(file, 'UTF-8');
} else { } else {
// Excel文件：使用二进制方式读取（这里使用模拟数据，实际应用中需要使用SheetJS等库） // Excel文件：使用二进制方式读取（这里使用模拟数据，实际应用中需要使用SheetJS等库）
reader.onload = function(e) { reader.onload = function (e) {
try { try {
// 模拟解析Excel数据 // 模拟解析Excel数据
const mockData = generateMockData(50); // 生成50条模拟数据 const mockData = generateMockData(50); // 生成50条模拟数据
...@@ -2135,7 +2218,7 @@ ...@@ -2135,7 +2218,7 @@
try { try {
const downloadErrorBtn = document.getElementById('download-error-btn'); const downloadErrorBtn = document.getElementById('download-error-btn');
if (downloadErrorBtn) { if (downloadErrorBtn) {
downloadErrorBtn.addEventListener('click', function() { downloadErrorBtn.addEventListener('click', function () {
const errorResults = validationResults.filter(r => r.status === 'error'); const errorResults = validationResults.filter(r => r.status === 'error');
if (errorResults.length === 0) { if (errorResults.length === 0) {
alert('没有失败记录'); alert('没有失败记录');
...@@ -2149,7 +2232,7 @@ ...@@ -2149,7 +2232,7 @@
}); });
// 创建Blob并下载 // 创建Blob并下载
const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' }); const blob = new Blob(['\ufeff' + csvContent], {type: 'text/csv;charset=utf-8;'});
const link = document.createElement('a'); const link = document.createElement('a');
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
link.setAttribute('href', url); link.setAttribute('href', url);
...@@ -2182,7 +2265,7 @@ ...@@ -2182,7 +2265,7 @@
// 点击批量上传模态框外部关闭 // 点击批量上传模态框外部关闭
try { try {
window.addEventListener('click', function(event) { window.addEventListener('click', function (event) {
const batchUploadModal = document.getElementById('batch-upload-modal'); const batchUploadModal = document.getElementById('batch-upload-modal');
if (batchUploadModal && event.target === batchUploadModal) { if (batchUploadModal && event.target === batchUploadModal) {
closeBatchUploadModal(); closeBatchUploadModal();
...@@ -2196,7 +2279,7 @@ ...@@ -2196,7 +2279,7 @@
try { try {
const downloadBtn = document.getElementById('modal-download-btn'); const downloadBtn = document.getElementById('modal-download-btn');
if (downloadBtn) { if (downloadBtn) {
downloadBtn.addEventListener('click', function() { downloadBtn.addEventListener('click', function () {
console.log('下载二维码按钮被点击'); console.log('下载二维码按钮被点击');
// 模拟下载操作 // 模拟下载操作
alert('二维码下载成功！'); alert('二维码下载成功！');
...@@ -2212,7 +2295,7 @@ ...@@ -2212,7 +2295,7 @@
const editButtons = document.querySelectorAll('[data-action="edit"]'); const editButtons = document.querySelectorAll('[data-action="edit"]');
if (editButtons.length > 0) { if (editButtons.length > 0) {
editButtons.forEach(button => { editButtons.forEach(button => {
button.addEventListener('click', function() { button.addEventListener('click', function () {
console.log('编辑按钮被点击'); console.log('编辑按钮被点击');
try { try {
const row = this.closest('tr'); const row = this.closest('tr');
...@@ -2242,7 +2325,7 @@ ...@@ -2242,7 +2325,7 @@
const copyButtons = document.querySelectorAll('[data-action="copy"]'); const copyButtons = document.querySelectorAll('[data-action="copy"]');
if (copyButtons.length > 0) { if (copyButtons.length > 0) {
copyButtons.forEach(button => { copyButtons.forEach(button => {
button.addEventListener('click', function() { button.addEventListener('click', function () {
console.log('复制按钮被点击'); console.log('复制按钮被点击');
try { try {
const row = this.closest('tr'); const row = this.closest('tr');
...@@ -2289,7 +2372,7 @@ ...@@ -2289,7 +2372,7 @@
// ESC键关闭模态框 - 增强版本 // ESC键关闭模态框 - 增强版本
try { try {
document.addEventListener('keydown', function(event) { document.addEventListener('keydown', function (event) {
try { try {
if (event.key === 'Escape' || event.keyCode === 27) { if (event.key === 'Escape' || event.keyCode === 27) {
console.log('ESC键被按下，关闭模态框'); console.log('ESC键被按下，关闭模态框');
...@@ -2308,7 +2391,7 @@ ...@@ -2308,7 +2391,7 @@
console.log('所有事件监听器初始化完成'); console.log('所有事件监听器初始化完成');
}); });
</script> </script>
</body> </body>
<script src="./js.js"> </script> <script src="./js.js"></script>
</html> </html>
\ No newline at end of file
制造商维护.html
<!DOCTYPE html> <!DOCTYPE html>
...@@ -1708,261 +1708,6 @@ ...@@ -1708,261 +1708,6 @@
</div> </div>
</div> </div>
<!-- 新增二维码表单模态框 -->
<div class="modal" id="add-modal">
<div class="modal-content add-modal-content" style="max-width: 80%;width: 80%;">
<div class="modal-header">
<h3 class="modal-title">新增二维码</h3>
<button class="close-modal" id="close-add-modal">×</button>
</div>
<div class="modal-body">
<form class="add-modal-form" id="add-form">
<!-- 基础信息区域 -->
<div class="section-title" style="display:flex;justify-content: space-between">
<div class="title">基础信息</div>
<button type="button" class="btn btn-secondary"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
管理
</button>
</div>
<div class="form-row">
<table>
<thead>
<tr>
<th width="41"></th>
<th>设备编码</th>
<th>设备名称</th>
<th>机型名称</th>
<th>出厂日期</th>
<th>设备总锭数</th>
<th>车间</th>
<th>所属工序</th>
<th>使用锭数</th>
<th>Iot编号</th>
<th>Iot模式</th>
<th>Iot状态</th>
<th>创建时间</th>
<th>创建人</th>
<th>生产厂商</th>
<th>PLC厂商</th>
<th>PLC型号</th>
<th>HMI厂商</th>
<!-- <th>操作</th>-->
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="checkbox" class="checkbox"/>
</td>
<td>XS026</td>
<td>细纱机026</td>
<td>FB502A细纱机</td>
<td>2024-01-22 00:00:00</td>
<td>396</td>
<td>细纱车间</td>
<td>细纱工序</td>
<td>396</td>
<td>GI_XS_026</td>
<td>0</td>
<td>2</td>
<td>2024-06-20 20:17:47</td>
<td>张可冉</td>
<td>中国</td>
<td>中国</td>
<td>PLC</td>
<td>中国</td>
<!-- <td></td>-->
</tr>
<tr>
<td>
<input type="radio" name="checkbox" class="checkbox"/>
</td>
<td>XS025</td>
<td>细纱机025</td>
<td>FB502A细纱机</td>
<td>2024-01-22 00:00:00</td>
<td>396</td>
<td>细纱车间</td>
<td>细纱工序</td>
<td>396</td>
<td>GI_XS_025</td>
<td>0</td>
<td>0</td>
<td>2024-06-20 20:17:47</td>
<td>张可冉</td>
<td>中国</td>
<td>中国</td>
<td>PLC</td>
<td>中国</td>
<!-- <td></td>-->
</tr>
<tr>
<td>
<input type="radio" name="checkbox" class="checkbox"/>
</td>
<td>XS024</td>
<td>细纱机024</td>
<td>FB502A细纱机</td>
<td>2024-01-22 00:00:00</td>
<td>396</td>
<td>细纱车间</td>
<td>细纱工序</td>
<td>396</td>
<td>GI_XS_024</td>
<td>0</td>
<td></td>
<td>2024-06-20 20:17:47</td>
<td>张可冉</td>
<td>中国</td>
<td>中国</td>
<td>PLC</td>
<td>中国</td>
<!-- <td></td>-->
</tr>
</tbody>
</table>
</div>
<!-- 附件上传区域 -->
<div class="section-title" style="display:flex;justify-content: space-between">
<div class="title">附件上传</div>
<button type="button" class="btn btn-secondary"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
管理
</button>
</div>
<div class="form-row">
<table border="1" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th width="41"></th>
<th>编号</th>
<th>知识文档名称</th>
<th>知识大类</th>
<th>知识小类</th>
<th>文件名称</th>
<th>文件格式</th>
<th>文件大小</th>
<th>可查阅部门</th>
<th>创建部门</th>
<th>文档管理人</th>
<th>保密级别</th>
<th>更新时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="checkbox1" class="checkbox"/>
</td>
<td>1</td>
<td>111</td>
<td>业务知识库</td>
<td></td>
<td>运维领域.docx</td>
<td>0.016 M</td>
<td></td>
<td>人事部财务部财务部/会计1组</td>
<td>人事部</td>
<td>jiojioGIAdmin update,su</td>
<td>公开级</td>
<td>2025-12-29 15:45:33</td>
</tr>
</tbody>
</table>
</div>
<!-- 认证信息区域 -->
<div class="section-title" style="display:flex;justify-content: space-between">
<div class="title">认证信息</div>
<button type="button" class="btn btn-secondary"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
管理
</button>
</div>
<div class="form-row">
<table border="1" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th width="41"></th>
<th>编号</th>
<th>文档名称</th>
<th>文档类型</th>
<th>更新时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="checkbox1" class="checkbox"/>
</td>
<td>1</td>
<td>电机合规文档</td>
<td>PDF</td>
<td>2025-12-29 15:45:33</td>
</tr>
</tbody>
</table>
</div>
<!-- 制造商信息区域 -->
<div class="section-title">制造商信息</div>
<div class="form-row">
<div class="form-group">
<label for="add-manufacturer">制造商</label>
<input type="text" id="add-manufacturer" placeholder="制造商名称">
</div>
<div class="form-group">
<label for="add-country">国家</label>
<input type="text" id="add-country" placeholder="国家">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="add-website">网址</label>
<input type="text" id="add-website" placeholder="网址">
</div>
<div class="form-group">
<label for="add-phone">公司电话</label>
<input type="text" id="add-phone" placeholder="公司电话">
</div>
</div>
<div class="form-group">
<label for="add-address">制造商地址</label>
<input type="text" id="add-address" placeholder="制造商地址">
</div>
<!-- 替换原有的静态供应商表单 -->
<div class="section-title">供应商信息</div>
<div id="supplier-container">
<!-- 动态供应商表单将在这里添加 -->
</div>
<button type="button" class="btn btn-secondary" id="add-supplier-btn"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
<i class="fas fa-plus"></i> 添加供应商
</button>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancel-add-btn">取消</button>
<button class="btn btn-primary" id="confirm-add-btn">确认新增</button>
</div>
</div>
</div>
</body> </body>
<script src="./js.js"></script> <script src="./js.js"></script>
</html> </html>
\ No newline at end of file
我的黄页.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备档案</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #1B64F3;
--primary-hover: #1554D3;
--primary-light: #e6f7ff;
--bg-color: #F5F6FA;
--card-bg: #FFFFFF;
--sidebar-bg: #0F172A;
--text-primary: #1A1F36;
--text-secondary: #64748B;
--text-tertiary: #94A3B8;
--text-light: #CBD5E1;
--border-color: #E2E8F0;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--success-color: #22C55E;
--warning-color: #EAB308;
--error-color: #EF4444;
--sidebar-width: 260px;
--header-height: 64px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.app-container {
display: flex;
min-height: 100vh;
}
/* 左侧导航栏 */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
z-index: 1000;
}
.sidebar-logo {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 18px;
}
.logo-text {
color: white;
font-size: 16px;
font-weight: 600;
}
.sidebar-menu {
padding: 16px 0;
}
.nav-group-title {
padding: 12px 20px 8px;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.menu-item, .nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: var(--text-light);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
}
.menu-item:hover, .nav-item:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.menu-item.active, .nav-item.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary-color);
}
.nav-item.has-submenu {
justify-content: space-between;
}
.nav-arrow {
width: 14px;
height: 14px;
transition: transform 0.2s;
margin-left: auto;
}
.nav-item.expanded .nav-arrow {
transform: rotate(90deg);
}
.nav-submenu {
display: none;
background: rgba(0, 0, 0, 0.1);
}
.nav-item.expanded + .nav-submenu {
display: block;
}
.nav-subitem {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px 10px 48px;
color: var(--text-light);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
position: relative;
}
.nav-subitem:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-subitem.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-icon {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 顶部工具栏 */
.header, .top-header {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
height: var(--header-height);
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 999;
box-shadow: var(--shadow-sm);
}
.header-left {
display: flex;
align-items: center;
gap: 24px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
}
.breadcrumb-separator {
color: var(--text-tertiary);
}
.breadcrumb-current {
color: var(--text-primary);
font-weight: 500;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.header-icon-btn {
position: relative;
width: 36px;
height: 36px;
border-radius: 8px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.2s;
}
.header-icon-btn:hover {
background: var(--bg-color);
color: var(--primary-color);
}
.notification-badge {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
background: var(--error-color);
border-radius: 50%;
border: 2px solid var(--card-bg);
}
.lang-switcher {
display: flex;
gap: 6px;
align-items: center;
}
.lang-btn {
padding: 6px 12px;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.lang-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.lang-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--primary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
.page-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
}
.user-info {
display: flex;
align-items: center;
gap: 16px;
}
.notification {
position: relative;
cursor: pointer;
color: var(--text-secondary);
}
/* 主内容区域 - 已调整左右内边距 */
.main-content {
flex: 1;
padding: 24px;
overflow-y: auto;
min-height: 100vh;
margin-left: 260px;
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
/* 调整左右内边距，从 8px 增加到 32px，以利用更多空间 */
/* padding: 4px 32px;
min-height: calc(100vh - var(--header-height));
.main-content { } */
}
.content-area {
padding: 0;
}
/* 页面标题区域 */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-title-section {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-title-main {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.3px;
}
.page-title-sub {
font-size: 14px;
color: var(--text-secondary);
}
/* 表格数据优化 */
.table-cell-number {
font-weight: 600;
color: var(--text-primary);
}
.table-cell-date {
color: var(--text-secondary);
font-size: 13px;
}
/* 表格内容样式增强 */
td strong {
color: var(--text-primary);
font-weight: 600;
}
td code {
font-size: 12px;
font-weight: 500;
}
/* 空状态 */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-secondary);
}
.empty-state-icon {
font-size: 48px;
color: var(--text-tertiary);
margin-bottom: 16px;
}
.empty-state-text {
font-size: 14px;
color: var(--text-secondary);
}
/* 响应式表格优化 */
@media (max-width: 1200px) {
.table-container {
overflow-x: auto;
}
table {
min-width: 1000px;
}
}
@media (max-width: 768px) {
.card-body {
padding: 16px;
}
th, td {
padding: 12px 16px;
}
.action-buttons {
flex-direction: column;
gap: 6px;
}
.action-btn {
width: 100%;
justify-content: center;
}
}
/* 卡片样式 */
.card {
background: var(--card-bg);
border-radius: 12px;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
border: 1px solid var(--border-color);
}
.card-header {
padding: 18px 20px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.2px;
}
.card-body {
padding: 20px 16px;
}
/* 按钮样式 */
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(27, 100, 243, 0.3);
}
.btn-secondary {
background: #f0f0f0;
color: var(--text-light);
}
.btn-secondary:hover {
background: #e0e0e0;
}
.btn-success {
background: var(--success-color);
color: white;
}
.btn-success:hover {
background: #389e0d;
}
.btn-danger {
background: var(--error-color);
color: white;
}
.btn-danger:hover {
background: #cf1322;
}
/* 标签页样式 */
.tabs {
display: flex;
gap: 16px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.tab {
padding: 10px 0;
color: var(--text-light);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
font-size: 14px;
}
.tab:hover {
color: var(--primary-color);
}
.tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
/* 表格样式 */
.table-container {
overflow-x: auto;
border-radius: 8px;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
}
th, td {
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
tbody tr {
transition: all 0.2s;
}
tbody tr:hover {
background: rgba(27, 100, 243, 0.04);
}
tbody tr:last-child td {
border-bottom: none;
}
td {
color: var(--text-primary);
font-size: 14px;
vertical-align: middle;
}
.status {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.status.active {
background: #f6ffed;
color: var(--success-color);
}
.status.inactive {
background: #fff2e8;
color: var(--warning-color);
}
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
padding: 6px 14px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.action-btn i {
font-size: 12px;
}
.action-btn.edit-btn {
background: rgba(27, 100, 243, 0.1);
color: var(--primary-color);
}
.action-btn.edit-btn:hover {
background: rgba(27, 100, 243, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.delete-btn {
background: rgba(239, 68, 68, 0.1);
color: var(--error-color);
}
.action-btn.delete-btn:hover {
background: rgba(239, 68, 68, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}
.action-btn.view-btn {
background: rgba(27, 100, 243, 0.08);
color: var(--primary-color);
}
.action-btn.view-btn:hover {
background: rgba(27, 100, 243, 0.15);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.copy-btn {
background: rgba(34, 197, 94, 0.1);
color: var(--success-color);
}
.action-btn.copy-btn:hover {
background: rgba(34, 197, 94, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
align-items: center;
justify-content: center;
}
.modal.show {
display: flex;
}
.modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
}
.add-modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 800px;
max-height: 85vh;
overflow-y: auto;
}
.modal-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
}
.close-modal {
background: none;
border: none;
font-size: 20px;
color: var(--text-light);
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.3s;
}
.close-modal:hover {
background: var(--secondary-color);
color: var(--text-color);
}
.modal-body {
padding: 24px;
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
/* 新增表单模态框样式 */
.add-modal-form .form-group {
margin-bottom: 20px;
}
.add-modal-form .form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.add-modal-form .form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.add-modal-form label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: var(--text-secondary);
font-size: 14px;
}
.add-modal-form input,
.add-modal-form select,
.add-modal-form textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s;
}
.add-modal-form input:focus,
.add-modal-form select:focus,
.add-modal-form textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.add-modal-form .section-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 20px 0 15px 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.upload-box {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background-color: var(--bg-color);
}
.upload-box:hover {
border-color: var(--primary-color);
background-color: rgba(27, 100, 243, 0.05);
}
.upload-icon {
font-size: 24px;
color: var(--primary-color);
margin-bottom: 10px;
}
.upload-info {
color: var(--text-secondary);
font-size: 13px;
}
.file-name {
margin-top: 10px;
font-weight: 500;
color: var(--primary-color);
font-size: 13px;
}
.param-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.param-table th, .param-table td {
border: 1px solid var(--border-color);
padding: 8px;
text-align: left;
}
.param-table th {
background-color: var(--bg-color);
font-weight: 600;
}
.add-param-btn {
background: var(--primary-color);
color: white;
border: none;
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
}
.add-param-btn:hover {
background: var(--primary-hover);
}
/* 二维码预览样式 */
.qrcode-preview-large {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: var(--primary-light);
border-radius: 8px;
margin-bottom: 20px;
}
.qrcode-image {
width: 200px;
height: 200px;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.qrcode-image img {
max-width: 100%;
max-height: 100%;
}
/* 详情信息样式 */
.detail-info {
margin-top: 20px;
}
.detail-item {
display: flex;
margin-bottom: 12px;
font-size: 14px;
}
.detail-label {
width: 100px;
color: var(--text-light);
flex-shrink: 0;
}
.detail-value {
color: var(--text-color);
font-weight: 500;
}
/* 响应式设计 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.show-mobile {
transform: translateX(0);
}
.main-content {
margin-left: 0;
margin-top: 0;
padding: 16px; /* 在移动端保持较小的内边距 */
}
.header, .top-header {
left: 0;
}
.tabs {
flex-wrap: wrap;
}
}
/* 批量上传相关样式 */
.batch-upload-modal .modal-content {
max-width: 800px;
}
.template-selector {
margin-bottom: 20px;
}
.template-selector label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-primary);
}
.template-selector select {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: white;
}
.template-download-btn {
margin-top: 10px;
padding: 8px 16px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.template-download-btn:hover {
background: var(--primary-hover);
}
.upload-area {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 40px 20px;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s;
background: var(--bg-color);
}
.upload-area:hover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.upload-area.dragover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.1);
}
.upload-icon-large {
font-size: 48px;
color: var(--primary-color);
margin-bottom: 12px;
}
.upload-text {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.upload-hint {
font-size: 12px;
color: var(--text-tertiary);
}
.progress-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.progress-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
}
.progress-stats {
display: flex;
gap: 20px;
}
.stat-item {
display: flex;
align-items: center;
gap: 6px;
}
.stat-label {
color: var(--text-secondary);
}
.stat-value {
font-weight: 600;
color: var(--text-primary);
}
.stat-value.success {
color: var(--success-color);
}
.stat-value.error {
color: var(--error-color);
}
.progress-bar-container {
width: 100%;
height: 8px;
background: var(--bg-color);
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
}
.progress-bar {
height: 100%;
background: var(--primary-color);
transition: width 0.3s ease;
border-radius: 4px;
}
.error-list {
margin-top: 16px;
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 12px;
background: #fff5f5;
}
.error-item {
padding: 8px;
margin-bottom: 6px;
background: white;
border-left: 3px solid var(--error-color);
border-radius: 4px;
font-size: 13px;
}
.error-item:last-child {
margin-bottom: 0;
}
.error-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.error-reason {
color: var(--error-color);
font-weight: 500;
}
.download-error-btn {
margin-top: 12px;
padding: 8px 16px;
background: var(--error-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.download-error-btn:hover {
background: #cf1322;
}
.validation-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
font-size: 13px;
table-layout: fixed;
}
.validation-table th,
.validation-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid var(--border-color);
white-space: normal;
word-break: normal;
overflow: visible;
vertical-align: middle;
}
.validation-table th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.validation-table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.validation-table td:nth-child(5) {
white-space: normal;
word-break: break-word;
}
.validation-table th:nth-child(1),
.validation-table td:nth-child(1) {
width: 60px;
min-width: 60px;
text-align: center;
}
.validation-table th:nth-child(2),
.validation-table td:nth-child(2) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(3),
.validation-table td:nth-child(3) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(4),
.validation-table td:nth-child(4) {
width: 100px;
min-width: 100px;
text-align: center;
}
.validation-table th:nth-child(5),
.validation-table td:nth-child(5) {
width: auto;
min-width: 200px;
}
.validation-table tr.error-row {
background: #fff5f5;
}
.validation-table tr.error-row td {
color: var(--error-color);
}
#validation-table-container {
overflow-x: auto;
max-width: 100%;
width: 100%;
}
#validation-table-container table {
min-width: 600px;
}
.file-name-display {
margin-top: 12px;
padding: 10px;
background: var(--bg-color);
border-radius: 6px;
font-size: 13px;
color: var(--text-secondary);
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #01337a;
color: #fff;
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
td {
padding: 10px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 在主页面CSS中添加 */
.sidebar-iframe {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
border: none;
z-index: 999;
}
/* 为main-content和header添加左边距以避开iframe */
.main-content {
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
}
.top-header {
left: var(--sidebar-width);
}
</style>
</head>
<body>
<div class="app-container">
<div id="sidebar-container"></div>
<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="./企业微信截图_f29d069f-89c8-4b41-b278-71ddf57de875.png" alt="" style="width: 100%;display:block;">
<img src="./企业微信截图_428a57a2-966d-4969-8a74-cb4c593e9706.png" alt="" style="width: 100%;display:block;">
</div>
</div>
</div>
</div>
</body>
<script src="./js.js"></script>
</html>
\ No newline at end of file
知识仓库.html
<!DOCTYPE html> <!DOCTYPE html>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style> <style>
:root { :root {
...@@ -1306,7 +1306,7 @@ ...@@ -1306,7 +1306,7 @@
<div class="breadcrumb"> <div class="breadcrumb">
<span>首页</span> <span>首页</span>
<span class="breadcrumb-separator">/</span> <span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current">设备档案</span> <span class="breadcrumb-current">知识仓库</span>
</div> </div>
</div> </div>
<div class="header-right"> <div class="header-right">
...@@ -1327,761 +1327,12 @@ ...@@ -1327,761 +1327,12 @@
<div class="main-content"> <div class="main-content">
<div class="content-area"> <div class="content-area">
<div class="card"> <div class="card">
<div class="card-header"> <img src="./img_1.png" alt="" style="width: 100%;">
<div class="card-title">知识仓库</div>
<div style="display: flex; gap: 12px;">
<button class="btn btn-primary" id="add-qrcode-btn">
<i class="fas fa-plus"></i> 新增
</button>
</div>
</div>
<div class="card-body">
<div class="table-container">
<table>
<thead class="">
<tr class="">
<th colspan="1" rowspan="1"
class="el-table_1_column_1 el-table-column--selection is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><label class="el-checkbox"><span class="el-checkbox__input"><span
class="el-checkbox__inner"></span><input type="checkbox" aria-hidden="false"
class="el-checkbox__original"
value=""></span><!----></label>
</div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_2 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">编号</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_3 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">知识文档名称</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_4 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">知识大类</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_5 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">知识小类</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_6 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">文件名称</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_7 is-center is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">文件格式</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_8 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">文件大小</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_9 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">可查阅部门</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_10 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">创建部门</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_11 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">文档管理人</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_12 is-center is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">保密级别</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_13 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-274fd674="">更新时间</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_1_column_14 is-left is-hidden is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell">
<div data-v-274fd674="" class="cell" style="padding-left: 0px;">
<span> 操作 </span>
</div>
</div>
</th>
</tr>
</thead>
<tbody id="qrcode-table-body">
<tr class="el-table__row">
<td rowspan="1" colspan="1"
class="el-table_1_column_1 el-table-column--selection is-hidden el-table__cell">
<div class="cell"><label class="el-checkbox"><span class="el-checkbox__input"><span
class="el-checkbox__inner"></span><input type="checkbox" aria-hidden="false"
class="el-checkbox__original"
value=""></span><!----></label>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-3725bdee="">1</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_3 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-3725bdee="">MAX标签打印机操作指导书_V1</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_4 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-274fd674=""><!---->
<div data-v-274fd674="" class="normalText">
<div data-v-754cadd5="" data-v-274fd674="" class="textOv ellipsis"
style="overflow: hidden; width: 100%;"><p data-v-754cadd5=""
class="ellipsis">
公司知识库</p></div>
</div>
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_5 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-274fd674=""><!---->
<div data-v-274fd674="" class="normalText">
<div data-v-754cadd5="" data-v-274fd674="" class="textOv ellipsis"
style="overflow: hidden; width: 100%;"><p data-v-754cadd5=""
class="ellipsis">
精益办公室</p></div>
</div>
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_6 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-3725bdee="" class="documents-container">
<div data-v-3725bdee="" class="documents-list">
<div data-v-3725bdee="" class="document-item"><span data-v-3725bdee=""
class="link mb-6"> MAX标签打印机操作指导书_V1.0.xlsx </span>
</div>
</div>
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_7 is-center el-table__cell">
<div class="cell"><!----><i data-v-3725bdee="" class="el-tooltip iconfont icon-xls"
aria-describedby="el-tooltip-74" tabindex="0"
style="color: rgb(2, 122, 83); font-size: 20px !important;"></i>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_8 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-3725bdee="">1.449 M</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_9 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-3725bdee="" class="departments-container"><span data-v-3725bdee=""><div
role="tooltip" id="el-popover-6370" aria-hidden="true"
class="el-popover el-popper department-list-popover" tabindex="0"
style="width: 300px; display: none;"><!----><div data-v-3725bdee=""
class="departments-popover-list"><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-8797" tabindex="0"> test-1 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-7000" tabindex="0"> 1111111111 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-4605" tabindex="0"> 一级部门 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-4525" tabindex="0"> hahahahah </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-8544" tabindex="0"> 人事部 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-1577" tabindex="0"> 精益办公室 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-6262"
tabindex="0"> 技术研发中心 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-5452"
tabindex="0"> 财务部 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-9704" tabindex="0"> 技术部 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-5881" tabindex="0"> GI财务部 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-4451" tabindex="0"> 工程部 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-1098" tabindex="0"> 111 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-8680" tabindex="0"> 11111111111111111111111111111111 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-3728" tabindex="0"> 22222 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-7766" tabindex="0"> GI开发部 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-89" tabindex="0"> 销售部 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-4276" tabindex="0"> test-1/One-Test </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-9430"
tabindex="0"> 一级部门/二级部门-1 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-3569"
tabindex="0"> 一级部门/二级部门-2 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-1203"
tabindex="0"> hahahahah /33333 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-8085"
tabindex="0"> 财务部/会计1组 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-286"
tabindex="0"> 技术部/技术部-一级子部门 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-3088"
tabindex="0"> 技术部/jiojio 专用部门 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-839"
tabindex="0"> 技术部/IT一部 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-8288"
tabindex="0"> 销售部/销售1组 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-4103"
tabindex="0"> 一级部门/二级部门-1/三级部门-1 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-8693"
tabindex="0"> 技术部/IT一部/IT1组 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-2127"
tabindex="0"> 销售部/销售1组/销售2 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-5812"
tabindex="0"> 销售部/销售1组/销售2组 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-2738"
tabindex="0"> 技术部/IT一部/IT1组/it1-2 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-356" tabindex="0"> 技术部/IT一部/IT1组/222222222222222 </span><span
data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-8035"
tabindex="0"> 技术部/IT一部/IT1组/1 </span><span data-v-3725bdee=""
class="el-tooltip department-tag el-tag el-tag--info el-tag--mini el-tag--light"
aria-describedby="el-tooltip-371"
tabindex="0"> 技术部/IT一部/IT1组/it1-2/112 </span></div></div><span
class="el-popover__reference-wrapper"><div data-v-3725bdee=""
class="department-item departments-summary el-popover__reference"
aria-describedby="el-popover-6370"
tabindex="0"><i
data-v-3725bdee="" class="el-icon-office-building"></i> 查看 33 个部门 </div></span></span>
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_10 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-274fd674=""><!---->
<div data-v-274fd674="" class="normalText">
<div data-v-754cadd5="" data-v-274fd674="" class="textOv ellipsis"
style="overflow: hidden; width: 100%;"><p data-v-754cadd5=""
class="ellipsis">
精益办公室</p></div>
</div>
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_11 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-274fd674=""><!---->
<div data-v-274fd674="" class="normalText">
<div data-v-754cadd5="" data-v-274fd674="" class="textOv ellipsis"
style="overflow: hidden; width: 100%;"><p data-v-754cadd5=""
class="ellipsis">程</p>
</div>
</div>
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_12 is-center el-table__cell">
<div class="cell"><!---->
<div data-v-3725bdee="" class="flex align-center" style="gap: 10px;">
<div data-v-3725bdee="" class="secret-level"><i data-v-3725bdee=""
class="el-icon-circle"></i>
</div>
公开级
</div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_13 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-3725bdee="">2025-12-30 10:48:24</div>
</div>
</td>
<td rowspan="1" colspan="1"
class="el-table_1_column_14 is-left is-hidden el-table__cell">
<div class="cell"><!---->
<button data-v-3725bdee="" type="button" class="el-button el-button--text"
title="查看" style="margin-left: 5px;"><!----><i
class="iconfont icon-chakan"></i><!----></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="view-modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">二维码详情</h3>
<button class="close-modal" id="close-view-modal">×</button>
</div>
<div class="modal-body">
<div class="qrcode-preview-large">
<div class="qrcode-image" id="modal-qrcode-image">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjZmZmIj48cmVjdCB3aWR0aD0iMTkwIiBoZWlnaHQ9IjE5MCIgZmlsbD0iIzAwMCIvPjxyZWN0IHg9IjIwIiB5PSIyMCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjcwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMTEwIiB5PSIyMCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjcwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMjAiIHk9IjExMCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjcwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMTEwIiB5PSIxMTAiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgZmlsbD0iIzAwMCIvPjxyZWN0IHg9IjIwIiB5PSIxOTAiIHdpZHRoPSI3MCIgaGVpZ2h0PSIwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PHJlY3QgeD0iMTEwIiB5PSIxOTAiIHdpZHRoPSI3MCIgaGVpZ2h0PSIwIiBmaWxsPSIjZmZmIj48L3JlY3Q+PC9zdmc+"
alt="二维码">
</div>
<p>扫描二维码可查看设备详情并联系客服</p>
</div>
<div class="detail-info">
<div class="detail-item">
<div class="detail-label">设备名称：</div>
<div class="detail-value" id="modal-device-name"></div>
</div>
<div class="detail-item">
<div class="detail-label">设备编号：</div>
<div class="detail-value" id="modal-device-id"></div>
</div>
<div class="detail-item">
<div class="detail-label">设备类型：</div>
<div class="detail-value" id="modal-device-type"></div>
</div>
<div class="detail-item">
<div class="detail-label">文档数量：</div>
<div class="detail-value" id="modal-doc-count"></div>
</div>
<div class="detail-item">
<div class="detail-label">生成时间：</div>
<div class="detail-value" id="modal-create-time"></div>
</div>
<div class="detail-item">
<div class="detail-label">创建人所属部门：</div>
<div class="detail-value" id="modal-department"></div>
</div>
<div class="detail-item">
<div class="detail-label">创建人：</div>
<div class="detail-value" id="modal-creator"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="modal-download-btn">
<i class="fas fa-download"></i> 下载二维码
</button>
<button class="btn btn-secondary" id="modal-close-btn">关闭</button>
</div>
</div>
</div>
<div class="modal" id="delete-modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">确认删除</h3>
<button class="close-modal" id="close-delete-modal">×</button>
</div> </div>
<div class="modal-body">
<p>确定要删除此二维码吗？此操作不可撤销。</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancel-delete-btn">取消</button>
<button class="btn btn-danger" id="confirm-delete-btn">确认删除</button>
</div>
</div>
</div>
<!-- 批量上传模态框 -->
<div class="modal batch-upload-modal" id="batch-upload-modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">批量上传设备信息</h3>
<button class="close-modal" id="close-batch-upload-modal">×</button>
</div>
<div class="modal-body">
<!-- 模板选择区域 -->
<div class="template-selector">
<label>选择设备类型模板：</label>
<select id="device-template-select">
<option value="">请选择设备类型</option>
<option value="high-speed-drawer">高速盘拉机</option>
<option value="smart-terminal">智能客服终端</option>
<option value="self-service">自助服务机</option>
<option value="info-terminal">信息查询终端</option>
</select>
<button class="template-download-btn" id="download-template-btn">
<i class="fas fa-download"></i> 下载模板
</button>
</div>
<!-- 文件上传区域 -->
<div class="upload-area" id="upload-area">
<div class="upload-icon-large">
<i class="fas fa-cloud-upload-alt"></i>
</div>
<div class="upload-text">点击或拖拽文件到此处上传</div>
<div class="upload-hint">支持 Excel 文件 (.xlsx, .xls) 和 CSV 文件 (.csv)</div>
<input type="file" id="batch-file-input" accept=".xlsx,.xls,.csv" style="display: none;">
</div>
<div id="file-name-display" class="file-name-display" style="display: none;"></div>
<!-- 进度和结果区域 -->
<div class="progress-section" id="progress-section" style="display: none;">
<div class="progress-info">
<div class="progress-stats">
<div class="stat-item">
<span class="stat-label">已录入：</span>
<span class="stat-value" id="progress-current">0</span>
<span class="stat-label">/</span>
<span class="stat-value" id="progress-total">0</span>
</div>
<div class="stat-item">
<span class="stat-label">成功：</span>
<span class="stat-value success" id="progress-success">0</span>
</div>
<div class="stat-item">
<span class="stat-label">失败：</span>
<span class="stat-value error" id="progress-error">0</span>
</div>
</div>
</div>
<div class="progress-bar-container">
<div class="progress-bar" id="progress-bar" style="width: 0%;"></div>
</div>
<!-- 错误列表 -->
<div id="error-list-container" style="display: none;">
<!-- <div class="error-list" id="error-list"></div> -->
<!-- <button class="download-error-btn" id="download-error-btn">
<i class="fas fa-download"></i> 下载失败清单
</button> -->
</div>
<!-- 校验结果表格 -->
<div id="validation-table-container" style="display: none; margin-top: 16px;">
<table class="validation-table" id="validation-table">
<thead>
<tr>
<th>行号</th>
<th>SN号</th>
<th>型号</th>
<th>状态</th>
<th>错误原因</th>
</tr>
</thead>
<tbody id="validation-table-body">
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancel-batch-upload-btn">取消</button>
<button class="btn btn-primary" id="start-upload-btn" disabled>开始上传</button>
</div> </div>
</div> </div>
</div> </div>
<!-- 新增二维码表单模态框 -->
<div class="modal" id="add-modal">
<div class="modal-content add-modal-content" style="max-width: 80%;width: 80%;">
<div class="modal-header">
<h3 class="modal-title">新增二维码</h3>
<button class="close-modal" id="close-add-modal">×</button>
</div>
<div class="modal-body">
<form class="add-modal-form" id="add-form">
<!-- 基础信息区域 -->
<div class="section-title" style="display:flex;justify-content: space-between">
<div class="title">基础信息</div>
<button type="button" class="btn btn-secondary"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
管理
</button>
</div>
<div class="form-row">
<table>
<thead>
<tr>
<th width="41"></th>
<th>设备编码</th>
<th>设备名称</th>
<th>机型名称</th>
<th>出厂日期</th>
<th>设备总锭数</th>
<th>车间</th>
<th>所属工序</th>
<th>使用锭数</th>
<th>Iot编号</th>
<th>Iot模式</th>
<th>Iot状态</th>
<th>创建时间</th>
<th>创建人</th>
<th>生产厂商</th>
<th>PLC厂商</th>
<th>PLC型号</th>
<th>HMI厂商</th>
<!-- <th>操作</th>-->
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="checkbox" class="checkbox"/>
</td>
<td>XS026</td>
<td>细纱机026</td>
<td>FB502A细纱机</td>
<td>2024-01-22 00:00:00</td>
<td>396</td>
<td>细纱车间</td>
<td>细纱工序</td>
<td>396</td>
<td>GI_XS_026</td>
<td>0</td>
<td>2</td>
<td>2024-06-20 20:17:47</td>
<td>张可冉</td>
<td>中国</td>
<td>中国</td>
<td>PLC</td>
<td>中国</td>
<!-- <td></td>-->
</tr>
<tr>
<td>
<input type="radio" name="checkbox" class="checkbox"/>
</td>
<td>XS025</td>
<td>细纱机025</td>
<td>FB502A细纱机</td>
<td>2024-01-22 00:00:00</td>
<td>396</td>
<td>细纱车间</td>
<td>细纱工序</td>
<td>396</td>
<td>GI_XS_025</td>
<td>0</td>
<td>0</td>
<td>2024-06-20 20:17:47</td>
<td>张可冉</td>
<td>中国</td>
<td>中国</td>
<td>PLC</td>
<td>中国</td>
<!-- <td></td>-->
</tr>
<tr>
<td>
<input type="radio" name="checkbox" class="checkbox"/>
</td>
<td>XS024</td>
<td>细纱机024</td>
<td>FB502A细纱机</td>
<td>2024-01-22 00:00:00</td>
<td>396</td>
<td>细纱车间</td>
<td>细纱工序</td>
<td>396</td>
<td>GI_XS_024</td>
<td>0</td>
<td></td>
<td>2024-06-20 20:17:47</td>
<td>张可冉</td>
<td>中国</td>
<td>中国</td>
<td>PLC</td>
<td>中国</td>
<!-- <td></td>-->
</tr>
</tbody>
</table>
</div>
<!-- 附件上传区域 -->
<div class="section-title" style="display:flex;justify-content: space-between">
<div class="title">附件上传</div>
<button type="button" class="btn btn-secondary"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
管理
</button>
</div>
<div class="form-row">
<table border="1" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th width="41"></th>
<th>编号</th>
<th>知识文档名称</th>
<th>知识大类</th>
<th>知识小类</th>
<th>文件名称</th>
<th>文件格式</th>
<th>文件大小</th>
<th>可查阅部门</th>
<th>创建部门</th>
<th>文档管理人</th>
<th>保密级别</th>
<th>更新时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="checkbox1" class="checkbox"/>
</td>
<td>1</td>
<td>111</td>
<td>业务知识库</td>
<td></td>
<td>运维领域.docx</td>
<td>0.016 M</td>
<td></td>
<td>人事部财务部财务部/会计1组</td>
<td>人事部</td>
<td>jiojioGIAdmin update,su</td>
<td>公开级</td>
<td>2025-12-29 15:45:33</td>
</tr>
</tbody>
</table>
</div>
<!-- 认证信息区域 -->
<div class="section-title" style="display:flex;justify-content: space-between">
<div class="title">认证信息</div>
<button type="button" class="btn btn-secondary"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
管理
</button>
</div>
<div class="form-row">
<table border="1" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th width="41"></th>
<th>编号</th>
<th>文档名称</th>
<th>文档类型</th>
<th>更新时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="checkbox1" class="checkbox"/>
</td>
<td>1</td>
<td>电机合规文档</td>
<td>PDF</td>
<td>2025-12-29 15:45:33</td>
</tr>
</tbody>
</table>
</div>
<!-- 制造商信息区域 -->
<div class="section-title">制造商信息</div>
<div class="form-row">
<div class="form-group">
<label for="add-manufacturer">制造商</label>
<input type="text" id="add-manufacturer" placeholder="制造商名称">
</div>
<div class="form-group">
<label for="add-country">国家</label>
<input type="text" id="add-country" placeholder="国家">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="add-website">网址</label>
<input type="text" id="add-website" placeholder="网址">
</div>
<div class="form-group">
<label for="add-phone">公司电话</label>
<input type="text" id="add-phone" placeholder="公司电话">
</div>
</div>
<div class="form-group">
<label for="add-address">制造商地址</label>
<input type="text" id="add-address" placeholder="制造商地址">
</div>
<!-- 替换原有的静态供应商表单 -->
<div class="section-title">供应商信息</div>
<div id="supplier-container">
<!-- 动态供应商表单将在这里添加 -->
</div>
<button type="button" class="btn btn-secondary" id="add-supplier-btn"
style="margin-bottom: 15px;background:#01337a;color:#fff;">
<i class="fas fa-plus"></i> 添加供应商
</button>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancel-add-btn">取消</button>
<button class="btn btn-primary" id="confirm-add-btn">确认新增</button>
</div>
</div>
</div>
</body> </body>
<script src="./js.js"></script> <script src="./js.js"></script>
......
认证管理.html
<!DOCTYPE html> <!DOCTYPE html>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style> <style>
:root { :root {
...@@ -1300,8 +1300,40 @@ ...@@ -1300,8 +1300,40 @@
<body> <body>
<div class="app-container"> <div class="app-container">
<div id="sidebar-container"></div> <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> </div>
</body> </body>
<script src="./js.js"></script> <script src="./js.js"></script>
</html> </html>
\ No newline at end of file
设备机型.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备档案</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #1B64F3;
--primary-hover: #1554D3;
--primary-light: #e6f7ff;
--bg-color: #F5F6FA;
--card-bg: #FFFFFF;
--sidebar-bg: #0F172A;
--text-primary: #1A1F36;
--text-secondary: #64748B;
--text-tertiary: #94A3B8;
--text-light: #CBD5E1;
--border-color: #E2E8F0;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--success-color: #22C55E;
--warning-color: #EAB308;
--error-color: #EF4444;
--sidebar-width: 260px;
--header-height: 64px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.app-container {
display: flex;
min-height: 100vh;
}
/* 左侧导航栏 */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
z-index: 1000;
}
.sidebar-logo {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 18px;
}
.logo-text {
color: white;
font-size: 16px;
font-weight: 600;
}
.sidebar-menu {
padding: 16px 0;
}
.nav-group-title {
padding: 12px 20px 8px;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.menu-item, .nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: var(--text-light);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
}
.menu-item:hover, .nav-item:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.menu-item.active, .nav-item.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary-color);
}
.nav-item.has-submenu {
justify-content: space-between;
}
.nav-arrow {
width: 14px;
height: 14px;
transition: transform 0.2s;
margin-left: auto;
}
.nav-item.expanded .nav-arrow {
transform: rotate(90deg);
}
.nav-submenu {
display: none;
background: rgba(0, 0, 0, 0.1);
}
.nav-item.expanded + .nav-submenu {
display: block;
}
.nav-subitem {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px 10px 48px;
color: var(--text-light);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
position: relative;
}
.nav-subitem:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-subitem.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-icon {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 顶部工具栏 */
.header, .top-header {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
height: var(--header-height);
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 999;
box-shadow: var(--shadow-sm);
}
.header-left {
display: flex;
align-items: center;
gap: 24px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
}
.breadcrumb-separator {
color: var(--text-tertiary);
}
.breadcrumb-current {
color: var(--text-primary);
font-weight: 500;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.header-icon-btn {
position: relative;
width: 36px;
height: 36px;
border-radius: 8px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.2s;
}
.header-icon-btn:hover {
background: var(--bg-color);
color: var(--primary-color);
}
.notification-badge {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
background: var(--error-color);
border-radius: 50%;
border: 2px solid var(--card-bg);
}
.lang-switcher {
display: flex;
gap: 6px;
align-items: center;
}
.lang-btn {
padding: 6px 12px;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.lang-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.lang-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--primary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
.page-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
}
.user-info {
display: flex;
align-items: center;
gap: 16px;
}
.notification {
position: relative;
cursor: pointer;
color: var(--text-secondary);
}
/* 主内容区域 - 已调整左右内边距 */
.main-content {
flex: 1;
padding: 24px;
overflow-y: auto;
min-height: 100vh;
margin-left: 260px;
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
/* 调整左右内边距，从 8px 增加到 32px，以利用更多空间 */
/* padding: 4px 32px;
min-height: calc(100vh - var(--header-height));
.main-content { } */
}
.content-area {
padding: 0;
}
/* 页面标题区域 */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-title-section {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-title-main {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.3px;
}
.page-title-sub {
font-size: 14px;
color: var(--text-secondary);
}
/* 表格数据优化 */
.table-cell-number {
font-weight: 600;
color: var(--text-primary);
}
.table-cell-date {
color: var(--text-secondary);
font-size: 13px;
}
/* 表格内容样式增强 */
td strong {
color: var(--text-primary);
font-weight: 600;
}
td code {
font-size: 12px;
font-weight: 500;
}
/* 空状态 */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-secondary);
}
.empty-state-icon {
font-size: 48px;
color: var(--text-tertiary);
margin-bottom: 16px;
}
.empty-state-text {
font-size: 14px;
color: var(--text-secondary);
}
/* 响应式表格优化 */
@media (max-width: 1200px) {
.table-container {
overflow-x: auto;
}
table {
min-width: 1000px;
}
}
@media (max-width: 768px) {
.card-body {
padding: 16px;
}
th, td {
padding: 12px 16px;
}
.action-buttons {
flex-direction: column;
gap: 6px;
}
.action-btn {
width: 100%;
justify-content: center;
}
}
/* 卡片样式 */
.card {
background: var(--card-bg);
border-radius: 12px;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
border: 1px solid var(--border-color);
}
.card-header {
padding: 18px 20px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.2px;
}
.card-body {
padding: 20px 16px;
}
/* 按钮样式 */
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(27, 100, 243, 0.3);
}
.btn-secondary {
background: #f0f0f0;
color: var(--text-light);
}
.btn-secondary:hover {
background: #e0e0e0;
}
.btn-success {
background: var(--success-color);
color: white;
}
.btn-success:hover {
background: #389e0d;
}
.btn-danger {
background: var(--error-color);
color: white;
}
.btn-danger:hover {
background: #cf1322;
}
/* 标签页样式 */
.tabs {
display: flex;
gap: 16px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.tab {
padding: 10px 0;
color: var(--text-light);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
font-size: 14px;
}
.tab:hover {
color: var(--primary-color);
}
.tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
/* 表格样式 */
.table-container {
overflow-x: auto;
border-radius: 8px;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
}
th, td {
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
tbody tr {
transition: all 0.2s;
}
tbody tr:hover {
background: rgba(27, 100, 243, 0.04);
}
tbody tr:last-child td {
border-bottom: none;
}
td {
color: var(--text-primary);
font-size: 14px;
vertical-align: middle;
}
.status {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.status.active {
background: #f6ffed;
color: var(--success-color);
}
.status.inactive {
background: #fff2e8;
color: var(--warning-color);
}
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
padding: 6px 14px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.action-btn i {
font-size: 12px;
}
.action-btn.edit-btn {
background: rgba(27, 100, 243, 0.1);
color: var(--primary-color);
}
.action-btn.edit-btn:hover {
background: rgba(27, 100, 243, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.delete-btn {
background: rgba(239, 68, 68, 0.1);
color: var(--error-color);
}
.action-btn.delete-btn:hover {
background: rgba(239, 68, 68, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}
.action-btn.view-btn {
background: rgba(27, 100, 243, 0.08);
color: var(--primary-color);
}
.action-btn.view-btn:hover {
background: rgba(27, 100, 243, 0.15);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.copy-btn {
background: rgba(34, 197, 94, 0.1);
color: var(--success-color);
}
.action-btn.copy-btn:hover {
background: rgba(34, 197, 94, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
align-items: center;
justify-content: center;
}
.modal.show {
display: flex;
}
.modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
}
.add-modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 800px;
max-height: 85vh;
overflow-y: auto;
}
.modal-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
}
.close-modal {
background: none;
border: none;
font-size: 20px;
color: var(--text-light);
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.3s;
}
.close-modal:hover {
background: var(--secondary-color);
color: var(--text-color);
}
.modal-body {
padding: 24px;
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
/* 新增表单模态框样式 */
.add-modal-form .form-group {
margin-bottom: 20px;
}
.add-modal-form .form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.add-modal-form .form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.add-modal-form label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: var(--text-secondary);
font-size: 14px;
}
.add-modal-form input,
.add-modal-form select,
.add-modal-form textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s;
}
.add-modal-form input:focus,
.add-modal-form select:focus,
.add-modal-form textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.add-modal-form .section-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 20px 0 15px 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.upload-box {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background-color: var(--bg-color);
}
.upload-box:hover {
border-color: var(--primary-color);
background-color: rgba(27, 100, 243, 0.05);
}
.upload-icon {
font-size: 24px;
color: var(--primary-color);
margin-bottom: 10px;
}
.upload-info {
color: var(--text-secondary);
font-size: 13px;
}
.file-name {
margin-top: 10px;
font-weight: 500;
color: var(--primary-color);
font-size: 13px;
}
.param-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.param-table th, .param-table td {
border: 1px solid var(--border-color);
padding: 8px;
text-align: left;
}
.param-table th {
background-color: var(--bg-color);
font-weight: 600;
}
.add-param-btn {
background: var(--primary-color);
color: white;
border: none;
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
}
.add-param-btn:hover {
background: var(--primary-hover);
}
/* 二维码预览样式 */
.qrcode-preview-large {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: var(--primary-light);
border-radius: 8px;
margin-bottom: 20px;
}
.qrcode-image {
width: 200px;
height: 200px;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.qrcode-image img {
max-width: 100%;
max-height: 100%;
}
/* 详情信息样式 */
.detail-info {
margin-top: 20px;
}
.detail-item {
display: flex;
margin-bottom: 12px;
font-size: 14px;
}
.detail-label {
width: 100px;
color: var(--text-light);
flex-shrink: 0;
}
.detail-value {
color: var(--text-color);
font-weight: 500;
}
/* 响应式设计 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.show-mobile {
transform: translateX(0);
}
.main-content {
margin-left: 0;
margin-top: 0;
padding: 16px; /* 在移动端保持较小的内边距 */
}
.header, .top-header {
left: 0;
}
.tabs {
flex-wrap: wrap;
}
}
/* 批量上传相关样式 */
.batch-upload-modal .modal-content {
max-width: 800px;
}
.template-selector {
margin-bottom: 20px;
}
.template-selector label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-primary);
}
.template-selector select {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: white;
}
.template-download-btn {
margin-top: 10px;
padding: 8px 16px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.template-download-btn:hover {
background: var(--primary-hover);
}
.upload-area {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 40px 20px;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s;
background: var(--bg-color);
}
.upload-area:hover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.upload-area.dragover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.1);
}
.upload-icon-large {
font-size: 48px;
color: var(--primary-color);
margin-bottom: 12px;
}
.upload-text {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.upload-hint {
font-size: 12px;
color: var(--text-tertiary);
}
.progress-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.progress-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
}
.progress-stats {
display: flex;
gap: 20px;
}
.stat-item {
display: flex;
align-items: center;
gap: 6px;
}
.stat-label {
color: var(--text-secondary);
}
.stat-value {
font-weight: 600;
color: var(--text-primary);
}
.stat-value.success {
color: var(--success-color);
}
.stat-value.error {
color: var(--error-color);
}
.progress-bar-container {
width: 100%;
height: 8px;
background: var(--bg-color);
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
}
.progress-bar {
height: 100%;
background: var(--primary-color);
transition: width 0.3s ease;
border-radius: 4px;
}
.error-list {
margin-top: 16px;
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 12px;
background: #fff5f5;
}
.error-item {
padding: 8px;
margin-bottom: 6px;
background: white;
border-left: 3px solid var(--error-color);
border-radius: 4px;
font-size: 13px;
}
.error-item:last-child {
margin-bottom: 0;
}
.error-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.error-reason {
color: var(--error-color);
font-weight: 500;
}
.download-error-btn {
margin-top: 12px;
padding: 8px 16px;
background: var(--error-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.download-error-btn:hover {
background: #cf1322;
}
.validation-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
font-size: 13px;
table-layout: fixed;
}
.validation-table th,
.validation-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid var(--border-color);
white-space: normal;
word-break: normal;
overflow: visible;
vertical-align: middle;
}
.validation-table th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.validation-table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.validation-table td:nth-child(5) {
white-space: normal;
word-break: break-word;
}
.validation-table th:nth-child(1),
.validation-table td:nth-child(1) {
width: 60px;
min-width: 60px;
text-align: center;
}
.validation-table th:nth-child(2),
.validation-table td:nth-child(2) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(3),
.validation-table td:nth-child(3) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(4),
.validation-table td:nth-child(4) {
width: 100px;
min-width: 100px;
text-align: center;
}
.validation-table th:nth-child(5),
.validation-table td:nth-child(5) {
width: auto;
min-width: 200px;
}
.validation-table tr.error-row {
background: #fff5f5;
}
.validation-table tr.error-row td {
color: var(--error-color);
}
#validation-table-container {
overflow-x: auto;
max-width: 100%;
width: 100%;
}
#validation-table-container table {
min-width: 600px;
}
.file-name-display {
margin-top: 12px;
padding: 10px;
background: var(--bg-color);
border-radius: 6px;
font-size: 13px;
color: var(--text-secondary);
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #01337a;
color: #fff;
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
td {
padding: 10px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 在主页面CSS中添加 */
.sidebar-iframe {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
border: none;
z-index: 999;
}
/* 为main-content和header添加左边距以避开iframe */
.main-content {
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
}
.top-header {
left: var(--sidebar-width);
}
</style>
</head>
<body>
<div class="app-container">
<div id="sidebar-container"></div>
<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="./img_4.png" alt="" style="width: 100%;">
</div>
</div>
</div>
</div>
</body>
<script src="./js.js"></script>
</html>
\ No newline at end of file
设备档案.html
<!DOCTYPE html> <!DOCTYPE html>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style> <style>
:root { :root {
...@@ -1328,7 +1328,7 @@ ...@@ -1328,7 +1328,7 @@
<div class="content-area"> <div class="content-area">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<div class="card-title">设备编码信息</div> <div class="card-title">设备档案</div>
<div style="display: flex; gap: 12px;"> <div style="display: flex; gap: 12px;">
<button class="btn btn-primary" id="add-qrcode-btn"> <button class="btn btn-primary" id="add-qrcode-btn">
<i class="fas fa-plus"></i> 新增 <i class="fas fa-plus"></i> 新增
...@@ -1344,100 +1344,71 @@ ...@@ -1344,100 +1344,71 @@
<thead class="has-gutter"> <thead class="has-gutter">
<tr class=""> <tr class="">
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_17 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">设备编码</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_3_column_18 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">设备名称</span></div> <div class="cell"><span data-v-7f0e5ced="">设备名称</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_19 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">机型名称</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_3_column_20 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">出厂日期</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_3_column_21 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">设备总锭数</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_3_column_22 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">车间</span></div>
</th>
<th colspan="1" rowspan="1"
class="el-table_3_column_23 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">所属工序</span></div> <div class="cell"><span data-v-7f0e5ced="">品牌</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_24 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">使用锭数</span></div> <div class="cell"><span data-v-7f0e5ced="">设备编号</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_25 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">Iot编号</span></div> <div class="cell"><span data-v-7f0e5ced="">能耗等级</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_26 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">Iot模式</span></div> <div class="cell"><span data-v-7f0e5ced="">型号</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_27 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">Iot状态</span></div> <div class="cell"><span data-v-7f0e5ced="">产品序列号</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_28 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">创建时间</span></div> <div class="cell"><span data-v-7f0e5ced="">出厂日期</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_29 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">创建人</span></div> <div class="cell"><span data-v-7f0e5ced="">制造商</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_30 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">生产厂商</span></div> <div class="cell"><span data-v-7f0e5ced="">输入电压</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_31 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">PLC厂商</span></div> <div class="cell"><span data-v-7f0e5ced="">功率</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_32 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">PLC型号</span></div> <div class="cell"><span data-v-7f0e5ced="">设备重量</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_33 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"><span data-v-7f0e5ced="">HMI厂商</span></div> <div class="cell"><span data-v-7f0e5ced="">设备尺寸</span></div>
</th> </th>
<th colspan="1" rowspan="1" <th colspan="1" rowspan="1"
class="el-table_3_column_34 is-left is-leaf el-table__cell" class="el-table_3_column_18 is-left is-leaf el-table__cell"
style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);"> style="background: rgb(1, 51, 122); color: rgb(255, 255, 255);">
<div class="cell"> <div class="cell"><span data-v-7f0e5ced="">操作</span></div>
<div data-v-7f0e5ced="" class="cell" style="padding-left: 0px;">
<span> 操作 </span>
</div>
</div>
</th> </th>
<th class="el-table__cell gutter" style="width: 0px; display: none;"></th>
</tr> </tr>
</thead> </thead>
<tbody id="qrcode-table-body"> <tbody id="qrcode-table-body">
...@@ -1500,42 +1471,19 @@ ...@@ -1500,42 +1471,19 @@
</td> </td>
<td rowspan="1" colspan="1" class="el-table_3_column_28 is-left el-table__cell"> <td rowspan="1" colspan="1" class="el-table_3_column_28 is-left el-table__cell">
<div class="cell"><!----> <div class="cell"><!---->
<div data-v-7f0e5ced=""><span data-v-7f0e5ced="">2024-06-20 20:17:47</span> <div data-v-7f0e5ced=""><span data-v-7f0e5ced="">100*200mm</span>
</div> </div>
</div> </div>
</td> </td>
<td rowspan="1" colspan="1" class="el-table_3_column_29 is-left el-table__cell"> <td rowspan="1" colspan="1" class="el-table_3_column_29 is-left el-table__cell">
<div class="cell"><!----> <div class="cell"><!---->
<div data-v-7f0e5ced=""><span data-v-7f0e5ced="">张可冉</span></div> <button class="action-btn copy-btn">
</div> <!-- <input type="radio" name="qrcode-radio"/>-->
</td> 编辑
<td rowspan="1" colspan="1" class="el-table_3_column_30 is-left el-table__cell"> </button>
<div class="cell"><!---->
<div data-v-7f0e5ced=""><span data-v-7f0e5ced="">中国</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_3_column_31 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-7f0e5ced=""><span data-v-7f0e5ced="">中国</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_3_column_32 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-7f0e5ced=""><span data-v-7f0e5ced="">PLC</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_3_column_33 is-left el-table__cell">
<div class="cell"><!---->
<div data-v-7f0e5ced=""><span data-v-7f0e5ced="">中国</span></div>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_3_column_34 is-left el-table__cell">
<div class="cell"><!----><i data-v-34d82efe="" title="修改" class="iconfont bianji"
style="margin-right: 10px; cursor: pointer; color: rgb(1, 51, 122);"></i><i
data-v-34d82efe="" title="" class="iconfont shanchu"
style="margin-right: 10px; cursor: pointer; color: rgb(1, 51, 122);"></i>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -1621,7 +1569,7 @@ ...@@ -1621,7 +1569,7 @@
<div class="modal batch-upload-modal" id="batch-upload-modal"> <div class="modal batch-upload-modal" id="batch-upload-modal">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">批量上传设备信息</h3> <h3 class="modal-title">批量导入设备信息</h3>
<button class="close-modal" id="close-batch-upload-modal">×</button> <button class="close-modal" id="close-batch-upload-modal">×</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
...@@ -1630,10 +1578,10 @@ ...@@ -1630,10 +1578,10 @@
<label>选择设备类型模板：</label> <label>选择设备类型模板：</label>
<select id="device-template-select"> <select id="device-template-select">
<option value="">请选择设备类型</option> <option value="">请选择设备类型</option>
<option value="high-speed-drawer">高速盘拉机</option> <option value="high-speed-drawer">行星轧机</option>
<option value="smart-terminal">智能客服终端</option> <option value="smart-terminal">伺服铣</option>
<option value="self-service">自助服务机</option> <option value="self-service">旋风铣面机</option>
<option value="info-terminal">信息查询终端</option> <option value="info-terminal">管棒凸轮拉拔设备</option>
</select> </select>
<button class="template-download-btn" id="download-template-btn"> <button class="template-download-btn" id="download-template-btn">
<i class="fas fa-download"></i> 下载模板 <i class="fas fa-download"></i> 下载模板
......
设备档案1.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备档案</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #1B64F3;
--primary-hover: #1554D3;
--primary-light: #e6f7ff;
--bg-color: #F5F6FA;
--card-bg: #FFFFFF;
--sidebar-bg: #0F172A;
--text-primary: #1A1F36;
--text-secondary: #64748B;
--text-tertiary: #94A3B8;
--text-light: #CBD5E1;
--border-color: #E2E8F0;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--success-color: #22C55E;
--warning-color: #EAB308;
--error-color: #EF4444;
--sidebar-width: 260px;
--header-height: 64px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.app-container {
display: flex;
min-height: 100vh;
}
/* 左侧导航栏 */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
z-index: 1000;
}
.sidebar-logo {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 18px;
}
.logo-text {
color: white;
font-size: 16px;
font-weight: 600;
}
.sidebar-menu {
padding: 16px 0;
}
.nav-group-title {
padding: 12px 20px 8px;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.menu-item, .nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: var(--text-light);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
}
.menu-item:hover, .nav-item:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.menu-item.active, .nav-item.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary-color);
}
.nav-item.has-submenu {
justify-content: space-between;
}
.nav-arrow {
width: 14px;
height: 14px;
transition: transform 0.2s;
margin-left: auto;
}
.nav-item.expanded .nav-arrow {
transform: rotate(90deg);
}
.nav-submenu {
display: none;
background: rgba(0, 0, 0, 0.1);
}
.nav-item.expanded + .nav-submenu {
display: block;
}
.nav-subitem {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px 10px 48px;
color: var(--text-light);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
position: relative;
}
.nav-subitem:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-subitem.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-icon {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 顶部工具栏 */
.header, .top-header {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
height: var(--header-height);
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 999;
box-shadow: var(--shadow-sm);
}
.header-left {
display: flex;
align-items: center;
gap: 24px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
}
.breadcrumb-separator {
color: var(--text-tertiary);
}
.breadcrumb-current {
color: var(--text-primary);
font-weight: 500;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.header-icon-btn {
position: relative;
width: 36px;
height: 36px;
border-radius: 8px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.2s;
}
.header-icon-btn:hover {
background: var(--bg-color);
color: var(--primary-color);
}
.notification-badge {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
background: var(--error-color);
border-radius: 50%;
border: 2px solid var(--card-bg);
}
.lang-switcher {
display: flex;
gap: 6px;
align-items: center;
}
.lang-btn {
padding: 6px 12px;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.lang-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.lang-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--primary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
.page-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
}
.user-info {
display: flex;
align-items: center;
gap: 16px;
}
.notification {
position: relative;
cursor: pointer;
color: var(--text-secondary);
}
/* 主内容区域 - 已调整左右内边距 */
.main-content {
flex: 1;
padding: 24px;
overflow-y: auto;
min-height: 100vh;
margin-left: 260px;
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
/* 调整左右内边距，从 8px 增加到 32px，以利用更多空间 */
/* padding: 4px 32px;
min-height: calc(100vh - var(--header-height));
.main-content { } */
}
.content-area {
padding: 0;
}
/* 页面标题区域 */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-title-section {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-title-main {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.3px;
}
.page-title-sub {
font-size: 14px;
color: var(--text-secondary);
}
/* 表格数据优化 */
.table-cell-number {
font-weight: 600;
color: var(--text-primary);
}
.table-cell-date {
color: var(--text-secondary);
font-size: 13px;
}
/* 表格内容样式增强 */
td strong {
color: var(--text-primary);
font-weight: 600;
}
td code {
font-size: 12px;
font-weight: 500;
}
/* 空状态 */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-secondary);
}
.empty-state-icon {
font-size: 48px;
color: var(--text-tertiary);
margin-bottom: 16px;
}
.empty-state-text {
font-size: 14px;
color: var(--text-secondary);
}
/* 响应式表格优化 */
@media (max-width: 1200px) {
.table-container {
overflow-x: auto;
}
table {
min-width: 1000px;
}
}
@media (max-width: 768px) {
.card-body {
padding: 16px;
}
th, td {
padding: 12px 16px;
}
.action-buttons {
flex-direction: column;
gap: 6px;
}
.action-btn {
width: 100%;
justify-content: center;
}
}
/* 卡片样式 */
.card {
background: var(--card-bg);
border-radius: 12px;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
border: 1px solid var(--border-color);
}
.card-header {
padding: 18px 20px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.2px;
}
.card-body {
padding: 20px 16px;
}
/* 按钮样式 */
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(27, 100, 243, 0.3);
}
.btn-secondary {
background: #f0f0f0;
color: var(--text-light);
}
.btn-secondary:hover {
background: #e0e0e0;
}
.btn-success {
background: var(--success-color);
color: white;
}
.btn-success:hover {
background: #389e0d;
}
.btn-danger {
background: var(--error-color);
color: white;
}
.btn-danger:hover {
background: #cf1322;
}
/* 标签页样式 */
.tabs {
display: flex;
gap: 16px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.tab {
padding: 10px 0;
color: var(--text-light);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
font-size: 14px;
}
.tab:hover {
color: var(--primary-color);
}
.tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
/* 表格样式 */
.table-container {
overflow-x: auto;
border-radius: 8px;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
}
th, td {
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
tbody tr {
transition: all 0.2s;
}
tbody tr:hover {
background: rgba(27, 100, 243, 0.04);
}
tbody tr:last-child td {
border-bottom: none;
}
td {
color: var(--text-primary);
font-size: 14px;
vertical-align: middle;
}
.status {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.status.active {
background: #f6ffed;
color: var(--success-color);
}
.status.inactive {
background: #fff2e8;
color: var(--warning-color);
}
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
padding: 6px 14px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.action-btn i {
font-size: 12px;
}
.action-btn.edit-btn {
background: rgba(27, 100, 243, 0.1);
color: var(--primary-color);
}
.action-btn.edit-btn:hover {
background: rgba(27, 100, 243, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.delete-btn {
background: rgba(239, 68, 68, 0.1);
color: var(--error-color);
}
.action-btn.delete-btn:hover {
background: rgba(239, 68, 68, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}
.action-btn.view-btn {
background: rgba(27, 100, 243, 0.08);
color: var(--primary-color);
}
.action-btn.view-btn:hover {
background: rgba(27, 100, 243, 0.15);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.copy-btn {
background: rgba(34, 197, 94, 0.1);
color: var(--success-color);
}
.action-btn.copy-btn:hover {
background: rgba(34, 197, 94, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
align-items: center;
justify-content: center;
}
.modal.show {
display: flex;
}
.modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
}
.add-modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 800px;
max-height: 85vh;
overflow-y: auto;
}
.modal-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
}
.close-modal {
background: none;
border: none;
font-size: 20px;
color: var(--text-light);
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.3s;
}
.close-modal:hover {
background: var(--secondary-color);
color: var(--text-color);
}
.modal-body {
padding: 24px;
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
/* 新增表单模态框样式 */
.add-modal-form .form-group {
margin-bottom: 20px;
}
.add-modal-form .form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.add-modal-form .form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.add-modal-form label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: var(--text-secondary);
font-size: 14px;
}
.add-modal-form input,
.add-modal-form select,
.add-modal-form textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s;
}
.add-modal-form input:focus,
.add-modal-form select:focus,
.add-modal-form textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.add-modal-form .section-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 20px 0 15px 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.upload-box {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background-color: var(--bg-color);
}
.upload-box:hover {
border-color: var(--primary-color);
background-color: rgba(27, 100, 243, 0.05);
}
.upload-icon {
font-size: 24px;
color: var(--primary-color);
margin-bottom: 10px;
}
.upload-info {
color: var(--text-secondary);
font-size: 13px;
}
.file-name {
margin-top: 10px;
font-weight: 500;
color: var(--primary-color);
font-size: 13px;
}
.param-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.param-table th, .param-table td {
border: 1px solid var(--border-color);
padding: 8px;
text-align: left;
}
.param-table th {
background-color: var(--bg-color);
font-weight: 600;
}
.add-param-btn {
background: var(--primary-color);
color: white;
border: none;
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
}
.add-param-btn:hover {
background: var(--primary-hover);
}
/* 二维码预览样式 */
.qrcode-preview-large {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: var(--primary-light);
border-radius: 8px;
margin-bottom: 20px;
}
.qrcode-image {
width: 200px;
height: 200px;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.qrcode-image img {
max-width: 100%;
max-height: 100%;
}
/* 详情信息样式 */
.detail-info {
margin-top: 20px;
}
.detail-item {
display: flex;
margin-bottom: 12px;
font-size: 14px;
}
.detail-label {
width: 100px;
color: var(--text-light);
flex-shrink: 0;
}
.detail-value {
color: var(--text-color);
font-weight: 500;
}
/* 响应式设计 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.show-mobile {
transform: translateX(0);
}
.main-content {
margin-left: 0;
margin-top: 0;
padding: 16px; /* 在移动端保持较小的内边距 */
}
.header, .top-header {
left: 0;
}
.tabs {
flex-wrap: wrap;
}
}
/* 批量上传相关样式 */
.batch-upload-modal .modal-content {
max-width: 800px;
}
.template-selector {
margin-bottom: 20px;
}
.template-selector label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-primary);
}
.template-selector select {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: white;
}
.template-download-btn {
margin-top: 10px;
padding: 8px 16px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.template-download-btn:hover {
background: var(--primary-hover);
}
.upload-area {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 40px 20px;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s;
background: var(--bg-color);
}
.upload-area:hover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.upload-area.dragover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.1);
}
.upload-icon-large {
font-size: 48px;
color: var(--primary-color);
margin-bottom: 12px;
}
.upload-text {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.upload-hint {
font-size: 12px;
color: var(--text-tertiary);
}
.progress-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.progress-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
}
.progress-stats {
display: flex;
gap: 20px;
}
.stat-item {
display: flex;
align-items: center;
gap: 6px;
}
.stat-label {
color: var(--text-secondary);
}
.stat-value {
font-weight: 600;
color: var(--text-primary);
}
.stat-value.success {
color: var(--success-color);
}
.stat-value.error {
color: var(--error-color);
}
.progress-bar-container {
width: 100%;
height: 8px;
background: var(--bg-color);
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
}
.progress-bar {
height: 100%;
background: var(--primary-color);
transition: width 0.3s ease;
border-radius: 4px;
}
.error-list {
margin-top: 16px;
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 12px;
background: #fff5f5;
}
.error-item {
padding: 8px;
margin-bottom: 6px;
background: white;
border-left: 3px solid var(--error-color);
border-radius: 4px;
font-size: 13px;
}
.error-item:last-child {
margin-bottom: 0;
}
.error-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.error-reason {
color: var(--error-color);
font-weight: 500;
}
.download-error-btn {
margin-top: 12px;
padding: 8px 16px;
background: var(--error-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.download-error-btn:hover {
background: #cf1322;
}
.validation-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
font-size: 13px;
table-layout: fixed;
}
.validation-table th,
.validation-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid var(--border-color);
white-space: normal;
word-break: normal;
overflow: visible;
vertical-align: middle;
}
.validation-table th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.validation-table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.validation-table td:nth-child(5) {
white-space: normal;
word-break: break-word;
}
.validation-table th:nth-child(1),
.validation-table td:nth-child(1) {
width: 60px;
min-width: 60px;
text-align: center;
}
.validation-table th:nth-child(2),
.validation-table td:nth-child(2) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(3),
.validation-table td:nth-child(3) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(4),
.validation-table td:nth-child(4) {
width: 100px;
min-width: 100px;
text-align: center;
}
.validation-table th:nth-child(5),
.validation-table td:nth-child(5) {
width: auto;
min-width: 200px;
}
.validation-table tr.error-row {
background: #fff5f5;
}
.validation-table tr.error-row td {
color: var(--error-color);
}
#validation-table-container {
overflow-x: auto;
max-width: 100%;
width: 100%;
}
#validation-table-container table {
min-width: 600px;
}
.file-name-display {
margin-top: 12px;
padding: 10px;
background: var(--bg-color);
border-radius: 6px;
font-size: 13px;
color: var(--text-secondary);
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #01337a;
color: #fff;
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
td {
padding: 10px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 在主页面CSS中添加 */
.sidebar-iframe {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
border: none;
z-index: 999;
}
/* 为main-content和header添加左边距以避开iframe */
.main-content {
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
}
.top-header {
left: var(--sidebar-width);
}
</style>
</head>
<body>
<div class="app-container">
<div id="sidebar-container"></div>
<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" style="position: relative;">
<div class="content-area">
<div class="card">
<img src="./img_2.png" alt="" style="width: 100%;">
</div>
</div>
<div style="width: 100%;height: 50%;position:absolute;left: 0;top: 0;" id="import">
</div>
<a href="设备档案编辑.html" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 50%;position:absolute;left: 0;bottom: 0;">
</div>
</a>
</div>
<!-- 批量上传模态框 -->
<div class="modal batch-upload-modal" id="batch-upload-modal">
<div class="modal-content" style="margin: 0 auto;">
<div class="modal-header">
<h3 class="modal-title">批量导入设备信息</h3>
<button class="close-modal" id="close-batch-upload-modal">×</button>
</div>
<div class="modal-body">
<!-- 模板选择区域 -->
<div class="template-selector">
<label>选择设备类型模板：</label>
<select id="device-template-select">
<option value="">请选择设备类型</option>
<option value="high-speed-drawer">高速盘拉机</option>
<option value="smart-terminal">智能客服终端</option>
<option value="self-service">自助服务机</option>
<option value="info-terminal">信息查询终端</option>
</select>
<button class="template-download-btn" id="download-template-btn">
<i class="fas fa-download"></i> 下载模板
</button>
</div>
<!-- 文件上传区域 -->
<div class="upload-area" id="upload-area">
<div class="upload-icon-large">
<i class="fas fa-cloud-upload-alt"></i>
</div>
<div class="upload-text">点击或拖拽文件到此处上传</div>
<div class="upload-hint">支持 Excel 文件 (.xlsx, .xls) 和 CSV 文件 (.csv)</div>
<input type="file" id="batch-file-input" accept=".xlsx,.xls,.csv" style="display: none;">
</div>
<div id="file-name-display" class="file-name-display" style="display: none;"></div>
<!-- 进度和结果区域 -->
<div class="progress-section" id="progress-section" style="display: none;">
<div class="progress-info">
<div class="progress-stats">
<div class="stat-item">
<span class="stat-label">已录入：</span>
<span class="stat-value" id="progress-current">0</span>
<span class="stat-label">/</span>
<span class="stat-value" id="progress-total">0</span>
</div>
<div class="stat-item">
<span class="stat-label">成功：</span>
<span class="stat-value success" id="progress-success">0</span>
</div>
<div class="stat-item">
<span class="stat-label">失败：</span>
<span class="stat-value error" id="progress-error">0</span>
</div>
</div>
</div>
<div class="progress-bar-container">
<div class="progress-bar" id="progress-bar" style="width: 0%;"></div>
</div>
<!-- 错误列表 -->
<div id="error-list-container" style="display: none;">
<!-- <div class="error-list" id="error-list"></div> -->
<!-- <button class="download-error-btn" id="download-error-btn">
<i class="fas fa-download"></i> 下载失败清单
</button> -->
</div>
<!-- 校验结果表格 -->
<div id="validation-table-container" style="display: none; margin-top: 16px;">
<table class="validation-table" id="validation-table">
<thead>
<tr>
<th>行号</th>
<th>SN号</th>
<th>型号</th>
<th>状态</th>
<th>错误原因</th>
</tr>
</thead>
<tbody id="validation-table-body">
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="cancel-batch-upload-btn">取消</button>
<button class="btn btn-primary" id="start-upload-btn" disabled>开始上传</button>
</div>
</div>
</div>
</div>
</body>
<script src="./js.js"></script>
<script>
let importstr = document.getElementById('import')
let uploadstr = document.getElementById('batch-upload-modal')
let close = document.getElementById('close-batch-upload-modal')
let cancel = document.getElementById('cancel-batch-upload-btn')
uploadstr.style.display = 'none'
importstr.addEventListener('click', function () {
uploadstr.style.display = 'flex'
})
uploadstr.addEventListener('click', function (e) {
// 阻止事件冒泡，只有点击模态框背景时才关闭
if (e.target === uploadstr) {
uploadstr.style.display = 'none'
}
})
close.addEventListener('click', function () {
uploadstr.style.display = 'none'
})
cancel.addEventListener('click', function () {
uploadstr.style.display = 'none'
})
</script>
</html>
\ No newline at end of file
设备档案编辑.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备档案</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #1B64F3;
--primary-hover: #1554D3;
--primary-light: #e6f7ff;
--bg-color: #F5F6FA;
--card-bg: #FFFFFF;
--sidebar-bg: #0F172A;
--text-primary: #1A1F36;
--text-secondary: #64748B;
--text-tertiary: #94A3B8;
--text-light: #CBD5E1;
--border-color: #E2E8F0;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--success-color: #22C55E;
--warning-color: #EAB308;
--error-color: #EF4444;
--sidebar-width: 260px;
--header-height: 64px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.app-container {
display: flex;
min-height: 100vh;
}
/* 左侧导航栏 */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
z-index: 1000;
}
.sidebar-logo {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 18px;
}
.logo-text {
color: white;
font-size: 16px;
font-weight: 600;
}
.sidebar-menu {
padding: 16px 0;
}
.nav-group-title {
padding: 12px 20px 8px;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.menu-item, .nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: var(--text-light);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
}
.menu-item:hover, .nav-item:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.menu-item.active, .nav-item.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary-color);
}
.nav-item.has-submenu {
justify-content: space-between;
}
.nav-arrow {
width: 14px;
height: 14px;
transition: transform 0.2s;
margin-left: auto;
}
.nav-item.expanded .nav-arrow {
transform: rotate(90deg);
}
.nav-submenu {
display: none;
background: rgba(0, 0, 0, 0.1);
}
.nav-item.expanded + .nav-submenu {
display: block;
}
.nav-subitem {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px 10px 48px;
color: var(--text-light);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
position: relative;
}
.nav-subitem:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-subitem.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-icon {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 顶部工具栏 */
.header, .top-header {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
height: var(--header-height);
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 999;
box-shadow: var(--shadow-sm);
}
.header-left {
display: flex;
align-items: center;
gap: 24px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
}
.breadcrumb-separator {
color: var(--text-tertiary);
}
.breadcrumb-current {
color: var(--text-primary);
font-weight: 500;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.header-icon-btn {
position: relative;
width: 36px;
height: 36px;
border-radius: 8px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.2s;
}
.header-icon-btn:hover {
background: var(--bg-color);
color: var(--primary-color);
}
.notification-badge {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
background: var(--error-color);
border-radius: 50%;
border: 2px solid var(--card-bg);
}
.lang-switcher {
display: flex;
gap: 6px;
align-items: center;
}
.lang-btn {
padding: 6px 12px;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.lang-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.lang-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--primary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
.page-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
}
.user-info {
display: flex;
align-items: center;
gap: 16px;
}
.notification {
position: relative;
cursor: pointer;
color: var(--text-secondary);
}
/* 主内容区域 - 已调整左右内边距 */
.main-content {
flex: 1;
padding: 24px;
overflow-y: auto;
min-height: 100vh;
margin-left: 260px;
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
/* 调整左右内边距，从 8px 增加到 32px，以利用更多空间 */
/* padding: 4px 32px;
min-height: calc(100vh - var(--header-height));
.main-content { } */
}
.content-area {
padding: 0;
}
/* 页面标题区域 */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-title-section {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-title-main {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.3px;
}
.page-title-sub {
font-size: 14px;
color: var(--text-secondary);
}
/* 表格数据优化 */
.table-cell-number {
font-weight: 600;
color: var(--text-primary);
}
.table-cell-date {
color: var(--text-secondary);
font-size: 13px;
}
/* 表格内容样式增强 */
td strong {
color: var(--text-primary);
font-weight: 600;
}
td code {
font-size: 12px;
font-weight: 500;
}
/* 空状态 */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-secondary);
}
.empty-state-icon {
font-size: 48px;
color: var(--text-tertiary);
margin-bottom: 16px;
}
.empty-state-text {
font-size: 14px;
color: var(--text-secondary);
}
/* 响应式表格优化 */
@media (max-width: 1200px) {
.table-container {
overflow-x: auto;
}
table {
min-width: 1000px;
}
}
@media (max-width: 768px) {
.card-body {
padding: 16px;
}
th, td {
padding: 12px 16px;
}
.action-buttons {
flex-direction: column;
gap: 6px;
}
.action-btn {
width: 100%;
justify-content: center;
}
}
/* 卡片样式 */
.card {
background: var(--card-bg);
border-radius: 12px;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
border: 1px solid var(--border-color);
}
.card-header {
padding: 18px 20px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.2px;
}
.card-body {
padding: 20px 16px;
}
/* 按钮样式 */
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(27, 100, 243, 0.3);
}
.btn-secondary {
background: #f0f0f0;
color: var(--text-light);
}
.btn-secondary:hover {
background: #e0e0e0;
}
.btn-success {
background: var(--success-color);
color: white;
}
.btn-success:hover {
background: #389e0d;
}
.btn-danger {
background: var(--error-color);
color: white;
}
.btn-danger:hover {
background: #cf1322;
}
/* 标签页样式 */
.tabs {
display: flex;
gap: 16px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.tab {
padding: 10px 0;
color: var(--text-light);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
font-size: 14px;
}
.tab:hover {
color: var(--primary-color);
}
.tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
/* 表格样式 */
.table-container {
overflow-x: auto;
border-radius: 8px;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
}
th, td {
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
tbody tr {
transition: all 0.2s;
}
tbody tr:hover {
background: rgba(27, 100, 243, 0.04);
}
tbody tr:last-child td {
border-bottom: none;
}
td {
color: var(--text-primary);
font-size: 14px;
vertical-align: middle;
}
.status {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.status.active {
background: #f6ffed;
color: var(--success-color);
}
.status.inactive {
background: #fff2e8;
color: var(--warning-color);
}
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
padding: 6px 14px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.action-btn i {
font-size: 12px;
}
.action-btn.edit-btn {
background: rgba(27, 100, 243, 0.1);
color: var(--primary-color);
}
.action-btn.edit-btn:hover {
background: rgba(27, 100, 243, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.delete-btn {
background: rgba(239, 68, 68, 0.1);
color: var(--error-color);
}
.action-btn.delete-btn:hover {
background: rgba(239, 68, 68, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}
.action-btn.view-btn {
background: rgba(27, 100, 243, 0.08);
color: var(--primary-color);
}
.action-btn.view-btn:hover {
background: rgba(27, 100, 243, 0.15);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.copy-btn {
background: rgba(34, 197, 94, 0.1);
color: var(--success-color);
}
.action-btn.copy-btn:hover {
background: rgba(34, 197, 94, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
align-items: center;
justify-content: center;
}
.modal.show {
display: flex;
}
.modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
}
.add-modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 800px;
max-height: 85vh;
overflow-y: auto;
}
.modal-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
}
.close-modal {
background: none;
border: none;
font-size: 20px;
color: var(--text-light);
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.3s;
}
.close-modal:hover {
background: var(--secondary-color);
color: var(--text-color);
}
.modal-body {
padding: 24px;
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
/* 新增表单模态框样式 */
.add-modal-form .form-group {
margin-bottom: 20px;
}
.add-modal-form .form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.add-modal-form .form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.add-modal-form label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: var(--text-secondary);
font-size: 14px;
}
.add-modal-form input,
.add-modal-form select,
.add-modal-form textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s;
}
.add-modal-form input:focus,
.add-modal-form select:focus,
.add-modal-form textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.add-modal-form .section-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 20px 0 15px 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.upload-box {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background-color: var(--bg-color);
}
.upload-box:hover {
border-color: var(--primary-color);
background-color: rgba(27, 100, 243, 0.05);
}
.upload-icon {
font-size: 24px;
color: var(--primary-color);
margin-bottom: 10px;
}
.upload-info {
color: var(--text-secondary);
font-size: 13px;
}
.file-name {
margin-top: 10px;
font-weight: 500;
color: var(--primary-color);
font-size: 13px;
}
.param-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.param-table th, .param-table td {
border: 1px solid var(--border-color);
padding: 8px;
text-align: left;
}
.param-table th {
background-color: var(--bg-color);
font-weight: 600;
}
.add-param-btn {
background: var(--primary-color);
color: white;
border: none;
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
}
.add-param-btn:hover {
background: var(--primary-hover);
}
/* 二维码预览样式 */
.qrcode-preview-large {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: var(--primary-light);
border-radius: 8px;
margin-bottom: 20px;
}
.qrcode-image {
width: 200px;
height: 200px;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.qrcode-image img {
max-width: 100%;
max-height: 100%;
}
/* 详情信息样式 */
.detail-info {
margin-top: 20px;
}
.detail-item {
display: flex;
margin-bottom: 12px;
font-size: 14px;
}
.detail-label {
width: 100px;
color: var(--text-light);
flex-shrink: 0;
}
.detail-value {
color: var(--text-color);
font-weight: 500;
}
/* 响应式设计 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.show-mobile {
transform: translateX(0);
}
.main-content {
margin-left: 0;
margin-top: 0;
padding: 16px; /* 在移动端保持较小的内边距 */
}
.header, .top-header {
left: 0;
}
.tabs {
flex-wrap: wrap;
}
}
/* 批量上传相关样式 */
.batch-upload-modal .modal-content {
max-width: 800px;
}
.template-selector {
margin-bottom: 20px;
}
.template-selector label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-primary);
}
.template-selector select {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: white;
}
.template-download-btn {
margin-top: 10px;
padding: 8px 16px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.template-download-btn:hover {
background: var(--primary-hover);
}
.upload-area {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 40px 20px;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s;
background: var(--bg-color);
}
.upload-area:hover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.upload-area.dragover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.1);
}
.upload-icon-large {
font-size: 48px;
color: var(--primary-color);
margin-bottom: 12px;
}
.upload-text {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.upload-hint {
font-size: 12px;
color: var(--text-tertiary);
}
.progress-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.progress-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
}
.progress-stats {
display: flex;
gap: 20px;
}
.stat-item {
display: flex;
align-items: center;
gap: 6px;
}
.stat-label {
color: var(--text-secondary);
}
.stat-value {
font-weight: 600;
color: var(--text-primary);
}
.stat-value.success {
color: var(--success-color);
}
.stat-value.error {
color: var(--error-color);
}
.progress-bar-container {
width: 100%;
height: 8px;
background: var(--bg-color);
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
}
.progress-bar {
height: 100%;
background: var(--primary-color);
transition: width 0.3s ease;
border-radius: 4px;
}
.error-list {
margin-top: 16px;
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 12px;
background: #fff5f5;
}
.error-item {
padding: 8px;
margin-bottom: 6px;
background: white;
border-left: 3px solid var(--error-color);
border-radius: 4px;
font-size: 13px;
}
.error-item:last-child {
margin-bottom: 0;
}
.error-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.error-reason {
color: var(--error-color);
font-weight: 500;
}
.download-error-btn {
margin-top: 12px;
padding: 8px 16px;
background: var(--error-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.download-error-btn:hover {
background: #cf1322;
}
.validation-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
font-size: 13px;
table-layout: fixed;
}
.validation-table th,
.validation-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid var(--border-color);
white-space: normal;
word-break: normal;
overflow: visible;
vertical-align: middle;
}
.validation-table th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.validation-table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.validation-table td:nth-child(5) {
white-space: normal;
word-break: break-word;
}
.validation-table th:nth-child(1),
.validation-table td:nth-child(1) {
width: 60px;
min-width: 60px;
text-align: center;
}
.validation-table th:nth-child(2),
.validation-table td:nth-child(2) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(3),
.validation-table td:nth-child(3) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(4),
.validation-table td:nth-child(4) {
width: 100px;
min-width: 100px;
text-align: center;
}
.validation-table th:nth-child(5),
.validation-table td:nth-child(5) {
width: auto;
min-width: 200px;
}
.validation-table tr.error-row {
background: #fff5f5;
}
.validation-table tr.error-row td {
color: var(--error-color);
}
#validation-table-container {
overflow-x: auto;
max-width: 100%;
width: 100%;
}
#validation-table-container table {
min-width: 600px;
}
.file-name-display {
margin-top: 12px;
padding: 10px;
background: var(--bg-color);
border-radius: 6px;
font-size: 13px;
color: var(--text-secondary);
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #01337a;
color: #fff;
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
td {
padding: 10px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 在主页面CSS中添加 */
.sidebar-iframe {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
border: none;
z-index: 999;
}
/* 为main-content和header添加左边距以避开iframe */
.main-content {
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
}
.top-header {
left: var(--sidebar-width);
}
</style>
</head>
<body>
<div class="app-container">
<div id="sidebar-container"></div>
<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="./企业微信截图_b3a28d50-9aed-4599-9130-cf24fb78765a.png" alt="" style="width: 100%;">
</div>
</div>
</div>
</div>
</body>
<script src="./js.js"></script>
</html>
\ No newline at end of file
账户档案.html 0 → 100644
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备档案</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #1B64F3;
--primary-hover: #1554D3;
--primary-light: #e6f7ff;
--bg-color: #F5F6FA;
--card-bg: #FFFFFF;
--sidebar-bg: #0F172A;
--text-primary: #1A1F36;
--text-secondary: #64748B;
--text-tertiary: #94A3B8;
--text-light: #CBD5E1;
--border-color: #E2E8F0;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--success-color: #22C55E;
--warning-color: #EAB308;
--error-color: #EF4444;
--sidebar-width: 260px;
--header-height: 64px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.app-container {
display: flex;
min-height: 100vh;
}
/* 左侧导航栏 */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
background: var(--sidebar-bg);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
z-index: 1000;
}
.sidebar-logo {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 36px;
height: 36px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 18px;
}
.logo-text {
color: white;
font-size: 16px;
font-weight: 600;
}
.sidebar-menu {
padding: 16px 0;
}
.nav-group-title {
padding: 12px 20px 8px;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.menu-item, .nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: var(--text-light);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
}
.menu-item:hover, .nav-item:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.menu-item.active, .nav-item.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary-color);
}
.nav-item.has-submenu {
justify-content: space-between;
}
.nav-arrow {
width: 14px;
height: 14px;
transition: transform 0.2s;
margin-left: auto;
}
.nav-item.expanded .nav-arrow {
transform: rotate(90deg);
}
.nav-submenu {
display: none;
background: rgba(0, 0, 0, 0.1);
}
.nav-item.expanded + .nav-submenu {
display: block;
}
.nav-subitem {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px 10px 48px;
color: var(--text-light);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
position: relative;
}
.nav-subitem:hover {
background: rgba(27, 100, 243, 0.15);
color: white;
}
.nav-subitem.active {
background: rgba(27, 100, 243, 0.2);
color: white;
}
.nav-icon {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 顶部工具栏 */
.header, .top-header {
position: fixed;
top: 0;
left: var(--sidebar-width);
right: 0;
height: var(--header-height);
background: var(--card-bg);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
z-index: 999;
box-shadow: var(--shadow-sm);
}
.header-left {
display: flex;
align-items: center;
gap: 24px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
}
.breadcrumb-separator {
color: var(--text-tertiary);
}
.breadcrumb-current {
color: var(--text-primary);
font-weight: 500;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.header-icon-btn {
position: relative;
width: 36px;
height: 36px;
border-radius: 8px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.2s;
}
.header-icon-btn:hover {
background: var(--bg-color);
color: var(--primary-color);
}
.notification-badge {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
background: var(--error-color);
border-radius: 50%;
border: 2px solid var(--card-bg);
}
.lang-switcher {
display: flex;
gap: 6px;
align-items: center;
}
.lang-btn {
padding: 6px 12px;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.lang-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.lang-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--primary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
cursor: pointer;
}
.page-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
}
.user-info {
display: flex;
align-items: center;
gap: 16px;
}
.notification {
position: relative;
cursor: pointer;
color: var(--text-secondary);
}
/* 主内容区域 - 已调整左右内边距 */
.main-content {
flex: 1;
padding: 24px;
overflow-y: auto;
min-height: 100vh;
margin-left: 260px;
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
/* 调整左右内边距，从 8px 增加到 32px，以利用更多空间 */
/* padding: 4px 32px;
min-height: calc(100vh - var(--header-height));
.main-content { } */
}
.content-area {
padding: 0;
}
/* 页面标题区域 */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-title-section {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-title-main {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.3px;
}
.page-title-sub {
font-size: 14px;
color: var(--text-secondary);
}
/* 表格数据优化 */
.table-cell-number {
font-weight: 600;
color: var(--text-primary);
}
.table-cell-date {
color: var(--text-secondary);
font-size: 13px;
}
/* 表格内容样式增强 */
td strong {
color: var(--text-primary);
font-weight: 600;
}
td code {
font-size: 12px;
font-weight: 500;
}
/* 空状态 */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-secondary);
}
.empty-state-icon {
font-size: 48px;
color: var(--text-tertiary);
margin-bottom: 16px;
}
.empty-state-text {
font-size: 14px;
color: var(--text-secondary);
}
/* 响应式表格优化 */
@media (max-width: 1200px) {
.table-container {
overflow-x: auto;
}
table {
min-width: 1000px;
}
}
@media (max-width: 768px) {
.card-body {
padding: 16px;
}
th, td {
padding: 12px 16px;
}
.action-buttons {
flex-direction: column;
gap: 6px;
}
.action-btn {
width: 100%;
justify-content: center;
}
}
/* 卡片样式 */
.card {
background: var(--card-bg);
border-radius: 12px;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
border: 1px solid var(--border-color);
}
.card-header {
padding: 18px 20px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.2px;
}
.card-body {
padding: 20px 16px;
}
/* 按钮样式 */
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(27, 100, 243, 0.3);
}
.btn-secondary {
background: #f0f0f0;
color: var(--text-light);
}
.btn-secondary:hover {
background: #e0e0e0;
}
.btn-success {
background: var(--success-color);
color: white;
}
.btn-success:hover {
background: #389e0d;
}
.btn-danger {
background: var(--error-color);
color: white;
}
.btn-danger:hover {
background: #cf1322;
}
/* 标签页样式 */
.tabs {
display: flex;
gap: 16px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.tab {
padding: 10px 0;
color: var(--text-light);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
font-size: 14px;
}
.tab:hover {
color: var(--primary-color);
}
.tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
/* 表格样式 */
.table-container {
overflow-x: auto;
border-radius: 8px;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
}
th, td {
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
tbody tr {
transition: all 0.2s;
}
tbody tr:hover {
background: rgba(27, 100, 243, 0.04);
}
tbody tr:last-child td {
border-bottom: none;
}
td {
color: var(--text-primary);
font-size: 14px;
vertical-align: middle;
}
.status {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.status.active {
background: #f6ffed;
color: var(--success-color);
}
.status.inactive {
background: #fff2e8;
color: var(--warning-color);
}
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
padding: 6px 14px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.action-btn i {
font-size: 12px;
}
.action-btn.edit-btn {
background: rgba(27, 100, 243, 0.1);
color: var(--primary-color);
}
.action-btn.edit-btn:hover {
background: rgba(27, 100, 243, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.delete-btn {
background: rgba(239, 68, 68, 0.1);
color: var(--error-color);
}
.action-btn.delete-btn:hover {
background: rgba(239, 68, 68, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}
.action-btn.view-btn {
background: rgba(27, 100, 243, 0.08);
color: var(--primary-color);
}
.action-btn.view-btn:hover {
background: rgba(27, 100, 243, 0.15);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(27, 100, 243, 0.2);
}
.action-btn.copy-btn {
background: rgba(34, 197, 94, 0.1);
color: var(--success-color);
}
.action-btn.copy-btn:hover {
background: rgba(34, 197, 94, 0.2);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}
/* 模态框样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
align-items: center;
justify-content: center;
}
.modal.show {
display: flex;
}
.modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
}
.add-modal-content {
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 800px;
max-height: 85vh;
overflow-y: auto;
}
.modal-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
}
.close-modal {
background: none;
border: none;
font-size: 20px;
color: var(--text-light);
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.3s;
}
.close-modal:hover {
background: var(--secondary-color);
color: var(--text-color);
}
.modal-body {
padding: 24px;
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
/* 新增表单模态框样式 */
.add-modal-form .form-group {
margin-bottom: 20px;
}
.add-modal-form .form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.add-modal-form .form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.add-modal-form label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: var(--text-secondary);
font-size: 14px;
}
.add-modal-form input,
.add-modal-form select,
.add-modal-form textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s;
}
.add-modal-form input:focus,
.add-modal-form select:focus,
.add-modal-form textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.add-modal-form .section-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 20px 0 15px 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.upload-box {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
background-color: var(--bg-color);
}
.upload-box:hover {
border-color: var(--primary-color);
background-color: rgba(27, 100, 243, 0.05);
}
.upload-icon {
font-size: 24px;
color: var(--primary-color);
margin-bottom: 10px;
}
.upload-info {
color: var(--text-secondary);
font-size: 13px;
}
.file-name {
margin-top: 10px;
font-weight: 500;
color: var(--primary-color);
font-size: 13px;
}
.param-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.param-table th, .param-table td {
border: 1px solid var(--border-color);
padding: 8px;
text-align: left;
}
.param-table th {
background-color: var(--bg-color);
font-weight: 600;
}
.add-param-btn {
background: var(--primary-color);
color: white;
border: none;
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
}
.add-param-btn:hover {
background: var(--primary-hover);
}
/* 二维码预览样式 */
.qrcode-preview-large {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: var(--primary-light);
border-radius: 8px;
margin-bottom: 20px;
}
.qrcode-image {
width: 200px;
height: 200px;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.qrcode-image img {
max-width: 100%;
max-height: 100%;
}
/* 详情信息样式 */
.detail-info {
margin-top: 20px;
}
.detail-item {
display: flex;
margin-bottom: 12px;
font-size: 14px;
}
.detail-label {
width: 100px;
color: var(--text-light);
flex-shrink: 0;
}
.detail-value {
color: var(--text-color);
font-weight: 500;
}
/* 响应式设计 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.show-mobile {
transform: translateX(0);
}
.main-content {
margin-left: 0;
margin-top: 0;
padding: 16px; /* 在移动端保持较小的内边距 */
}
.header, .top-header {
left: 0;
}
.tabs {
flex-wrap: wrap;
}
}
/* 批量上传相关样式 */
.batch-upload-modal .modal-content {
max-width: 800px;
}
.template-selector {
margin-bottom: 20px;
}
.template-selector label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-primary);
}
.template-selector select {
width: 100%;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: white;
}
.template-download-btn {
margin-top: 10px;
padding: 8px 16px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.template-download-btn:hover {
background: var(--primary-hover);
}
.upload-area {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 40px 20px;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s;
background: var(--bg-color);
}
.upload-area:hover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.05);
}
.upload-area.dragover {
border-color: var(--primary-color);
background: rgba(27, 100, 243, 0.1);
}
.upload-icon-large {
font-size: 48px;
color: var(--primary-color);
margin-bottom: 12px;
}
.upload-text {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.upload-hint {
font-size: 12px;
color: var(--text-tertiary);
}
.progress-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.progress-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
}
.progress-stats {
display: flex;
gap: 20px;
}
.stat-item {
display: flex;
align-items: center;
gap: 6px;
}
.stat-label {
color: var(--text-secondary);
}
.stat-value {
font-weight: 600;
color: var(--text-primary);
}
.stat-value.success {
color: var(--success-color);
}
.stat-value.error {
color: var(--error-color);
}
.progress-bar-container {
width: 100%;
height: 8px;
background: var(--bg-color);
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
}
.progress-bar {
height: 100%;
background: var(--primary-color);
transition: width 0.3s ease;
border-radius: 4px;
}
.error-list {
margin-top: 16px;
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 12px;
background: #fff5f5;
}
.error-item {
padding: 8px;
margin-bottom: 6px;
background: white;
border-left: 3px solid var(--error-color);
border-radius: 4px;
font-size: 13px;
}
.error-item:last-child {
margin-bottom: 0;
}
.error-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.error-reason {
color: var(--error-color);
font-weight: 500;
}
.download-error-btn {
margin-top: 12px;
padding: 8px 16px;
background: var(--error-color);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.download-error-btn:hover {
background: #cf1322;
}
.validation-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
font-size: 13px;
table-layout: fixed;
}
.validation-table th,
.validation-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid var(--border-color);
white-space: normal;
word-break: normal;
overflow: visible;
vertical-align: middle;
}
.validation-table th {
background: var(--bg-color);
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.validation-table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.validation-table td:nth-child(5) {
white-space: normal;
word-break: break-word;
}
.validation-table th:nth-child(1),
.validation-table td:nth-child(1) {
width: 60px;
min-width: 60px;
text-align: center;
}
.validation-table th:nth-child(2),
.validation-table td:nth-child(2) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(3),
.validation-table td:nth-child(3) {
width: 120px;
min-width: 120px;
}
.validation-table th:nth-child(4),
.validation-table td:nth-child(4) {
width: 100px;
min-width: 100px;
text-align: center;
}
.validation-table th:nth-child(5),
.validation-table td:nth-child(5) {
width: auto;
min-width: 200px;
}
.validation-table tr.error-row {
background: #fff5f5;
}
.validation-table tr.error-row td {
color: var(--error-color);
}
#validation-table-container {
overflow-x: auto;
max-width: 100%;
width: 100%;
}
#validation-table-container table {
min-width: 600px;
}
.file-name-display {
margin-top: 12px;
padding: 10px;
background: var(--bg-color);
border-radius: 6px;
font-size: 13px;
color: var(--text-secondary);
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #01337a;
color: #fff;
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
td {
padding: 10px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 在主页面CSS中添加 */
.sidebar-iframe {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
height: 100vh;
border: none;
z-index: 999;
}
/* 为main-content和header添加左边距以避开iframe */
.main-content {
margin-left: var(--sidebar-width);
margin-top: var(--header-height);
}
.top-header {
left: var(--sidebar-width);
}
</style>
</head>
<body>
<div class="app-container">
<div id="sidebar-container"></div>
<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="企业微信截图_9bce6113-c7b1-4e9c-9a82-21d34e55e3d5.png" alt="" style="width: 100%;display:block;">
<img src="企业微信截图_25cdffcc-fec3-4a14-a154-074f841bbb2b.png" alt="" style="width: 100%;display:block;">
<img src="企业微信截图_2cdabb9d-3456-4a92-b544-74694a96b6ef.png" alt="" style="width: 100%;display:block;">
</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