tmzn-weihe/src/views/safety-inspection/index.vue

<template>
  <div class="container">
    <Left ref="inspRef"></Left>
    <Right @refreshLeftList="refreshLeftList" :inspectionOptions="inspectionOptions"></Right>
  </div>
</template>

<script>
import Left from './left.vue'
import Right from './right.vue'
import * as mars3d from 'mars3d'
import Vue from 'vue'
let graphicsLayer = null
Vue.prototype.mars3d = mars3d
Vue.prototype.Cesium = mars3d.Cesium
export default {
  components: {
    Left,
    Right
  },
  data() {
    return {
      inspectionOptions: [
        {
          latitude: '28.189249',
          longitude: '113.065505',
          devName: '浏阳市中和丁字村无线机房_1"',
          deviceCode: '43010000831327000018',
          channelCode: '430100430000000021130000033'
        },
        {
          latitude: '28.194911',
          longitude: '113.066789',
          devName: '长沙芙蓉区隆平路与望龙路交叉口-东瑞社区',
          deviceCode: '43010000831327000019',
          channelCode: '430100430000000021130000037'
        }
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      window
        .requestSDK(
          '/ttdevice/ttview/device/queryDeviceInfoPage',
          {
            pageNum: 1,
            pageSize: 10,
            platFlag: '1',
            operType: '0'
          },
          {},
          'post'
        )
        .then(async (res) => {
          this.formatData(res.rows)
        })
    },
    formatData(data) {
      this.inspectionOptions = data.map((item) => {
        const result = {
          latitude: item.latitude,
          longitude: item.longitude,
          devName: item.devName,
          deviceCode: item.deviceCode,
          channelCode: item.children && item.children.length > 0 ? item.children[0].channelCode : null
        }
        if (!item.children || item.children.length === 0) {
          result.disabled = true
        }
        return result
      })

      this.addInitialPoints()
    },
    refreshLeftList() {
      this.$refs.inspRef.getSecurityPatrolList()
    },
    // 添加初始点
    addInitialPoints() {
      this.inspectionOptions.forEach((point) => {
        if(!point.disabled){
          this.addPointToMap(point)
        }
      })
    },

    // 添加点到地图
    addPointToMap(point) {
      // if (graphicsLayer) {
      //   window.map.removeLayer(graphicsLayer)
      // }
      graphicsLayer = new this.mars3d.layer.GraphicLayer()
      window.map.addLayer(graphicsLayer)
      const graphic = new mars3d.graphic.PointEntity({
        position: [point.longitude, point.latitude],
        billboard: {
          image: require('./image/camera.png'),
          scale: 1,
          horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM
        },
        attr: {
          ...point
        },
        label: {
          text: point.devName,
          font_size: 32,
          color: '#red',
          outline: true,
          outlineColor: '#000000',
          outlineWidth: 2,
          horizontalOrigin: this.Cesium.HorizontalOrigin.LEFT,
          verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,
          pixelOffset: new this.Cesium.Cartesian2(15, 0)
        }
      })

      graphicsLayer.addGraphic(graphic)
      let that = this
      graphic.on(this.mars3d.EventType.click, function () {
        const pointData = graphic.attr
         that.fetchUrl(pointData).then((res) => {
          if(res.code == 4001){
            that.$message.warning('设备离线')
          }else{
            const url = res.data.streamUrl
            that.$set(pointData, 'url', url)
            that.$globalEventBus.$emit('clickVideoPlay', {point: pointData, visible: true ,type:'click'})
          }
        })
      })
    },
    fetchUrl(item) {
      return new Promise((resolve, reject) => {
        window
          .requestSDK(
            '/ttvideo/video/player/getVideoRealtimeUrl',
            {
              deviceCode: item.deviceCode,
              channelCode: item.channelCode,
              netType: '1',
              protocolType: 5,
              streamType: 1
            },
            {},
            'post'
          )
          .then(async (res) => {
            resolve(res)
          })
      })
    },
  }
}
</script>

<style></style>