feat(Charts): 修改危险化学品空间组件以支持API数据

- 将静态数据替换为从API获取的动态数据
- 新增fetchCorpsData方法处理API请求
- 修改calculateWidth逻辑以适应新数据结构
- 添加组件挂载时的数据初始化
- 调整SmallBorder组件样式确保SVG宽度适配

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;
   }
 }

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(() => {
+// 修改：基于API数据计算进度条宽度
-  const values = props.chartConfig.option.dataset.map(item => item.value)
-  return Math.max(...values, 1) // Avoid division by zero
-})
-
 const calculateWidth = (value: number) => {
-  if (maxValue.value === 0) return '0%'
+  if (displayData.value.length === 0 || displayData.value[0].alarmCount === 0) {
-  return `${(value / maxValue.value) * 80}%` // Max width 80% to leave space for value
+    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
 }
 
-// 处理下拉选择器变化
+// 修改：处理下拉选择器变化，调用API
-const handleSelectChange = (value: any) => {
+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>