BUG 54

project/qujing/app/AppConflictMediation/components/Detail.vue

@@ -18,7 +18,7 @@
               </ai-info-item>
               <ai-info-item label="所属网格">{{ detail.girdName }}</ai-info-item>
               <ai-info-item label="事件位置" isLine>
-                <div id="map" style="width: 500px; height: 280px;"></div>
+                <ai-map class="eventMap" :map.sync="map" :lib.sync="AMap"/>
               </ai-info-item>
             </ai-wrapper>
           </template>
@@ -28,7 +28,7 @@
             <template #content>
               <el-steps direction="vertical" :active="1">
                 <el-step v-for="(item, i) in processList" :key="i"
-                    :title="item.systemExplain" :description="item.doTime">
+                         :title="item.systemExplain" :description="item.doTime">
                   <template #title>
                     <h2 class="step-title" style="font-weight: 500; font-size: 14px;">
                       {{ item.user }}
@@ -51,18 +51,18 @@
 </template>
 
 <script>
-import AMapLoader from '@amap/amap-jsapi-loader'
 import {mapState} from 'vuex'
 
 export default {
   name: 'Detail',
-  props: ['dict', 'instance', 'params'],
-
+  props: ['dict', 'instance'],
   data() {
     return {
       isLoading: true,
       detail: {},
-      processList: []
+      processList: [],
+      map: null,
+      AMap: null
     }
   },
 
@@ -71,42 +71,29 @@ export default {
   },
 
   created() {
-    this.dict.load('conflictEventStatus').then(() => {
-      this.getDetail()
-    })
+    this.dict.load('conflictEventStatus').then(() => this.getDetail())
   },
 
   methods: {
     getDetail() {
+      const {id} = this.$route.query
       this.instance.post('/app/appconflicteventinfo/queryDetailById', null, {
-        params: {id: this.params.id}
+        params: {id}
       }).then(res => {
         if (res?.data) {
           this.detail = res.data
           this.processList = res.data.processList.map(item => {
-            item.user = /\$(.+?)\$/g.exec(item.systemExplain)[1]
+            item.user = item.girdMemberName
             item.title = item.systemExplain.replace(/\$(.+?)\$/g, '')
-
+            this.RenderPosition()
             return item
           })
-
-          this.$nextTick(() => {
-            this.initMap()
-          })
-          this.isLoading = false
         }
-      }).catch(() => {
-        this.isLoading = false
-      })
+      }).finally(() => this.isLoading = false)
     },
-
-    cancel(isRefresh) {
-      this.$emit('change', {
-        type: 'list',
-        isRefresh: !!isRefresh
-      })
+    cancel() {
+      this.$router.push({})
     },
-
     onChange(e) {
       this.instance.post(`/app/appvillagerintegralrule/list?size=1000&classification=${e}&ruleStatus=1`).then(res => {
         if (res.code === 0) {
@@ -115,25 +102,17 @@ export default {
         }
       })
     },
-
-    initMap() {
-      let {lng, lat} = this.detail
-      let center = [lng, lat]
-      AMapLoader.load({
-        key: 'b553334ba34f7ac3cd09df9bc8b539dc',
-        version: '2.0'
-      }).then(AMap => {
-        let map = new AMap.Map('map', {
-          center,
-          zoom: 14
-        })
-        let marker = new AMap.Marker({
+    RenderPosition() {
+      const {AMap, map, detail: {lng, lat, address}} = this
+      this.$load(map).then(() => {
+        const marker = new AMap.Marker({
           position: new AMap.LngLat(lng, lat),
-          title: this.detail.address
+          title: address
         })
         map.add(marker)
+        map.setFitView()
       })
-    }
+    },
   }
 }
 </script>
@@ -163,27 +142,6 @@ export default {
     }
   }
 
-  .imgs {
-    font-size: 0;
-
-    img {
-      width: 108px;
-      height: 108px;
-      margin-right: 4px;
-      margin-bottom: 4px;
-      cursor: pointer;
-      user-select: none;
-
-      &:hover {
-        opacity: 0.8;
-      }
-
-      &:nth-of-type(2n) {
-        margin-right: 0;
-      }
-    }
-  }
-
   :deep( .el-step__head.is-process ) {
     color: #555;
     border-color: #555;
@@ -233,6 +191,11 @@ export default {
     }
   }
 
+  .eventMap {
+    width: 500px;
+    height: 300px;
+  }
+
   :deep( .el-card ) {
     .el-card__header {
       padding: 12px 16px;
@@ -243,10 +206,6 @@ export default {
       padding: 8px;
     }
 
-    #amap {
-      width: 466px;
-      height: 232px;
-    }
 
     .el-steps {
       margin-left: 8px;