From fa179df6b108129c4f4bcd81217928baf4216dd6 Mon Sep 17 00:00:00 2001
From: xuhuihui <3548508071@qq.com>
Date: Fri, 21 Jan 2022 13:41:19 +0800
Subject: [PATCH] commit
---
04.系统编码/Frontend/src/App.vue | 1 +
.../src/components/MicrowaveRadiation.vue | 242 ++++++++++--------
04.系统编码/Frontend/src/index.less | 4 +-
.../Frontend/src/uilts/box-drawer.ts | 44 ++--
4 files changed, 162 insertions(+), 129 deletions(-)
diff --git a/04.系统编码/Frontend/src/App.vue b/04.系统编码/Frontend/src/App.vue
index f23b45a..45d877c 100644
--- a/04.系统编码/Frontend/src/App.vue
+++ b/04.系统编码/Frontend/src/App.vue
@@ -39,4 +39,5 @@
</script>
<style>
@import "element-plus/theme-chalk/index.css";
+
</style>
diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index 768bef9..e6b8a2e 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -33,9 +33,9 @@
<div class="menu-item" >
<h2 class="tip">分辨率选择</h2>
<el-row :gutter="12">
- <el-col :span="8" ><span @click="onElementClick('six-minute', -2, 6)" :class="{'active': currentElement === 'six-minute'}">6分钟</span></el-col>
- <el-col :span="8" ><span @click="onElementClick('half-hour', -12, 30)" :class="{'active': currentElement === 'half-hour'}">30分钟</span></el-col>
- <el-col :span="8" ><span @click="onElementClick('one-hour', -24, 60)" :class="{'active': currentElement === 'one-hour'}">1小时</span></el-col>
+ <el-col :span="8" ><span @click="onElementClick('six-minute', -2, 6,0)" :class="{'active': currentElement === 'six-minute'}">6分钟</span></el-col>
+ <el-col :span="8" ><span @click="onElementClick('half-hour', -12, 30,-2)" :class="{'active': currentElement === 'half-hour'}">30分钟</span></el-col>
+ <el-col :span="8" ><span @click="onElementClick('one-hour', -24, 60,-4)" :class="{'active': currentElement === 'one-hour'}">1小时</span></el-col>
<!-- <el-col :span="8" ><span @click="onElementClick('CAPE')" :class="{'active': currentElement === 'CAPE'}">CAPE</span></el-col>-->
<!-- <el-col :span="8" ><span @click="onElementClick('CIN')" :class="{'active': currentElement === 'CIN'}">CIN</span></el-col>-->
@@ -86,9 +86,9 @@
</el-option>
</el-select>
<p class="unit" >时</p>
- <div class="refresh-btn" @click="onRefreshClick">
- <img src="/images/refresh.png" />
- </div>
+<!-- <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>
@@ -199,7 +199,7 @@
currentType: 'TEMP',
currentElement: 'six-minute',
currentCategory: 'CAPE',
- date: moment('2021-11-10').format('YYYY-MM-DD'),
+ date: moment('2021-12-05').format('YYYY-MM-DD'),
currentHour: '24',
hours: [],
times: [],
@@ -224,7 +224,8 @@
titleStartTime: null,
titleEndTime: null,
apiTimeLength: -2,
- apiTimeInterval: 6
+ apiTimeInterval: 6,
+ onPitchTime : 0
});
let drawers = {
@@ -234,13 +235,14 @@
}
onMounted(() => {
- reloadQualityComparison()
- reloadQualityInterpolation()
+
initTimeLine()
initHours();
setTimeout(() => {
changeColor()
},0)
+ reloadQualityComparison()
+ reloadQualityInterpolation()
})
// const onTabClick = (name) => {
@@ -305,11 +307,11 @@
// activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
}
- const onElementClick = (element, apiTimeLength, apiTimeInterval) => {
+ const onElementClick = (element, apiTimeLength, apiTimeInterval,onPitchTime) => {
options.apiTimeInterval = apiTimeInterval;
options.apiTimeLength = apiTimeLength;
options.currentElement = element;
-
+ options.onPitchTime = onPitchTime
initTimeLine()
// if (options.currentTab === 'MWR')
// activeContrastImage();
@@ -347,63 +349,63 @@
return
}
- const onDownloadClick = () => {
- post("/image/createGif", prepareParams(), 'application/json').then((response: any) => {
- if (response.error != 0){
- return;
- }
- fetch(response.data).then(res => {
- return res.blob();
- }).then(blob => {
- let reader = new FileReader();
- reader.onloadend = function(){
- options.downloadSrc = reader.result;
-
- setTimeout(() => {
- document.getElementById("weboDownload").click();
- options.downloadSrc = null;
- }, 500);
- };
- reader.readAsDataURL(blob);
- }).catch(console.error);
- })
- }
+ // const onDownloadClick = () => {
+ // post("/image/createGif", prepareParams(), 'application/json').then((response: any) => {
+ // if (response.error != 0){
+ // return;
+ // }
+ // fetch(response.data).then(res => {
+ // return res.blob();
+ // }).then(blob => {
+ // let reader = new FileReader();
+ // reader.onloadend = function(){
+ // options.downloadSrc = reader.result;
+ //
+ // setTimeout(() => {
+ // document.getElementById("weboDownload").click();
+ // options.downloadSrc = null;
+ // }, 500);
+ // };
+ // reader.readAsDataURL(blob);
+ // }).catch(console.error);
+ // })
+ // }
//请求参数
- const prepareParams = () => {
- let time = options.currentTab === 'MWR' ? moment(options.days[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.days[options.days.length - 1].date).format("YYYYMMDDHHmmss") : moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss");
- return {
- model: 'weibo',
- station: options.currentRegion,
- elementCode: options.currentType,
- type: options.currentTab,
- time: time,
- urls: options.currentTab === 'MWR' ? prepareContrastUrls() : prepareUrls()
- }
- }
+ // const prepareParams = () => {
+ // let time = options.currentTab === 'MWR' ? moment(options.days[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.days[options.days.length - 1].date).format("YYYYMMDDHHmmss") : moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss");
+ // return {
+ // model: 'weibo',
+ // station: options.currentRegion,
+ // elementCode: options.currentType,
+ // type: options.currentTab,
+ // time: time,
+ // urls: options.currentTab === 'MWR' ? prepareContrastUrls() : prepareUrls()
+ // }
+ // }
- const prepareUrls = () => {
- let urls = [];
- for(let index = 0, len = options.times.length; index < len; index++){
- let time = moment(options.times[index].date);
- let type = options.currentTab === 'T-logP' ? options.currentTab : (options.currentTab + '_' + options.currentElement);
- urls.push(MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time));
- }
- return urls;
- }
+ // const prepareUrls = () => {
+ // let urls = [];
+ // for(let index = 0, len = options.times.length; index < len; index++){
+ // let time = moment(options.times[index].date);
+ // let type = options.currentTab === 'T-logP' ? options.currentTab : (options.currentTab + '_' + options.currentElement);
+ // urls.push(MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time));
+ // }
+ // return urls;
+ // }
- const prepareContrastUrls = () => {
- let urls = [];
- for(let i = 0, len = options.days.length; i < len; i++){
- let time = moment(options.days[i].date);
- urls.push(
- MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_noQC', time),
- MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_check', time),
- MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_filling', time)
- );
- }
- return urls;
- }
+ // const prepareContrastUrls = () => {
+ // let urls = [];
+ // for(let i = 0, len = options.days.length; i < len; i++){
+ // let time = moment(options.days[i].date);
+ // urls.push(
+ // MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_noQC', time),
+ // MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_check', time),
+ // MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_filling', time)
+ // );
+ // }
+ // return urls;
+ // }
const converToBase64 = (path) => {
let img = new Image();
@@ -424,9 +426,9 @@
}
//初始化时间轴
- const initTimeLine = () => {
+ const initTimeLine = (callback = null, ...params) => {
options.times = [];
- options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss');
+ options.currentTime = moment(options.date).hour(parseInt(options.currentHour)+options.onPitchTime).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss');
options.titleEndTime = options.currentTime
let now = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30);
let minute = now.minute();
@@ -445,8 +447,9 @@
}
options.index = options.times.length - 1;
- options.titleStartTime = options.times[0].date
-
+ options.titleStartTime = options.times[0].date;
+ if (callback != null)
+ callback(params);
}
// const initDays = () => {
@@ -481,6 +484,8 @@
// 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
+ reloadQualityComparison()
+ reloadQualityInterpolation()
// options.index = index;
// test()
// cancelActive();
@@ -504,6 +509,8 @@
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
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');
+ reloadQualityComparison()
+ reloadQualityInterpolation()
}
//下一天
@@ -511,6 +518,8 @@
options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD');
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');
+ reloadQualityComparison()
+ reloadQualityInterpolation()
}
// const onPrevImgClick = () => {
@@ -540,23 +549,22 @@
// 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 = () => {
+ // // 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 onPlayClick = () => {
@@ -606,19 +614,24 @@
}
}
- const onChange = () => {
- initTimeLine();
- if(options.currentTab === 'MWR') {
- // activeContrastImage();
- } else {
- // activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
- }
+ const onChange = (e) => {
+ initTimeLine(reloadData);
+
+ // if(options.currentTab === 'MWR') {
+ // // activeContrastImage();
+ // } else {
+ // // activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
+ // }
+ }
+
+ const reloadData = () => {
+ reloadQualityComparison()
+ reloadQualityInterpolation()
}
const onSaveClick = () => {
let pictures = document.getElementById('pictures');
options.urls = [options.contrast.noQCImgUrl, options.contrast.checkImgUrl, options.contrast.fillingImgUrl];
-
for (let i = 0; i < options.urls.length; i++) {
let img = new Image();
img.src = options.urls[i];
@@ -654,17 +667,20 @@
}
// 重新加载质控对比数据
- const reloadQualityComparison = () => {
- const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm');
- const params = prepareApiParams(401, startTime, moment(options.currentTime));
+ 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);
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'
- });
+ // ElMessage.error({
+ // message: "请求失败",
+ // type: 'error',
+ // grouping: true,
+ // customClass:'messageerror',
+ // duration:0,
+ // });
createEmptyCanvas('original-data-canvas', 1500, 500);
createEmptyCanvas('abnormal-canvas', 1500, 500);
@@ -684,15 +700,19 @@
const reloadQualityInterpolation = () => {
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm');
- const params = prepareApiParams(401, startTime, moment(options.currentTime));
+ const params = prepareApiParams(401, startTime, options.titleEndTime);
+ console.log(params);
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'
- });
+ // ElMessage.error({
+ // message: "请求失败",
+ // type: 'error',
+ // grouping: true,
+ // customClass:'messageerror',
+ // duration:0,
+ // });
createEmptyCanvas('interpolate-canvas', 1500, 500);
return;
}
@@ -713,8 +733,8 @@
const prepareApiParams = (radarDataCode, startTime, endTime) => {
return {
radar_data_code: radarDataCode,
- data_time_start: '2021-12-05 07:06:00', // startTime.format('YYYY-MM-DD HH:mm:ss'),
- data_time_end: '2021-12-05 08:00:00'// endTime.format('YYYY-MM-DD HH:mm:ss')
+ data_time_start: startTime,
+ data_time_end: endTime
}
}
@@ -733,11 +753,11 @@
onNextDayClick,
// onPrevImgClick,
// onNextImgClick,
- onRefreshClick,
+ // onRefreshClick,
onPlayClick,
onChange,
onImageLoad,
- onDownloadClick,
+ // onDownloadClick,
onSaveClick,
changeColor,
onImageMove
@@ -747,6 +767,7 @@
</script>
<style lang="less" scoped>
.main {
+
.container {
.contrast-picture-container {
width: calc(~"100% - 2.5rem");
@@ -772,4 +793,5 @@
}
}
}
+
</style>
diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less
index 5c5140f..12f4098 100644
--- a/04.系统编码/Frontend/src/index.less
+++ b/04.系统编码/Frontend/src/index.less
@@ -1,11 +1,13 @@
* {
margin: 0;
padding: 0;
+
}
body {
height: 100vh;
background: url("../images/bg.png") no-repeat top center;
+
}
:root {
@@ -497,4 +499,4 @@ img {
.hide {
display: none !important;
-}
\ 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 0b165c1..083ce44 100644
--- a/04.系统编码/Frontend/src/uilts/box-drawer.ts
+++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts
@@ -1,5 +1,5 @@
import moment from "moment";
-import {h} from "vue";
+import {h, provide} from "vue";
import {urlRE} from "vite/dist/node/utils/cssUtils";
export function createEmptyCanvas(id: string, width: number, height: number): void{
@@ -16,6 +16,10 @@ 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;
@@ -192,33 +196,37 @@ export class BoxDrawer{
}
private bindMoveEvent(): void{
- this.targetCanvas.addEventListener('mousemove', (e) => {
- let box = this.calc.calc(e.offsetX, e.offsetY);
- if (box == null) {
- if (this.box != null){
- this.copyCanvas();
- this.box = null;
- }
- return;
- }
+ this.targetCanvas.addEventListener('mousemove', this.onMouseMove.bind(this));
+ this.targetCanvas.addEventListener('mouseout', this.onMouseOut.bind(this));
+ }
+
+ private onMouseOut() : void{
+ this.copyCanvas();
+ }
+ private onMouseMove(e) : void{
+ let box = this.calc.calc(e.offsetX, e.offsetY);
+ if (box == null) {
if (this.box != null){
- if (this.box.id == box.id) return;
this.copyCanvas();
this.box = null;
}
+ return;
+ }
- box.show(this.targetCanvasContext);
- this.box = box;
- });
- this.targetCanvas.addEventListener('mouseout', () => {
+ if (this.box != null){
+ if (this.box.id == box.id) return;
this.copyCanvas();
- });
+ this.box = null;
+ }
+
+ box.show(this.targetCanvasContext);
+ this.box = box;
}
public close(): void{
- this.targetCanvas.removeEventListener('mousemove');
- this.targetCanvas.removeEventListener('mouseout');
+ this.targetCanvas.removeEventListener('mousemove', this.onMouseMove.bind(this));
+ this.targetCanvas.removeEventListener('mouseout', this.onMouseOut.bind(this));
}
private fillBackground(): void{