> 
      polylineLayer.addLayer(polyline);
420 
      this.map.addLayer(polylineLayer);
392 
      polylineLayer.addLayer(polyline)
393 
      this.map.addLayer(polylineLayer)
421 394 
    },
422 
    polygon() {
395 
    polygon() { // 加载地图围栏
423 396 
      var params = new FormData()
424 
      // params.append('data', JSON.stringify({
425 
      //   pageNum: pageNum,
426 
      //   pageSize: pageSize,
427 
      //   mapTagName: MAP_TAG_NAME
428 
      // }))
429 
      this.$test.post(services.mapTag.GET_ALL_MAP_TAG, params
430 
      ).then(res => {
431 
        // 请求成功处理...
432 
        res.data.dataList.forEach(e => {
433 
          if(e.MAP_TAG_TYPE === 1){
434 
            console.log(e.MAP_TAG_SHAPE)
435 
          }
397 
      this.$test
398 
        .post(services.mapTag.GET_ALL_MAP_TAG, params)
399 
        .then((res) => {
400 
          // 请求成功处理...
401 
          res.data.dataList.forEach((e) => {
402 
            if (e.MAP_TAG_TYPE === '1') { // 电子围栏
403 
              var polygon = Ai.Polygon(e.MAP_TAG_SHAPE, {
404 
                color: '#A74B5C',
405 
                opacity: 1.0,
406 
                weight: 0
407 
              })
408 
              this.layer.dzwlLayer.addLayer(polygon)
409 
              // this.fitBounds.push(polygon)
410 
            } else if (e.MAP_TAG_TYPE === '2') { // 作业区域
411 
              var polygon = Ai.Polygon(e.MAP_TAG_SHAPE, {
412 
                color: '#438D65',
413 
                opacity: 1.0,
414 
                weight: 0
415 
              })
416 
              this.layer.zyqyLayer.addLayer(polygon)
417 
              // this.fitBounds.push(polygon)
418 
            }
419 
          })
420 
          this.map.addLayer(this.layer.dzwlLayer)
421 
          this.map.addLayer(this.layer.zyqyLayer)
422 
          // console.log(this.fitBounds)
423 
          // this.map.fitBoundsForLayers(this.fitBounds)
424 
        })
425 
        .catch((res) => {
426 
          // 请求失败处理...
436 427 
        })
437 
      }).catch(res => {
438 
        // 请求失败处理...
439 
      })
440 
      var polygonLayer = new Ai.FeatureGroup();
441 
      // 面绘制
442 
      var coverWktStr = "POLYGON ((" + this.polygonarr + "))";
443 
      var polygon = Ai.Polygon(coverWktStr, {
444 
        color: "red",
445 
        opacity: 1.0,
446 
        weight: 0,
447 
      });
448 
      // this.polygonarr.arr(polygon);
449 
      polygonLayer.addLayer(polygon);
450 
      this.map.addLayer(polygonLayer);
451 428 
    },
452 429 
    showSlip() {
453 
      this.visible = true;
430 
      this.visible = true
454 431 
    },
455 
    showPopup(number) {
456 
      if (this.popup != null && this.popup != "") {
457 
        this.popup.closePopup();
458 
        this.popup.remove();
459 
      }
460 
      var data = find(this.dataList, (o) => {
461 
        return o.number == number;
462 
      });
463 
      if (data != null && data != "") {
464 
        var content =
465 
          '<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">' +
466 
          "<div>终端编号</div>" +
467 
          "<div>ZDBH0001</div>" +
468 
          "</div>" +
469 
          '<div class="row">' +
470 
          "<div>最新定位时间</div>" +
471 
          "<div>2020.08.13 08:24:32</div>" +
472 
          "</div></div></div>" +
473 
          '<div style="display:flex;">' +
474 
          '<button class="point-out" onClick="window.Vue.modal=true"><i style="font-size: 20px;" class="aidicon aidicon-user-outline"></i>指派</button>' +
475 
          '<button class="close-confirm" onClick="window.Vue.close()"><i style="font-size: 20px;" class="aidicon aidicon-close"></i>关闭</button>' +
476 
          "</div></div></div>";
477 
        this.popup = Ai.Popup({
478 
          minWidth: 300,
479 
          offset: [0, -10],
480 
          autoClose: false,
432 
    loadEquipment() { // 加载地图设备
433 
      var params = new FormData()
434 
      this.$test
435 
        .post(services.equipment.GET_ALL_EQUIPMENT, params)
436 
        .then((res) => {
437 
          // 请求成功处理...
438 
          console.log(res.data)
439 
          res.data.dataList.forEach((e) => {
440 
            if (e.FACILITY_TYPE === '001') { // 船舶
441 
              this.layer.chuanboLayer.addLayer(Ai.Point([e.LATITUDE, e.LONGITUDE], {
442 
                icon: Ai.Icon({
443 
                  // 设置图标URL路径
444 
                  iconUrl: '/static/images/船舶.png',
445 
                  // 设置图标大小
446 
                  iconSize: [20, 20],
447 
                  // 设置点对象和图标的相对偏移量
448 
                  iconAnchor: [0, 0]
449 
                })
450 
              }))
451 
            } else if (e.FACILITY_TYPE === '002') { // 风机
452 
              this.layer.fenjiLayer.addLayer(Ai.Point([e.LATITUDE, e.LONGITUDE], {
453 
                icon: Ai.Icon({
454 
                  // 设置图标URL路径
455 
                  iconUrl: '/static/images/风机.png',
456 
                  // 设置图标大小
457 
                  iconSize: [20, 20],
458 
                  // 设置点对象和图标的相对偏移量
459 
                  iconAnchor: [0, 0]
460 
                })
461 
              }))
462 
            } else if (e.FACILITY_TYPE === '003') { // 升压站
463 
              this.layer.shengyazhanLayer.addLayer(Ai.Point([e.LATITUDE, e.LONGITUDE], {
464 
                icon: Ai.Icon({
465 
                  // 设置图标URL路径
466 
                  iconUrl: '/static/images/升压站画面.png',
467 
                  // 设置图标大小
468 
                  iconSize: [20, 20],
469 
                  // 设置点对象和图标的相对偏移量
470 
                  iconAnchor: [0, 0]
471 
                })
472 
              }))
473 
            }
474 
          })
475 
          this.map.addLayer(this.layer.chuanboLayer)
476 
          this.map.addLayer(this.layer.fenjiLayer)
477 
          this.map.addLayer(this.layer.shengyazhanLayer)
478 
        })
479 
        .catch((res) => {
480 
          // 请求失败处理...
481 481 
        })
482 
          // 设置弹出框弹出位置
483 
          .setLatLng({ lat: data.Longitude, lng: data.latitude })
484 
          // 设置弹出框弹出内容
485 
          .setContent(content)
486 
          .openOn(this.map);
487 
      }
488 
    },
489 
    loadFenji() {
490 
      var point = Ai.Point([29.86089241772908, 122.09930419921876], {
491 
        icon: Ai.Icon({
492 
          // 设置图标URL路径
493 
          iconUrl: "/static/images/风机.png",
494 
          // 设置图标大小
495 
          iconSize: [20, 20],
496 
          // 设置点对象和图标的相对偏移量
497 
          iconAnchor: [0, 0],
498 
        }),
499 
      });
500 
      this.pointsLayer.addLayer(point);
501 
      this.map.addLayer(this.pointsLayer);
502 482 
    },
503 
    loadchuanbo() {
504 
      var point = Ai.Point([29.960892, 122.09930419921876], {
505 
        icon: Ai.Icon({
506 
          // 设置图标URL路径
507 
          iconUrl: "/static/images/船舶.png",
508 
          // 设置图标大小
509 
          iconSize: [20, 20],
510 
          // 设置点对象和图标的相对偏移量
511 
          iconAnchor: [0, 0],
512 
        }),
513 
      });
514 
      this.pointsLayer.addLayer(point);
515 
      this.map.addLayer(this.pointsLayer);
483 
    loadPerson() { // 加载地图人员
484 
      var params = new FormData()
485 
      this.$test
486 
        .post(services.organization.PERSON_LOCATION, params)
487 
        .then((res) => {
488 
          console.log(res.data)
489 
          var layer
490 
          res.data.dataList.forEach((e) => {
491 
            var icon, tips
492 
            var callHelp = ''
493 
            if (e.LOCATION_STATUS === '0') {
494 
              icon = '/static/images/normalworker.png'
495 
              layer = this.layer.normalLayer
496 
              tips = '<div class="normal">正常</div>'
497 
            } else if (e.LOCATION_STATUS === '1') {
498 
              icon = '/static/images/offlineworker.png'
499 
              layer = this.layer.offLineLayer
500 
              tips = '<div class="offline">离线</div>'
501 
            } else if (e.LOCATION_STATUS === '2') {
502 
              icon = '/static/images/outlineworker.png'
503 
              layer = this.layer.outLineLayer
504 
              tips = '<div class="outline">违规</div>'
505 
            } else if (e.LOCATION_STATUS === '3' || e.LOCATION_STATUS === '4') {
506 
              icon = '/static/images/sosworker.png'
507 
              layer = this.layer.sosLayer
508 
              tips = '<div class="sos">SOS</div>'
509 
              callHelp = '<div style="display:flex;">' +
510 
                  '<button class="point-out" onClick="window.Vue.rescueModal=true"><i style="font-size: 20px;" class="aidicon aidicon-user-outline"></i>指派</button>' +
511 
                  '<button class="close-confirm" onClick="window.Vue.close()"><i style="font-size: 20px;" class="aidicon aidicon-close"></i>关闭</button>' +
512 
                  '</div>'
513 
            }
514 
            var point = Ai.Point([e.LATITUDE, e.LONGITUDE], {
515 
              icon: Ai.Icon({
516 
                // 设置图标URL路径
517 
                iconUrl: icon,
518 
                // 设置图标大小
519 
                iconSize: [20, 20],
520 
                // 设置点对象和图标的相对偏移量
521 
                iconAnchor: [0, 0]
522 
              }),
523 
              id: e.DEVICE_NO
524 
            })
525 
            point.on('click', (pointE) => {
526 
              var content =
527 
                  '<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">' +
528 
                  '<div>终端编号</div>' +
529 
                  '<div>' + e.DEVICE_NO + '</div>' +
530 
                  '</div>' +
531 
                  '<div class="row">' +
532 
                  '<div>经度</div>' +
533 
                  '<div>' + e.LONGITUDE + '</div>' +
534 
                  '</div>' +
535 
                  '<div class="row">' +
536 
                  '<div>纬度</div>' +
537 
                  '<div>' + e.LATITUDE + '</div>' +
538 
                  '</div>' +
539 
                  '<div class="row">' +
540 
                  '<div>最新定位时间</div>' +
541 
                  '<div>' + e.LOCATION_DATE + '</div>' +
542 
                  '</div></div></div>' + callHelp +
543 
                  '</div></div>'
544 
              Ai.Popup({
545 
                minWidth: 300,
546 
                offset: [0, -10],
547 
                autoClose: true
548 
              })
549 
                // 设置弹出框弹出位置
550 
                .setLatLng(point.getLatLng())
551 
                // 设置弹出框弹出内容
552 
                .setContent(content)
553 
                .openOn(this.map)
554 
            })
555 
            layer.addLayer(point)
556 
          })
557 
          this.map.addLayer(this.layer.sosLayer)
558 
          this.map.addLayer(this.layer.outLineLayer)
559 
          this.map.addLayer(this.layer.offLineLayer)
560 
          this.map.addLayer(this.layer.normalLayer)
561 
          this.map.fitBoundsForLayers(this.layer.normalLayer)
562 
        })
563 
        .catch((res) => {
564 
          // 请求失败处理...
565 
        })
516 566 
    },
517 
    loadshengyazhan() {
518 
      var point = Ai.Point([29.86089241772908, 122.1993], {
519 
        icon: Ai.Icon({
520 
          // 设置图标URL路径
521 
          iconUrl: "/static/images/升压站画面.png",
522 
          // 设置图标大小
523 
          iconSize: [20, 20],
524 
          // 设置点对象和图标的相对偏移量
525 
          iconAnchor: [0, 0],
526 
        }),
527 
      });
528 
      this.pointsLayer.addLayer(point);
529 
      this.map.addLayer(this.pointsLayer);
567 
    showOrHide(layer, type) {
568 
      if (this.map.hasLayer(layer)) {
569 
        this.map.removeLayer(layer)
570 
        this.mapShow[type] = false
571 
      } else {
572 
        this.map.addLayer(layer)
573 
        this.mapShow[type] = true
574 
      }
530 575 
    },
531 576 
    changeTrackTime(index) {
532 
      this.trackQueryCondition.currentIndex = index;
577 
      this.trackQueryCondition.currentIndex = index
578 
    },
579 
    initTrackMap() {
580 
      if (this.trackMap != null && this.trackMap != '') {
581 
        this.trackMap.remove()
582 
      }
583 
      this.trackMap = new Ai.Map('track-map', {
584 
        ak: this.$store.getters.getGisToken,
585 
        center: [39.915599, 122.406568]
586 
      })
587 
      var maplayer = null
588 
      maplayer = Ai.TileLayer('http://192.168.74.189:9999/tdtvector')
589 
      var la = Ai.WMTSLayer('http://192.168.74.216:5071/gisserver/dzht/dzht/wmts', {opacity: 0.5})
590 
      this.trackMap.addLayer(maplayer)
591 
      this.trackMap.addLayer(la)
592
593 
      Ai.Scale({position: 'bottomright'}).addTo(this.trackMap)
594 
      Ai.Zoom({type: 'small'}).addTo(this.trackMap)
533 595 
    },
534 596 
    onChangeDate() {},
535 597 
    toExport() {},
536 598 
    close(item) {
537 599 
      this.$Confirm.confirm({
538 
        title: "确认要关闭张三落水报警吗？",
539 
        content: "关闭后将不再进行报警显示",
600 
        title: '确认要关闭张三落水报警吗？',
601 
        content: '关闭后将不再进行报警显示',
540 602 
        ok: () => {
541 
          console.log("点击了确定");
603 
          console.log('点击了确定')
542 604 
        },
543 605 
        cancel: () => {
544 
          console.log("点击了取消");
545 
        },
546 
      });
606 
          console.log('点击了取消')
607 
        }
608 
      })
547 609 
    },
548 610 
    cancel() {
549 
      this.rescueModal = false;
550 
    },
551 
  },
552 
};
611 
      this.rescueModal = false
612 
    }
613 
  }
614 
}
553 615 
</script>

+ 313 - 169
ebc-middle-platform/src/modules/system-management/map-mark.vue
Просмотреть файл 

@ -6,20 +6,37 @@
6 6 
          <div class="label-content">
7 7 
            <div class="label">标记名称:</div>
8 8 
            <div class="input-rule">
9 
              <t-input v-model="queryCondition.userName" placeholder="请输入..."></t-input>
9 
              <t-input
10 
                v-model="queryCondition.userName"
11 
                placeholder="请输入..."
12 
              ></t-input>
10 13 
            </div>
11 14 
          </div>
12 15 
          <div class="btns">
13 
            <t-button color="secondary" class="reset-btn" @click="onReset">重置</t-button>
14 
            <t-button color="success" icon="search-outline" @click="onSearch">查询</t-button>
15 
            <t-button color="secondary" icon="upload-outline" @click="toExport">导出至Excel</t-button>
16 
            <t-button color="secondary" class="reset-btn" @click="onReset"
17 
            >重置</t-button
18 
            >
19 
            <t-button color="success" icon="search-outline" @click="onSearch"
20 
            >查询</t-button
21 
            >
22 
            <t-button color="secondary" icon="upload-outline" @click="toExport"
23 
            >导出至Excel</t-button
24 
            >
16 25 
          </div>
17 26 
        </div>
18 27 
        <div class="btns">
19 
          <t-button color="success" icon="plus-outline" @click="markModal(1)">考勤区域</t-button>
20 
          <t-button color="success" icon="plus-outline" @click="markModal(2)">作业区域</t-button>
21 
          <t-button color="success" icon="plus-outline" @click="markModal(3)">电子围栏</t-button>
22 
          <t-button color="success" icon="plus-outline" @click="markModal(4)">定点</t-button>
28 
          <t-button color="success" icon="plus-outline" @click="markModal(1)"
29 
          >考勤区域</t-button
30 
          >
31 
          <t-button color="success" icon="plus-outline" @click="markModal(2)"
32 
          >作业区域</t-button
33 
          >
34 
          <t-button color="success" icon="plus-outline" @click="markModal(3)"
35 
          >电子围栏</t-button
36 
          >
37 
          <t-button color="success" icon="plus-outline" @click="markModal(4)"
38 
          >定点</t-button
39 
          >
23 40 
        </div>
24 41 
      </div>
25 42 
    </div>
 
@ -28,86 +45,140 @@
28 45 
        <t-table-column prop="MAP_TAG_NAME" label="标记名称"></t-table-column>
29 46 
        <t-table-column label="类型">
30 47 
          <template slot-scope="scope">
31 
            <div v-if="scope.row.MAP_TAG_TYPE==1">考勤区域</div>
32 
            <div v-if="scope.row.MAP_TAG_TYPE==2">作业区域</div>
33 
            <div v-if="scope.row.MAP_TAG_TYPE==3">电子围栏</div>
34 
            <div v-if="scope.row.MAP_TAG_TYPE==4">定点</div>
48 
            <div v-if="scope.row.MAP_TAG_TYPE == 1">考勤区域</div>
49 
            <div v-if="scope.row.MAP_TAG_TYPE == 2">作业区域</div>
50 
            <div v-if="scope.row.MAP_TAG_TYPE == 3">电子围栏</div>
51 
            <div v-if="scope.row.MAP_TAG_TYPE == 4">定点</div>
35 52 
          </template>
36 53 
        </t-table-column>
37 
        <t-table-column :formatter="timestampToTime" prop="CREATE_DATE" label="创建时间"></t-table-column>
38 54 
        <t-table-column
39 
          fixed="right"
40 
          label="操作"
41 
          width="120"
42 
        >
55 
          :formatter="timestampToTime"
56 
          prop="CREATE_DATE"
57 
          label="创建时间"
58 
        ></t-table-column>
59 
        <t-table-column fixed="right" label="操作" width="120">
43 60 
          <template slot-scope="scope">
44 
            <a href="javascript:void(0)" size="sm" @click="handleClick(scope.row)">编辑</a>
61 
            <a
62 
              href="javascript:void(0)"
63 
              size="sm"
64 
              @click="handleClick(scope.row)"
65 
            >编辑</a
66 
            >
45 67 
            <span class="mod-line">|</span>
46 
            <a href="javascript:void(0)" size="sm" @click="remove(scope.row)">删除</a>
68 
            <a href="javascript:void(0)" size="sm" @click="remove(scope.row)"
69 
            >删除</a
70 
            >
47 71 
          </template>
48 72 
        </t-table-column>
49 73 
      </t-table>
50 
      <t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
51 
               :page-size.sync="table.pager.size"
52 
               :sizer-range="[20,50,100]"
53 
               class="px-24 pt-16 float-right"
54 
               show-elevator show-sizer
55 
               @on-size-change="onSizeChange"
56 
               @on-change="onPagerChange">
74 
      <t-pager
75 
        :total="table.pager.total"
76 
        :current.sync="table.pager.currentPage"
77 
        :page-size.sync="table.pager.size"
78 
        :sizer-range="[20, 50, 100]"
79 
        class="px-24 pt-16 float-right"
80 
        show-elevator
81 
        show-sizer
82 
        @on-size-change="onSizeChange"
83 
        @on-change="onPagerChange"
84 
      >
57 85 
      </t-pager>
58 86 
    </div>
59 
    <t-modal :visibled.sync="addMark" :ok="submitMark" :cancel="cancel" class="modal" title="地图标记" ok-text="保存" width="80%" >
87 
    <t-modal
88 
      :visibled.sync="addMark"
89 
      :ok="submitMark"
90 
      :cancel="cancel"
91 
      class="modal"
92 
      title="地图标记"
93 
      ok-text="保存"
94 
      width="80%"
95 
    >
60 96 
      <div class="top">
61 97 
        <div>
62 98 
          <div class="label">标记类型:</div>
63 99 
          <div class="input-rule">
64 100 
            <t-select v-model="markType" width="200" placeholder="请输入...">
65 
              <t-option v-for="item in markTypes" :key="item.id" :value="item.id">{{ item.type }}</t-option>
101 
              <t-option
102 
                v-for="item in markTypes"
103 
                :key="item.id"
104 
                :value="item.id"
105 
              >{{ item.type }}</t-option
106 
              >
66 107 
            </t-select>
67 108 
          </div>
68 109 
        </div>
69 110 
        <div>
70 111 
          <div class="label">标记名称:</div>
71 112 
          <div class="input-rule">
72 
            <t-input v-model="markName" placeholder="请输入..." style="width: 200px"></t-input>
113 
            <t-input
114 
              v-model="markName"
115 
              placeholder="请输入..."
116 
              style="width: 200px"
117 
            ></t-input>
73 118 
          </div>
74 119 
        </div>
120 
        <div v-show="markType == 4">
121 
          <div class="label">停留时长:</div>
122 
          <div class="input-rule">
123 
            <t-input
124 
              v-model="residenceTimeLength"
125 
              placeholder="请输入..."
126 
              style="width: 100px"
127 
            ></t-input>
128 
          </div>
129 
          <div class="label">min</div>
130 
        </div>
75 131 
      </div>
76 132 
      <div class="content">
77 133 
        <div class="left">
78 134 
          <div class="header">
79 135 
            <div>坐标列表</div>
80 136 
            <div class="import-down">
81 
              <a href="javascript:void(0)" size="sm" @click="handleFile1()">导入</a>
82 
              <input id="file" type="file"
83 
                     accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
84 
                     style="display:none" @change="handleFile($event)" >
137 
              <a href="javascript:void(0)" size="sm" @click="handleFile1()"
138 
              >导入</a
139 
              >
140 
              <input
141 
                id="file"
142 
                type="file"
143 
                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
144 
                style="display: none"
145 
                @change="handleFile($event)"
146 
              />
85 147 
              <span class="mod-line">|</span>
86 
              <a href="javascript:void(0)" size="sm" @click="downloadTemplate()">下载模板</a>
148 
              <a href="javascript:void(0)" size="sm" @click="downloadTemplate()"
149 
              >下载模板</a
150 
              >
87 151 
            </div>
88 152 
          </div>
89 153 
          <div>
90 154 
            <t-table :data="modalData" size="sm" height="500">
91 
              <t-table-column align="center" type="index" label="坐标名称"></t-table-column>
92 
              <t-table-column align="center" prop="lng" label="经度"></t-table-column>
93 
              <t-table-column align="center" prop="lat" label="纬度"></t-table-column>
155 
              <t-table-column
156 
                align="center"
157 
                type="index"
158 
                label="坐标名称"
159 
              ></t-table-column>
160 
              <t-table-column
161 
                align="center"
162 
                prop="lng"
163 
                label="经度"
164 
              ></t-table-column>
165 
              <t-table-column
166 
                align="center"
167 
                prop="lat"
168 
                label="纬度"
169 
              ></t-table-column>
94 170 
            </t-table>
95 171 
          </div>
96 172 
          <div class="explain">
97 173 
            <div class="title">说明</div>
98 
            <div>
99 
              1、可在地图中点击绘制对应区域
100 
            </div>
174 
            <div>1、可在地图中点击绘制对应区域</div>
101 175 
            <div>
102 176 
              2、可编辑坐标列表中的经纬度值调整对应点坐标，对应点在地图中处于选中态
103 177 
            </div>
104 
            <div>
105 
              3、导入将清空已绘制信息
106 
            </div>
178 
            <div>3、导入将清空已绘制信息</div>
107 179 
          </div>
108 180 
        </div>
109 
        <div id="modalMap" class="right">
110 
        </div>
181 
        <div id="modalMap" class="right"></div>
111 182 
      </div>
112 183 
    </t-modal>
113 184 
  </div>
 
@ -119,8 +190,7 @@ export default {
119 190 
  data() {
120 191 
    return {
121 192 
      table: {
122 
        data: [
123 
        ],
193 
        data: [],
124 194 
        pager: {
125 195 
          currentPage: 1,
126 196 
          size: 5,
 
@ -135,6 +205,7 @@ export default {
135 205 
      addMark: false,
136 206 
      update: false,
137 207 
      markName: '',
208 
      residenceTimeLength: '',
138 209 
      markType: 1,
139 210 
      markTypes: [
140 211 
        {
 
@ -164,26 +235,28 @@ export default {
164 235 
  },
165 236 
  mounted() {
166 237 
    // 请求成功处理...
167 
    let ak = this.$store.getters.getGisToken
168 238 
    this.map = new Ai.Map('modalMap', {
169 
      ak: ak,
239 
      ak: this.$store.getters.getGisToken,
170 240 
      center: [39.915599, 116.406568],
171 241 
      zoom: 5
172 242 
    })
173 243 
    var maplayer = null
174 244 
    maplayer = Ai.TileLayer('http://192.168.74.189:9999/tdtvector')
175 245 
    this.map.addLayer(maplayer)
176 
    var la = Ai.WMTSLayer('http://192.168.74.216:5071/gisserver/dzht/dzht/wmts', {opacity: 0.5})
246 
    var la = Ai.WMTSLayer(
247 
      'http://192.168.74.216:5071/gisserver/dzht/dzht/wmts',
248 
      { opacity: 0.5 }
249 
    )
177 250 
    this.map.addLayer(la)
178 251 
    var options = {
179 
      guideLayers: []// 导向（吸附）图层对象，当距离相隔很近的时候会与导向对象重合
252 
      guideLayers: [] // 导向（吸附）图层对象，当距离相隔很近的时候会与导向对象重合
180 253 
    }
181 
    this.polygonDrawer = Ai.DrawPolygon(this.map, options)// 初始化多边形绘制工具
182 
    this.polygonDrawer.enable()// 激活多边形绘制工具
254 
    this.polygonDrawer = Ai.DrawPolygon(this.map, options) // 初始化多边形绘制工具
255 
    this.polygonDrawer.enable() // 激活多边形绘制工具
183 256 
    this.map.on(AiDrawEvent.CREATED, (e) => {
184 257 
      // debugger
185 258 
      console.log(1)
186 
      this.layer = this.polygonDrawer.polygon(e)// 获取多边形信息
259 
      this.layer = this.polygonDrawer.polygon(e) // 获取多边形信息
187 260 
      // console.log(this.polygonDrawer.getPoints())
188 261 
      this.modalData = this.layer._latlngs[0]
189 262 
      this.polygonDrawer.editing(this.layer)
 
@ -194,20 +267,25 @@ export default {
194 267 
  methods: {
195 268 
    getList(pageNum, pageSize, MAP_TAG_NAME) {
196 269 
      var params = new FormData()
197 
      params.append('data', JSON.stringify({
198 
        pageNum: pageNum,
199 
        pageSize: pageSize,
200 
        mapTagName: MAP_TAG_NAME
201 
      }))
202 
      this.$test.post(services.mapTag.GET_MAP_TAG, params
203 
      ).then(res => {
204 
        // 请求成功处理...
205 
        this.table.data = res.data.dataList
206 
        this.table.pager.total = res.data.dataNum
207 
        this.table.pager.currentPage = pageNum
208 
      }).catch(res => {
209 
        // 请求失败处理...
210 
      })
270 
      params.append(
271 
        'data',
272 
        JSON.stringify({
273 
          pageNum: pageNum,
274 
          pageSize: pageSize,
275 
          mapTagName: MAP_TAG_NAME
276 
        })
277 
      )
278 
      this.$test
279 
        .post(services.mapTag.GET_MAP_TAG, params)
280 
        .then((res) => {
281 
          // 请求成功处理...
282 
          this.table.data = res.data.dataList
283 
          this.table.pager.total = res.data.dataNum
284 
          this.table.pager.currentPage = pageNum
285 
        })
286 
        .catch((res) => {
287 
          // 请求失败处理...
288 
        })
211 289 
    },
212 290 
    onChange(value) {
213 291 
      console.log('date change:' + value)
 
@ -222,26 +300,33 @@ export default {
222 300 
    toExport() {
223 301 
      var params = new FormData()
224 302 
      var name = this.queryCondition.userName
225 
      params.append('data', JSON.stringify({
226 
        params: {
227 
          MAP_TAG_NAME: name
228 
        }
229 
      }))
303 
      params.append(
304 
        'data',
305 
        JSON.stringify({
306 
          params: {
307 
            MAP_TAG_NAME: name
308 
          }
309 
        })
310 
      )
230 311 
      // window.open('http://localhost:8088/ipu/ExportToExcel/exportMapTagInfoToExcel?data=' + params)
231 312 
      //
232 
      this.$test.post(services.excel.EXPROT_MAP_TAG, params
233 
      ).then(res => {
234 
        // 请求成功处理...
235 
        // debugger
236 
        console.log(res)
237 
        this.downloadDoc(res.data)
238 
      }).catch(res => {
239 
        // 请求失败处理...
240 
      })
313 
      this.$test
314 
        .post(services.excel.EXPROT_MAP_TAG, params)
315 
        .then((res) => {
316 
          // 请求成功处理...
317 
          // debugger
318 
          console.log(res)
319 
          this.downloadDoc(res.data)
320 
        })
321 
        .catch((res) => {
322 
          // 请求失败处理...
323 
        })
241 324 
    },
242 325 
    downloadDoc(response) {
243 326 
      // debugger
244 
      var blob = new Blob([response], {type: 'application/vnd.ms-excel;charset=utf-8'})
327 
      var blob = new Blob([response], {
328 
        type: 'application/vnd.ms-excel;charset=utf-8'
329 
      })
245 330 
      var downloadElement = document.createElement('a')
246 331 
      var href = window.URL.createObjectURL(blob) // 创建下载的链接
247 332 
      downloadElement.href = href
 
@ -257,12 +342,17 @@ export default {
257 342 
      this.update = false
258 343 
      this.updateId = null
259 344 
      this.markName = ''
345 
      this.residenceTimeLength = ''
346 
      this.modalData = []
260 347 
      this.polygonDrawer.enable()
261 348 
    },
262 
    timestampToTime (cjsj) {
349 
    timestampToTime(cjsj) {
263 350 
      var date = new Date(cjsj.CREATE_DATE) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
264 351 
      var Y = date.getFullYear() + '-'
265 
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
352 
      var M =
353 
        (date.getMonth() + 1 < 10
354 
          ? '0' + (date.getMonth() + 1)
355 
          : date.getMonth() + 1) + '-'
266 356 
      var D = date.getDate() + ' '
267 357 
      var h = date.getHours() + ':'
268 358 
      var m = date.getMinutes() + ':'
 
@ -286,6 +376,14 @@ export default {
286 376 
        return false
287 377 
      }
288 378
379 
      if (this.markType === 4 && !this.residenceTimeLength) {
380 
        this.$Confirm.warning({
381 
          title: '提示',
382 
          content: '请输入停留时长'
383 
        })
384 
        return false
385 
      }
386
289 387 
      let arr = ''
290 388 
      for (let i = 0; i < this.modalData.length; i++) {
291 389 
        arr = arr + (this.modalData[i].lng + ' ' + this.modalData[i].lat + ',')
 
@ -293,45 +391,66 @@ export default {
293 391 
      arr = arr + (this.modalData[0].lng + ' ' + this.modalData[0].lat)
294 392 
      var params = new FormData()
295 393 
      if (this.update) {
296 
        params.append('data', JSON.stringify({
394 
        params.append(
395 
          'data',
396 
          JSON.stringify({
297 397 
            mapTagName: this.markName,
298 398 
            mapTagType: this.markType,
399 
            residenceTimeLength: this.residenceTimeLength,
299 400 
            mapTagShape: arr,
300 401 
            mapTagId: this.updateId
301 
        }))
302 
        this.$test.post(services.mapTag.UPD_MAP_TAG, params
303 
      ).then(res => {
304 
        // 请求成功处理...
305 
        this.getList(this.table.pager.currentPage, this.table.pager.size, this.queryCondition.userName)
306 
        this.polygonDrawer.disable()
307 
        this.modalData = []
308 
        this.markName = ''
309 
        this.$Message.success('操作成功')
310 
        this.map.removeLayer(this.layer)
311 
        this.update = false
312 
      }).catch(res => {
313 
        // 请求失败处理...
314 
      })
402 
          })
403 
        )
404 
        this.$test
405 
          .post(services.mapTag.UPD_MAP_TAG, params)
406 
          .then((res) => {
407 
            // 请求成功处理...
408 
            this.getList(
409 
              this.table.pager.currentPage,
410 
              this.table.pager.size,
411 
              this.queryCondition.userName
412 
            )
413 
            this.polygonDrawer.disable()
414 
            this.modalData = []
415 
            this.markName = ''
416 
            this.$Message.success('操作成功')
417 
            this.map.removeLayer(this.layer)
418 
            this.update = false
419 
          })
420 
          .catch((res) => {
421 
            // 请求失败处理...
422 
          })
315 423 
      } else {
316 
        params.append('data', JSON.stringify({
317 
          mapTagName: this.markName,
318 
          mapTagType: this.markType,
319 
          mapTagShape: arr
320 
        }))
321
322 
      this.update = false
323 
      this.$test.post(services.mapTag.ADD_MAP_TAG, params
324 
      ).then(res => {
325 
        // 请求成功处理...
326 
        this.$Message.success('操作成功')
327 
        this.map.removeLayer(this.layer)
328 
        this.polygonDrawer.disable()
329 
        this.modalData = []
330 
        this.markName = ''
331 
        this.getList(this.table.pager.currentPage, this.table.pager.size, this.queryCondition.userName)
332 
      }).catch(res => {
333 
        // 请求失败处理...
334 
      })
424 
        params.append(
425 
          'data',
426 
          JSON.stringify({
427 
            mapTagName: this.markName,
428 
            mapTagType: this.markType,
429 
            residenceTimeLength: this.residenceTimeLength,
430 
            mapTagShape: arr
431 
          })
432 
        )
433
434 
        this.update = false
435 
        this.$test
436 
          .post(services.mapTag.ADD_MAP_TAG, params)
437 
          .then((res) => {
438 
            // 请求成功处理...
439 
            this.$Message.success('操作成功')
440 
            this.map.removeLayer(this.layer)
441 
            this.polygonDrawer.disable()
442 
            this.modalData = []
443 
            this.markName = ''
444 
            this.residenceTimeLength = ''
445 
            this.getList(
446 
              this.table.pager.currentPage,
447 
              this.table.pager.size,
448 
              this.queryCondition.userName
449 
            )
450 
          })
451 
          .catch((res) => {
452 
            // 请求失败处理...
453 
          })
335 454 
      }
336 455 
    },
337 456 
    getTime() {
 
@ -360,46 +479,49 @@ export default {
360 479 
    },
361 480 
    handleClick(row) {
362 481 
      var params = new FormData()
363 
      params.append('data', JSON.stringify({
364 
        mapTagId: row.MAP_TAG_ID
365 
      }))
366 
      this.$test.post(services.mapTag.GET_ONE_MAP_TAG, params
367 
      ).then(res => {
368 
        // 请求成功处理...
369 
        this.modalData = []
370 
        var coverWktStr_blue = res.data.resultData.MAP_TAG_SHAPE
371 
        console.log(res.data.resultData.MAP_TAG_SHAPE)
372 
        var coverLayer_blue = new Ai.Polygon(coverWktStr_blue)
373 
        // this.map.addLayer(coverLayer_blue)
374 
        // 面设为编辑状态
375 
        coverLayer_blue.snapediting = new Ai.PolylineSnap(this.map, coverLayer_blue)
376 
        coverLayer_blue.snapediting.enable()
377 
        this.layer = coverLayer_blue
378 
        this.map.addLayer(coverLayer_blue)
379 
        this.polygonDrawer.editing(this.layer)
380 
        this.modalData = coverLayer_blue._latlngs[0]
381 
        this.polygonDrawer.disable()
382 
      }).catch(res => {
383 
        // 请求失败处理...
384 
      })
482 
      params.append(
483 
        'data',
484 
        JSON.stringify({
485 
          mapTagId: row.MAP_TAG_ID
486 
        })
487 
      )
488 
      this.$test
489 
        .post(services.mapTag.GET_ONE_MAP_TAG, params)
490 
        .then((res) => {
491 
          // 请求成功处理...
492 
          this.modalData = []
493 
          var coverWktStr_blue = res.data.resultData.MAP_TAG_SHAPE
494 
          console.log(res.data.resultData.MAP_TAG_SHAPE)
495 
          var coverLayer_blue = new Ai.Polygon(coverWktStr_blue)
496 
          // this.map.addLayer(coverLayer_blue)
497 
          // 面设为编辑状态
498 
          coverLayer_blue.snapediting = new Ai.PolylineSnap(
499 
            this.map,
500 
            coverLayer_blue
501 
          )
502 
          coverLayer_blue.snapediting.enable()
503 
          this.layer = coverLayer_blue
504 
          this.map.addLayer(coverLayer_blue)
505 
          this.polygonDrawer.editing(this.layer)
506 
          this.modalData = coverLayer_blue._latlngs[0]
507 
          this.polygonDrawer.disable()
508 
        })
509 
        .catch((res) => {
510 
          // 请求失败处理...
511 
        })
385 512 
      this.markName = row.MAP_TAG_NAME
386 513 
      this.markType = parseInt(row.MAP_TAG_TYPE)
387 514 
      this.updateId = row.MAP_TAG_ID
515 
      this.residenceTimeLength = row.RESIDENCE_TIME_LENGTH
388 516 
      this.addMark = true
389 517 
      this.update = true
390 518 
      this.polygonDrawer.enable()
391 519 
    },
392 520 
    downloadTemplate() {
393 521 
      // 1. 准备js数组
394 
      const arr = [
395 
        ['序号', '经度', '纬度']
396 
      ]
522 
      const arr = [['序号', '经度', '纬度']]
397 523 
      for (let i = 0; i < this.modalData.length; i++) {
398 
        let g = [
399 
          i + 1,
400 
          this.modalData[i].lng + '',
401 
          this.modalData[i].lat + ''
402 
        ]
524 
        let g = [i + 1, this.modalData[i].lng + '', this.modalData[i].lat + '']
403 525 
        console.log(g)
404 526 
        arr.push(g)
405 527 
      }
 
@ -409,7 +531,7 @@ export default {
409 531 
      // 先组装wookbook数据格式
410 532 
      let workbook = {
411 533 
        SheetNames: ['test'], // 总表名
412 
        Sheets: {test: sheet} // test是表名
534 
        Sheets: { test: sheet } // test是表名
413 535 
      }
414 536 
      // 下载表格
415 537 
      XLSX.writeFile(workbook, '新增标记模板' + this.getTime() + '.xlsx')
 
@ -424,14 +546,16 @@ export default {
424 546 
      var f = files[0]
425 547 
      var reader = new FileReader()
426 548 
      // debugger
427 
      reader.onload = function(e) {
549 
      reader.onload = function (e) {
428 550 
        // debugger
429 551 
        var data = new Uint8Array(e.target.result)
430 
        var workbook = XLSX.read(data, {type: 'array'})
552 
        var workbook = XLSX.read(data, { type: 'array' })
431 553 
        /* DO SOMETHING WITH workbook HERE */
432 554 
        // console.log(workbook)
433 555 
        /* 其中workbook.SheetNames[0]是表名下对应的数据 sheet数据 */
434 
        let arr = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]])
556 
        let arr = XLSX.utils.sheet_to_json(
557 
          workbook.Sheets[workbook.SheetNames[0]]
558 
        )
435 559 
        that.modalData = []
436 560 
        var coverWktStr_blue = 'POLYGON (( '
437 561 
        for (let i = 0; i < arr.length; i++) {
 
@ -441,15 +565,26 @@ export default {
441 565 
          })
442 566 
          coverWktStr_blue += arr[i]['经度'] + ' ' + arr[i]['纬度'] + ','
443 567 
        }
444 
        that.map.setView([parseFloat(arr[0]['纬度']), parseFloat(arr[0]['经度'])], 5)// 地图定位
568 
        that.map.setView(
569 
          [parseFloat(arr[0]['纬度']), parseFloat(arr[0]['经度'])],
570 
          5
571 
        ) // 地图定位
445 572 
        // that.map.center =  []
446 573 
        // debugger
447 
        coverWktStr_blue = coverWktStr_blue.substring(0, coverWktStr_blue.length - 1)
574 
        coverWktStr_blue = coverWktStr_blue.substring(
575 
          0,
576 
          coverWktStr_blue.length - 1
577 
        )
448 578 
        coverWktStr_blue += '))'
449 
        var coverLayer_blue = new Ai.Polygon(coverWktStr_blue, {color: 'red'})
579 
        var coverLayer_blue = new Ai.Polygon(coverWktStr_blue, {
580 
          color: 'red'
581 
        })
450 582 
        that.map.addLayer(coverLayer_blue)
451 583 
        // 面设为编辑状态
452 
        coverLayer_blue.snapediting = new Ai.PolylineSnap(that.map, coverLayer_blue)
584 
        coverLayer_blue.snapediting = new Ai.PolylineSnap(
585 
          that.map,
586 
          coverLayer_blue
587 
        )
453 588 
        coverLayer_blue.snapediting.enable()
454 589 
        that.layer = coverLayer_blue
455 590 
        that.map.addLayer(coverLayer_blue)
 
@ -466,19 +601,28 @@ export default {
466 601 
        content: '删除后不可恢复,确认删除吗?',
467 602 
        ok: function () {
468 603 
          var params = new FormData()
469 
          params.append('data', JSON.stringify({
470 
            mapTagId: row.MAP_TAG_ID
471 
          }))
604 
          params.append(
605 
            'data',
606 
            JSON.stringify({
607 
              mapTagId: row.MAP_TAG_ID
608 
            })
609 
          )
472 610 
          // debugger
473 
          this.$test.post(services.mapTag.DEL_MAP_TAG, params
474 
          ).then(res => {
475 
            // 请求成功处理...
476 
            // debugger
477 
            this.$Message.success('操作成功')
478 
            that.getList(that.table.pager.currentPage, that.table.pager.size, that.queryCondition.userName)
479 
          }).catch(res => {
480 
            // 请求失败处理...
481 
          })
611 
          this.$test
612 
            .post(services.mapTag.DEL_MAP_TAG, params)
613 
            .then((res) => {
614 
              // 请求成功处理...
615 
              // debugger
616 
              this.$Message.success('操作成功')
617 
              that.getList(
618 
                that.table.pager.currentPage,
619 
                that.table.pager.size,
620 
                that.queryCondition.userName
621 
              )
622 
            })
623 
            .catch((res) => {
624 
              // 请求失败处理...
625 
            })
482 626 
        }
483 627 
      }
484 628 
      this.$Confirm.confirm(confirm)

+ 2 - 2
ebc-middle-platform/src/store.js
Просмотреть файл 

@ -78,7 +78,7 @@ const store = new Vuex.Store({
78 78 
    setTitle(state, newTitle) {
79 79 
      state.currentTitle = newTitle || ''
80 80 
    },
81 
    setGisToken(state, token){
81 
    setGisToken(state, token) {
82 82 
      state.gistoken = token
83 83 
    }
84 84 
  },
 
@ -106,7 +106,7 @@ const store = new Vuex.Store({
106 106 
        return 'EN'
107 107 
      }
108 108 
    },
109 
    getGisToken(state){
109 
    getGisToken(state) {
110 110 
      return state.gistoken
111 111 
    }
112 112 
  },

BIN
ebc-middle-platform/static/images/Alarm.png
Просмотреть файл


BIN
ebc-middle-platform/static/images/normalworker.png
Просмотреть файл


BIN
ebc-middle-platform/static/images/offlineworker.png
Просмотреть файл


ebc-middle-platform/static/images/worker(1).png → ebc-middle-platform/static/images/outlineworker.png
Просмотреть файл


ebc-middle-platform/static/images/worker.png → ebc-middle-platform/static/images/sosworker.png
Просмотреть файл


BIN
ebc-middle-platform/static/images/升压站画面.png
Просмотреть файл


BIN
ebc-middle-platform/static/images/船舶.png
Просмотреть файл


BIN
ebc-middle-platform/static/images/风机.png
Просмотреть файл


common-ui - Nuosi Git Service
Home Explore Help
Sign In
liuyang50
/
common-ui
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 20 Releases 0 Wiki

AIoT前端公共UI

Tree: e9a65b045a
Branches Tags
common-ui
/
packages
/
slot-package
/
CheckGroupSlot.vue

CheckGroupSlot.vue 1.5KB
History Raw 

    <!-- eslint-disable vue/no-mutating-props -->
<template>
  <el-checkbox
    v-if="isCheckAll"
    v-model="checkAll"
    :indeterminate="isIndeterminate"
    @change="handleCheckAllChange"
  >
    {{ checkAllLabel }}
  </el-checkbox>
  <el-checkbox-group v-model="checkeds">
    <el-checkbox
      v-for="(option, index) in options"
      :key="index"
      :label="option?.['value']"
    >
      {{ option?.['label'] }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const emits = defineEmits(['changeValues']);

// const checked = ref<any>([]);
const props = defineProps({
  options: {
    type: Array<any>,
    default: () => []
  },
  checkAllLabel: {
    type: String,
    default: () => '全选'
  },
  // 是否有全选反选选项
  isCheckAll: {
    type: Boolean,
    default: () => false
  },
  checked: {
    type: Array<any>,
    default: () => []
  }
});

const checkeds = ref<any>(props.checked);
const isIndeterminate = ref(false);
const checkAll = ref<any>(false);

function getAllValue() {
  const all = <any>[];
  props.options.forEach((item: any) => all.push(item.value));
  return all;
}

// 全选/全不选
function handleCheckAllChange(bol: any): void {
  checkeds.value = bol ? getAllValue() : [];
  isIndeterminate.value = false;
}

watch(
  checkeds.value,
  () => {
    emits('changeValues', checkeds.value);
  },
  { deep: true }
);
</script>

<script lang="ts">
export default {
  name: 'CommonCheckGroup'
};
</script>

<style scoped lang="scss"></style>