|
@@ -1,11 +1,7 @@
|
|
|
-/* eslint-disable @typescript-eslint/no-empty-function */
|
|
|
-/**
|
|
|
- * 添加空间
|
|
|
- */
|
|
|
+<!-- 添加空间 -->
|
|
|
<template>
|
|
|
<el-dialog
|
|
|
- custom-class="equipment-detail-dialog"
|
|
|
- @click.native="showPopover && (showPopover = false)"
|
|
|
+ custom-class="space-detail-dialog"
|
|
|
append-to-body
|
|
|
title="添加显示空间"
|
|
|
:visible="dialogTableVisible"
|
|
@@ -81,6 +77,8 @@
|
|
|
<el-button @click="close">取 消</el-button>
|
|
|
<el-button :disabled="!tableData.length" :type="tableData.length ? 'primary' : 'info'" @click="confirm">确 定</el-button>
|
|
|
</div>
|
|
|
+ <!-- 编辑信息点 -->
|
|
|
+ <edit-info-point type="space" @closeModal="showEditInfoPoint = false" :code="currentInfo.classCode || ''" :showDialog="showEditInfoPoint" />
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -88,7 +86,13 @@
|
|
|
* 添加显示实例
|
|
|
*/
|
|
|
import { Select, TreeSelect } from "meri-design";
|
|
|
-import { cloneDeep } from "lodash";
|
|
|
+import { mapState, mapMutations } from "vuex";
|
|
|
+import editInfoPoint from "./editInfoPoint";
|
|
|
+import { ruleCreate } from "@/api/labsl";
|
|
|
+import { dictCategoryQuery, dictQuery, PartiInstancQuery } from "@/api/datacenter";
|
|
|
+import { spaceQuery } from "@/api/equipcomponent";
|
|
|
+import { array2Tree, mapTree } from "@/utils/utils";
|
|
|
+import bus from "@/bus/bus";
|
|
|
const dataTree = [
|
|
|
{
|
|
|
id: "0",
|
|
@@ -136,70 +140,37 @@ export default {
|
|
|
required: true,
|
|
|
},
|
|
|
},
|
|
|
- components: { Select, TreeSelect },
|
|
|
+ components: { Select, TreeSelect, editInfoPoint },
|
|
|
data() {
|
|
|
return {
|
|
|
- timer: null,
|
|
|
- showPopover: false, //选择设备 popover是否显示
|
|
|
- dataTree1: [],
|
|
|
- dataTree2: [], // cloneDeep(dataTree),
|
|
|
dataTree3: [], // cloneDeep(dataTree),
|
|
|
- selectedIds1: [],
|
|
|
- selectedIds2: [],
|
|
|
selectedIds3: [],
|
|
|
- curentSelectTree1: [], //选中的设备 实例范围
|
|
|
- curentSelectTree2: [], //选中的空间 分区类型
|
|
|
spacePartitionType: [],
|
|
|
spacePartitionTypeData: [],
|
|
|
curentSelectTree3: [], //选中的空间 功能类型
|
|
|
dialogTableVisible: false,
|
|
|
- spacePartitionInstance: "", //选中的空间分区下实例
|
|
|
+ spacePartitionInstance: [], //选中的空间分区下实例
|
|
|
selectData: [
|
|
|
- { id: "test1", name: "选择项" },
|
|
|
- { id: "test2", name: "单平米" },
|
|
|
- { id: "test3", name: "下级分项" },
|
|
|
- { id: "test4", name: "4444444" },
|
|
|
- { id: "test5", name: "555555555" },
|
|
|
- { id: "test6", name: "66666666666" },
|
|
|
- { id: "test7", name: "6666" },
|
|
|
- { id: "test8", name: "6" },
|
|
|
+ // { id: "test1", name: "选择项" },
|
|
|
],
|
|
|
tableData: [
|
|
|
{
|
|
|
- date: "分区总数量: 111111",
|
|
|
+ date: "分区总数量: 12",
|
|
|
},
|
|
|
{
|
|
|
date: "监控器",
|
|
|
- name: "111",
|
|
|
+ name: "12",
|
|
|
address: "dfadfasdfa",
|
|
|
},
|
|
|
- {
|
|
|
- date: "监控前端设备",
|
|
|
- name: "222",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "监控控制箱",
|
|
|
- name: "333",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "监控摄像头",
|
|
|
- name: "44",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "水景系统",
|
|
|
- name: "11",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "泳池系统",
|
|
|
- name: "11",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "网络系统",
|
|
|
- name: "22",
|
|
|
- },
|
|
|
],
|
|
|
+ tableDataBak: [],
|
|
|
+ currentInfo: {}, //点击的设备类数据
|
|
|
+ showEditInfoPoint: false, //显示编辑信息点弹窗
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapState(["buildingId", "floorId", "id", "graphId"]),
|
|
|
+ },
|
|
|
watch: {
|
|
|
// 是否打开弹窗
|
|
|
showDialog(val) {
|
|
@@ -208,12 +179,38 @@ export default {
|
|
|
this.initModal();
|
|
|
}
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 监听分区类型变化(点击下拉框删除按钮,触发表格数据查询)
|
|
|
+ */
|
|
|
+ spacePartitionType: {
|
|
|
+ handler(newV, oldV) {
|
|
|
+ if (!newV.length && oldV.length) {
|
|
|
+ this.spacePartitionInstance = [];
|
|
|
+ this.curentSelectTree3 = [];
|
|
|
+ // this.getTableData();
|
|
|
+ this.tableData = [];
|
|
|
+ this.tableDataBak = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 监听分区下实例变化(点击下拉框删除按钮,触发表格数据查询)
|
|
|
+ */
|
|
|
+ spacePartitionInstance: {
|
|
|
+ handler(newV, oldV) {
|
|
|
+ if (!newV.length && oldV.length) {
|
|
|
+ this.getTableData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // console.log(1)
|
|
|
},
|
|
|
- // eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
|
- created() {},
|
|
|
- // eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
|
- mounted() {},
|
|
|
methods: {
|
|
|
+ ...mapMutations(["ADDRULE"]),
|
|
|
/**
|
|
|
* 空间 分区类型
|
|
|
*/
|
|
@@ -250,13 +247,12 @@ export default {
|
|
|
* 显示弹窗时的处理
|
|
|
*/
|
|
|
initModal() {
|
|
|
- this.showPopover = false;
|
|
|
- // this.tableData = []; //TODO:
|
|
|
- // 没有tableData,显示popover
|
|
|
- !this.tableData.length &&
|
|
|
- (this.timer = setTimeout(() => {
|
|
|
- this.showPopover = true;
|
|
|
- }, 1000));
|
|
|
+ this.tableDataBak = [];
|
|
|
+ this.tableData = [];
|
|
|
+ // 分区类型 列表
|
|
|
+ this.getType();
|
|
|
+ // 空间功能类型
|
|
|
+ this.getDict();
|
|
|
},
|
|
|
/**
|
|
|
* 空间分区类型 列表
|
|
@@ -280,16 +276,11 @@ export default {
|
|
|
zoneTypeList: this.spacePartitionType,
|
|
|
};
|
|
|
const res = await PartiInstancQuery(postParams);
|
|
|
- console.log("==================");
|
|
|
- console.log(res);
|
|
|
- console.log(res.content);
|
|
|
const data = res.content.map((v) => {
|
|
|
return { id: v.id, name: v.localName };
|
|
|
});
|
|
|
this.selectData = data;
|
|
|
this.spacePartitionInstance = [];
|
|
|
- // v-model="spacePartitionInstance"
|
|
|
- // :selectdata="selectData"
|
|
|
},
|
|
|
// 空间功能类型
|
|
|
async getDict() {
|
|
@@ -302,7 +293,36 @@ export default {
|
|
|
// 构造树
|
|
|
this.dataTree3 = array2Tree(data, "parentCode");
|
|
|
},
|
|
|
-
|
|
|
+ async getTableData() {
|
|
|
+ // console.trace("getTableData");
|
|
|
+ // 东坝地上二层
|
|
|
+ const postParams = {
|
|
|
+ equipTypes: [], // 设备类型列表
|
|
|
+ zoneTypes: this.spacePartitionType, //空间类型
|
|
|
+ spaceIds: this.spacePartitionInstance, //空间实例id
|
|
|
+ funcTypes: this.curentSelectTree3, //空间功能区类型
|
|
|
+ floorId: this.floorId, // "Fl1101050029ecc5d3aec0644d7f88647618f7bdd023",
|
|
|
+ buildingId: this.buildingId, // "Bd1101050029cb77fbd1846611eaac87cd1cd6a961c6",
|
|
|
+ };
|
|
|
+ const res = await spaceQuery(postParams);
|
|
|
+ const data = res.content || [];
|
|
|
+ this.tableDataBak = data;
|
|
|
+ const map = {};
|
|
|
+ data.map((item) => {
|
|
|
+ if (!map[item.classCode]) {
|
|
|
+ map[item.classCode] = {
|
|
|
+ classCode: item.classCode,
|
|
|
+ codeName: item.codeName,
|
|
|
+ total: 1,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ map[item.classCode].total++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const tableData = Object.values(map);
|
|
|
+ tableData.length && tableData.unshift({ codeName: "实例总数量: " + data.length });
|
|
|
+ this.tableData = tableData;
|
|
|
+ },
|
|
|
/**
|
|
|
* 合并第一行
|
|
|
*/
|
|
@@ -335,37 +355,50 @@ export default {
|
|
|
*/
|
|
|
editInfo(data) {
|
|
|
console.log(data);
|
|
|
+ this.currentInfo = data;
|
|
|
+ this.showEditInfoPoint = true;
|
|
|
},
|
|
|
/**
|
|
|
* 关闭弹窗
|
|
|
*/
|
|
|
close() {
|
|
|
- console.log("close");
|
|
|
- // dialogTableVisible
|
|
|
this.dialogTableVisible = false;
|
|
|
- this.showPopover = false;
|
|
|
- // clearTimeout(this.timer);
|
|
|
this.$emit("closeModal");
|
|
|
},
|
|
|
/**
|
|
|
* 点击弹窗确定,提交接口
|
|
|
*/
|
|
|
- confirm() {
|
|
|
- /**
|
|
|
- * 设备实例范围:
|
|
|
- * []
|
|
|
- * 空间
|
|
|
- * 分区类型
|
|
|
- * []
|
|
|
- * 分区下实例
|
|
|
- * id
|
|
|
- * 空间功能类型
|
|
|
- * []
|
|
|
- *
|
|
|
- */
|
|
|
- this.dialogTableVisible = false;
|
|
|
- this.showPopover = false;
|
|
|
- clearTimeout(this.timer);
|
|
|
+ async confirm() {
|
|
|
+ const postParams = {
|
|
|
+ content: [
|
|
|
+ {
|
|
|
+ graphCoding: this.id,
|
|
|
+ graphId: this.graphId,
|
|
|
+ returnType: "zone", // 返回类型(equip: 设备, equipGroup: 设备组, zone: 空间)
|
|
|
+ commond: "query", // 命令类型(query: 查询, delete: 删除)
|
|
|
+ params: {
|
|
|
+ equipTypes: [], //设备类型,添加空间无此字段
|
|
|
+ zoneTypes: this.spacePartitionType, //空间类型
|
|
|
+ spaceIds: this.spacePartitionInstance, //空间实例id
|
|
|
+ funcTypes: this.curentSelectTree3, //空间功能区类型
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ debugger
|
|
|
+ const res = await ruleCreate(postParams);
|
|
|
+ if (res.result === "success") {
|
|
|
+ this.$message.success("添加成功");
|
|
|
+ // 在vuex中添加规则
|
|
|
+ this.ADDRULE(res.entityList[0]);
|
|
|
+ // 接口成功之后,发出添加空间指令
|
|
|
+ // TODO: 添加空间指令
|
|
|
+ // bus.$emit("addZone", this.tableDataBak);
|
|
|
+ this.dialogTableVisible = false;
|
|
|
+ this.showPopover = false;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message || "添加失败");
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
};
|
|
@@ -402,7 +435,7 @@ export default {
|
|
|
}
|
|
|
</style>
|
|
|
<style lang='less' scoped>
|
|
|
-/deep/ .equipment-detail-dialog {
|
|
|
+/deep/ .space-detail-dialog {
|
|
|
width: 1200px;
|
|
|
height: 648px;
|
|
|
// background-color: blueviolet;
|