洪水淹没-1、选择河段时地图定位到该河段；2、分析窗口数据联动

guoshilong

2023-02-13 e2430e2add7041530228ed29315853c87492f5c1

 corelib/common/popup/js/evaluateAnalysis.js

@@ -1,6 +1,7 @@
$(function () {
    //获取父窗口传来的数据
    var data = JSON.parse(GetQueryString("data"))
    var hd = JSON.parse(GetQueryString("hd"))
    //配置数据
    var nameData = []
    var houseData = []
@@ -11,9 +12,9 @@
        data.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)
        })
    }

@@ -24,12 +25,12 @@
    $('input[type=radio][name=value]').change(function () {
        if (this.value == 'list') {
            $('.evaluate-echarts').hide()
            $('.evaluate-box-top-left').css('visibility', 'visible')
            // $('.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')
            // $('.evaluate-box-top-left').css('visibility', 'hidden')
            $('.flood-analysis-pagination').hide()
            recharts_z()
            loadEcharts()
@@ -39,8 +40,51 @@

    //淹没图弹窗事件
    $('#create-flood-image').click(function () {
        imagePopup()
        exportPicture()
    })

    $('#save-btn').click(function () {
        confirmPopup()
    })

    $('#export-img').click(function () {
        exportPicture()
    })

    //确认弹窗
    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) {
                self.popupIndex = 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
                    console.log(saveName, "-----------")

                    saveHistoryData()

                })
            }
        })
    }

    //加载柱状图
    function loadEcharts() {
@@ -157,8 +201,9 @@
    }

    function recharts_z() {
        var width = $(window).width() * 0.9;
        var width = $(window).width() * 0.45;
        var height = ($(window).height() - 50) - 80;

        $('#evaluate-echarts').empty();
        $('#evaluate-echarts').removeAttr("_echarts_instance_").empty();
        var chartPie = document.getElementById('evaluate-echarts');
@@ -178,25 +223,25 @@
        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() {
        $('#show-img').prop('src', 'img/floodAnalysisEvaluate-2.png')
        loadSumData()
        loadPagination()
    }
@@ -213,15 +258,15 @@
            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].population + '</div></td>' +
                '<td><div>' + listData[i].area + '</div></td>' +
                '<td><div>' + listData[i].money + '</div></td>' +
                '<td><div>' + listData[i].value + '</div></td>' +
                '</tr>'

            house += data[i].house
            people += data[i].people
            people += data[i].population
            area += data[i].area
            money += data[i].money
            money += data[i].value
        }
        $('#evaluate-tbody').html(table)
    }
@@ -233,22 +278,23 @@
        var money = 0
        for (let i = 0; i < data.length; i++) {
            house = floatAdd(house, data[i].house)
            people = floatAdd(people, data[i].people)
            people = floatAdd(people, data[i].population)
            area = floatAdd(area, data[i].area)
            money = floatAdd(money, data[i].money)
            money = floatAdd(money, data[i].value)
        }

        $(".house").html(house + '户')
        $(".people").html(people + '人')
        $(".area").html(area + 'km²')
        $(".money").html(money + '万元')
        $('.description').html("该站位于" + hd.riverway + "，河段长" + hd.river_length + "m,预计会造成受灾户数" + house + "户，受灾人口" + people + "人，受灾面积" + area + "km²，房屋价值" + money + "万元")
    }

    function loadPagination() {
        if (data.length < 0) return
        var count = Math.ceil(data.length / 10);

        $('.Pagination').pagination({
        $('#evaluate-pagination').pagination({
            mode: 'fixed',
            jump: true,
            coping: false,
@@ -297,4 +343,8 @@
        m = Math.pow(10, Math.max(r1, r2));
        return (arg1 * m + arg2 * m) / m;
    }

    function saveHistoryData() {
        console.log("------------------------------------")
    }
});