You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1638 lines
57 KiB
1638 lines
57 KiB
<template>
|
|
<div class="tabs">
|
|
<div :class="{'active': currentTab === 'MWR'}" class="tab-item"
|
|
@click="onTabClick('MWR')">
|
|
质控对比
|
|
<img v-if="currentTab === 'MWR'" src="/images/line.png"/>
|
|
</div>
|
|
<div :class="{'active': currentTab === 'boundary-layer-height'}" class="tab-item"
|
|
@click="onTabClick('boundary-layer-height')">
|
|
水汽
|
|
<img v-if="currentTab === 'boundary-layer-height'" src="/images/line.png"/>
|
|
</div>
|
|
<div :class="{'active': currentTab === 'optical-property'}" class="tab-item"
|
|
@click="onTabClick('optical-property')">
|
|
光学特性
|
|
<img v-if="currentTab === 'optical-property'" src="/images/line.png"/>
|
|
</div>
|
|
<div :class="{'active': currentTab === 'aerosol-product'}" class="tab-item"
|
|
@click="onTabClick('aerosol-product')">
|
|
气溶胶产品
|
|
<img v-if="currentTab === 'aerosol-product'" src="/images/line.png"/>
|
|
</div>
|
|
<div :class="{'active': currentTab === 'BingoCloud'}" class="tab-item" @click="onTabClick('BingoCloud')">
|
|
云产品
|
|
<img v-if="currentTab === 'BingoCloud'" src="/images/line.png"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main">
|
|
<div class="menu panel">
|
|
<div class="menu-item">
|
|
<h2 class="tip">区域选择</h2>
|
|
<el-row :gutter="12">
|
|
<el-col :span="8"><span @click="onRegionClick('jn')"
|
|
:class="{'active': currentRegion === 'jn'}">江宁</span></el-col>
|
|
<el-col :span="8"><span @click="onRegionClick('liuhe')"
|
|
:class="{'active': currentRegion === 'liuhe'}">六合</span></el-col>
|
|
<el-col :span="8"><span @click="onRegionClick('pk')"
|
|
:class="{'active': currentRegion === 'pk'}">浦口</span></el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<div class="menu-item">
|
|
<h2 class="tip">要素选择</h2>
|
|
<el-row :gutter="12">
|
|
<el-col :span="24" v-for="(item, index) in elementData" :key = 'index'>
|
|
<span @click="onElementClick(item.value)"
|
|
:class="{'active': currentElement === item.value}">{{ item.label }}</span></el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container panel">
|
|
<div class="toolbar day-toolbar" v-if="currentElement === 'singleWatervapor' || currentElement === 'aod-icot-wcot'
|
|
|| currentElement === 'extinctionOptics' || currentElement === 'backscatter'
|
|
|| currentElement === 'pm2_5' || currentElement === 'pblh'
|
|
|| currentElement === 'cloudSol' || currentElement === 'cloudbaseheight'
|
|
|| currentElement === 'cloudtopheight'">
|
|
<div class="times">
|
|
<div class="time-item" v-for="(time, index) in times" :key="index"
|
|
:class="{'active': currentTime === time.date, 'first-hour': time.hour === '00'}">
|
|
<span class="hour">{{ time.day }}</span>
|
|
<span class="time" @click="onTimeClick(time, index)">{{ time.hour }}</span>
|
|
</div>
|
|
</div>
|
|
<el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false"
|
|
class="date-picker" @change="onChange">
|
|
</el-date-picker>
|
|
<div class="control-btn">
|
|
<span @click="onPrevDayClick"><img src="/images/prev.png"/></span>
|
|
<span @click="onNextDayClick"><img src="/images/next.png"/></span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="toolbar day-toolbar" v-if="currentElement === 'extinction' || 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'}">
|
|
<span class="hour" style="padding-left: 10px">{{ time.month }}</span>
|
|
<span class="time" @click="onDayClick(time, index)">{{ time.day }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false"
|
|
class="date-picker" @change="onChange">
|
|
</el-date-picker>
|
|
<div class="control-btn">
|
|
<span @click="onPrevDayTimeClick"><img src="/images/prev.png"/></span>
|
|
<span @click="onNextDayTimeClick"><img src="/images/next.png"/></span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="picture-view">
|
|
<div class="picture-container raman-picture-container" v-show="currentElement === 'singleWatervapor'">
|
|
<div class="picture special-picture">
|
|
<div v-loading="loadingWaterVaporSingleStatus"
|
|
style="width: 100%;height: 100%"
|
|
custom-class="loading"
|
|
element-loading-text="加载中">
|
|
<canvas id='watervapor_single_chart'></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="picture-container raman-picture-container" v-show=" currentElement=== 'aod-icot-wcot'">
|
|
<div class="picture">
|
|
<div id="opticalThickness"
|
|
style="width: 1000px;height: 450px;margin-top: 66px"
|
|
v-loading="loadingOpticalThicknessStatus"
|
|
custom-class="loading"
|
|
element-loading-text="加载中">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="picture-container raman-picture-container" v-show = "currentElement=== 'extinctionOptics'">
|
|
<div class="picture special-picture">
|
|
<div v-loading="loadingExtinctionOpticsStatus"
|
|
style="width: 100%;height: 100%"
|
|
custom-class="loading"
|
|
element-loading-text="加载中">
|
|
<canvas id='extinction_optics_chart'></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement=== 'backscatter'">
|
|
<div class="picture special-picture">
|
|
<div v-loading="loadingBackscatterStatus"
|
|
style="width: 100%;"
|
|
custom-class="loading"
|
|
element-loading-text="加载中">
|
|
<canvas id='backscatter_chart'></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement=== 'pm2_5'">
|
|
<div class="picture special-picture">
|
|
<div v-loading="loadingPmStatus"
|
|
style="width: 100%;"
|
|
custom-class="loading"
|
|
element-loading-text="加载中">
|
|
<canvas id='pm2_5_chart'></canvas>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="picture special-picture">
|
|
<div v-loading="loadingPmStatus"
|
|
style="width: 100%;"
|
|
custom-class="loading"
|
|
element-loading-text="加载中">
|
|
<canvas id='pm10_chart'></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement=== 'pblh'">
|
|
<div class="picture">
|
|
<div id="BoundaryLayerHeight"
|
|
style="width: 1000px;height: 450px;margin-top: 66px"
|
|
v-loading="loadingBoundaryLayerHeightStatus"
|
|
custom-class="loading"
|
|
element-loading-text="加载中"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement=== 'lidarratio'">
|
|
<div class="picture">
|
|
<div id="LidarRatio"
|
|
style="width: 1000px;height: 450px;margin-top: 66px"
|
|
v-loading="loadingLidarRatioStatus"
|
|
custom-class="loading"
|
|
element-loading-text="加载中">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudSol'">
|
|
<div class="picture special-picture">
|
|
<div v-loading="loadingCloudSolStatus"
|
|
style="width: 100%;"
|
|
custom-class="loading"
|
|
element-loading-text="加载中">
|
|
<canvas id='cloud_sol_chart'></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudbaseheight'">
|
|
<div class="picture special-picture">
|
|
<div id="cloudsHeight"
|
|
style="width: 1000px;height: 450px;margin-top: 66px"
|
|
v-loading="loadingCloudsHeightStatus"
|
|
custom-class="loading"
|
|
element-loading-text="加载中"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudtopheight'">
|
|
<div class="picture special-picture">
|
|
<div id="cloudTopHeight"
|
|
style="width: 1000px;height: 450px;margin-top: 66px"
|
|
v-loading="loadingCloudTopHeightStatus"
|
|
custom-class="loading"
|
|
element-loading-text="加载中"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- <div class="picture-container raman-picture-container" v-show="currentElement === 'layertype'">-->
|
|
<!-- <div class="picture special-picture">-->
|
|
<!--<!– <h2 class="title">云的识别</h2>–>-->
|
|
<!-- <div v-loading="loadingCloudRecognitionStatus"-->
|
|
<!-- style="width: 100%;"-->
|
|
<!-- custom-class="loading"-->
|
|
<!-- element-loading-text="加载中">-->
|
|
<!-- <canvas id='cloud_recognition_chart'></canvas>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement === 'extinction'">
|
|
<div class="picture special-picture">
|
|
<div v-loading="loadingExtinctionStatus"
|
|
style="width: 100%;"
|
|
custom-class="loading"
|
|
element-loading-text="加载中">
|
|
<canvas id='extinction_chart-before'></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="picture special-picture">
|
|
<div v-loading="loadingExtinctionStatus"
|
|
style="width: 100%;"
|
|
custom-class="loading"
|
|
element-loading-text="加载中">
|
|
<canvas id='extinction_chart-after'></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement === 'watervapor'">
|
|
<div class="picture special-picture">
|
|
<div v-loading="loadingWaterVaporStatus"
|
|
style="width: 100%"
|
|
element-loading-text="加载中">
|
|
<canvas id='watervapor_chart-before'></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="picture special-picture">
|
|
<div v-loading="loadingWaterVaporStatus"
|
|
style="width: 100%"
|
|
element-loading-text="加载中">
|
|
<canvas id='watervapor_chart-after'></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {onMounted, reactive, toRefs, watch} from 'vue';
|
|
import moment from "moment";
|
|
import {RamanLidarConfig} from '../uilts/Config';
|
|
import {post} from '../uilts/axios';
|
|
import {ElMessage} from "element-plus";
|
|
import {ConstantRamanLidar} from "../model/constant";
|
|
import {get} from '../uilts/axios';
|
|
import {HighChartCreate} from "../model/high-chart-create";
|
|
import {CustomeArray} from "../model/custome-array"
|
|
import {CoordinateScale, HeatMapDrawer} from "../model/heat-map-drawer";
|
|
import {Box, ColorChart, createEmptyCanvas} from '../uilts/box-drawer';
|
|
import axiosStore from '../uilts/AxiosStore';
|
|
|
|
export default {
|
|
name: 'RamanLidar',
|
|
setup() {
|
|
let timer = null;
|
|
let creates: {
|
|
boundaryLayerHeight: HighChartCreate
|
|
cloudsHeight: HighChartCreate
|
|
cloudTopHeight: HighChartCreate
|
|
LidarRatio: HighChartCreate,
|
|
opticalThickness: HighChartCreate,
|
|
cloudRecognitionDrawer: HeatMapDrawer,
|
|
extinctionDrawer: HeatMapDrawer,
|
|
watervaporDrawer: HeatMapDrawer,
|
|
opticsExtinctionDrawer: HeatMapDrawer,
|
|
singleWatervaporDrawer: HeatMapDrawer,
|
|
cloudSolDrawer: HeatMapDrawer,
|
|
pm2Point5Drawer: HeatMapDrawer,
|
|
pm10Drawer: HeatMapDrawer,
|
|
backscatterDrawer: HeatMapDrawer,
|
|
} = {
|
|
boundaryLayerHeight: null,
|
|
cloudsHeight: null,
|
|
cloudTopHeight: null,
|
|
LidarRatio: null,
|
|
opticalThickness: null,
|
|
cloudRecognitionDrawer: null,
|
|
extinctionDrawer: null,
|
|
watervaporDrawer: null,
|
|
singleWatervaporDrawer: null,
|
|
opticsExtinctionDrawer: null,
|
|
cloudSolDrawer: null,
|
|
pm2Point5Drawer: null,
|
|
pm10Drawer: null,
|
|
backscatterDrawer: null
|
|
}
|
|
let options = reactive({
|
|
currentTab: 'MWR',
|
|
currentRegion: 'jn',
|
|
// 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'),
|
|
times: [],
|
|
currentTime: null,
|
|
downloadImgUrl: '/images/default-picture.png',
|
|
imgUrl: '/images/default-picture.png',
|
|
signalPBLHImgUrl: '/images/default-picture.png',
|
|
previewUrl: [],
|
|
signalPBLHPreviewUrl: [],
|
|
isPlay: false,
|
|
title: null,
|
|
index: 0,
|
|
downloadSrc: null,
|
|
urls: [],
|
|
boundaryLayerHeightList: [],
|
|
LidarRatioList: [],
|
|
cloudsHeightList: [],
|
|
cloudTopHeightList: [],
|
|
loadingWaterVaporSingleStatus: false,
|
|
loadingExtinctionOpticsStatus: false,
|
|
loadingPmStatus: false,
|
|
loadingCloudSolStatus: false,
|
|
loadingCloudRecognitionStatus: false,
|
|
loadingExtinctionStatus: false,
|
|
loadingWaterVaporStatus: false,
|
|
loadingBackscatterStatus: false,
|
|
loadingLidarRatioStatus: false,
|
|
loadingBoundaryLayerHeightStatus: false,
|
|
loadingCloudsHeightStatus: false,
|
|
loadingCloudTopHeightStatus: false,
|
|
loadingOpticalThicknessStatus: false,
|
|
currentHour: 0,
|
|
timeArray: [],
|
|
chartsData: [],
|
|
chartTimeData: [],
|
|
elementData: [
|
|
{
|
|
value: 'layertype',
|
|
label: '云的识别'
|
|
},
|
|
{
|
|
value: 'extinction',
|
|
label: '消光系数'
|
|
},
|
|
{
|
|
value: 'watervapor',
|
|
label: '水汽'
|
|
}],
|
|
currentElement: 'layertype',
|
|
timeLineFormat: 'hour'
|
|
})
|
|
|
|
onMounted(() => {
|
|
// initTimeLine();
|
|
initTimeLineDay();
|
|
// setTitle(moment(options.date, 'YYYY-MM-DD'));
|
|
setTimeout(() => {
|
|
initEcharts(options.currentTab)
|
|
reloadChangeData();
|
|
}, 50);
|
|
})
|
|
|
|
//边界层高度
|
|
const boundaryLayerHeightInit = () => {
|
|
creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight');
|
|
creates.boundaryLayerHeight.setChart(false,'line', 1000);
|
|
creates.boundaryLayerHeight.setXAxisTypeDate();
|
|
creates.boundaryLayerHeight.setYAxis('边界层高度(m)');
|
|
creates.boundaryLayerHeight.setLegend();
|
|
creates.boundaryLayerHeight.setTooltip('高度: {point.y}');
|
|
creates.boundaryLayerHeight.setSeries('边界层高度',0, null, null, '#3636FF')
|
|
creates.boundaryLayerHeight.init();
|
|
}
|
|
|
|
//云层高度
|
|
const cloudsHeightInit = () => {
|
|
creates.cloudsHeight = new HighChartCreate('cloudsHeight');
|
|
creates.cloudsHeight.setChart(false, 'scatter', 1000);
|
|
// creates.cloudsHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
|
|
creates.cloudsHeight.setXAxisTypeDate();
|
|
creates.cloudsHeight.setYAxis('高度(m)');
|
|
creates.cloudsHeight.setLegend();
|
|
creates.cloudsHeight.setTooltip('高度: {point.y}');
|
|
creates.cloudsHeight.setSeries('云层高度')
|
|
creates.cloudsHeight.init();
|
|
}
|
|
//云顶高度
|
|
const cloudTopHeightInit = () => {
|
|
creates.cloudTopHeight = new HighChartCreate('cloudTopHeight');
|
|
creates.cloudTopHeight.setChart(false, 'scatter', 1000);
|
|
// creates.cloudTopHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
|
|
creates.cloudTopHeight.setXAxisTypeDate();
|
|
creates.cloudTopHeight.setYAxis('高度(m)');
|
|
creates.cloudTopHeight.setLegend();
|
|
creates.cloudTopHeight.setTooltip('高度: {point.y}');
|
|
creates.cloudTopHeight.setSeries('云顶高度')
|
|
creates.cloudTopHeight.init();
|
|
}
|
|
|
|
//激光雷达比
|
|
const LidarRatioInit = () => {
|
|
creates.LidarRatio = new HighChartCreate('LidarRatio');
|
|
creates.LidarRatio.setChart(false,'line', 1000);
|
|
creates.LidarRatio.setSpecialXAxis('sr', 120, 0, 20);
|
|
creates.LidarRatio.setYAxis('高度(m)');
|
|
creates.LidarRatio.setLegend();
|
|
creates.LidarRatio.setTooltip('高度: {point.y}');
|
|
creates.LidarRatio.setSeries('激光雷达比', 0, null, null, '#3636FF')
|
|
creates.LidarRatio.init();
|
|
}
|
|
|
|
//光学厚度
|
|
const opticalThicknessInit = () => {
|
|
creates.opticalThickness = new HighChartCreate('opticalThickness');
|
|
creates.opticalThickness.setChart(false,'line', 1000);
|
|
// creates.opticalThickness.setSpecialXAxis('时间（小时）', 24, 0, 2);
|
|
// creates.opticalThickness.setXAxis('时间(天/时)', false);
|
|
creates.opticalThickness.setXAxisTypeDate();
|
|
creates.opticalThickness.setYAxis('光学厚度');
|
|
creates.opticalThickness.setLegend(true);
|
|
creates.opticalThickness.setTooltip('{point.y}');
|
|
creates.opticalThickness.setSeries('气溶胶', 0, null, null, '#FF5352')
|
|
creates.opticalThickness.setSeries('冰云', 0, null, null, '#5050FD')
|
|
creates.opticalThickness.setSeries('水云', 0, null, null, '#58FE5F')
|
|
creates.opticalThickness.init();
|
|
}
|
|
|
|
const onTabClick = (name) => {
|
|
changeTimeLineFormat(name);
|
|
options.currentTab = name;
|
|
initEcharts(name)
|
|
reloadChangeData()
|
|
}
|
|
|
|
const changeTimeLineFormat = (name) => {
|
|
if (name === 'MWR'){
|
|
initTimeLineDay();
|
|
return;
|
|
}
|
|
|
|
initTimeLine();
|
|
}
|
|
|
|
const reloadChangeData = () => {
|
|
cancelRequest();
|
|
onMenuChange()
|
|
elementChange(options.currentElement)
|
|
}
|
|
|
|
const onMenuChange = () => {
|
|
options.elementData = []
|
|
if (options.currentTab === 'boundary-layer-height') {
|
|
options.currentElement = 'singleWatervapor'
|
|
options.elementData = [
|
|
{
|
|
value: 'singleWatervapor',
|
|
label: '水汽'
|
|
}]
|
|
|
|
} else if (options.currentTab === 'optical-property') {
|
|
options.currentElement = 'aod-icot-wcot'
|
|
options.elementData = [
|
|
{
|
|
value: 'aod-icot-wcot',
|
|
label: '光学厚度'
|
|
},
|
|
{
|
|
value: 'extinctionOptics',
|
|
label: '消光系数'
|
|
},
|
|
{
|
|
value: 'backscatter',
|
|
label: '后向散射系数'
|
|
}]
|
|
|
|
} else if (options.currentTab === 'aerosol-product') {
|
|
options.currentElement = 'pm2_5'
|
|
options.elementData = [
|
|
{
|
|
value: 'pm2_5',
|
|
label: '气溶胶PM'
|
|
},
|
|
{
|
|
value: 'pblh',
|
|
label: '边界层高度'
|
|
},
|
|
{
|
|
value: 'lidarratio',
|
|
label: '激光雷达比'
|
|
}]
|
|
} else if (options.currentTab === 'BingoCloud') {
|
|
options.currentElement = 'cloudSol'
|
|
options.elementData = [
|
|
{
|
|
value: 'cloudSol',
|
|
label: '云气溶胶分类'
|
|
},
|
|
{
|
|
value: 'cloudbaseheight',
|
|
label: '云底高度'
|
|
},
|
|
{
|
|
value: 'cloudtopheight',
|
|
label: '云顶高度'
|
|
}]
|
|
} else if (options.currentTab === 'MWR') {
|
|
options.currentElement = 'extinction'
|
|
options.elementData = [
|
|
{
|
|
value: 'extinction',
|
|
label: '消光系数'
|
|
},
|
|
{
|
|
value: 'watervapor',
|
|
label: '水汽'
|
|
}]
|
|
}
|
|
}
|
|
|
|
const elementChange = (code: string) => {
|
|
switch (code) {
|
|
case 'singleWatervapor' :
|
|
// initTimeLine()
|
|
reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor);
|
|
break;
|
|
case 'aod-icot-wcot' :
|
|
// initTimeLine()
|
|
reloadChartsRecognition('aod', drawAerosolCharts);
|
|
reloadChartsRecognition('icot', drawIceCloudsCharts);
|
|
reloadChartsRecognition('wcot', drawWaterCloud);
|
|
break;
|
|
case 'extinctionOptics' :
|
|
// initTimeLine()
|
|
reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction);
|
|
break;
|
|
case 'backscatter' :
|
|
// initTimeLine()
|
|
reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter);
|
|
break;
|
|
case 'pm2_5' :
|
|
// initTimeLine()
|
|
reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
|
|
reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10);
|
|
break;
|
|
case 'pblh' :
|
|
initTimeLine()
|
|
reloadChartsRecognition('pblh', drawBoundaryLayerCharts);
|
|
break;
|
|
case 'lidarratio' :
|
|
initTimeLineDay()
|
|
reloadChartLidarratio('lidarratio', drawLidarRatioCharts);
|
|
break;
|
|
case 'cloudSol' :
|
|
initTimeLine()
|
|
reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol);
|
|
break;
|
|
case 'cloudbaseheight' :
|
|
// initTimeLine()
|
|
reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts);
|
|
break;
|
|
case 'cloudtopheight' :
|
|
// initTimeLine()
|
|
reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts);
|
|
break;
|
|
// case 'layertype' :
|
|
// reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition);
|
|
// break;
|
|
case 'extinction' :
|
|
// initTimeLineDay()
|
|
reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionBefore);
|
|
reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionAfter);
|
|
break;
|
|
case 'watervapor' :
|
|
// initTimeLineDay()
|
|
reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervaporBefore);
|
|
reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervaporAfter);
|
|
break;
|
|
default:
|
|
throw new Error("无效的type类型");
|
|
}
|
|
}
|
|
|
|
|
|
const preprocessing = (type: string) => {
|
|
switch (type) {
|
|
case 'layertype':
|
|
options.loadingCloudRecognitionStatus = true;
|
|
clearHeatMapDrawer(creates.cloudRecognitionDrawer);
|
|
break;
|
|
case 'extinction':
|
|
options.loadingExtinctionStatus = true;
|
|
clearHeatMapDrawer(creates.extinctionDrawer);
|
|
break;
|
|
case 'watervapor':
|
|
options.loadingWaterVaporStatus = true;
|
|
clearHeatMapDrawer(creates.watervaporDrawer);
|
|
break;
|
|
case 'cloudSol':
|
|
options.loadingCloudSolStatus = true;
|
|
clearHeatMapDrawer(creates.cloudSolDrawer);
|
|
break;
|
|
case 'pm2_5':
|
|
options.loadingPmStatus = true;
|
|
clearHeatMapDrawer(creates.pm2Point5Drawer);
|
|
break;
|
|
case 'pm10':
|
|
options.loadingPmStatus = true;
|
|
clearHeatMapDrawer(creates.pm10Drawer);
|
|
break;
|
|
case 'extinctionOptics':
|
|
options.loadingExtinctionOpticsStatus = true;
|
|
clearHeatMapDrawer(creates.opticsExtinctionDrawer);
|
|
break;
|
|
case 'singleWatervapor':
|
|
options.loadingWaterVaporSingleStatus = true;
|
|
clearHeatMapDrawer(creates.singleWatervaporDrawer);
|
|
break;
|
|
case 'backscatter':
|
|
options.loadingBackscatterStatus = true;
|
|
clearHeatMapDrawer(creates.backscatterDrawer);
|
|
break;
|
|
default:
|
|
throw new Error("无效的type类型");
|
|
}
|
|
}
|
|
|
|
const preprocessingCharts = (type: string) => {
|
|
switch (type) {
|
|
case 'lidarratio':
|
|
options.loadingLidarRatioStatus = true;
|
|
break;
|
|
case 'pblh':
|
|
options.loadingBoundaryLayerHeightStatus = true;
|
|
break;
|
|
case 'cloudbaseheight':
|
|
options.loadingCloudsHeightStatus = true;
|
|
break;
|
|
case 'cloudtopheight':
|
|
options.loadingCloudTopHeightStatus = true;
|
|
break;
|
|
case 'aod':
|
|
options.loadingOpticalThicknessStatus = true;
|
|
break;
|
|
case 'icot':
|
|
options.loadingOpticalThicknessStatus = true;
|
|
break;
|
|
case 'wcot':
|
|
options.loadingOpticalThicknessStatus = true;
|
|
break;
|
|
default:
|
|
throw new Error("无效的type类型");
|
|
}
|
|
}
|
|
|
|
const clearHeatMapDrawer = (drawer: HeatMapDrawer) => {
|
|
if (drawer == null) return;
|
|
drawer.close();
|
|
drawer = null;
|
|
}
|
|
|
|
const cancelRequest = () => {
|
|
axiosStore._axiosPromiseCancel.forEach(e => {
|
|
e && e()
|
|
});
|
|
axiosStore._axiosPromiseCancel = [];
|
|
}
|
|
|
|
const drawBackscatter = (result: CustomeArray<any>) => {
|
|
if (result.length != 24) return;
|
|
options.loadingBackscatterStatus = false;
|
|
if (creates.backscatterDrawer != null) {
|
|
creates.backscatterDrawer.close();
|
|
}
|
|
|
|
let matrix = converCloudRecognition(801, result, 'backscatter');
|
|
creates.backscatterDrawer = new HeatMapDrawer(1200, 650, matrix, "backscatter_chart",'/km/sr');
|
|
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();
|
|
}
|
|
|
|
const prepareBackscatterColors = () => {
|
|
let colorChart = new ColorChart(['#8F0000', '#E00000', '#FF1F00', '#FF6600', '#FF9900', '#FFE000', '#EBFF14', '#99FF66', '#66FF99', '#1FFFE0',
|
|
'#00E0FF', '#0099FF', '#005CFF', '#0029FF', '#0000E0', '#000099'],
|
|
[-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]
|
|
// [-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]
|
|
);
|
|
colorChart.setDefaultColors('#000099', '#8F0000');
|
|
return colorChart;
|
|
}
|
|
|
|
const drawPm2Point5 = (result: CustomeArray<any>) => {
|
|
if (result.length != 24) return;
|
|
options.loadingPmStatus = false;
|
|
if (creates.pm2Point5Drawer != null) {
|
|
creates.pm2Point5Drawer.close();
|
|
}
|
|
let matrix = converCloudRecognition(201, result, 'pm2_5');
|
|
creates.pm2Point5Drawer = new HeatMapDrawer(800, 650, matrix, "pm2_5_chart",'μg/m³', 'PM2.5');
|
|
creates.pm2Point5Drawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true));
|
|
creates.pm2Point5Drawer.setColorChart(preparePmColors());
|
|
creates.pm2Point5Drawer.draw();
|
|
}
|
|
|
|
const drawPm10 = (result: CustomeArray<any>) => {
|
|
if (result.length != 24) return;
|
|
|
|
options.loadingPmStatus = false;
|
|
if (creates.pm10Drawer != null) {
|
|
creates.pm10Drawer.close();
|
|
}
|
|
|
|
let matrix = converCloudRecognition(201, result, 'pm10');
|
|
creates.pm10Drawer = new HeatMapDrawer(800, 650, matrix, "pm10_chart", 'μg/m³', 'PM10');
|
|
creates.pm10Drawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true));
|
|
creates.pm10Drawer.setColorChart(preparePmColors());
|
|
creates.pm10Drawer.draw();
|
|
}
|
|
|
|
const drawBoundaryLayerCharts = (result: CustomeArray<any>) => {
|
|
if (result.length != 24) return;
|
|
const data = prepareChartData(result);
|
|
creates.boundaryLayerHeight.updateSeries(0, data)
|
|
options.loadingBoundaryLayerHeightStatus = false
|
|
}
|
|
|
|
const drawLidarRatioCharts = (result: CustomeArray<any>) => {
|
|
if (result.length <= 0) return;
|
|
const data = LidarRatioPrepareChartData(result);
|
|
creates.LidarRatio.updateSeries(0, data);
|
|
options.loadingLidarRatioStatus = false
|
|
}
|
|
|
|
const drawAerosolCharts = (result: CustomeArray<any>) => {
|
|
if (result.length != 24) return;
|
|
const data = prepareChartData(result);
|
|
creates.opticalThickness.updateSeries(0, data);
|
|
// options.loadingOpticalThicknessStatus = false
|
|
}
|
|
|
|
const drawIceCloudsCharts = (result: CustomeArray<any>) => {
|
|
if (result.length != 24) return;
|
|
const data = prepareChartData(result);
|
|
creates.opticalThickness.updateSeries(1, data)
|
|
// options.loadingOpticalThicknessStatus = false
|
|
}
|
|
|
|
const drawWaterCloud = (result: CustomeArray<any>) => {
|
|
if (result.length != 24) return;
|
|
const data = prepareChartData(result);
|
|
creates.opticalThickness.updateSeries(2, data)
|
|
options.loadingOpticalThicknessStatus = false
|
|
}
|
|
|
|
|
|
const drawCloudTopHeightCharts = (result: CustomeArray<any>) => {
|
|
if (result.length != 24) return;
|
|
const data = prepareChartData(result);
|
|
creates.cloudTopHeight.updateSeries(0, data)
|
|
options.loadingCloudTopHeightStatus = false
|
|
}
|
|
|
|
const drawCloudsHeightCharts = (result: CustomeArray<any>) => {
|
|
if (result.length != 24) return;
|
|
const data = prepareChartData(result);
|
|
creates.cloudsHeight.updateSeries(0, data)
|
|
options.loadingCloudsHeightStatus = false
|
|
}
|
|
|
|
const prepareChartData = (result) => {
|
|
let prepareData = []
|
|
options.chartTimeData = [];
|
|
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 < 11; i++) {
|
|
temp.push(NaN);
|
|
}
|
|
item.data = [temp];
|
|
}
|
|
for (let i in item.data[0]) {
|
|
prepareData.push(item.data[0][i])
|
|
}
|
|
})
|
|
let interval = (24 / prepareData.length);
|
|
let data = [];
|
|
let startTimeMoment = moment(result[0].time, 'M_D_H').add(8, 'h').add(-30, 'm');
|
|
for (let i = 0, len = prepareData.length; i < len; i++) {
|
|
data.push([startTimeMoment.clone().add(interval * i, 'h').valueOf(), prepareData[i]]);
|
|
}
|
|
return data;
|
|
}
|
|
|
|
const LidarRatioPrepareChartData = (result) => {
|
|
let prepareData = []
|
|
if (result[0].data == null) return;
|
|
result[0].data.forEach((item) => {
|
|
item.forEach((item, index) => {
|
|
if (item == null) item = NaN
|
|
prepareData.push([item, index * 15])
|
|
})
|
|
})
|
|
return prepareData;
|
|
}
|
|
|
|
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
|
|
);
|
|
}
|
|
|
|
const drawCloudSol = (result: CustomeArray<any>) => {
|
|
if (result.length != 24) return;
|
|
|
|
options.loadingCloudSolStatus = false;
|
|
if (creates.cloudSolDrawer != null) {
|
|
creates.cloudSolDrawer.close();
|
|
}
|
|
|
|
let matrix = converCloudRecognition(801, result, 'cloudSol');
|
|
creates.cloudSolDrawer = new HeatMapDrawer(1200, 650, matrix, "cloud_sol_chart");
|
|
creates.cloudSolDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
|
|
creates.cloudSolDrawer.setColorChart(prepareCloudRecognitionColors());
|
|
creates.cloudSolDrawer.draw();
|
|
}
|
|
|
|
const drawOpticsExtinction = (result: CustomeArray<any>) => {
|
|
if (result.length != 24) return;
|
|
|
|
options.loadingExtinctionOpticsStatus = false;
|
|
if (creates.opticsExtinctionDrawer != null) {
|
|
creates.opticsExtinctionDrawer.close();
|
|
}
|
|
|
|
let matrix = converCloudRecognition(801, result, 'extinctionOptics');
|
|
creates.opticsExtinctionDrawer = new HeatMapDrawer(1200, 650, matrix, "extinction_optics_chart",'/km/sr');
|
|
creates.opticsExtinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
|
|
creates.opticsExtinctionDrawer.setColorChart(prepareExtinctionnColors());
|
|
creates.opticsExtinctionDrawer.draw();
|
|
|
|
}
|
|
|
|
const drawSingleWatervapor = (result: CustomeArray<any>) => {
|
|
if (result.length != 24) return;
|
|
|
|
options.loadingWaterVaporSingleStatus = false;
|
|
if (creates.singleWatervaporDrawer != null) {
|
|
creates.singleWatervaporDrawer.close();
|
|
}
|
|
|
|
let matrix = converCloudRecognition(101, result, 'singleWatervapor');
|
|
creates.singleWatervaporDrawer = new HeatMapDrawer(1200, 650, matrix, "watervapor_single_chart",' g/kg');
|
|
creates.singleWatervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true));
|
|
creates.singleWatervaporDrawer.setColorChart(prepareWatervaporColors());
|
|
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;
|
|
|
|
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-after",'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 prepareWatervaporColors = () => {
|
|
return new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66',
|
|
'#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'],
|
|
[20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], true, true
|
|
);
|
|
}
|
|
|
|
const drawExtinctionBefore = (result: CustomeArray<any>) => {
|
|
if (result.length != 24) return;
|
|
|
|
options.loadingExtinctionStatus = false;
|
|
if (creates.extinctionDrawer != null) {
|
|
creates.extinctionDrawer.close();
|
|
}
|
|
|
|
let matrix = converCloudRecognition(801, result, 'extinction');
|
|
creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", 'km/sr','质控前');
|
|
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();
|
|
}
|
|
|
|
const drawExtinctionAfter = (result: CustomeArray<any>) => {
|
|
if (result.length != 24) return;
|
|
|
|
options.loadingExtinctionStatus = false;
|
|
if (creates.extinctionDrawer != null) {
|
|
creates.extinctionDrawer.close();
|
|
}
|
|
|
|
let matrix = converCloudRecognition(801, result, 'extinction');
|
|
creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-after", 'km/sr','质控后');
|
|
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();
|
|
}
|
|
|
|
const prepareExtinctionnColors = () => {
|
|
let colorChart = new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66',
|
|
'#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'],
|
|
[10, 8, 6, 4, 2, 1, 0.8, 0.6, 0.4, 0.2, 0.1, 0.08, 0.06, 0.04, 0.02, 0.01, 0.008, 0.006, 0.004, 0.002, 0.001], true, true
|
|
);
|
|
colorChart.setDefaultColors('#000099', '#8F0000');
|
|
return colorChart;
|
|
}
|
|
|
|
const reloadCloudRecognition = (type: string, capacity: number, element: string, callback: any) => {
|
|
preprocessing(type);
|
|
let result = new CustomeArray(callback);
|
|
let time = moment(options.date);
|
|
options.timeArray = []
|
|
for (let index = 0; index < 24; index++) {
|
|
reloadSingleCloudRecognition(capacity, time.clone().add(-index, 'h').format('M_D_H'), element, result);
|
|
options.timeArray.push(time.clone().add(-index, 'h').format('HH'))
|
|
}
|
|
options.timeArray.reverse()
|
|
}
|
|
//
|
|
const reloadChartsRecognition = (element: string, callback: any) => {
|
|
preprocessingCharts(element)
|
|
let result = new CustomeArray(callback);
|
|
let time = moment(options.date);
|
|
for (let index = 0; index < 24; index++) {
|
|
reloadSingleChartsRecognition(time.clone().add(-index, 'h').format('M_D_H'), element, result);
|
|
}
|
|
}
|
|
|
|
const reloadChartLidarratio = (element: string, callback: any) => {
|
|
preprocessingCharts(element)
|
|
let result = new CustomeArray(callback);
|
|
|
|
let time = moment(options.date);
|
|
|
|
reloadSingleChartsRecognition(time.format('M_D_H'), element, result);
|
|
}
|
|
|
|
const drawCloudRecognition = (result: CustomeArray<any>) => {
|
|
if (result.length != 12) return;
|
|
options.loadingCloudRecognitionStatus = false;
|
|
if (creates.cloudRecognitionDrawer != null) {
|
|
creates.cloudRecognitionDrawer.close();
|
|
}
|
|
|
|
let matrix = converCloudRecognition(801, result, 'layertype');
|
|
|
|
creates.cloudRecognitionDrawer = new HeatMapDrawer(1200, 600, matrix, "cloud_recognition_chart");
|
|
creates.cloudRecognitionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
|
|
creates.cloudRecognitionDrawer.setColorChart(prepareCloudRecognitionColors());
|
|
creates.cloudRecognitionDrawer.draw();
|
|
}
|
|
|
|
const prepareCloudRecognitionColors = () => {
|
|
return new ColorChart(['#0000FF', '#00FF00', '#FF0000', '#FFFFFF'],
|
|
[3, 2, 1, 0, -99]
|
|
);
|
|
}
|
|
|
|
const converCloudRecognition = (capacity: number, result: CustomeArray<any>, name: string) => {
|
|
result.sort((x, y) => moment(x.time, 'M_D_H').isBefore(moment(y.time, 'M_D_H')) ? -1 : 1);
|
|
let matrix = new Array<Array<Box>>();
|
|
let index = -1;
|
|
result.forEach(r => {
|
|
const time = moment(r.time, 'M_D_H').format("MM月DD日HH时")
|
|
if (r.data == null) {
|
|
for (let x = 0; x < 11; x++) {
|
|
index++;
|
|
if (matrix[index] == null) {
|
|
matrix[index] = new Array<Box>(capacity);
|
|
}
|
|
for (let y = 0; y < capacity; y++) {
|
|
matrix[index][y] = new Box(index, y, 0, 0, NaN, y * 15, time, "米");
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
const interval = Math.round(11 / r.data[0].length);
|
|
for (let h = 0, len = capacity; h < len; h++) {
|
|
let tempIndex = parseInt(index + "");
|
|
if (r.data[h] == null){
|
|
for(let i = 0; i < 11; i++){
|
|
tempIndex++;
|
|
if (matrix[tempIndex] == null) {
|
|
matrix[tempIndex] = new Array<Box>(capacity);
|
|
}
|
|
matrix[tempIndex][h] = new Box(tempIndex, h, 0, 0, NaN, h * 15, time, "米");
|
|
}
|
|
|
|
continue;
|
|
}
|
|
r.data[h] = r.data[h].slice(0, 11);
|
|
for (let i = 0, len = r.data[h].length; i < len; i++) {
|
|
for (let _i = 0; _i < interval; _i++) {
|
|
tempIndex++;
|
|
|
|
if (matrix[tempIndex] == null) {
|
|
matrix[tempIndex] = new Array<Box>(capacity);
|
|
}
|
|
|
|
let value = r.data[h][i]
|
|
if (name == 'backscatter') {
|
|
value = value == null ? NaN : Math.log10(value);
|
|
}
|
|
if (name == 'singleWatervapor' || name == 'watervapor') {
|
|
value = value == null ? NaN : value * 1000;
|
|
}
|
|
value = value == null ? NaN : value;
|
|
matrix[tempIndex][h] = new Box(tempIndex, h, 0, 0, value, h * 15, time, "米");
|
|
}
|
|
}
|
|
}
|
|
index = index + r.data[0].length * interval;
|
|
});
|
|
return matrix;
|
|
}
|
|
|
|
|
|
const reloadSingleCloudRecognition = (capacity: number, time: string, elementCode, result: CustomeArray<any>) => {
|
|
const params = prepareApiParams(time, elementCode)
|
|
get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
|
|
if (response.state != 0) {
|
|
setCloudRecognitionResult(capacity, time, response.message, null, result);
|
|
return;
|
|
}
|
|
|
|
setCloudRecognitionResult(capacity, time, response.message, response.data, result);
|
|
}).catch(error => {
|
|
setCloudRecognitionResult(capacity, time, error.message, null, result);
|
|
})
|
|
// .catch(error => {
|
|
// setCloudRecognitionResult(capacity, time, error.message, null, result);
|
|
// })
|
|
}
|
|
|
|
//
|
|
const reloadSingleChartsRecognition = (time: string, elementCode, result: CustomeArray<any>) => {
|
|
const params = prepareApiParams(time, elementCode)
|
|
get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
|
|
if (response.state != 0) {
|
|
setChartsRecognitionResult(time, response.message, null, result);
|
|
return;
|
|
}
|
|
setChartsRecognitionResult(time, response.message, response.data, result);
|
|
}).catch(error => {
|
|
setChartsRecognitionResult(time, error.message, null, result);
|
|
})
|
|
}
|
|
|
|
const setCloudRecognitionResult = (capacity: number, time: string, message: string, data: any, result: CustomeArray<any>) => {
|
|
result.push({
|
|
time: time,
|
|
message: message,
|
|
data: data == null ? null : JSON.parse(data).slice(0, capacity)
|
|
})
|
|
}
|
|
//
|
|
const setChartsRecognitionResult = (time: string, message: string, data: any, result: CustomeArray<any>) => {
|
|
result.push({
|
|
time: time,
|
|
message: message,
|
|
data: data == null ? null : JSON.parse(data)
|
|
})
|
|
}
|
|
|
|
const initEcharts = (name) => {
|
|
if (name === 'boundary-layer-height') {
|
|
|
|
} else if (name === 'optical-property') {
|
|
opticalThicknessInit()
|
|
} else if (name === 'aerosol-product') {
|
|
LidarRatioInit()
|
|
boundaryLayerHeightInit()
|
|
} else if (name === 'BingoCloud') {
|
|
cloudsHeightInit()
|
|
cloudTopHeightInit()
|
|
}
|
|
}
|
|
|
|
//区域切换
|
|
const onRegionClick = (region) => {
|
|
options.currentRegion = region;
|
|
setTimeout(() => {
|
|
initEcharts(options.currentRegion)
|
|
|
|
// reloadChangeData()
|
|
elementChange(options.currentElement)
|
|
}, 500)
|
|
}
|
|
|
|
//要素选择
|
|
// const onElementClick = (element, type) => {
|
|
// options.currentElement = element;
|
|
// options.currentType = type;
|
|
// options.date = options.currentTime;
|
|
// setTimeout(() => {
|
|
// }, 500)
|
|
// cancelActive();
|
|
// setTitle(moment(options.date));
|
|
// activeImage();
|
|
// }
|
|
|
|
// const setTitle = (date) => {
|
|
// options.title = date.format('YYYY.MM.DD') + ' ' + options.currentType;
|
|
// }
|
|
|
|
// const activeImage = () => {
|
|
// options.imgUrl = RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, moment(options.currentTime, 'YYYY-MM-DD'));
|
|
// options.previewUrl = [options.imgUrl];
|
|
//
|
|
// options.signalPBLHImgUrl = RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, moment(options.currentTime, 'YYYY-MM-DD'));
|
|
// options.signalPBLHPreviewUrl = [options.signalPBLHImgUrl];
|
|
// }
|
|
|
|
// const onImageLoad = (event) => {
|
|
// if (event.currentTarget.getAttribute('src') !== '/images/default-picture.png')
|
|
// converToBase64(options.imgUrl);
|
|
// else
|
|
// return
|
|
// }
|
|
|
|
// const onDownloadClick = () => {
|
|
// post("/image/createGif", prepareParams(), 'application/json').then((response: any) => {
|
|
// if (response.error != 0) {
|
|
// console.log(response.message);
|
|
// return;
|
|
// }
|
|
//
|
|
// fetch(response.data).then(res => {
|
|
// return res.blob();
|
|
// }).then(blob => {
|
|
// let reader = new FileReader();
|
|
// reader.onloadend = function () {
|
|
// options.downloadSrc = reader.result;
|
|
//
|
|
// setTimeout(() => {
|
|
// document.getElementById("radarDownload").click();
|
|
// options.downloadSrc = null;
|
|
// }, 500);
|
|
// };
|
|
// reader.readAsDataURL(blob);
|
|
// }).catch(console.error);
|
|
// })
|
|
// }
|
|
|
|
//参数准备
|
|
// const prepareParams = () => {
|
|
// return {
|
|
// model: 'radar',
|
|
// station: options.currentRegion,
|
|
// elementCode: options.currentElement,
|
|
// type: null,
|
|
// time: moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss"),
|
|
// urls: prepareUrls()
|
|
// }
|
|
// }
|
|
|
|
// const prepareUrls = () => {
|
|
// let urls = [];
|
|
// for (let index = 0, len = options.times.length; index < len; index++) {
|
|
// let time = moment(options.times[index].date);
|
|
//
|
|
// if (options.currentElement === 'PBLH') {
|
|
// urls.push(
|
|
// RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time),
|
|
// RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, time)
|
|
// );
|
|
// } else
|
|
// urls.push(RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time));
|
|
// }
|
|
//
|
|
// console.log(urls)
|
|
// return urls;
|
|
// }
|
|
|
|
// const converToBase64 = (path) => {
|
|
// let img = new Image();
|
|
// img.src = path;
|
|
// let canvas = document.createElement("canvas") as HTMLCanvasElement;
|
|
// canvas.width = img.width;
|
|
// canvas.height = img.height;
|
|
//
|
|
// let ctx = canvas.getContext("2d");
|
|
// let base64 = '';
|
|
//
|
|
// img.setAttribute("crossOrigin", 'Anonymous')
|
|
// img.onload = function () {
|
|
// ctx.drawImage(img, 0, 0);
|
|
// base64 = canvas.toDataURL("image/png");
|
|
// options.downloadImgUrl = base64;
|
|
// };
|
|
// }
|
|
|
|
//初始化时间轴
|
|
const initTimeLine = () => {
|
|
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')
|
|
for (let i = 0; i < 24; i++) {
|
|
options.times.push({
|
|
hour: now.add(-1, 'hour').format('HH'),
|
|
day: now.format('MM/DD'),
|
|
date: now.format('YYYY-MM-DD HH'),
|
|
})
|
|
}
|
|
options.times.reverse();
|
|
options.index = options.times.length - 1;
|
|
}
|
|
|
|
const initTimeLineDay = () => {
|
|
if (options.timeLineFormat == "day") return;
|
|
options.timeLineFormat = "day";
|
|
options.times = [];
|
|
options.currentTime = moment(options.date).format('YYYY-MM-DD');
|
|
let now = moment(options.date).add(1, 'd');
|
|
let day = new Date(now.year(), now.month() + 1, 0);
|
|
for (let i = 0; i < 24; i++) {
|
|
options.times.push({
|
|
day: now.add(-1, 'd').format('DD'),
|
|
month: now.format('MM'),
|
|
date: now.format('YYYY-MM-DD'),
|
|
})
|
|
}
|
|
options.times.reverse();
|
|
options.index = options.times.length - 1;
|
|
}
|
|
|
|
|
|
//时间选择
|
|
const onTimeClick = (time, index) => {
|
|
options.currentTime = time.date;
|
|
options.date = moment(time.date).format('YYYY-MM-DD HH');
|
|
elementChange(options.currentElement)
|
|
options.index = index;
|
|
// reloadChangeData()
|
|
// cancelActive();
|
|
// setTitle(moment(time.date, 'YYYY-MM-DD'));
|
|
// activeImage();
|
|
}
|
|
|
|
const cancelActive = () => {
|
|
clearTimer();
|
|
options.isPlay = false;
|
|
}
|
|
|
|
//上一天
|
|
const onPrevDayClick = () => {
|
|
|
|
let element = getCurrentElement();
|
|
if (moment(options.date).add(-1, 'day').format('YYYY-MM-DD') == moment().format('YYYY-MM-DD') ) {
|
|
options.date = moment().format('YYYY-MM-DD HH')
|
|
}
|
|
else options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
|
|
options.currentTime = options.date;
|
|
options.index--;
|
|
if (options.index < 0) {
|
|
options.index = element.childElementCount - 1;
|
|
options.date = options.times[options.times.length - 1].date
|
|
}
|
|
options.timeLineFormat = "day";
|
|
initTimeLine()
|
|
// cancelActive();
|
|
// setCurrentPlayElement(element)
|
|
elementChange(options.currentElement)
|
|
}
|
|
|
|
const onNextDayClick = () => {
|
|
if (moment(options.date).add(1, 'day').format('YYYY-MM-DD') == moment().format('YYYY-MM-DD') ) {
|
|
options.date = moment().format('YYYY-MM-DD HH')
|
|
}
|
|
else options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD')
|
|
options.timeLineFormat = "day";
|
|
initTimeLine()
|
|
elementChange(options.currentElement)
|
|
}
|
|
|
|
//上一张图片
|
|
// const onPrevImgClick = () => {
|
|
// let element = getCurrentElement();
|
|
//
|
|
// options.index--;
|
|
// if (options.index < 0)
|
|
// options.index = element.childElementCount - 1;
|
|
//
|
|
// setCurrentPlayElement(element);
|
|
// }
|
|
|
|
// const onNextImgClick = () => {
|
|
// let element = getCurrentElement();
|
|
//
|
|
// options.index++;
|
|
// if (options.index > element.childElementCount - 1)
|
|
// options.index = 0;
|
|
//
|
|
// setCurrentPlayElement(element);
|
|
// }
|
|
|
|
//重置
|
|
// const onRefreshClick = () => {
|
|
// options.date = moment('2021-11-15').format('YYYY-MM-DD');
|
|
// options.currentTime = options.times[options.times.length - 1].date;
|
|
//
|
|
// cancelActive();
|
|
// activeImage();
|
|
// }
|
|
//
|
|
// const onPlayClick = () => {
|
|
// options.isPlay = !options.isPlay;
|
|
// if (options.isPlay) {
|
|
// timeExcute();
|
|
// } else {
|
|
// clearTimer();
|
|
// }
|
|
// }
|
|
|
|
// const timeExcute = () => {
|
|
// clearTimer();
|
|
//
|
|
// let element = getCurrentElement();
|
|
//
|
|
// timer = setInterval(() => {
|
|
// options.index++;
|
|
// if (options.index > element.childElementCount - 1)
|
|
// options.index = 0;
|
|
// setCurrentPlayElement(element);
|
|
// }, 3000)
|
|
// }
|
|
|
|
const clearTimer = () => {
|
|
if (timer)
|
|
clearInterval(timer);
|
|
}
|
|
|
|
const getCurrentElement = () => {
|
|
return document.querySelector('.times');
|
|
}
|
|
|
|
// const setCurrentPlayElement = (element) => {
|
|
// for (let i = 0; i < element.childElementCount; i++)
|
|
// element.children[i].classList.remove('active');
|
|
//
|
|
// element.children[options.index].classList.add('active');
|
|
// options.currentTime = options.times[options.index].date;
|
|
// setTitle(moment(options.times[options.index].date, 'YYYY-MM-DD'));
|
|
// activeImage();
|
|
// }
|
|
|
|
const onChange = (e) => {
|
|
if (options.currentElement === 'extinction' || options.currentElement=== 'lidarratio' || options.currentElement === 'watervapor') {
|
|
options.timeLineFormat = "hour";
|
|
initTimeLineDay()
|
|
}
|
|
else {
|
|
if (moment(e).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD') ) {
|
|
options.date = moment().format('YYYY-MM-DD HH')
|
|
}
|
|
options.timeLineFormat = "day";
|
|
initTimeLine();
|
|
}
|
|
elementChange(options.currentElement)
|
|
// setTitle(moment(options.date));
|
|
// activeImage();
|
|
}
|
|
|
|
// const onSaveClick = () => {
|
|
// let pictures = document.getElementById('pictures');
|
|
// options.urls = [options.imgUrl, options.signalPBLHImgUrl];
|
|
//
|
|
// for (let i = 0; i < options.urls.length; i++) {
|
|
// let img = new Image();
|
|
// img.src = options.urls[i];
|
|
// let canvas = document.createElement("canvas") as HTMLCanvasElement;
|
|
// canvas.width = img.width;
|
|
// canvas.height = img.height;
|
|
//
|
|
// let ctx = canvas.getContext("2d");
|
|
// let base64 = "";
|
|
//
|
|
// img.setAttribute("crossOrigin", 'Anonymous');
|
|
// img.onload = () => {
|
|
// ctx.drawImage(img, 0, 0);
|
|
// base64 = canvas.toDataURL("image/png");
|
|
// pictures.children[i].setAttribute('href', base64);
|
|
// setTimeout(() => {
|
|
// let button: HTMLElement = pictures.children[i] as HTMLElement;
|
|
// button.click();
|
|
// pictures.children[i].setAttribute('href', null);
|
|
// }, 500);
|
|
// };
|
|
// }
|
|
// }
|
|
|
|
|
|
const prepareApiParams = (time, variableName) => {
|
|
if (variableName == 'lidarratio') {
|
|
return {
|
|
date: moment(time,'MM_DD_hh').format('M_D'),
|
|
var: variableName,
|
|
locate: options.currentRegion
|
|
}
|
|
}
|
|
return {
|
|
date: time,
|
|
var: variableName,
|
|
locate: options.currentRegion
|
|
}
|
|
}
|
|
|
|
// watch(()=>options.date,() =>{
|
|
// reloadChangeData()
|
|
// },{
|
|
// deep: true,
|
|
// immediate: true
|
|
// })
|
|
|
|
const verify = () => {
|
|
ElMessage({
|
|
showClose: true,
|
|
message: '请求接口无数据',
|
|
icon: '',
|
|
type: null,
|
|
grouping: true,
|
|
duration: 1500
|
|
})
|
|
}
|
|
|
|
const error = () => {
|
|
ElMessage({
|
|
showClose: true,
|
|
message: '请求接口错误',
|
|
icon: '',
|
|
type: null,
|
|
grouping: true,
|
|
duration: 1500
|
|
})
|
|
}
|
|
|
|
const onElementClick = (element) => {
|
|
options.currentElement = element
|
|
elementChange(element)
|
|
}
|
|
|
|
const onDayClick = (time, index) => {
|
|
options.timeLineFormat = "hour"
|
|
options.currentTime = time.date;
|
|
options.date = moment(time.date).format('YYYY-MM-DD');
|
|
options.index = index;
|
|
elementChange(options.currentElement)
|
|
}
|
|
|
|
const onPrevDayTimeClick = () => {
|
|
options.timeLineFormat = "hour"
|
|
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
|
|
initTimeLineDay()
|
|
elementChange(options.currentElement)
|
|
}
|
|
|
|
const onNextDayTimeClick = () => {
|
|
options.timeLineFormat = "hour"
|
|
options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD');
|
|
initTimeLineDay()
|
|
elementChange(options.currentElement)
|
|
}
|
|
|
|
return {
|
|
...toRefs(options),
|
|
onRegionClick,
|
|
// onElementClick,
|
|
onTimeClick,
|
|
onPrevDayClick,
|
|
onNextDayClick,
|
|
// onPrevImgClick,
|
|
// onNextImgClick,
|
|
// onRefreshClick,
|
|
// onPlayClick,
|
|
onChange,
|
|
// onImageLoad,
|
|
// onDownloadClick,
|
|
// onSaveClick,
|
|
onTabClick,
|
|
onElementClick,
|
|
onDayClick,
|
|
onPrevDayTimeClick,
|
|
onNextDayTimeClick
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.main {
|
|
.container {
|
|
:deep(.el-date-editor), .control-btn, :deep(.el-select), .unit {
|
|
padding-top: 0.08rem;
|
|
}
|
|
|
|
:deep(.el-input__prefix) {
|
|
top: 4px;
|
|
}
|
|
|
|
.toolbar {
|
|
//padding: 0.15rem 0;
|
|
padding-bottom: 7px;
|
|
|
|
.times {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.raman-picture-container {
|
|
width: calc(~"100% - 1rem");
|
|
margin: 0 auto;
|
|
|
|
.special-picture {
|
|
//:deep(.el-loading-mask) {
|
|
// top: 64px !important;
|
|
//}
|
|
}
|
|
|
|
.picture {
|
|
width: 100%;
|
|
position: relative;
|
|
margin-top: 30px;
|
|
|
|
#watervapor_single_chart {
|
|
transform: translateX(9%) translateY(15px);
|
|
//transform: scale(1.0, 0.8) translateX(539px);
|
|
}
|
|
|
|
#extinction_optics_chart {
|
|
//transform: scale(0.56, 0.85) translateX(-32%);
|
|
transform: translateX(9%) translateY(15px);
|
|
|
|
}
|
|
|
|
#pm2_5_chart {
|
|
transform: translateX(-50px) translateY(50px);
|
|
}
|
|
|
|
#pm10_chart {
|
|
transform: translateX(-50px) translateY(50px);
|
|
}
|
|
|
|
#backscatter_chart {
|
|
transform: translateX(9%) translateY(50px);
|
|
//transform: scale(0.6, 0.85) translateX(-76px);
|
|
}
|
|
|
|
#cloud_sol_chart {
|
|
transform: translateX(9%) translateY(50px);
|
|
//transform: scale(0.6, 0.85) translate(-12%, -12px);
|
|
}
|
|
|
|
//#cloud_recognition_chart,
|
|
#extinction_chart-before,
|
|
#extinction_chart-after,
|
|
#watervapor_chart-before,
|
|
#watervapor_chart-after
|
|
{
|
|
transform: translateX(-50px) translateY(50px);
|
|
//transform: scale(0.6, 0.8) translateX(-260px);
|
|
//transform: scale(0.6, 0.8) translateX(-131px);
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
font-size: 0.22rem;
|
|
position: absolute;
|
|
left: 2.10rem;
|
|
top: 0.30rem;
|
|
z-index: 100;
|
|
}
|
|
|
|
.special-title {
|
|
left: 48%;
|
|
}
|
|
|
|
.pblh-image {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|