From 13906d0efa0d3411ee5cd4f01d086a56632ee74d Mon Sep 17 00:00:00 2001
From: guoshipeng <3194674006@qq.com>
Date: Mon, 07 Nov 2022 15:21:00 +0800
Subject: [PATCH] 郭世朋提交走航车监测日报页面
---
src/components/Wind/Map.vue | 895 +++++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 799 insertions(+), 96 deletions(-)
diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue
index 82cbea8..efe002a 100644
--- a/src/components/Wind/Map.vue
+++ b/src/components/Wind/Map.vue
@@ -11,7 +11,7 @@
v-for="(item, index) in params"
:key="index"
class="left"
- :class="{ click: changeColor == index }"
+ :class="{ click: changeColor === index }"
@click="change(index)"
>{{ item }}</span>
<!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->
@@ -22,8 +22,179 @@
<img class="drop-icon" :src="turnImg" alt="" @click="turnState">
</span>
</div>
+ <div class="topDate" style="height: 60px">
+ <div class="jdt" id="eventPro">
+ <div class="mouseDiv">
+ <span class="inText"></span>
+ <div class="sjDiv"></div>
+ </div>
+ <div class="mouseDiv2">
+ <span class="inText2"></span>
+ <div class="sjDiv2"></div>
+ </div>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ </div>
+ <div class="timeDiv" style="position: relative">
+ <ul id="timeUl">
+ <li style="width: 0.83%"></li>
+ <li></li>
+ <li></li>
+ <li>03</li>
+ <li></li>
+ <li></li>
+ <li>06</li>
+ <li></li>
+ <li></li>
+ <li>09</li>
+ <li></li>
+ <li></li>
+ <li>12</li>
+ <li></li>
+ <li></li>
+ <li>15</li>
+ <li></li>
+ <li></li>
+ <li>18</li>
+ <li></li>
+ <li></li>
+ <li>21</li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <!-- -->
+ <li></li>
+ <li></li>
+ <li>03</li>
+ <li></li>
+ <li></li>
+ <li>06</li>
+ <li></li>
+ <li></li>
+ <li>09</li>
+ <li></li>
+ <li></li>
+ <li>12</li>
+ <li></li>
+ <li></li>
+ <li>15</li>
+ <li></li>
+ <li></li>
+ <li>18</li>
+ <li></li>
+ <li></li>
+ <li>21</li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <!-- -->
+ <li></li>
+ <li></li>
+ <li>03</li>
+ <li></li>
+ <li></li>
+ <li>06</li>
+ <li></li>
+ <li></li>
+ <li>09</li>
+ <li></li>
+ <li></li>
+ <li>12</li>
+ <li></li>
+ <li></li>
+ <li>15</li>
+ <li></li>
+ <li></li>
+ <li>18</li>
+ <li></li>
+ <li></li>
+ <li>21</li>
+ <li></li>
+ <li></li>
+ </ul>
+ <div style="display: flex;width: 100%; border-top: 1px solid rgba(255,255,255,0.5)" class="dayDiv">
+ <p class="p1"></p>
+ <p style="position: relative">
+ <span class="borderLine" style="position: absolute; left: 0; border-left: 1px solid rgba(255,255,255,1); height: 47px; bottom: 0"></span>
+ <span class="p2"></span>
+ <span class="borderLine" style="position: absolute;right: 0; border-right: 1px solid rgba(255,255,255,1); height: 47px; bottom: 0"></span>
+ </p>
+ <p class="p3"></p>
+ </div>
+ </div>
+ </div>
<regional-overview :key="timerKey" :map="map" :show-flag="showOrHidden" />
- <div :style="{ background: 'url(' + bg + ')' }" class="buttom-left" />
+ <div :style="{ background: 'url(' + bg + ') no-repeat' }" class="buttom-left" />
<el-dialog
title="������������������"
:visible.sync="alarmTableVisible"
@@ -233,7 +404,10 @@
turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
showOrHidden: true,
dateFormat: '',
- alarmTableVisible: false
+ alarmTableVisible: false,
+ chooseTimeInfo: false, // ������������������������
+ dateInfo: '', // ���������������
+ timeInfo: '' // ���������������
}
},
computed: {
@@ -253,6 +427,9 @@
this.$Bus.$on('alarmTableVisible', res => this.alarmTableVisible = res)
// ���������������������
this.initMap()
+
+ // ������������
+ this.eventProxy()
},
created() {
const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // ���������������������������������
@@ -283,6 +460,163 @@
}
},
methods: {
+ // ������������������������������
+ getDayXQ(day) {
+ var days = new Date().getDay() // ������
+ var rq = '' // ������
+ if (day === 'today') {
+ rq = this.newData(0)
+ } else if (day === 'yesterday') {
+ days = ((days + 7) - 1) % 7
+ rq = this.newData(-1) // ������������
+ } else if (day === 'beforeYea') {
+ days = ((days + 7) - 2) % 7
+ rq = this.newData(-2) // ������������
+ }
+ switch (days) {
+ case 1:
+ days = '������'
+ break
+ case 2:
+ days = '������'
+ break
+ case 3:
+ days = '������'
+ break
+ case 4:
+ days = '������'
+ break
+ case 5:
+ days = '������'
+ break
+ case 6:
+ days = '������'
+ break
+ case 0:
+ days = '������'
+ break
+ }
+ return `${rq}(${days})`
+ },
+ // ������������������������������������������
+ newData(day) {
+ var today = new Date()
+ var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
+ today.setTime(targetday_milliseconds)
+ var tMonth = today.getMonth() + 1
+ tMonth = tMonth < 10 ? '0' + tMonth : tMonth
+ var tDate = today.getDate()
+ tDate = tDate < 10 ? '0' + tDate : tDate
+ return tMonth + '/' + tDate
+ },
+ // ������������
+ eventProxy() {
+ // ������������������������������
+ var ul = document.querySelector('#eventPro')
+ var lis = document.querySelectorAll('#eventPro>li')
+ var timeUl = document.querySelector('#timeUl')
+ var timeLis = document.querySelectorAll('#timeUl>li')
+ var mouseDiv = document.querySelector('.mouseDiv')
+ var mouseDiv2 = document.querySelector('.mouseDiv2')
+ var inText = document.querySelector('.inText')
+ var inText2 = document.querySelector('.inText2')
+ var p1 = document.querySelector('.p1')
+ var p2 = document.querySelector('.p2')
+ var p3 = document.querySelector('.p3')
+ p3.innerHTML = this.getDayXQ('today')
+ p2.innerHTML = this.getDayXQ('yesterday')
+ p1.innerHTML = this.getDayXQ('beforeYea')
+ var greenInfo = 0
+ 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') {
+ // 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.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)
+ } else {
+ console.log(333)
+ }
+ break
+ }
+ }
+ }
+ }
+ // timeUl������������������
+ timeUl.onclick = e => {
+ // ������������li���������������������
+ var target = e.target
+ if (target.tagName.toLowerCase() === 'li') {
+ 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.display = 'block'
+ var times = i % 24
+ times = times > 9 ? times : '0' + times
+ inText2.innerHTML = times + ':00'
+ 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)'
+ }
+ }
+ }
+ // console.log('���������������������', greenInfo, 'index')
+ }
+ }
+ // ������������������������
+ 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.display = 'block'
+ var times = (i - 0 + 1) % 24
+ times = times > 9 ? times : '0' + times
+ inText.innerHTML = times + ':00'
+ // console.log(mouseDiv)
+ }
+ lis[i].onmouseleave = function() {
+ mouseDiv.style.display = 'none'
+ // console.log('������������', i)
+ }
+ }
+ 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.display = 'block'
+ var times = i % 24
+ times = times > 9 ? times : '0' + times
+ inText.innerHTML = times + ':00'
+ // console.log(mouseDiv)
+ }
+ timeLis[i].onmouseleave = function() {
+ mouseDiv.style.display = 'none'
+ // console.log('������������', i)
+ }
+ }
+ },
// ���������������������
currentHour() {
const aData = new Date()
@@ -497,7 +831,7 @@
var gg_lat = z * Math.sin(theta)
return [gg_lat, gg_lng]
},
- // ������������������
+ // ������������������,���������
deviceMaker() {
// ������������������
if (this.map) {
@@ -521,97 +855,375 @@
// console.log('���������������������')
// console.log(data)
that.loading = false
- var keyData = data.data.devices
- this.keyData = data.data.devices
- // ���������������������
- this.stateControlStation()
- var group = L.layerGroup().addTo(this.map)
- this.keys = []
- for (let i = 0; i < keyData.length; i++) {
- if (keyData[i].a34002) {
- this.keys.push(Math.floor(JSON.parse(keyData[i].a34002)))
- } else if (keyData[i].a34004) {
- this.keys.push(Math.floor(JSON.parse(keyData[i].a34004)))
- } else if (keyData[i].a21026) {
- this.keys.push(Math.floor(JSON.parse(keyData[i].a21026)))
- } else if (keyData[i].a21004) {
- this.keys.push(Math.floor(JSON.parse(keyData[i].a21004)))
- } else if (keyData[i].a21005) {
- this.keys.push(JSON.parse(keyData[i].a21005).toFixed(3))
- } else if (keyData[i].a05024) {
- this.keys.push(Math.floor(JSON.parse(keyData[i].a05024)))
- } else if (keyData[i].a99054) {
- this.keys.push(JSON.parse(keyData[i].a99054).toFixed(3))
- } else {
- // for (let j = 0; j < keyData.length; j++) {
- this.keys.push(JSON.parse('null'))
- // }
- }
- // console.log(this.keys)
- var lat = keyData[i].latitude
- this.lats[i] = keyData[i].latitude
- var lng = keyData[i].longitude
- this.lngs[i] = keyData[i].longitude
-
- var blueIcon = L.icon({
- iconUrl: require('@/assets/icon/ico' + keyData[i].state + '.png'),
- iconSize: [60, 60],
- iconAnchor: [13, 21],
- className: 'my-device'
- })
- // ���������������������
- L.marker([lat, lng], {
- icon: blueIcon
- }).addTo(group)
- // console.log(JSON.parse(this.keys[i]))
- var myIcon = L.divIcon({
- html: this.keys[i],
- className: 'my-div-icon',
- iconSize: 30
- })
- var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)
- // ������������������������������������mouseover���������������
- 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) => {
- // var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')
- // // console.log(data)
- // this.bindPopup(data).openPopup()
- // })
- _this.$request({
- url: '/historyFiveMinutely/queryPopDataByMac',
- method: 'get',
- params: {
- mac: keyData[i].mac
- }
- }).then((res) => {
- for (const key in res.data) {
- var tempDecimal = res.data[key].replace(/[^\d.]/g, '').split('.')[1]
- if (key !== '������' && key !== '������') {
- // if (Number(tempDecimal) === 0) {
- // res.data[key] = parseInt(res.data[key]) + res.data[key].split(' ')[1]
- // } else {
- // res.data[key] = Number(res.data[key].split(' ')[0]).toFixed(2) + res.data[key].split(' ')[1]
- // }
- var num = res.data[key].split(' ')[0]
- res.data[key] = (num - 0).toFixed(3)
- }
- }
- var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')
- this.bindPopup(data).openPopup()
- }).catch((err) => {
- console.log(err)
- })
- })
- // ������������������������������������
- marker.on('mouseout', function(e) {
- this.noneData = false
- this.bindPopup().closePopup()
- })
- }
+ this.markDeviceSite(data)
})
},
+ // ���������������
+ markDeviceSite(data) {
+ var keyData = data.data.devices
+ this.keyData = data.data.devices
+ // ���������������������
+ this.stateControlStation()
+ var group = L.layerGroup().addTo(this.map)
+ this.keys = []
+ for (let i = 0; i < keyData.length; i++) {
+ if (keyData[i].a34002) {
+ this.keys.push(Math.floor(JSON.parse(keyData[i].a34002)))
+ } else if (keyData[i].a34004) {
+ this.keys.push(Math.floor(JSON.parse(keyData[i].a34004)))
+ } else if (keyData[i].a21026) {
+ this.keys.push(Math.floor(JSON.parse(keyData[i].a21026)))
+ } else if (keyData[i].a21004) {
+ this.keys.push(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)))
+ } else if (keyData[i].a21005) {
+ this.keys.push(JSON.parse(keyData[i].a21005).toFixed(3))
+ } else if (keyData[i].a05024) {
+ this.keys.push(Math.floor(JSON.parse(keyData[i].a05024)))
+ } else if (keyData[i].a99054) {
+ this.keys.push(JSON.parse(keyData[i].a99054).toFixed(3))
+ } else {
+ // for (let j = 0; j < keyData.length; j++) {
+ this.keys.push(JSON.parse('null'))
+ // }
+ }
+ // console.log(this.keys)
+ var lat = keyData[i].latitude
+ this.lats[i] = keyData[i].latitude
+ var lng = keyData[i].longitude
+ this.lngs[i] = keyData[i].longitude
+ // ������������key������������������������������������������������
+ var colorNum = 7
+ if (keyData[i].a34002) {
+ var data = Math.floor(JSON.parse(keyData[i].a34002))
+ switch (true) {
+ case (data < 0): {
+ colorNum = 7
+ break
+ }
+ case (data === 0): {
+ colorNum = 0
+ break
+ }
+ case (data <= 50): {
+ colorNum = 1
+ break
+ }
+ case (data <= 150): {
+ colorNum = 2
+ break
+ }
+ case (data <= 250): {
+ colorNum = 3
+ break
+ }
+ case (data <= 350): {
+ colorNum = 4
+ break
+ }
+ case (data <= 420): {
+ colorNum = 5
+ break
+ }
+ case (data > 420): {
+ colorNum = 6
+ break
+ }
+ default:
+ break
+ }
+ } else if (keyData[i].a34004) {
+ var data = Math.floor(JSON.parse(keyData[i].a34004))
+ switch (true) {
+ case data < 0: {
+ colorNum = 7
+ break
+ }
+ case data === 0: {
+ colorNum = 0
+ break
+ }
+ case data <= 35: {
+ colorNum = 1
+ break
+ }
+ case data <= 75: {
+ colorNum = 2
+ break
+ }
+ case data <= 115: {
+ colorNum = 3
+ break
+ }
+ case data <= 150: {
+ colorNum = 4
+ break
+ }
+ case data <= 250: {
+ colorNum = 5
+ break
+ }
+ case data > 250: {
+ colorNum = 6
+ break
+ }
+ default:
+ break
+ }
+ } else if (keyData[i].a21026) {
+ var data = Math.floor(JSON.parse(keyData[i].a21026))
+ switch (true) {
+ case data < 0: {
+ colorNum = 7
+ break
+ }
+ case data === 0: {
+ colorNum = 0
+ break
+ }
+ case data <= 50: {
+ colorNum = 1
+ break
+ }
+ case data <= 150: {
+ colorNum = 2
+ break
+ }
+ case data <= 475: {
+ colorNum = 3
+ break
+ }
+ case data <= 800: {
+ colorNum = 4
+ break
+ }
+ case data <= 1600: {
+ colorNum = 5
+ break
+ }
+ case data > 1600: {
+ colorNum = 6
+ break
+ }
+ default:
+ break
+ }
+ } else if (keyData[i].a21004) {
+ var data = Math.floor(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)))
+ switch (true) {
+ case data < 0: {
+ colorNum = 7
+ break
+ }
+ case data === 0: {
+ colorNum = 0
+ break
+ }
+ case data <= 40: {
+ colorNum = 1
+ break
+ }
+ case data <= 80: {
+ colorNum = 2
+ break
+ }
+ case data <= 180: {
+ colorNum = 3
+ break
+ }
+ case data <= 280: {
+ colorNum = 4
+ break
+ }
+ case data <= 565: {
+ colorNum = 5
+ break
+ }
+ case data > 565: {
+ colorNum = 6
+ break
+ }
+ default:
+ break
+ }
+ } else if (keyData[i].a21005) {
+ var data = JSON.parse(keyData[i].a21005).toFixed(3)
+ switch (true) {
+ case data < 0: {
+ colorNum = 7
+ break
+ }
+ case data === 0: {
+ colorNum = 0
+ break
+ }
+ case data <= 2: {
+ colorNum = 1
+ break
+ }
+ case data <= 4: {
+ colorNum = 2
+ break
+ }
+ case data <= 14: {
+ colorNum = 3
+ break
+ }
+ case data <= 24: {
+ colorNum = 4
+ break
+ }
+ case data <= 36: {
+ colorNum = 5
+ break
+ }
+ case data > 36: {
+ colorNum = 6
+ break
+ }
+ default:
+ break
+ }
+ } else if (keyData[i].a05024) {
+ var data = Math.floor(JSON.parse(keyData[i].a05024))
+ switch (true) {
+ case data < 0: {
+ colorNum = 7
+ break
+ }
+ case data === 0: {
+ colorNum = 0
+ break
+ }
+ case data <= 160: {
+ colorNum = 1
+ break
+ }
+ case data <= 200: {
+ colorNum = 2
+ break
+ }
+ case data <= 300: {
+ colorNum = 3
+ break
+ }
+ case data <= 400: {
+ colorNum = 4
+ break
+ }
+ case data <= 800: {
+ colorNum = 5
+ break
+ }
+ case data > 800: {
+ colorNum = 6
+ break
+ }
+ default:
+ break
+ }
+ } else if (keyData[i].a99054) {
+ var data = JSON.parse(keyData[i].a99054).toFixed(3)
+ switch (true) {
+ case data < 0: {
+ colorNum = 7
+ break
+ }
+ case data === 0: {
+ colorNum = 0
+ break
+ }
+ case data <= 0.5: {
+ colorNum = 1
+ break
+ }
+ case data <= 1: {
+ colorNum = 2
+ break
+ }
+ case data <= 1.5: {
+ colorNum = 3
+ break
+ }
+ case data <= 2: {
+ colorNum = 4
+ break
+ }
+ case data <= 3: {
+ colorNum = 5
+ break
+ }
+ case data > 3: {
+ colorNum = 6
+ break
+ }
+ // default:
+ // break
+ }
+ }
+
+ var blueIcon = L.icon({
+ iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),
+ // iconUrl: require('@/assets/icon/ico2.png'),
+ iconSize: [60, 60],
+ iconAnchor: [13, 21],
+ className: 'my-device'
+ })
+ // ���������������������
+ L.marker([lat, lng], {
+ icon: blueIcon
+ }).addTo(group)
+ // console.log(JSON.parse(this.keys[i]))
+ var myIcon = L.divIcon({
+ html: this.keys[i],
+ className: 'my-div-icon',
+ iconSize: 30
+ })
+ var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)
+ // ������������������������������������mouseover���������������
+ 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) => {
+ // var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')
+ // // console.log(data)
+ // this.bindPopup(data).openPopup()
+ // })
+ _this.$request({
+ url: '/historyFiveMinutely/queryPopDataByMac',
+ method: 'get',
+ params: {
+ mac: keyData[i].mac
+ }
+ }).then((res) => {
+ for (const key in res.data) {
+ var tempDecimal = res.data[key].replace(/[^\d.]/g, '').split('.')[1]
+ if (key !== '������' && key !== '������') {
+ if (Number(tempDecimal) === 0) {
+ res.data[key] = parseInt(res.data[key]) + res.data[key].split(' ')[1]
+ } else {
+ res.data[key] = Number(res.data[key].split(' ')[0]).toFixed(2) + res.data[key].split(' ')[1]
+ }
+ // var num = res.data[key].split(' ')[0]
+ // res.data[key] = (num - 0).toFixed(3)
+ }
+ }
+ var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')
+ this.bindPopup(data).openPopup()
+ }).catch((err) => {
+ console.log(err)
+ })
+ })
+ // ������������������������������������
+ marker.on('mouseout', function(e) {
+ this.noneData = false
+ this.bindPopup().closePopup()
+ })
+ }
+ },
+ // ������������������������������������
+ // moveInAndOut() {
+ //
+ // },
// ������������������
stateControlStation() {
// this.$axios.get('monitorPoint/queryStateControlStation', {
@@ -749,6 +1361,9 @@
this.timer = setInterval(() => {
this.times--
if (this.times === 0) {
+ // ���������������������������
+ var mouseDiv2 = document.querySelector('.mouseDiv2')
+ mouseDiv2.style.display = 'none'
// clearInterval(this.timer)
if (this.windState === 1) {
// this.ws.close()
@@ -787,6 +1402,7 @@
this.map = map // data���������������
window.map = map
},
+ // ������������������������
change(index) {
this.changeColor = index
var pr = ''
@@ -999,15 +1615,102 @@
/* border-radius: 10px; */
border: 2px solid #ff7f50;
}
+.topDate {
+ position: absolute;
+ top: 50px;
+ width: 100%;
+ padding: 15px 10px 3px 10px;
+ z-index: 999;
+ //background: #ccc;
+ background: rgba(204, 204, 204, 0.8);
+ box-shadow: 1px 1px 5px #666;
+ cursor: pointer;
+}
+.mouseDiv, .mouseDiv2{
+ position: absolute;
+ left: 0;
+ background-color: #009845;
+ width: 36px;
+ height: 22px;
+ border-radius: 5px;
+ top: -34px;
+ display: none;
+ text-align: center;
+ line-height: 22px;
+ padding: 1px;
+ color: white;
+}
+.sjDiv, .sjDiv2{
+ width: 0px;
+ height: 0px;
+ border: 10px solid transparent;
+ border-top-color: #009845;
+ position: absolute;
+ left: 0;
+ right: 0;
+ margin: auto;
+ top: 100%;
+ z-index: -1;
+}
+.mouseDiv2{
+ background-color: #2b2b2b;
+}
+.sjDiv2{
+ border-top-color: #2b2b2b;
+}
+.jdt{
+ height: 5px;
+ width: 73%;
+ display: flex;
+ position: relative;
+}
+.timeDiv{
+ width: 73%;
+ float: left;
+}
+.topDate .timeDiv:nth-child(3){
+ border-left: 1px solid white;
+ border-right: 1px solid white;
+}
+.topDate ul{
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: flex;
+}
+.topDate li{
+ width: 1.36986%;
+ //padding: 0 2%;
+ box-sizing: border-box;
+ //transform: translateX(50%);
+}
+.topDate p{
+ text-align: center;
+ font-size: 16px;
+ margin: 0;
+ padding: 0;
+}
+.jdt li{
+ //box-sizing: border-box;
+ border-left: 1px solid white;
+ background-color: rgba(0,0,0,0.3);
+ height: 100%;
+ width: 1.36986%;
+ list-style: none;
+}
+.dayDiv p{
+ width: 32.87664%;
+ text-align: center;
+}
.top {
position: absolute;
- top: 0;
+ top: 0px;
width: 100%;
padding: 5px 10px;
z-index: 999;
/* background: #ccc; */
background: rgba(204, 204, 204, 0.5);
- box-shadow: 1px 1px 5px #666;
+ //box-shadow: 1px 1px 5px #666;
}
.top > .left {
padding: 5px 10px;
@@ -1129,7 +1832,7 @@
bottom: 10px;
left: 10px;
width: 435px;
- height: 50px;
+ height: 36px;
z-index: 999;
border-radius: 3px;
}
--
Gitblit v1.8.0