From 7c78db7e6ebfa1b261e888ff1c83fa9d4e6b0ecc Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Mon, 25 Mar 2024 09:41:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E8=AF=95=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/index.vue                    |  2 +-
 src/views/home/modules/card-data.vue        | 21 ++++-
 src/views/home/modules/card-retry-chart.vue | 85 +++++++++++++++++++++
 src/views/home/modules/header-banner.vue    | 10 +--
 4 files changed, 109 insertions(+), 9 deletions(-)
 create mode 100644 src/views/home/modules/card-retry-chart.vue

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index c82db39..38f7e8e 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -32,7 +32,7 @@ getCardData();
     <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
       <NGi span="24 s:24 m:14">
         <NCard :bordered="false" class="card-wrapper">
-          <LineChart />
+          <LineChart :model-value="cardCount" />
         </NCard>
       </NGi>
       <NGi span="24 s:24 m:10">
diff --git a/src/views/home/modules/card-data.vue b/src/views/home/modules/card-data.vue
index 2b048b5..725f31e 100644
--- a/src/views/home/modules/card-data.vue
+++ b/src/views/home/modules/card-data.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { $t } from '@/locales';
+import DardRetryChart from './card-retry-chart.vue';
 
 defineOptions({
   name: 'CardData'
@@ -181,10 +182,20 @@ function getGradientColor(color: CardData['color']) {
                 {{ item.tip }}
               </NPopover>
             </div>
-            <div class="flex pt-12px">
+            <div class="flex">
               <CountTo :start-value="0" :end-value="item.value" class="text-30px text-white" />
             </div>
-            <NProgress type="line" color="#728bf9" rail-color="#ebebeb" :percentage="30" indicator-text-color="#fff" />
+            <NProgress
+              v-if="item.key === 'jobTask'"
+              class="mb-24px h-20px pt-18px"
+              type="line"
+              color="#728bf9"
+              rail-color="#ebebeb"
+              :percentage="props.modelValue?.jobTask.successRate ?? 0"
+              indicator-text-color="#fff"
+            />
+            <DardRetryChart v-else-if="item.key === 'retryTask'" :model-value="props.modelValue?.retryTaskBarList" />
+            <div v-else class="mb-12px h-32px"></div>
             <NDivider />
             <template v-for="(bottomItem, bottomIndex) in item.bottom" :key="bottomIndex">
               <NDivider v-if="bottomIndex !== 0" vertical />
@@ -200,10 +211,14 @@ function getGradientColor(color: CardData['color']) {
 
 <style scoped>
 .n-divider {
-  margin: 16px 0 6px;
+  margin: 0px 0 6px;
 }
 
 .n-divider--vertical {
   margin: 0 1px 0 5px;
 }
+
+:deep(.n-progress-icon--as-text) {
+  width: 53px !important;
+}
 </style>
diff --git a/src/views/home/modules/card-retry-chart.vue b/src/views/home/modules/card-retry-chart.vue
new file mode 100644
index 0000000..3206d91
--- /dev/null
+++ b/src/views/home/modules/card-retry-chart.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useEcharts } from '@/hooks/chart/use-echarts';
+
+defineOptions({
+  name: 'CardRetryChart'
+});
+
+interface Props {
+  modelValue: Api.Dashboard.RetryTaskBarList[];
+}
+
+const props = defineProps<Props>();
+
+const { domRef, updateOptions } = useEcharts(() => ({
+  tooltip: {
+    trigger: 'axis',
+    appendToBody: true,
+    confine: true,
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    top: '21px',
+    height: '40px',
+    containLabel: true
+  },
+  xAxis: {
+    // @ts-expect-error 忽略EChart
+    axisLine: false,
+    type: 'category',
+    data: [] as string[],
+    axisTick: {
+      alignWithLabel: true
+    }
+  },
+  yAxis: {
+    type: 'value',
+    // @ts-expect-error 忽略EChart
+    axisLine: false,
+    scale: true,
+    show: false
+  },
+  series: [
+    {
+      name: 'Task Count',
+      type: 'bar',
+      barWidth: '60%',
+      data: [] as number[]
+    }
+  ]
+}));
+
+async function mockData() {
+  await new Promise(resolve => {
+    setTimeout(resolve, 500);
+  });
+
+  if (!props.modelValue) {
+    mockData();
+    return;
+  }
+
+  updateOptions(opts => {
+    // @ts-expect-error 忽略EChart
+    opts.xAxis.data = props.modelValue!.map(item => item.x);
+    // @ts-expect-error 忽略EChart
+    opts.series[0].data = props.modelValue!.map(item => item.taskTotal);
+    return opts;
+  });
+}
+
+async function init() {
+  mockData();
+}
+
+// init
+init();
+</script>
+
+<template>
+  <div ref="domRef" class="h-42px overflow-hidden"></div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/home/modules/header-banner.vue b/src/views/home/modules/header-banner.vue
index 27b1f65..d06bd07 100644
--- a/src/views/home/modules/header-banner.vue
+++ b/src/views/home/modules/header-banner.vue
@@ -45,15 +45,15 @@ const timeFix = () => {
     text = 'morning';
   } else if (hour > 8 && hour <= 11) {
     text = 'bth';
-  } else if (hour > 11 && hour <= 14) {
+  } else if (hour > 11 && hour < 14) {
     text = 'noon';
-  } else if (hour > 14 && hour <= 17) {
+  } else if (hour >= 14 && hour < 17) {
     text = 'ath';
-  } else if (hour > 17 && hour <= 19) {
+  } else if (hour >= 17 && hour <= 19) {
     text = 'dusk';
-  } else if (hour > 19 && hour <= 21) {
+  } else if (hour > 19 && hour < 21) {
     text = 'evening';
-  } else if (hour > 21 && hour <= 5) {
+  } else if (hour >= 21 && hour <= 5) {
     text = 'earlyMorning';
   }
   return text;