feat(4): 增肌删除点和线并冲洗渲染关系图的逻辑

src/modules/createmodel/components/EchartsGraph.vue

@@ -3,6 +3,7 @@
         <div class="full-screen-box" :style="{top: fullScreenActionFlag ? '10px': relationGraphSearchHeight + 108 +'px',right: '10px'}" v-if="myChartGroupInnerOptionData">
             <el-button v-if="!fullScreenActionFlag" class="full-screen-box-button" icon="el-icon-full-screen" @click="fullScreenAction"></el-button>
             <img v-if="fullScreenActionFlag" class="full-screen-box-img-mini" src="../../../../static/invoice/mini.svg.svg" @click="fullScreenAction">
+            <el-button style="margin-left:0" type="primary" @click="refreshMap()" icon="el-icon-refresh" :disabled="!groupAnalysisDataUse.partyData"  size="mini"></el-button>
         </div>
         <div v-if="reloadGetDataFlag" class="over-map-loading"></div>
         <div :style="{width:(seriesDataList.length == 1 || seriesDataList.length == 2 ? '100%' : (seriesDataList.length == 0 ? 1 : seriesDataList.length)*relationGraphHeight+'px'),height: '100%'}" id="relationGraph"></div>
@@ -45,6 +46,7 @@ export default {
             selectPointNode: {},
             myChartGroupInnerOptionData: null,
             groupAnalysisDataUse: {},
+            groupAnalysisDataUseBase: {},
             switchGroupColorList: ['#bee4a8', '#dfe9f6', '#ea3323', '#eec8b0', '#ffff54', '#72d169', '#a5daf5', '#dba1d9', '#b25168'],
             selectPointNodeList:[],
             reloadGetDataFlag: false,
@@ -52,7 +54,12 @@ export default {
             viewDetailDataPayload: {},
             seriesDataList: [],
             relationGraphHeight: 600,
-            fullScreenActionFlag: false
+            fullScreenActionFlag: false,
+            dblclickFlagFlow: false,
+            myChartGroupInnerHasDeleteNodeOrEdgeBaseData: {
+                data:[],
+                links: []
+            },
         };
     },
     computed: {
@@ -99,6 +106,12 @@ export default {
             this.selectPointNode= {},
             this.myChartGroupInnerOptionData= null,
             this.groupAnalysisDataUse= {},
+            this.groupAnalysisDataUseBase = {}
+            this.dblclickFlagFlow = false
+            this.myChartGroupInnerHasDeleteNodeOrEdgeBaseData = {
+                data:[],
+                links: []
+            }
             this.selectPointNodeList= [],
             this.loading= null,
             this.viewDetailDataPayload= {}
@@ -117,7 +130,11 @@ export default {
             // this.creatRelationMap()
             // this.loading.close()
             // return
-
+            this.dblclickFlagFlow = false
+            this.myChartGroupInnerHasDeleteNodeOrEdgeBaseData = {
+                data:[],
+                links: []
+            }
             this.$store
                 .dispatch("view_relation_static_model_map", this.setModelId(payload))
                 .then(data => {
@@ -128,6 +145,7 @@ export default {
                             return
                         }
                         this.groupAnalysisDataUse = data.result
+                        this.groupAnalysisDataUseBase = JSON.parse(JSON.stringify(data.result))
                         this.creatRelationMap()
                     } else {
                         let msg = data.message ? data.message : "加载失败";
@@ -294,6 +312,136 @@ export default {
             
             return {dataGroup:dataGroup,nodeLinkRelation:nodeLinkRelation}
         },
+        // 刷新流向图
+        refreshMap(){
+            this.groupAnalysisDataUse = JSON.parse(JSON.stringify(this.groupAnalysisDataUseBase))
+            this.myChartGroupInnerHasDeleteNodeOrEdgeBaseData = {
+                data:[],
+                links: []
+            }
+            this.myChartGroupInner= null,
+            this.selectPointNode= {},
+            this.myChartGroupInnerOptionData= null,
+            this.dblclickFlagFlow = false
+            this.myChartGroupInnerHasDeleteNodeOrEdgeBaseData = {
+                data:[],
+                links: []
+            }
+            this.selectPointNodeList= [],
+            this.loading= null,
+            this.viewDetailDataPayload= {}
+            this.reloadGetDataFlag = true
+            this.creatRelationMap()
+        },
+        checkRelationBreak(series){
+            const seriesList = this.getNodeGroup(series.data, series.links)
+            if(seriesList.dataGroup.length > 1){
+                return true
+            }else{
+                return false
+            }
+        },
+        // 删除流向图节点或连接线的函数
+        removeNodeOrLine( params,deletType) {
+            const nodeName = params.data.name
+            const nodeId = params.data.id
+            const seriesIndex = params.seriesIndex
+            // 获取当前图表数据
+            var option = null;
+            option = this.myChartGroupInner.getOption()
+            this.myChartGroupInnerHasDeleteNodeOrEdge = true
+            let deleteNode = []
+            let deleteEdge = []
+            if (deletType == 1) {
+                // 移除节点
+                deleteNode = option.series[seriesIndex].data.filter(function(node) {
+                    return node.name == nodeName;
+                });
+                option.series[seriesIndex].data = option.series[seriesIndex].data.filter(function(node) {
+                    return node.name !== nodeName;
+                });
+                // 移除与该节点相关的边
+                deleteEdge = option.series[seriesIndex].links.filter(function(link) {
+                    return !(link.source !== nodeId && link.target !== nodeId);
+                });
+                option.series[seriesIndex].links = option.series[seriesIndex].links.filter(function(link) {
+                    return link.source !== nodeId && link.target !== nodeId;
+                });
+            } else if (deletType == 2) {
+                // params.data.lineData.party1
+                deleteEdge = option.series[seriesIndex].links.filter(function(link) {
+                    return (link.source == params.data.source && link.target == params.data.target);
+                });
+                option.series[seriesIndex].links = option.series[seriesIndex].links.filter(function(link) {
+                    return !(link.source == params.data.source && link.target == params.data.target);
+                });
+            }
+
+        
+            // 更新图表数据
+            this.myChartGroupInnerHasDeleteNodeOrEdgeBaseData.data = this.myChartGroupInnerHasDeleteNodeOrEdgeBaseData.data.concat(deleteNode)
+            this.myChartGroupInnerHasDeleteNodeOrEdgeBaseData.links = this.myChartGroupInnerHasDeleteNodeOrEdgeBaseData.links.concat(deleteEdge)
+            if (this.checkRelationBreak(option.series[seriesIndex])) {
+                let midData = JSON.parse(JSON.stringify(this.groupAnalysisDataUseBase))
+                let that = this
+                let partyData = []
+                midData.partyData.forEach(item => {
+                    let deleteFlag = false
+                    that.myChartGroupInnerHasDeleteNodeOrEdgeBaseData.data.forEach(itemIn => {
+                        if (item.id == itemIn.id) {
+                            deleteFlag = true
+                        }
+                    })
+                    if (!deleteFlag) {
+                        partyData.push(item)
+                    }
+                })
+                midData.partyData = partyData
+                let relationshipGraph = []
+                midData.relationshipGraph.forEach(link => {
+                    let deleteFlag = false
+                    that.myChartGroupInnerHasDeleteNodeOrEdgeBaseData.links.forEach(linkDelete => {
+                        if((link.party1.id == linkDelete.lineData.party1.id && link.party2.id == linkDelete.lineData.party2.id)||(link.party1.id == linkDelete.lineData.party2.id && link.party2.id == linkDelete.lineData.party1.id)){
+                            deleteFlag = true
+                        }
+                    })
+                    that.myChartGroupInnerHasDeleteNodeOrEdgeBaseData.data.forEach(itemIn => {
+                        if (link.party1.id == itemIn.id || link.party2.id == itemIn.id) {
+                            deleteFlag = true
+                        }
+                    })
+                    if (!deleteFlag) {
+                        relationshipGraph.push(link)
+                    }
+                })
+                midData.relationshipGraph = relationshipGraph
+                this.groupAnalysisDataUse = null
+                this.groupAnalysisDataUse = {...midData}
+                if (this.groupAnalysisDataUse && this.groupAnalysisDataUse.partyData && this.groupAnalysisDataUse.partyData.length>0) {
+                    this.myChartGroupInnerHasDeleteNodeOrEdgeBaseData = {
+                        data:[],
+                        links: []
+                    }
+                    this.myChartGroupInner= null,
+                    this.selectPointNode= {},
+                    this.myChartGroupInnerOptionData= null,
+                    this.dblclickFlagFlow = false
+                    this.myChartGroupInnerHasDeleteNodeOrEdgeBaseData = {
+                        data:[],
+                        links: []
+                    }
+                    this.selectPointNodeList= [],
+                    this.loading= null,
+                    this.viewDetailDataPayload= {}
+                    this.reloadGetDataFlag = true
+                    this.creatRelationMap()
+                }
+                return
+            }
+            this.myChartGroupInner.setOption({
+                series:option.series
+            });
+        },
         creatRelationMap(type,indata){
             
             let pointsList
@@ -433,10 +581,43 @@ export default {
             this.myChartGroupInner.off('click');
             this.myChartGroupInner.off('mouseup');
             this.myChartGroupInner.off('finished');
+            this.myChartGroupInner.off('dblclick');
+            this.myChartGroupInner.on('dblclick', function (params) {
+                this.dblclickFlagFlow = true
+                if (params.dataType == "edge") {
+                    that.$alert(`是否确认删除当前选中 <span style="color:red">${params.data.lineData.party1.name}与${params.data.lineData.party2.name}之间的资金线</span> 重新渲染`, '删除节点', {
+                        showClose: true,
+                        showCancelButton: true,
+                        dangerouslyUseHTMLString: true,
+                        // iconClass: 'el-icon-bell',
+                        type: 'warning',
+                        confirmButtonText: '删除',
+                        cancelButtonText: '取消',
+                        callback: action => {
+                            if (action == 'confirm') {
+                                that.removeNodeOrLine(params,2)
+                            }
+                        }
+                    });
+                    return
+                }
+                that.$alert(`是否确认删除当前选中节点 <span style="color:red">${params.data.realName}</span> 重新渲染`, '删除节点', {
+                    showClose: true,
+                    showCancelButton: true,
+                    dangerouslyUseHTMLString: true,
+                    // iconClass: 'el-icon-bell',
+                    type: 'warning',
+                    confirmButtonText: '删除',
+                    cancelButtonText: '取消',
+                    callback: action => {
+                        if (action == 'confirm') {
+                            that.removeNodeOrLine(params,1)
+                        }
+                    }
+                });
+            })
             this.myChartGroupInner.on('click', function (params) {
-                var nodeName = params.name;   // 获取节点名称
-                var nodeData = params.data;   // 获取节点属性值
-                var option = that.myChartGroupInner.getOption();
+               
                 // 重新渲染图表
                 // myChart.setOption(option);
                 // console.log("click-=-=selectPointNode", that.selectPointNode);
@@ -444,21 +625,29 @@ export default {
                 // console.log("click-=-=节点：", params);
                 // console.log("click-=-=节点名称：" + nodeName);
                 // console.log("click-=-=节点属性值：", nodeData);
-                if (params.dataType == "node") {
-                    that.selectPointNode = { ...params.data }
-                } else if (params.dataType == "edge") {
-                    // 点击线弹出交易明细 发票明细
-                    // console.log('nodeData-=-=-=',nodeData)
-                    if(!nodeData.lineData.relationData.jeTotal){
-                        that.$message({
-                            type: "warning",
-                            message: `${nodeData.lineData.party1.name ||''}与${nodeData.lineData.party2.name ||''}暂无资金交易明细`
-                        });
-                        return
+                this.dblclickFlagFlow = false
+                setTimeout(() => {
+                    if(!this.dblclickFlagFlow){
+                        var nodeName = params.name;   // 获取节点名称
+                        var nodeData = params.data;   // 获取节点属性值
+                        var option = that.myChartGroupInner.getOption();
+                        if (params.dataType == "node") {
+                            that.selectPointNode = { ...params.data }
+                        } else if (params.dataType == "edge") {
+                            // 点击线弹出交易明细 发票明细
+                            // console.log('nodeData-=-=-=',nodeData)
+                            if(!nodeData.lineData.relationData.jeTotal){
+                                that.$message({
+                                    type: "warning",
+                                    message: `${nodeData.lineData.party1.name ||''}与${nodeData.lineData.party2.name ||''}暂无资金交易明细`
+                                });
+                                return
+                            }
+                            that.viewDetailDataPayload = nodeData.lineData.relationData
+                            that.loadTableHeader(that.viewDetailDataPayload)
+                        }
                     }
-                    that.viewDetailDataPayload = nodeData.lineData.relationData
-                    that.loadTableHeader(that.viewDetailDataPayload)
-                }
+                }, 500);
             });
             this.myChartGroupInner.on('finished', function () {
                 let optionData = that.myChartGroupInner.getOption()
@@ -489,7 +678,9 @@ export default {
                         that.reloadGetDataFlag = false
                     }
                 })
-                that.loading.close()
+                if(that.loading){
+                    that.loading.close()
+                }
             });
             this.myChartGroupInner.on('mouseup', function (event) {
                 // console.log('event-=-=', event)
@@ -723,5 +914,7 @@ export default {
 .full-screen-box-img-mini{
     width: 30px;
     margin-right: 10px;
+    position: relative;
+    top: 6px;
 }
 </style>