Merge branch 'feature_1.0'

quanyawei

2024-08-28 247dacca9784396eeaf17ef3e85c7ae646b786e4

 src/views/list/road.vue

@@ -38,6 +38,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">

        <a-table

@@ -50,6 +53,15 @@
        ></a-table>

      </div>

      <div class="left-three" style="margin-top: 20px">

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

          >添加路段信息</a-button

        >

        <a-button

          type="primary"

          style="margin-left: 10px"

          @click="showAllPolygon"

          >显示所有矩形</a-button

        >

        <a-button

          v-show="upa === ''"

          type="primary"

@@ -142,6 +154,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">

@@ -163,12 +191,14 @@
<script lang="tsx">

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 any = jasmine.any;

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

import { Moment } from "moment";

import coordtransform from "coordtransform";

@Component({

  components: {},

})

@@ -183,6 +213,8 @@
    ];

  }

  private mounted() {

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

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

    this.roadmap();

  }

  private dateFormat(fmt: string, date: any) {

@@ -200,7 +232,7 @@
        RegExp.$1,

        (date.getFullYear() + "").substr(4 - RegExp.$1.length)

      );

    for (var k in o)

    for (let k in o)

      if (new RegExp("(" + k + ")").test(fmt))

        fmt = fmt.replace(

          RegExp.$1,

@@ -211,12 +243,26 @@
    return fmt;

  }

  private map: any;

  private drawingManager: any;

  private roadmap() {

    this.map = new BMapGL.Map("roadmap");

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

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

    });

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

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

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

@@ -271,7 +317,7 @@


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

    return (

      <div style="width:180px">

      <div style="width:180px;text-align:left">

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

        <a-divider type="vertical" />

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

@@ -284,10 +330,16 @@
        >

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

        </a-popconfirm>

        <br></br>

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

        <a-divider type="vertical" />

        <a onClick={() => this.handleEditCanves(record)}> 添加矩形 </a>

        <br></br>

        <a onClick={() => this.handleShowPolygon(record)}> 显示矩形 </a>

      </div>

    );

  }

  private deleteDevice(record) {

  private deleteDevice(record: any) {

    get("coordinate/deleteCruiserRoad", {

      id: record.coordinateId,

    }).then((res) => {

@@ -299,7 +351,7 @@
  private pointshow: boolean = false;

  private batchid: any = 0;

  private batchshow: boolean = false;

  private handleEditbatch(record) {

  private handleEditbatch(record: any) {

    this.check = false;

    this.startstate = "batch";

    this.batchshow = true;

@@ -316,10 +368,13 @@
    this.endtime = "";

  }

  private insertbatch() {

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

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

    post("coordinateDetail/batch", {

      coordinateId: this.batchid,

      type: "0",

      time1: this.starttime,

      time2: this.endtime,

      coordinateId: this.batchid,

      mac: this.carvalue,

    }).then((res) => {

      console.log(res);

@@ -329,9 +384,81 @@
      // this.selectCar()

    });

  }

  // 显示所有矩形

  showAllPolygon() {

    let macType = null;

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

      macType = this.carvalue;

    }

    get("coordinate/selectCruiserRoad", {

      name: "",

      mac: macType,

    }).then((res) => {

      res.data.data.forEach((item: any) => {

        if (item.bdValues) {

          let pointList = item.bdValues.map((item: any) => {

            return new BMapGL.Point(item.lng, item.lat);

          });

          let polygon = new BMapGL.Polygon([...pointList]);

          console.log("polygon", polygon);

          this.map.addOverlay(polygon);

        }

      });

    });

  }

  // 显示矩形

  handleShowPolygon(record: any) {

    console.log(record);

    if (record.bdValues) {

      let pointList = record.bdValues.map((item: any) => {

        return new BMapGL.Point(item.lng, item.lat);

      });

      let polygon = new BMapGL.Polygon([...pointList]);

      console.log("polygon", polygon);

      this.map.addOverlay(polygon);

    }

  }

  // 添加矩形

  private handleEditCanves(record: any) {

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

    if (this.roadbaiduPolygon.length > 0) {

      post("coordinate/updateCruiserRoad", {

        coordinateId: record.coordinateId,

        bdValue: this.roadbaiduPolygon,

        value: this.road84Polygon,

      }).then((res) => {

        this.$message.success("添加成功");

        this.selectLu();

      });

    } else {

      this.$message.warning("请绘制矩形");

    }

  }

  private canvasbatch(record: any) {

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

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

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

      data.push({

        flylon: currentCoord[0],

        flylat: currentCoord[1],

      });

    });

    this.check = false;

    this.startstate = "batch";

    post("coordinateDetail/batch", {

      type: "1",

      coordinateId: record.coordinateId,

      list: data,

      mac: this.carvalue,

    }).then((res) => {

      console.log(res);

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

      // this.selectCar()

    });

  }

  private upa = "";

  private recordid: any = 0;

  private handleEditModalVisible(record) {

  private handleEditModalVisible(record: any) {

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

    this.check = false;

    this.handlebatch();

@@ -438,7 +565,20 @@
      // console.log(this.carDate,'this.carDate');

      this.carDate = [];

      this.pointshow = false;

      this.map.removeOverlay();

      this.setMarker(res);

    });

  }

  reosurce() {

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

    post("coordinateDetail/queryAll", {

      mac: this.carvalue,

      time1: this.timevalue[0],

      time2: this.timevalue[1],

    }).then((res) => {

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

      this.$message.success("添加成功");

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

    });

  }

  private markerdata: any = [];

@@ -451,14 +591,85 @@
  private endtime: any = "";

  private InfoWindow = null;

  private startstate: any = "none";

  private setMarker(res) {

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

    //得到所有overlays

    let overlays = this.map.getOverlays();

    this.drawingManager.clearOverlays();

    //判断是Marker对象还是Label对象

    overlays.forEach((overlay: any) => {

      if (overlay.toString() === "Polygon") {

        this.map.removeOverlay(overlay);

      }

    });

    // this.map.clearOverlays();

  }

  private turfPolygon: any = null;

  private roadbaiduPolygon: any = [];

  private road84Polygon: any = [];

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

      this.roadbaiduPolygon = 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 };

      });



      this.road84Polygon = transformationPoints;

      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 = [];

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

    let pointSlint = [];



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

    }

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

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

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

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

    }

    that.map.clearOverlays();

@@ -467,17 +678,17 @@
    if (res.status === 200) {

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

        //创建单个point

        var myIcon = new BMapGL.Icon(

        let myIcon = new BMapGL.Icon(

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

          new BMapGL.Size(50, 50),

          {}

        );

        var startIcon = new BMapGL.Icon(

        let startIcon = new BMapGL.Icon(

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

          new BMapGL.Size(50, 50),

          {}

        );

        var endIcon = new BMapGL.Icon(

        let endIcon = new BMapGL.Icon(

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

          new BMapGL.Size(50, 50),

          {}

@@ -488,28 +699,34 @@
        );

        bPoints.push(statePoint);

        if (i === 0) {

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

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

        let infoWindow = "";

        //that.marker[i].name = that.carDate[i].time;

        that.marker[i].on("mouseover", function(e) {

          infoWindow = new BMapGL.InfoWindow(

@@ -582,7 +799,7 @@
      for (let i = 0; i < that.carDataList.length; i++) {

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

        //创建单个point

        var myIcon = new BMapGL.Icon(

        let myIcon = new BMapGL.Icon(

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

          new BMapGL.Size(50, 50)

        );

@@ -593,7 +810,9 @@
        // console.log(statePoint,'statePoint');

        aPoints.push(statePoint);

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

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

        that.markerdata[i] = new BMapGL.Marker(statePoint, {

          icon: myIcon,

        });

        that.markerdata[i].customData = {

          data: that.carDataList[i].code,

          state: that.carDataList[i].state,

@@ -655,15 +874,15 @@
    }

  }



  private setZoom(bPoints) {

    var view = this.map.getViewport(eval(bPoints));

    var mapZoom = view.zoom;

    var centerPoint = view.center;

  private setZoom(bPoints: any) {

    let view = this.map.getViewport(eval(bPoints));

    let mapZoom = view.zoom;

    let centerPoint = view.center;

    this.map.centerAndZoom(centerPoint, mapZoom);

  }

  private selectLuName: any = null;

  private selectLu() {

    var macType = null;

    let macType = null;

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

      macType = this.carvalue;

    }

@@ -724,4 +943,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>