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

commit

master
xuhuihui 3 years ago
parent
022e9c9105
commit
fa179df6b1
4 changed files with 162 additions and 129 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      04.系统编码/Frontend/src/App.vue
  2. 242
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  3. 4
      04.系统编码/Frontend/src/index.less
  4. 44
      04.系统编码/Frontend/src/uilts/box-drawer.ts

1
04.系统编码/Frontend/src/App.vue
View File

@ -39,4 +39,5 @@
</script>
<style>
@import "element-plus/theme-chalk/index.css";
</style>

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

@ -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>

4
04.系统编码/Frontend/src/index.less
View File

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

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

@ -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{

Write Preview
Loading…
Cancel
Save