scott
/
crm


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
							{extend name="public/layout" /} {block name="title"}数据统计{/block} {block name="body"}
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/echarts.min.js"></script>
<style type="text/css">
	html,
	body {
		display: block;
		/*min-width: 1100px;*/
	}

	.layui-table thead tr, .layui-table-header {
		background-color: #D4E4ED !important;
		border-color: #D4E4ED !important;
	}

	.layui-fluid {
		display: block;
		box-shadow: 0 0 4px 0 #B6CADE;
		border-radius: 5px;
		margin: 15px;
		background-color: #ffffff;
	}
	.layui-table thead tr, .layui-table-header {
        background-color: #D4E4ED !important;
        border-color: #D4E4ED !important;
    }
    .layui-form-label{
        width: auto;
    }


    #data_statistics{
    	/*background: red;*/
    	width: 100%;
    	height: 300px;
    	float: left;
    }
    .tab_1{
    	width: 46%;
    }
    #echartbox_a{
    	display: block;
    	width: 50%;
    	height: 300px;
    	/*background: red;*/
    	float: left;
    }

    #data_statistics_b{
    	/*background: blue;*/
    	width: 44%;
    	height: 300px;
    	float: left;
    }
    .all{
    	width: 100%;
    	background: red;

    }

    #echartbox_b{
    	display: block;
    	width: 50%;
    	height: 300px;
    	/*background: red;*/
    	float: left;
    }
    #data_statistics_c{
    	/*background: blue;*/
    	width: 48%;
    	height: 300px;
    	float: left;
    	/*line-height: 30px;*/
    }

    #echartbox_c{
    	display: block;
    	width: 50%;
    	height: 300px;
    	/*background: red;*/
    	float: left;
    }
    #data_statistics_d{
    	/*background: blue;*/
    	width: 48%;
    	height: 300px;
    	float: left;
    	padding: 20px 12px;
    }
    .viplogo{
/*    	width:100%;
    	height: 100%;*/
    	    margin: 3% 18%;
    }
</style>

<body>
	<!-- <div style="display:none;" class="layui-fluid"> -->
	<div class="layui-fluid">
<!-- 		<div class="layui-card"> -->
			<div class="layui-form-item">
				<div class="layui-tab layui-tab-brief" id="data_statistics" lay-filter="nav">
					<ul class="layui-tab-title">
						<li class="layui-this tab_1" id="tab_1">话术统计</li>
						<li class="tab_1">培训统计</li>
					</ul>
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<div id='echartbox_a'></div>
							<div id="data_statistics_b">
								<br/>
								<p>
									<span>话术总数:{$data.count}条</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<span>应用场景:{$data.label_count}个</span>
								</p><br/>
								<p>
									<span>官方上传:{$data.gf_upload}条</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<span>官方回答:{$data.gf_huida}条</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<span>官方话术占比:{$data.gf_huashu_grwth}</span><br/>
								</p><br/>
								<p>
									<span>业务员共享:{$data.yewu_upload}条</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<span>业务员提问:{$data.yewu_tiwen}条</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<span>业务员回答:{$data.yewu_huida}条</span><br/><br/>
									<span>业务员话术占比:{$data.yewu_huashu_grawth}</span>
								</p>
							</div>
						</div>
						<div class="layui-tab-item">
							<img class="pull-left viplogo" src="__STATIC__/img/data.png" alt="">
<!-- 							<div id='echartbox_b'></div>
							<div id="data_statistics_c">
								
							</div> -->
						</div>
					</div>
				</div>
			</div>
		<!-- </div> -->
	</div>
</body>
{/block} {block name="js"}
<script>
	layui.config({
		base: '__LAYUI__/',
		urlbase: '/sys'
	}).extend({
		index: 'lib/index'
	}).use(['index', 'table', 'element'], function() {
		var $ = layui.$,
			form = layui.form,
			element = layui.element,
			table = layui.table;
		

	    var active = {
			echartline: function() {
				var myChart = echarts.init(document.getElementById('echartbox_a'));
				var option = {
				  title: {
				    text: '',
				    subtext: '',
				    left: 'center'
				  },
				  tooltip: {
				    trigger: 'item'
				  },
				  legend: {
				    // orient: 'vertical',
				    left: '20',
				    type:'scroll',
				    height:'90%'
				  },
				  series: [
				    {
				      name: '合计',
				      type: 'pie',
				      radius: '40%',
				      center: ['45%', '33%'],
				      data: [
				        { value: '{$data.gf_upload}', name: '官方上传:{$data.gf_huashu_grwth}' },
				        { value: '{$data.yewu_upload}', name: '业务员共享:{$data.yewu_huashu_grawth}' },
				        { value: '{$data.yewu_tiwen}', name: '业务员提问:{$data.yewu_tiwen_grawth}' }
				      ],
				      emphasis: {
				        itemStyle: {
				          shadowBlur: 10,
				          shadowOffsetX: 10,
				          shadowColor: 'rgba(0, 0, 0, 0.5)'
				        }
				      }
				    }
				  ]
				}
				myChart.setOption(option);
				$(window).resize(function(){
					myChart.resize();
				});
			}
		};
		active.echartline();
		//监听饼形图选项卡
	    element.on('tab(nav)',function(e){
	    	console.log(e)
	        // var con = e.text();
	        // var tabId = e.children('a').attr("hid");
	        // var url = e.children('a').attr("url");
	        // createTab(tabId, con , url);
        	$('#data_statistics_c').empty();
	        if (e.index==1) {

	        	// active.echartlineb();
	        	
	        } else {

	        	// active.echartline('echartbox_a');
	        }
	    });

	});

</script>
{/block}