diff --git a/modeler/src/assets/icons/platform.svg b/modeler/src/assets/icons/platform.svg new file mode 100644 index 0000000..90b50a2 --- /dev/null +++ b/modeler/src/assets/icons/platform.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/modeler/src/views/decision/communication/api.ts b/modeler/src/views/decision/communication/api.ts index 8477293..9bb20a1 100644 --- a/modeler/src/views/decision/communication/api.ts +++ b/modeler/src/views/decision/communication/api.ts @@ -28,5 +28,5 @@ export const findPlatformWithComponents = (id: number): Promise => { - return req.get(`/system/scene/saveSceneConfig`,scenario); + return req.postJson(`/system/scene/saveSceneConfig`,scenario); }; \ No newline at end of file diff --git a/modeler/src/views/decision/communication/communication.vue b/modeler/src/views/decision/communication/communication.vue index 50e9e40..061844a 100644 --- a/modeler/src/views/decision/communication/communication.vue +++ b/modeler/src/views/decision/communication/communication.vue @@ -11,6 +11,8 @@ @select="handleSelect" /> @@ -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); diff --git a/modeler/src/views/decision/communication/node.vue b/modeler/src/views/decision/communication/node.vue index 211d1cc..b7a2ad8 100644 --- a/modeler/src/views/decision/communication/node.vue +++ b/modeler/src/views/decision/communication/node.vue @@ -3,32 +3,49 @@ -
-
-
-
- - -

- {{ substring(element?.name ?? (element?.name ?? '-'), 40) }} -

- -
-
-
+ +
+
+
+
+
+
+ + +
+ {{ item.description ?? item.name }} +
+ + +
+
+
+
+
@@ -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; - top: 50%; + left: -17px; } .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; - //top: 7px; - top: 50%; - right: 6px; - + right: -17px; } // 节点文本样式 @@ -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; - // } - //} } \ No newline at end of file diff --git a/modeler/src/views/decision/communication/nodes-card.vue b/modeler/src/views/decision/communication/nodes-card.vue index db9c3ed..da38e98 100644 --- a/modeler/src/views/decision/communication/nodes-card.vue +++ b/modeler/src/views/decision/communication/nodes-card.vue @@ -14,7 +14,7 @@ @dragend="handleDragEnd" @dragstart="handleDragStart($event, nm)" > - + {{ nm.description ?? nm.name }}
@@ -27,23 +27,30 @@