统计组合图:实例二

63 篇文章 2 订阅
16 篇文章 1 订阅

在这里插入图片描述

index.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>融裕行计划订单平衡概览</title>
    <link rel="stylesheet" href="./eslydsj/css/base.css">
    <link rel="stylesheet" href="./echart/css/bootstrap-4.2.1.css">
    <style>
        .pull-left{
            float: left;
        }
        .pull-right{
            float: right;
        }
        .title{
            padding: 0;font-size: 1.8rem;color: #FFF;font-weight: bold;padding-top: 50px;
        }
        .border_t{
            height: 164px;
            border-bottom: 1px solid #034c6a;
        }
    </style>
</head>
<body class="con">
    <!--顶部-->
    <header class="header left">
        <div class="left nav">
            <ul>
                <li class="@if(in_array(request()->path(),['/']) ) nav_active @endif"><i class="nav_1"></i><a href="{{ route('/') }}">生产数据概览</a> </li>
                <li class="@if(in_array(request()->path(),['predict']) ) nav_active @endif"><i class="nav_3"></i><a href="{{ route('predict') }}">计划订单平衡概览</a> </li>
            </ul>
        </div>
        <div class="header_center left">
            <h1><strong>融裕行计划订单平衡概览</strong></h1>
        </div>
        <div class="right nav text_right">
            <ul style="width: 100%;">
                <li class="data" id="localtime" style="width: 100%;display: block;text-align: right;padding-right: 20px;"></li>
            </ul>
        </div>
    </header>
    <!--内容部分-->
    <div class="con left">
    <!--统计分析图-->
    <div class="div_any">
        <div class="left div_any01">
            <div class="div_any_child">
                <div class="div_any_title">各工厂接单比例 </div>
                <div class="col-md-12 border_t">
                    <div class="col-md-4 pull-left title">融裕行</div>
                    <div class="col-md-8 pull-left" style="padding: 0"><div id="char0" class="p_chart" style="padding: 5px 0"></div></div>
                    <div style="clear: both"></div>
                </div>
                <div class="col-md-12 border_t">
                    <div class="col-md-4 pull-left title">&nbsp;&nbsp;&nbsp;&nbsp;</div>
                    <div class="col-md-8 pull-left" style="padding: 0"><div id="char1" class="p_chart" style="padding: 5px 0""></div></div>
                    <div style="clear: both"></div>
                </div>
                <div class="col-md-12 border_t">
                    <div class="col-md-4 pull-left title">茂&nbsp;&nbsp;&nbsp;&nbsp;盛</div>
                    <div class="col-md-8 pull-left" style="padding: 0"><div id="char2" class="p_chart" style="padding: 5px 0""></div></div>
                    <div style="clear: both"></div>
                </div>
                <div class="col-md-12 border_t">
                    <div class="col-md-4 pull-left title">&nbsp;&nbsp;&nbsp;&nbsp;</div>
                    <div class="col-md-8 pull-left" style="padding: 0"><div id="char3" class="p_chart" style="padding: 5px 0""></div></div>
                    <div style="clear: both"></div>
                </div>
                <div class="col-md-12 border_t">
                    <div class="col-md-4 pull-left title">金&nbsp;&nbsp;&nbsp;&nbsp;路</div>
                    <div class="col-md-8 pull-left" style="padding: 0"><div id="char4" class="p_chart" style="padding: 5px 0""></div></div>
                    <div style="clear: both"></div>
                </div>
                <div style="clear: both"></div>
            </div>
        </div>
        <div class="div_any02 left">
            <div class="div_any_child div_height">
                <div class="table_p">
                    <table>
                        <thead>
                            <tr>
                                <th>{{ $ym }}计划</th>
                                <th>车工人数</th>
                                <th>产能工天</th>
                                <th>已排工天</th>
                                <th>剩余工天</th>
                                <th>比例</th>
                                <th>计划产值</th>
                                <th>平均台产</th>
                                <th>计划台产</th>
                            </tr>
                        </thead>
                        <tbody class="has-many-extra-forms">
                        </tbody>
                        <template class="extra-tpl">
                            <tr>
                                <td class="factory_name"></td>
                                <td class="group_people"></td>
                                <td class="sum_day"></td>
                                <td class="to_sum_day"></td>
                                <td class="sy_day"></td>
                                <td class="day_rate"></td>
                                <td class="pro_yield"></td>
                                <td class="turner_adam"></td>
                                <td class="plan_adam"></td>
                            </tr>
                        </template>
                    </table>
                </div>
            </div>
            <div class="div_any_child" style="height: 540px">
                <div class="div_any_title">各周工天平衡 </div>
                <div style="height: 500px;overflow: hidden">
                    <div id="char6" class="map_div" style=""></div>
                </div>
                <div style="clear: both"></div>
            </div>
        </div>
        <div class="right div_any01">
            <div class="div_any_child div_height">
                <div class="div_any_title">{{ $ym }}各业务部接单占比</div>
                <p id="char7" class="div_height"></p>
            </div>
            <div class="div_any_child" style="height: 540px;overflow: hidden">
                <div class="div_any_title">{{ $ym }}计划品类分布 </div>
                <div >
                    <div id="char8" class="map_div" ></div>
                </div>
            </div>
        </div>
    </div>
</div>
    <script src="./echart/js/jquery.min.js"></script>
    <script src="./echart/js/echarts-4.2.1.min.js"></script>
    <script src="./eslydsj/js/base.js"></script>
    <script src="./eslydsj/js/index.js"></script>
    <script src="./js/initTime.js"></script>
    <script>
        $(function () {
            var index = 0;
            var tpl = $('template.extra-tpl');
            var now_month = '201912';
            function init_extra(months){
                $('.has-many-extra-forms').html('');
                var data = {
                    '_token': "{{ csrf_token() }}",
                    'ym': months,
                };
                $.ajax({
                    url:'{{ route('getPredict') }}',
                    data:data,
                    type:'GET',
                    // cache:false,
                    // dataType:'json',
                    success:function(data) {
                        for (var i =0; i< data.facotry_rate.length;i++){
                            ryhChart(data.facotry_rate[i],i);
                        }

                        for (var i =0; i< data.list.length;i++){
                            addHtml(data.list[i])
                        }
                        //业务部接单占比
                        ryhChart6(data.diff_day_list)
                        ryhChart7(data.branch_name_list)
                        ryhChart8(data.cate_name_list)
                    }
                });
            }
            init_extra(now_month)
            function addHtml(data){
                index++;
                var template = tpl.html().replace(/__LA_KEY__/g, index).replace(/factory_name/g, 'factory_name_'+index)
                    .replace(/__LA_KEY__/g, index).replace(/group_people/g, 'group_people_'+index)
                    .replace(/__LA_KEY__/g, index).replace(/sum_day/g, 'sum_day_'+index)
                    .replace(/__LA_KEY__/g, index).replace(/sy_day/g, 'sy_day_'+index)
                    .replace(/__LA_KEY__/g, index).replace(/day_rate/g, 'day_rate_'+index)
                    .replace(/__LA_KEY__/g, index).replace(/pro_yield/g, 'pro_yield_'+index)
                    .replace(/__LA_KEY__/g, index).replace(/turner_adam/g, 'turner_adam_'+index)
                    .replace(/__LA_KEY__/g, index).replace(/plan_adam/g, 'plan_adam_'+index);
                $('.has-many-extra-forms').append(template);
                $('.factory_name_'+index).html(data['factory_name'])
                $('.group_people_'+index).html(data['group_people'])
                $('.sum_day_'+index).html(data['sum_day'])
                $('.to_sum_day_'+index).html(data['to_sum_day'])
                $('.sy_day_'+index).html(data['sy_day'])
                $('.day_rate_'+index).html(data['day_rate']+'%')
                $('.pro_yield_'+index).html(data['pro_yield']+'万')
                $('.turner_adam_'+index).html('&yen;'+data['turner_adam'])
                $('.plan_adam_'+index).html('&yen;'+data['plan_adam'])
            }
        })
    </script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值