From 4d8c6dd77427e8e581fda17b6b65ba86bfb7a815 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Mon, 27 Feb 2023 14:30:01 +0800
Subject: [PATCH] 洪水淹没
---
corelib/common/popup/js/evaluateAnalysis.js | 316 ++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 269 insertions(+), 47 deletions(-)
diff --git a/corelib/common/popup/js/evaluateAnalysis.js b/corelib/common/popup/js/evaluateAnalysis.js
index 2f5431e..73fb800 100644
--- a/corelib/common/popup/js/evaluateAnalysis.js
+++ b/corelib/common/popup/js/evaluateAnalysis.js
@@ -1,44 +1,61 @@
$(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)
})
}
- // change事件
- $('input[type=radio][name=value]').change(function () {
- if (this.value == 'list'){
- $('.evaluate-echarts').hide()
- $('.evaluate-box-top-left').css('visibility','visible')
- $('.evaluate-table').show()
- }else {
- $('.evaluate-table').hide()
- $('.evaluate-box-top-left').css('visibility','hidden')
- recharts_z()
- loadEcharts()
- $('.evaluate-echarts').show()
- }
- });
+ //初始化
+ init()
- //淹没图弹窗事件
- $('#create-flood-image').click(function (){
- imagePopup()
- })
+ //确认弹窗
+ 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 = {}
@@ -82,7 +99,7 @@
verticalAlign: app.config.verticalAlign,
rotate: app.config.rotate,
formatter: '{c} {name|{a}}',
- fontSize: 16,
+ fontSize: 13,
rich: {
name: {}
}
@@ -94,11 +111,14 @@
type: 'shadow'
}
},
- legend: {},
+ legend: {
+ left: 'left',
+ width: "70%"
+ },
xAxis: [
{
type: 'value',
- axisTick: { show: false },
+ axisTick: {show: false},
}
],
yAxis: [
@@ -148,12 +168,14 @@
]
};
- echartsOption&&myChart.setOption(echartsOption,true);
+ echartsOption && myChart.setOption(echartsOption, true);
}
+ //控制echarts图的长宽
function recharts_z() {
- var width = $(window).width() * 0.9;
- var height = ($(window).height() - 50) - 80;
+ var width = $(window).width();
+ var height = $(window).height() - 400
+
$('#evaluate-echarts').empty();
$('#evaluate-echarts').removeAttr("_echarts_instance_").empty();
var chartPie = document.getElementById('evaluate-echarts');
@@ -165,7 +187,7 @@
myChartPie.resize(resize);
}
- //获取参数
+ //获取url携带参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = decodeURI(window.location.search).substr(1).match(reg);
@@ -173,21 +195,221 @@
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() {
+
+ $('#list').click(function () {
+ $('.evaluate-echarts').hide()
+ $('.evaluate-table').show()
+ $('.flood-analysis-pagination').show()
+ $('.list').addClass('choose-button')
+ $('.list').removeClass('unchoose-button')
+ $('.echarts').addClass('unchoose-button')
+ $('.echarts').removeClass('choose-button')
+ })
+
+ $('#echarts').click(function () {
+ $('.evaluate-table').hide()
+ $('.flood-analysis-pagination').hide()
+ recharts_z()
+ loadEcharts()
+ $('.evaluate-echarts').show()
+
+ $('.echarts').addClass('choose-button')
+ $('.echarts').removeClass('unchoose-button')
+ $('.list').addClass('unchoose-button')
+ $('.list').removeClass('choose-button')
+ })
+
+ //淹没图弹窗事件
+ $('#create-flood-image').click(function () {
+ exportPicture()
+ })
+
+ //保存按钮点击事件
+ $('#save-btn').click(function () {
+ confirmPopup()
+ })
+
+ //导出按钮点击事件
+ $('#export-img').click(function () {
+ exportPicture()
+ })
+
+
+ //图片展示
+ $('#show-img').prop('src', 'image/floodAnalysisEvaluate-2.png')
+ $('.list').addClass('choose-button')
+ $('.list').removeClass('unchoose-button')
+ $('.echarts').addClass('unchoose-button')
+ $('.echarts').removeClass('choose-button')
+ loadPagination()
+ loadSumData()
+ }
+
+ //加载表格
+ 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)
+ }
+
+ let table = '<tr>' +
+ '<td><div>合计</div></td>' +
+ '<td><div>' + house + '</div></td>' +
+ '<td><div>' + people + '</div></td>' +
+ '<td><div>' + area + '</div></td>' +
+ '<td><div>' + money + '</div></td>' +
+ '</tr>'
+
+ $('#evaluate-tbody').append(table)
+
+ // $(".house").html(house + '户')
+ // $(".people").html(people + '人')
+ // $(".area").html(area + 'km²')
+ // $(".money").html(money + '万元')
+
+ $('.description').html("  该站位于" + hd.riverway + "，靠近"+hd.stnm.trim()+"水文站，起始距为"+hd.gl_qdj+"m，河段长" + hd.river_length + "m，淹没面积" + house + "km²，淹没耕地面积" + people + "km²，影响" + area + "万人，淹没区GDP总计" + 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