新需求增加

This commit is contained in:
BianLzhaoMin 2025-06-09 15:20:48 +08:00
parent 7da2483ba6
commit ac6b49c478
14 changed files with 129 additions and 46 deletions

View File

@ -56,6 +56,7 @@ body {
left: 15px;
width: 520px;
height: 200px;
display: none;
}
.scroll-box-title,
@ -134,7 +135,8 @@ body {
/* 左下角图例 */
.legend-box {
bottom: 15px;
/* bottom: 15px; */
top: 15px;
left: 15px;
width: 140px;
height: 252px;
@ -157,16 +159,16 @@ body {
height: 20px;
}
.legend-box .legend-item:nth-child(1) img,
/* .legend-box .legend-item:nth-child(1) img,
.legend-box .legend-item:nth-child(2) img,
.legend-box .legend-item:nth-child(3) img,
.legend-box .legend-item:nth-child(4) img,
.legend-box .legend-item:nth-child(5) img,
.legend-box .legend-item:nth-child(6) img,
.legend-box .legend-item:nth-child(10) img {
width: 10px;
height: 18px;
margin-left: 5px;
}
} */
.map-container {
background: rgba(0, 0, 0, 0.5);
@ -367,3 +369,17 @@ body {
width: 38px;
height: 38px;
}
/* 中间标题 */
.center-title-box {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
z-index: 999;
font-size: 32px;
font-weight: bold;
color: #fff;
letter-spacing: 6px;
font-family: "Alibaba PuHuiTi R";
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -9,37 +9,44 @@ let intLng = 116.254; // 初始经度
let intLat = 39.965; // 初始纬度
let isMap = true; // 是否是地图模式
let projectTitle = ""; // 项目名称
let centerTitle = ""; // 中间标题
// 图例数据
const legendData = [
{
name: "协调完成",
value: 0,
icon: "../../img/digitalSignage/icon_three.png",
// icon: "../../img/digitalSignage/icon_three.png",
icon: "../../img/digitalSignage/icon_three_new.png",
},
{
name: "基础开挖",
value: 0,
icon: "../../img/digitalSignage/icon_two.png",
// icon: "../../img/digitalSignage/icon_two.png",
icon: "../../img/digitalSignage/icon_two_new.png",
},
{
name: "基础开挖完成",
value: 0,
icon: "../../img/digitalSignage/icon_five.png",
// icon: "../../img/digitalSignage/icon_five.png",
icon: "../../img/digitalSignage/icon_five_new.png",
},
{
name: "基础浇筑",
value: 0,
icon: "../../img/digitalSignage/icon_seven.png",
// icon: "../../img/digitalSignage/icon_seven.png",
icon: "../../img/digitalSignage/icon_seven_new.png",
},
{
name: "基础浇筑完成",
value: 0,
icon: "../../img/digitalSignage/icon_four.png",
// icon: "../../img/digitalSignage/icon_four.png",
icon: "../../img/digitalSignage/icon_four_new.png",
},
{
name: "铁塔组立",
value: 0,
icon: "../../img/digitalSignage/icon_six.png",
// icon: "../../img/digitalSignage/icon_six.png",
icon: "../../img/digitalSignage/zt_orange.png",
},
{
name: "铁塔组立完成",
@ -59,7 +66,7 @@ const legendData = [
{
name: "未 开 始",
value: 0,
icon: "../../img/digitalSignage/icon_one.png",
icon: "../../img/digitalSignage/icon_one_new.png",
},
{
name: "索道运输",
@ -265,19 +272,27 @@ function addAllMapPoints() {
// 使用对象记录已添加的点,避免重复
const addedPoints = {};
const iconTypeList = {
1: "../../img/digitalSignage/icon_three.png",
// 1: "../../img/digitalSignage/icon_three.png",
1: "../../img/digitalSignage/icon_three_new.png",
2: "../../img/digitalSignage/icon_two.png",
3: "../../img/digitalSignage/icon_five.png",
4: "../../img/digitalSignage/icon_seven.png",
5: "../../img/digitalSignage/icon_four.png",
6: "../../img/digitalSignage/icon_six.png",
// 3: "../../img/digitalSignage/icon_five.png",
3: "../../img/digitalSignage/icon_five_new.png",
// 4: "../../img/digitalSignage/icon_seven.png",
// 4: "../../img/digitalSignage/icon_purple.png",
4: "../../img/digitalSignage/icon_seven_new.png",
// 5: "../../img/digitalSignage/icon_four.png",
5: "../../img/digitalSignage/icon_four_new.png",
// 6: "../../img/digitalSignage/icon_six.png",
6: "../../img/digitalSignage/zt_orange.png",
7: "../../img/digitalSignage/zt_red.png",
8: "../../img/digitalSignage/zt_purple.png",
9: "../../img/digitalSignage/zt_green.png",
0: "../../img/digitalSignage/icon_one.png",
// 0: "../../img/digitalSignage/icon_one.png",
0: "../../img/digitalSignage/icon_one_new.png",
11: "../../img/digitalSignage/sd.png",
20: "../../img/digitalSignage/project.png",
21: "../../img/digitalSignage/zt_white.png",
// 21: "../../img/digitalSignage/zt_white.png",
21: "../../img/digitalSignage/zt_gary.png",
};
// 绘制索道标点
@ -316,10 +331,10 @@ function addAllMapPoints() {
const iconUrl = iconTypeList[11]; // 默认使用第一个图标
const myIcon = new BMapGL.Icon(
iconUrl,
new BMapGL.Size(40, 40),
new BMapGL.Size(24, 24),
{
anchor: new BMapGL.Size(30, 30), // 修正锚点位置为中心底部
imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致
anchor: new BMapGL.Size(12, 12), // 修正锚点位置为中心底部
imageSize: new BMapGL.Size(24, 24), // 与实际图片尺寸一致
}
);
@ -412,9 +427,9 @@ function addAllMapPoints() {
const point = new BMapGL.Point(intLng, intLat);
bounds.push(point);
const iconUrl = iconTypeList[20];
const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(40, 40), {
anchor: new BMapGL.Size(20, 40), // 修正锚点位置为中心底部
imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致
const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(24, 24), {
anchor: new BMapGL.Size(12, 12), // 修正锚点位置为中心底部
imageSize: new BMapGL.Size(24, 24), // 与实际图片尺寸一致
});
const marker = new BMapGL.Marker(point, { icon: myIcon });
@ -497,16 +512,16 @@ function addAllMapPoints() {
// 1. 创建主标记点
const iconUrl = iconTypeList[parseInt(pointData.towerProgress)];
let X = 40;
let Y = 40;
let anchorX = 20;
let anchorY = 20;
if ([1, 2, 3, 5, 6, 0].includes(pointData.towerProgress)) {
X = 15;
Y = 33.75;
anchorX = 7.5;
anchorY = 30;
}
let X = 24;
let Y = 24;
let anchorX = 12;
let anchorY = 12;
// if ([1, 2, 3, 4, 5, 6, 0].includes(pointData.towerProgress)) {
// X = 14;
// Y = 33.75;
// anchorX = 7.5;
// anchorY = 30;
// }
const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(X, Y), {
anchor: new BMapGL.Size(anchorX, anchorY),
imageSize: new BMapGL.Size(X, Y),
@ -516,7 +531,7 @@ function addAllMapPoints() {
map.addOverlay(marker);
overlays.push(marker);
if (pointData.towerProgress == 3) {
if (pointData.towerProgress == 100) {
const towerPouringVos = pointData.towerPouringVos;
// 矩形大小(经纬度差值)
@ -579,7 +594,7 @@ function addAllMapPoints() {
});
}
if (pointData.towerProgress == 4) {
if (pointData.towerProgress == 100) {
// 矩形大小(经纬度差值)
const rectangleSize = 0.0015; // 可根据需要调整
// 计算矩形四个顶点坐标
@ -705,18 +720,27 @@ function addAllMapPoints() {
});
// 4. 添加标签
let offset = new BMapGL.Size(-20, -30);
if (index % 2 == 0) {
offset = new BMapGL.Size(-20, -60);
} else {
offset = new BMapGL.Size(-20, 30);
}
const label = new BMapGL.Label(pointData.towerName, {
position: point,
offset: new BMapGL.Size(-15, -70),
offset: offset,
});
map.addOverlay(label);
overlays.push(label);
label.setStyle({
color: "#fff",
fontSize: "20px",
backgroundColor: "transparent",
fontSize: "11px",
backgroundColor: "rgba(0, 0, 0, 0.5)",
border: "none",
padding: "0",
padding: "0 10px",
border: "1px solid #ccc",
boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.5)",
borderRadius: "4px",
});
});
@ -748,9 +772,9 @@ function addAllMapPoints() {
// 检查图标是否存在,不存在则使用默认图标
const iconUrl = iconTypeList[21]; // 默认使用第一个图标
const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(40, 40), {
anchor: new BMapGL.Size(20, 20), // 修正锚点位置为中心底部
imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致
const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(24, 24), {
anchor: new BMapGL.Size(10, 10), // 修正锚点位置为中心底部
imageSize: new BMapGL.Size(24, 24), // 与实际图片尺寸一致
});
const marker = new BMapGL.Marker(point, { icon: myIcon });
@ -1379,7 +1403,7 @@ function addMapLine() {
// 设置线段样式
const segmentOptions = {
strokeColor: "#fff", // 根据类型获取颜色
strokeColor: "#800080", // 根据类型获取颜色
strokeWeight: config.polyline.strokeWeight,
strokeOpacity: config.polyline.strokeOpacity,
enableEditing: config.polyline.enableEditing,
@ -1487,7 +1511,13 @@ function getOrgTreeData() {
projectTitle = data[0].children[0].children[0].title;
}
getScrollData(nodeId);
if (treeData[0].children[0].children[0].title) {
projectTitle =
treeData[0].children[0].children[0].title;
$(".center-title-box").text(projectTitle + "作战图");
}
// getScrollData(nodeId);
getLegendData(nodeId);
getLocationInfo(nodeId);
} else {
@ -1779,7 +1809,10 @@ document.addEventListener("DOMContentLoaded", function () {
intLng = obj.data.lon;
intLat = obj.data.lat;
projectTitle = obj.data.title;
getScrollData(nodeId);
$(".center-title-box").text(
projectTitle + "作战图"
);
// getScrollData(nodeId);
getLegendData(nodeId);
getLocationInfo(nodeId);
} else {
@ -1848,9 +1881,38 @@ document.addEventListener("DOMContentLoaded", function () {
const fullScreenBtn = document.querySelector(".full-screen-btn");
fullScreenBtn.addEventListener("click", function () {
if (document.fullscreenElement) {
// 退出全屏
document.exitFullscreen();
} else {
// 进入全屏
document.documentElement.requestFullscreen();
// 遍历树形结构数据把数据全部更改为第一个工程
if (
treeData[0].children &&
treeData[0].children.length > 0 &&
treeData[0].children[0].children &&
treeData[0].children[0].children.length > 0
) {
nodeId = treeData[0].children[0].children[0].id;
if (
treeData[0].children[0].children[0].lon &&
treeData[0].children[0].children[0].lat
) {
intLng = treeData[0].children[0].children[0].lon;
intLat = treeData[0].children[0].children[0].lat;
}
if (treeData[0].children[0].children[0].title) {
projectTitle = treeData[0].children[0].children[0].title;
$(".center-title-box").text(projectTitle + "作战图");
}
// getScrollData(nodeId);
getLegendData(nodeId);
getLocationInfo(nodeId);
} else {
initMap();
}
}
});
});

View File

@ -105,6 +105,11 @@
<div class="full-screen-btn">
<img src="../../img/digitalSignage/full-screen.png" alt="" />
</div>
<!-- 中间标题 -->
<div class="center-title-box">
</div>
</div>
</body>
<script src="../../js/synthesisQuery/digitalSignage.js" charset="UTF-8" type="text/javascript"></script>