From 3009e0e4b157bd487a85c6051fbfb59c368180f2 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 18 Oct 2023 13:15:09 +0800
Subject: [PATCH] fix:路径规划修改
---
src/views/list/road.vue | 203 ++++++++++++++++++++++++++++++++++++++------------
1 files changed, 152 insertions(+), 51 deletions(-)
diff --git a/src/views/list/road.vue b/src/views/list/road.vue
index 972992d..da8e55e 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,30 @@
>{{ 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
>
+ <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 +122,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,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: {
@@ -150,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')
@@ -173,12 +219,8 @@
private tableLoading: boolean = false;
private columns: any[] = [
{
- title: "������",
+ title: "������������",
dataIndex: "startPoint"
- },
- {
- title: "������",
- dataIndex: "endPoint"
},
{
title: "������",
@@ -191,9 +233,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 +251,7 @@
this.selectLu()
})
}
+
private opRender(text: string, record: any, index: number) {
return (
<div style="width:180px">
@@ -240,19 +289,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 +321,7 @@
private upa=''
private recordid:any=0
private handleEditModalVisible(record){
+ this.check=false
this.handlebatch()
this.startstate='none'
this.upa='upa'
@@ -291,7 +342,6 @@
time2:this.timevalue[1],
mac:this.carvalue,
}).then((res)=>{
- console.log(res);
this.carDate=[]
this.pointshow=true
this.setMarker(res)
@@ -302,7 +352,6 @@
coordinateId:this.recordid,
data:this.dataList
}).then((res)=>{
- console.log(res);
this.$message.success(res.data.message)
this.upa=''
this.dataList=[]
@@ -312,6 +361,7 @@
}
private inupa(){
this.upa=''
+ this.selectCar()
}
private carvalue:any='������������������'
private carIndex:any=[]
@@ -321,6 +371,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(){
@@ -333,6 +414,7 @@
this.$message.warning('���������������')
return
}
+ console.log("this.timevalue",this.timevalue);
get('cruiserInfo/getCruiserInFo',{
mac:this.carvalue,
// time1:'2023-08-05 00:00:00',
@@ -355,24 +437,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 +458,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 +503,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 +515,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 +531,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 +547,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 +559,10 @@
}
}
}
- // that.indataList = Array.from(new Set(that.dataList))
}
}); //������������
- }
+ // }
+ }
//���������������������������������������
if(that.pointshow===false){
@@ -490,15 +572,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 +625,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