358 lines
10 KiB
JavaScript
358 lines
10 KiB
JavaScript
|
var dataTable;
|
||
|
|
var height = $(window).height()
|
||
|
|
var pqge = 1;
|
||
|
|
var charts =null;
|
||
|
|
|
||
|
|
$("#interval").val("月份");
|
||
|
|
//下拉框禁用
|
||
|
|
$("#interval").prop("disabled", true);
|
||
|
|
$(function () {
|
||
|
|
$('#div_height').css('height',height-50)
|
||
|
|
refresh()
|
||
|
|
|
||
|
|
|
||
|
|
//点击查询按钮
|
||
|
|
$("#query").on("click", function () {
|
||
|
|
refresh();
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#shai').click(function () {
|
||
|
|
let con = $('#content').val()
|
||
|
|
searchResult(con)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
var mealAll = ''
|
||
|
|
var mealUse = ''
|
||
|
|
var mealBi = ''
|
||
|
|
//初始化图表数据
|
||
|
|
function initDate(arr) {
|
||
|
|
if(arr!=null && arr.length>0){
|
||
|
|
var i;
|
||
|
|
let map = {
|
||
|
|
startTime:$('#startTime').val(),
|
||
|
|
list:arr,
|
||
|
|
mealBi:mealBi,
|
||
|
|
mealUse:mealUse,
|
||
|
|
mealAll:mealAll,
|
||
|
|
}
|
||
|
|
$.ajax({
|
||
|
|
type: 'post',
|
||
|
|
url: '/pqs9900/terminalmanger/getFlowStatiscsList',
|
||
|
|
dataType: "json",
|
||
|
|
contentType: 'application/json;charset=UTF-8',
|
||
|
|
data:JSON.stringify(map),
|
||
|
|
beforeSend: function () {
|
||
|
|
i = ityzl_SHOW_LOAD_LAYER()
|
||
|
|
},
|
||
|
|
success: function (data) {
|
||
|
|
let arr = data.body
|
||
|
|
if (data.code == 200) {
|
||
|
|
init(arr)
|
||
|
|
//***********关闭loading
|
||
|
|
ityzl_CLOSE_LOAD_LAYER(i);
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
error: function () {
|
||
|
|
layer.msg('未知错误', {icon: 2})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}else {
|
||
|
|
init(arr)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 初始化获取后台数据
|
||
|
|
*/
|
||
|
|
function refresh() {
|
||
|
|
/*获取各项条件 */
|
||
|
|
let start = $('#startTime').val()
|
||
|
|
let times = start.split("-")
|
||
|
|
start = times[0]+"-"+times[1]
|
||
|
|
var indexi;
|
||
|
|
$.ajax({
|
||
|
|
type: "get",
|
||
|
|
url: "/pqs9900/terminalmanger/getTerminalList",
|
||
|
|
dataType: "json",
|
||
|
|
data: {
|
||
|
|
status: null,
|
||
|
|
devType: null,
|
||
|
|
startTime:start
|
||
|
|
},
|
||
|
|
beforeSend: function () {
|
||
|
|
indexi = ityzl_SHOW_LOAD_LAYER();
|
||
|
|
},
|
||
|
|
success: function (data) {
|
||
|
|
if (data.code === 200) {
|
||
|
|
let arr = data.body
|
||
|
|
//初始化表格
|
||
|
|
initTransactionTable(arr);
|
||
|
|
} else {
|
||
|
|
layer.msg(data.message, {icon: 2, time: 2000})
|
||
|
|
initTransactionTable(null);
|
||
|
|
}
|
||
|
|
ityzl_CLOSE_LOAD_LAYER(indexi);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function init(data) {
|
||
|
|
var arrName = data.map(function (item) {
|
||
|
|
return item.devName
|
||
|
|
})
|
||
|
|
var arrActual =[]
|
||
|
|
var arrAll =[]
|
||
|
|
let obj=null;
|
||
|
|
if(data.length >0){
|
||
|
|
data.forEach(function (item) {
|
||
|
|
if(item.actualflow>=item.allFlow){
|
||
|
|
obj={y:item.actualflow,color:'red',devIndex:item.devIndex}
|
||
|
|
}else {
|
||
|
|
obj={y:item.actualflow,devIndex:item.devIndex}
|
||
|
|
}
|
||
|
|
arrActual.push(obj)
|
||
|
|
arrAll.push({y:item.allFlow,devIndex:item.devIndex})
|
||
|
|
|
||
|
|
})
|
||
|
|
}
|
||
|
|
charts = Highcharts.chart('flow_sta', {
|
||
|
|
chart: {
|
||
|
|
marginBottom:70,
|
||
|
|
height:height-70,
|
||
|
|
type: 'column',
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor:'#d9d9d9',
|
||
|
|
plotBorderWidth: 1,
|
||
|
|
spacingRight:50,
|
||
|
|
inverted: true,
|
||
|
|
backgroundColor: canvasBG,//背景色
|
||
|
|
/*events:{
|
||
|
|
click:function (e) {
|
||
|
|
console.log(e.xAxis[0].value)
|
||
|
|
}
|
||
|
|
}*/
|
||
|
|
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: ''
|
||
|
|
},
|
||
|
|
xAxis: [{
|
||
|
|
tickPixelInterval:10,
|
||
|
|
tickmarkPlacement:-0.1,
|
||
|
|
categories: arrName,
|
||
|
|
labels:{
|
||
|
|
autoRotation:[15],
|
||
|
|
formatter:function () {
|
||
|
|
return this.value
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
}],
|
||
|
|
yAxis: [{
|
||
|
|
min:0,
|
||
|
|
offset:3,
|
||
|
|
labels: {
|
||
|
|
format: '{value}M',
|
||
|
|
},
|
||
|
|
opposite:true,
|
||
|
|
// minorGridLineColor: '#C5EEFA',
|
||
|
|
tickPixelInterval: 55,
|
||
|
|
title: {
|
||
|
|
text: false,
|
||
|
|
|
||
|
|
/*style: {
|
||
|
|
color: Highcharts.getOptions().colors[2]
|
||
|
|
}*/
|
||
|
|
},
|
||
|
|
}],
|
||
|
|
plotOptions: {
|
||
|
|
column: {
|
||
|
|
dataLabels: {
|
||
|
|
// 开启数据标签
|
||
|
|
enabled: true,
|
||
|
|
formatter: function() {
|
||
|
|
if(this.point.y !=0){
|
||
|
|
return this.point.y;
|
||
|
|
}else {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
},
|
||
|
|
grouping: false,
|
||
|
|
shadow: false,
|
||
|
|
borderWidth: 0,
|
||
|
|
|
||
|
|
},
|
||
|
|
series: {
|
||
|
|
cursor: 'pointer',
|
||
|
|
events: {
|
||
|
|
click: function (event) {
|
||
|
|
let devIndex = event.point.devIndex
|
||
|
|
let devName = event.point.category
|
||
|
|
layer.open({
|
||
|
|
type: 2,
|
||
|
|
title: '流量使用情况',
|
||
|
|
maxmin: false,
|
||
|
|
area: ['100%', '100%'],
|
||
|
|
content: 'flowdetail?devIndex=' + devIndex+'&devName='+devName+'&flag=2',
|
||
|
|
scrollbar: false,
|
||
|
|
end: function () {
|
||
|
|
// refresh();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
exporting:{
|
||
|
|
buttons: {
|
||
|
|
contextButton:{
|
||
|
|
align:'left',
|
||
|
|
enabled:true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
credits:{
|
||
|
|
enabled: false // 禁用版权信息
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
shared: true,
|
||
|
|
valueDecimals: 2
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: '套餐总量',
|
||
|
|
type: 'column',
|
||
|
|
color: orange,
|
||
|
|
data: arrAll,
|
||
|
|
pointWidth:18,
|
||
|
|
pointPlacement:0.1
|
||
|
|
},{
|
||
|
|
name: '流量使用量',
|
||
|
|
type: 'column',
|
||
|
|
color: green,
|
||
|
|
data: arrActual,
|
||
|
|
// barMaxWidth: barMax,
|
||
|
|
dataLabels:{
|
||
|
|
formatter:function () {
|
||
|
|
if(this.y!=0){
|
||
|
|
return this.y.toFixed(2)
|
||
|
|
}else {
|
||
|
|
return ''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
pointWidth:10,
|
||
|
|
pointPlacement:0.1
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
//初始化表格数据
|
||
|
|
function initTransactionTable(tableData) {
|
||
|
|
$("#deviceTable").css('height',height-150)
|
||
|
|
let tdHeight = (height-250)/10;
|
||
|
|
|
||
|
|
dataTable = $("#deviceTable").DataTable();
|
||
|
|
dataTable.clear().draw();
|
||
|
|
dataTable = $('#deviceTable').DataTable({
|
||
|
|
order: [8,'asc'],
|
||
|
|
columns: [
|
||
|
|
{data: "devIndex",visible:false},
|
||
|
|
{width: "20px", data:null,orderable:false},
|
||
|
|
{width: "100px", data: "name",orderable:false},
|
||
|
|
{width: "110px", data: "gdName",orderable:false},
|
||
|
|
{width: "110px", data: "bdName",orderable:false},
|
||
|
|
{width: "150px", data: "ip",orderable:false},
|
||
|
|
{width: "80px",render:function (data, type, full, meta) {
|
||
|
|
return full.baseFlow+full.extendFlow
|
||
|
|
}},
|
||
|
|
{width: "150px", data: "actualflow",render:function (data, type, full, meta) {
|
||
|
|
return Number(full.actualflow).toFixed(2)
|
||
|
|
}},
|
||
|
|
{width: "150px", render:function (data, type, full, meta) {
|
||
|
|
let all = Number(full.baseFlow)+Number(full.extendFlow)
|
||
|
|
let use =all - Number(full.actualflow)
|
||
|
|
return (Number(use/all)*100).toFixed(2)+'%'
|
||
|
|
}},
|
||
|
|
|
||
|
|
],
|
||
|
|
destroy: true,
|
||
|
|
data: tableData,
|
||
|
|
lengthChange: true,
|
||
|
|
searching: true,
|
||
|
|
dom: 'rtip',
|
||
|
|
scrollY: height-150,
|
||
|
|
scrollX: true,
|
||
|
|
lengthMenu: [10],
|
||
|
|
language: {
|
||
|
|
url: '/pqs9900/json/chine.json'
|
||
|
|
},
|
||
|
|
fnDrawCallback: function (oTable) {
|
||
|
|
var api = this.api();
|
||
|
|
api.column(1).nodes().each(function(cell, i) {
|
||
|
|
cell.innerHTML = i + 1;
|
||
|
|
});
|
||
|
|
$("#deviceTable_info").addClass("fl");
|
||
|
|
$("#deviceTable_paginate").addClass("fr");
|
||
|
|
$("#deviceTable_paginate").append("<div style='float:right;padding-top:4px;padding-left:10px'>到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:28px;'> 页 <button class='btn btn-primary' id='dataTable-btn'>确定</button></div>");
|
||
|
|
var table = $("#deviceTable").dataTable();
|
||
|
|
var redirectpage;
|
||
|
|
$('#dataTable-btn').click(function (e) {
|
||
|
|
if ($("#changePage").val() && $("#changePage").val() > 0) {
|
||
|
|
redirectpage = $("#changePage").val() - 1;
|
||
|
|
} else {
|
||
|
|
redirectpage = 0;
|
||
|
|
}
|
||
|
|
table.fnPageChange(redirectpage);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
let obj = oTable.aLastSort[0]
|
||
|
|
console.log(obj)
|
||
|
|
|
||
|
|
let name =obj.dir
|
||
|
|
if(obj.src == 8){
|
||
|
|
mealBi = name
|
||
|
|
mealAll = ''
|
||
|
|
mealUse = ''
|
||
|
|
}else if(obj.src == 7){
|
||
|
|
mealBi = ''
|
||
|
|
mealAll = ''
|
||
|
|
mealUse = name
|
||
|
|
}else if(obj.src == 6){
|
||
|
|
mealBi = ''
|
||
|
|
mealAll = name
|
||
|
|
mealUse = ''
|
||
|
|
}
|
||
|
|
let arr =[]
|
||
|
|
api.column(0,{ page:'current'}).nodes().each(function(cell, i) {
|
||
|
|
arr.push(cell.innerHTML)
|
||
|
|
});
|
||
|
|
|
||
|
|
initDate(arr)
|
||
|
|
$(".odd").find("td").css("height",tdHeight)
|
||
|
|
$(".even").find("td").css("height",tdHeight)
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//搜索表中的数据
|
||
|
|
function searchResult(value) {
|
||
|
|
|
||
|
|
|
||
|
|
dataTable.search(value).draw();
|
||
|
|
}
|