update charts

This commit is contained in:
Timi
2026-08-12 16:24:23 +08:00
parent 2a64f2ad72
commit 826f1b2dd0
14 changed files with 820 additions and 319 deletions
+8 -116
View File
@@ -1,138 +1,34 @@
<template>
<div v-can="permissionCodes.stat.read" class="data-charts-page">
<section class="summary">
<div v-for="item in summaryList" :key="item.label" class="summary-item">
<span v-text="item.label" />
<strong v-text="item.value" />
</div>
</section>
<store-chart-summary :date-text-list="dateTextList" />
<store-event-record-calendar-section :event-list="eventList" />
<store-customer-growth-chart :date-text-list="dateTextList" :stat-list="customerDailyStatList" />
<store-event-record-trend-chart :date-text-list="dateTextList" :event-list="eventList" :stat-map="recordDailyStatMap" />
<store-event-structure-chart :date-text-list="dateTextList" :event-list="eventList" :stat-map="recordDailyStatMap" />
<store-customer-gender-chart :date-text-list="dateTextList" :stat-list="customerGenderStatList" />
<store-event-record-calendar-section />
<store-customer-growth-chart :date-text-list="dateTextList" />
<store-event-record-trend-chart :date-text-list="dateTextList" />
<store-event-structure-chart :date-text-list="dateTextList" />
<store-customer-gender-chart :date-text-list="dateTextList" />
</div>
</template>
<script setup lang="ts">
import EventAPI from "@/api/EventAPI";
import StoreChartAPI from "@/api/StoreChartAPI";
import { Time } from "timi-web";
import StoreChartSummary from "@/pages/store/component/StoreChartSummary.vue";
import StoreCustomerGenderChart from "@/pages/store/component/StoreCustomerGenderChart.vue";
import StoreCustomerGrowthChart from "@/pages/store/component/StoreCustomerGrowthChart.vue";
import StoreEventRecordCalendarSection from "@/pages/store/component/StoreEventRecordCalendarSection.vue";
import StoreEventRecordTrendChart from "@/pages/store/component/StoreEventRecordTrendChart.vue";
import StoreEventStructureChart from "@/pages/store/component/StoreEventStructureChart.vue";
import type { CustomerDailyStatView, CustomerGenderStatView } from "@/types/Customer";
import type { EventItem } from "@/types/EventItem";
import type { StoreEventRecordDailyStatView } from "@/types/Store";
import { Time } from "timi-web";
import { permissionCodes } from "@/utils/permission";
interface SummaryItem {
label: string;
value: string;
}
defineOptions({
name: "StoreDataCharts"
});
// ---------- 数据源 ----------
const eventList = ref<EventItem[]>([]);
const customerDailyStatList = ref<CustomerDailyStatView[]>([]);
const customerGenderStatList = ref<CustomerGenderStatView[]>([]);
const recordDailyStatMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
const weekBeginDate = getDateStart(addDays(new Date(), -6));
const beginDate = getDateStart(addMonths(new Date(), -1));
const endDate = getDateEnd(new Date());
const dateTextList = buildDateTextList(beginDate, endDate);
const timestampRange = {
beginAt: Time.toTimestamp(beginDate),
endAt: Time.toTimestamp(endDate)
};
// ---------- 摘要 ----------
const summaryList = computed<SummaryItem[]>(() => [
{
label: "当前客户",
value: `${getLatestTotalCustomerCount()} 人`
},
{
label: "本周新增",
value: `${sumCustomerNewCount()} 人`
},
{
label: "本周登记",
value: `${sumActionDailyCount()} 次`
}
]);
onMounted(async () => {
await loadChartsData();
});
// ---------- 页面数据 ----------
async function loadChartsData(): Promise<void> {
eventList.value = await EventAPI.listValid();
const valideventList = eventList.value.filter((item): item is EventItem & { id: string } => Boolean(item.id));
const eventIdList = valideventList.map(item => item.id);
const [customerStatList, genderStatList, recordDailyStatList] = await Promise.all([
StoreChartAPI.customerDailyStat({
beginAt: timestampRange.beginAt,
endAt: timestampRange.endAt
}),
StoreChartAPI.customerGenderStat(),
eventIdList.length ? StoreChartAPI.eventRecordDailyStat({
beginAt: timestampRange.beginAt,
endAt: timestampRange.endAt,
eventIdList
}) : Promise.resolve([])
]);
customerDailyStatList.value = customerStatList;
customerGenderStatList.value = genderStatList;
recordDailyStatMap.value = groupRecordDailyStatByEventId(recordDailyStatList);
}
// ---------- 统计计算 ----------
function getLatestTotalCustomerCount(): number {
const latest = customerDailyStatList.value[customerDailyStatList.value.length - 1];
return latest?.totalCustomerCount || 0;
}
function sumCustomerNewCount(): number {
return customerDailyStatList.value.filter(isRecentWeekStat).reduce((sum, item) => sum + (item.newCustomerCount || 0), 0);
}
function sumActionDailyCount(): number {
return eventList.value.reduce((sum, item) => sum + countRecentWeekRecordByEvent(item.id || ""), 0);
}
function countRecentWeekRecordByEvent(eventId: string): number {
return (recordDailyStatMap.value[eventId] || []).filter(isRecentWeekStat).reduce((sum, item) => sum + (item.dailyCount || 0), 0);
}
function isRecentWeekStat(item: { dateValue?: number }): boolean {
return toDateValue(weekBeginDate) <= (item.dateValue || 0);
}
function groupRecordDailyStatByEventId(list: StoreEventRecordDailyStatView[]): Record<string, StoreEventRecordDailyStatView[]> {
const map: Record<string, StoreEventRecordDailyStatView[]> = {};
for (const item of list) {
if (!item.eventId) {
continue;
}
if (!map[item.eventId]) {
map[item.eventId] = [];
}
map[item.eventId].push(item);
}
return map;
}
// ---------- 日期工具 ----------
@@ -154,10 +50,6 @@ function addMonths(date: Date, months: number): Date {
return new Date(date.getFullYear(), date.getMonth() + months, date.getDate(), 0, 0, 0, 0);
}
function toDateValue(date: Date): number {
return Number(Time.formatDate(date).replaceAll("-", ""));
}
function buildDateTextList(begin: Date, end: Date): string[] {
const list: string[] = [];
for (let item = getDateStart(begin); item <= end; item = addDays(item, 1)) {
@@ -0,0 +1,202 @@
<template>
<section class="summary">
<div v-for="item in summaryList" :key="item.label" class="summary-item">
<span v-text="item.label" />
<strong v-text="item.value" />
</div>
</section>
</template>
<script setup lang="ts">
import { Time } from "timi-web";
import EventAPI from "@/api/EventAPI";
import StoreChartAPI from "@/api/StoreChartAPI";
import type { CustomerDailyStatView } from "@/types/Customer";
import type { EventItem } from "@/types/EventItem";
import type { StoreEventRecordDailyStatView } from "@/types/Store";
interface SummaryItem {
label: string;
value: string;
}
const props = defineProps<{
dateTextList: string[];
}>();
// ---------- 摘要数据 ----------
const eventList = ref<EventItem[]>([]);
const customerDailyStatList = ref<CustomerDailyStatView[]>([]);
const recordDailyStatMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
const todayDateValue = toDateValue(new Date());
const weekBeginDateValue = toDateValue(getWeekBeginDate(new Date()));
let summaryRequestId = 0;
const summaryList = computed<SummaryItem[]>(() => [
{
label: "当前客户",
value: `${getLatestTotalCustomerCount()} 人`
},
{
label: "本周新增",
value: `${sumCustomerNewCount()} 人`
},
{
label: "本周登记",
value: `${sumActionDailyCount()} 次`
}
]);
watch(() => props.dateTextList, async () => {
await loadSummaryData();
}, {
deep: true,
immediate: true
});
async function loadSummaryData(): Promise<void> {
if (!props.dateTextList.length) {
customerDailyStatList.value = [];
recordDailyStatMap.value = {};
return;
}
const requestId = ++summaryRequestId;
eventList.value = await EventAPI.listValid();
const eventIdList = getEventIdList();
const [customerStatList, recordDailyStatList] = await Promise.all([
StoreChartAPI.customerDailyStat({
beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1]))
}),
eventIdList.length ? StoreChartAPI.eventRecordDailyStat({
beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1])),
eventIdList
}) : Promise.resolve([])
]);
if (requestId === summaryRequestId) {
customerDailyStatList.value = customerStatList;
recordDailyStatMap.value = groupRecordDailyStatByEventId(recordDailyStatList);
}
}
// ---------- 统计 ----------
function getLatestTotalCustomerCount(): number {
const latest = customerDailyStatList.value[customerDailyStatList.value.length - 1];
return latest?.totalCustomerCount || 0;
}
function sumCustomerNewCount(): number {
return customerDailyStatList.value.filter(isRecentWeekStat).reduce((sum, item) => sum + (item.newCustomerCount || 0), 0);
}
function sumActionDailyCount(): number {
return eventList.value.reduce((sum, item) => sum + countRecentWeekRecordByEvent(item.id || ""), 0);
}
function countRecentWeekRecordByEvent(eventId: string): number {
return (recordDailyStatMap.value[eventId] || []).filter(isRecentWeekStat).reduce((sum, item) => sum + (item.dailyCount || 0), 0);
}
function isRecentWeekStat(item: { dateValue?: number }): boolean {
const dateValue = item.dateValue || 0;
return weekBeginDateValue <= dateValue && dateValue <= todayDateValue;
}
function getEventIdList(): string[] {
return eventList.value.map(item => item.id).filter((id): id is string => Boolean(id));
}
function groupRecordDailyStatByEventId(list: StoreEventRecordDailyStatView[]): Record<string, StoreEventRecordDailyStatView[]> {
const map: Record<string, StoreEventRecordDailyStatView[]> = {};
for (const item of list) {
if (!item.eventId) {
continue;
}
if (!map[item.eventId]) {
map[item.eventId] = [];
}
map[item.eventId].push(item);
}
return map;
}
// ---------- 日期 ----------
function getDateStart(dateText: string): Date;
function getDateStart(date: Date): Date;
function getDateStart(value: string | Date): Date {
if (typeof value !== "string") {
return new Date(value.getFullYear(), value.getMonth(), value.getDate(), 0, 0, 0, 0);
}
const [year, month, day] = value.split("-").map(Number);
return new Date(year, month - 1, day, 0, 0, 0, 0);
}
function getDateEnd(dateText: string): Date {
const [year, month, day] = dateText.split("-").map(Number);
return new Date(year, month - 1, day, 23, 59, 59, 999);
}
function getWeekBeginDate(date: Date): Date {
const value = getDateStart(date);
const day = value.getDay() || 7;
value.setDate(value.getDate() - day + 1);
return value;
}
function toDateValue(date: Date): number {
return Number(Time.formatDate(date).replaceAll("-", ""));
}
</script>
<style scoped lang="less">
.summary {
gap: .75rem;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
.summary-item {
padding: .875rem .625rem;
display: flex;
min-width: 0;
background: rgba(255, 255, 255, .92);
box-shadow: var(--td-shadow-1);
align-items: center;
border-radius: 1rem;
flex-direction: column;
span {
color: #52607a;
font-size: .75rem;
}
strong {
margin-top: .375rem;
color: #0f172a;
font-size: 1.125rem;
font-weight: 700;
}
}
}
:global(html.theme-dark) {
.summary {
.summary-item {
background: rgba(15, 23, 42, .88);
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
span {
color: #94a3b8;
}
strong {
color: #e2e8f0;
}
}
}
}
</style>
@@ -7,12 +7,12 @@
<script setup lang="ts">
import type { EChartsOption } from "echarts";
import StoreChartAPI from "@/api/StoreChartAPI";
import type { CustomerGenderStatView } from "@/types/Customer";
import { buildStoreBaseChartOption, useStoreChart } from "@/pages/store/component/useStoreChart";
const props = defineProps<{
dateTextList: string[];
statList: CustomerGenderStatView[];
}>();
const genderColorMap = {
@@ -21,6 +21,10 @@ const genderColorMap = {
UNKNOWN: "#64748b"
} as const;
// ---------- 图表数据 ----------
const statList = ref<CustomerGenderStatView[]>([]);
const chartOption = computed<EChartsOption>(() => ({
...buildStoreBaseChartOption(props.dateTextList),
tooltip: {
@@ -70,8 +74,16 @@ const chartOption = computed<EChartsOption>(() => ({
const { chartElement } = useStoreChart(chartOption);
onMounted(async () => {
await loadCustomerGenderStat();
});
async function loadCustomerGenderStat(): Promise<void> {
statList.value = await StoreChartAPI.customerGenderStat();
}
function getGenderCount(genderCode: "MALE" | "FEMALE" | "UNKNOWN"): number {
return props.statList.find(item => item.genderCode === genderCode)?.count || 0;
return statList.value.find(item => item.genderCode === genderCode)?.count || 0;
}
</script>
@@ -14,16 +14,24 @@
</template>
<script setup lang="ts">
import { Time } from "timi-web";
import type { EChartsOption } from "echarts";
import StoreChartAPI from "@/api/StoreChartAPI";
import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
import type { CustomerDailyStatView } from "@/types/Customer";
import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
const props = defineProps<{
dateTextList: string[];
statList: CustomerDailyStatView[];
}>();
// ---------- 图表数据 ----------
const statList = ref<CustomerDailyStatView[]>([]);
let statRequestId = 0;
// ---------- 图表窗口 ----------
const dateTextList = computed(() => props.dateTextList);
const {
rangeText,
@@ -52,9 +60,44 @@ const chartOption = computed<EChartsOption>(() => ({
const { chartElement } = useStoreChart(chartOption);
watch(() => props.dateTextList, async () => {
await loadCustomerDailyStat();
}, {
deep: true,
immediate: true
});
async function loadCustomerDailyStat(): Promise<void> {
if (!props.dateTextList.length) {
statList.value = [];
return;
}
const requestId = ++statRequestId;
const list = await StoreChartAPI.customerDailyStat({
beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1]))
});
if (requestId === statRequestId) {
statList.value = list;
}
}
function getDailyStat(dateText: string): CustomerDailyStatView | undefined {
const dateValue = Number(dateText.replaceAll("-", ""));
return props.statList.find(item => item.dateValue === dateValue);
return statList.value.find(item => item.dateValue === dateValue);
}
// ---------- 日期 ----------
function getDateStart(dateText: string): Date {
const [year, month, day] = dateText.split("-").map(Number);
return new Date(year, month - 1, day, 0, 0, 0, 0);
}
function getDateEnd(dateText: string): Date {
const [year, month, day] = dateText.split("-").map(Number);
return new Date(year, month - 1, day, 23, 59, 59, 999);
}
</script>
@@ -10,6 +10,7 @@
</template>
<script setup lang="ts">
import EventAPI from "@/api/EventAPI";
import StoreChartAPI from "@/api/StoreChartAPI";
import EventRecordCalendar from "@/components/EventRecordCalendar.vue";
import type { EventItem } from "@/types/EventItem";
@@ -17,10 +18,7 @@ import type { EventRecord } from "@/types/EventRecord";
import type { StoreEventRecordCalendarView } from "@/types/Store";
import { Time } from "timi-web";
const props = defineProps<{
eventList: EventItem[];
}>();
const eventList = ref<EventItem[]>([]);
const selectedEventIdList = ref<string[]>([]);
const monthRecords = ref<EventRecord[]>([]);
const isCalendarLoading = ref(false);
@@ -31,13 +29,16 @@ watch(monthCursor, async () => {
await loadMonthRecords();
});
watch(() => props.eventList, async () => {
onMounted(async () => {
await loadEvents();
await loadMonthRecords();
});
async function loadEvents(): Promise<void> {
eventList.value = await EventAPI.listValid();
const eventIdList = getEventIdList();
selectedEventIdList.value = selectedEventIdList.value.length ? selectedEventIdList.value.filter(item => eventIdList.includes(item)) : eventIdList;
await loadMonthRecords();
}, {
immediate: true
});
}
async function loadMonthRecords(): Promise<void> {
const requestId = ++calendarRequestId;
@@ -66,7 +67,7 @@ async function loadMonthRecords(): Promise<void> {
}
function getEventIdList(): string[] {
return props.eventList.map(item => item.id).filter((id): id is string => Boolean(id));
return eventList.value.map(item => item.id).filter((id): id is string => Boolean(id));
}
function buildCalendarRecord(record: StoreEventRecordCalendarView): EventRecord {
@@ -14,7 +14,10 @@
</template>
<script setup lang="ts">
import { Time } from "timi-web";
import type { EChartsOption } from "echarts";
import EventAPI from "@/api/EventAPI";
import StoreChartAPI from "@/api/StoreChartAPI";
import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
import type { EventItem } from "@/types/EventItem";
import type { StoreEventRecordDailyStatView } from "@/types/Store";
@@ -22,10 +25,16 @@ import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@
const props = defineProps<{
dateTextList: string[];
eventList: EventItem[];
statMap: Record<string, StoreEventRecordDailyStatView[]>;
}>();
// ---------- 图表数据 ----------
const eventList = ref<EventItem[]>([]);
const statMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
let statRequestId = 0;
// ---------- 图表窗口 ----------
const dateTextList = computed(() => props.dateTextList);
const {
rangeText,
@@ -37,7 +46,7 @@ const {
} = useStoreChartWindow(dateTextList);
const chartOption = computed<EChartsOption>(() => ({
...buildStoreBaseChartOption(visibleDateTextList.value),
series: props.eventList.map(event => ({
series: eventList.value.map(event => ({
name: event.name || "未命名事件",
type: "bar",
stack: "record",
@@ -50,14 +59,82 @@ const chartOption = computed<EChartsOption>(() => ({
const { chartElement } = useStoreChart(chartOption);
watch(() => props.dateTextList, async () => {
await loadDailyStat();
}, {
deep: true
});
onMounted(async () => {
await loadEvents();
await loadDailyStat();
});
async function loadEvents(): Promise<void> {
eventList.value = await EventAPI.listValid();
}
async function loadDailyStat(): Promise<void> {
if (!props.dateTextList.length) {
statMap.value = {};
return;
}
const eventIdList = getEventIdList();
if (!eventIdList.length) {
statMap.value = {};
return;
}
const requestId = ++statRequestId;
const dailyStatList = await StoreChartAPI.eventRecordDailyStat({
beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1])),
eventIdList
});
if (requestId === statRequestId) {
statMap.value = groupRecordDailyStatByEventId(dailyStatList);
}
}
function countRecordByEventAndDate(eventId: string, dateText: string): number {
const dateValue = Number(dateText.replaceAll("-", ""));
return props.statMap[eventId]?.find(item => item.dateValue === dateValue)?.dailyCount || 0;
return statMap.value[eventId]?.find(item => item.dateValue === dateValue)?.dailyCount || 0;
}
function getEventColor(event: EventItem): string | undefined {
return event.color || undefined;
}
function getEventIdList(): string[] {
return eventList.value.map(item => item.id).filter((id): id is string => Boolean(id));
}
function groupRecordDailyStatByEventId(list: StoreEventRecordDailyStatView[]): Record<string, StoreEventRecordDailyStatView[]> {
const map: Record<string, StoreEventRecordDailyStatView[]> = {};
for (const item of list) {
if (!item.eventId) {
continue;
}
if (!map[item.eventId]) {
map[item.eventId] = [];
}
map[item.eventId].push(item);
}
return map;
}
// ---------- 日期 ----------
function getDateStart(dateText: string): Date {
const [year, month, day] = dateText.split("-").map(Number);
return new Date(year, month - 1, day, 0, 0, 0, 0);
}
function getDateEnd(dateText: string): Date {
const [year, month, day] = dateText.split("-").map(Number);
return new Date(year, month - 1, day, 23, 59, 59, 999);
}
</script>
<style scoped lang="less">
@@ -6,17 +6,24 @@
</template>
<script setup lang="ts">
import { Time } from "timi-web";
import type { EChartsOption } from "echarts";
import EventAPI from "@/api/EventAPI";
import StoreChartAPI from "@/api/StoreChartAPI";
import type { EventItem } from "@/types/EventItem";
import type { StoreEventRecordDailyStatView } from "@/types/Store";
import { buildStoreBaseChartOption, useStoreChart } from "@/pages/store/component/useStoreChart";
const props = defineProps<{
dateTextList: string[];
eventList: EventItem[];
statMap: Record<string, StoreEventRecordDailyStatView[]>;
}>();
// ---------- 图表数据 ----------
const eventList = ref<EventItem[]>([]);
const statMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
let statRequestId = 0;
const chartOption = computed<EChartsOption>(() => ({
...buildStoreBaseChartOption(props.dateTextList),
legend: {
@@ -24,7 +31,7 @@ const chartOption = computed<EChartsOption>(() => ({
},
xAxis: {
type: "category",
data: props.eventList.map(item => item.name || "未命名事件"),
data: eventList.value.map(item => item.name || "未命名事件"),
axisTick: {
show: false
},
@@ -35,7 +42,7 @@ const chartOption = computed<EChartsOption>(() => ({
series: [{
name: "登记次数",
type: "bar",
data: props.eventList.map(item => ({
data: eventList.value.map(item => ({
value: countRecordByEvent(item.id || ""),
itemStyle: getEventColor(item) ? {
color: getEventColor(item)
@@ -46,13 +53,81 @@ const chartOption = computed<EChartsOption>(() => ({
const { chartElement } = useStoreChart(chartOption);
watch(() => props.dateTextList, async () => {
await loadDailyStat();
}, {
deep: true
});
onMounted(async () => {
await loadEvents();
await loadDailyStat();
});
async function loadEvents(): Promise<void> {
eventList.value = await EventAPI.listValid();
}
async function loadDailyStat(): Promise<void> {
if (!props.dateTextList.length) {
statMap.value = {};
return;
}
const eventIdList = getEventIdList();
if (!eventIdList.length) {
statMap.value = {};
return;
}
const requestId = ++statRequestId;
const dailyStatList = await StoreChartAPI.eventRecordDailyStat({
beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1])),
eventIdList
});
if (requestId === statRequestId) {
statMap.value = groupRecordDailyStatByEventId(dailyStatList);
}
}
function countRecordByEvent(eventId: string): number {
return (props.statMap[eventId] || []).reduce((sum, item) => sum + (item.dailyCount || 0), 0);
return (statMap.value[eventId] || []).reduce((sum, item) => sum + (item.dailyCount || 0), 0);
}
function getEventColor(event: EventItem): string | undefined {
return event.color || undefined;
}
function getEventIdList(): string[] {
return eventList.value.map(item => item.id).filter((id): id is string => Boolean(id));
}
function groupRecordDailyStatByEventId(list: StoreEventRecordDailyStatView[]): Record<string, StoreEventRecordDailyStatView[]> {
const map: Record<string, StoreEventRecordDailyStatView[]> = {};
for (const item of list) {
if (!item.eventId) {
continue;
}
if (!map[item.eventId]) {
map[item.eventId] = [];
}
map[item.eventId].push(item);
}
return map;
}
// ---------- 日期 ----------
function getDateStart(dateText: string): Date {
const [year, month, day] = dateText.split("-").map(Number);
return new Date(year, month - 1, day, 0, 0, 0, 0);
}
function getDateEnd(dateText: string): Date {
const [year, month, day] = dateText.split("-").map(Number);
return new Date(year, month - 1, day, 23, 59, 59, 999);
}
</script>
<style scoped lang="less">