|
|
|
@ -45,9 +45,8 @@ |
|
|
|
<div class="container panel"> |
|
|
|
<div class="toolbar"> |
|
|
|
|
|
|
|
|
|
|
|
<!--6分钟--> |
|
|
|
<div class="times" v-if="currentElement === 'six-minute'"> |
|
|
|
<div class="times sixMinute" v-if="currentElement === 'six-minute'"> |
|
|
|
<div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}"> |
|
|
|
<span class="hour">{{time.hour}}</span> |
|
|
|
<span class="time" @click="onTimeClick(time, index)">{{time.minute}}</span> |
|
|
|
@ -89,11 +88,11 @@ |
|
|
|
<!-- <div class="refresh-btn" @click="onRefreshClick">--> |
|
|
|
<!-- <img src="/images/refresh.png" />--> |
|
|
|
<!-- </div>--> |
|
|
|
<div class="btns-group" v-if="currentTab==='kuoxian' || currentTab==='T-logP'"> |
|
|
|
<span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span> |
|
|
|
<a @click="onDownloadClick">下载动画</a> |
|
|
|
<a id="weboDownload" download :href="downloadSrc" class="hide">下载隐藏层</a> |
|
|
|
</div> |
|
|
|
<!-- <div class="btns-group" v-if="currentTab==='kuoxian' || currentTab==='T-logP'">--> |
|
|
|
<!-- <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>--> |
|
|
|
<!-- <a @click="onDownloadClick">下载动画</a>--> |
|
|
|
<!-- <a id="weboDownload" download :href="downloadSrc" class="hide">下载隐藏层</a>--> |
|
|
|
<!-- </div>--> |
|
|
|
</div> |
|
|
|
<div class="picture-view"> |
|
|
|
<!-- <span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span>--> |
|
|
|
@ -103,78 +102,44 @@ |
|
|
|
<!-- <div class="download-pictures hide" id="pictures">--> |
|
|
|
<!-- <a v-for="(url, index) in urls" :key="index" download></a>--> |
|
|
|
<!-- </div>--> |
|
|
|
|
|
|
|
<!--质控对比--> |
|
|
|
<div class="picture-container contrast-picture-container" v-if="currentTab === 'MWR'"> |
|
|
|
<div class="picture"> |
|
|
|
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度原始数据</h2> |
|
|
|
<canvas id="original-data-canvas"></canvas> |
|
|
|
<!-- <el-image--> |
|
|
|
<!-- :src="contrast.noQCImgUrl"--> |
|
|
|
<!-- :preview-src-list="contrast.noQCImgPreview"--> |
|
|
|
<!-- :initial-index="0"--> |
|
|
|
<!-- fit="contain"--> |
|
|
|
<!-- @load="onImageLoad"--> |
|
|
|
<!-- >--> |
|
|
|
<!-- <template #error>--> |
|
|
|
<!-- <div class="image-slot">--> |
|
|
|
<!-- <img src="/images/null-picture.png" />--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- <p class="image-tip">暂无图片</p>--> |
|
|
|
<!-- </template>--> |
|
|
|
<!-- <template #placeholder>--> |
|
|
|
<!-- <div class="image-placeholder">正在加载...</div>--> |
|
|
|
<!-- </template>--> |
|
|
|
<!-- </el-image>--> |
|
|
|
<canvas id='original-data-canvas'></canvas> |
|
|
|
</div> |
|
|
|
<div class="picture"> |
|
|
|
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度异常值标记</h2> |
|
|
|
<canvas id="abnormal-canvas"></canvas> |
|
|
|
<!-- <el-image--> |
|
|
|
<!-- :src="contrast.checkImgUrl"--> |
|
|
|
<!-- :preview-src-list="contrast.checkImgPreview"--> |
|
|
|
<!-- :initial-index="0"--> |
|
|
|
<!-- fit="contain"--> |
|
|
|
<!-- @load="onImageLoad"--> |
|
|
|
<!-- @mousemove="onImageMove"--> |
|
|
|
<!-- >--> |
|
|
|
<!-- <template #error>--> |
|
|
|
<!-- <div class="image-slot">--> |
|
|
|
<!-- <img src="/images/null-picture.png" />--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- <p class="image-tip">暂无图片</p>--> |
|
|
|
<!-- </template>--> |
|
|
|
<!-- <template #placeholder>--> |
|
|
|
<!-- <div class="image-placeholder">正在加载...</div>--> |
|
|
|
<!-- </template>--> |
|
|
|
<!-- </el-image>--> |
|
|
|
<canvas id='abnormal-canvas'></canvas> |
|
|
|
</div> |
|
|
|
<div class="picture"> |
|
|
|
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度野点插补结果</h2> |
|
|
|
<canvas id="interpolate-canvas"></canvas> |
|
|
|
<canvas id='interpolate-canvas'></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="picture-container" v-if="currentTab !== 'MWR'"> |
|
|
|
<!-- <h2 class="title">{{title}}</h2> --> |
|
|
|
<!--BP反演产品--> |
|
|
|
<div class="picture-container contrast-picture-container" v-if="currentTab === 'shixu_BPFY'"> |
|
|
|
<div class="picture"> |
|
|
|
<el-image |
|
|
|
:src="imgUrl" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="0" |
|
|
|
fit="contain" |
|
|
|
@load="onImageLoad" |
|
|
|
> |
|
|
|
<template #error> |
|
|
|
<div class="image-slot"> |
|
|
|
<img src="/images/null-picture.png" /> |
|
|
|
</div> |
|
|
|
<p class="image-tip">暂无图片</p> |
|
|
|
</template> |
|
|
|
<template #placeholder> |
|
|
|
<div class="image-placeholder">正在加载...</div> |
|
|
|
</template> |
|
|
|
</el-image> |
|
|
|
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演温度</h2> |
|
|
|
<canvas id="BP-temp"></canvas> |
|
|
|
</div> |
|
|
|
<div class="picture"> |
|
|
|
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演相对湿度</h2> |
|
|
|
<canvas id="BP-relative-humidity"></canvas> |
|
|
|
</div> |
|
|
|
<div class="picture"> |
|
|
|
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演水汽密度</h2> |
|
|
|
<canvas id="BP-vapor-density"></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="picture-container contrast-picture-container" v-if="currentTab === 'kuoxian'"> |
|
|
|
<h2 >{{ BPTitleTime }}温度、相对湿度、水汽密度廓线</h2> |
|
|
|
<div id="container" style="width:100%;height:100%"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -183,15 +148,14 @@ |
|
|
|
<script lang="ts"> |
|
|
|
import { onMounted, reactive, toRefs } from 'vue'; |
|
|
|
import moment from "moment"; |
|
|
|
import { MicrowaveRadiationConfig } from '../uilts/Config'; |
|
|
|
import { post, get } from '../uilts/axios'; |
|
|
|
import { get } from '../uilts/axios'; |
|
|
|
import {BoxDrawer, ColorChart, createEmptyCanvas} from "../uilts/box-drawer"; |
|
|
|
import {ElMessage} from "element-plus"; |
|
|
|
|
|
|
|
import * as Highcharts from 'highcharts'; |
|
|
|
export default { |
|
|
|
name: 'MicrowaveRadiation', |
|
|
|
setup() { |
|
|
|
let timer = null; |
|
|
|
let verticalProfileHighChart = null; |
|
|
|
|
|
|
|
let options = reactive({ |
|
|
|
currentTab: 'MWR', |
|
|
|
@ -200,7 +164,7 @@ |
|
|
|
currentElement: 'six-minute', |
|
|
|
currentCategory: 'CAPE', |
|
|
|
date: moment('2021-12-05').format('YYYY-MM-DD'), |
|
|
|
currentHour: '24', |
|
|
|
currentHour: '00', |
|
|
|
hours: [], |
|
|
|
times: [], |
|
|
|
days: [], |
|
|
|
@ -217,85 +181,155 @@ |
|
|
|
noQCImgPreview: [], |
|
|
|
checkImgUrl: '', |
|
|
|
checkImgPreview: [], |
|
|
|
fillingImgUrl: '/images/picture.png', |
|
|
|
fillingImgPreview: ['/images/picture.png'] |
|
|
|
fillingImgUrl: '', |
|
|
|
fillingImgPreview: [''] |
|
|
|
}, |
|
|
|
urls: [], |
|
|
|
titleStartTime: null, |
|
|
|
titleEndTime: null, |
|
|
|
apiTimeLength: -2, |
|
|
|
apiTimeInterval: 6, |
|
|
|
onPitchTime : 0 |
|
|
|
onPitchTime : 0, |
|
|
|
BPTitleTime:null, |
|
|
|
|
|
|
|
highChartXAxis: [], |
|
|
|
}); |
|
|
|
|
|
|
|
let drawers = { |
|
|
|
originalDrawer: null, |
|
|
|
interpolateDrawer: null, |
|
|
|
abnormalDrawer: null |
|
|
|
abnormalDrawer: null, |
|
|
|
BPTempDrawer: null, |
|
|
|
BPRelativeHumidity: null, |
|
|
|
BPVaporDensity: null |
|
|
|
} |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
// initEcharts(null) |
|
|
|
initTimeLine() |
|
|
|
initHours(); |
|
|
|
setTimeout(() => { |
|
|
|
changeColor() |
|
|
|
},0) |
|
|
|
},100) |
|
|
|
reloadData() |
|
|
|
}) |
|
|
|
|
|
|
|
// const onTabClick = (name) => { |
|
|
|
// options.currentTab = name; |
|
|
|
// options.currentElement = 'six-minute' |
|
|
|
// if (options.currentTab === 'MWR') { |
|
|
|
// |
|
|
|
// } |
|
|
|
// cancelActive(); |
|
|
|
// } |
|
|
|
}) |
|
|
|
|
|
|
|
const onTabClick = (name) => { |
|
|
|
options.currentTab = name; |
|
|
|
options.currentElement = 'six-minute' |
|
|
|
reloadData() |
|
|
|
// initTimeLine() |
|
|
|
// if ( options.currentTab === 'MWR' ) { |
|
|
|
// options.date = moment('2021-11-10').format('YYYY-MM-DD'); |
|
|
|
// options.currentElement = 'TEMP'; |
|
|
|
// options.index = options.days.length - 1; |
|
|
|
// initDays(); |
|
|
|
|
|
|
|
// setTimeout(() => activeContrastImage(), 50) |
|
|
|
// } else { |
|
|
|
// |
|
|
|
// if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') { |
|
|
|
// // options.currentElement = 'TEMP'; |
|
|
|
// setTimeout(()=>changeColor(),100) ; |
|
|
|
// } |
|
|
|
// else if (options.currentTab === 'shixu') { |
|
|
|
// options.date = moment('2021-12-04').format('YYYY-MM-DD'); |
|
|
|
// // options.currentElement = 'CAPE'; |
|
|
|
// } |
|
|
|
// |
|
|
|
// options.date = moment('2021-12-05').format('YYYY-MM-DD'); |
|
|
|
// options.index = options.times.length - 1; |
|
|
|
// |
|
|
|
// if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') { |
|
|
|
// options.date = moment('2021-12-04').format('YYYY-MM-DD'); |
|
|
|
// // options.currentElement = 'TEMP'; |
|
|
|
// options.currentHour = '23'; |
|
|
|
// } else if (options.currentTab === 'shixu') { |
|
|
|
// options.date = moment('2021-12-04').format('YYYY-MM-DD'); |
|
|
|
// // options.currentElement = 'CAPE'; |
|
|
|
// options.currentHour = '23'; |
|
|
|
// } else if (options.currentTab === 'T-logP') { |
|
|
|
// options.date = moment('2021-12-05').format('YYYY-MM-DD'); |
|
|
|
// // options.currentElement = 'TEMP'; |
|
|
|
// options.currentHour = '16'; |
|
|
|
// } |
|
|
|
// initTimeLine(); |
|
|
|
// // setTimeout(() => activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute()), 50) |
|
|
|
// } |
|
|
|
// cancelActive(); |
|
|
|
setTimeout( () => { |
|
|
|
initEcharts(name); |
|
|
|
reloadChangeData(); |
|
|
|
},500) |
|
|
|
} |
|
|
|
|
|
|
|
const initEcharts = (name) => { |
|
|
|
if ( name === 'kuoxian'){ |
|
|
|
verticalProfileHighChart = Highcharts.chart('container', { |
|
|
|
credits: { |
|
|
|
enabled: false |
|
|
|
}, |
|
|
|
chart: { |
|
|
|
type: 'line', |
|
|
|
inverted: true |
|
|
|
}, |
|
|
|
title: { |
|
|
|
text: null |
|
|
|
}, |
|
|
|
subtitle: { |
|
|
|
text: null |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
reversed: false, |
|
|
|
title: { |
|
|
|
enabled: true, |
|
|
|
text: '高度(km)' |
|
|
|
}, |
|
|
|
categories: options.highChartXAxis, |
|
|
|
showLastLabel: true, |
|
|
|
showFirstLabel: true, |
|
|
|
}, |
|
|
|
yAxis: [ |
|
|
|
{ |
|
|
|
title: { |
|
|
|
text: '温度T(degree)', |
|
|
|
}, |
|
|
|
max: 10, |
|
|
|
min: -40, |
|
|
|
tickInterval: 10, |
|
|
|
tickAmount: 6, |
|
|
|
lineWidth: 1, |
|
|
|
opposite:true |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: { |
|
|
|
text: '相对湿度RH(%)' |
|
|
|
}, |
|
|
|
max: 100, |
|
|
|
min: 0, |
|
|
|
tickInterval: 10, |
|
|
|
tickAmount: 11, |
|
|
|
lineWidth: 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: { |
|
|
|
text: '水汽密度Q(g/kg)' |
|
|
|
}, |
|
|
|
labels: { |
|
|
|
formatter: function() { |
|
|
|
return this.value.toFixed(1); |
|
|
|
} |
|
|
|
}, |
|
|
|
// allowDecimals: true, |
|
|
|
max: 10.0, |
|
|
|
min: 0.0, |
|
|
|
tickInterval: 1.0, |
|
|
|
tickAmount: 11, |
|
|
|
lineWidth: 1, |
|
|
|
}, |
|
|
|
], |
|
|
|
legend: { |
|
|
|
layout: 'vertical', |
|
|
|
align: 'right', |
|
|
|
verticalAlign: 'middle' |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
headerFormat: '<b>{series.name}</b><br/>', |
|
|
|
pointFormat: '{point.category} KM: {point.y}' |
|
|
|
// pointFormatter: function () { |
|
|
|
// console.log(this) |
|
|
|
// return '{point.category} KM: {point.y}' |
|
|
|
// } |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '温度', |
|
|
|
data: [], |
|
|
|
yAxis: 0, |
|
|
|
tooltip: { |
|
|
|
valueSuffix: '℃' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '相对湿度', |
|
|
|
data: [], |
|
|
|
yAxis: 1, |
|
|
|
tooltip: { |
|
|
|
valueSuffix: '%' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '水汽密度', |
|
|
|
data: [], |
|
|
|
yAxis: 2, |
|
|
|
tooltip: { |
|
|
|
valueSuffix: 'g/Kg' |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const onRegionClick = (region) => { |
|
|
|
@ -313,10 +347,6 @@ |
|
|
|
options.currentElement = element; |
|
|
|
options.onPitchTime = onPitchTime |
|
|
|
initTimeLine(reloadData) |
|
|
|
// if (options.currentTab === 'MWR') |
|
|
|
// activeContrastImage(); |
|
|
|
// else |
|
|
|
// activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); |
|
|
|
if (element === 'six-minute') { |
|
|
|
setTimeout(() => { |
|
|
|
changeColor() |
|
|
|
@ -452,23 +482,6 @@ |
|
|
|
callback(params); |
|
|
|
} |
|
|
|
|
|
|
|
// const initDays = () => { |
|
|
|
// options.days = []; |
|
|
|
// options.currentTime = moment(options.date).format('YYYY-MM-DD'); |
|
|
|
// |
|
|
|
// let now = moment(options.date).add(1, 'day'); |
|
|
|
// |
|
|
|
// for (let i = 0; i < 10 ; i++) { |
|
|
|
// options.days.push({ |
|
|
|
// day: now.add(-1, 'day').format('DD'), |
|
|
|
// date: now.format('YYYY-MM-DD'), |
|
|
|
// }) |
|
|
|
// } |
|
|
|
// |
|
|
|
// options.days.reverse(); |
|
|
|
// options.index = options.days.length - 1; |
|
|
|
// } |
|
|
|
|
|
|
|
const initHours = () => { |
|
|
|
for (let i = 0; i < 24; i++) { |
|
|
|
options.hours.push({ |
|
|
|
@ -479,16 +492,10 @@ |
|
|
|
} |
|
|
|
|
|
|
|
const onTimeClick = (time, index) => { |
|
|
|
options.currentTime = time.date; |
|
|
|
reloadQualityComparison(); |
|
|
|
// options.currentTime = time.date; |
|
|
|
options.currentTime = time.date; |
|
|
|
options.titleStartTime = moment(time.date).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:ss') |
|
|
|
options.titleEndTime = time.date |
|
|
|
reloadData() |
|
|
|
// options.index = index; |
|
|
|
// test() |
|
|
|
// cancelActive(); |
|
|
|
// activeImage(moment(time.date).hour(), moment(time.date).minute()); |
|
|
|
reloadChangeData() |
|
|
|
} |
|
|
|
|
|
|
|
// const onDayClick = (time, index) => { |
|
|
|
@ -509,8 +516,8 @@ |
|
|
|
initTimeLine() |
|
|
|
options.titleStartTime = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30).format('YYYY-MM-DD HH:mm:ss'); |
|
|
|
options.titleEndTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss'); |
|
|
|
reloadData() |
|
|
|
|
|
|
|
reloadChangeData() |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
//下一天 |
|
|
|
@ -519,7 +526,7 @@ |
|
|
|
initTimeLine() |
|
|
|
options.titleStartTime = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30).format('YYYY-MM-DD HH:mm:ss'); |
|
|
|
options.titleEndTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss'); |
|
|
|
reloadData() |
|
|
|
reloadChangeData() |
|
|
|
} |
|
|
|
|
|
|
|
// const onPrevImgClick = () => { |
|
|
|
@ -549,22 +556,14 @@ |
|
|
|
// setCurrentPlayElement(element); |
|
|
|
// } |
|
|
|
//重置时间 |
|
|
|
// const onRefreshClick = () => { |
|
|
|
// // cancelActive(); |
|
|
|
// let element = getCurrentElement(); |
|
|
|
// // if (options.currentTab === 'MWR') { |
|
|
|
// // options.date = moment('2021-11-10').format('YYYY-MM-DD'); |
|
|
|
// // options.currentTime = options.date; |
|
|
|
// // element.children[options.days.length - 1].classList.add('active'); |
|
|
|
// // activeContrastImage(); |
|
|
|
// // } else { |
|
|
|
// options.currentHour = '24'; |
|
|
|
// options.date = moment('2021-12-05').format('YYYY-MM-DD'); |
|
|
|
// options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm'); |
|
|
|
// element.children[options.times.length - 1].classList.add('active'); |
|
|
|
// // activeImage(moment(options.currentTime).hour(), moment(options.currentTime).minute(options.currentTab === 'T-logP' ? 0 : 30)); |
|
|
|
// // } |
|
|
|
// } |
|
|
|
const onRefreshClick = () => { |
|
|
|
let element = getCurrentElement(); |
|
|
|
options.currentHour = '00'; |
|
|
|
options.date = moment('2021-12-05').format('YYYY-MM-DD'); |
|
|
|
element.children[options.times.length - 1].classList.add('active'); |
|
|
|
initTimeLine() |
|
|
|
reloadChangeData() |
|
|
|
} |
|
|
|
|
|
|
|
//播放动画 |
|
|
|
const onPlayClick = () => { |
|
|
|
@ -605,22 +604,13 @@ |
|
|
|
element.children[options.index].classList.add('active'); |
|
|
|
if(options.currentTab === 'MWR') { |
|
|
|
options.currentTime = options.days[options.index].date; |
|
|
|
// activeContrastImage(); |
|
|
|
} |
|
|
|
else { |
|
|
|
options.currentTime = options.times[options.index].date; |
|
|
|
// activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); |
|
|
|
} |
|
|
|
options.currentTime = options.times[options.index].date;} |
|
|
|
} |
|
|
|
|
|
|
|
const onChange = () => { |
|
|
|
initTimeLine(reloadData); |
|
|
|
|
|
|
|
// if(options.currentTab === 'MWR') { |
|
|
|
// // activeContrastImage(); |
|
|
|
// } else { |
|
|
|
// // activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); |
|
|
|
// } |
|
|
|
initTimeLine(reloadChangeData); |
|
|
|
} |
|
|
|
|
|
|
|
const reloadData = () => { |
|
|
|
@ -628,6 +618,27 @@ |
|
|
|
reloadQualityInterpolation() |
|
|
|
} |
|
|
|
|
|
|
|
const reloadBPData = () => { |
|
|
|
reloadBPRelativeHumidity() |
|
|
|
reloadQualityInterpolation() |
|
|
|
reloadBPVaporDensity() |
|
|
|
} |
|
|
|
|
|
|
|
const BPBrokenLineData = () => { |
|
|
|
BPTempData() |
|
|
|
BPVaporDensityData() |
|
|
|
BPRelativeHumidityData() |
|
|
|
} |
|
|
|
const reloadChangeData = () => { |
|
|
|
if (options.currentTab === 'MWR') |
|
|
|
reloadData() |
|
|
|
else if (options.currentTab ==='shixu_BPFY') |
|
|
|
reloadBPData() |
|
|
|
else if (options.currentTab ==='kuoxian') { |
|
|
|
BPBrokenLineData() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// const onSaveClick = () => { |
|
|
|
// let pictures = document.getElementById('pictures'); |
|
|
|
// options.urls = [options.contrast.noQCImgUrl, options.contrast.checkImgUrl, options.contrast.fillingImgUrl]; |
|
|
|
@ -671,66 +682,154 @@ |
|
|
|
const reloadQualityComparison = () => { |
|
|
|
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); |
|
|
|
const params = prepareApiParams(401, startTime, options.titleEndTime); |
|
|
|
console.log(params); |
|
|
|
get('/njplatform/radardata/getOriginRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> { |
|
|
|
clearBoxDrawer(drawers.originalDrawer); |
|
|
|
clearBoxDrawer(drawers.abnormalDrawer); |
|
|
|
if (response.code != 200 || response.data.radar_data.length === 0){ |
|
|
|
// ElMessage.error({ |
|
|
|
// message: "请求失败", |
|
|
|
// type: 'error', |
|
|
|
// grouping: true, |
|
|
|
// customClass:'messageerror', |
|
|
|
// duration:0, |
|
|
|
// }); |
|
|
|
|
|
|
|
createEmptyCanvas('original-data-canvas', 1500, 500); |
|
|
|
createEmptyCanvas('abnormal-canvas', 1500, 500); |
|
|
|
return; |
|
|
|
} |
|
|
|
drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'original-data-canvas'); |
|
|
|
drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas'); |
|
|
|
options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image; |
|
|
|
options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image; |
|
|
|
drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'original-data-canvas','℃'); |
|
|
|
drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas','℃'); |
|
|
|
// options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image; |
|
|
|
// options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image; |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const clearBoxDrawer = (boxDrawer: BoxDrawer) => { |
|
|
|
if (boxDrawer == null) return; |
|
|
|
boxDrawer.close(); |
|
|
|
} |
|
|
|
|
|
|
|
const reloadQualityInterpolation = () => { |
|
|
|
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); |
|
|
|
const params = prepareApiParams(401, startTime, options.titleEndTime); |
|
|
|
get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> { |
|
|
|
|
|
|
|
clearBoxDrawer(drawers.interpolateDrawer); |
|
|
|
if (response.code != 200 || response.data.radar_data.length === 0){ |
|
|
|
// ElMessage.error({ |
|
|
|
// message: "请求失败", |
|
|
|
// type: 'error', |
|
|
|
// grouping: true, |
|
|
|
// customClass:'messageerror', |
|
|
|
// duration:0, |
|
|
|
// }); |
|
|
|
if (options.currentTab ==='MWR') |
|
|
|
createEmptyCanvas('interpolate-canvas', 1500, 500); |
|
|
|
else if(options.currentTab ==='shixu_BPFY') |
|
|
|
createEmptyCanvas('BP-temp', 1500, 500); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (options.currentTab ==='MWR') |
|
|
|
drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'interpolate-canvas','℃'); |
|
|
|
else if(options.currentTab ==='shixu_BPFY') |
|
|
|
drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareBPTempColors(), response.data, 'BP-temp','(degree)'); |
|
|
|
|
|
|
|
// options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image; |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//BP反演相对湿度 |
|
|
|
const reloadBPRelativeHumidity = () => { |
|
|
|
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); |
|
|
|
const params = prepareApiParams(404, startTime, options.titleEndTime); |
|
|
|
get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> { |
|
|
|
clearBoxDrawer(drawers.BPRelativeHumidity); |
|
|
|
if (response.code != 200 || response.data.radar_data.length === 0){ |
|
|
|
createEmptyCanvas('BP-relative-humidity', 1500, 500); |
|
|
|
return; |
|
|
|
} |
|
|
|
drawers.BPRelativeHumidity = new BoxDrawer(1500, 500, prepareBPRelativeHumidityColors(), response.data, 'BP-relative-humidity','(%)'); |
|
|
|
// options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image; |
|
|
|
}) |
|
|
|
} |
|
|
|
//水汽密度 |
|
|
|
const reloadBPVaporDensity = () => { |
|
|
|
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); |
|
|
|
const params = prepareApiParams(402, startTime, options.titleEndTime); |
|
|
|
get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> { |
|
|
|
console.log(response) |
|
|
|
clearBoxDrawer(drawers.BPVaporDensity); |
|
|
|
if (response.code != 200 || response.data.radar_data.length === 0){ |
|
|
|
createEmptyCanvas('BP-relative-humidity', 1500, 500); |
|
|
|
return; |
|
|
|
} |
|
|
|
drawers.BPVaporDensity = new BoxDrawer(1500, 500, prepareBPVaporDensityColors(), response.data, 'BP-vapor-density','(g/kg)'); |
|
|
|
// options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image; |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const BPTempData = () => { |
|
|
|
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); |
|
|
|
const params = prepareApiParams(401, startTime, options.titleEndTime); |
|
|
|
get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> { |
|
|
|
verticalProfileHighChart.series[0].setData(getVerticalProfileResponseData(response)); |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const BPVaporDensityData = () => { |
|
|
|
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); |
|
|
|
const params = prepareApiParams(402, startTime, options.titleEndTime); |
|
|
|
get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> { |
|
|
|
verticalProfileHighChart.series[2].setData(getVerticalProfileResponseData(response)); |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'interpolate-canvas'); |
|
|
|
options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image; |
|
|
|
const BPRelativeHumidityData = () => { |
|
|
|
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); |
|
|
|
const params = prepareApiParams(404, startTime, options.titleEndTime); |
|
|
|
get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> { |
|
|
|
// BPResponseData(response, options.BPTempTimeData); |
|
|
|
verticalProfileHighChart.series[1].setData(getVerticalProfileResponseData(response)); |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const getVerticalProfileResponseData = (response) => { |
|
|
|
if (response.code != 200 || response.data.radar_data.length === 0) { |
|
|
|
options.BPTitleTime = null; |
|
|
|
return []; |
|
|
|
} |
|
|
|
|
|
|
|
verticalProfileHighChart.xAxis[0].setCategories(response.data.radar_info.map(r => r.col_factor)); |
|
|
|
response.data.radar_data.sort((x, y) => { |
|
|
|
return moment(x.data_time).isBefore(moment(y.data_time)); |
|
|
|
}); |
|
|
|
let data = response.data.radar_data[0]; |
|
|
|
options.BPTitleTime = data.data_time; |
|
|
|
let optionData = []; |
|
|
|
response.data.radar_info.forEach(r => { |
|
|
|
optionData.push([r.col_name, data[r.col_name]]); |
|
|
|
}); |
|
|
|
return optionData; |
|
|
|
} |
|
|
|
|
|
|
|
const clearBoxDrawer = (boxDrawer: BoxDrawer) => { |
|
|
|
if (boxDrawer == null) return; |
|
|
|
boxDrawer.close(); |
|
|
|
} |
|
|
|
|
|
|
|
const prepareTmpOriginalColors = () => { |
|
|
|
return new ColorChart(['#860200','#CD0402','#FF1A04','#FF5E0C', |
|
|
|
'#FEA61B','#FDED2A','#C1FE46','#7AFD86', |
|
|
|
'#2BFDCD','#05E6FD','#14A0FA','#1B5AFB', |
|
|
|
'#1C1FF9','#1310C4','#09067C'], |
|
|
|
[ 999, 305, 300, 295, 290, 285, 280, 275, 270, 265, 260, 255, 250, 245, 240, -999]); |
|
|
|
[ 999, 30, 25, 20, 15, 10, 5, 0, -5, -10, -15, -20, -25, -30, -35, -999]); |
|
|
|
} |
|
|
|
|
|
|
|
const prepareBPTempColors = () => { |
|
|
|
return new ColorChart(['#860100','#D20201','#FF2402','#FF6F09', |
|
|
|
'#FEBF14','#EFFE24','#9FFE61','#52FEAA', |
|
|
|
'#03FEF8','#0AB8FD','#1069FD','#1222FD', |
|
|
|
'#0C0AC9','#05037D'], |
|
|
|
[ 999, 12, 8, 4, 0, -4, -8, -12, -16, -20, -24, -28, -32, -36, -999]); |
|
|
|
} |
|
|
|
|
|
|
|
const prepareBPRelativeHumidityColors = () => { |
|
|
|
return new ColorChart(['#860100','#F60301','#FF6708','#FED718', |
|
|
|
'#B3FE4F','#3EFEBD','#07CFFE','#1061FD', |
|
|
|
'#100DED','#05037D'], |
|
|
|
[ 999, 90, 80, 70, 60, 50, 40, 30, 20, 10, -999]) |
|
|
|
} |
|
|
|
|
|
|
|
const prepareBPVaporDensityColors = () => { |
|
|
|
return new ColorChart(['#860100','#F60301','#FF6708','#FED718', |
|
|
|
'#B3FE4F','#3EFEBD','#07CFFE','#1061FD', |
|
|
|
'#100DED','#05037D'], |
|
|
|
[ 999, 9, 8, 7, 6, 5, 4, 3, 2, 1, -999]) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const prepareApiParams = (radarDataCode, startTime, endTime) => { |
|
|
|
return { |
|
|
|
radar_data_code: radarDataCode, |
|
|
|
@ -754,7 +853,7 @@ |
|
|
|
onNextDayClick, |
|
|
|
// onPrevImgClick, |
|
|
|
// onNextImgClick, |
|
|
|
// onRefreshClick, |
|
|
|
onRefreshClick, |
|
|
|
onPlayClick, |
|
|
|
onChange, |
|
|
|
onImageLoad, |
|
|
|
@ -776,17 +875,18 @@ |
|
|
|
align-items: center; |
|
|
|
.picture { |
|
|
|
width: 100%; |
|
|
|
flex-direction: column; |
|
|
|
//flex-direction: column; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
#original-data-canvas , #abnormal-canvas ,#interpolate-canvas{ |
|
|
|
#original-data-canvas , #abnormal-canvas ,#interpolate-canvas, |
|
|
|
#BP-temp, #BP-relative-humidity, #BP-vapor-density { |
|
|
|
transform: scale(0.5,0.4); |
|
|
|
} |
|
|
|
.title { |
|
|
|
padding-bottom: 0; |
|
|
|
//padding-bottom: 0; |
|
|
|
font-size: 0.22rem; |
|
|
|
position: absolute; |
|
|
|
left: 296px; |
|
|
|
left: 3.90rem; |
|
|
|
top: 0; |
|
|
|
z-index: 100; |
|
|
|
} |
|
|
|
|
