Prechádzať zdrojové kódy

'批量绑定功能'

zhangyu 4 rokov pred
rodič
commit
84c98e614d

Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 1108 - 0
src/components/edit/edit-dialog-old.vue


+ 150 - 218
src/components/edit/edit-dialog.vue

@@ -93,9 +93,9 @@
             </div>
         </a-modal>
 
-        <a-modal v-model="visibleBind" title="是否批量绑定图例" width="420px" class="edit-dialog" @cancel="handleClickCancel" centered>
+        <a-modal v-model="visibleBind" title="是否批量绑定图例" width="840px" class="edit-dialog" @cancel="handleClickCancel" centered>
             <template slot="footer">
-                <a-checkbox @change="onChangeRemember" :checked="isRem" style="float: left;margin-top: 5px;">
+                <a-checkbox @change="onChangeRemember" :checked="isRem" style="margin-top: 5px;margin-right: 10px;">
                     记住操作,不再提醒
                 </a-checkbox>
                 <a-button key="back" @click="handleClickUntreated">
@@ -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">
+                        <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>
@@ -257,7 +276,6 @@
                     },
                 ],
                 tableData: [],
-                loading: false,
                 page: 1,
                 size: 10,
                 treeData: [],
@@ -272,14 +290,9 @@
                 GraphElementName: "",
                 visibleBind: false, // 是否显示批量绑定弹窗
                 isRem: false, // 是否记住操作
-                bindData: {
-                    HasPub: {},
-                    NotPub: {}
-                },
-                bindTreeData: {
-                    HasPub: [],
-                    NotPub: []
-                },
+                mapType: "",
+                mapFloor: "",
+                bindTreeData: [],
                 GraphsIdList: []
             }
         },
@@ -299,9 +312,7 @@
                     else{
                         this.getQuerySmsxtBy(this.majorId,'Image')
                     }
-
                 }
-
             }
         },
         methods: {
@@ -309,26 +320,25 @@
                 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 = [];
+                    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)
+                }, 1000);
                 if (this.isRem && this.rememberBtn == "bind" && this.GraphElementName) { // 记住批量绑定并且图例名不为空
                     // 直接绑定接口
                     this.handleClickBind(false);
@@ -338,88 +348,66 @@
                 } else {
                     this.visible = false;
                 }
-                // setTimeout(() => {
-                //     this.visible = false;
-                //     this.loading = false;
-                //     const lists = [];
-                //     let arr = [];
-                //     arr = JSON.parse(JSON.stringify(this.arrList))
-                //     console.log(arr);
-                //     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'
-                //             })
-                //         }
-                //     })
-                //     console.log(lists);
-                //     bus.$emit('changeAttachObjectIds', lists)
-                //     bus.$emit('updateAttachMsg', lists)
-                // }, 1000);
+            },
+            handleNodeClick(data, node) {
+                if (data && data.Id) {
+                    this.mapFloor = data.label;
+                    this.mapType = node.parent.data.label;
+                } else {
+                    this.mapFloor = "";
+                    this.mapType = "";
+                }
             },
             // 查询相关图并打开批量绑定弹窗
             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.bindTreeData[key].push({
+                                        bindTreeData.push({
                                             id: item.Id,
                                             label: item.Name,
                                             children: []
                                         })
-                                        /******************** */
-
-
-                                        this.bindData[key].floor = {
-                                            Id: item.Id,
-                                            Name: item.Name,
-                                            FloorName: []
-                                        }
-                                        /*********************************** */
-                                        const floorTreeLast = this.bindTreeData[key][this.bindTreeData[key].length - 1];
-                                        /*********************************** */
-                                        const floor = this.bindData[key].floor;
+                                        const floorTreeLast = bindTreeData[bindTreeData.length - 1];
                                         if (item.Graphs.length) {
                                             item.Graphs.forEach(graph => {
-                                                /*********************** */
                                                 graph.label = graph.Floor.Code;
                                                 graph.id = graph.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 = this.bindTreeData[key].findIndex(item => {
+                                        const index = bindTreeData.findIndex(item => {
                                             return item.id == "XTYLT"
                                         })
                                         if (index != -1) {
-                                            this.bindTreeData[key][index].children.push({
+                                            bindTreeData[index].children.push({
                                                 id: item.Id,
                                                 label: item.Name,
                                                 children: []
                                             })
                                         } else {
-                                            this.bindTreeData[key].push({
+                                            bindTreeData.push({
                                                 id: "XTYLT",
                                                 label: "系统原理图",
                                                 children: [{
@@ -429,60 +417,32 @@
                                                 }]
                                             })
                                         }
-                                        /*********************************** */
-
-
-
-                                        if (this.bindData[key].system) {
-                                            this.bindData[key].system.push({
-                                                Id: item.Id,
-                                                Name: item.Name,
-                                                FloorName: []
-                                            })
-                                        } else {
-                                            this.bindData[key].system = [{
-                                                Id: item.Id,
-                                                Name: item.Name,
-                                                FloorName: []
-                                            }]
-                                        }
-                                        /*********************************** */
                                         let system;
                                         if (index != -1) {
-                                            system = this.bindTreeData[key][index];
+                                            system = bindTreeData[index];
                                         } else {
-                                            system = this.bindTreeData[key][this.bindTreeData[key].length - 1];
+                                            system = bindTreeData[bindTreeData.length - 1];
                                         }
                                         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;
                                                 systemTreeLast.children.push(graph);
-                                                /*********************** */
-                                                
-
-
-                                                systemLast.FloorName.push(graph.Floor.Code);
-                                                this.GraphsIdList.push(graph.Id);
                                             })
                                         }
                                     } else { // 设备设施
-                                        /********************************** */
-                                        const index = this.bindTreeData[key].findIndex(item => {
+                                        const index = bindTreeData.findIndex(item => {
                                             return item.id == "SBSS"
                                         })
                                         if (index != -1) {
-                                            this.bindTreeData[key][index].children.push({
+                                            bindTreeData[index].children.push({
                                                 id: item.Id,
                                                 label: item.Name,
                                                 children: []
                                             })
                                         } else {
-                                            this.bindTreeData[key].push({
+                                            bindTreeData.push({
                                                 id: "SBSS",
                                                 label: "设备设施",
                                                 children: [{
@@ -492,47 +452,18 @@
                                                 }]
                                             })
                                         }
-                                        /*********************************** */
-
-
-
-
-                                        if (this.bindData[key].equip) {
-                                            this.bindData[key].equip.push({
-                                                Id: item.Id,
-                                                Name: item.Name,
-                                                FloorName: []
-                                            })
-                                        } else {
-                                            this.bindData[key].equip = [{
-                                                Id: item.Id,
-                                                Name: item.Name,
-                                                FloorName: []
-                                            }]
-                                        }
-                                        /*********************************** */
                                         let equip;
                                         if (index != -1) {
-                                            equip = this.bindTreeData[key][index];
+                                            equip = bindTreeData[index];
                                         } else {
-                                            equip = this.bindTreeData[key][this.bindTreeData[key].length - 1];
+                                            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;
                                                 equipTreeLast.children.push(graph);
-                                                /*********************** */
-
-
-
-
-                                                equipLast.FloorName.push(graph.Floor.Code);
-                                                this.GraphsIdList.push(graph.Id);
                                             })
                                         }
                                     }
@@ -544,9 +475,7 @@
                         this.visible = false;
                     }
                 })
-                console.log("bindData+++++++++++++++++++++++",this.bindData);
                 console.log("bindTreeData+++++++++++++++++++++++",this.bindTreeData);
-                console.log("GraphsIdList++++++++++++++++++++",this.GraphsIdList);
             },
             handleCancel(e) {
                 this.visible = false;
@@ -585,6 +514,8 @@
             },
             // 点击批量绑定按钮
             handleClickBind(Marked) {
+                this.GraphsIdList = [];
+                this.GraphsIdList = this.$refs.tree.getCheckedKeys().filter(d => d);
                 const lists = [];
                 let params = {};
                 let arr = [];
@@ -1064,20 +995,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;
@@ -1087,17 +1014,12 @@
                             position: relative;
                             top: -2px;
                         }
-
                         .press-enter {
                             margin-left: 10px;
                             width: 236px;
                         }
                     }
-
-
                 }
-
-
                 .tree {
                     width: 339px;
                     height: 441px;
@@ -1106,9 +1028,7 @@
                     float: left;
                     overflow-y: scroll;
                     overflow: overlay;
-
                 }
-
                 .checkbox {
                     /*margin-top: 17px;*/
                     /*margin-left: 13px;*/
@@ -1118,7 +1038,6 @@
                     display: flex;
                     flex-direction: column;
                     justify-content: space-between;
-
                     /deep/ .ant-table-selection-column {
                         .ant-table-header-column {
                             display: none;
@@ -1126,21 +1045,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;
@@ -1149,19 +1065,14 @@
                         }
                     }
                 }
-
-
                 .select-number {
                     margin-left: 12px;
-
                 }
-
                 .link {
                     float: right;
                     line-height: 57px;
                 }
             }
-
             .header {
                 height: 57px;
                 line-height: 57px;
@@ -1170,42 +1081,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;*/