SCADATrainSys/Tech/views/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨智能流程图功能页面</title>
    <style>
        #flowchart-container {
            width: 100vw;
            height: 100vh;
            border: 1px solid #ccc;
            position: relative;
            overflow: hidden;
        }
        .node {
            position: absolute;
            width: 120px;
            height: 60px;
            border: 2px solid #3498db;
            background-color: #f0f8ff;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: move;
            user-select: none;
        }
        .edge {
            position: absolute;
            height: 2px;
            background-color: #7f8c8d;
            transform-origin: 0 0;
        }
        .toolbar {
            position: fixed;
            top: 10px;
            left: 10px;
            background-color: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            z-index: 100;
        }
        button {
            margin: 5px;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <button id="add-node">添加节点</button>
        <button id="connect-nodes">连接节点</button>
        <button id="save-diagram">保存流程图</button>
    </div>
    <div id="flowchart-container"></div>

    <script>
        // 获取DOM元素
        const container = document.getElementById('flowchart-container');
        const addNodeBtn = document.getElementById('add-node');
        const connectNodesBtn = document.getElementById('connect-nodes');
        const saveDiagramBtn = document.getElementById('save-diagram');

        // 存储节点和边
        let nodes = [];
        let edges = [];
        let isConnecting = false;
        let startNode = null;

        // 添加节点函数
        function addNode(x, y) {
            const node = document.createElement('div');
            node.className = 'node';
            node.textContent = `节点 ${nodes.length + 1}`;
            node.style.left = x + 'px';
            node.style.top = y + 'px';
            container.appendChild(node);

            const nodeData = {
                element: node,
                x: x,
                y: y,
                id: nodes.length
            };
            nodes.push(nodeData);

            // 添加拖拽功能
            let isDragging = false;
            let offsetX, offsetY;

            node.addEventListener('mousedown', (e) => {
                isDragging = true;
                offsetX = e.clientX - x;
                offsetY = e.clientY - y;
                node.style.zIndex = 10;

                if (isConnecting && !startNode) {
                    startNode = nodeData;
                }
            });

            document.addEventListener('mousemove', (e) => {
                if (isDragging) {
                    x = e.clientX - offsetX;
                    y = e.clientY - offsetY;
                    node.style.left = x + 'px';
                    node.style.top = y + 'px';
                    nodeData.x = x;
                    nodeData.y = y;
                    updateEdges();
                }
            });

            document.addEventListener('mouseup', () => {
                isDragging = false;
                node.style.zIndex = 1;

                if (isConnecting && startNode && startNode !== nodeData) {
                    addEdge(startNode, nodeData);
                    startNode = null;
                    isConnecting = false;
                }
            });
        }

        // 添加边函数
        function addEdge(fromNode, toNode) {
            const edge = document.createElement('div');
            edge.className = 'edge';
            container.appendChild(edge);

            const edgeData = {
                element: edge,
                from: fromNode,
                to: toNode
            };
            edges.push(edgeData);

            updateEdgePosition(edgeData);
        }

        // 更新边的位置
        function updateEdgePosition(edgeData) {
            const fromX = edgeData.from.x + edgeData.from.element.offsetWidth / 2;
            const fromY = edgeData.from.y + edgeData.from.element.offsetHeight / 2;
            const toX = edgeData.to.x + edgeData.to.element.offsetWidth / 2;
            const toY = edgeData.to.y + edgeData.to.element.offsetHeight / 2;

            const dx = toX - fromX;
            const dy = toY - fromY;
            const length = Math.sqrt(dx * dx + dy * dy);
            const angle = Math.atan2(dy, dx) * (180 / Math.PI);

            edgeData.element.style.left = fromX + 'px';
            edgeData.element.style.top = fromY + 'px';
            edgeData.element.style.width = length + 'px';
            edgeData.element.style.transform = `rotate(${angle}deg)`;
        }

        // 更新所有边的位置
        function updateEdges() {
            edges.forEach(edge => {
                updateEdgePosition(edge);
            });
        }

        // 按钮事件监听
        addNodeBtn.addEventListener('click', () => {
            addNode(100 + nodes.length * 150, 100);
        });

        connectNodesBtn.addEventListener('click', () => {
            isConnecting = true;
        });

        saveDiagramBtn.addEventListener('click', () => {
            // 这里可以实现保存流程图数据的逻辑
            console.log('保存流程图数据:', { nodes, edges });
        });

        // 点击空白处添加节点
        container.addEventListener('click', (e) => {
            if (e.target === container) {
                addNode(e.clientX, e.clientY);
            }
        });
    </script>
</body>
</html>