feats

resources/static/css/public.css

 
 /*服务评价统计*/
 .serve {overflow: hidden;clear: both;}
-.serve dl{background:#f5f5f5;width: calc(33.333% - 10px);margin:0 5px;float:left;}
+.serve dl{width: calc(33.333% - 10px);float:left; min-height: 300px;}
+.serve dl:nth-of-type(n+4) { margin-top: 40px; }
 .serve dl dt{width:100%;text-align:center;height:30px;font-size: 16px;margin-top:8px;}
 .serve dl dd{background:#fff; padding:15px 0;text-align:center;margin:0 8px 8px 8px;}
 .serve dl dd a{width:32%;display:inline-block;text-align:center;text-decoration:none;color:#555;}

resources/static/js/task/details.js

 	 
 	 let dictArr = getDictValByDictType("config_if")
 	 $('#iflyyl').append(getDictText(dictArr,$("#iflyyl").attr("selOpt")));
-	 $('#ifjyyl').append(getDictText(dictArr,$("#ifjyyl").attr("selOpt")));	 
+	 $('#ifjyyl').append(getDictText(dictArr,$("#ifjyyl").attr("selOpt")));
+
+	 var optTpl = {
+		color: ['#3DE0A4', '#FF8940', '#CB55E9'],
+		series: [
+			{
+				type: 'gauge',
+				anchor: {
+					show: true,
+					showAbove: true,
+					size: 8,
+					itemStyle: {
+						color: '#3FC9F4'
+					}
+				},
+				pointer: {
+					icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+					width: 4,
+					length: '80%',
+					offsetCenter: [0, '8%']
+				},
+				progress: {
+					show: true,
+					overlap: true,
+					roundCap: true,
+					width: 4
+				},
+				axisLine: {
+					roundCap: true,
+					lineStyle: {
+						width: 4
+					}
+				},
+				axisLabel: {
+					fontSize: 10
+				},
+				data: [],
+				title: {
+					fontSize: 14
+				},
+				detail: {
+					width: 40,
+					height: 14,
+					fontSize: 14,
+					color: '#fff',
+					backgroundColor: 'auto',
+					borderRadius: 3,
+					formatter: '{value}%'
+				}
+			}
+		]
+	};
+
+	var echartInsts = {};
+	var ids = [];
 	
 	 let queryParams = {};
 		queryParams.schCols = 'itemCode,itemName';
 			dataType : 'json',
 			success : function(data) {
 				var rows = data.rows;
-				let itemTxt = [];
-				for(var m = 0; m < rows.length; m++){
-					let row = rows[m]
-					let str = '<dl class="gray" id="'+row.itemCode+'_div"><dt>'+row.itemName+'评价</dt><dd>'+
-                   	    '<a href="javascript:;"><span id="'+row.itemCode+'_1">0%</span> 优</a>'+
-                    '<a href="javascript:;"><span id="'+row.itemCode+'_2">0%</span> 良</a>'+
-                    '<a href="javascript:;"><span id="'+row.itemCode+'_3">0%</span> 差</a></dd></dl>'
-                    $("#commentDiv").append(str)
-                    for(let n=0;n<itemArr.length;n++){
-                    	if(itemArr[n] == row.itemCode){
-                    		itemTxt[itemTxt.length] = row.itemName
-                    		$("#"+ row.itemCode + "_div").removeClass("gray")
-                    	}
-                    }
-				}
-				$("#config_evaluate_item").text(itemTxt.join("、"))
+
+				var dlHtml = rows.map(function(item) {
+					var domId = 'dl_'+item.itemCode;
+					ids.push(item.itemCode)
+					return '<dl id="'+domId+'"></dl>';
+				}).join('');
+				$("#commentDiv").append(dlHtml)
+
+				var evalText = rows.filter(function(item) {
+					var found = itemArr.filter(function(x) { return x == item.itemCode })[0];
+					return !!found;
+				}).map(function(x) { return x.itemName }).join("、")
+
+				ids.reduce(function(insts, id) {
+					var el = document.querySelector("#dl_"+id);
+					var echartInst = echarts.init(el);
+					var title = rows.filter(function(x){ return x.itemCode == id; })[0].itemName;
+					echartInst.setOption(Object.assign({}, optTpl, { title: { text: title + '评价', left: 'center' } }));
+					insts[id] = echartInst;
+					return insts;
+				}, echartInsts);
+
+				// let itemTxt = [];
+				// for(var m = 0; m < rows.length; m++){
+				// 	let row = rows[m]
+				// 	let str = '<dl class="gray" id="'+row.itemCode+'_div"><dt>'+row.itemName+'评价</dt><dd>'+
+        //            	    '<a href="javascript:;"><span id="'+row.itemCode+'_1">0%</span> 优</a>'+
+        //             '<a href="javascript:;"><span id="'+row.itemCode+'_2">0%</span> 良</a>'+
+        //             '<a href="javascript:;"><span id="'+row.itemCode+'_3">0%</span> 差</a></dd></dl>'
+        //             $("#commentDiv").append(str)
+        //             for(let n=0;n<itemArr.length;n++){
+        //             	if(itemArr[n] == row.itemCode){
+        //             		itemTxt[itemTxt.length] = row.itemName
+        //             		$("#"+ row.itemCode + "_div").removeClass("gray")
+        //             	}
+        //             }
+				// }
+				$("#config_evaluate_item").text(evalText)
 			}
 		});	
 		$.ajax({
 			async: false,
 			dataType:"json",
 			success:function(datas){
-				let json = {};
-				if(datas.length > 0){
-					for(let m=0;m<datas.length;m++){
-						let data = datas[m]
-						for(let key in data){
-							if(isRealNum(data[key])){
-								if(json[key] != null){
-									json[key] = data[key]+json[key] 
-								}else{
-									json[key] = data[key]
-								}
+
+				for (data of (datas || [])) {
+					var keys = Object.keys(data);
+					var id = keys.filter(function(key) { return ids.indexOf(key) > -1; })[0];
+					var totalNum = data[id];
+
+					var perfect = (data[id + "_1"] || 0) * 100 / totalNum;
+					var good = (data[id + "_2"] || 0) * 100 / totalNum;
+					var poor = (data[id + "_3"] || 0) * 100 / totalNum;
+
+					var gaugeData = [
+						{
+							value: Number(perfect).toFixed(2) - 0,
+							name: '优',
+							title: {
+								offsetCenter: ['-100%', '90%']
+							},
+							detail: {
+								offsetCenter: ['-100%', '120%']
+							}
+						},
+						{
+							value: Number(good).toFixed(2) - 0,
+							name: '良',
+							title: {
+								offsetCenter: ['0%', '90%']
+							},
+							detail: {
+								offsetCenter: ['0%', '120%']
+							}
+						},
+						{
+							value: Number(poor).toFixed(2) - 0,
+							name: '差',
+							title: {
+								offsetCenter: ['100%', '90%']
+							},
+							detail: {
+								offsetCenter: ['100%', '120%']
 							}
 						}
-					}
-					for(let key in json){					
-						if($("#"+key).length > 0){
-								let val = json[key]
-								let totalNum = json[key.substring(0,2)]
-								let tmpNum = (val/totalNum*100).toFixed()
-								$("#"+key).text(tmpNum + "%");
-								$("#"+key).attr("hidNum",tmpNum)
-						}
-					}
-					$('#commentDiv').find("dl").each(function(){
-						var val=$(this).attr("class");
-						if(val.indexOf("gray") == -1){
-							let differId = null
-							let tmpNm = 100;
-							$(this).find("span").each(function(){
-								if(typeof($(this).attr("hidnum"))!="undefined"){
-									tmpNm = tmpNm - $(this).attr("hidnum")*1;
-								}else{
-									differId = $(this).attr("id")
-								}
-							})
-							if($("#"+differId).text()!="0%"){
-								$("#"+differId).text(tmpNm +"%")
+					];
 
+					var echartInst = echartInsts[id];
+					echartInst.setOption({
+						series: [
+							{
+								data: gaugeData
 							}
-						}else{
-							$(this).find("span").each(function(){
-								$(this).text("0%");
-							})
-						}
-						
+						]
 					})
 				}
+
+				// let json = {};
+				// if(datas.length > 0){
+				// 	for(let m=0;m<datas.length;m++){
+				// 		let data = datas[m]
+				// 		for(let key in data){
+				// 			if(isRealNum(data[key])){
+				// 				if(json[key] != null){
+				// 					json[key] = data[key]+json[key] 
+				// 				}else{
+				// 					json[key] = data[key]
+				// 				}
+				// 			}
+				// 		}
+				// 	}
+
+				// 	for(let key in json){					
+				// 		if($("#"+key).length > 0){
+				// 				let val = json[key]
+				// 				let totalNum = json[key.substring(0,2)]
+				// 				let tmpNum = (val/totalNum*100).toFixed()
+				// 				$("#"+key).text(tmpNum + "%");
+				// 				$("#"+key).attr("hidNum",tmpNum)
+				// 		}
+				// 	}
+				// 	$('#commentDiv').find("dl").each(function(){
+				// 		var val=$(this).attr("class");
+				// 		if(val.indexOf("gray") == -1){
+				// 			let differId = null
+				// 			let tmpNm = 100;
+				// 			$(this).find("span").each(function(){
+				// 				if(typeof($(this).attr("hidnum"))!="undefined"){
+				// 					tmpNm = tmpNm - $(this).attr("hidnum")*1;
+				// 				}else{
+				// 					differId = $(this).attr("id")
+				// 				}
+				// 			})
+				// 			if($("#"+differId).text()!="0%"){
+				// 				$("#"+differId).text(tmpNm +"%")
+
+				// 			}
+				// 		}else{
+				// 			$(this).find("span").each(function(){
+				// 				$(this).text("0%");
+				// 			})
+				// 		}
+						
+				// 	})
+				// }
 				
 			}
 		});

resources/templates/task/details.html

 	th:replace="common/common_header::common_header(~{},~{},~{::style},~{::script},'')">
 <meta charset="utf-8">
 <script th:src="@{/js/task/details.js}"></script>
+<script th:src="@{/js/chart/echarts.min.js}" type="text/javascript"></script>
 <style type="text/css">
 .view-info>div>label{min-width: 148px;}
 </style>