json数据修改，表格内容根据所画区域渲染，去除第一层弹窗

guoshilong

2023-02-03 17ab57553df0ff07d4b913bb1f315f9f45a9bc0e

json数据修改，表格内容根据所画区域渲染，去除第一层弹窗

 corelib/common/popup/css/style.css

@@ -818,7 +818,7 @@

.evaluate-box-middle{
    width: 96%;
    height: 350px;
    height: 425px;
    border: 1px solid black;
    padding: 0px 10px 0px 10px;
}
@@ -836,11 +836,29 @@
    display: flex;
}

.evaluate-table-thead caption{
.evaluate-box-middle table{
    width: 100%;
}

.evaluate-table-caption{
    font-size: 20px;
    margin: 15px 0 15px 0;
}

.evaluate-table-thead tr td{
    text-align: center;
    border-right: 1px solid #CFCFCF;
    border-bottom: 1px solid #CFCFCF;
    color: #404040;
}

.evaluate-tbody tr td{
    text-align: center;
    border-right: 1px solid #CFCFCF;
    border-bottom: 1px solid #CFCFCF;
    color: #404040;
}

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

 corelib/common/popup/evaluateAnalysis.html

@@ -15,18 +15,18 @@
                <div class="evaluate-box-top-left">
                    <div class="column-1">
                        <div>
                            <span>受灾户数：</span><span>125</span>
                            <span >受灾户数：</span><span class="house">暂无数据</span>
                        </div>
                        <div>
                            <span>受灾面积：</span><span>47.999km²</span>
                            <span>受灾面积：</span><span class="area">暂无数据</span>
                        </div>
                    </div>
                    <div class="column-2">
                        <div>
                            <span>受灾人口：</span><span>625人</span>
                            <span>受灾人口：</span><span class="people">暂无数据</span>
                        </div>
                        <div>
                            <span>房屋价值：</span><span>189.999万元</span>
                            <span>房屋价值：</span><span class="money">暂无数据</span>
                        </div>
                    </div>
                </div>
@@ -41,20 +41,22 @@
                </div>
            </div>
            <div class="evaluate-box-middle">
                <table class="evaluate-table-thead table-thead">
                    <caption>人口财产淹没损失表</caption>
                    <thead>
                    <tr>
                        <th><div>编号</div></th>
                        <th><div>受淹户数(户)</div></th>
                        <th><div>受淹人口数量(人)</div></th>
                        <th><div>受淹居民地面积(km²)</div></th>
                        <th><div>受淹房屋价值(万元/人)</div></th>
                    </tr>
                    </thead>
                </table>
                <div class="evaluate-echarts" id="evaluate-echarts">
                <div class="evaluate-table">
                    <table>
                        <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>
                            </tr>
                        </thead>
                        <tbody id="evaluate-tbody" class="table-tbody evaluate-tbody"></tbody>
                    </table>
                </div>
                <div class="evaluate-echarts" id="evaluate-echarts"></div>
            </div>
        </div>


 corelib/common/popup/js/evaluateAnalysis.js

@@ -1,12 +1,12 @@
$(function () {
// change事件
    // change事件
    $('input[type=radio][name=value]').change(function () {
        if (this.value == 'list'){
            $('.evaluate-echarts').hide()
            $('.evaluate-box-top-left').css('visibility','visible')
            $('.evaluate-table-thead').show()
            $('.evaluate-table').show()
        }else {
            $('.evaluate-table-thead').hide()
            $('.evaluate-table').hide()
            $('.evaluate-box-top-left').css('visibility','hidden')

            recharts_z()
@@ -15,7 +15,9 @@
        }
    });

    //加载饼图
    function loadEcharts(){

        var echartsOption = {
            tooltip: {
                trigger: 'item'
@@ -57,15 +59,12 @@
            ]
        }



        var chartDom = document.getElementById('evaluate-echarts');
        var myChart = echarts.init(chartDom);
        echartsOption&&myChart.setOption(echartsOption,true);
    }

    function recharts_z() {
        console.log($(window).width(),$(window).height(),"777")
        var width = $(window).width() * 0.8;
        var height = ($(window).height() - 50) - 80;
        $('#evaluate-echarts').empty();
@@ -78,4 +77,13 @@
        }
        myChartPie.resize(resize);
    }

    //获取参数
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

});

 corelib/common/popup/rain.html

@@ -70,8 +70,7 @@
                    </table>
                    <div class="comTbody">
                        <table class="table-tbody rain-tbody" style="border-top: 0;">
                            <tbody id="rainTable">
                            </tbody>
                            <tbody id="rainTable"></tbody>
                        </table>
                    </div>
                </div>
@@ -95,7 +94,7 @@
                             </ul>
                         </div>
                     </div>
                </div>		 
                </div>
                <div class="rain-pei" id="dailyPei"></div>
                <div class="rain-tab">
                    <table class="table-thead rain-thead">
@@ -114,7 +113,7 @@
                            </tbody>
                        </table>
                    </div>
                </div>	 
                </div>
            </div>
            <!-- 特征雨量  -->
            <div class="river-thr none river-con">
@@ -138,7 +137,7 @@
                    <div class="comTbody">
                        <table class="table-tbody rain-tbody-box" style="border-top: 0;">
                            <tbody id="rainTbodyBox">
				            	

                            </tbody>
                        </table>
                    </div>
@@ -148,7 +147,7 @@
                <div class="river-fou-box">
                    <ul id="rainInfo">
                    </ul>
					

                </div>
            </div>
            <div class="load-box-list">
@@ -165,5 +164,5 @@
    <script src="./js/rain.js"></script>
    <script src="./js/start.js"></script>
    <script src="./js/end.js"></script>
</body>	
</body>
</html>

 widgets/FloodAnalysis/Widget.js

@@ -310,7 +310,7 @@
                this.addPoint()
                //切换底图
                $($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[0]).children('div:eq(0)').trigger('click');

                $($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[1]).children('div:eq(2)').trigger('click');

            },

@@ -449,17 +449,17 @@
            //洪水分析弹窗
            floodAnalysisPopup:function (){
                var url = './corelib/common/popup/floodAnalysis.html';
                var urlEvaluate = './corelib/common/popup/evaluateAnalysis.html'
                var top = ($(window).height() - 600) / 2;
                var left = ($(window).width() - 900 - 340) / 2 + 340;
                var self = this

                var inPolygon = []
                for (let i = 0; i < this.peoplePositionArray.length; i++) {
                    let inPolygon = this.isPointInPolygon(this.peoplePositionArray[i])

                    this.peoplePositionArray[i].inPolygon = inPolygon

                    let isIn = this.isPointInPolygon(this.peoplePositionArray[i])
                    if (isIn){
                        inPolygon.push(this.peoplePositionArray[i])
                    }
                }

                layer.open({
                    title:'模拟分析',
                    type: 2,
@@ -467,14 +467,44 @@
                    area: ['1100px', '600px'],
                    skin: 'floodAnalysis',
                    offset: [top, left],
                    content: url,
                    content: urlEvaluate,
                    id: "floodAnalysisLayer",
                    closeBtn: 1,
                    //把父页面数据传递给子弹窗并渲染
                    success: function(layero, index) {
                        var body = layer.getChildFrame("body",index);//绑定父子之间的关系，用于数据传递，缺少则无法传递
                        var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象
                        iframeWin.$('#canvasImage')[0].src = self.canvasImage; //渲染子页面中的img
                        //绑定父子之间的关系，用于数据传递，缺少则无法传递
                        var body = layer.getChildFrame("body",index);
                        //得到iframe页的窗口对象
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        console.log(iframeWin)
                        // //渲染子页面中的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 + '万元')

                    },
                });
            },
@@ -499,7 +529,6 @@

                var poly= turf.polygon([turfPolygon])
                var pt = turf.point([point.LGTD,point.LTTD])

                return turf.booleanPointInPolygon(pt,poly)
            },

@@ -513,6 +542,13 @@
                    success: function success(data) {
                        const viewer = self.map
                        var dataArray = data.data
                        dataArray.forEach(e=>{
                            e.house = Number(e.house)
                            e.people = Number(e.people)
                            e.area = Number(e.area)
                            e.money = Number(e.money)
                        })
                        self.peoplePositionArray = []
                        self.peoplePositionArray = dataArray
                        for (let i = 0; i < dataArray.length; i++) {
                            var temp = viewer.entities.add({

 widgets/FloodAnalysis/css/style.css

@@ -1,7 +1,7 @@
@import "Tooltip-div.css";
.jimu-widget-FloodAnalysis{
  width: 100%;
  height: 100%;
  height: 160px !important;
  position: fixed !important;
  left: 30px !important;
  top: 75px !important;
@@ -13,6 +13,7 @@
  color: rgb(255, 255, 255);
}


.jimu-widget-FloodAnalysis .flood-analysis-header {
    position: relative;
    width: 100%;

 widgets/FloodAnalysis/data.json

@@ -5,21 +5,63 @@
      "LGTD": "116.074778",
      "LTTD": "26.001260",
      "house": "35",
      "people": "175"
      "people": "175",
      "area": "12.888",
      "money": "50.123"
    },
    {
      "name": "球岭脑",
      "LGTD": "116.074808",
      "LTTD": "25.998297",
      "house": "40",
      "people": "124",
      "area": "12.078",
      "money": "51.3"
    },
    {
      "name": "车头村",
      "LGTD": "116.081811",
      "LTTD": "25.995014",
      "house": "35",
      "people": "175",
      "area": "12.888",
      "money": "50.123"
    },
    {
      "name": "咸泥垄",
      "LGTD": "116.082536",
      "LTTD": "26.003335",
      "house": "35",
      "people": "175",
      "area": "12.888",
      "money": "50.123"
    },
    {
      "name": "大排",
      "LGTD": "116.085055",
      "LTTD": "26.003224",
      "house": "20",
      "people": "100",
      "area": "8.551",
      "money": "39.789"
    },
    {
      "name": "金湾水库",
      "LGTD": "114.978944",
      "LTTD": "24.904194",
      "house": "35",
      "people": "175"
      "house": "70",
      "people": "350",
      "area": "24.456",
      "money": "100.456"
    },
    {
      "name": "雷公坝",
      "LGTD": "115.672889",
      "LTTD": "25.306611",
      "house": "35",
      "people": "175"
      "house": "20",
      "people": "100",
      "area": "8.551",
      "money": "39.789"
    }
  ]
}