首页修改提交

ebc-middle-platform/src/modules/orientation/orientation.vue

  data() {
    return {
      map: null,
      tal: 32.465444444444444,
      switch1: true,
      pointsarr: null,
      markTypes: [],
      toolTypes: [],
      popups: [],
      aggregatedMapAreaList: {
        mapAreas: [], // 围栏集合
        coreEntitys: [] // 聚合设备集合
      popup: null,
      shadow: false,
      dataList: [
        {
          name: '王小明',
          number: 'ZDBH0001',
          type: '落水告警',
          Longitude: '32.4233',
          latitude: '122.2922',
          alarmTime: '2020.7.10 08:21:43',
          newMarkerTime: '2020.7.10 08:21:43',
          rescuePerson: '海事局A',
          rescueTime: '2020.7.3 11:22:16',
          rescueDuration: '10小时39分钟'
        },
        {
          name: '王小明1',
          number: 'ZDBH0002',
          type: '正常',
          Longitude: '32.333',
          latitude: '122.0822',
          alarmTime: '2020.7.10 08:21:43',
          newMarkerTime: '2020.7.10 08:21:43',
          rescuePerson: '海事局A',
          rescueTime: '2020.7.3 11:22:16',
          rescueDuration: '10小时39分钟'
        },
        {
          name: '王小明2',
          number: 'ZDBH0003',
          type: '正常',
          Longitude: '32.4444',
          latitude: '122.0352',
          alarmTime: '2020.7.10 08:21:43',
          newMarkerTime: '2020.7.10 08:21:43',
          rescuePerson: '海事局A',
          rescueTime: '2020.7.3 11:22:16',
          rescueDuration: '10小时39分钟'
        },
        {
          name: '王小明3',
          number: 'ZDBH0004',
          type: '离线',
          Longitude: '32.555',
          latitude: '121.0752',
          alarmTime: '2020.7.10 08:21:43',
          newMarkerTime: '2020.7.10 08:21:43',
          rescuePerson: '海事局A',
          rescueTime: '2020.7.3 11:22:16',
          rescueDuration: '10小时39分钟'
        },
        {
          name: '王小明4',
          number: 'ZDBH0005',
          type: '落水告警',
          Longitude: '32.466',
          latitude: '122.04322',
          alarmTime: '2020.7.10 08:21:43',
          newMarkerTime: '2020.7.10 08:21:43',
          rescuePerson: '海事局A',
          rescueTime: '2020.7.3 11:22:16',
          rescueDuration: '10小时39分钟'
        }
      ],
      nowDate: new Date(),
      modal: false,
      this.nowDate = new Date()
    }, 1000)
    EventBus.$on('person', (msg) => { // 获取镜屏推送消息
      console.log(msg)
      this.changeLocation(msg)
      msg = JSON.parse(msg)
      // console.log(msg)
      this.personStatistics = msg.data.countMap
      if (msg.data.aggregatedMapAreaList) {
        this.changeLocation(msg.data.aggregatedMapAreaList)
      }
      if (msg.data.unaggregatedEntityPositionList) {
        this.changeUnaggregated(msg.data.unaggregatedEntityPositionList)
      }
    })
    EventBus.$on('ship', (msg) => { // 获取镜屏推送消息
      console.log(msg)
        this.map.on('popupopen', this.popOpen)
        this.loadMapArea()
        this.loadCoreEntity()
        // this.loadMapView()
      }).catch(res => {
        // 请求失败处理...
      })
              businessTypeName = t.name
            }
          })
          var coreEntity = Ai.Point([e.latitude, e.longitude], {
            icon: Ai.Icon({
              // 设置图标URL路径
              iconUrl: url,
              // 设置图标大小
              iconSize: [20, 20],
              // 设置点对象和图标的相对偏移量
              iconAnchor: [100, 100]
            })
          })
          coreEntity.setAttributes({'elementId': e.coreEntityId, 'resourceToolType': e.coreEntityType})
          this.layer.equipmentLayer.addLayer(coreEntity)
          if (e.employeeCount > 0) {
            var classStr = this.getClassByStatus(e.locationStatus)
            var point = Ai.Point([e.latitude, e.longitude], {
                iconAnchor: [15, 50]
              })
            })
            point.setAttributes({'resourceToolType': ''})
            this.layer.equipmentLayer.addLayer(point)
            this.map.addLayer(point)
            this.getPopup(point, e.ebcEntityPositionList, businessTypeName, e.mapAreaName, [0, -40])
            coreEntity.point = point
          }
          var coreEntity = Ai.Point([e.latitude, e.longitude], {
            icon: Ai.Icon({
              // 设置图标URL路径
              iconUrl: url,
              // 设置图标大小
              iconSize: [20, 20],
              // 设置点对象和图标的相对偏移量
              iconAnchor: [100, 100]
            })
          })
          coreEntity.setAttributes({'resourceToolType': '002'})
          this.layer.equipmentLayer.addLayer(coreEntity)
        }
      })
    },
      this.aggregatedMapAreaList.mapAreas.forEach(e => {
        var coverWktStr = e.mapAreaContent
        var coverLayer = Ai.Polygon(coverWktStr, {color: e.areaColor, opacity: 1.0})
        coverLayer.setAttributes({'mapAreaBusinessType': e.businessType})
        coverLayer.setAttributes({'elementId': e.mapAreaId, 'mapAreaBusinessType': e.businessType})
        this.layer.areaLayer.addLayer(coverLayer)
        if (e.ebcEntityPositionList.length > 0) {
          var la = coverLayer.getCenter()
              iconAnchor: [15, 15]
            })
          })
          this.layer.areaLayer.addLayer(point)
          this.map.addLayer(point)
          coverLayer.point = point
          var businessTypeName
          this.markTypes.forEach(m => {
            if (m.mapAreaBusinessType == e.businessType) {
            }
          })
          this.getPopup(point, e.ebcEntityPositionList, businessTypeName, e.mapAreaName, [0, -10])
          point.setAttributes({'mapAreaBusinessType': ''})
        }
      })
    },
    getClassByStatus(status) {
      // "060";  // 救援人员 ------ 黄色
      // "050";  // 自动告警 ------ 红色
      // "040";  // 手动告警 ------ 红色
      // "030";  // 离线 ------ 灰色
      // "020";  // 进入了禁入区域 ------ 黄色
      // "010";  // 在限制区域超时 ------ 黄色
      // "015";  // 进入限制区域（尚未超时） ------ 绿色
      // "000";  // 正常 ------ 绿色
      switch (status) {
        case '060':
          return 'outline'
          break
        case '050':
          return 'sso'
          break
        case '040':
          return 'sso'
          break
        case '030':
          return 'offline'
          break
        case '020':
          return 'outline'
          break
        case '010':
          return 'outline'
          break
        case '000':
          return 'normal'
          break
        case '015':
          return 'normal'
          break
        default:
          return 'normal'
      }
    },
    switchChange(status) {
      console.log(status)
      if (status) {
        this.popups.forEach(e => {
          e.openOn(this.map)
        this.layer.areaLayer.eachLayer((la) => {
          if (la.point) {
            la.point.popup.openOn(this.map)
          }
        })
        this.layer.equipmentLayer.eachLayer((la) => {
          if (la.point) {
            la.point.popup.openOn(this.map)
          }
        })
        this.layer.personLayer.eachLayer((la) => {
          if (la.popup) {
            la.popup.openOn(this.map)
          }
        })
      } else {
        this.popups.forEach(e => {
          this.map.closePopup(e)
        this.layer.areaLayer.eachLayer((la) => {
          if (la.point) {
            this.map.closePopup(la.point.popup)
          }
        })
        this.layer.equipmentLayer.eachLayer((la) => {
          if (la.point) {
            this.map.closePopup(la.point.popup)
          }
        })
        this.layer.personLayer.eachLayer((la) => {
          if (la.popup) {
            this.map.closePopup(la.popup)
          }
        })
      }
    },
    changeLocation(msg) {
      msg.forEach(e => {
        if (e.mapAreaContent) {
          this.layer.areaLayer.eachLayer((la) => {
            if (e.mapAreaId == la.getAttributes().elementId) {
              if (la.point) {
                this.map.closePopup(la.point.popup)
                this.map.removeLayer(la.point)
              }
              if (e.ebcEntityPositionList.length > 0) {
                var classStr = this.getClassByStatus(e.locationStatus)
                var point = Ai.Point(la.getCenter(), {
                  icon: Ai.DivIcon({
                    html: '<div class="' + classStr + '">' + e.ebcEntityPositionList.length + '人</div>',
                    className: 'person-count',
                    // 设置图标大小
                    // iconSize: [20, 20],
                    // 设置点对象和图标的相对偏移量
                    iconAnchor: [15, 15]
                  })
                })
                this.map.addLayer(point)
                la.point = point
                var businessTypeName
                this.markTypes.forEach(m => {
                  if (m.mapAreaBusinessType == e.businessType) {
                    businessTypeName = m.name
                  }
                })
                this.getPopup(point, e.ebcEntityPositionList, businessTypeName, e.mapAreaName, [0, -10])
              }
            }
          })
        } else {
          this.layer.equipmentLayer.eachLayer((la) => {
            if (e.coreEntityId == la.getAttributes().elementId) {
              if (la.point) {
                this.map.closePopup(la.point.popup)
                this.map.removeLayer(la.point)
              }
              console.log(la.getAttributes().elementId)
              la.setLatLng([e.latitude, e.longitude])
              if (e.ebcEntityPositionList.length > 0) {
                var classStr = this.getClassByStatus(e.locationStatus)
                var point = Ai.Point([e.latitude, e.longitude], {
                  icon: Ai.DivIcon({
                    html: '<div class="' + classStr + '">' + e.employeeCount + '人</div>',
                    className: 'person-count',
                    // 设置图标大小
                    // iconSize: [20, 20],
                    // 设置点对象和图标的相对偏移量
                    iconAnchor: [15, 50]
                  })
                })
                this.map.addLayer(point)
                var businessTypeName = '设备'
                this.toolTypes.forEach(t => {
                  if (e.coreEntityType == t.resourceToolType) {
                    businessTypeName = t.name
                  }
                })
                this.getPopup(point, e.ebcEntityPositionList, businessTypeName, e.mapAreaName, [0, -40])
                la.point = point
              }
            }
            console.log('..............')
          })
        }
      })
      // this.loadMapArea()
      // this.loadCoreEntity()
    },
    getPopup(point, positionList, type, name, offset) {
      var popup = Ai.Popup({
      // if (point.popup) {
      //   point.popup.remove()
      //   point.popup = null
      // }
      var maxWidth = 100
      if (type) {
        maxWidth = 300
      }
      point.popup = Ai.Popup({
        maxWidth: maxWidth,
        offset: offset,
        autoClose: false,
        autoPan: false,
      })
      content += '</div></div>'
      // 设置弹出框弹出位置
      popup.setLatLng(point.getLatLng())
      point.popup.setLatLng(point.getLatLng())
      // 设置弹出框弹出内容
      popup.setContent(content)
      popup.openOn(this.map)
      point.popup = popup
      point.popup.setContent(content)
      if (this.switch1) {
        point.popup.openOn(this.map)
      }
      // point.popup = popup
      point.on('click', (e) => {
        if (point.popup.openo) {
          this.map.closePopup(point.popup)
          point.popup.openOn(this.map)
        }
      })
      this.popups.push(popup)
      popup.openo = true
      return popup
      point.popup.openo = true
      // return point.popup
    },
    popClose(e) {
      e.popup.openo = false
      e.popup.openo = true
    },
    loadUnaggregated(dataList) { // 加载不聚合的人
      this.map.addLayer(this.layer.personLayer)
      dataList.forEach(element => {
        var classStr = this.getClassByStatus(element.locationStatus)
        var point = Ai.Point([element.latitude, element.longitude], {
            iconAnchor: [15, 15]
          })
        })
        this.map.addLayer(point)
        point.setAttributes({'elementId': element.entityId})
        this.layer.personLayer.addLayer(point)
        // this.map.addLayer(point)
        this.getPopup(point, [element], '', '', [0, -10])
      })
      // this.map.setViewPort([points])
    },
    changeUnaggregated(dataList) { // 修改不聚合的人
      dataList.forEach(element => {
        var is = true
        this.layer.personLayer.eachLayer((la) => {
          if (element.entityId == la.getAttributes().elementId) {
            debugger
            is = false
            this.map.closePopup(la.popup)
            la.popup.remove()
            console.log('修改' + element.name)
            la.setLatLng([element.latitude, element.longitude])
            var classStr = this.getClassByStatus(element.locationStatus)
            var icon = Ai.DivIcon({
              html: '<div class="' + classStr + '">1人</div>',
              className: 'person-count',
              // 设置图标大小
              // iconSize: [20, 20],
              // 设置点对象和图标的相对偏移量
              iconAnchor: [15, 15]
            })
            la.setIcon(icon)
            // point.setAttributes({'elementId': element.entityId})
            // this.layer.personLayer.addLayer(point)
            // this.map.addLayer(point)
            this.getPopup(la, [element], '', '', [0, -10])
          }
        })
        if (is) {
          console.log('新增' + element.name)
          var classStr = this.getClassByStatus(element.locationStatus)
          var point = Ai.Point([element.latitude, element.longitude], {
            icon: Ai.DivIcon({
              html: '<div class="' + classStr + '">1人</div>',
              className: 'person-count',
              // 设置图标大小
              // iconSize: [20, 20],
              // 设置点对象和图标的相对偏移量
              iconAnchor: [15, 15]
            })
          })
          point.setAttributes({'elementId': element.entityId})
          this.layer.personLayer.addLayer(point)
          // this.map.addLayer(point)
          this.getPopup(point, [element], '', '', [0, -10])
        }
      })
      // this.map.setViewPort([points])
    },
    getClassByStatus(status) {
      switch (status) {
        case '060': // 救援人员 ------ 黄色
          return 'outline'
          break
        case '050': // 自动告警 ------ 红色
          return 'sso'
          break
        case '040': // 手动告警 ------ 红色
          return 'sso'
          break
        case '030': // 离线 ------ 灰色
          return 'offline'
          break
        case '020': // 进入了禁入区域 ------ 黄色
          return 'outline'
          break
        case '010': // 在限制区域超时 ------ 黄色
          return 'outline'
          break
        case '000': // 正常 ------ 绿色
          return 'normal'
          break
        case '015': // 进入限制区域（尚未超时） ------ 绿色
          return 'normal'
          break
        default:
          return 'normal'
      }
    },
    loadAggregated(dataList) {
    },
    showOrHide(layer, item) { // 地图设备人员围栏显示和隐藏
        if ((e.getAttributes().resourceToolType == item.resourceToolType && item.resourceToolType != undefined) || (e.getAttributes().mapAreaBusinessType == item.mapAreaBusinessType && item.mapAreaBusinessType != undefined)) {
          if (this.map.hasLayer(e)) {
            this.map.removeLayer(e)
            if (e.popup) {
              this.map.closePopup(e.popup)
            if (e.point) {
              this.map.removeLayer(e.point)
              if (e.point.popup) {
                this.map.closePopup(e.point.popup)
              }
            }
          } else {
            this.map.addLayer(e)
            if (e.popup) {
              e.popup.openOn(this.map)
            if (e.point) {
              this.map.addLayer(e.point)
              if (e.point.popup) {
                e.point.popup.openOn(this.map)
              }
            }
          }
        }