地图

pages/web/css/main.css

@@ -28,14 +28,16 @@ body {
     align-items: center;
     justify-content: center;
 } */
-.layout{
+.layout {
     display: flex;
     align-items: center;
     justify-content: start;
     box-sizing: border-box;
 }
 
-#left-box, #center-box, #right-box {
+#left-box,
+#center-box,
+#right-box {
     height: 100%;
 }
 
@@ -56,13 +58,21 @@ body {
     background-position: center center !important;
 }
 
+.bid-pro-select {
+    position: absolute;
+    top: 5%;
+    left: 55%;
+    z-index: 100000;
+}
+
 #echarts-map {
     height: 100%;
 }
 
-#map{
+#map {
     height: 100%;
 }
+
 .switch-btn {
     width: 15%;
     height: 5%;
@@ -72,13 +82,15 @@ body {
     background-position: center center !important;
     z-index: 9999;
 }
-.map-p{
+
+.map-p {
     color: #000;
     font-weight: normal;
     margin-bottom: 10px;
     font-size: 16px;
     font-family: 'Alibaba PuHuiTi R';
 }
+
 #left-box {
     padding-left: 15px;
 }
@@ -87,7 +99,8 @@ body {
     padding-right: 15px;
 }
 
-#left-box, #right-box {
+#left-box,
+#right-box {
     width: 30%;
     display: flex;
     flex-direction: column;
@@ -130,7 +143,8 @@ body {
     flex-direction: column;
 }
 
-.engineering-statistic-item:first-of-type> div, .engineering-statistic-item:last-of-type> div {
+.engineering-statistic-item:first-of-type>div,
+.engineering-statistic-item:last-of-type>div {
     display: flex;
     height: 50%;
     width: 100%;
@@ -141,11 +155,13 @@ body {
     width: 100%;
 }
 
-.engineering-statistic-item__left > p:first-of-type, .engineering-statistic-item__right > p:first-of-type {
+.engineering-statistic-item__left>p:first-of-type,
+.engineering-statistic-item__right>p:first-of-type {
     font-size: 14px;
 }
 
-.engineering-statistic-item__left > p:last-of-type, .engineering-statistic-item__right > p:last-of-type {
+.engineering-statistic-item__left>p:last-of-type,
+.engineering-statistic-item__right>p:last-of-type {
     font-size: 20px;
 }
 
@@ -183,7 +199,7 @@ body {
     display: flex;
 }
 
-.environment-analysis-item > div:last-of-type {
+.environment-analysis-item>div:last-of-type {
     width: 25px;
     height: inherit;
     writing-mode: vertical-rl;
@@ -192,7 +208,7 @@ body {
     justify-content: center;
 }
 
-.environment-analysis-item > div:first-of-type {
+.environment-analysis-item>div:first-of-type {
     flex: 1;
     height: inherit;
     display: flex;
@@ -201,7 +217,7 @@ body {
     text-align: right;
 }
 
-.environment-analysis-item > div:first-of-type > p {
+.environment-analysis-item>div:first-of-type>p {
     line-height: 25px;
     font-size: 14px;
     text-align: left;
@@ -286,7 +302,7 @@ body {
     padding-left: 3%;
 }
 
-.device-status-text > p {
+.device-status-text>p {
     display: inline-block;
     font-size: 16px;
 }
@@ -299,19 +315,67 @@ body {
 .quality-ranking {
     padding-left: 30px !important;
     background-repeat: no-repeat;
-    background-size: 24px 24px; /* 根据你的图标尺寸调整 */
+    background-size: 24px 24px;
+    /* 根据你的图标尺寸调整 */
     background-position: left center;
-    line-height: 1.5; /* 根据需要调整行高 */
+    line-height: 1.5;
+    /* 根据需要调整行高 */
 }
 
 .quality-ranking-1 {
-    background-image: url('../image/1.png'); /* 替换 'icon.png' 为你的图标文件路径 */
+    background-image: url('../image/1.png');
+    /* 替换 'icon.png' 为你的图标文件路径 */
 }
 
 .quality-ranking-2 {
-    background-image: url('../image/2.png'); /* 替换 'icon.png' 为你的图标文件路径 */
+    background-image: url('../image/2.png');
+    /* 替换 'icon.png' 为你的图标文件路径 */
 }
 
 .quality-ranking-3 {
-    background-image: url('../image/3.png'); /* 替换 'icon.png' 为你的图标文件路径 */
+    background-image: url('../image/3.png');
+    /* 替换 'icon.png' 为你的图标文件路径 */
+}
+
+.layui-form-select {
+    width: 270px;
+}
+
+.layui-form-select .layui-input {
+    color: #fff;
+    background-color: #1b6b64;
+}
+
+.layui-form-selected dl {
+    background-color: #1b6b64;
+}
+
+.layui-form-select dl dd.layui-this {
+    background-color: transparent;
+}
+.layui-form-select dl dd:hover {
+    color: #16b777;
+    background-color: transparent;
+}
+.layui-form-select dl dd.layui-disabled {
+    background-color: transparent;
+}
+
+input::-webkit-input-placeholder {
+    color: rgb(153, 152, 152) !important;
+}
+
+input::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: rgb(191, 191, 191) !important;
+}
+
+input:-moz-placeholder {
+    /* Mozilla Firefox 4 to 18 */
+    color: rgb(191, 191, 191) !important;
+}
+
+input:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: rgb(191, 191, 191) !important;
 }

pages/web/js/main.js

@@ -28,25 +28,30 @@ var loader = {
 let gtList=[];
 var terrainMap;
 let element, layer, table;
+// 选中标段工程
+let checkBidCode = null;
 layui.use(['form','layer', 'element', 'table'], function () {
     element = layui.element;
     layer = layui.layer;
     table = layui.table;
     form = layui.form;
-
     //地形切换
     form.on('switch(terrain)', function (data) {
         if (this.checked) {
             $('#echarts-map').css('display', 'none');
             $('#map').css('display', 'block');
+            $('#multiselect').css('display', 'none');
+            $('.bid-pro-select').removeAttr('style')
             initMap()
+            loadBidPro();
         } else {
             $('#echarts-map').css('display', 'block');
             $('#map').css('display', 'none');
+            $('#multiselect').removeAttr('style')
+            $('.bid-pro-select').css('display', 'none');
         }
     });
 
-    getGtList();
     // 工程统计
     initEngineeringStatistic()
 
@@ -75,6 +80,12 @@ layui.use(['form','layer', 'element', 'table'], function () {
 
     // 告警提醒
     initAlarmReminder()
+    // 标段工程下拉选监听
+    form.on('select(bidPro)', function (data) {
+        let value = data.value;
+        let valueArr = value.split('@');
+        loadBidProTower(valueArr[0],valueArr[1]);
+    });
 });
 
 $('#indexIframe').attr('src', './views/main.html');
@@ -660,58 +671,27 @@ function initRiskData() {
         initMainMap(mapPointList)
     })
 }
-//获取杆塔坐标
-function getGtList(){
-    // $.ajax({
-    //     url: baseUrl + 'proteam/pot/home/getGtList?token=' + token,
-    //     data: {
-    // 		proNo:"2222"
-    // 	},
-    //     type: 'post',
-    //     success: function (result) {
-    // 			gtList=result.data;
-    //     },
-    // });
-    gtList=[
-        {
-            lat:118.07138310,
-            lon:31.05344367,
-            proName:'线路工程',
-            towerName:'A1',
-        },
-        {
-            lat:118.07050390,
-            lon:31.05571928,
-            proName:'线路工程',
-            towerName:'A2',
-        },
-        {
-            lat:118.06960770,
-            lon:31.05803784,
-            proName:'线路工程',
-            towerName:'A3',
-        },
-        {
-            lat:118.0684919,
-            lon:31.06092441,
-            proName:'线路工程',
-            towerName:'A4',
-        },
-        {
-            lat:118.07093833,
-            lon:31.06312931,
-            proName:'线路工程',
-            towerName:'A5',
-        }
 
-    ]
-}
 function initMap(){
     createMap()
-    addMapControl(); // 添加自定义控件
+    // madeBoundary(); //加载区域图
-    setMapEvent(); //地图控件设置
+    // addMapControl(); // 添加自定义控件
-    $('#allMap').css({'zIndex': 999, 'backgroundColor': 'transparent'});
+    // setMapEvent(); //地图控件设置
+    // $('#allMap').css({'zIndex': 999, 'backgroundColor': 'transparent'});
+}
 
+// 设置杆塔连线
+function setTowerLine(gtList){
+    let allOverlayList = terrainMap.getOverlays();
+    //循坏所有点并清除指定的点
+    if (allOverlayList.length > 0) {
+        for (let i = 0; i < allOverlayList.length; i++) {
+            console.log(allOverlayList[i].toString());
+            if (allOverlayList[i].toString() == "[object Label]" || allOverlayList[i].toString() == "[object Marker]" || allOverlayList[i].toString() == "[object Polyline]") {
+                terrainMap.removeOverlay(allOverlayList[i]);
+            }
+        }
+    }
     var points=[];
     for(var i = 0; i < gtList.length; i++) {
         var point=new Object();
@@ -719,7 +699,7 @@ function initMap(){
         point.lat=gtList[i].lat;
         point.proName=gtList[i].proName;
         point.img='../../../img/map/bdz.png';
-        point.place=gtList[i].towerName;
+        point.place=gtList[i].gtName;
         points.push(point);
     }
     console.log(points)
@@ -760,13 +740,44 @@ function initMap(){
     console.log(line)
     var polyline = new BMap.Polyline(line,{strokeColor:'#00aa00',strokeWeight:2,strokeOpacity:1});
     terrainMap.addOverlay(polyline);
-
+    terrainMap.centerAndZoom(line[0],10); //设置中心点和缩放层级
 }
+
 function createMap(){
     terrainMap = new BMap.Map("map", {});
     terrainMap.centerAndZoom('合肥', 8);
-
+    madeBoundary(); //加载区域图
+    addMapControl(); // 添加自定义控件
+    setMapEvent(); //地图控件设置
+    $('#allMap').css({'zIndex': 999, 'backgroundColor': 'transparent'});
 }
+
+//设置区域图 start
+function madeBoundary() {
+    let datas = new Array("安徽省-");
+    var bdary = new BMap.Boundary();
+    for (var i = 0; i < datas.length; i++) {
+        getBoundary(datas[i], bdary);
+    }
+}
+
+function getBoundary(data, bdary) {
+    data = data.split("-");
+    bdary.get(data[0], function (rs) { //获取行政区域
+        var count = rs.boundaries.length; //行政区域的点有多少个
+        var pointArray = [];
+        for (var i = 0; i < count; i++) {
+            var ply = new BMap.Polygon(rs.boundaries[i], {
+                strokeWeight: 3,
+                strokeColor: "#1066FC",
+                fillOpacity: 1,
+                fillColor: data[1]
+            }); //建立多边形覆盖物
+            terrainMap.addOverlay(ply); //添加覆盖物
+        }
+    });
+}
+
 //向地图添加控件start
 function addMapControl() {
     var mystyleJson = [{
@@ -1398,3 +1409,102 @@ function initAlarmReminder() {
         }
     })
 }
+
+/* 标段工程数据 */
+function loadBidPro() {
+    const paramData = '';
+    let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
+    const url = commonUrl + 'screen/largeScreen/scIndex/getProList?params=' + montageParam;
+    ajaxRequestGet(url, "GET", true, function () {
+    }, function (result) {
+        if (result.code === 200) {
+            setData(result.data);
+        } else if (result.code === 500) {
+            console.error('标段工程数据 :' + result.msg);
+            setData(null);
+        } else if (result.code === 401) {
+            loginout(1);
+        }
+    }, function (xhr, status, error) {
+        errorFn(xhr, status, error)
+        setData(null);
+    }, aqEnnable);
+    
+    function setData(bidCodeList){
+        let html = '';
+        if (bidCodeList && bidCodeList.length > 0) {
+            $.each(bidCodeList, function (index, item) {
+                if(index === 0){
+                    checkBidCode = item.bidCode;
+                    html += '<option value="' + (item.bidCode + "@" + item.proName) + '" checked>' + item.proName + '</option>'
+                    loadBidProTower(item.bidCode,item.proName);
+                }else{
+                    html += '<option value="' + (item.bidCode + "@" + item.proName) + '">' + item.proName + '</option>'
+                }
+            })
+        }
+        $('#bidPro').empty().append(html);
+        layui.form.render();
+
+    }
+}
+
+/* 标段工程杆塔数据 */
+function loadBidProTower(bidCode,proName) {
+    const paramData = 'bidCode=' + bidCode;
+    let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
+    const url = commonUrl + 'screen/largeScreen/scIndex/getGtList?params=' + montageParam;
+    ajaxRequestGet(url, "GET", true, function () {
+    }, function (result) {
+        setData(result.data);
+        if (result.code === 200) {
+        } else if (result.code === 500) {
+            console.error('标段工程杆塔数据 :' + result.msg);
+        } else if (result.code === 401) {
+            loginout(1);
+        }
+    }, function (xhr, status, error) {
+        errorFn(xhr, status, error)
+    }, aqEnnable);
+
+    function setData(data){
+        if(data && data.length == 0){
+            data = [
+                {
+                    lat:118.07138310,
+                    lon:31.05344367,
+                    proName:proName,
+                    gtName:'A1',
+                },
+                {
+                    lat:118.07050390,
+                    lon:31.05571928,
+                    proName:proName,
+                    gtName:'A2',
+                },
+                {
+                    lat:118.06960770,
+                    lon:31.05803784,
+                    proName:proName,
+                    gtName:'A3',
+                },
+                {
+                    lat:118.0684919,
+                    lon:31.06092441,
+                    proName:proName,
+                    gtName:'A4',
+                },
+                {
+                    lat:118.07093833,
+                    lon:31.06312931,
+                    proName:proName,
+                    gtName:'A5',
+                }
+        
+            ]
+        }
+        setTimeout(() => {
+            setTowerLine(data);
+        }, 2000);
+    }
+}

pages/web/views/main.html

@@ -15,8 +15,10 @@
     <script src="../../../js/publics/echarts.js"></script>
     <script src="../../../plugin/layui-v2.9.7/layui/layui.js"></script>
     <script src="../../../js/publics/aes.js"></script>
+    <script src="../../../js/publics/aescbc.js"></script>
     <script src="../../../js/publics/sm3.js"></script>
     <script src="http://api.map.baidu.com/getscript?v=3.0&ak=s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B"></script>
+    <script src="../../../api/commonRequest.js"></script>
     <title>首页</title>
 
     <style>
@@ -31,7 +33,6 @@
 
 <body>
     <div id="main-box" class="layout">
-
         <div id="left-box">
             <div id="engineering-statistic">
                 <div id="engineering-statistic-bg">
@@ -123,6 +124,12 @@
                 </div>
             </div>
         </div>
+        <div class="bid-pro-select" style="display: none;">
+            <form class="layui-form layout">
+                <select class="layui-form-select" lay-search id="bidPro" lay-filter="bidPro">
+                </select>
+            </form>
+        </div>
         <div id="center-box">
             <div class="switch-btn">
                 <form class="layui-form switch-form" onsubmit="return false;">