From 52c8ca8e31bb9aee13726d9c858dee1d11dcde87 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Mon, 20 Feb 2023 10:19:29 +0800
Subject: [PATCH] 洪水淹没-进度条、分析弹窗大小位置变更
---
corelib/common/popup/js/evaluateAnalysis.js | 252 ++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 220 insertions(+), 32 deletions(-)
diff --git a/corelib/common/popup/js/evaluateAnalysis.js b/corelib/common/popup/js/evaluateAnalysis.js
index 2f5431e..473254b 100644
--- a/corelib/common/popup/js/evaluateAnalysis.js
+++ b/corelib/common/popup/js/evaluateAnalysis.js
@@ -1,31 +1,38 @@
$(function () {
//获取父窗口传来的数据
- var data = JSON.parse(GetQueryString("data"))
+ var data = JSON.parse(GetQueryString("parentData"))
+ var hd = data.hd
+ var evaluateData = data.data
//配置数据
- var nameData=[]
+ var nameData = []
var houseData = []
var peopleData = []
var areaData = []
var moneyData = []
- if (data.length>0){
- data.forEach(e=>{
+ if (evaluateData.length > 0) {
+ evaluateData.forEach(e => {
nameData.push(e.name)
houseData.push(e.house)
- peopleData.push(e.people)
+ peopleData.push(e.population)
areaData.push(e.area)
- moneyData.push(e.money)
+ moneyData.push(e.value)
})
}
+
+ //初始化
+ init()
+
// change事件
$('input[type=radio][name=value]').change(function () {
- if (this.value == 'list'){
+ if (this.value == 'list') {
$('.evaluate-echarts').hide()
- $('.evaluate-box-top-left').css('visibility','visible')
+ // $('.evaluate-box-top-left').css('visibility', 'visible')
$('.evaluate-table').show()
- }else {
+ $('.flood-analysis-pagination').show()
+ } else {
$('.evaluate-table').hide()
- $('.evaluate-box-top-left').css('visibility','hidden')
-
+ // $('.evaluate-box-top-left').css('visibility', 'hidden')
+ $('.flood-analysis-pagination').hide()
recharts_z()
loadEcharts()
$('.evaluate-echarts').show()
@@ -33,12 +40,52 @@
});
//淹没图弹窗事件
- $('#create-flood-image').click(function (){
- imagePopup()
+ $('#create-flood-image').click(function () {
+ exportPicture()
})
+ $('#save-btn').click(function () {
+ confirmPopup()
+ })
+
+ $('#export-img').click(function () {
+ exportPicture()
+ })
+
+ //确认弹窗
+ function confirmPopup() {
+ const self = this
+ let url = '../popup/saveConfirm.html'
+ var top = ($(window).height() - 300) / 2 - 124;
+ var left = ($(window).width() - 500) / 2;
+ layer.open({
+ title: '保存',
+ type: 2,
+ maxmin: false, //开启最大化最小化按钮
+ area: ['500px', '200px'],
+ skin: 'saveConfirm',
+ offset: [top, left],
+ content: url,
+ id: "saveConfirmLayer",
+ closeBtn: 1,
+ //把父页面数据传递给子弹窗并渲染
+ success: function (layero, index) {
+ //绑定父子之间的关系，用于数据传递，缺少则无法传递
+ var body = layer.getChildFrame("body", index);
+ //得到iframe页的窗口对象
+ var iframeWin = window[layero.find('iframe')[0]['name']];
+ iframeWin.$('#confirm-button').click(function () {
+ let saveName = iframeWin.$('#save-name').val()
+ if (saveName == "") return
+ saveHistoryData(saveName,index)
+
+ })
+ }
+ })
+ }
+
//加载柱状图
- function loadEcharts(){
+ function loadEcharts() {
var chartDom = document.getElementById('evaluate-echarts');
var myChart = echarts.init(chartDom);
var app = {}
@@ -98,7 +145,7 @@
xAxis: [
{
type: 'value',
- axisTick: { show: false },
+ axisTick: {show: false},
}
],
yAxis: [
@@ -148,12 +195,13 @@
]
};
- echartsOption&&myChart.setOption(echartsOption,true);
+ echartsOption && myChart.setOption(echartsOption, true);
}
function recharts_z() {
- var width = $(window).width() * 0.9;
+ var width = $(window).width() * 0.45;
var height = ($(window).height() - 50) - 80;
+
$('#evaluate-echarts').empty();
$('#evaluate-echarts').removeAttr("_echarts_instance_").empty();
var chartPie = document.getElementById('evaluate-echarts');
@@ -173,21 +221,161 @@
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
+ //导出成果图
+ function exportPicture() {
+ // 获取要下载的图片
+ var img = document.getElementById('show-img');
+ // 获取图片地址
+ var url = img.src;
+ // 创建一个a节点插入的document
+ var a = document.createElement('a');
+ // 模拟鼠标click点击事件
+ var event = new MouseEvent('click')
+ // 设置a节点的download属性值
+ a.download = '成果图'
+ // 将图片的src赋值给a节点的href
+ a.href = url;
+ a.dispatchEvent(event)
+ }
+
+ function init() {
+ $('#show-img').prop('src', 'image/floodAnalysisEvaluate-2.png')
+ loadSumData()
+ loadPagination()
+ }
+
+ function loadTable(listData) {
+ // $('#evaluate-tbody').remove()
+ var table = ""
+ var house = 0
+ var people = 0
+ var area = 0
+ var money = 0
+ for (let i = 0; i < listData.length; i++) {
+
+ table += '<tr>' +
+ '<td><div>' + listData[i].name + '</div></td>' +
+ '<td><div>' + listData[i].house + '</div></td>' +
+ '<td><div>' + listData[i].population + '</div></td>' +
+ '<td><div>' + listData[i].area + '</div></td>' +
+ '<td><div>' + listData[i].value + '</div></td>' +
+ '</tr>'
+
+ house += evaluateData[i].house
+ people += evaluateData[i].population
+ area += evaluateData[i].area
+ money += evaluateData[i].value
+ }
+ $('#evaluate-tbody').html(table)
+ }
+
+ function loadSumData() {
+ var house = 0
+ var people = 0
+ var area = 0
+ var money = 0
+ for (let i = 0; i < evaluateData.length; i++) {
+ house = floatAdd(house, evaluateData[i].house)
+ people = floatAdd(people, evaluateData[i].population)
+ area = floatAdd(area, evaluateData[i].area)
+ money = floatAdd(money, evaluateData[i].value)
+ }
+
+ $(".house").html(house + '户')
+ $(".people").html(people + '人')
+ $(".area").html(area + 'km²')
+ $(".money").html(money + '万元')
+ $('.description').html("该站位于" + hd.riverway + "，河段长" + hd.river_length + "m,预计会造成受灾户数" + house + "户，受灾人口" + people + "人，受灾面积" + area + "km²，房屋价值" + money + "万元")
+ }
+
+ function loadPagination() {
+ if (evaluateData.length <= 0) return
+ var count = Math.ceil(evaluateData.length / 10);
+
+ $('#evaluate-pagination').pagination({
+ mode: 'fixed',
+ jump: true,
+ coping: false,
+ pageCount: count,
+ callback: function (index) {
+ let listdata = [];
+ //显示页数
+ var index = (index.getCurrent() - 1) * 10;
+ for (var i = index; i < index + 10; i++) {
+ listdata.push(evaluateData[i]);
+ if (i == evaluateData.length - 1) {
+ break;
+ }
+ }
+ loadTable(listdata)
+ }
});
+
+ //首次加载前10条数据
+ var startData = [];
+ if (evaluateData.length > 10) {
+ for (var i = 0; i < 10; i++) {
+ startData.push(evaluateData[i]);
+ }
+ } else {
+ for (var i = 0; i < evaluateData.length; i++) {
+ startData.push(evaluateData[i]);
+ }
+ }
+ loadTable(startData)
+ }
+
+ //防止出现两个小数相加出现很多0的情况
+ function 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;
+ }
+
+ /**
+ * 保存历史数据
+ * @param saveName 名称
+ * @param index 当前层的index
+ */
+ function saveHistoryData(saveName,index) {
+ const self = this
+ let smxVal = {
+ hd:data.hd,
+ smx:data.smx,
+ sw:data.sw,
+ point:data.point
+ }
+ $.ajax({
+ url: 'http://localhost:82/blade-ycreal/inundationResult/save',
+ type: 'post',
+ dataType: 'json',
+ jsonp: 'callback',
+ jsonpCallback: 'data',
+ data: {
+ name:saveName,
+ lon:hd.river_origin,
+ lat:hd.qd_lat,
+ smxVal:JSON.stringify(smxVal)
+ },
+ success: function (res) {
+ if (res.code == 200) {
+ layer.msg("保存成功")
+ }else {
+ layer.msg("保存失败")
+ }
+ }
+ });
+
+ layer.close(index)
}
});
--
Gitblit v1.9.3