feat：添加接口

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')
-}
\ No newline at end of file
+  return axios.get<never, BaseRespData<statisticData>>(
+    'factory/overview/statistic',
+  )
+}
+//2、趋势图（订单趋势+24/48发货率图+超时发货率图）
+export function trendApi(params: {
+  timeUnit: string | number
+  trendType: string
+}) {
+  return axios.post<never, BaseRespData<trendType[]>>(
+    '/factory/overview/trend',
+    params,
+  )
+}

src/types/api/statistic.ts

 export interface statisticData {
-  todayNewOrderNum: number,
-  todayNewProductNum: number,
-  todayConfirmOrderNum: number,
-  todayConfirmProductNum: number,
-  notShipmentOrderNum: number,
-  overTimeNotShipmentOrderNum: number,
-  yesterdayShipmentOrderNum: number,
-  beforeYesterdayShipmentOrderNum: number,
-  compareYesterdayShipmentOrderNum: number,
-  shipmentRateOf24Hour: number,
-  compareLastDayShipmentRateOf24Hour: number,
-  shipmentRateOf48Hour: number,
-  compareLastDayShipmentRateOf48Hour: number,
-  overTimeShipmentRate: number,
-  compareLastDayOverTimeShipmentRate: number,
-  waitCreateLogisticOrderNum: number,
-  waitArrangeOrderNum: number,
-  producingOrderNum: number,
-  waitShipmentNum: number,
-  blockApplyOrderNum: number,
-  exceptionOrderNum: number,
-  outOfStockOrderNum: number,
-  outOfStock24HourOrderNum: number,
-  outOfStock48HourOrderNum: number,
-  outOfStockOver48HourOrderNum: number,
-  outOfStockSkuNum: number,
-  outOfStockProductNum: number,
-  yesterdayOverTimeShipmentOrderNum: number,
-}
\ No newline at end of file
+  todayNewOrderNum: number
+  todayNewProductNum: number
+  todayConfirmOrderNum: number
+  todayConfirmProductNum: number
+  notShipmentOrderNum: number
+  overTimeNotShipmentOrderNum: number
+  yesterdayShipmentOrderNum: number
+  beforeYesterdayShipmentOrderNum: number
+  compareYesterdayShipmentOrderNum: number
+  shipmentRateOf24Hour: number
+  compareLastDayShipmentRateOf24Hour: number
+  shipmentRateOf48Hour: number
+  compareLastDayShipmentRateOf48Hour: number
+  overTimeShipmentRate: number
+  compareLastDayOverTimeShipmentRate: number
+  waitCreateLogisticOrderNum: number
+  waitArrangeOrderNum: number
+  producingOrderNum: number
+  waitShipmentNum: number
+  blockApplyOrderNum: number
+  exceptionOrderNum: number
+  outOfStockOrderNum: number
+  outOfStock24HourOrderNum: number
+  outOfStock48HourOrderNum: number
+  outOfStockOver48HourOrderNum: number
+  outOfStockSkuNum: number
+  outOfStockProductNum: number
+  yesterdayOverTimeShipmentOrderNum: number
+}
+export interface trendType {
+  confirmNum: number // 接单数
+  producedNum: number // 生产数
+  shipmentNum: number // 发货数
+  shipmentRateOf24Hour: number // 24小时发货率
+  shipmentRateOf48Hour: number // 48小时发货率
+  overtimeShipmentRate: number // 超48小时发货率
+  overtimeShipmentOrderNum: number // 超时发货单数
+  startTime: string // 周期开始时间
+  endTime: string // 周期结束时间
+}

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()
-  if (res.code === 200) {
-    statisticData.value = res.data
+  const [statisticRes, orderRes, shipmentRes, overTimeRes] =
+    await Promise.allSettled([
+      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: 'moon', name: '月数据' },
-  { type: 'year', name: '年数据' },
+  { type: '0', name: '日数据' },
+  { type: '1', name: '月数据' },
+  { type: '2', name: '年数据' },
 ])
 
-const chartTimes1 = ref<string>('day')
-const chartTimes2 = ref<string>('day')
-const chartTimes3 = ref<string>('day')
+const chartTimes1 = ref<string>('0')
+const chartTimes2 = ref<string>('0')
+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) => {