Merge branch 'feature_1.0'

quanyawei

2024-04-03 b74ea56001fba65e67d9b39a5757dab4e4036858

 src/views/list/road.vue

@@ -16,9 +16,8 @@
          >

        </a-select>

        <a-range-picker

          v-model="timevalue"

          :show-time="{ format: 'HH:mm' }"

          @ok="change1()"

          @ok="change1"

          format="YYYY-MM-DD HH:mm"

          style="width: 175px; margin-left: 10px"

        />

@@ -38,6 +37,9 @@
        />

        <a-button type="primary" style="margin-left: 10px" @click="selectLu"

          >搜索</a-button

        >

        <a-button type="primary" style="margin-left: 10px" @click="clearPolygon"

          >清除绘制</a-button

        >

      </div>

      <div class="left-two">

@@ -143,6 +145,22 @@
    </a-modal>

    <div class="right">

      <div id="roadmap" class="roadmap"></div>

      <ul class="drawing-panel">

        <li

          class="bmap-btn bmap-rectangle"

          @click="draw('rectangle')"

          :style="{

            'background-position-y': actNav === 'rectangle' ? '-52px' : '0px',

          }"

        ></li>

        <li

          class="bmap-btn bmap-polygon"

          @click="draw('polygon')"

          :style="{

            'background-position-y': actNav === 'polygon' ? '-52px' : '0px',

          }"

        ></li>

      </ul>

    </div>

    <div class="fixeds" v-show="showfix === true">

      <div style="font-size: 20px; margin-left: 50px; margin-top: 50px">

@@ -162,422 +180,615 @@
</template>



<script lang="tsx">

import {Component, Prop, Vue, Model, Watch} from "vue-property-decorator";

import { Component, Prop, Vue, Model, Watch } from "vue-property-decorator";

import { get, post } from "@/util/request";

import * as turf from "@turf/turf";

import org from "@/util/org";

import axios from "axios";

import { jsonp }  from 'vue-jsonp'

import { jsonp } from "vue-jsonp";

import any = jasmine.any;

import { da } from "date-fns/locale";





import { Moment } from "moment";

import coordtransform from "coordtransform";

@Component({

  components: {

    
  }

  components: {},

})

export default class road extends Vue {

  private timevalue:any=[]

  private change1(){

    console.log(this.timevalue);

  private timevalue: any = [];



  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() {

  private mounted() {

    let a = coordtransform.bd09togcj02(120.16669577, 33.35188998);

    console.log("bd09togcj02:", coordtransform.gcj02towgs84(a[0], a[1]));

    this.roadmap();

  }

  private map:any

  private roadmap(){

      this.map = new BMapGL.Map('roadmap')

      // 设置地图中心点和缩放级别

      var point = new BMapGL.Point(116.404, 39.915);

      this.map.centerAndZoom('苏州市', 15);

      this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮，地图可以进行放大、缩小s

  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 drawingManager: any;

  private roadmap() {

    this.map = new BMapGL.Map("roadmap", {

      enableMapClick: false, //取消默认窗口

    });

    // 设置地图中心点和缩放级别

    var point = new BMapGL.Point(116.404, 39.915);

    this.map.centerAndZoom("苏州市", 15);

    this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮，地图可以进行放大、缩小s

    this.drawingManager = new BMapGLLib.DrawingManager(this.map, {

      // isOpen: true, // 是否开启绘制模式

      enableCalculate: false, // 绘制是否进行测距测面

      enableSorption: true, // 是否开启边界吸附功能

      sorptiondistance: 20, // 边界吸附距离

      circleOptions: this.styleOptions, // 圆的样式

      polylineOptions: this.styleOptions, // 线的样式

      polygonOptions: this.styleOptions, // 多边形的样式

      rectangleOptions: this.styleOptions, // 矩形的样式

      labelOptions: this.labelOptions, // label样式

    });

  }

  private dataSource: any[] = [];

  private visibleCreateModal1: boolean = false;

  private handleCreateModalCancel1():any{

    this.visibleCreateModal1=false;

  private handleCreateModalCancel1(): any {

    this.visibleCreateModal1 = false;

  }

  private selectedRows: any[] = [];

  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(){

    this.visibleCreateModal1=true;

  private openIn() {

    this.visibleCreateModal1 = true;

  }

  private startLu:any=''

  private endLu:any=''

  private insertCarLu(){

     if(this.carvalue==='请选择走航车'){

      this.$message.warning('添加请先选择走航车!')

      return

  private startLu: any = "";

  private endLu: any = "";

  private insertCarLu() {

    if (this.carvalue === "请选择走航车") {

      this.$message.warning("添加请先选择走航车!");

      return;

    }



    post('coordinate/interCruiserRoad',{

      startPoint:this.startLu,

      mac:this.carvalue

      
    }).then((res)=>{

    post("coordinate/interCruiserRoad", {

      startPoint: this.startLu,

      mac: this.carvalue,

    }).then((res) => {

      console.log(res);

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

      this.visibleCreateModal1=false;

      this.startLu=''

      this.endLu=''

      this.selectLu()

    })

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

      this.visibleCreateModal1 = false;

      this.startLu = "";

      this.endLu = "";

      this.selectLu();

    });

  }



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

    return (

        <div style="width:180px">

          <a onClick={() => this.handleEditModalVisible(record)}>

            {" "}

            编辑{" "}

          </a>

          <a-divider type="vertical"/>

           <a onClick={() => this.handleEditbatch(record)}>

            {" "}

            批量添加{" "}

          </a>

          <a-divider type="vertical"/>

          <a-popconfirm

              title="确认删除吗？"

              ok-text="确定"

              cancel-text="取消"

              onConfirm={() => this.deleteDevice(record)}

          >

            <a href="#">删除</a>

          </a-popconfirm>

        </div>

        )

      <div style="width:180px">

        <a onClick={() => this.handleEditModalVisible(record)}> 编辑 </a>

        <a-divider type="vertical" />

        <a onClick={() => this.handleEditbatch(record)}> 批量添加 </a>

        <a-divider type="vertical" />

        <a-popconfirm

          title="确认删除吗？"

          ok-text="确定"

          cancel-text="取消"

          onConfirm={() => this.deleteDevice(record)}

        >

          <a href="#">删除</a>

        </a-popconfirm>

      </div>

    );

  }

  private deleteDevice(record){

    get('coordinate/deleteCruiserRoad',{

      id:record.coordinateId

    }).then((res)=>{

  private deleteDevice(record: any) {

    get("coordinate/deleteCruiserRoad", {

      id: record.coordinateId,

    }).then((res) => {

      console.log(res);

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

      this.selectLu()

    })

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

      this.selectLu();

    });

  }

  private pointshow:boolean=false

  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 pointshow: boolean = false;

  private batchid: any = 0;

  private batchshow: boolean = false;

  private handleEditbatch(record: any) {

    let ptsWithin = turf.pointsWithinPolygon(this.multiPt, this.turfPolygon);

    console.log("ptsWithin", ptsWithin);

    let data: { flylon: number; flylat: number }[] = [];

    turf.coordEach(ptsWithin, (currentCoord) => {

      data.push({

        flylon: currentCoord[0],

        flylat: currentCoord[1],

      });

    });

    console.log("data", data);

    this.check = false;

    this.startstate = "batch";

    post("coordinateDetail/batch", {

      coordinateId: record.coordinateId,

      list: data,

      mac: this.carvalue,

    }).then((res) => {

      console.log(res);

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

      // this.selectCar()

    });

  }

  private handlebatch(){

    this.selectCar()

    this.batchshow=false

  private handlebatch() {

    // this.selectCar()

    this.batchshow = false;

    this.handlenull();

  }

  private handlenull(){

    this.starttime=''

    this.endtime=''

  private handlenull() {

    this.starttime = "";

    this.endtime = "";

  }

  private insertbatch(){

     post('coordinateDetail/batch',{

       coordinateId:this.batchid,

        time1:this.starttime,

        time2:this.endtime,

        mac:this.carvalue,

    }).then((res=>{

  private insertbatch() {

    console.log("this.starttime", this.starttime);

    console.log("this.starttime", this.endtime);

    post("coordinateDetail/batch", {

      coordinateId: this.batchid,

      mac: this.carvalue,

    }).then((res) => {

      console.log(res);

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

      this.starttime=''

      this.endtime=''

      this.selectCar()

    }))

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

      this.starttime = "";

      this.endtime = "";

      // this.selectCar()

    });

  }

  private upa=''

  private recordid:any=0

  private handleEditModalVisible(record){

    this.check=false

    this.handlebatch()

    this.startstate='none'

    this.upa='upa'

    this.recordid=record.coordinateId

    if(this.carvalue==='请选择走航车'){

      this.$message.warning('请选择走航车')

      return

  private upa = "";

  private recordid: any = 0;

  private handleEditModalVisible(record: any) {

    console.log("dataList", this.dataList);

    this.check = false;

    this.handlebatch();

    this.startstate = "none";

    this.dataList = [];

    this.upa = "upa";

    this.recordid = record.coordinateId;

    if (this.carvalue === "请选择走航车") {

      this.$message.warning("请选择走航车");

      return;

    }

    if(this.timevalue.length===0){

      this.$message.warning('请选择时间')

      return

    if (this.timevalue.length === 0) {

      this.$message.warning("请选择时间");

      return;

    }

    post('coordinateDetail/select',{

      coordinateId:record.coordinateId,

    post("coordinateDetail/select", {

      coordinateId: record.coordinateId,

      // time1:'2023-08-05 00:00:00',

      // time2:'2023-08-06 00:00:00',

      time1:this.timevalue[0],

      time2:this.timevalue[1],

      mac:this.carvalue,

    }).then((res)=>{

      this.carDate=[]

      this.pointshow=true

      this.setMarker(res)

    })

      time1: this.timevalue[0],

      time2: this.timevalue[1],

      mac: this.carvalue,

    }).then((res) => {

      this.carDate = [];

      this.pointshow = true;

      this.setMarker(res);

    });

  }

  private openupa(){

    post('coordinateDetail/insert',{

      coordinateId:this.recordid,

      data:this.dataList

    }).then((res)=>{

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

      this.upa=''

      this.dataList=[]

      this.carDate=[]

      this.selectCar()

    })

  private openupa() {

    post("coordinateDetail/insert", {

      coordinateId: this.recordid,

      data: this.dataList,

    }).then((res) => {

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

      this.upa = "";

      this.dataList = [];

      this.carDate = [];

      // this.selectCar()

    });

  }

  private inupa(){

    this.upa=''

    this.selectCar()

  private inupa() {

    this.upa = "";

    // this.selectCar()

  }

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

  private carIndex:any=[]

  private car(){

    get('cruiserInfo/selectCruisers',{

    }).then((res)=>{

      this.carIndex=res.data.data;

  private carvalue: any = "请选择走航车";

  private carIndex: any = [];

  private car() {

    get("cruiserInfo/selectCruisers", {}).then((res) => {

      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

  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

    if (this.timevalue.length === 0) {

      this.$message.warning("请选择时间");

      return;

    }

    get('cruiserInfo/getCruiserCompare',{

      mac:this.carvalue,

    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

      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)

    })

      this.carDate = [];

      this.pointshow = false;

      this.setMarker(res);

    });

  }

  private closemess(){

    this.showfix=false

  private closemess() {

    this.showfix = false;

  }

  private carDate:any=[]

  private selectCar(){

  private carDate: any = [];

  private selectCar() {

    console.log(this.timevalue);

    if(this.carvalue==='请选择走航车'){

      this.$message.warning('请选择走航车')

      return

    if (this.carvalue === "请选择走航车") {

      this.$message.warning("请选择走航车");

      return;

    }

    if(this.timevalue.length===0){

      this.$message.warning('请选择时间')

      return

    if (this.timevalue.length === 0) {

      this.$message.warning("请选择时间");

      return;

    }

    get('cruiserInfo/getCruiserInFo',{

      mac:this.carvalue,

    console.log("this.timevalue", this.timevalue);

    get("cruiserInfo/getCruiserInFo", {

      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');

      time1: this.timevalue[0],

      time2: this.timevalue[1],

    }).then((res) => {

      console.log(res.data.data, "res");

      // console.log(this.carDate,'this.carDate');

      this.carDate=[]

      this.pointshow=false

      this.setMarker(res)

    })

      this.carDate = [];

      this.pointshow = false;

      this.setMarker(res);

    });

  }

  private markerdata:any=[]

  private marker:any=[]

  private dataList:any=[]

  private indataList:any=[]

  private LudataList:any=[]

  private carDataList:any=[]

  private starttime:any=''

  private endtime:any=''

  private InfoWindow = null

  private startstate:any='none'

  private  setMarker(res) {

    const that=this

     that.carDate=[]

     that.carDataList=[]

     for(var i=0;i<res.data.data.rsData.length;i++){

        that.carDate.push(res.data.data.rsData[i])

      }

       for(var i=0;i<res.data.data.data.length;i++){

        that.carDataList.push(res.data.data.data[i])

      }

      that.map.clearOverlays()

      let bPoints = []

      let aPoints = []

      if (res.status ===200) {

        for (let i = 0; i < that.carDate.length; i++) {

          //创建单个point

          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);

          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(){

            switch(that.carDate[i].state){

              case '1':

                  that.marker[i].setIcon(new BMapGL.Icon(require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"), new BMapGL.Size(50, 50)

              ));

                that.carDate[i].state='2'

                break;

              case '2':

                 that.marker[i].setIcon(new BMapGL.Icon(require("@/assets/723cd95f31481a502d495b2d814d658.png"), new BMapGL.Size(50, 50)

              ));

                that.carDate[i].state='1'

            }

                that.dataList.push({code:that.carDate[i].data,state:that.carDate[i].state});

              if(that.startstate==='batch'){

                if(that.starttime!==''&&that.endtime!==''){

                  that.$message.warning('请先清空')

                  return

                }

                 if(that.starttime===''){

                  that.starttime=that.carDate[i].time

                  }else{

                    that.endtime=that.carDate[i].time

                  }

              }

                
                     
            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) {

                  that.dataList.splice(j, 1);

                   if(that.dataList[i].state==='1'){

                    that.dataList[i].state='2'

                   }else{

                    that.dataList[i].state='1'

                   }

                }

              }

            }

          }); //监听事件

        // }

      }

  private markerdata: any = [];

  private marker: any = [];

  private dataList: any = [];

  private indataList: any = [];

  private LudataList: any = [];

  private carDataList: any = [];

  private starttime: any = "";

  private endtime: any = "";

  private InfoWindow = null;

  private startstate: any = "none";

  private styleOptions = {

    strokeColor: "#5E87DB", // 边线颜色

    fillColor: "#5E87DB", // 填充颜色。当参数为空时，圆形没有填充颜色

    strokeWeight: 2, // 边线宽度，以像素为单位

    strokeOpacity: 1, // 边线透明度，取值范围0-1

    fillOpacity: 0.2, // 填充透明度，取值范围0-1

  };

  private labelOptions = {

    borderRadius: "2px",

    background: "#FFFBCC",

    border: "1px solid #E1E1E1",

    color: "#703A04",

    fontSize: "12px",

    letterSpacing: "0",

    padding: "5px",

  };

  private actNav: String = "";

  private clearPolygon() {

    this.drawingManager.clearOverlays();

  }

  private turfPolygon: any = null;

  private draw(drawingType: String) {

    console.log("new BMapGLLib", this.drawingManager);

    this.actNav = drawingType;

    if (

      this.drawingManager._isOpen &&

      this.drawingManager.getDrawingMode() === drawingType

    ) {

      this.drawingManager.close();

    } else {

      this.drawingManager.setDrawingMode(drawingType);

      this.drawingManager.open();

    }

    // 监听矩形绘制完成事件

    this.drawingManager.addEventListener("overlaycomplete", (e: any) => {

      // 获取矩形对象

      this.actNav = "";

      const polygon = e.overlay;

      // 获取矩形的四个顶点

      const polygonPoints = polygon.getPath();

      console.log("polygonPoints1", polygonPoints);

      let transformationPoints = polygonPoints.map((coord: any) => {

        const [x, y] = [coord.lng, coord.lat];

        const [lng1, lat1] = coordtransform.bd09togcj02(x, y);

        const [lng2, lat2] = coordtransform.gcj02towgs84(lng1, lat1);

        return { lng: lng2, lat: lat2 };

      });

      console.log("polygonPoints2", transformationPoints);

      this.turfPolygon = turf.polygon([

        transformationPoints.map((item: any) => [item.lng, item.lat]),

      ]);

    });

  }

  private multiPt: any = [];

  private setMarker(res: any) {

    const that = this;

    that.carDate = [];

    that.carDataList = [];

    let pointSlint = [];



    
        for (let i = 0; i < that.carDataList.length; i++) {

          // console.log(that.carDataList[i],'that.carDataList[i]');

          //创建单个point

          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)

          //将marker保存在data函数中 后续需要使用

          that.markerdata[i] = new BMapGL.Marker(statePoint,{icon:myIcon});

          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':

                 that.markerdata[i].setIcon(new BMapGL.Icon(require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"), new BMapGL.Size(50, 50)

              ));

              that.carDataList[i].state='2';

              break;

              case '2':

                console.log(123);

               that.markerdata[i].setIcon(new BMapGL.Icon(require("@/assets/723cd95f31481a502d495b2d814d658.png"), new BMapGL.Size(50, 50)

              ));

              that.carDataList[i].state='1';

              break;

            }

                that.dataList.push({code:that.carDataList[i].code,state:that.carDataList[i].state,id:that.carDataList[i].id});

              // 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) {

                  that.dataList.splice(j, 1);

                   if(that.dataList[i].state==='1'){

                    that.dataList[i].state='2'

                   }else{

                    that.dataList[i].state='1'

                   }

                }

              }

            }

          }); //监听事件

        // }

      }



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

        if(that.pointshow===false){

          that.setZoom(bPoints)

        }else{

          that.setZoom(aPoints)

    for (var i = 0; i < res.data.data.rsData.length; i++) {

      that.carDate.push(res.data.data.rsData[i]);

      pointSlint.push(res.data.data.rsData[i].data.split("_").map(Number));

    }

    this.multiPt = turf.points([...pointSlint]);

    for (var i = 0; i < res.data.data.data.length; i++) {

      that.carDataList.push(res.data.data.data[i]);

    }

    that.map.clearOverlays();

    let bPoints = [];

    let aPoints = [];

    if (res.status === 200) {

      for (let i = 0; i < that.carDate.length; i++) {

        //创建单个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);

        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);

        });



    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;

        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() {

          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";

              break;

            case "2":

              that.marker[i].setIcon(

                new BMapGL.Icon(

                  require("@/assets/723cd95f31481a502d495b2d814d658.png"),

                  new BMapGL.Size(50, 50)

                )

              );

              that.carDate[i].state = "1";

          }

          that.dataList.push({

            code: that.carDate[i].data,

            state: that.carDate[i].state,

          });

          if (that.startstate === "batch") {

            if (that.starttime !== "" && that.endtime !== "") {

              that.$message.warning("请先清空");

              return;

            }

            if (that.starttime === "") {

              that.starttime = that.carDate[i].time;

            } else {

              that.endtime = that.carDate[i].time;

            }

          }



          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) {

                that.dataList.splice(j, 1);

                if (that.dataList[i].state === "1") {

                  that.dataList[i].state = "2";

                } else {

                  that.dataList[i].state = "1";

                }

              }

            }

          }

        }); //监听事件

        // }

      }

      get('coordinate/selectCruiserRoad',{

        name:this.selectLuName,

        mac:macType

      }).then((res)=>{

        this.dataSource=res.data.data

      })



      for (let i = 0; i < that.carDataList.length; i++) {

        // console.log(that.carDataList[i],'that.carDataList[i]');

        //创建单个point

        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);

        //将marker保存在data函数中 后续需要使用

        that.markerdata[i] = new BMapGL.Marker(statePoint, { icon: myIcon });

        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":

              that.markerdata[i].setIcon(

                new BMapGL.Icon(

                  require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"),

                  new BMapGL.Size(50, 50)

                )

              );

              that.carDataList[i].state = "2";

              break;

            case "2":

              console.log(123);

              that.markerdata[i].setIcon(

                new BMapGL.Icon(

                  require("@/assets/723cd95f31481a502d495b2d814d658.png"),

                  new BMapGL.Size(50, 50)

                )

              );

              that.carDataList[i].state = "1";

              break;

          }

          that.dataList.push({

            code: that.carDataList[i].code,

            state: that.carDataList[i].state,

            id: that.carDataList[i].id,

          });

          // 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) {

                that.dataList.splice(j, 1);

                if (that.dataList[i].state === "1") {

                  that.dataList[i].state = "2";

                } else {

                  that.dataList[i].state = "1";

                }

              }

            }

          }

        }); //监听事件

        // }

      }



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

      if (that.pointshow === false) {

        that.setZoom(bPoints);

      } else {

        that.setZoom(aPoints);

      }

    }

  private created () {

    this.car()  
    this.selectLu()

  }



  private setZoom(bPoints: any) {

    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();

  }

}

</script>



@@ -624,4 +835,40 @@
  left: 55%;

  z-index: 999;

}

.drawing-panel {

  z-index: 200;

  position: absolute;

  top: 10rem;

  margin-left: 2rem;

  padding-left: 0;

  border-radius: .25rem;

  height: 47px;

  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);

}

.bmap-btn {

  border-right: 1px solid #d2d2d2;

  float: left;

  width: 64px;

  height: 100%;

  background-image: url(

//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);

  cursor: pointer;

  list-style: none;

  padding: 0;

}

.drawing-panel .bmap-marker {

  background-position: -65px 0;

}

.drawing-panel .bmap-polyline {

  background-position: -195px 0;

}

.drawing-panel .bmap-rectangle {

  background-position: -325px 0;

}

.drawing-panel .bmap-polygon {

  background-position: -260px 0;

}

.drawing-panel .bmap-circle {

  background-position: -130px 0;

}

</style>