7 changed files with 22420 additions and 94 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,155 @@
|
||||
<template> |
||||
<div class="flex between v-center mb-10"> |
||||
<span class="bar-title">{{ title }}</span> |
||||
<span class="bar-sub-title">{{ subTitle }}</span> |
||||
</div> |
||||
<el-scrollbar height="300px"> |
||||
<div> |
||||
<div |
||||
class="flex v-center bar-item between" |
||||
v-for="item in data" |
||||
:size="size" |
||||
> |
||||
<span class="bar-item-name mr-10">{{ item.label }}</span> |
||||
<div class="bar-item_content mr-16"> |
||||
<div |
||||
class="bar-item_content-bar" |
||||
:style="{ |
||||
width: `${(item.value / max) * 100}%`, |
||||
background: getColor(item.value / max ), |
||||
}" |
||||
></div> |
||||
</div> |
||||
<span class="mr-16">{{ item.value }}</span> |
||||
<span |
||||
class="bar-item_remark text-right" |
||||
v-if="item.denominator" |
||||
style="min-width: 40px" |
||||
> |
||||
<span class="text-success">{{ item.numerator }}</span> |
||||
<span>/</span> |
||||
<span>{{ item.denominator }}</span> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</el-scrollbar> |
||||
|
||||
</template> |
||||
<script setup> |
||||
import {onMounted} from "vue"; |
||||
|
||||
const props = defineProps({ |
||||
title: { |
||||
type: String, |
||||
default: "", |
||||
}, |
||||
subTitle: { |
||||
type: String, |
||||
default: "", |
||||
}, |
||||
data: { |
||||
type: Array, |
||||
default: [], |
||||
}, |
||||
size: { |
||||
type: String, |
||||
default: "", |
||||
}, |
||||
unit: { |
||||
type: String, |
||||
default: "", |
||||
}, |
||||
}); |
||||
|
||||
const isMouseOver = ref(false); |
||||
|
||||
const handleMouseEnter = () => { |
||||
isMouseOver.value = true; |
||||
}; |
||||
const handleMouseLeave = () => { |
||||
isMouseOver.value = false; |
||||
}; |
||||
|
||||
const max = ref(100); |
||||
watch( |
||||
() => props.data, |
||||
(arr) => { |
||||
getMax() |
||||
} |
||||
); |
||||
|
||||
function getMax() { |
||||
if (props.unit !== "%") { |
||||
max.value = Math.max(...props.data.map((item) => item.value)); |
||||
} |
||||
} |
||||
|
||||
onMounted(() => { |
||||
getMax() |
||||
}) |
||||
|
||||
|
||||
function getColor(val) { |
||||
if (val > 0.8) { |
||||
return "linear-gradient( 270deg, #FB002D 0%, #822232 100%)"; |
||||
} |
||||
if (val >= 0.6) { |
||||
return "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)"; |
||||
} |
||||
return "linear-gradient(270deg, #63e700 0%, #19674c 100%)"; |
||||
} |
||||
|
||||
</script> |
||||
<style lang="scss" scoped> |
||||
|
||||
|
||||
.bar-title { |
||||
font-size: 19px; |
||||
} |
||||
|
||||
.bar-sub-title { |
||||
color: #597ae9; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.bar-item { |
||||
font-size: 17px; |
||||
height: 32px; |
||||
|
||||
&[size="large"] { |
||||
height: 42px; |
||||
|
||||
.bar-item_content { |
||||
.bar-item_content-bar { |
||||
height: 13px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.bar-item-name { |
||||
width: 19%; |
||||
text-align: right; |
||||
} |
||||
|
||||
.bar-item_content { |
||||
width: 55%; |
||||
|
||||
.bar-item_content-bar { |
||||
width: 0; |
||||
height: 9px; |
||||
background: linear-gradient(270deg, #63e700 0%, #19674c 100%); |
||||
box-shadow: 1px 0 0px 0px #020b5f; |
||||
transition: width 0.3s; |
||||
} |
||||
} |
||||
|
||||
.bar-item_remark { |
||||
font-size: 14px; |
||||
|
||||
.text-success { |
||||
color: #09c700; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue