var DialogUtil = {
|
show: true,
|
toggleDataDialog() {
|
this.show = !this.show;
|
if (this.show) {
|
return '数据弹框：开';
|
} else {
|
return '数据弹框：关';
|
}
|
},
|
/**
|
* 创建弹出框
|
* @param {*} factorDatas 监测数据
|
* @param {*} i 当前显示监测数据索引
|
* @param {*} onClose 关闭弹出框回调
|
* @returns
|
*/
|
createInfoWindow(factorDatas, i, onClose) {
|
let m = {
|
data: factorDatas,
|
index: i,
|
window: '',
|
close: onClose,
|
};
|
m.window = new AMap.InfoWindow({
|
isCustom: true, //使用自定义窗体
|
content: this.createWindowContent(m),
|
offset: new AMap.Pixel(16, -45),
|
});
|
return m.window;
|
},
|
|
createInfoWindow2(factorData, onClose) {
|
let m = {
|
time: factorData.time,
|
factorList: factorData.values,
|
window: '',
|
close: onClose,
|
};
|
m.window = new AMap.InfoWindow({
|
isCustom: true, //使用自定义窗体
|
content: this.createWindowContent2(m),
|
offset: new AMap.Pixel(16, -45),
|
});
|
return m.window;
|
},
|
/**
|
* 站点标记信息窗体
|
*/
|
createWindowContent: function (marker) {
|
const factorDatas = marker.data;
|
const i = marker.index;
|
const time = factorDatas.times[i];
|
const factorList = [];
|
Object.keys(factorDatas.factor).forEach((k) => {
|
var f = factorDatas.factor[k].datas[i];
|
factorList.push(f);
|
});
|
marker.time = time;
|
marker.factorList = factorList;
|
return this.createWindowContent2(marker);
|
},
|
|
createWindowContent2(marker) {
|
const time = marker.time;
|
const factorList = marker.factorList;
|
//实例化信息窗体
|
// var title = '<div>' + site.name + '</div>' + '<div class="sub-title">编号:' + site.code + '</div>',
|
var title = '',
|
content = '';
|
tag = '';
|
|
tag += "<div class='time'>" + '时间: ' + time;
|
|
// 遍历站点数据中的每一项监测因子，生成页面
|
content += "<table class='text-table'>";
|
var _contents = new Map();
|
factorList.forEach((f) => {
|
// 删选不显示的因子
|
if (
|
f.factorName == 'NOI' ||
|
f.factorName == 'LNG' ||
|
f.factorName == 'LAT' ||
|
f.factorName == 'VELOCITY' ||
|
f.factorName == 'TIME' ||
|
f.factorName == 'HEIGHT'
|
) {
|
return;
|
}
|
|
var factor = Util.factorName[f.factorName];
|
var n = 1;
|
if (f.factorName == 'WIND_DIRECTION') {
|
n = 0;
|
}
|
var v = f.factorData.toFixed(n);
|
var unit = Util.factorUnit2[f.factorName];
|
if (f.factorName == 'CO') {
|
unit = 'μg/m³';
|
}
|
if (f.factorName == 'WIND_DIRECTION') {
|
unit += '(' + Util.windDir(f.factorData) + ')';
|
}
|
var c = '<tr>';
|
if (f.factorName == 'H2S' || f.factorName == 'PM10') {
|
c = "<tr class='divide'>";
|
}
|
c += '<td>' + factor + '</td>';
|
c += '<td>' + ': ' + '</td>';
|
c += '<td>' + v + '</td>';
|
c += "<td class='last-col'>" + unit + '</td>';
|
c += '</tr>';
|
|
_contents.set(f.factorName, c);
|
});
|
var orderList = [
|
'VOC',
|
'H2S',
|
'NO2',
|
'CO',
|
'SO2',
|
'O3',
|
'PM25',
|
'PM10',
|
'TEMPERATURE',
|
'HUMIDITY',
|
'WIND_SPEED',
|
'WIND_DIRECTION',
|
];
|
orderList.forEach((e) => {
|
content += _contents.get(e);
|
});
|
|
content += '</table>';
|
|
var info = document.createElement('div');
|
// info.className = "custom-info input-card content-window-card";
|
info.className = 'flexbox-col';
|
|
//可以通过下面的方式修改自定义窗体的宽高
|
//info.style.width = "400px";
|
// 定义顶部标题
|
var top = document.createElement('div');
|
// top.className = "info-top";
|
top.className =
|
'ff-content ff-content-top-left ff-content-small-borderless-t info-top';
|
var top_b = document.createElement('div');
|
top_b.className = 'ff-border-bottom';
|
var top_t = document.createElement('div');
|
top_t.className = 'ff-border-top';
|
var top_c = document.createElement('div');
|
top_c.className = 'ff-border-content flexbox flex-space-between';
|
|
var titleD = document.createElement('div');
|
var closeX = document.createElement('i');
|
titleD.innerHTML = title;
|
closeX.className = 'fa fa-times';
|
$(closeX).attr('aria-hidden', 'true');
|
closeX.onclick = function () {
|
marker.close();
|
marker.window.close();
|
};
|
|
top_c.appendChild(titleD);
|
top_c.appendChild(closeX);
|
|
top_t.appendChild(top_c);
|
top.appendChild(top_b);
|
top.appendChild(top_t);
|
|
info.appendChild(top);
|
|
// 定义中部内容
|
var refreshV = document.createElement('div');
|
refreshV.className = 'refresh-btn';
|
var refresh = document.createElement('i');
|
refresh.className = 'fa fa-refresh';
|
$(refresh).attr('aria-hidden', 'true');
|
$(refresh).css('color', '#ffffffc0');
|
$(refresh).css('cursor', 'pointer');
|
refresh.onclick = function () {
|
// $(this).addClass('fa-spin')
|
// that.fetchingData(site.code, function () {
|
// setTimeout(() => {
|
// $(this).removeClass('fa-spin')
|
// }, 1000);
|
// }.bind(this))
|
};
|
var m_top = document.createElement('div');
|
m_top.className = 'ff-content ff-content-left ff-content-medium';
|
var m_top_b = document.createElement('div');
|
m_top_b.className = 'ff-border-bottom';
|
var m_top_t = document.createElement('div');
|
m_top_t.className = 'ff-border-top';
|
var m_top_c = document.createElement('div');
|
m_top_c.className = 'ff-border-content';
|
var m_top_f = document.createElement('div');
|
m_top_f.className = 'ff-footer flexbox-col flex-center';
|
var m_top_tr = document.createElement('div');
|
m_top_tr.className = 'ff-triangle';
|
var m_top_trb = document.createElement('div');
|
m_top_trb.className = 'ff-triangle-border';
|
refreshV.appendChild(refresh);
|
// m_top_c.appendChild(refreshV);
|
|
var middle = document.createElement('div');
|
middle.className = 'info-middle';
|
middle.innerHTML = content;
|
m_top_f.innerHTML = tag;
|
|
m_top_c.appendChild(middle);
|
|
m_top_t.appendChild(m_top_c);
|
m_top_tr.appendChild(m_top_trb);
|
|
m_top.appendChild(m_top_b);
|
m_top.appendChild(m_top_t);
|
m_top.appendChild(m_top_f);
|
m_top.appendChild(m_top_tr);
|
|
info.appendChild(m_top);
|
|
// 定义底部内容
|
var bottom = document.createElement('div');
|
bottom.className = 'info-bottom';
|
bottom.style.position = 'relative';
|
bottom.style.top = '0px';
|
bottom.style.margin = '0 auto';
|
var sharp = document.createElement('img');
|
sharp.src = 'https://webapi.amap.com/images/sharp.png';
|
bottom.appendChild(sharp);
|
info.appendChild(bottom);
|
return info;
|
},
|
|
openNewWindow(factorDatas, i, map, position, onClose) {
|
if (!this.show) return
|
const window = this.createInfoWindow(factorDatas, i, onClose)
|
window.open(map, position);
|
},
|
|
openNewWindow2(factorData, map, position, onClose) {
|
if (!this.show) return
|
const window = this.createInfoWindow2(factorData, onClose)
|
window.open(map, position);
|
}
|
};
|
