From 6426fb112c41bb28ab426e058ef76b77025008e5 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Wed, 18 Oct 2023 10:51:36 +0800 Subject: [PATCH] fix:路径规划修改 --- src/views/list/road.vue | 176 +++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 129 insertions(+), 47 deletions(-) diff --git a/src/views/list/road.vue b/src/views/list/road.vue index 972992d..474d86c 100644 --- a/src/views/list/road.vue +++ b/src/views/list/road.vue @@ -2,17 +2,10 @@ <div style="display: flex; overflow: hidden"> <div class="left"> <div class="left-one"> - <a-range-picker - v-model="timevalue" - show-time - @ok="change1()" - valueFormat="yyyy-MM-DD HH:MM:SS" - style="width: 200px" - /> <a-select ref="select" v-model="carvalue" - style="width: 200px; margin-left: 10px" + style="width: 180px" placeholder="������������������" > <a-select-option @@ -22,11 +15,31 @@ >{{ item.name }}</a-select-option > </a-select> + <a-range-picker + v-model="timevalue" + :show-time="{ format: 'HH:mm' }" + @ok="change1()" + format="YYYY-MM-DD HH:mm" + style="width: 175px; margin-left: 10px" + /> + <a-button type="primary" style="margin-left: 10px" @click="selectCar" >������</a-button > + <a-button type="primary" style="margin-left: 10px" @click="selectCheck" + >������</a-button + > </div> - + <div class="left-five"> + <a-input + style="width: 300px; margin-left: 0px" + v-model="selectLuName" + placeholder="���������������������" + /> + <a-button type="primary" style="margin-left: 10px" @click="selectLu" + >������</a-button + > + </div> <div class="left-two"> <a-table :dataSource="dataSource" @@ -110,26 +123,40 @@ <div> <div> <span style="font-size: 17.5px; color: black; margin-left: 50px" - >������ :</span + >������������ :</span > <a-input style="width: 300px; margin-left: 15px" - placeholder="���������������" + placeholder="���������������������" v-model="startLu" /> </div> - <div style="margin-top: 10px; margin-left: 50px"> + <!-- <div style="margin-top: 10px; margin-left: 50px"> <span style="font-size: 17.5px; color: black">������ :</span> <a-input style="width: 300px; margin-left: 15px" placeholder="���������������" v-model="endLu" /> - </div> + </div> --> </div> </a-modal> <div class="right"> <div id="roadmap" class="roadmap"></div> + </div> + <div class="fixeds" v-show="showfix === true"> + <div style="font-size: 20px; margin-left: 50px; margin-top: 50px"> + {{ messageshow }} + </div> + + <div style="font-size: 20px; margin-left: 50px"> + <a-button + type="primary" + style="margin-top: 20px; float: right; margin-right: 20px" + @click="closemess" + >������</a-button + > + </div> </div> </div> </template> @@ -141,6 +168,7 @@ import axios from "axios"; import { jsonp } from 'vue-jsonp' import any = jasmine.any; +import { da } from "date-fns/locale"; @Component({ @@ -173,12 +201,8 @@ private tableLoading: boolean = false; private columns: any[] = [ { - title: "������", + title: "������������", dataIndex: "startPoint" - }, - { - title: "������", - dataIndex: "endPoint" }, { title: "������", @@ -191,9 +215,15 @@ private startLu:any='' private endLu:any='' private insertCarLu(){ + if(this.carvalue==='������������������'){ + this.$message.warning('���������������������������!') + return + } + post('coordinate/interCruiserRoad',{ startPoint:this.startLu, - endPoint:this.endLu + mac:this.carvalue + }).then((res)=>{ console.log(res); this.$message.success(res.data.message) @@ -203,6 +233,7 @@ this.selectLu() }) } + private opRender(text: string, record: any, index: number) { return ( <div style="width:180px"> @@ -240,19 +271,20 @@ private batchid:any=0 private batchshow:boolean=false private handleEditbatch(record){ + this.check=false this.startstate='batch' this.batchshow=true this.selectCar(); this.batchid=record.coordinateId } private handlebatch(){ + this.selectCar() this.batchshow=false this.handlenull(); } private handlenull(){ this.starttime='' this.endtime='' - } private insertbatch(){ post('coordinateDetail/batch',{ @@ -271,6 +303,7 @@ private upa='' private recordid:any=0 private handleEditModalVisible(record){ + this.check=false this.handlebatch() this.startstate='none' this.upa='upa' @@ -291,7 +324,6 @@ time2:this.timevalue[1], mac:this.carvalue, }).then((res)=>{ - console.log(res); this.carDate=[] this.pointshow=true this.setMarker(res) @@ -302,7 +334,6 @@ coordinateId:this.recordid, data:this.dataList }).then((res)=>{ - console.log(res); this.$message.success(res.data.message) this.upa='' this.dataList=[] @@ -312,6 +343,7 @@ } private inupa(){ this.upa='' + this.selectCar() } private carvalue:any='������������������' private carIndex:any=[] @@ -321,6 +353,37 @@ this.carIndex=res.data.data; console.log(this.carIndex); }) + } + private check:boolean=false + private showfix:boolean=false + private messageshow:any='' + private selectCheck(){ + if(this.carvalue==='������������������'){ + this.$message.warning('������������������') + return + } + if(this.timevalue.length===0){ + this.$message.warning('���������������') + return + } + get('cruiserInfo/getCruiserCompare',{ + mac:this.carvalue, + // time1:'2023-08-05 00:00:00', + // time2:'2023-08-06 00:00:00' + time1:this.timevalue[0], + time2:this.timevalue[1] + }).then((res)=>{ + console.log(res.data.data,'res'); + this.messageshow=res.data.data.message + this.showfix=true + // this.check=true + this.carDate=[] + this.pointshow=false + this.setMarker(res) + }) + } + private closemess(){ + this.showfix=false } private carDate:any=[] private selectCar(){ @@ -355,24 +418,18 @@ private carDataList:any=[] private starttime:any='' private endtime:any='' + private InfoWindow = null private startstate:any='none' private setMarker(res) { - console.log(res); const that=this that.carDate=[] that.carDataList=[] for(var i=0;i<res.data.data.rsData.length;i++){ - // res.data.data.rsData[i].flylat=res.data.data.rsData[i].flylat+'��'.toString() - // res.data.data.rsData[i].flylon=res.data.data.rsData[i].flylon+'��'.toString() that.carDate.push(res.data.data.rsData[i]) } for(var i=0;i<res.data.data.data.length;i++){ - // res.data.data.rsData[i].flylat=res.data.data.rsData[i].flylat+'��'.toString() - // res.data.data.rsData[i].flylon=res.data.data.rsData[i].flylon+'��'.toString() that.carDataList.push(res.data.data.data[i]) } - console.log(that.carDate,'that.carDate'); - console.log(that.carDataList,'that.carDataList'); that.map.clearOverlays() let bPoints = [] let aPoints = [] @@ -382,15 +439,25 @@ var myIcon = new BMapGL.Icon(require("@/assets/723cd95f31481a502d495b2d814d658.png"), new BMapGL.Size(50, 50), { }); const statePoint = new BMapGL.Point(that.carDate[i].flylon,that.carDate[i].flylat); - // console.log(statePoint,'statePoint'); bPoints.push(statePoint) - //���marker���������data��������� ������������������ that.marker[i] = new BMapGL.Marker(statePoint,{icon:myIcon}); that.marker[i].customData = {data: that.carDate[i].data,state: that.carDate[i].state}; + var infoWindow =''; + //that.marker[i].name = that.carDate[i].time; + that.marker[i].on('mouseover', function (e) { + infoWindow = new BMapGL.InfoWindow("������������:"+that.carDate[i].time); + that.map.openInfoWindow(infoWindow, statePoint); + }) + + that.marker[i].on('mouseout', function (e) { + that.map.closeInfoWindow(infoWindow, statePoint); + }) + // that.marker.setTitle(that.carDate[i].time); + //������������������marker that.map.addOverlay(that.marker[i]); + // if(that.check===false){ that.marker[i].addEventListener("click",function(){ - console.log(that.carDate[i].data,'that.carDate[i].data'); switch(that.carDate[i].state){ case '1': that.marker[i].setIcon(new BMapGL.Icon(require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"), new BMapGL.Size(50, 50) @@ -417,11 +484,8 @@ for (let i = 0; i < that.dataList.length; i++) { - /*������������������������������������*/ for (let j = i + 1; j < that.dataList.length; j++) { - //������������������������������������ if (that.dataList[i].code == that.dataList[j].code) { - //���������������������������������������������������������j��������������� that.dataList.splice(j, 1); if(that.dataList[i].state==='1'){ that.dataList[i].state='2' @@ -432,13 +496,14 @@ } } }); //������������ - } + // } + } + for (let i = 0; i < that.carDataList.length; i++) { - console.log(that.carDataList[i],'that.carDataList[i]'); + // console.log(that.carDataList[i],'that.carDataList[i]'); //������������point - var myIcon = new BMapGL.Icon(require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"), new BMapGL.Size(50, 50), { - }); + var myIcon = new BMapGL.Icon(require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"), new BMapGL.Size(50, 50)); const statePoint = new BMapGL.Point(that.carDataList[i].longitude,that.carDataList[i].latitude); // console.log(statePoint,'statePoint'); aPoints.push(statePoint) @@ -447,6 +512,7 @@ that.markerdata[i].customData = {data: that.carDataList[i].code,state: that.carDataList[i].state,id:that.carDataList[i].id}; //������������������marker that.map.addOverlay(that.markerdata[i]); + // if(that.check===false){ that.markerdata[i].addEventListener("click",function(){ switch(that.carDataList[i].state){ case '1': @@ -462,13 +528,10 @@ break; } that.dataList.push({code:that.carDataList[i].code,state:that.carDataList[i].state,id:that.carDataList[i].id}); - console.log(that.dataList); + // console.log(that.dataList); for (let i = 0; i < that.dataList.length; i++) { - /*������������������������������������*/ for (let j = i + 1; j < that.dataList.length; j++) { - //������������������������������������ if (that.dataList[i].code == that.dataList[j].code) { - //���������������������������������������������������������j��������������� that.dataList.splice(j, 1); if(that.dataList[i].state==='1'){ that.dataList[i].state='2' @@ -477,10 +540,10 @@ } } } - // that.indataList = Array.from(new Set(that.dataList)) } }); //������������ - } + // } + } //��������������������������������������� if(that.pointshow===false){ @@ -490,15 +553,22 @@ } } } + private setZoom(bPoints) { var view = this.map.getViewport(eval(bPoints)); var mapZoom = view.zoom; var centerPoint = view.center; this.map.centerAndZoom(centerPoint, mapZoom); } - + private selectLuName:any=null private selectLu(){ + var macType = null + if(this.carvalue!=='������������������'){ + macType = this.carvalue; + } get('coordinate/selectCruiserRoad',{ + name:this.selectLuName, + mac:macType }).then((res)=>{ this.dataSource=res.data.data }) @@ -536,10 +606,22 @@ height: 60px; border-bottom: 1px dashed gray; } +.left-five { + margin-top: 20px; +} .left-two { - margin-top: 30px; + margin-top: 10px; } .BMap_Marker.BMap_noprint { width: 23px; } +.fixeds { + width: 400px; + height: 150px; + background-color: white; + position: fixed; + top: 40%; + left: 55%; + z-index: 999; +} </style> -- Gitblit v1.8.0