1、新增监测站点数据页面 2、监测因子趋势页面修改显示bug 3、监测因子趋势和监测因子对比修改时间控件

yupan

2022-10-27 5cb89929c20f325ea2c05561fcf4f92c74094fea

 src/views/car/index.vue

@@ -18,6 +18,12 @@
            @click="changeCarData(item)"
          >
            <span>{{ item.name }}</span>
            <i
                style="vertical-align: -2.5px;font-size: 20px;margin-right:10px;margin-left:auto"
                class="iconfont iconfaxianzuobiao"
                @click="deviceDetail(item.mac,null,item,0)"
            />
<!--            @click="deviceDetail('p5dnd7a0245390',null,item,0)"-->
          </el-menu-item>
        </el-menu>
      </el-aside>
@@ -169,6 +175,7 @@
</template>
<script>
import $ from 'jquery'
import '@/assets/icon/iconfont.css'
var GPS = {
  PI: 3.14159265358979324,
  x_pi: 3.14159265358979324 * 3000.0 / 180.0,
@@ -355,7 +362,7 @@
        { sensorName: 'CO', unit: 'mg/m³', tab1: '2', tab2: '4', tab3: '14', tab4: '24', tab5: '36', tab6: '48' },
        { sensorName: 'O3', unit: 'ug/m³', tab1: '100', tab2: '160', tab3: '215', tab4: '265', tab5: '800', tab6: '800' },
        { sensorName: 'TVOC', unit: 'mg/m³', tab1: '0.1', tab2: '0.3', tab3: '0.5', tab4: '0.7', tab5: '0.9', tab6: '1' },
        { sensorName: '尘负荷', unit: 'ug/m³', tab1: '0.05', tab2: '0.1', tab3: '0.3', tab4: '0.5', tab5: '0.9', tab6: '1' }
        { sensorName: '尘负荷', unit: 'ug/m³', tab1: '300', tab2: '500', tab3: '1000', tab4: '10000', tab5: '20000', tab6: '50000' }
      ],
      carWs: null,
      map: null,
@@ -411,7 +418,6 @@
    }
    // timeValue: {
    //   handler(newVal, oldVal) {
    //     console.log('时间是', this.timeValue, '日期是', this.sensorDate)
    //     this.sensorTime = this.newTime()
    //     console.log(this.sensorTime, 'this.sensorTime')
    //     // if (this.dataValue && this.timeValue) {
@@ -450,6 +456,34 @@
    })
  },
  methods: {
    // 跳转设备详情页
    deviceDetail(mac, item, items, indexs) {
      // console.log('这是传输过去的值')
      // console.log(mac)
      // console.log(item)
      // console.log(items)
      // console.log(indexs)
      // this.monitorPointInfo = item
      this.$router.push({
        name: 'deviceDetail',
        // path: '/carDetail',
        params: {
          monitorPointInfo: item,
          device: items,
          macName: mac,
          indexs: indexs,
          items: [items.latitude, items.longitude]
        },
        query: {
          monitorPointInfo: JSON.stringify(item),
          device: items,
          macName: mac,
          indexs: indexs,
          items: [items.latitude, items.longitude],
          equipment: 'car'
        }
      })
    },
    // 6参设定方法
    customLevel() {
      this.getStart()
@@ -538,7 +572,7 @@
    },
    // 数据类型
    dateChange(e) {
      this.sensorDate = e
      this.sensorDate = e;
      // if (this.view) {
      //   this.view.removeAllLayers()
      //   this.map.clearOverlays()
@@ -608,7 +642,7 @@
        var lon = parseFloat(JSON.parse(msg.data).flylon)
        if (that.msgTemp.length < 2) {
          that.msgTemp.push({ lat: lat, lon: lon })
        }
        }     
        var distance = that.GetDistance(that.msgTemp[0].lat, that.msgTemp[0].lon, that.msgTemp[1].lat, that.msgTemp[1].lon)
        if (distance >= 0.05) {
          that.msgTemp.shift()
@@ -618,6 +652,7 @@
          that.msgTemp.pop()
        }
      }

    },
    // 走航车轨迹数据
    getStart() {
@@ -640,6 +675,7 @@
          time2
        }
      }).then(res => {
        console.log(res);
        if (!res.data.length) {
          this.noneData = true
          this.loading = false
@@ -669,6 +705,7 @@
      this.loading = false
      if (this.responseJSON.length > 0) {
        this.noneData = false
        console.log(that.carMac, 'mac')
        $.each(this.responseJSON, (item, value) => {
          if (typeof (value.flylon) === 'undefined') {
            showNoPoints()
@@ -682,16 +719,20 @@
            lat = GPS.gcj_encrypt(lat, lng).lat
            lng = GPS.bd_encrypt(lat, lng).lon
            lat = GPS.bd_encrypt(lat, lng).lat
            var point = new BMapGL.Point(lng, lat)
            var point = new BMapGL.Point(lng, lat);
            point.a34004 = parseInt(value.a34004)
            point.a34002 = parseInt(value.a34002)
            point.a21026 = parseInt(value.a21026)
            point.a21004 = parseInt(value.a21004)
            // point.a21005 = parseInt(value.a21005)
            point.a21005 = parseFloat(value.a21005).toFixed(3)
            point.a05024 = parseInt(value.a05024)
            point.a99054 = parseFloat(value.a99054).toFixed(3)
            point.dustld = value.dustld - 0
            if (value.dustld - 0 !== 0 && value.dustld - 0 < 100 && that.carMac === 'p5dnd7a0243622') {
              point.dustld = 100
            } else {
              point.dustld = value.dustld - 0
            }
            // point.dustld = value.dustld - 0
            trackPoints.push(point)
          }
        })
@@ -724,7 +765,7 @@
        that.mapZoom = that.viewport.zoom
        that.centerPoint = that.viewport.center
        if (that.firstPlayFlag) {
          that.map.centerAndZoom(that.centerPoint, that.mapZoom)
              that.map.centerAndZoom(that.centerPoint, that.mapZoom)
          that.view = new mapvgl.View({
            map: that.map
          })
@@ -736,21 +777,21 @@
        }
      }
      // drawPolygon(sensor);//多边形
      draw(that.sensor, that.viewType)
      drawLine()// 轨迹
      draw(that.sensor, that.viewType, that.carMac)
      // drawLine()// 轨迹
      drawStartAndEnd()// 起点和终点标注
      function draw(sensor, type) {
        var levels = getGrading(sensor, type)
      function draw(sensor, type, carMac) {
        var levels = getGrading(sensor, type, carMac)
        $.each(levels, function(index, value) {
          var color = value.color
          var data = value.data
          var data = value.data 
          if (data.length > 0) {
            // 创建MapVGL图层管理器,需要使用插件mapvgl
            that.shapeLayer = new mapvgl.ShapeLayer({
              color: color, // 柱状图颜色
              enablePicked: true, // 是否可以拾取
              selectedIndex: -1, // 选中项
              selectedColor: '#ee1111', // 选中项颜色
              selectedColor: '#ee1111', // 选中项颜色 
              autoSelect: true, // 根据鼠标位置来自动设置选中项
              riseTime: 1800 // 楼块初始化升起时间
            })
@@ -772,7 +813,7 @@
          var sw = getPoint(225, point.lng, point.lat, that.distance)
          var ne = getPoint(45, point.lng, point.lat, that.distance)
          var data = point[sensor]
          // 根据因子浓度变换方块颜色
          // 根据因子浓度变换方块颜色   
          color = getColorAndLevel(sensor, data).color
          var polygon = new BMapGL.Polygon([
            new BMapGL.Point(sw.lng, sw.lat), // 左下角
@@ -805,7 +846,7 @@
        var points = []
        $.each(trackPoints, function(index, value) {
          var point = []
          point.push(value['lng'], value['lat'])
          point.push(value['lng'],value['lat'])
          points.push(point)
        })
        data.push({
@@ -816,7 +857,7 @@
        })
        var lineLayer = new mapvgl.LineLayer({
          color: 'red',
          width: 3,
          width: 3, 
          animation: true,
          duration: 10, // 循环时间2s
          trailLength: 0.1, // 拖尾长度占间隔的0.4
@@ -864,7 +905,7 @@
        return new BMapGL.Point(lng, lat)
      }

      function getGrading(sensor, type) {
      function getGrading(sensor, type, carMac) {
        var levels = []
        var level0 = {}
        var level1 = {}
@@ -913,10 +954,14 @@
          if (type === '2D') {
            height = 0
          } else {
            height = value[sensor] * 10
            if (sensor === 'a99054') {
              height = value[sensor] * 500
            }
            height = value[sensor]
            // if (sensor === 'a99054') {
            //   height = value[sensor] * 500
            // }
            // console.log(carMac, 'carMac')
            // if (sensor === 'dustld' && (value[sensor] - 0) < 100 && (value[sensor] - 0) !== 0 && carMac === 'p5dnd7a0243622') {
            //   height = 100 * 10
            // }
          }
          switch (level) {
            case 0:
@@ -1243,7 +1288,7 @@
          draw(that.sensor, that.viewType)
          if (that.viewType === '2D') {
            that.map.setTilt(0)
            drawLine()
            // drawLine()
            drawStartAndEnd()
            $('.sensorLevel').attr('src', '/img/pollutionlevel.png')
          } else if (that.viewType === '3D') {