|
|
@ -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'}"> |
|
|
@ -224,7 +224,7 @@ |
|
|
|
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement === 'extinction'"> |
|
|
|
<div class="picture special-picture"> |
|
|
|
<div v-loading="loadingExtinctionStatus" |
|
|
|
<div v-loading="loadingExtinctionBeforeStatus" |
|
|
|
style="width: 100%;" |
|
|
|
custom-class="loading" |
|
|
|
element-loading-text="加载中"> |
|
|
@ -243,7 +243,7 @@ |
|
|
|
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement === 'watervapor'"> |
|
|
|
<div class="picture special-picture"> |
|
|
|
<div v-loading="loadingWaterVaporStatus" |
|
|
|
<div v-loading="loadingWatervaporBeforeStatus" |
|
|
|
style="width: 100%" |
|
|
|
element-loading-text="加载中"> |
|
|
|
<canvas id='watervapor_chart-before'></canvas> |
|
|
@ -280,6 +280,9 @@ export default { |
|
|
|
name: 'RamanLidar', |
|
|
|
setup() { |
|
|
|
let timer = null; |
|
|
|
const quailtyTimes = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", |
|
|
|
"14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]; |
|
|
|
|
|
|
|
let creates: { |
|
|
|
boundaryLayerHeight: HighChartCreate |
|
|
|
cloudsHeight: HighChartCreate |
|
|
@ -290,6 +293,7 @@ export default { |
|
|
|
extinctionBeforeDrawer: HeatMapDrawer, |
|
|
|
extinctionDrawer: HeatMapDrawer, |
|
|
|
watervaporDrawer: HeatMapDrawer, |
|
|
|
watervaporBeforeDrawer: HeatMapDrawer, |
|
|
|
opticsExtinctionDrawer: HeatMapDrawer, |
|
|
|
singleWatervaporDrawer: HeatMapDrawer, |
|
|
|
cloudSolDrawer: HeatMapDrawer, |
|
|
@ -306,6 +310,7 @@ export default { |
|
|
|
extinctionDrawer: null, |
|
|
|
extinctionBeforeDrawer: null, |
|
|
|
watervaporDrawer: null, |
|
|
|
watervaporBeforeDrawer: null, |
|
|
|
singleWatervaporDrawer: null, |
|
|
|
opticsExtinctionDrawer: null, |
|
|
|
cloudSolDrawer: null, |
|
|
@ -319,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', |
|
|
@ -342,6 +347,8 @@ export default { |
|
|
|
loadingCloudSolStatus: false, |
|
|
|
loadingCloudRecognitionStatus: false, |
|
|
|
loadingExtinctionStatus: false, |
|
|
|
loadingExtinctionBeforeStatus: false, |
|
|
|
loadingWatervaporBeforeStatus: false, |
|
|
|
loadingWaterVaporStatus: false, |
|
|
|
loadingBackscatterStatus: false, |
|
|
|
loadingLidarRatioStatus: false, |
|
|
@ -367,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(); |
|
|
@ -446,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 = () => { |
|
|
@ -540,21 +549,21 @@ 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' : |
|
|
@ -575,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' : |
|
|
@ -587,33 +596,66 @@ export default { |
|
|
|
// break; |
|
|
|
case 'extinction' : |
|
|
|
// initTimeLineDay() |
|
|
|
initTimeLine(true); |
|
|
|
reloadExtinctionBefore(); |
|
|
|
reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionAfter); |
|
|
|
reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionAfter, false, 12); |
|
|
|
break; |
|
|
|
case 'watervapor' : |
|
|
|
// initTimeLineDay() |
|
|
|
reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervaporBefore); |
|
|
|
reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervaporAfter); |
|
|
|
initTimeLineDay() |
|
|
|
reloadWatervaporBefore(); |
|
|
|
reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervaporAfter, true); |
|
|
|
break; |
|
|
|
default: |
|
|
|
throw new Error("无效的type类型"); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const reloadWatervaporBefore = () => { |
|
|
|
options.loadingWatervaporBeforeStatus = true; |
|
|
|
let params = { |
|
|
|
date: moment(options.date).format('YYYY-MM-DD 00'), |
|
|
|
var: 'Vapor Mixing Ratio', |
|
|
|
locate: options.currentRegion |
|
|
|
} |
|
|
|
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => { |
|
|
|
options.loadingWatervaporBeforeStatus = false; |
|
|
|
if (response.error != 0){ |
|
|
|
console.log("未找到质控前数据文件"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
if (creates.watervaporBeforeDrawer != null) { |
|
|
|
creates.watervaporBeforeDrawer.close(); |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = convertValueToBox(response.data); |
|
|
|
creates.watervaporBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-before", 'g/kg','质控前'); |
|
|
|
creates.watervaporBeforeDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true)); |
|
|
|
creates.watervaporBeforeDrawer.setColorChart(prepareWatervaporColors()); |
|
|
|
creates.watervaporBeforeDrawer.draw(); |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const reloadExtinctionBefore = () => { |
|
|
|
options.loadingExtinctionBeforeStatus = true; |
|
|
|
let params = { |
|
|
|
date: moment(options.date).format('YYYY-MM-DD'), |
|
|
|
date: moment(options.date).format('YYYY-MM-DD HH'), |
|
|
|
var: 'MEXT', |
|
|
|
locate: options.currentRegion |
|
|
|
} |
|
|
|
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => { |
|
|
|
options.loadingExtinctionBeforeStatus = false; |
|
|
|
if (response.error != 0){ |
|
|
|
console.log("未找到质控前数据文件"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
if (creates.extinctionBeforeDrawer != null) { |
|
|
|
creates.extinctionBeforeDrawer.close(); |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = convertValueToBox(response.data); |
|
|
|
creates.extinctionBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", 'km/sr','质控后'); |
|
|
|
creates.extinctionBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", 'km/sr','质控前'); |
|
|
|
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(); |
|
|
@ -621,7 +663,12 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
const convertValueToBox = (data) => { |
|
|
|
let timeMoment = moment(options.date).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>>(); |
|
|
@ -634,7 +681,7 @@ export default { |
|
|
|
|
|
|
|
let rows = new Array<Box>(r.length); |
|
|
|
for (let h = 0, len = r.length; h < len; h++) { |
|
|
|
rows[h] = new Box(index - 1, h, 0, 0, r[h], h * 15, timeFormat, "米"); |
|
|
|
rows[h] = new Box(index - 1, h, 0, 0, parseFloat(r[h]), h * 15, timeFormat, "米"); |
|
|
|
} |
|
|
|
index++; |
|
|
|
boxes.push(rows); |
|
|
@ -918,21 +965,6 @@ export default { |
|
|
|
creates.singleWatervaporDrawer.draw(); |
|
|
|
} |
|
|
|
|
|
|
|
const drawWatervaporBefore = (result: CustomeArray<any>) => { |
|
|
|
if (result.length != 24) return; |
|
|
|
|
|
|
|
options.loadingWaterVaporStatus = false; |
|
|
|
if (creates.watervaporDrawer != null) { |
|
|
|
creates.watervaporDrawer.close(); |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = converCloudRecognition(101, result, 'watervapor'); |
|
|
|
creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-before",'g/kg', '质控前'); |
|
|
|
creates.watervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true)); |
|
|
|
creates.watervaporDrawer.setColorChart(prepareWatervaporColors()); |
|
|
|
creates.watervaporDrawer.draw(); |
|
|
|
} |
|
|
|
|
|
|
|
const drawWatervaporAfter = (result: CustomeArray<any>) => { |
|
|
|
if (result.length != 24) return; |
|
|
|
|
|
|
@ -942,8 +974,8 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = converCloudRecognition(101, result, 'watervapor'); |
|
|
|
creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-after",'g/kg', '质控后'); |
|
|
|
creates.watervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true)); |
|
|
|
creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-after",'g/kg', '质控前'); |
|
|
|
creates.watervaporDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true)); |
|
|
|
creates.watervaporDrawer.setColorChart(prepareWatervaporColors()); |
|
|
|
creates.watervaporDrawer.draw(); |
|
|
|
} |
|
|
@ -956,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) { |
|
|
@ -979,12 +1011,14 @@ export default { |
|
|
|
return colorChart; |
|
|
|
} |
|
|
|
|
|
|
|
const reloadCloudRecognition = (type: string, capacity: number, element: string, callback: any) => { |
|
|
|
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')) |
|
|
|
} |
|
|
@ -1265,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'), |
|
|
|