洪水淹没-样式调整、对离水文站最近点数据进行标记

guoshilong

2023-02-17 6d235a3cff5303a5ce9b8555f0e3280a640534f0

洪水淹没-样式调整、对离水文站最近点数据进行标记

 widgets/FloodAnalysis/Widget.html

@@ -41,7 +41,7 @@
                        <input id="realtime" type="radio" name="middleRadio" value="realtime" checked='checked'>实时
                        <input id="forecast" type="radio" name="middleRadio" value="forecast">预测
                    </div>
                    <div style="height: 71%" class="location-box-list" id="analysis-tab1-grid" data-dojo-attach-point="analysis-tab1-grid">
                    <div style="height: 72%" class="analysis-box-list" id="analysis-tab1-grid" data-dojo-attach-point="analysis-tab1-grid">
                    </div>
                    <div class="flood-analysis-pagination" id="analysis-pagination"></div>
                </div>
@@ -52,7 +52,7 @@
                               maxlength="256" placeholder="请输入筛选名称"/>
                        <input id="search-button" class="search-button" type="button" value="查  询"/>
                    </div>
                    <div style="height: 100%" class="location-box-list" id="history-tab2-grid" data-dojo-attach-point="history-tab2-grid">
                    <div style="height: 100%" class="history-box-list" id="history-tab2-grid" data-dojo-attach-point="history-tab2-grid">
                    </div>
                    <div class="flood-analysis-pagination" id="history-pagination"></div>
                </div>

 widgets/FloodAnalysis/Widget.js

@@ -48,19 +48,20 @@
        currentHd: null,
        //当前选中的水面线
        currentSmxcode: "",
        //水文站最近的点
        currentNearPoint:null,
        //收起框打开状态
        isOpen: true,
        //api接口
        url: {
            riverwaySelectName: "http://localhost:82/blade-ycreal/riverway/selectName",
            waterlineSelectName: "http://localhost:82/blade-ycreal/waterline/selectName",
            childpage: "http://localhost:82/blade-ycreal/water/childpage",
            getCzByGlCodeByGlQdj: "http://localhost:82/blade-ycreal/waterline/getCzByGlCodeByGlQdj",
            riverwaySelectName: "http://192.168.0.103:82/blade-ycreal/riverway/selectName",
            waterlineSelectName: "http://192.168.0.103:82/blade-ycreal/waterline/selectName",
            childpage: "http://192.168.0.103:82/blade-ycreal/water/childpage",
            getCzByGlCodeByGlQdj: "http://192.168.0.103:82/blade-ycreal/waterline/getCzByGlCodeByGlQdj",
            getHistoryList: "",
            saveHistoryData: "",
            getCoordinatesMinQdj: "http://192.168.0.103:82/blade-ycreal/water/getCoordinatesMinQdj",
        },
        //弹出框索引，用来关闭弹出框
        popupIndex: "",
        evaluateData: [
            {
                name: "会昌县",
@@ -161,7 +162,7 @@
                    $("#hd-select").hide()
                },300)
            })
            // 河道输入事件
            // 河段输入事件
            $('#hd-input').on("input", function () {
                var searchString = $('#hd-input').val()
                var filterArray = self.hdDataList.filter(e => {
@@ -184,7 +185,7 @@
                var selected = JSON.parse($(this).val())
                self.currentHd = selected
                self.getSmxData(selected.river_code, selected.default_smx)

                self.getMin(selected.default_smx,selected.gl_qdj)
                //地图定位
                self.map.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(selected.river_origin, selected.qd_lat, 50000),
@@ -433,25 +434,25 @@
        //获取历史风险图数据列表
        getHistoryList() {
            const self = this
            $.ajax({
                url: self.url.getHistoryList,
                type: 'get',
                dataType: 'json',
                jsonp: 'callback',
                jsonpCallback: 'data',
                data: {
                    name: "",
                },
                success: function (res) {
                    if (res.code == 200) {
                        let data = res.data.records
                        if (self.popupIndex != "") {
                            layer.close(self.popupIndex)
                            self.popupIndex = ""
                        }
                    }
                }
            });
            // $.ajax({
            //     url: self.url.getHistoryList,
            //     type: 'get',
            //     dataType: 'json',
            //     jsonp: 'callback',
            //     jsonpCallback: 'data',
            //     data: {
            //         name: "",
            //     },
            //     success: function (res) {
            //         if (res.code == 200) {
            //             console.log(res)
            //             let data = res.data.records
            //
            //         }
            //     }
            // });
            let data = self.historyTableList
            self.loadPagination(data,"history-pagination")
        },

        /**
@@ -581,6 +582,27 @@

        },

        //获取最接近水文站的值
        getMin(smxcode, glQdj) {
            const self = this
            $.ajax({
                url: self.url.getCoordinatesMinQdj,
                type: 'get',
                dataType: 'json',
                jsonp: 'callback',
                jsonpCallback: 'data',
                data: {
                    smxcode:smxcode,
                    glQdj:glQdj
                },
                success: function (res) {
                    if (res.code == 200) {
                        self.currentNearPoint = res.data
                    }
                }
            });
        },

        //保存历史风险图
        saveHistoryData() {
            const self = this
@@ -649,38 +671,71 @@

        //http://dgrid.io/tutorials/1.0/hello_dgrid/    创建表格
        createList: function (dataList, txt) {
            $('.location-box-list').empty();
            const self = this
            var CustomGrid = declare([Grid, Keyboard, Selection,Editor]);
            var column, tab, moon, dauy;
            var formatter = function (value,object) {
                if (self.currentNearPoint.id == object.id) {
                    return '<span style="color:red">' + value + '</span>'
                } else {
                    return value
                }
            }
            if (txt == "洪水淹没分析") {
                $('.analysis-box-list').empty();
                column = {
                    location: '位置',
                    origin: '起点距',
                    water: '水面线',
                    sw: '水位',
                    lng:'经度',
                    lat:'纬度',
                    location: {
                        label:'位置',
                        formatter:formatter
                    },
                    origin: {
                        label:'起点距',
                        formatter:formatter
                    },
                    water: {
                        label:'水面线',
                        formatter:formatter
                    },
                    sw: {
                        label:'水位',
                        formatter:formatter
                    },
                    lng:{
                        label:'经度',
                        formatter:formatter
                    },
                    lat:{
                        label:'纬度',
                        formatter:formatter
                    },
                }
                tab = 'analysis-tab1-grid'
            } else if (txt == "历史风险图") {
                $('.history-box-list').empty();
                column = {
                    radio:{ label: "", field: "radio", editor: 'radio' },
                    // 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
                selectionMode: 'single', // for Selection; only select a single row at a time
                cellNavigation: false, // for Keyboard; allow only row-level keyboard navigation
            }, tab);
            grid.startup();

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

            grid.on("dgrid-select", function(evt){
                //获取行数据
                let data = evt.rows[0].data
                console.log(data)
            });
            grid.renderArray(dataList);
        },


 widgets/FloodAnalysis/css/style.css

@@ -91,13 +91,19 @@
    color: white;
}


#tablist{
    margin-top: 10px;
}

.select-box , .search-box{
.select-box{
    border: 1px solid #d2d2d0;
    padding: 5px !important;
}

.search-box{
    border: 1px solid #d2d2d0;
    padding: 5px !important;
    margin-bottom: 1% !important;
}

/**河段选择框**/
@@ -107,7 +113,7 @@
}

.hd input {
    width: 230px;
    width: 260px;
    outline: none;
    border: 0pt;
    line-height: 30px;
@@ -134,23 +140,25 @@

/**水面线选择框**/
.smx-select{
    width: 230px;
    width: 260px;
    height: 26px;
    border: 1px solid rgba(160, 160, 156, 1);
}

/**水位输入框**/
.sw-input{
    width: 160px;
    width: 201px;
    height: 26px;
    margin-left: 9px !important;
    border: 1px solid rgba(160, 160, 156, 1);
}

.start-analysis-btn{
/**开始分析按钮、搜索按钮**/
.start-analysis-btn , .search-button{
    height: 26px;
    border: none;
    cursor: pointer;
    margin-left: 1% !important;
}

/**水位提示**/
@@ -216,9 +224,9 @@
    width: 25px;
    height: 25px;
    line-height: 25px !important;
    background: rgb(39, 118, 172);
    background: #ffffff;
    border: 1px solid #ebebeb;
    color: #ffffff;
    color: #bdbdbd;
    font-size: 14px;
}

@@ -269,9 +277,10 @@
    width: 38px !important;
}

/**洪水淹没分析表格宽度**/
/**洪水淹没分析表格**/
#analysis-tab1-grid .dgrid-cell {
    width: 80px; /* force all columns to have SOME width */
    text-align: center;
}
#analysis-tab1-grid .field-col1 {
    width: 500px;
@@ -279,3 +288,8 @@
#analysis-tab1-grid .field-col4 {
    width: 300px;
}

/**历史风险图表格**/
#history-tab2-grid .dgrid-cell {
    text-align: center;
}