<?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: 173px;">
            <input type="text" name="daterange" readonly style="text-align: center">
        </div>
        <button type="button" id="export-wtlx1">导出</button>
        <div id="wtlx1" style="margin:15px; height: 100%;">
        </div>
        <button type="button" id="export-finish">导出</button>
        <div id="wtlx_finish" style="margin:15px; height: 100%;">
        </div>
        <button type="button" id="export-wtlx2">导出</button>
        <div id="wtlx2" style="margin:15px; height: 100%;">
        </div>
    </div>


    <!--    <div id="wtlx_all" style="margin:15px; height: 100%;">-->
    <!--    </div>-->
</div>

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

    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/chart/wtlx1?st=' + st + '&et=' + et + '&export=1';
        window.location.href= url
    })

    document.getElementById('export-wtlx2').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/wtlx2?st=' + st + '&et=' + et + '&export=1';
        window.location.href= url
    })

    document.getElementById('export-finish').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_finish?st=' + st + '&et=' + et + '&export=1';
        window.location.href= url
    })

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

        var myChart = echarts.init(document.getElementById('wtlx1'));
        var myChartFinish = echarts.init(document.getElementById('wtlx_finish'));
        var myChart2 = echarts.init(document.getElementById('wtlx2'));


        $('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];
                    getMyChart(myChart,st,et);
                    getMyChartFinish(myChartFinish,st,et);
                    getMyChart2(myChart2,st,et);
                    $('input[name="daterange"]').val(s);
                }
            }
        });


        getMyChart(myChart);

/*        myChart.showLoading();
        $.get(pyapi + '/v2/chart/wtlx1', function (data) {
            myChart.hideLoading();

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

            console.log(d.data);

            var series_data_list = [];

            for (var i in d.data) {
                console.log(d.data[i].label_name);
                var series_data = {
                    name: d.data[i].label_name,
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color:d.data[i].data[0].itemStyle.color,
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'black'
                                }
                            }
                        }
                    },
                    data: d.data[i].data,
                };


                series_data_list.push(series_data);


            }



            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '各项目验收标签分类统计',
                    textStyle:{
                        fontSize:25
                    },
                    subtext: d.title.subtext || 'x月份',
                    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.games,
                    show: true,
                    axisLabel:{
                        interval:0
                    }
                },
                yAxis: {
                    type: 'value',

                },
                series: series_data_list,

            };

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

        });*/



        getMyChartFinish(myChartFinish);

        getMyChart2(myChart2);

        /*myChart2.showLoading();
        $.get(pyapi + '/v2/chart/wtlx2', function (data) {
            myChart2.hideLoading();

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

            console.log(d.data);

            var series_data_list = [];

            for (var i in d.data) {
                console.log(d.data[i].label_name);
                var series_data = {
                    name: d.data[i].label_name,
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color:d.data[i].data[0].itemStyle.color,
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'black'
                                }
                            }
                        }
                    },
                    label:{
                        normal:{
                            formatter:'{c}%'
                        }
                    },
                    data: d.data[i].data,
                };


                series_data_list.push(series_data);


            }



            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '各项目验收标签top3占比',
                    textStyle:{
                        fontSize:25
                    },
                    subtext: d.title.subtext || 'x月份',
                    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,
                    show: true,
                    axisLabel:{
                        interval:0
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{
                        formatter:'{value}%'
                    }

                },
                series: series_data_list,

            };

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

        });*/



    });


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

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

            console.log(d.data);

            var series_data_list = [];

            for (var i in d.data) {
                console.log(d.data[i].label_name);
                var series_data = {
                    name: d.data[i].label_name,
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color:d.data[i].data[0].itemStyle.color,
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'black'
                                }
                            }
                        }
                    },
                    data: d.data[i].data,
                };


                series_data_list.push(series_data);


            }



            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: d.title.text || '各项目验收标签分类统计',
                    textStyle:{
                        fontSize:25
                    },
                    subtext: d.title.subtext || 'x月份',
                    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.games,
                    show: true,
                    axisLabel:{
                        interval:0
                    }
                },
                yAxis: {
                    type: 'value',

                },
                dataZoom: [
                    {
                        type: 'slider',
                        show: true,
                        xAxisIndex: [0],
                        start: 0,
                        end: 100
                    },
                ],
                series: series_data_list,

            };

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

        });

    }

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

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

            console.log(d.data);

            var series_data_list = [];

            for (var i in d.data) {
                console.log(d.data[i].label_name);
                var series_data = {
                    name: d.data[i].label_name,
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color:d.data[i].data[0].itemStyle.color,
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'black'
                                }
                            }
                        }
                    },
                    data: d.data[i].data,
                };


                series_data_list.push(series_data);


            }



            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: d.title.text || '各项目验收标签分类统计',
                    textStyle:{
                        fontSize:25
                    },
                    subtext: d.title.subtext || 'x月份',
                    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.games,
                    show: true,
                    axisLabel:{
                        interval:0
                    }
                },
                yAxis: {
                    type: 'value',

                },
                dataZoom: [
                    {
                        type: 'slider',
                        show: true,
                        xAxisIndex: [0],
                        start: 0,
                        end: 100
                    },
                ],
                series: series_data_list,

            };

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

        });

    }

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

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

            console.log(d.data);

            var series_data_list = [];

            for (var i in d.data) {
                console.log(d.data[i].label_name);
                var series_data = {
                    name: d.data[i].label_name,
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color:d.data[i].data[0].itemStyle.color,
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'black'
                                }
                            }
                        }
                    },
                    label:{
                        normal:{
                            formatter:'{c}%'
                        }
                    },
                    data: d.data[i].data,
                };


                series_data_list.push(series_data);


            }



            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: d.title.text || '各项目验收标签top3占比',
                    textStyle:{
                        fontSize:25
                    },
                    subtext: d.title.subtext || 'x月份',
                    subtextStyle:{
                        fontSize:18
                    },
                    left:'center'
                },
                toolbox:{
                    feature: {
                        saveAsImage: {show: true},
                        pixelRatio:3
                    }
                },
                grid:{
                    top:100,
                },
                tooltip: {
                    show: true,
                    formatter: '{c}%'
                },
                legend: {
                    data: d.legend,
                    top: 60
                },
                xAxis: {
                    type: 'category',
                    data: d.games,
                    show: true,
                    axisLabel:{
                        interval:0
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{
                        formatter:'{value}%'
                    }

                },
                dataZoom: [
                    {
                        type: 'slider',
                        show: true,
                        xAxisIndex: [0],
                        start: 0,
                        end: 100
                    },
                ],
                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>


