// (function($, FChart, Util) {
|
function HistoryMode(options) {
|
this.isEnable = false;
|
|
this.factorMode = 'type0'; //type0: 无人机和车载；type1：无人船
|
|
this.originData = []; // 原始数据
|
|
this.lineChart;
|
this.lineChartOption;
|
this.xAxis = [];
|
this.historyDatas = {
|
datas: [],
|
physicalQuantity: [],
|
}; //历史数据
|
this.lineChartFactorType = [0];
|
this.slider; // 折线图滑动模块
|
this.progress = 0;
|
this.pageSize = 200;
|
|
this.factorType = 0; //3d地图当前展示的监测因子id
|
this.factorName = 'NO2';
|
this.drawMode = 0; //绘制模式，0：自动模式，自动计算当前数据的范围，绘制合适的比例；1：手动模式，根据页面设置的绘图范围进行绘制
|
this.setCenter = true;
|
/**
|
* {
|
* factorId: Factor
|
* }
|
*/
|
this.factorDatas = new FactorDatas();
|
|
this.mapMaker = options.mapMaker;
|
}
|
|
HistoryMode.prototype = {
|
init: function () {
|
this.initLineChart();
|
//初始化图表滑动条
|
this.initSlider();
|
this.initTable();
|
// this.searchBox()
|
this.lastProgress = -1;
|
},
|
enable: function () {
|
this.isEnable = true;
|
this.uichange(true);
|
},
|
disable: function () {
|
this.isEnable = false;
|
this.uichange(false);
|
},
|
uichange: function (isShow) {
|
// var h = $('#btn_history')
|
if (isShow) {
|
this.setFactorMode('type0');
|
|
setTimeout(() => {
|
// h.removeClass()
|
// h.addClass('btn-selected')
|
|
$('#historybox').slideDown('fast');
|
$('#history_table_box').slideDown('fast');
|
$('#searchbox').slideDown('fast');
|
$('#history_animation').slideDown('fast');
|
|
$('#legend').css('left', '1px');
|
$('#legend').css('right', 'auto');
|
$('#rangeset').removeClass('map-range-set-2');
|
$('#rangeset').addClass('map-range-set');
|
|
$('#rangeset').show('fast');
|
$('#legend').show('fast');
|
|
$('.map-factor-selector').show('fast');
|
|
this.searchBox();
|
}, 500);
|
}
|
},
|
searchBox: function () {
|
var that = this;
|
|
$('.hMode').show();
|
|
var type = $('#select_device_type').val();
|
var tD = $('#select_device_code');
|
tD.empty();
|
var options2 = [];
|
switch (type) {
|
case '0a':
|
options2.push('0a0000000001');
|
options2.push('0a0000000002');
|
options2.push('0a0000000003');
|
break;
|
case '0b':
|
options2.push('0b0000000001');
|
options2.push('0b0000000002');
|
break;
|
case '0c':
|
options2.push('0c0000000001');
|
break;
|
default:
|
options2.push('0a0000000001');
|
options2.push('0a0000000002');
|
options2.push('0a0000000003');
|
break;
|
}
|
|
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();
|
|
DataUtil.toggleLoading();
|
that.getHistoryData(deviceCode, startTime, endTime, 1, true);
|
});
|
|
this.getRealtimeData();
|
},
|
getRealtimeData: function () {
|
var that = this;
|
DataUtil.toggleLoading();
|
HttpService.getRealtimeData('0a0000000001', 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);
|
timePicker.setStartDate(data[0].time);
|
timePicker.setEndDate(data[data.length - 1].time);
|
|
that.setFactorData(data, factorMode);
|
$('#historybox').slideDown('fast');
|
$('#history_table_box').slideDown('fast');
|
});
|
},
|
getHistoryData: function (deviceCode, startTime, endTime, page, loading) {
|
var that = this;
|
HttpService.getHistoryData(
|
deviceCode,
|
startTime,
|
endTime,
|
page,
|
10000,
|
function (data) {
|
if (loading) {
|
DataUtil.toggleLoading();
|
}
|
if (data.length == 0) {
|
alert('未查询到数据');
|
return;
|
}
|
var factorMode = DataUtil.refreshFactorMode(deviceCode);
|
var type = DataUtil.refreshVehicleType(deviceCode);
|
that.mapMaker.setVehicleType(type);
|
if (loading) {
|
that.setFactorMode(factorMode);
|
CheckBox.newRadioBox(
|
'factorbox',
|
'factorType',
|
Util.selectOptions2[that.factorMode],
|
['1'],
|
onCheckMap
|
);
|
that.setFactorData(data, factorMode);
|
} else {
|
that.addFactorData(data);
|
}
|
},
|
function (head) {
|
if (page < head.totalPage) {
|
// that.getHistoryData(deviceCode, startTime, endTime, page + 1, false)
|
}
|
}
|
);
|
},
|
setFactorType: function (factorType, factorMode, factorName) {
|
this.factorMode = factorMode;
|
this.factorType = factorType;
|
this.factorName = factorName;
|
this.factorDatas.refreshHeight(this.factorType + 1 + '');
|
this.refreshLegend(this.factorDatas);
|
this.mapMaker.setFactorType(factorType);
|
if (!this.mapMaker.runStatus()) {
|
this.drawMesh(false, this, this.factorDatas);
|
}
|
// 折线图选中对应因子
|
this.choseOneFactorLineChart(factorType);
|
// 表格选中对应因子
|
},
|
setFactorMode: function (factorMode) {
|
if (this.factorMode != factorMode) {
|
this.factorMode = factorMode;
|
this.initTable();
|
this.initLineChart();
|
}
|
},
|
//设置绘图范围
|
setRange: function (range) {
|
this.factorDatas.setRange(this.factorType + 1 + '', range);
|
this.refreshLegend(this.factorDatas);
|
this.drawMesh(false, this, this.factorDatas);
|
},
|
//重置为动态绘图范围（取当前数据中的最大最小值）
|
resetRange: function () {
|
this.factorDatas.resetRange(this.factorType + 1 + '');
|
this.refreshLegend(this.factorDatas);
|
this.drawMesh(false, this, this.factorDatas);
|
},
|
//标准绘图范围（以标准图例展示）
|
standardRange: function () {
|
this.factorDatas.standardRange(this.factorType + 1 + '');
|
this.refreshLegend(this.factorDatas);
|
this.drawMesh(false, this, this.factorDatas);
|
},
|
|
/********************************* 监测数据 - start ************************************/
|
// 设置当前数据集
|
setFactorData: function (dataList, factorMode, noMap) {
|
// this.setFactorMode(factorMode)
|
|
this.originData = dataList;
|
|
if (noMap != true) {
|
// 1.初始化数据结构
|
this.factorDatas.setData(
|
dataList,
|
this.drawMode,
|
true,
|
function () {
|
this.factorDatas.refreshHeight(this.factorType + 1 + '');
|
// 绘制3D图形
|
this.draw();
|
}.bind(this)
|
);
|
}
|
|
// 绘制折线图
|
this.setChartData(dataList);
|
this.refreshLineChartData();
|
|
// 绘制表格
|
this.refreshTable();
|
},
|
addFactorData: function (dataList, noMap) {
|
this.originData.push.apply(this.originData, dataList);
|
|
if (noMap != true) {
|
this.factorDatas.addData(
|
dataList,
|
this.drawMode,
|
true,
|
function () {
|
this.draw();
|
}.bind(this)
|
);
|
}
|
|
this.addChartData(dataList);
|
this.refreshLineChartData();
|
|
this.addToTable(dataList);
|
},
|
/********************************* 监测数据 - end ************************************/
|
|
/********************************* 地图图形绘制 - start ************************************/
|
draw: function () {
|
// var that = this
|
// MapUtil.convertFromGPS(this.factorDatas.lnglats_GPS, function(result) {
|
// var gd = that.factorDatas.lnglats_GD
|
// gd.push.apply(gd, result)
|
|
// var coor_GD = MapUtil.lngLatToGeodeticCoord(gd)
|
// var coor = that.factorDatas.coors_GD
|
// coor.push.apply(coor, coor_GD)
|
// })
|
// 3.绘制3d图形
|
this.refreshLegend(this.factorDatas);
|
this.drawMesh(false, this, this.factorDatas);
|
},
|
/********************************* 地图图形绘制 - end ************************************/
|
|
/********************************* 折线图 - start ************************************/
|
initLineChart: function (mode) {
|
// 1.初始化折线图
|
var div = document.getElementById('chart');
|
this.lineChart = echarts.init(div);
|
// 2.初始化监测因子复选框
|
$('#history_chart_factorbox').empty();
|
var m = mode == undefined ? this.factorMode : mode;
|
CheckBox.newCheckBox(
|
'history_chart_factorbox',
|
Util.selectOptions1[m],
|
['1'],
|
this.onCheckLineChart.bind(this)
|
);
|
// 3.创建初始折线图
|
this.drawLineChart();
|
},
|
// 复选框监测因子监听事件
|
onCheckLineChart: function (obj) {
|
var _factorType = parseInt(obj.value) - 1;
|
|
this.historyDatas.datas[_factorType].show = obj.checked;
|
this.historyDatas.physicalQuantity[_factorType].show = obj.checked;
|
|
if (obj.checked) {
|
this.lineChartFactorType.push(_factorType);
|
} else {
|
var i = this.lineChartFactorType.indexOf(_factorType);
|
if (i != -1) {
|
this.lineChartFactorType.splice(i, 1);
|
}
|
}
|
|
this.refreshLineChartData();
|
},
|
// 单选一个监测因子展示折线图
|
choseOneFactorLineChart(index) {
|
for (let i = 0; i < this.historyDatas.datas.length; i++) {
|
this.historyDatas.datas[i].show = false;
|
this.historyDatas.physicalQuantity[i].show = false;
|
}
|
this.historyDatas.datas[index].show = true;
|
this.historyDatas.physicalQuantity[index].show = true;
|
this.lineChartFactorType = [index];
|
CheckBox.refreshCheckBox(
|
'history_chart_factorbox',
|
this.lineChartFactorType
|
);
|
this.refreshLineChartData();
|
},
|
// 创建初始折线图
|
drawLineChart: function () {
|
this.lineChartOption = FChart.genLineChart(
|
this.lineChart,
|
this.xAxis,
|
[],
|
false
|
);
|
},
|
// 刷新折线图数据
|
refreshLineChartData: function () {
|
var series = this.historyDatas.datas;
|
this.lineChartOption = FChart.lineChartOnLegend(
|
this.lineChart,
|
this.xAxis,
|
series,
|
this.lineChartOption
|
);
|
},
|
//初始化图表滑动条
|
initSlider: function () {
|
$('#sliderParent').empty();
|
var option = {
|
handleSrc: './asset/mipmap/slider_handle.png',
|
isCustomText: false,
|
};
|
var that = this;
|
this.slider = $('#sliderParent').jackWeiSlider(option);
|
this.slider
|
.setProgress(0.0)
|
.setOnStartDragCallback(function () {
|
// console.log('start');
|
})
|
.setOnDragCallback(function (p) {
|
if (p != that.lastProgress) {
|
that.progress = p;
|
FChart.lineChartOnPage2({
|
chart: that.lineChart,
|
option: that.lineChartOption,
|
progress: p,
|
size: that.pageSize,
|
});
|
}
|
})
|
.setOnStopDragCallback(function () {
|
// console.log('stop');
|
});
|
},
|
// 初始化图标对象
|
setChartData: function (dataList) {
|
this.xAxis = [];
|
this.historyDatas.datas = [];
|
this.historyDatas.physicalQuantity = [];
|
|
this.addChartData(dataList);
|
},
|
addChartData: function (dataList) {
|
dataList.forEach((d) => {
|
// 数据时间
|
this.xAxis.push(d.time.split(' ')[1]);
|
|
for (let i = 0; i < d.values.length; i++) {
|
const v = d.values[i];
|
if (this.historyDatas.datas.length < i + 1) {
|
this.historyDatas.datas.push({
|
name: Util.factorName[v.factorName],
|
type: 'line',
|
data: [v.factorData],
|
showAllSymbol: true,
|
animationDelay: function (idx) {
|
return idx * 10;
|
},
|
show: this.lineChartFactorType.indexOf(i) != -1,
|
});
|
this.historyDatas.physicalQuantity.push({
|
name: Util.factorName[v.factorName] + '-物理量',
|
type: 'line',
|
data: [v.physicalQuantity],
|
showAllSymbol: true,
|
show: this.lineChartFactorType.indexOf(i) != -1,
|
});
|
} else {
|
this.historyDatas.datas[i].data.push(v.factorData);
|
this.historyDatas.physicalQuantity[i].data.push(v.physicalQuantity);
|
}
|
}
|
});
|
},
|
//
|
setPage: function (perPage) {
|
this.pageSize = perPage;
|
FChart.lineChartOnPage2({
|
chart: this.lineChart,
|
option: this.lineChartOption,
|
progress: this.progress,
|
size: this.pageSize,
|
});
|
},
|
/********************************* 折线图 - end ************************************/
|
|
/********************************* 表格 - start ************************************/
|
initTable: function (mode) {
|
var m = mode == undefined ? this.factorMode : mode;
|
CheckBox.newCheckBox(
|
'history_table_factorbox',
|
Util.selectOptions3[m],
|
['1', '2', '3'],
|
this.onCheckTable.bind(this)
|
);
|
},
|
onCheckTable: function (obj) {
|
Table.onChangeTh(obj.value, obj.checked);
|
DataSummary.onChangeFactor('history_table_summary', obj.value, obj.checked);
|
},
|
refreshTable: function () {
|
DataSummary.summary('history_table_summary', this.factorDatas);
|
Table.table(
|
'history_table',
|
this.originData,
|
this.factorMode,
|
(factor, index) => {
|
MapUtil.convertFromGPS([[factor.lng, factor.lat]], (result) => {
|
var windDir = 0;
|
if (factor.values[16] != undefined) {
|
windDir = factor.values[16].factorData;
|
}
|
var windSpeed = 1;
|
if (factor.values[15] != undefined) {
|
windSpeed = factor.values[15].factorData;
|
}
|
// 1. 绘制扇形区域
|
MapUtil.drawSector3(result[0], windDir, windSpeed);
|
|
// 2. 绘制对话框
|
DialogUtil.openNewWindow2(factor, MapUtil._map, result[0], () => {
|
// 移除扇形区域
|
// MapUtil.clearSector3();
|
});
|
// 3. 趋势图跳转定位
|
var f = this.factorDatas.factor[this.factorType + 1 + ''];
|
const progress = FChart.locate(
|
this.lineChart,
|
this.lineChartOption,
|
index,
|
f.factorName
|
);
|
this.slider.setProgress(progress);
|
});
|
},
|
undefined,
|
['1', '2', '3']
|
);
|
$('#table_data_count').text(
|
'数据量：' + this.originData.length + '个，单页：200个'
|
);
|
},
|
addToTable: function (data) {
|
var count = Table.onNewData(data, true);
|
$('#table_data_count').text('数据量：' + count + '个，单页：200个');
|
},
|
/********************************* 表格 - end ************************************/
|
|
/********************************* 历史轨迹动画 - start ************************************/
|
newTimeTask: function (speed, restart) {
|
this.mapMaker.setDynamicSpeed(false); //关闭动态绘制速度调整
|
this.mapMaker.moveAnimation(this.factorDatas, this.factorType);
|
},
|
startAnimation: function (speed) {
|
this.changeSpeed(speed);
|
if (!this.mapMaker.runStatus()) {
|
this.newTimeTask();
|
} else {
|
this.mapMaker.start();
|
}
|
},
|
changeSpeed: function (speed) {
|
this.mapMaker.changeSpeed(speed);
|
},
|
pauseAnimation: function () {
|
this.mapMaker.pause();
|
},
|
stopAnimation: function (clear) {
|
this.mapMaker.stop();
|
},
|
setOnStopAnimationCallback: function (callback) {
|
this.mapMaker.setOnStopCallback(
|
function () {
|
var f = this.factorDatas.factor[this.factorType + 1 + ''];
|
MapUtil.drawMesh2(this.factorDatas, f);
|
callback();
|
}.bind(this)
|
);
|
},
|
/********************************* 历史轨迹动画 - end ************************************/
|
|
refreshLegend: function (_factorDatas) {
|
var f = _factorDatas.factor[this.factorType + 1 + ''];
|
$('#in_min').val(f.min.toFixed(1));
|
$('#in_max').val(f.max.toFixed(1));
|
// DataUtil.refreshLegend(f.min, f.max, true, this.factorType)
|
Legend.refreshLegend(
|
'legend_content',
|
f.factorName,
|
true,
|
f.legendType,
|
f.min,
|
f.max
|
);
|
},
|
drawMesh: function (merge, that, _factorDatas) {
|
// 1.获取当前选择的监测因子的数据
|
var f = _factorDatas.factor[that.factorType + 1 + ''];
|
// 2.绘制3d图形
|
MapUtil.drawMesh_Test(_factorDatas, f, merge, that.setCenter);
|
// MapUtil.drawLine(_factorDatas.lnglats_GD);
|
// MapUtil.drawMarker(
|
// _factorDatas,
|
// f,
|
// {
|
// chart: this.lineChart,
|
// option: this.lineChartOption,
|
// },
|
// (progress) => {
|
// this.slider.setProgress(progress);
|
// }
|
// );
|
MapUtil.drawMassMarks(
|
_factorDatas,
|
f,
|
{
|
chart: this.lineChart,
|
option: this.lineChartOption,
|
},
|
(progress) => {
|
this.slider.setProgress(progress);
|
}
|
);
|
|
// polyline.on('click', function (event) {
|
// console.log(event);
|
// });
|
// that.setCenter = false
|
},
|
drawSector: function (params) {},
|
};
|
|
$.fn.historyMode = function (options) {
|
return new HistoryMode(options);
|
};
|
// })(jQuery, FChart, Util);
|
