lucas/go-view-fetch
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

23423

Browse Source
This commit is contained in:
lucashu 2025-08-20 18:03:57 +08:00
parent 503939f581
commit 3e1f8ad061
2 changed files with 87 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/packages/components/Charts/MyComponents/AlarmList/config.ts
View File

@ -6,13 +6,13 @@ import dataJson from './data.json'
export const option = {
dataset: dataJson.source,
header: ['报警事件', '时间', '所属企业', '状态'],
headerTextColor: '#ffffff',
headerTextColor: '#B4B4B4',
textColor: '#ffffff',
headerBackgroundColor: '#1A385A',
itemBackgroundColor: '#0F233E',
headerBackgroundColor: '#17325F',
itemBackgroundColor: 'transparent',
statusColors: {
'未解决': '#FF4D4F',
'已解决': '#52C41A'
'已解决': '#B4B4B4'
},
headerHeight: 40,
itemHeight: 35,

102
src/packages/components/Charts/MyComponents/AlarmList/index.vue
View File

@ -2,21 +2,51 @@
<div class="go-alarm-list">
<div class="header">
<div class="title">
<svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
<span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
<div class="title-prefix">
<svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
</div>
<div class="title-text">
<span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
</div>
</div>
<div 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="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }">
<div v-for="header in option.header" :key="header" class="header-item" :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
<div
class="table-header"
:style="{ backgroundColor: option.headerBackgroundColor, 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-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 }}</div>
<div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.time }}</div>
<div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.enterprise }}</div>
<div class="row-item" :style="{ color: getStatusColor(item.status), fontSize: option.fontSize + 'px' }">{{ item.status }}</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 }}
</div>
<div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
{{ item.time }}
</div>
<div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
{{ item.enterprise }}
</div>
<div class="row-item" :style="{ color: getStatusColor(item.status), fontSize: option.fontSize + 'px' }">
{{ item.status }}
</div>
</div>
</div>
</div>
@ -46,28 +76,54 @@ const getStatusColor = (status: string) => {
height: 100%;
display: flex;
flex-direction: column;
background-color: #0F233E;
background-color: #0a162b;
color: #ffffff;
padding: 10px;
padding: 15px;
box-sizing: border-box;
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
margin-bottom: 15px;
.title {
display: flex;
align-items: center;
.title-icon {
font-size: 24px;
margin-right: 10px;
.title-prefix {
width: 35px;
height: 35px;
background-color: #1e55a7;
clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
display: flex;
justify-content: center;
align-items: center;
.title-icon {
font-size: 22px;
}
}
.title-text {
height: 35px;
display: flex;
align-items: center;
background-color: #17325f;
padding: 0 20px 0 20px;
margin-left: -8px;
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
}
}
.header-right-squares {
display: flex;
align-items: center;
.square {
width: 10px;
height: 10px;
margin-left: 5px;
}
}
}
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
.header-item {
@ -81,15 +137,23 @@ const getStatusColor = (status: string) => {
overflow-y: auto;
.table-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
border-bottom: 1px solid #1A385A;
border-bottom: 1px solid rgba(26, 56, 90, 0.8);
&:first-child {
margin-top: 5px;
}
&:last-child {
border-bottom: none;
}
.row-item {
flex: 1;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
</style>
</style>