點選Echarts儀表盤指標彈出展示列表
阿新 • • 發佈：2019-01-09
儀表盤資料展示
function depotmarkInfo(deptid) { var chart_01 = echarts.init(document.getElementById('charts_01')); chart_01.on("click",function(params){ $("#checkModalLabel").html(params.data.name); $("#checModalBody p .name").html(params.data.name+":"); if(params.data.name=="安全考核") { $("#checModalBody p .store").html(params.data.value+"分(安全問題滿分80分，發現重大事故獎勵20分)"); } else if(params.data.name=="技術業務考核") { $("#checModalBody p .store").html(params.data.value+"分(技術業務培訓滿分100分，歷史榮譽稱號)"); } else if(params.data.name=="兩紀及作業標準") { $("#checModalBody p .store").html(params.data.value+"分(兩紀及作業標準滿分100分)"); } else if(params.data.name=="工作量") { $("#checModalBody p .store").html(params.data.value+"分(工作量平均分)"); } else if(params.data.name=="基本素質") { $("#checModalBody p .store").html(params.data.value+"(基本素質平均分)"); } else if(params.data.name=="誠信管理") { $("#checModalBody p .store").html(params.data.value+"(誠信管理平均分)"); } $("#check").show().addClass('in'); $("#checkModalClose").on("click",function(){ $("#check").hide().removeClass('in'); }); depotsafemarkInfo(params.data.name,1,order,sort,deptid,deptid); }); $.ajax({ url: "../../security/base/peoplesafeoffice!officemarkInfoByAjax.action", type: "post", data:{//頁面資料 傳入站段資訊 deptid:deptid }, dataType: "json", success: function (data) { //獲取成功以後執行 //alert(JSON.Stringify(data)); var dataset=[]; $(data).each(function() { dataset.push(this[0]); }); //判斷：工務處以下全叫“作業標準”,其它的叫“兩紀及作業標準” lenian 2018 03 21 var depotName = data[1]; var twoBiaoPan; if(depotName.indexOf("工務") != -1){ twoBiaoPan = "作業標準"; } else { twoBiaoPan = "兩紀及作業標準"; } chart_01.setOption({ backgroundColor: "rgb(254, 248, 239)", title: { text: '綜合評分:'+ dataset[0][4].toFixed(2),//資料, left: 'center', bottom: 'center', textStyle: { color: '#f00', fontSize: 24, } }, tooltip : { formatter: "{a} <br/>{c} {b}" }, toolbox: { show: true, }, series : [ { name: '安全考核', type: 'gauge', center: ['20%', '30%'], // 預設全域性居中 radius: '42%', min:0, max:100, splitNumber:10, axisLine: { // 座標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 width: 8, color: [[0.2, '#c23531'], [0.8, '#FFC125'], [1, 'green']] } }, axisTick: { // 座標軸小標記 length:12, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto' } }, splitLine: { // 分隔線 length:20, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 color: 'auto' } }, pointer: { width:5 }, title: { fontWeight: 'bolder', offsetCenter: [0, '-30%'], // x, y，單位px }, detail: { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE fontWeight: 'bolder', color:'#63869E', fontSize: '23' }, // data:[{value: 96.5, name: '安全考核'}] data:[{value: dataset[0][0].toFixed(2), name: '安全考核'}] }, { name: '技術業務考核', type: 'gauge', center: ['50%', '30%'], // 預設全域性居中 radius: '42%', min:0, max:100, splitNumber:10, axisLine: { // 座標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 width: 8, color: [[0.2, '#c23531'], [0.8, '#FFC125'], [1, 'green']] } }, axisTick: { // 座標軸小標記 length:12, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto' } }, splitLine: { // 分隔線 length:20, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 color: 'auto' } }, pointer: { width:5 }, title: { fontWeight: 'bolder', offsetCenter: [0, '-30%'], // x, y，單位px }, detail: { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE fontWeight: 'bolder', color:'#63869E', fontSize: '23' }, // data:[{value: 85, name: '技術業務考核'}] data:[{value: dataset[0][1].toFixed(2), name: '技術業務考核'}] }, { name: '兩紀及作業標準', type: 'gauge', center: ['80%', '30%'], // 預設全域性居中 radius: '42%', min:0, max:100, splitNumber:10, axisLine: { // 座標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 width: 8, color: [[0.2, '#c23531'], [0.8, '#FFC125'], [1, 'green']] } }, axisTick: { // 座標軸小標記 length:12, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto' } }, splitLine: { // 分隔線 length:20, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 color: 'auto' } }, pointer: { width:5 }, title: { fontWeight: 'bolder', offsetCenter: [0, '-30%'], // x, y，單位px }, detail: { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE fontWeight: 'bolder', color:'#63869E', fontSize: '23' }, // data:[{value:88, name: '兩紀及作業標準'}] // data:[{value: dataset[0][2].toFixed(2), name: '兩紀及作業標準'}] data:[{value: dataset[0][2].toFixed(2), name: twoBiaoPan}] }, { name: '基本素質', type: 'gauge', center: ['20%', '77%'], // 預設全域性居中 radius: '42%', min:0, max:100, splitNumber:10, axisLine: { // 座標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 width: 8, color: [[0.2, '#c23531'], [0.8, '#FFC125'], [1, 'green']] } }, axisTick: { // 座標軸小標記 length:12, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto' } }, splitLine: { // 分隔線 length:20, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 color: 'auto' } }, pointer: { width:5 }, title: { fontWeight: 'bolder', offsetCenter: [0, '-30%'], // x, y，單位px }, detail: { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE fontWeight: 'bolder', color:'#63869E', fontSize: '23', formatter:'{value}' }, // data:[{value:90, name: '業務量'}] data:[{value: dataset[0][8].toFixed(2), name: '基本素質'}] }, { name: '工作量', type: 'gauge', center: ['50%', '77%'], // 預設全域性居中 radius: '42%', min:0, max:100, splitNumber:10, axisLine: { // 座標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 width: 8, color: [[0.2, '#c23531'], [0.8, '#FFC125'], [1, 'green']] } }, axisTick: { // 座標軸小標記 length:12, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto' } }, splitLine: { // 分隔線 length:20, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 color: 'auto' } }, pointer: { width:5 }, title: { fontWeight: 'bolder', offsetCenter: [0, '-30%'], // x, y，單位px }, detail: { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE fontWeight: 'bolder', color:'#63869E', fontSize: '23', formatter:'{value}' }, // data:[{value:90, name: '業務量'}] data:[{value: dataset[0][3].toFixed(2), name: '工作量'}] }, { name: '誠信管理', type: 'gauge', center: ['80%', '77%'], // 預設全域性居中 radius: '42%', min:0, max:100, splitNumber:10, axisLine: { // 座標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 width: 8, color: [[0.2, '#c23531'], [0.8, '#FFC125'], [1, 'green']] } }, axisTick: { // 座標軸小標記 length:12, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto' } }, splitLine: { // 分隔線 length:20, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 color: 'auto' } }, pointer: { width:5 }, title: { fontWeight: 'bolder', offsetCenter: [0, '-30%'], // x, y，單位px }, detail: { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE fontWeight: 'bolder', color:'#63869E', fontSize: '23', formatter:'{value}' }, // data:[{value:90, name: '業務量'}] data:[{value: 100, name: '誠信管理'}] } ] }); } }); }
指標點出事件
var order="asc"; var sort="asc"; function depotsafemarkInfo(typename,page,order,sort,deptid) { var Xtable = $("#Safetable"); var nextX= $("#nextSafe"); var preX= $("#preSafe"); var nickname; if(typename == "安全考核") { nickname="sec"; } else if(typename== "技術業務考核") { nickname="tec"; } else if(typename== "兩紀及作業標準") { nickname="two"; } else if(typename== "基本素質") { nickname="calMultiScore"; } else if(typename== "工作量") { nickname="work"; } else if(typename== "誠信管理") { nickname="integrity"; } $(".rt", Xtable).remove(); $(".hd", Xtable).remove(); var tablehead = $("<tr class='hd'></tr>"); Xtable.append(tablehead); tablehead.append("<th>員工ID</th>"); tablehead.append("<th>姓名</th>"); if(typename == "安全考核") { tablehead.append("<th id='order'>安全考核分值</th>"); } else if (typename== "技術業務考核") { tablehead.append("<th id='order'>技術業務考核分值</th>"); tablehead.append("<th id='sort'>榮譽稱號分值</th>"); } else if(typename== "兩紀及作業標準") { tablehead.append("<th id='order'>兩紀及作業標準</th>"); } else if(typename== "基本素質") { tablehead.append("<th id='order'>基本素質</th>"); } else if(typename== "工作量") { tablehead.append("<th id='order'>工作量</th>"); } else if(typename== "誠信管理") { tablehead.append("<th id='order'>誠信管理</th>"); } tablehead.append("<th>所屬站段</th>"); tablehead.append("<th>畫像詳情</th>"); $.ajax({ url: "../../security/base/peoplesafeoffice!officesafemarkInfoByAjax.action", type: "post", data:{//頁面資料 傳入站段資訊 pagenumsafe:page , typenickname:nickname, order:order, sort:sort, deptid:deptid }, dataType: "json", success: function (data) { //獲取成功以後執行 // alert(JSON.stringify(data)); var dataset=data; var rstset=dataset[0].result; var type_check_fix; $("#order").on("click", function() { if(order== "asc") { order="desc"; depotsafemarkInfo(typename, page,order,null,deptid); } else { order="asc"; depotsafemarkInfo(typename, page,order,null,deptid); } }); $("#sort").on("click", function() { if(sort== "asc") { sort="desc"; depotsafemarkInfo(typename, page,null,sort,deptid); } else { sort="asc"; depotsafemarkInfo(typename, page,null,sort,deptid); } }); $(rstset).each(function(i,val) { if(typename == "安全考核") { if(val.sec_check == null){ type_check_fix=0.00; }else{ type_check_fix=(val.sec_check).toFixed(2); } } else if (typename== "技術業務考核") { if(val.tec_check == null){ type_check_fix=0.00; }else{ type_check_fix=(val.tec_check).toFixed(2); } } else if(typename== "兩紀及作業標準") { if(val.two_check == null){ type_check_fix=0.00; }else{ type_check_fix=(val.two_check).toFixed(2); } } else if(typename== "基本素質") { if(val.calMultiScore == null){ type_check_fix=0.00; }else{ type_check_fix=(val.calMultiScore).toFixed(2); } } else if(typename== "工作量") { if(val.work_check == null){ type_check_fix=0.00; }else{ type_check_fix=(val.work_check).toFixed(2); } } else if(typename== "誠信管理") { if(val.integrity == null){ type_check_fix=0.00; }else{ type_check_fix=(val.integrity).toFixed(2); } } var tablerow = $("<tr class='rt'></tr>"); Xtable.append(tablerow); tablerow.append("<td>"+formatidcard(val.idcard_num)+"</td>"); tablerow.append("<td>"+val.name+"</td>"); tablerow.append("<td>"+type_check_fix+"</td>"); if(typename== "技術業務考核") { if(val.honorary_check == null){ tablerow.append("<td>0.00</td>"); }else{ tablerow.append("<td>"+val.honorary_check+"</td>"); } } tablerow.append("<td>"+val.depot+"</td>"); var td = $("<td></td>"); var a = $("<a>詳情檢視</a>"); a.on("click", function() { gotohtml(val.idcard_num); }); td.append(a); tablerow.append(td); }); $("#countnumSafe").html("第 " +dataset[0].pageNo+ " 頁 / 共 "+dataset[0].totalPages+" 頁"); $("#pageNoSafe").val(dataset[0].pageNo); $("#gotoSafe").unbind("click", null); $("#gotoSafe").on("click", function() { if($("#pageNoSafe").val()<= data[0].totalPages) { depotsafemarkInfo(typename, $("#pageNoSafe").val(),order,sort,deptid); $("#gotoSafe").css("next"); } else { $("#gotoSafe").css("disabled"); } }); $(nextX).unbind("click", null); if(page<data[0].totalPages) { $(nextX).on("click", function() { depotsafemarkInfo(typename,parseInt(page) + 1,order,sort,deptid); }); $(nextX).css("next"); } else { $(nextX).css("disabled"); } $(preX).unbind("click", null); if(page>1) { $(preX).on("click", function() { depotsafemarkInfo(typename,page - 1,order,sort,deptid); }); $(preX).css("previous"); } else { $(preX).css("disabled"); } } }); }
彈出的列表
<div class="modal fade" id="check" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document" style="width:60%;" > <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="checkModalLabel">Modal title</h4> </div> <div class="modal-body" id="checModalBody"> <p> <span class="name"> </span> <span class="store"></span> </p> <table class="table table-bordered table-hover" id="Safetable"> <thead> <!-- <tr> --> <!-- <th>員工ID</th> --> <!-- <th>姓名</th> --> <!-- <th id="checktypename"></th> --> <!-- <th>所屬站段</th> --> <!-- <th>畫像詳情</th> --> <!-- </tr> --> </thead> <tbody> </tbody> </table> <ul class="pager"> <li><a href="#" id="preSafe">上一頁</a></li> <li><a href="#" id="countnumSafe"> 第12頁 / 共234頁 </a></li> <li><a href="#" id="nextSafe">下一頁</a></li> <li> 跳轉到 <input type="text" id="pageNoSafe" class="g-input" style="width: 30px;" > 頁 </li> <li><a href="#" id="gotoSafe">跳轉</a></li> </ul> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" id="checkModalClose">返回</button> </div> </div> </div> </div>
展示圖如下：
