From ab51d1f63674239f308e5581567f40b9acc9edf2 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Wed, 25 Oct 2023 09:29:45 +0800 Subject: [PATCH] Merge branch 'feature_1.0' --- src/views/list/road.vue | 104 +++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 82 insertions(+), 22 deletions(-) diff --git a/src/views/list/road.vue b/src/views/list/road.vue index be60ef2..c3bffa3 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"> @@ -322,7 +362,6 @@ coordinateId:this.recordid, data:this.dataList }).then((res)=>{ - console.log(res); this.$message.success(res.data.message) this.upa='' this.dataList=[] @@ -385,6 +424,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 +447,9 @@ 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=[] @@ -419,8 +459,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 = [] @@ -433,11 +471,22 @@ 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}; + 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) @@ -479,6 +528,7 @@ // } } + for (let i = 0; i < that.carDataList.length; i++) { // console.log(that.carDataList[i],'that.carDataList[i]'); //������������point @@ -532,15 +582,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 }) @@ -578,8 +635,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