var picHeight, endTime, startTime; var tiggleValue = "系统"; var areaResult = null; var companyResult = null; var areLength;//区域的个数 var companyLength;//厂家个数 $(function () { //开关初始化 $(".wanzheng").bootstrapSwitch({ onText: "系统", // 设置ON文本 offText: "网公司", // 设置OFF文本 onColor: "primary",// 设置ON文本颜色 (info/success/warning/danger/primary) offColor: "primary", // 设置OFF文本颜色 (info/success/warning/danger/primary) size: "small", // 设置控件大小,从小到大 (mini/small/normal/large) handleWidth: "40",//设置控件宽度 // 当开关状态改变时触发 onSwitchChange: function (event, state) { if (state == true) { tiggleValue = "系统"; } else { tiggleValue = "网公司"; } //重新画图 reDrawAllPic(); } }); var i; picHeight = $(window).height() * 0.5 - 5; endTime = getEndTime(); startTime = getMonthStartTime(endTime); $.ajax({ url: '/pqs9000/overview/onlineRate', data: { startTime: startTime, endTime: endTime }, type: 'post', dataType: 'json', beforeSend: function () { i = ityzl_SHOW_LOAD_LAYER(); }, success: function (data) { if (data.code === 500 | data.body === null) { drawAreaPic(null); drawCompanyPic(null); initAreaTable(null); initCompanyTable(null); } else { areLength = data.body.area === null ? 0 : data.body.area.length; companyLength = data.body.interval === null ? 0 : data.body.interval.length; if (parseInt(areLength) > parseInt(barspaclength)) { drawAreaPic(data.body.area, 1); } else { drawAreaPic(data.body.area, 0); } if (parseInt(companyLength) > parseInt(barspaclength)) { drawCompanyPic(data.body.interval, 1); } else { drawCompanyPic(data.body.interval, 0); } companyResult = data.body.interval; areaResult = data.body.area; initAreaTable(data.body.area); initCompanyTable(data.body.interval); } //***********关闭loading ityzl_CLOSE_LOAD_LAYER(i); } }) }) //描绘区域图 function drawAreaPic(area, intervals) { var xTip; if (tiggleValue === "系统") { xTip = '地区\n(终端数)\n'; } else { xTip = '地区\n(监测点数)\n'; } $("#area").css("height", picHeight); var areaOption = echarts.init($("#area")[0]); var rate = []; var areas = []; if (null != area) { for (var i = 0; i < area.length; i++) { var onlineRate; if (tiggleValue === "系统") { areas[i] = area[i].name + "\n(" + area[i].amounts + ")"; onlineRate = Number(area[i].online); } else { areas[i] = area[i].name + "\n(" + area[i].gwamounts + ")"; onlineRate = Number(area[i].gwonline); } var singleData = {}; var item = {}; item.color = getColor(onlineRate); if (onlineRate < 3.1414) { singleData.value = 3.1415; item.actual = onlineRate; } else { singleData.value = onlineRate; } singleData.areaIndex = area[i].deptsIndex; singleData.itemStyle = item; rate[i] = singleData; } } var option = { backgroundColor: canvasBG,//背景色 title: { text: '区域', x: 'center' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function (params) { var color = params[0].color; var tips = ""; tips += params[0].name; if (color === noMonitor) { tips += '
' + params[0].seriesName + ' : /'; } else if (color === noData) { tips += '
' + params[0].seriesName + ' : (暂无数据)'; } else { if (params[0].data.itemStyle.actual !== undefined) { tips += '
' + params[0].seriesName + ' : ' + params[0].data.itemStyle.actual; } else { tips += '
' + params[0].seriesName + ' : ' + params[0].value; } } return tips; } }, //控制图标在dataroom中的位置大小 grid: { left: '1%', right: '10%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', data: areas, name: xTip, splitLine: { show: false }, axisLabel: { show: true, interval: intervals } }], yAxis: [{ type: 'value', name: '%', min: '0', max: '100' }], series: [{ name: '在线率', type: 'bar', barMaxWidth: barMax, data: rate }] }; areaOption.setOption(option); areaOption.on('click', function (params) { if (getRole("/pqs9000/area/onlineratetable") == 1) { var city = params.data.areaIndex; window.top.addTab('/pqs9000/area/onlineratetable?startTime=' + startTime + '&endTime=' + endTime + '&area=' + city + '&interval=月份', '在线率列表') } }); } //填充区域表格 function initAreaTable(data) { var height = picHeight - 50; if (data == null) { data = []; } $("#areaTable").DataTable({ data: data, autoWidth: false, columnDefs: [ {"width": "33%", "targets": 0}, {"width": "33%", "targets": 1}, {"width": "33%", "targets": 2} ], order: [2, "desc"], paging: false, lengthChange: false, searching: false, destroy: true, scrollY: height, info: false, language: { url: '/pqs9000/json/chine.json', }, columns: [ {data: 'name'}, { data: 'amounts', render: function (data, type, full, meta) { if (tiggleValue === "系统") { return full.amounts; } else { return full.gwamounts; } } }, { data: 'online', render: function (data, type, full, meta) { if (tiggleValue === "系统") { data = full.online; } else { data = full.gwonline; } if (Number(data) === 3.1415) { return "/"; } else if (Number(data) === 3.14159) { return "(暂无数据)"; } else { return data; } } } ], }) } //描绘终端厂家图 function drawCompanyPic(company, intervals) { var xTip; if (tiggleValue === "系统") { xTip = '终端厂家\n(终端数)\n'; } else { xTip = '终端厂家\n(监测点数)\n'; } $("#company").css("height", picHeight); var comOption = echarts.init($("#company")[0]); var rate = []; var areas = []; if (null != company) { for (var i = 0; i < company.length; i++) { var onlineRate; if (tiggleValue === "系统") { areas[i] = company[i].name + "\n(" + company[i].amounts + ")"; onlineRate = Number(company[i].online); } else { areas[i] = company[i].name + "\n(" + company[i].gwamounts + ")"; onlineRate = Number(company[i].gwonline); } var singleData = {}; var item = {}; item.color = getColor(onlineRate); if (onlineRate < 3.1414) { singleData.value = 3.1415; item.actual = onlineRate; } else { singleData.value = onlineRate; } singleData.itemStyle = item; rate[i] = singleData; } } var option = { backgroundColor: canvasBG,//背景色 title: { text: '终端厂家', x: 'center' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function (params) { var color = params[0].color; var tips = ""; tips += params[0].name; if (color === noMonitor) { tips += '
' + params[0].seriesName + ' : /'; } else if (color === noData) { tips += '
' + params[0].seriesName + ' : (暂无数据)'; } else { if (params[0].data.itemStyle.actual !== undefined) { tips += '
' + params[0].seriesName + ' : ' + params[0].data.itemStyle.actual; } else { tips += '
' + params[0].seriesName + ' : ' + params[0].value; } } return tips; } }, //控制图标在dataroom中的位置大小 grid: { left: '1%', right: '10%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', data: areas, name: xTip, splitLine: { show: false }, axisLabel: { show: true, interval: intervals } }], yAxis: [{ type: 'value', name: '%', min: '0', max: '100' }], series: [{ name: '在线率', type: 'bar', barMaxWidth: barMax, data: rate }] }; comOption.setOption(option); comOption.on('click', function (params) { if (getRole("/pqs9000/area/onlineratetable") == 1) { window.top.addTab('/pqs9000/area/onlineratetable?startTime=' + startTime + '&endTime=' + endTime + '&interval=月份', '在线率列表') } }); } //填充终端厂家表格 function initCompanyTable(data) { var height = picHeight - 50; if (data == null) { data = []; } $("#companyTable").DataTable({ data: data, autoWidth: false, columnDefs: [ {"width": "33%", "targets": 0}, {"width": "33%", "targets": 1}, {"width": "33%", "targets": 2} ], order: [2, "desc"], paging: false, lengthChange: false, searching: false, destroy: true, scrollY: height, info: false, language: { url: '/pqs9000/json/chine.json', }, columns: [ {data: 'name'}, { data: 'amounts', render: function (data, type, full, meta) { if (tiggleValue === "系统") { return full.amounts; } else { return full.gwamounts; } } }, { data: 'online', render: function (data, type, full, meta) { if (tiggleValue === "系统") { data = full.online; } else { data = full.gwonline; } if (Number(data) === 3.1415) { return "/"; } else if (Number(data) === 3.14159) { return "(暂无数据)"; } else { return data; } } } ], }) } /** * 获取指定区域下终端的在线率具体数据(最多10条) */ function showDetailData(content, title) { layer.open({ type: 2, title: title + '终端在线率详情(前10)', shadeClose: true, resize: false, area: '650px', scrollbar: false, content: content }) } //开关触发图片更新 function reDrawAllPic() { if (tiggleValue === "系统") { $("#typeTitle").html("终端数"); $("#typeTitle1").html("终端数"); } else { $("#typeTitle").html("监测点数"); $("#typeTitle1").html("监测点数"); } if (areaResult === null) { drawAreaPic(null); initAreaTable(null); } else { drawAreaPic(areaResult); initAreaTable(areaResult); } if (companyResult === null) { drawCompanyPic(null); initCompanyTable(null); } else { drawCompanyPic(companyResult); initCompanyTable(companyResult); } } //根据在线率获取颜色 function getColor(data) { if (data >= 90) { return green; } else if (data === 3.1415) { return noMonitor; } else if (data === 3.14159) { return noData; } else if (data < 60) { return red; } else { return yellow; } }