feat（echarts) 报警列表*2：完善列表接口与请求
This commit is contained in:
parent
713715028b
commit
35ce3d5fd5
@ -1,32 +1,14 @@
|
||||
[
|
||||
{
|
||||
"title": "报警信息报警信息",
|
||||
"level": "重大",
|
||||
"time": "12:23:23",
|
||||
"dept": "公司简称公司简称"
|
||||
"alarmTime": "2025-08-24T23:36:39.000+00:00",
|
||||
"alarmLevel": "较大风险",
|
||||
"compName": "长客安网系统",
|
||||
"alarmDescname": "鲁UH9206于2025-08-22T07:36:39发生行人碰撞报警"
|
||||
},
|
||||
{
|
||||
"title": "报警信息报警信息",
|
||||
"level": "重大",
|
||||
"time": "12:23:23",
|
||||
"dept": "公司简称公司简称"
|
||||
},
|
||||
{
|
||||
"title": "报警信息报警信息",
|
||||
"level": "重大",
|
||||
"time": "12:23:23",
|
||||
"dept": "公司简称公司简称"
|
||||
},
|
||||
{
|
||||
"title": "报警信息报警信息",
|
||||
"level": "重大",
|
||||
"time": "12:23:23",
|
||||
"dept": "公司简称公司简称"
|
||||
},
|
||||
{
|
||||
"title": "报警信息报警信息",
|
||||
"level": "重大",
|
||||
"time": "12:23:23",
|
||||
"dept": "公司简称公司简称"
|
||||
"alarmTime": "2025-08-24T23:34:32.000+00:00",
|
||||
"alarmLevel": "较大风险",
|
||||
"compName": "大连安网系统",
|
||||
"alarmDescname": "鲁UH9206于2025-08-22T07:34:32发生行人碰撞报警"
|
||||
}
|
||||
]
|
||||
]
|
||||
@ -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_title_text">{{ item.title }}</div>
|
||||
<div class="item_level_text">{{ item.alarmLevel }}</div>
|
||||
<div class="item_title_text">{{ item.alarmDescname }}</div>
|
||||
</div>
|
||||
<div class="item_footer">
|
||||
<div class="item_dept">{{ item.dept }}</div>
|
||||
<div class="item_time">{{ item.time }}</div>
|
||||
<div class="item_dept">{{ item.compName }}</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>
|
||||
|
||||
@ -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配置
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
}
|
||||
@ -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>
|
||||
@ -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
|
||||
File diff suppressed because one or more lines are too long
@ -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>
|
||||
@ -1,6 +1,7 @@
|
||||
import {MapConfig} from './Map'
|
||||
import {PieCircleCommenConfig} from './PieCircleCommen'
|
||||
import {AlarmNowListConfig} from './AlarmNowList'
|
||||
import { MapConfig } from './Map'
|
||||
import { PieCircleCommenConfig } from './PieCircleCommen'
|
||||
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]
|
||||
|
||||
|
||||
@ -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',
|
||||
'已解决': '#ffffff'
|
||||
// '未解决': '#FF4D4F',
|
||||
// '已解决': '#ffffff'
|
||||
'重大风险': 'red'
|
||||
},
|
||||
headerHeight: 28,
|
||||
itemHeight: 28,
|
||||
|
||||
@ -1,40 +1,8 @@
|
||||
{
|
||||
"source": [
|
||||
{
|
||||
"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": "未解决"
|
||||
},
|
||||
{
|
||||
"event": "报警报警报警报警",
|
||||
"time": "10:13:24",
|
||||
"enterprise": "企业简称企业简称",
|
||||
"status": "未解决"
|
||||
}
|
||||
]
|
||||
}
|
||||
[
|
||||
{
|
||||
"alarmTime": "Nananananna",
|
||||
"alarmLevel": "Nananananna",
|
||||
"compName": "Nananananna",
|
||||
"alarmDescname": "Nananananna"
|
||||
}
|
||||
]
|
||||
@ -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' }">
|
||||
{{ item.status }}
|
||||
<div class="row-item" :style="{ color: getStatusColor(item.alarmLevel), fontSize: option.fontSize + 'px' }">
|
||||
{{ 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>
|
||||
|
||||
@ -107,7 +107,7 @@ const configSet = {
|
||||
titlecolor: '#ffffff',
|
||||
titlePaddingX: 0,
|
||||
titlePaddingY: 0,
|
||||
isShowButton: false
|
||||
isShowButton: true
|
||||
}
|
||||
export { configSet }
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user