BUG 28556 28553

2022-03-28 14:56:24 +08:00
parent 92dfebc1d4
commit 2611a72508
4 changed files with 248 additions and 246 deletions
--- a/project/shandong10086/apps/shandong/monitor/AppMonitorManage/AppMonitorManage.vue
+++ b/project/shandong10086/apps/shandong/monitor/AppMonitorManage/AppMonitorManage.vue
@@ -1,6 +1,7 @@
 <template>
  <section class="AppMonitorManage">
-    <device-slider :permissions="permissions" :show.sync="slider" :ins="instance" :dict="dict" @treeCommand="handleSliderOption" @select="handleSelectMonitor"
+    <device-slider :permissions="permissions" :show.sync="slider" :ins="instance" :dict="dict"
+                   @treeCommand="handleSliderOption" @select="handleSelectMonitor"
                   :render-item="renderTreeItem" ref="DeviceSlider"/>
    <div class="monitorPane">
      <div class="headerBar">
@@ -36,7 +37,8 @@
      </el-form>
    </ai-dialog>
    <locate-dialog v-model="locate" :ins="instance" :latlng="latlng" @confirm="v=>handleLocate(selected,v)"/>
-    <ai-area custom-clicker :input-clicker="false" :hideLevel="disabledLevel" v-model="selected.areaId" :instance="instance" ref="BindArea"
+    <ai-area custom-clicker :input-clicker="false" :hideLevel="disabledLevel" v-model="selected.areaId"
+             :instance="instance" ref="BindArea"
             @change="handleSubmit(selected)"/>
  </section>
 </template>
--- a/project/shandong10086/apps/shandong/monitor/components/deviceSlider.vue
+++ b/project/shandong10086/apps/shandong/monitor/components/deviceSlider.vue
@@ -24,10 +24,11 @@
      </div>
      <div title>设备列表</div>
      <div fill class="deviceList">
-          <el-tree ref="deviceTree" :render-content="renderItem" :data="treeData" :props="propsConfig" @node-click="handleNodeClick" @node-contextmenu="nodeContextmenu"
+        <el-tree ref="deviceTree" :render-content="renderItem" :data="treeData" :props="propsConfig"
+                 @node-click="handleNodeClick" @node-contextmenu="nodeContextmenu"
                 :filter-node-method="handleFilter"/>
        <ul
-              v-if="isShowMenu && menuInfo.node.type === '1'"
+            v-if="isShowMenu && menuInfo.node.type==1"
            class="el-dropdown-menu el-popper"
            :style="{top: menuInfo.y + 'px', left: menuInfo.x + 'px', position: 'fixed', zIndex: 2023}"
            x-placement="top-end">
@@ -192,14 +193,17 @@ export default {
      width: fit-content;
      min-width: 100%;
    }
+
    &::-webkit-scrollbar {
      width: 10px;
      height: 15px;
    }
+
    &::-webkit-scrollbar-thumb {
      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
      background: #535353;
    }
+
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
      background: #fff;
--- a/project/shandong10086/apps/shandong/monitor/components/locateDialog.vue
+++ b/project/shandong10086/apps/shandong/monitor/components/locateDialog.vue
@@ -3,9 +3,14 @@
    <ai-dialog :visible.sync="dialog" title="标绘" @closed="$emit('visible',false),selected={}"
               @opened="$nextTick(()=>initMap())"
               @onConfirm="handleConfirm">
-      <div id="amap" v-if="dialog"/>
+      <ai-t-map :map.sync="map" :lib.sync="TMap"/>
      <div class="poi">
-        <el-input ref="poiInput" v-model="search" size="small" clearable v-throttle="handleSearch" placeholder="请输入地点"/>
+        <el-autocomplete ref="poiInput" v-model="search" size="small" clearable :fetch-suggestions="handleSearch"
+                         placeholder="请输入地点" @select="handleSelect" :trigger-on-focus="false">
+          <template slot-scope="{item}">
+            <span style="direction: rtl" v-text="`${item.title}(${item.address})`"/>
+          </template>
+        </el-autocomplete>
      </div>
      <el-form class="selected" v-if="!!selected.location" id="result" size="mini" label-suffix="："
               label-position="left">
@@ -22,7 +27,7 @@
 </template>

 <script>
-import AMapLoader from '@amap/amap-jsapi-loader'
+import {mapState} from "vuex";

 export default {
  name: "locateDialog",
@@ -35,66 +40,54 @@ export default {
    return {
      dialog: false,
      search: "",
-      poi: null,
      map: null,
-      AMap: null,
      selected: {},
-      geo: null
+      TMap: null
    }
  },
+  computed: {
+    ...mapState(['user'])
+  },
  watch: {
    visible(v) {
      this.dialog = v
    }
  },
  methods: {
-    initMap() {
-      AMapLoader.load({
-        key: "b553334ba34f7ac3cd09df9bc8b539dc",
-        version: '2.0',
-        plugins: ['AMap.PlaceSearch', 'AMap.Marker', 'AMap.Geolocation'],
-      }).then(AMap => {
-        this.AMap = AMap
-        this.map = new AMap.Map('amap', {
-          zoom: 14,
-          center: this.latlng ? [this.latlng.lng, this.latlng.lat] : ''
-        }).on('click', res => {
-          this.map.clearMap()
-          this.selected = {location: res.lnglat}
-          this.poi?.searchNearBy('', res.lnglat, 100)
-        });
-        if (this.latlng) {
-          let marker = new AMap.Marker({
-            position: [this.latlng.lng, this.latlng.lat]
-          })
-          this.map.add(marker)
+    initMap(count = 0) {
+      let {map, TMap} = this
+      if (map) {
+        if (!!this.latlng?.lat) {
+          let position = new TMap.LatLng(this.latlng.lat, this.latlng.lng)
+          map.setCenter(position)
+          this.selected.marker = new TMap.MultiMarker({map, geometries: [{position}]})
        }
-        this.poi = new AMap.PlaceSearch().on('complete', ({poiList}) => {
-          this.map.clearMap()
-          if (poiList?.length > 0) {
-            poiList?.pois?.map(e => {
-              let marker = new AMap.Marker({
-                position: e.location,
-              }).on('click', () => this.selected = e)
-              this.map.add(marker)
+        map.on('click', res => {
+          let {poi, latLng: location} = res, name = poi?.name || ""
+          this.selected.marker?.setMap(null)
+          this.selected = {location, name}
+          this.selected.marker = new TMap.MultiMarker({map, geometries: [{position: location}]})
        })
      } else {
-            let marker = new AMap.Marker({
-              position: this.selected.location,
-            })
-            this.map.add(marker)
+        if (count < 5) {
+          count++
+          setTimeout(() => this.initMap(count), 500)
+        } else {
+          console.error("地图渲染失败")
+        }
      }
-        })
-        this.geo = new AMap.Geolocation({
-          enableHighAccuracy: true,//是否使用高精度定位
-          zoomToAccuracy: true//定位成功后是否自动调整地图视野到定位点
-        })
-        this.map.addControl(this.geo)
-      })
    },
-    handleSearch() {
-      if (this.search) {
-        this.poi.searchNearBy(this.search, this.map.getCenter(), 50000)
+    handleSearch(keyword, cb) {
+      let {TMap} = this
+      if (keyword && TMap) {
+        let poi = new TMap.service.Search({pageSize: 10})
+        poi.searchRegion({
+          keyword, radius: 5000, cityName: this.user.info?.areaId?.substring(0, 6) || ""
+        }).then(res => {
+          if (res?.data?.length > 0) {
+            cb(res.data)
+          } else this.$message.error("未查到有效地点")
+        })
      }
    },
    handleConfirm() {
@@ -103,7 +96,16 @@ export default {
      } else {
        this.$message.error('请先选择坐标位置')
      }
-
+    },
+    handleSelect(res) {
+      let {map, TMap} = this
+      if (map) {
+        let {title: name, location} = res
+        this.selected.marker?.setMap(null)
+        this.selected = {location, name}
+        this.selected.marker = new TMap.MultiMarker({map, geometries: [{position: location}]})
+        map.setCenter(location)
+      }
    }
  },
  created() {
@@ -114,6 +116,10 @@ export default {

 <style lang="scss" scoped>
 .locateDialog {
+  .color-999 {
+    color: #999;
+  }
+
  ::v-deep .el-dialog__body {
    padding: 0;
    height: 480px;
@@ -123,20 +129,6 @@ export default {
      padding: 0 !important;
    }

-    #amap {
-      width: 100%;
-      height: 480px;
-
-      .amap-logo, .amap-copyright {
-        display: none !important;
-      }
-
-      .amap-marker-label {
-        border-color: transparent;
-        box-shadow: 1px 1px 0 0 rgba(#999, .2);
-      }
-    }
-
    .poi {
      position: absolute;
      left: 10px;
@@ -144,6 +136,8 @@ export default {
      display: flex;
      height: 32px;
      flex-direction: column;
+      z-index: 202203281016;
+      width: 400px;

      div {
        flex-shrink: 0;
@@ -178,4 +172,6 @@ export default {
    }
  }
 }
+
+
 </style>
--- a/vue.config.js
+++ b/vue.config.js
@@ -64,7 +64,7 @@ module.exports = {
    proxy: {
      //设置代理,可解决跨5
      '/lan': {
-        target: 'https://sdtestweb.sdvillage.cn',
+        target: 'http://192.168.1.87:9000',
        changeOrigin: true,
        pathRewrite: {
          //地址重写