88 lines
2.8 KiB
Vue
88 lines
2.8 KiB
Vue
<template>
|
|
<div class="control-container flex text-center w-full">
|
|
<div class="control-wrapper">
|
|
<h3 class="control-title">任务类</h3>
|
|
<div class="control-items">
|
|
<div v-for="item in taskInputs"
|
|
class="ks-model-item control-item"
|
|
draggable="true"
|
|
@dragend="handleDragEnd"
|
|
@dragstart="handleDragStart($event, item)">
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="control-wrapper">
|
|
<h3 class="control-title">机动控制类</h3>
|
|
<div class="control-items">
|
|
<div v-for="item in controlInputs"
|
|
class="ks-model-item control-item"
|
|
draggable="true"
|
|
@dragend="handleDragEnd"
|
|
@dragstart="handleDragStart($event, item)">
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="control-wrapper">
|
|
<h3 class="control-title">飞行参数类</h3>
|
|
<div class="control-items">
|
|
<div v-for="item in flyInputs"
|
|
class="ks-model-item control-item"
|
|
draggable="true"
|
|
@dragend="handleDragEnd"
|
|
@dragstart="handleDragStart($event, item)">
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, type PropType } from 'vue';
|
|
import { CheckOutlined } from '@ant-design/icons-vue';
|
|
import type { ModelElement, SavedGraphData } from './types';
|
|
import type { Graph, Node, NodeProperties } from '@antv/x6';
|
|
import BuilderInputs from './builder-inputs.vue';
|
|
import { controlInputs, flyInputs, taskInputs } from './control-options';
|
|
import type { ElementInput } from './inputs';
|
|
|
|
export default defineComponent({
|
|
components: { CheckOutlined, BuilderInputs },
|
|
props: {
|
|
node: { type: [Object, null] as PropType<Node<NodeProperties> | null | undefined>, required: false },
|
|
graph: { type: [Object, null] as PropType<Graph | null | undefined>, required: true },
|
|
element: { type: [Object, null] as PropType<ModelElement | null | undefined>, required: false },
|
|
saved: { type: Object as PropType<SavedGraphData>, required: false },
|
|
},
|
|
emits: ['element-drag-end', 'element-drag-start'],
|
|
setup(_props, { emit }) {
|
|
|
|
const handleDragEnd = (e: DragEvent) => {
|
|
emit('element-drag-end', e);
|
|
};
|
|
|
|
const handleDragStart = (e: DragEvent, nm: ElementInput, parent?: ElementInput) => {
|
|
nm.parent = parent ? {
|
|
id: parent?.id,
|
|
key: parent?.key,
|
|
name: parent?.name,
|
|
description: parent?.description,
|
|
category: parent?.category,
|
|
children: [],
|
|
draggable: true,
|
|
} : undefined;
|
|
emit('element-drag-start', e, nm);
|
|
};
|
|
|
|
return {
|
|
handleDragEnd,
|
|
handleDragStart,
|
|
taskInputs,
|
|
controlInputs,
|
|
flyInputs,
|
|
};
|
|
},
|
|
});
|
|
</script> |