洪水淹没-修改展示样式

guoshilong

2023-02-17 89d57baac18111b9d82c0858c0c680f2d481b8c9

 widgets/FloodAnalysis/Widget.js

@@ -2,7 +2,24 @@
// Copyright © 2022 guoshilong. All Rights Reserved.
// 模块描述:洪水淹没分析
///////////////////////////////////////////////////////////////////////////
define(['dojo/_base/declare', 'dojo/_base/lang', 'dojo/_base/array', 'dojo/_base/html', "dojo/topic", 'jimu/BaseWidget', 'dojo/on', 'dstore/Memory', 'dstore/Trackable', 'dgrid/Grid', 'dgrid/Keyboard', 'dgrid/Selection', 'dstore/RequestMemory', 'dgrid/test/data/createSyncStore', "libs/echarts/v4/echarts.min", 'libs/layer/layer.js', 'libs/turf/turf.min.js'], function (declare, lang, array, html, topic, BaseWidget, on, Memory, Trackable, Grid, Keyboard, Selection, RequestMemory, createSyncStore, echarts, layer, turf) {
define(['dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    "dojo/topic",
    'jimu/BaseWidget',
    'dojo/on',
    'dstore/Memory',
    'dstore/Trackable',
    'dgrid/Grid',
    'dgrid/Keyboard',
    'dgrid/Selection',
    'dgrid/Editor',
    'dstore/RequestMemory',
    'dgrid/test/data/createSyncStore',
    "libs/echarts/v4/echarts.min",
    'libs/layer/layer.js',
    'libs/turf/turf.min.js'], function (declare, lang, array, html, topic, BaseWidget, on, Memory, Trackable, Grid, Keyboard, Selection,Editor, RequestMemory, createSyncStore, echarts, layer, turf) {
    return declare([BaseWidget], {
        baseClass: 'jimu-widget-FloodAnalysis',
        name: 'FloodAnalysis',
@@ -105,16 +122,12 @@
                }
            })

            //历史风险图表格单选框改变事件
            $('input[type=radio][name=tableRadio]').change(function () {
                console.log(this.value)
            })

            //洪水淹没分析按钮点击事件
            this.analysisBtn.click(function () {
                self.analysisBtn.addClass('choose-button')
                self.analysisBtn.removeClass('unchoose-button')
                self.historyBtn.addClass('unchoose-button')
                self.historyBtn.removeClass('choose-button')
                self.divFloodHistory.hide()
                self.divFloodAnalysis.show()
                $('#history-pagination').hide()
@@ -128,6 +141,7 @@
                self.historyBtn.addClass('choose-button')
                self.historyBtn.removeClass('unchoose-button')
                self.analysisBtn.addClass('unchoose-button')
                self.analysisBtn.removeClass('choose-button')
                self.divFloodAnalysis.hide()
                self.divFloodHistory.show()
                $('#analysis-pagination').hide()
@@ -146,7 +160,6 @@
                setTimeout(function(){//有bug 需要延迟执行隐藏
                    $("#hd-select").hide()
                },300)

            })
            // 河道输入事件
            $('#hd-input').on("input", function () {
@@ -238,7 +251,8 @@
            $('#smx-select option').remove()
            $('#sw-input').val("")
            $('#hd-input').val("")
            $('#flood-tbody').html("")
            //清空表格数据
            $('.location-box-list').empty();
            $('#analysis-pagination').hide()

            this.analysisTableList = []
@@ -283,6 +297,7 @@
            $('.fold-btn').removeClass('close')
            $('.content').show()
            $("#sw-input").prop('disabled', true);
            $('#search-name').val("")
            this.isOpen = true

            this.analysisBtn.addClass('choose-button')
@@ -292,7 +307,10 @@

            this.currentHd = null
            this.currentSmxcode = ""
            //获取河段数据
            this.getHdData()
            //获取历史数据
            this.getHistoryList()
        },

        //获取河段下拉数据
@@ -450,7 +468,7 @@
            if (tableData.length <= 0 && pageElementId == "history-pagination") {
                $('#history-pagination').hide()
            }
            let pageSize = 19
            let pageSize = 10
            var count = Math.ceil(tableData.length / pageSize);
            var self = this
            $('#' + pageElementId).pagination({
@@ -469,7 +487,7 @@
                        }
                    }

                    pageElementId == "analysis-pagination" ? self.loadAnalysisTable(listdata) : self.loadHistoryTable(listdata)
                    pageElementId == "analysis-pagination" ? self.createList(listdata,"洪水淹没分析") : self.createList(listdata,"历史风险图")

                }
            });
@@ -485,26 +503,7 @@
                    startData.push(tableData[i]);
                }
            }
            pageElementId == "analysis-pagination" ? self.loadAnalysisTable(startData) : self.loadHistoryTable(startData)
        },

        /**
         * 加载淹没分析表格
         * @param listData 需要加载的数据
         */
        loadAnalysisTable(listData) {
            var table = ""
            listData.forEach(e => {
                table += '<tr>' +
                    '<td><div>' + e.location + '</div></td>' +
                    '<td><div>' + e.origin + '</div></td>' +
                    '<td><div>' + e.lng + '</div></td>' +
                    '<td><div>' + e.lat + '</div></td>' +
                    '<td><div>' + e.water + '</div></td>' +
                    '<td><div>' + e.sw + '</div></td>' +
                    '</tr>'
            })
            $('#flood-tbody').html(table)
            pageElementId == "analysis-pagination" ? self.createList(startData,"洪水淹没分析") : self.createList(startData,"历史风险图")
        },

        /**
@@ -617,13 +616,13 @@
            return (arg1 * m + arg2 * m) / m;
        },

        //删除地图上的标注点位
        deleteEntities(entities) {
            entities.forEach(e => {
                this.map.entities.remove(e)
            })
            entities = []
        },


        //评估分析弹窗
        evaluatePopup() {
@@ -648,6 +647,43 @@
            });
        },

        //http://dgrid.io/tutorials/1.0/hello_dgrid/    创建表格
        createList: function (dataList, txt) {
            $('.location-box-list').empty();
            var CustomGrid = declare([Grid, Keyboard, Selection,Editor]);
            var column, tab, moon, dauy;
            if (txt == "洪水淹没分析") {
                column = {
                    location: '位置',
                    origin: '起点距',
                    water: '水面线',
                    sw: '水位',
                    lng:'经度',
                    lat:'纬度',
                }
                tab = 'analysis-tab1-grid'
            } else if (txt == "历史风险图") {
                column = {
                    radio:{ label: "", field: "radio", editor: 'radio' },
                    name: '名称',
                }
                tab = 'history-tab2-grid'
            }
            var grid = new CustomGrid({
                columns: column,
                selectionMode: 'none', // for Selection; only select a single row at a time
                cellNavigation: false, // for Keyboard; allow only row-level keyboard navigation
            }, tab);
            grid.startup();

            //点击事件
            grid.on("dgrid-datachange", function(evt){
                //获取行数据
                let data = evt.cell.row.data
            });
            grid.renderArray(dataList);
        },


    });
});