<!DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<link href="style/css/common.css" rel="stylesheet">
<title>硬件运维系统
- 报告管理</title>
<link href="style/css/report.css" rel="stylesheet">
</head>
<body>
<div id="header
-container"></div>
<div class="container">
<h2 class="page
-title">报告管理</h2>
<div class="action
-bar">
<div class="search
-box">
<
input type="text" id="search
-report" placeholder="搜索报告名称/类型">
<
button class="btn" id="search
-btn">搜索</
button>
</div>
<div>
<
button class="btn" id="sort
-by
-date">按日期排序</
button>
<
button class="btn btn
-download" id="download
-all">下载全部报告</
button>
<
button class="btn" id="add
-report">新增报告</
button>
</div>
</div>
<!
-- 新增：添加滚动容器
-->
<div class="report
-container">
<div id="report
-list" class="report
-list">
<!
-- 报告卡片将动态生成
-->
</div>
</div>
</div>
<!
-- 报告编辑模态框
-->
<div id="report
-modal" class="modal">
<div class="modal
-content">
<div class="modal
-header">
<h2 id="modal
-title">新增报告</h2>
<span class="close">×</span>
</div>
<form id="report
-form">
<
input type="hidden" id="report
-id">
<div class="form
-group">
<label for="report
-name">报告名称</label>
<
input type="text" id="report
-name" required>
</div>
<div class="form
-group">
<label for="report
-type">报告类型</label>
<select id="report
-type" required>
<option value="硬件故障处理报告">硬件故障处理报告</option>
<option value="软件运维报告">软件运维报告</option>
<option value="设备健康度报告">设备健康度报告</option>
<option value="产线运行分析报告">产线运行分析报告</option>
<option value="硬件日志采集报告">硬件选择
- 获取指定时间段的日志</option>
</select>
</div>
<!
-- 日志时间段选择区
-->
<div class="form
-group log
-time
-range">
<label for="log
-start
-date">日志开始日期</label>
<
input type="date" id="log
-start
-date" required>
<label for="log
-end
-date" style="margin
-top: 10px;">日志结束日期</label>
<
input type="date" id="log
-end
-date" required>
</div>
<div class="form
-group">
<label for="report
-date">报告生成日期</label>
<
input type="date" id="report
-date" required>
</div>
<div class="form
-group">
<label for="report
-content">报告内容</label>
<div class="template
-desc" id="content
-desc">请根据报告类型填写内容...</div>
<textarea id="report
-content" required></textarea>
</div>
<div class="modal
-footer">
<
button type="
button" class="btn" id="cancel
-btn">取消</
button>
<
button type="submit" class="btn">保存</
button>
</div>
</form>
</div>
</div>
<!
-- 引入本地
jQuery -->
<script src="style/js/
jquery.min.js"></script>
<script>
// 检查登录状态
if (localStorage.getItem('isLogin') !== '1') {
window.location.href = 'login.html';
}
// 初始化报告数据
和硬件日志数据
let reports = [];
let hardwareLogs = [];
// DOM 元素缓存
const $reportList = $('#report
-list');
const $reportModal = $('#report
-modal');
const $modalTitle = $('#modal
-title');
const $reportForm = $('#report
-form');
const $reportId = $('#report
-id');
const $reportName = $('#report
-name');
const $reportType = $('#report
-type');
const $reportDate = $('#report
-date');
const $reportContent = $('#report
-content');
const $addReportBtn = $('#add
-report');
const $cancelBtn = $('#cancel
-btn');
const $closeBtn = $('.close');
const $searchBtn = $('#search
-btn');
const $search
Input = $('#search
-report');
const $sortByDateBtn = $('#sort
-by
-date');
const $downloadAllBtn = $('#download
-all');
const $logTimeRange = $('.log
-time
-range');
const $contentDesc = $('#content
-desc');
// 报告类型模板映射
const typeTemplates = {
'硬件故障处理报告': `1. 故障现象：
2. 故障排查过程：
3. 处理方案：
4. 处理结果：
5. 预防建议：`,
'软件运维报告': `1. 运维内容：
2. 操作过程：
3. 运行状态：
4. 遗留问题：
5. 后续计划：`,
'设备健康度报告': `1. 设备状态：
2. 检查项目：
3. 异常项：
4. 维护建议：
5. 预测分析：`,
'产线运行分析报告': `1. 生产数据：
2. 设备表现：
3. 瓶颈分析：
4. 改进措施：
5. 提升建议：`,
'硬件日志采集报告': `### 日志采集说明
- 采集时间段：{startDate} 至 {endDate}
- 涉及设备：自动从日志中提取
- 异常日志数量：{errorCount}
### 关键日志摘要
{logSummary}
`
};
// 从API加载报告数据
function loadReports() {
$.ajax({
url: 'api/reports.php',
method: 'GET',
dataType: 'json',
success: function (data) {
reports = data || [];
renderReports(reports);
},
error: function (xhr, status, error) {
console.error('加载报告失败:', error);
$reportList.html('<p style="text
-align:center;padding:20px;">加载报告数据失败，请稍后重试</p>');
}
});
}
// 加载硬件日志数据
function loadHardwareLogs() {
$.getJSON('data/hardware_logs.json', (data) => {
hardwareLogs = data.logs || [];
console.log('硬件日志加载成功');
}).fail((xhr, status, error) => {
console.error('加载硬件日志失败:', error);
hardwareLogs = [];
});
}
// 渲染报告列表
function renderReports(reportData) {
$reportList.empty();
// 解绑之前的事件处理器，避免重复绑定
$reportList.off('click', '.edit
-btn');
$reportList.off('click', '.delete
-btn');
$reportList.off('click', '.download
-btn');
if (reportData.length === 0) {
$reportList.html('<p style="text
-align:center;padding:20px;">暂无报告数据，请点击"新增报告"创建</p>');
return;
}
reportData.forEach(report => {
const $card = $(`
<div class="report
-card" data
-id="${report.id}">
<div class="report
-info">
<h3>${report.name}</h3>
<div class="report
-meta">
<span>${report.type} | </span>
<span>生成日期：${report.date}</span>
</div>
</div>
<div class="report
-action">
<
button class="action
-btn download
-btn">下载</
button>
<
button class="action
-btn edit
-btn">编辑</
button>
<
button class="action
-btn delete
-btn">删除</
button>
</div>
</div>
`);
$reportList.append($card);
});
// 绑定事件
$reportList.on('click', '.edit
-btn', function () {
const reportId = $(this).closest('.report
-card').data('id');
editReport(reportId);
});
$reportList.on('click', '.delete
-btn', function () {
const reportId = $(this).closest('.report
-card').data('id');
deleteReport(reportId);
});
$reportList.on('click', '.download
-btn', function () {
const reportId = $(this).closest('.report
-card').data('id');
downloadReport(reportId);
});
}
// 打开模态框
function openModal(isEdit = false, report = null) {
$reportForm[0].reset();
$logTimeRange.hide();
$reportContent.val('');
if (isEdit && report) {
$modalTitle.text('编辑报告');
$reportId.val(report.id);
$reportName.val(report.name);
$reportType.val(report.type);
$reportDate.val(report.date);
$reportContent.val(report.content);
if (report.type === '硬件日志采集报告') {
$logTimeRange.show();
$('#log
-start
-date').val(report.logStartDate || '');
$('#log
-end
-date').val(report.logEndDate || '');
}
} else {
$modalTitle.text('新增报告');
$reportId.val('');
$reportDate.val(new Date().toISOString().split('T')[0]);
}
$reportModal.show();
}
// 关闭模态框
function closeModal() {
$reportModal.hide();
}
// 编辑报告
function editReport(id) {
console.log('编辑报告：', reports);
console.log('报告ID：', id);
const stringId = String(id);
const report = reports.find(r => r.id === stringId);
console.log('编辑报告：', report);
// console.log(r.id);
if (report) {
openModal(true, report);
} else {
alert('未找到该报告');
loadReports();
}
}
// 删除报告
function deleteReport(id) {
const stringId = String(id);
const report = reports.find(r => r.id === stringId);
if (!report) {
alert('未找到该报告');
loadReports();
return;
}
if (confirm(`确定要删除"${report.name}"这份报告吗？删除后无法恢复！`)) {
$.ajax({
url: 'api/reports.php',
method: 'DELETE',
contentType: 'application/json',
data: JSON.stringify({ id: id }),
dataType: 'json',
success: function (response) {
if (response.success) {
loadReports(); // 重新加载数据
} else {
alert('删除失败：' + (response.message || '未知错误'));
}
},
error: function (xhr, status, error) {
console.error('删除报告失败:', error);
alert('删除报告失败，请检查网络连接');
}
});
}
}
// 下载单个报告
function downloadReport(id) {
const report = reports.find(r => r.id === id);
if (!report) return;
let content = `
报告名称：${report.name}
报告类型：${report.type}
生成日期：${report.date}
报告内容：
${report.content}
`.trim();
if (report.type === '硬件日志采集报告' && report.attachments && report.attachments.length) {
content += `\n\n=== 日志附件 ===\n`;
report.attachments.forEach(attach => {
content += `\n【附件：${attach.filename}】\n${attach.content}\n`;
});
}
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = $('<a>').attr({
href: url,
download: `${report.name.replace(/[\/:*?"<>|]/g, '
-')}.txt`
});
$('body').append(a);
a[0].click();
a.remove();
URL.revokeObjectURL(url);
}
// 下载全部报告
function downloadAllReports() {
if (reports.length === 0) {
alert('没有报告可下载');
return;
}
let allContent = '=== 所有报告汇总 ===\n\n';
reports.forEach((report, idx) => {
allContent += `【报告 ${idx + 1}】\n`;
allContent += `名称：${report.name}\n类型：${report.type}\n日期：${report.date}\n\n`;
allContent += `内容：\n${report.content}\n\n`;
if (report.type === '硬件日志采集报告' && report.attachments && report.attachments.length) {
allContent += `=== 日志附件 ===\n`;
report.attachments.forEach(attach => {
allContent += `\n【附件：${attach.filename}】\n${attach.content}\n`;
});
}
allContent += '========================================\n\n';
});
const blob = new Blob([allContent], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = $('<a>').attr({
href: url,
download: `所有报告汇总_${new Date().toISOString().split('T')[0]}.txt`
});
$('body').append(a);
a[0].click();
a.remove();
URL.revokeObjectURL(url);
}
// 保存报告
$reportForm.on('submit', function (e) {
e.preventDefault();
const formData = {
id: $reportId.val(),
name: $reportName.val(),
type: $reportType.val(),
date: $reportDate.val(),
content: $reportContent.val(),
attachments: []
};
if (formData.type === '硬件日志采集报告') {
const startDate = $('#log
-start
-date').val();
const endDate = $('#log
-end
-date').val();
formData.logStartDate = startDate;
formData.logEndDate = endDate;
const filteredLogs = hardwareLogs.filter(log => {
const logTime = new Date(log.timestamp);
const start = new Date(startDate);
const end = new Date(endDate);
return logTime >= start && logTime <= end;
});
if (filteredLogs.length > 0) {
const errorCount = filteredLogs.filter(log => log.level === 'ERROR').length;
const logSummary = filteredLogs.map(log =>
`[${log.timestamp}] [${log.device}] [${log.level}]：${log.content}`
).join('\n');
formData.content = typeTemplates['硬件日志采集报告']
.replace('{startDate}', startDate)
.replace('{endDate}', endDate)
.replace('{errorCount}', errorCount)
.replace('{logSummary}', logSummary);
formData.attachments.push({
filename: `hardware_logs_${startDate}_${endDate}.txt`,
content: filteredLogs.map(log =>
`${log.timestamp}\n${log.device}\n${log.level}\n${log.content}\n
-----\n`
).join('')
});
} else {
formData.content = '未找到指定时间段的日志数据';
}
}
const method = formData.id ? 'PUT' : 'POST';
$.ajax({
url: 'api/reports.php',
method: method,
contentType: 'application/json',
data: JSON.stringify(formData),
dataType: 'json',
success: function (response) {
if (response.success) {
loadReports();
closeModal();
} else {
alert('保存失败：' + (response.message || '未知错误'));
}
},
error: function (xhr, status, error) {
console.error('保存报告失败:', error);
alert('保存报告失败，请检查网络连接');
}
});
});
// 搜索报告
function handleSearch() {
const keyword = $search
Input.val().toLowerCase();
const filtered = reports.filter(report =>
report.name.toLowerCase().includes(keyword) ||
report.type.toLowerCase().includes(keyword)
);
renderReports(filtered);
}
// 按日期排序
function sortReportsByDate() {
const sorted = [...reports].sort((a, b) =>
new Date(b.date)
- new Date(a.date)
);
renderReports(sorted);
}
// 事件绑定
function bindEvents() {
// 报告类型切换
// /
修改报告类型切换事件
$reportType.on('change', function () {
const type = $(this).val();
const $startDate = $('#log
-start
-date');
const $endDate = $('#log
-end
-date');
$logTimeRange.hide();
$contentDesc.text('请根据报告类型填写内容...');
if (type === '硬件日志采集报告') {
$logTimeRange.show();
$contentDesc.text('选择时间段后将自动生成日志摘要');
$reportContent.val('');
// 仅在日志类型下添加必填属性
$startDate.attr('required', true);
$endDate.attr('required', true);
} else {
$reportContent.val(typeTemplates[type] || '');
// 其他类型下移除必填属性
$startDate.removeAttr('required');
$endDate.removeAttr('required');
}
});
// 新增报告
$addReportBtn.on('click', () => openModal());
// 关闭模态框
$closeBtn.on('click', closeModal);
$cancelBtn.on('click', closeModal);
// 点击模态框外部关闭
$(window).on('click', (e) => {
if ($(e.target).is($reportModal)) closeModal();
});
// 搜索
$searchBtn.on('click', handleSearch);
$search
Input.on('keypress', (e) => {
if (e.key === 'Enter') handleSearch();
});
// 排序
$sortByDateBtn.on('click', sortReportsByDate);
// 下载全部
$downloadAllBtn.on('click', downloadAllReports);
}
// 初始化
function init() {
bindEvents();
loadHardwareLogs();
loadReports();
}
// 页面加载完成后初始化
$(document).ready(init);
</script>
</body>
</html>
优化代码.让拟态窗更加好看
本文介绍如何使用Jquery动态调整Input标签的宽度，并结合CSS实现Input和Button在同一行显示的方法，通过自定义CSS和设置外部div ID进行布局调整。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
