地图标记模块接口接入

ebc-middle-platform/src/conf/services.js

@@ -141,10 +141,12 @@ export default {
  },
  mapTag: {
    GET_TOKEN: '/gisToken/gisToken',
    GET_MAP_TAG: '/mapTag/queryMapTagInfo', // 查询地图标记信息
    ADD_MAP_TAG: '/mapTag/modifyMapTagInfo', // 新增地图标记信息
    DEL_MAP_TAG: '/mapTag/deleteMapTagXyInfo', // 删除地图标记信息
    UPD_MAP_TAG: '/mapTag/queryMapTagforModifyInfo' // 查询地图标记信息用作修改
    GET_MAP_TAG: '/mapTag/queryPageMapTagInfo', // 查询地图标记信息
    GET_ALL_MAP_TAG: '/mapTag/queryAllMapTagInfo', // 查询地图标记信息
    GET_ONE_MAP_TAG: '/mapTag/queryOneMapTagInfo', // 查询地图标记信息
    ADD_MAP_TAG: '/mapTag/addMapTagInfo', // 新增地图标记信息
    DEL_MAP_TAG: '/mapTag/deleteMapTagInfo', // 删除地图标记信息
    UPD_MAP_TAG: '/mapTag/modifyMapTagInfo' // 查询地图标记信息用作修改
  },
  equipment: {
    GET_EQUIPMENT: '/equipment/queryEquipmentInfo', // 查询设备管理信息

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

@@ -44,6 +44,7 @@
<script>
import GlobalLayout from '../page/GlobalLayout.vue'
import IpuStomp from '../../ipu-stomp'
import services from "../../conf/services";
export default {
  name: 'BasicLayout',
  components: {
@@ -60,6 +61,14 @@ export default {
    }
  },
  mounted() {
    this.$test
        .post(services.mapTag.GET_TOKEN, '')
        .then((res) => {
          this.$store.commit('setGisToken',res.data.result.ak)
        })
        .catch((res) => {
          // 请求失败处理...
        });
    // 镜屏调用
    var client
    var callbacks = {}
@@ -77,7 +86,6 @@ export default {
        url: 'ws://192.168.3.200:7100/stomp',
        name: 'zhangsan',
        passcode: '123456',
        host: '',
        UUID: 'zhangsan'
      },
      callbacks

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

@@ -3,57 +3,96 @@
    <div class="top-container">
      <div class="person-info">
        <div>全部<span class="number">29</span>人</div>
        <div><div class="normal"></div>正常<span class="number">26</span>人</div>
        <div><div class="off-line"></div>离线<span class="number">2</span>人</div>
        <div><div class="sos"></div>SOS<span class="number">1</span>人</div>
        <div class="time">当前时间：{{ nowDate|dateFormat }}</div>
        <div>
          <div class="normal"></div>
          正常<span class="number">26</span>人
        </div>
        <div>
          <div class="off-line"></div>
          离线<span class="number">2</span>人
        </div>
        <div>
          <div class="sos"></div>
          SOS<span class="number">1</span>人
        </div>
        <div class="time">当前时间：{{ nowDate | dateFormat }}</div>
      </div>
      <div class="right-content">
        <t-button color="success" icon="map-marker-outline" @click="()=>{trackModal=true}">轨迹</t-button>
        <t-button
          color="success"
          icon="map-marker-outline"
          @click="
            () => {
              trackModal = true;
            }
          "
          >轨迹</t-button
        >
        <div>悬浮窗<t-switch rounded></t-switch></div>
      </div>
    </div>
    <div id="div1" style="height:100%"></div>
    <div id="div1" style="height: 100%"></div>
    <div class="label">
      <div class="item">
        <div>
          <div class="sos"></div><div>SOS</div>
          <div class="sos"></div>
          <div>SOS</div>
        </div>
        <div>
          <div class="offline"></div><div>离线</div>
          <div class="offline"></div>
          <div>离线</div>
        </div>
        <div>
          <div class="outline"></div><div>违规</div>
          <div class="outline"></div>
          <div>违规</div>
        </div>
        <div>
          <div class="normal"></div><div>正常</div>
          <div class="normal"></div>
          <div>正常</div>
        </div>
      </div>
      <div class="item">
        <div>
          <div class="fenji"></div><div>风机</div>
          <div class="fenji"></div>
          <div>风机</div>
        </div>
        <div>
          <div class="shengyazhan"></div><div>升压站</div>
          <div class="shengyazhan"></div>
          <div>升压站</div>
        </div>
        <div>
          <div class="chuanbo"></div><div>船舶</div>
          <div class="chuanbo"></div>
          <div>船舶</div>
        </div>
      </div>
      <div class="item">
        <div>
          <div class="zyqy"></div><div>作业区域</div>
          <div class="zyqy"></div>
          <div>作业区域</div>
        </div>
        <div>
          <div class="dzwl"></div><div>电子围栏</div>
          <div class="dzwl"></div>
          <div>电子围栏</div>
        </div>
      </div>
    </div>
    <t-modal :visibled.sync="trackModal" :footer-visibled="false" :mask-closable="false" :width="1200" title="历史轨迹">
    <t-modal
      :visibled.sync="trackModal"
      :footer-visibled="false"
      :mask-closable="false"
      :width="1200"
      title="历史轨迹"
    >
      <div class="track-modal-container">
        <div class="track-modal-left">
          <t-input v-model="trackSearch" icon="search-outline" icon-placement="right" placeholder="请输入姓名或终端编号" style="width: 200px"></t-input>
          <t-input
            v-model="trackSearch"
            icon="search-outline"
            icon-placement="right"
            placeholder="请输入姓名或终端编号"
            style="width: 200px"
          ></t-input>
          <div>
            <div>张三</div>
            <div>张三</div>
@@ -62,12 +101,27 @@
          </div>
        </div>
        <div class="track-modal-right">
          <div style="display:flex">
          <div style="display: flex">
            <t-button-group>
              <t-button v-for="(item,index) in trackTimeList" :class="index==trackQueryCondition.currentIndex?'active':''" :key="index" @click="changeTrackTime(index)">{{ item }}</t-button>
              <t-button
                v-for="(item, index) in trackTimeList"
                :class="
                  index == trackQueryCondition.currentIndex ? 'active' : ''
                "
                :key="index"
                @click="changeTrackTime(index)"
                >{{ item }}</t-button
              >
            </t-button-group>
            <t-date-picker v-show="trackQueryCondition.currentIndex===3" v-model="rangeDate" style="width:250px" type="dateRange" placeholder="请选择时间" @date-change="onChangeDate"></t-date-picker>
            <div style="display:flex">
            <t-date-picker
              v-show="trackQueryCondition.currentIndex === 3"
              v-model="rangeDate"
              style="width: 250px"
              type="dateRange"
              placeholder="请选择时间"
              @date-change="onChangeDate"
            ></t-date-picker>
            <div style="display: flex">
              <div>速度</div>
              <t-select>
                <t-option>1x</t-option>
@@ -75,15 +129,22 @@
              </t-select>
            </div>
            <t-button color="success" icon="video-outline">回放</t-button>
            <t-button color="secondary" icon="upload-outline" @click="toExport">导出至Excel</t-button>
          </div>
          <div id="track-map" style="height:94%">
            <t-button color="secondary" icon="upload-outline" @click="toExport"
              >导出至Excel</t-button
            >
          </div>
          <div id="track-map" style="height: 94%"></div>
        </div>
      </div>
    </t-modal>
    <t-modal :visibled.sync="rescueModal" title="指派救援人员" >
      <t-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" label-position="left">
    <t-modal :visibled.sync="rescueModal" title="指派救援人员">
      <t-form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="80"
        label-position="left"
      >
        <t-form-item label="救援人员" prop="rescue">
          <t-select v-model="formValidate.rescue" placeholder="请选择">
            <t-option>张三</t-option>
@@ -100,355 +161,393 @@
</template>
<script>
import './orientation.scss'
import { forEach, filter, find} from 'lodash'
import "./orientation.scss";
import { forEach, filter, find } from "lodash";
import services from "../../conf/services";
export default {
  filters: {
    dateFormat(value) {
      var year = value.getFullYear()
      var month = value.getMonth() >= 10 ? value.getMonth() : '0' + value.getMonth()
      var day = value.getDate() >= 10 ? value.getDate() : '0' + value.getDate()
      var hours = value.getHours() >= 10 ? value.getHours() : '0' + value.getHours()
      var minutes = value.getMinutes() >= 10 ? value.getMinutes() : '0' + value.getMinutes()
      var seconds = value.getSeconds() >= 10 ? value.getSeconds() : '0' + value.getSeconds()
      return year + '.' + month + '.' + day + ' ' + hours + ':' + minutes + ':' + seconds
    }
      var year = value.getFullYear();
      var month =
        value.getMonth() >= 10 ? value.getMonth() : "0" + value.getMonth();
      var day = value.getDate() >= 10 ? value.getDate() : "0" + value.getDate();
      var hours =
        value.getHours() >= 10 ? value.getHours() : "0" + value.getHours();
      var minutes =
        value.getMinutes() >= 10
          ? value.getMinutes()
          : "0" + value.getMinutes();
      var seconds =
        value.getSeconds() >= 10
          ? value.getSeconds()
          : "0" + value.getSeconds();
      return (
        year +
        "." +
        month +
        "." +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
  },
  data() {
    return {
      map: null,
      pointsarr: null,
      polylinearr: '122.0352 32.4444,122.0372 32.4444,122.0400 32.4366,122.2922 32.4233',
      polygonarr: '122.2302 32.5444,122.2302 32.3444, 122.4302 32.3444,122.4302 32.6044,122.2302 32.5444',
      polylinearr:
        "122.0352 32.4444,122.0372 32.4444,122.0400 32.4366,122.2922 32.4233",
      polygonarr:
        "122.2302 32.5444,122.2302 32.3444, 122.4302 32.3444,122.4302 32.6044,122.2302 32.5444",
      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: "王小明",
          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: "王小明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: "王小明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: "王小明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分钟'
        }
          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,
      trackModal: false,
      trackSearch: '',
      trackTimeList: [
        '-10min',
        '-1h',
        '本日',
        '自定义'
      ],
      trackSearch: "",
      trackTimeList: ["-10min", "-1h", "本日", "自定义"],
      trackQueryCondition: {
        currentIndex: 0
        currentIndex: 0,
      },
      trackMap: null,
      rangeDate: '',
      rangeDate: "",
      rescueModal: false,
      formValidate: {
        rescue: ''
        rescue: "",
      },
      ruleValidate: {
        rescue: [{
          required: true,
          message: '救援人员不能为空',
          trigger: 'blur'
        }]
      }
    }
        rescue: [
          {
            required: true,
            message: "救援人员不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    normalData: function () {
      return filter(this.dataList, function (o) {
        return o.type == '正常'
      })
        return o.type == "正常";
      });
    },
    alertData: function () {
      return filter(this.dataList, function (o) {
        return o.type == '落水告警'
      })
        return o.type == "落水告警";
      });
    },
    offlineData: function () {
      return filter(this.dataList, function (o) {
        return o.type == '离线'
      })
    }
        return o.type == "离线";
      });
    },
  },
  mounted() {
    this.initMap('')
    this.initTrackMap('')
    this.pointsSet()
    this.polyline()
    this.polygon()
    this.map.setZoom(9)
    this.initMap();
    setInterval(() => {
      this.nowDate = new Date()
    }, 1000)
    this.loadFenji()
    this.loadchuanbo()
    this.loadshengyazhan()
      this.nowDate = new Date();
    }, 1000);
  },
  methods: {
    initMap(value) {
      if (this.map != null && this.map != '') {
        this.map.remove()
    initMap() {
      if (this.map != null && this.map != "") {
        this.map.remove();
      }
      this.map = new Ai.Map('div1', {
        ak: 'MTYwMzIMTAwMU1UWXdNekkwTmpBME1EUTFOeU14TnpRdw__',
        center: [39.915599, 122.406568]
      this.map = new Ai.Map("div1", {
        ak: this.$store.getters.getGisToken,
        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 }
      );
      this.map.addLayer(maplayer);
      this.map.addLayer(la);
      })
      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})
      this.map.addLayer(maplayer)
      this.map.addLayer(la)
      Ai.Scale({position: 'bottomright'}).addTo(this.map)
      Ai.Zoom({type: 'small'}).addTo(this.map)
    },
    initTrackMap(value) {
      if (this.trackMap != null && this.trackMap != '') {
        this.trackMap.remove()
      }
      this.trackMap = new Ai.Map('track-map', {
        ak: 'MTYwMzIMTAwMU1UWXdNekkwTmpBME1EUTFOeU14TnpRdw__',
        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})
      this.trackMap.addLayer(maplayer)
      this.trackMap.addLayer(la)
      Ai.Scale({position: 'bottomright'}).addTo(this.trackMap)
      Ai.Zoom({type: 'small'}).addTo(this.trackMap)
      Ai.Scale({ position: "bottomright" }).addTo(this.map);
      Ai.Zoom({ type: "small" }).addTo(this.map);
      this.pointsSet();
      this.polyline();
      this.polygon();
      this.map.setZoom(9);
      this.loadFenji();
      this.loadchuanbo();
      this.loadshengyazhan();
    },
    pointsSet() {
      window.Vue = this
      var arr = []
      this.pointsLayer = new Ai.FeatureGroup()
      var icon = (icon = Ai.IconPulse({ iconSize: [13, 13] }))
      window.Vue = this;
      var arr = [];
      this.pointsLayer = new Ai.FeatureGroup();
      var icon = (icon = Ai.IconPulse({ iconSize: [13, 13] }));
      forEach(this.dataList, (value) => {
        var point1
        if (value.type == '落水告警') {
          point1 = Ai.Point([value.Longitude, value.latitude], {icon: Ai.Icon({
            // 设置图标URL路径
            iconUrl: '/static/images/worker(1).png',
            // 设置图标大小
            iconSize: [20, 20],
            // 设置点对象和图标的相对偏移量
            iconAnchor: [0, 0]
          })})
        var point1;
        if (value.type == "落水告警") {
          point1 = Ai.Point([value.Longitude, value.latitude], {
            icon: Ai.Icon({
              // 设置图标URL路径
              iconUrl: "/static/images/worker(1).png",
              // 设置图标大小
              iconSize: [20, 20],
              // 设置点对象和图标的相对偏移量
              iconAnchor: [0, 0],
            }),
          });
        } else {
          point1 = Ai.Point([value.Longitude, value.latitude], {icon: Ai.Icon({
            // 设置图标URL路径
            iconUrl: '/static/images/worker.png',
            // 设置图标大小
            iconSize: [20, 20],
            // 设置点对象和图标的相对偏移量
            iconAnchor: [0, 0]
          })})
          point1 = Ai.Point([value.Longitude, value.latitude], {
            icon: Ai.Icon({
              // 设置图标URL路径
              iconUrl: "/static/images/worker.png",
              // 设置图标大小
              iconSize: [20, 20],
              // 设置点对象和图标的相对偏移量
              iconAnchor: [0, 0],
            }),
          });
        }
        point1.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>' +
         '<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></div></div>'
          var popup = Ai.Popup({minWidth: 300, offset: [0, -10], autoClose: true})
          // 设置弹出框弹出位置
        point1.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>" +
            '<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></div></div>";
          var popup = Ai.Popup({
            minWidth: 300,
            offset: [0, -10],
            autoClose: true,
          })
            // 设置弹出框弹出位置
            .setLatLng([value.Longitude, value.latitude])
          // 设置弹出框弹出内容
            // 设置弹出框弹出内容
            .setContent(content)
            .openOn(this.map)
        })
        this.pointsLayer.addLayer(point1)
        arr.push(point1)
            .openOn(this.map);
        });
        this.pointsLayer.addLayer(point1);
        arr.push(point1);
        // this.pointsarr.push(point1);
      })
      this.map.addLayer(this.pointsLayer)
      this.map.fitBoundsForLayers(arr)
      });
      this.map.addLayer(this.pointsLayer);
      this.map.fitBoundsForLayers(arr);
    },
    polyline() {
      var polylineLayer = new Ai.FeatureGroup()
      var polylineLayer = new Ai.FeatureGroup();
      // 线绘制
      var lineWktStr =
        'LINESTRING ( ' + this.polylinearr + ')'
      var lineWktStr = "LINESTRING ( " + this.polylinearr + ")";
      var polyline = new Ai.Polyline(lineWktStr, {
        color: 'green',
        opacity: 1.0
      })
        color: "green",
        opacity: 1.0,
      });
      // this.polylinearr.arr(polyline);
      polylineLayer.addLayer(polyline)
      this.map.addLayer(polylineLayer)
      polylineLayer.addLayer(polyline);
      this.map.addLayer(polylineLayer);
    },
    polygon() {
      var polygonLayer = new Ai.FeatureGroup()
      var params = new FormData()
      // params.append('data', JSON.stringify({
      //   pageNum: pageNum,
      //   pageSize: pageSize,
      //   mapTagName: MAP_TAG_NAME
      // }))
      this.$test.post(services.mapTag.GET_ALL_MAP_TAG, params
      ).then(res => {
        // 请求成功处理...
        res.data.dataList.forEach(e => {
          if(e.MAP_TAG_TYPE === 1){
            console.log(e.MAP_TAG_SHAPE)
          }
        })
      }).catch(res => {
        // 请求失败处理...
      })
      var polygonLayer = new Ai.FeatureGroup();
      // 面绘制
      var coverWktStr =
        'POLYGON ((' + this.polygonarr + '))'
      var polygon = Ai.Polygon(coverWktStr, { color: 'red', opacity: 1.0, weight: 0 })
      var coverWktStr = "POLYGON ((" + this.polygonarr + "))";
      var polygon = Ai.Polygon(coverWktStr, {
        color: "red",
        opacity: 1.0,
        weight: 0,
      });
      // this.polygonarr.arr(polygon);
      polygonLayer.addLayer(polygon)
      this.map.addLayer(polygonLayer)
      polygonLayer.addLayer(polygon);
      this.map.addLayer(polygonLayer);
    },
    showSlip() {
      this.visible = true
      this.visible = true;
    },
    showPopup(number) {
      if (this.popup != null && this.popup != '') {
        this.popup.closePopup()
        this.popup.remove()
      if (this.popup != null && this.popup != "") {
        this.popup.closePopup();
        this.popup.remove();
      }
      var data = find(this.dataList, (o) => {
        return o.number == number
      })
      if (data != null && data != '') {
        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;">' +
        return o.number == number;
      });
      if (data != null && data != "") {
        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>'
        this.popup = Ai.Popup({minWidth: 300, offset: [0, -10], autoClose: false})
        // 设置弹出框弹出位置
          .setLatLng({lat: data.Longitude, lng: data.latitude})
        // 设置弹出框弹出内容
          "</div></div></div>";
        this.popup = Ai.Popup({
          minWidth: 300,
          offset: [0, -10],
          autoClose: false,
        })
          // 设置弹出框弹出位置
          .setLatLng({ lat: data.Longitude, lng: data.latitude })
          // 设置弹出框弹出内容
          .setContent(content)
          .openOn(this.map)
          .openOn(this.map);
      }
    },
    loadFenji() {
      var point = Ai.Point([29.86089241772908, 122.09930419921876], {icon: Ai.Icon({
        // 设置图标URL路径
        iconUrl: '/static/images/风机.png',
        // 设置图标大小
        iconSize: [20, 20],
        // 设置点对象和图标的相对偏移量
        iconAnchor: [0, 0]
      })})
      this.pointsLayer.addLayer(point)
      this.map.addLayer(this.pointsLayer)
      var point = Ai.Point([29.86089241772908, 122.09930419921876], {
        icon: Ai.Icon({
          // 设置图标URL路径
          iconUrl: "/static/images/风机.png",
          // 设置图标大小
          iconSize: [20, 20],
          // 设置点对象和图标的相对偏移量
          iconAnchor: [0, 0],
        }),
      });
      this.pointsLayer.addLayer(point);
      this.map.addLayer(this.pointsLayer);
    },
    loadchuanbo() {
      var point = Ai.Point([29.960892, 122.09930419921876], {icon: Ai.Icon({
        // 设置图标URL路径
        iconUrl: '/static/images/船舶.png',
        // 设置图标大小
        iconSize: [20, 20],
        // 设置点对象和图标的相对偏移量
        iconAnchor: [0, 0]
      })})
      this.pointsLayer.addLayer(point)
      this.map.addLayer(this.pointsLayer)
      var point = Ai.Point([29.960892, 122.09930419921876], {
        icon: Ai.Icon({
          // 设置图标URL路径
          iconUrl: "/static/images/船舶.png",
          // 设置图标大小
          iconSize: [20, 20],
          // 设置点对象和图标的相对偏移量
          iconAnchor: [0, 0],
        }),
      });
      this.pointsLayer.addLayer(point);
      this.map.addLayer(this.pointsLayer);
    },
    loadshengyazhan() {
      var point = Ai.Point([29.86089241772908, 122.1993], {icon: Ai.Icon({
        // 设置图标URL路径
        iconUrl: '/static/images/升压站画面.png',
        // 设置图标大小
        iconSize: [20, 20],
        // 设置点对象和图标的相对偏移量
        iconAnchor: [0, 0]
      })})
      this.pointsLayer.addLayer(point)
      this.map.addLayer(this.pointsLayer)
      var point = Ai.Point([29.86089241772908, 122.1993], {
        icon: Ai.Icon({
          // 设置图标URL路径
          iconUrl: "/static/images/升压站画面.png",
          // 设置图标大小
          iconSize: [20, 20],
          // 设置点对象和图标的相对偏移量
          iconAnchor: [0, 0],
        }),
      });
      this.pointsLayer.addLayer(point);
      this.map.addLayer(this.pointsLayer);
    },
    changeTrackTime(index) {
      this.trackQueryCondition.currentIndex = index
    },
    onChangeDate() {
    },
    toExport() {
      this.trackQueryCondition.currentIndex = index;
    },
    onChangeDate() {},
    toExport() {},
    close(item) {
      this.$Confirm.confirm({
        title: '确认要关闭张三落水报警吗？',
        content: '关闭后将不再进行报警显示',
        title: "确认要关闭张三落水报警吗？",
        content: "关闭后将不再进行报警显示",
        ok: () => {
          console.log('点击了确定')
          console.log("点击了确定");
        },
        cancel: () => {
          console.log('点击了取消')
        }
      })
          console.log("点击了取消");
        },
      });
    },
    cancel() {
      this.rescueModal = false
    }
  }
}
      this.rescueModal = false;
    },
  },
};
</script>

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

@@ -28,17 +28,17 @@
        <t-table-column prop="MAP_TAG_NAME" label="标记名称"></t-table-column>
        <t-table-column label="类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.MAP_TAG_TYPE==1">考勤区域</el-tag>
            <el-tag v-if="scope.row.MAP_TAG_TYPE==2">作业区域</el-tag>
            <el-tag v-if="scope.row.MAP_TAG_TYPE==3">电子围栏</el-tag>
            <el-tag v-if="scope.row.MAP_TAG_TYPE==4">定点</el-tag>
            <div v-if="scope.row.MAP_TAG_TYPE==1">考勤区域</div>
            <div v-if="scope.row.MAP_TAG_TYPE==2">作业区域</div>
            <div v-if="scope.row.MAP_TAG_TYPE==3">电子围栏</div>
            <div v-if="scope.row.MAP_TAG_TYPE==4">定点</div>
          </template>
        </t-table-column>
        <t-table-column prop="CREATE_DATE":formatter="timestampToTime" label="创建时间"></t-table-column>
        <t-table-column :formatter="timestampToTime" prop="CREATE_DATE" label="创建时间"></t-table-column>
        <t-table-column
            fixed="right"
            label="操作"
            width="120"
          fixed="right"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <a href="javascript:void(0)" size="sm" @click="handleClick(scope.row)">编辑</a>
@@ -79,9 +79,9 @@
            <div>坐标列表</div>
            <div class="import-down">
              <a href="javascript:void(0)" size="sm" @click="handleFile1()">导入</a>
              <input type="file" @change="handleFile($event)"
              <input id="file" type="file"
                     accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                     style="display:none" id="file" >
                     style="display:none" @change="handleFile($event)" >
              <span class="mod-line">|</span>
              <a href="javascript:void(0)" size="sm" @click="downloadTemplate()">下载模板</a>
            </div>
@@ -163,57 +163,48 @@ export default {
    this.getList(1, 20, '')
  },
  mounted() {
    this.$test.post(services.mapTag.GET_TOKEN, ''
    ).then(res => {
      // 请求成功处理...
      let ak = res.data.result.ak
      this.map = new Ai.Map('modalMap', {
        ak: ak,
        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)
      })
    }).catch(res => {
      // 请求失败处理...
    // 请求成功处理...
    let ak = this.$store.getters.getGisToken
    this.map = new Ai.Map('modalMap', {
      ak: ak,
      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)
    })
  },
  // watch: {
  // },
  methods: {
    getList(pageNum, pageSize, MAP_TAG_NAME) {
      var params = new FormData()
      params.append('data', JSON.stringify({
        params: {
          pageNum: pageNum,
          pageSize: pageSize,
          MAP_TAG_NAME: MAP_TAG_NAME
        }
        pageNum: pageNum,
        pageSize: pageSize,
        mapTagName: MAP_TAG_NAME
      }))
      this.$test.post(services.mapTag.GET_MAP_TAG, params
      ).then(res => {
        // 请求成功处理...
        this.table.data = res.data.result.list
        this.table.pager.total = res.data.result.total
        this.table.pager.currentPage = res.data.result.pageNum
        this.table.data = res.data.dataList
        this.table.pager.total = res.data.dataNum
        this.table.pager.currentPage = pageNum
      }).catch(res => {
        // 请求失败处理...
      })
@@ -241,7 +232,7 @@ export default {
      this.$test.post(services.excel.EXPROT_MAP_TAG, params
      ).then(res => {
        // 请求成功处理...
        debugger
        // debugger
        console.log(res)
        this.downloadDoc(res.data)
      }).catch(res => {
@@ -249,16 +240,16 @@ export default {
      })
    },
    downloadDoc(response) {
      debugger
      var blob = new Blob([response], {type: 'application/vnd.ms-excel;charset=utf-8'});
      var downloadElement = document.createElement('a');
      var href = window.URL.createObjectURL(blob); // 创建下载的链接
      downloadElement.href = href;
      downloadElement.download = '表格'+'.xls'; // 下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); // 点击下载
      document.body.removeChild(downloadElement); // 下载完成移除元素
      window.URL.revokeObjectURL(href); // 释放掉blob对象
      // debugger
      var blob = new Blob([response], {type: 'application/vnd.ms-excel;charset=utf-8'})
      var downloadElement = document.createElement('a')
      var href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.download = '表格' + '.xls' // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
      window.URL.revokeObjectURL(href) // 释放掉blob对象
    },
    markModal(typeId) {
      this.markType = typeId
@@ -269,14 +260,14 @@ export default {
      this.polygonDrawer.enable()
    },
    timestampToTime (cjsj) {
      var date = new Date(cjsj.CREATE_DATE) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var date = new Date(cjsj.CREATE_DATE) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = date.getDate() + ' '
      var h = date.getHours() + ':'
      var m = date.getMinutes() + ':'
      var s = date.getSeconds()
      return Y+M+D+h+m+s
      return Y + M + D + h + m + s
    },
    submitMark() {
      if (this.modalData.length == 0) {
@@ -286,7 +277,7 @@ export default {
        })
        return false
      }
      debugger
      // debugger
      if (this.markName === '') {
        this.$Confirm.warning({
          title: '提示',
@@ -295,44 +286,39 @@ export default {
        return false
      }
      let arr = []
      let arr = ''
      for (let i = 0; i < this.modalData.length; i++) {
        let g = {
          XY_NAME: i + 1,
          LONGITUDE: this.modalData[i].lng,
          LATITUDE: this.modalData[i].lat
        }
        arr.push(g)
        arr = arr + (this.modalData[i].lng + ' ' + this.modalData[i].lat + ',')
      }
      arr = arr + (this.modalData[0].lng + ' ' + this.modalData[0].lat)
      var params = new FormData()
      if (this.update) {
        params.append('data', JSON.stringify({
          params: {
            MAP_TAG_NAME: this.markName,
            MAP_TAG_TYPE: this.markType,
            CREATE_DATE: this.getTime(),
            MAP_TAG_ID: this.updateId,
            MAP_TAG_CONTENT: {
              xingzhuang: 'yuanxing',
              yuanxin: 'yuanxin'
            },
            EBC_MAP_TAG_XY: arr
          }
            mapTagName: this.markName,
            mapTagType: this.markType,
            mapTagShape: arr,
            mapTagId: this.updateId
        }))
        this.$test.post(services.mapTag.UPD_MAP_TAG, params
      ).then(res => {
        // 请求成功处理...
        this.getList(this.table.pager.currentPage, this.table.pager.size, this.queryCondition.userName)
        this.polygonDrawer.disable()
        this.modalData = []
        this.markName = ''
        this.$Message.success('操作成功')
        this.map.removeLayer(this.layer)
        this.update = false
      }).catch(res => {
        // 请求失败处理...
      })
      } else {
        params.append('data', JSON.stringify({
          params: {
            MAP_TAG_NAME: this.markName,
            MAP_TAG_TYPE: this.markType,
            CREATE_DATE: this.getTime(),
            MAP_TAG_CONTENT: {
              xingzhuang: 'yuanxing',
              yuanxin: 'yuanxin'
            },
            EBC_MAP_TAG_XY: arr
          }
          mapTagName: this.markName,
          mapTagType: this.markType,
          mapTagShape: arr
        }))
      }
      
      this.update = false
      this.$test.post(services.mapTag.ADD_MAP_TAG, params
      ).then(res => {
@@ -346,6 +332,7 @@ export default {
      }).catch(res => {
        // 请求失败处理...
      })
      }
    },
    getTime() {
      var date = new Date()
@@ -374,38 +361,24 @@ export default {
    handleClick(row) {
      var params = new FormData()
      params.append('data', JSON.stringify({
        params: {
          MAP_TAG_ID: row.MAP_TAG_ID
        }
        mapTagId: row.MAP_TAG_ID
      }))
      this.$test.post(services.mapTag.UPD_MAP_TAG, params
      this.$test.post(services.mapTag.GET_ONE_MAP_TAG, params
      ).then(res => {
        // 请求成功处理...
        let arr = res.data.result.mapTagXyList
        this.modalData = []
        var coverWktStr_blue = 'POLYGON (( '
        for (let i = 0; i < arr.length; i++) {
          // this.modalData.push({
          //   lng: parseFloat(arr[i]['LONGITUDE']),
          //   lat: parseFloat(arr[i]['LATITUDE'])
          // })
          coverWktStr_blue += arr[i]['LONGITUDE'] + ' ' + arr[i]['LATITUDE'] + ','
        }
        this.map.setView([parseFloat(arr[0]['LATITUDE']),  parseFloat(arr[0]['LONGITUDE'])], 5);//地图定位
        // that.map.center =  []
        debugger;
        coverWktStr_blue = coverWktStr_blue.substring(0,coverWktStr_blue.length-1)
        coverWktStr_blue += '))'
        var coverWktStr_blue = res.data.resultData.MAP_TAG_SHAPE
        console.log(res.data.resultData.MAP_TAG_SHAPE)
        var coverLayer_blue = new Ai.Polygon(coverWktStr_blue)
        this.map.addLayer(coverLayer_blue)
        //面设为编辑状态
        // this.map.addLayer(coverLayer_blue)
        // 面设为编辑状态
        coverLayer_blue.snapediting = new Ai.PolylineSnap(this.map, coverLayer_blue)
        coverLayer_blue.snapediting.enable()
        this.layer = coverLayer_blue
        this.map.addLayer(coverLayer_blue)
        this.polygonDrawer.editing(this.layer)
        this.modalData = coverLayer_blue._latlngs[0]
        this.polygonDrawer.disable()
      }).catch(res => {
        // 请求失败处理...
      })
@@ -450,9 +423,9 @@ export default {
      var files = e.target.files
      var f = files[0]
      var reader = new FileReader()
      debugger
      // debugger
      reader.onload = function(e) {
        debugger
        // debugger
        var data = new Uint8Array(e.target.result)
        var workbook = XLSX.read(data, {type: 'array'})
        /* DO SOMETHING WITH workbook HERE */
@@ -468,14 +441,14 @@ export default {
          })
          coverWktStr_blue += arr[i]['经度'] + ' ' + arr[i]['纬度'] + ','
        }
        that.map.setView([parseFloat(arr[0]['纬度']),  parseFloat(arr[0]['经度'])], 5);//地图定位
        that.map.setView([parseFloat(arr[0]['纬度']), parseFloat(arr[0]['经度'])], 5)// 地图定位
        // that.map.center =  []
        debugger;
        coverWktStr_blue = coverWktStr_blue.substring(0,coverWktStr_blue.length-1)
        // debugger
        coverWktStr_blue = coverWktStr_blue.substring(0, coverWktStr_blue.length - 1)
        coverWktStr_blue += '))'
        var coverLayer_blue = new Ai.Polygon(coverWktStr_blue, {color: 'red'})
        that.map.addLayer(coverLayer_blue)
        //面设为编辑状态
        // 面设为编辑状态
        coverLayer_blue.snapediting = new Ai.PolylineSnap(that.map, coverLayer_blue)
        coverLayer_blue.snapediting.enable()
        that.layer = coverLayer_blue
@@ -483,7 +456,7 @@ export default {
        that.modalData = coverLayer_blue._latlngs[0]
        that.polygonDrawer.disable()
      }
      debugger
      // debugger
      reader.readAsArrayBuffer(f)
    },
    remove(row) {
@@ -494,13 +467,13 @@ export default {
        ok: function () {
          var params = new FormData()
          params.append('data', JSON.stringify({
            MAP_TAG_ID: row.MAP_TAG_ID
            mapTagId: row.MAP_TAG_ID
          }))
          debugger
          // debugger
          this.$test.post(services.mapTag.DEL_MAP_TAG, params
          ).then(res => {
            // 请求成功处理...
            debugger
            // debugger
            this.$Message.success('操作成功')
            that.getList(that.table.pager.currentPage, that.table.pager.size, that.queryCondition.userName)
          }).catch(res => {

ebc-middle-platform/src/store.js

@@ -57,7 +57,8 @@ const store = new Vuex.Store({
  state: {
    currentTitle: '',
    screenIsLocked: false,
    lang: 'zh-CN'
    lang: 'zh-CN',
    gistoken: ''
  },
  mutations: {
    // 改变语言
@@ -76,6 +77,9 @@ const store = new Vuex.Store({
    },
    setTitle(state, newTitle) {
      state.currentTitle = newTitle || ''
    },
    setGisToken(state, token){
      state.gistoken = token
    }
  },
  getters: {
@@ -101,6 +105,9 @@ const store = new Vuex.Store({
      } else {
        return 'EN'
      }
    },
    getGisToken(state){
      return state.gistoken
    }
  },
  modules: {