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

commit

master
hehongxing 3 years ago
parent
80f71b8b35
commit
8f3a6171dc
2 changed files with 135 additions and 49 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. 180
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  2. 4
      04.系统编码/Frontend/src/index.less

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

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

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

@ -465,4 +465,8 @@ img {
z-index: 10;
}
}
}
.hide {
display: none !important;
}
Write Preview
Loading…
Cancel
Save