|
|
|
@ -51,7 +51,7 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="container panel"> |
|
|
|
<div class="toolbar day-toolbar" v-if="currentElement === 'singleWatervapor' || currentElement === 'aod-icot-wcot' |
|
|
|
<div class="toolbar day-toolbar" v-if="currentElement === 'extinction' || currentElement === 'singleWatervapor' || currentElement === 'aod-icot-wcot' |
|
|
|
|| currentElement === 'extinctionOptics' || currentElement === 'backscatter' |
|
|
|
|| currentElement === 'pm2_5' || currentElement === 'pblh' |
|
|
|
|| currentElement === 'cloudSol' || currentElement === 'cloudbaseheight' |
|
|
|
@ -72,7 +72,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="toolbar day-toolbar" v-if="currentElement === 'extinction' || currentElement=== 'lidarratio' || currentElement === 'watervapor'"> |
|
|
|
<div class="toolbar day-toolbar" v-if="currentElement=== 'lidarratio' || currentElement === 'watervapor'"> |
|
|
|
<div class="times"> |
|
|
|
<div class="time-item" v-for="(time, index) in times" :key="index" |
|
|
|
:class="{'active': currentTime === time.date, 'first-hour': time.day === '01'}"> |
|
|
|
@ -324,7 +324,7 @@ export default { |
|
|
|
// currentElement: 'PBLH', |
|
|
|
currentType: '边界层高度', |
|
|
|
// date: moment('2022-04-01 12:00:00').format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
date: moment().format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
date: moment().format('YYYY-MM-DD 00:00:00'), |
|
|
|
times: [], |
|
|
|
currentTime: null, |
|
|
|
downloadImgUrl: '/images/default-picture.png', |
|
|
|
@ -374,13 +374,11 @@ export default { |
|
|
|
label: '水汽' |
|
|
|
}], |
|
|
|
currentElement: 'layertype', |
|
|
|
timeLineFormat: 'hour' |
|
|
|
timeLineFormat: 'day' |
|
|
|
}) |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
// initTimeLine(); |
|
|
|
initTimeLineDay(); |
|
|
|
// setTitle(moment(options.date, 'YYYY-MM-DD')); |
|
|
|
initTimeLine(true); |
|
|
|
setTimeout(() => { |
|
|
|
initEcharts(options.currentTab) |
|
|
|
reloadChangeData(); |
|
|
|
@ -453,19 +451,23 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
const onTabClick = (name) => { |
|
|
|
changeTimeLineFormat(name); |
|
|
|
setAndChangeCurrentTime(name); |
|
|
|
options.currentTab = name; |
|
|
|
initEcharts(name) |
|
|
|
reloadChangeData() |
|
|
|
} |
|
|
|
|
|
|
|
const changeTimeLineFormat = (name) => { |
|
|
|
if (name === 'MWR'){ |
|
|
|
initTimeLineDay(); |
|
|
|
return; |
|
|
|
const setAndChangeCurrentTime = (name) => { |
|
|
|
options.index = 23; |
|
|
|
if ("MWR" === name){ |
|
|
|
options.date = moment().format('YYYY-MM-DD 00:00:00'); |
|
|
|
options.timeLineFormat = ""; |
|
|
|
}else{ |
|
|
|
options.date = moment().format('YYYY-MM-DD HH:00:00'); |
|
|
|
options.timeLineFormat = ""; |
|
|
|
} |
|
|
|
|
|
|
|
initTimeLine(); |
|
|
|
options.currentTime = options.date; |
|
|
|
} |
|
|
|
|
|
|
|
const reloadChangeData = () => { |
|
|
|
@ -547,25 +549,25 @@ export default { |
|
|
|
const elementChange = (code: string) => { |
|
|
|
switch (code) { |
|
|
|
case 'singleWatervapor' : |
|
|
|
// initTimeLine() |
|
|
|
initTimeLine() |
|
|
|
reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor); |
|
|
|
break; |
|
|
|
case 'aod-icot-wcot' : |
|
|
|
// initTimeLine() |
|
|
|
initTimeLine() |
|
|
|
reloadChartsRecognition('aod', drawAerosolCharts); |
|
|
|
reloadChartsRecognition('icot', drawIceCloudsCharts); |
|
|
|
reloadChartsRecognition('wcot', drawWaterCloud); |
|
|
|
break; |
|
|
|
case 'extinctionOptics' : |
|
|
|
// initTimeLine() |
|
|
|
initTimeLine() |
|
|
|
reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction); |
|
|
|
break; |
|
|
|
case 'backscatter' : |
|
|
|
// initTimeLine() |
|
|
|
initTimeLine() |
|
|
|
reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter); |
|
|
|
break; |
|
|
|
case 'pm2_5' : |
|
|
|
// initTimeLine() |
|
|
|
initTimeLine() |
|
|
|
reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5); |
|
|
|
reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10); |
|
|
|
break; |
|
|
|
@ -582,11 +584,11 @@ export default { |
|
|
|
reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol); |
|
|
|
break; |
|
|
|
case 'cloudbaseheight' : |
|
|
|
// initTimeLine() |
|
|
|
initTimeLine() |
|
|
|
reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts); |
|
|
|
break; |
|
|
|
case 'cloudtopheight' : |
|
|
|
// initTimeLine() |
|
|
|
initTimeLine() |
|
|
|
reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts); |
|
|
|
break; |
|
|
|
// case 'layertype' : |
|
|
|
@ -594,11 +596,12 @@ export default { |
|
|
|
// break; |
|
|
|
case 'extinction' : |
|
|
|
// initTimeLineDay() |
|
|
|
initTimeLine(true); |
|
|
|
reloadExtinctionBefore(); |
|
|
|
reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionAfter, true); |
|
|
|
reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionAfter, false, 12); |
|
|
|
break; |
|
|
|
case 'watervapor' : |
|
|
|
// initTimeLineDay() |
|
|
|
initTimeLineDay() |
|
|
|
reloadWatervaporBefore(); |
|
|
|
reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervaporAfter, true); |
|
|
|
break; |
|
|
|
@ -610,7 +613,7 @@ export default { |
|
|
|
const reloadWatervaporBefore = () => { |
|
|
|
options.loadingWatervaporBeforeStatus = true; |
|
|
|
let params = { |
|
|
|
date: moment(options.date).add(-1, 'd').format('YYYY-MM-DD'), |
|
|
|
date: moment(options.date).format('YYYY-MM-DD 00'), |
|
|
|
var: 'Vapor Mixing Ratio', |
|
|
|
locate: options.currentRegion |
|
|
|
} |
|
|
|
@ -636,7 +639,7 @@ export default { |
|
|
|
const reloadExtinctionBefore = () => { |
|
|
|
options.loadingExtinctionBeforeStatus = true; |
|
|
|
let params = { |
|
|
|
date: moment(options.date).add(-1, 'd').format('YYYY-MM-DD'), |
|
|
|
date: moment(options.date).format('YYYY-MM-DD HH'), |
|
|
|
var: 'MEXT', |
|
|
|
locate: options.currentRegion |
|
|
|
} |
|
|
|
@ -653,14 +656,19 @@ export default { |
|
|
|
|
|
|
|
let matrix = convertValueToBox(response.data); |
|
|
|
creates.extinctionBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", 'km/sr','质控前'); |
|
|
|
creates.extinctionBeforeDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); |
|
|
|
creates.extinctionBeforeDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); |
|
|
|
creates.extinctionBeforeDrawer.setColorChart(prepareExtinctionnColors()); |
|
|
|
creates.extinctionBeforeDrawer.draw(); |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const convertValueToBox = (data) => { |
|
|
|
let timeMoment = moment(options.date).set('h', 0).add(-1, 'd'); |
|
|
|
let timeMoment = moment(options.date).set('h', 1).add(-1, 'd'); |
|
|
|
console.log(options.currentElement) |
|
|
|
if (options.currentElement === 'extinction'){ |
|
|
|
timeMoment.add(12, 'h'); |
|
|
|
} |
|
|
|
|
|
|
|
let timeFormat = timeMoment.format("MM月DD日HH时"); |
|
|
|
|
|
|
|
let boxes = new Array<Array<Box>>(); |
|
|
|
@ -980,7 +988,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
const drawExtinctionAfter = (result: CustomeArray<any>) => { |
|
|
|
if (result.length != 24) return; |
|
|
|
if (result.length != 12) return; |
|
|
|
|
|
|
|
options.loadingExtinctionStatus = false; |
|
|
|
if (creates.extinctionDrawer != null) { |
|
|
|
@ -989,7 +997,7 @@ export default { |
|
|
|
|
|
|
|
let matrix = converCloudRecognition(801, result, 'extinction'); |
|
|
|
creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-after", 'km/sr','质控后'); |
|
|
|
creates.extinctionDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); |
|
|
|
creates.extinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); |
|
|
|
creates.extinctionDrawer.setColorChart(prepareExtinctionnColors()); |
|
|
|
creates.extinctionDrawer.draw(); |
|
|
|
} |
|
|
|
@ -1003,14 +1011,14 @@ export default { |
|
|
|
return colorChart; |
|
|
|
} |
|
|
|
|
|
|
|
const reloadCloudRecognition = (type: string, capacity: number, element: string, callback: any, isDay: boolean = false) => { |
|
|
|
const reloadCloudRecognition = (type: string, capacity: number, element: string, callback: any, isDay: boolean = false, length = 24) => { |
|
|
|
preprocessing(type); |
|
|
|
let result = new CustomeArray(callback); |
|
|
|
let time = moment(options.date); |
|
|
|
if (isDay) time.set('h', 23).add(-1, 'd'); |
|
|
|
|
|
|
|
options.timeArray = [] |
|
|
|
for (let index = 0; index < 24; index++) { |
|
|
|
for (let index = 0; index < length; index++) { |
|
|
|
reloadSingleCloudRecognition(capacity, time.clone().add(-index, 'h').format('M_D_H'), element, result); |
|
|
|
options.timeArray.push(time.clone().add(-index, 'h').format('HH')) |
|
|
|
} |
|
|
|
@ -1291,12 +1299,13 @@ export default { |
|
|
|
// } |
|
|
|
|
|
|
|
//初始化时间轴 |
|
|
|
const initTimeLine = () => { |
|
|
|
const initTimeLine = (isQuality: boolean = false) => { |
|
|
|
if (options.timeLineFormat == "hour") return; |
|
|
|
options.timeLineFormat = "hour"; |
|
|
|
options.times = []; |
|
|
|
options.currentTime = moment(options.date).format('YYYY-MM-DD HH'); |
|
|
|
let now = moment(options.date).add(1, 'h') |
|
|
|
let now = moment(options.date).add(1, 'h'); |
|
|
|
if (isQuality) now = now.set('h', 1); |
|
|
|
for (let i = 0; i < 24; i++) { |
|
|
|
options.times.push({ |
|
|
|
hour: now.add(-1, 'hour').format('HH'), |
|
|
|
|
