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 class="rate-circle-bg">
+          <div class="rate-circle"
-            <div
+            :style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }">
-              class="rate-circle"
+            <div class="rate-text-wrapper">
-              :style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }"
+              <span class="rate-text" :style="{ color: option.progressTextColor }">{{ option.onlineRate }}</span>
-            >
+              <span class="rate-percent" :style="{ color: option.progressTextColor }">%</span>
-              <div class="rate-text-wrapper">
+            </div>
-                <span class="rate-text" :style="{ color: option.progressColor }">{{ option.onlineRate }}</span>
+          </div>
-                <span class="rate-percent" :style="{ color: option.progressColor }">%</span>
+        </div>
+
+        <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>
           </div>
-          <span class="rate-label">设备在线率</span>
-        </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>
-        </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 class="table-header" :style="{
-        <div v-for="header in option.header" :key="header" class="header-item" :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
+        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,148 +99,190 @@ 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;
-        margin-left: 5px;
+
+        .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 {
+
+    .rate-circle-bg {
+      position: relative;
+      width: 60px;
+      height: 60px;
       display: flex;
+      justify-content: center;
       align-items: center;
-      margin-right: 15px;
+      padding-bottom: 2px;
-      .rate-circle-bg {
+
-        position: relative;
+      &::after {
-        width: 60px;
+        content: '';
-        height: 60px;
+        position: absolute;
-        display: flex;
+        top: -5px;
-        justify-content: center;
+        left: -5px;
-        align-items: center;
+        right: -5px;
-        &::after {
+        bottom: -5px;
-          content: '';
-          position: absolute;
-          top: -5px;
-          left: -5px;
-          right: -5px;
-          bottom: -5px;
-          border-radius: 50%;
-          filter: blur(5px);
-          background: radial-gradient(circle, rgba(0, 229, 255, 0.5), transparent 70%);
-        }
-      }
-      .rate-circle {
-        width: 60px;
-        height: 60px;
         border-radius: 50%;
-        display: flex;
+        filter: blur(5px);
-        justify-content: center;
+        background: radial-gradient(circle, #0d5585, transparent 60%);
-        align-items: center;
-        position: relative;
-        z-index: 1;
-        &::before {
-          content: '';
-          width: 48px;
-          height: 48px;
-          background-color: #041126;
-          border-radius: 50%;
-        }
-        .rate-text-wrapper {
-          position: absolute;
-          .rate-text {
-            font-size: 24px;
-            font-weight: bold;
-          }
-          .rate-percent {
-            font-size: 14px;
-            margin-left: 2px;
-          }
-        }
-      }
-      .rate-label {
-        font-size: 16px;
-        margin-left: 10px;
       }
     }
+
+    .rate-circle {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      z-index: 1;
+
+      &::before {
+        content: '';
+        width: 36px;
+        height: 36px;
+        background-color: #041126;
+        border-radius: 50%;
+      }
+
+      .rate-text-wrapper {
+        position: absolute;
+
+        .rate-text {
+          font-size: 12px;
+          font-weight: bold;
+        }
+
+        .rate-percent {
+          font-size: 12px;
+          margin-left: 0px;
+        }
+      }
+    }
+
+    .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/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,37 +19,44 @@
       </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 class="metrics-container">
+            危化品库</div>
-              <div class="metric-top-1">
+          <div class="metrics-container">
-                <div class="metric-label">
+            <div class="metric-top-1">
-                  <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span>
+              <div class="metric-label">
-                </div>
+                <span
-                <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262</div>
+                  :style="{ color: option.labelColor, fontSize: option.labelSize + 'px', marginLeft: 8 + 'px' }">场景总数</span>
               </div>
-              <div class="metric-top-2">
+              <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262
-                <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>
+            </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>
           </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 class="metrics-container">
+            危废品库</div>
-              <div class="metric-bottom-1">
+          <div class="metrics-container">
-                <div class="metric-label">
+            <div class="metric-bottom-1">
-                  <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
+              <div class="metric-label">
-                </div>
+                <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
-                <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852</div>
               </div>
-              <div class="metric-bottom-2">
+              <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852
-                <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>
+            </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>
           </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;
@@ -98,7 +106,7 @@ const option = computed(() => props.chartConfig.option)
     .title {
       display: flex;
       align-items: center;
-	   margin-left: 35px;
+      margin-left: 35px;
       margin-top: 5px;
 
       .title-text {
@@ -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,10 +144,10 @@ const option = computed(() => props.chartConfig.option)
       flex-direction: row-reverse;
 
       .scene-name-2 {
-        margin-right: 90px;
+        margin-right: 95px;
         margin-left: 25px;
       }
-      
+
       .metrics-container {
         margin-right: auto;
         margin-left: 0;
@@ -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;
+    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,