水文水环境分析-洪水淹没：表格添加分页，修正小数相加，结果数据有误差的问题

guoshilong

2023-02-06 5b29289d508e4272c368cf39d9c95717e3a17df1

水文水环境分析-洪水淹没：表格添加分页，修正小数相加，结果数据有误差的问题

 corelib/common/popup/css/style.css

@@ -151,6 +151,7 @@
    width: 666px;
    height: 220px;
}

.river-course .reser-box .river-fou .river-fou-box {
    position: absolute;
    top: 0;
@@ -169,6 +170,7 @@
    width: 666px;
    height: 220px;
}

.river-course .rain-box .river-fou .river-fou-box {
    position: absolute;
    top: 0;
@@ -187,7 +189,6 @@
    width: 666px;
    height: 220px;
}



.river-one,
@@ -368,9 +369,6 @@
}





/*降雨*/
.rain-pei {
    width: 53%;
@@ -403,6 +401,7 @@
.rain-thead tr th:nth-child(4) div {
    width: 14px;
}

.rain-thead tr th:nth-child(4){
    width: 17px;
}
@@ -586,8 +585,7 @@
    cursor: pointer;
    padding-left: 10px;
    color: #6d6d6d;
    background: url("../img/sel.png")
        no-repeat 175px;
    background: url("../img/sel.png") no-repeat 175px;
}

.selectsd .input_insd input {
@@ -598,8 +596,7 @@
    cursor: pointer;
    padding-left: 10px;
    color: #6d6d6d;
    background: url("../img/sel.png")
    no-repeat 40px;
    background: url("../img/sel.png") no-repeat 40px;
}

.select .city {
@@ -676,13 +673,11 @@
}

.wicon {
    background: url("../img/data.png")
        no-repeat 120px;
    background: url("../img/data.png") no-repeat 120px;
}

.time-icon {
    background: url("../img/sel.png")
        no-repeat 128px;
    background: url("../img/sel.png") no-repeat 128px;
}

.river-btn {
@@ -694,6 +689,7 @@
    color: #6d6d6d;
    float: left;
}

.loc-btn {
    width: 80px;
    height: 30px;
@@ -780,6 +776,7 @@
    bottom: 0px;
    top: 95px;
}

/**洪水淹没分析弹窗**/
.flood-box{
    margin: 20px;
@@ -859,6 +856,108 @@
    color: #404040;
}

/**分页器**/

.flood-analysis-pagination {
    position: relative;
    text-align: center;
    zoom: 1;
    display: flex;
    width: 92%;
    justify-content: flex-end;
}

.flood-analysis-pagination:before,
.flood-analysis-pagination:after {
    content: "";
    display: table;
}

.flood-analysis-pagination:after {
    clear: both;
    overflow: hidden;
}

.flood-analysis-pagination span {
    float: left;
    margin: 0 5px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    color: #bdbdbd;
    font-size: 14px;
}

.flood-analysis-pagination .active {
    float: left;
    margin: 3px 5px;
    width: 25px;
    height: 25px;
    line-height: 25px !important;
    background: #e91e63;
    color: #fff;
    font-size: 14px;
    border: 1px solid #e91e63;
}

.flood-analysis-pagination a {
    float: left;
    margin: 3px 5px;
    width: 25px;
    height: 25px;
    line-height: 25px !important;
    background: #fff;
    border: 1px solid #ebebeb;
    color: #bdbdbd;
    font-size: 14px;
}

.flood-analysis-pagination a:hover {
    color: #fff;
    background: #e91e63;
}

.flood-analysis-pagination .next,
.flood-analysis-pagination .prev {
    font-family: "Simsun";
    font-size: 16px;
    font-weight: bold;
}

.now,
.count {
    padding: 0 5px;
    color: #f00;
}

.eg img {
    max-width: 800px;
    min-height: 500px;
}

.flood-analysis-pagination input {
    float: left;
    margin: 3px 5px;
    width: 25px;
    height: 25px;
    line-height: 25px !important;
    text-align: center;
    background: #fff;
    border: 1px solid #ebebeb;
    outline: none;
    color: #bdbdbd;
    font-size: 14px;
}

#pagination {
    position: absolute;
    margin-top: 5px;
}

.flood-analysis-pagination .jump-btn {
    width: 38px !important;
}

.column-2{
    margin-left: 20px;
}

 corelib/common/popup/evaluateAnalysis.html

@@ -46,16 +46,27 @@
                        <caption class="evaluate-table-caption table-caption">人口财产淹没损失表</caption>
                        <thead class="evaluate-table-thead table-thead">
                            <tr>
                                <th><div>编号</div></th>
                                <th><div>受淹户数(户)</div></th>
                                <th><div>受淹人口数量(人)</div></th>
                                <th><div>受淹居民地面积(km²)</div></th>
                                <th><div>受淹房屋价值(万元/人)</div></th>
                        <th>
                            <div>编号</div>
                        </th>
                        <th>
                            <div>受淹户数(户)</div>
                        </th>
                        <th>
                            <div>受淹人口数量(人)</div>
                        </th>
                        <th>
                            <div>受淹居民地面积(km²)</div>
                        </th>
                        <th>
                            <div>受淹房屋价值(万元/人)</div>
                        </th>
                            </tr>
                        </thead>
                        <tbody id="evaluate-tbody" class="table-tbody evaluate-tbody"></tbody>
                    </table>
                </div>
            <div class="flood-analysis-pagination Pagination" id="pagination"></div>
                <div class="evaluate-echarts" id="evaluate-echarts"></div>
            </div>
        </div>
@@ -68,6 +79,7 @@


    <script src="../../../libs/jquery/jquery-3.3.1.min.js"></script>
<script src="../../../libs/jquery.pagination.js"></script>
    <script src="../../../libs/layer/layer.js"></script>
    <script src="../../../libs/echarts/v4/echarts.min.js"></script>
    <script src="js/evaluateAnalysis.js"></script>

 corelib/common/popup/js/evaluateAnalysis.js

@@ -16,6 +16,10 @@
            moneyData.push(e.money)
        })
    }

    //初始化
    init()

    // change事件
    $('input[type=radio][name=value]').change(function () {
        if (this.value == 'list'){
@@ -190,4 +194,106 @@
            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;
    }
});

 widgets/FloodAnalysis/Widget.js

@@ -35,6 +35,8 @@
            var handler = new Cesium.ScreenSpaceEventHandler(that.map.scene.canvas);

            var shape;
            //隐藏详情框
            this.showDetail(false)

            $('#dong_draw').click(function () {
                that.deleteEntitys(that, pointId, shape, boildOne, boildTwo, boildThree, waterEntity);
@@ -47,6 +49,7 @@
                $('.jimu-widget-AnalysisOfBarrierLake p').stop().hide();
                //if (handler != null) handler.destroy();
                handler = new Cesium.ScreenSpaceEventHandler(that.map.scene.canvas);

                function drawShape(positionData) {
                    if (drawingMode == 'polygon') {
                        shape = that.map.entities.add({
@@ -60,6 +63,7 @@

                    return shape;
                }

                clearInterval(yanmo);
                yanmo = null;
                positions = [];
@@ -262,6 +266,7 @@
                        this.positions = positions;
                        this._init();
                    }

                    _.prototype._init = function () {
                        var _self = this;
                        //实时更新polygon.hierarchy
@@ -296,7 +301,8 @@
                        time: 1000
                    });
                    return;
                };
                }
                ;
                // 提取坐标信息
                var list = waterEntity.polygon.hierarchy.getValue().positions;
                // 存放坐标信息，做请求数据使用
@@ -309,44 +315,6 @@
                    var lng = Cesium.Math.toDegrees(cartographic.longitude);
                    echartRings[0].push([lng, lat]);
                }

                // // 发请求数据
                // var enenen = {
                //     "displayFieldName": "",
                //     "geometryType": "esriGeometryPolygon",
                //     "spatialReference": {
                //         "wkid": 4490,
                //         "latestWkid": 4490
                //     },
                //     "fields": [{
                //         "name": "OBJECTID",
                //         "type": "esriFieldTypeOID",
                //         "alias": "OBJECTID"
                //     }, {
                //         "name": "SHAPE_Length",
                //         "type": "esriFieldTypeDouble",
                //         "alias": "SHAPE_Length"
                //     }, {
                //         "name": "SHAPE_Area",
                //         "type": "esriFieldTypeDouble",
                //         "alias": "SHAPE_Area"
                //     }],
                //     "features": [{
                //         "geometry": {
                //             "rings": echartRings,
                //             "spatialReference": {
                //                 "wkid": 4490,
                //                 "latestWkid": 4490
                //             }
                //         },
                //         "symbol": null,
                //         "attributes": {
                //             "OBJECTID": 1163
                //         }
                //     }],
                //     "exceededTransferLimit": false
                //     // 数据转换格式
                // };enenen = JSON.stringify(enenen);

                that.map.entities.remove(activeShape);
                // 最高海拔
@@ -382,7 +350,6 @@
                                clearTimeout(yanmo);
                                flag = true;


                                // //显示div
                                // $('.dong-progress').stop().show();
                                // // 总长度
@@ -398,197 +365,6 @@
                                //     }
                                //     $('.dong-progress .container #progress_bar').width(watchWidth);
                                // }, 22);

                                // $.ajax({
                                //     url: 'http://171.35.109.175:18080/arcgis/rest/services/GZSW/%E5%8F%A0%E5%8A%A0%E5%88%86%E6%9E%90/GPServer/%E5%8F%A0%E5%8A%A0%E5%88%86%E6%9E%90/submitJob',
                                //     type: 'post',
                                //     dataType: 'json',
                                //     data: {
                                //         f: 'pjson',
                                //         fxfw: enenen
                                //     },
                                //     success: function success(result) {
                                //         troubleshooting(0);
                                //
                                //         function troubleshooting(i) {
                                //             $.ajax({
                                //                 url: 'http://171.35.109.175:18080/arcgis/rest/services/GZSW/%E5%8F%A0%E5%8A%A0%E5%88%86%E6%9E%90/GPServer/%E5%8F%A0%E5%8A%A0%E5%88%86%E6%9E%90/jobs/' + result.jobId + '?f=pjson',
                                //                 type: 'get',
                                //                 dataType: 'json',
                                //                 data: {},
                                //                 success: function success(data) {
                                //                     if (data.jobStatus == 'esriJobSucceeded') {
                                //                         var perurl = data.results.fxfw_Intersect_Statistics.paramUrl;
                                //                         $.ajax({
                                //                             url: 'http://171.35.109.175:18080/arcgis/rest/services/GZSW/%E5%8F%A0%E5%8A%A0%E5%88%86%E6%9E%90/GPServer/%E5%8F%A0%E5%8A%A0%E5%88%86%E6%9E%90/jobs/' + result.jobId + '/' + perurl,
                                //                             type: 'post',
                                //                             dataType: 'json',
                                //                             data: {
                                //                                 f: 'pjson'
                                //                             },
                                //                             success: function success(message) {
                                //                                 if (watchWidth < totalWidth) {
                                //                                     watchWidth = totalWidth;
                                //                                 }
                                //                                 clearInterval(proTime);
                                //                                 // 在此处创建库容曲线
                                //                                 var storageLine = echarts.init(document.getElementById('storage_echarts'));
                                //                                 var storageOptions = {
                                //                                     title: {
                                //                                         text: '库容曲线'
                                //                                     },
                                //                                     tooltip: {
                                //                                         trigger: 'axis'
                                //                                     },
                                //                                     gird: {
                                //                                         top: '20px'
                                //                                     },
                                //                                     legend: {
                                //                                         data: ['最大淹没体积']
                                //                                     },
                                //                                     xAxis: {
                                //                                         type: 'value',
                                //                                         min: 0,
                                //                                         max: textArea,
                                //                                         splitNumber: 10
                                //                                     },
                                //                                     yAxis: {
                                //                                         name: '水位(m)',
                                //                                         nameTextStyle: {
                                //                                             color: 'rgba(40, 37, 161, 0.849)'
                                //                                         },
                                //                                         type: 'value',
                                //                                         min: 0,
                                //                                         max: maxHet,
                                //                                         splitNumber: 10,
                                //                                         axisLabel: {
                                //                                             formatter: '{value}'
                                //                                         }
                                //                                     },
                                //                                     series: [{
                                //                                         name: '最大淹没体积',
                                //                                         type: 'line',
                                //                                         data: [],
                                //                                         smooth: true
                                //                                     }]
                                //                                 };
                                //                                 storageOptions.series[0].data = seriesData;
                                //                                 storageLine.setOption(storageOptions);
                                //
                                //                                 var features = message.value.features;
                                //                                 if (features == false) {
                                //                                     layer.msg('此处不在可分析范围内', {
                                //
                                //                                         time: 1000
                                //                                     });
                                //                                     $('.dong-progress .container #progress_bar').width(0);
                                //                                     $('.dong-progress').stop().hide();
                                //                                     return;
                                //                                 }
                                //                                 $('.dong-progress .container #progress_bar').width(totalWidth);
                                //                                 var echartsResult = [];
                                //                                 var subTitle = '';
                                //                                 // 淹没总面积
                                //                                 var shapeAreas = 0;
                                //                                 var echartsName = null;
                                //                                 var echartsColor = null;
                                //                                 for (var j = 0; j < features.length; j++) {
                                //                                     shapeAreas += features[j].attributes.SUM_Shape_Area;
                                //                                 }
                                //                                 for (var i = 0; i < features.length; i++) {
                                //                                     if (features[i].attributes.gridcode == 1) {
                                //                                         echartsName = '城镇';
                                //                                         echartsColor = '#B56DD1';
                                //                                     } else if (features[i].attributes.gridcode == 2) {
                                //                                         echartsName = '植被';
                                //                                         echartsColor = '#5F8812';
                                //                                     } else if (features[i].attributes.gridcode == 3) {
                                //                                         echartsName = '水域';
                                //                                         echartsColor = '#0B6FC5';
                                //                                     } else if (features[i].attributes.gridcode == 4) {
                                //                                         echartsName = '裸地';
                                //                                         echartsColor = '#CE8B44';
                                //                                     } else if (features[i].attributes.gridcode == 5) {
                                //                                         echartsName = '农业用地';
                                //                                         echartsColor = '#B5D874';
                                //                                     }
                                //                                     echartsResult.push({
                                //                                         value: (features[i].attributes.SUM_Shape_Area / 1000000).toFixed(2),
                                //                                         name: echartsName,
                                //                                         itemStyle: {
                                //                                             color: echartsColor
                                //                                         }
                                //                                     });
                                //                                     subTitle += echartsName + '淹没面积为' + (features[i].attributes.SUM_Shape_Area / 1000000).toFixed(2) + 'km²，占比为' + (features[i].attributes.SUM_Shape_Area / shapeAreas * 100).toFixed(2) + '%；';
                                //                                 }
                                //                                 var textSub = '\u6DF9\u6CA1\u6D77\u62D4\u9AD8\u5EA6\u4E3A' + maxHet + 'm\uFF0C\u6DF9\u6CA1\u603B\u9762\u79EF\u4E3A' + (shapeAreas / 1000000).toFixed(2) + 'km\xB2\u3002\u5176\u4E2D';
                                //                                 textSub += subTitle;
                                //                                 $('.jimu-widget-AnalysisOfBarrierLake p').text(textSub);
                                //                                 var echartsData = echarts.init(document.getElementById('dong_echarts'));
                                //                                 var options = {
                                //                                     title: {
                                //                                         text: '淹没分析结果',
                                //                                         left: '41%',
                                //                                         textStyle: {
                                //                                             color: '#5DBFFF',
                                //                                             fontSize: 26
                                //                                         },
                                //                                         top: 14
                                //                                     },
                                //                                     tooltip: {
                                //                                         trigger: 'item',
                                //                                         formatter: '{b} <br/>面积 : {c} km² ({d}%)',
                                //                                         position: 'right'
                                //                                     },
                                //                                     legend: {
                                //                                         orient: 'vertical',
                                //                                         // top: 'middle',
                                //                                         right: 4,
                                //                                         bottom: 2,
                                //                                         textStyle: { //图例文字的样式
                                //                                             color: '#fff',
                                //                                             fontSize: 14
                                //                                         },
                                //                                         data: ['城镇', '植被', '水域', '裸地', '农业用地']
                                //                                     },
                                //                                     series: [{
                                //                                         type: 'pie',
                                //                                         radius: '80%',
                                //                                         center: ['55%', '56%'],
                                //                                         selectedMode: 'single',
                                //                                         label: {
                                //                                             normal: {
                                //                                                 position: 'inner',
                                //                                                 show: false
                                //                                             }
                                //                                         },
                                //                                         data: echartsResult,
                                //                                         emphasis: {
                                //                                             itemStyle: {
                                //                                                 shadowBlur: 10,
                                //                                                 shadowOffsetX: 0,
                                //                                                 shadowColor: 'rgba(0, 0, 0, 0.5)'
                                //                                             }
                                //                                         }
                                //                                     }]
                                //                                 };
                                //                                 echartsData.setOption(options);
                                //                                 $('.dong-progress .container #progress_bar').width(0);
                                //                                 $('.dong-progress').stop().hide();
                                //                                 $('#dong_echarts').stop().show();
                                //                                 $('.jimu-widget-AnalysisOfBarrierLake p').stop().show();
                                //                             }
                                //                         });
                                //                         return;
                                //                     } else {
                                //                         troubleshooting(i + 1);
                                //                     }
                                //                 }
                                //             });
                                //         }
                                //     }
                                // });


                                return;
                            }
@@ -635,6 +411,7 @@

                return (res / 1000000.0).toFixed(4);
            }

            /*角度*/
            function Angle(p1, p2, p3) {
                var bearing21 = Bearing(p2, p1);
@@ -645,6 +422,7 @@
                }
                return angle;
            }

            /*方向*/
            function Bearing(from, to) {
                var lat1 = from.lat * radiansPerDegree;
@@ -658,6 +436,7 @@
                angle = angle * degreesPerRadian; //角度
                return angle;
            }

            //计算距离
            function distance(point1, point2) {
                var point1cartographic = Cesium.Cartographic.fromCartesian(point1);
@@ -716,7 +495,8 @@
            this.resize();
        },

        resize: function resize() {},
        resize: function resize() {
        },

        destroy: function destroy() {
            //销毁的时候触发
@@ -801,11 +581,11 @@
                    inPolygon.push(this.peoplePositionArray[i])
                }
            }
            var jsonStr = JSON.stringify(inPolygon)
            var inPolygonStr = JSON.stringify(inPolygon)

            var url = './corelib/common/popup/floodAnalysis.html';
            var urlEvaluate = './corelib/common/popup/evaluateAnalysis.html'
            var top = ($(window).height() - 800) / 2;
            var top = ($(window).height() - 750) / 2;
            var left = ($(window).width() - 1300 - 340) / 2 + 340;
            layer.open({
                title:'评估分析',
@@ -814,45 +594,9 @@
                area: ['1100px', '800px'],
                skin: 'floodAnalysis',
                offset: [top, left],
                content: urlEvaluate + "?data=" + encodeURIComponent(jsonStr),//使用encodeURIComponent转码，避免中文字符乱码，避免url截取错误
                content: urlEvaluate + "?data=" + encodeURIComponent(inPolygonStr),//使用encodeURIComponent转码，避免中文字符乱码，避免url截取错误
                id: "floodAnalysisLayer",
                closeBtn: 1,
                //把父页面数据传递给子弹窗并渲染
                success: function(layero, index) {
                    //绑定父子之间的关系，用于数据传递，缺少则无法传递
                    var body = layer.getChildFrame("body",index);
                    //得到iframe页的窗口对象
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    // //渲染子页面中的img
                    // iframeWin.$('#canvasImage')[0].src = self.canvasImage;
                    var table = ""
                    var house = 0
                    var people = 0
                    var area = 0
                    var money = 0
                    for (let i = 0; i < inPolygon.length; i++) {
                        table += '<tr>'+
                            '<td><div>' + inPolygon[i].name + '</div></td>' +
                            '<td><div>' + inPolygon[i].house + '</div></td>' +
                            '<td><div>' + inPolygon[i].people + '</div></td>' +
                            '<td><div>' + inPolygon[i].area + '</div></td>' +
                            '<td><div>' + inPolygon[i].money + '</div></td>' +
                            '</tr>'

                        house += inPolygon[i].house
                        people += inPolygon[i].people
                        area += inPolygon[i].area
                        money += inPolygon[i].money
                    }

                    iframeWin.$('#evaluate-tbody').html(table)

                    iframeWin.$(".house").html(house + '户')
                    iframeWin.$(".people").html(people + '人')
                    iframeWin.$(".area").html(area + 'km²')
                    iframeWin.$(".money").html(money + '万元')

                },
            });
        },


 widgets/YuShuiQing/css/style.css