duhongyu
/
AnYang_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
							<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>工单时间点分布分析</title>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <meta name="keywords" content="">
    <meta name="description" content="">

    <script src="../../Script/Common/huayi.load.js"></script>
    <script src="../../Script/Common/huayi.config.js"></script>
    <!--<link rel="stylesheet" href="../../css/huTotal.css" />-->
      <link rel="stylesheet" href="../../css/init.css" />
    <style>
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }

        .kpi-top {
            background: #f3f3f4;
            height: 60px;
            padding: 10px 20px;
        }

        .topCon {
            float: right;
            margin-right: 45px;
        }

        .content h2 {
            font-size: 18px;
            margin-bottom: 20px;
        }

        .topCon input {
            width: 128px;
            padding: 2px 2PX 2PX 10PX;
            height: 28px;
            border: 1px solid #ebebeb;
            color: #1ab394;
            outline: none;
            vertical-align: middle;
        }
        .content {
            width: 90%;
            margin: 0 auto;
        }
    </style>
</head>

<body class="gray-bg" style="background: #fefefe;">
    <div class="hwkpi">
    	<div class="daoHang clearfix">
					<div class="dhLeft">
					<sapn><i class="syIcon"></i>位置：<a id="ReIndex" href="javaScript:;">首页</a>&gt;<a href="javaScript:;">报表分析</a>&gt;<a href="javaScript:;">业务数据分析</a>&gt;<a href="" class="nowPosition">工单时间点分布分析</a></sapn>
				</div>
				 <div class="dhRight"><a href="" title="刷新"><i class="fa fa-refresh"></i></a></div>
			</div>
        <div class="kpi-top clearfix">
            <div class="topCon">
                开始时间：
                <input type="text" class="laydate-icon" id="startTime" /> 结束时间：
                <input type="text" class="laydate-icon" id="endTime" />
                <button class="btns sear">搜索</button>
                <!--<button class="btn daochu ">导出</button>-->
            </div>
        </div>
        <ul class="nav nav-tabs th-tab">
            <li role="presentation" class="active">
                <a href="javascript:;">折线图</a>
            </li>
            <li role="presentation">
                <a href="javascript:;">柱状图</a>
            </li>
        </ul>
        <div class="content">
            <div class="zhexian">
                <h2 style="text-align: center;">工单时间点分布情况</h2>

                <div id="zhe" style="width: 100%; height: 500px;margin: 0 auto;"></div>
            </div>

            <div class="zhutu" style="display: none;">
                <h2 style="text-align: center;">工单时间点分布情况</h2>
                <div id="zhu" style="width: 950px; height: 500px;margin: 0 auto;"></div>
            </div>

        </div>
    </div>
    <script src="../../css/laydate/laydate.js"></script>
    <script src="../../js/echarts.common.min.js"></script>
    <script>
        $(function () {
            laydate.skin('molv');
            laydate({
                elem: '#startTime',
                event: 'focus',
                format: 'YYYY-MM-DD'
            });
            laydate({
                elem: '#endTime',
                event: 'focus',
                format: 'YYYY-MM-DD'
            });
            //tab切换
            $('.th-tab li').click(function () {
                $(this).addClass('active')
                    .siblings().removeClass('active');

                var index = $(this).index();
                $('.content >div').eq(index).show().siblings().hide();
            })

            bind();

            $(".sear").click(function () {
                bind();
            })
        })
        //折线图
        var zhe = echarts.init(document.getElementById('zhe'));

        var zheoption = {
            color: ['#1ab394'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['工单数量']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
            }],
            yAxis: [{
                type: 'value',
                name: '工单数量/个',
                nameLocation: 'middle',
                nameGap: 35
            }],
            series: [{
                name: '工单数量',
                type: 'line',
                barWidth: '60%',
                data: [10, 52, 200, 334, 390, 330, 220, 210, 200, 52]
            }]
        };
        //柱形图
        var zhu = echarts.init(document.getElementById('zhu'));

        var zhuoption = {
            color: ['#1ab394'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['工单数量']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
            }],
            yAxis: [{
                type: 'value',
                name: '工单数量/个',
                nameLocation: 'middle',
                nameGap: 35
            }],
            series: [{
                name: '工单数量',
                type: 'bar',
                barWidth: '30%',
                data: [10, 52, 200, 334, 390, 330, 220, 210, 200, 52]

            }]
        };
        function bind() {
            $.getJSON(huayi.config.callcenter_url + 'Business/GetWorkPeriod', { starttime: $("#startTime").val(), endtime: $("#endTime").val(), "token": $.cookie("token") }, function (result) {
                if (result.state.toLowerCase() == "success") {
                    zheoption.series[0].data = result.data.count;
                    zheoption.xAxis[0].data = result.data.col;
                    zhuoption.series[0].data = result.data.count;
                    zhuoption.xAxis[0].data = result.data.col;
                    zhe.setOption(zheoption);
                    zhu.setOption(zhuoption);
                }
            })
        }
    </script>
</body>

</html>