ETA1.5.4 init

src/views/chartFrame_manage/common/config.js

@@ -29,7 +29,7 @@ export const textTool = {
         }]
     }
 }
-//基础节点
+//基础节点 有图分类的节点
 export const baseNode = {
     shape:'rect',
     width: 120,
@@ -86,6 +86,63 @@ export const baseNode = {
         }
     },
 }
+//基础节点2 无图分类的节点
+export const baseNode2 = {
+    shape:'rect',
+    width: 120,
+    height: 50,
+    attrs:{
+        text:{ //文字换行
+            textWrap: {
+                width: -10,
+                ellipsis: true,
+            }
+        },
+        body:{
+            fill:'#FFF',//背景色
+            stroke:'#0052D9',//边框色
+            strokeWidth:1,//边框宽度
+            strokeDasharray:'',//虚线,如果赋值为0保存缩略图时会省略掉边框
+        },
+        label:{ //与svg text属性相同
+            fill:'#0052D9',//文字颜色
+            fontSize:14,//文字大小
+            fontWeight:'normal',//文字粗细
+            fontStyle:'normal',//斜体
+            textDecoration:'normal',//下划线
+        }
+    },
+    ports: { //基础连接桩
+        items: [
+            { group: 'port-top', id: 'p_top' },
+            { group: 'port-bottom', id: 'p_bottom' },
+            { group: 'port-left', id: 'p_left' },
+            { group: 'port-right', id: 'p_right' },
+        ],
+        groups: {
+            "port-top": {
+                    position: 'top',
+                    zIndex: 20,
+                    ...portStyle
+            },
+            "port-bottom": {
+                    position: 'bottom',
+                    zIndex: 20,
+                    ...portStyle
+            },
+            "port-left": {
+                    position: 'left',
+                    zIndex: 20,
+                    ...portStyle
+            },
+            "port-right": {
+                    position: 'right',
+                    zIndex: 20,
+                    ...portStyle
+            },
+        }
+    },
+}
 //基础线条
 export const baseEdge = {
     attrs:{

src/views/chartFrame_manage/components/frameContainer.vue

@@ -32,7 +32,7 @@
 <script>
 import { ElDropdownMenu } from 'element-ui';
 import { myGraph } from '../common/graph';
-import { baseNode , textTool } from '../common/config';
+import { baseNode , baseNode2 , textTool } from '../common/config';
 import FrameToolBar from './frameToolBar.vue';
 export default {
     components:{ElDropdownMenu,FrameToolBar},
@@ -95,7 +95,7 @@ export default {
             //如果有内容,初始化画布内容
             this.FrameworkContent.length&&this.graph.fromJSON(JSON.parse(this.FrameworkContent))
             //如果有内容,将画布内容居中
-            this.FrameworkContent.length&&this.graph.scrollToContent({ animation: { duration: 600 }})
+            this.FrameworkContent.length&&this.graph.scrollToContent(/* { animation: { duration: 600 }} */)
             //如果有内容,遍历每个节点,赋值chartNum
             this.FrameworkContent.length&&this.setNodeInfo()
             //如果是非编辑页,加载完成画布内容后冻结画布
@@ -113,27 +113,29 @@ export default {
                 const currentNode = nodes.find(item=>item.id===node.NodeId)
                 if(currentNode){
                     currentNode.removeTools()
+                    if(!currentNode.data.id) return
                     const toolOption = this.getToolOption({chartNum:node.ChartNum||0,color:currentNode.attrs.label.fill})
                     currentNode.addTools(toolOption)
                 }
             })
         },
         //添加/编辑节点
-        editNode(node){
+        editNode({nodeLink={},nodeName='',nodeId}){
             //获取视口范围
             const position = this.graph.getContentArea()
             const nodes = this.graph.getNodes()
-            const currentNode = nodes.find(item=>item.id===node.nodeId)
+            const currentNode = nodes.find(item=>item.id===nodeId)
             if(currentNode){
-                currentNode.data.id=node.nodeLink.MyChartClassifyId
-                currentNode.label=node.nodeName
-                currentNode.data.nodeLink = node.nodeLink
+                currentNode.data.id=nodeLink.MyChartClassifyId||0
+                currentNode.label=nodeName
+                currentNode.data.nodeLink = nodeLink
                 currentNode.removeTools()
-                const toolOption = this.getToolOption({chartNum:node.nodeLink.ChartNum,color:currentNode.attrs.label.fill})
+                if(!currentNode.data.id) return
+                const toolOption = this.getToolOption({chartNum:nodeLink.ChartNum,color:currentNode.attrs.label.fill})
                 currentNode.addTools(toolOption)
             }else{
                 //在视口范围内添加节点
-                this.graph.addNode({
+                const tempNode = this.graph.addNode({
                     ...baseNode,
                     ...{
                     x:position.x+position.width/2+20,
@@ -141,20 +143,30 @@ export default {
                     width:120,
                     height:50,
                     data:{
-                        id:node.nodeLink.MyChartClassifyId,//存储节点对应的myETA分类id
-                        nodeLink:node.nodeLink,
+                        id:nodeLink.MyChartClassifyId||0,//存储节点对应的myETA分类id
+                        nodeLink:nodeLink,
                     },
-                    label:node.nodeName||'',
-                    tools:[this.getToolOption({chartNum:node.nodeLink.ChartNum,color:baseNode.attrs.label.fill})]
+                    label:nodeName,
+                    //tools:[this.getToolOption({chartNum:node.nodeLink.ChartNum,color:baseNode.attrs.label.fill})]
                 }})
+                if(!nodeLink.MyChartClassifyId) return 
+                const toolOption = this.getToolOption({chartNum:nodeLink.ChartNum,color:baseNode.attrs.label.fill})
+                tempNode.addTools(toolOption)
             }
         },
+        //设置节点图分类的数量
         getToolOption({chartNum,color}){
             const options = _.cloneDeep(textTool)
             options.args.markup[0].textContent = chartNum +''
             options.args.markup[0].attrs.fill = color
             return options
         },
+        //设置有无图分类节点的样式
+        //oldType: 1有图分类,2无图分类
+        setNodeStyle(oldType){
+            //oldtype:1 表示节点从无图分类转换成有图分类,节点样式重置为baseNode
+            //oldtype:2 表示节点从有图分类转换成无图分类,节点样式重置为baseNode2
+        },
         //点击右键菜单事件
         handleContext(key){
             const select_cell = this.graph.getSelectedCells()

src/views/chartFrame_manage/frameEditor.vue

@@ -39,7 +39,7 @@
                         <el-input v-model.trim="modifyNode.nodeName" placeholder="请输入节点名称" style="width:217px;"></el-input>
                     </el-form-item>
                     <el-form-item label="节点链接" prop="nodeLink">
-                        <el-select v-model="modifyNode.nodeLink" value-key="MyChartClassifyId" placeholder="请选择节点链接" style="width:217px;">
+                        <el-select v-model="modifyNode.nodeLink" value-key="MyChartClassifyId" placeholder="请选择节点链接" clearable style="width:217px;">
                             <el-option v-for="item in myList" 
                                 :key="item.MyChartClassifyId"
                                 :label="item.MyChartClassifyName"
@@ -75,11 +75,14 @@ export default {
                 Nodes:[]
             },
             lockLoding:null,
-            modifyNode: {},//正在编辑的节点
+            modifyNode: {
+                nodeName:'',
+                nodeLink:{}
+            },//正在编辑的节点
             isModifyNodeDialogShow: false,//编辑节点弹窗
             rules: {
                 nodeName: [{ required: true, message: "请输入节点名称", trigger: "blur" }],
-                nodeLink: [{ required: true, message: "请选择节点链接", trigger: "blur" }]
+                /* nodeLink: [{ required: true, message: "请选择节点链接", trigger: "blur" }] */
             },
             myList:[],//我的图库列表
         };