/* 水系统打印页面echarts配置 及打印 */ // 数据请求传参 getListData(getSearchParamObj()); // getListData(); function getListData(queryParam = {}) { ajaxRequest(WATER_DATA, "POST", queryParam, function(result) { if (result.totalCount != 0) { /** * 水系统导出数据对接 start * **/ //项目情况 var project_situation = result.RESULT[0].project_situation; var items = ''; items = ` 单位名称 ${project_situation.company_name} 进场日期 ${project_situation.entry_date} 完工日期 ${project_situation.completion_date} 验收日期 ${project_situation.acceptance_date} ` $('#project_situation').html(items); // //设备清单 var equipment_list = result.RESULT[0].equipment_list; var items2 = ''; if (equipment_list) { equipment_list.forEach(function(item, key) { items2 += ` ${item.device_name} ${item.device_info} ${item.device_code} ${item.remarks} `; }) $('#equipment_list').html(items2) } //统计时段 var statistical_period = result.RESULT[0].statistical_period; var items3 = ''; items3 = `
统计起始日期:${statistical_period.start_date}
统计截止日期:${statistical_period.closing_date}
统计时段时长:${statistical_period.duration}
`; $('#statistical_period').html(items3) //数据统计计算 var data_statistics = result.RESULT[0].data_statistics; var items4 = ''; items4 = ` ${data_statistics.alarm_number} ${data_statistics.processing_number} ${data_statistics.unprocessed_number} ${data_statistics.treatment_rate} ${data_statistics.untreated_rate} `; $('#data_statistics').html(items4); // 数据离散率挖掘 let dispersion_rate = result.RESULT[0].dispersion_rate; console.log(result.RESULT[0].dispersion_rate) // 结论数据渲染 var items = ''; var conclusion = dispersion_rate.conclusion for (x in conclusion) { xIndex = x.substr(x.length - 1, 1); items += `
${xIndex}、${conclusion[x]}
` } $('.exportBox .divergence .summaryDetail').html(items); // 数据离散率挖掘1 (function() { let dispersion_rate = result.RESULT[0].dispersion_rate; // 结论数据渲染 var items = ''; var conclusion = dispersion_rate.conclusion for (x in conclusion) { xIndex = x.substr(x.length - 1, 1); items += `

${xIndex}、${conclusion[x]}

` } $('.divergence .summaryDetail').html(items); let a = []; let b = []; let c = []; let hydraulic_pressure = dispersion_rate.hydraulic_pressure; hydraulic_pressure.forEach(function(item, index) { a.push(item.variance) b.push(item.standard_deviation) c.push(item.average_value) }); var sortData = [{ data: [a, b, c] }]; var xData = function() { var data = []; for (var i = 1; i < hydraulic_pressure.length + 1; i++) { data.push(i); } return data; }(); // 1. 实例化对象 var myChart = echarts.init(document.querySelector("#divergenceChart1")); // 2.指定配置 var option = { color: [{ colorStops: [{ offset: 0, color: '#F9860C' // 0% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 }], }, { colorStops: [{ offset: 0, color: '#07E1F1' // 0% 处的颜色 }, { offset: 1, color: '#0456CB' // 100% 处的颜色 }], }, { colorStops: [{ offset: 0, color: '#11F90C' // 0% 处的颜色 }, { offset: 1, color: '#3FC713' // 100% 处的颜色 }], } ], tooltip: { trigger: "axis", textStyle: { align: 'left' //图例左对齐 }, backgroundColor: '#12DFE0', formatter: '{a0}: {c0}
{a1}: {c1}
{a2}: {c2}
时间:2021年3月{b}日' }, legend: { // 如果series 对象有name 值,则 legend可以不用写data itemGap: 20, itemHeight: 2, itemWidth: 15, icon: 'rect', textStyle: { color: "#aaa" }, top: "bottom", }, grid: { top: "0%", left: "1%", right: "1%", bottom: "15%", show: true, // 显示边框 borderWidth: '0', //去除边框 containLabel: true // 包含刻度文字在内 }, xAxis: { type: "category", boundaryGap: false, data: xData, axisTick: { show: false // 去除刻度线 }, axisLabel: { color: "#AADDFF" // 文本颜色 }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.3)' } }, splitNumber: 8, splitLine: { show: false }, splitArea: { show: true, areaStyle: { color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"] } } }, yAxis: { splitNumber: 8, type: "value", axisTick: { show: false // 去除刻度线 }, axisLabel: { show: false // 去除文本 }, axisLine: { show: false // 去除轴线 }, splitLine: { lineStyle: { color: "#aaa", // 分割线颜色 opacity: '0.1' } } }, series: [{ symbol: "none", name: "方差", type: "line", data: sortData[0].data[0] }, { symbol: "none", name: "标准差", type: "line", data: sortData[0].data[1] }, { symbol: "none", name: "平均值", type: "line", data: sortData[0].data[2] } ] }; myChart.setOption(option); //echarts赋值到src var img1 = document.getElementById('divergenceChart1_img'); setTimeout(function() { img1.src = myChart.getDataURL(); }, 1000) })(); // 渗漏隐患排查 let leakage_investigation = result.RESULT[0].leakage_investigation; // 结论数据渲染 var items = ''; var conclusion = leakage_investigation.conclusion for (x in conclusion) { xIndex = x.substr(x.length - 1, 1); items += `

${xIndex}、${conclusion[x]}

` } $('.exportBox .hiddenCheck .summaryDetail').html(items); // 渗漏隐患排查1 (function() { let abnormal_pressure = []; let location_description = []; let start_pressure = []; let end_pressure = []; let leakage_data = leakage_investigation.leakage_data; leakage_data.forEach(function(item, index) { //异常值 abnormal_pressure.push(item.abnormal_pressure) //楼层 location_description.push(item.location_description) //开始值 start_pressure.push(item.start_pressure) //结束值 end_pressure.push(item.end_pressure) }); var xData = location_description; // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.querySelector("#hiddenCheckChart1")); var option = { backgroundColor: 'transparent', color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'], tooltip: { //提示框组件 trigger: 'axis', formatter: function(params) { // console.log(params) var res = '位置:' + params[0].axisValue + '
异常水压值 :' + abnormal_pressure[params[0].dataIndex]; return res; }, axisPointer: { type: 'shadow', }, textStyle: { fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 12, }, }, grid: { left: '0', right: '0', bottom: '40', top: '0', containLabel: true, }, legend: { // 如果series 对象有name 值,则 legend可以不用写data itemGap: 20, itemHeight: 2, itemWidth: 15, icon: 'rect', textStyle: { color: "#AAA" }, top: "bottom", }, xAxis: [{ type: 'category', // boundaryGap: true,//坐标轴两边留白 data: xData, axisLabel: { interval: 0, rotate: 340, // formatter: function(val) { // return val.split("").join("\n"); // }, //横轴信息文字竖直显示 textStyle: { color: '#AAA', fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 12, }, }, axisTick: { //坐标轴刻度相关设置。 show: false, }, axisLine: { //坐标轴轴线相关设置 }, splitLine: { //坐标轴在 grid 区域中的分隔线。 show: false, }, }, ], yAxis: [{ type: 'value', axisLabel: false, axisLine: { show: false, }, axisTick: { show: false, }, splitLine: { show: true, lineStyle: { color: "#aaa", // 分割线颜色 opacity: '0.2' } }, boundaryGap: ['0', '10%'], }], series: [{ name: '起层', type: 'bar', data: start_pressure, barMaxWidth: '11', itemStyle: { borderColor: "#0096FF", }, barGap: '50%', }, { name: '始层', type: 'bar', data: end_pressure, barMaxWidth: '11', itemStyle: { borderColor: "#FF9C00", }, }, ], }; myChart.setOption(option); //echarts赋值到src var img1 = document.getElementById('hiddenCheckChart1_img'); setTimeout(function() { img1.src = myChart.getDataURL(); }, 1000) })(); // 跨设备数据关联 let device_association = result.RESULT[0].device_association; // 结论数据渲染 var items = ''; var conclusion = device_association.conclusion for (x in conclusion) { xIndex = x.substr(x.length - 1, 1); items += `

${xIndex}、${conclusion[x]}

` } $('.exportBox .device_association .summaryDetail').html(items); // 跨设备数据关联1 // 喷淋末端、消火栓与水泵启停关联 let spray_end = []; let fire_hydrant = []; let pump_status = [] let pump_associated_data = device_association.pump_associated_data; pump_associated_data.forEach(function(item, index) { spray_end.push(item.spray_end) fire_hydrant.push(item.fire_hydrant) pump_status.push(item.pump_status) }); (function() { var sortData = [{ sortName: "喷淋末端、消火栓与水泵启停关联", data: [ spray_end, fire_hydrant ] }, ]; var xData = function() { var data = []; for (var i = 1; i < spray_end.length + 1; i++) { data.push(i); } return data; }(); // 1. 实例化对象 var myChart = echarts.init(document.querySelector("#deviceLinkChart1")); // 2.指定配置 var option = { color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色 tooltip: { trigger: "axis", textStyle: { align: 'left' //图例左对齐 }, backgroundColor: '#12DFE0', formatter: function(params) { var res = params[0].seriesName + ':' + params[0].value + '
' + params[1].seriesName + ':' + params[1].value + '
水泵启动状态 :' + pump_status[params[0].dataIndex] + '
时间:' + chooseTime + ''; return res; }, }, legend: { // 如果series 对象有name 值,则 legend可以不用写data itemGap: 20, itemHeight: 2, itemWidth: 15, icon: 'rect', textStyle: { color: "#fff" }, top: "bottom", }, grid: { top: "0%", left: "1%", right: "1%", bottom: "15%", show: true, // 显示边框 borderWidth: '0', //去除边框 containLabel: true // 包含刻度文字在内 }, xAxis: { type: "category", boundaryGap: false, data: xData, axisTick: { show: false // 去除刻度线 }, axisLabel: { color: "#AADDFF" // 文本颜色 }, axisLine: { show: false // 去除轴线 } }, yAxis: { type: "value", axisTick: { show: false // 去除刻度线 }, axisLabel: { show: false // 去除文本 }, axisLine: { show: false // 去除轴线 }, splitLine: { lineStyle: { color: "#aaa", // 分割线颜色 opacity: '0.2' } } }, series: [{ symbol: "none", name: "喷淋末端", type: "line", smooth: true, // true 可以让我们的折线显示带有弧度 areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, color: "rgba(255,156,0, 0.4)" }, { offset: 0.8, color: "rgba(255,156,0, 0.3)" } ], false ), shadowColor: "rgba(0, 0, 0, 0.1)" } }, data: sortData[0].data[0] }, { symbol: "none", name: "消防栓", type: "line", smooth: true, areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, color: "rgba(0,150,255,0.5)" }, { offset: 0.8, color: "rgba(0,150,255, 0.1)" } ], false ), shadowColor: "rgba(0, 0, 0, 0.1)" } }, data: sortData[0].data[1] } ] }; myChart.setOption(option); var img1 = document.getElementById('deviceLinkChart1_img'); setTimeout(function() { img1.src = myChart.getDataURL(); }, 1000) })(); // 跨设备数据关联2 // 喷淋末端、消火栓屋顶水箱液位关联 let spray_end2 = []; let fire_hydrant2 = []; let water_tank_level = [] let water_associated_data = device_association.water_associated_data; water_associated_data.forEach(function(item, index) { spray_end2.push(item.spray_end) fire_hydrant2.push(item.fire_hydrant) water_tank_level.push(item.water_tank_level) }); (function() { var sortData = [{ sortName: "喷淋末端、消火栓屋顶水箱液位关联", data: [ spray_end2, fire_hydrant2 ] }]; var xData = function() { var data = []; for (var i = 1; i < water_associated_data.length + 1; i++) { data.push(i); } return data; }(); // 1. 实例化对象 var myChart = echarts.init(document.querySelector("#deviceLinkChart2")); // 2.指定配置 var option = { color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色 tooltip: { trigger: "axis", textStyle: { align: 'left' //图例左对齐 }, backgroundColor: '#12DFE0', formatter: function(params) { var res = params[0].seriesName + ':' + params[0].value + '
' + params[1].seriesName + ':' + params[1].value + '
水箱液位 :' + water_tank_level[params[0].dataIndex] + '
时间:' + chooseTime + ''; return res; }, }, legend: { // 如果series 对象有name 值,则 legend可以不用写data itemGap: 20, itemHeight: 2, itemWidth: 15, icon: 'rect', textStyle: { color: "#fff" }, top: "bottom", }, grid: { top: "0%", left: "1%", right: "1%", bottom: "15%", show: true, // 显示边框 borderWidth: '0', //去除边框 containLabel: true // 包含刻度文字在内 }, xAxis: { type: "category", boundaryGap: false, data: xData, axisTick: { show: false // 去除刻度线 }, axisLabel: { color: "#AADDFF" // 文本颜色 }, axisLine: { show: false // 去除轴线 } }, yAxis: { type: "value", axisTick: { show: false // 去除刻度线 }, axisLabel: { show: false // 去除文本 }, axisLine: { show: false // 去除轴线 }, splitLine: { lineStyle: { color: "#aaa", // 分割线颜色 opacity: '0.2' } } }, series: [{ symbol: "none", name: "喷淋末端", type: "line", smooth: true, // true 可以让我们的折线显示带有弧度 areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, color: "rgba(255,156,0, 0.4)" }, { offset: 0.8, color: "rgba(255,156,0, 0.3)" } ], false ), shadowColor: "rgba(0, 0, 0, 0.1)" } }, data: sortData[0].data[0] }, { symbol: "none", name: "消防栓", type: "line", smooth: true, areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, color: "rgba(0,150,255,0.5)" }, { offset: 0.8, color: "rgba(0,150,255, 0.1)" } ], false ), shadowColor: "rgba(0, 0, 0, 0.1)" } }, data: sortData[0].data[1] } ] }; myChart.setOption(option); var img1 = document.getElementById('deviceLinkChart2_img'); setTimeout(function() { img1.src = myChart.getDataURL(); }, 1000) })(); // 数据波动关联 (function() { var sortData = [{ data: [ [30, 70, 100, 120, 130, 190, 200, 230, 120, 100, 90, 80, 59, 30], ] }]; var xData = ['一到二层', '二到三层', '三到四层', '四到五层', '五到六层', '六到七层', '七到八层', '八到九层', '九到十层', '十到十一层', '十一到十二层', '十二到十三层'] // 1. 实例化对象 var myChart = echarts.init(document.querySelector("#dataChangeChart1")); // 2.指定配置 var option = { color: ["#FE92B3"], // 通过这个color修改三条线的颜色 tooltip: { trigger: "axis", textStyle: { align: 'left' //图例左对齐 }, // backgroundColor: '#12DFE0', // formatter: '{a0}: {c0}
{b}' }, legend: false, grid: { top: "0%", left: "1%", right: "1%", bottom: "1%", show: true, // 显示边框 borderWidth: '0', //去除边框 containLabel: true, // 不包含刻度文字在内 }, xAxis: { type: "category", boundaryGap: false, data: xData, axisTick: { show: false // 去除刻度线 }, axisLabel: { color: "#AADDFF", // 文本颜色 interval: 0, rotate: 340, // formatter: function(val) { // return val.split("").join("\n"); // }, //横轴信息文字竖直显示 }, axisLine: { show: false // 去除轴线 } }, yAxis: { splitNumber: 8, type: "value", axisTick: { show: false // 去除刻度线 }, axisLabel: { show: false // 去除文本 }, axisLine: { show: false // 去除轴线 }, splitLine: { lineStyle: { color: "#012f4a", // 分割线颜色 opacity: .2 } } }, series: [{ symbol: "none", name: "异常水压值", type: "line", smooth: true, areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, color: "rgba(255,147,180,.6)" }, { offset: 0.8, color: "rgba(255,147,180, 0.4)" } ], false ), } }, data: sortData[0].data[0] }] }; myChart.setOption(option); var img1 = document.getElementById('dataChangeChart1_img'); setTimeout(function() { img1.src = myChart.getDataURL(); }, 1000) })(); /**水系统导出数据对接 end **/ } else { alert('暂无数据') } }, function(errorMsg) { alert("请求数据失败!"); }, 2) }; function getSearchParamObj() { let queryParam = {}; let buildingVal = $('#building').val(); let chooseTime = $('#chooseTime').val(); queryParam.company_code = buildingVal; queryParam.generation_time = chooseTime; return queryParam; } // 打印 (function() { $("#btnPrint").click(function() { print_detail() }); var print_detail = function() { //打印前echarts图表转换成图片 start $('#divergenceChart1_img').show() $('#divergenceChart1').hide() $('#hiddenCheckChart1_img').show() $('#hiddenCheckChart1').hide() $('#deviceLinkChart1_img,#deviceLinkChart2_img').show() $('#deviceLinkChart1,#deviceLinkChart2').hide() $('#dataChangeChart1_img').show() $('#dataChangeChart1').hide() // end var div1_label1 = document.getElementById('printArea').innerHTML; var hkey_key; var hkey_root = 'HKEY_CURRENT_USER'; var hkey_path = '\\Software\\Micorsoft\\Internet Explorer\\PageSetup\\'; var print_win = window.open('打印窗口', '_blank'); var div = document.createElement('div'); div.setAttribute('width', '100%'); div.setAttribute('height', '100%'); var div_print = document.createElement('div'); div_print.setAttribute('style', 'width:595px;height:842px;padding:50px 20px;margin:0px auto 0px auto'); div_print.innerHTML = div1_label1; div.appendChild(div_print); print_win.document.write(div.innerHTML); print_win.document.close(); try { var RegWsh = new ActiveXObject('WScript.Shell'); hkey_key = 'header'; RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, ''); hkey_key = 'footer'; RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, ''); } catch (e) {} print_win.print(); print_win.close(); } })()