refactor(Charts): 重构报警列表组件

- 使用 PublicSmallBorder 组件替换原有的 SmallBorder 组件
This commit is contained in:
Free-sss 2025-09-08 13:56:24 +08:00
parent 24c94f56f9
commit 1b4064f655
2 changed files with 43 additions and 64 deletions

View File

@ -37,7 +37,7 @@ export const option = {
headerHeight: 28, headerHeight: 28,
itemHeight: 28, itemHeight: 28,
fontSize: 12, fontSize: 12,
title: '近60分钟报警信息', titleText: '近60分钟报警信息',
titleSize: 16, titleSize: 16,
titleColor: '#eee', titleColor: '#eee',
fontWeight: 'normal', fontWeight: 'normal',

View File

@ -1,27 +1,7 @@
<template> <template>
<SmallBorder class="SmallBorder">
<div class="go-alarm-list"> <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="{ <div class="table-header" :style="{
height: option.headerHeight + 'px' height: option.headerHeight + 'px'
}"> }">
@ -51,7 +31,11 @@
</div> </div>
</div> </div>
</div> </div>
</SmallBorder> </PublicSmallBorder>
</div>
</template> </template>
@ -60,7 +44,7 @@ import { PropType, computed, ref, onMounted, onUnmounted } from 'vue'
import { option as configOption } from './config' import { option as configOption } from './config'
import SmallBorder from '../SmallBorder/index.vue' import SmallBorder from '../SmallBorder/index.vue'
import axiosInstance from '@/api/axios' import axiosInstance from '@/api/axios'
import PublicSmallBorder from '../../Public_SmallBorder/index.vue'
const props = defineProps({ const props = defineProps({
chartConfig: { chartConfig: {
type: Object as PropType<{ option: typeof configOption }>, type: Object as PropType<{ option: typeof configOption }>,
@ -89,7 +73,7 @@ const convertTimestampToDateTime = (timestamp: number | string) => {
const fetchRecentAlarms = async () => { const fetchRecentAlarms = async () => {
try { try {
const res: any = await axiosInstance.get( const res: any = await axiosInstance.get(
`/awjt/space/getRecentAlarms/${option.value.sceneCode}`, `/awjt/space/getRecentAlarms`,
{ {
responseType: 'json', responseType: 'json',
baseURL: '' baseURL: ''
@ -147,22 +131,17 @@ onUnmounted(() => {
</script> </script>
<style lang="scss" scoped> <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%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: #ffffff; color: #ffffff;
padding: 12px;
margin-top: 5px;
box-sizing: border-box; box-sizing: border-box;
// background-color: #4da6ff; // background-color: #4da6ff;
z-index: 10; z-index: 10;