feat：添加接口

095d7726 · linjinhong · wusiyi · 2404ddaf · 095d7726 · 095d7726
Commit 095d7726 authored Dec 11, 2025 by linjinhong Committed by wusiyi Dec 18, 2025
Hide whitespace changes
Inline Side-by-side

Showing with 153 additions and 62 deletions

src/api/statistic.ts
+16 -4

src/types/api/statistic.ts
+40 -30

src/views/Dashboard.vue
+97 -28

No files found.
--- a/src/api/statistic.ts
+++ b/src/api/statistic.ts
 import axios from './axios'
 import { BaseRespData } from '@/types/api'
-import { statisticData } from '@/types/api/statistic'
+import { statisticData, trendType } from '@/types/api/statistic'
+//1、核心数据看板
 export function getStatisticData() {
-  return axios.get<never, BaseRespData<statisticData>>('factory/overview/statistic')
+  return axios.get<never, BaseRespData<statisticData>>(
-}
+    'factory/overview/statistic',
\ No newline at end of file
+  )
+}
+//2、趋势图（订单趋势+24/48发货率图+超时发货率图）
+export function trendApi(params: {
+  timeUnit: string | number
+  trendType: string
+}) {
+  return axios.post<never, BaseRespData<trendType[]>>(
+    '/factory/overview/trend',
+    params,
+  )
+}
--- a/src/types/api/statistic.ts
+++ b/src/types/api/statistic.ts
 export interface statisticData {
-  todayNewOrderNum: number,
+  todayNewOrderNum: number
-  todayNewProductNum: number,
+  todayNewProductNum: number
-  todayConfirmOrderNum: number,
+  todayConfirmOrderNum: number
-  todayConfirmProductNum: number,
+  todayConfirmProductNum: number
-  notShipmentOrderNum: number,
+  notShipmentOrderNum: number
-  overTimeNotShipmentOrderNum: number,
+  overTimeNotShipmentOrderNum: number
-  yesterdayShipmentOrderNum: number,
+  yesterdayShipmentOrderNum: number
-  beforeYesterdayShipmentOrderNum: number,
+  beforeYesterdayShipmentOrderNum: number
-  compareYesterdayShipmentOrderNum: number,
+  compareYesterdayShipmentOrderNum: number
-  shipmentRateOf24Hour: number,
+  shipmentRateOf24Hour: number
-  compareLastDayShipmentRateOf24Hour: number,
+  compareLastDayShipmentRateOf24Hour: number
-  shipmentRateOf48Hour: number,
+  shipmentRateOf48Hour: number
-  compareLastDayShipmentRateOf48Hour: number,
+  compareLastDayShipmentRateOf48Hour: number
-  overTimeShipmentRate: number,
+  overTimeShipmentRate: number
-  compareLastDayOverTimeShipmentRate: number,
+  compareLastDayOverTimeShipmentRate: number
-  waitCreateLogisticOrderNum: number,
+  waitCreateLogisticOrderNum: number
-  waitArrangeOrderNum: number,
+  waitArrangeOrderNum: number
-  producingOrderNum: number,
+  producingOrderNum: number
-  waitShipmentNum: number,
+  waitShipmentNum: number
-  blockApplyOrderNum: number,
+  blockApplyOrderNum: number
-  exceptionOrderNum: number,
+  exceptionOrderNum: number
-  outOfStockOrderNum: number,
+  outOfStockOrderNum: number
-  outOfStock24HourOrderNum: number,
+  outOfStock24HourOrderNum: number
-  outOfStock48HourOrderNum: number,
+  outOfStock48HourOrderNum: number
-  outOfStockOver48HourOrderNum: number,
+  outOfStockOver48HourOrderNum: number
-  outOfStockSkuNum: number,
+  outOfStockSkuNum: number
-  outOfStockProductNum: number,
+  outOfStockProductNum: number
-  yesterdayOverTimeShipmentOrderNum: number,
+  yesterdayOverTimeShipmentOrderNum: number
 }
\ No newline at end of file
+export interface trendType {
+  confirmNum: number // 接单数
+  producedNum: number // 生产数
+  shipmentNum: number // 发货数
+  shipmentRateOf24Hour: number // 24小时发货率
+  shipmentRateOf48Hour: number // 48小时发货率
+  overtimeShipmentRate: number // 超48小时发货率
+  overtimeShipmentOrderNum: number // 超时发货单数
+  startTime: string // 周期开始时间
+  endTime: string // 周期结束时间
+}
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -479,7 +479,12 @@
      </div>
    </div>
    <div class="chart-wrapper" style="width: 100%">
-      <el-radio-group v-model="chartTimes1" size="small" class="chart-controls">
+      <el-radio-group
+        v-model="chartTimes1"
+        size="small"
+        class="chart-controls"
+        @change="(v:string) => getchartTimes(v, 'ORDER_TREND')"
+      >
        <el-radio-button
          v-for="time in timeOptions"
          :key="time.type"
@@ -495,6 +500,7 @@
        <el-radio-group
          v-model="chartTimes2"
          size="small"
+          @change="(v:string) => getchartTimes(v, 'SHIPMENT_TREND')"
          class="chart-controls"
        >
          <el-radio-button
@@ -512,6 +518,7 @@
          v-model="chartTimes3"
          size="small"
          class="chart-controls"
+          @change="(v:string) => getchartTimes(v, 'OVERTIME_SHIPMENT_TREND')"
        >
          <el-radio-button
            v-for="time in timeOptions"
@@ -529,6 +536,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import * as echarts from 'echarts/core'
 import {
  TitleComponent,
  GridComponent,
@@ -537,9 +545,10 @@ import {
 import { LineChart } from 'echarts/charts'
 import { UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
-import { getStatisticData } from '@/api/statistic'
+import { getStatisticData, trendApi } from '@/api/statistic'
 import type { statisticData as StatisticData } from '@/types/api/statistic'
+import { TooltipComponent } from 'echarts/components'
+echarts.use([TooltipComponent])
 echarts.use([
  TitleComponent,
  GridComponent,
@@ -552,21 +561,67 @@ echarts.use([
 // 获取统计数据
 const statisticData = ref<StatisticData | null>(null)
 const getStatisticDataApi = async () => {
-  const res = await getStatisticData()
+  const [statisticRes, orderRes, shipmentRes, overTimeRes] =
-  if (res.code === 200) {
+    await Promise.allSettled([
-    statisticData.value = res.data
+      getStatisticData(),
+      trendApi({
+        timeUnit: 0,
+        trendType: 'ORDER_TREND',
+      }),
+      trendApi({
+        timeUnit: 0,
+        trendType: 'SHIPMENT_TREND',
+      }),
+      trendApi({
+        timeUnit: 0,
+        trendType: 'OVERTIME_SHIPMENT_TREND',
+      }),
+    ])
+  if (statisticRes.status === 'fulfilled') {
+    const res = statisticRes.value
+    if (res.code === 200) {
+      statisticData.value = res.data
+    }
+  }
+  if (orderRes.status === 'fulfilled') {
+    const res = orderRes.value
+    if (res.code === 200) {
+      const confirmNums = res.data.map((el) => el.confirmNum)
+      const producedNums = res.data.map((el) => el.producedNum)
+      const shipmentNums = res.data.map((el) => el.shipmentNum)
+      chartConfig1.value.series[0].data = confirmNums
+      chartConfig1.value.series[1].data = producedNums
+      chartConfig1.value.series[2].data = shipmentNums
+    }
+  }
+  if (shipmentRes.status === 'fulfilled') {
+    const res = shipmentRes.value
+    if (res.code === 200) {
+      const producedNums = res.data.map((el) => el.producedNum)
+      const shipmentNums = res.data.map((el) => el.shipmentNum)
+      chartConfig2.value.series[0].data = producedNums
+      chartConfig2.value.series[1].data = shipmentNums
+    }
+  }
+  if (overTimeRes.status === 'fulfilled') {
+    const res = overTimeRes.value
+    if (res.code === 200) {
+      const producedNums = res.data.map((el) => el.producedNum)
+      chartConfig2.value.series[0].data = producedNums
+    }
  }
+  // const res = await getStatisticData()
 }
 const timeOptions = ref<{ type: string; name: string }[]>([
-  { type: 'day', name: '日数据' },
+  { type: '0', name: '日数据' },
-  { type: 'moon', name: '月数据' },
+  { type: '1', name: '月数据' },
-  { type: 'year', name: '年数据' },
+  { type: '2', name: '年数据' },
 ])
-const chartTimes1 = ref<string>('day')
+const chartTimes1 = ref<string>('0')
-const chartTimes2 = ref<string>('day')
+const chartTimes2 = ref<string>('0')
-const chartTimes3 = ref<string>('day')
+const chartTimes3 = ref<string>('0')
 // 图表容器引用
 const orderChart1 = ref<HTMLDivElement | null>(null)
@@ -577,65 +632,67 @@ const orderChart3 = ref<HTMLDivElement | null>(null)
 const chartInstances: (echarts.ECharts | null)[] = [null, null, null]
 // 图表配置
-const chartConfig1 = {
+const chartConfig1 = ref({
  title: '订单趋势统计（单）',
  legend: ['接单数', '生产数', '发货数'],
  xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  series: [
    {
      name: '接单数',
-      data: [220, 182, 191, 234, 290, 330, 310],
+      data: [0],
      color: '#6495ED',
    },
    {
      name: '生产数',
-      data: [120, 132, 101, 134, 90, 230, 210],
+      data: [0],
      color: '#9370DB',
    },
    {
      name: '发货数',
-      data: [150, 232, 201, 154, 190, 330, 410],
+      data: [0],
      color: '#48D1CC',
    },
  ],
-}
+})
-const chartConfig2 = {
+const chartConfig2 = ref({
  title: '订单发货效率',
  legend: ['生产数', '发货数'],
  xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  series: [
    {
      name: '生产数',
-      data: [85, 88, 90, 87, 92, 89, 91],
+      data: [0],
      color: '#4ECDC4',
    },
    {
      name: '发货数',
-      data: [95, 96, 98, 97, 99, 98, 99],
+      data: [0],
      color: '#95E1D3',
    },
  ],
-}
+})
-const chartConfig3 = {
+const chartConfig3 = ref({
  title: '订单生产效率',
  legend: ['发货超时率'],
  xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  series: [
    {
      name: '发货超时率',
-      data: [100, 100, 100, 100, 100, 100, 100],
+      data: [0],
      color: '#AA96DA',
    },
  ],
-}
+})
 // 创建图表配置的函数
 const createChartOption = (config: typeof chartConfig1) => {
+  console.log(677, config.value)
+  const data = config.value
  return {
    title: {
-      text: config.title,
+      text: data.title,
      left: 'left',
    },
    tooltip: {
@@ -651,7 +708,7 @@ const createChartOption = (config: typeof chartConfig1) => {
      },
    },
    legend: {
-      data: config.legend,
+      data: data.legend,
      top: 'top',
      left: 'center',
    },
@@ -664,12 +721,12 @@ const createChartOption = (config: typeof chartConfig1) => {
    xAxis: {
      type: 'category',
      boundaryGap: false,
-      data: config.xAxisData,
+      data: data.xAxisData,
    },
    yAxis: {
      type: 'value',
    },
-    series: config.series.map((item) => ({
+    series: data.series.map((item) => ({
      name: item.name,
      type: 'line',
      stack: 'Total',
@@ -734,6 +791,18 @@ const handleResize = () => {
  })
 }
+const getchartTimes = async (v: string, type: string) => {
+  try {
+    const { data } = await trendApi({
+      timeUnit: v,
+      trendType: type,
+    })
+    console.log(data)
+  } catch (error) {
+    console.log(error)
+  }
+}
 onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  chartInstances.forEach((instance, index) => {