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

commit

master
xuhuihui 3 years ago
parent
4a2f9f7404
commit
348186764f
7 changed files with 359 additions and 195 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. 262
      04.系统编码/Frontend/src/components/DecisionSupport.vue
  2. 11
      04.系统编码/Frontend/src/components/Login.vue
  3. 26
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  4. 204
      04.系统编码/Frontend/src/components/RamanLidar.vue
  5. 22
      04.系统编码/Frontend/src/model/heat-map-drawer.ts
  6. 11
      04.系统编码/Frontend/src/model/high-chart-create.ts
  7. 18
      04.系统编码/Frontend/src/uilts/box-drawer.ts

262
04.系统编码/Frontend/src/components/DecisionSupport.vue
View File

@ -19,7 +19,7 @@
</div>
</div>
<div class="container panel decision-container">
<span class="save-btn" @click="onSaveClick"><img src="/images/save.png" /></span>
<span class="save-btn" @click="onSaveClick" v-if="currentIndicator != 'pollution-indicator'"><img src="/images/save.png" /></span>
<div class="download-pictures" id="pictures">
<a v-for="(url, index) in urls" :key="index" download></a>
</div>
@ -47,37 +47,66 @@
</el-col>
</el-row>
</div>
<div class="picture-view indicator-picture-view" v-if="currentIndicator === 'pollution-indicator'">
<h2 class="title">高楼污染指数</h2>
<div class="picture-block">
<div class="picture">
<el-image
:src="indicatorImg"
:preview-src-list="indicatorPreview"
:initial-index="1"
fit="contain"
>
<template #error>
<div class="image-slot">
<img src="/images/null-picture.png" />
</div>
<p class="image-tip">暂无图片</p>
</template>
<template #placeholder>
<div class="image-placeholder">正在加载...</div>
</template>
</el-image>
</div>
<div class="instruction">
<h2>高楼污染指数说明：</h2>
<p>使用激光雷达数据反演PM2.5和PM10</p>
<p>浓度廓线，基于PM2.5和PM10的平均</p>
<p>值构建高楼污染指数，</p>
<p> 高楼(60米)，</p>
<p> 超高楼(200米)，</p>
<p> 极高楼层(500米)</p>
</div>
<div class="toolbar day-toolbar" v-show="currentIndicator === 'pollution-indicator'">
<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="onChangeDayClick(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-container raman-picture-container" v-show="currentIndicator === 'pollution-indicator'">
<div class="picture">
<div id="pollutionIndicator"
style="margin-top: 66px"
v-loading="loadingPollutionIndicatorStatus"
custom-class="loading"
element-loading-text="加载中">
</div>
</div>
<!-- <div class="picture-block">-->
<!-- <div class="picture">-->
<!-- <el-image-->
<!-- :src="indicatorImg"-->
<!-- :preview-src-list="indicatorPreview"-->
<!-- :initial-index="1"-->
<!-- fit="contain"-->
<!-- >-->
<!-- <template #error>-->
<!-- <div class="image-slot">-->
<!-- <img src="/images/null-picture.png" />-->
<!-- </div>-->
<!-- <p class="image-tip">暂无图片</p>-->
<!-- </template>-->
<!-- <template #placeholder>-->
<!-- <div class="image-placeholder">正在加载...</div>-->
<!-- </template>-->
<!-- </el-image>-->
<!-- </div>-->
<!-- <div class="instruction">-->
<!-- <h2>高楼污染指数说明：</h2>-->
<!-- <p>使用激光雷达数据反演PM2.5和PM10</p>-->
<!-- <p>浓度廓线，基于PM2.5和PM10的平均</p>-->
<!-- <p>值构建高楼污染指数，</p>-->
<!-- <p> 高楼(60米)，</p>-->
<!-- <p> 超高楼(200米)，</p>-->
<!-- <p> 极高楼层(500米)</p>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</div>
@ -87,12 +116,20 @@
import { onMounted, reactive, toRefs } from 'vue';
import * as Tiff from 'browser-tiff.js';
import { DecisionSupportConfig } from '../uilts/Config';
import { post } from '../uilts/axios';
import {get, post} from '../uilts/axios';
import {HighChartCreate} from "../model/high-chart-create";
import moment from "moment";
import {ConstantRamanLidar} from "../model/constant";
import {CustomeArray} from "../model/custome-array";
export default {
name: 'DecisionSupport',
setup() {
let options = reactive({
times: [],
currentTime: null,
date: moment().format('YYYY-MM-DD 00:00:00'),
index: 0,
currentIndicator: 'plan-advice',
currentProduct: 'control-experiment',
items: [{
@ -128,18 +165,28 @@ import { post } from '../uilts/axios';
}],
indicatorImg: '/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png',
indicatorPreview: ['/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png'],
urls: []
urls: [],
loadingPollutionIndicatorStatus: false
})
let creates: {
pollutionIndicator: HighChartCreate
} = {
pollutionIndicator: null
}
onMounted(() => {
initTimeLineDay()
setImage(options.currentIndicator + '/' + options.currentProduct);
})
const onIndicatorClick = (indicator) => {
options.currentIndicator = indicator;
if(options.currentIndicator === 'plan-advice')
setImage(options.currentIndicator + '/' + options.currentProduct);
if(options.currentIndicator === 'plan-advice') {
setImage(options.currentIndicator + '/' + options.currentProduct);
}
reloadChartsRecognition('hbpi', drawPollutionIndicator)
pollutionIndicatorInit()
}
const onProductClick = (product) => {
@ -193,11 +240,133 @@ import { post } from '../uilts/axios';
}
}
const pollutionIndicatorInit = () => {
creates.pollutionIndicator = new HighChartCreate('pollutionIndicator');
creates.pollutionIndicator.setChart(false, 'line', 1500, 600);
creates.pollutionIndicator.setXAxisTypeDate();
creates.pollutionIndicator.setSpecialYAxis('高楼污染指数');
creates.pollutionIndicator.setLegend(true);
creates.pollutionIndicator.setTooltip('{point.y}');
creates.pollutionIndicator.setSeries('高楼', 0, null, null, '#B21523')
creates.pollutionIndicator.setSeries('超高楼', 0, null, null, '#000B6F')
creates.pollutionIndicator.setSeries('极高楼层', 0, null, null, '#853083')
creates.pollutionIndicator.init();
}
const drawPollutionIndicator = (result: CustomeArray<any>) => {
if (result[0].time == null) return;
const data = prepareChartData(result);
creates.pollutionIndicator.updateSeries(0, data[0]);
creates.pollutionIndicator.updateSeries(1, data[1]);
creates.pollutionIndicator.updateSeries(2, data[2]);
options.loadingPollutionIndicatorStatus = false
}
const prepareChartData = (result) => {
if (result[0].data == null) {
let temp = []
for (let i = 0; i < 72; i++) {
temp.push(NaN);
}
result[0].data = [temp];
}
let prepareData = []
let startTimeMoment = moment(result[0].time, 'M_D_H').add(8, 'h')
result[0].data.forEach(item => {
let data = []
for (let i = 0, len = item.length; i < len; i++) {
data.push([startTimeMoment.clone().add(1 * i, 'h').valueOf(), item[i]])
}
prepareData.push(data)
})
return prepareData;
}
const reloadChartsRecognition = (element: string, callback: any) => {
options.loadingPollutionIndicatorStatus = true
let result = new CustomeArray(callback);
let time = moment(options.date);
reloadPollutionIndicator(time.format('M_D_H'), element, result);
}
const reloadPollutionIndicator = (time: string, elementCode, result: CustomeArray<any>) => {
let params = prepareApiParams(time, elementCode)
get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
if (response.state != 0) {
setChartsRecognitionResult(time, response.message, null, result);
return;
}
setChartsRecognitionResult(time, response.message, response.data, result);
}).catch(error => {
setChartsRecognitionResult(time, error.message, null, result);
})
}
const prepareApiParams = (time, elementCode) => {
return {
var: elementCode,
locate: 'nj',
date: moment(time,'MM_DD_hh').format('M_D'),
}
}
const setChartsRecognitionResult = (time: string, message: string, data: any, result: CustomeArray<any>) => {
result.push({
time: time,
message: message,
data: data == null ? null : JSON.parse(data)
})
}
const initTimeLineDay = () => {
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 onChangeDayClick = (time, index) => {
options.currentTime = time.date
options.date = moment(time.date).format('YYYY-MM-DD');
reloadChartsRecognition('hbpi', drawPollutionIndicator)
options.index = index;
}
const onPrevDayTimeClick = () => {
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
initTimeLineDay()
reloadChartsRecognition('hbpi', drawPollutionIndicator)
}
const onNextDayTimeClick = () => {
options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD');
initTimeLineDay()
reloadChartsRecognition('hbpi', drawPollutionIndicator)
}
const onChange = () => {
initTimeLineDay();
reloadChartsRecognition('hbpi', drawPollutionIndicator)
}
return {
...toRefs(options),
onIndicatorClick,
onProductClick,
onSaveClick
onSaveClick,
onChangeDayClick,
onPrevDayTimeClick,
onNextDayTimeClick,
onChange
}
}
}
@ -284,6 +453,25 @@ import { post } from '../uilts/axios';
}
}
}
.raman-picture-container {
margin: 0 auto;
.picture {
width: 100%;
height: 100%;
}
}
.toolbar {
//padding: 0.15rem 0;
padding-bottom: 7px;
margin: -12px 0.25rem 0px;
.times {
padding-bottom: 0;
}
:deep(.date-picker), .control-btn {
margin-top: 12px;
}
}
}
}
</style>

11
04.系统编码/Frontend/src/components/Login.vue
View File

@ -93,7 +93,7 @@ export default {
<style lang="less" scoped>
.loginInput {
width: 6.51rem;
width: 6.1rem;
border-radius: 10px;
position: absolute;
left: 50%;
@ -129,16 +129,17 @@ export default {
line-height: 0.4rem;
color: #222222;
text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
margin-top: 1.20rem;
margin-top: 0.9rem;
margin-bottom: 0.52rem;
padding-left: 0.12rem;
z-index: 100;
}
:deep(.input) {
width: 4.96rem;
height: 0.69rem;
height: 0.59rem;
background: #FFFFFF;
border: 1px solid #BCBCBC;
margin-bottom: 0.7rem;
margin-bottom: 0.6rem;
.el-input__inner{
height: 100% !important;
@ -156,7 +157,7 @@ export default {
width: 0.18rem;
height: 0.18rem;
position: absolute;
top: -0.10rem;
top: -0.14rem;
left: 0.18rem;
}
}

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

@ -629,11 +629,11 @@ export default {
clearBoxDrawer(drawers.originalDrawer);
clearBoxDrawer(drawers.abnormalDrawer);
if (response.code != 200 || response.data.radar_data.length === 0) {
createEmptyCanvas('original-data-canvas', 800, 600);
createEmptyCanvas('original-data-canvas', 800, 650);
// createEmptyCanvas('abnormal-canvas', 1500, 500);
return;
}
drawers.originalDrawer = new BoxDrawer(800, 600, prepareTmpOriginalColors(options.SeasonValue), response.data, 'original-data-canvas', 'T/℃');
drawers.originalDrawer = new BoxDrawer(800, 650, prepareTmpOriginalColors(options.SeasonValue), response.data, 'original-data-canvas', 'T/℃');
// drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas', '℃');
// options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image;
// options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image;
@ -652,15 +652,15 @@ export default {
clearBoxDrawer(drawers.interpolateDrawer);
if (response.code != 200 || response.data.radar_data.length === 0) {
if (options.currentTab === 'MWR')
createEmptyCanvas('interpolate-canvas', 800, 600);
createEmptyCanvas('interpolate-canvas', 800, 650);
else if (options.currentTab === 'shixu_BPFY')
createEmptyCanvas('BP-temp', 1200, 600);
createEmptyCanvas('BP-temp', 1400, 700);
return;
}
if (options.currentTab === 'MWR')
drawers.interpolateDrawer = new BoxDrawer(800, 600, prepareTmpOriginalColors(options.SeasonValue), response.data, 'interpolate-canvas', 'T/℃');
drawers.interpolateDrawer = new BoxDrawer(800, 650, prepareTmpOriginalColors(options.SeasonValue), response.data, 'interpolate-canvas', 'T/℃');
else if (options.currentTab === 'shixu_BPFY')
drawers.interpolateDrawer = new BoxDrawer(1200, 600, prepareBPTempColors(), response.data, 'BP-temp', '(degree)');
drawers.interpolateDrawer = new BoxDrawer(1400, 700, prepareBPTempColors(), response.data, 'BP-temp', '(degree)');
// options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
})
}
@ -675,10 +675,10 @@ export default {
get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
clearBoxDrawer(drawers.BPRelativeHumidity);
if (response.code != 200 || response.data.radar_data.length === 0) {
createEmptyCanvas('BP-relative-humidity', 1200, 600);
createEmptyCanvas('BP-relative-humidity', 1400, 700);
return;
}
drawers.BPRelativeHumidity = new BoxDrawer(1200, 600, prepareBPRelativeHumidityColors(), response.data, 'BP-relative-humidity', '(%)');
drawers.BPRelativeHumidity = new BoxDrawer(1400, 700, prepareBPRelativeHumidityColors(), response.data, 'BP-relative-humidity', '(%)');
// options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
})
}
@ -693,10 +693,10 @@ export default {
get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
clearBoxDrawer(drawers.BPVaporDensity);
if (response.code != 200 || response.data.radar_data.length === 0) {
createEmptyCanvas('BP-vapor-density', 1200, 600);
createEmptyCanvas('BP-vapor-density', 1400, 700);
return;
}
drawers.BPVaporDensity = new BoxDrawer(1200, 600, prepareBPVaporDensityColors(), response.data, 'BP-vapor-density', '(g/kg)');
drawers.BPVaporDensity = new BoxDrawer(1400, 700, prepareBPVaporDensityColors(), response.data, 'BP-vapor-density', '(g/kg)');
// options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
})
}
@ -1020,7 +1020,7 @@ export default {
}
}
.raman-picture-container {
width: calc(~"100% - 1rem");
//width: calc(~"100% - 1rem");
margin: 0 auto;
#original-data-canvas /*#abnormal-canvas*/, #interpolate-canvas {
}
@ -1033,7 +1033,7 @@ export default {
width: 100%;
font-size: 0.22rem;
position: absolute;
left: 3.4rem;
left: 3.6rem;
top: 0.3rem;
z-index: 1000;
}
@ -1046,7 +1046,7 @@ export default {
//
//}
#BP-temp, #BP-relative-humidity, #BP-vapor-density {
transform: scale(1, 1.0) translate(-42px, 55px);
transform: scale(1, 1.0) translateX(-42px);
}
.shiXu {

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

@ -40,13 +40,13 @@
</el-row>
</div>
<div class="menu-item">
<h2 class="tip">要素选择</h2>
<div class="menu-item">
<h2 class="tip">要素选择</h2>
<el-row :gutter="12">
<el-col :span="24" v-for="(item, index) in elementData" :key = 'index'>
<el-col :span="24" v-for="(item, index) in elementData" :key='index'>
<span @click="onElementClick(item.value)"
:class="{'active': currentElement === item.value}">{{ item.label }}</span></el-col>
</el-row>
:class="{'active': currentElement === item.value}">{{ item.label }}</span></el-col>
</el-row>
</div>
</div>
@ -105,7 +105,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;margin-top: 66px"
style="margin-top: 66px"
v-loading="loadingOpticalThicknessStatus"
custom-class="loading"
element-loading-text="加载中">
@ -113,7 +113,7 @@
</div>
</div>
<div class="picture-container raman-picture-container" v-show = "currentElement=== 'extinctionOptics'">
<div class="picture-container raman-picture-container" v-show="currentElement=== 'extinctionOptics'">
<div class="picture special-picture">
<div v-loading="loadingExtinctionOpticsStatus"
style="width: 100%;height: 100%"
@ -155,20 +155,20 @@
</div>
</div>
<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 id="BoundaryLayerHeight"
style="width: 1000px;height: 450px;margin-top: 66px"
style="margin-top: 66px"
v-loading="loadingBoundaryLayerHeightStatus"
custom-class="loading"
element-loading-text="加载中"></div>
</div>
</div>
</div>
<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 id="LidarRatio"
style="width: 1000px;height: 450px;margin-top: 66px"
style="margin-top: 66px"
v-loading="loadingLidarRatioStatus"
custom-class="loading"
element-loading-text="加载中">
@ -191,7 +191,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;margin-top: 66px"
style="margin-top: 66px"
v-loading="loadingCloudsHeightStatus"
custom-class="loading"
element-loading-text="加载中"></div>
@ -201,7 +201,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;margin-top: 66px"
style="margin-top: 66px"
v-loading="loadingCloudTopHeightStatus"
custom-class="loading"
element-loading-text="加载中"></div>
@ -209,18 +209,17 @@
</div>
<!-- <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 === '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">
@ -285,7 +284,7 @@ export default {
name: 'RamanLidar',
setup() {
let timer = null;
const quailtyTimes = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13",
const quailtyTimes = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13",
"14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
let creates: {
@ -394,20 +393,19 @@ export default {
//边界层高度
const boundaryLayerHeightInit = () => {
creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight');
creates.boundaryLayerHeight.setChart(false,'line', 1000);
creates.boundaryLayerHeight.setChart(false, 'line', 1500, 600);
creates.boundaryLayerHeight.setXAxisTypeDate();
creates.boundaryLayerHeight.setSpecialYAxis('边界层高度(m)');
creates.boundaryLayerHeight.setLegend();
creates.boundaryLayerHeight.setTooltip('高度: {point.y}');
creates.boundaryLayerHeight.setSeries('边界层高度',0, null, null, '#3636FF')
creates.boundaryLayerHeight.setSeries('边界层高度', 0, null, null, '#3636FF')
creates.boundaryLayerHeight.init();
}
//云层高度
const cloudsHeightInit = () => {
creates.cloudsHeight = new HighChartCreate('cloudsHeight');
creates.cloudsHeight.setChart(false, 'scatter', 1000);
// creates.cloudsHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
creates.cloudsHeight.setChart(false, 'scatter', 1500, 600);
creates.cloudsHeight.setXAxisTypeDate();
creates.cloudsHeight.setSpecialYAxis('高度(m)');
creates.cloudsHeight.setLegend();
@ -419,7 +417,7 @@ export default {
//云顶高度
const cloudTopHeightInit = () => {
creates.cloudTopHeight = new HighChartCreate('cloudTopHeight');
creates.cloudTopHeight.setChart(false, 'scatter', 1000);
creates.cloudTopHeight.setChart(false, 'scatter', 1500, 600);
// creates.cloudTopHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
creates.cloudTopHeight.setXAxisTypeDate();
creates.cloudTopHeight.setSpecialYAxis('高度(m)');
@ -432,10 +430,9 @@ export default {
//激光雷达比
const LidarRatioInit = () => {
creates.LidarRatio = new HighChartCreate('LidarRatio');
creates.LidarRatio.setChart(false,'line', 1000);
creates.LidarRatio.setChart(false, 'line', 1500, 600);
creates.LidarRatio.setSpecialXAxis('激光雷达比(单位立体角)', 120, 0, 20);
// creates.LidarRatio.setSpecialYAxis('高度(m)');
creates.LidarRatio.setYAxis('高度(m)', 3000, 0);
creates.LidarRatio.setSpecialYAxis('高度(m)', 3000, 0);
creates.LidarRatio.setLegend();
creates.LidarRatio.setTooltip('高度: {point.y}');
creates.LidarRatio.setSeries('激光雷达比', 0, null, null, '#3636FF')
@ -445,7 +442,7 @@ export default {
//光学厚度
const opticalThicknessInit = () => {
creates.opticalThickness = new HighChartCreate('opticalThickness');
creates.opticalThickness.setChart(false,'line', 1000);
creates.opticalThickness.setChart(false, 'line', 1500, 600);
creates.opticalThickness.setXAxisTypeDate();
creates.opticalThickness.setSpecialYAxis('光学厚度');
creates.opticalThickness.setLegend(true);
@ -465,14 +462,14 @@ export default {
const setAndChangeCurrentTime = (name) => {
options.index = 23;
if ("MWR" === name){
if ("MWR" === name) {
options.date = moment().format('YYYY-MM-DD 00:00:00');
options.timeLineFormat = "";
}else{
} else {
options.date = moment().format('YYYY-MM-DD HH:00:00');
options.timeLineFormat = "";
}
options.currentTime = options.date;
}
@ -487,10 +484,10 @@ export default {
if (options.currentTab === 'boundary-layer-height') {
options.currentElement = 'singleWatervapor'
options.elementData = [
{
value: 'singleWatervapor',
label: '水汽'
}]
{
value: 'singleWatervapor',
label: '水汽'
}]
} else if (options.currentTab === 'optical-property') {
options.currentElement = 'aod-icot-wcot'
@ -513,7 +510,7 @@ export default {
options.elementData = [
{
value: 'pm2_5',
label: '气溶胶PM'
label: '气溶胶浓度'
},
{
value: 'pblh',
@ -597,9 +594,9 @@ export default {
initTimeLine()
reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts);
break;
// case 'layertype' :
// reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition);
// break;
// case 'layertype' :
// reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition);
// break;
case 'extinction' :
initTimeLine(true);
reloadExtinctionBefore();
@ -618,14 +615,14 @@ export default {
const reloadWatervaporBefore = () => {
options.loadingWatervaporBeforeStatus = true;
let params = {
date: moment(options.date).format('YYYY-MM-DD 00'),
var: 'Vapor Mixing Ratio',
locate: options.currentRegion
}
date: moment(options.date).format('YYYY-MM-DD 00'),
var: 'Vapor Mixing Ratio',
locate: options.currentRegion
}
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
options.loadingWatervaporBeforeStatus = false;
if (response.error != 0){
createEmptyCanvas('watervapor_chart-before', 800, 650);
if (response.error != 0) {
createEmptyCanvas('watervapor_chart-before', 810, 650);
console.log("未找到质控前数据文件");
return;
}
@ -635,7 +632,7 @@ export default {
}
let matrix = convertValueToBox(response.data);
creates.watervaporBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-before", 'g/kg');
creates.watervaporBeforeDrawer = new HeatMapDrawer(810, 700, matrix, "watervapor_chart-before", 'g/kg');
creates.watervaporBeforeDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
creates.watervaporBeforeDrawer.setColorChart(prepareWatervaporColors());
creates.watervaporBeforeDrawer.draw();
@ -645,14 +642,14 @@ export default {
const reloadExtinctionBefore = () => {
options.loadingExtinctionBeforeStatus = true;
let params = {
date: moment(options.date).format('YYYY-MM-DD HH'),
var: 'MEXT',
locate: options.currentRegion
}
date: moment(options.date).format('YYYY-MM-DD HH'),
var: 'MEXT',
locate: options.currentRegion
}
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
options.loadingExtinctionBeforeStatus = false;
if (response.error != 0){
createEmptyCanvas('extinction_chart-before', 800, 650);
if (response.error != 0) {
createEmptyCanvas('extinction_chart-before', 810, 650);
console.log("未找到质控前数据文件");
return;
}
@ -662,7 +659,7 @@ export default {
}
let matrix = convertValueToBox(response.data);
creates.extinctionBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", '/km');
creates.extinctionBeforeDrawer = new HeatMapDrawer(810, 700, matrix, "extinction_chart-before", '/km');
creates.extinctionBeforeDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.extinctionBeforeDrawer.setColorChart(prepareExtinctionnColors());
creates.extinctionBeforeDrawer.draw();
@ -671,7 +668,7 @@ export default {
const convertValueToBox = (data) => {
let timeMoment = moment(options.date).set('h', 1).add(-1, 'd');
if (options.currentElement === 'extinction'){
if (options.currentElement === 'extinction') {
timeMoment.add(12, 'h');
}
@ -680,7 +677,7 @@ export default {
let boxes = new Array<Array<Box>>();
let index = 1;
data.forEach(r => {
if (index % 11 == 0){
if (index % 11 == 0) {
timeMoment.add(1, 'h');
timeFormat = timeMoment.format("MM月DD日HH时");
}
@ -788,7 +785,7 @@ export default {
}
let matrix = converCloudRecognition(801, result, 'backscatter');
creates.backscatterDrawer = new HeatMapDrawer(1200, 650, matrix, "backscatter_chart",'km/sr');
creates.backscatterDrawer = new HeatMapDrawer(1400, 700, 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();
@ -798,7 +795,6 @@ export default {
let colorChart = new ColorChart(['#8F0000', '#E00000', '#FF1F00', '#FF6600', '#FF9900', '#FFE000', '#EBFF14', '#99FF66', '#66FF99', '#1FFFE0',
'#00E0FF', '#0099FF', '#005CFF', '#0029FF', '#0000E0', '#000099'],
[-1, -1.25, -1.5, -1.75, -2, -2.25, -2.5, -2.75, -3, -3.25, -3.5, -3.75, -4, -4.25, -4.5, -4.75, -5]
// [-4, -4.25, -4.5, -4.75, -5, -5.25, -5.5, -5.75, -6, -6.25, -6.5, -6.75, -7, -7.25, -7.5, -7.75, -8]
);
colorChart.setDefaultColors('#000099', '#8F0000');
return colorChart;
@ -811,7 +807,7 @@ export default {
creates.pm2Point5Drawer.close();
}
let matrix = converCloudRecognition(201, result, 'pm2_5');
creates.pm2Point5Drawer = new HeatMapDrawer(800, 650, matrix, "pm2_5_chart",'μg/m³', 'PM2.5');
creates.pm2Point5Drawer = new HeatMapDrawer(810, 700, 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();
@ -826,7 +822,7 @@ export default {
}
let matrix = converCloudRecognition(201, result, 'pm10');
creates.pm10Drawer = new HeatMapDrawer(800, 650, matrix, "pm10_chart", 'μg/m³', 'PM10');
creates.pm10Drawer = new HeatMapDrawer(810, 700, 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();
@ -842,7 +838,6 @@ export default {
const drawLidarRatioCharts = (result: CustomeArray<any>) => {
if (result.length <= 0) return;
const data = LidarRatioPrepareChartData(result);
console.log(data);
creates.LidarRatio.updateSeries(0, data);
options.loadingLidarRatioStatus = false
}
@ -935,7 +930,7 @@ export default {
}
let matrix = converCloudRecognition(801, result, 'cloudSol');
creates.cloudSolDrawer = new HeatMapDrawer(1200, 650, matrix, "cloud_sol_chart");
creates.cloudSolDrawer = new HeatMapDrawer(1400, 700, 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();
@ -950,7 +945,7 @@ export default {
}
let matrix = converCloudRecognition(801, result, 'extinctionOptics');
creates.opticsExtinctionDrawer = new HeatMapDrawer(1200, 650, matrix, "extinction_optics_chart",'/km');
creates.opticsExtinctionDrawer = new HeatMapDrawer(1400, 700, matrix, "extinction_optics_chart", '/km');
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();
@ -966,7 +961,7 @@ export default {
}
let matrix = converCloudRecognition(101, result, 'singleWatervapor');
creates.singleWatervaporDrawer = new HeatMapDrawer(1200, 650, matrix, "watervapor_single_chart",' g/kg');
creates.singleWatervaporDrawer = new HeatMapDrawer(1400, 700, 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();
@ -981,7 +976,7 @@ export default {
}
let matrix = converCloudRecognition(101, result, 'watervapor');
creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-after",'g/kg');
creates.watervaporDrawer = new HeatMapDrawer(800, 700, matrix, "watervapor_chart-after", 'g/kg');
creates.watervaporDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
creates.watervaporDrawer.setColorChart(prepareWatervaporColors());
creates.watervaporDrawer.draw();
@ -1003,7 +998,7 @@ export default {
}
let matrix = converCloudRecognition(801, result, 'extinction');
creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-after", '/km');
creates.extinctionDrawer = new HeatMapDrawer(800, 700, matrix, "extinction_chart-after", '/km');
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();
@ -1044,10 +1039,8 @@ export default {
const reloadChartLidarratio = (element: string, callback: any) => {
preprocessingCharts(element)
let result = new CustomeArray(callback);
let time = moment(options.date);
reloadSingleChartsRecognition(time.format('M_D_H'), element, result);
reloadSingleChartsRecognition(time.format('M_D_H'), element, result);
}
const drawCloudRecognition = (result: CustomeArray<any>) => {
@ -1066,7 +1059,7 @@ export default {
const prepareCloudRecognitionColors = () => {
return new ColorChart(['#0000FF', '#00FF00', '#FF0000', '#FFFFFF'],
[{ label: '冰云', value: 3 }, { label: '水云', value: 2 }, { label: '气溶胶', value: 1 }, { label: '晴空', value: 0 }],
[{label: '冰云', value: 3}, {label: '水云', value: 2}, {label: '气溶胶', value: 1}, {label: '晴空', value: 0}],
false,
false,
"equal"
@ -1094,8 +1087,8 @@ export default {
const interval = Math.round(11 / r.data[0].length);
for (let h = 0, len = capacity; h < len; h++) {
let tempIndex = parseInt(index + "");
if (r.data[h] == null){
for(let i = 0; i < 11; i++){
if (r.data[h] == null) {
for (let i = 0; i < 11; i++) {
tempIndex++;
if (matrix[tempIndex] == null) {
matrix[tempIndex] = new Array<Box>(capacity);
@ -1114,7 +1107,7 @@ export default {
matrix[tempIndex] = new Array<Box>(capacity);
}
if (h < 4){
if (h < 4) {
matrix[tempIndex][h] = new Box(tempIndex, h, 0, 0, NaN, h * 15, time, "米");
continue;
}
@ -1372,10 +1365,9 @@ export default {
const onPrevDayClick = () => {
let element = getCurrentElement();
if (moment(options.date).add(-1, 'day').format('YYYY-MM-DD') == moment().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');
} else options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
options.currentTime = options.date;
options.index--;
if (options.index < 0) {
@ -1390,10 +1382,9 @@ export default {
}
const onNextDayClick = () => {
if (moment(options.date).add(1, 'day').format('YYYY-MM-DD') == moment().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')
} else options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD')
options.timeLineFormat = "day";
initTimeLine()
elementChange(options.currentElement)
@ -1440,9 +1431,7 @@ export default {
// const timeExcute = () => {
// clearTimer();
//
// let element = getCurrentElement();
//
// timer = setInterval(() => {
// options.index++;
// if (options.index > element.childElementCount - 1)
@ -1471,12 +1460,11 @@ export default {
// }
const onChange = (e) => {
if (options.currentElement === 'extinction' || options.currentElement=== 'lidarratio' || options.currentElement === 'watervapor') {
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') ) {
} else {
if (moment(e).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
options.date = moment().format('YYYY-MM-DD HH')
}
options.timeLineFormat = "day";
@ -1519,7 +1507,7 @@ export default {
const prepareApiParams = (time, variableName) => {
if (variableName == 'lidarratio') {
return {
date: moment(time,'MM_DD_hh').format('M_D'),
date: moment(time, 'MM_DD_hh').format('M_D'),
var: variableName,
locate: options.currentRegion
}
@ -1570,7 +1558,6 @@ export default {
options.date = moment(time.date).format('YYYY-MM-DD');
elementChange(options.currentElement)
options.index = index;
}
const onPrevDayTimeClick = () => {
@ -1617,7 +1604,6 @@ export default {
:deep(.el-date-editor), .control-btn, :deep(.el-select), .unit {
padding-top: 0.08rem;
}
:deep(.el-input__prefix) {
top: 4px;
}
@ -1632,7 +1618,7 @@ export default {
}
.raman-picture-container {
width: calc(~"100% - 1rem");
//width: calc(~"100% - 1rem");
margin: 0 auto;
.special-picture {
@ -1648,43 +1634,34 @@ export default {
//margin-top: 30px;
#watervapor_single_chart {
transform: translateX(9%) translateY(20px);
//transform: scale(1.0, 0.8) translateX(539px);
transform: translateX(6%) translateY(50px);
}
#extinction_optics_chart {
//transform: scale(0.56, 0.85) translateX(-32%);
transform: translateX(9%) translateY(20px);
transform: translateX(6%) translateY(50px);
}
#pm2_5_chart {
transform: translateX(-50px) translateY(20px);
transform: translateX(-15px) translateY(50px);
}
#pm10_chart {
transform: translateX(-50px) translateY(20px);
transform: translateX(-15px) translateY(50px);
}
#backscatter_chart {
transform: translateX(9%) translateY(20px);
//transform: scale(0.6, 0.85) translateX(-76px);
transform: translateX(6%) translateY(50px);
}
#cloud_sol_chart {
transform: translateX(9%) translateY(20px);
//transform: scale(0.6, 0.85) translate(-12%, -12px);
transform: translateX(6%) translateY(50px);
}
//#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);
#watervapor_chart-after {
transform: translateY(50px);
}
.title {
@ -1704,7 +1681,6 @@ export default {
width: 50%;
}
}
}
}
}

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

@ -12,9 +12,9 @@ export class HeatMapDrawer{
private readonly width: number = null;
private readonly height: number = null;
private readonly paddingLeft: number = 150;
private readonly paddingRight: number = 100;
private readonly paddingTop: number = 80;
private readonly paddingLeft: number = 100;
private readonly paddingRight: number = 115;
private readonly paddingTop: number = 50;
private readonly paddingBottom: number = 100;
private colorChart: ColorChart = null;
private values: any = null;
@ -259,7 +259,7 @@ export class HeatMapDrawer{
// 保存原有的canvas状态，供restore方法重置
this.canvasContext.save();
let name = "高度(m)";
this.canvasContext.translate(90, this.height / 2 + this.paddingTop - this.canvasContext.measureText(name).width);
this.canvasContext.translate(45, this.height / 2 + this.paddingTop - this.canvasContext.measureText(name).width);
this.canvasContext.rotate(Math.PI * 1.5);
this.canvasContext.font="normal 22px 微软雅黑";
this.canvasContext.fillStyle="#000000";
@ -295,17 +295,17 @@ export class HeatMapDrawer{
//温度单位
private drawTemperatureText(unit): void {
this.canvasContext.font = "normal 25px 微软雅黑";
this.canvasContext.font = "normal 35px 微软雅黑";
this.canvasContext.fillStyle = "#000000";
let unitX = this.width - this.paddingRight;
this.canvasContext.fillText(unit, unitX, 70);
this.canvasContext.fillText(unit, unitX, 45);
}
private drawResolutionName(name): void {
this.canvasContext.font = "normal 35px 微软雅黑";
this.canvasContext.fillStyle = "#000000";
let nameX = 380
this.canvasContext.fillText(name, nameX, 60)
let nameY = this.paddingTop - 23
this.canvasContext.fillText(name, 380, nameY)
}
private drawVerticalScale(): void{
@ -315,7 +315,7 @@ export class HeatMapDrawer{
let startX = this.paddingLeft + this.horizontalScaleLine;
let startY = this.paddingTop + this.verticalScaleLine;
this.canvasContext.font = "normal 16px 微软雅黑";
this.canvasContext.font = "normal 25px 微软雅黑";
this.canvasContext.fillStyle = "#000000";
for(let index = 0, len = scaleCount, lastLen = scaleCount - 1; index < len; index++){
if ((index == 0 && !this.xAxis.showStartValue) || (index == lastLen && !this.xAxis.showEndValue)) continue;
@ -339,9 +339,9 @@ export class HeatMapDrawer{
private setTimeDetail(_x: number, startY: number, text: string): void{
// const text = this.values[15][0].time.slice(0, 6);
this.canvasContext.font = "normal 14px 微软雅黑";
this.canvasContext.font = "normal 15px 微软雅黑";
this.canvasContext.fillText(text, _x - this.canvasContext.measureText(text).width / 2, startY + this.verticalScaleLine + this.borderHeight + 38);
this.canvasContext.font = "normal 16px 微软雅黑";
this.canvasContext.font = "normal 17px 微软雅黑";
}
private drawHorizontalScale(): void{

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

@ -19,11 +19,12 @@ export class HighChartCreate {
this.id = id;
}
public setChart(inverted: boolean = false, type: string = 'line', width: number = null): void {
public setChart(inverted: boolean = false, type: string = 'line', width: number = null, height: number = null): void {
this.chart = {
type: type,
inverted: inverted,
width: width
width: width,
height: height
};
}
@ -54,7 +55,7 @@ export class HighChartCreate {
type: 'datetime',
labels: {
style: {
fontSize:'18px'
fontSize:'20px'
},
formatter: function () {
return Highcharts.dateFormat('%d日%H时', this.value);
@ -86,7 +87,7 @@ export class HighChartCreate {
},
labels: {
style: {
fontSize:'18px'
fontSize:'20px'
},
},
max: max,
@ -129,7 +130,7 @@ export class HighChartCreate {
labels: {
y: 8,
style: {
fontSize:'18px'
fontSize:'20px'
},
},
max: max,

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

@ -26,8 +26,8 @@ export class BoxDrawer{
private readonly width: number = null;
private readonly height: number = null;
private readonly paddingLeft: number = 150;
private readonly paddingRight: number = 130;
private readonly paddingLeft: number = 110;
private readonly paddingRight: number = 110;
private readonly paddingTop: number = 60;
private readonly paddingBottom: number = 50;
private readonly colorChart: ColorChart = null;
@ -243,7 +243,7 @@ export class BoxDrawer{
this.canvasContext.save();
let name = "高度(km)";
this.canvasContext.font="normal 22px 微软雅黑";
this.canvasContext.translate(80, this.height / 2 + this.paddingTop);
this.canvasContext.translate(70, this.height / 2 + this.paddingTop);
this.canvasContext.rotate(Math.PI * 1.5);
this.canvasContext.fillStyle="#000000";
this.canvasContext.fillText(name, 0, 0);
@ -278,9 +278,9 @@ export class BoxDrawer{
private drawTemperatureText(unit): void {
this.canvasContext.font = "normal 35px 微软雅黑";
this.canvasContext.fillStyle = "#000000";
let unitX = this.width - this.paddingRight;
if (unit === '(degree)') unitX = this.width - this.paddingRight - 30;
this.canvasContext.fillText(unit, unitX,50);
let unitX = this.width - this.paddingRight - 15;
if (unit === '(degree)') unitX = this.width - this.paddingRight - 40;
this.canvasContext.fillText(unit, unitX,60);
}
private drawVerticalScale(): void{
@ -336,7 +336,7 @@ export class BoxDrawer{
this.canvasContext.stroke();
if (flag) {
this.canvasContext.font = "normal 30px 微软雅黑";
this.canvasContext.font = "normal 25px 微软雅黑";
this.canvasContext.fillStyle = "#000000";
const text = this.values.radar_info[index].col_factor;
this.canvasContext.fillText(text, startX - this.canvasContext.measureText(text).width - this.horizontalScaleLine, _y + 10);
@ -417,7 +417,7 @@ export class ColorChart{
throw new Error("色标数据不正确，数据个数应为颜色个数 + 1");
}
public getColor(value: number, id: string = null ): string{
public getColor(value: number ): string{
if (isNaN(value)) return null;
const length = this.valueLength;
@ -443,8 +443,6 @@ export class ColorChart{
}
}
return null;
}
}

Write Preview
Loading…
Cancel
Save