feat【能源场景】：新增供电系统组件

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

@@ -0,0 +1,209 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { PowerSupplySystemConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+import * as echarts from 'echarts'
+
+export const includes = []
+const otherOption = {
+  secneID: '',
+  unit: dataJson.unit,
+}
+
+const option = {
+  ...otherOption,
+  dataset: dataJson,
+  // 添加标题配置
+  title: {
+    text: '单位：' + otherOption.unit,
+    left: '3%',
+    top: '3%',
+    textStyle: {
+      fontSize: 12,
+      color: 'rgba(255, 255, 255, 0.7)',
+      fontWeight: 'normal'
+    }
+  },
+  // 提示框配置
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    },
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    borderColor: '#00ffff',
+    textStyle: {
+      color: '#ffffff'
+    }
+  },
+  // 网格配置
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    top: '15%',
+    containLabel: true
+  },
+
+  // X轴配置
+  xAxis: {
+    type: 'category',
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    // 
+    axisLabel: {
+      color: '#eee',
+      interval: 0,
+      fontSize: 9,
+      margin: 20
+    }
+
+  },
+
+  // Y轴配置
+  yAxis: {
+    type: 'value',
+    min: 0,
+    interval: 25,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      formatter: '{value}'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+        type: 'solid'
+      }
+    }
+  },
+
+  // 数据系列配置
+  series: [{
+
+    name: '能源消耗',
+    type: 'bar',
+    itemStyle: {
+      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        { offset: 0, color: '#009CFF' },    // 更暗的左侧颜色，增强阴影效果
+        { offset: 0.5, color: '#5B69BE ' },  // 中间主色
+        { offset: 1, color: '#A478FF' }     // 右侧亮色，增强高光效果
+      ]),
+      opacity: 0.7,
+      // 添加更强的3D效果
+      shadowBlur: 20,
+      shadowColor: 'rgba(0, 0, 0, 0.7)',
+      shadowOffsetX: -5,
+      shadowOffsetY: 5,
+      borderRadius: [0, 0, 5, 5],
+      borderWidth: 0,
+
+    },
+    emphasis: {
+      itemStyle: {
+        shadowColor: 'rgba(40, 26, 143, 0.9)',
+        shadowBlur: 25,
+        shadowOffsetX: -8,
+        shadowOffsetY: 8
+      }
+    },
+    z: 2,
+
+    barWidth: '45%',
+
+    // 3D圆柱体效果
+    roundCap: false
+  }, {
+    type: 'pictorialBar',
+    z: 3,
+    symbolSize: ['65%', '5'],
+    symbolOffset: [0.1, -3],
+    symbolPosition: "end",
+    itemStyle: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+      { offset: 0, color: '#009CFF' },    // 更暗的左侧颜色，增强阴影效果
+      { offset: 0.5, color: '#5B69BE ' },  // 中间主色
+      { offset: 1, color: '#A478FF' }     // 右侧亮色，增强高光效果
+    ]),
+    // opacity: 0.1,
+    emphasis: {
+      itemStyle: {
+        shadowColor: "rgba(119, 51, 221, 0.9)",
+        shadowBlur: 12
+      }
+    }
+  }, 
+  // 有透明度的数据柱加底部面会导致显示叠加以成效果不堪，所以暂时取消
+  // {
+  //   type: 'pictorialBar',
+  //   z: 1,
+  //   symbolSize: ['65%', '5'],
+  //   symbolOffset: [0.1,],
+  //   symbolPosition: "start",
+  //   itemStyle: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+  //     { offset: 0, color: '#009CFF' },    // 更暗的左侧颜色，增强阴影效果
+  //     { offset: 0.5, color: '#5B69BE ' },  // 中间主色
+  //     { offset: 1, color: '#A478FF' }     // 右侧亮色，增强高光效果
+  //   ]),
+  //   // opacity: 0.1,
+  //   emphasis: {
+  //     itemStyle: {
+  //       shadowColor: "rgba(105, 10, 221, 0.9)",
+  //       shadowBlur: 12
+  //     }
+  //   }
+  // }
+  ],
+
+  // 图形元素配置
+  graphic: [{
+    // 左侧阴影效果
+    type: 'rect',
+    left: 0,
+    top: '15%',
+    width: '25%',
+    bottom: '3%',
+    style: {
+      fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        { offset: 0, color: 'rgba(0, 0, 0, 0.8)' },   // 更强的左侧阴影
+        { offset: 1, color: 'rgba(0, 0, 0, 0)' }
+      ])
+    },
+    z: -1
+  }, {
+    // 底部阴影效果
+    type: 'rect',
+    left: '3%',
+    right: '4%',
+    bottom: '0',
+    height: '10%',
+    style: {
+      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        { offset: 0, color: 'rgba(0, 0, 0, 0)' },
+        { offset: 1, color: 'rgba(0, 0, 0, 0.6)' }   // 底部阴影
+      ])
+    },
+    z: -1
+  }]
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = PowerSupplySystemConfig.key
+  public chartConfig = cloneDeep(PowerSupplySystemConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

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

@@ -0,0 +1,16 @@
+<template>
+  
+</template>
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

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

@@ -0,0 +1,57 @@
+{
+  "dimensions": [
+    "month",
+    "value"
+  ],
+  "source": [
+    {
+      "month": "1月",
+      "value": 88
+    },
+    {
+      "month": "2月",
+      "value": 54
+    },
+    {
+      "month": "3月",
+      "value": 66
+    },
+    {
+      "month": "4月",
+      "value": 54
+    },
+    {
+      "month": "5月",
+      "value": 89
+    },
+    {
+      "month": "6月",
+      "value": 67
+    },
+    {
+      "month": "7月",
+      "value": 54
+    },
+    {
+      "month": "8月",
+      "value": 89
+    },
+    {
+      "month": "9月",
+      "value": 54
+    },
+    {
+      "month": "10月",
+      "value": 89
+    },
+    {
+      "month": "11月",
+      "value": 54
+    },
+    {
+      "month": "12月",
+      "value": 67
+    }
+  ],
+    "unit": "万kwh"
+}

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const PowerSupplySystemConfig: ConfigType = {
+  key: 'PowerSupplySystem',
+  chartKey: 'VPowerSupplySystem',
+  conKey: 'VCPowerSupplySystem',
+  title: '供电系统',
+  category: ChatCategoryEnum.IntegratedEnergy,
+  categoryName: ChatCategoryEnumName.IntegratedEnergy,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'PowerSupplySystem.png'
+}

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

@@ -0,0 +1,90 @@
+<template>
+  <div class="go-energy-box">
+    <div class="content">
+      <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
+        replaceMerge: replaceMergeArr
+      }" autoresize>
+      </v-chart>
+    </div>
+  </div>
+
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, onMounted, ref, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import * as echarts from 'echarts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart } from 'echarts/charts'
+import { TitleComponent, GridComponent } from 'echarts/components'
+import config, { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([
+  CanvasRenderer,
+  BarChart,
+  TitleComponent,
+  GridComponent
+])
+
+const replaceMergeArr = ref<string[]>([])
+
+const updataUnit = () => {
+  option.value.title.text = '单位：' + option.value.unit;
+
+}
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    updataUnit();
+    option.value.dataset = newData
+  }, {
+  immediate: true,
+  deep: false
+}
+)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+
+onMounted(async () => {
+  // 更新显示单位
+  updataUnit();
+})
+
+</script>
+
+<style lang="scss" scoped>
+@include go('energy-box') {
+  width: 100%;
+  height: 100%;
+
+  .content {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

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

@@ -4,10 +4,10 @@ import { ConsumptionProportionConfig } from "./ConsumptionProportion"
 import { FeeOverviewConfig } from "./FeeOverview"
 import { WaterSupplySystemConfig } from "./WaterSupplySystem"
 import { AirSupplySystemConfig } from './AirSupplySystem'
-
+import { PowerSupplySystemConfig } from './PowerSupplySystem'
 export default [
   EnergyOverviewConfig, EnergyConsumptionTrendConfig,
   ConsumptionProportionConfig,
   FeeOverviewConfig,
-  WaterSupplySystemConfig, AirSupplySystemConfig
+  WaterSupplySystemConfig, AirSupplySystemConfig, PowerSupplySystemConfig
 ]