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

收拾收拾

master
hehongxing 3 years ago
parent
fc649e688c
commit
106e3a24a7
2 changed files with 59 additions and 67 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. 8
      04.系统编码/Frontend/src/App.vue
  2. 118
      04.系统编码/Frontend/src/components/RamanLidar.vue

8
04.系统编码/Frontend/src/App.vue
View File

@ -19,9 +19,9 @@
onMounted(() => {
getRem(1920, 100);
window.onresize = () => getRem(1920, 100);
window.onbeforeunload = () => {
clear()
}
// window.onbeforeunload = () => {
// clear()
// }
})
watch(() => router.currentRoute.value.path,
@ -36,8 +36,6 @@
html.style.fontSize = oWidth / pwidth*prem + "px";
}
return {showHeader}
}
}

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

@ -21,11 +21,10 @@
</div>
</div>
<div class="container panel">
<div class="toolbar">
<div class="toolbar raman-toolbar">
<div class="times">
<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="minute" @click="onTimeClick(time, index)">{{time.minute}}</span>
<div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}">
<span class="minute" @click="onTimeClick(time, index)">{{time.day}}</span>
</div>
</div>
<el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker" @change="onChange">
@ -34,16 +33,6 @@
<span @click="onPrevDayClick"><img src="/images/prev.png" /></span>
<span @click="onNextDayClick"><img src="/images/next.png" /></span>
</div>
<el-select v-model="currentHour" @change="onChange">
<el-option
v-for="item in hours"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<p class="unit">时</p>
<div class="refresh-btn" @click="onRefreshClick">
<img src="/images/refresh.png" />
</div>
@ -98,9 +87,7 @@ import { post } from '../uilts/axios';
currentRegion: 'jiangning',
currentElement: 'lidar-ratio',
currentType: '激光雷达比',
date: moment('2021-11-01').format('YYYY-MM-DD'),
currentHour: '10',
hours: [],
date: moment('2021-08-21').format('YYYY-MM-DD'),
times: [],
currentTime: null,
imgUrl: '/images/default-picture.png',
@ -113,38 +100,38 @@ import { post } from '../uilts/axios';
})
onMounted(() => {
initHours();
initTimeLine();
setTitle(moment(options.date, 'YYYY-MM-DD').hour(parseInt(options.currentHour)));
setTitle(moment(options.date, 'YYYY-MM-DD'));
setTimeout(() => {
activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute());
activeImage();
}, 50);
})
const onRegionClick = (region) => {
options.currentRegion = region;
options.date = options.currentTime;
cancelActive();
setTitle(moment(options.date).hour(parseInt(options.currentHour)));
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
setTitle(moment(options.date));
activeImage();
}
const onElementClick = (element, type) => {
options.currentElement = element;
options.currentType = type
options.currentType = type;
options.date = options.currentTime;
cancelActive();
setTitle(moment(options.date).hour(parseInt(options.currentHour)));
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
setTitle(moment(options.date));
activeImage();
}
const setTitle = (date) => {
options.title = date.format('YYYY.MM.DD HH:mm') + ' ' + options.currentType;
options.title = date.format('YYYY.MM.DD') + ' ' + options.currentType;
}
const activeImage = (hour, minute) => {
let time = moment(options.date).hour(hour).minute(minute);
options.imgUrl = RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time);
const activeImage = () => {
options.imgUrl = RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, moment(options.currentTime, 'YYYY-MM-DD'));
options.srcList = [options.imgUrl];
}
@ -220,44 +207,29 @@ import { post } from '../uilts/axios';
const initTimeLine = () => {
options.times = [];
options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm');
options.currentTime = moment(options.date).format('YYYY-MM-DD');
let now = moment(options.date).hour(parseInt(options.currentHour) - 2);
let minute = now.minute();
const remainder = minute % 6;
if (remainder > 0){
now.minute(minute + (6 - remainder));
}
now.minute(now.minute() - 6);
let now = moment(options.date).add(1, 'day');
for (let i = 0; i < 21 ; i++) {
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')
});
day: now.add(-1, 'day').format('DD'),
date: now.format('YYYY-MM-DD'),
})
}
options.times.reverse();
options.index = options.times.length - 1;
}
const initHours = () => {
for (let i = 0; i < 23; i++) {
options.hours.push({
value: i,
label: i < 10 ? '0' + i : i,
})
}
}
const onTimeClick = (time, index) => {
options.currentTime = time.date;
options.date = time.date;
options.index = index;
cancelActive();
setTitle(moment(time.date, 'YYYY-MM-DD HH:mm'));
activeImage(moment(time.date).hour(), moment(time.date).minute());
setTitle(moment(time.date, 'YYYY-MM-DD'));
activeImage();
}
const cancelActive = () => {
@ -266,7 +238,18 @@ import { post } from '../uilts/axios';
}
const onPrevDayClick = () => {
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD')
let element = getCurrentElement();
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
options.currentTime = options.date;
options.index--;
if (options.index < 0) {
options.index = element.childElementCount - 1;
options.date = options.times[options.times.length - 1].date
}
cancelActive();
setCurrentPlayElement(element)
}
const onNextDayClick = () => {
@ -274,7 +257,6 @@ import { post } from '../uilts/axios';
}
const onPrevImgClick = () => {
console.log(options.index);
let element = getCurrentElement();
options.index--;
@ -296,9 +278,8 @@ import { post } from '../uilts/axios';
const onRefreshClick = () => {
cancelActive();
options.date = moment('2021-11-01').format('YYYY-MM-DD');
options.date = moment('2021-08-21').format('YYYY-MM-DD');
options.currentTime = options.times[options.times.length - 1];
options.currentHour = '10';
}
const onPlayClick = () => {
@ -339,14 +320,14 @@ import { post } from '../uilts/axios';
element.children[options.index].classList.add('active');
options.currentTime = options.times[options.index].date;
setTitle(moment(options.times[options.index].date, 'YYYY-MM-DD HH:mm'));
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
setTitle(moment(options.times[options.index].date, 'YYYY-MM-DD'));
activeImage();
}
const onChange = () => {
initTimeLine();
setTitle(moment(options.date).hour(parseInt(options.currentHour)));
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
setTitle(moment(options.date));
activeImage();
}
return {
@ -368,4 +349,17 @@ import { post } from '../uilts/axios';
}
</script>
<style lang="less" scoped>
.main {
.container {
.raman-toolbar {
.times {
.time-item {
.minute {
line-height: 0.46rem;
}
}
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save