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

commit

master
hehongxing 3 years ago
parent
39d6fb4cb9
commit
0e8006cb57
2 changed files with 64 additions and 20 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. 78
      04.系统编码/Frontend/src/components/RamanLidar.vue
  2. 6
      04.系统编码/Frontend/src/uilts/Config.ts

78
04.系统编码/Frontend/src/components/RamanLidar.vue
View File

@ -10,13 +10,16 @@
<el-col :span="8"><span @click="onRegionClick('pukou')" :class="{'active': currentRegion === 'pukou'}">浦口</span></el-col>
</el-row>
</div>
<!-- layertype -->
<div class="menu-item">
<h2 class="tip">要素选择</h2>
<el-row :gutter="12">
<el-col :span="24"><span @click="onElementClick('lidar-ratio', '激光雷达比')" :class="{'active': currentElement === 'lidar-ratio'}">激光雷达比</span></el-col>
<el-col :span="24"><span @click="onElementClick('extinction-coefficient', '消光系数')" :class="{'active': currentElement === 'extinction-coefficient'}">消光系数</span></el-col>
<el-col :span="24"><span @click="onElementClick('aerosol-conc', '气溶胶浓度')" :class="{'active': currentElement === 'aerosol-conc'}">气溶胶浓度</span></el-col>
<el-col :span="24"><span @click="onElementClick('cloud-aerosol-identify', '云和气溶胶识别')" :class="{'active': currentElement === 'cloud-aerosol-identify'}">云和气溶胶识别</span></el-col>
<el-col :span="24"><span @click="onElementClick('PBLH', '边界层高度')" :class="{'active': currentElement === 'PBLH'}">边界层高度</span></el-col>
<el-col :span="24"><span @click="onElementClick('opticalthickness', '光学厚度')" :class="{'active': currentElement === 'opticalthickness'}">光学厚度</span></el-col>
<el-col :span="24"><span @click="onElementClick('Lidar_ratio', '激光雷达比')" :class="{'active': currentElement === 'Lidar_ratio'}">激光雷达比</span></el-col>
<el-col :span="24"><span @click="onElementClick('PM', '气溶胶PM')" :class="{'active': currentElement === 'PM'}">气溶胶PM</span></el-col>
<el-col :span="24"><span @click="onElementClick('ext_plot', '消光系数')" :class="{'active': currentElement === 'ext_plot'}">消光系数</span></el-col>
<el-col :span="24"><span @click="onElementClick('layertype', '云气溶胶分类')" :class="{'active': currentElement === 'layertype'}">云气溶胶分类</span></el-col>
</el-row>
</div>
</div>
@ -46,15 +49,35 @@
<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>
<div class="picture-container">
<h2 class="title">{{title}}</h2>
<div class="picture-container raman-picture-container">
<!-- <h2 class="title">{{title}}</h2> -->
<div class="picture">
<el-image
:src="imgUrl"
:preview-src-list="srcList"
:preview-src-list="previewUrl"
:initial-index="1"
fit="contain"
@load="onImageLoad"
:class="{'pblh-image': currentElement === 'PBLH'}"
>
<template #error>
<div class="image-slot">
<img src="/images/null-picture.png" />
</div>
<p class="image-tip">暂无图片</p>
</template>
<template #placeholder>
<div class="image-placeholder">正在加载...</div>
</template>
</el-image>
<el-image
:src="signalPBLHImgUrl"
:preview-src-list="signalPBLHPreviewUrl"
:initial-index="1"
fit="contain"
@load="onImageLoad"
v-if="currentElement === 'PBLH'"
:class="{'pblh-image': currentElement === 'PBLH'}"
>
<template #error>
<div class="image-slot">
@ -77,7 +100,7 @@
import { onMounted, reactive, toRefs } from 'vue';
import moment from "moment";
import { RamanLidarConfig } from '../uilts/Config';
import { post } from '../uilts/axios';
import { post } from '../uilts/axios';
export default {
name: 'RamanLidar',
@ -85,14 +108,16 @@ import { post } from '../uilts/axios';
let timer = null;
let options = reactive({
currentRegion: 'jiangning',
currentElement: 'lidar-ratio',
currentType: '激光雷达比',
date: moment('2021-08-21').format('YYYY-MM-DD'),
currentElement: 'PBLH',
currentType: '边界层高度',
date: moment('2021-11-15').format('YYYY-MM-DD'),
times: [],
currentTime: null,
imgUrl: '/images/default-picture.png',
downloadImgUrl: '/images/default-picture.png',
srcList: [],
imgUrl: '/images/default-picture.png',
signalPBLHImgUrl: '/images/default-picture.png',
previewUrl: [],
signalPBLHPreviewUrl: [],
isPlay: false,
title: null,
index: 0,
@ -132,7 +157,10 @@ import { post } from '../uilts/axios';
const activeImage = () => {
options.imgUrl = RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, moment(options.currentTime, 'YYYY-MM-DD'));
options.srcList = [options.imgUrl];
options.previewUrl = [options.imgUrl];
options.signalPBLHImgUrl = RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, moment(options.currentTime, 'YYYY-MM-DD'));
options.signalPBLHPreviewUrl = [options.signalPBLHImgUrl];
}
const onImageLoad = (event) => {
@ -211,7 +239,7 @@ import { post } from '../uilts/axios';
let now = moment(options.date).add(1, 'day');
for (let i = 0; i < 21 ; i++) {
for (let i = 0; i < 15 ; i++) {
options.times.push({
day: now.add(-1, 'day').format('DD'),
date: now.format('YYYY-MM-DD'),
@ -219,6 +247,7 @@ import { post } from '../uilts/axios';
}
options.times.reverse();
console.log(options.times)
options.index = options.times.length - 1;
}
@ -277,9 +306,11 @@ import { post } from '../uilts/axios';
}
const onRefreshClick = () => {
options.date = moment('2021-11-15').format('YYYY-MM-DD');
options.currentTime = options.times[options.times.length - 1].date;
cancelActive();
options.date = moment('2021-08-21').format('YYYY-MM-DD');
options.currentTime = options.times[options.times.length - 1];
activeImage();
}
const onPlayClick = () => {
@ -349,4 +380,17 @@ import { post } from '../uilts/axios';
}
</script>
<style lang="less" scoped>
.main {
.container {
.raman-picture-container {
width: calc(~"100% - 1rem");
margin: 0 auto;
.picture {
.pblh-image {
width: 50%;
}
}
}
}
}
</style>

6
04.系统编码/Frontend/src/uilts/Config.ts
View File

@ -2,9 +2,9 @@ import { Moment } from "moment";
import { format } from "./String";
export class Config {
// public static parentUrl: string = "http://112.124.40.88:8002/product/picture";
public static parentUrl: string = "http://112.124.40.88:8002/product/picture";
// public static parentUrl: string = "http://10.124.102.10:8002/product/picture";
public static parentUrl: string = "http://rdp.nagr.com.cn:8082/product/picture";
// public static parentUrl: string = "http://rdp.nagr.com.cn:8082/product/picture";
}
export class MicrowaveRadiationConfig {
@ -18,7 +18,7 @@ export class RamanLidarConfig {
private static url: string = Config.parentUrl + "/radar";
public static getUrl(station: string, type: string, time: Moment): string {
return this.url+ '/' + station + '/' + type + '/' + time.format("YYYY/YYYYMM/YYYYMMDD/YYYYMMDDHHmmss.png");
return this.url+ '/' + station + '/' + type + '/' + time.format("YYYY/YYYYMM/YYYYMMDD/") + type + '_day_' + time.format('D.png');
}
}

Write Preview
Loading…
Cancel
Save