| | |
| | | <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>
|
| | |
| | | dateFormat: '',
|
| | | alarmTableVisible: false,
|
| | | chooseTimeInfo: false, // 是否选择了时间点
|
| | | chooseTime: false,
|
| | | dateInfo: '', // 选择的日期
|
| | | timeInfo: '' // 选择的时间
|
| | | timeInfo: '', // 选择的时间
|
| | | nyr: '', // 选择的年月日
|
| | | }
|
| | | },
|
| | | computed: {
|
| | |
| | | }
|
| | | 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() {
|
| | |
| | | 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 => {
|
| | |
| | | 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
|
| | |
| | | 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
|
| | |
| | | },
|
| | | // 当前小时默认值
|
| | | currentHour() {
|
| | | // const aData = new Date()
|
| | | // const month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1
|
| | | // const date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
|
| | | // const hour = aData.getHours() <= 9 ? '0' + aData.getHours() - 1 : aData.getHours() - 1
|
| | | // const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'
|
| | | // this.dateFormat = currentDate.toString()
|
| | | const aData = new Date()
|
| | | const month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1
|
| | | const date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
|
| | | const hour = aData.getHours() <= 9 ? '0' + aData.getHours() - 1 : aData.getHours() - 1
|
| | | const date = aData.getDate() < 10 ? '0' + aData.getDate() : aData.getDate()
|
| | | const hour = aData.getHours() |
| | | const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'
|
| | | this.dateFormat = currentDate.toString()
|
| | | },
|
| | |
| | | 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('五分钟设备数据')
|
| | |
| | | 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()
|
| | |
| | | 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) {
|
| | |
| | | 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()
|
| | |
| | | url: '/monitorPoint/getWindData',
|
| | | method: 'get',
|
| | | params: {
|
| | | monitorPointIds: JSON.stringify(this.monitorPointIds[0])
|
| | | monitorPointIds: this.monitorPointIds.toString(),
|
| | | chooseTime: this.chooseTime,
|
| | | time: this.nyr
|
| | | }
|
| | | }).then(res => {
|
| | | // console.log('新风场数据')
|
| | |
| | | }
|
| | | .jdt{
|
| | | height: 5px;
|
| | | width: 73%;
|
| | | width: 100%;
|
| | | display: flex;
|
| | | position: relative;
|
| | | }
|
| | | .timeDiv{
|
| | | width: 73%;
|
| | | width: 100%;
|
| | | float: left;
|
| | | }
|
| | | .topDate .timeDiv:nth-child(3){
|
| | |
| | | height: 100%;
|
| | | width: 1.36986%;
|
| | | list-style: none;
|
| | | position: relative;
|
| | | left: 0;
|
| | | top: 0;
|
| | | }
|
| | | .dayDiv p{
|
| | | width: 32.87664%;
|