hsyjv2.git - Gitblit

parent: 17ab5755 | patch | commit | ignore whitespace

水文水环境分析-洪水淹没：1、添加淹没图弹窗；2、模拟分析窗口改为屏幕显示，取消弹窗

guoshilong

2023-02-04 0a39c24bbc9b91eb552d8201ba6907305233b8f5

水文水环境分析-洪水淹没：1、添加淹没图弹窗；2、模拟分析窗口改为屏幕显示，取消弹窗

7 files modified

4 files added

	corelib/common/popup/css/style.css	12 ●●●●● patch \| view \| raw \| blame \| history
	corelib/common/popup/evaluateAnalysis.html	2 ●●●●● patch \| view \| raw \| blame \| history
	corelib/common/popup/floodImage.html	19 ●●●●● patch \| view \| raw \| blame \| history
	corelib/common/popup/img/floodAnalysisEvaluate-2.png	patch \| view \| raw \| blame \| history
	corelib/common/popup/img/floodAnalysisEvaluate.jpg	patch \| view \| raw \| blame \| history
	corelib/common/popup/js/evaluateAnalysis.js	42 ●●●●● patch \| view \| raw \| blame \| history
	corelib/common/popup/js/floodImage.js	12 ●●●●● patch \| view \| raw \| blame \| history
	widgets/FloodAnalysis/Widget.html	23 ●●●●● patch \| view \| raw \| blame \| history
	widgets/FloodAnalysis/Widget.js	37 ●●●●● patch \| view \| raw \| blame \| history
	widgets/FloodAnalysis/css/style.css	55 ●●●●● patch \| view \| raw \| blame \| history
	widgets/RiskEarlyWarning/Widget.js	1 ●●●●● patch \| view \| raw \| blame \| history

 corelib/common/popup/css/style.css

@@ -845,7 +845,7 @@
    margin: 15px 0 15px 0;
}

.evaluate-table-thead tr td{
.evaluate-table-thead tr th{
    text-align: center;
    border-right: 1px solid #CFCFCF;
    border-bottom: 1px solid #CFCFCF;
@@ -867,3 +867,13 @@
    width: 100%;
    display: none;
}

/**淹没图**/
.flood-image-top img{
    width: 100%;
}

.flood-image-bottom{
    width: 96%;
    text-align: right;
}

 corelib/common/popup/evaluateAnalysis.html

@@ -61,7 +61,7 @@
        </div>

        <div class="evaluate-bottom">
            <button type="button">生成淹没图</button>
            <button id="create-flood-image" type="button">生成淹没图</button>
        </div>

    </div>

 corelib/common/popup/floodImage.html

New file
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淹没图弹出框</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="">
</head>
<body>
    <div class="flood-image-box">
        <div class="flood-image-top">
            <img src="img/floodAnalysisEvaluate-2.png">
        </div>
        <div class="flood-image-bottom">
            <a href="img/floodAnalysisEvaluate-2.png" download="淹没图.jpg"><button id="exportImage" type="button" >导出</button></a>
        </div>
    </div>
</body>
</html>

 corelib/common/popup/img/floodAnalysisEvaluate-2.png


 corelib/common/popup/img/floodAnalysisEvaluate.jpg


 corelib/common/popup/js/evaluateAnalysis.js

@@ -1,4 +1,16 @@
$(function () {
    //获取父窗口传来的数据
    var data = JSON.parse(GetQueryString("data"))
    //配置饼图数据
    var pieData = []
    if (data.length>0){
        data.forEach(e=>{
            pieData.push({
                value : e.people,
                name:e.name
            })
        })
    }
    // change事件
    $('input[type=radio][name=value]').change(function () {
        if (this.value == 'list'){
@@ -14,6 +26,11 @@
            $('.evaluate-echarts').show()
        }
    });

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

    //加载饼图
    function loadEcharts(){
@@ -50,11 +67,7 @@
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: '会昌县' },
                        { value: 735, name: '石城县' },
                        { value: 580, name: '宁都县' },
                    ]
                    data: pieData
                }
            ]
        }
@@ -81,9 +94,26 @@
    //获取参数
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        var r = decodeURI(window.location.search).substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    //淹没图弹窗
    function imagePopup(){
        var url = './corelib/common/popup/floodImage.html';
        var top = ($(window).height() - 526) / 2;
        var left = ($(window).width() - 500 - 340) / 2 + 340;
        parent.layer.open({
            title:'影响分析',
            type: 2,
            maxmin: false, //开启最大化最小化按钮
            area: ['1000px', '800px'],
            skin: 'floodImage',
            offset: [top, left],
            content: url,
            id: "floodImageLayer",
            closeBtn: 1
        });
    }
});

 corelib/common/popup/js/floodImage.js

New file
@@ -0,0 +1,12 @@
$(function () {
    $('#exportImage').click(function () {
        exportImage()
    })


    function exportImage(){
        //          ./img/floodAnalysisEvaluate.jpg
        // $('.flood-image-bottom a').attr('href','./img/floodAnalysisEvaluate.jpg')
    }

});

 widgets/FloodAnalysis/Widget.html

@@ -20,4 +20,27 @@
<!--            </div>-->
        </div>
    </div>

    <div class="flood-detail">
        <div class="flood-detail-header">
            <i></i> 洪水淹没详情
        </div>

        <div class="flood-detail-content">
            <div class="flood-detail-text">
                <div>
                    <span>0-3m淹没面积：</span><span>10km²</span>
                </div>
                <div>
                    <span>1-2m淹没面积：</span><span>20km²</span>
                </div>
                <div>
                    <span>>3m淹没面积：</span><span>22km²</span>
                </div>
            </div>
            <div class="flood-detail-button">
                <input type="button" id="flood-detail-ksfx" value="开始分析" />
            </div>
        </div>
    </div>
</div>

 widgets/FloodAnalysis/Widget.js

@@ -49,8 +49,7 @@
                this.map.scene.globe.depthTestAgainstTerrain = true;
                //取消双击事件
                this.map.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);


                //绘制水面事件
                $("#flood_hzsm_headtab").click(function () {
                    DrawDynamicClampGround.startDrawingPolyline(self.map, function (cartesians) {
                        if (self.drawingPolyline != undefined)
@@ -67,12 +66,14 @@
                        cartesians.splice(cartesians.length - 1, cartesians.length);
                        self.drawLines(cartesians);
                        self.movehandLer()
                        self.showDetail(true)
                    });
                });

                $('#flood_qcsmx_headtab').click(function () {
                    self.map.entities.remove(self.drawingPolyline);
                    self.map.scene.primitives.remove(self.riverPrimitive);
                    self.showDetail(false)
                })


@@ -96,6 +97,9 @@
                // $("#thematic_smxj_headtab").click(function () {
                //     self.offsetHeight(-Number($("#thematic_bhz_headtab").val()), 5);
                // });
                $('#flood-detail-ksfx').click(function () {
                    self.floodAnalysisPopup()
                })


            },
@@ -111,7 +115,6 @@
            prepareVertex: function () {
                if (this.positions.length > 0) {
                    this.sideRes = this._lines2Plane(this.positions, this.riverWidth, this.riverHeight);
                    console.log(this.sideRes,"----000----")
                }
            },
            setPositions: function (e) {
@@ -312,6 +315,12 @@
                $($('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');

                this.map.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(116.021604,25.893668, 50000),
                });

                this.showDetail(false)

            },

            onClose: function () {
@@ -440,8 +449,8 @@
            //点击事件
            clickHand:function (click){
                var pickedObjects = this.map.scene.pick(click.position);
                if (pickedObjects.primitive instanceof Cesium.Primitive) {
                    this.canvasToImage()
                if (pickedObjects && pickedObjects.primitive instanceof Cesium.Primitive) {
                    // this.canvasToImage()
                    this.floodAnalysisPopup()
                }
            },
@@ -460,14 +469,16 @@
                        inPolygon.push(this.peoplePositionArray[i])
                    }
                }
                var jsonStr = JSON.stringify(inPolygon)

                layer.open({
                    title:'模拟分析',
                    title:'评估分析',
                    type: 2,
                    maxmin: false, //开启最大化最小化按钮
                    area: ['1100px', '600px'],
                    skin: 'floodAnalysis',
                    offset: [top, left],
                    content: urlEvaluate,
                    content: urlEvaluate + "?data=" + encodeURIComponent(jsonStr),//使用encodeURIComponent转码，避免中文字符乱码，避免url截取错误
                    id: "floodAnalysisLayer",
                    closeBtn: 1,
                    //把父页面数据传递给子弹窗并渲染
@@ -476,7 +487,6 @@
                        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 = ""
@@ -513,6 +523,15 @@
            addPoint:function (){
                const url = './widgets/FloodAnalysis/data.json'
                this.getJsonUrl(url)
            },

            showDetail:function(show){
                //显示详情
                if (show){
                    $('.flood-detail').show()
                }else {
                    $('.flood-detail').hide()
                }
            },

            //判断点是否在多边形内部
@@ -589,7 +608,7 @@
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        }
        },


        });

 widgets/FloodAnalysis/css/style.css

@@ -83,3 +83,58 @@
.jimu-widget-FloodAnalysis .flood-water-analysis .flood-water-analysis-new input:nth-child(even) {
    float: right;
}

.flood-detail{
    position: fixed;
    top: 270px;
    width: 440px;
    height: 200px;
    left: 30px !important;
    overflow-x: hidden;
    background: rgba(31, 39, 48, .7);
    font-size: 14px;
    border: 1px solid rgb(69, 154, 251);
    border-radius: 5px;
    color: rgb(255, 255, 255);
    display: none;
}

.flood-detail-header {
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    border-bottom: 1px solid rgb(69, 154, 251);
}

.flood-detail-header i {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url(../../../images/toolbox.png ) no-repeat 0 -20px;
    background-size: 20px;
}

.flood-detail-content{
    height: 45%;
    text-align: center;
    margin: 12px 17px 10px 17px;
}

.flood-detail-text{
    height: 95%;
    font-size: 20px;
}

.flood-detail-button input{
    margin: 5px 0;
    width: 48%;
    height: 36px;
    color: #fff;
    background: rgb(2,24,55);
    border: 1px solid rgb(69, 154, 251);
    border-radius: 4px;
}

 widgets/RiskEarlyWarning/Widget.js

@@ -3604,7 +3604,6 @@
            // 注册鼠标左键单击事件
            clickHand: function clickHand(click) {
                var pickedObjects = this.map.scene.drillPick(click.position);
                console.log(pickedObjects,click,"5555")
                if (Cesium.defined(pickedObjects)) {
                    for (var i = 0; i < pickedObjects.length; ++i) {
                        var obj = pickedObjects[i].id;

			@@ -845,7 +845,7 @@
			margin: 15px 0 15px 0;
			}

			.evaluate-table-thead tr td{
			.evaluate-table-thead tr th{
			text-align: center;
			border-right: 1px solid #CFCFCF;
			border-bottom: 1px solid #CFCFCF;
			@@ -867,3 +867,13 @@
			width: 100%;
			display: none;
			}

			/淹没图/
			.flood-image-top img{
			width: 100%;
			}

			.flood-image-bottom{
			width: 96%;
			text-align: right;
			}

			@@ -61,7 +61,7 @@
			</div>

			<div class="evaluate-bottom">
			<button type="button">生成淹没图</button>
			<button id="create-flood-image" type="button">生成淹没图</button>
			</div>

			</div>

New file
			@@ -0,0 +1,19 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<title>淹没图弹出框</title>
			<link rel="stylesheet" href="./css/style.css">
			<link rel="stylesheet" href="">
			</head>
			<body>
			<div class="flood-image-box">
			<div class="flood-image-top">
			<img src="img/floodAnalysisEvaluate-2.png">
			</div>
			<div class="flood-image-bottom">
			<a href="img/floodAnalysisEvaluate-2.png" download="淹没图.jpg"><button id="exportImage" type="button" >导出</button></a>
			</div>
			</div>
			</body>
			</html>

			@@ -1,4 +1,16 @@
			$(function () {
			//获取父窗口传来的数据
			var data = JSON.parse(GetQueryString("data"))
			//配置饼图数据
			var pieData = []
			if (data.length>0){
			data.forEach(e=>{
			pieData.push({
			value : e.people,
			name:e.name
			})
			})
			}
			// change事件
			$('input[type=radio][name=value]').change(function () {
			if (this.value == 'list'){
			@@ -14,6 +26,11 @@
			$('.evaluate-echarts').show()
			}
			});

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

			//加载饼图
			function loadEcharts(){
			@@ -50,11 +67,7 @@
			labelLine: {
			show: false
			},
			data: [
			{ value: 1048, name: '会昌县' },
			{ value: 735, name: '石城县' },
			{ value: 580, name: '宁都县' },
			]
			data: pieData
			}
			]
			}
			@@ -81,9 +94,26 @@
			//获取参数
			function GetQueryString(name) {
			var reg = new RegExp("(^\|&)" + name + "=([^&]*)(&\|$)");
			var r = window.location.search.substr(1).match(reg);
			var r = decodeURI(window.location.search).substr(1).match(reg);
			if (r != null) return unescape(r[2]);
			return null;
			}

			//淹没图弹窗
			function imagePopup(){
			var url = './corelib/common/popup/floodImage.html';
			var top = ($(window).height() - 526) / 2;
			var left = ($(window).width() - 500 - 340) / 2 + 340;
			parent.layer.open({
			title:'影响分析',
			type: 2,
			maxmin: false, //开启最大化最小化按钮
			area: ['1000px', '800px'],
			skin: 'floodImage',
			offset: [top, left],
			content: url,
			id: "floodImageLayer",
			closeBtn: 1
			});
			}
			});

New file
			@@ -0,0 +1,12 @@
			$(function () {
			$('#exportImage').click(function () {
			exportImage()
			})


			function exportImage(){
			// ./img/floodAnalysisEvaluate.jpg
			// $('.flood-image-bottom a').attr('href','./img/floodAnalysisEvaluate.jpg')
			}

			});

			@@ -20,4 +20,27 @@
			<!-- </div>-->
			</div>
			</div>

			<div class="flood-detail">
			<div class="flood-detail-header">
			<i></i> 洪水淹没详情
			</div>

			<div class="flood-detail-content">
			<div class="flood-detail-text">
			<div>
			<span>0-3m淹没面积：</span><span>10km²</span>
			</div>
			<div>
			<span>1-2m淹没面积：</span><span>20km²</span>
			</div>
			<div>
			<span>>3m淹没面积：</span><span>22km²</span>
			</div>
			</div>
			<div class="flood-detail-button">
			<input type="button" id="flood-detail-ksfx" value="开始分析" />
			</div>
			</div>
			</div>
			</div>

			@@ -49,8 +49,7 @@
			this.map.scene.globe.depthTestAgainstTerrain = true;
			//取消双击事件
			this.map.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);


			//绘制水面事件
			$("#flood_hzsm_headtab").click(function () {
			DrawDynamicClampGround.startDrawingPolyline(self.map, function (cartesians) {
			if (self.drawingPolyline != undefined)
			@@ -67,12 +66,14 @@
			cartesians.splice(cartesians.length - 1, cartesians.length);
			self.drawLines(cartesians);
			self.movehandLer()
			self.showDetail(true)
			});
			});

			$('#flood_qcsmx_headtab').click(function () {
			self.map.entities.remove(self.drawingPolyline);
			self.map.scene.primitives.remove(self.riverPrimitive);
			self.showDetail(false)
			})


			@@ -96,6 +97,9 @@
			// $("#thematic_smxj_headtab").click(function () {
			// self.offsetHeight(-Number($("#thematic_bhz_headtab").val()), 5);
			// });
			$('#flood-detail-ksfx').click(function () {
			self.floodAnalysisPopup()
			})


			},
			@@ -111,7 +115,6 @@
			prepareVertex: function () {
			if (this.positions.length > 0) {
			this.sideRes = this._lines2Plane(this.positions, this.riverWidth, this.riverHeight);
			console.log(this.sideRes,"----000----")
			}
			},
			setPositions: function (e) {
			@@ -312,6 +315,12 @@
			$($('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');

			this.map.camera.flyTo({
			destination: Cesium.Cartesian3.fromDegrees(116.021604,25.893668, 50000),
			});

			this.showDetail(false)

			},

			onClose: function () {
			@@ -440,8 +449,8 @@
			//点击事件
			clickHand:function (click){
			var pickedObjects = this.map.scene.pick(click.position);
			if (pickedObjects.primitive instanceof Cesium.Primitive) {
			this.canvasToImage()
			if (pickedObjects && pickedObjects.primitive instanceof Cesium.Primitive) {
			// this.canvasToImage()
			this.floodAnalysisPopup()
			}
			},
			@@ -460,14 +469,16 @@
			inPolygon.push(this.peoplePositionArray[i])
			}
			}
			var jsonStr = JSON.stringify(inPolygon)

			layer.open({
			title:'模拟分析',
			title:'评估分析',
			type: 2,
			maxmin: false, //开启最大化最小化按钮
			area: ['1100px', '600px'],
			skin: 'floodAnalysis',
			offset: [top, left],
			content: urlEvaluate,
			content: urlEvaluate + "?data=" + encodeURIComponent(jsonStr),//使用encodeURIComponent转码，避免中文字符乱码，避免url截取错误
			id: "floodAnalysisLayer",
			closeBtn: 1,
			//把父页面数据传递给子弹窗并渲染
			@@ -476,7 +487,6 @@
			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 = ""
			@@ -513,6 +523,15 @@
			addPoint:function (){
			const url = './widgets/FloodAnalysis/data.json'
			this.getJsonUrl(url)
			},

			showDetail:function(show){
			//显示详情
			if (show){
			$('.flood-detail').show()
			}else {
			$('.flood-detail').hide()
			}
			},

			//判断点是否在多边形内部
			@@ -589,7 +608,7 @@
			u8arr[n] = bstr.charCodeAt(n);
			}
			return new Blob([u8arr], { type: mime });
			}
			},


			});

			@@ -83,3 +83,58 @@
			.jimu-widget-FloodAnalysis .flood-water-analysis .flood-water-analysis-new input:nth-child(even) {
			float: right;
			}

			.flood-detail{
			position: fixed;
			top: 270px;
			width: 440px;
			height: 200px;
			left: 30px !important;
			overflow-x: hidden;
			background: rgba(31, 39, 48, .7);
			font-size: 14px;
			border: 1px solid rgb(69, 154, 251);
			border-radius: 5px;
			color: rgb(255, 255, 255);
			display: none;
			}

			.flood-detail-header {
			position: relative;
			width: 100%;
			height: 40px;
			line-height: 40px;
			font-size: 20px;
			border-bottom: 1px solid rgb(69, 154, 251);
			}

			.flood-detail-header i {
			display: inline-block;
			margin-left: 6px;
			vertical-align: middle;
			width: 20px;
			height: 20px;
			background: url(../../../images/toolbox.png ) no-repeat 0 -20px;
			background-size: 20px;
			}

			.flood-detail-content{
			height: 45%;
			text-align: center;
			margin: 12px 17px 10px 17px;
			}

			.flood-detail-text{
			height: 95%;
			font-size: 20px;
			}

			.flood-detail-button input{
			margin: 5px 0;
			width: 48%;
			height: 36px;
			color: #fff;
			background: rgb(2,24,55);
			border: 1px solid rgb(69, 154, 251);
			border-radius: 4px;
			}

			@@ -3604,7 +3604,6 @@
			// 注册鼠标左键单击事件
			clickHand: function clickHand(click) {
			var pickedObjects = this.map.scene.drillPick(click.position);
			console.log(pickedObjects,click,"5555")
			if (Cesium.defined(pickedObjects)) {
			for (var i = 0; i < pickedObjects.length; ++i) {
			var obj = pickedObjects[i].id;