;
|
// (function($, document, CheckBox, FChart, echarts, HttpService, DataUtil, MapUtil, Util) {
|
function RealTimeMode(options) {
|
this.inited = false
|
this.isEnable = false
|
|
this.factorMode = 'type0' //type0: 无人机和车载；type1：无人船
|
|
this.fetchingTask = undefined
|
this.isFetching = false //记录本次获取实时数据操作是否完成
|
this.lastestTime = '' //当前获取的数据的最新时间
|
this.deviceCode = '0a0000000001' // 当前展示的设备编号
|
this.originData = [] // 原始数据
|
|
this.selectedFactor = ["1"] //实时仪表盘默认展示的监测因子
|
this.lastestData = new Object() // 最新的一个实时数据
|
this.chartOptions = new Map() //实时仪表盘的配置
|
|
this.lineChart
|
this.lineChartOption
|
this.xAxis = []
|
this.realTimeDatas = {
|
datas: [],
|
physicalQuantity: []
|
} //实时数据
|
|
this.setCenter = true
|
this.factorType = 0 //3d地图当前展示的监测因子id
|
this.factorName = 'NO2'
|
this.drawMode = 0 //绘制模式，0：自动模式，自动计算当前数据的范围，绘制合适的比例；1：手动模式，根据页面设置的绘图范围进行绘制
|
/**
|
* {
|
* factorId: Factor
|
* }
|
*/
|
this.factorDatas = new FactorDatas()
|
|
this.mapMaker = options.mapMaker
|
|
}
|
|
RealTimeMode.prototype = {
|
init: function() {
|
this.initChart()
|
this.initLineChart()
|
this.initDeviceType()
|
var that = this
|
$('#realtime_device_code').on('change', function () {
|
that.deviceCode = $(this).val()
|
|
// that.mapMaker.stop()
|
|
// that.initChart()
|
// that.initCheckBox()
|
|
// that.fetchingData()
|
})
|
$('#btn_r_search').on('click', function () {
|
|
that.mapMaker.stop()
|
MapUtil
|
|
that.initChart()
|
that.initCheckBox()
|
|
that.fetchingData()
|
})
|
},
|
enable: function() {
|
this.isEnable = true
|
this.uichange(true)
|
// this.mapMaker.changeSpeed(1)
|
this.mapMaker.setDynamicSpeed(true, 4)//打开动态绘制速度调整，并设置两个坐标点之间的时间间隔
|
MapUtil.clear3D()
|
if (!this.inited) {
|
this.fetchingData()
|
this.inited = true
|
} else {
|
//todo 1.将原来保存的数据重新绘制
|
//todo 2.重新刷新界面上的绘制范围
|
}
|
},
|
disable: function() {
|
this.isEnable = false
|
this.uichange(false)
|
this.mapMaker.stop()
|
},
|
uichange: function(isShow) {
|
// var r = $('#btn_realtime')
|
// r.addClass('btn-unselected')
|
if (isShow) {
|
setTimeout(() => {
|
// r.removeClass()
|
// r.addClass('btn-selected margin-left-8')
|
|
$('#realtimebox').slideDown("fast")
|
$('#realtimebox2').slideDown("fast")
|
// $('#backgroundbox').slideDown("fast")
|
$('#rmode_type').slideDown("fast")
|
|
$('#legend').css('right', '0px')
|
$('#legend').css('left', 'auto')
|
$('#rangeset').removeClass('map-range-set')
|
$('#rangeset').addClass('map-range-set-2')
|
|
$('#rangeset').slideUp('fast')
|
$('#legend').show("fast")
|
|
$('.map-factor-selector').show("fast")
|
}, 500)
|
} else {
|
// DataUtil.hideAll()
|
}
|
},
|
//设置绘图范围
|
setRange: function(range) {
|
this.drawMode = 1
|
this.factorDatas.setRange(this.factorType + 1 + "", range)
|
this.drawMesh(false, this)
|
},
|
resetRange: function() {
|
this.drawMode = 0
|
this.factorDatas.resetRange(this.factorType + 1 + "")
|
this.drawMesh(false, this)
|
},
|
standardRange: function() {
|
this.factorDatas.standardRange(this.factorType + 1 + "")
|
this.drawMesh(false, this)
|
},
|
//设置3d地图当前展示的监测因子
|
setFactorType: function(factorType, factorMode, factorName) {
|
this.factorMode = factorMode
|
this.factorType = factorType
|
this.factorName = factorName
|
this.mapMaker.setFactorType(factorType)
|
this.refreshLegend(this.factorDatas, true)
|
if (!this.mapMaker.runStatus()) {
|
this.drawMesh(false, this)
|
}
|
},
|
/********************************* 设备类型选择 - start ************************************/
|
initDeviceType: function() {
|
$('#rmode_type_box').empty()
|
CheckBox.newRadioBox('rmode_type_box', 'deviceType', Util.deviceType, ['0a'], this.onChangeType, this)
|
},
|
//切换类型。目前一共有两组数据，车载和无人机为一组，无人船为一组，具体监测因子见 util.js
|
onChangeType: function(obj, that) {
|
// $(obj).attr('checked', true)
|
var type = obj.value.split(',')[0]
|
var tD = $('#realtime_device_code')
|
tD.empty()
|
var options2 = []
|
switch (type) {
|
case "0a":
|
that.factorMode = "type0"
|
options2.push('0a0000000001')
|
options2.push('0a0000000002')
|
case "0b":
|
that.factorMode = "type0"
|
options2.push('0b0000000001')
|
options2.push('0b0000000002')
|
break;
|
case "0c":
|
that.factorMode = "type1"
|
options2.push('0c0000000001')
|
break;
|
default:
|
that.factorMode = "type0"
|
options2.push('0a0000000001')
|
options2.push('0a0000000002')
|
break;
|
}
|
options2.forEach(element => {
|
var op = $('<option></option>')
|
op.text(element)
|
tD.append(op)
|
});
|
that.deviceCode = tD.val()
|
},
|
/********************************* 设备类型选择 - end ************************************/
|
/********************************* 实时数据获取 - start ************************************/
|
fetchInit: function() {
|
this.isFirstFetch = true
|
this.originData = []
|
this.xAxis = []
|
this.realTimeDatas = {
|
datas: [],
|
physicalQuantity: []
|
}
|
this.factorDatas.clearData()
|
},
|
fetchingData: function() {
|
console.log('deviceCode: ' + this.deviceCode);
|
this.fetchInit()
|
var that = this
|
// 先获取最新的100个数据作为初始数据进行图表的绘制
|
DataUtil.toggleLoading()
|
HttpService.getRealtimeData(that.deviceCode, 100, function(datas) {
|
// HttpService.getHistoryData(that.deviceCode, "2021-11-01 10:00:00", "2021-11-01 10:00:20", 1, 100, function(datas) {
|
DataUtil.toggleLoading()
|
if (datas.length == 0) {
|
that.lastestTime = '----/--/-- --:--:--'
|
} else {
|
var type = DataUtil.refreshVehicleType(that.deviceCode)
|
that.mapMaker.setVehicleType(type)
|
|
// 更新最新的数据时间
|
that.lastestTime = datas[datas.length - 1].time
|
// datas.forEach(d => {
|
that.onOneData(datas, that)
|
// });
|
that.onFetchDataDone(that)
|
}
|
})
|
|
if (that.fetchingTask != undefined) {
|
clearInterval(that.fetchingTask)
|
that.isFetching = false
|
}
|
|
var debugCount = 0
|
// 开始定时获取最新的数据
|
that.fetchingTask = setInterval(() => {
|
|
if (!that.isEnable || that.isFetching) {
|
console.log("disEnable");
|
return
|
}
|
var perPage = 3
|
if (debugCount == 3) {
|
perPage = 50
|
debugCount = 0
|
}
|
|
that.isFetching = true
|
HttpService.getNextData(that.deviceCode, that.lastestTime, perPage, function(datas) {
|
console.log(new Date());
|
if (datas.length == 0) {
|
that.isFetching = false
|
return
|
}
|
// 更新最新的数据时间
|
that.lastestTime = datas[datas.length - 1].time
|
// datas.forEach(d => {
|
that.onOneData(datas, that)
|
// });
|
that.onFetchDataDone(that)
|
|
that.isFetching = false
|
})
|
|
debugCount++
|
}, 10000);
|
},
|
onOneData: function(data, that) {
|
if (data.length == 0) {
|
return
|
}
|
if (data[0].lng == 0) {
|
return
|
}
|
that.originData.push.apply(that.originData, data)
|
that.onLineChartOneData(data, that)
|
that.onMapOneData(data, that)
|
},
|
onFetchDataDone: function(that) {
|
// 根据当前绘图范围统一计算所有点的高度
|
// for (const k in that.factorDatas.factor) {
|
// that.factorDatas.factor[k].getHeight()
|
// }
|
// 刷新仪表盘数据
|
that.refreshChartData(that)
|
// 刷新折线图数据
|
that.refreshLineChart(true, that)
|
// 刷新3d地图
|
// that.drawMesh(false, that)
|
},
|
/********************************* 实时数据获取 - end ************************************/
|
|
/********************************* 实时仪表盘区域 - start ************************************/
|
initChart: function() {
|
// 1.初始化监测因子复选框
|
$('#realtime_chart_factorbox').empty()
|
CheckBox.newCheckBox('realtime_chart_factorbox', Util.selectOptions3[this.factorMode], this.selectedFactor, this.onCheckChart, this)
|
},
|
// 监测因子复选框点击事件监听
|
onCheckChart: function(obj, that) {
|
var factorType = obj.value
|
that.refreshFactors(factorType, that)
|
},
|
// 刷新监测因子选择记录
|
refreshFactors: function(factorType, that) {
|
var index = that.selectedFactor.indexOf(factorType)
|
if (index == -1) {
|
that.selectedFactor.push(factorType)
|
} else {
|
that.selectedFactor.splice(index, 1)
|
}
|
that.refreshChart(that.selectedFactor, that)
|
},
|
// 根据选择的监测因子id显示或隐藏仪表盘
|
refreshChart: function(factorIdList, that) {
|
var datas = []
|
that.lastestData.values.forEach(f => {
|
if (factorIdList.indexOf(f.factorId) != -1) {
|
datas.push(f)
|
}
|
});
|
|
var chartDiv = $('#realtime_chart')
|
var needHideCharts = []
|
var a = chartDiv.children()
|
for (let i = 0; i < a.length; i++) {
|
const d = a[i];
|
needHideCharts.push(d.id)
|
}
|
|
datas.forEach(e => {
|
var chartId = "realtime_chart_" + e.factorId
|
|
var index = needHideCharts.indexOf(chartId)
|
if (index != -1) {
|
needHideCharts.splice(index, 1)
|
}
|
|
if (document.getElementById(chartId)) {
|
$('#' + chartId).fadeIn('fast')
|
} else {
|
var div = document.createElement("div")
|
div.id = chartId
|
div.style.height = '280px';
|
div.style.width = '260px';
|
chartDiv.append(div)
|
|
var gauge = echarts.init(div)
|
var option = FChart.genGauge(gauge, e.factorName + '\n(μg/m³)', e.factorData)
|
this.chartOptions.set(e.factorId, [gauge, option])
|
}
|
});
|
|
needHideCharts.forEach(e => {
|
$('#' + e).fadeOut('fast')
|
});
|
},
|
// 刷新仪表盘数据
|
refreshChartData: function(that) {
|
// console.log("newData");
|
if (!that.originData || that.originData.length == 0) return
|
var data = that.originData[that.originData.length - 1].values
|
$('#realtime_temp').text("温度：" + data[7].factorData.toFixed(2) + "℃")
|
$('#realtime_hum').text("湿度：" + data[8].factorData.toFixed(2) + "%")
|
$('#realtime_v').text("车速：" + data[13].factorData.toFixed(2) + "km/h")
|
$('#realtime_wind_direction').text("风向：" + Util.windDir(data[16].factorData))
|
$('#realtime_wind_speed').text("风速：" + data[15].factorData.toFixed(2) + "m/s")
|
$('#realtime_time').text("采样时间：" + data[14].statusList[0])
|
|
var isFirst = that.lastestData.values == undefined
|
that.lastestData['values'] = data
|
if (isFirst) {
|
that.refreshChart(that.selectedFactor, that)
|
}
|
|
for (const e of data) {
|
var o = that.chartOptions.get(e.factorId)
|
if (o != undefined) {
|
o[1].series[0].data[0].value = e.factorData;
|
o[0].setOption(o[1], true);
|
}
|
}
|
},
|
/********************************* 实时仪表盘区域 - end ************************************/
|
|
/********************************* 实时折线图区域 - start ************************************/
|
initLineChart: function() {
|
// 1.初始化折线图
|
var div = document.getElementById('chart_2')
|
$('#chart_2').empty()
|
this.lineChart = echarts.init(div)
|
// 2.初始化监测因子复选框
|
this.initCheckBox()
|
// 3.创建初始折线图
|
this.drawLineChart(undefined, undefined, this)
|
},
|
initCheckBox: function() {
|
$('#realtime_chart_2_factorbox').empty()
|
CheckBox.newCheckBox('realtime_chart_2_factorbox', Util.selectOptions3[this.factorMode], ['1'], this.onCheckLineChart, this)
|
},
|
// 复选框监测因子监听事件
|
onCheckLineChart: function(obj, that) {
|
var _factorType = parseInt(obj.value) - 1
|
|
that.realTimeDatas.datas[_factorType].show = obj.checked
|
that.realTimeDatas.physicalQuantity[_factorType].show = obj.checked
|
|
var series = that.realTimeDatas.datas
|
that.lineChartOption = FChart.lineChartOnLegend(that.lineChart, that.xAxis, series, that.lineChartOption)
|
},
|
// 格式化单个数据
|
onLineChartOneData: function(dataList, that) {
|
dataList.forEach(data => {
|
that.xAxis.push(data.time.split(" ")[1])
|
for (let i = 0; i < data.values.length; i++) {
|
var v = data.values[i]
|
if (that.realTimeDatas.datas.length < i + 1) {
|
that.realTimeDatas.datas.push({
|
name: Util.factorName[v.factorName],
|
type: 'line',
|
data: [v.factorData],
|
showAllSymbol: true,
|
animationDelay: function(idx) {
|
return idx * 10;
|
},
|
show: i == 0
|
})
|
that.realTimeDatas.physicalQuantity.push({
|
name: Util.factorName[v.factorName] + '-物理量',
|
type: 'line',
|
data: [v.physicalQuantity],
|
showAllSymbol: true,
|
show: i == 0
|
})
|
} else {
|
that.realTimeDatas.datas[i].data.push(v.factorData)
|
that.realTimeDatas.physicalQuantity[i].data.push(v.physicalQuantity)
|
}
|
};
|
});
|
},
|
// 创建初始折线图
|
drawLineChart: function(data, merge, that) {
|
that.lineChartOption = FChart.genLineChart(that.lineChart, that.xAxis, [], false)
|
},
|
refreshLineChart: function(merge, that) {
|
if (merge) {
|
var series = that.realTimeDatas.datas
|
that.lineChartOption = FChart.lineChartOnLegend(that.lineChart, that.xAxis, series, that.lineChartOption, 100, 100)
|
} else {
|
//x坐标
|
that.xAxis = []
|
//y轴数据集
|
that.realTimeDatas.datas = []
|
that.realTimeDatas.physicalQuantity = []
|
|
that.drawLineChart(undefined, merge, that)
|
}
|
},
|
/********************************* 实时折线图区域 - end ************************************/
|
|
/********************************* 实时3d曲线图区域 - start ************************************/
|
onMapOneData: function(dataList, that) {
|
var startIndex = that.factorDatas.length() - 1
|
if (that.isFirstFetch) {
|
startIndex = dataList.length - 2
|
that.isFirstFetch = false
|
}
|
startIndex = startIndex < 0 ? 0 : startIndex
|
that.factorDatas.addData(dataList, that.drawMode, true, function () {
|
that.refreshLegend(that.factorDatas)
|
|
that.mapMaker.moveAnimation(that.factorDatas, that.factorType, startIndex)
|
})
|
|
// var gps = []
|
// dataList.forEach(data => {
|
// gps.push([data.lng, data.lat])
|
// });
|
|
// MapUtil.convertFromGPS(gps, function(result) {
|
|
// })
|
},
|
refreshLegend: function(_factorDatas, animation) {
|
var f = _factorDatas.factor[this.factorType + 1 + ""]
|
$('#in_min').val(f.min.toFixed(1))
|
$('#in_max').val(f.max.toFixed(1))
|
Legend.refreshLegend('legend_content', f.factorName, animation == true, f.legendType, f.min, f.max)
|
},
|
drawMesh: function(merge, that) {
|
// 1.获取当前选择的监测因子的数据
|
var f = that.factorDatas.factor[that.factorType + 1 + ""]
|
// 3.绘制3d图形
|
MapUtil.drawMesh_Test(that.factorDatas.lnglats_GD, that.factorDatas.coors_GD, f.heights, f.colors, f.bottomColor, merge, that.setCenter)
|
|
// that.setCenter = false
|
},
|
/********************************* 实时3d曲线图区域 - end ************************************/
|
}
|
|
$.fn.realTimeMode = function(options) {
|
return new RealTimeMode(options);
|
}
|
// })(jQuery, document, CheckBox, FChart, echarts, HttpService, DataUtil, MapUtil, Util);
|
