gz_digital_signage/src/main/resources/static/js/synthesisQuery/digitalSignage.js

const map = new BMapGL.Map("map-box"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

// 获取左上角滚动数据源
function getScrollData() {
    const scrollData = [
        {
            name: "跨线路",
            location: "N11-N12999",
            content: [
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
            ],
        },
        {
            name: "跨越地点",
            location: "N11-N12336",
            content: [
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
            ],
        },
        {
            name: "跨越地点",
            location: "N11-N128885",
            content: [
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
            ],
        },
        {
            name: "跨越地点",
            location: "N11-N128773",
            content: [
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
                {
                    name: "垂直净度",
                    value: "9896",
                },
            ],
        },
    ];

    let scrollBox = $(".content-wrapper");
    let innerHtml = "";
    scrollData.forEach((item, index) => {
        // 跨域描述内容
        let describeHtml = "";
        if (item.content && item.content.length > 0) {
            item.content.forEach((d, dIndex) => {
                describeHtml += `<i>${d.name}:${d.value}</i>`;
            });
        }

        // 单行数据
        innerHtml += `<div class="flex-box content-item">
            <span>${item.name}</span>
            <span>${item.location}</span>
            <span>${describeHtml}</span>
        </div>`;
    });
    scrollBox.html(innerHtml);
}

getScrollData();

document.addEventListener("DOMContentLoaded", function () {
    const scrollContent = document.getElementById("scrollContent");
    const originalContent = scrollContent.querySelector(".content-wrapper");
    const cloneContent = scrollContent.querySelector(".clone-content");

    // 克隆原始内容到克隆容器
    cloneContent.innerHTML = originalContent.innerHTML;

    // 设置滚动动画
    let scrollPosition = 0;
    const scrollSpeed = 20; // 滚动速度(像素/秒)
    let lastTimestamp = 0;

    function animateScroll(timestamp) {
        if (!lastTimestamp) lastTimestamp = timestamp;
        const deltaTime = timestamp - lastTimestamp;
        lastTimestamp = timestamp;

        // 计算新的滚动位置
        scrollPosition += (scrollSpeed * deltaTime) / 1000;

        // 获取内容总高度
        const contentHeight = originalContent.scrollHeight;

        // 当滚动到克隆内容的开始时，重置位置以实现无缝衔接
        if (scrollPosition >= contentHeight) {
            scrollPosition = 0;
        }

        // 应用滚动
        scrollContent.scrollTop = scrollPosition;

        // 继续动画
        requestAnimationFrame(animateScroll);
    }

    // 启动动画
    requestAnimationFrame(animateScroll);

    // 鼠标悬停时暂停滚动
    scrollContent.addEventListener("mouseenter", function () {
        scrollSpeed = 0;
    });

    scrollContent.addEventListener("mouseleave", function () {
        scrollSpeed = 30; // 恢复原始速度
    });
});

// 获取左下角图例数据源
function getLegendData() {
    const legendData = [
        {
            name: "基础开挖",
            value: "6",
            icon: "../../img/digitalSignage/yellow.png",
        },
        {
            name: "开挖完成",
            value: "6",
            icon: "../../img/digitalSignage/green.png",
        },
        {
            name: "浇筑完成",
            value: "6",
            icon: "../../img/digitalSignage/blue.png",
        },
        {
            name: "铁塔组立",
            value: "6",
            icon: "../../img/digitalSignage/orange.png",
        },
        {
            name: "组塔完成",
            value: "6",
            icon: "../../img/digitalSignage/zt_red.png",
        },
        {
            name: "架线完成",
            value: "6",
            icon: "../../img/digitalSignage/zt_purple.png",
        },
        {
            name: "附件安装",
            value: "6",
            icon: "../../img/digitalSignage/zt_green.png",
        },
        {
            name: "未  开  始",
            value: "6",
            icon: "../../img/digitalSignage/white.png",
        },
        {
            name: "索道运输",
            value: "6",
            icon: "../../img/digitalSignage/sd.png",
        },
        {
            name: "项  目  部",
            value: "6",
            icon: "../../img/digitalSignage/yellow.png",
        },
    ];

    const legendBox = $(".legend-box");
    let innerHtml = "";
    legendData.forEach((item, index) => {
        innerHtml += `<div class="legend-item">
            <img src="${item.icon}" alt="">
            <span>${item.name}</span>
            <span>${item.value}</span>
        </div>`;
    });
    legendBox.html(innerHtml);
}

getLegendData();