作图

@extends('common.pm_system')

@section('title',"条件查询")
@section('head-style')
    <style>
        .header-d {
            position: relative;
            line-height: 200px;
            height: 200px;
        }

        .submit-btn .layui-btn {
            padding: 0 80px;
        }

        .layui-carousel {
            z-index: 0 !important;
        }

        .layui-carousel img {
             100%;
            -webkit-filter: blur(10px);
            -moz-filter: blur(10px);
            -ms-filter: blur(10px);
            filter: blur(10px);
        }

        .form-d {
            padding: 30px 10px 10px 10px;
            background-color: #fff;
            filter: Alpha(Opacity=80);
            -moz-opacity: 0.8;
            opacity: 0.8;
        }

        .layui-form .layui-word-aux {
            padding: 9px 0 9px 110px !important;
        }
    </style>
@stop

@section('container',"layui-container")

@section('content')
    <div class="layui-carousel" id="carousel">
        <div carousel-item>
            <div>
                <img src="{{asset('/assets/image/bg1.jpg')}}">
            </div>
            <div>
                <img src="{{asset('/assets/image/bg2.jpg')}}">
            </div>
            <div>
                <img src="{{asset('/assets/image/bg3.jpg')}}">
            </div>
        </div>
    </div>
    <div class="header-d">
        <div class="laytable-cell-space">
            <h1>人员项目分布时间统计 </h1>
        </div>
    </div>
    <div class="layui-col-sm-offset3 layui-col-sm6 layui-col-md4 layui-col-md-offset4 form-d">
        <form class="layui-form" action="" method="post">
            {{ csrf_field() }}
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        <strong>ユーザーID</strong>
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" lay-verify="required" placeholder="" autocomplete="off"
                               class="layui-input" value="{{ old('username') ? old('username') : "" }}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        {{$errors->first('username')}}
                        @if (Session::has('error'))
                            {{ Session::get('error') }}
                        @endif
                    </div>
                </div>
            </div>
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">年月范围</label>
                    <div class="layui-input-inline">

                        <input type="text" class="layui-input" id="test3" placeholder="yyyy-MM"
                               value="{{ old('month') ? old('month') : "" }}" name="month">

                    </div>
                </div>
                <div class="layui-form-mid layui-word-aux">{{$errors->first('month')}}</div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block submit-btn">
                    <button class="layui-btn" lay-submit="" lay-filter="search-submit">查询</button>
                    {{--<button type="submit"> 查询</button>--}}
                </div>
            </div>
        </form>
        <div id="main" style=" 600px;height:400px;"></div>
        <div>
            @stop
            @section('footer-js')
                {{--<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>--}}
                <script>
                    layui.use(['form', 'carousel', 'laydate'], function () {
                        var form = layui.form;
                        var laydate = layui.laydate;

                        //年月选择器
                        laydate.render({
                            elem: '#test3'
                            , type: 'month'
                        });
                        //自定义验证规则
                        form.verify({
                            pass: [/(.+){6,12}$/, '密码必须6到12位']
                        });
                        //监听提交
                        form.on('submit(search-submit)', function (data) {
                            //{"_token":"","username":"","password":""}
                            /*layer.alert(JSON.stringify(data.field), {
                             title: '最终的提交信息'
                             })*/
                            //return false;
                            $.ajax({
                                type: "POST",
                                url: "{{ url('pm/SearchPro')  }}",
                                dataType: "json",
                                data: data.field,
                                success: function (data) {
                                    console.log (data.project);
//                                   console.log (data.data[1][0]['pro_id']);
//                                    console.log (data.data[1]);
                                 // 基于准备好的dom，初始化echarts实例
                                    var myChart = echarts.init(document.getElementById('main'));


                                    //数组判断长度+数组判断
                                    // 指定图表的配置项和数据
                                    $value = [data.data[0].length, data.data[1].length],
                                            $name=[data.data[0][0]['pro_id'],data.data[1][0]['pro_id']]
                                            option = {

                                                title: {
                                                    text: '某站点用户访问来源',
                                                    subtext: '纯属虚构',
                                                    x: 'center'
                                                },
                                                tooltip: {
                                                    trigger: 'item',
                                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                                },
                                                legend: {
                                                    orient: 'vertical',
                                                    left: 'left',
                                                    data: $name
                                                },
                                                series: [
                                                    {
                                                        name: '访问来源',
                                                        type: 'pie',
                                                        radius: '55%',
                                                        center: ['50%', '60%'],
                                                        data: [
                                                            {value: $value[0], name: $name[0]},
                                                            {value: $value[1], name: $name[1]}
                                                        ],
                                                        itemStyle: {
                                                            emphasis: {
                                                                shadowBlur: 10,
                                                                shadowOffsetX: 0,
                                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                            }
                                                        }
                                                    }
                                                ]
                                            };
                                    myChart.setOption(option);

                                },
                                error: function () {
                                    layer.alert("查询失败");
                                }
                            });
                            return false;
                        });


                        //轮播
                        var carousel = layui.carousel;
                        //建造实例
                        carousel.render({
                            elem: '#carousel'
                            ,  '100%' //设置容器宽度
                            , arrow: 'hover' //始终显示箭头
                            , anim: 'fade' //切换动画方式
                            , indicator: 'none' //指示器位置
                            , full: true
                        });
                        //
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('main'));

                        // 指定图表的配置项和数据
                        $value = [count(data.code[0]), count(data.code[1])],

//                                $name = [data.data[0]->person_id, data.project[1]->person_id],
//                                option = {
//
//                                    title : {
//                                        text: '某站点用户访问来源',
//                                        subtext: '纯属虚构',
//                                        x:'center'
//                                    },
//                                    tooltip : {
//                                        trigger: 'item',
//                                        formatter: "{a} <br/>{b} : {c} ({d}%)"
//                                    },
//                                    legend: {
//                                        orient: 'vertical',
//                                        left: 'left',
//                                        data: $name
//                                    },
//                                    series : [
//                                        {
//                                            name: '访问来源',
//                                            type: 'pie',
//                                            radius : '55%',
//                                            center: ['50%', '60%'],
//                                            data:[
//                                                {value:$value[0],name:$name[0]},
//                                                {value:$value[1],name:$name[1]}
//                                            ],
//                                            itemStyle: {
//                                                emphasis: {
//                                                    shadowBlur: 10,
//                                                    shadowOffsetX: 0,
//                                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
//                                                }
//                                            }
//                                        }
//                                    ]
//                                };


                            // 使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);
                    });
                </script>
@stop

<?php

namespace AppHttpControllersPM;

use IlluminateHttpRequest;

use AppHttpRequests;
use AppHttpControllersController;
use IlluminateSupportFacadesDB;
use MongoDBBSONTimestamp;

class SearchController extends Controller
{
    //
    public function search()
    {
        return view('pm_systemSearch');
    }

    public function SearchPro(Request $request)
    {
        $username = $request->input('username');
        $month = $request->input('month');
        //得到查询者的id
        $PersonID = DB::table('person')
            ->select('person_id')
            ->where('person_name', $username)
            ->get();

        //获取指定人员指定月份参与的项目
        $pro_id = DB::table('plan')
            ->select('pro_id')->distinct('pro_id')
            ->where('person_id', $PersonID[0]->person_id)
            ->whereBetween('plan.plan_date', [date('Y-m-01', strtotime($month)), date('Y-m-t', strtotime($month))])
            ->get();
        $pro_name = DB::table('project')->where('pro_id', $pro_id)->get();
        //通过for循环得出每个月项目对应的日期
        for ($i = 0; $i < count($pro_id); $i++) {
            $pro_per[$i] = DB::table('plan')
                ->where('person_id', $PersonID[0]->person_id)
                ->where('pro_id', $pro_id[$i]->pro_id)
                ->whereBetween('plan.plan_date', [date('Y-m-01', strtotime($month)), date('Y-m-t', strtotime($month))])
                ->get();
        }
        return response()->json(['code' => "0", 'msg' => '', 'data' => $pro_per, 'project' => $pro_name]);
    }
}