Merge branch 'main' of http://hnucm.vip:18418/zS/go-view-fetch

默认500宽调整为450宽适配1920屏幕
样式优化
2025-08-21 21:36:55 +08:00 · 2025-08-21 21:36:26 +08:00 · 2025-08-21 21:35:17 +08:00 · 2025-08-21 21:34:32 +08:00 · 2025-08-21 21:34:01 +08:00 · 2025-08-21 21:33:31 +08:00
11 changed files with 467 additions and 425 deletions
--- a/src/assets/images/chart/charts/device_status.png
+++ b/src/assets/images/chart/charts/device_status.png
--- a/src/packages/components/Charts/MyComponents/AlarmList/config.ts
+++ b/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,
-  itemHeight: 30,
+  headerHeight: 28,
+  itemHeight: 28,
  fontSize: 12,
  title: '近60分钟报警信息',
  titleSize: 17,
@ -43,8 +42,8 @@ export const option = {
  fontWeight: 'normal',
  fontStyle: 'normal',
  paddingX: 40,
-  paddingY: -19,
-  letterSpacing: 2,
+  paddingY: -30,
+  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 }
+

 }
--- a/src/packages/components/Charts/MyComponents/AlarmList/config.vue
+++ b/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: {
--- a/src/packages/components/Charts/MyComponents/AlarmList/index.vue
+++ b/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%;
--- a/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
+++ b/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
@ -2,22 +2,20 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { DeviceStatusConfig } from './index'
 import dataJson from './data.json'
-
 export const option = {
  dataset: dataJson.source,
  header: ['所属企业', '设备类型', '设备名称'],
-  headerTextColor: '#ffffff',
+  headerTextColor: '#7F9DB4',
  textColor: '#ffffff',
-  headerBackgroundColor: 'rgba(26, 56, 90, 0.5)',
-  itemBackgroundColor: 'rgba(15, 35, 62, 0.5)',
-  timeTextColor: '#ffffff',
-  timeBgColor: '#FF4D4F',
-  headerHeight: 40,
-  itemHeight: 35,
-  fontSize: 14,
+  itemBackgroundColor: '#212936',
+  timeTextColor: '#B75055',
+  timeBgColor: '#562922',
+  headerHeight: 30,
+  itemHeight: 28,
+  fontSize: 11,
  title: '设备实时在线概况',
-  titleSize: 20,
-  titleColor: '#B4E4FF',
+  titleSize: 17,
+  titleColor: '#ffffff',
  iconColor: '#00E5FF',
  onlineRate: 75,
  onlineDevice: 23,
@ -26,7 +24,11 @@ export const option = {
  headerBgColor2: '#003a8c',
  legendColors: ['#00E5FF', '#00FF7F', '#FFFFFF'],
  progressColor: '#00E5FF',
-  progressBgColor: '#1A385A'
+  progressBgColor: 'rgba(0, 0, 0, 0.1)',
+  progressTextColor: '#DDE3E9',
+  paddingX: 60,
+  paddingY: -4,
+  letterSpacing: 1
 }

 export default class Config extends PublicConfigClass implements CreateComponentType {
--- a/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
+++ b/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
@ -1,67 +1,90 @@
 <template>
+  <SmallBorder>
    <div class="go-device-status">
      <div class="header">
-      <div class="header-left">
-        <div class="title-icon-bg" :style="{ backgroundColor: option.headerBgColor1 }">
-          <svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
-        </div>
-        <div class="title-text-bg" :style="{ backgroundColor: option.headerBgColor2 }">
-          <span class="title-text" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
-        </div>
-      </div>
-      <div class="header-right">
-        <div class="legend">
-          <div v-for="color in option.legendColors" :key="color" class="legend-item" :style="{ backgroundColor: color }"></div>
+        <div class="header-left" :style="{
+          marginLeft:
+            option.paddingX
+            + 'px',
+          marginTop:
+            option.paddingY
+            + 'px'
+        }
+          ">
+          <div class="title-text-bg" :style="{
+
+          }">
+            <span class="title-text" :style="{
+              letterSpacing: option.letterSpacing + 'px',
+              color: option.titleColor, fontSize: option.titleSize + 'px'
+            }">{{
+              option.title }}</span>
          </div>
        </div>
      </div>
      <div class="status-section">
-      <div class="online-rate">
        <div class="rate-circle-bg">
-          <div
-            class="rate-circle"
-            :style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }"
-          >
+          <div class="rate-circle"
+            :style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }">
            <div class="rate-text-wrapper">
-              <span class="rate-text" :style="{ color: option.progressColor }">{{ option.onlineRate }}</span>
-              <span class="rate-percent" :style="{ color: option.progressColor }">%</span>
+              <span class="rate-text" :style="{ color: option.progressTextColor }">{{ option.onlineRate }}</span>
+              <span class="rate-percent" :style="{ color: option.progressTextColor }">%</span>
            </div>
          </div>
        </div>
-        <span class="rate-label">设备在线率</span>
+
+        <div class="online-content">
+          <div class="text-content">
+            <span class="online-text">
+              设备在线率
+            </span>
+            <div class="online-nums">
+              <span class="online-num">{{ option.onlineDevice }}</span>
+              <span class="total-num">/{{ option.totalDevice }}</span>
            </div>
+          </div>
+
          <div class="progress-bar-wrapper">
            <div class="progress-bar" :style="{ backgroundColor: option.progressBgColor }">
-          <div class="progress" :style="{ width: option.onlineRate + '%', backgroundColor: option.progressColor }"></div>
+              <div class="progress" :style="{ width: option.onlineRate + '%', backgroundColor: option.progressColor }">
              </div>
            </div>
-      <div class="device-count">
-        <span class="online">{{ option.onlineDevice }}</span>
-        <span class="total">/ {{ option.totalDevice }}</span>
          </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" :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
+      </div>
+      <div class="table-header" :style="{
+        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 class="header-item"></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 class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.enterprise }}</div>
-        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceType }}</div>
-        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceName }}</div>
+        <div v-for="(item, index) in option.dataset" :key="index" class="table-row"
+          :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
+          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{
+            item.enterprise }}</div>
+          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{
+            item.deviceType }}</div>
+          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{
+            item.deviceName }}</div>
          <div class="row-item time-wrapper">
-          <div class="time" :style="{ backgroundColor: option.timeBgColor, color: option.timeTextColor, fontSize: option.fontSize + 'px' }">
+            <div class="time"
+              :style="{ backgroundColor: option.timeBgColor, color: option.timeTextColor, fontSize: option.fontSize + 'px' }">
              {{ item.time }}
            </div>
          </div>
        </div>
      </div>
    </div>
+  </SmallBorder>
+
 </template>

 <script setup lang="ts">
+import SmallBorder from '../SmallBorder/index.vue'
 import { PropType, computed } from 'vue'
 import { option as configOption } from './config'

@ -76,56 +99,39 @@ const option = computed(() => props.chartConfig.option)
 </script>

 <style lang="scss" scoped>
+SmallBorder {
+  position: relative;
+}
+
 .go-device-status {
+  position: absolute;
+  top: 0;
+  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
-  background-color: #041126;
+  // background-color: #041126;
  color: #ffffff;
-  padding: 15px;
+  padding: 10px 15px;
+  // padding-bottom: 3px;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
-    margin-bottom: 10px;
+    margin-bottom: 5px;

-    .header-left {
-      display: flex;
-      align-items: center;
-      .title-icon-bg {
-        width: 50px;
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
-        .title-icon {
-          font-size: 28px;
-        }
-      }
-      .title-text-bg {
-        height: 40px;
-        padding: 0 20px 0 30px;
-        margin-left: -10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
-        .title-text {
-          text-shadow: 0 0 10px rgba(180, 228, 255, 0.8);
-        }
-      }
-    }

    .header-right {
      display: flex;
      align-items: center;
+
      .legend {
        display: flex;
        margin-right: 10px;
+
        .legend-item {
          width: 15px;
          height: 8px;
@ -137,13 +143,12 @@ const option = computed(() => props.chartConfig.option)

  .status-section {
    display: flex;
+    flex-direction: row;
+
    align-items: center;
-    margin-bottom: 15px;
+    margin-bottom: -2px;
    padding: 0 10px;
-    .online-rate {
-      display: flex;
-      align-items: center;
-      margin-right: 15px;
+
    .rate-circle-bg {
      position: relative;
      width: 60px;
@ -151,6 +156,8 @@ const option = computed(() => props.chartConfig.option)
      display: flex;
      justify-content: center;
      align-items: center;
+      padding-bottom: 2px;
+
      &::after {
        content: '';
        position: absolute;
@ -160,79 +167,123 @@ const option = computed(() => props.chartConfig.option)
        bottom: -5px;
        border-radius: 50%;
        filter: blur(5px);
-          background: radial-gradient(circle, rgba(0, 229, 255, 0.5), transparent 70%);
+        background: radial-gradient(circle, #0d5585, transparent 60%);
      }
    }
+
    .rate-circle {
-        width: 60px;
-        height: 60px;
+      width: 48px;
+      height: 48px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 1;
+
      &::before {
        content: '';
-          width: 48px;
-          height: 48px;
+        width: 36px;
+        height: 36px;
        background-color: #041126;
        border-radius: 50%;
      }
+
      .rate-text-wrapper {
        position: absolute;
+
        .rate-text {
-            font-size: 24px;
+          font-size: 12px;
          font-weight: bold;
        }
+
        .rate-percent {
-            font-size: 14px;
-            margin-left: 2px;
+          font-size: 12px;
+          margin-left: 0px;
        }
      }
    }
-      .rate-label {
-        font-size: 16px;
+
+    .online-content {
+      margin-top: -5px;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 80%;
+      justify-content: center;
      margin-left: 10px;
+
+      .text-content {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+        margin-bottom: 2px;
+
+        .online-num {
+          font-size: 16px;
+          font-weight: bold;
+          color: #23DEE9;
+        }
+
+        .total-num {
+          font-size: 16px;
+          font-weight: bold;
+          color: #555657;
+
        }
      }
+    }
+
    .progress-bar-wrapper {
      flex: 1;
    }
+
    .progress-bar {
      width: 100%;
-      height: 12px;
-      border-radius: 6px;
+      height: 10px;
+      border-radius: 1px;
      overflow: hidden;
+      box-shadow: #082846 0px 0px 0px 2px;
+
      .progress {
        height: 100%;
-        border-radius: 6px;
-      }
-    }
-    .device-count {
-      font-size: 20px;
-      margin-left: 15px;
-      .online {
-        color: #00e5ff;
-      }
-      .total {
-        color: #ffffff;
+        border-radius: 1px;
+        background: linear-gradient(to right, #0A5987, #71D8FE);
+
      }
    }
+
  }

  .table-header {
    display: flex;
    align-items: center;
    padding: 0 10px;
-    border-radius: 5px;
+    border-radius: 1px;
+    background: linear-gradient(to top, #226493c8, #0f2448);
+    border-bottom: 2px solid #4da6ff;
+
+
    .header-item {
      text-align: left;
      padding-left: 10px;
-      &:nth-child(1) { flex: 2; }
-      &:nth-child(2) { flex: 2; }
-      &:nth-child(3) { flex: 3; }
-      &:nth-child(4) { flex: 1; }
+
+      &:nth-child(1) {
+        flex: 2;
+      }
+
+      &:nth-child(2) {
+        flex: 2;
+      }
+
+      &:nth-child(3) {
+        flex: 2;
+      }
+
+      &:nth-child(4) {
+        flex: 1;
+      }
    }
  }

@ -240,32 +291,60 @@ const option = computed(() => props.chartConfig.option)
    flex: 1;
    overflow-y: auto;
    margin-top: 5px;
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* 隐藏滚动条 */
+      width: 0;
+      height: 0;
+    }
+
+    scrollbar-width: none;
+
    .table-row {
      display: flex;
      align-items: center;
      padding: 0 10px;
-      margin-bottom: 5px;
-      border-radius: 5px;
+      margin-bottom: 3px;
+      border-radius: 1px;
+      border-bottom: 1px solid #29333C;
+
      &:last-child {
        border-bottom: none;
      }
+
      .row-item {
        text-align: left;
        padding-left: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
-        &:nth-child(1) { flex: 2; }
-        &:nth-child(2) { flex: 2; }
-        &:nth-child(3) { flex: 3; }
+
+        &:nth-child(1) {
+          flex: 2;
        }
+
+        &:nth-child(2) {
+          flex: 2;
+        }
+
+        &:nth-child(3) {
+          flex: 2;
+        }
+
+        &:nth-child(4) {
+          flex: 1;
+        }
+      }
+
      .time-wrapper {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
+
        .time {
-          padding: 2px 8px;
+          padding: 1px 6px;
          border-radius: 5px;
        }
      }
--- a/src/packages/components/Charts/MyComponents/SmallBorder/config.ts
+++ b/src/packages/components/Charts/MyComponents/SmallBorder/config.ts
@ -2,7 +2,6 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { SmallBorderConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
-import { chartInitConfig } from '@/settings/designSetting'

 export const option = {
  colors: ['#1089ff', '#0000ff'],
@ -13,6 +12,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
  public key = SmallBorderConfig.key
  public chartConfig = cloneDeep(SmallBorderConfig)
  public option = cloneDeep(option)
-  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
+

 }
--- a/src/packages/components/Charts/MyComponents/SmallBorder/index.vue
+++ b/src/packages/components/Charts/MyComponents/SmallBorder/index.vue
@ -1,5 +1,6 @@
 <template>
  <div class="go-small-border">
+    <div class="border-content">
      <div class="svg-content">
        <svg class="svg" viewBox="0 0 400 30" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="&#229;&#176;&#143;&#230;&#160;&#135;&#233;&#162;&#152;">
@ -82,7 +83,8 @@
                fill-rule="evenodd" clip-rule="evenodd"
                d="M365.197 15.341H368.568C368.664 15.3411 368.759 15.3691 368.84 15.4217C368.921 15.4743 368.985 15.5492 369.025 15.6375C369.065 15.7258 369.079 15.8238 369.065 15.9197C369.051 16.0157 369.009 16.1055 368.946 16.1785L366.928 20.2194C366.881 20.2735 366.823 20.3169 366.758 20.3467C366.693 20.3765 366.622 20.392 366.551 20.3922H363.18C363.083 20.3921 362.989 20.3641 362.908 20.3115C362.827 20.2589 362.763 20.184 362.723 20.0957C362.683 20.0074 362.669 19.9094 362.683 19.8135C362.697 19.7176 362.738 19.6277 362.802 19.5547L364.819 15.5138C364.866 15.4596 364.924 15.4161 364.989 15.3863C365.055 15.3566 365.125 15.3411 365.197 15.341Z"
                fill="#86C9EF" />
-            <path id="&#230;&#160;&#135;&#233;&#162;&#152;&#230;&#161;&#134;_4" fill-rule="evenodd" clip-rule="evenodd"
+              <path id="&#230;&#160;&#135;&#233;&#162;&#152;&#230;&#161;&#134;_4" fill-rule="evenodd"
+                clip-rule="evenodd"
                d="M357.198 15.341H360.569C360.665 15.3411 360.76 15.3691 360.841 15.4217C360.922 15.4743 360.986 15.5492 361.026 15.6375C361.066 15.7258 361.079 15.8238 361.065 15.9197C361.051 16.0157 361.01 16.1055 360.947 16.1785L358.928 20.2194C358.881 20.2735 358.824 20.3169 358.759 20.3467C358.694 20.3765 358.623 20.392 358.552 20.3922H355.181C355.084 20.3921 354.99 20.3641 354.909 20.3115C354.828 20.2589 354.763 20.184 354.723 20.0957C354.684 20.0074 354.67 19.9094 354.684 19.8135C354.698 19.7176 354.739 19.6277 354.803 19.5547L356.82 15.5138C356.867 15.4596 356.925 15.4161 356.99 15.3863C357.055 15.3566 357.126 15.3411 357.198 15.341Z"
                fill="url(#paint9_linear_29_565)" />
            </g>
@ -120,8 +122,8 @@
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M365.197 15.341H368.568C368.664 15.3411 368.759 15.3691 368.84 15.4217C368.921 15.4743 368.985 15.5492 369.025 15.6375C369.065 15.7258 369.079 15.8238 369.065 15.9197C369.051 16.0157 369.009 16.1055 368.946 16.1785L366.928 20.2194C366.881 20.2735 366.823 20.3169 366.758 20.3467C366.693 20.3765 366.622 20.392 366.551 20.3922H363.18C363.083 20.3921 362.989 20.3641 362.908 20.3115C362.827 20.2589 362.763 20.184 362.723 20.0957C362.683 20.0074 362.669 19.9094 362.683 19.8135C362.697 19.7176 362.738 19.6277 362.802 19.5547L364.819 15.5138C364.866 15.4596 364.924 15.4161 364.989 15.3863C365.055 15.3566 365.125 15.3411 365.197 15.341Z" />
            </clipPath>
-          <filter id="filter3_di_29_565" x="15.9608" y="0" width="21.2381" height="23.4257" filterUnits="userSpaceOnUse"
-            color-interpolation-filters="sRGB">
+            <filter id="filter3_di_29_565" x="15.9608" y="0" width="21.2381" height="23.4257"
+              filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
              <feFlood flood-opacity="0" result="BackgroundImageFix" />
              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                result="hardAlpha" />
@ -200,10 +202,12 @@
          </defs>
        </svg>
      </div>
-    <div class="border-content">
+      <div class="content">
        <slot></slot>
      </div>
    </div>
+
+  </div>
 </template>
 <script lang="ts">export default { name: "SmallBorder" }</script>
 <style lang="scss" scoped>
@ -258,6 +262,7 @@ $border-gradient-end: rgba(128, 128, 128, 0);
  }

  & .svg-content {
+    // z-index: 2;
    width: 100%;
    height: 12%;
    // background-color: antiquewhite;
--- a/src/packages/components/Charts/MyComponents/TopAlarms/config.ts
+++ b/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 }
+
 }
--- a/src/packages/components/Charts/MyComponents/TopAlarms/index.vue
+++ b/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;

--- a/src/settings/designSetting.ts
+++ b/src/settings/designSetting.ts
@ -24,7 +24,7 @@ export const theme = {
 export const chartInitConfig = {
  x: 50,
  y: 50,
-  w: 500,
+  w: 450,
  h: 300,
  // 不建议动 offset
  offsetX: 0,
Author	SHA1	Message	Date
Free-sss	e5dca79442	Merge branch 'main' of http://hnucm.vip:18418/zS/go-view-fetch	2025-08-21 21:36:55 +08:00
Free-sss	dc870000b2	默认500宽调整为450宽适配1920屏幕	2025-08-21 21:36:26 +08:00
Free-sss	777c68a1a9	样式优化	2025-08-21 21:35:17 +08:00
Free-sss	60d4e7ee69	组件完成	2025-08-21 21:34:32 +08:00
Free-sss	bd0f759c66	优化	2025-08-21 21:34:01 +08:00
Free-sss	1d45b02af6	添加封面	2025-08-21 21:33:31 +08:00
Free-sss	c20bec67b8	更改边框显示顺序	2025-08-21 21:33:14 +08:00