更新 js: 背包统计采集系统 中 对JS脚本产出档案剖析用网页 (#1247)
* Update 对产出的latest_record.txt档案进行剖析用的网页@由蜜柑魚制作.html * Update 对产出的latest_record.txt档案进行剖析用的网页@由蜜柑魚制作.html * Delete repo/pathing/矿物/紫晶块/紫晶块之大剑矿闻录@蜜柑魚 directory * 地圖追蹤 : 紫晶块之大剑矿闻录 路徑優化 補充戰后復位 * 自动修复 JSON 格式和版本号 [ci skip] * fix: authors --------- Co-authored-by: GitHub Actions Bot <actions@github.com> Co-authored-by: 起个名字好难 <25520958+MisakaAldrich@users.noreply.github.com>
This commit is contained in:
this-Fish
@@ -6,8 +6,9 @@
|
||||
请先至少扫瞄两次记录
|
||||
功能
|
||||
1.显示两次扫描记录中，背包材料各个物品的变更数量
|
||||
2.当物品数量大于9000时会标记红色，提示用户作出处理
|
||||
2.点击表格中的标题"变更数量"，切换变更数量 由少至多 或 由多至少 排序
|
||||
3.怪物掉落素材独有，依照稀有度排序，快速看到多了多少个不能分解的紫色、蓝色材料
|
||||
4.当物品数量大于9000时会标记红色，提示用户作出处理
|
||||
快捷键
|
||||
Alt+f = 进入或退出全屏模式
|
||||
w = 向上滚动
|
||||
@@ -22,6 +23,9 @@
|
||||
适配各种Windows系统时间格式，避免因时间格式不同而不显示的问题
|
||||
1.3
|
||||
00:00~06:30 预设深色模式
|
||||
1.4
|
||||
新增 依据背包材料数量排序
|
||||
点击表格中的标题[较新日斯]，切换依据背包材料数量 由少至多 或 由多至少 排序
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
@@ -403,8 +407,10 @@
|
||||
|
||||
/* 排序按钮样式 */
|
||||
.sortable {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-right: 20px;
|
||||
/* 为箭头留出空间 */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sortable:hover {
|
||||
@@ -416,7 +422,7 @@
|
||||
}
|
||||
|
||||
.sortable::after {
|
||||
content: "↕";
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
font-size: 0.8em;
|
||||
@@ -551,6 +557,18 @@
|
||||
border: 2px dashed #4a6fa5;
|
||||
background-color: #1a2a3a;
|
||||
}
|
||||
|
||||
/* 新增样式：未激活排序的指示符 */
|
||||
.sortable.inactive::after {
|
||||
content: "↕";
|
||||
color: #999;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 深色模式下的未激活排序指示符 */
|
||||
body.dark-mode .sortable.inactive::after {
|
||||
color: #aaa;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -878,7 +896,6 @@
|
||||
if (scans.length < 2) continue;
|
||||
const latestScan = scans[0];
|
||||
const previousScan = scans[1];
|
||||
console.log("N:" + scans[0].timestamp + ":" + scans[1].timestamp)
|
||||
|
||||
// 创建表格
|
||||
const section = document.createElement('div');
|
||||
@@ -896,8 +913,9 @@
|
||||
<button class="rare-sort-btn">稀有度排序</button>
|
||||
</th>
|
||||
<th>${previousScan.timestamp}</th>
|
||||
<th>${latestScan.timestamp}</th>
|
||||
<th class="sortable" data-sort="desc">变更数量</th>
|
||||
<!-- 添加 inactive 类表示初始未激活状态 -->
|
||||
<th class="sortable inactive" data-sort-type="newQty" data-sort="none">${latestScan.timestamp}</th>
|
||||
<th class="sortable" data-sort-type="change" data-sort="desc">变更数量</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -907,7 +925,7 @@
|
||||
|
||||
const tbody = section.querySelector('tbody');
|
||||
const toggleBtn = section.querySelector('.category-header');
|
||||
const sortHeader = section.querySelector('.sortable');
|
||||
const sortHeaders = section.querySelectorAll('.sortable');
|
||||
const rareSortBtn = section.querySelector('.rare-sort-btn');
|
||||
|
||||
// 添加折叠功能
|
||||
@@ -922,33 +940,65 @@
|
||||
}
|
||||
});
|
||||
|
||||
// 添加变更数量排序功能
|
||||
sortHeader.addEventListener('click', function () {
|
||||
const currentSort = this.getAttribute('data-sort');
|
||||
const newSort = currentSort === 'desc' ? 'asc' : 'desc';
|
||||
this.setAttribute('data-sort', newSort);
|
||||
// 为所有可排序列添加点击事件
|
||||
sortHeaders.forEach(header => {
|
||||
header.addEventListener('click', function () {
|
||||
const sortType = this.getAttribute('data-sort-type');
|
||||
const currentSort = this.getAttribute('data-sort');
|
||||
|
||||
// 更新排序指示器
|
||||
this.classList.remove('asc', 'desc');
|
||||
this.classList.add(newSort);
|
||||
// 确定新排序方向
|
||||
let newSort;
|
||||
if (currentSort === 'none') {
|
||||
newSort = 'desc'; // 从未激活状态开始设为降序
|
||||
} else {
|
||||
newSort = currentSort === 'desc' ? 'asc' : 'desc';
|
||||
}
|
||||
|
||||
// 获取当前稀有度排序状态
|
||||
const useRareSort = rareSortBtn.classList.contains('active');
|
||||
sortTable(tbody, newSort, useRareSort);
|
||||
// 更新排序状态
|
||||
this.setAttribute('data-sort', newSort);
|
||||
|
||||
// 移除所有排序状态类
|
||||
this.classList.remove('asc', 'desc', 'inactive');
|
||||
|
||||
// 添加新状态类
|
||||
this.classList.add(newSort);
|
||||
|
||||
// 重置其他排序列的状态
|
||||
sortHeaders.forEach(otherHeader => {
|
||||
if (otherHeader !== this) {
|
||||
otherHeader.setAttribute('data-sort', 'none');
|
||||
otherHeader.classList.remove('asc', 'desc');
|
||||
otherHeader.classList.add('inactive');
|
||||
}
|
||||
});
|
||||
|
||||
// 获取稀有度排序状态
|
||||
const useRareSort = rareSortBtn.classList.contains('active');
|
||||
|
||||
// 调用排序函数
|
||||
sortTable(tbody, sortType, newSort, useRareSort);
|
||||
});
|
||||
});
|
||||
|
||||
// 添加稀有度排序功能
|
||||
// 更新稀有度排序按钮事件
|
||||
rareSortBtn.addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
|
||||
// 切换按钮状态
|
||||
const isActive = this.classList.toggle('active');
|
||||
|
||||
// 获取当前变更数量的排序方向
|
||||
const sortDirection = sortHeader.getAttribute('data-sort');
|
||||
// 获取当前激活的排序列
|
||||
const activeHeader = section.querySelector('.sortable.asc, .sortable.desc');
|
||||
let sortType = 'change'; // 默认使用变更数量排序
|
||||
let sortDirection = 'desc';
|
||||
|
||||
// 重新排序表格
|
||||
sortTable(tbody, sortDirection, isActive);
|
||||
if (activeHeader) {
|
||||
sortType = activeHeader.getAttribute('data-sort-type');
|
||||
sortDirection = activeHeader.getAttribute('data-sort');
|
||||
}
|
||||
|
||||
// 重新排序
|
||||
sortTable(tbody, sortType, sortDirection, isActive);
|
||||
});
|
||||
|
||||
// 处理每个物品
|
||||
@@ -981,11 +1031,11 @@
|
||||
// 检查数量是否超过9000
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td class="${rarityClass}">${item}</td>
|
||||
<td class="${previousQty > 9000 ? 'high-quantity' : ''}">${previousQty}</td>
|
||||
<td class="${latestQty > 9000 ? 'high-quantity' : ''}">${latestQty}</td>
|
||||
<td class="${changeClass}">${changeSign}${change}</td>
|
||||
`;
|
||||
<td class="${rarityClass}">${item}</td>
|
||||
<td class="${previousQty > 9000 ? 'high-quantity' : ''}">${previousQty}</td>
|
||||
<td class="${latestQty > 9000 ? 'high-quantity' : ''}">${latestQty}</td>
|
||||
<td class="${changeClass}">${changeSign}${change}</td>
|
||||
`;
|
||||
|
||||
// 存储稀有度等级用于排序
|
||||
row.dataset.rarity = getRarityLevel(item);
|
||||
@@ -997,7 +1047,15 @@
|
||||
if (tbody.children.length > 0) {
|
||||
resultsContainer.appendChild(section);
|
||||
// 初始排序（由多到少）
|
||||
sortTable(tbody, 'desc', false);
|
||||
sortTable(tbody, 'change', 'desc', false);
|
||||
|
||||
// 给变更数量列添加默认排序指示
|
||||
const changeHeader = section.querySelector('[data-sort-type="change"]');
|
||||
changeHeader.classList.add('desc');
|
||||
|
||||
// 给较新日期列添加未激活指示
|
||||
const newQtyHeader = section.querySelector('[data-sort-type="newQty"]');
|
||||
newQtyHeader.classList.add('inactive');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1007,14 +1065,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 表格排序函数
|
||||
function sortTable(tbody, sortDirection, useRareSort) {
|
||||
// 排序函数
|
||||
function sortTable(tbody, sortType, sortDirection, useRareSort) {
|
||||
const rows = Array.from(tbody.querySelectorAll('tr'));
|
||||
|
||||
rows.sort((a, b) => {
|
||||
const aChange = parseInt(a.cells[3].textContent);
|
||||
const bChange = parseInt(b.cells[3].textContent);
|
||||
|
||||
// 如果启用了稀有度排序
|
||||
if (useRareSort) {
|
||||
const aRarity = parseInt(a.dataset.rarity);
|
||||
@@ -1026,8 +1081,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 再按变更数量排序
|
||||
return sortDirection === 'desc' ? bChange - aChange : aChange - bChange;
|
||||
// 根据排序类型获取值
|
||||
let aValue, bValue;
|
||||
|
||||
if (sortType === 'change') {
|
||||
// 变更数量在第四列（索引3）
|
||||
aValue = parseInt(a.cells[3].textContent);
|
||||
bValue = parseInt(b.cells[3].textContent);
|
||||
} else if (sortType === 'newQty') {
|
||||
// 新时间数量在第三列（索引2）
|
||||
aValue = parseInt(a.cells[2].textContent);
|
||||
bValue = parseInt(b.cells[2].textContent);
|
||||
} else {
|
||||
// 默认按变更数量
|
||||
aValue = parseInt(a.cells[3].textContent);
|
||||
bValue = parseInt(b.cells[3].textContent);
|
||||
}
|
||||
|
||||
// 根据排序方向排序
|
||||
return sortDirection === 'desc' ? bValue - aValue : aValue - bValue;
|
||||
});
|
||||
|
||||
// 清空表格并重新添加排序后的行
|
||||
@@ -1039,7 +1111,7 @@
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 显示错误信息
|
||||
function showError(message) {
|
||||
errorMessage.textContent = message;
|
||||
@@ -1096,4 +1168,4 @@
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user