态势感知平台-全球开源风险态势感知监控中心行业分布接口对接

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',

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(() => {
+onMounted(async () => {
-  nextTick(() => {
+  await fetchIndustryData(); // 获取行业分布数据
-    initChart();
+  await nextTick();
-  });
+  initChart();
   window.addEventListener('resize', handleResize);
 });