|
@ -151,55 +151,55 @@ |
|
|
<div v-show ="currentTab === 'kuoxian'" class="verticalProfile"> |
|
|
<div v-show ="currentTab === 'kuoxian'" class="verticalProfile"> |
|
|
<div class="verticalProfile-picture"> |
|
|
<div class="verticalProfile-picture"> |
|
|
<h2 class="verticalProfileTitle">温度廓线</h2> |
|
|
<h2 class="verticalProfileTitle">温度廓线</h2> |
|
|
<div id="verticalProfileTemp" style="width: 400px;height: 400px"></div> |
|
|
<div id="verticalProfileTemp" ></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="verticalProfile-picture"> |
|
|
<div class="verticalProfile-picture"> |
|
|
<h2 class="verticalProfileTitle">相对湿度廓线</h2> |
|
|
<h2 class="verticalProfileTitle">相对湿度廓线</h2> |
|
|
<div id="verticalProfileRelativeHumidity" style="width: 400px;height: 400px"></div> |
|
|
<div id="verticalProfileRelativeHumidity" ></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="verticalProfile-picture"> |
|
|
<div class="verticalProfile-picture"> |
|
|
<h2 class="verticalProfileTitle" style="left: 1.4rem;">水汽密度廓线</h2> |
|
|
<h2 class="verticalProfileTitle">水汽密度廓线</h2> |
|
|
<div id="verticalProfileVaporDensity" style="width: 400px;height: 400px"></div> |
|
|
<div id="verticalProfileVaporDensity"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div v-show ="currentTab === 'shixu'" class="picture-container contrast-picture-container shiXu"> |
|
|
<div v-show ="currentTab === 'shixu'" class="contrast-picture-container shiXu"> |
|
|
<div class="picture" style="margin-top: 570px"> |
|
|
<div class="picture" > |
|
|
<h2 class="title">对流有效位能CAPE</h2> |
|
|
<h2 class="title">对流有效位能CAPE</h2> |
|
|
<div id="convectiveHighChartCAPE" style="width: 100%;height:75%"></div> |
|
|
<div id="convectiveHighChartCAPE" ></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="picture" style="margin-top: 570px"> |
|
|
<div class="picture"> |
|
|
<h2 class="title">K指数</h2> |
|
|
<h2 class="title">K指数</h2> |
|
|
<div id="kIndexChart" style="width: 100%;height:75%"></div> |
|
|
<div id="kIndexChart" ></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="picture"> |
|
|
<div class="picture"> |
|
|
<h2 class="title">对流抑制势能CIN</h2> |
|
|
<h2 class="title">对流抑制势能CIN</h2> |
|
|
<div id="convectiveHighChartCIN" style="width:100%;height:75%"></div> |
|
|
<div id="convectiveHighChartCIN" ></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="picture"> |
|
|
<div class="picture"> |
|
|
<h2 class="title">沙式指数</h2> |
|
|
<h2 class="title">沙式指数</h2> |
|
|
<div id="sandIndexChart" style="width:100%;height:75%"></div> |
|
|
<div id="sandIndexChart" ></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="picture"> |
|
|
<div class="picture"> |
|
|
<h2 class="title">LCL气压</h2> |
|
|
<h2 class="title">LCL气压</h2> |
|
|
<div id="airPressureChart" style="width:100%;height:75%"></div> |
|
|
<div id="airPressureChart" ></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="picture"> |
|
|
<div class="picture"> |
|
|
<h2 class="title">850hpa和500hpa温差</h2> |
|
|
<h2 class="title">850hpa和500hpa温差</h2> |
|
|
<div id="deltaTChart" style="width:100%;height:75%"></div> |
|
|
<div id="deltaTChart" ></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="picture"> |
|
|
<div class="picture"> |
|
|
<h2 class="title">0度层高度</h2> |
|
|
<h2 class="title">0度层高度</h2> |
|
|
<div id="zeroHeightChart" style="width:100%;height:75%"></div> |
|
|
<div id="zeroHeightChart"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="picture"> |
|
|
<div class="picture"> |
|
|
<h2 class="title">-20度层高度</h2> |
|
|
<h2 class="title">-20度层高度</h2> |
|
|
<div id="NegativeTwentyHeightChart" style="width:100%;height:75%"></div> |
|
|
<div id="NegativeTwentyHeightChart" ></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div v-show ="currentTab === 'T-logP'" class="picture-container contrast-picture-container"> |
|
|
<div v-show ="currentTab === 'T-logP'" class="T-logP"> |
|
|
<img :src="tLogPPicture" class="T-logpImg"> |
|
|
<img :src="tLogPPicture" class="T-logpImg"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
@ -338,7 +338,7 @@ export default { |
|
|
//垂直廓线温度数据图 |
|
|
//垂直廓线温度数据图 |
|
|
const verticalProfileTempInit = () => { |
|
|
const verticalProfileTempInit = () => { |
|
|
creates.verticalProfileTemp = new HighChartCreate('verticalProfileTemp'); |
|
|
creates.verticalProfileTemp = new HighChartCreate('verticalProfileTemp'); |
|
|
creates.verticalProfileTemp.setChart(true); |
|
|
creates.verticalProfileTemp.setChart(true, 'line', 500, 500); |
|
|
creates.verticalProfileTemp.setXAxis('高度(km)', false); |
|
|
creates.verticalProfileTemp.setXAxis('高度(km)', false); |
|
|
creates.verticalProfileTemp.setYAxis('温度T(℃)', 10, -40, 10, 6); |
|
|
creates.verticalProfileTemp.setYAxis('温度T(℃)', 10, -40, 10, 6); |
|
|
creates.verticalProfileTemp.setLegend(); |
|
|
creates.verticalProfileTemp.setLegend(); |
|
@ -350,7 +350,7 @@ export default { |
|
|
//垂直廓线水汽密度数据图 |
|
|
//垂直廓线水汽密度数据图 |
|
|
const verticalProfileVaporDensityInit = () => { |
|
|
const verticalProfileVaporDensityInit = () => { |
|
|
creates.verticalProfileVaporDensity = new HighChartCreate('verticalProfileVaporDensity'); |
|
|
creates.verticalProfileVaporDensity = new HighChartCreate('verticalProfileVaporDensity'); |
|
|
creates.verticalProfileVaporDensity.setChart(true); |
|
|
creates.verticalProfileVaporDensity.setChart(true, 'line', 500, 500); |
|
|
creates.verticalProfileVaporDensity.setXAxis('高度(km)', false); |
|
|
creates.verticalProfileVaporDensity.setXAxis('高度(km)', false); |
|
|
creates.verticalProfileVaporDensity.setYAxis('水汽密度q(g/kg)', 10, 0, 1, 11); |
|
|
creates.verticalProfileVaporDensity.setYAxis('水汽密度q(g/kg)', 10, 0, 1, 11); |
|
|
creates.verticalProfileVaporDensity.setLegend(); |
|
|
creates.verticalProfileVaporDensity.setLegend(); |
|
@ -362,7 +362,7 @@ export default { |
|
|
//垂直廓线相对湿度数据图 |
|
|
//垂直廓线相对湿度数据图 |
|
|
const verticalProfileRelativeHumidityInit = () => { |
|
|
const verticalProfileRelativeHumidityInit = () => { |
|
|
creates.verticalProfileRelativeHumidity = new HighChartCreate('verticalProfileRelativeHumidity'); |
|
|
creates.verticalProfileRelativeHumidity = new HighChartCreate('verticalProfileRelativeHumidity'); |
|
|
creates.verticalProfileRelativeHumidity.setChart(true); |
|
|
creates.verticalProfileRelativeHumidity.setChart(true, 'line', 500, 500); |
|
|
creates.verticalProfileRelativeHumidity.setXAxis('高度(km)', false); |
|
|
creates.verticalProfileRelativeHumidity.setXAxis('高度(km)', false); |
|
|
creates.verticalProfileRelativeHumidity.setYAxis('相对湿度RH(%)', 100, 0, 10, 6); |
|
|
creates.verticalProfileRelativeHumidity.setYAxis('相对湿度RH(%)', 100, 0, 10, 6); |
|
|
creates.verticalProfileRelativeHumidity.setLegend(); |
|
|
creates.verticalProfileRelativeHumidity.setLegend(); |
|
@ -373,7 +373,7 @@ export default { |
|
|
|
|
|
|
|
|
const convectiveIndexProfileTimeChartInitCAPE = () => { |
|
|
const convectiveIndexProfileTimeChartInitCAPE = () => { |
|
|
creates.convectiveIndexProfileTimeChartCAPE = new HighChartCreate('convectiveHighChartCAPE'); |
|
|
creates.convectiveIndexProfileTimeChartCAPE = new HighChartCreate('convectiveHighChartCAPE'); |
|
|
creates.convectiveIndexProfileTimeChartCAPE.setChart(); |
|
|
creates.convectiveIndexProfileTimeChartCAPE.setChart(false, 'line', 750, 400); |
|
|
creates.convectiveIndexProfileTimeChartCAPE.setXAxis('时间(时/分)', false); |
|
|
creates.convectiveIndexProfileTimeChartCAPE.setXAxis('时间(时/分)', false); |
|
|
creates.convectiveIndexProfileTimeChartCAPE.setYAxis('CAPE(J/kg)'); |
|
|
creates.convectiveIndexProfileTimeChartCAPE.setYAxis('CAPE(J/kg)'); |
|
|
creates.convectiveIndexProfileTimeChartCAPE.setLegend(); |
|
|
creates.convectiveIndexProfileTimeChartCAPE.setLegend(); |
|
@ -384,7 +384,7 @@ export default { |
|
|
|
|
|
|
|
|
const convectiveIndexProfileTimeChartInitCIN = () => { |
|
|
const convectiveIndexProfileTimeChartInitCIN = () => { |
|
|
creates.convectiveIndexProfileTimeChartCIN = new HighChartCreate('convectiveHighChartCIN'); |
|
|
creates.convectiveIndexProfileTimeChartCIN = new HighChartCreate('convectiveHighChartCIN'); |
|
|
creates.convectiveIndexProfileTimeChartCIN.setChart(); |
|
|
creates.convectiveIndexProfileTimeChartCIN.setChart(false, 'line', 750, 400); |
|
|
creates.convectiveIndexProfileTimeChartCIN.setXAxis('时间(时/分)', false); |
|
|
creates.convectiveIndexProfileTimeChartCIN.setXAxis('时间(时/分)', false); |
|
|
creates.convectiveIndexProfileTimeChartCIN.setYAxis('CIN(J/kg)'); |
|
|
creates.convectiveIndexProfileTimeChartCIN.setYAxis('CIN(J/kg)'); |
|
|
creates.convectiveIndexProfileTimeChartCIN.setLegend(); |
|
|
creates.convectiveIndexProfileTimeChartCIN.setLegend(); |
|
@ -396,7 +396,7 @@ export default { |
|
|
//绘制K指数 |
|
|
//绘制K指数 |
|
|
const kIndexChartInit = () => { |
|
|
const kIndexChartInit = () => { |
|
|
creates.kIndexChart = new HighChartCreate('kIndexChart'); |
|
|
creates.kIndexChart = new HighChartCreate('kIndexChart'); |
|
|
creates.kIndexChart.setChart(); |
|
|
creates.kIndexChart.setChart(false, 'line', 750, 400); |
|
|
creates.kIndexChart.setXAxis('时间(时/分)', false); |
|
|
creates.kIndexChart.setXAxis('时间(时/分)', false); |
|
|
creates.kIndexChart.setYAxis('K(℃)'); |
|
|
creates.kIndexChart.setYAxis('K(℃)'); |
|
|
creates.kIndexChart.setLegend(); |
|
|
creates.kIndexChart.setLegend(); |
|
@ -408,7 +408,7 @@ export default { |
|
|
//绘制沙式指数 |
|
|
//绘制沙式指数 |
|
|
const sandIndexInit = () => { |
|
|
const sandIndexInit = () => { |
|
|
creates.sandIndex = new HighChartCreate('sandIndexChart'); |
|
|
creates.sandIndex = new HighChartCreate('sandIndexChart'); |
|
|
creates.sandIndex.setChart(); |
|
|
creates.sandIndex.setChart(false, 'line', 750, 400); |
|
|
creates.sandIndex.setXAxis('时间(时/分)', false); |
|
|
creates.sandIndex.setXAxis('时间(时/分)', false); |
|
|
creates.sandIndex.setYAxis('SI(℃)'); |
|
|
creates.sandIndex.setYAxis('SI(℃)'); |
|
|
creates.sandIndex.setLegend(); |
|
|
creates.sandIndex.setLegend(); |
|
@ -420,7 +420,7 @@ export default { |
|
|
//绘制LCl气压 |
|
|
//绘制LCl气压 |
|
|
const airPressureInit = () => { |
|
|
const airPressureInit = () => { |
|
|
creates.airPressure = new HighChartCreate('airPressureChart'); |
|
|
creates.airPressure = new HighChartCreate('airPressureChart'); |
|
|
creates.airPressure.setChart(); |
|
|
creates.airPressure.setChart(false, 'line', 750, 400); |
|
|
creates.airPressure.setXAxis('时间(时/分)', false); |
|
|
creates.airPressure.setXAxis('时间(时/分)', false); |
|
|
creates.airPressure.setYAxis('LCL气压(hPa)'); |
|
|
creates.airPressure.setYAxis('LCL气压(hPa)'); |
|
|
creates.airPressure.setLegend(); |
|
|
creates.airPressure.setLegend(); |
|
@ -432,7 +432,7 @@ export default { |
|
|
//绘制850hpa和500hpa温差 |
|
|
//绘制850hpa和500hpa温差 |
|
|
const deltaTInit = () => { |
|
|
const deltaTInit = () => { |
|
|
creates.deltaT = new HighChartCreate('deltaTChart'); |
|
|
creates.deltaT = new HighChartCreate('deltaTChart'); |
|
|
creates.deltaT.setChart(); |
|
|
creates.deltaT.setChart(false, 'line', 750, 400); |
|
|
creates.deltaT.setXAxis('时间(时/分)', false); |
|
|
creates.deltaT.setXAxis('时间(时/分)', false); |
|
|
creates.deltaT.setYAxis('deltaT(℃)'); |
|
|
creates.deltaT.setYAxis('deltaT(℃)'); |
|
|
creates.deltaT.setLegend(); |
|
|
creates.deltaT.setLegend(); |
|
@ -444,7 +444,7 @@ export default { |
|
|
//绘制0度层高度 |
|
|
//绘制0度层高度 |
|
|
const zeroHeightInit = () => { |
|
|
const zeroHeightInit = () => { |
|
|
creates.zeroHeight = new HighChartCreate('zeroHeightChart'); |
|
|
creates.zeroHeight = new HighChartCreate('zeroHeightChart'); |
|
|
creates.zeroHeight.setChart(); |
|
|
creates.zeroHeight.setChart(false, 'line', 750, 400); |
|
|
creates.zeroHeight.setXAxis('时间(时/分)', false); |
|
|
creates.zeroHeight.setXAxis('时间(时/分)', false); |
|
|
creates.zeroHeight.setYAxis('hgt_0(m)'); |
|
|
creates.zeroHeight.setYAxis('hgt_0(m)'); |
|
|
creates.zeroHeight.setLegend(); |
|
|
creates.zeroHeight.setLegend(); |
|
@ -456,7 +456,7 @@ export default { |
|
|
//绘制-20度层高度 |
|
|
//绘制-20度层高度 |
|
|
const NegativeTwentyHeightInit = () => { |
|
|
const NegativeTwentyHeightInit = () => { |
|
|
creates.NegativeTwentyHeight = new HighChartCreate('NegativeTwentyHeightChart'); |
|
|
creates.NegativeTwentyHeight = new HighChartCreate('NegativeTwentyHeightChart'); |
|
|
creates.NegativeTwentyHeight.setChart(); |
|
|
creates.NegativeTwentyHeight.setChart(false, 'line', 750, 400); |
|
|
creates.NegativeTwentyHeight.setXAxis('时间(时/分)', false); |
|
|
creates.NegativeTwentyHeight.setXAxis('时间(时/分)', false); |
|
|
creates.NegativeTwentyHeight.setYAxis('hgt_-20(m)'); |
|
|
creates.NegativeTwentyHeight.setYAxis('hgt_-20(m)'); |
|
|
creates.NegativeTwentyHeight.setLegend(); |
|
|
creates.NegativeTwentyHeight.setLegend(); |
|
@ -963,6 +963,8 @@ export default { |
|
|
.main { |
|
|
.main { |
|
|
.container { |
|
|
.container { |
|
|
//width: 100%; |
|
|
//width: 100%; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.verticalProfile { |
|
|
.verticalProfile { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
@ -971,13 +973,15 @@ export default { |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
|
|
|
|
|
|
.verticalProfile-picture { |
|
|
.verticalProfile-picture { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
.verticalProfileTitle { |
|
|
.verticalProfileTitle { |
|
|
position: absolute; |
|
|
padding-bottom: 30px; |
|
|
font-size: 0.22rem; |
|
|
|
|
|
left: 1.77rem; |
|
|
|
|
|
top: -0.8rem; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
@ -987,40 +991,39 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.contrast-picture-container { |
|
|
.contrast-picture-container { |
|
|
width: calc(~"100% - 2.5rem"); |
|
|
width: 100% !important; |
|
|
margin: 0 auto; |
|
|
height: 100%; |
|
|
//width: 100%; |
|
|
|
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
flex-direction: row; |
|
|
flex-wrap: wrap; |
|
|
flex-wrap: wrap; |
|
|
// justify-content: space-between; |
|
|
|
|
|
.special-picture { |
|
|
|
|
|
height: 100%!important; |
|
|
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
|
top: 80px!important; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.picture { |
|
|
.picture { |
|
|
width: 45%; |
|
|
width: 48%; |
|
|
height: 45%; |
|
|
display: flex; |
|
|
position: relative; |
|
|
flex-direction: column; |
|
|
|
|
|
justify-content: space-evenly; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
.title { |
|
|
.title { |
|
|
width: 100%; |
|
|
|
|
|
font-size: 0.22rem; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
left: 3.10rem; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
z-index: 1000; |
|
|
z-index: 1000; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
.shiXu { |
|
|
|
|
|
overflow-y: scroll; |
|
|
|
|
|
} |
|
|
|
|
|
.T-logP { |
|
|
|
|
|
width: 100% !important; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
align-items: center; |
|
|
.T-logpImg { |
|
|
.T-logpImg { |
|
|
transform: scale(0.5); |
|
|
transform: scale(0.5,0.4); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.raman-picture-container { |
|
|
.raman-picture-container { |
|
|
//width: calc(~"100% - 1rem"); |
|
|
|
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
#original-data-canvas /*#abnormal-canvas*/, #interpolate-canvas { |
|
|
#original-data-canvas /*#abnormal-canvas*/, #interpolate-canvas { |
|
|
} |
|
|
} |
|
@ -1039,25 +1042,20 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
//.BPPicture { |
|
|
|
|
|
// width: 100% !important; |
|
|
|
|
|
// height: 100%!important; |
|
|
|
|
|
// position: relative; |
|
|
|
|
|
// |
|
|
|
|
|
//} |
|
|
|
|
|
#BP-temp, #BP-relative-humidity, #BP-vapor-density { |
|
|
|
|
|
transform: scale(1, 1.0) translateX(-42px); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.shiXu { |
|
|
.BPPicture { |
|
|
overflow-y: scroll; |
|
|
|
|
|
width: 100% !important; |
|
|
width: 100% !important; |
|
|
} |
|
|
height: 100%!important; |
|
|
|
|
|
//position: relative; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
|
.shiXuBP { |
|
|
|
|
|
flex-flow: column; |
|
|
|
|
|
align-content: space-around !important; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
//#BP-temp, #BP-relative-humidity, #BP-vapor-density { |
|
|
|
|
|
//transform: scale(1, 1.0) translateX(-42px); |
|
|
|
|
|
//} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.picture-MWR { |
|
|
.picture-MWR { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|