zS/go-view-fetch
1
0
Fork 0
forked from lucas/go-view-fetch
Code Pull Requests 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 = { export const option = {
dataset: dataJson.source, dataset: dataJson.source,
header: ['报警事件', '时间', '所属企业', '状态'], header: ['报警事件', '时间', '所属企业', '状态'],
headerTextColor: '#ffffff', headerTextColor: '#B4B4B4',
textColor: '#ffffff', textColor: '#ffffff',
headerBackgroundColor: '#1A385A', headerBackgroundColor: '#17325F',
itemBackgroundColor: '#0F233E', itemBackgroundColor: 'transparent',
statusColors: { statusColors: {
'未解决': '#FF4D4F', '未解决': '#FF4D4F',
'已解决': '#52C41A' '已解决': '#B4B4B4'
}, },
headerHeight: 40, headerHeight: 40,
itemHeight: 35, itemHeight: 35,

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

@ -2,21 +2,51 @@
<div class="go-alarm-list"> <div class="go-alarm-list">
<div class="header"> <div class="header">
<div class="title"> <div class="title">
<div class="title-prefix">
<svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon> <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> <span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
</div> </div>
</div> </div>
<div class="table-header" :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }"> <div class="header-right-squares">
<div v-for="header in option.header" :key="header" class="header-item" :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }"> <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' }"
>
{{ header }} {{ header }}
</div> </div>
</div> </div>
<div class="table-body"> <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
<div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.event }}</div> v-for="(item, index) in option.dataset"
<div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.time }}</div> :key="index"
<div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.enterprise }}</div> class="table-row"
<div class="row-item" :style="{ color: getStatusColor(item.status), fontSize: option.fontSize + 'px' }">{{ item.status }}</div> :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> </div>
</div> </div>
@ -46,28 +76,54 @@ const getStatusColor = (status: string) => {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #0F233E; background-color: #0a162b;
color: #ffffff; color: #ffffff;
padding: 10px; padding: 15px;
box-sizing: border-box; box-sizing: border-box;
.header { .header {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 15px;
.title { .title {
display: flex; display: flex;
align-items: center; align-items: center;
.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 { .title-icon {
font-size: 24px; font-size: 22px;
margin-right: 10px; }
}
.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 { .table-header {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
padding: 0 10px; padding: 0 10px;
.header-item { .header-item {
@ -81,13 +137,21 @@ const getStatusColor = (status: string) => {
overflow-y: auto; overflow-y: auto;
.table-row { .table-row {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
padding: 0 10px; 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 { .row-item {
flex: 1; flex: 1;
text-align: center; text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
} }