接口调用结束

components.d.ts

@@ -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']

src/components/customCom/equipmentDialog.vue

@@ -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)

src/components/customCom/equipmentLeasing.vue

@@ -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) {
+        } else if (params.value[2] ==3) {
-            return '#0ff';
-        } else if (params.value[2] > 300 && params.value[2] <= 400) {
             return '#ff0';
         }
     },
     effectScatterCallBack: (params: any) => {
-        console.log("equipmentDialogRef", params.data.name)
+        console.log("equipmentDialogRef999", params.data.name)
         equipmentDialogRef.value.open(params.data.name)
     },
-    seriesData: []
+    seriesData:[]
-    //  [{ name: '肇庆市', value: [112.48461, 23.05196, 100] },
+    //  [{ name: '肇庆市', value: [112.48461, 23.05196, 1] },
-    // { name: '佛山市', value: [110.130214, 23.018978, 200] },
+    // { name: '佛山市', value: [110.130214, 23.018978, 1] },
-    // { name: '广州', value: [115.261081, 23.139856, 300] },
+    // { name: '广州', value: [115.261081, 23.139856, 1] },
-    // { name: '南宁', value: [107.45, 22.139856, 400] },
+    // { name: '南宁', value: [107.45, 22.139856, 1] },
-    // { name: '贵阳', value: [106.7, 26.36, 200] },
+    // { name: '贵阳', value: [106.7, 26.36, 1] },
-    // { name: '昆明', value: [102.33, 24.23, 300] }   ,
+    // { name: '昆明', value: [102.33, 24.23, 1] }   ,
-    // { name: '海口', value: [110.33,19.823, 10] }]
+    // { 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
                     }

src/components/mapBaidu/mapLine copy.vue

@@ -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>

src/components/mapBaidu/mapLine.vue

@@ -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");
+    map = new BMap.Map("equipmentIdMap" + domId.value);
-    point = new BMap.Point(116.3964, 39.9093)
     map.centerAndZoom(new BMap.Point(116.3944, 39.9063), 18);
     console.log("map", map)
     map.enableScrollWheelZoom();
     setTimeout(() => {
-        initCustomDot()
+        // initCustomDot()
-        const startIcon ={
+        const startIcon = {
-            imgUrl:'/src/assets/img/mapStart.png',
+            imgUrl: '/src/assets/img/mapStart.png',
-            position:[116.3964, 39.9093],
+            position: [116.3964, 39.9093],
-            size:[60,60]
+            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 = () => {
+const initCustomDot = (centerPoint: any) => {
-    function ComplexCustomOverlay(point) {
+    function ComplexCustomOverlay(centerPoint) {
-        this._point = point;
-
     }
     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(centerPoint);
-        const pixel = map.pointToOverlayPixel(new BMap.Point(116.3964, 39.9093));
         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([
+    var polyline = new BMap.Polyline(linePointList, { strokeColor: '#0788e6', strokeWeight: 4, strokeOpacity: 1. });
-        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. });
     map.addOverlay(polyline);
-   
-  
-
 }
 
-const initIcon=(imgUrl:any,position:any,size:any)=>{
+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));
+    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 setViewPortFn = () => {
-    const  boundList =[
+    const boundList = linePointList
-        new BMap.Point(116.3964, 39.9093),
-        new BMap.Point(116.3944, 39.9063),
-        new BMap.Point(116.3954, 39.9123),
-    ]
     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 {
+    try {
-    const res:any = await apiBmCompanyInfoTimeListTime(val)
+        const res: any = await apiBmCompanyInfoTimeListTime(val)
-    console.log("apiBmCompanyInfoTimeListTime", res)
+        domShow.value = true
- 
+        console.log("apiBmCompanyInfoTimeListTime", res)
-} catch (error) {
+        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({

src/http/api/echartApi.ts

@@ -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,{})
 }