瀏覽代碼

'批量绑定'

zhangyu 4 年之前
父節點
當前提交
458d1c0522
共有 2 個文件被更改,包括 578 次插入545 次删除
  1. 411 138
      src/components/edit/edit-dialog-old.vue
  2. 167 407
      src/components/edit/edit-dialog.vue

+ 411 - 138
src/components/edit/edit-dialog-old.vue

@@ -106,25 +106,44 @@
                 </a-button>
             </template>
             <div class="bind-content">
-                <p>{{`系统自动将其他平面图中的“${GraphElementName?GraphElementName:"图例"}”绑定相同台账,涉及以下平面图:`}}</p>
-                <div class="bind-box" v-for="(data, key) in bindData" :key="key" v-show="Object.keys(data).length">
-                    <h3 class="bind-title" v-if="Object.keys(data).length">{{key == "HasPub"?"已发布的平面图":"草稿箱中的平面图"}}</h3>
-                    <p v-if="data.floor">{{`${data.floor.Name}—${data.floor.FloorName.join('、')}`}}</p>
-                    <div class="bind-equip" v-if="data.equip && data.equip.length">
-                        <div class="bind-equip-title">设备设施—</div>
-                        <div class="bind-equip-list">
-                            <p class="bind-equip-item" v-for="equip in data.equip" :key="equip.Id" :title="`${equip.Name}—${equip.FloorName.join('、')}`">
-                                {{`${equip.Name}—${equip.FloorName.join('、')}`}}
-                            </p>
+                <p class="bind-text" :title="`系统自动将其他平面图中的“${GraphElementName?GraphElementName:'图例'}”绑定相同台账,涉及以下平面图:`">
+                    {{`系统自动将其他平面图中的“${GraphElementName?GraphElementName:'图例'}”绑定相同台账,涉及以下平面图:`}}
+                </p>
+                <div class="bind-floor">
+                    <div class="bind-left">
+                        <div class="bind-box">
+                            <!-- <h3 class="bind-title" v-if="Object.keys(data).length">{{key == "HasPub"?"已发布的平面图":"草稿箱中的平面图"}}</h3> -->
+                            <el-tree
+                                ref="tree"
+                                :data="bindTreeData"
+                                :default-expand-all = true
+                                node-key="Id"
+                                show-checkbox
+                                @node-click="handleNodeClick"
+                            >
+                            </el-tree>
+                            <!-- <p v-if="data.floor">{{`${data.floor.Name}—${data.floor.FloorName.join('、')}`}}</p>
+                            <div class="bind-equip" v-if="data.equip && data.equip.length">
+                                <div class="bind-equip-title">设备设施—</div>
+                                <div class="bind-equip-list">
+                                    <p class="bind-equip-item" v-for="equip in data.equip" :key="equip.Id" :title="`${equip.Name}—${equip.FloorName.join('、')}`">
+                                        {{`${equip.Name}—${equip.FloorName.join('、')}`}}
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="bind-equip" v-if="data.system && data.system.length">
+                                <div class="bind-equip-title">系统原理图—</div>
+                                <div class="bind-equip-list">
+                                    <p class="bind-equip-item" v-for="system in data.system" :key="system.Id" :title="`${system.Name}—${system.FloorName.join('、')}`">
+                                        {{`${system.Name}—${system.FloorName.join('、')}`}}
+                                    </p>
+                                </div>
+                            </div> -->
                         </div>
                     </div>
-                    <div class="bind-equip" v-if="data.system && data.system.length">
-                        <div class="bind-equip-title">系统原理图—</div>
-                        <div class="bind-equip-list">
-                            <p class="bind-equip-item" v-for="system in data.system" :key="system.Id" :title="`${system.Name}—${system.FloorName.join('、')}`">
-                                {{`${system.Name}—${system.FloorName.join('、')}`}}
-                            </p>
-                        </div>
+                    <div class="bind-right" v-loading="canvasLoading">
+                        <p style="margin-bottom: 10px;" v-show="mapType && mapFloor">{{`${mapType}-${mapFloor}平面图`}}</p>
+                        <canvas id="bind-canvas" :width="514" :height="410" ref="bind-canvas" tabindex="0"></canvas>
                     </div>
                 </div>
             </div>
@@ -144,11 +163,18 @@
         queryGlsmsLocation,
         graphElementOrderInfoLocal,
         queryFloorByNode,
-        bindAttachObject
+		bindAttachObject,
+		readGroup
     } from "@/api/editer";
     import bus from "@/bus";
     import {getUrlMsg} from '@/components/urlMsg.js';
     import { mapGetters } from 'vuex';
+    import { FloorView } from "@/lib/FloorView";
+    import { EditScence } from "@/components/mapClass/EditScence";
+    import { ProjectRf } from "@saga-web/feng-map";
+	import { SImageItem, SImageShowType } from "@saga-web/graph/lib";
+	import { STopologyParser } from "@/lib/parsers/STopologyParser";
+    import { SFloorParser, SBoardItem } from "@saga-web/big";
 
     export default {
         name: "edit-dialog",
@@ -257,7 +283,6 @@
                     },
                 ],
                 tableData: [],
-                loading: false,
                 page: 1,
                 size: 10,
                 treeData: [],
@@ -272,11 +297,15 @@
                 GraphElementName: "",
                 visibleBind: false, // 是否显示批量绑定弹窗
                 isRem: false, // 是否记住操作
-                bindData: {
-                    HasPub: {},
-                    NotPub: {}
-                },
-                GraphsIdList: []
+                mapType: "",
+                mapFloor: "",
+                bindTreeData: [],
+                GraphsIdList: [],
+                view: '',
+                scene: '',
+                mapServerURL: "http://map.wanda.cn/editor",
+                selectedNode: {},
+                canvasLoading: false
             }
         },
         watch: {
@@ -295,9 +324,7 @@
                     else{
                         this.getQuerySmsxtBy(this.majorId,'Image')
                     }
-
                 }
-
             }
         },
         methods: {
@@ -305,26 +332,6 @@
                 this.visible = true;
             },
             handleOk(e) {
-                // this.loading = true;
-                // this.visible = false;
-                // this.loading = false;
-                // const lists = [];
-                // let arr = [];
-                // arr = JSON.parse(JSON.stringify(this.arrList))
-                // arr.map(item => {
-                //     if (item.type=='Zone') {
-                //         lists.push({id: item.location, name: item.wzjc , type: 'Zone'})
-                //     }
-                //     if (item.type=='Image') {
-                //         lists.push({
-                //             id: item.assetnum,
-                //             name: item.sbjc,
-                //             type: 'Image'
-                //         })
-                //     }
-                // })
-                // bus.$emit('changeAttachObjectIds', lists, true)
-                // bus.$emit('updateAttachMsg', lists)
                 setTimeout(() => {
                     const lists = [];
                     let arr = [];
@@ -354,71 +361,132 @@
                     this.visible = false;
                 }
             },
+            handleNodeClick(data, node) {
+                if (data && data.Id) {
+                    this.mapFloor = data.label;
+                    this.mapType = node.parent.data.label;
+                    if (data.id == this.selectedNode.id) {
+                        return
+                    }
+                    this.canvasLoading = true;
+                    this.selectedNode = data;
+                    this.initGraph()
+                } else {
+                    this.mapFloor = "";
+                    this.mapType = "";
+                    this.selectedNode = {};
+                    this.clearGraphy()
+                }
+            },
             // 查询相关图并打开批量绑定弹窗
             getBindGraphs() {
                 // 初始化数据
-                this.bindData = {HasPub: {}, NotPub: {}};
-                this.bindTreeData = {HasPub: [], NotPub: []};
-                this.GraphsIdList = [];
+                this.bindTreeData = [];
                 queryFloorByNode({graphElementId: this.GraphElementId,graphElementName: this.GraphElementName,projectId: this.projectId}).then(res => {
                     if (res.Data && ((res.Data.HasPub && res.Data.HasPub.length) || (res.Data.NotPub && res.Data.NotPub.length))) {
                         const data = res.Data;
                         Object.keys(data).forEach(key => {
                             if (data[key].length) {
+                                if (key == "HasPub") {
+                                    this.bindTreeData.push({
+                                        id: "HasPub",
+                                        label: "已发布的平面图",
+                                        children: []
+                                    })
+                                } else if (key == "NotPub") {
+                                    this.bindTreeData.push({
+                                        id: "NotPub",
+                                        label: "草稿箱中的平面图",
+                                        children: []
+                                    })
+                                }
+                                const bindTreeData = this.bindTreeData[this.bindTreeData.length - 1].children;
                                 data[key].forEach(item => {
                                     if (item.Id == "LCGN") { // 楼层功能
-                                        this.bindData[key].floor = {
-                                            Id: item.Id,
-                                            Name: item.Name,
-                                            FloorName: []
-                                        }
-                                        const floor = this.bindData[key].floor;
+                                        bindTreeData.push({
+                                            id: item.Id,
+                                            label: item.Name,
+                                            children: []
+                                        })
+                                        const floorTreeLast = bindTreeData[bindTreeData.length - 1];
                                         if (item.Graphs.length) {
                                             item.Graphs.forEach(graph => {
-                                                floor.FloorName.push(graph.Floor.Code);
-                                                this.GraphsIdList.push(graph.Id);
+                                                graph.label = graph.Floor.Code;
+												graph.id = graph.Id;
+												graph.Type = this.bindTreeData[this.bindTreeData.length - 1].id;
+                                                floorTreeLast.children.push(graph);
                                             })
                                         }
                                     } else if (item.Id == "XFBFYCFL" || item.Id == "FZQZL") { // 系统原理图
-                                        if (this.bindData[key].system) {
-                                            this.bindData[key].system.push({
-                                                Id: item.Id,
-                                                Name: item.Name,
-                                                FloorName: []
+                                        const index = bindTreeData.findIndex(item => {
+                                            return item.id == "XTYLT"
+                                        })
+                                        if (index != -1) {
+                                            bindTreeData[index].children.push({
+                                                id: item.Id,
+                                                label: item.Name,
+                                                children: []
+                                            })
+                                        } else {
+                                            bindTreeData.push({
+                                                id: "XTYLT",
+                                                label: "系统原理图",
+                                                children: [{
+                                                    id: item.Id,
+                                                    label: item.Name,
+                                                    children: []
+                                                }]
                                             })
+                                        }
+                                        let system;
+                                        if (index != -1) {
+                                            system = bindTreeData[index];
                                         } else {
-                                            this.bindData[key].system = [{
-                                                Id: item.Id,
-                                                Name: item.Name,
-                                                FloorName: []
-                                            }]
+                                            system = bindTreeData[bindTreeData.length - 1];
                                         }
-                                        const systemLast = this.bindData[key].system[this.bindData[key].system.length - 1];
+                                        const systemTreeLast = system.children[system.children.length - 1];
                                         if (item.Graphs.length) {
                                             item.Graphs.forEach(graph => {
-                                                systemLast.FloorName.push(graph.Floor.Code);
-                                                this.GraphsIdList.push(graph.Id);
+                                                graph.label = graph.Floor.Code;
+												graph.id = graph.Id;
+												graph.Type = this.bindTreeData[this.bindTreeData.length - 1].id;
+                                                systemTreeLast.children.push(graph);
                                             })
                                         }
                                     } else { // 设备设施
-                                        if (this.bindData[key].equip) {
-                                            this.bindData[key].equip.push({
-                                                Id: item.Id,
-                                                Name: item.Name,
-                                                FloorName: []
+                                        const index = bindTreeData.findIndex(item => {
+                                            return item.id == "SBSS"
+                                        })
+                                        if (index != -1) {
+                                            bindTreeData[index].children.push({
+                                                id: item.Id,
+                                                label: item.Name,
+                                                children: []
                                             })
                                         } else {
-                                            this.bindData[key].equip = [{
-                                                Id: item.Id,
-                                                Name: item.Name,
-                                                FloorName: []
-                                            }]
+                                            bindTreeData.push({
+                                                id: "SBSS",
+                                                label: "设备设施",
+                                                children: [{
+                                                    id: item.Id,
+                                                    label: item.Name,
+                                                    children: []
+                                                }]
+                                            })
+                                        }
+                                        let equip;
+                                        if (index != -1) {
+                                            equip = bindTreeData[index];
+                                        } else {
+                                            equip = bindTreeData[bindTreeData.length - 1];
                                         }
-                                        const equipLast = this.bindData[key].equip[this.bindData[key].equip.length - 1];
+                                        const equipTreeLast = equip.children[equip.children.length - 1];
                                         if (item.Graphs.length) {
                                             item.Graphs.forEach(graph => {
-                                                equipLast.FloorName.push(graph.Floor.Code);
-                                                this.GraphsIdList.push(graph.Id);
+                                                graph.label = graph.Floor.Code;
+												graph.id = graph.Id;
+												graph.Type = this.bindTreeData[this.bindTreeData.length - 1].id;
+                                                equipTreeLast.children.push(graph);
                                             })
                                         }
                                     }
@@ -430,9 +498,7 @@
                         this.visible = false;
                     }
                 })
-                console.log("bindData+++++++++++++++++++++++",this.bindData);
                 console.log("bindTreeData+++++++++++++++++++++++",this.bindTreeData);
-                console.log("GraphsIdList++++++++++++++++++++",this.GraphsIdList);
             },
             handleCancel(e) {
                 this.visible = false;
@@ -471,6 +537,8 @@
             },
             // 点击批量绑定按钮
             handleClickBind(Marked) {
+                this.GraphsIdList = [];
+                this.GraphsIdList = this.$refs.tree.getCheckedKeys().filter(d => d);
                 const lists = [];
                 let params = {};
                 let arr = [];
@@ -905,8 +973,212 @@
                     })
                 }
 
-            }
-        },
+            },
+            // 清除底图
+            clearGraphy() {
+                if (this.view) {
+                    this.view.scene = null;
+                    return;
+                }
+                this.view = new FloorView("bind-canvas");
+                document.getElementById("bind-canvas").focus();
+            },
+            // 初始化
+            initGraph(){
+                this.clearGraphy();
+				this.scene = new EditScence();
+                this.scene.isEditStatus = false;
+				this.parserData(this.selectedNode.FloorId)
+            },
+            // 解析数据
+			parserData(floor) {
+				const obj = getUrlMsg()
+				this.floorList = window.FENGMAP.gnameToGid
+				if (floor == "g80") {
+					// 屋顶
+					if (window.FENGMAP.frImg) {
+					const pj = obj.fmapID.split('_')[0]
+					// 单张图片
+					if (!ProjectRf[pj]) {
+						const imgItem = new SImageItem(
+						null,
+						`${this.mapServerURL}/webtheme/${obj.fmapID}/${window.FENGMAP.frImg}`
+						);
+						imgItem.showType = SImageShowType.AutoFit;
+						imgItem.connect("imgLoadOver", this, () => {
+							this.readGraph();
+						});
+						this.scene.addItem(imgItem);
+						this.view.scene = this.scene;
+					} else {
+						// 多张图
+						try {
+							// 初始化0
+							this.count = 0;
+							ProjectRf[pj].forEach(t => {
+								const item = new SImageItem(
+								null,
+								`${this.mapServerURL}/webtheme/${obj.fmapID}/${t.name}`
+								);
+								item.width = t.width
+								item.height = t.height
+								item.moveTo(t.x, t.y)
+								item.connect("imgLoadOver", this, () => {
+									this.countRf(ProjectRf[pj].length);
+								});
+								this.scene.addItem(item);
+							})
+							this.view.scene = this.scene;
+						} catch(e) {
+							console.log(e);
+						}
+					}
+					} else {
+					// 屋顶图不为图片
+					this.readBaseMap(floor);
+					}
+				} else {
+					if (this.floorList[floor]) {
+						this.readBaseMap(floor);
+					} else {
+						console.log("楼层不正确");
+					}
+				}
+			},
+			// 顶楼为多张图时计数器
+			countRf(len) {
+				this.count++
+				console.log(len == this.count);
+				if (len == this.count) {
+					this.readGraph();
+				} else {
+					console.log('所有图片未加载完成');
+				}
+			},
+			// 读取绘制数据
+			readGraph() {
+                const pa = {
+                    categoryId: this.selectedNode.CategoryId,
+					projectId: this.selectedNode.ProjectId,
+					BuildingID: this.selectedNode.BuildingId, // 建筑ID
+                    FloorID: this.selectedNode.FloorId, // 楼层id
+                    Pub: this.selectedNode.Type == "HasPub", // false-草稿箱
+                }
+				readGroup(pa).then(data => {
+					if (data.Data) {
+					this.graphId = data.Data[0].ID;
+					const parserData = new STopologyParser(null);
+					const itemMap = {};
+					parserData.parseData(data.Data[0].Elements);
+					// 多边形(此item需在直线item添加之前添加)
+					parserData.zoneLegendList.forEach(t => {
+						this.scene.addItem(t);
+						this.scene.Nodes.push(t);
+						itemMap[t.id] = t;
+					});
+					// 增加文字(此item需在直线item添加之前添加)
+					parserData.textMarkerList.forEach(t => {
+						this.scene.addItem(t);
+						this.scene.Markers.push(t);
+						itemMap[t.id] = t;
+					});
+					// 增加图片(此item需在直线item添加之前添加)
+					parserData.imageMarkerList.forEach(t => {
+						this.scene.addItem(t);
+						this.scene.Markers.push(t);
+						itemMap[t.id] = t;
+					});
+					// 增加图标类图例(此item需在管线item添加之前添加)
+					parserData.imageLegendList.forEach(t => {
+						this.scene.addItem(t);
+						this.scene.Nodes.push(t);
+						if (t.anchorList && t.anchorList.length) {
+                            t.anchorList.forEach(anc => {
+                                itemMap[anc.id] = anc;
+                            });
+						}
+					});
+					// 增加直线
+					parserData.lineMarkerList.forEach(t => {
+						this.scene.addItem(t);
+						this.scene.Markers.push(t);
+						// 设置关联Item
+						if (t.data.Properties && t.data.Properties.StartItemId) {
+                            const startItem = itemMap[t.data.Properties.StartItemId];
+                            startItem?.connect("onMove", t, t.changePos);
+                            t.startItem = startItem || null;
+						}
+						if (t.data.Properties && t.data.Properties.EndItemId) {
+                            const endItem = itemMap[t.data.Properties.EndItemId];
+                            endItem?.connect("onMove", t, t.changePos);
+                            t.endItem = endItem || null;
+						}
+					});
+					// 增加管线类(需在图标类图例添加后添加)
+					parserData.relationList.forEach(t => {
+						this.scene.addItem(t);
+						this.scene.Relations.push(t);
+						// 设置锚点
+						if (t.anchor1ID) {
+						const startAnc = itemMap[t.anchor1ID];
+						if (startAnc) {
+							startAnc.isConnected = true;
+							startAnc.parent?.connect("changePos", t, t.changePos);
+							t.startAnchor = startAnc || null;
+						}
+						}
+						if (t.anchor2ID) {
+						const endAnc = itemMap[t.anchor2ID];
+						if (endAnc) {
+							endAnc.isConnected = true;
+							endAnc.parent?.connect("changePos", t, t.changePos);
+							t.endAnchor = endAnc || null;
+						}
+						}
+					});
+					}
+					this.view.fitSceneToView();
+                    this.canvasLoading = false;
+				});
+			},
+			// 解析底图
+			readBaseMap(floor){
+                this.loadBoard(this.floorList[floor]);
+                window.FENGMAP.parseData(this.floorList[floor], res => {
+                    if (res.err) {
+                        console.log(res.err);
+                        return;
+                    }
+                    this.fParser = new SFloorParser(null);
+                    this.fParser.parseData(res);
+                    this.scene.fidToItem = {};
+                    this.fParser.spaceList.forEach(t => {
+                        t.nameColor = "#2a2a2a";
+                        t.zOrder = t.zOrder + t.data.Height;
+                        t.selectable = true;
+                        this.scene.addItem(t);
+                    });
+                    this.scene.spaceList = this.fParser.spaceList;
+                    this.fParser.wallList.forEach(t => {
+                        this.scene.addItem(t)
+                    });
+                    this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
+                    this.fParser.doorList.forEach(t => this.scene.addItem(t));
+                    this.fParser.columnList.forEach(t => this.scene.addItem(t));
+                    this.fParser.casementList.forEach(t => this.scene.addItem(t));
+                    this.view.scene = this.scene;
+                    this.readGraph();
+                    console.log("success");
+                });
+			},
+            // 解析楼地板
+            loadBoard(floor){
+                window.FENGMAP.loadFloor(floor, res => {
+                    const zone = new SBoardItem(null, res)
+                    this.scene.addItem(zone);
+                })
+            },
+		},
         created() {
             // 取gcname
             this.floorId = getUrlMsg().FloorID;
@@ -950,20 +1222,16 @@
             border: 1px solid rgba(239, 240, 241, 1);
             display: flex;
             /*overflow: auto;*/
-
             .left {
                 width: 865px;
                 border-right: 1px solid #EFF0F1;
-
                 .header {
                     width: 865px;
-
                     .select {
                         width: 340px;
                         border-right: 1px solid #EFF0F1;
                         display: inline-block;
                     }
-
                     .search {
                         width: 524px;
                         display: inline-block;
@@ -973,17 +1241,12 @@
                             position: relative;
                             top: -2px;
                         }
-
                         .press-enter {
                             margin-left: 10px;
                             width: 236px;
                         }
                     }
-
-
                 }
-
-
                 .tree {
                     width: 339px;
                     height: 441px;
@@ -992,9 +1255,7 @@
                     float: left;
                     overflow-y: scroll;
                     overflow: overlay;
-
                 }
-
                 .checkbox {
                     /*margin-top: 17px;*/
                     /*margin-left: 13px;*/
@@ -1004,7 +1265,6 @@
                     display: flex;
                     flex-direction: column;
                     justify-content: space-between;
-
                     /deep/ .ant-table-selection-column {
                         .ant-table-header-column {
                             display: none;
@@ -1012,21 +1272,18 @@
                     }
                 }
             }
-
             .right {
                 flex-grow: 1;
 
                 .list-box {
                     height: 440px;
                     overflow-y: scroll;
-
                     .list {
                         background: rgba(239, 240, 241, 1);
                         border-radius: 2px;
                         margin: 8px 12px;
                         position: relative;
                         padding: 5px;
-
                         .icon {
                             position: absolute;
                             bottom: 5px;
@@ -1035,19 +1292,14 @@
                         }
                     }
                 }
-
-
                 .select-number {
                     margin-left: 12px;
-
                 }
-
                 .link {
                     float: right;
                     line-height: 57px;
                 }
             }
-
             .header {
                 height: 57px;
                 line-height: 57px;
@@ -1056,42 +1308,63 @@
         }
 
         .bind-content {
-            max-height: 250px;
-            overflow-y: auto;
-            overflow-x: hidden;
-            .bind-box {
-                margin-top: 20px;
-                .bind-title {
-                    padding: 0 8px;
-                    height: 16px;
-                    line-height: 16px;
-                    border-left: 3px solid #0091FF;
-                    margin-bottom: 8px;
-                    font-size: 16px;
-                    font-family: MicrosoftYaHeiSemibold;
-                    color: #1f2429;
-                    font-weight: bold;
-                }
-                .bind-equip{
-                    display: flex;
-                    .bind-equip-title {
-                        white-space: nowrap;
-                    }
-                    .bind-equip-list {
-                        flex: 1;
-                        overflow: hidden;
-                        .bind-equip-item {
-                            cursor: pointer;
-                            white-space: nowrap;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
+            height: 500px;
+            .bind-text {
+                cursor: pointer;
+                margin-bottom: 10px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .bind-floor {
+                display: flex;
+                flex-direction: row;
+                height: 480px;
+                overflow-x: hidden;
+                overflow-y: auto;
+                .bind-left {
+                    width: 240px;
+                    border: 1px solid #E4E5E7;
+                    .bind-box {
+                        margin-top: 20px;
+                        .bind-title {
+                            padding: 0 8px;
+                            height: 16px;
+                            line-height: 16px;
+                            border-left: 3px solid #0091FF;
+                            margin-bottom: 8px;
+                            font-size: 16px;
+                            font-family: MicrosoftYaHeiSemibold;
+                            color: #1f2429;
+                            font-weight: bold;
                         }
-                    }
+                        .bind-equip{
+                            display: flex;
+                            .bind-equip-title {
+                                white-space: nowrap;
+                            }
+                            .bind-equip-list {
+                                flex: 1;
+                                overflow: hidden;
+                                .bind-equip-item {
+                                    cursor: pointer;
+                                    white-space: nowrap;
+                                    overflow: hidden;
+                                    text-overflow: ellipsis;
+                                }
+                            }
 
+                        }
+                    } 
+                }
+                .bind-right {
+                    flex: 1;
+                    padding: 16px;
+                    border: 1px solid #E4E5E7;
+                    border-left: none;
                 }
             }
         }
-
         /deep/ .ant-input-affix-wrapper .ant-input-suffix {
             /*left: 12px;*/
             /*padding-right: 12px;*/

+ 167 - 407
src/components/edit/edit-dialog.vue

@@ -93,7 +93,7 @@
             </div>
         </a-modal>
 
-        <a-modal v-model="visibleBind" title="是否批量绑定图例" width="840px" class="edit-dialog" @cancel="handleClickCancel" centered>
+        <a-modal v-model="visibleBind" title="是否批量绑定图例" width="840px" class="edit-dialog" @cancel="handleClickCancel">
             <template slot="footer">
                 <a-checkbox @change="onChangeRemember" :checked="isRem" style="margin-top: 5px;margin-right: 10px;">
                     记住操作,不再提醒
@@ -106,45 +106,49 @@
                 </a-button>
             </template>
             <div class="bind-content">
-                <p class="bind-text" :title="`系统自动将其他平面图中的“${GraphElementName?GraphElementName:'图例'}”绑定相同台账,涉及以下平面图:`">
-                    {{`系统自动将其他平面图中的“${GraphElementName?GraphElementName:'图例'}”绑定相同台账,涉及以下平面图:`}}
-                </p>
-                <div class="bind-floor">
-                    <div class="bind-left">
-                        <div class="bind-box">
-                            <!-- <h3 class="bind-title" v-if="Object.keys(data).length">{{key == "HasPub"?"已发布的平面图":"草稿箱中的平面图"}}</h3> -->
-                            <el-tree
-                                ref="tree"
-                                :data="bindTreeData"
-                                :default-expand-all = true
-                                node-key="Id"
-                                show-checkbox
-                                @node-click="handleNodeClick"
-                            >
-                            </el-tree>
-                            <!-- <p v-if="data.floor">{{`${data.floor.Name}—${data.floor.FloorName.join('、')}`}}</p>
-                            <div class="bind-equip" v-if="data.equip && data.equip.length">
-                                <div class="bind-equip-title">设备设施—</div>
+                <p>{{`系统自动将其他平面图中的“${GraphElementName?GraphElementName:"图例"}”绑定相同台账,涉及以下平面图:`}}</p>
+                <div class="bind-box" v-for="(data, key) in bindData" :key="key" v-show="Object.keys(data).length">
+                    <h3 class="bind-title" v-if="Object.keys(data).length">
+                        <i :class="[isOpen[key]?'el-icon-caret-bottom':'el-icon-caret-right']" @click="handleHiddenBox(key)" style="color: #C3C6CB;cursor: pointer;margin-right: 8px;"></i>
+                        <el-checkbox v-model="checkAll[key]" @change="handleCheckAllChange(key, checkAll[key])"></el-checkbox>
+                        <span style="font-size: 14px;color: #1F2429;margin-left: 4px;font-weight: bold;">{{key == "HasPub"?"已发布的平面图":"草稿箱中的平面图"}}</span>
+                    </h3>
+                    <div class="bind-type-box" :ref="key">
+                        <div style="margin-top: 10px;" v-if="data.floor">
+                            <div v-show="data.floor.FloorName.length">
+                                <el-checkbox v-model="data.floor.Checked" :ref="`${key}check`" @change="handleCheckChange(key, data.floor.Checked)"></el-checkbox>
+                                {{`${data.floor.Name}`}}
+                                <el-link :underline="false" type="primary" style="vertical-align: baseline;margin-left: 5px;">查看</el-link>
+                            </div>
+                            <div class="bind-equip-list">
+                                <el-tag v-for="floor in data.floor.FloorName" :key="floor" size="small" type="info" closable>{{floor}}</el-tag>
+                            </div>
+                        </div>
+                        <div class="bind-equip" v-if="data.equip && data.equip.length">
+                            <div class="bind-equip-box" v-for="equip in data.equip" :key="equip.Id" v-show="equip.FloorName.length">
+                                <div class="bind-equip-title">
+                                    <el-checkbox v-model="equip.Checked" :ref="`${key}check`" @change="handleCheckChange(key, equip.Checked)"></el-checkbox>
+                                    {{`设备设施:${equip.Name}`}}
+                                    <el-link :underline="false" type="primary" style="vertical-align: baseline;margin-left: 5px;">查看</el-link>
+                                </div>
                                 <div class="bind-equip-list">
-                                    <p class="bind-equip-item" v-for="equip in data.equip" :key="equip.Id" :title="`${equip.Name}—${equip.FloorName.join('、')}`">
-                                        {{`${equip.Name}—${equip.FloorName.join('、')}`}}
-                                    </p>
+                                    <el-tag v-for="floor in equip.FloorName" :key="floor" size="small" type="info" closable>{{floor}}</el-tag>
                                 </div>
                             </div>
-                            <div class="bind-equip" v-if="data.system && data.system.length">
-                                <div class="bind-equip-title">系统原理图—</div>
+                        </div>
+                        <div class="bind-equip" v-if="data.system && data.system.length">
+                            <div class="bind-equip-box" v-for="system in data.system" :key="system.Id" v-show="system.FloorName.length">
+                                <div class="bind-equip-title">
+                                    <el-checkbox v-model="system.Checked" :ref="`${key}check`" @change="handleCheckChange(key, system.Checked)"></el-checkbox>
+                                    {{`系统原理图:${system.Name}`}}
+                                    <el-link :underline="false" type="primary" style="vertical-align: baseline;margin-left: 5px;">查看</el-link>
+                                </div>
                                 <div class="bind-equip-list">
-                                    <p class="bind-equip-item" v-for="system in data.system" :key="system.Id" :title="`${system.Name}—${system.FloorName.join('、')}`">
-                                        {{`${system.Name}—${system.FloorName.join('、')}`}}
-                                    </p>
+                                    <el-tag v-for="floor in system.FloorName" :key="floor" size="small" type="info" closable>{{floor}}</el-tag>
                                 </div>
-                            </div> -->
+                            </div>
                         </div>
                     </div>
-                    <div class="bind-right" v-loading="canvasLoading">
-                        <p style="margin-bottom: 10px;" v-show="mapType && mapFloor">{{`${mapType}-${mapFloor}平面图`}}</p>
-                        <canvas id="bind-canvas" :width="514" :height="410" ref="bind-canvas" tabindex="0"></canvas>
-                    </div>
                 </div>
             </div>
         </a-modal>
@@ -163,18 +167,11 @@
         queryGlsmsLocation,
         graphElementOrderInfoLocal,
         queryFloorByNode,
-		bindAttachObject,
-		readGroup
+        bindAttachObject
     } from "@/api/editer";
     import bus from "@/bus";
     import {getUrlMsg} from '@/components/urlMsg.js';
     import { mapGetters } from 'vuex';
-    import { FloorView } from "@/lib/FloorView";
-    import { EditScence } from "@/components/mapClass/EditScence";
-    import { ProjectRf } from "@saga-web/feng-map";
-	import { SImageItem, SImageShowType } from "@saga-web/graph/lib";
-	import { STopologyParser } from "@/lib/parsers/STopologyParser";
-    import { SFloorParser, SBoardItem } from "@saga-web/big";
 
     export default {
         name: "edit-dialog",
@@ -283,6 +280,7 @@
                     },
                 ],
                 tableData: [],
+                loading: false,
                 page: 1,
                 size: 10,
                 treeData: [],
@@ -297,15 +295,19 @@
                 GraphElementName: "",
                 visibleBind: false, // 是否显示批量绑定弹窗
                 isRem: false, // 是否记住操作
-                mapType: "",
-                mapFloor: "",
-                bindTreeData: [],
-                GraphsIdList: [],
-                view: '',
-                scene: '',
-                mapServerURL: "http://map.wanda.cn/editor",
-                selectedNode: {},
-                canvasLoading: false
+                isOpen: {
+                    HasPub: true,
+                    NotPub: true
+                },
+                checkAll: {
+                    HasPub: true,
+                    NotPub: true
+                },
+                bindData: {
+                    HasPub: {},
+                    NotPub: {}
+                },
+                GraphsIdList: []
             }
         },
         watch: {
@@ -324,14 +326,57 @@
                     else{
                         this.getQuerySmsxtBy(this.majorId,'Image')
                     }
+
                 }
+
             }
         },
         methods: {
             showModal() {
                 this.visible = true;
             },
+            handleHiddenBox(key) {
+                this.isOpen[key] = !this.isOpen[key];
+                this.$refs[key][0].style.display = this.$refs[key][0].style.display == "none"? "block" : "none";
+            },
+            // 全选
+            handleCheckAllChange(key, check) {
+                this.$refs[`${key}check`].forEach(el => {
+                    el.model = check
+                })
+            },
+
+            // 复选框
+            handleCheckChange(key, check) {
+                // if (check) {
+                //     if (this.$refs[`${key}check`].find(el => {return el.model == false}) != -1) {
+                //         this.checkAll[key] = check;
+                //     }
+                // } else {
+                //     this.checkAll[key] = check;
+                // }
+            },
             handleOk(e) {
+                // this.loading = true;
+                // this.visible = false;
+                // this.loading = false;
+                // const lists = [];
+                // let arr = [];
+                // arr = JSON.parse(JSON.stringify(this.arrList))
+                // arr.map(item => {
+                //     if (item.type=='Zone') {
+                //         lists.push({id: item.location, name: item.wzjc , type: 'Zone'})
+                //     }
+                //     if (item.type=='Image') {
+                //         lists.push({
+                //             id: item.assetnum,
+                //             name: item.sbjc,
+                //             type: 'Image'
+                //         })
+                //     }
+                // })
+                // bus.$emit('changeAttachObjectIds', lists, true)
+                // bus.$emit('updateAttachMsg', lists)
                 setTimeout(() => {
                     const lists = [];
                     let arr = [];
@@ -361,132 +406,76 @@
                     this.visible = false;
                 }
             },
-            handleNodeClick(data, node) {
-                if (data && data.Id) {
-                    this.mapFloor = data.label;
-                    this.mapType = node.parent.data.label;
-                    if (data.id == this.selectedNode.id) {
-                        return
-                    }
-                    this.canvasLoading = true;
-                    this.selectedNode = data;
-                    this.initGraph()
-                } else {
-                    this.mapFloor = "";
-                    this.mapType = "";
-                    this.selectedNode = {};
-                    this.clearGraphy()
-                }
-            },
             // 查询相关图并打开批量绑定弹窗
             getBindGraphs() {
                 // 初始化数据
-                this.bindTreeData = [];
+                this.bindData = {HasPub: {}, NotPub: {}};
+                this.bindTreeData = {HasPub: [], NotPub: []};
+                this.GraphsIdList = [];
                 queryFloorByNode({graphElementId: this.GraphElementId,graphElementName: this.GraphElementName,projectId: this.projectId}).then(res => {
                     if (res.Data && ((res.Data.HasPub && res.Data.HasPub.length) || (res.Data.NotPub && res.Data.NotPub.length))) {
                         const data = res.Data;
                         Object.keys(data).forEach(key => {
                             if (data[key].length) {
-                                if (key == "HasPub") {
-                                    this.bindTreeData.push({
-                                        id: "HasPub",
-                                        label: "已发布的平面图",
-                                        children: []
-                                    })
-                                } else if (key == "NotPub") {
-                                    this.bindTreeData.push({
-                                        id: "NotPub",
-                                        label: "草稿箱中的平面图",
-                                        children: []
-                                    })
-                                }
-                                const bindTreeData = this.bindTreeData[this.bindTreeData.length - 1].children;
                                 data[key].forEach(item => {
                                     if (item.Id == "LCGN") { // 楼层功能
-                                        bindTreeData.push({
-                                            id: item.Id,
-                                            label: item.Name,
-                                            children: []
-                                        })
-                                        const floorTreeLast = bindTreeData[bindTreeData.length - 1];
+                                        this.bindData[key].floor = {
+                                            Id: item.Id,
+                                            Name: item.Name,
+                                            Checked: true,
+                                            FloorName: []
+                                        }
+                                        const floor = this.bindData[key].floor;
                                         if (item.Graphs.length) {
                                             item.Graphs.forEach(graph => {
-                                                graph.label = graph.Floor.Code;
-												graph.id = graph.Id;
-												graph.Type = this.bindTreeData[this.bindTreeData.length - 1].id;
-                                                floorTreeLast.children.push(graph);
+                                                floor.FloorName.push(graph.Floor.Code);
+                                                this.GraphsIdList.push(graph.Id);
                                             })
                                         }
                                     } else if (item.Id == "XFBFYCFL" || item.Id == "FZQZL") { // 系统原理图
-                                        const index = bindTreeData.findIndex(item => {
-                                            return item.id == "XTYLT"
-                                        })
-                                        if (index != -1) {
-                                            bindTreeData[index].children.push({
-                                                id: item.Id,
-                                                label: item.Name,
-                                                children: []
-                                            })
-                                        } else {
-                                            bindTreeData.push({
-                                                id: "XTYLT",
-                                                label: "系统原理图",
-                                                children: [{
-                                                    id: item.Id,
-                                                    label: item.Name,
-                                                    children: []
-                                                }]
+                                        if (this.bindData[key].system) {
+                                            this.bindData[key].system.push({
+                                                Id: item.Id,
+                                                Name: item.Name,
+                                                Checked: true,
+                                                FloorName: []
                                             })
-                                        }
-                                        let system;
-                                        if (index != -1) {
-                                            system = bindTreeData[index];
                                         } else {
-                                            system = bindTreeData[bindTreeData.length - 1];
+                                            this.bindData[key].system = [{
+                                                Id: item.Id,
+                                                Name: item.Name,
+                                                Checked: true,
+                                                FloorName: []
+                                            }]
                                         }
-                                        const systemTreeLast = system.children[system.children.length - 1];
+                                        const systemLast = this.bindData[key].system[this.bindData[key].system.length - 1];
                                         if (item.Graphs.length) {
                                             item.Graphs.forEach(graph => {
-                                                graph.label = graph.Floor.Code;
-												graph.id = graph.Id;
-												graph.Type = this.bindTreeData[this.bindTreeData.length - 1].id;
-                                                systemTreeLast.children.push(graph);
+                                                systemLast.FloorName.push(graph.Floor.Code);
+                                                this.GraphsIdList.push(graph.Id);
                                             })
                                         }
                                     } else { // 设备设施
-                                        const index = bindTreeData.findIndex(item => {
-                                            return item.id == "SBSS"
-                                        })
-                                        if (index != -1) {
-                                            bindTreeData[index].children.push({
-                                                id: item.Id,
-                                                label: item.Name,
-                                                children: []
+                                        if (this.bindData[key].equip) {
+                                            this.bindData[key].equip.push({
+                                                Id: item.Id,
+                                                Name: item.Name,
+                                                Checked: true,
+                                                FloorName: []
                                             })
                                         } else {
-                                            bindTreeData.push({
-                                                id: "SBSS",
-                                                label: "设备设施",
-                                                children: [{
-                                                    id: item.Id,
-                                                    label: item.Name,
-                                                    children: []
-                                                }]
-                                            })
+                                            this.bindData[key].equip = [{
+                                                Id: item.Id,
+                                                Name: item.Name,
+                                                Checked: true,
+                                                FloorName: []
+                                            }]
                                         }
-                                        let equip;
-                                        if (index != -1) {
-                                            equip = bindTreeData[index];
-                                        } else {
-                                            equip = bindTreeData[bindTreeData.length - 1];
-                                        }
-                                        const equipTreeLast = equip.children[equip.children.length - 1];
+                                        const equipLast = this.bindData[key].equip[this.bindData[key].equip.length - 1];
                                         if (item.Graphs.length) {
                                             item.Graphs.forEach(graph => {
-                                                graph.label = graph.Floor.Code;
-												graph.id = graph.Id;
-												graph.Type = this.bindTreeData[this.bindTreeData.length - 1].id;
-                                                equipTreeLast.children.push(graph);
+                                                equipLast.FloorName.push(graph.Floor.Code);
+                                                this.GraphsIdList.push(graph.Id);
                                             })
                                         }
                                     }
@@ -498,7 +487,9 @@
                         this.visible = false;
                     }
                 })
+                console.log("bindData+++++++++++++++++++++++",this.bindData);
                 console.log("bindTreeData+++++++++++++++++++++++",this.bindTreeData);
+                console.log("GraphsIdList++++++++++++++++++++",this.GraphsIdList);
             },
             handleCancel(e) {
                 this.visible = false;
@@ -537,8 +528,6 @@
             },
             // 点击批量绑定按钮
             handleClickBind(Marked) {
-                this.GraphsIdList = [];
-                this.GraphsIdList = this.$refs.tree.getCheckedKeys().filter(d => d);
                 const lists = [];
                 let params = {};
                 let arr = [];
@@ -973,212 +962,8 @@
                     })
                 }
 
-            },
-            // 清除底图
-            clearGraphy() {
-                if (this.view) {
-                    this.view.scene = null;
-                    return;
-                }
-                this.view = new FloorView("bind-canvas");
-                document.getElementById("bind-canvas").focus();
-            },
-            // 初始化
-            initGraph(){
-                this.clearGraphy();
-				this.scene = new EditScence();
-                this.scene.isEditStatus = false;
-				this.parserData(this.selectedNode.FloorId)
-            },
-            // 解析数据
-			parserData(floor) {
-				const obj = getUrlMsg()
-				this.floorList = window.FENGMAP.gnameToGid
-				if (floor == "g80") {
-					// 屋顶
-					if (window.FENGMAP.frImg) {
-					const pj = obj.fmapID.split('_')[0]
-					// 单张图片
-					if (!ProjectRf[pj]) {
-						const imgItem = new SImageItem(
-						null,
-						`${this.mapServerURL}/webtheme/${obj.fmapID}/${window.FENGMAP.frImg}`
-						);
-						imgItem.showType = SImageShowType.AutoFit;
-						imgItem.connect("imgLoadOver", this, () => {
-							this.readGraph();
-						});
-						this.scene.addItem(imgItem);
-						this.view.scene = this.scene;
-					} else {
-						// 多张图
-						try {
-							// 初始化0
-							this.count = 0;
-							ProjectRf[pj].forEach(t => {
-								const item = new SImageItem(
-								null,
-								`${this.mapServerURL}/webtheme/${obj.fmapID}/${t.name}`
-								);
-								item.width = t.width
-								item.height = t.height
-								item.moveTo(t.x, t.y)
-								item.connect("imgLoadOver", this, () => {
-									this.countRf(ProjectRf[pj].length);
-								});
-								this.scene.addItem(item);
-							})
-							this.view.scene = this.scene;
-						} catch(e) {
-							console.log(e);
-						}
-					}
-					} else {
-					// 屋顶图不为图片
-					this.readBaseMap(floor);
-					}
-				} else {
-					if (this.floorList[floor]) {
-						this.readBaseMap(floor);
-					} else {
-						console.log("楼层不正确");
-					}
-				}
-			},
-			// 顶楼为多张图时计数器
-			countRf(len) {
-				this.count++
-				console.log(len == this.count);
-				if (len == this.count) {
-					this.readGraph();
-				} else {
-					console.log('所有图片未加载完成');
-				}
-			},
-			// 读取绘制数据
-			readGraph() {
-                const pa = {
-                    categoryId: this.selectedNode.CategoryId,
-					projectId: this.selectedNode.ProjectId,
-					BuildingID: this.selectedNode.BuildingId, // 建筑ID
-                    FloorID: this.selectedNode.FloorId, // 楼层id
-                    Pub: this.selectedNode.Type == "HasPub", // false-草稿箱
-                }
-				readGroup(pa).then(data => {
-					if (data.Data) {
-					this.graphId = data.Data[0].ID;
-					const parserData = new STopologyParser(null);
-					const itemMap = {};
-					parserData.parseData(data.Data[0].Elements);
-					// 多边形(此item需在直线item添加之前添加)
-					parserData.zoneLegendList.forEach(t => {
-						this.scene.addItem(t);
-						this.scene.Nodes.push(t);
-						itemMap[t.id] = t;
-					});
-					// 增加文字(此item需在直线item添加之前添加)
-					parserData.textMarkerList.forEach(t => {
-						this.scene.addItem(t);
-						this.scene.Markers.push(t);
-						itemMap[t.id] = t;
-					});
-					// 增加图片(此item需在直线item添加之前添加)
-					parserData.imageMarkerList.forEach(t => {
-						this.scene.addItem(t);
-						this.scene.Markers.push(t);
-						itemMap[t.id] = t;
-					});
-					// 增加图标类图例(此item需在管线item添加之前添加)
-					parserData.imageLegendList.forEach(t => {
-						this.scene.addItem(t);
-						this.scene.Nodes.push(t);
-						if (t.anchorList && t.anchorList.length) {
-                            t.anchorList.forEach(anc => {
-                                itemMap[anc.id] = anc;
-                            });
-						}
-					});
-					// 增加直线
-					parserData.lineMarkerList.forEach(t => {
-						this.scene.addItem(t);
-						this.scene.Markers.push(t);
-						// 设置关联Item
-						if (t.data.Properties && t.data.Properties.StartItemId) {
-                            const startItem = itemMap[t.data.Properties.StartItemId];
-                            startItem?.connect("onMove", t, t.changePos);
-                            t.startItem = startItem || null;
-						}
-						if (t.data.Properties && t.data.Properties.EndItemId) {
-                            const endItem = itemMap[t.data.Properties.EndItemId];
-                            endItem?.connect("onMove", t, t.changePos);
-                            t.endItem = endItem || null;
-						}
-					});
-					// 增加管线类(需在图标类图例添加后添加)
-					parserData.relationList.forEach(t => {
-						this.scene.addItem(t);
-						this.scene.Relations.push(t);
-						// 设置锚点
-						if (t.anchor1ID) {
-						const startAnc = itemMap[t.anchor1ID];
-						if (startAnc) {
-							startAnc.isConnected = true;
-							startAnc.parent?.connect("changePos", t, t.changePos);
-							t.startAnchor = startAnc || null;
-						}
-						}
-						if (t.anchor2ID) {
-						const endAnc = itemMap[t.anchor2ID];
-						if (endAnc) {
-							endAnc.isConnected = true;
-							endAnc.parent?.connect("changePos", t, t.changePos);
-							t.endAnchor = endAnc || null;
-						}
-						}
-					});
-					}
-					this.view.fitSceneToView();
-                    this.canvasLoading = false;
-				});
-			},
-			// 解析底图
-			readBaseMap(floor){
-                this.loadBoard(this.floorList[floor]);
-                window.FENGMAP.parseData(this.floorList[floor], res => {
-                    if (res.err) {
-                        console.log(res.err);
-                        return;
-                    }
-                    this.fParser = new SFloorParser(null);
-                    this.fParser.parseData(res);
-                    this.scene.fidToItem = {};
-                    this.fParser.spaceList.forEach(t => {
-                        t.nameColor = "#2a2a2a";
-                        t.zOrder = t.zOrder + t.data.Height;
-                        t.selectable = true;
-                        this.scene.addItem(t);
-                    });
-                    this.scene.spaceList = this.fParser.spaceList;
-                    this.fParser.wallList.forEach(t => {
-                        this.scene.addItem(t)
-                    });
-                    this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
-                    this.fParser.doorList.forEach(t => this.scene.addItem(t));
-                    this.fParser.columnList.forEach(t => this.scene.addItem(t));
-                    this.fParser.casementList.forEach(t => this.scene.addItem(t));
-                    this.view.scene = this.scene;
-                    this.readGraph();
-                    console.log("success");
-                });
-			},
-            // 解析楼地板
-            loadBoard(floor){
-                window.FENGMAP.loadFloor(floor, res => {
-                    const zone = new SBoardItem(null, res)
-                    this.scene.addItem(zone);
-                })
-            },
-		},
+            }
+        },
         created() {
             // 取gcname
             this.floorId = getUrlMsg().FloorID;
@@ -1235,7 +1020,6 @@
                     .search {
                         width: 524px;
                         display: inline-block;
-
                         .search-select {
                             margin-left: 10px;
                             position: relative;
@@ -1274,7 +1058,6 @@
             }
             .right {
                 flex-grow: 1;
-
                 .list-box {
                     height: 440px;
                     overflow-y: scroll;
@@ -1308,63 +1091,36 @@
         }
 
         .bind-content {
-            height: 500px;
-            .bind-text {
-                cursor: pointer;
-                margin-bottom: 10px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-            .bind-floor {
-                display: flex;
-                flex-direction: row;
-                height: 480px;
-                overflow-x: hidden;
-                overflow-y: auto;
-                .bind-left {
-                    width: 240px;
-                    border: 1px solid #E4E5E7;
-                    .bind-box {
-                        margin-top: 20px;
-                        .bind-title {
-                            padding: 0 8px;
-                            height: 16px;
-                            line-height: 16px;
-                            border-left: 3px solid #0091FF;
-                            margin-bottom: 8px;
-                            font-size: 16px;
-                            font-family: MicrosoftYaHeiSemibold;
-                            color: #1f2429;
-                            font-weight: bold;
-                        }
-                        .bind-equip{
-                            display: flex;
+            max-height: 500px;
+            overflow-y: auto;
+            overflow-x: hidden;
+            .bind-box {
+                margin-top: 10px;
+                .bind-title {
+                    height: 20px;
+                    line-height: 20px;
+                    font-size: 16px;
+                }
+                .bind-type-box {
+                    padding-left: 42px;
+                    .bind-equip{
+                        // display: flex;
+                        // margin-top: 10px;
+                        .bind-equip-box {
+                            margin-top: 10px;
                             .bind-equip-title {
                                 white-space: nowrap;
                             }
-                            .bind-equip-list {
-                                flex: 1;
-                                overflow: hidden;
-                                .bind-equip-item {
-                                    cursor: pointer;
-                                    white-space: nowrap;
-                                    overflow: hidden;
-                                    text-overflow: ellipsis;
-                                }
-                            }
-
                         }
-                    } 
+                    }
                 }
-                .bind-right {
-                    flex: 1;
-                    padding: 16px;
-                    border: 1px solid #E4E5E7;
-                    border-left: none;
+                .bind-equip-list {
+                    padding-left: 18px;
+                    margin-top: 8px;
                 }
             }
         }
+
         /deep/ .ant-input-affix-wrapper .ant-input-suffix {
             /*left: 12px;*/
             /*padding-right: 12px;*/
@@ -1377,5 +1133,9 @@
         /deep/ .ant-checkbox-wrapper + .ant-checkbox-wrapper {
             margin: 0;
         }
+
+        /deep/ .el-tag + .el-tag {
+            margin-left: 10px;
+        }
     }
 </style>