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

2025-09-04 14:41:22 +08:00 · 2025-09-04 14:41:22 +08:00 · bb953d480a
commit bb953d480a
parent 83c7559804
9 changed files with 148 additions and 60 deletions
--- a/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/config.ts
+++ b/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',
--- a/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/config.vue
+++ b/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>

--- a/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/index.vue
+++ b/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: '' })
-    if (response.state === true) {
-      displayData.value = response.value || []
-    } else {
-      console.error('API调用失败:', response)
-      displayData.value = []
-    }
+    const response: any =
+      // await axiosInstance.get(`/awjt/screen/corpsFive/${option}/${props.chartConfig.option.sceneCode}`, { baseURL: '' })
+
+    // if (response.state === true) {
+    //   displayData.value = response.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'
--- a/src/packages/components/Charts/MyComponents/ParkingScene/config.ts
+++ b/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',
--- a/src/packages/components/Charts/MyComponents/ParkingScene/config.vue
+++ b/src/packages/components/Charts/MyComponents/ParkingScene/config.vue
@ -1,32 +1,25 @@
 <template>
-
-  <div class="go-parking-scene-config">
-
-    <n-form-item label="标题">
-      <n-input v-model:value="option.title" />
-    </n-form-item>
-    <n-form-item label="标题大小">
-      <n-input-number v-model:value="option.titleSize" />
-    </n-form-item>
-    <n-form-item label="场景名称大小">
-      <n-input-number v-model:value="option.sceneNameSize" />
-    </n-form-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>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="场景 Code " :alone="true">
+      <setting-item>
+        <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>

 <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
  }
--- a/src/packages/components/Charts/MyComponents/ParkingScene/index.vue
+++ b/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>
--- a/src/packages/components/Charts/MyComponents/SceneDistribution/config.ts
+++ b/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
--- a/src/packages/components/Charts/MyComponents/SceneDistribution/config.vue
+++ b/src/packages/components/Charts/MyComponents/SceneDistribution/config.vue
@ -1,29 +1,25 @@
 <template>
-  <div class="go-scene-distribution-config">
-    <n-form-item label="标题">
-      <n-input v-model:value="option.title" />
-    </n-form-item>
-    <n-form-item label="标题大小">
-      <n-input-number v-model:value="option.titleSize" />
-    </n-form-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>
-    <n-form-item label="链接文字">
-      <n-input v-model:value="option.linkText" />
-    </n-form-item>
-  </div>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="场景 Code " :alone="true">
+      <setting-item>
+        <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>

 <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
  }
--- a/src/packages/components/Charts/MyComponents/SceneDistribution/index.vue
+++ b/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>