taskid:084 remark:'commit'

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

@@ -1,16 +1,14 @@
-<!-- @format -->
-
 <template>
   <div class="main">
     <div class="left">
       <div class="top">
         <a-form style="width: 100%;margin: 0 auto;">
-          <div class="ns-form-title"><span>排放分类</span></div>
+          <div class="ns-form-title"><span>因子分类</span></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="selectTreeDataValue"
+                  v-model:value="searchValue"
                   placeholder="请输入关键词"
                   @search="onSearchTreeData"
                 />
@@ -19,118 +17,129 @@
           </div>
         </a-form>
         <a-tree
-          v-if="gData && gData.length > 0"
-          class="draggable-tree"
-          style="padding: 0 16px !important;"
-          draggable
-          show-line
-          checkable
-          block-node
-          :tree-data="gData"
-          :checkedKeys="checkedTreeNodeKeys"
-          :selectedKeys="selectedKeys"
-          @dragenter="onDragEnter"
-          @drop="onDrop"
-          @check="checkTreeNode"
-          @select="onSelect"
           :expanded-keys="expandedKeys"
           :auto-expand-parent="autoExpandParent"
-          @expand="onExpand">
-           <template #title="{ emissionName }">
-            <span v-if="emissionName && selectTreeDataValue && emissionName.indexOf(selectTreeDataValue) > -1">
-              {{ emissionName.substring(0, emissionName.indexOf(selectTreeDataValue)) }}
-              <span style="color: #f50">{{ selectTreeDataValue }}</span>
-              {{ emissionName.substring(emissionName.indexOf(selectTreeDataValue) + selectTreeDataValue.length) }}
+          :tree-data="gData"
+          @expand="onExpand"
+          style="padding: 0 16px !important;"
+        >
+          <template #title="{ title }">
+            <span v-if="title.indexOf(searchValue) > -1">
+              {{ title.substring(0, title.indexOf(searchValue)) }}
+              <span style="color: #f50">{{ searchValue }}</span>
+              {{ title.substring(title.indexOf(searchValue) + searchValue.length) }}
             </span>
-            <span v-else>{{ emissionName }}</span>
+            <span v-else>{{ title }}</span>
           </template>
         </a-tree>
       </div>
     </div>
     <div class="right">
-      <ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" :scroll="{ x: 2000}"/>
+      <a-table 
+        :columns="columns" 
+        :data-source="tableData" 
+        bordered
+        :pagination="false">
+        <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>
+          <div class="ns-table-title"><span>排放因子库</span></div>
+          <div class="buttonGroup">
+            <a-button type="primary" @click="addNewData">新增</a-button>
+          </div>
+        </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-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="energyType">
+              <a-input v-model:value="formState.energyType" placeholder="请输入能源种类" />
+            </a-form-item>
+            <a-form-item label="计量单位" name="unit">
+              <a-cascader v-model:value="formState.unit" :options="options" />
+            </a-form-item>
+            <a-form-item label="自动采集节点" name="collectionNode">
+              <a-tree-select
+                v-model:value="formState.collectionNode"
+                :tree-line="true"
+                :tree-data="treeData"
+                tree-node-filter-prop="title"
+              >
+              </a-tree-select>
+            </a-form-item>
+            <a-form-item label="计算碳排" name="isComputeCarbon">
+              <a-radio-group v-model:value="formState.isComputeCarbon" @change="changeRadio">
+                <a-radio :value="0">是</a-radio>
+                <a-radio :value="1">否</a-radio>
+              </a-radio-group>
+            </a-form-item>
+            <a-form-item label="排放类型" name="emissionType">
+              <a-select v-model:value="formState.emissionType" placeholder="请选择排放类型">
+                <a-select-option v-for="(item, index) in emissionTypeDic" :key="index" :value="item.cnValue">
+                  {{ item.cnValue }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </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>
     </div>
-    <!-- 新增树节点 -->
-    <ns-modal :visible="treeNodeAdd" :title="operationTree" @ok="handleOk" @cancel="handleCancel">
-      <ns-input
-        v-model:value="addTreeNode"
-        class="input"
-        placeholder="请输入排放类型"/>
-    </ns-modal>
-    <!-- 新增数据库数据 -->
-    <a-drawer
-      :width="500"
-      :visible="visible"
-      :body-style="{ paddingBottom: '80px' }"
-      :footer-style="{ textAlign: 'right' }"
-      destroyOnClose
-      @close="onClose">
-      <ns-form
-        ref="formRef"
-        :model="formData"
-        class="form"
-        :wrapperCol="{ span: 20 }"
-        formLayout="vertical" />
-      <template #footer>
-        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
-        <a-button type="primary" @click="onEdit">确定</a-button>
-      </template>
-    </a-drawer>
   </div>
 </template>
+
 <script lang="ts" setup>
-  import { Modal } from 'ant-design-vue';
-  import { computed, createVNode, defineComponent, reactive, ref, watchEffect,watch } from 'vue';
+  import { ref, watch } from 'vue';
+  import type { TreeProps } from 'ant-design-vue';
+  import { Pagination } from 'ant-design-vue';
+  import { columns } from '../config';
   import { http } from '/nerv-lib/util/http';
-  import { NsMessage, NsModal } from '/nerv-lib/component';
-  import { carbonEmissionFactorLibrary } from '/@/api/carbonEmissionFactorLibrary';
-  import type {
-    AntTreeNodeDragEnterEvent,
-    AntTreeNodeDropEvent,
-    TreeProps,
-  } from 'ant-design-vue/es/tree';
-import { log } from 'node:console';
-
-  defineOptions({ name: 'QuickCalculation' });
-  const selectTreeDataValue = ref<string>('');
-  const mainRef = ref();
-  const data = reactive({});
-  let formData = ref({});
-  const formRef = ref();
-  const visible = ref(false);
-  const searchValue = ref<string>('');
-  const searchValue2 = ref<string>('');
-  const disabled = ref(false);
-  const treeNodeAdd = ref<boolean>(false);
-  const operationTree = ref<string>('新增');
-
-  const opMap: any = ref({
-    type: 'add',
-    fuc: () => {},
-    record: {},
+  defineOptions({
+    energyType: 'quickCalculation', // 与页面路由name一致缓存才可生效
+    components: {
+      'a-pagination': Pagination,
+    },
   });
-  watchEffect(() => {
-    disabled.value = opMap.value.type === 'edit';
-  });
-  const casData = ref([]);
-  const treeData = ref([]);
-  const userAuthList = ref([]);
   const orgId = ref('');
   const result = JSON.parse(sessionStorage.getItem('ORGID')!);
   orgId.value = result;
-  const dynamicDisabled = computed(() => {
-    return formRef.value?.validateResult && userAuthList.value?.length;
-  });
-  const fetch = (api, params = { orgId }) => {
+  const fetch = (api, params = { orgId } ) => {
     return http.post(api, params);
   };
-
-  // 树结构
+  // 数结构
   const x = 3;
   const y = 2;
   const z = 1;
   const genData: TreeProps['treeData'] = [];
-  const checkedTreeNodeKeys = ref<string[]>(['0-0']);
 
   const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => {
     const preKey = _preKey || '0';
@@ -154,70 +163,7 @@ import { log } from 'node:console';
     });
   };
   generateData(z);
-  type TreeDataItem = TreeProps['treeData'][number];
-  const gData = ref<TreeProps['treeData']>(genData);
-  const onDragEnter = (info: AntTreeNodeDragEnterEvent) => {
-    console.log(info);
-    // expandedKeys 需要展开时
-    // expandedKeys.value = info.expandedKeys;
-  };
 
-  const onDrop = (info: AntTreeNodeDropEvent) => {
-    console.log(info);
-    const dropKey = info.node.key;
-    const dragKey = info.dragNode.key;
-    const dropPos = info.node.pos.split('-');
-    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
-    const loop = (data: TreeProps['treeData'], key: string | number, callback: any) => {
-      data.forEach((item, index) => {
-        if (item.key === key) {
-          return callback(item, index, data);
-        }
-        if (item.children) {
-          return loop(item.children, key, callback);
-        }
-      });
-    };
-    const data = [...gData.value];
-
-    // Find dragObject
-    let dragObj: TreeDataItem;
-    loop(data, dragKey, (item: TreeDataItem, index: number, arr: TreeProps['treeData']) => {
-      arr.splice(index, 1);
-      dragObj = item;
-    });
-    if (!info.dropToGap) {
-      // Drop on the content
-      loop(data, dropKey, (item: TreeDataItem) => {
-        item.children = item.children || [];
-        /// where to insert 示例添加到头部，可以是随意位置
-        item.children.unshift(dragObj);
-      });
-    } else if (
-      (info.node.children || []).length > 0 && // Has children
-      info.node.expanded && // Is expanded
-      dropPosition === 1 // On the bottom gap
-    ) {
-      loop(data, dropKey, (item: TreeDataItem) => {
-        item.children = item.children || [];
-        // where to insert 示例添加到头部，可以是随意位置
-        item.children.unshift(dragObj);
-      });
-    } else {
-      let ar: TreeProps['treeData'] = [];
-      let i = 0;
-      loop(data, dropKey, (_item: TreeDataItem, index: number, arr: TreeProps['treeData']) => {
-        ar = arr;
-        i = index;
-      });
-      if (dropPosition === -1) {
-        ar.splice(i, 0, dragObj);
-      } else {
-        ar.splice(i + 1, 0, dragObj);
-      }
-    }
-    gData.value = data;
-  };
   const dataList: TreeProps['treeData'] = [];
   const generateList = (data: TreeProps['treeData']) => {
     for (let i = 0; i < data.length; i++) {
@@ -249,13 +195,16 @@ import { log } from 'node:console';
     return parentKey;
   };
   const expandedKeys = ref<(string | number)[]>([]);
+  const searchValue = ref<string>('');
   const autoExpandParent = ref<boolean>(true);
+  const gData = ref<TreeProps['treeData']>(genData);
 
   const onExpand = (keys: string[]) => {
     expandedKeys.value = keys;
     autoExpandParent.value = false;
   };
-  watch(selectTreeDataValue, value => {
+
+  watch(searchValue, value => {
     const expanded = dataList
       .map((item: TreeProps['treeData'][number]) => {
         if (item.title.indexOf(value) > -1) {
@@ -265,273 +214,64 @@ import { log } from 'node:console';
       })
       .filter((item, i, self) => item && self.indexOf(item) === i);
     expandedKeys.value = expanded;
-    selectTreeDataValue.value = value;
+    searchValue.value = value;
     autoExpandParent.value = true;
   });
-  // 筛选树结构中的数据
-  const onSearchTreeData = (selectTreeDataValue: string) => {
-    console.log('use value', selectTreeDataValue);
-    console.log('or use this.value', value.value);
+  // 列表数据
+  const total = ref<number>()
+  const queryParams = ref({
+    pageNum: 1,
+    pageSize: 10,
+  })
+  const tableData = [
+    {
+      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',
+    },
+  ];
+  // 分页器
+  const onChange = (pageNumber: number,size: number) => {
+    queryParams.value.pageNum = pageNumber;
+    queryParams.value.pageSize = size;
+    // getTableList()
   };
-  // 点击数据点的复选框
-  const checkedIds = ref([])
-  const emissionType = ref()
-  const checkTreeNode = (checkedKeys, info) => {
-    checkedTreeNodeKeys.value = checkedKeys
-    checkedIds.value = []
-    info.checkedNodes.forEach(item=>{
-      checkedIds.value.push(item.id)
-    })
-    sessionStorage.setItem('checkedTreeNode', checkedIds.value);
-    emissionType.value = checkedIds.value.join(',')
-    mainRef.value?.nsTableRef.reload();
-  }
-  // 新增/编辑树节点点击确定
-  const addTreeNode =ref()
-  const handleOk = (e: MouseEvent) => {
-    editTreeNode.value.emissionName = addTreeNode.value
-    http.post(carbonEmissionFactorLibrary.creat,editTreeNode.value).then(() => {
-      getOrgTree()
-      NsMessage.success('操作成功');
-      addTreeNode.value = ''
-      treeNodeAdd.value = false;
-    });
+  // 新增/编辑
+  const formRef = ref();
+  const labelCol = { span: 5 };
+  const wrapperCol = { span: 19 };
+  const formState = ref({})
+  const visible = ref(false);
+  
+  // 定义form表单的必填
+  const rules: Record<string, Rule[]> = {
+    energyType: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
+    isComputeCarbon: [{ required: true, message: '请选择是否计算碳排', trigger: 'change' }]
   };
-  const handleCancel = () => {
-    addTreeNode.value = ''
-    treeNodeAdd.value = false;
+  // 点击编辑按钮
+  const editData = (record) =>{
+    visible.value = true
   };
-  // 获取排放分类树
-  const getOrgTree = (params?) => {
-    fetch(carbonEmissionFactorLibrary.getCarbonFactorTree, params).then((res) => {
-      gData.value = res.data
-      // 找到匹配的节点数据
-      const selectedNodes = [];
-      checkedTreeNodeKeys.value.forEach(key => {
-        const [parentId, childId] = key.split('-').map(Number);
-        if (parentId >= 0 && childId >= 0 && gData.value[parentId]?.children?.[childId]) {
-          selectedNodes.push(gData.value[parentId]);
-        }
-      });
-      // 获取默认选中节点的所有id
-      getDefaultIds(selectedNodes)
-    });
-  };
-  const defaultIds = ref([])
-  const getDefaultIds = (selectedNodes) => {
-    selectedNodes.forEach(items => {
-      defaultIds.value.push(items.id)
-      if(items.children){
-        getDefaultIds(items.children)
-      }
-    })
-    emissionType.value = defaultIds.value.join(',')
-    checkedIds.value = defaultIds.value
-    sessionStorage.setItem('checkedTreeNode', checkedIds.value);
-  }
-  getOrgTree();
-  // 被选中的树节点
-  const editTreeNode = ref({})
-  const onSelect = (selectedKeys: string[], info: any) => {
-    if(info.selected){
-      editTreeNode.value = {
-        id:info.selectedNodes[0].id,
-        level:info.selectedNodes[0].level,
-        dataNumber:info.selectedNodes[0].dataNumber,
-        sortNumber:info.selectedNodes[0].sortNumber,
-        parentEmissionId:info.selectedNodes[0].parentEmissionId,
-      }
-    }
-  };
-
-  const onSearch = () => {
-    console.log(searchValue.value);
-    getOrgTree({ orgName: searchValue.value, orgId });
-  };
-
-  const tableFetch = (params) => {
-    console.log(params, 'sdfasfasdfasdfasdf');
-
-    tableConfig.value.params = {
-      ...mainRef.value.params,
-      ...params,
-    };
-
-    setTimeout(() => {
-      mainRef.value?.nsTableRef.reload();
-    }, 100);
-  };
-
-  const handleSelect = (selectedKeys: any, info: any) => {
-    fetch(carbonEmissionFactorLibrary.queryDeptTree, { orgId: info.node?.orgInfo.orgId }).then((res) => {
-      treeData2.value = res.data;
-    });
-    tableFetch({ orgId: info.node?.orgInfo.orgId });
-  };
-
-
+  // 关闭新增抽屉
   const onClose = () => {
     visible.value = false;
-    formData.value = {};
-    userAuthList.value.splice(0);
+    formRef.value.resetFields();
   };
-
-  const onEdit = () => {
-    formRef.value?.triggerSubmit().then(() => {
-      console.log(formData.value, 'formData.value');
-      // if (!userAuthList.value.length) {
-      //   NsMessage.error('请添加用户权限');
-      //   return;
-      // }
-
-      opMap.value.fuc &&
-        opMap.value.fuc({ ...formData.value });
-    });
-  };
-  const tableConfig = ref({
-    title: '数据库',
-    api: carbonEmissionFactorLibrary.getTableList,
-    params: {
-      orgId,
-      emissionType
-    },
-    headerActions: [
-      {
-        label: '新增',
-        name: 'userAdd',
-        type: 'primary',
-        handle: () => {
-          opMap.value.type = 'add';
-          setTimeout(() => {
-            formData.value = {
-              carbonEmissionPrefix:'t',
-              numberOfReferences:'10'
-            };
-            userAuthList.value.splice(0);
-          });
-          opMap.value.fuc = (formData: any) => {
-            formData.emissionType = formData.emissionType[formData.emissionType.length - 1]
-            return http.post(carbonEmissionFactorLibrary.creatOrUpdate, formData).then(() => {
-              mainRef.value?.nsTableRef.reload();
-              visible.value = false;
-              NsMessage.success('操作成功');
-            });
-          };
-          visible.value = true;
-        },
-      },
-      {
-        label: '导入',
-        type: 'primary',
-        name: 'userImport',
-        handle: () => {},
-      },
-      {
-        label: '导出',
-        type: 'primary',
-        name: 'userExports',
-      },
-      {
-        label: '批量删除',
-        type: 'primary',
-        name: 'userBatchDel',
-        dynamicDisabled: (data: any) => {
-          return data.list.length === 0;
-        },
-        confirm: true,
-        isReload: true,
-        isClearCheck: true,
-        api: carbonEmissionFactorLibrary.del,
-        dynamicParams: { ids: 'id[]' },
-      },
-    ],
-    columns: [
-      {
-        title: 'id',
-        customRender: (text: any) => {
-          return text.index + 1;
-        },
-      },
-      {
-        title: '排放源',
-        dataIndex: 'emissionSources',
-      },
-      {
-        title: '排放类型',
-        dataIndex: 'emissionTypeColumn',
-      },
-      {
-        title: '排放气体',
-        dataIndex: 'emissionGas',
-      },
-      {
-        title: '排放环节',
-        dataIndex: 'emissionProcess',
-      },
-      {
-        title: '排放因子',
-        dataIndex: 'emissionFactors',
-      },
-      {
-        title: '排放因子单位',
-        dataIndex: 'emissionFactorUnits',
-      },
-      {
-        title: '数据来源',
-        dataIndex: 'dataSources',
-      },
-      {
-        title: '数据库',
-        dataIndex: 'carbonDatabase',
-      },
-      {
-        title: '参考文献',
-        dataIndex: 'reference',
-      },
-      {
-        title: '引用数量',
-        dataIndex: 'numberOfReferences',
-      },
-    ],
-    columnActions: {
-      title: '操作',
-      actions: [
-        {
-          label: '编辑',
-          name: 'userEdit',
-          handle: (record: any) => {
-            userAuthList.value.splice(0);
-            setTimeout(() => {
-              console.log(record.id);
-              
-              http.post(carbonEmissionFactorLibrary.findById,{ id: record.id } ).then((res) => {
-                formData.value = res.data;
-              });
-            }, 10);
-            opMap.value.type = 'edit';
-            opMap.value.fuc = (formData: any) => {
-              return http.post(carbonEmissionFactorLibrary.creatOrUpdate, formData).then(() => {
-                mainRef.value?.nsTableRef.reload();
-                visible.value = false;
-                NsMessage.success('操作成功');
-              });
-            };
-            visible.value = true;
-          },
-        },
-        {
-          label: '删除',
-          name: 'userDelete',
-          dynamicParams: { ids: 'id[]' },
-          confirm: true,
-          isReload: true,
-          api: carbonEmissionFactorLibrary.del,
-        },
-      ],
-    },
-    rowKey: 'id',
-  });
 </script>
+
 <style lang="less" scoped>
   .main {
     background-color: @ns-content-bg;
@@ -540,13 +280,10 @@ import { log } from 'node:console';
   }
   .left {
     width: 300px;
-    // max-height: calc(100vh - 96px);
     margin-right: @ns-gap;
     min-width: fit-content;
     > div {
-      border-radius: @ns-border-radius;
       background-color: @white;
-      // box-shadow: @ns-content-box-shadow;
       flex: 1;
     }
 
@@ -565,12 +302,14 @@ import { log } from 'node:console';
   .right {
     flex: 1;
     min-width: 0;
+    height: 100%;
+    background: #ffffff;
+  }
+  ::v-deep .ant-table-container{
+    padding: 0px 16px;
   }
   .top {
     overflow: auto;
-    // height: 50%;
-    // border-bottom: 5px solid rgb(229, 235, 240);
-    // overflow-y: auto;
   }
   .ns-form-title{
     font-weight: bold;
@@ -580,4 +319,24 @@ import { log } from 'node:console';
     padding-bottom: 10px;
     border-bottom: 1px solid #e9e9e9;
   }
+  ::v-deep .ant-table-title{
+    display: flex;
+    height: 100%;
+    align-items: center;
+  }
+  .ns-table-title{
+    font-weight: bold;
+  }
+  .buttonGroup{
+    margin-left: 1vw;
+    width: 5vw;
+    display: flex;
+    justify-content: space-around;
+  }
 </style>
+<style scoped>
+  th.column-money,
+  td.column-money {
+    text-align: right !important;
+  }
+</style>