console
/**
* Created by 56837_000 on 2017/8/31.
*/
var pollingInterval = 60000; //60秒请求一次
function getRecalculatedPx(pxVal){ //calculate px value when font size of html is not 16px
var fontSize = parseInt($("html").css('font-size'));
return pxVal*fontSize/16;
}
function changeNumSlowly($dom,endVal){
var aniFn = function (val) {
if(endVal==val){ //若开始值等于结束值，则不需要动画
$dom.html(endVal);
return;
}
$dom.html(num2separatorStr(endVal-val>0?++val:--val));
if(endVal-val!=0) setTimeout(function (){aniFn(val)},10); //只是理论时间，实际时间不一样
};
var startVal = parseInt($dom.html().replace(",","")); //val=="1,024"
if(isNaN(startVal)){ //页面首次加载， startVal=="--"
$dom.html(num2separatorStr(endVal));
}else{
aniFn(startVal);
}
// startVal = isNaN(startVal)?0:startVal; //val=="--"
}
// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子：
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
// 使主题配置生效
Highcharts.theme = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
'#FF9655', '#FFF263', '#6AF9C4'],
chart: {
backgroundColor: null, //图表背景透明
style: {
fontFamily: 'Microsoft Yahei'
}
},
xAxis: {
// gridLineColor: "#707073",
labels: {style: {color: "#1397FF"}},
// lineColor: "#707073",
// minorGridLineColor: "#505053",
// tickColor: "#707073",
// title: {style: {color: "#A0A0A3"}}
},
yAxis: {
gridLineColor: "#434343", //y轴平分网格切割线
labels: {style: {color: "#1397FF"}},
// lineColor: "#707073",
// minorGridLineColor: "#505053",
// tickColor: "#707073",
// tickWidth: 1,
// title: {style: {color: "#A0A0A3"}}
},
};
Highcharts.setOptions(Highcharts.theme);
//HighChart色彩渐变设置
var colors = ['#00FFCC']; //强制设置数据值颜色
Highcharts.getOptions().colors = Highcharts.map(colors, function (color) {
return {
linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1}, //线性渐变，y轴渐变
// radialGradient: { cx:0, cy: -0.8,r:2.3 },
stops: [[0, color], [1, '#2B80CF'] //
]
};
});
var faultSourcesChart = Highcharts.chart('topTenFaultSourcesChartCon', {
chart: {
type: 'bar',
spacingRight: getRecalculatedPx(38), //右侧数据值标签会溢出，设置此处以避免此问题
},
title: {text: null}, //图表标题
legend: {enabled: false}, //图例
tooltip: {enabled: false}, //数据条的tooltip
credits: {enabled: false}, //HighChart Logo
lang: {noData: "<span class='loadFaultTxt'>加载数据失败！</span>"},
noData: {useHTML: true},
xAxis: {
lineWidth: 0, //不显示坐标轴
tickLength: 0, //不显示坐标轴刻度线
labels: {
style: {
fontSize: '0.6875rem',
// fontSize: '11px',
},
useHTML: true
}, //强制x轴 列车编号 即使在拥挤的情况下也不旋转
categories: [],
},
yAxis: {
min: 0, //强制最小值，必须从0开始
max: 500, //强制最大值，此处需随着数据更新而更新，与数据最大值保持一致
tickPositioner: function () {
if (this.dataMax === null) return []; //当数据加载失败时
var positions = [];
var interval = Math.ceil(this.dataMax / 3); //将横轴3等分，切出4根分割线
for (var i = 0; i < this.dataMax; i += interval) {
positions.push(i);
}
positions.push(this.dataMax);
return positions;
},
labels: {
style: {
fontSize: '0.6875rem',
// fontSize: '11px',
},
},
title: {text: null}, //y轴名称
},
plotOptions: {
bar: {
borderWidth: 0, //数据柱子外边框
dataLabels: {
enabled: true, //数据值标签
inside: false, //不在柱子内显示
crop: false, //数据值标签在绘图区外时也不做处理
overflow: 'none', //数据值标签在绘图区外时不隐藏
y:getRecalculatedPx(5),//在2k及4k下因为字体变大导致了数据标签偏移，此处纠正偏移.
style: {
fontSize: '0.6875rem',
// fontSize: '11px',
}
}
},
series: {stacking: 'normal'} //堆叠
},
series: [{
name: 'stackData', //柱子背景层，通过使用堆叠来实现，不科学的做法。
color: '#0C2F3F',
dataLabels: {enabled: false},
data: []
}, {
name: '故障计数',
dataLabels: {color: '#13F1FF'}, //数据标签
data: []
}]
});
var faultTrainsChart = Highcharts.chart('topTenFaultTrainsChartCon', {
chart: {
type: 'column',
spacingTop: getRecalculatedPx(5), //上侧数据值标签会溢出，设置此处以避免此问题
// spacingBottom: getRecalculatedPx(15), //
},
title: {text: null}, //图表标题
legend: {enabled: false}, //图例
tooltip: {enabled: false}, //数据条的tooltip
credits: {enabled: false}, //HighChart Logo
lang: {noData: "<span class='loadFaultTxt'>加载数据失败！</span>"},
noData: {useHTML: true},
xAxis: {
lineWidth: 0, //不显示坐标轴
tickLength: 0, //不显示坐标轴刻度线
labels: {
style: {
// marginTop: '0.5rem',
// paddingTop: '0.5rem',
fontSize: '0.6875rem',
// fontSize: '11px',
},
y:getRecalculatedPx(20),
rotation: 0
}, //强制x轴 列车编号 即使在拥挤的情况下也不旋转
categories: [],
offset:getRecalculatedPx(1),
},
yAxis: {
visible: false, //不显示整个y轴（轴线，刻度线，刻度值）
min: 0, //强制最小值，必须从0开始
max: 500, //强制最大值，此处需随着数据更新而更新，与数据最大值保持一致
title: {text: null}, //y轴名称
},
plotOptions: {
column: {
borderWidth: 0, //数据柱子外边框
dataLabels: {
enabled: true, //数据值标签
inside: false, //不在柱子内显示
crop: false, //数据值标签在绘图区外时也不做处理
overflow: 'none', //数据值标签在绘图区外时不隐藏
style: {
fontSize: '0.6875rem',
// fontSize: '11px',
}
}
},
series: {stacking: 'normal'} //堆叠
},
series: [{
name: 'stackData', //柱子背景层，通过使用堆叠来实现，不科学的做法
dataLabels: {enabled: false},
color: '#0C2F3F',
data: []
}, {
name: '故障计数',
dataLabels: {color: '#13F1FF'}, //数据标签
data: []
}]
});
var disposalChart = Highcharts.chart('disposalChartCon', {
chart:{
margin:[0,getRecalculatedPx(60),getRecalculatedPx(60),getRecalculatedPx(60)]
},
title: {
// floating:true,
text: null,
useHTML: true,
verticalAlign: 'middle',
y: getRecalculatedPx(-45) //中央title y轴方向偏移
},
credits: {enabled: false}, //HighChart Logo
tooltip: {enabled: false}, //数据浮出提示框
lang: {noData: "<span class='loadFaultTxt'>加载数据失败！</span>"},
noData: {useHTML: true},
plotOptions: {
pie: {
borderWidth: 0, //数据柱子外边框
slicedOffset: getRecalculatedPx(5),
dataLabels: {
enabled: false,//当数据为50%，50%时，饼图因为dataLabels而压缩的很小，所以不使用。
useHTML: true,
format: '<span class="disposalChartVal">{point.percentage:.0f} %</span><br><span class="disposalChartValLabel">{point.name}</span>',
},
}
},
series: [{
type: 'pie',
innerSize: '80%', //内圆size占比
name: '提票统计',
data: [
/* {
name: '已提票',
y: 75,
sliced: true,
color:'#00FFCC'
},{
name: '未提票',
y: 25,
sliced: true,
color:'#2B80CF',
},*/
]
}]
});
var inGarageChart = Highcharts.chart('inGarageChartCon', {
chart: {
width: $("#inGarageChartCon").height(),
margin: [0, 0, 0, 0],
spacing: [0, 0, 0, 0],
},
title: {
// floating:true,
text: null,
useHTML: true,
verticalAlign: 'middle',
y: getRecalculatedPx(-15)
// y: -15
},
credits: {enabled: false}, //HighChart Logo
tooltip: {enabled: false}, //数据浮出提示框
lang: {noData: "<span class='loadFaultTxt'>加载数据失败！</span>"},
noData: {useHTML: true},
plotOptions: {
pie: {
borderWidth: 0, //数据柱子外边框
dataLabels: {enabled: false},
}
},
series: [{
type: 'pie',
innerSize: '80%', //内圆size占比
name: '提票统计',
data: [
/* {
name: '已转储',
y: null,
color:'#00FFCC',
// color:'#54F5F5'
selected: true,
},{
name: '未转储',
y: null,
color:'#2B80CF',
// color:'#2078D1',
selected: true,
}*/
]
}]
});
function num2separatorStr(num) { //1024->"1,024"; 999->"999"
if (num < 1000) {
return num;
} else {
var numStr = num.toString();
return numStr.substring(0, numStr.length - 3) + "," + numStr.substring(numStr.length - 3, numStr.length);
}
}
function updateDownloadData(data) {
if (data === null) {
console.log("下载数据更新失败");
return;
}
$("#avDownloadTime").html((function () {
var time = data.avDownloadTime.toFixed(0);
if (time < 60) {
return time + "秒";
} else {
return parseInt(time / 60) + "分" + (time % 60) + "秒";
}
}()));
var downloadSuccCount = 0;
var downloadFailCount = 0;
if(!data.today||data.today.length==0){
console.log("下载数据中今日数据为空");
$("#SHdownloadSuccRate,#NXdownloadSuccRate,#SHNdownloadSuccRate").html("--");
$("#SHdownloadProgressBar,#NXdownloadProgressBar,#SHNdownloadProgressBar").css('width', 0 + "%");
}else{
for (var i = 0; i < 3; i++) {
downloadSuccCount += data.today[i].downloadSuccessCount;
downloadFailCount += data.today[i].downloadFailCount;
var downloadSuccRate = (data.today[i].downloadSuccessCount / (data.today[i].downloadSuccessCount + data.today[i].downloadFailCount) * 100).toFixed(0);
if (data.today[i].garage == "上海") {
// $("#SHdownloadSuccRate").html(downloadSuccRate);
changeNumSlowly($("#SHdownloadSuccRate"),downloadSuccRate);
$("#SHdownloadProgressBar").css('width', downloadSuccRate + "%");
} else if (data.today[i].garage == "南翔") {
// $("#NXdownloadSuccRate").html(downloadSuccRate);
changeNumSlowly($("#NXdownloadSuccRate"),downloadSuccRate);
$("#NXdownloadProgressBar").css('width', downloadSuccRate + "%");
} else if (data.today[i].garage == "上海南") {
// $("#SHNdownloadSuccRate").html(downloadSuccRate);
changeNumSlowly($("#SHNdownloadSuccRate"),downloadSuccRate);
$("#SHNdownloadProgressBar").css('width', downloadSuccRate + "%");
} else {
console.log("下载成功率整备场名不符");
}
}
}
// $("#downloadCount").html(num2separatorStr(downloadSuccCount + downloadFailCount));
// $("#downloadSuccCount").html(num2separatorStr(downloadSuccCount));
// $("#downloadFailCount").html(num2separatorStr(downloadFailCount));
changeNumSlowly($("#downloadCount"),downloadSuccCount + downloadFailCount);
changeNumSlowly($("#downloadSuccCount"),downloadSuccCount);
changeNumSlowly($("#downloadFailCount"),downloadFailCount);
}
//!!!当故障名称长度过长时动画
var faultTableAniIndex=null;
function updateTopFaultsChart(data) { //data:长度为10的array[{traintype:"HXD1C",fltid:1111,faultCount:2222,fltname:"故障名称1"},...]
if (!Array.isArray(data)) {
return;
}
if(faultTableAniIndex){ //防止上次数据动画未执行完毕又加载新数据动画导致错误
clearInterval(faultTableAniIndex);
}
var textSliceFn = function (text) {
if (text.length <= 17) {
return text;
} else {
return text.substr(0, 16) + "...";
}
};
var $dataTd = $(".topFaultsTable td:gt(3)");
$(".trAni").removeClass("trAni");
/* for (var i = 0; i < data.length; i++) { //4列10行,第一行序号无需更新
var tdStartIndex = i * 4 + 1;
$($dataTd[tdStartIndex + 0]).html(data[i].traintype);
$($dataTd[tdStartIndex + 1]).html(data[i].faultCount);
$($dataTd[tdStartIndex + 2]).html("("+data[i].fltid + ")" + textSliceFn(data[i].fltname));
}*/
var loadDataUsingAni = function (i) {
var tdStartIndex = i * 4 + 1;
$($dataTd[tdStartIndex + 0]).html(data[i].traintype);
$($dataTd[tdStartIndex + 1]).html(data[i].faultCount);
$($dataTd[tdStartIndex + 2]).html("("+data[i].fltid + ")" + textSliceFn(data[i].fltname));
$($dataTd[tdStartIndex + 0]).parent().addClass("trAni");
i++;
if(i < data.length) faultTableAniIndex=setTimeout(function(){loadDataUsingAni(i)},500);
};
// loadDataUsingAni(0);
setTimeout(function(){
$(".topFaultsTable td:gt(3):not(.indexTd)").html("--"); //清空所有数据td
loadDataUsingAni(0)
},50); //如果立即执行，由于class切换和css3动画有冲突，第一行的动画效果将会失效。
}
function updateFaultSourcesChart(data) { //data:长度为10的array[{traintype:"HXD1C",flttype:"故障部件1",faultCount:2222},...]
var faultSourcesChartUpdateModel = {
xAxis: {
categories: [] //故障来源
},
yAxis: {
max: 0 //强制最大值，此处需随着数据更新而更新，与数据最大值保持一致
},
series: [{
name: 'stackData',
data: []
}, {
name: '故障计数',
data: []
}]
};
if (!Array.isArray(data)) {
faultSourcesChart.update(faultSourcesChartUpdateModel);
return;
}
var maxFaultCount = data[0].faultCount;
faultSourcesChartUpdateModel.yAxis.max = maxFaultCount;
var textSliceFn = function (text) {
if (text.length <= 6) {
return text;
} else if (text.length <= 12) {
return text.substr(0, 6) + "<br>" + text.substr(6, 6);
} else {
return text.substr(0, 6) + "<br>" + text.substr(6, 5) + "...";
}
};
for (var i = 0; i < data.length; i++) {
faultSourcesChartUpdateModel.xAxis.categories.push(textSliceFn(data[i].flttype));
faultSourcesChartUpdateModel.series[0].data.push(maxFaultCount - data[i].faultCount);
faultSourcesChartUpdateModel.series[1].data.push(data[i].faultCount);
}
faultSourcesChart.update(faultSourcesChartUpdateModel);
}
function updateFaultTrainsChart(data) { //data:长度为10的array[{traintype:"HXD1C",trainno:1111,faultCount:2222},...]
var faultTrainsChartUpdateModel = {
xAxis: {
categories: [] //故障列车
},
yAxis: {
max: 0 //强制最大值，此处需随着数据更新而更新，与数据最大值保持一致
},
series: [{
name: 'stackData',
data: []
}, {
name: '故障计数',
data: []
}]
};
if (!Array.isArray(data)) {
faultTrainsChart.update(faultTrainsChartUpdateModel);
return;
}
var maxFaultCount = data[0].faultCount;
faultTrainsChartUpdateModel.yAxis.max = maxFaultCount;
for (var i = 0; i < data.length; i++) {
faultTrainsChartUpdateModel.xAxis.categories.push(data[i].trainno);
faultTrainsChartUpdateModel.series[0].data.push(maxFaultCount - data[i].faultCount);
faultTrainsChartUpdateModel.series[1].data.push(data[i].faultCount);
}
faultTrainsChart.update(faultTrainsChartUpdateModel);
}
//动画参数
var disposalChartAniId = null;
function updateDisposalChart(data) {
var disposalChartUpdateModel = {
series: [{
data: [
// {
// name: '已提票',
// y: null,
// }, {
// name: '未提票',
// y: null,
// },
]
}]
};
if (data === null) {
disposalChart.update(disposalChartUpdateModel);
return;
}
if(disposalChartAniId){
clearInterval(disposalChartAniId);
}
var chartTitles = [
{
title: {
text: '<div id="disposalTitleDiv" style="text-align: center">' +
'<span class="disposalChartTitle">当日提票总数:</span>' +
'<br>' +
'<span class="disposalChartTitleVal">'+(data.undisposedCount+data.disposeCount)+'</span>' +
'</div>'
}
},{
title: {
text: '<div id="disposalTitleDiv" style="text-align: center">' +
'<span class="disposalChartTitle disposed-color">当日已提票数:</span>' +
'<br>' +
'<span class="disposalChartTitleVal">'+data.disposeCount+'</span>' +
'</div>'
}
},{
title: {
text: '<div id="disposalTitleDiv" style="text-align: center">' +
'<span class="disposalChartTitle undisposed-color" >当日未提票数:</span>' +
'<br>' +
'<span class="disposalChartTitleVal">'+data.undisposedCount+'</span>' +
'</div>'
}
}
];
var titleIndex = 0;
disposalChart.update(chartTitles[titleIndex++]);
disposalChartAniId = setInterval(function () {
disposalChart.update(chartTitles[titleIndex]);
titleIndex++;
titleIndex = titleIndex%chartTitles.length;
}, 3000); //此处和css动画时间相关，如需调整，请一并修改css动画时间
var disposeTotal = data.disposeCount+data.undisposedCount;
disposalChartUpdateModel.series[0].data[0] = {
name: '已提票',
sliced: true,
color: '#00FFCC',
y: disposeTotal===0?1:data.disposeCount //如果提票未提票都是0，环形图会不显示
};
disposalChartUpdateModel.series[0].data[1] = {
name: '未提票',
sliced: true,
color: '#2B80CF',
y: disposeTotal===0?1:data.undisposedCount //如果提票未提票都是0，环形图会不显示
};
disposalChart.update(disposalChartUpdateModel);
// $("#undisposedRatio").html( (data.undisposedCount/(data.disposeCount+data.undisposedCount)*100).toFixed(0) + "%" );
// $("#disposedRatio").html( (data.disposeCount/(data.disposeCount+data.undisposedCount)*100).toFixed(0) + "%" );
if(disposeTotal===0){
changeNumSlowly($("#undisposedRatio"),0);
changeNumSlowly($("#disposedRatio"),0);
}else{
changeNumSlowly($("#undisposedRatio"),(data.undisposedCount/disposeTotal*100).toFixed(0));
changeNumSlowly($("#disposedRatio"),(data.disposeCount/disposeTotal*100).toFixed(0));
}
}
function updateInGarageData(data) {
var inGarageChartUpdateModel = {
title: {text: null},
series: [{
data: [
// {
// name: '已转储',
// y: null,
// }, {
// name: '未转储',
// y: null,
// },
]
}]
};
if (data === null) {
inGarageChart.update(inGarageChartUpdateModel);
return;
}
var storeTotal = 0, inGarageTotal = 0;
for (var i = 0; i < 3; i++) {
storeTotal += data.today[i].storeCount;
inGarageTotal += data.today[i].inGarageCount;
if (data.today[i].garage == "上海") {
// $("#SHStoreCount").html(num2separatorStr(data.today[i].storeCount));
// $("#SHInCount").html(num2separatorStr(data.today[i].inGarageCount));
changeNumSlowly($("#SHStoreCount"),data.today[i].storeCount);
changeNumSlowly($("#SHInCount"),data.today[i].inGarageCount);
} else if (data.today[i].garage == "上海南") {
// $("#NXStoreCount").html(num2separatorStr(data.today[i].storeCount));
// $("#NXInCount").html(num2separatorStr(data.today[i].inGarageCount));
changeNumSlowly($("#NXStoreCount"),data.today[i].storeCount);
changeNumSlowly($("#NXInCount"),data.today[i].inGarageCount);
} else if (data.today[i].garage == "南翔") {
// $("#SHNStoreCount").html(num2separatorStr(data.today[i].storeCount));
// $("#SHNInCount").html(num2separatorStr(data.today[i].inGarageCount));
changeNumSlowly($("#SHNStoreCount"),data.today[i].storeCount);
changeNumSlowly($("#SHNInCount"),data.today[i].inGarageCount);
}
}
inGarageChartUpdateModel.title.text = '<div style="text-align: center">' +
'<span class="disposalChartTitle">当日转储率:</span>' +
'<br>' +
'<span class="disposalChartTitleVal">' + (inGarageTotal==0?0:(storeTotal / inGarageTotal * 100).toFixed(0)) + '%</span>' +
'</div>';
inGarageChartUpdateModel.series[0].data[0] = {
color: '#00FFCC',
selected: true,
y: inGarageTotal==0?1:storeTotal
};
inGarageChartUpdateModel.series[0].data[1] = {
color: '#2B80CF',
selected: true,
y: inGarageTotal==0?1:inGarageTotal - storeTotal
};
inGarageChart.update(inGarageChartUpdateModel);
// $("#todayInGarageCount").html(num2separatorStr(inGarageTotal));
// $("#sevenDaysInGarageCount").html(num2separatorStr(data.sevenDay.inGarageCount));
// $("#todayStoreCount").html(num2separatorStr(storeTotal));
// $("#sevenDaysStoreCount").html(num2separatorStr(data.sevenDay.downloadCount));
changeNumSlowly($("#todayInGarageCount"),inGarageTotal);
changeNumSlowly($("#sevenDaysInGarageCount"),data.sevenDay.inGarageCount);
changeNumSlowly($("#todayStoreCount"),storeTotal);
changeNumSlowly($("#sevenDaysStoreCount"),data.sevenDay.storeCount);
}
$("#currentTime").html(new Date().Format("yyyy-MM-dd hh:mm:ss"));
setInterval(function () {
$("#currentTime").html(new Date().Format("yyyy-MM-dd hh:mm:ss"))
}, 1000);
function openWin(pageName) {
var pageConfig = {
faultStat:"http://localhost:8000/#/faultStatPage", //故障页面
disposalStat:"http://localhost:8000/#/jt6tipiaoPage",
dumpStat:"http://localhost:8000/#/inGaragePage"
};
if(pageConfig[pageName]) window.open(pageConfig[pageName]);
}
//---------------------测试开始
var testData = {
"data": {
"topTenFaultSources": [{
"traintype": "HXD1D",
"flttype": "系统1",
"faultCount": 1356
}, {"traintype": "HXD1D", "flttype": "系统2", "faultCount": 1113}, {
"traintype": "HXD1D",
"flttype": "系统3",
"faultCount": 220
}, {"traintype": "HXD1D", "flttype": "系统4", "faultCount": 167}, {
"traintype": "HXD1D",
"flttype": "系统5",
"faultCount": 161
}, {"traintype": "HXD1D", "flttype": "系统6", "faultCount": 124}, {
"traintype": "HXD1D",
"flttype": "系统7",
"faultCount": 67
}, {"traintype": "HXD1D", "flttype": "系统8", "faultCount": 44}, {
"traintype": "HXD1C",
"flttype": "系统9",
"faultCount": 36
}, {"traintype": "HXD1D", "flttype": "系统10", "faultCount": 34}
],
"topTenFaults": [{
"traintype": "HXD1D",
"fltname": "通信故障",
"fltid": 1061,
"faultCount": 1349
}, {"traintype": "HXD1D", "fltname": "通信故障", "fltid": 1856, "faultCount": 593}, {
"traintype": "HXD1D",
"fltname": "通信故障",
"fltid": 1855,
"faultCount": 494
}, {"traintype": "HXD1D", "fltname": "通信故障", "fltid": 1492, "faultCount": 158}, {
"traintype": "HXD1D",
"fltname": "通信故障",
"fltid": 1620,
"faultCount": 156
}, {"traintype": "HXD1D", "fltname": "通信故障", "fltid": 1868, "faultCount": 124}, {
"traintype": "HXD1D",
"fltname": "通信故障",
"fltid": 1250,
"faultCount": 80
}, {"traintype": "HXD1D", "fltname": "通信故障通信故障", "fltid": 1815, "faultCount": 67}, {
"traintype": "HXD1D",
"fltname": "通信故障通信故障通信故障",
"fltid": 1258,
"faultCount": 65
}, {"traintype": "HXD1C", "fltname": "通信故障通信故障通信故障", "fltid": 1881, "faultCount": 36}
],
"totalFltSeven": 0,
"totalFltToday": 0,
"topTenFaultTrains": [{"traintype": "HXD1D", "trainno": "1234", "faultCount": 1331}, {
"traintype": "HXD1D",
"trainno": "2234",
"faultCount": 937
}, {"traintype": "HXD1D", "trainno": "3234", "faultCount": 925}, {
"traintype": "HXD1D",
"trainno": "4234",
"faultCount": 250
}, {"traintype": "HXD1C", "trainno": "5234", "faultCount": 36}, {
"traintype": "HXD1C",
"trainno": "6234",
"faultCount": 27
}, {"traintype": "HXD1C", "trainno": "7777", "faultCount": 15}, {
"traintype": "HXD1C",
"trainno": "8888",
"faultCount": 9
}]
}, "resultcode": 1
};
var faultTestData = {
todayFaultCount: 1234,
sevenFaultCount: 12345,
topTenFaults: testData.data.topTenFaults,
topTenFaultTrains: testData.data.topTenFaultTrains,
topTenFaultSources: testData.data.topTenFaultSources
};
var disposalTestData = {
disposeCount: 10, //已提票数
undisposedCount: 90 //未提票数
};
var inGarageData = {
today: [
{garage: "上海", inGarageCount: 100, storeCount: 25},
{garage: "南翔", inGarageCount: 100, storeCount: 25},
{garage: "上海南", inGarageCount: 100, storeCount: 25}
],
sevenDay: {inGarageCount: 500, storeCount: 400}
};
var DownloadTestData = {
today: [
{garage: "上海", downloadSuccessCount: 1024, downloadFailCount: 0},
{garage: "南翔", downloadSuccessCount: 50, downloadFailCount: 50},
{garage: "上海南", downloadSuccessCount: 0, downloadFailCount: 100}
],
avDownloadTime: 200 //秒数
};
var totalFltToday=40;
var totalFltSeven=120;
updateTopFaultsChart(faultTestData.topTenFaults);
updateFaultSourcesChart(faultTestData.topTenFaultSources);
updateFaultTrainsChart(faultTestData.topTenFaultTrains);
updateDisposalChart(disposalTestData);
updateInGarageData(inGarageData);
updateDownloadData(DownloadTestData);
changeNumSlowly($("#todayFaultCount"),totalFltToday);
changeNumSlowly($("#sevenDaysFaultCount"),totalFltSeven);
setInterval(function(){
faultTestData.todayFaultCount+=100;
faultTestData.sevenFaultCount+=100;
debugger;
disposalTestData.disposeCount= parseInt((Math.random()*100).toFixed(0));
disposalTestData.undisposedCount= parseInt(100-disposalTestData.disposeCount);
inGarageData.today[0].inGarageCount+=30;
inGarageData.today[0].storeCount+=30;
inGarageData.today[1].inGarageCount+=30;
inGarageData.today[1].storeCount+=30;
inGarageData.today[2].inGarageCount+=30;
inGarageData.today[2].storeCount+=30;
inGarageData.sevenDay.inGarageCount+=30;
inGarageData.sevenDay.storeCount+=30;
DownloadTestData.today[0].downloadSuccessCount+=30;
DownloadTestData.today[1].downloadSuccessCount+=30;
DownloadTestData.today[2].downloadSuccessCount+=30;
DownloadTestData.today[0].downloadFailCount+=20;
DownloadTestData.today[1].downloadFailCount+=20;
DownloadTestData.today[2].downloadFailCount+=20;
DownloadTestData.avDownloadTime+=10;
updateTopFaultsChart(faultTestData.topTenFaults);
updateFaultSourcesChart(faultTestData.topTenFaultSources);
updateFaultTrainsChart(faultTestData.topTenFaultTrains);
updateDisposalChart(disposalTestData);
updateInGarageData(inGarageData);
updateDownloadData(DownloadTestData);
totalFltToday+=20;
totalFltSeven+=20;
changeNumSlowly($("#todayFaultCount"),totalFltToday);
changeNumSlowly($("#sevenDaysFaultCount"),totalFltSeven);
},10000);
//---------------------测试结束
function pollingAll() {
//
}
//pollingAll();
//setInterval(pollingAll,pollingInterval);
<div class="container-fluid">
<div class="headerCon">
<div class="row">
<div class="col-md-12 text-center">
<span class="titleCon"><span class="title">专 家 诊 断 系 统</span></span>
<span class="timeCon flex-center"><span class="glyphicon glyphicon-time"></span> <span
id="currentTime">0000-00-00 00:00:00</span></span>
</div>
</div>
<div class="row titleGif-row">
<div class="col-md-12 text-center"><span class="titleGifCon"><img class="titleGif" src="img/titleGif.gif"
alt=""></span></div>
</div>
<div class="row hr-row">
<div class="col-md-12 text-center"><img class="hr" src="img/hr.png" alt=""></div>
</div>
</div>
<div class="row mainCon">
<div class="firstCol">
<div class="downloadInfoCon">
<span class="chartTitle"><span class="chartTitleCN">下载信息</span><br><span
class="chartTitleEN">Download Info.</span></span>
<hr class="hr-blue">
<span class="dataTitle">当日文件下载总数</span><br>
<span id="downloadCount" class="dataValue">--</span><br>
<span class="dataTitle">下载成功:</span><br>
<span id="downloadSuccCount" class="dataValue">--</span><br>
<span class="dataTitle">下载失败:</span><br>
<span id="downloadFailCount" class="dataValue">--</span><br>
<hr class="hr-blue">
<span class="dataTitle">当日平均下载耗时:</span><br>
<span id="avDownloadTime" class="dataValue">--分--秒</span><span class="dataTitle"> /台</span><br>
<hr class="hr-blue">
<span class="garageTxt">南翔</span><br>
<span class="dataTitle">下载成功率: </span><span class="dataValue"><span id="NXdownloadSuccRate">--</span>%</span><br>
<div class="progress">
<div id="NXdownloadProgressBar" class="progress-bar" style="width: 0%;"></div>
</div>
<br>
<span class="garageTxt">上海</span><br>
<span class="dataTitle">下载成功率: </span><span class="dataValue"><span id="SHdownloadSuccRate">--</span>%</span><br>
<div class="progress">
<div id="SHdownloadProgressBar" class="progress-bar" style="width: 0%;"></div>
</div>
<br>
<span class="garageTxt">上海南</span><br>
<span class="dataTitle">下载成功率: </span><span class="dataValue"><span id="SHNdownloadSuccRate">--</span>%</span><br>
<div class="progress">
<div id="SHNdownloadProgressBar" class="progress-bar" style="width: 0%;"></div>
</div>
<span class="copyRightTxt">CopyRight@<br>株洲中车时代电气股份有限公司</span>
</div>
</div>
<div class="secondCol">
<div class="mainInfoPanel">
<div>
<div class="leftBorderDiv">
<a href="#" onclick="openWin('dumpStat')" class="aClickCon">
<div>
<span class="dataTitle-big">当日入库总数</span><br>
<span id="todayInGarageCount" class="dataVal-big">--</span><span class="dataSuffix-big"> 辆</span><br>
</div>
<div>
<span class="dataTitle-small">近7日累计入库总数</span><br>
<span id="sevenDaysInGarageCount" class="dataVal-small">--</span><span class="dataSuffix-small"> 辆</span>
</div>
</a>
</div>
</div>
<div>
<div class="leftBorderDiv">
<a href="#" onclick="openWin('faultStat')" class="aClickCon">
<div>
<span class="dataTitle-big">当日入库故障总数</span><br>
<span id="todayFaultCount" class="dataVal-big">--</span><span class="dataSuffix-big"> 次</span>
</div>
<div>
<span class="dataTitle-small">近7日入库故障总数</span><br>
<span id="sevenDaysFaultCount" class="dataVal-small">--</span><span class="dataSuffix-small"> 次</span>
</div>
</a>
</div>
</div>
<div>
<div class="leftBorderDiv">
<a href="#" onclick="openWin('dumpStat')" class="aClickCon">
<div>
<span class="dataTitle-big">当日转储总数</span><br>
<span id="todayStoreCount" class="dataVal-big">--</span><span class="dataSuffix-big"> 辆</span><br>
</div>
<div>
<span class="dataTitle-small">近7日累计转储总数</span><br>
<span id="sevenDaysStoreCount" class="dataVal-small">--</span><span class="dataSuffix-small"> 辆</span>
</div>
</a>
</div>
</div>
<div id="inGarageChartOutterCon">
<div id="inGarageChartCon"></div>
</div>
</div>
<div class="mapCon">
<img class="mapImg" src="img/map.png" alt="">
<div class="diagonalLinesCon">
<div class="diagonalLineDiv"></div>
<div class="diagonalLineDiv"></div>
<div class="diagonalLineDiv"></div>
</div>
<div class="garagePointsCon">
<div class="garagePoint wave solid warning">
<div class="circle"></div>
</div>
<div class="garagePoint wave solid warning">
<div class="circle"></div>
</div>
<div class="garagePoint wave solid warning">
<div class="circle"></div>
</div>
</div>
<div class="inGarageInfoCon">
<div class="inGarageInfo"><span>转储:</span><span id="NXStoreCount">--</span><span>辆</span><hr><span>入库:</span><span id="NXInCount">--</span><span>辆</span></div>
<div class="inGarageInfo"><span>转储:</span><span id="SHStoreCount">--</span><span>辆</span><hr><span>入库:</span><span id="SHInCount">--</span><span>辆</span></div>
<div class="inGarageInfo"><span>转储:</span><span id="SHNStoreCount">--</span><span>辆</span><hr><span>入库:</span><span id="SHNInCount">--</span><span>辆</span></div>
</div>
<div class="garageNameLabel">
<span class="garageName">南翔</span>
<span class="garageName">上海</span>
<span class="garageName">上海南</span>
</div>
</div>
</div>
<div class="thirdCol">
<div>
<div>
<div class="row chartDivHeader">
<div class="col-md-8"><span class="chartTitle"><span
class="chartTitleCN">Top 10 故障</span><br><span class="chartTitleEN">Top 10 Faults</span></span>
</div>
<div class="col-md-4 text-right"><span class="chartDivNo">\ 01</span></div>
</div>
<div class="chartCon">
<div id="topTenFaultsChartCon">
<table class="topFaultsTable">
<tbody>
<!--<thead>-->
<!--<tr>-->
<!--<th></th>-->
<!--<th>车型</th>-->
<!--<th>次数</th>-->
<!--<th>故障码及故障名称</th>-->
<!--</tr>-->
<!--</thead>-->
<tr>
<td></td>
<td>车型</td>
<td>次数</td>
<td>故障码及故障名称</td>
</tr>
<tr>
<td class="indexTd">1</td>
<td>--</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td class="indexTd">2</td>
<td>--</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td class="indexTd">3</td>
<td>--</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td class="indexTd">4</td>
<td>--</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td class="indexTd">5</td>
<td>--</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td class="indexTd">6</td>
<td>--</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td class="indexTd">7</td>
<td>--</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td class="indexTd">8</td>
<td>--</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td class="indexTd">9</td>
<td>--</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td class="indexTd">10</td>
<td>--</td>
<td>--</td>
<td>--</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div>
<div class="row chartDivHeader">
<div class="col-md-8"><span class="chartTitle"><span class="chartTitleCN">Top 10 故障列车</span><br><span
class="chartTitleEN">Top 10 Fault Trains</span></span></div>
<div class="col-md-4 text-right"><span class="chartDivNo">\ 03</span></div>
</div>
<div class="chartCon">
<div id="topTenFaultTrainsChartCon"></div>
</div>
</div>
</div>
<div>
<div>
<div class="row chartDivHeader">
<div class="col-md-8"><span class="chartTitle"><span class="chartTitleCN">提票统计</span><br><span
class="chartTitleEN">Disposal Statistic</span></span></div>
<div class="col-md-4 text-right"><span class="chartDivNo">\ 02</span></div>
</div>
<div class="chartCon chartCon-relative">
<div class="disposalDataDiv"><span class="disposalChartVal"><span id="undisposedRatio">--</span>%</span><br><span class="disposalChartValLabel undisposed-color">未提票</span></div>
<div class="disposalDataDiv"><span class="disposalChartVal"><span id="disposedRatio">--</span>%</span><br><span class="disposalChartValLabel disposed-color">已提票</span></div>
<div id="disposalChartCon" style="cursor: pointer" onclick="openWin('disposalStat')"></div>
</div>
</div>
<div>
<div class="row chartDivHeader">
<div class="col-md-8"><span class="chartTitle"><span class="chartTitleCN">Top 10 故障部件</span><br><span
class="chartTitleEN">Top 10 Fault Sources</span></span></div>
<div class="col-md-4 text-right"><span class="chartDivNo">\ 04</span></div>
</div>
<div class="chartCon">
<div id="topTenFaultSourcesChartCon"></div>
</div>
</div>
</div>
</div>
</div>
</div>
html {
font-size: 16px !important;
}
@media screen and (min-width:2560px){ /* 2K 16:9 2560X1440*/
html{
font-size: 24px !important;
}
}
@media screen and (min-width:3839px){ /* 4K 16:9 3840x2160*/
html{
font-size: 32px !important;
}
}
body {
background: url("../img/background.png") no-repeat;
background-size: cover;
font-family: 'Microsoft Yahei';
/* let 10px = 1em */
font-size: 62.5%;
/*font-size: 10px;*/
}
div {
/*background-color: rgba(255,255,255,0.2);*/
/*margin: 10px;*/
}
.flex-center {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
.headerCon {
height: 6rem;
/*height: 96px;*/
}
.titleGif-row {
height: 1.5625rem;
/*height: 25px;*/
}
.titleGif {
height: 25rem;
/*height: 400px;*/
}
.hr-row {
height: 1.25rem;
/*height: 20px*/
}
.title {
color: #fff;
font-size: 3.6em;
/*font-size: 36px;*/
}
.timeCon {
position: absolute;
top: 1.25rem;
/*top: 20px;*/
right: 2.5rem;
/*right: 40px;*/
color: rgb(46, 147, 255);
font-size: 2.4em;
/*font-size: 24px;*/
}
.titleGifCon {
z-index: -1;
position: absolute;
top: -11.25rem;
/*top: -180px;*/
left: 0;
right: 0;
}
.mainCon {
height: 61.5rem;
/*height: 54.75rem;*/
/*height: 876px;*/
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
display: flex;
}
.mainCon > div {
height: 100%;
margin-left: 10px;
/*background-color: rgba(29, 22, 52, 0.5);*/
}
.mainCon > div:nth-child(3) {
margin-right: 10px;
}
.loadFaultTxt {
color: #fff;
font-size: 2em;
/*font-size: 20px*/
}
.hr {
width: 100%
}
.dataTitle {
color: #1397FF;
font-size: 1.8em;
/*font-size: 18px;*/
}
.dataValue {
color: #fff;
font-size: 2.5em;
/*font-size: 25px;*/
}
.garageTxt {
color: #2EDBFF;
font-size: 1.8em;
/*font-size: 18px*/
}
.firstCol {
width: 14%;
overflow-y: hidden;
}
.downloadInfoCon{
height: 100%;
position: relative;
padding: 10px;
margin-bottom: 10px;
background-color: rgba(29, 22, 52, 0.5);
}
.hr-blue {
/*border-top: 1px solid rgba(0, 123, 255, 0.4);*/
border-top: 0.0625rem solid rgba(0, 123, 255, 0.4)
}
.copyRightTxt{
bottom: 0;
left: 0;
position: absolute;
padding-bottom: 10px;
color: #888888;
font-size: 1rem;
width: 100%;
text-align: center;
}
/*---- 第二列布局开始 ----*/
.secondCol {
width: 40%;
display: flex;
flex-direction: column;
background-color: unset !important;
}
.mainInfoPanel {
padding: 10px;
height: 46%;
width: 100%;
margin-bottom: 10px;
background-color: rgba(29, 22, 52, 0.5);
display: flex;
flex-wrap: wrap
}
.mainInfoPanel > div {
width: 50%;
height: 50%;
padding: 10px;
}
#inGarageChartOutterCon {
padding: 0 !important;
}
/*第4个div饼图div*/
.mainInfoPanel > div > div {
padding-left: 10px
}
#inGarageChartOutterCon > div {
padding-left: 0 !important;
}
/*第4个div饼图div*/
#inGarageChartCon {
height: 100%
}
.leftBorderDiv {
width: 100%;
height: 100%;
/*border-left: 10px solid RGBA(0, 123, 255, 0.4);*/
border-left: 0.625rem solid RGBA(0, 123, 255, 0.4);
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.leftBorderDiv > div {
width: 100%
}
.dataTitle-big {
color: #1397FF;
font-size: 2em;
/*font-size: 20px;*/
font-weight: lighter
}
.dataVal-big {
color: #fff;
font-size: 4.6em;
/*font-size: 46px;*/
}
.dataSuffix-big {
color: #1397FF;
font-size: 3.6em;
/*font-size: 36px;*/
}
.dataTitle-small {
color: #1397FF;
font-size: 1.6em;
/*font-size: 16px;*/
font-weight: lighter
}
.dataVal-small {
color: #fff;
font-size: 2.4em;
/*font-size: 24px;*/
}
.dataSuffix-small {
color: #1397FF;
font-size: 2.4em;
/*font-size: 24px;*/
}
.mapCon {
height: 54%;
width: 100%;
position: relative;
background-color: rgba(29, 22, 52, 0.5);
}
.mapCon div{position: absolute;}
.mapCon>div{
height: 100%;
width:100%;
}
.inGarageInfo {
width: 7.5rem;
height: 3.5625rem;
color: #fff;
font-size: 2em;
}
.inGarageInfo:nth-child(1) {
/*text-align: right;*/
left: calc(29.9% - 4rem - 7.5rem);
top: calc(27.4% - 4rem - 1.78125rem);
}
.inGarageInfo:nth-child(2) {
text-align: right;
left: calc(60.3% + 4rem);
top: calc(40.4% - 4rem - 1.78125rem);
}
.inGarageInfo:nth-child(3) {
left: calc(52.8% - 4rem - 7.5rem);
top: calc(77.4% - 4rem - 1.78125rem);
}
.inGarageInfo hr {
margin-top: 0px;
margin-bottom: 0px;
border-top: 0.0625rem solid RGBA(0, 123, 255, 1);
}
.garagePoint{z-index: 20}
.garagePoint:nth-child(1){
left: calc(29.9% - 1rem);
top: calc(27.4% - 1rem);
}
.garagePoint:nth-child(2){
left: calc(60.3% - 1rem);
top: calc(40.4% - 1rem);
}
.garagePoint:nth-child(3){
left: calc(52.8% - 1rem);
top: calc(77.4% - 1rem);
}
.garageName{
position: absolute;
color: #2EDBFF;
font-size: 2.4em;
}
.garageName:nth-child(1){
left: calc(29.9%);
top: calc(27.4%);
}
.garageName:nth-child(2){
left: calc(60.3%);
top: calc(40.4%);
}
.garageName:nth-child(3){
left: calc(52.8%);
top: calc(77.4%);
}
.mapImg{
position: absolute;
width: 100%;
height: 100%;
}
/*---- 第二列布局结束 ----*/
/*---- 第三列布局开始 ----*/
/* 将第三列左右一分为二 */
.thirdCol {
width: 46%;
display: flex;
background-color: unset !important;
}
.thirdCol > div {
height: 100%;
width: 50%;
display: flex;
flex-direction: column;
}
.thirdCol > div:nth-child(1) {
margin-right: 10px
}
/* 将第三列一分为二，然后上下一分为二 */
.thirdCol > div > div {
height: 50%;
width: 100%;
background-color: rgba(29, 22, 52, 0.498039);
padding: 10px
}
.thirdCol > div > div:nth-child(1) {
margin-bottom: 10px
}
.chartTitleCN {
color: #fff;
font-size: 2.5em;
/*font-size: 25px;*/
font-weight: lighter
}
.chartTitleEN {
color: #2edbff;
font-size: 1em;
/*font-size: 10px;*/
font-weight: lighter
}
.chartDivNo {
color: #2edbff;
font-size: 4em;
/*font-size: 40px;*/
}
.chartDivHeader {
height: 15%;
padding-bottom: 10px
}
.chartCon {
height: 84%;
}
#topTenFaultsChartCon, #topTenFaultTrainsChartCon, #disposalChartCon, #topTenFaultSourcesChartCon {
width: 100%;
height: 100%
}
/*---- 第三列布局结束 ----*/
@keyframes disposedTitleDivAni
{
0% {opacity: 0.1;}
5% {opacity: 1;}
95% {opacity: 1;}
100% {opacity: 0.1;}
}
#disposalTitleDiv{
animation: disposedTitleDivAni 10s;
}
.undisposed-color{
color: #2B80CF!important;
}
.disposed-color{
color: #00FFCC!important;
}
.disposalChartValLabel {
font-size: 1.2rem;
/*font-size: 12px;*/
}
.disposalChartVal {
font-size: 2rem;
/*font-size: 20px;*/
color: #fff
}
.chartCon-relative{position: relative}
.disposalDataDiv{
position: absolute;
bottom:0.625rem;
z-index: 10;
}
.disposalDataDiv:first-child{
left:0.625rem;
}
.disposalDataDiv:nth-child(2){
right:0.625rem;
}
.disposalChartTitle {
font-size: 1.25rem; /*16px=1rem*/
/*font-size: 20px;*/
color: #fff
}
.disposalChartTitleVal {
font-size: 2rem; /*16px=1rem*/
/*font-size: 1.875rem; !*16px=1rem*!*/
/*font-size: 30px;*/
color: #fff
}
.topFaultsTable {
height: 100%;
width: 100%;
color: #fff;
text-align: center;
font-size: 1.4em;
}
@keyframes faultTableAni
{
0% {opacity: 0;transform:rotateX(-180deg);}
100% {opacity: 1;transform:rotateX(0deg);}
}
.topFaultsTable .trAni{
animation: faultTableAni 1s;
}
.topFaultsTable tr:nth-child(1), .topFaultsTable td:nth-child(1) {
color: #2EDBFF;
}
/*表头*/
.topFaultsTable td:nth-child(1) {
width: 6%
}
/*序号*/
.topFaultsTable td:nth-child(2) {
width: 12%
}
/*车型*/
.topFaultsTable td:nth-child(3) {
width: 12%
}
/*次数*/
.topFaultsTable td:nth-child(4) {
width: 70%
}
/*故障码及名称*/
.topFaultsTable tr:nth-child(even) {
background-color: RGBA(19, 151, 255, 0.15)
}
.progress {
height: 1.875rem;
/*height: 30px;*/
line-height: 2.1875rem;
/*line-height: 35px;*/
background: RGBA(19, 151, 255, 0.15);
box-shadow: none;
padding: 0.375rem;
/*padding: 6px;*/
margin-top: 1.25rem;
/*margin-top: 20px;*/
overflow: visible;
border-radius: 0.9375rem;
/*border-radius: 15px;*/
}
.progress:after {
content: "";
display: block;
border-top: 0.125rem dashed rgba(255, 255, 255, 0.2);
/*border-top: 2px dashed rgba(255, 255, 255, 0.2);*/
margin-top: 0.5625rem;
/*margin-top: 9px;*/
}
.progress .progress-bar {
background: linear-gradient(to right, #2B80CF, #00FFCC); /* 标准的语法 */
position: relative;
border-radius: 0.5rem;
/*border-radius: 8px;*/
animation: animate-positive 2s;
}
/* ---------------------波动效果--------------------- */
.wave {
position: relative;
width: 2rem;
height: 2rem;
}
.wave .circle {
position: absolute;
border-radius: 50%;
opacity: 0;
}
.wave.solid .circle{
width: 100%;
height: 100%;
background: #fff;
}
.wave.solid .circle:first-child {
animation: circle-opacity 4s infinite;
}
.wave.solid.warning {
color: #00FFCC;
}
.wave.solid.warning .circle{
background: #00FFCC;
}
@keyframes circle-opacity{
from {
opacity: 1;
transform: scale(0);
}
to {
opacity: 0;
transform: scale(1);
}
}
/* ---------------------波动效果--------------------- */
/* ---------------------对角斜线--------------------- */
.diagonalLineDiv{
position:relative;
width:4rem;
height:4rem;
}
.diagonalLineDiv::before{
content:"";
position:absolute;
width:100%;
height:50%;
border-bottom:0.0625rem solid RGBA(0, 123, 255, 1);
transform-origin:bottom center;
transform:rotateZ(-45deg) scale(1.414);
}
.diagonalLineDiv:nth-child(1){
left: calc(29.9% - 4rem);
top: calc(27.4% - 4rem);
transform:rotateZ(90deg);
}
.diagonalLineDiv:nth-child(2){
left: calc(60.3%);
top: calc(40.4% - 4rem);
}
.diagonalLineDiv:nth-child(3){
left: calc(52.8% - 4rem);
top: calc(77.4% - 4rem);
transform:rotateZ(90deg);
}
/* ---------------------对角斜线--------------------- */
.aClickCon{
display: flex;flex-direction: column;justify-content: space-between;
}