From 1963ae8f5b8881cab85075bf9e8de3fe0d42983a Mon Sep 17 00:00:00 2001
From: Free-sss <630042479@qq.com>
Date: Wed, 3 Sep 2025 22:28:35 +0800
Subject: [PATCH] =?UTF-8?q?feat=E3=80=90=E8=83=BD=E6=BA=90=E5=9C=BA?=
 =?UTF-8?q?=E6=99=AF=E3=80=91=EF=BC=9A=E6=96=B0=E5=A2=9E=E4=BE=9B=E7=94=B5?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PowerSupplySystem/config.ts               | 209 ++++++++++++++++++
 .../PowerSupplySystem/config.vue              |  16 ++
 .../PowerSupplySystem/data.json               |  57 +++++
 .../PowerSupplySystem/index.ts                |  14 ++
 .../PowerSupplySystem/index.vue               |  90 ++++++++
 .../Charts/IntegratedEnergy/index.ts          |   6 +-
 6 files changed, 389 insertions(+), 3 deletions(-)
 create mode 100644 src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/config.ts
 create mode 100644 src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/config.vue
 create mode 100644 src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/data.json
 create mode 100644 src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/index.ts
 create mode 100644 src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/index.vue

diff --git a/src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/config.ts b/src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/config.ts
new file mode 100644
index 0000000..6a48ba0
--- /dev/null
+++ b/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)
+}
diff --git a/src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/config.vue b/src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/config.vue
new file mode 100644
index 0000000..4c6f38a
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/data.json b/src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/data.json
new file mode 100644
index 0000000..ddbeeb7
--- /dev/null
+++ b/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"
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/index.ts b/src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/index.ts
new file mode 100644
index 0000000..0ee585e
--- /dev/null
+++ b/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'
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/index.vue b/src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/index.vue
new file mode 100644
index 0000000..021058e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/packages/components/Charts/IntegratedEnergy/index.ts b/src/packages/components/Charts/IntegratedEnergy/index.ts
index edf3973..93cd485 100644
--- a/src/packages/components/Charts/IntegratedEnergy/index.ts
+++ b/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, 
+  EnergyOverviewConfig, EnergyConsumptionTrendConfig,
   ConsumptionProportionConfig,
   FeeOverviewConfig,
-  WaterSupplySystemConfig, AirSupplySystemConfig
+  WaterSupplySystemConfig, AirSupplySystemConfig, PowerSupplySystemConfig
 ]
\ No newline at end of file