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.
1077 lines
42 KiB
1077 lines
42 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 === 'kuoxian'}" class="tab-item" @click="onTabClick('kuoxian')">
|
|
垂直廓线
|
|
<img v-if="currentTab === 'kuoxian'" src="/images/line.png"/>
|
|
</div>
|
|
<div :class="{'active': currentTab === 'shixu'}" class="tab-item" @click="onTabClick('shixu')">
|
|
对流指数
|
|
<img v-if="currentTab === 'shixu'" src="/images/line.png"/>
|
|
</div>
|
|
<div :class="{'active': currentTab === 'T-logP'}" class="tab-item" @click="onTabClick('T-logP')">
|
|
T-logP图
|
|
<img v-if="currentTab === 'T-logP'" src="/images/line.png"/>
|
|
</div>
|
|
<div :class="{'active': currentTab === 'shixu_BPFY'}" class="tab-item" @click="onTabClick('shixu_BPFY')">
|
|
BP反演产品
|
|
<img v-if="currentTab === 'shixu_BPFY'" 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 :class="{'active': currentRegion === 'jiang-ning'}"
|
|
@click="onRegionClick('jiang-ning')">江宁</span></el-col>
|
|
<el-col :span="8"><span :class="{'active': currentRegion === 'liu-he'}"
|
|
@click="onRegionClick('liu-he')">六合</span></el-col>
|
|
<el-col :span="8"><span :class="{'active': currentRegion === 'pu-kou'}"
|
|
@click="onRegionClick('pu-kou')">浦口</span></el-col>
|
|
<el-col :span="8"><span :class="{'active': currentRegion === 'gao-chun'}"
|
|
@click="onRegionClick('gao-chun')">高淳</span></el-col>
|
|
<el-col :span="8"><span :class="{'active': currentRegion === 'li-shui'}"
|
|
@click="onRegionClick('li-shui')">溧水</span></el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="menu-item">
|
|
<h2 class="tip">分辨率选择</h2>
|
|
<el-row :gutter="12">
|
|
<el-col :span="8"><span :class="{'active': currentElement === 'six-minute'}"
|
|
@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)">30分钟</span></el-col>
|
|
<el-col :span="8"><span :class="{'active': currentElement === 'one-hour'}"
|
|
@click="onElementClick('one-hour', -24, 60)">1小时</span></el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="container panel">
|
|
<div class="toolbar">
|
|
|
|
<!--6分钟-->
|
|
<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>
|
|
<span class="time" @click="onTimeClick(time, index)">{{ time.minute }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!--30分钟-->
|
|
<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>
|
|
<span class="time" @click="onTimeClick(time, index)">{{ time.minute }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!--1小时-->
|
|
<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>
|
|
<span class="time" @click="onTimeClick(time, index)">{{ time.minute }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<el-date-picker v-model="date" :clearable="false" :editable="false" class="date-picker" placeholder="请选择"
|
|
type="date" @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>
|
|
<el-select v-model="currentHour" placeholder="" @change="onChange">
|
|
<el-option
|
|
v-for="item in hours"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<p class="unit">时</p>
|
|
</div>
|
|
<div class="picture-view">
|
|
|
|
<!--质控对比-->
|
|
<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>
|
|
|
|
<div class="picture special-picture">
|
|
<h2 class="title">质控后</h2>
|
|
<canvas id='interpolate-canvas'></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!--BP反演产品-->
|
|
<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>
|
|
</div>
|
|
<div class="BPPicture picture">
|
|
<h2 class="title">BP反演相对湿度</h2>
|
|
<canvas id="BP-relative-humidity"></canvas>
|
|
</div>
|
|
<div class="BPPicture picture">
|
|
<h2 class="title">BP反演水汽密度</h2>
|
|
<canvas id="BP-vapor-density"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-show ="currentTab === 'kuoxian'" class="verticalProfile">
|
|
<div class="verticalProfile-picture">
|
|
<h2 class="verticalProfileTitle">温度廓线</h2>
|
|
<div id="verticalProfileTemp" style="width: 400px;height: 400px"></div>
|
|
</div>
|
|
<div class="verticalProfile-picture">
|
|
<h2 class="verticalProfileTitle">相对湿度廓线</h2>
|
|
<div id="verticalProfileRelativeHumidity" style="width: 400px;height: 400px"></div>
|
|
</div>
|
|
<div class="verticalProfile-picture">
|
|
<h2 class="verticalProfileTitle" style="left: 1.4rem;">水汽密度廓线</h2>
|
|
<div id="verticalProfileVaporDensity" style="width: 400px;height: 400px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<div class="picture" style="margin-top: 570px">
|
|
<h2 class="title">K指数</h2>
|
|
<div id="kIndexChart" style="width: 100%;height:75%"></div>
|
|
</div>
|
|
<div class="picture">
|
|
<h2 class="title">对流抑制势能CIN</h2>
|
|
<div id="convectiveHighChartCIN" style="width:100%;height:75%"></div>
|
|
</div>
|
|
<div class="picture">
|
|
<h2 class="title">沙式指数</h2>
|
|
<div id="sandIndexChart" style="width:100%;height:75%"></div>
|
|
</div>
|
|
<div class="picture">
|
|
<h2 class="title">LCL气压</h2>
|
|
<div id="airPressureChart" style="width:100%;height:75%"></div>
|
|
</div>
|
|
<div class="picture">
|
|
<h2 class="title">850hpa和500hpa温差</h2>
|
|
<div id="deltaTChart" style="width:100%;height:75%"></div>
|
|
</div>
|
|
<div class="picture">
|
|
<h2 class="title">0度层高度</h2>
|
|
<div id="zeroHeightChart" style="width:100%;height:75%"></div>
|
|
</div>
|
|
<div class="picture">
|
|
<h2 class="title">-20度层高度</h2>
|
|
<div id="NegativeTwentyHeightChart" style="width:100%;height:75%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-show ="currentTab === 'T-logP'" class="picture-container contrast-picture-container">
|
|
<img :src="tLogPPicture" style="width: 20%">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {onMounted, reactive, ref, toRefs} from 'vue';
|
|
import moment from "moment";
|
|
import {get, post} from '../uilts/axios';
|
|
import {BoxDrawer, ColorChart, createEmptyCanvas} from "../uilts/box-drawer";
|
|
import {Constant} from "../model/constant";
|
|
import {HighChartCreate} from "../model/high-chart-create";
|
|
import {ElMessage} from 'element-plus'
|
|
|
|
export default {
|
|
name: 'MicrowaveRadiation',
|
|
setup() {
|
|
let timer = null;
|
|
let creates: {
|
|
verticalProfileTemp: HighChartCreate
|
|
verticalProfileVaporDensity: HighChartCreate
|
|
verticalProfileRelativeHumidity: HighChartCreate
|
|
convectiveIndexProfileTimeChartCAPE: HighChartCreate
|
|
convectiveIndexProfileTimeChartCIN: HighChartCreate
|
|
kIndexChart: HighChartCreate
|
|
sandIndex: HighChartCreate
|
|
airPressure: HighChartCreate
|
|
deltaT: HighChartCreate
|
|
zeroHeight: HighChartCreate
|
|
NegativeTwentyHeight: HighChartCreate
|
|
} = {
|
|
verticalProfileTemp: null,
|
|
verticalProfileVaporDensity: null,
|
|
verticalProfileRelativeHumidity: null,
|
|
convectiveIndexProfileTimeChartCAPE: null,
|
|
convectiveIndexProfileTimeChartCIN: null,
|
|
kIndexChart: null,
|
|
sandIndex: null,
|
|
airPressure: null,
|
|
deltaT: null,
|
|
zeroHeight: null,
|
|
NegativeTwentyHeight: null
|
|
}
|
|
|
|
let options = reactive({
|
|
currentTab: 'MWR',
|
|
currentRegion: 'jiang-ning',
|
|
currentType: 'TEMP',
|
|
currentElement: 'six-minute',
|
|
currentCategory: 'CAPE',
|
|
date: moment('2021-12-05').format('YYYY-MM-DD'),
|
|
currentHour: '00',
|
|
hours: [],
|
|
times: [],
|
|
days: [],
|
|
currentTime: null,
|
|
srcList: [],
|
|
title: null,
|
|
index: 0,
|
|
downloadSrc: null,
|
|
urls: [],
|
|
titleStartTime: null,
|
|
titleEndTime: null,
|
|
apiTimeLength: -2,
|
|
apiTimeInterval: 6,
|
|
// onPitchTime: 0,
|
|
BPTitleTime: null,
|
|
highChartXAxis: [],
|
|
specialStartTime: null,
|
|
tLogPPicture: "/images/no-data.png",
|
|
SeasonValue: '1'
|
|
});
|
|
|
|
let drawers = {
|
|
originalDrawer: null,
|
|
interpolateDrawer: null,
|
|
abnormalDrawer: null,
|
|
BPTempDrawer: null,
|
|
BPRelativeHumidity: null,
|
|
BPVaporDensity: null
|
|
}
|
|
|
|
onMounted(() => {
|
|
initTimeLine()
|
|
initHours();
|
|
setTimeout(() => {
|
|
changeColor()
|
|
}, 100)
|
|
reloadData()
|
|
})
|
|
|
|
const onTabClick = (name) => {
|
|
options.currentTab = name;
|
|
setTimeout(() => {
|
|
initEcharts(name);
|
|
reloadChangeData();
|
|
}, 500)
|
|
}
|
|
|
|
const initEcharts = (name) => {
|
|
if (name === 'kuoxian') {
|
|
verticalProfileTempInit()
|
|
verticalProfileVaporDensityInit()
|
|
verticalProfileRelativeHumidityInit()
|
|
} else if (name === 'shixu') {
|
|
convectiveIndexProfileTimeChartInitCAPE()
|
|
convectiveIndexProfileTimeChartInitCIN()
|
|
kIndexChartInit()
|
|
sandIndexInit()
|
|
airPressureInit()
|
|
deltaTInit()
|
|
zeroHeightInit()
|
|
NegativeTwentyHeightInit()
|
|
}
|
|
}
|
|
|
|
// const verticalProfileInit = () => {
|
|
// creates.verticalProfile = new HighChartCreate('container');
|
|
// creates.verticalProfile.setChart(true);
|
|
// creates.verticalProfile.setXAxis('高度(km)', false);
|
|
// creates.verticalProfile.setYAxis('温度T(degree)', 10, -40, 10, 6, true);
|
|
// creates.verticalProfile.setYAxis('相对湿度RH(%)', 100, 0, 10, 6);
|
|
// creates.verticalProfile.setYAxis('水汽密度q(g/kg)', 10, 0, 1, 11);
|
|
// creates.verticalProfile.setLegend();
|
|
// creates.verticalProfile.setTooltip('{point.category} KM: {point.y}');
|
|
// creates.verticalProfile.setSeries('温度', 0, '℃', '#F49927');
|
|
// creates.verticalProfile.setSeries('相对湿度', 1, '%', '#3534FD');
|
|
// creates.verticalProfile.setSeries('水汽密度', 2, 'g/Kg', '#6AB312');
|
|
// creates.verticalProfile.init();
|
|
// }
|
|
|
|
//垂直廓线温度数据图
|
|
const verticalProfileTempInit = () => {
|
|
creates.verticalProfileTemp = new HighChartCreate('verticalProfileTemp');
|
|
creates.verticalProfileTemp.setChart(true);
|
|
creates.verticalProfileTemp.setXAxis('高度(km)', false);
|
|
creates.verticalProfileTemp.setYAxis('温度T(℃)', 10, -40, 10, 6);
|
|
creates.verticalProfileTemp.setLegend();
|
|
creates.verticalProfileTemp.setTooltip('{point.category} KM, {point.y}');
|
|
creates.verticalProfileTemp.setSeries('温度', 0, '℃', '#F49927');
|
|
creates.verticalProfileTemp.init();
|
|
}
|
|
|
|
//垂直廓线水汽密度数据图
|
|
const verticalProfileVaporDensityInit = () => {
|
|
creates.verticalProfileVaporDensity = new HighChartCreate('verticalProfileVaporDensity');
|
|
creates.verticalProfileVaporDensity.setChart(true);
|
|
creates.verticalProfileVaporDensity.setXAxis('高度(km)', false);
|
|
creates.verticalProfileVaporDensity.setYAxis('水汽密度q(g/kg)', 10, 0, 1, 11);
|
|
creates.verticalProfileVaporDensity.setLegend();
|
|
creates.verticalProfileVaporDensity.setTooltip('{point.category} KM, {point.y}');
|
|
creates.verticalProfileVaporDensity.setSeries('水汽密度', 0, 'g/Kg', '#6AB312');
|
|
creates.verticalProfileVaporDensity.init();
|
|
}
|
|
|
|
//垂直廓线相对湿度数据图
|
|
const verticalProfileRelativeHumidityInit = () => {
|
|
creates.verticalProfileRelativeHumidity = new HighChartCreate('verticalProfileRelativeHumidity');
|
|
creates.verticalProfileRelativeHumidity.setChart(true);
|
|
creates.verticalProfileRelativeHumidity.setXAxis('高度(km)', false);
|
|
creates.verticalProfileRelativeHumidity.setYAxis('相对湿度RH(%)', 100, 0, 10, 6);
|
|
creates.verticalProfileRelativeHumidity.setLegend();
|
|
creates.verticalProfileRelativeHumidity.setTooltip('{point.category} KM, {point.y}');
|
|
creates.verticalProfileRelativeHumidity.setSeries('相对湿度', 0, '%', '#498DF0');
|
|
creates.verticalProfileRelativeHumidity.init();
|
|
}
|
|
|
|
const convectiveIndexProfileTimeChartInitCAPE = () => {
|
|
creates.convectiveIndexProfileTimeChartCAPE = new HighChartCreate('convectiveHighChartCAPE');
|
|
creates.convectiveIndexProfileTimeChartCAPE.setChart();
|
|
creates.convectiveIndexProfileTimeChartCAPE.setXAxis('时间（时/分）', false);
|
|
creates.convectiveIndexProfileTimeChartCAPE.setYAxis('CAPE(J/kg)', 800, 0, 100, 9);
|
|
creates.convectiveIndexProfileTimeChartCAPE.setLegend();
|
|
creates.convectiveIndexProfileTimeChartCAPE.setTooltip('{point.category}, {point.y}(J/kg)');
|
|
creates.convectiveIndexProfileTimeChartCAPE.setSeries('CAPE')
|
|
creates.convectiveIndexProfileTimeChartCAPE.init();
|
|
}
|
|
|
|
const convectiveIndexProfileTimeChartInitCIN = () => {
|
|
creates.convectiveIndexProfileTimeChartCIN = new HighChartCreate('convectiveHighChartCIN');
|
|
creates.convectiveIndexProfileTimeChartCIN.setChart();
|
|
creates.convectiveIndexProfileTimeChartCIN.setXAxis('时间（时/分）', false);
|
|
creates.convectiveIndexProfileTimeChartCIN.setYAxis('CIN(J/kg)', 800, 0, 100, 9);
|
|
creates.convectiveIndexProfileTimeChartCIN.setLegend();
|
|
creates.convectiveIndexProfileTimeChartCIN.setTooltip('{point.category}, {point.y}(J/kg)');
|
|
creates.convectiveIndexProfileTimeChartCIN.setSeries('CIN')
|
|
creates.convectiveIndexProfileTimeChartCIN.init();
|
|
}
|
|
|
|
//绘制K指数
|
|
const kIndexChartInit = () => {
|
|
creates.kIndexChart = new HighChartCreate('kIndexChart');
|
|
creates.kIndexChart.setChart();
|
|
creates.kIndexChart.setXAxis('时间（时/分）', false);
|
|
creates.kIndexChart.setYAxis('K（℃）', 40, -40, 10, 9);
|
|
creates.kIndexChart.setLegend();
|
|
creates.kIndexChart.setTooltip('{point.category}, {point.y}(℃)');
|
|
creates.kIndexChart.setSeries('K指数')
|
|
creates.kIndexChart.init();
|
|
}
|
|
|
|
//绘制沙式指数
|
|
const sandIndexInit = () => {
|
|
creates.sandIndex = new HighChartCreate('sandIndexChart');
|
|
creates.sandIndex.setChart();
|
|
creates.sandIndex.setXAxis('时间（时/分）', false);
|
|
creates.sandIndex.setYAxis('SI（℃）', 30, 0, 3, 11);
|
|
creates.sandIndex.setLegend();
|
|
creates.sandIndex.setTooltip('{point.category}, {point.y}(℃)');
|
|
creates.sandIndex.setSeries('沙式指数')
|
|
creates.sandIndex.init();
|
|
}
|
|
|
|
//绘制LCl气压
|
|
const airPressureInit = () => {
|
|
creates.airPressure = new HighChartCreate('airPressureChart');
|
|
creates.airPressure.setChart();
|
|
creates.airPressure.setXAxis('时间（时/分）', false);
|
|
creates.airPressure.setYAxis('LCL气压（hPa)', 1000, 300, 100, 8);
|
|
creates.airPressure.setLegend();
|
|
creates.airPressure.setTooltip('{point.category}, {point.y}(hPa)');
|
|
creates.airPressure.setSeries('LCL气压')
|
|
creates.airPressure.init();
|
|
}
|
|
|
|
//绘制850hpa和500hpa温差
|
|
const deltaTInit = () => {
|
|
creates.deltaT = new HighChartCreate('deltaTChart');
|
|
creates.deltaT.setChart();
|
|
creates.deltaT.setXAxis('时间（时/分）', false);
|
|
creates.deltaT.setYAxis('deltaT（℃）', 1000, 300, 100, 8);
|
|
creates.deltaT.setLegend();
|
|
creates.deltaT.setTooltip('{point.category}, {point.y}(℃)');
|
|
creates.deltaT.setSeries('deltaT')
|
|
creates.deltaT.init();
|
|
}
|
|
|
|
//绘制0度层高度
|
|
const zeroHeightInit = () => {
|
|
creates.zeroHeight = new HighChartCreate('zeroHeightChart');
|
|
creates.zeroHeight.setChart();
|
|
creates.zeroHeight.setXAxis('时间（时/分）', false);
|
|
creates.zeroHeight.setYAxis('hgt_0(m)', 10, 0, 1, 11);
|
|
creates.zeroHeight.setLegend();
|
|
creates.zeroHeight.setTooltip('{point.category}, {point.y}(m)');
|
|
creates.zeroHeight.setSeries('hgt_0')
|
|
creates.zeroHeight.init();
|
|
}
|
|
|
|
//绘制-20度层高度
|
|
const NegativeTwentyHeightInit = () => {
|
|
creates.NegativeTwentyHeight = new HighChartCreate('NegativeTwentyHeightChart');
|
|
creates.NegativeTwentyHeight.setChart();
|
|
creates.NegativeTwentyHeight.setXAxis('时间（时/分）', false);
|
|
creates.NegativeTwentyHeight.setYAxis('hgt_-20(m)', 20, -20, 5, 9);
|
|
creates.NegativeTwentyHeight.setLegend();
|
|
creates.NegativeTwentyHeight.setTooltip('{point.category}, {point.y}(m)');
|
|
creates.NegativeTwentyHeight.setSeries('hgt_-20')
|
|
creates.NegativeTwentyHeight.init();
|
|
}
|
|
|
|
const onRegionClick = (region) => {
|
|
options.currentRegion = region;
|
|
}
|
|
|
|
const onElementClick = (element, apiTimeLength, apiTimeInterval) => {
|
|
options.apiTimeInterval = apiTimeInterval;
|
|
options.apiTimeLength = apiTimeLength;
|
|
options.currentElement = element;
|
|
// options.onPitchTime = onPitchTime
|
|
initTimeLine(reloadChangeData)
|
|
if (element === 'six-minute') {
|
|
setTimeout(() => {
|
|
changeColor()
|
|
}, 0)
|
|
}
|
|
reloadChangeData()
|
|
}
|
|
|
|
//初始化时间轴
|
|
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.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();
|
|
const remainder = minute % options.apiTimeInterval;
|
|
if (remainder > 0) {
|
|
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时'),
|
|
minute: now.format('mm'),
|
|
date: now.format('YYYY-MM-DD HH:mm:00')
|
|
});
|
|
}
|
|
options.index = options.times.length - 1;
|
|
options.titleStartTime = options.times[0].date;
|
|
if (callback != null)
|
|
callback(params);
|
|
}
|
|
|
|
const initHours = () => {
|
|
for (let i = 1; i < 24; i++) {
|
|
options.hours.push({
|
|
value: i,
|
|
label: i < 10 ? '0' + i : i,
|
|
})
|
|
}
|
|
}
|
|
|
|
const onTimeClick = (time, index) => {
|
|
options.currentHour = time.hour.substring(0, 2)
|
|
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
|
|
options.date = moment(time.date).format('YYYY-MM-DD')
|
|
reloadChangeData()
|
|
}
|
|
|
|
//上一天
|
|
const onPrevDayClick = () => {
|
|
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
|
|
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');
|
|
reloadChangeData()
|
|
}
|
|
|
|
//下一天
|
|
const onNextDayClick = () => {
|
|
options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD');
|
|
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');
|
|
reloadChangeData()
|
|
}
|
|
|
|
//重置时间
|
|
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 getCurrentElement = () => {
|
|
return document.querySelector('.times');
|
|
}
|
|
|
|
const onChange = () => {
|
|
initTimeLine(reloadChangeData);
|
|
}
|
|
|
|
const reloadData = () => {
|
|
reloadQualityComparison()
|
|
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()
|
|
} else if (options.currentTab === 'shixu') {
|
|
convectiveIndexCAPEData()
|
|
convectiveIndexCINData()
|
|
kIndexApi()
|
|
sandIndexApi()
|
|
airPressureApi()
|
|
deltaTApi()
|
|
zeroHeightApi()
|
|
NegativeTwentyHeightApi()
|
|
}else if (options.currentTab === 'T-logP'){
|
|
reloadTLogPData();
|
|
}
|
|
}
|
|
|
|
const reloadTLogPData = () => {
|
|
let params = {
|
|
startTime: moment(options.titleEndTime).add(-options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'),
|
|
endTime: options.titleEndTime
|
|
}
|
|
|
|
post("/tLogP/findLater", params).then((response: any) => {
|
|
response == "" ? options.tLogPPicture = "/images/no-data.png" : options.tLogPPicture = response ;
|
|
})
|
|
}
|
|
|
|
const changeColor = () => {
|
|
let timeLine = document.querySelectorAll('.time-item')
|
|
timeLine.forEach((item: any, index) => {
|
|
if (index >= 4 && index <= 13) {
|
|
const spanTimeColor = item.querySelector('.time')
|
|
spanTimeColor.style.backgroundColor = '#CDDAF6'
|
|
}
|
|
})
|
|
}
|
|
|
|
// 重新加载质控对比数据
|
|
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);
|
|
get('/njplatform/radardata/getOriginRangeData', params, Constant.baseUrl).then((response: any) => {
|
|
clearBoxDrawer(drawers.originalDrawer);
|
|
clearBoxDrawer(drawers.abnormalDrawer);
|
|
if (response.code != 200 || response.data.radar_data.length === 0) {
|
|
createEmptyCanvas('original-data-canvas', 1500, 500);
|
|
// createEmptyCanvas('abnormal-canvas', 1500, 500);
|
|
return;
|
|
}
|
|
drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(options.SeasonValue), response.data, 'original-data-canvas', 'T/℃');
|
|
// drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas', '℃');
|
|
// options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image;
|
|
// options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image;
|
|
})
|
|
}
|
|
|
|
const reloadQualityInterpolation = () => {
|
|
options.specialStartTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
|
|
if (options.currentTab === 'shixu_BPFY') {
|
|
if (options.currentElement === 'six-minute') {
|
|
options.specialStartTime = moment(options.currentTime).add(-8, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
|
|
}
|
|
}
|
|
const params = prepareApiParams(401, options.specialStartTime, options.titleEndTime);
|
|
get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
|
|
clearBoxDrawer(drawers.interpolateDrawer);
|
|
if (response.code != 200 || response.data.radar_data.length === 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(options.SeasonValue), response.data, 'interpolate-canvas', 'T/℃');
|
|
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 = () => {
|
|
options.specialStartTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
|
|
if (options.currentElement === 'six-minute') {
|
|
options.specialStartTime = moment(options.currentTime).add(-8, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
|
|
}
|
|
const params = prepareApiParams(404, options.specialStartTime, options.titleEndTime);
|
|
get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).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 = () => {
|
|
options.specialStartTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
|
|
if (options.currentElement === 'six-minute') {
|
|
options.specialStartTime = moment(options.currentTime).add(-8, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
|
|
}
|
|
const params = prepareApiParams(402, options.specialStartTime, options.titleEndTime);
|
|
get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
|
|
clearBoxDrawer(drawers.BPVaporDensity);
|
|
if (response.code != 200 || response.data.radar_data.length === 0) {
|
|
createEmptyCanvas('BP-vapor-density', 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, Constant.baseUrl).then((response: any) => {
|
|
// creates.verticalProfile.updateSeries(0, getVerticalProfileResponseData(response));
|
|
creates.verticalProfileTemp.updateSeries(0, 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, Constant.baseUrl).then((response: any) => {
|
|
// creates.verticalProfile.updateSeries(2, getVerticalProfileResponseData(response));
|
|
creates.verticalProfileVaporDensity.updateSeries(0, getVerticalProfileResponseData(response));
|
|
})
|
|
}
|
|
|
|
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, Constant.baseUrl).then((response: any) => {
|
|
// creates.verticalProfile.updateSeries(1, getVerticalProfileResponseData(response));
|
|
creates.verticalProfileRelativeHumidity.updateSeries(0, getVerticalProfileResponseData(response))
|
|
})
|
|
}
|
|
|
|
|
|
const getVerticalProfileResponseData = (response) => {
|
|
if (response.code != 200 || response.data == null || response.data.radar_data.length === 0) {
|
|
options.BPTitleTime = null;
|
|
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))
|
|
creates.verticalProfileRelativeHumidity.updateXAxis(response.data.radar_info.map(r => r.col_factor))
|
|
// 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 convectiveIndexCAPEData = () => {
|
|
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
|
|
const params = prepareApiParams('cape', startTime, options.titleEndTime);
|
|
get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
|
|
let data = convectiveIndexResponseData(response);
|
|
creates.convectiveIndexProfileTimeChartCAPE.updateSeries(0, data[0])
|
|
creates.convectiveIndexProfileTimeChartCAPE.updateXAxis(data[1], 0)
|
|
})
|
|
}
|
|
|
|
const convectiveIndexCINData = () => {
|
|
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
|
|
const params = prepareApiParams('cin', startTime, options.titleEndTime);
|
|
get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
|
|
let data = convectiveIndexResponseData(response);
|
|
creates.convectiveIndexProfileTimeChartCIN.updateSeries(0, data[0])
|
|
creates.convectiveIndexProfileTimeChartCIN.updateXAxis(data[1], 0)
|
|
})
|
|
}
|
|
//K-index
|
|
const kIndexApi = () => {
|
|
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
|
|
const params = prepareApiParams('K', startTime, options.titleEndTime);
|
|
get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
|
|
let data = convectiveIndexResponseData(response);
|
|
creates.kIndexChart.updateSeries(0, data[0])
|
|
creates.kIndexChart.updateXAxis(data[1], 0)
|
|
})
|
|
}
|
|
|
|
//沙式指数
|
|
const sandIndexApi = () => {
|
|
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
|
|
const params = prepareApiParams('SI', startTime, options.titleEndTime);
|
|
get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
|
|
let data = convectiveIndexResponseData(response);
|
|
creates.sandIndex.updateSeries(0, data[0])
|
|
creates.sandIndex.updateXAxis(data[1], 0)
|
|
})
|
|
}
|
|
|
|
//LCL气压
|
|
const airPressureApi = () => {
|
|
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
|
|
const params = prepareApiParams('LCL_pres', startTime, options.titleEndTime);
|
|
get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
|
|
let data = convectiveIndexResponseData(response);
|
|
creates.airPressure.updateSeries(0, data[0])
|
|
creates.airPressure.updateXAxis(data[1], 0)
|
|
})
|
|
}
|
|
|
|
//850hpa和500hpa温差
|
|
const deltaTApi = () => {
|
|
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
|
|
const params = prepareApiParams('LCL_pres', startTime, options.titleEndTime);
|
|
get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
|
|
let data = convectiveIndexResponseData(response);
|
|
creates.deltaT.updateSeries(0, data[0])
|
|
creates.deltaT.updateXAxis(data[1], 0)
|
|
})
|
|
}
|
|
|
|
//绘制0度层高度
|
|
const zeroHeightApi = () => {
|
|
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
|
|
const params = prepareApiParams('hgt_0', startTime, options.titleEndTime);
|
|
get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
|
|
let data = convectiveIndexResponseData(response);
|
|
creates.zeroHeight.updateSeries(0, data[0])
|
|
creates.zeroHeight.updateXAxis(data[1], 0)
|
|
})
|
|
}
|
|
|
|
//绘制-20度层高度
|
|
const NegativeTwentyHeightApi = () => {
|
|
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
|
|
const params = prepareApiParams('hgt_-20', startTime, options.titleEndTime);
|
|
get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
|
|
let data = convectiveIndexResponseData(response);
|
|
creates.NegativeTwentyHeight.updateSeries(0, data[0])
|
|
creates.NegativeTwentyHeight.updateXAxis(data[1], 0)
|
|
})
|
|
}
|
|
|
|
const convectiveIndexResponseData = (response) => {
|
|
if (response.code != 200 || response.data == null || response.data.radar_data.length === 0) {
|
|
verify();
|
|
return [[], []];
|
|
}
|
|
let radarData = response.data.radar_data;
|
|
let times = [];
|
|
let values = [];
|
|
radarData.forEach(item => {
|
|
if (item.f001 >= 10000) {
|
|
item.f001 = 0
|
|
}
|
|
times.push(moment(item.data_time).format('HH:mm'))
|
|
values.push(item.f001)
|
|
});
|
|
return [values, times];
|
|
}
|
|
|
|
const clearBoxDrawer = (boxDrawer: BoxDrawer) => {
|
|
if (boxDrawer == null) return;
|
|
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',
|
|
// '#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, -5, -7, -9, -11, -13, -15, -17, -19, -21, -23, -25, -27, -29, -31, -999]
|
|
);
|
|
default:
|
|
throw new Error("无效的type类型");
|
|
}
|
|
}
|
|
|
|
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,
|
|
data_time_start: startTime,
|
|
data_time_end: endTime
|
|
}
|
|
}
|
|
|
|
const onchangeSeason = () => {
|
|
reloadData()
|
|
}
|
|
|
|
return {
|
|
...toRefs(options),
|
|
onTabClick,
|
|
onRegionClick,
|
|
onElementClick,
|
|
onTimeClick,
|
|
onPrevDayClick,
|
|
onNextDayClick,
|
|
onRefreshClick,
|
|
onChange,
|
|
changeColor,
|
|
onchangeSeason
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.main {
|
|
.container {
|
|
.verticalProfile {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
|
|
.verticalProfile-picture {
|
|
position: relative;
|
|
|
|
.verticalProfileTitle {
|
|
position: absolute;
|
|
font-size: 0.22rem;
|
|
left: 1.77rem;
|
|
top: -0.8rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-date-editor), .control-btn, :deep(.el-select), .unit {
|
|
padding-top: 0.06rem;
|
|
}
|
|
|
|
.contrast-picture-container {
|
|
width: calc(~"100% - 2.5rem");
|
|
margin: 0 auto;
|
|
//width: 100%;
|
|
display: flex;
|
|
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.47, 0.8);
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
font-size: 0.22rem;
|
|
position: absolute;
|
|
left: 3.10rem;
|
|
top: 0;
|
|
z-index: 1000;
|
|
}
|
|
}
|
|
|
|
.BPPicture {
|
|
width: 65% !important;
|
|
height: 45%;
|
|
position: relative;
|
|
|
|
#BP-temp, #BP-relative-humidity, #BP-vapor-density {
|
|
transform: scale(0.50, 0.4);
|
|
}
|
|
|
|
.title {
|
|
left: 3.85rem !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shiXu {
|
|
overflow-y: scroll;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.shiXuBP {
|
|
flex-flow: column;
|
|
align-content: space-around !important;
|
|
}
|
|
|
|
.picture-MWR {
|
|
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: 40px !important;
|
|
//height: 20px !important;
|
|
}
|
|
|
|
:deep(.el-switch__core::after) {
|
|
width: 50px;
|
|
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>
|
|
|