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

feat: 增加自动伸展适配多个显示分辨率

master
xjs 2026-03-02 15:01:25 +08:00
parent f693405056
commit 136b374dd9
10 changed files with 59 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -15,6 +15,7 @@
"@types/crypto-js": "^4.2.2",
"@types/node": "^22.10.1",
"@unocss/reset": "^66.1.1",
"autofit.js": "^3.2.8",
"axios": "^1.7.9",
"crypto-js": "^4.2.0",
"echarts": "^5.6.0",

8
pnpm-lock.yaml
View File

@ -17,6 +17,9 @@ importers:
'@unocss/reset':
specifier: ^66.1.1
version: 66.1.1
autofit.js:
specifier: ^3.2.8
version: 3.2.8
axios:
specifier: ^1.7.9
version: 1.7.9
@ -876,6 +879,9 @@ packages:
engines: {node: '>= 4.5.0'}
hasBin: true
autofit.js@3.2.8:
resolution: {integrity: sha512-albZNwDIXvcRneEDyZLW3uAIOH0cUQG/TnCGQ7jpfnL0gPn/+1ZNVRuEz3ZuzZvVkQ4HQRplGHjUeMRtPNxjLQ==}
available-typed-arrays@1.0.7:
resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
engines: {node: '>= 0.4'}
@ -3382,6 +3388,8 @@ snapshots:
atob@2.1.2: {}
autofit.js@3.2.8: {}
available-typed-arrays@1.0.7:
dependencies:
possible-typed-array-names: 1.0.0

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

@ -2,13 +2,13 @@
<div class="h-[320px] relative bg-[#082059] custom-border">
<div class="flex">
<SvgComponent :content="headerLeftSvg" class="w-[188px] 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>
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
</div>
<div class="w-[296px] h-[calc(100%-36px)] flex flex-col">
<div class="w-full h-[calc(100%-36px)] flex flex-col">
<div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0" @click="show = true">
<div class="text-[15px] text-[#84E8FF]">更多</div>
<SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />

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

@ -1,12 +1,12 @@
<template>
<div class="w-[296px] h-[320px] relative bg-[#082059] custom-border">
<div class="w-full h-[320px] relative bg-[#082059] custom-border">
<div class="flex">
<SvgComponent :content="headerLeftSvg" class="w-[188px] 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>
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
</div>
<div class="w-full h-[calc(100%-36px)] flex flex-col">
<div class="ml-[22px] relative mt-[13px] flex items-center justify-center">
@ -52,7 +52,6 @@
headerRightSvg.value = svg;
};
const arrowLeftSvg = ref("");
const getArrowLeftSvg = async () => {
const { default: svg } = await import("/src/assets/svg-img/arrow-left.svg?raw");
@ -60,18 +59,18 @@
};
const colorList = ref(["#0783FA", "#07D1FA", "#20E6A4", "#FFD15C"]);
const askSectionData = inject("askSectionData", ref<{ offline: any[],scource:any[] }>({ offline: [],scource:[] }));
const askSectionData = inject("askSectionData", ref<{ offline: any[]; scource: any[] }>({ offline: [], scource: [] }));
const chartData = ref<any[]>([]);
watch(
() => askSectionData.value,
() => {
initData()
initData();
},
);
const offlineTotal = ref<any>(0)
const offlineTotal = ref<any>(0);
const initData = () => {
if (askSectionData.value.offline && askSectionData.value.offline.length > 0) {
@ -80,9 +79,9 @@
value: item.total,
color: colorList.value[index % colorList.value.length],
}));
offlineTotal.value = askSectionData.value.scource.filter(item => item.tag==="线下")[0].total
}
offlineTotal.value = askSectionData.value.scource.filter((item) => item.tag === "线下")[0].total;
}
};
onBeforeMount(() => {
getHeaderLeftSvg();

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

@ -1,5 +1,5 @@
<template>
<div class="w-[296px] h-[320px] relative bg-[#082059] custom-border">
<div class="w-full h-[320px] relative bg-[#082059] custom-border">
<div class="flex">
<SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
<div class="absolute top-[2px] left-[15px] flex items-center">

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

@ -1,12 +1,12 @@
<template>
<div class="w-[296px] h-[320px] relative bg-[#082059] custom-border">
<div class="w-full h-[320px] relative bg-[#082059] custom-border">
<div class="flex">
<SvgComponent :content="headerLeftSvg" class="w-[188px] 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>
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
</div>
<div class="w-full h-[calc(100%-36px)] flex flex-col">
<!-- <div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0">

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

@ -1,8 +1,8 @@
<template>
<div class="w-[296px] h-[320px] relative bg-[#082059]">
<div class="w-full h-[320px] relative bg-[#082059]">
<div class="flex h-full custom-border absolute top-0 left-0">
<SvgComponent :content="headerLeftSvg" class="w-[188px] h-[36px]" />
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
<SvgComponent :content="headerRightSvg" class="flex-auto 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>

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

@ -1,7 +1,7 @@
<template>
<div class="w-max h-max relative">
<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] flex pl-[14px] pr-[19px] flex items-center">
<div class="relative w-[144px] h-[113px] flex items-center flex-col">
<SvgComponent :content="hexagonalBoxSvg" class="box-light absolute" />
<div class="text-[#44C1EF] italic text-[20px] font-700">今日缴费</div>
@ -10,7 +10,7 @@
<span class="text-[18px] text-color" data-text="人">人</span>
</div>
</div>
<div class="relative ml-[12px]">
<div class="relative flex-auto ml-[12px]">
<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">
<p class="text-[#C0EEFF] text-[12px]">昨日缴费人数</p>

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

@ -2,13 +2,13 @@
<div class="h-[320px] relative bg-[#082059] custom-border">
<div class="flex">
<SvgComponent :content="headerLeftSvg" class="w-[188px] 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>
<SvgComponent :content="headerRightSvg" class="w-[108px] h-[36px]" />
</div>
<div class="w-[296px] h-[calc(100%-36px)] flex flex-col">
<div class="w-full h-[calc(100%-36px)] flex flex-col">
<div class="flex items-center justify-end mr-[13px] transform-translate-y-[-50%] h-0" @click="show = true">
<div class="text-[15px] text-[#84E8FF]">更多</div>
<SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />

28
src/views/home.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="main-bg flex flex-col scrollbar-hide h-screen overflow-y-auto">
<div id="home-screen" class="main-bg flex flex-col scrollbar-hide h-screen overflow-y-auto">
<header class="relative flex items-center">
<SvgComponent :content="headerSvg" class="w-full h-[98px]" />
<SvgComponent :content="titleSvg" class="w-[50%] h-[69px] absolute top-0 left-50% translate-x-[-50%]" />
@ -17,7 +17,7 @@
<div class="text-[#C0EEFF] text-[12px] ml-[5px]">数据更新时间:{{ formatDatetime(updateTime) }}</div>
</div>
<div class="grid grid-rows-[210px_358px_320px] gap-y-5 w-full min-h-[928px] gap-[20px] flex-1 overflow-auto mb-[27px]">
<div class="grid grid-rows-[210px_358px_320px] gap-y-5 w-full min-h-[928px] gap-[20px] flex-1 overflow-auto md:overflow-hidden mb-[27px]">
<div class="flex items-center px-[24px] justify-start">
<PaymentTotal class="flex-1" />
<TodayPayment class="ml-[20px] flex-1" />
@ -48,6 +48,7 @@
import DigitalWatch from "@/components/watch/DigitalWatch.vue";
import { defineAsyncComponent } from "vue";
import autofit from "autofit.js";
import { useFetchAllData } from "./composables/useFetchData";
import { runImmediatelyAll, updateTime } from "@/composables/usePolling";
import { formatDatetime } from "@/utils/date";
@ -111,6 +112,8 @@
});
const router = useRouter();
const { isMobile } = usePlatformType();
let hasAutofitInit = false;
const headerSvg = ref("");
const headerBackgroundSvg = async () => {
@ -158,12 +161,31 @@
headerBackgroundSvg();
headerTitleSvg();
getUserInfo();
const { isMobile } = usePlatformType();
// 跳转到首页
if (isMobile) {
router.push("/app");
}
});
onMounted(() => {
if (isMobile) {
return;
}
autofit.init({
el: "#home-screen",
dw: 1920,
dh: 1080,
resize: true,
allowScroll: false,
});
hasAutofitInit = true;
});
onBeforeUnmount(() => {
if (hasAutofitInit && autofit.isAutofitRunning) {
autofit.off("#home-screen");
}
});
</script>
<style scoped lang="scss">