From 68ed8f5710eff2b6e96864da03df27ab8cc33c7d Mon Sep 17 00:00:00 2001
From: xuhuihui <3548508071@qq.com>
Date: Mon, 28 Feb 2022 09:28:10 +0800
Subject: [PATCH] commit
---
04.系统编码/Frontend/index.html | 5 +-
04.系统编码/Frontend/package-lock.json | 14 +-
04.系统编码/Frontend/package.json | 2 +-
04.系统编码/Frontend/public/favicon.ico | Bin 9662 -> 4286 bytes
.../src/components/MicrowaveRadiation.vue | 474 ++++++-
.../Frontend/src/components/RamanLidar.vue | 1115 +++++++++++------
.../src/components/SystemManagement.vue | 2 +-
04.系统编码/Frontend/src/index.less | 35 +-
.../Frontend/src/model/constant.ts | 3 +
.../Frontend/src/model/high-chart-create.ts | 14 +-
.../Frontend/src/uilts/box-drawer.ts | 6 +-
11 files changed, 1174 insertions(+), 496 deletions(-)
diff --git a/04.系统编码/Frontend/index.html b/04.系统编码/Frontend/index.html
index 796b397..82d9ad3 100644
--- a/04.系统编码/Frontend/index.html
+++ b/04.系统编码/Frontend/index.html
@@ -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>
diff --git a/04.系统编码/Frontend/package-lock.json b/04.系统编码/Frontend/package-lock.json
index 10c2ab2..c3a027c 100644
--- a/04.系统编码/Frontend/package-lock.json
+++ b/04.系统编码/Frontend/package-lock.json
@@ -13,7 +13,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",
@@ -1652,9 +1652,9 @@
"dev": true
},
"node_modules/highcharts": {
- "version": "9.3.2",
- "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.3.2.tgz",
- "integrity": "sha512-I/48gNMvs3hZxZnPRUqLbnlrGZJJ7YPPVr1+fYeZ35p4pSZAOwTmAGbptrjBr7JlF52HmJH9zMbt/I4TPLu9Pg=="
+ "version": "9.3.3",
+ "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.3.3.tgz",
+ "integrity": "sha512-QeOvm6cifeZYYdTLm4IxZsXcOE9c4xqfs0z0OJJ0z7hhA9WG0rmcVAyuIp5HBl/znjA/ayYHmpYjBYD/9PG4Fg=="
},
"node_modules/http-assert": {
"version": "1.5.0",
@@ -5055,9 +5055,9 @@
"dev": true
},
"highcharts": {
- "version": "9.3.2",
- "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.3.2.tgz",
- "integrity": "sha512-I/48gNMvs3hZxZnPRUqLbnlrGZJJ7YPPVr1+fYeZ35p4pSZAOwTmAGbptrjBr7JlF52HmJH9zMbt/I4TPLu9Pg=="
+ "version": "9.3.3",
+ "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.3.3.tgz",
+ "integrity": "sha512-QeOvm6cifeZYYdTLm4IxZsXcOE9c4xqfs0z0OJJ0z7hhA9WG0rmcVAyuIp5HBl/znjA/ayYHmpYjBYD/9PG4Fg=="
},
"http-assert": {
"version": "1.5.0",
diff --git a/04.系统编码/Frontend/package.json b/04.系统编码/Frontend/package.json
index 8415147..6fb5d08 100644
--- a/04.系统编码/Frontend/package.json
+++ b/04.系统编码/Frontend/package.json
@@ -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",
diff --git a/04.系统编码/Frontend/public/favicon.ico b/04.系统编码/Frontend/public/favicon.ico
index 4a45747c25205f2f2cdc2f65a20f680bd48979f2..92dc57c2d7d6175e81c7204a0949b4822feef763 100644
GIT binary patch
literal 4286
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
BB_{v?
literal 9662
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
X652^7Gvh_<SQ6MZw6g|I(V#y9Sc0|*
diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index 942cdac..eac6935 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -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;
}
}
}
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index 63fba51..83adc25 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -1,439 +1,784 @@
<template>
- <div class="tabs"></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 @click="onRegionClick('jiangning')" :class="{'active': currentRegion === 'jiangning'}">江宁</span></el-col>
- <el-col :span="8"><span @click="onRegionClick('liuhe')" :class="{'active': currentRegion === 'liuhe'}">六合</span></el-col>
- <el-col :span="8"><span @click="onRegionClick('pukou')" :class="{'active': currentRegion === 'pukou'}">浦口</span></el-col>
- </el-row>
- </div>
- <!-- layertype -->
- <div class="menu-item">
- <h2 class="tip">要素选择</h2>
- <el-row :gutter="12">
- <el-col :span="24"><span @click="onElementClick('PBLH', '边界层高度')" :class="{'active': currentElement === 'PBLH'}">边界层高度</span></el-col>
- <el-col :span="24"><span @click="onElementClick('opticalthickness', '光学厚度')" :class="{'active': currentElement === 'opticalthickness'}">光学厚度</span></el-col>
- <el-col :span="24"><span @click="onElementClick('Lidar_ratio', '激光雷达比')" :class="{'active': currentElement === 'Lidar_ratio'}">激光雷达比</span></el-col>
- <el-col :span="24"><span @click="onElementClick('PM', '气溶胶PM')" :class="{'active': currentElement === 'PM'}">气溶胶PM</span></el-col>
- <el-col :span="24"><span @click="onElementClick('ext_plot', '消光系数')" :class="{'active': currentElement === 'ext_plot'}">消光系数</span></el-col>
- <el-col :span="24"><span @click="onElementClick('layertype', '云气溶胶分类')" :class="{'active': currentElement === 'layertype'}">云气溶胶分类</span></el-col>
- <el-col :span="24"><span @click="onElementClick('wv_plot', '水汽')" :class="{'active': currentElement === 'wv_plot'}">水汽</span></el-col>
- <el-col :span="24"><span @click="onElementClick('cloudheight', '云高')" :class="{'active': currentElement === 'cloudheight'}">云高</span></el-col>
- </el-row>
- </div>
+ <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 === 'boundary-layer-height'}" class="tab-item" @click="onTabClick('boundary-layer-height')">
+ 水汽
+ <img v-if="currentTab === 'boundary-layer-height'" src="/images/line.png"/>
+ </div>
+ <div :class="{'active': currentTab === 'optical-property'}" class="tab-item" @click="onTabClick('optical-property')">
+ 光学特性
+ <img v-if="currentTab === 'optical-property'" src="/images/line.png"/>
+ </div>
+ <div :class="{'active': currentTab === 'aerosol-product'}" class="tab-item" @click="onTabClick('aerosol-product')">
+ 气溶胶产品
+ <img v-if="currentTab === 'aerosol-product'" src="/images/line.png"/>
+ </div>
+ <div :class="{'active': currentTab === 'BingoCloud'}" class="tab-item" @click="onTabClick('BingoCloud')">
+ 云产品
+ <img v-if="currentTab === 'BingoCloud'" 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 @click="onRegionClick('jiangning')"
+ :class="{'active': currentRegion === 'jiangning'}">江宁</span></el-col>
+ <el-col :span="8"><span @click="onRegionClick('liuhe')"
+ :class="{'active': currentRegion === 'liuhe'}">六合</span></el-col>
+ <el-col :span="8"><span @click="onRegionClick('pukou')"
+ :class="{'active': currentRegion === 'pukou'}">浦口</span></el-col>
+ </el-row>
+ </div>
+
+ <!-- layertype -->
+ <div class="menu-item">
+ <h2 class="tip">要素选择</h2>
+<!-- <el-row :gutter="12">-->
+<!-- <el-col :span="24"><span @click="onElementClick('PBLH', '边界层高度')"-->
+<!-- :class="{'active': currentElement === 'PBLH'}">边界层高度</span></el-col>-->
+<!-- <el-col :span="24"><span @click="onElementClick('opticalthickness', '光学厚度')"-->
+<!-- :class="{'active': currentElement === 'opticalthickness'}">光学厚度</span></el-col>-->
+<!-- <el-col :span="24"><span @click="onElementClick('Lidar_ratio', '激光雷达比')"-->
+<!-- :class="{'active': currentElement === 'Lidar_ratio'}">激光雷达比</span></el-col>-->
+<!-- <el-col :span="24"><span @click="onElementClick('PM', '气溶胶PM')" :class="{'active': currentElement === 'PM'}">气溶胶PM</span>-->
+<!-- </el-col>-->
+<!-- <el-col :span="24"><span @click="onElementClick('ext_plot', '消光系数')"-->
+<!-- :class="{'active': currentElement === 'ext_plot'}">消光系数</span></el-col>-->
+<!-- <el-col :span="24"><span @click="onElementClick('layertype', '云气溶胶分类')"-->
+<!-- :class="{'active': currentElement === 'layertype'}">云气溶胶分类</span></el-col>-->
+<!-- <el-col :span="24"><span @click="onElementClick('wv_plot', '水汽')"-->
+<!-- :class="{'active': currentElement === 'wv_plot'}">水汽</span></el-col>-->
+<!-- <el-col :span="24"><span @click="onElementClick('cloudheight', '云高')"-->
+<!-- :class="{'active': currentElement === 'cloudheight'}">云高</span></el-col>-->
+<!-- </el-row>-->
+ </div>
+ </div>
+
+ <div class="container panel">
+ <div class="toolbar day-toolbar">
+ <div class="times">
+ <div class="time-item" v-for="(time, index) in times" :key="index"
+ :class="{'active': currentTime === time.date}">
+ <span class="time" @click="onTimeClick(time, index)">{{ time.day }}</span>
+ </div>
+ </div>
+ <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false"
+ class="date-picker" @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>
- <div class="container panel">
- <div class="toolbar day-toolbar">
- <div class="times">
- <div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}">
- <span class="time" @click="onTimeClick(time, index)">{{time.day}}</span>
- </div>
- </div>
- <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker" @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>
- <div class="refresh-btn" @click="onRefreshClick">
- <img src="/images/refresh.png" />
- </div>
- <div class="btns-group">
- <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>
- <a @click="onDownloadClick">下载动画</a>
- <a id="radarDownload" :href="downloadSrc" download style="display: none;">下载隐藏层</a>
- </div>
- </div>
- <div class="picture-view">
- <span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span>
- <span class="arrow arrow-next" @click="onNextImgClick"><img src="/images/next-btn.png" /></span>
- <!-- <span class="save-btn" @click="onSaveClick" v-if="currentElement === 'PBLH'"><img src="/images/save.png" /></span> -->
- <a :href="downloadImgUrl" download class="save-btn" v-if="currentElement !== 'PBLH'"><img src="/images/save.png" /></a>
- <div class="download-pictures hide" id="pictures">
- <a v-for="(url, index) in urls" :key="index" download></a>
- </div>
- <div class="picture-container raman-picture-container">
- <!-- <h2 class="title">{{title}}</h2> -->
- <div class="picture">
- <el-image
- :src="imgUrl"
- :preview-src-list="previewUrl"
- :initial-index="1"
- fit="contain"
- @load="onImageLoad"
- :class="{'pblh-image': currentElement === 'PBLH'}"
- >
- <template #error>
- <div class="image-slot">
- <img src="/images/null-picture.png" />
- </div>
- <p class="image-tip">暂无图片</p>
- </template>
- <template #placeholder>
- <div class="image-placeholder">正在加载...</div>
- </template>
- </el-image>
- <el-image
- :src="signalPBLHImgUrl"
- :preview-src-list="signalPBLHPreviewUrl"
- :initial-index="1"
- fit="contain"
- @load="onImageLoad"
- v-if="currentElement === 'PBLH'"
- :class="{'pblh-image': currentElement === 'PBLH'}"
- >
- <template #error>
- <div class="image-slot">
- <img src="/images/null-picture.png" />
- </div>
- <p class="image-tip">暂无图片</p>
- </template>
- <template #placeholder>
- <div class="image-placeholder">正在加载...</div>
- </template>
- </el-image>
- </div>
- </div>
- </div>
+ <!-- <div class="refresh-btn" @click="onRefreshClick">-->
+ <!-- <img src="/images/refresh.png"/>-->
+ <!-- </div>-->
+ <!-- <div class="btns-group">-->
+ <!-- <span @click="onPlayClick">{{ isPlay ? '暂停动画' : '播放动画' }}</span>-->
+ <!-- <a @click="onDownloadClick">下载动画</a>-->
+ <!-- <a id="radarDownload" :href="downloadSrc" download style="display: none;">下载隐藏层</a>-->
+ <!-- </div>-->
+ </div>
+ <div class="picture-view">
+ <!-- <span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span>-->
+ <!-- <span class="arrow arrow-next" @click="onNextImgClick"><img src="/images/next-btn.png" /></span>-->
+ <!-- <!– <span class="save-btn" @click="onSaveClick" v-if="currentElement === 'PBLH'"><img src="/images/save.png" /></span> –>-->
+ <!-- <a :href="downloadImgUrl" download class="save-btn" v-if="currentElement !== 'PBLH'"><img src="/images/save.png" /></a>-->
+ <!-- <div class="download-pictures hide" id="pictures">-->
+ <!-- <a v-for="(url, index) in urls" :key="index" download></a>-->
+ <!-- </div>-->
+ <div class="picture-container raman-picture-container" v-show="currentTab === 'boundary-layer-height'">
+ <div class="picture">
+ <h2>水汽</h2>
+ </div>
</div>
+
+ <div class="picture-container raman-picture-container" v-show="currentTab === 'optical-property'">
+ <div class="picture">
+ <h2 class="title">激光雷达比</h2>
+ <div id="LidarRatio" style="width: 650px;height: 450px"></div>
+ </div>
+ <div class="picture">
+ <h2 class="title">光学厚度</h2>
+ </div>
+ <div class="picture">
+ <h2 class="title">消光系数</h2>
+ </div>
+ </div>
+
+ <div class="picture-container raman-picture-container" v-show="currentTab === 'aerosol-product'">
+ <div class="picture">
+ <h2 class="title">边界层高度</h2>
+ <div id="BoundaryLayerHeight" style="width: 650px;height: 450px"></div>
+ </div>
+ <div class="picture">
+ <h2 class="title">气溶胶PM</h2>
+ </div>
+
+ <div class="picture">
+ <h2 class="title">边界层特征值</h2>
+ </div>
+ </div>
+
+ <div class="picture-container raman-picture-container" v-show="currentTab === 'BingoCloud'">
+ <div class="picture">
+ <h2 class="title">云气溶胶分类</h2>
+ </div>
+ <div class="picture">
+ <h2 class="title">云层高度</h2>
+ <div id="cloudsHeight" style="width: 650px;height: 450px"></div>
+ </div>
+ <div class="picture">
+ <h2 class="title">云顶高度</h2>
+ <div id="cloudTopHeight" style="width: 650px;height: 450px"></div>
+ </div>
+ </div>
+
+ <div class="picture-container raman-picture-container" v-show="currentTab === 'MWR'">
+ <div class="picture">
+ <h2 class="title">云的识别</h2>
+ </div>
+ <div class="picture">
+ <h2 class="title">消光系数</h2>
+ </div>
+ <div class="picture">
+ <h2 class="title">水汽</h2>
+ </div>
+ </div>
+ </div>
+
</div>
+ </div>
</template>
<script lang="ts">
- import { onMounted, reactive, toRefs } from 'vue';
- import moment from "moment";
- import { RamanLidarConfig } from '../uilts/Config';
- import { post } from '../uilts/axios';
-
- export default {
- name: 'RamanLidar',
- setup() {
- let timer = null;
- let options = reactive({
- currentRegion: 'jiangning',
- currentElement: 'PBLH',
- currentType: '边界层高度',
- date: moment('2021-11-15').format('YYYY-MM-DD'),
- times: [],
- currentTime: null,
- downloadImgUrl: '/images/default-picture.png',
- imgUrl: '/images/default-picture.png',
- signalPBLHImgUrl: '/images/default-picture.png',
- previewUrl: [],
- signalPBLHPreviewUrl: [],
- isPlay: false,
- title: null,
- index: 0,
- downloadSrc: null,
- urls: []
- })
-
- onMounted(() => {
- initTimeLine();
- setTitle(moment(options.date, 'YYYY-MM-DD'));
- setTimeout(() => {
- activeImage();
- }, 50);
- })
-
- const onRegionClick = (region) => {
- options.currentRegion = region;
- options.date = options.currentTime;
-
- cancelActive();
- setTitle(moment(options.date));
- activeImage();
- }
+import {onMounted, reactive, toRefs} from 'vue';
+import moment, {min} from "moment";
+import {RamanLidarConfig} from '../uilts/Config';
+import {post} from '../uilts/axios';
+import {ElMessage} from "element-plus";
+import * as Highcharts from 'highcharts';
+import {ConstantRamanLidar} from "../model/constant";
+import {get} from '../uilts/axios';
+import {HighChartCreate} from "../model/high-chart-create";
+import {BoxDrawer, ColorChart, createEmptyCanvas} from "../uilts/box-drawer";
+
+export default {
+ name: 'RamanLidar',
+ setup() {
+ let timer = null;
+ let creates: {
+ boundaryLayerHeight: HighChartCreate
+ cloudsHeight: HighChartCreate
+ cloudTopHeight: HighChartCreate
+ LidarRatio: HighChartCreate
+ } = {
+ boundaryLayerHeight: null,
+ cloudsHeight: null,
+ cloudTopHeight: null,
+ LidarRatio: null
+ }
+ let options = reactive({
+ currentTab: 'MWR',
+ currentRegion: 'jiangning',
+ currentElement: 'PBLH',
+ currentType: '边界层高度',
+ date: moment('2021-12-14').format('YYYY-MM-DD'),
+ times: [],
+ currentTime: null,
+ downloadImgUrl: '/images/default-picture.png',
+ imgUrl: '/images/default-picture.png',
+ signalPBLHImgUrl: '/images/default-picture.png',
+ previewUrl: [],
+ signalPBLHPreviewUrl: [],
+ isPlay: false,
+ title: null,
+ index: 0,
+ downloadSrc: null,
+ urls: [],
+ boundaryLayerHeightList: [],
+ LidarRatioList: [],
+ cloudsHeightList: [],
+ cloudTopHeightList: []
+ })
+
+ onMounted(() => {
+ initTimeLine();
+ setTitle(moment(options.date, 'YYYY-MM-DD'));
+ setTimeout(() => {
+ activeImage();
+ }, 50)
+ })
+
+ //边界层高度
+ const boundaryLayerHeightInit = () => {
+ creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight');
+ creates.boundaryLayerHeight.setChart();
+ creates.boundaryLayerHeight.setXAxis('时间(分钟)', false);
+ creates.boundaryLayerHeight.setYAxis('边界层高度(米)', 3000, 0, 500, 7);
+ creates.boundaryLayerHeight.setLegend();
+ creates.boundaryLayerHeight.setTooltip('{point.category}: {point.y}(m)');
+ creates.boundaryLayerHeight.setSeries('边界层高度')
+ creates.boundaryLayerHeight.init();
+ }
- const onElementClick = (element, type) => {
- options.currentElement = element;
- options.currentType = type;
- options.date = options.currentTime;
+ //云层高度
+ const cloudsHeightInit = () => {
+ creates.cloudsHeight = new HighChartCreate('cloudsHeight');
+ creates.cloudsHeight.setChart(false,'scatter');
+ creates.cloudsHeight.setXAxis('时间(分钟)', false);
+ creates.cloudsHeight.setYAxis('高度(米)', 14000, 0, 2000, 8);
+ creates.cloudsHeight.setLegend();
+ creates.cloudsHeight.setTooltip('{point.category}: {point.y}(m)');
+ creates.cloudsHeight.setSeries('云层高度')
+ creates.cloudsHeight.init();
+ }
+ //云顶高度
+ const cloudTopHeightInit = () => {
+ creates.cloudTopHeight = new HighChartCreate('cloudTopHeight');
+ creates.cloudTopHeight.setChart(false,'scatter');
+ creates.cloudTopHeight.setXAxis('时间(分钟)', false);
+ creates.cloudTopHeight.setYAxis('高度(米)', 14000, 0, 2000, 8);
+ creates.cloudTopHeight.setLegend();
+ creates.cloudTopHeight.setTooltip('{point.category}: {point.y}(m)');
+ creates.cloudTopHeight.setSeries('云顶高度')
+ creates.cloudTopHeight.init();
+ }
- cancelActive();
- setTitle(moment(options.date));
- activeImage();
- }
+ //激光雷达比
+ const LidarRatioInit = () => {
+ creates.LidarRatio = new HighChartCreate('LidarRatio');
+ creates.LidarRatio.setChart();
+ creates.LidarRatio.setXAxis('时间(分钟)', false);
+ creates.LidarRatio.setYAxis('边界层高度(米)', 3000, 0, 500, 7);
+ creates.LidarRatio.setLegend();
+ creates.LidarRatio.setTooltip('{point.category}: {point.y}(m)');
+ creates.LidarRatio.setSeries('激光雷达比')
+ creates.LidarRatio.init();
+ }
- const setTitle = (date) => {
- options.title = date.format('YYYY.MM.DD') + ' ' + options.currentType;
- }
+ const onTabClick = (name) => {
+ options.currentTab = name;
+ setTimeout(() => {
+ initEcharts(name)
+ reloadChangeData()
+ }, 500)
+ }
- const activeImage = () => {
- options.imgUrl = RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, moment(options.currentTime, 'YYYY-MM-DD'));
- options.previewUrl = [options.imgUrl];
+ const reloadChangeData = () => {
+ if (options.currentTab === 'boundary-layer-height') {
+
+ } else if (options.currentTab === 'optical-property') {
+ LidarRatioApi()
+ } else if (options.currentTab === 'aerosol-product') {
+ boundaryLayerHeightDate()
+ // boundaryCharacteristicApi()
+ //aerosolApi()
+ } else if (options.currentTab === 'BingoCloud') {
+ //layerTypeApi()
+ cloudsHeightApi()
+ cloudTopHeightApi()
+ } else if (options.currentTab === 'MWR') {
+ // waterVapourApi()
+ }
+ }
- options.signalPBLHImgUrl = RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, moment(options.currentTime, 'YYYY-MM-DD'));
- options.signalPBLHPreviewUrl = [options.signalPBLHImgUrl];
- }
+ const initEcharts = (name) => {
+ if (name === 'boundary-layer-height') {
+
+ } else if (name === 'optical-property') {
+ LidarRatioInit()
+ } else if (name === 'aerosol-product') {
+ boundaryLayerHeightInit()
+ } else if (name === 'BingoCloud') {
+ cloudsHeightInit()
+ cloudTopHeightInit()
+ }
+ }
- const onImageLoad = (event) => {
- if (event.currentTarget.getAttribute('src') !== '/images/default-picture.png')
- converToBase64(options.imgUrl);
- else
- return
- }
+ //区域切换
+ const onRegionClick = (region) => {
+ options.currentRegion = region;
+ options.date = options.currentTime;
+ cancelActive();
+ setTitle(moment(options.date));
+ activeImage();
+ setTimeout(() => {
+ }, 500)
+ }
- const onDownloadClick = () => {
- post("/image/createGif", prepareParams(), 'application/json').then((response: any) => {
- if (response.error != 0){
- console.log(response.message);
- return;
- }
-
- fetch(response.data).then(res => {
- return res.blob();
- }).then(blob => {
- let reader = new FileReader();
- reader.onloadend = function(){
- options.downloadSrc = reader.result;
-
- setTimeout(() => {
- document.getElementById("radarDownload").click();
- options.downloadSrc = null;
- }, 500);
- };
- reader.readAsDataURL(blob);
- }).catch(console.error);
- })
- }
+ //要素选择
+ // const onElementClick = (element, type) => {
+ // options.currentElement = element;
+ // options.currentType = type;
+ // options.date = options.currentTime;
+ // setTimeout(() => {
+ // }, 500)
+ // cancelActive();
+ // setTitle(moment(options.date));
+ // activeImage();
+ // }
+
+ const setTitle = (date) => {
+ options.title = date.format('YYYY.MM.DD') + ' ' + options.currentType;
+ }
- const prepareParams = () => {
- return {
- model: 'radar',
- station: options.currentRegion,
- elementCode: options.currentElement,
- type: null,
- time: moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss"),
- urls: prepareUrls()
- }
- }
+ const activeImage = () => {
+ options.imgUrl = RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, moment(options.currentTime, 'YYYY-MM-DD'));
+ options.previewUrl = [options.imgUrl];
- const prepareUrls = () => {
- let urls = [];
- for(let index = 0, len = options.times.length; index < len; index++){
- let time = moment(options.times[index].date);
-
- if (options.currentElement === 'PBLH') {
- urls.push(
- RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time),
- RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, time)
- );
- } else
- urls.push(RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time));
- }
-
- console.log(urls)
- return urls;
- }
+ options.signalPBLHImgUrl = RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, moment(options.currentTime, 'YYYY-MM-DD'));
+ options.signalPBLHPreviewUrl = [options.signalPBLHImgUrl];
+ }
- const converToBase64 = (path) => {
- let img = new Image();
- img.src = path;
- let canvas = document.createElement("canvas") as HTMLCanvasElement;
- canvas.width = img.width;
- canvas.height = img.height;
-
- let ctx = canvas.getContext("2d");
- let base64 = '';
-
- img.setAttribute("crossOrigin",'Anonymous')
- img.onload = function() {
- ctx.drawImage(img, 0, 0);
- base64 = canvas.toDataURL("image/png");
- options.downloadImgUrl = base64;
- };
- }
+ const onImageLoad = (event) => {
+ if (event.currentTarget.getAttribute('src') !== '/images/default-picture.png')
+ converToBase64(options.imgUrl);
+ else
+ return
+ }
- const initTimeLine = () => {
- options.times = [];
- options.currentTime = moment(options.date).format('YYYY-MM-DD');
+ const onDownloadClick = () => {
+ post("/image/createGif", prepareParams(), 'application/json').then((response: any) => {
+ if (response.error != 0) {
+ console.log(response.message);
+ return;
+ }
- let now = moment(options.date).add(1, 'day');
+ fetch(response.data).then(res => {
+ return res.blob();
+ }).then(blob => {
+ let reader = new FileReader();
+ reader.onloadend = function () {
+ options.downloadSrc = reader.result;
+
+ setTimeout(() => {
+ document.getElementById("radarDownload").click();
+ options.downloadSrc = null;
+ }, 500);
+ };
+ reader.readAsDataURL(blob);
+ }).catch(console.error);
+ })
+ }
- for (let i = 0; i < 15 ; i++) {
- options.times.push({
- day: now.add(-1, 'day').format('DD'),
- date: now.format('YYYY-MM-DD'),
- })
- }
+ //参数准备
+ const prepareParams = () => {
+ return {
+ model: 'radar',
+ station: options.currentRegion,
+ elementCode: options.currentElement,
+ type: null,
+ time: moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss"),
+ urls: prepareUrls()
+ }
+ }
- options.times.reverse();
- options.index = options.times.length - 1;
+ const prepareUrls = () => {
+ let urls = [];
+ for (let index = 0, len = options.times.length; index < len; index++) {
+ let time = moment(options.times[index].date);
+
+ if (options.currentElement === 'PBLH') {
+ urls.push(
+ RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time),
+ RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, time)
+ );
+ } else
+ urls.push(RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time));
+ }
+
+ console.log(urls)
+ return urls;
+ }
- }
+ const converToBase64 = (path) => {
+ let img = new Image();
+ img.src = path;
+ let canvas = document.createElement("canvas") as HTMLCanvasElement;
+ canvas.width = img.width;
+ canvas.height = img.height;
+
+ let ctx = canvas.getContext("2d");
+ let base64 = '';
+
+ img.setAttribute("crossOrigin", 'Anonymous')
+ img.onload = function () {
+ ctx.drawImage(img, 0, 0);
+ base64 = canvas.toDataURL("image/png");
+ options.downloadImgUrl = base64;
+ };
+ }
- const onTimeClick = (time, index) => {
- options.currentTime = time.date;
- options.date = time.date;
- options.index = index;
- cancelActive();
- setTitle(moment(time.date, 'YYYY-MM-DD'));
- activeImage();
- }
+ //初始化时间轴
+ const initTimeLine = () => {
+ options.times = [];
+ options.currentTime = moment(options.date).format('YYYY-MM-DD');
+ let now = moment(options.date).add(1, 'day');
+
+ for (let i = 0; i < 15; i++) {
+ options.times.push({
+ day: now.add(-1, 'day').format('DD'),
+ date: now.format('YYYY-MM-DD'),
+ })
+ }
+ options.times.reverse();
+ options.index = options.times.length - 1;
+ }
- const cancelActive = () => {
- clearTimer();
- options.isPlay = false;
- }
+ //时间选择
+ const onTimeClick = (time, index) => {
- const onPrevDayClick = () => {
- let element = getCurrentElement();
-
- options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
- options.currentTime = options.date;
- options.index--;
- if (options.index < 0) {
- options.index = element.childElementCount - 1;
- options.date = options.times[options.times.length - 1].date
- }
-
- cancelActive();
- setCurrentPlayElement(element)
- }
+ options.currentTime = time.date;
+ options.date = time.date;
+ reloadChangeData()
+ options.index = index;
+ cancelActive();
+ setTitle(moment(time.date, 'YYYY-MM-DD'));
+ activeImage();
+ }
- const onNextDayClick = () => {
- options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD')
- }
+ const cancelActive = () => {
+ clearTimer();
+ options.isPlay = false;
+ }
- const onPrevImgClick = () => {
- let element = getCurrentElement();
+ //上一天
+ const onPrevDayClick = () => {
+ let element = getCurrentElement();
+ options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
+
+ options.currentTime = options.date;
+ options.index--;
+ if (options.index < 0) {
+ options.index = element.childElementCount - 1;
+ options.date = options.times[options.times.length - 1].date
+ }
+ initTimeLine()
+ cancelActive();
+ setCurrentPlayElement(element)
+ reloadChangeData()
+ }
- options.index--;
- if (options.index < 0)
- options.index = element.childElementCount - 1;
+ const onNextDayClick = () => {
+ options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD')
+ initTimeLine()
+ reloadChangeData()
+ }
- setCurrentPlayElement(element);
- }
-
- const onNextImgClick = () => {
- let element = getCurrentElement();
-
- options.index++;
- if (options.index > element.childElementCount - 1)
- options.index = 0;
-
- setCurrentPlayElement(element);
- }
+ //上一张图片
+ const onPrevImgClick = () => {
+ let element = getCurrentElement();
- const onRefreshClick = () => {
- options.date = moment('2021-11-15').format('YYYY-MM-DD');
- options.currentTime = options.times[options.times.length - 1].date;
+ options.index--;
+ if (options.index < 0)
+ options.index = element.childElementCount - 1;
- cancelActive();
- activeImage();
- }
+ setCurrentPlayElement(element);
+ }
- const onPlayClick = () => {
- options.isPlay = !options.isPlay;
- if (options.isPlay) {
- timeExcute();
- } else {
- clearTimer();
- }
- }
+ const onNextImgClick = () => {
+ let element = getCurrentElement();
- const timeExcute = () => {
- clearTimer();
+ options.index++;
+ if (options.index > element.childElementCount - 1)
+ options.index = 0;
- let element = getCurrentElement();
+ setCurrentPlayElement(element);
+ }
- timer = setInterval( () => {
- options.index++;
- if (options.index > element.childElementCount - 1)
- options.index = 0;
+ //重置
+ const onRefreshClick = () => {
+ options.date = moment('2021-11-15').format('YYYY-MM-DD');
+ options.currentTime = options.times[options.times.length - 1].date;
- setCurrentPlayElement(element);
- }, 3000)
- }
+ cancelActive();
+ activeImage();
+ }
- const clearTimer = () => {
- if (timer)
- clearInterval(timer);
- }
+ const onPlayClick = () => {
+ options.isPlay = !options.isPlay;
+ if (options.isPlay) {
+ timeExcute();
+ } else {
+ clearTimer();
+ }
+ }
- const getCurrentElement = () => {
- return document.querySelector('.times');
- }
+ const timeExcute = () => {
+ clearTimer();
- const setCurrentPlayElement = (element) => {
- for(let i = 0; i < element.childElementCount; i++)
- element.children[i].classList.remove('active');
+ let element = getCurrentElement();
- element.children[options.index].classList.add('active');
- options.currentTime = options.times[options.index].date;
- setTitle(moment(options.times[options.index].date, 'YYYY-MM-DD'));
- activeImage();
- }
+ timer = setInterval(() => {
+ options.index++;
+ if (options.index > element.childElementCount - 1)
+ options.index = 0;
+ setCurrentPlayElement(element);
+ }, 3000)
+ }
- const onChange = () => {
- initTimeLine();
- setTitle(moment(options.date));
- activeImage();
- }
+ const clearTimer = () => {
+ if (timer)
+ clearInterval(timer);
+ }
+
+ const getCurrentElement = () => {
+ return document.querySelector('.times');
+ }
+
+ const setCurrentPlayElement = (element) => {
+ for (let i = 0; i < element.childElementCount; i++)
+ element.children[i].classList.remove('active');
+
+ element.children[options.index].classList.add('active');
+ options.currentTime = options.times[options.index].date;
+ setTitle(moment(options.times[options.index].date, 'YYYY-MM-DD'));
+ activeImage();
+ }
+
+ const onChange = () => {
+ initTimeLine();
+ setTitle(moment(options.date));
+ activeImage();
+ }
+
+ const onSaveClick = () => {
+ let pictures = document.getElementById('pictures');
+ options.urls = [options.imgUrl, options.signalPBLHImgUrl];
+
+ for (let i = 0; i < options.urls.length; i++) {
+ let img = new Image();
+ img.src = options.urls[i];
+ let canvas = document.createElement("canvas") as HTMLCanvasElement;
+ canvas.width = img.width;
+ canvas.height = img.height;
+
+ let ctx = canvas.getContext("2d");
+ let base64 = "";
+
+ img.setAttribute("crossOrigin", 'Anonymous');
+ img.onload = () => {
+ ctx.drawImage(img, 0, 0);
+ base64 = canvas.toDataURL("image/png");
+ pictures.children[i].setAttribute('href', base64);
+ setTimeout(() => {
+ let button: HTMLElement = pictures.children[i] as HTMLElement;
+ button.click();
+ pictures.children[i].setAttribute('href', null);
+ }, 500);
+ };
+ }
+ }
+
+
+ //边界层高度
+ const boundaryLayerHeightDate = () => {
+ options.boundaryLayerHeightList = []
+ const time = moment(options.date).format('MM_DD')
+ const params = prepareApiParams(time, 'pblh')
+ get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
+ if (response.length <= 0) {
+ verify()
+ return;
+ }
+ for (let i in response) {
+ for (let val in response[i]) {
+ options.boundaryLayerHeightList.push(response[i][val])
+ }
+ }
+ creates.boundaryLayerHeight.updateSeries(0, options.boundaryLayerHeightList)
+ })
+ }
+
+ //边界层特征值
+ const boundaryCharacteristicApi = () => {
+ const time = moment(options.date).format('MM_DD')
+ const params = prepareApiParams(time, 'pblhfeatures')
+ get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response) => {
+ console.log(response)
+ })
+ }
+
+ //光学特性
+ //激光雷达比
+ const LidarRatioApi = () => {
+ options.LidarRatioList = []
+ const time = moment(options.date).format('MM_DD')
+ const params = prepareApiParams(time, 'lidarratio')
+ get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
+ if (response.length <= 0) {
+ verify()
+ return;
+ }
+ for (let i in response[18]) {
+ if (response[18][i] === null) {
+ response[18][i] = 0
+ }
+ options.LidarRatioList.push(response[18][i])
+ }
+ creates.LidarRatio.updateSeries(0, options.LidarRatioList)
+ })
+ }
+
+
+ //消光系数
+ // const extinctionApi = () => {
+ // const time = moment(options.date).format('MM_DD')
+ // const params = prepareApiParams(time ,'extinction')
+ // get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
+ //
+ // })
+ // }
+
+ //水汽
+ const waterVapourApi = () => {
+ const time = moment(options.date).format('MM_DD')
+ const params = prepareApiParams(time,'watervapor')
+ get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
+ console.log(response)
+ })
+ }
+
+ //气溶胶PM
+ //粗颗粒
+ const aerosolApi = () => {
+ const time = moment(options.date).format('MM_DD')
+ const params = prepareApiParams(time,'pm10')
+ get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
+ console.log(response)
+ })
+ }
+
+ //云气溶胶分类
+ const layerTypeApi = () => {
+ const time = moment(options.date).format('MM_DD')
+ const params = prepareApiParams(time,'layertype')
+ get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
+
+ })
+ }
- const onSaveClick = () => {
- let pictures = document.getElementById('pictures');
- options.urls = [options.imgUrl, options.signalPBLHImgUrl];
-
- for (let i = 0; i < options.urls.length; i++) {
- let img = new Image();
- img.src = options.urls[i];
- let canvas = document.createElement("canvas") as HTMLCanvasElement;
- canvas.width = img.width;
- canvas.height = img.height;
-
- let ctx = canvas.getContext("2d");
- let base64 = "";
-
- img.setAttribute("crossOrigin",'Anonymous');
- img.onload = () => {
- ctx.drawImage(img, 0, 0);
- base64 = canvas.toDataURL("image/png");
- pictures.children[i].setAttribute('href', base64);
- setTimeout(() => {
- let button: HTMLElement = pictures.children[i] as HTMLElement;
- button.click();
- pictures.children[i].setAttribute('href', null);
- }, 500);
- };
- }
+ //云层高度
+ const cloudsHeightApi = () => {
+ options.cloudsHeightList = []
+ const time = moment(options.date).format('MM_DD')
+ const params = prepareApiParams(time,'cloudbaseheight')
+ get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
+ if (response.length <= 0) {
+ verify()
+ return;
+ }
+ for (let i in response) {
+ for (let val in response[i]) {
+ if (response[i][val] === null) {
+ response[i][val] = 0
}
+ options.cloudsHeightList.push([parseInt(i),response[i][val]])
+ }
+ }
+ creates.cloudsHeight.updateSeries(0, options.cloudsHeightList)
+ })
+ }
- return {
- ...toRefs(options),
- onRegionClick,
- onElementClick,
- onTimeClick,
- onPrevDayClick,
- onNextDayClick,
- onPrevImgClick,
- onNextImgClick,
- onRefreshClick,
- onPlayClick,
- onChange,
- onImageLoad,
- onDownloadClick,
- onSaveClick
+ //云顶高度
+ const cloudTopHeightApi = () => {
+ options.cloudTopHeightList = []
+ const time = moment(options.date).format('MM_DD')
+ const params = prepareApiParams(time,'cloudtopheight')
+ get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
+ if (response.length <= 0) {
+ verify()
+ return;
+ }
+ for (let i in response) {
+ for (let val in response[i]) {
+ if (response[i][val] === null) {
+ response[i][val] = 0
}
+ options.cloudTopHeightList.push([parseInt(i),response[i][val]])
+ }
}
+ creates.cloudTopHeight.updateSeries(0, options.cloudTopHeightList)
+ })
+ }
+
+ const prepareApiParams = (time, variableName) => {
+ return {
+ date: time,
+ var: variableName,
+ }
+ }
+
+ const verify = () => {
+ ElMessage({
+ showClose: true,
+ message: '请求接口无数据',
+ icon: '',
+ type: null,
+ grouping: true,
+ duration: 1500
+ })
+ }
+
+ return {
+ ...toRefs(options),
+ onRegionClick,
+ // onElementClick,
+ onTimeClick,
+ onPrevDayClick,
+ onNextDayClick,
+ onPrevImgClick,
+ onNextImgClick,
+ onRefreshClick,
+ onPlayClick,
+ onChange,
+ onImageLoad,
+ onDownloadClick,
+ onSaveClick,
+ onTabClick
}
+ }
+}
</script>
<style lang="less" scoped>
.main {
- .container {
- .raman-picture-container {
- width: calc(~"100% - 1rem");
- margin: 0 auto;
- .picture {
- .pblh-image {
- width: 50%;
- }
- }
+ .container {
+ .toolbar {
+ padding: 0.15rem 0;
+
+ .times {
+ padding-bottom: 0;
+ }
+ }
+
+ .raman-picture-container {
+ width: calc(~"100% - 1rem");
+ margin: 0 auto;
+
+ .picture {
+ position: relative;
+ margin-top: 30px;
+
+ .title {
+ width: 100%;
+ font-size: 0.22rem;
+ position: absolute;
+ left: 3.10rem;
+ top: 0.30rem;
+ z-index: 100;
+ }
+
+ .pblh-image {
+ width: 50%;
}
+ }
}
+ }
}
</style>
diff --git a/04.系统编码/Frontend/src/components/SystemManagement.vue b/04.系统编码/Frontend/src/components/SystemManagement.vue
index 51329a9..6bab266 100644
--- a/04.系统编码/Frontend/src/components/SystemManagement.vue
+++ b/04.系统编码/Frontend/src/components/SystemManagement.vue
@@ -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',
diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less
index 983bf6a..68e8e7e 100644
--- a/04.系统编码/Frontend/src/index.less
+++ b/04.系统编码/Frontend/src/index.less
@@ -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;
diff --git a/04.系统编码/Frontend/src/model/constant.ts b/04.系统编码/Frontend/src/model/constant.ts
index aea9397..c1cedc4 100644
--- a/04.系统编码/Frontend/src/model/constant.ts
+++ b/04.系统编码/Frontend/src/model/constant.ts
@@ -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/';
}
\ No newline at end of file
diff --git a/04.系统编码/Frontend/src/model/high-chart-create.ts b/04.系统编码/Frontend/src/model/high-chart-create.ts
index a27975c..9bac4b5 100644
--- a/04.系统编码/Frontend/src/model/high-chart-create.ts
+++ b/04.系统编码/Frontend/src/model/high-chart-create.ts
@@ -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);
}
-}
\ No newline at end of file
+}
+
diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts
index 86e5181..648e019 100644
--- a/04.系统编码/Frontend/src/uilts/box-drawer.ts
+++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts
@@ -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);