图库框架-节点右下角增加链接图库图表数;

src/views/chartFrame_manage/common/config.js

@@ -10,6 +10,25 @@ const portStyle = {
         }
     }
     }
+//利用NodeTool实现角标
+export const textTool = {
+    name:'button',
+    args:{
+        x:'100%',
+        y:'100%',
+        offset:{x:-12,y:-5},
+        markup:[{
+            tagName:'text',
+            textContent:'aaa',
+            attrs:{
+                fill: '#fe854f',
+                fontSize: 12,
+                textAnchor: 'middle',
+                pointerEvents: 'none',
+            }
+        }]
+    }
+}
 //基础节点
 export const baseNode = {
     shape:'rect',

src/views/chartFrame_manage/common/graph.js

@@ -9,13 +9,9 @@ const viewConfig = {
         restrict:true,//节点移动时无法超出画布
     },
     interacting:function (cellView){ //禁止节点移动
-        /* if(cellView.cell.getData().disableMove){
-            return false
-        } */
-        return false
+        return {'nodeMovable':false,'edgeMovable':false}
     },
     highlighting:{},
-    /* connecting:{}, */
     history:false,//关闭画布撤销/重做能力。
     keyboard:false,
     clipboard: false,

src/views/chartFrame_manage/components/frameContainer.vue

@@ -32,7 +32,7 @@
 <script>
 import { ElDropdownMenu } from 'element-ui';
 import { myGraph } from '../common/graph';
-import { baseNode } from '../common/config';
+import { baseNode , textTool } from '../common/config';
 import FrameToolBar from './frameToolBar.vue';
 export default {
     components:{ElDropdownMenu,FrameToolBar},
@@ -40,6 +40,10 @@ export default {
         FrameworkContent:{ //框架内容
             type:String,
             default:''
+        },
+        Nodes:{
+            type:Array,
+            default:[]
         }
     },
     data() {
@@ -70,9 +74,6 @@ export default {
                 this.currentCell = null
             }
         },
-        FrameworkContent(newVal){//当框架内容发生改变时,画布内容也发生改变
-            newVal.length&&this.gragh&&this.graph.fromJSON(JSON.parse(newVal))
-        }
     },
     computed:{
         contextMenu(){//右键菜单,根据权限配置
@@ -95,6 +96,8 @@ export default {
             this.FrameworkContent.length&&this.graph.fromJSON(JSON.parse(this.FrameworkContent))
             //如果有内容,将画布内容居中
             this.FrameworkContent.length&&this.graph.scrollToContent({ animation: { duration: 600 }})
+            //如果有内容,遍历每个节点,赋值chartNum
+            this.FrameworkContent.length&&this.setNodeInfo()
             //如果是非编辑页,加载完成画布内容后冻结画布
             window.location.pathname.startsWith('/chartframe')&&this.graph.freeze()
             //如果是编辑页，加载完成后清除历史数据
@@ -104,6 +107,17 @@ export default {
         dispose(){
             this.graph&&this.graph.dispose()
         },
+        setNodeInfo(){
+            const nodes = this.graph.getNodes()
+            this.Nodes.forEach(node=>{
+                const currentNode = nodes.find(item=>item.id===node.NodeId)
+                if(currentNode){
+                    currentNode.removeTools()
+                    const toolOption = this.getToolOption(node.ChartNum||0)
+                    currentNode.addTools(toolOption)
+                }
+            })
+        },
         //添加/编辑节点
         editNode(node){
             //获取视口范围
@@ -114,6 +128,9 @@ export default {
                 currentNode.data.id=node.nodeLink.MyChartClassifyId
                 currentNode.label=node.nodeName
                 currentNode.data.nodeLink = node.nodeLink
+                currentNode.removeTools()
+                const toolOption = this.getToolOption(node.nodeLink.ChartNum)
+                currentNode.addTools(toolOption)
             }else{
                 //在视口范围内添加节点
                 this.graph.addNode({
@@ -125,12 +142,19 @@ export default {
                     height:50,
                     data:{
                         id:node.nodeLink.MyChartClassifyId,//存储节点对应的myETA分类id
-                        nodeLink:node.nodeLink
+                        nodeLink:node.nodeLink,
                     },
-                    label:node.nodeName||''
+                    label:node.nodeName||'',
+                    tools:[this.getToolOption(node.nodeLink.ChartNum)]
                 }})
+
             }
         },
+        getToolOption(chartNum){
+            const options = _.cloneDeep(textTool)
+            options.args.markup[0].textContent = chartNum +''
+            return options
+        },
         //点击右键菜单事件
         handleContext(key){
             const select_cell = this.graph.getSelectedCells()
@@ -191,6 +215,7 @@ export default {
         getContentNodes(){
             return this.graph.getNodes().map(node=>{
                 return {
+                    NodeId:node.id,
                     NodeName:node.label,
                     MyChartClassifyId:Number(node.data.id)
                 }

src/views/chartFrame_manage/frameEditor.vue

@@ -12,6 +12,7 @@
             <!-- 沙盘图组件 -->
             <FrameContainer ref="container"
                 :FrameworkContent="frameDetail.FrameworkContent"
+                :Nodes="frameDetail.Nodes"
                 @editNode="handleEditNode"
                 @framePic="getFramePic"
             />
@@ -70,6 +71,7 @@ export default {
             frameDetail:{
                 FrameworkName:'',
                 FrameworkContent:'',
+                Nodes:[]
             },
             lockLoding:null,
             modifyNode: {},//正在编辑的节点
@@ -151,6 +153,11 @@ export default {
                     this.$router.replace({path:'/editframe',query:{frameId:this.frameId}})
                 })
             }
+            //重新加载一次画布
+            this.$refs.container.dispose()
+            this.$nextTick(()=>{
+                this.$refs.container.init()
+            })
         },
         getMyList(){
             mychartInterface.classifyList().then((res)=>{
@@ -163,7 +170,7 @@ export default {
             if(this.frameId){
                 const res = await chartFrameInterface.getFrameDetail({ChartFrameworkId:Number(this.frameId)})
                 if(res.Ret!==200) return 
-                this.frameDetail = res.Data||{FrameworkName:'',FrameworkContent:''}
+                this.frameDetail = res.Data||{FrameworkName:'',FrameworkContent:'',Nodes:[]}
             }
             //获取到框架内容后再加载graph
             this.$nextTick(()=>{

src/views/chartFrame_manage/index.vue

@@ -167,7 +167,8 @@
                     <div class="frame-wrap">
                         <!--沙盘图组件-->
                         <FrameContainer ref="container"
-                            :FrameworkContent="currentFrame.FrameworkContent"
+                            :FrameworkContent="currentFrameDetail.FrameworkContent"
+                            :Nodes="currentFrameDetail.Nodes"
                             @showDialog="handleShowDialog"/>
                     </div>
                 </div>
@@ -291,6 +292,7 @@ export default {
             currentList:[],//选择公共框架时,框架列表
             myFrameList:[],//我的框架列表
             currentFrame:{},//选择的框架
+            currentFrameDetail:{},//选中的框架详情
             /* frame node */
             myETADetailDialogShow:false,//点击节点时,弹出myeta图表详情弹框
             modifyFrame:{},//正在修改的框架
@@ -391,16 +393,21 @@ export default {
                 this.currentFrame={}
             }
         },
-        handleInitGraph(){
+        async handleInitGraph(){
+            //获取框架详情
+            if(this.currentFrame.ChartFrameworkId){
+                const res = await chartFrameInterface.getFrameDetail({ChartFrameworkId:Number(this.currentFrame.ChartFrameworkId)})
+                this.currentFrameDetail = res.Data||{}
+            }
             //判断一下框架内容是否是合法的JSON,否则置为空
             try{
-                JSON.parse(this.currentFrame.FrameworkContent)
+                JSON.parse(this.currentFrameDetail.FrameworkContent)
             }catch(e){
-                this.currentFrame.FrameworkContent = ''
+                this.currentFrameDetail.FrameworkContent = ''
             }
             this.$nextTick(()=>{
                 //若框架有内容,才加载画布
-                this.currentFrame.FrameworkContent&&this.$refs.container.init()
+                this.currentFrameDetail.FrameworkContent&&this.$refs.container.init()
             })
         },
         /* 拖动相关 */