洪水淹没-分析窗口图片放大、分析窗口标题按钮调整

guoshilong

2023-02-22 9fcce377443b1979155c920f183688c9ffa1ae75

洪水淹没-分析窗口图片放大、分析窗口标题按钮调整

 corelib/common/popup/css/style.css

@@ -824,7 +824,7 @@

.evaluate-box-bottom{
    display: flex;
    justify-content: space-between;
    justify-content: center;
}

.evaluate-box-bottom input{
@@ -836,15 +836,16 @@
    border-radius: 5px;
}

.evaluate-box-bottom .close-btn{
    background-color:#bbbaba
}

.evaluate-box-bottom input:hover{
    background: #094895
}

.export-img{
    margin-right: 10px;
}

.save-btn{
    margin-right: 10px;
}

@@ -1068,3 +1069,5 @@
    width: 80px;
    height: 32px;
}



 corelib/common/popup/evaluateAnalysis.html

@@ -12,7 +12,9 @@
        <div class="evaluate-box-top">
            <div class="flood-image-box">
                <div class="flood-image-top">
                    <img style="width: 100%;height: 100%" id="show-img" src="..\widgets\FloodAnalysis\image\floodAnalysisEvaluate-2.png">
                    <div>
                        <img id="show-img" class="show-img" src="image/floodAnalysisEvaluate-2.png" width="100%" height="100%">
                    </div>
                </div>
                <div class="description">
                    <!--已经与数据联动，此处可删可不删-->
@@ -23,24 +25,6 @@
        <hr style="margin-bottom: 11px;"/>
        <div class="evaluate-box-middle">
            <div  class="evaluate-middle-first" style="display: flex">
<!--                <div>-->
<!--                    <div class="row-1">-->
<!--                        <div style="width: 150px">-->
<!--                            <span>淹没面积：</span><span class="house">暂无数据</span>-->
<!--                        </div>-->
<!--                        <div style="width: 205px">-->
<!--                            <span>淹没耕地面积：</span><span class="area">暂无数据</span>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="row-2">-->
<!--                        <div style="width: 150px">-->
<!--                            <span>影响人口：</span><span class="people">暂无数据</span>-->
<!--                        </div>-->
<!--                        <div>-->
<!--                            <span>淹没GDP：</span><span class="money">暂无数据</span>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
            <div class="evaluate-middle-second">
                <div class="list-echarts-button">
@@ -53,7 +37,6 @@
                </div>
                <div class="evaluate-table">
                    <table>
<!--                            <caption class="evaluate-table-caption table-caption">洪水淹没统计</caption>-->
                        <div class="table-title">
                            <div class="table-label">洪水淹没统计</div>
                        </div>
@@ -84,15 +67,11 @@
            </div>
        </div>
        <div class="evaluate-box-bottom">
            <div>
                <input id="export-img" class="export-img" type="button" value="导出成果图"/>
                <input id="save-btn" class="save-btn" type="button" value="保存"/>
            </div>

            <input id="export-img" class="export-img" type="button" value="导出成果图"/>
            <input id="save-btn" class="save-btn" type="button" value="保存"/>
            <input id="close-btn" class="close-btn" type="button" value="关闭"/>
        </div>
    </div>

</div>



 corelib/common/popup/js/evaluateAnalysis.js

@@ -22,44 +22,6 @@
    //初始化
    init()

    $('#list').click(function () {
        $('.evaluate-echarts').hide()
        $('.evaluate-table').show()
        $('.flood-analysis-pagination').show()
        $('.list').addClass('choose-button')
        $('.list').removeClass('unchoose-button')
        $('.echarts').addClass('unchoose-button')
        $('.echarts').removeClass('choose-button')
    })

    $('#echarts').click(function () {
        $('.evaluate-table').hide()
        $('.flood-analysis-pagination').hide()
        recharts_z()
        loadEcharts()
        $('.evaluate-echarts').show()

        $('.echarts').addClass('choose-button')
        $('.echarts').removeClass('unchoose-button')
        $('.list').addClass('unchoose-button')
        $('.list').removeClass('choose-button')
    })

    //淹没图弹窗事件
    $('#create-flood-image').click(function () {
        exportPicture()
    })

    //保存按钮点击事件
    $('#save-btn').click(function () {
        confirmPopup()
    })

    //导出按钮点击事件
    $('#export-img').click(function () {
        exportPicture()
    })

    //确认弹窗
    function confirmPopup() {
        const self = this
@@ -252,6 +214,46 @@

    //初始化
    function init() {

        $('#list').click(function () {
            $('.evaluate-echarts').hide()
            $('.evaluate-table').show()
            $('.flood-analysis-pagination').show()
            $('.list').addClass('choose-button')
            $('.list').removeClass('unchoose-button')
            $('.echarts').addClass('unchoose-button')
            $('.echarts').removeClass('choose-button')
        })

        $('#echarts').click(function () {
            $('.evaluate-table').hide()
            $('.flood-analysis-pagination').hide()
            recharts_z()
            loadEcharts()
            $('.evaluate-echarts').show()

            $('.echarts').addClass('choose-button')
            $('.echarts').removeClass('unchoose-button')
            $('.list').addClass('unchoose-button')
            $('.list').removeClass('choose-button')
        })

        //淹没图弹窗事件
        $('#create-flood-image').click(function () {
            exportPicture()
        })

        //保存按钮点击事件
        $('#save-btn').click(function () {
            confirmPopup()
        })

        //导出按钮点击事件
        $('#export-img').click(function () {
            exportPicture()
        })


        //图片展示
        $('#show-img').prop('src', 'image/floodAnalysisEvaluate-2.png')
        $('.list').addClass('choose-button')

 widgets/FloodAnalysis/Widget.html

@@ -71,4 +71,15 @@
        </span>
    </div>
    <div id="restore-icon" class="restore-icon"></div>
    <!-- 弹窗 -->
    <div id="myModal" class="modal">
        <!-- 关闭按钮 -->
        <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
        <div style="height: 100%;display: flex;align-items: center">
            <!-- 弹窗内容 -->
            <img class="modal-content" id="img01" src="">
        </div>
        <!-- 文本描述 -->
        <div id="caption"></div>
    </div>
</div>

 widgets/FloodAnalysis/Widget.js

@@ -704,7 +704,7 @@
            var top = ($(window).height() - 764) / 2;
            var left = ($(window).width() -465);
            layer.open({
                title: '评估分析',
                title: '分析结果',
                shade: 0,
                type: 2,
                maxmin: true, //开启最大化最小化按钮
@@ -713,42 +713,13 @@
                offset: [top,left],
                content: url + "?parentData=" + encodeURIComponent(JSON.stringify(parentData)),//使用encodeURIComponent转码，避免中文字符乱码，避免url截取错误
                id: "floodAnalysisLayer",
                closeBtn: 1,
                closeBtn: 0,
                shade: 0,
                move:false,
                maxmin: false,
                //设置默认不在左下角
                minStack:false,
                min: function(layero,index){
                    setTimeout(function(){
                        // layero.css({
                        //     'width':'50px',
                        //     'top': '83px',
                        //     'left':'inherit',
                        //     'right':'0px',
                        // })
                    })
                    //显示最大化icon
                    $('.layui-layer-max').css("display","")
                    //标题背景改变
                    $('.layui-layer-title').css({
                        'background-color':'rgb(255,255,255)'
                    })
                    return false
                },
                restore: function(layero,index) {
                    //隐藏最大化icon
                    $('.layui-layer-max').css("display","none")
                    //还原时窗口长宽会减小，原因未知。因此还原时再设置一次长宽
                    layero.css({
                        'width':'465px',
                        'height':'818px'
                    })
                    //还原标题背景色
                    $('.layui-layer-title').css({
                        'background-color':'rgb(0, 73, 135)'
                    })
                },
                zIndex:-100000,
                success:function (layero,index) {
                    $('.layui-layer-setwin .layui-layer-min cite').css("background-color",'white')
                    //绑定父子之间的关系，用于数据传递，缺少则无法传递
@@ -775,6 +746,32 @@
                        $('.layui-layer-max').css("display","none")
                    }

                    //图片放大方法
                    // 思路: 获取所有要用的 => 然后通过点击图片显示弹窗 => 赋值到弹窗里面 => 图片赋值 => 文本赋值
                    // 获取点击图片
                    var img = iframeWin.$('#show-img')
                    // 获取弹窗
                    var modal = $('#myModal')
                    // 弹窗图片
                    var contImg = $('#img01')
                    // 文本内容
                    var caption = $('#caption')

                    img.click(function () {
                        // console.log('111');
                        modal.css({
                            "display":"block",
                            'position':'fixed',
                            'background-color':'#2f353cd4'
                        })
                        contImg.prop('src',img.prop('src'))
                    })
                    // 点击x按钮关闭弹窗
                    var closeBox = $('.close')
                    closeBox.click(function () {
                        modal.css('display','none')
                    })

                },
                cancel:function (layero,index) {
                    self.popupLayer.css('display','none')

 widgets/FloodAnalysis/css/style.css

@@ -394,3 +394,113 @@
    background-repeat: no-repeat;
    cursor: pointer;
}

/**图片放大**/
/* 触发弹窗图片的样式 */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {
    opacity: 0.7;
}

/* 弹窗背景 */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 9999;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color:#2f353cc9;
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
}

/* 图片 */
.modal-content {
    margin: 0 auto !important;
    display: block;
    /*width: 80%;*/
    /*max-width: 700px;*/
}

/* 文本内容 */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* 添加动画 */
.modal-content,
#caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* 关闭按钮 */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 小屏幕中图片宽度为 100% */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}