节点UI

src/config/index.js

@@ -1838,6 +1838,15 @@ export default {
     finishCheck: '工艺节点-成检',
     recover: '工艺节点-回收',
     shaping: '工艺节点-成型',
+    registerName: '标准计件',
+    climbKilnName: '装窑车',
+    inKilnName: '窑车入窑',
+    outKilnName: '窑车出窑',
+    uninstallKilnName: '卸窑车',
+    halfCheckName: '半成品检验',
+    finishCheckName: '成品检验',
+    recoverName: '废品回收',
+    shapingName: '成型绑码',
   },
 
   /**

src/view/process/process-flow/config/ProcessConfig.js

@@ -254,28 +254,37 @@ export default class Process {
             marginX: 35,
           },
         },
+        // {
+        //   title: '计件模型',
+        //   name: 'count',
+        //   graphHeight: 260,
+        //   layoutOptions: {
+        //     rowHeight: 80,
+        //   },
+        // },
+        // {
+        //   title: '检验模型',
+        //   name: 'test',
+        //   graphHeight: 100,
+        //   layoutOptions: {
+        //     rowHeight: 80,
+        //   },
+        // },
+        // {
+        //   title: '特殊模型',
+        //   name: 'special',
+        //   graphHeight: 100,
+        //   layoutOptions: {
+        //     rowHeight: 80,
+        //   },
+        // },
         {
-          title: '计件模型',
-          name: 'count',
-          graphHeight: 260,
-          layoutOptions: {
-            rowHeight: 80,
-          },
-        },
-        {
-          title: '检验模型',
-          name: 'test',
-          graphHeight: 100,
-          layoutOptions: {
-            rowHeight: 80,
-          },
-        },
-        {
-          title: '特殊模型',
-          name: 'special',
-          graphHeight: 100,
+          title: 'ui',
+          name: 'ui',
+          graphHeight: 80,
           layoutOptions: {
-            rowHeight: 80,
+            columns: 1,
+            marginX: 35,
           },
         },
       ],
@@ -798,81 +807,6 @@ export default class Process {
     // endregion
 
     // region 注册自定义节点
-    Graph.registerNode(
-      'custom-rect',
-      {
-        inherit: 'rect',
-        width: 66,
-        height: 36,
-        attrs: {
-          body: {
-            strokeWidth: 1,
-            stroke: '#5F95FF',
-            fill: '#EFF4FF',
-          },
-          text: {
-            fontSize: 12,
-            fill: '#262626',
-          },
-        },
-        ports: { ...ports },
-      },
-      true,
-    )
-
-    Graph.registerNode(
-      'custom-polygon',
-      {
-        inherit: 'polygon',
-        width: 66,
-        height: 36,
-        attrs: {
-          body: {
-            strokeWidth: 1,
-            stroke: '#5F95FF',
-            fill: '#EFF4FF',
-          },
-          text: {
-            fontSize: 12,
-            fill: '#262626',
-          },
-        },
-        ports: {
-          ...ports,
-          items: [
-            {
-              group: 'top',
-            },
-            {
-              group: 'bottom',
-            },
-          ],
-        },
-      },
-      true,
-    )
-
-    Graph.registerNode(
-      'custom-circle',
-      {
-        inherit: 'circle',
-        width: 45,
-        height: 45,
-        attrs: {
-          body: {
-            strokeWidth: 1,
-            stroke: '#5F95FF',
-            fill: '#EFF4FF',
-          },
-          text: {
-            fontSize: 12,
-            fill: '#262626',
-          },
-        },
-        ports: { ...ports },
-      },
-      true,
-    )
 
     Graph.registerNode(
       'custom-image',
@@ -924,7 +858,37 @@ export default class Process {
       true,
     )
 
-
+    Shape.HTML.register({
+      shape: "custom-html",
+      width: 130,
+      height: 60,
+      html(cell) {
+        console.log('cell',cell)
+        let div = document.createElement("div");
+        let left = document.createElement("div");
+        let right = document.createElement("div");
+        div.className = "custom-html";
+        left.className = "custom-html-left";
+        right.className = "custom-html-right";
+        let img=document.createElement("img")
+        img.src=cell.getData().image
+        img.width=32
+        img.height=32
+        let title = document.createElement("div");
+        let text = document.createElement("div");
+        title.className = "custom-html-right-title";
+        text.className = "custom-html-right-text";
+        title.innerHTML=cell.getData().nodeName
+        text.innerHTML=cell.getData().nodeKindName
+        left.appendChild(img)
+        right.appendChild(title)
+        right.appendChild(text)
+        div.appendChild(left)
+        div.appendChild(right)
+
+        return div;
+      },
+    });
     // region 节点组
     const g1 = this.graph.createNode({
       shape: 'groupNode',
@@ -1025,12 +989,14 @@ export default class Process {
         {
           label: '回收',
           image:getImg('回收.png'),
-          nodeKind:'工艺节点-回收',
+          nodeKind:config.nodeKind.recover,
+          nodeKindName:config.nodeKind.recoverName
         },
         {
           label: '成型',
           image:getImg('马桶.png'),
-          nodeKind:'工艺节点-成型',
+          nodeKind:config.nodeKind.shaping,
+          nodeKindName:config.nodeKind.shapingName
         },
       ]
       const specialNodes = specialImages.map((item) =>
@@ -1050,10 +1016,27 @@ export default class Process {
       )
       //endregion
 
+    //region 特殊模型
+    const ui = specialImages.map((item) =>
+      this.graph.createNode({
+        shape: 'custom-html',
+        label: item.label,
+        data:{
+          nodeName:item.label,
+          nodeKind:item.nodeKind,
+          image:item.image,
+          nodeKindName:item.nodeKindName,
+
+        }
+      }),
+    )
+    //endregion
+
       //region 加载元素节点
       stencil.load(countNodes, 'count')
       stencil.load(testNodes, 'test')
       stencil.load(specialNodes, 'special')
+      stencil.load(ui, 'ui')
       //endregion
 
     // endregion

src/view/process/process-flow/process-setting.vue

@@ -502,12 +502,12 @@ export default {
 }
 
 /deep/ .ivu-layout-header {
-  height: 552px !important;
+  height: 52px !important;
   line-height: 52px !important;
 }
 
 .footer {
-  background: #fff;
+  /*background: #fff;*/
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -549,7 +549,52 @@ export default {
 /deep/ .ivu-tooltip{
   height: 48px!important;
 }
+/deep/ .custom-html{
+  height: 60px;
+  display: flex;
+  border:solid 1px #E9F1FF;
+}
+/deep/ .custom-html-left{
+  background: #E9F1FF;
+  height: 60px;
+  width: 60px;
+  border: solid 1px #E9F1FF;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
 
+}
+/deep/ .custom-html-right{
+  background: #fff;
+  height: 60px;
+  width: 70px;
+  border: solid 1px #fff;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+}
+/deep/ .custom-html-right-title{
+  font-size: 14px;
+  font-weight: bold;
+  padding-left: 10px;
+  width: 70px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  color: #4C4C4C;
+}
+/deep/ .custom-html-right-text{
+  padding: 3px 0 0 10px ;
+  width: 70px;
+  height: 30px;
+  font-size: 10px;
+  display: flex;
+  align-items: self-start;
+  color: #B6B6B6;
+}
 
 
 </style>