<template>
 <div class="h100 process-echarts">

   <div class="t"><div class="my-b-title">各通道的运行状态图</div></div>
   <div class="de-tu"></div>
 </div>
</template>

<script>
import * as d3 from 'd3'
import {onBeforeMount} from "vue";
import {getProcessChartsData} from "@/service/data-gather-watch/process-charts";
import {isEmptyCheck} from "@/unit/validate";

export default {
  name: "ProcessCharts",
  setup() {
    function isShowUnitNode(obj){


      if(qsmzq_data[d3.select(obj).attr('id')]["isShow"]){
        qsmzq_data[d3.select(obj).attr('id')]["isShow"] = false;
      }else{

        for(let key in qsmzq_data){
          console.log(' qsmzq_data[key]',key, qsmzq_data)
          try {
            qsmzq_data[key]["isShow"] = false;
          }catch {

          }
        }
        console.log('幺四希纳是的',d3.select(obj))
        qsmzq_data[d3.select(obj).attr('id')]["isShow"] = true;
      }
      d3.select(".de-tu").selectAll('*').remove();
      loadNode();
      loadLine();
    }
    function drawLine_polyline(startNode,endNode,obj_class,color){

      //计算折线
      var path = "M ";
      var half = (parseFloat(allObject[endNode].attr("x"))
        - parseFloat(parseFloat(allObject[startNode].attr("x")))) / 2;

      if(startNode == "gxjh"){
        var half = (parseFloat(allObject[endNode].attr("x"))
          - parseFloat(parseFloat(allObject[startNode].attr("x")))
          + parseFloat(parseFloat(allObject[startNode].attr("width")))) / 2;
      }

      //起点
      var startNode_width =  parseFloat(allObject[startNode].attr("x"))
        + parseFloat(allObject[startNode].attr("width"));

      var startNode_height = parseFloat(allObject[startNode].attr("y")) +
        parseFloat(allObject[startNode].attr("height")) / 2;
      path = path + startNode_width + " " + startNode_height;
      //折线
      path = path + " L " + (parseFloat(parseFloat(allObject[startNode].attr("x"))) + half) +" "+startNode_height;


      var endNode_height = parseFloat(allObject[endNode].attr("y")) +
        parseFloat(allObject[endNode].attr("height")) / 2;
      var endNode_width =  allObject[endNode].attr("x");
      //折线
      path = path + " L"+(parseFloat(parseFloat(allObject[startNode].attr("x"))) + half)+" "+endNode_height;
      //终点
      path = path + " L"+endNode_width+" "+endNode_height;

      //第一条连接线
      svg.append("g").attr("class",obj_class).attr("transform","translate(0,0)").append("path")
        .attr("d",path)
        .attr("stroke",color)
        .attr("stroke-width","2")
        .style("stroke-dasharray","5,5")
        .attr("fill","none");
    }
    function drawLine_straight(startNode,endNode,obj_class,color){
      var startNode_width =  parseFloat(allObject[startNode].attr("x"))
        + parseFloat(allObject[startNode].attr("width"));
      var startNode_height = parseFloat(allObject[startNode].attr("y")) +
        parseFloat(allObject[startNode].attr("height")) / 2;
      var endNode_height = parseFloat(allObject[endNode].attr("y")) +
        parseFloat(allObject[endNode].attr("height")) / 2;
      var endNode_width =  allObject[endNode].attr("x");
      //第一条连接线
      svg.append("g").attr("class",obj_class).attr("transform","translate(0,0)").append("path")
        .attr("d","M "+startNode_width +" "+ startNode_height+"  L "+endNode_width+" "+endNode_height+"")
        .attr("stroke",color)
        .attr("stroke-width","2")
        .style("stroke-dasharray","5,5")
        .attr("fill","none");
    }
    function drawLine(startNode,endNode,type,obj_class,color){
      switch (type) {
        case "straight":
          drawLine_straight(startNode,endNode,obj_class,color);
          break;
        case "polyline":
          drawLine_polyline(startNode,endNode,obj_class,color);
          break;
      }
    }
    function drawNode(key,width,height,x,y,text,img,tempClass){
      let temp_rect = svg.append("image").attr("transform","translate(0,0)")
        .attr("width",parseFloat(width))
        .attr("height",parseFloat(height))
        .attr("fill", "white")
        .attr("border","2px")
        .style("stroke", "#000")
        .attr("x",parseFloat(x))
        .attr("y",parseFloat(y))
        .attr("xlink:href",img)
        .attr("id",key);


      //设置系统文本
      let temp_text1 = svg.append("text")
        .attr("x",parseFloat(temp_rect.attr("x")) + parseFloat(temp_rect.attr("width")) / 2)
        .attr("y",parseFloat(temp_rect.attr("y")) + parseFloat(temp_rect.attr("height")) + 19)
        .attr('stroke',"black")
        .attr("font-family","cursive")
        .attr("font-size","14")
        .attr("class","font_text").attr("text-anchor","middle")
        .text(text);
      if(!isEmptyCheck(tempClass)){
        temp_rect.attr("class",tempClass);
        temp_text1.attr("class",tempClass);
      }
      allObject[key] = temp_rect;
    }
    function getColumnIndex(type){
      var index = 0;
      if(qsmzq_data["isRkdw"]){
        index++;
      }
      if(type == "rkdw"){
        return index;
      }

      if(qsmzq_data["rkQzjNum"] > 0){
        index++;
      }
      if(type == "rkqzj"){
        return index;
      }

      index++;

      if(type == "gxjh"){
        return index;
      }

      if(qsmzq_data["ckQzjNum"] > 0){
        index++;
      }
      if(type == "ckqzj"){
        return index;
      }


      if(qsmzq_data["isCkdw"]){
        index++;
      }

      if(type == "ckdw"){
        return index;
      }

      return index;
    }
    function getColumnNumber(){
      let index = 2;

      if(qsmzq_data["ckQzjNum"] > 0){
        index++;
      }
      if(qsmzq_data["rkQzjNum"] > 0){
        index++;
      }

      if(qsmzq_data["isRkdw"]){
        index++;
      }

      if(qsmzq_data["isCkdw"]){
        index++;
      }
      return index;
    }
    function loadLine(){
      //入库节点 连接线
      for(var key in qsmzq_data){
        if(qsmzq_data[key]["DATASOURCE_TYPE"] != "0"){
          continue;
        }
        if(qsmzq_data[key]["DATASOURCE_STATUS"] == "1"){
          drawLine(qsmzq_data[key]["DATASOURCE_ID"],"gxjh","polyline","qzjClass","#0373ca");
        } else if (qsmzq_data[key]["DATASOURCE_STATUS"] == "2") {
          drawLine(qsmzq_data[key]["DATASOURCE_ID"], "gxjh", "polyline", "qzjClass", "#ff120c");
        }else if (qsmzq_data[key]["DATASOURCE_STATUS"] == "0") {
          drawLine(qsmzq_data[key]["DATASOURCE_ID"], "gxjh", "polyline", "qzjClass", "#727272");
        }


        if(qsmzq_data[key]["DATASOURCE_TYPE"] != "0" || isEmptyCheck(qsmzq_data[key]["childs"])) {
          continue;
        }

        if(!qsmzq_data[key]["isShow"]){
          continue;
        }
        //循环连接 单位和入库前前置机
        for(var j = 0 ; j < qsmzq_data[key]["childs"].length ; j++){
          if(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_STATUS"]=="1"){
            drawLine(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_ID"],qsmzq_data[key]["DATASOURCE_ID"],"polyline","unitClass","#0373ca");
            continue;
          }
          if(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_STATUS"]=="0"){
            drawLine(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_ID"],qsmzq_data[key]["DATASOURCE_ID"],"polyline","unitClass","#727272");
            continue;

          }
          drawLine(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_ID"],qsmzq_data[key]["DATASOURCE_ID"],"polyline","unitClass","#ff120c");
        }
      }

      //出库节点 连接线
      for(var key in qsmzq_data){
        if(qsmzq_data[key]["DATASOURCE_TYPE"] != "1"){
          continue;
        }
        if(qsmzq_data[key]["DATASOURCE_STATUS"] == "1"){
          drawLine("gxjh",qsmzq_data[key]["DATASOURCE_ID"],"polyline","qzjClass","#0373ca");
        }else if(qsmzq_data[key]["DATASOURCE_STATUS"] == "2"){
          drawLine("gxjh",qsmzq_data[key]["DATASOURCE_ID"],"polyline","qzjClass","#ff120c");
        } else if (qsmzq_data[key]["DATASOURCE_STATUS"] == "0") {
          drawLine("gxjh", qsmzq_data[key]["DATASOURCE_ID"], "polyline", "qzjClass", "#727272");
        }
        if(qsmzq_data[key]["DATASOURCE_TYPE"] != "1" || isEmptyCheck(qsmzq_data[key]["childs"])){
          continue;
        }

        if(!qsmzq_data[key]["isShow"]){
          continue;
        }
        //循环连接 单位和入库前前置机
        for(var j = 0 ; j < qsmzq_data[key]["childs"].length ; j++){
          if(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_STATUS"]=="1"){
            drawLine(qsmzq_data[key]["DATASOURCE_ID"],qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_ID"],"polyline","unitClass","#0373ca");
            continue;
          }
          if(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_STATUS"]=="0"){
            drawLine(qsmzq_data[key]["DATASOURCE_ID"],qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_ID"],"polyline","unitClass","#727272");
            continue;
          }
          drawLine(qsmzq_data[key]["DATASOURCE_ID"],qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_ID"],"polyline","unitClass","#ff120c");
        }
      }


      //鼠标选中和离开事件
      console.log('document.querySelector(".qzjClass")',document.querySelector(".qzjClass"))
      document.querySelectorAll(".qzjClass").forEach(i => {
        i.addEventListener("click", function () {

          isShowUnitNode(this);
        });
      })
    }
    function loadNode(){
      let width = document.querySelector('.de-tu').offsetWidth;
      var qzjHeight  = height / 25;
      qzjHeight = parseInt(qzjHeight);

      var gxjhHeight  = height / 15;
      gxjhHeight = parseInt(gxjhHeight);

      var unitHeight = height / 30;
      unitHeight = parseInt(unitHeight);

      var columnNumber = getColumnNumber();
      //设置画布宽高
      svg = d3
        .select(".de-tu")
        .append("svg")
        .attr("width", width)
        .attr("height", height);



      //边框
      // svg.append("rect")
      //     .attr("width", "100%")
      //     .attr("height", "100%")
      //     .attr("fill", "white")
      //     .style("stroke", "#000000");
      //共享交换
      var gxjh_rect = null;
      if(qsmzq_data["STATES"] == "2"){
        gxjh_rect = svg.append("image").attr("transform","translate(0,0)")
          .attr("width",gxjhHeight)
          .attr("height",gxjhHeight)
          .attr("fill", "white")
          .attr("border","2px")
          .style("stroke", "#000")
          .attr("x",width / columnNumber * getColumnIndex("gxjh") - gxjhHeight)
          .attr("y",height / 2 - gxjhHeight)
          .attr("xlink:href",new URL("../../../../../../assets/imgs/echarts/wlgx4.png",import.meta.url));
      } else if (qsmzq_data["STATES"] == "1") {
        gxjh_rect = svg.append("image").attr("transform","translate(0,0)")
          .attr("width",gxjhHeight)
          .attr("height",gxjhHeight)
          .attr("fill", "white")
          .attr("border","2px")
          .style("stroke", "#000")
          .attr("x",width / columnNumber * getColumnIndex("gxjh") - gxjhHeight)
          .attr("y",height / 2 - gxjhHeight)
          .attr("xlink:href",new URL("../../../../../../assets/imgs/echarts/wlgx.png",import.meta.url));
      } else if (qsmzq_data["STATES"] == "0") {
        gxjh_rect = svg.append("image").attr("transform", "translate(0,0)")
          .attr("width", gxjhHeight)
          .attr("height", gxjhHeight)
          .attr("fill", "white")
          .attr("border", "2px")
          .style("stroke", "#000")
          .attr("x", width / columnNumber * getColumnIndex("gxjh") - gxjhHeight)
          .attr("y", height / 2 - gxjhHeight)
          .attr("xlink:href", new URL("../../../../../../assets/imgs/echarts/wlgx3.png",import.meta.url).href);
      }


      //设置系统文本
      var text1 = svg.append("text")
        .attr("x",parseFloat(gxjh_rect.attr("x")) + parseFloat(gxjh_rect.attr("width")) / 2)
        .attr("y",parseFloat(gxjh_rect.attr("y")) + parseFloat(gxjh_rect.attr("height")) + 19)
        .attr('stroke',"black")
        .attr("font-family","cursive")
        .attr("font-size","14")
        .attr("class","font_text").attr("text-anchor","middle")
        .text("共享交换");


      allObject["all"] = svg;
      allObject["gxjh"] = gxjh_rect;

      /*前置机 位置
      * 1.计算图标位置，根据  画布高度  整除前置机个数计算总体间距
      * */
      var tempHeight = 0;
      var tempWidth = 0;
      var temp_rect = null;``
      var temp_text1 = null;


      if(qsmzq_data["rkQzjNum"] > 0){
        tempWidth = width / columnNumber * getColumnIndex("rkqzj") - gxjhHeight;
        tempHeight =  height / (qsmzq_data["rkQzjNum"] + 1);
        for(var key in qsmzq_data){
          if(qsmzq_data[key]["DATASOURCE_TYPE"] != "0"){
            continue;
          }
          var tempy = tempHeight * (qsmzq_data[key]["index"]) - gxjhHeight + (gxjhHeight - qzjHeight)/2;
          if(qsmzq_data[key]["DATASOURCE_STATUS"] == "2"){
            drawNode(qsmzq_data[key]["DATASOURCE_ID"],qzjHeight,qzjHeight,tempWidth,tempy,qsmzq_data[key]["DATASOURCE_NAME"],new URL('../../../../../../assets/imgs/echarts/服务器申请4.png',import.meta.url).href,"qzjClass");
            continue;
          }
          if (qsmzq_data[key]["DATASOURCE_STATUS"] == "1") {
            drawNode(qsmzq_data[key]["DATASOURCE_ID"], qzjHeight, qzjHeight, tempWidth, tempy, qsmzq_data[key]["DATASOURCE_NAME"], new URL('../../../../../../assets/imgs/echarts/服务器申请.png',import.meta.url).href, "qzjClass");
            continue;
          }
          if (qsmzq_data[key]["DATASOURCE_STATUS"] == "0") {
            drawNode(qsmzq_data[key]["DATASOURCE_ID"],qzjHeight,qzjHeight,tempWidth,tempy,qsmzq_data[key]["DATASOURCE_NAME"],new URL('../../../../../../assets/imgs/echarts/服务器申请3.png',import.meta.url).href,"qzjClass");
          }

        }
      }


      //计算出库前置机图标位置
      if(qsmzq_data["ckQzjNum"] > 0){
        tempWidth = width / columnNumber * getColumnIndex("ckqzj") - gxjhHeight;
        tempHeight =  height / (qsmzq_data["ckQzjNum"] + 1);
        for(var key in qsmzq_data){
          if(qsmzq_data[key]["DATASOURCE_TYPE"] != "1"){
            continue;
          }
          var tempy = tempHeight * (qsmzq_data[key]["index"]) - gxjhHeight + (gxjhHeight - qzjHeight)/2;
          if(qsmzq_data[key]["DATASOURCE_STATUS"] == "2"){
            drawNode(qsmzq_data[key]["DATASOURCE_ID"],qzjHeight,qzjHeight,tempWidth,tempy,qsmzq_data[key]["DATASOURCE_NAME"],new URL('../../../../../../assets/imgs/echarts/服务器申请4.png',import.meta.url).href,"qzjClass");
            continue;
          }
          if (qsmzq_data[key]["DATASOURCE_STATUS"] == "1") {
            drawNode(qsmzq_data[key]["DATASOURCE_ID"], qzjHeight, qzjHeight, tempWidth, tempy, qsmzq_data[key]["DATASOURCE_NAME"], new URL('../../../../../../assets/imgs/echarts/服务器申请.png',import.meta.url).href, "qzjClass");
            continue;
          }
          if (qsmzq_data[key]["DATASOURCE_STATUS"] == "0") {
            drawNode(qsmzq_data[key]["DATASOURCE_ID"], qzjHeight, qzjHeight, tempWidth, tempy, qsmzq_data[key]["DATASOURCE_NAME"], new URL('../../../../../../assets/imgs/echarts/服务器申请3.png',import.meta.url).href, "qzjClass");

          }



        }
      }
      //计算出库前置机图标位置
      if(qsmzq_data["isCkdw"]){
        tempWidth = width / columnNumber * getColumnIndex("ckdw")  - gxjhHeight;
        tempHeight =  height / (qsmzq_data["ckQzjNum"]);

        for(var key in qsmzq_data){
          if(qsmzq_data[key]["DATASOURCE_TYPE"] != "1" || isEmptyCheck(qsmzq_data[key]["childs"])){
            continue;
          }
          if(!qsmzq_data[key]["isShow"]){
            continue;
          }
          //var heightNumber = tempHeight / (qsmzq_data[key]["childs"].length + 2);
          //var startHeight = tempHeight * qsmzq_data[key]["index"] - tempHeight;
          var tempStartNodeHeight = 0;
          if (qsmzq_data[key]["childs"].length > 1) {
            tempStartNodeHeight = (qsmzq_data[key]["childs"].length - 1) * min_margin / 2;
          }
          tempStartNodeHeight = parseFloat(allObject[qsmzq_data[key]["DATASOURCE_ID"]].attr("y")) - tempStartNodeHeight + 1.8;
          if (tempStartNodeHeight < 0) {
            tempStartNodeHeight = 0;
          }



          for (var j = 0 ; j < qsmzq_data[key]["childs"].length ; j++) {

            //var tempy = startHeight + (j + 1) * heightNumber - gxjhHeight - (gxjhHeight - unitHeight) / 2;
            var tempy = tempStartNodeHeight + min_margin * j;
            if (max_height < tempy) {
              max_height = tempy + 100;
            }



            if(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_STATUS"] == "2"){
              drawNode(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_ID"],unitHeight,unitHeight,tempWidth,tempy,qsmzq_data[key]["childs"][j]["NAME"],new URL("../../../../../../assets/imgs/echarts/单位库4.png",import.meta.url).href,"unitClass");
              continue;
            }
            if(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_STATUS"] == "0"){
              drawNode(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_ID"],unitHeight,unitHeight,tempWidth,tempy,qsmzq_data[key]["childs"][j]["NAME"],new URL("../../../../../../assets/imgs/echarts/单位库3.png",import.meta.url).href,"unitClass");
              continue;
            }
            drawNode(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_ID"],unitHeight,unitHeight,tempWidth,tempy,qsmzq_data[key]["childs"][j]["NAME"],new URL("../../../../../../assets/imgs/echarts/单位库.png",import.meta.url).href,"unitClass");
          }

        }

      }


      //在页面上画出前置机入库单位的位置，1.计算所有入库单位的数量，2.根据前置机数量计算第一个前置机的位置。
      if(qsmzq_data["isRkdw"]){
        tempWidth = width / columnNumber * getColumnIndex("rkdw")  - gxjhHeight;
        //tempHeight =  height / (qsmzq_data["rkQzjNum"]);
        for(var key in qsmzq_data){
          if(qsmzq_data[key]["DATASOURCE_TYPE"] != "0" || isEmptyCheck(qsmzq_data[key]["childs"])){
            continue;
          }
          if(!qsmzq_data[key]["isShow"]){
            continue;
          }

          var tempStartNodeHeight = 0;
          if(qsmzq_data[key]["childs"].length > 1){
            tempStartNodeHeight = (qsmzq_data[key]["childs"].length-1) * min_margin / 2 ;
          }
          tempStartNodeHeight = parseFloat(allObject[qsmzq_data[key]["DATASOURCE_ID"]].attr("y")) - tempStartNodeHeight + 1.8;
          if(tempStartNodeHeight < 0){
            tempStartNodeHeight = 0;
          }
          // var heightNumber = tempHeight / (qsmzq_data[key]["childs"].length + 2);
          // var startHeight = tempHeight * qsmzq_data[key]["index"] - tempHeight;
          // var heightNumber = tempHeight / (qsmzq_data[key]["childs"].length + 2);
          // var startHeight = tempHeight * qsmzq_data[key]["index"] - tempHeight;
          for(var j = 0 ; j < qsmzq_data[key]["childs"].length ; j++){
            var tempy = tempStartNodeHeight +  min_margin * j;
            if(max_height < tempy){
              max_height = tempy + 100;
            }
            if(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_STATUS"] == "2"){
              drawNode(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_ID"],unitHeight,unitHeight,tempWidth,tempy,qsmzq_data[key]["childs"][j]["NAME"],new URL('../../../../../../assets/imgs/echarts/单位库4.png',import.meta.url).href,"unitClass");
              continue;
            }
            if(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_STATUS"] == "0"){
              drawNode(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_ID"],unitHeight,unitHeight,tempWidth,tempy,qsmzq_data[key]["childs"][j]["NAME"],new URL('../../../../../../assets/imgs/echarts/单位库3.png',import.meta.url).href,"unitClass");
              continue;
            }
            drawNode(qsmzq_data[key]["childs"][j]["DATASOURCE_UNIT_ID"],unitHeight,unitHeight,tempWidth,tempy,qsmzq_data[key]["childs"][j]["NAME"],new URL('../../../../../../assets/imgs/echarts/单位库.png',import.meta.url).href,"unitClass");
          }
        }
      }
      svg.attr("height", max_height);

      svg.on('zoom', () => {
        this.svgGraphContainer.attr('transform', d3.event.transform) // 添加缩放功能
        this.axises.xContainer.call(this.axises.x.scale(d3.event.transform.rescaleX(this.axises.xScale))) // 设置坐标轴随zoom缩放
        this.axises.yContainer.call(this.axises.y.scale(d3.event.transform.rescaleY(this.axises.yScale)))
      })
    }
    function clData(){
      qsmzq_data["STATES"] = "0";
      for(let i = 0 ; i < channeldata.length ; i++){
        if(isEmptyCheck(qsmzq_data[channeldata[i]["DATASOURCE_ID"]])){
          //第一层 存放前置机
          qsmzq_data[channeldata[i]["DATASOURCE_ID"]] = JSON.parse(JSON.stringify(channeldata[i]));
          qsmzq_data["maxIndex"] = parseInt(qsmzq_data["maxIndex"]) +1;
          qsmzq_data[channeldata[i]["DATASOURCE_ID"]]["isShow"] = false;
          //qsmzq_data[channeldata[i]["DATASOURCE_ID"]]["DATASOURCE_UNIT_STATUS"] = "";
          if(channeldata[i]["DATASOURCE_TYPE"] == "0"){
            qsmzq_data[channeldata[i]["DATASOURCE_ID"]]["index"] = parseInt(qsmzq_data["rkQzjNum"]) +1;
            qsmzq_data["rkQzjNum"] = parseInt(qsmzq_data["rkQzjNum"] ) +1;
          }else{
            qsmzq_data[channeldata[i]["DATASOURCE_ID"]]["index"] = parseInt(qsmzq_data["ckQzjNum"]) +1;
            qsmzq_data["ckQzjNum"] = parseInt(qsmzq_data["ckQzjNum"] ) +1;
          }
          if (channeldata[i]["DATASOURCE_STATUS"] * 1  > qsmzq_data["STATES"] * 1) {
            qsmzq_data["STATES"] = channeldata[i]["DATASOURCE_STATUS"];
          }

        }
        ///////////二级节点
        if(!isEmptyCheck(channeldata[i]["NAME"])){
          if(qsmzq_data[channeldata[i]["DATASOURCE_ID"]]["childs"] == null){
            qsmzq_data[channeldata[i]["DATASOURCE_ID"]]["childs"]=[];
          }
          qsmzq_data[channeldata[i]["DATASOURCE_ID"]]["childs"].push(channeldata[i]);
          //if(qsmzq_data[channeldata[i]["DATASOURCE_ID"]]["DATASOURCE_UNIT_STATUS"] == ""){
          //    if(channeldata[i]["DATASOURCE_UNIT_STATUS"] == 2){
          //        qsmzq_data[channeldata[i]["DATASOURCE_ID"]]["DATASOURCE_UNIT_STATUS"] = "2";
          //        qsmzq_data["STATES"] = "2";
          //    } else if (channeldata[i]["DATASOURCE_UNIT_STATUS"] == 1) {
          //        qsmzq_data[channeldata[i]["DATASOURCE_ID"]]["DATASOURCE_UNIT_STATUS"] = "1";
          //        qsmzq_data["STATES"] = "1";
          //    } else if (channeldata[i]["DATASOURCE_UNIT_STATUS"] == 0) {
          //        qsmzq_data[channeldata[i]["DATASOURCE_ID"]]["DATASOURCE_UNIT_STATUS"] = "0";
          //        qsmzq_data["STATES"] = "0";
          //    }
          //}
          if(channeldata[i]["DATASOURCE_TYPE"] == "0"){
            qsmzq_data["isRkdw"] = true;
          }else{
            qsmzq_data["isCkdw"] = true;
          }
        }
      }
    }
    let height1 = document.documentElement.clientHeight;
    let height = height1 -150;
    let max_height = height;
    let allObject = {};
     let qsmzq_data = {}
    let svg = {}
    let min_margin = 60;
    qsmzq_data["ckQzjNum"] = 0;//出库前置机数量
    qsmzq_data["rkQzjNum"] = 0;//入库前置机数量
    qsmzq_data["maxIndex"] = 0;//最大序号
    qsmzq_data["isRkdw"] = false;//是否存在 入库单位节点
    qsmzq_data["isCkdw"] = false;//是否存在 出库单位节点
    let channeldata = []
    onBeforeMount(() => {
      getProcessChartsData().then(res => {
        let date = res.msg;//将返回的Json格式字符串转换成json对象
        channeldata = date[0].Rows;
        clData()
        loadNode()
        loadLine()
      })
    })
  }
}
</script>

<style scoped lang="scss">
.process-echarts{
 display: flex;
  flex-direction: column;
  .de-tu{
    flex: 1;
    overflow: hidden;
  }
}
.t{
  padding: 0 20px;
}
</style>
