root
/
NanJingLamanRadarProject
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge remote-tracking branch 'remotes/origin/master' 

# Conflicts:
#	04.系统编码/Frontend/package-lock.json
master
xiaowuler 3 years ago
parent
b307309f49 68ed8f5710
commit
7d27b1126e
11 changed files with 4962 additions and 498 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      04.系统编码/Frontend/index.html
  2. 3804
      04.系统编码/Frontend/package-lock.json
  3. 2
      04.系统编码/Frontend/package.json
  4. BIN
      04.系统编码/Frontend/public/favicon.ico
  5. 474
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  6. 1115
      04.系统编码/Frontend/src/components/RamanLidar.vue
  7. 2
      04.系统编码/Frontend/src/components/SystemManagement.vue
  8. 35
      04.系统编码/Frontend/src/index.less
  9. 3
      04.系统编码/Frontend/src/model/constant.ts
  10. 14
      04.系统编码/Frontend/src/model/high-chart-create.ts
  11. 6
      04.系统编码/Frontend/src/uilts/box-drawer.ts

5
04.系统编码/Frontend/index.html
View File

@ -2,12 +2,13 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/images/logo.png" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>南京生态环境评估决策平台</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</body>
</html>

3804
04.系统编码/Frontend/package-lock.json
View File

File diff suppressed because it is too large

2
04.系统编码/Frontend/package.json
View File

@ -11,7 +11,7 @@
"crypto-js": "^4.1.1",
"echarts": "^5.2.2",
"element-plus": "^1.2.0-beta.4",
"highcharts": "^9.3.2",
"highcharts": "^9.3.3",
"js-md5": "^0.7.3",
"jsencrypt": "3.0.0-rc.1",
"moment": "^2.29.1",

BIN
04.系统编码/Frontend/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

474
04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
View File

@ -26,8 +26,16 @@
<div class="menu-item">
<h2 class="tip">区域选择</h2>
<el-row :gutter="12">
<el-col :span="8"><span :class="{'active': currentRegion === 'jiangning'}"
@click="onRegionClick('jiangning')">江宁</span></el-col>
<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">
@ -93,51 +101,96 @@
<div class="picture-view">
<!--质控对比-->
<div v-if="currentTab === 'MWR'" class="picture-container contrast-picture-container">
<div v-if="currentTab === 'MWR'" class="picture-container contrast-picture-container picture-MWR">
<div class="picture">
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度原始数据</h2>
<h2 class="title">质控前</h2>
<canvas id='original-data-canvas'></canvas>
</div>
<div class="picture">
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度异常值标记</h2>
<canvas id='abnormal-canvas'></canvas>
</div>
<div class="picture">
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度野点插补结果</h2>
<!-- <div class="picture">-->
<!-- <h2 class="title">温度异常值标记</h2>-->
<!-- <canvas id='abnormal-canvas'></canvas>-->
<!-- </div>-->
<div class="picture">
<h2 class="title">质控后</h2>
<canvas id='interpolate-canvas'></canvas>
</div>
</div>
</div>
<!--BP反演产品-->
<div v-if="currentTab === 'shixu_BPFY'" class="picture-container contrast-picture-container">
<div class="picture">
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演温度</h2>
<div v-if="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="picture">
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演相对湿度</h2>
<div class="BPPicture picture">
<h2 class="title">BP反演相对湿度</h2>
<canvas id="BP-relative-humidity"></canvas>
</div>
<div class="picture">
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演水汽密度</h2>
<div class="BPPicture picture">
<h2 class="title">BP反演水汽密度</h2>
<canvas id="BP-vapor-density"></canvas>
</div>
</div>
<div v-if="currentTab === 'kuoxian'" class="picture-container contrast-picture-container">
<h2>{{ BPTitleTime }}温度、相对湿度、水汽密度廓线</h2>
<div id="container" style="width:100%;height:100%"></div>
<div v-if="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">水汽密度廓线</h2>
<div id="verticalProfileVaporDensity" style="width: 400px;height: 400px"></div>
</div>
</div>
<div v-if="currentTab === 'shixu'" class="picture-container contrast-picture-container">
<div class="picture">
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}对流有效位能CAPE</h2>
<div id="convectiveHighChartCAPE" style="width:100%;height:75%"></div>
<div v-if="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">{{ titleStartTime }}~{{ titleEndTime }}对流抑制势能CIN</h2>
<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-if="currentTab === 'T-logP'" class="picture-container contrast-picture-container">
@ -162,13 +215,31 @@ export default {
setup() {
let timer = null;
let creates: {
verticalProfile: HighChartCreate
// verticalProfile: HighChartCreate
verticalProfileTemp: HighChartCreate
verticalProfileVaporDensity: HighChartCreate
verticalProfileRelativeHumidity: HighChartCreate
convectiveIndexProfileTimeChartCAPE: HighChartCreate
convectiveIndexProfileTimeChartCIN: HighChartCreate
kIndexChart: HighChartCreate
sandIndex: HighChartCreate
airPressure: HighChartCreate
deltaT: HighChartCreate
zeroHeight: HighChartCreate
NegativeTwentyHeight: HighChartCreate
} = {
verticalProfile: null,
//verticalProfile: null,
verticalProfileTemp: null,
verticalProfileVaporDensity: null,
verticalProfileRelativeHumidity: null,
convectiveIndexProfileTimeChartCAPE: null,
convectiveIndexProfileTimeChartCIN: null
convectiveIndexProfileTimeChartCIN: null,
kIndexChart: null,
sandIndex: null,
airPressure: null,
deltaT: null,
zeroHeight: null,
NegativeTwentyHeight: null
}
let options = reactive({
@ -195,6 +266,7 @@ export default {
// onPitchTime: 0,
BPTitleTime: null,
highChartXAxis: [],
specialStartTime: null
});
let drawers = {
@ -224,34 +296,81 @@ export default {
}
const initEcharts = (name) => {
if (name === 'kuoxian')
verticalProfileInit()
else if (name === 'shixu') {
if (name === 'kuoxian') {
// verticalProfileInit()
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 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(degree)', 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)', 500, 0, 100,6);
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();
@ -261,12 +380,85 @@ export default {
creates.convectiveIndexProfileTimeChartCIN = new HighChartCreate('convectiveHighChartCIN');
creates.convectiveIndexProfileTimeChartCIN.setChart();
creates.convectiveIndexProfileTimeChartCIN.setXAxis( '时间（时/分）', false);
creates.convectiveIndexProfileTimeChartCIN.setYAxis('CIE(J/kg)', 500, 0, 100,6);
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;
}
@ -282,6 +474,7 @@ export default {
changeColor()
}, 0)
}
reloadChangeData()
}
//初始化时间轴
@ -319,9 +512,11 @@ export default {
}
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()
}
@ -388,6 +583,12 @@ export default {
} else if (options.currentTab === 'shixu') {
convectiveIndexCAPEData()
convectiveIndexCINData()
kIndexApi()
sandIndexApi()
airPressureApi()
deltaTApi()
zeroHeightApi()
NegativeTwentyHeightApi()
}
}
@ -410,19 +611,24 @@ export default {
clearBoxDrawer(drawers.abnormalDrawer);
if (response.code != 200 || response.data.radar_data.length === 0) {
createEmptyCanvas('original-data-canvas', 1500, 500);
createEmptyCanvas('abnormal-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', '℃');
// 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 = () => {
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);
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) {
@ -439,10 +645,14 @@ 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');
const params = prepareApiParams(404, startTime, options.titleEndTime);
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) {
@ -453,10 +663,14 @@ export default {
// 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);
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) {
@ -472,7 +686,8 @@ export default {
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.verticalProfile.updateSeries(0, getVerticalProfileResponseData(response));
creates.verticalProfileTemp.updateSeries(0,getVerticalProfileResponseData(response))
})
}
@ -480,7 +695,8 @@ export default {
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.verticalProfile.updateSeries(2, getVerticalProfileResponseData(response));
creates.verticalProfileVaporDensity.updateSeries(0, getVerticalProfileResponseData(response));
})
}
@ -488,17 +704,22 @@ export default {
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.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.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));
@ -531,6 +752,71 @@ export default {
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) {
@ -626,32 +912,84 @@ export default {
</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.97rem;
top: -0.38rem;
}
}
}
: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;
align-items: center;
//width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
.picture {
width: 100%;
//flex-direction: column;
width: 45%;
height: 45%;
position: relative;
#original-data-canvas, #abnormal-canvas, #interpolate-canvas,
#BP-temp, #BP-relative-humidity, #BP-vapor-density {
transform: scale(0.5, 0.4);
#original-data-canvas /*#abnormal-canvas*/, #interpolate-canvas {
transform: scale(0.38, 0.4);
}
.title {
//padding-bottom: 0;
width: 100%;
font-size: 0.22rem;
position: absolute;
left: 3.90rem;
left: 3.10rem;
top: 0;
z-index: 100;
}
}
.BPPicture {
width: 65% !important;
height: 45%;
position: relative;
#BP-temp, #BP-relative-humidity, #BP-vapor-density{
transform: scale(0.40, 0.4);
}
.title {
left: 4.35rem!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;
}
}
}

1115
04.系统编码/Frontend/src/components/RamanLidar.vue
View File

File diff suppressed because it is too large

2
04.系统编码/Frontend/src/components/SystemManagement.vue
View File

@ -92,7 +92,7 @@
import {post} from "../uilts/axios";
import {ElMessage} from 'element-plus'
import {format} from '../uilts/String';
import { decrypt, encrypt } from '../uilts/Coder';
import { decrypt, encrypt } from '../uilts/Coder';
export default {
name: 'SystemManagement',

35
04.系统编码/Frontend/src/index.less
View File

@ -168,7 +168,7 @@ img {
position: relative;
.toolbar {
//padding-top: 0.25rem;
margin: 0 0.25rem;
display: flex;
align-items: center;
@ -178,10 +178,7 @@ img {
display: flex;
margin-right: 0.2rem;
align-items: center;
padding-bottom: 0.12rem;
//border-left: 1px solid #666666;
//border-right: 1px solid #666666;
//background-color: #ECF4FF;
padding-bottom: 0.07rem;
div:first-child {
span:last-child {
border-radius: 0.05rem 0 0 0.05rem;
@ -250,17 +247,6 @@ img {
}
}
}
//.first-hour::before, .time-item .time::before {
// content: '';
// width: 1px;
// height: 100%;
// display: block;
// position: absolute;
// left: -1px;
// bottom: 0;
// background-color: #666666;
//}
}
.halfHour {
@ -298,6 +284,7 @@ img {
}
.date-picker {
width: 1.44rem;
height: 0.33rem;
line-height: normal;
@ -384,8 +371,7 @@ img {
.times {
.time-item {
.time {
line-height: 0.46rem;
//line-height: 0.46rem;
}
}
}
@ -427,13 +413,14 @@ img {
//}
.picture-container {
height: 100%;
display: flex;
flex-direction: column;
//flex-direction: column;
justify-content: center;
align-content: center;
.picture {
height: 100%;
//height: 100%;
//.el-image {
// height: 100%;
@ -442,9 +429,9 @@ img {
}
.picture {
//width: 100%;
//height: calc(~"100% - 1.1rem");
//margin: 0 auto;
width: 100%;
height: calc(~"100% - 1.1rem");
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;

3
04.系统编码/Frontend/src/model/constant.ts
View File

@ -1,3 +1,6 @@
export class Constant{
public static readonly baseUrl: string = 'http://rdp.nagr.com.cn:18080';
}
export class ConstantRamanLidar{
public static readonly baseUrl: string = 'http://112.124.40.88:5511/';
}

14
04.系统编码/Frontend/src/model/high-chart-create.ts
View File

@ -31,7 +31,8 @@ export class HighChartCreate {
text: text,
style: {
color: '#000000',
fontSize: '18px'
fontSize: '14px',
fontFamily: 'Verdana'
}
},
categories: [],
@ -46,7 +47,8 @@ export class HighChartCreate {
text: text,
style: {
color: '#000000',
fontSize: '18px'
fontSize: '14px',
fontFamily: 'Verdana'
}
},
max: max,
@ -58,11 +60,12 @@ export class HighChartCreate {
});
}
public setLegend(){
public setLegend(enabled: boolean = false){
this.legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
verticalAlign: 'middle',
enabled: enabled
}
}
@ -125,4 +128,5 @@ export class HighChartCreate {
public updateXAxis(categories: Array<any>, index: number = 0){
this.highChart.xAxis[index].setCategories(categories);
}
}
}

6
04.系统编码/Frontend/src/uilts/box-drawer.ts
View File

@ -75,7 +75,7 @@ export class BoxDrawer{
let startY = this.paddingTop + this.verticalScaleLine + heightInterval;
let interval = (this.borderHeight - heightInterval) / (this.colorChart.colors.length)
this.canvasContext.font = "normal 20px Verdana";
this.canvasContext.font = "normal 24px Verdana";
this.canvasContext.fillStyle = "#000000";
for(let lastLen = this.colorChart.colors.length - 1, index = lastLen; index >= 0; index --){
@ -300,7 +300,7 @@ export class BoxDrawer{
this.canvasContext.stroke();
if (flag){
this.canvasContext.font = "normal 20px Verdana";
this.canvasContext.font = "normal 30px Verdana";
this.canvasContext.fillStyle = "#000000";
const text = moment(this.values.radar_data[index].data_time).format("HH:mm");
this.canvasContext.fillText(text, _x - this.canvasContext.measureText(text).width / 2, startY + yInterval + this.borderHeight + 36);
@ -330,7 +330,7 @@ export class BoxDrawer{
this.canvasContext.stroke();
if (flag) {
this.canvasContext.font = "normal 20px Verdana";
this.canvasContext.font = "normal 30px Verdana";
this.canvasContext.fillStyle = "#000000";
const text = this.values.radar_info[index].col_factor;
this.canvasContext.fillText(text, startX - this.canvasContext.measureText(text).width - this.horizontalScaleLine, _y + 10);

Write Preview
Loading…
Cancel
Save