|
@@ -1,18 +1,21 @@
|
|
<template>
|
|
<template>
|
|
- <div style="width: 100%; height: 800px">
|
|
|
|
|
|
+ <div :style="{width: '100%', height:mainAreaHeight+'px'}">
|
|
<div v-if="mapUrl">
|
|
<div v-if="mapUrl">
|
|
<iframe v-bind:src="mapUrl" frameborder="0" style="width: 100%; height: 100%"></iframe>
|
|
<iframe v-bind:src="mapUrl" frameborder="0" style="width: 100%; height: 100%"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div v-else>
|
|
<div v-else>
|
|
- <baidu-map v-if="isShow" style="height: 800px" :center="center" :zoom="zoom" scroll-wheel-zoom @ready="handler" @click="clickMap">
|
|
|
|
|
|
+ <baidu-map v-if="isShow" class="map" :style="{height: mainAreaHeight+'px'}" :center="center" :zoom="zoom" scroll-wheel-zoom @ready="handler"
|
|
|
|
+ @click="clickMap">
|
|
<bm-control>
|
|
<bm-control>
|
|
<div style="margin: 20px">
|
|
<div style="margin: 20px">
|
|
<el-tooltip class="item" effect="dark" :content="$t('tcpType.LOCATION')" placement="right-start">
|
|
<el-tooltip class="item" effect="dark" :content="$t('tcpType.LOCATION')" placement="right-start">
|
|
- <el-button type="success" icon="el-icon-location-outline" :disabled="disable" circle plain @click="changeType(0)"></el-button>
|
|
|
|
|
|
+ <el-button type="success" icon="el-icon-location-outline" :disabled="disable" circle plain
|
|
|
|
+ @click="changeType(0)"></el-button>
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" content="刷新" placement="right-start">
|
|
<el-tooltip class="item" effect="dark" content="刷新" placement="right-start">
|
|
- <el-button type="primary" icon="el-icon-refresh-left" :disabled="disable" circle plain @click="changeType(1)"></el-button>
|
|
|
|
|
|
+ <el-button type="primary" icon="el-icon-refresh-left" :disabled="disable" circle plain
|
|
|
|
+ @click="changeType(1)"></el-button>
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" :content="$t('customerManage.footprint')" placement="right-start">
|
|
<el-tooltip class="item" effect="dark" :content="$t('customerManage.footprint')" placement="right-start">
|
|
<el-button type="warning" icon="el-icon-rank" circle plain @click="changeType(-1)"></el-button>
|
|
<el-button type="warning" icon="el-icon-rank" circle plain @click="changeType(-1)"></el-button>
|
|
@@ -22,13 +25,13 @@
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</bm-control>
|
|
</bm-control>
|
|
-<!-- <bm-control>-->
|
|
|
|
-<!-- <div style="margin: 20px">-->
|
|
|
|
-<!-- <button @click="addZoom(19)">缩放至最大</button>-->
|
|
|
|
-<!-- <button @click="addZoom(10)">还原</button>-->
|
|
|
|
-<!-- <button @click="addZoom(3)">缩放至最小</button>-->
|
|
|
|
-<!-- </div>-->
|
|
|
|
-<!-- </bm-control>-->
|
|
|
|
|
|
+ <!-- <bm-control>-->
|
|
|
|
+ <!-- <div style="margin: 20px">-->
|
|
|
|
+ <!-- <button @click="addZoom(19)">缩放至最大</button>-->
|
|
|
|
+ <!-- <button @click="addZoom(10)">还原</button>-->
|
|
|
|
+ <!-- <button @click="addZoom(3)">缩放至最小</button>-->
|
|
|
|
+ <!-- </div>-->
|
|
|
|
+ <!-- </bm-control>-->
|
|
|
|
|
|
<div v-if="type === -1">
|
|
<div v-if="type === -1">
|
|
<!-- 轨迹 -->
|
|
<!-- 轨迹 -->
|
|
@@ -38,27 +41,36 @@
|
|
<bm-info-window v-if="myContent" :show="true" @close="infoWindowClose">
|
|
<bm-info-window v-if="myContent" :show="true" @close="infoWindowClose">
|
|
<p>{{ unixDateFormatter(dataList[dataList.length - 1].position_time) }}</p>
|
|
<p>{{ unixDateFormatter(dataList[dataList.length - 1].position_time) }}</p>
|
|
<p style="color: #4abe84">{{ myContent }}</p>
|
|
<p style="color: #4abe84">{{ myContent }}</p>
|
|
- </bm-info-window></bm-marker>
|
|
|
|
|
|
+ </bm-info-window>
|
|
|
|
+ </bm-marker>
|
|
<!-- 添加终点标记 -->
|
|
<!-- 添加终点标记 -->
|
|
<bm-marker :position="markers[0]">
|
|
<bm-marker :position="markers[0]">
|
|
<bm-label content="起点" :offset="{width: 0, height: 30}"/>
|
|
<bm-label content="起点" :offset="{width: 0, height: 30}"/>
|
|
</bm-marker>
|
|
</bm-marker>
|
|
<!-- 折线 -->
|
|
<!-- 折线 -->
|
|
- <bm-polyline :path="markers" stroke-color="#4aa4f3" :stroke-opacity="1" :stroke-weight="6" stroke-style="dashed"
|
|
|
|
- @lineupdate="updatePolylinePath" />
|
|
|
|
|
|
+ <bm-polyline :path="markers" stroke-color="#4aa4f3" :stroke-opacity="1" :stroke-weight="6"
|
|
|
|
+ stroke-style="dashed"
|
|
|
|
+ @lineupdate="updatePolylinePath"/>
|
|
<!-- <bm-polyline :path="markers" stroke-color="red" :stroke-opacity="0.5" :stroke-weight="2"></bm-polyline>-->
|
|
<!-- <bm-polyline :path="markers" stroke-color="red" :stroke-opacity="0.5" :stroke-weight="2"></bm-polyline>-->
|
|
<bml-lushu @stop="reset" :path="markers" :icon="icon" :play="play" :autoView="true" :speed="700"></bml-lushu>
|
|
<bml-lushu @stop="reset" :path="markers" :icon="icon" :play="play" :autoView="true" :speed="700"></bml-lushu>
|
|
<!-- 轨迹 -->
|
|
<!-- 轨迹 -->
|
|
</div>
|
|
</div>
|
|
<div v-else-if="type === 2">
|
|
<div v-else-if="type === 2">
|
|
<!-- 圆形围栏 -->
|
|
<!-- 圆形围栏 -->
|
|
- <bm-circle v-if="boolCircle" :center="circleCenter" :radius="securityFence.radius" stroke-color="red" :stroke-opacity="0.5" :stroke-weight="2" @lineupdate="updateCirclePath" :editing="editing"></bm-circle>
|
|
|
|
|
|
+ <bm-circle v-if="boolCircle" :center="circleCenter" :radius="securityFence.radius" stroke-color="red"
|
|
|
|
+ :stroke-opacity="0.5" :stroke-weight="2" @lineupdate="updateCirclePath"
|
|
|
|
+ :editing="editing"></bm-circle>
|
|
<bm-marker v-if="boolCircle" :position="circleCenter">
|
|
<bm-marker v-if="boolCircle" :position="circleCenter">
|
|
<bm-info-window :show="true">
|
|
<bm-info-window :show="true">
|
|
- <p>{{ securityFence.address }}</p>
|
|
|
|
|
|
+ <p>
|
|
|
|
+ <el-input v-model="securityFence.address"/>
|
|
|
|
+ </p>
|
|
|
|
+
|
|
<div style="color: #4abe84">半径:{{ securityFence.radius }} 米
|
|
<div style="color: #4abe84">半径:{{ securityFence.radius }} 米
|
|
<el-button type="primary" icon="el-icon-edit" size="mini" plain @click="API_SaveFence">保存</el-button>
|
|
<el-button type="primary" icon="el-icon-edit" size="mini" plain @click="API_SaveFence">保存</el-button>
|
|
- <el-button v-if="securityFence.id" type="danger" icon="el-icon-delete" size="mini" plain @click="API_DelFence">删除</el-button>
|
|
|
|
|
|
+ <el-button v-if="securityFence.id" type="danger" icon="el-icon-delete" size="mini" plain
|
|
|
|
+ @click="API_DelFence">删除
|
|
|
|
+ </el-button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</bm-info-window>
|
|
</bm-info-window>
|
|
@@ -66,14 +78,17 @@
|
|
<!-- 圆形围栏 -->
|
|
<!-- 圆形围栏 -->
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div v-else>
|
|
- <bm-marker :position="markers[0]" animation="BMAP_ANIMATION_BOUNCE" @mouseover="mouseoverMap">
|
|
|
|
|
|
+ <bm-marker :position="markers[0]" animation="BMAP_ANIMATION_BOUNCE" @mouseover="mouseoverMap">
|
|
|
|
+<!-- <bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>-->
|
|
|
|
+
|
|
<bm-info-window v-if="myContent" :show="true" @close="infoWindowClose">
|
|
<bm-info-window v-if="myContent" :show="true" @close="infoWindowClose">
|
|
<p>{{ unixDateFormatter(dataList[0].position_time) }}</p>
|
|
<p>{{ unixDateFormatter(dataList[0].position_time) }}</p>
|
|
<p style="color: #4abe84">{{ myContent }}</p>
|
|
<p style="color: #4abe84">{{ myContent }}</p>
|
|
</bm-info-window>
|
|
</bm-info-window>
|
|
|
|
+ <bm-label content="最后位置" :labelStyle="{color: 'red', fontSize : '14px'}" :offset="{width: -20, height: 30}"/>
|
|
</bm-marker>
|
|
</bm-marker>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
|
|
+<!-- <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="true" @locationSuccess="locationSuccess"></bm-geolocation>-->
|
|
</baidu-map>
|
|
</baidu-map>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -81,12 +96,12 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import walkImg from '@/icons/images/walk.png'
|
|
import walkImg from '@/icons/images/walk.png'
|
|
-import { BmlLushu } from 'vue-baidu-map'
|
|
|
|
-import { getLocationList } from '@/api/initialize'
|
|
|
|
-import { unix2Date } from '@/utils/Foundation'
|
|
|
|
|
|
+import {BmlLushu} from 'vue-baidu-map'
|
|
|
|
+import {getLocationList} from '@/api/initialize'
|
|
|
|
+import {unix2Date} from '@/utils/Foundation'
|
|
import * as API_MemberLocation from '@/api/member_location'
|
|
import * as API_MemberLocation from '@/api/member_location'
|
|
-import { getDeviceList } from '@/api/ncs_device'
|
|
|
|
-import { DEVICE_TYPE } from '@/utils/enum/DeviceTypeEnum'
|
|
|
|
|
|
+import {getDeviceList} from '@/api/ncs_device'
|
|
|
|
+import {DEVICE_TYPE} from '@/utils/enum/DeviceTypeEnum'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
name: "myMapHtml",
|
|
name: "myMapHtml",
|
|
@@ -101,12 +116,15 @@ export default {
|
|
center: '北京',
|
|
center: '北京',
|
|
zoom: 16,
|
|
zoom: 16,
|
|
isShow: false,
|
|
isShow: false,
|
|
- markers: [],
|
|
|
|
|
|
+ markers: [{
|
|
|
|
+ lng: 113.971151,
|
|
|
|
+ lat: 22.570388
|
|
|
|
+ }],
|
|
play: false, //是否行进
|
|
play: false, //是否行进
|
|
icon: { // 覆盖物的图标
|
|
icon: { // 覆盖物的图标
|
|
url: walkImg,
|
|
url: walkImg,
|
|
- size: { width: 220, height: 220 },
|
|
|
|
- opts: { anchor: { width: 0, height: 113 } }
|
|
|
|
|
|
+ size: {width: 220, height: 220},
|
|
|
|
+ opts: {anchor: {width: 0, height: 113}}
|
|
},
|
|
},
|
|
boolCircle: false,
|
|
boolCircle: false,
|
|
type: 1,
|
|
type: 1,
|
|
@@ -117,7 +135,7 @@ export default {
|
|
sort: 'position_time',
|
|
sort: 'position_time',
|
|
dir: 'desc',
|
|
dir: 'desc',
|
|
},
|
|
},
|
|
- dataList:[],
|
|
|
|
|
|
+ dataList: [],
|
|
disable: false,
|
|
disable: false,
|
|
deviceList: [],
|
|
deviceList: [],
|
|
circleCenter: {
|
|
circleCenter: {
|
|
@@ -166,6 +184,17 @@ export default {
|
|
this.dataList.forEach(item => {
|
|
this.dataList.forEach(item => {
|
|
markers.push({lng: item.longitude, lat: item.latitude})
|
|
markers.push({lng: item.longitude, lat: item.latitude})
|
|
})
|
|
})
|
|
|
|
+ const geoCoder = new BMap.Geocoder()
|
|
|
|
+ // 利用坐标获取地址的详细信息
|
|
|
|
+ geoCoder.getLocation(e.point, (res) => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ if (res.surroundingPois[0]) {
|
|
|
|
+ this.myContent = res.surroundingPois[0].title + '附近'
|
|
|
|
+ } else {
|
|
|
|
+ this.myContent = res.address + '附近'
|
|
|
|
+ }
|
|
|
|
+ console.log('地址为' + this.myContent)
|
|
|
|
+ })
|
|
this.markers = markers
|
|
this.markers = markers
|
|
this.center = this.markers[0]
|
|
this.center = this.markers[0]
|
|
}
|
|
}
|
|
@@ -173,7 +202,11 @@ export default {
|
|
this.isShow = true
|
|
this.isShow = true
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- handler ({BMap, map}) {
|
|
|
|
|
|
+ locationSuccess({point, AddressComponent, marker}){
|
|
|
|
+console.log('locationSuccess', point, AddressComponent, marker)
|
|
|
|
+ this.center={...point}
|
|
|
|
+ },
|
|
|
|
+ handler({BMap, map}) {
|
|
if (this.markers.length > 0 && this.type !== 2) {
|
|
if (this.markers.length > 0 && this.type !== 2) {
|
|
let view = map.getViewport(eval(this.markers))
|
|
let view = map.getViewport(eval(this.markers))
|
|
this.zoom = view.zoom
|
|
this.zoom = view.zoom
|
|
@@ -193,7 +226,7 @@ export default {
|
|
updatePolylinePath(e) {
|
|
updatePolylinePath(e) {
|
|
this.markers = e.target.getPath()
|
|
this.markers = e.target.getPath()
|
|
},
|
|
},
|
|
- updateCirclePath (e) {
|
|
|
|
|
|
+ updateCirclePath(e) {
|
|
this.circleCenter = e.target.getCenter()
|
|
this.circleCenter = e.target.getCenter()
|
|
this.securityFence.radius = Math.ceil(e.target.getRadius())
|
|
this.securityFence.radius = Math.ceil(e.target.getRadius())
|
|
console.log('修改围栏参数:', this.circleCenter, this.securityFence.radius)
|
|
console.log('修改围栏参数:', this.circleCenter, this.securityFence.radius)
|
|
@@ -284,6 +317,7 @@ export default {
|
|
this.handleMapData()
|
|
this.handleMapData()
|
|
break
|
|
break
|
|
}
|
|
}
|
|
|
|
+ console.log(this.type)
|
|
},
|
|
},
|
|
infoWindowClose() {
|
|
infoWindowClose() {
|
|
this.myContent = null
|
|
this.myContent = null
|
|
@@ -296,6 +330,27 @@ export default {
|
|
API_GetLocation() {
|
|
API_GetLocation() {
|
|
API_MemberLocation.getLocation(this.deviceList[0].eth_mac).then(res => {
|
|
API_MemberLocation.getLocation(this.deviceList[0].eth_mac).then(res => {
|
|
if (res.success) {
|
|
if (res.success) {
|
|
|
|
+
|
|
|
|
+ if (Array.isArray(res.data)) {
|
|
|
|
+ console.log(res.data)
|
|
|
|
+ this.markers = [{lng: res.data[1] , lat:res.data[0]}]
|
|
|
|
+ this.center = this.markers[0]
|
|
|
|
+ console.log(this.markers)
|
|
|
|
+ // const geoCoder = new BMap.Geocoder()
|
|
|
|
+ // // 利用坐标获取地址的详细信息
|
|
|
|
+ // geoCoder.getLocation(this.center, (res) => {
|
|
|
|
+ // console.log(res)
|
|
|
|
+ // if (res.surroundingPois[0]) {
|
|
|
|
+ // this.myContent = res.surroundingPois[0].title + '附近'
|
|
|
|
+ // } else {
|
|
|
|
+ // this.myContent = res.address + '附近'
|
|
|
|
+ // }
|
|
|
|
+ // console.log('地址为' + this.myContent)
|
|
|
|
+ // })
|
|
|
|
+ // this.play = true
|
|
|
|
+ // this.isShow = true
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
const data = JSON.parse(res.data)
|
|
const data = JSON.parse(res.data)
|
|
if (data.Data.Code === 'iot.messagebroker.OFFLINE') {
|
|
if (data.Data.Code === 'iot.messagebroker.OFFLINE') {
|
|
this.$message({
|
|
this.$message({
|
|
@@ -335,7 +390,7 @@ export default {
|
|
API_MemberLocation.getMemberSecurityFence(data).then(res => {
|
|
API_MemberLocation.getMemberSecurityFence(data).then(res => {
|
|
if (res.length > 0) {
|
|
if (res.length > 0) {
|
|
_this.securityFence = res[0]
|
|
_this.securityFence = res[0]
|
|
- _this.circleCenter = { lng: _this.securityFence.longitude, lat: _this.securityFence.latitude }
|
|
|
|
|
|
+ _this.circleCenter = {lng: _this.securityFence.longitude, lat: _this.securityFence.latitude}
|
|
_this.center = this.circleCenter
|
|
_this.center = this.circleCenter
|
|
_this.boolCircle = true
|
|
_this.boolCircle = true
|
|
} else {
|
|
} else {
|
|
@@ -346,7 +401,8 @@ export default {
|
|
type: 0,
|
|
type: 0,
|
|
address: ''
|
|
address: ''
|
|
}
|
|
}
|
|
- if (_this.center) {
|
|
|
|
|
|
+ _this.center = {lng: 113.971151, lat: 22.570388}
|
|
|
|
+ if (_this.center['lng']) {
|
|
_this.circleCenter = _this.center
|
|
_this.circleCenter = _this.center
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -401,5 +457,9 @@ export default {
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
|
|
|
+<style >
|
|
|
|
+.map img {
|
|
|
|
+ max-width: none!important;
|
|
|
|
+ background: none!important;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|