新增图层

src/components/MapContainer/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="map-container">
+  <div class="map-container1">
     <div id="map-container" ref="mapContainer">
       <div class="search" v-if="showSearch">
         <div class="searchText">
@@ -12,7 +12,7 @@
     </div>
   </div>
 
-  <Board ref="boardRef" />
+  <modal ref="modalRef" />
   <DevInfo ref="devRef"></DevInfo>
 </template>
 
@@ -22,8 +22,9 @@ import AMapLoader from '@amap/amap-jsapi-loader';
 import { Scene, PointLayer, RasterLayer, LineLayer } from '@antv/l7';
 import { Map } from '@antv/l7-maps';
 import { useRouter } from 'vue-router';
+import modal from '@/views/components/modal.vue';
 const searchValue = ref();
-const boardRef = ref();
+const modalRef = ref();
 const devRef = ref();
 const router = useRouter();
 import {
@@ -212,6 +213,7 @@ const initL7Map = async () => {
       warnLayer.on('click', e => {
         // console.log('事件图层', e);
         // emit('showModal');
+        modalRef.value.open = true;
       });
       layerInstances['warnLayer'] = warnLayer;
     }
@@ -307,6 +309,7 @@ const initL7Map = async () => {
 
 const layerInstances = reactive<Record<string, any>>({});
 
+
 // 暴露图层控制方法给父组件
 defineExpose({
   setLayerVisible: (layerName: string, visible: boolean) => {
@@ -339,7 +342,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="less" scoped>
-.map-container {
+.map-container1 {
   position: absolute;
   top: -2%;
   left: 7%;

src/components/MyModal.vue

@@ -0,0 +1,133 @@
+<template>
+    <a-modal
+        class="my-modal"
+        ref="modalRef"
+        :wrap-style="{ overflow: 'hidden' }"
+        @ok="handleOk"
+        :mask="mask"
+        :width="width"
+    >
+        <slot />
+        <template #title>
+            <div ref="modalTitleRef" class="title">
+                {{ title }}
+            </div>
+        </template>
+        <template #modalRender="{ originVNode }">
+            <div :style="transformStyle">
+                <component :is="originVNode" />
+            </div>
+        </template>
+        <template #footer>
+            <slot name="footer" />
+        </template>
+    </a-modal>
+</template>
+<script lang="ts" setup>
+import { ref, computed, CSSProperties, watch, watchEffect } from 'vue';
+import { useDraggable } from '@vueuse/core';
+
+const props = defineProps({
+    allowDrag: {
+        type: Boolean,
+        default: true,
+    },
+    title: {
+        type: String,
+        default: '弹窗',
+    },
+    mask: {
+        type: Boolean,
+        default: true,
+    },
+    width: {
+        type: String || Number,
+        default: '520px',
+    },
+});
+
+const emits = defineEmits(['confirm', 'cancel']);
+
+const modalTitleRef = ref<HTMLElement>();
+
+const { x, y, isDragging } = useDraggable(modalTitleRef);
+
+const handleOk = (e: MouseEvent) => {
+    emits('confirm', e);
+};
+
+// 拖拽操作
+const startX = ref<number>(0);
+const startY = ref<number>(0);
+const startedDrag = ref(false);
+const transformX = ref(0);
+const transformY = ref(0);
+const preTransformX = ref(0);
+const preTransformY = ref(0);
+const dragRect = ref({ left: 0, right: 0, top: 0, bottom: 0 });
+watch([x, y], () => {
+    if (!startedDrag.value) {
+        startX.value = x.value;
+        startY.value = y.value;
+        const bodyRect = document.body.getBoundingClientRect();
+        const titleRect = modalTitleRef.value!.getBoundingClientRect();
+        dragRect.value.right = bodyRect.width - titleRect.width;
+        dragRect.value.bottom = bodyRect.height - titleRect.height;
+        preTransformX.value = transformX.value;
+        preTransformY.value = transformY.value;
+    }
+    startedDrag.value = true;
+});
+watch(isDragging, () => {
+    if (!isDragging) {
+        startedDrag.value = false;
+    }
+});
+
+watchEffect(() => {
+    if (startedDrag.value && props.allowDrag) {
+        transformX.value =
+            preTransformX.value +
+            Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) -
+            startX.value;
+        transformY.value =
+            preTransformY.value +
+            Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) -
+            startY.value;
+    }
+});
+const transformStyle = computed<CSSProperties>(() => {
+    return {
+        transform: `translate(${transformX.value}px, ${transformY.value}px)`,
+    };
+});
+</script>
+
+<style lang="less">
+.my-modal {
+    &.ant-modal {
+        .ant-modal-content {
+          width: 1000px;
+            background: url('@/assets/modal/model-bg.png') no-repeat 0 0/100% 100%;
+            .ant-modal-close {
+                top: 26px;
+            }
+            .ant-modal-header {
+                min-height: 50px;
+                background: url('@/assets/modal/header-bg.png') no-repeat 0 0/100% 100%;
+
+                .ant-modal-title {
+                    padding-left: 2vmin;
+                    .title {
+                      color: white;
+                        line-height: 34px;
+                        width: 100%;
+                        cursor: move;
+                        font-size: 30px;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/components/modal.vue

@@ -0,0 +1,126 @@
+<template>
+    <div>
+        <MyModal v-model:open="open" title="消防栓" @confirm="handleOk" :mask="false">
+            <div class="board-container">
+                <div class="board-base">
+                    <ul class="info">
+                        <li>
+                            <img src="@/assets/board/No.png" />
+                            <span class="label">编号</span>
+                            <span class="value">鄂A39856</span>
+                        </li>
+                        <li>
+                            <img src="@/assets/board/type.png" />
+                            <span class="label">规格型号</span>
+                            <span class="value">消防栓</span>
+                        </li>
+                        <li>
+                            <img src="@/assets/board/num.png" />
+                            <span class="label">数量</span>
+                            <span class="value">2个</span>
+                        </li>
+                        <li>
+                            <img src="@/assets/board/address.png" />
+                            <span class="label">储备地点</span>
+                            <span class="value">加油站</span>
+                        </li>
+                        <li>
+                            <img src="@/assets/board/people.png" />
+                            <span class="label">联系人</span>
+                            <span class="value">李某某</span>
+                        </li>
+                        <li>
+                            <img src="@/assets/board/phone.png" />
+                            <span class="label">电话</span>
+                            <span class="value">13789553656</span>
+                            <span class="call">拨打</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </MyModal>
+    </div>
+</template>
+
+<script lang="ts" setup name="">
+import { ref, computed, CSSProperties, watch, watchEffect } from 'vue';
+import { RadioChangeEvent } from 'ant-design-vue';
+import { ColumnType } from 'ant-design-vue/es/table';
+import MyModal from '@/components/MyModal.vue';
+
+const open = ref<boolean>(false);
+
+const handleOk = (e: MouseEvent) => {
+    console.log(e);
+    open.value = false;
+};
+
+const editRef = ref();
+
+function openEdit() {
+    editRef.value.open = true;
+}
+
+defineExpose({
+    open,
+});
+</script>
+
+<style lang="less" scoped>
+/* 修改表格样式 */
+:deep(.ant-table) {
+    font-size: 30px;
+    color: white;
+}
+
+:deep(.ant-table-thead > tr > th) {
+    color: white;
+    font-weight: bold;
+}
+
+:deep(.ant-btn-link) {
+    font-size: 30px;
+    padding: 0 4px;
+}
+
+.board-container {
+    width: 100%;
+    height: 500px;
+
+    .board-base {
+        .info {
+            padding: 15px 0 0 30px;
+            & > li {
+                width: 100%;
+                padding: 5px 0 20px 0;
+                vertical-align: middle;
+                font-size: 32px;
+                img{
+                  width: 40px;
+                  height: 40px;
+                }
+                .label {
+                  width: 30%;
+                    display: inline-block;
+                    margin-left: 10px;
+                    color: white;
+                }
+                .value {
+                     
+                    color: #56c5ff;
+                }
+                .call{
+                  color: white;
+                  height: 40px;
+                  width: 100px;
+                  background: url('@/assets/board/callBg.png') no-repeat 0 0/100% 100%;
+                }
+            }
+        }
+    }
+
+    .base-edit {
+        padding-top: 10px;
+    }
+}
+</style>

src/views/highScore/dailyMonitoring/index.vue

@@ -190,7 +190,6 @@ const handleshowModal = (e) => {
 };
 const mapRef = ref();
 const handleLayerToggle = ({ layerName, show }: { layerName: string; show: boolean; }) => {
-  console.log(`图层 ${layerName} 状态变为: ${show ? '显示' : '隐藏'}`);
   mapRef.value.setLayerVisible(layerName,show);
 };