duhongyu
/
AnYang_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="../css/bootstrap.min.css" />
		<link rel="stylesheet" href="../css/bootstrap-select.css" />
		<script src="../Script/Common/huayi.load.js"></script>
		<script src="../Script/Common/huayi.config.js"></script>
		<link rel="stylesheet" href="../css/init.css" />
		<title>问卷结果</title>
		<style>

		</style>
	</head>

	<body class="gray-bg">

		<div class="daoHang clearfix">
			<div class="dhLeft">
				<sapn><i class="syIcon"></i>位置：
					<a id="ReIndex">首页</a>&gt;
					<a href="javaScript:;">问卷调查</a>&gt;
					<a href="" style="color: #000;">问卷结果</a>
				</sapn>
			</div>
			<div class="dhRight">
				<a href="" title="刷新"><i class="fa fa-refresh"></i></a>
			</div>
		</div>
		<div class="container-fluid wrapper wrapper-content animated fadeInRight">
			<div class="top clearfix " style="margin-bottom: 20px;">
				<div>
					<span>&nbsp;问卷：<select class="form-control"  id="ques" style="width: 300px;display: inline-block;"></select>
					<div style="display: inline-block;width: 400px;">
						<select class="form-control"  id="allques" data-live-search="true">
							<option value="">请选择问题</option>
						</select>
					</div>
					<span>时间：</span><input type="text" id="starttime" class="photo x-color laydate-icon" autocomplete="off" style="height: 35px;width: 200px;" />&nbsp;——&nbsp;
					<input type="text" id="endtime" class="photo x-color laydate-icon" autocomplete="off" style="height: 35px;width: 200px;" />												
					<button class="btns searchGo size-14"> <i class="fa fa-search size-14"></i>&nbsp;搜索</button>
				</div>

			</div>

			<div style="width: 100%; padding: 10px;margin-bottom: 10px;display: none;" class="tabbox">
				<table id="orderlist" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
					<thead>
						<tr>
							<th data-field="F_CusName" data-align="center" data-formatter="forcusname">提交人</th>
							<th data-field="F_Answer" data-align="center">答案</th>
							<th data-field="F_Opton" data-align="center">时间</th>
						</tr>
					</thead>
				</table>
			</div>
			<div style="width: 100%;text-align: center;height: 400px;padding: 0 30%;" class="EchartsData">
				<div style="width: 500px;height: 400px;" id="echartdata"></div>
			</div>
		</div>
	</body>
	<script src="../js/layui/layui.js"></script>
	<script src="../js/bootstrap-select.js"></script>
	<script src="../css/laydate/laydate.js"></script>
	<script src="../js/echarts.common.min.js"></script>
	<script>
		$(function() {
			laydate.skin('blue');
			laydate({
				elem: '#starttime',
				event: 'focus',
				istime: true,
				format: 'YYYY-MM-DD hh:mm:ss'
			});
			laydate({
				elem: '#endtime',
				event: 'focus',
				istime: true,
				format: 'YYYY-MM-DD hh:mm:ss'
			});
			Allquestion($("#ques"))
//			load()
		})

		function Allquestion(obj) {
			obj.empty();
			obj.append(
				'<option selected="selected" value="">请选择问卷</option>'
			);
			$.getJSON(
				huayi.config.callcenter_url +
				"Questionnaire/GetAllPager", {
					token: $.cookie("token")
				},
				function(data) {
					if(data.state.toLowerCase() == "success") {
						var content = data.data;
						$(content).each(function(i, n) {
							$(
								"<option value='" +
								n.F_PagerId +
								"'>" +
								n.F_Title +
								"</option>"
							).appendTo(obj);
						});
					}
				}
			);
		}
		$('#ques').change(function() {
			$("#allques").empty()
			$.getJSON(
				huayi.config.callcenter_url + "Questionnaire/GetAllQuestionByPid", {
					pid: $("#ques").val(),
					token: $.cookie("token"),
				},
				function(data) {
					if(data.state.toLowerCase() == "success") {
						var content = data.data;
						$("<option value=''>请选择问题</option>").appendTo($("#allques"))
						$(content).each(function(i, n) {
							$(
								"<option value='" +
								n.F_QuestionId +
								"'>" +
								n.F_Title +
								"</option>"
							).appendTo($("#allques"));
						});
						$("#allques").selectpicker({
							noneSelectedText: "请选择问题", //默认显示内容
						});
						$("#allques").selectpicker("refresh");
					}
				}
			);
		})
		var arrData = [];
		var myChart = echarts.init(document.getElementById("echartdata"));
		//搜索
		$('.searchGo').click(function() {
			if(!$('#ques').val()){
				layer.msg('请选择问卷')
				return;
			}
			if(!$('#allques').val()){
				layer.msg('请选择问题')
				return;
			}
			$(".tabbox").show()
			arrData = [];
			load();
			initechart();
		})

		//获取列表信息
		function load() {
			//先销毁表格
			$("#orderlist").bootstrapTable("destroy");
			//初始化表格,动态从服务器加载数据
			$("#orderlist").bootstrapTable({
				method: "get", //使用get请求到服务器获取数据
				url: huayi.config.callcenter_url + "Questionnaire/GetAllAnswerByPidQid", //获取数据的Servlet地址
				contentType: "application/x-www-form-urlencoded",
				striped: true, //表格显示条纹
				pagination: true, //启动分页
				pageSize: 10, //每页显示的记录数
				pageNumber: 1, //当前第几页
				pageList: [10, 20, 50, 100], //记录数可选列表
				search: false, //是否启用查询
				showColumns: false, //显示下拉框勾选要显示的列
				showRefresh: false, //显示刷新按钮
				sidePagination: "server", //表示服务端请求
				//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
				//设置为limit可以获取limit, offset, search, sort, order
				queryParamsType: "undefined",
				queryParams: function queryParams(params) {
					//设置查询参数
					//alert(params.pageNumber)
					var param = {
//						pid:3,
//						qid:13,
						pageindex: params.pageNumber,
						pagesize: params.pageSize,
						pid: $("#ques").val() || 0,
					    qid: $("#allques").val() || 0,
						sdata: $("#starttime").val(), //=开始时间
						edata: $("#endtime").val(), //=结束时间
						token: $.cookie("token"),
					};
					// 导出参数
					exportParams = param;
					return param;
				},
				responseHandler: function(res) {
					return {
						"rows": res.data.data,
						"total": res.data.allcount
					}
				},
				onLoadSuccess: function(data) {

				},
				onLoadError: function() {

				},
			});

		}

		function forcusname(val, row) {
			if(val) {
				return "<span>" + row.F_CusName + '-' + row.F_Phone + "</span>"
			} else {
				return '-'
			}
		}
		//获取图表

		function initechart() {
			$.ajax({
				type: "get",
				url: huayi.config.callcenter_url + "Questionnaire/GetAllAnswerCountByPidQid",
				dataType: 'json',
				data: {
					pid: $("#ques").val(),
					qid: $("#allques").val(),
					sdata: $("#starttime").val(), //=开始时间
					edata: $("#endtime").val(), //=结束时间
					token: $.cookie("token"),
				},
				async: true,
				success: function(data) {
					var resultdata = data.data.queitem
					if(resultdata.length > 0) {
						resultdata.forEach(function(val) {
							arrData.push({
								value: val.itemcount,
								name: val.itemname
							})
						})
					}
					var option = {
						title: {
							text:'',
							left:'center'
						},
						tooltip: {
							trigger: 'item',
							formatter: "{b}:{c}({d}%)"
						},
						legend: {
							orient: 'vertical',
							left: 'left'
						},
						series: [{
							name: 'Access From',
							type: 'pie',
							radius: '50%',
							data: arrData,
							//							itemStyle: {
							//								normal: {
							//									label: {
							//										show: false //隐藏标示文字
							//									},
							//									labelLine: {
							//										show: false //隐藏标示线
							//									}
							//								}
							//							},
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]

					};
					myChart.setOption(option);
				}
			});
		}
	</script>

</html>