修改

src/views/visualization/index.vue

@@ -35,12 +35,16 @@
         </div>
       </div>
     </div>
+
+    <a-modal v-model:visible="visible" :bodyStyle="{ background: 'red' }">
+      <div>1111</div>
+    </a-modal>
   </div>
   <!-- </ScaleScreen> -->
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue'
+  import { defineComponent, ref } from 'vue'
   import Map from './components/Map.vue'
   import ScaleScreen from '/@/components/ScaleScreen'
   import Fisheries from './components/Fisheries.vue'
@@ -56,8 +60,10 @@
   import QXSZ from './components/QXSZ.vue'
   import SZJCSJ from './components/SZJCSJ.vue'
   import TRJCSJ from './components/TRJCSJ.vue'
+  import { Modal } from 'ant-design-vue'
   export default defineComponent({
     components: {
+      [Modal.name]: Modal,
       Map,
       ScaleScreen,
       Fisheries,
@@ -75,14 +81,22 @@
       Head,
     },
     setup() {
+      const visible = ref<boolean>(false)
+
       function onMapChange(e) {
         console.log(e)
+        visible.value = true
       }
+
       return {
+        visible,
         onMapChange,
       }
     },
   })
 </script>
 
-<style scoped></style>
+<style scoped lang="less">
+  .cu {
+  }
+</style>