SmartBench/CMVR-IOT-UI
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 清除上一次运行结果

Browse Source
This commit is contained in:
zhanghao 2026-04-15 10:59:17 +08:00
parent 8c1820e1a6
commit 783e54bab0
21 changed files with 1393 additions and 1371 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/views/flow/components/NodeState.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="state__container" :class="`nodeState-${props.state}`">
<div class="context">
<div class="context" v-show="showState !== 'NORMAL'">
<div class="state">
<el-icon>
<SuccessFilled v-if="props.state === 'SUCCESS'" />
@ -14,7 +14,13 @@
{{ props.runtimes }}ms
</el-tag>
</div>
<div class="resultText" v-popover="popoverRef" @click="popoverVisible = !popoverVisible">{{ popoverVisible ? '隐藏结果' : '展示结果' }}</div>
<div
class="resultText"
v-popover="popoverRef"
@click="popoverVisible = !popoverVisible"
>
{{ popoverVisible ? "隐藏结果" : "展示结果" }}
</div>
</div>
</div>
@ -45,7 +51,7 @@
</div>
</template>
<script setup lang="js">
import { ref, useSlots } from 'vue'
import { ref, useSlots, watch } from 'vue'
import { SuccessFilled, CircleCloseFilled, Loading, VideoPause } from '@element-plus/icons-vue'
const props = defineProps({
@ -56,7 +62,7 @@ const props = defineProps({
runtimes: {
type: Number,
default: 0
}
},
})
const slots = useSlots()
@ -76,6 +82,18 @@ const getStateText = () => {
const popoverRef = ref();
const popoverVisible = ref(false);
const showState = ref('NORMAL')
watch(() => props.state, (newVal) => {
showState.value = newVal;
});
const closePopover = () => {
showState.value = 'NORMAL';
popoverVisible.value = false;
};
defineExpose({ closePopover })
</script>
<style lang="scss" scoped>
.state__container {
@ -103,9 +121,9 @@ const popoverVisible = ref(false);
cursor: pointer;
}
}
}
}
.nodeState-SUCCESS {
.nodeState-SUCCESS {
display: block;
background-color: #eef9f1;
@ -113,9 +131,9 @@ const popoverVisible = ref(false);
font-size: 16px;
color: #309256;
}
}
}
.nodeState-FAILED {
.nodeState-FAILED {
display: block;
background-color: #fdf5f5;
@ -123,9 +141,9 @@ const popoverVisible = ref(false);
font-size: 16px;
color: #ee3f38;
}
}
}
.nodeState-STOPPED {
.nodeState-STOPPED {
display: block;
background-color: #fdf5f5;
@ -133,9 +151,9 @@ const popoverVisible = ref(false);
font-size: 16px;
color: #ee3f38;
}
}
}
.nodeState-PAUSED {
.nodeState-PAUSED {
display: block;
background-color: #cbcbcb;
@ -143,9 +161,9 @@ const popoverVisible = ref(false);
font-size: 16px;
color: #666;
}
}
}
.nodeState-RUNNING {
.nodeState-RUNNING {
display: block;
background-color: #f4f7ff;
@ -154,5 +172,5 @@ const popoverVisible = ref(false);
font-size: 16px;
animation: rotateAnimation 2s linear infinite;
}
}
}
</style>

113
src/views/flow/index.vue
View File

@ -8,21 +8,12 @@
</div>
<div class="btn__container">
<div class="btn">
<el-button v-if="['testRunError', 'testRunFinish', 'stop'].includes(flowState)" @click="clearRun">清除上一次运行结果</el-button>
<el-button @click="group">分组</el-button>
<el-button v-if="flowState !== 'testRunning'" @click="testRun"
>试运行</el-button
>
<el-button v-if="flowState === 'testRunning'" @click="flowPauseFn"
>暂停</el-button
>
<el-button v-if="flowState === 'pause'" @click="flowResumeFn"
>恢复</el-button
>
<el-button
v-if="['testRunning', 'pause'].includes(flowState)"
@click="flowStopFn"
>终止</el-button
>
<el-button v-if="flowState !== 'testRunning'" @click="testRun">试运行</el-button>
<el-button v-if="flowState === 'testRunning'" @click="flowPauseFn">暂停</el-button>
<el-button v-if="flowState === 'pause'" @click="flowResumeFn">恢复</el-button>
<el-button v-if="['testRunning', 'pause'].includes(flowState)" @click="flowStopFn">终止</el-button>
</div>
<div class="btn">
<el-tooltip
@ -34,9 +25,7 @@
>
<el-button type="primary" :disabled="true">发布</el-button>
</el-tooltip>
<el-button v-else @click="deployFlow" type="primary"
>发布</el-button
>
<el-button v-else @click="deployFlow" type="primary">发布</el-button>
<el-popover
:width="260"
@ -123,9 +112,7 @@
<el-form-item
:label="index === 0 ? '参数名' : ''"
:prop="`nodeParams.${index}.name`"
:rules="[
{ required: true, message: '请输入参数名', trigger: 'blur' },
]"
:rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]"
>
<el-input
:disabled="property?.disabled || false"
@ -137,9 +124,7 @@
<el-form-item
:label="index === 0 ? '参数值' : ''"
:prop="`nodeParams.${index}.input`"
:rules="[
{ required: true, message: '请输入参数值', trigger: 'blur' },
]"
:rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]"
>
<el-input-number
v-if="property.componentType === 'number'"
@ -176,9 +161,7 @@
<template #footer>
<div class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="execute">
确定
</el-button>
<el-button type="primary" @click="execute"> 确定 </el-button>
</div>
</template>
</el-dialog>
@ -203,7 +186,7 @@ import {
flowPause,
flowResume,
flowStop,
flowAction
flowAction,
} from "@/api/device/flow";
import { getDetect } from "@/api/test/detect";
import { Location } from "@element-plus/icons-vue";
@ -233,9 +216,11 @@ const drop = (e) => {
},
});
if (!["selectArea", 'branch', 'stopLoop', 'subStart', 'subEnd'].includes(newNode.type)) {
if (
!["selectArea", "branch", "stopLoop", "subStart", "subEnd"].includes(newNode.type)
) {
showParamsDrawer.value = true;
console.log('newNode', newNode)
console.log("newNode", newNode);
paramsDrawerData.value = newNode;
}
};
@ -444,8 +429,7 @@ const loopFlowView = async (instId, taskId = null) => {
} else {
if (!flowInfoData.value.isLog) {
if (["PAUSED", "STOPPED"].includes(arr[arr.length - 1]?.status)) {
flowState.value =
arr[arr.length - 1]?.status === "PAUSED" ? "pause" : "stop";
flowState.value = arr[arr.length - 1]?.status === "PAUSED" ? "pause" : "stop";
} else {
flowState.value = "testRunError";
flowStore.updateDisableForm(false);
@ -562,10 +546,7 @@ const initFlow = () => {
keys: ["backspace", "delete"], // 覆盖删除键
callback: () => {
const activeElem = document.activeElement;
if (
activeElem.tagName === "INPUT" ||
activeElem.tagName === "TEXTAREA"
) {
if (activeElem.tagName === "INPUT" || activeElem.tagName === "TEXTAREA") {
return; // 不处理输入框内的删除
}
@ -657,10 +638,12 @@ const initFlow = () => {
});
lf.on("node:dbclick", ({ data, e }) => {
if (["selectArea", 'branch', 'stopLoop', 'subStart', 'subEnd'].includes(data.type)) {
if (
["selectArea", "branch", "stopLoop", "subStart", "subEnd"].includes(data.type)
) {
return;
}
console.log('data', data)
console.log("data", data);
showParamsDrawer.value = true;
paramsDrawerData.value = data;
});
@ -734,55 +717,65 @@ const fitView = () => {
};
const nodeName = ref("");
const visible = ref(false)
const visible = ref(false);
const formData = reactive({
nodeParams: [],
})
const rules = reactive({})
const executeForm = ref()
const nodeAction = ref('')
});
const rules = reactive({});
const executeForm = ref();
const nodeAction = ref("");
const singleNodeExecution = (e) => {
const { name, nodeType, nodeParams, action } = e.detail;
nodeName.value = name;
visible.value = true;
nodeAction.value = action
if (nodeType === 'EDGE') {
nodeAction.value = action;
if (nodeType === "EDGE") {
formData.nodeParams = [
{
disabled: true,
input: "",
name: "terminalId",
type: "input"
type: "input",
},
...nodeParams
]
...nodeParams,
];
} else {
formData.nodeParams = nodeParams
formData.nodeParams = nodeParams;
}
};
const execute = async () => {
const result = await executeForm.value.validate();
if (result) {
const obj = {}
formData.nodeParams.forEach(item => {
obj[item.name] = item.input
})
const obj = {};
formData.nodeParams.forEach((item) => {
obj[item.name] = item.input;
});
const res = await flowAction({
action: nodeAction.value,
payload: obj
})
payload: obj,
});
if (res.code === 200) {
ElMessage.success('执行成功')
ElMessage.success("执行成功");
} else {
ElMessage.error(res.msg)
ElMessage.error(res.msg);
}
}
}
};
const showParamsDrawer = ref(false);
const paramsDrawerData = ref({})
const paramsDrawerData = ref({});
const clearRun = () => {
const { nodes } = lf.getGraphData();
nodes.forEach((item) => {
const node = lf.getNodeModelById(item.id);
if (node.closePopover) {
node.closePopover();
}
});
}
onMounted(() => {
justLoadFlow();
@ -876,8 +869,6 @@ onUnmounted(() => {
}
}
}
</style>
<style lang="scss">
.node-relationship-network-popover {
@ -912,7 +903,7 @@ onUnmounted(() => {
}
.el-textarea {
width: 200px
width: 200px;
}
}
</style>

10
src/views/flow/nodes/common/serviceNode.js
View File

@ -144,16 +144,10 @@ class ServiceNodeHtmlModel extends HtmlNodeModel {
this.componentInstance = instance;
}
// 验证表单
async validateForm() {
const result = this.componentInstance.validateForm()
return result
closePopover() {
this.componentInstance.closePopover()
}
// setCustomProperties() {
// this.componentInstance.setNodeProperties()
// }
/**
* 设置节点属性
* 包括宽度、高度、文本编辑属性等

12
src/views/flow/nodes/common/serviceNode.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="node__container" :class="props.model.id">
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes">
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
<template #input>
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
</template>
@ -78,6 +78,14 @@ const inputJsonData = ref({});
const outputJsonData = ref({});
const errorInfoData = ref('');
const nodeStateRef = ref(null);
const closePopover = () => {
if (nodeStateRef.value) {
nodeStateRef.value.closePopover();
}
}
onMounted(() => {
emitter.on("changeNodeState", (data) => {
@ -124,6 +132,8 @@ onUnmounted(() => {
emitter.off("setProperties");
});
defineExpose({ closePopover })
</script>
<style lang="scss" scoped>

4
src/views/flow/nodes/common/startNode.js
View File

@ -142,6 +142,10 @@ class StartNodeHtmlModel extends HtmlNodeModel {
this.componentInstance = instance;
}
closePopover() {
this.componentInstance.closePopover()
}
/**
* 设置节点属性
* 包括宽度、高度、文本编辑属性等

12
src/views/flow/nodes/common/startNode.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="node__container" :class="props.model.id">
<keep-alive>
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes">
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
<template #input>
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
</template>
@ -40,6 +40,14 @@ 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) {
@ -87,6 +95,8 @@ onUnmounted(() => {
emitter.off("setProperties");
});
defineExpose({ closePopover })
</script>
<style lang="scss" scoped>

4
src/views/flow/nodes/function/codeNode.js
View File

@ -144,6 +144,10 @@ class CodeNodeHtmlModel extends HtmlNodeModel {
this.componentInstance = instance;
}
closePopover() {
this.componentInstance.closePopover()
}
/**
* 设置节点属性
* 包括宽度、高度、文本编辑属性等

12
src/views/flow/nodes/function/codeNode.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="node__container" :class="props.model.id">
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes">
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
<template #input>
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
</template>
@ -74,6 +74,15 @@ const inputJsonData = ref({});
const outputJsonData = ref({});
const errorInfoData = ref('');
const nodeStateRef = ref(null);
const closePopover = () => {
if (nodeStateRef.value) {
nodeStateRef.value.closePopover();
}
}
onMounted(() => {
emitter.on("changeNodeState", (data) => {
if (data.nodeId === props.model.id) {
@ -119,6 +128,7 @@ onUnmounted(() => {
emitter.off("setProperties");
});
defineExpose({ closePopover })
</script>
<style lang="scss" scoped>

25
src/views/flow/nodes/function/currentLoop.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="node__container" :class="props.model.id">
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes">
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
<template #input>
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
</template>
@ -46,12 +46,6 @@ const props = defineProps({
const emits = defineEmits(["contentChange"]);
const formData = reactive({
nodeParams: [],
});
const setNodeName = (name) => {
const properties = lf.getProperties(props.model.id);
lf.setProperties(props.model.id, {
@ -66,6 +60,14 @@ 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) {
@ -96,13 +98,22 @@ onMounted(() => {
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>

6
src/views/flow/nodes/function/currentLoopNode.js
View File

@ -150,9 +150,9 @@ class CurrentLoopNodeHtmlModel extends HtmlNodeModel {
return result
}
// setCustomProperties() {
// this.componentInstance.setNodeProperties()
// }
closePopover() {
this.componentInstance.closePopover()
}
/**
* 设置节点属性

12
src/views/flow/nodes/function/httpNode.js
View File

@ -144,15 +144,9 @@ class HttpNodeHtmlModel extends HtmlNodeModel {
this.componentInstance = instance;
}
// 验证表单
// async validateForm() {
// const result = this.componentInstance.validateForm()
// return result
// }
// setCustomProperties() {
// this.componentInstance.setNodeProperties()
// }
closePopover() {
this.componentInstance.closePopover()
}
/**
* 设置节点属性

11
src/views/flow/nodes/function/httpNode.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="node__container" :class="props.model.id">
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes">
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
<template #input>
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
</template>
@ -77,6 +77,13 @@ const inputJsonData = ref({});
const outputJsonData = ref({});
const errorInfoData = ref('');
const nodeStateRef = ref(null);
const closePopover = () => {
if (nodeStateRef.value) {
nodeStateRef.value.closePopover();
}
}
onMounted(() => {
emitter.on("changeNodeState", (data) => {
@ -122,6 +129,8 @@ onUnmounted(() => {
emitter.off("contentChange");
emitter.off("setProperties");
});
defineExpose({ closePopover })
</script>
<style lang="scss" scoped>

10
src/views/flow/nodes/function/sleep.js
View File

@ -144,14 +144,8 @@ class SleepNodeHtmlModel extends HtmlNodeModel {
this.componentInstance = instance;
}
// 验证表单
async validateForm() {
const result = this.componentInstance.validateForm()
return result
}
setCustomProperties() {
this.componentInstance.setNodeProperties()
closePopover() {
this.componentInstance.closePopover()
}
/**

14
src/views/flow/nodes/function/sleep.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="node__container" :class="props.model.id">
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes">
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
<template #input>
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
</template>
@ -33,7 +33,7 @@
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
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";
@ -61,6 +61,14 @@ 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) {
@ -105,6 +113,8 @@ onUnmounted(() => {
emitter.off("setProperties");
});
defineExpose({ closePopover })
</script>
<style lang="scss" scoped>

17
src/views/flow/nodes/function/stopLoop.js
View File

@ -133,23 +133,6 @@ class StopLoopHtmlModel extends HtmlNodeModel {
this.componentInstance = instance;
}
// 验证表单
async validateForm() {
if (this.componentInstance && this.componentInstance.validate) {
try {
const result = await this.componentInstance.validate();
if (result) {
return { valid: true, message: "验证通过" };
} else {
return { valid: false, message: "验证失败" };
}
} catch {
return { valid: false, message: "验证失败" };
}
}
return { valid: true, message: "无验证方法" };
}
/**
* 设置节点属性
* 包括宽度、高度、文本编辑属性等

17
src/views/flow/nodes/function/subEnd.js
View File

@ -128,23 +128,6 @@ class SubEndNodeHtmlModel extends HtmlNodeModel {
this.componentInstance = instance;
}
// 验证表单
async validateForm() {
if (this.componentInstance && this.componentInstance.validate) {
try {
const result = await this.componentInstance.validate();
if (result) {
return { valid: true, message: "验证通过" };
} else {
return { valid: false, message: "验证失败" };
}
} catch {
return { valid: false, message: "验证失败" };
}
}
return { valid: true, message: "无验证方法" };
}
/**
* 设置节点属性
* 包括宽度、高度、文本编辑属性等

17
src/views/flow/nodes/function/subStart.js
View File

@ -128,23 +128,6 @@ class SubStartNodeHtmlModel extends HtmlNodeModel {
this.componentInstance = instance;
}
// 验证表单
async validateForm() {
if (this.componentInstance && this.componentInstance.validate) {
try {
const result = await this.componentInstance.validate();
if (result) {
return { valid: true, message: "验证通过" };
} else {
return { valid: false, message: "验证失败" };
}
} catch {
return { valid: false, message: "验证失败" };
}
}
return { valid: true, message: "无验证方法" };
}
/**
* 设置节点属性
* 包括宽度、高度、文本编辑属性等

4
src/views/flow/nodes/function/switch.js
View File

@ -211,6 +211,10 @@ class SwitchHtmlModel extends HtmlNodeModel {
this.componentInstance = instance;
}
closePopover() {
this.componentInstance.closePopover()
}
// 验证表单
async validateForm() {
if (this.componentInstance && this.componentInstance.validate) {

12
src/views/flow/nodes/function/switch.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="node__container" ref="switchRef" @mouseleave="setNodeProperties">
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes">
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
<template #input>
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
</template>
@ -407,6 +407,14 @@ watch(
}
);
const nodeStateRef = ref(null);
const closePopover = () => {
if (nodeStateRef.value) {
nodeStateRef.value.closePopover();
}
}
onMounted(() => {
emits("addAnchor", 280, "".concat(props.model.id, "_else"));
@ -450,6 +458,8 @@ onUnmounted(() => {
emitter.off("changeNodeState");
emitter.off("contentChange");
});
defineExpose({ closePopover })
</script>
<style lang="scss" scoped>
.node__container {

2
vite.config.js
View File

@ -51,7 +51,7 @@ export default defineConfig(({mode, command}) => {
//李小龙 http://192.168.0.5:13080
// dev http://10.148.20.34:13080
// target: VITE_API_URL,
target: command === 'build' ? VITE_API_URL : 'http://192.168.0.5:13080',
target: command === 'build' ? VITE_API_URL : 'http://192.168.0.100:13080',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '')
}