|
@@ -1,3 +1,24 @@
|
|
|
+//建筑下拉
|
|
|
+getNameList();
|
|
|
+
|
|
|
+function getNameList(queryParam = {}) {
|
|
|
+
|
|
|
+ ajaxRequest(GET_NAME_LIST_DATA, "POST", queryParam, function(result) {
|
|
|
+ let data = result.RESULT;
|
|
|
+ let items = '';
|
|
|
+
|
|
|
+ data.forEach(function(item, key) {
|
|
|
+
|
|
|
+ items += `<option value="${item.owner_id}">${item.owner_name}</option>`
|
|
|
+
|
|
|
+ })
|
|
|
+ $('#building').html(items);
|
|
|
+
|
|
|
+ }, function(errorMsg) {
|
|
|
+ // alert("请求数据失败!");
|
|
|
+ }, 2)
|
|
|
+};
|
|
|
+
|
|
|
// 数据请求传参
|
|
|
getListData(getSearchParamObj());
|
|
|
|
|
@@ -5,7 +26,11 @@ function getListData(queryParam = {}) {
|
|
|
|
|
|
ajaxRequest(WATER_DATA, "POST", queryParam, function(result) {
|
|
|
|
|
|
- if (result.RESULT) {
|
|
|
+ if (result.totalCount != 0) {
|
|
|
+
|
|
|
+ /*
|
|
|
+ 主页面数据对接 start
|
|
|
+ */
|
|
|
|
|
|
//数据统计
|
|
|
var data_statistics = result.RESULT[0].data_statistics;
|
|
@@ -391,7 +416,7 @@ function getListData(queryParam = {}) {
|
|
|
|
|
|
})();
|
|
|
|
|
|
- // 渗漏隐藏排查
|
|
|
+ // 渗漏隐患排查
|
|
|
(function() {
|
|
|
|
|
|
let leakage_investigation = result.RESULT[0].leakage_investigation;
|
|
@@ -440,7 +465,7 @@ function getListData(queryParam = {}) {
|
|
|
trigger: 'axis',
|
|
|
formatter: function(params) {
|
|
|
// console.log(params)
|
|
|
- var res = '位置:' + params[0].axisValue + '<br />异常水压值 :' + abnormal_pressure[params[0].dataIndex];
|
|
|
+ var res = '位置:' + params[0].axisValue + '<br />异常水压值 :' + abnormal_pressure[params[0].dataIndex] + 'Mpa';
|
|
|
return res;
|
|
|
},
|
|
|
axisPointer: {
|
|
@@ -786,6 +811,8 @@ function getListData(queryParam = {}) {
|
|
|
(function() {
|
|
|
|
|
|
let data_fluctuation = result.RESULT[0].data_fluctuation;
|
|
|
+ console.log('data_fluctuation')
|
|
|
+ console.log(data_fluctuation)
|
|
|
|
|
|
// 结论数据渲染
|
|
|
var items = '';
|
|
@@ -823,10 +850,11 @@ function getListData(queryParam = {}) {
|
|
|
backgroundColor: '#12DFE0',
|
|
|
//提示框组件
|
|
|
trigger: 'axis',
|
|
|
- formatter: '{a0}: {c0}<br />{a1}: {c1}<br />时间:' + chooseTime + '',
|
|
|
+ formatter: '{a0}: {c0}<span>Mpa</span><br />{a1}: {c1}<span>Mpa</span><br />时间:' + chooseTime + '',
|
|
|
axisPointer: {
|
|
|
type: 'shadow',
|
|
|
},
|
|
|
+
|
|
|
textStyle: {
|
|
|
fontStyle: 'normal',
|
|
|
fontFamily: '微软雅黑',
|
|
@@ -950,21 +978,1032 @@ function getListData(queryParam = {}) {
|
|
|
|
|
|
})();
|
|
|
|
|
|
- } else {
|
|
|
- alert('暂无数据')
|
|
|
- }
|
|
|
+ /*
|
|
|
+ 主页面数据对接 end
|
|
|
+ */
|
|
|
+
|
|
|
+ //项目情况
|
|
|
+ var project_situation = result.RESULT[0].project_situation;
|
|
|
+ var items = '';
|
|
|
+ items = `<tr>
|
|
|
+ <td>单位名称</td>
|
|
|
+ <td colspan="5">${project_situation.company_name}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>进场日期</td>
|
|
|
+ <td>${project_situation.entry_date} </td>
|
|
|
+ <td>完工日期</td>
|
|
|
+ <td>${project_situation.completion_date}</td>
|
|
|
+ <td>验收日期</td>
|
|
|
+ <td>${project_situation.acceptance_date}</td>
|
|
|
+ </tr>`
|
|
|
+ $('#project_situation').html(items);
|
|
|
+
|
|
|
+ //设备清单
|
|
|
+ var equipment_list = result.RESULT[0].equipment_list;
|
|
|
+ var items2 = '';
|
|
|
+ if (equipment_list) {
|
|
|
+ equipment_list.forEach(function(item, key) {
|
|
|
+ items2 += `<tr>
|
|
|
+ <td>${item.device_name}</td>
|
|
|
+ <td>${item.device_info}</td>
|
|
|
+ <td>${item.device_code}</td>
|
|
|
+ <td>${item.remarks}</td>
|
|
|
+ </tr>`;
|
|
|
+ })
|
|
|
+ $('#equipment_list').html(items2)
|
|
|
+ }
|
|
|
+
|
|
|
+ //统计时段
|
|
|
+ var statistical_period = result.RESULT[0].statistical_period;
|
|
|
+ var items3 = '';
|
|
|
+ items3 = `<div>统计起始日期:${statistical_period.start_date}</div>
|
|
|
+ <div>统计截止日期:${statistical_period.closing_date}</div>
|
|
|
+ <div>统计时段时长:${statistical_period.duration}</div>`;
|
|
|
+ $('#statistical_period').html(items3)
|
|
|
+
|
|
|
+ //数据统计计算
|
|
|
+ var data_statistics = result.RESULT[0].data_statistics;
|
|
|
+ var items4 = '';
|
|
|
+ items4 = `<tr>
|
|
|
+ <td>${data_statistics.alarm_number}</td>
|
|
|
+ <td>${data_statistics.processing_number}</td>
|
|
|
+ <td>${data_statistics.unprocessed_number}</td>
|
|
|
+ <td>${data_statistics.treatment_rate}</td>
|
|
|
+ <td>${data_statistics.untreated_rate}</td>
|
|
|
+ </tr>`;
|
|
|
+ $('#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 += `<div>${xIndex}、${conclusion[x]}</div>`
|
|
|
+ }
|
|
|
+ $('.exportBox .divergence .summaryDetail').html(items);
|
|
|
+
|
|
|
+ // 数据离散率挖掘1
|
|
|
+ (function() {
|
|
|
+ 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)
|
|
|
+ });
|
|
|
|
|
|
- }, function(errorMsg) {
|
|
|
- alert("请求数据失败!");
|
|
|
- }, 2)
|
|
|
-};
|
|
|
+ var sortData = [{
|
|
|
+ data: [a, b, c]
|
|
|
+ }];
|
|
|
|
|
|
-function getSearchParamObj() {
|
|
|
- let queryParam = {};
|
|
|
- let buildingVal = $('#building').val();
|
|
|
- let chooseTime = $('#chooseTime').val();
|
|
|
- queryParam.company_code = buildingVal;
|
|
|
- // queryParam.generation_time = chooseTime;
|
|
|
- return queryParam;
|
|
|
+ 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}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间: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 += `<div>${xIndex}、${conclusion[x]}</div>`
|
|
|
+ }
|
|
|
+ $('.exportBox .hiddenCheck .summaryDetail').html(items);
|
|
|
+
|
|
|
+ // 渗漏隐患排查
|
|
|
+ (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 + '<br />异常水压值 :' + 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 += `<div>${xIndex}、${conclusion[x]}</div>`
|
|
|
+ }
|
|
|
+ $('.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 + '<br />' + params[1].seriesName + ':' + params[1].value + '<br />水泵启动状态 :' + pump_status[params[0].dataIndex] + '<br />时间:' + chooseTime + '';
|
|
|
+ return res;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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: {
|
|
|
+ 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 + '<br />' + params[1].seriesName + ':' + params[1].value + '<br /> 水箱液位 :' + water_tank_level[params[0].dataIndex] + '<br />时间:' + chooseTime + '';
|
|
|
+
|
|
|
+ return res;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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: {
|
|
|
+ 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)
|
|
|
+
|
|
|
+ })();
|
|
|
+
|
|
|
+
|
|
|
+ //数据波动关联
|
|
|
+
|
|
|
+ let data_fluctuation = result.RESULT[0].data_fluctuation;
|
|
|
+
|
|
|
+ // 结论数据渲染
|
|
|
+ var items = '';
|
|
|
+ var conclusion = data_fluctuation.conclusion
|
|
|
+ for (x in conclusion) {
|
|
|
+ xIndex = x.substr(x.length - 1, 1);
|
|
|
+ items += `<div>${xIndex}、${conclusion[x]}</div>`
|
|
|
+ }
|
|
|
+ $('.exportBox .data_fluctuation .summaryDetail').html(items);
|
|
|
+
|
|
|
+ // 数据波动关联
|
|
|
+ (function() {
|
|
|
+
|
|
|
+ let position = [];
|
|
|
+ let before_fluctuation = [];
|
|
|
+ let after_fluctuation = [];
|
|
|
+ let volatility_data = data_fluctuation.volatility_data;
|
|
|
+ volatility_data.forEach(function(item, index) {
|
|
|
+
|
|
|
+ //楼层
|
|
|
+ position.push(item.position)
|
|
|
+
|
|
|
+ //开始值
|
|
|
+ before_fluctuation.push(item.before_fluctuation)
|
|
|
+
|
|
|
+ //结束值
|
|
|
+ after_fluctuation.push(item.after_fluctuation)
|
|
|
+ });
|
|
|
+ // 1. 实例化对象
|
|
|
+ var myChart = echarts.init(document.querySelector("#dataChangeChart1"));
|
|
|
+ var xData = position;
|
|
|
+ // 2.指定配置
|
|
|
+ var option = {
|
|
|
+ backgroundColor: 'transparent',
|
|
|
+ color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'],
|
|
|
+ tooltip: {
|
|
|
+ backgroundColor: '#12DFE0',
|
|
|
+ //提示框组件
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: '{a0}: {c0}<br />{a1}: {c1}<br />时间:' + chooseTime + '',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ fontStyle: 'normal',
|
|
|
+ fontFamily: '微软雅黑',
|
|
|
+ align: 'left' //图例左对齐
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ // 如果series 对象有name 值,则 legend可以不用写data
|
|
|
+ itemGap: 20,
|
|
|
+ itemHeight: 2,
|
|
|
+ itemWidth: 15,
|
|
|
+ icon: 'rect',
|
|
|
+ textStyle: {
|
|
|
+ color: "#AAA"
|
|
|
+ },
|
|
|
+ top: "bottom",
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '0',
|
|
|
+ right: '0',
|
|
|
+ bottom: '40',
|
|
|
+ top: '0',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+
|
|
|
+ //添加横线滚动条
|
|
|
+ dataZoom: {
|
|
|
+ start: 0, //默认为0
|
|
|
+ end: 100 - 1500 / 1, //默认为100
|
|
|
+ type: 'slider',
|
|
|
+ show: xData.length > 10 ? true : false,
|
|
|
+ xAxisIndex: [0],
|
|
|
+ handleSize: 0, //滑动条的 左右2个滑动条的大小
|
|
|
+ height: 4, //组件高度
|
|
|
+ left: 20, //左边的距离
|
|
|
+ right: 20, //右边的距离
|
|
|
+ bottom: 20, //右边的距离
|
|
|
+ handleColor: '#CBBCDB', //h滑动图标的颜色
|
|
|
+ handleStyle: {
|
|
|
+ borderColor: "#CBBCDB",
|
|
|
+ borderWidth: "1",
|
|
|
+ shadowBlur: 2,
|
|
|
+ background: "#CBBCDB",
|
|
|
+ shadowColor: "#CBBCDB",
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff"
|
|
|
+ },
|
|
|
+
|
|
|
+ backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色
|
|
|
+ showDataShadow: false, //是否显示数据阴影 默认auto
|
|
|
+ // showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
|
|
|
+ filterMode: 'filter',
|
|
|
+ },
|
|
|
+
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ // boundaryGap: true,//坐标轴两边留白
|
|
|
+ data: xData,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ // rotate: 340,
|
|
|
+ // formatter: function(val) {
|
|
|
+ // return val.split("").join("\n");
|
|
|
+ // }, //横轴信息文字竖直显示
|
|
|
+ textStyle: {
|
|
|
+ color: '#AADDFF',
|
|
|
+ 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: before_fluctuation,
|
|
|
+ barMaxWidth: '11',
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: "#0096FF",
|
|
|
+ },
|
|
|
+ barGap: '50%',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '波动后水压值',
|
|
|
+ type: 'bar',
|
|
|
+ data: after_fluctuation,
|
|
|
+ barMaxWidth: '11',
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: "#FF9C00",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ myChart.setOption(option);
|
|
|
+ var img1 = document.getElementById('dataChangeChart1_img');
|
|
|
+ setTimeout(function() {
|
|
|
+ img1.src = myChart.getDataURL();
|
|
|
+ }, 1000)
|
|
|
+ })();
|
|
|
+
|
|
|
+ /*
|
|
|
+ 导出数据对接 start
|
|
|
+ */
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ layui.use('layer', function() {
|
|
|
+ var layer = layui.layer;
|
|
|
+ layer.alert('暂无数据', { icon: 5 }, function() {
|
|
|
+ location.reload();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, function(errorMsg) {
|
|
|
+ layui.use('layer', function() {
|
|
|
+ var layer = layui.layer;
|
|
|
+ layer.alert('数据请求失败', { icon: 5 });
|
|
|
+ });
|
|
|
+ }, 1)
|
|
|
+};
|
|
|
+
|
|
|
+function getSearchParamObj() {
|
|
|
+ let queryParam = {};
|
|
|
+ let buildingVal = $('#building').val();
|
|
|
+ let chooseTime = $('#chooseTime').val();
|
|
|
+ queryParam.company_code = buildingVal;
|
|
|
+ queryParam.generation_time = chooseTime;
|
|
|
+ return queryParam;
|
|
|
+};
|
|
|
+
|
|
|
+//日期筛选
|
|
|
+layui.use('laydate', function() {
|
|
|
+ var laydate = layui.laydate;
|
|
|
+ ///年月选择器
|
|
|
+ laydate.render({
|
|
|
+ elem: '#chooseTime',
|
|
|
+ type: 'month',
|
|
|
+ max: -30, //7天后
|
|
|
+ trigger: 'click', //呼出事件改成click
|
|
|
+
|
|
|
+ done: function(value, date, endDate) {
|
|
|
+ setTimeout(function() {
|
|
|
+ getListData(getSearchParamObj());
|
|
|
+ }, 100)
|
|
|
+ }
|
|
|
|
|
|
-}
|
|
|
+ });
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+//建筑筛选
|
|
|
+$("#building").change(function() {
|
|
|
+ setTimeout(function() {
|
|
|
+ getListData(getSearchParamObj());
|
|
|
+ }, 100)
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+// 打印
|
|
|
+(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();
|
|
|
+ }
|
|
|
+})()
|