|
|
|
|
<template>
|
|
|
|
|
<div style="position:relative;width:100%;height:100%;">
|
|
|
|
|
<div id="container" style="width:100%;height:100%;"></div>
|
|
|
|
|
<!-- 信息弹框 -->
|
|
|
|
|
<!-- <div v-if="infoShow" class="infoPop">
|
|
|
|
|
<div class="close_act" @click="infoShow = false" title="关闭">x</div>
|
|
|
|
|
<div class="base_info">
|
|
|
|
|
<div>{{ infoWindowObj.carNo }}</div>
|
|
|
|
|
<div :class="infoWindowObj.obj.SbcStatus == 3 ? 'car_status on' : 'car_status'">{{
|
|
|
|
|
locationStatus[infoWindowObj.obj.SbcStatus] }}</div>
|
|
|
|
|
<div class="car_speed">{{ infoWindowObj.obj.spd }}km/h</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex_box">
|
|
|
|
|
<div>设备位置：</div>
|
|
|
|
|
<div style="width:2.5rem;text-align: left;">{{ infoWindowObj.position }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex_box">
|
|
|
|
|
<div>最后定位时间：</div>
|
|
|
|
|
<div>{{ infoWindowObj.obj.GPSTimeStamp }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="path_box">
|
|
|
|
|
<div @click="queryPath(infoWindowObj.deviceId)" class="path_btn">行程轨迹</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// import { lunzApi, appKey, key, carList } from "@/api/data";
|
|
|
|
|
|
|
|
|
|
// import Highcharts from "highcharts/highstock";
|
|
|
|
|
// import Highmaps from "highcharts/modules/map";
|
|
|
|
|
// console.log(Highmaps)
|
|
|
|
|
|
|
|
|
|
// Highmaps(Highcharts);
|
|
|
|
|
|
|
|
|
|
import { getEnterprisePower } from "@/api/energySourcesProvince/energySourcesProvince"
|
|
|
|
|
import { styleJson } from "../json/mapStyle.js"
|
|
|
|
|
import { dateFormat } from "@/util/date";
|
|
|
|
|
export const appKey = '69800851-4554-4EEC-8D12-E4211B952798';//轮子appkey
|
|
|
|
|
export const key = '266843ed-5d4f-472c-beec-e5e50a114d47';
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
appKey: appKey,
|
|
|
|
|
key: key,
|
|
|
|
|
setInterval: null,
|
|
|
|
|
baiduMap: null,//百度实例
|
|
|
|
|
// locationModel: { 0: 'GPS定位', 1: '基站定位', 2: 'Wi-Fi定位', 3: '北斗定位', 4: 'GPS/北斗混合定位' },
|
|
|
|
|
// locationStatus: { 0: '未启用', 1: '离线', 2: '静止', 3: '行驶中' },
|
|
|
|
|
// locationAcc: { 0: '关闭', 1: '开启' },
|
|
|
|
|
// carList: carList,//车辆设备
|
|
|
|
|
markList: [
|
|
|
|
|
{ lng: 112.37268, lat: 25.63787, name: "福顺机械实业公司" },
|
|
|
|
|
{ lng: 112.375261, lat: 25.63742, name: "巨人机床实业公司" },
|
|
|
|
|
{ lng: 112.365047, lat: 25.630574, name: "郴州雄建实业公司" },
|
|
|
|
|
{ lng: 112.36587, lat: 25.63132, name: "众合实业公司" },
|
|
|
|
|
{ lng: 112.372727, lat: 25.635608, name: "雄达实业公司" },
|
|
|
|
|
{ lng: 112.373909, lat: 25.634179, name: "峰达实业公司" },
|
|
|
|
|
{ lng: 112.37275, lat: 25.63676, name: "伟铸机械实业公司" },
|
|
|
|
|
],//标注点记录
|
|
|
|
|
polyline: null,//昨日轨迹
|
|
|
|
|
viewData: [],//点聚合坐标集合
|
|
|
|
|
// endPointMarker:null,//轨迹终点标记
|
|
|
|
|
infoWindowObj: {
|
|
|
|
|
obj: {
|
|
|
|
|
SbcStatus: 2
|
|
|
|
|
}
|
|
|
|
|
},//
|
|
|
|
|
infoShow: false,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
// clearInterval(this.setInterval);
|
|
|
|
|
// console.log('销毁');
|
|
|
|
|
},
|
|
|
|
|
beforeCreate() {
|
|
|
|
|
// clearInterval(this.setInterval);
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.getData()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getData() {
|
|
|
|
|
getEnterprisePower({ today: this.$moment().format('yyyy-MM-DD') }).then(res => {
|
|
|
|
|
let data = res.data.data
|
|
|
|
|
this.markList.forEach(e => {
|
|
|
|
|
data.forEach(r => {
|
|
|
|
|
|
|
|
|
|
if (e.name.includes(r.name)) {
|
|
|
|
|
e.carbon = r.carbon
|
|
|
|
|
e.electricity = r.electricity
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.initMap();
|
|
|
|
|
}, 0);
|
|
|
|
|
window.addEventListener('resize', () => {
|
|
|
|
|
if (this.baiduMap) {
|
|
|
|
|
this.backMap();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// this.echartsInit(this.gffdzb, this.gyyhzb, this.sbghzb)
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
//回到原中心点
|
|
|
|
|
backMap() {
|
|
|
|
|
var point = new BMapGL.Point(118.880278, 35.649947);
|
|
|
|
|
this.infoShow = false;
|
|
|
|
|
this.baiduMap.centerAndZoom(point, 12);
|
|
|
|
|
if (this.polyline) {
|
|
|
|
|
this.baiduMap.removeOverlay(this.polyline);
|
|
|
|
|
this.polyline = null;
|
|
|
|
|
}
|
|
|
|
|
// this.baiduMap.closeInfoWindow();
|
|
|
|
|
},
|
|
|
|
|
initMap() {
|
|
|
|
|
var point = new BMapGL.Point(112.37558, 25.59342);
|
|
|
|
|
if (this.baiduMap) {
|
|
|
|
|
this.baiduMap.centerAndZoom(point, 12);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
this.baiduMap = new BMapGL.Map('container');
|
|
|
|
|
this.baiduMap.centerAndZoom(point, 12);
|
|
|
|
|
this.baiduMap.enableScrollWheelZoom(true);
|
|
|
|
|
// var opts = { type: BMAP_NAVIGATION_CONTROL_SMALL }
|
|
|
|
|
// this.baiduMap.addControl(new BMapGL.NavigationControl(opts));
|
|
|
|
|
// this.baiduMap.setMapStyleV2({ style: 'midnight' });
|
|
|
|
|
|
|
|
|
|
var bdary = new BMapGL.Boundary();
|
|
|
|
|
// this.baiduMap.setMapStyleV2({
|
|
|
|
|
// styleJson: styleJson
|
|
|
|
|
// })
|
|
|
|
|
// alert('自定义样式')
|
|
|
|
|
// this.view = new mapvgl.View({
|
|
|
|
|
// map: this.baiduMap
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
// bdary.get("郴州市嘉禾县", rs => {
|
|
|
|
|
// var count = rs.boundaries.length;
|
|
|
|
|
// for (var i = 0; i < count; i++) {
|
|
|
|
|
// var xyArr = rs.boundaries[i].split(';');
|
|
|
|
|
// var ptArr = [];
|
|
|
|
|
// for (var j = 0; j < xyArr.length; j++) {
|
|
|
|
|
// var tmp = xyArr[j].split(',');
|
|
|
|
|
// var pt = new BMapGL.Point(tmp[0], tmp[1]);
|
|
|
|
|
// ptArr.push(pt);
|
|
|
|
|
// }
|
|
|
|
|
// // var mapmask = new BMapGL.MapMask(ptArr, {
|
|
|
|
|
// // isBuildingMask: true,
|
|
|
|
|
// // isPoiMask: true,
|
|
|
|
|
// // isMapMask: true,
|
|
|
|
|
// // showRegion: 'inside',
|
|
|
|
|
// // topFillColor: '#5679ea',
|
|
|
|
|
// // topFillOpacity: 0.5,
|
|
|
|
|
// // sideFillColor: '#5679ea',
|
|
|
|
|
// // sideFillOpacity: 0.9
|
|
|
|
|
// // });
|
|
|
|
|
// // this.baiduMap.addOverlay(mapmask);
|
|
|
|
|
// var border = new BMapGL.Polyline(ptArr, {
|
|
|
|
|
// strokeColor: '#0e94eb',
|
|
|
|
|
// strokeWeight: 3,
|
|
|
|
|
// strokeOpacity: 1
|
|
|
|
|
// });
|
|
|
|
|
// this.baiduMap.addOverlay(border);
|
|
|
|
|
// // var ply = new BMapGL.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#0e94eb", fillColor: '', fillOpacity: 0, }); //建立多边形覆盖物
|
|
|
|
|
// // this.baiduMap.addOverlay(ply); //添加覆盖物
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
this.baiduMap.centerAndZoom(point, 10);
|
|
|
|
|
this.baiduMap.setTilt(50);
|
|
|
|
|
this.baiduMap.enableScrollWheelZoom();
|
|
|
|
|
bdary.get('郴州市嘉禾县', (rs) => {
|
|
|
|
|
var count = rs.boundaries.length; //行政区域的点有多少个
|
|
|
|
|
var pointArray = [];
|
|
|
|
|
for (var i = 0; i < count; i++) {
|
|
|
|
|
var path = [];
|
|
|
|
|
var str = rs.boundaries[i].replace(' ', '');
|
|
|
|
|
var points = str.split(';');
|
|
|
|
|
for (var j = 0; j < points.length; j++) {
|
|
|
|
|
var lng = points[j].split(',')[0];
|
|
|
|
|
var lat = points[j].split(',')[1];
|
|
|
|
|
path.push(new BMapGL.Point(lng, lat));
|
|
|
|
|
}
|
|
|
|
|
var prism = new BMapGL.Prism(path, 5000, {
|
|
|
|
|
topFillColor: '#5679ea',
|
|
|
|
|
topFillOpacity: 0.5,
|
|
|
|
|
sideFillColor: '#5679ea',
|
|
|
|
|
sideFillOpacity: 0.9
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
this.baiduMap.addOverlay(prism);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.baiduMap.setMapStyleV2({ styleJson: styleJson });
|
|
|
|
|
this.baiduMap.removeEventListener('tilesloaded', this.handleEvent);
|
|
|
|
|
this.baiduMap.addEventListener('tilesloaded', this.handleEvent);
|
|
|
|
|
this.markList.map(r => {
|
|
|
|
|
let lng = r.lng;
|
|
|
|
|
let lat = r.lat;
|
|
|
|
|
let pt = new BMapGL.Point(lng, lat);
|
|
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
// icon: myIcon
|
|
|
|
|
// }
|
|
|
|
|
var marker = new BMapGL.Marker(pt)
|
|
|
|
|
|
|
|
|
|
this.baiduMap.addOverlay(marker);
|
|
|
|
|
|
|
|
|
|
var sContent = `
|
|
|
|
|
<div class="mapslabel">
|
|
|
|
|
<div class="mapslabel-t">
|
|
|
|
|
<div class="mapslabel-t-img"></div>
|
|
|
|
|
${r.name}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mapslabel-b">
|
|
|
|
|
<div>
|
|
|
|
|
<div>用电量</div>
|
|
|
|
|
<div class="mapslabel-b-font">${r.electricity}</div>
|
|
|
|
|
<span style="margin-top:0.08rem;display: inline-block;float: left;">kw·h</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>碳排放量</div>
|
|
|
|
|
<div class="mapslabel-b-font">${r.carbon}</div>
|
|
|
|
|
<span style="margin-top:0.08rem;display: inline-block;float: left;">t</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
// 将标注添加到地图
|
|
|
|
|
var infoWindow = new BMapGL.InfoWindow(sContent); // 创建信息窗口对象
|
|
|
|
|
marker.addEventListener("click", function () {
|
|
|
|
|
this.openInfoWindow(infoWindow, point); //开启信息窗口
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// var style_map = [{
|
|
|
|
|
// // 地图背景
|
|
|
|
|
// "featureType": "land",
|
|
|
|
|
// "elementType": "all",
|
|
|
|
|
// "stylers": {
|
|
|
|
|
// "color": "#0b2555",
|
|
|
|
|
// "lightness": -1
|
|
|
|
|
// }
|
|
|
|
|
// }, {
|
|
|
|
|
// // 水路背景
|
|
|
|
|
// "featureType": "water",
|
|
|
|
|
// "elementType": "all",
|
|
|
|
|
// "stylers": {
|
|
|
|
|
// "color": "#0b2555",
|
|
|
|
|
// "lightness": -1
|
|
|
|
|
// }
|
|
|
|
|
// }, {
|
|
|
|
|
// //绿地背景
|
|
|
|
|
// "featureType": "green",
|
|
|
|
|
// "elementType": "all",
|
|
|
|
|
// "stylers": {
|
|
|
|
|
// "color": "#0b2555",
|
|
|
|
|
// "lightness": -1
|
|
|
|
|
// }
|
|
|
|
|
// }, {
|
|
|
|
|
// //教育地区
|
|
|
|
|
// "featureType": "education",
|
|
|
|
|
// "elementType": "all",
|
|
|
|
|
// "stylers": {
|
|
|
|
|
// "color": "#0b2555",
|
|
|
|
|
// "lightness": -1
|
|
|
|
|
// }
|
|
|
|
|
// }]
|
|
|
|
|
//将样式加载地图中
|
|
|
|
|
// this.baiduMap.setMapStyleV2({ styleJson: eval("style_map") });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// let n = '112.37525'
|
|
|
|
|
// let a = '25.63730'
|
|
|
|
|
// let p = new BMapGL.Point(n, a);
|
|
|
|
|
// var markers = new BMapGL.Marker(p)
|
|
|
|
|
// this.baiduMap.addOverlay(markers);
|
|
|
|
|
// markers.addEventListener("click", function () {
|
|
|
|
|
// console.log(1)
|
|
|
|
|
// this.openInfoWindow(infoWindow, point); //开启信息窗口
|
|
|
|
|
// });
|
|
|
|
|
this.baiduMap.getPanes().floatShadow.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// handleEvent() {
|
|
|
|
|
// console.log('addEventListener');
|
|
|
|
|
// this.carList.map((item, index) => {
|
|
|
|
|
// this.markList.map(mark => {
|
|
|
|
|
// this.baiduMap.removeOverlay(mark);
|
|
|
|
|
// })
|
|
|
|
|
// this.markList = [];
|
|
|
|
|
// // this.queryLunz(item.deviceId, item.key, item.cardNo, index);
|
|
|
|
|
// })
|
|
|
|
|
// clearInterval(this.setInterval);
|
|
|
|
|
// let timer = 0;
|
|
|
|
|
// this.setInterval = setInterval(() => {
|
|
|
|
|
// console.log(timer++)
|
|
|
|
|
// // this.view.removeAllLayers();
|
|
|
|
|
// this.markList.map(mark => {
|
|
|
|
|
// this.baiduMap.removeOverlay(mark);
|
|
|
|
|
// })
|
|
|
|
|
// this.markList = [];
|
|
|
|
|
// // this.viewData = [];
|
|
|
|
|
// this.carList.map((item, index) => {
|
|
|
|
|
// // this.queryLunz(item.deviceId, item.key, item.cardNo, index);
|
|
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
// }, 20 * 1000)
|
|
|
|
|
// },
|
|
|
|
|
//单个设备定位聚焦放大
|
|
|
|
|
// queryDing
|
|
|
|
|
//查询定位
|
|
|
|
|
// queryLunz(deviceId, key, carNo, index) {
|
|
|
|
|
// // lunzApi.getCarUserSimpleByImei(this.appKey, deviceId).then(res1 => {
|
|
|
|
|
// // let carInfo = res1.Data;
|
|
|
|
|
// lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => {
|
|
|
|
|
// // 创建小车图标
|
|
|
|
|
// // var myIcon = new BMapGL.Icon(require("@/assets/images/car.png"), new BMapGL.Size(25, 25));
|
|
|
|
|
// lunzApi.getBaiduNear(this.appKey, res.Data.BaiduLat, res.Data.BaiduLng).then(res2 => {
|
|
|
|
|
// // 创建Marker标注，使用小车图标
|
|
|
|
|
// let lng = res.Data.BaiduLng;
|
|
|
|
|
// let lat = res.Data.BaiduLat;
|
|
|
|
|
// let pt = new BMapGL.Point(lng, lat);
|
|
|
|
|
// var marker = new BMapGL.Marker(pt, {
|
|
|
|
|
// icon: myIcon
|
|
|
|
|
// });
|
|
|
|
|
// // 将标注添加到地图
|
|
|
|
|
// this.baiduMap.addOverlay(marker);
|
|
|
|
|
// // this.viewData.push({
|
|
|
|
|
// // geometry: {
|
|
|
|
|
// // type: 'Point',
|
|
|
|
|
// // coordinates: [lng, lat]
|
|
|
|
|
// // },
|
|
|
|
|
// // objdata: { carNo: carNo, deviceId: key, resData: res.Data, res2Data: res2.Data }
|
|
|
|
|
// // })
|
|
|
|
|
// this.markList.push(marker);
|
|
|
|
|
// res.Data.GPSTimeStamp = res.Data.GPSTimeStamp.replace("T", " ");
|
|
|
|
|
|
|
|
|
|
// // let sContent = `<div style="width:3.57rem;font-size:0.14rem;line-height:0.22rem;padding:0 0.05rem 0 0.1rem;">
|
|
|
|
|
// // <div id="close_${deviceId}" style="display:inline-block;color:#fff;font-size:0.16rem;font-weight:bold;width:0.18rem;line-height:0.18rem;cursor:pointer;text-align:center;float:right;">x</div>
|
|
|
|
|
// // <div style="display:flex;align-items:center;margin-bottom:0.15rem;font-style: italic;font-size:0.2rem;font-family: FZSK;">
|
|
|
|
|
// // <div style="color: #ffffff;margin-right:0.1rem;">${carNo}</div>
|
|
|
|
|
// // <div style="display:inline-block;color:${res.Data.SbcStatus == 3 ? "#ffffff" : "#062766"};background:${res.Data.SbcStatus == 3 ? "#1dd58e !important" : "#9ab3c6 !important"};width:0.65rem;text-align:center;border-radius:100px;font-size:0.16rem;padding:0.04rem 0;">${this.locationStatus[res.Data.SbcStatus]}</div>
|
|
|
|
|
// // <div style="margin-left:0.35rem;color: #fff;font-style: italic;font-size:0.2rem;margin-right:0.15rem;">${res.Data.spd}km/h</div>
|
|
|
|
|
// // </div>
|
|
|
|
|
// // <div style="display:flex;margin-bottom:0.1rem;max-width:3.5rem;"><div style="color: #ffffff;">设备位置：</div><div style="color: #ffffff;flex:1;">${res2.Data}</div></div>
|
|
|
|
|
// // <div style="display:flex;"><div style="color: #ffffff;">最后定位时间：</div><div style="color: #ffffff;flex:1;">${res.Data.GPSTimeStamp.replace("T", " ")}</div></div>
|
|
|
|
|
// // <div style="text-align:center;margin:0.12rem 0 0;max-width:3.25rem;"> <div style="display: inline-block;width:0.88rem;border-radius: 100px;text-align:center;color: #1b2f57;font-style: italic;font-family: FZSK;cursor: pointer;background:#facd89 !important;font-size:0.16rem;font-weight:bold;padding:0.04rem 0;" id="btnPath_${deviceId}">行车轨迹</div></div>
|
|
|
|
|
// // </div>`;
|
|
|
|
|
// // let infoWindow = new BMapGL.InfoWindow(sContent, { width: 367, height: 220 });
|
|
|
|
|
// // // marker添加点击事件
|
|
|
|
|
// // infoWindow.addEventListener('open', () => {
|
|
|
|
|
// // document.getElementById('btnPath_' + deviceId).addEventListener('click', () => {
|
|
|
|
|
// // this.queryPath(deviceId)
|
|
|
|
|
// // })
|
|
|
|
|
// // document.getElementById('close_' + deviceId).addEventListener('click', () => {
|
|
|
|
|
// // this.baiduMap.closeInfoWindow();
|
|
|
|
|
// // })
|
|
|
|
|
// // });
|
|
|
|
|
// marker.addEventListener('click', () => {
|
|
|
|
|
// this.infoWindowObj = {
|
|
|
|
|
// deviceId: deviceId,
|
|
|
|
|
// carNo: carNo,
|
|
|
|
|
// obj: res.Data,
|
|
|
|
|
// position: res2.Data
|
|
|
|
|
// }
|
|
|
|
|
// this.infoShow = true;
|
|
|
|
|
// // this.openInfo(infoWindow, pt);
|
|
|
|
|
// });
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
// // })
|
|
|
|
|
// },
|
|
|
|
|
//信息窗口
|
|
|
|
|
// openWindow(sContent, pt, DeviceNumber) {
|
|
|
|
|
// let infoWindow = new BMapGL.InfoWindow(sContent);
|
|
|
|
|
// // marker添加点击事件
|
|
|
|
|
// infoWindow.addEventListener('open', () => {
|
|
|
|
|
// document.getElementById('btnPath_' + DeviceNumber).addEventListener('click', () => {
|
|
|
|
|
// this.queryPath(DeviceNumber)
|
|
|
|
|
// })
|
|
|
|
|
// });
|
|
|
|
|
// this.openInfo(infoWindow, pt);
|
|
|
|
|
// },wei(deviceId) {
|
|
|
|
|
// lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => {
|
|
|
|
|
// let lng = res.Data.BaiduLng;
|
|
|
|
|
// let lat = res.Data.BaiduLat;
|
|
|
|
|
// let pt = new BMapGL.Point(lng, lat);
|
|
|
|
|
// this.infoShow = false;
|
|
|
|
|
// this.baiduMap.centerAndZoom(pt, 18);
|
|
|
|
|
// })
|
|
|
|
|
// },
|
|
|
|
|
//昨日轨迹
|
|
|
|
|
// queryPath(deviceId) {
|
|
|
|
|
// this.infoShow = false;
|
|
|
|
|
// let now = new Date();
|
|
|
|
|
// let yesterDay1 = now.setDate(now.getDate() - 1);
|
|
|
|
|
// let yesterDay2 = now.setDate(now.getDate() - 1);
|
|
|
|
|
// let param = {
|
|
|
|
|
// "Imei": deviceId,
|
|
|
|
|
// "StartTime": dateFormat(new Date(yesterDay2), 'yyyy-MM-dd'),
|
|
|
|
|
// "EndTime": dateFormat(new Date(yesterDay1), 'yyyy-MM-dd'),
|
|
|
|
|
// "MaxValue": 500
|
|
|
|
|
// }
|
|
|
|
|
// param = {
|
|
|
|
|
// "IMEI": deviceId,
|
|
|
|
|
// "StartDateTime": dateFormat(new Date(yesterDay2), 'yyyy-MM-dd'),
|
|
|
|
|
// "EndDateTime": dateFormat(new Date(yesterDay1), 'yyyy-MM-dd'),
|
|
|
|
|
// "MaxValues": 500,
|
|
|
|
|
// "LocType": 1
|
|
|
|
|
// }
|
|
|
|
|
// lunzApi.getLocationsByImei2(this.appKey, param).then(res => {
|
|
|
|
|
// if (res.Data == null) {
|
|
|
|
|
// this.$message({
|
|
|
|
|
// message: '未查询到今日行车轨迹',
|
|
|
|
|
// type: 'warning'
|
|
|
|
|
// });
|
|
|
|
|
// return;
|
|
|
|
|
// }
|
|
|
|
|
// let point = [];
|
|
|
|
|
// res.Data.Locations.map(item => {
|
|
|
|
|
// point.push(new BMapGL.Point(item.Lng, item.Lat));
|
|
|
|
|
// });
|
|
|
|
|
// if (this.polyline) {
|
|
|
|
|
// this.baiduMap.removeOverlay(this.polyline);
|
|
|
|
|
// this.polyline = null;
|
|
|
|
|
// }
|
|
|
|
|
// this.polyline = new BMapGL.Polyline(point, { strokeColor: '#ffe954', strokeWeight: 4, strokeOpacity: 1, })
|
|
|
|
|
// this.baiduMap.addOverlay(this.polyline);
|
|
|
|
|
// //终点标注maker
|
|
|
|
|
// if (this.endPointMarker) {
|
|
|
|
|
// this.baiduMap.removeOverlay(this.endPointMarker);
|
|
|
|
|
// this.endPointMarker = null;
|
|
|
|
|
// }
|
|
|
|
|
// // var myIcon = new BMapGL.Icon(require("@/assets/images/end_point_icon.png"), new BMapGL.Size(37, 44));
|
|
|
|
|
// // this.endPointMarker = new BMapGL.Marker(point[point.length-1], {
|
|
|
|
|
// // icon: myIcon
|
|
|
|
|
// // });
|
|
|
|
|
// // console.log('最后一个坐标',point[point.length-1])
|
|
|
|
|
// // this.baiduMap.addOverlay(this.endPointMarker);
|
|
|
|
|
// this.baiduMap.centerAndZoom(point[0], 15);
|
|
|
|
|
// this.baiduMap.closeInfoWindow();
|
|
|
|
|
// // this.polyline = new BMapGL.Polyline(point, {
|
|
|
|
|
// // strokeColor: '#F5533D',
|
|
|
|
|
// // strokeWeight: 5,
|
|
|
|
|
// // strokeOpacity: 1,
|
|
|
|
|
// // });
|
|
|
|
|
// // let trackAni = new BMapLib.TrackAnimation(this.baiduMap, this.polyline, {
|
|
|
|
|
// // overallView: true,
|
|
|
|
|
// // tilt: 30,
|
|
|
|
|
// // duration: 20000,
|
|
|
|
|
// // delay: 300
|
|
|
|
|
// // });
|
|
|
|
|
// // trackAni.start();
|
|
|
|
|
// }, error => {
|
|
|
|
|
// this.$message({
|
|
|
|
|
// message: '未查询到今日行车轨迹',
|
|
|
|
|
// type: 'warning'
|
|
|
|
|
// });
|
|
|
|
|
// })
|
|
|
|
|
// },
|
|
|
|
|
// openInfo(infoWindow, pt) {
|
|
|
|
|
// this.baiduMap.openInfoWindow(infoWindow, pt);
|
|
|
|
|
// },
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
.BMap_bubble_title {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
text-align: left;
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.BMap_bubble_pop {
|
|
|
|
|
width: 2.5rem !important;
|
|
|
|
|
height: 1.26rem !important;
|
|
|
|
|
background: url(../../../../public/img/energySourcesProvince/map3.png);
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
margin: 1.78rem 0 0 1.24rem;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
border: 0 !important;
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
border-radius: 0.1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.mapslabel {
|
|
|
|
|
width: 2.5rem !important;
|
|
|
|
|
height: 1.26rem !important;
|
|
|
|
|
padding-left: 0.26rem;
|
|
|
|
|
margin-top: 0.1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mapslabel-t {
|
|
|
|
|
width: 2rem;
|
|
|
|
|
height: 0.32rem;
|
|
|
|
|
line-height: 0.32rem;
|
|
|
|
|
margin-bottom: 0.14rem;
|
|
|
|
|
font-size: 0.18rem;
|
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.41);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mapslabel-t .mapslabel-t-img {
|
|
|
|
|
width: 0.22rem;
|
|
|
|
|
height: 0.26rem;
|
|
|
|
|
background: url(../../../../public/img/energySourcesProvince/map4.png);
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mapslabel-b {
|
|
|
|
|
width: 2rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mapslabel-b .mapslabel-b-font {
|
|
|
|
|
font-size: 0.24rem;
|
|
|
|
|
font-family: Acumin Variable Concept;
|
|
|
|
|
margin-top: 0.04rem;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.BMap_bubble_pop .BMap_center {
|
|
|
|
|
/* width: 281px !important;
|
|
|
|
|
height: 100px !important;
|
|
|
|
|
z-index: 99 !important; */
|
|
|
|
|
/* border:0 !important;
|
|
|
|
|
background: transparent !important; */
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.BMap_bubble_pop>img {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.BMap_bubble_pop>div:nth-child(1) {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* .BMap_bubble_pop>div:nth-child(2) {
|
|
|
|
|
display: none !important;
|
|
|
|
|
} */
|
|
|
|
|
|
|
|
|
|
.BMap_bubble_pop>div:nth-child(3) {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.BMap_bubble_pop>div:nth-child(5) {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.BMap_bubble_pop>div:nth-child(6) {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.BMap_bubble_pop>div:nth-child(7) {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.BMap_bubble_pop>div:nth-child(8) {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*替换关闭按钮*/
|
|
|
|
|
/* img[src="http://api0.map.bdimg.com/images/iw_close1d3.gif"]{
|
|
|
|
|
content: url('http://vino.test.bidostar.cn/iw_close1d3.png');
|
|
|
|
|
} */
|
|
|
|
|
/*替换剪头*/
|
|
|
|
|
/* img[src="http://api0.map.bdimg.com/images/iw3.png"]{
|
|
|
|
|
opacity:0;
|
|
|
|
|
margin-top: -692px !important;
|
|
|
|
|
filter:alpha(opacity=70);
|
|
|
|
|
content: url('../../../../public/img/3.png');
|
|
|
|
|
} */
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.map_warp {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.infoPop {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 3.67rem;
|
|
|
|
|
height: 2.2rem;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 0.14rem;
|
|
|
|
|
line-height: 0.2rem;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
margin: -1.1rem 0 0 -1.835rem;
|
|
|
|
|
// background: url(@/assets/images/infowindow_bg.png) no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
div {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.close_act {
|
|
|
|
|
text-align: right;
|
|
|
|
|
padding: 0.2rem 0.2rem 0;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.base_info {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 0.15rem;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-style: italic;
|
|
|
|
|
font-size: 0.2rem;
|
|
|
|
|
font-family: FZSK;
|
|
|
|
|
padding: 0 0.2rem;
|
|
|
|
|
|
|
|
|
|
.car_status {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
color: #062766;
|
|
|
|
|
background: #9ab3c6;
|
|
|
|
|
width: 0.65rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-radius: 100px;
|
|
|
|
|
font-size: 0.16rem;
|
|
|
|
|
padding: 0.04rem 0;
|
|
|
|
|
margin-left: 0.15rem;
|
|
|
|
|
|
|
|
|
|
&.on {
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
background: #1dd58e;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.car_speed {
|
|
|
|
|
margin-left: 0.35rem;
|
|
|
|
|
margin-right: 0.15rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.flex_box {
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 0 0.2rem;
|
|
|
|
|
margin-bottom: 0.1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.path_box {
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0.15rem;
|
|
|
|
|
|
|
|
|
|
.path_btn {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 0.88rem;
|
|
|
|
|
border-radius: 100px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #1b2f57;
|
|
|
|
|
font-style: italic;
|
|
|
|
|
font-family: FZSK;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background: #facd89;
|
|
|
|
|
font-size: 0.16rem;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
padding: 0.04rem 0;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
