样式优化

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

@@ -2,7 +2,6 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { TopAlarmsConfig } from './index'
 import dataJson from './data.json'
-import { chartInitConfig } from '@/settings/designSetting'
 export const option = {
   dataset: dataJson.source,
   title: '未处置报警数TOP5',
@@ -16,15 +15,14 @@ export const option = {
   dropdownOptions: ['当日', '当月', '当年'],
   dropdownDefault: '当日',
   iconColor: '#00E5FF',
-  letterSpacing:2,
+  letterSpacing: 1,
   paddingX: 40,
   paddingY: -5,
   isShowButton: false
 }
-
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = TopAlarmsConfig.key
   public chartConfig = TopAlarmsConfig
   public option = option
-  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
+
 }

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

@@ -3,9 +3,6 @@
     <div class="go-top-alarms">
       <div class="header">
         <div class="title">
-          <!-- <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,
@@ -122,25 +119,11 @@ const handleSelect = (key: string) => {
       display: flex;
       align-items: center;
 
-      // .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: 0px;
         clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
@@ -190,10 +173,8 @@ const handleSelect = (key: string) => {
       'info value'
       'bar bar';
     align-items: center;
-    // margin-right: 10px;
     padding: 0 10px;
     gap: 6px 15px;
-    // background-color: antiquewhite;
 
     .item-info {
       grid-area: info;
@@ -202,14 +183,12 @@ const handleSelect = (key: string) => {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      // background-color: yellowgreen;
 
       .rank {
         font-weight: normal;
         margin-right: 10px;
         display: flex;
         align-items: center;
-        // background-color: #fff;
 
         .rank-icon {
           display: inline-block;
@@ -235,22 +214,18 @@ const handleSelect = (key: string) => {
       text-align: right;
       // font-size: 16px;
       font-weight: normal;
-      // background-color: aquamarine;
     }
 
     .progress-bar-wrapper {
       grid-area: bar;
       width: calc(100% - 60px);
-      /* Adjust width to not overlap value */
       position: relative;
       left: 20px;
-      /* Align with name */
     }
 
     .progress-bar {
       width: 100%;
       height: 5px;
-      // background-color: rgba(42, 58, 91, 0.5);
       border-radius: 1px;
       overflow: hidden;