Merge branch 'feature_1.0'

quanyawei

2024-04-03 b74ea56001fba65e67d9b39a5757dab4e4036858

 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

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

@@ -163,12 +182,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 +204,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) {

@@ -211,12 +234,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);

    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;

@@ -287,7 +324,7 @@
      </div>

    );

  }

  private deleteDevice(record) {

  private deleteDevice(record: any) {

    get("coordinate/deleteCruiserRoad", {

      id: record.coordinateId,

    }).then((res) => {

@@ -299,12 +336,28 @@
  private pointshow: boolean = false;

  private batchid: any = 0;

  private batchshow: boolean = false;

  private handleEditbatch(record) {

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

    this.batchshow = true;

    // this.selectCar();

    this.batchid = record.coordinateId;

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

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

  }

  private insertbatch() {

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

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

    post("coordinateDetail/batch", {

      coordinateId: this.batchid,

      time1: this.starttime,

      time2: this.endtime,

      mac: this.carvalue,

    }).then((res) => {

      console.log(res);

@@ -331,7 +384,7 @@
  }

  private upa = "";

  private recordid: any = 0;

  private handleEditModalVisible(record) {

  private handleEditModalVisible(record: any) {

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

    this.check = false;

    this.handlebatch();

@@ -451,13 +504,71 @@
  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() {

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

    }

@@ -655,7 +766,7 @@
    }

  }



  private setZoom(bPoints) {

  private setZoom(bPoints: any) {

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

    var mapZoom = view.zoom;

    var centerPoint = view.center;

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