$(function () {
|
//获取父窗口传来的数据
|
var data = JSON.parse(GetQueryString("parentData"))
|
var hd = data.hd
|
var evaluateData = data.data
|
//配置数据
|
var nameData = []
|
var houseData = []
|
var peopleData = []
|
var areaData = []
|
var moneyData = []
|
if (evaluateData.length > 0) {
|
evaluateData.forEach(e => {
|
nameData.push(e.name)
|
houseData.push(e.house)
|
peopleData.push(e.population)
|
areaData.push(e.area)
|
moneyData.push(e.value)
|
})
|
}
|
|
//初始化
|
init()
|
|
//确认弹窗
|
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() {
|
var chartDom = document.getElementById('evaluate-echarts');
|
var myChart = echarts.init(chartDom);
|
var app = {}
|
app.config = {
|
rotate: 0,
|
align: 'left',
|
verticalAlign: 'middle',
|
position: 'right',
|
distance: 15,
|
onChange: function () {
|
const labelOption = {
|
rotate: app.config.rotate,
|
align: app.config.align,
|
verticalAlign: app.config.verticalAlign,
|
position: app.config.position,
|
distance: app.config.distance
|
};
|
myChart.setOption({
|
series: [
|
{
|
label: labelOption
|
},
|
{
|
label: labelOption
|
},
|
{
|
label: labelOption
|
},
|
{
|
label: labelOption
|
}
|
]
|
});
|
}
|
};
|
const labelOption = {
|
show: true,
|
position: app.config.position,
|
distance: app.config.distance,
|
align: app.config.align,
|
verticalAlign: app.config.verticalAlign,
|
rotate: app.config.rotate,
|
formatter: '{c} {name|{a}}',
|
fontSize: 13,
|
rich: {
|
name: {}
|
}
|
};
|
var echartsOption = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {
|
left: 'left',
|
width: "70%"
|
},
|
xAxis: [
|
{
|
type: 'value',
|
axisTick: {show: false},
|
}
|
],
|
yAxis: [
|
{
|
type: 'category',
|
data: nameData
|
}
|
],
|
series: [
|
{
|
name: '受淹户数(户)',
|
type: 'bar',
|
barGap: 0,
|
label: labelOption,
|
emphasis: {
|
focus: 'series'
|
},
|
data: houseData
|
},
|
{
|
name: '受淹人口(人)',
|
type: 'bar',
|
label: labelOption,
|
emphasis: {
|
focus: 'series'
|
},
|
data: peopleData
|
},
|
{
|
name: '受淹居民地面积(km²)',
|
type: 'bar',
|
label: labelOption,
|
emphasis: {
|
focus: 'series'
|
},
|
data: areaData
|
},
|
{
|
name: '受淹房屋价值(万元/人)',
|
type: 'bar',
|
label: labelOption,
|
emphasis: {
|
focus: 'series'
|
},
|
data: moneyData
|
}
|
]
|
};
|
|
echartsOption && myChart.setOption(echartsOption, true);
|
}
|
|
//控制echarts图的长宽
|
function recharts_z() {
|
var width = $(window).width();
|
var height = $(window).height() - 400
|
|
$('#evaluate-echarts').empty();
|
$('#evaluate-echarts').removeAttr("_echarts_instance_").empty();
|
var chartPie = document.getElementById('evaluate-echarts');
|
var myChartPie = echarts.init(chartPie);
|
var resize = {
|
width: width,
|
height: height
|
}
|
myChartPie.resize(resize);
|
}
|
|
//获取url携带参数
|
function GetQueryString(name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
var r = decodeURI(window.location.search).substr(1).match(reg);
|
if (r != null) return unescape(r[2]);
|
return null;
|
}
|
|
//导出成果图
|
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)
|
}
|
});
|
