feat 【能源场景】：增加时间组件 完善其余组件样式 添加边框

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) => {

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);
 }

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>

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 }
+}

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>

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'
+}

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>

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

@@ -8,10 +8,12 @@ import { PowerSupplySystemConfig } from './PowerSupplySystem'
 import { GasSystemConfig } from './GasSystem'
 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
 ]