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); 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: 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; i++) { if (i == 0) { headStr = '' } //headStr += '' + isNull(temp[headArr[i]]) + '' headStr += '' + isNull(headArr[i]) + '' if (i == headArr.length) { headStr += '' } } }else{ var firstArr = [];// 存一级表头的数据 var secondArr = [];// 存二级表头的数据 var titleName = ""// 当前的一级表头 var colsValue = 0// 所占列数记录数 for (var i = 0; i < originalArr.length; i++) { 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 - 1) {// 处理最后一项字段 var arr = {} arr['name'] = titleName;// 列名 arr['cols'] = colsValue;// 所占列数 arr['rows'] = 1;// 所占行数 firstArr.push(arr);// 将上一记录保存 } } } // 数据插入表头-一级、二级分开处理 // 一级表头 for(var j=0;j' +firstArr[j].name + '' if (j == headArr.length) { headStr += '' } } //二级表头 for (var i = 0; i ' if (i == headArr.length) { headStr += '' } } } return headStr } //设置表格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"){//是否显示表头 /*for (var i = 0; i < headArr.length; i++) { if (i == 0) { headStr = '' } headStr += '' + isNull(headArr[i]) + '' if (i == headArr.length-1) { headStr += '' } }*/ headStr=drawTitle(temp,headArr) $('.tbl-body-1 thead').append(headStr); $('.tbl-header-1 thead').append(headStr); } 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"){//是否显示表头 /*for (var i = 0; i < headArr.length; i++) { if (i == 0) { headStr = '' } headStr += '' + isNull(headArr[i]) + '' if (i == headArr.length-1) { headStr += '' } }*/ headStr=drawTitle(temp,headArr) $('.tbl-body-2 thead').append(headStr); $('.tbl-header-2 thead').append(headStr); } 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"){//是否显示表头 /*for (var i = 0; i < headArr.length; i++) { if (i == 0) { headStr = '' } headStr += '' + isNull(headArr[i]) + '' if (i == headArr.length-1) { headStr += '' } }*/ headStr=drawTitle(temp,headArr) $('.tbl-body-3 thead').append(headStr); $('.tbl-header-3 thead').append(headStr); } 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"){//是否显示表头 /*for (var i = 0; i < headArr.length; i++) { if (i == 0) { headStr = '' } headStr += '' + isNull(headArr[i]) + '' if (i == headArr.length-1) { headStr += '' } }*/ headStr=drawTitle(temp,headArr) $('.tbl-body-4 thead').append(headStr); $('.tbl-header-4 thead').append(headStr); } 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_5); 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"){//是否显示表头 /*for (var i = 0; i < headArr.length; i++) { if (i == 0) { headStr = '' } headStr += '' + isNull(headArr[i]) + '' if (i == headArr.length-1) { headStr += '' } }*/ headStr=drawTitle(temp,headArr) $('.tbl-body-5 thead').append(headStr); $('.tbl-header-5 thead').append(headStr); } 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) { 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轴的单位 // 生成y轴使用 var yaxixIndexData = [];// y轴新增-临时 var echartsTypeData = [];// 图表数据类型集合-临时 var unitList = [];// 单位类型集合-临时 if (Item) { 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]] = [] } 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轴-单位 yData[legandData[i]].push(v) echartsTypeData[legandData[i]].push(t) yaxixIndexData[legandData[i]].push(y) unitList[legandData[i]].push(u) } } } } } } for (var i = 0; i < legandData.length; i++) { var t = echartsTypeData[legandData[i]] barType.push(t[0]) var y = yaxixIndexData[legandData[i]] yAxisDataT.push(y[0]) var u = unitList[legandData[i]] unitData.push(u[0]) } 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], 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 : 20,// 柱图最大宽度 yAxisIndex : yAxisDataT[i], label : { show : true, position : 'top', textStyle : { fontSize : fontSize(0.22),// 字体大小 } }, } 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, textStyle : { color : '#ffffff', fontSize : fontSize(0.22),// 字体大小 } }, axisLine : { lineStyle : { color : '#FFFFFF' } }, }, yAxis : yAxis,// y轴设置 series : seriesData // 数据设置 }; // 创建echarts对象在哪个节点上 var myCharts1 = echarts.init(document.getElementById(divObject), 'macarons');// 使用马卡龙(macarons)主题 // 将选项对象赋值给echarts对象。 myCharts1.setOption(option, true); } // 获取游标列名 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 } }