Gojs简单例子

最新推荐文章于 2024-07-05 13:58:39 发布

weixin_34256074

最新推荐文章于 2024-07-05 13:58:39 发布

阅读量725

点赞数

文章标签： java javascript ui ViewUI

前台代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="/lib/go-js/assets/js/go.js"></script>

    <script id="code" th:inline="javascript">
        /*<![CDATA[*/
        function init() {

            var keynode, mapnode;

            keynode = eval([[${nodekey}]]);
            mapnode = eval([[${nodemap}]]);

            console.log(keynode);
            console.log(mapnode)

            if (window.goSamples) goSamples();
            var $ = go.GraphObject.make;
            myDiagram = $(go.Diagram, "myDiagramDiv",
                {
                    initialContentAlignment: go.Spot.Center,
                    "undoManager.isEnabled": true
                });
            myDiagram.nodeTemplate =
                $(go.Node, "Auto",
                    $(go.Shape, "RoundedRectangle", {strokeWidth: 1},
                        new go.Binding("fill", "color")),
                    $(go.TextBlock,
                        {margin: 20, width: 60, height: 20},
                        new go.Binding("text", "key"))
                );
            // myDiagram.model = new go.GraphLinksModel(
            //     [
            //         {key: "Alpha", color: "lightblue"},
            //         {key: "Beta", color: "orange"},
            //         {key: "Gamma", color: "lightgreen"},
            //         {key: "Delta", color: "pink"}
            //     ], [
            //         {from: "Alpha", to: "Beta"},
            //         {from: "Alpha", to: "Gamma"},
            //         {from: "Gamma", to: "Delta"},
            //         {from: "Delta", to: "Alpha"}
            //     ]
            // );

            myDiagram.model = new go.GraphLinksModel(keynode, mapnode);
        }

        /*]]>*/
    </script>
</head>
<body οnlοad="init()">
<div id="sample">
    <div id="myDiagramDiv" style="border: solid 1px black; width:800px; height:800px"></div>
</div>
</body>
</html>

后台代码：

package com.thunisoft.maybeemanagementcenter.controller;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.thunisoft.maybeemanagementcenter.pojo.LinkMap;
import com.thunisoft.maybeemanagementcenter.pojo.LinkNode;
import com.thunisoft.maybeemanagementcenter.util.JsonHelper;
import com.thunisoft.maybeemanagementcenter.util.JsonStrUltil;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/sleuth")
public class SleuthController {

    /**
     *
     */
    @GetMapping("/index")
    public String index(Model model) {

        List<LinkNode> nodekey = new ArrayList<>();
        nodekey.add(new LinkNode("a"));
        nodekey.add(new LinkNode("b"));
        nodekey.add(new LinkNode("c"));
        nodekey.add(new LinkNode("d"));

        List<LinkMap> nodemap = new ArrayList<>();
        nodemap.add(new LinkMap("a", "b"));
        nodemap.add(new LinkMap("a", "c"));
        nodemap.add(new LinkMap("c", "d"));
        nodemap.add(new LinkMap("d", "a"));

        JsonHelper jm = new JsonHelper();
        String nodekeyjson = null;
        String nodemapjson = null;
        try {
            nodekeyjson = jm.toJson(nodekey);
            nodemapjson = jm.toJson(nodemap);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }

        model.addAttribute("nodekey", nodekeyjson);
        model.addAttribute("nodemap", nodemapjson);

        return "link";
    }
}

pojo：

package com.thunisoft.maybeemanagementcenter.pojo;

/**
 * 链路中节点
 */
public class LinkNode {
    private String key;
    private String color = "lightblue"; /*背景颜色，默认亮蓝色*/

    public LinkNode(String key) {
        this.key = key;
    }

    public LinkNode(String key, String color) {
        this.key = key;
        this.color = color;
    }

    public String getKey() {
        return key;
    }

    public void setKey(String key) {
        this.key = key;
    }

    public String getColor() {
        return color;
    }

    public void setColor(String color) {
        this.color = color;
    }
}

package com.thunisoft.maybeemanagementcenter.pojo;

/**
 * 链路之间节点映射
 */
public class LinkMap {
    private String from;
    private String to;

    public LinkMap(String from, String to) {
        this.from = from;
        this.to = to;
    }

    public String getFrom() {
        return from;
    }

    public void setFrom(String from) {
        this.from = from;
    }

    public String getTo() {
        return to;
    }

    public void setTo(String to) {
        this.to = to;
    }
}