feat【能源场景】：（用电量排行） from Liao

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>