update 添加图标 完善地图功能

package.json

@@ -13,6 +13,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "axios": "^1.6.2",
     "dayjs": "^1.11.10",
+    "mitt": "^3.0.1",
     "path": "^0.12.7",
     "prettier": "^3.1.0",
     "vue": "^3.3.4",

src/assets/less/index.less

@@ -98,9 +98,34 @@
   background-color: rgba(30, 115, 194, 0.3);
 }
 
+//直升机
 .helicopter {
   width: 60px;
-  height: 60px;
+  height: 37px;
   background: url("../img/helicopter.png") no-repeat;
   background-size: 100% 100%;
+  margin-bottom: 4px;
+}
+
+//高德信息弹窗
+.amap-info-contentContainer {
+  .amap-content-body {
+    background: #00152B;
+    border: 1px solid #129BFF;
+
+    .amap-lib-infowindow {
+      background: #00152B;
+
+      .amap-lib-infowindow-title {
+        color: #fff;
+        border-bottom: 1px solid #129BFF;
+        padding: 4px 0;
+      }
+
+      .amap-lib-infowindow-content {
+        color: #fff;
+        padding: 4px 0;
+      }
+    }
+  }
 }

src/assets/mapUtils/commonFun.ts

@@ -6,7 +6,7 @@ import { mapIcon1, mapIcon2, mapIcon3, mapIcon4 } from '/@/components/chinaMap/c
 export function createIcon({ icon, iconSize, imageSize }) {
     return new AMap.Icon({
         // 图标尺寸
-        size: new AMap.Size(21, 44),
+        size: new AMap.Size(...iconSize),
         // 图标的取图地址
         image: icon,
         // 图标所用图片大小
@@ -19,8 +19,8 @@ export function createIcon({ icon, iconSize, imageSize }) {
  * @type 1:油田医院，2:合作医院，3:医疗点
  */
 export function typeToIcon(type: string) {
-    const iconSize = [21, 44];
+    const iconSize = [18, 44];
-    const imageSize = [21, 44];
+    const imageSize = [18, 44];
     if (type == '1') {
         return createIcon({ icon: mapIcon1, iconSize, imageSize });
     }
@@ -33,4 +33,27 @@ export function typeToIcon(type: string) {
     if (type == '4') {
         return createIcon({ icon: mapIcon3, iconSize, imageSize });
     }
+}
+
+/**
+ *
+ */
+export function createCircle(option) {
+    const { lon, lat } = option;
+    return new AMap.Circle({
+        center: [lon, lat],
+        radius: 100000, //半径
+        borderWeight: 3,
+        strokeColor: '#FF33FF',
+        strokeOpacity: 1,
+        // strokeWeight: 6,
+        strokeOpacity: 0.2,
+        fillOpacity: 0.4,
+        strokeStyle: 'dashed',
+        strokeDasharray: [10, 10],
+        // 线样式还支持 'dashed'
+        fillColor: '#1791fc',
+        zIndex: 50,
+        ...option,
+    });
 }

src/assets/mapUtils/map.ts

@@ -1,19 +1,27 @@
 import china from '/@/assets/lngLat/china.ts';
 import chinaInner from '/@/assets/lngLat/chinaInner.ts';
-import { typeToIcon } from '/@/assets/mapUtils/commonFun.ts';
+import { createCircle, createIcon, typeToIcon } from '/@/assets/mapUtils/commonFun.ts';
-import { helicopter, mapbg } from '/@/components/chinaMap/chinaHooks.ts';
+import { aircraftContent, alarmIcon } from '/@/components/chinaMap/chinaHooks.ts';
 
 export const defaultOption = {
     center: [106.3, 37.87], //地图中心点
     zoom: 4.3, //地图显示的缩放级别
     mapStyle: 'darkblue', //地图样式
 };
-export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON', 'AMap.MarkerCluster'];
+export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON', 'AMap.MarkerCluster', 'AMap.PlaceSearch'];
 export const Map = {
     map: null,
     overlayGroup: null, // 地图中marker
-    aircraftGroup: null, //直升机marker
+    circleGroup: null, //直升机背景圆
-    cluster: null,
+    cluster: null, //直升机marker点聚合图层
+    airMarkerList: [], //直升机markerList
+    placeSearch: null, //地点查询
+    marker: null, // 健康终端报警
+    /**
+     * @desc 地图舒适化
+     * @param el dom元素 id选择器
+     * @param option 地图配置
+     */
     initMap({ el, option }) {
         const { zoom, center, mapStyle } = { ...defaultOption, ...option };
         //基本地图加载
@@ -29,7 +37,9 @@ export const Map = {
             this.drawOutLine();
         });
     },
-    // 中国外层边界线
+    /**
+     * @desc 中国外层边界线
+     */
     drawOutLine() {
         let geojson = new AMap.GeoJSON({
             geoJSON: china,
@@ -47,7 +57,9 @@ export const Map = {
         });
         this.map.add(geojson);
     },
-    // 中国内层边界线
+    /**
+     * @desc 中国内层边界线
+     */
     drawInnerLine() {
         let geojson = new AMap.GeoJSON({
             geoJSON: chinaInner,
@@ -61,10 +73,25 @@ export const Map = {
         });
         this.map.add(geojson);
     },
-    // 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
+    // 清空当前地图上除了边界线的覆盖物
-    createOverlay(result) {
+    removeOverlayGroup() {
         this.clearAircraft();
         this.clearOverlay();
+        this.clearAirRange();
+        if (this.airMarkerList.length > 0) {
+            for (let i = 0; i < this.airMarkerList.length; i++) {
+                this.airMarkerList[i].setMap(null);
+            }
+        }
+        // this.map.remove(this.airMarkerList);
+    },
+    //
+    /**
+     * @desc 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
+     * @param result
+     */
+    createOverlay(result) {
+        this.removeOverlayGroup();
         this.overlayGroup = new AMap.OverlayGroup();
         for (let i = 0; i < result.length; i++) {
             let { type, lon, lat } = result[i];
@@ -100,130 +127,125 @@ export const Map = {
     clearOverlay() {
         if (this.overlayGroup) {
             this.map.remove(this.overlayGroup);
+            this.overlayGroup.setMap(null);
             this.overlayGroup = null;
         }
     },
 
-    //创建直升机marker
+    /**
+     * @desc 创建直升机marker
+     * @param result
+     */
     createAircraft(result) {
-        this.clearAircraft();
+        this.removeOverlayGroup();
-        this.clearOverlay();
+        this.clearActiveHospital();
-        // this.aircraftGroup = new AMap.OverlayGroup();
         if (!Array.isArray(result) && result.length == 0) return;
-        const content = `
+        this.createAirRange(result);
-       <div style="
-       display: flex;
-       justify-content: center;
-       align-items: center;
-       ">
-        <div
- 		     style="width:156px;height: 52px;text-align:center; !important;">
- 		<div style="display: flex;
-       justify-content: center;">
- 		    <div class="helicopter"></div>
-        </div>
-        <div style='z-index:999;background-color:#0A8B18;height:auto; '>
-            <h5 style="overflow: hidden;font-size:18px;color:#fff;white-space: nowrap;height:26px;    line-height: 26px;padding:2px 4px;">
-            4009-120-999
-            </h5>
-        </div>
-</div>
-        `;
-        const markers = [];
-        for (let i = 0; i < result.length; i++) {
-            let { lon, lat } = result[i];
-            const marker = new AMap.Marker({
-                // 点的坐标
-                position: [lon, lat],
-                //启用点击事件 如果需要点击事件，必须开启
-                clickable: true,
-                title: `4009-120-999`,
-                content: content,
-                offset: new AMap.Pixel(-16, -30),
-            });
-            markers.push(marker);
-        }
-
-        // //将组 挂载到地图上
-        // this.aircraftGroup.setMap(this.map);
-        // //将需要批量控制的点放到一个组中，通过控制组，就可以操作组内所有所有覆盖物
-        // this.aircraftGroup.addOverlay(markers);
-
-        if (this.cluster) {
-            // this.cluster.setMap(null);
-            this.map.remove(this.cluster);
-            // this.cluster = null;
-            this.cluster.setMap(null);
-        }
-        //使用renderCluserMarker属性实现聚合点的完全自定义绘制
-        let sts = [
-            {
-                url: mapbg,
-                size: new AMap.Size(32, 32),
-                offset: new AMap.Pixel(-16, -30),
-                textColor: '#fff',
-                textSize: 20,
-            },
-        ];
         let that = this;
-        let arr = result.map((item) => ({ weight: 4, lnglat: [item.lon, item.lat] }));
+        let arr = result.map((item) => ({ weight: 4, lnglat: [item.lon, item.lat], params: item.name }));
         let count = 4;
         this.cluster = new AMap.MarkerClusterer(
             that.map, // 地图实例
             arr,
             {
                 renderMarker: (context) => {
-                    var factor = Math.pow(context.count / count, 1 / 18);
+                    let factor = Math.pow(context.count / count, 1 / 18);
-                    var div = document.createElement('div');
+                    let div = document.createElement('div');
-                    var Hue = 180 - factor * 180;
+                    div.className = 'render-air';
-                    var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
+                    let Hue = 180 - factor * 180;
-                    var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
+                    let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
-                    var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
-                    var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
-                    var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
                     div.style.width = div.style.height = size + 'px';
-                    div.innerHTML = content || context.count;
+                    div.innerHTML = aircraftContent() || context.count;
-                    div.style.lineHeight = size + 'px';
+                    div.style.color = '#fff';
-                    div.style.color = fontColor;
                     div.style.fontSize = '14px';
-                    div.style.textAlign = 'center';
                     context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
                     context.marker.setContent(div);
+                    this.airMarkerList.push(context.marker);
+                    context.marker.on('click', () => {
+                        console.log('data', context);
+                    });
                 },
             }
         );
-        console.log('xx', this.cluster);
         this.cluster.setMap(this.map);
-        this.getRange(result);
     },
     clearAircraft() {
-        if (this.aircraftGroup) {
+        if (this.cluster) {
-            this.map.remove(this.aircraftGroup);
+            this.map.remove(this.cluster);
-            this.aircraftGroup = null;
+            this.cluster = null;
         }
     },
-    getRange(list) {
+    /**
-        //绘制飞机的范围图
+     * @desc 飞机范围
-        var array = new Array(list.length);
+     * @param list
-        for (var i = 0; i < list.length; i++) {
+     */
-            var circle = new AMap.Circle({
+    createAirRange(list) {
-                center: [list[i].lon, list[i].lat],
+        this.removeOverlayGroup();
-                radius: 100000, //半径
+        this.circleGroup = new AMap.OverlayGroup();
-                borderWeight: 3,
+        for (let i = 0; i < list.length; i++) {
-                strokeColor: '#FF33FF',
+            let circle = createCircle({ lon: list[i].lon, lat: list[i].lat });
-                strokeOpacity: 1,
+            this.circleGroup.setMap(this.map);
-                strokeWeight: 6,
+            this.circleGroup.addOverlay(circle);
-                strokeOpacity: 0.2,
+        }
-                fillOpacity: 0.4,
+    },
-                strokeStyle: 'dashed',
+    clearAirRange() {
-                strokeDasharray: [10, 10],
+        if (this.circleGroup) {
-                // 线样式还支持 'dashed'
+            this.map.remove(this.circleGroup);
-                fillColor: '#1791fc',
+            this.circleGroup = null;
-                zIndex: 50,
+        }
-            });
+    },
-            circle.setMap(this.map);
+    /**
-            array.push(circle);
+     * @desc 地方医院医疗点显示
+     * @param cityCode 城市code
+     * @param keywords 搜索名称
+     */
+    createActiveHospital(cityCode: string, keywords = '医院') {
+        this.removeOverlayGroup();
+        this.clearActiveHospital();
+        if (!cityCode) return;
+        // AMap.plugin(['AMap.PlaceSearch'], () => {
+        //     //构造地点查询类
+        //
+        // });
+        this.placeSearch = new AMap.PlaceSearch({
+            pageSize: 30, // 单页显示结果条数
+            pageIndex: 1, // 页码
+            city: cityCode, // 兴趣点城市
+            citylimit: true, //是否强制限制在设置的城市内搜索
+            map: this.map, // 展现结果的地图实例
+            // panel: 'map_hospital', // 结果列表将在此容器中进行展示。
+            autoFitView: false, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+        });
+        //关键字查询
+        this.placeSearch.search(keywords);
+    },
+    clearActiveHospital() {
+        if (this.placeSearch) {
+            // debugger;
+            this.placeSearch.clear();
+            this.placeSearch = null;
+        }
+    },
+    createMarker(option) {
+        this.clearMarker();
+        let { lon, lat, zoom = 12 } = option;
+        const icon = createIcon({ icon: alarmIcon, iconSize: [36, 42], imageSize: [36, 42] });
+        this.marker = new AMap.Marker({
+            position: [lon, lat],
+            icon: icon,
+            offset: new AMap.Pixel(0, 0), //设置偏移量
+            // label: {
+            //     content: labelContent,
+            //     offset: labelOffset,
+            // },
+        });
+        this.map.add(this.marker);
+        this.map.setZoomAndCenter(zoom, [lon, lat]);
+    },
+    clearMarker() {
+        if (this.marker) {
+            this.marker.setMap(null);
+            this.marker = null;
         }
-        return array;
     },
 };

src/components/body-d-left/bodyLeftHooks.ts

@@ -1,6 +1,44 @@
 import { ref } from 'vue';
 import * as echarts from 'echarts';
 
+export function useStatistics() {
+    const statistics = ref([
+        {
+            name: '最新呼入电话',
+            value: '',
+            key: 'gross',
+        },
+        {
+            name: '最新受理电话',
+            value: '',
+            key: 'alerdyreceive',
+        },
+        {
+            name: '突发重大伤病应急',
+            value: '',
+            key: 'jqqz',
+        },
+        {
+            name: '重大伤病应急就医',
+            value: '',
+            key: 'dbjy',
+        },
+    ]);
+
+    function setStatistics(data = {}) {
+        statistics.value.forEach((item) => {
+            const { key } = item;
+            item.value = data[key];
+        });
+        console.log('fffffff', statistics.value);
+    }
+
+    return {
+        statistics,
+        setStatistics,
+    };
+}
+
 export const timeTab = [
     {
         name: '全部',

src/components/body-d-left/oneL.vue

@@ -12,9 +12,9 @@
                 >
             </div>
             <div class="server-container">
-                <div v-for="(item, index) in dataLists" :key="index" class="server-item">
+                <div v-for="(item, index) in statistics" :key="index" class="server-item">
-                    <span>{{ item?.title }}</span>
+                    <span>{{ item?.name }}</span>
-                    <span>{{ item?.gross }}</span>
+                    <span>{{ item?.value }}</span>
                 </div>
                 <a-spin :spinning="spinning" class="spin"></a-spin>
             </div>
@@ -25,10 +25,10 @@
     import { onMounted, ref } from 'vue';
     import PublicTitle from '../publicTitle.vue';
     import { list } from './left.api';
-    import { timeTab, useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import { timeTab, useSpin, useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
 
     const typeTime = ref(timeTab);
-    const dataLists = ref([]);
+    const { statistics, setStatistics } = useStatistics();
     const selectIndex = ref(0);
     const selectVal = ref('1');
     const { setSpin, spinning } = useSpin();
@@ -42,10 +42,10 @@
         try {
             const { code, result } = (await list({ condition: selectVal.value })) || {};
             setSpin(!spinning.value);
-            if (code != 200) {
+            if (code != 200 || !Array.isArray(result)) {
                 return;
             }
-            dataLists.value = result?.map((item) => ({ ...item, title: '最新呼入电话' }));
+            setStatistics(result[0]);
         } catch {
             setSpin(!spinning.value);
         }
@@ -70,10 +70,6 @@
             overflow-y: auto;
             position: relative;
 
-            > :nth-child(1) {
-                padding-top: 0 !important;
-            }
-
             .spin {
                 position: absolute;
                 left: 50%;
@@ -100,7 +96,7 @@
                 }
             }
 
-            .server-item:nth-child(2n) {
+            .server-item:nth-child(odd) {
                 background-color: #0a0a0c;
             }
         }

src/components/body-d-right/oneR.vue

@@ -4,11 +4,12 @@
         <div class="inner">
             <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
                 <div class="item" v-for="(item, i) in scrollList" :key="i">
-                    <span>{{ item?.realName }}</span>
+                    <span class="fixed-width" :title="item?.realName">{{ item?.realName }}</span>
-                    <span>{{ item?.eventType_dictText }}</span>
+                    <span class="fixed-width" :title="item?.eventType_dictText">{{ item?.eventType_dictText }}</span>
                     <div class="time-icon">
                         <span>{{ item?.warnTime }}</span>
                         <span class="terminal-icon" @click="handlePolice(item)"></span>
+                        <span class="position" @click="sendPosition(item)"></span>
                     </div>
                 </div>
             </vue3-seamless-scroll>
@@ -25,23 +26,23 @@
                 <div class="police-con">
                     <div class="con-item">
                         <span>姓名：</span>
-                        <span>{{ userInfo.name }}</span>
+                        <span>{{ userInfo?.realName }}</span>
                     </div>
                     <div class="con-item">
                         <span>二级单位：</span>
-                        <span>{{ userInfo.unit }}</span>
+                        <span>{{ userInfo?.orgName1 }}</span>
                     </div>
                     <div class="con-item">
                         <span>手机号码：</span>
-                        <span>{{ userInfo.iphone }}</span>
+                        <span>{{ userInfo?.phone }}</span>
                     </div>
                     <div class="con-item">
                         <span>异常事件：</span>
-                        <span>{{ userInfo.abnormal }}</span>
+                        <span>{{ userInfo?.eventType_dictText }}</span>
                     </div>
                     <div class="con-item">
                         <span>发生时间：</span>
-                        <span>{{ userInfo.time }}</span>
+                        <span>{{ userInfo?.warnTime }}</span>
                     </div>
                     <div class="con-item">
                         <span>发生地点：</span>
@@ -54,23 +55,24 @@
 </template>
 <script setup lang="ts">
     import { onMounted, ref } from 'vue';
+    import $bus from '/@/utils/bus.ts';
     import { columns } from '/@/components/body-d-right/bodyRightHooks.ts';
     import PublicTitle from '/@/components/publicTitle.vue';
     import Dialog from '/@/components/dialog/Dialog.vue';
     import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
     import { getMonitorList } from '/@/components/body-d-right/right.api.ts';
 
-    const classOption = {
+    const classOption = ref({
         step: 0.3, // 速度
-    };
+    });
     const open = ref<boolean>(false);
     const openInfor = ref<boolean>(false);
     const userInfo = ref({
-        name: '王苗',
+        realName: '',
-        unit: '长庆油田',
+        orgName1: '',
-        iphone: '1897263745',
+        phone: '',
-        abnormal: '体温异常',
+        eventType_dictText: '体温异常',
-        time: '2023-11-23 16:23',
+        warnTime: '2023-11-23 16:23',
         address: '陕西省西安市',
     });
 
@@ -91,12 +93,22 @@
         open.value = false;
     }
 
-    function handlePolice() {
+    /**
+     * @desc open员工信息
+     */
+    function handlePolice(item) {
+        userInfo.value = item;
+        console.log('item', item);
         openInfor.value = true;
+        classOption.value.step = 0;
     }
 
+    /**
+     * @desc close员工信息
+     */
     function handlePoliceClose() {
         openInfor.value = false;
+        classOption.value.step = 0.3;
     }
 
     onMounted(() => {
@@ -109,13 +121,20 @@
     const scrollList = ref([]);
 
     async function getScrollList() {
-        const { code, result } = await getMonitorList({});
+        const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1 });
         if (code == 200) {
-            scrollList.value = result;
+            scrollList.value = result.records;
         }
 
         console.log('dd', result);
     }
+
+    function sendPosition(item) {
+        let { lon, lat } = item;
+        if (lon && lat) {
+            $bus.emit('sendPosition', item);
+        }
+    }
 </script>
 <style scoped lang="less">
     .inner {
@@ -125,7 +144,7 @@
         justify-content: center;
 
         .scroll {
-            width: 90%;
+            width: 98%;
             height: 88%;
             overflow: hidden;
 
@@ -135,6 +154,14 @@
                 justify-content: space-between;
                 padding: 3% 0;
 
+                .fixed-width {
+                    display: inline-flex;
+                    width: 100px;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+
                 span {
                     color: #ffffff;
                     font-size: 16px;
@@ -146,11 +173,21 @@
                 }
 
                 .terminal-icon {
-                    margin-left: 20px;
+                    margin-left: 15px;
                     display: inline-block;
                     width: 18px;
                     height: 18px;
-                    background: url('../../assets/images/terminal.png') no-repeat;
+                    background: url('/@/assets/images/terminal.png') no-repeat;
+                    background-size: 100% 100%;
+                    cursor: pointer;
+                }
+
+                .position {
+                    margin-left: 5px;
+                    display: inline-block;
+                    width: 20px;
+                    height: 20px;
+                    background: url('/@/assets/img/position.png') no-repeat;
                     background-size: 100% 100%;
                     cursor: pointer;
                 }

src/components/chinaMap/chinaHooks.ts

@@ -7,6 +7,7 @@ export enum TabType {
     yiLiaoDian = '3', //医疗点
     jiuHuChe = '4', //救护车
     zhiShengJi = '5', //直升机
+    diFangYiYuan = '6', //地方医院
 }
 
 export const tabList = [
@@ -32,6 +33,7 @@ export const tabList = [
     },
     {
         name: '地方医院',
+        type: TabType.diFangYiYuan,
     },
     {
         name: '直升机',
@@ -44,6 +46,7 @@ export const tabList = [
 
 export const helicopter = new URL('/@/assets/img/helicopter.png', import.meta.url).href;
 export const mapbg = new URL('/@/assets/img/helicopter.png', import.meta.url).href;
+export const alarmIcon = new URL('/@/assets/img/alarm-icon.png', import.meta.url).href;
 
 // 直升机位置数据
 export const aircraft = [
@@ -77,6 +80,22 @@ export const aircraft = [
     },
 ];
 
+export function aircraftContent() {
+    return `
+    <div style="display: flex;justify-content: center;align-items: center;">
+        <div>
+            <div style="display: flex;justify-content: center;">
+                <div class="helicopter"></div>
+            </div>
+            <div style="z-index:999;background-color:#0A8B18;">
+                <h5 style="overflow: hidden;font-size:18px;color:#fff;white-space: nowrap;padding:0 4px;">
+                    4009-120-999
+                </h5>
+            </div>
+        </div>
+    </div>`;
+}
+
 export function mapApiSwitch(type, params: any) {
     const basicParams = {
         lat: 34, //纬度34

src/components/chinaMap/chinaMap.vue

@@ -19,7 +19,7 @@
                         <a-button class="search-btn" @click="searchRoute">路线规划</a-button>
                     </a-form-item>
                 </a-form>
-                <div class="line-container" v-show="showRoutePanel" v-click-outside="outClick">
+                <div v-show="showRoutePanel" v-click-outside="outClick" class="line-container">
                     <div v-show="routeList.length" class="has-data">
                         <div class="line-title"> {{ panelTitle }}</div>
                         <div class="line-content">
@@ -36,7 +36,9 @@
                     <div v-show="!routeList.length" class="empty-data"> 暂无数据</div>
                 </div>
             </div>
-            <div class="mapContainer" id="mapContainer"></div>
+            <div style="flex: 1; overflow: hidden; margin: 0 0 10px">
+                <div id="mapContainer" class="mapContainer"></div>
+            </div>
             <div v-show="false" id="container"></div>
             <div v-show="false" id="panel"></div>
             <div class="map-legend">
@@ -44,9 +46,10 @@
                     <div><img :src="item.img" alt="" class="legend-img" /> {{ item.text }}</div>
                 </div>
             </div>
+            <!--            <div class="level">地图层级：{{ level }}</div>-->
         </div>
         <div class="center-footer">
-            <div class="count-item">
+            <div class="count-item" @click="test">
                 <div class="num">1054</div>
                 <div class="text">累计受理</div>
             </div>
@@ -59,9 +62,16 @@
 </template>
 <script lang="ts" setup>
     import { onMounted, ref } from 'vue';
+    import $bus from '/@/utils/bus.ts';
+
     import { message } from 'ant-design-vue';
     import { Map } from '/@/assets/mapUtils/map';
-    import { tabList, legendList, getTimeStr, getKmStr, mapApiSwitch, TabType, aircraft } from '/@/components/chinaMap/chinaHooks';
+    import { aircraft, getKmStr, getTimeStr, legendList, mapApiSwitch, tabList, TabType } from '/@/components/chinaMap/chinaHooks';
+
+    function test() {
+        Map.clearActiveHospital();
+        console.log('清空了');
+    }
 
     const formState = ref({
         start: '西安北站',
@@ -74,27 +84,66 @@
         // if (i == currentIndex.value) {
         //     return;
         // }
-        currentIndex.value = i;
+
+        currentIndex.value = i; // 地方医院
+        if (TabType.diFangYiYuan == item.type) {
+            Map.clearActiveHospital();
+            Map.map.on('moveend', logMapinfo);
+            return;
+        } else {
+            Map.clearActiveHospital();
+            Map.map.off('moveend', logMapinfo);
+        }
+
         // 直升机
         if (TabType.zhiShengJi == item.type) {
             Map.createAircraft(aircraft);
             return;
         }
+
         getMapData(item.type, { type: item.type });
     }
 
-    async function getMapData(type, params = {}) {
+    function logMapinfo() {
-        const { code, result } = await mapApiSwitch(type, params);
+        let zoom = Map.map.getZoom();
-        if (code == 200 && Array.isArray(result) && result.length > 0) {
+        if (zoom > 6) {
-            Map.createOverlay(result);
+            Map.map.getCity(function (info) {
+                const { citycode } = info;
+                Map.createActiveHospital(citycode);
+            });
         }
-        console.log('--->data', result);
+    }
+
+    const level = ref(0);
+
+    function setLevel() {
+        //获取当前地图级别
+        level.value = Map.map.getZoom();
+    }
+
+    async function getMapData(type, params = {}) {
+        try {
+            const { code, result } = await mapApiSwitch(type, params);
+            if (code == 200 && Array.isArray(result) && result.length > 0) {
+                Map.createOverlay(result);
+            }
+        } catch (e) {
+            console.log('error------------------------------');
+            console.warn(e);
+        }
+        1;
+        // console.log('--->data', result);
     }
 
     onMounted(() => {
         console.log('reload');
         initMap();
         getMapData(tabList[0].type);
+        Map.map.on('moveend', setLevel);
+        Map.map.on('zoomend', setLevel);
+        $bus.on('sendPosition', ({ lon, lat }) => {
+            Map.createMarker({ lon, lat });
+        });
     });
 
     function initMap() {
@@ -221,7 +270,7 @@
             background: #002e64;
             border-radius: 6px;
             position: absolute;
-            top: 40px;
+            top: 36px;
             z-index: 999;
             transition: all 0.3s;
 
@@ -343,14 +392,15 @@
 
         .mapContainer {
             flex: 1;
+            height: calc(100% + 22px);
             margin: 10px 0;
             //border: 1px solid red;
         }
 
         .map-legend {
             position: absolute;
-            bottom: 20px;
+            bottom: 15px;
-            left: 0;
+            left: 10px;
             width: 200px;
             //border: 1px solid red;
             display: flex;
@@ -368,6 +418,14 @@
             }
         }
 
+        .level {
+            position: absolute;
+            top: 50px;
+            left: 400px;
+            font-size: 18px;
+            color: #fff;
+        }
+
         .center-footer {
             display: flex;
             justify-content: center;

src/components/dialog/Dialog.vue

@@ -7,6 +7,7 @@
 
 <script setup lang="ts">
     import { defineProps, defineEmits } from 'vue';
+
     const emit = defineEmits(['close']);
     const props = defineProps({
         width: {
@@ -19,6 +20,7 @@
             type: String,
         },
     });
+
     function handleCancel() {
         emit('close');
     }
@@ -31,32 +33,38 @@
             display: flex;
             align-items: center;
             width: 100%;
-            height: 56px;
+            height: 40px;
             background: url('../../assets/images/dialog.png') no-repeat;
             background-size: 100% 100%;
             color: #ffffff !important;
             padding-left: 2%;
         }
+
         .ant-modal-header {
             padding: 0 !important;
             padding-bottom: 0;
         }
+
         .ant-modal-header,
         .ant-modal-content {
             background-color: transparent !important;
         }
+
         .ant-modal-body {
             padding: 0 !important;
         }
+
         .ant-modal-close-x,
         .anticon {
             color: #999999 !important;
         }
+
         .ant-modal-footer {
             border-top: none !important;
         }
+
         .ant-modal-wrap {
             background-color: rgba(0, 0, 0, 0.6);
         }
     }
-</style>
+</style>

src/utils/bus.ts

@@ -0,0 +1,5 @@
+// 引入mitt插件  index.ts
+import mitt from "mitt"
+
+const $bus = mitt();
+export default $bus