Blame view

src/views/dashboard/analysis/components/GrowCard.vue 2.39 KB
1
<template>
Vben authored
2
3
4
5
  <div class="md:flex">
    <template v-for="(item, index) in growCardList" :key="item.title">
      <Card
        size="small"
6
        :loading="loading"
Vben authored
7
        :title="item.title"
8
        class="md:w-1/4 w-full !md:mt-0"
sanmu authored
9
        :class="{ '!md:mr-4': index + 1 < 5, '!mt-4': index > 0 }"
Vben authored
10
      >
sanmu authored
11
        <!-- <template #extra>
Vben authored
12
          <Tag :color="item.color">{{ item.action }}</Tag>
sanmu authored
13
        </template> -->
Vben authored
14
15
        <div class="py-4 px-4 flex justify-between items-center">
sanmu authored
16
17
          <CountTo :startVal="1" :endVal="item.value" class="text-2xl" />
          <!-- <Icon :icon="item.icon" :size="40" /> -->
Vben authored
18
19
        </div>
sanmu authored
20
        <!-- <div class="p-2 px-4 flex justify-between">
Vben authored
21
22
          <span>总{{ item.title }}</span>
          <CountTo prefix="$" :startVal="1" :endVal="item.total" />
sanmu authored
23
        </div> -->
Vben authored
24
25
      </Card>
    </template>
26
27
  </div>
</template>
28
<script lang="ts" setup>
Vben authored
29
  import { CountTo } from '/@/components/CountTo/index';
vben authored
30
  import Icon from '@/components/Icon/Icon.vue';
Vben authored
31
32
  import { Tag, Card } from 'ant-design-vue';
  import { growCardList } from '../data';
sanmu authored
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
  import { useDataStoreWithOut } from '/@/store/modules/data';
  import { computed } from 'vue';

  const dataStore = useDataStoreWithOut();

  const growCardList = computed(() => {
    const data = dataStore.getData;
    return [
      {
        title: '订单完成',
        icon: 'visit-count|svg',
        value: data?.orderFinishedCount || 0,
        total: 120000,
        color: 'green',
        action: '月',
      },
      {
        title: '跟单和质检中',
        icon: 'total-sales|svg',
        value: data?.orderInspectingCount || 0,
        total: 500000,
        color: 'blue',
        action: '月',
      },
      {
        title: '利润分析表待审核',
        icon: 'download-count|svg',
        value: data?.orderProfitWaitAuditCount || 0,
        total: 120000,
        color: 'orange',
        action: '周',
      },
      {
        title: '项目报告书待审核',
        icon: 'transaction|svg',
        value: data?.orderReportWaitAuditCount || 0,
        total: 50000,
        color: 'purple',
        action: '年',
      },
      {
        title: '订单初始化',
        icon: 'transaction|svg',
sanmu authored
76
        value: data?.orderCount || 0,
sanmu authored
77
78
79
80
81
82
        total: 50000,
        color: 'purple',
        action: '年',
      },
    ];
  });
83
84
85
86
87
88

  defineProps({
    loading: {
      type: Boolean,
    },
  });
89
</script>