gojs設置

<template>
    <div class="canvas-view" id="userPortrait">
    </div>
</template>
<script>
import '@/common/go/go-debug'
export default {
    name: 'UserPortrait',
    data (){
        return {
            instance: ''
        }
    },
    mounted(){
        console.log(go)
        this.init()
    },
    methods: {
        init(){
            var $ = go.GraphObject.make;
            var myDiagram =
            $(go.Diagram, "userPortrait",
                {
                    initialContentAlignment: go.Spot.Center, // center Diagram contents
                    "undoManager.isEnabled": false, // enable Ctrl-Z to undo and Ctrl-Y to redo
                    isReadOnly: true, //禁止複製
                    layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
                        { angle: 90, layerSpacing: 35 }
                    ),
                    nodeSelectionAdornmentTemplate: $(go.Adornment, "Auto",
                        $(go.Shape, "Rectangle", { stroke: null, fill: null }),
                    ),
                }
            );
            
            // the template we defined earlier
            myDiagram.nodeTemplate =
            $(go.Node, "Horizontal",
                // 爲整個Node背景設置爲淺藍色
                { background: "#44CCFF" },
                $(go.Panel, "Table",
                    new go.Binding("itemArray", "people"),
                    { margin: 4,
                    defaultAlignment: go.Spot.Left,
                    itemTemplate:
                        $(go.Panel, "TableRow",
                            new go.Binding("background", "back"),
                            $(go.TextBlock, new go.Binding("text", "name"),
                                { column: 0, margin: 2, font: "bold 10pt sans-serif" }
                            ),
                            $(go.TextBlock, new go.Binding("text", "phone"),
                                { column: 1, margin: 2, font: "bold 10pt sans-serif" }
                            )
                        )  // end of itemTemplate
                    }
                ),
                $(go.Picture,
                // Pictures 應該指定寬高.
                // 當沒有圖片時顯示紅色的背景
                // 或者當圖片爲透明的時候也是.
                { margin: 10, width: 100, height: 100, background: "red" },
                // Picture.source參數值與模型數據中的"source"字段綁定
                "./../../assets/images/man.png"),
                $(go.Panel, "Table",
                    new go.Binding("itemArray", "people1"),
                    { margin: 4,
                    defaultAlignment: go.Spot.Left,
                    itemTemplate:
                        $(go.Panel, "TableRow",
                            new go.Binding("background", "back"),
                            $(go.TextBlock, new go.Binding("text", "name"),
                                { column: 0, margin: 2, font: "bold 10pt sans-serif" }
                            ),
                            $(go.TextBlock, new go.Binding("text", "phone"),
                                { column: 1, margin: 2, font: "bold 10pt sans-serif" }
                            )
                        )  // end of itemTemplate
                    }
                ),
            )
            // myDiagram.add(
            //     $(go.Part,  // this Part is not bound to any model data
            //     {
            //         layerName: "Background", position: new go.Point(0, 0),
            //         selectable: false, pickable: false
            //     },
            //     $(go.Picture,{width: '100%',height: '100%'}, "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560427539066&di=c438347c80d49e56f6cfe6fc99f192b3&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F04%2F01%2F56%2F605801d2646e265.jpg")
            // ));

            let nodeDataArray =
            [
                { key: "name1", name: "Don Meow",   source: "cat1.png",people: [
                        { name: "Alice", phone: "2345", loc: "C4-E18" },
                        { name: "Bob", phone: "9876", loc: "E1-B34" },
                        { name: "Carol", phone: "1111", loc: "C4-E23" }
                    ],
                    people1: [
                        { name: "專業", phone: "2345", loc: "C4-E18" },
                        { name: "請求", phone: "9876", loc: "E1-B34"},
                        { name: "顏色", phone: "1111", loc: "C4-E23" }
                    ]
                },
                { key: "name2", name: "Don Meow",   source: "cat1.png",people: [
                        { name: "Alice", phone: "2345", loc: "C4-E18" },
                        { name: "Bob", phone: "9876", loc: "E1-B34" },
                        { name: "Carol", phone: "1111", loc: "C4-E23" }
                    ],
                    people1: [
                        { name: "專業", phone: "2345", loc: "C4-E18" },
                        { name: "請求", phone: "9876", loc: "E1-B34"},
                        { name: "顏色", phone: "1111", loc: "C4-E23" }
                    ]
                }
            ],
            linkDataArray = [{
                from: 'name1', to: 'name2',desc: '說明'
            }];
            myDiagram.linkTemplate =
            $(go.Link,
                $(go.Shape, {stroke: "red", strokeWidth: 1}),//鏈接線樣式
                $(go.Shape, { toArrow: "Standard", stroke: "red", strokeWidth: 1}),//箭頭樣式
                $(go.Panel, "Auto",  // this whole Panel is a link label
                    $(go.Shape, "TenPointedStar", { fill: "yellow", stroke: "green" }),//填充色彩
                    $(go.TextBlock, { margin: 3 },//文本
                    new go.Binding("text", "desc"))
            ));
            myDiagram.model = new go.GraphLinksModel(nodeDataArray,linkDataArray);
            myDiagram.addDiagramListener("ObjectSingleClicked", this.changeFn)
        },
        changeFn(e){
            console.log(e.subject.part)
            var part = e.subject.part
            if (!(part instanceof go.Link)) console.log(part.data);
        }
    }
}
</script>

<style lang="less">
body,html{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.canvas-view {
    width: 100%;
    height: 100%;
}
</style>

複製代碼