fix: 国控站

quanyawei

2024-11-15 f752f50a484f63fc3786ab1c7ad563f3b17cce77

 src/components/PlanMap/Map.vue

@@ -1,12 +1,14 @@
<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-button label="PM2.5" ></el-radio-button>

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

            <el-radio-button label="NO2"></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;"

              @change="dateChange"

              v-model="dateValue"

              type="datetimerange"

              :picker-options="threeOptions"

              range-separator="至"

              start-placeholder="开始日期"

              end-placeholder="结束日期">

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

            @change="dateChange"

            v-model="dateValue"

            type="datetimerange"

            :picker-options="threeOptions"

            range-separator="至"

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

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

              :key="index"

              :label="item.name"

              :value="item.mac"

            >

            </el-option>

          </el-select>

        </div>

@@ -47,7 +57,7 @@
var GPS = {

  PI: 3.14159265358979324,

  x_pi: (3.14159265358979324 * 3000.0) / 180.0,

  delta: function(lat, lon) {

  delta: function (lat, lon) {

    var a = 6378245.0 //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。

    var ee = 0.00669342162296594323 //  ee: 椭球的偏心率。

    var dLat = this.transformLat(lon - 105.0, lat - 35.0)

@@ -62,7 +72,7 @@
  },



  // WGS-84 to GCJ-02

  gcj_encrypt: function(wgsLat, wgsLon) {

  gcj_encrypt: function (wgsLat, wgsLon) {

    if (this.outOfChina(wgsLat, wgsLon)) {

      return { lat: wgsLat, lon: wgsLon }

    }

@@ -71,7 +81,7 @@
    return { lat: wgsLat + d.lat, lon: wgsLon + d.lon }

  },

  // GCJ-02 to WGS-84

  gcj_decrypt: function(gcjLat, gcjLon) {

  gcj_decrypt: function (gcjLat, gcjLon) {

    if (this.outOfChina(gcjLat, gcjLon)) {

      return { lat: gcjLat, lon: gcjLon }

    }

@@ -80,7 +90,7 @@
    return { lat: gcjLat - d.lat, lon: gcjLon - d.lon }

  },

  // GCJ-02 to WGS-84 exactly

  gcj_decrypt_exact: function(gcjLat, gcjLon) {

  gcj_decrypt_exact: function (gcjLat, gcjLon) {

    var initDelta = 0.01

    var threshold = 0.000000001

    var dLat = initDelta

@@ -112,7 +122,7 @@
    return { lat: wgsLat, lon: wgsLon }

  },

  // GCJ-02 to BD-09

  bd_encrypt: function(gcjLat, gcjLon) {

  bd_encrypt: function (gcjLat, gcjLon) {

    var x = gcjLon

    var y = gcjLat

    var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi)

@@ -122,7 +132,7 @@
    return { lat: this.bdLat, lon: this.bdLon }

  },

  // BD-09 to GCJ-02

  bd_decrypt: function(bdLat, bdLon) {

  bd_decrypt: function (bdLat, bdLon) {

    var x = bdLon - 0.0065

    var y = bdLat - 0.006

    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi)

@@ -133,33 +143,33 @@
  },

  // WGS-84 to Web mercator

  // mercatorLat -> y mercatorLon -> x

  mercator_encrypt: function(wgsLat, wgsLon) {

  mercator_encrypt: function (wgsLat, wgsLon) {

    var x = (wgsLon * 20037508.34) / 180.0

    var y =

        Math.log(Math.tan(((90.0 + wgsLat) * this.PI) / 360.0)) /

        (this.PI / 180.0)

      Math.log(Math.tan(((90.0 + wgsLat) * this.PI) / 360.0)) /

      (this.PI / 180.0)

    y = (y * 20037508.34) / 180.0

    return { lat: y, lon: x }

  },

  // Web mercator to WGS-84

  // mercatorLat -> y mercatorLon -> x

  mercator_decrypt: function(mercatorLat, mercatorLon) {

  mercator_decrypt: function (mercatorLat, mercatorLon) {

    var x = (mercatorLon / 20037508.34) * 180.0

    var y = (mercatorLat / 20037508.34) * 180.0

    y =

        (180 / this.PI) *

        (2 * Math.atan(Math.exp((y * this.PI) / 180.0)) - this.PI / 2)

      (180 / this.PI) *

      (2 * Math.atan(Math.exp((y * this.PI) / 180.0)) - this.PI / 2)

    return { lat: y, lon: x }

  },

  // two point's distance

  distance: function(latA, lonA, latB, lonB) {

  distance: function (latA, lonA, latB, lonB) {

    var earthR = 6371000.0

    var x =

        Math.cos((latA * this.PI) / 180.0) *

        Math.cos((latB * this.PI) / 180.0) *

        Math.cos(((lonA - lonB) * this.PI) / 180)

      Math.cos((latA * this.PI) / 180.0) *

      Math.cos((latB * this.PI) / 180.0) *

      Math.cos(((lonA - lonB) * this.PI) / 180)

    var y =

        Math.sin((latA * this.PI) / 180.0) * Math.sin((latB * this.PI) / 180.0)

      Math.sin((latA * this.PI) / 180.0) * Math.sin((latB * this.PI) / 180.0)

    var s = x + y

    if (s > 1) s = 1

    if (s < -1) s = -1

@@ -167,7 +177,7 @@
    var distance = alpha * earthR

    return distance

  },

  outOfChina: function(lat, lon) {

  outOfChina: function (lat, lon) {

    if (lon < 72.004 || lon > 137.8347) {

      return true

    }

@@ -176,52 +186,52 @@
    }

    return false

  },

  transformLat: function(x, y) {

  transformLat: function (x, y) {

    var ret =

        -100.0 +

        2.0 * x +

        3.0 * y +

        0.2 * y * y +

        0.1 * x * y +

        0.2 * Math.sqrt(Math.abs(x))

      -100.0 +

      2.0 * x +

      3.0 * y +

      0.2 * y * y +

      0.1 * x * y +

      0.2 * Math.sqrt(Math.abs(x))

    ret +=

        ((20.0 * Math.sin(6.0 * x * this.PI) +

            20.0 * Math.sin(2.0 * x * this.PI)) *

            2.0) /

        3.0

      ((20.0 * Math.sin(6.0 * x * this.PI) +

        20.0 * Math.sin(2.0 * x * this.PI)) *

        2.0) /

      3.0

    ret +=

        ((20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin((y / 3.0) * this.PI)) *

            2.0) /

        3.0

      ((20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin((y / 3.0) * this.PI)) *

        2.0) /

      3.0

    ret +=

        ((160.0 * Math.sin((y / 12.0) * this.PI) +

            320 * Math.sin((y * this.PI) / 30.0)) *

            2.0) /

        3.0

      ((160.0 * Math.sin((y / 12.0) * this.PI) +

        320 * Math.sin((y * this.PI) / 30.0)) *

        2.0) /

      3.0

    return ret

  },

  transformLon: function(x, y) {

  transformLon: function (x, y) {

    var ret =

        300.0 +

        x +

        2.0 * y +

        0.1 * x * x +

        0.1 * x * y +

        0.1 * Math.sqrt(Math.abs(x))

      300.0 +

      x +

      2.0 * y +

      0.1 * x * x +

      0.1 * x * y +

      0.1 * Math.sqrt(Math.abs(x))

    ret +=

        ((20.0 * Math.sin(6.0 * x * this.PI) +

            20.0 * Math.sin(2.0 * x * this.PI)) *

            2.0) /

        3.0

      ((20.0 * Math.sin(6.0 * x * this.PI) +

        20.0 * Math.sin(2.0 * x * this.PI)) *

        2.0) /

      3.0

    ret +=

        ((20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin((x / 3.0) * this.PI)) *

            2.0) /

        3.0

      ((20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin((x / 3.0) * this.PI)) *

        2.0) /

      3.0

    ret +=

        ((150.0 * Math.sin((x / 12.0) * this.PI) +

            300.0 * Math.sin((x / 30.0) * this.PI)) *

            2.0) /

        3.0

      ((150.0 * Math.sin((x / 12.0) * this.PI) +

        300.0 * Math.sin((x / 30.0) * this.PI)) *

        2.0) /

      3.0

    return ret

  },

}

@@ -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,13 +508,15 @@
    getCarData() {

      this.$request({

        url: '/cruiser/selectCruisers',

        method: 'get'

      }).then(res => {

        this.defaultData = res.data

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

      }).catch(err => {

        console.log(err)

        method: 'get',

      })

        .then((res) => {

          this.defaultData = res.data

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

        })

        .catch((err) => {

          console.log(err)

        })

    },

    // 进行经纬度转换为距离的计算

    Rad(d) {

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

@@ -530,9 +547,9 @@
    newDate() {

      var aData = new Date()

      var month =

          aData.getMonth() < 9

            ? '0' + (aData.getMonth() + 1)

            : aData.getMonth() + 1

        aData.getMonth() < 9

          ? '0' + (aData.getMonth() + 1)

          : aData.getMonth() + 1

      var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()

      this.sensorDate = aData.getFullYear() + '-' + month + '-' + date

    },

@@ -545,9 +562,9 @@
        v = JSON.stringify(v)

        str2 = v.substr(12, 8).split(':')

        str2[0] =

            (str2[0] - 0 + 8) % 24 < 9

              ? '0' + ((str2[0] - 0 + 8) % 24)

              : (str2[0] - 0 + 8) % 24

          (str2[0] - 0 + 8) % 24 < 9

            ? '0' + ((str2[0] - 0 + 8) % 24)

            : (str2[0] - 0 + 8) % 24

        str = str2.join(':')

        this.sensorTime.push(str)

      })

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

@@ -701,7 +735,7 @@
      // drawStartAndEnd() // 起点和终点标注

      function draw(sensor, type, carMac) {

        var levels = getGrading(sensor, type, carMac)

        $.each(levels, function(index, value) {

        $.each(levels, function (index, value) {

          var color = value.color

          var data = value.data

          if (data.length > 0) {

@@ -720,7 +754,7 @@
        })

        that.map.setDefaultCursor('default')

        if (type === '2D') {

          $.each(that.showPoints, function(item, point) {

          $.each(that.showPoints, function (item, point) {

            setLabelStyle(point[sensor], point)

          })

        }

@@ -728,7 +762,7 @@


      // 画方块，上色，添加文字

      function drawPolygon(sensor) {

        $.each(that.showPoints, function(item, point) {

        $.each(that.showPoints, function (item, point) {

          var sw = getPoint(225, point.lng, point.lat, that.distance)

          var ne = getPoint(45, point.lng, point.lat, that.distance)

          var data = point[sensor]

@@ -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文本

@@ -778,7 +817,7 @@
      function drawLine() {

        var data = []

        var points = []

        $.each(trackPoints, function(index, value) {

        $.each(trackPoints, function (index, value) {

          var point = []

          point.push(value['lng'], value['lat'])

          points.push(point)

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

          if (flag) {

            points.push(point1)

            console.log(points, 'points')

          }

        }

        return points

@@ -832,14 +872,14 @@
        lng = (lng / 180) * Math.PI

        lat = (lat / 180) * Math.PI

        lng =

            lng +

            Math.atan2(

              Math.sin(angle) * Math.sin(ra) * Math.cos(lat),

              Math.cos(ra) - Math.sin(lat) * Math.sin(lat)

            ) // Math.atan2()方法计算二维坐标系中任意一个点（x, y）和原点（0, 0）的连线与X轴正半轴的夹角大小

          lng +

          Math.atan2(

            Math.sin(angle) * Math.sin(ra) * Math.cos(lat),

            Math.cos(ra) - Math.sin(lat) * Math.sin(lat)

          ) // Math.atan2()方法计算二维坐标系中任意一个点（x, y）和原点（0, 0）的连线与X轴正半轴的夹角大小

        lat = Math.asin(

          Math.sin(lat) * Math.cos(ra) +

          Math.cos(lat) * Math.sin(ra) * Math.cos(angle)

            Math.cos(lat) * Math.sin(ra) * Math.cos(angle)

        )

        // 转为正常的10进制经纬度

        lng = (lng * 180) / Math.PI

@@ -874,7 +914,7 @@
        level5.color = '#99004c'

        level6.color = '#7e0023'



        $.each(that.showPoints, function(index, value) {

        $.each(that.showPoints, function (index, value) {

          var sw = getPoint(225, value.lng, value.lat, that.distance)

          var ne = getPoint(45, value.lng, value.lat, that.distance)

          var polygon = []

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

@@ -1205,18 +1246,20 @@
      // 无数据时,缩放至该中心

      function showNoPoints() {

        that.map.centerAndZoom('苏州市', 17)

        setTimeout(function() {

        setTimeout(function () {

          document.getElementById('cpm').style.display = 'block'

          document.getElementById('data').style.display = 'none'

        }, 250)

      }



      // 地图缩放级别监控

      that.map.addEventListener('zoomend', function() {

      that.map.addEventListener('zoomend', function () {

        // 这里根据缩放显示和隐藏文本

        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;

@@ -1417,8 +1460,8 @@
  border-right: 1px solid #aaa;

}



.carTop{

  &>.left:nth-child(1){

.carTop {

  & > .left:nth-child(1) {

    border-radius: 5px 0 0 5px;

  }

}