|
|
|
@ -54,7 +54,7 @@ |
|
|
|
<div class="toolbar"> |
|
|
|
|
|
|
|
<!--6分钟--> |
|
|
|
<div v-if="currentElement === 'six-minute'" class="times sixMinute"> |
|
|
|
<div v-show ="currentElement === 'six-minute'" class="times sixMinute"> |
|
|
|
<div v-for="(time, index) in times" :key="index" |
|
|
|
:class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}" class="time-item"> |
|
|
|
<span class="hour">{{ time.hour }}</span> |
|
|
|
@ -63,7 +63,7 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!--30分钟--> |
|
|
|
<div v-if="currentElement === 'half-hour'" class="times halfHour"> |
|
|
|
<div v-show ="currentElement === 'half-hour'" class="times halfHour"> |
|
|
|
<div v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}" |
|
|
|
class="time-item"> |
|
|
|
<span class="hour ">{{ time.hour }}</span> |
|
|
|
@ -72,7 +72,7 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!--1小时--> |
|
|
|
<div v-if="currentElement === 'one-hour'" class="times oneHour"> |
|
|
|
<div v-show ="currentElement === 'one-hour'" class="times oneHour"> |
|
|
|
<div v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}" |
|
|
|
class="time-item"> |
|
|
|
<span class="hour">{{ time.hour }}</span> |
|
|
|
@ -101,8 +101,16 @@ |
|
|
|
<div class="picture-view"> |
|
|
|
|
|
|
|
<!--质控对比--> |
|
|
|
<div v-if="currentTab === 'MWR'" class="picture-container contrast-picture-container picture-MWR"> |
|
|
|
<div class="picture"> |
|
|
|
<div v-show ="currentTab === 'MWR'" class="picture-container contrast-picture-container picture-MWR"> |
|
|
|
<!-- <el-switch--> |
|
|
|
<!-- v-model="SeasonValue"--> |
|
|
|
<!-- @change="onchangeSeason"--> |
|
|
|
<!-- active-value="1"--> |
|
|
|
<!-- inactive-value="2"--> |
|
|
|
<!-- active-text="普通"--> |
|
|
|
<!-- inactive-text="特殊"--> |
|
|
|
<!-- />--> |
|
|
|
<div class="picture special-picture"> |
|
|
|
<h2 class="title">质控前</h2> |
|
|
|
<canvas id='original-data-canvas'></canvas> |
|
|
|
</div> |
|
|
|
@ -110,14 +118,14 @@ |
|
|
|
<!-- <h2 class="title">温度异常值标记</h2>--> |
|
|
|
<!-- <canvas id='abnormal-canvas'></canvas>--> |
|
|
|
<!-- </div>--> |
|
|
|
<div class="picture"> |
|
|
|
<div class="picture special-picture"> |
|
|
|
<h2 class="title">质控后</h2> |
|
|
|
<canvas id='interpolate-canvas'></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!--BP反演产品--> |
|
|
|
<div v-if="currentTab === 'shixu_BPFY'" class="picture-container contrast-picture-container shiXuBP"> |
|
|
|
<div v-show ="currentTab === 'shixu_BPFY'" class="picture-container contrast-picture-container shiXuBP"> |
|
|
|
<div class="BPPicture picture"> |
|
|
|
<h2 class="title">BP反演温度</h2> |
|
|
|
<canvas id="BP-temp"></canvas> |
|
|
|
@ -132,7 +140,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="currentTab === 'kuoxian'" class="verticalProfile"> |
|
|
|
<div v-show ="currentTab === 'kuoxian'" class="verticalProfile"> |
|
|
|
<div class="verticalProfile-picture"> |
|
|
|
<h2 class="verticalProfileTitle">温度廓线</h2> |
|
|
|
<div id="verticalProfileTemp" style="width: 400px;height: 400px"></div> |
|
|
|
@ -142,12 +150,12 @@ |
|
|
|
<div id="verticalProfileRelativeHumidity" style="width: 400px;height: 400px"></div> |
|
|
|
</div> |
|
|
|
<div class="verticalProfile-picture"> |
|
|
|
<h2 class="verticalProfileTitle">水汽密度廓线</h2> |
|
|
|
<h2 class="verticalProfileTitle" style="left: 1.4rem;">水汽密度廓线</h2> |
|
|
|
<div id="verticalProfileVaporDensity" style="width: 400px;height: 400px"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="currentTab === 'shixu'" class="picture-container contrast-picture-container shiXu"> |
|
|
|
<div v-show ="currentTab === 'shixu'" class="picture-container contrast-picture-container shiXu"> |
|
|
|
<div class="picture" style="margin-top: 570px"> |
|
|
|
<h2 class="title">对流有效位能CAPE</h2> |
|
|
|
<div id="convectiveHighChartCAPE" style="width: 100%;height:75%"></div> |
|
|
|
@ -183,8 +191,8 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="currentTab === 'T-logP'" class="picture-container contrast-picture-container"> |
|
|
|
<img :src="tLogPPicture" style="width: 50%"> |
|
|
|
<div v-show ="currentTab === 'T-logP'" class="picture-container contrast-picture-container"> |
|
|
|
<img :src="tLogPPicture" style="width: 20%"> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
@ -258,7 +266,8 @@ export default { |
|
|
|
BPTitleTime: null, |
|
|
|
highChartXAxis: [], |
|
|
|
specialStartTime: null, |
|
|
|
tLogPPicture: "/images/no-data.png" |
|
|
|
tLogPPicture: "/images/no-data.png", |
|
|
|
SeasonValue: '1' |
|
|
|
}); |
|
|
|
|
|
|
|
let drawers = { |
|
|
|
@ -592,7 +601,6 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
post("/tLogP/findLater", params).then((response: any) => { |
|
|
|
console.log(response) |
|
|
|
response == "" ? options.tLogPPicture = "/images/no-data.png" : options.tLogPPicture = response ; |
|
|
|
}) |
|
|
|
} |
|
|
|
@ -619,7 +627,7 @@ export default { |
|
|
|
// createEmptyCanvas('abnormal-canvas', 1500, 500); |
|
|
|
return; |
|
|
|
} |
|
|
|
drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'original-data-canvas', '℃'); |
|
|
|
drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(options.SeasonValue), 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; |
|
|
|
@ -644,7 +652,7 @@ export default { |
|
|
|
return; |
|
|
|
} |
|
|
|
if (options.currentTab === 'MWR') |
|
|
|
drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'interpolate-canvas', '℃'); |
|
|
|
drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(options.SeasonValue), 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; |
|
|
|
@ -721,6 +729,7 @@ export default { |
|
|
|
verify(); |
|
|
|
return []; |
|
|
|
} |
|
|
|
|
|
|
|
// creates.verticalProfile.updateXAxis(response.data.radar_info.map(r => r.col_factor)); |
|
|
|
creates.verticalProfileTemp.updateXAxis(response.data.radar_info.map(r => r.col_factor)) |
|
|
|
creates.verticalProfileVaporDensity.updateXAxis(response.data.radar_info.map(r => r.col_factor)) |
|
|
|
@ -857,13 +866,33 @@ export default { |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const prepareTmpOriginalColors = () => { |
|
|
|
return new ColorChart(['#860200', '#CD0402', '#FF1A04', '#FF5E0C', |
|
|
|
'#FEA61B', '#FDED2A', '#C1FE46', '#7AFD86', |
|
|
|
'#2BFDCD', '#05E6FD', '#14A0FA', '#1B5AFB', |
|
|
|
'#1C1FF9', '#1310C4', '#09067C'], |
|
|
|
[999, 30, 25, 20, 15, 10, 5, 0, -5, -10, -15, -20, -25, -30, -35, -999] |
|
|
|
); |
|
|
|
// const prepareTmpOriginalColors = () => { |
|
|
|
// return new ColorChart(['#860200', '#CD0402', '#FF1A04', '#FF5E0C', |
|
|
|
// '#FEA61B', '#FDED2A', '#C1FE46', '#7AFD86', |
|
|
|
// '#2BFDCD', '#05E6FD', '#14A0FA', '#1B5AFB', |
|
|
|
// '#1C1FF9', '#1310C4', '#09067C'], |
|
|
|
// [999, 30, 25, 20, 15, 10, 5, 0, -5, -10, -15, -20, -25, -30, -35, -999] |
|
|
|
// ); |
|
|
|
// } |
|
|
|
const prepareTmpOriginalColors = (type: string) => { |
|
|
|
switch (type) { |
|
|
|
case '1' : |
|
|
|
return new ColorChart(['#860200', '#CD0402', '#FF1A04', '#FF5E0C', |
|
|
|
'#FEA61B', '#FDED2A', '#C1FE46', '#7AFD86', |
|
|
|
'#2BFDCD', '#05E6FD', '#14A0FA', '#1B5AFB', |
|
|
|
'#1C1FF9', '#1310C4', '#09067C'], |
|
|
|
[999, 30, 25, 20, 15, 10, 5, 0, -5, -10, -15, -20, -25, -30, -35, -999] |
|
|
|
); |
|
|
|
case '2' : |
|
|
|
return new ColorChart(['#860200', '#CD0402', '#FF1A04', '#FF5E0C', |
|
|
|
'#FEA61B', '#FDED2A', '#C1FE46', '#7AFD86', |
|
|
|
'#2BFDCD', '#05E6FD', '#14A0FA', '#1B5AFB', |
|
|
|
'#1C1FF9', '#1310C4', '#09067C'], |
|
|
|
[999, 15, 12, 11, 9, 7, 5, 3, 1, -1, -3, -5, -7, -9, -11, -999] |
|
|
|
); |
|
|
|
default: |
|
|
|
throw new Error("无效的type类型"); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const prepareBPTempColors = () => { |
|
|
|
@ -899,6 +928,10 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const onchangeSeason = () => { |
|
|
|
reloadData() |
|
|
|
} |
|
|
|
|
|
|
|
return { |
|
|
|
...toRefs(options), |
|
|
|
onTabClick, |
|
|
|
@ -910,7 +943,7 @@ export default { |
|
|
|
onRefreshClick, |
|
|
|
onChange, |
|
|
|
changeColor, |
|
|
|
|
|
|
|
onchangeSeason |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -918,7 +951,6 @@ export default { |
|
|
|
<style lang="less" scoped> |
|
|
|
.main { |
|
|
|
.container { |
|
|
|
|
|
|
|
.verticalProfile { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
@ -932,8 +964,8 @@ export default { |
|
|
|
.verticalProfileTitle { |
|
|
|
position: absolute; |
|
|
|
font-size: 0.22rem; |
|
|
|
left: 1.97rem; |
|
|
|
top: -0.38rem; |
|
|
|
left: 1.77rem; |
|
|
|
top: -0.8rem; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -943,7 +975,6 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.contrast-picture-container { |
|
|
|
|
|
|
|
width: calc(~"100% - 2.5rem"); |
|
|
|
margin: 0 auto; |
|
|
|
//width: 100%; |
|
|
|
@ -951,24 +982,28 @@ export default { |
|
|
|
flex-direction: row; |
|
|
|
flex-wrap: wrap; |
|
|
|
// justify-content: space-between; |
|
|
|
|
|
|
|
.special-picture { |
|
|
|
height: 100%!important; |
|
|
|
.title { |
|
|
|
top: 80px!important; |
|
|
|
} |
|
|
|
} |
|
|
|
.picture { |
|
|
|
width: 45%; |
|
|
|
height: 45%; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
#original-data-canvas /*#abnormal-canvas*/, #interpolate-canvas { |
|
|
|
transform: scale(0.38, 0.4); |
|
|
|
transform: scale(0.47, 0.8); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
width: 100%; |
|
|
|
font-size: 0.22rem; |
|
|
|
position: absolute; |
|
|
|
left: 3.10rem; |
|
|
|
top: 0; |
|
|
|
z-index: 100; |
|
|
|
z-index: 1000; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -978,7 +1013,7 @@ export default { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
#BP-temp, #BP-relative-humidity, #BP-vapor-density { |
|
|
|
transform: scale(0.40, 0.4); |
|
|
|
transform: scale(0.50, 0.4); |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
@ -1001,8 +1036,47 @@ export default { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
:deep(.el-switch) { |
|
|
|
position: absolute; |
|
|
|
left: 0px; |
|
|
|
bottom: 0px; |
|
|
|
width: 150px; |
|
|
|
z-index: 1000; |
|
|
|
//width: 10%; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.el-switch__core) { |
|
|
|
width: 50px !important; |
|
|
|
//height: 20px !important; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.el-switch__core::after) { |
|
|
|
width: 80px; |
|
|
|
height: 35px; |
|
|
|
margin-top: -1px; |
|
|
|
margin-bottom: 2px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
::-webkit-scrollbar { |
|
|
|
width: 8px; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
|
background-color: inherit; |
|
|
|
-webkit-border-radius: 4px; |
|
|
|
-moz-border-radius: 4px; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
|
background-color: #c3c9cd; |
|
|
|
-webkit-border-radius: 4px; |
|
|
|
-moz-border-radius: 4px; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
