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

feat: 线上线下数据对接

master
xjs 2025-05-26 10:30:43 +08:00
parent c4fcc28ed2
commit 3306cab187
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,7 @@
</div> </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="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent flex items-baseline">
<div class="text-[25px]">690</div> <div class="text-[25px]">{{ offlineTotal }}</div>
<div class="text-[20px]">人</div> <div class="text-[20px]">人</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>
@ -70,7 +70,7 @@
}; };
const colorList = ref(["#0783FA", "#07D1FA", "#20E6A4", "#FFD15C"]); const colorList = ref(["#0783FA", "#07D1FA", "#20E6A4", "#FFD15C"]);
const askSectionData = inject("askSectionData", ref<{ offline: any[] }>({ offline: [] })); const askSectionData = inject("askSectionData", ref<{ offline: any[],scource:any[] }>({ offline: [],scource:[] }));
const chartData = ref<any[]>([]); const chartData = ref<any[]>([]);
@ -81,6 +81,8 @@
}, },
); );
const offlineTotal = ref<any>({})
const initData = () => { const initData = () => {
if (askSectionData.value.offline && askSectionData.value.offline.length > 0) { if (askSectionData.value.offline && askSectionData.value.offline.length > 0) {
chartData.value = askSectionData.value.offline.map((item, index) => ({ chartData.value = askSectionData.value.offline.map((item, index) => ({
@ -88,6 +90,7 @@
value: item.total, value: item.total,
color: colorList.value[index % colorList.value.length], color: colorList.value[index % colorList.value.length],
})); }));
offlineTotal.value = askSectionData.value.scource.filter(item => item.tag==="线下")[0].total
} }
} }

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

@ -18,7 +18,7 @@
</div> </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="bg-gradient-to-b from-[#8FC8FF] to-white bg-clip-text text-transparent flex items-baseline">
<div class="text-[25px]">690</div> <div class="text-[25px]">{{ onlineTotal }}</div>
<div class="text-[20px]">人</div> <div class="text-[20px]">人</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>
@ -71,13 +71,17 @@
const colorList = ref(["#0783FA", "#07D1FA", "#20E6A4", "#FFD15C"]); const colorList = ref(["#0783FA", "#07D1FA", "#20E6A4", "#FFD15C"]);
const askSectionData = inject("askSectionData", ref<{ online: any[] }>({ online: [] })); const askSectionData = inject("askSectionData", ref<{ online: any[]; scource: any[] }>({ online: [], scource: [] }));
const chartData = ref<any[]>([]); const chartData = ref<any[]>([]);
const onlineTotal = ref<any>({});
watch(() => askSectionData.value, () => { watch(
initData() () => askSectionData.value,
}); () => {
initData();
},
);
const initData = () => { const initData = () => {
if (askSectionData.value.online && askSectionData.value.online.length > 0) { if (askSectionData.value.online && askSectionData.value.online.length > 0) {
@ -86,8 +90,9 @@
value: item.total, value: item.total,
color: colorList.value[index % colorList.value.length], color: colorList.value[index % colorList.value.length],
})); }));
onlineTotal.value = askSectionData.value.scource.filter((item) => item.tag === "线上")[0].total;
} }
} };
onBeforeMount(() => { onBeforeMount(() => {
getHeaderLeftSvg(); getHeaderLeftSvg();