Browse Source

commit

master
xuhuihui 3 years ago
parent
commit
17e261a621
  1. 26
      04.系统编码/Frontend/.idea/workspace.xml
  2. 2
      04.系统编码/Frontend/index.html
  3. 3778
      04.系统编码/Frontend/package-lock.json
  4. 6
      04.系统编码/Frontend/package.json
  5. BIN
      04.系统编码/Frontend/public/images/logo.png
  6. 1
      04.系统编码/Frontend/src/components/DecisionSupport.vue
  7. 199
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  8. 1
      04.系统编码/Frontend/src/components/SynergyEvaluation.vue
  9. 86
      04.系统编码/Frontend/src/index.less
  10. 4
      04.系统编码/Frontend/src/uilts/Config.ts
  11. 4
      04.系统编码/Frontend/src/uilts/axios.ts

26
04.系统编码/Frontend/.idea/workspace.xml

@ -3,9 +3,16 @@
<component name="ChangeListManager">
<list default="true" id="4b7d7b72-f5b8-41e4-85d5-6267bdc12fc5" name="默认变更列表" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/App.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/public/images/logo.png" beforeDir="false" afterPath="$PROJECT_DIR$/public/images/logo.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/DecisionSupport.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DecisionSupport.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/MicrowaveRadiation.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/MicrowaveRadiation.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/SynergyEvaluation.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/SynergyEvaluation.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.less" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.less" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/uilts/Config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/uilts/Config.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/uilts/axios.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/uilts/axios.ts" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -22,6 +29,14 @@
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/../.." />
</component>
<component name="GitSEFilterConfiguration">
<file-type-list>
<filtered-out-file-type name="LOCAL_BRANCH" />
<filtered-out-file-type name="REMOTE_BRANCH" />
<filtered-out-file-type name="TAG" />
<filtered-out-file-type name="COMMIT_BY_MESSAGE" />
</file-type-list>
</component>
<component name="ProjectId" id="21a5rRZhTS1K7V7ken7d20h7EC3" />
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
<component name="ProjectViewState">
@ -32,17 +47,19 @@
<property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
<property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$/src" />
<property name="last_opened_file_path" value="$PROJECT_DIR$/public/images" />
<property name="nodejs_package_manager_path" value="npm" />
<property name="settings.editor.selected.configurable" value="preferences.pluginManager" />
<property name="ts.external.directory.path" value="D:\project\NanJingLamanRadarProject\04.系统编码\Frontend\node_modules\typescript\lib" />
<property name="ts.external.directory.path" value="D:\project\2022\NanJingLamanRadarProject\04.系统编码\Frontend\node_modules\typescript\lib" />
<property name="vue.rearranger.settings.migration" value="true" />
</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="D:\project\2022\NanJingLamanRadarProject\04.系统编码\Frontend\public\images" />
<recent name="D:\project\NanJingLamanRadarProject\04.系统编码\Frontend\src" />
</key>
<key name="MoveFile.RECENT_KEYS">
<recent name="D:\project\2022\NanJingLamanRadarProject\04.系统编码\Frontend\public\images" />
<recent name="D:\project\NanJingLamanRadarProject\04.系统编码\Frontend\src\uilts" />
<recent name="D:\project\NanJingLamanRadarProject\04.系统编码\Frontend\public\images" />
</key>
@ -102,6 +119,9 @@
<workItem from="1638752962691" duration="9088000" />
<workItem from="1638768088746" duration="2255000" />
<workItem from="1638770403708" duration="11594000" />
<workItem from="1642053713517" duration="5420000" />
<workItem from="1642059535467" duration="7663000" />
<workItem from="1642121983769" duration="25342000" />
</task>
<task id="LOCAL-00001" summary="2021 12 01">
<created>1638357539757</created>

2
04.系统编码/Frontend/index.html

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/images/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>南京生态环境评估决策平台</title>
</head>

3778
04.系统编码/Frontend/package-lock.json

File diff suppressed because it is too large

6
04.系统编码/Frontend/package.json

@ -8,15 +8,15 @@
"dependencies": {
"axios": "^0.21.4",
"browser-tiff.js": "^1.0.1",
"crypto-js": "^4.1.1",
"element-plus": "^1.2.0-beta.4",
"js-md5": "^0.7.3",
"jsencrypt": "3.0.0-rc.1",
"moment": "^2.29.1",
"crypto-js": "^4.1.1",
"qs": "^6.10.1",
"typescript": "^4.5.2",
"vue": "^3.0.4",
"vue-router": "^4.0.12",
"jsencrypt": "3.0.0-rc.1"
"vue-router": "^4.0.12"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.4",

BIN
04.系统编码/Frontend/public/images/logo.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 109 KiB

1
04.系统编码/Frontend/src/components/DecisionSupport.vue

@ -158,7 +158,6 @@ import { post } from '../uilts/axios';
const initImage = (type, imgName, index) => {
post("/image/convert", {url: DecisionSupportConfig.getUrl(type, imgName)}).then((response: any) => {
if (response.error != 0){
console.log("发生错误")
return;
}

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

@ -29,30 +29,46 @@
<el-col :span="8"><span @click="onRegionClick('jiangning')" :class="{'active': currentRegion === 'jiangning'}">江宁</span></el-col>
</el-row>
</div>
<div class="menu-item" v-if="currentTab === 'MWR' || currentTab === 'kuoxian' || currentTab === 'shixu' || currentTab === 'shixu_BPFY'">
<h2 class="tip">要素选择</h2>
<div class="menu-item" >
<h2 class="tip">分辨率选择</h2>
<el-row :gutter="12">
<el-col :span="8" v-if="currentTab === 'MWR' || currentTab === 'kuoxian' || currentTab === 'shixu_BPFY'"><span @click="onElementClick('TEMP')" :class="{'active': currentElement === 'TEMP'}">温度</span></el-col>
<el-col :span="8" v-if="currentTab === 'kuoxian' || currentTab === 'shixu_BPFY'"><span @click="onElementClick('RH')" :class="{'active': currentElement === 'RH'}">湿度</span></el-col>
<el-col :span="8" v-if="currentTab === 'kuoxian' || currentTab === 'shixu_BPFY'"><span @click="onElementClick('VD')" :class="{'active': currentElement === 'VD'}">水汽密度</span></el-col>
<el-col :span="8" v-if="currentTab === 'shixu'"><span @click="onElementClick('CAPE')" :class="{'active': currentElement === 'CAPE'}">CAPE</span></el-col>
<el-col :span="8" v-if="currentTab === 'shixu'"><span @click="onElementClick('CIN')" :class="{'active': currentElement === 'CIN'}">CIN</span></el-col>
<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('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>-->
</el-row>
</div>
</div>
<div class="container panel">
<div class="toolbar" :class="{'day-toolbar': currentTab === 'MWR'}">
<div class="times" v-if="currentTab === 'MWR'">
<div class="time-item" v-for="(time, index) in days" :key="index" :class="{'active': currentTime === time.date}">
<span class="time" @click="onDayClick(time, index)">{{time.day}}</span>
<div class="toolbar">
<!--6分钟-->
<div class="times" v-if="currentElement === 'six-minute'">
<div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}">
<span class="hour">{{time.hour}}</span>
<span class="time" @click="onTimeClick(time, index)">{{time.minute}}</span>
</div>
</div>
<div class="times" v-else>
<div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}">
<!--30分钟-->
<div class="times halfHour" v-if="currentElement === 'half-hour'">
<div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}">
<span class="hour ">{{time.hour}}</span>
<span class="time" @click="onTimeClick(time, index)">{{time.minute}}</span>
</div>
</div>
<!--1小时-->
<div class="times oneHour" v-if="currentElement === 'one-hour'">
<div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}">
<span class="hour">{{time.hour}}</span>
<span class="time" @click="onTimeClick(time, index)">{{time.minute}}</span>
</div>
</div>
<el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker" @change="onChange">
</el-date-picker>
<div class="control-btn">
@ -187,10 +203,11 @@
let timer = null;
let options = reactive({
selectionTime: 6,
currentTab: 'MWR',
currentRegion: 'jiangning',
currentType: 'TEMP',
currentElement: 'TEMP',
currentElement: 'six-minute',
currentCategory: 'CAPE',
date: moment('2021-11-10').format('YYYY-MM-DD'),
currentHour: '23',
@ -214,30 +231,43 @@
fillingImgPreview: ['/images/picture.png']
},
urls: []
})
onMounted(() => {
initTimeLine()
initHours();
initDays();
setTimeout(() => activeContrastImage(), 50);
setTimeout(() => {
changeColor()
},0)
})
// const onTabClick = (name) => {
// options.currentTab = name;
// options.currentElement = 'six-minute'
// if (options.currentTab === 'MWR') {
//
// }
// cancelActive();
// }
const onTabClick = (name) => {
options.currentTab = name;
options.currentElement = 'six-minute'
if (options.currentTab === 'MWR') {
options.date = moment('2021-11-10').format('YYYY-MM-DD');
options.currentElement = 'TEMP';
// options.currentElement = 'TEMP';
options.index = options.days.length - 1;
initDays();
// initDays();
setTimeout(() => activeContrastImage(), 50)
} else {
if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY')
options.currentElement = 'TEMP';
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.currentElement = 'CAPE';
}
options.date = moment('2021-12-05').format('YYYY-MM-DD');
@ -245,30 +275,26 @@
if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') {
options.date = moment('2021-12-04').format('YYYY-MM-DD');
options.currentElement = 'TEMP';
// 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.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.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
@ -277,13 +303,17 @@
const onElementClick = (element) => {
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 (element === 'six-minute') {
setTimeout(() => {
changeColor()
},0)
}
}
const activeContrastImage = () => {
@ -312,10 +342,8 @@
const onDownloadClick = () => {
post("/image/createGif", prepareParams(), 'application/json').then((response: any) => {
if (response.error != 0){
console.log(response.message);
return;
}
fetch(response.data).then(res => {
return res.blob();
}).then(blob => {
@ -352,7 +380,6 @@
let type = options.currentTab === 'T-logP' ? options.currentTab : (options.currentTab + '_' + options.currentElement);
urls.push(MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time));
}
return urls;
}
@ -366,7 +393,6 @@
MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_filling', time)
);
}
return urls;
}
@ -390,21 +416,25 @@
const initTimeLine = () => {
options.times = [];
options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentTab === 'T-logP' ? 0 : 30).format('YYYY-MM-DD HH:mm');
let now = moment(options.date).hour(parseInt(options.currentHour) - 2).minute(options.currentTab === 'T-logP' ? 0 : 30);
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();
const remainder = minute % 6;
if (options. currentElement === 'six-minute') {
options.selectionTime = 6
}
else if (options. currentElement === 'half-hour')
options.selectionTime = 30
else
options.selectionTime = 60
const remainder = minute % options.selectionTime;
if (remainder > 0){
now.minute(minute + (6 - remainder));
now.minute(minute + ( options.selectionTime - remainder));
}
now.minute(now.minute() - 6);
for (let i = 0; i < 21 ; i++) {
now.minute(now.minute() - options.selectionTime);
for (let i = 0; i < 22 ; i++) {
options.times.push({
hour: now.add(6, 'minute').format('HH时'),
hour: now.add( options.selectionTime, 'minute').format('HH时'),
minute: now.format('mm'),
date: now.format('YYYY-MM-DD HH:mm')
});
@ -412,22 +442,22 @@
options.index = options.times.length - 1;
}
const initDays = () => {
options.days = [];
options.currentTime = moment(options.date).format('YYYY-MM-DD');
let now = moment(options.date).add(1, 'day');
for (let i = 0; i < 10 ; i++) {
options.days.push({
day: now.add(-1, 'day').format('DD'),
date: now.format('YYYY-MM-DD'),
})
}
options.days.reverse();
options.index = options.days.length - 1;
}
// const initDays = () => {
// options.days = [];
// options.currentTime = moment(options.date).format('YYYY-MM-DD');
//
// let now = moment(options.date).add(1, 'day');
//
// for (let i = 0; i < 10 ; i++) {
// options.days.push({
// day: now.add(-1, 'day').format('DD'),
// date: now.format('YYYY-MM-DD'),
// })
// }
//
// options.days.reverse();
// options.index = options.days.length - 1;
// }
const initHours = () => {
for (let i = 0; i < 24; i++) {
@ -445,12 +475,12 @@
activeImage(moment(time.date).hour(), moment(time.date).minute());
}
const onDayClick = (time, index) => {
options.currentTime = time.date;
options.index = index;
cancelActive();
activeContrastImage();
}
// const onDayClick = (time, index) => {
// options.currentTime = time.date;
// options.index = index;
// cancelActive();
// activeContrastImage();
// }
const cancelActive = () => {
clearTimer();
@ -501,7 +531,6 @@
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';
@ -533,7 +562,7 @@
options.index = 0;
setCurrentPlayElement(element);
}, 3000)
}, 2000)
}
const clearTimer = () => {
@ -563,7 +592,7 @@
const onChange = () => {
if(options.currentTab === 'MWR') {
initDays();
// initDays();
activeContrastImage();
} else {
initTimeLine();
@ -599,13 +628,25 @@
}
}
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'
}
})
}
return {
...toRefs(options),
onTabClick,
onRegionClick,
onElementClick,
onTimeClick,
onDayClick,
// onDayClick,
onPrevDayClick,
onNextDayClick,
onPrevImgClick,
@ -615,7 +656,8 @@
onChange,
onImageLoad,
onDownloadClick,
onSaveClick
onSaveClick,
changeColor
}
}
}
@ -626,10 +668,17 @@
.contrast-picture-container {
width: calc(~"100% - 2.5rem");
margin: 0 auto;
flex-direction: row;
align-items: center;
.picture {
width: 100%;
flex-direction: column;
:deep(.el-image) {
width: 100%;
}
:deep(.el-image__inner) {
width: 100%;
transform: scaleX(4.5);
}
.title {
padding-bottom: 0;
font-size: 0.22rem;

1
04.系统编码/Frontend/src/components/SynergyEvaluation.vue

@ -252,7 +252,6 @@
const initImage = (tabName, elementName, type, index, values) => {
post("/image/convert", {url: SynergyEvaluationConfig.getUrl(tabName, elementName, type)}).then((response: any) => {
if (response.error != 0){
console.log("发生错误")
return;
}

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

@ -166,19 +166,30 @@ img {
position: relative;
.toolbar {
padding-top: 0.25rem;
//padding-top: 0.25rem;
margin: 0 0.25rem;
display: flex;
align-items: center;
border-bottom: 1px solid #666666;
border-bottom: 1px solid #B4BFCA;
.times {
display: flex;
margin-right: 0.2rem;
align-items: center;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
background-color: #ECF4FF;
padding-bottom: 12px;
//border-left: 1px solid #666666;
//border-right: 1px solid #666666;
//background-color: #ECF4FF;
div:first-child {
span:last-child {
border-radius: 5px 0 0 5px;
}
}
div:last-child {
span:last-child {
border-radius: 0 5px 5px 0;
}
}
.time-item {
position: relative;
@ -197,39 +208,31 @@ img {
width: 0.37rem;
line-height: 0.26rem;
text-align: center;
color: #666666;
cursor: pointer;
background-color: #e6edfd;
color: #0a2e62;
font-size: 14px;
font-weight: 400;
}
}
&.active {
.time {
color: #ffffff;
background-color: #498DF0;
background-color: #5B87ED !important;
border-radius: 5px;
&::before {
display: none;
}
&::after {
content: '';
width: 0;
height: 0;
display: block;
margin-left: -0.08rem;
position: absolute;
left: 50%;
bottom: -0.08rem;
border-left: 0.08rem solid transparent;
border-right: 0.08rem solid transparent;
border-bottom: 0.08rem solid #498DF0;
}
}
}
&.first-hour {
.hour {
font-size: 0.16rem;
font-size: 0.12rem;
color: #2c70fa;
font-weight: 700;
}
&::before {
@ -239,20 +242,38 @@ img {
&:first-of-type {
.hour {
font-size: 0.16rem;
font-size: 0.12rem;
color: #2c70fa;
font-weight: 700;
}
}
}
.first-hour::before, .time-item .time::before {
content: '';
width: 1px;
height: 100%;
display: block;
position: absolute;
left: -1px;
bottom: 0;
background-color: #666666;
//.first-hour::before, .time-item .time::before {
// content: '';
// width: 1px;
// height: 100%;
// display: block;
// position: absolute;
// left: -1px;
// bottom: 0;
// background-color: #666666;
//}
}
.halfHour {
:nth-child(even) {
span.hour {
font-size: 0.12rem !important;
color: #2c70fa;
font-weight: 700;
}
}
}
.oneHour {
.hour {
font-size: 0.12rem !important;
color: #2c70fa;
font-weight: 700;
}
}
@ -344,6 +365,7 @@ img {
.time-item {
.time {
line-height: 0.46rem;
}
}
}

4
04.系统编码/Frontend/src/uilts/Config.ts

@ -2,8 +2,8 @@ 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://10.124.102.10:8002/product/picture";
public static parentUrl: string = "http://112.124.40.88:8999/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";
}

4
04.系统编码/Frontend/src/uilts/axios.ts

@ -6,8 +6,8 @@ import { ElLoading } from 'element-plus'
let loading = null;
const service = axios.create({
// baseURL:"http://112.124.40.88:8002",
baseURL: '',
// baseURL: 'http://localhost:8002',
// baseURL: '',
baseURL: 'http://localhost:8002',
timeout: 500000
})

Loading…
Cancel
Save