u
This commit is contained in:
1 parent
d9b2522552
commit
bac885cb28
7 files changed
+7027
-623
No files matched your search
File diff suppressed because it is too large.
Load diff
@@ -51,6 +51,8 @@
|
||||
<a href="javascript:endEditRow()" class="easyui-linkbutton" iconCls="icon-save">保存当前行</a>
|
||||
<a href="javascript:removeRows()" class="easyui-linkbutton" iconCls="icon-remove">删除所选</a>
|
||||
<a href="javascript:confirmDelete()" class="easyui-linkbutton" iconCls="icon-save">彻底删除</a>
|
||||
<a href="javascript:addRow()" class="easyui-linkbutton" iconCls="icon-add">新增一行</a>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -58,8 +60,12 @@ let editIndex = undefined;
|
||||
|
||||
// 初始化 Datagrid 数据
|
||||
$('#dg').datagrid({
|
||||
data: createMockData(100)
|
||||
data: createMockData(0),
|
||||
onLoadSuccess:() => {
|
||||
console.log("success")
|
||||
}
|
||||
});
|
||||
|
||||
// 2. 获取分页控件并绑定事件
|
||||
var pager = $('#dg').datagrid('getPager');
|
||||
pager.pagination({
|
||||
@@ -128,26 +134,6 @@ function randomDate(start, end){
|
||||
}
|
||||
|
||||
|
||||
// 批量删除(不立即提交)
|
||||
function removeRows() {
|
||||
let rows = $('#dg').datagrid('getChecked');
|
||||
if(rows.length === 0){
|
||||
$.messager.alert('提示', '请先勾选要删除的行');
|
||||
return;
|
||||
}
|
||||
|
||||
// 倒序删除避免索引错乱
|
||||
let indexes = rows.map(row => $('#dg').datagrid('getRowIndex', row))
|
||||
.sort((a,b) => b - a);
|
||||
|
||||
indexes.forEach(index => $('#dg').datagrid('deleteRow', index));
|
||||
|
||||
|
||||
$('#dg').datagrid('clearSelections');
|
||||
$('#dg').datagrid('clearChecked');
|
||||
}
|
||||
|
||||
|
||||
// 获取真正删除的数据
|
||||
function confirmDelete(){
|
||||
let deleted = $('#dg').datagrid('getChanges','deleted');
|
||||
@@ -194,7 +180,77 @@ $('#dg').datagrid({
|
||||
});
|
||||
}
|
||||
});
|
||||
// 修复后的新增一行函数
|
||||
function addRow() {
|
||||
if (!endEditRow()) return; // 结束当前行编辑
|
||||
|
||||
// 获取准确的数据状态
|
||||
let data = $('#dg').datagrid('getData');
|
||||
let currentRows = data.rows || [];
|
||||
|
||||
// 创建新行对象 - 确保使用全新的对象
|
||||
let newRow = {
|
||||
id: getNextId(currentRows),
|
||||
name: '',
|
||||
birth: '',
|
||||
score: ''
|
||||
};
|
||||
|
||||
// 使用 appendRow 而不是 insertRow,避免索引计算问题
|
||||
$('#dg').datagrid('appendRow', newRow);
|
||||
|
||||
// 获取最新的行索引
|
||||
let allRows = $('#dg').datagrid('getRows');
|
||||
let newIndex = allRows.length - 1;
|
||||
|
||||
// 自动选中并进入编辑
|
||||
$('#dg').datagrid('selectRow', newIndex);
|
||||
$('#dg').datagrid('beginEdit', newIndex);
|
||||
editIndex = newIndex;
|
||||
|
||||
// 清除可能的数据残留
|
||||
$('#dg').datagrid('clearSelections');
|
||||
$('#dg').datagrid('clearChecked');
|
||||
|
||||
// 滚动到最后一行
|
||||
$('#dg').datagrid('scrollTo', newIndex);
|
||||
}
|
||||
|
||||
// 改进的删除函数,确保彻底清理
|
||||
function removeRows() {
|
||||
let rows = $('#dg').datagrid('getChecked');
|
||||
if(rows.length === 0){
|
||||
$.messager.alert('提示', '请先勾选要删除的行');
|
||||
return;
|
||||
}
|
||||
|
||||
// 倒序删除避免索引错乱
|
||||
let indexes = rows.map(row => $('#dg').datagrid('getRowIndex', row))
|
||||
.sort((a,b) => b - a);
|
||||
|
||||
indexes.forEach(index => $('#dg').datagrid('deleteRow', index));
|
||||
|
||||
// 彻底清理选择状态
|
||||
$('#dg').datagrid('clearSelections');
|
||||
$('#dg').datagrid('clearChecked');
|
||||
|
||||
// 重要:接受变更,确保删除状态被确认
|
||||
$('#dg').datagrid('acceptChanges');
|
||||
}
|
||||
|
||||
// 更安全的 ID 生成函数
|
||||
function getNextId(dataArray){
|
||||
if(!dataArray || dataArray.length === 0) return 1;
|
||||
|
||||
let maxId = 0;
|
||||
// 遍历所有行,确保找到真正的最大 ID
|
||||
for(let i = 0; i < dataArray.length; i++) {
|
||||
if(dataArray[i] && dataArray[i].id > maxId) {
|
||||
maxId = dataArray[i].id;
|
||||
}
|
||||
}
|
||||
return maxId + 1;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,457 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>查询进度步骤条 - 精确对齐版本</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.g3-main-content-indicator{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.g3-main-content-indicator-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
color: #1a2980;
|
||||
}
|
||||
|
||||
.progress-steps {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
margin: 60px 0px;
|
||||
counter-reset: step;
|
||||
}
|
||||
|
||||
.step {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-connector {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
height: 4px;
|
||||
background-color: #e0e0e0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: #4b6cb7;
|
||||
transition: width 0.8s ease, background-color 0.8s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.step-progress.success {
|
||||
background: linear-gradient(to right, #4CAF50, #2E7D32);
|
||||
}
|
||||
|
||||
.step-progress.failed {
|
||||
background: linear-gradient(to right, #f44336, #c62828);
|
||||
}
|
||||
|
||||
.step-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: #e0e0e0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
border: 4px solid white;
|
||||
box-shadow: 0 0 0 3px #e0e0e0;
|
||||
transition: all 0.5s ease;
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.step.active .step-icon {
|
||||
background: #4b6cb7;
|
||||
color: white;
|
||||
box-shadow: 0 0 0 3px #b8c6f0;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
.step.completed .step-icon {
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
box-shadow: 0 0 0 3px #a5d6a7;
|
||||
}
|
||||
|
||||
.step.failed .step-icon {
|
||||
background: #f44336;
|
||||
color: white;
|
||||
box-shadow: 0 0 0 3px #ffcdd2;
|
||||
}
|
||||
|
||||
.step.completed .step-icon::after {
|
||||
content: '✓';
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.step.failed .step-icon::after {
|
||||
content: '✕';
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.step-label {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.step.active .step-label {
|
||||
color: #4b6cb7;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.step.completed .step-label {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.step.failed .step-label {
|
||||
color: #f44336;
|
||||
font-weight: 600;
|
||||
}
|
||||
.progress-info {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
border-left: 4px solid #4b6cb7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.progress-info.failed {
|
||||
border-left-color: #f44336;
|
||||
}
|
||||
|
||||
.progress-info.success {
|
||||
border-left-color: #4CAF50;
|
||||
}
|
||||
|
||||
.progress-status {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.progress-details {
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.progress-time {
|
||||
display: inline-block;
|
||||
background: #e3f2fd;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
color: #1565c0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="statusIndicator" class="g3-main-content-indicator">
|
||||
<div class="g3-main-content-indicator-title">查询状态</div>
|
||||
<div class="progress-steps">
|
||||
<!-- 步骤1 -->
|
||||
<div class="step active" id="step1">
|
||||
<div class="step-icon">1</div>
|
||||
<div class="step-label">验证查询条件</div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤2 -->
|
||||
<div class="step" id="step2">
|
||||
<div class="step-icon">2</div>
|
||||
<div class="step-label">发出请求</div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤3 -->
|
||||
<div class="step" id="step3">
|
||||
<div class="step-icon">3</div>
|
||||
<div class="step-label">等待响应</div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤4 -->
|
||||
<div class="step" id="step4">
|
||||
<div class="step-icon">4</div>
|
||||
<div class="step-label">查询成功</div>
|
||||
</div>
|
||||
|
||||
<!-- 连接线1-2 -->
|
||||
<div class="step-connector" id="connector1" style="left: 12.5%; width: 25%;">
|
||||
<div class="step-progress" id="progress1"></div>
|
||||
</div>
|
||||
|
||||
<!-- 连接线2-3 -->
|
||||
<div class="step-connector" id="connector2" style="left: 37.5%; width: 25%;">
|
||||
<div class="step-progress" id="progress2"></div>
|
||||
</div>
|
||||
|
||||
<!-- 连接线3-4 -->
|
||||
<div class="step-connector" id="connector3" style="left: 62.5%; width: 25%;">
|
||||
<div class="step-progress" id="progress3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-info" id="progressInfo">
|
||||
<div class="progress-details" id="progressDetails">
|
||||
检查查询参数的有效性,确保数据请求符合系统要求。
|
||||
<div class="progress-time">已用时间: <span id="timeElapsed">0分00秒</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const steps = document.querySelectorAll('.step');
|
||||
const stepProgresses = document.querySelectorAll('.step-progress');
|
||||
const connectors = document.querySelectorAll('.step-connector');
|
||||
const progressInfoElement = document.getElementById('progressInfo');
|
||||
const progressDetails = document.getElementById('progressDetails');
|
||||
const timeElapsed = document.getElementById('timeElapsed');
|
||||
|
||||
let currentStep = 1;
|
||||
let isRunning = false;
|
||||
let hasFailed = false;
|
||||
let timerInterval;
|
||||
let seconds = 0;
|
||||
let stepStatus = [null, 'active', null, null, null];
|
||||
|
||||
|
||||
// 计算连接线位置
|
||||
function calculateConnectorPositions() {
|
||||
const stepWidth = 100 / steps.length; // 每个步骤占据的宽度百分比
|
||||
|
||||
connectors.forEach((connector, index) => {
|
||||
// 计算连接线的起始位置和宽度
|
||||
const left = (index + 0.5) * stepWidth; // 从第一个步骤的中心开始
|
||||
const width = stepWidth; // 连接线宽度等于步骤宽度
|
||||
|
||||
connector.style.left = left + `%`;
|
||||
connector.style.width = width + `%`;
|
||||
});
|
||||
}
|
||||
|
||||
// 更新步骤状态
|
||||
function updateSteps() {
|
||||
steps.forEach((step, index) => {
|
||||
step.classList.remove('active', 'completed', 'failed');
|
||||
|
||||
if (index + 1 < currentStep) {
|
||||
step.classList.add('completed');
|
||||
} else if (index + 1 === currentStep) {
|
||||
if (currentStep > steps.length) {
|
||||
// 如果所有步骤已完成,最后一个步骤显示为完成状态
|
||||
step.classList.add('completed');
|
||||
} else {
|
||||
step.classList.add('active');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 更新进度条
|
||||
function updateProgressBars() {
|
||||
// 重置所有进度条
|
||||
stepProgresses.forEach((progress, index) => {
|
||||
progress.style.width = '0';
|
||||
progress.classList.remove('success', 'failed');
|
||||
});
|
||||
|
||||
// 设置已完成的进度条
|
||||
for (let i = 1; i < currentStep; i++) {
|
||||
if (i <= stepProgresses.length) {
|
||||
const progress = document.getElementById(`progress` + i);
|
||||
if (progress) {
|
||||
progress.style.width = '100%';
|
||||
// 根据步骤状态设置颜色
|
||||
if (stepStatus[i] === 'completed') {
|
||||
progress.classList.add('success');
|
||||
} else if (stepStatus[i] === 'failed') {
|
||||
progress.classList.add('failed');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 标记步骤失败
|
||||
function markStepFailed(stepIndex, error) {
|
||||
stepStatus[stepIndex] = 'failed';
|
||||
hasFailed = true;
|
||||
|
||||
steps[stepIndex - 1].classList.remove('active', 'completed');
|
||||
steps[stepIndex - 1].classList.add('failed');
|
||||
|
||||
// 标记前一个连接线为失败
|
||||
if (stepIndex > 1) {
|
||||
const prevProgress = document.getElementById("progress" + (stepIndex - 1));
|
||||
if (prevProgress) {
|
||||
prevProgress.classList.add('failed');
|
||||
}
|
||||
}
|
||||
|
||||
progressInfoElement.classList.add('failed');
|
||||
|
||||
isRunning = false;
|
||||
stopTimer();
|
||||
|
||||
updateProgressBars();
|
||||
}
|
||||
|
||||
// 标记步骤成功
|
||||
function markStepCompleted(stepIndex) {
|
||||
stepStatus[stepIndex] = 'completed';
|
||||
updateSteps();
|
||||
|
||||
// 标记前一个连接线为成功
|
||||
if (stepIndex > 1) {
|
||||
const prevProgress = document.getElementById("progress" + (stepIndex - 1));
|
||||
if (prevProgress) {
|
||||
prevProgress.classList.add('success');
|
||||
}
|
||||
}
|
||||
|
||||
updateProgressBars();
|
||||
}
|
||||
|
||||
// 标记所有步骤完成
|
||||
function markAllStepsCompleted() {
|
||||
for (let i = 1; i <= steps.length; i++) {
|
||||
stepStatus[i] = 'completed';
|
||||
}
|
||||
updateSteps();
|
||||
updateProgressBars();
|
||||
}
|
||||
|
||||
// 更新状态信息
|
||||
function updateStatus() {
|
||||
const statusTexts = [
|
||||
'',
|
||||
'正在验证查询条件...',
|
||||
'正在向服务器发出请求...',
|
||||
'正在等待服务器响应...',
|
||||
'查询成功,正在处理结果...'
|
||||
];
|
||||
|
||||
const detailTexts = [
|
||||
'',
|
||||
'检查查询参数的有效性,确保数据请求符合系统要求。',
|
||||
'将查询请求发送到远程服务器,建立数据连接。',
|
||||
'等待服务器处理查询请求并返回结果。',
|
||||
'处理查询结果并准备返回,即将完成整个过程。'
|
||||
];
|
||||
|
||||
progressDetails.innerHTML = detailTexts[currentStep] +
|
||||
'<div class="progress-time">已用时间: <span id="timeElapsed">'
|
||||
+ formatTime(seconds) +
|
||||
'</span></div>';
|
||||
|
||||
progressInfoElement.classList.remove('failed');
|
||||
}
|
||||
|
||||
// 格式化时间显示
|
||||
function formatTime(totalSeconds) {
|
||||
const minutes = Math.floor(totalSeconds / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
return minutes + "分" + seconds.toString().padStart(2, "0") + "秒";
|
||||
}
|
||||
|
||||
// 开始计时器
|
||||
function startTimer() {
|
||||
seconds = 0;
|
||||
timerInterval = setInterval(() => {
|
||||
seconds++;
|
||||
timeElapsed.textContent = formatTime(seconds);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 停止计时器
|
||||
function stopTimer() {
|
||||
clearInterval(timerInterval);
|
||||
}
|
||||
|
||||
// 初始化
|
||||
updateSteps();
|
||||
updateProgressBars();
|
||||
updateStatus();
|
||||
function runStep() {
|
||||
if (currentStep > steps.length) {
|
||||
// 查询完成
|
||||
isRunning = false;
|
||||
stopTimer();
|
||||
markAllStepsCompleted();
|
||||
progressDetails.innerHTML =
|
||||
'数据查询已成功完成,结果已准备就绪。' +
|
||||
'<div class="progress-time">总用时: <span id="timeElapsed">'
|
||||
+ formatTime(seconds) +
|
||||
'</span></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
updateStatus();
|
||||
updateSteps();
|
||||
updateProgressBars();
|
||||
|
||||
const stepWillFail = Math.random() < 0.2;
|
||||
const duration = [0,1000,1000,1000,1000][currentStep];
|
||||
|
||||
setTimeout(() => {
|
||||
if (stepWillFail && !hasFailed) {
|
||||
markStepFailed(currentStep, "模拟失败");
|
||||
hasFailed = true;
|
||||
return;
|
||||
}
|
||||
|
||||
markStepCompleted(currentStep);
|
||||
currentStep++;
|
||||
runStep(); // ✅ 递归调用下一步
|
||||
}, duration);
|
||||
}
|
||||
|
||||
runStep();
|
||||
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,7 +7,7 @@ snowflake:
|
||||
workerID: 0
|
||||
|
||||
db:
|
||||
host: 117.72.182.135
|
||||
host: 127.0.0.1
|
||||
port: 5432
|
||||
user: postgres
|
||||
password: zhang520..
|
||||
|
||||
@@ -51,7 +51,6 @@ func LoginDefault(ctx context.Context, c *app.RequestContext) {
|
||||
Where(userinfo.IDEQ(loginUser.ID)).
|
||||
Exec(ctx)
|
||||
|
||||
logx.CtxInfo(ctx, "测试测试")
|
||||
if err != nil {
|
||||
logx.CtxError(ctx, "更新用户登录时间失败,UserID=%d, err=%v", loginUser.ID, err)
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ type dbConfig struct {
|
||||
|
||||
// Db 默认值
|
||||
var Db = &dbConfig{
|
||||
Host: "117.72.182.135",
|
||||
Host: "127.0.0.1",
|
||||
Port: 5432,
|
||||
User: "postgres",
|
||||
Password: "zhang520..",
|
||||
|
||||
+5900
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user