修改优化

hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/fillInPage/index copy.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,88 @@
             <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-button
+        type="primary"
+        @click="changeParentData"
+        style="position: absolute; right: 25px; top: 10px; z-index: 99">
+        返回
+      </a-button>
+      <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
@@ -240,7 +248,7 @@
     </a-drawer>
     <!-- 点击编辑弹出框 -->
     <a-drawer
-      :width="700"
+      :width="500"
       :visible="editData"
       :body-style="{ paddingBottom: '80px' }"
       :footer-style="{ textAlign: 'right' }"
@@ -252,7 +260,7 @@
         :label-col="labelCol"
         :wrapper-col="wrapperCol">
         <a-row>
-          <a-col :span="12">
+          <a-col :span="24">
             <a-form-item ref="name" label="数据来源" name="dataSources">
               <a-select
                 ref="select"
@@ -264,14 +272,29 @@
               </a-select>
             </a-form-item>
           </a-col>
-          <a-col :span="12">
+          <a-col :span="24">
             <a-form-item ref="name" label="消耗量" name="consumption">
               <ns-input v-model:value="editFormState.consumption" :disabled="canEdit" />
             </a-form-item>
           </a-col>
         </a-row>
         <a-row v-if="automatic">
-          <a-col :span="12">
+          <a-col :span="24">
+            <a-form-item label="能耗类型">
+              <a-select
+                v-model:value="editFormState.energyConsumptionType"
+                @change="changeEnergyType"
+                placeholder="请选择能耗类型">
+                <a-select-option
+                  v-for="(item, index) in energyTypeOptions"
+                  :key="index"
+                  :value="item.dicKey">
+                  {{ item.cnValue }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="24">
             <a-form-item ref="name" label="采集节点" name="collectionNode">
               <a-tree-select
                 v-model:value="editFormState.collectionNode"
@@ -283,12 +306,12 @@
           </a-col>
         </a-row>
         <a-row>
-          <a-col :span="12">
+          <a-col :span="24">
             <a-form-item ref="name" label="因子值" name="factorId">
               <ns-input v-model:value="editFormState.factorId" />
             </a-form-item>
           </a-col>
-          <a-col :span="12">
+          <a-col :span="24">
             <a-form-item ref="name" label="关键字" name="emissionFactors">
               <a-input-search
                 v-model:value="editFormState.emissionFactors"
@@ -303,7 +326,8 @@
         :data-source="newTableData"
         bordered
         rowKey="id"
-        :scroll="{ y: 400 }"
+        :scroll="{ y: 300 }"
+        size="small"
         style="margin-bottom: 10px"
         :rowSelection="{
           selectedRowKeys: selectedRowKeysEdit,
@@ -313,25 +337,28 @@
         :pagination="false">
       </a-table>
       <a-pagination
-        :current="queryParams.pageNum"
+        :current="queryData.pageNum"
         :total="total"
-        :page-size="queryParams.pageSize"
+        :page-size="queryData.pageSize"
+        :pageSizeOptions="['5']"
         style="display: flex; justify-content: center; margin-top: 16px"
         :show-size-changer="true"
         :show-quick-jumper="true"
         @change="onChange" />
-      <a-upload
-        v-model:file-list="fileList"
+      <a-upload-dragger
+        v-model:fileList="fileList"
+        accept=".pdf"
         name="file"
-        accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf"
         @remove="handleFileRemove"
         :before-upload="beforeUpload"
         @change="handleChange">
-        <a-button>
-          <upload-outlined></upload-outlined>
-          点击上传凭证
-        </a-button>
-      </a-upload>
+        <p class="ant-upload-drag-icon">
+          <inbox-outlined></inbox-outlined>
+        </p>
+        <p class="ant-upload-hint">1.仅支持pdf格式文件或文件夹</p>
+        <p class="ant-upload-hint">2.文件名命名规则为【能源种类_年份】</p>
+        <p class="ant-upload-hint">3.每次上传自动覆盖</p>
+      </a-upload-dragger>
       <template #footer>
         <a-button style="margin-right: 8px" @click="onCloseEditData">取消</a-button>
         <a-button type="primary" @click="submitEditData">确定</a-button>
@@ -341,15 +368,16 @@
 </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 { Pagination, Modal, message, Upload } from 'ant-design-vue';
   import type { TreeProps, UploadChangeParam } from 'ant-design-vue';
   import {
     EditOutlined,
     PlusCircleOutlined,
     MinusCircleOutlined,
     UploadOutlined,
+    InboxOutlined,
   } from '@ant-design/icons-vue';
   import * as echarts from 'echarts';
   import { voucherColumns, drawerColumns } from '../config';
@@ -361,6 +389,7 @@
   } from '/@/api/carbonEmissionFactorLibrary';
   import { group } from '/@/api/deviceManage';
   import { debug, log } from 'node:console';
+  import { dict } from '/@/api';
   defineOptions({
     energyType: 'fillInPage', // 与页面路由name一致缓存才可生效
     components: {
@@ -382,12 +411,12 @@
       type: String,
     },
   });
-
+  const activeKey = ref('1');
   const orgId = ref('');
   const result = JSON.parse(sessionStorage.getItem('ORGID')!);
   orgId.value = result;
-  const fetch = (api, params = { orgId: orgId.value }) => {
-    return http.post(api, params);
+  const fetch = (api, params = { orgId: orgId.value }, config) => {
+    return http.post(api, params, config);
   };
   // 左侧树结构
   const x = 3;
@@ -865,15 +894,17 @@
     selectedRowKeys.value.forEach((item) => {
       deleteIds.value.append('ids', item);
     });
-    fetch(uploadPic.downloadZip, deleteIds.value)
+    const config = {
+      responseType: 'blob',
+    };
+    fetch(uploadPic.downloadZip, deleteIds.value, config)
       .then((res) => {
         // 创建一个 URL 对象，指向图片数据的 blob
-        const url = window.URL.createObjectURL(new Blob([res.data]));
+        const url = window.URL.createObjectURL(new Blob([res]));
         // 创建一个 <a> 标签，用于触发下载
         const link = document.createElement('a');
         link.href = url;
-        debugger;
-        link.setAttribute('download', ''); // 设置下载的文件名
+        link.setAttribute('download', '碳盘查凭证.zip'); // 设置下载的文件名
         document.body.appendChild(link);
         link.click();
 
@@ -910,10 +941,15 @@
   const queryData = ref({
     orgId: orgId.value,
     pageNum: 1,
-    pageSize: 999,
+    pageSize: 5,
   });
-  const edit = (record) => {
-    getDictList();
+  const energyTypeOptions = ref([]);
+  const acquisitionDate = ref();
+  const edit = async (record) => {
+    acquisitionDate.value = record.acquisitionDate;
+    // 获取能耗类型
+    const options = await dict({ params: { dicKey: 'ENERGY_TYPE' } });
+    energyTypeOptions.value = options.data.data;
     getNewTable();
     editFormState.value.id = record.id;
     editFormState.value.dataSources = record.dataSources;
@@ -949,46 +985,66 @@
     if (value === '3') {
       canEdit.value = true;
       automatic.value = true;
+    } else {
+      automatic.value = false;
     }
   };
   // 定义采集节点数的变量
   const collectingNodes = ref<TreeSelectProps['treeData']>([]);
-  const getDictList = () => {
+  const getTypeConsume = ref();
+  const changeEnergyType = (value) => {
+    getTypeConsume.value = value;
     // 获取自动采集节点的数据
-    fetch(group.queryDeviceGroupTree, { energyType: 'ELECTRICITY_USAGE', orgId: orgId.value }).then(
-      (res) => {
-        collectingNodes.value = res.data;
-        collectingNodes.value = collectingNodes.value.map((item) => ({
-          value: item.id,
-          label: item.pointName,
-          children: item.children
-            ? item.children.map((child) => ({
-                value: child.id,
-                label: child.pointName,
-              }))
-            : [],
-        }));
-      },
-    );
+    fetch(group.queryDeviceGroupTree, { energyType: value, orgId: orgId.value }).then((res) => {
+      collectingNodes.value = res.data;
+      collectingNodes.value = collectingNodes.value.map((item) => ({
+        value: item.id,
+        label: item.pointName,
+        children: item.children
+          ? item.children.map((child) => ({
+              value: child.id,
+              label: child.pointName,
+            }))
+          : [],
+      }));
+    });
   };
   const selectNode = (value) => {
-    debugger;
+    const getConsumeData = ref({
+      acquisitionDate: acquisitionDate.value,
+      collectionNode: value,
+      orgId: orgId.value,
+      energyConsumptionType: getTypeConsume.value,
+    });
+    fetch(carbonInventoryCheck.nodeCancellationConsumption, getConsumeData.value).then((res) => {
+      editFormState.value.consumption = res.data;
+    });
   };
   // 上传附件
   const fileList = ref<UploadProps['fileList']>([]);
+  const isValidFileName = (filename: string): boolean => {
+    const regex = /^[\s\S]+_\d{4}\.pdf$/;
+    return regex.test(filename);
+  };
   const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+    const filename = file.name;
+    if (!isValidFileName(filename)) {
+      message.error('文件名不符合规则');
+      return Upload.LIST_IGNORE; // 阻止文件上传
+    }
     return false;
   };
   const handleChange = (info: UploadChangeParam) => {
-    fileList.value = [...info.fileList];
-    if (info.file.status !== 'uploading') {
-      console.log(info.file, info.fileList);
-    }
-    if (info.file.status === 'done') {
-      message.success(`${info.file.name} 文件上传成功`);
-    } else if (info.file.status === 'error') {
-      message.error(`${info.file.name} 文件上传失败`);
+    // fileList.value = [...info.fileList];
+    const { fileList: newFileList } = info;
+    // 删除fileList中的第一条数据
+    if (newFileList.length > 1) {
+      delIds.value.push(info.fileList[0].uid);
+      newFileList.shift(); // 删除第一条数据
     }
+
+    // 更新fileList
+    fileList.value = [...newFileList];
   };
   const delIds = ref([]);
   const handleFileRemove = (file) => {
@@ -1062,8 +1118,8 @@
   };
   // 分页器
   const onChange = (pageNumber: number, size: number) => {
-    queryParams.value.pageNum = pageNumber;
-    queryParams.value.pageSize = size;
+    queryData.value.pageNum = pageNumber;
+    queryData.value.pageSize = size;
     getNewTable();
   };
   // 点击切换排放统计/碳排流向
@@ -1388,6 +1444,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 = () => {
@@ -1413,7 +1483,7 @@
     flex-direction: column;
     .top {
       position: relative;
-      height: 80%;
+      height: 100%;
       margin-bottom: 20px;
       .ns-form-title {
         font-weight: bold;
@@ -1492,10 +1562,13 @@
     flex: 1;
     min-width: 0;
     height: 100%;
-    padding: @ns-gap;
     background-color: @white;
     border-radius: @ns-border-radius;
     box-shadow: @ns-content-box-shadow;
+    position: relative;
+    :deep(.ant-tabs-content-holder) {
+      padding: 20px;
+    }
     .ns-table-title {
       text-align: left;
       font-size: 16px;
@@ -1552,4 +1625,8 @@
     margin-left: 10%;
     flex-direction: column;
   }
+  :deep(.ant-upload.ant-upload-drag) {
+    height: 18vh;
+    margin-top: 10px;
+  }
 </style>

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

@@ -1,51 +1,79 @@
 <template>
   <div class="main">
-    <div class="left">
-      <div class="top">
-        <a-form style="width: 100%; margin: 0 auto">
-          <div class="ns-form-title">
-            <div class="title">{{ props.year }}年济阳站碳盘查报告</div>
-            <div class="standard">
-              <span>适用标准：ISO 14064-1</span>
-              <a-button type="primary" style="margin-left: 12px" @click="openCategoryConfig"
-                >类别配置</a-button
-              >
-            </div>
-          </div>
-          <div style="padding: 0 16px !important; width: 100%">
-            <a-row>
-              <a-col :span="24" style="margin-bottom: 16px">
-                <a-input-search
-                  v-model:value="searchValue"
-                  style="margin-bottom: 8px"
-                  placeholder="请输入关键词" />
-              </a-col>
-            </a-row>
-          </div>
-        </a-form>
-        <a-tree
-          :expanded-keys="expandedKeysL"
-          :selectedKeys="selectedKeysL"
-          :auto-expand-parent="autoExpandParent"
-          :tree-data="gData"
-          v-if="gData && gData.length > 0"
-          :height="233"
-          show-line
-          style="padding: 0 16px !important"
-          @expand="onExpandL"
-          @select="onSelectL"
-          block-node>
-          <template #title="{ cnValue }">
-            <span v-if="cnValue && searchValue && cnValue.indexOf(searchValue) > -1">
-              {{ cnValue.substring(0, cnValue.indexOf(searchValue)) }}
-              <span style="color: #f50">{{ searchValue }}</span>
-              {{ cnValue.substring(cnValue.indexOf(searchValue) + searchValue.length) }}
-            </span>
-            <span v-else>{{ cnValue }}</span>
-          </template>
-        </a-tree>
+    <div class="totalTitle">
+      <div class="ns-form-title">
+        <div class="title">{{ props.year }}年济阳站碳盘查报告</div>
+        <div class="standard" style="display: flex; align-items: center">
+          <img
+            width="11px"
+            height="11px"
+            style="margin-right: 5px"
+            src="../../../../../src/icon/carbonInventoryCheck.svg" />
+          <span
+            style="
+              font-size: 12px;
+              font-weight: 400;
+              letter-spacing: 0px;
+              line-height: 16.8px;
+              color: rgba(67, 136, 251, 1);
+              text-align: left;
+              vertical-align: top;
+            ">
+            适用标准：ISO 14064-1
+          </span>
+          <a-button type="primary" @click="changeParentData" ghost style="margin-left: 6px">
+            返回
+          </a-button>
+        </div>
       </div>
-      <!-- <div class="bottom">
+    </div>
+    <div style="display: flex; height: 100%">
+      <div class="left">
+        <div class="top">
+          <a-form style="width: 100%; margin: 0 auto">
+            <div class="ns-form-title">
+              <div>能源类别</div>
+              <div class="standard">
+                <a-button type="primary" style="margin-left: 12px" @click="openCategoryConfig">
+                  类别配置
+                </a-button>
+              </div>
+            </div>
+            <div style="padding: 0 16px !important; width: 100%">
+              <a-row>
+                <a-col :span="24" style="margin-bottom: 16px">
+                  <a-input-search
+                    v-model:value="searchValue"
+                    style="margin-bottom: 8px"
+                    placeholder="请输入关键词" />
+                </a-col>
+              </a-row>
+            </div>
+          </a-form>
+          <a-tree
+            :expanded-keys="expandedKeysL"
+            :selectedKeys="selectedKeysL"
+            :auto-expand-parent="autoExpandParent"
+            :tree-data="gData"
+            v-if="gData && gData.length > 0"
+            :height="233"
+            show-line
+            style="padding: 0 16px !important"
+            @expand="onExpandL"
+            @select="onSelectL"
+            block-node>
+            <template #title="{ cnValue }">
+              <span v-if="cnValue && searchValue && cnValue.indexOf(searchValue) > -1">
+                {{ cnValue.substring(0, cnValue.indexOf(searchValue)) }}
+                <span style="color: #f50">{{ searchValue }}</span>
+                {{ cnValue.substring(cnValue.indexOf(searchValue) + searchValue.length) }}
+              </span>
+              <span v-else>{{ cnValue }}</span>
+            </template>
+          </a-tree>
+          <a-empty v-else />
+        </div>
+        <!-- <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">
@@ -54,87 +82,89 @@
           </div>
         </a-form>
       </div> -->
-    </div>
-    <div class="right">
-      <a-button
-        type="primary"
-        @click="changeParentData"
-        style="position: absolute; right: 25px; top: 10px; z-index: 99">
-        返回
-      </a-button>
-      <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="right">
+        <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
+                  v-if="treeData && treeData.length > 0"
+                  :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>
-                    <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
-                >
+                  </template>
+                </a-tree>
+                <a-empty v-else />
+                <div class="addTreeNode">
+                  <a-button type="primary" style="width: 100%" @click="addTreeNodeData">
+                    新增
+                  </a-button>
+                </div>
+              </div>
+              <div class="mainRight">
+                <a-table
+                  :columns="columns"
+                  v-if="data && data.length > 0"
+                  :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>
+                <a-empty v-else />
               </div>
             </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>
-        </a-tab-pane>
-        <a-tab-pane key="2" tab="排放统计">
-          <a-table
-            :columns="pftjColumn"
-            :data-source="pftjData"
-            bordered
-            :pagination="false"
-            :scroll="{ x: 2000, y: 500 }">
-            <template #bodyCell="{ column, text, record }">
-              {{ text || '-' }}
-            </template>
-          </a-table>
-        </a-tab-pane>
-        <a-tab-pane key="3" tab="碳排流向">
-          <div ref="tplxChart" style="width: 100%; height: 68vh"></div>
-        </a-tab-pane>
-      </a-tabs>
+          </a-tab-pane>
+          <a-tab-pane key="2" tab="排放统计">
+            <a-table
+              :columns="pftjColumn"
+              v-if="pftjData && pftjData.length > 0"
+              :data-source="pftjData"
+              bordered
+              :pagination="false"
+              :scroll="{ x: 2000, y: 500 }">
+              <template #bodyCell="{ column, text, record }">
+                {{ text || '-' }}
+              </template>
+            </a-table>
+            <a-empty v-else />
+          </a-tab-pane>
+          <a-tab-pane key="3" tab="碳排流向">
+            <div v-if="showChart" ref="tplxChart" style="width: 100%; height: 68vh"></div>
+            <a-empty v-else />
+          </a-tab-pane>
+        </a-tabs>
+      </div>
     </div>
     <!-- 类别配置 -->
     <a-drawer
@@ -144,16 +174,18 @@
       :body-style="{ paddingBottom: '80px' }"
       :footer-style="{ textAlign: 'right' }"
       destroyOnClose
-      title="类别配置"
       @close="closeCategoryConfig">
-      <div class="search">
-        <a-input-search
-          v-model:value="searchcategoryConfig"
-          placeholder="请输入类别名称"
-          style="width: 250px"
-          @search="onSearch" />
+      <div class="ns-form-title" style="margin-left: 10%">
+        <div class="title">类别设置</div>
       </div>
       <div class="treePart">
+        <div class="search">
+          <a-input-search
+            v-model:value="searchcategoryConfig"
+            placeholder="请输入类别名称"
+            style="width: 250px"
+            @search="onSearch" />
+        </div>
         <a-tree
           :expanded-keys="categoryExpandedKeys"
           :selectedKeys="categorySelectedKeys"
@@ -186,6 +218,9 @@
       :footer-style="{ textAlign: 'right' }"
       destroyOnClose
       @close="onClose">
+      <div class="ns-form-title" style="display: flex">
+        <div class="title">新增</div>
+      </div>
       <a-form
         ref="formRef"
         :model="formState"
@@ -229,6 +264,9 @@
       :footer-style="{ textAlign: 'right' }"
       destroyOnClose
       @close="onCloseVoucher">
+      <div class="ns-form-title">
+        <div class="title">凭证列表</div>
+      </div>
       <a-table
         :columns="voucherColumns"
         :data-source="voucherData"
@@ -254,6 +292,9 @@
       :footer-style="{ textAlign: 'right' }"
       destroyOnClose
       @close="onCloseEditData">
+      <div class="ns-form-title-edit">
+        <div class="title">编辑</div>
+      </div>
       <a-form
         ref="editFormRef"
         :model="editFormState"
@@ -321,6 +362,9 @@
           </a-col>
         </a-row>
       </a-form>
+      <div class="ns-form-title-edit" style="display: flex">
+        <div class="titleEdit">因子列表</div>
+      </div>
       <a-table
         :columns="drawerColumns"
         :data-source="newTableData"
@@ -345,6 +389,9 @@
         :show-size-changer="true"
         :show-quick-jumper="true"
         @change="onChange" />
+      <div class="ns-form-title-edit" style="display: flex">
+        <div class="titleEdit">凭证上传</div>
+      </div>
       <a-upload-dragger
         v-model:fileList="fileList"
         accept=".pdf"
@@ -658,8 +705,8 @@
   // 新增/编辑排放源树节点
   const addTreeNodeVisible = ref(false);
   const formRef = ref();
-  const labelCol = { span: 5 };
-  const wrapperCol = { span: 19 };
+  const labelCol = { span: 4 };
+  const wrapperCol = { span: 20 };
   const formState = ref({
     orgId: orgId.value,
     year: props.year,
@@ -1148,10 +1195,16 @@
   });
   const linksData = ref([]);
   const datalist = ref([]);
+  const showChart = ref(true);
   const getCarbonFlowDirection = () => {
     fetch(carbonInventoryCheck.carbonFlowDirection, queryFlowDirection.value).then((res) => {
       console.log(res);
       linksData.value = res.data[0];
+      if (linksData.value[0].value !== 0) {
+        showChart.value = true;
+      } else {
+        showChart.value = false;
+      }
       datalist.value = res.data[1];
       drawEcharts();
     });
@@ -1467,14 +1520,18 @@
 
 <style lang="less" scoped>
   .main {
-    background-color: @ns-content-bg;
-    display: flex;
+    background-color: #ffffff;
     height: 100%;
+    padding: 16px;
   }
   .left {
     width: 300px;
     margin-right: @ns-gap;
     min-width: fit-content;
+    height: 93%;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 2px 20px rgb(69 123 234 / 20%);
     > div {
       background-color: @white;
     }
@@ -1491,7 +1548,6 @@
         padding: 16px;
         margin-bottom: 16px;
         padding-bottom: 10px;
-        border-bottom: 1px solid #e9e9e9;
       }
       .title {
         text-align: left;
@@ -1561,11 +1617,10 @@
   .right {
     flex: 1;
     min-width: 0;
-    height: 100%;
-    background-color: @white;
-    border-radius: @ns-border-radius;
-    box-shadow: @ns-content-box-shadow;
-    position: relative;
+    height: 93%;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 2px 20px rgb(69 123 234 / 20%);
     :deep(.ant-tabs-content-holder) {
       padding: 20px;
     }
@@ -1611,17 +1666,17 @@
   }
 
   .search {
-    width: 70%;
     height: 5vh;
     display: flex;
     align-items: center;
-    margin-left: 10%;
+    justify-content: center;
   }
   .treePart {
     width: 70%;
     height: 100%;
     display: flex;
-    border: 1px solid #bfbfbf;
+    border: 1px solid rgba(235, 238, 245, 1);
+    border-radius: 8px;
     margin-left: 10%;
     flex-direction: column;
   }
@@ -1629,4 +1684,48 @@
     height: 18vh;
     margin-top: 10px;
   }
+  .ns-form-title {
+    font-weight: bold;
+    user-select: text;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .ns-form-title-edit {
+    font-weight: bold;
+    user-select: text;
+  }
+  .title {
+    text-align: left;
+    height: 32px;
+    line-height: 32px;
+    font-weight: bold;
+    user-select: text;
+    position: relative;
+    padding-left: 9px;
+  }
+  .titleEdit {
+    text-align: left;
+    height: 32px;
+    line-height: 32px;
+    font-weight: bold;
+    user-select: text;
+    position: relative;
+  }
+  .title::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 13px;
+    width: 3px;
+    border-radius: 1px;
+    background-color: #2778ff;
+  }
+  :deep(.ant-table-title) {
+    display: flex;
+    justify-content: right;
+  }
 </style>

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

@@ -20,6 +20,7 @@
     :footer-style="{ textAlign: 'right' }"
     destroyOnClose
     @close="onClose">
+    <div class="ns-form-title"><div class="title">{{text}}</div></div>
     <a-form
       ref="formRef"
       :model="formState"
@@ -78,8 +79,9 @@
   const visible = ref(false);
   const formState = ref({});
   const formRef = ref();
-  const labelCol = { span: 5 };
-  const wrapperCol = { span: 19 };
+  const labelCol = { span: 4 };
+  const wrapperCol = { span: 20 };
+  const text = ref('新增报告')
   const disabledDate = (current: moment.Moment | null) => {
     if (formState.value.reportPeriod === '2') {
       const year = current.year();
@@ -140,6 +142,7 @@
         name: 'userAdd',
         type: 'primary',
         handle: () => {
+          text.value = '新增报告'
           visible.value = true;
         },
       },
@@ -183,6 +186,7 @@
           label: '编辑',
           name: 'userEdit',
           handle: (record: any) => {
+          text.value = '编辑报告'
             visible.value = true;
             fetch(carbonInventoryCheck.findById, { id: record.id }).then((res) => {
               formState.value = res.data;
@@ -274,4 +278,30 @@
   };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .ns-form-title {
+    font-weight: bold;
+    user-select: text;
+    margin-bottom: 16px;
+  }
+  .title {
+    text-align: left;
+    height: 32px;
+    line-height: 32px;
+    font-weight: bold;
+    user-select: text;
+    position: relative;
+    padding-left: 9px;
+  }
+  .title::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 13px;
+    width: 3px;
+    border-radius: 1px;
+    background-color: #2778ff;
+  }
+</style>