<template>
    <div class="bsx6"></div>
</template>

<script>
import { Graph } from "@antv/x6";
import customNode from "./customNode.js";

export default {
    // 名称
    name: "bsx6",
    // 使用组件
    components: {},
    // 传入参数
    props: {},
    // 自定义事件
    emits: {},
    // 数据
    data() {
        return {
            graph: null,
            color: {
                red: "#b30461",
                yellow: "#cbaa07",
            },
            trees: [
                {
                    id: "tree1",
                    x: 174,
                    y: 270,
                    width: 1480,
                    color: "#b30461",
                    label: "110kV 母线",
                    direction: "left",
                    subNode: [
                        {
                            id: "tree1_sub1",
                            direction: "top",
                            x: 693,
                            items: [
                                {
                                    id: "tree1_sub1_item1",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "111-1",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub1_item2",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "111-01",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub1_item3",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "111",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub1_item4",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "111-03",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub1_item5",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "111-3",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub1_item6",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "111-0",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub1_item7",
                                    shape: "grounding-capacitance-transverse",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub1_item8",
                                    shape: "voltage3-transformer",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub1_item9",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 65,
                                    fill: "#b30461",
                                },
                            ],
                        },
                        {
                            id: "tree1_sub2",
                            direction: "bottom",
                            x: 604,
                            items: [
                                {
                                    id: "tree1_sub2_item1",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "11-0",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub2_item2",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "101-1",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub2_item3",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "101-01",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub2_item4",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "101",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub2_item5",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "101-03",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub2_item6",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "101-3",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub2_item7",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "101-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub2_item8",
                                    shape: "three-phase-transformer",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub2_item9",
                                    shape: "earthing-disconnector-transverse-y-break",
                                    label: "301-0",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub2_item10",
                                    shape: "main-transformer",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub2_item11",
                                    shape: "main-transformer1",
                                    label: "011-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub2_item12",
                                    shape: "main-transformer2",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub2_item13",
                                    shape: "main-transformer3",
                                    label: "301",
                                    direction: "left",
                                },
                            ],
                        },
                        {
                            id: "tree1_sub3",
                            direction: "bottom",
                            x: 839,
                            items: [
                                {
                                    id: "tree1_sub3_item1",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "11-9",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub3_item2",
                                    shape: "grounding-capacitance-transverse",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub3_item3",
                                    shape: "earthing-disconnector-transverse2-break",
                                    label: "11-09",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub3_item4",
                                    shape: "voltage5-transformer",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub3_item5",
                                    shape: "grounding-resistance-vertical",
                                    label: "",
                                    direction: "left",
                                },
                            ],
                        },
                        {
                            id: "tree1_sub4",
                            direction: "bottom",
                            x: 1225,
                            items: [
                                {
                                    id: "tree1_sub4_item1",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "12-0",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub4_item2",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "102-1",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub4_item3",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "102-01",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub4_item4",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "102",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub4_item5",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "102-3",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub4_item6",
                                    shape: "circuit-breaker-vertical-break",
                                    label: "102-03",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub4_item7",
                                    shape: "earthing-disconnector-transverse-break",
                                    label: "102-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub4_item8",
                                    shape: "three-phase-transformer",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub4_item9",
                                    shape: "earthing-disconnector-transverse-yo-break",
                                    label: "301-0",
                                    direction: "right",
                                },
                                {
                                    id: "tree1_sub4_item10",
                                    shape: "main-transformer",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub4_item11",
                                    shape: "main-transformer1",
                                    label: "012-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub4_item12",
                                    shape: "main-transformer2",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree1_sub4_item13",
                                    shape: "main-transformer3",
                                    label: "302",
                                    direction: "left",
                                },
                            ],
                        },
                    ],
                },
                {
                    id: "tree2",
                    x: 174,
                    y: 600,
                    width: 935,
                    color: "#cbaa07",
                    label: "35kV I母线",
                    direction: "left",
                    subNode: [
                        {
                            id: "tree2_sub1",
                            direction: "bottom",
                            x: 100,
                            items: [
                                {
                                    id: "tree2_sub1_item1",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "318",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub1_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub1_item3",
                                    shape: "grounding-transformer",
                                    label: "",
                                    direction: "left",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub2",
                            direction: "bottom",
                            x: 237,
                            items: [
                                {
                                    id: "tree2_sub2_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "317",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub2_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub2_item3",
                                    shape: "grounding-transformer",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub2_item4",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 130,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub3",
                            direction: "bottom",
                            x: 329,
                            items: [
                                {
                                    id: "tree2_sub3_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "316",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub3_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub3_item3",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "-3",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub3_item4",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-03",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub3_item5",
                                    shape: "capacitance-vertical",
                                    label: "",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub3_item6",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "2C-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub3_item7",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 100,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub4",
                            direction: "bottom",
                            x: 427,
                            items: [
                                {
                                    id: "tree2_sub4_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "315",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub4_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub4_item3",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "-3",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub4_item4",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-03",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub4_item5",
                                    shape: "capacitance-vertical",
                                    label: "",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub4_item6",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "1C-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub4_item7",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 100,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub5",
                            direction: "bottom",
                            x: 511,
                            items: [
                                {
                                    id: "tree2_sub5_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "314",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub5_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub5_item3",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "-3",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub5_item4",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-03",
                                    direction: "right",
                                },
                                {
                                    id: "tree2_sub5_item5",
                                    shape: "reactor-vertical",
                                    label: "",
                                    direction: "right",
                                },
                                {
                                    id: "tree3_sub2_item6",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 100,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub6_1",
                            direction: "top",
                            x: 604,
                            items: [
                                {
                                    id: "tree2_sub6_1_item1",
                                    shape: "line-vertical",
                                    label: "",
                                    direction: "left",
                                    height: 112,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub6",
                            direction: "bottom",
                            x: 604,
                            items: [
                                {
                                    id: "tree2_sub6_item1",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "31-9",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub6_item2",
                                    shape: "resistance-vertical",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub6_item3",
                                    shape: "voltage-transformer",
                                    label: "",
                                    direction: "left",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub7",
                            direction: "bottom",
                            x: 700,
                            items: [
                                {
                                    id: "tree2_sub7_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "313",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub7_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub7_item3",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 240,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub8",
                            direction: "bottom",
                            x: 792,
                            items: [
                                {
                                    id: "tree2_sub8_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "312",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub8_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub8_item3",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 240,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree2_sub9",
                            direction: "bottom",
                            x: 886,
                            items: [
                                {
                                    id: "tree2_sub9_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "311",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub9_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree2_sub9_item3",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 240,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                    ],
                },
                {
                    id: "tree3",
                    x: 1163,
                    y: 600,
                    width: 491,
                    color: "#cbaa07",
                    label: "35kV II母线",
                    direction: "right",
                    subNode: [
                        {
                            id: "tree3_sub1",
                            direction: "bottom",
                            x: 30,
                            items: [
                                {
                                    id: "tree3_sub1_item1",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "323",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub1_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub1_item3",
                                    shape: "grounding-transformer",
                                    label: "",
                                    direction: "left",
                                },
                            ],
                        },
                        {
                            id: "tree3_sub2",
                            direction: "bottom",
                            x: 119,
                            items: [
                                {
                                    id: "tree3_sub2_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "322",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub2_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub2_item3",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "-3",
                                    direction: "right",
                                },
                                {
                                    id: "tree3_sub2_item4",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-03",
                                    direction: "right",
                                },
                                {
                                    id: "tree3_sub2_item5",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 170,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree3_sub3",
                            direction: "bottom",
                            x: 281,
                            items: [
                                {
                                    id: "tree3_sub3_item1",
                                    shape: "long-circuit-breaker-vertical-link",
                                    label: "321",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub3_item2",
                                    shape: "earthing-disconnector-vertical-break",
                                    label: "-0",
                                    direction: "left",
                                },
                                {
                                    id: "tre3_sub3_item3",
                                    shape: "arrow-vertical",
                                    direction: "left",
                                    height: 240,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                        {
                            id: "tree3_sub4",
                            direction: "bottom",
                            x: 381,
                            items: [
                                {
                                    id: "tree3_sub4_item1",
                                    shape: "long-circuit-breaker-vertical-break",
                                    label: "32-9",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub4_item2",
                                    shape: "resistance-vertical",
                                    label: "",
                                    direction: "left",
                                },
                                {
                                    id: "tree3_sub4_item3",
                                    shape: "voltage-transformer",
                                    label: "",
                                    direction: "left",
                                },
                            ],
                        },
                        {
                            id: "tree3_sub0",
                            direction: "top",
                            x: 236,
                            items: [
                                {
                                    id: "tree3_sub0_item1",
                                    shape: "line-vertical",
                                    label: "",
                                    direction: "left",
                                    height: 127,
                                    fill: "#cbaa07",
                                },
                            ],
                        },
                    ],
                },
            ],
            data: [{
                id: "111-01",
                x: 818,
                y: 227,
                type: "switch",
                state: 0,
                direction: "right"
            },{
                id: "111-03",
                x: 818,
                y: 182,
                type: "switch",
                state: 0,
                direction: "right"
            },{
                id: "111-0",
                x: 918,
                y: 137,
                type: "switch",
                state: 0,
                direction: "left"
            },{
                id: "111-3",
                x: 867,
                y: 175,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "111",
                x: 867,
                y: 220,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "111-1",
                x: 867,
                y: 265,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "11-0",
                x: 830,
                y: 287,
                type: "switch",
                state: 0,
                direction: "left"
            },{
                id: "101-01",
                x: 730,
                y: 332,
                type: "switch",
                state: 0,
                direction: "right"
            },{
                id: "101-0",
                x: 730,
                y: 422,
                type: "switch",
                state: 0,
                direction: "right"
            },{
                id: "101-03",
                x: 830,
                y: 377,
                type: "switch",
                state: 0,
                direction: "left"
            },{
                id: "301-0",
                x: 830,
                y: 487,
                type: "switch",
                state: 0,
                direction: "left"
            },{
                id: "011-0",
                x: 702,
                y: 497,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "101-1",
                x: 778,
                y: 323,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "101",
                x: 778,
                y: 368,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "101-3",
                x: 778,
                y: 413,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "12-0",
                x: 1452, // 830
                y: 287,
                type: "switch",
                state: 0,
                direction: "left"
            },{
                id: "102-01",
                x: 1352,
                y: 332,
                type: "switch",
                state: 0,
                direction: "right"
            },{
                id: "102-0",
                x: 1352,
                y: 422,
                type: "switch",
                state: 0,
                direction: "right"
            },{
                id: "102-03",
                x: 1452,
                y: 377,
                type: "switch",
                state: 0,
                direction: "left"
            },{
                id: "012-0",
                x: 1323,
                y: 497,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "102-1",
                x: 1399,
                y: 323,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "102",
                x: 1399,
                y: 368,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "102-3",
                x: 1399,
                y: 413,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "11-9",
                x: 1013,
                y: 310,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "11-09",
                x: 1063,
                y: 318,
                type: "switch",
                state: 0,
                direction: "left"
            },{
                id: "301",
                x: 753,
                y: 447,
                type: "handcart",
                state1: 0,
                state2: 0,
                direction: "left"
            },{
                id: "302",
                x: 1374,
                y: 447,
                type: "handcart",
                state1: 0,
                state2: 1,
                direction: "left"
            },{
                id: "318",
                x: 274,
                y: 610,
                type: "handcart",
                state1: 1,
                state2: 0,
                direction: "left"
            },{
                id: "317",
                x: 411,
                y: 610,
                type: "handcart",
                state1: 1,
                state2: 1,
                direction: "left"
            },{
                id: "316",
                x: 503,
                y: 610,
                type: "handcart",
                state1: 0,
                state2: 0,
                direction: "left"
            },{
                id: "315",
                x: 601,
                y: 610,
                type: "handcart",
                state1: 0,
                state2: 1,
                direction: "left"
            },{
                id: "314",
                x: 685,
                y: 610,
                type: "handcart",
                state1: 1,
                state2: 0,
                direction: "left"
            },{
                id: "31-9",
                x: 778,
                y: 610,
                type: "handcart",
                state1: 1,
                state2: 1,
                direction: "left"
            },{
                id: "313",
                x: 874,
                y: 610,
                type: "handcart",
                state1: 0,
                state2: 0,
                direction: "left"
            },{
                id: "312",
                x: 966,
                y: 610,
                type: "handcart",
                state1: 0,
                state2: 1,
                direction: "left"
            },{
                id: "311",
                x: 1060,
                y: 610,
                type: "handcart",
                state1: 1,
                state2: 0,
                direction: "left"
            },{
                id: "323",
                x: 1193,
                y: 610,
                type: "handcart",
                state1: 1,
                state2: 1,
                direction: "left"
            },{
                id: "322",
                x: 1282,
                y: 610,
                type: "handcart",
                state1: 0,
                state2: 0,
                direction: "left"
            },{
                id: "321",
                x: 1444,
                y: 610,
                type: "handcart",
                state1: 0,
                state2: 1,
                direction: "left"
            },{
                id: "32-9",
                x: 1544,
                y: 610,
                type: "handcart",
                state1: 1,
                state2: 0,
                direction: "left"
            },{
                id: "318-0",
                x: 255,
                y: 720,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "317-0",
                x: 392,
                y: 720,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "316-0",
                x: 484,
                y: 720,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "315-0",
                x: 582,
                y: 720,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "314-0",
                x: 666,
                y: 720,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "313-0",
                x: 855,
                y: 720,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "312-0",
                x: 947,
                y: 720,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "311-0",
                x: 1041,
                y: 720,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "323-0",
                x: 1174,
                y: 720,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "322-0",
                x: 1263,
                y: 720,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "321-0",
                x: 1425,
                y: 720,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "2C-0",
                x: 484,
                y: 860,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "1C-0",
                x: 582,
                y: 860,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "316-3",
                x: 503,
                y: 728,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "315-3",
                x: 601,
                y: 728,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "314-3",
                x: 685,
                y: 728,
                type: "switch",
                state: 1,
                direction: "top"
            },{
                id: "316-03",
                x: 521,
                y: 788,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "315-03",
                x: 619,
                y: 788,
                type: "switch",
                state: 0,
                direction: "top"
            },{
                id: "314-03",
                x: 703,
                y: 788,
                type: "switch",
                state: 0,
                direction: "top"
            }]
        };
    },
    // 函数
    methods: {
        initGraph: function () {
            this.graph = new Graph({
                container: this.$el, // 画布的容器
                // width: undefined, // 默认使用容器宽度
                // height: undefined, // 默认使用容器高度
                autoResize: true, // boolean | Element | Document 是否监听容器大小改变，并自动更新画布大小 默认监听画布容器，也可以指定监听的元素
                mousewheel: {
                    enabled: true,
                    modifiers: [],
                },
                scroller: {
                    enabled: true,
                    pannable: true,
                },
                interacting: false,
            });
        },
        initData: function () {
            const data = { nodes: [] };
            this.trees.forEach((tree) => {
                let nodeRoot = {
                    id: tree.id,
                    shape: "root-node",
                    x: tree.x,
                    y: tree.y,
                    width: tree.width,
                    attrs: {
                        line: {
                            fill: tree.color,
                            width: tree.width,
                        },
                        label: {
                            text: tree.label,
                            x: tree.direction == "left" ? 0 : tree.width,
                            "text-anchor": tree.direction == "left" ? "start" : "end"
                        },
                    },
                    movable: false,
                };
                data.nodes.push(nodeRoot);
                tree.subNode.forEach((sub) => {
                    let y = tree.y;
                    let prevHeight = customNode.weight;
                    sub.items.forEach((item) => {
                        let shape = `${item.shape}-${sub.direction}-${item.direction}`;
                        switch (sub.direction) {
                            case "top":
                                y = y - customNode.nodeSize[shape].height;
                                break;
                            case "bottom":
                                y = y + prevHeight;
                                prevHeight = customNode.nodeSize[shape].height;
                                break;
                            default:
                                break;
                        }
                        let nodeSub = {
                            id: item.id,
                            x: sub.x + tree.x,
                            y: y,
                            shape: shape,
                            attrs: {
                                label: {
                                    text: item.label,
                                },
                            },
                            movable: false,
                        };
                        switch (item.shape) {
                            case "arrow-vertical":
                                nodeSub.attrs.line = {
                                    height: item.height,
                                    fill: item.fill,
                                }
                                nodeSub.attrs.arrow = {
                                    refY: sub.direction == "bottom" ? item.height : 0,
                                    fill: item.fill,
                                }
                                if (sub.direction == "top") {
                                    nodeSub.y -= item.height;
                                }
                                break;

                            case "line-vertical":
                                nodeSub.attrs.line = {
                                    height: item.height,
                                    fill: item.fill,
                                }
                                if (sub.direction == "top") {
                                    nodeSub.y -= item.height;
                                }
                                break;
                        
                            default:
                                break;
                        }
                        data.nodes.push(nodeSub);
                    });
                });
            });
            this.data.forEach(item => {
                switch (item.type) {
                    case "switch":
                        item.shape = `switch-${item.state == 0 ? 'break' : 'close'}`
                        break;
                    case "handcart":
                        item.shape = `handcart${item.state1}${item.state2}`
                        break;
                    default:
                        break;
                }
                let shape = `${item.shape}-${item.direction}`;
                let node = {
                    id: item.id,
                    x: item.x,
                    y: item.y,
                    shape: shape,
                    movable: false,
                }
                data.nodes.push(node);
            })
            this.graph.fromJSON(data);
        },
        initX6: function () {
            // 注册自定义节点
            customNode.register();
            this.initGraph();
            this.initData();
        },
    },
    // 生命周期钩子
    beforeCreate() {
        // 创建前
    },
    created() {
        // 创建后
    },
    beforeMount() {
        // 渲染前
    },
    mounted() {
        // 渲染后
        this.initX6();
    },
    beforeUpdate() {
        // 数据更新前
    },
    updated() {
        // 数据更新后
    },
};
</script>

<style lang="less" scoped>
</style>
