From 0d0a26f9c6af83e04909412dea29921f16ad1b2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期四, 14 八月 2025 17:16:07 +0800
Subject: [PATCH] 重写用电区域,设备能耗添加用电区域字段

---
 src/views/energyManagement/energyArea/index.vue               |  387 ++++++++++++++++++++++--------------------
 src/views/energyManagement/energyPower/components/formDia.vue |   55 +++++
 src/api/energyManagement/index.js                             |   97 +++++-----
 3 files changed, 304 insertions(+), 235 deletions(-)

diff --git a/src/api/energyManagement/index.js b/src/api/energyManagement/index.js
index 629c17c..f2c5494 100644
--- a/src/api/energyManagement/index.js
+++ b/src/api/energyManagement/index.js
@@ -4,117 +4,124 @@
 // 璁惧鑳借��-鍒嗛〉鏌ヨ
 export function equipmentEnergyListPage(query) {
   return request({
-    url: '/equipmentEnergyConsumption/listPage',
-    method: 'get',
+    url: "/equipmentEnergyConsumption/listPage",
+    method: "get",
     params: query,
-  })
+  });
 }
 // -鑳芥簮瓒嬪娍-鍒嗛〉鏌ヨ
 export function listPageByTrend(query) {
   return request({
-    url: '/equipmentEnergyConsumption/listPageByTrend',
-    method: 'get',
+    url: "/equipmentEnergyConsumption/listPageByTrend",
+    method: "get",
     params: query,
-  })
+  });
 }
 // 鍖哄煙-鍒嗛〉鏌ヨ
 export function areaListPage(query) {
   return request({
-    url: '/electricityConsumptionArea/listPage',
-    method: 'get',
+    url: "/electricityConsumptionArea/listPage",
+    method: "get",
     params: query,
-  })
+  });
+}
+
+// 鍖哄煙-鏍�
+export function areaListTree(query) {
+  return request({
+    url: "/electricityConsumptionArea/list",
+    method: "get",
+    params: query,
+  });
 }
 // 鏃堕棿鍛ㄦ湡-鍒嗛〉鏌ヨ
 export function periodListPage(query) {
   return request({
-    url: '/energyPeriod/listPage',
-    method: 'get',
+    url: "/energyPeriod/listPage",
+    method: "get",
     params: query,
-  })
+  });
 }
 
 // 璁惧鑳借��-鍒犻櫎
 export function equipmentEnergyDelete(query) {
   return request({
-    url: '/equipmentEnergyConsumption/delete',
-    method: 'delete',
+    url: "/equipmentEnergyConsumption/delete",
+    method: "delete",
     data: query,
-  })
+  });
 }
 // 鍖哄煙-鍒犻櫎
 export function areaDelete(query) {
   return request({
-    url: '/electricityConsumptionArea/delete',
-    method: 'delete',
+    url: "/electricityConsumptionArea/delete",
+    method: "delete",
     data: query,
-  })
+  });
 }
 // 鏃堕棿鍛ㄦ湡-鍒犻櫎
 export function periodDelete(query) {
   return request({
-    url: '/energyPeriod/delete',
-    method: 'delete',
+    url: "/energyPeriod/delete",
+    method: "delete",
     data: query,
-  })
+  });
 }
-
 
 // 璁惧鑳借��-鏂板
 export function equipmentEnergyAdd(query) {
   return request({
-    url: '/equipmentEnergyConsumption/add',
-    method: 'post',
+    url: "/equipmentEnergyConsumption/add",
+    method: "post",
     data: query,
-  })
+  });
 }
 // 鍖哄煙-鏂板
 export function areaAdd(query) {
   return request({
-    url: '/electricityConsumptionArea/add',
-    method: 'post',
+    url: "/electricityConsumptionArea/add",
+    method: "post",
     data: query,
-  })
+  });
 }
 
 // 鏃堕棿鍛ㄦ湡-鏂板
 export function periodAdd(query) {
   return request({
-    url: '/energyPeriod/add',
-    method: 'post',
+    url: "/energyPeriod/add",
+    method: "post",
     data: query,
-  })
+  });
 }
 // 璁惧鑳借��-淇敼
 export function equipmentEnergyUpdate(query) {
   return request({
-    url: '/equipmentEnergyConsumption/update',
-    method: 'post',
+    url: "/equipmentEnergyConsumption/update",
+    method: "post",
     data: query,
-  })
+  });
 }
 //鍖哄煙-淇敼
 export function areaUpdate(query) {
   return request({
-    url: '/electricityConsumptionArea/update',
-    method: 'post',
+    url: "/electricityConsumptionArea/update",
+    method: "post",
     data: query,
-  })
+  });
 }
 // 鏃堕棿鍛ㄦ湡-淇敼
 export function periodUpdate(query) {
   return request({
-    url: '/energyPeriod/update',
-    method: 'post',
+    url: "/energyPeriod/update",
+    method: "post",
     data: query,
-  })
+  });
 }
-
 
 // 璁惧涓嬫媺妗嗘煡璇�
 export function deviceList(query) {
   return request({
-    url: '/equipmentEnergyConsumption/deviceList',
-    method: 'get',
-  })
-}
\ No newline at end of file
+    url: "/equipmentEnergyConsumption/deviceList",
+    method: "get",
+  });
+}
diff --git a/src/views/energyManagement/energyArea/index.vue b/src/views/energyManagement/energyArea/index.vue
index 25ce083..63feff8 100644
--- a/src/views/energyManagement/energyArea/index.vue
+++ b/src/views/energyManagement/energyArea/index.vue
@@ -2,39 +2,72 @@
   <div class="app-container product-view">
     <div class="left">
       <div>
-        <el-input v-model="search" style="width: 210px" placeholder="杈撳叆鍏抽敭瀛楄繘琛屾悳绱�" @change="searchFilter"
-          @clear="searchFilter" clearable prefix-icon="Search" />
-        <el-button type="primary" @click="openProDia('add')" style="margin-left: 10px">鏂板鐖跺尯鍩�</el-button>
+        <el-input
+          v-model="search"
+          style="width: 210px"
+          placeholder="杈撳叆鍏抽敭瀛楄繘琛屾悳绱�"
+          @change="searchFilter"
+          @clear="searchFilter"
+          clearable
+          prefix-icon="Search"
+        />
+        <el-button
+          type="primary"
+          @click="openProDia('addOne')"
+          style="margin-left: 10px"
+          >鏂板鐖跺尯鍩�</el-button
+        >
       </div>
       <div ref="containerRef">
-        <el-tree ref="tree" v-loading="treeLoad" :data="list" @node-click="handleNodeClick"
-          :expand-on-click-node="false" default-expand-all :default-expanded-keys="expandedKeys" :draggable="true"
-          :filter-node-method="filterNode" :props="{ children: 'children', label: 'label' }" highlight-current
-          node-key="id" style="
+        <el-tree
+          ref="tree"
+          v-loading="treeLoad"
+          :data="list"
+          @node-click="handleNodeClick"
+          :expand-on-click-node="false"
+          default-expand-all
+          :default-expanded-keys="expandedKeys"
+          :draggable="true"
+          :filter-node-method="filterNode"
+          :props="{ children: 'children', label: 'label' }"
+          highlight-current
+          node-key="id"
+          style="
             height: calc(100vh - 190px);
             overflow-y: scroll;
             scrollbar-width: none;
-          ">
+            margin-top: 10px;
+          "
+        >
           <template #default="{ node, data }">
             <div class="custom-tree-node">
               <span class="tree-node-content">
                 <el-icon class="orange-icon">
                   <component :is="data.children && data.children.length > 0
-                    ? node.expanded ? 'FolderOpened' : 'Folder' : 'Tickets'" />
+                  ? node.expanded ? 'FolderOpened' : 'Folder' : 'Tickets'" />
                 </el-icon>
-                {{ data.fuId==null ? data.id : '' || data.areaName }}
+                {{ data.label }}
               </span>
               <div>
-                <el-button v-if="node.level < 2" type="primary" link @click="openProDia('edit', data)">
+                <el-button
+                  type="primary"
+                  link
+                  @click="openProDia('edit', data)"
+                >
                   缂栬緫
                 </el-button>
-                <!-- <el-button v-if="node.level < 2" type="primary" link @click="openProDia('add', data)" :disabled="node.level >= 3">
+                <el-button type="primary" link @click="openModelDia('add','', data.id)">
                   娣诲姞瀛愬尯鍩�
-                </el-button> -->
-                <!-- <el-button v-if="!node.childNodes.length" style="margin-left: 4px" type="danger" link
-                  @click="remove(node, data)">
+                </el-button>
+                <el-button
+                  v-if="!node.childNodes.length"
+                  style="margin-left: 4px"
+                  type="danger"
+                  link
+                  @click="remove(node, data)"
+                >
                   鍒犻櫎
-                </el-button> -->
+                </el-button>
               </div>
             </div>
           </template>
@@ -42,26 +75,47 @@
       </div>
     </div>
     <div class="right">
-      <div style="margin-bottom: 10px">
+      <div style="margin-bottom: 10px" v-if="isShowButton">
         <el-button type="primary" @click="openModelDia('add')">
-          鏂板鍖哄煙
+          鏂板瀛愬尯鍩�
         </el-button>
-        <ImportExcel @uploadSuccess="getModelList" />
-        <el-button type="danger" @click="handleDelete" style="margin-left: 10px" plain>
+        <el-button
+          type="danger"
+          @click="handleDelete"
+          style="margin-left: 10px"
+          plain
+        >
           鍒犻櫎
         </el-button>
       </div>
-      <PIMTable rowKey="id" :column="tableColumn" :tableData="tableData" :page="page" :isSelection="true"
-        @selection-change="handleSelectionChange" :tableLoading="tableLoading" @pagination="pagination"></PIMTable>
+      <PIMTable
+        rowKey="id"
+        :column="tableColumn"
+        :tableData="tableData"
+        :page="page"
+        :isSelection="true"
+        @selection-change="handleSelectionChange"
+        :tableLoading="tableLoading"
+        @pagination="pagination"
+      ></PIMTable>
     </div>
     <el-dialog v-model="productDia" title="鍖哄煙" width="400px" @keydown.enter.prevent>
-      <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
-        <el-row>
+      <el-form
+        :model="form"
+        label-width="140px"
+        label-position="top"
+        :rules="rules"
+        ref="formRef"
+      >
+        <el-row :gutter="30">
           <el-col :span="24">
-            <el-form-item label="鍖哄煙绫诲瀷锛�" prop="areaType">
-              <el-select v-model="form.areaType" placeholder="璇烽�夋嫨鍖哄煙绫诲瀷" clearable @keydown.enter.prevent>
-                <el-option v-for="item in areaTypeList" :key="item" :label="item" :value="item" />
-              </el-select>
+            <el-form-item label="鍖哄煙鍚嶇О锛�" prop="areaName">
+              <el-input
+                v-model="form.areaName"
+                placeholder="璇疯緭鍏ヤ骇鍝佸悕绉�"
+                clearable
+                @keydown.enter.prevent
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -69,38 +123,45 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="submitForm">纭</el-button>
-           <!-- <el-button type="primary" @click="submitModelForm">纭</el-button> -->
           <el-button @click="closeProDia">鍙栨秷</el-button>
         </div>
       </template>
     </el-dialog>
-    <el-dialog v-model="modelDia" title="鍖哄煙" width="400px" @close="closeModelDia" @keydown.enter.prevent>
-      <el-form :model="form" label-width="140px" label-position="top" :rules="modelRules" ref="modelFormRef">
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="鍖哄煙鍚嶇О锛�" prop="areaName">
-              <el-input v-model="form.areaName" placeholder="璇疯緭鍏ュ尯鍩熷悕绉�" clearable @keydown.enter.prevent />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="鍖哄煙绫诲瀷锛�" prop="areaType">
-              <el-select v-model="form.areaType" placeholder="璇烽�夋嫨鍖哄煙绫诲瀷" clearable @keydown.enter.prevent>
-                <el-option v-for="item in areaTypeList" :key="item" :label="item" :value="item" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="鐖跺尯鍩燂細" prop="fuId">
-              <el-select v-model="form.fuId"  placeholder="璇烽�夋嫨鐖跺尯鍩�" clearable @keydown.enter.prevent>
-                <el-option v-for="item in list" :key="item.id" :label="item.label" :value="item.id" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
+    <el-dialog
+      v-model="modelDia"
+      title="瀛愬尯鍩�"
+      width="400px"
+      @close="closeModelDia"
+      @keydown.enter.prevent
+    >
+      <el-form
+        :model="modelForm"
+        label-width="140px"
+        label-position="top"
+        :rules="modelRules"
+        ref="modelFormRef"
+      >
+      <el-form-item label="鐖跺尯鍩燂細" prop="fuId">
+        <el-cascader v-model="modelForm.fuId" :options="list" :props="{
+          value: 'id',
+          label: 'label',
+          children: 'children',
+          checkStrictly: true,
+        }" />
+        </el-form-item>
+        <el-form-item label="鍖哄煙绫诲瀷锛�" prop="areaType">
+          <el-select v-model="modelForm.areaType" placeholder="璇烽�夋嫨">
+            <el-option v-for="item in area_type" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="鍖哄煙鍚嶇О锛�" prop="areaName">
+          <el-input
+            v-model="modelForm.areaName"
+            placeholder="璇疯緭鍏ュ崟浣�"
+            clearable
+            @keydown.enter.prevent
+          />
+        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -113,10 +174,14 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
 import { ElMessageBox } from "element-plus";
-import { areaListPage, areaDelete, areaAdd, areaUpdate } from "@/api/energyManagement/index.js";
-// import ImportExcel from "../../../ImportExcel/index.vue";
+import {
+  areaAdd,
+  areaDelete,
+  areaListPage,
+  areaListTree,
+} from "@/api/energyManagement/index.js";
 
 const { proxy } = getCurrentInstance();
 const tree = ref(null);
@@ -132,37 +197,24 @@
 const treeLoad = ref(false);
 const list = ref([]);
 const expandedKeys = ref([]);
-const areaTypeList = ref([
-  "灞呮皯鐢ㄧ數鍖哄煙",
-  "鍟嗕笟鐢ㄧ數鍖哄煙",
-  "宸ヤ笟鐢ㄧ數鍖哄煙",
-  "鍐滀笟鐢ㄧ數鍖哄煙",
-  "鍏叡浜嬩笟鐢ㄧ數鍖哄煙",
-  "浜ら�氱敤鐢靛尯鍩�",
-  "鐗规畩鐢ㄧ數鍖哄煙"
-])
+const {area_type} = proxy.useDict("area_type")
 const tableColumn = ref([
   {
-    label: "鍖哄煙缂栧彿",
-    prop: "id"
-  },
-  {
     label: "鍖哄煙鍚嶇О",
-    prop: "areaName"
+    prop: "areaName",
   },
   {
     label: "鍖哄煙绫诲瀷",
-    prop: "areaType"
-  },
-  {
-    label: "鐖跺尯鍩�",
-    prop: "fuId",
+    prop: "areaType",
+    dataType: "tag",
+    formatData: (row) => {
+      return area_type.value.find(item => item.value == row)?.label;
+    }
   },
   {
     dataType: "action",
     label: "鎿嶄綔",
     align: "center",
-    fixed: 'right',
     operation: [
       {
         name: "缂栬緫",
@@ -180,49 +232,36 @@
 const selectedRows = ref([]);
 const page = reactive({
   current: 1,
-  size: 30,
+  size: 10,
   total: 0,
 });
 const data = reactive({
   form: {
-    id: "",
     areaName: "",
-    areaType: "",
+  },
+  rules: {
+    areaName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+  },
+  modelForm: {
+    areaName: "",
     fuId: "",
-    sort: ""
   },
   modelRules: {
-    model: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
-    unit: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+    areaName: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+    fuId: [{ required: true, message: "璇疯緭鍏�", trigger: "change" }],
   },
 });
-const { form, rules, modelRules } = toRefs(data);
-// const originalRecords = ref([]);
-// const parentItems = ref([]);
+const { form, rules, modelForm, modelRules } = toRefs(data);
+
 // 鏌ヨ浜у搧鏍�
-const getProductTeeList = () => {
+const getProductTreeList = () => {
   treeLoad.value = true;
-  areaListPage({
-    current: page.current,
-    size: page.size,
-  })
+  areaListTree()
     .then((res) => {
-      const originalRecords = res.data.records;
-      console.log(originalRecords);
-      // 绛涢�塮uId涓虹┖鐨勯」浣滀负鐖惰妭鐐�
-      list.value = originalRecords.filter(item => !item.fuId);
-      // 涓烘瘡涓埗鑺傜偣娣诲姞children骞跺尮閰嶅瓙鑺傜偣
-      list.value.forEach(parent => {
-        parent.children = originalRecords.filter(child => child.fuId === parent.id);
+      list.value = res;
+      list.value.forEach((a) => {
+        expandedKeys.value.push(a.label);
       });
-      // // 鏇存柊鍒楄〃鏁版嵁涓烘爲褰㈢粨鏋�
-      // list.value = parentItems.value;
-
-      console.log('鏍戝舰缁撴瀯鏁版嵁:', list.value);
-
-      // list.value.forEach((a) => {
-      //   expandedKeys.value.push(a.label);
-      // });
       treeLoad.value = false;
     })
     .catch((err) => {
@@ -236,28 +275,23 @@
 // 鎵撳紑浜у搧寮规
 const openProDia = (type, data) => {
   operationType.value = type;
-  modelOperationType.value = type;
-
   productDia.value = true;
-  form.value.areaType = "";
+  form.value.areaName = "";
   if (type === "edit") {
-    form.value.id = data.id;
     form.value.areaName = data.areaName;
-    form.value.areaType = data.areaType;
-    form.value.fuId = data.fuId;
-    form.value.sort = data.sort;
   }
 };
 // 鎵撳紑瑙勬牸鍨嬪彿寮规
-const openModelDia = (type, data) => {
+const openModelDia = (type, data,fatherId) => {
   modelOperationType.value = type;
   modelDia.value = true;
-  form.value.areaName = "";
-  form.value.areaType = "";
-  form.value.fuId = "";
-  form.value.sort = "";
+  modelForm.value.fuId = "";
+  modelForm.value.areaType = "";
+  modelForm.value.areaName = "";
+  modelForm.value.id = "";
+  modelForm.value.fuId = fatherId;
   if (type === "edit") {
-    form.value = { ...data };
+    modelForm.value = { ...data };
   }
 };
 // 鎻愪氦浜у搧鍚嶇О淇敼
@@ -265,24 +299,20 @@
   proxy.$refs.formRef.validate((valid) => {
     if (valid) {
       if (operationType.value === "add") {
-        // form.value.fuId = currentId.value;
-        // form.value.id = "";
-        areaAdd(form.value).then((res) => {
-          proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
-          closeProDia();
-          getProductTeeList();
-          getModelList();
-
-        });
-      }else {
+        form.value.parentId = currentId.value;
+        form.value.id = "";
+      } else if (operationType.value === "addOne") {
+        form.value.id = "";
+        form.value.parentId = "";
+      } else {
         form.value.id = currentId.value;
-        areaUpdate(form.value).then((res) => {
-          proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
-          closeProDia();
-          getModelList();
-          getProductTeeList();
-        });
+        form.value.parentId = "";
       }
+      areaAdd(form.value).then((res) => {
+        proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+        closeProDia();
+        getProductTreeList();
+      });
     }
   });
 };
@@ -306,8 +336,7 @@
       areaDelete(ids)
         .then((res) => {
           proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
-          getProductTeeList();
-          getModelList();
+          getProductTreeList();
         })
         .finally(() => {
           tableLoading.value = false;
@@ -320,32 +349,24 @@
 // 閫夋嫨浜у搧
 const handleNodeClick = (val, node, el) => {
   // 鍒ゆ柇鏄惁涓哄彾瀛愯妭鐐�
-  // isShowButton.value = !(val.children && val.children.length > 0);
+  isShowButton.value = !(val.children && val.children.length > 0);
   // 鍙湁鍙跺瓙鑺傜偣鎵嶆墽琛屼互涓嬮�昏緫
   currentId.value = val.id;
   currentParentId.value = val.parentId;
-  getModelList();
+  getModelList(true);
 };
 
-// 鎻愪氦鍖哄煙
+// 鎻愪氦瑙勬牸鍨嬪彿淇敼
 const submitModelForm = () => {
   proxy.$refs.modelFormRef.validate((valid) => {
     if (valid) {
-      if (modelOperationType.value === "add") {
-        form.value.fuId = currentId.value;
-        areaAdd(form.value).then((res) => {
-          proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
-        });
-      }
-      else {
-        // form.value.id = currentId.value;
-        areaUpdate(form.value).then((res) => {
-          proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
-        });
-      }
-      closeModelDia();
-      getModelList();
-      getProductTeeList();
+      modelForm.value.fuId = currentId.value;
+      areaAdd(modelForm.value).then((res) => {
+        proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
+        closeModelDia();
+        getModelList();
+        getProductTreeList();
+      });
     }
   });
 };
@@ -359,19 +380,29 @@
   selectedRows.value = selection;
 };
 
-// 鏌ヨ鍖哄煙
-const getModelList = () => {
+// 鏌ヨ瑙勬牸鍨嬪彿
+const pagination = (obj) => {
+  page.current = obj.page;
+  page.size = obj.limit;
+  getModelList();
+};
+const getModelList = (val = false) => {
   tableLoading.value = true;
-  areaListPage({
-    fuId: currentId.value,
+  let obj = {
+    id: currentId.value,
+    fuId:currentId.value,
     current: page.current,
-    size: page.size,
-  }).then((res) => {
+    size: page.size
+  }
+  if(val){
+    delete obj.id;
+  }else{
+    delete obj.fuId
+  }
+  areaListPage(obj).then((res) => {
     console.log("res", res);
-    const originalRecords = res.data.records;
-    // 绛涢�塮uId涓虹┖鐨勯」浣滀负鐖惰妭鐐�
-    tableData.value = originalRecords.filter(item => item.fuId === currentId.value);
-    page.total = res.total;
+    tableData.value = res.data.records;
+    page.total = res.data.total;
     tableLoading.value = false;
   });
 };
@@ -394,8 +425,8 @@
       areaDelete(ids)
         .then((res) => {
           proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
-          getModelList();
-          getProductTeeList();
+          getModelList();     
+          getProductTreeList();
         })
         .finally(() => {
           tableLoading.value = false;
@@ -441,30 +472,24 @@
   // 娌″尮閰嶅埌杩斿洖false
   return false;
 };
-onMounted(() => {
-	getProductTeeList();
-});
-
+getProductTreeList();
 </script>
 
 <style scoped>
 .product-view {
   display: flex;
 }
-
 .left {
   width: 380px;
   padding: 16px;
   background: #ffffff;
 }
-
 .right {
   width: calc(100% - 380px);
   padding: 16px;
   margin-left: 20px;
   background: #ffffff;
 }
-
 .custom-tree-node {
   flex: 1;
   display: flex;
@@ -473,18 +498,14 @@
   font-size: 14px;
   padding-right: 8px;
 }
-
 .tree-node-content {
   display: flex;
-  align-items: center;
-  /* 鍨傜洿灞呬腑 */
+  align-items: center; /* 鍨傜洿灞呬腑 */
   height: 100%;
 }
-
 .orange-icon {
   color: orange;
   font-size: 18px;
-  margin-right: 8px;
-  /* 鍥炬爣涓庢枃瀛椾箣闂村姞鐐归棿璺� */
+  margin-right: 8px; /* 鍥炬爣涓庢枃瀛椾箣闂村姞鐐归棿璺� */
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/energyManagement/energyPower/components/formDia.vue b/src/views/energyManagement/energyPower/components/formDia.vue
index 30f1c36..518a254 100644
--- a/src/views/energyManagement/energyPower/components/formDia.vue
+++ b/src/views/energyManagement/energyPower/components/formDia.vue
@@ -35,6 +35,25 @@
 						</el-form-item>
 					</el-col>
 					<el-col :span="12">
+						<el-form-item label="鐢ㄧ數娑堣�楀尯鍩燂細" prop="electricityConsumptionAreaId">
+							<el-cascader
+								v-model="form.electricityConsumptionAreaId"
+								:options="areaList"
+								:props="{
+									value: 'id',
+									label: 'label',
+									children: 'children',
+									checkStrictly: true,
+								}"
+								placeholder="璇烽�夋嫨鍖哄煙"
+								clearable
+								style="width: 100%"
+							/>
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-row :gutter="30">
+					<el-col :span="12">
 						<el-form-item label="姣忔棩闄愬埗鐢甸噺锛�" prop="everyNum">
 							<el-input
 								v-model="form.everyNum"
@@ -43,8 +62,6 @@
 							/>
 						</el-form-item>
 					</el-col>
-				</el-row>
-				<el-row :gutter="30">
 					<el-col :span="12">
 						<el-form-item label="棰濆畾鍔熺巼锛�" prop="powerRating">
 							<el-input
@@ -54,6 +71,8 @@
 							/>
 						</el-form-item>
 					</el-col>
+				</el-row>
+				<el-row :gutter="30">
 					<el-col :span="12">
 						<el-form-item label="瀹為檯鍔熺巼锛�" prop="powerActual">
 							<el-input
@@ -63,8 +82,6 @@
 							/>
 						</el-form-item>
 					</el-col>
-				</el-row>
-				<el-row :gutter="30">
 					<el-col :span="12">
 						<el-form-item label="杩愯鏃堕棿锛�" prop="runDate">
 							<el-date-picker
@@ -78,6 +95,8 @@
 							/>
 						</el-form-item>
 					</el-col>
+				</el-row>
+				<el-row :gutter="30">
 					<el-col :span="12">
 						<el-form-item label="褰撴棩鐢ㄧ數閲忥細" prop="dayNum">
 							<el-input
@@ -102,7 +121,7 @@
 <script setup>
 import {ref} from "vue";
 import useUserStore from "@/store/modules/user.js";
-import {deviceList, equipmentEnergyAdd, equipmentEnergyUpdate} from "@/api/energyManagement/index.js";
+import {deviceList, equipmentEnergyAdd, equipmentEnergyUpdate, areaListTree} from "@/api/energyManagement/index.js";
 const { proxy } = getCurrentInstance()
 const emit = defineEmits(['close'])
 const dialogFormVisible = ref(false);
@@ -118,6 +137,7 @@
 		powerActual: "",
 		runDate: "",
 		dayNum: "",
+		electricityConsumptionAreaId: "",
 	},
 	rules: {
 		code: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }],
@@ -126,10 +146,12 @@
 		powerRating: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
 		powerActual: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
 		dayNum: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
+		electricityConsumptionAreaId: [{ required: true, message: "璇烽�夋嫨鍖哄煙", trigger: "change" }],
 	},
 })
 const { form, rules } = toRefs(data);
 const codeList = ref([])
+const areaList = ref([])
 
 // 鎵撳紑寮规
 const openDialog = (type, row) => {
@@ -139,11 +161,24 @@
 	// form.value.maintenanceTime = getCurrentDate();
 	form.value = {}
 	proxy.resetForm("formRef");
+	
+	// 鑾峰彇璁惧鍒楄〃
 	deviceList().then((res) => {
 		codeList.value = res.data;
 	});
+	
+	// 鑾峰彇鍖哄煙鍒楄〃
+	areaListTree().then((res) => {
+		areaList.value = res;
+		console.log("areaList", res);
+	});
+	
 	if (type === "edit") {
 		form.value = {...row}
+		// 缂栬緫鏃讹紝灏嗗崟涓狪D杞崲涓烘暟缁勬牸寮忕敤浜庡洖鏄�
+		if (row.electricityConsumptionAreaId) {
+			form.value.electricityConsumptionAreaId = [row.electricityConsumptionAreaId];
+		}
 	}
 }
 const setName = (code) => {
@@ -156,13 +191,19 @@
 const submitForm = () => {
 	proxy.$refs["formRef"].validate(valid => {
 		if (valid) {
+			// 鎻愪氦鍓嶅鐞� electricityConsumptionAreaId锛屽彇鏁扮粍鐨勬渶鍚庝竴涓��
+			const submitData = { ...form.value };
+			if (Array.isArray(submitData.electricityConsumptionAreaId) && submitData.electricityConsumptionAreaId.length > 0) {
+				submitData.electricityConsumptionAreaId = submitData.electricityConsumptionAreaId[submitData.electricityConsumptionAreaId.length - 1];
+			}
+			
 			if (operationType.value === "add") {
-				equipmentEnergyAdd(form.value).then(response => {
+				equipmentEnergyAdd(submitData).then(response => {
 					proxy.$modal.msgSuccess("鏂板鎴愬姛")
 					closeDia()
 				})
 			} else {
-				equipmentEnergyUpdate(form.value).then(response => {
+				equipmentEnergyUpdate(submitData).then(response => {
 					proxy.$modal.msgSuccess("淇敼鎴愬姛")
 					closeDia()
 				})

--
Gitblit v1.9.3