219 lines
11 KiB
HTML
219 lines
11 KiB
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="/public/static/css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>订单日报系统</h1>
|
||
|
||
<div class="tabs">
|
||
<button class="tab active" onclick="switchTab('config')">配置管理</button>
|
||
<button class="tab" onclick="switchTab('generate')">日报生成</button>
|
||
<button class="tab" onclick="switchTab('history')">历史记录</button>
|
||
</div>
|
||
|
||
<!-- 配置管理 -->
|
||
<div id="config-tab" class="tab-content active">
|
||
<div class="card">
|
||
<button class="btn btn-primary" onclick="showCreateModal()">创建配置</button>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>配置名称</th>
|
||
<th>拆分方式</th>
|
||
<th>拆分值</th>
|
||
<th>字段数</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="config-list">
|
||
<tr><td colspan="6" class="loading">加载中...</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 日报生成 -->
|
||
<div id="generate-tab" class="tab-content">
|
||
<div class="card">
|
||
<div class="alert alert-info" style="margin-bottom: 20px;">
|
||
<strong> 使用说明：</strong><br>
|
||
1. 选择已创建的配置（可多选）<br>
|
||
2. 选择时间范围（可点击预设按钮快速选择）<br>
|
||
3. 点击"生成日报"按钮<br>
|
||
4. 生成成功后，点击"立即下载 Excel 文件"按钮下载，或切换到"历史记录"标签页查看和下载
|
||
</div>
|
||
|
||
<h3 style="margin-bottom: 20px;">生成日报</h3>
|
||
|
||
<div class="form-group">
|
||
<label>选择配置（可多选）：</label>
|
||
<div style="margin-bottom: 10px;">
|
||
<button type="button" class="btn btn-sm" onclick="toggleSelectAllConfigs()">全选/取消全选</button>
|
||
</div>
|
||
<div id="generate-config-list" style="max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 10px;">
|
||
<div class="loading">加载中...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>时间范围：</label>
|
||
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
|
||
<input type="datetime-local" id="start-time" class="form-control">
|
||
<span>至</span>
|
||
<input type="datetime-local" id="end-time" class="form-control">
|
||
<button type="button" class="btn btn-sm" onclick="setPresetTime('yesterday')">昨天</button>
|
||
<button type="button" class="btn btn-sm" onclick="setPresetTime('last3days')">最近 3 天</button>
|
||
<button type="button" class="btn btn-sm" onclick="setPresetTime('last7days')">最近 7 天</button>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn btn-success" onclick="generateReport()">生成日报</button>
|
||
|
||
<div id="generate-result" style="margin-top: 20px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 历史记录 -->
|
||
<div id="history-tab" class="tab-content">
|
||
<div class="card">
|
||
<div style="display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;">
|
||
<input type="date" id="history-start-date" class="form-control" style="width: auto;">
|
||
<span style="line-height: 38px;">至</span>
|
||
<input type="date" id="history-end-date" class="form-control" style="width: auto;">
|
||
<button class="btn btn-primary" onclick="queryHistoryByDate()">查询</button>
|
||
<button class="btn" onclick="clearDateQuery()">清除</button>
|
||
<button class="btn btn-danger" onclick="batchDownloadHistory()" style="margin-left: auto;">批量下载</button>
|
||
</div>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th><input type="checkbox" id="select-all-history" onchange="toggleSelectAllHistory()"></th>
|
||
<th>报表日期</th>
|
||
<th>时间范围</th>
|
||
<th>配置名称</th>
|
||
<th>拆分值</th>
|
||
<th>订单数</th>
|
||
<th>总金额</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="history-list">
|
||
<tr><td colspan="9" class="loading">加载中...</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div id="history-pagination" style="margin-top: 20px; display: flex; justify-content: center; gap: 5px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 创建/编辑配置模态框 -->
|
||
<div id="config-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="modal-title">创建配置</h2>
|
||
<button class="close-btn" onclick="closeModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<input type="hidden" id="config-id">
|
||
|
||
<div class="form-group">
|
||
<label>配置名称：</label>
|
||
<input type="text" id="config-name" class="form-control" placeholder="例如：108 路日报">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>拆分方式：</label>
|
||
<select id="split-type" class="form-control" onchange="onSplitTypeChange()">
|
||
<option value="company_id">按企业</option>
|
||
<option value="user_id">按用户</option>
|
||
<option value="station_id">按场站</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label id="split-value-label">选择企业（可多选）：</label>
|
||
<div style="margin-bottom: 10px;">
|
||
<input type="text" id="entity-search" class="form-control" placeholder="搜索..." onkeyup="handleSearchEnter(event)" style="width: 200px; display: inline-block;">
|
||
<button type="button" class="btn btn-sm" onclick="searchEntities()" style="display: inline-block;">搜索</button>
|
||
<button type="button" class="btn btn-sm" onclick="toggleSelectAllEntities()" style="display: inline-block;">全选/取消全选</button>
|
||
<span id="selected-count" style="margin-left: 10px; color: var(--muted-foreground);">已选：0 个</span>
|
||
</div>
|
||
<div id="entity-list" style="max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 10px;">
|
||
<div class="loading">加载中...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>选择字段：</label>
|
||
<div id="field-list" style="max-height: 400px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 10px;">
|
||
<div class="loading">加载中...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group" id="field-order-section" style="display: none;">
|
||
<label>字段顺序（上移/下移调整）：</label>
|
||
<div id="selected-fields-order" style="border: 1px solid var(--border); border-radius: 6px; padding: 10px; min-height: 50px;">
|
||
<div class="empty">请先选择字段</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>求和字段（仅数值类型字段）：</label>
|
||
<div id="sum-fields-list" style="border: 1px solid var(--border); border-radius: 6px; padding: 10px; min-height: 50px;">
|
||
<div class="empty">请先选择字段，数值类型字段将显示在此处</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="merge-telecom" onchange="toggleTelecomVehicleNo()">
|
||
合并特来电平台数据
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-group" id="telecom-vehicle-section" style="display: none;">
|
||
<label>特来电车量自编号（多个用逗号分隔）：</label>
|
||
<input type="text" id="telecom-vehicle-no" class="form-control" placeholder="例如：车 001,车 002">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>分时段电量统计：</label>
|
||
<div id="time-period-editor">
|
||
<div style="margin-bottom: 10px;">
|
||
<button type="button" class="btn btn-sm" onclick="clearTimePeriods()">清空</button>
|
||
<button type="button" class="btn btn-sm" onclick="setDefaultTimePeriods()">默认配置</button>
|
||
</div>
|
||
<div id="tp-hours-row" style="display: grid; grid-template-columns: 60px repeat(24, 1fr); gap: 2px; margin-bottom: 10px;"></div>
|
||
<div id="tp-period-rows"></div>
|
||
<div class="time-period-summary" id="time-period-summary"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn" onclick="closeModal()">取消</button>
|
||
<button class="btn btn-primary" onclick="saveConfig()">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- JavaScript 文件 -->
|
||
<script src="/public/static/js/common.js"></script>
|
||
<script src="/public/static/js/config.js"></script>
|
||
<script src="/public/static/js/entity.js"></script>
|
||
<script src="/public/static/js/report.js"></script>
|
||
<script src="/public/static/js/history.js"></script>
|
||
</body>
|
||
</html>
|