Merge branch 'master' of http://119.45.132.149:3000/security/go-view-fetch

2025-09-04 17:29:07 +08:00 · 2025-09-04 17:29:07 +08:00 · cdde82a3af
commit cdde82a3af
parent 1b0c873e45 cb721ad2ce
11 changed files with 408 additions and 194 deletions
--- a/public/staticData/static.json
+++ b/public/staticData/static.json
@ -27,7 +27,7 @@
          {
            "rank": "TOP1",
            "name": "株机公司",
-            "value": 932
+            "value": 101
          },
          {
            "rank": "TOP2",
@ -162,10 +162,11 @@
            ]
          }
        ]
+      }
    },
    "TopAlarmsHaz": {
      "a": {
-          "titleText": "电动自行车停放区场景数前五的企业及场景数量",
+        "titleText": "电动自行车停车场景数企业及场景数量",
        "source": [
          {
            "rank": "TOP1",
@ -195,7 +196,7 @@
        ]
      },
      "b": {
-          "titleText": "电动汽车停车场场景数前五的企业及场景数量",
+        "titleText": "电动汽车停车场场景数企业及场景数量",
        "source": [
          {
            "rank": "TOP1",
@ -225,7 +226,7 @@
        ]
      },
      "c": {
-          "titleText": "生产用电动车停放区场景数前五的企业及场景数量",
+        "titleText": "生产用电动车停车场景数企业及场景数量",
        "source": [
          {
            "rank": "TOP1",
@ -255,7 +256,6 @@
        ]
      }
    }
-    }
  },
  "T02": {
    "SceneDistribution": {
@ -330,7 +330,7 @@
          {
            "title": "调漆作业室",
            "label": "智控场景",
-            "value": null,
+            "value": 0,
            "color": "#FFD700",
            "image": "scene-control.png"
          }
@ -419,40 +419,36 @@
    }
  },
  "T04": {
-    "SceneDistribution": {
+    "WorkshopScene": {
      "a": {
        "source": [
          {
-            "title": "危化品库",
+            "name": "危化品库",
+            "icon": "warehouse",
+            "metrics": [
+              {
                "label": "场景总数",
-            "value": 130,
-            "color": "#00E5FF",
-            "image": "scene-total.png"
+                "value": 130
              },
              {
-            "title": "危化品库",
                "label": "智控场景",
-            "value": 0,
-            "color": "#FFD700",
-            "image": "scene-control.png"
+                "value": 0
              }
            ]
          },
-      "b": {
-        "source": [
          {
-            "title": "危废品库",
-            "label": "场景总数",
-            "value": 152,
-            "color": "#00E5FF",
-            "image": "scene-total.png"
+            "name": "危废品库",
+            "icon": "warehouse",
+            "metrics": [
+              {
+                "label": "智控场景",
+                "value": 152
              },
              {
-            "title": "危废品库",
-            "label": "智控场景",
-            "value": 0,
-            "color": "#FFD700",
-            "image": "scene-control.png"
+                "label": "场景总数",
+                "value": 0
+              }
+            ]
          }
        ]
      }
@ -462,32 +458,39 @@
        "titleText": "危化品库场景数量前五的企业及场景数量",
        "source": [
          {
-            "company": "时代新材",
-            "quantity": 30
+            "rank": "TOP1",
+            "name": "时代新材",
+            "value": 30
          },
          {
-            "company": "株洲所",
-            "quantity": 16
+            "rank": "TOP2",
+            "name": "株洲所",
+            "value": 16
          },
          {
-            "company": "四方股份",
-            "quantity": 15
+            "rank": "TOP3",
+            "name": "四方股份",
+            "value": 15
          },
          {
-            "company": "产投公司",
-            "quantity": 13
+            "rank": "TOP4",
+            "name": "产投公司",
+            "value": 13
          },
          {
-            "company": "长江集团",
-            "quantity": 11
+            "rank": "TOP5",
+            "name": "长江集团",
+            "value": 11
          },
          {
-            "company": "长客股份",
-            "quantity": 11
+            "rank": "TOP6",
+            "name": "长客股份",
+            "value": 11
          },
          {
-            "company": "株机公司",
-            "quantity": 11
+            "rank": "TOP7",
+            "name": "株机公司",
+            "value": 11
          }
        ]
      },
@ -495,24 +498,29 @@
        "titleText": "危废品库场景数量前五的企业及场景数量",
        "source": [
          {
-            "company": "时代新材",
-            "quantity": 27
+            "rank": "TOP1",
+            "name": "时代新材",
+            "value": 27
          },
          {
-            "company": "株机公司",
-            "quantity": 26
+            "rank": "TOP2",
+            "name": "株机公司",
+            "value": 26
          },
          {
-            "company": "株洲所",
-            "quantity": 20
+            "rank": "TOP3",
+            "name": "株洲所",
+            "value": 20
          },
          {
-            "company": "产投公司",
-            "quantity": 16
+            "rank": "TOP4",
+            "name": "产投公司",
+            "value": 16
          },
          {
-            "company": "长客股份",
-            "quantity": 12
+            "rank": "TOP5",
+            "name": "长客股份",
+            "value": 12
          }
        ]
      }
--- a/src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/index.vue
+++ b/src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/index.vue
@ -103,6 +103,15 @@ watch(
    { deep: true, immediate: true }
 )

+
+
+
+
+
+
+
+
+
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
    updateChartData(newData)
 })
--- a/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/config.ts
+++ b/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)

 }
--- a/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/index.vue
+++ b/src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/index.vue
@ -18,9 +18,22 @@
        <n-dropdown v-if='option.isShowButton' trigger="hover" :options="dropdownOptions" @select="handleSelect">
          <div class="dropdown-button">
            {{ selectedOption }}
-            <svg-icon icon-class="arrow-down" class="arrow-down-icon" />
+            <div class="arrow-down-icon">
+              <svg viewBox="0 0 1024 1024" width="14" height="14">
+                <path
+                  d="M512 768c-6.3 0-12.6-2.4-17.4-7.3L285.3 551.4c-9.8-9.8-9.8-25.6 0-35.4s25.6-9.8 35.4 0L512 707.3l191.3-191.3c9.8-9.8 25.6-9.8 35.4 0s9.8 25.6 0 35.4L529.4 760.7c-4.8 4.9-11.1 7.3-17.4 7.3z"
+                  fill="currentColor"></path>
+              </svg>
+            </div>
          </div>
        </n-dropdown>
+        <!-- <n-dropdown v-if='option.isShowButton' trigger="hover" :options="dropdownOptions" @select="handleSelect">
+          <div class="dropdown-button">
+            {{ selectedOption }}
+            <svg-icon icon-class="arrow-down" class="arrow-down-icon" />
+          </div>
+          
+        </n-dropdown> -->
      </div>
      <div class="content">
        <ul>
@ -30,15 +43,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>
@ -51,7 +64,7 @@
 </template>

 <script setup lang="ts">
-import { ref, computed, PropType, onMounted } from 'vue'
+import { ref, computed, PropType, onMounted, watch } from 'vue'
 import { option as configOption } from './config'
 import SmallBorder from '../SmallBorder/index.vue'
 import CustomSelect from './select.vue'
@ -80,11 +93,11 @@ const dropdownOptions = computed(() => {

 // 修改：基于API数据计算进度条宽度
 const calculateWidth = (value: number) => {
-  if (displayData.value.length === 0 || displayData.value[0].alarmCount === 0) {
+  if (displayData.value.length === 0 || displayData.value[0].value === 0) {
    return '0%'
  }
-  const firstRowValue = displayData.value[0].alarmCount
-  return `${(value / firstRowValue) * 100}%` // 当前行的alarmCount/第一行的alarmCount值
+  const firstRowValue = displayData.value[0].value
+  return `${(value / firstRowValue) * 100}%` // 当前行的value/第一行的value值
 }
 const key = TopAlarmsConfig.key;
 const getStaticData = async (key: string, componentIndexKey: string, sceneCode: string) => {
@ -120,8 +133,24 @@ const fetchCorpsData = async (option: string) => {
      // }
      // 使用静态数据
      await getStaticData(key, props.chartConfig.option.componentIndexKey, props.chartConfig.option.sceneCode);
-    displayData.value = response['source']
-    props.chartConfig.option.titleText = response['titleText']
+    // 数据校验：检查响应是否存在且包含有效数据
+    if (response && response['source'] && Array.isArray(response['source']) && response['source'].length > 0) {
+      // 检查新数据是否与现有数据相同（简单比较长度和第一项）
+      const isNewDataDifferent =
+        !displayData.value ||
+        displayData.value.length !== response['source'].length ||
+        JSON.stringify(displayData.value) !== JSON.stringify(response['source']);
+
+      // 只有当数据不为空且与现有数据不同时才更新
+      if (isNewDataDifferent) {
+        displayData.value = response['source'];
+      }
+    }
+
+    // 标题文本更新（即使数据相同也更新标题）
+    if (response && response['titleText']) {
+      props.chartConfig.option.titleText = response['titleText'];
+    }
  } catch (error) {
    console.error('获取企业数据失败:', error)
    displayData.value = []
@ -138,7 +167,20 @@ const handleSelectChange = async (value: any) => {
  await fetchCorpsData(value)
 }

-
+watch(
+  () => [
+    props.chartConfig.option.sceneCode,
+    props.chartConfig.option.componentIndexKey,
+    props.chartConfig.option.dataset
+  ],
+  async () => {
+    await fetchCorpsData('day');
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)


 // 新增：组件挂载时初始化数据
--- a/src/packages/components/Charts/MyComponents/ParkingScene/config.ts
+++ b/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)
 }
--- a/src/packages/components/Charts/MyComponents/ParkingScene/index.vue
+++ b/src/packages/components/Charts/MyComponents/ParkingScene/index.vue
@ -225,52 +225,83 @@

  </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) => {
-    option.value.dataset = await getStaticData(key, option.value.componentIndexKey, option.value.sceneCode);
+  () => [
+    props.chartConfig.option.sceneCode,
+    props.chartConfig.option.componentIndexKey
+  ],
+  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>
--- a/src/packages/components/Charts/MyComponents/SceneDistribution/config.ts
+++ b/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)
 }
--- a/src/packages/components/Charts/MyComponents/SceneDistribution/index.vue
+++ b/src/packages/components/Charts/MyComponents/SceneDistribution/index.vue
@ -197,7 +197,7 @@
    </svg>

    <div class="go-scene-distribution">
-      <div class="header-title">{{ option.titleText }}</div>
+      <div class="header-title">场景分布概况</div>


      <div class="content">
@ -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>
--- a/src/packages/components/Charts/MyComponents/WorkshopScene/config.ts
+++ b/src/packages/components/Charts/MyComponents/WorkshopScene/config.ts
@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { WorkshopSceneConfig } from './index'
 import dataJson from './data.json'
+import { cloneDeep } from 'lodash'
 export enum FontWeightEnum {
  NORMAL = '常规',
  BOLD = '加粗',
@ -22,8 +23,10 @@ export const FontStyleObject = {
  [FontStyleEnum.ITALIC]: 'italic',
 }
 export const option = {
+  sceneCode: 'T06',
+  componentIndexKey: "a",
  dataset: dataJson.source,
-  title: '场景分布概况',
+  titleText: '场景分布概况',
  titleColor: '#eee',
  titleSize: 16,
  iconColor: '#00E5FF',
@ -48,5 +51,5 @@ export const option = {
 export default class Config extends PublicConfigClass implements CreateComponentType {
  public key = WorkshopSceneConfig.key
  public chartConfig = WorkshopSceneConfig
-  public option = option
+  public option = cloneDeep(option)
 }
--- a/src/packages/components/Charts/MyComponents/WorkshopScene/config.vue
+++ b/src/packages/components/Charts/MyComponents/WorkshopScene/config.vue
@ -1,5 +1,15 @@
 <template>
  <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>
    <setting-item-box name="标题" :alone="true">
      <setting-item>
        <n-input v-model:value="optionData.title" type="textarea" size="small"></n-input>
--- a/src/packages/components/Charts/MyComponents/WorkshopScene/index.vue
+++ b/src/packages/components/Charts/MyComponents/WorkshopScene/index.vue
@ -12,7 +12,7 @@
              marginLeft: option.paddingX + 'px',
              marginTop: option.paddingY + 'px',
              letterSpacing: option.letterSpacing + 'px'
-            }">{{ option.title }}</span>
+            }">{{ option.titleText }}</span>
          </div>
        </div>
        <a class="link" :style="{ color: option.linkColor }">{{ option.linkText }}</a>
@ -64,11 +64,13 @@
 </template>

 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType, computed, onMounted, ref, watch } from 'vue'
 import { option as configOption } from './config'
 import bg1 from './assets/6.png'
 import bg2 from './assets/04.png'
 import SmallBorder from '../SmallBorder/index.vue'
+import { WorkshopSceneConfig } from './index'
+import axios from 'axios'

 const backgrounds = [bg1, bg2]

@ -79,7 +81,71 @@ const props = defineProps({
  }
 })

+
 const option = computed(() => props.chartConfig.option)
+const isFetching = ref(false) // 防止重复请求
+const key = WorkshopSceneConfig.key
+// 获取静态数据
+const getStaticData = async (key: string, componentIndexKey: string, sceneCode: string) => {
+  try {
+    const response = await axios.get('/staticData/static.json');
+    if (response.data) {
+      console.log('静态数据:', response.data);
+      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;
+    }
+  } catch (err) {
+    console.error('获取static.json失败:', err);
+  }
+  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.sceneCode,
+    props.chartConfig.option.componentIndexKey,
+  ],
+  async () => {
+    await fetchData();
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+// 组件挂载时获取数据
+onMounted(async () => {
+  await fetchData();
+})
+
 </script>

 <style lang="scss" scoped>