接口调用结束
This commit is contained in:
parent
cf45657679
commit
a330a7d102
|
|
@ -9,6 +9,7 @@ declare module 'vue' {
|
|||
export interface GlobalComponents {
|
||||
BarCom: typeof import('./src/components/echartsCom/barCom.vue')['default']
|
||||
CloudWords: typeof import('./src/components/echartsCom/CloudWords.vue')['default']
|
||||
copy: typeof import('./src/components/mapBaidu/mapLine copy.vue')['default']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
|
|
@ -24,6 +25,7 @@ declare module 'vue' {
|
|||
MapEcharts: typeof import('./src/components/echarts/mapEcharts.vue')['default']
|
||||
MapEcharts2: typeof import('./src/components/echartsCom/mapEcharts2.vue')['default']
|
||||
MapLine: typeof import('./src/components/mapBaidu/mapLine.vue')['default']
|
||||
'MapLine copy': typeof import('./src/components/mapBaidu/mapLine copy.vue')['default']
|
||||
Pie3dCom: typeof import('./src/components/echartsCom/Pie3dCom.vue')['default']
|
||||
Pie3dCom1: typeof import('./src/components/echartsCom/Pie3dCom1.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ import moment from "moment";
|
|||
const mapLineShow = ref(false)
|
||||
const mapLineRef = ref()
|
||||
const timeRange = ref<[Date, Date]>([
|
||||
new Date(2023, 11, 10, 10, 10),
|
||||
new Date(2022, 11, 10, 10, 10),
|
||||
new Date(2023, 12, 19, 10, 10),
|
||||
])
|
||||
const detailsInfo = reactive({
|
||||
|
|
@ -100,6 +100,7 @@ const searchByTimeFn=()=>{
|
|||
startTime:moment(timeRange.value[0]).format('YYYY.MM.DD'),
|
||||
endTime:moment(timeRange.value[1]).format('YYYY.MM.DD'),
|
||||
id:maId
|
||||
// id:1
|
||||
}
|
||||
mapLineRef.value.initMapLine(params)
|
||||
}
|
||||
|
|
@ -112,6 +113,7 @@ const open = (maId:any) => {
|
|||
startTime:moment(timeRange.value[0]).format('YYYY.MM.DD'),
|
||||
endTime:moment(timeRange.value[1]).format('YYYY.MM.DD'),
|
||||
id:maId
|
||||
// id:1
|
||||
}
|
||||
setTimeout(()=>{
|
||||
mapLineRef.value.initMapLine(params)
|
||||
|
|
|
|||
|
|
@ -182,28 +182,26 @@ const mapProps = reactive({
|
|||
},
|
||||
itemColorFormat: (params: any) => {
|
||||
console.log("params001", params)
|
||||
if (params.value[2] > 0 && params.value[2] <= 100) {
|
||||
if (params.value[2] ==2) {
|
||||
return '#00ff31';
|
||||
} else if (params.value[2] > 100 && params.value[2] <= 200) {
|
||||
} else if (params.value[2] ==1) {
|
||||
return '#f00';
|
||||
} else if (params.value[2] > 200 && params.value[2] <= 300) {
|
||||
return '#0ff';
|
||||
} else if (params.value[2] > 300 && params.value[2] <= 400) {
|
||||
} else if (params.value[2] ==3) {
|
||||
return '#ff0';
|
||||
}
|
||||
},
|
||||
effectScatterCallBack: (params: any) => {
|
||||
console.log("equipmentDialogRef", params.data.name)
|
||||
console.log("equipmentDialogRef999", params.data.name)
|
||||
equipmentDialogRef.value.open(params.data.name)
|
||||
},
|
||||
seriesData: []
|
||||
// [{ name: '肇庆市', value: [112.48461, 23.05196, 100] },
|
||||
// { name: '佛山市', value: [110.130214, 23.018978, 200] },
|
||||
// { name: '广州', value: [115.261081, 23.139856, 300] },
|
||||
// { name: '南宁', value: [107.45, 22.139856, 400] },
|
||||
// { name: '贵阳', value: [106.7, 26.36, 200] },
|
||||
// { name: '昆明', value: [102.33, 24.23, 300] } ,
|
||||
// { name: '海口', value: [110.33,19.823, 10] }]
|
||||
seriesData:[]
|
||||
// [{ name: '肇庆市', value: [112.48461, 23.05196, 1] },
|
||||
// { name: '佛山市', value: [110.130214, 23.018978, 1] },
|
||||
// { name: '广州', value: [115.261081, 23.139856, 1] },
|
||||
// { name: '南宁', value: [107.45, 22.139856, 1] },
|
||||
// { name: '贵阳', value: [106.7, 26.36, 1] },
|
||||
// { name: '昆明', value: [102.33, 24.23, 1] } ,
|
||||
// { name: '海口', value: [110.33,19.823, 1] }]
|
||||
})
|
||||
let listData: any = []
|
||||
const mapDataByProvice = (provinceName: String) => {
|
||||
|
|
@ -271,7 +269,7 @@ const iniTapibmCompanyInfoColtdList = async () => {
|
|||
if (!uniqueInfo[subEle.maId]) {
|
||||
seriresData.push({
|
||||
name: subEle.maId,
|
||||
value: [Number(subEle.lon), Number(subEle.lat),eleS.count]
|
||||
value: [Number(subEle.lon), Number(subEle.lat),eleS.count,3]
|
||||
})
|
||||
uniqueInfo[subEle.maId] = true
|
||||
}
|
||||
|
|
@ -287,7 +285,7 @@ const iniTapibmCompanyInfoColtdList = async () => {
|
|||
if (!uniqueInfo[subEle.maId]) {
|
||||
seriresData.push({
|
||||
name: subEle.maId,
|
||||
value: [Number(subEle.lon), Number(subEle.lat),eleS.count]
|
||||
value: [Number(subEle.lon), Number(subEle.lat),eleS.count,2]
|
||||
})
|
||||
uniqueInfo[subEle.maId] = true
|
||||
}
|
||||
|
|
@ -302,7 +300,7 @@ const iniTapibmCompanyInfoColtdList = async () => {
|
|||
if (!uniqueInfo[subEle.maId]) {
|
||||
seriresData.push({
|
||||
name: subEle.maId,
|
||||
value: [Number(subEle.lon), Number(subEle.lat),eleS.count]
|
||||
value: [Number(subEle.lon), Number(subEle.lat),eleS.count,1]
|
||||
})
|
||||
uniqueInfo[subEle.maId] = true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,164 @@
|
|||
<template>
|
||||
<div id="equipmentIdMap" class="map">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getImg } from "@/utils/index"
|
||||
import { apiBmCompanyInfoTimeListTime } from "http/api/echartApi"
|
||||
let map: any = null
|
||||
let point: any = null
|
||||
onMounted(() => {
|
||||
console.log("map", "map")
|
||||
|
||||
})
|
||||
|
||||
const linePointList:any = []
|
||||
let centerPoint:any = null
|
||||
const initMap = () => {
|
||||
map = new BMap.Map("equipmentIdMap");
|
||||
|
||||
map.centerAndZoom(new BMap.Point(116.3944, 39.9063), 18);
|
||||
console.log("map", map)
|
||||
map.enableScrollWheelZoom();
|
||||
setTimeout(() => {
|
||||
|
||||
const startIcon = {
|
||||
imgUrl: '/src/assets/img/mapStart.png',
|
||||
position: [116.3964, 39.9093],
|
||||
size: [60, 60]
|
||||
|
||||
}
|
||||
|
||||
const endIcon = {
|
||||
imgUrl: '/src/assets/img/mapStart.png',
|
||||
position: [116.3964, 39.9093],
|
||||
size: [60, 60]
|
||||
|
||||
}
|
||||
initIcon(startIcon.imgUrl, startIcon.position, startIcon.size)
|
||||
initIcon(endIcon.imgUrl, endIcon.position, endIcon.size)
|
||||
initCustomDot(centerPoint)
|
||||
|
||||
initPolyline()
|
||||
setViewPortFn()
|
||||
}, 200)
|
||||
}
|
||||
|
||||
|
||||
const initCustomDot = (point:any) => {
|
||||
function ComplexCustomOverlay(point) {
|
||||
this._point = point;
|
||||
|
||||
}
|
||||
ComplexCustomOverlay.prototype = new BMap.Overlay();
|
||||
ComplexCustomOverlay.prototype.initialize = function (map) {
|
||||
const div = this._div = document.createElement("div");
|
||||
div.style.position = "absolute";
|
||||
div.style.width = "30px";
|
||||
div.style.height = "30px";
|
||||
div.style.background = "#fff";
|
||||
div.style.borderRadius = "50%";
|
||||
const divInner = this._divInner = document.createElement("div");
|
||||
divInner.style.position = "absolute";
|
||||
divInner.style.width = "20px";
|
||||
divInner.style.height = "20px";
|
||||
divInner.style.left = "5px";
|
||||
divInner.style.top = "5px";
|
||||
divInner.style.background = "#0788e6";
|
||||
divInner.style.borderRadius = "50%";
|
||||
map.getPanes().labelPane.appendChild(div);
|
||||
map.getPanes().labelPane.appendChild(divInner);
|
||||
|
||||
return div;
|
||||
}
|
||||
ComplexCustomOverlay.prototype.draw = function () {
|
||||
|
||||
const pixel = map.pointToOverlayPixel(point);
|
||||
this._div.style.left = pixel.x + "px";
|
||||
this._div.style.top = pixel.y + "px";
|
||||
this._divInner.style.left = pixel.x + 5 + "px";
|
||||
this._divInner.style.top = pixel.y + 5 + "px";
|
||||
}
|
||||
const myCompOverlay: any = new ComplexCustomOverlay(point);
|
||||
map.addOverlay(myCompOverlay);
|
||||
}
|
||||
|
||||
|
||||
const initPolyline = () => {
|
||||
var polyline = new BMap.Polyline(linePointList, { strokeColor: "blue", strokeWeight: 8, strokeOpacity: 1. });
|
||||
map.addOverlay(polyline);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
const initIcon = (imgUrl: any, position: any, size: any) => {
|
||||
var myIcon = new BMap.Icon("https://api.map.baidu.com/img/markers.png", new BMap.Size(60, 60));
|
||||
// 创建Marker标注，使用小车图标
|
||||
var pt = new BMap.Point(...position);
|
||||
var marker = new BMap.Marker(pt, {
|
||||
icon: myIcon
|
||||
});
|
||||
// 将标注添加到地图
|
||||
map.addOverlay(marker);
|
||||
}
|
||||
|
||||
const setViewPortFn = () => {
|
||||
const boundList =linePointList
|
||||
map.setViewport(boundList)
|
||||
}
|
||||
|
||||
|
||||
// var pointArr = [new BMap.Point(106.607421,29.570857),new BMap.Point(106.620931,29.586185)];
|
||||
|
||||
const getcenterpoiont=(pointStart:any,pointEnd:any)=>{
|
||||
const lng1 = parseFloat(pointStart.lng);
|
||||
const lat1 = parseFloat(pointStart.lat);
|
||||
|
||||
const lng2 = parseFloat(pointEnd.lng);
|
||||
const lat2 = parseFloat(pointEnd.lat);
|
||||
|
||||
const lngca = (Math.max(lng1,lng2)-Math.min(lng1,lng2))/2;
|
||||
const latca = (Math.max(lat1,lat2)-Math.min(lat1,lat2))/2;
|
||||
|
||||
const lngcenter = Math.min(lng1,lng2)+lngca;
|
||||
const latcenter = Math.min(lat1,lat2)+latca;
|
||||
|
||||
const pointcenter = new BMap.Point(lngcenter,latcenter);
|
||||
return pointcenter;
|
||||
|
||||
}
|
||||
const initMapLine = (params: any) => {
|
||||
|
||||
initApiBmCompanyInfoTimeListTime(params)
|
||||
}
|
||||
|
||||
const initApiBmCompanyInfoTimeListTime = async (val: any) => {
|
||||
|
||||
try {
|
||||
const res: any = await apiBmCompanyInfoTimeListTime(val)
|
||||
console.log("apiBmCompanyInfoTimeListTime", res)
|
||||
res.forEach((ele:any) => {
|
||||
linePointList.push( new BMap.Point(Number(ele.lon),Number(ele.lat)))
|
||||
})
|
||||
centerPoint = getcenterpoiont(res[0],res[res.length-1])
|
||||
initMap()
|
||||
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
defineExpose({
|
||||
initMapLine
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,46 +1,53 @@
|
|||
<template>
|
||||
<div id="equipmentIdMap" class="map">
|
||||
<div v-if="domShow" :id="'equipmentIdMap' + domId" class="map">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getImg } from "@/utils/index"
|
||||
import { fa, tr } from "element-plus/es/locale";
|
||||
import { apiBmCompanyInfoTimeListTime } from "http/api/echartApi"
|
||||
import { parseArgs } from "util";
|
||||
let map: any = null
|
||||
let point: any = null
|
||||
let centerPoint: any = null
|
||||
let domId = ref("0")
|
||||
let domShow = ref(false)
|
||||
onMounted(() => {
|
||||
console.log("map", "map")
|
||||
initMap()
|
||||
})
|
||||
|
||||
const linePointList: any = []
|
||||
|
||||
const initMap = () => {
|
||||
map = new BMap.Map("equipmentIdMap");
|
||||
point = new BMap.Point(116.3964, 39.9093)
|
||||
map = new BMap.Map("equipmentIdMap" + domId.value);
|
||||
map.centerAndZoom(new BMap.Point(116.3944, 39.9063), 18);
|
||||
console.log("map", map)
|
||||
map.enableScrollWheelZoom();
|
||||
setTimeout(() => {
|
||||
initCustomDot()
|
||||
const startIcon ={
|
||||
imgUrl:'/src/assets/img/mapStart.png',
|
||||
position:[116.3964, 39.9093],
|
||||
size:[60,60]
|
||||
// initCustomDot()
|
||||
const startIcon = {
|
||||
imgUrl: '/src/assets/img/mapStart.png',
|
||||
position: [116.3964, 39.9093],
|
||||
size: [60, 60]
|
||||
|
||||
}
|
||||
initIcon(startIcon.imgUrl,startIcon.position,startIcon.size)
|
||||
|
||||
const endIcon = {
|
||||
imgUrl: '/src/assets/img/mapStart.png',
|
||||
position: [116.3964, 39.9093],
|
||||
size: [60, 60]
|
||||
|
||||
}
|
||||
initIcon(startIcon.imgUrl, startIcon.position, startIcon.size)
|
||||
initIcon(endIcon.imgUrl, endIcon.position, endIcon.size)
|
||||
initPolyline()
|
||||
setViewPortFn()
|
||||
},200)
|
||||
}, 200)
|
||||
}
|
||||
|
||||
|
||||
const initCustomDot = () => {
|
||||
function ComplexCustomOverlay(point) {
|
||||
this._point = point;
|
||||
|
||||
const initCustomDot = (centerPoint: any) => {
|
||||
function ComplexCustomOverlay(centerPoint) {
|
||||
}
|
||||
ComplexCustomOverlay.prototype = new BMap.Overlay();
|
||||
ComplexCustomOverlay.prototype.initialize = function (map) {
|
||||
|
|
@ -64,32 +71,24 @@ const initCustomDot = () => {
|
|||
return div;
|
||||
}
|
||||
ComplexCustomOverlay.prototype.draw = function () {
|
||||
|
||||
const pixel = map.pointToOverlayPixel(new BMap.Point(116.3964, 39.9093));
|
||||
const pixel = map.pointToOverlayPixel(centerPoint);
|
||||
this._div.style.left = pixel.x + "px";
|
||||
this._div.style.top = pixel.y + "px";
|
||||
this._divInner.style.left = pixel.x + 5 + "px";
|
||||
this._divInner.style.top = pixel.y + 5 + "px";
|
||||
}
|
||||
const myCompOverlay: any = new ComplexCustomOverlay(new BMap.Point(116.3964, 39.9093));
|
||||
const myCompOverlay: any = new ComplexCustomOverlay(centerPoint);
|
||||
map.addOverlay(myCompOverlay);
|
||||
}
|
||||
|
||||
|
||||
const initPolyline = () => {
|
||||
var polyline = new BMap.Polyline([
|
||||
new BMap.Point(116.3964, 39.9093),
|
||||
new BMap.Point(116.3944, 39.9063),
|
||||
new BMap.Point(116.3954, 39.9123),
|
||||
], { strokeColor: "blue", strokeWeight: 8, strokeOpacity: 1. });
|
||||
var polyline = new BMap.Polyline(linePointList, { strokeColor: '#0788e6', strokeWeight: 4, strokeOpacity: 1. });
|
||||
map.addOverlay(polyline);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
const initIcon=(imgUrl:any,position:any,size:any)=>{
|
||||
var myIcon = new BMap.Icon("https://api.map.baidu.com/img/markers.png", new BMap.Size(60,60));
|
||||
const initIcon = (imgUrl: any, position: any, size: any) => {
|
||||
var myIcon = new BMap.Icon("https://api.map.baidu.com/img/markers.png", new BMap.Size(60, 60));
|
||||
// 创建Marker标注，使用小车图标
|
||||
var pt = new BMap.Point(...position);
|
||||
var marker = new BMap.Marker(pt, {
|
||||
|
|
@ -99,28 +98,56 @@ const initIcon=(imgUrl:any,position:any,size:any)=>{
|
|||
map.addOverlay(marker);
|
||||
}
|
||||
|
||||
const setViewPortFn=()=>{
|
||||
const boundList =[
|
||||
new BMap.Point(116.3964, 39.9093),
|
||||
new BMap.Point(116.3944, 39.9063),
|
||||
new BMap.Point(116.3954, 39.9123),
|
||||
]
|
||||
const setViewPortFn = () => {
|
||||
const boundList = linePointList
|
||||
map.setViewport(boundList)
|
||||
}
|
||||
|
||||
const initMapLine=(params:any)=>{
|
||||
|
||||
// var pointArr = [new BMap.Point(106.607421,29.570857),new BMap.Point(106.620931,29.586185)];
|
||||
|
||||
const getcenterpoiont = (pointStart: any, pointEnd: any) => {
|
||||
const lng1 = Number(pointStart.lon);
|
||||
const lat1 = Number(pointStart.lat);
|
||||
|
||||
const lng2 = Number(pointEnd.lon);
|
||||
const lat2 = Number(pointEnd.lat);
|
||||
|
||||
const lngca = (Math.max(lng1, lng2) - Math.min(lng1, lng2)) / 2;
|
||||
const latca = (Math.max(lat1, lat2) - Math.min(lat1, lat2)) / 2;
|
||||
|
||||
const lngcenter = Math.min(lng1, lng2) + lngca;
|
||||
const latcenter = Math.min(lat1, lat2) + latca;
|
||||
|
||||
const pointcenter = new BMap.Point(lngcenter, latcenter);
|
||||
return pointcenter;
|
||||
|
||||
}
|
||||
const initMapLine = (params: any) => {
|
||||
domId.value = params.id
|
||||
domShow.value = false
|
||||
initApiBmCompanyInfoTimeListTime(params)
|
||||
}
|
||||
|
||||
const initApiBmCompanyInfoTimeListTime = async (val:any) => {
|
||||
const initApiBmCompanyInfoTimeListTime = async (val: any) => {
|
||||
|
||||
try {
|
||||
const res:any = await apiBmCompanyInfoTimeListTime(val)
|
||||
console.log("apiBmCompanyInfoTimeListTime", res)
|
||||
|
||||
} catch (error) {
|
||||
try {
|
||||
const res: any = await apiBmCompanyInfoTimeListTime(val)
|
||||
domShow.value = true
|
||||
console.log("apiBmCompanyInfoTimeListTime", res)
|
||||
res.forEach((ele: any) => {
|
||||
linePointList.push(new BMap.Point(Number(ele.lon), Number(ele.lat)))
|
||||
})
|
||||
nextTick(() => {
|
||||
initMap()
|
||||
centerPoint = getcenterpoiont(res[0], res[res.length - 1])
|
||||
console.log("centerPoint", centerPoint)
|
||||
initCustomDot(centerPoint)
|
||||
})
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
defineExpose({
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export function apiBmaDevInfoList(maId:any) {
|
|||
}
|
||||
// 根据时间查询设备历史经纬度
|
||||
export function apiBmCompanyInfoTimeListTime(params:any) {
|
||||
const urlStr= `bmCompanyInfo/time-list/${params.startTime}/${params.endTime}`
|
||||
const urlStr= `bmCompanyInfo/time-list/${params.startTime}/${params.endTime}/${params.id}`
|
||||
return get(urlStr,{})
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue