UPDATE: VERSION-20260315
This commit is contained in:
@@ -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