feat【能源场景】：新增燃气系统组件

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

@@ -0,0 +1,157 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { GasSystemConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import * as echarts from 'echarts'
+import dataJson from './data.json'
+
+export const includes = []
+const otherOption = {
+  secneID: '',
+  titleText: '燃气系统',
+  unit: dataJson.unit,
+}
+
+const option = {
+  ...otherOption,
+  dataset: dataJson,
+  // 添加标题配置
+  title: {
+    text: '单位：' + otherOption.unit,
+    left: '2%',
+    top: '2%',
+    textStyle: {
+      fontSize: 12,
+      color: 'rgba(255, 255, 255, 0.7)',
+      fontWeight: 'normal'
+    }
+  },
+  // 提示框配置
+  tooltip: {
+    trigger: 'axis',
+    // formatter: function (params) {
+    //   let param = params[0];
+    //   return `${param.name}: ${param.value.value}`;
+    // },
+    axisPointer: {
+      type: 'line',
+      lineStyle: {
+        color: 'rgba(58, 160, 255, 1)',
+        type: 'solid'
+      }
+    }
+  },
+  // 网格配置
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    top: '15%',
+    containLabel: true
+  },
+
+  // X轴配置
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    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: 'line',
+      smooth: true,
+      symbol: 'none', // 默认不显示点
+      symbolSize: 8,
+      lineStyle: {
+        width: 2,
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            { offset: 0, color: 'rgba(58, 160, 255, 1)' },
+            { offset: 1, color: 'rgba(127, 216, 255, 1)' }
+          ]
+        }
+      },
+      emphasis: {
+        focus: 'series',
+        symbol: 'circle', // 鼠标悬停时显示圆点
+        symbolSize: 8,
+        itemStyle: {
+          color: 'rgba(58, 160, 255, 1)',
+          borderColor: 'rgba(255, 255, 255, 0.8)',
+          borderWidth: 2
+        }
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: 'rgba(53, 192, 227,1)' },
+            { offset: 0.4, color: 'rgba(49, 175, 255, 0.8)' },
+            { offset: 1, color: 'rgba(58, 160, 255, 0.05)' }
+          ]
+        }
+      }
+    }
+  ],
+
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = GasSystemConfig.key
+  public chartConfig = cloneDeep(GasSystemConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/IntegratedEnergy/GasSystem/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/GasSystem/data.json

@@ -0,0 +1,57 @@
+{
+  "dimensions": [
+    "month",
+    "value"
+  ],
+  "source": [
+    {
+      "month": "1月",
+      "value": 25
+    },
+    {
+      "month": "2月",
+      "value": 34
+    },
+    {
+      "month": "3月",
+      "value": 50
+    },
+    {
+      "month": "4月",
+      "value": 68
+    },
+    {
+      "month": "5月",
+      "value": 55
+    },
+    {
+      "month": "6月",
+      "value": 45
+    },
+    {
+      "month": "7月",
+      "value": 95
+    },
+    {
+      "month": "8月",
+      "value": 40
+    },
+    {
+      "month": "9月",
+      "value": 52
+    },
+    {
+      "month": "10月",
+      "value": 80
+    },
+    {
+      "month": "11月",
+      "value": 60
+    },
+    {
+      "month": "12月",
+      "value": 75
+    }
+  ],
+  "unit": "万kwh"
+}

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const GasSystemConfig: ConfigType = {
+  key: 'GasSystem',
+  chartKey: 'VGasSystem',
+  conKey: 'VCGasSystem',
+  title: '燃气系统',
+  category: ChatCategoryEnum.IntegratedEnergy,
+  categoryName: ChatCategoryEnumName.IntegratedEnergy,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'GasSystem.png'
+}

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

@@ -0,0 +1,93 @@
+<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'
+import dataJson from './data.json'
+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 option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+const updataUnit = () => {
+  option.value.title.text = '单位：' + option.value.unit;
+
+}
+
+
+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>