<!DOCTYPE html>
<html lang="zh">
<#include "/include/header.html">
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <#include "/include/left.html">
        <!--End 左侧导航-->
        <!--头部信息-->
        <#include "/include/topbar.html">
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">
                <!--<div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>聚合条件设置</h4>
                            </div>
                            <div class="card-body">
                                <form id="query_form" class="form-inline">
                                    <div class="input-group">
                                        <span class="input-group-addon">分析指标</span>
                                        <div class="form-group">
                                            <select class="selectpicker">
                                                <option>综合分析</option>
                                                <option>订单分析</option>
                                                <option>流水分析</option>
                                                <option>客户分析</option>
                                                <option>经营能力分析</option>
                                                <option>发展趋势分析</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">起始时间</span>
                                        <input class="form-control">
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">结束时间</span>
                                        <input class="form-control">
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">筛选条件</span>
                                        <div class="form-group">
                                            <select class="selectpicker">
                                                <option selected>Mustard</option>
                                                <option>Ketchup</option>
                                                <option>Barbecue</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">筛选值</span>
                                        <input class="form-control">
                                    </div>
                                    <div class="input-group" >
                                        <button type="button" class="btn btn-primary">
                                            <i class="mdi mdi-magnify"></i>确定
                                        </button>
                                    </div>
                                    <div class="input-group">
                                        <button type="button" class="btn btn-info">
                                            <i class="mdi mdi-backup-restore"></i>重置/刷新
                                        </button>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>-->
                <div class="row">
                    <#list cards as card>
                        <#assign text>${card.chartJson!}</#assign>
                        <#assign json=text?eval />
                    <div class="col-sm-6 col-lg-${card.chartSize!}">
                        <div class="card bg-${json.them!}">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">${card.chartName!}</p>
                                    <p class="h3 text-white m-b-0">${json.prefix!}${card.value!}${json.suffix!}</p>
                                </div>
                                <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi ${json.icon!} fa-1-5x"></i></span> </div>
                            </div>
                        </div>
                    </div>
                    </#list>
                </div>
                <div class="row">

                    <#list charts as chart>
                    <div class="col-lg-${chart.chartSize!}">
                        <div class="card">
                            <div class="card-header">
                                <h4>${chart.chartName!}</h4>
                            </div>
                            <div class="card-body">
                                <canvas id="id_chart_${chart.chartId!}"></canvas>
                            </div>
                        </div>
                    </div>
                    </#list>
                </div>
            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<#include "/include/footer.html">
<!--图表插件-->
<script type="text/javascript" src="https://oss.tcjskd.com/delivery/upload/js/Chart.js"></script>
<script type="text/javascript">
    $(function () {
        $('select').selectpicker();
    });
    $(document).ready(function(e) {
        <#list charts as chart>
            let chart${chart.chartId!}=jQuery("#id_chart_${chart.chartId!}")[0].getContext( '2d' );
            let data${chart.chartId!}=JSON.parse('${chart.chartJson}');
            console.log(data${chart.chartId!});
            new Chart(chart${chart.chartId!}, {
                type: '${chart.chartType}',
                data: data${chart.chartId!}
            });
        </#list>
    });

</script>
</body>
</html>