From 1990fd11e61c04b5b9435ad0e7ad51a2d568cfc4 Mon Sep 17 00:00:00 2001
From: fks-xuxinyue <2822784518@qq.com>
Date: Mon, 5 Aug 2024 15:20:16 +0800
Subject: [PATCH] taskid:282,remark:'commit'

---
 .../src/api/carbonEmissionFactorLibrary.ts         |   4 +
 .../carbonEmissions/index.vue                      |   1 -
 .../carbonEmissionStatistics/index.vue             |   1 +
 .../carbonPlanning/all/index.vue                   | 248 +++++++++++----------
 .../carbonPlanning/category/index.vue              | 117 ++++++++--
 .../carbonEmissionManage/carbonPlanning/index.vue  |  36 +--
 6 files changed, 262 insertions(+), 145 deletions(-)

diff --git a/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts b/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
index 8358746..fe5380d 100644
--- a/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
+++ b/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
@@ -79,7 +79,11 @@ export enum uploadPic {
 // 碳规划
 export enum carbonPlanning {
   // 全部
+  whole = '/carbon-smart/api/carbon/planning/whole',
   // 详情
   searchListByYear = '/carbon-smart/api/carbon/planning/searchListByYear',
   searchListByMonth = '/carbon-smart/api/carbon/planning/searchListByMonth',
+  yearAndMonthAchievement = '/carbon-smart/api/carbon/planning/yearAndMonthAchievement',
+  annualElectricityConsumption = '/carbon-smart/api/carbon/planning/annualElectricityConsumption',
+  electricityUsageBackThen = '/carbon-smart/api/carbon/planning/electricityUsageBackThen',
 }
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/carbonEmissions/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/carbonEmissions/index.vue
index 3872240..a5b9204 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/carbonEmissions/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/carbonEmissions/index.vue
@@ -54,7 +54,6 @@
 
   // 年份选择改变触发
   const changeYearData = () => {
-    debugger
     queryParams.value.year = selectYear.value;
     getTableList();
   };
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/index.vue
index 76f48a0..94da7c9 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/index.vue
@@ -37,6 +37,7 @@
         energyConsumptionRef.value.mainRef.nsTableRef.reload();
       }
     } else if (key === '2') {
+      debugger
       if (carbonEmissionsRef.value) {
         carbonEmissionsRef.value.getTableList(); // 调用子组件的方法
       }
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue
index 73250c2..14f7fd2 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue
@@ -3,8 +3,18 @@
     <div class="ns-form-title">
       <div class="title">
         <span>查询</span>
-        <a-date-picker v-if="selectedTime" style="margin-left: 5%" :value="value5" picker="year" />
-        <a-date-picker v-else style="margin-left: 5%" :value="value5" picker="month" />
+        <a-date-picker
+          v-if="selectedTime"
+          style="margin-left: 5%"
+          valueFormat="YYYY"
+          :value="selectYear"
+          picker="year" />
+        <a-date-picker
+          v-else
+          style="margin-left: 5%"
+          valueFormat="YYYY-MM"
+          :value="selectMonth"
+          picker="month" />
       </div>
       <div class="operation">
         <div class="month" :style="monthStyles" @click="changeToMonth"><span>月</span></div>
@@ -13,11 +23,11 @@
     </div>
     <div class="contant">
       <div class="chartsPart">
-        <div class="electricityConsumption" ref="ydlChart"></div>
-        <div class="electricityConsumption" ref="ydlChart"></div>
-        <div class="electricityConsumption" ref="ydlChart"></div>
-        <div class="electricityConsumption" ref="ydlChart"></div>
-        <div class="electricityConsumption" ref="ydlChart"></div>
+        <template v-for="(item, index) in data" :key="index">
+          <div class="electricityConsumption">
+            <div :id="'ydlChart_' + index" style="height: 100%; width: 100%"></div>
+          </div>
+        </template>
       </div>
       <div class="tablePart">
         <a-table :columns="columns" :data-source="data" bordered :pagination="false"> </a-table>
@@ -27,13 +37,22 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref,defineExpose } from 'vue';
-  import type { Dayjs } from 'dayjs';
+  import { ref, defineExpose } from 'vue';
+  import dayjs, { Dayjs } from 'dayjs';
   import * as echarts from 'echarts';
+  import { http } from '/nerv-lib/util/http';
+  import { carbonPlanning } from '/@/api/carbonEmissionFactorLibrary';
   defineOptions({
     energyType: 'all', // 与页面路由name一致缓存才可生效
   });
-  const value5 = ref<Dayjs>();
+  const orgId = ref('');
+  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
+  orgId.value = result;
+  const fetch = (api, params = { orgId }) => {
+    return http.post(api, params);
+  };
+  const selectYear = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
+  const selectMonth = ref<Dayjs>();
   // 年/月切换
   const monthStyles = ref('background: #f2f2f2');
   const yearStyles = ref('background: #2778ff');
@@ -41,108 +60,126 @@
   const changeToMonth = () => {
     monthStyles.value = 'background: #2778ff';
     yearStyles.value = 'background: #f2f2f2';
+    queryParams.value.yearAndMonth = 'month';
+    queryParams.value.year = selectMonth.value;
     columns.value[2].title = '月份';
     columns.value[2].dataIndex = 'month';
     selectedTime.value = false;
+    getTableData();
   };
   const changeToYear = () => {
     monthStyles.value = 'background: #f2f2f2';
     yearStyles.value = 'background: #2778ff';
+    queryParams.value.yearAndMonth = 'year';
+    queryParams.value.year = selectYear.value;
     columns.value[2].title = '年份';
     columns.value[2].dataIndex = 'year';
     selectedTime.value = true;
+    getTableData();
   };
   // 用电量
-  const ydlChart = ref(null);
+  const ydlChart = ref({});
   let chartInstance: echarts.ECharts | null = null;
   const drawEcharts = () => {
-    chartInstance = echarts.init(ydlChart.value);
-    const handred = 100;
-    let point = 66;
-    const option = {
-      backgroundColor: 'transparent',
-      title: [
-        {
-          text: point + '%',
-          x: 'center',
-          y: '35%',
-          textStyle: {
-            fontSize: 14,
-            fontWeight: 'normal',
-            fontStyle: 'normal',
+    data.value.forEach((item, index) => {
+      const chart = echarts.init(document.getElementById(`ydlChart_${index}`)!);
+
+      const handred = 100;
+      let point = parseInt(item.budgetAchievement.replace("%", ""));
+      const option = {
+        backgroundColor: 'transparent',
+        title: [
+          {
+            text: point + '%',
+            x: 'center',
+            y: '35%',
+            textStyle: {
+              fontSize: 14,
+              fontWeight: 'normal',
+              fontStyle: 'normal',
+            },
           },
-        },
-        {
-          text: '用电量预算达成率',
-          x: 'center',
-          y: '85%',
-          textStyle: {
-            fontSize: 14,
-            fontWeight: 'normal',
-            fontStyle: 'normal',
+          {
+            text: item.budgetAchievementName,
+            x: 'center',
+            y: '85%',
+            textStyle: {
+              fontSize: 14,
+              fontWeight: 'normal',
+              fontStyle: 'normal',
+            },
           },
-        },
-      ],
-      tooltip: {
-        formatter: function (params) {
-          return params.name + '：' + params.percent + ' %';
-        },
-      },
-      series: [
-        {
-          name: 'circle',
-          type: 'pie',
-          clockWise: true,
-          radius: ['40%', '50%'],
-          center: ['50%', '40%'],
-          itemStyle: {
-            normal: {
-              label: {
-                show: false,
-              },
-              labelLine: {
-                show: false,
+        ],
+        // tooltip: {
+        //   formatter: function (params) {
+        //     return params.name + '：' + params.percent + ' %';
+        //   },
+        // },
+        series: [
+          {
+            name: 'circle',
+            type: 'pie',
+            clockWise: true,
+            radius: ['40%', '50%'],
+            center: ['50%', '40%'],
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
               },
             },
-          },
-          hoverAnimation: false,
-          data: [
-            {
-              value: point,
-              name: '占比',
-              itemStyle: {
-                normal: {
-                  color: '#4FADFD',
-                  label: {
-                    show: false,
-                  },
-                  labelLine: {
-                    show: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: point,
+                name: '占比',
+                itemStyle: {
+                  normal: {
+                    color: '#4FADFD',
+                    label: {
+                      show: false,
+                    },
+                    labelLine: {
+                      show: false,
+                    },
                   },
                 },
               },
-            },
-            {
-              name: '剩余',
-              value: handred - point,
-              itemStyle: {
-                normal: {
-                  color: '#E1E8EE',
+              {
+                name: '剩余',
+                value: handred - point,
+                itemStyle: {
+                  normal: {
+                    color: '#E1E8EE',
+                  },
                 },
               },
-            },
-          ],
-        },
-      ],
-    };
-    chartInstance = echarts.init(ydlChart.value);
-    chartInstance.setOption(option);
+            ],
+          },
+        ],
+      };
+      chart.setOption(option);
+    });
   };
 
-  defineExpose({
-    drawEcharts,
-  });
   // 表格
+  const queryParams = ref({
+    orgId: orgId.value,
+    year: selectYear.value.format('YYYY'),
+    yearAndMonth: 'year',
+  });
+  const getTableData = () => {
+    fetch(carbonPlanning.whole, queryParams.value).then((res) => {
+      data.value = res.data;
+      setTimeout(() => {
+        drawEcharts();
+      }, 500);
+    });
+  };
   const columns = ref([
     {
       title: '序号',
@@ -152,11 +189,11 @@
     },
     {
       title: '名称',
-      dataIndex: 'name',
+      dataIndex: 'itemizeName',
     },
     {
       title: '年份',
-      dataIndex: 'name',
+      dataIndex: 'year',
     },
     {
       title: '计量单位',
@@ -164,46 +201,31 @@
     },
     {
       title: '总实际用量',
-      dataIndex: 'money',
+      dataIndex: 'actualUsage',
     },
     {
       title: '总预算量',
-      dataIndex: 'address',
+      dataIndex: 'budget',
     },
     {
       title: '基准值',
-      dataIndex: 'address',
+      dataIndex: 'referenceValue',
     },
     {
       title: '节能量',
-      dataIndex: 'address',
+      dataIndex: 'energyConservation',
     },
     {
       title: '预算达成率',
-      dataIndex: 'address',
+      dataIndex: 'budgetAchievement',
     },
   ]);
 
-  const data = [
-    {
-      key: '1',
-      name: 'John Brown',
-      money: '￥300,000.00',
-      address: 'New York No. 1 Lake Park',
-    },
-    {
-      key: '2',
-      name: 'Jim Green',
-      money: '￥1,256,000.00',
-      address: 'London No. 1 Lake Park',
-    },
-    {
-      key: '3',
-      name: 'Joe Black',
-      money: '￥120,000.00',
-      address: 'Sidney No. 1 Lake Park',
-    },
-  ];
+  const data = ref([]);
+  getTableData();
+  defineExpose({
+    getTableData,
+  });
 </script>
 
 <style lang="less" scoped>
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/index.vue
index 0dcfb36..c43c119 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/index.vue
@@ -73,6 +73,14 @@
   defineOptions({
     energyType: 'all', // 与页面路由name一致缓存才可生效
   });
+  // 父组件id
+  const props = defineProps({
+    tabId: {
+      type: Number,
+    },
+  });
+  console.log(props, 'xxy');
+
   const orgId = ref('');
   const result = JSON.parse(sessionStorage.getItem('ORGID')!);
   orgId.value = result;
@@ -93,6 +101,9 @@
     columns.value[2].dataIndex = 'month';
     selectedTime.value = false;
     getMonthData();
+    getBallQuery.value.yearAndMonth = 'month';
+    getBallData();
+    getMonthPillarData();
   };
   const changeToYear = () => {
     monthStyles.value = 'background: #f2f2f2';
@@ -101,10 +112,40 @@
     columns.value[2].dataIndex = 'year';
     selectedTime.value = true;
     getYearData();
+    getBallQuery.value.yearAndMonth = 'year';
+    getBallData();
+    getYearPillarData();
   };
   // echarts图
   const pillarChartRef = ref(null);
   let chartInstance: echarts.ECharts | null = null;
+  const getPillarQuery = ref({
+    orgId: orgId.value,
+    type: props.tabId,
+    year: selectYearValue.value.format('YYYY'),
+  });
+  const xAxisData = ref([]);
+  const referenceValue = ref([]);
+  const budget = ref([]);
+  const actualUsage = ref([]);
+  const getYearPillarData = () => {
+    fetch(carbonPlanning.annualElectricityConsumption, getPillarQuery.value).then((res) => {
+      xAxisData.value = res.data.year;
+      referenceValue.value = res.data.referenceValue;
+      budget.value = res.data.budget;
+      actualUsage.value = res.data.actualUsage;
+      drawPillarChart();
+    });
+  };
+  const getMonthPillarData = () => {
+    fetch(carbonPlanning.electricityUsageBackThen, getPillarQuery.value).then((res) => {
+      xAxisData.value = res.data.year;
+      referenceValue.value = res.data.referenceValue;
+      budget.value = res.data.budget;
+      actualUsage.value = res.data.actualUsage;
+      drawPillarChart();
+    });
+  };
   const drawPillarChart = () => {
     chartInstance = echarts.init(pillarChartRef.value);
     const option = {
@@ -125,7 +166,7 @@
         bottom: '10%',
       },
       legend: {
-        data: ['昨日总人数', '今日实时人数', '昨日使用率'],
+        data: ['实际用量', '预算量', '基准线'],
         top: '0',
         left: '0',
         textStyle: {
@@ -134,7 +175,7 @@
         },
       },
       xAxis: {
-        data: ['2020', '2021', '2022', '2023', '2024'],
+        data: xAxisData.value,
         axisLine: {
           show: true, //隐藏X轴轴线
           lineStyle: {
@@ -182,7 +223,7 @@
       ],
       series: [
         {
-          name: '昨日总人数',
+          name: '实际用量',
           type: 'bar',
           barWidth: 18,
           itemStyle: {
@@ -190,10 +231,10 @@
               color: '#6395f9',
             },
           },
-          data: [24, 45, 43, 35, 76],
+          data: actualUsage.value,
         },
         {
-          name: '今日实时人数',
+          name: '预算量',
           type: 'bar',
           barWidth: 18,
           itemStyle: {
@@ -201,10 +242,10 @@
               color: '#62daab',
             },
           },
-          data: [133, 23, 114, 67, 89],
+          data: budget.value,
         },
         {
-          name: '昨日使用率',
+          name: '基准线',
           type: 'line',
           smooth: true, // 开启平滑曲线
           symbol: 'none', //标记的图形为实心圆
@@ -212,7 +253,7 @@
             color: '#f4664a',
             width: 2,
           },
-          data: [4.2, 3.5, 2.9, 7.8, 2],
+          data: referenceValue.value,
         },
       ],
     };
@@ -220,25 +261,65 @@
     chartInstance.setOption(option);
   };
   const ballChartRef = ref(null);
+  const getBallQuery = ref({
+    orgId: orgId.value,
+    type: props.tabId,
+    year: selectYearValue.value.format('YYYY'),
+    yearAndMonth: 'year',
+  });
+  const ballValue = ref();
+  const getBallData = () => {
+    fetch(carbonPlanning.yearAndMonthAchievement, getBallQuery.value).then((res) => {
+      ballValue.value = res.data;
+      drawSQ();
+    });
+  };
   let ballChartInstance: echarts.ECharts | null = null;
   const drawSQ = () => {
     ballChartInstance = echarts.init(ballChartRef.value);
+    let ballData = (Number(ballValue.value)/100).toFixed(2)
     const option = {
       series: [
         {
           type: 'liquidFill',
-          data: [0.6, 0.5, 0.4, 0.3],
-          radius: '80%',
+          radius: '78.1%',
+          center: ['50%', '50%'],
+          color: ['#ecf3fe', '#c8dcfe', '#5594fa'],
+          data: [ballData, ballData, ballData], // data个数代表波浪数
+          amplitude: 5,
+          // 图形样式
+          itemStyle: {
+            opacity: 1, // 波浪的透明度
+            shadowBlur: 0, // 波浪的阴影范围
+          },
+          label: {
+            show: true,
+            textStyle: {
+              color: '#5594fa',
+              insideColor: '#12786f',
+              fontSize: 40,
+            },
+            formatter: (params) => {
+              // return `${(params.value * 100).toFixed(2)}%`;
+              return `${Number(params.value * 100).toFixed(2)}%`;
+            },
+          },
+
+          outline: {
+            show: true,
+            borderDistance: 5,
+            itemStyle: {
+              borderColor: 'rgba(68, 197, 253,1)',
+              borderWidth: 2,
+            },
+          },
         },
       ],
     };
+
     ballChartInstance = echarts.init(ballChartRef.value);
     ballChartInstance.setOption(option);
   };
-  setTimeout(() => {
-    drawPillarChart();
-    drawSQ();
-  }, 500);
   // 新增节点
   const visible = ref(false);
   const addNode = () => {
@@ -293,7 +374,7 @@
   // 获取年数据
   const yearQueryParams = ref({
     orgId: orgId.value,
-    type: 1,
+    type: props.tabId,
     year: selectYearValue.value.format('YYYY'),
   });
   const changeYear = () => {
@@ -308,8 +389,8 @@
   // 获取月数据
   const monthQueryParams = ref({
     orgId: orgId.value,
-    type: 1,
-    yearMonth: selectMonthValue.value,
+    type: props.tabId,
+    yearMonth: selectYearValue.value.format('YYYY'),
   });
   const changeMonth = () => {
     monthQueryParams.value.yearMonth = selectMonthValue.value;
@@ -322,6 +403,8 @@
   };
   defineExpose({
     getYearData,
+    getBallData,
+    getYearPillarData,
   });
   const parentId = ref();
   const detailData = (record) => {
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue
index dfde6f8..76ec63c 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue
@@ -1,10 +1,10 @@
 <template>
   <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
-    <a-tab-pane key="1" tab="全部"> 
+    <a-tab-pane key="1" tab="全部">
       <all ref="allRef" />
     </a-tab-pane>
-    <a-tab-pane key="2" tab="用电量" force-render>
-      <category ref="electricRef" />
+    <a-tab-pane key="2" tab="用电量">
+      <category ref="electricRef" :tabId="tabId" />
     </a-tab-pane>
     <a-tab-pane key="3" tab="用水量">
       <category ref="useWaterRef" />
@@ -21,14 +21,14 @@
   </a-tabs>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref, nextTick } from 'vue';
   import all from './all/index.vue';
   import category from './category/index.vue';
   defineOptions({
     name: 'carbonPlanning', // 与页面路由name一致缓存才可生效
     components: {
       all,
-      category
+      category,
     },
   });
   const activeKey = ref('1');
@@ -39,30 +39,38 @@
   const carbonEmissionsRef = ref<InstanceType<typeof category> | null>(null);
   const provideHotRef = ref<InstanceType<typeof category> | null>(null);
   // 切换tab页的回调
+  const tabId = ref(1);
   const handleTabChange = (key) => {
     console.log('Tab changed:', key);
     // 在这里可以执行需要在页面切换时执行的逻辑
     if (key === '1') {
-      if (allRef.value) {
-        allRef.value.drawEcharts();
-      }
+      nextTick(() => {
+        if (allRef.value) {
+          allRef.value.getTableData();
+        }
+      });
     } else if (key === '2') {
-      if (electricRef.value) {
-        electricRef.value.getYearData(); // 调用子组件的方法
-      }
+      nextTick(() => {
+        if (electricRef.value) {
+          tabId.value = 1;
+          electricRef.value.getYearData(); // 调用子组件的方法
+          electricRef.value.getBallData();
+          electricRef.value.getYearPillarData();
+        }
+      });
     } else if (key === '3') {
       if (useWaterRef.value) {
         useWaterRef.value.getYearData();
       }
-    }else if (key === '4') {
+    } else if (key === '4') {
       if (provideWaterRef.value) {
         provideWaterRef.value.getYearData();
       }
-    }else if (key === '5') {
+    } else if (key === '5') {
       if (carbonEmissionsRef.value) {
         carbonEmissionsRef.value.getYearData();
       }
-    }else if (key === '6') {
+    } else if (key === '6') {
       if (provideHotRef.value) {
         provideHotRef.value.getYearData();
       }