提交

guoshipeng

2023-07-06 63c0ecf98f3705b4c70e4bafee5f325966a5777b

 src/components/PlanMap/Map.vue

@@ -1,11 +1,13 @@
<template>

  <div class="main_body">

    <el-container

        style="height: 100%"

    >

    <el-container style="height: 100%">

      <el-container style="position: relative">

        <div class="carTop">

          <el-radio-group v-model="radioSeven" size="medium" @change="changeCode">

          <el-radio-group

            v-model="radioSeven"

            size="medium"

            @change="changeCode"

          >

            <el-radio-button label="PM2.5" ></el-radio-button>

            <el-radio-button label="PM10"></el-radio-button>

            <el-radio-button label="SO2"></el-radio-button>

@@ -15,21 +17,29 @@
            <el-radio-button label="TVOC"></el-radio-button>

          </el-radio-group>

          <el-date-picker

              style="float:right;margin-right:10px;"

            style="float: right; margin-right: 10px"

              @change="dateChange"

              v-model="dateValue"

              type="datetimerange"

              :picker-options="threeOptions"

              range-separator="至"

              start-placeholder="开始日期"

              end-placeholder="结束日期">

            end-placeholder="结束日期"

          >

          </el-date-picker>

          <el-select v-model="carMacItem" clearable placeholder="请选择无人机" style="width: 180px;display: inline-block" @change="changeCarData">

          <el-select

            v-model="carMacItem"

            clearable

            placeholder="请选择无人机"

            style="width: 180px; display: inline-block"

            @change="changeCarData"

          >

            <el-option

                v-for="(item, index) in defaultData"

                :key="index"

                :label="item.name"

                :value="item.mac">

              :value="item.mac"

            >

            </el-option>

          </el-select>

        </div>

@@ -250,10 +260,7 @@
      dataType: 'history',

      responseJSON: null,

      radio1: null,

      viewOptions: [

        '平铺',

        '立体'

      ],

      viewOptions: ['平铺', '立体'],

      dateValue: [],

      pickerOptions: {

        disabledDate(time) {

@@ -424,7 +431,7 @@
      webSocketView: false,

      isDataList: [],

      shapeLayer: null,

      carData: null,

      carData: [],

      timeDuan: 0,

      isDisTime: false,

      startTime: '',

@@ -433,7 +440,7 @@
      sensorTime: [],

      timeValue: [

        new Date(2020, 1, 1, 0, 0, 0),

        new Date(2022, 12, 31, 23, 59, 59)

        new Date(2022, 12, 31, 23, 59, 59),

      ],

    }

  },

@@ -458,7 +465,7 @@
      // console.log(n)

    },

    deep: true,

    immediate: true

    immediate: true,

  },

  mounted() {

    this.getStart()

@@ -475,7 +482,7 @@
    // 时间处理函数

    newTime2(timeArr) {

      var arr = []

      timeArr.map(v => {

      timeArr.map((v) => {

        var date = new Date(v)

        var y = date.getFullYear()

        var m = date.getMonth() + 1

@@ -501,11 +508,13 @@
    getCarData() {

      this.$request({

        url: '/cruiser/selectCruisers',

        method: 'get'

      }).then(res => {

        method: 'get',

      })

        .then((res) => {

        this.defaultData = res.data

        this.carMac = res.data[0].mac

      }).catch(err => {

        })

        .catch((err) => {

        console.log(err)

      })

    },

@@ -519,8 +528,16 @@
      var radLat2 = this.Rad(lat2)

      var a = radLat1 - radLat2

      var b = this.Rad(lng1) - this.Rad(lng2)

      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +

          Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))

      var s =

        2 *

        Math.asin(

          Math.sqrt(

            Math.pow(Math.sin(a / 2), 2) +

              Math.cos(radLat1) *

                Math.cos(radLat2) *

                Math.pow(Math.sin(b / 2), 2)

          )

        )

      s = s * 6378.137 // EARTH_RADIUS;

      s = Math.round(s * 10000) / 10000 // 输出为公里

      // s=s.toFixed(4);

@@ -579,33 +596,45 @@
        this.map.clearOverlays()

      }

      this.$request({

        url: '/cruiser/cruiserTrajectory',

        // url: '/cruiser/cruiserTrajectory',

        url: '/uav/queryDataByBatch',

        method: 'get',

        // params: {

        //   mac: this.carMac,

        //   time1: this.sensorDate[0],

        //   time2: this.sensorDate[1],

        // },

        params: {

          mac: this.carMac,

          time1: this.sensorDate[0],

          time2: this.sensorDate[1]

        }

      }).then(res => {

        if (!res.data.length) {

          batch: '2023-05-15 14:39:05',

        },

      }).then((res) => {

        if (!res.data.vos.length) {

          this.noneData = true

          this.loading = false

        }

        if (res.data.length) {

          this.carData = res

        if (res.data.vos.length) {

          console.log(12)

          // this.carData = res

          // console.log(JSON.parse(this.carData), 'JSON.parse(this.carData)')

          // this.initStart(JSON.parse(this.carData))

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

            console.log(res.data.vos[i].value)

            this.carData.push(JSON.parse(res.data.vos[i].value))

          }

          this.initStart(this.carData)

        }

      })

    },

    // 执行数据生成逻辑

    initStart(res) {

      console.log(res, 'res')

      this.abc += 1

      const that = this

      if (!res) {

        return

      }

      if (this.dataType === 'history') {

        this.responseJSON = res.data

        this.responseJSON = res

      } else {

        this.responseJSON = res

      }

@@ -641,7 +670,12 @@
            point.a21005 = parseFloat(value.a21005).toFixed(3)

            point.a05024 = parseInt(value.a05024)

            point.a99054 = parseFloat(value.a99054).toFixed(3)

            if (value.dustld - 0 !== 0 && value.dustld - 0 < 100 && (that.carMac === 'p5dnd7a0243622' || that.carMac === 'p5dnd7a0243625')) {

            if (

              value.dustld - 0 !== 0 &&

              value.dustld - 0 < 100 &&

              (that.carMac === 'p5dnd7a0243622' ||

                that.carMac === 'p5dnd7a0243625')

            ) {

              point.dustld = 100

            } else {

              point.dustld = value.dustld - 0

@@ -652,7 +686,7 @@
        })

        that.sensor = this.sensorKey

        that.viewType = this.viewKey

        that.size = 70

        that.size = 5

        that.distance = that.size / 2 / Math.sin((1 * Math.PI) / 4)

        // 已有地图，避免再次请求

        if (!that.showPoints) {

@@ -741,7 +775,12 @@
              new BMapGL.Point(ne.lng, ne.lat), // 右上角

              new BMapGL.Point(sw.lng, ne.lat), // 右下角

            ],

            { strokeWeight: 0.5, strokeOpacity: 0.0, fillColor: color, fillOpacity: 1 }

            {

              strokeWeight: 0.5,

              strokeOpacity: 0.0,

              fillColor: color,

              fillOpacity: 1,

            }

          )

          that.map.addOverlay(polygon)

          // 方块内添加label文本

@@ -817,6 +856,7 @@
          }

          if (flag) {

            points.push(point1)

            console.log(points, 'points')

          }

        }

        return points

@@ -1178,10 +1218,11 @@


      // point上添加label文本

      function setLabelStyle(content, point) {

        var label = new BMapGL.Label("<span class='my-maptip'>" + content + '<br /><span>', // 为lable填写内容

        var label = new BMapGL.Label(

          "<span class='my-maptip'>" + content + '<br /><span>', // 为lable填写内容

          {

            offset: new BMapGL.Size(-8, -10), // label的偏移量，为了让label的中心显示在点上

            position: point

            position: point,

          } // label的位置

        )

        var offsetSize = new BMapGL.Size(0, 0)

@@ -1216,7 +1257,9 @@
        // 这里根据缩放显示和隐藏文本

        var zoom = that.map.getZoom()

        $('span.my-maptip').parent()[zoom <= 15.5 ? 'hide' : 'show']()

        $('span.my-maptip').parent().css('font-size', 30 - zoom)

        $('span.my-maptip')

          .parent()

          .css('font-size', 30 - zoom)

      })



      // var that = this

@@ -1301,7 +1344,7 @@
  margin: 0;

  z-index: 0;

  font-size: 14px;

  font-family: "微软雅黑";

  font-family: '微软雅黑';

}



.main_body {

@@ -1324,7 +1367,7 @@
  margin-top: -50px;

  z-index: 11;

  color: #000000;

  border: 2px solid #FF7F50;

  border: 2px solid #ff7f50;

  font-size: 28px;

  line-height: 100px;

  text-align: center;