TrustDataSpace/assets/js/index/index.js

// 核心技术内容配置
const techContents = {
    '数据沙箱': {
        image: './assets/images/index/core01.png',
        content: `
            <div class="tech-image">
                <img src="./assets/images/index/core01.png" alt="数据沙箱">
                <div class="tech-image-value">
                    <h5>技术价值</h5>
                    <p>实现数据可用不可见，保障数据在流通过程中的安全可信。</p>
                </div>
            </div>
            <div class="tech-info">
                <div class="tech-value">
                    <h5>技术价值</h5>
                    <p>数据沙箱技术是一种安全的数据使用环境，通过构建独立的计算空间，允许数据需求方在不接触原始数据的情况下完成数据分析和计算任务。该技术集成了数据脱敏、访问控制、安全审计等多重保护机制，确保数据在流通和使用过程中的安全性。同时，通过提供标准化的数据服务接口，支持多样化的数据应用场景，实现数据价值的安全释放。</p>
                </div>
                <div class="tech-advantages">
                    <h5>技术优势</h5>
                    <ul>
                        <li>安全性高：采用多层安全防护架构，包括身份认证、权限控制、数据加密等措施，从多个维度保障数据安全</li>
                        <li>场景丰富：支持数据分析、机器学习、统计建模等多种计算场景，满足不同行业的数据应用需求</li>
                        <li>易于管理：提供完整的管理功能，包括数据接入、权限配置、使用监控、审计追踪等，降低运维管理成本</li>
                        <li>性能优异：通过优化的计算引擎和资源调度机制，确保数据处理的高效性，支持大规模数据分析需求</li>
                    </ul>
                </div>
            </div>
        `
    },
    '数据抽样': {
        image: './assets/images/index/core02.png',
        content: `
            <div class="tech-image">
                <img src="./assets/images/index/core02.png" alt="数据抽样">
                <div class="tech-image-value">
                    <h5>技术价值</h5>
                    <p>确保数据采样的科学性和代表性，提供高效可靠的数据获取方法。</p>
                </div>
            </div>
            <div class="tech-info">
                <div class="tech-value">
                    <h5>技术价值</h5>
                    <p>数据抽样技术是一种从大规模数据集中提取代表性样本的科学方法，通过系统化的抽样策略和质量控制机制，确保抽取的数据样本能够准确反映整体数据特征。该技术融合了统计学原理和计算优化算法，支持多种抽样方法，包括随机抽样、分层抽样、配额抽样等，并通过智能化的参数调优和样本验证，保证抽样结果的可靠性和实用价值。</p>
                </div>
                <div class="tech-advantages">
                    <h5>技术优势</h5>
                    <ul>
                        <li>科学准确：基于严谨的统计学理论，通过多种抽样方法和验证机制，确保样本的代表性和可信度</li>
                        <li>灵活高效：支持多种抽样策略，可根据不同场景需求灵活配置抽样参数，显著提升数据获取效率</li>
                        <li>成本优化：通过合理的样本量设计和优化算法，在保证数据质量的同时，有效降低数据处理成本</li>
                        <li>易于集成：提供标准化的接口和服务，可无缝集成到现有数据处理流程中，支持自动化操作</li>
                    </ul>
                </div>
            </div>
        `
    },
    '数据脱敏': {
        image: './assets/images/index/core03.png',
        content: `
            <div class="tech-image">
                <img src="./assets/images/index/core03.png" alt="数据脱敏">
                <div class="tech-image-value">
                    <h5>技术价值</h5>
                    <p>在保护敏感信息的同时保持数据可用性，实现数据安全共享和分析利用。</p>
                </div>
            </div>
            <div class="tech-info">
                <div class="tech-value">
                    <h5>技术价值</h5>
                    <p>数据脱敏技术是一种信息安全保护方法，通过对敏感数据进行变形、替换、加密等处理，在确保数据分析价值的同时有效保护隐私信息。该技术包含静态脱敏和动态脱敏两大类，支持字符遮蔽、数据替换、格式保留加密等多种脱敏策略，并通过智能规则引擎实现数据的精准识别和安全转换，广泛应用于金融、医疗、政务等领域的数据安全流通场景。</p>
                </div>
                <div class="tech-advantages">
                    <h5>技术优势</h5>
                    <ul>
                        <li>安全可控：采用多层级脱敏策略，支持字段级、记录级的精细化控制，确保敏感信息得到全面保护</li>
                        <li>业务友好：在实现隐私保护的同时保持数据的业务价值，支持多种格式保留脱敏方法，便于后续分析利用</li>
                        <li>性能卓越：通过优化的脱敏算法和并行处理机制，支持海量数据的高效处理，满足实时业务需求</li>
                        <li>灵活扩展：提供丰富的脱敏规则配置选项，可根据不同场景快速定制脱敏方案，适应各类业务需求</li>
                    </ul>
                </div>
            </div>
        `
    },
    '多方安全计算': {
        image: './assets/images/index/core04.png',
        content: `
            <div class="tech-image">
                <img src="./assets/images/index/core04.png" alt="多方安全计算">
                <div class="tech-image-value">
                    <h5>技术价值</h5>
                    <p>实现多个参与方在不泄露原始数据的前提下进行联合数据计算和分析。</p>
                </div>
            </div>
            <div class="tech-info">
                <div class="tech-value">
                    <h5>技术价值</h5>
                    <p>多方安全计算是一种先进的密码学技术，允许多个数据持有方在保护各自数据隐私的前提下完成联合计算任务。该技术融合了秘密分享、混淆电路、同态加密等密码学方法，通过构建安全的计算协议，确保计算过程中各方只能获得最终结果，无法获取其他参与方的原始数据。广泛应用于跨机构数据分析、联合风控、隐私计算等场景，是数据安全流通的核心支撑技术。</p>
                </div>
                <div class="tech-advantages">
                    <h5>技术优势</h5>
                    <ul>
                        <li>隐私保护：基于严格的密码学协议，确保计算过程中各方数据不出域、不泄露，从根本上解决数据安全问题</li>
                        <li>结果可信：采用安全的多方计算协议，保证计算结果的准确性和可验证性，支持公平计算</li>
                        <li>场景丰富：支持多种基础运算和高级分析功能，可用于联合建模、统计分析、特征计算等多种业务场景</li>
                        <li>可扩展性：支持两方到多方的安全计算场景，并可通过分布式计算提升性能，满足大规模数据计算需求</li>
                    </ul>
                </div>
            </div>
        `
    }
};

// 技术演示链接配置
const techDemoUrls = {
    '数据沙箱': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/数据沙箱.icraft&preview=true',
    '数据抽样': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/数据抽样.icraft&preview=true',
    '数据脱敏': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/数据脱敏计算.icraft&preview=true',
    '多方安全计算': 'https://icraft.gantcloud.com/editor?url=http://111.229.146.203:5000/icraft/多方安全计算.icraft&preview=true'
};

// DOM 加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有技术标签和内容区域
    const techTabs = document.querySelectorAll('.tech-tab');
    const techContentArea = document.querySelector('.tech-content');

    // 为每个技术标签添加点击事件
    techTabs.forEach(tab => {
        tab.addEventListener('click', function() {
            // 移除所有标签的active类
            techTabs.forEach(t => t.classList.remove('active'));
            // 为当前点击的标签添加active类
            this.classList.add('active');

            // 获取当前标签对应的技术内容
            const techName = this.textContent;
            const techData = techContents[techName];

            // 如果找到对应的内容，则更新显示
            if (techData) {
                techContentArea.innerHTML = techData.content;
            }
        });
    });

    // 展示类型切换功能
    const displayTabs = document.querySelectorAll('.display-tab');
    const displayContents = document.querySelectorAll('.display-content > div');

    displayTabs.forEach((tab, index) => {
        tab.addEventListener('click', function() {
            // 移除所有标签和内容的active类
            displayTabs.forEach(t => t.classList.remove('active'));
            displayContents.forEach(c => c.classList.remove('active'));

            // 为当前点击的标签和对应内容添加active类
            this.classList.add('active');
            displayContents[index].classList.add('active');
        });
    });

    // 图片模态框功能
    const archImage = document.querySelector('.arch-image img');
    const imageModal = document.querySelector('.image-modal');
    const modalImage = document.querySelector('.image-modal img');
    const modalClose = document.querySelector('.image-modal-close');

    if (archImage && imageModal && modalImage && modalClose) {
        archImage.addEventListener('click', function() {
            modalImage.src = this.src;
            imageModal.style.display = 'flex';
        });

        modalClose.addEventListener('click', function() {
            imageModal.style.display = 'none';
        });

        imageModal.addEventListener('click', function(e) {
            if (e.target === imageModal) {
                imageModal.style.display = 'none';
            }
        });
    }

    // 创建技术演示浮窗
    const demoModal = document.createElement('div');
    demoModal.className = 'demo-modal';
    demoModal.innerHTML = `
        <div class="demo-modal-content">
            <div class="demo-modal-close">&times;</div>
            <iframe 
                src=""
                frameborder="0"
                allowfullscreen>
            </iframe>
        </div>
    `;
    document.body.appendChild(demoModal);

    // 获取浮窗中的iframe和关闭按钮
    const modalFrame = demoModal.querySelector('iframe');
    const modalCloseDemo = demoModal.querySelector('.demo-modal-close');

    // 为技术图片添加点击事件
    const techContent = document.querySelector('.tech-content');
    techContent.addEventListener('click', function(e) {
        const techImage = e.target.closest('.tech-image img');
        if (techImage) {
            // 获取当前激活的技术标签文本
            const activeTechTab = document.querySelector('.tech-tab.active');
            const techName = activeTechTab.textContent;
            
            // 获取对应的演示链接
            const demoUrl = techDemoUrls[techName];
            if (demoUrl) {
                modalFrame.src = demoUrl;
                demoModal.style.display = 'flex';
                document.body.style.overflow = 'hidden';
            }
        }
    });

    // 关闭浮窗
    modalCloseDemo.addEventListener('click', function() {
        demoModal.style.display = 'none';
        document.body.style.overflow = '';
        modalFrame.src = ''; // 清空iframe源，停止加载
    });

    // 点击浮窗背景关闭
    demoModal.addEventListener('click', function(e) {
        if (e.target === demoModal) {
            demoModal.style.display = 'none';
            document.body.style.overflow = '';
            modalFrame.src = '';
        }
    });

    // 为3D演示区域的遮罩层添加点击事件
    const iframeOverlay = document.querySelector('.iframe-overlay');
    const coreFrame = document.querySelector('.core-tech-frame');
    
    if (iframeOverlay && coreFrame) {
        iframeOverlay.addEventListener('click', function() {
            // 获取当前iframe的src
            const currentSrc = coreFrame.src;
            
            // 使用现有的demoModal显示全屏iframe
            const modalFrame = demoModal.querySelector('iframe');
            modalFrame.src = currentSrc;
            demoModal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
        });
    }
});