<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('演出列表')" />
</head>
<body class="gray-bg">
<div class="row  border-bottom white-bg dashboard-header">
    <div class="col-sm-12 search-collapse">
        <form id="formId">
            <div class="select-list">
                <ul>
                    <li>
                        <label>演出id： </label>
                        <input th:field="${performanceId}" type="text" id="performanceId" placeholder="演出ID" name="performanceId" required/>
                    </li>
                    <li>
                        <a class="btn btn-primary btn-rounded btn-sm" onclick="submit()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                    </li>
                </ul>
            </div>
        </form>
        <form id="formId2">
            <div class="select-list" style="text-align: right">
                <ul>
                    <li>
                        <label>演出id：</label>
                        <input type="text" name="perId" id ="perId" readonly/>
                    </li>
                    <li>
                        <label>演出名称：</label>
                        <input type="text" name="perName" id = "perTitle" readonly/>
                    </li>
                </ul>
            </div>
        </form>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>按省份统计购票数量</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">选项1</a>
                            </li>
                            <li><a href="#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <div class="echarts" id="provinceDataChart"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>按城市统计购票数量</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">选项1</a>
                            </li>
                            <li><a href="#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <div class="echarts" id="cityDataChart"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>按年龄统计购票数量</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">选项1</a>
                            </li>
                            <li><a href="#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <div class="echarts" id="ageDataChart"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>按性别统计购票数量</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">选项1</a>
                            </li>
                            <li><a href="#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="sexDataChart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    var prefix = ctx + "kylin/report/getPerformanceData";
    var selectListUrl = prefix + "/list";

    function submit() {
        var performanceId = $("#performanceId").val();
        var param = {
            performanceId: performanceId
        }

        if (performanceId == "") {
            alert("演出ID不能为空");
        } else {
            // $.post(selectListUrl,param,function (res) {
            //     console.log(res.msg);
            //     initProvinceData(res.data);
            // });
            $.operate.post(selectListUrl,
                param,
                function (res) {
                    if(res==null){
                        alert("演出查询异常！");
                        return;
                    }
                    if(res.code!=null&&res.code == 0){
                        initProvinceData(res.data);
                        initCityData(res.data);
                        initAgeData(res.data);
                        initSexData(res.data);

                        $("#perId").attr("value",res.data.performanceId);
                        $("#perTitle").attr("value",res.data.perTitle);
                    }else{
                        // alert(res.msg);
                    }
                });
        }
    }
    function submit2(){
        var form = $("#formId");
        console.log(selectListUrl);
        form.action = selectListUrl;
        form.method = "post";
        form.submit();
        // if ($.validate.form()) {
        //     var form = $("#formId");
        //     console.log(selectListUrl);
        //     form.action = selectListUrl;
        //     form.submit();
        // }
    }

    var validate = $("#formId").validate({
        onkeyup: false,
        rules:{
            performanceId:{
                required:true
            }
        },
        messages:{
            performanceId: {
                required:"演出id不能为空!"
            }
        }
    });

    //按省份统计
    function initProvinceData(data){
        let settingObj = data.provinceDataList;
        // 对象转化为数组
        let settingArr = Object.keys(settingObj).map(key => {
            return settingObj[key];
        })
        // 给数组附键值
        let value = settingArr.map(item => {
            return  item.totalNumber;
        })
        // console.log("value.length==="+value.length);
        // console.log("value[0]==="+value[0]);

        let name = settingArr.map(item => {
            return item.province;
        })
        // console.log("name.length==="+name.length);
        // console.log("name[0]==="+name[0]);


        var barChart = echarts.init(document.getElementById("provinceDataChart"));
        var baroption = {
            title : {
                text: '按省份统计购票数量',
                x:'center'
            },
            toolbox: { //可视化的工具箱
                show: true,
                feature: {
                    dataView: { //数据视图
                        show: true
                    },
                    restore: { //重置
                        show: true
                    },
                    dataZoom: { //数据缩放视图
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    },
                    magicType: {//动态类型切换
                        type: ['bar', 'line']
                    }
                }
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['购票数量']
            },
            grid:{
                x:30,
                x2:40,
                y2:24
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    // data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    data : name
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'开票量',
                    type:'bar',
                    // data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    data:value,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    },
                    itemStyle: {
                        normal: {
                            //这里是重点
                            color: function(params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                                //给大于颜色数量的柱体添加循环颜色的判断
                                var index = params.dataIndex;
                                if (params.dataIndex >= colorList.length) {
                                    index = params.dataIndex - colorList.length;
                                }
                                return colorList[index]
                            }
                        }
                    }
                }
            ]
        };
        barChart.setOption(baroption);
        window.onresize = barChart.resize;
    }
    //按城市统计
    function initCityData(data){
        let settingObj = data.cityDataList;
        // 对象转化为数组
        let settingArr = Object.keys(settingObj).map(key => {
            return settingObj[key];
        })
        // 给数组附键值
        let value = settingArr.map(item => {
            return  item.totalNumber;
        })
        // console.log("value.length==="+value.length);
        // console.log("value[0]==="+value[0]);

        let name = settingArr.map(item => {
            return item.cityName;
        })
        // console.log("name.length==="+name.length);
        // console.log("name[0]==="+name[0]);

        var barChart = echarts.init(document.getElementById("cityDataChart"));
        var baroption = {
            title : {
                text: '按城市统计购票数量',
                x:'center'

            },
            toolbox: { //可视化的工具箱
                show: true,
                feature: {
                    dataView: { //数据视图
                        show: true
                    },
                    restore: { //重置
                        show: true
                    },
                    dataZoom: { //数据缩放视图
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    },
                    magicType: {//动态类型切换
                        type: ['bar', 'line']
                    }
                }
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['购票数量']
            },
            grid:{
                x:30,
                x2:40,
                y2:24
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    // data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    data : name
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'开票量',
                    type:'bar',
                    // data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    data:value,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    },
                    itemStyle: {
                        normal: {
                            //这里是重点
                            color: function(params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                                //给大于颜色数量的柱体添加循环颜色的判断
                                var index = params.dataIndex;
                                if (params.dataIndex >= colorList.length) {
                                    index = params.dataIndex - colorList.length;
                                }
                                return colorList[index]
                            }
                        }
                    }
                }
            ]
        };
        barChart.setOption(baroption);
        window.onresize = barChart.resize;
    }

    //按年龄统计
    function initAgeData(data){
        let settingObj = data.ageDataList;
        // 对象转化为数组
        let settingArr = Object.keys(settingObj).map(key => {
            return settingObj[key];
        })
        // 给数组附键值
        let value = settingArr.map(item => {
            return  item.totalNumber;
        })
        // console.log("value.length==="+value.length);
        // console.log("value[0]==="+value[0]);

        let name = settingArr.map(item => {
            return item.age+"";
        })
        // console.log("name.length==="+name.length);
        // console.log("name[0]==="+name[0]);

        var barChart = echarts.init(document.getElementById("ageDataChart"));
        var baroption = {
            title : {
                text: '按年龄统计购票数量',
                x:'center'
            },
            toolbox: { //可视化的工具箱
                show: true,
                feature: {
                    dataView: { //数据视图
                        show: true
                    },
                    restore: { //重置
                        show: true
                    },
                    dataZoom: { //数据缩放视图
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    },
                    magicType: {//动态类型切换
                        type: ['bar', 'line']
                    }
                }
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['购票数量']
            },
            grid:{
                x:30,
                x2:40,
                y2:24
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : name
                    // minInterval: 0 //去掉小数
                    // axisLabel: {
                    //     formatter: function (v) {
                    //         return parseInt(v)//表示整数。其他数值类型以此类推
                    //     }
                    // }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'开票量',
                    type:'bar',
                    // data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    data:value,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    },
                    itemStyle: {
                        normal: {
                            //这里是重点
                            color: function(params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                                //给大于颜色数量的柱体添加循环颜色的判断
                                var index = params.dataIndex;
                                if (params.dataIndex >= colorList.length) {
                                    index = params.dataIndex - colorList.length;
                                }
                                return colorList[index]
                            }
                        }
                    }
                }
            ]
        };
        barChart.setOption(baroption);
        window.onresize = barChart.resize;
    }


    /**
     * 按性别统计
     * @param data
     */
    function initSexData(data){
        let settingObj = data.sexDataList;

        // 对象转化为数组
        let settingArr = Object.keys(settingObj).map(key => {
            return settingObj[key];
        })
        // 给数组附键值
        let value = settingArr.map(item => {
            return { "value": item.totalNumber };
        })
        // console.log("value.length==="+value.length);
        // console.log("value[0]==="+value[0].value);

        let name = settingArr.map(item => {
            return { "name": item.sex };
        })
        // console.log("name.length==="+name.length);
        // console.log("name[0]==="+name[0].name);
        // 合并数组或者对象在数组或对象前面加...，是es6的新写法，然后数组的map方法会返回数组.
        let objArr = value.map((value, index) => {
            return { ...value ,...name[index]};
        });

        console.log(objArr[0]);

        var pieChart = echarts.init(document.getElementById("sexDataChart"));
        var pieoption = {
            title : {
                text: '按性别统计购票数量',
                // subtext: '纯属虚构',
                x:'center'
            },
            toolbox: { //可视化的工具箱
                show: true,
                feature: {
                    dataView: { //数据视图
                        show: true
                    },
                    restore: { //重置
                        show: true
                    },
                    dataZoom: { //数据缩放视图
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    }
                }
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                left : 'left',
                data: [{name:'dde'},{name:'222'}]
            },
            calculable : true,
            series : [
                {
                    name:'性别',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data: objArr,
                    itemStyle: {
                        normal:{
                            label:{
                                show:true,
                                formatter: "{b} :\n  {c} \n ({d}%)",
                                position:"inner"
                            }
                        }
                    }
                }
            ]
        };
        pieChart.setOption(pieoption);
        $(window).resize(pieChart.resize);
    }

function downloadImpByChart(chartId,name) {
    var url = getFullCanvasDataURL(chartId);
    var link = document.createElement('a');
    link.href = url;
    link.download = name+".png";
    link.click();
};

    //将图形转成base64的图片
    function getFullCanvasDataURL(divId){
        //将第一个画布作为基准。
        var baseCanvas = $("#"+divId).find("canvas").first()[0];
        if(!baseCanvas){
            return false;
        };
        var width = baseCanvas.width;
        var height = baseCanvas.height;
        var ctx = baseCanvas.getContext("2d");
        //遍历，将后续的画布添加到在第一个上
        $("#"+divId).find("canvas").each(function(i,canvasObj){
            if(i>0){
                var canvasTmp = $(canvasObj)[0];
                ctx.drawImage(canvasTmp,0,0,width,height);
            }
        });
        //获取base64位的url
        return baseCanvas.toDataURL();
    }
</script>
</body>
</html>
