<template>
  <div id="mainboxs">
    <maiheader></maiheader>
    <div
      class="animate__animated animate__fadeIn animate__delay-0.8s animate__slower"
      style="display: flex; justify-content: space-between; flex: 1"
    >
      <div class="mainboxLeftBg" style="height: 100%; width: 10px"></div>
      <div class="mainboxcontent" style="height: 100%; width: 100%">
        <div id="knowledgeMapEchar" style="height: 100%; width: 100%"></div>
      </div>
      <div
        class="mainboxRightBg"
        style="height: 100%; width: 10px; margin-left: 10px"
      ></div>
    </div>
  </div>
</template>

<script>
import maiheader from "@/components/header";
import animate from "animate.css";
export default {
  name: "index",
  data() {
    return {
      active: "fir",
    };
  },
  components: {
    maiheader,
  },
  mounted() {
    this.$nextTick(() => {
      var myChart = this.$echarts.init(
        document.getElementById("knowledgeMapEchar")
      );
      myChart.setOption(option, true);
    });

    var size = 60;
    var size1 = 30;
    var yy = 200;
    var yy1 = 250;
    var listdata = [];
    var links = [];

    //著需要设定一下四个参数
    var myclass = "电网设备";
    //任务计划
    var stus = ["临时计划", "日计划", "月计划", "年计划"];
    //运维资源
    var opes = [
      "班组",
      "移动终端",
      "车辆",
      "机器人",
      "应急发电车",
      "备件仓库",
      "摄像头",
      "无人机",
    ];
    //用户
    var techs = ["重要", "一般", "营销图谱"];
    //作业操作
    var jobs = ["操作票", "工作票"];
    //工单Work order
    var workOrder = ["巡视", "消缺", "抢修", "检修"];
    //状态
    var status = ["评价", "实时值", "调度知识图谱"];

    function setData(arr, n) {
      let srcUrl = "";
      let position = "inside";
      for (var i = 0; i < arr.length; i++) {
        if (i == 0) {
          debugger;
          size = 100;
          if (arr[0] == "电网设备") {
            size = 130;
            srcUrl = `image://https://unpkg.com/rou6@1.4.7/src/assets/t-1.png`;
            position = "insideBottom";
            //position = [40,95];
          }
          if (arr[0] == "任务计划") {
            srcUrl = `image://https://unpkg.com/rou6@1.4.7/src/assets/t-2.png`;
            position = "insideBottom";
          }
          if (arr[0] == "运维资源") {
            srcUrl = `image://https://unpkg.com/rou6@1.4.7/src/assets/t-3.png`;
            position = "insideBottom";
          }
          if (arr[0] == "用户") {
            srcUrl = `image://https://unpkg.com/rou6@1.4.7/src/assets/t-4.png`;
            position = "insideBottom";
          }
          if (arr[0] == "作业操作") {
            srcUrl = `image://https://unpkg.com/rou6@1.4.7/src/assets/t-5.png`;
            position = "insideBottom";
          }
          if (arr[0] == "工单") {
            srcUrl = `image://https://unpkg.com/rou6@1.4.7/src/assets/t-6.png`;
            position = "insideBottom";
          }
          if (arr[0] == "状态") {
            srcUrl = `image://https://unpkg.com/rou6@1.4.7/src/assets/t-7.png`;
            position = "insideBottom";
          }
        } else {
          size = 60;
          srcUrl = "";
          position = "inside";
        }
        if (arr[i].indexOf("图谱") > -1) {
          size = 100;
          srcUrl = "";
          position = "inside";
        }
        listdata.push({
          x: i * 50,
          y: size + i * 10,
          name: arr[i],
          symbolSize: size,
          symbol: srcUrl,
          //   "symbol": `image://https://i.loli.net/2018/12/11/5c0f26233b7c9.jpeg`,
          category: n,
          draggable: "true",
          label: {
            normal: {
              show: true,
              // position: "inside",
              position: position,
              //   position: 'bottom',
              formatter: "{b}",
              fontSize: 14,
              fontStyle: "500",
              textStyle: {
                // 标签的字体样式
                color: "#fff",
              },
            },
          },
        });
      }
    }

    function setLinkData(arr, title) {
      for (var i = 0; i < arr.length; i++) {
        links.push({
          source: arr[i],
          target: title,
          lineStyle: {
            normal: {
              color: "source",
            },
          },
        });
      }
    }
    var legendes = [
      "任务计划",
      "运维资源",
      "用户",
      "作业操作",
      "工单",
      "状态",
      "电网设备",
    ];
    var texts = [];
    for (var i = 0; i < legendes.length; i++) {
      texts.push({
        name: legendes[i],
      });
    }
    var cat1 = ["任务计划"];
    for (var i = 0; i < stus.length; i++) {
      cat1.push(stus[i]);
    }
    var cat2 = ["运维资源"];
    for (var i = 0; i < opes.length; i++) {
      cat2.push(opes[i]);
    }
    var cat3 = ["用户"];
    for (var i = 0; i < techs.length; i++) {
      cat3.push(techs[i]);
    }

    var cat4 = ["作业操作"];
    for (var i = 0; i < jobs.length; i++) {
      cat4.push(jobs[i]);
    }
    var cat5 = ["工单"];
    for (var i = 0; i < workOrder.length; i++) {
      cat5.push(workOrder[i]);
    }
    var cat6 = ["状态"];
    for (var i = 0; i < status.length; i++) {
      cat6.push(status[i]);
    }

    var cat7 = [];
    cat7.push(myclass);

    setData(cat1, 0);
    setData(cat2, 1);
    setData(cat3, 2);
    setData(cat4, 3);
    setData(cat5, 4);
    setData(cat6, 5);
    setData(cat7, 6);

    setLinkData(cat1, cat1[0]);
    setLinkData(cat2, cat2[0]);
    setLinkData(cat3, cat3[0]);
    setLinkData(cat4, cat4[0]);
    setLinkData(cat5, cat5[0]);
    setLinkData(cat6, cat6[0]);
    setLinkData(legendes, cat7[0]);
    let option = {
      color: [
        "#5B8FF9",
        "#70E17B",
        "#FACE00",
        "#1FB8C4",
        "#51DAF2",
        "#6B84A5",
        "#3464CC",
      ],
      title: {
        text: "",
        top: "top",
        left: "left",
        textStyle: {
          color: "#f7f7f7",
        },
      },
      tooltip: {
        formatter: "{b}",
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        top: "0%",
      },
      toolbox: {
        show: true,
        feature: {
          restore: {
            show: false,
          },
          saveAsImage: {
            show: false,
          },
        },
      },
      backgroundColor: "#fff",
      legend: {
        data: legendes,
        textStyle: {
          color: "#333",
        },
        icon: "circle",
        type: "scroll",
        orient: "vertical",
        left: 10,
        top: 20,
        bottom: 20,
        itemWidth: 10,
        itemHeight: 10,
      },
      animationDuration: 1000,
      animationEasingUpdate: "quinticInOut",
      series: [
        {
          name: "知识图谱",
          type: "graph",
          layout: "force",
          roam: true,
          nodeScaleRatio: 0.6,
          focusNodeAdjacency: true,
          categories: texts,
          symbolSize: 150,
          edgeSymbol: ["arrow", ""],
          force: {
            repulsion: 60,
            gravity: 0.15,
            edgeLength: 20,
            layoutAnimation: true,
          },
          data: listdata,
          links: links,
          /*label: {
            normal: {
              show: true,
            // position: "inside",
             position: "insideBottom",
           //   position: 'bottom',
              formatter: "{b}",
              fontSize: 14,
              fontStyle: "500",
              textStyle: {
                // 标签的字体样式
               color: "#fff", // 字体颜色 #cde6c7 #d1c7b7 #d9d6c3 #d3d7d4
                //  fontStyle: 'normal', // 文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                //  fontWeight: 'bolder', // 'normal'标准，'bold'粗的，'bolder'更粗的，'lighter'更细的，或100 | 200 | 300 | 400...
                //  fontFamily: 'sans-serif', // 文字的字体系列
                //  fontSize: 12, // 字体大小
              },
            },
          },*/
          lineStyle: {
            normal: {
              opacity: 0.9,
              width: 1.5,
              curveness: 0,
            },
          },
        },
      ],
    };
  },
  methods: {},
};
</script>

<style scoped lang="less">
#mainboxs {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  height: 100%;
  width: 100%;
}

.mainboxLeftBg {
  background: url("../assets/left-bg.png") no-repeat;
  background-size: 100% 100%;
}
.mainboxRightBg {
  background: url("../assets/right-bg.png") no-repeat;
  background-size: 100% 100%;
}
.mainboxcontent {
  display: flex;
  flex: 1;
}
</style>
