代码提交

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

@@ -61,6 +61,7 @@ export default {
    QUERYMENUBYMENUNAME: '/menu/menuName/:menuName'
  },
  organization: {
    PERSON_LOCATION: '/device/queryCurrentDeviceLocationInfo',
    GETTREEALLDATA: '/org/queryOrg', // 获取所有组织数据
    ORG: '/org', // 新增post，修改put，删除delete子组织
    GETBYIDSEARCHORG: '/org/orgId/', // 根据ID查组织
@@ -149,6 +150,7 @@ export default {
    UPD_MAP_TAG: '/mapTag/modifyMapTagInfo' // 查询地图标记信息用作修改
  },
  equipment: {
    GET_ALL_EQUIPMENT: '/equipment/queryAllEquipmentInfo', // 查询所有设备信息
    GET_EQUIPMENT: '/equipment/queryEquipmentInfo', // 查询设备管理信息
    ADD_EQUIPMENT: '/equipment/modifyEquipmentInfo', // 新增/修改设备管理信息
    DEL_EQUIPMENT: '/equipment/deleteEquipmentInfo', // 删除设备管理信息

ebc-middle-platform/src/constants.js

@@ -12,3 +12,4 @@ export const RESPONSE_BOUNDARY_PAD = 992 // 响应式布局平板宽度边界值
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' // 海图地址

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

@@ -44,7 +44,8 @@
<script>
import GlobalLayout from '../page/GlobalLayout.vue'
import IpuStomp from '../../ipu-stomp'
import services from "../../conf/services";
import services from '../../conf/services'
import EventBus from '../../bus'
export default {
  name: 'BasicLayout',
  components: {
@@ -52,7 +53,7 @@ export default {
  },
  data () {
    return {
      modal: true
      modal: false
    }
  },
  computed: {
@@ -62,20 +63,20 @@ export default {
  },
  mounted() {
    this.$test
        .post(services.mapTag.GET_TOKEN, '')
        .then((res) => {
          this.$store.commit('setGisToken',res.data.result.ak)
        })
        .catch((res) => {
          // 请求失败处理...
        });
      .post(services.mapTag.GET_TOKEN, '')
      .then((res) => {
        this.$store.commit('setGisToken', res.data.result.ak)
      })
      .catch((res) => {
        // 请求失败处理...
      })
    // 镜屏调用
    var client
    var callbacks = {}
    callbacks.onConnected = msg => {
      console.log('连接成功：' + msg)
      client.subscribe('zhangsan', msg => {
        console.log(msg)
        EventBus.$emit('person', msg)
      })
    }
    callbacks.onFailure = msg => {
@@ -83,7 +84,7 @@ export default {
    }
    client = IpuStomp(
      {
        url: 'ws://192.168.3.200:7100/stomp',
        url: 'ws://192.168.137.178:7100/stomp',
        name: 'zhangsan',
        passcode: '123456',
        UUID: 'zhangsan'

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

@@ -82,6 +82,7 @@
        margin-right: 30px;
        >div{
          display: flex;
          cursor:pointer;
          .sos{
            width: 10px;
            height: 10px;
@@ -149,6 +150,12 @@
            margin-right: 5px;
          }
        }
        .cancel{
          color: #8A959E;
          .sos,.offline,.outline,.normal,.zyqy,.dzwl{
            background-color: #8A959E;
          }
        }
      }
    }
}
@@ -293,6 +300,42 @@ background: #344979!important;
      height: 25px;
      line-height: 25px;
    }
    .normal{
      color: #19BB20;
      background-color:#1E5962;
      margin: 7.5px 0 0 5px;
      padding: 0 5px;
      font-size: 8px;
      height: 25px;
      line-height: 25px;
    }
    .sos{
      color:#F5222D;
      background-color:#383F72;
      margin: 7.5px 0 0 5px;
      padding: 0 5px;
      font-size: 8px;
      height: 25px;
      line-height: 25px;
    }
    .offline{
      color: #000000;
      background-color:#486083;
      margin: 7.5px 0 0 5px;
      padding: 0 5px;
      font-size: 8px;
      height: 25px;
      line-height: 25px;
    }
    .outline{
      color: #DA9D23;
      background-color:#1E5962;
      margin: 7.5px 0 0 5px;
      padding: 0 5px;
      font-size: 8px;
      height: 25px;
      line-height: 25px;
    }
  }
  .middle{
    padding-left: 20px;

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

@@ -26,7 +26,7 @@
              trackModal = true;
            }
          "
          >轨迹</t-button
        >轨迹</t-button
        >
        <div>悬浮窗<t-switch rounded></t-switch></div>
      </div>
@@ -34,43 +34,43 @@
    <div id="div1" style="height: 100%"></div>
    <div class="label">
      <div class="item">
        <div>
        <div :class="mapShow.sos?'':'cancel'" @click="showOrHide(layer.sosLayer,'sos')">
          <div class="sos"></div>
          <div>SOS</div>
        </div>
        <div>
        <div :class="mapShow.offLine?'':'cancel'" @click="showOrHide(layer.offLineLayer,'offLine')">
          <div class="offline"></div>
          <div>离线</div>
        </div>
        <div>
        <div :class="mapShow.outLine?'':'cancel'" @click="showOrHide(layer.outLineLayer,'outLine')">
          <div class="outline"></div>
          <div>违规</div>
        </div>
        <div>
        <div :class="mapShow.normal?'':'cancel'" @click="showOrHide(layer.normalLayer,'normal')">
          <div class="normal"></div>
          <div>正常</div>
        </div>
      </div>
      <div class="item">
        <div>
        <div :class="mapShow.fenji?'':'cancel'" @click="showOrHide(layer.fenjiLayer,'fenji')">
          <div class="fenji"></div>
          <div>风机</div>
        </div>
        <div>
        <div :class="mapShow.shengyazhan?'':'cancel'" @click="showOrHide(layer.shengyazhanLayer,'shengyazhan')">
          <div class="shengyazhan"></div>
          <div>升压站</div>
        </div>
        <div>
        <div :class="mapShow.chuanbo?'':'cancel'" @click="showOrHide(layer.chuanboLayer,'chuanbo')">
          <div class="chuanbo"></div>
          <div>船舶</div>
        </div>
      </div>
      <div class="item">
        <div>
        <div :class="mapShow.zyqy?'':'cancel'" @click="showOrHide(layer.zyqyLayer,'zyqy')">
          <div class="zyqy"></div>
          <div>作业区域</div>
        </div>
        <div>
        <div :class="mapShow.dzwl?'':'cancel'" @click="showOrHide(layer.dzwlLayer,'dzwl')">
          <div class="dzwl"></div>
          <div>电子围栏</div>
        </div>
@@ -110,7 +110,7 @@
                "
                :key="index"
                @click="changeTrackTime(index)"
                >{{ item }}</t-button
              >{{ item }}</t-button
              >
            </t-button-group>
            <t-date-picker
@@ -130,7 +130,7 @@
            </div>
            <t-button color="success" icon="video-outline">回放</t-button>
            <t-button color="secondary" icon="upload-outline" @click="toExport"
              >导出至Excel</t-button
            >导出至Excel</t-button
            >
          </div>
          <div id="track-map" style="height: 94%"></div>
@@ -161,393 +161,455 @@
</template>
<script>
import "./orientation.scss";
import { forEach, filter, find } from "lodash";
import services from "../../conf/services";
import './orientation.scss'
import { forEach, filter, find } from 'lodash'
import services from '../../conf/services'
import IpuStomp from '../../ipu-stomp'
import EventBus from '../../bus'
export default {
  filters: {
    dateFormat(value) {
      var year = value.getFullYear();
      var year = value.getFullYear()
      var month =
        value.getMonth() >= 10 ? value.getMonth() : "0" + value.getMonth();
      var day = value.getDate() >= 10 ? value.getDate() : "0" + value.getDate();
        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();
        value.getHours() >= 10 ? value.getHours() : '0' + value.getHours()
      var minutes =
        value.getMinutes() >= 10
          ? value.getMinutes()
          : "0" + value.getMinutes();
          : '0' + value.getMinutes()
      var seconds =
        value.getSeconds() >= 10
          ? value.getSeconds()
          : "0" + 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",
        '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",
        '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",
          },
        ],
            message: '救援人员不能为空',
            trigger: 'blur'
          }
        ]
      },
      layer: {
        dzwlLayer: new Ai.FeatureGroup(),
        zyqyLayer: new Ai.FeatureGroup(),
        fenjiLayer: new Ai.FeatureGroup(),
        chuanboLayer: new Ai.FeatureGroup(),
        shengyazhanLayer: new Ai.FeatureGroup(),
        sosLayer: new Ai.FeatureGroup(),
        offLineLayer: new Ai.FeatureGroup(),
        outLineLayer: new Ai.FeatureGroup(),
        normalLayer: new Ai.FeatureGroup()
      },
    };
      mapShow: {
        dzwl: true,
        zyqy: true,
        fenji: true,
        chuanbo: true,
        shengyazhan: true,
        sos: true,
        offLine: true,
        outLine: true,
        normal: true
      },
      fitBounds: []
    }
  },
  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.initMap()
    this.initTrackMap()
    setInterval(() => {
      this.nowDate = new Date();
    }, 1000);
      this.nowDate = new Date()
    }, 1000)
    EventBus.$on('person', (msg) => {
      this.changeLocation(msg)
    })
  },
  methods: {
    changeLocation(msg) {
      var obj = JSON.parse(msg.body)
      this.layer.normalLayer.eachLayer((e) => {
        console.log(e)
        if (e.options.id == obj.deviceId) {
          console.log(obj.latitude, obj.longitude)
          e.setLatLng([obj.latitude, obj.longitude])
        }
      })
    },
    initMap() {
      if (this.map != null && this.map != "") {
        this.map.remove();
      if (this.map != null && this.map != '') {
        this.map.remove()
      }
      this.map = new Ai.Map("div1", {
      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");
        center: [39.915599, 122.406568]
      })
      var maplayer
      maplayer = Ai.TileLayer('http://192.168.74.189:9999/tdtvector')
      var la = Ai.WMTSLayer(
        "http://192.168.74.216:5071/gisserver/dzht/dzht/wmts",
        'http://192.168.74.216:5071/gisserver/dzht/dzht/wmts',
        { opacity: 0.5 }
      );
      this.map.addLayer(maplayer);
      this.map.addLayer(la);
      )
      this.map.addLayer(maplayer)
      this.map.addLayer(la)
      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] }));
      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],
            }),
          });
        } else {
          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,
          })
            // 设置弹出框弹出位置
            .setLatLng([value.Longitude, value.latitude])
            // 设置弹出框弹出内容
            .setContent(content)
            .openOn(this.map);
        });
        this.pointsLayer.addLayer(point1);
        arr.push(point1);
        // this.pointsarr.push(point1);
      });
      this.map.addLayer(this.pointsLayer);
      this.map.fitBoundsForLayers(arr);
      Ai.Scale({ position: 'bottomright' }).addTo(this.map)
      Ai.Zoom({ type: 'small' }).addTo(this.map)
      // this.polyline()
      this.polygon()
      this.loadEquipment()
      this.loadPerson()
    },
    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() {
    polygon() { // 加载地图围栏
      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)
          }
      this.$test
        .post(services.mapTag.GET_ALL_MAP_TAG, params)
        .then((res) => {
          // 请求成功处理...
          res.data.dataList.forEach((e) => {
            if (e.MAP_TAG_TYPE === '1') { // 电子围栏
              var polygon = Ai.Polygon(e.MAP_TAG_SHAPE, {
                color: '#A74B5C',
                opacity: 1.0,
                weight: 0
              })
              this.layer.dzwlLayer.addLayer(polygon)
              // this.fitBounds.push(polygon)
            } else if (e.MAP_TAG_TYPE === '2') { // 作业区域
              var polygon = Ai.Polygon(e.MAP_TAG_SHAPE, {
                color: '#438D65',
                opacity: 1.0,
                weight: 0
              })
              this.layer.zyqyLayer.addLayer(polygon)
              // this.fitBounds.push(polygon)
            }
          })
          this.map.addLayer(this.layer.dzwlLayer)
          this.map.addLayer(this.layer.zyqyLayer)
          // console.log(this.fitBounds)
          // this.map.fitBoundsForLayers(this.fitBounds)
        })
        .catch((res) => {
          // 请求失败处理...
        })
      }).catch(res => {
        // 请求失败处理...
      })
      var polygonLayer = new Ai.FeatureGroup();
      // 面绘制
      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);
    },
    showSlip() {
      this.visible = true;
      this.visible = true
    },
    showPopup(number) {
      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;">' +
          '<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,
    loadEquipment() { // 加载地图设备
      var params = new FormData()
      this.$test
        .post(services.equipment.GET_ALL_EQUIPMENT, params)
        .then((res) => {
          // 请求成功处理...
          console.log(res.data)
          res.data.dataList.forEach((e) => {
            if (e.FACILITY_TYPE === '001') { // 船舶
              this.layer.chuanboLayer.addLayer(Ai.Point([e.LATITUDE, e.LONGITUDE], {
                icon: Ai.Icon({
                  // 设置图标URL路径
                  iconUrl: '/static/images/船舶.png',
                  // 设置图标大小
                  iconSize: [20, 20],
                  // 设置点对象和图标的相对偏移量
                  iconAnchor: [0, 0]
                })
              }))
            } else if (e.FACILITY_TYPE === '002') { // 风机
              this.layer.fenjiLayer.addLayer(Ai.Point([e.LATITUDE, e.LONGITUDE], {
                icon: Ai.Icon({
                  // 设置图标URL路径
                  iconUrl: '/static/images/风机.png',
                  // 设置图标大小
                  iconSize: [20, 20],
                  // 设置点对象和图标的相对偏移量
                  iconAnchor: [0, 0]
                })
              }))
            } else if (e.FACILITY_TYPE === '003') { // 升压站
              this.layer.shengyazhanLayer.addLayer(Ai.Point([e.LATITUDE, e.LONGITUDE], {
                icon: Ai.Icon({
                  // 设置图标URL路径
                  iconUrl: '/static/images/升压站画面.png',
                  // 设置图标大小
                  iconSize: [20, 20],
                  // 设置点对象和图标的相对偏移量
                  iconAnchor: [0, 0]
                })
              }))
            }
          })
          this.map.addLayer(this.layer.chuanboLayer)
          this.map.addLayer(this.layer.fenjiLayer)
          this.map.addLayer(this.layer.shengyazhanLayer)
        })
        .catch((res) => {
          // 请求失败处理...
        })
          // 设置弹出框弹出位置
          .setLatLng({ lat: data.Longitude, lng: data.latitude })
          // 设置弹出框弹出内容
          .setContent(content)
          .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);
    },
    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);
    loadPerson() { // 加载地图人员
      var params = new FormData()
      this.$test
        .post(services.organization.PERSON_LOCATION, params)
        .then((res) => {
          console.log(res.data)
          var layer
          res.data.dataList.forEach((e) => {
            var icon, tips
            var callHelp = ''
            if (e.LOCATION_STATUS === '0') {
              icon = '/static/images/normalworker.png'
              layer = this.layer.normalLayer
              tips = '<div class="normal">正常</div>'
            } else if (e.LOCATION_STATUS === '1') {
              icon = '/static/images/offlineworker.png'
              layer = this.layer.offLineLayer
              tips = '<div class="offline">离线</div>'
            } else if (e.LOCATION_STATUS === '2') {
              icon = '/static/images/outlineworker.png'
              layer = this.layer.outLineLayer
              tips = '<div class="outline">违规</div>'
            } else if (e.LOCATION_STATUS === '3' || e.LOCATION_STATUS === '4') {
              icon = '/static/images/sosworker.png'
              layer = this.layer.sosLayer
              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>'
            }
            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.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>终端编号</div>' +
                  '<div>' + e.DEVICE_NO + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>经度</div>' +
                  '<div>' + e.LONGITUDE + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>纬度</div>' +
                  '<div>' + e.LATITUDE + '</div>' +
                  '</div>' +
                  '<div class="row">' +
                  '<div>最新定位时间</div>' +
                  '<div>' + e.LOCATION_DATE + '</div>' +
                  '</div></div></div>' + callHelp +
                  '</div></div>'
              Ai.Popup({
                minWidth: 300,
                offset: [0, -10],
                autoClose: true
              })
                // 设置弹出框弹出位置
                .setLatLng(point.getLatLng())
                // 设置弹出框弹出内容
                .setContent(content)
                .openOn(this.map)
            })
            layer.addLayer(point)
          })
          this.map.addLayer(this.layer.sosLayer)
          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) => {
          // 请求失败处理...
        })
    },
    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);
    showOrHide(layer, type) {
      if (this.map.hasLayer(layer)) {
        this.map.removeLayer(layer)
        this.mapShow[type] = false
      } else {
        this.map.addLayer(layer)
        this.mapShow[type] = true
      }
    },
    changeTrackTime(index) {
      this.trackQueryCondition.currentIndex = index;
      this.trackQueryCondition.currentIndex = index
    },
    initTrackMap() {
      if (this.trackMap != null && this.trackMap != '') {
        this.trackMap.remove()
      }
      this.trackMap = new Ai.Map('track-map', {
        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.trackMap.addLayer(maplayer)
      this.trackMap.addLayer(la)
      Ai.Scale({position: 'bottomright'}).addTo(this.trackMap)
      Ai.Zoom({type: 'small'}).addTo(this.trackMap)
    },
    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

@@ -6,20 +6,37 @@
          <div class="label-content">
            <div class="label">标记名称:</div>
            <div class="input-rule">
              <t-input v-model="queryCondition.userName" placeholder="请输入..."></t-input>
              <t-input
                v-model="queryCondition.userName"
                placeholder="请输入..."
              ></t-input>
            </div>
          </div>
          <div class="btns">
            <t-button color="secondary" class="reset-btn" @click="onReset">重置</t-button>
            <t-button color="success" icon="search-outline" @click="onSearch">查询</t-button>
            <t-button color="secondary" icon="upload-outline" @click="toExport">导出至Excel</t-button>
            <t-button color="secondary" class="reset-btn" @click="onReset"
            >重置</t-button
            >
            <t-button color="success" icon="search-outline" @click="onSearch"
            >查询</t-button
            >
            <t-button color="secondary" icon="upload-outline" @click="toExport"
            >导出至Excel</t-button
            >
          </div>
        </div>
        <div class="btns">
          <t-button color="success" icon="plus-outline" @click="markModal(1)">考勤区域</t-button>
          <t-button color="success" icon="plus-outline" @click="markModal(2)">作业区域</t-button>
          <t-button color="success" icon="plus-outline" @click="markModal(3)">电子围栏</t-button>
          <t-button color="success" icon="plus-outline" @click="markModal(4)">定点</t-button>
          <t-button color="success" icon="plus-outline" @click="markModal(1)"
          >考勤区域</t-button
          >
          <t-button color="success" icon="plus-outline" @click="markModal(2)"
          >作业区域</t-button
          >
          <t-button color="success" icon="plus-outline" @click="markModal(3)"
          >电子围栏</t-button
          >
          <t-button color="success" icon="plus-outline" @click="markModal(4)"
          >定点</t-button
          >
        </div>
      </div>
    </div>
@@ -28,86 +45,140 @@
        <t-table-column prop="MAP_TAG_NAME" label="标记名称"></t-table-column>
        <t-table-column label="类型">
          <template slot-scope="scope">
            <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>
            <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 :formatter="timestampToTime" prop="CREATE_DATE" label="创建时间"></t-table-column>
        <t-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          :formatter="timestampToTime"
          prop="CREATE_DATE"
          label="创建时间"
        ></t-table-column>
        <t-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <a href="javascript:void(0)" size="sm" @click="handleClick(scope.row)">编辑</a>
            <a
              href="javascript:void(0)"
              size="sm"
              @click="handleClick(scope.row)"
            >编辑</a
            >
            <span class="mod-line">|</span>
            <a href="javascript:void(0)" size="sm" @click="remove(scope.row)">删除</a>
            <a href="javascript:void(0)" size="sm" @click="remove(scope.row)"
            >删除</a
            >
          </template>
        </t-table-column>
      </t-table>
      <t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
               :page-size.sync="table.pager.size"
               :sizer-range="[20,50,100]"
               class="px-24 pt-16 float-right"
               show-elevator show-sizer
               @on-size-change="onSizeChange"
               @on-change="onPagerChange">
      <t-pager
        :total="table.pager.total"
        :current.sync="table.pager.currentPage"
        :page-size.sync="table.pager.size"
        :sizer-range="[20, 50, 100]"
        class="px-24 pt-16 float-right"
        show-elevator
        show-sizer
        @on-size-change="onSizeChange"
        @on-change="onPagerChange"
      >
      </t-pager>
    </div>
    <t-modal :visibled.sync="addMark" :ok="submitMark" :cancel="cancel" class="modal" title="地图标记" ok-text="保存" width="80%" >
    <t-modal
      :visibled.sync="addMark"
      :ok="submitMark"
      :cancel="cancel"
      class="modal"
      title="地图标记"
      ok-text="保存"
      width="80%"
    >
      <div class="top">
        <div>
          <div class="label">标记类型:</div>
          <div class="input-rule">
            <t-select v-model="markType" width="200" placeholder="请输入...">
              <t-option v-for="item in markTypes" :key="item.id" :value="item.id">{{ item.type }}</t-option>
              <t-option
                v-for="item in markTypes"
                :key="item.id"
                :value="item.id"
              >{{ item.type }}</t-option
              >
            </t-select>
          </div>
        </div>
        <div>
          <div class="label">标记名称:</div>
          <div class="input-rule">
            <t-input v-model="markName" placeholder="请输入..." style="width: 200px"></t-input>
            <t-input
              v-model="markName"
              placeholder="请输入..."
              style="width: 200px"
            ></t-input>
          </div>
        </div>
        <div v-show="markType == 4">
          <div class="label">停留时长:</div>
          <div class="input-rule">
            <t-input
              v-model="residenceTimeLength"
              placeholder="请输入..."
              style="width: 100px"
            ></t-input>
          </div>
          <div class="label">min</div>
        </div>
      </div>
      <div class="content">
        <div class="left">
          <div class="header">
            <div>坐标列表</div>
            <div class="import-down">
              <a href="javascript:void(0)" size="sm" @click="handleFile1()">导入</a>
              <input id="file" type="file"
                     accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                     style="display:none" @change="handleFile($event)" >
              <a href="javascript:void(0)" size="sm" @click="handleFile1()"
              >导入</a
              >
              <input
                id="file"
                type="file"
                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                style="display: none"
                @change="handleFile($event)"
              />
              <span class="mod-line">|</span>
              <a href="javascript:void(0)" size="sm" @click="downloadTemplate()">下载模板</a>
              <a href="javascript:void(0)" size="sm" @click="downloadTemplate()"
              >下载模板</a
              >
            </div>
          </div>
          <div>
            <t-table :data="modalData" size="sm" height="500">
              <t-table-column align="center" type="index" label="坐标名称"></t-table-column>
              <t-table-column align="center" prop="lng" label="经度"></t-table-column>
              <t-table-column align="center" prop="lat" label="纬度"></t-table-column>
              <t-table-column
                align="center"
                type="index"
                label="坐标名称"
              ></t-table-column>
              <t-table-column
                align="center"
                prop="lng"
                label="经度"
              ></t-table-column>
              <t-table-column
                align="center"
                prop="lat"
                label="纬度"
              ></t-table-column>
            </t-table>
          </div>
          <div class="explain">
            <div class="title">说明</div>
            <div>
              1、可在地图中点击绘制对应区域
            </div>
            <div>1、可在地图中点击绘制对应区域</div>
            <div>
              2、可编辑坐标列表中的经纬度值调整对应点坐标，对应点在地图中处于选中态
            </div>
            <div>
              3、导入将清空已绘制信息
            </div>
            <div>3、导入将清空已绘制信息</div>
          </div>
        </div>
        <div id="modalMap" class="right">
        </div>
        <div id="modalMap" class="right"></div>
      </div>
    </t-modal>
  </div>
@@ -119,8 +190,7 @@ export default {
  data() {
    return {
      table: {
        data: [
        ],
        data: [],
        pager: {
          currentPage: 1,
          size: 5,
@@ -135,6 +205,7 @@ export default {
      addMark: false,
      update: false,
      markName: '',
      residenceTimeLength: '',
      markType: 1,
      markTypes: [
        {
@@ -164,26 +235,28 @@ export default {
  },
  mounted() {
    // 请求成功处理...
    let ak = this.$store.getters.getGisToken
    this.map = new Ai.Map('modalMap', {
      ak: ak,
      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})
    var la = Ai.WMTSLayer(
      'http://192.168.74.216:5071/gisserver/dzht/dzht/wmts',
      { opacity: 0.5 }
    )
    this.map.addLayer(la)
    var options = {
      guideLayers: []// 导向（吸附）图层对象，当距离相隔很近的时候会与导向对象重合
      guideLayers: [] // 导向（吸附）图层对象，当距离相隔很近的时候会与导向对象重合
    }
    this.polygonDrawer = Ai.DrawPolygon(this.map, options)// 初始化多边形绘制工具
    this.polygonDrawer.enable()// 激活多边形绘制工具
    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)// 获取多边形信息
      this.layer = this.polygonDrawer.polygon(e) // 获取多边形信息
      // console.log(this.polygonDrawer.getPoints())
      this.modalData = this.layer._latlngs[0]
      this.polygonDrawer.editing(this.layer)
@@ -194,20 +267,25 @@ export default {
  methods: {
    getList(pageNum, pageSize, MAP_TAG_NAME) {
      var params = new FormData()
      params.append('data', JSON.stringify({
        pageNum: pageNum,
        pageSize: pageSize,
        mapTagName: MAP_TAG_NAME
      }))
      this.$test.post(services.mapTag.GET_MAP_TAG, params
      ).then(res => {
        // 请求成功处理...
        this.table.data = res.data.dataList
        this.table.pager.total = res.data.dataNum
        this.table.pager.currentPage = pageNum
      }).catch(res => {
        // 请求失败处理...
      })
      params.append(
        'data',
        JSON.stringify({
          pageNum: pageNum,
          pageSize: pageSize,
          mapTagName: MAP_TAG_NAME
        })
      )
      this.$test
        .post(services.mapTag.GET_MAP_TAG, params)
        .then((res) => {
          // 请求成功处理...
          this.table.data = res.data.dataList
          this.table.pager.total = res.data.dataNum
          this.table.pager.currentPage = pageNum
        })
        .catch((res) => {
          // 请求失败处理...
        })
    },
    onChange(value) {
      console.log('date change:' + value)
@@ -222,26 +300,33 @@ export default {
    toExport() {
      var params = new FormData()
      var name = this.queryCondition.userName
      params.append('data', JSON.stringify({
        params: {
          MAP_TAG_NAME: name
        }
      }))
      params.append(
        'data',
        JSON.stringify({
          params: {
            MAP_TAG_NAME: name
          }
        })
      )
      // window.open('http://localhost:8088/ipu/ExportToExcel/exportMapTagInfoToExcel?data=' + params)
      //
      this.$test.post(services.excel.EXPROT_MAP_TAG, params
      ).then(res => {
        // 请求成功处理...
        // debugger
        console.log(res)
        this.downloadDoc(res.data)
      }).catch(res => {
        // 请求失败处理...
      })
      this.$test
        .post(services.excel.EXPROT_MAP_TAG, params)
        .then((res) => {
          // 请求成功处理...
          // debugger
          console.log(res)
          this.downloadDoc(res.data)
        })
        .catch((res) => {
          // 请求失败处理...
        })
    },
    downloadDoc(response) {
      // debugger
      var blob = new Blob([response], {type: 'application/vnd.ms-excel;charset=utf-8'})
      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
@@ -257,12 +342,17 @@ export default {
      this.update = false
      this.updateId = null
      this.markName = ''
      this.residenceTimeLength = ''
      this.modalData = []
      this.polygonDrawer.enable()
    },
    timestampToTime (cjsj) {
    timestampToTime(cjsj) {
      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() + ':'
@@ -286,6 +376,14 @@ export default {
        return false
      }
      if (this.markType === 4 && !this.residenceTimeLength) {
        this.$Confirm.warning({
          title: '提示',
          content: '请输入停留时长'
        })
        return false
      }
      let arr = ''
      for (let i = 0; i < this.modalData.length; i++) {
        arr = arr + (this.modalData[i].lng + ' ' + this.modalData[i].lat + ',')
@@ -293,45 +391,66 @@ export default {
      arr = arr + (this.modalData[0].lng + ' ' + this.modalData[0].lat)
      var params = new FormData()
      if (this.update) {
        params.append('data', JSON.stringify({
        params.append(
          'data',
          JSON.stringify({
            mapTagName: this.markName,
            mapTagType: this.markType,
            residenceTimeLength: this.residenceTimeLength,
            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 => {
        // 请求失败处理...
      })
          })
        )
        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({
          mapTagName: this.markName,
          mapTagType: this.markType,
          mapTagShape: arr
        }))
      
      this.update = false
      this.$test.post(services.mapTag.ADD_MAP_TAG, params
      ).then(res => {
        // 请求成功处理...
        this.$Message.success('操作成功')
        this.map.removeLayer(this.layer)
        this.polygonDrawer.disable()
        this.modalData = []
        this.markName = ''
        this.getList(this.table.pager.currentPage, this.table.pager.size, this.queryCondition.userName)
      }).catch(res => {
        // 请求失败处理...
      })
        params.append(
          'data',
          JSON.stringify({
            mapTagName: this.markName,
            mapTagType: this.markType,
            residenceTimeLength: this.residenceTimeLength,
            mapTagShape: arr
          })
        )
        this.update = false
        this.$test
          .post(services.mapTag.ADD_MAP_TAG, params)
          .then((res) => {
            // 请求成功处理...
            this.$Message.success('操作成功')
            this.map.removeLayer(this.layer)
            this.polygonDrawer.disable()
            this.modalData = []
            this.markName = ''
            this.residenceTimeLength = ''
            this.getList(
              this.table.pager.currentPage,
              this.table.pager.size,
              this.queryCondition.userName
            )
          })
          .catch((res) => {
            // 请求失败处理...
          })
      }
    },
    getTime() {
@@ -360,46 +479,49 @@ export default {
    },
    handleClick(row) {
      var params = new FormData()
      params.append('data', JSON.stringify({
        mapTagId: row.MAP_TAG_ID
      }))
      this.$test.post(services.mapTag.GET_ONE_MAP_TAG, params
      ).then(res => {
        // 请求成功处理...
        this.modalData = []
        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)
        // 面设为编辑状态
        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 => {
        // 请求失败处理...
      })
      params.append(
        'data',
        JSON.stringify({
          mapTagId: row.MAP_TAG_ID
        })
      )
      this.$test
        .post(services.mapTag.GET_ONE_MAP_TAG, params)
        .then((res) => {
          // 请求成功处理...
          this.modalData = []
          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)
          // 面设为编辑状态
          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) => {
          // 请求失败处理...
        })
      this.markName = row.MAP_TAG_NAME
      this.markType = parseInt(row.MAP_TAG_TYPE)
      this.updateId = row.MAP_TAG_ID
      this.residenceTimeLength = row.RESIDENCE_TIME_LENGTH
      this.addMark = true
      this.update = true
      this.polygonDrawer.enable()
    },
    downloadTemplate() {
      // 1. 准备js数组
      const arr = [
        ['序号', '经度', '纬度']
      ]
      const arr = [['序号', '经度', '纬度']]
      for (let i = 0; i < this.modalData.length; i++) {
        let g = [
          i + 1,
          this.modalData[i].lng + '',
          this.modalData[i].lat + ''
        ]
        let g = [i + 1, this.modalData[i].lng + '', this.modalData[i].lat + '']
        console.log(g)
        arr.push(g)
      }
@@ -409,7 +531,7 @@ export default {
      // 先组装wookbook数据格式
      let workbook = {
        SheetNames: ['test'], // 总表名
        Sheets: {test: sheet} // test是表名
        Sheets: { test: sheet } // test是表名
      }
      // 下载表格
      XLSX.writeFile(workbook, '新增标记模板' + this.getTime() + '.xlsx')
@@ -424,14 +546,16 @@ export default {
      var f = files[0]
      var reader = new FileReader()
      // debugger
      reader.onload = function(e) {
      reader.onload = function (e) {
        // debugger
        var data = new Uint8Array(e.target.result)
        var workbook = XLSX.read(data, {type: 'array'})
        var workbook = XLSX.read(data, { type: 'array' })
        /* DO SOMETHING WITH workbook HERE */
        // console.log(workbook)
        /* 其中workbook.SheetNames[0]是表名下对应的数据 sheet数据 */
        let arr = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]])
        let arr = XLSX.utils.sheet_to_json(
          workbook.Sheets[workbook.SheetNames[0]]
        )
        that.modalData = []
        var coverWktStr_blue = 'POLYGON (( '
        for (let i = 0; i < arr.length; i++) {
@@ -441,15 +565,26 @@ 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)
        coverWktStr_blue = coverWktStr_blue.substring(
          0,
          coverWktStr_blue.length - 1
        )
        coverWktStr_blue += '))'
        var coverLayer_blue = new Ai.Polygon(coverWktStr_blue, {color: 'red'})
        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 = new Ai.PolylineSnap(
          that.map,
          coverLayer_blue
        )
        coverLayer_blue.snapediting.enable()
        that.layer = coverLayer_blue
        that.map.addLayer(coverLayer_blue)
@@ -466,19 +601,28 @@ export default {
        content: '删除后不可恢复,确认删除吗?',
        ok: function () {
          var params = new FormData()
          params.append('data', JSON.stringify({
            mapTagId: row.MAP_TAG_ID
          }))
          params.append(
            'data',
            JSON.stringify({
              mapTagId: row.MAP_TAG_ID
            })
          )
          // debugger
          this.$test.post(services.mapTag.DEL_MAP_TAG, params
          ).then(res => {
            // 请求成功处理...
            // debugger
            this.$Message.success('操作成功')
            that.getList(that.table.pager.currentPage, that.table.pager.size, that.queryCondition.userName)
          }).catch(res => {
            // 请求失败处理...
          })
          this.$test
            .post(services.mapTag.DEL_MAP_TAG, params)
            .then((res) => {
              // 请求成功处理...
              // debugger
              this.$Message.success('操作成功')
              that.getList(
                that.table.pager.currentPage,
                that.table.pager.size,
                that.queryCondition.userName
              )
            })
            .catch((res) => {
              // 请求失败处理...
            })
        }
      }
      this.$Confirm.confirm(confirm)

ebc-middle-platform/src/store.js

@@ -78,7 +78,7 @@ const store = new Vuex.Store({
    setTitle(state, newTitle) {
      state.currentTitle = newTitle || ''
    },
    setGisToken(state, token){
    setGisToken(state, token) {
      state.gistoken = token
    }
  },
@@ -106,7 +106,7 @@ const store = new Vuex.Store({
        return 'EN'
      }
    },
    getGisToken(state){
    getGisToken(state) {
      return state.gistoken
    }
  },