From ea25c22383e285d9053bc55f15a43dcd85cd6f12 Mon Sep 17 00:00:00 2001
From: fks-xuxinyue <2822784518@qq.com>
Date: Fri, 2 Aug 2024 15:11:57 +0800
Subject: [PATCH] taskid:282 remark:'commit'

---
 .../src/api/carbonEmissionFactorLibrary.ts    |   8 +
 .../carbonAssets/carbonAssetsDetail/index.vue |  57 ++----
 .../carbonAssetsDetail/index2.vue             |  53 -----
 .../carbonEmissions/index.vue                 |   1 +
 .../carbonPlanning/all/index.vue              |   8 +-
 .../category/categoryDeatil.vue               | 184 ++++++++++++++++--
 .../carbonPlanning/category/index.vue         | 115 +++++++----
 .../carbonPlanning/index.vue                  |  56 +++++-
 8 files changed, 324 insertions(+), 158 deletions(-)
 delete mode 100644 hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index2.vue

diff --git a/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts b/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
index 3583af0..8358746 100644
--- a/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
+++ b/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
@@ -74,4 +74,12 @@ export enum carbonAssets {
 export enum uploadPic {
   uploadfiles = '/carbon-smart/api/common/file/uploadfiles',
   select = '/carbon-smart/api/common/file/select',
+  uploadfile = '/carbon-smart/api/common/file/uploadfile',
+}
+// 碳规划
+export enum carbonPlanning {
+  // 全部
+  // 详情
+  searchListByYear = '/carbon-smart/api/carbon/planning/searchListByYear',
+  searchListByMonth = '/carbon-smart/api/carbon/planning/searchListByMonth',
 }
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index.vue
index 26938d9..1a63a0c 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index.vue
@@ -172,7 +172,6 @@
 <script lang="ts" setup>
   import { ref, defineEmits, toRaw } from 'vue';
   import { http } from '/nerv-lib/util/http';
-  import { NSAxios } from '/nerv-lib/util/http/axios';
   import { UploadOutlined } from '@ant-design/icons-vue';
   import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
   import { Pagination, Modal, message } from 'ant-design-vue';
@@ -292,7 +291,12 @@
     visible.value = true;
     formState.value.id = record.id;
     fetch(uploadPic.select, { bizId: record.id, bizTpye: 1 }).then((res) => {
-      fileList.value = res.data;
+      fileList.value = res.data.map((item) => ({
+        uid: item.id.toString(), // 使用文件的id作为唯一标识
+        name: item.fileName, // 文件名
+        status: 'done', // 设置默认状态为已完成
+        url: item.filePath, // 文件的URL，这里假设用示例的URL格式
+      }));
     });
     formState.value = JSON.parse(JSON.stringify(record));
     if (formState.value.expenditure === 0) {
@@ -329,7 +333,6 @@
       cancelText: '取消',
       onOk() {
         fetch(carbonAssets.delete, { ids: id }).then((res) => {
-          debugger;
           message.success('操作成功！');
           getDetailList();
         });
@@ -398,18 +401,11 @@
   };
   // 上传附件
   const fileList = ref<UploadProps['fileList']>([]);
-  // const headers = {
-  //   authorization: 'authorization-text',
-  // };
-  // const beforeUpload = (file: File) => {
-  //   return false; // 返回 true 表示允许上传
-  // };
   const beforeUpload: UploadProps['beforeUpload'] = (file) => {
-    // fileList.value = [...(fileList.value || []), file];
     return false;
   };
   const handleChange = (info: UploadChangeParam) => {
-    fileList.value = [...info.fileList]
+    fileList.value = [...info.fileList];
     if (info.file.status !== 'uploading') {
       console.log(info.file, info.fileList);
     }
@@ -431,20 +427,6 @@
   const uploadQuery = ref({
     bizTpye: 1,
   });
-  const config = {
-    headers: {
-      'Content-Type': 'multipart/form-data',
-    },
-  };
-  function createHttp() {
-    /** todo  临时去除超时时间 */
-    return new NSAxios({
-      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
-      withCredentials: true,
-    });
-  }
-  const uploadHttp = createHttp();
-  const url = '/carbon-smart/api/common/file/uploadfiles'; // 请求api
   const onSubmit = () => {
     formRef.value
       .validate()
@@ -460,16 +442,11 @@
           if (res.data.id && fileList.value.length !== 0) {
             // uploadQuery.value.bizId = res.data.id;
             const formData = ref(new FormData());
-            fileList.value.forEach(file => {
-              console.log(file,'xxy');
-              
-              formData.value.append('files[]', file);
+            fileList.value.forEach((file) => {
+              formData.value.append('files', file.originFileObj);
             });
-              formData.value.append('bizTpye', 1);
-              formData.value.append('bizId', res.data.id);
-            // uploadQuery.value.files = formData.value;
-            // uploadQuery.value.files = fileList.value;
-            debugger;
+            formData.value.append('bizTpye', 1);
+            formData.value.append('bizId', res.data.id);
             fetch(uploadPic.uploadfiles, formData.value)
               .then((res) => {
                 message.success('操作成功！');
@@ -479,18 +456,6 @@
               .catch((error) => {
                 console.log('error', error);
               });
-            console.log(config,'xxy555');
-            
-            // uploadHttp
-            //   .post(url, formData.value, config.headers)
-            //   .then((res) => {
-            //     console.log(res);
-                
-            //   })
-            //   .catch((res) => {
-            //     console.log(res);
-                
-            //   });
           } else {
             message.success('操作成功！');
             visible.value = false;
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index2.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index2.vue
deleted file mode 100644
index 1cf7590..0000000
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index2.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div class="clearfix">
-    <a-upload :file-list="fileList" :before-upload="beforeUpload" @remove="handleRemove">
-      <a-button>
-        <upload-outlined></upload-outlined>
-        Select File
-      </a-button>
-    </a-upload>
-    <a-button
-      type="primary"
-      :disabled="fileList.length === 0"
-      :loading="uploading"
-      style="margin-top: 16px"
-      @click="handleUpload"
-    >
-      {{ uploading ? 'Uploading' : 'Start Upload' }}
-    </a-button>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { UploadOutlined } from '@ant-design/icons-vue';
-import { message } from 'ant-design-vue';
-import type { UploadProps } from 'ant-design-vue';
-
-const fileList = ref<UploadProps['fileList']>([]);
-const uploading = ref<boolean>(false);
-
-const handleRemove: UploadProps['onRemove'] = file => {
-  const index = fileList.value.indexOf(file);
-  const newFileList = fileList.value.slice();
-  newFileList.splice(index, 1);
-  fileList.value = newFileList;
-};
-
-const beforeUpload: UploadProps['beforeUpload'] = file => {
-  fileList.value = [...(fileList.value || []), file];
-  return false;
-};
-
-const handleUpload = () => {
-  const formData = new FormData();
-  fileList.value.forEach((file: UploadProps['fileList'][number]) => {
-    debugger
-    formData.append('files[]', file as any);
-  });
-  const fileBlob = formData.get('files');
-console.log(fileBlob); 
-  uploading.value = true;
-debugger
-};
-</script>
-
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 a5b9204..3872240 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/carbonEmissions/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/carbonEmissions/index.vue
@@ -54,6 +54,7 @@
 
   // 年份选择改变触发
   const changeYearData = () => {
+    debugger
     queryParams.value.year = selectYear.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 0aacc7a..73250c2 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref,defineExpose } from 'vue';
   import type { Dayjs } from 'dayjs';
   import * as echarts from 'echarts';
   defineOptions({
@@ -139,9 +139,9 @@
     chartInstance.setOption(option);
   };
 
-  setTimeout(() => {
-    drawEcharts();
-  }, 500);
+  defineExpose({
+    drawEcharts,
+  });
   // 表格
   const columns = ref([
     {
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/categoryDeatil.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/categoryDeatil.vue
index f1afc2b..0ecc940 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/categoryDeatil.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/categoryDeatil.vue
@@ -9,23 +9,51 @@
       </div>
     </div>
     <div class="contant">
-      <a-card class="chartsPart">
+      <a-card class="chartsPart" v-if="showPart">
         <div class="chart" ref="chartRef"></div>
         <div class="contrast">
           <div class="model">
             <div class="quantity"><span>12,500.00</span>kwh</div>
             <div class="quantityTitle">2023年实际用量</div>
           </div>
-          <div class="model"></div>
-          <div class="model"></div>
-          <div class="model"></div>
-          <div class="model"></div>
+          <div class="model">
+            <div class="quantity"><span>12,500.00</span>kwh</div>
+            <div class="quantityTitle">2024年实际用量</div>
+          </div>
+          <div class="model">
+            <div class="quantity"><span>12,500.00</span>kwh</div>
+            <div class="quantityTitle">2024年预算</div>
+          </div>
+          <div class="model">
+            <div class="quantity"><span>12,500.00</span>kwh</div>
+            <div class="quantityTitle">基准值</div>
+          </div>
+          <div class="model">
+            <div class="quantity"><span>12,500.00</span>kwh</div>
+            <div class="quantityTitle">实际|预算</div>
+          </div>
+        </div>
+        <div class="hide">
+          <div style="cursor: pointer" @click="hideTopPart">
+            <CaretUpOutlined />
+            <span>隐藏</span>
+          </div>
         </div>
       </a-card>
       <a-card class="tablePart" :bordered="false">
+        <div class="show" v-if="!showPart">
+          <div style="cursor: pointer" @click="showTopPart">
+            <CaretDownOutlined />
+            <span>展开</span>
+          </div>
+        </div>
         <div class="button" style="margin-bottom: 12px">
-          <a-button type="primary" :disabled="selectedRowKeys.length === 0">批量设置</a-button>
-          <a-button type="primary" style="margin-left: 6px">基准值设置</a-button>
+          <a-button type="primary" :disabled="selectedRowKeys.length === 0" @click="editData">
+            批量设置
+          </a-button>
+          <a-button type="primary" style="margin-left: 6px" @click="setBasicData">
+            基准值设置
+          </a-button>
         </div>
         <a-table
           :columns="columns"
@@ -47,12 +75,74 @@
         </a-table>
       </a-card>
     </div>
+    <!-- 设置 -->
+    <a-modal :visible="open" title="批量设置" @ok="handleOk" @cancel="onCancel">
+      <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-form-item label="是否按去年折算">
+          <a-select ref="select" :value="formState.value1">
+            <a-select-option value="1">是</a-select-option>
+            <a-select-option value="0">否</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="计算方式">
+          <a-select ref="select" :value="formState.value2">
+            <a-select-option value="1">手动</a-select-option>
+            <a-select-option value="0">自动</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="折算率">
+          <a-input :value="formState.name" suffix="%" disabled />
+        </a-form-item>
+        <a-form-item label="预算值">
+          <a-input :value="formState.email" suffix="kWh" disabled />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+    <!-- 基准值设置 -->
+    <a-drawer
+      :visible="visible"
+      title="设置基准"
+      :width="500"
+      @close="onClose"
+      :footer-style="{ textAlign: 'right' }">
+      <div> 节点：站台照明 </div>
+      <a-table
+        :columns="drawerColumns"
+        :data-source="newTableData"
+        bordered
+        rowKey="id"
+        :rowSelection="{
+          selectedRowKeys: selectedRowKeysSet,
+          onChange: onSelectionChangeSet,
+          type: 'radio',
+        }"
+        :pagination="false">
+        <template #bodyCell="{ column, text, record }">
+          <template v-if="column.key === 'action'">
+            <span>
+              <a @click="setBasic(record)">设为基准值</a>
+            </span>
+          </template>
+        </template>
+      </a-table>
+      <template #footer>
+        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
+        <a-button type="primary" @click="onSubmit">确定</a-button>
+      </template>
+    </a-drawer>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, defineEmits } from 'vue';
+  import { ref, defineEmits, reactive } from 'vue';
+  import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
   import * as echarts from 'echarts';
+  // 父组件id
+  const props = defineProps({
+    parentId: {
+      type: Number,
+    },
+  });
   // 点击返回
   const emit = defineEmits(['change-data']);
   const changeParentData = () => {
@@ -128,6 +218,43 @@
       address: 'Sidney No. 1 Lake Park',
     },
   ];
+  const open = ref(false);
+  const formRef = ref();
+  const formState = ref({});
+  const labelCol = { span: 6 };
+  const wrapperCol = { span: 18 };
+  const editData = () => {
+    open.value = true;
+  };
+  const onCancel = () => {
+    open.value = false;
+  };
+  const visible = ref(false);
+  const selectedRowKeysSet = ref([]);
+  const onSelectionChangeSet = (selectedKeys, selectedRows) => {
+    selectedRowKeysSet.value = selectedKeys;
+  };
+  const drawerColumns = [
+    {
+      title: '年份',
+      dataIndex: 'emissionSources',
+    },
+    {
+      title: '用电量',
+      dataIndex: 'emissionFactors',
+    },
+    {
+      title: '操作',
+      key: 'action',
+    },
+  ];
+  const newTableData = ref([]);
+  const setBasicData = () => {
+    visible.value = true;
+  };
+  const onClose = () => {
+    visible.value = false;
+  };
   // echarts图
   const chartRef = ref(null);
   let chartInstance: echarts.ECharts | null = null;
@@ -261,12 +388,19 @@
   setTimeout(() => {
     chart();
   }, 500);
+  // 点击隐藏/展开
+  const showPart = ref(true);
+  const hideTopPart = () => {
+    showPart.value = false;
+  };
+  const showTopPart = () => {
+    showPart.value = true;
+  };
 </script>
 
 <style lang="less" scoped>
   .detailContant {
     height: 100%;
-    padding: 12px;
   }
   .ns-form-title {
     font-weight: bold;
@@ -312,20 +446,32 @@
     height: calc(100% - 5vh);
     .chartsPart {
       width: 100%;
-      height: 60%;
+      height: 63%;
       display: flex;
       justify-content: space-between;
       .chart {
         width: 100%;
-        height: 70%;
+        height: 65%;
       }
       .contrast {
         width: 100%;
-        height: 30%;
+        height: 25%;
         display: flex;
         align-items: center;
         justify-content: space-around;
       }
+      .hide {
+        height: 10%;
+        width: 100%;
+        display: flex;
+        align-items: end;
+        justify-content: center;
+        color: rgba(39, 120, 255, 1);
+        :deep(.anticon) {
+          line-height: 17px;
+          color: rgba(39, 120, 255, 1) !important;
+        }
+      }
       .model {
         width: 16%;
         height: 90%;
@@ -355,8 +501,20 @@
       }
     }
     .tablePart {
-      height: calc(60% - 20px);
+      height: calc(27% - 20px);
       margin-top: 20px;
+      .show {
+        height: 10%;
+        width: 100%;
+        display: flex;
+        align-items: start;
+        justify-content: center;
+        color: rgba(39, 120, 255, 1);
+        :deep(.anticon) {
+          line-height: 17px;
+          color: rgba(39, 120, 255, 1) !important;
+        }
+      }
     }
   }
   :deep(.ant-card-body) {
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 c1714e2..0dcfb36 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/index.vue
@@ -4,8 +4,20 @@
       <div class="title">
         <span>统计数据</span>
         <a-button style="margin-left: 5%" type="primary" @click="addNode">新增节点</a-button>
-        <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%"
+          v-model:value="selectYearValue"
+          valueFormat="YYYY"
+          @change="changeYear"
+          picker="year" />
+        <a-date-picker
+          v-else
+          style="margin-left: 5%"
+          v-model:value="selectMonthValue"
+          valueFormat="YYYY-MM"
+          @change="changeMonth"
+          picker="month" />
       </div>
       <div class="operation">
         <div class="month" :style="monthStyles" @click="changeToMonth"><span>月</span></div>
@@ -18,7 +30,12 @@
         <div class="pillarChart" ref="pillarChartRef"></div>
       </div>
       <div class="tablePart">
-        <a-table :columns="columns" :data-source="data" bordered :pagination="false">
+        <a-table
+          :columns="columns"
+          :data-source="data"
+          bordered
+          :pagination="false"
+          :scroll="{ x: 1300, y: 250 }">
           <template #bodyCell="{ column, text, record }">
             <template v-if="column.key === 'action'">
               <span>
@@ -31,7 +48,7 @@
     </div>
   </div>
   <div class="totalContant" v-else>
-    <categoryDeatil @change-data="updateData" />
+    <categoryDeatil @change-data="updateData" :parentId="parentId" />
   </div>
   <!-- 新增节点 -->
   <a-drawer :visible="visible" :width="500" @close="onClose" :footer-style="{ textAlign: 'right' }">
@@ -46,15 +63,24 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } 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 categoryDeatil from './categoryDeatil.vue';
+  import { carbonPlanning } from '/@/api/carbonEmissionFactorLibrary';
   import 'echarts-liquidfill';
   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 selectYearValue = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
+  const selectMonthValue = ref<Dayjs>();
   const electricTotal = ref(true);
   // 年/月切换
   const monthStyles = ref('background: #f2f2f2');
@@ -66,6 +92,7 @@
     columns.value[2].title = '月份';
     columns.value[2].dataIndex = 'month';
     selectedTime.value = false;
+    getMonthData();
   };
   const changeToYear = () => {
     monthStyles.value = 'background: #f2f2f2';
@@ -73,6 +100,7 @@
     columns.value[2].title = '年份';
     columns.value[2].dataIndex = 'year';
     selectedTime.value = true;
+    getYearData();
   };
   // echarts图
   const pillarChartRef = ref(null);
@@ -229,31 +257,31 @@
     },
     {
       title: '分项名称',
-      dataIndex: 'name',
+      dataIndex: 'itemizeName',
     },
     {
       title: '年份',
-      dataIndex: 'name',
+      dataIndex: 'year',
     },
     {
       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',
     },
     {
       title: '操作',
@@ -261,28 +289,44 @@
     },
   ]);
 
-  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 detailData = () => {
+  const data = ref([]);
+  // 获取年数据
+  const yearQueryParams = ref({
+    orgId: orgId.value,
+    type: 1,
+    year: selectYearValue.value.format('YYYY'),
+  });
+  const changeYear = () => {
+    yearQueryParams.value.year = selectYearValue.value;
+    getYearData();
+  };
+  const getYearData = () => {
+    fetch(carbonPlanning.searchListByYear, yearQueryParams.value).then((res) => {
+      data.value = res.data;
+    });
+  };
+  // 获取月数据
+  const monthQueryParams = ref({
+    orgId: orgId.value,
+    type: 1,
+    yearMonth: selectMonthValue.value,
+  });
+  const changeMonth = () => {
+    monthQueryParams.value.yearMonth = selectMonthValue.value;
+    getMonthData();
+  };
+  const getMonthData = () => {
+    fetch(carbonPlanning.searchListByMonth, monthQueryParams.value).then((res) => {
+      data.value = res.data;
+    });
+  };
+  defineExpose({
+    getYearData,
+  });
+  const parentId = ref();
+  const detailData = (record) => {
     electricTotal.value = false;
+    parentId.value = record.id;
   };
   // 子页面点击返回
   const updateData = (type) => {
@@ -361,7 +405,6 @@
       justify-content: space-between;
       .ballChart {
         width: 25%;
-        border: 1px solid red;
         margin-right: 12px;
       }
       .pillarChart {
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue
index 6d88cc1..dfde6f8 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue
@@ -1,15 +1,23 @@
 <template>
   <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
     <a-tab-pane key="1" tab="全部"> 
-      <all />
+      <all ref="allRef" />
     </a-tab-pane>
     <a-tab-pane key="2" tab="用电量" force-render>
-      <category />
+      <category ref="electricRef" />
+    </a-tab-pane>
+    <a-tab-pane key="3" tab="用水量">
+      <category ref="useWaterRef" />
+    </a-tab-pane>
+    <a-tab-pane key="4" tab="供水量">
+      <category ref="provideWaterRef" />
+    </a-tab-pane>
+    <a-tab-pane key="5" tab="碳排">
+      <category ref="carbonEmissionsRef" />
+    </a-tab-pane>
+    <a-tab-pane key="6" tab="供热量">
+      <category ref="provideHotRef" />
     </a-tab-pane>
-    <a-tab-pane key="3" tab="用水量"> </a-tab-pane>
-    <a-tab-pane key="4" tab="供水量"> </a-tab-pane>
-    <a-tab-pane key="5" tab="碳排"> </a-tab-pane>
-    <a-tab-pane key="6" tab="供热量"> </a-tab-pane>
   </a-tabs>
 </template>
 <script lang="ts" setup>
@@ -18,10 +26,46 @@
   import category from './category/index.vue';
   defineOptions({
     name: 'carbonPlanning', // 与页面路由name一致缓存才可生效
+    components: {
+      all,
+      category
+    },
   });
   const activeKey = ref('1');
+  const allRef = ref<InstanceType<typeof all> | null>(null);
+  const electricRef = ref<InstanceType<typeof category> | null>(null);
+  const useWaterRef = ref<InstanceType<typeof category> | null>(null);
+  const provideWaterRef = ref<InstanceType<typeof category> | null>(null);
+  const carbonEmissionsRef = ref<InstanceType<typeof category> | null>(null);
+  const provideHotRef = ref<InstanceType<typeof category> | null>(null);
   // 切换tab页的回调
   const handleTabChange = (key) => {
     console.log('Tab changed:', key);
+    // 在这里可以执行需要在页面切换时执行的逻辑
+    if (key === '1') {
+      if (allRef.value) {
+        allRef.value.drawEcharts();
+      }
+    } else if (key === '2') {
+      if (electricRef.value) {
+        electricRef.value.getYearData(); // 调用子组件的方法
+      }
+    } else if (key === '3') {
+      if (useWaterRef.value) {
+        useWaterRef.value.getYearData();
+      }
+    }else if (key === '4') {
+      if (provideWaterRef.value) {
+        provideWaterRef.value.getYearData();
+      }
+    }else if (key === '5') {
+      if (carbonEmissionsRef.value) {
+        carbonEmissionsRef.value.getYearData();
+      }
+    }else if (key === '6') {
+      if (provideHotRef.value) {
+        provideHotRef.value.getYearData();
+      }
+    }
   };
 </script>