From 0db6657cb7eeca686a5b21cc4f1d1f482c02b664 Mon Sep 17 00:00:00 2001
From: xuhuihui <3548508071@qq.com>
Date: Wed, 26 Jan 2022 18:06:37 +0800
Subject: [PATCH] commit
---
04.系统编码/Frontend/package-lock.json | 70 +++
04.系统编码/Frontend/package.json | 2 +
04.系统编码/Frontend/src/App.vue | 2 +-
.../src/components/DecisionSupport.vue | 2 +
.../src/components/MicrowaveRadiation.vue | 536 +++++++++++-------
04.系统编码/Frontend/src/index.less | 31 +-
.../Frontend/src/model/microwave-radiation.ts | 38 ++
.../Frontend/src/uilts/box-drawer.ts | 73 ++-
8 files changed, 501 insertions(+), 253 deletions(-)
create mode 100644 04.系统编码/Frontend/src/model/microwave-radiation.ts
diff --git a/04.系统编码/Frontend/package-lock.json b/04.系统编码/Frontend/package-lock.json
index 82d0dad..10c2ab2 100644
--- a/04.系统编码/Frontend/package-lock.json
+++ b/04.系统编码/Frontend/package-lock.json
@@ -11,7 +11,9 @@
"axios": "^0.21.4",
"browser-tiff.js": "^1.0.1",
"crypto-js": "^4.1.1",
+ "echarts": "^5.2.2",
"element-plus": "^1.2.0-beta.4",
+ "highcharts": "^9.3.2",
"js-md5": "^0.7.3",
"jsencrypt": "3.0.0-rc.1",
"moment": "^2.29.1",
@@ -1242,6 +1244,20 @@
"integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
"dev": true
},
+ "node_modules/echarts": {
+ "version": "5.2.2",
+ "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.2.2.tgz",
+ "integrity": "sha512-yxuBfeIH5c+0FsoRP60w4De6omXhA06c7eUYBsC1ykB6Ys2yK5fSteIYWvkJ4xJVLQgCvAdO8C4mN6MLeJpBaw==",
+ "dependencies": {
+ "tslib": "2.3.0",
+ "zrender": "5.2.1"
+ }
+ },
+ "node_modules/echarts/node_modules/tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+ },
"node_modules/ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -1635,6 +1651,11 @@
"integrity": "sha1-gdAbtd6OpKIUrV1urRtSNGCwtFo=",
"dev": true
},
+ "node_modules/highcharts": {
+ "version": "9.3.2",
+ "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.3.2.tgz",
+ "integrity": "sha512-I/48gNMvs3hZxZnPRUqLbnlrGZJJ7YPPVr1+fYeZ35p4pSZAOwTmAGbptrjBr7JlF52HmJH9zMbt/I4TPLu9Pg=="
+ },
"node_modules/http-assert": {
"version": "1.5.0",
"resolved": "https://registry.nlark.com/http-assert/download/http-assert-1.5.0.tgz",
@@ -3748,6 +3769,19 @@
"engines": {
"node": ">= 4.0.0"
}
+ },
+ "node_modules/zrender": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.2.1.tgz",
+ "integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
+ "dependencies": {
+ "tslib": "2.3.0"
+ }
+ },
+ "node_modules/zrender/node_modules/tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
},
"dependencies": {
@@ -4714,6 +4748,22 @@
"integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
"dev": true
},
+ "echarts": {
+ "version": "5.2.2",
+ "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.2.2.tgz",
+ "integrity": "sha512-yxuBfeIH5c+0FsoRP60w4De6omXhA06c7eUYBsC1ykB6Ys2yK5fSteIYWvkJ4xJVLQgCvAdO8C4mN6MLeJpBaw==",
+ "requires": {
+ "tslib": "2.3.0",
+ "zrender": "5.2.1"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+ }
+ }
+ },
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -5004,6 +5054,11 @@
"integrity": "sha1-gdAbtd6OpKIUrV1urRtSNGCwtFo=",
"dev": true
},
+ "highcharts": {
+ "version": "9.3.2",
+ "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.3.2.tgz",
+ "integrity": "sha512-I/48gNMvs3hZxZnPRUqLbnlrGZJJ7YPPVr1+fYeZ35p4pSZAOwTmAGbptrjBr7JlF52HmJH9zMbt/I4TPLu9Pg=="
+ },
"http-assert": {
"version": "1.5.0",
"resolved": "https://registry.nlark.com/http-assert/download/http-assert-1.5.0.tgz",
@@ -6583,6 +6638,21 @@
"resolved": "https://registry.npm.taobao.org/ylru/download/ylru-1.2.1.tgz",
"integrity": "sha1-9Xa2M0FUeYnB3nuiiHYJI7J/6E8=",
"dev": true
+ },
+ "zrender": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.2.1.tgz",
+ "integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
+ "requires": {
+ "tslib": "2.3.0"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+ }
+ }
}
}
}
diff --git a/04.系统编码/Frontend/package.json b/04.系统编码/Frontend/package.json
index f8cd90e..8415147 100644
--- a/04.系统编码/Frontend/package.json
+++ b/04.系统编码/Frontend/package.json
@@ -9,7 +9,9 @@
"axios": "^0.21.4",
"browser-tiff.js": "^1.0.1",
"crypto-js": "^4.1.1",
+ "echarts": "^5.2.2",
"element-plus": "^1.2.0-beta.4",
+ "highcharts": "^9.3.2",
"js-md5": "^0.7.3",
"jsencrypt": "3.0.0-rc.1",
"moment": "^2.29.1",
diff --git a/04.系统编码/Frontend/src/App.vue b/04.系统编码/Frontend/src/App.vue
index 45d877c..1636727 100644
--- a/04.系统编码/Frontend/src/App.vue
+++ b/04.系统编码/Frontend/src/App.vue
@@ -8,11 +8,11 @@
import { useRouter } from 'vue-router';
import Header from './components/Shared/Header.vue';
-
export default {
name: 'App',
components: {Header},
setup() {
+
const router = useRouter();
const showHeader = ref(false);
diff --git a/04.系统编码/Frontend/src/components/DecisionSupport.vue b/04.系统编码/Frontend/src/components/DecisionSupport.vue
index a23c2b1..4a9a3c9 100644
--- a/04.系统编码/Frontend/src/components/DecisionSupport.vue
+++ b/04.系统编码/Frontend/src/components/DecisionSupport.vue
@@ -255,6 +255,8 @@ import { post } from '../uilts/axios';
width: 6.5rem;
height: auto;
display: block;
+ position: relative;
+
.el-image {
width: 100%;
height: auto;
diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index 7e30b81..67493e9 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -45,9 +45,8 @@
<div class="container panel">
<div class="toolbar">
-
<!--6分钟-->
- <div class="times" v-if="currentElement === 'six-minute'">
+ <div class="times sixMinute" v-if="currentElement === 'six-minute'">
<div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}">
<span class="hour">{{time.hour}}</span>
<span class="time" @click="onTimeClick(time, index)">{{time.minute}}</span>
@@ -89,11 +88,11 @@
<!-- <div class="refresh-btn" @click="onRefreshClick">-->
<!-- <img src="/images/refresh.png" />-->
<!-- </div>-->
- <div class="btns-group" v-if="currentTab==='kuoxian' || currentTab==='T-logP'">
- <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>
- <a @click="onDownloadClick">下载动画</a>
- <a id="weboDownload" download :href="downloadSrc" class="hide">下载隐藏层</a>
- </div>
+<!-- <div class="btns-group" v-if="currentTab==='kuoxian' || currentTab==='T-logP'">-->
+<!-- <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>-->
+<!-- <a @click="onDownloadClick">下载动画</a>-->
+<!-- <a id="weboDownload" download :href="downloadSrc" class="hide">下载隐藏层</a>-->
+<!-- </div>-->
</div>
<div class="picture-view">
<!-- <span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span>-->
@@ -103,78 +102,44 @@
<!-- <div class="download-pictures hide" id="pictures">-->
<!-- <a v-for="(url, index) in urls" :key="index" download></a>-->
<!-- </div>-->
+
+ <!--质控对比-->
<div class="picture-container contrast-picture-container" v-if="currentTab === 'MWR'">
<div class="picture">
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度原始数据</h2>
- <canvas id="original-data-canvas"></canvas>
-<!-- <el-image-->
-<!-- :src="contrast.noQCImgUrl"-->
-<!-- :preview-src-list="contrast.noQCImgPreview"-->
-<!-- :initial-index="0"-->
-<!-- fit="contain"-->
-<!-- @load="onImageLoad"-->
-<!-- >-->
-<!-- <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>-->
+ <canvas id='original-data-canvas'></canvas>
</div>
<div class="picture">
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度异常值标记</h2>
- <canvas id="abnormal-canvas"></canvas>
-<!-- <el-image-->
-<!-- :src="contrast.checkImgUrl"-->
-<!-- :preview-src-list="contrast.checkImgPreview"-->
-<!-- :initial-index="0"-->
-<!-- fit="contain"-->
-<!-- @load="onImageLoad"-->
-<!-- @mousemove="onImageMove"-->
-<!-- >-->
-<!-- <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>-->
+ <canvas id='abnormal-canvas'></canvas>
</div>
<div class="picture">
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度野点插补结果</h2>
- <canvas id="interpolate-canvas"></canvas>
+ <canvas id='interpolate-canvas'></canvas>
</div>
</div>
- <div class="picture-container" v-if="currentTab !== 'MWR'">
- <!-- <h2 class="title">{{title}}</h2> -->
+ <!--BP反演产品-->
+ <div class="picture-container contrast-picture-container" v-if="currentTab === 'shixu_BPFY'">
<div class="picture">
- <el-image
- :src="imgUrl"
- :preview-src-list="srcList"
- :initial-index="0"
- fit="contain"
- @load="onImageLoad"
- >
- <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>
+ <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演温度</h2>
+ <canvas id="BP-temp"></canvas>
</div>
+ <div class="picture">
+ <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演相对湿度</h2>
+ <canvas id="BP-relative-humidity"></canvas>
+ </div>
+ <div class="picture">
+ <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演水汽密度</h2>
+ <canvas id="BP-vapor-density"></canvas>
+ </div>
</div>
+
+ <div class="picture-container contrast-picture-container" v-if="currentTab === 'kuoxian'">
+ <h2 >{{ BPTitleTime }}温度、相对湿度、水汽密度廓线</h2>
+ <div id="container" style="width:100%;height:100%"></div>
+ </div>
+
</div>
</div>
</div>
@@ -183,15 +148,14 @@
<script lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
import moment from "moment";
- import { MicrowaveRadiationConfig } from '../uilts/Config';
- import { post, get } from '../uilts/axios';
+ import { get } from '../uilts/axios';
import {BoxDrawer, ColorChart, createEmptyCanvas} from "../uilts/box-drawer";
- import {ElMessage} from "element-plus";
-
+ import * as Highcharts from 'highcharts';
export default {
name: 'MicrowaveRadiation',
setup() {
let timer = null;
+ let verticalProfileHighChart = null;
let options = reactive({
currentTab: 'MWR',
@@ -200,7 +164,7 @@
currentElement: 'six-minute',
currentCategory: 'CAPE',
date: moment('2021-12-05').format('YYYY-MM-DD'),
- currentHour: '24',
+ currentHour: '00',
hours: [],
times: [],
days: [],
@@ -217,85 +181,155 @@
noQCImgPreview: [],
checkImgUrl: '',
checkImgPreview: [],
- fillingImgUrl: '/images/picture.png',
- fillingImgPreview: ['/images/picture.png']
+ fillingImgUrl: '',
+ fillingImgPreview: ['']
},
urls: [],
titleStartTime: null,
titleEndTime: null,
apiTimeLength: -2,
apiTimeInterval: 6,
- onPitchTime : 0
+ onPitchTime : 0,
+ BPTitleTime:null,
+
+ highChartXAxis: [],
});
let drawers = {
originalDrawer: null,
interpolateDrawer: null,
- abnormalDrawer: null
+ abnormalDrawer: null,
+ BPTempDrawer: null,
+ BPRelativeHumidity: null,
+ BPVaporDensity: null
}
- onMounted(() => {
-
+ onMounted(() => {
+ // initEcharts(null)
initTimeLine()
initHours();
setTimeout(() => {
changeColor()
- },0)
+ },100)
reloadData()
- })
- // const onTabClick = (name) => {
- // options.currentTab = name;
- // options.currentElement = 'six-minute'
- // if (options.currentTab === 'MWR') {
- //
- // }
- // cancelActive();
- // }
+ })
const onTabClick = (name) => {
options.currentTab = name;
options.currentElement = 'six-minute'
- reloadData()
- // initTimeLine()
- // if ( options.currentTab === 'MWR' ) {
- // options.date = moment('2021-11-10').format('YYYY-MM-DD');
- // options.currentElement = 'TEMP';
- // options.index = options.days.length - 1;
- // initDays();
-
- // setTimeout(() => activeContrastImage(), 50)
- // } else {
- //
- // if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') {
- // // options.currentElement = 'TEMP';
- // setTimeout(()=>changeColor(),100) ;
- // }
- // else if (options.currentTab === 'shixu') {
- // options.date = moment('2021-12-04').format('YYYY-MM-DD');
- // // options.currentElement = 'CAPE';
- // }
- //
- // options.date = moment('2021-12-05').format('YYYY-MM-DD');
- // options.index = options.times.length - 1;
- //
- // if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') {
- // options.date = moment('2021-12-04').format('YYYY-MM-DD');
- // // options.currentElement = 'TEMP';
- // options.currentHour = '23';
- // } else if (options.currentTab === 'shixu') {
- // options.date = moment('2021-12-04').format('YYYY-MM-DD');
- // // options.currentElement = 'CAPE';
- // options.currentHour = '23';
- // } else if (options.currentTab === 'T-logP') {
- // options.date = moment('2021-12-05').format('YYYY-MM-DD');
- // // options.currentElement = 'TEMP';
- // options.currentHour = '16';
- // }
- // initTimeLine();
- // // setTimeout(() => activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute()), 50)
- // }
- // cancelActive();
+ setTimeout( () => {
+ initEcharts(name);
+ reloadChangeData();
+ },500)
+ }
+
+ const initEcharts = (name) => {
+ if ( name === 'kuoxian'){
+ verticalProfileHighChart = Highcharts.chart('container', {
+ credits: {
+ enabled: false
+ },
+ chart: {
+ type: 'line',
+ inverted: true
+ },
+ title: {
+ text: null
+ },
+ subtitle: {
+ text: null
+ },
+ xAxis: {
+ reversed: false,
+ title: {
+ enabled: true,
+ text: '高度(km)'
+ },
+ categories: options.highChartXAxis,
+ showLastLabel: true,
+ showFirstLabel: true,
+ },
+ yAxis: [
+ {
+ title: {
+ text: '温度T(degree)',
+ },
+ max: 10,
+ min: -40,
+ tickInterval: 10,
+ tickAmount: 6,
+ lineWidth: 1,
+ opposite:true
+ },
+ {
+ title: {
+ text: '相对湿度RH(%)'
+ },
+ max: 100,
+ min: 0,
+ tickInterval: 10,
+ tickAmount: 11,
+ lineWidth: 1,
+ },
+ {
+ title: {
+ text: '水汽密度Q(g/kg)'
+ },
+ labels: {
+ formatter: function() {
+ return this.value.toFixed(1);
+ }
+ },
+ // allowDecimals: true,
+ max: 10.0,
+ min: 0.0,
+ tickInterval: 1.0,
+ tickAmount: 11,
+ lineWidth: 1,
+ },
+ ],
+ legend: {
+ layout: 'vertical',
+ align: 'right',
+ verticalAlign: 'middle'
+ },
+ tooltip: {
+ headerFormat: '<b>{series.name}</b><br/>',
+ pointFormat: '{point.category} KM: {point.y}'
+ // pointFormatter: function () {
+ // console.log(this)
+ // return '{point.category} KM: {point.y}'
+ // }
+ },
+ series: [
+ {
+ name: '温度',
+ data: [],
+ yAxis: 0,
+ tooltip: {
+ valueSuffix: '℃'
+ }
+ },
+ {
+ name: '相对湿度',
+ data: [],
+ yAxis: 1,
+ tooltip: {
+ valueSuffix: '%'
+ }
+ },
+ {
+ name: '水汽密度',
+ data: [],
+ yAxis: 2,
+ tooltip: {
+ valueSuffix: 'g/Kg'
+ }
+ }
+ ]
+ });
+ }
}
const onRegionClick = (region) => {
@@ -313,10 +347,6 @@
options.currentElement = element;
options.onPitchTime = onPitchTime
initTimeLine(reloadData)
- // if (options.currentTab === 'MWR')
- // activeContrastImage();
- // else
- // activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
if (element === 'six-minute') {
setTimeout(() => {
changeColor()
@@ -452,23 +482,6 @@
callback(params);
}
- // const initDays = () => {
- // options.days = [];
- // options.currentTime = moment(options.date).format('YYYY-MM-DD');
- //
- // let now = moment(options.date).add(1, 'day');
- //
- // for (let i = 0; i < 10 ; i++) {
- // options.days.push({
- // day: now.add(-1, 'day').format('DD'),
- // date: now.format('YYYY-MM-DD'),
- // })
- // }
- //
- // options.days.reverse();
- // options.index = options.days.length - 1;
- // }
-
const initHours = () => {
for (let i = 0; i < 24; i++) {
options.hours.push({
@@ -479,16 +492,10 @@
}
const onTimeClick = (time, index) => {
- options.currentTime = time.date;
- reloadQualityComparison();
- // options.currentTime = time.date;
+ options.currentTime = time.date;
options.titleStartTime = moment(time.date).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:ss')
options.titleEndTime = time.date
- reloadData()
- // options.index = index;
- // test()
- // cancelActive();
- // activeImage(moment(time.date).hour(), moment(time.date).minute());
+ reloadChangeData()
}
// const onDayClick = (time, index) => {
@@ -509,8 +516,8 @@
initTimeLine()
options.titleStartTime = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30).format('YYYY-MM-DD HH:mm:ss');
options.titleEndTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss');
- reloadData()
-
+ reloadChangeData()
+
}
//下一天
@@ -519,7 +526,7 @@
initTimeLine()
options.titleStartTime = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30).format('YYYY-MM-DD HH:mm:ss');
options.titleEndTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss');
- reloadData()
+ reloadChangeData()
}
// const onPrevImgClick = () => {
@@ -549,22 +556,14 @@
// setCurrentPlayElement(element);
// }
//重置时间
- // const onRefreshClick = () => {
- // // cancelActive();
- // let element = getCurrentElement();
- // // if (options.currentTab === 'MWR') {
- // // options.date = moment('2021-11-10').format('YYYY-MM-DD');
- // // options.currentTime = options.date;
- // // element.children[options.days.length - 1].classList.add('active');
- // // activeContrastImage();
- // // } else {
- // options.currentHour = '24';
- // options.date = moment('2021-12-05').format('YYYY-MM-DD');
- // options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm');
- // element.children[options.times.length - 1].classList.add('active');
- // // activeImage(moment(options.currentTime).hour(), moment(options.currentTime).minute(options.currentTab === 'T-logP' ? 0 : 30));
- // // }
- // }
+ const onRefreshClick = () => {
+ let element = getCurrentElement();
+ options.currentHour = '00';
+ options.date = moment('2021-12-05').format('YYYY-MM-DD');
+ element.children[options.times.length - 1].classList.add('active');
+ initTimeLine()
+ reloadChangeData()
+ }
//播放动画
const onPlayClick = () => {
@@ -605,22 +604,13 @@
element.children[options.index].classList.add('active');
if(options.currentTab === 'MWR') {
options.currentTime = options.days[options.index].date;
- // activeContrastImage();
}
else {
- options.currentTime = options.times[options.index].date;
- // activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
- }
+ options.currentTime = options.times[options.index].date;}
}
const onChange = () => {
- initTimeLine(reloadData);
-
- // if(options.currentTab === 'MWR') {
- // // activeContrastImage();
- // } else {
- // // activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
- // }
+ initTimeLine(reloadChangeData);
}
const reloadData = () => {
@@ -628,6 +618,27 @@
reloadQualityInterpolation()
}
+ const reloadBPData = () => {
+ reloadBPRelativeHumidity()
+ reloadQualityInterpolation()
+ reloadBPVaporDensity()
+ }
+
+ const BPBrokenLineData = () => {
+ BPTempData()
+ BPVaporDensityData()
+ BPRelativeHumidityData()
+ }
+ const reloadChangeData = () => {
+ if (options.currentTab === 'MWR')
+ reloadData()
+ else if (options.currentTab ==='shixu_BPFY')
+ reloadBPData()
+ else if (options.currentTab ==='kuoxian') {
+ BPBrokenLineData()
+ }
+ }
+
// const onSaveClick = () => {
// let pictures = document.getElementById('pictures');
// options.urls = [options.contrast.noQCImgUrl, options.contrast.checkImgUrl, options.contrast.fillingImgUrl];
@@ -671,66 +682,154 @@
const reloadQualityComparison = () => {
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
const params = prepareApiParams(401, startTime, options.titleEndTime);
- console.log(params);
get('/njplatform/radardata/getOriginRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
clearBoxDrawer(drawers.originalDrawer);
clearBoxDrawer(drawers.abnormalDrawer);
if (response.code != 200 || response.data.radar_data.length === 0){
- // ElMessage.error({
- // message: "请求失败",
- // type: 'error',
- // grouping: true,
- // customClass:'messageerror',
- // duration:0,
- // });
-
createEmptyCanvas('original-data-canvas', 1500, 500);
createEmptyCanvas('abnormal-canvas', 1500, 500);
return;
}
- drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'original-data-canvas');
- drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas');
- options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image;
- options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image;
+ drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'original-data-canvas','℃');
+ drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas','℃');
+ // options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image;
+ // options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image;
})
}
- const clearBoxDrawer = (boxDrawer: BoxDrawer) => {
- if (boxDrawer == null) return;
- boxDrawer.close();
- }
-
const reloadQualityInterpolation = () => {
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
const params = prepareApiParams(401, startTime, options.titleEndTime);
get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
-
clearBoxDrawer(drawers.interpolateDrawer);
if (response.code != 200 || response.data.radar_data.length === 0){
- // ElMessage.error({
- // message: "请求失败",
- // type: 'error',
- // grouping: true,
- // customClass:'messageerror',
- // duration:0,
- // });
+ if (options.currentTab ==='MWR')
createEmptyCanvas('interpolate-canvas', 1500, 500);
+ else if(options.currentTab ==='shixu_BPFY')
+ createEmptyCanvas('BP-temp', 1500, 500);
+ return;
+ }
+ if (options.currentTab ==='MWR')
+ drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'interpolate-canvas','℃');
+ else if(options.currentTab ==='shixu_BPFY')
+ drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareBPTempColors(), response.data, 'BP-temp','(degree)');
+
+ // options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
+ })
+ }
+
+
+ //BP反演相对湿度
+ const reloadBPRelativeHumidity = () => {
+ const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+ const params = prepareApiParams(404, startTime, options.titleEndTime);
+ get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
+ clearBoxDrawer(drawers.BPRelativeHumidity);
+ if (response.code != 200 || response.data.radar_data.length === 0){
+ createEmptyCanvas('BP-relative-humidity', 1500, 500);
+ return;
+ }
+ drawers.BPRelativeHumidity = new BoxDrawer(1500, 500, prepareBPRelativeHumidityColors(), response.data, 'BP-relative-humidity','(%)');
+ // options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
+ })
+ }
+ //水汽密度
+ const reloadBPVaporDensity = () => {
+ const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+ const params = prepareApiParams(402, startTime, options.titleEndTime);
+ get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
+ console.log(response)
+ clearBoxDrawer(drawers.BPVaporDensity);
+ if (response.code != 200 || response.data.radar_data.length === 0){
+ createEmptyCanvas('BP-relative-humidity', 1500, 500);
return;
}
+ drawers.BPVaporDensity = new BoxDrawer(1500, 500, prepareBPVaporDensityColors(), response.data, 'BP-vapor-density','(g/kg)');
+ // options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
+ })
+ }
+
+ const BPTempData = () => {
+ const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+ const params = prepareApiParams(401, startTime, options.titleEndTime);
+ get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
+ verticalProfileHighChart.series[0].setData(getVerticalProfileResponseData(response));
+ })
+ }
+
+ const BPVaporDensityData = () => {
+ const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+ const params = prepareApiParams(402, startTime, options.titleEndTime);
+ get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
+ verticalProfileHighChart.series[2].setData(getVerticalProfileResponseData(response));
+ })
+ }
- drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'interpolate-canvas');
- options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
+ const BPRelativeHumidityData = () => {
+ const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+ const params = prepareApiParams(404, startTime, options.titleEndTime);
+ get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
+ // BPResponseData(response, options.BPTempTimeData);
+ verticalProfileHighChart.series[1].setData(getVerticalProfileResponseData(response));
})
}
+ const getVerticalProfileResponseData = (response) => {
+ if (response.code != 200 || response.data.radar_data.length === 0) {
+ options.BPTitleTime = null;
+ return [];
+ }
+
+ verticalProfileHighChart.xAxis[0].setCategories(response.data.radar_info.map(r => r.col_factor));
+ response.data.radar_data.sort((x, y) => {
+ return moment(x.data_time).isBefore(moment(y.data_time));
+ });
+ let data = response.data.radar_data[0];
+ options.BPTitleTime = data.data_time;
+ let optionData = [];
+ response.data.radar_info.forEach(r => {
+ optionData.push([r.col_name, data[r.col_name]]);
+ });
+ return optionData;
+ }
+
+ const clearBoxDrawer = (boxDrawer: BoxDrawer) => {
+ if (boxDrawer == null) return;
+ boxDrawer.close();
+ }
+
const prepareTmpOriginalColors = () => {
return new ColorChart(['#860200','#CD0402','#FF1A04','#FF5E0C',
'#FEA61B','#FDED2A','#C1FE46','#7AFD86',
'#2BFDCD','#05E6FD','#14A0FA','#1B5AFB',
'#1C1FF9','#1310C4','#09067C'],
- [ 999, 305, 300, 295, 290, 285, 280, 275, 270, 265, 260, 255, 250, 245, 240, -999]);
+ [ 999, 30, 25, 20, 15, 10, 5, 0, -5, -10, -15, -20, -25, -30, -35, -999]);
+ }
+
+ const prepareBPTempColors = () => {
+ return new ColorChart(['#860100','#D20201','#FF2402','#FF6F09',
+ '#FEBF14','#EFFE24','#9FFE61','#52FEAA',
+ '#03FEF8','#0AB8FD','#1069FD','#1222FD',
+ '#0C0AC9','#05037D'],
+ [ 999, 12, 8, 4, 0, -4, -8, -12, -16, -20, -24, -28, -32, -36, -999]);
}
+ const prepareBPRelativeHumidityColors = () => {
+ return new ColorChart(['#860100','#F60301','#FF6708','#FED718',
+ '#B3FE4F','#3EFEBD','#07CFFE','#1061FD',
+ '#100DED','#05037D'],
+ [ 999, 90, 80, 70, 60, 50, 40, 30, 20, 10, -999])
+ }
+
+ const prepareBPVaporDensityColors = () => {
+ return new ColorChart(['#860100','#F60301','#FF6708','#FED718',
+ '#B3FE4F','#3EFEBD','#07CFFE','#1061FD',
+ '#100DED','#05037D'],
+ [ 999, 9, 8, 7, 6, 5, 4, 3, 2, 1, -999])
+ }
+
+
+
const prepareApiParams = (radarDataCode, startTime, endTime) => {
return {
radar_data_code: radarDataCode,
@@ -754,7 +853,7 @@
onNextDayClick,
// onPrevImgClick,
// onNextImgClick,
- // onRefreshClick,
+ onRefreshClick,
onPlayClick,
onChange,
onImageLoad,
@@ -776,17 +875,18 @@
align-items: center;
.picture {
width: 100%;
- flex-direction: column;
+ //flex-direction: column;
position: relative;
- #original-data-canvas , #abnormal-canvas ,#interpolate-canvas{
+ #original-data-canvas , #abnormal-canvas ,#interpolate-canvas,
+ #BP-temp, #BP-relative-humidity, #BP-vapor-density {
transform: scale(0.5,0.4);
}
.title {
- padding-bottom: 0;
+ //padding-bottom: 0;
font-size: 0.22rem;
position: absolute;
- left: 296px;
+ left: 3.90rem;
top: 0;
z-index: 100;
}
diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less
index b502646..983bf6a 100644
--- a/04.系统编码/Frontend/src/index.less
+++ b/04.系统编码/Frontend/src/index.less
@@ -178,18 +178,18 @@ img {
display: flex;
margin-right: 0.2rem;
align-items: center;
- padding-bottom: 12px;
+ padding-bottom: 0.12rem;
//border-left: 1px solid #666666;
//border-right: 1px solid #666666;
//background-color: #ECF4FF;
div:first-child {
span:last-child {
- border-radius: 5px 0 0 5px;
+ border-radius: 0.05rem 0 0 0.05rem;
}
}
div:last-child {
span:last-child {
- border-radius: 0 5px 5px 0;
+ border-radius: 0 0.05rem 0.05rem 0;
}
}
@@ -213,7 +213,7 @@ img {
cursor: pointer;
background-color: #e6edfd;
color: #0a2e62;
- font-size: 14px;
+ font-size: 0.14rem;
font-weight: 400;
}
}
@@ -262,6 +262,7 @@ img {
// background-color: #666666;
//}
}
+
.halfHour {
:nth-child(4n-2) {
span.time {
@@ -417,13 +418,13 @@ img {
right: 2rem;
}
- .title {
- padding-bottom: 0.4rem;
- line-height: 0.3rem;
- text-align: center;
- font-size: 0.3rem;
- font-weight: bold;
- }
+ //.title {
+ // padding-bottom: 0.4rem;
+ // line-height: 0.3rem;
+ // text-align: center;
+ // font-size: 0.3rem;
+ // font-weight: bold;
+ //}
.picture-container {
height: 100%;
@@ -441,9 +442,9 @@ img {
}
.picture {
- width: 100%;
- height: calc(~"100% - 1.1rem");
- margin: 0 auto;
+ //width: 100%;
+ //height: calc(~"100% - 1.1rem");
+ //margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
@@ -494,7 +495,7 @@ img {
.image-tip {
text-align: center;
- margin-top: 10px;
+ margin-top: 0.1rem;
}
.save-btn {
diff --git a/04.系统编码/Frontend/src/model/microwave-radiation.ts b/04.系统编码/Frontend/src/model/microwave-radiation.ts
new file mode 100644
index 0000000..fb8e5d8
--- /dev/null
+++ b/04.系统编码/Frontend/src/model/microwave-radiation.ts
@@ -0,0 +1,38 @@
+export class MicrowaveRadiation {
+
+ /**
+ * echart 创建x轴
+ * @param color
+ * @param data
+ * @param formatter
+ */
+ public static createXAxis(color: string, data: Array<string | number>, formatter: Function);
+ public static createXAxis(color: string, data: Array<string | number>, formatter: Function, position: string);
+ public static createXAxis(color: string, data: Array<string | number>, formatter: Function, position: string, offset: number);
+ public static createXAxis(color: string, data: Array<string | number>, formatter: Function, position: string = 'top', offset: number = 0, type: string = "category"): any{
+ return {
+ type: type,
+ offset : offset,
+ position: position,
+ nameLocation: 'end',
+ axisTick: {
+ alignWithLabel: true
+ },
+ axisLine: {
+ onZero: false,
+ lineStyle: {
+ color: color
+ }
+ },
+ axisPointer: {
+ label: {
+ formatter: formatter
+ }
+ },
+ data: data
+ // min: -40,
+ // max: 10,
+ // splitNumber: 5
+ }
+ }
+}
\ No newline at end of file
diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts
index a0eeaf4..86e5181 100644
--- a/04.系统编码/Frontend/src/uilts/box-drawer.ts
+++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts
@@ -16,10 +16,6 @@ export function createEmptyCanvas(id: string, width: number, height: number): vo
canvasContext.fillText('暂无数据', (width / 2) - (canvasContext.measureText('暂无数据').width / 2), height / 2 - 24);
}
-
-
-
-
export class BoxDrawer{
private canvas: any = null;
@@ -32,9 +28,9 @@ export class BoxDrawer{
private readonly width: number = null;
private readonly height: number = null;
- private readonly paddingLeft: number = 100;
+ private readonly paddingLeft: number = 200;
private readonly paddingRight: number = 100;
- private readonly paddingTop: number = 50;
+ private readonly paddingTop: number = 60;
private readonly paddingBottom: number = 50;
private readonly colorChart: ColorChart = null;
private readonly values: any = null;
@@ -56,7 +52,7 @@ export class BoxDrawer{
private calc: Calc = null;
private box: Box = null;
- constructor(width: number, height: number, colorChart: ColorChart, values: any, id: string) {
+ constructor(width: number, height: number, colorChart: ColorChart, values: any, id: string, unit: string) {
if (id == null) return;
this.width = width;
@@ -65,7 +61,7 @@ export class BoxDrawer{
this.values = values;
this.init();
- this.drawCoordinate();
+ this.drawCoordinate(unit);
this.drawColorChart();
this.draw();
@@ -79,7 +75,7 @@ export class BoxDrawer{
let startY = this.paddingTop + this.verticalScaleLine + heightInterval;
let interval = (this.borderHeight - heightInterval) / (this.colorChart.colors.length)
- this.canvasContext.font = "normal 18px Verdana";
+ this.canvasContext.font = "normal 20px Verdana";
this.canvasContext.fillStyle = "#000000";
for(let lastLen = this.colorChart.colors.length - 1, index = lastLen; index >= 0; index --){
@@ -237,10 +233,48 @@ export class BoxDrawer{
this.canvasContext.fillRect(0,0, this.width,this.height);
}
- private drawCoordinate(): void{
+ private drawCoordinate(unit): void{
this.drawBorder();
this.drawVerticalScale();
this.drawHorizontalScale();
+ this.drawHeightText();
+ this.drawTemperatureText(unit);
+ }
+ //高度单位
+ private drawHeightText(): void {
+ let name =['高','度','(','k','m',')']; // 文本内容
+ let x = 70,y = 180; // 文字开始的坐标
+ 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 Verdana";
+ 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 Verdana";
+ this.canvasContext.fillStyle = "#000000";
+ this.canvasContext.fillText(str, x, y);
+ this.canvasContext.restore();
+ y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度
+ }
+ }
+ }
+ //温度单位
+ private drawTemperatureText(unit): void {
+ this.canvasContext.font = "normal 35px Verdana";
+ this.canvasContext.fillStyle = "#000000";
+ let unitX = 1390
+ if (unit === '(degree)') unitX =1350
+ this.canvasContext.fillText(unit, unitX,50);
}
private drawVerticalScale(): void{
@@ -276,15 +310,16 @@ export class BoxDrawer{
private drawHorizontalScale(): void{
let scaleCount = this.values.radar_info.length;
- this.horizontalScaleIntervalLength = this.borderHeight / (scaleCount - 1);
- let scaleSpecial = parseInt((scaleCount * 1.0 / this.horizontalScaleSpecialCount).toString());
+ this.horizontalScaleIntervalLength = this.borderHeight / (scaleCount - 1) ;
+ let scaleSpecial = parseInt((scaleCount * 1.0 / this.horizontalScaleSpecialCount + 1).toString());
let startX = this.paddingLeft + this.horizontalScaleLine;
let startY = this.paddingTop + this.verticalScaleLine;
const lastLen = scaleCount - 1;
- for(let index = lastLen; index >= 0; index--){
+ for(let index = lastLen; index >= 0; index--) {
+
const flag = index % scaleSpecial == 0;
this.setScaleStyle(flag);
- const xInterval = flag? this.horizontalScaleLine : this.horizontalScaleLine / 2;
+ const xInterval = flag ? this.horizontalScaleLine : this.horizontalScaleLine / 2;
const _y = startY + (this.borderHeight - index * this.horizontalScaleIntervalLength);
this.canvasContext.beginPath();
@@ -294,11 +329,11 @@ export class BoxDrawer{
this.canvasContext.lineTo(this.borderWidth + startX + xInterval, _y);
this.canvasContext.stroke();
- if (flag){
- this.canvasContext.font = "normal 20px Verdana";
- this.canvasContext.fillStyle = "#000000";
- const text = this.values.radar_info[index].col_factor;
- this.canvasContext.fillText(text, startX - this.canvasContext.measureText(text).width - this.horizontalScaleLine, _y + 10);
+ if (flag) {
+ this.canvasContext.font = "normal 20px Verdana";
+ this.canvasContext.fillStyle = "#000000";
+ const text = this.values.radar_info[index].col_factor;
+ this.canvasContext.fillText(text, startX - this.canvasContext.measureText(text).width - this.horizontalScaleLine, _y + 10);
}
}
}