taskid:084 remark:'commit'

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

@@ -17,19 +17,22 @@
           </div>
         </a-form>
         <a-tree
+          v-if="gData && gData.length > 0"
           :expanded-keys="expandedKeys"
           :auto-expand-parent="autoExpandParent"
           :tree-data="gData"
+          show-line
           @expand="onExpand"
+          @select="onSelect"
           style="padding: 0 16px !important;"
         >
-          <template #title="{ title }">
-            <span v-if="title.indexOf(searchValue) > -1">
-              {{ title.substring(0, title.indexOf(searchValue)) }}
+          <template #title="data">
+            <span v-if="data.energyType && searchValue && data.energyType.indexOf(searchValue) > -1">
+              {{ data.energyType.substring(0, data.energyType.indexOf(searchValue)) }}
               <span style="color: #f50">{{ searchValue }}</span>
-              {{ title.substring(title.indexOf(searchValue) + searchValue.length) }}
+              {{ data.energyType.substring(data.energyType.indexOf(searchValue) + searchValue.length) }}
             </span>
-            <span v-else>{{ title }}</span>
+            <span v-else>{{ data.energyType }}</span>
           </template>
         </a-tree>
       </div>
@@ -66,7 +69,7 @@
         @change="onChange" />
         <!-- 新增/编辑 -->
         <a-drawer
-          :width="500"
+          :width="700"
           :visible="visible"
           :body-style="{ paddingBottom: '80px' }"
           :footer-style="{ textAlign: 'right' }"
@@ -79,35 +82,34 @@
             :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-row>
+            <a-col :span="12">
+              <a-form-item ref="name" label="能源种类" name="energyType">
+                <a-range-picker v-model:value="formState.energyType" picker="month" style="width:200px;" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item ref="name" label="排放因子" name="energyType">
+                <ns-input v-model:value="formState.emissionFactors" disabled />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item ref="name" label="关键词">
+                <ns-input v-model:value="selectData" />
+              </a-form-item>
+            </a-col>
+          </a-row>
           </a-form>
+          <a-table 
+            :columns="drawerColumns" 
+            :data-source="newTableData" 
+            bordered
+            rowKey="id"
+            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectionChange, type: 'radio' }"
+            :pagination="false">
+          </a-table>
           <template #footer>
             <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
             <a-button type="primary" @click="onSubmit">确定</a-button>
@@ -118,11 +120,12 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
+  import { ref, watch, toRaw } from 'vue';
   import type { TreeProps } from 'ant-design-vue';
-  import { Pagination } from 'ant-design-vue';
-  import { columns } from '../config';
+  import { Pagination,Modal } from 'ant-design-vue';
+  import { columns,drawerColumns } from '../config';
   import { http } from '/nerv-lib/util/http';
+  import { quickCalculation,carbonEmissionFactorLibrary } from '/@/api/carbonEmissionFactorLibrary';
   defineOptions({
     energyType: 'quickCalculation', // 与页面路由name一致缓存才可生效
     components: {
@@ -203,6 +206,13 @@
     expandedKeys.value = keys;
     autoExpandParent.value = false;
   };
+  // 被选中的树节点
+  const onSelect = (selectedKeys: string[], info: any) => {
+    if(info.selected){
+      queryParams.value.energyType = info.node.id
+      getTableList()
+    }
+  };
 
   watch(searchValue, value => {
     const expanded = dataList
@@ -217,57 +227,113 @@
     searchValue.value = value;
     autoExpandParent.value = true;
   });
+  // 查询因子分类树数据
+  const onSearchTreeData = () => {
+  };
+  // 获取因子分类树数据
+  const getTreeData = () => {
+    fetch(quickCalculation.carbonQuickTree).then((res) => {
+      gData.value = res.data
+    });
+  };
+  getTreeData()
   // 列表数据
   const total = ref<number>()
   const queryParams = ref({
     pageNum: 1,
     pageSize: 10,
+    orgId: orgId.value,
   })
-  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 tableData = ref([]);
+  // 获取列表数据
+  const getTableList = () => {
+    fetch(quickCalculation.queryCarbonEmissionPage,queryParams.value).then((res) => {
+      tableData.value = res.data.records
+      total.value = res.data.total
+    });
+  };
+  getTableList()
   // 分页器
   const onChange = (pageNumber: number,size: number) => {
     queryParams.value.pageNum = pageNumber;
     queryParams.value.pageSize = size;
-    // getTableList()
+    getTableList()
   };
   // 新增/编辑
   const formRef = ref();
-  const labelCol = { span: 5 };
-  const wrapperCol = { span: 19 };
+  const labelCol = { span: 6 };
+  const wrapperCol = { span: 18 };
   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 addNewData = () => {
+    visible.value = true
+    getNewTable()
+  };
+  // 获取新增页面的列表
+  const selectedRowKeys = ref([]);
+  const onSelectionChange = (selectedKeys, selectedRows) => {
+    selectedRowKeys.value = selectedKeys;
+    formState.value.emissionFactors = selectedRows[0].emissionFactors
+  };
+  const queryData = ref({
+    orgId: orgId.value,
+    pageNum: 1,
+    pageSize: 999
+  })
+  const newTableData = ref([])
+  const getNewTable = () => {
+    fetch(carbonEmissionFactorLibrary.getTableList,queryData.value).then((res) => {
+      newTableData.value = res.data.records
+    });
   };
   // 点击编辑按钮
   const editData = (record) =>{
     visible.value = true
   };
+  // 点击确定提交
+  const onSubmit = () => {
+    formRef.value
+      .validate()
+      .then(() => {
+        console.log('values', formState, toRaw(formState));
+        fetch(quickCalculation.creat,formState.value).then((res) => {
+          console.log(res);
+          
+        });
+      })
+      .catch(error => {
+        console.log('error', error);
+      });
+  };
+  // 删除数据
+  const delData = (record) => {
+    Modal.confirm({
+      title: '警告',
+      content: '确定要删除吗?',
+      okText: '确定',
+      okType: 'primary',
+      cancelText: '取消',
+      onOk() {
+        fetch(quickCalculation.del , {id : record.id }).then((res) => {
+          message.success('操作成功！');
+          getTableList()
+        });
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+  };
   // 关闭新增抽屉
   const onClose = () => {
     visible.value = false;
+    selectedRowKeys.value = [];
     formRef.value.resetFields();
   };
 </script>