/**
|
* 网格化监测
|
*/
|
function GridMonitor(options) {
|
this.sites
|
this.showingSites = []
|
|
// 信访企业
|
this.companys = []
|
// 信访企业地图标记
|
this.companyMarker = []
|
this.companyInfoWindow = []
|
this.isCompanyShow = false
|
|
this.historyMode = options.historyMode
|
this.timePicker = options.timePicker
|
}
|
|
GridMonitor.prototype = {
|
init: function () {
|
this.getStats()
|
// this.fetchingData()
|
},
|
enable: function () {
|
this.isEnable = true
|
this.uiChange(true)
|
},
|
disable: function () {
|
this.isEnable = false
|
this.uiChange(false)
|
},
|
getStats: function () {
|
// todo
|
this.sites = {
|
'0d0000000001': {
|
name: '吕巷镇乡间艺墅微型站',
|
code: '0d0000000001',
|
show: false,
|
data: new FactorDatas(),
|
location: [0, 0],
|
// 地图标记点
|
marker: '',
|
// 标记点信息窗体
|
infoWindow: ''
|
},
|
// '0a0000000001': {
|
// name: '测试站点二',
|
// code: '0a0000000001',
|
// show: false,
|
// data: new FactorDatas(),
|
// location: [0, 0],
|
// // 地图标记点
|
// marker: '',
|
// // 标记点信息窗体
|
// infoWindow: ''
|
// }
|
}
|
|
var that = this
|
|
var group = $('#monitor_sites')
|
group.empty()
|
Object.keys(this.sites).forEach(k => {
|
var s = this.sites[k]
|
var d1 = $('<div class="form-check"></div>')
|
var check = $('<input type="checkbox" class="form-check-input">')
|
check.attr('id', s.code)
|
check.attr('value', s.code)
|
check.on('click', function () {
|
var code = $(this).val()
|
that.showData(code)
|
})
|
var label = $('<label class="form-check-label">')
|
label.attr('for', s.code)
|
label.text(s.name)
|
d1.append(check)
|
d1.append(label)
|
|
group.append(d1)
|
});
|
},
|
fetchingData: function (code, callback) {
|
var that = this
|
var type = $('#select_data_type').val()
|
var _code = code == undefined ? Object.keys(this.sites)[0] : code
|
HttpService.getRealtimeData(_code, 1, function (datas) {
|
if (datas.length == 0) {
|
return
|
}
|
// 更新最新的数据时间
|
that.lastestTime = datas[datas.length - 1].time
|
that.parseData(datas, callback)
|
}, {}, type)
|
},
|
parseData: function (datas, callback) {
|
var that = this
|
if (datas.length == 0) {
|
return
|
}
|
var data = datas[datas.length - 1]
|
// datas.forEach(data => {
|
var dCode = data.deviceCode
|
var site = this.sites[dCode]
|
if (site == undefined) {
|
return
|
}
|
site.data.setData([data])
|
// if (data.lng != 0 && data.lat != 0) {
|
if (site.location[0] == 0) {
|
site.infoWindow = new AMap.InfoWindow({
|
isCustom: true, //使用自定义窗体
|
content: that.createInfoWindow(site),
|
offset: new AMap.Pixel(16, -45)
|
})
|
|
site.location = [121.235813, 30.835898]
|
MapUtil.convertFromGPS([site.location], function (result) {
|
site.marker = new AMap.Marker({
|
position: new AMap.LngLat(...result[0]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
// label: {
|
// content: site.name,
|
// offset: 0,
|
// direction: "bottom"
|
// },
|
title: site.name,
|
content: '<div><img src="./asset/mipmap/device.png" style="width: 30px;height: 30px"/><div class="marker-content">' + site.name + '</div></div>',
|
// icon: "./asset/mipmap/location.png",
|
animation: "AMAP_ANIMATION_DROP"
|
});
|
|
//鼠标点击marker弹出自定义的信息窗体
|
AMap.event.addListener(site.marker, 'click', function () {
|
site.infoWindow.open(MapUtil._map, site.marker.getPosition());
|
});
|
|
if (callback != undefined) {
|
callback()
|
}
|
})
|
} else {
|
site.infoWindow.setContent(that.refreshInfoWindow(site, site.infoWindow.getContent()))
|
|
if (callback != undefined) {
|
callback()
|
}
|
}
|
// })
|
},
|
|
showData: function (...deviceCodes) {
|
deviceCodes.forEach(d => {
|
if (this._isSiteShowing(d)) {
|
this._hideSite(d)
|
} else {
|
this._showSite(d)
|
}
|
})
|
},
|
_isSiteShowing: function (dCode) {
|
return this.showingSites.indexOf(dCode) != -1
|
},
|
_hideSite: function (dCode) {
|
var site = this.sites[dCode]
|
var m = site.marker
|
MapUtil.removeViews(m)
|
|
var info = site.infoWindow
|
info.close()
|
|
var i = this.showingSites.indexOf(dCode)
|
this.showingSites.splice(i, 1)
|
},
|
_showSite: function (dCode) {
|
var that = this
|
var site = this.sites[dCode]
|
if (site.marker == '') {
|
this.fetchingData(site.code, function () {
|
that._siteShow(dCode)
|
})
|
} else {
|
this._siteShow(dCode)
|
}
|
},
|
_siteShow: function (dCode) {
|
var site = this.sites[dCode]
|
var m = site.marker
|
MapUtil.addViews(m)
|
|
var info = site.infoWindow
|
info.open(MapUtil._map, m.getPosition());
|
|
this.showingSites.push(dCode)
|
},
|
|
/**
|
* 显示或隐藏信访企业
|
*/
|
toggleCompany: function () {
|
this.isCompanyShow = !this.isCompanyShow
|
|
if (!this.isCompanyShow) {
|
MapUtil.removeViews(this.companyMarker)
|
return
|
}
|
|
if (this.companys.length == 0) {
|
HttpService.getCompanyInfo(function (data) {
|
this.companys = data
|
var datas = []
|
var index = 1
|
var lnglats = []
|
this.companys.forEach(element => {
|
if (element.ciLongitude != undefined) {
|
datas.push({
|
id: index,
|
name: element.ciName,
|
})
|
lnglats.push([element.ciLongitude, element.ciLatitude])
|
index++
|
}
|
});
|
MapUtil.convertFromGPS(lnglats, function (gd) {
|
|
for (let i = 0; i < datas.length; i++) {
|
const element = datas[i];
|
var icon = new AMap.Icon({
|
size: new AMap.Size(30, 30),
|
imageSize: new AMap.Size(22, 22),
|
image: "./asset/mipmap/company.png",
|
// imageOffset: new AMap.Pixel(-16, -16) // 相对于基点的偏移位置
|
})
|
|
var marker = new AMap.Marker({
|
position: new AMap.LngLat(gd[i][0], gd[i][1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
label: {
|
content: element.name,
|
offset: 0,
|
direction: "top"
|
},
|
title: element.name,
|
// content: element.name,
|
icon: icon,
|
animation: "AMAP_ANIMATION_DROP"
|
});
|
|
//鼠标点击marker弹出自定义的信息窗体
|
AMap.event.addListener(marker, 'click', function () {
|
this.companyInfoWindow[i].open(MapUtil._map, marker.getPosition());
|
});
|
|
this.companyMarker.push(marker)
|
}
|
|
MapUtil.addViews(this.companyMarker)
|
}.bind(this))
|
}.bind(this))
|
} else {
|
MapUtil.addViews(this.companyMarker)
|
}
|
},
|
|
/**
|
* 站点标记信息窗体
|
*/
|
createInfoWindow: function (site) {
|
var that = this
|
//实例化信息窗体
|
var title = '<div>' + site.name + '</div>' + '<div class="sub-title">编号:' + site.code + '</div>',
|
content = '';
|
tag = ''
|
|
tag += ("<div class='time'>" + '时间: ' + site.data.times[site.data.times.length - 1])
|
|
// 遍历站点数据中的每一项监测因子，生成页面
|
content += "<table class='text-table'>"
|
var _contents = new Map()
|
Object.keys(site.data.factor).forEach(k => {
|
var f = site.data.factor[k]
|
// 删选不显示的因子
|
if (f.factorName == 'NOI' || f.factorName == 'LNG' || f.factorName == 'LAT' || f.factorName == 'VELOCITY' ||
|
f.factorName == 'TIME' || f.factorName == 'HEIGHT') {
|
return
|
}
|
|
var d = f.datas[f.datas.length - 1]
|
|
var factor = Util.factorName[f.factorName]
|
var n = 1
|
if (f.factorName == 'WIND_DIRECTION') {
|
n = 0
|
}
|
var v = d.factorData.toFixed(n)
|
var unit = Util.factorUnit2[f.factorName]
|
if (f.factorName == 'CO') {
|
unit = 'μg/m³'
|
}
|
if (f.factorName == 'WIND_DIRECTION') {
|
unit += '(' + Util.windDir(d.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 () {
|
that.closeInfoWindow(site);
|
}
|
|
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"
|
|
// $(refresh).on('click', site.code, function(event) {
|
// $(this).addClass('loading-pic')
|
// that.fetchingData(event.data, function() {
|
// $(this).removeClass('loading-pic')
|
// })
|
// });
|
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;
|
},
|
closeInfoWindow: function (site) {
|
site.infoWindow.close()
|
},
|
refreshInfoWindow: function (site, infoWindow) {
|
return this.createInfoWindow(site)
|
},
|
|
/**
|
* UI显示隐藏变化
|
*/
|
uiChange: function (isShow) {
|
// var g = $('#btn_gridmonitor')
|
// g.addClass('btn-unselected')
|
if (isShow) {
|
this.historyMode.setFactorMode('type2')
|
|
setTimeout(() => {
|
// g.removeClass()
|
// g.addClass('btn-selected margin-left-8')
|
|
$('#historybox').slideDown("fast")
|
$('#history_table_box').slideDown("fast")
|
$('#searchbox').slideDown("fast")
|
|
$('#table_title').html(" 监<br>测<br>数<br>据<br>详<br>情")
|
|
this.searchBox()
|
}, 500)
|
} else {
|
// DataUtil.hideAll()
|
$('.gMode').hide()
|
}
|
},
|
/**
|
* 搜索框重新初始化
|
*/
|
searchBox: function () {
|
|
var that = this
|
|
$('.hMode').hide()
|
$('.gMode').show()
|
|
var tD = $('#select_device_code')
|
tD.empty()
|
var options2 = ['0d0000000001']
|
var op = $('<option></option>')
|
options2.forEach(element => {
|
var op = $('<option></option>')
|
op.text(element)
|
tD.append(op)
|
});
|
|
$('#btn_search').off()
|
$('#btn_search').on('click', function () {
|
var deviceCode = $('#select_device_code').val()
|
var startTime = $('#starttime_text').text()
|
var endTime = $('#endtime_text').text()
|
var type = $('#select_data_type').val()
|
|
DataUtil.toggleLoading()
|
that.getHistoryData(deviceCode, startTime, endTime, 1, true, type)
|
})
|
|
this.getRealtimeData()
|
},
|
getRealtimeData: function () {
|
var that = this
|
DataUtil.toggleLoading()
|
HttpService.getRealtimeData("0d0000000001", 100, function (data) {
|
DataUtil.toggleLoading()
|
if (data.length == 0) {
|
alert("数据库没有任何数据")
|
return
|
}
|
var code = data[0].deviceCode
|
var factorMode = DataUtil.refreshFactorMode(code)
|
|
$('#starttime_text').text(data[0].time)
|
$('#endtime_text').text(data[data.length - 1].time)
|
that.timePicker.setStartDate(data[0].time)
|
that.timePicker.setEndDate(data[data.length - 1].time)
|
|
that.historyMode.setFactorData(data, factorMode, true)
|
|
MapUtil.clear3D()
|
that._showSite("0d0000000001")
|
}, {}, 1)//默认获取分钟数据
|
},
|
getHistoryData: function (deviceCode, startTime, endTime, page, loading, type) {
|
var that = this
|
HttpService.getHistoryData(deviceCode, startTime, endTime, page, 100000, function (data) {
|
if (loading) {
|
DataUtil.toggleLoading()
|
}
|
if (data.length == 0) {
|
alert('未查询到数据')
|
return
|
}
|
var factorMode = DataUtil.refreshFactorMode(deviceCode)
|
if (loading) {
|
that.historyMode.setFactorData(data, factorMode, true)
|
} else {
|
that.historyMode.addFactorData(data, true)
|
}
|
that._showSite(deviceCode)
|
}, function (head) {
|
setTimeout(() => {
|
if (page < head.totalPage) {
|
that.getHistoryData(deviceCode, startTime, endTime, page + 1, false, type)
|
}
|
}, 500);
|
}, type)
|
}
|
}
|
