Merge pull request #2 from xxm1995/dev

2.0.4

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/OrderAmount.vue

@@ -0,0 +1,52 @@
+<template>
+ <Card :tab-list="tabListTitle" v-bind="$attrs" :active-tab-key="activeKey" @tab-change="onTabChange">
+ <p v-if="activeKey === 't1'">
+ <OrderAmountLine :head="payHead" :data="payAmount" :max="payMax" />
+ </p>
+ <p v-if="activeKey === 't2'">
+ <OrderAmountLine :head="refundHead" :data="refundAmount" :max="refundMax" />
+ </p>
+ </Card>
+</template>
+<script lang="ts" setup>
+ import { computed, ref } from 'vue'
+ import { Card } from 'ant-design-vue'
+ import OrderAmountLine from './OrderAmountLine.vue'
+
+ const activeKey = ref('t1')
+ const tabListTitle = [
+ {
+ key: 't1',
+ tab: '支付金额',
+ },
+ {
+ key: 't2',
+ tab: '退款金额',
+ },
+ ]
+
+ const prop = defineProps({
+ payOrder: {
+ type: Array<object>,
+ },
+ refundOrder: {
+ type: Array<object>,
+ },
+ })
+
+ // 表头
+ const payHead = computed(() => (prop.payOrder as any).map((o) => o.name))
+ const refundHead = computed(() => (prop.refundOrder as any).map((o) => o.name))
+
+ // 订单金额
+ const payAmount = computed(() => (prop.payOrder as any).map((o) => o.value))
+ const refundAmount = computed(() => (prop.refundOrder as any).map((o) => o.value))
+
+ // 最大值
+ const payMax = computed(() => Math.max(...(prop.payOrder as any).map((o) => o.value)))
+ const refundMax = computed(() => Math.max(...(prop.refundOrder as any).map((o) => o.value)))
+
+ function onTabChange(key) {
+ activeKey.value = key
+ }
+</script>

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

@@ -0,0 +1,87 @@
+<template>
+ <div ref="chartRef" :style="{ height: '280px', width: '95%' }"></div>
+</template>
+<script lang="ts" setup>
+ import { ref, Ref, watch } from 'vue'
+ import { useECharts } from '/@/hooks/web/useECharts'
+
+ const chartRef = ref<HTMLDivElement | null>(null)
+ const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+ const prop = defineProps({
+ max: {
+ type: Number,
+ default: 100,
+ },
+ head: {
+ type: Array,
+ default: () => [],
+ },
+ data: {
+ type: Array,
+ default: () => [],
+ },
+ })
+
+ watch(
+ () => prop.data,
+ () => {
+ setOptions({
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ lineStyle: {
+ width: 1,
+ color: '#019680',
+ },
+ },
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['', ...prop.head, ''] as any,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ width: 1,
+ type: 'solid',
+ color: 'rgba(226,226,226,0.5)',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ yAxis: [
+ {
+ type: 'value',
+ max: prop.max,
+ splitNumber: 4,
+ axisTick: {
+ show: false,
+ },
+ splitArea: {
+ show: true,
+ areaStyle: {
+ color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
+ },
+ },
+ },
+ ],
+ grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
+ series: [
+ {
+ smooth: true,
+ data: [0, ...prop.data, 0] as any,
+ type: 'line',
+ areaStyle: {},
+ itemStyle: {
+ color: '#5ab1ef',
+ },
+ },
+ ],
+ })
+ },
+ { immediate: true },
+ )
+</script>

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/VisitSource.vue → src/views/dashboard/analysis/components/PayOrderCount.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/components/SalesProductPie.vue → src/views/dashboard/analysis/components/RefundOrderCount.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>
@@ -10,25 +10,17 @@
 
  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',
@@ -40,15 +32,7 @@
  type: 'pie',
  radius: '80%',
  center: ['50%', '50%'],
- color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
- data: [
- { value: 500, name: '电子产品' },
- { value: 310, name: '服装' },
- { value: 274, name: '化妆品' },
- { value: 400, name: '家居' },
- ].sort(function (a, b) {
- return a.value - b.value
- }),
+ data: props.data as any,
  roseType: 'radius',
  animationType: 'scale',
  animationEasing: 'exponentialInOut',