mirror of
https://github.com/earthjasonlin/zzz-signal-search-export.git
synced 2025-04-21 16:00:17 +08:00
Departure commit
This commit is contained in:
mio
91
src/renderer/components/GachaDetail.vue
Normal file
91
src/renderer/components/GachaDetail.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<p class="text-gray-500 text-xs mb-2 text-center whitespace-nowrap">
|
||||
<span class="mx-2" :title="new Date(detail.date[0]).toLocaleString()">{{new Date(detail.date[0]).toLocaleDateString()}}</span>
|
||||
-
|
||||
<span class="mx-2" :title="new Date(detail.date[1]).toLocaleString()">{{new Date(detail.date[1]).toLocaleDateString()}}</span>
|
||||
</p>
|
||||
<p class="text-gray-600 text-xs mb-1">
|
||||
<span class="mr-1">{{text.total}}
|
||||
<span class="text-blue-600">{{detail.total}}</span> {{text.times}}
|
||||
</span>
|
||||
<span v-if="type !== '100'">{{text.sum}}<span class="mx-1 text-green-600">{{detail.countMio}}</span>{{text.no5star}}</span>
|
||||
</p>
|
||||
<p class="text-gray-600 text-xs mb-1">
|
||||
<span :title="`${text.character}${colon}${detail.count5c}\n${text.weapon}${colon}${detail.count5w}`" class="mr-3 whitespace-pre cursor-help text-yellow-500">
|
||||
<span class="min-w-10 inline-block">{{text.star5}}{{colon}}{{detail.count5}}</span>
|
||||
[{{percent(detail.count5, detail.total)}}]
|
||||
</span>
|
||||
<br><span :title="`${text.character}${colon}${detail.count4c}\n${text.weapon}${colon}${detail.count4w}`" class="mr-3 whitespace-pre cursor-help text-purple-600">
|
||||
<span class="min-w-10 inline-block">{{text.star4}}{{colon}}{{detail.count4}}</span>
|
||||
[{{percent(detail.count4, detail.total)}}]
|
||||
</span>
|
||||
<br><span class="text-blue-500 whitespace-pre">
|
||||
<span class="min-w-10 inline-block">{{text.star3}}{{colon}}{{detail.count3}}</span>
|
||||
[{{percent(detail.count3, detail.total)}}]
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<p class="text-gray-600 text-xs mb-1" v-if="detail.ssrPos.length">
|
||||
{{text.history}}{{colon}}
|
||||
<span :title="`${item[2]}${item[3] === '400' ? '\n' + props.i18n.excel.wish2 : ''}`" :class="{wish2: item[3] === '400'}" class="cursor-help mr-1" :style="`color:${colorList[index]}`"
|
||||
v-for="(item, index) of detail.ssrPos" :key="item"
|
||||
>
|
||||
{{item[0]}}[{{item[1]}}]
|
||||
</span>
|
||||
</p>
|
||||
<p v-if="detail.ssrPos.length" class="text-gray-600 text-xs">{{text.average}}{{colon}}<span class="text-green-600">{{avg5(detail.ssrPos)}}</span></p>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
data: Object,
|
||||
typeMap: Map,
|
||||
i18n: Object
|
||||
})
|
||||
|
||||
const type = computed(() => props.data[0])
|
||||
const detail = computed(() => props.data[1])
|
||||
const text = computed(() => props.i18n.ui.data)
|
||||
const colon = computed(() => props.i18n.symbol.colon)
|
||||
|
||||
const avg5 = (list) => {
|
||||
let n = 0
|
||||
list.forEach(item => {
|
||||
n += item[1]
|
||||
})
|
||||
return parseInt((n / list.length) * 100) / 100
|
||||
}
|
||||
|
||||
const percent = (num, total) => {
|
||||
return `${Math.round(num / total * 10000) / 100}%`
|
||||
}
|
||||
|
||||
const colors = [
|
||||
'#5470c6', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#2ab7ca',
|
||||
'#005b96', '#ff8b94', '#72a007','#b60d1b', '#16570d'
|
||||
]
|
||||
|
||||
const colorList = computed(() => {
|
||||
let colorsTemp = [...colors]
|
||||
const result = []
|
||||
const map = new Map()
|
||||
props.data[1].ssrPos.forEach(item => {
|
||||
if (map.has(item[0])) {
|
||||
return result.push(map.get(item[0]))
|
||||
}
|
||||
const num = Math.abs(hashCode(`${Math.floor(Date.now() / (1000 * 60 * 10))}-${item[0]}`))
|
||||
if (!colorsTemp.length) colorsTemp = [...colors]
|
||||
const color = colorsTemp.splice(num % colorsTemp.length, 1)[0]
|
||||
map.set(item[0], color)
|
||||
result.push(color)
|
||||
})
|
||||
return result
|
||||
})
|
||||
|
||||
function hashCode(str) {
|
||||
return Array.from(str)
|
||||
.reduce((s, c) => Math.imul(31, s) + c.charCodeAt(0) | 0, 0)
|
||||
}
|
||||
</script>
|
||||
125
src/renderer/components/PieChart.vue
Normal file
125
src/renderer/components/PieChart.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="chart mb-2 relative h-48 lg:h-56 xl:h-64 2xl:h-72">
|
||||
<div ref="chart" class="absolute inset-0"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed, ref, onMounted, onUpdated } from "vue";
|
||||
import { use, init } from "echarts/core";
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
} from "echarts/components";
|
||||
import { PieChart } from "echarts/charts";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import throttle from "lodash-es/throttle";
|
||||
|
||||
use([
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
PieChart,
|
||||
CanvasRenderer,
|
||||
]);
|
||||
|
||||
const props = defineProps({
|
||||
data: Object,
|
||||
typeMap: Map,
|
||||
i18n: Object,
|
||||
});
|
||||
|
||||
const chart = ref(null);
|
||||
|
||||
const colors = ["#fac858", "#ee6666", "#5470c6", "#91cc75", "#73c0de"];
|
||||
|
||||
const parseData = (detail, type) => {
|
||||
const text = props.i18n.ui.data;
|
||||
const keys = [
|
||||
[text.chara5, "count5c"],
|
||||
[text.weapon5, "count5w"],
|
||||
[text.chara4, "count4c"],
|
||||
[text.weapon4, "count4w"],
|
||||
[text.weapon3, "count3w"],
|
||||
];
|
||||
const result = [];
|
||||
const color = [];
|
||||
const selected = {
|
||||
[text.weapon3]: false,
|
||||
};
|
||||
keys.forEach((key, index) => {
|
||||
if (!detail[key[1]]) return;
|
||||
result.push({
|
||||
value: detail[key[1]],
|
||||
name: key[0],
|
||||
});
|
||||
color.push(colors[index]);
|
||||
});
|
||||
if (
|
||||
type === "100" ||
|
||||
result.findIndex((item) => item.name.includes("5")) === -1
|
||||
) {
|
||||
selected[text.weapon3] = true;
|
||||
}
|
||||
return [result, color, selected];
|
||||
};
|
||||
|
||||
let pieChart = null;
|
||||
const updateChart = throttle(() => {
|
||||
if (!pieChart) {
|
||||
pieChart = init(chart.value);
|
||||
}
|
||||
|
||||
const colon = props.i18n.symbol.colon;
|
||||
const result = parseData(props.data[1], props.data[0]);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: `{b0}${colon}{c0}`,
|
||||
padding: 4,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
top: "2%",
|
||||
left: "center",
|
||||
selected: result[2],
|
||||
},
|
||||
selectedMode: "single",
|
||||
color: result[1],
|
||||
series: [
|
||||
{
|
||||
name: props.typeMap.get(props.data[0]),
|
||||
type: "pie",
|
||||
top: 50,
|
||||
startAngle: 70,
|
||||
radius: ["0%", "90%"],
|
||||
// avoidLabelOverlap: false,
|
||||
labelLine: {
|
||||
length: 0,
|
||||
length2: 10,
|
||||
},
|
||||
label: {
|
||||
overflow: "break",
|
||||
},
|
||||
data: result[0],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
pieChart.setOption(option);
|
||||
pieChart.resize();
|
||||
}, 1000);
|
||||
|
||||
onUpdated(() => {
|
||||
updateChart();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
updateChart();
|
||||
window.addEventListener("resize", updateChart);
|
||||
});
|
||||
</script>
|
||||
129
src/renderer/components/Setting.vue
Normal file
129
src/renderer/components/Setting.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="bg-white pt-2 pb-4 px-6 w-full h-full absolute inset-0">
|
||||
<div class="flex content-center items-center mb-4 justify-between">
|
||||
<h3 class="text-lg">{{text.title}}</h3>
|
||||
<el-button icon="close" @click="closeSetting" plain circle type="default" class="w-8 h-8 relative -right-4 -top-2 shadow-md focus:shadow-none focus:outline-none"></el-button>
|
||||
</div>
|
||||
<el-form :model="settingForm" label-width="120px">
|
||||
<el-form-item :label="text.language">
|
||||
<el-select @change="saveLang" v-model="settingForm.lang">
|
||||
<el-option v-for="item of data.langMap" :key="item[0]" :label="item[1]" :value="item[0]"></el-option>
|
||||
</el-select>
|
||||
<p class="text-gray-400 text-xs m-1.5">{{text.languageHint}}</p>
|
||||
</el-form-item>
|
||||
<el-form-item :label="text.logType">
|
||||
<el-radio-group @change="saveSetting" v-model.number="settingForm.logType">
|
||||
<el-radio-button :label="0">{{text.auto}}</el-radio-button>
|
||||
<el-radio-button :label="1">{{text.cnServer}}</el-radio-button>
|
||||
<el-radio-button :label="2">{{text.seaServer}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<p class="text-gray-400 text-xs m-1.5">{{text.logTypeHint}}</p>
|
||||
</el-form-item>
|
||||
<el-form-item :label="text.autoUpdate">
|
||||
<el-switch
|
||||
@change="saveSetting"
|
||||
v-model="settingForm.autoUpdate">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="text.hideNovice">
|
||||
<el-switch
|
||||
@change="saveSetting"
|
||||
v-model="settingForm.hideNovice">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="text.fetchFullHistory">
|
||||
<el-switch
|
||||
@change="saveSetting"
|
||||
v-model="settingForm.fetchFullHistory">
|
||||
</el-switch>
|
||||
<p class="text-gray-400 text-xs m-1.5">{{text.fetchFullHistoryHint}}</p>
|
||||
</el-form-item>
|
||||
<el-form-item :label="text.proxyMode">
|
||||
<el-switch
|
||||
@change="saveSetting"
|
||||
v-model="settingForm.proxyMode">
|
||||
</el-switch>
|
||||
<p class="text-gray-400 text-xs m-1.5">{{text.proxyModeHint}}</p>
|
||||
<el-button class="focus:outline-none" @click="disableProxy">{{text.closeProxy}}</el-button>
|
||||
<p class="text-gray-400 text-xs m-1.5">{{text.closeProxyHint}}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<h3 class="text-lg my-4">{{about.title}}</h3>
|
||||
<p class="text-gray-600 text-xs mt-1">{{about.license}}</p>
|
||||
<p class="text-gray-600 text-xs mt-1 pb-6">Github: <a @click="openGithub" class="cursor-pointer text-blue-400">https://github.com/biuuu/star-rail-warp-export</a></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { ipcRenderer, shell } = require('electron')
|
||||
import { reactive, onMounted, computed } from 'vue'
|
||||
|
||||
const emit = defineEmits(['close', 'changeLang'])
|
||||
|
||||
const props = defineProps({
|
||||
i18n: Object
|
||||
})
|
||||
|
||||
const data = reactive({
|
||||
langMap: new Map()
|
||||
})
|
||||
|
||||
const settingForm = reactive({
|
||||
lang: 'zh-cn',
|
||||
logType: 1,
|
||||
proxyMode: true,
|
||||
autoUpdate: true,
|
||||
fetchFullHistory: false,
|
||||
hideNovice: true
|
||||
})
|
||||
|
||||
const text = computed(() => props.i18n.ui.setting)
|
||||
const about = computed(() => props.i18n.ui.about)
|
||||
|
||||
const saveSetting = async () => {
|
||||
const keys = ['lang', 'logType', 'proxyMode', 'autoUpdate', 'fetchFullHistory', 'hideNovice']
|
||||
for (let key of keys) {
|
||||
await ipcRenderer.invoke('SAVE_CONFIG', [key, settingForm[key]])
|
||||
}
|
||||
}
|
||||
|
||||
const saveLang = async () => {
|
||||
await saveSetting()
|
||||
emit('changeLang')
|
||||
}
|
||||
|
||||
const closeSetting = () => emit('close')
|
||||
|
||||
const disableProxy = async () => {
|
||||
await ipcRenderer.invoke('DISABLE_PROXY')
|
||||
}
|
||||
|
||||
const openGithub = () => shell.openExternal('https://github.com/biuuu/star-rail-warp-export')
|
||||
const openLink = (link) => shell.openExternal(link)
|
||||
|
||||
const exportUIGFJSON = () => {
|
||||
ipcRenderer.invoke('EXPORT_UIGF_JSON')
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
data.langMap = await ipcRenderer.invoke('LANG_MAP')
|
||||
const config = await ipcRenderer.invoke('GET_CONFIG')
|
||||
Object.assign(settingForm, config)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-form-item__label {
|
||||
line-height: normal !important;
|
||||
position: relative;
|
||||
top: 6px;
|
||||
}
|
||||
.el-form-item__content {
|
||||
flex-direction: column;
|
||||
align-items: start !important;
|
||||
}
|
||||
.el-form-item--default {
|
||||
margin-bottom: 14px !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user