UPDATE: VERSION-20260315
This commit is contained in:
libertyspy
1
modeler/src/assets/icons/platform.svg
Normal file
1
modeler/src/assets/icons/platform.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -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);
|
||||
};
|
||||
@@ -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);
|
||||
|
||||
@@ -3,32 +3,49 @@
|
||||
<a-card
|
||||
:class="[
|
||||
'ks-scenario-node',
|
||||
`ks-scenario-${element?.category ?? 'model'}-node`,
|
||||
`ks-scenario-group-${element?.group ?? 'general'}`
|
||||
`ks-scenario-${element?.category ?? 'model'}-node`
|
||||
]"
|
||||
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="triangle-left"></div>
|
||||
</div>
|
||||
<div class="w-full ks-scenario-node-text">
|
||||
<a-tooltip >
|
||||
<template #title>
|
||||
{{ element?.description ?? element?.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 class="triangle-right" ></div>
|
||||
<!-- 节点内容区域 -->
|
||||
<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>
|
||||
|
||||
<!-- child名称 -->
|
||||
<div class="ks-scenario-node-name">
|
||||
{{ item.description ?? item.name }}
|
||||
</div>
|
||||
|
||||
<!-- 右侧出桩：只能作为连线源 -->
|
||||
<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>
|
||||
|
||||
@@ -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;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
</style>
|
||||
@@ -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 ?? []
|
||||
});
|
||||
};
|
||||
|
||||
@@ -11,9 +11,9 @@
|
||||
<div class="w-full" style="padding: 5px;">
|
||||
<a-flex>
|
||||
<a-input-search v-model:value="scenarioQuery.name" allowClear placeholder="场景名称" size="small" @search="loadTress" />
|
||||
<!-- <a-button size="small" style="margin-left: 10px;">-->
|
||||
<!-- <PlusOutlined style="margin-top: 0px;display: block;" @click="$emit('create-tree')" />-->
|
||||
<!-- </a-button>-->
|
||||
<!-- <a-button size="small" style="margin-left: 10px;">-->
|
||||
<!-- <PlusOutlined style="margin-top: 0px;display: block;" @click="$emit('create-tree')" />-->
|
||||
<!-- </a-button>-->
|
||||
</a-flex>
|
||||
</div>
|
||||
<a-list :data-source="scenario || []" size="small" style="min-height: 25vh">
|
||||
@@ -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"
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
};
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user