From c9fc948cfa3cf91c072a13787aed5cb50fb31669 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 15 Jan 2024 13:24:41 +0800
Subject: [PATCH] fix:bug修复
---
src/components/PlanMap/Map.vue | 297 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 170 insertions(+), 127 deletions(-)
diff --git a/src/components/PlanMap/Map.vue b/src/components/PlanMap/Map.vue
index 983f3b8..4ed9bab 100644
--- a/src/components/PlanMap/Map.vue
+++ b/src/components/PlanMap/Map.vue
@@ -1,12 +1,14 @@
<template>
<div class="main_body">
- <el-container
- style="height: 100%"
- >
+ <el-container style="height: 100%">
<el-container style="position: relative">
<div class="carTop">
- <el-radio-group v-model="radioSeven" size="medium" @change="changeCode">
- <el-radio-button label="PM2.5" ></el-radio-button>
+ <el-radio-group
+ v-model="radioSeven"
+ size="medium"
+ @change="changeCode"
+ >
+ <el-radio-button label="PM2.5"></el-radio-button>
<el-radio-button label="PM10"></el-radio-button>
<el-radio-button label="SO2"></el-radio-button>
<el-radio-button label="NO2"></el-radio-button>
@@ -15,21 +17,29 @@
<el-radio-button label="TVOC"></el-radio-button>
</el-radio-group>
<el-date-picker
- style="float:right;margin-right:10px;"
- @change="dateChange"
- v-model="dateValue"
- type="datetimerange"
- :picker-options="threeOptions"
- range-separator="���"
- start-placeholder="������������"
- end-placeholder="������������">
+ style="float: right; margin-right: 10px"
+ @change="dateChange"
+ v-model="dateValue"
+ type="datetimerange"
+ :picker-options="threeOptions"
+ range-separator="���"
+ start-placeholder="������������"
+ end-placeholder="������������"
+ >
</el-date-picker>
- <el-select v-model="carMacItem" clearable placeholder="������������������" style="width: 180px;display: inline-block" @change="changeCarData">
+ <el-select
+ v-model="carMacItem"
+ clearable
+ placeholder="������������������"
+ style="width: 180px; display: inline-block"
+ @change="changeCarData"
+ >
<el-option
- v-for="(item, index) in defaultData"
- :key="index"
- :label="item.name"
- :value="item.mac">
+ v-for="(item, index) in defaultData"
+ :key="index"
+ :label="item.name"
+ :value="item.mac"
+ >
</el-option>
</el-select>
</div>
@@ -47,7 +57,7 @@
var GPS = {
PI: 3.14159265358979324,
x_pi: (3.14159265358979324 * 3000.0) / 180.0,
- delta: function(lat, lon) {
+ delta: function (lat, lon) {
var a = 6378245.0 // a: ������������������������������������������������������������������
var ee = 0.00669342162296594323 // ee: ���������������������
var dLat = this.transformLat(lon - 105.0, lat - 35.0)
@@ -62,7 +72,7 @@
},
// WGS-84 to GCJ-02
- gcj_encrypt: function(wgsLat, wgsLon) {
+ gcj_encrypt: function (wgsLat, wgsLon) {
if (this.outOfChina(wgsLat, wgsLon)) {
return { lat: wgsLat, lon: wgsLon }
}
@@ -71,7 +81,7 @@
return { lat: wgsLat + d.lat, lon: wgsLon + d.lon }
},
// GCJ-02 to WGS-84
- gcj_decrypt: function(gcjLat, gcjLon) {
+ gcj_decrypt: function (gcjLat, gcjLon) {
if (this.outOfChina(gcjLat, gcjLon)) {
return { lat: gcjLat, lon: gcjLon }
}
@@ -80,7 +90,7 @@
return { lat: gcjLat - d.lat, lon: gcjLon - d.lon }
},
// GCJ-02 to WGS-84 exactly
- gcj_decrypt_exact: function(gcjLat, gcjLon) {
+ gcj_decrypt_exact: function (gcjLat, gcjLon) {
var initDelta = 0.01
var threshold = 0.000000001
var dLat = initDelta
@@ -112,7 +122,7 @@
return { lat: wgsLat, lon: wgsLon }
},
// GCJ-02 to BD-09
- bd_encrypt: function(gcjLat, gcjLon) {
+ bd_encrypt: function (gcjLat, gcjLon) {
var x = gcjLon
var y = gcjLat
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi)
@@ -122,7 +132,7 @@
return { lat: this.bdLat, lon: this.bdLon }
},
// BD-09 to GCJ-02
- bd_decrypt: function(bdLat, bdLon) {
+ bd_decrypt: function (bdLat, bdLon) {
var x = bdLon - 0.0065
var y = bdLat - 0.006
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi)
@@ -133,33 +143,33 @@
},
// WGS-84 to Web mercator
// mercatorLat -> y mercatorLon -> x
- mercator_encrypt: function(wgsLat, wgsLon) {
+ mercator_encrypt: function (wgsLat, wgsLon) {
var x = (wgsLon * 20037508.34) / 180.0
var y =
- Math.log(Math.tan(((90.0 + wgsLat) * this.PI) / 360.0)) /
- (this.PI / 180.0)
+ Math.log(Math.tan(((90.0 + wgsLat) * this.PI) / 360.0)) /
+ (this.PI / 180.0)
y = (y * 20037508.34) / 180.0
return { lat: y, lon: x }
},
// Web mercator to WGS-84
// mercatorLat -> y mercatorLon -> x
- mercator_decrypt: function(mercatorLat, mercatorLon) {
+ mercator_decrypt: function (mercatorLat, mercatorLon) {
var x = (mercatorLon / 20037508.34) * 180.0
var y = (mercatorLat / 20037508.34) * 180.0
y =
- (180 / this.PI) *
- (2 * Math.atan(Math.exp((y * this.PI) / 180.0)) - this.PI / 2)
+ (180 / this.PI) *
+ (2 * Math.atan(Math.exp((y * this.PI) / 180.0)) - this.PI / 2)
return { lat: y, lon: x }
},
// two point's distance
- distance: function(latA, lonA, latB, lonB) {
+ distance: function (latA, lonA, latB, lonB) {
var earthR = 6371000.0
var x =
- Math.cos((latA * this.PI) / 180.0) *
- Math.cos((latB * this.PI) / 180.0) *
- Math.cos(((lonA - lonB) * this.PI) / 180)
+ Math.cos((latA * this.PI) / 180.0) *
+ Math.cos((latB * this.PI) / 180.0) *
+ Math.cos(((lonA - lonB) * this.PI) / 180)
var y =
- Math.sin((latA * this.PI) / 180.0) * Math.sin((latB * this.PI) / 180.0)
+ Math.sin((latA * this.PI) / 180.0) * Math.sin((latB * this.PI) / 180.0)
var s = x + y
if (s > 1) s = 1
if (s < -1) s = -1
@@ -167,7 +177,7 @@
var distance = alpha * earthR
return distance
},
- outOfChina: function(lat, lon) {
+ outOfChina: function (lat, lon) {
if (lon < 72.004 || lon > 137.8347) {
return true
}
@@ -176,52 +186,52 @@
}
return false
},
- transformLat: function(x, y) {
+ transformLat: function (x, y) {
var ret =
- -100.0 +
- 2.0 * x +
- 3.0 * y +
- 0.2 * y * y +
- 0.1 * x * y +
- 0.2 * Math.sqrt(Math.abs(x))
+ -100.0 +
+ 2.0 * x +
+ 3.0 * y +
+ 0.2 * y * y +
+ 0.1 * x * y +
+ 0.2 * Math.sqrt(Math.abs(x))
ret +=
- ((20.0 * Math.sin(6.0 * x * this.PI) +
- 20.0 * Math.sin(2.0 * x * this.PI)) *
- 2.0) /
- 3.0
+ ((20.0 * Math.sin(6.0 * x * this.PI) +
+ 20.0 * Math.sin(2.0 * x * this.PI)) *
+ 2.0) /
+ 3.0
ret +=
- ((20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin((y / 3.0) * this.PI)) *
- 2.0) /
- 3.0
+ ((20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin((y / 3.0) * this.PI)) *
+ 2.0) /
+ 3.0
ret +=
- ((160.0 * Math.sin((y / 12.0) * this.PI) +
- 320 * Math.sin((y * this.PI) / 30.0)) *
- 2.0) /
- 3.0
+ ((160.0 * Math.sin((y / 12.0) * this.PI) +
+ 320 * Math.sin((y * this.PI) / 30.0)) *
+ 2.0) /
+ 3.0
return ret
},
- transformLon: function(x, y) {
+ transformLon: function (x, y) {
var ret =
- 300.0 +
- x +
- 2.0 * y +
- 0.1 * x * x +
- 0.1 * x * y +
- 0.1 * Math.sqrt(Math.abs(x))
+ 300.0 +
+ x +
+ 2.0 * y +
+ 0.1 * x * x +
+ 0.1 * x * y +
+ 0.1 * Math.sqrt(Math.abs(x))
ret +=
- ((20.0 * Math.sin(6.0 * x * this.PI) +
- 20.0 * Math.sin(2.0 * x * this.PI)) *
- 2.0) /
- 3.0
+ ((20.0 * Math.sin(6.0 * x * this.PI) +
+ 20.0 * Math.sin(2.0 * x * this.PI)) *
+ 2.0) /
+ 3.0
ret +=
- ((20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin((x / 3.0) * this.PI)) *
- 2.0) /
- 3.0
+ ((20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin((x / 3.0) * this.PI)) *
+ 2.0) /
+ 3.0
ret +=
- ((150.0 * Math.sin((x / 12.0) * this.PI) +
- 300.0 * Math.sin((x / 30.0) * this.PI)) *
- 2.0) /
- 3.0
+ ((150.0 * Math.sin((x / 12.0) * this.PI) +
+ 300.0 * Math.sin((x / 30.0) * this.PI)) *
+ 2.0) /
+ 3.0
return ret
},
}
@@ -250,10 +260,7 @@
dataType: 'history',
responseJSON: null,
radio1: null,
- viewOptions: [
- '������',
- '������'
- ],
+ viewOptions: ['������', '������'],
dateValue: [],
pickerOptions: {
disabledDate(time) {
@@ -424,7 +431,7 @@
webSocketView: false,
isDataList: [],
shapeLayer: null,
- carData: null,
+ carData: [],
timeDuan: 0,
isDisTime: false,
startTime: '',
@@ -433,7 +440,7 @@
sensorTime: [],
timeValue: [
new Date(2020, 1, 1, 0, 0, 0),
- new Date(2022, 12, 31, 23, 59, 59)
+ new Date(2022, 12, 31, 23, 59, 59),
],
}
},
@@ -458,7 +465,7 @@
// console.log(n)
},
deep: true,
- immediate: true
+ immediate: true,
},
mounted() {
this.getStart()
@@ -475,7 +482,7 @@
// ������������������
newTime2(timeArr) {
var arr = []
- timeArr.map(v => {
+ timeArr.map((v) => {
var date = new Date(v)
var y = date.getFullYear()
var m = date.getMonth() + 1
@@ -501,13 +508,15 @@
getCarData() {
this.$request({
url: '/cruiser/selectCruisers',
- method: 'get'
- }).then(res => {
- this.defaultData = res.data
- this.carMac = res.data[0].mac
- }).catch(err => {
- console.log(err)
+ method: 'get',
})
+ .then((res) => {
+ this.defaultData = res.data
+ this.carMac = res.data[0].mac
+ })
+ .catch((err) => {
+ console.log(err)
+ })
},
// ���������������������������������������
Rad(d) {
@@ -519,8 +528,16 @@
var radLat2 = this.Rad(lat2)
var a = radLat1 - radLat2
var b = this.Rad(lng1) - this.Rad(lng2)
- var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
- Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
+ var s =
+ 2 *
+ Math.asin(
+ Math.sqrt(
+ Math.pow(Math.sin(a / 2), 2) +
+ Math.cos(radLat1) *
+ Math.cos(radLat2) *
+ Math.pow(Math.sin(b / 2), 2)
+ )
+ )
s = s * 6378.137 // EARTH_RADIUS;
s = Math.round(s * 10000) / 10000 // ���������������
// s=s.toFixed(4);
@@ -530,9 +547,9 @@
newDate() {
var aData = new Date()
var month =
- aData.getMonth() < 9
- ? '0' + (aData.getMonth() + 1)
- : aData.getMonth() + 1
+ aData.getMonth() < 9
+ ? '0' + (aData.getMonth() + 1)
+ : aData.getMonth() + 1
var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
this.sensorDate = aData.getFullYear() + '-' + month + '-' + date
},
@@ -545,9 +562,9 @@
v = JSON.stringify(v)
str2 = v.substr(12, 8).split(':')
str2[0] =
- (str2[0] - 0 + 8) % 24 < 9
- ? '0' + ((str2[0] - 0 + 8) % 24)
- : (str2[0] - 0 + 8) % 24
+ (str2[0] - 0 + 8) % 24 < 9
+ ? '0' + ((str2[0] - 0 + 8) % 24)
+ : (str2[0] - 0 + 8) % 24
str = str2.join(':')
this.sensorTime.push(str)
})
@@ -579,33 +596,45 @@
this.map.clearOverlays()
}
this.$request({
- url: '/cruiser/cruiserTrajectory',
+ // url: '/cruiser/cruiserTrajectory',
+ url: '/uav/queryDataByBatch',
method: 'get',
+ // params: {
+ // mac: this.carMac,
+ // time1: this.sensorDate[0],
+ // time2: this.sensorDate[1],
+ // },
params: {
- mac: this.carMac,
- time1: this.sensorDate[0],
- time2: this.sensorDate[1]
- }
- }).then(res => {
- if (!res.data.length) {
+ batch: '2023-05-15 14:39:05',
+ },
+ }).then((res) => {
+ if (!res.data.vos.length) {
this.noneData = true
this.loading = false
}
- if (res.data.length) {
- this.carData = res
+ if (res.data.vos.length) {
+ console.log(12)
+ // this.carData = res
+ // console.log(JSON.parse(this.carData), 'JSON.parse(this.carData)')
+ // this.initStart(JSON.parse(this.carData))
+ for (var i = 0; i < res.data.vos.length; i++) {
+ console.log(res.data.vos[i].value)
+ this.carData.push(JSON.parse(res.data.vos[i].value))
+ }
this.initStart(this.carData)
}
})
},
// ������������������������
initStart(res) {
+ console.log(res, 'res')
this.abc += 1
const that = this
if (!res) {
return
}
if (this.dataType === 'history') {
- this.responseJSON = res.data
+ this.responseJSON = res
} else {
this.responseJSON = res
}
@@ -641,7 +670,12 @@
point.a21005 = parseFloat(value.a21005).toFixed(3)
point.a05024 = parseInt(value.a05024)
point.a99054 = parseFloat(value.a99054).toFixed(3)
- if (value.dustld - 0 !== 0 && value.dustld - 0 < 100 && (that.carMac === 'p5dnd7a0243622' || that.carMac === 'p5dnd7a0243625')) {
+ if (
+ value.dustld - 0 !== 0 &&
+ value.dustld - 0 < 100 &&
+ (that.carMac === 'p5dnd7a0243622' ||
+ that.carMac === 'p5dnd7a0243625')
+ ) {
point.dustld = 100
} else {
point.dustld = value.dustld - 0
@@ -652,7 +686,7 @@
})
that.sensor = this.sensorKey
that.viewType = this.viewKey
- that.size = 70
+ that.size = 5
that.distance = that.size / 2 / Math.sin((1 * Math.PI) / 4)
// ���������������������������������
if (!that.showPoints) {
@@ -701,7 +735,7 @@
// drawStartAndEnd() // ���������������������
function draw(sensor, type, carMac) {
var levels = getGrading(sensor, type, carMac)
- $.each(levels, function(index, value) {
+ $.each(levels, function (index, value) {
var color = value.color
var data = value.data
if (data.length > 0) {
@@ -720,7 +754,7 @@
})
that.map.setDefaultCursor('default')
if (type === '2D') {
- $.each(that.showPoints, function(item, point) {
+ $.each(that.showPoints, function (item, point) {
setLabelStyle(point[sensor], point)
})
}
@@ -728,7 +762,7 @@
// ���������������������������������
function drawPolygon(sensor) {
- $.each(that.showPoints, function(item, point) {
+ $.each(that.showPoints, function (item, point) {
var sw = getPoint(225, point.lng, point.lat, that.distance)
var ne = getPoint(45, point.lng, point.lat, that.distance)
var data = point[sensor]
@@ -741,7 +775,12 @@
new BMapGL.Point(ne.lng, ne.lat), // ���������
new BMapGL.Point(sw.lng, ne.lat), // ���������
],
- { strokeWeight: 0.5, strokeOpacity: 0.0, fillColor: color, fillOpacity: 1 }
+ {
+ strokeWeight: 0.5,
+ strokeOpacity: 0.0,
+ fillColor: color,
+ fillOpacity: 1,
+ }
)
that.map.addOverlay(polygon)
// ���������������label������
@@ -778,7 +817,7 @@
function drawLine() {
var data = []
var points = []
- $.each(trackPoints, function(index, value) {
+ $.each(trackPoints, function (index, value) {
var point = []
point.push(value['lng'], value['lat'])
points.push(point)
@@ -817,6 +856,7 @@
}
if (flag) {
points.push(point1)
+ console.log(points, 'points')
}
}
return points
@@ -832,14 +872,14 @@
lng = (lng / 180) * Math.PI
lat = (lat / 180) * Math.PI
lng =
- lng +
- Math.atan2(
- Math.sin(angle) * Math.sin(ra) * Math.cos(lat),
- Math.cos(ra) - Math.sin(lat) * Math.sin(lat)
- ) // Math.atan2()������������������������������������������������x, y���������������0, 0���������������X���������������������������
+ lng +
+ Math.atan2(
+ Math.sin(angle) * Math.sin(ra) * Math.cos(lat),
+ Math.cos(ra) - Math.sin(lat) * Math.sin(lat)
+ ) // Math.atan2()������������������������������������������������x, y���������������0, 0���������������X���������������������������
lat = Math.asin(
Math.sin(lat) * Math.cos(ra) +
- Math.cos(lat) * Math.sin(ra) * Math.cos(angle)
+ Math.cos(lat) * Math.sin(ra) * Math.cos(angle)
)
// ���������������10���������������
lng = (lng * 180) / Math.PI
@@ -874,7 +914,7 @@
level5.color = '#99004c'
level6.color = '#7e0023'
- $.each(that.showPoints, function(index, value) {
+ $.each(that.showPoints, function (index, value) {
var sw = getPoint(225, value.lng, value.lat, that.distance)
var ne = getPoint(45, value.lng, value.lat, that.distance)
var polygon = []
@@ -1178,10 +1218,11 @@
// point���������label������
function setLabelStyle(content, point) {
- var label = new BMapGL.Label("<span class='my-maptip'>" + content + '<br /><span>', // ���lable������������
+ var label = new BMapGL.Label(
+ "<span class='my-maptip'>" + content + '<br /><span>', // ���lable������������
{
offset: new BMapGL.Size(-8, -10), // label������������������������label������������������������
- position: point
+ position: point,
} // label���������
)
var offsetSize = new BMapGL.Size(0, 0)
@@ -1205,18 +1246,20 @@
// ������������,������������������
function showNoPoints() {
that.map.centerAndZoom('���������', 17)
- setTimeout(function() {
+ setTimeout(function () {
document.getElementById('cpm').style.display = 'block'
document.getElementById('data').style.display = 'none'
}, 250)
}
// ������������������������
- that.map.addEventListener('zoomend', function() {
+ that.map.addEventListener('zoomend', function () {
// ���������������������������������������
var zoom = that.map.getZoom()
$('span.my-maptip').parent()[zoom <= 15.5 ? 'hide' : 'show']()
- $('span.my-maptip').parent().css('font-size', 30 - zoom)
+ $('span.my-maptip')
+ .parent()
+ .css('font-size', 30 - zoom)
})
// var that = this
@@ -1301,7 +1344,7 @@
margin: 0;
z-index: 0;
font-size: 14px;
- font-family: "������������";
+ font-family: '������������';
}
.main_body {
@@ -1324,7 +1367,7 @@
margin-top: -50px;
z-index: 11;
color: #000000;
- border: 2px solid #FF7F50;
+ border: 2px solid #ff7f50;
font-size: 28px;
line-height: 100px;
text-align: center;
@@ -1417,8 +1460,8 @@
border-right: 1px solid #aaa;
}
-.carTop{
- &>.left:nth-child(1){
+.carTop {
+ & > .left:nth-child(1) {
border-radius: 5px 0 0 5px;
}
}
--
Gitblit v1.8.0