jifuning
/
xinxi_zhongxin_app


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>map</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/projeck.css">
    <style>
        .api_layout {
            height: 100%;
        }

        #canvas {
            display: block;
            width: 100%;
            height: 100%;
            background: url(../../image/map.png) no-repeat;
            background-position: center;
            background-size: 100% 100%;
        }

        .frame_bg {
            display: none;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="api_layout">
        <canvas id="canvas"></canvas>
        <div class="frame_bg">
            <img src="../../image/producrData.png" alt="">
        </div>
    </div>
</body>

</html>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script src="../../script/config.js" charset="utf-8"></script>
<script src="../../script/zepto.js" charset="utf-8"></script>
<script type="text/javascript">
    var toast = new auiToast();
    var testtimer = "";
    apiready = function() {
        // canvas();
        api.addEventListener({
            name: 'eventCanvas'
        }, function(ret, err) {
            canvas();
        });
        api.addEventListener({
            name: 'clearCanvas'
        }, function(ret, err) {
            clearSetInterval();
        });

        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 0 //设置距离底部多少距离时触发，默认值为0，数字类型
            }
        }, function(ret, err) {
          $event.openTabLayoutTransition('frame3_1','frame3_1','', '')
        });
    }


    function canvas() {
        var radius = 0;
        var c = document.getElementById("canvas");
        c.width = document.body.clientWidth * 2;
        c.height = document.body.clientHeight * 2;
        var ctx = c.getContext("2d");
        //  canvas.rect(params1,params2,params3,params4) 参数分别为 矩形左上角的x轴坐标 矩形左上角的y轴坐标 矩形的宽度 矩形的高度
        // 灵新煤矿
        const path1 = new Path2D();
        path1.rect($event.yhW(28), $event.yhW(68), 200, $event.yhW(60));
        // 红柳煤矿
        const path2 = new Path2D();
        path2.rect($event.yhW(28), $event.yhW(141), 200, $event.yhW(60));
        // 枣圈煤矿
        const path3 = new Path2D();
        path3.rect($event.yhW(28), $event.yhW(209), 200, $event.yhW(60));
        // 请水营煤矿
        const path4 = new Path2D();
        path4.rect($event.yhW(28), $event.yhW(300), 230, $event.yhW(60));
        // 石槽村煤矿
        const path5 = new Path2D();
        path5.rect($event.yhW(28), $event.yhW(369), 230, $event.yhW(60));
        // 梅花井煤矿
        const path6 = new Path2D();
        path6.rect($event.yhW(28), $event.yhW(443), 230, $event.yhW(60));
        // 信息中心
        const path7 = new Path2D();
        path7.rect($event.yhW(552), $event.yhW(68), 230, $event.yhW(60));
        // 双马煤矿
        const path8 = new Path2D();
        path8.rect($event.yhW(533), $event.yhW(750), 230, $event.yhW(60));
        // 金凤煤矿
        const path9 = new Path2D();
        path9.rect($event.yhW(520), $event.yhW(812), 230, $event.yhW(60));
        // 羊场湾煤矿
        const path10 = new Path2D();
        path10.rect($event.yhW(505), $event.yhW(893), 230, $event.yhW(60));
        ctx.stroke()
        c.addEventListener('click', function(e) {
            var lx = ctx.isPointInPath(path1, e.clientX * 2, e.clientY * 2);
            var hl = ctx.isPointInPath(path2, e.clientX * 2, e.clientY * 2);
            var zq = ctx.isPointInPath(path3, e.clientX * 2, e.clientY * 2);
            var qsy = ctx.isPointInPath(path4, e.clientX * 2, e.clientY * 2);
            var mhj = ctx.isPointInPath(path5, e.clientX * 2, e.clientY * 2);
            var scc = ctx.isPointInPath(path6, e.clientX * 2, e.clientY * 2);
            var sm = ctx.isPointInPath(path7, e.clientX * 2, e.clientY * 2);
            var jf = ctx.isPointInPath(path8, e.clientX * 2, e.clientY * 2);
            var ycw = ctx.isPointInPath(path9, e.clientX * 2, e.clientY * 2);
            var ycw2 = ctx.isPointInPath(path10, e.clientX * 2, e.clientY * 2);
            if (lx === true) {
                //  return $event.openWin('browseQrcode_win','../browseQrcode/browseQrcode_win',{pageId:'102512a8a2d54725bc7c7e6f6ab89fc5',title:'灵新煤矿'},'');
            } else if (hl == true) {
                //  return $event.openWin('browseQrcode_win'+Math.random(),'../browseQrcode/browseQrcode_win',{pageId:'2b855ddda4984ad9b0353ab3ca0f81e3',title:'红柳煤矿'},'');
            } else if (zq == true) {
                return $event.openTabLayout('zaoquanCoalMine' + Math.random(), '../producationDataItem/zaoquanCoalMine', '枣泉煤矿', {
                    pageId: '',
                    title: '枣泉煤矿'
                });
            } else if (qsy == true) {
                //  return $event.openWin('browseQrcode_win','../browseQrcode/browseQrcode_win',{pageId:'7663c485d6004f1b9592d8e5000c7419',title:'清⽔营煤矿'},'');
            } else if (mhj == true) {
                //  return $event.openWin('browseQrcode_win','../browseQrcode/browseQrcode_win',{pageId:'4b4405fc17f14fe186d0583fd274e0a2',title:'⽯槽村煤矿'},'');
            } else if (scc == true) {
                //  return $event.openWin('browseQrcode_win','../browseQrcode/browseQrcode_win',{pageId:'b7696b92fa994931857e3385765e02bc',title:'梅花井煤矿'},'');
            } else if (sm == true) {
                return $event.openTabLayout('informationCenter' + Math.random(), '../producationDataItem/informationCenter', '信息中心', {
                    pageId: '信息中心',
                    title: '信息中心'
                });
            } else if (jf == true) {
                //  return $event.openWin('browseQrcode_win','../browseQrcode/browseQrcode_win',{pageId:'2d9916d6f827470fa35440456f1f2d6f',title:'双马煤矿'},'');
            } else if (ycw == true) {
                return $event.openTabLayout('jinfengCoalMine' + Math.random(), '../producationDataItem/jinfengCoalMine', '金凤煤矿', {
                    pageId: '金凤煤矿',
                    title: '金凤煤矿'
                });
            } else if (ycw2 == true) {
                //  return $event.openWin('browseQrcode_win','../browseQrcode/browseQrcode_win',{pageId:'d39b9800339840f18520a9eb338f15c0',title:'羊场湾煤矿'},'');
            }
        }, false)

        function drawCircle() {
            ctx.beginPath();
            ctx.arc($event.yhW(480), $event.yhW(550), radius, 0, Math.PI * 2);
            ctx.closePath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'rgba(122,228,238,1)';
            ctx.stroke();
            radius += 1;
            if (radius > 120) {
                radius = 0;
            }
        }

        function render() {
            var prev = ctx.globalCompositeOperation;
            ctx.globalCompositeOperation = 'destination-in';
            ctx.globalAlpha = 0.95;
            ctx.fillRect(0, 0, document.body.clientWidth * 2, document.body.clientHeight * 2);
            ctx.globalCompositeOperation = prev;
            drawCircle();
        };
        testtimer = setInterval(function() {
            render();
        }, 30);
    }
    // 点击其他tab关闭定时任务
    function clearSetInterval() {
        clearInterval(testtimer);
    }
</script>