miaofuhao
/
pingDingShan


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
							<!doctype html>
<html lang="en" class="feedback">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>数据统计</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/Common.css" />
		<style>
			.mui-control-content {
				background-color: white;
				min-height: 215px;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile">
						今天
					</a>
					<a class="mui-control-item" href="#item2mobile">
						本周
					</a>
					<a class="mui-control-item" href="#item3mobile">
						本月
					</a>
					<a class="mui-control-item" href="#item4mobile">
						全部
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">

								<div class="chart" id="pieChart"></div>

							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="chart" id="barChart"></div>

							</div>
						</div>

					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">

								<div class="chart" id="lineChart"></div>

							</div>
						</div>

					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">

								<!--	<div class="chart" id="lineCharts"></div>-->
								<span>6489489</span>

							</div>
						</div>

					</div>

				</div>
			</div>
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 ">
					<a href="#">
						<span class="size-20">1000</span>
						<div class="mui-media-body size-14">今天已完成工单</div>
					</a>
					<span class="mui-grid-bottom"></span>
				</li>

				<li class="mui-table-view-cell mui-media mui-col-xs-4 ">
					<a href="#">
						<span class="size-20">1000</span>
						<div class="mui-media-body size-14">今天已完成工单</div>
					</a>
					<span class="mui-grid-bottom"></span>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 ">
					<a href="#">
						<span class="size-20">1000</span>
						<div class="mui-media-body size-14">今天已完成工单</div>
					</a>
					<span class="mui-grid-bottom"></span>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 ">
					<a href="#">
						<span class="size-20">1000</span>
						<div class="mui-media-body size-14">今天已完成工单</div>
					</a>
					<span class="mui-grid-bottom"></span>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 ">
					<a href="#">
						<span class="size-20">1000</span>
						<div class="mui-media-body size-14">今天已完成工单</div>
					</a>
					<span class="mui-grid-bottom"></span>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 ">
					<a href="#">
						<span class="size-20">1000</span>
						<div class="mui-media-body size-14">今天已完成工单</div>
					</a>
					<span class="mui-grid-bottom"></span>
				</li>

			</ul>
		</div>
		<script src="../js/jquery-1.11.1.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/echarts-all.js"></script>
		<script src="../Script/Common/huayi.config.js"></script>
		<script src="../Script/Common/huayi.http.js"></script>
		
		<script type="text/javascript">
			mui.init();
			mui('.mui-scroll-wrapper').scroll();
			var openid = helper.cookies.get("openid");
			var getOption = function(chartType) {
				var chartOption = chartType == 'pie' ? {
					calculable: false,
					legend: {
						orient: 'vertical',
						x: 'left',
						data: ['已完成', '未完成']
					},
					series: [{
						type: 'pie',
						label: {
							normal: {
								position: 'inner',
								formatter: '{b} : {c} ({d}%)'
							}
						},
						radius: '65%',
						center: ['50%', '50%'],
						itemStyle: {
							normal: {
								label: {
									show: true,

									 formatter: " {b} :\n{c} ({d}%)"
								},
								labelLine: {
									show: true,
									
								}
							}
						},

						data: [{
							value: 3350,
							name: '已完成'
						}, {
							value: 310,
							name: '未完成'
						}]
					}]
				} : {
					grid: {
						x: 35,
						x2: 10,
						y: 30,
						y2: 25,
						borderWidth: 0
					},
					toolbox: {
						show: false,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					legend: {

						data: ['已完成', '未完成', ]
					},

					calculable: false,
					xAxis: [{
						axisLabel: {
							interval: 0
						},

						splitArea: {
							show: false,
						},
						splitLine: {
							show: false
						}, //去除网格线
						type: 'category',
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					}],
					yAxis: [{
						show: false,
						splitLine: {
							show: false
						}, //去除网格线
						type: 'value',
						splitArea: {
							show: false,
						}
					}],
					series: [{
						name: '已完成',
						type: chartType,
						barWidth: 10, //柱图宽度
						itemStyle: {
							normal: {
								label: {
									show: true
								}
							}
						},
						data: [20.0, 40.9, 70.0, 230.2, 250.6, 760.7, 80]
					}, {
						name: '未完成',
						type: chartType,
						barWidth: 10, //柱图宽度
						itemStyle: {
							normal: {
								label: {
									show: true
								}
							}
						},
						data: [20.0, 40.9, 70.0, 230.2, 250.6, 760.7, 80]
					}]
				};
				return chartOption;
			};
			var byId = function(id) {
				return document.getElementById(id);
			};
			var barChart = echarts.init(byId('barChart'));
			barChart.setOption(getOption('bar'));
			var lineChart = echarts.init(byId('lineChart'));
			lineChart.setOption(getOption('bar'));
			var pieChart = echarts.init(byId('pieChart'));
			pieChart.setOption(getOption('pie'));
			//今天的数据
			$.ajax({
					type: "get",
					url: huayi.config.callcenter_url + 'WorkOrder/GetDayReport',
					async: true,
					data: {
						openid: openid
					},
					success: function(data) {
						if(data.state=="success"){
							console.log("1");
						}
						console.log("2");

					},
					error:function(data){
						console.log(data.message);
					}
				});
		</script>
	</body>

</html>