From 688d0f8c596e0f605974899eeb11a170ecb67866 Mon Sep 17 00:00:00 2001
From: hdw <496960745@qq.com>
Date: 星期五, 09 十一月 2018 11:31:04 +0800
Subject: [PATCH] 添加工具栏
---
gx_tieta/WebRoot/index.jsp | 165 ++++++++++++++++++++++------------------
gx_tieta/WebRoot/css/index_layout.css | 15 ++-
gx_tieta/WebRoot/pages/css/mylayui.css | 27 ++++++
gx_tieta/WebRoot/batt-state-manage.jsp | 10 +-
4 files changed, 134 insertions(+), 83 deletions(-)
diff --git a/gx_tieta/WebRoot/batt-state-manage.jsp b/gx_tieta/WebRoot/batt-state-manage.jsp
index ea5903c..c35baf9 100644
--- a/gx_tieta/WebRoot/batt-state-manage.jsp
+++ b/gx_tieta/WebRoot/batt-state-manage.jsp
@@ -113,11 +113,11 @@
</table>
<table class="condi-opt">
<tr>
- <td><input type="checkbox" id="ALM_TYPE_BTS9100S_POFF_ComError" name="" value=2 class="" />鍋滅數</td> <!-- 鍋滅數 -->
- <td><input type="checkbox" id="ALM_TYPE_BTS9100S_XUHANG_ComError" name="" value=4 class="">缁埅</td> <!-- 鎺夌珯 -->
- <td><input type="checkbox" id="ALM_TYPE_BTS9100S_FADIAN_ComError" name="" value=8 class="" />鍙戠數</td> <!-- 鍙戠數 -->
- <td><input type="checkbox" id="ALM_TYPE_BTS9100S_DOOROPEN_ComError" name="" value=16 class="" >寮�闂ㄥ紓甯�</td>
- <td><input type="checkbox" id="ALM_TYPE_BTS9100S_DIAOZHAN_ComError" name="" value=32 class="">鎺夌珯</td> <!-- 鎺夌珯 -->
+ <td><input type="checkbox" id="ALM_TYPE_BTS9100S_POFF_ComError" name="" value=2 class="" /><span class="checkbox-label">鍋滅數</span></td> <!-- 鍋滅數 -->
+ <td><input type="checkbox" id="ALM_TYPE_BTS9100S_XUHANG_ComError" name="" value=4 class=""><span class="checkbox-label">缁埅</span></td> <!-- 鎺夌珯 -->
+ <td><input type="checkbox" id="ALM_TYPE_BTS9100S_FADIAN_ComError" name="" value=8 class="" /><span class="checkbox-label">鍙戠數</span></td> <!-- 鍙戠數 -->
+ <td><input type="checkbox" id="ALM_TYPE_BTS9100S_DOOROPEN_ComError" name="" value=16 class="" ><span class="checkbox-label">寮�闂ㄥ紓甯�</span></td> <!-- 寮�闂ㄥ紓甯� -->
+ <td><input type="checkbox" id="ALM_TYPE_BTS9100S_DIAOZHAN_ComError" name="" value=32 class=""><span class="checkbox-label">鎺夌珯</span></td> <!-- 鎺夌珯 -->
</tr>
</table>
diff --git a/gx_tieta/WebRoot/css/index_layout.css b/gx_tieta/WebRoot/css/index_layout.css
index 8a30d97..d3f5bff 100644
--- a/gx_tieta/WebRoot/css/index_layout.css
+++ b/gx_tieta/WebRoot/css/index_layout.css
@@ -474,7 +474,8 @@
font-weight: bold;
}
.map-info-btn-icon {
- margin-left: 15px;
+ float: right;
+ margin-right: 10px;
font-size: 18px;
vertical-align: middle;
cursor: pointer;
@@ -491,10 +492,13 @@
margin-top: 8px;
margin-bottom: 8px;
}
+.map-info-detail table caption {
+ text-indent: 1em;
+}
.map-info-detail table td {
padding: 4px 0;
}
-.map-info-detail table select {
+.map-info-detail table select, .map-info-detail table input {
width: 96%;
height: 24px;
border: 1px solid #CCCCCC;
@@ -503,7 +507,7 @@
padding: 8px 0;
border-top: 1px solid #CCCCCC;
}
-.map-info-footer button {
+.map-info-footer button, .btn-container button {
padding:6px 20px;
border: 1px solid #c1c1c1;
background: #FFFFFF;
@@ -513,10 +517,13 @@
background: linear-gradient(top, #ffffff, #f4f4f4);
color: #555;
}
-.map-info-footer button:hover {
+.map-info-footer button:hover, .btn-container button:hover {
background: #f4f4f4;
color: #555;
}
+
+
+
#mapImgDesc span {
line-height: 30px;
margin-left: 6px;
diff --git a/gx_tieta/WebRoot/index.jsp b/gx_tieta/WebRoot/index.jsp
index bf69554..2d3d475 100644
--- a/gx_tieta/WebRoot/index.jsp
+++ b/gx_tieta/WebRoot/index.jsp
@@ -112,38 +112,54 @@
<div class="nav-map small">
<!-- 鍦板浘鍐呭绛涢�� -->
- <div class="map-info-panel-left">
+ <div class="map-info-panel-left w300">
<div class="map-info-panel-content">
<div class="map-info">
- <span>闄愬埗鏄剧ず鍖哄煙: </span><span class="k-point red" id="mapVsArea">涓浗</span>
- <span class="mr5">鏈烘埧鏄剧ず绫诲瀷:</span><span class="k-point red" id="mapIconStyle">鍏ㄩ儴</span>
+ <span>鍦板浘宸ュ叿</span>
<span class="map-info-btn-icon" id="showMapInfoDetail" title="璇︽儏"><i class="fa fa-angle-double-down"></i></span>
</div>
<div class="map-info-detail">
- <table>
- <tbody>
- <tr>
- <td class="w8em alg-c">闄愬埗鏄剧ず鍖哄煙:</td>
- <td>
- <select name="mapVsAreaSel" id="mapVsAreaSel">
- <option>涓浗</option>
- <option>涓浗-骞胯タ</option>
- </select>
- </td>
- </tr>
- <tr>
- <td class="w8em alg-c">鏈烘埧鏄剧ず绫诲瀷:</td>
- <td>
- <select name="mapIconStyleSel" id="mapIconStyleSel">
- <option>鍏ㄩ儴</option>
- </select>
- </td>
- </tr>
- </tbody>
- </table>
- <div class="map-info-footer alg-r">
- <button type="button" class="mr10 map-panel-hide" value="纭畾" id="mapPanelEn">纭畾</button>
- <button type="button" class="mr10 map-panel-hide" value="闅愯棌">闅愯棌</button>
+ <div class="layui-collapse" lay-filter="test" lay-accordion="">
+ <div class="layui-colla-item">
+ <h2 class="layui-colla-title">娣诲姞鏈烘埧</h2>
+ <div class="layui-colla-content layui-show"">
+ <table>
+ <tbody>
+ <tr>
+ <td class="w4em alg-c f-bold">缁忓害:</td>
+ <td><input type="text" class="lng"></td>
+ </tr>
+ <tr>
+ <td class="w4em alg-c f-bold">绾害:</td>
+ <td><input type="text" class="lat"></td>
+ </tr>
+ <tr>
+ <td colspan="2" class="alg-r btn-container">
+ <button type="button" value="娣诲姞" id="mapToolAddHome" class="mrr8">娣诲姞</button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div class="layui-colla-item">
+ <h2 class="layui-colla-title">瀹氫綅鏈烘埧</h2>
+ <div class="layui-colla-content">
+ <table>
+ <tbody>
+ <tr>
+ <td class="w5em alg-c f-bold">鏈烘埧鍚嶇О:</td>
+ <td><input type="text" id="mapToolSearch"></td>
+ </tr>
+ <tr>
+ <td colspan="2" class="alg-r btn-container">
+ <button type="button" value="鎼滅储" id="mapToolSearchBtn" class="mrr8">鎼滅储</button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -1788,7 +1804,7 @@
});
magImgStyles.push('');
// 鏍规嵁褰撳墠鍐呭鏇存柊鍦板浘鍥炬爣
- searchStation();
+ //searchStation();
}
// 妫�娴嬪綋鍓嶅浘鏍囨槸鍚︾鍚�
@@ -2308,6 +2324,9 @@
bmap.queryInRect(map, createMapDot);
updateStation();
+ // 鏇存柊灏忓伐鍏锋悳绱㈡満鎴垮姛鑳�
+ updateSearchSource(allStation);
+
// 鏄惁绗竴娆℃墽琛�
if(setRect) {
map.addEventListener("moveend", bmap.queryInRect.bind({},map, createMapDot)); // 鎷栧姩
@@ -2415,7 +2434,7 @@
// 鏌ヨ鏈烘埧闈㈡澘淇℃伅
function searchPanelInfo(data) {
- var point = data.point;
+ var point = new BMap.Point(data.point.lng, data.point.lat);
var stationInfo = getStaionByPoint(point);
if(!stationInfo) {
alert('闈㈡澘淇℃伅鏌ヨ澶辫触锛�');
@@ -3461,10 +3480,11 @@
});
});
- layui.use(['form', 'layer', 'laytpl'], function() {
+ layui.use(['form', 'layer', 'laytpl', 'element'], function() {
var form = layui.form;
var layer = layui.layer;
var laytpl = layui.laytpl;
+ var element = layui.element;
// 鐐瑰嚮楗肩姸鍥鹃厤缃�
$('#faCog').click(function() {
@@ -3603,9 +3623,7 @@
});
}
- // 鍦板浘宸︿笂鏂归潰鏉挎ā鍧�
- var mapViewArea = GLOBAL.BMap.mapViewArea; // 鍦板浘鏄剧ず鍖哄煙鐨勪俊鎭�
- // 鐐瑰嚮闈㈡澘涓婃柟鐨勫皬鍥炬爣鏄剧ず璁惧畾淇℃伅
+ // 鍦板浘宸︿笂鏂归潰鏉挎ā鍧�-鐐瑰嚮闈㈡澘涓婃柟鐨勫皬鍥炬爣鏄剧ず璁惧畾淇℃伅
$('#showMapInfoDetail').click(function() {
$('.map-info-detail').slideToggle();
});
@@ -3615,50 +3633,49 @@
$('.map-info-detail').slideUp();
});
- // 閬嶅巻mapViewArea鑾峰彇mapVsAreaSel涓嬫媺妗嗙殑鍊�
- var mapVsAreaSel = $('#mapVsAreaSel');
- var mapVsAreaSelOpts = [];
- for(var i=0; i<mapViewArea.length; i++) {
- var _data = mapViewArea[i];
- var tmp = getOptionsData(_data.name, _data.area, _data);
- mapVsAreaSelOpts.push(tmp);
- }
- // 鐢熸垚闈㈡澘涓殑mapVsAreaSel
- createOptions(mapVsAreaSel, mapVsAreaSelOpts);
- // 鏄剧ず榛樿鍖哄煙-涓浗
- setMapViewArea(mapViewArea[0]);
- centerMapByPoint(map); // 鏍规嵁褰撳墠鐢ㄦ埛璁惧畾鐨勪綅缃樉绀轰腑蹇冪偣
- // 鐐瑰嚮闈㈡澘纭畾鎸夐挳
- $('#mapPanelEn').click(function() {
- var areaData = mapVsAreaSel.find('option:selected').data('attr');
-
- // 璁剧疆澶撮儴鍙鍖哄煙鐨勬枃鏈�
- $('#mapVsArea').text(areaData.name);
-
- // 璁剧疆鍙鍖哄煙
- setMapViewArea(areaData);
+ // 鍐呭鏀瑰彉鍒濆璇�$('#mapToolSearchBtn').data('homeInfo')鐨勫��
+ $( "#mapToolSearch" ).on('input propertychange', function(){
+ $('#mapToolSearchBtn').data('homeInfo', 0);
+ });
+ // 瀹氫箟鏈烘埧鏌ヨ淇℃伅
+ $( "#mapToolSearch" ).autocomplete({
+ source: [],
+ select: function(event, ui) {
+ $('#mapToolSearchBtn').data('homeInfo', ui.item); // 璁剧疆鏈烘埧淇℃伅鍐呭
+ }
});
- // 璁剧疆鍦板浘鐨勫彲瑙嗗尯鍩�
- function setMapViewArea(data) {
- var left = new BMap.Point(data.left.lng, data.left.lat);
- var right = new BMap.Point(data.right.lng, data.right.lat);
- var b = new BMap.Bounds(left, right);
-
- var cLng = (data.left.lng+data.right.lng)/2;
- var cLat = (data.left.lat+data.right.lat)/2;
- var f = new BMap.Point(cLng, cLat);
- map.panTo(f, {
- noAnimation: "no"
- });
-
-
- try {
- BMapLib.AreaRestriction.setBounds(map, b);
- } catch (e) {
- alert(e);
+ // 鐐瑰嚮鏌ョ湅homeInfo鐨勫��
+ $('#mapToolSearchBtn').click(function() {
+ var homeInfo = $(this).data('homeInfo');
+ if(homeInfo) {
+ searchPanelInfo(homeInfo);
+ $(this).data('homeInfo', 0);
+ $( "#mapToolSearch" ).val('');
+ }else {
+ layer.msg('璇烽噸鏂拌緭鍏ユ満鎴夸俊鎭紒');
+ $( "#mapToolSearch" ).val("");
}
- }
+ });
+
});
+
+ // 鏇存柊鍦板浘宸ュ叿鎼滅储鏈烘埧
+ function updateSearchSource(data) {
+ var homeSource = [];
+ for(var i=0; i<data.length; i++) {
+ var _data = data[i];
+ var tmp = {
+ label: _data.title+'('+_data.sId+')',
+ point: {
+ lng: _data.lng,
+ lat: _data.lat
+ }
+ };
+ homeSource.push(tmp);
+ }
+
+ $( "#mapToolSearch" ).autocomplete('option', 'source', homeSource);
+ }
</script>
</html>
diff --git a/gx_tieta/WebRoot/pages/css/mylayui.css b/gx_tieta/WebRoot/pages/css/mylayui.css
index 0480e58..38dce1d 100644
--- a/gx_tieta/WebRoot/pages/css/mylayui.css
+++ b/gx_tieta/WebRoot/pages/css/mylayui.css
@@ -149,8 +149,23 @@
z-index: -1;
}
/* width */
+.w260 {
+ width: 260px;
+}
.w272 {
width: 272px;
+}
+.w32 {
+ width: 32px;
+}
+.w3em {
+ width: 3em;
+}
+.w4em {
+ width: 4em;
+}
+.w5em {
+ width: 5em;
}
/* mrl */
.mrl8 {
@@ -173,7 +188,19 @@
width: 100%;
height: 100%;
}
+/* text style */
+.f-bold {
+ font-weight: bold;
+}
/* my layui */
.popup .layui-card-body {
padding: 0;
+}
+/* index map style */
+.map-info-detail .layui-colla-title {
+ height: 32px;
+ line-height: 32px;
+}
+.map-info-detail .layui-colla-content {
+ padding: 0;
}
\ No newline at end of file
--
Gitblit v1.9.1