新需求增加

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

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

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

@@ -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",
+        // 3: "../../img/digitalSignage/icon_five.png",
-        4: "../../img/digitalSignage/icon_seven.png",
+        3: "../../img/digitalSignage/icon_five_new.png",
-        5: "../../img/digitalSignage/icon_four.png",
+        // 4: "../../img/digitalSignage/icon_seven.png",
-        6: "../../img/digitalSignage/icon_six.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), // 修正锚点位置为中心底部
+                        anchor: new BMapGL.Size(12, 12), // 修正锚点位置为中心底部
-                        imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致
+                        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), {
+        const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(24, 24), {
-            anchor: new BMapGL.Size(20, 40), // 修正锚点位置为中心底部
+            anchor: new BMapGL.Size(12, 12), // 修正锚点位置为中心底部
-            imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致
+            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 X = 24;
-            let Y = 40;
+            let Y = 24;
-            let anchorX = 20;
+            let anchorX = 12;
-            let anchorY = 20;
+            let anchorY = 12;
-            if ([1, 2, 3, 5, 6, 0].includes(pointData.towerProgress)) {
+            // if ([1, 2, 3, 4, 5, 6, 0].includes(pointData.towerProgress)) {
-                X = 15;
+            //     X = 14;
-                Y = 33.75;
+            //     Y = 33.75;
-                anchorX = 7.5;
+            //     anchorX = 7.5;
-                anchorY = 30;
+            //     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",
+                fontSize: "11px",
-                backgroundColor: "transparent",
+                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), {
+            const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(24, 24), {
-                anchor: new BMapGL.Size(20, 20), // 修正锚点位置为中心底部
+                anchor: new BMapGL.Size(10, 10), // 修正锚点位置为中心底部
-                imageSize: new BMapGL.Size(40, 40), // 与实际图片尺寸一致
+                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();
+            }
         }
     });
 });

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

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