Browse Source

1. 左侧工具栏,禁用设备组
2. 添加空间页面,初步提交

yunxing 4 years ago
parent
commit
a4e68beaf0

+ 16 - 4
src/components/editview/leftToolBar.vue

@@ -3,7 +3,13 @@
     <div class="left-tool-bar">
         <div class="btn-list">
             <ul>
-                <li v-for="(item, index) in leftData" :key="index" :class="{ 'btn-active': chiceStatus == index }" @click="openTool(index)">
+                <!-- 设备组禁用,leftData数组添加禁用字段 -->
+                <li
+                    v-for="(item, index) in leftData"
+                    :key="index"
+                    :class="{ 'btn-active': chiceStatus == index, disabled: item.state === 'disabled' }"
+                    @click="openTool(index, item)"
+                >
                     <span :class="['icon', 'iconfont', 'fontstyle', item.icon]"></span>
                     <span>{{ item.name }}</span>
                     <div class="btborder"></div>
@@ -46,6 +52,7 @@ const leftData = [
         id: "equipList",
         name: "设备组",
         icon: "icon-shebeizu",
+        state: "disabled",
     },
     {
         id: "space",
@@ -73,14 +80,14 @@ export default {
             showSidebarLeft: true,
         };
     },
-    created() {
-    },
+    created() {},
     methods: {
         ...mapMutations(["SETCHOICELEHEND"]),
         /**
          * 点击左侧固定栏,显隐sidebar
          */
-        openTool(val) {
+        openTool(val, item) {
+            if (item.state === "disabled") return;
             // 左侧固定栏位有选中时,显示sideBar
             if (val != this.chiceStatus) {
                 this.chiceStatus = val;
@@ -153,6 +160,11 @@ li {
                     color: #0091ff;
                 }
             }
+            // 按钮禁用样式
+            .disabled {
+                background: #fff !important;
+                cursor: not-allowed;
+            }
         }
     }
     .sidebarCustom {

+ 6 - 12
src/components/editview/leftToolBar/addEquipmentDialog.vue

@@ -115,7 +115,6 @@
 /**
  * 添加显示实例
  */
-import BasePlanEditer from "../basePlanEditer";
 import { mapState, mapMutations } from "vuex";
 import editInfoPoint from "./editInfoPoint";
 import { Select, TreeSelect } from "meri-design";
@@ -139,10 +138,8 @@ export default {
             timer: null,
             showPopover: false, //选择设备 popover是否显示
             dataTree1: [],
-            dataTree2: [], // cloneDeep(dataTree),
-            dataTree3: [], // cloneDeep(dataTree),
+            dataTree3: [],
             selectedIds1: [],
-            selectedIds2: [],
             selectedIds3: [],
             curentSelectTree1: [], //选中的设备 实例范围
             curentSelectTree2: [], //选中的空间 分区类型
@@ -407,11 +404,8 @@ export default {
          *  关闭弹窗
          */
         close() {
-            console.log("close");
-            // dialogTableVisible
             this.dialogTableVisible = false;
             this.showPopover = false;
-            // clearTimeout(this.timer);
             this.$emit("closeModal");
         },
         /**
@@ -444,11 +438,11 @@ export default {
                 this.ADDRULE(res.entityList[0]);
                 // 接口成功之后,发出添加设备指令
                 bus.$emit("addEquipment", this.tableDataBak);
-                let timer = setTimeout(() => {
-                    this.dialogTableVisible = false;
-                    this.showPopover = false;
-                }, 1000);
-                timer = null;
+                // let timer = setTimeout(() => {
+                this.dialogTableVisible = false;
+                this.showPopover = false;
+                // }, 1000);
+                // timer = null;
             } else {
                 this.$message.error(res.message || "添加失败");
             }

+ 122 - 89
src/components/editview/leftToolBar/addSpaceDialog.vue

@@ -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;