修改bug，优化页面UI

hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/fillInPage/index.vue

@@ -45,7 +45,7 @@
           </template>
         </a-tree>
       </div>
-      <div class="bottom">
+      <!-- <div class="bottom">
         <a-form style="width: 100%; margin: 0 auto">
           <div class="ns-form-title"><div class="title">报告相关</div></div>
           <div class="button" style="padding: 0 16px !important">
@@ -53,80 +53,82 @@
             <div :class="{ tplx: isClickedTplx }" @click="showTplx">碳排流向</div>
           </div>
         </a-form>
-      </div>
+      </div> -->
     </div>
     <div class="right">
-      <div style="display: flex">
-        <div class="ns-table-title ns-title-extra-box">排放源</div>
-        <a-button type="primary" style="margin-left: 12px" @click="changeParentData">返回</a-button>
-      </div>
-      <div style="display: flex; height: 100%" v-if="fillInPage">
-        <div class="mainLeft">
-          <a-tree
-            :expandedKeys="expandedKeysR"
-            :selectedKeys="selectedKeysR"
-            :checkedKeys="checkedKeys"
-            :tree-data="treeData"
-            @select="onSelectR"
-            block-node>
-            <template #title="data">
-              <div class="treeRow">
-                <div>
-                  <span>{{ data.emissionSource }}</span>
-                </div>
-                <div class="actionMore">
-                  <EditOutlined @click="editUnit(data)" />
-                  <MinusCircleOutlined style="margin-left: 6px" @click="delUnit(data)" />
-                </div>
+      <a-tabs v-model:activeKey="activeKey" @change="handleTabChange" style="height: 100%">
+        <a-tab-pane key="1" tab="排放源">
+          <div style="display: flex; height: 100%">
+            <div class="mainLeft">
+              <a-tree
+                :expandedKeys="expandedKeysR"
+                :selectedKeys="selectedKeysR"
+                :checkedKeys="checkedKeys"
+                :tree-data="treeData"
+                @select="onSelectR"
+                block-node>
+                <template #title="data">
+                  <div class="treeRow">
+                    <div>
+                      <span>{{ data.emissionSource }}</span>
+                    </div>
+                    <div class="actionMore">
+                      <EditOutlined @click="editUnit(data)" />
+                      <MinusCircleOutlined style="margin-left: 6px" @click="delUnit(data)" />
+                    </div>
+                  </div>
+                </template>
+              </a-tree>
+              <div class="addTreeNode">
+                <a-button type="primary" style="width: 100%" @click="addTreeNodeData"
+                  >新增</a-button
+                >
               </div>
-            </template>
-          </a-tree>
-          <div class="addTreeNode">
-            <a-button type="primary" style="width: 100%" @click="addTreeNodeData">新增</a-button>
+            </div>
+            <div class="mainRight">
+              <a-table
+                :columns="columns"
+                :data-source="data"
+                :pagination="false"
+                bordered
+                size="middle"
+                :scroll="{ y: 500 }">
+                <template #title>
+                  <a-button type="primary" @click="downLoadVoucher">凭证</a-button>
+                </template>
+                <template #bodyCell="{ column, text, record }">
+                  <template v-if="column.dataIndex === 'dataSources'">
+                    <span v-if="record.dataSources">{{ record.dataSources.label }}</span>
+                  </template>
+                  <template v-if="column.dataIndex === 'carbonSource'">
+                    <span v-if="record.carbonSource">{{ record.carbonSource.label }}</span>
+                  </template>
+                  <template v-if="column.key === 'action'">
+                    <span>
+                      <a @click="edit(record)">编辑</a>
+                    </span>
+                  </template>
+                </template>
+              </a-table>
+            </div>
           </div>
-        </div>
-        <div class="mainRight">
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="排放统计">
           <a-table
-            :columns="columns"
-            :data-source="data"
-            :pagination="false"
+            :columns="pftjColumn"
+            :data-source="pftjData"
             bordered
-            size="middle"
-            :scroll="{ y: 480 }">
-            <template #title>
-              <a-button type="primary" @click="downLoadVoucher">凭证</a-button>
-            </template>
+            :pagination="false"
+            :scroll="{ x: 2000, y: 500 }">
             <template #bodyCell="{ column, text, record }">
-              <template v-if="column.dataIndex === 'dataSources'">
-                <span v-if="record.dataSources">{{ record.dataSources.label }}</span>
-              </template>
-              <template v-if="column.dataIndex === 'carbonSource'">
-                <span v-if="record.carbonSource">{{ record.carbonSource.label }}</span>
-              </template>
-              <template v-if="column.key === 'action'">
-                <span>
-                  <a @click="edit(record)">编辑</a>
-                </span>
-              </template>
+              {{ text || '-' }}
             </template>
           </a-table>
-        </div>
-      </div>
-      <div v-if="isClickedPftj">
-        <a-table
-          :columns="pftjColumn"
-          :data-source="pftjData"
-          bordered
-          :pagination="false"
-          :scroll="{ x: 2000 }">
-          <template #bodyCell="{ column, text, record }">
-            {{ text || '-' }}
-          </template>
-        </a-table>
-      </div>
-      <div v-if="isClickedTplx" style="width: 100%; height: 100%">
-        <div ref="tplxChart" style="width: 100%; height: 68vh"></div>
-      </div>
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="碳排流向">
+          <div ref="tplxChart" style="width: 100%; height: 68vh"></div>
+        </a-tab-pane>
+      </a-tabs>
     </div>
     <!-- 类别配置 -->
     <a-drawer
@@ -225,6 +227,7 @@
         :columns="voucherColumns"
         :data-source="voucherData"
         :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectionChange }"
+        rowKey="id"
         :pagination="false">
         <template #bodyCell="{ column, text }">
           <template v-if="column.dataIndex === 'name'">
@@ -340,7 +343,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, watch, toRaw, defineEmits } from 'vue';
+  import { ref, watch, toRaw, defineEmits, nextTick } from 'vue';
   import { http } from '/nerv-lib/util/http';
   import { Pagination, Modal, message } from 'ant-design-vue';
   import type { TreeProps, UploadChangeParam } from 'ant-design-vue';
@@ -381,7 +384,7 @@
       type: String,
     },
   });
-
+  const activeKey = ref('1');
   const orgId = ref('');
   const result = JSON.parse(sessionStorage.getItem('ORGID')!);
   orgId.value = result;
@@ -859,7 +862,33 @@
   };
 
   const voucherData = ref([]);
+  const downLoadMore = () => {
+    const deleteIds = ref(new FormData());
+    selectedRowKeys.value.forEach((item) => {
+      deleteIds.value.append('ids', item);
+    });
+    fetch(uploadPic.downloadZip, deleteIds.value)
+      .then((res) => {
+        // 创建一个 URL 对象，指向图片数据的 blob
+        const url = window.URL.createObjectURL(new Blob([res.data]));
+        // 创建一个 <a> 标签，用于触发下载
+        const link = document.createElement('a');
+        link.href = url;
+        debugger;
+        link.setAttribute('download', ''); // 设置下载的文件名
+        document.body.appendChild(link);
+        link.click();
+
+        // 清理 URL 对象
+        window.URL.revokeObjectURL(url);
+        onCloseVoucher();
+      })
+      .catch((error) => {
+        console.error('下载图片失败：', error);
+      });
+  };
   const onCloseVoucher = () => {
+    selectedRowKeys.value = [];
     openVoucher.value = false;
   };
   // 点击编辑弹出框
@@ -1361,6 +1390,20 @@
     chartInstance = echarts.init(tplxChart.value);
     chartInstance.setOption(option);
   };
+
+  const handleTabChange = (key) => {
+    console.log('Tab changed:', key);
+    // 在这里可以执行需要在页面切换时执行的逻辑
+    if (key === '2') {
+      nextTick(() => {
+        getEmissionStatistic();
+      });
+    } else if (key === '3') {
+      nextTick(() => {
+        getCarbonFlowDirection();
+      });
+    }
+  };
   // 点击返回
   const emit = defineEmits(['change-data']);
   const changeParentData = () => {
@@ -1386,7 +1429,7 @@
     flex-direction: column;
     .top {
       position: relative;
-      height: 80%;
+      height: 100%;
       margin-bottom: 20px;
       .ns-form-title {
         font-weight: bold;
@@ -1465,10 +1508,12 @@
     flex: 1;
     min-width: 0;
     height: 100%;
-    padding: @ns-gap;
     background-color: @white;
     border-radius: @ns-border-radius;
     box-shadow: @ns-content-box-shadow;
+    :deep(.ant-tabs-content-holder) {
+      padding: 20px;
+    }
     .ns-table-title {
       text-align: left;
       font-size: 16px;