洪水淹没-淹没分析表格位置添加悬浮框提示

guoshilong

2023-02-24 329c3d1dc67a9ef404f623f4cea36d855d7e3dd9

洪水淹没-淹没分析表格位置添加悬浮框提示

 widgets/FloodAnalysis/Widget.html

@@ -82,4 +82,7 @@
        <!-- 文本描述 -->
        <div id="caption"></div>
    </div>
    <div id="tableTip" class="tableTip">
        11111111
    </div>
</div>

 widgets/FloodAnalysis/Widget.js

@@ -9,6 +9,7 @@
    "dojo/topic",
    'jimu/BaseWidget',
    'dojo/on',
    'dojo/mouse',
    'dstore/Memory',
    'dstore/Trackable',
    'dgrid/Grid',
@@ -19,7 +20,7 @@
    '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) {
    'libs/turf/turf.min.js'], function (declare, lang, array, html, topic, BaseWidget, on,mouse, Memory, Trackable, Grid, Keyboard, Selection,Editor, RequestMemory, createSyncStore, echarts, layer, turf) {
    return declare([BaseWidget], {
        baseClass: 'jimu-widget-FloodAnalysis',
        name: 'FloodAnalysis',
@@ -852,6 +853,27 @@
            //     let data = evt.cell.row.data
            // });

            function makeHandler (grid, type, dir) {
                return function (event) {
                    let tip = $('#tableTip')
                    var obj = grid[type](event)

                    if (dir == 'entered' && obj.column.field == 'location' ){
                        tip.show()
                        tip.css({
                            "top":(194+(Number(obj.row.id)*24.5))+'px',
                            // "left":event.offsetX+10+'px'
                        })
                        tip.html(obj.row.data.location)
                    }else if (dir == 'left'){
                        tip.hide()
                    }
                };
            }

            grid.on(on.selector('.dgrid-content .dgrid-cell', mouse.enter), makeHandler(grid, 'cell', 'entered'));
            grid.on(on.selector('.dgrid-content .dgrid-cell', mouse.leave), makeHandler(grid, 'cell', 'left'));

            //防止绑定多次点击事件
            if (this.dgridSelectEvent){
                this.dgridSelectEvent.remove()
@@ -892,6 +914,7 @@
                    });
                }
            });

            grid.renderArray(dataList);
        },


 widgets/FloodAnalysis/css/style.css

@@ -504,3 +504,18 @@
        width: 100%;
    }
}

/**提示**/
.tableTip {
    display: none;
    background-color: rgb(0 0 0 / 61%);
    padding: 5px;
    border: 1px solid #000;
    position: absolute;
    z-index: 10 !important;
    border-radius: 5px;
    height: 25px;
    color: white;
    font-size: 16px;
    line-height: 25px;
}