feat 驾驶舱

src/views/dashboard/analysis/components/CockpitReport.api.ts

@@ -0,0 +1,87 @@
+import { defHttp } from '/@/utils/http/axios'
+import { Result } from '/#/axios'
+
+/**
+ * 支付金额
+ */
+export function getPayAmount(params: CockpitReportQuery) {
+ return defHttp.get<Result<number>>({
+ url: '/report/cockpit//getPayAmount',
+ method: 'post',
+ params: params,
+ })
+}
+/**
+ * 退款金额
+ */
+export function getRefundAmount(params: CockpitReportQuery) {
+ return defHttp.get<Result<number>>({
+ url: '/report/cockpit/getRefundAmount',
+ method: 'post',
+ params: params,
+ })
+}
+/**
+ * 退款金额
+ */
+export function getPayOrderCount(params: CockpitReportQuery) {
+ return defHttp.get<Result<number>>({
+ url: '/report/cockpit/getPayOrderCount',
+ method: 'post',
+ params: params,
+ })
+}
+/**
+ * 退款金额
+ */
+export function getRefundOrderCount(params: CockpitReportQuery) {
+ return defHttp.get<Result<number>>({
+ url: '/report/cockpit/getRefundOrderCount',
+ method: 'post',
+ params: params,
+ })
+}
+/**
+ * 退款金额
+ */
+export function getPayChannelInfo(params: CockpitReportQuery) {
+ return defHttp.get<Result<ChannelLineReport[]>>({
+ url: '/report/cockpit/getPayChannelInfo',
+ method: 'post',
+ params: params,
+ })
+}
+/**
+ * 退款金额
+ */
+export function getRefundChannelInfo(params: CockpitReportQuery) {
+ return defHttp.get<Result<ChannelLineReport[]>>({
+ url: '/report/cockpit/getRefundChannelInfo',
+ method: 'post',
+ params: params,
+ })
+}
+
+/**
+ * 支付通道折线图报表
+ */
+export interface ChannelLineReport {
+ // 支付通道编码
+ channelCode: string
+ // 支付通道名称
+ channelName: string
+ // 订单金额
+ orderAmount: number
+ // 订单数量
+ orderCount: number
+}
+
+/**
+ * 查询条件
+ */
+export interface CockpitReportQuery {
+ // 开始时间
+ startTime: string
+ // 结束时间
+ endTime: string
+}

src/views/dashboard/analysis/components/GrowCard.vue → src/views/dashboard/analysis/components/OrderCount.vue

@@ -1,39 +1,36 @@
 <template>
  <div class="md:flex">
- <template v-for="(item, index) in growCardList" :key="item.title">
+ <template v-for="(item, index) in data" :key="item.title">
  <Card
  size="small"
  :loading="loading"
  :title="item.title"
  class="md:w-1/4 w-full !md:mt-0"
  :class="{ '!md:mr-4': index + 1 < 4, '!mt-4': index > 0 }"
  >
- <template #extra>
- <Tag :color="item.color">{{ item.action }}</Tag>
+ <template v-if="item.action" #extra>
+ <Tag>{{ item.action }}</Tag>
  </template>
-
  <div class="py-4 px-4 flex justify-between items-center">
- <CountTo prefix="$" :startVal="1" :endVal="item.value" class="text-2xl" />
+ <CountTo :startVal="0" :decimals="item.decimals" :endVal="item.value" class="text-2xl" />
  <Icon :icon="item.icon" :size="40" />
  </div>
-
- <div class="p-2 px-4 flex justify-between">
- <span>总{{ item.title }}</span>
- <CountTo prefix="$" :startVal="1" :endVal="item.total" />
- </div>
  </Card>
  </template>
  </div>
 </template>
 <script lang="ts" setup>
- import { CountTo } from '/@/components/CountTo/index'
- import { Icon } from '/@/components/Icon'
+ import { CountTo } from '/@/components/CountTo'
  import { Tag, Card } from 'ant-design-vue'
- import { growCardList } from '../data'
+ import Icon from '/@/components/Icon/src/Icon.vue'
+ import { OrderCountData } from '/@/views/dashboard/analysis/data'
 
  defineProps({
  loading: {
  type: Boolean,
  },
+ data: {
+ type: Array<OrderCountData>,
+ },
  })
 </script>

src/views/dashboard/analysis/components/SalesProductPie.vue

@@ -1,5 +1,5 @@
 <template>
- <Card title="成交占比" :loading="loading">
+ <Card title="退款各通道分布" :loading="loading">
  <div ref="chartRef" :style="{ width, height }"></div>
  </Card>
 </template>

src/views/dashboard/analysis/components/SiteAnalysis.vue

@@ -1,29 +1,28 @@
 <template>
  <Card :tab-list="tabListTitle" v-bind="$attrs" :active-tab-key="activeKey" @tab-change="onTabChange">
- <p v-if="activeKey === 'tab1'">
+ <p v-if="activeKey === 't1'">
  <VisitAnalysis />
  </p>
- <p v-if="activeKey === 'tab2'">
- <VisitAnalysisBar />
+ <p v-if="activeKey === 't2'">
+ <VisitAnalysis />
  </p>
  </Card>
 </template>
 <script lang="ts" setup>
  import { ref } from 'vue'
  import { Card } from 'ant-design-vue'
  import VisitAnalysis from './VisitAnalysis.vue'
- import VisitAnalysisBar from './VisitAnalysisBar.vue'
 
- const activeKey = ref('tab1')
+ const activeKey = ref('t1')
 
  const tabListTitle = [
  {
- key: 'tab1',
- tab: '流量趋势',
+ key: 't1',
+ tab: '支付情况',
  },
  {
- key: 'tab2',
- tab: '访问量',
+ key: 't2',
+ tab: '退款情况',
  },
  ]
 

src/views/dashboard/analysis/components/VisitSource.vue

@@ -1,6 +1,6 @@
 <template>
- <Card title="访问来源" :loading="loading">
- <div ref="chartRef" :style="{ width, height }"></div>
+ <Card title="支付各通道分布" :loading="loading">
+ <div ref="chartRef" :style="{ width: '100%', height: '300px' }"></div>
  </Card>
 </template>
 <script lang="ts" setup>
@@ -9,24 +9,16 @@
  import { useECharts } from '/@/hooks/web/useECharts'
  const props = defineProps({
  loading: Boolean,
- width: {
- type: String as PropType<string>,
- default: '100%',
- },
- height: {
- type: String as PropType<string>,
- default: '300px',
+ data: {
+ type: Array,
  },
  })
  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
 
  watch(
- () => props.loading,
+ () => props.data,
  () => {
- if (props.loading) {
- return
- }
  setOptions({
  tooltip: {
  trigger: 'item',
@@ -37,8 +29,7 @@
  },
  series: [
  {
- color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
- name: '访问来源',
+ name: '支付通道',
  type: 'pie',
  radius: ['40%', '70%'],
  avoidLabelOverlap: false,
@@ -61,12 +52,7 @@
  labelLine: {
  show: false,
  },
- data: [
- { value: 1048, name: '搜索引擎' },
- { value: 735, name: '直接访问' },
- { value: 580, name: '邮件营销' },
- { value: 484, name: '联盟广告' },
- ],
+ data: props.data as any,
  animationType: 'scale',
  animationEasing: 'exponentialInOut',
  animationDelay: function () {

src/views/dashboard/analysis/data.ts

@@ -1,43 +1,10 @@
-export interface GrowCardItem {
- icon: string
+/**
+ * 订单数量信息
+ */
+export interface OrderCountData {
  title: string
- value: number
- total: number
- color: string
  action: string
+ icon: string
+ value: number
+ decimals: number
 }
-
-export const growCardList: GrowCardItem[] = [
- {
- title: '访问数',
- icon: 'visit-count|svg',
- value: 2000,
- total: 120000,
- color: 'green',
- action: '月',
- },
- {
- title: '成交额',
- icon: 'total-sales|svg',
- value: 20000,
- total: 500000,
- color: 'blue',
- action: '月',
- },
- {
- title: '下载数',
- icon: 'download-count|svg',
- value: 8000,
- total: 120000,
- color: 'orange',
- action: '周',
- },
- {
- title: '成交数',
- icon: 'transaction|svg',
- value: 5000,
- total: 50000,
- color: 'purple',
- action: '年',
- },
-]