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 += '
' } 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 } }