碳排管理 代码规范

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

@@ -2,16 +2,15 @@
   <div class="main">
     <div class="left">
       <div class="top">
-        <a-form style="width: 100%;margin: 0 auto;">
+        <a-form style="width: 100%; margin: 0 auto">
           <div class="ns-form-title"><div class="title">因子分类</div></div>
-          <div style="padding: 0 16px !important;width: 100%;">
+          <div style="padding: 0 16px !important; width: 100%">
             <a-row>
-              <a-col :span="24" style="margin-bottom: 16px;">
+              <a-col :span="24" style="margin-bottom: 16px">
                 <a-input-search
                   v-model:value="searchValue"
                   placeholder="请输入关键词"
-                  @search="onSearchTreeData"
-                />
+                  @search="onSearchTreeData" />
               </a-col>
             </a-row>
           </div>
@@ -25,13 +24,15 @@
           show-line
           @expand="onExpand"
           @select="onSelect"
-          style="padding: 0 16px !important;"
-        >
+          style="padding: 0 16px !important">
           <template #title="data">
-            <span v-if="data.energyType && searchValue && data.energyType.indexOf(searchValue) > -1">
+            <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>
-              {{ data.energyType.substring(data.energyType.indexOf(searchValue) + searchValue.length) }}
+              {{
+                data.energyType.substring(data.energyType.indexOf(searchValue) + searchValue.length)
+              }}
             </span>
             <span v-else>{{ data.energyType }}</span>
           </template>
@@ -61,33 +62,35 @@
         </template>
       </a-table> -->
       <ns-view-list-table v-bind="tableConfig" :model="tableData" ref="mainRef" />
-      <a-pagination 
+      <a-pagination
         :current="queryParams.pageNum"
         :total="total"
         :page-size="queryParams.pageSize"
-        style="display: flex;justify-content: center;margin-top: 16px;"
+        style="display: flex; justify-content: center; margin-top: 16px"
         :show-size-changer="true"
         :show-quick-jumper="true"
         @change="onChange" />
-        <!-- 新增/编辑 -->
-        <a-drawer
-          :width="700"
-          :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-drawer
+        :width="700"
+        :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-row>
             <a-col :span="12">
               <a-form-item ref="name" label="日期范围" name="dateRange">
-                <a-range-picker v-model:value="formState.dateRange" picker="month" valueFormat="YYYY-MM" />
+                <a-range-picker
+                  v-model:value="formState.dateRange"
+                  picker="month"
+                  valueFormat="YYYY-MM" />
               </a-form-item>
             </a-col>
             <a-col :span="12">
@@ -103,20 +106,24 @@
               </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>
-          </template>
-        </a-drawer>
+        </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>
+        </template>
+      </a-drawer>
     </div>
   </div>
 </template>
@@ -124,10 +131,13 @@
 <script lang="ts" setup>
   import { ref, watch, toRaw } from 'vue';
   import type { TreeProps } from 'ant-design-vue';
-  import { Pagination,Modal } from 'ant-design-vue';
-  import { columns,drawerColumns } 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';
+  import {
+    quickCalculation,
+    carbonEmissionFactorLibrary,
+  } from '/@/api/carbonEmissionFactorLibrary';
   defineOptions({
     energyType: 'quickCalculation', // 与页面路由name一致缓存才可生效
     components: {
@@ -137,7 +147,7 @@
   const orgId = ref('');
   const result = JSON.parse(sessionStorage.getItem('ORGID')!);
   orgId.value = result;
-  const fetch = (api, params = { orgId } ) => {
+  const fetch = (api, params = { orgId }) => {
     return http.post(api, params);
   };
   const mainRef = ref();
@@ -191,7 +201,7 @@
     for (let i = 0; i < tree.length; i++) {
       const node = tree[i];
       if (node.children) {
-        if (node.children.some(item => item.key === key)) {
+        if (node.children.some((item) => item.key === key)) {
           parentKey = node.key;
         } else if (getParentKey(key, node.children)) {
           parentKey = getParentKey(key, node.children);
@@ -211,17 +221,17 @@
     autoExpandParent.value = false;
   };
   // 被选中的树节点
-  const energyType = ref()
+  const energyType = ref();
   const onSelect = (selectedKey: string[], info: any) => {
-    selectedKeys.value = selectedKey; 
-    if(info.selected){
-      energyType.value = info.node.id
-      statsId.value = info.node.id
+    selectedKeys.value = selectedKey;
+    if (info.selected) {
+      energyType.value = info.node.id;
+      statsId.value = info.node.id;
       mainRef.value?.nsTableRef.reload();
     }
   };
 
-  watch(searchValue, value => {
+  watch(searchValue, (value) => {
     const expanded = dataList
       .map((item: TreeProps['treeData'][number]) => {
         if (item.title.indexOf(value) > -1) {
@@ -235,34 +245,33 @@
     autoExpandParent.value = true;
   });
   // 查询因子分类树数据
-  const onSearchTreeData = () => {
-  };
-  const statsId = ref()
+  const onSearchTreeData = () => {};
+  const statsId = ref();
   // 获取因子分类树数据
   const getTreeData = () => {
     fetch(quickCalculation.carbonQuickTree).then((res) => {
-      gData.value = res.data
-      energyType.value = gData.value[0].children[0].id
-      statsId.value = gData.value[0].children[0].id
+      gData.value = res.data;
+      energyType.value = gData.value[0].children[0].id;
+      statsId.value = gData.value[0].children[0].id;
       mainRef.value?.nsTableRef.reload();
     });
   };
-  getTreeData()
+  getTreeData();
   // 列表数据
-  const total = ref<number>()
+  const total = ref<number>();
   const queryParams = ref({
     pageNum: 1,
     pageSize: 10,
-    orgId: orgId.value
-  })
+    orgId: orgId.value,
+  });
   const tableData = ref([]);
-  
+
   const tableConfig = ref({
     title: '排放因子库',
     api: quickCalculation.queryCarbonEmissionPage,
     params: {
       orgId,
-      energyType
+      energyType,
     },
     headerActions: [
       {
@@ -270,8 +279,8 @@
         name: 'userAdd',
         type: 'primary',
         handle: () => {
-          visible.value = true
-          getNewTable()
+          visible.value = true;
+          getNewTable();
         },
       },
     ],
@@ -320,12 +329,12 @@
           name: 'userEdit',
           handle: (record: any) => {
             selectedRowKeys.value = [record.factorId];
-            formState.value.id = record.id
-            formState.value.emissionFactors = record.emissionFactors
+            formState.value.id = record.id;
+            formState.value.emissionFactors = record.emissionFactors;
             formState.value.dateRange = [record.startTime, record.endTime];
-            formState.value.factorId = record.factorId
-            visible.value = true
-            getNewTable()
+            formState.value.factorId = record.factorId;
+            visible.value = true;
+            getNewTable();
           },
         },
         {
@@ -342,13 +351,13 @@
   });
   // 获取列表数据
   const getTableList = () => {
-    fetch(quickCalculation.queryCarbonEmissionPage,queryParams.value).then((res) => {
-      tableData.value = res.data.records
-      total.value = res.data.total
+    fetch(quickCalculation.queryCarbonEmissionPage, queryParams.value).then((res) => {
+      tableData.value = res.data.records;
+      total.value = res.data.total;
     });
   };
   // 分页器
-  const onChange = (pageNumber: number,size: number) => {
+  const onChange = (pageNumber: number, size: number) => {
     queryParams.value.pageNum = pageNumber;
     queryParams.value.pageSize = size;
     mainRef.value?.nsTableRef.reload();
@@ -357,9 +366,9 @@
   const formRef = ref();
   const labelCol = { span: 6 };
   const wrapperCol = { span: 18 };
-  const formState = ref({})
+  const formState = ref({});
   const visible = ref(false);
-  
+
   // 定义form表单的必填
   const rules: Record<string, Rule[]> = {
     dateRange: [{ required: true, message: '请选择日期范围', trigger: 'change' }],
@@ -367,65 +376,65 @@
   };
   // 点击新增按钮
   const addNewData = () => {
-    visible.value = true
-    getNewTable()
+    visible.value = true;
+    getNewTable();
   };
   // 获取新增页面的列表
   const selectedRowKeys = ref([]);
   const onSelectionChange = (selectedKeys, selectedRows) => {
     selectedRowKeys.value = selectedKeys;
-    formState.value.emissionFactors = selectedRows[0].emissionFactors
-    formState.value.factorId = selectedRows[0].id
+    formState.value.emissionFactors = selectedRows[0].emissionFactors;
+    formState.value.factorId = selectedRows[0].id;
   };
   const queryData = ref({
     orgId: orgId.value,
     pageNum: 1,
-    pageSize: 999
-  })
-  const newTableData = ref([])
+    pageSize: 999,
+  });
+  const newTableData = ref([]);
   const getNewTable = () => {
-    fetch(carbonEmissionFactorLibrary.getTableList,queryData.value).then((res) => {
-      newTableData.value = res.data.records
+    fetch(carbonEmissionFactorLibrary.getTableList, queryData.value).then((res) => {
+      newTableData.value = res.data.records;
     });
   };
   // 点击编辑按钮
-  const editData = (record) =>{
+  const editData = (record) => {
     selectedRowKeys.value = [record.factorId];
-    formState.value.id = record.id
-    formState.value.emissionFactors = record.emissionFactors
+    formState.value.id = record.id;
+    formState.value.emissionFactors = record.emissionFactors;
     formState.value.dateRange = [record.startTime, record.endTime];
-    formState.value.factorId = record.factorId
-    visible.value = true
-    getNewTable()
+    formState.value.factorId = record.factorId;
+    visible.value = true;
+    getNewTable();
   };
   // 点击确定提交
   const onSubmit = () => {
     formRef.value
       .validate()
       .then(() => {
-        formState.value.statsId = statsId.value
-        formState.value.startTime = formState.value.dateRange[0]
-        formState.value.endTime = formState.value.dateRange[1]
+        formState.value.statsId = statsId.value;
+        formState.value.startTime = formState.value.dateRange[0];
+        formState.value.endTime = formState.value.dateRange[1];
         console.log('values', formState, toRaw(formState));
-        if(formState.value.id){
-          fetch(quickCalculation.update,formState.value).then((res) => {
-            visible.value = false
+        if (formState.value.id) {
+          fetch(quickCalculation.update, formState.value).then((res) => {
+            visible.value = false;
             selectedRowKeys.value = [];
-            formState.value = {}
+            formState.value = {};
             formRef.value.resetFields();
             mainRef.value?.nsTableRef.reload();
           });
-        }else{
-          fetch(quickCalculation.creat,formState.value).then((res) => {
-            visible.value = false
+        } else {
+          fetch(quickCalculation.creat, formState.value).then((res) => {
+            visible.value = false;
             selectedRowKeys.value = [];
-            formState.value = {}
+            formState.value = {};
             formRef.value.resetFields();
             mainRef.value?.nsTableRef.reload();
           });
         }
       })
-      .catch(error => {
+      .catch((error) => {
         console.log('error', error);
       });
   };
@@ -438,9 +447,9 @@
       okType: 'primary',
       cancelText: '取消',
       onOk() {
-        fetch(quickCalculation.del , {id : record.id }).then((res) => {
+        fetch(quickCalculation.del, { id: record.id }).then((res) => {
           message.success('操作成功！');
-          getTableList()
+          getTableList();
         });
       },
       onCancel() {
@@ -452,7 +461,7 @@
   const onClose = () => {
     visible.value = false;
     selectedRowKeys.value = [];
-    formState.value = {}
+    formState.value = {};
     formRef.value.resetFields();
   };
 </script>
@@ -474,9 +483,9 @@
 
     display: flex;
     flex-direction: column;
-    .top{
+    .top {
       position: relative;
-      .addTreeNode{
+      .addTreeNode {
         width: 100%;
         padding: 16px;
         position: absolute;
@@ -499,7 +508,7 @@
   .top {
     overflow: auto;
   }
-  .ns-form-title{
+  .ns-form-title {
     font-weight: bold;
     user-select: text;
     padding: 16px;
@@ -507,7 +516,7 @@
     padding-bottom: 10px;
     border-bottom: 1px solid #e9e9e9;
   }
-  .title{
+  .title {
     text-align: left;
     height: 32px;
     line-height: 32px;
@@ -525,17 +534,17 @@
     height: 13px;
     width: 3px;
     border-radius: 1px;
-    background-color: #2778FF;
+    background-color: #2778ff;
   }
   :deep(.ant-table-title) {
     display: flex;
     height: 100%;
     align-items: center;
   }
-  .ns-table-title{
+  .ns-table-title {
     font-weight: bold;
   }
-  .buttonGroup{
+  .buttonGroup {
     margin-left: 1vw;
     width: 5vw;
     display: flex;
@@ -547,4 +556,4 @@
   td.column-money {
     text-align: right !important;
   }
-</style>
+</style>