feat: httpNode
This commit is contained in:
parent
bae41c54f5
commit
6a9288a576
@ -7,3 +7,27 @@ export const getDictList = (params) => {
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export const addProject = (data) => {
|
||||
return request({
|
||||
url: '/ti/project',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export const updateProject = (data) => {
|
||||
return request({
|
||||
url: '/ti/project',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export const getProjectList = (params) => {
|
||||
return request({
|
||||
url: '/ti/project/list',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
@ -275,7 +275,7 @@ export const collapseList = [
|
||||
{
|
||||
icon: expressionSvg,
|
||||
name: "HTTP请求",
|
||||
type: "serviceNode",
|
||||
type: "http",
|
||||
desc: "HTTP请求",
|
||||
action: 'HTTP',
|
||||
nodeParams: [
|
||||
|
||||
219
src/views/flow/nodes/function/httpNode.js
Normal file
219
src/views/flow/nodes/function/httpNode.js
Normal file
@ -0,0 +1,219 @@
|
||||
// 导入 HtmlNode 及其模型，为后续继承做准备
|
||||
import { HtmlNode, HtmlNodeModel } from "@logicflow/core";
|
||||
// 导入 Vue 相关方法，用于渲染组件
|
||||
import { createApp, h, nextTick } from "vue";
|
||||
import ElementPlus from "element-plus";
|
||||
// 导入 Vue 组件
|
||||
// @ts-ignore
|
||||
import HttpNode from "./httpNode.vue";
|
||||
import OuterNode from "../../components/OuterNode.vue";
|
||||
import JsonViewer from 'vue3-json-viewer'
|
||||
|
||||
/**
|
||||
* 定义一个 元素的 HTML 节点类，继承自 HtmlNode
|
||||
* 该类负责在 HTML 中渲染 元素，并处理其交互逻辑
|
||||
*/
|
||||
class HttpNodeHtmlNode extends HtmlNode {
|
||||
resizeObserver = null;
|
||||
isMounted; // 标记组件是否已挂载
|
||||
r; // 渲染函数
|
||||
app; // Vue 应用实例
|
||||
container = null;
|
||||
|
||||
static reusePool = new Map(); // 节点复用池
|
||||
|
||||
/**
|
||||
* 构造函数
|
||||
* @param props 传递给节点的属性，包括模型、图模型等
|
||||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.initVueApp(props);
|
||||
}
|
||||
|
||||
initVueApp(props) {
|
||||
this.isMounted = false;
|
||||
|
||||
this.hideAnchor = false;
|
||||
this.autoExpand = true; // 防止锚点被折叠
|
||||
this.anchorsPreset = "default"; // 重置锚点预设
|
||||
// 创建 元素的渲染函数
|
||||
this.r = h(OuterNode, {
|
||||
model: props.model,
|
||||
component: HttpNode,
|
||||
properties: {
|
||||
...props.model.getProperties(),
|
||||
},
|
||||
onContentChange: this.handleContentChange.bind(this),
|
||||
onBindRef: this.handleComponentInstance.bind(this)
|
||||
});
|
||||
|
||||
// 创建 Vue 应用实例，并指定渲染函数
|
||||
this.app = createApp({
|
||||
render: () => this.r,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 HTML 内容设置到指定的根元素上
|
||||
* @param rootEl 根元素
|
||||
*/
|
||||
async setHtml(rootEl) {
|
||||
const nodeId = this.props.model.id;
|
||||
if (HttpNodeHtmlNode.reusePool.has(nodeId)) {
|
||||
rootEl.appendChild(HttpNodeHtmlNode.reusePool.get(nodeId));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.isMounted) {
|
||||
this.isMounted = true;
|
||||
this.container = document.createElement("div");
|
||||
this.container.style.display = "inline-block"; // 关键：确保容器自适应内容
|
||||
|
||||
rootEl.appendChild(this.container);
|
||||
this.app.use(ElementPlus);
|
||||
this.app.use(JsonViewer);
|
||||
|
||||
this.app.mount(this.container);
|
||||
await nextTick();
|
||||
this.setupSizeObserver();
|
||||
HttpNodeHtmlNode.reusePool.set(nodeId, this.container);
|
||||
} else {
|
||||
this.r.component.props.properties = this.props.model.getProperties();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取节点文本内容
|
||||
* 对于元素，返回 null，因为其内容由特定组件渲染
|
||||
* @returns {null}
|
||||
*/
|
||||
getText() {
|
||||
return null;
|
||||
}
|
||||
|
||||
handleComponentInstance(data) {
|
||||
// 将组件实例保存到节点模型
|
||||
this.props.model.setComponentInstance(data)
|
||||
}
|
||||
|
||||
handleContentChange() {
|
||||
// 内容变化时强制更新尺寸
|
||||
this.updateNodeSize();
|
||||
}
|
||||
|
||||
// 渲染完成后获取实际尺寸
|
||||
updateNodeSize() {
|
||||
if (this.container) {
|
||||
const { SCALE_X, SCALE_Y } = this.props.graphModel.transformModel;
|
||||
const node = this.container.querySelector(".node__container");
|
||||
const rect = node.getBoundingClientRect();
|
||||
this.props.model.updateSize(rect.width / SCALE_X, rect.height / SCALE_Y);
|
||||
}
|
||||
}
|
||||
|
||||
setupSizeObserver() {
|
||||
// 首次渲染立即检测
|
||||
requestAnimationFrame(() => {
|
||||
this.updateNodeSize();
|
||||
// 持续监听变化
|
||||
this.resizeObserver = new ResizeObserver(() => {
|
||||
this.updateNodeSize();
|
||||
});
|
||||
this.resizeObserver.observe(this.container);
|
||||
});
|
||||
}
|
||||
|
||||
// 组件卸载时移除监听
|
||||
onDestroy() {
|
||||
this.resizeObserver?.disconnect();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 定义一个元素的 HTML 模型类，继承自 HtmlNodeModel
|
||||
* 该类主要设置节点的属性和样式
|
||||
*/
|
||||
class HttpNodeHtmlModel extends HtmlNodeModel {
|
||||
initNodeData(data) {
|
||||
super.initNodeData(data);
|
||||
}
|
||||
|
||||
// 保存组件实例引用
|
||||
setComponentInstance(instance) {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
// 验证表单
|
||||
async validateForm() {
|
||||
const result = this.componentInstance.validateForm()
|
||||
return result
|
||||
}
|
||||
|
||||
setCustomProperties() {
|
||||
this.componentInstance.setNodeProperties()
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置节点属性
|
||||
* 包括宽度、高度、文本编辑属性等
|
||||
*/
|
||||
setAttributes() {
|
||||
// 初始设置为0，后续动态更新
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
this.text.editable = false;
|
||||
}
|
||||
|
||||
updateSize(width, height) {
|
||||
this.width = width + 24;
|
||||
this.height = height + 50;
|
||||
this.initNodeData(this); // 触发节点重绘
|
||||
}
|
||||
|
||||
// 定义节点只有左右两个锚点. 锚点位置通过中心点和宽度算出来。
|
||||
getDefaultAnchor() {
|
||||
let _a = this,
|
||||
x = _a.x,
|
||||
y = _a.y,
|
||||
width = _a.width,
|
||||
height = _a.height;
|
||||
return [
|
||||
{
|
||||
x: x + width / 2 + 4,
|
||||
y: y,
|
||||
name: "right",
|
||||
id: "".concat(this.id, "_1"),
|
||||
properties: { connectionType: "source" },
|
||||
},
|
||||
{
|
||||
x: x - width / 2,
|
||||
y: y,
|
||||
name: "left",
|
||||
id: "".concat(this.id, "_3"),
|
||||
properties: { connectionType: "target" },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取节点轮廓样式
|
||||
* 覆盖父类方法，设置 stroke 属性为 none，以适应特定的视觉效果
|
||||
* @returns {object} 节点轮廓样式
|
||||
*/
|
||||
getOutlineStyle() {
|
||||
const style = super.getOutlineStyle();
|
||||
style.stroke = "none";
|
||||
style.hover.stroke = "none";
|
||||
return style;
|
||||
}
|
||||
}
|
||||
|
||||
// 导出方法注册
|
||||
export function registerHttpNode(lf) {
|
||||
lf.register({
|
||||
type: "http",
|
||||
view: HttpNodeHtmlNode,
|
||||
model: HttpNodeHtmlModel,
|
||||
});
|
||||
}
|
||||
612
src/views/flow/nodes/function/httpNode.vue
Normal file
612
src/views/flow/nodes/function/httpNode.vue
Normal file
@ -0,0 +1,612 @@
|
||||
<template>
|
||||
<div class="node__container" :class="props.model.id">
|
||||
<NodeState :state="nodeOperatingStatus">
|
||||
<template #input>
|
||||
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
||||
</template>
|
||||
<template #output>
|
||||
<JsonViewer
|
||||
v-if="props.properties.outputType === 'json'"
|
||||
:value="outputJsonData"
|
||||
copyable
|
||||
boxed
|
||||
sort
|
||||
theme="light"
|
||||
/>
|
||||
<el-image
|
||||
v-if="props.properties.outputType === 'img'"
|
||||
v-for="item in outputJsonData.imageUrl"
|
||||
style="width: 60px; height: 60px"
|
||||
:src="item"
|
||||
:preview-src-list="outputJsonData.imageUrl"
|
||||
:preview-teleported="true"
|
||||
show-progress
|
||||
fit="fill"
|
||||
/>
|
||||
<IPlayer
|
||||
v-if="props.properties.outputType === 'video'"
|
||||
v-for="item in outputJsonData.videoUrl"
|
||||
:videoUrl="item"
|
||||
/>
|
||||
</template>
|
||||
</NodeState>
|
||||
<NodeTitle
|
||||
:icon="props.properties.icon"
|
||||
:nodeId="props.model.id"
|
||||
:nodeProperties="props.properties"
|
||||
:nodeType="props.properties.nodeType || 'NONE'"
|
||||
:nodeName="props.properties.name"
|
||||
:nodeDesc="props.properties.desc"
|
||||
:zoom-state="nodeZoom"
|
||||
@zoom="zoom"
|
||||
@setNodeName="setNodeName"
|
||||
/>
|
||||
<div class="input__container" v-show="nodeZoom">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输入</div>
|
||||
</div>
|
||||
<div class="right" v-if="properties.properties?.canAddFormItem">
|
||||
<el-button
|
||||
:disabled="flowStore.disableForm"
|
||||
@click="addFormItem"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="dynamicForm"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:disabled="flowStore.disableForm"
|
||||
>
|
||||
<div v-for="(property, index) in formData.nodeParams" :key="index">
|
||||
<el-row>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数名' : ''"
|
||||
:prop="`nodeParams.${index}.name`"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入参数名', trigger: 'blur' },
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
:disabled="property?.disabled || false"
|
||||
v-model="property.name"
|
||||
@keydown="handleInputKeydown"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数值' : ''"
|
||||
:prop="`nodeParams.${index}.type`"
|
||||
>
|
||||
<el-select
|
||||
v-model="property.type"
|
||||
@change="handleTypeChange(index)"
|
||||
>
|
||||
<el-option label="引用" value="quote" />
|
||||
<el-option label="输入" value="input" />
|
||||
</el-select>
|
||||
<el-form-item
|
||||
v-if="property.type === 'input'"
|
||||
:rules="[
|
||||
{
|
||||
required: property?.required ?? true,
|
||||
message: '请输入参数值',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
:prop="`nodeParams.${index}.input`"
|
||||
>
|
||||
<el-input-number
|
||||
v-if="property.componentType === 'number'"
|
||||
v-model="property.input"
|
||||
:min="0"
|
||||
:controls="false"
|
||||
:step-strictly="true"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
@keydown="handleInputKeydown"
|
||||
/>
|
||||
<el-select
|
||||
v-model="property.input"
|
||||
v-else-if="property.componentType === 'select'"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in property.selectOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input
|
||||
@keydown="handleInputKeydown"
|
||||
v-else
|
||||
v-model="property.input"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="property.type === 'quote'"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择参数值',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
:prop="`nodeParams.${index}.quote`"
|
||||
>
|
||||
<el-cascader
|
||||
:ref="
|
||||
(el) => {
|
||||
if (el) cascaderRefs[index] = el;
|
||||
}
|
||||
"
|
||||
v-model="property.quote"
|
||||
:checkStrictly="true"
|
||||
:options="quoteOptions"
|
||||
placeholder="请选择"
|
||||
@visible-change="
|
||||
(visible) => visibleChange(visible, index, property.quote)
|
||||
"
|
||||
@change="(value) => cascaderChange(value, index)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output__container" v-show="nodeZoom">
|
||||
<div v-if="props.properties?.outputParams?.length > 0">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输出</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button
|
||||
:disabled="flowStore.disableForm"
|
||||
@click="addOutputFormItem"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:rules="outputRules"
|
||||
ref="outputFormRef"
|
||||
>
|
||||
<FormItemRecursive
|
||||
formType="output"
|
||||
:current-list="formData.outputParams"
|
||||
prop-path="outputParams"
|
||||
:depth="0"
|
||||
:is-first-level="true"
|
||||
:endDepth="2"
|
||||
:parent-path="[]"
|
||||
@delete-item="deleteTopLevelItem"
|
||||
/>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
|
||||
import { getInput, initNodeZoom } from "@/utils/flow";
|
||||
import { useFlowStore } from "@/store/modules/flow";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
import NodeTitle from "../../components/NodeTitle.vue";
|
||||
import NodeState from "../../components/NodeState.vue";
|
||||
import "vue3-json-viewer/dist/index.css";
|
||||
import { emitter } from "@/utils/eventBus";
|
||||
import IPlayer from "@/views/device/register/components/LogicFlow/IPlayer/index.vue";
|
||||
import FormItemRecursive from "../common/FormItemRecursive.vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
properties: Object,
|
||||
});
|
||||
|
||||
const emits = defineEmits(["contentChange"]);
|
||||
|
||||
const flowStore = useFlowStore();
|
||||
|
||||
const formData = reactive({
|
||||
nodeParams: [],
|
||||
outputParams: [],
|
||||
});
|
||||
|
||||
const rules = reactive({});
|
||||
|
||||
const quoteOptions = ref([]);
|
||||
const handleTypeChange = (index) => {
|
||||
if (formData.nodeParams[index].type === "input") {
|
||||
formData.nodeParams[index].quote = "";
|
||||
} else {
|
||||
formData.nodeParams[index].input = "";
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cascaderRefs = ref([]);
|
||||
const outputRules = reactive({});
|
||||
const cascaderChange = (value, index) => {
|
||||
const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
|
||||
formData.nodeParams[index].quote = value;
|
||||
formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
|
||||
};
|
||||
|
||||
const addOutputFormItem = () => {
|
||||
formData.outputParams.push({
|
||||
name: "",
|
||||
type: "",
|
||||
desc: "",
|
||||
children: [],
|
||||
});
|
||||
};
|
||||
|
||||
const dynamicForm = ref();
|
||||
const outputFormRef = ref();
|
||||
const setNodeProperties = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
let flag = true;
|
||||
if (outputFormRef.value) {
|
||||
flag = await outputFormRef.value.validate();
|
||||
}
|
||||
|
||||
if (result && flag) {
|
||||
const data = toRaw(formData);
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
...properties,
|
||||
...data,
|
||||
zoom: nodeZoom.value
|
||||
});
|
||||
emits("contentChange");
|
||||
}
|
||||
} catch {
|
||||
// dynamicForm.value.clearValidate();
|
||||
}
|
||||
};
|
||||
|
||||
const setNodeName = (name) => {
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
...properties,
|
||||
name
|
||||
});
|
||||
emits("contentChange");
|
||||
}
|
||||
|
||||
const nodeOperatingStatus = ref("NORMAL");
|
||||
const inputJsonData = ref({});
|
||||
const outputJsonData = ref({});
|
||||
|
||||
const visibleChange = (value, index, quote) => {
|
||||
if (value) {
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
const currentValue = [...quote];
|
||||
// 强制级联选择器重新处理选中值与选项的匹配
|
||||
if (cascaderRefs.value[index]) {
|
||||
// 等待DOM更新后再设置值，确保新options已生效
|
||||
setTimeout(() => {
|
||||
// 如果当前有选中值，重新设置一次以触发重新匹配
|
||||
if (currentValue.length) {
|
||||
formData.nodeParams[index].quote = [];
|
||||
// 确保响应式更新
|
||||
setTimeout(() => {
|
||||
formData.nodeParams[index].quote = currentValue;
|
||||
}, 0);
|
||||
}
|
||||
// 手动触发级联选择器的重新渲染
|
||||
// cascaderRefs.value[index].updatePopper();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
if (result) {
|
||||
return { valid: true, message: "验证通过" };
|
||||
} else {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
} catch {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
};
|
||||
|
||||
const addFormItem = () => {
|
||||
formData.nodeParams.push({
|
||||
name: "",
|
||||
type: "",
|
||||
desc: "",
|
||||
required: false,
|
||||
children: [],
|
||||
});
|
||||
emits("contentChange");
|
||||
};
|
||||
|
||||
// 删除顶层表单项
|
||||
const deleteTopLevelItem = (fullPath) => {
|
||||
// 从顶层数据开始查找
|
||||
let currentLevel = formData.outputParams;
|
||||
|
||||
// 遍历路径（除最后一个索引，因为最后一个是要删除的项）
|
||||
for (let i = 0; i < fullPath.length - 1; i++) {
|
||||
const index = fullPath[i];
|
||||
// 进入下一层级
|
||||
currentLevel = currentLevel[index].children;
|
||||
}
|
||||
|
||||
// 最后一个索引是当前层级要删除的项
|
||||
const lastIndex = fullPath[fullPath.length - 1];
|
||||
currentLevel.splice(lastIndex, 1);
|
||||
emits("contentChange");
|
||||
};
|
||||
|
||||
const nodeZoom = ref(props?.properties?.zoom ?? true)
|
||||
const zoom = (flag) => {
|
||||
nodeZoom.value = flag
|
||||
initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.properties,
|
||||
() => {
|
||||
if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
|
||||
formData.nodeParams = props.properties.nodeParams;
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
|
||||
})
|
||||
}
|
||||
if (
|
||||
props.properties.outputParams &&
|
||||
props.properties.outputParams.length > 0
|
||||
) {
|
||||
formData.outputParams = props.properties.outputParams;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
const handleInputKeydown = (e) => {
|
||||
// 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
|
||||
e.stopPropagation();
|
||||
// 可选：明确放行 Ctrl+V（增强兼容性）
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "v") {
|
||||
e.returnValue = true; // 允许默认粘贴行为
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("changeNodeState", (data) => {
|
||||
if (data.nodeId === props.model.id) {
|
||||
nodeOperatingStatus.value = data.status;
|
||||
let inputData = {};
|
||||
let output = {};
|
||||
try {
|
||||
inputData = JSON.parse(data.paramsIn) || {};
|
||||
output = JSON.parse(data.paramsOut) || {};
|
||||
} catch (error) {
|
||||
inputData = data.paramsIn || {};
|
||||
output = data.paramsOut || {};
|
||||
}
|
||||
inputJsonData.value = inputData;
|
||||
outputJsonData.value = output;
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
|
||||
emitter.on("contentChange", (data) => {
|
||||
if (data.id === props.model.id) {
|
||||
nodeOperatingStatus.value = "NORMAL";
|
||||
inputJsonData.value = {};
|
||||
outputJsonData.value = {};
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("changeNodeState");
|
||||
emitter.off("contentChange");
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
validateForm,
|
||||
setNodeProperties,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.node__container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
.input__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.addFormItem {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
|
||||
.sub-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gSon-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.output__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.addFormItem {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-row) {
|
||||
align-items: end;
|
||||
|
||||
.el-input {
|
||||
--el-input-width: 148px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
--el-select-width: 148px;
|
||||
}
|
||||
|
||||
.el-cascader {
|
||||
--el-form-inline-content-width: 148px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -4,6 +4,7 @@ import { registerSwitch } from './switch'
|
||||
import { registerSubEndNode } from './subEnd'
|
||||
import { registerSubStartNode } from './subStart'
|
||||
import { registerSleepNode } from './sleep'
|
||||
import { registerHttpNode } from './httpNode'
|
||||
|
||||
export const registerFunction = (lf) => {
|
||||
registerLoopBodyNode(lf)
|
||||
@ -12,4 +13,5 @@ export const registerFunction = (lf) => {
|
||||
registerSubEndNode(lf)
|
||||
registerSubStartNode(lf)
|
||||
registerSleepNode(lf)
|
||||
registerHttpNode(lf)
|
||||
}
|
||||
@ -118,13 +118,6 @@
|
||||
fixed="right"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleSetting(row)"
|
||||
v-hasPermi="['system:project:add', 'system:project:edit']"
|
||||
>配置方案
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@ -160,6 +153,8 @@
|
||||
body-class="testProject_dialog"
|
||||
>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
|
||||
<div class="card">
|
||||
<div class="form-title">项目信息</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="项目名称" prop="projectName">
|
||||
@ -174,9 +169,25 @@
|
||||
:data="treeData"
|
||||
:render-after-expand="false"
|
||||
style="width: 240px"
|
||||
@change="vehicleConfigChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="功能选择" prop="testFuncs">
|
||||
<el-select
|
||||
v-model="form.testFuncs"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in funcIdOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="测试人员" prop="tester">
|
||||
<el-input v-model="form.tester" placeholder="请输入测试人员" />
|
||||
@ -188,7 +199,6 @@
|
||||
clearable
|
||||
v-model="form.planStart"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择计划测试开始时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
@ -200,7 +210,6 @@
|
||||
clearable
|
||||
v-model="form.planEnd"
|
||||
type="datetime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择计划测试结束时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
@ -231,6 +240,69 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="form-title">样品信息</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="样品名称" prop="sampleName">
|
||||
<el-input v-model="form.sampleName" placeholder="请输入语料名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商标" prop="trademark">
|
||||
<el-input v-model="form.trademark" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="型号规格" prop="modelSpec">
|
||||
<el-input v-model="form.modelSpec" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="样品数量" prop="quantity">
|
||||
<el-input-number
|
||||
v-model="form.quantity"
|
||||
:min="1"
|
||||
:step="1"
|
||||
:step-strictly="true"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="委托单位" prop="entrustUnit">
|
||||
<el-input v-model="form.entrustUnit" placeholder="请输入委托单位" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="生产单位" prop="productionUnit">
|
||||
<el-input v-model="form.productionUnit" placeholder="请输入生产单位" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="送样日期" prop="sampleDate">
|
||||
<el-date-picker
|
||||
clearable
|
||||
v-model="form.sampleDate"
|
||||
type="datetime"
|
||||
placeholder="请选择送样日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="生产日期" prop="productionDate">
|
||||
<el-date-picker
|
||||
clearable
|
||||
v-model="form.productionDate"
|
||||
type="datetime"
|
||||
placeholder="请选择生产日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
@ -248,6 +320,8 @@ import { useContainerHeight } from "@/hooks/tableHeight";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { getTreeDataApi } from '@/api/is/func/index'
|
||||
import { getChildrenByParentIdWithLevelLimitApi } from "@/api/evaluate/indicator.js";
|
||||
import { getFunction } from "@/api/is/func/index.js";
|
||||
import { addProject, getProjectList } from "@/api/is/project/index.js";
|
||||
|
||||
const topContainerRef = ref();
|
||||
const containerHeight = useContainerHeight(topContainerRef);
|
||||
@ -268,10 +342,16 @@ const data = reactive({
|
||||
tester: null,
|
||||
planStart: null,
|
||||
vehicleConfigId: null,
|
||||
testFuncs: null,
|
||||
indicatorId: null,
|
||||
planEnd: null,
|
||||
sort: null,
|
||||
remark: null,
|
||||
status: null,
|
||||
sampleName: null,
|
||||
trademark: null,
|
||||
modelSpec: null,
|
||||
quantity: null,
|
||||
},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
@ -284,6 +364,18 @@ const data = reactive({
|
||||
planStart: [{ required: true, message: "请输入计划测试开始时间", trigger: "blur" }],
|
||||
planEnd: [{ required: true, message: "请输入计划测试结束时间", trigger: "blur" }],
|
||||
vehicleConfigId: [{ required: true, message: "请选择车机版本", trigger: "blur" }],
|
||||
testFuncs: [{ required: true, message: "请选择功能", trigger: "blur" }],
|
||||
indicatorId: [{ required: true, message: "请选择评价指标", trigger: "blur" }],
|
||||
sampleName: [{ required: true, message: "请输入样品名称", trigger: "blur" }],
|
||||
trademark: [{ required: true, message: "请输入样品商标", trigger: "blur" }],
|
||||
modelSpec: [{ required: true, message: "请输入样品型号规格", trigger: "blur" }],
|
||||
entrustUnit: [{ required: true, message: "请输入样品委托单位", trigger: "blur" }],
|
||||
productionUnit: [{ required: true, message: "请输入样品生产单位", trigger: "blur" }],
|
||||
quantity: [
|
||||
{ required: true, message: "请输入样品数量" },
|
||||
{ type: 'number', message: '请输入样品数量' },],
|
||||
sampleDate: [{ required: true, message: "请输入样品送达日期", trigger: "blur" }],
|
||||
productionDate: [{ required: true, message: "请输入样品生产日期", trigger: "blur" }],
|
||||
},
|
||||
});
|
||||
|
||||
@ -300,38 +392,12 @@ const getTreeData = async () => {
|
||||
|
||||
/** 查询语音交互-项目列表 */
|
||||
function getList() {
|
||||
projectList.value = [
|
||||
{
|
||||
projectId: "1",
|
||||
projectName: "test1",
|
||||
tester: "test",
|
||||
planStart: "2025-11-24 11:08:01",
|
||||
planEnd: "2025-11-25 11:08:01",
|
||||
vehicleConfigId: '1',
|
||||
sort: 1,
|
||||
remark: "ssssss",
|
||||
},
|
||||
{
|
||||
projectId: "2",
|
||||
projectName: "test2",
|
||||
tester: "test",
|
||||
vehicleConfigId: '2',
|
||||
planStart: "2025-11-23 11:08:01",
|
||||
planEnd: "2025-11-25 11:08:01",
|
||||
sort: 2,
|
||||
remark: "ssssss",
|
||||
},
|
||||
{
|
||||
projectId: "3",
|
||||
projectName: "test3",
|
||||
tester: "test",
|
||||
vehicleConfigId: '3',
|
||||
planStart: "2025-11-25 11:08:01",
|
||||
planEnd: "2025-11-27 11:08:01",
|
||||
sort: 3,
|
||||
remark: "ssssss",
|
||||
},
|
||||
];
|
||||
getProjectList(queryParams.value).then(res => {
|
||||
if (res.code === 200) {
|
||||
projectList.value = res.rows;
|
||||
total.value = res.total;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
@ -349,9 +415,21 @@ function reset() {
|
||||
planStart: null,
|
||||
planEnd: null,
|
||||
vehicleConfigId: null,
|
||||
testFuncs: null,
|
||||
indicatorId: null,
|
||||
sort: null,
|
||||
remark: null,
|
||||
status: null,
|
||||
sampleName: null,
|
||||
trademark: null,
|
||||
modelSpec: null,
|
||||
quantity: null,
|
||||
status: null,
|
||||
remark: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null,
|
||||
};
|
||||
}
|
||||
|
||||
@ -382,10 +460,6 @@ function handleAdd() {
|
||||
title.value = "添加测试项目";
|
||||
}
|
||||
|
||||
const router = useRouter();
|
||||
const handleSetting = (row) => {
|
||||
router.push("/is/plan/index/" + row.projectId);
|
||||
};
|
||||
|
||||
const formRef = ref();
|
||||
const submitForm = () => {
|
||||
@ -396,17 +470,19 @@ const submitForm = () => {
|
||||
return
|
||||
}
|
||||
if (isAdd.value) {
|
||||
projectList.value.unshift({
|
||||
...form.value,
|
||||
projectId: new Date().getTime(),
|
||||
});
|
||||
} else {
|
||||
let itemToUpdate = projectList.value.find(
|
||||
(item) => item.projectId === form.value.projectId
|
||||
);
|
||||
if (itemToUpdate) {
|
||||
itemToUpdate = { ...form.value };
|
||||
addProject(form.value).then(res => {
|
||||
if (res.code === 200) {
|
||||
ElMessage.success("添加成功");
|
||||
getList();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
updateProject(form.value).then(res => {
|
||||
if (res.code === 200) {
|
||||
ElMessage.success("修改成功");
|
||||
getList();
|
||||
}
|
||||
})
|
||||
}
|
||||
open.value = false;
|
||||
reset();
|
||||
@ -442,6 +518,24 @@ const getIndicatorData = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const funcIdOptions = ref([])
|
||||
const vehicleConfigChange = (value) => {
|
||||
form.value.testFuncs = null
|
||||
funcIdOptions.value = []
|
||||
getFunction({
|
||||
pageNum: 1,
|
||||
pageSize: 10000,
|
||||
vehicleConfigId: value
|
||||
}).then((res) => {
|
||||
if (res.code === 200) {
|
||||
funcIdOptions.value = (res.rows || []).map(item => ({
|
||||
label: item.remark,
|
||||
value: item.id
|
||||
}))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getTreeData();
|
||||
@ -459,6 +553,16 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 12px;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.form-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -475,6 +579,7 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-scrollbar__view {
|
||||
width: 100%;
|
||||
|
||||
@ -1,12 +1,6 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Info :infoData="projectData" />
|
||||
<div class="btn-container">
|
||||
<el-button @click="startTest">开始测试</el-button>
|
||||
<el-button>结束测试</el-button>
|
||||
<el-button>暂停测试</el-button>
|
||||
</div>
|
||||
|
||||
<div class="test-container">
|
||||
<div class="title">测试结果</div>
|
||||
<div>
|
||||
@ -58,17 +52,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Run
|
||||
:drawer="executeOpen"
|
||||
@close="executeOpen = false"
|
||||
:projectId="route.params.id"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import Info from './info.vue';
|
||||
import Run from "./Run.vue";
|
||||
import { listScheme } from '@/api/vi/plan'
|
||||
import { listCorpus, getBatchCorpus } from '@/api/vi/corpus'
|
||||
|
||||
@ -82,64 +70,7 @@ console.log('projectData', projectData)
|
||||
|
||||
const schemaList = ref([])
|
||||
|
||||
const tableData = ref([
|
||||
// {
|
||||
// id: 'test result 876',
|
||||
// time: '2025-11-26 16:46:23',
|
||||
// text: '我想听收音机',
|
||||
// responseTime: 0,
|
||||
// rate: 0,
|
||||
// result: 1,
|
||||
// can: 0,
|
||||
// flag: '无'
|
||||
// },
|
||||
// {
|
||||
// id: 'test result 877',
|
||||
// time: '2025-11-25 16:46:23',
|
||||
// text: '暂停音乐',
|
||||
// responseTime: 0,
|
||||
// rate: 0,
|
||||
// result: 1,
|
||||
// can: 0,
|
||||
// flag: '需复核結果 '
|
||||
// },
|
||||
// {
|
||||
// id: 'test result 878',
|
||||
// time: '2025-11-26 17:49:24',
|
||||
// text: '取消静音',
|
||||
// responseTime: 0,
|
||||
// rate: 0,
|
||||
// result: 0,
|
||||
// can: 0,
|
||||
// flag: '无'
|
||||
// },
|
||||
// {
|
||||
// id: 'test result 879',
|
||||
// time: '2025-11-26 16:46:23',
|
||||
// text: '静音',
|
||||
// responseTime: 0,
|
||||
// rate: 0,
|
||||
// result: 1,
|
||||
// can: 0,
|
||||
// flag: '无'
|
||||
// },
|
||||
// {
|
||||
// id: 'test result 880',
|
||||
// time: '2025-11-28 16:46:23',
|
||||
// text: '音乐音量小点',
|
||||
// responseTime: 0,
|
||||
// rate: 0,
|
||||
// result: 1,
|
||||
// can: 0,
|
||||
// flag: '无'
|
||||
// }
|
||||
])
|
||||
|
||||
const executeOpen = ref(false);
|
||||
|
||||
const startTest = () => {
|
||||
executeOpen.value = true
|
||||
}
|
||||
const tableData = ref([])
|
||||
|
||||
const getListScheme = async () => {
|
||||
const res = await listScheme({
|
||||
|
||||
@ -409,6 +409,12 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</el-drawer>
|
||||
|
||||
<Run
|
||||
:drawer="executeOpen"
|
||||
@close="executeOpen = false"
|
||||
:projectId="executeProjectId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -422,11 +428,11 @@ import {
|
||||
} from "@/api/vi/project";
|
||||
import TableSearch from "@/components/TableSearch/index.vue";
|
||||
import { useContainerHeight } from "@/hooks/tableHeight";
|
||||
import Run from "./evaluate/Run.vue";
|
||||
|
||||
import { getExecuteRunParams, queryExecuteInstId } from "@/api/vi/project.js"
|
||||
import { appendParamsToPath } from "@/utils/fn.js";
|
||||
import { getChildrenByParentIdWithLevelLimitApi } from "@/api/evaluate/indicator.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const topContainerRef = ref();
|
||||
const containerHeight = useContainerHeight(topContainerRef);
|
||||
@ -464,6 +470,8 @@ const data = reactive({
|
||||
tester: [{ required: true, message: "请输入测试人员", trigger: "blur" }],
|
||||
planStart: [{ required: true, message: "请输入计划测试开始时间", trigger: "blur" }],
|
||||
planEnd: [{ required: true, message: "请输入计划测试结束时间", trigger: "blur" }],
|
||||
|
||||
indicatorId: [{ required: true, message: "请选择评价指标", trigger: "blur" }],
|
||||
sampleName: [{ required: true, message: "请输入样品名称", trigger: "blur" }],
|
||||
trademark: [{ required: true, message: "请输入样品商标", trigger: "blur" }],
|
||||
modelSpec: [{ required: true, message: "请输入样品型号规格", trigger: "blur" }],
|
||||
@ -617,8 +625,11 @@ const handleEvaluate = (row) => {
|
||||
})
|
||||
}
|
||||
|
||||
const executeOpen = ref(false);
|
||||
const executeProjectId = ref(null);
|
||||
const handleExecute = (row) => {
|
||||
ElMessage.info('功能开发中。。。')
|
||||
executeOpen.value = true;
|
||||
executeProjectId.value = row.projectId;
|
||||
}
|
||||
|
||||
const currentLog = ref({});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user