From 21f068bc9dc86ae1ca4bd27f40e9bbdcba34135b Mon Sep 17 00:00:00 2001
From: d266377 <d266377@noreply.gitcode.com>
Date: Mon, 26 Jan 2026 17:23:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=80=81=E5=8A=BF=E6=84=9F=E7=9F=A5=E5=B9=B3?=
 =?UTF-8?q?=E5=8F=B0-=E5=85=A8=E7=90=83=E5=BC=80=E6=BA=90=E9=A3=8E?=
 =?UTF-8?q?=E9=99=A9=E6=80=81=E5=8A=BF=E6=84=9F=E7=9F=A5=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E8=A1=8C=E4=B8=9A=E5=88=86=E5=B8=83=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/jyh/situation.ts                      |  2 +-
 .../components/IndustryDistribution.vue       | 59 +++++++++++++------
 2 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/api/jyh/situation.ts b/src/api/jyh/situation.ts
index 3f6234d..e9863c5 100644
--- a/src/api/jyh/situation.ts
+++ b/src/api/jyh/situation.ts
@@ -66,7 +66,7 @@ export function mapDataPage1(params?: any): Promise<any> {
 }
 
 // 全球开源风险态势感知监控中心-行业分布饼图
-export function dustryDistributionPage1(params?: any): Promise<any> {
+export function industryDistributionPage1(params?: any): Promise<any> {
   return request({
     url: `/api/v1/page1/industryDistribution`,
     method: 'get',
diff --git a/src/views/Jyh/security/components/IndustryDistribution.vue b/src/views/Jyh/security/components/IndustryDistribution.vue
index e109e52..7a192dc 100644
--- a/src/views/Jyh/security/components/IndustryDistribution.vue
+++ b/src/views/Jyh/security/components/IndustryDistribution.vue
@@ -13,6 +13,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue';
 import * as echarts from 'echarts';
+import { industryDistributionPage1 } from '@/api/jyh/situation';
 
 // 定义数据类型
 interface IndustryData {
@@ -20,18 +21,6 @@ interface IndustryData {
   name: string;
 }
 
-// 定义行业分布数据
-const industryDistribution: IndustryData[] = [
-  { value: 25.8, name: '人工智能' },
-  { value: 18.4, name: '云计算' },
-  { value: 15.6, name: '大数据' },
-  { value: 12.2, name: '物联网' },
-  { value: 9.6, name: '网络安全' },
-  { value: 7.1, name: '区块链' },
-  { value: 6.4, name: '工业互联网' },
-  { value: 4.9, name: '移动开发' }
-];
-
 // 定义配色方案
 const industryColorPalette = [
   '#00f0ff', '#00b03e', '#ffeb00', '#ffab00',
@@ -39,7 +28,7 @@ const industryColorPalette = [
 ];
 
 // 内部数据
-const internalData = ref<IndustryData[]>(industryDistribution);
+const internalData = ref<IndustryData[]>([]);
 
 // 响应式数据
 const chartDiv = ref<HTMLDivElement | null>(null);
@@ -103,11 +92,47 @@ const handleResize = () => {
   }
 };
 
+// 获取行业分布数据
+const fetchIndustryData = async () => {
+  try {
+    const response = await industryDistributionPage1();
+    if (response.code === 200) {
+      internalData.value = response.data;
+    } else {
+      console.error('获取行业分布数据失败:', response.msg);
+      // 如果接口调用失败，使用默认数据
+      internalData.value = [
+        { value: 25.8, name: '人工智能' },
+        { value: 18.4, name: '云计算' },
+        { value: 15.6, name: '大数据' },
+        { value: 12.2, name: '物联网' },
+        { value: 9.6, name: '网络安全' },
+        { value: 7.1, name: '区块链' },
+        { value: 6.4, name: '工业互联网' },
+        { value: 4.9, name: '移动开发' }
+      ];
+    }
+  } catch (error) {
+    console.error('请求行业分布数据时发生错误:', error);
+    // 发生异常时使用默认数据
+    internalData.value = [
+      { value: 25.8, name: '人工智能' },
+      { value: 18.4, name: '云计算' },
+      { value: 15.6, name: '大数据' },
+      { value: 12.2, name: '物联网' },
+      { value: 9.6, name: '网络安全' },
+      { value: 7.1, name: '区块链' },
+      { value: 6.4, name: '工业互联网' },
+      { value: 4.9, name: '移动开发' }
+    ];
+  }
+};
+
 // 生命周期钩子
-onMounted(() => {
-  nextTick(() => {
-    initChart();
-  });
+onMounted(async () => {
+  await fetchIndustryData(); // 获取行业分布数据
+  await nextTick();
+  initChart();
   window.addEventListener('resize', handleResize);
 });