feat: 首页改成图表展示

apps/web-antd/src/views/dashboard/index.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import type { AnalysisOverviewItem, WorkbenchTrendItem } from '@vben/common-ui';
 
-import { onMounted, shallowRef } from 'vue';
+import type { CustomerApi } from '#/api/license/customer';
 
-import { AnalysisOverview, WorkbenchTrends } from '@vben/common-ui';
+import { onMounted, ref, shallowRef } from 'vue';
+
+import { AnalysisChartCard, WorkbenchTrends } from '@vben/common-ui';
 
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -14,14 +16,22 @@ import { getLicenseExpiry } from '#/api/license/license';
 // import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictObj } from '#/utils';
 
+import AnalyticsVisitsData from './analytics-visits-data.vue';
+import AnalyticsVisitsSales from './analytics-visits-sales.vue';
+import AnalyticsVisitsSource from './analytics-visits-source.vue';
+
 const overviewItems = shallowRef<AnalysisOverviewItem[]>([]);
 const trendItems = shallowRef<WorkbenchTrendItem[]>([]);
 const projectProgressItems = shallowRef<WorkbenchTrendItem[]>([]);
 dayjs.extend(relativeTime);
 
+const dashboardValue = ref<CustomerApi.Dashboard>({} as CustomerApi.Dashboard);
+
 onMounted(async () => {
   const data = await dashboard();
 
+  dashboardValue.value = data;
+
   overviewItems.value = [
     {
       icon: 'icon-[streamline-plump-color--user-pin-flat] size-8 flex-shrink-0',
@@ -105,6 +115,7 @@ onMounted(async () => {
       date: dayjs(item.updateTime).format('YYYY-MM-DD HH:mm:ss') || '',
       title: `${item.projectName ?? ''} `,
       status: dict,
+      info: '',
       customerName: item.customerName,
       serialNo: item.serialNo,
       businessOwner: item.businessOwner,
@@ -126,7 +137,19 @@ onMounted(async () => {
       <template #description> 今日晴，20℃ - 32℃！ </template>
     </WorkbenchHeader> -->
 
-    <AnalysisOverview :items="overviewItems" />
+    <!-- <AnalysisOverview :items="overviewItems" /> -->
+
+    <div class="w-full md:flex">
+      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="签单率">
+        <AnalyticsVisitsSales :signing-rate="dashboardValue.signingRate" />
+      </AnalysisChartCard>
+      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="完成度">
+        <AnalyticsVisitsData :dashboard-value="dashboardValue" />
+      </AnalysisChartCard>
+      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="概览">
+        <AnalyticsVisitsSource :dashboard-value="dashboardValue" />
+      </AnalysisChartCard>
+    </div>
 
     <div class="mt-2 flex flex-col lg:flex-row">
       <div class="lg:w mr-4 w-full">
@@ -153,17 +176,5 @@ onMounted(async () => {
         <AnalyticsVisits />
       </template>
     </AnalysisChartsTabs> -->
-
-    <!-- <div class="mt-5 w-full md:flex">
-      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问数量">
-        <AnalyticsVisitsData />
-      </AnalysisChartCard>
-      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问来源">
-        <AnalyticsVisitsSource />
-      </AnalysisChartCard>
-      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
-        <AnalyticsVisitsSales />
-      </AnalysisChartCard>
-    </div> -->
   </div>
 </template>