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

@@ -2,7 +2,6 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { AlarmListConfig } from './index'
 import dataJson from './data.json'
-import { chartInitConfig } from '@/settings/designSetting'
 export enum FontWeightEnum {
   NORMAL = '常规',
   BOLD = '加粗',
@@ -33,8 +32,8 @@ export const option = {
     '未解决': '#FF4D4F',
     '已解决': '#ffffff'
   },
-  headerHeight: 30,
+  headerHeight: 28,
-  itemHeight: 30,
+  itemHeight: 28,
   fontSize: 12,
   title: '近60分钟报警信息',
   titleSize: 17,
@@ -43,8 +42,8 @@ export const option = {
   fontWeight: 'normal',
   fontStyle: 'normal',
   paddingX: 40,
-  paddingY: -19,
+  paddingY: -30,
-  letterSpacing: 2,
+  letterSpacing: 1,
   isShowButton: false
 }
 
@@ -52,6 +51,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public key = AlarmListConfig.key
   public chartConfig = AlarmListConfig
   public option = option
-  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
+
 
 }

src/packages/components/Charts/MyComponents/AlarmList/config.vue

@@ -38,7 +38,7 @@
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { option, WritingModeEnum, WritingModeObject, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config'
+import { option, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 const props = defineProps({
   optionData: {

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

@@ -3,9 +3,7 @@
     <div class="go-alarm-list">
       <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,
@@ -19,13 +17,12 @@
           </div>
         </div>
         <div v-if="option.isShowButton" class="header-right-squares">
-          <!-- <div class="square" style="background-color: #2e69e0"></div>
+          <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 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"
@@ -74,53 +71,40 @@ const getStatusColor = (status: string) => {
 </script>
 
 <style lang="scss" scoped>
+.SmallBorder {
+  position: relative;
+  // background-color: #ffffff;
+}
+
 .go-alarm-list {
   position: absolute;
   top: 0;
+  right: 0;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
-  // background-color: #2066df;
   color: #ffffff;
   padding: 12px;
   margin-top: 5px;
   box-sizing: border-box;
+  // background-color: #4da6ff;
+  z-index: 10;
 
   .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 3px;
 
     .title {
       display: flex;
       align-items: center;
-      margin-top: -5px;
-
-      // .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;
-      //   margin-left: 0px;
-
-      //   .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%);
       }
     }
 
@@ -142,6 +126,7 @@ const getStatusColor = (status: string) => {
     padding: 0 10px;
     background: linear-gradient(to top, #226493c8, #0f2448);
     border-bottom: 2px solid #4da6ff;
+    margin-top: 10px;
 
     .header-item {
       flex: 1 0 25%;