@@ -40,14 +40,8 @@
起止时间:
-
+
@@ -64,16 +58,14 @@
-
+
+ :prop="i.columnKey">
-
{{ scope.row[i.columnKey] }}
@@ -82,7 +74,7 @@
+ layout="prev, pager, next" @current-change="currentChange">
@@ -94,7 +86,7 @@
-
+
{{ i.deviceName }}
设备编号:
@@ -112,46 +104,30 @@
- 继续加载
+ 继续加载
-
-
+
-
+
{{
- parseTime(scope.row.ts, '{y}-{m}-{d}')
+ parseTime(scope.row.ts, '{y}-{m}-{d}')
+ }}
+
+
+
+
+ {{
+ parseTime(scope.row.ts, '{h}:{i}:{s}')
}}
-
-
- {{
- parseTime(scope.row.ts, '{h}:{i}:{s}')
- }}
-
+
-
-
-
+
@@ -169,6 +145,11 @@ import {
} from '@/utils/coordtransform'
let map = null
+let startMarker = null
+let endMarker = null
+let polyline1 = []
+let startMarkerhs = 0
+let endMarkerhs = 0
let maptext = null
let mapMarker = null
let flag = true
@@ -176,8 +157,8 @@ export default {
components: {},
data() {
return {
- mapOffset:0,
- mapTotal:0,
+ mapOffset: 0,
+ mapTotal: 0,
vh: document.documentElement.offsetHeight / 100,
topData: {},
bottomData: [],
@@ -225,6 +206,16 @@ export default {
});
map.add(polyline);
},
+ setPolyline1(e) {
+ polyline1 && map.remove(polyline1);
+ polyline1 = new AMap.Polyline({
+ path: e,
+ strokeColor:'#000',
+ strokeWeight:10,
+ borderWeight: 2, // 线条宽度,默认为 1
+ });
+ map.add(polyline1);
+ },
setMarker(e, i) {
let marker = new AMap.Marker({
position: e, // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
@@ -232,18 +223,62 @@ export default {
offset: new AMap.Pixel(-2.5, -2.5),
content: `
`
});
+ marker.on('click', (e) => {
+ let markers = map.getAllOverlays('marker')
+ if (!startMarker) {
+ startMarker = new AMap.Marker({
+ position: [e.lnglat.KL, e.lnglat.kT], // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
+ title: `信息\n经度:${e.lnglat.KL}\n纬度:${e.lnglat.kT}\n时间:${i}`,
+ offset: new AMap.Pixel(-10, -10),
+ content: `
起
`
+ });
+ map.add(startMarker);
+ startMarkerhs = e.target.hS
+ } else if (!endMarker) {
+ endMarker = new AMap.Marker({
+ position: [e.lnglat.KL, e.lnglat.kT], // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
+ title: `信息\n经度:${e.lnglat.KL}\n纬度:${e.lnglat.kT}\n时间:${i}`,
+ offset: new AMap.Pixel(-10, -10),
+ content: `
止
`
+ });
+ map.add(endMarker);
+ endMarkerhs = e.target.hS
+ let markersData = markers.map(v => {
+ if (v.hS >= startMarkerhs && v.hS <= endMarkerhs) {
+ return v
+ } else {
+ return null
+ }
+ }).filter(res => res)
+ this.setPolyline1(markersData.map(v => {
+ return v._position
+ }))
+ } else if (endMarker && startMarker) {
+ startMarkerhs = e.target.hS
+ map.remove(endMarker)
+ endMarker = null
+ map.remove(startMarker)
+ startMarker = new AMap.Marker({
+ position: [e.lnglat.KL, e.lnglat.kT], // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
+ title: `信息\n经度:${e.lnglat.KL}\n纬度:${e.lnglat.kT}\n时间:${i}`,
+ offset: new AMap.Pixel(-10, -10),
+ content: `
起
`
+ });
+ map.add(startMarker);
+ }
+ })
map.add(marker);
},
setMarkerSharding(e) {
let sum = e.length
let nowNum = 0
- e.forEach(v => {
- this.setMarker([v.longitude, v.latitude], v.ts)
- })
- this.setPolyline(e.map(e => {
- return [e.longitude, e.latitude]
- }))
- flag && map.setFitView()
+ e.forEach(v => {
+ this.setMarker([v.longitude, v.latitude], v.ts)
+ })
+ this.setPolyline(e.map(e => {
+ return [e.longitude, e.latitude]
+ }))
+ flag && map.setFitView()
// let fun = () => {
// setTimeout(() => {
// let arr = e.splice(nowNum * 20, (nowNum + 1) * 20)
@@ -275,26 +310,26 @@ export default {
},
setStyle(e) {
if (e.rowIndex % 2 === 0) {
- return {textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba'}
+ return { textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba' }
} else {
- return {textAlign: 'center', backgroundColor: '#063468', color: '#05aaba'}
+ return { textAlign: 'center', backgroundColor: '#063468', color: '#05aaba' }
}
},
async setDeviceInfo() {
- const {data} = await getDeviceInfo(this.deviceId)
+ const { data } = await getDeviceInfo(this.deviceId)
this.topData = data || {}
if (this.topData.gpsFlag !== '1') {
this.date = null
}
},
- async setHistoryData(isTable=true) {
- if(isTable){
- this.isMap = false
- map.clearMap()
- this.show = false
- this.mapOffset = 0
+ async setHistoryData(isTable = true) {
+ if (isTable) {
+ this.isMap = false
+ map.clearMap()
+ this.show = false
+ this.mapOffset = 0
}
- const {data} = await getHistoryData({
+ const { data } = await getHistoryData({
"sceneId": this.$store.getters.sceneId,
"deviceId": this.deviceId,
deviceModeId: this.deviceModeId,
@@ -335,7 +370,7 @@ export default {
}
},
async setLinkDevices() {
- const {data} = await getLinkDevices(this.deviceId)
+ const { data } = await getLinkDevices(this.deviceId)
this.bottomData = data
},
mapTableChange(e) {
@@ -355,11 +390,11 @@ export default {
map.add(maptext);
map.add(mapMarker);
- map.setFitView([maptext,mapMarker])
+ map.setFitView([maptext, mapMarker])
flag = false
console.log(e)
},
- continueMap(){
+ continueMap() {
this.mapOffset += 1
this.setHistoryData(false)
}
@@ -398,43 +433,47 @@ export default {
background-color: #FFF0 !important;
}
- /deep/ .el-table th.el-table__cell.is-leaf, {
- border-color: #0000;
- }
+ /deep/ .el-table th.el-table__cell.is-leaf,
+ {
+ border-color: #0000;
+}
- /deep/ .el-table::before, .el-table--group::after, .el-table--border::after {
- background-color: #0000;
- }
+/deep/ .el-table::before,
+.el-table--group::after,
+.el-table--border::after {
+ background-color: #0000;
+}
- /deep/ .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
- background-color: #0000;
- }
+/deep/ .el-table .el-table__header-wrapper th,
+.el-table .el-table__fixed-header-wrapper th {
+ background-color: #0000;
+}
- /deep/ .el-collapse-item__header {
- background-color: #0000;
- border-color: #0000;
- height: auto;
- }
+/deep/ .el-collapse-item__header {
+ background-color: #0000;
+ border-color: #0000;
+ height: auto;
+}
- /deep/ .el-collapse {
- border-color: #0000;
- }
+/deep/ .el-collapse {
+ border-color: #0000;
+}
- /deep/ .el-table td.el-table__cell {
- border-color: #0000;
- }
+/deep/ .el-table td.el-table__cell {
+ border-color: #0000;
+}
- /deep/ .el-table .el-table__header-wrapper th {
- color: #05ecf3;
- }
+/deep/ .el-table .el-table__header-wrapper th {
+ color: #05ecf3;
+}
- /deep/ .el-table .current-row {
- color: #000;
- }
+/deep/ .el-table .current-row {
+ color: #000;
+}
- /deep/ .el-table .el-table__row:hover {
- color: #000;
- }
+/deep/ .el-table .el-table__row:hover {
+ color: #000;
+}
}