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 | 460 +++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 393 insertions(+), 67 deletions(-)
diff --git a/corelib/common/popup/js/evaluateAnalysis.js b/corelib/common/popup/js/evaluateAnalysis.js
index 0ce5ace..73fb800 100644
--- a/corelib/common/popup/js/evaluateAnalysis.js
+++ b/corelib/common/popup/js/evaluateAnalysis.js
@@ -1,72 +1,181 @@
$(function () {
- // 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()
- }
- });
-
- //加载饼图
- function loadEcharts(){
-
- var echartsOption = {
- tooltip: {
- trigger: 'item'
- },
- legend: {
- top: '5%',
- left: 'center'
- },
- series: [
- {
- type: 'pie',
- radius: ['40%', '70%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 10,
- borderColor: '#fff',
- borderWidth: 0
- },
- label: {
- show: true,
- position: 'left'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: 20,
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: false
- },
- data: [
- { value: 1048, name: '会昌县' },
- { value: 735, name: '石城县' },
- { value: 580, name: '宁都县' },
- ]
- }
- ]
- }
-
- var chartDom = document.getElementById('evaluate-echarts');
- var myChart = echarts.init(chartDom);
- echartsOption&&myChart.setOption(echartsOption,true);
+ //获取父窗口传来的数据
+ 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() * 0.8;
- 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');
@@ -78,12 +187,229 @@
myChartPie.resize(resize);
}
- //获取参数
+ //获取url携带参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
- var r = window.location.search.substr(1).match(reg);
+ 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)
+ }
});
--
Gitblit v1.9.3