feat【能源场景】: 统一尺寸并添加背景组件

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

@@ -4,11 +4,28 @@ import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 import * as echarts from 'echarts'
-
+import { chartInitConfig } from '@/settings/designSetting'
 export const includes = []
 const otherOption = {
   sceneCode: '',
   unit: dataJson.unit,
+  titleText: '供风系统',
+  selectOptionMode: 4, // 0 无 1 平行按钮 2 下拉菜单 3 容器右上角按钮 4 下拉菜单和 容器右上角
+  selectOptions: {
+    selectedValue: 'electricsupply',
+    dataset: [
+      { label: '空压机站1', value: 'electricsupply' },
+      { label: '空压机站2', value: 'watersupply' },
+      { label: '数据数据', value: 'gassupply' }
+    ]
+  },
+  inSelectOptions: {
+    selectedValue: 'kyjxx',
+    dataset: [
+      { label: '空压机XX', value: 'kyjxx' },
+      { label: '供风总量', value: 'airsupplySum' },
+    ]
+  }
 }
 export const option = {
   ...otherOption,
@@ -182,4 +199,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public chartConfig = cloneDeep(AirSupplySystemConfig)
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
 }

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

@@ -1,12 +1,16 @@
 <template>
-  <div class="go-energy-box">
+  <Background :title-text="titleText" :select-option-mode="selectOptionMode" :select-options="selectOptions"
-    <div class="content">
+    :in-select-options="inSelectOptions" @mode1-2-select="handleHeaderSelectChange" @mode3-select="handleInSelect">
-      <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
+    <div class="go-energy-box">
-        replaceMerge: replaceMergeArr
+      <div class="content">
-      }" autoresize>
+        <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
-      </v-chart>
+          replaceMerge: replaceMergeArr
+        }" autoresize>
+        </v-chart>
+      </div>
     </div>
-  </div>
+  </Background>
+
 
 </template>
 
@@ -23,6 +27,7 @@ import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
+import Background from '../Background/index.vue'
 const props = defineProps({
   themeSetting: {
     type: Object,
@@ -39,6 +44,7 @@ const props = defineProps({
 })
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 
+
 use([
   CanvasRenderer,
   BarChart,
@@ -55,6 +61,18 @@ const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
+const titleText = computed(() => {
+  return props.chartConfig.option.titleText;
+});
+const selectOptionMode = computed(() => {
+  return props.chartConfig.option.selectOptionMode;
+});
+const selectOptions = computed(() => {
+  return props.chartConfig.option.selectOptions;
+});
+const inSelectOptions = computed(() => {
+  return props.chartConfig.option.inSelectOptions;
+});
 watch(
   () => props.chartConfig.option.dataset,
   (newData: any) => {
@@ -68,6 +86,13 @@ watch(
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   props.chartConfig.option.dataset = newData
 })
+const handleHeaderSelectChange = (value: string) => {
+  console.log('模式1/2选中值：', value);
+}
+const handleInSelect = (value: string) => {
+  console.log('模式3选中值：', value);
+
+}
 
 onMounted(async () => {
   // 更新显示单位

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

@@ -4,14 +4,22 @@ import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 import * as echarts from 'echarts'
-
+import { chartInitConfig } from '@/settings/designSetting'
 export const includes = []
 const otherOption = {
   sceneCode: '',
-  titleText:'能源趋势',
+  titleText: '能耗趋势',
   unit: dataJson.unit,
+  selectOptionMode: 1, // 0 无 1 平行按钮 2 下拉菜单 3 容器右上角按钮 4 下拉菜单和 容器右上角
+  selectOptions: {
+    selectedValue: 'electricsupply',
+    dataset: [
+      { label: '电力', value: 'electricsupply' },
+      { label: '供水', value: 'watersupply' },
+      { label: '燃气', value: 'gassupply' }
+    ]
+  }
 }
-
 const option = {
   ...otherOption,
   dataset: dataJson,
@@ -187,6 +195,7 @@ const option = {
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = EnergyConsumptionTrendConfig.key
   public chartConfig = cloneDeep(EnergyConsumptionTrendConfig)
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
 }

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

@@ -1,12 +1,16 @@
 <template>
-  <div class="go-energy-box">
+  <Background :title-text="titleText" :select-option-mode="selectOptionMode" :select-options="selectOptions"
-    <div class="content">
+    :in-select-options="inSelectOptions" @mode1-2-select="handleHeaderSelectChange">
-      <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
+    <div class="go-energy-box">
-        replaceMerge: replaceMergeArr
+      <div class="content">
-      }" autoresize>
+        <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
-      </v-chart>
+          replaceMerge: replaceMergeArr
+        }" autoresize>
+        </v-chart>
+      </div>
     </div>
-  </div>
+  </Background>
+
 
 </template>
 
@@ -23,6 +27,7 @@ import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
+import Background from '../Background/index.vue'
 const props = defineProps({
   themeSetting: {
     type: Object,
@@ -39,6 +44,7 @@ const props = defineProps({
 })
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 
+
 use([
   CanvasRenderer,
   BarChart,
@@ -50,12 +56,23 @@ const replaceMergeArr = ref<string[]>([])
 
 const updataUnit = () => {
   option.value.title.text = '单位：' + option.value.unit;
-
 }
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
+const titleText = computed(() => {
+  return props.chartConfig.option.titleText;
+})
+const selectOptionMode = computed(() => {
+  return props.chartConfig.option.selectOptionMode;
+});
+const selectOptions = computed(() => {
+  return props.chartConfig.option.selectOptions;
+});
+const inSelectOptions = computed(() => {
+  return props.chartConfig.option.inSelectOptions;
+});
 watch(
   () => props.chartConfig.option.dataset,
   (newData: any) => {
@@ -69,6 +86,9 @@ watch(
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   props.chartConfig.option.dataset = newData
 })
+const handleHeaderSelectChange = (value: string) => {
+  console.log('模式1/2选中值：', value);
+}
 
 onMounted(async () => {
   // 更新显示单位

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

@@ -13,6 +13,7 @@ import dataJson from './data.json'
 const otherOption = {
   sceneCode: '',
   titleText: '能源总览',
+  
   gridItems: [
     {
       icon: costIcon,

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

@@ -1,22 +1,27 @@
 <template>
+
   <div class="go-energy-box">
-    <div class="grid-container">
+    <Background :title-text="chartConfig.option.titleText">
-      <div v-for="(item, index) in chartConfig.option.gridItems" :key="index" class="grid-item">
+      <div class="grid-container">
-        <span class="item">
+        <div v-for="(item, index) in chartConfig.option.gridItems" :key="index" class="grid-item">
-          <img class="icon" :src="item.icon" :alt="item.label">
+          <span class="item">
-        </span>
+            <img class="icon" :src="item.icon" :alt="item.label">
-        <div class="item-container item">
+          </span>
-          <span class="label">{{ item.label }}</span>
+          <div class="item-container item">
-          <div class="value-container">
+            <span class="label">{{ item.label }}</span>
-            <div class="value" :class="item.valueClass">
+            <div class="value-container">
-              {{ getDataValue(item.field).toFixed(2) }}
+              <div class="value" :class="item.valueClass">
+                {{ getDataValue(item.field).toFixed(2) }}
+              </div>
+              <span class="unit">{{ item.unit }}</span>
             </div>
-            <span class="unit">{{ item.unit }}</span>
           </div>
         </div>
       </div>
-    </div>
+    </Background>
   </div>
+
+
 </template>
 
 <script lang="ts" setup>
@@ -25,7 +30,7 @@ import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 // import { option as configOption } from './config'
-
+import Background from '../Background/index.vue'
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
@@ -63,18 +68,24 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 @include go('energy-box') {
   width: 100%;
   height: 100%;
+  // padding-top: 15px;
 
   .grid-container {
-    height: 100%;
+    // background-color: #90FFAD;
+    height: 90%;
     width: 100%;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
+    // margin-top: 20px;
     grid-gap: 10px;
     padding: 0 10px;
+    // box-sizing: content-box;
 
     .grid-item {
       // background-color: #043951;
-      padding: 10px 20px 5px 20px;
+      // padding: 10px 20px 5px 20px;
+      padding-left: 20px;
+      box-sizing: content-box;
       font-size: 30px;
       display: flex;
       align-items: center;

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

@@ -4,12 +4,22 @@ import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import * as echarts from 'echarts'
 import dataJson from './data.json'
+import { chartInitConfig } from '@/settings/designSetting'
 
 export const includes = []
 const otherOption = {
   sceneCode: '',
   titleText: '燃气系统',
   unit: dataJson.unit,
+  selectOptionMode: 3,
+  inSelectOptions: {
+    selectedValue: 'consumption',
+    dataset: [
+      { label: '消耗量', value: 'consumption' },
+      { label: '费用', value: 'cost' },
+      { label: '最大流量', value: 'maximumFlow' }
+    ]
+  }
 }
 
 const option = {
@@ -152,6 +162,7 @@ const option = {
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = GasSystemConfig.key
   public chartConfig = cloneDeep(GasSystemConfig)
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
 }

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

@@ -1,12 +1,15 @@
 <template>
-  <div class="go-energy-box">
+  <Background :title-text="titleText" :select-option-mode="selectOptionMode" :in-select-options="inSelectOptions"
-    <div class="content">
+    @mode3-select="handleInSelect">
-      <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
+    <div class="go-energy-box">
-        replaceMerge: replaceMergeArr
+      <div class="content">
-      }" autoresize>
+        <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
-      </v-chart>
+          replaceMerge: replaceMergeArr
+        }" autoresize>
+        </v-chart>
+      </div>
     </div>
-  </div>
+  </Background>
 
 </template>
 
@@ -24,6 +27,8 @@ import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
 import dataJson from './data.json'
+import Background from '../Background/index.vue'
+
 const props = defineProps({
   themeSetting: {
     type: Object,
@@ -48,11 +53,22 @@ use([
 ])
 
 const replaceMergeArr = ref<string[]>([])
-
+const titleText = computed(() => {
-
+  return props.chartConfig.option.titleText;
+});
+const selectOptionMode = computed(() => {
+  return props.chartConfig.option.selectOptionMode;
+});
+const inSelectOptions = computed(() => {
+  return props.chartConfig.option.inSelectOptions;
+});
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
+const handleInSelect = (value: string) => {
+  console.log('模式3选中值：', value);
+
+}
 const updataUnit = () => {
   option.value.title.text = '单位：' + option.value.unit;
 

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

@@ -4,10 +4,11 @@ import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 import * as echarts from 'echarts'
-
+import { chartInitConfig } from '@/settings/designSetting'
 export const includes = []
 const otherOption = {
   sceneCode: '',
+  titleText: '供电系统',
   unit: dataJson.unit,
 }
 
@@ -206,4 +207,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public chartConfig = cloneDeep(PowerSupplySystemConfig)
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
 }

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

@@ -1,12 +1,14 @@
 <template>
-  <div class="go-energy-box">
+  <Background :title-text="titleText">
-    <div class="content">
+    <div class="go-energy-box">
-      <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
+      <div class="content">
-        replaceMerge: replaceMergeArr
+        <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
-      }" autoresize>
+          replaceMerge: replaceMergeArr
-      </v-chart>
+        }" autoresize>
+        </v-chart>
+      </div>
     </div>
-  </div>
+  </Background>
 
 </template>
 
@@ -23,6 +25,7 @@ import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
+import Background from '../Background/index.vue'
 const props = defineProps({
   themeSetting: {
     type: Object,
@@ -38,7 +41,9 @@ const props = defineProps({
   }
 })
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
-
+const titleText = computed(() => {
+  return props.chartConfig.option.titleText;
+})
 use([
   CanvasRenderer,
   BarChart,

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

@@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 import * as echarts from 'echarts'
-
+import { chartInitConfig } from '@/settings/designSetting'
 export const includes = ['title']
 const wid = 12;
 const w1 = Math.sin(Math.PI / 6) * wid; //4
@@ -13,7 +13,8 @@ const snapHeight = wid / 2;
 const otherOption = {
   wid, w1, w2, snapHeight,
   unit: dataJson.unit,
-  sceneCode:''
+  sceneCode: '',
+  titleText: '供水系统'
 }
 export const option = {
   ...otherOption,
@@ -287,6 +288,7 @@ export function createCubeShapes() {
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = WaterSupplySystemConfig.key
   public chartConfig = cloneDeep(WaterSupplySystemConfig)
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
 }

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

@@ -1,12 +1,14 @@
 <template>
-  <div class="go-energy-box">
+  <Background :title-text="titleText">
-    <div class="content">
+    <div class="go-energy-box">
-      <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
+      <div class="content">
-        replaceMerge: replaceMergeArr
+        <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
-      }" autoresize>
+          replaceMerge: replaceMergeArr
-      </v-chart>
+        }" autoresize>
+        </v-chart>
+      </div>
     </div>
-  </div>
+  </Background>
 
 </template>
 
@@ -23,6 +25,8 @@ import config, { includes, createCubeShapes, createRenderItemFunction } from './
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
+import Background from '../Background/index.vue'
+
 const props = defineProps({
   themeSetting: {
     type: Object,
@@ -39,7 +43,9 @@ const props = defineProps({
 })
 const { CubeLeft, CubeRight, CubeTop } = createCubeShapes();
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
-
+const titleText = computed(() => {
+  return props.chartConfig.option.titleText;
+})
 use([
   CanvasRenderer,
   BarChart,