style：修改（费用总览）样式匹配要求

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/config.ts

@@ -3,9 +3,44 @@ import { CreateComponentType } from '@/packages/index.d'
 import { EnergyOverviewConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import { chartInitConfig } from '@/settings/designSetting'
+
 //导入数据
+import costIcon from './assets/cost.svg'
 import dataJson from './data.json'
+const otherOption = {
+  gridItems: [
+    {
+      icon: costIcon,
+      label: '费用',
+      field: 'cost',
+      unit: '单位',
+      valueClass: 'value-cost'
+    },
+    {
+      icon: costIcon,
+      label: '市电',
+      field: 'mainsElectricity',
+      unit: '单位',
+      valueClass: 'value-electricity'
+    },
+    {
+      icon: costIcon,
+      label: '供水',
+      field: 'waterSupply',
+      unit: '单位',
+      valueClass: 'value-water'
+    },
+    {
+      icon: costIcon,
+      label: '燃气',
+      field: 'gasSupply',
+      unit: '单位',
+      valueClass: 'value-gas'
+    }
+  ]
+}
 export const option = {
+  ...otherOption,
   dataset: dataJson
 }
 
@@ -13,5 +48,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public key = EnergyOverviewConfig.key
   public chartConfig = cloneDeep(EnergyOverviewConfig)
   public option = cloneDeep(option)
-  public attr = { ...chartInitConfig, x: 0, y: 0, w: 1000, h: 240, zIndex: 1 }
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 889, h: 267, zIndex: 1 }
 }

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/data.json

@@ -1,6 +1,6 @@
 {
-  "cost":1000,
+  "cost": 1000,
-  "mainsElectricity":1000,
+  "mainsElectricity": 1000,
-  "waterSupply":1000,
+  "waterSupply": 1000,
-  "gasSupply":1000
+  "gasSupply": 1000
 }

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/index.vue

@@ -1,59 +1,48 @@
 <template>
   <div class="go-energy-box">
     <div class="grid-container">
-      <div class="grid-item">
+      <div v-for="(item, index) in configOption.gridItems" :key="index" class="grid-item">
         <span class="item">
-          <img class="icon " src="./assets/cost.svg" alt="">
+          <img class="icon" :src="item.icon" :alt="item.label">
         </span>
-        <span class="label item">费用</span>
+        <div class="item-container item">
-        <span class="value item">{{ option.dataset.cost.toFixed(2) }}</span>
+          <span class="label">{{ item.label }}</span>
-        <span class="unit item">单位</span>
+          <div class="value-container">
-      </div>
+            <div class="value" :class="item.valueClass">
-
+              {{ getDataValue(item.field).toFixed(2) }}
-      <div class="grid-item">
+            </div>
-        <span class="item">
+            <span class="unit">{{ item.unit }}</span>
-          <img class="icon " src="./assets/cost.svg" alt="">
+          </div>
-        </span>
+        </div>
-        <span class="label item">市电</span>
-        <span class="value item">{{ option.dataset.mainsElectricity.toFixed(2) }}</span>
-        <span class="unit item">单位</span>
-      </div>
-      <div class="grid-item">
-        <span class="item">
-          <img class="icon " src="./assets/cost.svg" alt="">
-        </span>
-        <span class="label item">供水</span>
-        <span class="value item">{{ option.dataset.waterSupply.toFixed(2) }}</span>
-        <span class="unit item">单位</span>
-      </div>
-      <div class="grid-item">
-        <span class="item">
-          <img class="icon " src="./assets/cost.svg" alt="">
-        </span>
-        <span class="label item">燃气</span>
-        <span class="value item">{{ option.dataset.gasSupply.toFixed(2) }}</span>
-        <span class="unit item">单位</span>
       </div>
     </div>
   </div>
-
 </template>
 
 <script lang="ts" setup>
-import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { PropType, shallowReactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { option as configOption } from './config'
+
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
     required: true
   }
 })
+
 const option = shallowReactive({
   dataset: configOption.dataset
 })
+
+
+// 获取数据值的方法
+const getDataValue = (field: string) => {
+  return (option.dataset as Record<string, number>)[field] || 0
+}
+
 watch(
   () => props.chartConfig.option.dataset,
   (newData: any) => {
@@ -70,7 +59,6 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 })
 </script>
 
-
 <style lang="scss" scoped>
 @include go('energy-box') {
   width: 100%;
@@ -84,63 +72,99 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
     grid-gap: 10px;
 
     .grid-item {
-      background-color: #043951;
+      // background-color: #043951;
-      // padding: 20px;
       padding: 10px 20px 5px 20px;
       font-size: 30px;
-
       display: flex;
       align-items: center;
-      /* 默认垂直居中对齐 */
       gap: 0px;
 
-      .item {
+
+      .item-container {
         display: flex;
-        align-items: center;
+        flex-direction: column;
-        font-family: 'CustomFont';
-        // background-color: beige;
-      }
-
-      .label {
-        color: #07A1C8;
-        font-size: 22px;
-        flex-shrink: 0;
         margin-left: 20px;
-        align-self: flex-start;
+        margin-right: 20px;
+        width: 100%;
+        height: auto;
+        font-family: 'CustomFont';
+
+
+        .value-container {
+          display: flex;
+          align-items: flex-end;
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+
+          .value {
+            font-size: 35px;
+            letter-spacing: 3px;
+            // flex-grow: 1;
+            // flex-shrink: 0;
+            align-self: flex-end;
+            white-space: nowrap;
+            overflow: hidden;
+            margin-right: 20px;
+            // -webkit-background-clip: text;
+            // background-clip: text;
+            // color: transparent;
+            // -webkit-text-fill-color: transparent;
+          }
+
+          .unit {
+            font-size: 18px;
+            flex-shrink: 0;
+            color: #eee;
+            margin-bottom: 10px;
+          }
+        }
+
+        .label {
+          color: #07A1C8;
+          font-size: 22px;
+          align-self: flex-start;
+
+          // 使用渐变背景色
+          background: linear-gradient(to right, rgba(255, 255, 255, 0.624) 0%, rgba(255, 255, 255, 1) 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          -webkit-text-fill-color: transparent;
+          color: transparent; // 兼容性处理
+        }
+
+
+
+        // 为每个value定义不同的颜色
+        .value-cost {
+          color: #479FFE;
+        }
+
+        .value-electricity {
+          color: #90FFAD;
+        }
+
+        .value-water {
+          color: #0DBBF4;
+        }
+
+        .value-gas {
+          color: #E5B55B;
+        }
+
+
+
       }
 
-      .value {
+      .item {}
-        color: beige;
-        font-size: 40px;
-        letter-spacing: 3px;
-        // 是否让value挤占单位生存空间
-        flex-grow: 1;
-        flex-shrink: 0;
-        margin-right: 10px;
-        align-self: flex-end;
 
-        background: linear-gradient(to top, #0d78bb, #ffffff);
-        -webkit-background-clip: text;
-        background-clip: text;
-        color: transparent;
-        -webkit-text-fill-color: transparent;
-      }
 
-      .unit {
-        font-size: 20px;
-
-        /* 防止被压缩 */
-        flex-shrink: 0;
-
-        /* 垂直置底 */
-        align-self: flex-end;
-        margin-bottom: 5px;
-      }
 
       .icon {
-        width: 50px;
+        width: 60px;
-        height: 50px;
+        height: 60px;
         flex-shrink: 0;
+        object-fit: contain;
       }
     }
   }