algorithm-platform-vue/src/views/modules/visi/design-graph1.vue

<template>
  <div class="mod-demo-echarts">
    <el-breadcrumb class="divi2" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/visi-design' }"
        >可视化设计</el-breadcrumb-item
      >
      <el-breadcrumb-item>实验设置</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider class="divi"></el-divider>
    <!-- <design-graph></design-graph> -->
    <!-- <design-graph-1 :visible.sync="designgraphvisi" v-if="designgraphvisi" ref="designgraph"></design-graph-1> -->

    <a-layout id="components-layout-demo-responsive">
      <!-- 左侧组件栏 default-expand-all-->

      <a-layout-sider
        breakpoint="lg"
        collapsed-width="0"
        @collapse="onCollapse"
        @breakpoint="onBreakpoint"
        theme="light"
        v-model="collapsed"
        collapsible
      >
        <div>
          <a-tree
            show-line
            show-icon
            :tree-data="treeData"
            :default-selected-keys="['0-0-0']"
            @select="onSelect"
          >
            <a-icon slot="icon" type="carry-out" />
          </a-tree>
        </div>
      </a-layout-sider>
      <!-- <div class="box" ref="box"> -->
      <!-- <div class="left"> -->
      <!-- 右侧画布 -->
      <div class="content">
        <div class="app-content">
          <div class="box" ref="box">
            <div class="left">
              <!-- <a-layout style="width:'100%',height:'100%',display:'flex'"> -->
              <el-form class="boxform">
                <el-form-item class="boxformitem">
                  <!-- 画布上方按钮 undo redo-->
                  <el-row>
                    <el-tooltip
                      content="提交"
                      placement="bottom-end"
                      effect="dark"
                    >
                      <i
                        @click="onRun"
                        style="
                          height: 50px;
                          width: 50px;
                          margin: 10px 5px 10px 10px;
                          font-size: 23px;
                        "
                        class="iconfont icon-yunXang"
                      ></i>
                    </el-tooltip>
                    <el-tooltip
                      content="保存"
                      placement="bottom-end"
                      effect="dark"
                    >
                      <i
                        @click="onPrimary"
                        style="
                          height: 25px;
                          width: 25px;
                          margin: 10px 5px 10px 10px;
                          font-size: 23px;
                        "
                        class="el-icon-document-checked"
                      >
                      </i>
                    </el-tooltip>
                    <el-tooltip content="取消" effect="dark">
                      <i
                        @click="onCancel"
                        style="
                          height: 25px;
                          width: 25px;
                          margin: 10px 5px 10px 10px;
                          font-size: 23px;
                        "
                        class="el-icon-error"
                      >
                      </i>
                    </el-tooltip>
                    <el-tooltip content="Undo" effect="dark">
                      <i
                        @click="onUndo"
                        style="
                          height: 25px;
                          width: 25px;
                          margin: 10px 5px 10px 10px;
                          font-size: 23px;
                        "
                        class="el-icon-arrow-left"
                      >
                      </i>
                    </el-tooltip>
                    <el-tooltip content="Redo" effect="dark">
                      <i
                        @click="onRedo"
                        style="
                          height: 25px;
                          width: 25px;
                          margin: 10px 5px 10px 10px;
                          font-size: 23px;
                        "
                        class="el-icon-arrow-right"
                      >
                      </i>
                    </el-tooltip>
                    <el-tooltip content="示例" effect="dark">
                      <i
                        @click="onGetcontour"
                        style="
                          height: 25px;
                          width: 25px;
                          margin: 10px 5px 10px 10px;
                          font-size: 23px;
                        "
                        class="el-icon-notebook-2"
                      >
                      </i>
                    </el-tooltip>
                    <el-tooltip content="清空" effect="dark">
                      <i
                        @click="onCleargraph"
                        style="
                          height: 25px;
                          width: 25px;
                          margin: 10px 5px 10px 10px;
                          font-size: 23px;
                        "
                        class="el-icon-delete"
                      >
                      </i>
                    </el-tooltip>
                    <el-tooltip content="获取代码模板" effect="dark">
                      <i
                        @click="getParaTemp()"
                        style="
                          height: 25px;
                          width: 25px;
                          margin: 10px 5px 10px 10px;
                          font-size: 23px;
                        "
                        class="el-icon-tickets"
                      >
                      </i>
                    </el-tooltip>
                    <el-tooltip content="日志" effect="dark">
                      <i
                        @click="getworkflowContent"
                        style="
                          height: 25px;
                          width: 25px;
                          margin: 10px 5px 10px 10px;
                          font-size: 23px;
                        "
                        class="el-icon-document"
                      >
                      </i>
                    </el-tooltip>
                    <el-tooltip content="节点居中" effect="dark">
                      <i
                        @click="getgraphContentcenter"
                        style="
                          height: 25px;
                          width: 25px;
                          margin: 10px 5px 10px 10px;
                          font-size: 23px;
                        "
                        class="iconfont icon-tishi"
                      >
                      </i>
                    </el-tooltip>

                    <el-tag
                      :key="workflowstatustag.name"
                      :type="workflowstatustag.type"
                      @click="getWorkflowStatus"
                      >{{ workflowstatustag.name }}</el-tag
                    >
                  </el-row>
                </el-form-item>
                <el-form-item class="boxformitem">
                  <!-- 画布具体位置 -->
                  <!-- <a-layout-content :style="{ margin: '0px 0px 0' }"> -->
                  <!-- <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }"> -->
                  <div
                    style="width: 100%; height: 100%; display: flex"
                    :style="{
                      padding: '0px',
                      background: '#fff',
                      minHeight: '800px',
                    }"
                  >
                    <!-- content -->
                    <!-- 画布                     style="width: 100%; height: 100%"   class="app-content"-->
                    <div id="container" style="flex: 1"></div>
                  </div>
                  <!-- </a-layout-content> -->
                </el-form-item>
              </el-form>
              <!-- </a-layout> -->
            </div>

            <div class="resize" title="收缩侧边栏"></div>
            <div class="right">
              <!-- 右侧组件栏 width="290px"   style="width: 100%"   width="239px" 309px-->
              <ExperimentConfig
                v-show="experimentVisi"
                ref="experConfig"
                @primaryExperimentclick="primaryExperimentConfig(arguments)"
              ></ExperimentConfig>
              <NodeConfig
                v-show="nodeConfigVisi"
                ref="newNodeConfig"
                @primaryNodeclick="primaryNodeConfig(arguments)"
              ></NodeConfig>
              <ConNodeConfig
                v-show="conNodeConfigVisi"
                ref="newConNodeConfig"
                @primaryclick="primaryConNodeConfig(arguments)"
              ></ConNodeConfig>
              <CSVSelectNodeConfig v-show="csvselectNodeConVisible" ref="csvselectNodeConfig" @primaryCSVselectNodeclick="primaryCSVselectNodeconfig(arguments)"></CSVSelectNodeConfig>
              <!-- <a-layout-sider
              breakpoint="lg"
              theme="light"
              width="100%"
              height="100%"
              collapsed-width="2"
              @collapse="onCollapse"
              @breakpoint="onBreakpoint"
            >
              <ExperimentConfig
                v-show="experimentVisi"
                ref="experConfig"
              ></ExperimentConfig>
              <NodeConfig
                v-show="nodeConfigVisi"
                ref="newNodeConfig"
                @primaryNodeclick="primaryNodeConfig(arguments)"
              ></NodeConfig>
              <ConNodeConfig
                v-show="conNodeConfigVisi"
                ref="newConNodeConfig"
                @primaryclick="primaryConNodeConfig(arguments)"
              ></ConNodeConfig>
            </a-layout-sider> -->
            </div>
          </div>
        </div>
      </div>
      <NodeParaTemp v-if="paraTempVisible" ref="paraTemp"></NodeParaTemp>
      <InputNodeConfig
        v-if="inputNodeConVisible"
        ref="inputNodeConfig"
        @refreshinputnode="primaryInputnodeConfig(arguments)"
      ></InputNodeConfig>
      <OutputNodeConfig
        v-if="outputNodeConVisible"
        ref="outputNodeConfig"
      ></OutputNodeConfig>
      <Workflowlog
        v-if="workflowContentVisi"
        ref="getworkflowlog"
      ></Workflowlog>
    </a-layout>
    <!-- 弹窗 -->
    <!-- <ConWatch v-if="newWatchVisible" ref="newWatch" @refreshDataList="getDataList"></ConWatch> -->
  </div>
</template>


<script>
import { Cell, Graph, Model, Node } from "@antv/x6";
import { Shape } from "@antv/x6";
import { Addon } from "@antv/x6";
import { Path } from "@antv/x6";
// import { X6Splitbox } from "x6-vue-components";
// import { SplitBox } from "@antv/x6";
// import { X6Splitbox } from "@antv/x6-vue-shape";
import { Rect } from "@antv/x6/lib/shape/basic";
// import ConWatch from "./condition-watch.vue";
// import StencilTree from "./stencil-tree.vue";
import NodeConfig from "./design-node-config.vue";
import ConNodeConfig from "./design-connode-config.vue";
import ExperimentConfig from "./design-experconfig.vue";
import NodeParaTemp from "./design-para-temp.vue";
import InputNodeConfig from "./design-inputnode-config1.vue";
import OutputNodeConfig from "./design-outputnode-config.vue";
import Workflowlog from "./design-workflowlog.vue";
import CSVSelectNodeConfig from "./design-csvselect-config.vue";
import "@/ant-design-vue";
import { Message } from "element-ui";
import { MessageBox } from "element-ui";
export default {
  data() {
    return {
      pregraphdata: "",
      dnd: null,
      // newConWatchVisible: false, //条件弹窗
      conNodeConfigVisi: false, //条件节点配置
      nodeConfigVisi: false, //普通节点配置
      experimentVisi: true, //实验配置
      paraTempVisible: false, //20211111    算法节点输入输出参数代码模板
      inputNodeConVisible: false, //输入节点配置
      outputNodeConVisible: false, //输出节点配置
      csvselectNodeConVisible: false, //csv文件转换节点配置
      //右侧参数设置组件栏
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      collapsed: false, //设置左侧侧边栏可收起

      addorupdate: true,//true表示update,新增  false表示add
      workflowId: null,//当前工作流id
      experimentName: "",//当前实验名称
      workflowName: "", //当前画布工作流名称
      workflowContent: { main: "", wait: "", init: "" }, //当前画布工作流整个日志
      workflowContentlog: "",
      workflowContentVisi: false,
      podlogs: null, //当前节点与workflow pod对应情况
      idTemplateNameMap: null, //id与templatename
      containertype: "main",
      workflowStatus: "uncommitted", //提交后的状态
      workflowstatustag: {
        name: "未提交",
        type: "info",
      },

      workflowdataList: [], //获取已经生成的画布列表，  workflow列表
      algorithmdataList: [], //获取左侧树形组件栏，所有算法模块节点列表
      //20210926   树形组件
      treeData: [
        {
          title: "parent 1",
          key: "0-0",
          slots: {
            icon: "smile",
          },
          children: [
            // {
            //   title: "consume_artifact",
            //   key: "consume_artifact",
            //   slots: { icon: "meh" },
            // },
            // {
            //   title: "generate_artifact",
            //   key: "generate_artifact",
            //   scopedSlots: { icon: "custom" },
            // },
            // {
            //   title: "zdockertest",
            //   key: "zdockertest",
            //   scopedSlots: { icon: "custom" },
            // },
            {
              title: "条件节点",
              key: "条件节点",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "输入节点",
              key: "dataInputnode",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "输出节点",
              key: "dataOutputnode",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "CSV文件转换节点",
              key: "CSVSelectnode",
              scopedSlots: { icon: "custom" },
            },
          ],
        },
        {
          title: "轮廓识别",
          key: "0-1",
          slots: {
            icon: "smile",
          },
          children: [
            {
              title: "contourTask1",
              key: "contourTask1",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "contourTask2",
              key: "contourTask2",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "contourTask3",
              key: "contourTask3",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "contourApproximate1",
              key: "contourApproximate1",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "contourApproximate2",
              key: "contourApproximate2",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "contourRect1",
              key: "contourRect1",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "contourCircle2",
              key: "contourCircle2",
              scopedSlots: { icon: "custom" },
            },
          ],
        },
      ],
      showLine: true,
      showIcon: false,
      nodedata: [],
      imageurl: require("@/assets/img/cnnmnist.svg"),
    };
  },
  components: {
    NodeConfig: NodeConfig,
    ConNodeConfig: ConNodeConfig,
    ExperimentConfig: ExperimentConfig,
    NodeParaTemp: NodeParaTemp,
    InputNodeConfig: InputNodeConfig,
    OutputNodeConfig: OutputNodeConfig,
    Workflowlog: Workflowlog,
    CSVSelectNodeConfig: CSVSelectNodeConfig,
    // X6Splitbox: X6Splitbox,
    // SplitBox: splitbox,
  },
  activated() {
    this.getalgorithmDataList();
    this.onCleargraph();
    this.addorupdate = this.$route.query.update;
    console.log("addorupdate")
    console.log(this.addorupdate)
    //路由跳转--如果是修改，则加载画布信息；如果为新建，则不加载
    if(this.$route.query.update==true){
      this.initGraph(this.$route.query.winfo);
      
    }
    // this.createGraph();
    // this.addalgorithmdata();
  },
  // mounted() {
  mounted() {
    //为测试artifact   重新定义设置节点     保留之前的普通参数方式
    //将inputparameters   等参数[]  设置初始化为空
    // 定义节点
    Graph.registerNode("template-node", {
      inherit: "rect",
      width: 90,
      height: 80,
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#d3e3ee",
          // fill: "#d3ebf3",
          fill: "#1891ec",
          rx: 8,
          ry: 8,
        },
        //设置内部添加图片
        image: {
          width: 36,
          height: 36,
          refX: 30,
          refY: 16,
          // "xlink:href":
          //   "https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg",
        },
        // label: {
        //   refX: 3,
        //   refY: 2,
        //   textAnchor: "left",
        //   textVerticalAnchor: "top",
        //   fontSize: 12,
        //   fill: "#fff",
        // },
        //删除功能
        //设置可通过backspace 删除，注释此部分
        // btn: {
        //   refX: "100%",
        //   refX2: -28,
        //   // y: 4,
        //   width: 24,
        //   height: 18,
        //   rx: 5,
        //   ry: 5,
        //   fill: "rgba(255,255,0,0.01)",
        //   stroke: "white",
        //   cursor: "pointer",
        //   event: "node:delete",
        // },
        // btnText: {
        //   fontSize: 14,
        //   fill: "white",
        //   text: "x",
        //   refX: "100%",
        //   refX2: -19,
        //   // y: 17,
        //   cursor: "pointer",
        //   pointerEvent: "none",
        // },
        label: {
          // refX: 3,
          // refY: 2,
          refX: 0.5,
          refY: 0.85,
          fill: "#333",
          fontSize: 11,
          // fontWeight: "bold",
          fontVariant: "small-caps",
        },
      },
      ports: {
        groups: {
          // 输入链接桩群组定义
          in: {
            position: "left",
            attrs: {
              circle: {
                r: 2.5,
                magnet: true,
                stroke: "black",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: true, //默认隐藏，不显示。定位到节点， 才展示
                },
              },
            },
          },
          // 输出链接桩群组定义
          out: {
            position: "right",
            attrs: {
              circle: {
                r: 2.5,
                magnet: true,
                stroke: "black",
                // stroke: "#fff",
                strokeWidth: 1,
                fill: "#fff",
                // style: {
                //   visibility: "hidden", //默认隐藏，不显示。定位到节点， 才展示
                // },
              },
            },
          },
        },
        items: [
          {
            id: "inport1",
            group: "in",
          },
          {
            id: "inport2",
            group: "in",
          },
          {
            id: "outport1",
            group: "out",
          },
          {
            id: "outport2",
            group: "out",
          },
        ],
      },

      markup: [
        {
          tagName: "rect",
          selector: "body",
          attrs: {
            fill: "#fff",
            stroke: "#000",
            strokeWidth: 2,
          },
        },
        {
          tagName: "image",
          selector: "image",
        },
        {
          tagName: "text",
          selector: "label",
          attrs: {
            fill: "#333",
            textAnchor: "middle",
            textVerticalAnchor: "middle",
          },
        },
        // {
        //   tagName: "g",
        //   children: [
        //     {
        //       tagName: "text",
        //       selector: "btnText",
        //     },
        //     {
        //       tagName: "rect",
        //       selector: "btn",
        //     },
        //   ],
        // },
      ],
      data: {
        nodeName: "",
        algonodeId: null,
        templateName: "",
        templateImage: "",
        templateCommand: {
          // 1: "echo",
          // 2: "{{inputs.parameters.message}}",
          // // 2:"\"{{inputs.parameters.message}}\""
        },
        //不确定命令暂时用哪种方式     如果添加属性的话哪一种好添加    ; 考虑动态添加属性和值，此处key为何值都行，主要是value较为重要
        // templateCommand2: [
        //   {
        //     1:"echo"
        //   },
        //   {
        //     2:"{{inputs.parameters.message}}"
        //   },
        // ],
        templateArgs: {
          // 1: "echo",
        },
        //20211116   新增 根据输入输出模板获取到的输入输出参数名称，类型，描述等
        algoparaInput: {
          userInput: [],
          getInput: [],
        }, //包括  userInput []  和getInput[]
        algoparaOutput: [],
        //保存输入
        algoparaInputargu: {
          userInput: [],
          getInput: [],
        }, //包括  userInput []  和getInput[]
        // algoparaOutAddress: "",  //已改为description  无用
        algonodeSource: [],
        inputsparameters: [
          // //此container 需要输入的参数，固定
          // {
          //   name: "message",
          // },
          // {
          //   name: "message1",
          // },
        ],
        inputsartifacts: [
          // //此container 需要输入的参数，固定
          // {
          //   name: "message",
          //   path: "",
          // },
        ],
        argumentsparameters: [
          // {
          //   name: "message",
          //   value: "A",
          // },
          // //调用container(该template)输入的参数，后续会变(根据输入弹窗变)
          // {
          //   name: "message1",
          //   value: "A",
          // },
        ],
        argumentsartifacts: [
          // //调用container(该template)输入的参数，后续会变(根据输入弹窗变)
          // {
          //   name: "message",
          //   valuefrom: "A",
          // },
        ],

        outputsparameters: [
          // {
          //   name: "message",
          // },
          // //此container 输出的参数，固定
          // // {
          // //   name: "message1",
          // // },
          // // {
          // //   name: "message2",
          // // },
        ],

        outputsartifacts: [
          // //此container 输出的参数，固定
          // {
          //   name: "message",
          //   path: "",
          // },
        ],
        //获取到的连接线源的数据      连接线的源的输出数据
        sourcedatalist: [
          // {
          //   name: "source1",
          //   from: "", //  {{tasks.nodename.outputs.parameters.参数名}}
          // },
          // {
          //   name: "source2",
          //   from: "",
          // },
        ],
        sourceartilist: [
          // {
          //   name: "source2",
          //   from: "", //{{tasks.nodename.outputs.artifacts.参数名}}
          // },
        ],
        inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
        inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
      },
    });
    // // 定义边
    // Graph.registerConnector(
    //   "algo-edge",
    //   (source, target) => {
    //     const offset = 4;
    //     const control = 80;
    //     const v1 = { x: source.x, y: source.y + offset + control };
    //     const v2 = { x: target.x, y: target.y - offset - control };

    //     return `M ${source.x} ${source.y}
    //    L ${source.x} ${source.y + offset}
    //    C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${target.x} ${target.y - offset}
    //    L ${target.x} ${target.y}
    //   `;
    //   },
    //   true
    // );

    //定义输入节点
    Graph.registerNode("template-input", {
      inherit: "rect",
      width: 90,
      height: 80,
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#d3e3ee",
          fill: "#e2c3a0",
          rx: 8,
          ry: 8,
        },
        //设置内部添加图片
        image: {
          width: 36,
          height: 36,
          refX: 30,
          refY: 16,
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg",
        },
        label: {
          refX: 0.5,
          refY: 0.85,
          fill: "#333",
          fontSize: 11,
          // fontWeight: "bold",
          fontVariant: "small-caps",
        },
      },
      ports: {
        groups: {
          // 输入链接桩群组定义
          in: {
            position: "left",
            attrs: {
              circle: {
                r: 2.5,
                magnet: true,
                stroke: "black",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: true, //默认隐藏，不显示。定位到节点， 才展示
                },
              },
            },
          },
          // 输出链接桩群组定义
          out: {
            position: "right",
            attrs: {
              circle: {
                r: 2.5,
                magnet: true,
                stroke: "black",
                // stroke: "#fff",
                strokeWidth: 1,
                fill: "#fff",
                // style: {
                //   visibility: "hidden", //默认隐藏，不显示。定位到节点， 才展示
                // },
              },
            },
          },
        },
        items: [
          {
            id: "inport1",
            group: "in",
          },
          {
            id: "inport2",
            group: "in",
          },
          {
            id: "outport1",
            group: "out",
          },
          {
            id: "outport2",
            group: "out",
          },
        ],
      },

      markup: [
        {
          tagName: "rect",
          selector: "body",
          attrs: {
            fill: "#fff",
            stroke: "#000",
            strokeWidth: 2,
          },
        },
        {
          tagName: "image",
          selector: "image",
        },
        {
          tagName: "text",
          selector: "label",
          attrs: {
            fill: "#333",
            textAnchor: "middle",
            textVerticalAnchor: "middle",
          },
        },
      ],
      data: {
        nodeName: "",
        algonodeId: null,

        st_dataListvalue: [], //静态数据集选中 文件对应value
        dy_dataListvalue: [], //动态数据集选中  文件对应value
        fileList: [], //外部上传  文件
        allfilemap: [{}], //选中的文件对应的名称及url
      },
    });

    //定义输出节点
    Graph.registerNode("template-output", {
      inherit: "rect",
      width: 90,
      height: 80,
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#d3e3ee",
          fill: "#e2c3a0",
          rx: 8,
          ry: 8,
        },
        //设置内部添加图片
        image: {
          width: 36,
          height: 36,
          refX: 30,
          refY: 16,
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg",
        },
        label: {
          refX: 0.5,
          refY: 0.85,
          fill: "#333",
          fontSize: 11,
          // fontWeight: "bold",
          fontVariant: "small-caps",
        },
      },
      ports: {
        groups: {
          // 输入链接桩群组定义
          in: {
            position: "left",
            attrs: {
              circle: {
                r: 2.5,
                magnet: true,
                stroke: "black",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: true, //默认隐藏，不显示。定位到节点， 才展示
                },
              },
            },
          },
          // 输出链接桩群组定义
          out: {
            position: "right",
            attrs: {
              circle: {
                r: 2.5,
                magnet: true,
                stroke: "black",
                // stroke: "#fff",
                strokeWidth: 1,
                fill: "#fff",
                // style: {
                //   visibility: "hidden", //默认隐藏，不显示。定位到节点， 才展示
                // },
              },
            },
          },
        },
        items: [
          {
            id: "inport1",
            group: "in",
          },
          {
            id: "inport2",
            group: "in",
          },
          {
            id: "outport1",
            group: "out",
          },
          {
            id: "outport2",
            group: "out",
          },
        ],
      },

      markup: [
        {
          tagName: "rect",
          selector: "body",
          attrs: {
            fill: "#fff",
            stroke: "#000",
            strokeWidth: 2,
          },
        },
        {
          tagName: "image",
          selector: "image",
        },
        {
          tagName: "text",
          selector: "label",
          attrs: {
            fill: "#333",
            textAnchor: "middle",
            textVerticalAnchor: "middle",
          },
        },
      ],
      data: {
        nodeName: "",
        algonodeId: null,
        sourcealgocell: null,
      },
    });
    //定义输出节点
    Graph.registerNode("template-csvselect", {
      inherit: "rect",
      width: 90,
      height: 80,
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#d3e3ee",
          fill: "#e2c3a0",
          rx: 8,
          ry: 8,
        },
        //设置内部添加图片
        image: {
          width: 36,
          height: 36,
          refX: 30,
          refY: 16,
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg",
        },
        label: {
          refX: 0.5,
          refY: 0.85,
          fill: "#333",
          fontSize: 11,
          // fontWeight: "bold",
          fontVariant: "small-caps",
        },
      },
      ports: {
        groups: {
          // 输入链接桩群组定义
          in: {
            position: "left",
            attrs: {
              circle: {
                r: 2.5,
                magnet: true,
                stroke: "black",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: true, //默认隐藏，不显示。定位到节点， 才展示
                },
              },
            },
          },
          // 输出链接桩群组定义
          out: {
            position: "right",
            attrs: {
              circle: {
                r: 2.5,
                magnet: true,
                stroke: "black",
                // stroke: "#fff",
                strokeWidth: 1,
                fill: "#fff",
                // style: {
                //   visibility: "hidden", //默认隐藏，不显示。定位到节点， 才展示
                // },
              },
            },
          },
        },
        items: [
          {
            id: "inport1",
            group: "in",
          },
          {
            id: "inport2",
            group: "in",
          },
          {
            id: "outport1",
            group: "out",
          },
          {
            id: "outport2",
            group: "out",
          },
        ],
      },

      markup: [
        {
          tagName: "rect",
          selector: "body",
          attrs: {
            fill: "#fff",
            stroke: "#000",
            strokeWidth: 2,
          },
        },
        {
          tagName: "image",
          selector: "image",
        },
        {
          tagName: "text",
          selector: "label",
          attrs: {
            fill: "#333",
            textAnchor: "middle",
            textVerticalAnchor: "middle",
          },
        },
      ],
      data: {
        nodeName: "",
        algonodeId: null,

        st_dataListvalue: [], //静态数据集选中 文件对应value
        dy_dataListvalue: [], //动态数据集选中  文件对应value
        fileList: [], //外部上传  文件
        inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
        inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用    ---与算法节点的不同，存储文件名，桶名称，url
        allfilemap: [{}], //选中的文件对应的名称及url
        isMakenewfile: false,
      },
    });


    // 初始化画布
    const graph = new Graph({
      grid: true,
      container: document.getElementById("container"),
      // width: 1270,
      // width: 1200,
      // height: 750,
      autoResize: true,
      panning: {
        enabled: true,
      },
      //调节节点大小
      resizing: {
        enabled: false,
      },
      // model: {},
      history: true, //uodo和redo
      highlighting: {
        nodeAvailable: {
          //连线过程中，节点可以被链接时被使用。
          name: "className",
          args: {
            className: "available",
          },
        },
        magnetAvailable: {
          //连线过程中，链接桩可以被链接时被使用。
          name: "className",
          args: {
            className: "available",
          },
        },
        magnetAdsorbed: {
          //连线过程中，自动吸附到链接桩时被使用。
          name: "className",
          args: {
            className: "adsorbed",
          },
        },
      },
      scroller: {
        enabled: true,
        pannable: true,
        minVisibleHeight: 800,
        minVisibleWidth: 800,
        autoResize: true,
        height: 800,
        className: "x6-graph-scroller",
      },
      mousewheel: {
        enabled: true,
        modifiers: ["ctrl", "meta"],
      },
      clipboard: {
        enabled: true,
        useLocalStorage: true,
      },
      keyboard: {
        enabled: true,
        global: true,
      }, //快捷键
      selecting: {
        enabled: true,
        showNodeSelectionBox: true,
        // showEdgeSelectionBox: true,
      }, //选中 ,框选
      //节点与边交互
      translating: {
        restrict: true, //限制节点不能移动超出画布区域
      },
      connecting: {
        snap: true, //连线距离节点或者连接桩 50px 时会触发自动吸附
        allowBlank: false,
        allowLoop: false,
        highlight: true,
        sourceAnchor: {
          //指定源节点的锚点
          name: "bottom",
        },
        targetAnchor: {
          //指定目标节点的锚点
          name: "center",
        },
        connectionPoint: "anchor",
        // connector: "algo-edge",
        createEdge() {
          return graph.createEdge({
            //更新连接边edge样式
            router: {
              // name: "orth",
              name: "er",
              args: {
                offset: "center",
              },
            },

            attrs: {
              line: {
                // strokeDasharray: "5 5",      //虚线
                stroke: "#808080",
                strokeWidth: 1,
                targetMarker: {
                  name: "block",
                  args: {
                    size: "6",
                  },
                },
              },
            },
            //在指定的位置处，渲染一个删除按钮，点击时删除对应的边。
            tools: {
              name: "button-remove",
              args: { distance: -40 },
            },
          });
        },
        validateMagnet({ magnet }) {
          return magnet.getAttribute("port-group") !== "in";
        },
        validateConnection({
          sourceView,
          targetView,
          sourceMagnet,
          targetMagnet,
        }) {
          // 只能从输出链接桩创建连接
          if (
            !sourceMagnet ||
            sourceMagnet.getAttribute("port-group") === "in"
          ) {
            return false;
          }

          // 只能连接到输入链接桩
          if (
            !targetMagnet ||
            targetMagnet.getAttribute("port-group") !== "in"
          ) {
            return false;
          }

          // 判断目标链接桩是否可连接
          const portId = targetMagnet.getAttribute("port");
          const node = targetView.cell;
          const port = node.getPort(portId);
          if (port && port.connected) {
            // if (port && port.connected) {
            return false;
          }

          return true;
        },
      },
    });

    // 创建 Graph 的实例
    // const graph = new Graph({
    //   container: document.getElementById("container"),
    //   width: 1380,
    //   height: 750,
    //   background: {
    //     // color: "#f7f7f4", //设置画布背景颜色
    //     color: "#ffffff",
    //   },
    //   grid: {
    //     size: 8,
    //     visible: true,
    //   }, //网格
    //   history: true, //uodo和redo
    //   //滚动条
    //   // scroller: {
    //   //   enabled: true,
    //   //   // pannable: true,
    //   //   // pageVisible: true,
    //   //   // pageBreak: false,
    //   // },
    //   mousewheel: {
    //     enabled: true,
    //     modifiers: ["ctrl", "meta"],
    //   },
    //   //   clipboard: true, //剪切板
    //   clipboard: {
    //     enabled: true,
    //     useLocalStorage: true,
    //   },
    //   keyboard: {
    //     enabled: true,
    //     global: true,
    //   }, //快捷键
    //   selecting: {
    //     enabled: true,
    //     showNodeSelectionBox: true,
    //     // showEdgeSelectionBox: true,
    //   }, //选中 ,框选
    //   //节点与边交互
    //   translating: {
    //     restrict: true, //限制节点不能移动超出画布区域
    //   },
    //   //连线规则
    //   connecting: {
    //     snap: true,
    //     allowBlank: false, //不允许连接到画布空白位置
    //     allowMulti: false, //不允许在相同节点之间创建多条边
    //   },
    // });

    this.graph = graph;
    this.history = graph.history; //Redo  Undo
    // this.graph.toJSON()

    // const dnd = new Addon.Dnd({
    //   target: this.graph,
    //   scaled: false,
    //   animation: true,
    //   getDragNode(node) {
    //     // 这里返回一个新的节点作为拖拽节点
    //     return graph.createNode({
    //       width: 60,
    //       height: 20,
    //       attrs: {
    //         label: {
    //           text: "Rect",
    //           fill: "#6a6c8a",
    //         },
    //         body: {
    //           stroke: "#31d0c6",
    //           strokeWidth: 2,
    //         },
    //       },
    //     });
    //   },
    //   getDropNode(node) {
    //     const { width, height } = node.size();
    //     // 返回一个新的节点作为实际放置到画布上的节点
    //     return node.clone().size(width * 3, height * 3);
    //   },
    // });
    // this.dnd = dnd;
    // // console.log("this.dnd");
    // // console.log(this.dnd);

    //绑定快捷键  ctrl+c  ctrl+v
    this.graph.bindKey("ctrl+c", () => {
      const cells = this.graph.getSelectedCells();
      if (cells.length) {
        this.graph.copy(cells);
      }
      return false;
    });

    this.graph.bindKey("ctrl+v", () => {
      if (!this.graph.isClipboardEmpty()) {
        const cells = this.graph.paste({ offset: 32 });
        this.graph.cleanSelection();
        this.graph.select(cells);
      }
      return false;
    });

    this.graph.bindKey("backspace", () => {
      const cells = graph.getSelectedCells();
      if (cells.length) {
        graph.removeCells(cells);
      }
    });

    //节点删除    边未完成
    graph.on("node:delete", ({ view, e }) => {
      e.stopPropagation();
      view.cell.remove();
      console.log("node:delete");
    });
    //删除边
    graph.on("edge:delete", ({ view, e }) => {
      e.stopPropagation();
      view.cell.remove();
    });
    //delete
    graph.bindKey("backspace", () => {
      const cells = graph.getSelectedCells();
      if (cells.length) {
        graph.removeCells(cells);
      }
    });

    //20210804   涉及到一些通过  边连接 时传递的参数  及赋值行为，在边取消是要进行及时更改

    graph.on("cell:click", ({ e, cell, view }) => {
      // reset();
      // node.attr("body/stroke", "orange");
      console.log("单击节点成功");
      this.cell = cell;
      //条件节点;
      if (cell.shape == "polygon") {
        // this.newConWatchVisible = true;
        // this.conNodeConfigVisi = true;

        this.$nextTick(() => {
          this.conNodeConfigVisi = true;
          this.experimentVisi = false;
          this.nodeConfigVisi = false;
          this.csvselectNodeConVisible = false;
          this.$refs.newConNodeConfig.init(
            cell.getData().sourcedatalist,
            cell.getData().sourceartilist,
            cell.getData().inputcondition,
            cell
          );
          // this.$refs.newConWatch.init(
          //   cell.getData().sourcedatalist,
          //   cell.getData().inputcondition
          // );
        });
      } else if (cell.shape == "template-node") {
        // console.log(cell.getData());
        // console.log(this.workflowName);
        // console.log(cell.id);
        this.$nextTick(() => {
          this.nodeConfigVisi = true;
          this.conNodeConfigVisi = false;
          this.experimentVisi = false;
          this.csvselectNodeConVisible = false;
          this.$refs.newNodeConfig.init1(
            cell.getData(),
            cell,
            this.workflowName,
            this.idTemplateNameMap,
            this.workflowStatus
          );
          // if (this.$refs.newNodeConfig) {
          //   // console.log("出现了");
          //   this.$refs.newNodeConfig.init1(cell.getData(), cell);
          // }
        });
      } else if (cell.shape == "template-input") {
        // console.log(cell);
        // console.log(cell.getData());
        // console.log(this.workflowName);
        // console.log(cell.id);

        this.inputNodeConVisible = true;
        this.$nextTick(() => {
          this.$refs.inputNodeConfig.init(cell);
        });

        //       addOrUpdateHandle(id) {
        //   this.addOrUpdateVisible = true;
        //   this.$nextTick(() => {
        //     this.$refs.addOrUpdate.init(id);
        //   });
        // },
      } else if (cell.shape == "template-output") {
        // console.log(cell.getData());
        // console.log(this.workflowName);
        // console.log(cell.id);\
        this.outputNodeConVisible = true;
        if (cell.getData().sourcealgocell != null) {
          //当前输出节点有 前序  算法节点
          this.$nextTick(() => {
            this.$refs.outputNodeConfig.init(
              cell,
              cell.getData(),
              cell.getData().sourcealgocell.getData(),
              this.workflowName,
              this.workflowStatus
            );
          });
        } else {
          this.$nextTick(() => {
            this.$refs.outputNodeConfig.init1(
              cell,
              cell.getData(),
              this.workflowName
            );
          });
        }
      }else if (cell.shape == "template-csvselect") {
        // console.log(cell.getData());
        // console.log(this.workflowName);
        // console.log(cell.id);
        this.$nextTick(() => {
          this.csvselectNodeConVisible = true;
          this.nodeConfigVisi = false;
          this.conNodeConfigVisi = false;
          this.experimentVisi = false;
          this.$refs.csvselectNodeConfig.init1(
            cell.getData(),cell
          );
      
          // if (this.$refs.newNodeConfig) {
          //   // console.log("出现了");
          //   this.$refs.newNodeConfig.init1(cell.getData(), cell);
          // }
        });
      }
    });

    //20211008   blank 画布空白区域
    graph.on("blank:click", ({ e, x, y }) => {
      // reset();
      // node.attr("body/stroke", "orange");
      console.log("单击空白区域成功");
      this.$nextTick(() => {
        this.conNodeConfigVisi = false;
        this.experimentVisi = true;
        this.nodeConfigVisi = false;
        this.csvselectNodeConVisible = false;
        this.$refs.experConfig.init();
        // this.visible = true;
        // this.$refs.experConfig.init();
      });
    });

    //双击节点    弹窗
    // graph.on("cell:dblclick", ({ e, cell, view }) => {
    //   //条件节点
    //   if (cell.shape == "polygon") {

    //     // this.newConWatchVisible = true;
    //     this.$nextTick(() => {
    //       this.newConWatchVisible = true;
    //       this.$refs.newConWatch.init(
    //         cell.getData().sourcedatalist,
    //         cell.getData().inputcondition
    //       );
    //     });
    //     console.log("双击成功");
    //   }
    //   //普通rect节点
    // });
    //20210730
    //边发生连接    条件节点
    graph.on(
      "edge:connected",
      ({ isNew, edge, previousCell, previousPort, currentCell }) => {
        if (isNew) {
          // 对新创建的边进行插入数据库等持久化操作
          console.log("新建边：" + edge.id);
          const source = edge.getSourceCell();
          // console.log(edge);
          // console.log(edge.getSourceCell());
          // console.log(edge.getTargetCell());
          // console.log(currentCell);
          //添加任意一条边后，都需要获取源节点的输出参数列表，并将其写入到目标节点中
          //源节点为 rect，目标节点为rect
          if (
            source.shape == "template-node" &&
            currentCell.shape == "template-node"
          ) {
            //20211118
            var salgonodeSource = currentCell.getData().algonodeSource;
            var flag = 0;
            for (var i = 0; i < salgonodeSource.length; i++) {
              // if (salgonodeSource[i].cellId == source.cellId) {
              //   flag = 1;
              // }
              if (salgonodeSource[i].id == source.id) {
                flag = 1;
              }
            }
            console.log("flag " + flag);
            if (flag == 0) {
              currentCell.setData({
                algonodeSource: salgonodeSource.concat(source),
              });
            }
            console.log(currentCell.getData().algonodeSource);

            //20210922   更改并保存    注释
            // const sourcedata = source.getData();
            // currentCell.setData({
            //   sourcedatalist: sourcedata.outputsparameters,
            // });
            // //此处已更改

            // console.log("源节点为 template-node，目标节点为template-node");
            // console.log(edge.shape);
            // //仅为传递到  节点参数设置栏便于展示
            // //20210819   是否可以根据    nodeConfigVisi  来选择是否刷新
            // this.$nextTick(() => {
            //   // this.nodeConfigVisi = true;
            //   // this.conNodeConfigVisi = false;
            //   // this.experimentVisi = false;
            //   this.$refs.newNodeConfig.changeSourcedata(
            //     currentCell.getData(),
            //     currentCell
            //   );
            // });
            // console.log(
            //   "源节点为 template-node，目标节点为template-node   222"
            // );
            // const sourcedata = source.getData();

            // var soutputsparameters = sourcedata.outputsparameters;
            // var soutputsartifacts = sourcedata.outputsartifacts;
            // for (var i = 0; i < soutputsparameters.length; i++) {
            //   soutputsparameters[i].from =
            //     "{{tasks." +
            //     sourcedata.nodeName +
            //     ".outputs.parameters." +
            //     soutputsparameters[i].name +
            //     "}}";
            // }
            // for (var i = 0; i < soutputsartifacts.length; i++) {
            //   soutputsartifacts[i].from =
            //     "{{tasks." +
            //     sourcedata.nodeName +
            //     ".outputs.artifacts." +
            //     soutputsartifacts[i].name +
            //     "}}";
            // }
            // console.log("soutputsparameters,soutputsartifacts");
            // console.log(soutputsparameters);
            // console.log(soutputsartifacts);

            // //添加数据的方式   ---追加
            // //var newArr = arr.concat(arr2); concat()方法生成了一个新的数组，并不改变原来的数组。
            // const currsourcedatalist = currentCell.getData().sourcedatalist;
            // const currsourceartilist = currentCell.getData().sourceartilist;

            // currentCell.setData({
            //   sourcedatalist: currsourcedatalist.concat(soutputsparameters),
            //   sourceartilist: currsourceartilist.concat(soutputsartifacts),
            // });

            //此处已更改

            console.log("源节点为 template-node，目标节点为template-node");
            console.log(edge.shape);
            //仅为传递到  节点参数设置栏便于展示
            //20210819   是否可以根据    nodeConfigVisi  来选择是否刷新
            this.$nextTick(() => {
              // this.nodeConfigVisi = true;
              // this.conNodeConfigVisi = false;
              // this.experimentVisi = false;
              this.$refs.newNodeConfig.changeSourcedata(
                currentCell.getData(),
                currentCell
              );
            });
          }
          //源节点为 rect，目标节点为 polygon
          if (
            source.shape == "template-node" &&
            currentCell.shape == "polygon"
          ) {
            const sourcedata = source.getData();
            // currentCell.setData({
            //   sourcedatalist: sourcedata.outputsparameters,
            // });
            var soutputsparameters = sourcedata.outputsparameters;
            var soutputsartifacts = sourcedata.outputsartifacts;
            for (var i = 0; i < soutputsparameters.length; i++) {
              soutputsparameters[i].from =
                "{{tasks." +
                sourcedata.nodeName +
                ".outputs.parameters." +
                soutputsparameters[i].paraname +
                "}}";
            }
            for (var i = 0; i < soutputsartifacts.length; i++) {
              soutputsartifacts[i].from =
                "{{tasks." +
                sourcedata.nodeName +
                ".outputs.partifacts." +
                soutputsartifacts[i].paraname +
                "}}";
            }

            currentCell.setData({
              sourcedatalist: currentCell
                .getData()
                .sourcedatalist.concat(soutputsparameters),
            });
            currentCell.setData({
              sourceartilist: currentCell
                .getData()
                .sourceartilist.concat(soutputsartifacts),
            });

            // console.log(currentCell.getData());
            // console.log("源节点为 template-node，目标节点为polygon");
            this.$nextTick(() => {
              // this.nodeConfigVisi = true;
              // this.conNodeConfigVisi = false;
              // this.experimentVisi = false;
              this.$refs.newConNodeConfig.changeSourcedata(
                currentCell.getData(),
                currentCell
              );
            });
            // console.log("源节点为 template-node，目标节点为polygon");
          }

          //源节点为 polygon，目标节点为 polygon
          //20210802   此处进行条件节点连接条件节点   ，改变目标节点的条件，与原条件进行  &&  。可先进行判断目标节点的条件是否为空，若为空，直接复制，若不为空   ，则&&
          //取反等   均为字符串拼接
          //那么在用户输入条件语句时，也要判断节点条件是否为空，若为空，赋值，若不为空，&&

          //源节点为 polygon
          if (source.shape == "polygon") {
            //边的起始节点类型为条件节点
            if (edge.source.port == "righttrue") {
              // if(edge.getSourcePortId=="righttrue"){
              // source.data("truetargetid",currentCell.id);
              //20210730  zhang 赋值成功
              source.setData({ truetargetid: currentCell.id });
              //还需确定删除连接边之后 回复空值
            } else if (edge.source.port == "bottomfalse") {
              //边的目标节点为条件节点
              source.setData({ falsetargetid: currentCell.id });
            }
          }
          //如果源节点为输入节点，目的节点为 算法节点
          if (
            source.shape == "template-input" &&
            currentCell.shape == "template-node"
          ) {
            console.log("源节点为 template-input，目标节点为template-node");
            console.log(edge.shape);
            //仅为传递到  节点参数设置栏便于展示
            //20210819   是否可以根据    nodeConfigVisi  来选择是否刷新
            console.log(source);
            console.log(source.allfilemap);
            // currentCell.setData({inputnodefilemap:source.getData().allfilemap});
            this.$nextTick(() => {
              // this.nodeConfigVisi = true;
              // this.conNodeConfigVisi = false;
              // this.experimentVisi = false;
              this.$refs.newNodeConfig.changeinputnodemap(
                currentCell.getData(),
                currentCell,
                source.getData().allfilemap
              );
            });
          }
          //如果源节点为算法节点，目的节点为输入节点
          if (
            source.shape == "template-node" &&
            currentCell.shape == "template-output"
          ) {
            console.log("源节点为 template-node，目标节点为template-output");
            var curcelldata = currentCell.getData();
            curcelldata.sourcealgocell = source;
            this.graph.getCellById(currentCell.id).setData(curcelldata);
            this.$nextTick(() => {
              // this.nodeConfigVisi = true;
              // this.conNodeConfigVisi = false;
              // this.experimentVisi = false;
              this.$refs.outputNodeConfig.changeoutputsourcealgo(
                currentCell,
                currentCell.getData(),
                source,
                source.getData()
              );
            });
          }

          //如果源节点为输入节点，目的节点为CSV转换节点
          if (
            source.shape == "template-input" &&
            currentCell.shape == "template-csvselect"
          ) {
            console.log("源节点为 template-input，目标节点为template-csvselect");
            console.log(edge.shape);
            //仅为传递到  节点参数设置栏便于展示
            //20210819   是否可以根据    nodeConfigVisi  来选择是否刷新
            console.log(source);
            console.log(source.allfilemap);
            // currentCell.setData({inputnodefilemap:source.getData().allfilemap});
            this.$nextTick(() => {
              // this.nodeConfigVisi = true;
              // this.conNodeConfigVisi = false;
              // this.experimentVisi = false;
              this.$refs.csvselectNodeConfig.changeinputnodemap(
                currentCell.getData(),
                currentCell,
                source.getData().allfilemap

              );
              //待更改0722
            });
          }

          //如果源节点为输入节点，目的节点为 算法节点
          if (
            source.shape == "template-csvselect" &&
            currentCell.shape == "template-node"
          ) {
            console.log("源节点为 template-csvselect，目标节点为template-node");
            console.log(edge.shape);
            //仅为传递到  节点参数设置栏便于展示
            //20210819   是否可以根据    nodeConfigVisi  来选择是否刷新
            console.log(source);
            console.log(source.allfilemap);
            // currentCell.setData({inputnodefilemap:source.getData().allfilemap});
            this.$nextTick(() => {
              // this.nodeConfigVisi = true;
              // this.conNodeConfigVisi = false;
              // this.experimentVisi = false;
              this.$refs.newNodeConfig.changeinputnodemap(
                currentCell.getData(),
                currentCell,
                source.getData().allfilemap
              );
            });
          }
        }
      }
    );

    //依据条件判断的     赋值修改操作
    //20210922
    //边被移除    -----?
    graph.on(
      "edge:removed",
      ({ edge, previousCell, previousPort, currentCell, index }) => {
        console.log("edge:removed");

        // //20210923    将edge.getSourceCell() 以及previousCell 替换为edge.source,将currentCell替换为edge.target
        // //20210923     edge.source以及edge.target获取到的cell 并非为template-node 类型节点，修改为先回去源及目标节点Id,根据节点Id获取节点信息
        // //previousCell, currentCell    均为undefined
        // //edge.getSourceCell()  以及   edge.getTargetCell()   均为null
        // // console.log(previousCell);//undefined
        // // const source = edge.getSourceCell();
        // // const source = edge.source;
        // // const target = edge.target;
        // const sourceId = edge.getSourceCellId();
        // const source = graph.getCellById(sourceId);
        // const cellId = edge.getTargetCellId();
        // const target = graph.getCellById(cellId);

        // console.log(edge.source);
        // console.log(source.shape);
        // console.log(target.shape);
        // //删除边时，获取源节点的输出参数列表，匹配目标节点的sourcedatalist及sourceartilist

        // //源节点为 rect，目标节点为rect
        // if (
        //   source.shape == "template-node" &&
        //   target.shape == "template-node"
        // ) {
        //   const sourcedata = source.getData();
        //   //获取目标节点当前   sourcedatalist及sourceartilist
        //   var targetsourpara = target.getData().sourcedatalist;
        //   var targetsourarti = target.getData().sourceartilist;
        //   //获取源节点的输出参数outputsparameters   outputsartifacts
        //   const soutputsparameters = sourcedata.outputsparameters;
        //   const soutputsartifacts = sourcedata.outputsartifacts;
        //   //遍历源节点的输出参数，在目标节点的   中删除对应的参数
        //   for (var i = 0; i < soutputsparameters.length; i++) {
        //     let strfrom =
        //       "{{tasks." +
        //       sourcedata.nodeName +
        //       ".outputs.parameters." +
        //       soutputsparameters[i].name +
        //       "}}";
        //     //acData.find(x => x.sid == id);
        //     let index = targetsourpara.find((item) => item.from === strfrom);
        //     targetsourpara.splice(index, 1);
        //   }
        //   for (var i = 0; i < soutputsartifacts.length; i++) {
        //     let strfrom =
        //       "{{tasks." +
        //       sourcedata.nodeName +
        //       ".outputs.partifacts." +
        //       soutputsartifacts[i].name +
        //       "}}";
        //     let index = targetsourarti.find((item) => item.from === strfrom);
        //     targetsourarti.splice(index, 1);
        //   }

        //   target.setData({
        //     sourcedatalist: targetsourpara,
        //     sourceartilist: targetsourarti,
        //   });

        //   //此处已更改

        //   console.log("源节点为 template-node，目标节点为template-node");
        //   console.log(edge.shape);
        //   //仅为传递到  节点参数设置栏便于展示
        //   //20210819   是否可以根据    nodeConfigVisi  来选择是否刷新
        //   this.$nextTick(() => {
        //     // this.nodeConfigVisi = true;
        //     // this.conNodeConfigVisi = false;
        //     // this.experimentVisi = false;
        //     this.$refs.newNodeConfig.changeSourcedata(target.getData(), target);
        //   });
        //   console.log("源节点为 template-node，目标节点为template-node   222");
        // }
        // //源节点为 rect，目标节点为 polygon
        // if (source.shape == "template-node" && target.shape == "polygon") {
        //   console.log("源节点为 rect，目标节点为 polygon");
        //   const sourcedata = source.getData();
        //   //获取目标节点当前   sourcedatalist及sourceartilist
        //   var targetsourpara = target.getData().sourcedatalist;
        //   var targetsourarti = target.getData().sourceartilist;
        //   //获取源节点的输出参数outputsparameters   outputsartifacts
        //   const soutputsparameters = sourcedata.outputsparameters;
        //   const soutputsartifacts = sourcedata.outputsartifacts;
        //   //遍历源节点的输出参数，在目标节点的   中删除对应的参数
        //   for (var i = 0; i < soutputsparameters.length; i++) {
        //     let strfrom =
        //       "{{tasks." +
        //       sourcedata.nodeName +
        //       ".outputs.parameters." +
        //       soutputsparameters[i].name +
        //       "}}";
        //     //acData.find(x => x.sid == id);
        //     console.log("strfrom:" + strfrom);
        //     let index = targetsourpara.find((item) => item.from === strfrom);
        //     console.log("index" + index);
        //     targetsourpara.splice(index, 1);
        //   }
        //   for (var i = 0; i < soutputsartifacts.length; i++) {
        //     let strfrom =
        //       "{{tasks." +
        //       sourcedata.nodeName +
        //       ".outputs.partifacts." +
        //       soutputsartifacts[i].name +
        //       "}}";
        //     console.log("strfrom:" + strfrom);
        //     // let index = targetsourarti.find(item => item.from == strfrom);
        //     let index = targetsourarti.findIndex(
        //       (item) => item.from == strfrom
        //     );
        //     console.log("index");
        //     console.log(index);
        //     console.log(targetsourarti);
        //     targetsourarti.splice(index, 1);
        //   }

        //   target.setData({
        //     sourcedatalist: targetsourpara,
        //     sourceartilist: targetsourarti,
        //   });

        //   console.log(target.getData());
        //   console.log("源节点为 template-node，目标节点为polygon");
        //   this.$nextTick(() => {
        //     // this.nodeConfigVisi = true;
        //     // this.conNodeConfigVisi = false;
        //     // this.experimentVisi = false;
        //     this.$refs.newConNodeConfig.changeSourcedata(
        //       target.getData(),
        //       target
        //     );
        //   });
        //   console.log("源节点为 template-node，目标节点为polygon");
        // }

        // //源节点为 polygon，目标节点为 polygon
        // //20210802   此处进行条件节点连接条件节点   ，改变目标节点的条件，与原条件进行  &&  。可先进行判断目标节点的条件是否为空，若为空，直接复制，若不为空   ，则&&
        // //取反等   均为字符串拼接
        // //那么在用户输入条件语句时，也要判断节点条件是否为空，若为空，赋值，若不为空，&&

        // //源节点为 polygon
        // if (source.shape == "polygon") {
        //   //边的起始节点类型为条件节点
        //   if (edge.source.port == "righttrue") {
        //     // if(edge.getSourcePortId=="righttrue"){
        //     // source.data("truetargetid",currentCell.id);
        //     //20210730  zhang 赋值成功
        //     source.setData({ truetargetid: target.id });
        //     //还需确定删除连接边之后 回复空值
        //   } else if (edge.source.port == "bottomfalse") {
        //     //边的目标节点为条件节点
        //     source.setData({ falsetargetid: target.id });
        //   }
        // }
      }
    );
    //20210803   边    可删
    Graph.registerConnector(
      "curve",
      (sourcePoint, targetPoint) => {
        const path = new Path();
        path.appendSegment(Path.createSegment("M", sourcePoint));
        path.appendSegment(
          Path.createSegment(
            "C",
            sourcePoint.x,
            sourcePoint.y + 180,
            targetPoint.x,
            targetPoint.y - 180,
            targetPoint.x,
            targetPoint.y
          )
        );
        return path.serialize();
      },
      true
    );

    //20210715 zhang    该圆角矩形大小  及颜色合适
    const rect1 = new Shape.Rect({
      id: "node3",
      x: 60,
      y: 60,
      width: 140,
      height: 40,
      label: "rect",
      zIndex: 3,
      data: {
        templateName: "echo1",
        templateImage: "alpine:3.7",
        templateCommand: {
          1: "echo",
          2: "{{inputs.parameters.message}}",
          // 2:"\"{{inputs.parameters.message}}\""
        },
        //不确定命令暂时用哪种方式     如果添加属性的话哪一种好添加    ; 考虑动态添加属性和值，此处key为何值都行，主要是value较为重要
        // templateCommand2: [
        //   {
        //     1:"echo"
        //   },
        //   {
        //     2:"{{inputs.parameters.message}}"
        //   },
        // ],
        templateArgs: {
          // 1: "echo",
        },
        inputsparameters: [
          //此container 需要输入的参数，固定
          {
            name: "message",
          },
        ],
        argumentsparameters: [
          //调用container(该template)输入的参数，后续会变(根据输入弹窗变)
          {
            name: "message",
            value: "A",
          },
        ],
        outputsparameters: [
          //此container 输出的参数，固定
          {
            name: "message",
          },
          {
            name: "message1",
          },
        ],
      },
      markup: [
        {
          tagName: "rect",
          selector: "body",
        },
        {
          tagName: "text",
          selector: "label",
        },
        {
          tagName: "g",
          children: [
            {
              tagName: "text",
              selector: "btnText",
            },
            {
              tagName: "rect",
              selector: "btn",
            },
          ],
        },
      ],
      attrs: {
        body: {
          fill: "#ffffff",
          // stroke: '#5dc3fd',
          stroke: "#5dc3fd",
          rx: 16,
          ry: 16,
        },
        //20210729   删除功能
        btn: {
          refX: "100%",
          refX2: -28,
          // y: 4,
          width: 24,
          height: 18,
          rx: 10,
          ry: 10,
          fill: "rgba(255,255,0,0.01)",
          stroke: "red",
          cursor: "pointer",
          event: "node:delete",
        },
        btnText: {
          fontSize: 14,
          fill: "red",
          text: "x",
          refX: "100%",
          refX2: -19,
          // y: 17,
          cursor: "pointer",
          pointerEvent: "none",
        },
        label: {
          text: "World",
          fill: "#333",
          fontSize: 18,
          fontWeight: "bold",
          fontVariant: "small-caps",
        },
      },
      ports: {
        groups: {
          // 输入链接桩群组定义
          in: {
            position: "left",
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#31d0c6",
                strokeWidth: 2,
                fill: "#fff",
              },
            },
          },
          // 输出链接桩群组定义
          out: {
            position: "right",
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#31d0c6",
                strokeWidth: 2,
                fill: "#fff",
              },
            },
          },
        },
        items: [
          {
            id: "port1",
            group: "in",
          },
          {
            id: "port2",
            group: "out",
          },
        ],
      },
    });
    const condition = new Shape.Polygon({
      width: 120,
      height: 120,
      attrs: {
        text: { text: "条件节点", fill: "condition" },
        body: {
          // fill: "#b6e3e7",
          stroke: "#b6e3e7",
          refPoints: "0,10 10,0 20,10 10,20",
          // refY: 0.3,
        },
        label: {
          fontSize: 16,
          fill: "#333",
          fontWeight: 800,
          // refY: 0.8,
        },
      },
      data: {
        nodeName: "condition1",
        truetargetid: "",
        falsetargetid: "",
        inputcondition: "true",
        sourcedatalist: [
          // {
          //   name: "source1",
          //   from: "",
          // },
          // {
          //   name: "source2",
          //   from: "",
          // },
        ],
        sourceartilist: [
          // {
          //   name: "source1",
          //   from: "",
          // },
          // {
          //   name: "source2",
          //   from: "",
          // },
        ],
      },
      ports: {
        groups: {
          in: {
            position: "top",
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 2,
                fill: "#fff",
                // style: {
                //   visibility: "hidden",
                // },
              },
            },
          },
          right: {
            position: "right",
            label: {
              position: "top",
            },
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 2,
                fill: "#fff",
                // style: {
                //   visibility: "hidden",
                // },
              },
            },
          },
          bottom: {
            position: "bottom",
            label: {
              position: "right",
            },
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 2,
                fill: "#fff",
                // style: {
                //   visibility: "hidden",
                // },
              },
            },
          },
          left: {
            position: "left",
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 2,
                fill: "#fff",
                // style: {
                //   visibility: "hidden",
                // },
              },
            },
          },
        },
        items: [
          {
            //通过id辨别
            group: "in",
          },
          {
            id: "righttrue",
            group: "right",
            attrs: {
              text: { text: "是" },
            },
          },
          {
            id: "bottomfalse",
            group: "bottom",
            attrs: {
              text: { text: "否" },
            },
          },
          {
            group: "left",
          },
        ],
      },
    });
    //条件节点
    const conditionnode = new Shape.Polygon({
      width: 80,
      height: 80,
      attrs: {
        text: { text: "条件节点", fill: "condition" },
        body: {
          // fill: "#b6e3e7",
          stroke: "#b6e3e7",
          refPoints: "0,10 10,0 20,10 10,20",
          // refY: 0.3,
        },
        label: {
          text: "条件节点",
          fontSize: 8,
          fill: "#333",
          fontWeight: 800,
          // refY: 0.8,
        },
      },
      data: {
        truetargetid: "",
        falsetargetid: "",
        inputcondition: "true",
        sourcedatalist: [
          {
            // name: "source1",
            // from: "",
          },
        ],
        sourceartilist: [
          {
            // name: "source1",
            // from: "",
          },
        ],
      },
      ports: {
        groups: {
          in: {
            position: "top",
            attrs: {
              circle: {
                r: 2,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 2,
                fill: "#fff",
                // style: {
                //   visibility: "hidden",
                // },
              },
            },
          },
          out: {
            position: "right",
            label: {
              position: "top",
            },
            attrs: {
              circle: {
                r: 2,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 2,
                fill: "#fff",
                // style: {
                //   visibility: "hidden",
                // },
              },
            },
          },
          out1: {
            position: "bottom",
            label: {
              position: "right",
            },
            attrs: {
              circle: {
                r: 2,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 2,
                fill: "#fff",
                // style: {
                //   visibility: "hidden",
                // },
              },
            },
          },
          left: {
            position: "left",
            attrs: {
              circle: {
                r: 2,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 2,
                fill: "#fff",
                // style: {
                //   visibility: "hidden",
                // },
              },
            },
          },
        },
        items: [
          {
            //通过id辨别
            id: "top",
            group: "in",
          },
          {
            id: "righttrue",
            group: "out",
            attrs: {
              text: { text: "是" },
            },
          },
          {
            id: "bottomfalse",
            group: "out1",
            attrs: {
              text: { text: "否" },
            },
          },
          {
            group: "left",
          },
        ],
      },
    });
    this.nodedata.push(conditionnode);

    //20210727 zhang 自定義中文
    // Graph.registerNode("selectnode", Rect);

    // //20211012  注释
    // ///20210720   zhang   左侧ui栏及拖拽  -----已变为左侧组件点击后画布生成
    // const stencil = new Addon.Stencil({
    //   title: "组件库",
    //   target: graph,
    //   search(cell, keyword) {
    //     return cell.shape.indexOf(keyword) !== -1;
    //   },
    //   placeholder: "Search by shape name",
    //   notFoundText: "Not Found",
    //   collapsable: true,
    //   stencilGraphWidth: 240,
    //   stencilGraphHeight: 600,
    //   layoutOptions: {
    //     columns: 1,
    //     center: true,
    //     dx: 30,
    //     dy: 5,
    //   },
    //   groups: [
    //     {
    //       name: "group1",
    //       title: "分类1",
    //     },
    //     {
    //       name: "group2",
    //       title: "分类2",
    //       // collapsable: false,
    //     },
    //   ],
    // });
    // this.$refs.stencilContainer.appendChild(stencil.container);

    //20210907   zhang    左侧组件栏设置节点信息     从数据库读入时需要设置节点包含的相关pod 信息
    // stencil.load([c2.clone(), r2, r3, c3], "group2");
    // //20211012 注释
    // stencil.load(
    //   [
    //     cellz3,
    //     generate_artifact,
    //     consume_artifact,
    //     cellz3.clone(),
    //     cellz3.clone(),
    //   ],
    //   "group1"
    // );
    // stencil.load(
    //   [
    //     cellz3.clone(),
    //     cellz3.clone(),
    //     cellz3.clone(),
    //     cellz3.clone(),
    //     cellz3.clone(),
    //     condition,
    //   ],
    //   "group2"
    // );
    // stencil.load([c2.clone(), r2, r3, c3, c3.clone()], "group2");

    // stencil.load([c2.clone(), r2, r3, c3], "group2");

    //创建节点
    const consume_artifact = this.graph.createNode({
      // width: 170,
      // height: 30,
      shape: "template-node",
      // label: "consume_artifact",

      attrs: {
        label: {
          text: "consume_artifact",
        },
        body: {
          // stroke: "#2CB9FF",
          // fill: "#2CB9FF",
          fill: "#d3ebf3",
        },
        // body: {
        //   stroke: "#DA2625",
        //   fill: "#DA2625",
        // },
        image: {
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
          // "xlink:href":  "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg",
          //可放图标
        },
      },
      data: {
        nodeName: "zhang_consume_artifac",
        templateName: "print-message",
        templateImage: "alpine:latest",
        templateCommand: {
          1: "sh",
          2: "-c",
          // 2:"\"{{inputs.parameters.message}}\""
        },
        //不确定命令暂时用哪种方式     如果添加属性的话哪一种好添加    ; 考虑动态添加属性和值，此处key为何值都行，主要是value较为重要
        // templateCommand2: [
        //   {
        //     1:"echo"
        //   },
        //   {
        //     2:"{{inputs.parameters.message}}"
        //   },
        // ],
        templateArgs: {
          1: "cat /tmp/message",
        },
        inputsparameters: [],
        inputsartifacts: [
          //此container 需要输入的参数，固定
          {
            name: "message",
            path: "/tmp/message",
          },
        ],
        //20210916    argument(parameters以及arguments)均 应是在调用的过程中填写具体值
        //应对应input中的各项参数设置对应参数
        argumentsparameters: [],
        argumentsartifacts: [
          //调用container(该template)输入的参数，后续会变(根据输入弹窗变)
          {
            name: "message",
            valuefrom: "{{tasks.whalesay.outputs.artifacts.hello-art}}",
          },
        ],

        outputsparameters: [],

        outputsartifacts: [],
        //获取到的连接线源的数据      连接线的源的输出数据
        sourcedatalist: [
          // {
          //   name: "source1",
          // },
          // {
          //   name: "source2",
          // },
        ],
        inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
        inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
      },
    });

    // cellz4.setData({ templateName: "zhang" });
    const generate_artifact = graph.createNode({
      // width: 170,
      // height: 30,
      shape: "template-node",
      attrs: {
        label: {
          text: "generate_artifact",
        },
        image: {
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
        },
      },
      data: {
        nodeName: "zhang_generate_artifact",
        templateName: "whalesay",
        templateImage: "docker/whalesay:latest",
        templateCommand: {
          1: "sh",
          2: "-c",
          // 2:"\"{{inputs.parameters.message}}\""
        },
        //不确定命令暂时用哪种方式     如果添加属性的话哪一种好添加    ; 考虑动态添加属性和值，此处key为何值都行，主要是value较为重要
        // templateCommand2: [
        //   {
        //     1:"echo"
        //   },
        //   {
        //     2:"{{inputs.parameters.message}}"
        //   },
        // ],
        templateArgs: {
          1: "sleep 1; cowsay hello world | tee /tmp/hello_world.txt",
        },
        inputsparameters: [],
        inputsartifacts: [],
        //20210916    argument(parameters以及arguments)均 应是在调用的过程中填写具体值
        //应对应input中的各项参数设置对应参数
        argumentsparameters: [],
        argumentsartifacts: [],

        outputsparameters: [],

        outputsartifacts: [
          //此container 输出的参数，固定
          {
            name: "hello-art",
            path: "/tmp/hello_world.txt",
          },
        ],
        //获取到的连接线源的数据      连接线的源的输出数据
        sourcedatalist: [
          // {
          //   name: "source1",
          // },
          // {
          //   name: "source2",
          // },
        ],
        inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
        inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
      },
    });

    // 轮廓识别代码示例，需重新更改节点数据格式
    const zdocker_test = this.graph.createNode({
      // width: 170,
      // height: 30,
      shape: "template-node",
      // label: "consume_artifact",

      attrs: {
        label: {
          text: "zdockertest",
        },
        body: {
          // stroke: "#2CB9FF",
          // fill: "#2CB9FF",
          fill: "#d3ebf3",
        },
        // body: {
        //   stroke: "#DA2625",
        //   fill: "#DA2625",
        // },
        image: {
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
          // "xlink:href":  "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg",
          //可放图标
        },
      },
      data: {
        nodeName: "zdockertest",
        templateName: "print-message",
        templateImage: "zvinjodocker/zdockertest1:20211011",
        templateCommand: {
          // 1: "sh",
          // 2: "-c",
          // 2:"\"{{inputs.parameters.message}}\""
        },
        //不确定命令暂时用哪种方式     如果添加属性的话哪一种好添加    ; 考虑动态添加属性和值，此处key为何值都行，主要是value较为重要
        // templateCommand2: [
        //   {
        //     1:"echo"
        //   },
        //   {
        //     2:"{{inputs.parameters.message}}"
        //   },
        // ],
        templateArgs: {
          // 1: "cat /tmp/message",
        },
        inputsparameters: [],
        inputsartifacts: [
          //此container 需要输入的参数，固定
          // {
          //   name: "message",
          //   path: "/tmp/message",
          // },
        ],
        //20210916    argument(parameters以及arguments)均 应是在调用的过程中填写具体值
        //应对应input中的各项参数设置对应参数
        argumentsparameters: [],
        argumentsartifacts: [
          //调用container(该template)输入的参数，后续会变(根据输入弹窗变)
          // {
          //   name: "message",
          //   valuefrom: "{{tasks.whalesay.outputs.artifacts.hello-art}}",
          // },
        ],

        outputsparameters: [],

        outputsartifacts: [],
        //获取到的连接线源的数据      连接线的源的输出数据
        sourcedatalist: [
          // {
          //   name: "source1",
          // },
          // {
          //   name: "source2",
          // },
        ],
        inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
        inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
      },
    });

    const contourTask1 = this.graph.createNode({
      // width: 170,
      // height: 30,
      shape: "template-node",
      // label: "consume_artifact",

      attrs: {
        label: {
          text: "contourTask1",
        },
        body: {
          // stroke: "#2CB9FF",
          // fill: "#2CB9FF",
          fill: "#d3ebf3",
        },
        // body: {
        //   stroke: "#DA2625",
        //   fill: "#DA2625",
        // },
        image: {
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
          // "xlink:href":  "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg",
          //可放图标
        },
      },
      data: {
        nodeName: "contourTask1",
        templateName: "contourTask1",
        templateImage: "zvinjodocker/contous_task1:20211014",
        templateCommand: {
          // 1: "sh",
          // 2: "-c",
          // 2:"\"{{inputs.parameters.message}}\""
        },
        //不确定命令暂时用哪种方式     如果添加属性的话哪一种好添加    ; 考虑动态添加属性和值，此处key为何值都行，主要是value较为重要
        // templateCommand2: [
        //   {
        //     1:"echo"
        //   },
        //   {
        //     2:"{{inputs.parameters.message}}"
        //   },
        // ],
        templateArgs: {
          // 1: "cat /tmp/message",
        },
        inputsparameters: [],
        inputsartifacts: [
          //此container 需要输入的参数，固定
          // {
          //   name: "message",
          //   path: "/tmp/message",
          // },
        ],
        //20210916    argument(parameters以及arguments)均 应是在调用的过程中填写具体值
        //应对应input中的各项参数设置对应参数
        argumentsparameters: [],
        argumentsartifacts: [
          //调用container(该template)输入的参数，后续会变(根据输入弹窗变)
          // {
          //   name: "message",
          //   valuefrom: "{{tasks.whalesay.outputs.artifacts.hello-art}}",
          // },
        ],

        outputsparameters: [],

        outputsartifacts: [
          {
            paraname: "thresh",
            paradesc: "",
            paratype: "",
            // path: "/myapps/thresh1.png",
            valuefrom: "/myapps/thresh1.png",
          },
          {
            paraname: "contours",
            // path: "/myapps/contours.png",
            paradesc: "",
            paratype: "",
            valuefrom: "/myapps/contours.png",
          },
        ],
        //获取到的连接线源的数据      连接线的源的输出数据
        sourcedatalist: [
          // {
          //   name: "source1",
          // },
          // {
          //   name: "source2",
          // },
        ],
        inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
        inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
      },
    });
    const contourTask2 = this.graph.createNode({
      // width: 170,
      // height: 30,
      shape: "template-node",
      attrs: {
        label: {
          text: "contourTask2",
        },
        body: {
          // stroke: "#2CB9FF",
          // fill: "#2CB9FF",
          fill: "#d3ebf3",
        },
        image: {
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
          // "xlink:href":  "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg",
          //可放图标
        },
      },
      data: {
        nodeName: "contourTask2",
        templateName: "contourTask2",
        templateImage: "zvinjodocker/contours_task2:20211014",
        templateCommand: {},
        templateArgs: {},
        inputsparameters: [],
        inputsartifacts: [
          {
            paraname: "thresh",
            parapath: "/myapps/thresh1.png",
            paradesc: "",
          },
          {
            paraname: "contours",
            parapath: "/myapps/contours.png",
            paradesc: "",
          },
        ],
        //20210916    argument(parameters以及arguments)均 应是在调用的过程中填写具体值
        //应对应input中的各项参数设置对应参数
        argumentsparameters: [],
        argumentsartifacts: [
          {
            paraname: "thresh",
            valuefrom: "{{tasks.contourTask1.outputs.artifacts.thresh}}",
            fileurls: [],
          },
          {
            paraname: "contours",
            valuefrom: "{{tasks.contourTask1.outputs.artifacts.contours}}",
            fileurls: [],
          },
        ],
        outputsparameters: [],
        outputsartifacts: [
          {
            paraname: "contours0",
            // path: "/myapps/contours[0].npy",
            valuefrom: "/myapps/contours[0].npy",
            paradesc: "",
            paratype: "",
          },
          {
            paraname: "res",
            // path: "/myapps/res1.png",
            valuefrom: "/myapps/res1.png",
            paradesc: "",
            paratype: "",
          },
        ],
        //获取到的连接线源的数据      连接线的源的输出数据
        sourcedatalist: [],
        inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
        inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
      },
    });
    const contourTask3 = this.graph.createNode({
      // width: 170,
      // height: 30,
      shape: "template-node",
      // label: "consume_artifact",
      attrs: {
        label: {
          text: "contourTask3",
        },
        body: {
          // stroke: "#2CB9FF",
          // fill: "#2CB9FF",
          fill: "#d3ebf3",
        },
        image: {
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
          // "xlink:href":  "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg",
          //可放图标
        },
      },
      data: {
        nodeName: "contourTask3",
        templateName: "contourTask3",
        templateImage: "zvinjodocker/contours_task3:20211015",
        templateCommand: {},
        templateArgs: {},
        inputsparameters: [],
        inputsartifacts: [
          {
            paraname: "contours0",
            parapath: "/myapps/contours[0].npy",
            paradesc: "",
          },
        ],
        //20210916    argument(parameters以及arguments)均 应是在调用的过程中填写具体值
        //应对应input中的各项参数设置对应参数
        argumentsparameters: [],
        argumentsartifacts: [
          {
            paraname: "contours0",
            valuefrom: "{{tasks.contourTask2.outputs.artifacts.contours0}}",
            fileurls: [],
          },
        ],
        outputsparameters: [],
        outputsartifacts: [],
        //获取到的连接线源的数据      连接线的源的输出数据
        sourcedatalist: [],
        inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
        inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
      },
    });
    const contourApproximate1 = this.graph.createNode({
      // width: 170,
      // height: 30,
      shape: "template-node",
      // label: "consume_artifact",
      attrs: {
        label: {
          text: "contourApproximate1",
        },
        body: {
          // stroke: "#2CB9FF",
          // fill: "#2CB9FF",
          fill: "#d3ebf3",
        },
        image: {
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg",
          // "xlink:href":  "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg",
          //可放图标
        },
      },
      data: {
        nodeName: "contourApproximate1",
        templateName: "contourApproximate1",
        templateImage: "zvinjodocker/contour_approximate1:20211015",
        templateCommand: {},
        templateArgs: {},
        inputsparameters: [],
        inputsartifacts: [],
        //20210916    argument(parameters以及arguments)均 应是在调用的过程中填写具体值
        //应对应input中的各项参数设置对应参数
        argumentsparameters: [],
        argumentsartifacts: [],
        outputsparameters: [],
        outputsartifacts: [
          {
            paraname: "approxCnt",
            // path: "/myapps/approx_cnt.npy",
            valuefrom: "/myapps/approx_cnt.npy",
            paradesc: "",
            paratype: "",
          },
          {
            paraname: "approxRes",
            // path: "/myapps/approx_res.png",
            valuefrom: "/myapps/approx_res.png",
            paradesc: "",
            paratype: "",
          },
        ],
        //获取到的连接线源的数据      连接线的源的输出数据
        sourcedatalist: [],
        inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
        inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
      },
    });
    console.log("创建节点  contour_approximate1成功");
    const contourApproximate2 = this.graph.createNode({
      // width: 170,
      // height: 30,
      shape: "template-node",
      // label: "consume_artifact",

      attrs: {
        label: {
          text: "contourApproximate2",
        },
        body: {
          // stroke: "#2CB9FF",
          // fill: "#2CB9FF",
          fill: "#d3ebf3",
        },
        // body: {
        //   stroke: "#DA2625",
        //   fill: "#DA2625",
        // },
        image: {
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg",
          // "xlink:href":  "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg",
          //可放图标
        },
      },
      data: {
        nodeName: "contourApproximate2",
        templateName: "contourApproximate2",
        templateImage: "zvinjodocker/contour_approximate2:20211015",
        templateCommand: {
          // 1: "sh",
          // 2: "-c",
          // 2:"\"{{inputs.parameters.message}}\""
        },
        //不确定命令暂时用哪种方式     如果添加属性的话哪一种好添加    ; 考虑动态添加属性和值，此处key为何值都行，主要是value较为重要
        // templateCommand2: [
        //   {
        //     1:"echo"
        //   },
        //   {
        //     2:"{{inputs.parameters.message}}"
        //   },
        // ],
        templateArgs: {
          // 1: "cat /tmp/message",
        },
        inputsparameters: [],
        inputsartifacts: [
          //此container 需要输入的参数，固定
          // {
          //   name: "message",
          //   path: "/tmp/message",
          // },
          {
            paraname: "approxCnt",
            parapath: "/myapps/approx_cnt.npy",
            paradesc: "",
          },
        ],
        //20210916    argument(parameters以及arguments)均 应是在调用的过程中填写具体值
        //应对应input中的各项参数设置对应参数
        argumentsparameters: [],
        argumentsartifacts: [
          //调用container(该template)输入的参数，后续会变(根据输入弹窗变)
          // {
          //   name: "message",
          //   valuefrom: "{{tasks.whalesay.outputs.artifacts.hello-art}}",
          // },
          {
            paraname: "approxCnt",
            valuefrom:
              "{{tasks.contourApproximate1.outputs.artifacts.approxCnt}}",
            fileurls: [],
          },
        ],

        outputsparameters: [],

        outputsartifacts: [
          // {
          //   name: "thresh",
          //   path: "/myapps/thresh1.png",
          // },
          // {
          //   name: "contours",
          //   path: "/myapps/contours.png",
          // },
          {
            paraname: "approxRes2",
            // path: "/myapps/approx_res2.png",
            valuefrom: "/myapps/approx_res2.png",
            paradesc: "",
            paratype: "",
          },
        ],
        //获取到的连接线源的数据      连接线的源的输出数据
        sourcedatalist: [
          // {
          //   name: "source1",
          // },
          // {
          //   name: "source2",
          // },
        ],
        inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
        inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
      },
    });
    console.log("创建节点  contour_approximate2成功");
    const contourRect1 = this.graph.createNode({
      // width: 170,
      // height: 30,
      shape: "template-node",
      // label: "consume_artifact",

      attrs: {
        label: {
          text: "contourRect1",
        },
        body: {
          // stroke: "#2CB9FF",
          // fill: "#2CB9FF",
          fill: "#d3ebf3",
        },
        // body: {
        //   stroke: "#DA2625",
        //   fill: "#DA2625",
        // },
        image: {
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg",
          // "xlink:href":  "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg",
          //可放图标
        },
      },
      data: {
        nodeName: "contourRect1",
        templateName: "contourRect1",
        templateImage: "zvinjodocker/contours_rect1:20211015",
        templateCommand: {
          // 1: "sh",
          // 2: "-c",
          // 2:"\"{{inputs.parameters.message}}\""
        },
        //不确定命令暂时用哪种方式     如果添加属性的话哪一种好添加    ; 考虑动态添加属性和值，此处key为何值都行，主要是value较为重要
        // templateCommand2: [
        //   {
        //     1:"echo"
        //   },
        //   {
        //     2:"{{inputs.parameters.message}}"
        //   },
        // ],
        templateArgs: {
          // 1: "cat /tmp/message",
        },
        inputsparameters: [],
        inputsartifacts: [
          //此container 需要输入的参数，固定
          // {
          //   name: "message",
          //   path: "/tmp/message",
          // },
        ],
        //20210916    argument(parameters以及arguments)均 应是在调用的过程中填写具体值
        //应对应input中的各项参数设置对应参数
        argumentsparameters: [],
        argumentsartifacts: [
          //调用container(该template)输入的参数，后续会变(根据输入弹窗变)
          // {
          //   name: "message",
          //   valuefrom: "{{tasks.whalesay.outputs.artifacts.hello-art}}",
          // },
        ],

        outputsparameters: [],

        outputsartifacts: [
          // {
          //   name: "thresh",
          //   path: "/myapps/thresh1.png",
          // },
          // {
          //   name: "contours",
          //   path: "/myapps/contours.png",
          // },
          {
            paraname: "cnt",
            // path: "/myapps/contour_rect_cnt.npy",
            valuefrom: "/myapps/contour_rect_cnt.npy",
            paradesc: "",
            paratype: "",
          },
          {
            paraname: "contourRect",
            // path: "/myapps/contour_rect.png",
            valuefrom: "/myapps/contour_rect.png",
            paradesc: "",
            paratype: "",
          },
        ],
        //获取到的连接线源的数据      连接线的源的输出数据
        sourcedatalist: [
          // {
          //   name: "source1",
          // },
          // {
          //   name: "source2",
          // },
        ],
        inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
        inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
      },
    });
    console.log("创建节点  contour_rect1成功");
    const contourCircle2 = this.graph.createNode({
      // width: 170,
      // height: 30,
      shape: "template-node",
      // label: "consume_artifact",

      attrs: {
        label: {
          text: "contourCircle2",
        },
        body: {
          // stroke: "#2CB9FF",
          // fill: "#2CB9FF",
          fill: "#d3ebf3",
        },
        // body: {
        //   stroke: "#DA2625",
        //   fill: "#DA2625",
        // },
        image: {
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg",
          // "xlink:href":  "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logogetworkflowlog-with-text-73b8a.svg",
          //可放图标
        },
      },
      data: {
        nodeName: "contourCircle2",
        templateName: "contourCircle2",
        templateImage: "zvinjodocker/contours_circle2:20211015",
        templateCommand: {
          // 1: "sh",
          // 2: "-c",
          // 2:"\"{{inputs.parameters.message}}\""
        },
        //不确定命令暂时用哪种方式     如果添加属性的话哪一种好添加    ; 考虑动态添加属性和值，此处key为何值都行，主要是value较为重要
        // templateCommand2: [
        //   {
        //     1:"echo"
        //   },
        //   {
        //     2:"{{inputs.parameters.message}}"
        //   },
        // ],
        templateArgs: {
          // 1: "cat /tmp/message",
        },
        inputsparameters: [],
        inputsartifacts: [
          //此container 需要输入的参数，固定
          // {
          //   name: "message",
          //   path: "/tmp/message",
          // },
          {
            paraname: "contourRect",
            parapath: "/myapps/contour_rect.png",
            paradesc: "",
          },
          {
            paraname: "cnt",
            parapath: "/myapps/contour_rect_cnt.npy",
            paradesc: "",
          },
        ],
        //20210916    argument(parameters以及arguments)均 应是在调用的过程中填写具体值
        //应对应input中的各项参数设置对应参数
        argumentsparameters: [],
        argumentsartifacts: [
          //调用container(该template)输入的参数，后续会变(根据输入弹窗变)
          // {
          //   name: "message",
          //   valuefrom: "{{tasks.whalesay.outputs.artifacts.hello-art}}",
          // },
          {
            paraname: "contourRect",
            valuefrom: "{{tasks.contourRect1.outputs.artifacts.contourRect}}",
            fileurls: [],
          },
          {
            paraname: "cnt",
            valuefrom: "{{tasks.contourRect1.outputs.artifacts.cnt}}",
            fileurls: [],
          },
        ],

        outputsparameters: [],

        outputsartifacts: [
          // {
          //   name: "thresh",
          //   path: "/myapps/thresh1.png",
          // },
          // {
          //   name: "contours",
          //   path: "/myapps/contours.png",
          // },
          {
            paraname: "contourCircle",
            valuefrom: "contour_circle.png",
            // path: "contour_circle.png",
            paradesc: "",
            paratype: "",
          },
        ],
        //获取到的连接线源的数据      连接线的源的输出数据
        sourcedatalist: [
          // {
          //   name: "source1",
          // },
          // {
          //   name: "source2",
          // },
        ],
        inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
        inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
      },
    });
    // console.log("创建节点  contour_circle2成功");

    console.log("创建节点  algoinputnode");
    const dataInputnode = this.graph.createNode({
      // width: 170,
      // height: 30,
      shape: "template-input",
      // label: "consume_artifact",

      attrs: {
        label: {
          text: "dataInputnode",
        },
        body: {
          // stroke: "#2CB9FF",
          // fill: "#2CB9FF",
          fill: "#e2c3a0",
        },
        // body: {
        //   stroke: "#DA2625",
        //   fill: "#DA2625",
        // },
        image: {
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg",
          // "xlink:href":  "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg",
          //可放图标
        },
      },
      data: {
        nodeName: "dataInputnode",
        templateName: "dataInputnode",

        st_dataListvalue: [], //静态数据集选中 文件对应value
        dy_dataListvalue: [], //动态数据集选中  文件对应value
        fileList: [], //外部上传  文件
        allfilemap: null, //选中的文件对应的名称及url
      },
    });
    const dataOutputnode = this.graph.createNode({
      // width: 170,
      // height: 30,
      shape: "template-output",
      // label: "consume_artifact",

      attrs: {
        label: {
          text: "dataOutputnode",
        },
        body: {
          // stroke: "#2CB9FF",
          // fill: "#2CB9FF",
          fill: "#e2c3a0",
        },
        // body: {
        //   stroke: "#DA2625",
        //   fill: "#DA2625",
        // },
        image: {
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg",
          // "xlink:href":  "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg",
          //可放图标
        },
      },
      data: {
        nodeName: "dataOutputnode",
        templateName: "dataOutputnode",
        sourcealgocell: null, //输出节点的前一个节点的结果
      },
    });
    //创建CSV文件转换节点
    const CSVConversionnode = this.graph.createNode({
      // width: 170,
      // height: 30,
      shape: "template-csvselect",
      // label: "consume_artifact",

      attrs: {
        label: {
          text: "CSVConversionnode",
        },
        body: {
          // stroke: "#2CB9FF",
          // fill: "#2CB9FF",
          fill: "#e2c3a0",
        },
        // body: {
        //   stroke: "#DA2625",
        //   fill: "#DA2625",
        // },
        image: {
          "xlink:href":
            "https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg",
          // "xlink:href":  "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg",
          //可放图标
        },
      },
      data: {
        nodeName: "CSVConversionnode",
        templateName: "CSVConversionnode",
        inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
        inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
      },
    });
    //20211012  zhang
    console.log("nodedata");
    // console.log(this.nodedata)
    this.nodedata.push(consume_artifact);
    this.nodedata.push(generate_artifact);
    this.nodedata.push(zdocker_test);
    this.nodedata.push(contourTask1);
    this.nodedata.push(contourTask2);
    this.nodedata.push(contourTask3);
    this.nodedata.push(contourApproximate1);
    this.nodedata.push(contourApproximate2);
    this.nodedata.push(contourRect1);
    this.nodedata.push(contourCircle2);
    //数据输入 和 结果输出节点
    this.nodedata.push(dataInputnode);
    this.nodedata.push(dataOutputnode);
    this.nodedata.push(CSVConversionnode);
    console.log(this.nodedata);

    //设置布局左右可拖动
    let me = this;
    me.dragControllerDiv();
    console.log("yu");
  },
  methods: {
    initGraph(info) {
      //修改当前画布
      //查询画布数据，导入画布
      this.workflowId = info.workflowId;
      this.graph.fromJSON(JSON.parse(info.graphJson).cells);
      console.log("fromJson"+info.graphJson)
      
      
      console.log(JSON.parse(info.graphJson).cells)

    },
    createGraph() {
      const graph = new Graph({
        grid: true,
        container: document.getElementById("container"),
        // width: 1270,
        // width: 1200,
        // height: 750,
        autoResize: true,
        // panning: {
        //   enabled: true,
        // },
        resizing: {
          enabled: true,
        },
        // model: {},
        history: true, //uodo和redo
        highlighting: {
          nodeAvailable: {
            //连线过程中，节点可以被链接时被使用。
            name: "className",
            args: {
              className: "available",
            },
          },
          magnetAvailable: {
            //连线过程中，链接桩可以被链接时被使用。
            name: "className",
            args: {
              className: "available",
            },
          },
          magnetAdsorbed: {
            //连线过程中，自动吸附到链接桩时被使用。
            name: "className",
            args: {
              className: "adsorbed",
            },
          },
        },
        scroller: {
          enabled: true,
          pannable: true,
        },
        mousewheel: {
          enabled: true,
          modifiers: ["ctrl", "meta"],
        },
        clipboard: {
          enabled: true,
          useLocalStorage: true,
        },
        keyboard: {
          enabled: true,
          global: true,
        }, //快捷键
        selecting: {
          enabled: true,
          showNodeSelectionBox: true,
          // showEdgeSelectionBox: true,
        }, //选中 ,框选
        //节点与边交互
        translating: {
          restrict: true, //限制节点不能移动超出画布区域
        },
        connecting: {
          snap: true, //连线距离节点或者连接桩 50px 时会触发自动吸附
          allowBlank: false,
          allowLoop: false,
          highlight: true,
          sourceAnchor: {
            //指定源节点的锚点
            name: "bottom",
          },
          targetAnchor: {
            //指定目标节点的锚点
            name: "center",
          },
          connectionPoint: "anchor",
          // connector: "algo-edge",
          createEdge() {
            return graph.createEdge({
              //更新连接边edge样式
              router: {
                // name: "orth",
                name: "er",
                args: {
                  offset: "center",
                },
              },

              attrs: {
                line: {
                  // strokeDasharray: "5 5",      //虚线
                  stroke: "#808080",
                  strokeWidth: 1,
                  targetMarker: {
                    name: "block",
                    args: {
                      size: "6",
                    },
                  },
                },
              },
              //在指定的位置处，渲染一个删除按钮，点击时删除对应的边。
              tools: {
                name: "button-remove",
                args: { distance: -40 },
              },
            });
          },
          validateMagnet({ magnet }) {
            return magnet.getAttribute("port-group") !== "in";
          },
          validateConnection({
            sourceView,
            targetView,
            sourceMagnet,
            targetMagnet,
          }) {
            // 只能从输出链接桩创建连接
            if (
              !sourceMagnet ||
              sourceMagnet.getAttribute("port-group") === "in"
            ) {
              return false;
            }

            // 只能连接到输入链接桩
            if (
              !targetMagnet ||
              targetMagnet.getAttribute("port-group") !== "in"
            ) {
              return false;
            }

            // 判断目标链接桩是否可连接
            const portId = targetMagnet.getAttribute("port");
            const node = targetView.cell;
            const port = node.getPort(portId);
            if (port && port.connected) {
              // if (port && port.connected) {
              return false;
            }

            return true;
          },
        },
      });

      // 创建 Graph 的实例
      // const graph = new Graph({
      //   container: document.getElementById("container"),
      //   width: 1380,
      //   height: 750,
      //   background: {
      //     // color: "#f7f7f4", //设置画布背景颜色
      //     color: "#ffffff",
      //   },
      //   grid: {
      //     size: 8,
      //     visible: true,
      //   }, //网格
      //   history: true, //uodo和redo
      //   //滚动条
      //   // scroller: {
      //   //   enabled: true,
      //   //   // pannable: true,
      //   //   // pageVisible: true,
      //   //   // pageBreak: false,
      //   // },
      //   mousewheel: {
      //     enabled: true,
      //     modifiers: ["ctrl", "meta"],
      //   },
      //   //   clipboard: true, //剪切板
      //   clipboard: {
      //     enabled: true,
      //     useLocalStorage: true,
      //   },
      //   keyboard: {
      //     enabled: true,
      //     global: true,
      //   }, //快捷键
      //   selecting: {
      //     enabled: true,
      //     showNodeSelectionBox: true,
      //     // showEdgeSelectionBox: true,
      //   }, //选中 ,框选
      //   //节点与边交互
      //   translating: {
      //     restrict: true, //限制节点不能移动超出画布区域
      //   },
      //   //连线规则
      //   connecting: {
      //     snap: true,
      //     allowBlank: false, //不允许连接到画布空白位置
      //     allowMulti: false, //不允许在相同节点之间创建多条边
      //   },
      // });

      this.graph = graph;
      this.history = graph.history; //Redo  Undo
    },
    onCollapse(collapsed, type) {
      console.log(collapsed, type);
    },
    onBreakpoint(broken) {
      console.log(broken);
    },
    onUndo() {
      this.history.undo();
      console.log("undo");
    },

    onRedo() {
      this.history.redo();
      console.log("redo");
    },
    onCancel() {
      MessageBox.confirm(`确定进行[退出]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("任务取消")
          console.log(this.workflowName);
          //确定取消任务后的操作
          if(this.workflowstatustag.name == "Running" && this.workflowName!=""){
            this.$http({
              url: this.$http.adornUrl("/visi/visiworkflow/stopworkflow"),
              method: "post",
              data: this.$http.adornData({workflowName: this.workflowName}),
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.workflowStatus = data.statusPhase;
                if(this.workflowStatus == "Failed"){
                  Message.success("任务已取消");
                } 
                console.log("任务已取消")
              }
            });
          }
        })
        .catch(() => {});
    },

    onRun() {
      console.log("graph.toJSON()");
      console.log(this.graph.toJSON());
      // console.log(JSON.stringify(this.graph.toJSON()));
      MessageBox.confirm(`确定进行[提交]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/visi/visiworkflow/submit"),
            method: "post",
            data: this.$http.adornData({
              graphJson: JSON.stringify(this.graph.toJSON()),
              workflowId: this.workflowId,
              experimentName: this.experimentName,
              addorupdate: this.addorupdate,
              }
              ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.workflowName = data.workflowName;
              this.idTemplateNameMap = data.idTemplateNameMap; //节点id与 DAG中task和Template 的对应关系
              this.workflowId = data.workflowId;//若为新增，返回新增的主键ID  workflowId
              // 迭代属性名称:
              for (let nodeid of Object.keys(this.idTemplateNameMap)) {
                var tempname = this.idTemplateNameMap[nodeid];
                this.graph
                  .getCellById(nodeid)
                  .setData({ wftempname: tempname }); //temp后端已向末尾添加随机数
              }
              Message.success("提交成功");
              // this.$message({
              //   message: "提交成功",
              //   type: "success",
              // });
              this.workflowstatustag.name = "Running";
              this.workflowstatustag.type = "";
              //查询运行状态
              // this.getWorkflowStatus();

              var intervalID = window.setInterval(() => {
                this.getWorkflowStatus();
                // 取消该定时设置
                if (
                  this.workflowStatus == "Succeeded" ||
                  this.workflowStatus == "Error" ||
                  this.workflowStatus == "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";
                  }

                  window.clearInterval(intervalID);
                }
              }, 5000);
            } else {
              Message.error("提交失败");
            }
          });
        })
        .catch(() => {});

      // // 上方添加 按钮提示框
      // this.$http({
      //   url: this.$http.adornUrl("/visi/visiworkflow/submit"),
      //   method: "post",
      //   data: this.$http.adornData(this.graph.toJSON()),
      // }).then(({ data }) => {
      //   if (data && data.code === 0) {
      //     this.workflowName = data.workflowName;
      //     this.idTemplateNameMap = data.idTemplateNameMap; //节点id与 DAG中task和Template 的对应关系
      //     // 迭代属性名称:
      //     for (let nodeid of Object.keys(this.idTemplateNameMap)) {
      //       var tempname = this.idTemplateNameMap[nodeid];
      //       this.graph.getCellById(nodeid).setData({ wftempname: tempname }); //temp后端已向末尾添加随机数
      //     }
      //     Message.success("提交成功");
      //     // this.$message({
      //     //   message: "提交成功",
      //     //   type: "success",
      //     // });
      //     this.workflowstatustag.name = "Running";
      //     this.workflowstatustag.type = "";
      //     //查询运行状态
      //     // this.getWorkflowStatus();

      //     var intervalID = window.setInterval(() => {
      //       this.getWorkflowStatus();
      //       // 取消该定时设置
      //       if (
      //         this.workflowStatus == "Succeeded" ||
      //         this.workflowStatus == "Error" ||
      //         this.workflowStatus == "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";
      //         }

      //         window.clearInterval(intervalID);
      //       }
      //     }, 5000);
      //     // // 取消该定时设置
      //     // if (
      //     //   this.workflowStatus == "Succeeded" ||
      //     //   this.workflowStatus == "Error" ||
      //     //   this.workflowStatus == "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";
      //     //   }

      //     //   window.clearInterval(intervalID);
      //     // }
      //   } else {
      //     Message.error("提交失败");
      //     // this.$message.error("提交失败");
      //     // this.$message.error(data.msg);
      //   }
      // });
    },
    //20211109  测试  能否保存至数据库
    onPrimary() {
      MessageBox.confirm(`确定进行[保存]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/visi/visiworkflow/save"),
            method: "post",
            data: this.$http.adornData({
              userId: this.$store.state.user.id,
              workflowId: undefined,
              experimentName: this.experimentName,
              workflowtempName: "",
              workflowName: "",
              graphJson: JSON.stringify(this.graph.toJSON()),
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              Message.success("操作成功");
              // this.$message({
              //   message: "操作成功",
              //   type: "success",
              //   duration: 1500,
              //   onClose: () => {
              //     this.getDataList();
              //   },
              // });
            } else {
              // Message.error();
              // this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});

      console.log(JSON.stringify(this.graph.toJSON()).length);
      console.log(JSON.stringify(this.graph.toJSON()));
      // this.$http({
      //   url: this.$http.adornUrl("/visi/visiworkflow/save"),
      //   method: "post",
      //   data: this.$http.adornData({
      //     userId: this.$store.state.user.id,
      //     workflowId: undefined,
      //     experimentName: "实验1",
      //     workflowtempName: "",
      //     workflowName: "",
      //     graphJson: JSON.stringify(this.graph.toJSON()),
      //   }),
      // }).then(({ data }) => {
      //   if (data && data.code === 0) {
      //     Message.success("操作成功");
      //     // this.$message({
      //     //   message: "操作成功",
      //     //   type: "success",
      //     //   duration: 1500,
      //     //   onClose: () => {
      //     //     this.getDataList();
      //     //   },
      //     // });
      //   } else {
      //     // Message.error();
      //     // this.$message.error(data.msg);
      //   }
      // });
    },
    //查询状态
    getWorkflowStatus() {
      this.$http({
        url: this.$http.adornUrl("/visi/visiworkflow/getworkflowstatus"),
        method: "get",
        params: this.$http.adornParams({
          workflowName: this.workflowName,
        }),
      }).then(({ data }) => {
        this.workflowStatus = data.statusPhase;
        console.log(this.workflowStatus);
        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";
        } else {
          this.workflowstatustag.name = "Running";
          this.workflowstatustag.type = "";
        }
        //Pending, Running, Succeeded, Skipped, Failed, Error
      });
    },
    //20211111  添加设置每个算法节点   的输入输出设置模板
    //获取代码模板
    getParaTemp() {
      this.paraTempVisible = true;
      this.$nextTick(() => {
        // this.$refs.paraTemp.init(this.measurepoint.join());
        this.$refs.paraTemp.init();
      });
    },

    // 清空当前画布
    onCleargraph() {
      this.graph.clearCells();
    },
    //画布内容居中
    getgraphContentcenter() {
      this.graph.centerContent();
    },

    //获取工作流完整日志
    getworkflowContent() {
      // console.log("graph.toJSON()");
      // console.log(this.graph.toJSON());
      // console.log(JSON.stringify(this.graph.toJSON()));

      // this.$http({
      //   url: this.$http.adornUrl("/visi/visiworkflow/getpodlog"),
      //   method: "get",
      //   data: this.$http.adornData(this.workflowName,this.idTemplateNameMap),
      // }).then(({ data }) => {
      //   if (data && data.code === 0) {
      //     this.workflowName = data.workflowName;
      //     this.workflowContentlog = data.workflowContent;
      //     this.podlogs = data.podlogs;
      //     console.log("workflowname");
      //     console.log(this.workflowName);
      //     console.log("workflowcontent")
      //     console.log(this.workflowContentlog);
      //     console.log("podlogs")
      //     console.log(this.podlogs);

      //     this.$message({
      //       message: "操作成功",
      //       type: "success",
      //       duration: 1500,
      //       onClose: () => {
      //         // this.getDataList(); //20211115  待更改   未应用，且不是该函数
      //       },
      //     });
      //   } else {
      //     this.$message.error(data.msg);
      //   }
      // });

      //获取日志正确代码，现改为弹窗显示
      // if (this.workflowContentVisi) {
      //   this.workflowContentVisi = false;
      // } else {
      //   this.workflowContentVisi = true;
      //   this.$http({
      //     url: this.$http.adornUrl("/visi/visiworkflow/getworkflowlog"),
      //     method: "get",
      //     params: this.$http.adornParams({
      //       workflowName: this.workflowName,
      //     }),
      //   })
      //     .then(({ data }) => {
      //       this.workflowContent = data.workflowContent;
      //       // this.podlogs = data.podlogs;
      //       console.log("workflowcontent");
      //       console.log(this.workflowContent);
      //       console.log(this.workflowContent.main);
      //       console.log(this.workflowContent.init);
      //       console.log(this.workflowContent.wait);
      //       // console.log("podlogs")
      //       // console.log(this.podlogs);
      //     })
      //     .then(() => {
      //       // this.visible = true
      //       // this.$nextTick(() => {
      //       //   this.$refs['dataForm'].resetFields()
      //       // })
      //     });
      // }

      this.workflowContentVisi = true;
      if (this.workflowName != "") {
        this.$nextTick(() => {
          this.$refs.getworkflowlog.init(this.workflowName);
        });
      } else {
        this.$nextTick(() => {
          this.$refs.getworkflowlog.init1();
        });
      }
    },

    //获取单个节点 日志
    getnodepodContent() {
      this.$http({
        url: this.$http.adornUrl("/visi/visiworkflow/getpodlog"),
        method: "get",
        params: this.$http.adornParams({
          workflowName: this.workflowName,
          idTemplateNameMap: this.idTemplateNameMap,
          nodeId: "",
        }),
      })
        .then(({ data }) => {
          // this.workflowContentlog = data.workflowContent;
          // 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()
          // })
        });
    },
    //单选控制 日志类型 main init wait
    workflowcontainerchange(e) {
      if (this.containertype == "main") {
        this.workflowContentlog = this.workflowContent.main;
      }
      if (this.containertype == "init") {
        this.workflowContentlog = this.workflowContent.init;
      }
      if (this.containertype == "wait") {
        this.workflowContentlog = this.workflowContent.wait;
      }
    },
    //获取代码示例---轮廓识别
    onGetcontour() {
      //20211129  暂时先注释，为轮廓识别案例
      this.graph.fromJSON([
        {
          position: { x: 60, y: 280 },
          size: { width: 90, height: 80 },
          attrs: {
            image: {
              "xlink:href":
                "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
            },
            label: { text: "contourTask1" },
          },
          shape: "template-node",
          data: {
            nodeName: "contourTask1",
            templateName: "contourTask1",
            templateImage: "zvinjodocker/contous_task1:20211014",
            templateCommand: {},
            templateArgs: {},
            algoparaInput: { userInput: [], getInput: [] },
            algoparaOutput: [],
            algoparaInputargu: { userInput: [], getInput: [] },
            algonodeSource: [],
            inputsparameters: [],
            inputsartifacts: [],
            argumentsparameters: [],
            argumentsartifacts: [],
            outputsparameters: [],
            outputsartifacts: [
              {
                paraname: "thresh",
                paradesc: "",
                paratype: "",
                valuefrom: "/myapps/thresh1.png",
              },
              {
                paraname: "contours",
                paradesc: "",
                paratype: "",
                valuefrom: "/myapps/contours.png",
              },
            ],
            sourcedatalist: [],
            sourceartilist: [],
            inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
            inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
          },
          ports: {
            groups: {
              in: {
                position: "left",
                attrs: {
                  circle: {
                    r: 2.5,
                    magnet: true,
                    stroke: "black",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: { visibility: true },
                  },
                },
              },
              out: {
                position: "right",
                attrs: {
                  circle: {
                    r: 2.5,
                    magnet: true,
                    stroke: "black",
                    strokeWidth: 1,
                    fill: "#fff",
                  },
                },
              },
            },
            items: [
              { id: "inport1", group: "in" },
              { id: "inport2", group: "in" },
              { id: "outport1", group: "out" },
              { id: "outport2", group: "out" },
            ],
          },
          id: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
          zIndex: 1,
        },
        {
          position: { x: 370, y: 140 },
          size: { width: 90, height: 80 },
          attrs: {
            image: {
              "xlink:href":
                "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
            },
            label: { text: "contourTask2" },
          },
          shape: "template-node",
          data: {
            nodeName: "contourTask2",
            templateName: "contourTask2",
            templateImage: "zvinjodocker/contours_task2:20211014",
            templateCommand: {},
            templateArgs: {},
            algoparaInput: { userInput: [], getInput: [] },
            algoparaOutput: [],
            algoparaInputargu: { userInput: [], getInput: [] },
            algonodeSource: [
              {
                position: { x: 60, y: 280 },
                size: { width: 90, height: 80 },
                attrs: {
                  image: {
                    "xlink:href":
                      "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
                  },
                  label: { text: "contourTask1" },
                },
                shape: "template-node",
                data: {
                  nodeName: "contourTask1",
                  templateName: "contourTask1",
                  templateImage: "zvinjodocker/contous_task1:20211014",
                  templateCommand: {},
                  templateArgs: {},
                  algoparaInput: { userInput: [], getInput: [] },
                  algoparaOutput: [],
                  algoparaInputargu: { userInput: [], getInput: [] },
                  algonodeSource: [],
                  inputsparameters: [],
                  inputsartifacts: [],
                  argumentsparameters: [],
                  argumentsartifacts: [],
                  outputsparameters: [],
                  outputsartifacts: [
                    {
                      paraname: "thresh",
                      paradesc: "",
                      paratype: "",
                      valuefrom: "/myapps/thresh1.png",
                    },
                    {
                      paraname: "contours",
                      paradesc: "",
                      paratype: "",
                      valuefrom: "/myapps/contours.png",
                    },
                  ],
                  sourcedatalist: [],
                  sourceartilist: [],
                },
                ports: {
                  groups: {
                    in: {
                      position: "left",
                      attrs: {
                        circle: {
                          r: 2.5,
                          magnet: true,
                          stroke: "black",
                          strokeWidth: 1,
                          fill: "#fff",
                          style: { visibility: true },
                        },
                      },
                    },
                    out: {
                      position: "right",
                      attrs: {
                        circle: {
                          r: 2.5,
                          magnet: true,
                          stroke: "black",
                          strokeWidth: 1,
                          fill: "#fff",
                        },
                      },
                    },
                  },
                  items: [
                    { id: "inport1", group: "in" },
                    { id: "inport2", group: "in" },
                    { id: "outport1", group: "out" },
                    { id: "outport2", group: "out" },
                  ],
                },
                id: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
                zIndex: 1,
              },
            ],
            inputsparameters: [],
            inputsartifacts: [
              {
                paraname: "thresh",
                parapath: "/myapps/thresh1.png",
                paradesc: "",
              },
              {
                paraname: "contours",
                parapath: "/myapps/contours.png",
                paradesc: "",
              },
            ],
            argumentsparameters: [],
            argumentsartifacts: [
              {
                paraname: "thresh",
                valuefrom: "{{tasks.contourTask1.outputs.artifacts.thresh}}",
                fileurls: [],
                filelist: [],
                value: ["contourTask1", "thresh"],
              },
              {
                paraname: "contours",
                valuefrom: "{{tasks.contourTask1.outputs.artifacts.contours}}",
                fileurls: [],
                filelist: [],
                value: ["contourTask1", "contours"],
              },
            ],
            outputsparameters: [],
            outputsartifacts: [
              {
                paraname: "contours0",
                valuefrom: "/myapps/contours[0].npy",
                paradesc: "",
                paratype: "",
              },
              {
                paraname: "res",
                valuefrom: "/myapps/res1.png",
                paradesc: "",
                paratype: "",
              },
            ],
            sourcedatalist: [],
            sourceartilist: [],
            inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
            inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
          },
          ports: {
            groups: {
              in: {
                position: "left",
                attrs: {
                  circle: {
                    r: 2.5,
                    magnet: true,
                    stroke: "black",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: { visibility: true },
                  },
                },
              },
              out: {
                position: "right",
                attrs: {
                  circle: {
                    r: 2.5,
                    magnet: true,
                    stroke: "black",
                    strokeWidth: 1,
                    fill: "#fff",
                  },
                },
              },
            },
            items: [
              { id: "inport1", group: "in" },
              { id: "inport2", group: "in" },
              { id: "outport1", group: "out" },
              { id: "outport2", group: "out" },
            ],
          },
          id: "7d572837-a22b-4dab-a196-8ea411ba868e",
          zIndex: 2,
        },
        {
          shape: "edge",
          attrs: {
            line: {
              stroke: "#808080",
              strokeWidth: 1,
              targetMarker: { name: "block", args: { size: "6" } },
            },
          },
          id: "3b752ac7-2c5f-4596-adf3-ad10dd3718b0",
          router: { name: "er", args: { offset: "center" } },
          tools: {
            items: [{ name: "button-remove", args: { distance: -40 } }],
          },
          source: {
            cell: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
            port: "outport1",
          },
          target: {
            cell: "7d572837-a22b-4dab-a196-8ea411ba868e",
            port: "inport1",
          },
          zIndex: 3,
        },
        {
          position: { x: 650, y: 140 },
          size: { width: 90, height: 80 },
          attrs: {
            image: {
              "xlink:href":
                "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
            },
            label: { text: "contourTask3" },
          },
          shape: "template-node",
          data: {
            nodeName: "contourTask3",
            templateName: "contourTask3",
            templateImage: "zvinjodocker/contours_task3:20211015",
            templateCommand: {},
            templateArgs: {},
            algoparaInput: { userInput: [], getInput: [] },
            algoparaOutput: [],
            algoparaInputargu: { userInput: [], getInput: [] },
            algonodeSource: [
              {
                position: { x: 370, y: 140 },
                size: { width: 90, height: 80 },
                attrs: {
                  image: {
                    "xlink:href":
                      "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
                  },
                  label: { text: "contourTask2" },
                },
                shape: "template-node",
                data: {
                  nodeName: "contourTask2",
                  templateName: "contourTask2",
                  templateImage: "zvinjodocker/contours_task2:20211014",
                  templateCommand: {},
                  templateArgs: {},
                  algoparaInput: { userInput: [], getInput: [] },
                  algoparaOutput: [],
                  algoparaInputargu: { userInput: [], getInput: [] },
                  algonodeSource: [
                    {
                      position: { x: 60, y: 280 },
                      size: { width: 90, height: 80 },
                      attrs: {
                        image: {
                          "xlink:href":
                            "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
                        },
                        label: { text: "contourTask1" },
                      },
                      shape: "template-node",
                      data: {
                        nodeName: "contourTask1",
                        templateName: "contourTask1",
                        templateImage: "zvinjodocker/contous_task1:20211014",
                        templateCommand: {},
                        templateArgs: {},
                        algoparaInput: { userInput: [], getInput: [] },
                        algoparaOutput: [],
                        algoparaInputargu: { userInput: [], getInput: [] },
                        algonodeSource: [],
                        inputsparameters: [],
                        inputsartifacts: [],
                        argumentsparameters: [],
                        argumentsartifacts: [],
                        outputsparameters: [],
                        outputsartifacts: [
                          {
                            paraname: "thresh",
                            paradesc: "",
                            paratype: "",
                            valuefrom: "/myapps/thresh1.png",
                          },
                          {
                            paraname: "contours",
                            paradesc: "",
                            paratype: "",
                            valuefrom: "/myapps/contours.png",
                          },
                        ],
                        sourcedatalist: [],
                        sourceartilist: [],
                      },
                      ports: {
                        groups: {
                          in: {
                            position: "left",
                            attrs: {
                              circle: {
                                r: 2.5,
                                magnet: true,
                                stroke: "black",
                                strokeWidth: 1,
                                fill: "#fff",
                                style: { visibility: true },
                              },
                            },
                          },
                          out: {
                            position: "right",
                            attrs: {
                              circle: {
                                r: 2.5,
                                magnet: true,
                                stroke: "black",
                                strokeWidth: 1,
                                fill: "#fff",
                              },
                            },
                          },
                        },
                        items: [
                          { id: "inport1", group: "in" },
                          { id: "inport2", group: "in" },
                          { id: "outport1", group: "out" },
                          { id: "outport2", group: "out" },
                        ],
                      },
                      id: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
                      zIndex: 1,
                    },
                  ],
                  inputsparameters: [],
                  inputsartifacts: [
                    {
                      paraname: "thresh",
                      parapath: "/myapps/thresh1.png",
                      paradesc: "",
                    },
                    {
                      paraname: "contours",
                      parapath: "/myapps/contours.png",
                      paradesc: "",
                    },
                  ],
                  argumentsparameters: [],
                  argumentsartifacts: [
                    {
                      paraname: "thresh",
                      valuefrom:
                        "{{tasks.contourTask1.outputs.artifacts.thresh}}",
                      fileurls: [],
                      filelist: [],
                      value: ["contourTask1", "thresh"],
                    },
                    {
                      paraname: "contours",
                      valuefrom:
                        "{{tasks.contourTask1.outputs.artifacts.contours}}",
                      fileurls: [],
                      filelist: [],
                      value: ["contourTask1", "contours"],
                    },
                  ],
                  outputsparameters: [],
                  outputsartifacts: [
                    {
                      paraname: "contours0",
                      valuefrom: "/myapps/contours[0].npy",
                      paradesc: "",
                      paratype: "",
                    },
                    {
                      paraname: "res",
                      valuefrom: "/myapps/res1.png",
                      paradesc: "",
                      paratype: "",
                    },
                  ],
                  sourcedatalist: [],
                  sourceartilist: [],
                },
                ports: {
                  groups: {
                    in: {
                      position: "left",
                      attrs: {
                        circle: {
                          r: 2.5,
                          magnet: true,
                          stroke: "black",
                          strokeWidth: 1,
                          fill: "#fff",
                          style: { visibility: true },
                        },
                      },
                    },
                    out: {
                      position: "right",
                      attrs: {
                        circle: {
                          r: 2.5,
                          magnet: true,
                          stroke: "black",
                          strokeWidth: 1,
                          fill: "#fff",
                        },
                      },
                    },
                  },
                  items: [
                    { id: "inport1", group: "in" },
                    { id: "inport2", group: "in" },
                    { id: "outport1", group: "out" },
                    { id: "outport2", group: "out" },
                  ],
                },
                id: "7d572837-a22b-4dab-a196-8ea411ba868e",
                zIndex: 2,
              },
            ],
            inputsparameters: [],
            inputsartifacts: [
              {
                paraname: "contours0",
                parapath: "/myapps/contours[0].npy",
                paradesc: "",
              },
            ],
            argumentsparameters: [],
            argumentsartifacts: [
              {
                paraname: "contours0",
                valuefrom: "{{tasks.contourTask2.outputs.artifacts.contours0}}",
                fileurls: [],
                filelist: [],
                value: ["contourTask2", "contours0"],
              },
            ],
            outputsparameters: [],
            outputsartifacts: [],
            sourcedatalist: [],
            sourceartilist: [],
            inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
            inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
          },
          ports: {
            groups: {
              in: {
                position: "left",
                attrs: {
                  circle: {
                    r: 2.5,
                    magnet: true,
                    stroke: "black",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: { visibility: true },
                  },
                },
              },
              out: {
                position: "right",
                attrs: {
                  circle: {
                    r: 2.5,
                    magnet: true,
                    stroke: "black",
                    strokeWidth: 1,
                    fill: "#fff",
                  },
                },
              },
            },
            items: [
              { id: "inport1", group: "in" },
              { id: "inport2", group: "in" },
              { id: "outport1", group: "out" },
              { id: "outport2", group: "out" },
            ],
          },
          id: "a40a3ff3-da4c-463c-ab58-bd9735fb57fe",
          zIndex: 4,
        },
        {
          shape: "edge",
          attrs: {
            line: {
              stroke: "#808080",
              strokeWidth: 1,
              targetMarker: { name: "block", args: { size: "6" } },
            },
          },
          id: "e30fefd7-b50a-4152-96a5-a6403f990cf7",
          router: { name: "er", args: { offset: "center" } },
          tools: {
            items: [{ name: "button-remove", args: { distance: -40 } }],
          },
          source: {
            cell: "7d572837-a22b-4dab-a196-8ea411ba868e",
            port: "outport1",
          },
          target: {
            cell: "a40a3ff3-da4c-463c-ab58-bd9735fb57fe",
            port: "inport1",
          },
          zIndex: 5,
        },
        {
          position: { x: 360, y: 390 },
          size: { width: 90, height: 80 },
          attrs: {
            image: {
              "xlink:href":
                "https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg",
            },
            label: { text: "contourApproximate1" },
          },
          shape: "template-node",
          data: {
            nodeName: "contourApproximate1",
            templateName: "contourApproximate1",
            templateImage: "zvinjodocker/contour_approximate1:20211015",
            templateCommand: {},
            templateArgs: {},
            algoparaInput: { userInput: [], getInput: [] },
            algoparaOutput: [],
            algoparaInputargu: { userInput: [], getInput: [] },
            algonodeSource: [
              {
                position: { x: 60, y: 280 },
                size: { width: 90, height: 80 },
                attrs: {
                  image: {
                    "xlink:href":
                      "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
                  },
                  label: { text: "contourTask1" },
                },
                shape: "template-node",
                data: {
                  nodeName: "contourTask1",
                  templateName: "contourTask1",
                  templateImage: "zvinjodocker/contous_task1:20211014",
                  templateCommand: {},
                  templateArgs: {},
                  algoparaInput: { userInput: [], getInput: [] },
                  algoparaOutput: [],
                  algoparaInputargu: { userInput: [], getInput: [] },
                  algonodeSource: [],
                  inputsparameters: [],
                  inputsartifacts: [],
                  argumentsparameters: [],
                  argumentsartifacts: [],
                  outputsparameters: [],
                  outputsartifacts: [
                    {
                      paraname: "thresh",
                      paradesc: "",
                      paratype: "",
                      valuefrom: "/myapps/thresh1.png",
                    },
                    {
                      paraname: "contours",
                      paradesc: "",
                      paratype: "",
                      valuefrom: "/myapps/contours.png",
                    },
                  ],
                  sourcedatalist: [],
                  sourceartilist: [],
                },
                ports: {
                  groups: {
                    in: {
                      position: "left",
                      attrs: {
                        circle: {
                          r: 2.5,
                          magnet: true,
                          stroke: "black",
                          strokeWidth: 1,
                          fill: "#fff",
                          style: { visibility: true },
                        },
                      },
                    },
                    out: {
                      position: "right",
                      attrs: {
                        circle: {
                          r: 2.5,
                          magnet: true,
                          stroke: "black",
                          strokeWidth: 1,
                          fill: "#fff",
                        },
                      },
                    },
                  },
                  items: [
                    { id: "inport1", group: "in" },
                    { id: "inport2", group: "in" },
                    { id: "outport1", group: "out" },
                    { id: "outport2", group: "out" },
                  ],
                },
                id: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
                zIndex: 1,
              },
            ],
            inputsparameters: [],
            inputsartifacts: [],
            argumentsparameters: [],
            argumentsartifacts: [],
            outputsparameters: [],
            outputsartifacts: [
              {
                paraname: "approxCnt",
                valuefrom: "/myapps/approx_cnt.npy",
                paradesc: "",
                paratype: "",
              },
              {
                paraname: "approxRes",
                valuefrom: "/myapps/approx_res.png",
                paradesc: "",
                paratype: "",
              },
            ],
            sourcedatalist: [],
            sourceartilist: [],
            inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
            inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
          },
          ports: {
            groups: {
              in: {
                position: "left",
                attrs: {
                  circle: {
                    r: 2.5,
                    magnet: true,
                    stroke: "black",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: { visibility: true },
                  },
                },
              },
              out: {
                position: "right",
                attrs: {
                  circle: {
                    r: 2.5,
                    magnet: true,
                    stroke: "black",
                    strokeWidth: 1,
                    fill: "#fff",
                  },
                },
              },
            },
            items: [
              { id: "inport1", group: "in" },
              { id: "inport2", group: "in" },
              { id: "outport1", group: "out" },
              { id: "outport2", group: "out" },
            ],
          },
          id: "2d3ccc77-be7c-4fa0-ae37-a9af4fdf6730",
          zIndex: 6,
        },
        {
          position: { x: 660, y: 390 },
          size: { width: 90, height: 80 },
          attrs: {
            image: {
              "xlink:href":
                "https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg",
            },
            label: { text: "contourApproximate2" },
          },
          shape: "template-node",
          data: {
            nodeName: "contourApproximate2",
            templateName: "contourApproximate2",
            templateImage: "zvinjodocker/contour_approximate2:20211015",
            templateCommand: {},
            templateArgs: {},
            algoparaInput: { userInput: [], getInput: [] },
            algoparaOutput: [],
            algoparaInputargu: { userInput: [], getInput: [] },
            algonodeSource: [
              {
                position: { x: 360, y: 390 },
                size: { width: 90, height: 80 },
                attrs: {
                  image: {
                    "xlink:href":
                      "https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg",
                  },
                  label: { text: "contourApproximate1" },
                },
                shape: "template-node",
                data: {
                  nodeName: "contourApproximate1",
                  templateName: "contourApproximate1",
                  templateImage: "zvinjodocker/contour_approximate1:20211015",
                  templateCommand: {},
                  templateArgs: {},
                  algoparaInput: { userInput: [], getInput: [] },
                  algoparaOutput: [],
                  algoparaInputargu: { userInput: [], getInput: [] },
                  algonodeSource: [
                    {
                      position: { x: 60, y: 280 },
                      size: { width: 90, height: 80 },
                      attrs: {
                        image: {
                          "xlink:href":
                            "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
                        },
                        label: { text: "contourTask1" },
                      },
                      shape: "template-node",
                      data: {
                        nodeName: "contourTask1",
                        templateName: "contourTask1",
                        templateImage: "zvinjodocker/contous_task1:20211014",
                        templateCommand: {},
                        templateArgs: {},
                        algoparaInput: { userInput: [], getInput: [] },
                        algoparaOutput: [],
                        algoparaInputargu: { userInput: [], getInput: [] },
                        algonodeSource: [],
                        inputsparameters: [],
                        inputsartifacts: [],
                        argumentsparameters: [],
                        argumentsartifacts: [],
                        outputsparameters: [],
                        outputsartifacts: [
                          {
                            paraname: "thresh",
                            paradesc: "",
                            paratype: "",
                            valuefrom: "/myapps/thresh1.png",
                          },
                          {
                            paraname: "contours",
                            paradesc: "",
                            paratype: "",
                            valuefrom: "/myapps/contours.png",
                          },
                        ],
                        sourcedatalist: [],
                        sourceartilist: [],
                      },
                      ports: {
                        groups: {
                          in: {
                            position: "left",
                            attrs: {
                              circle: {
                                r: 2.5,
                                magnet: true,
                                stroke: "black",
                                strokeWidth: 1,
                                fill: "#fff",
                                style: { visibility: true },
                              },
                            },
                          },
                          out: {
                            position: "right",
                            attrs: {
                              circle: {
                                r: 2.5,
                                magnet: true,
                                stroke: "black",
                                strokeWidth: 1,
                                fill: "#fff",
                              },
                            },
                          },
                        },
                        items: [
                          { id: "inport1", group: "in" },
                          { id: "inport2", group: "in" },
                          { id: "outport1", group: "out" },
                          { id: "outport2", group: "out" },
                        ],
                      },
                      id: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
                      zIndex: 1,
                    },
                  ],
                  inputsparameters: [],
                  inputsartifacts: [],
                  argumentsparameters: [],
                  argumentsartifacts: [],
                  outputsparameters: [],
                  outputsartifacts: [
                    {
                      paraname: "approxCnt",
                      valuefrom: "/myapps/approx_cnt.npy",
                      paradesc: "",
                      paratype: "",
                    },
                    {
                      paraname: "approxRes",
                      valuefrom: "/myapps/approx_res.png",
                      paradesc: "",
                      paratype: "",
                    },
                  ],
                  sourcedatalist: [],
                  sourceartilist: [],
                },
                ports: {
                  groups: {
                    in: {
                      position: "left",
                      attrs: {
                        circle: {
                          r: 2.5,
                          magnet: true,
                          stroke: "black",
                          strokeWidth: 1,
                          fill: "#fff",
                          style: { visibility: true },
                        },
                      },
                    },
                    out: {
                      position: "right",
                      attrs: {
                        circle: {
                          r: 2.5,
                          magnet: true,
                          stroke: "black",
                          strokeWidth: 1,
                          fill: "#fff",
                        },
                      },
                    },
                  },
                  items: [
                    { id: "inport1", group: "in" },
                    { id: "inport2", group: "in" },
                    { id: "outport1", group: "out" },
                    { id: "outport2", group: "out" },
                  ],
                },
                id: "2d3ccc77-be7c-4fa0-ae37-a9af4fdf6730",
                zIndex: 6,
              },
            ],
            inputsparameters: [],
            inputsartifacts: [
              {
                paraname: "approxCnt",
                parapath: "/myapps/approx_cnt.npy",
                paradesc: "",
              },
            ],
            argumentsparameters: [],
            argumentsartifacts: [
              {
                paraname: "approxCnt",
                valuefrom:
                  "{{tasks.contourApproximate1.outputs.artifacts.approxCnt}}",
                fileurls: [],
                filelist: [],
                value: ["contourApproximate1", "approxCnt"],
              },
            ],
            outputsparameters: [],
            outputsartifacts: [
              {
                paraname: "approxRes2",
                valuefrom: "/myapps/approx_res2.png",
                paradesc: "",
                paratype: "",
              },
            ],
            sourcedatalist: [],
            sourceartilist: [],
            inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
            inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
          },
          ports: {
            groups: {
              in: {
                position: "left",
                attrs: {
                  circle: {
                    r: 2.5,
                    magnet: true,
                    stroke: "black",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: { visibility: true },
                  },
                },
              },
              out: {
                position: "right",
                attrs: {
                  circle: {
                    r: 2.5,
                    magnet: true,
                    stroke: "black",
                    strokeWidth: 1,
                    fill: "#fff",
                  },
                },
              },
            },
            items: [
              { id: "inport1", group: "in" },
              { id: "inport2", group: "in" },
              { id: "outport1", group: "out" },
              { id: "outport2", group: "out" },
            ],
          },
          id: "1e868699-e31f-4daf-a07b-7e903c861fba",
          zIndex: 7,
        },
        {
          shape: "edge",
          attrs: {
            line: {
              stroke: "#808080",
              strokeWidth: 1,
              targetMarker: { name: "block", args: { size: "6" } },
            },
          },
          id: "77d0d40f-d287-4223-abfc-0fd17651bb69",
          router: { name: "er", args: { offset: "center" } },
          tools: {
            items: [{ name: "button-remove", args: { distance: -40 } }],
          },
          source: {
            cell: "2d3ccc77-be7c-4fa0-ae37-a9af4fdf6730",
            port: "outport1",
          },
          target: {
            cell: "1e868699-e31f-4daf-a07b-7e903c861fba",
            port: "inport1",
          },
          zIndex: 8,
        },
        {
          shape: "edge",
          attrs: {
            line: {
              stroke: "#808080",
              strokeWidth: 1,
              targetMarker: { name: "block", args: { size: "6" } },
            },
          },
          id: "f46b0a77-d34c-4ec8-8bfd-7b48e412669e",
          router: { name: "er", args: { offset: "center" } },
          tools: {
            items: [{ name: "button-remove", args: { distance: -40 } }],
          },
          source: {
            cell: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
            port: "outport2",
          },
          target: {
            cell: "2d3ccc77-be7c-4fa0-ae37-a9af4fdf6730",
            port: "inport1",
          },
          zIndex: 9,
        },
        {
          position: { x: 660, y: 600 },
          size: { width: 90, height: 80 },
          attrs: {
            image: {
              "xlink:href":
                "https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg",
            },
            label: { text: "contourRect1" },
          },
          shape: "template-node",
          data: {
            nodeName: "contourRect1",
            templateName: "contourRect1",
            templateImage: "zvinjodocker/contours_rect1:20211015",
            templateCommand: {},
            templateArgs: {},
            algoparaInput: { userInput: [], getInput: [] },
            algoparaOutput: [],
            algoparaInputargu: { userInput: [], getInput: [] },
            algonodeSource: [
              {
                position: { x: 360, y: 390 },
                size: { width: 90, height: 80 },
                attrs: {
                  image: {
                    "xlink:href":
                      "https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg",
                  },
                  label: { text: "contourApproximate1" },
                },
                shape: "template-node",
                data: {
                  nodeName: "contourApproximate1",
                  templateName: "contourApproximate1",
                  templateImage: "zvinjodocker/contour_approximate1:20211015",
                  templateCommand: {},
                  templateArgs: {},
                  algoparaInput: { userInput: [], getInput: [] },
                  algoparaOutput: [],
                  algoparaInputargu: { userInput: [], getInput: [] },
                  algonodeSource: [
                    {
                      position: { x: 60, y: 280 },
                      size: { width: 90, height: 80 },
                      attrs: {
                        image: {
                          "xlink:href":
                            "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
                        },
                        label: { text: "contourTask1" },
                      },
                      shape: "template-node",
                      data: {
                        nodeName: "contourTask1",
                        templateName: "contourTask1",
                        templateImage: "zvinjodocker/contous_task1:20211014",
                        templateCommand: {},
                        templateArgs: {},
                        algoparaInput: { userInput: [], getInput: [] },
                        algoparaOutput: [],
                        algoparaInputargu: { userInput: [], getInput: [] },
                        algonodeSource: [],
                        inputsparameters: [],
                        inputsartifacts: [],
                        argumentsparameters: [],
                        argumentsartifacts: [],
                        outputsparameters: [],
                        outputsartifacts: [
                          {
                            paraname: "thresh",
                            paradesc: "",
                            paratype: "",
                            valuefrom: "/myapps/thresh1.png",
                          },
                          {
                            paraname: "contours",
                            paradesc: "",
                            paratype: "",
                            valuefrom: "/myapps/contours.png",
                          },
                        ],
                        sourcedatalist: [],
                        sourceartilist: [],
                      },
                      ports: {
                        groups: {
                          in: {
                            position: "left",
                            attrs: {
                              circle: {
                                r: 2.5,
                                magnet: true,
                                stroke: "black",
                                strokeWidth: 1,
                                fill: "#fff",
                                style: { visibility: true },
                              },
                            },
                          },
                          out: {
                            position: "right",
                            attrs: {
                              circle: {
                                r: 2.5,
                                magnet: true,
                                stroke: "black",
                                strokeWidth: 1,
                                fill: "#fff",
                              },
                            },
                          },
                        },
                        items: [
                          { id: "inport1", group: "in" },
                          { id: "inport2", group: "in" },
                          { id: "outport1", group: "out" },
                          { id: "outport2", group: "out" },
                        ],
                      },
                      id: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
                      zIndex: 1,
                    },
                  ],
                  inputsparameters: [],
                  inputsartifacts: [],
                  argumentsparameters: [],
                  argumentsartifacts: [],
                  outputsparameters: [],
                  outputsartifacts: [
                    {
                      paraname: "approxCnt",
                      valuefrom: "/myapps/approx_cnt.npy",
                      paradesc: "",
                      paratype: "",
                    },
                    {
                      paraname: "approxRes",
                      valuefrom: "/myapps/approx_res.png",
                      paradesc: "",
                      paratype: "",
                    },
                  ],
                  sourcedatalist: [],
                  sourceartilist: [],
                },
                ports: {
                  groups: {
                    in: {
                      position: "left",
                      attrs: {
                        circle: {
                          r: 2.5,
                          magnet: true,
                          stroke: "black",
                          strokeWidth: 1,
                          fill: "#fff",
                          style: { visibility: true },
                        },
                      },
                    },
                    out: {
                      position: "right",
                      attrs: {
                        circle: {
                          r: 2.5,
                          magnet: true,
                          stroke: "black",
                          strokeWidth: 1,
                          fill: "#fff",
                        },
                      },
                    },
                  },
                  items: [
                    { id: "inport1", group: "in" },
                    { id: "inport2", group: "in" },
                    { id: "outport1", group: "out" },
                    { id: "outport2", group: "out" },
                  ],
                },
                id: "2d3ccc77-be7c-4fa0-ae37-a9af4fdf6730",
                zIndex: 6,
              },
            ],
            inputsparameters: [],
            inputsartifacts: [],
            argumentsparameters: [],
            argumentsartifacts: [],
            outputsparameters: [],
            outputsartifacts: [
              {
                paraname: "cnt",
                valuefrom: "/myapps/contour_rect_cnt.npy",
                paradesc: "",
                paratype: "",
              },
              {
                paraname: "contourRect",
                valuefrom: "/myapps/contour_rect.png",
                paradesc: "",
                paratype: "",
              },
            ],
            sourcedatalist: [],
            sourceartilist: [],
            inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
            inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
          },
          ports: {
            groups: {
              in: {
                position: "left",
                attrs: {
                  circle: {
                    r: 2.5,
                    magnet: true,
                    stroke: "black",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: { visibility: true },
                  },
                },
              },
              out: {
                position: "right",
                attrs: {
                  circle: {
                    r: 2.5,
                    magnet: true,
                    stroke: "black",
                    strokeWidth: 1,
                    fill: "#fff",
                  },
                },
              },
            },
            items: [
              { id: "inport1", group: "in" },
              { id: "inport2", group: "in" },
              { id: "outport1", group: "out" },
              { id: "outport2", group: "out" },
            ],
          },
          id: "6d787d4a-a68d-4a8c-a3b9-559eb5d4e231",
          zIndex: 10,
        },
        {
          position: { x: 910, y: 600 },
          size: { width: 90, height: 80 },
          attrs: {
            image: {
              "xlink:href":
                "https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg",
            },
            label: { text: "contourCircle2" },
          },
          shape: "template-node",
          data: {
            nodeName: "contourCircle2",
            templateName: "contourCircle2",
            templateImage: "zvinjodocker/contours_circle2:20211015",
            templateCommand: {},
            templateArgs: {},
            algoparaInput: { userInput: [], getInput: [] },
            algoparaOutput: [],
            algoparaInputargu: { userInput: [], getInput: [] },
            algonodeSource: [
              {
                position: { x: 660, y: 600 },
                size: { width: 90, height: 80 },
                attrs: {
                  image: {
                    "xlink:href":
                      "https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg",
                  },
                  label: { text: "contourRect1" },
                },
                shape: "template-node",
                data: {
                  nodeName: "contourRect1",
                  templateName: "contourRect1",
                  templateImage: "zvinjodocker/contours_rect1:20211015",
                  templateCommand: {},
                  templateArgs: {},
                  algoparaInput: { userInput: [], getInput: [] },
                  algoparaOutput: [],
                  algoparaInputargu: { userInput: [], getInput: [] },
                  algonodeSource: [
                    {
                      position: { x: 360, y: 390 },
                      size: { width: 90, height: 80 },
                      attrs: {
                        image: {
                          "xlink:href":
                            "https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg",
                        },
                        label: { text: "contourApproximate1" },
                      },
                      shape: "template-node",
                      data: {
                        nodeName: "contourApproximate1",
                        templateName: "contourApproximate1",
                        templateImage:
                          "zvinjodocker/contour_approximate1:20211015",
                        templateCommand: {},
                        templateArgs: {},
                        algoparaInput: { userInput: [], getInput: [] },
                        algoparaOutput: [],
                        algoparaInputargu: { userInput: [], getInput: [] },
                        algonodeSource: [
                          {
                            position: { x: 60, y: 280 },
                            size: { width: 90, height: 80 },
                            attrs: {
                              image: {
                                "xlink:href":
                                  "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
                              },
                              label: { text: "contourTask1" },
                            },
                            shape: "template-node",
                            data: {
                              nodeName: "contourTask1",
                              templateName: "contourTask1",
                              templateImage:
                                "zvinjodocker/contous_task1:20211014",
                              templateCommand: {},
                              templateArgs: {},
                              algoparaInput: { userInput: [], getInput: [] },
                              algoparaOutput: [],
                              algoparaInputargu: {
                                userInput: [],
                                getInput: [],
                              },
                              algonodeSource: [],
                              inputsparameters: [],
                              inputsartifacts: [],
                              argumentsparameters: [],
                              argumentsartifacts: [],
                              outputsparameters: [],
                              outputsartifacts: [
                                {
                                  paraname: "thresh",
                                  paradesc: "",
                                  paratype: "",
                                  valuefrom: "/myapps/thresh1.png",
                                },
                                {
                                  paraname: "contours",
                                  paradesc: "",
                                  paratype: "",
                                  valuefrom: "/myapps/contours.png",
                                },
                              ],
                              sourcedatalist: [],
                              sourceartilist: [],
                            },
                            ports: {
                              groups: {
                                in: {
                                  position: "left",
                                  attrs: {
                                    circle: {
                                      r: 2.5,
                                      magnet: true,
                                      stroke: "black",
                                      strokeWidth: 1,
                                      fill: "#fff",
                                      style: { visibility: true },
                                    },
                                  },
                                },
                                out: {
                                  position: "right",
                                  attrs: {
                                    circle: {
                                      r: 2.5,
                                      magnet: true,
                                      stroke: "black",
                                      strokeWidth: 1,
                                      fill: "#fff",
                                    },
                                  },
                                },
                              },
                              items: [
                                { id: "inport1", group: "in" },
                                { id: "inport2", group: "in" },
                                { id: "outport1", group: "out" },
                                { id: "outport2", group: "out" },
                              ],
                            },
                            id: "fadef8ac-8dcd-4d8e-8968-d156ffd941c5",
                            zIndex: 1,
                          },
                        ],
                        inputsparameters: [],
                        inputsartifacts: [],
                        argumentsparameters: [],
                        argumentsartifacts: [],
                        outputsparameters: [],
                        outputsartifacts: [
                          {
                            paraname: "approxCnt",
                            valuefrom: "/myapps/approx_cnt.npy",
                            paradesc: "",
                            paratype: "",
                          },
                          {
                            paraname: "approxRes",
                            valuefrom: "/myapps/approx_res.png",
                            paradesc: "",
                            paratype: "",
                          },
                        ],
                        sourcedatalist: [],
                        sourceartilist: [],
                      },
                      ports: {
                        groups: {
                          in: {
                            position: "left",
                            attrs: {
                              circle: {
                                r: 2.5,
                                magnet: true,
                                stroke: "black",
                                strokeWidth: 1,
                                fill: "#fff",
                                style: { visibility: true },
                              },
                            },
                          },
                          out: {
                            position: "right",
                            attrs: {
                              circle: {
                                r: 2.5,
                                magnet: true,
                                stroke: "black",
                                strokeWidth: 1,
                                fill: "#fff",
                              },
                            },
                          },
                        },
                        items: [
                          { id: "inport1", group: "in" },
                          { id: "inport2", group: "in" },
                          { id: "outport1", group: "out" },
                          { id: "outport2", group: "out" },
                        ],
                      },
                      id: "2d3ccc77-be7c-4fa0-ae37-a9af4fdf6730",
                      zIndex: 6,
                    },
                  ],
                  inputsparameters: [],
                  inputsartifacts: [],
                  argumentsparameters: [],
                  argumentsartifacts: [],
                  outputsparameters: [],
                  outputsartifacts: [
                    {
                      paraname: "cnt",
                      valuefrom: "/myapps/contour_rect_cnt.npy",
                      paradesc: "",
                      paratype: "",
                    },
                    {
                      paraname: "contourRect",
                      valuefrom: "/myapps/contour_rect.png",
                      paradesc: "",
                      paratype: "",
                    },
                  ],
                  sourcedatalist: [],
                  sourceartilist: [],
                },
                ports: {
                  groups: {
                    in: {
                      position: "left",
                      attrs: {
                        circle: {
                          r: 2.5,
                          magnet: true,
                          stroke: "black",
                          strokeWidth: 1,
                          fill: "#fff",
                          style: { visibility: true },
                        },
                      },
                    },
                    out: {
                      position: "right",
                      attrs: {
                        circle: {
                          r: 2.5,
                          magnet: true,
                          stroke: "black",
                          strokeWidth: 1,
                          fill: "#fff",
                        },
                      },
                    },
                  },
                  items: [
                    { id: "inport1", group: "in" },
                    { id: "inport2", group: "in" },
                    { id: "outport1", group: "out" },
                    { id: "outport2", group: "out" },
                  ],
                },
                id: "6d787d4a-a68d-4a8c-a3b9-559eb5d4e231",
                zIndex: 10,
              },
            ],
            inputsparameters: [],
            inputsartifacts: [
              {
                paraname: "contourRect",
                parapath: "/myapps/contour_rect.png",
                paradesc: "",
              },
              {
                paraname: "cnt",
                parapath: "/myapps/contour_rect_cnt.npy",
                paradesc: "",
              },
            ],
            argumentsparameters: [],
            argumentsartifacts: [
              {
                paraname: "contourRect",
                valuefrom:
                  "{{tasks.contourRect1.outputs.artifacts.contourRect}}",
                fileurls: [],
                filelist: [],
                value: ["contourRect1", "contourRect"],
              },
              {
                paraname: "cnt",
                valuefrom: "{{tasks.contourRect1.outputs.artifacts.cnt}}",
                fileurls: [],
                filelist: [],
                value: ["contourRect1", "cnt"],
              },
            ],
            outputsparameters: [],
            outputsartifacts: [
              {
                paraname: "contourCircle",
                valuefrom: "contour_circle.png",
                paradesc: "",
                paratype: "",
              },
            ],
            sourcedatalist: [],
            sourceartilist: [],
            inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
            inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
          },
          ports: {
            groups: {
              in: {
                position: "left",
                attrs: {
                  circle: {
                    r: 2.5,
                    magnet: true,
                    stroke: "black",
                    strokeWidth: 1,
                    fill: "#fff",
                    style: { visibility: true },
                  },
                },
              },
              out: {
                position: "right",
                attrs: {
                  circle: {
                    r: 2.5,
                    magnet: true,
                    stroke: "black",
                    strokeWidth: 1,
                    fill: "#fff",
                  },
                },
              },
            },
            items: [
              { id: "inport1", group: "in" },
              { id: "inport2", group: "in" },
              { id: "outport1", group: "out" },
              { id: "outport2", group: "out" },
            ],
          },
          id: "283ddff1-40c9-43aa-b581-b99706e65fb3",
          zIndex: 11,
        },
        {
          shape: "edge",
          attrs: {
            line: {
              stroke: "#808080",
              strokeWidth: 1,
              targetMarker: { name: "block", args: { size: "6" } },
            },
          },
          id: "5f83bef7-8f4c-4b6a-ac51-b076c1e03042",
          router: { name: "er", args: { offset: "center" } },
          tools: {
            items: [{ name: "button-remove", args: { distance: -40 } }],
          },
          source: {
            cell: "2d3ccc77-be7c-4fa0-ae37-a9af4fdf6730",
            port: "outport2",
          },
          target: {
            cell: "6d787d4a-a68d-4a8c-a3b9-559eb5d4e231",
            port: "inport1",
          },
          zIndex: 12,
        },
        {
          shape: "edge",
          attrs: {
            line: {
              stroke: "#808080",
              strokeWidth: 1,
              targetMarker: { name: "block", args: { size: "6" } },
            },
          },
          id: "9017467c-167e-4f01-97dd-37d2d42bd0ed",
          router: { name: "er", args: { offset: "center" } },
          tools: {
            items: [{ name: "button-remove", args: { distance: -40 } }],
          },
          source: {
            cell: "6d787d4a-a68d-4a8c-a3b9-559eb5d4e231",
            port: "outport1",
          },
          target: {
            cell: "283ddff1-40c9-43aa-b581-b99706e65fb3",
            port: "inport1",
          },
          zIndex: 13,
        },
      ]);
      console.log("fromJson");
    },
    //20211110
    // 获取数据列表------------------20211115  可能后续需要将  其改为workflowdatalist
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/sys/visiworkflow/list"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          limit: 100,
          key: "",
          // page: this.pageIndex,
          // limit: this.pageSize,
          // key: this.dataForm.key,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.workflowdataList = data.page.list;
          this.workflowtotalPage = data.page.totalCount;
        } else {
          this.workflowdataList = [];
          this.workflowtotalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数   ---避免与其他函数冲突，可能需要改参数   1115
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    //20210805  zhang    右侧参数设置栏   design-panel
    handleFormLayoutChange(e) {
      this.formLayout = e.target.value;
    },
    callback(key) {
      console.log(key);
    },

    //20211115  获取左侧树形组件栏   算法模块节点列表
    // 获取数据列表
    getalgorithmDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/sys/visialgorithmnode/list"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          limit: 100,
          // key: "",
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.algorithmdataList = data.page.list;
          this.algorithmtotalPage = data.page.totalCount;
          //20211115 已成功
          console.log("20211115   左侧节点栏数据");
          console.log(this.algorithmdataList);
          this.createAlgorithmNode();
        } else {
          this.algorithmdataList = [];
          this.totalPage = 0;
          console.log("20211115   左侧节点栏数据  为空");
          console.log(this.algorithmdataList);
        }
        this.dataListLoading = false;
      });
    },
    //添加函数 ----根据数据库中的数据来创建画布中的节点， ----树形组件中的数据包括键
    // 左侧树形组件栏读取数据库表visi_algorithmnode中数据，添加至树形组件treedata中，并创建对应画布节点后添加至nodedata中，可通过点击树形组件栏在画布中创建对应节点的克隆。------已成功
    createAlgorithmNode() {
      this.treeData = [
        {
          title: "操作节点",
          key: "0-0",
          slots: {
            icon: "smile",
          },
          children: [
            // {
            //   title: "consume_artifact",
            //   key: "consume_artifact",
            //   slots: { icon: "meh" },
            // },
            // {
            //   title: "generate_artifact",
            //   key: "generate_artifact",
            //   scopedSlots: { icon: "custom" },
            // },
            // {
            //   title: "zdockertest",
            //   key: "zdockertest",
            //   scopedSlots: { icon: "custom" },
            // },
            {
              title: "条件节点",
              key: "条件节点",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "输入节点",
              key: "dataInputnode",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "输出节点",
              key: "dataOutputnode",
              scopedSlots: { icon: "custom" },
            },
             {
              title: "CSV文件转换节点",
              key: "CSVConversionnode",
              scopedSlots: { icon: "custom" },
            },
          ],
        },
        {
          title: "轮廓识别",
          key: "0-1",
          slots: {
            icon: "smile",
          },
          children: [
            {
              title: "contourTask1",
              key: "contourTask1",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "contourTask2",
              key: "contourTask2",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "contourTask3",
              key: "contourTask3",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "contourApproximate1",
              key: "contourApproximate1",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "contourApproximate2",
              key: "contourApproximate2",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "contourRect1",
              key: "contourRect1",
              scopedSlots: { icon: "custom" },
            },
            {
              title: "contourCircle2",
              key: "contourCircle2",
              scopedSlots: { icon: "custom" },
            },
          ],
        },
      ];

      for (var i = 0; i < this.algorithmdataList.length; i++) {
        // //遍历数组
        // console.log(i);
        // console.log(this.algorithmdataList[i].algonodeName);
        // console.log(this.algorithmdataList[i].algonodeImage);
        // console.log(JSON.parse(this.algorithmdataList[i].algoparatempJson)); //将string转化为Json
        // console.log(
        //   JSON.parse(this.algorithmdataList[i].algoparatempJson).Input
        // );
        // console.log(
        //   JSON.parse(this.algorithmdataList[i].algoparatempJson).Output
        // );
        // console.log("treeData");
        // console.log(this.treeData);

        // this.treeData[1].children.addNode({
        //       title: "this.algorithmdataList[i].algonodeName",
        //       key: "this.algorithmdataList[i].algonodeName",
        //       scopedSlots: { icon: "custom" },
        //     })
        var addalgotree = false; //标志 目录树是否已添加该节点

        for (var j = 0; j < this.treeData.length; j++) {
          if (
            this.treeData[j].title == this.algorithmdataList[i].algotreetype
          ) {
            // //判断是否已有该节点
            // for (var k = 0; k < this.treeData.children.length; k++) {
            //   if (
            //     this.treeData.children[k].key ==
            //     this.algorithmdataList[i].algonodeName
            //   ) {
            //     addalgotree = true;
            //     break;
            //   }
            // }
            // if (!addalgotree) {
            this.treeData[j].children.push({
              title: this.algorithmdataList[i].algonodeName,
              key: this.algorithmdataList[i].algonodeName,
              scopedSlots: { icon: "custom" },
            });

            addalgotree = true;
            // break;
            // }
          }
        }
        if (!addalgotree) {
          this.treeData.push({
            title: this.algorithmdataList[i].algotreetype,
            key: this.algorithmdataList[i].algotreetype,
            scopedSlots: { icon: "custom" },
            children: [
              {
                title: this.algorithmdataList[i].algonodeName,
                key: this.algorithmdataList[i].algonodeName,
                scopedSlots: { icon: "custom" },
              },
            ],
          });
        }
        // this.treeData[1].children.push({
        //   title: this.algorithmdataList[i].algonodeName,
        //   key: this.algorithmdataList[i].algonodeName,
        //   scopedSlots: { icon: "custom" },
        // });
        console.log(this.treeData);
        // var imageurl =
        //   "/src/assets/img/" + this.algorithmdataList[i].algonodeName + ".svg";
        //节点名称后跟随机参数
        if (
          this.algorithmdataList[i].algotreetype != "传统算法" &&
          this.algorithmdataList[i].algotreetype != "智能应用"
        ) {
          this.imageurl = require("@/assets/img/visisvg/" +
            this.algorithmdataList[i].algonodeName +
            ".svg");
        }

        var newalgonode = this.graph.createNode({
          x: 0,
          y: 0,
          // width: 170,
          // height: 30,
          shape: "template-node",
          // label: "consume_artifact",

          attrs: {
            label: {
              text: this.algorithmdataList[i].algonodeName, //"contour_task1",
              // text: this.algorithmdataList[i].algonodeName, //"contour_task1",
            },
            body: {
              // stroke: "#2CB9FF",
              // fill: "#2CB9FF",
              fill: "#d3ebf3",
            },
            // body: {
            //   stroke: "#DA2625",
            //   fill: "#DA2625",
            // },
            image: {
              "xlink:href": this.imageurl,
              // "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
              // "src/views/modules/visi/visisvg/算法.svg",  /src/assets/img/   ../../../assets/img/
              //可放图标
            },
          },
          data: {
            algonodeId: this.algorithmdataList[i].algonodeId,
            nodeName: this.algorithmdataList[i].algonodeName,
            templateName: this.algorithmdataList[i].algonodeName,
            templateImage: this.algorithmdataList[i].algonodeImage,
            templateCommand: {
              // 1: "sh",
              // 2: "-c",
              // 2:"\"{{inputs.parameters.message}}\""
            },
            //不确定命令暂时用哪种方式     如果添加属性的话哪一种好添加    ; 考虑动态添加属性和值，此处key为何值都行，主要是value较为重要
            // templateCommand2: [
            //   {
            //     1:"echo"
            //   },
            //   {
            //     2:"{{inputs.parameters.message}}"
            //   },
            // ],
            templateArgs: {
              // 1: "cat /tmp/message",
            },
            algoparaInput: JSON.parse(
              this.algorithmdataList[i].algoparatempJson
            ).Input,
            algoparaOutput: JSON.parse(
              this.algorithmdataList[i].algoparatempJson
            ).Output,
            algoparaOutAddress: this.algorithmdataList[i].algoparaoutputAddress,
            algonodeSource: [],

            inputsparameters: JSON.parse(
              this.algorithmdataList[i].algoparatempJson
            ).Input.ParameterInput,
            inputsartifacts: JSON.parse(
              this.algorithmdataList[i].algoparatempJson
            ).Input.FileInput,
            //20210916    argument(parameters以及arguments)均 应是在调用的过程中填写具体值
            //应对应input中的各项参数设置对应参数
            argumentsparameters: JSON.parse(
              this.algorithmdataList[i].algoparatempJson
            ).Input.ParameterInput,
            argumentsartifacts: JSON.parse(
              this.algorithmdataList[i].algoparatempJson
            ).Input.FileInput,
            outputsparameters: JSON.parse(
              this.algorithmdataList[i].algoparatempJson
            ).Output.ParameterOutput,
            outputsartifacts: JSON.parse(
              this.algorithmdataList[i].algoparatempJson
            ).Output.FileOutput,
            //获取到的连接线源的数据      连接线的源的输出数据
            sourcedatalist: [],
            inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
            inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
            wftempname: "", //保存Template name
          },
        });
        this.nodedata.push(newalgonode);
        console.log(newalgonode.getData());
      }
    },
    //20211115  左侧栏新增节点测试，未完成 ---------仅测试通过,可存入，需结合新增前端页面重新配置
    addalgorithmdata() {
      this.$http({
        url: this.$http.adornUrl("/sys/visialgorithmnode/save"),
        method: "post",
        data: this.$http.adornData({
          userId: this.$store.state.user.id,

          algonodeId: undefined,
          algonodeName: "contourCircle2",
          algonodeImage: "zvinjodocker/contours_circle2:20211015",
          algoparatempJson: JSON.stringify({
            Input: [
              { paraname: " cnt", paratype: " ", paradesc: " " },
              { paraname: "contour", paratype: " ", paradesc: " " },
            ],
            Output: [
              { paraname: " ", paratype: " ", paradesc: " " },
              { paraname: "", paratype: " ", paradesc: " " },
            ],
          }),
          algoparaoutputAddress: "", //this.dataForm.algoparaoutputAddress
          // userId: this.dataForm.userId,
          // algonodeId: this.dataForm.algonodeId || undefined,
          // algonodeName: this.dataForm.algonodeName,
          // algonodeImage: this.dataForm.algonodeImage,
          // algoparatempJson: this.dataForm.algoparatempJson,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          Message.success("操作成功");
          // this.$message({
          //   message: "操作成功",
          //   type: "success",
          //   duration: 1500,
          //   onClose: () => {
          //     this.visible = false;
          //     this.$emit("refreshDataList");
          //   },
          // });
        } else {
          Message.error(data.msg);
          // this.$message.error(data.msg);
        }
      });
      // this.$refs['dataForm'].validate((valid) => {
      //   if (valid) {
      //     this.$http({
      //       url: this.$http.adornUrl(`/generator/visialgorithmnode/${!this.dataForm.algonodeId ? 'save' : 'update'}`),
      //       method: 'post',
      //       data: this.$http.adornData({
      //         'userId': this.dataForm.userId,
      //         'algonodeId': this.dataForm.algonodeId || undefined,
      //         'algonodeName': this.dataForm.algonodeName,
      //         'algonodeImage': this.dataForm.algonodeImage,
      //         'algoparatempJson': this.dataForm.algoparatempJson
      //       })
      //     }).then(({data}) => {
      //       if (data && data.code === 0) {
      //         this.$message({
      //           message: '操作成功',
      //           type: 'success',
      //           duration: 1500,
      //           onClose: () => {
      //             this.visible = false
      //             this.$emit('refreshDataList')
      //           }
      //         })
      //       } else {
      //         this.$message.error(data.msg)
      //       }
      //     })
      //   }
      // })
    },

    //保存实验名称
    primaryExperimentConfig(args) {
      console.log("保存实验名称");
      console.log(args);
      this.experimentName = args[0];
      console.log(this.experimentName);
    },

    //20210810  保存条件节点设置
    primaryConNodeConfig(args) {
      this.graph
        .getCellById(args[1].id)
        .setData({ inputcondition: args[1].getData().inputcondition });
      this.graph
        .getCellById(args[1].id)
        .setData({ nodeName: args[1].getData().nodeName });

      //20210811  测试用
      // //model    获取节点信息
      // //遍历节点信息，   比对节点id   然后赋值
      // console.log("cell:"+args[1]);
      // console.log("cell:"+args[1].id);
      // //返回 [Object,Object ]
      // console.log("对应id的node:"+this.graph.getCellById(args[1]));
      // console.log("更改过的inputcondition:"+args[1].getData("inputcondition"));
      // console.log(args[1].getData().inputcondition);
      // const condition = args[1].getData().inputcondition;
      // this.graph.getCellById(args[1].id).setData({inputcondition: condition});
      // console.log(args[1])
      // console.log("graph node:"+this.graph.getNodes());
    },
    //20210811    保存templateNode节点设置    仅参数设置
    primaryNodeConfig(args) {
      var primarydata = args[1].getData();
      //先保存一遍，做处理在保存一遍
      console.log("更改前");
      console.log(this.graph.getCellById(args[1].id));
      //此部分应该只是展示，不可更改
      // this.graph.getCellById(args[1].id).setData({templateName:primarydata.templateName});
      // this.graph.getCellById(args[1].id).setData({templateImage: primarydata.templateImage});
      // this.graph.getCellById(args[1].id).setData({templateCommand: primarydata.templateCommand});
      // this.graph.getCellById(args[1].id).setData({templateArgs: primarydata.templateArgs});

      // this.graph.getCellById(args[1].id).setData({inputsparameters: primarydata.inputsparameters});    //应该是不变的
      // this.graph.getCellById(args[1].id).setData({outputsparameters: primarydata.outputsparameters});   //应该是不变的
      //仅可更改argumentsparameters       具体对接  还需实现后端
      //20211124 primarydata

      //保存参数类型
      for (var i = 0; i < primarydata.argumentsparameters.length; i++) {
        if (primarydata.argumentsparameters[i].hasOwnProperty("quotevalue")) {
          //成功
          // if (primarydata.argumentsparameters[i].quotevalue && primarydata.argumentsparameters[i].quotevalue.length == 2) {
          //   primarydata.argumentsparameters[i].valuefrom =
          //     "{{tasks." +
          //     primarydata.argumentsparameters[i].quotevalue[0] +
          //     ".outputs.parameters." +
          //     primarydata.argumentsparameters[i].quotevalue[1] +
          //     "}}";

          //   console.log(primarydata.argumentsparameters[i].valuefrom)
          // }
          // 引用其他算法节点参数类型输入改为多选节点之后
          primarydata.argumentsparameters[i].valuefrom = [];
          if (
            primarydata.argumentsparameters[i].quotevalue &&
            primarydata.argumentsparameters[i].quotevalue.length != 0
          ) {
            // primarydata.argumentsparameters[i].valuefrom = [];
            for (
              var j = 0;
              j < primarydata.argumentsparameters[i].quotevalue.length;
              j++
            ) {
              console.log(
                " quotevalue.length " +
                  primarydata.argumentsparameters[i].quotevalue.length
              );
              primarydata.argumentsparameters[i].valuefrom.push(
                "{{tasks." +
                  primarydata.argumentsparameters[i].quotevalue[j][0] +
                  ".outputs.parameters." +
                  primarydata.argumentsparameters[i].quotevalue[j][1] +
                  "}}"
              );
            }
            console.log(primarydata.argumentsparameters[i].valuefrom);
          }
        }
      }

      //保存文件类型
      // const curfilelist = [];
      let filedata = new FormData(); //保存文件内容，传递给后端---遍历完所有的argumentartifact之后统一上传
      for (var i = 0; i < primarydata.argumentsartifacts.length; i++) {
        if (primarydata.argumentsartifacts[i].hasOwnProperty("quotevalue")) {
          if (
            primarydata.argumentsartifacts[i].quotevalue &&
            primarydata.argumentsartifacts[i].quotevalue.length == 2
          ) {
            primarydata.argumentsartifacts[i].valuefrom =
              "{{tasks." +
              primarydata.argumentsartifacts[i].quotevalue[0] +
              ".outputs.artifacts." +
              primarydata.argumentsartifacts[i].quotevalue[1] +
              "}}";
          }
        }
        //1125 需后端保存至 minio  中，返回地址  -----或者在画布提交之后，上传，在应用具体地址信息
        if (primarydata.argumentsartifacts[i].hasOwnProperty("filelist")) {
          if (primarydata.argumentsartifacts[i].filelist.length != 0) {
            const curfilelist = [];
            // const curfileurl = [];   //设定一次只能传一个
            // let filedata = new FormData(); //保存文件内容，传递给后端
            for (
              var j = 0;
              j < primarydata.argumentsartifacts[i].filelist.length;
              j++
            ) {
              curfilelist.push(
                primarydata.argumentsartifacts[i].filelist[j].raw
              );
              // filedata.append("file",primarydata.argumentsartifacts[i].filelist[j].raw);
            }
            primarydata.argumentsartifacts[i].filelist = curfilelist;
            // filedata.append("file"+primarydata.argumentsartifacts[i].paraname,primarydata.argumentsartifacts[i].filelist[0].raw);//每个参数仅可输入一个文件
            filedata.append(
              primarydata.argumentsartifacts[i].paraname,
              curfilelist[0]
            ); //每个参数仅可输入一个文件
            // console.log(filedata.get(primarydata.argumentsartifacts[i].paraname));
          }
        }
      }

      if (filedata != null) {
        var jsonfileurl = {};
        this.$http({
          url: this.$http.adornUrl("/visi/visiworkflow/savefile"),
          method: "post",
          data: filedata,
        }).then(({ data }) => {
          if (data && data.code === 0) {
            jsonfileurl = data.jsonfileurl;

            for (var i = 0; i < primarydata.argumentsartifacts.length; i++) {
              if (
                jsonfileurl.hasOwnProperty(
                  primarydata.argumentsartifacts[i].paraname
                )
              ) {
                // console.log(
                //   jsonfileurl[primarydata.argumentsartifacts[i].paraname]
                // );
                primarydata.argumentsartifacts[i].fileurls.push(
                  jsonfileurl[primarydata.argumentsartifacts[i].paraname]
                );
                this.graph.getCellById(args[1].id).setData(primarydata); //终于好了 20211130
              }
            }
            // console.log(data.jsonfileurl)
            // fileurls = data.fileurls;
            // curfileurl.push(data.fileurls);
            /////设置的都是  i,为什么无论怎样都会赋值给 0
            // primarydata.argumentsartifacts[i].fileurls=data.fileurls;
            // console.log("i")
            // this.graph.getCellById(args[1].id).setData(primarydata);    //成功成功

            // this.$message({
            //   message: "操作成功",
            //   type: "success",
            //   duration: 1500,
            //   onClose: () => {
            //     // this.getDataList();
            //   },
            // });
          } else {
            Message.error(data.msg);
            // this.$message.error(data.msg);
          }
        });
      }

      // this.graph.getCellById(args[1].id).setData(primarydata); //对应input   保存相应输入的值
      this.graph
        .getCellById(args[1].id)
        .setData({ argumentsparameters: primarydata.argumentsparameters }); //对应input   保存相应输入的值
      this.graph
        .getCellById(args[1].id)
        .setData({ argumentsartifacts: primarydata.argumentsartifacts }); //对应input   保存相应输入的值

      // console.log("当前节点值");
      // console.log(this.graph.getCellById(args[1].id).getData());
      // console.log(
      //   this.graph.getCellById(args[1].id).getData().argumentsartifacts
      // );
      this.graph
        .getCellById(args[1].id)
        .setData({ nodeName: primarydata.nodeName }); //对应input   保存相应输入的值
      // console.log("cell:" + args[1].id);
      // console.log("对应id的node:" + this.graph.getCellById(args[1]).toString());
      // console.log(this.graph.getCellById(args[1].id));

      //20211119
      this.graph
        .getCellById(args[1].id)
        .setData({ algoparaInput: primarydata.algoparaInput }); //对应input   保存相应输入的值
      this.graph
        .getCellById(args[1].id)
        .setData({ algonodeSource: primarydata.algonodeSource });
      // console.log("primary-------------");
      // console.log(this.graph.getCellById(args[1].id).getData().algoparaInput);
      // console.log(this.graph.getCellById(args[1].id).getData().algoparaOutput);
      // 遍历algoparaInput中algoparaGetInput中的数据，添加文件地址，后保存到映射关系数据库中
      const curalgoparaInput = primarydata.algoparaInput;
      for (var i = 0; i < curalgoparaInput.getInput.length; i++) {
        for (var j = 0; j < primarydata.algonodeSource.length; j++) {
          if (curalgoparaInput.getInput[i].paravalue != null) {
            if (
              curalgoparaInput.getInput[i].paravalue[0] ==
              primarydata.algonodeSource[j].getData().nodeName
            ) {
              curalgoparaInput.getInput[i].paravalue.push(
                primarydata.algonodeSource[j].getData().algoparaOutAddress
              );
            }
          }
        }
      }
      //202111123  保存在  节点数据中  将curalgoparaInput 保存为 algoparaInput
      // console.log("this.graph.getCellById(args[1].id).getData().algoparaInput");
      this.graph
        .getCellById(args[1].id)
        .setData({ algoparaInput: curalgoparaInput }); //对应input   保存相应输入的值
      // console.log(this.graph.getCellById(args[1].id).getData().algoparaInput);
      // console.log(
      //   "遍历algoparaInput中algoparaGetInput中的数据，添加文件地址，后保存到映射关系数据库中"
      // );
      // console.log(curalgoparaInput);
      // 20211123 该部分代码每次保存都会在数据库中添加新的记录
      // this.$http({
      //   url: this.$http.adornUrl("/sys/visiworkflowparamap/save"),
      //   method: "post",
      //   data: this.$http.adornData({
      //     paramapId: undefined,
      //     userId: this.$store.state.user.id,
      //     workflowId: "",
      //     inputparaNodename: this.graph.getCellById(args[1].id).getData()
      //       .nodeName,
      //     inputparaJson: JSON.stringify(curalgoparaInput),
      //   }),
      // }).then(({ data }) => {
      //   if (data && data.code === 0) {
      //     this.$message({
      //       message: "操作成功",
      //       type: "success",
      //       duration: 1500,
      //       onClose: () => {
      //         this.visible = false;
      //         // this.$emit('refreshDataList')
      //       },
      //     });
      //   } else {
      //     this.$message.error(data.msg);
      //   }
      // });
    },
    primaryCSVselectNodeconfig(args){
     
     
      var primarydata = args[1].getData();
      this.graph.getCellById(args[1].id).setData(primarydata); 
      // console.log("转换节点新数据")
      // console.log(args[1].getData())
      // console.log(this.graph.getCellById(args[1].id).getData())
    },
    //20210812   左侧树形组件
    handleDragStart(node, ev) {
      console.log("drag start", node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log("tree drag enter: ", dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      console.log("tree drag leave: ", dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      console.log("tree drag over: ", dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      console.log("tree drag end: ", dropNode && dropNode.label, dropType);
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log("tree drop: ", dropNode.label, dropType);
    },
    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.data.label === "二级 3-1") {
        return type !== "inner";
      } else {
        return true;
      }
    },
    allowDrag(draggingNode) {
      return draggingNode.data.label.indexOf("三级 3-2-2") === -1;
    },
    //20210813
    onSelect(selectedKeys, info) {
      console.log("selected", selectedKeys, info);
    },
    //20210813   dnd
    startDrag(e) {
      // console.log("拖拽前");
      // const target = this.currentTarget
      const target = e.currentTarget;
      const type = target.getAttribute("data-type");
      const node = this.graph.createNode({
        width: 100,
        height: 40,
        attrs: {
          label: {
            text: "circle",
            fill: "#6a6c8a",
          },
          body: {
            stroke: "#31d0c6",
            strokeWidth: 2,
          },
        },
      });
      // console.log("拖拽");

      this.dnd.start(node, e);
      //删除.nativeEvent  前会出错
      // this.dnd.start(node, e.nativeEvent);
    },

    //20210926   树形组件
    onSelect(selectedKeys, info) {
      // console.log("selected", selectedKeys, info);
      // console.log(selectedKeys);
      // console.log(info);

      const zdocker_test = this.graph.createNode({
        // width: 170,
        // height: 30,
        shape: "template-node",
        // label: "consume_artifact",

        attrs: {
          label: {
            text: "zdockertest",
          },
          body: {
            // stroke: "#2CB9FF",
            // fill: "#2CB9FF",
            fill: "#d3ebf3",
          },
          // body: {
          //   stroke: "#DA2625",
          //   fill: "#DA2625",
          // },
          image: {
            "xlink:href":
              "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
            // "xlink:href":  "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg",
            //可放图标
          },
        },
        data: {
          nodeName: "zdockertest",
          templateName: "print-message",
          templateImage: "zvinjodocker/zdockertest1:20211011",
          templateCommand: {
            // 1: "sh",
            // 2: "-c",
            // 2:"\"{{inputs.parameters.message}}\""
          },
          //不确定命令暂时用哪种方式     如果添加属性的话哪一种好添加    ; 考虑动态添加属性和值，此处key为何值都行，主要是value较为重要
          // templateCommand2: [
          //   {
          //     1:"echo"
          //   },
          //   {
          //     2:"{{inputs.parameters.message}}"
          //   },
          // ],
          templateArgs: {
            // 1: "cat /tmp/message",
          },
          inputsparameters: [],
          inputsartifacts: [
            //此container 需要输入的参数，固定
            // {
            //   name: "message",
            //   path: "/tmp/message",
            // },
          ],
          //20210916    argument(parameters以及arguments)均 应是在调用的过程中填写具体值
          //应对应input中的各项参数设置对应参数
          argumentsparameters: [],
          argumentsartifacts: [
            //调用container(该template)输入的参数，后续会变(根据输入弹窗变)
            // {
            //   name: "message",
            //   valuefrom: "{{tasks.whalesay.outputs.artifacts.hello-art}}",
            // },
          ],

          outputsparameters: [],

          outputsartifacts: [],
          //获取到的连接线源的数据      连接线的源的输出数据
          sourcedatalist: [
            // {
            //   name: "source1",
            // },
            // {
            //   name: "source2",
            // },
          ],
          inputnodefilemap: [], //引用输入节点的   文件列表，包含文件名和url
          inputnodefilevalue: [], //用户选择的输入节点的文件，存储文件url,后端调用
        },
      });
      //20211012
      // 将树形节点的键与  节点名称对应起来。
      // this.graph.addNode(zdocker_test);

      // this.nodedata.addNode(consume_artifact);
      // this.nodedata.appendChild(consume_artifact);
      // this.nodedata.push(consume_artifact);
      // console.log("nodedata");
      // console.log(this.nodedata);
      // console.log(this.nodedata[0])
      //通过遍历节点列表nodedata中键  selectedKeys与节点中attrs.label.text相匹配，生成对应的节点
      //先将所有的节点创建成功后保存在this.nodedata中，点击对应节点后   匹配正确后将节点加入到画布中
      // console.log(this.nodedata[0].attrs.label.text)
      // this.graph.addNode(this.nodedata[0])
      // console.log(this.nodedata);
      var nodenamenum = Math.floor(Math.random() * 1000); //1000以内随机整数
      for (var i = 0; i < this.nodedata.length; i++) {
        //遍历数组
        if (selectedKeys.toString() === this.nodedata[i].attrs.label.text) {
          // console.log(selectedKeys.toString());
          var clonenode = this.nodedata[i].clone();
          // clonenode.getElementById
          //更改nodeName  及templateName 后添加随机数
          clonenode.setData({
            nodeName: clonenode.getData().nodeName + nodenamenum,
          });
          clonenode.setData({
            templateName: clonenode.getData().templateName + nodenamenum,
          });
          this.graph.addNode(clonenode);
          // this.graph.addNode(this.nodedata[i].clone());
        } else {
          // console.log(selectedKeys.toString());
        }
        // console.log(i);
      }
    },
    onCheck(checkedKeys, info) {
      console.log("onCheck", checkedKeys, info);
    },
    //设置布局可拖动改变大小
    dragControllerDiv: function () {
      // var resize = document.getElementsByClassName("resize");
      // var left = document.getElementsByClassName("left");
      // var mid = document.getElementsByClassName("right");
      // var box = document.getElementsByClassName("box");
      // for (let i = 0; i < resize.length; i++) {
      //   // 鼠标按下事件
      //   resize[i].onmousedown = function (e) {
      //     //颜色改变提醒
      //     resize[i].style.background = "#818181";
      //     var startX = e.clientX;

      //     console.log("拖动改变两侧大小")
      //     console.log("startx");
      //     console.log(startX);

      //     // 鼠标拖动事件
      //     document.onmousemove = function (e) {
      //       resize[i].left = startX;
      //       var endX = e.clientX;
      //       var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度

      //       console.log("movelen");
      //       console.log(moveLen);

      //       var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
      //       console.log("maxt ");
      //       console.log(maxT);
      //       if (moveLen < 800) moveLen = 800; // 左边区域的最小宽度为32px
      //       if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px
      //       resize[i].style.left = moveLen; // 设置左侧区域的宽度
      //       for (let j = 0; j < left.length; j++) {
      //         left[j].style.width =(moveLen / document.body.clientWidth) * 100 + "%";
      //         mid[j].style.width = ((box[i].clientWidth - moveLen) / document.body.clientWidth -0.008) *100 +"%";
      //       }
      //     };
      //     // 鼠标松开事件
      //     document.onmouseup = function (evt) {
      //       //颜色恢复
      //       resize[i].style.background = "#d6d6d6";
      //       document.onmousemove = null;
      //       document.onmouseup = null;
      //       resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
      //     };
      //     resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
      //     return false;
      //   };
      // }

      var resize = document.getElementsByClassName("resize");
      var left = document.getElementsByClassName("left");
      var mid = document.getElementsByClassName("right");
      var box = document.getElementsByClassName("box");
      for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].onmousedown = function (e) {
          //颜色改变提醒
          resize[i].style.background = "#818181";
          var startX = e.clientX;
          resize[i].left = resize[i].offsetLeft;
          // 鼠标拖动事件
          document.onmousemove = function (e) {
            var endX = e.clientX;
            var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

            if (moveLen < 800) moveLen = 800; // 左边区域的最小宽度为32px
            if (moveLen > maxT - 300) moveLen = maxT - 300; //右边区域最小宽度为150px

            resize[i].style.left = moveLen; // 设置左侧区域的宽度

            for (let j = 0; j < left.length; j++) {
              left[j].style.width = moveLen + "px";
              mid[j].style.width = box[i].clientWidth - moveLen - 10 + "px";
            }
          };
          // 鼠标松开事件
          document.onmouseup = function (evt) {
            //颜色恢复
            resize[i].style.background = "#d6d6d6";
            document.onmousemove = null;
            document.onmouseup = null;
            resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          };
          resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false;
        };
      }
    },

    //保存输入节点内容
    primaryInputnodeConfig(args) {
      // console.log("保存输入节点");
      // console.log(args[0].id);

      // // this.$emit("refreshDataList",this.cell,this.st_dataListvalue,this.dy_dataListvalue,this.fileList,this.allfilemap);//各个参数
      // this.graph.getCellById(args[0].id).setData({ st_dataListvalue: args[1] });
      // this.graph.getCellById(args[0].id).setData({ dy_dataListvalue: args[2] });
      // this.graph.getCellById(args[0].id).setData({ fileList: args[3] });
      // this.graph.getCellById(args[0].id).setData({ allfilemap: args[4] });
      // this.$emit("refreshinputnode",this.cell,celldata);

      // console.log(args[1].allfilemap);

      // this.graph.getCellById(args[0].id).setData(args[1]);
      //以该方式  福赋值字符串型可以，数组类型不可以
      // this.graph.getCellById(args[0].id).setData({allfilemap: this.graph.getCellById(args[0].id).getData().allfilemap.concat(args[1].allfilemap)})
      this.graph.getCellById(args[0].id).replaceData(args[1]); /////成功成功
      console.log(this.graph.getCellById(args[0]));
    },
  },
  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 lang="scss">
// 20210715 zhang  添加   布局
#components-layout-demo-responsive .logo {
  height: 32px;
  // background: rgba(255, 255, 255, 0.959);
  margin: 16px;
  display: block;
  background: #dcdfe6;
}
.dividesign {
  height: 32px;
  // background: rgba(255, 255, 255, 0.959);
  margin: 16px;
  display: block;
  // background: #dcdfe6;
  // display: block;
  // height: 1px;
  // width: 100%;
  // margin: 24px 0;
  background-color: #dcdfe6;
  // position: relative;
}

// .app-stencil {
//   width: 250px;
//   height: 100%;
//   border: 1px solid #f0f0f0;
//   position: relative;
// }
.content {
  font-family: sans-serif;
  // display: flex;
  width: 100%;
  background: #dcdfe6;
}

// .app-stencil {
//   width: 250px;
//   border: 1px solid #f0f0f0;
//   position: relative;
// }

.app-content {
  // flex: 1;
  // height: 520px;
  height: 100%;
  width: 100%;
  margin-left: 8px;
  margin-right: 8px;
  box-shadow: 0 0 10px 1px #e9e9e9;
  // background: #dcdfe6;
}
.divi {
  margin: 1px 0;
}

.x6-node [magnet="true"] {
  cursor: crosshair;
  transition: none;
}

.x6-node [magnet="true"]:hover {
  opacity: 1;
}

.x6-node [magnet="true"][port-group="in"] {
  cursor: move;
}

.my-port {
  width: 100%;
  height: 100%;
  border: 1px solid #808080;
  border-radius: 100%;
  background: #eee;
}

.my-port.connected {
  width: 0;
  height: 0;
  margin-top: 5px;
  margin-left: 1px;
  border-width: 5px 4px 0;
  border-style: solid;
  border-color: #808080 transparent transparent;
  border-radius: 0;
  background-color: transparent;
}

.x6-port-body.available {
  overflow: visible;
}

.x6-port-body.available body {
  overflow: visible;
}

.x6-port-body.available body > div::before {
  content: " ";
  float: left;
  width: 20px;
  height: 20px;
  margin-top: -5px;
  margin-left: -5px;
  border-radius: 50%;
  background-color: rgba(57, 202, 116, 0.6);
  box-sizing: border-box;
}

.x6-port-body.available body > div::after {
  content: " ";
  float: left;
  clear: both;
  width: 10px;
  height: 10px;
  margin-top: -15px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #39ca74;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

.x6-port-body.adsorbed {
  overflow: visible;
}

.x6-port-body.adsorbed body {
  overflow: visible;
}

.x6-port-body.adsorbed body > div::before {
  content: " ";
  float: left;
  width: 28px;
  height: 28px;
  margin-top: -9px;
  margin-left: -9px;
  border-radius: 50%;
  background-color: rgba(57, 202, 116, 0.6);
  box-sizing: border-box;
}

.x6-port-body.adsorbed body > div::after {
  content: " ";
  float: left;
  clear: both;
  width: 10px;
  height: 10px;
  margin-top: -19px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #39ca74;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}
//20210805    design-panel
.form {
  height: calc(100vh - 100px);
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
}
.ant-tabs-tabpane {
  background: #fff;
  padding: 5px;
}
//20210812  zhang   左侧树形组件栏
.leftDivTree {
  width: 100%;
  height: 93.7%;
  // padding: 10 0px;
  // border:0.2px solid #000;
  // overflow: scroll;
}
.leftDivTree ::v-deep .iconfont {
  margin-right: 8px;
}
.leftDivTree ::v-deep .el-tree-node {
  display: table;
  min-width: 100%;
}
// .leftDivTitle {
//   color: #fff;
//   border-color: #409eff;
//   font-size: 14px;

// }
//20210813   左侧组件
.dnd-rect {
  width: 80px;
  height: 20px;
  border: 2px solid #31d0c6;
  text-align: center;
  line-height: 40px;
  margin: 16px;
  cursor: move;
}

//设置布局 可拖动改变大小
.left {
  width: 69.2%;
  // width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  float: left;
  display: flex;
}
.resize {
  cursor: col-resize;
  float: left;
  position: relative;
  top: 10%;
  background-color: #d6d6d6;
  border-radius: 5px;
  margin-top: -10px;
  width: 10px;
  // height: 50px;
  height: 70%;
  line-height: 50px;
  // line-height: 100%;
  // text-align: center;
  background-size: cover;
  background-position: center;
  font-size: 32px;
  color: white;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {
  color: #444444;
}
.right {
  // height: 7.8rem;
  height: 100%;
  float: left;
  width: 30%;
  display: flex;
}
.box {
  width: 100%;
  // height: 7.8rem;
  height: 100%;
}
.boxform {
  width: 100%;
  height: 100%;
  flex: 1;
  background-color: #fff;
}
.boxformitem {
  border-style: solid;
  border-width: 1px;
  border-color: #dcdfe6;
}
// .el-icon-video-play:before {
//   content: "提交";
// }
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
.divi {
  display: block;
  height: 1px;
  width: 100%;
  margin: 24px 0;
  background-color: #dcdfe6;
  position: relative;
}
.divi2 {
  display: block;
  height: 1px;
  width: 100%;
  position: relative;
}
.x6-graph-scroller {
  min-height: 800px;
}
</style>