feat(IntegratedEnergy): 新增开工指数组件及相关资源文件

添加开工指数组件，包括配置、数据和视图文件
添加相关图片资源用于组件展示
在IntegratedEnergy模块中注册新组件

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

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { ConstructionIndexConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+//导入数据
+import dataJson from './data.json'
+
+export const option = {
+  dataset: dataJson.source
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ConstructionIndexConfig.key
+  public chartConfig = cloneDeep(ConstructionIndexConfig)
+  public option = cloneDeep(option)
+}

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

@@ -0,0 +1,27 @@
+{
+  "source": {
+    "constructionIndex": 10,
+    "productionLine": [
+      {
+        "name": "生产线1",
+        "value": 136
+      },
+      {
+        "name": "生产线2",
+        "value": 98
+      },    
+      {
+        "name": "生产线3",
+        "value": 96
+      },
+      {
+        "name": "生产线4",
+        "value": 68
+      },
+      {
+        "name": "生产线5",
+        "value": 64
+      }
+    ]
+  }
+}

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const ConstructionIndexConfig: ConfigType = {
+  key: 'ConstructionIndex',
+  chartKey: 'VConstructionIndex',
+  conKey: 'VCConstructionIndex',
+  title: '开工指数',
+  category: ChatCategoryEnum.IntegratedEnergy,
+  categoryName: ChatCategoryEnumName.IntegratedEnergy,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'EnergyOverview.png'
+}

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

@@ -0,0 +1,168 @@
+<template>
+  <div class="contruction-index">
+ <div class="contruction-index-title">
+    <img class="contruction-index-title_tag" src="./assets/tag.png" alt="">
+    <div class="contruction-index-title_title">
+      <div>开工指数</div>
+      <div>{{ option.dataset.constructionIndex }}</div>
+    </div>
+  </div>
+  <div class="contruction-index-list">
+    <div v-for="(item, index) in option.dataset.productionLine" :key="index" class="contruction-index-list_item">
+      <img class="item_bg" :src="`./assets/rank${index}.png`" alt="">
+      <div class="item_content">
+        <div class="item_progress-bar">
+          <div class="progress-bar-text">{{ item.name }}</div>
+          <div class="progress-bar">
+          <div class="progress" :style="{
+            width: calculateWidth(item.value),
+            }"></div>
+          </div>
+        </div>
+        
+        <div>
+          {{ item.value }}
+        </div>
+      </div>
+    </div>
+  </div>
+  </div>
+ 
+</template>
+
+<script lang="ts" setup>
+import { PropType, computed } from 'vue'
+import { option as configOption } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<{ option: typeof configOption }>,
+    required: true
+  }
+})
+
+const option = computed(() => props.chartConfig.option)
+
+// 修改：基于API数据计算进度条宽度
+const calculateWidth = (value: number) => {
+  const data = option.value.dataset.productionLine
+  if (data.length === 0 || data[0].value === 0) {
+    return '0%'
+  }
+  const firstRowValue = data[0].value
+  return `${(value / firstRowValue) * 100}%` // 当前行的value/第一行的value值
+}
+</script>
+
+<style lang="scss" scoped>
+.contruction-index{
+  width: 100%;
+  height: 100%;
+  // background-color: rgb(33, 35, 35);
+}
+
+.contruction-index-title {
+  display: flex;
+  align-items: center;
+  height: 60px;
+  justify-content: space-between;
+  width:90%;
+  margin: 0 auto;
+
+  .contruction-index-title_tag {
+    height: 100%;
+    width:60px;
+  }
+
+  .contruction-index-title_title {
+    background: url('./assets/title_bg.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    color: #fff;
+    flex:1;
+    margin-left:20px;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 12%;
+    font-size: 20px;
+    box-sizing: border-box;
+    font-weight: bold;
+  }
+}
+
+.contruction-index-list {
+  width:90%;
+  margin: 0 auto;
+  .contruction-index-list_item {
+    height: 30px;
+    margin: 15px 0px;
+    display: flex;
+    font-size: 12px;
+    color: #fff;
+    position: relative;
+    .item_bg{
+      position: absolute;
+      left:0;
+      top:0;
+      width: 100%;
+      height: 100%;
+    }
+    .item_content{
+      position: absolute;
+      left:0;
+      top:-5px;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      z-index: 10;
+      padding-left:23%;
+      box-sizing: border-box;
+      align-items: center;
+      .item_progress-bar{
+        flex:1;
+        margin-right: 10px;
+        position: relative;
+      }
+    }
+  }
+}
+
+.progress-bar {
+  position: relative;
+  width: 100%;
+  height: 14px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.progress-bar-text {
+  color: #fff;
+  font-size: 12px;
+  white-space: nowrap;
+  padding-left: 14px;
+}
+
+.progress {
+  height: 100%;
+  background: linear-gradient(90deg, #00ffff 0%, #0080ff 100%);
+  border-radius: 10px;
+  transition: width 0.3s ease;
+  position: relative;
+}
+
+.progress::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, 
+    rgba(255, 255, 255, 0.3) 0%, 
+    rgba(255, 255, 255, 0.1) 50%, 
+    rgba(255, 255, 255, 0.3) 100%);
+  border-radius: 10px;
+}
+</style>

src/packages/components/Charts/IntegratedEnergy/ConsumptionProportion/test.js

@@ -1,320 +0,0 @@
-// 传入数据生成 option
-const dataList = [
-   {
-      name: '公务用车运行维护费',
-      val: 1230,//存储数据的地方
-      itemStyle: {
-         color: 'rgba(0, 81, 180, 0.5)',
-      },
-   },
-
-   {
-      name: '办公费',
-      val: 800,//存储数据的地方
-      itemStyle: {
-         color: 'rgba(255, 196, 0, 0.5)',
-      },
-   },
-   {
-      name: '差旅费',
-      val: 500,//存储数据的地方
-      itemStyle: {
-         color: 'rgba(95, 144, 110, 0.5)',
-      },
-   },
-];
-const heightProportion = 0.2 // 柱状扇形的高度比例
-
-
-// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
-function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
-
-   // 计算
-   let midRatio = (startRatio + endRatio) / 3;
-
-   let startRadian = startRatio * Math.PI * 2;
-   let endRadian = endRatio * Math.PI * 2;
-   let midRadian = midRatio * Math.PI * 2;
-
-   // 如果只有一个扇形，则不实现选中效果。
-   if (startRatio === 0 && endRatio === 1) {
-      isSelected = false;
-   }
-
-   // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-   k = typeof k !== 'undefined' ? k : 1 / 3;
-
-   // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-   let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-   let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
-
-   // 计算高亮效果的放大比例（未高亮，则比例为 1）
-   let hoverRate = isHovered ? 1.1 : 1;
-
-   // 返回曲面参数方程
-   return {
-      u: {
-         min: -Math.PI,
-         max: Math.PI * 3,
-         step: Math.PI / 32
-      },
-
-      v: {
-         min: 0,
-         max: Math.PI * 2,
-         step: Math.PI / 20
-      },
-
-      x: function (u, v) {
-         if (u < startRadian) {
-            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-         }
-         if (u > endRadian) {
-            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-         }
-         return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
-      },
-
-      y: function (u, v) {
-         if (u < startRadian) {
-            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-         }
-         if (u > endRadian) {
-            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-         }
-         return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
-      },
-
-      z: function (u, v) {
-         if (u < -Math.PI * 0.5) {
-            return Math.sin(u);
-         }
-         if (u > Math.PI * 2.5) {
-            return Math.sin(u);
-         }
-         return Math.sin(v) > 0 ? heightProportion * height : -1;
-      }
-   };
-};
-
-// 生成模拟 3D 饼图的配置项
-function getPie3D(pieData, internalDiameterRatio) {
-
-   let series = [];
-   let sumValue = 0;
-   let startValue = 0;
-   let endValue = 0;
-   let legendData = [];
-   let linesSeries = []; // line3D模拟label指示线
-   let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
-
-   // 为每一个饼图数据，生成一个 series-surface 配置
-   for (let i = 0; i < pieData.length; i++) {
-
-      sumValue += pieData[i].value;
-
-      let seriesItem = {
-         name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
-         type: 'surface',
-         parametric: true,
-         wireframe: {
-            show: false
-         },
-         pieData: pieData[i],
-         pieStatus: {
-            selected: false,
-            hovered: false,
-            k: k
-         }
-      };
-
-      if (typeof pieData[i].itemStyle != 'undefined') {
-
-         let itemStyle = {};
-
-         typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
-         typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
-
-         seriesItem.itemStyle = itemStyle;
-      }
-      series.push(seriesItem);
-   }
-
-   // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
-   // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
-   for (let i = 0; i < series.length; i++) {
-      endValue = startValue + series[i].pieData.value;
-      // console.log(series[i]);
-      series[i].pieData.startRatio = startValue / sumValue;
-      series[i].pieData.endRatio = endValue / sumValue;
-      series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio,
-         series[i].pieData.endRatio,
-         false,
-         false,
-         k,
-         series[i].pieData.value
-      );
-
-      startValue = endValue;
-
-      // 计算label指示线的起始和终点位置
-      let midRadian = (series[i].pieData.endRatio + series[i].pieData.startRatio) * Math.PI;
-      let posX = Math.cos(midRadian) * (1 + Math.cos(Math.PI / 2));
-      let posY = Math.sin(midRadian) * (1 + Math.cos(Math.PI / 2));
-      let posZ = Math.log(Math.abs(series[i].pieData.value + 1)) * 0.1;
-      let flag = ((midRadian >= 0 && midRadian <= Math.PI / 2) || (midRadian >= 3 * Math.PI / 2 && midRadian <= Math.PI * 2)) ? 1 : -1;
-      let color = pieData[i].itemStyle.color;
-      let turningPosArr = [posX * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posY * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posZ * (2)]
-      let endPosArr = [posX * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posY * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posZ * (6)]
-
-      linesSeries.push({
-         type: 'line3D',
-         lineStyle: {
-            color: color,
-         },
-         data: [[posX, posY, posZ], turningPosArr, endPosArr]
-      },
-         {
-            type: 'scatter3D',
-            label: {
-               show: true,
-               distance: 0,
-               position: 'center',
-               textStyle: {
-                  color: '#ffffff',
-                  backgroundColor: color,
-                  borderWidth: 2,
-                  fontSize: 14,
-                  padding: 10,
-                  borderRadius: 4,
-               },
-               formatter: '{b}'
-            },
-            symbolSize: 0,
-            data: [{ name: series[i].name + '\n' + series[i].pieData.val, value: endPosArr }]
-         });
-
-      legendData.push(series[i].name);
-   }
-   series = series.concat(linesSeries)
-
-   // 最底下圆盘
-   series.push({
-      name: 'mouseoutSeries',
-      type: 'surface',
-      parametric: true,
-      wireframe: {
-         show: false,
-      },
-      itemStyle: {
-         opacity: 1,
-         color: 'rgba(25, 93, 176, 1)',
-      },
-      parametricEquation: {
-         u: {
-            min: 0,
-            max: Math.PI * 2,
-            step: Math.PI / 20,
-         },
-         v: {
-            min: 0,
-            max: Math.PI,
-            step: Math.PI / 20,
-         },
-         x: function (u, v) {
-            return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
-         },
-         y: function (u, v) {
-            return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
-         },
-         z: function (u, v) {
-            return Math.cos(v) > 0 ? -0 : -1.5;
-         },
-      },
-   });
-   return series;
-}
-
-let total = 0
-dataList.forEach(item => {
-   total += item.val
-})
-const series = getPie3D(dataList.map(item => {
-   item.value = Number((item.val / total * 100).toFixed(2))
-   return item
-}), 0.8, 240, 28, 26, 1);
-
-// 准备待返回的配置项，把准备好的 legendData、series 传入。
-option = {
-   legend: {
-      tooltip: {
-         show: true,
-      },
-      data: dataList.map(item => item.name),
-      top: '5%',
-      left: '5%',
-      icon: 'circle',
-      textStyle: {
-         color: '#fff',
-         fontSize: 14,
-      },
-   },
-   animation: true,
-   title: [
-      {
-         x: 'center',
-         top: '40%',
-         text: total,
-         textStyle: {
-            color: '#fff',
-            fontSize: 42,
-            fontWeight: 'bold'
-         },
-      },
-      {
-         x: 'center',
-         top: '48%',
-         text: '还款总额',
-         textStyle: {
-            color: '#fff',
-            fontSize: 22,
-            fontWeight: 400
-         },
-      },
-   ],
-   backgroundColor: '#333',
-   labelLine: {
-      show: true,
-      lineStyle: {
-         color: '#7BC0CB',
-      },
-   },
-   label: {
-      show: false,
-   },
-   xAxis3D: {
-      min: -1.5,
-      max: 1.5,
-   },
-   yAxis3D: {
-      min: -1.5,
-      max: 1.5,
-   },
-   zAxis3D: {
-      min: -1,
-      max: 1,
-   },
-   grid3D: {
-      show: false,
-      boxHeight: 4,
-      bottom: '50%',
-      viewControl: {
-         distance: 180,
-         alpha: 25,
-         beta: 60,
-         autoRotate: true, // 自动旋转
-      },
-   },
-
-   series: series,
-};

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

@@ -7,10 +7,11 @@ import { AirSupplySystemConfig } from './AirSupplySystem'
 import { PowerSupplySystemConfig } from './PowerSupplySystem'
 import { GasSystemConfig } from './GasSystem'
 import { LineGradientsConfig } from './LineGradients'
+import { ConstructionIndexConfig } from './ConstructionIndex'
 export default [
     EnergyOverviewConfig, EnergyConsumptionTrendConfig,
     ConsumptionProportionConfig,
     FeeOverviewConfig,
     WaterSupplySystemConfig, AirSupplySystemConfig, PowerSupplySystemConfig,
-  GasSystemConfig,LineGradientsConfig
+    GasSystemConfig, LineGradientsConfig, ConstructionIndexConfig
 ]