|
|
@@ -1,6 +1,5 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
-
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="4" :xs="24">
|
|
|
<div class="head-container">
|
|
|
@@ -8,7 +7,7 @@
|
|
|
style="margin-bottom: 20px" />
|
|
|
</div>
|
|
|
<div class="head-container">
|
|
|
- <el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree"
|
|
|
+ <el-tree :data="treeAreaOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree"
|
|
|
node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -18,6 +17,271 @@
|
|
|
<el-tab-pane label="组织机构" name="organ"></el-tab-pane>
|
|
|
<el-tab-pane label="设施设备" name="facs"></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
+
|
|
|
+ <el-col :span="20" :xs="24">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form-item label="区域名称" prop="areaName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.areaName"
|
|
|
+ placeholder="请输入区域名称"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="mini"
|
|
|
+ @click="handleAdd"
|
|
|
+ v-hasPermi="['ems:area:add']"
|
|
|
+ >新增</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="info"
|
|
|
+ plain
|
|
|
+ icon="el-icon-sort"
|
|
|
+ size="mini"
|
|
|
+ @click="toggleExpandAll"
|
|
|
+ >展开/折叠</el-button>
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ v-if="refreshTable"
|
|
|
+ v-loading="loading"
|
|
|
+ :data="areaList"
|
|
|
+ row-key="areaCode"
|
|
|
+ :default-expand-all="isExpandAll"
|
|
|
+ :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-table-column label="区域名称" align="left" prop="areaName" />
|
|
|
+ <el-table-column label="区域简称" align="left" prop="shortName" />
|
|
|
+ <el-table-column label="区域编码" align="left" prop="areaCode" />
|
|
|
+ <el-table-column label="区域状态" align="center" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ objStatusMapping[scope.row.status] }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="区块标签" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-for="tag in (scope.row.tagNames && scope.row.tagNames.split(',')) || []" :key="tag" :style="getTagStyle(tag.trim())" class="tag-label">
|
|
|
+ {{ tag.trim() }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-reading"
|
|
|
+ @click="handleDevice(scope.row)"
|
|
|
+ v-hasPermi="['ems:area:edit']"
|
|
|
+ >计量设备</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ v-hasPermi="['ems:area:edit']"
|
|
|
+ >修改</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="handleAdd(scope.row)"
|
|
|
+ v-hasPermi="['ems:area:add']"
|
|
|
+ >新增</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ v-hasPermi="['ems:area:remove']"
|
|
|
+ >删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 添加或修改区域对象对话框 -->
|
|
|
+ <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
|
|
+ <SubTitle title="区域基础信息" style="margin-bottom: 15px;font-size: 15px; font-weight: bold"/>
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="区域代码" prop="areaCode">
|
|
|
+ <el-input v-model="form.areaCode" placeholder="请输入区域代码" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="上级区域" prop="parentCode">
|
|
|
+ <treeselect v-model="form.parentCode" :options="areaOptions" :normalizer="normalizer" placeholder="请选择上级区域代码" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="区域名称" prop="areaName">
|
|
|
+ <el-input v-model="form.areaName" placeholder="请输入区域名称" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="区域简称" prop="shortName">
|
|
|
+ <el-input v-model="form.shortName" placeholder="请输入区域简称" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="区域描述" prop="desc">
|
|
|
+ <el-input v-model="form.desc" placeholder="请输入区域描述" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="显示排序" prop="orderNum">
|
|
|
+ <el-input-number v-model="form.orderNum" controls-position="right" :min="0" style="width: 100%"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <template v-if="form.areaAttr">
|
|
|
+ <SubTitle title="区域属性信息" style="margin-bottom: 15px;font-size: 15px; font-weight: bold"/>
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12" >
|
|
|
+ <el-form-item label="属性代码" prop="areaAttr.areaCode">
|
|
|
+ <el-input v-model="form.areaAttr.areaCode" placeholder="请输入属性代码" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="区块标签" prop="areaAttr.tagCodeList">
|
|
|
+ <el-select v-model="form.areaAttr.tagCodeList" placeholder="请选择区块标签" multiple clearable :style="{width: '100%'}">
|
|
|
+ <el-option v-for="item in emsTagOptions" :label="item.label" :value="item.value" :key="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="所有单位" prop="areaAttr.attrOrg">
|
|
|
+ <el-input v-model="form.areaAttr.attrOrg" placeholder="请输入所有单位" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="管理单位" prop="areaAttr.mgrOrg">
|
|
|
+ <el-input v-model="form.areaAttr.mgrOrg" placeholder="请输入管理单位" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="负责人" prop="areaAttr.leader">
|
|
|
+ <el-input v-model="form.areaAttr.leader" placeholder="请输入负责人" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="联系电话" prop="areaAttr.phone">
|
|
|
+ <el-input v-model="form.areaAttr.phone" placeholder="请输入联系电话" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="开通时间" prop="areaAttr.openDate">
|
|
|
+ <el-date-picker v-model="form.areaAttr.openDate" type="date" placeholder="选择日期" style="width: 100%"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="建筑面积" prop="areaAttr.floorArea">
|
|
|
+ <el-input v-model="form.areaAttr.floorArea" placeholder="请输入建筑面积" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="使用面积" prop="areaAttr.usableArea">
|
|
|
+ <el-input v-model="form.areaAttr.usableArea" placeholder="请输入使用面积" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="楼层" prop="areaAttr.floor">
|
|
|
+ <el-input v-model="form.areaAttr.floor" placeholder="请输入楼层" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </template>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 计量设备弹框 -->
|
|
|
+ <el-dialog :title="dialogTitle" :visible.sync="deviceDialogVisible" width="1000px" append-to-body>
|
|
|
+ <el-tabs v-model="activeDeviceTab" @tab-click="handleADTabClick">
|
|
|
+ <el-tab-pane label="电表" name="electricMeter"></el-tab-pane>
|
|
|
+ <el-tab-pane label="水表" name="waterMeter"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ <!-- 水表和电表的已绑定和未绑定表格 -->
|
|
|
+ <SubTitle title="已绑定列表" />
|
|
|
+ <el-table v-loading="loading" :data="Bound" style="width: 100%">
|
|
|
+ <el-table-column label="边界对象" align="left" prop="boundaryObj" />
|
|
|
+ <el-table-column label="计量编号" align="left" prop="meterDevice" />
|
|
|
+ <el-table-column label="边界类型" align="left" prop="objType">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ getObjTypeLabel(scope.row.objType) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column> </el-table>
|
|
|
+ <SubTitle title="未绑定列表" />
|
|
|
+ <el-table v-loading="loading" :data="Unbound" style="width: 100%">
|
|
|
+ <el-table-column label="设备编号" align="left" prop="deviceCode" />
|
|
|
+ <el-table-column label="设备名称" align="left" prop="deviceName" width="200px"/>
|
|
|
+ <el-table-column label="安装位置" align="left" prop="deviceLocation" width="200px"/>
|
|
|
+ <el-table-column label="计量标签" align="center" prop="objTag">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{formatDict(scope.row.objTag,'objTagOptions')}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="采集方式" align="center" prop="colMode">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ getColModeName(scope.row.colMode) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="采集周期" align="center" prop="colCycle">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ getColCycleName(scope.row.colCycle) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" type="text" icon="el-icon-arrow-up" @click="moveToDevice(scope.row)">绑定</el-button>
|
|
|
+ <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleMeterDelete(scope.row)" v-hasPermi="['basecfg:device:remove']">
|
|
|
+ 删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getMeterData" />
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="saveByObj">保 存</el-button>
|
|
|
+ <el-button @click="MeterCancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -25,22 +289,150 @@
|
|
|
<script>
|
|
|
import Treeselect from '@riophae/vue-treeselect'
|
|
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
|
+import { addArea, areaTreeSelect, delArea, getArea, listDetailArea, updateArea } from '@/api/basecfg/area'
|
|
|
+import SubTitle from '@/components/SubTitle/index.vue'
|
|
|
+import { getEmsTag } from '@/api/commonApi'
|
|
|
+import { delDevice, listDevice } from '@/api/device/meterDevice'
|
|
|
+import { addByObj, listByObj } from '@/api/basecfg/boundaryRel'
|
|
|
+
|
|
|
|
|
|
export default {
|
|
|
name: 'Device',
|
|
|
- components: { Treeselect },
|
|
|
+ components: { SubTitle, Treeselect },
|
|
|
data() {
|
|
|
return {
|
|
|
activeTab: 'area',
|
|
|
areaOptions: [],
|
|
|
organOptions: [],
|
|
|
facsOptions: [],
|
|
|
+ // 区域名称
|
|
|
+ areaName: undefined,
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label'
|
|
|
+ },
|
|
|
+
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 区域对象表格数据
|
|
|
+ areaList: [],
|
|
|
+ // 区域对象树选项
|
|
|
+ // areaOptions: [],
|
|
|
+ treeAreaOptions: undefined,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ // 是否展开，默认全部展开
|
|
|
+ isExpandAll: true,
|
|
|
+ // 重新渲染表格状态
|
|
|
+ refreshTable: true,
|
|
|
+ // 标签选项
|
|
|
+ emsTagOptions: [],
|
|
|
+ tagCodeToColorMap:{},
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ areaCode: null,
|
|
|
+ parentCode: null,
|
|
|
+ ancestors: null,
|
|
|
+ areaName: null,
|
|
|
+ shortName: null,
|
|
|
+ desc: null,
|
|
|
+ orderNum: null,
|
|
|
+ status: null,
|
|
|
+ tagNames:null,
|
|
|
+ areaAttr:{}
|
|
|
+ },
|
|
|
+ MeterQueryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ areaCode: null,
|
|
|
+ bldgCode: null,
|
|
|
+ deviceCode: null,
|
|
|
+ meterCls: null,
|
|
|
+ objTag: null,
|
|
|
+ colCycle: null,
|
|
|
+ colMode: null,
|
|
|
+ magnification: null,
|
|
|
+ specDesc: null
|
|
|
+ },
|
|
|
+ objStatusMapping: {
|
|
|
+ 0: '正常',
|
|
|
+ 1: '停用',
|
|
|
+
|
|
|
+ },
|
|
|
+ // 表单参数
|
|
|
+ form: {
|
|
|
+ areaAttr: {
|
|
|
+ areaCode:null,
|
|
|
+ attrOrg: null,
|
|
|
+ mgrOrg: null,
|
|
|
+ leader: null,
|
|
|
+ phone: null,
|
|
|
+ openDate: null,
|
|
|
+ floorArea: null,
|
|
|
+ usableArea: null,
|
|
|
+ floor: null,
|
|
|
+ tagCodes:null,
|
|
|
+ tagNames:null,
|
|
|
+ tagCodeList:[]
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ areaCode: [
|
|
|
+ { required: true, message: "区域代码不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ areaName: [
|
|
|
+ { required: true, message: "区域名称不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ objTagOptions: [
|
|
|
+ { code: 0, name: '公摊表' },
|
|
|
+ { code: 1, name: '个户表' }
|
|
|
+ ],
|
|
|
+ dialogTitle: '',
|
|
|
+ deviceDialogVisible: false,
|
|
|
+ activeDeviceTab: 'electricMeter',
|
|
|
+ Bound: [], // 已绑定数据
|
|
|
+ Unbound: [], // 未绑定数据
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.getAreaTree('0', true)
|
|
|
+ this.getEmsTag('Area');
|
|
|
+ // 初始化 form.areaAttr 为一个空对象
|
|
|
+ this.form.areaAttr = {};
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ getAreaTree(areaCode, recursion) {
|
|
|
+ areaTreeSelect(areaCode, recursion).then(response => {
|
|
|
+ this.treeAreaOptions = response.data
|
|
|
+ // 自动选中并触发点击第一个节点
|
|
|
+ if (response.data && response.data.length > 0) {
|
|
|
+ const firstNode = response.data[0];
|
|
|
+ this.$refs.tree.setCurrentKey(firstNode.id); // 设置当前选中节点
|
|
|
+ this.handleNodeClick(firstNode); // 触发点击事件
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**分页*/
|
|
|
handleTabClick() {
|
|
|
|
|
|
},
|
|
|
+ /**分页*/
|
|
|
+ handleADTabClick(tab){
|
|
|
+ this.activeDeviceTab = tab.name;
|
|
|
+ this.getMeterData(); // 重新获取数据
|
|
|
+ },
|
|
|
// 筛选节点
|
|
|
filterNode(value, data) {
|
|
|
if (!value) return true
|
|
|
@@ -49,9 +441,323 @@ export default {
|
|
|
// 节点单击事件
|
|
|
handleNodeClick(data) {
|
|
|
this.queryParams.areaCode = data.id
|
|
|
- console.log('this.queryParams.areaCode ', this.queryParams.areaCode)
|
|
|
+ this.MeterQueryParams.areaCode = data.id
|
|
|
this.handleQuery()
|
|
|
+ this.getMeterData()
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //--------------------------------
|
|
|
+ getTagStyle(tagName) {
|
|
|
+ // 从tagName找到对应的tagCode
|
|
|
+ const tagCode = this.emsTagOptions.find(tag => tag.label === tagName)?.value;
|
|
|
+ const color = this.tagCodeToColorMap[tagCode] || '#FFFFFF'; // 默认白色
|
|
|
+ return {
|
|
|
+ backgroundColor: color,
|
|
|
+ color:'#808080',
|
|
|
+ padding: '4px 8px',
|
|
|
+ borderRadius: '4px',
|
|
|
+ width: '80px',
|
|
|
+ height: '30px',
|
|
|
+ margin: '4px 8px 4px 0',
|
|
|
+ display: 'inline-block',
|
|
|
+ verticalAlign: 'top'
|
|
|
+ };
|
|
|
},
|
|
|
+ /** 查询区域对象列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ listDetailArea(this.queryParams).then(response => {
|
|
|
+ this.areaList = this.handleTree(response.data, "areaCode", "parentCode");
|
|
|
+ // 递归处理 tagNames
|
|
|
+ this.areaList = this.extractTagNames(this.areaList);
|
|
|
+ console.log("查询", this.areaList);
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ moveToDevice(row) {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ saveByObj() {
|
|
|
+ // 构建要保存的数据数组
|
|
|
+ const dataToSave = this.Bound.map(item => {
|
|
|
+ return {
|
|
|
+ boundaryObj: item.boundaryObj,
|
|
|
+ meterDevice: item.meterDevice,
|
|
|
+ objType: item.objType
|
|
|
+ };
|
|
|
+ });
|
|
|
+ console.log("dataToSave",dataToSave)
|
|
|
+ addByObj(dataToSave).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.$message.success('保存成功');
|
|
|
+ this.deviceDialogVisible = false;
|
|
|
+ this.getMeterData();
|
|
|
+ } else {
|
|
|
+ this.$message.error('保存失败');
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('保存失败:', error);
|
|
|
+ this.$message.error('保存失败');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 递归提取 tagNames
|
|
|
+ extractTagNames(list) {
|
|
|
+ return list.map(item => {
|
|
|
+ if (item.areaAttr && item.areaAttr.tagNames) {
|
|
|
+ item.tagNames = item.areaAttr.tagNames; // 将 tagNames 从 areaAttr 提取到根级别
|
|
|
+ } else {
|
|
|
+ item.tagNames = '';
|
|
|
+ }
|
|
|
+ if (item.children) {
|
|
|
+ item.children = this.extractTagNames(item.children); // 递归处理子区域
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 转换区域对象数据结构 */
|
|
|
+ normalizer(node) {
|
|
|
+ if (node.children && !node.children.length) {
|
|
|
+ delete node.children;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ id: node.areaCode,
|
|
|
+ label: node.areaName,
|
|
|
+ children: node.children
|
|
|
+ };
|
|
|
+ },
|
|
|
+ /** 查询区域对象下拉树结构 */
|
|
|
+ getTreeselect() {
|
|
|
+ listDetailArea().then(response => {
|
|
|
+ this.areaOptions = [];
|
|
|
+ const data = { areaCode: 0, areaName: '顶级节点', children: [] };
|
|
|
+ data.children = this.handleTree(response.data, "areaCode", "parentCode");
|
|
|
+ this.areaOptions.push(data);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ MeterCancel() {
|
|
|
+ this.deviceDialogVisible = false;
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ id: null,
|
|
|
+ areaCode: null,
|
|
|
+ parentCode: null,
|
|
|
+ ancestors: null,
|
|
|
+ areaName: null,
|
|
|
+ shortName: null,
|
|
|
+ desc: null,
|
|
|
+ orderNum: null,
|
|
|
+ status: null,
|
|
|
+ areaAttr: {
|
|
|
+ areaCode: null,
|
|
|
+ attrOrg: null,
|
|
|
+ mgrOrg: null,
|
|
|
+ leader: null,
|
|
|
+ phone: null,
|
|
|
+ openDate: null,
|
|
|
+ floorArea: null,
|
|
|
+ usableArea: null,
|
|
|
+ floor: null,
|
|
|
+ tagCodes: null,
|
|
|
+ tagNames: null,
|
|
|
+ tagCodeList: []
|
|
|
+ }// 确保 areaAttr 始终为一个空对象
|
|
|
+ };
|
|
|
+ this.resetForm("form");
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 新增按钮操作 */
|
|
|
+ handleAdd(row) {
|
|
|
+ this.reset();
|
|
|
+ this.getTreeselect();
|
|
|
+ if (row != null && row.areaCode) {
|
|
|
+ this.form.parentCode = row.areaCode;
|
|
|
+ } else {
|
|
|
+ this.form.parentCode = 0;
|
|
|
+ }
|
|
|
+ // 确保 areaAttr 和 tagCodeList 是对象和数组
|
|
|
+ this.form.areaAttr = this.form.areaAttr || {};
|
|
|
+ console.log("this.form.areaAttr",this.form.areaAttr)
|
|
|
+ this.form.areaAttr.tagCodeList = this.form.areaAttr.tagCodeList || [];
|
|
|
+ console.log("this.form.areaAttr.tagCodeList",this.form.areaAttr.tagCodeList)
|
|
|
+ this.open = true;
|
|
|
+ this.title = "添加区域对象";
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 展开/折叠操作 */
|
|
|
+ toggleExpandAll() {
|
|
|
+ this.refreshTable = false;
|
|
|
+ this.isExpandAll = !this.isExpandAll;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.refreshTable = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**计量设备*/
|
|
|
+ handleDevice(row) {
|
|
|
+ this.dialogTitle = `计量设备 - ${row.areaName}`; // 设置弹框标题
|
|
|
+ this.deviceDialogVisible = true; // 显示弹框
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ getMeterData() {
|
|
|
+ this.loading = true;
|
|
|
+ let meterCls = '';
|
|
|
+ if (this.activeDeviceTab === 'electricMeter') {
|
|
|
+ meterCls = 45;
|
|
|
+ } else if (this.activeDeviceTab === 'waterMeter') {
|
|
|
+ meterCls = 70;
|
|
|
+ }
|
|
|
+ listDevice({ ...this.MeterQueryParams, meterCls}).then(response => {
|
|
|
+ this.Unbound = response.rows;
|
|
|
+ console.log("this.Unbound",this.Unbound);
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ listByObj(1,this.queryParams.areaCode).then(response=>{
|
|
|
+ this.Bound = response.data;
|
|
|
+ console.log("this.Bound",this.Bound);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getObjTypeLabel(objType) {
|
|
|
+ const typeLabels = {
|
|
|
+ 1: '区域位置',
|
|
|
+ 2: '设施',
|
|
|
+ 3: '设备',
|
|
|
+ 4: '组织'
|
|
|
+ };
|
|
|
+ return typeLabels[objType] || '未知类型';
|
|
|
+ },
|
|
|
+ formatDict(val, options, key = 'code', text = 'name') {
|
|
|
+ if (!this[options] || !Array.isArray(this[options])) {
|
|
|
+ console.error(`Expected an array for this[${options}], but got ${typeof this[options]}`);
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+
|
|
|
+ let name = '';
|
|
|
+ this[options].forEach(item => {
|
|
|
+ if (val === item[key]) {
|
|
|
+ name = item[text];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return name;
|
|
|
+ },
|
|
|
+
|
|
|
+ getColCycleName(colCycle) {
|
|
|
+ const cycleMap = {
|
|
|
+ 0: '实时',
|
|
|
+ 1: '分钟',
|
|
|
+ 2: '小时',
|
|
|
+ 3: '天',
|
|
|
+ 4: '月'
|
|
|
+ }
|
|
|
+ return cycleMap[colCycle] || ''
|
|
|
+ },
|
|
|
+ getColModeName(colMode) {
|
|
|
+ const modeMap = {
|
|
|
+ 0: '自动抄表',
|
|
|
+ 1: '手动抄表'
|
|
|
+ }
|
|
|
+ return modeMap[colMode] || '未知'
|
|
|
+ },
|
|
|
+ /** 修改按钮操作 */
|
|
|
+ handleUpdate(row) {
|
|
|
+ this.reset();
|
|
|
+ this.getTreeselect();
|
|
|
+ if (row != null) {
|
|
|
+ this.form.parentCode = row.areaCode;
|
|
|
+ }
|
|
|
+ getArea(row.id).then(response => {
|
|
|
+ this.form = response.data;
|
|
|
+ this.open = true;
|
|
|
+ // 确保 areaAttr 和 tagCodeList 是对象和数组
|
|
|
+ this.form.areaAttr = this.form.areaAttr || {};
|
|
|
+ this.form.areaAttr.tagCodeList = this.form.areaAttr.tagCodeList || [];
|
|
|
+ console.log(this.form.areaAttr);
|
|
|
+ this.title = "修改区域对象";
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitForm() {
|
|
|
+ this.$refs["form"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.form.id != null) {
|
|
|
+ updateArea(this.form).then(response => {
|
|
|
+ this.$modal.msgSuccess("修改成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ addArea(this.form).then(response => {
|
|
|
+ this.$modal.msgSuccess("新增成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 删除按钮操作 */
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$modal.confirm('是否确认删除区域对象编号为"' + row.id + '"的数据项？').then(function() {
|
|
|
+ return delArea(row.id);
|
|
|
+ }).then(() => {
|
|
|
+ this.getList();
|
|
|
+ this.$modal.msgSuccess("删除成功");
|
|
|
+ }).catch(() => {});
|
|
|
+ },
|
|
|
+ /**删除水表，电表*/
|
|
|
+ handleMeterDelete(row) {
|
|
|
+ const ids = row.id || this.ids
|
|
|
+ this.$modal
|
|
|
+ .confirm('是否确认删除计量设备编号为"' + ids + '"的数据项？')
|
|
|
+ .then(function() {
|
|
|
+ return delDevice(ids)
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.getMeterData()
|
|
|
+ this.$modal.msgSuccess('删除成功')
|
|
|
+ })
|
|
|
+ .catch(() => {})
|
|
|
+ },
|
|
|
+ getEmsTag(tagModel) {
|
|
|
+ console.log("tagModel", tagModel)
|
|
|
+ getEmsTag(tagModel).then(response => {
|
|
|
+ if (response && response.data) {
|
|
|
+ this.emsTagOptions = response.data.map(item => ({
|
|
|
+ label: item.tagName,
|
|
|
+ value: item.tagCode,
|
|
|
+ color: item.tagColor
|
|
|
+ }));
|
|
|
+ //颜色映射
|
|
|
+ this.tagCodeToColorMap = {};
|
|
|
+ this.emsTagOptions.forEach(item => {
|
|
|
+ this.tagCodeToColorMap[item.value] = item.color;
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
