feat:修改实时报警界面

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

@@ -77,7 +77,7 @@
  }
  .right{
    flex: 1;
    padding: 40px 30px 0 0;
    padding: 40px 30px 0 30px;
    #current-map{
      width: 100%;
      height: 100%;
@@ -94,8 +94,40 @@
  .aimap-popup-tip{
    background-color: #344979;
  }
} 
}
.point-out{
  color: #fff;
  background-color: #147BD1;
  border: 1px solid #147BD1;
  height: 25px;
  cursor: pointer;
  line-height: 25px;
  margin: 7.5px 10px 0 auto;
  border-radius: 4px;
  width: 85px;
  .btn-primary:hover, .radio-group-button .form-radio:hover:checked, .radio-group-button .form-radio[checked]:hover {
    color: #fff;
    border-color: transparent;
    background-color: #378fd8;
}
}
.close-confirm{
  color: #fff;
  background-color: #147BD1;
  border: 1px solid #147BD1;
  height: 25px;
  cursor: pointer;
  line-height: 25px;
  margin: 7.5px 15px 10px 0;
  border-radius: 4px;
  width: 85px;
}
.tips-item{
  .point-out{
    color: #fff;
    background-color: #147BD1;
    border: 1px solid #147BD1
  }
  // width: 300px;
  // margin: 10px 30px;
  // border: 1px solid #E0E0E0;
@@ -151,6 +183,11 @@
      }
    }
  }
  .point-out{
    color: #fff;
    background-color: #147BD1;
    border: 1px solid #147BD1
  }
  .footer{
    height: 40px;
    border-top: 1px solid #E0E0E0;

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

@@ -1,6 +1,6 @@
<template>
  <div class="current-container">
    <t-scroll-bar :auto-hide="false" class="left">
    <!-- <t-scroll-bar :auto-hide="false" class="left">
      <div v-for="(item,index) in alarmList" :key="index" :class="[{active:index == activeIndex},'item']" @click="choose(item,index)">
        <div class="top">
          <div class="user-pic"></div>
@@ -30,7 +30,7 @@
          <t-button icon="close" color="primary" @click="close(item)">关闭</t-button>
        </div>
      </div>
    </t-scroll-bar>
    </t-scroll-bar> -->
    <div class="right">
      <div id="current-map"></div>
    </div>
@@ -108,6 +108,7 @@ export default {
    }
  },
  mounted() {
    window.Vue = this
    this.map = new Ai.Map('current-map', {
      ak: 'MTYwMTMMTAwMU1UWXdNVE0wTlRNMU16WTBNeU14TnpRdw__',
      center: [39.915599, 116.406568],
@@ -116,83 +117,126 @@ export default {
    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')
    var la = Ai.WMTSLayer('http://192.168.74.216:5071/gisserver/dzht/dzht/wmts')
    this.map.addLayer(la)
  },
  methods: {
    choose(item, index) {
      this.activeIndex = index
      if (this.map.hasLayer(this.alarmPoint)) {
        this.map.removeLayer(this.alarmPoint)
      }
      if (this.map.hasLayer(this.rescuePoint)) {
        this.map.removeLayer(this.rescuePoint)
      }
      if (this.map.hasLayer(this.polyline)) {
        this.map.removeLayer(this.polyline)
      }
      var icon = Ai.Icon({
    if (this.map.hasLayer(this.alarmPoint)) {
      this.map.removeLayer(this.alarmPoint)
    }
    if (this.map.hasLayer(this.rescuePoint)) {
      this.map.removeLayer(this.rescuePoint)
    }
    if (this.map.hasLayer(this.polyline)) {
      this.map.removeLayer(this.polyline)
    }
    var icon = Ai.Icon({
      // 设置图标URL路径
        iconUrl: '/static/images/worker(1).png',
        // 设置图标大小
        iconSize: [20, 20],
        // 设置点对象和图标的相对偏移量
        iconAnchor: [0, 0]
      })
      this.alarmPoint = Ai.Point([29.86089241772908, 122.09930419921876], {icon: icon})
      this.alarmPoint.on('click', (e) => {
        console.log(e)
        var content = '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>张三</div><div class="hand-alarm">救援人员</div></div><div class="middle"><div class="row">' +
            '<div>终端编号</div>' +
            '<div>ZDBH0001</div>' +
          '</div>' +
          '<div class="row">' +
            '<div>最新定位时间</div>' +
            '<div>2020.08.13 08:24:32</div>' +
          '</div></div></div>'
        var popup = Ai.Popup({minWidth: 300, offset: [0, -10], autoClose: false})
        // 设置弹出框弹出位置
          .setLatLng({lat: 29.86089241772908, lng: 122.09930419921876})
        // 设置弹出框弹出内容
          .setContent(content)
          .openOn(this.map)
      })
      this.map.addLayer(this.alarmPoint)
      this.rescuePoint = Ai.Point([29.388158098102554, 122.45361328125], {icon: Ai.Icon({
      iconUrl: '/static/images/worker(1).png',
      // 设置图标大小
      iconSize: [20, 20],
      // 设置点对象和图标的相对偏移量
      iconAnchor: [0, 0]
    })
    // 救援人员弹窗
    this.alarmPoint = Ai.Point([29.86089241772908, 122.09930419921876], {icon: icon})
    this.alarmPoint.on('click', (e) => {
      var content = '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>张三</div><div class="hand-alarm">救援人员</div></div><div class="middle"><div class="row">' +
           '<div>终端编号</div>' +
           '<div>ZDBH0001</div>' +
         '</div>' +
         '<div class="row">' +
           '<div>最新定位时间</div>' +
           '<div>2020.08.13 08:24:32</div>' +
         '</div></div></div>' +
         '<div style="display:flex;">' +
          '<button class="point-out" onClick="window.Vue.modal=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></div></div>'
      var popup = Ai.Popup({minWidth: 300, offset: [0, -10], autoClose: false})
      // 设置弹出框弹出位置
        .setLatLng({lat: 29.86089241772908, lng: 122.09930419921876})
      // 设置弹出框弹出内容
        .setContent(content)
        .openOn(this.map)
    })
    var content = '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>张三</div><div class="hand-alarm">救援人员</div></div><div class="middle"><div class="row">' +
           '<div>终端编号</div>' +
           '<div>ZDBH0001</div>' +
         '</div>' +
         '<div class="row">' +
           '<div>最新定位时间</div>' +
           '<div>2020.08.13 08:24:32</div>' +
           '</div></div></div>' +
           '<div style="display:flex;">' +
          '<button class="point-out" onClick="window.Vue.modal=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></div></div>'
    var popup = Ai.Popup({minWidth: 300, offset: [0, -10], autoClose: false})
      // 设置弹出框弹出位置
      .setLatLng({lat: 29.86089241772908, lng: 122.09930419921876})
      // 设置弹出框弹出内容
      .setContent(content)
      .openOn(this.map)
    this.map.addLayer(this.alarmPoint)
    // 报警人员弹窗
    this.rescuePoint = Ai.Point([29.388158098102554, 122.45361328125], {icon: Ai.Icon({
      // 设置图标URL路径
        iconUrl: '/static/images/worker.png',
        // 设置图标大小
        iconSize: [20, 20],
        // 设置点对象和图标的相对偏移量
        iconAnchor: [0, 0]
      })})
      this.rescuePoint.on('click', (e) => {
        console.log(e)
        var content = '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>张三</div><div class="alarm">报警人员</div></div><div class="middle"><div class="row">' +
            '<div>终端编号</div>' +
            '<div>ZDBH0001</div>' +
          '</div>' +
          '<div class="row">' +
            '<div>最新定位时间</div>' +
            '<div>2020.08.13 08:24:32</div>' +
          '</div></div></div>'
        var popup = Ai.Popup({minWidth: 300, offset: [0, -10], autoClose: false})
        // 设置弹出框弹出位置
          .setLatLng({lat: 29.388158098102554, lng: 122.45361328125})
        // 设置弹出框弹出内容
          .setContent(content)
          .openOn(this.map)
      })
      this.map.addLayer(this.rescuePoint)
      var lineWktstr = 'LINESTRING ( 122.09930419921876 29.86089241772908,122.18582153320314 29.6913335169976,122.21878051757814 29.42494595179543,122.45361328125 29.388158098102554)'
      this.polyline = Ai.Polyline(lineWktstr, {color: 'red'})
      this.map.addLayer(this.polyline)
      this.map.on('click', function(evt) {
        var lat = evt.latlng.lat // 点击地图时的纬度
        var lng = evt.latlng.lng // 点击地图时的经度
        console.log(lng, lat)
      })
    },
      iconUrl: '/static/images/worker.png',
      // 设置图标大小
      iconSize: [20, 20],
      // 设置点对象和图标的相对偏移量
      iconAnchor: [0, 0]
    })})
    var content = '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>张三</div><div class="alarm">报警人员</div></div><div class="middle"><div class="row">' +
           '<div>终端编号</div>' +
           '<div>ZDBH0001</div>' +
         '</div>' +
         '<div class="row">' +
           '<div>最新定位时间</div>' +
           '<div>2020.08.13 08:24:32</div>' +
            '</div></div></div>' +
           '<div style="display:flex;">' +
          '<button class="point-out" onClick="window.Vue.modal=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></div></div>'
    var popup = Ai.Popup({minWidth: 300, offset: [0, -10], autoClose: false})
      // 设置弹出框弹出位置
      .setLatLng({lat: 29.388158098102554, lng: 122.45361328125})
      // 设置弹出框弹出内容
      .setContent(content)
      .openOn(this.map)
    this.rescuePoint.on('click', (e) => {
      console.log(e)
      var content = '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>张三</div><div class="alarm">报警人员</div></div><div class="middle"><div class="row">' +
           '<div>终端编号</div>' +
           '<div>ZDBH0001</div>' +
         '</div>' +
         '<div class="row">' +
           '<div>最新定位时间</div>' +
           '<div>2020.08.13 08:24:32</div>' +
            '</div></div></div>' +
           '<div style="display:flex;">' +
          '<button class="point-out" onClick="window.Vue.modal=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></div></div>'
      var popup = Ai.Popup({minWidth: 300, offset: [0, -10], autoClose: false})
      // 设置弹出框弹出位置
        .setLatLng({lat: 29.388158098102554, lng: 122.45361328125})
      // 设置弹出框弹出内容
        .setContent(content)
        .openOn(this.map)
    })
    this.map.addLayer(this.rescuePoint)
    var lineWktstr = 'LINESTRING ( 122.09930419921876 29.86089241772908,122.18582153320314 29.6913335169976,122.21878051757814 29.42494595179543,122.45361328125 29.388158098102554)'
    this.polyline = Ai.Polyline(lineWktstr, {color: 'red'})
    this.map.addLayer(this.polyline)
    this.map.on('click', function(evt) {
      var lat = evt.latlng.lat // 点击地图时的纬度
      var lng = evt.latlng.lng // 点击地图时的经度
      console.log(lng, lat)
    })
  },
  methods: {
    showModal(item) {
      this.modal = true
    },
@@ -216,4 +260,5 @@ export default {
    }
  }
}
</script>

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

@@ -313,13 +313,13 @@ export default {
        this.map.remove();
      }
      this.map = new Ai.Map("div1", {
        ak: "MTYwMTIMTAwMU1UWXdNVEkxTnpNMk16ZzBPU014TnpRdw__",
        ak: "MTYwMzEMTAwMU1UWXdNekU0TWprMk1EYzFOaU14TnpRdw__",
        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');
      var la = Ai.WMTSLayer('http://192.168.74.216:5071/gisserver/dzht/dzht/wmts');
      this.map.addLayer(maplayer);
      this.map.addLayer(la);