20250922
This commit is contained in:
+179
-201
@@ -4,176 +4,136 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>参数配置 - 车主信息查询系统</title>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Font Awesome -->
|
||||
<!-- 引入Layui CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
|
||||
<!-- 引入Font Awesome -->
|
||||
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
|
||||
<!-- 配置Tailwind自定义颜色和字体 -->
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#2563eb',
|
||||
secondary: '#f3f4f6',
|
||||
'primary-light': '#dbeafe',
|
||||
'primary-dark': '#1d4ed8',
|
||||
'table-header': '#f9fafb',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- 自定义工具类 -->
|
||||
<style type="text/tailwindcss">
|
||||
@layer utilities {
|
||||
.content-auto {
|
||||
content-visibility: auto;
|
||||
}
|
||||
.card-shadow {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
.input-focus {
|
||||
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- 引入自定义CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
|
||||
|
||||
<!-- 引入Layui JS -->
|
||||
<script src="{{ url_for('static', filename='layui.js') }}"></script>
|
||||
</head>
|
||||
<body class="bg-secondary min-h-screen font-sans">
|
||||
<body>
|
||||
{% include 'header.html' %}
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<main class="container mx-auto px-4 pt-24 pb-12">
|
||||
<!-- 返回按钮 -->
|
||||
<div class="mb-6 flex justify-end">
|
||||
<a href="{{ url_for('query') }}" class="inline-flex items-center text-primary hover:text-primary-dark transition-colors">
|
||||
<i class="fa fa-arrow-left mr-2"></i> 返回主页面
|
||||
</a>
|
||||
<div class="content-container">
|
||||
<div class="content-wrapper">
|
||||
<!-- 参数配置卡片 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-cog"></i> 参数配置
|
||||
<a href="{{ url_for('query') }}" class="layui-btn layui-btn-xs layui-btn-primary" style="float: right;">
|
||||
<i class="fa fa-arrow-left"></i> 返回主页面
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- 消息提示区域 -->
|
||||
{% if error %}
|
||||
<div class="layui-bg-red message-box">
|
||||
<i class="fa fa-exclamation-circle"></i> {{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if success %}
|
||||
<div class="layui-bg-green message-box">
|
||||
<i class="fa fa-check-circle"></i> {{ success }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="layui-text" style="text-align: center; margin-bottom: 20px;">
|
||||
<div style="width: 80px; height: 80px; background-color: #f2f2f2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
|
||||
<i class="fa fa-cogs" style="font-size: 40px; color: #009688;"></i>
|
||||
</div>
|
||||
<p style="color: #666;">请设置和管理系统参数配置</p>
|
||||
</div>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<div class="layui-form" id="parameterForm" style="max-width: 600px; margin: 0 auto;">
|
||||
<div class="message-box" id="updateTimeAlert" style="display: none; justify-content: center; margin-bottom: 15px;">
|
||||
<i class="fa fa-info-circle"></i>
|
||||
<span id="updateTimeContent"></span>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">参数1 <span class="layui-form-must">*</span></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" id="param1" name="param1" required lay-verify="required" placeholder="请输入参数1的值" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">参数2</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" id="param2" name="param2" placeholder="请输入参数2的值" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">参数3</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" id="param3" name="param3" placeholder="请输入参数3的值" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">参数4</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" id="param4" name="param4" placeholder="请输入参数4的值" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">参数5</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" id="param5" name="param5" placeholder="请输入参数5的值" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn layui-btn-primary" id="reloadButton">
|
||||
<i class="fa fa-refresh mr-1"></i> 重新加载
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-normal" id="saveButton" lay-submit lay-filter="saveConfig">
|
||||
<i class="fa fa-save mr-1"></i> 保存配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 个人信息表单 -->
|
||||
<div class="max-w-md mx-auto bg-white rounded-lg shadow-xl p-8 animate-fade-in">
|
||||
<div class="text-center mb-6">
|
||||
<div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<i class="fa fa-cog text-primary text-2xl"></i>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-800">参数配置</h2>
|
||||
<p class="text-gray-500 mt-2">请配置系统参数</p>
|
||||
</div>
|
||||
|
||||
<!-- 消息提示区域 -->
|
||||
{% if error %}
|
||||
<div class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-start animate-fade-in">
|
||||
<i class="fa fa-exclamation-circle mt-1 mr-3"></i>
|
||||
<span>{{ error }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if success %}
|
||||
<div class="mb-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md flex items-start animate-fade-in">
|
||||
<i class="fa fa-check-circle mt-1 mr-3"></i>
|
||||
<span>{{ success }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="mb-6 bg-blue-50 border border-blue-100 text-blue-700 px-4 py-3 rounded-md flex items-center" id="updateTimeAlert" style="display: none;">
|
||||
<i class="fa fa-info-circle mr-2"></i>
|
||||
<span id="updateTimeContent"></span>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="mb-4">
|
||||
<label for="param1" class="block text-gray-700 text-sm font-medium mb-2">参数1 <span class="text-red-500">*</span></label>
|
||||
<input type="text" id="param1" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入参数1的值">
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="param2" class="block text-gray-700 text-sm font-medium mb-2">参数2</label>
|
||||
<input type="text" id="param2" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入参数2的值">
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="param3" class="block text-gray-700 text-sm font-medium mb-2">参数3</label>
|
||||
<input type="text" id="param3" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入参数3的值">
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="param4" class="block text-gray-700 text-sm font-medium mb-2">参数4</label>
|
||||
<input type="text" id="param4" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入参数4的值">
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label for="param5" class="block text-gray-700 text-sm font-medium mb-2">参数5</label>
|
||||
<input type="text" id="param5" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入参数5的值">
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-3">
|
||||
<button onclick="loadParameterConfig()" class="flex-1 border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-md transition-colors flex items-center justify-center">
|
||||
<i class="fa fa-refresh mr-2"></i> 重新加载
|
||||
</button>
|
||||
<button onclick="saveParameterConfig()" class="flex-1 bg-primary hover:bg-primary-dark text-white py-2 px-4 rounded-md transition-colors shadow-sm hover:shadow flex items-center justify-center">
|
||||
<i class="fa fa-save mr-2"></i> 保存配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
layui.use(['form', 'layer'], function(){
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 页面加载时获取参数配置
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadParameterConfig();
|
||||
|
||||
// 重新加载按钮点击事件
|
||||
document.getElementById('reloadButton').addEventListener('click', function() {
|
||||
loadParameterConfig();
|
||||
});
|
||||
|
||||
// 加载参数配置
|
||||
function loadParameterConfig() {
|
||||
fetch('/get_parameter_config')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success && data.parameters) {
|
||||
const parameters = data.parameters;
|
||||
document.getElementById('param1').value = parameters.param1 || '';
|
||||
document.getElementById('param2').value = parameters.param2 || '';
|
||||
document.getElementById('param3').value = parameters.param3 || '';
|
||||
document.getElementById('param4').value = parameters.param4 || '';
|
||||
document.getElementById('param5').value = parameters.param5 || '';
|
||||
|
||||
// 显示更新时间
|
||||
if (parameters.update_time) {
|
||||
document.getElementById('updateTimeContent').textContent = '最后更新时间：' + parameters.update_time;
|
||||
document.getElementById('updateTimeAlert').style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
showErrorMessage('获取参数配置失败：' + (data.error || ''));
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showErrorMessage('获取参数配置失败，请稍后重试');
|
||||
console.error('获取参数配置失败', error);
|
||||
});
|
||||
}
|
||||
|
||||
// 保存参数配置
|
||||
function saveParameterConfig() {
|
||||
// 表单提交
|
||||
form.on('submit(saveConfig)', function() {
|
||||
// 添加加载状态
|
||||
var saveButton = document.getElementById('saveButton');
|
||||
var originalText = saveButton.innerHTML;
|
||||
|
||||
saveButton.disabled = true;
|
||||
saveButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 保存中...';
|
||||
|
||||
// 表单验证
|
||||
if (!document.getElementById('param1').value.trim()) {
|
||||
showErrorMessage('参数1不能为空');
|
||||
return;
|
||||
saveButton.disabled = false;
|
||||
saveButton.innerHTML = originalText;
|
||||
return false;
|
||||
}
|
||||
|
||||
const formData = {
|
||||
@@ -193,6 +153,10 @@
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// 恢复按钮状态
|
||||
saveButton.disabled = false;
|
||||
saveButton.innerHTML = originalText;
|
||||
|
||||
if (data.success) {
|
||||
showSuccessMessage('参数配置保存成功');
|
||||
// 重新加载参数配置
|
||||
@@ -202,6 +166,10 @@
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
// 恢复按钮状态
|
||||
saveButton.disabled = false;
|
||||
saveButton.innerHTML = originalText;
|
||||
|
||||
let errorMessage = '保存参数配置失败，请稍后重试';
|
||||
if (error.responseJSON && error.responseJSON.error) {
|
||||
errorMessage = error.responseJSON.error;
|
||||
@@ -209,61 +177,71 @@
|
||||
showErrorMessage(errorMessage);
|
||||
console.error('保存参数配置失败', error);
|
||||
});
|
||||
|
||||
return false; // 阻止表单默认提交
|
||||
});
|
||||
|
||||
// 加载参数配置
|
||||
function loadParameterConfig() {
|
||||
// 添加加载状态
|
||||
var reloadButton = document.getElementById('reloadButton');
|
||||
var originalText = reloadButton.innerHTML;
|
||||
|
||||
reloadButton.disabled = true;
|
||||
reloadButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 加载中...';
|
||||
|
||||
fetch('/get_parameter_config')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// 恢复按钮状态
|
||||
reloadButton.disabled = false;
|
||||
reloadButton.innerHTML = originalText;
|
||||
|
||||
if (data.success && data.parameters) {
|
||||
const parameters = data.parameters;
|
||||
document.getElementById('param1').value = parameters.param1 || '';
|
||||
document.getElementById('param2').value = parameters.param2 || '';
|
||||
document.getElementById('param3').value = parameters.param3 || '';
|
||||
document.getElementById('param4').value = parameters.param4 || '';
|
||||
document.getElementById('param5').value = parameters.param5 || '';
|
||||
|
||||
// 显示更新时间
|
||||
if (parameters.update_time) {
|
||||
document.getElementById('updateTimeContent').textContent = '最后更新时间：' + parameters.update_time;
|
||||
document.getElementById('updateTimeAlert').style.display = 'flex';
|
||||
} else {
|
||||
document.getElementById('updateTimeAlert').style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
showErrorMessage('获取参数配置失败：' + (data.error || ''));
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
// 恢复按钮状态
|
||||
reloadButton.disabled = false;
|
||||
reloadButton.innerHTML = originalText;
|
||||
|
||||
showErrorMessage('获取参数配置失败，请稍后重试');
|
||||
console.error('获取参数配置失败', error);
|
||||
});
|
||||
}
|
||||
|
||||
// 显示错误消息
|
||||
function showErrorMessage(message) {
|
||||
// 创建错误消息元素
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-start animate-fade-in';
|
||||
errorDiv.innerHTML = `
|
||||
<i class="fa fa-exclamation-circle mt-1 mr-3"></i>
|
||||
<span>${message}</span>
|
||||
`;
|
||||
|
||||
// 插入到表单前
|
||||
const container = document.querySelector('.space-y-4');
|
||||
container.insertBefore(errorDiv, container.firstChild);
|
||||
|
||||
// 3秒后自动移除
|
||||
setTimeout(() => {
|
||||
errorDiv.style.opacity = '0';
|
||||
errorDiv.style.transform = 'translateY(-10px)';
|
||||
errorDiv.style.transition = 'opacity 0.3s, transform 0.3s';
|
||||
setTimeout(() => {
|
||||
if (errorDiv.parentNode) {
|
||||
errorDiv.parentNode.removeChild(errorDiv);
|
||||
}
|
||||
}, 300);
|
||||
}, 3000);
|
||||
layer.msg(message, {
|
||||
icon: 5,
|
||||
time: 3000
|
||||
});
|
||||
}
|
||||
|
||||
// 显示成功消息
|
||||
function showSuccessMessage(message) {
|
||||
// 创建成功消息元素
|
||||
const successDiv = document.createElement('div');
|
||||
successDiv.className = 'mb-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md flex items-start animate-fade-in';
|
||||
successDiv.innerHTML = `
|
||||
<i class="fa fa-check-circle mt-1 mr-3"></i>
|
||||
<span>${message}</span>
|
||||
`;
|
||||
|
||||
// 插入到表单前
|
||||
const container = document.querySelector('.space-y-4');
|
||||
container.insertBefore(successDiv, container.firstChild);
|
||||
|
||||
// 3秒后自动移除
|
||||
setTimeout(() => {
|
||||
successDiv.style.opacity = '0';
|
||||
successDiv.style.transform = 'translateY(-10px)';
|
||||
successDiv.style.transition = 'opacity 0.3s, transform 0.3s';
|
||||
setTimeout(() => {
|
||||
if (successDiv.parentNode) {
|
||||
successDiv.parentNode.removeChild(successDiv);
|
||||
}
|
||||
}, 300);
|
||||
}, 3000);
|
||||
layer.msg(message, {
|
||||
icon: 1,
|
||||
time: 3000
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{% include 'footer.html' %}
|
||||
|
||||
Reference in New Issue
Block a user