blame | history | patch | commit | commitdiff | ignore whitespace
quanyawei
2023-10-25 ab51d1f63674239f308e5581567f40b9acc9edf2 
 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,16 +219,22 @@


  private tableLoading: boolean = false;



  private columns: any[] = [



    {



      title: "起点",



      dataIndex: "startPoint"



      title: "序号",



      dataIndex: "key",



      key: "key",



      align: "center",



      customRender: (text,record,index) => `${index+1}`,



      width: 60,



    },



    {



      title: "终点",



      dataIndex: "endPoint"



      title: "路段名称",



      dataIndex: "startPoint",



       align: "center",



    },



    {



      title: "操作",



      customRender: this.opRender



      customRender: this.opRender,



       align: "center",



    }



  ];



  private openIn(){



@@ -191,9 +243,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 +261,7 @@


      this.selectLu()



    })



  }







  private opRender(text: string, record: any, index: number) {



    return (



        <div style="width:180px">



@@ -240,19 +299,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 +331,7 @@


  private upa=''



  private recordid:any=0



  private handleEditModalVisible(record){



    this.check=false



    this.handlebatch()



    this.startstate='none'



    this.upa='upa'



@@ -291,7 +352,6 @@


      time2:this.timevalue[1],



      mac:this.carvalue,



    }).then((res)=>{



      console.log(res);



      this.carDate=[]



      this.pointshow=true



      this.setMarker(res)



@@ -302,7 +362,6 @@


      coordinateId:this.recordid,



      data:this.dataList



    }).then((res)=>{



      console.log(res);



      this.$message.success(res.data.message)



      this.upa=''



      this.dataList=[]



@@ -312,6 +371,7 @@


  }



  private inupa(){



    this.upa=''



    this.selectCar()



  }



  private carvalue:any='请选择走航车'



  private carIndex:any=[]



@@ -321,6 +381,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 +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',



@@ -355,24 +447,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 +468,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 +513,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 +525,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 +541,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 +557,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 +569,10 @@


                   }



                }



              }



              // that.indataList = Array.from(new Set(that.dataList))



            }



          }); //监听事件



        }



        // }



      }







        //重新定义地图的缩放和中心点



        if(that.pointshow===false){



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



      })



@@ -536,10 +635,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>