From c0199b7b27837482f8bcb50f93847140ba689fd9 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Wed, 20 Sep 2023 15:06:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=BC=B9=E7=AA=97=E5=AE=8C?=
 =?UTF-8?q?=E6=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AiDvRender.vue   | 100 +++++++++++++++++++++++++++---------
 ui/packages/tools/AiMap.vue |  10 ++--
 2 files changed, 80 insertions(+), 30 deletions(-)

diff --git a/components/AiDvRender.vue b/components/AiDvRender.vue
index 1cbbe6ae..9b3ca750 100644
--- a/components/AiDvRender.vue
+++ b/components/AiDvRender.vue
@@ -7,7 +7,8 @@
         :title="data.title"
         :theme="theme"
         :border="data.border || ''">
-      <AiDvSummary v-if="data.type === 'summary'" :theme="theme" :summaryTitle="data.summaryTitle" :key="`summary${index}`" :type="data.display"
+      <AiDvSummary v-if="data.type === 'summary'" :theme="theme" :summaryTitle="data.summaryTitle"
+                   :key="`summary${index}`" :type="data.display"
                    :data="values"/>
       <AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="values"/>
       <dv-scroll-board
@@ -48,12 +49,21 @@
           :subType="data.subType"
           :data="values">
       </AiRanking>
-      <AiDvMap v-else-if="data.type === 'AiDvMap'" style="width: 100%; height: 100%" :ref="'chart' + index" :key="`AiDvMap${index}`" :theme="theme"></AiDvMap>
-      <ai-map v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId" :is3d="data.is3d==1" :is3dAround="data.is3dAround === '1'"
-              :map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib"
-              :onlyShowArea="data.limitArea==1" :satellite="data.layers=='satellite'"/>
+      <AiDvMap v-else-if="data.type === 'AiDvMap'" style="width: 100%; height: 100%" :ref="'chart' + index"
+               :key="`AiDvMap${index}`" :theme="theme"></AiDvMap>
+      <ai-map v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId" :is3d="data.is3d==1"
+              :is3dAround="data.is3dAround === '1'"
+              :map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map"
+              :lib.sync="lib"
+              :onlyShowArea="data.limitArea==1" :satellite="data.layers=='satellite'">
+        <div class="mapInfoWin" v-show="mapDialog">
+          <div class="corn" v-for="i in 4" :key="i"/>
+          <div ref="mapInfoWin"/>
+        </div>
+      </ai-map>
       <ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"/>
-      <video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"/>
+      <video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay
+             v-else-if="data.type === 'video'"/>
       <AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="data.type === 'partyOrg'" :instance="instance"/>
       <!-- <ai-sprite v-else-if="/building/.test(data.type)" v-bind="data" is3D @init="mods[data.type]"/> -->
     </ai-dv-panel>
@@ -93,7 +103,8 @@ export default {
       map: null,
       lib: null,
       timer: null,
-      dvTableConfig: []
+      dvTableConfig: [],
+      mapDialog: false
     }
   },
   computed: {
@@ -168,9 +179,13 @@ export default {
       let {lib: AMap, map} = this
       this.timer && clearInterval(this.timer)
       if (AMap && map) {
-        const infoWin = new AMap.InfoWindow({isCustom: true, content: ""})
         map.clearMap()
-        map.on('click', () => infoWin.close())
+        const center = map.getCenter()
+        map.on('click', () => {
+          map.setZoomAndCenter(11, center)
+          map.setPitch(0)
+          this.mapDialog = false
+        })
         this.values.filter(e => e.lng).map((e) => {
           const {icon = "https://cdn.cunwuyun.cn/dvcp/h5/Location2.png"} = e
           return new AMap.Marker({
@@ -181,16 +196,15 @@ export default {
                       </div>`,
             position: [e.lng, e.lat]
           }).on('click', () => {
-            if (!!e.openWin || e.infoWindowHtml) {
-              map.clearInfoWindow()
-              infoWin.setContent(e.infoWindowHtml ? `<div class="mapInfoWin">${e.infoWindowHtml}</div>` :
-                  [`<div class="infoWin">`, `<b>${e.label}</b>`, '</div>'].join('')
-              )
-              infoWin.open(map, [e.lng, e.lat])
-            }
+            this.mapDialog = true
+            this.$nextTick(() => {
+              this.$refs.mapInfoWin.innerHTML = e.infoWindowHtml || [`<div class="infoWin">`, `<b>${e.label}</b>`, '</div>'].join('')
+              map.setZoomAndCenter(18, [e.lng, e.lat])
+              map.setPitch(60)
+            })
           })
         })
-        this.data.is3d && map.setPitch(65)
+        this.data.is3d > 0 && map.setPitch(65)
         if (this.data.is3dAround == 1) {
           this.timer = setInterval(() => map?.setRotation(360, false, 16000))
         }
@@ -210,7 +224,7 @@ export default {
 
 <style lang="scss" scoped>
 .AiDvRender {
-  :deep( .dvScrollBoard1 ) {
+  :deep(.dvScrollBoard1 ) {
 
     .header {
       background: rgba(0, 0, 0, 0.1) !important;
@@ -252,7 +266,7 @@ export default {
   }
 
 
-  :deep( .marker ) {
+  :deep(.marker) {
     position: relative;
 
     & > img {
@@ -277,14 +291,54 @@ export default {
   }
 
   :deep(.mapInfoWin) {
+    $borderColor: #245D8E;
+    $borderCorn: url("https://cdn.cunwuyun.cn/dvcp/dv/mapDialogCorn.png");
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    transform: translate(-50%, -50%);
     padding: 16px 8px;
     max-width: 800px;
-    background-color: rgba(255, 255, 255, 0.25);
+    background-color: rgba(#0A1B3E, 0.8);
     backdrop-filter: blur(6px);
-    border: 1px solid rgba(255, 255, 255, 0.18);
-    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
+    border: 1px solid $borderColor;
+    box-shadow: 10px 10px 10px inset rgba($borderColor, .8), -10px -10px 10px inset rgba($borderColor, .8);
     border-radius: 4px;
-    color: rgba(255, 255, 255, 0.75);
+    color: white;
+
+    .corn {
+      $offset: -2px;
+      background-image: $borderCorn;
+      background-repeat: no-repeat;
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      background-size: 100% 100%;
+
+      &:nth-of-type(1) {
+        left: $offset;
+        top: $offset;
+        transform: rotate(-90deg);
+      }
+
+      &:nth-of-type(2) {
+        right: $offset;
+        top: $offset;
+        transform: none;
+      }
+
+      &:nth-of-type(3) {
+        right: $offset;
+        bottom: $offset;
+        transform: rotate(90deg);
+      }
+
+      &:nth-of-type(4) {
+        left: $offset;
+        bottom: $offset;
+        transform: rotate(180deg);
+      }
+    }
   }
 }
 </style>
diff --git a/ui/packages/tools/AiMap.vue b/ui/packages/tools/AiMap.vue
index 6ca450cd..1ef241e3 100644
--- a/ui/packages/tools/AiMap.vue
+++ b/ui/packages/tools/AiMap.vue
@@ -2,6 +2,7 @@
   <section class="AiMap" :class="{mask}">
     <div ref="amap" class="map"/>
     <div v-if="mask" class="mask"/>
+    <slot/>
   </section>
 </template>
 
@@ -25,11 +26,6 @@ export default {
     onlyShowArea: Boolean,
     satellite: Boolean
   },
-  computed: {
-    viewMode() {
-      return this.is3d ? '3D' : '2D'
-    }
-  },
   data() {
     return {
       amap: null,
@@ -46,7 +42,7 @@ export default {
   },
   methods: {
     initMap(c = 0) {
-      let {plugins, viewMode, mapStyle} = this
+      let {plugins, mapStyle} = this
       AMapLoader.load({
         key: '54a02a43d9828a8f9cd4f26fe281e74e',
         version: '2.0',
@@ -58,7 +54,7 @@ export default {
         if (this.$refs.amap) {
           this.amap = new AMap.Map(this.$refs.amap, {
             mapStyle,
-            viewMode,
+            viewMode: "3D",
             terrain: true,
             resizeEnable: true,
             skyColor: "#082243",