From 0a39c24bbc9b91eb552d8201ba6907305233b8f5 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Sat, 04 Feb 2023 14:22:38 +0800
Subject: [PATCH] 水文水环境分析-洪水淹没：1、添加淹没图弹窗；2、模拟分析窗口改为屏幕显示，取消弹窗
---
widgets/FloodAnalysis/Widget.html | 23 +++++
corelib/common/popup/evaluateAnalysis.html | 2
corelib/common/popup/img/floodAnalysisEvaluate-2.png | 0
widgets/FloodAnalysis/css/style.css | 55 +++++++++++++
corelib/common/popup/js/floodImage.js | 12 +++
widgets/RiskEarlyWarning/Widget.js | 1
corelib/common/popup/floodImage.html | 19 ++++
widgets/FloodAnalysis/Widget.js | 37 +++++++--
corelib/common/popup/img/floodAnalysisEvaluate.jpg | 0
corelib/common/popup/css/style.css | 12 ++
corelib/common/popup/js/evaluateAnalysis.js | 42 +++++++++-
11 files changed, 185 insertions(+), 18 deletions(-)
diff --git a/corelib/common/popup/css/style.css b/corelib/common/popup/css/style.css
index 6cd4d36..9730dc2 100644
--- a/corelib/common/popup/css/style.css
+++ b/corelib/common/popup/css/style.css
@@ -845,7 +845,7 @@
margin: 15px 0 15px 0;
}
-.evaluate-table-thead tr td{
+.evaluate-table-thead tr th{
text-align: center;
border-right: 1px solid #CFCFCF;
border-bottom: 1px solid #CFCFCF;
@@ -867,3 +867,13 @@
width: 100%;
display: none;
}
+
+/**淹没图**/
+.flood-image-top img{
+ width: 100%;
+}
+
+.flood-image-bottom{
+ width: 96%;
+ text-align: right;
+}
diff --git a/corelib/common/popup/evaluateAnalysis.html b/corelib/common/popup/evaluateAnalysis.html
index ceab667..7ee6673 100644
--- a/corelib/common/popup/evaluateAnalysis.html
+++ b/corelib/common/popup/evaluateAnalysis.html
@@ -61,7 +61,7 @@
</div>
<div class="evaluate-bottom">
- <button type="button">生成淹没图</button>
+ <button id="create-flood-image" type="button">生成淹没图</button>
</div>
</div>
diff --git a/corelib/common/popup/floodImage.html b/corelib/common/popup/floodImage.html
new file mode 100644
index 0000000..b6cf759
--- /dev/null
+++ b/corelib/common/popup/floodImage.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>淹没图弹出框</title>
+ <link rel="stylesheet" href="./css/style.css">
+ <link rel="stylesheet" href="">
+</head>
+<body>
+ <div class="flood-image-box">
+ <div class="flood-image-top">
+ <img src="img/floodAnalysisEvaluate-2.png">
+ </div>
+ <div class="flood-image-bottom">
+ <a href="img/floodAnalysisEvaluate-2.png" download="淹没图.jpg"><button id="exportImage" type="button" >导出</button></a>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/corelib/common/popup/img/floodAnalysisEvaluate-2.png b/corelib/common/popup/img/floodAnalysisEvaluate-2.png
new file mode 100644
index 0000000..ed2506c
--- /dev/null
+++ b/corelib/common/popup/img/floodAnalysisEvaluate-2.png
Binary files differ
diff --git a/corelib/common/popup/img/floodAnalysisEvaluate.jpg b/corelib/common/popup/img/floodAnalysisEvaluate.jpg
new file mode 100644
index 0000000..8cfe85f
--- /dev/null
+++ b/corelib/common/popup/img/floodAnalysisEvaluate.jpg
Binary files differ
diff --git a/corelib/common/popup/js/evaluateAnalysis.js b/corelib/common/popup/js/evaluateAnalysis.js
index 0ce5ace..fcaf80c 100644
--- a/corelib/common/popup/js/evaluateAnalysis.js
+++ b/corelib/common/popup/js/evaluateAnalysis.js
@@ -1,4 +1,16 @@
$(function () {
+ //获取父窗口传来的数据
+ var data = JSON.parse(GetQueryString("data"))
+ //配置饼图数据
+ var pieData = []
+ if (data.length>0){
+ data.forEach(e=>{
+ pieData.push({
+ value : e.people,
+ name:e.name
+ })
+ })
+ }
// change事件
$('input[type=radio][name=value]').change(function () {
if (this.value == 'list'){
@@ -14,6 +26,11 @@
$('.evaluate-echarts').show()
}
});
+
+ //淹没图弹窗事件
+ $('#create-flood-image').click(function (){
+ imagePopup()
+ })
//加载饼图
function loadEcharts(){
@@ -50,11 +67,7 @@
labelLine: {
show: false
},
- data: [
- { value: 1048, name: '会昌县' },
- { value: 735, name: '石城县' },
- { value: 580, name: '宁都县' },
- ]
+ data: pieData
}
]
}
@@ -81,9 +94,26 @@
//获取参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
- var r = window.location.search.substr(1).match(reg);
+ var r = decodeURI(window.location.search).substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
+ //淹没图弹窗
+ function imagePopup(){
+ var url = './corelib/common/popup/floodImage.html';
+ var top = ($(window).height() - 526) / 2;
+ var left = ($(window).width() - 500 - 340) / 2 + 340;
+ parent.layer.open({
+ title:'影响分析',
+ type: 2,
+ maxmin: false, //开启最大化最小化按钮
+ area: ['1000px', '800px'],
+ skin: 'floodImage',
+ offset: [top, left],
+ content: url,
+ id: "floodImageLayer",
+ closeBtn: 1
+ });
+ }
});
diff --git a/corelib/common/popup/js/floodImage.js b/corelib/common/popup/js/floodImage.js
new file mode 100644
index 0000000..94d295e
--- /dev/null
+++ b/corelib/common/popup/js/floodImage.js
@@ -0,0 +1,12 @@
+$(function () {
+ $('#exportImage').click(function () {
+ exportImage()
+ })
+
+
+ function exportImage(){
+ // ./img/floodAnalysisEvaluate.jpg
+ // $('.flood-image-bottom a').attr('href','./img/floodAnalysisEvaluate.jpg')
+ }
+
+});
diff --git a/widgets/FloodAnalysis/Widget.html b/widgets/FloodAnalysis/Widget.html
index 904287a..591d661 100644
--- a/widgets/FloodAnalysis/Widget.html
+++ b/widgets/FloodAnalysis/Widget.html
@@ -20,4 +20,27 @@
<!-- </div>-->
</div>
</div>
+
+ <div class="flood-detail">
+ <div class="flood-detail-header">
+ <i></i> 洪水淹没详情
+ </div>
+
+ <div class="flood-detail-content">
+ <div class="flood-detail-text">
+ <div>
+ <span>0-3m淹没面积：</span><span>10km²</span>
+ </div>
+ <div>
+ <span>1-2m淹没面积：</span><span>20km²</span>
+ </div>
+ <div>
+ <span>>3m淹没面积：</span><span>22km²</span>
+ </div>
+ </div>
+ <div class="flood-detail-button">
+ <input type="button" id="flood-detail-ksfx" value="开始分析" />
+ </div>
+ </div>
+ </div>
</div>
diff --git a/widgets/FloodAnalysis/Widget.js b/widgets/FloodAnalysis/Widget.js
index 7e76a7a..3f9e54f 100644
--- a/widgets/FloodAnalysis/Widget.js
+++ b/widgets/FloodAnalysis/Widget.js
@@ -49,8 +49,7 @@
this.map.scene.globe.depthTestAgainstTerrain = true;
//取消双击事件
this.map.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
-
-
+ //绘制水面事件
$("#flood_hzsm_headtab").click(function () {
DrawDynamicClampGround.startDrawingPolyline(self.map, function (cartesians) {
if (self.drawingPolyline != undefined)
@@ -67,12 +66,14 @@
cartesians.splice(cartesians.length - 1, cartesians.length);
self.drawLines(cartesians);
self.movehandLer()
+ self.showDetail(true)
});
});
$('#flood_qcsmx_headtab').click(function () {
self.map.entities.remove(self.drawingPolyline);
self.map.scene.primitives.remove(self.riverPrimitive);
+ self.showDetail(false)
})
@@ -96,6 +97,9 @@
// $("#thematic_smxj_headtab").click(function () {
// self.offsetHeight(-Number($("#thematic_bhz_headtab").val()), 5);
// });
+ $('#flood-detail-ksfx').click(function () {
+ self.floodAnalysisPopup()
+ })
},
@@ -111,7 +115,6 @@
prepareVertex: function () {
if (this.positions.length > 0) {
this.sideRes = this._lines2Plane(this.positions, this.riverWidth, this.riverHeight);
- console.log(this.sideRes,"----000----")
}
},
setPositions: function (e) {
@@ -312,6 +315,12 @@
$($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[0]).children('div:eq(0)').trigger('click');
$($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[1]).children('div:eq(2)').trigger('click');
+ this.map.camera.flyTo({
+ destination: Cesium.Cartesian3.fromDegrees(116.021604,25.893668, 50000),
+ });
+
+ this.showDetail(false)
+
},
onClose: function () {
@@ -440,8 +449,8 @@
//点击事件
clickHand:function (click){
var pickedObjects = this.map.scene.pick(click.position);
- if (pickedObjects.primitive instanceof Cesium.Primitive) {
- this.canvasToImage()
+ if (pickedObjects && pickedObjects.primitive instanceof Cesium.Primitive) {
+ // this.canvasToImage()
this.floodAnalysisPopup()
}
},
@@ -460,14 +469,16 @@
inPolygon.push(this.peoplePositionArray[i])
}
}
+ var jsonStr = JSON.stringify(inPolygon)
+
layer.open({
- title:'模拟分析',
+ title:'评估分析',
type: 2,
maxmin: false, //开启最大化最小化按钮
area: ['1100px', '600px'],
skin: 'floodAnalysis',
offset: [top, left],
- content: urlEvaluate,
+ content: urlEvaluate + "?data=" + encodeURIComponent(jsonStr),//使用encodeURIComponent转码，避免中文字符乱码，避免url截取错误
id: "floodAnalysisLayer",
closeBtn: 1,
//把父页面数据传递给子弹窗并渲染
@@ -476,7 +487,6 @@
var body = layer.getChildFrame("body",index);
//得到iframe页的窗口对象
var iframeWin = window[layero.find('iframe')[0]['name']];
- console.log(iframeWin)
// //渲染子页面中的img
// iframeWin.$('#canvasImage')[0].src = self.canvasImage;
var table = ""
@@ -513,6 +523,15 @@
addPoint:function (){
const url = './widgets/FloodAnalysis/data.json'
this.getJsonUrl(url)
+ },
+
+ showDetail:function(show){
+ //显示详情
+ if (show){
+ $('.flood-detail').show()
+ }else {
+ $('.flood-detail').hide()
+ }
},
//判断点是否在多边形内部
@@ -589,7 +608,7 @@
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
- }
+ },
});
diff --git a/widgets/FloodAnalysis/css/style.css b/widgets/FloodAnalysis/css/style.css
index 9b43334..1c686d4 100644
--- a/widgets/FloodAnalysis/css/style.css
+++ b/widgets/FloodAnalysis/css/style.css
@@ -83,3 +83,58 @@
.jimu-widget-FloodAnalysis .flood-water-analysis .flood-water-analysis-new input:nth-child(even) {
float: right;
}
+
+.flood-detail{
+ position: fixed;
+ top: 270px;
+ width: 440px;
+ height: 200px;
+ left: 30px !important;
+ overflow-x: hidden;
+ background: rgba(31, 39, 48, .7);
+ font-size: 14px;
+ border: 1px solid rgb(69, 154, 251);
+ border-radius: 5px;
+ color: rgb(255, 255, 255);
+ display: none;
+}
+
+.flood-detail-header {
+ position: relative;
+ width: 100%;
+ height: 40px;
+ line-height: 40px;
+ font-size: 20px;
+ border-bottom: 1px solid rgb(69, 154, 251);
+}
+
+.flood-detail-header i {
+ display: inline-block;
+ margin-left: 6px;
+ vertical-align: middle;
+ width: 20px;
+ height: 20px;
+ background: url(../../../images/toolbox.png ) no-repeat 0 -20px;
+ background-size: 20px;
+}
+
+.flood-detail-content{
+ height: 45%;
+ text-align: center;
+ margin: 12px 17px 10px 17px;
+}
+
+.flood-detail-text{
+ height: 95%;
+ font-size: 20px;
+}
+
+.flood-detail-button input{
+ margin: 5px 0;
+ width: 48%;
+ height: 36px;
+ color: #fff;
+ background: rgb(2,24,55);
+ border: 1px solid rgb(69, 154, 251);
+ border-radius: 4px;
+}
diff --git a/widgets/RiskEarlyWarning/Widget.js b/widgets/RiskEarlyWarning/Widget.js
index fc4b8af..c15fca6 100644
--- a/widgets/RiskEarlyWarning/Widget.js
+++ b/widgets/RiskEarlyWarning/Widget.js
@@ -3604,7 +3604,6 @@
// 注册鼠标左键单击事件
clickHand: function clickHand(click) {
var pickedObjects = this.map.scene.drillPick(click.position);
- console.log(pickedObjects,click,"5555")
if (Cesium.defined(pickedObjects)) {
for (var i = 0; i < pickedObjects.length; ++i) {
var obj = pickedObjects[i].id;
--
Gitblit v1.9.3