|
|
@ -34,11 +34,11 @@ |
|
|
|
<h2 class="tip">分辨率选择</h2> |
|
|
|
<el-row :gutter="12"> |
|
|
|
<el-col :span="8"><span :class="{'active': currentElement === 'six-minute'}" |
|
|
|
@click="onElementClick('six-minute', -2, 6,0)">6分钟</span></el-col> |
|
|
|
@click="onElementClick('six-minute', -2, 6)">6分钟</span></el-col> |
|
|
|
<el-col :span="8"><span :class="{'active': currentElement === 'half-hour'}" |
|
|
|
@click="onElementClick('half-hour', -12, 30,0)">30分钟</span></el-col> |
|
|
|
@click="onElementClick('half-hour', -12, 30)">30分钟</span></el-col> |
|
|
|
<el-col :span="8"><span :class="{'active': currentElement === 'one-hour'}" |
|
|
|
@click="onElementClick('one-hour', -24, 60,0)">1小时</span></el-col> |
|
|
|
@click="onElementClick('one-hour', -24, 60)">1小时</span></el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -142,7 +142,6 @@ |
|
|
|
|
|
|
|
<div v-if="currentTab === 'T-logP'" class="picture-container contrast-picture-container"> |
|
|
|
<img src="/images/T-logP.png" style="width: 80%;height: 80%"> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
@ -184,27 +183,16 @@ export default { |
|
|
|
times: [], |
|
|
|
days: [], |
|
|
|
currentTime: null, |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
downloadImgUrl: '/images/default-picture.png', |
|
|
|
srcList: [], |
|
|
|
isPlay: false, |
|
|
|
title: null, |
|
|
|
index: 0, |
|
|
|
downloadSrc: null, |
|
|
|
contrast: { |
|
|
|
noQCImgUrl: '', |
|
|
|
noQCImgPreview: [], |
|
|
|
checkImgUrl: '', |
|
|
|
checkImgPreview: [], |
|
|
|
fillingImgUrl: '', |
|
|
|
fillingImgPreview: [''] |
|
|
|
}, |
|
|
|
urls: [], |
|
|
|
titleStartTime: null, |
|
|
|
titleEndTime: null, |
|
|
|
apiTimeLength: -2, |
|
|
|
apiTimeInterval: 6, |
|
|
|
onPitchTime: 0, |
|
|
|
// onPitchTime: 0, |
|
|
|
BPTitleTime: null, |
|
|
|
highChartXAxis: [], |
|
|
|
}); |
|
|
@ -263,7 +251,7 @@ export default { |
|
|
|
creates.convectiveIndexProfileTimeChartCAPE = new HighChartCreate('convectiveHighChartCAPE'); |
|
|
|
creates.convectiveIndexProfileTimeChartCAPE.setChart(); |
|
|
|
creates.convectiveIndexProfileTimeChartCAPE.setXAxis( '时间(时/分)', false); |
|
|
|
creates.convectiveIndexProfileTimeChartCAPE.setYAxis('CAPE(J/kg)', 500, 0, 100); |
|
|
|
creates.convectiveIndexProfileTimeChartCAPE.setYAxis('CAPE(J/kg)', 500, 0, 100,6); |
|
|
|
creates.convectiveIndexProfileTimeChartCAPE.setTooltip('{point.category}: {point.y}(J/kg)'); |
|
|
|
creates.convectiveIndexProfileTimeChartCAPE.setSeries('CAPE') |
|
|
|
creates.convectiveIndexProfileTimeChartCAPE.init(); |
|
|
@ -273,7 +261,7 @@ export default { |
|
|
|
creates.convectiveIndexProfileTimeChartCIN = new HighChartCreate('convectiveHighChartCIN'); |
|
|
|
creates.convectiveIndexProfileTimeChartCIN.setChart(); |
|
|
|
creates.convectiveIndexProfileTimeChartCIN.setXAxis( '时间(时/分)', false); |
|
|
|
creates.convectiveIndexProfileTimeChartCIN.setYAxis('CIE(J/kg)', 500, 0, 100); |
|
|
|
creates.convectiveIndexProfileTimeChartCIN.setYAxis('CIE(J/kg)', 500, 0, 100,6); |
|
|
|
creates.convectiveIndexProfileTimeChartCIN.setTooltip('{point.category}: {point.y}(J/kg)'); |
|
|
|
creates.convectiveIndexProfileTimeChartCIN.setSeries('CIN') |
|
|
|
creates.convectiveIndexProfileTimeChartCIN.init(); |
|
|
@ -283,11 +271,11 @@ export default { |
|
|
|
options.currentRegion = region; |
|
|
|
} |
|
|
|
|
|
|
|
const onElementClick = (element, apiTimeLength, apiTimeInterval, onPitchTime) => { |
|
|
|
const onElementClick = (element, apiTimeLength, apiTimeInterval) => { |
|
|
|
options.apiTimeInterval = apiTimeInterval; |
|
|
|
options.apiTimeLength = apiTimeLength; |
|
|
|
options.currentElement = element; |
|
|
|
options.onPitchTime = onPitchTime |
|
|
|
// options.onPitchTime = onPitchTime |
|
|
|
initTimeLine(reloadChangeData) |
|
|
|
if (element === 'six-minute') { |
|
|
|
setTimeout(() => { |
|
|
@ -296,33 +284,10 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const onImageLoad = (event) => { |
|
|
|
if (event.currentTarget.getAttribute('src') !== '/images/default-picture.png') |
|
|
|
converToBase64(options.imgUrl); |
|
|
|
else |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
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 = (callback = null, ...params) => { |
|
|
|
options.times = []; |
|
|
|
options.currentTime = moment(options.date).hour(parseInt(options.currentHour) + options.onPitchTime).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss'); |
|
|
|
options.currentTime = moment(options.date).hour(parseInt(options.currentHour) /*+ options.onPitchTime*/).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss'); |
|
|
|
options.titleEndTime = options.currentTime |
|
|
|
let now = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30); |
|
|
|
let minute = now.minute(); |
|
|
@ -331,7 +296,6 @@ export default { |
|
|
|
now.minute(minute + (options.apiTimeInterval - remainder)); |
|
|
|
} |
|
|
|
now.minute(now.minute() - options.apiTimeInterval); |
|
|
|
|
|
|
|
for (let i = 0; i < 24; i++) { |
|
|
|
options.times.push({ |
|
|
|
hour: now.add(options.apiTimeInterval, 'minute').format('HH时'), |
|
|
@ -389,47 +353,10 @@ export default { |
|
|
|
reloadChangeData() |
|
|
|
} |
|
|
|
|
|
|
|
//播放动画 |
|
|
|
// 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); |
|
|
|
// }, 2000) |
|
|
|
// } |
|
|
|
|
|
|
|
// 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'); |
|
|
|
// if (options.currentTab === 'MWR') { |
|
|
|
// options.currentTime = options.days[options.index].date; |
|
|
|
// } else { |
|
|
|
// options.currentTime = options.times[options.index].date; |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
const onChange = () => { |
|
|
|
initTimeLine(reloadChangeData); |
|
|
|
} |
|
|
@ -512,8 +439,6 @@ export default { |
|
|
|
// 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'); |
|
|
@ -570,14 +495,7 @@ export default { |
|
|
|
const getVerticalProfileResponseData = (response) => { |
|
|
|
if (response.code != 200 || response.data == null || response.data.radar_data.length === 0) { |
|
|
|
options.BPTitleTime = null; |
|
|
|
ElMessage({ |
|
|
|
showClose: true, |
|
|
|
message: '请求接口无数据', |
|
|
|
icon: '', |
|
|
|
type: null, |
|
|
|
grouping: true, |
|
|
|
duration: 1500 |
|
|
|
}) |
|
|
|
verify(); |
|
|
|
return []; |
|
|
|
} |
|
|
|
creates.verticalProfile.updateXAxis(response.data.radar_info.map(r => r.col_factor)); |
|
|
@ -616,14 +534,7 @@ export default { |
|
|
|
|
|
|
|
const convectiveIndexResponseData = (response) => { |
|
|
|
if (response.code != 200 || response.data == null || response.data.radar_data.length === 0) { |
|
|
|
ElMessage({ |
|
|
|
showClose: true, |
|
|
|
message: '请求接口无数据', |
|
|
|
icon: '', |
|
|
|
type: null, |
|
|
|
grouping: true, |
|
|
|
duration: 1500 |
|
|
|
}) |
|
|
|
verify(); |
|
|
|
return [[], []]; |
|
|
|
} |
|
|
|
let radarData = response.data.radar_data; |
|
|
@ -636,7 +547,6 @@ export default { |
|
|
|
times.push(moment(item.data_time).format('HH:mm')) |
|
|
|
values.push(item.f001) |
|
|
|
}); |
|
|
|
|
|
|
|
return [values, times]; |
|
|
|
} |
|
|
|
|
|
|
@ -645,6 +555,17 @@ export default { |
|
|
|
boxDrawer.close(); |
|
|
|
} |
|
|
|
|
|
|
|
const verify = () => { |
|
|
|
ElMessage({ |
|
|
|
showClose: true, |
|
|
|
message: '请求接口无数据', |
|
|
|
icon: '', |
|
|
|
type: null, |
|
|
|
grouping: true, |
|
|
|
duration: 1500 |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const prepareTmpOriginalColors = () => { |
|
|
|
return new ColorChart(['#860200', '#CD0402', '#FF1A04', '#FF5E0C', |
|
|
|
'#FEA61B', '#FDED2A', '#C1FE46', '#7AFD86', |
|
|
@ -687,10 +608,6 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// const onImageMove = (e) => { |
|
|
|
// console.log(e); |
|
|
|
// } |
|
|
|
|
|
|
|
return { |
|
|
|
...toRefs(options), |
|
|
|
onTabClick, |
|
|
@ -700,9 +617,7 @@ export default { |
|
|
|
onPrevDayClick, |
|
|
|
onNextDayClick, |
|
|
|
onRefreshClick, |
|
|
|
// onPlayClick, |
|
|
|
onChange, |
|
|
|
onImageLoad, |
|
|
|
changeColor, |
|
|
|
|
|
|
|
} |
|
|
|