BUG 28556 28553

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,18 +37,19 @@
       </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>
 
 <script>
-  import { mapState } from 'vuex'
+import {mapState} from 'vuex'
-  import DeviceSlider from "../components/deviceSlider";
+import DeviceSlider from "../components/deviceSlider";
-  import LocateDialog from "../components/locateDialog";
+import LocateDialog from "../components/locateDialog";
-  import AiMonitor from "../../../../../dvui/components/AiMonitor/AiMonitor";
+import AiMonitor from "../../../../../dvui/components/AiMonitor/AiMonitor";
 
-  export default {
+export default {
   name: "AppMonitorManage",
   components: {LocateDialog, DeviceSlider, AiMonitor},
   label: "监控实况",
@@ -91,7 +93,7 @@
     }
   },
 
-    created () {
+  created() {
     this.selected.areaId = this.user.info.areaId
     this.disabledLevel = this.user.info.areaList.length - 1
   },
@@ -115,13 +117,13 @@
       }
     },
 
-      onChange (e) {
+    onChange(e) {
       if (e === 1 && this.monitors.length) {
         this.monitors = [this.monitors[0]]
       }
     },
 
-      removeMonitor (i) {
+    removeMonitor(i) {
       this.monitors.splice(i, 1)
     },
 
@@ -149,7 +151,7 @@
       })
     },
     renderTreeItem: function (h, {node, data}) {
-        let show = data.deviceStatus==1 ? 'show' : ''
+      let show = data.deviceStatus == 1 ? 'show' : ''
       if (node.isLeaf) {
         return (
             <div class="flexRow">
@@ -210,7 +212,7 @@
   beforeDestroy() {
     this.monitors = []
   }
-  }
+}
 </script>
 
 <style lang="scss" scoped>

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">
@@ -122,7 +123,7 @@ export default {
       })
     },
 
-    handleTreeCommand (e, node) {
+    handleTreeCommand(e, node) {
       this.$emit('treeCommand', {
         type: e,
         node
@@ -155,7 +156,7 @@ export default {
       this.$refs.deviceTree?.filter(this.search.name)
     },
 
-    onChange () {
+    onChange() {
       this.$refs.deviceTree?.filter(this.search.name)
     }
   },
@@ -164,7 +165,7 @@ export default {
     this.getDevices()
   },
 
-  mounted () {
+  mounted() {
     document.querySelector('html').addEventListener('click', this.bindEvent)
   }
 }
@@ -192,14 +193,17 @@ export default {
       width: fit-content;
       min-width: 100%;
     }
+
     &::-webkit-scrollbar {
-      width : 10px;
+      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;

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() {
+    initMap(count = 0) {
-      AMapLoader.load({
+      let {map, TMap} = this
-        key: "b553334ba34f7ac3cd09df9bc8b539dc",
+      if (map) {
-        version: '2.0',
+        if (!!this.latlng?.lat) {
-        plugins: ['AMap.PlaceSearch', 'AMap.Marker', 'AMap.Geolocation'],
+          let position = new TMap.LatLng(this.latlng.lat, this.latlng.lng)
-      }).then(AMap => {
+          map.setCenter(position)
-        this.AMap = AMap
+          this.selected.marker = new TMap.MultiMarker({map, geometries: [{position}]})
-        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)
         }
-        this.poi = new AMap.PlaceSearch().on('complete', ({poiList}) => {
+        map.on('click', res => {
-          this.map.clearMap()
+          let {poi, latLng: location} = res, name = poi?.name || ""
-          if (poiList?.length > 0) {
+          this.selected.marker?.setMap(null)
-            poiList?.pois?.map(e => {
+          this.selected = {location, name}
-              let marker = new AMap.Marker({
+          this.selected.marker = new TMap.MultiMarker({map, geometries: [{position: location}]})
-                position: e.location,
-              }).on('click', () => this.selected = e)
-              this.map.add(marker)
         })
       } else {
-            let marker = new AMap.Marker({
+        if (count < 5) {
-              position: this.selected.location,
+          count++
-            })
+          setTimeout(() => this.initMap(count), 500)
-            this.map.add(marker)
+        } else {
+          console.error("地图渲染失败")
+        }
       }
-        })
-        this.geo = new AMap.Geolocation({
-          enableHighAccuracy: true,//是否使用高精度定位
-          zoomToAccuracy: true//定位成功后是否自动调整地图视野到定位点
-        })
-        this.map.addControl(this.geo)
-      })
     },
-    handleSearch() {
+    handleSearch(keyword, cb) {
-      if (this.search) {
+      let {TMap} = this
-        this.poi.searchNearBy(this.search, this.map.getCenter(), 50000)
+      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>

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: {
           //地址重写