UPDATE: VERSION-20260315

modeler/src/assets/icons/platform.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1773577091908" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7408" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M285.952 623.616c-94.464 0-171.264-76.8-171.264-171.264s76.8-171.264 171.264-171.264c11.008 0 21.76 1.024 32.512 3.072 16.64 3.072 27.648 19.2 24.32 35.84-3.072 16.64-19.2 27.648-35.84 24.32-6.912-1.28-13.824-2.048-20.736-2.048-60.672 0-109.824 49.152-109.824 109.824s49.152 109.824 109.824 109.824c16.896 0 30.72 13.824 30.72 30.72s-14.08 30.976-30.976 30.976z" fill="#FFFFFF" p-id="7409"></path><path d="M313.088 343.296c-13.824 0-26.624-9.472-29.952-23.552-3.84-15.872-5.632-32.256-5.632-48.896 0-116.48 94.72-211.456 211.456-211.456 55.552 0 108.032 21.504 147.712 60.16 39.68 38.912 62.208 90.624 63.488 146.176 0.512 16.896-13.056 30.976-29.952 31.488h-0.768c-16.64 0-30.208-13.312-30.72-29.952-1.792-80.64-69.12-146.432-150.016-146.432-82.688 0-150.016 67.328-150.016 150.016 0 11.776 1.28 23.296 4.096 34.816 3.84 16.384-6.4 33.024-22.784 36.864-2.304 0.512-4.608 0.768-6.912 0.768z" fill="#FFFFFF" p-id="7410"></path><path d="M702.72 623.616c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72c73.472 0 133.12-59.648 133.12-133.12s-59.648-133.12-133.12-133.12c-8.96 0-18.176 1.024-26.88 2.816-16.64 3.328-32.768-7.424-36.352-24.064-3.328-16.64 7.424-32.768 23.808-36.352 12.8-2.56 26.112-3.84 39.168-3.84 107.264 0 194.56 87.296 194.56 194.56s-87.04 194.56-194.304 194.56z" fill="#FFFFFF" p-id="7411"></path><path d="M286.976 562.176h415.744v61.44H286.976z" fill="#FFFFFF" p-id="7412"></path><path d="M272.896 794.88H209.152v-61.44h63.744c4.608 0 8.448-3.84 8.448-8.448V599.04h61.44v125.952c0 38.656-31.232 69.888-69.888 69.888zM474.112 608.256h61.44v189.44h-61.44zM837.376 807.68H734.72c-38.4 0-69.888-31.232-69.888-69.888v-129.792h61.44v129.792c0 4.608 3.84 8.448 8.448 8.448h102.656v61.44z" fill="#FFFFFF" p-id="7413"></path><path d="M142.336 875.776c-59.392 0-107.52-48.128-107.52-107.52s48.128-107.52 107.52-107.52 107.52 48.128 107.52 107.52-48.128 107.52-107.52 107.52z m0-153.6c-25.344 0-46.08 20.736-46.08 46.08s20.736 46.08 46.08 46.08 46.08-20.736 46.08-46.08-20.736-46.08-46.08-46.08zM501.76 977.152c-59.392 0-107.52-48.128-107.52-107.52s48.128-107.52 107.52-107.52 107.52 48.128 107.52 107.52-48.384 107.52-107.52 107.52z m0-153.6c-25.344 0-46.08 20.736-46.08 46.08s20.736 46.08 46.08 46.08 46.08-20.736 46.08-46.08-20.736-46.08-46.08-46.08zM888.576 881.664c-59.392 0-107.52-48.128-107.52-107.52s48.128-107.52 107.52-107.52 107.52 48.128 107.52 107.52-48.384 107.52-107.52 107.52z m0-153.6c-25.344 0-46.08 20.736-46.08 46.08s20.736 46.08 46.08 46.08 46.08-20.736 46.08-46.08-20.736-46.08-46.08-46.08z" fill="#FFFFFF" p-id="7414"></path></svg>

modeler/src/views/decision/communication/api.ts

@@ -28,5 +28,5 @@ export const findPlatformWithComponents = (id: number): Promise<PlatformWithComp
 };
 
 export const saveScenario = (scenario: Scenario): Promise<BasicResponse> => {
-  return req.get(`/system/scene/saveSceneConfig`,scenario);
+  return req.postJson(`/system/scene/saveSceneConfig`,scenario);
 };

modeler/src/views/decision/communication/communication.vue

@@ -11,6 +11,8 @@
               @select="handleSelect"
             />
             <NodesCard
+              v-if="currentScenario && currentScenario.id >0"
+              :scenario="currentScenario"
               @drag-item-start="handleDragStart"
               @drag-item-end="handleDragEnd"
             />
@@ -53,14 +55,14 @@ import { safePreventDefault, safeStopPropagation } from '@/utils/event';
 import Header from '../header.vue';
 
 import type { PlatformWithComponents, Scenario } from './types';
-import { createGraphTaskElement, createLineOptions, type GraphContainer, type GraphTaskElement, hasElements, hasRootElementNode, resolveGraph, useGraphCanvas } from '../graph';
+import { createGraphTaskElement, createLineOptions, type GraphContainer, type GraphTaskElement, resolveGraph, useGraphCanvas } from '../graph';
 
 import { registerScenarioElement } from './register';
-import { createGraphTaskElementFromScenario } from './utils';
+import { createGraphScenarioElement, createGraphTaskElementFromScenario } from './utils';
 
 import PlatformCard from './platform-card.vue';
 import NodesCard from './nodes-card.vue';
-import { saveScenario } from '@/views/decision/communication/api.ts';
+import { saveScenario } from './api';
 
 const TeleportContainer = defineComponent(getTeleport());
 
@@ -143,7 +145,7 @@ export default defineComponent({
       currentScenarioEditing.value = false;
 
       if (!currentScenario.value) {
-        message.error('请先选择或者创建场景.');
+        message.error('请先选择场景.');
         return;
       }
 
@@ -177,7 +179,7 @@ export default defineComponent({
         // 创建节点数据
         const settingTaskElement: GraphTaskElement = createGraphTaskElementFromScenario(pwc, { x, y });
         // 创建节点
-        const settingTaskNode = createGraphTaskElement(settingTaskElement, 250, 120, 'scenario');
+        const settingTaskNode = createGraphScenarioElement(settingTaskElement);
         console.info('create settingTaskNode: ', settingTaskElement, settingTaskNode);
 
         // 将节点添加到画布
@@ -225,7 +227,7 @@ export default defineComponent({
           if (currentScenario.value?.graph && graph.value) {
             if (currentScenario.value?.graph.nodes) {
               currentScenario.value?.graph.nodes.forEach(ele => {
-                const node = createGraphTaskElement(ele as GraphTaskElement);
+                const node = createGraphScenarioElement(ele as GraphTaskElement);
                 console.info('create node: ', ele);
                 // 将节点添加到画布
                 graph.value?.addNode(node as Node);

modeler/src/views/decision/communication/node.vue

@@ -3,33 +3,50 @@
     <a-card
       :class="[
         'ks-scenario-node',
-        `ks-scenario-${element?.category ?? 'model'}-node`,
+        `ks-scenario-${element?.category ?? 'model'}-node`
-        `ks-scenario-group-${element?.group ?? 'general'}`
       ]"
       hoverable
     >
       <template #title>
         <a-space>
-          <span class="ks-scenario-node-title">{{ element?.name ?? '-' }}</span>
+          <span class="ks-scenario-node-title">{{ element?.description ?? element?.name ?? '-' }}</span>
         </a-space>
       </template>
 
-      <div class="port port-in"  data-port="in-0" magnet="passive">
+      <!-- 节点内容区域 -->
+      <div class="w-full">
+        <div class="ks-scenario-node-content">
+          <div
+            v-for="(item, index) in element?.components || []"
+            :key="item.id || index"
+            class="ks-scenario-node-row"
+          >
+            <div
+              :data-port="`in-${item.id || index}`"
+              :title="`入桩: ${item.name}`"
+              class="port port-in"
+              magnet="passive"
+            >
               <div class="triangle-left"></div>
             </div>
-      <div class="w-full ks-scenario-node-text">
+
-        <a-tooltip >
+            <!-- child名称 -->
-          <template #title>
+            <div class="ks-scenario-node-name">
-            {{ element?.description ?? element?.name }}
+              {{ item.description ?? item.name }}
-          </template>
-          <p class="ks-scenario-node-label">
-            {{ substring(element?.name ?? (element?.name ?? '-'), 40) }}
-          </p>
-        </a-tooltip>
             </div>
-      <div class="port port-out" data-port="out-0" magnet="active">
+
+            <!-- 右侧出桩：只能作为连线源 -->
+            <div
+              :data-port="`out-${item.id || index}`"
+              :title="`出桩: ${item.name}`"
+              class="port port-out"
+              magnet="active"
+            >
               <div class="triangle-right" ></div>
             </div>
+          </div>
+        </div>
+      </div>
     </a-card>
 
     <template #overlay>
@@ -113,6 +130,7 @@ export default defineComponent({
 
     onMounted(() => {
       _props.node?.on('change:data', handleDataChange);
+      console.error('element',element.value)
     });
 
     onUnmounted(() => {
@@ -162,6 +180,7 @@ export default defineComponent({
     background: linear-gradient(to bottom, rgba(108, 99, 255, 0.15), rgba(108, 99, 255, 0.05));
     //background: url('@/assets/icons/bg-node-head.png') center / 100% 100%;
     //background: linear-gradient(to bottom, rgb(234 234 234 / 20%), rgb(191 191 191 / 58%));
+    background: url('@/assets/icons/card-head-red.png') center / 100% 100%;
   }
 
   .ks-scenario-node-icon {
@@ -206,7 +225,7 @@ export default defineComponent({
     width: 100%;
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 6px;
   }
 
   .ks-scenario-node-row {
@@ -270,8 +289,7 @@ export default defineComponent({
 
     position: absolute;
     //top: 7px;
-    left: 10px;
+    left: -17px;
-    top: 50%;
   }
 
   .port-out {
@@ -282,16 +300,11 @@ export default defineComponent({
     width: 13px;
     height: 13px;
     display: block;
-    //background: url('@/assets/icons/point.svg') center / 100% 100%;
     border: 2px solid #5da1df;
     background:#5da1df;
 
     position: absolute;
-    //right: 8px;
+    right: -17px;
-    //top: 7px;
-    top: 50%;
-    right: 6px;
-
   }
 
   // 节点文本样式
@@ -300,128 +313,7 @@ export default defineComponent({
     line-height: 24px;
     overflow: hidden;
     text-overflow: ellipsis;
-    //white-space: nowrap;
   }
 
-  &.ks-scenario-root-node{
-    .ks-scenario-node-icon {
-      background: url('@/assets/icons/icon-root.svg') center / 100% 100%;
-    }
-  }
-
-  &.ks-scenario-action-node{
-    .ant-card-head {
-      background: url('@/assets/icons/card-head-red.png') center / 100% 100%;
-    }
-    .ks-scenario-node-icon {
-      background: url('@/assets/icons/icon-action.svg') center / 100% 100%;
-    }
-  }
-
-  &.ks-scenario-sequence-node{
-    .ks-scenario-node-icon {
-      background: url('@/assets/icons/icon-sequence.svg') center / 100% 100%;
-    }
-  }
-
-  &.ks-scenario-parallel-node{
-    .ks-scenario-node-icon {
-      background: url('@/assets/icons/icon-parallel.svg') center / 100% 100%;
-    }
-  }
-
-  &.ks-scenario-precondition-node{
-    .ks-scenario-node-icon {
-      background: url('@/assets/icons/icon-branch.svg') center / 100% 100%;
-    }
-  }
-
-  &.ks-scenario-group-control,
-  &.ks-scenario-group-condition {
-    .ant-card-head{
-      display:none;
-    }
-    .ant-card-body {
-      height: calc(100%);
-      border-radius: 8px;
-      background: url('@/assets/icons/card-head-gray.png') center / 100% 100%;
-    }
-
-    &.ks-scenario-root-node{
-      .ant-card-body {
-        background: url('@/assets/icons/card-head-dark.png') center / 100% 100%;
-      }
-    }
-    &.ks-scenario-sequence-node{
-      .ant-card-body {
-        background: url('@/assets/icons/card-head-green.png') center / 100% 100%;
-      }
-    }
-
-    &.ks-scenario-parallel-node{
-      .ant-card-body {
-        background: url('@/assets/icons/card-head-blue.png') center / 100% 100%;
-      }
-    }
-
-    &.ks-scenario-precondition-node{
-      .ant-card-body {
-        background: url('@/assets/icons/card-head-dark.png') center / 100% 100%;
-      }
-    }
-
-    .port-in,
-    .port-out {
-      top: 40%;
-    }
-    .ks-scenario-node-text{
-      line-height: 38px;
-    }
-  }
-
-  //&.ks-scenario-precondition-node{
-  //  border:0;
-  //  box-shadown:none;
-  //  &:hover{
-  //    border:0;
-  //    box-shadown:none;
-  //  }
-  //  background: url('@/assets/icons/lx.svg') center / 100% 100%;
-  //  //transform: rotate(45deg);
-  //  .ant-card-body {
-  //    border: 0;
-  //    box-shadow: none;
-  //    height: 95px;
-  //    line-height: 80px;
-  //    font-size: 10px;
-  //    padding: 0 !important;
-  //  }
-  //  .ant-card-head {
-  //    display: none;
-  //  }
-  //
-  //  .ks-scenario-node-label {
-  //    width: 40px;          /* 保留原有宽度 */
-  //    text-align: center;   /* 保留文字居中 */
-  //    /* 核心修改：取消固定行高，重置换行相关属性 */
-  //    word-wrap: break-word;/* 强制换行（兼容老旧浏览器） */
-  //    word-break: break-all;/* 截断长单词/字符，确保在40px内换行 */
-  //    white-space: normal;  /* 恢复默认换行规则（避免文字不换行） */
-  //    /* 可选：添加行间距，提升多行可读性 */
-  //    line-height: 1.4;     /* 多行时的行间距，可根据需求调整 */
-  //    padding: 10px 0;      /* 上下内边距，替代原有line-height:98px的垂直居中效果 */
-  //    margin: 31% auto;
-  //  }
-  //
-  //  .port-in {
-  //    left: 12px;
-  //    top: 42px;
-  //  }
-  //
-  //  .port-out {
-  //    right: 6px;
-  //    top: 42px;
-  //  }
-  //}
 }
 </style>

modeler/src/views/decision/communication/nodes-card.vue

@@ -14,7 +14,7 @@
                 @dragend="handleDragEnd"
                 @dragstart="handleDragStart($event, nm)"
               >
-                <img :alt="nm.description ?? nm.name ?? ''" class="icon" src="@/assets/icons/model-4.svg" />
+                <img :alt="nm.description ?? nm.name ?? ''" class="icon" src="@/assets/icons/model.svg" />
                 <span class="desc">{{ nm.description ?? nm.name }}</span>
               </div>
             </a-col>
@@ -27,23 +27,30 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue';
+import { defineComponent, onMounted, type PropType, ref } from 'vue';
 import { safePreventDefault, safeStopPropagation } from '@/utils/event';
 import {findPlatformWithComponents} from './api'
-import {type PlatformWithComponents} from './types'
+import { type PlatformWithComponents, type Scenario } from './types';
 
 export default defineComponent({
   emits: ['drag-item-start', 'drag-item-end'],
+  props: {
+    scenario: {
+      type: Object as PropType<Scenario>,
+      required: true,
+    }
+  },
   setup(_props, { emit }) {
 
     const activeKey = ref<number>(1);
     const templateData = ref<PlatformWithComponents[]>([]);
     const isDraggingOver = ref<boolean>(false);
     const draggedNodeData = ref<PlatformWithComponents | null>(null);
+    const currentScenario = ref<Scenario|null>(_props.scenario)
 
     const loadTress = () => {
       templateData.value = []
-      findPlatformWithComponents(1).then(r => {
+      findPlatformWithComponents(_props.scenario?.id).then(r => {
         templateData.value = r.data ?? []
       });
     };

modeler/src/views/decision/communication/platform-card.vue

@@ -41,6 +41,7 @@
         </template>
       </a-list>
       <a-pagination
+        v-if="totalTress > scenarioQuery.pageSize"
         v-model:current="scenarioQuery.pageNum"
         :page-size="scenarioQuery.pageSize"
         :total="totalTress"

modeler/src/views/decision/communication/utils.ts

@@ -21,9 +21,12 @@ export const createGraphTaskElementFromScenario = (
     id: 0,
     key: generateKey(),
     type: 'scenario',
-    template: platform.id,
+    name: platform.name,
+    platformId: platform.id,
+    scenarioId: platform.scenarioId,
+    components: platform.components ?? [],
+    template: 0,
     templateType: null,
-    name: null,
     category: null,
     group: null,
     description: platform.description,
@@ -40,3 +43,37 @@ export const createGraphTaskElementFromScenario = (
     variables: [],
   } as GraphTaskElement;
 };
+
+export const createGraphScenarioElement = (element: GraphTaskElement): any => {
+  let realHeight = 120;
+  let width: number = 250;
+  if (!realHeight) {
+    realHeight = 120;
+  }
+  if(element?.components){
+    if(element?.components?.length > 2){
+      realHeight = 90 + element?.components?.length * 25
+    } else if(element?.components?.length <=1){
+      realHeight = 120
+    }
+  }
+
+  return {
+    shape: 'scenario',
+    id: element.key,
+    position: {
+      x: element.position?.x || 0,
+      y: element.position?.y || 0,
+    },
+    size: {
+      width: width,
+      height: realHeight,
+    },
+    attrs: {
+      label: {
+        text: element.name,
+      },
+    },
+    data: element,
+  };
+};

modeler/src/views/decision/graph/element.ts

@@ -10,6 +10,13 @@
 
 import type { NullableString } from '@/types';
 
+export interface GraphComponentElement {
+  id: number,
+  name: NullableString,
+  type: NullableString,
+  description: NullableString,
+}
+
 export interface GraphPosition {
   x: number;
   y: number;
@@ -46,6 +53,7 @@ export interface GraphBaseElement {
   position: GraphPosition;
   category: NullableString;
   element?: GraphDraggableElement;
+  components?: GraphComponentElement[]
 
   [key: string]: unknown;
 }