From 5dcd63bfa4498971727ba222365a3050f7df86cb Mon Sep 17 00:00:00 2001
From: wangzhibo <wangzhibo@shsening.com>
Date: 星期日, 07 十一月 2021 17:13:30 +0800
Subject: [PATCH] 添加 勾选框，多点定位
---
widgetsTS/widget_summary/view.html | 6 +
widgetsTS/widget_summary/view.js | 84 ++++++++++++++------
widgetsTS/widget_summary/widget.js | 129 +++++++++++++++++++++++++++++++
3 files changed, 191 insertions(+), 28 deletions(-)
diff --git a/widgetsTS/widget_summary/view.html b/widgetsTS/widget_summary/view.html
index 34d2457..6217b21 100644
--- a/widgetsTS/widget_summary/view.html
+++ b/widgetsTS/widget_summary/view.html
@@ -85,13 +85,17 @@
<a href="#" style="color: white!important;"><span id="topN_name">鐩戞祴Top50</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" style="padding-left:1%;padding-right:1%;overflow:auto;height:450px;">
<table id="" class="layui-table no_bgc_table top_10_table" 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;"><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>
diff --git a/widgetsTS/widget_summary/view.js b/widgetsTS/widget_summary/view.js
index 534196e..1bbd612 100644
--- a/widgetsTS/widget_summary/view.js
+++ b/widgetsTS/widget_summary/view.js
@@ -2,6 +2,8 @@
var current_selected_monitor_name = "鍥芥帶鐐�";
var current_selected_monitor_qindex = "pm25";
+var tmpTopListQueryResult;
+
//瀵瑰簲widget.js涓璏yWidget瀹炰緥鍖栧悗鐨勫璞�
var thisWidget
@@ -18,6 +20,18 @@
current_selected_monitor_name = $(this).attr("_name");
changeQindexSelection();
reloadData();
+ });
+
+ $("#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);
+ });
+ }
});
@@ -57,7 +71,7 @@
}
function changeQindexSelection() {
-
+ current_selected_monitor_qindex = "pm25"; // 閲嶈qindex
$("#qindex_selection").empty();
var options = [];
if (current_selected_monitor_type == 1001) {
@@ -66,6 +80,7 @@
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);
}
@@ -76,7 +91,7 @@
function reloadData() {
$("#top10Tb").empty();
- var backend_url = thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_" + current_selected_monitor_type + "_list&datatype=" + thisWidget.datatype + "&datatime=" + thisWidget.datatime + "&qindex=" + current_selected_monitor_qindex + "&pageno=1&pagesize="+default_system_params.summary_topN_count;
+ var backend_url = thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_" + current_selected_monitor_type + "_list&datatype=" + thisWidget.datatype + "&datatime=" + thisWidget.datatime + "&qindex=" + current_selected_monitor_qindex + "&pageno=1&pagesize=" + default_system_params.summary_topN_count;
//鍔犲叆cntId
$.ajax({
type: 'get',
@@ -86,26 +101,25 @@
async: true,//鍚屾
url: backend_url,
success: function (data) {
- var tableData = data.data.result;
- //console.log(tableData);
- if (tableData != null && tableData.length>0) {
- for (var i = 0; length = tableData.length, i < length ; i++) {
+ tmpTopListQueryResult = data.data.result;;
+ if (tmpTopListQueryResult != null && tmpTopListQueryResult.length > 0) {
+ for (var i = 0; length = tmpTopListQueryResult.length, i < length; i++) {
var j = i + 1;
- var topObj = tableData[i];
- if(topObj[current_selected_monitor_qindex] == null){
- var _tr = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onclick='locateAndShowDetail(this)' onmouseover='over(this)' onmouseout='out(this)' ><td>" + j + "</td><td>" + topObj.code + "</td><td>" + topObj.name + "</td><td><font color='" + getLayerPointColorByQindexandValue(current_selected_monitor_type, current_selected_monitor_qindex, topObj[current_selected_monitor_qindex]) + "'>" + "/" + "</font></td></tr>"
+ var topObj = tmpTopListQueryResult[i];
+ if (topObj[current_selected_monitor_qindex] == null) {
+ var _tr = "<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]) + "'>" + "/" + "</font></td></tr>"
$("#top10Tb").append(_tr);
- } else if(topObj.name == undefined){
- var _tr = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onclick='locateAndShowDetail(this)' onmouseover='over(this)' onmouseout='out(this)' ><td>" + j + "</td><td>" + topObj.code + "</td><td>" + "/" + "</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>"
+ } else if (topObj.name == undefined) {
+ var _tr = "<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)'>" + "/" + "</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>"
$("#top10Tb").append(_tr);
- }else{
- var _tr = "<tr _siteid='" + topObj.code + "' _lon='" + topObj.lon + "' _lat='" + topObj.lat + "' onclick='locateAndShowDetail(this)' onmouseover='over(this)' onmouseout='out(this)' ><td>" + j + "</td><td>" + topObj.code + "</td><td>" + 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>"
+ } else {
+ var _tr = "<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>"
$("#top10Tb").append(_tr);
}
- }
- }else{
- haoutil.msg("鏌ヨ鏃犳暟鎹紝璇锋洿鎹㈡煡璇㈡潯浠讹紒");
- }
+ }
+ } else {
+ haoutil.msg("鏌ヨ鏃犳暟鎹紝璇锋洿鎹㈡煡璇㈡潯浠讹紒");
+ }
},
error: function (request, textStatus) {
@@ -127,20 +141,40 @@
function locateAndShowDetail(obj) {
$('#top10Tb tr').removeClass("select_tr");
- $(obj).addClass("select_tr");
- var siteId = $(obj).attr("_siteid");
- var lon = $(obj).attr("_lon");
- var lat = $(obj).attr("_lat");
+ 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 });
+ 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 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] = tmpTopListQueryResult[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_summary/widget.js b/widgetsTS/widget_summary/widget.js
index e469e18..f18dced 100644
--- a/widgetsTS/widget_summary/widget.js
+++ b/widgetsTS/widget_summary/widget.js
@@ -1,5 +1,35 @@
-'use script' //寮�鍙戠幆澧冨缓璁紑鍚弗鏍兼ā寮�
- ;
+'use script'; //寮�鍙戠幆澧冨缓璁紑鍚弗鏍兼ā寮�
+//MULTILINESTRING((121.442366232 30.9993324020001,121.432115747 31.0180369600001,121.425361897 31.033267139,121.400904977 31.0866703300001),(121.400938813 31.086461206,121.398898303 31.0910476290001,121.394856812 31.1020265970001,121.39172779 31.107931819,121.388063749 31.1137217880001)) MULTILINESTRING((121.442366232 30.9993324020001, 121.432115747 31.0180369600001, 121.425361897 31.033267139, 121.400904977 31.0866703300001), (121.400938813 31.086461206, 121.398898303 31.0910476290001, 121.394856812 31.1020265970001, 121.39172779 31.107931819, 121.388063749 31.1137217880001)) 娌噾楂橀��(濂夎搐鍖�-鍗楁ˉ闀�) 121.388063749 30.9993324020001 MULTILINESTRING((121.442366232 30.9993324020001, 121.432115747 31.0180369600001, 121.425361897 31.033267139, 121.400904977 31.0866703300001), (121.400938813 31.086461206, 121.398898303 31.0910476290001, 121.394856812 31.1020265970001, 121.39172779 31.107931819, 121.388063749 31.1137217880001)) 濂夎搐鍖�
+//LINESTRING(121.466190372 30.915914146,121.467249117 30.9123925970001,121.468322938 30.9086812570001)
+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 {
@@ -34,6 +64,101 @@
locateAndHighlight(lon, lat) {
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 == 100500) {
+
+ } else if (layerid == 1006) {
+
+ selectedItem.forEach(element => {
+ var path = element.shape;
+ if (path != null && path != "null" && path != undefined) {
+ 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" ? 100 * attr[qindex] : 10 * 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" ? 100 * attr[qindex] : 10 * 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")) {
--
Gitblit v1.9.1