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

123312

Browse Source
This commit is contained in:
lucashu 2025-08-20 18:36:43 +08:00
parent f15cb125ea
commit c48a6e4aa2
2 changed files with 99 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/packages/components/Charts/MyComponents/TopAlarms/config.ts
View File

@ -7,13 +7,15 @@ export const option = {
dataset: dataJson.source,
title: '未处置报警数TOP5',
titleColor: '#ffffff',
titleSize: 20,
rankColor: '#00E5FF',
titleSize: 18,
rankColor: '#ffffff',
nameColor: '#B0E0E6',
valueColor: '#ffffff',
barColor: '#4A90E2',
barColorStart: '#00D9FF',
barColorEnd: '#0055FF',
dropdownOptions: ['当日', '当月', '当年'],
dropdownDefault: '当日'
dropdownDefault: '当日',
iconColor: '#00E5FF'
}
export default class Config extends PublicConfigClass implements CreateComponentType {

121
src/packages/components/Charts/MyComponents/TopAlarms/index.vue
View File

@ -2,18 +2,18 @@
<div class="go-top-alarms">
<div class="header">
<div class="title">
<svg-icon icon-class="rocket" class="title-icon"></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>
<n-dropdown trigger="hover" :options="dropdownOptions" @select="handleSelect">
<n-button type="primary" size="small">
<div class="dropdown-button">
{{ selectedOption }}
<template #icon>
<n-icon>
<svg-icon icon-class="arrow-down" />
</n-icon>
</template>
</n-button>
<svg-icon icon-class="arrow-down" class="arrow-down-icon" />
</div>
</n-dropdown>
</div>
<div class="content">
@ -21,7 +21,7 @@
<li v-for="(item, index) in option.dataset" :key="index" class="alarm-item">
<div class="item-info">
<span class="rank" :style="{ color: option.rankColor }">
<svg-icon icon-class="circle" class="rank-icon"></svg-icon>
<span class="rank-icon"></span>
{{ item.rank }}
</span>
<span class="name" :style="{ color: option.nameColor }">{{ item.name }}</span>
@ -29,8 +29,16 @@
<div class="item-value">
<span class="value" :style="{ color: option.valueColor }">{{ item.value }}</span>
</div>
<div class="progress-bar">
<div class="progress" :style="{ width: calculateWidth(item.value), backgroundColor: option.barColor }"></div>
<div class="progress-bar-wrapper">
<div class="progress-bar">
<div
class="progress"
:style="{
width: calculateWidth(item.value),
background: `linear-gradient(to right, ${option.barColorStart}, ${option.barColorEnd})`
}"
></div>
</div>
</div>
</li>
</ul>
@ -61,12 +69,13 @@ const dropdownOptions = computed(() => {
})
const maxValue = computed(() => {
return Math.max(...props.chartConfig.option.dataset.map(item => item.value))
const values = props.chartConfig.option.dataset.map(item => item.value)
return Math.max(...values, 1) // Avoid division by zero
})
const calculateWidth = (value: number) => {
if (maxValue.value === 0) return '0%'
return `${(value / maxValue.value) * 100}%`
return `${(value / maxValue.value) * 80}%` // Max width 80% to leave space for value
}
const handleSelect = (key: string) => {
@ -78,11 +87,12 @@ const handleSelect = (key: string) => {
.go-top-alarms {
width: 100%;
height: 100%;
background-color: #0F1C3D;
background-color: #0a162b;
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
color: #fff;
.header {
display: flex;
@ -93,10 +103,42 @@ const handleSelect = (key: string) => {
.title {
display: flex;
align-items: center;
.title-icon {
font-size: 24px;
margin-right: 10px;
color: #00E5FF;
.title-prefix {
width: 40px;
height: 35px;
background-image: linear-gradient(to bottom, #2e69e0, #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-image: linear-gradient(to bottom, #17325f, #0e2142);
padding: 0 20px 0 20px;
margin-left: -10px;
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
}
}
.dropdown-button {
height: 30px;
padding: 0 15px;
background-color: #034a4b;
border: 1px solid #00e5ff;
border-radius: 15px;
display: flex;
align-items: center;
cursor: pointer;
color: #fff;
.arrow-down-icon {
margin-left: 8px;
font-size: 14px;
}
}
}
@ -107,6 +149,10 @@ const handleSelect = (key: string) => {
list-style: none;
padding: 0;
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
}
@ -115,10 +161,10 @@ const handleSelect = (key: string) => {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"info value"
"bar bar";
'info value'
'bar bar';
align-items: center;
gap: 5px 15px;
margin-bottom: 15px;
.item-info {
grid-area: info;
@ -131,23 +177,42 @@ const handleSelect = (key: string) => {
.rank {
font-weight: bold;
margin-right: 10px;
display: flex;
align-items: center;
.rank-icon {
font-size: 12px;
margin-right: 5px;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #00e5ff;
margin-right: 8px;
box-shadow: 0 0 5px #00e5ff;
}
}
.name {
overflow: hidden;
text-overflow: ellipsis;
}
}
.item-value {
grid-area: value;
text-align: right;
font-size: 16px;
font-weight: bold;
}
.progress-bar-wrapper {
grid-area: bar;
width: calc(100% - 60px); /* Adjust width to not overlap value */
position: relative;
left: 60px; /* Align with name */
}
.progress-bar {
grid-area: bar;
width: 100%;
height: 6px;
background-color: #2A3A5B;
height: 5px;
background-color: rgba(42, 58, 91, 0.5);
border-radius: 3px;
overflow: hidden;
@ -158,4 +223,4 @@ const handleSelect = (key: string) => {
}
}
}
</style>
</style>