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

commit

master
xuhuihui 3 years ago
parent
bc8a89c79f
commit
5e383d6222
4 changed files with 269 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  2. 306
      04.系统编码/Frontend/src/components/RamanLidar.vue
  3. 6
      04.系统编码/Frontend/src/model/heat-map-drawer.ts
  4. 60
      04.系统编码/Frontend/src/uilts/box-drawer.ts

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

@ -1033,7 +1033,7 @@ export default {
// //
//} //}
#BP-temp, #BP-relative-humidity, #BP-vapor-density { #BP-temp, #BP-relative-humidity, #BP-vapor-density {
transform: scale(1, 1.2) translate(-42px,100px); transform: scale(1, 1.2) translate(-42px, 80px);
} }
.shiXu { .shiXu {

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

@ -51,8 +51,11 @@
</div> </div>
<div class="container panel"> <div class="container panel">
<div class="toolbar day-toolbar"> <div class="toolbar day-toolbar" v-if="currentElement === 'singleWatervapor' || currentElement === 'aod-icot-wcot'
|| currentElement === 'extinctionOptics' || currentElement === 'backscatter'
|| currentElement === 'pm2_5' || currentElement === 'pblh'
|| currentElement === 'cloudSol' || currentElement === 'cloudbaseheight'
|| currentElement === 'cloudtopheight'">
<div class="times"> <div class="times">
<div class="time-item" v-for="(time, index) in times" :key="index" <div class="time-item" v-for="(time, index) in times" :key="index"
:class="{'active': currentTime === time.date, 'first-hour': time.hour === '00'}"> :class="{'active': currentTime === time.date, 'first-hour': time.hour === '00'}">
@ -60,7 +63,6 @@
<span class="time" @click="onTimeClick(time, index)">{{ time.hour }}</span> <span class="time" @click="onTimeClick(time, index)">{{ time.hour }}</span>
</div> </div>
</div> </div>
<el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false"
class="date-picker" @change="onChange"> class="date-picker" @change="onChange">
</el-date-picker> </el-date-picker>
@ -70,8 +72,28 @@
</div> </div>
</div> </div>
<div class="picture-view">
<div class="toolbar day-toolbar" v-if="currentElement === 'extinction' || currentElement=== 'lidarratio' || currentElement === 'watervapor'">
<div class="times">
<div class="time-item" v-for="(time, index) in times" :key="index"
:class="{'active': currentTime === time.date, 'first-hour': time.day === '01'}">
<span class="hour" style="padding-left: 10px">{{ time.month }}</span>
<span class="time" @click="onDayClick(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="onPrevDayTimeClick"><img src="/images/prev.png"/></span>
<span @click="onNextDayTimeClick"><img src="/images/next.png"/></span>
</div>
</div>
<div class="picture-view">
<div class="picture-container raman-picture-container" v-show="currentElement === 'singleWatervapor'"> <div class="picture-container raman-picture-container" v-show="currentElement === 'singleWatervapor'">
<div class="picture special-picture"> <div class="picture special-picture">
<div v-loading="loadingWaterVaporSingleStatus" <div v-loading="loadingWaterVaporSingleStatus"
@ -86,7 +108,7 @@
<div class="picture-container raman-picture-container" v-show=" currentElement=== 'aod-icot-wcot'"> <div class="picture-container raman-picture-container" v-show=" currentElement=== 'aod-icot-wcot'">
<div class="picture"> <div class="picture">
<div id="opticalThickness" <div id="opticalThickness"
style="width: 1000px;height: 450px" style="width: 1000px;height: 450px;margin-top: 66px"
v-loading="loadingOpticalThicknessStatus" v-loading="loadingOpticalThicknessStatus"
custom-class="loading" custom-class="loading"
element-loading-text="加载中"> element-loading-text="加载中">
@ -139,7 +161,7 @@
<div class="picture-container raman-picture-container" v-show="currentElement=== 'pblh'"> <div class="picture-container raman-picture-container" v-show="currentElement=== 'pblh'">
<div class="picture"> <div class="picture">
<div id="BoundaryLayerHeight" <div id="BoundaryLayerHeight"
style="width: 1000px;height: 450px" style="width: 1000px;height: 450px;margin-top: 66px"
v-loading="loadingBoundaryLayerHeightStatus" v-loading="loadingBoundaryLayerHeightStatus"
custom-class="loading" custom-class="loading"
element-loading-text="加载中"></div> element-loading-text="加载中"></div>
@ -149,7 +171,7 @@
<div class="picture-container raman-picture-container" v-show="currentElement=== 'lidarratio'"> <div class="picture-container raman-picture-container" v-show="currentElement=== 'lidarratio'">
<div class="picture"> <div class="picture">
<div id="LidarRatio" <div id="LidarRatio"
style="width: 1000px;height: 450px" style="width: 1000px;height: 450px;margin-top: 66px"
v-loading="loadingLidarRatioStatus" v-loading="loadingLidarRatioStatus"
custom-class="loading" custom-class="loading"
element-loading-text="加载中"> element-loading-text="加载中">
@ -172,7 +194,7 @@
<div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudbaseheight'"> <div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudbaseheight'">
<div class="picture special-picture"> <div class="picture special-picture">
<div id="cloudsHeight" <div id="cloudsHeight"
style="width: 1000px;height: 450px" style="width: 1000px;height: 450px;margin-top: 66px"
v-loading="loadingCloudsHeightStatus" v-loading="loadingCloudsHeightStatus"
custom-class="loading" custom-class="loading"
element-loading-text="加载中"></div> element-loading-text="加载中"></div>
@ -182,7 +204,7 @@
<div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudtopheight'"> <div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudtopheight'">
<div class="picture special-picture"> <div class="picture special-picture">
<div id="cloudTopHeight" <div id="cloudTopHeight"
style="width: 1000px;height: 450px" style="width: 1000px;height: 450px;margin-top: 66px"
v-loading="loadingCloudTopHeightStatus" v-loading="loadingCloudTopHeightStatus"
custom-class="loading" custom-class="loading"
element-loading-text="加载中"></div> element-loading-text="加载中"></div>
@ -191,39 +213,54 @@
<div class="picture-container raman-picture-container" v-show="currentElement === 'layertype'"> <!-- <div class="picture-container raman-picture-container" v-show="currentElement === 'layertype'">-->
<!-- <div class="picture special-picture">-->
<!--&lt;!&ndash; <h2 class="title">云的识别</h2>&ndash;&gt;-->
<!-- <div v-loading="loadingCloudRecognitionStatus"-->
<!-- style="width: 100%;"-->
<!-- custom-class="loading"-->
<!-- element-loading-text="加载中">-->
<!-- <canvas id='cloud_recognition_chart'></canvas>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="picture-container raman-picture-container" v-show="currentElement === 'extinction'">
<div class="picture special-picture"> <div class="picture special-picture">
<!-- <h2 class="title">云的识别</h2>--> <div v-loading="loadingExtinctionStatus"
<div v-loading="loadingCloudRecognitionStatus"
style="width: 100%;" style="width: 100%;"
custom-class="loading" custom-class="loading"
element-loading-text="加载中"> element-loading-text="加载中">
<canvas id='cloud_recognition_chart'></canvas> <canvas id='extinction_chart-before'></canvas>
</div> </div>
</div> </div>
</div>
<div class="picture-container raman-picture-container" v-show="currentElement === 'extinction'">
<div class="picture special-picture"> <div class="picture special-picture">
<!-- <h2 class="title">消光系数</h2>-->
<div v-loading="loadingExtinctionStatus" <div v-loading="loadingExtinctionStatus"
style="width: 100%;" style="width: 100%;"
custom-class="loading" custom-class="loading"
element-loading-text="加载中"> element-loading-text="加载中">
<canvas id='extinction_chart'></canvas> <canvas id='extinction_chart-after'></canvas>
</div> </div>
</div> </div>
</div> </div>
<div class="picture-container raman-picture-container" v-show="currentElement === 'watervapor'"> <div class="picture-container raman-picture-container" v-show="currentElement === 'watervapor'">
<div class="picture special-picture"> <div class="picture special-picture">
<!-- <h2 class="title" style="left: 2.4rem;">水汽</h2>-->
<div v-loading="loadingWaterVaporStatus" <div v-loading="loadingWaterVaporStatus"
style="width: 100%" style="width: 100%"
element-loading-text="加载中"> element-loading-text="加载中">
<canvas id='watervapor_chart'></canvas> <canvas id='watervapor_chart-before'></canvas>
</div> </div>
</div> </div>
<div class="picture special-picture">
<div v-loading="loadingWaterVaporStatus"
style="width: 100%"
element-loading-text="加载中">
<canvas id='watervapor_chart-after'></canvas>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -332,11 +369,13 @@ export default {
value: 'watervapor', value: 'watervapor',
label: '水汽' label: '水汽'
}], }],
currentElement: 'layertype' currentElement: 'layertype',
timeLineFormat: 'hour'
}) })
onMounted(() => { onMounted(() => {
initTimeLine(); // initTimeLine();
initTimeLineDay();
// setTitle(moment(options.date, 'YYYY-MM-DD')); // setTitle(moment(options.date, 'YYYY-MM-DD'));
setTimeout(() => { setTimeout(() => {
initEcharts(options.currentTab) initEcharts(options.currentTab)
@ -352,7 +391,7 @@ export default {
creates.boundaryLayerHeight.setYAxis('边界层高度(m)'); creates.boundaryLayerHeight.setYAxis('边界层高度(m)');
creates.boundaryLayerHeight.setLegend(); creates.boundaryLayerHeight.setLegend();
creates.boundaryLayerHeight.setTooltip('高度: {point.y}'); creates.boundaryLayerHeight.setTooltip('高度: {point.y}');
creates.boundaryLayerHeight.setSeries('边界层高度') creates.boundaryLayerHeight.setSeries('边界层高度',0, null, null, '#3636FF')
creates.boundaryLayerHeight.init(); creates.boundaryLayerHeight.init();
} }
@ -389,7 +428,7 @@ export default {
creates.LidarRatio.setYAxis('高度(m)'); creates.LidarRatio.setYAxis('高度(m)');
creates.LidarRatio.setLegend(); creates.LidarRatio.setLegend();
creates.LidarRatio.setTooltip('高度: {point.y}'); creates.LidarRatio.setTooltip('高度: {point.y}');
creates.LidarRatio.setSeries('激光雷达比') creates.LidarRatio.setSeries('激光雷达比', 0, null, null, '#3636FF')
creates.LidarRatio.init(); creates.LidarRatio.init();
} }
@ -410,11 +449,21 @@ export default {
} }
const onTabClick = (name) => { const onTabClick = (name) => {
changeTimeLineFormat(name);
options.currentTab = name; options.currentTab = name;
initEcharts(name) initEcharts(name)
reloadChangeData() reloadChangeData()
} }
const changeTimeLineFormat = (name) => {
if (name === 'MWR'){
initTimeLineDay();
return;
}
initTimeLine();
}
const reloadChangeData = () => { const reloadChangeData = () => {
cancelRequest(); cancelRequest();
onMenuChange() onMenuChange()
@ -478,12 +527,8 @@ export default {
label: '云顶高度' label: '云顶高度'
}] }]
} else if (options.currentTab === 'MWR') { } else if (options.currentTab === 'MWR') {
options.currentElement = 'layertype' options.currentElement = 'extinction'
options.elementData = [ options.elementData = [
{
value: 'layertype',
label: '云的识别'
},
{ {
value: 'extinction', value: 'extinction',
label: '消光系数' label: '消光系数'
@ -498,46 +543,60 @@ export default {
const elementChange = (code: string) => { const elementChange = (code: string) => {
switch (code) { switch (code) {
case 'singleWatervapor' : case 'singleWatervapor' :
// initTimeLine()
reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor); reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor);
break; break;
case 'aod-icot-wcot' : case 'aod-icot-wcot' :
// initTimeLine()
reloadChartsRecognition('aod', drawAerosolCharts); reloadChartsRecognition('aod', drawAerosolCharts);
reloadChartsRecognition('icot', drawIceCloudsCharts); reloadChartsRecognition('icot', drawIceCloudsCharts);
reloadChartsRecognition('wcot', drawWaterCloud); reloadChartsRecognition('wcot', drawWaterCloud);
break; break;
case 'extinctionOptics' : case 'extinctionOptics' :
// initTimeLine()
reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction); reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction);
break; break;
case 'backscatter' : case 'backscatter' :
// initTimeLine()
reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter); reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter);
break; break;
case 'pm2_5' : case 'pm2_5' :
// initTimeLine()
reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5); reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10); reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10);
break; break;
case 'pblh' : case 'pblh' :
initTimeLine()
reloadChartsRecognition('pblh', drawBoundaryLayerCharts); reloadChartsRecognition('pblh', drawBoundaryLayerCharts);
break; break;
case 'lidarratio' : case 'lidarratio' :
initTimeLineDay()
reloadChartLidarratio('lidarratio', drawLidarRatioCharts); reloadChartLidarratio('lidarratio', drawLidarRatioCharts);
break; break;
case 'cloudSol' : case 'cloudSol' :
initTimeLine()
reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol); reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol);
break; break;
case 'cloudbaseheight' : case 'cloudbaseheight' :
// initTimeLine()
reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts); reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts);
break; break;
case 'cloudtopheight' : case 'cloudtopheight' :
// initTimeLine()
reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts); reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts);
break; break;
case 'layertype' : // case 'layertype' :
reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition); // reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition);
break; // break;
case 'extinction' : case 'extinction' :
reloadCloudRecognition('extinction', 801, 'extinction', drawExtinction); // initTimeLineDay()
reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionBefore);
reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionAfter);
break; break;
case 'watervapor' : case 'watervapor' :
reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervapor); // initTimeLineDay()
reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervaporBefore);
reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervaporAfter);
break; break;
default: default:
throw new Error("无效的type类型"); throw new Error("无效的type类型");
@ -630,14 +689,14 @@ export default {
} }
const drawBackscatter = (result: CustomeArray<any>) => { const drawBackscatter = (result: CustomeArray<any>) => {
if (result.length != 12) return; if (result.length != 24) return;
options.loadingBackscatterStatus = false; options.loadingBackscatterStatus = false;
if (creates.backscatterDrawer != null) { if (creates.backscatterDrawer != null) {
creates.backscatterDrawer.close(); creates.backscatterDrawer.close();
} }
let matrix = converCloudRecognition(801, result, 'backscatter'); let matrix = converCloudRecognition(801, result, 'backscatter');
creates.backscatterDrawer = new HeatMapDrawer(1200, 600, matrix, "backscatter_chart",'/km/sr'); creates.backscatterDrawer = new HeatMapDrawer(1200, 650, matrix, "backscatter_chart",'/km/sr');
creates.backscatterDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.backscatterDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.backscatterDrawer.setColorChart(prepareBackscatterColors()); creates.backscatterDrawer.setColorChart(prepareBackscatterColors());
creates.backscatterDrawer.draw(); creates.backscatterDrawer.draw();
@ -654,20 +713,20 @@ export default {
} }
const drawPm2Point5 = (result: CustomeArray<any>) => { const drawPm2Point5 = (result: CustomeArray<any>) => {
if (result.length != 12) return; if (result.length != 24) return;
options.loadingPmStatus = false; options.loadingPmStatus = false;
if (creates.pm2Point5Drawer != null) { if (creates.pm2Point5Drawer != null) {
creates.pm2Point5Drawer.close(); creates.pm2Point5Drawer.close();
} }
let matrix = converCloudRecognition(201, result, 'pm2_5'); let matrix = converCloudRecognition(201, result, 'pm2_5');
creates.pm2Point5Drawer = new HeatMapDrawer(800, 600, matrix, "pm2_5_chart",'μg/m³', 'PM2.5'); creates.pm2Point5Drawer = new HeatMapDrawer(800, 650, matrix, "pm2_5_chart",'μg/m³', 'PM2.5');
creates.pm2Point5Drawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true)); creates.pm2Point5Drawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true));
creates.pm2Point5Drawer.setColorChart(preparePmColors()); creates.pm2Point5Drawer.setColorChart(preparePmColors());
creates.pm2Point5Drawer.draw(); creates.pm2Point5Drawer.draw();
} }
const drawPm10 = (result: CustomeArray<any>) => { const drawPm10 = (result: CustomeArray<any>) => {
if (result.length != 12) return; if (result.length != 24) return;
options.loadingPmStatus = false; options.loadingPmStatus = false;
if (creates.pm10Drawer != null) { if (creates.pm10Drawer != null) {
@ -675,7 +734,7 @@ export default {
} }
let matrix = converCloudRecognition(201, result, 'pm10'); let matrix = converCloudRecognition(201, result, 'pm10');
creates.pm10Drawer = new HeatMapDrawer(800, 600, matrix, "pm10_chart", 'μg/m³', 'PM10'); creates.pm10Drawer = new HeatMapDrawer(800, 650, matrix, "pm10_chart", 'μg/m³', 'PM10');
creates.pm10Drawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true)); creates.pm10Drawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true));
creates.pm10Drawer.setColorChart(preparePmColors()); creates.pm10Drawer.setColorChart(preparePmColors());
creates.pm10Drawer.draw(); creates.pm10Drawer.draw();
@ -736,7 +795,6 @@ export default {
options.chartTimeData = []; options.chartTimeData = [];
result.sort((x, y) => moment(x.time, 'M_D_H').isBefore(moment(y.time, 'M_D_H')) ? -1 : 1); result.sort((x, y) => moment(x.time, 'M_D_H').isBefore(moment(y.time, 'M_D_H')) ? -1 : 1);
result.forEach(item => { result.forEach(item => {
// options.chartTimeData.push(item.time)
if (item.data == null) { if (item.data == null) {
let temp = []; let temp = [];
for (let i = 0; i < 11; i++) { for (let i = 0; i < 11; i++) {
@ -776,7 +834,7 @@ export default {
} }
const drawCloudSol = (result: CustomeArray<any>) => { const drawCloudSol = (result: CustomeArray<any>) => {
if (result.length != 12) return; if (result.length != 24) return;
options.loadingCloudSolStatus = false; options.loadingCloudSolStatus = false;
if (creates.cloudSolDrawer != null) { if (creates.cloudSolDrawer != null) {
@ -784,14 +842,14 @@ export default {
} }
let matrix = converCloudRecognition(801, result, 'cloudSol'); let matrix = converCloudRecognition(801, result, 'cloudSol');
creates.cloudSolDrawer = new HeatMapDrawer(1200, 600, matrix, "cloud_sol_chart"); creates.cloudSolDrawer = new HeatMapDrawer(1200, 650, matrix, "cloud_sol_chart");
creates.cloudSolDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.cloudSolDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.cloudSolDrawer.setColorChart(prepareCloudRecognitionColors()); creates.cloudSolDrawer.setColorChart(prepareCloudRecognitionColors());
creates.cloudSolDrawer.draw(); creates.cloudSolDrawer.draw();
} }
const drawOpticsExtinction = (result: CustomeArray<any>) => { const drawOpticsExtinction = (result: CustomeArray<any>) => {
if (result.length != 12) return; if (result.length != 24) return;
options.loadingExtinctionOpticsStatus = false; options.loadingExtinctionOpticsStatus = false;
if (creates.opticsExtinctionDrawer != null) { if (creates.opticsExtinctionDrawer != null) {
@ -799,7 +857,7 @@ export default {
} }
let matrix = converCloudRecognition(801, result, 'extinctionOptics'); let matrix = converCloudRecognition(801, result, 'extinctionOptics');
creates.opticsExtinctionDrawer = new HeatMapDrawer(1200, 600, matrix, "extinction_optics_chart",'/km/sr'); creates.opticsExtinctionDrawer = new HeatMapDrawer(1200, 650, matrix, "extinction_optics_chart",'/km/sr');
creates.opticsExtinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.opticsExtinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.opticsExtinctionDrawer.setColorChart(prepareExtinctionnColors()); creates.opticsExtinctionDrawer.setColorChart(prepareExtinctionnColors());
creates.opticsExtinctionDrawer.draw(); creates.opticsExtinctionDrawer.draw();
@ -807,7 +865,7 @@ export default {
} }
const drawSingleWatervapor = (result: CustomeArray<any>) => { const drawSingleWatervapor = (result: CustomeArray<any>) => {
if (result.length != 12) return; if (result.length != 24) return;
options.loadingWaterVaporSingleStatus = false; options.loadingWaterVaporSingleStatus = false;
if (creates.singleWatervaporDrawer != null) { if (creates.singleWatervaporDrawer != null) {
@ -815,14 +873,29 @@ export default {
} }
let matrix = converCloudRecognition(101, result, 'singleWatervapor'); let matrix = converCloudRecognition(101, result, 'singleWatervapor');
creates.singleWatervaporDrawer = new HeatMapDrawer(1200, 600, matrix, "watervapor_single_chart",' g/kg'); creates.singleWatervaporDrawer = new HeatMapDrawer(1200, 650, matrix, "watervapor_single_chart",' g/kg');
creates.singleWatervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true)); creates.singleWatervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true));
creates.singleWatervaporDrawer.setColorChart(prepareWatervaporColors()); creates.singleWatervaporDrawer.setColorChart(prepareWatervaporColors());
creates.singleWatervaporDrawer.draw(); creates.singleWatervaporDrawer.draw();
} }
const drawWatervapor = (result: CustomeArray<any>) => { const drawWatervaporBefore = (result: CustomeArray<any>) => {
if (result.length != 12) return; if (result.length != 24) return;
options.loadingWaterVaporStatus = false;
if (creates.watervaporDrawer != null) {
creates.watervaporDrawer.close();
}
let matrix = converCloudRecognition(101, result, 'watervapor');
creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-before",'g/kg', '质控前');
creates.watervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true));
creates.watervaporDrawer.setColorChart(prepareWatervaporColors());
creates.watervaporDrawer.draw();
}
const drawWatervaporAfter = (result: CustomeArray<any>) => {
if (result.length != 24) return;
options.loadingWaterVaporStatus = false; options.loadingWaterVaporStatus = false;
if (creates.watervaporDrawer != null) { if (creates.watervaporDrawer != null) {
@ -830,12 +903,15 @@ export default {
} }
let matrix = converCloudRecognition(101, result, 'watervapor'); let matrix = converCloudRecognition(101, result, 'watervapor');
creates.watervaporDrawer = new HeatMapDrawer(1200, 600, matrix, "watervapor_chart",'g/kg'); creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-after",'g/kg', '质控后');
creates.watervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true)); creates.watervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true));
creates.watervaporDrawer.setColorChart(prepareWatervaporColors()); creates.watervaporDrawer.setColorChart(prepareWatervaporColors());
creates.watervaporDrawer.draw(); creates.watervaporDrawer.draw();
} }
const prepareWatervaporColors = () => { const prepareWatervaporColors = () => {
return new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66', return new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66',
'#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'], '#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'],
@ -843,8 +919,8 @@ export default {
); );
} }
const drawExtinction = (result: CustomeArray<any>) => { const drawExtinctionBefore = (result: CustomeArray<any>) => {
if (result.length != 12) return; if (result.length != 24) return;
options.loadingExtinctionStatus = false; options.loadingExtinctionStatus = false;
if (creates.extinctionDrawer != null) { if (creates.extinctionDrawer != null) {
@ -852,7 +928,22 @@ export default {
} }
let matrix = converCloudRecognition(801, result, 'extinction'); let matrix = converCloudRecognition(801, result, 'extinction');
creates.extinctionDrawer = new HeatMapDrawer(1200, 600, matrix, "extinction_chart", 'km/sr'); creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", 'km/sr','质控前');
creates.extinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.extinctionDrawer.setColorChart(prepareExtinctionnColors());
creates.extinctionDrawer.draw();
}
const drawExtinctionAfter = (result: CustomeArray<any>) => {
if (result.length != 24) return;
options.loadingExtinctionStatus = false;
if (creates.extinctionDrawer != null) {
creates.extinctionDrawer.close();
}
let matrix = converCloudRecognition(801, result, 'extinction');
creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-after", 'km/sr','质控后');
creates.extinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.extinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.extinctionDrawer.setColorChart(prepareExtinctionnColors()); creates.extinctionDrawer.setColorChart(prepareExtinctionnColors());
creates.extinctionDrawer.draw(); creates.extinctionDrawer.draw();
@ -872,9 +963,9 @@ export default {
let result = new CustomeArray(callback); let result = new CustomeArray(callback);
let time = moment(options.date); let time = moment(options.date);
options.timeArray = [] options.timeArray = []
for (let index = 0; index < 12; index++) { for (let index = 0; index < 24; index++) {
reloadSingleCloudRecognition(capacity, time.clone().add(-index, 'h').format('M_D_H'), element, result); reloadSingleCloudRecognition(capacity, time.clone().add(-index, 'h').format('M_D_H'), element, result);
options.timeArray.push(time.clone().add(-index, 'h').format('HH时')) options.timeArray.push(time.clone().add(-index, 'h').format('HH'))
} }
options.timeArray.reverse() options.timeArray.reverse()
} }
@ -1154,6 +1245,8 @@ export default {
//初始化时间轴 //初始化时间轴
const initTimeLine = () => { const initTimeLine = () => {
if (options.timeLineFormat == "hour") return;
options.timeLineFormat = "hour";
options.times = []; options.times = [];
options.currentTime = moment(options.date).format('YYYY-MM-DD HH'); options.currentTime = moment(options.date).format('YYYY-MM-DD HH');
let now = moment(options.date).add(1, 'h') let now = moment(options.date).add(1, 'h')
@ -1166,12 +1259,27 @@ export default {
} }
options.times.reverse(); options.times.reverse();
options.index = options.times.length - 1; options.index = options.times.length - 1;
// options.chartTimeData = ['0']
// options.times.forEach(i => {
// options.chartTimeData.push(moment(i.date).format('MM-DD HH'))
// })
} }
const initTimeLineDay = () => {
if (options.timeLineFormat == "day") return;
options.timeLineFormat = "day";
options.times = [];
options.currentTime = moment(options.date).format('YYYY-MM-DD');
let now = moment(options.date).add(1, 'd');
let day = new Date(now.year(), now.month() + 1, 0);
for (let i = 0; i < 24; i++) {
options.times.push({
day: now.add(-1, 'd').format('DD'),
month: now.format('MM'),
date: now.format('YYYY-MM-DD'),
})
}
options.times.reverse();
options.index = options.times.length - 1;
}
//时间选择 //时间选择
const onTimeClick = (time, index) => { const onTimeClick = (time, index) => {
options.currentTime = time.date; options.currentTime = time.date;
@ -1191,25 +1299,33 @@ export default {
//上一天 //上一天
const onPrevDayClick = () => { const onPrevDayClick = () => {
let element = getCurrentElement();
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
let element = getCurrentElement();
if (moment(options.date).add(-1, 'day').format('YYYY-MM-DD') == moment().format('YYYY-MM-DD') ) {
options.date = moment().format('YYYY-MM-DD HH')
}
else options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
options.currentTime = options.date; options.currentTime = options.date;
options.index--; options.index--;
if (options.index < 0) { if (options.index < 0) {
options.index = element.childElementCount - 1; options.index = element.childElementCount - 1;
options.date = options.times[options.times.length - 1].date options.date = options.times[options.times.length - 1].date
} }
options.timeLineFormat = "day";
initTimeLine() initTimeLine()
// cancelActive(); // cancelActive();
// setCurrentPlayElement(element) // setCurrentPlayElement(element)
reloadChangeData() elementChange(options.currentElement)
} }
const onNextDayClick = () => { const onNextDayClick = () => {
options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD') if (moment(options.date).add(1, 'day').format('YYYY-MM-DD') == moment().format('YYYY-MM-DD') ) {
options.date = moment().format('YYYY-MM-DD HH')
}
else options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD')
options.timeLineFormat = "day";
initTimeLine() initTimeLine()
reloadChangeData() elementChange(options.currentElement)
} }
//上一张图片 //上一张图片
@ -1283,8 +1399,18 @@ export default {
// activeImage(); // activeImage();
// } // }
const onChange = () => { const onChange = (e) => {
initTimeLine(); if (options.currentElement === 'extinction' || options.currentElement=== 'lidarratio' || options.currentElement === 'watervapor') {
options.timeLineFormat = "hour";
initTimeLineDay()
}
else {
if (moment(e).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD') ) {
options.date = moment().format('YYYY-MM-DD HH')
}
options.timeLineFormat = "day";
initTimeLine();
}
elementChange(options.currentElement) elementChange(options.currentElement)
// setTitle(moment(options.date)); // setTitle(moment(options.date));
// activeImage(); // activeImage();
@ -1368,6 +1494,28 @@ export default {
elementChange(element) elementChange(element)
} }
const onDayClick = (time, index) => {
options.timeLineFormat = "hour"
options.currentTime = time.date;
options.date = moment(time.date).format('YYYY-MM-DD');
options.index = index;
elementChange(options.currentElement)
}
const onPrevDayTimeClick = () => {
options.timeLineFormat = "hour"
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
initTimeLineDay()
elementChange(options.currentElement)
}
const onNextDayTimeClick = () => {
options.timeLineFormat = "hour"
options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD');
initTimeLineDay()
elementChange(options.currentElement)
}
return { return {
...toRefs(options), ...toRefs(options),
onRegionClick, onRegionClick,
@ -1384,7 +1532,10 @@ export default {
// onDownloadClick, // onDownloadClick,
// onSaveClick, // onSaveClick,
onTabClick, onTabClick,
onElementClick onElementClick,
onDayClick,
onPrevDayTimeClick,
onNextDayTimeClick
} }
} }
} }
@ -1425,36 +1576,41 @@ export default {
margin-top: 30px; margin-top: 30px;
#watervapor_single_chart { #watervapor_single_chart {
transform: scale(1.0, 1.0) translateX(9%); transform: translateX(9%) translateY(15px);
//transform: scale(1.0, 0.8) translateX(539px); //transform: scale(1.0, 0.8) translateX(539px);
} }
#extinction_optics_chart { #extinction_optics_chart {
//transform: scale(0.56, 0.85) translateX(-32%); //transform: scale(0.56, 0.85) translateX(-32%);
transform: scale(1.0, 1) translateX(9%); transform: translateX(9%) translateY(50px);
} }
#pm2_5_chart { #pm2_5_chart {
transform: scale(1.0, 1) translateX(-50px); transform: translateX(-50px) translateY(50px);
} }
#pm10_chart { #pm10_chart {
transform: scale(1.0, 1) translateX(-50px); transform: translateX(-50px) translateY(50px);
} }
#backscatter_chart { #backscatter_chart {
transform: scale(1.0, 1) translateX(9%); transform: translateX(9%) translateY(50px);
//transform: scale(0.6, 0.85) translateX(-76px); //transform: scale(0.6, 0.85) translateX(-76px);
} }
#cloud_sol_chart { #cloud_sol_chart {
transform: scale(1.0, 1) translateX(9%); transform: translateX(9%) translateY(50px);
//transform: scale(0.6, 0.85) translate(-12%, -12px); //transform: scale(0.6, 0.85) translate(-12%, -12px);
} }
#cloud_recognition_chart, #extinction_chart, #watervapor_chart { //#cloud_recognition_chart,
transform: scale(1.0, 1) translateX(9%); #extinction_chart-before,
#extinction_chart-after,
#watervapor_chart-before,
#watervapor_chart-after
{
transform: translateX(-50px) translateY(50px);
//transform: scale(0.6, 0.8) translateX(-260px); //transform: scale(0.6, 0.8) translateX(-260px);
//transform: scale(0.6, 0.8) translateX(-131px); //transform: scale(0.6, 0.8) translateX(-131px);
} }

6
04.系统编码/Frontend/src/model/heat-map-drawer.ts
View File

@ -20,7 +20,7 @@ export class HeatMapDrawer{
private values: any = null; private values: any = null;
// 垂直刻度 // 垂直刻度
private readonly verticalScaleLine: number = 18; private readonly verticalScaleLine: number = 15;
// 水平刻度 // 水平刻度
private readonly horizontalScaleLine: number = 15; private readonly horizontalScaleLine: number = 15;
public base64Image: string = null; public base64Image: string = null;
@ -319,9 +319,9 @@ export class HeatMapDrawer{
this.canvasContext.stroke(); this.canvasContext.stroke();
if (true){ if (true){
this.canvasContext.font = "normal 18px 微软雅黑"; this.canvasContext.font = "normal 16px 微软雅黑";
this.canvasContext.fillStyle = "#000000"; this.canvasContext.fillStyle = "#000000";
this.canvasContext.fillText(this.xAxis.scales[index], _x - this.canvasContext.measureText(this.xAxis.scales[index]).width / 2, startY + this.verticalScaleLine + this.borderHeight + 36); this.canvasContext.fillText(this.xAxis.scales[index], _x - this.canvasContext.measureText(this.xAxis.scales[index]).width / 2, startY + this.verticalScaleLine + this.borderHeight + 20);
} }
} }
} }

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

@ -240,31 +240,39 @@ export class BoxDrawer{
} }
//高度单位 //高度单位
private drawHeightText(): void { private drawHeightText(): void {
let name =['高','度','(','k','m',')']; // 文本内容 this.canvasContext.save();
let x = 70,y = 150; // 文字开始的坐标 let name = "高度(km)";
let letterSpacing = 20; // 设置字间距 this.canvasContext.translate(90, this.height / 2 + this.paddingTop - this.canvasContext.measureText(name).width);
for(let i = 0; i < name.length; i++) { this.canvasContext.rotate(Math.PI * 1.5);
const str = name.slice(i, i + 1).toString(); this.canvasContext.font="normal 35px 微软雅黑";
if (str.match(/[A-Za-z0-9-()-]/) && (y < 576)) { // 非汉字 旋转 this.canvasContext.fillStyle="#000000";
this.canvasContext.save(); this.canvasContext.fillText(name, -120, 0);
this.canvasContext.translate(x, y); this.canvasContext.restore();
this.canvasContext.rotate(Math.PI / 180 * 90); // let name =['高','度','(','k','m',')']; // 文本内容
this.canvasContext.textBaseline = 'bottom'; // let x = 70,y = 150; // 文字开始的坐标
this.canvasContext.font = "normal 35px 微软雅黑"; // let letterSpacing = 20; // 设置字间距
this.canvasContext.fillStyle = "#000000"; // for(let i = 0; i < name.length; i++) {
this.canvasContext.fillText(str, 0, 0); // const str = name.slice(i, i + 1).toString();
this.canvasContext.restore(); // if (str.match(/[A-Za-z0-9-()-]/) && (y < 576)) { // 非汉字 旋转
y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度 // this.canvasContext.save();
} else if (str.match(/[\u4E00-\u9FA5]/) && (y < 576)) { // this.canvasContext.translate(x, y);
this.canvasContext.save(); // this.canvasContext.rotate(Math.PI / 180 * 90);
this.canvasContext.textBaseline = 'top'; // this.canvasContext.textBaseline = 'bottom';
this.canvasContext.font = "normal 35px 微软雅黑"; // this.canvasContext.font = "normal 35px 微软雅黑";
this.canvasContext.fillStyle = "#000000"; // this.canvasContext.fillStyle = "#000000";
this.canvasContext.fillText(str, x, y); // this.canvasContext.fillText(str, 0, 0);
this.canvasContext.restore(); // this.canvasContext.restore();
y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度 // y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度
} // } else if (str.match(/[\u4E00-\u9FA5]/) && (y < 576)) {
} // this.canvasContext.save();
// this.canvasContext.textBaseline = 'top';
// this.canvasContext.font = "normal 35px 微软雅黑";
// this.canvasContext.fillStyle = "#000000";
// this.canvasContext.fillText(str, x, y);
// this.canvasContext.restore();
// y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度
// }
// }
} }
//温度单位 //温度单位
private drawTemperatureText(unit): void { private drawTemperatureText(unit): void {
@ -612,7 +620,7 @@ export class Calc{
let box = this.boxes[row][col]; let box = this.boxes[row][col];
if (box == null) continue; if (box == null) continue;
console.log(box)
this.boxWidth = box.width; this.boxWidth = box.width;
this.boxHeight = box.height; this.boxHeight = box.height;
return; return;

Write Preview
Loading…
Cancel
Save