重写用电区域，设备能耗添加用电区域字段

spring

10 天以前 0d0a26f9c6af83e04909412dea29921f16ad1b2e

重写用电区域，设备能耗添加用电区域字段

 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',
  })
    url: "/equipmentEnergyConsumption/deviceList",
    method: "get",
  });
}

 src/views/energyManagement/energyArea/index.vue

@@ -2,19 +2,43 @@
  <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">
@@ -22,19 +46,28 @@
                  <component :is="data.children && data.children.length > 0
                    ? 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-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-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-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-col>
        </el-row>
        <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);
      // 筛选fuId为空的项作为父节点
      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 = "";
        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;
        form.value.parentId = "";
      }
        areaAdd(form.value).then((res) => {
          proxy.$modal.msgSuccess("提交成功");
          closeProDia();
          getProductTeeList();
          getModelList();

        getProductTreeList();
        });
      }else {
        form.value.id = currentId.value;
        areaUpdate(form.value).then((res) => {
          proxy.$modal.msgSuccess("提交成功");
          closeProDia();
          getModelList();
          getProductTeeList();
        });
      }
    }
  });
};
@@ -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) => {
      modelForm.value.fuId = currentId.value;
      areaAdd(modelForm.value).then((res) => {
          proxy.$modal.msgSuccess("提交成功");
        });
      }
      else {
        // form.value.id = currentId.value;
        areaUpdate(form.value).then((res) => {
          proxy.$modal.msgSuccess("提交成功");
        });
      }
      closeModelDia();
      getModelList();
      getProductTeeList();
        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({
  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;
    // 筛选fuId为空的项作为父节点
    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;
  });
};
@@ -395,7 +426,7 @@
        .then((res) => {
          proxy.$modal.msgSuccess("删除成功");
          getModelList();
          getProductTeeList();
          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>

 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}
        // 编辑时，将单个ID转换为数组格式用于回显
        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()
                })