Merge branch 'master' of http://119.45.132.149:3000/security/go-view-fetch

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

@@ -1,39 +1,52 @@
 import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
-import { LineGradientsConfig } from './index'
+import { CarbonEmissionConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { graphic } from 'echarts/core'
 import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
+import { fontStyle } from 'html2canvas/dist/types/css/property-descriptors/font-style'
 
-export const includes = [ 'xAxis', 'yAxis', 'grid']
+export const includes = ['xAxis', 'yAxis']
 
 const option = {
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    top: '15%',
+    containLabel: true
+  },
   legend: {
     show: true,
-    top:'20',
+    top: '20',
-    right:'50',
+    right: '50',
-    itemStyle:{
+    itemStyle: {
       borderType: 'dotted'
     },
     lineStyle: {
-      type:'dashed',
+      type: 'dashed',
-      cap:'round',
+      cap: 'round',
-      opacity:0.9,
+      opacity: 0.9,
     },
     // icon: 'rect',
-    data:[{
+    data: [{
       name: '电',
       // 强制设置图形为圆。
       icon: 'rect',
-      itemStyle:{
+      itemStyle: {
         color: 'rgba(12, 109, 196,1)'
+      }, textStyle: {
+        color: '#eee'
       },
-    },{
+    }, {
       name: '燃气',
+      textStyle: {
+        color: '#eee'
+      },
       // 强制设置图形为圆。
       icon: 'rect',
-      itemStyle:{
+      itemStyle: {
         color: 'rgba(48, 189, 104,1)'
       },
     }],
@@ -53,21 +66,22 @@ const option = {
     show: true,
     type: 'value',
     name: '单位：万/kwh',
-    nameGap:30,
+    nameGap: 30,
-    axisLine:{
+    axisLine: {
       show: false
     },
-    splitLine:{
+    splitLine: {
       show: true,
-      lineStyle:{
+      lineStyle: {
         type: 'dashed',
-        opacity:0.5
+        opacity: 0.5
       }
     }
   },
   dataset: { ...dataJson },
   series: [
     {
+
       type: 'line',
       smooth: true,
       symbolSize: 0, //设定实心点的大小
@@ -131,8 +145,8 @@ const option = {
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key: string = LineGradientsConfig.key
+  public key: string = CarbonEmissionConfig.key
-  public chartConfig = cloneDeep(LineGradientsConfig)
+  public chartConfig = cloneDeep(CarbonEmissionConfig)
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
 }

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

@@ -0,0 +1,63 @@
+<template>
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" name="单折线面积图" :expanded="true">
+    <SettingItemBox name="线条">
+      <SettingItem name="宽度">
+        <n-input-number v-model:value="item.lineStyle.width" :min="1" size="small" placeholder="自动计算"></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="实心点">
+      <SettingItem name="大小">
+        <n-input-number v-model:value="item.symbolSize" :min="1" :max="100" size="small"
+          placeholder="自动计算"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <Setting-item-box name="标签">
+      <Setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </Setting-item>
+      <Setting-item name="大小">
+        <n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
+      </Setting-item>
+      <Setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
+      </Setting-item>
+      <Setting-item name="位置">
+        <n-select v-model:value="item.label.position" :options="[
+          { label: 'top', value: 'top' },
+          { label: 'left', value: 'left' },
+          { label: 'right', value: 'right' },
+          { label: 'bottom', value: 'bottom' },
+        ]" />
+      </Setting-item>
+    </Setting-item-box>
+  </CollapseItem>
+</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
+  },
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

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

@@ -1,14 +1,14 @@
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
-export const LineGradientsConfig: ConfigType = {
+export const CarbonEmissionConfig: ConfigType = {
-  key: 'LineGradients',
+  key: 'CarbonEmission',
-  chartKey: 'VLineGradients',
+  chartKey: 'VCarbonEmission',
-  conKey: 'VCLineGradients',
+  conKey: 'VCCarbonEmission',
   title: '碳排放',
   category: ChatCategoryEnum.IntegratedEnergy,
   categoryName: ChatCategoryEnumName.IntegratedEnergy,
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.ECHARTS,
-  image: 'line_gradient.png'
+  image: 'carbon_emission.png'
 }

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/cost.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/gasSupply.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/mainsElectricity.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/waterSupply.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>

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

@@ -5,7 +5,10 @@ import cloneDeep from 'lodash/cloneDeep'
 import { chartInitConfig } from '@/settings/designSetting'
 
 //导入数据
-import costIcon from './assets/cost.svg'
+import costIcon from './assets/cost.png'
+import gasIcon from './assets/gasSupply.png'
+import EleIcon from './assets/mainsElectricity.png'
+import watIcon from './assets/waterSupply.png'
 import dataJson from './data.json'
 const otherOption = {
   sceneCode: '',
@@ -19,21 +22,21 @@ const otherOption = {
       valueClass: 'value-cost'
     },
     {
-      icon: costIcon,
+      icon: EleIcon,
       label: '市电',
       field: 'mainsElectricity',
       unit: '单位',
       valueClass: 'value-electricity'
     },
     {
-      icon: costIcon,
+      icon: watIcon,
       label: '供水',
       field: 'waterSupply',
       unit: '单位',
       valueClass: 'value-water'
     },
     {
-      icon: costIcon,
+      icon: gasIcon,
       label: '燃气',
       field: 'gasSupply',
       unit: '单位',
@@ -50,5 +53,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public key = EnergyOverviewConfig.key
   public chartConfig = cloneDeep(EnergyOverviewConfig)
   public option = cloneDeep(option)
-  public attr = { ...chartInitConfig, x: 0, y: 0, w: 889, h: 267, zIndex: 1 }
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 900, h: 310, zIndex: 1 }
 }

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

@@ -1,7 +1,7 @@
 <template>
   <div class="go-energy-box">
     <div class="grid-container">
-      <div v-for="(item, index) in configOption.gridItems" :key="index" class="grid-item">
+      <div v-for="(item, index) in chartConfig.option.gridItems" :key="index" class="grid-item">
         <span class="item">
           <img class="icon" :src="item.icon" :alt="item.label">
         </span>
@@ -20,11 +20,11 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, shallowReactive, watch } from 'vue'
+import { PropType, reactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { option as configOption } from './config'
+// import { option as configOption } from './config'
 
 const props = defineProps({
   chartConfig: {
@@ -33,8 +33,8 @@ const props = defineProps({
   }
 })
 
-const option = shallowReactive({
+const option = reactive({
-  dataset: configOption.dataset
+  dataset: props.chartConfig.option.dataset
 })
 
 
@@ -70,6 +70,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-gap: 10px;
+    padding: 0 10px;
 
     .grid-item {
       // background-color: #043951;
@@ -83,7 +84,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
       .item-container {
         display: flex;
         flex-direction: column;
-        margin-left: 20px;
+        margin-left: 5px;
         margin-right: 20px;
         width: 100%;
         height: auto;
@@ -96,9 +97,12 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
           overflow: hidden;
           width: 100%;
           height: 100%;
+          margin-bottom: 5px;
 
           .value {
-            font-size: 35px;
+            //使用庞门正道标题体
+
+            font-size: 30px;
             letter-spacing: 3px;
             // flex-grow: 1;
             // flex-shrink: 0;
@@ -122,11 +126,12 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 
         .label {
           color: #07A1C8;
-          font-size: 22px;
+          font-size: 20px;
           align-self: flex-start;
-
+          // 使用思源黑体
+          font-family: 'Source Han Sans CN';
           // 使用渐变背景色
-          background: linear-gradient(to right, rgba(255, 255, 255, 0.624) 0%, rgba(255, 255, 255, 1) 100%);
+          background: linear-gradient(to right, rgba(255, 255, 255, 0.796) 0%, rgba(255, 255, 255, 1) 100%);
           -webkit-background-clip: text;
           background-clip: text;
           -webkit-text-fill-color: transparent;
@@ -161,8 +166,9 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 
 
       .icon {
-        width: 60px;
+        // background-color: #07A1C8;
-        height: 60px;
+        width: 100px;
+        height: 100px;
         flex-shrink: 0;
         object-fit: contain;
       }

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

@@ -1,95 +0,0 @@
-<template>
-  <!-- Echarts 全局设置 -->
-  <global-setting :optionData="optionData"></global-setting>
-  <CollapseItem
-    v-for="(item, index) in seriesList"
-    :key="index"
-    name="单折线面积图"
-    :expanded="true"
-  >
-    <SettingItemBox name="线条">
-      <SettingItem name="宽度">
-        <n-input-number
-          v-model:value="item.lineStyle.width"
-          :min="1"
-          size="small"
-          placeholder="自动计算"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="类型">
-        <n-select
-          v-model:value="item.lineStyle.type"
-          size="small"
-          :options="lineConf.lineStyle.type"
-        ></n-select>
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="实心点">
-      <SettingItem name="大小">
-        <n-input-number
-          v-model:value="item.symbolSize"
-          :min="1"
-          :max="100"
-          size="small"
-          placeholder="自动计算"
-        ></n-input-number>
-      </SettingItem>
-    </SettingItemBox>
-    <setting-item-box name="标签">
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="item.label.show" size="small" />
-          <n-text>展示标签</n-text>
-        </n-space>
-      </setting-item>
-      <setting-item name="大小">
-        <n-input-number
-          v-model:value="item.label.fontSize"
-          size="small"
-          :min="1"
-        ></n-input-number>
-      </setting-item>
-      <setting-item name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.label.color"
-        ></n-color-picker>
-      </setting-item>
-      <setting-item name="位置">
-        <n-select
-          v-model:value="item.label.position"
-          :options="[
-            { label: 'top', value: 'top' },
-            { label: 'left', value: 'left' },
-            { label: 'right', value: 'right' },
-            { label: 'bottom', value: 'bottom' },
-          ]"
-        />
-      </setting-item>
-    </setting-item-box>
-  </CollapseItem>
-</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
-  },
-})
-
-const seriesList = computed(() => {
-  return props.optionData.series
-})
-</script>

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

@@ -0,0 +1,27 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public';
+import { PowerConsumptionRankingSystemConfig } from './index';
+import { CreateComponentType } from '@/packages/index.d';
+import cloneDeep from 'lodash/cloneDeep';
+import { chartInitConfig } from '@/settings/designSetting';
+import dataJson from './data.json'
+
+export const option = {
+  // 进行时效果
+  processing: true,
+  // 渐变颜色
+  color: '#23ffe2',
+  color2: '#0f86eb',
+  // 轨道颜色
+  railColor: '#09222e',
+  railBorderColor: '#0d5f68',
+  borderRadius: 50,
+  railWidth: 60,
+  dataset: dataJson
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = PowerConsumptionRankingSystemConfig.key
+  public attr = { ...chartInitConfig, w: 450, h: 320, zIndex: 1 }
+  public chartConfig = cloneDeep(PowerConsumptionRankingSystemConfig)
+  public option = cloneDeep(option)
+}

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

@@ -0,0 +1,42 @@
+<template>
+  <!-- 默认展开 -->
+  <CollapseItem name="柱状图横向排行" :expanded="true">
+    <SettingItemBox name="柱状图">
+      <!-- 颜色粗细等等... -->
+      <SettingItem name="进度条渐变颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="进度条渐变颜色2">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color2"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="轨道颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.railColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="轨道长度">
+        <n-input-number v-model:value="optionData.railWidth" size="small"></n-input-number>
+      </SettingItem>
+      <SettingItem name="圆角">
+        <n-input-number v-model:value="optionData.borderRadius" size="small"></n-input-number>
+      </SettingItem>
+      <SettingItem name="轨道边框颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.railBorderColor"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+// 以下是封装的设置模块布局组件，具体效果可在官网查看
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+// 获取 option 的数据，便于使用 typeof 获取类型
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

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

@@ -0,0 +1,33 @@
+[
+  {
+    "name": "产线名称1",
+    "value": 40000,
+    "percentage": 60,
+    "unit":"/kwh"
+  },
+  {
+    "name": "产线名称2",
+    "value": 34000,
+    "percentage": 40,
+    "unit":"/kwh"
+
+  },
+  {
+    "name": "产线名称3",
+    "value": 30000,
+    "percentage": 60,
+    "unit":"/kwh"
+  },
+  {
+    "name": "产线名称4",
+    "value": 28000,
+    "percentage": 50,
+    "unit":"/kwh"
+  },
+  {
+    "name": "产线名称5",
+    "value": 25000,
+    "percentage": 60,
+    "unit":"/kwh"
+  }
+]

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

@@ -0,0 +1,22 @@
+// 公共类型声明
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+// 当前[信息模块]分类声明
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const PowerConsumptionRankingSystemConfig: ConfigType = {
+  // 唯一key
+  key: 'PowerConsumptionRankingSystem',
+  // 图表组件渲染 Components 格式: V + key
+  chartKey: 'VPowerConsumptionRankingSystem',
+  // 配置组件渲染 Components 格式: VC + key
+  conKey: 'VCPowerConsumptionRankingSystem',
+  // 名称
+  title: '用电量排行',
+  // 子分类目录
+  category: ChatCategoryEnum.IntegratedEnergy,
+  categoryName: ChatCategoryEnumName.IntegratedEnergy,
+  // 包分类
+  package: PackagesCategoryEnum.CHARTS,
+  // 图片
+  image: 'PowerConsumptionRankingSystem.png'
+}

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

@@ -0,0 +1,245 @@
+<template>
+  <div class="flex_column wrapper">
+    <!-- 顶部标题栏 -->
+    <!-- <div class="title-bar">
+      <div class="title">用电量排名</div>
+      <div class="tabs">
+        <div class="tab active">市电</div>
+        <div class="tab">供水</div>
+        <div class="tab">燃气</div>
+      </div>
+      </div> -->
+
+    <div v-for="(item, index) in dataset" :key="index" class="flex_v chart_item">
+      <!-- 包裹每行的内容（序号、名称、进度条、数值） -->
+      <div class="row-content row-bg-container">
+        <div class="left-group ">
+          <div v-if="index == 0" class="squareIcon squareIcon1 flex_c ">{{ index + 1 }}</div>
+          <div v-else-if="index == 1" class="squareIcon squareIcon1 flex_c">{{ index + 1 }}</div>
+          <div v-else-if="index == 2" class="squareIcon squareIcon1 flex_c">{{ index + 1 }}</div>
+          <div v-else class="squareIcon squareIcon2 flex_c">{{ index + 1 }}</div>
+          <div class="name" :title="item.name">{{ item.name }}</div>
+        </div>
+        <div class="right-group">
+          <div class="bar_wrapper">
+            <div class="bar_body" :style="{
+              width: item.percentage + '%',
+              height: '12px', borderRadius: borderRadius + 'px'
+            }">
+            </div>
+          </div>
+          <div class="value">{{ item.value }}{{ item.unit }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, watch, shallowReactive, onMounted } from 'vue'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import config, { option as configOption } from './config'
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+// 取配置数据
+const { w, h } = toRefs(props.chartConfig.attr)
+const { color, color2, railColor, railBorderColor, borderRadius, railWidth, dataset } = toRefs(
+  props.chartConfig.option
+)
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    try {
+      dataset.value = newData
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: Array<{ name: string; value: number, percentage: number, unit: string }>) => {
+  dataset.value = newData
+})
+</script>
+
+<style scoped lang="scss">
+.flex_v {
+  display: flex;
+  align-items: center;
+}
+
+.flex_column {
+  // background-color: antiquewhite;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.flex_c {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// .wrapper {
+//   width: 450px;
+//   height: 320px;
+//   background: url('./images/背景框_03.png') no-repeat center center; 
+//   background-size: cover;
+//   padding: 10px;
+//   box-sizing: border-box;
+// }
+
+// .title-bar {
+//   display: flex;
+//   justify-content: space-between;
+//   align-items: center;
+//   margin-bottom: 10px;
+//   color: #fff;
+// }
+
+// .title {
+//   font-size: 16px;
+//   font-weight: bold;
+//   margin-left: 30px;
+//   width: 100px;
+//   white-space: nowrap;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+//   font-family: "思源黑体", sans-serif; 
+//   letter-spacing: 2px; 
+//   padding-bottom: 2px;
+
+// }
+
+// .tabs {
+//   display: flex;
+// }
+
+// .tab {
+//   padding-right: 6px;
+//   margin-left: 6px;
+//   cursor: pointer;
+//   font-size: 16px;
+//   white-space: nowrap;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+//   font-family: "思源黑体";
+//   color: #2A99FF;
+// }
+
+// .tab.active {
+//   // background-color: #007bff;
+// }
+
+// .name {
+//   width: 100px;
+//   white-space: nowrap;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+//   padding: 8px;
+//   color: #fff;
+// }
+
+.value {
+  margin: 0 0 0 10px;
+  color: #fff;
+}
+
+.bar_wrapper {
+  width: v-bind('railWidth + "px"');
+  height: 12px;
+  border: 1px solid v-bind('railBorderColor');
+  border-radius: v-bind('borderRadius + "px"');
+  background-color: v-bind('railColor');
+  position: relative;
+  z-index: 0;
+}
+
+.bar_body {
+  background: linear-gradient(to right, v-bind('color'), v-bind('color2'));
+}
+
+.progressClass {
+  position: absolute;
+  z-index: 1;
+}
+
+.squareIcon {
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  color: white;
+  font-weight: bold;
+}
+
+.squareIcon1 {
+  background: url('./images/排行底1_03.png') no-repeat center center;
+  background-size: cover;
+  box-sizing: border-box;
+}
+
+.squareIcon2 {
+  background: url('./images/排行底2_03.png') no-repeat center center;
+  background-size: cover;
+  box-sizing: border-box;
+}
+
+.chart_item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-top: 10px;
+  font-size: 12px;
+  position: relative;
+  padding-left: 30px;
+  padding-right: 20px;
+}
+
+.row-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 40px;
+  width: 100%;
+}
+
+.left-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 180px;
+  // 调整左侧外边距，进一步微调位置
+  margin-left: 10px;
+}
+
+.right-group {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-left: auto;
+}
+
+.row-bg-container {
+  width: 100%;
+  background: url('./images/左3条_03.png') no-repeat center center;
+  background-size: cover;
+  // 增加左侧内边距，使背景更靠左边
+  padding: 12px 0 30px 20px;
+  height: 35px;
+  box-sizing: border-box; // 确保内边距和边框包含在宽度内
+}
+</style>

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

@@ -6,12 +6,12 @@ import { WaterSupplySystemConfig } from "./WaterSupplySystem"
 import { AirSupplySystemConfig } from './AirSupplySystem'
 import { PowerSupplySystemConfig } from './PowerSupplySystem'
 import { GasSystemConfig } from './GasSystem'
-import { LineGradientsConfig } from './LineGradients'
 import { ConstructionIndexConfig } from './ConstructionIndex'   
+import { CarbonEmissionConfig } from './CarbonEmission'
 export default [
-    EnergyOverviewConfig, EnergyConsumptionTrendConfig,
+  EnergyOverviewConfig, EnergyConsumptionTrendConfig,
-    ConsumptionProportionConfig,
+  ConsumptionProportionConfig,
-    FeeOverviewConfig,
+  FeeOverviewConfig,
-    WaterSupplySystemConfig, AirSupplySystemConfig, PowerSupplySystemConfig,
+  WaterSupplySystemConfig, AirSupplySystemConfig, PowerSupplySystemConfig,
-    GasSystemConfig, LineGradientsConfig, ConstructionIndexConfig
+  GasSystemConfig,CarbonEmissionConfig,ConstructionIndexConfig
 ]