|
@@ -1,14 +1,14 @@
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
|
|
+import { NSpin } from 'naive-ui';
|
|
|
import { Chart, type G2Spec, type Mark, type Composition, type TooltipTitle } from '@antv/g2';
|
|
import { Chart, type G2Spec, type Mark, type Composition, type TooltipTitle } from '@antv/g2';
|
|
|
import { onMounted, watch, ref, computed, onUnmounted } from 'vue'
|
|
import { onMounted, watch, ref, computed, onUnmounted } from 'vue'
|
|
|
|
|
|
|
|
import InfoCard, { type InfoCardData } from './component/infoCard.vue'
|
|
import InfoCard, { type InfoCardData } from './component/infoCard.vue'
|
|
|
|
|
|
|
|
import { usePersonalization } from '@/composable/usePersonalization'
|
|
import { usePersonalization } from '@/composable/usePersonalization'
|
|
|
-import thc from '@/utils/themeColor'
|
|
|
|
|
|
|
|
|
|
|
|
+import { getShutdownStatisticsDate, getShutdownStatistics } from '@/service/dashboard'
|
|
|
import type { ShutdownStatisticsInfo } from '@/service/dashboard/interface'
|
|
import type { ShutdownStatisticsInfo } from '@/service/dashboard/interface'
|
|
|
-import { it } from 'node:test';
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
defineOptions({
|
|
|
name: 'Dashboard',
|
|
name: 'Dashboard',
|
|
@@ -16,8 +16,7 @@ defineOptions({
|
|
|
|
|
|
|
|
const { isDark, color } = usePersonalization()
|
|
const { isDark, color } = usePersonalization()
|
|
|
|
|
|
|
|
-// const cardList = ref(generateCardData())
|
|
|
|
|
-const cardList = computed<InfoCardData>(() => {
|
|
|
|
|
|
|
+const cardList = computed<InfoCardData[]>(() => {
|
|
|
const date = new Date(shutdownStatisticsInfo.value.date);
|
|
const date = new Date(shutdownStatisticsInfo.value.date);
|
|
|
// const year = date.getFullYear();
|
|
// const year = date.getFullYear();
|
|
|
const month = date.getMonth() + 1; // getMonth() 返回 0-11,需要 +1
|
|
const month = date.getMonth() + 1; // getMonth() 返回 0-11,需要 +1
|
|
@@ -55,7 +54,6 @@ const cardList = computed<InfoCardData>(() => {
|
|
|
{
|
|
{
|
|
|
title: `${month}月总数`,
|
|
title: `${month}月总数`,
|
|
|
value: dayTotal.monthCount,
|
|
value: dayTotal.monthCount,
|
|
|
- growth: dayTotal.monthGrowth,
|
|
|
|
|
iconClass: 'i-ph:calendar-dots-bold',
|
|
iconClass: 'i-ph:calendar-dots-bold',
|
|
|
backgroundColor: 'indigo',
|
|
backgroundColor: 'indigo',
|
|
|
precision: 0
|
|
precision: 0
|
|
@@ -71,135 +69,6 @@ const shutdownYearChart = ref<HTMLDivElement | null>(null)
|
|
|
let shutdownYearChartInstance: Chart | null = null
|
|
let shutdownYearChartInstance: Chart | null = null
|
|
|
let shutdownYearChartResizeHandler: (() => void) | null = null
|
|
let shutdownYearChartResizeHandler: (() => void) | null = null
|
|
|
|
|
|
|
|
-// const shutdownYearChart2 = ref<HTMLDivElement | null>(null)
|
|
|
|
|
-// let shutdownYearChart2Instance: Chart | null = null
|
|
|
|
|
-// let shutdownYearChart2ResizeHandler: (() => void) | null = null
|
|
|
|
|
-
|
|
|
|
|
-const CHART_CONFIG = {
|
|
|
|
|
- MONTHS: Array.from({ length: 12 }, (_, i) => `${i + 1}月`),
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-const getBusinessLinesConfig = () => [
|
|
|
|
|
- {
|
|
|
|
|
- name: '主要收入',
|
|
|
|
|
- color: color.value,
|
|
|
|
|
- dataRange: { min: 30000, max: 85000 },
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- name: '核心业务',
|
|
|
|
|
- color: thc.cyan[500],
|
|
|
|
|
- dataRange: { min: 25000, max: 75000 },
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- name: '辅助收入',
|
|
|
|
|
- color: thc.lime[500],
|
|
|
|
|
- dataRange: { min: 15000, max: 50000 },
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- name: '订阅收入',
|
|
|
|
|
- color: thc.orange[500],
|
|
|
|
|
- dataRange: { min: 10000, max: 35000 },
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- name: '广告收入',
|
|
|
|
|
- color: thc.pink[500],
|
|
|
|
|
- dataRange: { min: 8000, max: 25000 },
|
|
|
|
|
- },
|
|
|
|
|
-]
|
|
|
|
|
-
|
|
|
|
|
-const barChartSelectedLegend = ref(getBusinessLinesConfig()[0].name)
|
|
|
|
|
-
|
|
|
|
|
-const generateRandomData = (
|
|
|
|
|
- baseMin: number,
|
|
|
|
|
- baseMax: number,
|
|
|
|
|
- trend: 'up' | 'down' | 'stable' = 'stable',
|
|
|
|
|
-) => {
|
|
|
|
|
- const data = []
|
|
|
|
|
- let currentBase = (baseMin + baseMax) / 2
|
|
|
|
|
-
|
|
|
|
|
- for (let i = 0; i < 12; i++) {
|
|
|
|
|
- if (trend === 'up') {
|
|
|
|
|
- currentBase += (baseMax - baseMin) * 0.03
|
|
|
|
|
- } else if (trend === 'down') {
|
|
|
|
|
- currentBase -= (baseMax - baseMin) * 0.02
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- const baseVariation = (baseMax - baseMin) * 0.6 * (Math.random() - 0.5)
|
|
|
|
|
- const seasonalFactor = Math.sin((i * Math.PI) / 6) * (baseMax - baseMin) * 0.15
|
|
|
|
|
- const randomSpike = Math.random() > 0.8 ? (baseMax - baseMin) * 0.2 * (Math.random() - 0.5) : 0
|
|
|
|
|
-
|
|
|
|
|
- const variation = baseVariation + seasonalFactor + randomSpike
|
|
|
|
|
- const value = Math.max(baseMin * 0.3, Math.min(90000, currentBase + variation))
|
|
|
|
|
- data.push(Math.round(value))
|
|
|
|
|
- }
|
|
|
|
|
- return data
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-const businessLinesWithData = computed(() =>
|
|
|
|
|
- getBusinessLinesConfig().map((line) => ({
|
|
|
|
|
- ...line,
|
|
|
|
|
- data: generateRandomData(line.dataRange.min, line.dataRange.max, 'up'),
|
|
|
|
|
- })),
|
|
|
|
|
-)
|
|
|
|
|
-
|
|
|
|
|
-const createTooltipConfig = (formatter?: any) => ({
|
|
|
|
|
- trigger: 'axis',
|
|
|
|
|
- backgroundColor: isDark.value ? thc.neutral[750] : '#fff',
|
|
|
|
|
- borderWidth: 0,
|
|
|
|
|
- padding: 8,
|
|
|
|
|
- extraCssText: 'box-shadow: none;',
|
|
|
|
|
- textStyle: {
|
|
|
|
|
- color: isDark.value ? thc.neutral[400] : thc.neutral[600],
|
|
|
|
|
- fontSize: 12,
|
|
|
|
|
- },
|
|
|
|
|
- axisPointer: {
|
|
|
|
|
- type: 'none',
|
|
|
|
|
- },
|
|
|
|
|
- ...(formatter && { formatter }),
|
|
|
|
|
-})
|
|
|
|
|
-
|
|
|
|
|
-const chartDataManager = {
|
|
|
|
|
- getMonths: () => CHART_CONFIG.MONTHS,
|
|
|
|
|
-
|
|
|
|
|
- getAllLines: () => businessLinesWithData.value,
|
|
|
|
|
-
|
|
|
|
|
- getLineByName: (name: string) => {
|
|
|
|
|
- return businessLinesWithData.value.find((line) => line.name === name)
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- getAllNames: () => {
|
|
|
|
|
- return businessLinesWithData.value.map((line) => line.name)
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- getAllColors: () => {
|
|
|
|
|
- return businessLinesWithData.value.map((line) => line.color)
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- getHighestRevenueLine: () => {
|
|
|
|
|
- return businessLinesWithData.value.reduce((prev, current) => {
|
|
|
|
|
- const prevTotal = prev.data.reduce((sum, value) => sum + value, 0)
|
|
|
|
|
- const currentTotal = current.data.reduce((sum, value) => sum + value, 0)
|
|
|
|
|
- return prevTotal > currentTotal ? prev : current
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- getLowestRevenueLine: () => {
|
|
|
|
|
- return businessLinesWithData.value.reduce((prev, current) => {
|
|
|
|
|
- const prevTotal = prev.data.reduce((sum, value) => sum + value, 0)
|
|
|
|
|
- const currentTotal = current.data.reduce((sum, value) => sum + value, 0)
|
|
|
|
|
- return prevTotal < currentTotal ? prev : current
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- getCurrentMonthData: (month: number) => {
|
|
|
|
|
- return businessLinesWithData.value.map((line) => ({
|
|
|
|
|
- name: line.name,
|
|
|
|
|
- value: line.data[month],
|
|
|
|
|
- color: line.color,
|
|
|
|
|
- }))
|
|
|
|
|
- },
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
interface ShutdownWeeklyChartData {
|
|
interface ShutdownWeeklyChartData {
|
|
|
type: '总数' | '北美' | '澳洲'
|
|
type: '总数' | '北美' | '澳洲'
|
|
|
date: string
|
|
date: string
|
|
@@ -229,6 +98,7 @@ function initShutdownWeeklyChart() {
|
|
|
chart.options({
|
|
chart.options({
|
|
|
type: 'view',
|
|
type: 'view',
|
|
|
autoFit: true,
|
|
autoFit: true,
|
|
|
|
|
+ theme: { type: isDark.value ? 'dark' : 'light' },
|
|
|
title: {
|
|
title: {
|
|
|
title: "Shutdown周曲线",
|
|
title: "Shutdown周曲线",
|
|
|
align: 'center'
|
|
align: 'center'
|
|
@@ -300,8 +170,8 @@ function initShutdownWeeklyChart() {
|
|
|
chart.render()
|
|
chart.render()
|
|
|
|
|
|
|
|
shutdownWeeklyChartInstance = chart
|
|
shutdownWeeklyChartInstance = chart
|
|
|
- shutdownWeeklyChartResizeHandler = () => chart.resize()
|
|
|
|
|
- window.addEventListener('resize', shutdownWeeklyChartResizeHandler, { passive: true })
|
|
|
|
|
|
|
+ // shutdownWeeklyChartResizeHandler = () => chart.resize()
|
|
|
|
|
+ // window.addEventListener('resize', shutdownWeeklyChartResizeHandler, { passive: true })
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
interface ShutdownYearChartData {
|
|
interface ShutdownYearChartData {
|
|
@@ -326,6 +196,7 @@ function initShutdownYearChart() {
|
|
|
chart.options({
|
|
chart.options({
|
|
|
type: 'interval',
|
|
type: 'interval',
|
|
|
autoFit: true,
|
|
autoFit: true,
|
|
|
|
|
+ theme: { type: isDark.value ? 'dark' : 'light' },
|
|
|
data: {
|
|
data: {
|
|
|
type: 'inline',
|
|
type: 'inline',
|
|
|
value: data,
|
|
value: data,
|
|
@@ -390,7 +261,6 @@ function initShutdownYearChart() {
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-
|
|
|
|
|
// 监听图例点击事件 - 当用户通过图例进行筛选时触发
|
|
// 监听图例点击事件 - 当用户通过图例进行筛选时触发
|
|
|
chart.on('legend:filter', (e) => {
|
|
chart.on('legend:filter', (e) => {
|
|
|
const { nativeEvent, data } = e;
|
|
const { nativeEvent, data } = e;
|
|
@@ -406,147 +276,130 @@ function initShutdownYearChart() {
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
shutdownYearChartInstance = chart
|
|
shutdownYearChartInstance = chart
|
|
|
- shutdownYearChartResizeHandler = () => chart.resize()
|
|
|
|
|
- window.addEventListener('resize', shutdownYearChartResizeHandler, { passive: true })
|
|
|
|
|
|
|
+ // shutdownYearChartResizeHandler = () => chart.resize()
|
|
|
|
|
+ // window.addEventListener('resize', shutdownYearChartResizeHandler, { passive: true })
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// function initShutdownYearChart2() {
|
|
|
|
|
-// if (!shutdownYearChart2.value) return
|
|
|
|
|
-
|
|
|
|
|
-// // 初始化图表实例
|
|
|
|
|
-// const chart = new Chart({
|
|
|
|
|
-// container: shutdownYearChart2.value,
|
|
|
|
|
-// });
|
|
|
|
|
-
|
|
|
|
|
-// shutdownYearChart2Instance = chart
|
|
|
|
|
-// shutdownYearChart2ResizeHandler = () => chart.resize()
|
|
|
|
|
-// window.addEventListener('resize', shutdownYearChart2ResizeHandler, { passive: true })
|
|
|
|
|
-// }
|
|
|
|
|
|
|
+const isInit = ref(true)
|
|
|
|
|
|
|
|
// 模拟数据
|
|
// 模拟数据
|
|
|
const shutdownStatisticsInfo = ref<ShutdownStatisticsInfo>({
|
|
const shutdownStatisticsInfo = ref<ShutdownStatisticsInfo>({
|
|
|
- date: "2025-10-16",
|
|
|
|
|
|
|
+ date: "1970-01-01",
|
|
|
dayTotal: {
|
|
dayTotal: {
|
|
|
- count: 687,
|
|
|
|
|
- growth: 14,
|
|
|
|
|
- weekly: [0, 0, 456, 234, 103, 43, 100],
|
|
|
|
|
|
|
+ count: 0,
|
|
|
|
|
+ growth: 0,
|
|
|
|
|
+ weekly: [0, 0, 0, 0, 0, 0, 0],
|
|
|
|
|
|
|
|
- monthCount: 6800,
|
|
|
|
|
- monthGrowth: 340,
|
|
|
|
|
- year: [0, 0, 0, 0, 0, 0, 0, 5867, 3245, 6780, 3400, 5800],
|
|
|
|
|
|
|
+ monthCount: 0,
|
|
|
|
|
+ year: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
|
},
|
|
},
|
|
|
usTotal: {
|
|
usTotal: {
|
|
|
- count: 580,
|
|
|
|
|
- growth: 32,
|
|
|
|
|
- weekly: [0, 0, 234, 123, 98, 23, 55],
|
|
|
|
|
|
|
+ count: 0,
|
|
|
|
|
+ growth: 0,
|
|
|
|
|
+ weekly: [0, 0, 0, 0, 0, 0, 0],
|
|
|
|
|
|
|
|
- monthCount: 6800,
|
|
|
|
|
- monthGrowth: 340,
|
|
|
|
|
- year: [0, 0, 0, 0, 0, 0, 0, 5867, 3245, 6780, 3400, 5800],
|
|
|
|
|
|
|
+ monthCount: 0,
|
|
|
|
|
+ year: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
|
},
|
|
},
|
|
|
auTotal: {
|
|
auTotal: {
|
|
|
- count: 120,
|
|
|
|
|
- growth: 9,
|
|
|
|
|
- weekly: [0, 0, 44, 21, 5, 12, 36],
|
|
|
|
|
|
|
+ count: 0,
|
|
|
|
|
+ growth: 0,
|
|
|
|
|
+ weekly: [0, 0, 0, 0, 0, 0, 0],
|
|
|
|
|
|
|
|
- monthCount: 6800,
|
|
|
|
|
- monthGrowth: 340,
|
|
|
|
|
- year: [0, 0, 0, 0, 0, 0, 0, 5867, 3245, 6780, 3400, 5800],
|
|
|
|
|
|
|
+ monthCount: 0,
|
|
|
|
|
+ year: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
-onMounted(() => {
|
|
|
|
|
- // TODO 请求数据
|
|
|
|
|
|
|
+onMounted(async () => {
|
|
|
|
|
+ // 请求数据
|
|
|
|
|
+ const latestDate = await getShutdownStatisticsDate()
|
|
|
|
|
+ const info = await getShutdownStatistics(latestDate)
|
|
|
|
|
+ shutdownStatisticsInfo.value = info
|
|
|
|
|
|
|
|
initShutdownWeeklyChart()
|
|
initShutdownWeeklyChart()
|
|
|
initShutdownYearChart()
|
|
initShutdownYearChart()
|
|
|
- // initShutdownYearChart2()
|
|
|
|
|
|
|
+
|
|
|
|
|
+ isInit.value = false
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
onUnmounted(() => {
|
|
|
if (shutdownWeeklyChartInstance) {
|
|
if (shutdownWeeklyChartInstance) {
|
|
|
- if (shutdownWeeklyChartResizeHandler) {
|
|
|
|
|
- window.removeEventListener('resize', shutdownWeeklyChartResizeHandler)
|
|
|
|
|
- shutdownWeeklyChartResizeHandler = null
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // if (shutdownWeeklyChartResizeHandler) {
|
|
|
|
|
+ // window.removeEventListener('resize', shutdownWeeklyChartResizeHandler)
|
|
|
|
|
+ // shutdownWeeklyChartResizeHandler = null
|
|
|
|
|
+ // }
|
|
|
shutdownWeeklyChartInstance.destroy()
|
|
shutdownWeeklyChartInstance.destroy()
|
|
|
shutdownWeeklyChartInstance = null
|
|
shutdownWeeklyChartInstance = null
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
if (shutdownYearChartInstance) {
|
|
if (shutdownYearChartInstance) {
|
|
|
- if (shutdownYearChartResizeHandler) {
|
|
|
|
|
- window.removeEventListener('resize', shutdownYearChartResizeHandler)
|
|
|
|
|
- shutdownYearChartResizeHandler = null
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // if (shutdownYearChartResizeHandler) {
|
|
|
|
|
+ // window.removeEventListener('resize', shutdownYearChartResizeHandler)
|
|
|
|
|
+ // shutdownYearChartResizeHandler = null
|
|
|
|
|
+ // }
|
|
|
shutdownYearChartInstance.destroy()
|
|
shutdownYearChartInstance.destroy()
|
|
|
shutdownYearChartInstance = null
|
|
shutdownYearChartInstance = null
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- // if (shutdownYearChart2Instance) {
|
|
|
|
|
- // if (shutdownYearChart2ResizeHandler) {
|
|
|
|
|
- // window.removeEventListener('resize', shutdownYearChart2ResizeHandler)
|
|
|
|
|
- // shutdownYearChart2ResizeHandler = null
|
|
|
|
|
- // }
|
|
|
|
|
- // shutdownYearChart2Instance.destroy()
|
|
|
|
|
- // shutdownYearChart2Instance = null
|
|
|
|
|
- // }
|
|
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
-watch([isDark, color], () => {
|
|
|
|
|
|
|
+watch(isDark, (newVal) => {
|
|
|
if (shutdownWeeklyChartInstance) {
|
|
if (shutdownWeeklyChartInstance) {
|
|
|
- if (shutdownWeeklyChartResizeHandler) {
|
|
|
|
|
- window.removeEventListener('resize', shutdownWeeklyChartResizeHandler)
|
|
|
|
|
- shutdownWeeklyChartResizeHandler = null
|
|
|
|
|
- }
|
|
|
|
|
- shutdownWeeklyChartInstance.destroy()
|
|
|
|
|
- shutdownWeeklyChartInstance = null
|
|
|
|
|
|
|
+ shutdownWeeklyChartInstance.theme({ type: newVal ? 'dark' : 'light' })
|
|
|
|
|
+ shutdownWeeklyChartInstance.render()
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
if (shutdownYearChartInstance) {
|
|
if (shutdownYearChartInstance) {
|
|
|
- if (shutdownYearChartResizeHandler) {
|
|
|
|
|
- window.removeEventListener('resize', shutdownYearChartResizeHandler)
|
|
|
|
|
- shutdownYearChartResizeHandler = null
|
|
|
|
|
- }
|
|
|
|
|
- shutdownYearChartInstance.destroy()
|
|
|
|
|
- shutdownYearChartInstance = null
|
|
|
|
|
|
|
+ shutdownYearChartInstance.theme({ type: newVal ? 'dark' : 'light' })
|
|
|
|
|
+ shutdownYearChartInstance.render()
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- // if (shutdownYearChart2Instance) {
|
|
|
|
|
- // if (shutdownYearChart2ResizeHandler) {
|
|
|
|
|
- // window.removeEventListener('resize', shutdownYearChart2ResizeHandler)
|
|
|
|
|
- // shutdownYearChart2ResizeHandler = null
|
|
|
|
|
- // }
|
|
|
|
|
- // shutdownYearChart2Instance.destroy()
|
|
|
|
|
- // shutdownYearChart2Instance = null
|
|
|
|
|
- // }
|
|
|
|
|
-
|
|
|
|
|
- initShutdownWeeklyChart()
|
|
|
|
|
- initShutdownYearChart()
|
|
|
|
|
- // initShutdownYearChart2()
|
|
|
|
|
})
|
|
})
|
|
|
|
|
+
|
|
|
|
|
+// watch([isDark, color], () => {
|
|
|
|
|
+// if (shutdownWeeklyChartInstance) {
|
|
|
|
|
+// if (shutdownWeeklyChartResizeHandler) {
|
|
|
|
|
+// window.removeEventListener('resize', shutdownWeeklyChartResizeHandler)
|
|
|
|
|
+// shutdownWeeklyChartResizeHandler = null
|
|
|
|
|
+// }
|
|
|
|
|
+// shutdownWeeklyChartInstance.destroy()
|
|
|
|
|
+// shutdownWeeklyChartInstance = null
|
|
|
|
|
+// }
|
|
|
|
|
+
|
|
|
|
|
+// if (shutdownYearChartInstance) {
|
|
|
|
|
+// if (shutdownYearChartResizeHandler) {
|
|
|
|
|
+// window.removeEventListener('resize', shutdownYearChartResizeHandler)
|
|
|
|
|
+// shutdownYearChartResizeHandler = null
|
|
|
|
|
+// }
|
|
|
|
|
+// shutdownYearChartInstance.destroy()
|
|
|
|
|
+// shutdownYearChartInstance = null
|
|
|
|
|
+// }
|
|
|
|
|
+
|
|
|
|
|
+// initShutdownWeeklyChart()
|
|
|
|
|
+// initShutdownYearChart()
|
|
|
|
|
+// })
|
|
|
</script>
|
|
</script>
|
|
|
<template>
|
|
<template>
|
|
|
- <div class="space-y-4 p-4">
|
|
|
|
|
- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
|
|
|
- <InfoCard v-for="item in cardList" :key="item.title" :data="item" />
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <NSpin :show="isInit">
|
|
|
|
|
+ <div class="space-y-4 p-4">
|
|
|
|
|
+ <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
|
|
|
+ <InfoCard v-for="item in cardList" :key="item.title" :data="item" />
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- <div class="grid grid-cols-1 gap-4 overflow-hidden lg:grid-cols-12">
|
|
|
|
|
- <div class="col-span-1 lg:col-span-8">
|
|
|
|
|
- <div
|
|
|
|
|
- class="rounded bg-[var(--card-color)] px-5 pt-5 pb-4.5 shadow-xs transition-background-color-300 transition-ease-in-out"
|
|
|
|
|
- style="height: 400px">
|
|
|
|
|
- <div ref="shutdownWeeklyChart" class="h-full" />
|
|
|
|
|
|
|
+ <div class="grid grid-cols-1 gap-4 overflow-hidden lg:grid-cols-12">
|
|
|
|
|
+ <div class="col-span-1 lg:col-span-8">
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="rounded bg-[var(--card-color)] px-5 pt-5 pb-4.5 shadow-xs transition-background-color-300 transition-ease-in-out"
|
|
|
|
|
+ style="height: 400px">
|
|
|
|
|
+ <div ref="shutdownWeeklyChart" class="h-full" />
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
- <div class="col-span-1 lg:col-span-4">
|
|
|
|
|
- <div
|
|
|
|
|
- class="flex flex-col rounded bg-[var(--card-color)] px-5 pt-5 pb-4.5 shadow-xs transition-[background-color]-300 transition-ease-in-out"
|
|
|
|
|
- style="height: 400px">
|
|
|
|
|
- <div ref="shutdownYearChart" class="flex-1" />
|
|
|
|
|
- <!-- <div ref="shutdownYearChart2" style="height: 150px" /> -->
|
|
|
|
|
|
|
+ <div class="col-span-1 lg:col-span-4">
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="flex flex-col rounded bg-[var(--card-color)] px-5 pt-5 pb-4.5 shadow-xs transition-[background-color]-300 transition-ease-in-out"
|
|
|
|
|
+ style="height: 400px">
|
|
|
|
|
+ <div ref="shutdownYearChart" class="flex-1" />
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </NSpin>
|
|
|
</template>
|
|
</template>
|