123312

src/packages/components/Charts/MyComponents/TopAlarms/config.ts

@@ -7,13 +7,15 @@ export const option = {
   dataset: dataJson.source,
   title: '未处置报警数TOP5',
   titleColor: '#ffffff',
-  titleSize: 20,
+  titleSize: 18,
-  rankColor: '#00E5FF',
+  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 {

src/packages/components/Charts/MyComponents/TopAlarms/index.vue

@@ -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>
+        <div class="title-prefix">
-        <span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
+          <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>
+          <svg-icon icon-class="arrow-down" class="arrow-down-icon" />
-            <n-icon>
+        </div>
-              <svg-icon icon-class="arrow-down" />
-            </n-icon>
-          </template>
-        </n-button>
       </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-bar-wrapper">
-            <div class="progress" :style="{ width: calculateWidth(item.value), backgroundColor: option.barColor }"></div>
+            <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 {
+      .title-prefix {
-        font-size: 24px;
+        width: 40px;
-        margin-right: 10px;
+        height: 35px;
-        color: #00E5FF;
+        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"
+      'info value'
-      "bar bar";
+      '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;
+          display: inline-block;
-          margin-right: 5px;
+          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;
+      height: 5px;
-      background-color: #2A3A5B;
+      background-color: rgba(42, 58, 91, 0.5);
       border-radius: 3px;
       overflow: hidden;
 
@@ -158,4 +223,4 @@ const handleSelect = (key: string) => {
     }
   }
 }
-</style>
+</style>