diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index 3bdb3b0..359ab2e 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -59,7 +59,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-if="currentTab !== 'MWR'">
+ <el-select v-model="currentHour" placeholder="" @change="onChange" v-show="currentTab !== 'MWR'">
<el-option
v-for="item in hours"
:key="item.value"
@@ -69,19 +69,23 @@
</el-option>
</el-select>
<p class="unit" v-if="currentTab !== 'MWR'">时</p>
- <div class="refresh-btn" @click="onRefreshClick" v-if="currentTab !== 'MWR'">
+ <div class="refresh-btn" @click="onRefreshClick">
<img src="/images/refresh.png" />
</div>
- <div class="btns-group" v-if="currentTab !== 'MWR'">
+ <div class="btns-group">
<span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>
<a @click="onDownloadClick">下载动画</a>
- <a id="weboDownload" download :href="downloadSrc" style="display: none;">下载隐藏层</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>
<span class="arrow arrow-next" @click="onNextImgClick"><img src="/images/next-btn.png" /></span>
- <a :href="downloadImgUrl" download class="save-btn"><img src="/images/save.png" /></a>
+ <span class="save-btn" @click="onSaveClick" v-if="currentTab === 'MWR'"><img src="/images/save.png" /></span>
+ <a :href="downloadImgUrl" download class="save-btn" v-else><img src="/images/save.png" /></a>
+ <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">原始数据</h2>
@@ -106,8 +110,8 @@
<div class="picture">
<h2 class="title">异常值标记</h2>
<el-image
- :src="contrast.fillingImgUrl"
- :preview-src-list="contrast.fillingImgPreview"
+ :src="contrast.checkImgUrl"
+ :preview-src-list="contrast.checkImgPreview"
:initial-index="0"
fit="contain"
@load="onImageLoad"
@@ -181,13 +185,16 @@
name: 'MicrowaveRadiation',
setup() {
let timer = null;
+ let dateFormat = '2021-12-05';
+ let contrastDateFormat = '2021-11-10';
+
let options = reactive({
currentTab: 'MWR',
currentRegion: 'jiangning',
currentType: 'TEMP',
currentElement: 'TEMP',
currentCategory: 'CAPE',
- date: moment('2021-11-10').format('YYYY-MM-DD'),
+ date: moment(contrastDateFormat).format('YYYY-MM-DD'),
currentHour: '23',
hours: [],
times: [],
@@ -207,55 +214,71 @@
checkImgPreview: ['/images/picture.png'],
fillingImgUrl: '/images/picture.png',
fillingImgPreview: ['/images/picture.png']
- }
+ },
+ urls: []
})
onMounted(() => {
initHours();
initDays();
- initTimeLine();
- setTimeout(() => {
- activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute());
- }, 50);
+ setTimeout(() => activeContrastImage(), 50);
})
const onTabClick = (name) => {
options.currentTab = name;
if (options.currentTab === 'MWR') {
+ options.date = moment(contrastDateFormat).format('YYYY-MM-DD');
options.currentElement = 'TEMP';
- options.date = moment('2021-11-10').format('YYYY-MM-DD')
- }
- else {
- options.date = moment('2021-12-05').format('YYYY-MM-DD');
+ options.index = options.days.length - 1;
+
+ initDays();
+ setTimeout(() => activeContrastImage(), 50)
+ } else {
if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY')
options.currentElement = 'TEMP';
else if (options.currentTab === 'shixu')
options.currentElement = 'CAPE';
- }
-
+ options.date = moment(dateFormat).format('YYYY-MM-DD');
+ options.index = options.times.length - 1;
+
+ initTimeLine();
+ setTimeout(() => activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute()), 50)
+ }
cancelActive();
- activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
}
const onRegionClick = (region) => {
options.currentRegion = region;
cancelActive();
- 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());
}
const onElementClick = (element) => {
options.currentElement = element;
cancelActive();
- 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());
}
- const onCategoryClick = (category) => {
- options.currentCategory = category;
+ 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) => {
@@ -297,13 +320,14 @@
}
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: moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss"),
- urls: prepareUrls()
+ time: time,
+ urls: options.currentTab === 'MWR' ? prepareContrastUrls() : prepareUrls()
}
}
@@ -318,6 +342,20 @@
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();
img.src = path;
@@ -354,8 +392,7 @@
options.times.push({
hour: now.add(6, 'minute').format('HH时'),
minute: now.format('mm'),
- date: now.format('YYYY-MM-DD HH:mm'),
- name: 'hour' + now.format('HH')
+ date: now.format('YYYY-MM-DD HH:mm')
});
}
options.index = options.times.length - 1;
@@ -364,7 +401,6 @@
const initDays = () => {
options.days = [];
options.currentTime = moment(options.date).format('YYYY-MM-DD');
- console.log(options.currentTime)
let now = moment(options.date).add(1, 'day');
@@ -376,7 +412,7 @@
}
options.days.reverse();
- options.index = options.times.length - 1;
+ options.index = options.days.length - 1;
}
const initHours = () => {
@@ -399,7 +435,7 @@
options.currentTime = time.date;
options.index = index;
cancelActive();
- activeImage(moment(time.date).hour(), moment(time.date).minute());
+ activeContrastImage();
}
const cancelActive = () => {
@@ -409,19 +445,21 @@
const onPrevDayClick = () => {
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
-
- initTimeLine();
- activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
}
const onNextDayClick = () => {
options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD');
-
- initTimeLine();
- activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
}
const onPrevImgClick = () => {
+ prevElement();
+ }
+
+ const onNextImgClick = () => {
+ nextElement();
+ }
+
+ const prevElement = () => {
let element = getCurrentElement();
options.index--;
@@ -430,8 +468,8 @@
setCurrentPlayElement(element);
}
-
- const onNextImgClick = () => {
+
+ const nextElement = () => {
let element = getCurrentElement();
options.index++;
@@ -443,14 +481,22 @@
const onRefreshClick = () => {
cancelActive();
- let element = getCurrentElement();;
+ let element = getCurrentElement();
- options.currentHour = '23';
- 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');
+ if (options.currentTab === 'MWR') {
+ options.date = moment(contrastDateFormat).format('YYYY-MM-DD');
+ options.currentTime = options.date;
+ element.children[options.days.length - 1].classList.add('active');
- activeImage(moment(options.currentTime).hour(), moment(options.currentTime).minute());
- element.children[options.times.length - 1].classList.add('active');
+ activeContrastImage();
+ } else {
+ options.currentHour = '23';
+ options.date = moment(dateFormat).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(30));
+ }
}
const onPlayClick = () => {
@@ -490,8 +536,15 @@
element.children[i].classList.remove('active');
element.children[options.index].classList.add('active');
- options.currentTime = options.times[options.index].date;
- activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
+
+ 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());
+ }
}
const onChange = () => {
@@ -499,12 +552,40 @@
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
}
+ const onSaveClick = () => {
+ let pictures = document.getElementById('pictures');
+ options.urls = [options.contrast.noQCImgUrl, options.contrast.checkImgUrl, options.contrast.fillingImgUrl];
+
+ console.log(options.urls)
+ for (let i = 0; i < options.urls.length; i++) {
+ let img = new Image();
+ img.src = options.urls[i];
+ let canvas = document.createElement("canvas") as HTMLCanvasElement;
+ canvas.width = img.width;
+ canvas.height = img.height;
+
+ let ctx = canvas.getContext("2d");
+ let base64 = '';
+
+ img.setAttribute("crossOrigin",'Anonymous');
+ img.onload = function() {
+ ctx.drawImage(img, 0, 0);
+ base64 = canvas.toDataURL("image/png");
+ pictures.children[i].setAttribute('href', base64);
+
+ let button: HTMLElement = pictures.children[i] as HTMLElement;
+ setTimeout(() => {
+ button.click();
+ }, 500);
+ };
+ }
+ }
+
return {
...toRefs(options),
onTabClick,
onRegionClick,
onElementClick,
- onCategoryClick,
onTimeClick,
onDayClick,
onPrevDayClick,
@@ -515,7 +596,8 @@
onPlayClick,
onChange,
onImageLoad,
- onDownloadClick
+ onDownloadClick,
+ onSaveClick
}
}
}
diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less
index 679d6f6..f8fa1ba 100644
--- a/04.系统编码/Frontend/src/index.less
+++ b/04.系统编码/Frontend/src/index.less
@@ -465,4 +465,8 @@ img {
z-index: 10;
}
}
+}
+
+.hide {
+ display: none !important;
}
\ No newline at end of file