refactor(Charts): 统一调整集成能源图表尺寸并添加背景组件

- 将FeeOverview、ConsumptionProportion和ConstructionIndex图表的宽度调整为450，高度调整为320
- 为ConstructionIndex图表添加缺失的attr配置
- 在各图表组件中用Background组件替换原有容器，并添加标题
- 调整ConstructionIndex列表项的样式

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

@@ -1,6 +1,7 @@
 import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { ConstructionIndexConfig } from './index'
+import { chartInitConfig } from '@/settings/designSetting'
 import cloneDeep from 'lodash/cloneDeep'
 
 //导入数据
@@ -14,4 +15,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public key = ConstructionIndexConfig.key
   public chartConfig = cloneDeep(ConstructionIndexConfig)
   public option = cloneDeep(option)
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
 }

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="contruction-index">
+  <Background title-text="开工指数" :select-option-mode="0">
- <div class="contruction-index-title">
+  <div class="contruction-index-title">
     <img class="contruction-index-title_tag" src="./assets/tag.png" alt="">
     <div class="contruction-index-title_title">
       <div>开工指数</div>
@@ -26,13 +26,14 @@
       </div>
     </div>
   </div>
-  </div>
+  </Background>
  
 </template>
 
 <script lang="ts" setup>
 import { PropType, computed } from 'vue'
 import { option as configOption } from './config'
+import Background from '../Background/index.vue'
 
 const props = defineProps({
   chartConfig: {
@@ -95,8 +96,8 @@ const calculateWidth = (value: number) => {
   width:90%;
   margin: 0 auto;
   .contruction-index-list_item {
-    height: 30px;
+    height: 25px;
-    margin: 15px 0px;
+    margin-top: 13px;
     display: flex;
     font-size: 12px;
     color: #fff;

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

@@ -95,5 +95,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
     public key: string = ConsumptionProportionConfig.key
     public chartConfig = cloneDeep(ConsumptionProportionConfig)
     public option = echartOptionProfixHandle(option, includes)
-    public attr = { ...chartInitConfig, x: 0, y: 0, w: 420, h: 280, zIndex: 1 }
+    public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
 }

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="go-border-box">
+    <Background title-text="能耗占比" :select-option-mode="0">
         <!-- <img src="./assets/title.svg" class="svg" />
         <div class="header-title">有限空间分布情况</div> -->
         <div class="title-value">
@@ -7,8 +7,7 @@
             <div class="title-value_unit">/万元</div>
         </div>
         <v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"></v-chart>
-    </div>
+    </Background>
-
 </template>
 
 <script setup lang="ts">
@@ -29,6 +28,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
 import dataJson from './data.json'
 import { getPie3D } from './3dPie'
+import Background from '../Background/index.vue'
 import axiosInstance from '@/api/axios';
 
 const props = defineProps({

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

@@ -95,5 +95,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
     public key: string = FeeOverviewConfig.key
     public chartConfig = cloneDeep(FeeOverviewConfig)
     public option = echartOptionProfixHandle(option, includes)
-    public attr = { ...chartInitConfig, x: 0, y: 0, w: 420, h: 280, zIndex: 1 }
+    public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
 }

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="go-border-box">
+    <Background title-text="费用概况" :select-option-mode="0">
         <!-- <img src="./assets/title.svg" class="svg" />
         <div class="header-title">有限空间分布情况</div> -->
         <div class="title-value">
@@ -7,7 +7,7 @@
             <div class="title-value_unit">/万元</div>
         </div>
         <v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"></v-chart>
-    </div>
+    </Background>
 
 </template>
 
@@ -29,6 +29,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
 import dataJson from './data.json'
 import { getPie3D } from './3dPie'
+import Background from '../Background/index.vue'
 import axiosInstance from '@/api/axios';
 
 const props = defineProps({