From 17ab57553df0ff07d4b913bb1f315f9f45a9bc0e Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Fri, 03 Feb 2023 17:08:51 +0800
Subject: [PATCH] json数据修改，表格内容根据所画区域渲染，去除第一层弹窗
---
corelib/common/popup/evaluateAnalysis.html | 36 ++++----
widgets/FloodAnalysis/data.json | 52 +++++++++++-
widgets/FloodAnalysis/css/style.css | 3
corelib/common/popup/rain.html | 13 +-
widgets/FloodAnalysis/Widget.js | 60 ++++++++++++---
corelib/common/popup/css/style.css | 22 +++++
corelib/common/popup/js/evaluateAnalysis.js | 20 +++-
7 files changed, 156 insertions(+), 50 deletions(-)
diff --git a/corelib/common/popup/css/style.css b/corelib/common/popup/css/style.css
index 754fd69..6cd4d36 100644
--- a/corelib/common/popup/css/style.css
+++ b/corelib/common/popup/css/style.css
@@ -818,7 +818,7 @@
.evaluate-box-middle{
width: 96%;
- height: 350px;
+ height: 425px;
border: 1px solid black;
padding: 0px 10px 0px 10px;
}
@@ -836,11 +836,29 @@
display: flex;
}
-.evaluate-table-thead caption{
+.evaluate-box-middle table{
+ width: 100%;
+}
+
+.evaluate-table-caption{
font-size: 20px;
margin: 15px 0 15px 0;
}
+.evaluate-table-thead tr td{
+ text-align: center;
+ border-right: 1px solid #CFCFCF;
+ border-bottom: 1px solid #CFCFCF;
+ color: #404040;
+}
+
+.evaluate-tbody tr td{
+ text-align: center;
+ border-right: 1px solid #CFCFCF;
+ border-bottom: 1px solid #CFCFCF;
+ color: #404040;
+}
+
.column-2{
margin-left: 20px;
}
diff --git a/corelib/common/popup/evaluateAnalysis.html b/corelib/common/popup/evaluateAnalysis.html
index b16dc98..ceab667 100644
--- a/corelib/common/popup/evaluateAnalysis.html
+++ b/corelib/common/popup/evaluateAnalysis.html
@@ -15,18 +15,18 @@
<div class="evaluate-box-top-left">
<div class="column-1">
<div>
- <span>受灾户数：</span><span>125</span>
+ <span >受灾户数：</span><span class="house">暂无数据</span>
</div>
<div>
- <span>受灾面积：</span><span>47.999km²</span>
+ <span>受灾面积：</span><span class="area">暂无数据</span>
</div>
</div>
<div class="column-2">
<div>
- <span>受灾人口：</span><span>625人</span>
+ <span>受灾人口：</span><span class="people">暂无数据</span>
</div>
<div>
- <span>房屋价值：</span><span>189.999万元</span>
+ <span>房屋价值：</span><span class="money">暂无数据</span>
</div>
</div>
</div>
@@ -41,20 +41,22 @@
</div>
</div>
<div class="evaluate-box-middle">
- <table class="evaluate-table-thead table-thead">
- <caption>人口财产淹没损失表</caption>
- <thead>
- <tr>
- <th><div>编号</div></th>
- <th><div>受淹户数(户)</div></th>
- <th><div>受淹人口数量(人)</div></th>
- <th><div>受淹居民地面积(km²)</div></th>
- <th><div>受淹房屋价值(万元/人)</div></th>
- </tr>
- </thead>
- </table>
- <div class="evaluate-echarts" id="evaluate-echarts">
+ <div class="evaluate-table">
+ <table>
+ <caption class="evaluate-table-caption table-caption">人口财产淹没损失表</caption>
+ <thead class="evaluate-table-thead table-thead">
+ <tr>
+ <th><div>编号</div></th>
+ <th><div>受淹户数(户)</div></th>
+ <th><div>受淹人口数量(人)</div></th>
+ <th><div>受淹居民地面积(km²)</div></th>
+ <th><div>受淹房屋价值(万元/人)</div></th>
+ </tr>
+ </thead>
+ <tbody id="evaluate-tbody" class="table-tbody evaluate-tbody"></tbody>
+ </table>
</div>
+ <div class="evaluate-echarts" id="evaluate-echarts"></div>
</div>
</div>
diff --git a/corelib/common/popup/js/evaluateAnalysis.js b/corelib/common/popup/js/evaluateAnalysis.js
index 01875df..0ce5ace 100644
--- a/corelib/common/popup/js/evaluateAnalysis.js
+++ b/corelib/common/popup/js/evaluateAnalysis.js
@@ -1,12 +1,12 @@
$(function () {
-// change事件
+ // change事件
$('input[type=radio][name=value]').change(function () {
if (this.value == 'list'){
$('.evaluate-echarts').hide()
$('.evaluate-box-top-left').css('visibility','visible')
- $('.evaluate-table-thead').show()
+ $('.evaluate-table').show()
}else {
- $('.evaluate-table-thead').hide()
+ $('.evaluate-table').hide()
$('.evaluate-box-top-left').css('visibility','hidden')
recharts_z()
@@ -15,7 +15,9 @@
}
});
+ //加载饼图
function loadEcharts(){
+
var echartsOption = {
tooltip: {
trigger: 'item'
@@ -57,15 +59,12 @@
]
}
-
-
var chartDom = document.getElementById('evaluate-echarts');
var myChart = echarts.init(chartDom);
echartsOption&&myChart.setOption(echartsOption,true);
}
function recharts_z() {
- console.log($(window).width(),$(window).height(),"777")
var width = $(window).width() * 0.8;
var height = ($(window).height() - 50) - 80;
$('#evaluate-echarts').empty();
@@ -78,4 +77,13 @@
}
myChartPie.resize(resize);
}
+
+ //获取参数
+ function GetQueryString(name) {
+ var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+ var r = window.location.search.substr(1).match(reg);
+ if (r != null) return unescape(r[2]);
+ return null;
+ }
+
});
diff --git a/corelib/common/popup/rain.html b/corelib/common/popup/rain.html
index 0491ff4..144e6ac 100644
--- a/corelib/common/popup/rain.html
+++ b/corelib/common/popup/rain.html
@@ -70,8 +70,7 @@
</table>
<div class="comTbody">
<table class="table-tbody rain-tbody" style="border-top: 0;">
- <tbody id="rainTable">
- </tbody>
+ <tbody id="rainTable"></tbody>
</table>
</div>
</div>
@@ -95,7 +94,7 @@
</ul>
</div>
</div>
- </div>
+ </div>
<div class="rain-pei" id="dailyPei"></div>
<div class="rain-tab">
<table class="table-thead rain-thead">
@@ -114,7 +113,7 @@
</tbody>
</table>
</div>
- </div>
+ </div>
</div>
<!-- 特征雨量 -->
<div class="river-thr none river-con">
@@ -138,7 +137,7 @@
<div class="comTbody">
<table class="table-tbody rain-tbody-box" style="border-top: 0;">
<tbody id="rainTbodyBox">
-
+
</tbody>
</table>
</div>
@@ -148,7 +147,7 @@
<div class="river-fou-box">
<ul id="rainInfo">
</ul>
-
+
</div>
</div>
<div class="load-box-list">
@@ -165,5 +164,5 @@
<script src="./js/rain.js"></script>
<script src="./js/start.js"></script>
<script src="./js/end.js"></script>
-</body>
+</body>
</html>
diff --git a/widgets/FloodAnalysis/Widget.js b/widgets/FloodAnalysis/Widget.js
index b5af8ea..7e76a7a 100644
--- a/widgets/FloodAnalysis/Widget.js
+++ b/widgets/FloodAnalysis/Widget.js
@@ -310,7 +310,7 @@
this.addPoint()
//切换底图
$($('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');
},
@@ -449,17 +449,17 @@
//洪水分析弹窗
floodAnalysisPopup:function (){
var url = './corelib/common/popup/floodAnalysis.html';
+ var urlEvaluate = './corelib/common/popup/evaluateAnalysis.html'
var top = ($(window).height() - 600) / 2;
var left = ($(window).width() - 900 - 340) / 2 + 340;
var self = this
-
+ var inPolygon = []
for (let i = 0; i < this.peoplePositionArray.length; i++) {
- let inPolygon = this.isPointInPolygon(this.peoplePositionArray[i])
-
- this.peoplePositionArray[i].inPolygon = inPolygon
-
+ let isIn = this.isPointInPolygon(this.peoplePositionArray[i])
+ if (isIn){
+ inPolygon.push(this.peoplePositionArray[i])
+ }
}
-
layer.open({
title:'模拟分析',
type: 2,
@@ -467,14 +467,44 @@
area: ['1100px', '600px'],
skin: 'floodAnalysis',
offset: [top, left],
- content: url,
+ content: urlEvaluate,
id: "floodAnalysisLayer",
closeBtn: 1,
//把父页面数据传递给子弹窗并渲染
success: function(layero, index) {
- var body = layer.getChildFrame("body",index);//绑定父子之间的关系，用于数据传递，缺少则无法传递
- var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象
- iframeWin.$('#canvasImage')[0].src = self.canvasImage; //渲染子页面中的img
+ //绑定父子之间的关系，用于数据传递，缺少则无法传递
+ 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 = ""
+ var house = 0
+ var people = 0
+ var area = 0
+ var money = 0
+ for (let i = 0; i < inPolygon.length; i++) {
+ table += '<tr>'+
+ '<td><div>' + inPolygon[i].name + '</div></td>' +
+ '<td><div>' + inPolygon[i].house + '</div></td>' +
+ '<td><div>' + inPolygon[i].people + '</div></td>' +
+ '<td><div>' + inPolygon[i].area + '</div></td>' +
+ '<td><div>' + inPolygon[i].money + '</div></td>' +
+ '</tr>'
+
+ house += inPolygon[i].house
+ people += inPolygon[i].people
+ area += inPolygon[i].area
+ money += inPolygon[i].money
+ }
+ iframeWin.$('#evaluate-tbody').html(table)
+
+ iframeWin.$(".house").html(house + '户')
+ iframeWin.$(".people").html(people + '人')
+ iframeWin.$(".area").html(area + 'km²')
+ iframeWin.$(".money").html(money + '万元')
+
},
});
},
@@ -499,7 +529,6 @@
var poly= turf.polygon([turfPolygon])
var pt = turf.point([point.LGTD,point.LTTD])
-
return turf.booleanPointInPolygon(pt,poly)
},
@@ -513,6 +542,13 @@
success: function success(data) {
const viewer = self.map
var dataArray = data.data
+ dataArray.forEach(e=>{
+ e.house = Number(e.house)
+ e.people = Number(e.people)
+ e.area = Number(e.area)
+ e.money = Number(e.money)
+ })
+ self.peoplePositionArray = []
self.peoplePositionArray = dataArray
for (let i = 0; i < dataArray.length; i++) {
var temp = viewer.entities.add({
diff --git a/widgets/FloodAnalysis/css/style.css b/widgets/FloodAnalysis/css/style.css
index c628d65..9b43334 100644
--- a/widgets/FloodAnalysis/css/style.css
+++ b/widgets/FloodAnalysis/css/style.css
@@ -1,7 +1,7 @@
@import "Tooltip-div.css";
.jimu-widget-FloodAnalysis{
width: 100%;
- height: 100%;
+ height: 160px !important;
position: fixed !important;
left: 30px !important;
top: 75px !important;
@@ -13,6 +13,7 @@
color: rgb(255, 255, 255);
}
+
.jimu-widget-FloodAnalysis .flood-analysis-header {
position: relative;
width: 100%;
diff --git a/widgets/FloodAnalysis/data.json b/widgets/FloodAnalysis/data.json
index f411306..6505428 100644
--- a/widgets/FloodAnalysis/data.json
+++ b/widgets/FloodAnalysis/data.json
@@ -5,21 +5,63 @@
"LGTD": "116.074778",
"LTTD": "26.001260",
"house": "35",
- "people": "175"
+ "people": "175",
+ "area": "12.888",
+ "money": "50.123"
+ },
+ {
+ "name": "球岭脑",
+ "LGTD": "116.074808",
+ "LTTD": "25.998297",
+ "house": "40",
+ "people": "124",
+ "area": "12.078",
+ "money": "51.3"
+ },
+ {
+ "name": "车头村",
+ "LGTD": "116.081811",
+ "LTTD": "25.995014",
+ "house": "35",
+ "people": "175",
+ "area": "12.888",
+ "money": "50.123"
+ },
+ {
+ "name": "咸泥垄",
+ "LGTD": "116.082536",
+ "LTTD": "26.003335",
+ "house": "35",
+ "people": "175",
+ "area": "12.888",
+ "money": "50.123"
+ },
+ {
+ "name": "大排",
+ "LGTD": "116.085055",
+ "LTTD": "26.003224",
+ "house": "20",
+ "people": "100",
+ "area": "8.551",
+ "money": "39.789"
},
{
"name": "金湾水库",
"LGTD": "114.978944",
"LTTD": "24.904194",
- "house": "35",
- "people": "175"
+ "house": "70",
+ "people": "350",
+ "area": "24.456",
+ "money": "100.456"
},
{
"name": "雷公坝",
"LGTD": "115.672889",
"LTTD": "25.306611",
- "house": "35",
- "people": "175"
+ "house": "20",
+ "people": "100",
+ "area": "8.551",
+ "money": "39.789"
}
]
}
--
Gitblit v1.9.3