From 3636d6f572a8aaf43af90ba9839a8fa5370eba10 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Wed, 08 Nov 2023 17:09:03 +0800 Subject: [PATCH] fix:路劲规划修改 --- src/views/list/road.vue | 142 ++++++++++++++++++++++++++++++++++++---------- 1 files changed, 110 insertions(+), 32 deletions(-) diff --git a/src/views/list/road.vue b/src/views/list/road.vue index be60ef2..fe9ac86 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: 175px" - /> <a-select ref="select" v-model="carvalue" - style="width: 180px; margin-left: 10px" + style="width: 180px" placeholder="������������������" > <a-select-option @@ -22,6 +15,13 @@ >{{ item.name }}</a-select-option > </a-select> + <a-range-picker + :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 > @@ -29,7 +29,16 @@ >������</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" @@ -158,8 +167,8 @@ import axios from "axios"; import { jsonp } from 'vue-jsonp' import any = jasmine.any; - - +import { da } from "date-fns/locale"; +import {Moment} from 'moment'; @Component({ components: { @@ -167,12 +176,32 @@ }) export default class road extends Vue { private timevalue:any=[] - private change1(){ - console.log(this.timevalue); + + private change1(dates: Moment[]) { + this.timevalue=[] + this.timevalue=[dates[0].format("YYYY-MM-DD HH:mm"),dates[1].format("YYYY-MM-DD HH:mm")] + } private mounted() { this.roadmap(); } + private dateFormat(fmt: string, date: any) { + let o = { + "M+": date.getMonth() + 1, //������ + "d+": date.getDate(), //��� + "h+": date.getHours(), //������ + "m+": date.getMinutes(), //��� + "s+": date.getSeconds(), //��� + "q+": Math.floor((date.getMonth() + 3) / 3), //������ + "S": date.getMilliseconds() //������ + } + if (/(y+)/.test(fmt)) + fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); + for (var k in o) + if (new RegExp("(" + k + ")").test(fmt)) + fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))) + return fmt +} private map:any private roadmap(){ this.map = new BMapGL.Map('roadmap') @@ -190,12 +219,22 @@ private tableLoading: boolean = false; private columns: any[] = [ { + title: "������", + dataIndex: "key", + key: "key", + align: "center", + customRender: (text,record,index) => `${index+1}`, + width: 60, + }, + { title: "������������", - dataIndex: "startPoint" + dataIndex: "startPoint", + align: "center", }, { title: "������", - customRender: this.opRender + customRender: this.opRender, + align: "center", } ]; private openIn(){ @@ -222,6 +261,7 @@ this.selectLu() }) } + private opRender(text: string, record: any, index: number) { return ( <div style="width:180px"> @@ -262,11 +302,11 @@ this.check=false this.startstate='batch' this.batchshow=true - this.selectCar(); + // this.selectCar(); this.batchid=record.coordinateId } private handlebatch(){ - this.selectCar() + // this.selectCar() this.batchshow=false this.handlenull(); } @@ -285,15 +325,17 @@ this.$message.success(res.data.message) this.starttime='' this.endtime='' - this.selectCar() + // this.selectCar() })) } private upa='' private recordid:any=0 - private handleEditModalVisible(record){ + private handleEditModalVisible(record) { + console.log('dataList',this.dataList) this.check=false this.handlebatch() - this.startstate='none' + this.startstate = 'none' + this.dataList=[] this.upa='upa' this.recordid=record.coordinateId if(this.carvalue==='������������������'){ @@ -322,7 +364,6 @@ coordinateId:this.recordid, data:this.dataList }).then((res)=>{ - console.log(res); this.$message.success(res.data.message) this.upa='' this.dataList=[] @@ -332,7 +373,7 @@ } private inupa(){ this.upa='' - this.selectCar() + // this.selectCar() } private carvalue:any='������������������' private carIndex:any=[] @@ -385,6 +426,7 @@ this.$message.warning('���������������') return } + console.log("this.timevalue",this.timevalue); get('cruiserInfo/getCruiserInFo',{ mac:this.carvalue, // time1:'2023-08-05 00:00:00', @@ -407,9 +449,9 @@ private carDataList:any=[] private starttime:any='' private endtime:any='' + private InfoWindow = null private startstate:any='none' - private setMarker(res) { - console.log(res); + private setMarker(res) { const that=this that.carDate=[] that.carDataList=[] @@ -419,8 +461,6 @@ for(var i=0;i<res.data.data.data.length;i++){ 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 = [] @@ -429,17 +469,44 @@ //������������point var myIcon = new BMapGL.Icon(require("@/assets/723cd95f31481a502d495b2d814d658.png"), new BMapGL.Size(50, 50), { }); + var startIcon = new BMapGL.Icon(require("@/assets/start.png"), new BMapGL.Size(50, 50), { + }); + var endIcon = new BMapGL.Icon(require("@/assets/end.png"), new BMapGL.Size(50, 50), { + }); const statePoint = new BMapGL.Point(that.carDate[i].flylon,that.carDate[i].flylat); bPoints.push(statePoint) - that.marker[i] = new BMapGL.Marker(statePoint,{icon:myIcon}); - that.marker[i].customData = {data: that.carDate[i].data,state: that.carDate[i].state}; + if (i === 0) { + that.marker[i] = new BMapGL.Marker(statePoint, { icon: startIcon }); + that.marker[i].customData = { data: that.carDate[i].data, state: that.carDate[i].state }; + that.marker[i].iconPng='startIcon' + } else if (i === that.carDate.length - 1) { + that.marker[i] = new BMapGL.Marker(statePoint, { icon: endIcon }); + that.marker[i].customData = { data: that.carDate[i].data, state: that.carDate[i].state }; + that.marker[i].iconPng='endIcon' + } else { + that.marker[i] = new BMapGL.Marker(statePoint,{icon:myIcon}); + that.marker[i].customData = { data: that.carDate[i].data, state: that.carDate[i].state }; + that.marker[i].iconPng='myIcon' + } + 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': + console.log('that.marker',that.marker[i]) that.marker[i].setIcon(new BMapGL.Icon(require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"), new BMapGL.Size(50, 50) )); that.carDate[i].state='2' @@ -479,6 +546,7 @@ // } } + for (let i = 0; i < that.carDataList.length; i++) { // console.log(that.carDataList[i],'that.carDataList[i]'); //������������point @@ -532,19 +600,26 @@ } } } + 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 }) - } + } private created () { this.car() this.selectLu() @@ -578,8 +653,11 @@ 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; -- Gitblit v1.8.0