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

<script lang="ts" setup>
import type { AnalysisOverviewItem, WorkbenchTrendItem } from '@vben/common-ui';

import type { CustomerApi } from '#/api/license/customer';

import { onMounted, ref, shallowRef } from 'vue';

import {
  AnalysisChartCard,
  AnalysisOverviewCard,
  WorkbenchTrends,
} from '@vben/common-ui';

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

import { getLatestCommentList } from '#/api/license/comment';
import { dashboard } from '#/api/license/customer';
import { getLicenseExpiry } from '#/api/license/license';
// import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, getDictObj } from '#/utils';

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 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',
    title: '员工数',
    totalTitle: '总用户量',
    totalValue: data.userCount || 0,
    value: data.userCount || 0,
  };

  const licenses = await getLicenseExpiry();
  trendItems.value = licenses.map((item) => {
    return {
      avatar: '',
      content: `客户【<b>${item.customerName}</b>】项目【<b>${item.projectName}</b>】的License即将在 <b>${dayjs(item.expiryDate).fromNow(true)}</b> 后到期`,
      date: dayjs(item.expiryDate).format('YYYY-MM-DD HH:mm:ss') || '',
      title: item.serialNo || '',
      status: '',
      info: '',
    };
  });

  const comments = await getLatestCommentList();

  projectProgressItems.value = comments.map((item) => {
    // 获取字典对象
    const dict = getDictObj(DICT_TYPE.LIC_PROJECT_STATUS, String(item.status));

    let dataContent = item.content || '';
    if (dataContent) {
      const position = dataContent.indexOf('>') + 1;
      const originalString = dataContent;
      const stringToInsert = `<span style="font-size: 14px; color: #32363973">${item.author}：</span>`;

      dataContent =
        originalString.startsWith('<p>') || originalString.startsWith('<h')
          ? originalString.slice(0, position) +
            stringToInsert +
            originalString.slice(position)
          : stringToInsert + originalString;
    }

    return {
      avatar: '',
      content: dataContent,
      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,
      technicalOwnerA: item.technicalOwnerA,
    };
  });
});
</script>

<template>
  <div class="p-5">
    <!-- <WorkbenchHeader
      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
      :alt="userStore.userInfo?.nickname || '管理员'"
    >
      <template #title>
        早安, {{ userStore.userInfo?.nickname }}, 开始您一天的工作吧！
      </template>
      <template #description> 今日晴，20℃ - 32℃！ </template>
    </WorkbenchHeader> -->

    <!-- <AnalysisOverview :items="overviewItems" /> -->

    <div class="w-full md:flex">
      <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/4"
        title="交付完成率"
      >
        <AnalyticsVisitsData :dashboard-value="dashboardValue" />
      </AnalysisChartCard>
      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/4" title="签单率">
        <AnalyticsVisitsSales :dashboard-value="dashboardValue" />
      </AnalysisChartCard>
    </div>

    <div class="mt-2 flex flex-col lg:flex-row">
      <div class="lg:w mr-4 w-full">
        <WorkbenchTrends
          :items="trendItems"
          class="mt-5"
          title="License即将到期"
        />
      </div>
      <!-- <div class="mr-4 w-full lg:w-1/2">
        <WorkbenchTrendsComment
          :items="projectProgressItems"
          class="mt-5"
          title="项目进展"
        />
      </div> -->
    </div>

    <!-- <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
      <template #trends>
        <AnalyticsTrends />
      </template>
      <template #visits>
        <AnalyticsVisits />
      </template>
    </AnalysisChartsTabs> -->
  </div>
</template>