var MyMarhq_1 = '';// 滚动定时器1
clearInterval(MyMarhq_1);
var MyMarhq_2 = '';// 滚动定时器2
clearInterval(MyMarhq_2);
var MyMarhq_3 = '';// 滚动定时器3
clearInterval(MyMarhq_3);
var MyMarhq_4 = '';// 滚动定时器4
clearInterval(MyMarhq_4);
var MyMarhq_5 = '';// 滚动定时器5
clearInterval(MyMarhq_5);
/*******************************************************************************
* 对应模块增加表格标签及样式 tableNum:模块编码 partId:插入表格的模块id
******************************************************************************/
function setTableClass(tableNum, partId, tableData, ifShowTitle) {
var part = document.getElementById(partId);
if (!tableData.data || tableData.data.length == 0) {// 如果表格内容为空,显示暂无数据
tableNum = "0"// 默认值
}
switch (tableNum) {
case 1:
var partContent = '
';
part.innerHTML = partContent;
setTbaleBox1(tableData, ifShowTitle)
break;
case 2:
var partContent = '';
part.innerHTML = partContent;
setTbaleBox2(tableData, ifShowTitle)
break;
case 3:
var partContent = '';
part.innerHTML = partContent;
setTbaleBox3(tableData, ifShowTitle)
break;
case 4:
var partContent = '';
part.innerHTML = partContent;
setTbaleBox4(tableData, ifShowTitle)
break;
case 5:
var partContent = '';
part.innerHTML = partContent;
setTbaleBox5(tableData, ifShowTitle)
break;
default:
part.innerHTML = '暂无数据
'
break;
}
}
// 绘制表头,一级&二级
function drawTitle(temp, headArr) {
var headStr = '';
var originalArr = [];// 原始数据,未处理过的表头名称
var layer = 1;// 标识,区分是否为多级表头
for (var i = 0; i < headArr.length; i++) {
// var v=isNull(temp[headArr[i]])
var v = isNull(headArr[i])
originalArr.push(v)
if (layer == 1 && v.indexOf("_") != 1) {
layer = 2
}
}
// 设置表头字段-若layer=1则只含一级表头,若layer=2则含有二级表头
if (layer == 1) {
for (var i = 0; i < headArr.length - 1; i++) {// -0812最后一项字段为颜色,不显示
if (i == 0) {
headStr = ''
}
// headStr += '' + isNull(temp[headArr[i]]) + ' | '
headStr += '' + isNull(headArr[i]) + ' | '
if (i == headArr.length - 1) {// -0812最后一项字段为颜色,不显示
headStr += '
'
}
}
} else {
var firstArr = [];// 存一级表头的数据
var secondArr = [];// 存二级表头的数据
var titleName = ""// 当前的一级表头
var colsValue = 0// 所占列数记录数
for (var i = 0; i < originalArr.length - 1; i++) {// -0812最后一项字段为颜色,不显示
if (originalArr[i].indexOf("_") == -1) {// 不分级的表头
if (titleName != "") {// 当二级转向一级的切换
// 处理上个二级标题
var first = originalArr[i].substring(0, originalArr[i]
.indexOf("_"))
var arr = {}
arr['name'] = titleName;// 列名
arr['cols'] = colsValue;// 所占列数
arr['rows'] = 1;// 所占行数
firstArr.push(arr);// 将上一记录保存
titleName = "";
// 处理本次一级表头
var arr = {}
arr['name'] = originalArr[i];// 列名
arr['cols'] = 1;// 所占列数
arr['rows'] = 2;// 所占行数
firstArr.push(arr)
} else {
var arr = {}
arr['name'] = originalArr[i];// 列名
arr['cols'] = 1;// 所占列数
arr['rows'] = 2;// 所占行数
firstArr.push(arr)
}
/*
* var arr = {} arr['name'] = originalArr[i];// 列名 arr['cols'] =
* 1;// 所占列数 arr['rows'] = 2;// 所占行数 firstArr.push(arr)
*/
} else {
var first = originalArr[i].substring(0, originalArr[i]
.indexOf("_"))
if (titleName != first) {// 上个一级表头数据已经遍历完成
if (titleName == "") {// 第一个一级表头
titleName = first
colsValue++;// 开始记录列数
secondArr.push(originalArr[i].substring(originalArr[i]
.indexOf("_") + 1, originalArr[i].length))
} else {
var arr = {}
arr['name'] = titleName;// 列名
arr['cols'] = colsValue;// 所占列数
arr['rows'] = 1;// 所占行数
firstArr.push(arr);// 将上一记录保存
titleName = first;
colsValue = 1;// 重新记录列数,含本次记录
secondArr.push(originalArr[i].substring(originalArr[i]
.indexOf("_") + 1, originalArr[i].length))
}
} else {
colsValue++
secondArr.push(originalArr[i].substring(originalArr[i]
.indexOf("_") + 1, originalArr[i].length))
}
if (i == originalArr.length - 2) {// 处理最后第二项字段 -0812最后一项字段为颜色
var arr = {}
arr['name'] = titleName;// 列名
arr['cols'] = colsValue;// 所占列数
arr['rows'] = 1;// 所占行数
firstArr.push(arr);// 将上一记录保存
}
}
}
// 数据插入表头-一级、二级分开处理
// 一级表头
for (var j = 0; j < firstArr.length; j++) {
if (j == 0) {
headStr += ''
}
headStr += '' + firstArr[j].name + ' | '
if (j == headArr.length) {
headStr += '
'
}
}
// 二级表头
for (var i = 0; i < secondArr.length; i++) {
if (i == 0) {
headStr += ''
}
headStr += '' + secondArr[i] + ' | '
if (i == headArr.length) {
headStr += '
'
}
}
}
return headStr
}
// 绘制表格
function setTableContent(Items, headArr) {
var str = ""
for (var j = 0; j < Items.length; j++) {
var item = Items[j]
var rowColor = item[headArr[headArr.length - 1]]// 设置表格颜色
for (var q = 0; q < headArr.length - 1; q++) {
if (q == 0) {
str += ''
}
str += ''
+ isNull(item[headArr[q]]) + ' | '
if (q == headArr.length - 2) {
str += '
'
}
}
}
return str
}
// 设置表格1数据
function setTbaleBox1(tableData, ifShowTitle) {
if (tableData.result == 1) {
return false
}
var dataList = tableData.data
var Items = dataList
$('.tbl-body-1 tbody').empty();
$('.tbl-header-1 tbody').empty();
$('.tbl-body-1 thead').empty();
$('.tbl-header-1 thead').empty();
var headStr = '';
var str = '';
var temp = Items[0]
var headArr = getObjectKeys(temp);// 存放表头数据
if (ifShowTitle == "0") {// 是否显示表头
headStr = drawTitle(temp, headArr)
$('.tbl-body-1 thead').append(headStr);
$('.tbl-header-1 thead').append(headStr);
}
str = setTableContent(Items, headArr)// 绘制表格内容
/*
* for (var j = 0; j < Items.length; j++) { var item = Items[j] for (var q =
* 0; q < headArr.length; q++) { if (q == 0) { str += '' } str += '' +
* isNull(item[headArr[q]]) + ' | ' if (q == headArr.length) { str += '
' } } }
*/
$('.tbl-body-1 tbody').append(str);
$('.tbl-header-1 tbody').append(str);
if (MyMarhq_1 != null) {// 判断计时器是否为空-关闭
clearInterval(MyMarhq_1);
MyMarhq_1 = null;
}
if (Items.length > 6) {
$('.tbl-body-1 tbody').html(
$('.tbl-body-1 tbody').html() + $('.tbl-body-1 tbody').html());
$('.tbl-body-1').css('top', '0');
var tblTop = 0;
var speedhq = 100; // 数值越大越慢
var outerHeight = $('.tbl-body-1 tbody').find("tr").outerHeight();
function Marqueehq() {
if (tblTop <= -outerHeight * Items.length) {
tblTop = 0;
} else {
tblTop -= 1;
}
$('.tbl-body-1').css('top', tblTop + 'px');
}
MyMarhq_1 = setInterval(Marqueehq, speedhq);
}
}
// 设置表格2数据
function setTbaleBox2(tableData, ifShowTitle) {
if (tableData.result == 1) {
return false
}
var dataList = tableData.data
var Items = dataList
$('.tbl-body-2 tbody').empty();
$('.tbl-header-2 tbody').empty();
$('.tbl-body-2 thead').empty();
$('.tbl-header-2 thead').empty();
var headStr = '';
var str = '';
var temp = Items[0]
var headArr = getObjectKeys(temp);// 存放表头数据
if (ifShowTitle == "0") {// 是否显示表头
headStr = drawTitle(temp, headArr)
$('.tbl-body-2 thead').append(headStr);
$('.tbl-header-2 thead').append(headStr);
}
str = setTableContent(Items, headArr)// 绘制表格内容
/*
* for (var j = 0; j < Items.length; j++) { var item = Items[j] for (var q =
* 0; q < headArr.length; q++) { if (q == 0) { str += '' } str += '' +
* isNull(item[headArr[q]]) + ' | ' if (q == headArr.length) { str += '
' } } }
*/
$('.tbl-body-2 tbody').append(str);
$('.tbl-header-2 tbody').append(str);
if (MyMarhq_2 != null) {// 判断计时器是否为空-关闭
clearInterval(MyMarhq_2);
MyMarhq_2 = null;
}
if (Items.length > 6) {
$('.tbl-body-2 tbody').html(
$('.tbl-body-2 tbody').html() + $('.tbl-body-2 tbody').html());
$('.tbl-body-2').css('top', '0');
var tblTop = 0;
var speedhq = 100; // 数值越大越慢
var outerHeight = $('.tbl-body-2 tbody').find("tr").outerHeight();
function Marqueehq() {
if (tblTop <= -outerHeight * Items.length) {
tblTop = 0;
} else {
tblTop -= 1;
}
$('.tbl-body-2').css('top', tblTop + 'px');
}
MyMarhq_2 = setInterval(Marqueehq, speedhq);
}
}
// 设置表格3数据
function setTbaleBox3(tableData, ifShowTitle) {
if (tableData.result == 1) {
return false
}
var dataList = tableData.data
var Items = dataList
$('.tbl-body-3 tbody').empty();
$('.tbl-header-3 tbody').empty();
$('.tbl-body-3 thead').empty();
$('.tbl-header-3 thead').empty();
var headStr = '';
var str = '';
var temp = Items[0]
var headArr = getObjectKeys(temp);// 存放表头数据
if (ifShowTitle == "0") {// 是否显示表头
headStr = drawTitle(temp, headArr)
$('.tbl-body-3 thead').append(headStr);
$('.tbl-header-3 thead').append(headStr);
}
str = setTableContent(Items, headArr)// 绘制表格内容
/*
* for (var j = 0; j < Items.length; j++) { var item = Items[j] for (var q =
* 0; q < headArr.length; q++) { if (q == 0) { str += '' } str += '' +
* isNull(item[headArr[q]]) + ' | ' if (q == headArr.length) { str += '
' } } }
*/
$('.tbl-body-3 tbody').append(str);
$('.tbl-header-3 tbody').append(str);
if (MyMarhq_3 != null) {// 判断计时器是否为空-关闭
clearInterval(MyMarhq_3);
MyMarhq_3 = null;
}
if (Items.length > 6) {
$('.tbl-body-3 tbody').html(
$('.tbl-body-3 tbody').html() + $('.tbl-body-3 tbody').html());
$('.tbl-body-3').css('top', '0');
var tblTop = 0;
var speedhq = 100; // 数值越大越慢
var outerHeight = $('.tbl-body-3 tbody').find("tr").outerHeight();
function Marqueehq() {
if (tblTop <= -outerHeight * Items.length) {
tblTop = 0;
} else {
tblTop -= 1;
}
$('.tbl-body-3').css('top', tblTop + 'px');
}
MyMarhq_3 = setInterval(Marqueehq, speedhq);
}
}
// 设置表格4数据
function setTbaleBox4(tableData, ifShowTitle) {
if (tableData.result == 1) {
return false
}
var dataList = tableData.data
var Items = dataList
$('.tbl-body-4 tbody').empty();
$('.tbl-header-4 tbody').empty();
$('.tbl-body-4 thead').empty();
$('.tbl-header-4 thead').empty();
var headStr = '';
var str = '';
var temp = Items[0]
var headArr = getObjectKeys(temp);// 存放表头数据
if (ifShowTitle == "0") {// 是否显示表头
headStr = drawTitle(temp, headArr)
$('.tbl-body-4 thead').append(headStr);
$('.tbl-header-4 thead').append(headStr);
}
str = setTableContent(Items, headArr)// 绘制表格内容
/*
* for (var j = 0; j < Items.length; j++) { var item = Items[j] for (var q =
* 0; q < headArr.length; q++) { if (q == 0) { str += '' } str += '' +
* isNull(item[headArr[q]]) + ' | ' if (q == headArr.length) { str += '
' } } }
*/
$('.tbl-body-4 tbody').append(str);
$('.tbl-header-4 tbody').append(str);
if (MyMarhq_4 != null) {// 判断计时器是否为空-关闭
clearInterval(MyMarhq_4);
MyMarhq_4 = null;
}
if (Items.length > 4) {
$('.tbl-body-4 tbody').html(
$('.tbl-body-4 tbody').html() + $('.tbl-body-4 tbody').html());
$('.tbl-body-4').css('top', '0');
var tblTop = 0;
var speedhq = 100; // 数值越大越慢
var outerHeight = $('.tbl-body-4 tbody').find("tr").outerHeight();
function Marqueehq() {
if (tblTop <= -outerHeight * Items.length) {
tblTop = 0;
} else {
tblTop -= 1;
}
$('.tbl-body-4').css('top', tblTop + 'px');
}
MyMarhq_4 = setInterval(Marqueehq, speedhq);
}
}
// 设置表格5数据
function setTbaleBox5(tableData, ifShowTitle) {
if (tableData.result == 1) {
return false
}
var dataList = tableData.data
var Items = dataList
$('.tbl-body-5 tbody').empty();
$('.tbl-header-5 tbody').empty();
$('.tbl-body-5 thead').empty();
$('.tbl-header-5 thead').empty();
var headStr = '';
var str = '';
var temp = Items[0]
var headArr = getObjectKeys(temp);// 存放表头数据
if (ifShowTitle == "0") {// 是否显示表头
headStr = drawTitle(temp, headArr)
$('.tbl-body-5 thead').append(headStr);
$('.tbl-header-5 thead').append(headStr);
}
str = setTableContent(Items, headArr)// 绘制表格内容
/*
* for (var j = 0; j < Items.length; j++) { var item = Items[j] for (var q =
* 0; q < headArr.length; q++) { if (q == 0) { str += '' } str += '' +
* isNull(item[headArr[q]]) + ' | ' if (q == headArr.length) { str += '
' } } }
*/
$('.tbl-body-5 tbody').append(str);
$('.tbl-header-5 tbody').append(str);
if (MyMarhq_5 != null) {// 判断计时器是否为空-关闭
clearInterval(MyMarhq_5);
MyMarhq_5 = null;
}
if (Items.length > 4) {
$('.tbl-body-5 tbody').html(
$('.tbl-body-5 tbody').html() + $('.tbl-body-5 tbody').html());
$('.tbl-body-5').css('top', '0');
var tblTop = 0;
var speedhq = 100; // 数值越大越慢
var outerHeight = $('.tbl-body-5 tbody').find("tr").outerHeight();
function Marqueehq() {
if (tblTop <= -outerHeight * Items.length) {
tblTop = 0;
} else {
tblTop -= 1;
}
$('.tbl-body-5').css('top', tblTop + 'px');
}
MyMarhq_5 = setInterval(Marqueehq, speedhq);
}
}
/*******************************************************************************
* 设置规定值显示-多个
******************************************************************************/
function setWordsDiv(wordsData, divId) {
if (wordsData.result == 1 || !wordsData.data) {
document.getElementById(divId).innerHTML = '暂无数据
'
return false
}
var Items = wordsData.data
var headArr = getObjectKeys(Items[0]);
var divStr = '';
for (var i = 0; i < Items.length; i++) {
var list = Items[i]
var styleColor = ''
var color = ''
if (list[headArr[2]] == 0) {
styleColor = 'style="color:#FFFFFF;"'
} else if (list[headArr[2]] == 1) {
styleColor = 'style="color:#66FF99;"'
} else if (list[headArr[2]] == 2) {
styleColor = 'style="color:#FFFF66;"'
} else if (list[headArr[2]] == 3) {
styleColor = 'style="color:#FF0033;"'
}
divStr += '- '
+ isNull(list[headArr[0]])
+ ':
- '
+ isNull(list[headArr[1]]) + '
'
}
var part = document.getElementById(divId);
part.innerHTML = divStr;
// $(divId).html(divStr)
}
/*******************************************************************************
* 加载echart图 echartData:数据源 divObject:模块id
******************************************************************************/
function buildPieEchart(echartData, divObject) {
var dataList = echartData// 原始数据
var nameList = [];
var valueList = [];
if (dataList.length == 0) {// 无数据时显示整圆
nameList.push('None:0');
valueList.push({
value : 0,
name : 'None:0',
itemStyle : {
normal : {
color : 'rgb(0,100,0)'
}
}
})
} else {
$.each(dataList, function(i, item) {
nameList.push(item.FTYPE)
var arr = {}
arr['value'] = item.FVALUE
arr['name'] = item.FTYPE;
valueList.push(arr)
})
}
option = {
tooltip : {
trigger : 'item',
formatter : '{b} : {c} ({d}%)'
},
legend : {
type : 'scroll',
orient : 'vertical',
right : 10,
top : 5,
bottom : 20,
data : nameList,
textStyle : {// 图例文字的样式
color : '#dbdbdb',
fontSize : fontSize(0.24)
},
},
series : [ {
type : 'pie',
radius : '65%',
center : [ '40%', '55%' ],
selectedMode : 'single',
data : valueList,
emphasis : {
itemStyle : {
shadowBlur : 10,
shadowOffsetX : 0,
shadowColor : 'rgba(0, 0, 0, 0.5)'
}
},
label : {
formatter : '{b} : {c} ({d}%)'
}
} ]
};
// 创建echarts对象在哪个节点上
var myCharts1 = echarts.init(document.getElementById(divObject), 'shine');// (shine)主题
// 将选项对象赋值给echarts对象。
myCharts1.setOption(option, true);
}
/*******************************************************************************
* 加载echart图 echartData:数据源 divObject:模块id
******************************************************************************/
function buildEchart(echartData, divObject) {
var Item = echartData;
var xData = [];// 类型
var yData = [];// Y轴数据
var legandData = [];// 数据项
var seriesData = [];// seriess生成图形集合
var yAxis = [];// y轴
var yAxisDataT = [];// 数据对应的y轴
var barType = [];// 对应图表数据类型
var unitData = [];// 各y轴的单位
var positionData = [];// 数据显示位置
// var maxData = [];// 各Y轴的最大值//-test
// var minData = [];// 各Y轴的最小值//-test
// 生成y轴使用
var yaxixIndexData = [];// y轴新增-临时
var echartsTypeData = [];// 图表数据类型集合-临时
var unitList = [];// 单位类型集合-临时
// var maxList = [];// 各Y轴的最大值-临时//-test
// var minList = [];// 各Y轴的最小值-临时//-test
if (Item.length > 0) {
for (var i = 0; i < Item.length; i++) {
xData.push(Item[i].X_AXIS_DATA) // x轴
legandData.push(Item[i].DATA_NAME) // 项目
}
xData = unique(xData)// 去重
legandData = unique(legandData)// 去重
for (var i = 0; i < legandData.length; i++) {// 项目
yData[legandData[i]] = []
echartsTypeData[legandData[i]] = []
yaxixIndexData[legandData[i]] = []
unitList[legandData[i]] = []
// maxData[legandData[i]] = []// -test
// minData[legandData[i]] = []// -test
}
for (var i = 0; i < legandData.length; i++) {// 项目
for (var j = 0; j < Item.length; j++) {// 数据
if (legandData[i] == Item[j].DATA_NAME) {
for (var q = 0; q < xData.length; q++) {// x轴
if (xData[q] == Item[j].X_AXIS_DATA) {
var v = Item[j].Y_AXIS_DATA // 数值
var t = Item[j].CHART_TYPE // 图表类型
var y = Item[j].Y_AXIS_INDEX // y轴-下标
var u = Item[j].UNIT // y轴-单位
// var max = Item[j].MAX_VALUE// y轴-最大值//-test
// var min = Item[j].MIN_VALUE// y轴-最小值//-test
yData[legandData[i]].push(v)
echartsTypeData[legandData[i]].push(t)
yaxixIndexData[legandData[i]].push(y)
unitList[legandData[i]].push(u)
// maxList[legandData[i]].push(max)// -test
// minList[legandData[i]].push(min)// -test
}
}
}
}
}
for (var i = 0; i < legandData.length; i++) {
var t = echartsTypeData[legandData[i]]
barType.push(t[0])
if (t[0] == 'line') {//柱状图与折线图显示方式不同,防止互相覆盖
positionData.push("top")
} else {
positionData.push("inside")
}
var y = yaxixIndexData[legandData[i]]
yAxisDataT.push(y[0])
var u = unitList[legandData[i]]
unitData.push(u[0])
// var max = maxList[legandData[i]]// -test
// maxData.push(max[0])// -test
// var min = minList[legandData[i]]// -test
// minData.push(min[0])// -test
}
for (var i = 0; i < yAxisDataT.length; i++) {
if (i != 0 && yAxisDataT[i] == yAxisDataT[i - 1]) {
continue;
} else {
var arr = {
type : 'value',
name : unitData[i],
// max : maxData[i],// -test
// min : minData[i],// -test
splitLine : {
show : false
},
axisLabel : {
// formatter : '{value} ',
textStyle : {
color : '#ffffff',
fontSize : fontSize(0.22),// 字体大小
}
},
axisLine : {
lineStyle : {
color : '#FFFFFF'
}
},
}
yAxis.push(arr)
}
}
for (var i = 0; i < legandData.length; i++) {// 输出图表数据
var arr = {
name : legandData[i],
data : yData[legandData[i]],
type : barType[i],
barMaxWidth : 35,// 柱图最大宽度
yAxisIndex : yAxisDataT[i],
label : {
show : true,
position : positionData[i],
textStyle : {
fontSize : fontSize(0.2),// 字体大小
}
},
}
seriesData.push(arr)
}
option = {
grid : {
left : '1%',
right : '1%',
bottom : '1%',
containLabel : true
},
legend : {
data : legandData,
// orient: 'vertical',//垂直,默认水平
x : 'center', // 可设定图例在左、右、居中
top : 0,
textStyle : {
fontSize : fontSize(0.22),// 字体大小
color : '#ffffff'// 字体颜色
},
},
// color : [ '#3062FF', '#02F3F0', '#FAEF9B', '#5A9AFF', '#BA99FF',
// '#7A62F2' ],
xAxis : {
type : 'category',
data : xData,
axisLabel : {
show : true,
interval : 0,
rotate:20,
textStyle : {
color : '#ffffff',
fontSize : fontSize(0.20),// 字体大小
}
},
axisLine : {
lineStyle : {
color : '#FFFFFF'
}
},
},
yAxis : yAxis,// y轴设置
series : seriesData
// 数据设置
};
// 创建echarts对象在哪个节点上
var myCharts1 = echarts.init(document.getElementById(divObject),
'macarons');// 使用马卡龙(macarons)主题
// 将选项对象赋值给echarts对象。
myCharts1.setOption(option, true);
} else {
document.getElementById(divObject).innerHTML = '暂无数据
'
}
}
// 获取游标列名
function getObjectKeys(object) {
var keys = [];
for ( var property in object)
keys.push(property);
return keys;
}
// 去重
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return false
}
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array.indexOf(arr[i]) === -1) {
array.push(arr[i])
}
}
return array;
}
// 获取屏幕宽度并计算比例-设置echarts文字
function fontSize(res) {
var docEl = document.documentElement, clientWidth = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
if (!clientWidth)
return;
var fontSize = 100 * (clientWidth / 2880);// 原:1920/2400/2880
return res * fontSize;
}
// 处理null字段显示
function isNull(str) {
if (str == null) {
return ""
} else {
return str
}
}