From 99e2e803ef14b7db57b10f82c8feb8f9d642de2f Mon Sep 17 00:00:00 2001
From: fks-xuxinyue <2822784518@qq.com>
Date: Tue, 30 Jul 2024 15:19:19 +0800
Subject: [PATCH] taskid:114 remark:'commit'

---
 .../src/api/carbonEmissionFactorLibrary.ts         |   6 +
 .../carbonAssets/carbonAssetsDetail/index.vue      | 180 ++++++++-----
 .../carbonPlanning/all/index.vue                   | 283 +++++++++++++++++++++
 .../carbonEmissionManage/carbonPlanning/index.vue  |   5 +-
 4 files changed, 408 insertions(+), 66 deletions(-)
 create mode 100644 hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue

diff --git a/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts b/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
index 67568c2..247efed 100644
--- a/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
+++ b/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
@@ -60,3 +60,9 @@ export enum carbonInventoryCheck {
   // 碳排流向
   carbonFlowDirection = '/carbon-smart/api/carbon/inventory/carbonFlowDirection',
 }
+// 碳资产-详情
+export enum carbonAssetsDetail {
+  carbonDetailsList = '/carbon-smart/api/carbon/trade/details/carbonDetailsList',
+  createOrUpdate = '/carbon-smart/api/carbon/trade/details/createOrUpdate',
+  delete = '/carbon-smart/api/carbon/trade/details/delete',
+}
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 d682c68..28267ba 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index.vue
@@ -7,17 +7,17 @@
           <a-button type="primary" @click="changeParentData"> 返回 </a-button>
         </div>
       </div>
-      <a-form layout="inline" :model="searchFormState">
+      <a-form layout="inline">
         <a-form-item>
           <a-input
             style="width: 200px"
-            v-model:value="searchFormState.value"
+            v-model:value="queryParams.accountType"
             placeholder="请输入账户类型" />
         </a-form-item>
         <a-form-item>
           <a-select
             ref="select"
-            v-model:value="searchFormState.value1"
+            v-model:value="queryParams.transactionType"
             style="width: 200px"
             placeholder="请选择交易类型"
             @focus="focus"
@@ -29,7 +29,7 @@
         <a-form-item>
           <a-date-picker
             style="width: 200px"
-            v-model:value="searchFormState.value5"
+            v-model:value="queryParams.transactionDate"
             placeholder="请选择账期"
             picker="year" />
         </a-form-item>
@@ -46,7 +46,7 @@
         <div class="ns-form-title">
           <div class="title">交易明细</div>
           <div class="operation">
-            <a-button type="primary">新增</a-button>
+            <a-button type="primary" @click="addDetail">新增</a-button>
             <a-button type="primary" style="margin-left: 6px">导入</a-button>
             <a-button type="primary" style="margin-left: 6px">导出</a-button>
             <a-button type="primary" style="margin-left: 6px">批量删除</a-button>
@@ -60,8 +60,12 @@
             selectedRowKeys: selectedRowKeys,
             onChange: onSelectionChange,
           }"
-          :scroll="{ x: 1500, y: 400 }">
+          :scroll="{ x: 1500, y: 400 }"
+          :pagination="false">
           <template #bodyCell="{ column, text, record }">
+            <template v-if="column.dataIndex === 'accountType'">
+              <span v-if="record.accountType">{{ record.accountType.label }}</span>
+            </template>
             <template v-if="column.key === 'action'">
               <span>
                 <a @click="editData(record)">编辑</a>
@@ -71,6 +75,14 @@
             </template>
           </template>
         </a-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-card>
     </div>
     <div class="total">
@@ -97,26 +109,26 @@
       :rules="rules"
       :label-col="labelCol"
       :wrapper-col="wrapperCol">
-      <a-form-item ref="name" label="账户类型" name="reportName">
-        <a-input v-model:value="formState.reportName" placeholder="请输入账户类型" />
+      <a-form-item ref="name" label="账户类型" name="accountType">
+        <a-input v-model:value="formState.accountType" placeholder="请输入账户类型" />
       </a-form-item>
-      <a-form-item ref="name" label="交易类型" name="reportName">
+      <a-form-item ref="name" label="交易类型" name="transactionType">
         <a-cascader
-          v-model:value="formState.value"
+          v-model:value="formState.transactionType"
           :options="options"
           placeholder="请选择交易类型" />
       </a-form-item>
-      <a-form-item ref="name" label="交易日期" name="reportName">
-        <a-date-picker v-model:value="formState.value1" />
+      <a-form-item ref="name" label="交易日期" name="transactionDate">
+        <a-date-picker v-model:value="formState.transactionDate" valueFormat="YYYY-MM-DD" />
       </a-form-item>
-      <a-form-item ref="name" label="交易数量" name="reportName">
-        <a-input v-model:value="formState.reportName" placeholder="请输入交易数量" />
+      <a-form-item ref="name" label="交易数量" name="transactionQuantity">
+        <a-input v-model:value="formState.transactionQuantity" placeholder="请输入交易数量" />
       </a-form-item>
-      <a-form-item ref="name" label="发生金额" name="reportName">
-        <a-input v-model:value="formState.reportName" placeholder="请输入发生金额" />
+      <a-form-item ref="name" label="发生金额" name="amountIncurredValue">
+        <a-input v-model:value="formState.amountIncurredValue" placeholder="请输入发生金额" />
       </a-form-item>
-      <a-form-item ref="name" label="交易对象" name="reportName">
-        <a-input v-model:value="formState.reportName" placeholder="请输入交易对象" />
+      <a-form-item ref="name" label="交易对象" name="tradingPartner">
+        <a-input v-model:value="formState.tradingPartner" placeholder="请输入交易对象" />
       </a-form-item>
       <a-upload
         v-model:file-list="fileList"
@@ -138,12 +150,17 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, defineEmits } from 'vue';
+  import { ref, defineEmits, toRaw } from 'vue';
   import { http } from '/nerv-lib/util/http';
   import { UploadOutlined } from '@ant-design/icons-vue';
   import type { UploadChangeParam } from 'ant-design-vue';
+  import { Pagination, Modal, message } from 'ant-design-vue';
+  import { carbonAssetsDetail } from '/@/api/carbonEmissionFactorLibrary';
   defineOptions({
     energyType: 'carbonAssetsDetail', // 与页面路由name一致缓存才可生效
+    components: {
+      'a-pagination': Pagination,
+    },
   });
   const orgId = ref('');
   const result = JSON.parse(sessionStorage.getItem('ORGID')!);
@@ -151,13 +168,24 @@
   const fetch = (api, params = { orgId }) => {
     return http.post(api, params);
   };
-  // 查询部分变量
-  const searchFormState = ref({});
   // 详情部分变量
   const selectedRowKeys = ref([]);
   const onSelectionChange = (selectedKeys, selectedRows) => {
     selectedRowKeys.value = selectedKeys;
   };
+  const total = ref<number>();
+  const queryParams = ref({
+    pageNum: 1,
+    pageSize: 10,
+    orgId: orgId.value,
+  });
+  // 获取左侧列表数据
+  const getDetailList = () => {
+    fetch(carbonAssetsDetail.carbonDetailsList, queryParams.value).then((res) => {
+      data.value = res.data.records;
+    });
+  };
+  getDetailList();
   const columns = [
     {
       title: '序号',
@@ -167,42 +195,42 @@
     },
     {
       title: '资产类别',
-      dataIndex: 'name',
+      dataIndex: 'accountType',
     },
     {
       title: '交易方式',
-      dataIndex: 'name',
+      dataIndex: 'transactionTypeName',
     },
     {
       title: '交易日期',
-      dataIndex: 'age',
-      sorter: (a, b) => a.age - b.age,
+      dataIndex: 'transactionDate',
+      sorter: (a, b) => a.transactionDate - b.transactionDate,
     },
     {
       title: '本期收入(tCO2)',
-      dataIndex: 'age',
-      sorter: (a, b) => a.age - b.age,
+      dataIndex: 'income',
+      sorter: (a, b) => a.income - b.income,
     },
     {
       title: '本期支出(tCO2)',
-      dataIndex: 'age',
-      sorter: (a, b) => a.age - b.age,
+      dataIndex: 'expenditure',
+      sorter: (a, b) => a.expenditure - b.expenditure,
     },
     {
       title: '发生金额(￥）',
-      dataIndex: 'address',
+      dataIndex: 'amountIncurredValue',
     },
     {
       title: '交易对象',
-      dataIndex: 'address',
+      dataIndex: 'tradingPartner',
     },
     {
       title: '更新人',
-      dataIndex: 'address',
+      dataIndex: 'updateUser',
     },
     {
       title: '更新时间',
-      dataIndex: 'address',
+      dataIndex: 'updateTime',
     },
     {
       title: '操作',
@@ -210,33 +238,36 @@
       width: 130,
     },
   ];
-  const data = [
-    {
-      key: '1',
-      name: 'John Brown',
-      age: 32,
-      address: 'New York No. 1 Lake Park',
-    },
-    {
-      key: '2',
-      name: 'Jim Green',
-      age: 42,
-      address: 'London No. 1 Lake Park',
-    },
-    {
-      key: '3',
-      name: 'Joe Black',
-      age: 32,
-      address: 'Sidney No. 1 Lake Park',
-    },
-    {
-      key: '4',
-      name: 'Jim Red',
-      age: 32,
-      address: 'London No. 2 Lake Park',
-    },
-  ];
-
+  const data = ref([]);
+  const editData = (record) => {
+    visible.value = true;
+    formState.value.id = record.id;
+    formState.value = record;
+  };
+  const delData = (record) => {
+    Modal.confirm({
+      title: '警告',
+      content: '确定要删除吗?',
+      okText: '确定',
+      okType: 'primary',
+      cancelText: '取消',
+      onOk() {
+        fetch(carbonAssetsDetail.delete, { id: record.id }).then((res) => {
+          message.success('操作成功！');
+          getDetailList();
+        });
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+  };
+  // 分页器
+  const onChange = (pageNumber: number, size: number) => {
+    queryParams.value.pageNum = pageNumber;
+    queryParams.value.pageSize = size;
+    getDetailList();
+  };
   // 新增相关数据
   const visible = ref(false);
   const formState = ref({});
@@ -277,13 +308,32 @@
       ],
     },
   ];
+  // 点击新增
+  const addDetail = () => {
+    visible.value = true;
+  };
+  const onSubmit = () => {
+    formRef.value
+      .validate()
+      .then(() => {
+        console.log('values', formState, toRaw(formState));
+        fetch(carbonAssetsDetail.createOrUpdate, formState.value).then((res) => {
+          message.success('操作成功！');
+          getDetailList();
+        });
+      })
+      .catch((error) => {
+        console.log('error', error);
+      });
+  };
   // 定义form表单的必填
   const rules: Record<string, Rule[]> = {
-    reportName: [{ required: true, message: '请输入报告名称', trigger: 'change' }],
-    reportYear: [{ required: true, message: '请选择报告年度', trigger: 'change' }],
-    genericStandard: [{ required: true, message: '请输入适用标准', trigger: 'change' }],
-    reportPeriod: [{ required: true, message: '请选择排放类型', trigger: 'change' }],
-    reportScope: [{ required: true, message: '请选择报告范围', trigger: 'change' }],
+    accountType: [{ required: true, message: '请输入账户类型', trigger: 'change' }],
+    transactionType: [{ required: true, message: '请选择交易类型', trigger: 'change' }],
+    transactionDate: [{ required: true, message: '请选择交易日期', trigger: 'change' }],
+    transactionQuantity: [{ required: true, message: '请输入交易数量', trigger: 'change' }],
+    amountIncurredValue: [{ required: true, message: '请输入发生金额', trigger: 'change' }],
+    tradingPartner: [{ required: true, message: '请输入交易对象', trigger: 'change' }],
   };
   // 关闭新增抽屉
   const onClose = () => {
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue
new file mode 100644
index 0000000..61338b2
--- /dev/null
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue
@@ -0,0 +1,283 @@
+<template>
+  <div class="totalContant">
+    <div class="ns-form-title">
+      <div class="title">
+        <span>查询</span>
+        <a-date-picker v-if="selectedTime" style="margin-left: 5%" :value="value5" picker="year" />
+        <a-date-picker v-else style="margin-left: 5%" :value="value5" picker="month" />
+      </div>
+      <div class="operation">
+        <div class="month" :style="monthStyles" @click="changeToMonth"><span>月</span></div>
+        <div class="year" :style="yearStyles" @click="changeToYear"><span>年</span></div>
+      </div>
+    </div>
+    <div class="contant">
+      <div class="chartsPart">
+        <div class="electricityConsumption" ref="ydlChart"></div>
+      </div>
+      <div class="tablePart">
+        <a-table :columns="columns" :data-source="data" bordered :pagination="false"> </a-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { Dayjs } from 'dayjs';
+  import * as echarts from 'echarts';
+  defineOptions({
+    energyType: 'all', // 与页面路由name一致缓存才可生效
+  });
+  const value5 = ref<Dayjs>();
+  // 年/月切换
+  const monthStyles = ref('background: #f2f2f2');
+  const yearStyles = ref('background: #2778ff');
+  const selectedTime = ref(true);
+  const changeToMonth = () => {
+    monthStyles.value = 'background: #2778ff';
+    yearStyles.value = 'background: #f2f2f2';
+    columns.value[2].title = '月份';
+    columns.value[2].dataIndex = 'month';
+    selectedTime.value = false;
+  };
+  const changeToYear = () => {
+    monthStyles.value = 'background: #f2f2f2';
+    yearStyles.value = 'background: #2778ff';
+    columns.value[2].title = '年份';
+    columns.value[2].dataIndex = 'year';
+    selectedTime.value = true;
+  };
+  // 用电量
+  const ydlChart = ref(null);
+  let chartInstance: echarts.ECharts | null = null;
+  const drawEcharts = () => {
+    chartInstance = echarts.init(ydlChart.value);
+    const handred = 100;
+    let point = 66;
+    const option = {
+      backgroundColor: 'transparent',
+      title: [
+        {
+          text: point + '%',
+          x: 'center',
+          y: '35%',
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+          },
+        },
+        {
+          text: '用电量预算达成率',
+          x: 'center',
+          y: '85%',
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+          },
+        },
+      ],
+      tooltip: {
+        formatter: function (params) {
+          return params.name + '：' + params.percent + ' %';
+        },
+      },
+      series: [
+        {
+          name: 'circle',
+          type: 'pie',
+          clockWise: true,
+          radius: ['40%', '50%'],
+          center: ['50%', '40%'],
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+            },
+          },
+          hoverAnimation: false,
+          data: [
+            {
+              value: point,
+              name: '占比',
+              itemStyle: {
+                normal: {
+                  color: '#4FADFD',
+                  label: {
+                    show: false,
+                  },
+                  labelLine: {
+                    show: false,
+                  },
+                },
+              },
+            },
+            {
+              name: '剩余',
+              value: handred - point,
+              itemStyle: {
+                normal: {
+                  color: '#E1E8EE',
+                },
+              },
+            },
+          ],
+        },
+      ],
+    };
+    chartInstance = echarts.init(ydlChart.value);
+    chartInstance.setOption(option);
+  };
+
+  setTimeout(() => {
+    drawEcharts();
+  }, 500);
+  // 表格
+  const columns = ref([
+    {
+      title: '序号',
+      customRender: (text: any) => {
+        return text.index + 1;
+      },
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '年份',
+      dataIndex: 'name',
+    },
+    {
+      title: '计量单位',
+      dataIndex: 'name',
+    },
+    {
+      title: '总实际用量',
+      dataIndex: 'money',
+    },
+    {
+      title: '总预算量',
+      dataIndex: 'address',
+    },
+    {
+      title: '基准值',
+      dataIndex: 'address',
+    },
+    {
+      title: '节能量',
+      dataIndex: 'address',
+    },
+    {
+      title: '预算达成率',
+      dataIndex: 'address',
+    },
+  ]);
+
+  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',
+    },
+  ];
+</script>
+
+<style lang="less" scoped>
+  .totalContant {
+    height: 100%;
+    padding: 12px;
+  }
+  :deep(.ant-tabs-content) {
+    padding: 16px;
+  }
+  .ns-form-title {
+    font-weight: bold;
+    user-select: text;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 5vh;
+
+    .title {
+      text-align: left;
+      height: 32px;
+      line-height: 32px;
+      font-weight: bold;
+      user-select: text;
+      position: relative;
+      padding-left: 9px;
+      width: 50%;
+    }
+    .title::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 13px;
+      width: 3px;
+      border-radius: 1px;
+      background-color: #2778ff;
+    }
+    .operation {
+      display: flex;
+      margin-right: 10px;
+      font-weight: 400;
+      height: 70%;
+      cursor: pointer;
+      width: 10%;
+    }
+    .month {
+      width: 70px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // background: #f2f2f2;
+    }
+    .year {
+      width: 70px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // background: #2778ff;
+    }
+  }
+  .contant {
+    width: 100%;
+    height: calc(100% - 5vh);
+    .chartsPart {
+      width: 100%;
+      height: 35%;
+      .electricityConsumption {
+        width: 19%;
+        height: 100%;
+        background: rgba(39, 120, 255, 0.05);
+      }
+    }
+    .tablePart {
+      height: calc(65% - 20px);
+      margin-top: 20px;
+    }
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue
index fb91423..ae4e8c1 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue
@@ -1,6 +1,8 @@
 <template>
   <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
-    <a-tab-pane key="1" tab="全部"> </a-tab-pane>
+    <a-tab-pane key="1" tab="全部"> 
+      <all />
+    </a-tab-pane>
     <a-tab-pane key="2" tab="用电量" force-render> </a-tab-pane>
     <a-tab-pane key="3" tab="用水量"> </a-tab-pane>
     <a-tab-pane key="4" tab="供水量"> </a-tab-pane>
@@ -10,6 +12,7 @@
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
+  import all from './all/index.vue';
   defineOptions({
     name: 'carbonPlanning', // 与页面路由name一致缓存才可生效
   });