洪水淹没

guoshilong

2023-02-27 4d8c6dd77427e8e581fda17b6b65ba86bfb7a815

 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("&nbsp&nbsp该站位于" + 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)
    }
});