From 920865c6f8394e9055cb963949ca37bb60b95494 Mon Sep 17 00:00:00 2001
From: gaohaifeng <zgaohaifeng@qq.com>
Date: Wed, 27 Aug 2025 17:03:51 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat(LineDropdownHaz):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E9=A3=8E=E9=99=A9=E7=BA=A7=E5=88=AB=E7=AD=9B=E9=80=89=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=B9=B6=E6=9B=B4=E6=96=B0=E5=9B=BE=E8=A1=A8=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增风险级别下拉选择器组件，支持按不同风险级别筛选报警数据
添加mock数据文件并实现数据处理逻辑
更新图表样式和交互逻辑
---
 .../LineDropdownHaz/index.ts                  |   2 +-
 .../LineDropdownHaz/index.vue                 | 164 +++++++++++++++---
 .../LineDropdownHaz/mock.json                 | 104 +++++++++++
 3 files changed, 246 insertions(+), 24 deletions(-)
 create mode 100644 src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/mock.json

diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.ts b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.ts
index 3a15436..cf01f25 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.ts
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.ts
@@ -5,7 +5,7 @@ export const LineDropdownConfig: ConfigType = {
   key: 'LineDropdownHaz',
   chartKey: 'VLineDropdownHaz',
   conKey: 'VCLineDropdownHaz',
-  title: '下拉折线图',
+  title: '报警趋势',
   category: 'HazardousChemicalsSpace',
   categoryName: '危化品场景',
   package: PackagesCategoryEnum.CHARTS,
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue
index 68917c2..d9c2196 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue
@@ -7,17 +7,16 @@
             :selectedValue="option.dateTime.selectValue"
             @change="handleSelectChange"
         />
+    
     <div class="line-dropdown-container">
-      <!-- 下拉框 -->
-      <!-- <div class="dropdown-container">
-        <select v-model="selectedOption" @change="handleDropdownChange" class="custom-dropdown1">
-          <option value="总数">总数</option>
-          <option value="类型1">类型1</option>
-          <option value="类型2">类型2</option>
-          <option value="类型3">类型3</option>
-        </select>
-        <div class="dropdown-arrow">▼</div>
-      </div> -->
+      <!-- 新增的风险级别下拉框 -->
+      <div class="risk-level-select">
+        <CustomSelect 
+                :options="riskLevelOptions" 
+                :selectedValue="selectedRiskLevel"
+                @change="handleRiskLevelChange"
+            />
+      </div>
 
       <!-- 折线图 -->
       <div class="chart-container">
@@ -28,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, ref, watch } from 'vue'
+import { computed, PropType, ref, watch, onMounted } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
@@ -38,6 +37,7 @@ import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
 import { DatasetComponent, GridComponent, TooltipComponent } from 'echarts/components'
 import CustomSelect from './select.vue'
+import mockData from './mock.json'
 
 const props = defineProps({
   themeSetting: {
@@ -56,10 +56,86 @@ const props = defineProps({
 
 const selectedOption = ref('总数')
 
+// 新增风险级别相关状态
+const selectedRiskLevel = ref('全部')
+const riskLevelOptions = ref([
+  { label: '全部', value: '全部' },
+  { label: '重大风险', value: '重大风险' },
+  { label: '较大风险', value: '较大风险' },
+  { label: '一般风险', value: '一般风险' },
+  { label: '低风险', value: '低风险' }
+])
+
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent])
 
+// 数据处理函数
+const processChartData = (timeType: string, riskLevel: string) => {
+  const rawData = mockData[timeType as keyof typeof mockData] || []
+  
+  // 根据时间类型处理数据格式
+  let processedData: Array<{time: string, value: number}> = []
+  
+  switch (timeType) {
+    case 'day':
+      processedData = rawData.map((item: any) => ({
+        time: `${item.hour}:00`,
+        value: item.alarm_count
+      }))
+      break
+    case 'week':
+      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+      processedData = rawData.map((item: any) => ({
+        time: weekDays[item.dayOfWeek],
+        value: item.alarm_count
+      }))
+      break
+    case 'month':
+      processedData = rawData.map((item: any) => ({
+        time: `${item.day}日`,
+        value: item.alarm_count
+      }))
+      break
+    case 'quarter':
+    case 'year':
+      processedData = rawData.map((item: any) => ({
+        time: `${item.month}月`,
+        value: item.alarm_count
+      }))
+      break
+    default:
+      processedData = []
+  }
+  
+  // 根据风险级别过滤数据（这里可以根据实际需求调整过滤逻辑）
+  if (riskLevel !== '全部') {
+    // 示例：根据风险级别调整数值（实际项目中应该有对应的风险级别数据）
+    const riskMultiplier = {
+      '重大风险': 0.4,
+      '较大风险': 0.3,
+      '一般风险': 0.2,
+      '低风险': 0.1
+    }[riskLevel] || 1
+    
+    processedData = processedData.map(item => ({
+      ...item,
+      value: Math.round(item.value * riskMultiplier)
+    }))
+  }
+  
+  return {
+    dimensions: ['time', 'value'],
+    source: processedData
+  }
+}
+
+// 更新图表数据
+const updateChartData = () => {
+  const newData = processChartData(props.chartConfig.option.dateTime.selectValue, selectedRiskLevel.value)
+  props.chartConfig.option.dataset = newData
+}
+
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
@@ -69,10 +145,23 @@ const handleDropdownChange = () => {
   console.log('Selected option:', selectedOption.value)
 }
 
-// 处理下拉选择器变化
+// 处理时间下拉选择器变化
 const handleSelectChange = (value: any) => {
     props.chartConfig.option.dateTime.selectValue = value
+    updateChartData()
 }
+
+// 新增风险级别选择处理函数
+const handleRiskLevelChange = (value: any) => {
+    selectedRiskLevel.value = value
+    updateChartData()
+    console.log('Selected risk level:', value)
+}
+
+// 组件挂载时初始化数据
+onMounted(() => {
+  updateChartData()
+})
 </script>
 
 <style scoped>
@@ -293,18 +382,47 @@ const handleSelectChange = (value: any) => {
     white-space: nowrap;
 }
 
-.header-title{
-    position: absolute;
+// 新增风险级别下拉框样式
+.risk-level-select {
+  position: relative;
+  width: 90%;
+  margin: 10px auto 0;
+
+  :deep(.custom-select) {
+    z-index: 999;
+    position: relative;
     top: 0;
-    height: 45px;
-    line-height: 45px;
-    left: 80px;
-    font-size: 16px;
-    font-weight: bold;
-    color: #eee;
-    font-style: italic;
-    text-shadow: 0 0 10px #00E5FF;
-    white-space: nowrap;
+    right: 0;
+  }
+  
+  :deep(.select-display) {
+    background-color: rgb(19, 22, 33);
+    border: 1px solid rgb(75, 83, 99);
+    color: #fff;
+    border-radius: 6px;
+    padding: 0 12px;
+    height: 28px;
+    font-size: 12px;
+    min-width: 90px;
+  }
+  
+  :deep(.select-dropdown) {
+    background-color: rgb(19, 22, 33);
+    border: 1px solid rgb(75, 83, 99);
+    border-radius: 6px;
+  }
+  
+  :deep(.select-option) {
+    color: #fff;
+    
+    &:hover {
+      background-color: rgba(75, 83, 99, 0.3);
+    }
+    
+    &.selected {
+      background-color: rgba(75, 83, 99, 0.5);
+    }
+  }
 }
 
 .svg {
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/mock.json b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/mock.json
new file mode 100644
index 0000000..4e71645
--- /dev/null
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/mock.json
@@ -0,0 +1,104 @@
+{
+    "day": [
+        {
+            "alarm_count": 1,
+            "hour": 6
+        },
+        {
+            "alarm_count": 1,
+            "hour": 7
+        },
+        {
+            "alarm_count": 59,
+            "hour": 12
+        },
+        {
+            "alarm_count": 71,
+            "hour": 13
+        }
+    ],
+    "week": [
+        {
+            "dayOfWeek": 1,
+            "alarm_count": 14
+        },
+        {
+            "dayOfWeek": 2,
+            "alarm_count": 15
+        },
+        {
+            "dayOfWeek": 3,
+            "alarm_count": 132
+        }
+    ],
+    "month": [
+        {
+            "alarm_count": 13,
+            "day": 17
+        },
+        {
+            "alarm_count": 75,
+            "day": 18
+        },
+        {
+            "alarm_count": 94,
+            "day": 19
+        },
+        {
+            "alarm_count": 34,
+            "day": 20
+        },
+        {
+            "alarm_count": 23,
+            "day": 21
+        },
+        {
+            "alarm_count": 6,
+            "day": 22
+        },
+        {
+            "alarm_count": 14,
+            "day": 25
+        },
+        {
+            "alarm_count": 15,
+            "day": 26
+        },
+        {
+            "alarm_count": 132,
+            "day": 27
+        }
+    ],
+    "quarter": [
+        {
+            "alarm_count": 18,
+            "month": 7
+        },
+        {
+            "alarm_count": 406,
+            "month": 8
+        }
+    ],
+    "year": [
+        {
+            "alarm_count": 10,
+            "month": 4
+        },
+        {
+            "alarm_count": 10,
+            "month": 5
+        },
+        {
+            "alarm_count": 10,
+            "month": 6
+        },
+        {
+            "alarm_count": 18,
+            "month": 7
+        },
+        {
+            "alarm_count": 406,
+            "month": 8
+        }
+    ]
+}
\ No newline at end of file

From fc2230a992aad1fb378ca9200298a0fbd7fce555 Mon Sep 17 00:00:00 2001
From: gaohaifeng <zgaohaifeng@qq.com>
Date: Wed, 27 Aug 2025 20:55:02 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2mock=E6=95=B0=E6=8D=AE=E4=B8=BA=E7=9C=9F=E5=AE=9EAPI?=
 =?UTF-8?q?=E8=AF=B7=E6=B1=82=E5=B9=B6=E8=B0=83=E6=95=B4=E9=A3=8E=E9=99=A9?=
 =?UTF-8?q?=E7=BA=A7=E5=88=AB=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修改风险级别选项值为数字类型以匹配后端API
移除mock数据依赖，通过axios调用真实接口获取图表数据
更新数据处理逻辑以适应API返回格式
---
 .../LineDropdownHaz/index.vue                 | 58 ++++++++++---------
 vite.config.ts                                |  4 ++
 2 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue
index d9c2196..efeaaf6 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue
@@ -37,7 +37,7 @@ import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
 import { DatasetComponent, GridComponent, TooltipComponent } from 'echarts/components'
 import CustomSelect from './select.vue'
-import mockData from './mock.json'
+import axios from 'axios'
 
 const props = defineProps({
   themeSetting: {
@@ -57,22 +57,40 @@ const props = defineProps({
 const selectedOption = ref('总数')
 
 // 新增风险级别相关状态
-const selectedRiskLevel = ref('全部')
+const selectedRiskLevel = ref(0)
 const riskLevelOptions = ref([
-  { label: '全部', value: '全部' },
-  { label: '重大风险', value: '重大风险' },
-  { label: '较大风险', value: '较大风险' },
-  { label: '一般风险', value: '一般风险' },
-  { label: '低风险', value: '低风险' }
+  { label: '全部', value: 0 },
+  { label: '重大风险', value: 1 },
+  { label: '较大风险', value: 2 },
+  { label: '一般风险', value: 3 },
+  { label: '低风险', value: 4 }
 ])
 
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent])
 
+// API调用函数
+const fetchChartData = async (timeType: string, riskLevel: number) => {
+  try {
+    const response = await axios.get(`/screen/alarmByOption/${timeType}/${riskLevel}`)
+    if (response.data.state === true) {
+      return response.data.value || []
+    } else {
+      console.error('API调用失败:', response.data)
+      return []
+    }
+  } catch (error) {
+    console.error('获取图表数据失败:', error)
+    return []
+  }
+}
+
 // 数据处理函数
-const processChartData = (timeType: string, riskLevel: string) => {
-  const rawData = mockData[timeType as keyof typeof mockData] || []
+const processChartData = async (timeType: string, riskLevel: number) => {
+  
+  // 调用API获取数据
+  const rawData = await fetchChartData(timeType, riskLevel)
   
   // 根据时间类型处理数据格式
   let processedData: Array<{time: string, value: number}> = []
@@ -108,22 +126,6 @@ const processChartData = (timeType: string, riskLevel: string) => {
       processedData = []
   }
   
-  // 根据风险级别过滤数据（这里可以根据实际需求调整过滤逻辑）
-  if (riskLevel !== '全部') {
-    // 示例：根据风险级别调整数值（实际项目中应该有对应的风险级别数据）
-    const riskMultiplier = {
-      '重大风险': 0.4,
-      '较大风险': 0.3,
-      '一般风险': 0.2,
-      '低风险': 0.1
-    }[riskLevel] || 1
-    
-    processedData = processedData.map(item => ({
-      ...item,
-      value: Math.round(item.value * riskMultiplier)
-    }))
-  }
-  
   return {
     dimensions: ['time', 'value'],
     source: processedData
@@ -131,8 +133,8 @@ const processChartData = (timeType: string, riskLevel: string) => {
 }
 
 // 更新图表数据
-const updateChartData = () => {
-  const newData = processChartData(props.chartConfig.option.dateTime.selectValue, selectedRiskLevel.value)
+const updateChartData = async () => {
+  const newData = await processChartData(props.chartConfig.option.dateTime.selectValue, selectedRiskLevel.value)
   props.chartConfig.option.dataset = newData
 }
 
@@ -429,4 +431,4 @@ onMounted(() => {
   width: 100%;
   height: 45px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/vite.config.ts b/vite.config.ts
index 0946dc2..197f46c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -67,6 +67,10 @@ export default ({ mode }) =>
         '/awjt/': {
           target: 'http://127.0.0.1:8921/',
           changeOrigin: true
+        },
+        '/screen/': {
+          target: 'http://127.0.0.1:8080/',
+          changeOrigin: true
         }
       }
     },

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 3/4] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8=E7=BB=84=E4=BB=B6):?=
 =?UTF-8?q?=20=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) {

From bec142aff18463c7ca1c7ca2fb081b36801d15bd Mon Sep 17 00:00:00 2001
From: gaohaifeng <zgaohaifeng@qq.com>
Date: Thu, 28 Aug 2025 10:11:48 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat(Charts):=20=E4=BF=AE=E6=94=B9=E5=8D=B1?=
 =?UTF-8?q?=E9=99=A9=E5=8C=96=E5=AD=A6=E5=93=81=E7=A9=BA=E9=97=B4=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BB=A5=E6=94=AF=E6=8C=81API=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将静态数据替换为从API获取的动态数据
- 新增fetchCorpsData方法处理API请求
- 修改calculateWidth逻辑以适应新数据结构
- 添加组件挂载时的数据初始化
- 调整SmallBorder组件样式确保SVG宽度适配
---
 .../SmallBorder/index.vue                     |  3 +
 .../TopAlarmsHaz/index.vue                    | 62 +++++++++++++------
 2 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/SmallBorder/index.vue b/src/packages/components/Charts/HazardousChemicalsSpace/SmallBorder/index.vue
index 7a2f947..e2e91d8 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/SmallBorder/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/SmallBorder/index.vue
@@ -67,6 +67,9 @@ $border-gradient-end: rgba(128, 128, 128, 0);
     // z-index: 2;
     width: 100%;
     height: 12%;
+    .svg{
+      width: 100%;
+    }
     // background-color: antiquewhite;
   }
 }
diff --git a/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/index.vue b/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/index.vue
index f994fd2..72c3507 100644
--- a/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/index.vue
@@ -28,23 +28,21 @@
       </div>
       <div class="content">
         <ul>
-          <li v-for="(item, index) in option.dataset" :key="index" class="alarm-item">
+          <li v-for="(item, index) in displayData" :key="index" class="alarm-item">
             <div class="item-info">
               <span class="rank" :style="{ color: option.rankColor }">
                 <span class="rank-icon"></span>
-                {{ item.rank }}
+                {{ index + 1 }}
               </span>
-              <span class="name" :style="{ color: option.nameColor }">{{ item.name }}</span>
-
+              <span class="name" :style="{ color: option.nameColor }">{{ item.enterpriseName }}</span>
             </div>
             <div class="item-value">
-              <span class="value" :style="{ color: option.valueColor }">{{ item.value }}</span>
+              <span class="value" :style="{ color: option.valueColor }">{{ item.alarmCount }}</span>
             </div>
-
             <div class="progress-bar-wrapper">
               <div class="progress-bar">
                 <div class="progress" :style="{
-                  width: calculateWidth(item.value),
+                  width: calculateWidth(item.alarmCount),
                   background: `linear-gradient(to right, ${option.barColorStart}, ${option.barColorEnd})`
                 }"></div>
               </div>
@@ -54,14 +52,14 @@
       </div>
     </div>
   </SmallBorder>
-
 </template>
 
 <script setup lang="ts">
-import { ref, computed, PropType } from 'vue'
+import { ref, computed, PropType, onMounted } from 'vue'
 import { option as configOption } from './config'
 import SmallBorder from '../SmallBorder/index.vue'
 import CustomSelect from './select.vue'
+import axios from 'axios'
 
 const props = defineProps({
   chartConfig: {
@@ -71,9 +69,11 @@ const props = defineProps({
 })
 
 const option = computed(() => props.chartConfig.option)
-
 const selectedOption = ref(props.chartConfig.option.dropdownDefault)
 
+// 新增：存储API返回的数据
+const displayData = ref([])
+
 const dropdownOptions = computed(() => {
   return props.chartConfig.option.dropdownOptions.map(opt => ({
     label: opt,
@@ -81,24 +81,46 @@ const dropdownOptions = computed(() => {
   }))
 })
 
-const maxValue = computed(() => {
-  const values = props.chartConfig.option.dataset.map(item => item.value)
-  return Math.max(...values, 1) // Avoid division by zero
-})
-
+// 修改：基于API数据计算进度条宽度
 const calculateWidth = (value: number) => {
-  if (maxValue.value === 0) return '0%'
-  return `${(value / maxValue.value) * 80}%` // Max width 80% to leave space for value
+  if (displayData.value.length === 0 || displayData.value[0].alarmCount === 0) {
+    return '0%'
+  }
+  const firstRowValue = displayData.value[0].alarmCount
+  return `${(value / firstRowValue) * 100}%` // 当前行的alarmCount/第一行的alarmCount值
+}
+
+// 新增：API调用函数
+const fetchCorpsData = async (option: string) => {
+  try {
+    const response = await axios.get(`/screen/corpsFive/${option}`)
+    if (response.data.state === true) {
+      displayData.value = response.data.value || []
+    } else {
+      console.error('API调用失败:', response.data)
+      displayData.value = []
+    }
+  } catch (error) {
+    console.error('获取企业数据失败:', error)
+    displayData.value = []
+  }
 }
 
 const handleSelect = (key: string) => {
   selectedOption.value = key
 }
 
-// 处理下拉选择器变化
-const handleSelectChange = (value: any) => {
-    props.chartConfig.option.dateTime.selectValue = value
+// 修改：处理下拉选择器变化，调用API
+const handleSelectChange = async (value: any) => {
+  props.chartConfig.option.dateTime.selectValue = value
+  await fetchCorpsData(value)
 }
+
+// 新增：组件挂载时初始化数据
+onMounted(async () => {
+  const initialValue = props.chartConfig.option.dateTime.selectValue || 'day'
+  await fetchCorpsData(initialValue)
+})
 </script>
 
 <style lang="scss" scoped>