feat：（未完善） 新增请求静态数据接口

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

@@ -4,6 +4,7 @@ import { TopAlarmsConfig } from './index'
 import dataJson from './data.json'
 export const option = {
     sceneCode: 'T04',
+    componentIndexKey: "a",
     dateTime: {
         selectValue: 'day',
         dataset: [
@@ -31,7 +32,7 @@ export const option = {
     },
 
     dataset: dataJson.source,
-    title: '未处置报警数TOP5',
+    titleText: '未处置报警数TOP5',
     titleColor: '#eee',
     titleSize: 16,
     rankColor: '#5AA1AD',

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

@@ -5,6 +5,11 @@
         <n-input v-model:value="optionData.sceneCode" ></n-input>
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="组件 key " :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.componentIndexKey"></n-input>
+      </setting-item>
+    </setting-item-box>
   </collapse-item>
 </template>
 

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

@@ -12,7 +12,7 @@
               marginTop: option.paddingY + 'px',
               marginLeft: option.paddingX + 'px',
               letterSpacing: option.letterSpacing + 'px'
-            }">{{ option.title }}</span>
+            }">{{ option.titleText }}</span>
           </div>
         </div>
         <n-dropdown v-if='option.isShowButton' trigger="hover" :options="dropdownOptions" @select="handleSelect">
@@ -56,7 +56,8 @@ import { option as configOption } from './config'
 import SmallBorder from '../SmallBorder/index.vue'
 import CustomSelect from './select.vue'
 import axiosInstance from '@/api/axios'
-
+import { TopAlarmsConfig } from './index'
+import axios from 'axios'
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<{ option: typeof configOption }>,
@@ -85,17 +86,42 @@ const calculateWidth = (value: number) => {
   const firstRowValue = displayData.value[0].alarmCount
   return `${(value / firstRowValue) * 100}%` // 当前行的alarmCount/第一行的alarmCount值
 }
+const key = TopAlarmsConfig.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];
+      if (!dataTemp) {
+        console.warn(`Data not found for sceneCode: ${sceneCode}, key: ${key}, componentIndexKey: ${componentIndexKey}`);
+      }
+    }
+    console.log("datatemp:", dataTemp)
+
+  } catch (err) {
+    console.error('获取static.json失败:', err);
+  }
+  return dataTemp
+}
 
 // 新增：API调用函数
 const fetchCorpsData = async (option: string) => {
   try {
-    const response: any = await axiosInstance.get(`/awjt/screen/corpsFive/${option}/${props.chartConfig.option.sceneCode}`, { baseURL: '' })
+    const response: any =
-    if (response.state === true) {
+      // await axiosInstance.get(`/awjt/screen/corpsFive/${option}/${props.chartConfig.option.sceneCode}`, { baseURL: '' })
-      displayData.value = response.value || []
+
-    } else {
+    // if (response.state === true) {
-      console.error('API调用失败:', response)
+    //   displayData.value = response.value || []
-      displayData.value = []
+    // } else {
-    }
+    //   console.error('API调用失败:', response)
+    //   displayData.value = []
+    // }
+    // 使用静态数据
+    await getStaticData(key, props.chartConfig.option.componentIndexKey, props.chartConfig.option.sceneCode);
+    displayData.value = response['source']
+    props.chartConfig.option.titleText = response['titleText']
   } catch (error) {
     console.error('获取企业数据失败:', error)
     displayData.value = []
@@ -112,6 +138,9 @@ const handleSelectChange = async (value: any) => {
   await fetchCorpsData(value)
 }
 
+
+
+
 // 新增：组件挂载时初始化数据
 onMounted(async () => {
   const initialValue = props.chartConfig.option.dateTime.selectValue || 'day'

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

@@ -5,8 +5,9 @@ import dataJson from './data.json'
 
 export const option = {
   sceneCode: "",
+  componentIndexKey: "",
   dataset: dataJson.source,
-  title: '场景分布概况',
+  titleText: '场景分布概况',
   titleColor: '#eee',
   titleSize: 16,
   linkColor: '#00E5FF',

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

@@ -1,32 +1,25 @@
 <template>
-
+  <collapse-item name="信息" :expanded="true">
-  <div class="go-parking-scene-config">
+    <setting-item-box name="场景 Code " :alone="true">
-
+      <setting-item>
-    <n-form-item label="标题">
+        <n-input v-model:value="optionData.sceneCode" ></n-input>
-      <n-input v-model:value="option.title" />
+      </setting-item>
-    </n-form-item>
+    </setting-item-box>
-    <n-form-item label="标题大小">
+    <setting-item-box name="组件 key " :alone="true">
-      <n-input-number v-model:value="option.titleSize" />
+      <setting-item>
-    </n-form-item>
+        <n-input v-model:value="optionData.componentIndexKey"></n-input>
-    <n-form-item label="场景名称大小">
+      </setting-item>
-      <n-input-number v-model:value="option.sceneNameSize" />
+    </setting-item-box>
-    </n-form-item>
+  </collapse-item>
-    <n-form-item label="标签大小">
-      <n-input-number v-model:value="option.labelSize" />
-    </n-form-item>
-    <n-form-item label="数值大小">
-      <n-input-number v-model:value="option.valueSize" />
-    </n-form-item>
-  </div>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
 
 defineProps({
-  option: {
+  optionData: {
     type: Object as PropType<typeof option>,
     required: true
   }

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

@@ -227,17 +227,50 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType, computed, onMounted, watch } 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 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'];
+      if (!dataTemp) {
+        console.warn(`Data not found for sceneCode: ${sceneCode}, key: ${key}, componentIndexKey: ${componentIndexKey}`);
+      }
+    }
+    console.log("datatemp:", dataTemp)
+  } catch (err) {
+    // console.error('获取static.json失败:', err);
+  }
+  return dataTemp
+}
+watch(
+  () => props.chartConfig.option.dataset,
+  async (newData: any) => {
+    option.value.dataset = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode);
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+onMounted(async () => {
+  option.value.dataset = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode);
+})
+
+
 </script>
 
 <style lang="scss" scoped>

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

@@ -4,8 +4,10 @@ import { SceneDistributionConfig } from './index'
 import dataJson from './data.json'
 
 export const option = {
+  sceneCode: 'T06',
+  componentIndexKey: "a",
   dataset: dataJson.source,
-  title: '场景分布概况',
+  titleText: '场景分布概况',
   titleColor: '#eee',
   titleSize: 16,
   labelColor: '#E6F7FF',
@@ -16,6 +18,7 @@ export const option = {
   linkText: '查看更多>>'
 }
 
+
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = SceneDistributionConfig.key
   public chartConfig = SceneDistributionConfig

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

@@ -1,29 +1,25 @@
 <template>
-  <div class="go-scene-distribution-config">
+  <collapse-item name="信息" :expanded="true">
-    <n-form-item label="标题">
+    <setting-item-box name="场景 Code " :alone="true">
-      <n-input v-model:value="option.title" />
+      <setting-item>
-    </n-form-item>
+        <n-input v-model:value="optionData.sceneCode"></n-input>
-    <n-form-item label="标题大小">
+      </setting-item>
-      <n-input-number v-model:value="option.titleSize" />
+    </setting-item-box>
-    </n-form-item>
+    <setting-item-box name="组件 key " :alone="true">
-    <n-form-item label="标签大小">
+      <setting-item>
-      <n-input-number v-model:value="option.labelSize" />
+        <n-input v-model:value="optionData.componentIndexKey"></n-input>
-    </n-form-item>
+      </setting-item>
-    <n-form-item label="数值大小">
+    </setting-item-box>
-      <n-input-number v-model:value="option.valueSize" />
+  </collapse-item>
-    </n-form-item>
-    <n-form-item label="链接文字">
-      <n-input v-model:value="option.linkText" />
-    </n-form-item>
-  </div>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
 
 defineProps({
-  option: {
+  optionData: {
     type: Object as PropType<typeof option>,
     required: true
   }

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

@@ -197,15 +197,15 @@
     </svg>
 
     <div class="go-scene-distribution">
-      <div class="header-title">场景分布概况</div>
+      <div class="header-title">{{ option.titleText }}</div>
 
 
       <div class="content">
         <div v-for="(item, index) in option.dataset" :key="index" class="scene-item">
           <div class="item-title" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ item.title
-            }}</div>
+          }}</div>
           <div class="item-label" :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ item.label
-            }}</div>
+          }}</div>
           <div class="cube-container">
             <img :src="getImageUrl(item.image)" class="cube-image" />
           </div>
@@ -221,8 +221,11 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType, computed, onMounted } from 'vue'
 import { option as configOption } from './config'
+import axios from 'axios'
+import { SceneDistributionConfig } from './index'
+
 
 const props = defineProps({
   chartConfig: {
@@ -231,11 +234,35 @@ const props = defineProps({
   }
 })
 
-const option = computed(() => props.chartConfig.option)
+const option = computed(() => props.chartConfig.option);
-
 const getImageUrl = (name: string) => {
   return new URL(`./assets/${name}`, import.meta.url).href
 }
+
+
+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'];
+      if (!dataTemp) {
+        console.warn(`Data not found for sceneCode: ${sceneCode}, key: ${key}, componentIndexKey: ${componentIndexKey}`);
+      }
+    }
+    console.log("datatemp:", dataTemp)
+
+  } catch (err) {
+    console.error('获取static.json失败:', err);
+  }
+  return dataTemp
+}
+onMounted(async () => {
+  option.value.dataset = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode);
+})
+
 </script>
 
 <style lang="scss" scoped>