moodhoop
/
flightinfo_sever


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/moveitem.js"></script>
	<script src="/static/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/moveitem.css">
	<style>


        .one {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }


        .two {

            border: 1px solid #000;
            position: absolute;

        }


	</style>
</head>
<body>

<!--	<nav class="navbar navbar-expand-lg bg-header">-->
<!--		<div class="container-fluid justify-content-start">-->
<!--			<a href="/categories" class="btn">-->
<!--				<i class="material-icons">arrow_back</i>-->
<!--			</a>-->

<!--			<div class="navbar-heading m-l-10">-->
<!--				<h4>天府机坪图</h4>-->
<!--			</div>-->

<!--		</div>-->
<!--&lt;!&ndash;		<button onclick="getDigital()" class="navbar-right">详细</button>&ndash;&gt;-->
<!--	</nav>-->
	<div class="two">
    <div id="main" style="width:100vw;height:100vh;"></div>
	</div>
	<script>

	</script>
    <div id="moveitem" class="myMoveItem" style="top:50px;left:10px;width: 384px; height: 612px; z-index: 23;display: none;">
			<div class="moveItem_header">
				<p id="moveitemtittle" class="moveItem_title" ></p>
				<div class="moveItem_oper">
<!--					<button type="button" onclick="sendMsg()">发送通知</button>-->
					<button type="button" class="moveItem_fullScreen"><></button>
					<button type="button" class="moveItem_normalScreen">><</button>
					<button type="button" class="moveItem_close">X</button>
				</div>
			</div>
			<div id="moveItem_body" class="moveItem_body" style="background-color: #FFF;height: calc(100% - 5px);">
				<p>测试1</p>
			</div>
			<span class="moveItem_resize"></span>
    </div>
<!--	<div id="dragtest" class="myMoveItem" style="top:50px;left:10px;width: 384px; height: 612px; z-index: 23;display: block;">-->
<!--			<div class="moveItem_header">-->
<!--				<p id="dragtittle" class="moveItem_title" ></p>-->
<!--				<div class="moveItem_oper">-->
<!--					<button type="button" onclick="sendMsg()">发送通知</button>-->
<!--					<button type="button" class="moveItem_fullScreen"><></button>-->
<!--					<button type="button" class="moveItem_normalScreen">><</button>-->
<!--					<button type="button" class="moveItem_close">X</button>-->
<!--				</div>-->
<!--			</div>-->
<!--			<div id="drag_body" class="moveItem_body" style="background-color: #FFF;height: calc(100% - 5px);">-->
<!--				-->
<!--				<ul id="sortable">-->
<!--				  <li class="ui-state-default">Item 1</li>-->
<!--				  <li class="ui-state-default">Item 2</li>-->
<!--				  <li class="ui-state-default">Item 3</li>-->
<!--				  <li class="ui-state-default">Item 4</li>-->
<!--				  <li class="ui-state-default">Item 5</li>-->
<!--				</ul>-->
<!--			</div>-->
<!--			<span class="moveItem_resize"></span>-->
<!--    </div>-->
<!--	<div id="moveitemDigital" class="myMoveItem" style="top: 800px; left: 10px; width: 1500px; height: 480px; z-index: 33;display: none;">-->
<!--			<div class="moveItem_header">-->
<!--				<p id="moveitemDigitaltittle" class="moveItem_title" ></p>-->
<!--				<div class="moveItem_oper">-->

<!--					<button type="button" class="moveItem_fullScreen"><></button>-->
<!--					<button type="button" class="moveItem_normalScreen">><</button>-->
<!--					<button type="button" class="moveItem_close">X</button>-->
<!--				</div>-->
<!--			</div>-->
<!--			<div id="moveItemDigital_body" class="moveItem_body" style="background-color: #FFF;height: calc(100% - 5px);">-->
<!--				<p>测试1</p>-->
<!--			</div>-->
<!--			<span class="moveItem_resize"></span>-->
<!--    </div>-->

        <script type="text/javascript">
            // import * as echarts from 'echarts';
            var chartDom = document.getElementById('main')
            var myChart = echarts.init(chartDom)
            var option

            $(document).ready(function() {
                startRequest();
                setInterval("RefreshRequest()",60000);

                });
            function startRequest(){
                $.get('/static/mapDispaly/{{selectedtime}}', function (data, status) {
                    // console.log('data:', data, 'status:', status)
                    $.get('/static/svg/maptest.svg', function (svg){
                        echarts.registerMap('map-tf', { svg:svg});
                        option = {
                            tooltip:{
                                backgroundColor: 'white',
                                padding: 10,
                                extraCssText:
                                    'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);border-radius: 24px;opacity: 0.8;border: 2px solid white;width: 274px;height: 270px;',
                                textStyle: {
                                    color: 'balck',
                                },
                                formatter: function (params) {
									if(data[params.name].机号 !=""){
										return `
												  <ul class="map-tooltip">
													<li class="title">
													  <p class="circle"></p>
													  <p class="province">机位：${params.name}
													  ${
															(data[params.name] && data[params.name].航班类型)||""
													  }
													  </p>

													</li>
													<li>
													  <p class="name">机号:${
															(data[params.name] && data[params.name].机号)||"无"
													  }
													  </p>
													</li>
													<li>
													  <p class="name"> 机型：${
															(data[params.name] && data[params.name].机型)||"无"
													  }
													  ${
															(data[params.name] && data[params.name].发动机)||"无"
													  }
													  </p>
													</li>
													<li>
													  <p class="name"> 航班号：${
															(data[params.name] && data[params.name].航班号)||""
													  }
													  <br>
													  ${
															(data[params.name] && data[params.name].进港机场)||""
													  }-天府-
													  ${
															(data[params.name] && data[params.name].出港机场)||""
													  }
													  </p>

													</li>
													<li>
													  <p class="name">放行人员:${
															(data[params.name] && data[params.name].放行)||"无"
													  }</p>

													</li>
													<li>
													  <p class="name">维修人员:${
															(data[params.name] && data[params.name].维修人员)||"无"
													  }</p>

													</li>
													<li>
													  <p class="name">二送人员:${
															(data[params.name] && data[params.name].二送人员)||"无"
													  }</p>

													</li>
												  </ul>
												`;
									}

                                }
                            },
                            geo:{
                                map:'map-tf',
                                roam:true,
                                selectedMode:'multiple',
                                itemStyle:{
                                    color: 'rgba(0,0,0,0)',
									borderColor:'rgba(0,0,0,0)'
                                },
								emphasis: {
									itemStyle: {
										color: 'rgba(0,0,0,0)',
										borderColor: 'rgba(0,0,0,0)'
									},
									label: {
									  show: false
									}
								},

                                select:{
                                  itemStyle: {
                                      color: 'rgba(0,0,0,0)',
									  borderColor:'rgba(0,0,0,0)'
                                  },
								  label: {
									  show: false
									}
                                },
                                regions:makeregions(data),

                            },
                            series:[
                                {
                                    type: 'map',
                                    maptype:'map-tf',

                                    geoIndex: 0,
                                }
                            ]
                        };
                        function makeregions(data) {
                            var region = [];
                            for(var key in data){
                                if(data[key].南航=='1'){
                                    region.push(
                                    {
                                        name:key,
                                        silent: true,
										tooltip: {
											show: true
										  },
                                        itemStyle:{
                                            color:data[key].color,
											borderColor: "red",
											borderWidth: 1,
                                        },
										emphasis: {
											tooltip: {
												show: true
											  },
											itemStyle: {
												color: data[key].color,
												borderColor: "red",
												borderWidth: 1
											},
											label: {
											  show: false
											}
										},

										select: {
											itemStyle: {
												color: data[key].color,
												borderColor: "red",
												borderWidth: 1
											},
										}
                                    }
                                )
                                }
                                else{
                                    region.push(
                                    {
                                        name:key,
                                        silent: true,
                                        itemStyle:{
                                            color:data[key].color
                                        },
										emphasis: {
											itemStyle: {
												color: data[key].color,
												borderColor: data[key].color
											},
											label: {
											  show: false
											}
										},

										select: {
											itemStyle: {
												color: data[key].color,
												borderColor: data[key].color
											},
										}

                                    }
                                )
                                }

                            }
                            // console.log("region:", region);
                            return region;
                        }
                        function getFontSize(){
                            try{
                                var _option = myChart.getOption();
                            var _zoom = _option.geo[0].zoom;
                            var size = 15*(1.0 / ( 1 + Math.exp(-_zoom+2)))
                            }
                            catch (err){
                                size = 10
                            }

                            return size
                        }
                        function sendSelect(params){
                            $.post('/map/getSelectInf/{{selectedtime}}',{'bay':params}, function (data, status){
								// var text = '';
								// for (var key in data){
								//
								// 	text = text + "<p>"+key+":"+data[key]+"</p>"
								//
								// }
								// console.log("Text:"+text)
								$("#moveitemtittle").text(params)
								$("#moveItem_body").html(data)
								$("#moveitem").show()

                            })
                        }
                        myChart.setOption(option)
                        myChart.on('click', function (params){
                            console.log("click"+params.name)
                            sendSelect(params.name)
                        })
                        myChart.on('geoselectchanged', function (params) {
                            console.log("selected")
                            // const selectedName = params.name;
                            // console.log('selected', selectedName)
                            //sendSelect(selectedName)

                        })
						myChart.on('mousemove', function (params){
							console.log("mouse over:"+params.name)
						})
						myChart.on('mouseup', function (params){
							console.log("mouse up:"+params.name)
						})
                        myChart.on('georoam', function (params){
                            if(params.dy || params.dx) return
                            var _option = myChart.getOption();
                            var _zoom = _option.geo[0].zoom;
                            // console.log("缩放：",_zoom);
                            _option.geo[0].label.textStyle.fontSize=15*(1.0 / ( 1 + Math.exp(-_zoom+2)))
                            myChart.setOption(_option)
                        })
                    })

            })}
            function RefreshRequest() {
                $.get('/static/mapDispaly/{{selectedtime}}', function (data, status){
                    console.log('data:', data, 'status:', status)
                    var _option = myChart.getOption();
                    // var _tooltip = _option.tooltip.formatter
                    _option =  {
                        tooltip: {
                            backgroundColor: 'white',
                            padding: 10,
                            extraCssText:
                                'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);border-radius: 24px;opacity: 0.8;border: 2px solid white;width: 270px;height: 270px;',
                            textStyle: {
                                color: 'black',
                            },
                            formatter: function (params) {
								console.log('机位：', params)
								if(data[params.name].机号 !="") {
									return `
												  <ul class="map-tooltip">
													<li class="title">
													  <p class="circle"></p>
													  <p class="province">机位：${params.name}
													  ${
															(data[params.name] && data[params.name].航班类型)||""
													  }
													  </p>

													</li>
													<li>
													  <p class="name">机号:${
															(data[params.name] && data[params.name].机号)||"无"
													  }
													  </p>
													</li>
													<li>
													  <p class="name"> 机型：${
															(data[params.name] && data[params.name].机型)||"无"
													  }
													  ${
															(data[params.name] && data[params.name].发动机)||"无"
													  }
													  </p>
													</li>
													<li>
													  <p class="name"> 航班号：${
															(data[params.name] && data[params.name].航班号)||""
													  }
													  <br>
													  ${
															(data[params.name] && data[params.name].进港机场)||""
													  }-天府-
													  ${
															(data[params.name] && data[params.name].出港机场)||""
													  }
													  </p>

													</li>
													<li>
													  <p class="name">放行人员:${
															(data[params.name] && data[params.name].放行)||"无"
													  }</p>

													</li>
													<li>
													  <p class="name">维修人员:${
															(data[params.name] && data[params.name].维修人员)||"无"
													  }</p>

													</li>
													<li>
													  <p class="name">二送人员:${
															(data[params.name] && data[params.name].二送人员)||"无"
													  }</p>

													</li>
												  </ul>
												`;
								}
                            }

                        },
						geo:{
                                map:'map-tf',
                                roam:true,
                                selectedMode:'multiple',
                                itemStyle:{
                                    color: 'rgba(0,0,0,0)',
									borderColor:'rgba(0,0,0,0.0)'
                                },
								emphasis: {
									itemStyle: {
										color: 'rgba(0,0,0,0)',
										borderColor: 'rgba(0,0,0,0)'
									},
									label: {
									  show: false
									}
								},

                                select:{
                                  itemStyle: {
                                      color: 'rgba(0,0,0,0)',
									  borderColor:'rgba(0,0,0,0)'
                                  },
								  label: {
								    show: false
								  }
                                },
                                regions:makeregions(data),

                            },
                    }

                    myChart.setOption(_option)
                })
				// $.get('/getDigital', function (data, status){
				// 	$("#moveItemDigital_body").html(data)
				// })

				function getFontSize(){
                            try{
                                var _option = myChart.getOption();
                            var _zoom = _option.geo[0].zoom;
                            var size = 15*(1.0 / ( 1 + Math.exp(-_zoom+2)))
                            }
                            catch (err){
                                size = 10
                            }

                            return size
                        }

				function makeregions(data) {
                            var region = [];
                            for(var key in data){
                                if(( data[key].南航=="1")){
                                    region.push(
                                    {
                                        name:key,
                                        silent: true,
                                        itemStyle:{
                                            color:data[key].color,
											borderColor: "red",
											borderWidth: 1,
										tooltip: {
											show: true
										  }
                                        },

										emphasis: {
											itemStyle: {
												color: data[key].color,
												borderColor: "red",
												borderWidth: 1
											},
											label: {
											  show: false
											}
										},

										select: {
											itemStyle: {
												color: data[key].color,
												borderColor: "red",
												borderWidth: 1
											},
										}
                                    }
                                )
                                }
                                else{
                                    region.push(
                                    {
                                        name:key,
                                        silent: true,
                                        itemStyle:{
                                            color:data[key].color
                                        },
										emphasis: {
											itemStyle: {
												color:data[key].color,
												borderColor: data[key].color
											},
											label: {
											  show: false
											}
										},

										select: {
											itemStyle: {
												color: data[key].color,
												borderColor: data[key].color
											},
										}
                                    }
                                )
                                }

                            }
                            // console.log("region:", region);
                            return region;
                        }
            }

			function getDigital() {
				$.get('/getDigital', function (data, status){
					$("#moveitemDigitaltittle").text('详细')
					$("#moveItemDigital_body").html(data)
					$("#moveitemDigital").show()
				})
			}

			function sendMsg(){
				var bay = $("#moveitemtittle").text()
				$.post("/sendMsgBay",{'bay':bay}, function (data, status){
					console.log("sendMsg:"+data+status)
				})
			}


        </script>
</body>
</html>