diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index fc7d0f5..f8fe03a 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -1036,7 +1036,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 {
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index b2e336d..c3d7645 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -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">-->
+<!--<!– <h2 class="title">云的识别</h2>–>-->
+<!-- <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(15px);
}
#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);
}
diff --git a/04.系统编码/Frontend/src/model/heat-map-drawer.ts b/04.系统编码/Frontend/src/model/heat-map-drawer.ts
index 5fc3016..a631e65 100644
--- a/04.系统编码/Frontend/src/model/heat-map-drawer.ts
+++ b/04.系统编码/Frontend/src/model/heat-map-drawer.ts
@@ -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);
}
}
}
diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts
index dbe3239..a760596 100644
--- a/04.系统编码/Frontend/src/uilts/box-drawer.ts
+++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts
@@ -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;