From ad978983e8eaadb76a4ccb2d15cb632cdb78a45c Mon Sep 17 00:00:00 2001
From: gaohaifeng <zgaohaifeng@qq.com>
Date: Wed, 27 Aug 2025 21:08:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8=E7=BB=84=E4=BB=B6):=20?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2mock=E6=95=B0=E6=8D=AE=E4=B8=BA=E7=9C=9F?=
 =?UTF-8?q?=E5=AE=9EAPI=E8=AF=B7=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加axios依赖并实现API数据获取逻辑
移除mock数据文件和相关转换函数
添加onMounted钩子初始化图表数据
---
 .../LineGraph01Haz/index.vue                  | 189 +++++++++---------
 1 file changed, 97 insertions(+), 92 deletions(-)

diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/LineGraph01Haz/index.vue b/src/packages/components/Charts/HazardousChemicalsSpace/LineGraph01Haz/index.vue
index 82bbd63..580b99e 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/LineGraph01Haz/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/LineGraph01Haz/index.vue
@@ -39,7 +39,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, computed, watch, ref, nextTick } from 'vue'
+import { PropType, computed, watch, ref, nextTick,onMounted } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
@@ -52,7 +52,7 @@ import { useChartDataFetch } from '@/hooks'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
 import CustomSelect from './select.vue'
-import mockData1 from './mock1.json'
+import axios from 'axios'
 
 const props = defineProps({
   themeSetting: {
@@ -82,102 +82,101 @@ const replaceMergeArr = ref<string[]>()
 // 当前选中的时间范围
 const selectedTimeRange = ref('day')
 
-// 数据转换函数：将mock1.json格式转换为mock.json格式
-const convertMock1ToMockFormat = (mock1Data: any) => {
-  const convertedData: any = {}
-  
-  Object.keys(mock1Data).forEach(timeRange => {
-    const dataArray = mock1Data[timeRange]
-    
-    if (!Array.isArray(dataArray) || dataArray.length === 0) {
-      convertedData[timeRange] = {
-        alertTotal: 0,
-        unprocessedAlert: 0,
-        averageResolutionTime: 0,
-        datavalues: [['时间', '数值']]
-      }
-      return
+// API调用函数
+const fetchChartData = async (option: string) => {
+  try {
+    const response = await axios.get(`/screen/handleByOption/${option}`)
+    if (response.data.state === true) {
+      return response.data.value || []
+    } else {
+      console.error('API调用失败:', response.data)
+      return []
     }
-    
-    // 计算聚合数据
-    const alertTotal = dataArray.reduce((sum, item) => sum + (item.alarm_count || 0), 0)
-    const unprocessedAlert = dataArray.reduce((sum, item) => sum + (item.un_alarm_count || 0), 0)
-    const avgHandleTimeSum = dataArray.reduce((sum, item) => sum + (item.avg_handle_time_seconds || 0), 0)
-    const averageResolutionTime = Math.round(avgHandleTimeSum / dataArray.length)
-    
-    // 根据不同时间范围生成datavalues
-    let datavalues: (string | number)[][] = [['时间', '数值']]
-    
-    switch (timeRange) {
-      case 'day':
-        datavalues = [['时间', '数值'], ...dataArray.map(item => [
-          `${item.alarm_hour}:00`,
-          item.avg_handle_time_seconds || 0
-        ])]
-        break
-      case 'week':
-        datavalues = [['时间', '数值'], ...dataArray.map(item => [
-          item.week_day_name || '',
-          item.avg_handle_time_seconds || 0
-        ])]
-        break
-      case 'month':
-        datavalues = [['时间', '数值'], ...dataArray.map(item => [
-          item.alarm_date || '',
-          item.avg_handle_time_seconds || 0
-        ])]
-        break
-      case 'quarter':
-        datavalues = [['时间', '数值'], ...dataArray.map(item => [
-          `${item.month}月`,
-          item.avg_handle_time_seconds || 0
-        ])]
-        break
-      case 'year':
-        datavalues = [['时间', '数值'], ...dataArray.map(item => [
-          `${item.month}月`,
-          item.avg_handle_time_seconds || 0
-        ])]
-        break
-      default:
-        datavalues = [['时间', '数值']]
-    }
-    
-    convertedData[timeRange] = {
-      alertTotal,
-      unprocessedAlert,
-      averageResolutionTime,
-      datavalues
-    }
-  })
-  
-  return convertedData
+  } catch (error) {
+    console.error('获取图表数据失败:', error)
+    return []
+  }
 }
 
-// 转换mock1数据为mock格式
-const convertedMockData = convertMock1ToMockFormat(mockData1)
+// 数据转换函数：将API返回的数据转换为组件需要的格式
+const convertApiDataToMockFormat = async (timeRange: string) => {
+  const dataArray = await fetchChartData(timeRange)
+  
+  if (!Array.isArray(dataArray) || dataArray.length === 0) {
+    return {
+      alertTotal: 0,
+      unprocessedAlert: 0,
+      averageResolutionTime: 0,
+      datavalues: [['时间', '数值']]
+    }
+  }
+  
+  // 计算聚合数据
+  const alertTotal = dataArray.reduce((sum, item) => sum + (item.alarm_count || 0), 0)
+  const unprocessedAlert = dataArray.reduce((sum, item) => sum + (item.un_alarm_count || 0), 0)
+  const avgHandleTimeSum = dataArray.reduce((sum, item) => sum + (item.avg_handle_time_seconds || 0), 0)
+  const averageResolutionTime = Math.round(avgHandleTimeSum / dataArray.length)
+  
+  // 根据不同时间范围生成datavalues
+  let datavalues: (string | number)[][] = [['时间', '数值']]
+  
+  switch (timeRange) {
+    case 'day':
+      datavalues = [['时间', '数值'], ...dataArray.map(item => [
+        `${item.alarm_hour}:00`,
+        item.avg_handle_time_seconds || 0
+      ])]
+      break
+    case 'week':
+      datavalues = [['时间', '数值'], ...dataArray.map(item => [
+        item.week_day_name || '',
+        item.avg_handle_time_seconds || 0
+      ])]
+      break
+    case 'month':
+      datavalues = [['时间', '数值'], ...dataArray.map(item => [
+        item.alarm_date || '',
+        item.avg_handle_time_seconds || 0
+      ])]
+      break
+    case 'quarter':
+      datavalues = [['时间', '数值'], ...dataArray.map(item => [
+        `${item.month}月`,
+        item.avg_handle_time_seconds || 0
+      ])]
+      break
+    case 'year':
+      datavalues = [['时间', '数值'], ...dataArray.map(item => [
+        `${item.month}月`,
+        item.avg_handle_time_seconds || 0
+      ])]
+      break
+    default:
+      datavalues = [['时间', '数值']]
+  }
+  
+  return {
+    alertTotal,
+    unprocessedAlert,
+    averageResolutionTime,
+    datavalues
+  }
+}
 
 // 数据获取函数
-const getMockDataByTimeRange = (timeRange: string) => {
-  const defaultData = {
-    alertTotal: 0,
-    unprocessedAlert: 0,
-    averageResolutionTime: 0,
-    datavalues: [['时间', '数值']]
-  }
-  
-  if (convertedMockData && convertedMockData[timeRange]) {
-    return convertedMockData[timeRange]
-  }
-  
-  return defaultData
-}
-
-// 当前数据
-const currentData = computed(() => {
-  return getMockDataByTimeRange(selectedTimeRange.value)
+const currentData = ref({
+  alertTotal: 0,
+  unprocessedAlert: 0,
+  averageResolutionTime: 0,
+  datavalues: [['时间', '数值']]
 })
 
+// 更新数据函数
+const updateChartData = async () => {
+  const newData = await convertApiDataToMockFormat(selectedTimeRange.value)
+  currentData.value = newData
+}
+
 // 图表配置
 const chartOption = computed(() => {
   const mergedOption = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
@@ -224,10 +223,16 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
 const handleSelectChange = (value: any) => {
   props.chartConfig.option.dateTime.selectValue = value
   selectedTimeRange.value = value
+  updateChartData()
 }
 
-// 初始化时设置默认值
+// 初始化时设置默认值并加载数据
 selectedTimeRange.value = props.chartConfig.option.dateTime.selectValue || 'day'
+
+// 组件挂载时初始化数据
+onMounted(() => {
+  updateChartData()
+})
 </script>
 <style lang="scss" scoped>
 @include go(border-box) {