提交

ebc-middle-platform/src/constants.js

export const RESPONSE_BOUNDARY_PHONE = 600 // 响应式布局手机宽度边界值(像素)
export const LANG_CN = 'zh-CN' // 简体中文
export const LANG_US = 'en-US' // 美式英文
export const GIS_SEA_URL = 'http://192.168.74.189:9999/tdtvector' // 海图地址
export const GIS_SEA_LAYER_URL = 'http://192.168.74.189:9999/tdtvector' // 海图layer地址
export const GIS_SEA_URL = 'http://192.168.74.216:5071/gisserver/dzht/dzht/wmts' // 海图地址

ebc-middle-platform/src/modules/call-help/current.vue

</template>
<script>
import './current.scss'
import {GIS_SEA_LAYER_URL, GIS_SEA_URL} from '../../constants'
export default {
  data() {
    return {
  mounted() {
    window.Vue = this
    this.map = new Ai.Map('current-map', {
      ak: 'MTYwMTMMTAwMU1UWXdNVE0wTlRNMU16WTBNeU14TnpRdw__',
      ak: this.$store.getters.getGisToken,
      center: [39.915599, 116.406568],
      zoom: 5
    })
    var maplayer = null
    maplayer = Ai.TileLayer('http://192.168.74.189:9999/tdtvector')
    maplayer = Ai.TileLayer(GIS_SEA_LAYER_URL)
    this.map.addLayer(maplayer)
    var la = Ai.WMTSLayer('http://192.168.74.216:5071/gisserver/dzht/dzht/wmts')
    var la = Ai.WMTSLayer(GIS_SEA_URL)
    this.map.addLayer(la)
    if (this.map.hasLayer(this.alarmPoint)) {
      this.map.removeLayer(this.alarmPoint)
    }
    var icon = Ai.Icon({
      // 设置图标URL路径
      iconUrl: '/static/images/worker(1).png',
      iconUrl: '/static/images/outlineworker.png',
      // 设置图标大小
      iconSize: [20, 20],
      // 设置点对象和图标的相对偏移量
    // 报警人员弹窗
    this.rescuePoint = Ai.Point([29.388158098102554, 122.45361328125], {icon: Ai.Icon({
      // 设置图标URL路径
      iconUrl: '/static/images/worker.png',
      iconUrl: '/static/images/sosworker.png',
      // 设置图标大小
      iconSize: [20, 20],
      // 设置点对象和图标的相对偏移量

ebc-middle-platform/src/modules/layouts/BasicLayout.vue

<script>
import GlobalLayout from '../page/GlobalLayout.vue'
import IpuStomp from '../../ipu-stomp'
import services from '../../conf/services'
import EventBus from '../../bus'
export default {
  name: 'BasicLayout',
    }
  },
  mounted() {
    this.$test
      .post(services.mapTag.GET_TOKEN, '')
      .then((res) => {
        this.$store.commit('setGisToken', res.data.result.ak)
      })
      .catch((res) => {
        // 请求失败处理...
      })
    // 镜屏调用
    var client
    var callbacks = {}
    }
    client = IpuStomp(
      {
        url: 'ws://192.168.137.178:7100/stomp',
        url: 'ws://10.13.13.43:7100/stomp',
        name: 'zhangsan',
        passcode: '123456',
        UUID: 'zhangsan'

ebc-middle-platform/src/modules/menu/topMenu.vue

<template>
  <div class="layout-header-left">
    <logo/>
    <t-navs ref="navs" :type="light" :threshold="threshold" :active-name.sync="currentActiveName" class="ml-auto" mode="horizontal" @on-select="$_onSelect">
    <t-navs ref="navs" :type="'light'" :threshold="threshold" :active-name.sync="currentActiveName" class="ml-auto" mode="horizontal" @on-select="$_onSelect">
      <t-navs-item v-for="menu in menus" :key="menu.name" :name="menu.name">
        <template v-if="menu.children">
          <div slot="title"><t-icon :icon="menu.meta.icon"></t-icon>{{ menu.meta.title }}</div>

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

    .label{
      position: absolute;
      z-index: 10;
      right: 90px;
      right: 150px;
      bottom: 77px;
      background-color: #59748A;
      font-size: 12px;
        text-align: left;
      }
    }
    .sos{
      color: #F5222D;
    }
    .outline{
      color: #DA9D23;
    }
  }
  .point-out{
    color: #fff;

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

<script>
import './orientation.scss'
import { forEach, filter, find } from 'lodash'
import {GIS_SEA_LAYER_URL, GIS_SEA_URL} from '../../constants'
import services from '../../conf/services'
import IpuStomp from '../../ipu-stomp'
import EventBus from '../../bus'
export default {
  filters: {
      fitBounds: []
    }
  },
  computed: {
    normalData: function () {
      return filter(this.dataList, function (o) {
        return o.type == '正常'
      })
    },
    alertData: function () {
      return filter(this.dataList, function (o) {
        return o.type == '落水告警'
      })
    },
    offlineData: function () {
      return filter(this.dataList, function (o) {
        return o.type == '离线'
      })
    }
  },
  mounted() {
    this.initMap()
    this.initTrackMap()
    this.getGisToken().then(() => {
      this.initMap()
      this.initTrackMap()
    })
    setInterval(() => {
      this.nowDate = new Date()
    }, 1000)
    })
  },
  methods: {
    async getGisToken() {
      await this.$test
        .post(services.mapTag.GET_TOKEN, '')
        .then((res) => {
          this.$store.commit('setGisToken', res.data.result.ak)
        })
        .catch((res) => {
          // 请求失败处理...
        })
    },
    changeLocation(msg) {
      var obj = JSON.parse(msg.body)
      this.layer.normalLayer.eachLayer((e) => {
        console.log(e)
        if (e.options.id == obj.deviceId) {
        console.log(e.getAttributes().deviceNo)
        if (e.getAttributes().deviceId == obj.deviceId) {
          console.log(obj.latitude, obj.longitude)
          e.setLatLng([obj.latitude, obj.longitude])
          e.off()
          this.popupContent(obj, e)
        }
      })
      this.layer.offLineLayer.eachLayer((e) => {
        console.log(e.getAttributes().deviceNo)
        if (e.getAttributes().deviceId == obj.deviceId) {
          console.log(obj.latitude, obj.longitude)
          e.setLatLng([obj.latitude, obj.longitude])
          e.off()
          this.popupContent(obj, e)
        }
      })
      this.layer.outLineLayer.eachLayer((e) => {
        console.log(e.getAttributes().deviceNo)
        if (e.getAttributes().deviceId == obj.deviceId) {
          console.log(obj.latitude, obj.longitude)
          e.setLatLng([obj.latitude, obj.longitude])
          e.off()
          this.popupContent(obj, e)
        }
      })
      this.layer.sosLayer.eachLayer((e) => {
        console.log(e.getAttributes().deviceNo)
        if (e.getAttributes().deviceId == obj.deviceId) {
          console.log(obj.latitude, obj.longitude)
          e.setLatLng([obj.latitude, obj.longitude])
          e.off()
          this.popupContent(obj, e)
        }
      })
    },
    popupContent(e, point) {
      console.log(e, point)
      var icon, tips
      var callHelp = ''
      var other = ''
      if (e.locationStatus == '0') {
        icon = '/static/images/normalworker.png'
        tips = '<div class="normal">正常</div>'
      } else if (e.locationStatus == '1') {
        icon = '/static/images/offlineworker.png'
        tips = '<div class="offline">离线</div>'
      } else if (e.locationStatus == '2' || e.locationStatus == '3') {
        icon = '/static/images/outlineworker.png'
        tips = '<div class="outline">违规</div>'
        if (e.locationStatus == '2') {
          other = '<div class="row outline">' +
                  '<div>定点停留超时</div>' +
                  '<div>' + e.fixedLong + '</div>' +
                  '</div>'
        } else {
          other = '<div class="row outline">' +
                  '<div>进入时间</div>' +
                  '<div>' + e.inDate + '</div>' +
                  '</div>'
        }
      } else if (e.locationStatus == '4' || e.locationStatus == '5') {
        icon = '/static/images/sosworker.png'
        other = '<div class="row sos">' +
                  '<div>求救时间</div>' +
                  '<div>' + e.alarmDate + '</div>' +
                  '</div>' + '<div class="row sos">' +
                  '<div>求救时长</div>' +
                  '<div>' + e.alarmLong + '</div>' +
                  '</div>'
        tips = '<div class="sos">SOS</div>'
        callHelp = '<div style="display:flex;">' +
                  '<button class="point-out" onClick="window.Vue.rescueModal=true"><i style="font-size: 20px;" class="aidicon aidicon-user-outline"></i>指派</button>' +
                  '<button class="close-confirm" onClick="window.Vue.close()"><i style="font-size: 20px;" class="aidicon aidicon-close"></i>关闭</button>' +
                  '</div>'
      }
      point.setIcon(Ai.Icon({
        // 设置图标URL路径
        iconUrl: icon,
        // 设置图标大小
        iconSize: [20, 20],
        // 设置点对象和图标的相对偏移量
        iconAnchor: [0, 0]
      }))
      point.on('click', (pointE) => {
        var content =
                  '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>' + e.userName + '</div>' + tips + '</div><div class="middle"><div class="row">' +
                  '<div>终端编号</div>' +
                  '<div>' + e.deviceNo + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>经度</div>' +
                  '<div>' + e.longitude + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>纬度</div>' +
                  '<div>' + e.latitude + '</div>' +
                  '</div>' + other +
                  '<div class="row">' +
                  '<div>最新定位时间</div>' +
                  '<div>' + e.newDate + '</div>' +
                  '</div></div></div>' + callHelp +
                  '</div></div>'
        Ai.Popup({
          minWidth: 300,
          offset: [0, -10],
          autoClose: true
        })
        // 设置弹出框弹出位置
          .setLatLng(point.getLatLng())
        // 设置弹出框弹出内容
          .setContent(content)
          .openOn(this.map)
      })
    },
    initMap() {
      if (this.map != null && this.map != '') {
        center: [39.915599, 122.406568]
      })
      var maplayer
      maplayer = Ai.TileLayer('http://192.168.74.189:9999/tdtvector')
      maplayer = Ai.TileLayer(GIS_SEA_LAYER_URL)
      var la = Ai.WMTSLayer(
        'http://192.168.74.216:5071/gisserver/dzht/dzht/wmts',
        GIS_SEA_URL,
        { opacity: 0.5 }
      )
      this.map.addLayer(maplayer)
        .then((res) => {
          // 请求成功处理...
          res.data.dataList.forEach((e) => {
            if (e.MAP_TAG_TYPE === '1') { // 电子围栏
            if (e.MAP_TAG_TYPE === '3') { // 电子围栏
              var polygon = Ai.Polygon(e.MAP_TAG_SHAPE, {
                color: '#A74B5C',
                opacity: 1.0,
          res.data.dataList.forEach((e) => {
            var icon, tips
            var callHelp = ''
            if (e.LOCATION_STATUS === '0') {
            if (e.locationStatus === '0') {
              icon = '/static/images/normalworker.png'
              layer = this.layer.normalLayer
              tips = '<div class="normal">正常</div>'
            } else if (e.LOCATION_STATUS === '1') {
            } else if (e.locationStatus === '1') {
              icon = '/static/images/offlineworker.png'
              layer = this.layer.offLineLayer
              tips = '<div class="offline">离线</div>'
            } else if (e.LOCATION_STATUS === '2') {
            } else if (e.locationStatus === '2' || e.locationStatus === '3') {
              icon = '/static/images/outlineworker.png'
              layer = this.layer.outLineLayer
              tips = '<div class="outline">违规</div>'
            } else if (e.LOCATION_STATUS === '3' || e.LOCATION_STATUS === '4') {
            } else if (e.locationStatus === '4' || e.locationStatus === '5') {
              icon = '/static/images/sosworker.png'
              layer = this.layer.sosLayer
              tips = '<div class="sos">SOS</div>'
                  '<button class="close-confirm" onClick="window.Vue.close()"><i style="font-size: 20px;" class="aidicon aidicon-close"></i>关闭</button>' +
                  '</div>'
            }
            var point = Ai.Point([e.LATITUDE, e.LONGITUDE], {
            var point = Ai.Point([e.latitude, e.longitude], {
              icon: Ai.Icon({
                // 设置图标URL路径
                iconUrl: icon,
                iconSize: [20, 20],
                // 设置点对象和图标的相对偏移量
                iconAnchor: [0, 0]
              }),
              id: e.DEVICE_NO
              })
            })
            point.setAttributes(e)
            point.on('click', (pointE) => {
              var content =
                  '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>' + e.PARTY_NAME + '</div>' + tips + '</div><div class="middle"><div class="row">' +
                  '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>' + e.userName + '</div>' + tips + '</div><div class="middle"><div class="row">' +
                  '<div>终端编号</div>' +
                  '<div>' + e.DEVICE_NO + '</div>' +
                  '<div>' + e.deviceNo + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>经度</div>' +
                  '<div>' + e.LONGITUDE + '</div>' +
                  '<div>' + e.longitude + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>纬度</div>' +
                  '<div>' + e.LATITUDE + '</div>' +
                  '<div>' + e.latitude + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>最新定位时间</div>' +
                  '<div>' + e.LOCATION_DATE + '</div>' +
                  '<div>' + e.newDate + '</div>' +
                  '</div></div></div>' + callHelp +
                  '</div></div>'
              Ai.Popup({
          this.map.addLayer(this.layer.outLineLayer)
          this.map.addLayer(this.layer.offLineLayer)
          this.map.addLayer(this.layer.normalLayer)
          this.map.fitBoundsForLayers(this.layer.normalLayer)
        })
        .catch((res) => {
          // 请求失败处理...
        center: [39.915599, 122.406568]
      })
      var maplayer = null
      maplayer = Ai.TileLayer('http://192.168.74.189:9999/tdtvector')
      var la = Ai.WMTSLayer('http://192.168.74.216:5071/gisserver/dzht/dzht/wmts', {opacity: 0.5})
      maplayer = Ai.TileLayer(GIS_SEA_LAYER_URL)
      var la = Ai.WMTSLayer(GIS_SEA_URL, {opacity: 0.5})
      this.trackMap.addLayer(maplayer)
      this.trackMap.addLayer(la)

ebc-middle-platform/src/modules/system-management/map-mark.vue

<script>
import './map-mark.scss'
import services from '../../conf/services'
import {GIS_SEA_LAYER_URL, GIS_SEA_URL} from '../../constants'
export default {
  data() {
    return {
      },
      queryCondition: {
        type: '',
        alarmPerson: ''
        alarmPerson: '',
        userName: ''
      },
      rangeDate: '',
      addMark: false,
    }
  },
  created() {
    this.getList(1, 20, '')
    this.getList()
  },
  mounted() {
    // 请求成功处理...
    this.map = new Ai.Map('modalMap', {
      ak: this.$store.getters.getGisToken,
      center: [39.915599, 116.406568],
      zoom: 5
    })
    var maplayer = null
    maplayer = Ai.TileLayer('http://192.168.74.189:9999/tdtvector')
    this.map.addLayer(maplayer)
    var la = Ai.WMTSLayer(
      'http://192.168.74.216:5071/gisserver/dzht/dzht/wmts',
      { opacity: 0.5 }
    )
    this.map.addLayer(la)
    var options = {
      guideLayers: [] // 导向（吸附）图层对象，当距离相隔很近的时候会与导向对象重合
    }
    this.polygonDrawer = Ai.DrawPolygon(this.map, options) // 初始化多边形绘制工具
    this.polygonDrawer.enable() // 激活多边形绘制工具
    this.map.on(AiDrawEvent.CREATED, (e) => {
      // debugger
      console.log(1)
      this.layer = this.polygonDrawer.polygon(e) // 获取多边形信息
      // console.log(this.polygonDrawer.getPoints())
      this.modalData = this.layer._latlngs[0]
      this.polygonDrawer.editing(this.layer)
      this.polygonDrawer.disable()
      this.map.addLayer(this.layer)
    })
    this.loadMap()
  },
  methods: {
    getList(pageNum, pageSize, MAP_TAG_NAME) {
    loadMap() {
      this.map = new Ai.Map('modalMap', {
        ak: this.$store.getters.getGisToken,
        center: [39.915599, 116.406568],
        zoom: 5
      })
      this.map.addLayer(Ai.TileLayer(GIS_SEA_LAYER_URL))
      this.map.addLayer(Ai.WMTSLayer(
        GIS_SEA_URL,
        { opacity: 0.5 }
      ))
      this.loadPolygonDrawer()
    },
    loadPolygonDrawer() {
      var options = {
        guideLayers: [] // 导向（吸附）图层对象，当距离相隔很近的时候会与导向对象重合
      }
      this.polygonDrawer = Ai.DrawPolygon(this.map, options) // 初始化多边形绘制工具
      this.polygonDrawer.enable() // 激活多边形绘制工具
      this.map.on(AiDrawEvent.CREATED, (e) => {
      // debugger
        console.log(1)
        this.layer = this.polygonDrawer.polygon(e) // 获取多边形信息
        // console.log(this.polygonDrawer.getPoints())
        this.modalData = this.layer._latlngs[0]
        this.polygonDrawer.editing(this.layer)
        this.polygonDrawer.disable()
        this.map.addLayer(this.layer)
      })
    },
    getList() {
      var params = new FormData()
      params.append(
        'data',
        JSON.stringify({
          pageNum: pageNum,
          pageSize: pageSize,
          mapTagName: MAP_TAG_NAME
          pageNum: this.table.pager.currentPage,
          pageSize: this.table.pager.size,
          mapTagName: this.queryCondition.userName
        })
      )
      this.$test
          // 请求成功处理...
          this.table.data = res.data.dataList
          this.table.pager.total = res.data.dataNum
          this.table.pager.currentPage = pageNum
          // this.table.pager.currentPage = pageNum
        })
        .catch((res) => {
          // 请求失败处理...
    },
    onReset() {
      this.queryCondition.userName = ''
      this.getList(1, this.table.pager.size, this.queryCondition.userName)
      this.table.pager.currentPage = 1
      this.getList()
    },
    onSearch() {
      this.getList(1, this.table.pager.size, this.queryCondition.userName)
      this.table.pager.currentPage = 1
      this.getList()
    },
    toExport() {
      var params = new FormData()
          .post(services.mapTag.UPD_MAP_TAG, params)
          .then((res) => {
            // 请求成功处理...
            this.getList(
              this.table.pager.currentPage,
              this.table.pager.size,
              this.queryCondition.userName
            )
            this.getList()
            this.polygonDrawer.disable()
            this.modalData = []
            this.markName = ''
            this.modalData = []
            this.markName = ''
            this.residenceTimeLength = ''
            this.getList(
              this.table.pager.currentPage,
              this.table.pager.size,
              this.queryCondition.userName
            )
            this.getList()
          })
          .catch((res) => {
            // 请求失败处理...
      this.modalData = []
    },
    onPagerChange(page) {
      this.getList(page, this.table.pager.size, this.queryCondition.userName)
      this.table.pager.currentPage = page
      this.getList()
    },
    onSizeChange(number) {
      this.getList(1, number, this.queryCondition.userName)
      this.table.pager.currentPage = 1
      this.table.pager.size = number
      this.getList()
    },
    handleClick(row) {
      var params = new FormData()
              // 请求成功处理...
              // debugger
              this.$Message.success('操作成功')
              that.getList(
                that.table.pager.currentPage,
                that.table.pager.size,
                that.queryCondition.userName
              )
              that.getList()
            })
            .catch((res) => {
              // 请求失败处理...