102 lines
3.9 KiB
Vue
102 lines
3.9 KiB
Vue
<template>
|
|
<div class="main-bg flex flex-col scrollbar-hide h-screen overflow-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%]" />
|
|
<div class="absolute top-[25%] right-[24px] translate-y-[-25%] z-1 flex items-center justify-center w-max">
|
|
<div class="text-[#45A2FF] text-[14px]">{{ year }}-{{ month }}-{{ day }} {{ weekday }}</div>
|
|
<DigitalWatch class="ml-[10px]" />
|
|
</div>
|
|
</header>
|
|
<div class="flex items-center justify-end pr-[24px] cursor-pointer mb-[13px]" @click="updateAllData">
|
|
<SvgIcon name="circle" class="text-[14px] text-[#C0EEFF] transition-all duration-300"/>
|
|
<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="flex items-center px-[24px] justify-start">
|
|
<PaymentTotal />
|
|
<TodayPayment class="ml-[20px]" />
|
|
<GainTotal class="ml-[20px]" />
|
|
<GainToday class="ml-[20px]" />
|
|
<LossStatic class="ml-[20px]" />
|
|
</div>
|
|
<div class="flex items-center px-[24px] justify-start">
|
|
<OperatingTrends class="" />
|
|
<AskSection class="ml-[20px]" />
|
|
</div>
|
|
<div class="flex items-center px-[24px] overflow-x-auto">
|
|
<StudentSource />
|
|
<OnLineStatus class="ml-[20px]" />
|
|
<OfflineStatus class="ml-[20px]" />
|
|
<SixStatistics class="ml-[20px]" />
|
|
<ChargingRanking class="ml-[20px]" />
|
|
<WinCustomer class="ml-[20px]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import SvgComponent from "@/components/SvgComponent.vue";
|
|
import SvgIcon from "@/components/svg-icon/SvgIcon.vue";
|
|
|
|
import DigitalWatch from "@/components/watch/DigitalWatch.vue";
|
|
import PaymentTotal from "@/views/components/PaymentTotal.vue";
|
|
import TodayPayment from "@/views/components/TodayPayment.vue";
|
|
import GainTotal from "@/views/components/GainTotal.vue";
|
|
import GainToday from "@/views/components/GainToday.vue";
|
|
import LossStatic from "@/views/components/LossStatic.vue";
|
|
import OperatingTrends from "@/views/components/OperatingTrends.vue";
|
|
import AskSection from "@/views/components/AskSection.vue";
|
|
import StudentSource from "@/views/components/StudentSource.vue";
|
|
import OnLineStatus from "@/views/components/OnlineStatus.vue";
|
|
import OfflineStatus from "@/views/components/OfflineStatus.vue";
|
|
import SixStatistics from "@/views/components/SixStatistics.vue";
|
|
import ChargingRanking from "./components/ChargingRanking.vue";
|
|
import WinCustomer from "./components/WinCustomer.vue";
|
|
|
|
import { useDate } from "@/composables/useDate";
|
|
import {useFetchAllData} from "./composables/useFetchData"
|
|
import { runImmediatelyAll, updateTime } from "@/composables/usePolling";
|
|
import { formatDatetime } from "@/utils/date";
|
|
|
|
const { year, month, day, weekday, formateTime } = useDate();
|
|
|
|
|
|
const headerSvg = ref("");
|
|
const headerBackgroundSvg = async () => {
|
|
const { default: svg } = await import("/src/assets/svg-img/header-background.svg?raw");
|
|
headerSvg.value = svg;
|
|
};
|
|
|
|
const titleSvg = ref("");
|
|
const headerTitleSvg = async () => {
|
|
const { default: svg } = await import("/src/assets/svg-img/header-title.svg?raw");
|
|
titleSvg.value = svg;
|
|
};
|
|
|
|
|
|
useFetchAllData()
|
|
|
|
const updateAllData = () => {
|
|
runImmediatelyAll()
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
formateTime();
|
|
headerBackgroundSvg();
|
|
headerTitleSvg();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main-bg {
|
|
background-image: url("/images/main-bg.png");
|
|
background-size: 100% 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|