diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index 65b7d5f..eae3c72 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -32,9 +32,9 @@
<div class="menu-item" >
<h2 class="tip">分辨率选择</h2>
<el-row :gutter="12">
- <el-col :span="8" ><span @click="onElementClick('six-minute')" :class="{'active': currentElement === 'six-minute'}">6分钟</span></el-col>
- <el-col :span="8" ><span @click="onElementClick('half-hour')" :class="{'active': currentElement === 'half-hour'}">30分钟</span></el-col>
- <el-col :span="8" ><span @click="onElementClick('one-hour')" :class="{'active': currentElement === 'one-hour'}">1小时</span></el-col>
+ <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('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>-->
@@ -75,7 +75,7 @@
<span @click="onPrevDayClick"><img src="/images/prev.png" /></span>
<span @click="onNextDayClick"><img src="/images/next.png" /></span>
</div>
- <el-select v-model="currentHour" placeholder="" @change="onChange" v-show="currentTab !== 'MWR'">
+ <el-select v-model="currentHour" placeholder="" @change="onChange">
<el-option
v-for="item in hours"
:key="item.value"
@@ -84,11 +84,11 @@
>
</el-option>
</el-select>
- <p class="unit" v-if="currentTab !== 'MWR'">时</p>
+ <p class="unit" >时</p>
<div class="refresh-btn" @click="onRefreshClick">
<img src="/images/refresh.png" />
</div>
- <div class="btns-group">
+ <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>
@@ -104,7 +104,7 @@
</div>
<div class="picture-container contrast-picture-container" v-if="currentTab === 'MWR'">
<div class="picture">
- <h2 class="title">原始数据</h2>
+ <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度原始数据</h2>
<el-image
:src="contrast.noQCImgUrl"
:preview-src-list="contrast.noQCImgPreview"
@@ -124,7 +124,7 @@
</el-image>
</div>
<div class="picture">
- <h2 class="title">异常值标记</h2>
+ <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度异常值标记</h2>
<el-image
:src="contrast.checkImgUrl"
:preview-src-list="contrast.checkImgPreview"
@@ -144,7 +144,7 @@
</el-image>
</div>
<div class="picture">
- <h2 class="title">野点插补结果</h2>
+ <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度野点插补结果</h2>
<el-image
:src="contrast.fillingImgUrl"
:preview-src-list="contrast.fillingImgPreview"
@@ -164,6 +164,7 @@
</el-image>
</div>
</div>
+
<div class="picture-container" v-if="currentTab !== 'MWR'">
<!-- <h2 class="title">{{title}}</h2> -->
<div class="picture">
@@ -195,7 +196,8 @@
import { onMounted, reactive, toRefs } from 'vue';
import moment from "moment";
import { MicrowaveRadiationConfig } from '../uilts/Config';
- import { post } from '../uilts/axios';
+ import { post, get } from '../uilts/axios';
+ import {BoxDrawer} from "../uilts/box-drawer";
export default {
name: 'MicrowaveRadiation',
@@ -210,7 +212,7 @@
currentElement: 'six-minute',
currentCategory: 'CAPE',
date: moment('2021-11-10').format('YYYY-MM-DD'),
- currentHour: '23',
+ currentHour: '24',
hours: [],
times: [],
days: [],
@@ -230,8 +232,11 @@
fillingImgUrl: '/images/picture.png',
fillingImgPreview: ['/images/picture.png']
},
- urls: []
-
+ urls: [],
+ titleStartTime: null,
+ titleEndTime: null,
+ apiTimeLength: -2,
+ apiTimeInterval: 6
})
onMounted(() => {
@@ -254,61 +259,65 @@
const onTabClick = (name) => {
options.currentTab = name;
options.currentElement = 'six-minute'
- if (options.currentTab === 'MWR') {
- options.date = moment('2021-11-10').format('YYYY-MM-DD');
+ // initTimeLine()
+ // if ( options.currentTab === 'MWR' ) {
+ // options.date = moment('2021-11-10').format('YYYY-MM-DD');
// options.currentElement = 'TEMP';
- options.index = options.days.length - 1;
+ // 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(() => 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();
}
const onRegionClick = (region) => {
options.currentRegion = region;
- cancelActive();
- if (options.currentTab === 'MWR')
- activeContrastImage();
- else
- activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
+ // cancelActive();
+ // if (options.currentTab === 'MWR')
+ // activeContrastImage();
+ // else
+ // activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
}
- const onElementClick = (element) => {
+ const onElementClick = (element, apiTimeLength, apiTimeInterval) => {
+ options.apiTimeInterval = apiTimeInterval;
+ options.apiTimeLength = apiTimeLength;
options.currentElement = element;
initTimeLine()
- cancelActive();
- if (options.currentTab === 'MWR')
- activeContrastImage();
- else
- activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
+ // 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()
@@ -316,21 +325,23 @@
}
}
- const activeContrastImage = () => {
- options.contrast.noQCImgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_noQC', moment(options.currentTime, 'YYYY-MM-DD'));
- options.contrast.noQCImgPreview = [options.contrast.noQCImgUrl];
- options.contrast.checkImgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_check', moment(options.currentTime, 'YYYY-MM-DD'));
- options.contrast.checkImgPreview = [options.contrast.checkImgUrl];
- options.contrast.fillingImgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_filling', moment(options.currentTime, 'YYYY-MM-DD'));
- options.contrast.fillingImgPreview = [options.contrast.fillingImgUrl];
- }
+ //质控对比图片
+ // const activeContrastImage = () => {
+ // options.contrast.noQCImgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_noQC', moment(options.currentTime, 'YYYY-MM-DD'));
+ // options.contrast.noQCImgPreview = [options.contrast.noQCImgUrl];
+ // options.contrast.checkImgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_check', moment(options.currentTime, 'YYYY-MM-DD'));
+ // options.contrast.checkImgPreview = [options.contrast.checkImgUrl];
+ // options.contrast.fillingImgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_filling', moment(options.currentTime, 'YYYY-MM-DD'));
+ // options.contrast.fillingImgPreview = [options.contrast.fillingImgUrl];
+ // }
- const activeImage = (hour, minute) => {
- let time = moment(options.date).hour(hour).minute(minute);
- let type = options.currentTab === 'T-logP' ? options.currentTab : (options.currentTab + '_' + options.currentElement);
- options.imgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time);
- options.srcList = [options.imgUrl];
- }
+ // const activeImage = (hour, minute) => {
+ // let time = moment(options.date).hour(hour).minute(minute);
+ // let type = options.currentTab === 'T-logP' ? options.currentTab : (options.currentTab + '_' + options.currentElement);
+ // options.imgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time);
+ // console.log(options.imgUrl)
+ // options.srcList = [options.imgUrl];
+ // }
const onImageLoad = (event) => {
if (event.currentTarget.getAttribute('src') !== '/images/default-picture.png')
@@ -344,13 +355,13 @@
if (response.error != 0){
return;
}
- fetch(response.data).then(res => {
+ fetch(response.data).then(res => {
return res.blob();
}).then(blob => {
- let reader = new FileReader();
+ let reader = new FileReader();
reader.onloadend = function(){
options.downloadSrc = reader.result;
-
+
setTimeout(() => {
document.getElementById("weboDownload").click();
options.downloadSrc = null;
@@ -361,6 +372,7 @@
})
}
+ //请求参数
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 {
@@ -414,32 +426,39 @@
};
}
+ //初始化时间轴
const initTimeLine = () => {
options.times = [];
- options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'one-hour' ? 0 : 30).format('YYYY-MM-DD HH:mm');
- let now = moment(options.date).hour(parseInt(options.currentHour) - 2).minute(36);
- let minute = now.minute();
-
+ let changeSelectionTime = null;
if (options. currentElement === 'six-minute') {
options.selectionTime = 6
- }
- else if (options. currentElement === 'half-hour')
+ changeSelectionTime = 2
+ } else if (options. currentElement === 'half-hour') {
options.selectionTime = 30
- else
+ changeSelectionTime = 10
+ } else {
options.selectionTime = 60
+ changeSelectionTime = 20
+ }
+ options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).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) - changeSelectionTime).minute(options.currentElement === 'six-minute' ? 36 : 30);
+ let minute = now.minute();
const remainder = minute % options.selectionTime;
if (remainder > 0){
now.minute(minute + ( options.selectionTime - remainder));
}
now.minute(now.minute() - options.selectionTime);
- for (let i = 0; i < 22 ; i++) {
+ for (let i = 0; i < 20 ; i++) {
options.times.push({
- hour: now.add( options.selectionTime, 'minute').format('HH时'),
+ hour: now.add(options.selectionTime, 'minute').format('HH时'),
minute: now.format('mm'),
- date: now.format('YYYY-MM-DD HH:mm')
+ date: now.format('YYYY-MM-DD HH:mm:00')
});
}
options.index = options.times.length - 1;
+ options.titleStartTime = options.times[0].date
+
}
// const initDays = () => {
@@ -469,10 +488,51 @@
}
const onTimeClick = (time, index) => {
- options.currentTime = time.date;
- options.index = index;
- cancelActive();
- activeImage(moment(time.date).hour(), moment(time.date).minute());
+ options.currentTime = time.date;
+ reloadQualityComparison();
+ // let changeTimeLineHour = null
+ // let changeTimeLineMinute = null
+ // if ( options.currentElement === 'six-minute') {
+ // changeTimeLineHour = -2
+ // changeTimeLineMinute = 6
+ // }
+ // else if ( options.currentElement === 'half-hour') {
+ // changeTimeLineHour = -12
+ // changeTimeLineMinute = 30
+ // }
+ // else {
+ // changeTimeLineHour = -24
+ // changeTimeLineMinute = 60
+ // }
+ // options.currentTime = time.date;
+ // options.titleStartTime = moment(time.date).add(changeTimeLineHour, 'h').add(changeTimeLineMinute, 'm').format('YYYY-MM-DD HH:mm:ss')
+ // options.titleEndTime = time.date
+ // options.index = index;
+ // test()
+ // cancelActive();
+ // activeImage(moment(time.date).hour(), moment(time.date).minute());
+ }
+
+ // 重新加载质控对比数据
+ const reloadQualityComparison = () => {
+ const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm');
+ const params = prepareApiParams(401, startTime, moment(options.currentTime));
+ get('/njplatform/radardata/getOriginRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
+ if (response.code != 200){
+ // 弹出提示框
+ return;
+ }
+
+ let boxDrawer = new BoxDrawer(1000, 1000);
+ })
+ }
+
+ const prepareApiParams = (radarDataCode, startTime, endTime) => {
+ return {
+ radar_data_code: radarDataCode,
+ data_time_start: startTime.format('YYYY-MM-DD HH:mm:ss'),
+ data_time_end: endTime.format('YYYY-MM-DD HH:mm:ss')
+ }
}
// const onDayClick = (time, index) => {
@@ -482,17 +542,20 @@
// activeContrastImage();
// }
- const cancelActive = () => {
- clearTimer();
- options.isPlay = false;
- }
+ // const cancelActive = () => {
+ // clearTimer();
+ // options.isPlay = false;
+ // }
const onPrevDayClick = () => {
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
+ options.titleStartTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss');
}
const onNextDayClick = () => {
options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD');
+ options.titleStartTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm')
+
}
const onPrevImgClick = () => {
@@ -515,33 +578,32 @@
const nextElement = () => {
let element = getCurrentElement();
-
options.index++;
if (options.index > element.childElementCount - 1)
options.index = 0;
setCurrentPlayElement(element);
}
-
+ //重置时间
const onRefreshClick = () => {
- cancelActive();
+ // 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 = '23';
+ // 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));
- }
+ // activeImage(moment(options.currentTime).hour(), moment(options.currentTime).minute(options.currentTab === 'T-logP' ? 0 : 30));
+ // }
}
+ //播放动画
const onPlayClick = () => {
options.isPlay = !options.isPlay;
if (options.isPlay) {
@@ -579,24 +641,22 @@
element.children[i].classList.remove('active');
element.children[options.index].classList.add('active');
-
if(options.currentTab === 'MWR') {
options.currentTime = options.days[options.index].date;
- activeContrastImage();
+ // activeContrastImage();
}
else {
options.currentTime = options.times[options.index].date;
- 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 onChange = () => {
+ initTimeLine();
if(options.currentTab === 'MWR') {
- // initDays();
- activeContrastImage();
+ // activeContrastImage();
} else {
- initTimeLine();
- 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());
}
}
@@ -628,17 +688,15 @@
}
}
- const changeColor = () => {
- let timeLine = document.querySelectorAll('.time-item')
- timeLine.forEach((item :any, index) => {
- if( index >= 5 && index <= 14) {
- const spanTimeColor = item.querySelector('.time')
- spanTimeColor.style.backgroundColor = '#CDDAF6'
- }
- })
- }
-
-
+ const changeColor = () => {
+ let timeLine = document.querySelectorAll('.time-item')
+ timeLine.forEach((item :any, index) => {
+ if( index >= 4 && index <= 13) {
+ const spanTimeColor = item.querySelector('.time')
+ spanTimeColor.style.backgroundColor = '#CDDAF6'
+ }
+ })
+ }
return {
...toRefs(options),
diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less
index 83503ce..01d61e9 100644
--- a/04.系统编码/Frontend/src/index.less
+++ b/04.系统编码/Frontend/src/index.less
@@ -270,10 +270,16 @@ img {
}
}
.oneHour {
+ :nth-child(2n) {
+ span.time {
+ background-color: #CDDAF6;
+ }
+ }
.hour {
font-size: 0.12rem !important;
- color: #2c70fa;
+ color: #2c70fa!important;
font-weight: 700;
+
}
}
diff --git a/04.系统编码/Frontend/src/uilts/axios.ts b/04.系统编码/Frontend/src/uilts/axios.ts
index 7e7e95b..6c8f403 100644
--- a/04.系统编码/Frontend/src/uilts/axios.ts
+++ b/04.系统编码/Frontend/src/uilts/axios.ts
@@ -6,7 +6,7 @@ import { ElLoading } from 'element-plus'
let loading = null;
const service = axios.create({
// baseURL:"http://112.124.40.88:8002",
-
+ // baseURL:'http://rdp.nagr.com.cn:18080',
baseURL:"http://localhost:8002",
// baseURL: 'http://localhost:8002',
diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts
new file mode 100644
index 0000000..156f1fb
--- /dev/null
+++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts
@@ -0,0 +1,47 @@
+export class BoxDrawer{
+
+ private canvas: any = null;
+ private canvasContext: any = null;
+
+ private readonly weight: number = null;
+ private readonly height: number = null;
+ private readonly paddingLeft: number = 10;
+ private readonly paddingRight: number = 10;
+ private readonly paddingTop: number = 5;
+ private readonly paddingBottom: number = 5;
+ private readonly scaleLine: number = 4;
+
+ constructor(weight: number, height: number) {
+ this.weight = weight;
+ this.height = height;
+
+ this.init();
+ // this.drawCoordinate();
+ console.log(this.canvas.toDataURL());
+ }
+
+ private init(): void{
+ // 创建画布
+ this.canvas = document.createElement('canvas');
+ this.canvas.weight = this.weight;
+ this.canvas.height = this.height;
+
+ this.canvasContext = this.canvas.getContext('2d');
+ }
+
+ private drawCoordinate(): void{
+ this.drawBorder();
+ }
+
+ private drawBorder(): void{
+ const x = this.scaleLine + this.paddingLeft;
+ const y = this.scaleLine + this.paddingTop;
+ const _x = this.weight - this.scaleLine - this.paddingRight;
+ const _y = this.height - this.scaleLine - this.paddingBottom;
+ this.canvasContext.beginPath();
+ this.canvasContext.lineWidth="6";
+ this.canvasContext.strokeStyle="red";
+ this.canvasContext.rect(x, y, _x - x, _y - y);
+ this.canvasContext.stroke();
+ }
+}
\ No newline at end of file