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); } } }