fix: BUG
This commit is contained in:
parent
d8cb9b1cee
commit
6f593abe94
@ -65,14 +65,16 @@
|
|||||||
<div class="trip">
|
<div class="trip">
|
||||||
<div class="box-title">行程数据</div>
|
<div class="box-title">行程数据</div>
|
||||||
<div class="trip-warper">
|
<div class="trip-warper">
|
||||||
<div class="trip-top">
|
<div class="trip-top" style="display: none;">
|
||||||
<div>车牌号</div>
|
<div>车牌号</div>
|
||||||
<div style="padding: 0 6px;">
|
<div style="padding: 0 6px;">
|
||||||
<el-input placeholder="请输入车牌号"></el-input>
|
<el-input placeholder="请输入车牌号"></el-input>
|
||||||
</div>
|
</div>
|
||||||
<el-button size="small" type="primary">查询</el-button>
|
<el-button size="small" type="primary">查询</el-button>
|
||||||
</div>
|
</div>
|
||||||
<div id="map"></div>
|
<div id="map">
|
||||||
|
<bottomMap />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -84,6 +86,7 @@ import {
|
|||||||
initChartStatic,
|
initChartStatic,
|
||||||
} from "@/utils/bigscreenTool/index.js";
|
} from "@/utils/bigscreenTool/index.js";
|
||||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||||
|
import bottomMap from './map.vue'
|
||||||
window._AMapSecurityConfig = {
|
window._AMapSecurityConfig = {
|
||||||
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
|
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
|
||||||
};
|
};
|
||||||
@ -187,11 +190,12 @@ export default {
|
|||||||
map: null,
|
map: null,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
components: { bottomMap },
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initChart1();
|
this.initChart1();
|
||||||
this.initChart2();
|
this.initChart2();
|
||||||
this.initChart3();
|
this.initChart3();
|
||||||
this.initMap();
|
// this.initMap();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart1() {
|
initChart1() {
|
||||||
|
|||||||
236
god-ui/src/views/dataVisualization/visualization/map.vue
Normal file
236
god-ui/src/views/dataVisualization/visualization/map.vue
Normal file
@ -0,0 +1,236 @@
|
|||||||
|
<template>
|
||||||
|
<div class="project-gis-wrapper">
|
||||||
|
<div class="gis-head">
|
||||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
|
||||||
|
<el-form-item label="设备编号" prop="batteryType">
|
||||||
|
<el-select v-model="queryParams.equSelect" @change="changeEqu" placeholder="请选择动力电池类型" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="(item,index) in marks"
|
||||||
|
:key="item.loaderId"
|
||||||
|
:label="item.loaderName"
|
||||||
|
:value="item.loaderId"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div id="MiddleMap"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {formatDate} from '@/utils/index'
|
||||||
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||||
|
window._AMapSecurityConfig = {
|
||||||
|
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
map: null,
|
||||||
|
marks: [
|
||||||
|
{
|
||||||
|
location: [87.4006118796766, 43.82679818668806],
|
||||||
|
loaderId: '065b62f2db294aa6a5b5b27af2ab547e',
|
||||||
|
loaderName: '新能源装载机M-1', // 设备名称
|
||||||
|
loaderNo: 'L-498374501', // 设备编号
|
||||||
|
person: '张悦', // 操作员
|
||||||
|
time: this.getTime(), // 时间
|
||||||
|
work: '1.5小时', // 作业量
|
||||||
|
layout: '均匀分布', // 设备分布情况，
|
||||||
|
gpsData: [
|
||||||
|
[87.44902038797738, 43.82952266544106],
|
||||||
|
[87.44352722391488, 43.829027314917575],
|
||||||
|
[87.43751907572153, 43.829027314917575],
|
||||||
|
[87.42876434549692, 43.829027314917575],
|
||||||
|
[87.4277343772352, 43.82927499069319],
|
||||||
|
[87.42412948831918, 43.82828428142418],
|
||||||
|
[87.41554641947153, 43.82605512544534],
|
||||||
|
[87.4061050437391, 43.82655050063492],
|
||||||
|
[87.4006118796766, 43.82679818668806],
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
location: [87.6915349955857, 43.78811575249479],
|
||||||
|
loaderId: 'aea5e6dadd65480f81aae4ad8f83db94',
|
||||||
|
loaderName: '新能源装载机M-2', // 设备名称
|
||||||
|
loaderNo: 'L-498374975', // 设备编号
|
||||||
|
person: '孙勇', // 操作员
|
||||||
|
time: this.getTime(), // 时间
|
||||||
|
work: '1.8小时', // 作业量
|
||||||
|
layout: '均匀分布', // 设备分布情况，
|
||||||
|
gpsData: [
|
||||||
|
[87.68831634476783, 43.78241502284148],
|
||||||
|
[87.68994712784888, 43.7832825602499],
|
||||||
|
[87.69230747178199, 43.78415008506915],
|
||||||
|
[87.69320869401099, 43.78458384275784],
|
||||||
|
[87.69462490037085, 43.78529643784246],
|
||||||
|
[87.69398117020728, 43.78582313309756],
|
||||||
|
[87.69286537125708, 43.78678356543937],
|
||||||
|
[87.69183540299537, 43.787651039452236],
|
||||||
|
[87.6915349955857, 43.78811575249479],
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
location: [87.58290724173185, 43.9817192052365],
|
||||||
|
loaderId: 'd9a92c66e3554d7b9b31ed7ac2694138',
|
||||||
|
loaderName: '新能源装载机Z-1', // 设备名称
|
||||||
|
loaderNo: 'L-498374485', // 设备编号
|
||||||
|
person: '王燕飞', // 操作员
|
||||||
|
time: this.getTime(), // 时间
|
||||||
|
work: '1.7小时', // 作业量
|
||||||
|
layout: '均匀分布', // 设备分布情况，
|
||||||
|
gpsData: [
|
||||||
|
[87.58307890310886, 43.97424572040294],
|
||||||
|
[87.58222059622403, 43.97535753803469],
|
||||||
|
[87.58153395071628, 43.97640756890671],
|
||||||
|
[87.58076147451999, 43.97761199321937],
|
||||||
|
[87.57981733694675, 43.978785511358865],
|
||||||
|
[87.57947401419284, 43.9791560912159],
|
||||||
|
[87.57870153799655, 43.98066926829438],
|
||||||
|
[87.57865862265226, 43.981533923595926],
|
||||||
|
[87.58063272848722, 43.98165744475388],
|
||||||
|
[87.58290724173185, 43.9817192052365],
|
||||||
|
]
|
||||||
|
},
|
||||||
|
],
|
||||||
|
queryParams: {
|
||||||
|
equSelect: null,
|
||||||
|
lists: []
|
||||||
|
},
|
||||||
|
AMap: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initMiddleMap()
|
||||||
|
this.getTime()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initMiddleMap() {
|
||||||
|
AMapLoader.load({
|
||||||
|
key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||||
|
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
|
}).then((AMap) => {
|
||||||
|
this.AMap = AMap
|
||||||
|
this.map = new AMap.Map("MiddleMap", {
|
||||||
|
zoom: 13,//级别
|
||||||
|
center: [87.52746963724496, 43.84122412572595], //中心点坐标
|
||||||
|
});
|
||||||
|
this.map.on('mapmove', () => {
|
||||||
|
})
|
||||||
|
this.map.on('click', (e) => {
|
||||||
|
console.log('e', e);
|
||||||
|
navigator.clipboard.writeText(`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`)
|
||||||
|
})
|
||||||
|
const marks = this.marks;
|
||||||
|
marks.forEach(item => {
|
||||||
|
this.addMapMarker(item.location, 'car2', item)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 添加图形点标记
|
||||||
|
addMapMarker(LngLatData = [], type = '', info = {}) {
|
||||||
|
const marker = new this.AMap.Marker({
|
||||||
|
position: new this.AMap.LngLat(LngLatData[0], LngLatData[1]),
|
||||||
|
offset: new this.AMap.Pixel(-30, -52),
|
||||||
|
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||||
|
title: ''
|
||||||
|
});
|
||||||
|
this.map.add(marker);
|
||||||
|
marker.on('click', () => {
|
||||||
|
this.showInfoWindow(LngLatData[0], LngLatData[1], info)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 显示信息窗体
|
||||||
|
showInfoWindow(lng, lat, sourceInfo = {}) {
|
||||||
|
const partTemplate = (name, value) => `<div style="color: aqua;width: 240px;display: flex;justify-content: space-between;padding: 6px 0;">
|
||||||
|
<span>${name}</span>
|
||||||
|
<span style="color: white;">${value}</span>
|
||||||
|
</div>`
|
||||||
|
const content = `<div style="padding: 10px 13px;background-color:#7886ac;">
|
||||||
|
${partTemplate('设备名称', sourceInfo.loaderName)}
|
||||||
|
${partTemplate('设备编号', sourceInfo.loaderNo)}
|
||||||
|
${partTemplate('操作员', sourceInfo.person)}
|
||||||
|
${partTemplate('时间', sourceInfo.time)}
|
||||||
|
${partTemplate('工时', sourceInfo.work)}
|
||||||
|
</div>`;
|
||||||
|
this.map.setZoom(15);
|
||||||
|
this.map.setCenter([lng, lat]);
|
||||||
|
const polyline = new this.AMap.Polyline({
|
||||||
|
map: this.map,
|
||||||
|
path: sourceInfo.gpsData,
|
||||||
|
showDir: true,
|
||||||
|
strokeColor: "#28F", //线颜色
|
||||||
|
// strokeOpacity: 1, //线透明度
|
||||||
|
strokeWeight: 6, //线宽
|
||||||
|
// strokeStyle: "solid" //线样式
|
||||||
|
});
|
||||||
|
const infoWindow = new this.AMap.InfoWindow({
|
||||||
|
content,
|
||||||
|
anchor: 'middle-left',
|
||||||
|
isCustom: true
|
||||||
|
});
|
||||||
|
infoWindow.open(this.map, [lng, lat])
|
||||||
|
},
|
||||||
|
|
||||||
|
//获取当前时间yyyy-MM-dd HH:mm:ss
|
||||||
|
getTime() {
|
||||||
|
const time = formatDate(new Date());
|
||||||
|
return time;
|
||||||
|
},
|
||||||
|
|
||||||
|
//选择设备
|
||||||
|
changeEqu(value) {
|
||||||
|
const lists = this.marks.filter(item => {
|
||||||
|
return item.loaderId === value
|
||||||
|
})
|
||||||
|
console.log(lists)
|
||||||
|
if (lists.length > 0) {
|
||||||
|
this.queryParams.lists = lists
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
//查询
|
||||||
|
handleQuery() {
|
||||||
|
console.log(this.queryParams.lists)
|
||||||
|
if (this.queryParams.lists.length > 0) {
|
||||||
|
let lists = this.queryParams.lists;
|
||||||
|
this.showInfoWindow(lists[0].location[0], lists[0].location[1], lists[0])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.project-gis-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid #25252525;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.gis-head {
|
||||||
|
position: relative;
|
||||||
|
z-index: 999;
|
||||||
|
background-color: #ffffffdf;
|
||||||
|
padding: 14px 0 0 10px;
|
||||||
|
width: 450px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #252525a7;
|
||||||
|
}
|
||||||
|
|
||||||
|
#MiddleMap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user