|
|
|
@ -75,13 +75,13 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentTab === 'optical-property'"> |
|
|
|
<div class="picture"> |
|
|
|
<h2 class="title">激光雷达比</h2> |
|
|
|
<div id="LidarRatio" |
|
|
|
style="width: 650px;height: 450px" |
|
|
|
v-loading="loadingLidarRatioStatus" |
|
|
|
<div class="picture special-picture"> |
|
|
|
<h2 class="title">后向散射系数</h2> |
|
|
|
<div v-loading="loadingBackscatterStatus" |
|
|
|
style="width: 100%;" |
|
|
|
custom-class="loading" |
|
|
|
element-loading-text="加载中"> |
|
|
|
<canvas id='backscatter_chart'></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -126,16 +126,17 @@ |
|
|
|
v-loading="loadingBoundaryLayerHeightStatus" custom-class="loading" element-loading-text="加载中"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="picture special-picture"> |
|
|
|
<h2 class="title">后向散射系数</h2> |
|
|
|
<div v-loading="loadingBackscatterStatus" |
|
|
|
style="width: 100%;" |
|
|
|
<div class="picture"> |
|
|
|
<h2 class="title">激光雷达比</h2> |
|
|
|
<div id="LidarRatio" |
|
|
|
style="width: 650px;height: 450px" |
|
|
|
v-loading="loadingLidarRatioStatus" |
|
|
|
custom-class="loading" |
|
|
|
element-loading-text="加载中"> |
|
|
|
<canvas id='backscatter_chart'></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
@ -197,7 +198,7 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
|
import {onMounted, reactive, toRefs} from 'vue'; |
|
|
|
import {onMounted, reactive, toRefs, watch} from 'vue'; |
|
|
|
import moment from "moment"; |
|
|
|
import {RamanLidarConfig} from '../uilts/Config'; |
|
|
|
import {post} from '../uilts/axios'; |
|
|
|
@ -246,13 +247,13 @@ export default { |
|
|
|
backscatterDrawer: null |
|
|
|
} |
|
|
|
let options = reactive({ |
|
|
|
currentTab: 'MWR', |
|
|
|
// currentTab: 'MWR', |
|
|
|
currentTab:'aerosol-product', |
|
|
|
currentRegion: 'pk', |
|
|
|
currentElement: 'PBLH', |
|
|
|
currentType: '边界层高度', |
|
|
|
// date: moment().add(-1, 'd').format('YYYY-MM-DD'), |
|
|
|
date: moment().format('YYYY-MM-DD HH:MM:SS'), |
|
|
|
// date: moment('2022-04-01').format('YYYY-MM-DD HH:MM:SS'), |
|
|
|
date: moment().format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
times: [], |
|
|
|
currentTime: null, |
|
|
|
downloadImgUrl: '/images/default-picture.png', |
|
|
|
@ -335,8 +336,8 @@ export default { |
|
|
|
const LidarRatioInit = () => { |
|
|
|
creates.LidarRatio = new HighChartCreate('LidarRatio'); |
|
|
|
creates.LidarRatio.setChart(); |
|
|
|
creates.LidarRatio.setSpecialXAxis('时间(小时)', 24, 0, 2); |
|
|
|
creates.LidarRatio.setYAxis('高度(米)', 500, 0, 50, 7); |
|
|
|
creates.LidarRatio.setSpecialXAxis('', 120, 0, 20); |
|
|
|
creates.LidarRatio.setYAxis('高度(米)', 12000, 0, 2000, 7); |
|
|
|
creates.LidarRatio.setLegend(); |
|
|
|
creates.LidarRatio.setTooltip('KM: {point.y}'); |
|
|
|
creates.LidarRatio.setSeries('激光雷达比') |
|
|
|
@ -358,6 +359,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
const onTabClick = (name) => { |
|
|
|
initTimeLine() |
|
|
|
options.currentTab = name; |
|
|
|
setTimeout(() => { |
|
|
|
initEcharts(name) |
|
|
|
@ -370,16 +372,16 @@ export default { |
|
|
|
if (options.currentTab === 'boundary-layer-height') { |
|
|
|
reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor); |
|
|
|
} else if (options.currentTab === 'optical-property') { |
|
|
|
reloadChartsRecognition('lidarratio', drawLidarRatioCharts) |
|
|
|
reloadCloudRecognition('backscatter', 201, 'backscatter', drawBackscatter) |
|
|
|
reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction); |
|
|
|
reloadChartsRecognition('aod', drawAerosolCharts) |
|
|
|
reloadChartsRecognition('icot', drawIceCloudsCharts) |
|
|
|
reloadChartsRecognition('wcot', drawWaterCloud) |
|
|
|
} else if (options.currentTab === 'aerosol-product') { |
|
|
|
reloadChartsRecognition('lidarratio', drawLidarRatioCharts) |
|
|
|
reloadChartsRecognition('pblh', drawBoundaryLayerCharts) |
|
|
|
reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5); |
|
|
|
reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10); |
|
|
|
reloadCloudRecognition('backscatter', 201, 'backscatter', drawBackscatter) |
|
|
|
} else if (options.currentTab === 'BingoCloud') { |
|
|
|
reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts) |
|
|
|
reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts) |
|
|
|
@ -484,7 +486,7 @@ export default { |
|
|
|
|
|
|
|
let matrix = converCloudRecognition(201, result, 'backscatter'); |
|
|
|
creates.backscatterDrawer = new HeatMapDrawer(800, 600, matrix, "backscatter_chart", '米'); |
|
|
|
creates.backscatterDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true)); |
|
|
|
creates.backscatterDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); |
|
|
|
creates.backscatterDrawer.setColorChart(prepareBackscatterColors()); |
|
|
|
creates.backscatterDrawer.draw(); |
|
|
|
} |
|
|
|
@ -492,7 +494,7 @@ export default { |
|
|
|
const prepareBackscatterColors = () => { |
|
|
|
return new ColorChart(['#8F0000', '#E00000', '#FF1F00', '#FF6600', '#FF9900', '#FFE000', '#EBFF14', '#99FF66', '#66FF99', '#1FFFE0', |
|
|
|
'#00E0FF', '#0099FF', '#005CFF', '#0029FF', '#0000E0', '#000099'], |
|
|
|
[-4, -4.25, -4.5, -4.75, -5, -5.25, -5.5, -5.75, -6, -6.25, -6.5, -6.75, -7, -7.25, -7.5, -7.75, -8] |
|
|
|
[-1, -1.25, -1.5, -1.75, -2, -2.25, -2.5, -2.75, -3, -3.25, -3.5, -3.75, -4, -4.25, -4.5, -4.75, -5] |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
@ -599,6 +601,24 @@ export default { |
|
|
|
return data; |
|
|
|
} |
|
|
|
|
|
|
|
// const LidarRatioPrepareChartData = (result) => { |
|
|
|
// let prepareData = [] |
|
|
|
// result.sort((x, y) => moment(x.time, 'M_D_H').isBefore(moment(y.time, 'M_D_H')) ? -1 : 1); |
|
|
|
// result.forEach(item => { |
|
|
|
// if (item.data == null) { |
|
|
|
// let temp = []; |
|
|
|
// for (let i = 0; i < 801; i++) { |
|
|
|
// item.data.push([NaN]) |
|
|
|
// } |
|
|
|
// console.log(item) |
|
|
|
// } |
|
|
|
// item.data.forEach((i, index) => { |
|
|
|
// prepareData.push(index * 15) |
|
|
|
// }) |
|
|
|
// }) |
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
const preparePmColors = () => { |
|
|
|
return new ColorChart(['#F6EF20', '#FEC338', '#C5C22A', '#72CD64', '#31C69F', '#01B8CA', '#259BE8', '#327CFC', '#4853F4', '#422EC1'], |
|
|
|
[100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0], true, true |
|
|
|
@ -701,7 +721,7 @@ export default { |
|
|
|
options.timeArray = [] |
|
|
|
for (let index = 0; index < 12; index++) { |
|
|
|
reloadSingleCloudRecognition(capacity, time.clone().add(-index, 'h').format('M_D_H'), element, result); |
|
|
|
options.timeArray.push(time.clone().add(-index, 'h').format('HH:00')) |
|
|
|
options.timeArray.push(time.clone().add(-index, 'h').format('HH时')) |
|
|
|
} |
|
|
|
options.timeArray.reverse() |
|
|
|
} |
|
|
|
@ -715,7 +735,6 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const drawCloudRecognition = (result: CustomeArray<any>) => { |
|
|
|
if (result.length != 12) return; |
|
|
|
options.loadingCloudRecognitionStatus = false; |
|
|
|
@ -781,20 +800,6 @@ export default { |
|
|
|
return matrix; |
|
|
|
} |
|
|
|
|
|
|
|
//科学计数法转普通数字 |
|
|
|
function getFullNum(num) { |
|
|
|
//处理非数字 |
|
|
|
if (isNaN(num)) { |
|
|
|
return num |
|
|
|
} |
|
|
|
//处理不需要转换的数字 |
|
|
|
let str = '' + num; |
|
|
|
if (!/e/i.test(str)) { |
|
|
|
return num |
|
|
|
} |
|
|
|
return num.toFixed(18).replace(/\.?0+$/, ""); |
|
|
|
} |
|
|
|
|
|
|
|
const reloadSingleCloudRecognition = (capacity: number, time: string, elementCode, result: CustomeArray<any>) => { |
|
|
|
const params = prepareApiParams(time, elementCode) |
|
|
|
get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => { |
|
|
|
@ -842,9 +847,10 @@ export default { |
|
|
|
if (name === 'boundary-layer-height') { |
|
|
|
|
|
|
|
} else if (name === 'optical-property') { |
|
|
|
LidarRatioInit() |
|
|
|
|
|
|
|
opticalThicknessInit() |
|
|
|
} else if (name === 'aerosol-product') { |
|
|
|
LidarRatioInit() |
|
|
|
boundaryLayerHeightInit() |
|
|
|
} else if (name === 'BingoCloud') { |
|
|
|
cloudsHeightInit() |
|
|
|
@ -991,7 +997,6 @@ export default { |
|
|
|
options.currentTime = time.hour; |
|
|
|
options.date = moment(time.date).format('YYYY-MM-DD HH'); |
|
|
|
reloadChangeData() |
|
|
|
|
|
|
|
options.index = index; |
|
|
|
// cancelActive(); |
|
|
|
// setTitle(moment(time.date, 'YYYY-MM-DD')); |
|
|
|
@ -1141,6 +1146,13 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// watch(()=>options.date,() =>{ |
|
|
|
// reloadChangeData() |
|
|
|
// },{ |
|
|
|
// deep: true, |
|
|
|
// immediate: true |
|
|
|
// }) |
|
|
|
|
|
|
|
const verify = () => { |
|
|
|
ElMessage({ |
|
|
|
showClose: true, |
|
|
|
|
