grafana 中textPanel option中编写html
2018-06-28 本文已影响34人
_信仰zmh
多处利用，单独抽取各自共用部分，别人用的时候只用修改config参数、domId、配接口即可
- 示例1，多行多列，数据展示：
<style type="text/css">
/* 重写panel中的table样式 */
.markdown-html #dbox table th{
background: none;
}
.markdown-html #dbox table,
.markdown-html #dbox td,
.markdown-html #dbox th{
border: none;
}
.markdown-html #dbox table td,
.markdown-html #dbox table th {
padding: 0.3rem;
padding-left: 0;
padding-right: 0;
font-size: 0.8rem;
text-align: center;
}
.title-table{
height:2rem;
line-height:2rem;
}
.text-style{
font-size: 1rem;
color: rgb(2, 247, 2);
}
</style>
<!-- 设置最外城容器id -->
<div id="dbox" style="width:100%;height:80px;"></div>
<script>
// 数据源
var dataArr = global_metric_data;
// 表格配置
var tableConfig = {
// 最外层容器id
sourceId: 'dbox',
// 左侧 行1、行2 标题
rowTitle1: "SHOO系统",
rowTitle2: "基础平台",
// 列1、2、3、4 标题
colTitle1:"告警",
colTitle2:"Fatal",
colTitle3:"处理",
colTitle4:"自动化处理率",
}
// 将模板展示到页面上
function setHTML(dom, html){
return document.getElementById(dom).innerHTML = html;
}
// 根据数据源 拼接模板html
function returnDealWarningTemplate(data, config){
var tempHtml = "";
// 若未采集到数据
if(data.length==0){
tempHtml = "<p style='text-align: center;margin-top:20px;'>No data to show!</p>";
setHTML(config.sourceId, tempHtml);
return;
}
var row1col1Val = (data[0].valueRounded || data[0].valueRounded =='0')?data[0].valueRounded:'--';
var row1col2Val = (data[1].valueRounded || data[1].valueRounded =='0')?data[1].valueRounded:'--';
var row1col3Val = (data[2].valueRounded || data[2].valueRounded =='0')?data[2].valueRounded:'--';
var row1col4Val = (data[3].valueRounded || data[3].valueRounded =='0')?data[3].valueRounded+'%':'--';
var row2col1Val=(data[4].valueRounded || data[4].valueRounded =='0')&&(data[7].valueRounded || data[7].valueRounded =='0')?data[4].valueRounded+data[7].valueRounded:'--';
var row2col2Val=(data[5].valueRounded || data[5].valueRounded =='0')&&(data[8].valueRounded || data[8].valueRounded =='0')?data[5].valueRounded+data[8].valueRounded:'--';
var row2col3Val=(data[6].valueRounded || data[6].valueRounded =='0')&&(data[9].valueRounded || data[9].valueRounded =='0')?data[6].valueRounded+data[9].valueRounded:'--';
// DD 与 DC 指标的自动化处理率 不能相加
// 需要DD与DC 处理数和/总处理数和
var DDAddDCItemCount =(data[10].valueRounded || data[10].valueRounded =='0')&&(data[12].valueRounded || data[12].valueRounded =='0')?data[10].valueRounded+data[12].valueRounded:'--';
var DDAddDCAllCount = (data[11].valueRounded || data[11].valueRounded =='0')&&(data[13].valueRounded || data[13].valueRounded =='0')?data[11].valueRounded+data[13].valueRounded:'--';;
var row2col4Val=(DDAddDCItemCount!='--'&&DDAddDCAllCount!='--')?Math.round(DDAddDCItemCount/DDAddDCAllCount*100)+'%':'--';
// 左侧模板 展示排名、击败率、击败类型
tempHtml +=
'<table style="width: 100%;" border="0">' +
'<thead>' +
'<tr style="border-bottom: 1px solid #3d3535;">' +
'<th class="title-table"></th>' +
'<th class="title-table">'+config.colTitle1+'</th>'+
'<th class="title-table">'+config.colTitle2+'</th>'+
'<th class="title-table">'+config.colTitle3+'</th>'+
'<th class="title-table">'+config.colTitle4+'</th>'+
'</tr>'+
'</thead>'+
'<tbody>'+
'<tr style="border-bottom: 1px solid #3d3535;">'+
'<td>'+config.rowTitle1+'</td>'+
'<td><span class="text-style">'+row1col1Val+'</span></td>'+
'<td><span class="text-style">'+row1col2Val+'</span></td>'+
'<td><span class="text-style">'+row1col3Val+'</span></td>'+
'<td><span class="text-style">'+row1col4Val+'</span></td>'+
'</tr>'+
'<tr>'+
'<td>'+config.rowTitle2+'</td>'+
'<td><span class="text-style">'+row2col1Val+'</span></td>'+
'<td><span class="text-style">'+row2col2Val+'</span></td>'+
'<td><span class="text-style">'+row2col3Val+'</span></td>'+
'<td><span class="text-style">'+row2col4Val+'</span></td>'+
'</tr>'+
'</tbody>'+
'</table>';
setHTML(config.sourceId, tempHtml);
}
returnDealWarningTemplate(dataArr,tableConfig);
</script>
- 示例2: 平均响应与处理时间，包含于目标值、昨天值比较
<style type="text/css">
/* 重写panel中的table样式 */
.markdown-html #box table th{
background: none;
}
.markdown-html #box table,
.markdown-html #box td,
.markdown-html #box th{
border: none;
}
.markdown-html #box table td,
.markdown-html #box table th {
padding: 0.3rem;
padding-left:0;
padding-right:0;
}
.align-left{text-align: left}
.align-right{text-align:right}
</style>
<!-- 设置最外城容器id -->
<div id="box" style="width:100%;margin-top:-1rem;"></div>
<script>
// 假数据源
//var global_metric_data=[{"value":1431,"flotpairs":[[1529251199000,1321],[1529337599000,1391],[1529423999000,1431],[1529510399000,1401],[1529596799000,1381],[1529683199000,1401],[1529769599000,1431],[1529855999000,1431]],"valueRounded":1431,"label":"事件平均响应时间全局排名"},{"value":48.175182,"flotpairs":[[1529251199000,44.957985],[1529337599000,42.73859],[1529423999000,42.040817],[1529510399000,44.17671],[1529596799000,45.634922],[1529683199000,46.53846],[1529769599000,46.616543],[1529855999000,48.175182]],"valueRounded":48,"label":"事件平均响应时间全局优胜率"},{"value":11.48,"flotpairs":[[1529251199000,0],[1529337599000,671.06],[1529423999000,351.58],[1529510399000,231.04],[1529596799000,291.34],[1529683199000,71.17],[1529769599000,0],[1529855999000,11.48]],"valueRounded":11.5,"label":"事件平均响应时间"},{"value":50.38,"flotpairs":[[1529251199000,9.6],[1529337599000,119.49],[1529423999000,51.17],[1529510399000,651.49],[1529596799000,421.6],[1529683199000,301.08],[1529769599000,111.21],[1529855999000,501.38]],"valueRounded":501,"label":"事件平均响应时间"},{"value":271.94,"flotpairs":[[1529251199000,331.68],[1529337599000,341.7],[1529423999000,341.75],[1529510399000,331.97],[1529596799000,331.82],[1529683199000,321.36],[1529769599000,311.04],[1529855999000,271.94]],"valueRounded":281,"label":"事件平均响应时间"},{"value":1231.75,"flotpairs":[[1529251199000,1521.2],[1529337599000,1511.29],[1529423999000,1461.92],[1529510399000,1421.85],[1529596799000,1361.57],[1529683199000,1291.54],[1529769599000,1261.57],[1529855999000,1231.75]],"valueRounded":1241,"label":"事件平均响应时间"}];
// 数据源
var dataArr = global_metric_data;
// 表格配置
var tableConfig = {
// 最外层容器id
sourceId: 'box',
// 左侧标题
leftTitle: "全局排名",
// 超越类型：租户/应用系统
compareType: "应用系统",
// 列1 标题
colName1:"列名1",
// 列1 目标值（单位支持秒、分钟、小时、天）
targetValue1:"2小时",
// 列2 标题 目标值
colName2:"列名2",
targetValue2:"4小时",
// 与目标值比较类型 lt表示越小越好，当天值/当月值显示绿色； gt表示越大越好
sortType: 'lt'
}
// 单位转换 将分钟转换成秒、分钟、小时、天
function unitConversion(value){
if(!value && value !='0'){
return '--';
}else{
if(value >= 60){
if(value%60 =='0'){
var num = value/60;
if(num >= 24){
var day = num/24;
if(num%24 =='0'){
return day +'天';
}else{
var ss = day.toFixed(1);
if(ss[ss.length-1]==0){
ss = Math.ceil(ss);
}
return ss +'天';
}
}else{
return num +"小时";
}
}else{
var num2 = (value/60).toFixed(1);
if(num2 >= 24){
var day = num2/24;
var sd = day.toFixed(1);
if(sd[sd.length-1]==0){
sd = Math.ceil(sd);
}
return sd +'天';
}else{
if(num2[num2.length-1]==0){
num2 = Math.ceil(num2);
}
return num2 +"小时";
}
}
}else if(0<value && value<1){
return Math.ceil(value*60) +"秒";
}else{
return value +"分钟";
}
}
}
// 将模板展示到页面上
function setHTML(dom, html){
return document.getElementById(dom).innerHTML = html;
}
// 设置当天值与目标值比较后的状态
function setCompareTargetStatus(rootTodayVal, todayVal, targetVal, sortType){
// 将目标值转换成分钟
if(targetVal.indexOf("秒")!='-1'){
targetVal = parseFloat(targetVal)/60;
}else if(targetVal.indexOf("分钟")!='-1'){
targetVal = parseFloat(targetVal);
}else if(targetVal.indexOf("小时")!='-1'){
targetVal = parseFloat(targetVal)*60;
}else if(targetVal.indexOf("天")!='-1'){
targetVal = parseFloat(targetVal)*60*24;
}else{
alert("tableConfig配置中目标值的单位必须为秒或分钟或小时或天!");
return;
}
if(rootTodayVal > targetVal){
if(sortType == 'lt'){
return '<td class="align-right" style="color:rgb(247, 90, 7)">'+todayVal+'</td>';
}else{
return '<td class="align-right" style="color:rgb(2, 247, 2)">'+todayVal+'</td>';
}
}else if(rootTodayVal == targetVal){
return '<td class="align-right" style="color:#64b0c8">'+todayVal+'</td>';
}else{
if(sortType == 'lt'){
return '<td class="align-right" style="color:rgb(2, 247, 2)">'+todayVal+'</td>';
}else{
return '<td class="align-right" style="color:rgb(247, 90, 7)">'+todayVal+'</td>';
}
}
}
// 设置当天值与昨天值 是上升还是下降状态
function setCompareYesterdayStatus(todayVal, yesterdayVal){
//if(todayVal == undefined || todayVal == null || todayVal ==''||yesterdayVal == undefined || yesterdayVal == null || yesterdayVal ==''){
// return '<td class="align-left" ></td>';
//}
if((todayVal || todayVal==0)&&(yesterdayVal || yesterdayVal==0)){
if(todayVal > yesterdayVal){
return '<td class="align-left" ><img src="https://view.baocloud.cn:7090/bsview/upload-image/arrow-up.png" style="height:15px;margin-top:-5px;"></td>';
}else if(todayVal == yesterdayVal){
return '<td class="align-left" ></td>';
}else{
return '<td class="align-left" ><img src="https://view.baocloud.cn:7090/bsview/upload-image/arrow-down.png" style="height:15px;margin-top:-5px;"></td>';
}
}else{
return '<td class="align-left" ></td>';
}
}
// 根据数据源 拼接模板html
function returnTemplate(data, config){
var tempHtml = "";
// 若未采集到数据
if(data.length==0){
tempHtml = "<p style='text-align: center;margin-top:20px;'>No data to show!</p>";
setHTML(config.sourceId, tempHtml);
return;
}
// 全局排名
var leftPM = (data[0].valueRounded || data[0].valueRounded =='0')?data[0].valueRounded:'--';
// 击败率
var leftJBL = (data[1].valueRounded || data[1].valueRounded =='0')?data[1].valueRounded+'%':'--';
// 列1 当天今天、昨天值
var rootTodayCol1 = data[2].valueRounded;
var todayCol1 = unitConversion(data[2].valueRounded);
var todayVal1 = data[2].flotpairs[data[2].flotpairs.length-1][1];
var yesterdayVal1 = data[2].flotpairs[data[2].flotpairs.length-2]?data[2].flotpairs[data[2].flotpairs.length-2][1]:'undefined';
// 列2 当天今天、昨天值
var rootTodayCol11 = data[3].valueRounded;
var todayCol11 = unitConversion(data[3].valueRounded);
var todayVal11 = data[3].flotpairs[data[3].flotpairs.length-1][1];
var yesterdayVal11 = data[3].flotpairs[data[3].flotpairs.length-2]?data[3].flotpairs[data[3].flotpairs.length-2][1]:'undefined';
// 列1 当月今天、昨天值
var rootTodayCol2 = data[4].valueRounded;
var todayCol2 = unitConversion(data[4].valueRounded);
var todayVal2 = data[4].flotpairs[data[4].flotpairs.length-1][1];
var yesterdayVal2 = data[4].flotpairs[data[4].flotpairs.length-2]?data[4].flotpairs[data[4].flotpairs.length-2][1]:'undefined';
// 列2 当月今天、昨天值
var rootTodayCol22 = data[5].valueRounded;
var todayCol22 = unitConversion(data[5].valueRounded);
var todayVal22 = data[5].flotpairs[data[5].flotpairs.length-1][1];
var yesterdayVal22 = data[5].flotpairs[data[5].flotpairs.length-2]?data[5].flotpairs[data[5].flotpairs.length-2][1]:'undefined';
// 左侧模板 展示排名、击败率、击败类型
tempHtml +=
'<div style="float:left;width:29%;text-align: center;">'+
'<h3 style="font-size: 0.95rem;margin-bottom:8px;margin-top:0.5rem;">'+config.leftTitle+'</h3>'+
'<div style="width: 100%;">'+
'<img src="https://view.baocloud.cn:7090/bsview/upload-image/yinzhang.png" style="width: 2.3rem;opacity: 0.6;position:relative;left:-0.2rem;top:0.3rem;">'+
'<h3 style="display: inline-block;font-weight:bolder;font-size:1.9rem;margin-bottom:0.8rem;margin-top:0.4rem;position:relative;left:-1.2rem;color: #64b0c8;">'+leftPM+'</h3>'+
'<p style="font-size: 0.9rem;margin-bottom: 0;margin-top:-0.3rem;">超越<span style="color: #64b0c8;">'+leftJBL+'</span></p>'+
'<p style="font-size: 0.9rem;">'+config.compareType+'</p>'+
'</div>'+
'</div>';
// 右侧模板 展示列1、列2 目标值、当天值、当月值，与目标值比较、与昨天数据比较
tempHtml +=
'<div style="float:left;width:71%;text-align: center;">'+
'<table style="width: 100%;" border="0">' +
'<thead>' +
'<tr>' +
'<th style="width:22%;"></th>';
if(config.colName1.length>3){
tempHtml +='<th class="align-right" style="white-space:nowrap;"><span style="font-size:0.95rem;position:relative;left:12px;">'+config.colName1+'</span></th>';
}else{
tempHtml +='<th class="align-right" style="white-space:nowrap;"><span style="font-size:0.95rem;position:relative;left:-2px;">'+config.colName1+'</span></th>';
}
tempHtml +='<th></th>';
if(config.colName2.length>3){
tempHtml +='<th class="align-right" style="white-space:nowrap;"><span style="font-size:0.95rem;position:relative;left:12px;">'+config.colName2+'</span></th>';
}else{
tempHtml +='<th class="align-right" style="white-space:nowrap;"><span style="font-size:0.95rem;position:relative;left:-2px;">'+config.colName2+'</span></th>';
}
// '<th class="align-right"><span style="margin-right:-2px;font-size:0.95rem;">'+config.colName2+'</span></th>' +
tempHtml +='<th></th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr style="border-bottom: 1px solid #3d3535;">' +
'<td style="font-size:0.95rem;">目标值</td>' +
'<td style="color: #64b0c8;" class="align-right">'+config.targetValue1+'</td>' +
'<td></td>' +
'<td style="color: #64b0c8;" class="align-right">'+config.targetValue2+'</td>' +
'<td></td>' +
'</tr>' +
'<tr style="border-bottom: 1px solid #3d3535;">' +
'<td style="font-size:0.95rem;">当天</td>' +
setCompareTargetStatus(rootTodayCol1, todayCol1, config.targetValue1, config.sortType) +
setCompareYesterdayStatus(todayVal1, yesterdayVal1)+
setCompareTargetStatus(rootTodayCol11, todayCol11, config.targetValue2, config.sortType) +
setCompareYesterdayStatus(todayVal11, yesterdayVal11)+
'</tr>' +
'<tr>' +
'<td style="font-size:0.95rem;">当月</td>' +
setCompareTargetStatus(rootTodayCol2, todayCol2, config.targetValue1, config.sortType) +
setCompareYesterdayStatus(todayVal2, yesterdayVal2)+
setCompareTargetStatus(rootTodayCol22, todayCol22, config.targetValue2, config.sortType) +
setCompareYesterdayStatus(rootTodayCol22, todayVal22, yesterdayVal22)+
'</tr>' +
'</tbody>' +
'</table>' +
'</div>';
setHTML(config.sourceId, tempHtml);
}
returnTemplate(dataArr,tableConfig);
</script>
- 示例3: 处理率table，包含于目标值、昨天值比较
<style type="text/css">
/* 重写panel中的table样式 */
.markdown-html #tbox table th{
background: none;
}
.markdown-html #tbox table,
.markdown-html #tbox td,
.markdown-html #tbox th{
border: none;
}
.markdown-html #tbox table td,
.markdown-html #tbox table th {
padding: 0.3rem;
padding-left:0;
padding-right:0;
}
.align-left{text-align: left}
.align-right{text-align:right}
</style>
<!-- 设置最外城容器id -->
<div id="tbox" style="width:100%;margin-top:-1rem;"></div>
<script>
// var global_metric_data=[{"value":9,"flotpairs":[[1526874214000,null],[1526877007000,3],[1526878081000,3],[1526892150000,3],[1526923800000,null],[1526978736000,9],[1527010200000,9]],"valueRounded":9,"label":"故障自动化处理率全局排名"},{"value":92.45283,"flotpairs":[[1526874214000,null],[1526877007000,101.72414],[1526878081000,96.55173],[1526892150000,97.4359],[1526923800000,null],[1526978736000,89.189186],[1527010200000,92.45283]],"valueRounded":92,"label":"故障自动化处理率全局优胜率"},{"value":14.285714,"flotpairs":[[1526874214000,66.666664],[1526877007000,66.666664],[1526878081000,66.666664],[1526892150000,62.5],[1526923800000,null],[1526978736000,10],[1527010200000,14.285714]],"valueRounded":14,"label":"监控自动处理告警比例"},{"value":15.824916,"flotpairs":[[1526874214000,13.793103],[1526877007000,14.615385],[1526878081000,14.615385],[1526892151000,12.57485],[1526923800000,50],[1526978736000,19.897959],[1527010200000,15.824916]],"valueRounded":16,"label":"监控自动处理告警比例"},{"value":32.394367,"flotpairs":[[1526893195000,44.604317],[1526893264000,44.604317],[1526894194000,44.604317],[1526923511000,33.668343],[1527009913000,32.394367]],"valueRounded":32,"label":"监控自动处理告警比例"},{"value":18.614405,"flotpairs":[[1526893194000,23.609756],[1526893263000,23.609756],[1526894193000,23.609756],[1526923510000,18.790726],[1527009912000,18.614405]],"valueRounded":19,"label":"监控自动处理告警比例"}];
// 数据源
var dataArr = global_metric_data;
// 表格配置
var tableConfig = {
// 最外层容器id
sourceId: 'tbox',
// 左侧标题
leftTitle: "全局排名",
// 超越类型：租户/应用系统
compareType: "应用系统",
// 列1 标题
colName1:"云管理平台",
// 列1 目标值（单位支持%）
targetRate1:"50%",
// 列2 标题 目标值
colName2:"宝之云",
targetRate2:"20%",
// 与目标值比较类型 lt表示越小越好，当天值/当月值显示绿色； 默认为gt，表示越大越好；
sortType: 'gt'
}
// 将模板展示到页面上
function setHTML(dom, html){
return document.getElementById(dom).innerHTML = html;
}
// 设置当天值与目标值与昨天值比较后的状态
function setCompareTargetAndYesterdayRateStatus(rootTodayVal,rootYesterdayVal, todayVal, targetVal, sortType){
// 将目标值 去掉单位%
targetVal = parseFloat(targetVal);
var compareTodayVal = parseFloat(todayVal);
var statusHtml = "";
if(compareTodayVal > targetVal){
if(sortType == 'lt'){
statusHtml = '<td><span style="margin-left:15px;color:rgb(247, 90, 7);">'+todayVal+'</span>';
}else{
statusHtml = '<td><span style="margin-left:15px;color:rgb(2, 247, 2);">'+todayVal+'</span>';
}
}else if(compareTodayVal == targetVal){
statusHtml = '<td><span style="margin-left:15px;color:#64b0c8;">'+todayVal+'</span>';
}else{
if(sortType == 'lt'){
statusHtml = '<td><span style="margin-left:15px;color:rgb(2, 247, 2);">'+todayVal+'</span>';
}else{
statusHtml = '<td><span style="margin-left:15px;color:rgb(247, 90, 7);">'+todayVal+'</span>';
}
}
// 显示与昨日数据比较 上升或者下降 相等不显示 若数据有问题为null、undefined、“” 也不显示
if((rootTodayVal || rootTodayVal==0)&&(rootYesterdayVal || rootYesterdayVal==0)){
if(rootTodayVal > rootYesterdayVal){
statusHtml += '<img src="https://view.baocloud.cn:7090/bsview/upload-image/arrow-up.png" style="height:15px;margin-top:-8px;"></td>';
}else if(rootTodayVal == rootYesterdayVal){
statusHtml += '<img src="https://view.baocloud.cn:7090/bsview/upload-image/arrow-up.png" style="height:15px;margin-top:-8px;visibility:hidden;"></td>';
}else{
statusHtml += '<img src="https://view.baocloud.cn:7090/bsview/upload-image/arrow-down.png" style="height:15px;margin-top:-8px;"></td>';
}
}else{
statusHtml += '<img src="https://view.baocloud.cn:7090/bsview/upload-image/arrow-up.png" style="height:15px;margin-top:-8px;visibility:hidden;"></td>';
}
return statusHtml;
}
// 根据数据源 拼接模板html
function returnRateTemplate(data, config){
var tempHtml = "";
// 若未采集到数据
if(data.length==0){
tempHtml = "<p style='text-align: center;margin-top:20px;'>No data to show!</p>";
setHTML(config.sourceId, tempHtml);
return;
}
// 全局排名
var leftPM = (data[0].valueRounded || data[0].valueRounded =='0')?data[0].valueRounded:'--';
// 击败率
var leftJBL = (data[1].valueRounded || data[1].valueRounded =='0')?data[1].valueRounded+'%':'--';
// 列1 当天今天、昨天值
var rootTodayCol1 = (data[2].valueRounded || data[2].valueRounded =='0')?data[2].valueRounded+'%':'--';
var todayVal1 = data[2].flotpairs[data[2].flotpairs.length-1][1];
var yesterdayVal1 = data[2].flotpairs[data[2].flotpairs.length-2]?data[2].flotpairs[data[2].flotpairs.length-2][1]:'undefined';
// 列2 当天今天、昨天值
var rootTodayCol11 = (data[3].valueRounded || data[3].valueRounded =='0')?data[3].valueRounded+'%':'--';
var todayVal11 = data[3].flotpairs[data[3].flotpairs.length-1][1];
var yesterdayVal11 = data[3].flotpairs[data[3].flotpairs.length-2]?data[3].flotpairs[data[3].flotpairs.length-2][1]:'undefined';
// 列1 当月今天、昨天值
var rootTodayCol2 = (data[4].valueRounded || data[4].valueRounded =='0')?data[4].valueRounded+'%':'--';
var todayVal2 = data[4].flotpairs[data[4].flotpairs.length-1][1];
var yesterdayVal2 = data[4].flotpairs[data[4].flotpairs.length-2]?data[4].flotpairs[data[4].flotpairs.length-2][1]:'undefined';
// 列2 当月今天、昨天值
var rootTodayCol22 = (data[5].valueRounded || data[5].valueRounded =='0')?data[5].valueRounded+'%':'--';
var todayVal22 = data[5].flotpairs[data[5].flotpairs.length-1][1];
var yesterdayVal22 = data[5].flotpairs[data[5].flotpairs.length-2]?data[5].flotpairs[data[5].flotpairs.length-2][1]:'undefined';
// 左侧模板 展示排名、击败率、击败类型
tempHtml +=
'<div style="float:left;width:29%;text-align: center;">'+
'<h3 style="font-size: 0.95rem;margin-bottom:8px;margin-top:0.5rem;">'+config.leftTitle+'</h3>'+
'<div style="width: 100%;">'+
'<img src="https://view.baocloud.cn:7090/bsview/upload-image/yinzhang.png" style="width: 2.3rem;opacity: 0.6;position:relative;left:-0.2rem;top:0.3rem;">'+
'<h3 style="display: inline-block;font-weight:bolder;font-size:1.9rem;margin-bottom:0.8rem;margin-top:0.4rem;position:relative;left:-1.2rem;color: #64b0c8;">'+leftPM+'</h3>'+
'<p style="font-size: 0.9rem;margin-bottom: 0;margin-top:-0.3rem;">超越<span style="color: #64b0c8;">'+leftJBL+'</span></p>'+
'<p style="font-size: 0.9rem;">'+config.compareType+'</p>'+
'</div>'+
'</div>';
// 右侧模板 展示列1、列2 目标值、当天值、当月值，与目标值比较、与昨天数据比较
tempHtml +=
'<div style="float:left;width:71%;text-align: center;">'+
'<table style="width: 100%;" border="0">' +
'<thead>' +
'<tr>' +
'<th style="width:22%;"></th>' +
'<th style="white-space:nowrap;text-align:center;">'+config.colName1+'</th>'+
'<th style="white-space:nowrap;text-align:center;">'+config.colName2+'</th>'+
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr style="border-bottom: 1px solid #3d3535;">' +
'<td style="font-size:0.95rem;">目标值</td>' +
'<td style="color: #64b0c8;text-align:center;">'+config.targetRate1+'</td>' +
'<td style="color: #64b0c8;text-align:center;">'+config.targetRate2+'</td>' +
'</tr>' +
'<tr style="border-bottom: 1px solid #3d3535;">' +
'<td style="font-size:0.95rem;">当天</td>' +
setCompareTargetAndYesterdayRateStatus(todayVal1,yesterdayVal1, rootTodayCol1, config.targetRate1, config.sortType)+
setCompareTargetAndYesterdayRateStatus(todayVal11,yesterdayVal11, rootTodayCol11, config.targetRate2, config.sortType)+
'</tr>' +
'<tr>' +
'<td style="font-size:0.95rem;">当月</td>' +
setCompareTargetAndYesterdayRateStatus(todayVal2,yesterdayVal2, rootTodayCol2, config.targetRate1, config.sortType)+
setCompareTargetAndYesterdayRateStatus(todayVal22,yesterdayVal22, rootTodayCol22, config.targetRate2, config.sortType)+
'</tr>' +
'</tbody>' +
'</table>' +
'</div>';
setHTML(config.sourceId, tempHtml);
}
returnRateTemplate(dataArr,tableConfig);
</script>
用布尔值需要注意的地方：
我们都知道在if条件表达式中，条件最终会转换成布尔值true/false。
var data = '数据类型';
// 导致数据0不能正常显示
if(data){
return data;
}else{
return '--';
}
当我们在拿到数据的时候，如果取到的是0，但它是正常数据，所以要排除掉0的情况。
数据为真（包含0），就显示数据，数据为null、undefined、""才使用--代替。
var leftPM;
if(data[0].valueRounded || data[0].valueRounded =='0'){
leftPM = data[0].valueRounded;
}else{
leftPM = '--';
}
简化三目运算：
var leftPM = (data[0].valueRounded || data[0].valueRounded =='0')?data[0].valueRounded:'--';
