$(function () {
|
//获取父窗口传来的数据
|
var data = JSON.parse(GetQueryString("data"))
|
//配置数据
|
var nameData = []
|
var houseData = []
|
var peopleData = []
|
var areaData = []
|
var moneyData = []
|
if (data.length > 0) {
|
data.forEach(e => {
|
nameData.push(e.name)
|
houseData.push(e.house)
|
peopleData.push(e.people)
|
areaData.push(e.area)
|
moneyData.push(e.money)
|
})
|
}
|
|
//初始化
|
init()
|
|
// 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()
|
$('.flood-analysis-pagination').show()
|
} else {
|
$('.evaluate-table').hide()
|
$('.evaluate-box-top-left').css('visibility', 'hidden')
|
$('.flood-analysis-pagination').hide()
|
recharts_z()
|
loadEcharts()
|
$('.evaluate-echarts').show()
|
}
|
});
|
|
//淹没图弹窗事件
|
$('#create-flood-image').click(function () {
|
imagePopup()
|
})
|
|
//加载柱状图
|
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: 16,
|
rich: {
|
name: {}
|
}
|
};
|
var echartsOption = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {},
|
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);
|
}
|
|
function recharts_z() {
|
var width = $(window).width() * 0.9;
|
var height = ($(window).height() - 50) - 80;
|
$('#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);
|
}
|
|
//获取参数
|
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 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 init() {
|
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].people + '</div></td>' +
|
'<td><div>' + listData[i].area + '</div></td>' +
|
'<td><div>' + listData[i].money + '</div></td>' +
|
'</tr>'
|
|
house += data[i].house
|
people += data[i].people
|
area += data[i].area
|
money += data[i].money
|
}
|
$('#evaluate-tbody').html(table)
|
}
|
|
function loadSumData() {
|
var house = 0
|
var people = 0
|
var area = 0
|
var money = 0
|
for (let i = 0; i < data.length; i++) {
|
house = floatAdd(house, data[i].house)
|
people = floatAdd(people, data[i].people)
|
area = floatAdd(area, data[i].area)
|
money = floatAdd(money, data[i].money)
|
}
|
|
$(".house").html(house + '户')
|
$(".people").html(people + '人')
|
$(".area").html(area + 'km²')
|
$(".money").html(money + '万元')
|
}
|
|
function loadPagination() {
|
if (data.length < 0) return
|
var count = Math.ceil(data.length / 10);
|
|
$('.Pagination').pagination({
|
mode: 'fixed',
|
jump: true,
|
coping: false,
|
pageCount: count,
|
callback: function (index) {
|
var listdata = [];
|
//显示页数
|
var index = (index.getCurrent() - 1) * 10;
|
for (var i = index; i < index + 10; i++) {
|
listdata.push(data[i]);
|
if (i == data.length - 1) {
|
break;
|
}
|
}
|
loadTable(listdata)
|
}
|
});
|
|
//首次加载前10条数据
|
var startData = [];
|
if (data.length > 10) {
|
for (var i = 0; i < 10; i++) {
|
startData.push(data[i]);
|
}
|
} else {
|
for (var i = 0; i < data.length; i++) {
|
startData.push(data[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;
|
}
|
});
|
