feat（echarts) 报警列表*2：完善列表接口与请求

src/packages/components/Charts/ConfinedSpace/AlarmNowList/data.json

@@ -1,32 +1,14 @@
 [
   {
-    "title": "报警信息报警信息",
+    "alarmTime": "2025-08-24T23:36:39.000+00:00",
-    "level": "重大",
+    "alarmLevel": "较大风险",
-    "time": "12:23:23",
+    "compName": "长客安网系统",
-    "dept": "公司简称公司简称"
+    "alarmDescname": "鲁UH9206于2025-08-22T07:36:39发生行人碰撞报警"
   },
   {
-    "title": "报警信息报警信息",
+    "alarmTime": "2025-08-24T23:34:32.000+00:00",
-    "level": "重大",
+    "alarmLevel": "较大风险",
-    "time": "12:23:23",
+    "compName": "大连安网系统",
-    "dept": "公司简称公司简称"
+    "alarmDescname": "鲁UH9206于2025-08-22T07:34:32发生行人碰撞报警"
-  },
-  {
-    "title": "报警信息报警信息",
-    "level": "重大",
-    "time": "12:23:23",
-    "dept": "公司简称公司简称"
-  },
-  {
-    "title": "报警信息报警信息",
-    "level": "重大",
-    "time": "12:23:23",
-    "dept": "公司简称公司简称"
-  },
-  {
-    "title": "报警信息报警信息",
-    "level": "重大",
-    "time": "12:23:23",
-    "dept": "公司简称公司简称"
   }
 ]

src/packages/components/Charts/ConfinedSpace/AlarmNowList/index.vue

@@ -10,12 +10,12 @@
           <div v-else-if="showRankNum" class="levelOtherIcon flex_c">{{ index + 1 }}</div>
           <div class="item_content">
             <div class="item_header flex">
-              <div class="item_level_text">{{ item.level }}</div>
+              <div class="item_level_text">{{ item.alarmLevel }}</div>
-              <div class="item_title_text">{{ item.title }}</div>
+              <div class="item_title_text">{{ item.alarmDescname }}</div>
             </div>
             <div class="item_footer">
-              <div class="item_dept">{{ item.dept }}</div>
+              <div class="item_dept">{{ item.compName }}</div>
-              <div class="item_time">{{ item.time }}</div>
+              <div class="item_time">{{ item.alarmTime }}</div>
             </div>
           </div>
         </div>
@@ -71,7 +71,7 @@
                 .substring(1, (status.selectedRow as any)?.pathName.length)
                 .replaceAll('/', '-') + (((status.selectedRow as any)?.subareaName && (status.selectedRow as
                   any)?.subareaName !== '') ? (status.selectedRow as any)?.subareaName : '')
-              }}</span>
+            }}</span>
           </div>
           <div class="detail-item" style="display: flex; flex-direction: column"
             v-if="(status.selectedRow as any)?.camerainfos.length > 0">
@@ -122,11 +122,11 @@
 <script setup lang="ts">
 // @ts-nocheck
 
-import { PropType, toRefs, shallowReactive, watch, ref, reactive } from 'vue'
+import { PropType, toRefs, shallowReactive, watch, ref, reactive, onMounted, onUnmounted } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { option as configOption } from './config'
+import { option as configOption } from './config' // 移除此行，不再从config导入初始数据
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
 import PlayBack from '@/components/Pages/yushiVideo/playback.vue'
 import PlayLive from '@/components/Pages/yushiVideo/playLive.vue'
@@ -148,10 +148,13 @@ const status = reactive({
 const { rowNum, waitTime, showRankNum } = toRefs(props.chartConfig.option)
 const { w, h } = toRefs(props.chartConfig.attr)
 
+
 const option = shallowReactive({
   dataset: configOption.dataset
 })
 
+
+
 const handleChangeDevice = (value: string | number) => {
   status.selectedRow.cameraId = value
   // if (status.selectedRow.alarmGroup.find(item => item.cameraId === value)) {
@@ -238,6 +241,64 @@ const handleCloseDialog = () => {
   status.showDialog = false
   status.selectedRow = null
 }
+const fetchRecentAlarms = async () => {
+  try {
+    isLoading.value = true;
+
+    const res = await axiosInstance({
+      method: 'GET',
+      url: `/space/getRecentAlarms`,
+      responseType: 'json'
+    });
+
+    if (res && res.value) {
+      let rawData = [];
+      if (Array.isArray(res.value.items)) {
+        rawData = res.value.items;
+      } else if (Array.isArray(res.value)) {
+        rawData = res.value;
+      }
+
+      const formattedData = rawData.map(item => {
+        let newAlarmDescname = item.alarmDescname;
+
+
+        const dateTimeRegexInDesc = /于\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/;
+        if (newAlarmDescname) {
+          newAlarmDescname = newAlarmDescname.replace(dateTimeRegexInDesc, '');
+        }
+        return {
+          ...item,
+          alarmTime: convertTimestampToDateTime(item.alarmTime), // 格式化 alarmTime
+          alarmDescname: newAlarmDescname // 更新 alarmDescname，移除时间部分
+        };
+      });
+
+      option.dataset = formattedData; // 更新 option 的 dataset
+    } else {
+      console.warn('API返回数据格式不符合预期:', res);
+      option.dataset = [];
+    }
+  } catch (error) {
+    console.error('获取最近报警数据失败:', error);
+    option.value.dataset = [];
+  } finally {
+    isLoading.value = false;
+  }
+};
+let alarmTimer = null;
+
+onMounted(() => {
+  fetchRecentAlarms();
+  // 每5分钟执行一次
+  const interval = 5 * 60 * 1000;
+  alarmTimer = setInterval(fetchRecentAlarms, interval);
+});
+
+onUnmounted(() => {
+  clearInterval(alarmTimer);
+});
+
 </script>
 
 <style lang="scss" scoped>
@@ -282,6 +343,7 @@ const handleCloseDialog = () => {
 
 .item_level_text {
   width: fit-content;
+  min-width: 4em;
   height: 18px;
   color: #ff9191;
   border-radius: 12px;
@@ -294,9 +356,20 @@ const handleCloseDialog = () => {
   margin-right: 20px;
 }
 
+// .item_title_text {
+//   color: #b10000;
+//   font-size: 18px;
+// }
 .item_title_text {
   color: #b10000;
   font-size: 18px;
+  white-space: nowrap;
+  /* 禁止换行 */
+  overflow: hidden;
+  /* 隐藏超出部分 */
+  text-overflow: ellipsis;
+  /* 显示省略号 */
+  flex-grow: 1; // 允许标题占据剩余空间
 }
 
 .flex_c {
@@ -330,7 +403,8 @@ const handleCloseDialog = () => {
 .item_header {
   margin-left: 20px;
   flex: 1;
-  max-width: 350px;
+  width: fit-content;
+  max-width: 450px;
   // height: 30px;
   align-items: end;
   white-space: nowrap;
@@ -340,6 +414,7 @@ const handleCloseDialog = () => {
   text-overflow: ellipsis;
   /* 显示省略号 */
   margin-top: 2px;
+  // background-color: #123E54;
 }
 
 .item_footer {
@@ -438,5 +513,4 @@ const handleCloseDialog = () => {
   padding-left: 8px;
   background: url(./text_bg.png) 0 50%/100% 100% no-repeat;
 }
-
 </style>

src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.ts

@@ -3,6 +3,8 @@ import { PieCircleCommenConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
+import { pad, padEnd } from 'lodash'
+import { calcPadding } from '@visactor/vchart/esm/util'
 export const includes = ['legend']
 
 
@@ -10,6 +12,29 @@ const otherConfig = {
   // 轮播动画
   isCarousel: false,
   color: ['#3B72E8', '#45B5E3', '#50D4A8', '#F8B55B'],
+  selectOption: {
+    show: true,
+    selectValue: 'day',
+    dataset: [
+      { label: '今日', value: 'day' },
+      { label: '本周', value: 'week' },
+      { label: '本月', value: 'month' }
+    ]
+  },
+  titleText: '今日数据',
+  titleOption: {
+    color: '#ffffff',
+    fontSize: '17px',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontFamily: 'CustomFont',
+  },
+  headerOption: {
+    paddingLeft: 30,
+    paddingRight:0,
+    paddingTop: 0,
+    paddingBottom: 0
+  }
 }
 
 // ECharts配置

src/packages/components/Charts/ConfinedSpace/PieCircleCommen/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="go-border-box">
-    <v-chart ref="vChartRef" :theme="themeColor" :init-options="initOptions" :option="option" autoresize> </v-chart>
+    <SmallBaorder01 :titleText="option.titleText" :title-option="option.titleOption"
-
+      :select-option="option.selectOption" :header-option="option.headerOption" @change="handleBorderSelectChange">
+      <v-chart class=" chart" ref="vChartRef" :theme="themeColor" :init-options="initOptions" :option="option"
+        autoresize> </v-chart>
+    </SmallBaorder01>
   </div>
 </template>
 
@@ -16,7 +19,7 @@ import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-
+import SmallBaorder01 from '../SmallBorder01Co/index.vue'
 import {
   DatasetComponent,
   GridComponent,
@@ -106,6 +109,14 @@ const dataHandle = (newData: any) => {
 
 }
 
+
+const handleBorderSelectChange = (newValue: string) => {
+  props.chartConfig.option.selectOption.selectValue = newValue // <--- 更新本地的响应式数据
+  console.log('选择器值已更改为:', newValue)
+  // 更新图表数据
+  
+}
+
 // 监听配置中的数据集变化（配置时）
 watch(
   () => props.chartConfig.option.dataset,
@@ -133,5 +144,16 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@include go(border-box) {}
+@include go(border-box) {
+
+  width: 100%;
+  height: 100%;
+}
+
+.chart {
+  // position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+}
 </style>

src/packages/components/Charts/ConfinedSpace/SmallBorder01Co/config.ts

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { SmallBorder01CoConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#1089ff', '#0000ff'],
+  backgroundColor: '#00000000'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = SmallBorder01CoConfig.key
+  public chartConfig = cloneDeep(SmallBorder01CoConfig)
+  public option = cloneDeep(option)
+
+
+}

src/packages/components/Charts/ConfinedSpace/SmallBorder01Co/config.vue

@@ -0,0 +1,54 @@
+<template>
+  <CollapseItem name="边框" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.colors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.colors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.colors[index] = option.colors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+
+  <CollapseItem name="背景" :expanded="true">
+    <SettingItemBox name="颜色">
+      <SettingItem>
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.backgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Charts/ConfinedSpace/SmallBorder01Co/index.ts

@@ -0,0 +1,17 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+// import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+// 曲线图
+export const SmallBorder01CoConfig: ConfigType = {
+  key: 'SmallBorder01Co',
+  chartKey: 'VSmallBorder01Co',
+  conKey: 'VCSmallBorder01Co',
+  title: '带标题小边框+',
+  category: 'ConfinedSpace',
+  categoryName: '有限空间',
+  package: 'Charts',
+  chartFrame: ChartFrameEnum.COMMON,
+  image: "SmallBorder01Co.png",
+}
+
+// 默认导出配置对象
+// export default SmallBorder01Config

src/packages/components/Charts/ConfinedSpace/SmallBorder01Co/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/ConfinedSpace/index.ts

@@ -1,6 +1,7 @@
-import {MapConfig} from './Map'
+import { MapConfig } from './Map'
-import {PieCircleCommenConfig} from './PieCircleCommen'
+import { PieCircleCommenConfig } from './PieCircleCommen'
-import {AlarmNowListConfig} from './AlarmNowList'
+import { AlarmNowListConfig } from './AlarmNowList'
 import { LineDropdownConfig } from './LineDropdown/index'
-export default [MapConfig,LineDropdownConfig,PieCircleCommenConfig,AlarmNowListConfig]
+import { SmallBorder01CoConfig } from './SmallBorder01Co'
+export default [MapConfig, LineDropdownConfig, PieCircleCommenConfig, AlarmNowListConfig, SmallBorder01CoConfig]
 

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

@@ -22,15 +22,16 @@ export const FontStyleObject = {
   [FontStyleEnum.ITALIC]: 'italic',
 }
 export const option = {
-  dataset: dataJson.source,
+  dataset: dataJson,
   header: ['报警事件', '时间', '所属企业', '状态'],
   headerTextColor: '#B4B4B4',
   textColor: '#ffffff',
   headerBackgroundColor: '#17325F',
   itemBackgroundColor: '#242834',
   statusColors: {
-    '未解决': '#FF4D4F',
+    // '未解决': '#FF4D4F',
-    '已解决': '#ffffff'
+    // '已解决': '#ffffff'
+    '重大风险': 'red'
   },
   headerHeight: 28,
   itemHeight: 28,

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

@@ -1,40 +1,8 @@
-{
+[
-  "source": [
+  {
-    {
+    "alarmTime": "Nananananna",
-      "event": "报警报警报警报警",
+    "alarmLevel": "Nananananna",
-      "time": "10:13:24",
+    "compName": "Nananananna",
-      "enterprise": "企业简称企业简称",
+    "alarmDescname": "Nananananna"
-      "status": "未解决"
+  }
-    },
+]
-    {
-      "event": "报警报警报警报警",
-      "time": "10:13:24",
-      "enterprise": "企业简称企业简称",
-      "status": "已解决"
-    },
-    {
-      "event": "报警报警报警报警",
-      "time": "10:13:24",
-      "enterprise": "企业简称企业简称",
-      "status": "未解决"
-    },
-    {
-      "event": "报警报警报警报警",
-      "time": "10:13:24",
-      "enterprise": "企业简称企业简称",
-      "status": "未解决"
-    },
-    {
-      "event": "报警报警报警报警",
-      "time": "10:13:24",
-      "enterprise": "企业简称企业简称",
-      "status": "未解决"
-    },
-    {
-      "event": "报警报警报警报警",
-      "time": "10:13:24",
-      "enterprise": "企业简称企业简称",
-      "status": "未解决"
-    }
-  ]
-}

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

@@ -31,19 +31,22 @@
         </div>
       </div>
       <div class="table-body">
+        <div v-if="isLoading" style="display: flex; width: 100%; justify-content: center; margin-top: 16px">
+          <n-spin size="large" />
+        </div>
         <div v-for="(item, index) in option.dataset" :key="index" class="table-row"
           :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
           <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
-            {{ item.event }}
+            {{ item.alarmDescname }}
           </div>
           <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
-            {{ item.time }}
+            {{ item.alarmTime }}
           </div>
           <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
-            {{ item.enterprise }}
+            {{ item.compName }}
           </div>
-          <div class="row-item" :style="{ color: getStatusColor(item.status), fontSize: option.fontSize + 'px' }">
+          <div class="row-item" :style="{ color: getStatusColor(item.alarmLevel), fontSize: option.fontSize + 'px' }">
-            {{ item.status }}
+            {{ item.alarmLevel }}
           </div>
         </div>
       </div>
@@ -53,21 +56,92 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+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'
+
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<{ option: typeof configOption }>,
     required: true
   }
 })
+const isLoading = ref(false)
 
 const option = computed(() => props.chartConfig.option)
 
 const getStatusColor = (status: string) => {
   return props.chartConfig.option.statusColors[status] || '#ffffff'
 }
+const convertTimestampToDateTime = (timestamp: number | string) => {
+  const date = new Date(timestamp)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = date.getHours().toString().padStart(2, '0')
+  const minutes = date.getMinutes().toString().padStart(2, '0')
+  const seconds = date.getSeconds().toString().padStart(2, '0')
+
+  return `${year}-${month}-${day} ${hours}:${minutes}`
+}
+
+const fetchRecentAlarms = async () => {
+  try {
+
+    const res: any = await axiosInstance({
+      method: 'GET',
+      url: `/space/getRecentAlarms`,
+      responseType: 'json'
+    });
+
+    if (res && res?.value) {
+      let rawData = [];
+      if (Array.isArray(res.value.items)) {
+        rawData = res.value.items;
+      } else if (Array.isArray(res.value)) {
+        rawData = res.value;
+      }
+
+      const formattedData = rawData.map((item: any) => {
+        let newAlarmDescname = item.alarmDescname;
+
+
+        const dateTimeRegexInDesc = /于\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/;
+        if (newAlarmDescname) {
+          newAlarmDescname = newAlarmDescname.replace(dateTimeRegexInDesc, '');
+        }
+        return {
+          ...item,
+          alarmTime: convertTimestampToDateTime(item.alarmTime), // 格式化 alarmTime
+          alarmDescname: newAlarmDescname // 更新 alarmDescname，移除时间部分
+        };
+      });
+
+      option.value.dataset = formattedData; // 更新 option 的 dataset
+    } else {
+      console.warn('API返回数据格式不符合预期:', res);
+      option.value.dataset = [];
+    }
+  } catch (error) {
+    console.error('获取最近报警数据失败:', error);
+    option.value.dataset = [];
+  } finally {
+    isLoading.value = false;
+  }
+};
+let alarmTimer: any = null;
+
+onMounted(() => {
+  fetchRecentAlarms();
+  // 每5分钟执行一次
+  const interval = 5 * 60 * 1000;
+  alarmTimer = setInterval(fetchRecentAlarms, interval);
+});
+
+onUnmounted(() => {
+  clearInterval(alarmTimer);
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -107,7 +107,7 @@ const configSet = {
   titlecolor: '#ffffff',
   titlePaddingX: 0,
   titlePaddingY: 0,
-  isShowButton: false
+  isShowButton: true
 }
 export { configSet }