电子看板完善

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

@@ -45,7 +45,7 @@ body {
 .legend-box,
 .right-drawer-box {
     position: absolute;
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.6);
     color: #fff;
     z-index: 999;
 }
@@ -139,7 +139,7 @@ body {
     top: 15px;
     left: 15px;
     width: 140px;
-    height: 252px;
+    height: 280px;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
@@ -206,6 +206,75 @@ body {
     text-align: right;
 }
 
+/* 左下角工程概况 */
+.project-overview-box {
+    position: absolute;
+    bottom: 15px;
+    left: 15px;
+    width: 320px;
+    padding: 10px;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 10px;
+    z-index: 999;
+
+    /* display: flex;
+    flex-direction: column;
+    justify-content: space-around; */
+}
+
+.project-overview-preview-box {
+    width: 320px;
+    background: rgba(0, 0, 0, 0.6);
+    position: absolute;
+    /* 定位使预览盒子在工程概况的右边 */
+    top: -85%;
+    right: -105%;
+    z-index: 1000;
+    display: none;
+    font-size: 12px;
+    color: #fff;
+    border-radius: 10px;
+    padding: 10px;
+    text-indent: 2em;
+}
+
+.project-overview-preview-box-arrow {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    bottom: 0;
+    left: -20px;
+    z-index: 1001;
+    background: url("../../img/digitalSignage/qp.png") no-repeat center center;
+    background-size: 100% 100%;
+}
+
+.project-overview-title {
+    padding-bottom: 10px 0;
+    font-size: 18px;
+    font-weight: bold;
+    text-align: center;
+    color: #fff;
+}
+
+.project-overview-content {
+    text-indent: 2em;
+    /* max-height: 220px; */
+    color: #fff;
+    font-size: 12px;
+    letter-spacing: 1px;
+    /* padding-bottom: 10px; */
+    /* 设置溢出隐藏显示... */
+    /* overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; */
+    display: -webkit-box;
+    -webkit-line-clamp: 12; /* 限制显示的行数 */
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 /* 索道信息窗口样式 */
 .map-container-item-ropeway span:first-child {
     padding-left: 16px;
@@ -373,8 +442,9 @@ body {
 /* 中间标题 */
 .center-title-box {
     position: absolute;
-    top: 15px;
+    top: 0;
     left: 50%;
+    padding: 0 12px;
     transform: translateX(-50%);
     z-index: 999;
     font-size: 32px;
@@ -382,4 +452,8 @@ body {
     color: #fff;
     letter-spacing: 6px;
     font-family: "Alibaba PuHuiTi R";
+    /* 加一个浅蓝色渐变背景颜色 */
+    background: linear-gradient(to right, #c9d6ff, #e2e2e2);
+    color: #063268;
+    border-radius: 2px;
 }

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

@@ -6,9 +6,11 @@ let towerList = []; // 塔列表
 let crossingList = []; // 跨越列表
 let crossingListNew = []; // 跨越列表
 let highwayList = []; // 公路列表
+let aThousandFieldsList = []; // 千张场地
 let intLng = 116.254; // 初始经度
 let intLat = 39.965; // 初始纬度
 let isMap = true; // 是否是地图模式
+let projectOverview = ""; // 工程概况
 let projectTitle = ""; // 项目名称
 let centerTitle = ""; // 中间标题
 // 图例数据
@@ -57,12 +59,17 @@ const legendData = [
     {
         name: "架线施工",
         value: 0,
-        icon: "../../img/digitalSignage/zt_red.png",
+        icon: "../../img/digitalSignage/line_yellow.png",
     },
+    // {
+    //     name: "架线施工完成",
+    //     value: 0,
+    //     icon: "../../img/digitalSignage/zt_purple.png",
+    // },
     {
         name: "架线施工完成",
         value: 0,
-        icon: "../../img/digitalSignage/zt_purple.png",
+        icon: "../../img/digitalSignage/line_red.png",
     },
     {
         name: "附件安装完成",
@@ -140,6 +147,12 @@ function getLocationInfo(id) {
                 highwayList = [];
             }
 
+            if (data.aThousandFieldsList.length > 0) {
+                aThousandFieldsList = data.aThousandFieldsList;
+            } else {
+                aThousandFieldsList = [];
+            }
+
             // 处理一下交叉信息
             if (crossingList && crossingList.length > 0) {
                 crossingList.forEach((item) => {
@@ -272,6 +285,7 @@ function initMap() {
     setTimeout(() => {
         addAllMapPoints();
         addMapLine();
+        addMapAThousandFields();
     }, 1000);
 }
 
@@ -286,7 +300,8 @@ function addAllMapPoints() {
     const iconTypeList = {
         // 1: "../../img/digitalSignage/icon_three.png",
         1: "../../img/digitalSignage/icon_three_new.png",
-        2: "../../img/digitalSignage/icon_two.png",
+        // 2: "../../img/digitalSignage/icon_two.png",
+        2: "../../img/digitalSignage/icon_two_new.png",
         // 3: "../../img/digitalSignage/icon_five.png",
         3: "../../img/digitalSignage/icon_five_new.png",
         // 4: "../../img/digitalSignage/icon_seven.png",
@@ -297,11 +312,11 @@ function addAllMapPoints() {
         // 6: "../../img/digitalSignage/icon_six.png",
         6: "../../img/digitalSignage/zt_orange.png",
         7: "../../img/digitalSignage/zt_red.png",
-        8: "../../img/digitalSignage/zt_purple.png",
+        8: "../../img/digitalSignage/zt_red.png", // 新增的工序
-        9: "../../img/digitalSignage/zt_green.png",
+        9: "../../img/digitalSignage/zt_purple.png",
-        0: "../../img/digitalSignage/zt_green.png",
+        10: "../../img/digitalSignage/zt_green.png",
         // 0: "../../img/digitalSignage/icon_one.png",
-        11: "../../img/digitalSignage/icon_one_new.png",
+        0: "../../img/digitalSignage/icon_one_new.png",
         12: "../../img/digitalSignage/sd.png",
         20: "../../img/digitalSignage/project.png",
         // 21: "../../img/digitalSignage/zt_white.png",
@@ -963,14 +978,22 @@ function addMapLine() {
             let lineColor = "";
             let lineStyle = "";
             if (
-                startPoint.towerProgress === 8 &&
+                (startPoint.towerProgress === 8 &&
-                endPoint.towerProgress === 8
+                    endPoint.towerProgress === 7) ||
+                (startPoint.towerProgress === 8 && endPoint.towerProgress === 8)
             ) {
-                lineColor = "#5ad8a6";
+                lineColor = "#FFFF00";
                 lineStyle = "solid";
             } else if (endPoint.existSpan === 1) {
                 lineColor = "#d81e06";
                 lineStyle = "dashed";
+            } else if (
+                (startPoint.towerProgress === 8 &&
+                    endPoint.towerProgress === 8) ||
+                (startPoint.towerProgress === 9 && endPoint.towerProgress === 8)
+            ) {
+                lineColor = "#d81e06"; // 黄色
+                lineStyle = "solid";
             } else {
                 lineColor = "#fff";
                 lineStyle = "dashed";
@@ -1123,6 +1146,44 @@ function getSegmentColor(startPoint, endPoint) {
     return config.polyline.strokeColor;
 }
 
+// 绘制千张场地区域图
+function addMapAThousandFields() {
+    if (aThousandFieldsList.length > 0) {
+        aThousandFieldsList.forEach((item) => {
+            if (
+                item.cablewaTransPointVoList &&
+                item.cablewaTransPointVoList.length > 0
+            ) {
+                let points = [];
+                // 根据sort字段排序 防止点位顺序不一致
+                item.cablewaTransPointVoList.forEach((j) => {
+                    points.push(new BMapGL.Point(j.lng, j.lat));
+                });
+
+                if (points.length > 0) {
+                    // // 2. 创建折线连接这些点位
+                    var polyline = new BMapGL.Polyline(points, {
+                        strokeColor: "#0C14CA", // 线颜色
+                        strokeWeight: 4, // 线宽
+                        strokeOpacity: 0.8, // 线透明度
+                    });
+                    map.addOverlay(polyline);
+
+                    // 绘制区域
+                    var polygon = new BMapGL.Polygon(points, {
+                        strokeColor: "#00FFFF", // 线颜色
+                        strokeWeight: 4, // 线宽
+                        strokeOpacity: 0.8, // 线透明度
+                        fillColor: "#00FFFF", // 填充颜色
+                        fillOpacity: 0.3, // 填充透明度
+                    });
+                    // polygonView = polygon;
+                    map.addOverlay(polygon);
+                }
+            }
+        });
+    }
+}
 // 获取组织树数据
 function getOrgTreeData() {
     ajaxRequest(
@@ -1165,6 +1226,10 @@ function getOrgTreeData() {
                     }
 
                     // getScrollData(nodeId);
+                    $(".project-overview-content").text(
+                        treeData[0].children[0].children[0].projectOverview ||
+                            "暂无"
+                    );
                     getLegendData(nodeId);
                     getLocationInfo(nodeId);
                 } else {
@@ -1459,6 +1524,9 @@ document.addEventListener("DOMContentLoaded", function () {
                             $(".center-title-box").text(
                                 projectTitle + "作战图"
                             );
+                            $(".project-overview-content").text(
+                                obj.data.projectOverview || "暂无"
+                            );
                             // getScrollData(nodeId);
                             getLegendData(nodeId);
                             getLocationInfo(nodeId);
@@ -1555,6 +1623,10 @@ document.addEventListener("DOMContentLoaded", function () {
                 }
 
                 // getScrollData(nodeId);
+                $(".project-overview-content").text(
+                    treeData[0].children[0].children[0].projectOverview ||
+                        "暂无"
+                );
                 getLegendData(nodeId);
                 getLocationInfo(nodeId);
             } else {
@@ -1562,4 +1634,30 @@ document.addEventListener("DOMContentLoaded", function () {
             }
         }
     });
+
+    // 设置当鼠标移入工程概况时，并且判断当前是否溢出，溢出时预览框显示
+    const projectOverviewBox = document.querySelector(".project-overview-box");
+    const projectOverviewContent = document.querySelector(
+        ".project-overview-content"
+    );
+    const projectOverviewPreviewBox = document.querySelector(
+        ".project-overview-preview-box"
+    );
+    projectOverviewBox.addEventListener("mouseenter", function () {
+        if (
+            projectOverviewContent.scrollHeight >
+            projectOverviewContent.clientHeight
+        ) {
+            projectOverviewPreviewBox.style.display = "block";
+            projectOverviewPreviewBox.innerHTML =
+                projectOverviewContent.innerHTML;
+        } else {
+            projectOverviewPreviewBox.style.display = "none";
+            projectOverviewPreviewBox.innerHTML = "";
+        }
+    });
+    projectOverviewBox.addEventListener("mouseleave", function () {
+        projectOverviewPreviewBox.style.display = "none";
+        projectOverviewPreviewBox.innerHTML = "";
+    });
 });

src/main/resources/static/pages/basic/lineManagement/child/lineFormTemp.html

@@ -162,8 +162,12 @@
                 <div class="form-item" style="width: 100%;">
                     <div class="form-label">工程概况：</div>
                     <div class="input-container">
-                        <input class="layui-input" id="projectOverview" name="projectOverview" autocomplete="off"
+                        <!-- <input class="layui-input" id="projectOverview" type="textarea" name="projectOverview"
-                            placeholder="输入内容" maxlength="100">
+                            autocomplete="off" placeholder="输入内容" maxlength="200"> -->
+
+
+                        <textarea autocomplete="off" maxlength="500" placeholder="输入内容" class="layui-textarea"
+                            id="projectOverview" name="projectOverview"></textarea>
                     </div>
                 </div>
             </div>

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

@@ -76,6 +76,21 @@
             </div>
         </div>
 
+        <!-- 左下角工程概况 -->
+        <div class="project-overview-box">
+            <div class="project-overview-title">
+                工程概况
+            </div>
+
+            <div class="project-overview-content">
+            </div>
+
+
+            <!-- 预览框 -->
+            <div class="project-overview-preview-box">
+            </div>
+        </div>
+
         <!-- 右侧抽屉 -->
         <div class="right-drawer-box">
             <!-- 关闭按钮 -->