From 4c346f202a2f4431feb734da018af1b83571b8fb Mon Sep 17 00:00:00 2001
From: qinbo <qinbo@shsening.com>
Date: 星期三, 10 十一月 2021 11:57:07 +0800
Subject: [PATCH] 查询勾选显示
---
widgetsTS/widget_search/widget.js | 142 +++++++++++++++++++++++
widgetsTS/widget_search/view.js | 124 +++++++++++++++----
widgetsTS/widget_search/view.css | 2
widgetsTS/widget_search/view.html | 34 +++--
4 files changed, 256 insertions(+), 46 deletions(-)
diff --git a/widgetsTS/widget_search/view.css b/widgetsTS/widget_search/view.css
index e222021..0f61b96 100644
--- a/widgetsTS/widget_search/view.css
+++ b/widgetsTS/widget_search/view.css
@@ -117,7 +117,7 @@
}
.table_Info{
- background-color: rgba(0, 48, 64, .5);
+ /* background-color: rgba(0, 48, 64, .5); */
border: 0 none;
}
.table_Info th,
diff --git a/widgetsTS/widget_search/view.html b/widgetsTS/widget_search/view.html
index 8fbd860..96d3261 100644
--- a/widgetsTS/widget_search/view.html
+++ b/widgetsTS/widget_search/view.html
@@ -64,9 +64,17 @@
<a id="href6" class="color_white" href="#">
<img src="img/count6.png" class="layui-nav-img">
<span class="layui-badge" id="count6">0</span>
- <span class="padding_right_2_p" id="countName6">閬撹矾</span>
+ <span class="padding_right_2_p" id="countName6">閬撹矾璺</span>
</a>
<input class="codeInput" type="hidden" id="countCode6">
+ </div>
+ <div class="cnt_right_div cnt_btn">
+ <a id="href7" class="color_white" href="#" _code="100500" _name="閬撹矾">
+ <img src="img/count6.png" class="layui-nav-img">
+ <span class="layui-badge" id="count7">8610</span>
+ <span class="padding_right_2_p" id="countName7">閬撹矾</span>
+ </a>
+ <input class="codeInput" type="hidden" id="countCode7">
</div>
</div>
</div>
@@ -81,26 +89,26 @@
<div class="layui-row">
<span class="layui-breadcrumb" lay-separator="|">
<a href="#"></a>
- <a href="#" style="color: white!important;">鏌ヨ淇℃伅</a>
+ <a href="#" style="color: white!important;"><span id="topN_name">鏌ヨ淇℃伅</span></a>
<a href="#"></a>
+ </span>
+ <span class="layui-breadcrumb" style="float:right;margin-right:20px;" lay-separator="|">
+ <a href="#" style="color:white!important;" onclick="highlightSelected();"><span id="topN_name">鍕鹃�夋樉绀�</span></a>
</span>
</div>
<div class="layui-row" id="" style="padding-left:1%;padding-right:1%;overflow:auto;height:450px;">
<form action="" class="am-form" id="listContainer">
- <table class="layui-table no_bgc_table top_10_table table_Info" id="newsList">
+ <table class="layui-table no_bgc_table top_10_table table_Info" id="newsList" lay-skin="nob">
<thead>
- <tr style="background-color: rgba(0, 0, 0, 0); color: #FF5722;">
- <th style="font-weight: bold;">搴忓彿</th>
- <th style="font-weight: bold;">鍚嶇О</th>
- <th style="font-weight: bold;">pm25</th>
- <th style="font-weight: bold;">pm10</th>
- <th style="font-weight: bold;">no2</th>
- <th style="font-weight: bold;">co</th>
- <th style="font-weight: bold;">no</th>
- <th style="font-weight: bold;">nox</th>
+ <tr style="background-color: rgba(0, 0, 0, 0); color: #FF5722;">
+ <th style="font-weight: bold;"><input type="checkbox" id="selectedALL" /></span></th>
+ <th style="font-weight: bold;">搴�</th>
+ <th style="font-weight: bold;">缂栧彿</th>
+ <th style="font-weight: bold;">鍚嶇О</th>
+ <th style="font-weight: bold;"><select id="qindex_selection"></select></th>
</tr>
</thead>
- <tbody class="am-u-sm-12" id="listTag">
+ <tbody class="am-u-sm-12" id="searchInfo" style="cursor: pointer;">
</tbody>
</table>
</form>
diff --git a/widgetsTS/widget_search/view.js b/widgetsTS/widget_search/view.js
index b8639c0..0f6388a 100644
--- a/widgetsTS/widget_search/view.js
+++ b/widgetsTS/widget_search/view.js
@@ -3,6 +3,7 @@
var current_selected_monitor_keyword;
var current_selected_monitor_qindex = "pm25";
+var tableData;
//瀵瑰簲widget.js涓璏yWidget瀹炰緥鍖栧悗鐨勫璞�
var thisWidget
@@ -17,12 +18,26 @@
$(".cnt_div a").removeClass("select_btn");
$(this).addClass("select_btn");
current_selected_monitor_type = $(this).attr("_code");
- current_selected_monitor_name = $(this).attr("_name");
+ current_selected_monitor_name = $(this).attr("_name");
+ changeQindexSelection();
});
//寮�濮嬫煡璇㈡暟鎹�
$("#btn").click(function () {
current_selected_monitor_keyword = $('#search').val();
reloadData(1);
+ });
+
+
+ $("#selectedALL").click(function() {
+ if (this.checked){
+ $("input[name='selectedItem']:checkbox").each(function(){
+ $(this).prop("checked", true);
+ });
+ } else {
+ $("input[name='selectedItem']:checkbox").each(function() {
+ $(this).prop("checked", false);
+ });
+ }
});
}
@@ -55,8 +70,32 @@
}
+$("#qindex_selection").change(function () {
+ current_selected_monitor_qindex = $("#qindex_selection").val();
+ reloadData(1);
+});
+
+function changeQindexSelection() {
+ current_selected_monitor_qindex = "pm25"; // 閲嶈qindex
+ $("#qindex_selection").empty();
+ var options = [];
+ if (current_selected_monitor_type == 1001) {
+ options = Object.keys(qindex_range_list_1001);
+ console.log(options)
+ } else if (current_selected_monitor_type == 1002) {
+ options = Object.keys(qindex_range_list_1002);
+ } else if (current_selected_monitor_type == 1003) {
+ options = Object.keys(qindex_range_list_1003);
+ current_selected_monitor_qindex = "tsp";
+ } else {
+ options = Object.keys(qindex_range_list_1004_and_other);
+ }
+ options.forEach(element => $("#qindex_selection").append("<option value='" + element + "'>" + element + "</option>"));
+
+}
+
function reloadData(page){
- $("#listTag").empty();
+ $("#searchInfo").empty();
var backend_url = thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_" + current_selected_monitor_type + "_list_keyword&datatype=" + thisWidget.datatype + "&datatime=" + thisWidget.datatime + "&qindex=" + current_selected_monitor_qindex +"&keyword=" + current_selected_monitor_keyword+ "&pageno=1&pagesize=10";
var avgnam = 10; //姣忛〉鏄剧ず涓暟
$.ajax({
@@ -64,23 +103,23 @@
url:backend_url,
dataType:"json",
success:function(data){
+ tableData = data.data.result;
if(current_selected_monitor_keyword == null){
haoutil.msg("璇疯緭鍏ュ叧閿瓧锛侊紒锛�")
return;
}
- if(data.data.result == null){
+ if(tableData == null){
haoutil.msg("璇烽�夋嫨鏌ヨ绫诲埆锛侊紒锛�")
return;
}
- var tableData = data.data.result;
var newsTotalNum = data.data.result.length; //璁板綍鐨勬�绘潯鏁�
var pageNum = Math.ceil(newsTotalNum/avgnam); //鍒嗛〉鐨勬�婚〉鏁�
for(var i=((page-1)*10);i<(page*10)&&i<newsTotalNum;i++){
var j = i+1;
- var topObj = tableData[i];
- var content = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onclick='locateAndShowDetail(this)' onmouseover='over(this)' onmouseout='out(this)' ><td>" + j + "</td><td>" + topObj.name + "</td><td>" + topObj.pm25 +"</td><td>" + topObj.pm10 +"</td><td>"+ topObj.no2 +"</td><td>"+ topObj.co +"</td><td>"+ topObj.no +"</td><td>" + topObj.nox + "</td></tr>"
- $("#listTag").append(content);
+ var topObj = tableData[i];
+ var content = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onmouseover='over(this)' onmouseout='out(this)' ><td><input type='checkbox' name='selectedItem' value='" + j + "' /></td><td>" + j + "</td><td onclick='locateAndShowDetail(this)'>" + topObj.code + "</td><td onclick='locateAndShowDetail(this)'>" + topObj.name + "</td><td><font color='" + getLayerPointColorByQindexandValue(current_selected_monitor_type, current_selected_monitor_qindex, topObj[current_selected_monitor_qindex]) + "'>" + topObj[current_selected_monitor_qindex] + "</font></td></tr>"
+ $("#searchInfo").append(content);
}
var content1 = '<div class="am-cf">' +
'鍏� '+newsTotalNum+' 鏉¤褰� / '+pageNum+'椤�' +
@@ -172,26 +211,53 @@
});
}
-function over(obj) {
- $('#searchInfo tr').removeClass("over_tr");
- $(obj).addClass("over_tr");
-}
-
-function out(obj) {
-
- $(obj).removeClass("over_tr");
-}
-
-function locateAndShowDetail(obj) {
- $('#searchInfo tr').removeClass("select_tr");
- $(obj).addClass("select_tr");
- var siteId = $(obj).attr("_siteid");
- var lon = $(obj).attr("_lon");
- var lat = $(obj).attr("_lat");
-
- if (lon && lon != 'undefined') {
- thisWidget.locateAndHighlight(lon, lat);
+ function over(obj) {
+ $('#searchInfo tr').removeClass("over_tr");
+ $(obj).addClass("over_tr");
}
- thisWidget.showDetailedWindow({ "nodejs_url_predix": thisWidget.nodejs_url_predix, "datatype": thisWidget.datatype,"selected_qindex": current_selected_monitor_qindex,"datatime": thisWidget.datatime, "layerid": current_selected_monitor_type, "siteid": siteId });
- console.log(current_selected_monitor_type);
-}
\ No newline at end of file
+
+ function out(obj) {
+
+ $(obj).removeClass("over_tr");
+ }
+
+ function locateAndShowDetail(obj) {
+ $('#searchInfo tr').removeClass("select_tr");
+ let parentObj = $(obj).parent();
+
+ $(parentObj).addClass("select_tr");
+ var siteId = $(parentObj).attr("_siteid");
+ var lon = $(parentObj).attr("_lon");
+ var lat = $(parentObj).attr("_lat");
+
+ if (lon && lon != 'undefined') {
+ thisWidget.locateAndHighlight(lon, lat);
+ }
+ if (current_selected_monitor_type != 100500) {
+ thisWidget.showDetailedWindow({ "nodejs_url_predix": thisWidget.nodejs_url_predix, "datatype": thisWidget.datatype, "selected_qindex": current_selected_monitor_qindex, "datatime": thisWidget.datatime, "layerid": current_selected_monitor_type, "siteid": siteId });
+ }
+ }
+
+
+ function setTopNname(count) {
+ $("#topN_name").html("Top" + count);
+
+ }
+
+ function highlightSelected() {
+
+ var obj = document.getElementsByName('selectedItem'); //閫夋嫨鎵�鏈塶ame="'selectedItem'"鐨勫璞★紝杩斿洖鏁扮粍
+ var selectedItem = [];
+ for (var i = 0; i < obj.length; ++i) {
+ if (obj[i].checked) {
+ selectedItem[selectedItem.length] = tableData[i];
+ }
+ }
+
+ if (selectedItem.length <= 0) {
+ haoutil.msg("璇峰嬀閫�");
+ } else {
+ //console.log(selectedItem);
+ thisWidget.HighlightMulti(current_selected_monitor_type, current_selected_monitor_qindex, selectedItem);
+ }
+ }
\ No newline at end of file
diff --git a/widgetsTS/widget_search/widget.js b/widgetsTS/widget_search/widget.js
index cc8cdd9..304268a 100644
--- a/widgetsTS/widget_search/widget.js
+++ b/widgetsTS/widget_search/widget.js
@@ -1,5 +1,38 @@
'use script' //寮�鍙戠幆澧冨缓璁紑鍚弗鏍兼ā寮�
- ;
+;
+
+
+function getPositionFromLonLat(in_json_string) {
+ let postion = [];
+ var points = in_json_string.split(",");
+ points.forEach(element => {
+ var tmplon_lat = element.split(" ");
+ postion[postion.length] = [tmplon_lat[0], tmplon_lat[1], 1];
+ });
+ return postion;
+}
+
+function getClass(o) { //鍒ゆ柇鏁版嵁绫诲瀷
+ return Object.prototype.toString.call(o).slice(8, -1);
+}
+
+function deepCopy(obj) {
+ var result, oClass = getClass(obj);
+
+ if (oClass == "Object") result = {}; //鍒ゆ柇浼犲叆鐨勫鏋滄槸瀵硅薄锛岀户缁亶鍘�
+ else if (oClass == "Array") result = []; //鍒ゆ柇浼犲叆鐨勫鏋滄槸鏁扮粍锛岀户缁亶鍘�
+ else return obj; //濡傛灉鏄熀鏈暟鎹被鍨嬪氨鐩存帴杩斿洖
+
+ for (var i in obj) {
+ var copy = obj[i];
+
+ if (getClass(copy) == "Object") result[i] = deepCopy(copy); //閫掑綊鏂规硶 锛屽鏋滃璞＄户缁彉閲弌bj[i],涓嬩竴绾ц繕鏄璞★紝灏眔bj[i][i]
+ else if (getClass(copy) == "Array") result[i] = deepCopy(copy); //閫掑綊鏂规硶 锛屽鏋滃璞＄户缁暟缁刼bj[i],涓嬩竴绾ц繕鏄暟缁勶紝灏眔bj[i][i]
+ else result[i] = copy; //鍩烘湰鏁版嵁绫诲瀷鍒欒祴鍊肩粰灞炴��
+ }
+
+ return result;
+}
(function (window, mars3d) {
//鍒涘缓widget绫伙紝闇�瑕佺户鎵緽aseWidget
class MyWidget extends mars3d.widget.BaseWidget {
@@ -10,9 +43,9 @@
windowOptions: {
width: 450,
position: {
- top: 150,
+ top: 140,
left: 5,
- bottom: 100
+ bottom: 80
},
},
}
@@ -35,6 +68,109 @@
this.map.flyToPoint(Cesium.Cartesian3.fromDegrees(lon, lat, 0.2));
}
+ HighlightMulti(layerid, qindex, selectedItem) {
+ mars3d.global_variables.tmpHighlightGraphicLayer.clear(true);
+
+ if (layerid == 1001 || layerid == 1002 || layerid == 1003 || layerid == 1004) {
+ selectedItem.forEach(element => {
+ this.addPointToMap(layerid, qindex, element);
+ });
+
+ } else if (layerid == 1005 || layerid == 100500) {
+ selectedItem.forEach(element => {
+ var path = element.shape;
+ if (path.substring(0, 1) == "M") {
+ var paths = (path.substring(17, path.length - 2)).split("),(");
+ paths.forEach(element_path => {
+ var positions = getPositionFromLonLat(element_path)
+ var tmpAttr = deepCopy(element);
+ delete tmpAttr['shape'];
+ this.addPathToMap(layerid, qindex, positions, tmpAttr);
+ });
+ } else {
+ var positions = getPositionFromLonLat(path.substring(11, path.length - 1))
+ var tmpAttr = deepCopy(element);
+ delete tmpAttr['shape'];
+ this.addPathToMap(layerid, qindex, positions, tmpAttr);
+ }
+ });
+ }else if (layerid == 1006) {
+ selectedItem.forEach(element => {
+ var path = element.shape;
+ if(path == null && path == "null" && path == undefined){
+ return;
+ }
+ if (path.substring(0, 1) == "M") {
+ var paths = (path.substring(15, path.length - 3)).split(")),((");
+ paths.forEach(element_path => {
+ var positions = getPositionFromLonLat(element_path)
+ var tmpAttr = deepCopy(element);
+ delete tmpAttr['shape'];
+ this.addPolygonToMap(layerid, qindex, positions, tmpAttr);
+ });
+ } else {
+ var positions = getPositionFromLonLat(path.substring(9, path.length - 2));
+ var tmpAttr = deepCopy(element);
+ delete tmpAttr['shape'];
+ this.addPolygonToMap(layerid, qindex, positions, tmpAttr);
+ }
+ });
+
+ }
+ }
+ addPolygonToMap(layerid, qindex, positions, attr) {
+ var primitive = new mars3d.graphic.PolygonEntity({
+ positions: positions,
+ style: {
+ height: 50,
+ diffHeight: 200,
+ materialType: mars3d.MaterialType.PolyGradient,
+ color: this.winPage.getLayerPointColorByQindexandValue(layerid, qindex, attr[qindex]),
+ alphaPower: 1.5,
+ //楂樹寒鏃剁殑鏍峰紡锛堥粯璁や负榧犳爣绉诲叆锛屼篃鍙互鎸囧畾type:'click'鍗曞嚮楂樹寒锛夛紝鏋勯�犲悗涔熷彲浠penHighlight銆乧loseHighlight鏂规硶鏉ユ墜鍔ㄨ皟鐢�
+ highlight: {
+ color: "#ff0000",
+ },
+ },
+ attr: attr
+ });
+ mars3d.global_variables.tmpHighlightGraphicLayer.addGraphic(primitive);
+ }
+
+ addPointToMap(layerid, qindex, attr) {
+ //绔嬩綋鍥村鎵╂暎鏁堟灉,鍦嗙姸
+ var circleDiffuseWallGlow = new mars3d.graphic.DiffuseWall({
+ position: Cesium.Cartesian3.fromDegrees(attr["lon"], attr["lat"], 20), //鍦嗕腑蹇冪偣
+ style: {
+ diffHeight: qindex == "co" ? 10 * attr[qindex] : attr[qindex], //楂樺害
+ radius: 200, //鍗婂緞
+ color: this.winPage.getLayerPointColorByQindexandValue(layerid, qindex, attr[qindex]),
+ speed: 10, //閫熷害
+ },
+ attr: attr
+ });
+ mars3d.global_variables.tmpHighlightGraphicLayer.addGraphic(circleDiffuseWallGlow);
+ }
+
+ addPathToMap(layerid, qindex, positions, attr) {
+ var road = new mars3d.graphic.WallPrimitive({
+ positions: positions,
+ style: {
+ closure: true,
+ diffHeight: qindex == "co" ? 10 * attr[qindex] : attr[qindex], //楂樺害
+ material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
+ //鍔ㄧ敾绾挎潗璐�
+ image: "img/textures/fence.png",
+ axisY: true,
+ color: this.winPage.getLayerPointColorByQindexandValue(layerid, qindex, attr[qindex]),
+ speed: 10, //閫熷害锛屽缓璁彇鍊艰寖鍥�1-100
+ }),
+ },
+ attr: attr
+ });
+ mars3d.global_variables.tmpHighlightGraphicLayer.addGraphic(road);
+ }
+
showDetailedWindow(params) {
if (mars3d.widget.isActivate("widgetsTS/widget_detail/widget.js")) {
var detailWiget = mars3d.widget.getClass("widgetsTS/widget_detail/widget.js");
--
Gitblit v1.9.1