对接导入导出，优化页面UI

hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/energyConsumption/index.vue

@@ -1,52 +1,11 @@
 <template>
   <div>
-    <!-- <a-table 
-      :columns="tableColumns" 
-      :data-source="data" 
-      bordered
-      :pagination="false"
-      :scroll="{ x: 2000 }">
-      <template #bodyCell="{ column, text, record }">
-        <template v-if="column.key === 'action'">
-          <span>
-            <a @click="editData(record)">编辑</a>
-            <a-divider type="vertical" />
-            <a @click="delData(record)">删除</a>
-          </span>
-        </template>
-      </template>
-      <template #title>
-        <a-date-picker v-model:value="selectYear" picker="year" @change="changeYearData" valueFormat="YYYY" />
-        <div class="buttonGroup">
-          <a-button type="primary" @click="addNewData">新增</a-button>
-          <a-button type="primary">导入</a-button>
-          <a-button type="primary">导出</a-button>
-          <a-button type="primary">模板下载</a-button>
-          <a-button type="primary" @click="uploadVoucher">上传凭证</a-button>
-          <a-button type="primary">凭证下载</a-button>
-        </div>
-      </template>
-    </a-table> -->
     <ns-view-list-table
       v-bind="tableConfig"
       :model="data"
       ref="mainRef"
       :scroll="{ x: 1500, y: 350 }">
-      <!-- <template #bodyCell="{ column, text, record }">
-        <template v-if="column.dataIndex === 'janFlag'">
-          <span v-if="record.janFlag===1" style="color: rgba(243, 97, 99, 1);">{{text}}</span>
-          <span v-else style="color: rgba(57, 215, 287, 1);">{{text}}</span>
-        </template>
-      </template> -->
     </ns-view-list-table>
-    <!-- <a-pagination 
-        :current="queryParams.pageNum"
-        :total="total"
-        :page-size="queryParams.pageSize"
-        style="display: flex;justify-content: center;margin-top: 16px;"
-        :show-size-changer="true"
-        :show-quick-jumper="true"
-        @change="onChange" /> -->
     <!-- 新增数据库数据 -->
     <a-drawer
       :width="500"
@@ -68,8 +27,11 @@
         <a-form-item label="计量单位" name="unit">
           <a-cascader v-model:value="formState.unit" :options="measurementUnit" />
         </a-form-item>
-        <a-form-item label="能耗类型" name="emissionType" :required="isRequired">
-          <a-select v-model:value="formState.emissionType" placeholder="请选择能耗类型">
+        <a-form-item label="能耗类型">
+          <a-select
+            v-model:value="formState.energyConsumptionType"
+            @change="changeEnergyType"
+            placeholder="请选择能耗类型">
             <a-select-option
               v-for="(item, index) in energyTypeOptions"
               :key="index"
@@ -230,14 +192,19 @@
           </a-col>
         </a-row> -->
       <div class="ns-form-title"><div class="title">能耗统计</div></div>
-      <a-table :columns="addColumns" :data-source="addData" size="small" :pagination="false">
+      <a-table
+        :columns="addColumns"
+        :data-source="addData"
+        size="small"
+        :pagination="false"
+        :scroll="{ y: 200 }">
         <template #bodyCell="{ column, text, record }">
           <template v-if="column.key === 'action'">
             <a-switch
-              :checked="record.age === 1 ? true : false"
+              :checked="record.type === 1 ? true : false"
               :class="{
-                'blue-background': record.age === 1 ? true : false,
-                'grey-background': record.age === 1 ? false : true,
+                'blue-background': record.type === 1 ? true : false,
+                'grey-background': record.type === 1 ? false : true,
               }"
               @click="changeSwitch(record)" />
           </template>
@@ -256,6 +223,10 @@
           上传
         </a-button>
       </a-upload>
+      <div style="display: flex; flex-direction: column">
+        <span>1.仅支持pdf格式文件或文件夹</span>
+        <span>2.文件名命名规则为【能源种类_年份】</span>
+      </div>
 
       <template #footer>
         <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
@@ -316,7 +287,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, toRaw, defineExpose } from 'vue';
+  import { ref, toRaw, defineExpose, createVNode } from 'vue';
   import type { Rule } from 'ant-design-vue/es/form';
   import { Pagination, message, Modal } from 'ant-design-vue';
   import { UploadOutlined } from '@ant-design/icons-vue';
@@ -406,6 +377,7 @@
   const tableConfig = ref({
     title: '能耗统计',
     api: energyConsumption.pageList,
+    rowSelection: null,
     params: queryParams.value,
     headerActions: [
       {
@@ -421,17 +393,62 @@
       {
         label: '导入',
         type: 'primary',
-        name: 'userImport',
-        handle: () => {},
+        name: 'energyConsumptionImport',
+        extra: {
+          api: energyConsumption.import, // 导入接口名
+          params: {
+            orgId,
+            year,
+          },
+          title: '碳排统计', // 弹窗title
+          templateName: 'energyConsumption', // 所使用的文件名称
+          indexName: '能源种类', // 匹配类型字段
+          message: [
+            { label: '1、若必填项未填写，则不能进行导入操作' },
+            { label: `2、当重复时，则更新数据。` },
+            { label: '3、数据将从模版的第五行进行导入。' },
+            { label: '4、文件导入勿超过5MB。' },
+          ],
+        },
       },
       {
         label: '导出',
         type: 'primary',
-        name: 'userExports',
+        handle: () => {
+          const exportQuery = {
+            orgId: orgId.value,
+            year: mainRef.value.nsTableRef.formParamsRef.year
+              ? mainRef.value.nsTableRef.formParamsRef.year
+              : selectYear.value.format('YYYY'),
+          };
+          const config = {
+            responseType: 'blob',
+          };
+          fetch(energyConsumption.export, exportQuery, config)
+            .then((res) => {
+              // 创建一个 URL 对象，指向图片数据的 blob
+              const url = window.URL.createObjectURL(new Blob([res]));
+              // 创建一个 <a> 标签，用于触发下载
+              const link = document.createElement('a');
+              link.href = url;
+              link.setAttribute('download', 'carbonStats.xlsx'); // 设置下载的文件名
+              document.body.appendChild(link);
+              link.click();
+
+              // 清理 URL 对象
+              window.URL.revokeObjectURL(url);
+            })
+            .catch((error) => {
+              console.error('下载失败：', error);
+            });
+        },
       },
       {
         label: '模板下载',
         type: 'primary',
+        handle: () => {
+          doWnload('/hx-ai-intelligent/asset/file/energyConsumption.xlsx');
+        },
       },
       // {
       //   label: '上传凭证',
@@ -474,53 +491,242 @@
       {
         title: '1月',
         dataIndex: 'jan',
-        // customRender: ({ text }: { text: string }) => {
-        //   return <span :style="{ color: getColor(text) }">{text}</span>;
-        // }
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.janFlag) {
+            case 1:
+              text = value.record.jan ? value.record.jan : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.jan ? value.record.jan : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '2月',
         dataIndex: 'feb',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.febFlag) {
+            case 1:
+              text = value.record.feb ? value.record.feb : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.feb ? value.record.feb : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '3月',
         dataIndex: 'mar',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.marFlag) {
+            case 1:
+              text = value.record.mar ? value.record.mar : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.mar ? value.record.mar : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '4月',
         dataIndex: 'apr',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.aprFlag) {
+            case 1:
+              text = value.record.apr ? value.record.apr : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.apr ? value.record.apr : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '5月',
         dataIndex: 'may',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.mayFlag) {
+            case 1:
+              text = value.record.may ? value.record.may : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.may ? value.record.may : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '6月',
         dataIndex: 'jun',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.junFlag) {
+            case 1:
+              text = value.record.jun ? value.record.jun : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.jun ? value.record.jun : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '7月',
         dataIndex: 'jul',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.julFlag) {
+            case 1:
+              text = value.record.jul ? value.record.jul : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.jul ? value.record.jul : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '8月',
         dataIndex: 'aug',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.augFlag) {
+            case 1:
+              text = value.record.aug ? value.record.aug : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.aug ? value.record.aug : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '9月',
         dataIndex: 'sep',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.sepFlag) {
+            case 1:
+              text = value.record.sep ? value.record.sep : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.sep ? value.record.sep : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '10月',
         dataIndex: 'oct',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.octFlag) {
+            case 1:
+              text = value.record.oct ? value.record.oct : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.oct ? value.record.oct : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '11月',
         dataIndex: 'nov',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.novFlag) {
+            case 1:
+              text = value.record.nov ? value.record.nov : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.nov ? value.record.nov : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '12月',
         dataIndex: 'dec',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.decFlag) {
+            case 1:
+              text = value.record.dec ? value.record.dec : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.dec ? value.record.dec : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
     ],
     columnActions: {
@@ -531,6 +737,7 @@
           name: 'userEdit',
           handle: (record: any) => {
             getDictList();
+            getSummaryMethod(record.id);
             visible.value = true;
             fetch(energyConsumption.findById, { id: record.id }).then((res) => {
               if (res.data.emissionType) {
@@ -588,38 +795,39 @@
     },
     rowKey: 'id',
   });
-  const getColor = (value: string | number): string => {
-    if (typeof value === 'string') {
-      switch (value) {
-        case 'active':
-          return 'green';
-        case 'inactive':
-          return 'red';
-        default:
-          return 'black';
-      }
-    } else if (typeof value === 'number') {
-      return value > 30 ? 'blue' : 'purple'; // 示例：根据年龄设置颜色
-    }
-    return 'black';
+  const doWnload = (url) => {
+    const a = document.createElement('a');
+    document.body.appendChild(a);
+    a.href = encodeURI(url);
+    //设置下载的文件名
+    // a.download = fileName.value;
+    //触发a标签的点击事件，进行下载
+    a.click();
   };
-  const getSummaryMethod = () => {
-    fetch(energyConsumption.energyAcquisition, { orgId: orgId.value }).then((res) => {
-      addData.value = res.data.records;
+  const getSummaryMethod = (id) => {
+    const queryData = {
+      orgId: orgId.value,
+    };
+    if (id) {
+      queryData.id = id;
+    }
+    fetch(energyConsumption.energyAcquisition, queryData).then((res) => {
+      addData.value = res.data;
     });
   };
   const addColumns = [
-    { title: '月份', dataIndex: 'key' },
-    { title: '汇总方式', dataIndex: 'name' },
-    { title: '操作', key: 'action', dataIndex: 'age' },
+    { title: '月份', dataIndex: 'month', align: 'center' },
+    { title: '汇总方式', dataIndex: 'access', align: 'center' },
+    { title: '操作', key: 'action', dataIndex: 'type', align: 'center' },
   ];
   const addData = ref([]);
   //开关
   const changeSwitch = (data: any) => {
-    data.age = data.age === 1 ? 0 : 1;
-    data.name = data.age === 1 ? '自动' : '手动';
+    data.type = data.type === 1 ? 0 : 1;
+    data.access = data.type === 1 ? '自动' : '手动';
     addData.value = [...addData.value];
     console.log(addData.value);
+    formState.value.summaryMethodList = addData.value;
   };
   defineExpose({
     mainRef,
@@ -648,6 +856,22 @@
     queryParams.value.pageSize = size;
     mainRef.value?.nsTableRef.reload();
   };
+  const changeEnergyType = (value) => {
+    // 获取自动采集节点的数据
+    fetch(group.queryDeviceGroupTree, { energyType: value, orgId: orgId.value }).then((res) => {
+      treeData.value = res.data;
+      treeData.value = treeData.value.map((item) => ({
+        value: item.id,
+        label: item.pointName,
+        children: item.children
+          ? item.children.map((child) => ({
+              value: child.id,
+              label: child.pointName,
+            }))
+          : [],
+      }));
+    });
+  };
   // 计算碳排切换
   const emissionType = ref();
   const changeRadio = (e) => {
@@ -778,22 +1002,6 @@
         }));
       },
     );
-    // 获取自动采集节点的数据
-    fetch(group.queryDeviceGroupTree, { energyType: 'ELECTRICITY_USAGE', orgId: orgId.value }).then(
-      (res) => {
-        treeData.value = res.data;
-        treeData.value = treeData.value.map((item) => ({
-          value: item.id,
-          label: item.pointName,
-          children: item.children
-            ? item.children.map((child) => ({
-                value: child.id,
-                label: child.pointName,
-              }))
-            : [],
-        }));
-      },
-    );
   };
   // 点击新增按钮
   const addNewData = () => {
@@ -911,13 +1119,10 @@
     const deleteId = ref(new FormData());
     deleteId.value.append('id', record.id);
     const config = {
-      headers: {
-        responseType: 'blob',
-      },
+      responseType: 'blob',
     };
     fetch(uploadPic.download, deleteId.value, config)
       .then((res) => {
-        debugger
         // 创建一个 URL 对象，指向图片数据的 blob
         const url = window.URL.createObjectURL(new Blob([res]));
         // 创建一个 <a> 标签，用于触发下载
@@ -939,14 +1144,17 @@
     selectedRowKeysSet.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;
-        link.setAttribute('download', ''); // 设置下载的文件名
+        link.setAttribute('download', '能耗统计凭证.zip'); // 设置下载的文件名
         document.body.appendChild(link);
         link.click();
 

hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/quickCalculation/index.vue

@@ -61,7 +61,11 @@
           </div>
         </template>
       </a-table> -->
-      <ns-view-list-table v-bind="tableConfig" :model="tableData" ref="mainRef" />
+      <ns-view-list-table
+        v-bind="tableConfig"
+        :model="tableData"
+        ref="mainRef"
+        :scroll="{ x: 1000 }" />
       <a-pagination
         :current="queryParams.pageNum"
         :total="total"
@@ -107,7 +111,7 @@
           <a-row>
             <a-col :span="12">
               <a-form-item ref="name">
-                <ns-input style="margin-top: 5px;" v-model:value="selectData" @change="keyChange" />
+                <ns-input style="margin-top: 5px" v-model:value="selectData" @change="keyChange" />
               </a-form-item>
             </a-col>
           </a-row>
@@ -271,7 +275,7 @@
     orgId: orgId.value,
   });
   const tableData = ref([]);
-
+  const emissionSources = ref();
   const tableConfig = ref({
     title: '排放因子库',
     api: quickCalculation.queryCarbonEmissionPage,
@@ -310,6 +314,7 @@
         title: '更新时间',
         className: 'updateTime',
         dataIndex: 'updateTime',
+        ellipsis: true,
       },
       {
         title: '启用时间',
@@ -340,6 +345,8 @@
             formState.value.dateRange = [record.startTime, record.endTime];
             formState.value.factorId = record.factorId;
             visible.value = true;
+            emissionSources.value = record.emissionSources;
+            queryData.value.emissionSources = emissionSources.value;
             getNewTable();
           },
         },
@@ -411,7 +418,11 @@
   };
   const selectData = ref();
   const keyChange = () => {
-    queryData.value.emissionSources = selectData.value;
+    if (selectData.value === '') {
+      queryData.value.emissionSources = emissionSources.value;
+    } else {
+      queryData.value.emissionSources = selectData.value;
+    }
     getNewTable();
   };
   // 点击编辑按钮