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%;

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

@@ -26,30 +26,30 @@ export const FontStyleObject = {
 export const option = {
   dataset: dataJson.source,
   header: ['所属企业', '设备类型', '设备名称'],
-  headerTextColor: '#ffffff',
+  headerTextColor: '#7F9DB4',
   textColor: '#ffffff',
-  headerBackgroundColor: 'rgba(26, 56, 90, 0.5)',
+  itemBackgroundColor: '#212936',
-  itemBackgroundColor: 'rgba(15, 35, 62, 0.5)',
+  timeTextColor: '#B75055',
-  timeTextColor: '#ffffff',
+  timeBgColor: '#562922',
-  timeBgColor: '#FF4D4F',
+  headerHeight: 30,
-  headerHeight: 40,
+  itemHeight: 28,
-  itemHeight: 35,
+  fontSize: 11,
-  fontSize: 14,
   title: '设备实时在线概况',
-  titleSize: 20,
+  titleSize: 17,
-  titleColor: '#B4E4FF',
+  titleColor: '#ffffff',
   iconColor: '#00E5FF',
   onlineRate: 75,
   onlineDevice: 23,
   totalDevice: 100,
   progressColor: '#00E5FF',
-  progressBgColor: '#1A385A',
+  progressBgColor: 'rgba(0, 0, 0, 0.1)',
+  progressTextColor: '#DDE3E9',
+  paddingX: 60,
+  paddingY: -4,
+  letterSpacing: 1,
   // new properties from AlarmList
   fontWeight: 'normal',
   fontStyle: 'normal',
-  paddingX: 40,
-  paddingY: -19,
-  letterSpacing: 2,
   isShowButton: false
 }
 

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

@@ -2,60 +2,77 @@
   <SmallBorder>
     <div class="go-device-status">
       <div class="header">
-        <div class="title">
+        <div class="header-left" :style="{
-          <div class="title-text">
+          marginLeft:
-            <span :style="{
+            option.paddingX
-              color: option.titleColor,
+            + 'px',
-              fontSize: option.titleSize + 'px',
+          marginTop:
-              fontWeight: option.fontWeight,
+            option.paddingY
-              fontStyle: option.fontStyle,
+            + 'px'
-              marginLeft: option.paddingX + 'px',
+        }
-              marginTop: option.paddingY + 'px',
+          ">
-              letterSpacing: option.letterSpacing + 'px'
+          <div class="title-text-bg" :style="{
-            }">{{ option.title }}</span>
+
+          }">
+            <span class="title-text" :style="{
+              letterSpacing: option.letterSpacing + 'px',
+              color: option.titleColor, fontSize: option.titleSize + 'px'
+            }">{{
+              option.title }}</span>
           </div>
         </div>
-        <div v-if="option.isShowButton" class="header-right-squares">
-        </div>
       </div>
       <div class="status-section">
-        <div class="online-rate">
         <div class="rate-circle-bg">
-            <div
+          <div class="rate-circle"
-              class="rate-circle"
+            :style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }">
-              :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-text" :style="{ color: option.progressTextColor }">{{ option.onlineRate }}</span>
-                <span class="rate-percent" :style="{ color: option.progressColor }">%</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>
-        <div v-for="header in option.header" :key="header" class="header-item" :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
+      <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 v-for="(item, index) in option.dataset" :key="index" class="table-row"
-          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.enterprise }}</div>
+          :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
-          <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' }">{{
-          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceName }}</div>
+            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>
@@ -63,12 +80,13 @@
       </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'
-import SmallBorder from '../SmallBorder/index.vue'
 
 const props = defineProps({
   chartConfig: {
@@ -81,59 +99,55 @@ 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;
   color: #ffffff;
-  padding: 12px;
+  padding: 10px 15px;
-  margin-top: 5px;
+  // padding-bottom: 3px;
   box-sizing: border-box;
 
   .header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    margin-bottom: 5px;
-    margin-bottom: 3px;
 
-    .title {
-      display: flex;
-      align-items: center;
-      margin-top: -5px;
-
-      .title-text {
-        height: 35px;
-        display: flex;
-        align-items: center;
-        padding: 0 20px 0 20px;
-        clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
-      }
-    }
 
     .header-right-squares {
       display: flex;
       align-items: center;
 
-      .square {
+      .legend {
-        width: 10px;
+        display: flex;
-        height: 10px;
+        margin-right: 10px;
+
+        .legend-item {
+          width: 15px;
+          height: 8px;
           margin-left: 5px;
         }
       }
     }
+  }
 
   .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;
@@ -141,6 +155,8 @@ const option = computed(() => props.chartConfig.option)
       display: flex;
       justify-content: center;
       align-items: center;
+      padding-bottom: 2px;
+
       &::after {
         content: '';
         position: absolute;
@@ -150,79 +166,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;
+      width: 48px;
-        height: 60px;
+      height: 48px;
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
       z-index: 1;
+
       &::before {
         content: '';
-          width: 48px;
+        width: 36px;
-          height: 48px;
+        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;
+          font-size: 12px;
-            margin-left: 2px;
+          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;
+      height: 10px;
-      border-radius: 6px;
+      border-radius: 1px;
       overflow: hidden;
+      box-shadow: #082846 0px 0px 0px 2px;
+
       .progress {
         height: 100%;
-        border-radius: 6px;
+        border-radius: 1px;
-      }
+        background: linear-gradient(to right, #0A5987, #71D8FE);
-    }
+
-    .device-count {
-      font-size: 20px;
-      margin-left: 15px;
-      .online {
-        color: #00e5ff;
-      }
-      .total {
-        color: #ffffff;
       }
     }
+
   }
 
   .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(1) {
-      &:nth-child(3) { flex: 3; }
+        flex: 2;
-      &:nth-child(4) { flex: 1; }
+      }
+
+      &:nth-child(2) {
+        flex: 2;
+      }
+
+      &:nth-child(3) {
+        flex: 2;
+      }
+
+      &:nth-child(4) {
+        flex: 1;
+      }
     }
   }
 
@@ -230,32 +290,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;
+      margin-bottom: 3px;
-      border-radius: 5px;
+      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(1) {
-        &:nth-child(3) { flex: 3; }
+          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;
         }
       }

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

@@ -2,7 +2,6 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { LineGraph01Config } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
-import { chartInitConfig } from '@/settings/designSetting'
 import dataJson from './data.json'
 export interface DataSourceItem {
   dataname: string;
@@ -101,14 +100,22 @@ export const option = {
   series: [seriesItem]
 };
 
-
+const configSet = {
-
+  titlefontWeight: 'normal',
+  titlefontSize: 17,
+  titlefontStyle: 'normal',
+  titlecolor: '#ffffff',
+  titlePaddingX: 0,
+  titlePaddingY: 0,
+  isShowButton: false
+}
+export { configSet }
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = LineGraph01Config.key
   public chartConfig = cloneDeep(LineGraph01Config)
   public mockData = dataJson
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
-  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
+
 }
 

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

@@ -196,8 +196,15 @@
       </defs>
     </svg>
     <div class="buttonContent">
-      <span class="title">{{ configData.title }}</span>
+      <span class="title" :style="{
-      <button v-if="isShowButton" class="timeShow" @click="toggleDropdown" ref="buttonRef">
+        color: configSet.titlecolor,
+        fontSize: configSet.titlefontSize + 'px',
+        fontStyle: configSet.titlefontStyle,
+        fontWeight: configSet.titlefontWeight,
+        marginTop: configSet.titlePaddingY + 'px',
+        marginLeft: configSet.titlePaddingX + 'px'
+      }">{{ configData.title }}</span>
+      <button v-if="configSet.isShowButton" class="timeShow" @click="toggleDropdown" ref="buttonRef">
         {{ configData.dataSource[selectedIndex]?.dataname || '选择数据' }}
       </button>
     </div>
@@ -228,7 +235,7 @@
     </div>
     <div class="chartsContent">
       <span class="smallText Tips">
-        <img class="icon" src="./icon01.png" alt="">
+        <img class="icon" src="./assets/icon01.png" alt="">
         {{ configData.tip }}</span>
       <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="chartOption" :update-options="{
         replaceMerge: replaceMergeArr
@@ -244,14 +251,14 @@ import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
-import Config, { DatasType, includes, seriesItem } from './config'
+import Config, { DatasType, includes, seriesItem, configSet } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
-
+import { config } from 'process'
-const isShowButton = false;
+// const isShowButton = false;
 
 const props = defineProps({
   themeSetting: {
@@ -342,7 +349,12 @@ watch(
     const parsedData = parseMockData(newMockData);
     selectedIndex.value = parsedData.dataIndex;
   },
-  { immediate: true, deep: true }
+  {
+    immediate: true,
+    deep:
+      // true 
+      false
+  }
 );
 
 
@@ -363,10 +375,10 @@ const chartOption = computed(() => {
   return mergedOption;
 });
 
-const wrapperStyle = computed(() => ({
+// const wrapperStyle = computed(() => ({
-  width: props.chartConfig.attr.w + 'px',
+//   width: props.chartConfig.attr.w + 'px',
-  height: "16%"
+//   height: "16%"
-}))
+// }))
 
 
 // dataset 无法变更条数的补丁 (保持不变)
@@ -430,7 +442,7 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 @include go(border-box) {
   position: relative;
-  border-radius: 5px;
+  border-radius: 10px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -641,13 +653,15 @@ onUnmounted(() => {
 
 
 .buttonContent span {
-  font-size: 15px;
+  font-size: 17px;
   color: #ffffff;
-  letter-spacing: 2px;
+  letter-spacing: 1px;
-  font-weight: 550;
+  font-weight: normal;
   text-shadow: -4px -4px 10px #3B8ED4;
   padding: 0;
   margin: 0;
+  margin-top: -2px;
+
 
 }
 </style>

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

@@ -2,7 +2,6 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
 import { LineGraph02Config } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
-import { chartInitConfig } from '@/settings/designSetting'
 import dataJson from './data.json'
 export interface DataSourceItem {
   dataname: string;
@@ -101,6 +100,16 @@ export const option = {
   series: [seriesItem]
 };
 
+const configSet = {
+  titlefontWeight: 'normal',
+  titlefontSize: 17,
+  titlefontStyle: 'normal',
+  titlecolor: '#ffffff',
+  titlePaddingX: 0,
+  titlePaddingY: 0,
+  isShowButton: false
+}
+export { configSet }
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -109,6 +118,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public mockData = dataJson
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
-  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
+
 }
 

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

@@ -2,10 +2,15 @@
   <div class="go-border-box">
     <!-- timeshow 按钮，添加点击事件和 ref -->
     <div class="buttonContent">
-
+      <span class="title" :style="{
-      <span class="title">{{ configData.title }}</span>
+        color: configSet.titlecolor,
-
+        fontSize: configSet.titlefontSize + 'px',
-      <button v-if="isShowButton" class="timeShow" @click="toggleDropdown" ref="buttonRef">
+        fontStyle: configSet.titlefontStyle,
+        fontWeight: configSet.titlefontWeight,
+        marginTop: configSet.titlePaddingY + 'px',
+        marginLeft: configSet.titlePaddingX + 'px'
+      }">{{ configData.title }}</span>
+      <button v-if="configSet.isShowButton" class="timeShow" @click="toggleDropdown" ref="buttonRef">
         {{ configData.dataSource[selectedIndex]?.dataname || '选择数据' }}
       </button>
     </div>
@@ -36,7 +41,7 @@
     </div>
     <div class="chartsContent">
       <span class="smallText Tips">
-        <img class="icon" src="./icon01.png" alt="">
+        <img class="icon" src="./assets/icon01.png" alt="">
         {{ configData.tip }}</span>
       <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="chartOption" :update-options="{
         replaceMerge: replaceMergeArr
@@ -53,14 +58,13 @@ import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
-import Config, { DatasType, includes, seriesItem } from './config'
+import Config, { DatasType, includes, seriesItem, configSet } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
 
-const isShowButton = false;
 
 const props = defineProps({
   themeSetting: {
@@ -151,7 +155,7 @@ watch(
     const parsedData = parseMockData(newMockData);
     selectedIndex.value = parsedData.dataIndex;
   },
-  { immediate: true, deep: true }
+  { immediate: true, deep: false }
 );
 
 
@@ -237,11 +241,7 @@ onUnmounted(() => {
 });
 </script>
 
-<script lang="ts">
+
-export default {
-  name: 'Componentz01'
-}
-</script>
 
 <style lang="scss" scoped>
 @include go(border-box) {
@@ -420,13 +420,11 @@ export default {
 
 .buttonContent span {
 
-  font-size: 15px;
+  font-size: 17px;
   color: #ffffff;
-  letter-spacing: 2px;
+  letter-spacing: 1px;
-  font-weight: 550;
+  font-weight: normal;
   text-shadow: -4px -4px 10px #3B8ED4;
   padding: 0;
-  margin: 0;
-
 }
 </style>

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 }
+
 
 }

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"
+            <filter id="filter3_di_29_565" x="15.9608" y="0" width="21.2381" height="23.4257"
-            color-interpolation-filters="sRGB">
+              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;

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;
 

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

@@ -38,9 +38,9 @@ export const option = {
   sceneNameColor: '#ffffff',
   sceneNameSize: 20,
   labelColor: '#B0E0E6',
-  labelSize: 16,
+  labelSize: 14,
   valueColor: '#ffffff',
-  valueSize: 28,
+  valueSize: 22,
   pointColor1: '#00E5FF',
   pointColor2: '#FFD700'
 }

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

@@ -19,36 +19,43 @@
       </div>
       <div class="content">
         <div class="scene-row" :style="{ backgroundImage: `url(${backgrounds[0]})` }">
-            <div class="scene-name-1" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">危化品库</div>
+          <div class="scene-name-1" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">
+            危化品库</div>
           <div class="metrics-container">
             <div class="metric-top-1">
               <div class="metric-label">
-                  <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span>
+                <span
+                  :style="{ color: option.labelColor, fontSize: option.labelSize + 'px', marginLeft: 8 + 'px' }">场景总数</span>
+              </div>
+              <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262
               </div>
-                <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262</div>
             </div>
             <div class="metric-top-2">
               <div class="metric-label">
                 <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
               </div>
-                <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852</div>
+              <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852
+              </div>
             </div>
           </div>
         </div>
         <div class="scene-row reverse" :style="{ backgroundImage: `url(${backgrounds[1]})` }">
-            <div class="scene-name-2" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">危废品库</div>
+          <div class="scene-name-2" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">
+            危废品库</div>
           <div class="metrics-container">
             <div class="metric-bottom-1">
               <div class="metric-label">
                 <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
               </div>
-                <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852</div>
+              <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852
+              </div>
             </div>
             <div class="metric-bottom-2">
               <div class="metric-label">
                 <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span>
               </div>
-                <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262</div>
+              <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262
+              </div>
             </div>
           </div>
         </div>
@@ -80,6 +87,7 @@ const option = computed(() => props.chartConfig.option)
 .go-workshop-scene {
   position: absolute;
   top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   padding: 12px;
@@ -127,8 +135,8 @@ const option = computed(() => props.chartConfig.option)
   .scene-row {
     display: flex;
     align-items: center;
-    padding: 0 25px;
+    padding: 0 8px;
-    height: 120px; // Taller rows
+    height: 95px; // Taller rows
     background-size: 100% 100%;
     background-repeat: no-repeat;
 
@@ -136,7 +144,7 @@ const option = computed(() => props.chartConfig.option)
       flex-direction: row-reverse;
 
       .scene-name-2 {
-        margin-right: 90px;
+        margin-right: 95px;
         margin-left: 25px;
       }
 
@@ -195,7 +203,8 @@ const option = computed(() => props.chartConfig.option)
       margin: 0 30px;
       position: relative;
 
-      &::before, &::after {
+      &::before,
+      &::after {
         content: '';
         position: absolute;
         left: -2px;
@@ -204,9 +213,11 @@ const option = computed(() => props.chartConfig.option)
         background-color: #00E5FF;
         border-radius: 50%;
       }
+
       &::before {
         top: -1px;
       }
+
       &::after {
         bottom: -1px;
       }
@@ -224,7 +235,12 @@ const option = computed(() => props.chartConfig.option)
     .metric-label {
       display: flex;
       align-items: center;
-      margin-bottom: 8px;
+      margin-bottom: 2px;
+
+      span {
+        margin-bottom: -5px;
+        margin-left: 3px;
+      }
 
       .point {
         width: 8px;
@@ -235,28 +251,30 @@ const option = computed(() => props.chartConfig.option)
     }
 
     .metric-value {
-      font-weight: bold;
+      font-weight: normal;
       position: relative;
-      left: 9px; // Visually center the value under the text
+      left: 10px; // Visually center the value under the text
     }
   }
+
   .metric-top-1 {
     position: relative;
     left: -85px;
   }
+
   .metric-top-2 {
     position: relative;
     left: -30px;
   }
+
   .metric-bottom-1 {
     position: relative;
     left: 15px;
   }
+
   .metric-bottom-2 {
     position: relative;
     left: 70px;
   }
 }
 </style>
-
-

src/packages/components/Charts/MyComponents/index.ts

@@ -8,12 +8,14 @@ import { LineDropdownConfig } from './LineDropdown/index'
 import { PieCenterConfig } from './PieCenter/index'
 import { LineGraph01Config } from './LineGraph01/index'
 import { LineGraph02Config } from './LineGraph02/index'
+import { LineGraph01Config } from './LineGraph01/index'
+import { LineGraph02Config } from './LineGraph02/index'
 import { MaxTrimConfig } from './MaxTrim/index'
 import { SmallBorderConfig } from './SmallBorder/index'
 
 
 export default [
-  SmallBorderConfig,
+
   AlarmListConfig,
   SceneDistributionConfig,
   TopAlarmsConfig,
@@ -25,4 +27,5 @@ export default [
   MaxTrimConfig,
   LineGraph01Config,
   LineGraph02Config,
+  SmallBorderConfig
 ]

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,