feat: 调整首页图表
This commit is contained in:
@@ -5,7 +5,11 @@ import type { CustomerApi } from '#/api/license/customer';
|
||||
|
||||
import { onMounted, ref, shallowRef } from 'vue';
|
||||
|
||||
import { AnalysisChartCard, WorkbenchTrends } from '@vben/common-ui';
|
||||
import {
|
||||
AnalysisChartCard,
|
||||
AnalysisOverviewCard,
|
||||
WorkbenchTrends,
|
||||
} from '@vben/common-ui';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
@@ -16,11 +20,11 @@ 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';
|
||||
import AnalyticsVisitsData from './analytics-visits-lic.vue';
|
||||
import AnalyticsVisitsSource from './analytics-visits-pie.vue';
|
||||
import AnalyticsVisitsSales from './analytics-visits-sign.vue';
|
||||
|
||||
const overviewItems = shallowRef<AnalysisOverviewItem[]>([]);
|
||||
const overviewItems = shallowRef<AnalysisOverviewItem>();
|
||||
const trendItems = shallowRef<WorkbenchTrendItem[]>([]);
|
||||
const projectProgressItems = shallowRef<WorkbenchTrendItem[]>([]);
|
||||
dayjs.extend(relativeTime);
|
||||
@@ -32,50 +36,13 @@ onMounted(async () => {
|
||||
|
||||
dashboardValue.value = data;
|
||||
|
||||
overviewItems.value = [
|
||||
{
|
||||
icon: 'icon-[streamline-plump-color--user-pin-flat] size-8 flex-shrink-0',
|
||||
title: '员工总数',
|
||||
totalTitle: '总用户量',
|
||||
totalValue: data.userCount || 0,
|
||||
value: data.userCount || 0,
|
||||
},
|
||||
{
|
||||
icon: 'icon-[streamline-color--key-flat] size-8 flex-shrink-0',
|
||||
title: '授权License数',
|
||||
totalTitle: '总License量',
|
||||
totalValue: data?.licenseCount || 0,
|
||||
value: data?.licenseCount || 0,
|
||||
},
|
||||
{
|
||||
icon: 'icon-[streamline-sharp-color--laptop-project-screen-flat] size-8 flex-shrink-0',
|
||||
title: '项目总数',
|
||||
totalTitle: '总项目量',
|
||||
totalValue: data?.projectCount || 0,
|
||||
value: data?.projectCount || 0,
|
||||
},
|
||||
{
|
||||
icon: 'icon-[material-icon-theme--folder-contract-open] size-8 flex-shrink-0',
|
||||
title: '已签合同数',
|
||||
totalTitle: '总合同量',
|
||||
totalValue: data?.contractCount || 0,
|
||||
value: data?.contractCount || 0,
|
||||
},
|
||||
{
|
||||
icon: 'icon-[streamline-color--information-desk-customer] size-8 flex-shrink-0',
|
||||
title: '客户总数',
|
||||
totalTitle: '总客户量',
|
||||
totalValue: data?.customerCount || 0,
|
||||
value: data?.customerCount || 0,
|
||||
},
|
||||
{
|
||||
icon: 'icon-[streamline-plump-color--fill-and-sign-flat] size-8 flex-shrink-0',
|
||||
title: '签单率',
|
||||
totalTitle: '总签单率',
|
||||
totalValue: data?.signingRate || 0,
|
||||
value: data?.signingRate || 0,
|
||||
},
|
||||
];
|
||||
overviewItems.value = {
|
||||
icon: 'icon-[streamline-plump-color--user-pin-flat] size-9 flex-shrink-0',
|
||||
title: '员工数',
|
||||
totalTitle: '总用户量',
|
||||
totalValue: data.userCount || 0,
|
||||
value: data.userCount || 0,
|
||||
};
|
||||
|
||||
const licenses = await getLicenseExpiry();
|
||||
trendItems.value = licenses.map((item) => {
|
||||
@@ -140,14 +107,24 @@ onMounted(async () => {
|
||||
<!-- <AnalysisOverview :items="overviewItems" /> -->
|
||||
|
||||
<div class="w-full md:flex">
|
||||
<AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="概览">
|
||||
<AnalysisOverviewCard
|
||||
:item="overviewItems"
|
||||
class="mt-5 md:mr-4 md:mt-0 md:w-1/4"
|
||||
/>
|
||||
<AnalysisChartCard
|
||||
class="mt-5 md:mr-4 md:mt-0 md:w-1/4"
|
||||
title="项目与客户数"
|
||||
>
|
||||
<AnalyticsVisitsSource :dashboard-value="dashboardValue" />
|
||||
</AnalysisChartCard>
|
||||
<AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="完成度">
|
||||
<AnalysisChartCard
|
||||
class="mt-5 md:mr-4 md:mt-0 md:w-1/4"
|
||||
title="交付完成率"
|
||||
>
|
||||
<AnalyticsVisitsData :dashboard-value="dashboardValue" />
|
||||
</AnalysisChartCard>
|
||||
<AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="签单率">
|
||||
<AnalyticsVisitsSales :signing-rate="dashboardValue.signingRate" />
|
||||
<AnalysisChartCard class="mt-5 md:mt-0 md:w-1/4" title="签单率">
|
||||
<AnalyticsVisitsSales :dashboard-value="dashboardValue" />
|
||||
</AnalysisChartCard>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user