From aedfd334e94d4f6dc02a7538b24f50ceed6dd01f Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Tue, 10 Oct 2023 08:40:29 +0800
Subject: [PATCH] Merge branch 'feature_1.0'
---
src/components/Wind/Map.vue | 575 +++++++++++++++++++++++++++++++--------------------------
1 files changed, 314 insertions(+), 261 deletions(-)
diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue
index 1f6858f..d9d8111 100644
--- a/src/components/Wind/Map.vue
+++ b/src/components/Wind/Map.vue
@@ -13,8 +13,7 @@
class="left"
:class="{ click: changeColor === index }"
@click="change(index)"
- >{{ item }}</span
- >
+ >{{ item }}</span>
<!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->
<span class="right">{{ times }}���</span>
<span class="dropDown">
@@ -23,170 +22,170 @@
:src="require('@/assets/images/regionalOverview/realTimeImg.png')"
alt=""
@click="turnState"
- />
+ >
<span class="text_Time">{{ dateFormat }}</span>
- <img class="drop-icon" :src="turnImg" alt="" @click="turnState" />
+ <img class="drop-icon" :src="turnImg" alt="" @click="turnState">
</span>
</div>
<div class="topDate" style="height: 60px">
- <div class="jdt" id="eventPro">
+ <div id="eventPro" class="jdt">
<div class="mouseDiv">
- <span class="inText"></span>
- <div class="sjDiv"></div>
+ <span class="inText" />
+ <div class="sjDiv" />
</div>
<div class="mouseDiv2">
- <span class="inText2"></span>
- <div class="sjDiv2"></div>
+ <span class="inText2" />
+ <div class="sjDiv2" />
</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>
+ <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 style="width: 0.83%" />
+ <li />
+ <li />
<li>03</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>06</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>09</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>12</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>15</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>18</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>21</li>
- <li></li>
- <li></li>
- <li></li>
+ <li />
+ <li />
+ <li />
<!-- -->
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>03</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>06</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>09</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>12</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>15</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>18</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>21</li>
- <li></li>
- <li></li>
- <li></li>
+ <li />
+ <li />
+ <li />
<!-- -->
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>03</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>06</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>09</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>12</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>15</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>18</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>21</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>00</li>
</ul>
<div
@@ -197,7 +196,7 @@
"
class="dayDiv"
>
- <p class="p1"></p>
+ <p class="p1" />
<p style="position: relative">
<span
class="borderLine"
@@ -208,8 +207,8 @@
height: 47px;
bottom: 0;
"
- ></span>
- <span class="p2"></span>
+ />
+ <span class="p2" />
<span
class="borderLine"
style="
@@ -219,9 +218,9 @@
height: 47px;
bottom: 0;
"
- ></span>
+ />
</p>
- <p class="p3"></p>
+ <p class="p3" />
</div>
</div>
</div>
@@ -264,9 +263,10 @@
:value="item.value"
/>
</el-select>
- <el-button type="primary" @click="alertData(PageSize, currentPage)"
- >������</el-button
- >
+ <el-button
+ type="primary"
+ @click="alertData(PageSize, currentPage)"
+ >������</el-button>
</div>
</div>
<el-table
@@ -314,9 +314,10 @@
@current-change="handleCurrentChange"
/>
<div slot="footer" class="dialog-footer">
- <el-button size="mini" @click="alarmTableVisible = false"
- >��� ���</el-button
- >
+ <el-button
+ size="mini"
+ @click="alarmTableVisible = false"
+ >��� ���</el-button>
</div>
</el-dialog>
</div>
@@ -339,7 +340,7 @@
weidu: Number,
jingdu: Number,
monitorPointId: Number,
- monitorPointIds: Array,
+ monitorPointIds: Array
},
data() {
return {
@@ -388,70 +389,70 @@
factorOptions: [
{
label: '������������',
- value: 'all',
+ value: 'all'
},
{
label: 'PM10',
- value: 'PM10',
+ value: 'PM10'
},
{
label: 'PM2.5',
- value: 'PM2.5',
+ value: 'PM2.5'
},
{
label: 'SO2',
- value: 'SO2',
+ value: 'SO2'
},
{
label: 'NO2',
- value: 'NO2',
+ value: 'NO2'
},
{
label: 'CO',
- value: 'CO',
+ value: 'CO'
},
{
label: 'O3',
- value: 'O3',
- },
+ value: 'O3'
+ }
],
alertOptions: [
{
label: '������������������',
- value: 'all',
+ value: 'all'
},
{
label: '������',
- value: 'overrun',
+ value: 'overrun'
},
{
label: '���������',
- value: 'sudden',
+ value: 'sudden'
},
{
label: '������������������100%',
- value: 'state100',
+ value: 'state100'
},
{
label: '������������������150%',
- value: 'state150',
+ value: 'state150'
},
{
label: '������������������250%',
- value: 'state250',
+ value: 'state250'
},
{
label: '������������������100%',
- value: 'city100',
+ value: 'city100'
},
{
label: '������������������150%',
- value: 'city150',
+ value: 'city150'
},
{
label: '������������������250%',
- value: 'city250',
- },
+ value: 'city250'
+ }
],
currentDate: '',
turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
@@ -463,10 +464,11 @@
dateInfo: '', // ���������������
timeInfo: '', // ���������������
nyr: '', // ������������������
+ windAllDate: []
}
},
computed: {
- ...mapGetters(['regionCode']),
+ ...mapGetters(['regionCode'])
},
watch: {
dateValue(n, o) {
@@ -475,11 +477,20 @@
},
regionCode(newCode, oldCode) {
this.timerKey = newCode // ������������code���������������������������
- },
+ }
},
mounted() {
+ this.$nextTick(() => {
+ this.getParamsData()
+ })
this.currentHour()
- this.$Bus.$on('alarmTableVisible', (res) => (this.alarmTableVisible = res))
+ this.$Bus.$on(
+ 'alarmTableVisible',
+ (res) => (
+ (this.alarmTableVisible = res),
+ this.alertData(this.PageSize, this.currentPage)
+ )
+ )
// ���������������������
this.initMap()
@@ -491,12 +502,12 @@
this.jingduNew = newLL[1]
this.weiduNew = newLL[0]
// ���������������������
- this.windData()
- this.change(0)
- this.getParamsData()
+ // this.windData()
+ // this.change(0)
+
this.windDir()
this.newDate()
- this.alertData(this.PageSize, this.currentPage)
+ // this.alertData(this.PageSize, this.currentPage)
},
beforeDestroy() {
if (this.timer) {
@@ -676,7 +687,7 @@
}
// ������������������������
for (let i = 0; i < lis.length; i++) {
- lis[i].onmouseenter = function () {
+ lis[i].onmouseenter = function() {
// console.log('mouseenter', i)
// mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
mouseDiv.style.transform = 'translateX(-50%)'
@@ -687,13 +698,13 @@
inText.innerHTML = times + ':00'
// console.log(mouseDiv)
}
- lis[i].onmouseleave = function () {
+ lis[i].onmouseleave = function() {
mouseDiv.style.display = 'none'
// console.log('������������', i)
}
}
for (let i = 0; i < timeLis.length; i++) {
- timeLis[i].onmouseenter = function () {
+ timeLis[i].onmouseenter = function() {
// console.log('mouseenter', i)
// mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
mouseDiv.style.left = 1.36986 * i + '%'
@@ -704,7 +715,7 @@
inText.innerHTML = times + ':00'
// console.log(mouseDiv)
}
- timeLis[i].onmouseleave = function () {
+ timeLis[i].onmouseleave = function() {
mouseDiv.style.display = 'none'
// console.log('������������', i)
}
@@ -989,7 +1000,7 @@
deviceMaker() {
// ������������������
if (this.map) {
- this.map.eachLayer(function (layer) {
+ this.map.eachLayer(function(layer) {
// ���������������������������
if (
!layer._container &&
@@ -1009,11 +1020,11 @@
organizationId: this.$store.state.orgId,
regionCode: this.$store.state.regionCode,
chooseTime: this.chooseTime,
- time: this.nyr,
- },
+ time: this.nyr
+ }
}).then((data) => {
// console.log('���������������������')
- console.log(data,'tata')
+ console.log(data, 'tata')
that.loading = false
this.markDeviceSite(data)
})
@@ -1334,23 +1345,24 @@
iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),
// iconUrl: require('@/assets/icon/ico2.png'),
iconSize: [60, 60],
- iconAnchor: [13, 21],
- className: 'my-device',
+ iconAnchor: [30, 48],
+ className: 'my-device'
})
// ���������������������
L.marker([lat, lng], {
- icon: blueIcon,
+ 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,
+ iconSize: [60, 60],
+ iconAnchor: [40, 40]
})
var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)
// ������������������������������������mouseover���������������
var _this = this
- marker.on('mouseover', function (e) {
+ marker.on('mouseover', function(e) {
this.noneData = false
// $.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, '')
@@ -1364,10 +1376,15 @@
params: {
mac: keyData[i].mac,
chooseTime: _this.chooseTime,
- time: _this.nyr,
- },
+ time: _this.nyr
+ }
})
.then((res) => {
+ if (res.message == '���������������������') {
+ var datafalse = '���������������������'
+ this.bindPopup(datafalse).openPopup()
+ return
+ }
for (const key in res.data) {
var tempDecimal = res.data[key]
.replace(/[^\d.]/g, '')
@@ -1395,7 +1412,7 @@
})
})
// ������������������������������������
- marker.on('mouseout', function (e) {
+ marker.on('mouseout', function(e) {
this.noneData = false
this.bindPopup().closePopup()
})
@@ -1413,8 +1430,8 @@
method: 'get',
params: {
regionCode: 130900,
- sensorCode: 'a34002',
- },
+ sensorCode: 'a34002'
+ }
})
.then((res) => {
// console.log('���������������')
@@ -1429,19 +1446,19 @@
// iconUrl:require('@/assets/images/tl_PM10.png'),
iconSize: [55, 55],
iconAnchor: [13, 21],
- className: 'my-device',
+ className: 'my-device'
})
// ���������������������
L.marker([glat, glng], {
- icon: gIcon,
+ icon: gIcon
}).addTo(group)
var myIcon = L.divIcon({
html: gkData[i].data,
className: 'my-div-icon-g',
- iconSize: 30,
+ iconSize: 30
})
L.marker([glat, glng], {
- icon: myIcon,
+ icon: myIcon
}).addTo(group)
}
})
@@ -1473,7 +1490,7 @@
// const that = this
// ������������������
if (this.map) {
- this.map.eachLayer(function (layer) {
+ this.map.eachLayer(function(layer) {
// ���������������������������
if (
!layer._container &&
@@ -1510,7 +1527,7 @@
this.getParamsData()
setTimeout(() => {
$.getJSON(
- 'http://47.99.64.149:8080/screen_api_v2/screen/windAndDeviceDataByArea',
+ 'http://47.99.64.149:8080/api/screen_api_v2/screen/windAndDeviceDataByArea',
{ monitorPointId: this.$store.state.monitorPointId },
(data) => {
// ������������������
@@ -1527,14 +1544,14 @@
}
)
}, 1000)
- if (this.windState === 1) {
- // this.ws.close()
- this.initData()
- // console.log('���������������')
- } else if (this.windState === 2) {
- this.windDir()
- // console.log('���������������')
- }
+ // if (this.windState === 1) {
+ // console.log('getRegionApiRequest')
+ // this.initData()
+ // console.log('���������������')
+ // } else if (this.windState === 2) {
+ // this.windDir()
+ // console.log('���������������')
+ // }
// ������������������
// this.deviceMaker()
// this.getParamsData()
@@ -1549,6 +1566,7 @@
// ������������������������
getParamsData() {
clearInterval(this.timer)
+ this.change(this.changeColor)
this.timer = setInterval(() => {
this.currentHour()
this.times--
@@ -1569,21 +1587,32 @@
}
// console.log(this.chooseTimeInfo, 'this.chooseTimeInfo ')
// clearInterval(this.timer)
- if (this.windState === 1) {
- // this.ws.close()
- this.initData()
- // console.log('���������������')
- } else if (this.windState === 2) {
- this.windDir()
- // console.log('���������������')
- }
- setTimeout(() => {
- this.change(this.changeColor)
- this.times = 300
- }, 100)
+ // if (this.windState === 1) {
+ // this.ws.close()
+ // this.initData()
+ // console.log('���������������')
+ // } else if (this.windState === 2) {
+ // this.windDir()
+ // console.log('���������������')
+ // }
}
}, 1000)
},
+
+ findLayer(layerName) { // ������������������������������
+ if (!this.map) {
+ return null
+ }
+ const gisMap_layers = this.map._layers
+ let layer = null
+ for (const i in gisMap_layers) {
+ if (gisMap_layers[i].options.id === layerName) {
+ layer = gisMap_layers[i]
+ }
+ }
+ return layer
+ },
+
// ���������������������
initMap() {
// console.log('������index������map������������')
@@ -1594,9 +1623,13 @@
maxZoom: 18,
center: [this.weiduNew, this.jingduNew],
zoom: 14,
- zoomControl: false, // ������������
- attributionControl: false, // ���������������logol
- crs: L.CRS.EPSG3857, // ���������������������EPSG3857���������������������EPSG3395������������������������ EPSG4326 WGS84
+ zoomControl: true, // ������������
+ trackResize: true,
+ worldCopyJump: true,
+ dragging: true,
+ inertia: true,
+ attributionControl: true, // ���������������logol
+ crs: L.CRS.EPSG3857 // ���������������������EPSG3857���������������������EPSG3395������������������������ EPSG4326 WGS84
})
// ������������������
L.tileLayer(
@@ -1605,11 +1638,26 @@
// L.tileLayer(
// 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
// ).addTo(map)
+ const that = this
this.map = map // data���������������
+
+ this.map.on('moveend', function(ev) {
+ const res = that.findLayer('wmsid')
+ that.map.removeLayer(res)
+ that.openWindCanves()
+ })
+ // this.map.on('viewreset', function() {
+ // console.log('--->viewreset ���������������������')
+ // })
window.map = map
},
// ������������������������
change(index) {
+ if (this.windState === 1) {
+ this.initData()
+ } else if (this.windState === 2) {
+ this.windDir()
+ }
this.changeColor = index
var pr = ''
switch (index) {
@@ -1645,11 +1693,6 @@
this.sensorKey = pr
// ������������������
// this.toggleWindState()
- if (this.windState === 1) {
- this.initData()
- } else if (this.windState === 2) {
- this.windDir()
- }
},
// ���������������������
initData() {
@@ -1659,7 +1702,7 @@
// console.log(this.monitorPointId)
// ������������������
if (this.map) {
- this.map.eachLayer(function (layer) {
+ this.map.eachLayer(function(layer) {
// ���������������������������
if (
!layer._container &&
@@ -1670,11 +1713,11 @@
}
})
}
+ this.windData()
this.deviceMaker()
// console.log('������������������')
// $.ajaxSettings.async = false
// for (let i = 0; i < this.monitorPointIds.length; i++) {
- this.windData()
// }
},
// ���������������
@@ -1685,10 +1728,12 @@
params: {
monitorPointIds: this.monitorPointIds.toString(),
chooseTime: this.chooseTime,
- time: this.nyr,
- },
+ time: this.nyr
+ }
})
.then((res) => {
+ this.windAllDate = res.data[0]
+ this.openWindCanves()
// console.log('���������������')
// console.log(res)
// if (res.data[0][0].data.length === 0) {
@@ -1704,44 +1749,47 @@
// data2[0].header.dy = 0.0018464922
// data2[1].header.dy = 0.0018464922
// console.log(data2, 'data2')
- var velocityLayer = L.velocityLayer({
- displayValues: false, // ���������������������������������������������������
- displayOptions: {
- // ������������������
- // velocityType: 'Global Wind',
- velocityType: 'GBR Wind',
- displayPosition: 'bottomleft',
- displayEmptyString: 'No wind data',
- },
- data: res.data[0], // ������ ���������������
- // data: data2,
- // ������������������������������������������
- minVelocity: 0, // ��������������������� m/s ���
- maxVelocity: 8, // ��������������������� m/s ���
- velocityScale: 0.1, // ��������������� ( ������������������������ )
- particleAge: 90, // ������������������������������������������
- lineWidth: 1.5, // ���������������������
- particleMultiplier: 1 / 300, // ��������������������� ������������ ���
- frameRate: 15, // ���������������������
- colorScale: [
- '#A2D839',
- '#7EB530',
- '#6E9F26',
- '#4E7522',
- '#345B1B',
- '#186303',
- '#175103',
- '#053F03',
- ],
- // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
- })
- velocityLayer.addTo(this.map) // ���������������
// console.log('������������')
// console.log(res.data[0])
})
.catch((err) => {
console.log(err)
})
+ },
+ openWindCanves() {
+ var velocityLayer = L.velocityLayer({
+ displayValues: true, // ���������������������������������������������������
+ id: 'wmsid',
+ displayOptions: {
+ // ������������������
+ // velocityType: 'Global Wind',
+ velocityType: 'GBR Wind',
+ displayPosition: 'bottomleft',
+ displayEmptyString: 'No wind data'
+ },
+ data: this.windAllDate, // ������ ���������������
+ // data: data2,
+ // ������������������������������������������
+ minVelocity: 0, // ��������������������� m/s ���
+ maxVelocity: 8, // ��������������������� m/s ���
+ velocityScale: 0.1, // ��������������� ( ������������������������ )
+ particleAge: 90, // ������������������������������������������
+ lineWidth: 1.5, // ���������������������
+ particleMultiplier: 1 / 300, // ��������������������� ������������ ���
+ frameRate: 15, // ���������������������
+ colorScale: [
+ '#A2D839',
+ '#7EB530',
+ '#6E9F26',
+ '#4E7522',
+ '#345B1B',
+ '#186303',
+ '#175103',
+ '#053F03'
+ ]
+ // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
+ })
+ velocityLayer.addTo(this.map) // ���������������
},
// ������������������������������������������������������������������
alertData(n1, n2) {
@@ -1758,8 +1806,8 @@
startTime: this.dateValue[0],
endTime: this.dateValue[1],
index: this.factorValue,
- alarmType: this.alartValue,
- },
+ alarmType: this.alartValue
+ }
}).then((res) => {
// console.log('������������')
// console.log(res)
@@ -1820,8 +1868,8 @@
},
closeAlarmTableVisible() {
this.$store.state.alarmTableVisible = false
- },
- },
+ }
+ }
}
</script>
@@ -2112,4 +2160,9 @@
background-color: #ff0000 !important;
color: #790000 !important;
}
+.leaflet-marker-icon.leaflet-interactive {
+ pointer-events: auto;
+ margin-left: -45px;
+ margin-top: -40px;
+}
</style>
--
Gitblit v1.8.0