|
@@ -8,7 +8,7 @@
|
|
</div>
|
|
</div>
|
|
<div class="head-container">
|
|
<div class="head-container">
|
|
<el-tree :data="areaList" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree"
|
|
<el-tree :data="areaList" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree"
|
|
- node-key="id" default-expand-all highlight-current @node-click="handleNodeClick"/>
|
|
|
|
|
|
+ node-key="id" default-expand-all highlight-current @node-click="handleNodeClick"/>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-col>
|
|
|
|
|
|
@@ -35,15 +35,6 @@
|
|
</el-form>
|
|
</el-form>
|
|
|
|
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-row :gutter="10" class="mb8">
|
|
- <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>
|
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
</el-row>
|
|
</el-row>
|
|
|
|
|
|
@@ -132,7 +123,7 @@
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
|
|
|
|
|
+ <pagination v-show="total>0" :total="total" :page.sync="MeterQueryParams.pageNum" :limit.sync="MeterQueryParams.pageSize"
|
|
@pagination="getMeterData" />
|
|
@pagination="getMeterData" />
|
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
<div slot="footer" class="dialog-footer">
|
|
@@ -148,11 +139,11 @@
|
|
<script>
|
|
<script>
|
|
import Treeselect from '@riophae/vue-treeselect'
|
|
import Treeselect from '@riophae/vue-treeselect'
|
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
-import { addArea, areaTreeSelect, delArea, getArea, listDetailArea, updateArea } from '@/api/basecfg/area'
|
|
|
|
|
|
+import {listDetailArea } from '@/api/basecfg/area'
|
|
import SubTitle from '@/components/SubTitle/index.vue'
|
|
import SubTitle from '@/components/SubTitle/index.vue'
|
|
import { getEmsTag } from '@/api/commonApi'
|
|
import { getEmsTag } from '@/api/commonApi'
|
|
import { delDevice, listDevice } from '@/api/device/meterDevice'
|
|
import { delDevice, listDevice } from '@/api/device/meterDevice'
|
|
-import { addByObj,addAllByObj, listByObj } from '@/api/basecfg/boundaryRel'
|
|
|
|
|
|
+import { addAllByObj, listByObj } from '@/api/basecfg/boundaryRel'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
@@ -176,8 +167,6 @@ export default {
|
|
showSearch: true,
|
|
showSearch: true,
|
|
// 区域对象表格数据
|
|
// 区域对象表格数据
|
|
areaList: [],
|
|
areaList: [],
|
|
- areaList1: [],
|
|
|
|
- treeAreaOptions: undefined,
|
|
|
|
// 总条数
|
|
// 总条数
|
|
total: 0,
|
|
total: 0,
|
|
// 弹出层标题
|
|
// 弹出层标题
|
|
@@ -193,6 +182,8 @@ export default {
|
|
tagCodeToColorMap:{},
|
|
tagCodeToColorMap:{},
|
|
// 查询参数
|
|
// 查询参数
|
|
queryParams: {
|
|
queryParams: {
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10,
|
|
areaCode: null,
|
|
areaCode: null,
|
|
parentCode: null,
|
|
parentCode: null,
|
|
ancestors: null,
|
|
ancestors: null,
|
|
@@ -252,6 +243,12 @@ export default {
|
|
{ code: 0, name: '公摊表' },
|
|
{ code: 0, name: '公摊表' },
|
|
{ code: 1, name: '个户表' }
|
|
{ code: 1, name: '个户表' }
|
|
],
|
|
],
|
|
|
|
+ allAreaNode: {
|
|
|
|
+ id: 'all',
|
|
|
|
+ areaName: '全部',
|
|
|
|
+ children: []
|
|
|
|
+ },
|
|
|
|
+ parentAreaCode:'',
|
|
dialogTitle: '',
|
|
dialogTitle: '',
|
|
deviceDialogVisible: false,
|
|
deviceDialogVisible: false,
|
|
activeDeviceTab: 'electricMeter',
|
|
activeDeviceTab: 'electricMeter',
|
|
@@ -260,15 +257,15 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
- this.getList();
|
|
|
|
|
|
+ this.getList();
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
this.getEmsTag('Area');
|
|
this.getEmsTag('Area');
|
|
- // 初始化 form.areaAttr 为一个空对象
|
|
|
|
this.form.areaAttr = {};
|
|
this.form.areaAttr = {};
|
|
this.getList();
|
|
this.getList();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+
|
|
filterNode(value, data) {
|
|
filterNode(value, data) {
|
|
if (!value) return true
|
|
if (!value) return true
|
|
return data.label.indexOf(value) !== -1
|
|
return data.label.indexOf(value) !== -1
|
|
@@ -317,77 +314,52 @@ export default {
|
|
handleTabClick() {
|
|
handleTabClick() {
|
|
|
|
|
|
},
|
|
},
|
|
- /**分页*/
|
|
|
|
|
|
+ /**电表、水表分页*/
|
|
handleADTabClick(tab){
|
|
handleADTabClick(tab){
|
|
this.activeDeviceTab = tab.name;
|
|
this.activeDeviceTab = tab.name;
|
|
- this.getMeterData(); // 重新获取数据
|
|
|
|
|
|
+ this.getMeterData();
|
|
},
|
|
},
|
|
|
|
|
|
- // 节点点击事件处理
|
|
|
|
handleNodeClick(data) {
|
|
handleNodeClick(data) {
|
|
- if (data && data.ancestors) {
|
|
|
|
- const ancestorsArray = data.ancestors.split(',');
|
|
|
|
- if (ancestorsArray.length > 1) {
|
|
|
|
- const areaCode = ancestorsArray[1];
|
|
|
|
- this.queryParams.areaCode = areaCode;
|
|
|
|
- this.MeterQueryParams.areaCode = areaCode;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- // 从点击的节点中获取areaCode
|
|
|
|
- const areaCode = data.areaCode;
|
|
|
|
- const filteredData = this.filterDataByAreaCode(this.areaList, areaCode);
|
|
|
|
- if (filteredData.length > 0) {
|
|
|
|
- this.areaOptions = filteredData;
|
|
|
|
|
|
+ if (data.id === 'all') {
|
|
|
|
+ this.areaOptions = this.areaList.slice(1);
|
|
} else {
|
|
} else {
|
|
- this.areaOptions = [data];
|
|
|
|
- }
|
|
|
|
- this.getMeterData()
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- // 根据areaCode过滤节点和children数组的方法
|
|
|
|
- filterDataByAreaCode(list, areaCode) {
|
|
|
|
- let result = [];
|
|
|
|
- for (let i = 0; i < list.length; i++) {
|
|
|
|
- if (list[i].areaCode === areaCode) {
|
|
|
|
- result.push(list[i]);
|
|
|
|
- if (list[i].children && list[i].children.length > 0) {
|
|
|
|
- result = result.concat(list[i].children);
|
|
|
|
- }
|
|
|
|
- return result;
|
|
|
|
- }
|
|
|
|
- // 如果当前节点有children,递归查找
|
|
|
|
- if (list[i].children && list[i].children.length > 0) {
|
|
|
|
- const foundChildren = this.filterDataByAreaCode(list[i].children, areaCode);
|
|
|
|
- if (foundChildren.length > 0) {
|
|
|
|
- return foundChildren;
|
|
|
|
- }
|
|
|
|
|
|
+ // 判断是否为叶子节点
|
|
|
|
+ if (!data.children || data.children.length === 0) {
|
|
|
|
+ // 叶子节点,展示该节点的数据
|
|
|
|
+ this.areaOptions = [data];
|
|
|
|
+ } else {
|
|
|
|
+ // 不是叶子节点,展示其下层的数据
|
|
|
|
+ this.areaOptions = data.children;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- return result;
|
|
|
|
},
|
|
},
|
|
|
|
+
|
|
|
|
+
|
|
/** 查询区域对象列表 */
|
|
/** 查询区域对象列表 */
|
|
getList() {
|
|
getList() {
|
|
this.loading = true;
|
|
this.loading = true;
|
|
- console.log("this.queryParams",this.queryParams)
|
|
|
|
listDetailArea(this.queryParams).then(response => {
|
|
listDetailArea(this.queryParams).then(response => {
|
|
this.areaList = this.handleTree(response.data, "areaCode", "parentCode");
|
|
this.areaList = this.handleTree(response.data, "areaCode", "parentCode");
|
|
this.areaList = this.extractTagNames(this.areaList);
|
|
this.areaList = this.extractTagNames(this.areaList);
|
|
|
|
+ // 将“全部”节点添加到区域列表的顶部
|
|
|
|
+ this.areaList.unshift(this.allAreaNode);
|
|
this.loading = false;
|
|
this.loading = false;
|
|
- this.activateSecondLevelNode();
|
|
|
|
|
|
+ this.activateFirstOrSecondNode();
|
|
});
|
|
});
|
|
},
|
|
},
|
|
- // 激活第一层的第一个子节点
|
|
|
|
- activateSecondLevelNode() {
|
|
|
|
- if (this.areaList.length > 0 && this.areaList[0].children && this.areaList[0].children.length > 0) {
|
|
|
|
- this.handleNodeClick(this.areaList[0].children[0]);
|
|
|
|
|
|
+ activateFirstOrSecondNode() {
|
|
|
|
+ if (this.areaList.length > 0) {
|
|
|
|
+ this.handleNodeClick(this.areaList[0]);}
|
|
|
|
+ if (this.areaList[0].children && this.areaList[0].children.length > 1) {
|
|
|
|
+ this.handleNodeClick(this.areaList[0].children[1]);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
-
|
|
|
|
// 递归提取 tagNames
|
|
// 递归提取 tagNames
|
|
extractTagNames(list) {
|
|
extractTagNames(list) {
|
|
return list.map(item => {
|
|
return list.map(item => {
|
|
if (item.areaAttr && item.areaAttr.tagNames) {
|
|
if (item.areaAttr && item.areaAttr.tagNames) {
|
|
- item.tagNames = item.areaAttr.tagNames; // 将 tagNames 从 areaAttr 提取到根级别
|
|
|
|
|
|
+ item.tagNames = item.areaAttr.tagNames;
|
|
} else {
|
|
} else {
|
|
item.tagNames = '';
|
|
item.tagNames = '';
|
|
}
|
|
}
|
|
@@ -438,24 +410,58 @@ export default {
|
|
},
|
|
},
|
|
/** 搜索按钮操作 */
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
handleQuery() {
|
|
- this.getList();
|
|
|
|
|
|
+ this.loading = true;
|
|
|
|
+ listDetailArea(this.queryParams).then(response => {
|
|
|
|
+ this.areaOptions = this.handleTree(response.data, "areaCode", "parentCode");
|
|
|
|
+ this.areaOptions = this.extractTagNames(this.areaOptions);
|
|
|
|
+ this.loading = false;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ filterDataByAreaCode(list, areaCode) {
|
|
|
|
+ let result = [];
|
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
|
+ if (list[i].areaCode === areaCode) {
|
|
|
|
+ if (list[i].children && list[i].children.length > 0) {
|
|
|
|
+ list[i].children.forEach(child => {
|
|
|
|
+ result.push(child);
|
|
|
|
+ if (child.children && child.children.length > 0) {
|
|
|
|
+ result = result.concat(this.filterDataByAreaCode(child.children, areaCode));
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ return result;
|
|
|
|
+ } else if (list[i].children && list[i].children.length > 0) {
|
|
|
|
+ const foundChildren = this.filterDataByAreaCode(list[i].children, areaCode);
|
|
|
|
+ if (foundChildren.length > 0) {
|
|
|
|
+ return foundChildren;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return result;
|
|
},
|
|
},
|
|
|
|
+
|
|
/** 重置按钮操作 */
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
resetQuery() {
|
|
this.resetForm("queryForm");
|
|
this.resetForm("queryForm");
|
|
this.handleQuery();
|
|
this.handleQuery();
|
|
},
|
|
},
|
|
|
|
|
|
- /** 展开/折叠操作 */
|
|
|
|
- toggleExpandAll() {
|
|
|
|
- this.refreshTable = false;
|
|
|
|
- this.isExpandAll = !this.isExpandAll;
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
- this.refreshTable = true;
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
/**计量设备*/
|
|
/**计量设备*/
|
|
handleDevice(row) {
|
|
handleDevice(row) {
|
|
|
|
+
|
|
|
|
+ this.queryParams.areaCode = row.areaCode;
|
|
|
|
+ if (row && row.ancestors) {
|
|
|
|
+ const ancestorsArray = row.ancestors.split(',');
|
|
|
|
+ if (ancestorsArray.length > 1) {
|
|
|
|
+ // 当 ancestors 长度大于 1 时,取第二个 areaCode 作为父级 areaCode
|
|
|
|
+ this.MeterQueryParams.areaCode= ancestorsArray[1];
|
|
|
|
+ } else if (ancestorsArray.length === 1) {
|
|
|
|
+ // 当 ancestors 长度等于 1 时,取该对象本身的 areaCode 作为父级 areaCode
|
|
|
|
+ this.MeterQueryParams.areaCode = row.areaCode;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.getMeterData();
|
|
this.dialogTitle = `计量设备 - ${row.areaName}`;
|
|
this.dialogTitle = `计量设备 - ${row.areaName}`;
|
|
this.deviceDialogVisible = true;
|
|
this.deviceDialogVisible = true;
|
|
},
|
|
},
|
|
@@ -469,13 +475,11 @@ export default {
|
|
}
|
|
}
|
|
listDevice({ ...this.MeterQueryParams, meterCls}).then(response => {
|
|
listDevice({ ...this.MeterQueryParams, meterCls}).then(response => {
|
|
this.Unbound = response.rows;
|
|
this.Unbound = response.rows;
|
|
- console.log("this.Unbound",this.Unbound);
|
|
|
|
this.total = response.total;
|
|
this.total = response.total;
|
|
this.loading = false;
|
|
this.loading = false;
|
|
});
|
|
});
|
|
listByObj(1,meterCls,this.queryParams.areaCode).then(response=>{
|
|
listByObj(1,meterCls,this.queryParams.areaCode).then(response=>{
|
|
this.Bound = response.data;
|
|
this.Bound = response.data;
|
|
- console.log("this.Bound",this.Bound);
|
|
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
|
|
@@ -500,24 +504,36 @@ export default {
|
|
this.Bound.splice(index, 1);
|
|
this.Bound.splice(index, 1);
|
|
}
|
|
}
|
|
this.Unbound.push(row);
|
|
this.Unbound.push(row);
|
|
- // 清除之前设置的属性值
|
|
|
|
delete row.boundaryObj;
|
|
delete row.boundaryObj;
|
|
delete row.meterDevice;
|
|
delete row.meterDevice;
|
|
delete row.objType;
|
|
delete row.objType;
|
|
},
|
|
},
|
|
|
|
|
|
- /**构建要保存的数据数组*/
|
|
|
|
|
|
+ /**保存绑定的设备*/
|
|
saveByObj() {
|
|
saveByObj() {
|
|
|
|
+ // 构建要保存的数据数组
|
|
const dataToSave = this.Bound.map(item => {
|
|
const dataToSave = this.Bound.map(item => {
|
|
return {
|
|
return {
|
|
boundaryObj: item.boundaryObj,
|
|
boundaryObj: item.boundaryObj,
|
|
- meterCls: item.meterCls || (item.objType === 'electricMeter' ? 45 : 70),
|
|
|
|
|
|
+ id: item.id,
|
|
|
|
+ meterCls: item.meterCls || (this.activeDeviceTab === 'electricMeter' ? 45 : 70),
|
|
|
|
+ meterDevice: item.meterDevice,
|
|
objType: item.objType
|
|
objType: item.objType
|
|
};
|
|
};
|
|
});
|
|
});
|
|
- console.log("dataToSave", dataToSave);
|
|
|
|
|
|
+ // 构建查询参数
|
|
|
|
+ const RequestQueryParams = this.Bound.map(item => {
|
|
|
|
+ return {
|
|
|
|
+ objType: item.objType,
|
|
|
|
+ boundaryObj: item.boundaryObj,
|
|
|
|
+ meterCls: item.meterCls || (this.activeDeviceTab === 'electricMeter' ? 45 : 70),
|
|
|
|
+ };
|
|
|
|
+ });
|
|
|
|
+ const objType = RequestQueryParams.length > 0 ? RequestQueryParams[0].objType : null;
|
|
|
|
+ const boundaryObj = RequestQueryParams.length > 0 ? RequestQueryParams[0].boundaryObj : null;
|
|
|
|
+ const meterCls = RequestQueryParams.length > 0 ? RequestQueryParams[0].meterCls : null;
|
|
|
|
|
|
- addAllByObj(dataToSave)
|
|
|
|
|
|
+ addAllByObj(objType, meterCls,boundaryObj, dataToSave)
|
|
.then(response => {
|
|
.then(response => {
|
|
if (response.code === 200) {
|
|
if (response.code === 200) {
|
|
this.$message.success('保存成功');
|
|
this.$message.success('保存成功');
|