Browse Source

commit

master
hehongxing 3 years ago
parent
commit
8f3a6171dc
  1. 180
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  2. 4
      04.系统编码/Frontend/src/index.less

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

@ -59,7 +59,7 @@
<span @click="onPrevDayClick"><img src="/images/prev.png" /></span> <span @click="onPrevDayClick"><img src="/images/prev.png" /></span>
<span @click="onNextDayClick"><img src="/images/next.png" /></span> <span @click="onNextDayClick"><img src="/images/next.png" /></span>
</div> </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 <el-option
v-for="item in hours" v-for="item in hours"
:key="item.value" :key="item.value"
@ -69,19 +69,23 @@
</el-option> </el-option>
</el-select> </el-select>
<p class="unit" v-if="currentTab !== 'MWR'"></p> <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" /> <img src="/images/refresh.png" />
</div> </div>
<div class="btns-group" v-if="currentTab !== 'MWR'"> <div class="btns-group">
<span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span> <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>
<a @click="onDownloadClick">下载动画</a> <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> </div>
<div class="picture-view"> <div class="picture-view">
<span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span> <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> <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-container contrast-picture-container" v-if="currentTab === 'MWR'">
<div class="picture"> <div class="picture">
<h2 class="title">原始数据</h2> <h2 class="title">原始数据</h2>
@ -106,8 +110,8 @@
<div class="picture"> <div class="picture">
<h2 class="title">异常值标记</h2> <h2 class="title">异常值标记</h2>
<el-image <el-image
:src="contrast.fillingImgUrl" :src="contrast.checkImgUrl"
:preview-src-list="contrast.fillingImgPreview" :preview-src-list="contrast.checkImgPreview"
:initial-index="0" :initial-index="0"
fit="contain" fit="contain"
@load="onImageLoad" @load="onImageLoad"
@ -181,13 +185,16 @@
name: 'MicrowaveRadiation', name: 'MicrowaveRadiation',
setup() { setup() {
let timer = null; let timer = null;
let dateFormat = '2021-12-05';
let contrastDateFormat = '2021-11-10';
let options = reactive({ let options = reactive({
currentTab: 'MWR', currentTab: 'MWR',
currentRegion: 'jiangning', currentRegion: 'jiangning',
currentType: 'TEMP', currentType: 'TEMP',
currentElement: 'TEMP', currentElement: 'TEMP',
currentCategory: 'CAPE', currentCategory: 'CAPE',
date: moment('2021-11-10').format('YYYY-MM-DD'), date: moment(contrastDateFormat).format('YYYY-MM-DD'),
currentHour: '23', currentHour: '23',
hours: [], hours: [],
times: [], times: [],
@ -207,55 +214,71 @@
checkImgPreview: ['/images/picture.png'], checkImgPreview: ['/images/picture.png'],
fillingImgUrl: '/images/picture.png', fillingImgUrl: '/images/picture.png',
fillingImgPreview: ['/images/picture.png'] fillingImgPreview: ['/images/picture.png']
} },
urls: []
}) })
onMounted(() => { onMounted(() => {
initHours(); initHours();
initDays(); initDays();
initTimeLine(); setTimeout(() => activeContrastImage(), 50);
setTimeout(() => {
activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute());
}, 50);
}) })
const onTabClick = (name) => { const onTabClick = (name) => {
options.currentTab = name; options.currentTab = name;
if (options.currentTab === 'MWR') { if (options.currentTab === 'MWR') {
options.date = moment(contrastDateFormat).format('YYYY-MM-DD');
options.currentElement = 'TEMP'; options.currentElement = 'TEMP';
options.date = moment('2021-11-10').format('YYYY-MM-DD') options.index = options.days.length - 1;
}
else { initDays();
options.date = moment('2021-12-05').format('YYYY-MM-DD'); setTimeout(() => activeContrastImage(), 50)
} else {
if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY')
options.currentElement = 'TEMP'; options.currentElement = 'TEMP';
else if (options.currentTab === 'shixu') else if (options.currentTab === 'shixu')
options.currentElement = 'CAPE'; 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(); cancelActive();
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
} }
const onRegionClick = (region) => { const onRegionClick = (region) => {
options.currentRegion = region; options.currentRegion = region;
cancelActive(); 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) => { const onElementClick = (element) => {
options.currentElement = element; options.currentElement = element;
cancelActive(); 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) => { const activeContrastImage = () => {
options.currentCategory = category; 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) => { const activeImage = (hour, minute) => {
@ -297,13 +320,14 @@
} }
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");
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: moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss"), time: time,
urls: prepareUrls() urls: options.currentTab === 'MWR' ? prepareContrastUrls() : prepareUrls()
} }
} }
@ -318,6 +342,20 @@
return urls; 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) => { const converToBase64 = (path) => {
let img = new Image(); let img = new Image();
img.src = path; img.src = path;
@ -354,8 +392,7 @@
options.times.push({ options.times.push({
hour: now.add(6, 'minute').format('HH时'), hour: now.add(6, 'minute').format('HH时'),
minute: now.format('mm'), minute: now.format('mm'),
date: now.format('YYYY-MM-DD HH:mm'), date: now.format('YYYY-MM-DD HH:mm')
name: 'hour' + now.format('HH')
}); });
} }
options.index = options.times.length - 1; options.index = options.times.length - 1;
@ -364,7 +401,6 @@
const initDays = () => { const initDays = () => {
options.days = []; options.days = [];
options.currentTime = moment(options.date).format('YYYY-MM-DD'); options.currentTime = moment(options.date).format('YYYY-MM-DD');
console.log(options.currentTime)
let now = moment(options.date).add(1, 'day'); let now = moment(options.date).add(1, 'day');
@ -376,7 +412,7 @@
} }
options.days.reverse(); options.days.reverse();
options.index = options.times.length - 1; options.index = options.days.length - 1;
} }
const initHours = () => { const initHours = () => {
@ -399,7 +435,7 @@
options.currentTime = time.date; options.currentTime = time.date;
options.index = index; options.index = index;
cancelActive(); cancelActive();
activeImage(moment(time.date).hour(), moment(time.date).minute()); activeContrastImage();
} }
const cancelActive = () => { const cancelActive = () => {
@ -409,19 +445,21 @@
const onPrevDayClick = () => { const onPrevDayClick = () => {
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD'); 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 = () => { const onNextDayClick = () => {
options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD'); 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 = () => { const onPrevImgClick = () => {
prevElement();
}
const onNextImgClick = () => {
nextElement();
}
const prevElement = () => {
let element = getCurrentElement(); let element = getCurrentElement();
options.index--; options.index--;
@ -430,8 +468,8 @@
setCurrentPlayElement(element); setCurrentPlayElement(element);
} }
const onNextImgClick = () => { const nextElement = () => {
let element = getCurrentElement(); let element = getCurrentElement();
options.index++; options.index++;
@ -443,14 +481,22 @@
const onRefreshClick = () => { const onRefreshClick = () => {
cancelActive(); cancelActive();
let element = getCurrentElement();; let element = getCurrentElement();
options.currentHour = '23'; if (options.currentTab === 'MWR') {
options.date = moment('2021-12-05').format('YYYY-MM-DD'); options.date = moment(contrastDateFormat).format('YYYY-MM-DD');
options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm'); options.currentTime = options.date;
element.children[options.days.length - 1].classList.add('active');
activeImage(moment(options.currentTime).hour(), moment(options.currentTime).minute()); activeContrastImage();
element.children[options.times.length - 1].classList.add('active'); } 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 = () => { const onPlayClick = () => {
@ -490,8 +536,15 @@
element.children[i].classList.remove('active'); element.children[i].classList.remove('active');
element.children[options.index].classList.add('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 = () => { const onChange = () => {
@ -499,12 +552,40 @@
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 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 { return {
...toRefs(options), ...toRefs(options),
onTabClick, onTabClick,
onRegionClick, onRegionClick,
onElementClick, onElementClick,
onCategoryClick,
onTimeClick, onTimeClick,
onDayClick, onDayClick,
onPrevDayClick, onPrevDayClick,
@ -515,7 +596,8 @@
onPlayClick, onPlayClick,
onChange, onChange,
onImageLoad, onImageLoad,
onDownloadClick onDownloadClick,
onSaveClick
} }
} }
} }

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

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