chore：报警列表移至危品大屏

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

@@ -0,0 +1,57 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { AlarmListHazCConfig } from './index'
+import dataJson from './data.json'
+export enum FontWeightEnum {
+  NORMAL = '常规',
+  BOLD = '加粗',
+}
+
+export enum FontStyleEnum {
+  NORMAL = '常规',
+  ITALIC = '斜体',
+}
+
+export const FontWeightObject = {
+  [FontWeightEnum.NORMAL]: 'normal',
+  [FontWeightEnum.BOLD]: 'bold',
+}
+
+export const FontStyleObject = {
+  [FontStyleEnum.NORMAL]: 'normal',
+  [FontStyleEnum.ITALIC]: 'italic',
+}
+export const option = {
+  dataset: dataJson,
+  header: ['报警事件', '时间', '所属企业', '状态'],
+  headerTextColor: '#B4B4B4',
+  textColor: '#ffffff',
+  headerBackgroundColor: '#17325F',
+  itemBackgroundColor: '#242834',
+  statusColors: {
+    // '未解决': '#FF4D4F',
+    // '已解决': '#ffffff'
+    '重大风险': 'red'
+  },
+  headerHeight: 28,
+  itemHeight: 28,
+  fontSize: 12,
+  title: '近60分钟报警信息',
+  titleSize: 17,
+  titleColor: '#ffffff',
+  iconColor: '#00E5FF',
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+  paddingX: 40,
+  paddingY: -30,
+  letterSpacing: 1,
+  isShowButton: false
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = AlarmListHazCConfig.key
+  public chartConfig = AlarmListHazCConfig
+  public option = option
+
+
+}

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

@@ -0,0 +1,70 @@
+<template>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="标题" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.title" type="textarea" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="样式" :expanded="true">
+    <setting-item-box name="标题">
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.titleColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="字体大小">
+        <n-input-number v-model:value="optionData.titleSize" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+      <setting-item name="字体粗细">
+        <n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
+      </setting-item>
+      <setting-item name="字体风格">
+        <n-select v-model:value="optionData.fontStyle" size="small" :options="fontStyleOptions" />
+      </setting-item>
+      <setting-item name="X轴内边距">
+        <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+      <setting-item name="Y轴内边距">
+        <n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+
+
+      <setting-item name="字间距">
+        <n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const fontWeightOptions = [
+  {
+    label: FontWeightEnum.NORMAL,
+    value: FontWeightObject[FontWeightEnum.NORMAL]
+  },
+  {
+    label: FontWeightEnum.BOLD,
+    value: FontWeightObject[FontWeightEnum.BOLD]
+  }
+]
+const fontStyleOptions = [
+  {
+    label: FontStyleEnum.NORMAL,
+    value: FontStyleObject[FontStyleEnum.NORMAL]
+  },
+  {
+    label: FontStyleEnum.ITALIC,
+    value: FontStyleObject[FontStyleEnum.ITALIC]
+  }
+]
+</script>

src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/data.json

@@ -0,0 +1,8 @@
+[
+  {
+    "alarmTime": "Nananananna",
+    "alarmLevel": "Nananananna",
+    "compName": "Nananananna",
+    "alarmDescname": "Nananananna"
+  }
+]

src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/index.ts

@@ -0,0 +1,15 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const AlarmListHazCConfig: ConfigType = {
+  key: 'AlarmListHazC',
+  chartKey: 'VAlarmListHazC',
+  conKey: 'VCAlarmListHazC',
+  title: '报警列表带接口',
+  category: 'HazardousChemicalsSpace',
+  categoryName: '危化品场景',
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'alarm_list.png'
+}
+export default AlarmListHazCConfig

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

@@ -0,0 +1,251 @@
+<template>
+  <SmallBorder class="SmallBorder">
+    <div class="go-alarm-list">
+      <div class="header">
+        <div class="title">
+
+          <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'
+      }">
+        <div v-for="header in option.header" :key="header" class="header-item"
+          :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
+          {{ header }}
+        </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.alarmDescname }}
+          </div>
+          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
+            {{ item.alarmTime }}
+          </div>
+          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
+            {{ item.compName }}
+          </div>
+          <div class="row-item" :style="{ color: getStatusColor(item.alarmLevel), fontSize: option.fontSize + 'px' }">
+            {{ item.alarmLevel }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </SmallBorder>
+
+</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'
+
+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 as Record<string, string>)[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>
+.SmallBorder {
+  position: relative;
+  // background-color: #ffffff;
+}
+
+.go-alarm-list {
+  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;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .title {
+      display: flex;
+      align-items: center;
+
+      .title-text {
+        height: 35px;
+        display: flex;
+        align-items: center;
+        padding: 0 20px 0 20px;
+      }
+    }
+
+    .header-right-squares {
+      display: flex;
+      align-items: center;
+
+      .square {
+        width: 10px;
+        height: 10px;
+        margin-left: 5px;
+      }
+    }
+  }
+
+  .table-header {
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    background: linear-gradient(to top, #226493c8, #0f2448);
+    border-bottom: 2px solid #4da6ff;
+    margin-top: 10px;
+
+    .header-item {
+      flex: 1 0 25%;
+      margin-right: 1.5em;
+      text-align: left;
+    }
+  }
+
+  .table-body {
+    flex: 1;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* 隐藏滚动条 */
+      width: 0;
+      height: 0;
+    }
+
+    scrollbar-width: none;
+
+    .table-row {
+      display: flex;
+      align-items: center;
+      padding: 0 10px;
+      margin-bottom: 4px;
+
+      &:first-child {
+        margin-top: 5px;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .row-item {
+        flex: 1 0 25%;
+        margin-right: 1.5em;
+
+        text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+</style>

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

@@ -68,6 +68,11 @@ $border-gradient-end: rgba(128, 128, 128, 0);
     width: 100%;
     height: 12%;
     // background-color: antiquewhite;
+
+    & .svg {
+      width: 100%;
+    }
   }
+
 }
 </style>

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

@@ -5,6 +5,7 @@ import { LineDropdownConfig } from './LineDropdownHaz/index'
 import { AlarmListConfig } from './AlarmListHaz/index'
 import { LineGraph01 } from './LineGraph01Haz/index'
 import {TopAlarmsConfig} from './TopAlarmsHaz/index'
+import AlarmListHazCConfig from './AlarmListHazC'
 
 export default [
   yushiVideoConfig,
@@ -13,5 +14,6 @@ export default [
   LineDropdownConfig,
   AlarmListConfig,
   LineGraph01,
-  TopAlarmsConfig
+  TopAlarmsConfig,
+  AlarmListHazCConfig
 ]