297 lines
8.4 KiB
Vue
297 lines
8.4 KiB
Vue
<template>
|
|
<div
|
|
class="bg-hex-000000/60 p-2 border-solid border-#FFFF/15 overflow-hidden flex"
|
|
v-if="data && data.length > 0"
|
|
>
|
|
<div
|
|
class="bg-hex-000000/40 text-white border-solid border-#FFFF/15 border-t-0 overflow-hidden flex-1 flex flex-col"
|
|
>
|
|
<div class="flex px-1px gap-1px">
|
|
<div
|
|
v-for="(header, key) in [
|
|
{ label: '技能', width: 180, sortKey: 'learnLv' },
|
|
{ label: 'CD', width: 50, sortKey: 'cd' },
|
|
{ label: '次数', width: 50 },
|
|
{ label: '秒伤', width: 100, sortKey: 'dps' },
|
|
{ label: '总伤害', width: 110, sortKey: 'total' },
|
|
]"
|
|
:key="key"
|
|
class="item-head"
|
|
:style="{ width: `${header.width}px` }"
|
|
@click="header.sortKey && sortValue(header.sortKey)"
|
|
>
|
|
{{ header.label }}
|
|
<template v-if="header.sortKey && sort === header.sortKey">
|
|
<span>{{ order === 'desc' ? '△' : '▽' }}</span>
|
|
</template>
|
|
</div>
|
|
<div class="item-head w-60px">占比</div>
|
|
</div>
|
|
<div class="flex-1 overflow-hidden flex">
|
|
<div class="overflow-y-auto flex-1">
|
|
<div class="flex px-1px gap-1px h-8.5" v-for="(skill, _) in data" :key="_">
|
|
<div class="flex w-180px items-center gap-10px">
|
|
<div class="w-28px h-28px relative">
|
|
<img :src="getImageURL(skill.icon)" alt="" class="w-28px h-28px" />
|
|
<div v-if="skill.lv" class="skill-lv-min" :data-text="`Lv${skill.lv}`">
|
|
Lv{{ skill.lv }}
|
|
</div>
|
|
</div>
|
|
<div>{{ skill.name }} {{ !skill.mode ? '' : `[${skill.mode}]` }}</div>
|
|
</div>
|
|
<div class="w-50px flex items-center justify-center">{{ skill.cd.toFixed(1) }}s</div>
|
|
<div class="w-50px flex items-center justify-center">
|
|
<calc-input
|
|
type="number"
|
|
class="!w-40px !min-w-40px !pl-0 flex items-center justify-center"
|
|
v-model="skillCount(skill).value"
|
|
></calc-input>
|
|
</div>
|
|
<component :is="formatDamage(skill)"></component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!totalStandard"
|
|
class="h-40px flex items-center justify-center text-18px border-t-1px border-t-solid border-t-#FFFF/15"
|
|
>
|
|
{{ showTotal.toFixed(0) }}
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="h-40px flex items-center justify-center text-18px border-t-1px border-t-solid border-t-#FFFF/15"
|
|
:style="{ color: showTotal >= 0 ? '#37fa38' : '#ff0000' }"
|
|
>
|
|
{{ showTotal.toFixed(2) }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="Skill">
|
|
import type { IResultSkill, IResultSkillCount } from '@/api/calc/type'
|
|
import { useConfigStore } from '@/stores'
|
|
import { getImageURL } from '@/utils/images'
|
|
import { h } from 'vue'
|
|
const props = defineProps<{
|
|
data: IResultSkill[]
|
|
standard?: {
|
|
skills: IResultSkill[]
|
|
skillCount: IResultSkillCount[]
|
|
}
|
|
}>()
|
|
|
|
const sort = ref<string>('learnLv')
|
|
const order = ref<'asc' | 'desc'>('desc')
|
|
|
|
const config = useConfigStore()
|
|
|
|
const data = computed(() => {
|
|
return props.data.sort((a, b) => {
|
|
let aValue = 0
|
|
let bValue = 0
|
|
if (['damage', 'cd', 'learnLv'].includes(sort.value)) {
|
|
// @ts-ignore
|
|
aValue = a[sort.value]
|
|
// @ts-ignore
|
|
bValue = b[sort.value]
|
|
}
|
|
if (sort.value == 'total') {
|
|
aValue = a.damage * skillCount(a).value
|
|
bValue = b.damage * skillCount(b).value
|
|
}
|
|
if (sort.value == 'dps') {
|
|
aValue = a.damage / a.cd
|
|
bValue = b.damage / b.cd
|
|
}
|
|
if (sort.value == 'name') {
|
|
// @ts-ignore
|
|
return order.value == 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue)
|
|
}
|
|
return order.value == 'asc' ? aValue - bValue : bValue - aValue
|
|
})
|
|
})
|
|
|
|
const sortValue = (key: string) => {
|
|
if (sort.value == key) {
|
|
order.value = order.value == 'asc' ? 'desc' : 'asc'
|
|
} else {
|
|
order.value = 'desc'
|
|
}
|
|
sort.value = key
|
|
}
|
|
|
|
const skillCount = (skill: IResultSkill) => {
|
|
return computed({
|
|
get() {
|
|
let countConfig = config.skillCountConfig.find(
|
|
(a) => a.name == skill.name && a.mode == skill.mode,
|
|
)
|
|
if (!countConfig) {
|
|
countConfig = { name: skill.name, mode: skill.mode, count: 1 }
|
|
config.skillCountConfig.push(countConfig)
|
|
}
|
|
return countConfig.count
|
|
},
|
|
set(val) {
|
|
const index = config.skillCountConfig.findIndex(
|
|
(a) => a.name == skill.name && a.mode == skill.mode,
|
|
)
|
|
if (index > -1) {
|
|
config.skillCountConfig[index].count = val
|
|
} else {
|
|
config.skillCountConfig.push({ name: skill.name, mode: skill.mode, count: val })
|
|
}
|
|
},
|
|
})
|
|
}
|
|
|
|
const totalDamage = computed(() => {
|
|
return props.data.reduce((acc, skill) => {
|
|
return acc + skill.damage * skillCount(skill).value
|
|
}, 0)
|
|
})
|
|
|
|
const totalStandard = computed(() => {
|
|
if (!props.standard) return undefined
|
|
return props.standard.skills.reduce((acc, skill) => {
|
|
const standardSkillCount = props.standard?.skillCount.find(
|
|
(a) => a.name == skill.name && a.mode == skill.mode,
|
|
)?.count
|
|
return acc + skill.damage * (standardSkillCount || 0)
|
|
}, 0)
|
|
})
|
|
|
|
const showTotal = computed(() => {
|
|
if (!totalStandard.value || totalStandard.value == 0) return totalDamage.value
|
|
return ((totalDamage.value - totalStandard.value) / totalStandard.value) * 100
|
|
})
|
|
|
|
const formatDamage = (skill: IResultSkill) => {
|
|
const standardSkill = props.standard?.skills?.find(
|
|
(a) => a.name == skill.name && a.mode == skill.mode,
|
|
)
|
|
const standardSkillCount = props.standard?.skillCount.find(
|
|
(a) => a.name == skill.name && a.mode == skill.mode,
|
|
)?.count
|
|
const rate = h(
|
|
'div',
|
|
{
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '60px',
|
|
},
|
|
},
|
|
(((skill.damage * skillCount(skill).value) / totalDamage.value) * 100).toFixed(2) + '%',
|
|
)
|
|
if (standardSkill && standardSkill.damage > 0 && standardSkill.cd > 0 && !!standardSkillCount) {
|
|
const currentSkillCount = skillCount(skill).value
|
|
const damageValue =
|
|
(skill.damage * currentSkillCount - standardSkill.damage * standardSkillCount) /
|
|
(standardSkill.damage * standardSkillCount)
|
|
const damage = h(
|
|
'div',
|
|
{
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '110px',
|
|
color: damageValue >= 0 ? '#37fa38' : '#ff0000',
|
|
},
|
|
},
|
|
(damageValue * 100).toFixed(2) + '%',
|
|
)
|
|
const dpsValue =
|
|
(skill.damage / skill.cd - standardSkill.damage / standardSkill.cd) /
|
|
(standardSkill.damage / standardSkill.cd)
|
|
const dps = h(
|
|
'div',
|
|
{
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '110px',
|
|
color: dpsValue >= 0 ? '#37fa38' : '#ff0000',
|
|
},
|
|
},
|
|
(dpsValue * 100).toFixed(2) + '%',
|
|
)
|
|
return h(
|
|
'div',
|
|
{
|
|
class: 'flex items-center justify-center',
|
|
},
|
|
[dps, damage, rate],
|
|
)
|
|
} else {
|
|
const damage = h(
|
|
'div',
|
|
{
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '110px',
|
|
},
|
|
},
|
|
Math.round(skill.damage * skillCount(skill).value).toLocaleString(),
|
|
)
|
|
const dps = h(
|
|
'div',
|
|
{
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '110px',
|
|
},
|
|
},
|
|
Math.round(skill.damage / skill.cd).toLocaleString(),
|
|
)
|
|
return h(
|
|
'div',
|
|
{
|
|
class: 'flex items-center justify-center',
|
|
},
|
|
[dps, damage, rate],
|
|
)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.item-head {
|
|
background: linear-gradient(#2b2817, #171407);
|
|
border-top: 1px solid #423d2c;
|
|
border-bottom: 1px solid #211d15;
|
|
text-align: center;
|
|
}
|
|
|
|
.skill-lv-min {
|
|
position: absolute;
|
|
z-index: 0;
|
|
top: -3px;
|
|
right: -4px;
|
|
font-size: 12px;
|
|
transform: scale(0.7);
|
|
color: black;
|
|
text-shadow: none;
|
|
font-weight: bolder;
|
|
font-family: Arial;
|
|
}
|
|
|
|
.skill-lv-min::before {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
-webkit-text-stroke: 2.5px #37fa38;
|
|
font-family: Arial;
|
|
text-shadow: none;
|
|
z-index: -1;
|
|
}
|
|
</style>
|