fix：修复无限发送请求，修复不能独立配置，修复不能动态更新

public/staticData/static.json

@@ -27,7 +27,7 @@
           {
             "rank": "TOP1",
             "name": "株机公司",
-            "value": 932
+            "value": 101
           },
           {
             "rank": "TOP2",
@@ -330,7 +330,7 @@
           {
             "title": "调漆作业室",
             "label": "智控场景",
-            "value": null,
+            "value": 0,
             "color": "#FFD700",
             "image": "scene-control.png"
           }

src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/config.ts

@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { TopAlarmsConfig } from './index'
 import dataJson from './data.json'
+import { cloneDeep } from 'lodash'
 export const option = {
     sceneCode: 'T04',
     componentIndexKey: "a",
@@ -51,6 +52,6 @@ export const option = {
 export default class Config extends PublicConfigClass implements CreateComponentType {
     public key = TopAlarmsConfig.key
     public chartConfig = TopAlarmsConfig
-    public option = option
+    public option = cloneDeep(option)
 
 }

src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/index.vue

@@ -30,15 +30,15 @@
                 <span class="rank-icon"></span>
                 {{ index + 1 }}
               </span>
-              <span class="name" :style="{ color: option.nameColor }">{{ item.enterpriseName }}</span>
+              <span class="name" :style="{ color: option.nameColor }">{{ item.name }}</span>
             </div>
             <div class="item-value">
-              <span class="value" :style="{ color: option.valueColor }">{{ item.alarmCount }}</span>
+              <span class="value" :style="{ color: option.valueColor }">{{ item.value }}</span>
             </div>
             <div class="progress-bar-wrapper">
               <div class="progress-bar">
                 <div class="progress" :style="{
-                  width: calculateWidth(item.alarmCount),
+                  width: calculateWidth(item.value),
                   background: `linear-gradient(to right, ${option.barColorStart}, ${option.barColorEnd})`
                 }"></div>
               </div>

src/packages/components/Charts/MyComponents/ParkingScene/config.ts

@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { ParkingSceneConfig } from './index'
 import dataJson from './data.json'
+import { cloneDeep } from 'lodash'
 
 export const option = {
   sceneCode: "",
@@ -25,5 +26,5 @@ export const option = {
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = ParkingSceneConfig.key
   public chartConfig = ParkingSceneConfig
-  public option = option
+  public option = cloneDeep(option)
 }

src/packages/components/Charts/MyComponents/ParkingScene/index.vue

@@ -225,52 +225,84 @@
 
   </div>
 </template>
-
 <script setup lang="ts">
-import { PropType, computed, onMounted, watch } from 'vue'
+import { PropType, computed, onMounted, watch, ref } from 'vue'
 import { option as configOption } from './config'
 import { ParkingSceneConfig } from './index'
 import axios from 'axios';
+
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<{ option: typeof configOption }>,
     required: true
   }
 })
+
 const key = ParkingSceneConfig.key;
 const option = computed(() => props.chartConfig.option)
+const isFetching = ref(false) // 防止重复请求
+
+// 获取静态数据
 const getStaticData = async (key: string, componentIndexKey: string, sceneCode: string) => {
-  let dataTemp = option.value.dataset
   try {
     const response = await axios.get('/staticData/static.json');
     if (response.data) {
       console.log('静态数据:', response.data);
-      dataTemp = response.data[sceneCode]?.[key]?.[componentIndexKey]?.['source'];
+      const dataTemp = response.data[sceneCode]?.[key]?.[componentIndexKey]?.['source'];
       if (!dataTemp) {
         console.warn(`Data not found for sceneCode: ${sceneCode}, key: ${key}, componentIndexKey: ${componentIndexKey}`);
+        return props.chartConfig.option.dataset; // 返回默认数据
       }
+      return dataTemp;
     }
-    console.log("datatemp:", dataTemp)
   } catch (err) {
-    // console.error('获取static.json失败:', err);
+    console.error('获取static.json失败:', err);
   }
-  return dataTemp
+  return props.chartConfig.option.dataset; // 出错时返回默认数据
 }
+
+
+// 统一数据获取方法
+const fetchData = async () => {
+  // 防止重复请求
+  if (isFetching.value) return;
+
+  isFetching.value = true;
+  try {
+    let data;
+
+    // 静态数据
+    data = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode);
+    props.chartConfig.option.dataset = data;
+
+    if (JSON.stringify(data) !== JSON.stringify(option.value.dataset)) {
+
+      console.log('更新数据:', data);
+    }
+  } finally {
+    isFetching.value = false;
+  }
+}
+
 watch(
-  () => props.chartConfig.option.dataset,
+  () => [
-  async (newData: any) => {
+    props.chartConfig.option.sceneCode,
-    option.value.dataset = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode);
+    props.chartConfig.option.componentIndexKey,
+    props.chartConfig.option.dataset
+  ],
+  async () => {
+    await fetchData();
   },
   {
     immediate: true,
-    deep: false
+    deep: true
   }
 )
+
+// 组件挂载时获取数据
 onMounted(async () => {
-  option.value.dataset = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode);
+  await fetchData();
 })
-
-
 </script>
 
 <style lang="scss" scoped>

src/packages/components/Charts/MyComponents/SceneDistribution/config.ts

@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { SceneDistributionConfig } from './index'
 import dataJson from './data.json'
+import { cloneDeep } from 'lodash'
 
 export const option = {
   sceneCode: 'T06',
@@ -22,5 +23,5 @@ export const option = {
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = SceneDistributionConfig.key
   public chartConfig = SceneDistributionConfig
-  public option = option
+  public option = cloneDeep(option)
 }

src/packages/components/Charts/MyComponents/SceneDistribution/index.vue

@@ -221,7 +221,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, onMounted } from 'vue'
+import { PropType, computed, onMounted, ref, watch } from 'vue'
 import { option as configOption } from './config'
 import axios from 'axios'
 import { SceneDistributionConfig } from './index'
@@ -241,26 +241,68 @@ const getImageUrl = (name: string) => {
 
 
 const key = SceneDistributionConfig.key;
+
+// 获取静态数据
 const getStaticData = async (key: string, componentIndexKey: string, sceneCode: string) => {
-  let dataTemp = option.value.dataset
   try {
     const response = await axios.get('/staticData/static.json');
     if (response.data) {
       console.log('静态数据:', response.data);
-      dataTemp = response.data[sceneCode]?.[key]?.[componentIndexKey]?.['source'];
+      const dataTemp = response.data[sceneCode]?.[key]?.[componentIndexKey]?.['source'];
       if (!dataTemp) {
         console.warn(`Data not found for sceneCode: ${sceneCode}, key: ${key}, componentIndexKey: ${componentIndexKey}`);
+        return props.chartConfig.option.dataset; // 返回默认数据
       }
+      return dataTemp;
     }
-    console.log("datatemp:", dataTemp)
-
   } catch (err) {
     console.error('获取static.json失败:', err);
   }
-  return dataTemp
+  return props.chartConfig.option.dataset; // 出错时返回默认数据
 }
+
+const isFetching = ref(false) // 防止重复请求
+// 统一数据获取方法
+const fetchData = async () => {
+  // 防止重复请求
+  if (isFetching.value) return;
+
+  isFetching.value = true;
+  try {
+    let data;
+
+    // 静态数据
+    data = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode);
+    props.chartConfig.option.dataset = data;
+
+    if (JSON.stringify(data) !== JSON.stringify(option.value.dataset)) {
+
+      console.log('更新数据:', data);
+    }
+  } finally {
+    isFetching.value = false;
+  }
+}
+
+// 监听配置变化，但避免修改被监听的值
+watch(
+  () => [
+    props.chartConfig.option.sceneCode,
+    props.chartConfig.option.componentIndexKey,
+
+  ],
+  async () => {
+    await fetchData();
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+// 组件挂载时获取数据
 onMounted(async () => {
-  option.value.dataset = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode);
+  await fetchData();
 })
 
 </script>