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
Split 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 {
transform: scale(1, 1.2) translate(-42px,100px);
transform: scale(1, 1.2) translate(-42px, 80px);
}
.shiXu {

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

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

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

@ -20,7 +20,7 @@ export class HeatMapDrawer{
private values: any = null;
// 垂直刻度
private readonly verticalScaleLine: number = 18;
private readonly verticalScaleLine: number = 15;
// 水平刻度
private readonly horizontalScaleLine: number = 15;
public base64Image: string = null;
@ -319,9 +319,9 @@ export class HeatMapDrawer{
this.canvasContext.stroke();
if (true){
this.canvasContext.font = "normal 18px 微软雅黑";
this.canvasContext.font = "normal 16px 微软雅黑";
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 {
let name =['高','度','(','k','m',')']; // 文本内容
let x = 70,y = 150; // 文字开始的坐标
let letterSpacing = 20; // 设置字间距
for(let i = 0; i < name.length; i++) {
const str = name.slice(i, i + 1).toString();
if (str.match(/[A-Za-z0-9-()-]/) && (y < 576)) { // 非汉字 旋转
this.canvasContext.save();
this.canvasContext.translate(x, y);
this.canvasContext.rotate(Math.PI / 180 * 90);
this.canvasContext.textBaseline = 'bottom';
this.canvasContext.font = "normal 35px 微软雅黑";
this.canvasContext.fillStyle = "#000000";
this.canvasContext.fillText(str, 0, 0);
this.canvasContext.restore();
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; // 计算文字宽度
}
}
this.canvasContext.save();
let name = "高度(km)";
this.canvasContext.translate(90, this.height / 2 + this.paddingTop - this.canvasContext.measureText(name).width);
this.canvasContext.rotate(Math.PI * 1.5);
this.canvasContext.font="normal 35px 微软雅黑";
this.canvasContext.fillStyle="#000000";
this.canvasContext.fillText(name, -120, 0);
this.canvasContext.restore();
// let name =['高','度','(','k','m',')']; // 文本内容
// let x = 70,y = 150; // 文字开始的坐标
// let letterSpacing = 20; // 设置字间距
// for(let i = 0; i < name.length; i++) {
// const str = name.slice(i, i + 1).toString();
// if (str.match(/[A-Za-z0-9-()-]/) && (y < 576)) { // 非汉字 旋转
// this.canvasContext.save();
// this.canvasContext.translate(x, y);
// this.canvasContext.rotate(Math.PI / 180 * 90);
// this.canvasContext.textBaseline = 'bottom';
// this.canvasContext.font = "normal 35px 微软雅黑";
// this.canvasContext.fillStyle = "#000000";
// this.canvasContext.fillText(str, 0, 0);
// this.canvasContext.restore();
// 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 {
@ -612,7 +620,7 @@ export class Calc{
let box = this.boxes[row][col];
if (box == null) continue;
console.log(box)
this.boxWidth = box.width;
this.boxHeight = box.height;
return;

Write Preview
Loading…
Cancel
Save