Files
wyndham-ARR/arr_web/static/index.html

461 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#f5f7fb" />
<title>ARR Report</title>
<link rel="stylesheet" href="/assets/styles.css" />
<script src="/assets/i18n.js" defer></script>
<script src="/assets/app.js" defer></script>
</head>
<body>
<a class="skip-link" href="#main-content">跳到主要内容</a>
<header class="masthead">
<div class="shell masthead-inner">
<a class="brand" href="#daily" aria-label="ARR Report 首页">
<span class="brand-name">ARR Report</span>
</a>
<div class="header-meta">
<label class="locale-switcher">
<span class="sr-only">语言</span>
<select data-arr-locale-selector aria-label="语言">
<option value="zh-CN">中文</option>
<option value="en">English</option>
<option value="th">ไทย</option>
</select>
</label>
<span class="system-status" id="system-status"><i></i><span>正在连接数据服务</span></span>
<a class="task-log-link" id="task-log-trigger" href="#task-log-dialog" aria-haspopup="dialog" aria-controls="task-log-dialog">任务日志</a>
<a class="logout-link" id="logout-button" href="#logout" hidden>退出登录</a>
</div>
</div>
</header>
<nav class="tab-bar" aria-label="主要模块">
<div class="shell tabs" role="tablist">
<button class="tab is-active" type="button" role="tab" aria-selected="true" aria-controls="panel-daily" data-tab="daily">日报处理</button>
<button class="tab" type="button" role="tab" aria-selected="false" aria-controls="panel-monthly" data-tab="monthly">月报</button>
<button class="tab" type="button" role="tab" aria-selected="false" aria-controls="panel-bi" data-tab="bi">渠道BI</button>
<button class="tab" type="button" role="tab" aria-selected="false" aria-controls="panel-usage" data-tab="usage">公司渠道明细</button>
</div>
</nav>
<main class="shell page" id="main-content">
<section class="tabpanel is-active" id="panel-daily" role="tabpanel" data-panel="daily">
<section class="daily-overview" aria-label="日报处理概览">
<section class="panel upload-panel" aria-labelledby="upload-title">
<div class="panel-heading upload-heading">
<div>
<h2 id="upload-title">上传 ARR.XML</h2>
</div>
</div>
<label class="dropzone" id="dropzone" for="xml-file">
<input id="xml-file" type="file" accept=".xml,text/xml,application/xml" />
<span class="upload-glyph" aria-hidden="true">
<svg viewBox="0 0 24 24" focusable="false"><path d="M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4"/></svg>
</span>
<strong>拖放 XML 文件到这里</strong>
<span>或点击选择文件,单个文件最大 25 MB</span>
<em id="selected-file">尚未选择文件</em>
</label>
<div class="upload-progress" id="upload-progress" hidden aria-live="polite">
<div class="upload-progress-meta">
<span id="upload-progress-label">等待开始</span>
<strong id="upload-progress-percent">0%</strong>
</div>
<div class="upload-progress-track" id="upload-progress-track" role="progressbar" aria-label="ARR.XML 处理进度" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="等待开始 0%">
<span id="upload-progress-bar"></span>
</div>
</div>
<div class="upload-footer">
<p class="service-hint" id="upload-hint" role="status"></p>
<button class="primary-button" id="upload-button" type="button" disabled>开始处理</button>
</div>
</section>
<article class="metric-card">
<span>ARRIVAL DATE</span>
<strong id="metric-arrival"></strong>
<small>最近成功处理日期</small>
</article>
<article class="metric-card">
<span>处理耗时</span>
<strong id="metric-duration"></strong>
<small>从提交至完成</small>
</article>
<article class="metric-card accent-card">
<span>NO. OF ROOM</span>
<strong id="metric-rooms"></strong>
<small>保留记录的售出房数</small>
</article>
</section>
<section class="panel table-panel" aria-labelledby="daily-history-title">
<div class="panel-heading table-heading">
<div>
<h2 id="daily-history-title">Daily Report</h2>
</div>
<div class="history-heading-actions">
<div class="history-month-control" data-history-scope="jobs">
<span class="history-month-label">业务月份</span>
<button class="history-month-step" id="jobs-month-previous" type="button" aria-label="上一个月" title="上一个月"></button>
<label class="history-month-field" for="jobs-history-month"><span class="sr-only">业务月份</span><input id="jobs-history-month" type="month" min="2020-01" max="2099-12" autocomplete="off" aria-label="业务月份" /></label>
<button class="history-month-step" id="jobs-month-next" type="button" aria-label="下一个月" title="下一个月"></button>
<button class="history-month-current" id="jobs-month-current" type="button">本月</button>
</div>
<button class="text-button" id="refresh-jobs" type="button">刷新</button>
</div>
</div>
<div class="table-scroll">
<table>
<thead><tr><th>文件</th><th>状态</th><th>ARRIVAL DATE</th><th>NO. OF ROOM</th><th>处理耗时</th><th>提交时间</th><th>日报</th></tr></thead>
<tbody id="jobs-body"><tr><td class="empty-cell" colspan="7">正在读取本月记录…</td></tr></tbody>
</table>
</div>
<nav class="pagination-bar" aria-label="Daily Report 分页">
<span class="pagination-summary" id="jobs-pagination-summary">共 0 条</span>
<div class="pagination-actions">
<button class="pagination-button" id="jobs-prev" type="button" disabled>上一页</button>
<span class="pagination-page" id="jobs-page-label">第 1 / 1 页</span>
<button class="pagination-button" id="jobs-next" type="button" disabled>下一页</button>
</div>
</nav>
</section>
</section>
<section class="tabpanel monthly-page" id="panel-monthly" role="tabpanel" data-panel="monthly" hidden>
<section class="panel table-panel monthly-history-panel" aria-labelledby="monthly-processing-title">
<div class="monthly-panel-toolbar">
<h2 class="monthly-panel-title" id="monthly-processing-title">月报处理</h2>
<div class="history-heading-actions">
<div class="history-month-control" data-history-scope="monthly">
<span class="history-month-label">查看月份</span>
<button class="history-month-step" id="monthly-month-previous" type="button" aria-label="上一个月" title="上一个月"></button>
<label class="history-month-field" for="monthly-history-month"><span class="sr-only">查看月份</span><input id="monthly-history-month" type="month" min="2020-01" max="2099-12" autocomplete="off" aria-label="查看月份" /></label>
<button class="history-month-step" id="monthly-month-next" type="button" aria-label="下一个月" title="下一个月"></button>
<button class="history-month-current" id="monthly-month-current" type="button">本月</button>
</div>
<span class="trace-live-state is-live" id="monthly-live-state" role="status" aria-live="polite">自动更新 · 4 秒</span>
</div>
</div>
<div class="table-scroll">
<table class="monthly-table">
<thead><tr><th>更新至</th><th>状态</th><th>数据行</th><th>公司数</th><th>生成时间</th><th>月报</th></tr></thead>
<tbody id="monthly-body"><tr><td class="empty-cell" colspan="6">正在读取月报记录…</td></tr></tbody>
</table>
</div>
<nav class="pagination-bar" aria-label="月报记录分页">
<span class="pagination-summary" id="monthly-pagination-summary">共 0 条</span>
<div class="pagination-actions">
<button class="pagination-button" id="monthly-prev" type="button" disabled>上一页</button>
<span class="pagination-page" id="monthly-page-label">第 1 / 1 页</span>
<button class="pagination-button" id="monthly-next" type="button" disabled>下一页</button>
</div>
</nav>
</section>
</section>
<section class="tabpanel" id="panel-bi" role="tabpanel" data-panel="bi" hidden>
<div class="section-heading bi-heading">
<label class="month-picker"><span>查看月份</span><select id="bi-month" aria-label="查看月份"></select></label>
</div>
<section class="metric-grid bi-metrics" aria-label="本月核心指标">
<article class="metric-card"><span>售出房数</span><strong id="bi-rooms"></strong><small>NO. OF ROOM 合计</small></article>
<article class="metric-card accent-card"><span>销售金额</span><strong id="bi-revenue"></strong><small>销售金额合计</small></article>
<article class="metric-card"><span>间夜</span><strong id="bi-nights"></strong><small>房数 × 入住晚数</small></article>
<article class="metric-card"><span>公司数</span><strong id="bi-channels"></strong><small>月报子表数量</small></article>
</section>
<section class="panel chart-panel" aria-labelledby="company-sales-title">
<div class="panel-heading">
<div>
<h2 id="company-sales-title">各公司本月销售情况</h2>
<p class="chart-data-range" id="bi-data-range">数据范围:—</p>
</div>
</div>
<div class="company-chart-grid">
<div class="ranking-chart" id="company-ranking" aria-label="公司销售金额排名"></div>
<div class="donut-wrap">
<div class="donut" id="company-donut" role="img" aria-label="公司销售金额占比">
<div><strong id="donut-total"></strong><span>销售金额</span></div>
</div>
<div class="donut-legend" id="donut-legend"></div>
</div>
</div>
</section>
<section class="panel table-panel matrix-panel" aria-labelledby="matrix-title">
<div class="panel-heading table-heading">
<div>
<h2 id="matrix-title">渠道 × 房型售出房数</h2>
</div>
</div>
<div class="table-scroll matrix-scroll" id="room-matrix"><p class="empty-state">正在读取看板数据…</p></div>
</section>
</section>
<section class="tabpanel usage-panel" id="panel-usage" role="tabpanel" data-panel="usage" hidden aria-label="公司渠道明细">
<div class="section-heading company-page-heading">
<div class="company-page-title">
<h1>公司渠道明细</h1>
<p class="company-fixed-companies">固定生成LianTai、QBD、DY-AI-Easy-KB、FengRun、HanaTour</p>
</div>
<button class="text-button company-refresh" id="refresh-company-reports" type="button" title="重新读取服务状态、Excel 来源和生成记录">刷新任务</button>
</div>
<div class="company-service-banner" id="company-report-unavailable" role="status" hidden>
<strong>公司渠道明细服务暂未就绪</strong>
<span>请检查本机数据库和 Excel 生成服务后刷新。</span>
</div>
<section class="panel company-report-setup" aria-label="公司渠道明细处理">
<div class="company-setup-heading">
<h2>生成报表</h2>
<label class="company-month-field" for="company-report-month">
<span>生成月份</span>
<input id="company-report-month" type="month" min="2020-01" max="2099-12" autocomplete="off" aria-label="生成月份" title="选择 C/O 所属的生成月份" />
</label>
</div>
<div class="company-report-card-row">
<section class="company-source-card" aria-labelledby="company-source-title">
<div class="company-card-heading">
<h3 id="company-source-title">上传 Excel 报表</h3>
</div>
<div class="company-source-current" id="company-source-current" hidden>
<div class="company-source-current-top">
<span class="company-source-current-label">当前启用来源</span>
<span class="status-chip success">已启用</span>
</div>
<strong id="company-source-current-filename"></strong>
<span id="company-source-current-meta"></span>
</div>
<div class="company-source-action">
<label class="company-excel-dropzone" id="company-excel-dropzone" for="company-excel-file">
<input id="company-excel-file" type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
<span class="company-upload-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" focusable="false"><path d="M12 15V4m0 0L7.8 8.2M12 4l4.2 4.2M5 14.5v3.3A2.2 2.2 0 0 0 7.2 20h9.6a2.2 2.2 0 0 0 2.2-2.2v-3.3"/></svg>
</span>
<span class="company-upload-copy">
<strong>选择或拖放 Excel 文件</strong>
<span>.xlsx 格式,单个文件最大 25 MB</span>
<em id="company-selected-file">尚未选择文件</em>
</span>
</label>
<button class="company-upload-button" id="company-upload-button" type="button" disabled>
<span>提取并核对</span><b aria-hidden="true"></b>
</button>
</div>
<p class="company-source-error" id="company-source-error" role="alert" hidden></p>
<p class="company-source-status" id="company-source-status" role="status" aria-live="polite" hidden></p>
</section>
<button class="company-period-button" type="button" data-company-period="01-10" disabled>
<span class="company-period-topline"><span class="company-period-state" data-company-period-state>核对中</span></span>
<strong class="company-period-range" data-company-period-range>C/O:01-10</strong>
<small class="company-period-detail"><span data-company-period-release>周期结束:当月 11 日 00:00曼谷</span></small>
<span class="company-period-cta"><span>生成</span><b aria-hidden="true"></b></span>
</button>
<button class="company-period-button" type="button" data-company-period="11-20" disabled>
<span class="company-period-topline"><span class="company-period-state" data-company-period-state>核对中</span></span>
<strong class="company-period-range" data-company-period-range>C/O:11-20</strong>
<small class="company-period-detail"><span data-company-period-release>周期结束:当月 21 日 00:00曼谷</span></small>
<span class="company-period-cta"><span>生成</span><b aria-hidden="true"></b></span>
</button>
<button class="company-period-button" type="button" data-company-period="21-month-end" disabled>
<span class="company-period-topline"><span class="company-period-state" data-company-period-state>核对中</span></span>
<strong class="company-period-range" data-company-period-range>C/O:21-30</strong>
<small class="company-period-detail"><span data-company-period-release>周期结束:次月 1 日 00:00曼谷</span></small>
<span class="company-period-cta"><span>生成</span><b aria-hidden="true"></b></span>
</button>
</div>
<section class="company-review-panel" id="company-review-panel" aria-labelledby="company-review-title" hidden>
<header class="company-review-header">
<div class="company-review-title-block">
<h3 id="company-review-title">Booking记录提取</h3>
<p class="company-review-file">
<span>提取文件</span>
<strong id="company-review-filename"></strong>
</p>
</div>
<dl class="company-review-metrics" aria-label="提取统计">
<div><dt>已确认</dt><dd id="company-review-confirmed">0</dd></div>
<div class="is-pending"><dt>待人工</dt><dd id="company-review-pending">0</dd></div>
<div><dt>已删除</dt><dd id="company-review-deleted">0</dd></div>
</dl>
</header>
<div class="company-review-toolbar">
<div class="company-review-selection">
<span id="company-review-selection-count" role="status" aria-live="polite">已选 0 条</span>
<button class="company-review-delete-selected" id="company-review-delete-selected" type="button" disabled>删除所选</button>
</div>
<div class="company-review-actions">
<button class="company-review-discard" id="company-review-discard" type="button">放弃本次提取</button>
<button class="company-review-activate" id="company-review-activate" type="button" disabled>确认并启用</button>
</div>
</div>
<div class="company-review-scroll" role="region" aria-label="提取房型记录" tabindex="0">
<table class="company-review-table">
<thead>
<tr>
<th class="company-review-select-column" scope="col"><input class="company-review-checkbox" id="company-review-select-page" type="checkbox" aria-label="选择本页全部记录" /></th>
<th scope="col">Tour Code</th>
<th scope="col">原始标识</th>
<th scope="col">房型</th>
<th scope="col">数量</th>
<th scope="col">状态</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody id="company-review-body"></tbody>
</table>
</div>
<p class="company-review-empty" id="company-review-empty" hidden>没有可显示的提取记录。</p>
<nav class="company-review-pagination" aria-label="提取记录分页">
<span id="company-review-page-summary">共 0 条</span>
<div>
<button id="company-review-prev" type="button" disabled>上一页</button>
<strong id="company-review-page-label">第 1 / 1 页</strong>
<button id="company-review-next" type="button" disabled>下一页</button>
</div>
</nav>
</section>
<p class="company-report-error" id="company-report-error" role="alert" hidden></p>
</section>
<section class="panel company-job-panel" id="company-report-job-panel" aria-labelledby="company-report-job-title" hidden>
<div class="company-job-header">
<div>
<span class="step-label" id="company-report-job-kicker">TASK STATUS</span>
<h2 id="company-report-job-title">正在准备公司渠道明细任务</h2>
<p id="company-report-job-message" aria-live="polite">正在读取任务状态。</p>
</div>
<div class="company-job-summary">
<span class="status-chip running" id="company-report-job-state">已排队</span>
<strong id="company-report-success-count">0 / 5</strong>
</div>
</div>
<div class="company-job-source" id="company-report-job-source">
<span class="company-job-source-label">来源 Excel提交时</span>
<div>
<strong id="company-report-job-source-file">历史任务未记录来源</strong>
<small id="company-report-job-source-meta"></small>
</div>
</div>
<div class="company-progress-wrap">
<div><span id="company-report-progress-label">等待生成</span><strong id="company-report-progress-percent">0%</strong></div>
<div class="company-progress-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" id="company-report-progress-track"><span id="company-report-progress-bar"></span></div>
</div>
<dl class="company-job-meta">
<div><dt>报表月份</dt><dd id="company-report-job-month">暂无</dd></div>
<div><dt>截止日期</dt><dd id="company-report-job-as-of">暂无</dd></div>
<div><dt>任务耗时</dt><dd id="company-report-job-duration">暂无</dd></div>
<div><dt>需复核</dt><dd id="company-report-warning-count">0 项</dd></div>
</dl>
<div class="table-scroll company-result-scroll">
<table class="company-result-table">
<caption class="sr-only">本次任务中五家公司的生成结果</caption>
<thead><tr><th>公司</th><th class="company-period-column">01-10</th><th class="company-period-column">11-20</th><th class="company-period-column" id="company-result-month-end-header">21-月末</th><th>合计</th><th>状态</th><th>复核 / 异常</th><th>生成时间</th><th>Excel</th></tr></thead>
<tbody id="company-report-result-rows"></tbody>
</table>
</div>
</section>
<section class="panel table-panel company-history-panel" aria-labelledby="company-history-title">
<div class="panel-heading table-heading">
<div>
<h2 id="company-history-title">生成记录</h2>
</div>
<div class="history-heading-actions">
<div class="history-month-control" data-history-scope="company">
<span class="history-month-label">查看月份</span>
<button class="history-month-step" id="company-month-previous" type="button" aria-label="上一个月" title="上一个月"></button>
<label class="history-month-field" for="company-history-month"><span class="sr-only">查看月份</span><input id="company-history-month" type="month" min="2020-01" max="2099-12" autocomplete="off" aria-label="查看月份" /></label>
<button class="history-month-step" id="company-month-next" type="button" aria-label="下一个月" title="下一个月"></button>
<button class="history-month-current" id="company-month-current" type="button">本月</button>
</div>
<span class="company-history-count">每页 50 条</span>
</div>
</div>
<div class="table-scroll">
<table class="company-history-table">
<thead><tr><th>提交时间(曼谷)</th><th>报表月份</th><th>截止期间</th><th>状态</th><th>已生成</th><th>需复核</th><th>来源 Excel</th><th>详情</th></tr></thead>
<tbody id="company-history-rows"><tr><td class="empty-cell" colspan="8">正在读取公司渠道明细任务…</td></tr></tbody>
</table>
</div>
<nav class="pagination-bar" aria-label="生成记录分页">
<span class="pagination-summary" id="company-pagination-summary">共 0 条</span>
<div class="pagination-actions">
<button class="pagination-button" id="company-prev" type="button" disabled>上一页</button>
<span class="pagination-page" id="company-page-label">第 1 / 1 页</span>
<button class="pagination-button" id="company-next" type="button" disabled>下一页</button>
</div>
</nav>
</section>
</section>
</main>
<dialog class="task-log-dialog" id="task-log-dialog" aria-labelledby="process-title" aria-describedby="task-log-description">
<section class="panel process-panel task-log-panel">
<p class="sr-only" id="task-log-description">显示当前选中的日报处理任务从上传到下游通知的处理日志。</p>
<div class="panel-heading trace-heading">
<div>
<span class="step-label">DAILY JOB / LOG</span>
<h2 id="process-title">任务日志</h2>
</div>
<div class="trace-terminal-actions">
<span class="trace-live-state" id="trace-live-state">未选择任务</span>
<button class="trace-refresh-button" id="refresh-trace" type="button" disabled>刷新日志</button>
<button class="trace-refresh-button" id="copy-trace" type="button" disabled>复制全部日志</button>
<button class="trace-refresh-button" id="close-task-log" type="button">关闭</button>
</div>
</div>
<div class="trace-log-frame">
<div class="trace-log-heading">
<span>arr-task.log</span>
<span id="trace-log-count">0 lines</span>
</div>
<pre class="trace-log" id="process-log" role="log" aria-live="polite" aria-label="任务原始日志">$ arr trace
# 请上传文件,或从 Daily Report 中选择一个任务。</pre>
</div>
</section>
</dialog>
<dialog class="company-review-confirm-dialog" id="company-review-confirm-dialog" aria-labelledby="company-review-confirm-title" aria-describedby="company-review-confirm-description company-review-confirm-note">
<div class="company-review-confirm-card">
<div class="company-review-confirm-copy">
<h2 id="company-review-confirm-title">删除房型记录</h2>
<p id="company-review-confirm-description">确认删除所选房型记录?</p>
<p class="company-review-confirm-note" id="company-review-confirm-note">此操作只影响本次提取结果,确认启用前原数据源不会改变。</p>
<p class="company-review-confirm-error" id="company-review-confirm-error" role="alert" hidden></p>
</div>
<div class="company-review-confirm-actions">
<button class="company-review-confirm-cancel" id="company-review-confirm-cancel" type="button">取消</button>
<button class="company-review-confirm-submit" id="company-review-confirm-submit" type="button">确认删除</button>
</div>
</div>
</dialog>
<dialog class="company-report-confirm-dialog" id="company-report-confirm-dialog" aria-labelledby="company-report-confirm-title" aria-describedby="company-report-confirm-description company-report-confirm-note">
<div class="company-report-confirm-card">
<div class="company-report-confirm-copy">
<h2 id="company-report-confirm-title">确认生成</h2>
<p class="company-report-confirm-description" id="company-report-confirm-description">2026年07月01-10</p>
<p class="company-report-confirm-note" id="company-report-confirm-note">将一次生成五家公司的正式 Excel。</p>
<p class="company-report-confirm-error" id="company-report-confirm-error" role="alert" hidden></p>
</div>
<div class="company-report-confirm-actions">
<button class="company-report-confirm-cancel" id="company-report-confirm-cancel" type="button">取消</button>
<button class="company-report-confirm-submit" id="company-report-confirm-submit" type="button">确认生成</button>
</div>
</div>
</dialog>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<footer class="page-footer"><span>页面日期时间统一按泰国曼谷UTC+7显示。</span></footer>
</body>
</html>