<?php
use yii\helpers\Url;
use app\ht\widgets\LinkPager;

$this->title = '控制面板';
$this->params['breadcrumbs'][] = '控制面板';
?>
<style>
    .data-row>div{padding:5px;}
    .info-box{display:block;background: #66afe9;color:#fff;border-radius: 6px;padding:5px;box-sizing: border-box}
    .info-box>.num{font-size:32px;line-height: 36px;}
    .info-box>.note{font-size: 12px;line-height: 18px}
    .catalog_a{background:#aee966}
    .catalog_c{background:#e96666}
    #price-chart{height:500px}
    #map-chart{height:460px;}
    .chart-row,.map-row{margin-top:20px}}
</style>
<div class="panel panel-default">
    <div  class="panel-body">
        <div class="row data-row">
            <div class="col-lg-3 col-xs-6">
                <div class="info-box catalog_a">
                    <div class="num"><span class="engineer_num">0</span></div>
                    <div class="more-btn" style="height:17px">  </div>
                    <div class="note">可接单工程师人数</div>

                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <div class="info-box catalog_a">
                    <div class="num"><span class="curr_order_num">0</span></div>
                    <div class="more-btn" style="height:17px">  </div>
                    <div class="note">未接订单数</div>

                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <div class="info-box">
                    <div class="num"><span class="engineer_realname_num">0</span></div>
                    <div class="note">工程师实名认证</div>
                    <div class="more-btn"><a class="engineer_realname_more" href="javascript:void(0)">查看详情</a></div>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <div class="info-box">
                    <div class="num"><span class="engineer_skill_num">0</span></div>
                    <div class="note">工程师技能审核</div>
                    <div class="more-btn"><a class="engineer_skill_more" href="javascript:void(0)">查看详情</a></div>
                </div>
            </div>
        </div>
        <div class="row data-row">
            <div class="col-lg-3 col-xs-6">
                <div class="info-box">
                    <div class="num"><span class="device_num">0</span></div>
                    <div class="note">当前待审核设备</div>
                    <div class="more-btn"><a class="device_more" href="javascript:void(0)">查看详情</a></div>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <div class="info-box">
                    <div class="num"><span class="appeal_num">0</span></div>
                    <div class="note">质保申请审核</div>
                    <div class="more-btn"><a class="appeal_more" href="javascript:void(0)">查看详情</a></div>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <div class="info-box catalog_c">
                    <div class="num"><span class="invoice_error_num">0</span></div>
                    <div class="note">出错发票</div>
                    <div class="more-btn"><a class="invoice_error_more" href="javascript:void(0)">查看详情</a></div>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <div class="info-box">
                    <div class="num"><span class="withdraw_num">0</span></div>
                    <div class="note">当前等审核提现</div>
                    <div class="more-btn"><a class="withdraw_more" href="javascript:void(0)">查看详情</a></div>
                </div>
            </div>
        </div>

        <div class="row chart-row">
            <div class="col-lg-6 col-xs-12">
                <div class="info-box-chart" id="price-chart">

                </div>

            </div>
            <div class="col-lg-6 col-xs-12">
                <p style="text-align: center;margin-top:15px">近7天发生支付订单量热力图</p>
                <div class="info-box-chart-count heatmap" id="map-chart">

                </div>

            </div>
        </div>


    </div>

    <div class="panel-footer">

    </div>
</div>
<script src="<?=Yii::$app->request->baseUrl?>/exts/report/echarts.min.js" type="text/javascript"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=<?=\common\exts\qqmap\QQMapSDK::getUserMpMapKey()?>"></script>
<script src="https://open.map.qq.com/apifiles/plugins/heatmap/heatmap.min.js"></script>
<script>
    var orderDataUrl = "<?=Url::toRoute(['/system/board/get-order-data'])?>";
    var getDataUrl = "<?=Url::toRoute(['/system/board/get-data'])?>";
    var getHeatDataUrl ="<?=Url::toRoute(['/system/board/get-heat-data'])?>";
    $(function(){

        var loading = $.loading();
        function loadBoardData() {
            loading.show();
            $.get(getDataUrl, {}, function (res) {
                loading.hide();

                //
                $('.engineer_num').html(res.engineerAvaliable[0]);

                $('.engineer_realname_num').html(res.engineerAuth[0]);
                $('.engineer_realname_more').click(function (e) {
                    window.location.href = res.engineerAuth[1];
                });

                $('.engineer_skill_num').html(res.engineerSkillAuth[0]);
                $('.engineer_skill_more').click(function (e) {
                    window.location.href = res.engineerSkillAuth[1];
                });


                $('.device_num').html(res.deviceReview[0]);
                $('.device_more').click(function (e) {
                    window.location.href = res.deviceReview[1];
                });

                $('.appeal_num').html(res.appeal[0]);
                $('.appeal_more').click(function (e) {
                    window.location.href = res.appeal[1];
                });

                $('.invoice_error_num').html(res.errorInvoice[0]);
                $('.invoice_error_more').click(function (e) {
                    window.location.href = res.errorInvoice[1];
                });

                $('.withdraw_num').html(res.withdraw[0]);
                $('.withdraw_more').click(function (e) {
                    window.location.href = res.withdraw[1];
                });

            }, 'json')
        }
        function extractData(data){
            var res={date:[],series:[]};
            var tmp1 = [],tmp2= [];
            $.each(data,function(i,n){
                var that = this;
                res.date.push(that.date);
                tmp1.push(that.pay_price);
                tmp2.push(that.repair_price);
            })
            var pay_price={name: '付款金额',
                type: 'line',
                stack: '总量',
                data:tmp1};
            var repair_price={name: '订单金额',
                type: 'line',
                stack: '总量',
                data:tmp2};
            res.series.push(pay_price);
            res.series.push(repair_price);
            return res;
        }
        function loadChartData(chartId){
            $.get(orderDataUrl,{},function(res){
                var myChart = echarts.init(document.getElementById(chartId));
                var myData= extractData(res.data);
                //console.log(myData);
                var option2 = {
                    title: {
                        text: '近7天订单价格',
                        top:'0%',
                        left:'50%',
                        margin_left:'-40px',
                        textAlign:'center'
                    },
                    tooltip: {
                        trigger: 'axis'

                    },
                    legend: {
                        data: ['付款金额','订单金额'],
                        bottom:'0px'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: myData.date,
                        axisTick: {
                            alignWithLabel: true
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: myData.series

                };
                myChart.setOption(option2);

            },'json')

        }

        function updateCount(){
            setInterval(function(){
                $.get(getDataUrl, {pickOrder:1}, function (res) {
                    $('.curr_order_num').html(res.pickOrderCount);
                },'json')

            },5000)

        }

        loadBoardData();
        loadChartData('price-chart');
        updateCount();


    })
    var heatmap = null;
    var testData= null;
    window.onload = function () {

        function runHeatMap(testData){

            if (QQMapPlugin.isSupportCanvas) {
                if (heatmap == null){
                    heatmap = new QQMapPlugin.HeatmapOverlay(map,
                        {
                            //点半径，设置为1即可
                            "radius": 1,
                            //热力图最大透明度
                            "maxOpacity": 0.8,
                            //是否在每一屏都开启重新计算，如果为true则每一屏都会有一个红点
                            "useLocalExtrema": true,
                            //设置大小字段
                            "valueField": 'count'
                        }
                    );
                }
                if (testData == null || testData ==''){
                    testData={max:0,data:[]};
                    heatmap.setData(testData);
                    return null;
                }else{
                    //绘制热力图
                    heatmap.setData(testData);
                }

            } else {
                alert("您的浏览器不支持canvas，无法绘制热力图！！")
            }
        }
        map = new qq.maps.Map(document.getElementById("map-chart"), {
            zoom: 9,
            center: new qq.maps.LatLng(22.879971,114.112244)
        });


        //地图异步加载，在idle或者tilesloaded后初始化

        qq.maps.event.addListener(map, "idle", function () {
            //var latlng =  map.getCenter();
            //var zoom = map.getZoom();
            var initData ={max:0,data:[]};
            var bounds = map.getBounds();
            if (bounds){
                //如果得到函数范围值
             var  north_east = [bounds.getNorthEast().getLat().toFixed(5) , bounds.getNorthEast().getLng().toFixed(5)];
                //东南角的坐标值
             var  south_west= [bounds.getSouthWest().getLat().toFixed(5),bounds.getSouthWest().getLng().toFixed(5)];

                $.get(getHeatDataUrl,{north_east:north_east,south_west:south_west},function(res){

                    if (res.item != null && res.item != ''){
                        testData = res.item;
                        runHeatMap(testData);
                    }

                },'json')
            }


        });


    };
</script>