Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-16 09:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

♻️ uid 直接读取数据库，优化渲染

Browse Source
This commit is contained in:
BTMuli
2023-08-31 20:08:04 +08:00
parent f842da01fa
commit 1bdc614940
4 changed files with 143 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/gachaRecord/gro-dataview.vue
View File

@@ -1,10 +1,13 @@
<template>
<div v-if="!loading" class="gro-dv-container">
<div class="gro-dv-container">
<div class="gro-dvt-title">
<span>{{ title }}</span>
<span>{{ props.dataVal.length }}</span>
</div>
<div class="gro-dvt-subtitle">{{ startDate }} ~ {{ endDate }}</div>
<div class="gro-dvt-subtitle">
<span v-show="props.dataVal.length === 0">暂无数据</span>
<span v-show="props.dataVal.length !== 0">{{ startDate }} ~ {{ endDate }}</span>
</div>
<div class="gro-mid-list">
<div class="gro-ml-item">
<span>4☆已垫</span>
@@ -64,7 +67,7 @@
</template>
<script lang="ts" setup>
// vue
import { onMounted, ref } from "vue";
import { onMounted, ref, watch } from "vue";
interface GachaDataViewProps {
dataType: "new" | "avatar" | "weapon" | "normal";
@@ -147,24 +150,27 @@ function getTitle(type: "top" | "5" | "4" | "3"): string {
if (props.dataType === "normal") return "常驻祈愿";
return "";
} else if (type === "5") {
// 5星物品统计
return `${star5List.value.length} [${(star5List.value.length / props.dataVal.length).toFixed(
2,
)}%]`;
// 5星物品统计 00.00%
return `${star5List.value.length} [${((star5List.value.length * 100) / props.dataVal.length)
.toFixed(2)
.padStart(5, "0")}%]`;
} else if (type === "4") {
// 4星物品统计
return `${star4List.value.length} [${(star4List.value.length / props.dataVal.length).toFixed(
2,
)}%]`;
return `${star4List.value.length} [${((star4List.value.length * 100) / props.dataVal.length)
.toFixed(2)
.padStart(5, "0")}%]`;
} else {
// 3星物品统计
return `${star3count.value} [${(star3count.value / props.dataVal.length).toFixed(2)}%]`;
return `${star3count.value} [${((star3count.value * 100) / props.dataVal.length)
.toFixed(2)
.padStart(5, "0")}%]`;
}
}
// 获取5星平均抽数
function getStar5Avg(): string {
const resetList = star5List.value.map((item) => item.gachaCount);
if (resetList.length === 0) return "0";
const total = resetList.reduce((a, b) => a + b);
return (total / star5List.value.length).toFixed(2);
}
@@ -177,6 +183,23 @@ function getIcon(itemId: string, type: string): string {
return "/WIKI/weapon/icon/" + itemId + ".webp";
}
}
// 监听数据变化
watch(
() => props.dataVal,
(newVal) => {
star5List.value = [];
star4List.value = [];
reset5count.value = 0;
reset4count.value = 0;
star3count.value = 0;
startDate.value = "";
endDate.value = "";
star5avg.value = "";
tab.value = "5";
loadData();
},
);
</script>
<style lang="css" scoped>
.gro-dv-container {

39
src/components/gachaRecord/gro-overview.vue
View File

@@ -1,13 +1,19 @@
<template>
<div class="gro-o-container">
<gro-dataview v-if="newData.length > 0" :data-val="newData" data-type="new" />
<gro-dataview :data-val="normalData" data-type="normal" />
<gro-dataview :data-val="avatarData" data-type="avatar" />
<gro-dataview :data-val="weaponData" data-type="weapon" />
<div
class="gro-o-container"
:style="{
gridTemplateColumns: newData.length !== 0 ? 'repeat(4, 1fr)' : 'repeat(3, 1fr)',
}"
>
<gro-dataview v-if="newData.length !== 0" v-model:data-val="newData" data-type="new" />
<gro-dataview v-model:data-val="normalData" data-type="normal" />
<gro-dataview v-model:data-val="avatarData" data-type="avatar" />
<gro-dataview v-model:data-val="weaponData" data-type="weapon" />
</div>
</template>
<script lang="ts" setup>
// vue
import { watch } from "vue";
import GroDataview from "./gro-dataview.vue";
interface GachaOverviewProps {
@@ -15,13 +21,22 @@ interface GachaOverviewProps {
}
const props = defineProps<GachaOverviewProps>();
// data
const newData = props.modelValue.filter((item) => item.uigfType === "100");
const normalData = props.modelValue.filter((item) => item.uigfType === "200");
const avatarData = props.modelValue.filter((item) => item.uigfType === "301");
const weaponData = props.modelValue.filter((item) => item.uigfType === "302");
const getColNum = newData.length === 0 ? 3 : 4;
let newData = props.modelValue.filter((item) => item.uigfType === "100");
let normalData = props.modelValue.filter((item) => item.uigfType === "200");
let avatarData = props.modelValue.filter((item) => item.uigfType === "301");
let weaponData = props.modelValue.filter((item) => item.uigfType === "302");
// 监听数据变化
watch(
() => props.modelValue,
(newVal) => {
newData = newVal.filter((item) => item.uigfType === "100");
normalData = newVal.filter((item) => item.uigfType === "200");
avatarData = newVal.filter((item) => item.uigfType === "301");
weaponData = newVal.filter((item) => item.uigfType === "302");
},
);
</script>
<style lang="css" scoped>
.gro-o-container {
@@ -29,6 +44,6 @@ const getColNum = newData.length === 0 ? 3 : 4;
width: 100%;
height: 100%;
grid-gap: 10px;
grid-template-columns: repeat(v-bind(getColNum), 1fr);
transition: all 0.3s ease-in-out;
}
</style>