From 6666928c80cb589aece7527f558af95db9be6035 Mon Sep 17 00:00:00 2001
From: Free-sss <630042479@qq.com>
Date: Fri, 5 Sep 2025 16:10:26 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E3=80=90=E8=83=BD=E6=BA=90=E5=9C=BA?=
 =?UTF-8?q?=E6=99=AF=E3=80=91=EF=BC=9A=E5=A2=9E=E5=8A=A0=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=20=E5=AE=8C=E5=96=84=E5=85=B6=E4=BD=99?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=BE=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EnergyConsumptionTrend/index.vue          |   6 +-
 .../PowerConsumptionRankingSystem/config.ts   |  36 ++++--
 .../PowerConsumptionRankingSystem/index.vue   | 118 ++++++------------
 .../TimeSelect/assets/timeBackground.png      | Bin 0 -> 6290 bytes
 .../IntegratedEnergy/TimeSelect/config.ts     |  20 +++
 .../IntegratedEnergy/TimeSelect/config.vue    |  18 +++
 .../IntegratedEnergy/TimeSelect/index.ts      |  14 +++
 .../IntegratedEnergy/TimeSelect/index.vue     |  62 +++++++++
 .../Charts/IntegratedEnergy/index.ts          |   6 +-
 9 files changed, 181 insertions(+), 99 deletions(-)
 create mode 100644 src/packages/components/Charts/IntegratedEnergy/TimeSelect/assets/timeBackground.png
 create mode 100644 src/packages/components/Charts/IntegratedEnergy/TimeSelect/config.ts
 create mode 100644 src/packages/components/Charts/IntegratedEnergy/TimeSelect/config.vue
 create mode 100644 src/packages/components/Charts/IntegratedEnergy/TimeSelect/index.ts
 create mode 100644 src/packages/components/Charts/IntegratedEnergy/TimeSelect/index.vue

diff --git a/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/index.vue b/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/index.vue
index 8000eda..e49097e 100644
--- a/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/index.vue
+++ b/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/index.vue
@@ -1,6 +1,6 @@
 <template>
   <Background :title-text="titleText" :select-option-mode="selectOptionMode" :select-options="selectOptions"
-    :in-select-options="inSelectOptions" @mode1-2-select="handleHeaderSelectChange">
+     @mode1-2-select="handleHeaderSelectChange">
     <div class="go-energy-box">
       <div class="content">
         <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
@@ -70,9 +70,7 @@ const selectOptionMode = computed(() => {
 const selectOptions = computed(() => {
   return props.chartConfig.option.selectOptions;
 });
-const inSelectOptions = computed(() => {
-  return props.chartConfig.option.inSelectOptions;
-});
+
 watch(
   () => props.chartConfig.option.dataset,
   (newData: any) => {
diff --git a/src/packages/components/Charts/IntegratedEnergy/PowerConsumptionRankingSystem/config.ts b/src/packages/components/Charts/IntegratedEnergy/PowerConsumptionRankingSystem/config.ts
index dac61b7..a558fe8 100644
--- a/src/packages/components/Charts/IntegratedEnergy/PowerConsumptionRankingSystem/config.ts
+++ b/src/packages/components/Charts/IntegratedEnergy/PowerConsumptionRankingSystem/config.ts
@@ -3,25 +3,37 @@ 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'
+import dataJson from './data.json';
+
+// 下拉菜单配置：mode 为 2 表示“下拉菜单”，options 是下拉选项列表
+const dropdownConfig = {
+  selectOptionMode: 1,
+  selectOptions: {
+    selectedValue: 'electricity', // 默认选中的选项值
+    dataset: [
+      { label: '市电', value: 'electricity' },
+      { label: '供水', value: 'water' },
+      { label: '燃气', value: 'gas' }
+    ]
+  }
+};
 
 export const option = {
-  // 进行时效果
+  titleText: '用电量排名',
+  ...dropdownConfig, // 合并下拉配置到 option 中
   processing: true,
-  // 渐变颜色
-  color: '#23ffe2',
-  color2: '#0f86eb',
-  // 轨道颜色
-  railColor: '#09222e',
+  color: '#39ffdc',
+  color2: '#39fedb',
+  railColor: '#00000000',
   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)
+  public key = PowerConsumptionRankingSystemConfig.key;
+  public attr = { ...chartInitConfig, w: 450, h: 320, zIndex: -1 };
+  public chartConfig = cloneDeep(PowerConsumptionRankingSystemConfig);
+  public option = cloneDeep(option);
 }
\ No newline at end of file
diff --git a/src/packages/components/Charts/IntegratedEnergy/PowerConsumptionRankingSystem/index.vue b/src/packages/components/Charts/IntegratedEnergy/PowerConsumptionRankingSystem/index.vue
index 1fb721b..a2b6b16 100644
--- a/src/packages/components/Charts/IntegratedEnergy/PowerConsumptionRankingSystem/index.vue
+++ b/src/packages/components/Charts/IntegratedEnergy/PowerConsumptionRankingSystem/index.vue
@@ -9,37 +9,45 @@
         <div class="tab">燃气</div>
       </div>
       </div> -->
+    <Background :title-text="chartConfig.option.titleText" :select-option-mode="chartConfig.option.selectOptionMode"
+      :select-options="chartConfig.option.selectOptions" @mode1-2-select="handleDropdownSelect">
+      <div class="container">
 
-    <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 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 class="value">{{ item.value }}{{ item.unit }}</div>
         </div>
       </div>
-    </div>
+
+    </Background>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, watch, shallowReactive, onMounted } from 'vue'
+import { PropType, toRefs, watch, onMounted } from 'vue'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import config, { option as configOption } from './config'
+import Background from '../Background/index.vue'
+
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<config>,
@@ -52,6 +60,10 @@ const { w, h } = toRefs(props.chartConfig.attr)
 const { color, color2, railColor, railBorderColor, borderRadius, railWidth, dataset } = toRefs(
   props.chartConfig.option
 )
+const handleDropdownSelect = (value: string) => {
+  console.log('下拉选中值：', value);
+};
+
 
 // 手动更新
 watch(
@@ -80,9 +92,6 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: Array<{ name:
 }
 
 .flex_column {
-  // background-color: antiquewhite;
-  width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: column;
 }
@@ -93,65 +102,6 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: Array<{ name:
   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;
@@ -170,6 +120,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: Array<{ name:
 
 .bar_body {
   background: linear-gradient(to right, v-bind('color'), v-bind('color2'));
+  box-shadow: 0 0 10px 5px rgba(#39ffdc, 0.5);
 }
 
 .progressClass {
@@ -223,6 +174,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: Array<{ name:
   width: 180px;
   // 调整左侧外边距，进一步微调位置
   margin-left: 10px;
+  color: #fff;
 }
 
 .right-group {
@@ -242,4 +194,8 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: Array<{ name:
   height: 35px;
   box-sizing: border-box; // 确保内边距和边框包含在宽度内
 }
+
+.container {
+  // padding: 30px;
+}
 </style>
\ No newline at end of file
diff --git a/src/packages/components/Charts/IntegratedEnergy/TimeSelect/assets/timeBackground.png b/src/packages/components/Charts/IntegratedEnergy/TimeSelect/assets/timeBackground.png
new file mode 100644
index 0000000000000000000000000000000000000000..e46f6536f8ca71e79c444577d19e3d6fac15ceda
GIT binary patch
literal 6290
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

literal 0
HcmV?d00001

diff --git a/src/packages/components/Charts/IntegratedEnergy/TimeSelect/config.ts b/src/packages/components/Charts/IntegratedEnergy/TimeSelect/config.ts
new file mode 100644
index 0000000..9cbe36a
--- /dev/null
+++ b/src/packages/components/Charts/IntegratedEnergy/TimeSelect/config.ts
@@ -0,0 +1,20 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { TimeSelectConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+
+const otherOption = {
+
+}
+export const option = {
+  ...otherOption,
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TimeSelectConfig.key
+  public chartConfig = cloneDeep(TimeSelectConfig)
+  public option = cloneDeep(option)
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 310, h: 58, zIndex: 10 }
+}
diff --git a/src/packages/components/Charts/IntegratedEnergy/TimeSelect/config.vue b/src/packages/components/Charts/IntegratedEnergy/TimeSelect/config.vue
new file mode 100644
index 0000000..75616b3
--- /dev/null
+++ b/src/packages/components/Charts/IntegratedEnergy/TimeSelect/config.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    你好
+  </div>
+</template>
+
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>
diff --git a/src/packages/components/Charts/IntegratedEnergy/TimeSelect/index.ts b/src/packages/components/Charts/IntegratedEnergy/TimeSelect/index.ts
new file mode 100644
index 0000000..c876b64
--- /dev/null
+++ b/src/packages/components/Charts/IntegratedEnergy/TimeSelect/index.ts
@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const TimeSelectConfig: ConfigType = {
+  key: 'TimeSelect',
+  chartKey: 'VTimeSelect',
+  conKey: 'VCTimeSelect',
+  title: '时间选择器',
+  category: ChatCategoryEnum.IntegratedEnergy,
+  categoryName: ChatCategoryEnumName.IntegratedEnergy,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'TimeSelect.png'
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/IntegratedEnergy/TimeSelect/index.vue b/src/packages/components/Charts/IntegratedEnergy/TimeSelect/index.vue
new file mode 100644
index 0000000..8a28e15
--- /dev/null
+++ b/src/packages/components/Charts/IntegratedEnergy/TimeSelect/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="go-engry-timeBack">
+
+    <div class="content" :style="{ backgroundImage: 'url(' + timeBackground + ')' }">
+
+      <span class="day item">日</span>
+      <span class="month item">月</span>
+      <span class="year active item">年</span>
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import timeBackground from './assets/timeBackground.png'
+
+</script>
+
+<style lang="scss" scoped>
+.go-engry-timeBack {
+
+  .content {
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    display: flex;
+    padding-left: 14px;
+
+    span {
+      // background-color: antiquewhite;
+      flex: 1;
+      margin-left: 10px;
+    }
+
+    .item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #b9b9b9;
+      font-size: 21px;
+      box-sizing: content-box;
+
+      // background-color: antiquewhite;
+      &.active {
+        color: #fff;
+      }
+    }
+
+    .day {
+      margin-left: 20px;
+    }
+
+    .month {
+      margin-left: 15px;
+    }
+
+    .year {
+      flex: 2;
+      margin-right: 40px;
+    }
+  }
+}
+</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 7c7429d..a75c405 100644
--- a/src/packages/components/Charts/IntegratedEnergy/index.ts
+++ b/src/packages/components/Charts/IntegratedEnergy/index.ts
@@ -6,12 +6,14 @@ import { WaterSupplySystemConfig } from "./WaterSupplySystem"
 import { AirSupplySystemConfig } from './AirSupplySystem'
 import { PowerSupplySystemConfig } from './PowerSupplySystem'
 import { GasSystemConfig } from './GasSystem'
-import { ConstructionIndexConfig } from './ConstructionIndex'   
+import { ConstructionIndexConfig } from './ConstructionIndex'
 import { CarbonEmissionConfig } from './CarbonEmission'
+import { PowerConsumptionRankingSystemConfig } from "./PowerConsumptionRankingSystem"
+import { TimeSelectConfig } from './TimeSelect'
 export default [
   EnergyOverviewConfig, EnergyConsumptionTrendConfig,
   ConsumptionProportionConfig,
   FeeOverviewConfig,
   WaterSupplySystemConfig, AirSupplySystemConfig, PowerSupplySystemConfig,
-  GasSystemConfig,CarbonEmissionConfig,ConstructionIndexConfig
+  GasSystemConfig, CarbonEmissionConfig, ConstructionIndexConfig, PowerConsumptionRankingSystemConfig, TimeSelectConfig
 ]