zS/go-viee-fetch-Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 使用 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/config.ts
View File

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

105
src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/index.vue
View File

@ -1,57 +1,41 @@
<template>
<SmallBorder class="SmallBorder">
<div class="go-alarm-list">
<div class="header">
<div class="title">
<div class="go-alarm-list">
<PublicSmallBorder :title-text="option.titleText">
<div class="content">
<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>
</PublicSmallBorder>
</div>
<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>
@ -60,7 +44,7 @@ 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 '../../Public_SmallBorder/index.vue'
const props = defineProps({
chartConfig: {
type: Object as PropType<{ option: typeof configOption }>,
@ -89,7 +73,7 @@ const convertTimestampToDateTime = (timestamp: number | string) => {
const fetchRecentAlarms = async () => {
try {
const res: any = await axiosInstance.get(
`/awjt/space/getRecentAlarms/${option.value.sceneCode}`,
`/awjt/space/getRecentAlarms`,
{
responseType: 'json',
baseURL: ''
@ -147,22 +131,17 @@ onUnmounted(() => {
</script>
<style lang="scss" scoped>
.SmallBorder {
position: relative;
// background-color: #ffffff;
.go-alarm-list {
width: 100%;
height: 100%;
}
.go-alarm-list {
position: absolute;
top: 0;
right: 0;
.content {
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;