From 52c8ca8e31bb9aee13726d9c858dee1d11dcde87 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Mon, 20 Feb 2023 10:19:29 +0800
Subject: [PATCH] 洪水淹没-进度条、分析弹窗大小位置变更
---
widgets/FloodAnalysis/Widget.html | 6
widgets/FloodAnalysis/images/floodAnalysisEvaluate-2.png | 0
corelib/common/popup/image/close.png | 0
corelib/common/popup/image/floodAnalysisEvaluate-2.png | 0
corelib/common/popup/image/floodAnalysisEvaluate.jpg | 0
widgets/FloodAnalysis/Widget copy4.html | 156 +++++++
widgets/FloodAnalysis/css/style.css | 93 ++++
corelib/common/popup/rain.html | 2
corelib/common/popup/image/rote.jpg | 0
corelib/common/popup/floodImage.html | 4
corelib/common/popup/weather.html | 12
corelib/common/popup/image/data.png | 0
corelib/common/popup/css/style.css | 10
corelib/common/popup/js/evaluateAnalysis.js | 8
widgets/FloodAnalysis/Widget copy4.js | 863 +++++++++++++++++++++++++++++++++++++++
corelib/common/popup/evaluateAnalysis.html | 20
corelib/common/popup/river.html | 12
corelib/common/popup/image/sel.png | 0
widgets/FloodAnalysis/Widget.js | 128 ++++-
19 files changed, 1,249 insertions(+), 65 deletions(-)
diff --git a/corelib/common/popup/css/style.css b/corelib/common/popup/css/style.css
index eac39a7..a6640bd 100644
--- a/corelib/common/popup/css/style.css
+++ b/corelib/common/popup/css/style.css
@@ -585,7 +585,7 @@
cursor: pointer;
padding-left: 10px;
color: #6d6d6d;
- background: url("../img/sel.png") no-repeat 175px;
+ background: url("../image/sel.png") no-repeat 175px;
}
.selectsd .input_insd input {
@@ -596,7 +596,7 @@
cursor: pointer;
padding-left: 10px;
color: #6d6d6d;
- background: url("../img/sel.png") no-repeat 40px;
+ background: url("../image/sel.png") no-repeat 40px;
}
.select .city {
@@ -673,11 +673,11 @@
}
.wicon {
- background: url("../img/data.png") no-repeat 120px;
+ background: url("../image/data.png") no-repeat 120px;
}
.time-icon {
- background: url("../img/sel.png") no-repeat 128px;
+ background: url("../image/sel.png") no-repeat 128px;
}
.river-btn {
@@ -811,7 +811,7 @@
.evaluate-box {
display: flex;
- height: 95%;
+ height: 77%;
}
.evaluate-bottom {
diff --git a/corelib/common/popup/evaluateAnalysis.html b/corelib/common/popup/evaluateAnalysis.html
index 43968e4..af2284e 100644
--- a/corelib/common/popup/evaluateAnalysis.html
+++ b/corelib/common/popup/evaluateAnalysis.html
@@ -25,18 +25,18 @@
<div class="evaluate-box-top-left">
<div class="column-1">
<div>
- <span>受灾户数：</span><span class="house">暂无数据</span>
+ <span>淹没面积：</span><span class="house">暂无数据</span>
</div>
<div>
- <span>受灾面积：</span><span class="area">暂无数据</span>
+ <span>淹没耕地面积：</span><span class="area">暂无数据</span>
</div>
</div>
<div class="column-2">
<div>
- <span>受灾人口：</span><span class="people">暂无数据</span>
+ <span>影响人口：</span><span class="people">暂无数据</span>
</div>
<div>
- <span>房屋价值：</span><span class="money">暂无数据</span>
+ <span>淹没GDP：</span><span class="money">暂无数据</span>
</div>
</div>
</div>
@@ -53,23 +53,23 @@
<div class="evaluate-box-middle">
<div class="evaluate-table">
<table>
- <caption class="evaluate-table-caption table-caption">人口财产淹没损失表</caption>
+ <caption class="evaluate-table-caption table-caption">洪水淹没统计</caption>
<thead class="evaluate-table-thead table-thead">
<tr>
<th>
- <div>编号</div>
+ <div>水深等级</div>
</th>
<th>
- <div>受淹户数(户)</div>
+ <div>淹没面积(km²)</div>
</th>
<th>
- <div>受淹人口数量(人)</div>
+ <div>淹没耕地面积(km²)</div>
</th>
<th>
- <div>受淹居民地面积(km²)</div>
+ <div>影响人口(万人)</div>
</th>
<th>
- <div>受淹房屋价值(万元/人)</div>
+ <div>淹没区GDP(亿元)</div>
</th>
</tr>
</thead>
diff --git a/corelib/common/popup/floodImage.html b/corelib/common/popup/floodImage.html
index b6cf759..a45c86c 100644
--- a/corelib/common/popup/floodImage.html
+++ b/corelib/common/popup/floodImage.html
@@ -9,10 +9,10 @@
<body>
<div class="flood-image-box">
<div class="flood-image-top">
- <img src="img/floodAnalysisEvaluate-2.png">
+ <img src="../../../widgets/FloodAnalysis/images/floodAnalysisEvaluate-2.png">
</div>
<div class="flood-image-bottom">
- <a href="img/floodAnalysisEvaluate-2.png" download="淹没图.jpg"><button id="exportImage" type="button" >导出</button></a>
+ <a href="../../../widgets/FloodAnalysis/images/floodAnalysisEvaluate-2.png" download="淹没图.jpg"><button id="exportImage" type="button" >导出</button></a>
</div>
</div>
</body>
diff --git a/corelib/common/popup/img/close.png b/corelib/common/popup/image/close.png
similarity index 100%
rename from corelib/common/popup/img/close.png
rename to corelib/common/popup/image/close.png
Binary files differ
diff --git a/corelib/common/popup/img/data.png b/corelib/common/popup/image/data.png
similarity index 100%
rename from corelib/common/popup/img/data.png
rename to corelib/common/popup/image/data.png
Binary files differ
diff --git a/corelib/common/popup/img/floodAnalysisEvaluate-2.png b/corelib/common/popup/image/floodAnalysisEvaluate-2.png
similarity index 100%
rename from corelib/common/popup/img/floodAnalysisEvaluate-2.png
rename to corelib/common/popup/image/floodAnalysisEvaluate-2.png
Binary files differ
diff --git a/corelib/common/popup/img/floodAnalysisEvaluate.jpg b/corelib/common/popup/image/floodAnalysisEvaluate.jpg
similarity index 100%
rename from corelib/common/popup/img/floodAnalysisEvaluate.jpg
rename to corelib/common/popup/image/floodAnalysisEvaluate.jpg
Binary files differ
diff --git a/corelib/common/popup/img/rote.jpg b/corelib/common/popup/image/rote.jpg
similarity index 100%
rename from corelib/common/popup/img/rote.jpg
rename to corelib/common/popup/image/rote.jpg
Binary files differ
diff --git a/corelib/common/popup/img/sel.png b/corelib/common/popup/image/sel.png
similarity index 100%
rename from corelib/common/popup/img/sel.png
rename to corelib/common/popup/image/sel.png
Binary files differ
diff --git a/corelib/common/popup/js/evaluateAnalysis.js b/corelib/common/popup/js/evaluateAnalysis.js
index 7e0ac0f..473254b 100644
--- a/corelib/common/popup/js/evaluateAnalysis.js
+++ b/corelib/common/popup/js/evaluateAnalysis.js
@@ -239,7 +239,7 @@
}
function init() {
- $('#show-img').prop('src', 'img/floodAnalysisEvaluate-2.png')
+ $('#show-img').prop('src', 'image/floodAnalysisEvaluate-2.png')
loadSumData()
loadPagination()
}
@@ -356,7 +356,7 @@
point:data.point
}
$.ajax({
- url: 'http://192.168.0.103:82/blade-ycreal/inundationResult/save',
+ url: 'http://localhost:82/blade-ycreal/inundationResult/save',
type: 'post',
dataType: 'json',
jsonp: 'callback',
@@ -369,7 +369,9 @@
},
success: function (res) {
if (res.code == 200) {
- alert("保存成功")
+ layer.msg("保存成功")
+ }else {
+ layer.msg("保存失败")
}
}
});
diff --git a/corelib/common/popup/rain.html b/corelib/common/popup/rain.html
index 144e6ac..3fdd3ca 100644
--- a/corelib/common/popup/rain.html
+++ b/corelib/common/popup/rain.html
@@ -152,7 +152,7 @@
</div>
<div class="load-box-list">
<div class="rote-load">
- <img src="./img/rote.jpg" alt="">
+ <img src="image/rote.jpg" alt="">
<span>正在加载</span>
</div>
</div>
diff --git a/corelib/common/popup/river.html b/corelib/common/popup/river.html
index b17d9a9..5f5d9c4 100644
--- a/corelib/common/popup/river.html
+++ b/corelib/common/popup/river.html
@@ -86,7 +86,7 @@
</ul>
</div>
</div>
- </div>
+ </div>
<div class="river-pei" id="eigthRiverWeater"></div>
<div class="river-tab">
<table class="table-thead river-thead">
@@ -107,7 +107,7 @@
</tbody>
</table>
</div>
- </div>
+ </div>
</div>
<!--<!– 预报水情信息 –>
<div class="river-thr river-con none"></div>-->
@@ -115,15 +115,15 @@
<div class="river-fou river-con none">
<div class="river-fou-box">
<ul id="riverInfo">
-
+
</ul>
-
+
</div>
</div>
<div class="load-box-list">
<div class="rote-load">
- <img src="./img/rote.jpg" alt="">
+ <img src="image/rote.jpg" alt="">
<span>正在加载</span>
</div>
</div>
@@ -138,4 +138,4 @@
<script src="./js/start.js"></script>
<script src="./js/end.js"></script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/corelib/common/popup/weather.html b/corelib/common/popup/weather.html
index f95e6b1..b355644 100644
--- a/corelib/common/popup/weather.html
+++ b/corelib/common/popup/weather.html
@@ -56,7 +56,7 @@
<div class="comTbody">
<table class="table-tbody river-tbody" style="border-top: 0;">
<tbody id="reseTable">
-
+
</tbody>
</table>
</div>
@@ -80,7 +80,7 @@
</ul>
</div>
</div>
- </div>
+ </div>
<div class="river-pei" id="rserWeaterPie"></div>
<div class="river-tab">
<table class="table-thead rser-thead">
@@ -96,24 +96,24 @@
<div class="comTbody">
<table class="table-tbody rser-tbody" style="border-top: 0;">
<tbody id="reseTableBox">
-
+
</tbody>
</table>
</div>
- </div>
+ </div>
</div>
<!-- 基础信息 -->
<div class="river-fou river-con none">
<div class="river-fou-box">
<ul id="reseInfo">
-
+
</ul>
</div>
</div>
<div class="load-box-list">
<div class="rote-load">
- <img src="./img/rote.jpg" alt="">
+ <img src="image/rote.jpg" alt="">
<span>正在加载</span>
</div>
</div>
diff --git a/widgets/FloodAnalysis/Widget copy4.html b/widgets/FloodAnalysis/Widget copy4.html
new file mode 100644
index 0000000..229488a
--- /dev/null
+++ b/widgets/FloodAnalysis/Widget copy4.html
@@ -0,0 +1,156 @@
+<div>
+ <div id="tab">
+ <div class="tabul">
+ <ul>
+ <li id ="analysis-button" class="analysis-button">洪水淹没分析</li>
+ <li class="history-button">历史风险图</li>
+ </ul>
+ </div>
+ <div id="tablist" style="height: 100%">
+ <div class="flood-middle" style="height: 100%">
+ <div class="flood-analysis" style="height: 100%">
+ <div class="select-box">
+ <div>
+ <div class="hd">
+ <label for="hd-select">河段：</label>
+ <!--做模糊查询选择框时使用-->
+ <input type="text" name="hd-search" id="hd-input" class="hd-input" placeholder="请选择或输入" autocomplete='off'/>
+ <select name="hd-select-name" id="hd-select" size="10">
+ </select>
+ </div>
+ <div class="smx">
+ <label for="smx-select">水面线：</label>
+ <select id="smx-select" class="smx-select" name="smx"></select>
+ </div>
+ </div>
+ <div style="margin-top: 1%">
+ <div class="sw" style="display: flex">
+ <label for="sw-input">水位：</label>
+ <div style="display: flex;flex-direction: column;margin-left: 6px;">
+ <input id="sw-input" class="sw-input" name="word" autocomplete="off" maxlength="10" value="0" disabled />
+ <span class="tip">正数为水位上涨，负数为水位下降</span>
+ </div>
+ <input id="start-analysis-btn" class="start-analysis-btn" type="button" value="开始分析"/>
+
+ </div>
+
+ </div>
+
+ </div>
+ <div class="radio-box" style="text-align: center">
+ <input id="realtime" type="radio" name="middleRadio" value="realtime" checked='checked'>实时
+ <input id="forecast" type="radio" name="middleRadio" value="forecast">预测
+ </div>
+ <div class="analysis-box-list" id="analysis-tab1-grid" data-dojo-attach-point="analysis-tab1-grid">
+ </div>
+ <div class="flood-analysis-pagination" id="analysis-pagination"></div>
+ </div>
+ <div class="flood-history" style="height: 100%">
+ <div class="search-box">
+ <label for="search-name">名称：</label>
+ <input id="search-name" class="search-name-input" type="text" name="word" autocomplete="off"
+ maxlength="256" placeholder="请输入筛选名称"/>
+ <input id="search-button" class="search-button" type="button" value="查 询"/>
+ </div>
+ <div class="history-box-list" id="history-tab2-grid" data-dojo-attach-point="history-tab2-grid">
+ </div>
+ <div class="flood-analysis-pagination" id="history-pagination"></div>
+ </div>
+ </div>
+ </div>
+ <div class="flood-bottom">
+ </div>
+ </div>
+ <div class='dong-progress'>
+ <h2>分析结果中，请稍等...</h2>
+ <span class="container">
+ <span id="progress_bar" class="h-100P bar"></span>
+ </span>
+ </div>
+<!-- <div class="evaluate-analysis">-->
+<!-- <div class="evaluate-title">-->
+<!-- <div class="evaluate-lable">评估分析</div>-->
+<!-- <div class="evaluate-back-icon"></div>-->
+<!-- </div>-->
+<!-- <div class="evaluate-box">-->
+<!-- <div class="evaluate-box-top">-->
+<!-- <div class="flood-image-box">-->
+<!-- <div class="flood-image-top">-->
+<!-- <img id="show-img" src=../../widgets/FloodAnalysis/images/floodAnalysisEvaluate-2.png>-->
+<!-- </div>-->
+<!-- <div class="description">-->
+<!-- <!–已经与数据联动，此处可删可不删–>-->
+<!-- 该站位于古亭水园滩段，河段长4556m,预计会造成受灾户数125户，受灾人口625人，受灾面积47.999km²，房屋价值189.999万元-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- <div class="evaluate-box-middle">-->
+<!-- <div style="display: flex">-->
+<!-- <div class="evaluate-middle-first">-->
+<!-- <div class="column-1">-->
+<!-- <div>-->
+<!-- <span>淹没面积：</span><span class="house">暂无数据</span>-->
+<!-- </div>-->
+<!-- <div>-->
+<!-- <span>淹没耕地面积：</span><span class="area">暂无数据</span>-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- <div class="column-2">-->
+<!-- <div>-->
+<!-- <span>影响人口：</span><span class="people">暂无数据</span>-->
+<!-- </div>-->
+<!-- <div>-->
+<!-- <span>淹没GDP：</span><span class="money">暂无数据</span>-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- <div>-->
+<!-- <label>-->
+<!-- <input id="list" class="save-btn" type="button" value="列表"/>-->
+<!-- </label>-->
+<!-- <label>-->
+<!-- <input id="echarts" class="save-btn" type="button" value="图表"/>-->
+<!-- </label>-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- <div class="evaluate-middle-second">-->
+
+<!-- <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>淹没面积(km²)</div>-->
+<!-- </th>-->
+<!-- <th>-->
+<!-- <div>淹没耕地面积(km²)</div>-->
+<!-- </th>-->
+<!-- <th>-->
+<!-- <div>影响人口(万人)</div>-->
+<!-- </th>-->
+<!-- <th>-->
+<!-- <div>淹没区GDP(亿元)</div>-->
+<!-- </th>-->
+<!-- </tr>-->
+<!-- </thead>-->
+<!-- <tbody id="evaluate-tbody" class="table-tbody evaluate-tbody"></tbody>-->
+<!-- </table>-->
+<!-- <div class="flood-analysis-pagination Pagination" id="evaluate-pagination"></div>-->
+<!-- </div>-->
+<!-- <div class="evaluate-echarts" id="evaluate-echarts"></div>-->
+
+<!-- </div>-->
+<!-- </div>-->
+<!-- <div class="evaluate-bottom">-->
+<!-- <input id="export-img" class="export-img" type="button" value="导出成果图"/>-->
+<!-- <input id="save-btn" class="save-btn" type="button" value="保存"/>-->
+<!-- </div>-->
+<!-- </div>-->
+
+<!-- </div>-->
+
+</div>
diff --git a/widgets/FloodAnalysis/Widget copy4.js b/widgets/FloodAnalysis/Widget copy4.js
new file mode 100644
index 0000000..ee9aa84
--- /dev/null
+++ b/widgets/FloodAnalysis/Widget copy4.js
@@ -0,0 +1,863 @@
+///////////////////////////////////////////////////////////////////////////
+// Copyright © 2022 guoshilong. All Rights Reserved.
+// 模块描述:洪水淹没分析
+///////////////////////////////////////////////////////////////////////////
+define(['dojo/_base/declare',
+ 'dojo/_base/lang',
+ 'dojo/_base/array',
+ 'dojo/_base/html',
+ "dojo/topic",
+ 'jimu/BaseWidget',
+ 'dojo/on',
+ 'dstore/Memory',
+ 'dstore/Trackable',
+ 'dgrid/Grid',
+ 'dgrid/Keyboard',
+ 'dgrid/Selection',
+ 'dgrid/Editor',
+ 'dstore/RequestMemory',
+ 'dgrid/test/data/createSyncStore',
+ "libs/echarts/v4/echarts.min",
+ 'libs/layer/layer.js',
+ 'libs/turf/turf.min.js'], function (declare, lang, array, html, topic, BaseWidget, on, Memory, Trackable, Grid, Keyboard, Selection,Editor, RequestMemory, createSyncStore, echarts, layer, turf) {
+ return declare([BaseWidget], {
+ baseClass: 'jimu-widget-FloodAnalysis',
+ name: 'FloodAnalysis',
+ //渲染的点位
+ pointEntities: [],
+ //渲染的线
+ drawingPolyline:null,
+ //html元素
+ analysisBtn: null,
+ historyBtn: null,
+ divFloodAnalysis: null,
+ divFloodHistory: null,
+ hdSelect: null,
+ smxSelect: null,
+ //河段下拉列表
+ hdDataList: [],
+ //水面线下拉列表
+ smxDataList:[],
+ //洪水分析表格数据
+ analysisTableList: [],
+ dgridSelectEvent:null,
+ currentSelectHistoryData:null,
+ //历史风险图表格数据
+ historyTableList: [
+ {name: "5年洪水淹没图"},
+ {name: "10年洪水淹没图"},
+ {name: "15年洪水淹没图"},
+ ],
+ //当前选中的河段
+ currentHd: null,
+ //当前选中的水面线
+ currentSmxcode: "",
+ //水文站最近的点
+ currentNearPoint:null,
+ //收起框打开状态
+ isOpen: true,
+ //api接口
+ url: {
+ riverwaySelectName: "http://192.168.0.207:82/blade-ycreal/riverway/selectName",
+ waterlineSelectName: "http://192.168.0.207:82/blade-ycreal/waterline/selectName",
+ childpage: "http://192.168.0.207:82/blade-ycreal/water/childpage",
+ getCzByGlCodeByGlQdj: "http://192.168.0.207:82/blade-ycreal/waterline/getCzByGlCodeByGlQdj",
+ getHistoryList: "http://192.168.0.103:82/blade-ycreal/inundationResult/list",
+ saveHistoryData: "http://192.168.0.103:82/blade-ycreal/inundationResult/save",
+ getCoordinatesMinQdj: "http://192.168.0.207:82/blade-ycreal/water/getCoordinatesMinQdj",
+ },
+ evaluateData: [
+ {
+ name: "会昌县",
+ house: 35,
+ population: 175,
+ area: 12.888,
+ value: 50.123
+ },
+ {
+ name: "于都县",
+ house: 70,
+ population: 350,
+ area: 24.456,
+ value: 100.456
+ },
+ {
+ name: "赣县",
+ house: 20,
+ population: 100,
+ area: 8.551,
+ value: 39.789
+ }
+ ],
+ startup: function startup() {
+ var self = this
+ this.bindHtmlElement()
+ //实时、预测改变事件
+ $('input[type=radio][name=middleRadio]').change(function () {
+ if (this.value == "realtime") {
+ $("#sw-input").prop('disabled', true);
+ } else {
+ $("#sw-input").prop('disabled', false);
+ }
+ if ($('#smx-select').val())
+ self.getPointData($('#smx-select').val())
+ })
+
+ //开始分析按钮点击事件
+ $('#start-analysis-btn').click(function () {
+ if (self.currentHd && self.currentSmxcode) {
+ self.drawWater('analysis')
+ } else {
+ layer.msg("请先选择河段和水面线")
+ }
+ })
+
+ //洪水淹没分析按钮点击事件
+ this.analysisBtn.click(function () {
+ self.analysisBtn.addClass('choose-button')
+ self.analysisBtn.removeClass('unchoose-button')
+ self.historyBtn.addClass('unchoose-button')
+ self.historyBtn.removeClass('choose-button')
+ self.divFloodHistory.hide()
+ self.divFloodAnalysis.show()
+ $('#history-pagination').hide()
+ if (self.currentHd){
+ $('#analysis-pagination').show()
+ }
+ })
+
+ //历史风险图按钮点击事件
+ this.historyBtn.click(function () {
+ self.historyBtn.addClass('choose-button')
+ self.historyBtn.removeClass('unchoose-button')
+ self.analysisBtn.addClass('unchoose-button')
+ self.analysisBtn.removeClass('choose-button')
+ self.divFloodAnalysis.hide()
+ self.divFloodHistory.show()
+ $('#analysis-pagination').hide()
+ $('#history-pagination').show()
+
+ //获取历史数据
+ self.getHistoryList()
+
+ })
+
+ //河段输入框聚焦、失焦、输入事件
+ $('#hd-input').focus(function () {
+ $("#hd-select").show()
+ })
+ $('#hd-input').blur(function () {
+ //隐藏域触发改变事件需要手动触发
+ // $("#hd-select").val().change()
+ setTimeout(function(){//有bug 需要延迟执行隐藏
+ $("#hd-select").hide()
+ },300)
+ })
+ // 河段输入事件
+ $('#hd-input').on("input", function () {
+ var searchString = $('#hd-input').val()
+ var filterArray = self.hdDataList.filter(e => {
+ return e.riverway.indexOf(searchString) != -1
+ })
+ self.hdSelect.find("option").remove();//添加新值 删除旧值
+ filterArray.forEach(e => {
+ let v = ''
+ if (e.stnm) {
+ v += '-' + e.stnm.trim() + '站'
+ }
+ if (e.gl_qdj) {
+ v += '-起点距' + e.gl_qdj
+ }
+ self.hdSelect.append("<option value='" + JSON.stringify(e) + "'>" + e.riverway + v + "</option>");
+ })
+ })
+
+ //水位输入事件
+ $('#sw-input').on("input", function () {
+ self.getYcSub()
+ })
+
+ //河段选择框改变事件
+ this.hdSelect.change(function () {
+ $("#hd-input").val($(this).find("option:selected").text());
+ var selected = JSON.parse($(this).val())
+ self.currentHd = selected
+ self.getSmxData(selected.river_code, selected.default_smx)
+ self.getMin(selected.default_smx,selected.gl_qdj)
+ if (self.waterEntity)
+ self.map.entities.remove(self.waterEntity)
+ //地图定位
+ self.map.camera.flyTo({
+ destination: Cesium.Cartesian3.fromDegrees(selected.river_origin, selected.qd_lat, 50000),
+ });
+ self.hdSelect.hide()
+ })
+
+ //水面线选择框改变事件
+ this.smxSelect.change(function () {
+ var selected = $(this).val()
+ self.getPointData(selected)
+ })
+
+ //水位输入框按下回车事件
+ $('#sw-input').keypress(function (event) {
+ if (event.which == 13) {
+ self.analysisTableList.forEach(e => {
+ e.sw = self.calculateSw(e.water, sw)
+ })
+ self.loadPagination(self.analysisTableList, "analysis-pagination")
+ }
+ })
+
+ //搜索按钮点击事件
+ $('#search-button').click(function () {
+ let searchName = $('#search-name').val()
+
+ let filterArray = self.historyTableList.filter(e => {
+ return e.name.indexOf(searchName) != -1
+ })
+ self.loadPagination(filterArray, "history-pagination")
+ })
+
+ $('#save-button').click(function () {
+ self.confirmPopup()
+ // self.floodAnalysisPopup()
+ })
+ },
+
+ onOpen: function onOpen() {
+ this.init()
+ //面板打开的时候触发 （when open this panel trigger）
+ this.map.scene.globe.baseColor = Cesium.Color.BLACK;
+
+ //切换底图
+ $($('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.setView({
+ destination: Cesium.Cartesian3.fromDegrees(116.016905, 25.884684, 10000),
+ });
+ },
+
+ onClose: function onClose() {
+ //面板关闭的时候触发 （when this panel is closed trigger）
+ this.deleteEntities(this.pointEntities)
+ if (this.drawingPolyline)
+ this.map.entities.remove(this.drawingPolyline);
+
+ if (this.waterEntity)
+ this.map.entities.remove(this.waterEntity)
+
+ this.map.scene.globe.baseColor = Cesium.Color.WHITE;
+
+ $('#hd-select option').remove()
+ $('#smx-select option').remove()
+ $('#sw-input').val("")
+ $('#hd-input').val("")
+ //清空表格数据
+ $('.analysis-box-list').empty();
+ $('.history-box-list').empty();
+
+ $('#analysis-pagination').hide()
+
+ this.analysisTableList = []
+ },
+
+ onMinimize: function onMinimize() {
+ this.resize();
+ },
+
+ onMaximize: function onMaximize() {
+ this.resize();
+ },
+
+ resize: function resize() {
+ },
+
+ destroy: function destroy() {
+ //销毁的时候触发
+ //todo
+ //do something before this func
+ this.inherited(arguments);
+ },
+
+ //绑定html元素，方便操作
+ bindHtmlElement: function () {
+ this.analysisBtn = $('.analysis-button')
+ this.historyBtn = $('.history-button')
+ this.divFloodAnalysis = $('.flood-analysis')
+ this.divFloodHistory = $('.flood-history')
+ this.hdSelect = $('#hd-select')
+ this.smxSelect = $('#smx-select')
+ },
+
+ //初始化
+ init() {
+ //重置html元素状态
+ this.divFloodHistory.hide()
+ this.divFloodAnalysis.show()
+ $("input[type=radio][name=middleRadio][value='realtime']").prop('checked', 'checked')
+ this.hdSelect.hide()
+ $('.fold-btn').addClass('open')
+ $('.fold-btn').removeClass('close')
+ $('.content').show()
+ $("#sw-input").prop('disabled', true);
+ $('#search-name').val("")
+ this.isOpen = true
+
+ this.analysisBtn.addClass('choose-button')
+ this.analysisBtn.removeClass('unchoose-button')
+ this.historyBtn.removeClass('choose-button')
+ this.historyBtn.addClass('unchoose-button')
+
+ this.currentHd = null
+ this.currentSmxcode = ""
+ //获取河段数据
+ this.getHdData()
+
+ },
+
+ //获取河段下拉数据
+ getHdData() {
+ const self = this
+ $.ajax({
+ url: self.url.riverwaySelectName,
+ type: 'post',
+ dataType: 'json',
+ jsonp: 'callback',
+ jsonpCallback: 'data',
+ data: {},
+ success: function (res) {
+ let data = res.data
+ self.hdDataList = data
+ self.hdSelect.find("option").remove();//添加新值 删除旧值
+ data.forEach(e => {
+ let v = ''
+ if (e.stnm) {
+ v += '-' + e.stnm.trim() + '站'
+ }
+ if (e.gl_qdj) {
+ v += '-起点距' + e.gl_qdj
+ }
+ self.hdSelect.append("<option value='" + JSON.stringify(e) + "'>" + e.riverway + v + "</option>");
+ })
+ }
+ });
+ },
+
+ //获取水面线数据
+ getSmxData(hdid, defaultId) {
+ const self = this
+ $.ajax({
+ url: self.url.waterlineSelectName,
+ type: 'post',
+ dataType: 'json',
+ jsonp: 'callback',
+ jsonpCallback: 'data',
+ data: {
+ hdid: hdid
+ },
+ success: function (res) {
+ let data = res.data
+ self.smxDataList = data
+ self.smxSelect.find("option").remove();//添加新值 删除旧值
+ if (data.length <= 0) {
+ $('#flood-tbody').html("")
+ $('#analysis-pagination').hide()
+ }
+
+ data.forEach(e => {
+
+ self.smxSelect.append("<option value=" + e.smxcode + ">" + e.waterline + "</option>");
+
+ if (e.smxcode == defaultId) {
+ $("#smx-select option[value=" + e.smxcode + "] ").attr("selected", true)
+ self.smxSelect.trigger("change")
+ }
+ })
+
+ }
+ });
+ },
+
+ //获取点数据
+ getPointData(smxcode) {
+ this.currentSmxcode = smxcode
+ const self = this
+ $.ajax({
+ url: self.url.childpage,
+ type: 'get',
+ dataType: 'json',
+ jsonp: 'callback',
+ jsonpCallback: 'data',
+ data: {
+ parentId: smxcode,
+ size: 9999999
+ },
+ success: function (res) {
+ if (res.code == 200) {
+ let data = res.data.records
+ self.createPointAndLine(data,self.pointEntities)
+ self.analysisTableList = data
+ self.getSub(self.currentHd.id, self.currentSmxcode)
+ }
+ }
+ });
+ },
+
+ //创建点线
+ createPointAndLine(data,pointEntities){
+ this.deleteEntities(pointEntities)
+ // 水面线连线
+ let cartesians = []
+ for (let i = 0; i < data.length; i++) {
+ cartesians.push(new Cesium.Cartesian3.fromDegrees(data[i].lng, data[i].lat,data[i].sw))
+ let temp = this.map.entities.add({
+ position: Cesium.Cartesian3.fromDegrees(data[i].lng, data[i].lat,data[i].sw),
+ point: {
+ color: Cesium.Color.RED,
+ pixelSize: 11,
+ //防止地形遮挡住点
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
+ },
+ });
+ // 清空使用
+ pointEntities.push(temp)
+ }
+
+ // 先清空 后画线
+ if (this.drawingPolyline){
+ this.map.entities.remove(this.drawingPolyline);
+ }
+ let lineOpts = {
+ polyline: {
+ positions: cartesians,
+ clampToGround: true,
+ width: 3,
+ color: "#279a9a"
+ }
+ };
+ // 画线
+ this.drawingPolyline = this.map.entities.add(lineOpts);
+
+ },
+
+ //获取历史风险图数据列表
+ getHistoryList() {
+ const self = this
+ $.ajax({
+ url: self.url.getHistoryList,
+ type: 'get',
+ dataType: 'json',
+ jsonp: 'callback',
+ jsonpCallback: 'data',
+ data: {
+ name: "",
+ pageSize:999999999,
+ },
+ success: function (res) {
+ if (res.code == 200) {
+ let data = res.data.records
+ data.forEach(e=>{
+ e.smxVal = JSON.parse(e.smxVal)
+ })
+ self.historyTableList = data
+ self.loadPagination(data,"history-pagination")
+ }
+ }
+ });
+ },
+
+ /**
+ * 加载分页器
+ * @param tableData 需要加载的所有数据
+ * @param pageElementId 分页html的id
+ * @param tableElementId tbody id
+ */
+ loadPagination(tableData, pageElementId) {
+ if (tableData.length <= 0 && pageElementId == "analysis-pagination") {
+ $('#analysis-pagination').hide()
+ }
+
+ if (tableData.length <= 0 && pageElementId == "history-pagination") {
+ $('#history-pagination').hide()
+ }
+ let pageSize = 10
+ var count = Math.ceil(tableData.length / pageSize);
+ var self = this
+ $('#' + pageElementId).pagination({
+ mode: 'fixed',
+ jump: true,
+ coping: false,
+ pageCount: count,
+ callback: function (index) {
+ var listdata = [];
+ //显示页数
+ var index = (index.getCurrent() - 1) * pageSize;
+ for (var i = index; i < index + pageSize; i++) {
+ listdata.push(tableData[i]);
+ if (i == tableData.length - 1) {
+ break;
+ }
+ }
+
+ pageElementId == "analysis-pagination" ? self.createList(listdata,"洪水淹没分析") : self.createList(listdata,"历史风险图")
+
+ }
+ });
+
+ //首次加载前11条数据
+ var startData = [];
+ if (tableData.length > pageSize) {
+ for (var i = 0; i < pageSize; i++) {
+ startData.push(tableData[i]);
+ }
+ } else {
+ for (var i = 0; i < tableData.length; i++) {
+ startData.push(tableData[i]);
+ }
+ }
+ pageElementId == "analysis-pagination" ? self.createList(startData,"洪水淹没分析") : self.createList(startData,"历史风险图")
+ },
+
+ /**
+ * 计算水位
+ * @param waterline 水面线高度
+ * @param number 差值
+ */
+ calculateSw(waterline, sub) {
+ let sw = this.floatAdd(Number(waterline), Number(sub))
+ return sw
+ },
+
+ //预测水位计算
+ getYcSub() {
+ const self = this
+ self.analysisTableList.forEach(e => {
+ e.lng = Number(e.lng).toFixed(4)
+ e.lat = Number(e.lat).toFixed(4)
+ e.sw = self.calculateSw(e.water, $('#sw-input').val())
+
+ e.water = Number(e.water).toFixed(3)
+ e.sw = Number(e.sw).toFixed(3)
+ })
+
+ self.loadPagination(self.analysisTableList, "analysis-pagination")
+ },
+
+ //实时水位计算
+ getSub(hdid, smxcode) {
+ const self = this
+ if ($('input[name=middleRadio]:checked').val() == 'realtime') {
+ $.ajax({
+ url: self.url.getCzByGlCodeByGlQdj,
+ type: 'get',
+ dataType: 'json',
+ jsonp: 'callback',
+ jsonpCallback: 'data',
+ data: {
+ hdId: hdid,
+ smxcode: smxcode
+ },
+ success: function (res) {
+ if (res.code == 200) {
+ let sub = res.data
+ $('#sw-input').val(sub)
+ self.analysisTableList.forEach(e => {
+ e.lng = Number(e.lng).toFixed(4)
+ e.lat = Number(e.lat).toFixed(4)
+ e.sw = self.calculateSw(e.water, sub)
+
+ e.water = Number(e.water).toFixed(3)
+ e.sw = Number(e.sw).toFixed(3)
+ })
+
+ self.loadPagination(self.analysisTableList, "analysis-pagination")
+ }
+ }
+ });
+ } else {
+ self.getYcSub()
+ }
+
+ },
+
+ //获取最接近水文站的值
+ getMin(smxcode, glQdj) {
+ const self = this
+ $.ajax({
+ url: self.url.getCoordinatesMinQdj,
+ type: 'get',
+ dataType: 'json',
+ jsonp: 'callback',
+ jsonpCallback: 'data',
+ data: {
+ smxcode:smxcode,
+ glQdj:glQdj
+ },
+ success: function (res) {
+ if (res.code == 200) {
+ self.currentNearPoint = res.data
+ }
+ }
+ });
+ },
+
+ //保存历史风险图
+ saveHistoryData() {
+ const self = this
+ $.ajax({
+ url: self.url.saveHistoryData,
+ type: 'get',
+ dataType: 'json',
+ jsonp: 'callback',
+ jsonpCallback: 'data',
+ data: {},
+ success: function (res) {
+ if (res.code == 200) {
+ self.getHistoryList()
+ }
+ }
+ });
+ },
+
+ //防止出现两个小数相加出现很多0的情况
+ floatAdd(arg1, arg2) {
+ var r1, r2, m;
+ try {
+ r1 = arg1.toString().split(".")[1].length;
+ } catch (e) {
+ r1 = 0;
+ }
+ try {
+ r2 = arg2.toString().split(".")[1].length;
+ } catch (e) {
+ r2 = 0;
+ }
+ m = Math.pow(10, Math.max(r1, r2));
+ return (arg1 * m + arg2 * m) / m;
+ },
+
+ //删除地图上的标注点位
+ deleteEntities(entities) {
+ entities.forEach(e => {
+ this.map.entities.remove(e)
+ })
+ entities = []
+ },
+
+ //评估分析弹窗
+ evaluatePopup(flag) {
+ var self = this
+ let selectSmx = this.smxDataList.filter(e=>{
+ return e.smxcode == this.currentSmxcode
+ })
+
+ let isAnalysis = flag == 'analysis'?true:false
+
+ let parentData = {}
+
+ if (isAnalysis){
+ parentData.data = this.evaluateData
+ parentData.hd = this.currentHd
+ parentData.smx = selectSmx[0]
+ parentData.sw = $('#sw-input').val()
+ parentData.point = this.analysisTableList
+ }else {
+ parentData.data = this.evaluateData
+ parentData.hd = this.currentSelectHistoryData.smxVal.hd
+ parentData.smx = this.currentSelectHistoryData.smxVal.smx
+ parentData.sw = this.currentSelectHistoryData.smxVal.sw
+ parentData.point = this.currentSelectHistoryData.smxVal.point
+ }
+
+
+ var url = './corelib/common/popup/evaluateAnalysis.html'
+ var top = ($(window).height() - 600) / 2;
+ var left = ($(window).width() - 1300 - 340) / 2 + 340;
+ layer.open({
+ title: '评估分析',
+ type: 2,
+ maxmin: false, //开启最大化最小化按钮
+ area: ['1500px', '700px'],
+ skin: 'floodAnalysis',
+ offset: 'auto',
+ content: url + "?parentData=" + encodeURIComponent(JSON.stringify(parentData)),//使用encodeURIComponent转码，避免中文字符乱码，避免url截取错误
+ id: "floodAnalysisLayer",
+ closeBtn: 1,
+ success:function (layero,index) {
+ //绑定父子之间的关系，用于数据传递，缺少则无法传递
+ var body = layer.getChildFrame("body", index);
+ //得到iframe页的窗口对象
+ var iframeWin = window[layero.find('iframe')[0]['name']];
+
+ if (isAnalysis){
+ iframeWin.$('#save-btn').show()
+ }else {
+ iframeWin.$('#save-btn').hide()
+ }
+ }
+ });
+ },
+
+ //http://dgrid.io/tutorials/1.0/hello_dgrid/ 创建表格
+ createList: function (dataList, txt) {
+ const self = this
+ var CustomGrid = declare([Grid, Keyboard, Selection,Editor]);
+ var column, tab, moon, dauy;
+ var formatter = function (value,object) {
+ if (self.currentNearPoint.id == object.id) {
+ return '<span style="color:red">' + value + '</span>'
+ } else {
+ return value
+ }
+ }
+ if (txt == "洪水淹没分析") {
+ $('.analysis-box-list').empty();
+ column = {
+ location: {
+ label:'位置',
+ formatter:formatter
+ },
+ origin: {
+ label:'起点距',
+ formatter:formatter
+ },
+ water: {
+ label:'水面线',
+ formatter:formatter
+ },
+ sw: {
+ label:'水位',
+ formatter:formatter
+ },
+ lng:{
+ label:'经度',
+ formatter:formatter
+ },
+ lat:{
+ label:'纬度',
+ formatter:formatter
+ },
+ }
+ tab = 'analysis-tab1-grid'
+ } else if (txt == "历史风险图") {
+ $('.history-box-list').empty();
+ column = {
+ // radio:{ label: "", field: "radio", editor: 'radio' },
+ name: '名称',
+ }
+ tab = 'history-tab2-grid'
+ }
+ var grid = new CustomGrid({
+ columns: column,
+ selectionMode: 'single', // for Selection; only select a single row at a time
+ cellNavigation: false, // for Keyboard; allow only row-level keyboard navigation
+ }, tab);
+ grid.startup();
+
+ //change事件
+ // grid.on("dgrid-datachange", function(evt){
+ // //获取行数据
+ // let data = evt.cell.row.data
+ // });
+
+ if (this.dgridSelectEvent){
+ this.dgridSelectEvent.remove()
+ }
+
+ this.dgridSelectEvent = grid.on("dgrid-select", function(evt){
+ //获取行数据
+ let data = evt.rows[0].data
+ self.currentSelectHistoryData = data
+ if (data.smxVal.point.length>0){
+
+ self.deleteEntities(self.pointEntities)
+ if (self.drawingPolyline)
+ self.map.entities.remove(self.drawingPolyline);
+
+ if (self.waterEntity)
+ self.map.entities.remove(self.waterEntity)
+
+ $('#sw-input').val("")
+ $('#hd-input').val("")
+ $('#smx-select option').remove()
+ //清空表格数据
+ $('.analysis-box-list').empty();
+ $('#analysis-pagination').hide()
+
+ self.analysisTableList = []
+
+ self.createPointAndLine(data.smxVal.point,self.pointEntities)
+
+ self.map.camera.flyTo({
+ destination: Cesium.Cartesian3.fromDegrees(data.lon, data.lat, 50000),
+ });
+
+ self.drawWater('history')
+ }
+
+ });
+ grid.renderArray(dataList);
+ },
+
+ // 洪水淹没效果
+ drawWater(flag) {
+ //地图定位
+ // this.map.camera.flyTo({
+ // destination: Cesium.Cartesian3.fromDegrees(115.93791, 25.989108, 5000),
+ // });
+ //显示进度条
+ $('.dong-progress .container #progress_bar').width(0);
+ $('.dong-progress').stop().hide();
+
+ this.showWater = true
+ this.waterEntity && this.map.entities.remove(this.waterEntity)
+ const waterCoord = [116.0072, 25.9058, 100, 116.0546, 25.9012, 100 , 116.0457, 25.8611, 100, 115.9859, 25.8740 ,100]
+ let startHeight = 169
+ const targetHeight = 200
+ this.waterEntity = this.map.entities.add({
+ polygon: {
+ hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(waterCoord),
+ material: Cesium.Color.fromBytes(64, 157, 253, 200),
+ perPositionHeight: true,
+ extrudedHeight: new Cesium.CallbackProperty(() => { return startHeight }, false)
+ }
+ })
+ const waterInterval = setInterval(() => {
+ if (startHeight < targetHeight) {
+ startHeight += 5
+ $('.dong-progress').stop().show();
+ // 总长度
+ var totalWidth = $('.dong-progress .container').width();
+ // 过度长度
+ var excessiveWidth = totalWidth / 100;
+ var watchWidth = 0;
+ // 进度条的定时器
+ var proTime = setInterval(function () {
+ watchWidth += excessiveWidth;
+ if (watchWidth > totalWidth) {
+ watchWidth = totalWidth;
+ }
+ $('.dong-progress .container #progress_bar').width(watchWidth);
+ }, 22);
+ if (startHeight >= targetHeight) {
+ startHeight = targetHeight
+ clearInterval(waterInterval)
+ clearInterval(proTime);
+ //隐藏进度条
+ $('.dong-progress .container #progress_bar').width(0);
+ $('.dong-progress').stop().hide();
+ this.showWater = false
+ this.evaluatePopup(flag)
+ }
+ // 使用该方式会闪烁，改用 Cesium.CallbackProperty 平滑
+ // this.waterEntity.polygon.extrudedHeight = startHeight
+ }
+ }, 1000*0.5)
+ }
+
+ });
+});
diff --git a/widgets/FloodAnalysis/Widget.html b/widgets/FloodAnalysis/Widget.html
index 73adac5..17d74b9 100644
--- a/widgets/FloodAnalysis/Widget.html
+++ b/widgets/FloodAnalysis/Widget.html
@@ -61,4 +61,10 @@
<div class="flood-bottom">
</div>
</div>
+ <div class='dong-progress'>
+ <h2>分析结果中，请稍等...</h2>
+ <span class="container">
+ <span id="progress_bar" class="h-100P bar"></span>
+ </span>
+ </div>
</div>
diff --git a/widgets/FloodAnalysis/Widget.js b/widgets/FloodAnalysis/Widget.js
index 0811815..a1d1b4c 100644
--- a/widgets/FloodAnalysis/Widget.js
+++ b/widgets/FloodAnalysis/Widget.js
@@ -41,6 +41,7 @@
//洪水分析表格数据
analysisTableList: [],
dgridSelectEvent:null,
+ currentSelectHistoryData:null,
//历史风险图表格数据
historyTableList: [
{name: "5年洪水淹没图"},
@@ -57,31 +58,31 @@
isOpen: true,
//api接口
url: {
- riverwaySelectName: "http://192.168.0.207:82/blade-ycreal/riverway/selectName",
- waterlineSelectName: "http://192.168.0.207:82/blade-ycreal/waterline/selectName",
- childpage: "http://192.168.0.207:82/blade-ycreal/water/childpage",
- getCzByGlCodeByGlQdj: "http://192.168.0.207:82/blade-ycreal/waterline/getCzByGlCodeByGlQdj",
- getHistoryList: "http://192.168.0.103:82/blade-ycreal/inundationResult/list",
- saveHistoryData: "http://192.168.0.103:82/blade-ycreal/inundationResult/save",
- getCoordinatesMinQdj: "http://192.168.0.207:82/blade-ycreal/water/getCoordinatesMinQdj",
+ riverwaySelectName: "http://localhost:82/blade-ycreal/riverway/selectName",
+ waterlineSelectName: "http://localhost:82/blade-ycreal/waterline/selectName",
+ childpage: "http://localhost:82/blade-ycreal/water/childpage",
+ getCzByGlCodeByGlQdj: "http://localhost:82/blade-ycreal/waterline/getCzByGlCodeByGlQdj",
+ getHistoryList: "http://localhost:82/blade-ycreal/inundationResult/list",
+ saveHistoryData: "http://localhost:82/blade-ycreal/inundationResult/save",
+ getCoordinatesMinQdj: "http://localhost:82/blade-ycreal/water/getCoordinatesMinQdj",
},
evaluateData: [
{
- name: "会昌县",
+ name: "<0.5",
house: 35,
population: 175,
area: 12.888,
value: 50.123
},
{
- name: "于都县",
+ name: "1.0-2.0",
house: 70,
population: 350,
area: 24.456,
value: 100.456
},
{
- name: "赣县",
+ name: "2.0-3.0",
house: 20,
population: 100,
area: 8.551,
@@ -91,7 +92,6 @@
startup: function startup() {
var self = this
this.bindHtmlElement()
-
//实时、预测改变事件
$('input[type=radio][name=middleRadio]').change(function () {
if (this.value == "realtime") {
@@ -106,10 +106,9 @@
//开始分析按钮点击事件
$('#start-analysis-btn').click(function () {
if (self.currentHd && self.currentSmxcode) {
- // self.evaluatePopup()
- self.drawWater()
+ self.drawWater('analysis')
} else {
- alert("请先选择河段和水面线")
+ layer.msg("请先选择河段和水面线")
}
})
@@ -140,6 +139,7 @@
//获取历史数据
self.getHistoryList()
+
})
//河段输入框聚焦、失焦、输入事件
@@ -184,6 +184,8 @@
self.currentHd = selected
self.getSmxData(selected.river_code, selected.default_smx)
self.getMin(selected.default_smx,selected.gl_qdj)
+ if (self.waterEntity)
+ self.map.entities.remove(self.waterEntity)
//地图定位
self.map.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(selected.river_origin, selected.qd_lat, 50000),
@@ -647,38 +649,56 @@
},
//评估分析弹窗
- evaluatePopup() {
+ evaluatePopup(flag) {
var self = this
let selectSmx = this.smxDataList.filter(e=>{
return e.smxcode == this.currentSmxcode
})
+ let isAnalysis = flag == 'analysis'?true:false
+
let parentData = {}
- parentData.data = this.evaluateData
- parentData.hd = this.currentHd
- parentData.smx = selectSmx[0]
- parentData.sw = $('#sw-input').val()
- parentData.point = this.analysisTableList
- // let data = this.evaluateData
- // let dataStr = JSON.stringify(data)
- // let hdStr = JSON.stringify(this.currentHd)
+ if (isAnalysis){
+ parentData.data = this.evaluateData
+ parentData.hd = this.currentHd
+ parentData.smx = selectSmx[0]
+ parentData.sw = $('#sw-input').val()
+ parentData.point = this.analysisTableList
+ }else {
+ parentData.data = this.evaluateData
+ parentData.hd = this.currentSelectHistoryData.smxVal.hd
+ parentData.smx = this.currentSelectHistoryData.smxVal.smx
+ parentData.sw = this.currentSelectHistoryData.smxVal.sw
+ parentData.point = this.currentSelectHistoryData.smxVal.point
+ }
- // let smxStr = JSON.stringify(selectSmx[0])
var url = './corelib/common/popup/evaluateAnalysis.html'
- var top = ($(window).height() - 600) / 2;
- var left = ($(window).width() - 1300 - 340) / 2 + 340;
+ var top = ($(window).height() - 550) / 2;
+ var left = ($(window).width() - 400 - 340) / 2 + 340;
layer.open({
title: '评估分析',
type: 2,
maxmin: false, //开启最大化最小化按钮
- area: ['1500px', '700px'],
+ area: ['900px', '600px'],
skin: 'floodAnalysis',
- offset: 'auto',
+ offset: [top,left],
content: url + "?parentData=" + encodeURIComponent(JSON.stringify(parentData)),//使用encodeURIComponent转码，避免中文字符乱码，避免url截取错误
id: "floodAnalysisLayer",
closeBtn: 1,
+ success:function (layero,index) {
+ //绑定父子之间的关系，用于数据传递，缺少则无法传递
+ var body = layer.getChildFrame("body", index);
+ //得到iframe页的窗口对象
+ var iframeWin = window[layero.find('iframe')[0]['name']];
+
+ if (isAnalysis){
+ iframeWin.$('#save-btn').show()
+ }else {
+ iframeWin.$('#save-btn').hide()
+ }
+ }
});
},
@@ -751,15 +771,32 @@
this.dgridSelectEvent = grid.on("dgrid-select", function(evt){
//获取行数据
let data = evt.rows[0].data
-
+ self.currentSelectHistoryData = data
if (data.smxVal.point.length>0){
+
+ self.deleteEntities(self.pointEntities)
+ if (self.drawingPolyline)
+ self.map.entities.remove(self.drawingPolyline);
+
+ if (self.waterEntity)
+ self.map.entities.remove(self.waterEntity)
+
+ $('#sw-input').val("")
+ $('#hd-input').val("")
+ $('#smx-select option').remove()
+ //清空表格数据
+ $('.analysis-box-list').empty();
+ $('#analysis-pagination').hide()
+
+ self.analysisTableList = []
+
self.createPointAndLine(data.smxVal.point,self.pointEntities)
self.map.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(data.lon, data.lat, 50000),
});
- self.drawWater()
+ self.drawWater('history')
}
});
@@ -767,11 +804,15 @@
},
// 洪水淹没效果
- drawWater() {
+ drawWater(flag) {
//地图定位
// this.map.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(115.93791, 25.989108, 5000),
// });
+ //显示进度条
+ $('.dong-progress .container #progress_bar').width(0);
+ $('.dong-progress').stop().hide();
+
this.showWater = true
this.waterEntity && this.map.entities.remove(this.waterEntity)
const waterCoord = [116.0072, 25.9058, 100, 116.0546, 25.9012, 100 , 116.0457, 25.8611, 100, 115.9859, 25.8740 ,100]
@@ -785,14 +826,37 @@
extrudedHeight: new Cesium.CallbackProperty(() => { return startHeight }, false)
}
})
+ $('.dong-progress').stop().show();
+ // 总长度
+ var totalWidth = $('.dong-progress .container').width();
+ // 过度长度
+ var excessiveWidth = totalWidth / 100;
+ var watchWidth = 0;
+ // 进度条的定时器
+ var proTime = setInterval(function () {
+ watchWidth += excessiveWidth;
+ if (watchWidth > totalWidth) {
+ watchWidth = totalWidth;
+ }
+ $('.dong-progress .container #progress_bar').width(watchWidth);
+ }, 22);
const waterInterval = setInterval(() => {
if (startHeight < targetHeight) {
startHeight += 5
+
if (startHeight >= targetHeight) {
startHeight = targetHeight
clearInterval(waterInterval)
+
+ if (watchWidth < totalWidth) {
+ watchWidth = totalWidth;
+ }
+ clearInterval(proTime);
+ //隐藏进度条
+ $('.dong-progress .container #progress_bar').width(0);
+ $('.dong-progress').stop().hide();
this.showWater = false
- this.evaluatePopup()
+ this.evaluatePopup(flag)
}
// 使用该方式会闪烁，改用 Cesium.CallbackProperty 平滑
// this.waterEntity.polygon.extrudedHeight = startHeight
diff --git a/widgets/FloodAnalysis/css/style.css b/widgets/FloodAnalysis/css/style.css
index 471dc49..e8ee8c5 100644
--- a/widgets/FloodAnalysis/css/style.css
+++ b/widgets/FloodAnalysis/css/style.css
@@ -313,3 +313,96 @@
#history-tab2-grid .dgrid-cell {
text-align: center;
}
+
+/**进度条**/
+.jimu-widget-FloodAnalysis .dong-progress {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ width: 500px;
+ height: 0px;
+ z-index: 33;
+ background: rgba(59, 59, 59, 0.7);
+
+}
+
+.jimu-widget-FloodAnalysis .dong-progress h2 {
+ margin: 10px 0;
+ text-align: center;
+ font-size: 16px;
+ font-weight: 400;
+ color: white;
+}
+
+.jimu-widget-FloodAnalysis .dong-progress .container {
+ display: inline-block;
+ width: 100%;
+ height: 20px;
+ padding-right: 10px;
+ border: 1px solid #999;
+ border-radius: 5px;
+}
+
+.jimu-widget-FloodAnalysis .dong-progress .container .h-100P {
+ height: 100%;
+}
+
+.jimu-widget-FloodAnalysis .dong-progress .container .bar {
+ display: inline-block;
+ background: linear-gradient(to right, #ff4343, #48adff);
+ color: white;
+ font-weight: bold;
+ padding: 0 5px;
+ text-align: right;
+ border-radius: 5px;
+ border-right: 1px solid #999;
+}
+
+/**分析窗口**/
+.evaluate-analysis{
+ width: 840px;
+ position: fixed;
+ top: 10%;
+ right: 0%;
+ background: white;
+ height: 628px;
+ margin: 15px;
+ border-radius: 4px;
+ border: 1px solid white;
+}
+
+.evaluate-title{
+ height: 35px;
+ line-height: 35px;
+ font-weight: bold;
+ font-size: 16px;
+ box-shadow: 0px 1px 4px 0px rgb(0 0 0 / 40%);
+ background-color: #32425d;
+ color: white;
+}
+
+.evaluate-lable{
+ width: 70px;
+ position: absolute;
+ left: 2%;
+}
+
+.evaluate-box-top{
+ height: 30%;
+}
+
+.evaluate-box-middle{
+ height: 66%;
+}
+
+.evaluate-middle-first .column-1{
+ display: flex;
+}
+
+.evaluate-middle-first .column-2{
+ display: flex;
+}
diff --git a/corelib/common/popup/img/floodAnalysisEvaluate-2.png b/widgets/FloodAnalysis/images/floodAnalysisEvaluate-2.png
similarity index 100%
copy from corelib/common/popup/img/floodAnalysisEvaluate-2.png
copy to widgets/FloodAnalysis/images/floodAnalysisEvaluate-2.png
Binary files differ
--
Gitblit v1.9.3