<?php

?>

<!DOCTYPE html>
<html>
<head>
    <? require_once "header.html"; ?>

    <link href='timeline/core.main.min.css' rel='stylesheet'/>
    <link href='timeline/timeline.main.min.css' rel='stylesheet'/>
    <link href='timeline/resource-timeline.main.min.css' rel='stylesheet'/>
    <script src='timeline/core.main.min.js'></script>
    <script src='timeline/locales-all.min.js'></script>
    <script src='timeline/interaction.main.min.js'></script>
    <script src='timeline/timeline.main.min.js'></script>
    <script src='timeline/resource-common.main.min.js'></script>
    <script src='timeline/resource-timeline.main.min.js'></script>
    <script type="text/javascript" src="scripts/echarts.min.js?_<?php filemtime('scripts/echarts.min.js') ?>"></script>
    <style>
        a.fc-timeline-event {
            color: #fff
        }
    </style>
</head>
<body>
<? require_once "leftbar.html"; ?>
<? require_once "projectheader.html"; ?>

<div id="wrap">
    <div id="maina" style="margin:15px;">
    </div>


    <div id="" style="margin:15px; height: 100%;">
        <div class="center" style="margin: 0 auto;width: 260px;">
            <input type="text" name="daterange" readonly style="text-align: center">
            <button type="button" id="export-workload">导出单量</button>
        </div>
        <button type="button" id="export-wtlx_all">导出</button>
        <div id="wtlx_all" style="margin:15px; height: 100%;">
        </div>
        <button type="button" id="export-wtlx1">导出</button>
        <div id="wtlx1" style="margin:15px; height: 100%;">
        </div>




    </div>
</div>
<script type="text/javascript">
    // var pyapi = 'http://127.0.0.1:5000';
    // var pyapi = 'http://10.0.0.5:5000';
    var pyapi = pyapi_host;

    document.getElementById('export-wtlx_all').addEventListener('click',function () {
        var date = $('input[name="daterange"]').val().split('~')
        var st = date[0]+'T00:00:00'
        var et = date[1]+'T23:59:59'

        var url = pyapi + '/v2/chart/wtlx_all?st=' + st + '&et=' + et + '&export=1';
        window.location.href= url
    })

    document.getElementById('export-wtlx1').addEventListener('click',function () {
        var date = $('input[name="daterange"]').val().split('~')
        var st = date[0]+'T00:00:00'
        var et = date[1]+'T23:59:59'

        var url = pyapi + '/v2/chart2/qa?st=' + st + '&et=' + et + '&export=1';
        window.location.href= url
    })

    document.getElementById('export-workload').addEventListener('click',function () {
        var date = $('input[name="daterange"]').val().split('~')
        var st = date[0]+'T00:00:00'
        var et = date[1]+'T23:59:59'

        var url = pyapi + '/v2/export_workload?st=' + st + '&et=' + et;
        window.location.href= url
        // $.get(url, function (data) {
        //     debugger
        //     alert('导出完成')
        // })

    })

    document.addEventListener('DOMContentLoaded', function () {

        var myChart = echarts.init(document.getElementById('wtlx1'));
        var myChart_all = echarts.init(document.getElementById('wtlx_all'));
        getQAChart2(myChart);

        $('input[name="daterange"]').dateRangePicker({
            showShortcuts: false ,
            separator:"~",
            autoClose:true,
            // ranges:{
            //     'Today':[moment(),moment()]
            // },
            //getValue: function(){
            //	return $('#'+_id).data('timestr');
            //},
            setValue: function(s){
                console.log(s);
                if ($('input[name="daterange"]').val() != s){
                    var arr = s.split('~');
                    st = arr[0];
                    et = arr[1];
                    getQAChart2(myChart,st,et);
                    getChart_all(myChart_all,st,et);
                    $('input[name="daterange"]').val(s);
                }
            }
        });


        getChart_all(myChart_all);

    });

    function getQAChart2(ecahrtEle, st, et) {
        st = st || '';
        et = et || '';
        ecahrtEle.showLoading();
        var url = pyapi + '/v2/chart2/qa' + '?st=' + st + '&et=' + et;
        $.get(url, function (data) {
            ecahrtEle.hideLoading();

            // var d = JSON.parse(data);
            var d = data;

            console.log(d.data);

            var create_data = [];
            var finish_data = [];
            for (var i in d.data) {
                console.log(d.data[i]);
                create_data.push({
                    'name':d.data[i].name,
                    'value':d.data[i].create,
                });
                finish_data.push({
                    'name':d.data[i].name,
                    'value':d.data[i].finish,
                });

            }

            var series_data_list = [
                {
                    'name':'已验收',
                    'type': 'bar',
                    'itemStyle':{
                        normal:{
                            color:'#334b5c',
                            label:{
                                show:true,
                                position:'top',
                                textStyle:{
                                    color:'black'
                                }
                            }

                        },
                    },
                    'data':finish_data

                },
                {
                    'name':'新提交',
                    'type': 'bar',
                    'itemStyle':{
                        normal:{
                            color:'#c23531',
                            label:{
                                show:true,
                                position:'top',
                                textStyle:{
                                    color:'black'
                                }
                            }

                        },
                    },
                    'data':create_data

                }
            ];


            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: d.title.text,
                    textStyle:{
                        fontSize:25
                    },
                    subtext: d.title.subtext || '',
                    subtextStyle:{
                        fontSize:18
                    },
                    left:'center'
                },
                toolbox:{
                    feature: {
                        saveAsImage: {show: true}
                    }
                },
                grid:{
                    top:100,
                },
                tooltip: {
                    show: true
                },
                legend: {
                    data: d.legend,
                    top: 60
                },
                xAxis: {
                    type: 'category',
                    data: d.name,
                    show: true,
                    axisLabel:{
                        interval:0
                    }
                },
                yAxis: {
                    type: 'value',

                },
                series: series_data_list,

            };

            console.log(option);
            $('input[name="daterange"]').val(d.data_range);
            ecahrtEle.setOption(option);

        });

    }


    function getChart_all(ecahrtEle, st, et) {
        // var myChart_all = echarts.init(document.getElementById('wtlx_all'));
        st = st || '';
        et = et || '';
        ecahrtEle.showLoading();
        var url = pyapi + '/v2/chart/wtlx_all' + '?st=' + st + '&et=' + et;
        $.get(url, function (data) {
            ecahrtEle.hideLoading();

            // var d = JSON.parse(data);
            var d = data;

            console.log(d.data);

            var create_data = [];
            var finish_data = [];
            var xdata_name = [];
            for (var i in d.data) {
                xdata_name.push(d.data[i].name);
                console.log(d.data[i]);
                create_data.push({
                    'name':d.data[i].name,
                    'value':d.data[i].create,
                });
                finish_data.push({
                    'name':d.data[i].name,
                    'value':d.data[i].finish,
                });

            }

            var series_data_list = [
                {
                    'name':'新提交',
                    'type': 'bar',
                    'itemStyle':{
                        normal:{
                            color:'#c23531',
                            label:{
                                show:true,
                                position:'top',
                                textStyle:{
                                    color:'black'
                                }
                            }

                        },
                    },
                    'data':create_data

                },
                {
                    'name':'已验收',
                    'type': 'bar',
                    'itemStyle':{
                        normal:{
                            color:'#334b5c',
                            label:{
                                show:true,
                                position:'top',
                                textStyle:{
                                    color:'black'
                                }
                            }

                        },
                    },
                    'data':finish_data

                }

            ];



            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: d.title.text,
                    textStyle:{
                        fontSize:25
                    },
                    subtext: d.title.subtext || '',
                    subtextStyle:{
                        fontSize:18
                    },
                    left:'center'
                },
                toolbox:{
                    feature: {
                        saveAsImage: {show: true}
                    }
                },
                grid:{
                    top:100,
                },
                tooltip: {
                    show: true,
                    formatter: '{c}'
                },
                legend: {
                    data: d.legend,
                    top: 60
                },
                xAxis: {
                    type: 'category',
                    // data: d.games,
                    data: xdata_name,
                    show: true,
                    axisLabel:{
                        interval:0
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{
                        formatter:'{value}'
                    }

                },
                series: series_data_list,

            };

            console.log(option);
            ecahrtEle.setOption(option);

        });

    }


    // 时间转字符串 天 小时 分钟
    function rtime2txt(rt) {
        var txt = '';
        // 天
        if (rt > 24 * 3600) {
            txt = parseInt(rt / (24 * 3600)) + '天';
            // 小时
        } else if (rt > 3600) {
            txt = parseInt(rt / 3600) + '小时'
            // 分钟
        } else if (rt > 60) {
            txt = parseInt(rt / 60) + '分钟'
        } else {
            txt = rt + '秒'
        }

        return txt
    }


</script>

<style>
    .fc-sun {
        color: red;
    }

    .fc-sat {
        color: red;
    }

</style>

</body>
</html>


