xjs
/
payment-statistics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 动画优化

master
xjs 2025-05-27 12:01:37 +08:00
parent 21da1b661a
commit 545731d6d5
22 changed files with 422 additions and 505 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/rotate-circle.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

3
src/components/progress/YProgress.vue
View File

@ -86,6 +86,7 @@ const percentage = computed(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 0 10px 1px var(--progress-start-color); box-shadow: 0 0 10px 1px var(--progress-start-color);
z-index: auto;
// 条纹效果 // 条纹效果
&::before { &::before {
@ -98,7 +99,7 @@ const percentage = computed(() => {
background-image: v-bind('props.striped ? "linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)" : "none"'); background-image: v-bind('props.striped ? "linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)" : "none"');
background-size: 40px 40px; background-size: 40px 40px;
opacity: 0.6; opacity: 0.6;
z-index: 1; z-index: auto;
animation: v-bind('props.animated && props.striped ? "progress-animation 2s linear infinite" : "none"'); animation: v-bind('props.animated && props.striped ? "progress-animation 2s linear infinite" : "none"');
} }
} }

2
src/components/watch/DigitalWatch.vue
View File

@ -213,7 +213,7 @@ onUnmounted(() => {
position: absolute; position: absolute;
background-color: var(--color-led-off); background-color: var(--color-led-off);
border-radius: var(--segment-spacing); border-radius: var(--segment-spacing);
z-index: auto;
&-on { &-on {
background-color: var(--color-led); background-color: var(--color-led);
// box-shadow: 0 0 var(--glow-radius) var(--color-glow); // box-shadow: 0 0 var(--glow-radius) var(--color-glow);

14
src/styles/text-color.scss
View File

@ -1,3 +1,15 @@
.text-color{ .text-color{
background: linear-gradient(90deg, #8FC8FF 0%, #FFFFFF 100%); position: relative;
color: #8FC8FF;
&::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
z-index: auto;
color: #fff;
-webkit-mask: linear-gradient(to bottom, transparent, #000);
white-space: nowrap;
padding-right: 4px;
}
} }

28
src/views/components/AskSection.vue
View File

@ -1,22 +1,23 @@
<template> <template>
<div class="h-[358px] relative bg-[#082059]"> <div class="h-[358px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0"> <div class="flex h-full custom-border absolute top-0 left-0">
<div class="relative h-[36px]">
<div class="absolute top-[50%] translate-y-[-50%] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent text-[20px] ml-[9px] font-700">咨询学段<span class="text-[14px]">(已标记)</span></div>
</div>
<SvgComponent :content="headerLeftSvg" class="w-[255px] h-[36px]" /> <SvgComponent :content="headerLeftSvg" class="w-[255px] h-[36px]" />
</div>
<SvgComponent :content="headerRightSvg" class="w-[669px] h-[36px]" /> <SvgComponent :content="headerRightSvg" class="w-[669px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="ml-[9px] font-700 flex items-baseline">
<span class="text-[20px] text-color" data-text="咨询学段">咨询学段</span>
<span class="text-[14px] text-color" data-text="(已标记)">(已标记)</span>
</div>
</div>
</div> </div>
<div class="w-full h-[calc(100%-36px)] mt-[36px]"> <div class="w-full h-[calc(100%-36px)] mt-[36px]">
<AskSectionChart :chart-data="askSectionData.stages || []" /> <AskSectionChart :chart-data="askSectionData.stages || []" />
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import SvgComponent from "@/components/SvgComponent.vue"; import SvgComponent from "@/components/SvgComponent.vue";
import AskSectionChart from "@/views/components/chartsComponents/AskSectionChart.vue"; import AskSectionChart from "@/views/components/chartsComponents/AskSectionChart.vue";
@ -39,17 +40,17 @@
arrowLeftSvg.value = svg; arrowLeftSvg.value = svg;
}; };
const askSectionData = inject("askSectionData",ref({stages:[]})) const askSectionData = inject("askSectionData", ref({ stages: [] }));
onBeforeMount(() => { onBeforeMount(() => {
getHeaderLeftSvg(); getHeaderLeftSvg();
getHeaderRightSvg(); getHeaderRightSvg();
getArrowLeftSvg(); getArrowLeftSvg();
}); });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@use "@/styles/text-color.scss";
.custom-border { .custom-border {
border-image-slice: 27 27 27 27; border-image-slice: 27 27 27 27;
border-image-width: 1px 1px 2px 1px; border-image-width: 1px 1px 2px 1px;
@ -58,5 +59,4 @@
border-image-source: url("src/assets/svg-img/border-image.png"); border-image-source: url("src/assets/svg-img/border-image.png");
border-style: solid; border-style: solid;
} }
</style> </style>

108
src/views/components/BackgroundColor.vue
View File

@ -1,108 +0,0 @@
<template>
<div class="border-container">
<div class="border-glow"></div>
<div class="border-inner p-[2px]">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "BackgroundColor",
data() {
return {
animationFrame: null,
};
},
mounted() {
this.startAnimation();
},
beforeUnmount() {
if (this.animationFrame) {
cancelAnimationFrame(this.animationFrame);
}
},
methods: {
startAnimation() {
const borderGlow = document.querySelector(".border-glow");
let angle = 0;
const animate = () => {
angle = (angle + 1) % 360;
if (borderGlow) {
borderGlow.style.background = `conic-gradient(
from ${angle}deg,
hsla(0, 0%, 0%, 0.25),
hsla(214, 60%, 34%, 0.2),
hsla(220, 74%, 35%, 0.1),
hsla(219, 100%, 58%, 0.1),
hsla(219, 100%, 58%, 0.2),
hsla(219, 100%, 58%, 0.5),
hsla(219, 100%, 58%, 0)
)`;
}
this.animationFrame = requestAnimationFrame(animate);
};
animate();
},
},
};
</script>
<style scoped>
.border-container {
position: relative;
border-radius: 4px;
overflow: hidden;
}
.border-glow {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
width: auto;
height: auto;
background: conic-gradient(
from 0deg,
hsla(0, 0%, 0%, 0.25),
hsla(214, 60%, 34%, 0.2),
hsla(220, 74%, 35%, 0.1),
hsla(219, 100%, 58%, 0.1),
hsla(219, 100%, 58%, 0.2),
hsla(219, 100%, 58%, 0.5),
hsla(219, 100%, 58%, 0)
);
border-radius: inherit;
filter: blur(2px);
pointer-events: none;
mix-blend-mode: plus-lighter;
z-index: 0;
}
.border-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border: 0.5px solid hsla(236, 100%, 66%, 0.48);
border-radius: inherit;
pointer-events: none;
box-sizing: border-box;
}
/* 内容区域样式 */
.border-container > :not(.border-glow):not(.border-inner) {
position: relative;
z-index: 1;
height: 100%;
width: 100%;
box-sizing: border-box;
}
</style>

25
src/views/components/ChargingRanking.vue
View File

@ -1,17 +1,15 @@
<template> <template>
<div class="w-[296px] h-[320px] relative bg-[#082059]"> <div class="h-[320px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0"> <div class="flex h-full custom-border absolute top-0 left-0">
<div class="relative h-[36px]">
<div class="absolute top-[50%] translate-y-[-50%] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent text-[20px] ml-[9px] font-700">收费排行榜</div>
</div>
<SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" /> <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
</div>
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" /> <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="text-color text-[20px] ml-[9px] font-700" data-text="收费排行榜">收费排行榜</div>
</div> </div>
<div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col relative"> </div>
<div class="absolute right-[0] flex items-center justify-end mr-[13px] transform-translate-y-[-50%]"> <div class="w-[296px] h-[calc(100%-36px)] mt-[36px] flex flex-col">
<div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0">
<div class="text-[15px] text-[#84E8FF]">更多</div> <div class="text-[15px] text-[#84E8FF]">更多</div>
<SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" /> <SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />
</div> </div>
@ -55,15 +53,15 @@
watch( watch(
() => chargingRankingData.value, () => chargingRankingData.value,
() => { () => {
initData() initData();
}, },
); );
const initData = () => { const initData = () => {
if(chargingRankingData.value.paymentRanks){ if (chargingRankingData.value.paymentRanks) {
products.value = chargingRankingData.value.paymentRanks products.value = chargingRankingData.value.paymentRanks;
}
} }
};
const headerLeftSvg = ref(""); const headerLeftSvg = ref("");
const headerRightSvg = ref(""); const headerRightSvg = ref("");
@ -124,6 +122,7 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@use "@/styles/text-color.scss";
.custom-border { .custom-border {
border-image-slice: 27 27 27 27; border-image-slice: 27 27 27 27;
border-image-width: 1px 1px 2px 1px; border-image-width: 1px 1px 2px 1px;

6
src/views/components/GainToday.vue
View File

@ -5,9 +5,9 @@
<div class="w-[144px]"> <div class="w-[144px]">
<div class="relative w-[144px] h-[113px] flex items-center flex-col"> <div class="relative w-[144px] h-[113px] flex items-center flex-col">
<div class="text-[#44C1EF] italic text-[20px] font-700">今日获客</div> <div class="text-[#44C1EF] italic text-[20px] font-700">今日获客</div>
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent mb-[15px] z-10 font-700"> <div class="leading-[1] flex items-baseline mb-[15px] z-10 font-700">
<span class="text-[34px] italic">{{ gainData.toDayAcq || 0 }}</span> <span class="text-[34px] italic text-color" :data-text="gainData.toDayAcq || 0">{{ gainData.toDayAcq || 0 }}</span>
<span class="text-[18px]">人</span> <span class="text-[18px] text-color" data-text="人">人</span>
</div> </div>
<SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" /> <SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" />
</div> </div>

6
src/views/components/GainTotal.vue
View File

@ -5,9 +5,9 @@
<div class="w-[144px]"> <div class="w-[144px]">
<div class="relative w-[144px] h-[113px] flex items-center flex-col"> <div class="relative w-[144px] h-[113px] flex items-center flex-col">
<div class="text-[#44C1EF] italic text-[20px] font-700">总获客</div> <div class="text-[#44C1EF] italic text-[20px] font-700">总获客</div>
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent mb-[15px] z-10 font-700"> <div class="leading-[1] flex items-baseline mb-[15px] z-10 font-700">
<span class="text-[34px] italic">{{gainData.acqTotal}}</span> <span class="text-[34px] italic text-color" :data-text="gainData.acqTotal || 0">{{gainData.acqTotal || 0}}</span>
<span class="text-[18px]">人</span> <span class="text-[18px] text-color" data-text="人">人</span>
</div> </div>
<SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" /> <SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" />
</div> </div>

6
src/views/components/LossStatic.vue
View File

@ -5,9 +5,9 @@
<div class="w-[144px]"> <div class="w-[144px]">
<div class="relative w-[144px] h-[113px] flex items-center flex-col"> <div class="relative w-[144px] h-[113px] flex items-center flex-col">
<div class="text-[#44C1EF] italic text-[20px] font-700">今日流失</div> <div class="text-[#44C1EF] italic text-[20px] font-700">今日流失</div>
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent mb-[15px] z-10 font-700"> <div class="leading-[1] flex items-baseline mb-[15px] z-10 font-700">
<span class="text-[34px] italic">{{ gainData.toDayOutFlow || 0 }}</span> <span class="text-[34px] italic text-color" :data-text="gainData.toDayOutFlow || 0">{{ gainData.toDayOutFlow || 0 }}</span>
<span class="text-[18px]">人</span> <span class="text-[18px] text-color" data-text="人">人</span>
</div> </div>
<SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" /> <SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" />
</div> </div>

30
src/views/components/OfflineStatus.vue
View File

@ -1,25 +1,20 @@
<template> <template>
<div class="w-[296px] h-[320px] relative bg-[#082059]"> <div class="w-[296px] h-[320px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0"> <div class="flex h-full custom-border absolute top-0 left-0">
<div class="relative h-[36px]">
<div class="absolute top-[50%] translate-y-[-50%] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent text-[20px] ml-[9px] font-700">线下详情</div>
</div>
<SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" /> <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
</div>
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" /> <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="text-[20px] ml-[9px] font-700 text-color" data-text="线下详情">线下详情</div>
</div>
</div> </div>
<div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col"> <div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col">
<div class="ml-[22px] relative mt-[13px]"> <div class="ml-[22px] relative mt-[13px] flex items-center justify-center">
<div class="flex items-center justify-center"> <ProportionCharts :chart-data="chartData" class="" />
<ProportionCharts :chart-data="chartData" class="z-2 relative" />
<SvgComponent :content="paymentChartSvg" class="w-[143px] h-[143px] absolute top-0 left-[50%] z-1 transform-translate-x-[-50%]" />
</div>
<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="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="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent flex items-baseline"> <div class="flex items-baseline">
<div class="text-[25px]">{{ offlineTotal }}</div> <div class="text-[25px] text-color" :data-text="offlineTotal">{{ offlineTotal }}</div>
<div class="text-[20px]">人</div> <div class="text-[20px] text-color" data-text="人">人</div>
</div> </div>
<div class="text-[#FFFFFF] text-[16px] text-shadow-[0px_2px_2px_rgba(12,32,72,0.42)] mt-[7px]">线下</div> <div class="text-[#FFFFFF] text-[16px] text-shadow-[0px_2px_2px_rgba(12,32,72,0.42)] mt-[7px]">线下</div>
</div> </div>
@ -57,11 +52,6 @@
headerRightSvg.value = svg; headerRightSvg.value = svg;
}; };
const paymentChartSvg = ref("");
const getPaymentChartSvg = async () => {
const { default: svg } = await import("/src/assets/svg-img/payment-chart.svg?raw");
paymentChartSvg.value = svg;
};
const arrowLeftSvg = ref(""); const arrowLeftSvg = ref("");
const getArrowLeftSvg = async () => { const getArrowLeftSvg = async () => {
@ -98,13 +88,13 @@
getHeaderLeftSvg(); getHeaderLeftSvg();
getHeaderRightSvg(); getHeaderRightSvg();
getArrowLeftSvg(); getArrowLeftSvg();
getPaymentChartSvg();
initData(); initData();
}); });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@use "@/styles/custom-border.scss"; @use "@/styles/custom-border.scss";
@use "@/styles/text-color.scss";
.custom-border { .custom-border {
border-image-slice: 27 27 27 27; border-image-slice: 27 27 27 27;

28
src/views/components/OnlineStatus.vue
View File

@ -1,25 +1,20 @@
<template> <template>
<div class="w-[296px] h-[320px] relative bg-[#082059]"> <div class="w-[296px] h-[320px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0"> <div class="flex h-full custom-border absolute top-0 left-0">
<div class="relative h-[36px]">
<div class="absolute top-[50%] translate-y-[-50%] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent text-[20px] ml-[9px] font-700">线上详情</div>
</div>
<SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" /> <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="text-color text-[20px] ml-[9px] font-700" data-text="线上详情">线上详情</div>
</div> </div>
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" /> <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
</div> </div>
<div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col"> <div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col">
<div class="ml-[22px] relative mt-[13px]"> <div class="ml-[22px] relative mt-[13px] flex items-center justify-center">
<div class="flex items-center justify-center"> <ProportionCharts :chart-data="chartData" class="" />
<ProportionCharts :chart-data="chartData" class="z-2 relative" />
<SvgComponent :content="paymentChartSvg" class="w-[143px] h-[143px] absolute top-0 left-[50%] z-1 transform-translate-x-[-50%]" />
</div>
<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="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="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent flex items-baseline"> <div class="flex items-baseline">
<div class="text-[25px]">{{ onlineTotal }}</div> <div class="text-[25px] text-color" :data-text="onlineTotal">{{ onlineTotal }}</div>
<div class="text-[20px]">人</div> <div class="text-[20px] text-color" data-text="人">人</div>
</div> </div>
<div class="text-[#FFFFFF] text-[16px] text-shadow-[0px_2px_2px_rgba(12,32,72,0.42)] mt-[7px]">线上</div> <div class="text-[#FFFFFF] text-[16px] text-shadow-[0px_2px_2px_rgba(12,32,72,0.42)] mt-[7px]">线上</div>
</div> </div>
@ -57,11 +52,6 @@
headerRightSvg.value = svg; headerRightSvg.value = svg;
}; };
const paymentChartSvg = ref("");
const getPaymentChartSvg = async () => {
const { default: svg } = await import("/src/assets/svg-img/payment-chart.svg?raw");
paymentChartSvg.value = svg;
};
const arrowLeftSvg = ref(""); const arrowLeftSvg = ref("");
const getArrowLeftSvg = async () => { const getArrowLeftSvg = async () => {
@ -98,7 +88,6 @@
getHeaderLeftSvg(); getHeaderLeftSvg();
getHeaderRightSvg(); getHeaderRightSvg();
getArrowLeftSvg(); getArrowLeftSvg();
getPaymentChartSvg();
initData(); initData();
}); });
@ -106,6 +95,7 @@
<style scoped lang="scss"> <style scoped lang="scss">
@use "@/styles/custom-border.scss"; @use "@/styles/custom-border.scss";
@use "@/styles/text-color.scss";
.custom-border { .custom-border {
border-image-slice: 27 27 27 27; border-image-slice: 27 27 27 27;

12
src/views/components/OperatingTrends.vue
View File

@ -1,14 +1,12 @@
<template> <template>
<div class="h-[358px] relative bg-[#082059]"> <div class="h-[358px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0"> <div class="flex h-full custom-border absolute top-0 left-0">
<div class="relative h-[36px]">
<div class="absolute top-[50%] translate-y-[-50%] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent text-[20px] ml-[9px] font-700">经营趋势</div>
</div>
<SvgComponent :content="headerLeftSvg" class="w-[255px] h-[36px]" /> <SvgComponent :content="headerLeftSvg" class="w-[255px] h-[36px]" />
</div>
<SvgComponent :content="headerRightSvg" class="w-[669px] h-[36px]" /> <SvgComponent :content="headerRightSvg" class="w-[669px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center flex leading-[30px] items-baseline">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="text-[20px] ml-[9px] font-700 text-color" data-text="经营趋势">经营趋势</div>
</div>
</div> </div>
<div class="w-full h-[calc(100%-36px)] mt-[36px]"> <div class="w-full h-[calc(100%-36px)] mt-[36px]">
<OperatingTrendsChart :chartDataArray="acqTrend" @date-change="handleDateChange" /> <OperatingTrendsChart :chartDataArray="acqTrend" @date-change="handleDateChange" />
@ -70,6 +68,8 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@use "@/styles/text-color.scss";
.custom-border { .custom-border {
border-image-slice: 27 27 27 27; border-image-slice: 27 27 27 27;
border-image-width: 1px 1px 2px 1px; border-image-width: 1px 1px 2px 1px;

15
src/views/components/PaymentTotal.vue
View File

@ -5,9 +5,9 @@
<div class="w-[216px]"> <div class="w-[216px]">
<div class="relative w-[154px] h-[124px] flex items-center flex-col"> <div class="relative w-[154px] h-[124px] flex items-center flex-col">
<div class="text-[#44C1EF] italic text-[20px] font-700">总缴费</div> <div class="text-[#44C1EF] italic text-[20px] font-700">总缴费</div>
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent mb-[15px] z-10 font-700"> <div class="mb-[15px] z-10 font-700 leading-[1] flex items-baseline">
<span class="text-[40px] italic">{{paymentData.chargeTotal}}</span> <span class="text-[40px] italic text-color" :data-text="`${paymentData.chargeTotal || 0}`">{{paymentData.chargeTotal ||0}}</span>
<span class="text-[20px]">人</span> <span class="text-[20px] text-color" data-text="人">人</span>
</div> </div>
<SvgComponent :content="lightningBoxSvg" class="box-light absolute" /> <SvgComponent :content="lightningBoxSvg" class="box-light absolute" />
</div> </div>
@ -24,8 +24,7 @@
<YProgress :percentage="Math.round(paymentData.chargeTotal/paymentData.estimatedTotal * 100)" height="12px" class="mt-[7px]" /> <YProgress :percentage="Math.round(paymentData.chargeTotal/paymentData.estimatedTotal * 100)" height="12px" class="mt-[7px]" />
</div> </div>
<div class="ml-[4px] relative w-[143px] h-[143px]"> <div class="ml-[4px] relative w-[143px] h-[143px]">
<ProportionCharts :chart-data="chartData" class="z-2 relative" /> <ProportionCharts :chart-data="chartData" class="" />
<SvgComponent :content="paymentChartSvg" class="w-[143px] h-[143px] absolute top-0 left-0 z-1" />
<div <div
class="text-[18px] text-[#fff] font-700 text-shadow-[0_0_10px_rgba(12,32,72,0.42)] italic absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-3"> class="text-[18px] text-[#fff] font-700 text-shadow-[0_0_10px_rgba(12,32,72,0.42)] italic absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-3">
缴费 缴费
@ -78,16 +77,10 @@
lightningBoxSvg.value = svg; lightningBoxSvg.value = svg;
}; };
const paymentChartSvg = ref("");
const getPaymentChartSvg = async () => {
const { default: svg } = await import("/src/assets/svg-img/payment-chart.svg?raw");
paymentChartSvg.value = svg;
};
onBeforeMount(() => { onBeforeMount(() => {
getGroupBackgroundSvg(); getGroupBackgroundSvg();
getLightningBoxSvg(); getLightningBoxSvg();
getPaymentChartSvg();
}); });
</script> </script>

25
src/views/components/SixStatistics.vue
View File

@ -1,27 +1,25 @@
<template> <template>
<div class="w-[296px] h-[320px] relative bg-[#082059]"> <div class="w-[296px] h-[320px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0"> <div class="flex h-full custom-border absolute top-0 left-0">
<div class="relative h-[36px]">
<div class="absolute top-[50%] translate-y-[-50%] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent text-[20px] ml-[9px] font-700">六纬志愿</div>
</div>
<SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" /> <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
</div>
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" /> <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="text-[20px] ml-[9px] font-700 text-color" data-text="六纬志愿">六纬志愿</div>
</div> </div>
<div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col relative"> </div>
<div class="absolute right-[0] flex items-center justify-end mr-[13px] transform-translate-y-[-50%]"> <div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col">
<div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0">
<div class="text-[15px] text-[#84E8FF]">更多</div> <div class="text-[15px] text-[#84E8FF]">更多</div>
<SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]"/> <SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />
</div> </div>
<div class="flex items-baseline leading-[1] mt-[29px] mx-[27px]"> <div class="flex items-baseline leading-[1] mt-[29px] mx-[27px]">
<div class="text-[#44C1EF] italic text-[20px] font-700">总获客</div> <div class="text-[#44C1EF] italic text-[20px] font-700">总获客</div>
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent text-[40px] font-700 italic pr-[4px]">{{ sixStatisticsData.total || 0 }}</div> <div class="text-[40px] font-700 italic pr-[4px] text-color" :data-text="sixStatisticsData.total || 0">{{ sixStatisticsData.total || 0 }}</div>
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent text-[18px] font-700">人</div> <div class="text-[18px] font-700 text-color" data-text="人">人</div>
<SvgIcon name="arrow-up" class="text-[9px] text-[#4AFFA2] ml-[9px]" /> <SvgIcon name="arrow-up" class="text-[9px] text-[#4AFFA2] ml-[9px]" />
</div> </div>
<SixStatisticsChart :chartData="sixStatisticsData.items ||[]"/> <SixStatisticsChart :chartData="sixStatisticsData.items || []" />
</div> </div>
</div> </div>
</template> </template>
@ -56,7 +54,7 @@
moreArrowSvg.value = svg; moreArrowSvg.value = svg;
}; };
const sixStatisticsData = inject("sixStatisticsData",ref<{total:number,items:{data:string,total:number}[]}>({total:0,items:[]})) const sixStatisticsData = inject("sixStatisticsData", ref<{ total: number; items: { data: string; total: number }[] }>({ total: 0, items: [] }));
onBeforeMount(() => { onBeforeMount(() => {
getHeaderLeftSvg(); getHeaderLeftSvg();
@ -68,6 +66,7 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@use "@/styles/text-color.scss";
.custom-border { .custom-border {
border-image-slice: 27 27 27 27; border-image-slice: 27 27 27 27;
border-image-width: 1px 1px 2px 1px; border-image-width: 1px 1px 2px 1px;

44
src/views/components/StudentSource.vue
View File

@ -1,41 +1,39 @@
<template> <template>
<div class="w-[296px] h-[320px] relative bg-[#082059]"> <div class="w-[296px] h-[320px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0"> <div class="flex h-full custom-border absolute top-0 left-0">
<div class="relative h-[36px]">
<div class="absolute top-[50%] translate-y-[-50%] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent text-[20px] ml-[9px] font-700">学生来源</div>
</div>
<SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" /> <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
</div>
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" /> <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="text-color text-[20px] ml-[9px] font-700" data-text="学生来源">学生来源</div>
</div>
</div> </div>
<div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col"> <div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col">
<StudentSourceChart class="w-full h-full" :chartData="chartData" :ringSize="0.8" /> <StudentSourceChart class="w-full h-full" :chartData="chartData" :ringSize="0.8" />
<div class="flex items-center justify-between mx-[20px] my-[33px]"> <div class="flex items-center justify-between mx-[20px] my-[33px]">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex flex-col ml-[9px] items-center justify-center"> <div class="flex flex-col ml-[9px] items-center justify-center">
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent font-700"> <div class="font-700 flex items-baseline">
<span class="text-[18px]">{{ onlineTotal }}</span> <span class="text-[18px] text-color" :data-text="onlineTotal">{{ onlineTotal }}</span>
<span class="text-[14px]">人</span> <span class="text-[14px] text-color" data-text="人">人</span>
</div> </div>
<span class="text-[#C7F0FF] text-[12px]">线上来源</span> <span class="text-[#C7F0FF] text-[12px]">线上来源</span>
</div> </div>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<div class="flex flex-col ml-[9px] items-center justify-center"> <div class="flex flex-col ml-[9px] items-center justify-center">
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent font-700"> <div class="font-700 flex items-baseline">
<span class="text-[18px]">{{ offlineTotal }}</span> <span class="text-[18px] text-color" :data-text="offlineTotal">{{ offlineTotal }}</span>
<span class="text-[14px]">人</span> <span class="text-[14px] text-color" data-text="人">人</span>
</div> </div>
<span class="text-[#C7F0FF] text-[12px]">线下来源</span> <span class="text-[#C7F0FF] text-[12px]">线下来源</span>
</div> </div>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<div class="flex flex-col ml-[9px] items-center justify-center"> <div class="flex flex-col ml-[9px] items-center justify-center">
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent font-700"> <div class="font-700 flex items-baseline">
<span class="text-[18px]">{{ unMarkTotal }}</span> <span class="text-[18px] text-color" :data-text="unMarkTotal">{{ unMarkTotal }}</span>
<span class="text-[14px]">人</span> <span class="text-[14px] text-color" data-text="人">人</span>
</div> </div>
<span class="text-[#C7F0FF] text-[12px]">未标记</span> <span class="text-[#C7F0FF] text-[12px]">未标记</span>
</div> </div>
@ -80,17 +78,16 @@
}; };
const askSectionData = inject("askSectionData", ref<{ online: any[]; offline: any[] }>({ online: [], offline: [] })); const askSectionData = inject("askSectionData", ref<{ online: any[]; offline: any[] }>({ online: [], offline: [] }));
const gainData = inject("gainData",ref({acqTotal:0})) const gainData = inject("gainData", ref({ acqTotal: 0 }));
const onlineTotal = ref(0); const onlineTotal = ref(0);
const offlineTotal = ref(0); const offlineTotal = ref(0);
const unMarkTotal = ref(0) const unMarkTotal = ref(0);
const chartData = ref<any[]>([]); const chartData = ref<any[]>([]);
watch( watch(
() => askSectionData.value, () => askSectionData.value,
() => { () => {
initData() initData();
}, },
); );
@ -101,15 +98,15 @@
if (askSectionData.value.offline && askSectionData.value.offline.length > 0) { if (askSectionData.value.offline && askSectionData.value.offline.length > 0) {
offlineTotal.value = askSectionData.value.offline.reduce((acc, curr) => acc + curr.total, 0); offlineTotal.value = askSectionData.value.offline.reduce((acc, curr) => acc + curr.total, 0);
} }
if(gainData.value.acqTotal && askSectionData.value.offline && askSectionData.value.online){ if (gainData.value.acqTotal && askSectionData.value.offline && askSectionData.value.online) {
unMarkTotal.value = gainData.value.acqTotal - offlineTotal.value - onlineTotal.value unMarkTotal.value = gainData.value.acqTotal - offlineTotal.value - onlineTotal.value;
} }
chartData.value = [ chartData.value = [
{ name: "线下", value: offlineTotal.value, itemStyle: { color: "rgba(147, 219, 255, 1)" } }, { name: "线下", value: offlineTotal.value, itemStyle: { color: "rgba(147, 219, 255, 1)" } },
{ name: "线上", value: onlineTotal.value, itemStyle: { color: "rgb(79, 214, 169)" } }, { name: "线上", value: onlineTotal.value, itemStyle: { color: "rgb(79, 214, 169)" } },
{name:'未标记',value: unMarkTotal.value,itemStyle: { color: "#FF4E4E" }} { name: "未标记", value: unMarkTotal.value, itemStyle: { color: "#FF4E4E" } },
]; ];
} };
onBeforeMount(() => { onBeforeMount(() => {
getHeaderLeftSvg(); getHeaderLeftSvg();
@ -123,6 +120,7 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@use "@/styles/text-color.scss";
.custom-border { .custom-border {
border-image-slice: 27 27 27 27; border-image-slice: 27 27 27 27;
border-image-width: 1px 1px 2px 1px; border-image-width: 1px 1px 2px 1px;

9
src/views/components/TodayPayment.vue
View File

@ -2,17 +2,14 @@
<div class="w-max h-max relative"> <div class="w-max h-max relative">
<SvgComponent :content="groupSvg" class="w-[312px] h-[210px]" /> <SvgComponent :content="groupSvg" class="w-[312px] h-[210px]" />
<div class="w-full h-full absolute top-0 left-0 pt-[31px] pb-[21px] pl-[14px] pr-[19px] flex items-center"> <div class="w-full h-full absolute top-0 left-0 pt-[31px] pb-[21px] pl-[14px] pr-[19px] flex items-center">
<div class="w-[144px]">
<div class="relative w-[144px] h-[113px] flex items-center flex-col"> <div class="relative w-[144px] h-[113px] flex items-center flex-col">
<div class="text-[#44C1EF] italic text-[20px] font-700">今日缴费</div> <div class="text-[#44C1EF] italic text-[20px] font-700">今日缴费</div>
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent mb-[15px] z-10 font-700"> <div class="mb-[15px] z-10 font-700 leading-[1] flex items-baseline">
<span class="text-[34px] italic">{{paymentData.toDayTotal || 0}}</span> <span class="text-[34px] italic text-color" :data-text="paymentData.toDayTotal">{{paymentData.toDayTotal || 0}}</span>
<span class="text-[18px]">人</span> <span class="text-[18px] text-color" data-text="人">人</span>
</div> </div>
<SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" /> <SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" />
</div> </div>
</div>
<div class="relative ml-[12px]"> <div class="relative ml-[12px]">
<SvgComponent :content="paymentBorderSvg" class="w-[127px] h-[104px] z-1" /> <SvgComponent :content="paymentBorderSvg" class="w-[127px] h-[104px] z-1" />
<div class="w-[127px] h-[104px] top-0 left-0 z-1 absolute pl-[14px] flex flex-col justify-center"> <div class="w-[127px] h-[104px] top-0 left-0 z-1 absolute pl-[14px] flex flex-col justify-center">

93
src/views/components/WinCustomer.vue
View File

@ -1,47 +1,43 @@
<template> <template>
<div class="w-[296px] h-[320px] relative bg-[#082059]"> <div class="h-[320px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0"> <div class="flex h-full custom-border absolute top-0 left-0">
<div class="relative h-[36px]">
<div class="absolute top-[50%] translate-y-[-50%] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent text-[20px] ml-[9px] font-700">获客排行榜</div>
</div>
<SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" /> <SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
</div>
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" /> <SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center">
<SvgComponent :content="arrowLeftSvg" class="w-[15px] h-[18px]" />
<div class="text-color text-[20px] ml-[9px] font-700" data-text="获客排行榜">获客排行榜</div>
</div> </div>
<div class="w-full h-[calc(100%-36px)] mt-[36px] flex flex-col relative"> </div>
<div class="absolute right-[0] flex items-center justify-end mr-[13px] transform-translate-y-[-50%]"> <div class="w-[296px] h-[calc(100%-36px)] mt-[36px] flex flex-col">
<div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0">
<div class="text-[15px] text-[#84E8FF]">更多</div> <div class="text-[15px] text-[#84E8FF]">更多</div>
<SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" /> <SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />
</div> </div>
<div class="mt-[26px] mx-[16px]"> <div class="mt-[26px] mx-[16px]">
<RankingTable :value="products" :columns="columns" header-class="custom-table-header" body-class="custom-table-body"> <RankingTable :value="products" :columns="columns" header-class="custom-table-header" body-class="custom-table-body">
<template #rank="{index }"> <template #rank="{ index }">
<SvgComponent :content="goldMedalSvg" class="w-[34px] h-[20px]" v-if="index===0"/> <SvgComponent :content="goldMedalSvg" class="w-[34px] h-[20px]" v-if="index === 0" />
<SvgComponent :content="silverMedalSvg" class="w-[34px] h-[20px]" v-if="index===1"/> <SvgComponent :content="silverMedalSvg" class="w-[34px] h-[20px]" v-if="index === 1" />
<SvgComponent :content="bronzeMedalSvg" class="w-[34px] h-[20px]" v-if="index===2"/> <SvgComponent :content="bronzeMedalSvg" class="w-[34px] h-[20px]" v-if="index === 2" />
<span class="text-[14px] font-600" v-if="index > 2">{{ index + 1 }}</span> <span class="text-[14px] font-600" v-if="index > 2">{{ index + 1 }}</span>
</template> </template>
<template #name="{ data }">
<template #name="{data}">
<span class="text-[#C0EEFF] text-[14px]">{{ data.name }}</span> <span class="text-[#C0EEFF] text-[14px]">{{ data.name }}</span>
</template> </template>
</RankingTable> </RankingTable>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import SvgComponent from "@/components/SvgComponent.vue"; import SvgComponent from "@/components/SvgComponent.vue";
import RankingTable from "@/components/table/RankingTable.vue"; import RankingTable from "@/components/table/RankingTable.vue";
const columns = [ const columns = [
{ field: "rank", header: "名次", align: "justify-center",width:'68px' }, { field: "rank", header: "名次", align: "justify-center", width: "68px" },
{ field: "name", header: "姓名", align: "justify-left",width:'100px' }, { field: "name", header: "姓名", align: "justify-left", width: "100px" },
{ field: "total", header: "获客人数", align: "justify-center",width:'96px' }, { field: "total", header: "获客人数", align: "justify-center", width: "96px" },
]; ];
let products = ref<any[]>([]); let products = ref<any[]>([]);
@ -56,16 +52,17 @@
watch( watch(
() => chargingRankingData.value, () => chargingRankingData.value,
() => {PageTransitionEvent () => {
initData() PageTransitionEvent;
initData();
}, },
); );
const initData = () => { const initData = () => {
if(chargingRankingData.value.acqRanks){ if (chargingRankingData.value.acqRanks) {
products.value = chargingRankingData.value.acqRanks products.value = chargingRankingData.value.acqRanks;
}
} }
};
const headerLeftSvg = ref(""); const headerLeftSvg = ref("");
const headerRightSvg = ref(""); const headerRightSvg = ref("");
@ -92,23 +89,23 @@
moreArrowSvg.value = svg; moreArrowSvg.value = svg;
}; };
const goldMedalSvg = ref("") const goldMedalSvg = ref("");
const getGoldMedalSvg = async () => { const getGoldMedalSvg = async () => {
const {default: svg} = await import("/src/assets/svg-img/gold-medal.svg?raw"); const { default: svg } = await import("/src/assets/svg-img/gold-medal.svg?raw");
goldMedalSvg.value = svg goldMedalSvg.value = svg;
} };
const silverMedalSvg = ref("") const silverMedalSvg = ref("");
const getSilverMedalSvg = async () => { const getSilverMedalSvg = async () => {
const {default: svg} = await import("/src/assets/svg-img/silver-medal.svg?raw"); const { default: svg } = await import("/src/assets/svg-img/silver-medal.svg?raw");
silverMedalSvg.value = svg silverMedalSvg.value = svg;
} };
const bronzeMedalSvg = ref("") const bronzeMedalSvg = ref("");
const getBronzeMedalSvg = async () => { const getBronzeMedalSvg = async () => {
const {default: svg} = await import("/src/assets/svg-img/bronze-medal.svg?raw"); const { default: svg } = await import("/src/assets/svg-img/bronze-medal.svg?raw");
bronzeMedalSvg.value = svg bronzeMedalSvg.value = svg;
} };
onBeforeMount(() => { onBeforeMount(() => {
getHeaderLeftSvg(); getHeaderLeftSvg();
@ -123,9 +120,10 @@
initData(); initData();
}); });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@use "@/styles/text-color.scss";
.custom-border { .custom-border {
border-image-slice: 27 27 27 27; border-image-slice: 27 27 27 27;
border-image-width: 1px 1px 2px 1px; border-image-width: 1px 1px 2px 1px;
@ -136,24 +134,23 @@
} }
:deep(.custom-table-header) { :deep(.custom-table-header) {
tr{ tr {
background-color: rgb(14, 39, 97); background-color: rgb(14, 39, 97);
th{ th {
padding: 13px 10px; padding: 13px 10px;
color:#44C1EF; color: #44c1ef;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: 1;
} }
} }
} }
:deep(.custom-table-body){ :deep(.custom-table-body) {
tr{ tr {
td{ td {
padding: 10px; padding: 10px;
line-height: 1; line-height: 1;
} }
} }
} }
</style> </style>

16
src/views/components/chartsComponents/OperatingTrendsChart.vue
View File

@ -277,11 +277,11 @@
type: "group", type: "group",
right: 97, right: 97,
top: 0, top: 0,
z: 100, // z: 100,
children: [ children: [
{ {
type: "image", type: "image",
z: 100, // z: 100,
style: { style: {
image: `data:image/svg+xml;charset=utf-8,${currentMode.value === "week" ? activeButtonSvgBase64 : buttonSvgBase64}`, image: `data:image/svg+xml;charset=utf-8,${currentMode.value === "week" ? activeButtonSvgBase64 : buttonSvgBase64}`,
width: 72, width: 72,
@ -292,7 +292,7 @@
}, },
{ {
type: "text", type: "text",
z: 100, // z: 100,
style: { style: {
text: "按周", text: "按周",
x: 36, x: 36,
@ -312,11 +312,11 @@
type: "group", type: "group",
right: 15, right: 15,
top: 0, top: 0,
z: 100, // z: 100,
children: [ children: [
{ {
type: "image", type: "image",
z: 100, // z: 100,
style: { style: {
image: `data:image/svg+xml;charset=utf-8,${currentMode.value === "month" ? activeButtonSvgBase64 : buttonSvgBase64}`, image: `data:image/svg+xml;charset=utf-8,${currentMode.value === "month" ? activeButtonSvgBase64 : buttonSvgBase64}`,
width: 72, width: 72,
@ -327,7 +327,7 @@
}, },
{ {
type: "text", type: "text",
z: 100, // z: 100,
style: { style: {
text: "按月", text: "按月",
x: 36, x: 36,
@ -451,7 +451,7 @@
{ {
type: "bar", type: "bar",
id: "axisOverlayBar", id: "axisOverlayBar",
zlevel: 1, // zlevel: 1,
silent: false, silent: false,
barWidth: "100%", barWidth: "100%",
data: chartData.value.dates.map(() => 500), // 使用y轴的最大值 data: chartData.value.dates.map(() => 500), // 使用y轴的最大值
@ -495,7 +495,7 @@
type: "bar", type: "bar",
barWidth: 40, barWidth: 40,
barGap: "-100%", barGap: "-100%",
zlevel: 10, // zlevel: 10,
silent: true, silent: true,
animation: true, animation: true,
data: chartData.value.dates.map((_: any, index: number) => { data: chartData.value.dates.map((_: any, index: number) => {

20
src/views/components/chartsComponents/ProportionCharts.vue
View File

@ -88,6 +88,26 @@
gap: 0, gap: 0,
}, },
], ],
graphic: [
{
id: "circle-rotate",
elements: [
{
type: "image",
left: "center",
top: "center",
style: {
image: "/images/rotate-circle.webp",
width: 143,
height: 143,
fill:"transparent"
},
z: 2,
cursor: "point",
},
],
},
],
animation: true, animation: true,
animationDuration: 500, animationDuration: 500,
}; };

120
src/views/components/chartsComponents/StudentSourceChart.vue
View File

@ -1,12 +1,14 @@
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="relative flex-1"> <div class="relative flex-1">
<div class="particle-base"></div>
<div ref="chartRef" class="w-full h-full"></div> <div ref="chartRef" class="w-full h-full"></div>
<div <div
class="absolute left-50% top-50% transform-translate-x-[-50%] transform-translate-y-[-50%] bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent flex items-end leading-[1] z-[2]"> class="absolute left-50% top-50% transform-translate-x-[-50%] transform-translate-y-[-50%] flex items-baseline">
<span class="text-[24px] font-700">{{ total }}</span> <span class="text-[24px] font-700 text-color" :data-text="total">{{ total }}</span>
<span class="text-[16px] font-700">人</span> <span class="text-[16px] font-700 text-color" data-text="人">人</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
@ -236,47 +238,47 @@
}, },
], ],
graphic: [ graphic: [
{ // {
id: "backgroundImg", // id: "backgroundImg",
elements: [ // elements: [
{ // {
type: "image", // type: "image",
left: "center", // left: "center",
top: "33%", // top: "33%",
style: { // style: {
image: "/images/particleBase.png", // image: "/images/particleBase.png",
width: 254, // width: 254,
height: 106, // height: 106,
}, // },
z: 0, // z: 0,
cursor: "point", // cursor: "point",
origin: [127, 53], // origin: [127, 53],
keyframeAnimation: [ // // keyframeAnimation: [
{ // // {
duration: 1600, // // duration: 1600,
loop: true, // // loop: true,
keyframes: [ // // keyframes: [
{ // // {
percent: 0, // // percent: 0,
scaleX: 1.1, // // scaleX: 1.1,
scaleY: 1.1, // // scaleY: 1.1,
}, // // },
{ // // {
percent: 0.3, // // percent: 0.3,
scaleX: 1, // // scaleX: 1,
scaleY: 1, // // scaleY: 1,
}, // // },
{ // // {
percent: 1, // // percent: 1,
scaleX: 1.1, // // scaleX: 1.1,
scaleY: 1.1, // // scaleY: 1.1,
}, // // },
], // // ],
}, // // },
], // // ],
}, // },
], // ],
}, // },
], ],
}; };
}; };
@ -328,4 +330,32 @@
}; };
</script> </script>
<style scoped></style> <style scoped lang="scss">
@use "@/styles/text-color.scss";
.particle-base {
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -50%);
width: 254px;
height: 106px;
background-image: url('/images/particleBase.png');
background-size: contain;
background-repeat: no-repeat;
animation: scaleAnimation 1.6s infinite;
will-change: transform;
}
@keyframes scaleAnimation {
0% {
transform: translate(-50%, -50%) scale(1.1);
}
30% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(1.1);
}
}
</style>

17
src/views/home.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="main-bg flex flex-col scrollbar-hide h-screen overflow-auto"> <div class="main-bg flex flex-col scrollbar-hide h-screen overflow-y-auto">
<header class="relative flex items-center"> <header class="relative flex items-center">
<SvgComponent :content="headerSvg" class="w-full h-[98px]" /> <SvgComponent :content="headerSvg" class="w-full h-[98px]" />
<SvgComponent :content="titleSvg" class="w-[50%] h-[69px] absolute top-0 left-50% translate-x-[-50%]" /> <SvgComponent :content="titleSvg" class="w-[50%] h-[69px] absolute top-0 left-50% translate-x-[-50%]" />
@ -30,13 +30,13 @@
<OperatingTrends class="flex-1" /> <OperatingTrends class="flex-1" />
<AskSection class="flex-1" /> <AskSection class="flex-1" />
</div> </div>
<div class="flex items-center px-[24px] overflow-x-auto"> <div class="grid grid-cols-6 gap-[20px] items-center px-[24px] ">
<StudentSource class="min-w-[296px] max-w-[296px]" /> <StudentSource class="" />
<OnLineStatus class="ml-[20px] min-w-[296px] max-w-[296px]" /> <OnLineStatus class="" />
<OfflineStatus class="ml-[20px] min-w-[296px] max-w-[296px]" /> <OfflineStatus class="" />
<SixStatistics class="ml-[20px] min-w-[296px] max-w-[296px]" /> <SixStatistics class="" />
<ChargingRanking class="ml-[20px]" /> <ChargingRanking class="" />
<WinCustomer class="ml-[20px]" /> <WinCustomer class="" />
</div> </div>
</div> </div>
</div> </div>
@ -184,6 +184,5 @@
background-size: 100% 100%; background-size: 100% 100%;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
overflow-y: auto;
} }
</style> </style>