电子看板页面初步搭建

src/main/resources/static/css/synthesisQuery/digitalSignage.css

@@ -0,0 +1,138 @@
+html {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+}
+
+body {
+    margin: 0;
+    font-family: "Alibaba PuHuiTi R";
+    height: 98%;
+}
+
+/** 去除百度地图的水印和logo */
+.BMap_cpyCtrl,
+.anchorBL {
+    display: none;
+}
+
+.layout {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#main-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 0 1% 0 1%;
+    box-sizing: border-box;
+    background-color: #fff;
+    border-radius: 5px;
+    font-weight: normal;
+}
+
+#map-box {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.scroll-box,
+.legend-box {
+    position: absolute;
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    z-index: 999;
+}
+
+/* 左上角滚动盒子 */
+.scroll-box {
+    top: 15px;
+    left: 15px;
+    width: 460px;
+    height: 180px;
+}
+
+.scroll-box-title,
+.scroll-box-content {
+    width: 100%;
+}
+
+.scroll-box-title {
+    height: 30px;
+    line-height: 30px;
+    font-weight: bold;
+}
+
+.scroll-box-content {
+    height: 150px;
+    /* overflow-y: auto; */
+    overflow: hidden;
+}
+
+.flex-box {
+    padding: 6px 0;
+    display: flex;
+    box-sizing: border-box;
+}
+
+.flex-box span:first-child {
+    width: 20%;
+}
+
+.flex-box span:nth-child(2) {
+    width: 30%;
+}
+
+.flex-box span:last-child {
+    width: 50%;
+}
+
+.flex-box span {
+    text-align: center;
+}
+
+.content-item {
+    border-bottom: 1px solid rgb(45, 187, 223);
+    font-size: 14px;
+}
+
+.content-item span {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.content-item span i {
+    padding: 1px 0;
+    font-style: normal;
+}
+
+/* 左下角图例 */
+.legend-box {
+    bottom: 15px;
+    left: 15px;
+    width: 140px;
+    height: 252px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    border-radius: 10px;
+}
+
+.legend-box .legend-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    font-size: 13px;
+}
+
+.legend-box .legend-item img {
+    width: 18px;
+    height: 18px;
+}

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

@@ -0,0 +1,221 @@
+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();

src/main/resources/static/pages/synthesisQuery/digitalSignage.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="../../js/layui-v2.9.14/layui/css/layui.css">
+    <link rel="stylesheet" href="../../css/font.css">
+    <link rel="stylesheet" href="../../css/table-common2.css">
+    <link rel="stylesheet" href="../../css/synthesisQuery/digitalSignage.css">
+    <script src="../../js/libs/jquery-3.7.0.min.js" charset="UTF-8" type="text/javascript"></script>
+    <script src="../../js/layui-v2.9.14/layui/layui.js" charset="UTF-8" type="text/javascript"></script>
+    <script src="../../js/publicJs.js"></script>
+    <script src="../../js/commonUtils.js"></script>
+    <script src="../../js/openIframe.js"></script>
+    <script src="../../js/my/aes.js"></script>
+    <script src="../../js/ajaxRequest.js"></script>
+    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
+    <title>电子看板</title>
+
+
+</head>
+
+<body>
+    <div id="main-box">
+        <!-- 地图容器 -->
+        <div id="map-box"></div>
+
+
+        <!-- 左上角滚动盒子 -->
+        <div class="scroll-box">
+            <div class="scroll-box-title flex-box">
+                <span>跨域类型</span>
+                <span>跨越地点</span>
+                <span>跨域描述</span>
+            </div>
+            <div class="scroll-box-content" id="scrollContent">
+                <!-- 原始内容 -->
+                <div class="content-wrapper">
+                    <!-- <div class="flex-box content-item">
+                        <span>跨线路</span>
+                        <span>N15-N16</span>
+                        <span>
+                            <i>垂直净度：7696</i>
+                            <i>垂直净度：7696</i>
+                            <i>垂直净度：7696</i>
+                        </span>
+                    </div> -->
+                </div>
+                <!-- 克隆内容用于无缝衔接 -->
+                <div class="content-wrapper clone-content">
+
+                </div>
+            </div>
+        </div>
+
+        <!-- 左下角图例 -->
+        <div class="legend-box">
+            <div class="legend-item">
+                <!-- <span>基础开挖</span>
+                <span>6</span> -->
+            </div>
+        </div>
+    </div>
+</body>
+<script src="../../js/synthesisQuery/digitalSignage.js" charset="UTF-8" type="text/javascript"></script>
+
+</html>