jy
/
flask-map


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488
							<!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-3.1.1.min.js"></script>
    <script src="/static/js/moveitem.js"></script>
	<script src="/static/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="/static/bootstrap/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>
		<button onclick="getDigital()" class="navbar-right">详细</button>
	</nav>
	<div class="two">
    <div id="main" style="width: 1920px;height:1080px;"></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()",10000);

                });
            function startRequest(){
                $.get('/getData', function (data, status) {
                    // console.log('data:', data, 'status:', status)
                    $.get('./static/svg/Beef_cuts_France.svg', function (svg){
                        echarts.registerMap('map-tf', { svg:svg});
                        option = {
                            tooltip:{
                                show:true,
                                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: 300px;',
                                textStyle: {
                                    color: 'red',
                                },
                                formatter: function (params) {
                                    return `
                                              <ul class="map-tooltip">
                                                <li class="title">
                                                  <p class="circle"></p>
                                                  <p class="province">机位：${params.name}
                                                  ${
                                                        (data[params.name] && data[params.name].tasktype)||""
                                                  }
                                                  </p>

                                                </li>
                                                <li>
                                                  <p class="name">机号:${
                                                        (data[params.name] && data[params.name].bnum)||"无"
                                                  } 机型：${
                                                        (data[params.name] && data[params.name].actype)||"无"
                                                  }
                                                  ${
                                                        (data[params.name] && data[params.name].engtype)||"无"
                                                  }<br>
                                                  ${
                                                        (data[params.name] && data[params.name].ftnum)||""
                                                  }
                                                  <br>
                                                  ${
                                                        (data[params.name] && data[params.name].pos1)||""
                                                  }——
                                                  ${
                                                        (data[params.name] && data[params.name].pos2)||""
                                                  }
                                                  </p>

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

                                                </li>
                                                <li>
                                                  <p class="name">工作者:${
                                                        (data[params.name] && data[params.name].WX)||"无"
                                                  }</p>

                                                </li>
                                              </ul>
                                            `;
                                }
                            },
                            geo:{
                                map:'map-tf',
                                roam:true,
                                selectedMode:'multiple',
                                itemStyle:{
                                    color: '#fff'
                                },

                              label: {
                                  show: true,
                                  position: 'insideLeft',
                                  textStyle: {
                                      fontSize: getFontSize(),
                                       color:'#f90',
                                      align:'left',

                                  },
                                  backgroundColor:'rgba(0,110,255,0.3)',

                                  formatter: function (params) {
                                      // console.log(params.name)
                                      try{
                                          var fx = data[params.name].FX
                                          var gz = data[params.name].WX
                                           return params.name+":"+fx+"\n"+ gz
                                      }
                                      catch (err){
                                          var fx = "无"
                                          var gz = "无"

                                      }

                                  }
                              },

                                select:{
                                  itemStyle: {
                                      color:'#0ff'
                                  }
                                },
                                regions:makeregions(data),

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

                                    geoIndex: 0,
                                }
                            ]
                        };
                        function makeregions(data) {
                            var region = [];
                            for(var key in data){
                                if(data[key].FX==''){
                                    region.push(
                                    {
                                        name:key,
                                        silent: true,
                                        itemStyle:{
                                            color:'#f00'
                                        }
                                    }
                                )
                                }
                                else{
                                    region.push(
                                    {
                                        name:key,
                                        silent: true,
                                        itemStyle:{
                                            color:'#0f0'
                                        }
                                    }
                                )
                                }

                            }
                            // 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('/getSelectInf',{'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('/getData', function (data, status){
                    console.log('data:', data, 'status:', status)
                    var _option = myChart.getOption();
                    // var _tooltip = _option.tooltip.formatter
                    _option =  {
                        tooltip: {
                            show: true,
                            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: 300px;',
                            textStyle: {
                                color: 'red',
                            },
                            formatter: function (params) {
                                return `
                                              <ul class="map-tooltip">
                                                <li class="title">
                                                  <p class="circle"></p>
                                                  <p class="province">机位：${params.name}
                                                  ${
                                    (data[params.name] && data[params.name].tasktype) || ""
                                }
                                                  </p>

                                                </li>
                                                <li>
                                                  <p class="name">机号:${
                                    (data[params.name] && data[params.name].bnum) || "无"
                                } 机型：${
                                    (data[params.name] && data[params.name].actype) || "无"
                                }
                                                  ${
                                    (data[params.name] && data[params.name].engtype) || "无"
                                }<br>
                                                  ${
                                    (data[params.name] && data[params.name].ftnum) || ""
                                }
                                                  <br>
                                                  ${
                                    (data[params.name] && data[params.name].pos1) || ""
                                }——
                                                  ${
                                    (data[params.name] && data[params.name].pos2) || ""
                                }
                                                  </p>

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

                                                </li>
                                                <li>
                                                  <p class="name">工作者:${
                                    (data[params.name] && data[params.name].WX) || "无"
                                }</p>

                                                </li>
                                              </ul>
                                            `;
                            }

                        },
						geo:{
                                map:'map-tf',
                                roam:true,
                                selectedMode:'multiple',
                                itemStyle:{
                                    color: '#fff'
                                },

                              label: {
                                  show: true,
                                  position: 'insideLeft',
                                  textStyle: {
                                      fontSize: getFontSize(),
                                       color:'#f90',
                                      align:'left',

                                  },
                                  backgroundColor:'rgba(0,110,255,0.3)',

                                  formatter: function (params) {
                                      // console.log(params.name)
                                      try{
                                          var fx = data[params.name].FX
                                          var gz = data[params.name].WX
                                           return params.name+":"+fx+"\n"+ gz
                                      }
                                      catch (err){
                                          var fx = "无"
                                          var gz = "无"

                                      }

                                  }
                              },

                                select:{
                                  itemStyle: {
                                      color:'#0ff'
                                  }
                                },
                                regions:makeregions(data),

                            },
                    }

                    myChart.setOption(_option)
                })
				// $.get('/getDigital', function (data, status){
				// 	$("#moveItemDigital_body").html(data)
				// })
				function makeregions(data) {
                            var region = [];
                            for(var key in data){
                                if(data[key].FX==''){
                                    region.push(
                                    {
                                        name:key,
                                        silent: true,
                                        itemStyle:{
                                            color:'#f00'
                                        }
                                    }
                                )
                                }
                                else{
                                    region.push(
                                    {
                                        name:key,
                                        silent: true,
                                        itemStyle:{
                                            color:'#0f0'
                                        }
                                    }
                                )
                                }

                            }
                            // 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>