23423

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

@@ -6,13 +6,13 @@ import dataJson from './data.json'
 export const option = {
   dataset: dataJson.source,
   header: ['报警事件', '时间', '所属企业', '状态'],
-  headerTextColor: '#ffffff',
+  headerTextColor: '#B4B4B4',
   textColor: '#ffffff',
-  headerBackgroundColor: '#1A385A',
+  headerBackgroundColor: '#17325F',
-  itemBackgroundColor: '#0F233E',
+  itemBackgroundColor: 'transparent',
   statusColors: {
     '未解决': '#FF4D4F',
-    '已解决': '#52C41A'
+    '已解决': '#B4B4B4'
   },
   headerHeight: 40,
   itemHeight: 35,

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

@@ -2,21 +2,51 @@
   <div class="go-alarm-list">
     <div class="header">
       <div class="title">
-        <svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></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>
+      <div class="header-right-squares">
+        <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>
     </div>
-    <div class="table-header" :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }">
+    <div
-      <div v-for="header in option.header" :key="header" class="header-item" :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
+      class="table-header"
+      :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }"
+    >
+      <div
+        v-for="header in option.header"
+        :key="header"
+        class="header-item"
+        :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }"
+      >
         {{ header }}
       </div>
     </div>
     <div class="table-body">
-      <div v-for="(item, index) in option.dataset" :key="index" class="table-row" :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
+      <div
-        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.event }}</div>
+        v-for="(item, index) in option.dataset"
-        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.time }}</div>
+        :key="index"
-        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.enterprise }}</div>
+        class="table-row"
-        <div class="row-item" :style="{ color: getStatusColor(item.status), fontSize: option.fontSize + 'px' }">{{ item.status }}</div>
+        :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }"
+      >
+        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
+          {{ item.event }}
+        </div>
+        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
+          {{ item.time }}
+        </div>
+        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
+          {{ item.enterprise }}
+        </div>
+        <div class="row-item" :style="{ color: getStatusColor(item.status), fontSize: option.fontSize + 'px' }">
+          {{ item.status }}
+        </div>
       </div>
     </div>
   </div>
@@ -46,28 +76,54 @@ const getStatusColor = (status: string) => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #0F233E;
+  background-color: #0a162b;
   color: #ffffff;
-  padding: 10px;
+  padding: 15px;
   box-sizing: border-box;
 
   .header {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
     .title {
       display: flex;
       align-items: center;
-      .title-icon {
+      .title-prefix {
-        font-size: 24px;
+        width: 35px;
-        margin-right: 10px;
+        height: 35px;
+        background-color: #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-color: #17325f;
+        padding: 0 20px 0 20px;
+        margin-left: -8px;
+        clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
+      }
+    }
+    .header-right-squares {
+      display: flex;
+      align-items: center;
+      .square {
+        width: 10px;
+        height: 10px;
+        margin-left: 5px;
       }
     }
   }
 
   .table-header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
     padding: 0 10px;
     .header-item {
@@ -81,15 +137,23 @@ const getStatusColor = (status: string) => {
     overflow-y: auto;
     .table-row {
       display: flex;
-      justify-content: space-between;
       align-items: center;
       padding: 0 10px;
-      border-bottom: 1px solid #1A385A;
+      border-bottom: 1px solid rgba(26, 56, 90, 0.8);
+      &:first-child {
+        margin-top: 5px;
+      }
+      &:last-child {
+        border-bottom: none;
+      }
       .row-item {
         flex: 1;
         text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
   }
 }
-</style>
+</style>