From e4bdde0126e1d922456c270626bac312df27912f Mon Sep 17 00:00:00 2001
From: guoshipeng <3194674006@qq.com>
Date: Thu, 05 Jan 2023 16:24:29 +0800
Subject: [PATCH] 风场时间段选择，空气质量报告模板修改
---
src/components/Wind/Map.vue | 128 +++++++++++++++++++++++++++++++-----------
1 files changed, 95 insertions(+), 33 deletions(-)
diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue
index c4ec3fa..38234f8 100644
--- a/src/components/Wind/Map.vue
+++ b/src/components/Wind/Map.vue
@@ -181,6 +181,7 @@
<li>21</li>
<li></li>
<li></li>
+ <li>00</li>
</ul>
<div style="display: flex;width: 100%; border-top: 1px solid rgba(255,255,255,0.5)" class="dayDiv">
<p class="p1"></p>
@@ -407,8 +408,10 @@
dateFormat: '',
alarmTableVisible: false,
chooseTimeInfo: false, // ������������������������
+ chooseTime: false,
dateInfo: '', // ���������������
- timeInfo: '' // ���������������
+ timeInfo: '', // ���������������
+ nyr: '', // ������������������
}
},
computed: {
@@ -499,16 +502,21 @@
}
return `${rq}(${days})`
},
- // ������������������������������������������
- newData(day) {
+ // ���������������������������������������
+ newData(day, info) {
var today = new Date()
- var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
+ var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
today.setTime(targetday_milliseconds)
+ var tYear = today.getFullYear()
var tMonth = today.getMonth() + 1
tMonth = tMonth < 10 ? '0' + tMonth : tMonth
var tDate = today.getDate()
tDate = tDate < 10 ? '0' + tDate : tDate
- return tMonth + '/' + tDate
+ if (info === 'nyr') {
+ return tYear + '-' + tMonth + '-' + tDate
+ } else {
+ return tMonth + '/' + tDate
+ }
},
// ������������
eventProxy() {
@@ -528,35 +536,47 @@
p2.innerHTML = this.getDayXQ('yesterday')
p1.innerHTML = this.getDayXQ('beforeYea')
var greenInfo = 0
+ var that = this
ul.onclick = (e) => {
- // ������������li���������������������
- for (let i = 0; i < lis.length; i++) {
- lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
- }
var target = e.target
if (target.tagName.toLowerCase() === 'li') {
+ // ������������li���������������������
+ for (let i = 0; i < lis.length; i++) {
+ lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
+ }
// var li = this.querySelectorAll('li')
// var index = Array.prototype.indexOf.call(li, target)
for (let i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = 'green'
if (lis[i] === target) {
- mouseDiv2.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
+ // mouseDiv2.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
+ mouseDiv2.style.left = (1.36986 * (i + 1)) + '%'
+ mouseDiv2.style.transform = 'translateX(-50%)'
mouseDiv2.style.display = 'block'
var times = (i - 0 + 1) % 24
times = times > 9 ? times : '0' + times
inText2.innerHTML = times + ':00'
this.chooseTimeInfo = true // ���������������
- if (i / 24 < 1) {
- console.log(111)
- } else if (i / 24 <= 2 && i / 24 > 1) {
- console.log(222)
+ this.chooseTime = true // ���������������
+ if ((i + 1) / 24 < 1) {
+ this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
+ console.log(111, this.nyr)
+ } else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) {
+ this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
+ console.log(222, this.nyr)
+ } else if ((i + 1) / 24 < 3 && (i + 1) / 24 >= 2) {
+ this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
+ console.log(333, this.nyr)
} else {
- console.log(333)
+ this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
+ console.log(444, this.nyr)
}
break
}
}
}
+ that.times = 1
+ that.getParamsData()
}
// timeUl������������������
timeUl.onclick = e => {
@@ -566,31 +586,50 @@
for (let i = 0; i < timeLis.length; i++) {
if (timeLis[i] === target) {
greenInfo = i
- mouseDiv2.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
+ // mouseDiv2.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
+ mouseDiv2.style.left = (1.36986 * i) + '%'
+ mouseDiv2.style.transform = 'translateX(-50%)'
mouseDiv2.style.display = 'block'
var times = i % 24
times = times > 9 ? times : '0' + times
inText2.innerHTML = times + ':00'
+ this.chooseTimeInfo = true // ���������������
+ this.chooseTime = true // ���������������
+ if (i / 24 < 1) {
+ this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
+ console.log(111, this.nyr)
+ } else if (i / 24 < 2 && i / 24 >= 1) {
+ this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
+ console.log(222, this.nyr)
+ } else if (i / 24 < 3 && i / 24 >= 2) {
+ this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
+ console.log(333, this.nyr)
+ } else {
+ this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
+ console.log(444, this.nyr)
+ }
break
}
}
- if (greenInfo !== 0) {
- for (let i = 0; i < lis.length; i++) {
- if (i < greenInfo) {
- lis[i].style.backgroundColor = 'green'
- } else {
- lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
- }
+ for (let i = 0; i < lis.length; i++) {
+ if (i < greenInfo) {
+ lis[i].style.backgroundColor = 'green'
+ } else {
+ lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
}
}
// console.log('���������������������', greenInfo, 'index')
}
+ that.times = 1
+ that.getParamsData()
}
// ������������������������
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseenter = function() {
// console.log('mouseenter', i)
- mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
+ // mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
+ mouseDiv.style.transform = 'translateX(-50%)'
+ mouseDiv.style.left = (1.36986 * (i + 1)) + '%'
mouseDiv.style.display = 'block'
var times = (i - 0 + 1) % 24
times = times > 9 ? times : '0' + times
@@ -605,7 +644,9 @@
for (let i = 0; i < timeLis.length; i++) {
timeLis[i].onmouseenter = function() {
// console.log('mouseenter', i)
- mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
+ // mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
+ mouseDiv.style.left = (1.36986 * i) + '%'
+ mouseDiv.style.transform = 'translateX(-50%)'
mouseDiv.style.display = 'block'
var times = i % 24
times = times > 9 ? times : '0' + times
@@ -897,7 +938,9 @@
params: {
sensorCode: this.sensorKey,
organizationId: this.$store.state.orgId,
- regionCode: this.$store.state.regionCode
+ regionCode: this.$store.state.regionCode,
+ chooseTime: this.chooseTime,
+ time: this.nyr
}
}).then((data) => {
// console.log('���������������������')
@@ -1233,7 +1276,7 @@
var _this = this
marker.on('mouseover', function(e) {
this.noneData = false
- // $.getJSON('http://47.99.64.149:8080/historyFiveMinutely/queryPopDataByMac', { 'mac': keyData[i].mac }, (res) => {
+ // $.getJSON('http://47.99.64.149:8080/historyFiveMinutely/queryPopDataByMac', { 'mac': keyData[i].mac, chooseTime: this.chooseTime, time: this.nyr }, (res) => {
// var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')
// // console.log(data)
// this.bindPopup(data).openPopup()
@@ -1242,7 +1285,9 @@
url: '/historyFiveMinutely/queryPopDataByMac',
method: 'get',
params: {
- mac: keyData[i].mac
+ mac: keyData[i].mac,
+ chooseTime: _this.chooseTime,
+ time: _this.nyr
}
}).then((res) => {
for (const key in res.data) {
@@ -1412,8 +1457,20 @@
this.times--
if (this.times === 0) {
// ���������������������������
- var mouseDiv2 = document.querySelector('.mouseDiv2')
- mouseDiv2.style.display = 'none'
+ if (!this.chooseTimeInfo) {
+ var mouseDiv2 = document.querySelector('.mouseDiv2')
+ mouseDiv2.style.display = 'none'
+ var lis = document.querySelectorAll('#eventPro>li')
+ for (let i = 0; i < lis.length; i++) {
+ lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
+ }
+ this.chooseTime = false
+ // console.log('rgb000')
+ } else {
+ this.chooseTimeInfo = false
+ // console.log('else')
+ }
+ // console.log(this.chooseTimeInfo, 'this.chooseTimeInfo ')
// clearInterval(this.timer)
if (this.windState === 1) {
// this.ws.close()
@@ -1516,7 +1573,9 @@
url: '/monitorPoint/getWindData',
method: 'get',
params: {
- monitorPointIds: JSON.stringify(this.monitorPointIds[0])
+ monitorPointIds: JSON.stringify(this.monitorPointIds[0]),
+ chooseTime: this.chooseTime,
+ time: this.nyr
}
}).then(res => {
// console.log('���������������')
@@ -1722,12 +1781,12 @@
}
.jdt{
height: 5px;
- width: 73%;
+ width: 100%;
display: flex;
position: relative;
}
.timeDiv{
- width: 73%;
+ width: 100%;
float: left;
}
.topDate .timeDiv:nth-child(3){
@@ -1759,6 +1818,9 @@
height: 100%;
width: 1.36986%;
list-style: none;
+ position: relative;
+ left: 0;
+ top: 0;
}
.dayDiv p{
width: 32.87664%;
--
Gitblit v1.8.0