aiplat_vue/src/views/modules/visi/design-node-config.vue

<template>
  <div class="ant-tabs-tabpane">
    <el-tabs default-active-key="1" @change="callback" visible.sync="visible">
      <el-tab-pane key="1" label="节点设置">
        <el-form :layout="formLayout">
          <el-form-item name="nodeName" label=" 节点名称">
            <el-input placeholder="请输入节点名称" v-model="nodeName" />
          </el-form-item>
          <el-form-item name="templateName" label=" 模块名称">
            <el-input placeholder="input placeholder" v-model="templateName" />
          </el-form-item>
          <el-form-item
            label="image"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-input placeholder="input placeholder" v-model="templateImage" />
          </el-form-item>
          <!-- <el-form-item :wrapper-col="buttonItemLayout.wrapperCol">
            <el-button type="primary" @click="primary"> 保存 </el-button>
          </el-form-item> -->
        </el-form>
      </el-tab-pane>
      <el-tab-pane key="2" label="参数设置">
        <!-- <el-form :layout="formLayout">
          
          <el-form-item label="获取到的参数列表" size="mini">
            <el-table :data="sourcedatalist" style="width: 100%" border>
              <el-table-column prop="name" label="名称(参数)" width="100">
              </el-table-column>
              <el-table-column prop="from" label="来源及引用方式" width="180">
              </el-table-column>
            </el-table>
            <el-table :data="sourceartilist" style="width: 100%" border>
              <el-table-column prop="name" label="名称(文件)" width="100">
              </el-table-column>
              <el-table-column prop="from" label="来源及引用方式" width="180">
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item
            label="输入参数列表"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            v-model="argumentsparameters"
          >
            <el-input
              v-for="argupara in argumentsparameters"
              :key="argupara.name"
              :label="argupara.name"
              placeholder="请输入参数值"
              width="50px"
              v-model="argupara.value"
              ><template slot="prepend">{{ argupara.name }}</template></el-input
            >
          </el-form-item>

          <el-form-item
            label="输入参数(文件)列表"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            v-model="argumentsartifacts"
          >
         
            <el-input
              v-for="arguarti in argumentsartifacts"
              :key="arguarti.name"
              :label="arguarti.name"
              placeholder="请输入参数值"
              width="50px"
              v-model="arguarti.valuefrom"
              ><template slot="prepend">{{ arguarti.name }}</template>
            </el-input>
          </el-form-item>

          <el-form-item label="输出参数列表" size="mini">
            <el-table :data="outputsparameters" style="width: 100%" border>

              <el-table-column prop="name" label="名称(参数类型)" width="180">
              </el-table-column>
            </el-table>
            <el-table :data="outputsartifacts" style="width: 100%" border>
             
              <el-table-column prop="name" label="名称(文件类型)" width="180">
              </el-table-column>
            </el-table>
          </el-form-item>

          <el-form-item :wrapper-col="buttonItemLayout.wrapperCol">
            <el-button type="primary" @click="primary"> 保存 </el-button>
          </el-form-item>
        </el-form> -->
        <el-form :layout="formLayout">
          <el-form-item name="parainput"></el-form-item>
          <el-table :data="argumentsparameters" border style="width: 100%">
            <el-table-column label="参数类型" align="center">
              <el-table-column
                prop="paraname"
                header-align="center"
                align="center"
                label="名称"
              >
              </el-table-column>
              <el-table-column
                prop="paratype"
                header-align="center"
                align="center"
                label="参数类型"
              >
              </el-table-column>
              <el-table-column
                prop="paradesc"
                header-align="center"
                align="center"
                label="描述"
              >
              </el-table-column>
              <el-table-column
                prop="paravalue"
                header-align="center"
                align="center"
                width="200"
                label="输入"
              >
                <template slot-scope="scope">
                  <input
                    v-model="scope.row.paravalue"
                    placeholder="请输入内容"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="quotevalue"
                header-align="center"
                align="center"
                width="200"
                label="引用其他算法节点"
              >
                <template slot-scope="scope1">
                  <!-- <input v-model="scope.row.paravalue" placeholder="请输入内容" /> -->
                  <el-cascader
                    :props="props"
                    filterable
                    clearable
                    @blur="selectBlur($event, scope1.row)"
                    v-model="scope1.row.quotevalue"
                    :options="cascadeoptionpara"
                    @change="cascadeparahandleChange"
                  ></el-cascader>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
          <el-form-item name="fileinput"></el-form-item>
          <el-table :data="argumentsartifacts" border style="width: 100%">
            <el-table-column label="文件类型" align="center">
              <el-table-column
                prop="paraname"
                header-align="center"
                align="center"
                label="名称"
              >
              </el-table-column>
              <el-table-column
                prop="parapath  可不显示"
                header-align="center"
                align="center"
                label="文件类型"
              >
              </el-table-column>
              <el-table-column
                prop="paradesc"
                header-align="center"
                align="center"
                label="描述"
              >
              </el-table-column>
              <el-table-column
                prop="inputnodefilevalue"
                header-align="center"
                align="center"
                width="200"
                label="引用输入节点"
              >
                <template slot-scope="scope0">
                  <el-select
                    v-model="scope0.row.inputnodefilevalue"
                    multiple
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in inputnodefilemap"
                      :key="item.name"
                      :label="item.name"
                      :value="item.fileurl"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="quotevalue"
                header-align="center"
                align="center"
                width="200"
                label="引用其他算法节点"
              >
                <template slot-scope="scope1">
                  <!-- <input v-model="scope.row.paravalue" placeholder="请输入内容" /> -->
                  <el-cascader
                    filterable
                    clearable
                    @blur="selectBlur($event, scope1.row)"
                    v-model="scope1.row.quotevalue"
                    :options="cascadeoption"
                    @change="cascadehandleChange"
                  ></el-cascader>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                width="200"
                label="上传"
              >
                <template slot-scope="scope1">
                  <el-upload
                    class="upload-demo"
                    action="#"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="10"
                    :on-exceed="handleExceed"
                    :on-change="
                      function (file, fileList) {
                        return fileChange(file, fileList, scope1.$index);
                      }
                    "
                    :file-list="scope1.row.filelist"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">请上传代码文件</div> -->
                  </el-upload>
                  <!-- <el-upload
                  class="upload-demo"
                  action="#"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="scope1.row.filelist"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </el-upload> -->
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
          <el-form-item
            :wrapper-col="buttonItemLayout.wrapperCol"
            label-width="50%"
          >
            <el-button type="primary" @click="primary"> 保存 </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 输出参数设置 -->
      <el-tab-pane key="3" label="节点输出" @tab-click="getOutputparavalue">
        <el-form :layout="formLayout">
          <!-- <div class="sub-title"> 参数型输出</div> -->
          <el-form-item name="paraoutput"></el-form-item>
          <el-table
            :data="outputsparameters"
            :key="outputparakey"
            border
            style="width: 100%"
          >
            <el-table-column label="参数型输出" align="center">
              <el-table-column
                prop="paraname"
                header-align="center"
                align="center"
                label="输出参数名称"
              >
              </el-table-column>
              <el-table-column
                prop="paratype"
                header-align="center"
                align="center"
                label="参数类型"
              >
              </el-table-column>
              <el-table-column
                prop="paradesc"
                header-align="center"
                align="center"
                label="描述"
              >
              </el-table-column>
              <el-table-column
                prop="paravalue"
                header-align="center"
                align="center"
                label="结果"
              >
              </el-table-column>
            </el-table-column>
          </el-table>
          <!-- <div class="sub-title"> 文件型输出</div> -->
          <el-form-item
            name="fileoutput"
            label=""
            label-width="50%"
          ></el-form-item>
          <el-table :data="outputsartifacts" border style="width: 100%">
            <el-table-column label="文件型输出" align="center">
              <el-table-column
                prop="paraname"
                header-align="center"
                align="center"
                label="输出文件名称"
              >
              </el-table-column>
              <el-table-column
                prop="paratype"
                header-align="center"
                align="center"
                label="参数类型"
              >
              </el-table-column>
              <el-table-column
                prop="paradesc"
                header-align="center"
                align="center"
                label="描述"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              width="150"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="previewfile(scope.row.paraname, scope.row.valuefrom)"
                  >预览
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="
                    downloadoutputresult(
                      scope.row.paraname,
                      scope.row.valuefrom
                    )
                  "
                  >下载</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-tab-pane>
      <el-tab-pane key="4" label="节点日志" v-show="nodepodVisi">
        <el-radio-group
          v-model="containertype"
          default-value="main"
          @change="podcontainerchange"
        >
          <el-radio label="main" value="main">main</el-radio>
          <el-radio label="init" value="init">init</el-radio>
          <el-radio label="wait" value="wait">wait</el-radio>
        </el-radio-group>
        <!-- <div style="max-height: 800px; position: relative"> -->
        <div class="log-box" style="position: relative; overflow: scroll">
          <div v-if="this.podcontentlogsplit.length">
            <p
              class="logList-item"
              v-for="(item, index) in this.podcontentlogsplit"
              :key="index"
            >
              {{ item }}
            </p>
          </div>
          <p v-else>暂无数据</p>
        </div>
        <!-- <el-descriptions
          title="节点日志"
          border
        >
          <el-descriptions-item  label="日志">{{this.podcontentlog}}</el-descriptions-item>

        </el-descriptions> -->
        <!-- <a-descriptions
          title=""
          layout="vertical"
          bordered
          style="white-space: pre-wrap"
        >
          <a-descriptions-item v-bind:label="this.containertype">
            {{ this.podcontentlog }}
          </a-descriptions-item>
        </a-descriptions> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
// import { Tabs } from "antd";
// import classNames from "classnames";
import { MessageBox } from "element-ui";
import { Message } from "element-ui";
export default {
  data() {
    return {
      visible: false,
      list: [1, 2], //下拉数据列表
      value: "", //选择下拉列表中选项后的值
      getlistLoading: false, //获取到下拉列表的数据前默认改选择器不可用
      cascadeoptionfile: [],
      cascadeoption: [], //文件类型级联 目录

      cascadeoptionpara: [], //参数类型级联目录
      props: { multiple: true }, //设置多选
      shareScopeEnd: [], //多选 参数设置

      nodeName: null,
      templateName: null,
      templateImage: null,
      templateCommand: null,
      templateArgs: null,

      inputsparameters: null,
      inputsartifacts: null,
      argumentsparameters: null,
      argumentsartifacts: null,
      outputsparameters: null,
      outputsartifacts: null,
      cell: null,
      sourcedatalist: [],
      sourceartilist: [],

      algoparaInput: null,
      algoparaUserInput: null,
      algoparaGetInput: null,
      algoparaOutput: null,
      algoparaInputargu: null,
      algonodeSource: null,

      inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url----一个节点一个
      // inputnodefilevalue: [],  //用户选择的输入节点的文件，存储文件url,后端调用-----每个节点的每个文件类型的输入都应该有

      paraselectvisible: false,
      parainputvisible: true,

      values: "",
      options: [
        {
          value: "无保留意见",
          label: "无保留意见",
        },
        {
          value: "保留意见",
          label: "保留意见",
        },
      ],
      url: "",
      fileList: [], //20211125

      formLayout: "horizontal", //:layout="formLayout"
      form: this.$form.createForm(this, { name: "coordinated" }),

      labelPosition: "left", //:label-position="labelPosition" label-width="80px"

      containertype: "main", //日志类型
      workflowName: "", //工作流名称
      idTemplateNameMap: null, //节点id与template映射关系
      podcontent: { main: "", wait: "", init: "" }, //日志具体内容
      nodepodVisi: false,
      podcontentlog: "",
      podcontentlogsplit: [],
      wftemplateName: "", //节点对应的 templateName
      workflowStatus: "", //工作流运行状态
      outputparakey: 1, //outputparameters table key
      podphase: "", //节点对应podphase 状态
    };
  },
  created() {},
  mounted() {
    // this.init();
  },
  methods: {
    handleFormLayoutChange(e) {
      this.formLayout = e.target.value;
    },
    callback(key) {
      console.log(key);
    },
    init1(celldata, cell, workflowName, idTemplateNameMap, workflowStatus) {
      this.visible = true;
      // this.conditionForm.sourcedatalist =sourcedatalist;
      this.templateName = celldata.templateName;
      this.templateImage = celldata.templateImage;
      this.templateCommand = celldata.templateCommand;
      this.templateArgs = celldata.templateArgs;

      this.inputsparameters = celldata.inputsparameters;
      this.inputsartifacts = celldata.inputsartifacts;
      this.outputsparameters = celldata.outputsparameters;
      this.outputsartifacts = celldata.outputsartifacts;
      this.argumentsparameters = celldata.argumentsparameters;
      this.argumentsartifacts = celldata.argumentsartifacts;
      this.sourcedatalist = celldata.sourcedatalist;
      this.sourceartilist = celldata.sourceartilist;

      this.nodeName = celldata.nodeName;
      //20211118
      this.algoparaInput = celldata.algoparaInput;
      this.algoparaOutput = celldata.algoparaOutput;

      this.algoparaUserInput = this.algoparaInput.userInput;
      this.algoparaGetInput = this.algoparaInput.getInput;

      this.algonodeSource = celldata.algonodeSource; //正确引用

      this.inputnodefilemap = celldata.inputnodefilemap;
      this.cell = cell;

      //节点日志处理
      this.workflowName = workflowName;
      this.idTemplateNameMap = idTemplateNameMap;
      this.workflowStatus = workflowStatus;
      this.wftemplateName = celldata.wftempname;
      console.log("节点日志处理");
      if (this.workflowName != "") {
        this.getnodepodContent();
        this.podcontentVisi = true;
      }
      this.getOutputparavalue(); //获取输出
      // console.log("userInput  getInput");
      // console.log(this.algoparaInput);
      // console.log(this.algoparaOutput);
      // console.log("添加value 属性前");
      // console.log(this.algoparaUserInput);
      // console.log(this.algoparaGetInput);
      //遍历UserInput
      for (var i = 0; i < this.algoparaUserInput.length; i++) {
        if (!this.algoparaUserInput[i].hasOwnProperty("paravalue")) {
          this.algoparaUserInput[i].paravalue = null;
        }
      }
      for (var i = 0; i < this.algoparaGetInput.length; i++) {
        if (!this.algoparaGetInput[i].hasOwnProperty("paravalue")) {
          this.algoparaGetInput[i].paravalue = null;
        }
      }

      for (var i = 0; i < this.outputsparameters.length; i++) {
        if (!this.outputsparameters[i].hasOwnProperty("paravalue")) {
          this.outputsparameters[i].paravalue = null;
        }
      }
      for (var i = 0; i < this.outputsartifacts.length; i++) {
        // if (!this.outputsartifacts[i].hasOwnProperty("value")) {
        //   this.outputsartifacts[i].value = "";
        // }
        if (!this.outputsartifacts[i].hasOwnProperty("valuefrom")) {
          this.outputsartifacts[i].valuefrom = ""; //对应后端valueFrom  --from
        }
      }

      for (var i = 0; i < this.argumentsparameters.length; i++) {
        if (!this.argumentsparameters[i].hasOwnProperty("paravalue")) {
          this.argumentsparameters[i].paravalue = ""; //对应后端paravalue
        }
        if (!this.argumentsparameters[i].hasOwnProperty("quotevalue")) {
          this.argumentsparameters[i].quotevalue = []; //对应 级联选择项
        }
        if (!this.argumentsparameters[i].hasOwnProperty("valuefrom")) {
          this.argumentsparameters[i].valuefrom = []; //对应 级联选择项
        }
      }

      for (var i = 0; i < this.argumentsartifacts.length; i++) {
        if (!this.argumentsartifacts[i].hasOwnProperty("quotevalue")) {
          this.argumentsartifacts[i].quotevalue = []; //级联选择项
        }
        if (!this.argumentsartifacts[i].hasOwnProperty("valuefrom")) {
          this.argumentsartifacts[i].valuefrom = ""; //对应后端valueFrom  --from
        }
        if (!this.argumentsartifacts[i].hasOwnProperty("filelist")) {
          this.argumentsartifacts[i].filelist = [];
        }
        if (!this.argumentsartifacts[i].hasOwnProperty("fileurls")) {
          this.argumentsartifacts[i].fileurls = []; //对应后端http
        }
        if (!this.argumentsartifacts[i].hasOwnProperty("inputnodefilevalue")) {
          this.argumentsartifacts[i].inputnodefilevalue = []; // 输入节点引入
        }
      }
      //设置 引用其他节点 文件类型级联选择项
      this.cascadeoption = [];
      for (
        var i = 0;
        this.algonodeSource && i < this.algonodeSource.length;
        i++
      ) {
        const curnode = this.algonodeSource[i];
        const childrenOption = {}; //每一个节点  作为一个  []中的{}  第一级
        childrenOption.value = curnode.getData().nodeName;
        childrenOption.label = curnode.getData().nodeName;

        //20211124   ----   参数选择部分，设置参数选择器 ---设置para   和artifact
        // const curnodeoutput = curnode.getData().algoparaOutput;
        const curnodeoutputartifact = curnode.getData().outputsartifacts;
        console.log("第二级参数");
        const childoutput = []; //第一级的children
        for (var j = 0; j < curnodeoutputartifact.length; j++) {
          console.log(curnodeoutputartifact[j]);
          const secchildOption = {}; //第一级children[]  中的{}---------第二级
          secchildOption.value = curnodeoutputartifact[j].paraname; //第二级
          secchildOption.label = curnodeoutputartifact[j].paraname; //第二级
          childoutput.push(secchildOption); //[中添加{}]    想第一级的children 中添加第二级
        }
        childrenOption.children = childoutput; //设置第一级的children

        this.cascadeoption.push(childrenOption); //[中添加{}]    第一级
      }

      //设置 引用其他节点 参数类型级联选择项
      // this.cascadeoption = [];
      this.cascadeoptionpara = [];
      for (
        var i = 0;
        this.algonodeSource && i < this.algonodeSource.length;
        i++
      ) {
        const paracurnode = this.algonodeSource[i];
        const parachildrenOption = {}; //每一个节点  作为一个  []中的{}  第一级
        parachildrenOption.value = paracurnode.getData().nodeName;
        parachildrenOption.label = paracurnode.getData().nodeName;

        //20211124   ----   参数选择部分，设置参数选择器 ---设置para
        // const curnodeoutput = curnode.getData().algoparaOutput;
        const curnodeoutputparameter = paracurnode.getData().outputsparameters;
        console.log("第二级参数");
        const parachildoutput = []; //第一级的children
        for (var j = 0; j < curnodeoutputparameter.length; j++) {
          console.log(curnodeoutputparameter[j]);
          const parasecchildOption = {}; //第一级children[]  中的{}---------第二级
          parasecchildOption.value = curnodeoutputparameter[j].paraname; //第二级
          parasecchildOption.label = curnodeoutputparameter[j].paraname; //第二级
          parachildoutput.push(parasecchildOption); //[中添加{}]    想第一级的children 中添加第二级
        }
        parachildrenOption.children = parachildoutput; //设置第一级的children

        this.cascadeoptionpara.push(parachildrenOption); //[中添加{}]    第一级
      }
    },
    primary() {
      //20211119
      this.algoparaInput.userInput = this.algoparaUserInput;
      this.algoparaInput.getInput = this.algoparaGetInput;
      // this.algonodeSource = this.algonodeSource;
      this.cell.setData({ algoparaInput: this.algoparaInput });
      this.cell.setData({ algonodeSource: this.algonodeSource });
      console.log("design-node-config   primary");
      console.log(this.argumentsartifacts);

      this.cell.setData({ nodeName: this.nodeName });
      this.cell.setData({ argumentsparameters: this.argumentsparameters });
      this.cell.setData({ argumentsartifacts: this.argumentsartifacts });

      this.cell.setData({ inputnodefilemap: this.inputnodefilemap });

      // this.cell.setData({ outputsparameters: this.outputsparameters });
      //20210922   zhang    是否需要保存 获取到的源数据

      this.$emit("primaryNodeclick", this.conditionForm, this.cell);
    },
    //新建边时，边源节点及目的节点均为 算法节点，目的节点获取源节点  相关输出参数
    changeSourcedata(celldata, cell) {
      // //20210918     zhang    source
      // //初始化过程时   需将其sourcedalist 直接赋值
      // //产生连线时   需更新sourcelist ,获取  连线头的节点的outputsourcelist
      // this.sourcedatalist = celldata.sourcedatalist;
      // this.sourceartilist = celldata.sourceartilist;
      // //20210922    是在  design-graph1.vue进行判断    ，此处仅进行刷新保存

      // console.log("design-node-config  sourcedatalist ");
      // this.cell.setData({ sourcedatalist: this.sourcedatalist });
      // this.cell.setData({ sourceartilist: this.sourceartilist });

      this.algonodeSource = celldata.algonodeSource;
      console.log("design-node-config  sourcedatalist ");
      console.log("this.cell");
      console.log(this.cell);
      // this.cell.setData({ algonodeSource: this.algonodeSource });
      console.log(this.algonodeSource);

      //更新文件及参数类型  级联选择器选项
      this.cascadeoption = [];
      for (var i = 0; i < this.algonodeSource.length; i++) {
        const curnode = this.algonodeSource[i];
        const childrenOption = {}; //每一个节点  作为一个  []中的{}  第一级
        childrenOption.value = curnode.getData().nodeName;
        childrenOption.label = curnode.getData().nodeName;

        //20211124   ----   参数选择部分，设置参数选择器 ---设置para   和artifact
        // const curnodeoutput = curnode.getData().algoparaOutput;
        const curnodeoutputartifact = curnode.getData().outputsartifacts;
        console.log("第二级参数");
        const childoutput = []; //第一级的children
        for (var j = 0; j < curnodeoutputartifact.length; j++) {
          console.log(curnodeoutputartifact[j]);
          const secchildOption = {}; //第一级children[]  中的{}---------第二级
          secchildOption.value = curnodeoutputartifact[j].paraname; //第二级
          secchildOption.label = curnodeoutputartifact[j].paraname; //第二级
          childoutput.push(secchildOption); //[中添加{}]    想第一级的children 中添加第二级
        }
        childrenOption.children = childoutput; //设置第一级的children

        this.cascadeoption.push(childrenOption); //[中添加{}]    第一级
      }

      //设置 引用其他节点 参数类型级联选择项
      // this.cascadeoption = [];
      this.cascadeoptionpara = [];
      for (
        var i = 0;
        this.algonodeSource && i < this.algonodeSource.length;
        i++
      ) {
        const paracurnode = this.algonodeSource[i];
        const parachildrenOption = {}; //每一个节点  作为一个  []中的{}  第一级
        parachildrenOption.value = paracurnode.getData().nodeName;
        parachildrenOption.label = paracurnode.getData().nodeName;

        //20211124   ----   参数选择部分，设置参数选择器 ---设置para
        // const curnodeoutput = curnode.getData().algoparaOutput;
        const curnodeoutputparameter = paracurnode.getData().outputsparameters;
        console.log("第二级参数");
        const parachildoutput = []; //第一级的children
        for (var j = 0; j < curnodeoutputparameter.length; j++) {
          console.log(curnodeoutputparameter[j]);
          const parasecchildOption = {}; //第一级children[]  中的{}---------第二级
          parasecchildOption.value = curnodeoutputparameter[j].paraname; //第二级
          parasecchildOption.label = curnodeoutputparameter[j].paraname; //第二级
          parachildoutput.push(parasecchildOption); //[中添加{}]    想第一级的children 中添加第二级
        }
        parachildrenOption.children = parachildoutput; //设置第一级的children

        this.cascadeoptionpara.push(parachildrenOption); //[中添加{}]    第一级
      }
    },
    //新建边时，源节点为输入节点，算法节点内部获取输入节点对应的文件 name及url
    changeinputnodemap(celldata, cell, sallfilemap) {
      celldata.inputnodefilemap = sallfilemap;
      cell.setData({ inputnodefilemap: sallfilemap });
      this.inputnodefilemap = sallfilemap;
    },

    // 实现select选择框可下拉单选，也可输入赋值
    handleSearch(value) {
      this.handleChange(value);
    },
    handleChange(value) {
      this.value = value != null && value != "" ? value : [];
    },
    handleBlur(value) {
      this.value = value;
      if (this.list.indexOf(value) == -1) {
        this.list.push(value);
      }
    },

    // selectBlur(e) {
    //   // 意见类型
    //   if (e.target.value !== "") {
    //     this.value = e.target.value + "(其他)";
    //     this.$forceUpdate(); // 强制更新
    //   }
    // },

    selectBlur(e, row) {
      // this.inputContent = e.target.value ;
      // row.value = e.target.value;
    },
    selectClear() {
      this.value = "";
      this.$forceUpdate();
    },
    selectChange(val) {
      this.value = val;
      this.$forceUpdate();
    },
    cascadehandleChange(value) {},
    cascadeparahandleChange(value) {
      console.log("多选参数");
      console.log(value);
      // console.log(quotevalue)
      // 是否与上次的类型相同
      // let changeFlag = false;
      // let changeItem = null;
      // if (this.shareScopeEnd.length == 0) {
      //   this.quotevalue = val
      // } else {
      //   // 与原数组比对
      //   this.value.forEach((item) => {
      //     if (item[0] !== this.shareScopeEnd[0][0]) { // 一级标签不同
      //       changeFlag = true
      //       changeItem = item
      //     } else if (item[1] != this.shareScopeEnd[0][1]) { // 一级标签相同但是二级标签不同
      //       changeFlag = true
      //       changeItem = item
      //     } else if ((!item[2] && this.shareScopeEnd[0][2]) || (item[2] && !this.shareScopeEnd[0][2])) {
      //       changeFlag = true
      //       changeItem = item
      //     }
      //   })
      // }
      // if (changeFlag) {
      //   this.value = []
      //   this.value.push(changeItem)
      // }
      // this.shareScopeEnd = this.value
    },

    // 以下4个函数是文件上传功能的
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      Message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return MessageBox.confirm(`确定移除 ${file.name}？`);
    },
    // 文件改变时
    fileChange(file, fileList, index) {
      // this.fileList=fileList;
      // this.fileList.append(file);
      //20211125    该函数遍历了两边
      console.log("fileChange");
      console.log(index);
      console.log(file);
      console.log(fileList);
      this.argumentsartifacts[index].filelist = fileList;
      console.log(this.argumentsartifacts[index].filelist);

      this.argumentsartifacts[index].filelist.push(file);
      console.log(this.argumentsartifacts[index].filelist);
    },

    // handleRemove(file, fileList) {
    //     console.log(file, fileList);
    //   },
    //   handlePreview(file) {
    //     console.log(file);
    //   },
    //   handleExceed(files, fileList) {
    //     this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    //   },
    //   beforeRemove(file, fileList) {
    //     return MessageBox.confirm(`确定移除 ${ file.name }？`);
    //   }

    //查询日志
    //获取单个节点 日志
    //调用是已经判断过当前是否已经运行并得到workflowName
    getnodepodContent() {
      var intervalID = window.setInterval(() => {
        // this.getWorkflowStatus();
        console.log("获取节点日志");
        this.$http({
          url: this.$http.adornUrl("/visi/visiworkflow/getpodlog2"),
          method: "get",
          params: this.$http.adornParams({
            workflowName: this.workflowName,
            idTemplateNameMap: this.idTemplateNameMap,
            nodeId: this.cell.id,
          }),
        })
          .then(({ data }) => {
            if (data && data.code === 0) {
              this.$nextTick(() => {
              this.workflowContentlog = data.workflowContent;
              this.podcontent = data.podcontent;
              if (this.containertype == "main") {
                this.podcontentlog = this.podcontent.main;
                this.podcontentlogsplit =
                  this.podcontent.main.split(/[(\r\n)\r\n]+/);
              }
              if (this.containertype == "init") {
                this.podcontentlog = this.podcontent.init;
                this.podcontentlogsplit =
                  this.podcontent.init.split(/[(\r\n)\r\n]+/);
              }
              if (this.containertype == "wait") {
                this.podcontentlog = this.podcontent.wait;
                this.podcontentlogsplit =
                  this.podcontent.wait.split(/[(\r\n)\r\n]+/);
              }
              this.podphase = data.podphase;
              // this.handleLog();
              // console.log("podcontent");
              // console.log(this.podcontent);
              // console.log(this.podcontent.main);
              // console.log(this.podcontent.init);
              // console.log(this.podcontent.wait);
              // console.log(this.podphase);

              // this.podlogs = data.podlogs;
              // console.log("workflowcontent")
              // console.log(this.workflowContentlog);
              // console.log("podlogs")
              // console.log(this.podlogs);
            });
            }
            
          })
          .then(() => {
            // this.visible = true
            // this.$nextTick(() => {
            //   this.$refs['dataForm'].resetFields()
            // })
            // 取消该定时设置
            if (
              this.podphase == "Succeeded" ||
              this.podphase == "Error" ||
              this.podphase == "Failed"
            ) {
              // if (this.workflowStatus == "Succeeded") {
              //   this.workflowstatustag.name = "Succeeded";
              //   this.workflowstatustag.type = "success";
              // } else if (
              //   this.workflowStatus == "Error" ||
              //   this.workflowStatus == "Failed"
              // ) {
              //   this.workflowstatustag.name = "Failed";
              //   this.workflowstatustag.type = "danger";
              // }
              console.log("关闭定时器-podlog");
              window.clearInterval(intervalID);
            }
          });
      }, 3000);
    },
    podcontainerchange(e) {
      if (this.containertype == "main") {
        this.podcontentlog = this.podcontent.main;
        this.podcontentlogsplit = this.podcontent.main.split(/[(\r\n)\r\n]+/);
      }
      if (this.containertype == "init") {
        this.podcontentlog = this.podcontent.init;
        this.podcontentlogsplit = this.podcontent.init.split(/[(\r\n)\r\n]+/);
      }
      if (this.containertype == "wait") {
        this.podcontentlog = this.podcontent.wait;
        this.podcontentlogsplit = this.podcontent.wait.split(/[(\r\n)\r\n]+/);
      }

      // if(e.target.value=="main"){
      //   this.podcontentlog = this.podcontent.main;
      // }
      // if(e.target.value=="init"){
      //   this.podcontentlog = this.podcontent.init;
      // }
      // if(e.target.value=="wait"){
      //   this.podcontentlog = this.podcontent.wait;
      // }
    },
    //下载  output  数据
    downloadoutputresult(paraname, valuefrom) {
      this.$http({
        url: this.$http.adornUrl("/visi/visinodeidtemplatemap/downloadoutput"),
        method: "get",
        params: this.$http.adornParams({
          workflowName: this.workflowName,
          wftemplateName: this.wftemplateName,
          outputartiparaName: paraname,
          outputartiparapath: valuefrom,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("输出节点  下载数据集");
          console.log(data.outputfileUrl);
          window.open(data.outputfileUrl);
        } else {
          Message.error("下载失败");
        }
      });
    },

    //预览  output  数据
    previewfile(paraname, valuefrom) {
      this.$http({
        url: this.$http.adornUrl("/visi/visinodeidtemplatemap/downloadoutput"),
        method: "get",
        params: this.$http.adornParams({
          workflowName: this.workflowName,
          wftemplateName: this.wftemplateName,
          outputartiparaName: paraname,
          outputartiparapath: valuefrom,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("输出节点  下载数据集");
          console.log(data.outputfileUrl);
          const artifiletype = data.artifiletype;
          const artifileurl = data.outputfileUrl;
          console.log("文件类型");
          console.log(artifileurl);
          console.log(artifileurl);
          // window.location.href=data.outputfileUrl;
          // window.location.href=data.downloadUrl;
          if (artifiletype == "csv") {
            console.log("csv类型");
            let routeData = this.$router.resolve({
              path: "/visi-previewcsv",
              query: {
                csvurl: artifileurl,
              },
            });
            window.open(routeData.href, "_blank");
          } else {
            console.log("其他");
            window.open(artifileurl);
          }
        } else {
          Message.error("下载失败");
        }
      });
    },
    // 输出参数页面tab 选中时，获取参数类型输出值-----已改为  节点 init处调用
    getOutputparavalue() {
      //如果工作流状态为 succeed 时，调用该方法获取值
      if (
        this.outputsparameters &&
        this.outputsparameters.length != 0 &&
        this.workflowStatus == "Succeeded"
      ) {
        this.$http({
          url: this.$http.adornUrl(
            "/visi/visinodeidtemplatemap/getoutputparavalue"
          ),
          method: "get",
          params: this.$http.adornParams({
            workflowName: this.workflowName,
            wftemplateName: this.wftemplateName,
          }),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            var outparavalueJson = JSON.stringify(data.outparavalueJson);
            var jsonObj = JSON.parse(outparavalueJson); //转换为json对象
            console.log(jsonObj);
            for (var i = 0; i < jsonObj.length; i++) {
              // alert(jsonObj[i].name); //取json中的值
              for (var j = 0; j < this.outputsparameters.length; j++) {
                if (jsonObj[i].name == this.outputsparameters[j].paraname) {
                  this.outputsparameters[j].paravalue = jsonObj[i].value;
                }
              }
            }
            this.outputparakey = Math.random();
          } else {
            Message.error("输出参数结果获取失败");
          }
        });
      }
    },

    //获取webSocket消息
    handleLog() {
      var websocket = null;

      var host = "ws://127.0.0.1:8082/renren-fast/webSocket/log";
      // if (window.location.protocol == 'http:') {
      //   host = 'ws://' + window.location.host + '/websocket';
      // } else {
      //   host = 'wss://' + window.location.host + '/websocket';
      // }

      //判断当前浏览器是否支持WebSocket
      if ("WebSocket" in window) {
        this.websocket = new WebSocket(host);
      } else if ("MozWebSocket" in window) {
        this.websocket = new MozWebSocket(host);
      } else {
        alert("该浏览器不支持WebSocket！");
      }
      console.log(host);
      this.initWebSocket();

      // if ("WebSocket" in window) {
      //   let url = `ws://localhost/websocket`;
      //   console.log(url);
      //   this.websocket = new WebSocket(url);
      //   this.initWebSocket();
      // }
    },

    //初始化webSocket
    initWebSocket() {
      // 连接错误
      this.websocket.onerror = () => {
        console.log(
          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
        );
      };
      // 连接成功
      this.websocket.onopen = () => {
        console.log(
          "WebSocket连接成功    状态码：" + this.websocket.readyState
        );
      };
      this.websocket.onclose = () => {
        console.log("WebSocket断开    状态码：" + this.websocket.readyState);
      };
      // 收到消息的回调
      this.websocket.onmessage = (event) => {
        // this.consumeCount = this.consumeCount + 1;
        // if (this.filter && event.data.indexOf(this.keyword) == -1) {
        //   return
        // }
        // var curIndex=id;

        // this.podcontentlog = this.podcontent.main;

        if (event.data.match("获取节点日志结束")) {
          console.log(event.data);
          this.websocket.close();
        } else {
          this.podcontent = JSON.parse(event.data);
          this.containertype = "main";
          this.podcontentlog = this.podcontent.main;
          this.podcontentlogsplit = this.podcontent.main.split(/[(\r\n)\r\n]+/);
          console.log("event.data" + event.data);
        }

        /* else{
          this.websocket.close();
        } */
      };
    },
  },
  computed: {
    formItemLayout() {
      const { formLayout } = this;
      return formLayout === "horizontal"
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
        : {};
    },
    buttonItemLayout() {
      const { formLayout } = this;
      return formLayout === "horizontal"
        ? {
            wrapperCol: { span: 14, offset: 4 },
          }
        : {};
    },
  },
};
</script>
<style>
.ant-tabs-tabpane {
  background: #fff;
  padding: 5px;
  width: 100%;
  height: 100%;
}
.ant-tabs-tab {
  flex: 1 1 50px;
  padding: 7px 16px;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.el-select .el-input {
  /* width: 130px; */
  width: 100%;
  /* width: 0px; */
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-form-item.el-input {
  width: 150px;
}
.logList-item {
  padding: 8px 0;
  margin: 0;
  font: normal 13px/1.2 "Courier", sans-serif;
}
.log-box {
  /* min-height: 500px; */
  /* max-height: 800px; */
  height: 100%;
  padding: 10px;
  margin: 10px;
  background-color: #fff;
}
</style>