refactor(Charts): 重构报警列表、设备状态和折线图组件

- 更新报警列表和设备状态组件的配置结构
- 优化报警列表和设备状态组件的模板和样式
- 重构折线图组件的配置结构
- 更新折线图组件的设置项

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

@@ -2,6 +2,8 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { AlarmListConfig } from './index'
 import dataJson from './data.json'
+import { cloneDeep } from 'lodash'
+import { chartInitConfig } from '@/settings/designSetting'
 export enum FontWeightEnum {
   NORMAL = '常规',
   BOLD = '加粗',
@@ -22,7 +24,7 @@ export const FontStyleObject = {
   [FontStyleEnum.ITALIC]: 'italic',
 }
 export const option = {
-  sceneCode:"",
+  sceneCode: "",
   dataset: dataJson,
   header: ['报警事件', '时间', '所属企业', '状态'],
   headerTextColor: '#B4B4B4',
@@ -37,21 +39,15 @@ export const option = {
   headerHeight: 28,
   itemHeight: 28,
   fontSize: 12,
-  title: '近60分钟报警信息',
+  titleText: '近60分钟报警信息',
-  titleSize: 16,
-  titleColor: '#eee',
   fontWeight: 'normal',
   fontStyle: 'italc',
-  paddingX: 50,
-  paddingY: -25,
-  letterSpacing: 0.5,
   isShowButton: false
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = AlarmListConfig.key
   public chartConfig = AlarmListConfig
-  public option = option
+  public option = cloneDeep(option)
-
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 500, h: 325, zIndex: 1 }
-
 }

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

@@ -1,27 +1,7 @@
 <template>
-  <SmallBorder class="SmallBorder">
   <div class="go-alarm-list">
-      <div class="header">
+    <PublicSmallBorder :title-text="option.titleText">
-        <div class="title">
+      <div class="content">
-
-          <div class="title-text">
-            <span :style="{
-              color: option.titleColor,
-              fontSize: option.titleSize + 'px',
-              fontWeight: option.fontWeight,
-              fontStyle: option.fontStyle,
-              marginLeft: option.paddingX + 'px',
-              marginTop: option.paddingY + 'px',
-              letterSpacing: option.letterSpacing + 'px'
-            }">{{ option.title }}</span>
-          </div>
-        </div>
-        <div v-if="option.isShowButton" class="header-right-squares">
-          <div class="square" style="background-color: #2e69e0"></div>
-          <div class="square" style="background-color: #2e9bf0"></div>
-          <div class="square" style="background-color: #2ef0b3"></div>
-        </div>
-      </div>
         <div class="table-header" :style="{
           height: option.headerHeight + 'px'
         }">
@@ -51,16 +31,16 @@
           </div>
         </div>
       </div>
-  </SmallBorder>
+    </PublicSmallBorder>
+  </div>
 
 </template>
 
 <script setup lang="ts">
 import { PropType, computed, ref, onMounted, onUnmounted } from 'vue'
 import { option as configOption } from './config'
-import SmallBorder from '../SmallBorder/index.vue'
 import axiosInstance from '@/api/axios'
-
+import PublicSmallBorder from '../../PublicSmallBorder/index.vue'
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<{ option: typeof configOption }>,
@@ -145,22 +125,17 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.SmallBorder {
+.go-alarm-list {
-  position: relative;
+  width: 100%;
-  // background-color: #ffffff;
+  height: 100%;
 }
 
-.go-alarm-list {
+.content {
-  position: absolute;
-  top: 0;
-  right: 0;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   color: #ffffff;
-  padding: 12px;
-  margin-top: 5px;
   box-sizing: border-box;
   // background-color: #4da6ff;
   z-index: 10;

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

@@ -2,6 +2,8 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { DeviceStatusConfig } from './index'
 import dataJson from './data.json'
+import { cloneDeep } from 'lodash'
+import { chartInitConfig } from '@/settings/designSetting'
 export const option = {
   dataset: dataJson.source,
   header: ['所属企业', '设备类型', '设备名称'],
@@ -13,9 +15,7 @@ export const option = {
   headerHeight: 30,
   itemHeight: 28,
   fontSize: 11,
-  title: '设备实时在线概况',
+  titleText: '设备实时在线概况',
-  titleSize: 16,
-  titleColor: '#eee',
   iconColor: '#00E5FF',
   onlineRate: 75,
   onlineDevice: 23,
@@ -26,13 +26,11 @@ export const option = {
   progressColor: '#00E5FF',
   progressBgColor: 'rgba(0, 0, 0, 0.1)',
   progressTextColor: '#DDE3E9',
-  paddingX: 60,
-  paddingY: -1,
-  letterSpacing: 0.5
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = DeviceStatusConfig.key
   public chartConfig = DeviceStatusConfig
-  public option = option
+  public option = cloneDeep(option)
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 500, h: 325, zIndex: 1 }
 }

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

@@ -1,27 +1,6 @@
 <template>
-  <SmallBorder>
+  <PublicSmallBorder :title-text="option.titleText">
     <div class="go-device-status">
-      <div class="header">
-        <div class="header-left" :style="{
-          marginLeft:
-            option.paddingX
-            + 'px',
-          marginTop:
-            option.paddingY
-            + 'px'
-        }
-          ">
-          <div class="title-text-bg" :style="{
-
-          }">
-            <span class="title-text" :style="{
-              letterSpacing: option.letterSpacing + 'px',
-              color: option.titleColor, fontSize: option.titleSize + 'px'
-            }">{{
-              option.title }}</span>
-          </div>
-        </div>
-      </div>
       <div class="status-section">
         <div class="rate-circle-bg">
           <div class="rate-circle"
@@ -79,15 +58,15 @@
         </div>
       </div>
     </div>
-  </SmallBorder>
+  </PublicSmallBorder>
+
 
 </template>
 
 <script setup lang="ts">
-import SmallBorder from '../SmallBorder/index.vue'
 import { PropType, computed } from 'vue'
 import { option as configOption } from './config'
-
+import PublicSmallBorder from '../../PublicSmallBorder/index.vue'
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<{ option: typeof configOption }>,
@@ -99,23 +78,13 @@ const option = computed(() => props.chartConfig.option)
 </script>
 
 <style lang="scss" scoped>
-SmallBorder {
-  position: relative;
-}
-
 .go-device-status {
-  position: absolute;
+
-  top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
-  display: flex;
+
-  flex-direction: column;
-  // background-color: #041126;
-  color: #ffffff;
-  padding: 10px 15px;
-  // padding-bottom: 3px;
   box-sizing: border-box;
+  z-index: 10;
 
   .header {
     display: flex;

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

@@ -3,10 +3,42 @@ import { LineDropdownConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
-
+import { chartInitConfig } from '@/settings/designSetting'
 export const includes = ['xAxis', 'yAxis', 'grid']
 
-const option = {
+// 其它配置
+const otherConfig = {
+  dateTime: {
+    selectValue: 'day',
+    dataset: [
+      {
+        label: '当天',
+        value: 'day'
+      },
+      {
+        label: '本周',
+        value: 'week'
+      },
+      {
+        label: '当月',
+        value: 'month'
+      },
+      {
+        label: '本季度',
+        value: 'quarter'
+      },
+      {
+        label: '当年',
+        value: 'year'
+      }
+    ]
+  },
+  sceneCode: '',
+  titleText: "报警趋势"
+}
+
+export const option = {
+  ...otherConfig,
   backgroundColor: 'rgba(13, 16, 22, 1)',
   grid: {
     left: '8%',
@@ -111,4 +143,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public key: string = LineDropdownConfig.key
   public chartConfig = cloneDeep(LineDropdownConfig)
   public option = echartOptionProfixHandle(option, includes)
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 500, h: 325, zIndex: 1 }
 }

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

@@ -1,15 +1,22 @@
 <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>
+  </collapse-item>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { NSpace, NCard, NFormItem, NInput } from 'naive-ui'
+import { option } from './config'
-import config from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 defineProps({
-  chartConfig: {
+ 
-    type: Object as PropType<config>,
+  optionData: {
+    type: Object as PropType<typeof option>,
     required: true
   }
 })

src/packages/components/Charts/MyComponents/LineDropdown/mock.json

@@ -0,0 +1,104 @@
+{
+    "day": [
+        {
+            "alarm_count": 1,
+            "hour": 6
+        },
+        {
+            "alarm_count": 1,
+            "hour": 7
+        },
+        {
+            "alarm_count": 59,
+            "hour": 12
+        },
+        {
+            "alarm_count": 71,
+            "hour": 13
+        }
+    ],
+    "week": [
+        {
+            "dayOfWeek": 1,
+            "alarm_count": 14
+        },
+        {
+            "dayOfWeek": 2,
+            "alarm_count": 15
+        },
+        {
+            "dayOfWeek": 3,
+            "alarm_count": 132
+        }
+    ],
+    "month": [
+        {
+            "alarm_count": 13,
+            "day": 17
+        },
+        {
+            "alarm_count": 75,
+            "day": 18
+        },
+        {
+            "alarm_count": 94,
+            "day": 19
+        },
+        {
+            "alarm_count": 34,
+            "day": 20
+        },
+        {
+            "alarm_count": 23,
+            "day": 21
+        },
+        {
+            "alarm_count": 6,
+            "day": 22
+        },
+        {
+            "alarm_count": 14,
+            "day": 25
+        },
+        {
+            "alarm_count": 15,
+            "day": 26
+        },
+        {
+            "alarm_count": 132,
+            "day": 27
+        }
+    ],
+    "quarter": [
+        {
+            "alarm_count": 18,
+            "month": 7
+        },
+        {
+            "alarm_count": 406,
+            "month": 8
+        }
+    ],
+    "year": [
+        {
+            "alarm_count": 10,
+            "month": 4
+        },
+        {
+            "alarm_count": 10,
+            "month": 5
+        },
+        {
+            "alarm_count": 10,
+            "month": 6
+        },
+        {
+            "alarm_count": 18,
+            "month": 7
+        },
+        {
+            "alarm_count": 406,
+            "month": 8
+        }
+    ]
+}

src/packages/components/Charts/MyComponents/LineDropdown/select.vue

@@ -0,0 +1,159 @@
+<template>
+    <div class="custom-select" @click="toggleDropdown">
+        <div class="select-display">
+            <span class="select-text">{{ getSelectedLabel() }}</span>
+            <span class="select-arrow" :class="{ 'arrow-up': isDropdownOpen }">▼</span>
+        </div>
+        <div class="select-dropdown" v-show="isDropdownOpen">
+            <div 
+                v-for="item in options" 
+                :key="item.value"
+                class="select-option"
+                :class="{ 'selected': item.value === selectedValue }"
+                @click.stop="selectOption(item)"
+            >
+                {{ item.label }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+// 定义props
+const props = defineProps<{
+    options: Array<{ label: string; value: any }>
+    selectedValue: any
+}>()
+
+// 定义emits
+const emit = defineEmits<{
+    change: [value: any]
+}>()
+
+// 响应式数据
+const isDropdownOpen = ref(false)
+
+// 切换下拉菜单显示状态
+const toggleDropdown = (event: Event) => {
+    event.stopPropagation()
+    isDropdownOpen.value = !isDropdownOpen.value
+}
+
+// 选择选项
+const selectOption = (item: any) => {
+    emit('change', item.value)
+    isDropdownOpen.value = false
+}
+
+// 获取选中项的标签
+const getSelectedLabel = () => {
+    const selectedItem = props.options.find(
+        (item: any) => item.value === props.selectedValue
+    )
+    return selectedItem ? selectedItem.label : '请选择'
+}
+
+// 点击外部关闭下拉菜单
+const handleClickOutside = (event: Event) => {
+    const target = event.target as HTMLElement
+    if (!target.closest('.custom-select')) {
+        isDropdownOpen.value = false
+    }
+}
+
+// 组件挂载时添加全局点击事件监听
+onMounted(() => {
+    document.addEventListener('click', handleClickOutside)
+})
+
+// 组件卸载时移除事件监听
+onUnmounted(() => {
+    document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<style lang="scss" scoped>
+.custom-select {
+    position: absolute;
+    top: 12px;
+    right: 14px;
+    font-size: 12px;
+    z-index: 1000;
+}
+
+.select-display {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 22px;
+    padding: 0 10px;
+    background-color: rgb(48, 110, 100);
+    color: #fff;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.select-text {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.select-arrow {
+    margin-left: 8px;
+    font-size: 10px;
+    transition: transform 0.3s ease;
+    
+    &.arrow-up {
+        transform: rotate(180deg);
+    }
+}
+
+.select-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: rgb(48, 110, 100);
+    border-radius: 6px;
+    margin-top: 2px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+    animation: slideDown 0.2s ease;
+}
+
+.select-option {
+    padding: 10px 12px;
+    color: #fff;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    
+    &:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+    
+    &.selected {
+        background-color: rgba(255, 255, 255, 0.2);
+        font-weight: bold;
+    }
+    
+    &:not(:last-child) {
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+</style>

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

@@ -4,6 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import { chartInitConfig } from '@/settings/designSetting'
 import dataJson from './data.json'
+
 export interface DataSourceItem {
   dataname: string;
   values: number[];
@@ -17,7 +18,9 @@ export interface DatasType {
   dataSource: DataSourceItem[];
 }
 
-
+const otherOption = {
+  titleText: '报警处置情况'
+}
 export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
 export const seriesItem = {
   type: 'line',
@@ -57,6 +60,34 @@ export const seriesItem = {
   }
 }
 export const option = {
+  ...otherOption,
+  sceneCode: 'T04',
+  dateTime: {
+    selectValue: 'day',
+    dataset: [
+      {
+        label: '当天',
+        value: 'day'
+      },
+      {
+        label: '本周',
+        value: 'week'
+      },
+      {
+        label: '当月',
+        value: 'month'
+      },
+      {
+        label: '本季度',
+        value: 'quarter'
+      },
+      {
+        label: '当年',
+        value: 'year'
+      }
+    ]
+  },
+
   dataset: {
     source: dataJson.dataSource[0].datavalues
   },

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

@@ -1,6 +1,5 @@
 <template>
   <!-- Echarts 全局设置 -->
-  <global-setting :optionData="optionData"></global-setting>
   <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`折线图-${index + 1}`" :expanded="true">
     <SettingItemBox name="线条">
       <SettingItem name="宽度">

src/packages/components/Charts/MyComponents/LineGraph01/mock.json

@@ -0,0 +1,197 @@
+{
+    "day": {
+        "alertTotal": 2623,
+        "unprocessedAlert ": 2624,
+        "averageResolutionTime": 2625,
+        "datavalues": [
+            [
+                "时间",
+                "数值"
+            ],
+            [
+                "13:00",
+                99
+            ],
+            [
+                "14:00",
+                19
+            ],
+            [
+                "15:00",
+                75
+            ],
+            [
+                "16:00",
+                26
+            ],
+            [
+                "17:00",
+                35
+            ],
+            [
+                "18:00",
+                20
+            ],
+            [
+                "19:00",
+                10
+            ]
+        ]
+    },
+    "week": {
+        "alertTotal": 12623,
+        "unprocessedAlert ": 12624,
+        "averageResolutionTime": 12625,
+        "datavalues": [
+            [
+                "时间",
+                "数值"
+            ],
+            [
+                "13:00",
+                93
+            ],
+            [
+                "14:00",
+                20
+            ],
+            [
+                "15:00",
+                88
+            ],
+            [
+                "16:00",
+                23
+            ],
+            [
+                "17:00",
+                90
+            ],
+            [
+                "18:00",
+                1
+            ],
+            [
+                "19:00",
+                29
+            ]
+        ]
+    },
+    "month": {
+        "alertTotal": 112623,
+        "unprocessedAlert ": 112624,
+        "averageResolutionTime": 625,
+        "datavalues": [
+            [
+                "时间",
+                "数值"
+            ],
+            [
+                "13:00",
+                73
+            ],
+            [
+                "14:00",
+                12
+            ],
+            [
+                "15:00",
+                32
+            ],
+            [
+                "16:00",
+                44
+            ],
+            [
+                "17:00",
+                33
+            ],
+            [
+                "18:00",
+                89
+            ],
+            [
+                "19:00",
+                83
+            ]
+        ]
+    },
+    "quarter": {
+        "alertTotal": 312623,
+        "unprocessedAlert ": 312624,
+        "averageResolutionTime": 312625,
+        "datavalues": [
+            [
+                "时间",
+                "数值"
+            ],
+            [
+                "13:00",
+                93
+            ],
+            [
+                "14:00",
+                33
+            ],
+            [
+                "15:00",
+                22
+            ],
+            [
+                "16:00",
+                88
+            ],
+            [
+                "17:00",
+                78
+            ],
+            [
+                "18:00",
+                42
+            ],
+            [
+                "19:00",
+                77
+            ]
+        ]
+    },
+    "year": {
+        "alertTotal": 1112623,
+        "unprocessedAlert ": 1112624,
+        "averageResolutionTime": 3625,
+        "datavalues": [
+            [
+                "时间",
+                "数值"
+            ],
+            [
+                "13:00",
+                33
+            ],
+            [
+                "14:00",
+                22
+            ],
+            [
+                "15:00",
+                54
+            ],
+            [
+                "16:00",
+                99
+            ],
+            [
+                "17:00",
+                44
+            ],
+            [
+                "18:00",
+                32
+            ],
+            [
+                "19:00",
+                54
+            ]
+        ]
+    }
+}

src/packages/components/Charts/MyComponents/LineGraph01/mock1.json

@@ -0,0 +1,101 @@
+{
+    "day": [
+        {
+            "alarm_count": 79,
+            "un_alarm_count": 45,
+            "alarm_hour": 12,
+            "avg_handle_time_seconds": 9307.5949
+        },
+        {
+            "alarm_count": 71,
+            "un_alarm_count": 45,
+            "alarm_hour": 13,
+            "avg_handle_time_seconds": 5568.1831
+        }
+    ],
+    "week": [
+        {
+            "a": 4,
+            "alarm_count": 10,
+            "avg_handle_time_seconds": 6360,
+            "alarm_time_": "2025-08-25T13:31:00",
+            "day_of_week": 25
+        },
+        {
+            "a": 4,
+            "alarm_count": 10,
+            "avg_handle_time_seconds": 12300,
+            "alarm_time_": "2025-08-26T12:02:00",
+            "day_of_week": 26
+        },
+        {
+            "a": 4,
+            "alarm_count": 100,
+            "avg_handle_time_seconds": 6801.01,
+            "alarm_time_": "2025-08-27T13:00:00",
+            "day_of_week": 27
+        },
+        {
+            "a": 4,
+            "alarm_count": 20,
+            "avg_handle_time_seconds": 8760,
+            "alarm_time_": "2025-08-28T12:16:00",
+            "day_of_week": 28
+        }
+    ],
+    "month": [
+        {
+            "alarm_count": 10,
+            "un_alarm_count": 45,
+            "alarm_date": "2025-08-25",
+            "avg_handle_time_seconds": 6360,
+            "day_of_month": 25
+        },
+        {
+            "alarm_count": 15,
+            "un_alarm_count": 45,
+            "alarm_date": "2025-08-26",
+            "avg_handle_time_seconds": 11996,
+            "day_of_month": 26
+        },
+        {
+            "alarm_count": 150,
+            "un_alarm_count": 45,
+            "alarm_date": "2025-08-27",
+            "avg_handle_time_seconds": 7537.6067,
+            "day_of_month": 27
+        }
+    ],
+    "quarter": [
+        {
+            "alarm_count": 175,
+            "un_alarm_count": 45,
+            "month": 7,
+            "avg_handle_time_seconds": 7852.4629,
+            "quarter": 3
+        },
+        {
+            "alarm_count": 175,
+            "un_alarm_count": 45,
+            "month": 8,
+            "avg_handle_time_seconds": 7852.4629,
+            "quarter": 3
+        }
+    ],
+    "year": [
+        {
+            "alarm_count": 175,
+            "un_alarm_count": 45,
+            "month": 7,
+            "year": 2025,
+            "avg_handle_time_seconds": 7852.4629
+        },
+        {
+            "alarm_count": 175,
+            "un_alarm_count": 45,
+            "month": 8,
+            "year": 2025,
+            "avg_handle_time_seconds": 7852.4629
+        }
+    ]
+}

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

@@ -1,123 +0,0 @@
-import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
-import { LineGraph02Config } from './index'
-import { CreateComponentType } from '@/packages/index.d'
-import cloneDeep from 'lodash/cloneDeep'
-import dataJson from './data.json'
-export interface DataSourceItem {
-  dataname: string;
-  values: number[];
-  datavalues: (string | number)[][];
-}
-export interface DatasType {
-  title: string;
-  names: string[];
-  tip: string;
-  dataIndex: number;
-  dataSource: DataSourceItem[];
-}
-
-
-export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
-export const seriesItem = {
-  type: 'line',
-  smooth: true,
-  symbol: 'none',
-
-  label: {
-    show: false,
-    position: 'top',
-    color: '#fff',
-    fontSize: 12
-  },
-  itemStyle: {
-    color: null,
-    borderRadius: 0
-  },
-  lineStyle: {
-    type: 'solid',
-    width: 2,
-    color: '#50BB9A'
-  },
-  areaStyle: {
-    color: {
-      type: 'linear',
-      x: 0,
-      y: 0,
-      x2: 0,
-      y2: 1,
-      colorStops: [{
-        offset: 0,
-        color: 'rgba(80,187,154,0.6)'
-      }, {
-        offset: 1,
-        color: 'rgba(80,187,154,0.3)'
-      }]
-    }
-  }
-}
-export const option = {
-  dataset: {
-    source: dataJson.dataSource[0].datavalues
-  },
-  grid: {
-    left: '15%',
-    right: '12%',
-    top: 9,
-    bottom: '25%'
-  },
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    axisLine: {
-      show: false
-    },
-    axisTick: {
-      show: false
-
-    },
-    axisLabel: {
-      color: '#B7BFC6'
-    }
-  },
-
-  yAxis: {
-    type: 'value',
-    axisLabel: {
-      formatter: '{value}s',
-      color: "#4C535B"
-    },
-
-    axisLine: {
-      show: false
-    },
-    axisTick: {
-      show: false
-    }
-  },
-  legend: {
-    show: false
-  },
-  series: [seriesItem]
-};
-
-const configSet = {
-  titlefontWeight: 'normal',
-  titlefontSize: 16,
-  titlefontStyle: 'italic',
-  titlecolor: '#eee',
-  titlePaddingX: 0,
-  titlePaddingY: 0,
-  isShowButton: true
-}
-export { configSet }
-
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key: string = LineGraph02Config.key
-  public chartConfig = cloneDeep(LineGraph02Config)
-  public mockData = dataJson
-  // 图表配置项
-  public option = echartOptionProfixHandle(option, includes)
-
-}
-

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

@@ -1,61 +0,0 @@
-<template>
-  <!-- Echarts 全局设置 -->
-  <global-setting :optionData="optionData"></global-setting>
-  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`折线图-${index + 1}`" :expanded="true">
-    <SettingItemBox name="线条">
-      <SettingItem name="宽度">
-        <n-input-number v-model:value="item.lineStyle.width" :min="1" :max="100" size="small"
-          placeholder="自动计算"></n-input-number>
-      </SettingItem>
-      <SettingItem name="类型">
-        <n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="实心点">
-      <SettingItem name="大小">
-        <n-input-number v-model:value="item.symbolSize" :min="1" :max="100" size="small"
-          placeholder="自动计算"></n-input-number>
-      </SettingItem>
-    </SettingItemBox>
-    <setting-item-box name="标签">
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="item.label.show" size="small" />
-          <n-text>展示标签</n-text>
-        </n-space>
-      </setting-item>
-      <setting-item name="大小">
-        <n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
-      </setting-item>
-      <setting-item name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
-      </setting-item>
-      <setting-item name="位置">
-        <n-select v-model:value="item.label.position" :options="[
-          { label: 'top', value: 'top' },
-          { label: 'left', value: 'left' },
-          { label: 'right', value: 'right' },
-          { label: 'bottom', value: 'bottom' }
-        ]" />
-      </setting-item>
-    </setting-item-box>
-  </CollapseItem>
-</template>
-
-<script setup lang="ts">
-import { PropType, computed } from 'vue'
-import { lineConf } from '@/packages/chartConfiguration/echarts/index'
-import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
-import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<GlobalThemeJsonType>,
-    required: true
-  }
-})
-
-const seriesList = computed(() => {
-  return props.optionData.series
-})
-</script>

src/packages/components/Charts/MyComponents/LineGraph02/data.json

@@ -1,96 +0,0 @@
-{
-  "title": "报警处置情况",
-  "names": [
-    "报警总数",
-    "未处置报警数",
-    "平均处置时长"
-  ],
-  "tip": "报警处置效率",
-  "dataIndex": 0,
-  "dataSource": [
-    {
-      "dataname": "当日",
-      "values": [
-        2623,
-        2623,
-        2623
-      ],
-      "datavalues": [
-        [
-          "时间",
-          "数值"
-        ],
-        [
-          "13:00",
-          99
-        ],
-        [
-          "14:00",
-          19
-        ],
-        [
-          "15:00",
-          75
-        ],
-        [
-          "16:00",
-          26
-        ],
-        [
-          "17:00",
-          35
-        ],
-        [
-          "18:00",
-          20
-        ],
-        [
-          "19:00",
-          10
-        ]
-      ]
-    },
-    {
-      "dataname": "昨日",
-      "values": [
-        2734,
-        2829,
-        2232
-      ],
-      "datavalues": [
-        [
-          "时间",
-          "数值"
-        ],
-        [
-          "13:00",
-          12
-        ],
-        [
-          "14:00",
-          22
-        ],
-        [
-          "15:00",
-          23
-        ],
-        [
-          "16:00",
-          3
-        ],
-        [
-          "17:00",
-          68
-        ],
-        [
-          "18:00",
-          56
-        ],
-        [
-          "19:00",
-          45
-        ]
-      ]
-    }
-  ]
-}

src/packages/components/Charts/MyComponents/LineGraph02/index.ts

@@ -1,17 +0,0 @@
-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-// import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
-// 曲线图
-export const LineGraph02Config: ConfigType = {
-  key: 'LineGraph02',
-  chartKey: 'VLineGraph02',
-  conKey: 'VCLineGraph02',
-  title: '曲线图(无边框和标题)',
-  category: 'MyComponents',
-  categoryName: '自定义组件',
-  package: 'Charts',
-  chartFrame: ChartFrameEnum.ECHARTS,
-  image: "LineGraph02.png",
-}
-
-// 默认导出配置对象
-export default LineGraph02Config

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

@@ -1,430 +0,0 @@
-<template>
-  <div class="go-border-box">
-    <!-- timeshow 按钮，添加点击事件和 ref -->
-    <div class="buttonContent">
-      <span class="title" :style="{
-        color: configSet.titlecolor,
-        fontSize: configSet.titlefontSize + 'px',
-        fontStyle: configSet.titlefontStyle,
-        fontWeight: configSet.titlefontWeight,
-        marginTop: configSet.titlePaddingY + 'px',
-        marginLeft: configSet.titlePaddingX + 'px'
-      }">{{ configData.title }}</span>
-      <button v-if="configSet.isShowButton" class="timeShow" @click="toggleDropdown" ref="buttonRef">
-        {{ configData.dataSource[selectedIndex]?.dataname || '选择数据' }}
-      </button>
-    </div>
-
-    <div v-if="showDropdown" class="dropdown-list" ref="dropdownRef">
-      <div v-for="(item, index) in configData.dataSource" :key="index" class="dropdown-item"
-        :class="{ 'is-active': index === selectedIndex }" @click="selectDataSource(index)">
-        {{ item.dataname }}
-      </div>
-    </div>
-
-    <div class="textContent">
-      <div class="textInContent">
-        <span class="smallText">{{ configData.names[0] }} </span>
-        <span class="bigText">{{ configData.dataSource[selectedIndex].values[0]?.toLocaleString('en-US')
-        }}</span>
-      </div>
-      <div class="textInContent">
-        <span class="smallText">{{ configData.names[1] }}</span>
-        <span class="bigText">{{ configData.dataSource[selectedIndex].values[1]?.toLocaleString('en-US')
-        }}</span>
-      </div>
-      <div class="textInContent">
-        <span class="smallText">{{ configData.names[2] }}</span>
-        <span class="bigText">{{ configData.dataSource[selectedIndex].values[2]?.toLocaleString('en-US')
-        }}</span>
-      </div>
-    </div>
-    <div class="chartsContent">
-      <span class="smallText Tips">
-        <img class="icon" src="./assets/icon01.png" alt="">
-        {{ configData.tip }}</span>
-      <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="chartOption" :update-options="{
-        replaceMerge: replaceMergeArr
-      }" autoresize>
-      </v-chart>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType, computed, watch, ref, nextTick, onMounted, onUnmounted } from 'vue'
-import VChart from 'vue-echarts'
-import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import { LineChart } from 'echarts/charts'
-import Config, { DatasType, includes, seriesItem, configSet } from './config'
-import { mergeTheme } from '@/packages/public/chart'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useChartDataFetch } from '@/hooks'
-import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-import isObject from 'lodash/isObject'
-
-
-const props = defineProps({
-  themeSetting: {
-    type: Object,
-    required: true
-  },
-  themeColor: {
-    type: Object,
-    required: true
-  },
-  chartConfig: {
-    type: Object as PropType<Config>,
-    required: true
-  }
-})
-
-const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
-
-use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
-
-const replaceMergeArr = ref<string[]>()
-
-
-const showDropdown = ref(false); // 控制下拉列表显示/隐藏
-const selectedIndex = ref(0); // 当前选中的数据源索引
-
-const buttonRef = ref<HTMLElement | null>(null);
-const dropdownRef = ref<HTMLElement | null>(null);
-
-
-// 辅助函数：解析 mockData
-const parseMockData = (mockData: any): DatasType => {
-  const DEFAULT_MOCK_DATA: DatasType = {
-    title: '默认标题',
-    names: ['项1', '项2', '项3'],
-    tip: "默认提示",
-    dataIndex: 0,
-    dataSource: [{
-      dataname: '默认数据',
-      values: [0, 0, 0],
-      datavalues: [
-        ['维度', '数值'],
-        ['0', 0],
-        ['1', 0],
-        ['2', 0]
-      ]
-    }]
-  };
-
-  let parsedData: DatasType;
-  if (typeof mockData === 'string') {
-    try {
-      const tempParsed = JSON.parse(mockData);
-      parsedData = (typeof tempParsed === 'object' && tempParsed !== null) ? tempParsed : DEFAULT_MOCK_DATA;
-    } catch (e) {
-      console.error('解析 mockData 字符串失败:', e);
-      parsedData = DEFAULT_MOCK_DATA;
-    }
-  } else if (typeof mockData === 'object' && mockData !== null) {
-    parsedData = mockData;
-  } else {
-    parsedData = DEFAULT_MOCK_DATA;
-  }
-
-  if (parsedData.dataIndex === undefined || parsedData.dataIndex < 0 || parsedData.dataIndex >= parsedData.dataSource.length) {
-    parsedData.dataIndex = 0;
-  }
-
-  if (!parsedData.dataSource || parsedData.dataSource.length === 0) {
-    parsedData.dataSource = DEFAULT_MOCK_DATA.dataSource;
-  }
-
-  if (!parsedData.names || parsedData.names.length === 0) parsedData.names = DEFAULT_MOCK_DATA.names;
-
-
-  return parsedData;
-};
-
-
-const configData = computed<DatasType>(() => {
-  return parseMockData(props.chartConfig.mockData);
-});
-
-// 监听 mockData 变化，并初始化 selectedIndex
-watch(
-  () => props.chartConfig.mockData,
-  (newMockData) => {
-    const parsedData = parseMockData(newMockData);
-    selectedIndex.value = parsedData.dataIndex;
-  },
-  { immediate: true, deep: false }
-);
-
-
-
-const chartOption = computed(() => {
-  const mergedOption = mergeTheme(props.chartConfig.option, props.themeSetting, includes);
-
-
-  const currentDataSourceItem = configData.value.dataSource[selectedIndex.value];
-  const currentDatavalues = currentDataSourceItem ? currentDataSourceItem.datavalues : [];
-
-
-  if (!mergedOption.dataset) {
-    mergedOption.dataset = {};
-  }
-  mergedOption.dataset.source = currentDatavalues;
-
-  return mergedOption;
-});
-
-const wrapperStyle = computed(() => ({
-  width: props.chartConfig.attr.w + 'px',
-  height: "16%"
-}))
-
-
-// dataset 无法变更条数的补丁 (保持不变)
-watch(
-  () => props.chartConfig.option.dataset,
-  (newData: { dimensions: any }, oldData) => {
-    try {
-      if (!isObject(newData) || !('dimensions' in newData)) return
-      if (Array.isArray(newData?.dimensions)) {
-        const seriesArr = []
-        for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(seriesItem)
-        }
-        replaceMergeArr.value = ['series']
-        props.chartConfig.option.series = seriesArr
-        nextTick(() => {
-          replaceMergeArr.value = []
-        })
-      }
-    } catch (error) {
-      console.log(error)
-    }
-  },
-  {
-    deep: false
-  }
-)
-
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-
-});
-
-
-const toggleDropdown = () => {
-  showDropdown.value = !showDropdown.value;
-};
-
-
-const selectDataSource = (index: number) => {
-  selectedIndex.value = index;
-  showDropdown.value = false;
-};
-
-const handleClickOutside = (event: MouseEvent) => {
-  if (showDropdown.value && dropdownRef.value && buttonRef.value &&
-    !dropdownRef.value.contains(event.target as Node) &&
-    !buttonRef.value.contains(event.target as Node)) {
-    showDropdown.value = false;
-  }
-};
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-});
-
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-});
-</script>
-
-
-
-<style lang="scss" scoped>
-@include go(border-box) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-
-
-}
-
-.textContent {
-  padding-top: 20px;
-  /* background-color: brown; */
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  width: 100%;
-  height: 30%;
-  box-sizing: border-box;
-}
-
-.textInContent {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.chartsContent {
-  width: 100%;
-  height: 80%;
-  /* background-color: blue; */
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.textInContent .smallText {
-  font-size: 11px;
-  color: #a9a9a9;
-}
-
-.textInContent .bigText {
-  font-size: 18px;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-  color: transparent;
-  margin-top: 0.3em;
-
-}
-
-.textContent :nth-child(1) .bigText {
-  background: linear-gradient(to right, #ffdc92, #F7BDA7);
-  -webkit-background-clip: text;
-  background-clip: text;
-}
-
-.textContent :nth-child(2) .bigText {
-  background: linear-gradient(to right, #86D8F3, #6CDEDF);
-  -webkit-background-clip: text;
-  background-clip: text;
-}
-
-.textContent :nth-child(3) .bigText {
-  background: linear-gradient(to right, #6CDFBE, #A2E9D9);
-  -webkit-background-clip: text;
-  background-clip: text;
-}
-
-.Tips {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  font-size: 10px;
-  margin-top: 9px;
-  margin-bottom: 8px;
-  margin-left: 10px;
-  height: 1.6em;
-  /* width: 8em; */
-  width: fit-content;
-  padding: 0.23em 0.4em;
-  color: rgb(210, 210, 210);
-  background-color: #273F40;
-  border-radius: 7px;
-  letter-spacing: 0.1em;
-}
-
-.icon {
-  margin-right: 0.5em;
-}
-
-.border {
-  position: relative;
-}
-
-.timeShow {
-  background-color: #086C67;
-  border-radius: 10px;
-  // position: absolute;
-  // right: 6px;
-  // top: 12px;
-  color: white;
-  display: inline-flex;
-  height: 1.5em;
-  align-items: center;
-  padding-right: 5px;
-  border: 0;
-  cursor: pointer;
-  z-index: 10;
-  white-space: nowrap;
-}
-
-.timeShow::after {
-  content: "";
-  display: inline-block;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid white;
-  margin-left: 5px;
-
-}
-
-.dropdown-list {
-  position: absolute;
-  top: 45px;
-  right: 6px;
-  background-color: #1a2a3a;
-  border: 1px solid #086C67;
-  border-radius: 5px;
-  z-index: 999;
-  min-width: 100px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-  padding: 5px 0;
-  max-height: 200px;
-  overflow-y: auto;
-  white-space: nowrap;
-}
-
-.dropdown-item {
-  padding: 8px 12px;
-  color: white;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.2s ease;
-
-  &:hover {
-    background-color: #0d4a46;
-  }
-
-  &.is-active {
-    background-color: #086C67; // 选中项的背景色
-    font-weight: bold;
-  }
-
-
-}
-
-.buttonContent {
-  margin-top: 5px;
-  padding-right: 10px;
-  padding-left: 5.2em;
-  box-sizing: border-box;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  // background-color: #6CDEDF;
-}
-
-
-.buttonContent span {
-
-  font-family: 'CustomFont';
-  font-style: italic;
-  letter-spacing: 0.5px;
-  color: #eee;
-  text-shadow: 1px 3px 10px #000000;
-  font-size: 16px;
-}
-</style>

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

@@ -9,8 +9,6 @@ export const option = {
   componentIndexKey: "",
   dataset: dataJson.source,
   titleText: '场景分布概况',
-  titleColor: '#eee',
-  titleSize: 16,
   linkColor: '#00E5FF',
   linkText: '查看更多>>',
   sceneNameColor: '#ccc',
@@ -19,7 +17,7 @@ export const option = {
   labelSize: 14,
   valueColor: '#DFAB0F',
   valueColor2: '#00E5FF',
-  valueSize: 20,
+  valueSize: 18,
   borderColor: '#4A90E2'
 }
 

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

@@ -3,16 +3,42 @@ import { PieCenterConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
-
+import { chartInitConfig } from '@/settings/designSetting'
 export const includes = ['legend']
 
 // 其它配置
 const otherConfig = {
-    // 轮播动画
+    titleText: "报警统计",
-    isCarousel: false,
+    sceneCode: 'T04',
+    dateTime: {
+        selectValue: 'day',
+        dataset: [
+            {
+                label: '当天',
+                value: 'day'
+            },
+            {
+                label: '本周',
+                value: 'week'
+            },
+            {
+                label: '当月',
+                value: 'month'
+            },
+            {
+                label: '本季度',
+                value: 'quarter'
+            },
+            {
+                label: '当年',
+                value: 'year'
+            }
+        ]
+    },
+
 }
 
-const option = {
+export const option = {
     ...otherConfig,
     backgroundColor: 'transparent',
     legend: {
@@ -21,7 +47,7 @@ const option = {
         left: '60%',          // 默认更靠左一点，避免截断
         top: 'center',
         icon: 'rect',
-        showEmpty:false,
+        showEmpty: false,
         // itemWidth: 10,
         itemHeight: 8,
         itemGap: 5,
@@ -45,7 +71,8 @@ const option = {
             center: ['30%', '48%'],
             silent: true,
             z: 1,
-            data: [{ value: 1, name: '', itemStyle: { 
+            data: [{
+                value: 1, name: '', itemStyle: {
                     color: {
                         type: 'linear',
                         x: 0,
@@ -58,7 +85,8 @@ const option = {
                             { offset: 1, color: 'rgba(200, 200, 200, 0.01)' },
                         ]
                     }
-            } }],
+                }
+            }],
             label: { show: false },
             labelLine: { show: false }
         },
@@ -136,8 +164,7 @@ const option = {
                     show: false,
                 },
                 itemStyle: { shadowBlur: 12, shadowColor: 'rgba(0, 0, 0, 0.35)' }
-            },
+            }
-            data: dataJson.source
         },
         // 内部渐变装饰环（在空洞边缘，提升质感）
         {
@@ -210,4 +237,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
     public key: string = PieCenterConfig.key
     public chartConfig = cloneDeep(PieCenterConfig)
     public option = echartOptionProfixHandle(option, includes)
+    public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
 }

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

@@ -1,5 +1,12 @@
 <template>
   <div>
+    <collapse-item name="信息" :expanded="true">
+      <setting-item-box name="场景 Code " :alone="true">
+        <setting-item>
+          <n-input v-model:value="optionData.sceneCode" type="textarea" size="small"></n-input>
+        </setting-item>
+      </setting-item-box>
+    </collapse-item>
     <!-- 基础配置可以复用PieCommon的配置面板 -->
     <CollapseItem name="基础配置" :expanded="true">
       <SettingItemBox name="图例">

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

@@ -2,27 +2,49 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { TopAlarmsConfig } from './index'
 import dataJson from './data.json'
+import { cloneDeep } from 'lodash'
+import { chartInitConfig } from '@/settings/designSetting'
 export const option = {
+    sceneCode: 'T05',
+    componentIndexKey: "a",
+    dateTime: {
+        selectValue: 'day',
+        dataset: [
+            {
+                label: '当天',
+                value: 'day'
+            },
+            {
+                label: '本周',
+                value: 'week'
+            },
+            {
+                label: '当月',
+                value: 'month'
+            },
+            {
+                label: '本季度',
+                value: 'quarter'
+            },
+            {
+                label: '当年',
+                value: 'year'
+            }
+        ]
+    },
+
     dataset: dataJson.source,
-  title: '未处置报警数TOP5',
+    titleText: '未处置报警数TOP5',
-  titleColor: '#eee',
-  titleSize: 16,
     rankColor: '#5AA1AD',
     nameColor: '#eeeeee',
     valueColor: '#eeeeee',
     barColorStart: '#2f72b5',
     barColorEnd: '#99C6E6',
-  dropdownOptions: ['当日', '当月', '当年'],
-  dropdownDefault: '当日',
-  iconColor: '#00E5FF',
-  letterSpacing: 0.5,
-  paddingX: 40,
-  paddingY: -5,
     isShowButton: false
 }
 export default class Config extends PublicConfigClass implements CreateComponentType {
     public key = TopAlarmsConfig.key
     public chartConfig = TopAlarmsConfig
-  public option = option
+    public option = cloneDeep(option)
-
+    public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
 }

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

@@ -1,26 +1,25 @@
 <template>
-  <div class="go-top-alarms-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-dynamic-input v-model:value="option.dropdownOptions" placeholder="请输入选项" />
+        <n-input v-model:value="optionData.componentIndexKey"></n-input>
-    </n-form-item>
+      </setting-item>
-    <n-form-item label="默认选项">
+    </setting-item-box>
-      <n-input v-model:value="option.dropdownDefault" />
+  </collapse-item>
-    </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/TopAlarms/index.vue

@@ -1,40 +1,21 @@
 <template>
-  <SmallBorder class="SmallBorder">
   <div class="go-top-alarms">
-      <div class="header">
+    <!-- <CustomSelect :options="option.dateTime.dataset" :selectedValue="option.dateTime.selectValue"
-        <div class="title">
+      @change="handleSelectChange" class="top-select" /> -->
-          <div class="title-text">
+    <PublicSmallBorder :title-text="option.titleText" :select-option="option.dateTime" @change="handleSelectChange">
-            <span :style="{
-              color: option.titleColor,
-              fontSize: option.titleSize + 'px',
-              marginTop: option.paddingY + 'px',
-              marginLeft: option.paddingX + 'px',
-              letterSpacing: option.letterSpacing + 'px'
-            }">{{ option.title }}</span>
-          </div>
-        </div>
-        <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>
-          <li v-for="(item, index) in option.dataset" :key="index" class="alarm-item">
+          <li v-for="(item, index) in displayData" :key="index" class="alarm-item">
             <div class="item-info">
               <span class="rank" :style="{ color: option.rankColor }">
                 <span class="rank-icon"></span>
-                {{ item.rank }}
+                {{ index + 1 }}
               </span>
               <span class="name" :style="{ color: option.nameColor }">{{ item.name }}</span>
-
             </div>
             <div class="item-value">
               <span class="value" :style="{ color: option.valueColor }">{{ item.value }}</span>
             </div>
-
             <div class="progress-bar-wrapper">
               <div class="progress-bar">
                 <div class="progress" :style="{
@@ -46,17 +27,19 @@
           </li>
         </ul>
       </div>
+    </PublicSmallBorder>
   </div>
-  </SmallBorder>
-
 </template>
 
 <script setup lang="ts">
-import { ref, computed, PropType } 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'
-
+import axiosInstance from '@/api/axios'
+import { TopAlarmsConfig } from './index'
+import axios from 'axios'
+import PublicSmallBorder from '../../PublicSmallBorder/index.vue'
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<{ option: typeof configOption }>,
@@ -66,48 +49,120 @@ const props = defineProps({
 
 const option = computed(() => props.chartConfig.option)
 
-const selectedOption = ref(props.chartConfig.option.dropdownDefault)
+// 新增：存储API返回的数据
-
+const displayData: any = ref([])
-const dropdownOptions = computed(() => {
-  return props.chartConfig.option.dropdownOptions.map(opt => ({
-    label: opt,
-    key: opt
-  }))
-})
-
-const maxValue = computed(() => {
-  const values = props.chartConfig.option.dataset.map(item => item.value)
-  return Math.max(...values, 1) // Avoid division by zero
-})
 
+// 修改：基于API数据计算进度条宽度
 const calculateWidth = (value: number) => {
-  if (maxValue.value === 0) return '0%'
+  if (displayData.value.length === 0 || displayData.value[0].value === 0) {
-  return `${(value / maxValue.value) * 80}%` // Max width 80% to leave space for value
+    return '0%'
+  }
+  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) => {
+  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
 }
 
-const handleSelect = (key: string) => {
+// 新增：API调用函数
-  selectedOption.value = key
+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 = []
+      // }
+      // 使用静态数据
+      await getStaticData(key, props.chartConfig.option.componentIndexKey, props.chartConfig.option.sceneCode);
+    // 数据校验：检查响应是否存在且包含有效数据
+    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 = []
+  }
 }
+
+
+// 修改：处理下拉选择器变化，调用API
+const handleSelectChange = async (value: any) => {
+  props.chartConfig.option.dateTime.selectValue = value
+  await fetchCorpsData(value)
+}
+
+watch(
+  () => [
+    props.chartConfig.option.sceneCode,
+    props.chartConfig.option.componentIndexKey,
+    props.chartConfig.option.dataset
+  ],
+  async () => {
+    await fetchCorpsData('day');
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+
+// 新增：组件挂载时初始化数据
+onMounted(async () => {
+  const initialValue = props.chartConfig.option.dateTime.selectValue || 'day'
+  await fetchCorpsData(initialValue)
+})
 </script>
 
 <style lang="scss" scoped>
-.SmallBorder {
-  position: relative;
-}
-
 .go-top-alarms {
-  position: absolute;
+
-  top: 0;
+  width: 100%;
-  right: 0;
+  height: 100%;
+
+  .content {
     width: 100%;
     height: 100%;
-  margin-top: -10px;
-  // background-color: #0a162b;
-  padding: 15px;
-  box-sizing: border-box;
     display: flex;
     flex-direction: column;
-  color: #fff;
+    justify-content: center;
+    z-index: 10;
+    // background-color: #00e5ff;
+  }
 
   .header {
     display: flex;
@@ -124,11 +179,10 @@ const handleSelect = (key: string) => {
         height: 35px;
         display: flex;
         align-items: center;
-        padding: 0 20px 0 20px;
+        padding: 2px 20px 0 20px;
         margin-left: 0px;
         clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
 
-
         font-family: 'CustomFont';
         font-style: italic;
         letter-spacing: 0.5px;
@@ -157,16 +211,12 @@ const handleSelect = (key: string) => {
   }
 
   .content {
-    flex: 1;
-    margin-top: -15px;
-    padding-right: 10px;
-    font-size: 12.5px;
 
     ul {
       list-style: none;
       padding: 0;
       margin: 0;
-      height: 100%;
+      height: 90%;
       display: flex;
       flex-direction: column;
       justify-content: space-around;

src/packages/components/Charts/MyComponents/index.ts

@@ -7,7 +7,6 @@ import { DeviceStatusConfig } from './DeviceStatus/index'
 import { LineDropdownConfig } from './LineDropdown/index'
 import { PieCenterConfig } from './PieCenter/index'
 import { LineGraph01 } from './LineGraph01/index'
-import { LineGraph02Config } from './LineGraph02/index'
 import { MaxTrimConfig } from './MaxTrim/index'
 import { SmallBorderConfig } from './SmallBorder/index'
 
@@ -24,6 +23,5 @@ export default [
   PieCenterConfig,
   MaxTrimConfig,
   LineGraph01,
-  LineGraph02Config,
   SmallBorderConfig
 ]