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
Unified 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. 2
      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> </script>
<style> <style>
@import "element-plus/theme-chalk/index.css"; @import "element-plus/theme-chalk/index.css";
</style> </style>

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

@ -33,9 +33,9 @@
<div class="menu-item" > <div class="menu-item" >
<h2 class="tip">分辨率选择</h2> <h2 class="tip">分辨率选择</h2>
<el-row :gutter="12"> <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('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)" :class="{'active': currentElement === 'half-hour'}">30分钟</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)" :class="{'active': currentElement === 'one-hour'}">1小时</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('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>--> <!-- <el-col :span="8" ><span @click="onElementClick('CIN')" :class="{'active': currentElement === 'CIN'}">CIN</span></el-col>-->
@ -86,9 +86,9 @@
</el-option> </el-option>
</el-select> </el-select>
<p class="unit" >时</p> <p class="unit" >时</p>
<div class="refresh-btn" @click="onRefreshClick"> <!-- <div class="refresh-btn" @click="onRefreshClick">-->
<img src="/images/refresh.png" /> <!-- <img src="/images/refresh.png" />-->
</div> <!-- </div>-->
<div class="btns-group" v-if="currentTab==='kuoxian' || currentTab==='T-logP'"> <div class="btns-group" v-if="currentTab==='kuoxian' || currentTab==='T-logP'">
<span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span> <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>
<a @click="onDownloadClick">下载动画</a> <a @click="onDownloadClick">下载动画</a>
@ -199,7 +199,7 @@
currentType: 'TEMP', currentType: 'TEMP',
currentElement: 'six-minute', currentElement: 'six-minute',
currentCategory: 'CAPE', currentCategory: 'CAPE',
date: moment('2021-11-10').format('YYYY-MM-DD'), date: moment('2021-12-05').format('YYYY-MM-DD'),
currentHour: '24', currentHour: '24',
hours: [], hours: [],
times: [], times: [],
@ -224,7 +224,8 @@
titleStartTime: null, titleStartTime: null,
titleEndTime: null, titleEndTime: null,
apiTimeLength: -2, apiTimeLength: -2,
apiTimeInterval: 6 apiTimeInterval: 6,
onPitchTime : 0
}); });
let drawers = { let drawers = {
@ -234,13 +235,14 @@
} }
onMounted(() => { onMounted(() => {
reloadQualityComparison()
reloadQualityInterpolation()
initTimeLine() initTimeLine()
initHours(); initHours();
setTimeout(() => { setTimeout(() => {
changeColor() changeColor()
},0) },0)
reloadQualityComparison()
reloadQualityInterpolation()
}) })
// const onTabClick = (name) => { // const onTabClick = (name) => {
@ -305,11 +307,11 @@
// activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); // 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.apiTimeInterval = apiTimeInterval;
options.apiTimeLength = apiTimeLength; options.apiTimeLength = apiTimeLength;
options.currentElement = element; options.currentElement = element;
options.onPitchTime = onPitchTime
initTimeLine() initTimeLine()
// if (options.currentTab === 'MWR') // if (options.currentTab === 'MWR')
// activeContrastImage(); // activeContrastImage();
@ -347,63 +349,63 @@
return return
} }
const onDownloadClick = () => { // const onDownloadClick = () => {
post("/image/createGif", prepareParams(), 'application/json').then((response: any) => { // post("/image/createGif", prepareParams(), 'application/json').then((response: any) => {
if (response.error != 0){ // if (response.error != 0){
return; // return;
} // }
fetch(response.data).then(res => { // fetch(response.data).then(res => {
return res.blob(); // return res.blob();
}).then(blob => { // }).then(blob => {
let reader = new FileReader(); // let reader = new FileReader();
reader.onloadend = function(){ // reader.onloadend = function(){
options.downloadSrc = reader.result; // options.downloadSrc = reader.result;
//
setTimeout(() => { // setTimeout(() => {
document.getElementById("weboDownload").click(); // document.getElementById("weboDownload").click();
options.downloadSrc = null; // options.downloadSrc = null;
}, 500); // }, 500);
}; // };
reader.readAsDataURL(blob); // reader.readAsDataURL(blob);
}).catch(console.error); // }).catch(console.error);
}) // })
} // }
//请求参数 //请求参数
const prepareParams = () => { // 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"); // 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 { // return {
model: 'weibo', // model: 'weibo',
station: options.currentRegion, // station: options.currentRegion,
elementCode: options.currentType, // elementCode: options.currentType,
type: options.currentTab, // type: options.currentTab,
time: time, // time: time,
urls: options.currentTab === 'MWR' ? prepareContrastUrls() : prepareUrls() // urls: options.currentTab === 'MWR' ? prepareContrastUrls() : prepareUrls()
} // }
} // }
const prepareUrls = () => { // const prepareUrls = () => {
let urls = []; // let urls = [];
for(let index = 0, len = options.times.length; index < len; index++){ // for(let index = 0, len = options.times.length; index < len; index++){
let time = moment(options.times[index].date); // let time = moment(options.times[index].date);
let type = options.currentTab === 'T-logP' ? options.currentTab : (options.currentTab + '_' + options.currentElement); // let type = options.currentTab === 'T-logP' ? options.currentTab : (options.currentTab + '_' + options.currentElement);
urls.push(MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time)); // urls.push(MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time));
} // }
return urls; // return urls;
} // }
const prepareContrastUrls = () => { // const prepareContrastUrls = () => {
let urls = []; // let urls = [];
for(let i = 0, len = options.days.length; i < len; i++){ // for(let i = 0, len = options.days.length; i < len; i++){
let time = moment(options.days[i].date); // let time = moment(options.days[i].date);
urls.push( // urls.push(
MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_noQC', time), // MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_noQC', time),
MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_check', time), // MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_check', time),
MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_filling', time) // MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_filling', time)
); // );
} // }
return urls; // return urls;
} // }
const converToBase64 = (path) => { const converToBase64 = (path) => {
let img = new Image(); let img = new Image();
@ -424,9 +426,9 @@
} }
//初始化时间轴 //初始化时间轴
const initTimeLine = () => { const initTimeLine = (callback = null, ...params) => {
options.times = []; 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 options.titleEndTime = options.currentTime
let now = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30); let now = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30);
let minute = now.minute(); let minute = now.minute();
@ -445,8 +447,9 @@
} }
options.index = options.times.length - 1; 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 = () => { // const initDays = () => {
@ -481,6 +484,8 @@
// 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.titleStartTime = moment(time.date).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:ss')
options.titleEndTime = time.date options.titleEndTime = time.date
reloadQualityComparison()
reloadQualityInterpolation()
// options.index = index; // options.index = index;
// test() // test()
// cancelActive(); // cancelActive();
@ -504,6 +509,8 @@
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD'); 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.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'); 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.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.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'); 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 = () => { // const onPrevImgClick = () => {
@ -540,23 +549,22 @@
// setCurrentPlayElement(element); // setCurrentPlayElement(element);
// } // }
//重置时间 //重置时间
const onRefreshClick = () => { // const onRefreshClick = () => {
// cancelActive(); // // cancelActive();
let element = getCurrentElement(); // let element = getCurrentElement();
// // if (options.currentTab === 'MWR') {
// if (options.currentTab === 'MWR') { // // options.date = moment('2021-11-10').format('YYYY-MM-DD');
// options.date = moment('2021-11-10').format('YYYY-MM-DD'); // // options.currentTime = options.date;
// options.currentTime = options.date; // // element.children[options.days.length - 1].classList.add('active');
// element.children[options.days.length - 1].classList.add('active'); // // activeContrastImage();
// activeContrastImage(); // // } else {
// } else { // options.currentHour = '24';
options.currentHour = '24'; // options.date = moment('2021-12-05').format('YYYY-MM-DD');
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');
options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm'); // element.children[options.times.length - 1].classList.add('active');
element.children[options.times.length - 1].classList.add('active'); // // activeImage(moment(options.currentTime).hour(), moment(options.currentTime).minute(options.currentTab === 'T-logP' ? 0 : 30));
// activeImage(moment(options.currentTime).hour(), moment(options.currentTime).minute(options.currentTab === 'T-logP' ? 0 : 30)); // // }
// } // }
}
//播放动画 //播放动画
const onPlayClick = () => { const onPlayClick = () => {
@ -606,19 +614,24 @@
} }
} }
const onChange = () => { const onChange = (e) => {
initTimeLine(); initTimeLine(reloadData);
if(options.currentTab === 'MWR') {
// activeContrastImage(); // if(options.currentTab === 'MWR') {
} else { // // activeContrastImage();
// activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); // } else {
} // // activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
// }
}
const reloadData = () => {
reloadQualityComparison()
reloadQualityInterpolation()
} }
const onSaveClick = () => { const onSaveClick = () => {
let pictures = document.getElementById('pictures'); let pictures = document.getElementById('pictures');
options.urls = [options.contrast.noQCImgUrl, options.contrast.checkImgUrl, options.contrast.fillingImgUrl]; options.urls = [options.contrast.noQCImgUrl, options.contrast.checkImgUrl, options.contrast.fillingImgUrl];
for (let i = 0; i < options.urls.length; i++) { for (let i = 0; i < options.urls.length; i++) {
let img = new Image(); let img = new Image();
img.src = options.urls[i]; img.src = options.urls[i];
@ -654,17 +667,20 @@
} }
// 重新加载质控对比数据 // 重新加载质控对比数据
const reloadQualityComparison = () => { const reloadQualityComparison = () => {
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm'); 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, moment(options.currentTime)); const params = prepareApiParams(401, startTime, options.titleEndTime);
get('/njplatform/radardata/getOriginRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> { get('/njplatform/radardata/getOriginRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
clearBoxDrawer(drawers.originalDrawer); clearBoxDrawer(drawers.originalDrawer);
clearBoxDrawer(drawers.abnormalDrawer); clearBoxDrawer(drawers.abnormalDrawer);
if (response.code != 200 || response.data.radar_data.length === 0){ if (response.code != 200 || response.data.radar_data.length === 0){
ElMessage.error({ // ElMessage.error({
message: "请求失败", // message: "请求失败",
type: 'error' // type: 'error',
}); // grouping: true,
// customClass:'messageerror',
// duration:0,
// });
createEmptyCanvas('original-data-canvas', 1500, 500); createEmptyCanvas('original-data-canvas', 1500, 500);
createEmptyCanvas('abnormal-canvas', 1500, 500); createEmptyCanvas('abnormal-canvas', 1500, 500);
@ -684,15 +700,19 @@
const reloadQualityInterpolation = () => { const reloadQualityInterpolation = () => {
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm'); 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)=> { get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
clearBoxDrawer(drawers.interpolateDrawer); clearBoxDrawer(drawers.interpolateDrawer);
if (response.code != 200 || response.data.radar_data.length === 0){ if (response.code != 200 || response.data.radar_data.length === 0){
ElMessage.error({ // ElMessage.error({
message: "请求失败", // message: "请求失败",
type: 'error' // type: 'error',
}); // grouping: true,
// customClass:'messageerror',
// duration:0,
// });
createEmptyCanvas('interpolate-canvas', 1500, 500); createEmptyCanvas('interpolate-canvas', 1500, 500);
return; return;
} }
@ -713,8 +733,8 @@
const prepareApiParams = (radarDataCode, startTime, endTime) => { const prepareApiParams = (radarDataCode, startTime, endTime) => {
return { return {
radar_data_code: radarDataCode, radar_data_code: radarDataCode,
data_time_start: '2021-12-05 07:06:00', // startTime.format('YYYY-MM-DD HH:mm:ss'), data_time_start: startTime,
data_time_end: '2021-12-05 08:00:00'// endTime.format('YYYY-MM-DD HH:mm:ss') data_time_end: endTime
} }
} }
@ -733,11 +753,11 @@
onNextDayClick, onNextDayClick,
// onPrevImgClick, // onPrevImgClick,
// onNextImgClick, // onNextImgClick,
onRefreshClick, // onRefreshClick,
onPlayClick, onPlayClick,
onChange, onChange,
onImageLoad, onImageLoad,
onDownloadClick, // onDownloadClick,
onSaveClick, onSaveClick,
changeColor, changeColor,
onImageMove onImageMove
@ -747,6 +767,7 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.main { .main {
.container { .container {
.contrast-picture-container { .contrast-picture-container {
width: calc(~"100% - 2.5rem"); width: calc(~"100% - 2.5rem");
@ -772,4 +793,5 @@
} }
} }
} }
</style> </style>

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

@ -1,11 +1,13 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { body {
height: 100vh; height: 100vh;
background: url("../images/bg.png") no-repeat top center; background: url("../images/bg.png") no-repeat top center;
} }
:root { :root {

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

@ -1,5 +1,5 @@
import moment from "moment"; import moment from "moment";
import {h} from "vue"; import {h, provide} from "vue";
import {urlRE} from "vite/dist/node/utils/cssUtils"; import {urlRE} from "vite/dist/node/utils/cssUtils";
export function createEmptyCanvas(id: string, width: number, height: number): void{ 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); canvasContext.fillText('暂无数据', (width / 2) - (canvasContext.measureText('暂无数据').width / 2), height / 2 - 24);
} }
export class BoxDrawer{ export class BoxDrawer{
private canvas: any = null; private canvas: any = null;
@ -192,33 +196,37 @@ export class BoxDrawer{
} }
private bindMoveEvent(): void{ private bindMoveEvent(): void{
this.targetCanvas.addEventListener('mousemove', (e) => { this.targetCanvas.addEventListener('mousemove', this.onMouseMove.bind(this));
let box = this.calc.calc(e.offsetX, e.offsetY); this.targetCanvas.addEventListener('mouseout', this.onMouseOut.bind(this));
if (box == null) { }
if (this.box != null){
this.copyCanvas(); private onMouseOut() : void{
this.box = null; this.copyCanvas();
} }
return;
}
private onMouseMove(e) : void{
let box = this.calc.calc(e.offsetX, e.offsetY);
if (box == null) {
if (this.box != null){ if (this.box != null){
if (this.box.id == box.id) return;
this.copyCanvas(); this.copyCanvas();
this.box = null; this.box = null;
} }
return;
}
box.show(this.targetCanvasContext); if (this.box != null){
this.box = box; if (this.box.id == box.id) return;
});
this.targetCanvas.addEventListener('mouseout', () => {
this.copyCanvas(); this.copyCanvas();
}); this.box = null;
}
box.show(this.targetCanvasContext);
this.box = box;
} }
public close(): void{ public close(): void{
this.targetCanvas.removeEventListener('mousemove'); this.targetCanvas.removeEventListener('mousemove', this.onMouseMove.bind(this));
this.targetCanvas.removeEventListener('mouseout'); this.targetCanvas.removeEventListener('mouseout', this.onMouseOut.bind(this));
} }
private fillBackground(): void{ private fillBackground(): void{

Write Preview
Loading…
Cancel
Save