feat: 人工巡检
This commit is contained in:
parent
3fc1b5f867
commit
5440b127ee
@ -368,3 +368,58 @@ export const transformSdAgentNodeData = (source) => {
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export const transformRecognizeNodeData = (source) => {
|
||||
// 初始化结果对象
|
||||
const result = {
|
||||
nodeParams: []
|
||||
};
|
||||
|
||||
// 遍历每一个顶级节点
|
||||
source.forEach(item => {
|
||||
const { name, children } = item;
|
||||
if (!name) return; // 过滤无name的无效节点
|
||||
|
||||
// 处理普通节点（config/headers/params）：直接取 children 数组
|
||||
if (name !== 'alarmRules') {
|
||||
result['nodeParams'].push(item);
|
||||
return;
|
||||
}
|
||||
|
||||
if (name === 'alarmRules') {
|
||||
result[name] = children || [];
|
||||
return;
|
||||
}
|
||||
|
||||
// 专门处理 tts 节点（特殊结构）
|
||||
// if (name === 'alarmRules') {
|
||||
// const bodyObj = {
|
||||
// level: '',
|
||||
// operator: '',
|
||||
// threshold: '',
|
||||
// message: ''
|
||||
// };
|
||||
|
||||
// // 遍历body的子项，赋值到对应字段
|
||||
// children?.forEach(child => {
|
||||
// const childName = child.name;
|
||||
// if (childName === 'level') {
|
||||
// bodyObj.level = child.input;
|
||||
// }
|
||||
// if (childName === 'operator') {
|
||||
// bodyObj.operator = child.input;
|
||||
// }
|
||||
// if (childName === 'threshold') {
|
||||
// bodyObj.threshold = child.input;
|
||||
// }
|
||||
// if (childName === 'message') {
|
||||
// bodyObj.message = child.input;
|
||||
// }
|
||||
// });
|
||||
|
||||
// result.alarmRules = bodyObj;
|
||||
// }
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
@ -26,6 +26,7 @@ import BasicNodeParams from './params/BasicNodeParams.vue'
|
||||
import CodeNodeParams from './params/CodeNodeParams.vue'
|
||||
import HttpNodeParams from './params/HttpNodeParams.vue'
|
||||
import SdAgentNodeParams from './params/SdAgentNodeParams.vue'
|
||||
import RecognizeNodeParams from './params/RecognizeNodeParams.vue'
|
||||
|
||||
const props = defineProps({
|
||||
drawer: Boolean,
|
||||
@ -43,6 +44,7 @@ const currentComponent = computed(() => {
|
||||
if (type === 'code') return CodeNodeParams
|
||||
if (type === 'http') return HttpNodeParams
|
||||
if (type === 'sdAgent') return SdAgentNodeParams
|
||||
if (type === 'recognize') return RecognizeNodeParams
|
||||
return null
|
||||
})
|
||||
|
||||
|
||||
327
src/views/flow/components/params/RecognizeNodeParams.vue
Normal file
327
src/views/flow/components/params/RecognizeNodeParams.vue
Normal file
@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<el-form :inline="true" :model="RecognizeNodeData" :rules="rules" ref="dynamicFormRef" class="http-form"
|
||||
label-position="top" label-width="auto">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item name="1" title="识别配置" icon-position="left">
|
||||
<div v-for="(property, index) in RecognizeNodeData.nodeParams" class="form__container" :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" class="param-name" v-model="property.name"
|
||||
placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="index === 0 ? '参数值' : ''" :prop="`nodeParams.${index}.type`">
|
||||
<el-select v-model="property.type" class="param-type"
|
||||
@change="handleTypeChange(index, RecognizeNodeData, property.type)">
|
||||
<el-option label="引用" value="quote" />
|
||||
<el-option label="输入" value="input" />
|
||||
</el-select>
|
||||
<el-form-item v-if="property.type === 'input'" :rules="{ required: true, message: '请输入参数值', trigger: 'blur' }"
|
||||
:prop="`nodeParams.${index}.input`">
|
||||
<el-input-number class="param-value" v-if="property.componentType === 'number'"
|
||||
v-model="property.input" :min="0" :max="property.max || Infinity"
|
||||
:controls="property?.controls || true" :step-strictly="true"
|
||||
:step="property.step || 1" placeholder="请输入" clearable />
|
||||
<el-select v-model="property.input" class="param-value"
|
||||
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 class="param-value" 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, RecognizeNodeData, 'nodeParams')" />
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="2" title="告警级别" icon-position="left">
|
||||
<div class="form__container">
|
||||
<div v-for="(property, index) in RecognizeNodeData.alarmRules" :key="index">
|
||||
<el-row>
|
||||
<el-form-item :label="index === 0 ? '参数名' : ''" :prop="`alarmRules.${index}.name`" :rules="[
|
||||
{ required: true, message: '请输入参数名', trigger: 'blur' },
|
||||
]">
|
||||
<el-input :disabled="true" class="param-name" v-model="property.name" placeholder="请输入"
|
||||
clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="index === 0 ? '参数值' : ''" :prop="`alarmRules.${index}.input`">
|
||||
<el-select v-model="property.type" class="param-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="`alarmRules.${index}.input`">
|
||||
<el-input-number class="param-value" v-if="property.componentType === 'number'"
|
||||
v-model="property.input" :min="0" :max="property.max || Infinity"
|
||||
:controls="false" :step-strictly="true" placeholder="请输入" clearable />
|
||||
<el-select v-model="property.input" class="param-value"
|
||||
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 class="param-value" 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="`alarmRules.${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, RecognizeNodeData, 'alarmRules')" />
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="3" icon-position="left">
|
||||
<template #title>
|
||||
输出参数
|
||||
<el-tooltip class="box-item" effect="dark" content="这里定义的输出变量可以被后续节点引用。" placement="top">
|
||||
<el-icon class="header-icon" style="margin-left: 6px">
|
||||
<info-filled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
<el-button :circle="true" size="small" @click="(e) => addRecognizeItem(e)" class="addFormItem">
|
||||
<el-icon :size="14">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
<div class="form__container">
|
||||
<el-form :inline="true" :model="RecognizeNodeData" label-position="top" label-width="auto"
|
||||
:rules="outputRules" ref="outputFormRef">
|
||||
<FormItemRecursive formType="output" :current-list="RecognizeNodeData.outputParams"
|
||||
prop-path="outputParams" :depth="0" :is-first-level="true" :endDepth="2" :parent-path="[]"
|
||||
@delete-item="(path) => deleteRecognizeItem(path, 'outputParams')" />
|
||||
</el-form>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, nextTick } from 'vue'
|
||||
import { Plus, Minus } from '@element-plus/icons-vue'
|
||||
import FormItemRecursive from '../FormItemRecursive.vue'
|
||||
import { getInput, transformRecognizeNodeData } from '@/utils/flow'
|
||||
import { useQuote } from './useQuote.js'
|
||||
|
||||
const props = defineProps({
|
||||
data: Object
|
||||
})
|
||||
|
||||
const emit = defineEmits(['save-success', 'save-error'])
|
||||
|
||||
const formData = reactive({
|
||||
nodeParams: [],
|
||||
outputParams: []
|
||||
})
|
||||
|
||||
const rules = reactive({})
|
||||
const outputRules = reactive({})
|
||||
const dynamicFormRef = ref()
|
||||
const outputFormRef = ref()
|
||||
const activeNames = ref(['1', '2'])
|
||||
|
||||
// 使用共享的 quote 逻辑
|
||||
const { quoteOptions, cascaderRefs, handleTypeChange, cascaderChange, visibleChange } = useQuote(props.data.id)
|
||||
|
||||
// 添加表单项
|
||||
const addFormItem = (e, type) => {
|
||||
e.stopPropagation()
|
||||
const obj = {
|
||||
name: '',
|
||||
type: type === 'nodeParams' ? 'input' : 'string',
|
||||
required: false,
|
||||
children: [],
|
||||
input: ''
|
||||
}
|
||||
if (!formData[type]) formData[type] = []
|
||||
formData[type].push(obj)
|
||||
}
|
||||
|
||||
// 商道智能体
|
||||
const RecognizeNodeData = ref({})
|
||||
|
||||
const addRecognizeItem = (e) => {
|
||||
e.stopPropagation();
|
||||
RecognizeNodeData.value.outputParams.push({ name: "", type: "string", input: "" });
|
||||
}
|
||||
|
||||
const deleteRecognizeItem = (fullPath, propPath) => {
|
||||
// 从顶层数据开始查找
|
||||
let currentLevel = RecognizeNodeData.value[propPath];
|
||||
|
||||
// 遍历路径（除最后一个索引，因为最后一个是要删除的项）
|
||||
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);
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
const initData = () => {
|
||||
const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
|
||||
const outputParams = JSON.parse(JSON.stringify(props.data.properties.outputParams || []))
|
||||
const transformedData = transformRecognizeNodeData(nodeParams);
|
||||
RecognizeNodeData.value = {
|
||||
...transformedData,
|
||||
outputParams
|
||||
};
|
||||
console.log('RecognizeNodeData', RecognizeNodeData.value)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
initData()
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
|
||||
// 保存验证
|
||||
const validateAndSave = async () => {
|
||||
let inputValid = true
|
||||
let outputValid = true
|
||||
if (dynamicFormRef.value) {
|
||||
await dynamicFormRef.value.validate((valid) => { if (!valid) inputValid = false })
|
||||
}
|
||||
if (outputFormRef.value) {
|
||||
await outputFormRef.value.validate((valid) => { if (!valid) outputValid = false })
|
||||
}
|
||||
|
||||
const nodeParams = []
|
||||
nodeParams.push({ name: "config", type: "input", input: "", children: RecognizeNodeData.value.config, required: true })
|
||||
nodeParams.push({ name: "invokeTts", type: "input", input: RecognizeNodeData.value.invokeTts })
|
||||
if (RecognizeNodeData.value.invokeTts) {
|
||||
nodeParams.push({ name: "tts", type: "input", input: "", children: RecognizeNodeData.value.tts })
|
||||
}
|
||||
lf.setProperties(props.data.id, {
|
||||
...props.data.properties,
|
||||
nodeParams,
|
||||
outputParams: RecognizeNodeData.value.outputParams
|
||||
});
|
||||
|
||||
|
||||
if (inputValid && outputValid) {
|
||||
emit('save-success')
|
||||
} else {
|
||||
emit('save-error')
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ validateAndSave })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.http-form {
|
||||
width: 100%;
|
||||
|
||||
.el-collapse {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
|
||||
:deep(.el-row) {
|
||||
align-items: end;
|
||||
|
||||
.el-form-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.param-name {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.param-type {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.deleteBtn {
|
||||
margin-bottom: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -436,6 +436,42 @@ function handler(params) {
|
||||
outputParams: [],
|
||||
outputType: 'json'
|
||||
},
|
||||
{
|
||||
icon: dialogueSvg,
|
||||
name: "巡检仪表读数识别",
|
||||
type: "recognize",
|
||||
desc: "巡检仪表读数识别",
|
||||
action: 'INSPECTION_METER_RECOGNIZE',
|
||||
nodeType: "LLM",
|
||||
outputType: 'json',
|
||||
nodeParams: [
|
||||
{ name: 'imageUrl', type: "input", input: "", disabled: true },
|
||||
{ name: 'resultName', type: "input", input: "", disabled: true },
|
||||
{ name: "alarmRules", type: "input", input: "", children: [
|
||||
{ name: 'level', type: "input", componentType: 'number', max: 3, step: 1, input: 1, disabled: true },
|
||||
{ name: 'operator', type: "input", input: "", disabled: true },
|
||||
{ name: 'threshold', type: "input", componentType: 'number', max: 3, step: 1, input: 1, disabled: true },
|
||||
{ name: 'message', type: "input", input: "", disabled: true },
|
||||
]}
|
||||
],
|
||||
outputParams: []
|
||||
},
|
||||
{
|
||||
icon: cameraSvg,
|
||||
name: "人工巡检判断",
|
||||
type: "serviceNode",
|
||||
desc: "创建人工巡检判断任务",
|
||||
action: 'INSPECTION_MANUAL_REVIEW_CREATE',
|
||||
nodeType: 'EDGE',
|
||||
nodeParams: [
|
||||
{ name: "resultName", type: "input", input: "", disabled: true },
|
||||
{ name: "videoUrl", type: "input", input: "", disabled: true },
|
||||
{ name: "reviewCriteria", type: "input", input: "", disabled: true },
|
||||
{ name: "defaultAlarmLevel", type: "input", componentType: 'number', max: 3, step: 1, input: 1, disabled: true },
|
||||
],
|
||||
outputParams: [],
|
||||
outputType: 'json'
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -8,6 +8,7 @@ import { registerHttpNode } from './httpNode'
|
||||
import { registerCodeNode } from './codeNode'
|
||||
import { registerCurrentLoopNode } from './currentLoopNode'
|
||||
import { registerSdAgentNode } from './sdAgent'
|
||||
import { registerRecognizeNode } from './recognize'
|
||||
|
||||
export const registerFunction = (lf) => {
|
||||
registerLoopBodyNode(lf)
|
||||
@ -20,4 +21,5 @@ export const registerFunction = (lf) => {
|
||||
registerCodeNode(lf)
|
||||
registerCurrentLoopNode(lf)
|
||||
registerSdAgentNode(lf)
|
||||
registerRecognizeNode(lf)
|
||||
}
|
||||
213
src/views/flow/nodes/function/recognize.js
Normal file
213
src/views/flow/nodes/function/recognize.js
Normal file
@ -0,0 +1,213 @@
|
||||
// 导入 HtmlNode 及其模型，为后续继承做准备
|
||||
import { HtmlNode, HtmlNodeModel } from "@logicflow/core";
|
||||
// 导入 Vue 相关方法，用于渲染组件
|
||||
import { createApp, h, nextTick } from "vue";
|
||||
import ElementPlus from "element-plus";
|
||||
// 导入 Vue 组件
|
||||
// @ts-ignore
|
||||
import Recognize from "./recognize.vue";
|
||||
import OuterNode from "../../components/OuterNode.vue";
|
||||
import JsonViewer from 'vue3-json-viewer'
|
||||
|
||||
/**
|
||||
* 定义一个 元素的 HTML 节点类，继承自 HtmlNode
|
||||
* 该类负责在 HTML 中渲染 元素，并处理其交互逻辑
|
||||
*/
|
||||
class RecognizeNodeHtmlNode 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: Recognize,
|
||||
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 (RecognizeNodeHtmlNode.reusePool.has(nodeId)) {
|
||||
rootEl.appendChild(RecognizeNodeHtmlNode.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();
|
||||
RecognizeNodeHtmlNode.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 RecognizeNodeHtmlModel extends HtmlNodeModel {
|
||||
initNodeData(data) {
|
||||
super.initNodeData(data);
|
||||
}
|
||||
|
||||
// 保存组件实例引用
|
||||
setComponentInstance(instance) {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
closePopover() {
|
||||
this.componentInstance.closePopover()
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置节点属性
|
||||
* 包括宽度、高度、文本编辑属性等
|
||||
*/
|
||||
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 registerRecognizeNode(lf) {
|
||||
lf.register({
|
||||
type: "recognize",
|
||||
view: RecognizeNodeHtmlNode,
|
||||
model: RecognizeNodeHtmlModel
|
||||
});
|
||||
}
|
||||
124
src/views/flow/nodes/function/recognize.vue
Normal file
124
src/views/flow/nodes/function/recognize.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="node__container" :class="props.model.id">
|
||||
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
|
||||
<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"
|
||||
:nodeName="props.properties.name"
|
||||
:nodeType="props.properties.nodeType || 'NONE'"
|
||||
:nodeDesc="props.properties.desc"
|
||||
@setNodeName="setNodeName"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "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 "@/components/IPlayer/index.vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
properties: Object,
|
||||
});
|
||||
|
||||
const emits = defineEmits(["contentChange"]);
|
||||
|
||||
const setNodeName = (name) => {
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
...properties,
|
||||
name
|
||||
});
|
||||
emits("contentChange");
|
||||
}
|
||||
|
||||
const nodeOperatingStatus = ref("NORMAL");
|
||||
const runtimes = ref(0);
|
||||
const inputJsonData = ref({});
|
||||
const outputJsonData = ref({});
|
||||
|
||||
const nodeStateRef = ref(null);
|
||||
|
||||
const closePopover = () => {
|
||||
if (nodeStateRef.value) {
|
||||
nodeStateRef.value.closePopover();
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("changeNodeState", (data) => {
|
||||
if (data.nodeId === props.model.id) {
|
||||
nodeOperatingStatus.value = data.status;
|
||||
if (data.endTime && data.startTime) {
|
||||
runtimes.value = data.endTime - data.startTime;
|
||||
}
|
||||
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");
|
||||
}
|
||||
});
|
||||
|
||||
emitter.on("setProperties", (data) => {
|
||||
if (data.id === props.model.id) {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("changeNodeState");
|
||||
emitter.off("contentChange");
|
||||
emitter.off("setProperties");
|
||||
});
|
||||
|
||||
|
||||
defineExpose({ closePopover })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.node__container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user