79 lines
2.8 KiB
Vue
79 lines
2.8 KiB
Vue
<template>
|
|
<div class="relative mt-[6.25rem] flex items-center justify-center">
|
|
<ProportionCharts :chart-data="chartData" class="w-[41.25rem] h-[41.25rem]" :width="canvasWidth" :height="canvasWidth" />
|
|
<div class="leading-[1] absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-3 flex items-center flex-col font-700 italic">
|
|
<div class="flex items-baseline">
|
|
<div class="text-[7rem] text-color" :data-text="onlineTotal">{{ onlineTotal }}</div>
|
|
<div class="text-[5.75rem] text-color" data-text="人">人</div>
|
|
</div>
|
|
<div class="text-[#FFFFFF] text-[4.5rem] text-shadow-[0px_2px_2px_rgba(12,32,72,0.42)] mt-[2rem]">线上</div>
|
|
</div>
|
|
</div>
|
|
<ul class="px-[3.75rem] grid grid-cols-2 gap-x-[2.5rem] gap-y-[2.25rem] mt-[5rem] leading-[1] pb-[11rem]">
|
|
<li class="flex items-center flex-col" v-for="item in chartData" :key="item.name">
|
|
<div class="flex items-center justify-between w-full">
|
|
<div class="w-[1.5rem] h-[1.5rem] rounded-full" :style="{ backgroundColor: item.color }"></div>
|
|
<div class="flex-1 flex items-center text-[#C0EEFF] text-[3.5rem] justify-between">
|
|
<span class="ml-[1.5rem] mr-[2rem]">{{ item.name }}</span>
|
|
<span>{{ item.value }}人</span>
|
|
</div>
|
|
</div>
|
|
<div class="border-image w-full mt-[1.5rem]"></div>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import ProportionCharts from "@/views/components/chartsComponents/ProportionCharts.vue";
|
|
|
|
const canvasWidth = ref(0);
|
|
|
|
const handleResize = () => {
|
|
canvasWidth.value = 41.25 * (document.documentElement.clientWidth / 93.75);
|
|
};
|
|
|
|
const colorList = ref(["#0783FA", "#07D1FA", "#20E6A4", "#FFD15C", "#9A68FF"]);
|
|
|
|
const askSectionData = inject("askSectionData", ref<{ online: any[]; scource: any[] }>({ online: [], scource: [] }));
|
|
|
|
const chartData = ref<any[]>([]);
|
|
const onlineTotal = ref<any>(0);
|
|
|
|
watch(
|
|
() => askSectionData.value,
|
|
() => {
|
|
initData();
|
|
},
|
|
);
|
|
|
|
const initData = () => {
|
|
if (askSectionData.value.online && askSectionData.value.online.length > 0) {
|
|
chartData.value = askSectionData.value.online.map((item, index) => ({
|
|
name: item.tag,
|
|
value: item.total,
|
|
color: colorList.value[index % colorList.value.length],
|
|
}));
|
|
onlineTotal.value = askSectionData.value.scource.filter((item) => item.tag === "线上")[0].total;
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
initData();
|
|
handleResize();
|
|
window.addEventListener("resize", handleResize);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("resize", handleResize);
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "@/styles/text-color.scss";
|
|
.border-image {
|
|
border: 1px solid;
|
|
border-image: linear-gradient(90deg, #217ac600, #227cc8, #217ac600) 1 1;
|
|
opacity: 0.3;
|
|
}
|
|
</style>
|