feat: httpNode

src/api/is/project/index.js

@@ -6,4 +6,28 @@ export const getDictList = (params) => {
     method: 'get',
     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
+  })
 }

src/views/flow/config.js

@@ -275,7 +275,7 @@ export const collapseList = [
       {
         icon: expressionSvg,
         name: "HTTP请求",
-        type: "serviceNode",
+        type: "http",
         desc: "HTTP请求",
         action: 'HTTP',
         nodeParams: [

src/views/flow/nodes/function/httpNode.js

@@ -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,
+  });
+}

src/views/flow/nodes/function/httpNode.vue

@@ -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>

src/views/flow/nodes/function/index.js

@@ -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)
 }

src/views/is/project/index.vue

@@ -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,77 +153,156 @@
       body-class="testProject_dialog"
     >
       <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="项目名称" prop="projectName">
-              <el-input v-model="form.projectName" placeholder="请输入语料名称" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="车机版本" prop="vehicleConfigId">
-              <el-tree-select
-                v-model="form.vehicleConfigId"
-                node-key="id"
-                :data="treeData"
-                :render-after-expand="false"
-                style="width: 240px"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="测试人员" prop="tester">
-              <el-input v-model="form.tester" placeholder="请输入测试人员" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="计划开始时间" prop="planStart">
-              <el-date-picker
-                clearable
-                v-model="form.planStart"
-                type="datetime"
-                value-format="YYYY-MM-DD HH:mm:ss"
-                placeholder="请选择计划测试开始时间"
-              >
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="计划结束时间" prop="planEnd">
-              <el-date-picker
-                clearable
-                v-model="form.planEnd"
-                type="datetime"
-                value-format="YYYY-MM-DD HH:mm:ss"
-                placeholder="请选择计划测试结束时间"
-              >
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="排序" prop="sort">
-              <el-input-number v-model="form.sort" placeholder="排序" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="评价指标" prop="indicatorId">
+        <div class="card">
+          <div class="form-title">项目信息</div>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="项目名称" prop="projectName">
+                <el-input v-model="form.projectName" placeholder="请输入语料名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="车机版本" prop="vehicleConfigId">
                 <el-tree-select
-                  v-model="form.indicatorId"
-                  :data="indicatorData"
-                  :props="{ label: 'name', value: 'id', children: 'children' }"
+                  v-model="form.vehicleConfigId"
+                  node-key="id"
+                  :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="remark">
-              <el-input
-                v-model="form.remark"
-                type="textarea"
-                placeholder="请输入项目描述"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
+            </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="请输入测试人员" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="计划开始时间" prop="planStart">
+                <el-date-picker
+                  clearable
+                  v-model="form.planStart"
+                  type="datetime"
+                  placeholder="请选择计划测试开始时间"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="计划结束时间" prop="planEnd">
+                <el-date-picker
+                  clearable
+                  v-model="form.planEnd"
+                  type="datetime"
+                  placeholder="请选择计划测试结束时间"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="排序" prop="sort">
+                <el-input-number v-model="form.sort" placeholder="排序" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="评价指标" prop="indicatorId">
+                  <el-tree-select
+                    v-model="form.indicatorId"
+                    :data="indicatorData"
+                    :props="{ label: 'name', value: 'id', children: 'children' }"
+                    :render-after-expand="false"
+                  />
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="项目描述" prop="remark">
+                <el-input
+                  v-model="form.remark"
+                  type="textarea"
+                  placeholder="请输入项目描述"
+                />
+              </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(),
-      });
+     addProject(form.value).then(res => {
+        if (res.code === 200) {
+          ElMessage.success("添加成功");
+          getList();
+        }
+      })
     } else {
-      let itemToUpdate = projectList.value.find(
-        (item) => item.projectId === form.value.projectId
-      );
-      if (itemToUpdate) {
-        itemToUpdate = { ...form.value };
-      }
+      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,19 +553,30 @@ onMounted(() => {
       width: 100%;
     }
 
-    .form-title {
-      display: flex;
-      align-items: center;
-      font-size: 16px;
-      margin-bottom: 10px;
+    .card {
+      padding: 12px;
+      border: 1px solid #e4e7ed;
+      border-radius: 8px;
+      margin-bottom: 20px;
 
-      &::before {
-        content: "";
-        width: 4px;
-        height: 16px;
-        background: blue;
-        display: inline-block;
-        margin-right: 8px;
+      &:hover {
+        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      .form-title {
+        display: flex;
+        align-items: center;
+        font-size: 16px;
+        margin-bottom: 10px;
+
+        &::before {
+          content: "";
+          width: 4px;
+          height: 16px;
+          background: blue;
+          display: inline-block;
+          margin-right: 8px;
+        }
       }
     }
   }

src/views/vi/testProject/evaluate/index.vue

@@ -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({

src/views/vi/testProject/index.vue

@@ -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({});