From 27de4ad24ebc4c44f3cbd24d4dab61eceb09cf83 Mon Sep 17 00:00:00 2001
From: fks-xuxinyue <2822784518@qq.com>
Date: Mon, 29 Jul 2024 15:13:30 +0800
Subject: [PATCH] taskid:111 remark:"commit"

---
 .../src/router/carbonEmissionManage.ts             |  20 ++
 .../carbonAssets/carbonAssetsDetail/index.vue      | 361 ++++++++++++++++++++-
 .../carbonEmissionManage/carbonAssets/index.vue    |  20 +-
 .../carbonInventoryCheck/fillInPage/index.vue      | 163 +---------
 .../carbonEmissionManage/carbonPlanning/index.vue  |  21 ++
 5 files changed, 426 insertions(+), 159 deletions(-)
 create mode 100644 hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue

diff --git a/hx-ai-intelligent/src/router/carbonEmissionManage.ts b/hx-ai-intelligent/src/router/carbonEmissionManage.ts
index 46bf216..9adcfc0 100644
--- a/hx-ai-intelligent/src/router/carbonEmissionManage.ts
+++ b/hx-ai-intelligent/src/router/carbonEmissionManage.ts
@@ -85,6 +85,26 @@ const equipment = {
         },
       ],
     },
+    {
+      path: 'carbonPlanning',
+      name: 'CarbonPlanning',
+      meta: { title: '碳规划', hideChildren: true, icon: 'tanpaiguanli' },
+      component: Base,
+      redirect: { name: 'CarbonPlanningIndex' },
+      children: [
+        {
+          path: 'index',
+          name: 'CarbonPlanningIndex',
+          // component: () => import('/nerv-lib/saas/view/menuManage/index.vue'),
+          component: () => import('/@/view/carbonEmissionManage/carbonPlanning/index.vue'),
+          meta: {
+            title: '碳规划',
+            keepAlive: false,
+            // backApi: [],
+          },
+        },
+      ],
+    },
   ],
 };
 export default equipment;
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 aa5ea2e..d682c68 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index.vue
@@ -1,12 +1,147 @@
 <template>
-  <div class="detailTable">
+  <div class="search">
+    <a-card style="border-radius: 12px">
+      <div class="ns-form-title">
+        <div class="title">查询</div>
+        <div class="operation">
+          <a-button type="primary" @click="changeParentData"> 返回 </a-button>
+        </div>
+      </div>
+      <a-form layout="inline" :model="searchFormState">
+        <a-form-item>
+          <a-input
+            style="width: 200px"
+            v-model:value="searchFormState.value"
+            placeholder="请输入账户类型" />
+        </a-form-item>
+        <a-form-item>
+          <a-select
+            ref="select"
+            v-model:value="searchFormState.value1"
+            style="width: 200px"
+            placeholder="请选择交易类型"
+            @focus="focus"
+            @change="handleChange">
+            <a-select-option value="jack">Jack</a-select-option>
+            <a-select-option value="lucy">Lucy</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item>
+          <a-date-picker
+            style="width: 200px"
+            v-model:value="searchFormState.value5"
+            placeholder="请选择账期"
+            picker="year" />
+        </a-form-item>
+        <a-form-item>
+          <a-button type="primary">查询</a-button>
+          <a-button html-type="submit" style="margin-left: 6px">重置</a-button>
+        </a-form-item>
+      </a-form>
+    </a-card>
   </div>
-  <div class="total"> </div>
+  <div style="display: flex; margin-top: 20px; height: calc(84% - 20px)">
+    <div class="detailTable">
+      <a-card>
+        <div class="ns-form-title">
+          <div class="title">交易明细</div>
+          <div class="operation">
+            <a-button type="primary">新增</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>
+          </div>
+        </div>
+        <a-table
+          :columns="columns"
+          :data-source="data"
+          @change="onChange"
+          :rowSelection="{
+            selectedRowKeys: selectedRowKeys,
+            onChange: onSelectionChange,
+          }"
+          :scroll="{ x: 1500, y: 400 }">
+          <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>
+        </a-table>
+      </a-card>
+    </div>
+    <div class="total">
+      <a-table :columns="totalColumns" :data-source="totalData" bordered :pagination="false">
+        <template #bodyCell="{ column, text }">
+          <template v-if="column.dataIndex === 'name'">
+            <a>{{ text }}</a>
+          </template>
+        </template>
+      </a-table>
+    </div>
+  </div>
+  <!-- 新增报告弹窗 -->
+  <a-drawer
+    :width="500"
+    :visible="visible"
+    :body-style="{ paddingBottom: '80px' }"
+    :footer-style="{ textAlign: 'right' }"
+    destroyOnClose
+    @close="onClose">
+    <a-form
+      ref="formRef"
+      :model="formState"
+      :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>
+      <a-form-item ref="name" label="交易类型" name="reportName">
+        <a-cascader
+          v-model:value="formState.value"
+          :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>
+      <a-form-item ref="name" label="交易数量" name="reportName">
+        <a-input v-model:value="formState.reportName" placeholder="请输入交易数量" />
+      </a-form-item>
+      <a-form-item ref="name" label="发生金额" name="reportName">
+        <a-input v-model:value="formState.reportName" placeholder="请输入发生金额" />
+      </a-form-item>
+      <a-form-item ref="name" label="交易对象" name="reportName">
+        <a-input v-model:value="formState.reportName" placeholder="请输入交易对象" />
+      </a-form-item>
+      <a-upload
+        v-model:file-list="fileList"
+        name="file"
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        :headers="headers"
+        @change="handleChange">
+        <a-button>
+          <upload-outlined></upload-outlined>
+          点击上传凭证
+        </a-button>
+      </a-upload>
+    </a-form>
+    <template #footer>
+      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
+      <a-button type="primary" @click="onSubmit">确定</a-button>
+    </template>
+  </a-drawer>
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref, defineEmits } from 'vue';
   import { http } from '/nerv-lib/util/http';
+  import { UploadOutlined } from '@ant-design/icons-vue';
+  import type { UploadChangeParam } from 'ant-design-vue';
   defineOptions({
     energyType: 'carbonAssetsDetail', // 与页面路由name一致缓存才可生效
   });
@@ -16,13 +151,229 @@
   const fetch = (api, params = { orgId }) => {
     return http.post(api, params);
   };
+  // 查询部分变量
+  const searchFormState = ref({});
+  // 详情部分变量
+  const selectedRowKeys = ref([]);
+  const onSelectionChange = (selectedKeys, selectedRows) => {
+    selectedRowKeys.value = selectedKeys;
+  };
+  const columns = [
+    {
+      title: '序号',
+      customRender: (text: any) => {
+        return text.index + 1;
+      },
+    },
+    {
+      title: '资产类别',
+      dataIndex: 'name',
+    },
+    {
+      title: '交易方式',
+      dataIndex: 'name',
+    },
+    {
+      title: '交易日期',
+      dataIndex: 'age',
+      sorter: (a, b) => a.age - b.age,
+    },
+    {
+      title: '本期收入(tCO2)',
+      dataIndex: 'age',
+      sorter: (a, b) => a.age - b.age,
+    },
+    {
+      title: '本期支出(tCO2)',
+      dataIndex: 'age',
+      sorter: (a, b) => a.age - b.age,
+    },
+    {
+      title: '发生金额(￥）',
+      dataIndex: 'address',
+    },
+    {
+      title: '交易对象',
+      dataIndex: 'address',
+    },
+    {
+      title: '更新人',
+      dataIndex: 'address',
+    },
+    {
+      title: '更新时间',
+      dataIndex: 'address',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      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 visible = ref(false);
+  const formState = ref({});
+  const formRef = ref();
+  const labelCol = { span: 5 };
+  const wrapperCol = { span: 19 };
+  const options: CascaderProps['options'] = [
+    {
+      value: 'zhejiang',
+      label: 'Zhejiang',
+      children: [
+        {
+          value: 'hangzhou',
+          label: 'Hangzhou',
+          children: [
+            {
+              value: 'xihu',
+              label: 'West Lake',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      value: 'jiangsu',
+      label: 'Jiangsu',
+      children: [
+        {
+          value: 'nanjing',
+          label: 'Nanjing',
+          children: [
+            {
+              value: 'zhonghuamen',
+              label: 'Zhong Hua Men',
+            },
+          ],
+        },
+      ],
+    },
+  ];
+  // 定义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' }],
+  };
+  // 关闭新增抽屉
+  const onClose = () => {
+    visible.value = false;
+    formState.value = {};
+    formRef.value.resetFields();
+  };
+  // 统计表格
+  const totalColumns = [
+    {
+      title: '统计类型',
+      dataIndex: 'name',
+    },
+    {
+      title: '小计',
+      dataIndex: 'name',
+    },
+    {
+      title: '合计',
+      dataIndex: 'name',
+    },
+  ];
+
+  const totalData = [
+    {
+      key: '1',
+      total: '0',
+      name: 'John',
+      money: '￥300,000.00',
+      address: 'New York No. 1 Lake Park',
+    },
+    {
+      key: '2',
+      name: 'Jim',
+      money: '￥1,256,000.00',
+      address: 'London No. 1 Lake Park',
+    },
+  ];
+  // 点击返回
+  const emit = defineEmits(['change-data']);
+  const changeParentData = () => {
+    emit('change-data', true);
+  };
 </script>
 
 <style lang="less" scoped>
+  .ns-form-title {
+    font-weight: bold;
+    user-select: text;
+    padding-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .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;
+  }
+  :deep(.ant-card-body) {
+    padding: 16px;
+  }
+  .search {
+    height: 16%;
+  }
   .detailTable {
-    height: 80%;
+    width: 65%;
+    margin-right: 20px;
+    height: 100%;
+    background: white;
+    border-radius: 12px;
   }
   .total {
-    height: 20%;
+    width: calc(35% - 20px);
+    height: 100%;
+    background: white;
+    border-radius: 12px;
   }
 </style>
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/index.vue
index df55258..be634e7 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/index.vue
@@ -8,7 +8,11 @@
         <div class="moneyTitle">全国碳账户估值（CNY）</div>
         <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">300,000.00</div>
         <div class="moneyDetail"
-          ><img width="34px" height="34px" src="../../../../src/icon/carbonAssetsSearch-1.svg"
+          ><img
+            @click="viewDetail"
+            width="34px"
+            height="34px"
+            src="../../../../src/icon/carbonAssetsSearch-1.svg"
         /></div>
       </div>
       <div class="title">
@@ -163,7 +167,7 @@
     </a-card>
   </div>
   <div class="detail" v-else>
-    <carbonAssetsDetail />
+    <carbonAssetsDetail @change-data="updateData" />
   </div>
 </template>
 
@@ -174,6 +178,14 @@
     energyType: 'carbonAssets', // 与页面路由name一致缓存才可生效
   });
   const homePage = ref(true);
+  // 点击跳转详情
+  const viewDetail = () => {
+    homePage.value = false;
+  };
+  // 填报页点击返回
+  const updateData = (type) => {
+    homePage.value = type;
+  };
 </script>
 
 <style lang="less" scoped>
@@ -316,4 +328,8 @@
       }
     }
   }
+  .detail {
+    height: 100%;
+    background: #f0f1f5;
+  }
 </style>
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/fillInPage/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/fillInPage/index.vue
index f7ba68f..8e888df 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/fillInPage/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/fillInPage/index.vue
@@ -1010,9 +1010,6 @@
     isClickedPftj.value = false;
     isClickedTplx.value = true;
     getCarbonFlowDirection();
-    setTimeout(() => {
-      drawEcharts();
-    }, 500);
   };
   // 获取碳排流向数据
   const queryFlowDirection = ref({
@@ -1021,9 +1018,14 @@
     year: props.year,
     categoryId: categoryId.value,
   });
+  const linksData = ref([])
+  const datalist = ref([])
   const getCarbonFlowDirection = () => {
     fetch(carbonInventoryCheck.carbonFlowDirection, queryFlowDirection.value).then((res) => {
       console.log(res);
+      linksData.value = res.data[0]
+      datalist.value = res.data[1]
+      drawEcharts();
     });
   };
   // 获取排放统计数据
@@ -1154,133 +1156,6 @@
   let chartInstance: echarts.ECharts | null = null;
   const drawEcharts = () => {
     chartInstance = echarts.init(tplxChart.value);
-    let datalist = [
-      {
-        name: '公共平台',
-      },
-      {
-        name: '系统0000',
-      },
-      {
-        name: '系统0011',
-      },
-      {
-        name: '系统0022',
-      },
-      {
-        name: '系统0033',
-      },
-      {
-        name: '系统0044',
-      },
-      {
-        name: '系统0055',
-      },
-      {
-        name: '系统11',
-      },
-      {
-        name: '系统22',
-      },
-      {
-        name: '系统33',
-      },
-      {
-        name: '系统44',
-      },
-      {
-        name: '系统55',
-      },
-      {
-        name: '系统66',
-      },
-      {
-        name: '系统77',
-      },
-      {
-        name: '系统88',
-      },
-      {
-        name: '系统99',
-      },
-    ];
-    let linksData = [
-      {
-        source: '公共平台',
-        target: '系统0000',
-        value: 1044305,
-      },
-      {
-        source: '公共平台',
-        target: '系统0011',
-        value: 651527,
-      },
-      {
-        source: '公共平台',
-        target: '系统0022',
-        value: 651527,
-      },
-      {
-        source: '公共平台',
-        target: '系统0033',
-        value: 486710,
-      },
-      {
-        source: '公共平台',
-        target: '系统0044',
-        value: 212670,
-      },
-      {
-        source: '公共平台',
-        target: '系统0055',
-        value: 210400,
-      },
-      {
-        source: '系统0011',
-        target: '系统11',
-        value: 645246,
-      },
-      {
-        source: '系统0022',
-        target: '系统22',
-        value: 513275,
-      },
-      {
-        source: '系统0011',
-        target: '系统33',
-        value: 282986,
-      },
-      {
-        source: '系统0011',
-        target: '系统44',
-        value: 118655,
-      },
-      {
-        source: '系统0022',
-        target: '系统55',
-        value: 105989,
-      },
-      {
-        source: '系统0022',
-        target: '系统66',
-        value: 95100,
-      },
-      {
-        source: '系统0033',
-        target: '系统77',
-        value: 87796,
-      },
-      {
-        source: '系统0044',
-        target: '系统88',
-        value: 47658,
-      },
-      {
-        source: '系统0055',
-        target: '系统99',
-        value: 243660,
-      },
-    ];
     let Color = [
       '#61FEFF',
       '#937FE6',
@@ -1337,18 +1212,17 @@
     ];
     let itemStyleColor = [];
     let labelSource = [];
-    for (let i = 0; i < datalist.length; i++) {
-      datalist[i].label = {
+    for (let i = 0; i < datalist.value.length; i++) {
+      datalist.value[i].label = {
         normal: {
           position: sourceLabel[i],
         },
       };
       labelSource.push(sourceLabel[i]);
     }
-    for (let d = 0; d < datalist.length; d++) {
-      datalist[d].itemStyle = {
+    for (let d = 0; d < datalist.value.length; d++) {
+      datalist.value[d].itemStyle = {
         normal: {
-          // color: Color[d]
           color: {
             type: 'linear',
             x: 0,
@@ -1369,28 +1243,13 @@
           },
         },
       };
-      itemStyleColor.push(datalist[d]);
+      itemStyleColor.push(datalist.value[d]);
     }
     const option = {
       backgroundColor: 'transparent',
       tooltip: {
         trigger: 'item',
         triggerOn: 'mousemove',
-        formatter: function (params) {
-          if (params.name == '公共平台') {
-            return ' 公共平台 ';
-          } else {
-            let value = params.data.value;
-            if (!value && value !== 0) return 0;
-            let str = value.toString();
-            let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
-            if (params.data.source == '公共平台') {
-              return params.data.target + ' : ' + str.replace(reg, '$1,');
-            } else {
-              return params.data.source + ' : ' + str.replace(reg, '$1,');
-            }
-          }
-        },
       },
       series: [
         {
@@ -1404,7 +1263,7 @@
           nodeWidth: 25,
           focusNodeAdjacency: 'allEdges',
           data: itemStyleColor,
-          links: linksData,
+          links: linksData.value,
           label: {
             normal: {
               color: '#fff',
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue
new file mode 100644
index 0000000..fb91423
--- /dev/null
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
+    <a-tab-pane key="1" tab="全部"> </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>
+    <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>
+  import { ref } from 'vue';
+  defineOptions({
+    name: 'carbonPlanning', // 与页面路由name一致缓存才可生效
+  });
+  const activeKey = ref('1');
+  // 切换tab页的回调
+  const handleTabChange = (key) => {
+    console.log('Tab changed:', key);
+  };
+</script>