潘钊 / bsth_control · Files

<!-- 片段标题 START -->
<div class="page-head">
    <div class="page-title">
        <h1>调度预案配置</h1>
    </div>
</div>

    <!-- 弹窗容器 -->
    <div id="card-creation-modal"
         style="display:none; position: absolute; border: 1px solid #ccc; background-color: #fff; padding: 10px; z-index: 100;">
        <!-- 搜索结果列表 -->
        <ul id="card-type-list"></ul>
    </div>
    <div>


        添加预案：
        <input type="text" class="form-control" style="width: 15%;display: inline;" name ="types" id="dNameInput" placeholder="请输入名称">
        <input type="text" class="form-control" style="width: 15%;display: inline;" name ="types" id="dCodeInput" placeholder="请输入代码">
        <button type="button" class="btn btn-circle blue"  id="saveButton"><i class="fa fa-minus-square"></i> 添加</button>



        <select name="destroy" class="form-control" style="width: 15%;display: inline; margin-left: 15%"  id="destroySelect">
            <option value="DKL">-- 大客流 --</option>
            <option value="WD">-- 误点 --</option>
            <option value="FCJG">-- 发车间隔 --</option>
            <option value="MZ">-- 满载 --</option>
            <option value="DJG">-- 大间隔 --</option>
            <option value="YCFC">-- 异常发车 --</option>
            <option value="YFWF">-- 应发未发 --</option>
            <option value="ZLCF">-- 指令重发 --</option>
            <option value="dj">-- 待添加 --</option>
        </select>


        <button class="btn btn-primary" id="saves">保存</button>
    </div>
    <div>



    </div>
    <div style="height: 80%">
    <svg style="width: 100%;height: 100%;" id="svgContainer" class="grid-background">
        <g id="linksContainer"></g> <!-- 用于存放线条 -->
        <g id="cardsContainer"></g> <!-- 用于存放卡片 -->
    </svg>
    </div>

<script>

    //输入名称，自动生成代码
    $('#dNameInput').on('keyup', setPinYin);

    function setPinYin(){
        var val = $('#dNameInput').val();
        if($('#dGroupSelect').val() == 0)
            $('#dCodeInput').val(pinyin.getFullChars(val));
        else
            $('#dCodeInput').val(pinyin.getCamelChars(val));
    }

</script>

<script>
    var cards = [
        {
        id: 'card0',
        x: 0,
        y: 0,
        label: '开始类型',
        type: "开始类型",
        nodes: [ {
            type: "out",
            level: 0,
            enumType: 'call',
            color: '#3C8CE7',
            slot: 'input',
        }
        ],
        titleBarColor: ['#84fab0', '#8fd3f4']
    }
    ];
    var cards2 = [
        {
            id: 'card0',
            x: 0,
            y: 0,
            label: '开始类型',
            type: "开始类型",
            nodes: [ {
                type: "out",
                level: 0,
                enumType: 'call',
                color: '#3C8CE7',
                slot: 'input',
            }
            ],
            titleBarColor: ['#84fab0', '#8fd3f4']
        }
    ];

    var cardsbei = [
        {
            id: 'card0',
            x: 0,
            y: 0,
            label: '开始类型',
            type: "开始类型",
            nodes: [ {
                type: "out",
                level: 0,
                enumType: 'call',
                color: '#3C8CE7',
                slot: 'input',
            }
            ],
            titleBarColor: ['#84fab0', '#8fd3f4']
        },
        {
            id: 'cardc',
            x: 100,
            y: 220,
            label: '流程',
            type: "流程",
            nodes: [{
                type: "in",
                level: 0,
                enumType: 'call',
                color: '#fff'
            },
                {
                    type: "out",
                    level: 0,
                    enumType: 'call',
                    color: '#3C8CE7',
                    slot: 'input',
                },
            ],
            titleBarColor: ['#fccb90', '#d57eeb']
        },
        {
            id: 'cardX',
            x: 100,
            y: 220,
            label: '配置',
            type: "pz",
            nodes: [{
                type: "in",
                level: 0,
                enumType: 'call',
                color: '#fff'
            },
                {
                    type: "out",
                    level: 0,
                    enumType: 'call',
                    color: '#3C8CE7',
                    slot: 'input',
                },
            ],
            titleBarColor: ['#c7e754', '#8352d7']
        },
        {
            id: 'card3',
            x: 100,
            y: 300,
            label: '结束',
            type: "流程y",
            nodes: [{
                type: "in",
                level: 0,
                enumType: 'call',
                color: '#fff',
                slot: 'input',
            }
            ],
            titleBarColor: ['#f6d365', '#fda085']
        },
        {
             id: 'card4',
             x: 100,
             y: 400,
             label: '待发调整工具',
             type: "待发调整工具",
             nodes: [{
                 type: "in",
                 level: 0,
                 enumType: 'call',
                 color: '#fff',

             },
             {
                 type: "out",
                 level: 0,
                 enumType: 'call',
                 color: '#3C8CE7',
             }
             ],
             titleBarColor: ['#3950e8', '#25f6d0']
        },
        {
            id: 'card5',
            x: 100,
            y: 400,
            label: '班次取消（烂班）工具',
            type: "班次取消（烂班）工具",
            nodes: [{
                type: "in",
                level: 0,
                enumType: 'call',
                color: '#fff',

            },
                {
                    type: "out",
                    level: 0,
                    enumType: 'call',
                    color: '#3C8CE7',
                }
            ],
            titleBarColor: ['#3950e8', '#25f6d0']
        },
        {
            id: 'card51',
            x: 100,
            y: 400,
            label: '撤销班次取消（烂班）工具',
            type: "撤销班次取消（烂班）工具",
            nodes: [{
                type: "in",
                level: 0,
                enumType: 'call',
                color: '#fff',

            },
                {
                    type: "out",
                    level: 0,
                    enumType: 'call',
                    color: '#3C8CE7',
                }
            ],
            titleBarColor: ['#3950e8', '#25f6d0']
        },
        {
            id: 'card6',
            x: 100,
            y: 400,
            label: '实发调整工具',
            type: "实发调整工具",
            nodes: [{
                type: "in",
                level: 0,
                enumType: 'call',
                color: '#fff',

            },
                {
                    type: "out",
                    level: 0,
                    enumType: 'call',
                    color: '#3C8CE7',
                }
            ],
            titleBarColor: ['#3950e8', '#25f6d0']
        },
        {
            id: 'card7',
            x: 100,
            y: 400,
            label: '实发撤销工具',
            type: "实发撤销工具",
            nodes: [{
                type: "in",
                level: 0,
                enumType: 'call',
                color: '#fff',

            },
                {
                    type: "out",
                    level: 0,
                    enumType: 'call',
                    color: '#3C8CE7',
                }
            ],
            titleBarColor: ['#3950e8', '#25f6d0']
        },
        {
            id: 'card7',
            x: 100,
            y: 400,
            label: '发车信息微调工具',
            type: "发车信息微调工具",
            nodes: [{
                type: "in",
                level: 0,
                enumType: 'call',
                color: '#fff',

            },
                {
                    type: "out",
                    level: 0,
                    enumType: 'call',
                    color: '#3C8CE7',
                }
            ],
            titleBarColor: ['#3950e8', '#25f6d0']
        },
        {
            id: 'card8',
            x: 100,
            y: 400,
            label: '新增临加班次工具',
            type: "新增临加班次工具",
            nodes: [{
                type: "in",
                level: 0,
                enumType: 'call',
                color: '#fff',

            },
                {
                    type: "out",
                    level: 0,
                    enumType: 'call',
                    color: '#3C8CE7',
                }
            ],
            titleBarColor: ['#3950e8', '#25f6d0']
        },
        {
            id: 'card9',
            x: 100,
            y: 400,
            label: '调整人车工具',
            type: "调整人车工具",
            nodes: [{
                type: "in",
                level: 0,
                enumType: 'call',
                color: '#fff',

            },
                {
                    type: "out",
                    level: 0,
                    enumType: 'call',
                    color: '#3C8CE7',
                }
            ],
            titleBarColor: ['#3950e8', '#25f6d0']
        },
        {
            id: 'card10',
            x: 100,
            y: 400,
            label: '指令重发工具',
            type: "指令重发工具",
            nodes: [{
                type: "in",
                level: 0,
                enumType: 'call',
                color: '#fff',

            },
                {
                    type: "out",
                    level: 0,
                    enumType: 'call',
                    color: '#3C8CE7',
                }
            ],
            titleBarColor: ['#3950e8', '#25f6d0']
        },
        {
            id: 'card11',
            x: 100,
            y: 400,
            label: '路牌对调工具',
            type: "路牌对调工具",
            nodes: [{
                type: "in",
                level: 0,
                enumType: 'call',
                color: '#fff',

            },
                {
                    type: "out",
                    level: 0,
                    enumType: 'call',
                    color: '#3C8CE7',
                }
            ],
            titleBarColor: ['#3950e8', '#25f6d0']
        },
        {
            id: 'card12',
            x: 100,
            y: 400,
            label: '误点调整工具',
            type: "误点调整工具",
            nodes: [{
                type: "in",
                level: 0,
                enumType: 'call',
                color: '#fff',

            },
                {
                    type: "out",
                    level: 0,
                    enumType: 'call',
                    color: '#3C8CE7',
                }
            ],
            titleBarColor: ['#3950e8', '#25f6d0']
        },
    ]
    var links = [];
    var currentLink = null;
    var isDragging = false;
    var isLinking = false;
    var dragOffsetX, dragOffsetY;
    var currentCard;



    selectall();
    function selectall(){
        $.get('/znnd_status/all',{},function(datas){

            var opts = '';
            $.each(datas, function () {
                opts += '<option value="' + this.type + '">-- ' + this.name + '-- </option>';
            });
            $("#destroySelect").html(opts);
            $("#destroySelect").val("dkl");
            init("dkl")
        });

    }


    //保存
    $("#saveButton").on('click',function() {
        debugger
       var name = $("#dNameInput").val();
       var type = $("#dCodeInput").val();
       if (type == "" || name == ""){
           return;
       }
       var datau = {
           type:type,
           name:name,
       }
        $post('/znnd_status/add',datau,function(datan){
            layer.msg('添加成功...');
            selectall();
        })



    });

    $("#destroySelect").on('change',function(){
        var fn = $('#destroySelect').val();
        init(fn);
    })

    function init(fn) {
        $.get('/zndya/all',{type_eq: fn},function(datas){
            var ts = [];
            var link = [];
            for (var c in datas){
                if(datas[c].types == 0){
                    ts.push(JSON.parse(datas[c].jsonDate));
                }else {
                    link.push(JSON.parse(datas[c].jsonDate));
                }

            }
            if (ts.length >  0) {
                cards = ts;
                links = link;
            }else {
                cards = cards2;
                links = [];
            }

            drawLinks();
            drawCards();
            attachEventListeners();
        });

    }

    function drawCards() {
        const cardsContainer = document.getElementById('cardsContainer');
        cardsContainer.innerHTML = ''; // 清除现有的卡片

        cards.forEach(card => {

            //创建标题栏渐变色
            const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
            const linearGradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
            linearGradient.setAttribute('id', `titleGradient-${card.id}`);
            linearGradient.setAttribute('x1', '0%'); // 渐变起点的x坐标
            linearGradient.setAttribute('y1', '100%'); // 渐变起点的y坐标
            linearGradient.setAttribute('x2', '100%'); // 渐变终点的x坐标
            linearGradient.setAttribute('y2', '0%'); // 渐变终点的y坐标

            const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
            stop1.setAttribute('offset', '10%');
            stop1.setAttribute('style', `stop-color: ${card.titleBarColor[0]}; stop-opacity: 1`);
            linearGradient.appendChild(stop1);

            const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
            stop2.setAttribute('offset', '100%');
            stop2.setAttribute('style', `stop-color: ${card.titleBarColor[1]}; stop-opacity: 1`);
            linearGradient.appendChild(stop2);

            defs.appendChild(linearGradient);
            cardsContainer.appendChild(defs);



            const nodeSpacing = 50;
            const topBottomPadding = 20;
            const titleBarHeight = 30; // 标题栏高度
            const maxLevel = Math.max(...card.nodes.map(node => node.level)) + 1;
            const cardHeight = maxLevel * nodeSpacing + topBottomPadding * 2 + titleBarHeight;

            const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
            group.setAttribute('class', 'draggable card-container');
            group.setAttribute('data-id', card.id);
            group.setAttribute('user-select', 'none');
            group.setAttribute('transform', `translate(${card.x},${card.y})`);

            const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            rect.setAttribute('fill', '#222');
            rect.setAttribute('width', 150);
            rect.setAttribute('style', 'cursor: auto;');
            rect.setAttribute('height', cardHeight);
            rect.setAttribute('rx', 10); // 圆角
            rect.setAttribute('ry', 10);
            group.appendChild(rect);

            // 使用path绘制带有指定圆角的矩形
            // 创建标题栏
            const titleBarWidth = 150;
            const borderRadius = 10; // 圆角大小
            const titleBar = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            const dValue = `M 0,${borderRadius}
                a ${borderRadius},${borderRadius} 0 0 1 ${borderRadius},-${borderRadius}
                h ${titleBarWidth - borderRadius * 2}
                a ${borderRadius},${borderRadius} 0 0 1 ${borderRadius},${borderRadius}
                v ${titleBarHeight - borderRadius}
                h -${titleBarWidth}
                z`;
            titleBar.setAttribute('class', 'card');
            titleBar.setAttribute('d', dValue);
            titleBar.setAttribute('fill', `url(#titleGradient-${card.id})`);
            group.appendChild(titleBar);

            const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            text.setAttribute('x', titleBarWidth / 2);
            text.setAttribute('y', titleBarHeight / 2);
            text.setAttribute('text-anchor', 'middle');
            text.setAttribute('alignment-baseline', 'middle');
            text.textContent = card.label;
            group.appendChild(text);

            card.nodes.forEach((node, index) => {


                const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                circle.setAttribute('class', 'node');
                circle.setAttribute('cx', node.type === 'in' ? 0 : 150);
                circle.setAttribute('cy', topBottomPadding + titleBarHeight + (node.level + 1) *
                    nodeSpacing - (nodeSpacing / 2));
                circle.setAttribute('r', 7);
                circle.setAttribute('fill', node.color);
                circle.setAttribute('data-card-id', card.id);
                circle.setAttribute('data-node-id', `${card.id}-node${index + 1}`);
                group.appendChild(circle);

                var labelX = node.type === 'in' ? 12 : 138; // 基本的X坐标
                const labelY = topBottomPadding + titleBarHeight + node.level * nodeSpacing + 21;

                // 创建SVG文本元素
                const multiConnectedLabel = document.createElementNS('http://www.w3.org/2000/svg',
                    'text');
                multiConnectedLabel.setAttribute('x', labelX);
                multiConnectedLabel.setAttribute('y', labelY);
                multiConnectedLabel.setAttribute('text-anchor', 'middle');
                multiConnectedLabel.setAttribute('fill', '#aaa');
                multiConnectedLabel.setAttribute('style', 'font-size: 8px;');
                multiConnectedLabel.setAttribute('alignment-baseline', 'hanging');


                // 计算文本的宽度（假定的，因为SVG没有直接获取文本宽度的方法）
                var estimatedTextLength;
                if (node.multiConnected == undefined) {
                    estimatedTextLength = 20
                    multiConnectedLabel.textContent = 'N';
                } else {
                    estimatedTextLength = node.multiConnected.length;
                    multiConnectedLabel.textContent = node.multiConnected;
                }

                // 确保文本不会超出卡片右边界
                if (labelX + estimatedTextLength / 2 > 150) {
                    labelX = 150 - estimatedTextLength / 2;
                    nodeLabel.setAttribute('x', labelX);
                }

                // 确保文本不会超出卡片左边界
                if (labelX - estimatedTextLength / 2 < 0) {
                    labelX = estimatedTextLength / 2;
                    nodeLabel.setAttribute('x', labelX);
                }

                group.appendChild(multiConnectedLabel);

                if (node.label != undefined) {
                    // 计算文本标签的位置
                    var labelX = node.type === 'in' ? 15 : 135; // 基本的X坐标
                    const labelY = topBottomPadding + titleBarHeight + node.level * nodeSpacing + 40;

                    // 创建SVG文本元素
                    const nodeLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                    nodeLabel.setAttribute('x', labelX);
                    nodeLabel.setAttribute('y', labelY); // 在节点下方留出一定空间
                    nodeLabel.setAttribute('text-anchor', 'middle'); // 文本居中对齐
                    nodeLabel.setAttribute('fill', '#aaa'); // 文本居中对齐
                    nodeLabel.setAttribute('alignment-baseline', 'hanging');
                    nodeLabel.textContent = node.label;

                    // 计算文本的宽度（假定的，因为SVG没有直接获取文本宽度的方法）
                    const estimatedTextLength = node.label.length * 10; // 估算每个字符6像素宽

                    // 确保文本不会超出卡片右边界
                    if (labelX + estimatedTextLength / 2 > 150) {
                        labelX = 150 - estimatedTextLength / 2;
                        nodeLabel.setAttribute('x', labelX);
                    }

                    // 确保文本不会超出卡片左边界
                    if (labelX - estimatedTextLength / 2 < 0) {
                        labelX = estimatedTextLength / 2;
                        nodeLabel.setAttribute('x', labelX);
                    }

                    group.appendChild(nodeLabel);

                }

                switch (node.slot) {
                    case 'input':
                        const foreignObject = document.createElementNS('http://www.w3.org/2000/svg',
                            'foreignObject');
                        foreignObject.setAttribute('x', 0);
                        foreignObject.setAttribute('y', topBottomPadding + titleBarHeight + node.level *
                            nodeSpacing + 12);
                        foreignObject.setAttribute('width', 130); // 保持原始宽度
                        foreignObject.setAttribute('height', nodeSpacing - 24); // 保持原始高度，减去的24像素为上下内边距之和
                        const input = document.createElement('input');
                        input.type = 'text';
                        if (node.value == undefined) {
                            node.value = '';
                        }
                        input.value = node.value;
                        input.addEventListener('input', function() {
                            node.value = input.value;
                        });
                        // Set adjusted input styles
                        input.style.width = '110px';
                        input.style.height = '100%';
                        input.style.marginLeft = '20px';
                        input.style.borderRadius = '5px';
                        input.style.border = '1px solid white';
                        input.style.backgroundColor = '#222';
                        input.style.color = 'white';
                        input.style.fontSize = '1em';
                        input.style.padding = '0px'; // 可能需要调整或去除内边距以适应固定尺寸
                        input.style.boxSizing = 'border-box'; // 确保宽高包含内容、内边距和边框

                        // Change border color on focus and blur
                        input.addEventListener('focus', () => {
                            input.style.outline = 'none'; // Remove default focus outline
                            input.style.borderColor =
                                'white'; // Keep border color white on focus
                        });

                        input.addEventListener('blur', () => {
                            input.style.borderColor =
                                'white'; // Revert to white when not focused
                        });

                        // 阻止事件冒泡
                        input.addEventListener('click', function(event) {
                            event.stopPropagation();
                        });

                        input.addEventListener('mousedown', function(event) {
                            event.stopPropagation();
                        });

                        input.addEventListener('touchstart', function(event) {
                            event.stopPropagation();
                        });

                        foreignObject.appendChild(input);
                        group.appendChild(foreignObject);
                        break;
                }



            });

            const deleteIcon = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            deleteIcon.setAttribute('class', 'card-delete-icon');
            deleteIcon.setAttribute('x', 125);
            deleteIcon.setAttribute('y', 5); // 使其贴近标题栏的右上角
            deleteIcon.setAttribute('width', 20);
            deleteIcon.setAttribute('height', 20);
            deleteIcon.setAttribute('fill', 'transparent');
            deleteIcon.setAttribute('data-card-id', card.id);
            deleteIcon.setAttribute('style', 'cursor: pointer;');
            group.appendChild(deleteIcon);

            const delText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            delText.setAttribute('x', 135);
            delText.setAttribute('y', 20); // 调整位置以垂直居中
            delText.setAttribute('text-anchor', 'middle');
            delText.setAttribute('fill', 'white');
            delText.setAttribute('font-size', '16px'); // 适当调整字体大小以适应图标
            delText.setAttribute('pointer-events', 'none'); // 确保点击事件只触发于删除图标上
            delText.textContent = '×';
            group.appendChild(delText);

            cardsContainer.appendChild(group);
        });

        attachNodeEventListeners();
    }



    function drawLinks() {
        debugger
        const linksContainer = document.getElementById('linksContainer');
        linksContainer.innerHTML = ''; // 清除现有的线条
        // 清除旧的删除图标
        document.querySelectorAll('.delete-icon').forEach(icon => icon.remove());

        links.forEach((link, index) => {
            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            //path.setAttribute('class', 'link');
            path.setAttribute('stroke', link.target.color)
            path.setAttribute('stroke-width', 5)
            path.setAttribute('fill', 'none');


            const isCallType = link.source.enumType === 'call';
            if (isCallType) {
                path.setAttribute('stroke-dasharray', '10');
                path.setAttribute('stroke-dashoffset', '0');

                // Add animation element to the path for dashed lines
                const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
                animate.setAttribute('attributeName', 'stroke-dashoffset');
                animate.setAttribute('dur', '0.5s');
                animate.setAttribute('repeatCount', 'indefinite');
                animate.setAttribute('from', '20');
                animate.setAttribute('to', '0');
                path.appendChild(animate);
            }


            var dist;
            // 使用动态计算的控制点距离来定义曲线,根据源点和终点的X坐标差异动态计算控制点的距离
            if (link.source.type === 'out') {
                if (link.source.x - link.target.x > 0) {
                    dist = 200; // 如果终点在源点的左侧，控制点距离更远
                } else {
                    dist = Math.abs(link.target.x - link.source.x) * 0.3; // 否则，根据两点间的距离调整控制点距离
                }
                const d =
                    `M${link.source.x} ${link.source.y} C${link.source.x + dist} ${link.source.y} ${link.target.x - dist} ${link.target.y} ${link.target.x} ${link.target.y}`;
                path.setAttribute('d', d);
                linksContainer.appendChild(path);
            }
            else {
                if (link.target.x - link.source.x > 0) {
                    dist = 200; // 如果终点在源点的右侧，控制点距离更远
                } else {
                    dist = Math.abs(link.target.x - link.source.x) * 0.3; // 否则，根据两点间的距离调整控制点距离
                }
                const d =
                    `M${link.source.x} ${link.source.y} C${link.source.x - dist} ${link.source.y} ${link.target.x + dist} ${link.target.y} ${link.target.x} ${link.target.y}`;
                path.setAttribute('d', d);
                linksContainer.appendChild(path);
            }


            // 计算中点
            const midX = (link.source.x + link.target.x) / 2;
            const midY = (link.source.y + link.target.y) / 2;

            // 绘制删除图标
            const deleteIcon = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            deleteIcon.setAttribute('class', 'delete-icon');
            deleteIcon.setAttribute('cx', midX);
            deleteIcon.setAttribute('cy', midY);
            deleteIcon.setAttribute('style', "cursor: pointer;");
            deleteIcon.setAttribute('r', 10);
            deleteIcon.setAttribute('fill', 'red');
            deleteIcon.setAttribute('data-link-level', index); // 用于标识该删除图标对应的线
            linksContainer.appendChild(deleteIcon);

            // 可以选择添加一个×文本在圆圈中间
            const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            text.setAttribute('x', midX);
            text.setAttribute('y', midY + 5); // 轻微调整以垂直居中
            text.setAttribute('text-anchor', 'middle');
            text.setAttribute('fill', 'white');
            text.setAttribute('font-size', '15px');
            text.setAttribute('pointer-events', 'none'); // 确保点击事件只触发于圆圈上
            text.textContent = '×';
            linksContainer.appendChild(text);

        });
    }

    // 定义变量来追踪是否正在拖动以及拖动的起始位置
    var isPanning = false;
    var startPan = {
        x: 0,
        y: 0
    };

    // 用于调整SVG视图窗口的变量
    var currentPan = {
        x: 0,
        y: 0
    };

    function attachEventListeners() {

        const svgContainer = document.getElementById('svgContainer');
        document.querySelectorAll('.link').forEach(link => {
            link.addEventListener('contextmenu', function(e) {
                e.preventDefault(); // 阻止默认的右键菜单
                const linkId = e.target.getAttribute('data-link-id'); // 确保你在绘制线条时添加了 data-link-id 属性
                showContextMenu(e.clientX, e.clientY, linkId);
            });
        });
        document.getElementById('svgContainer').addEventListener('click', function(e) {
            if (e.target.classList.contains('delete-icon')) {
                // 获取点击的删除图标对应的线的索引
                const linkIndex = e.target.getAttribute('data-link-level');
                // 从数组中移除该线
                links.splice(linkIndex, 1);
                // 重新绘制剩余的线和删除图标
                drawLinks();
                drawCards(); // 如果你的线条与卡片有关联，可能需要重新绘制卡片以更新视图
            } else if (e.target.classList.contains('card-delete-icon')) {
                // 获取点击的删除图标对应的卡片ID
                const cardId = e.target.getAttribute('data-card-id');
                // 从`cards`数组中移除对应的卡片
                cards = cards.filter(card => card.id !== cardId);
                // 同时移除所有与该卡片连接的线
                links = links.filter(link => !(link.source.node.startsWith(cardId) || (link.target && link.target
                    .node.startsWith(cardId))));
                // 重新绘制卡片和线
                drawLinks();
                drawCards();
            } else {
                var targetCardContainer = e.target.closest('.card-container');
                if (targetCardContainer) {
                    const cardId = targetCardContainer.getAttribute('data-id');
                    // 将SVG元素移动到最后，使其在视觉上显示在最前面
                    targetCardContainer.parentNode.appendChild(targetCardContainer);

                    // 更新cards数组，将点击的卡片移动到数组的末尾
                    const cardIndex = cards.findIndex(card => card.id === cardId);
                    if (cardIndex > -1) {
                        const card = cards.splice(cardIndex, 1)[0];
                        cards.push(card);
                    }

                    // 这里不需要立即调用drawCards或drawLinks，
                    // 除非你需要根据cards数组的新顺序进行其他更新
                }
            }
        });

        svgContainer.addEventListener('contextmenu', function(e) {
            e.preventDefault(); // 阻止右键菜单
        });

        svgContainer.addEventListener('mousedown', e => {

            // 检查是否是鼠标右键点击

            const target = e.target;
            if (e.button === 2) {
                isPanning = true;
                startPan.x = e.clientX - currentPan.x;
                startPan.y = e.clientY - currentPan.y;
            } else if (target.classList.contains('card') || target.tagName === 'text') {
                const cardContainer = target.closest('.card-container');
                const cardId = cardContainer.getAttribute('data-id');
                startDragCard(e, cardId);
            }
        });
        document.addEventListener('mousemove', e => {
            if (isPanning) {
                // 正确计算新的视图窗口位置
                currentPan.x = e.clientX - startPan.x;
                currentPan.y = e.clientY - startPan.y;

                // 正确调整SVG的viewBox来实现拖动效果
                // 这里需要更新的是开始拖动的点，而不是当前的点，因此我们反向更新
                svgContainer.setAttribute('viewBox',
                    `${-currentPan.x} ${-currentPan.y} ${svgContainer.clientWidth} ${svgContainer.clientHeight}`
                );
                svgContainer.style.backgroundPosition = `${currentPan.x % 100}px ${currentPan.y % 100}px`;
            } else if (isDragging) {
                moveCard(e);
            } else if (isLinking && currentLink) {
                updateLink(e);
            }
        });

        document.addEventListener('mouseup', e => {
            if (e.button === 2) {
                console.log(currentPan);
                isPanning = false;
            } else if (isDragging) {
                endDragCard();
            } else if (isLinking) {
                endDragLink(e);
            }
        });
    }

    function startDragCard(e, cardId) {
        isDragging = true;
        const card = cards.find(c => c.id === cardId);
        currentCard = card;

        const svgRect = svgContainer.getBoundingClientRect();
        dragOffsetX = e.clientX - svgRect.left - card.x;
        dragOffsetY = e.clientY - svgRect.top - card.y;
    }

    function moveCard(e) {
        const svgRect = svgContainer.getBoundingClientRect();
        currentCard.x = e.clientX - svgRect.left - dragOffsetX;
        currentCard.y = e.clientY - svgRect.top - dragOffsetY;
        debugger
        // Update link positions associated with the currentCard
        links.forEach(link => {
            if (link.source.node.split('-node')[0] == currentCard.id) {
                // 根据节点ID更新链接的源位置
                const nodeIndex = parseInt(link.source.node.split('-node')[1]) - 1;
                const nodeConfig = currentCard.nodes[nodeIndex]; // 获取当前节点的配置
                const nodeSpacing = 50; // 节点间隔，应与drawCards函数中使用的相同
                const topBottomPadding = 20; // 顶部和底部的边距，应与drawCards函数中使用的相同
                link.source.x = currentCard.x + (nodeConfig.type === "in" ? 0 : 150); // 根据节点类型调整x坐标
                link.source.y = 30 + currentCard.y + topBottomPadding + (nodeConfig.level + 1) * nodeSpacing - (
                    nodeSpacing / 2); // 根据节点的index调整y坐标
            }
            if (link.target && link.target.node.split('-node')[0] == currentCard.id) {
                // 根据节点ID更新链接的目标位置
                const nodeIndex = parseInt(link.target.node.split('-node')[1]) - 1;
                const nodeConfig = currentCard.nodes[nodeIndex]; // 获取当前节点的配置
                link.target.x = currentCard.x + (nodeConfig.type === "in" ? 0 : 150); // 根据节点类型调整x坐标
                link.target.y = 30 + currentCard.y + 20 + (nodeConfig.level + 1) * 50 - (50 /
                    2); // 根据节点的index调整y坐标
            }
        });

        drawLinks(); // Redraw links to reflect updated positions
        drawCards(); // Redraw cards and nodes
    }



    function endDragCard() {
        isDragging = false;
    }

    function getNodeCurrentConnections(nodeId) {
        var count = 0;
        links.forEach(link => {
            if (link.source.node === nodeId || (link.target && link.target.node === nodeId)) {
                count++;
            }
        });
        return count;
    }

    function startDragLink(e) {
        e.stopPropagation(); // Prevent card drag

        const nodeId = e.target.getAttribute('data-node-id');
        const cardId = e.target.getAttribute('data-card-id');
        const card = cards.find(c => c.id === cardId);
        const nodeElement = e.target;
        const node = card.nodes.find(n => `${card.id}-node${card.nodes.indexOf(n) + 1}` === nodeId);


        // 检查源节点是否允许发起新的连接
        const currentConnections = getNodeCurrentConnections(nodeId);
        if (node.multiConnected !== -1 && currentConnections >= node.multiConnected) {
            console.log('此节点不允许更多的连接。');
            return; // 不允许创建新的连接
        }
        isLinking = true;

        const svgRect = svgContainer.getBoundingClientRect();
        const nodeX = e.clientX - svgRect.left;
        const nodeY = e.clientY - svgRect.top;

        currentLink = {
            source: {
                node: nodeId,
                x: nodeX,
                y: nodeY,
                color: nodeElement.getAttribute('fill'),
                type: node.type,
                enumType: node.enumType
            },
            target: null
        };
    }

    function updateLink(e) {
        const svgRect = svgContainer.getBoundingClientRect();
        currentLink.target = {
            x: e.clientX - svgRect.left,
            y: e.clientY - svgRect.top
        };
        drawCurrentLink();
    }

    function endDragLink(e) {
        isLinking = false;
        const svgRect = svgContainer.getBoundingClientRect();
        const x = e.clientX - svgRect.left;
        const y = e.clientY - svgRect.top;

        // 默认情况下，假设目标节点就是e.target
        var targetNode = e.target;

        // 检查e.target是否是我们期望的节点类型，如果不是，则尝试使用document.elementFromPoint
        if (!targetNode.classList.contains('node')) {
            e.target.style.display = 'none';
            targetNode = document.elementFromPoint(e.clientX, e.clientY);
            e.target.style.display = '';
        }

        var validTargetFound = false;

        // 进行节点的有效性判断
        if (targetNode && targetNode.classList.contains('node')) {
            const sourceNodeId = currentLink.source.node;
            const targetNodeId = targetNode.getAttribute('data-node-id');

            // 从节点ID分解出卡片ID和节点索引
            const sourceNodeParts = sourceNodeId.split('-node');
            const targetNodeParts = targetNodeId.split('-node');
            const sourceCard = cards.find(card => card.id === sourceNodeParts[0]);
            const targetCard = cards.find(card => card.id === targetNodeParts[0]);

            // 根据节点ID找到对应的节点对象
            const sourceNodeIndex = parseInt(sourceNodeParts[1]) - 1;
            const targetNodeIndex = parseInt(targetNodeParts[1]) - 1;
            const sourceNode = sourceCard.nodes[sourceNodeIndex];
            const targetNodeObj = targetCard.nodes[targetNodeIndex];

            // 检查目标节点是否允许接受新的连接
            const targetCurrentConnections = getNodeCurrentConnections(targetNodeId);
            if (targetNodeObj.multiConnected !== -1 && targetCurrentConnections >= targetNodeObj.multiConnected) {
                console.log('目标节点不允许更多的连接。');
                // 移除临时绘制的连接线
                const tempLink = document.querySelector('.temp-link');
                if (tempLink) {
                    tempLink.remove();
                }
                currentLink = null;
                drawLinks();
                return;
            }
            // 确保目标节点不是起始节点自身，避免自连接
            if (currentLink.source.node !== targetNodeId && sourceNode.enumType === targetNodeObj.enumType) {
                validTargetFound = true;
                currentLink.source.enumType = sourceNode.enumType;
                currentLink.source.x = currentLink.source.x - currentPan.x;
                currentLink.source.y = currentLink.source.y - currentPan.y;
                // 更新连接的目标信息，并保存该连接
                links.push({
                    ...currentLink,
                    target: {
                        node: targetNodeId,
                        x: x - currentPan.x,
                        y: y - currentPan.y,
                        color: sourceNode.color,
                        enumType: sourceNode.enumType
                    }
                });
            }
        } else {
            debugger
            const sourceNodeId = currentLink.source.node;
            const sourceNodeParts = sourceNodeId.split('-node');
            const sourceCard = cards.find(card => card.id === sourceNodeParts[0]);
            const sourceNodeIndex = parseInt(sourceNodeParts[1]) - 1;
            const sourceNode = sourceCard.nodes[sourceNodeIndex];
            currentLink.source.enumType = sourceNode.enumType;
            showCardCreationModal(e.clientX, e.clientY, currentLink.source);

        }

        const tempLink = document.querySelector('.temp-link');
        if (tempLink) {
            tempLink.remove();
        }
        currentLink = null;
        drawLinks();
    }

    // 更新drawCurrentLink函数，增加线宽
    // 更新drawCurrentLink函数，增加线宽
    function drawCurrentLink() {
        const tempLink = document.querySelector('.temp-link');
        if (tempLink) tempLink.remove();

        if (!currentLink || !currentLink.target) return;

        const svgContainer = document.getElementById('svgContainer');
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('class', 'temp-link');
        // 设置等宽线属性
        path.setAttribute('stroke', currentLink.source.color);
        path.setAttribute('stroke-width', 5);
        path.setAttribute('fill', 'none');

        // 计算考虑了平移偏移的起点和终点
        const adjustedSourceX = currentLink.source.x - currentPan.x;
        const adjustedSourceY = currentLink.source.y - currentPan.y;
        const adjustedTargetX = currentLink.target.x - currentPan.x;
        const adjustedTargetY = currentLink.target.y - currentPan.y;

        // 更新路径以使用调整后的坐标
        if (currentLink.source.type === 'out') {
            const d =
                `M${adjustedSourceX},${adjustedSourceY} C${adjustedSourceX + 100},${adjustedSourceY} ${adjustedTargetX - 100},${adjustedTargetY} ${adjustedTargetX},${adjustedTargetY}`;
            path.setAttribute('d', d);
        } else {
            const d =
                `M${adjustedSourceX},${adjustedSourceY} C${adjustedSourceX - 100},${adjustedSourceY} ${adjustedTargetX + 100},${adjustedTargetY} ${adjustedTargetX},${adjustedTargetY}`;
            path.setAttribute('d', d);
        }

        svgContainer.appendChild(path);
    }

    function attachNodeEventListeners() {
        document.querySelectorAll('.node').forEach(node => {
            node.addEventListener('mousedown', startDragLink);
        });
    }

    function populateCardTypeList(mouseX, mouseY, sourceNode) {
        const listElement = document.getElementById('card-type-list');
        listElement.innerHTML = ''; // 清空现有列表项
        const addedTypes = new Set();
        //节点列表
        cardsbei.forEach(card => {
            if (!addedTypes.has(card.type)) {
                const listItem = document.createElement('li');
                listItem.tabIndex = 0; // 使元素能够获得焦点，以便能够监听键盘事件
                listItem.textContent = card.label; // 使用卡片的标签或类型
                listItem.onclick = function() {
                    createNewCard(card, mouseX, mouseY, sourceNode);
                    hideCardCreationModal(); // 新建卡片后隐藏模态框
                };
                listItem.onkeydown = function(event) {
                    if (event.key === 'Enter') {
                        createNewCard(card, mouseX, mouseY, sourceNode);
                        hideCardCreationModal(); // 新建卡片后隐藏模态框
                    }
                };
                listElement.appendChild(listItem);
                addedTypes.add(card.type);
            }
        });
    }


    function showCardCreationModal(mouseX, mouseY, sourceNode) {
        populateCardTypeList(mouseX, mouseY, sourceNode); // 填充卡片类型列表
        const modal = document.getElementById('card-creation-modal');
        // 在这里添加取消按钮
        if (!document.getElementById('cancel-btn')) {
            const cancelButton = document.createElement('button');
            cancelButton.id = 'cancel-btn';
            cancelButton.textContent = '取消';
            cancelButton.onclick = function() {
                hideCardCreationModal();
            };
            modal.appendChild(cancelButton);
        }



        // 设置弹出框的位置
        modal.style.left = mouseX + 'px';
        modal.style.top = mouseY + 'px';
        modal.style.display = 'block'; // 显示弹窗
    }

    function createNewCard(cardTemplate, mouseX, mouseY, sourceNode) {
        var carrdid = [];
        cards.forEach(card => {
            carrdid.push(card.id.replace('card',''));
        })

        const newCard = {
            ...cardTemplate,
            nodes: JSON.parse(JSON.stringify(cardTemplate.nodes)), // 深拷贝nodes属性
            id: 'card' + (Math.max.apply(null, carrdid) + 1)
        };
        // 将每个node的value设置为空字符串
        newCard.nodes.forEach(node => {
            node.value = '';
        });
        newCard.x = mouseX - 75 - currentPan.x; // 调整为鼠标中心
        newCard.y = mouseY - 15 - currentPan.y; // 调整为鼠标中心
        cards.push(newCard); // 将新创建的卡片添加到卡片列表中

        // 如果提供了sourceNode，找到新卡片的合适target node并创建连接
        if (sourceNode) {
            sourceNode.x -= currentPan.x;
            sourceNode.y -= currentPan.y;
            var targetNode = newCard.nodes.find(node => node.enumType === sourceNode.enumType && node.type === 'in');
            if (targetNode) {
                links.push({
                    source: sourceNode,
                    target: {
                        node: `${newCard.id}-node${newCard.nodes.indexOf(targetNode) + 1}`,
                        x: newCard.x + (targetNode.type === 'in' ? 0 : 150),
                        y: newCard.y + 30 + 20 + (targetNode.level + 1) * 50 - 25,
                        color: targetNode.color,
                        enumType: targetNode.enumType
                    }
                });
            }
        }


        drawLinks();
        drawCards();
    }



    function hideCardCreationModal() {
        const modal = document.getElementById('card-creation-modal');
        modal.style.display = 'none'; // 隐藏弹窗
    }



    $("#saves").on('click', function() {
       var s = cards;
       if (cards.length == 0)
           return

       var type = $('#destroySelect').val();
        var datas = {
            type : type,
            data: JSON.stringify(cards),
            links : JSON.stringify(links)
        }

        $.ajax('/zndya/addMap', {
            method: 'POST',
            data: JSON.stringify(datas),
            contentType: 'application/json',
            success: function (result) {
                if(result.status != null) {
                    // 弹出添加成功提示消息
                    layer.msg('添加成功...');
                    init(type);
                } else {
                    // 弹出添加失败提示消息
                    layer.msg(result.ERROR);
                }
            }
        });

    });



</script>
<style>
    body,
    html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    /* 弹窗容器样式 */
    #card-creation-modal {
        border: 1px solid #444;
        background: linear-gradient(145deg, #333, #555);
        padding: 5px;
        z-index: 100;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        overflow: hidden;
        margin: 0;
        user-select: none;
    }

    #card-type-list {

        padding-left: 0px;
    }

    /* 列表项基础样式 */
    #card-type-list li {
        list-style: none;
        /* 去除列表项目符号 */
        padding: 8px 15px;
        /* 减少垂直内边距使其更紧凑 */
        border-bottom: 1px solid #666;
        /* 暗色底部边框线 */
        color: #ddd;
        /* 暗色系字体颜色 */
        cursor: pointer;
        /* 鼠标指针样式 */
        margin-left: 0;
        /* 消除左边间隙 */

    }

    /* 列表项高亮样式 */
    #card-type-list li:hover,
    #card-type-list li:focus {
        background-color: #777;
        /* 暗色背景颜色 */
        color: #fff;
        /* 高亮字体颜色 */
    }

    /* 最后一个列表项的底部边框 */
    #card-type-list li:last-child {
        border-bottom: none;
    }

    .grid-background {
        background-color: #292929;
        background-image:
                linear-gradient(to right, black 1px, transparent 1px),
                linear-gradient(to bottom, black 1px, transparent 1px),
                linear-gradient(to right, #404040 1px, transparent 1px),
                linear-gradient(to bottom, #404040 1px, transparent 1px);
        background-size:
                100px 100px,
                100px 100px,
                10px 10px,
                10px 10px;
        width: 100%;
        height: 100%;
    }

    .draggable {
        cursor: grab;
    }

    .node {

        cursor: pointer;
    }

    .link {
        stroke: black;
        stroke-width: 2;
    }

    .card {
        /* fill: lightgrey;
    stroke: black; */

        stroke-width: 1;
        user-select: none;
    }

    text {
        pointer-events: none;
        user-select: none;
    }
</style>