From 76bd06fc43c75fd16b8e453b027d15834abe78f4 Mon Sep 17 00:00:00 2001 From: cwchen <1048842385@qq.com> Date: Sat, 20 Apr 2024 15:59:02 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/web/css/main.css | 98 ++++++++++++++--- pages/web/js/main.js | 216 ++++++++++++++++++++++++++++---------- pages/web/views/main.html | 9 +- 3 files changed, 252 insertions(+), 71 deletions(-) diff --git a/pages/web/css/main.css b/pages/web/css/main.css index adfe375..2a2f314 100644 --- a/pages/web/css/main.css +++ b/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; } \ No newline at end of file diff --git a/pages/web/js/main.js b/pages/web/js/main.js index c88e4d4..c820a56 100644 --- a/pages/web/js/main.js +++ b/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(); // 添加自定义控件 - setMapEvent(); //地图控件设置 - $('#allMap').css({'zIndex': 999, 'backgroundColor': 'transparent'}); + // madeBoundary(); //加载区域图 + // addMapControl(); // 添加自定义控件 + // 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 = [{ @@ -1397,4 +1408,103 @@ function initAlarmReminder() { $('.alarm-reminder__empty').hide() } }) +} + +/* 标段工程数据 */ +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 += '' + loadBidProTower(item.bidCode,item.proName); + }else{ + html += '' + } + }) + } + $('#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); + } } \ No newline at end of file diff --git a/pages/web/views/main.html b/pages/web/views/main.html index 6b5d8d8..4c3e2ff 100644 --- a/pages/web/views/main.html +++ b/pages/web/views/main.html @@ -15,8 +15,10 @@ + + 首页