bonus
/
gz_digital_signage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

电子看板页面初步搭建

This commit is contained in:
BianLzhaoMin 2025-04-24 12:09:00 +08:00
parent c6289843aa
commit 56c9aab08d
12 changed files with 426 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/main/resources/static/css/synthesisQuery/digitalSignage.css Normal file
View File

@ -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;
}

BIN
src/main/resources/static/img/digitalSignage/blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/main/resources/static/img/digitalSignage/green.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/main/resources/static/img/digitalSignage/orange.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/main/resources/static/img/digitalSignage/sd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
src/main/resources/static/img/digitalSignage/white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
src/main/resources/static/img/digitalSignage/yellow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/main/resources/static/img/digitalSignage/zt_green.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
src/main/resources/static/img/digitalSignage/zt_purple.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/main/resources/static/img/digitalSignage/zt_red.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

221
src/main/resources/static/js/synthesisQuery/digitalSignage.js Normal file
View File

@ -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();

67
src/main/resources/static/pages/synthesisQuery/digitalSignage.html Normal file
View File

@ -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>