diff --git a/src/packages/components/Charts/MyComponents/TopAlarms/config.ts b/src/packages/components/Charts/MyComponents/TopAlarms/config.ts index dabf22c..a66d567 100644 --- a/src/packages/components/Charts/MyComponents/TopAlarms/config.ts +++ b/src/packages/components/Charts/MyComponents/TopAlarms/config.ts @@ -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 { diff --git a/src/packages/components/Charts/MyComponents/TopAlarms/index.vue b/src/packages/components/Charts/MyComponents/TopAlarms/index.vue index 3acd2af..2ffb20d 100644 --- a/src/packages/components/Charts/MyComponents/TopAlarms/index.vue +++ b/src/packages/components/Charts/MyComponents/TopAlarms/index.vue @@ -2,18 +2,18 @@
- - {{ option.title }} +
+ +
+
+ {{ option.title }} +
- +
@@ -21,7 +21,7 @@
  • - + {{ item.rank }} {{ item.name }} @@ -29,8 +29,16 @@
    {{ item.value }}
    -
    -
    +
    +
    +
    +
  • @@ -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) => { } } } - + \ No newline at end of file