update

2025-07-08 09:14:22 +08:00
parent aa71fd5c7e
commit 01f3339833
10 changed files with 122 additions and 31 deletions
@@ -37,7 +37,7 @@
                </div>
            </div>
            <div class="map">
-                <div style="flex: 1; overflow: hidden; margin: 0 0 10px">
+                <div style="flex: 1; overflow: hidden">
                    <div id="xianmapContainer" class="xianmapContainer"></div>
                </div>
            </div>
@@ -45,7 +45,7 @@
            <div v-show="false" id="panel"></div>
            <div class="map-legend">
                <div v-for="(item, i) in legendList" :key="i" class="legend-item">
-                    <div :style="{ color: item.color }"><img :src="item.img" alt="" class="legend-img" /> {{ item.text }}</div>
+                    <div :style="{ color: item.color }"><img :src="item.img" alt="" class="legend-img" /> {{ item.text }} </div>
                </div>
            </div>
        </div>
@@ -62,8 +62,8 @@
    </div>
 </template>
 <script setup lang="ts">
-    import { ref, onMounted } from 'vue';
-    import { tabList, legendList, infoContent } from '/@/views/indexSun/indexSun.ts';
+    import { onMounted, ref } from 'vue';
+    import { infoContent, legendList, tabList } from '/@/views/indexSun/indexSun.ts';
    import { message } from 'ant-design-vue';
    import { innerLineLight, outerLineOption } from '/@/assets/mapUtils/mapConstant.ts';
    import { Map } from '/@/assets/mapUtils/map.ts';
@@ -120,15 +120,18 @@
            }
        });
    });
+
    function setLevel() {
        //获取当前地图级别
        level.value = Map.map.getZoom();
    }
+
    function removeInput() {
        formState.value.start = '';
        formState.value.end = '';
        searchFlag.value = false;
    }
+
    function changeTab(item, i: number) {
        currentIndex.value = i;
        Map.clearActiveHospital();
@@ -150,6 +153,7 @@
            getMapData(item.type, { type: item.type });
        }
    }
+
    function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
        showRoutePanel.value = false;
        panelTitle.value = '';
@@ -197,6 +201,7 @@
            }
        });
    }
+
    async function getMapData(type, params = { type: '' }) {
        try {
            console.log(type, params, 'asghujis');
@@ -234,6 +239,7 @@
            console.warn(e);
        }
    }
+
    function closeDrivingElement() {
        Map.clearNavigationElements();
        formState.value.start = '';
@@ -241,20 +247,24 @@
        showDrivingPanel.value = false;
        emits('clearHospitalList');
    }
+
    function handleClcikDetail(res) {
        console.log(res);
    }
+
    function setTitle({ time, distance }) {
        let str = '全程';
        str += getTimeStr(time);
        str += getKmStr(distance);
        panelTitle.value = str;
    }
+
    function outClick() {
        showRoutePanel.value = false;
    }

    const currentCityCode = ref('');
+
    function logMapinfo() {
        Map.map.getCity(function (info) {
            const { citycode } = info;
@@ -264,6 +274,7 @@
            }
        });
    }
+
    function drawMarker(data: any) {
        console.log(data);
        const { lon, lat } = data;
@@ -283,17 +294,20 @@
        flex-direction: column;
        align-content: space-between;
        position: relative;
+
        .map-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
+
            .tab-list {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                font-size: 16px;
                letter-spacing: 1px;
+
                .tab {
                    width: calc(100% / 8);
                    height: 40px;
@@ -313,6 +327,7 @@
                    }
                }
            }
+
            .route-navigation {
                --fontColor: #607ddb;
                margin: 12px 0;
@@ -445,15 +460,18 @@
                    }
                }
            }
+
            .map {
                display: flex;
                flex: 1;
+
                .xianmapContainer {
                    flex: 1;
                    height: calc(100% + 22px);
                    margin: 10px 0;
                }
            }
+
            .map-legend {
                position: absolute;
                bottom: 20px;
@@ -470,6 +488,7 @@
                    margin: 5px 0;
                    color: #607ddb;
                    letter-spacing: 2px;
+
                    .legend-img {
                        width: 20px;
                        margin-right: 5px;
@@ -477,6 +496,7 @@
                }
            }
        }
+
        .center-footer {
            position: absolute;
            left: 50%;
@@ -486,17 +506,20 @@
            justify-content: center;
            margin-bottom: 10px;
            gap: 20px;
+
            > :nth-child(1) {
                background: url('/@/assets/indexSun/footerBlue.png') no-repeat;
                background-size: 100% 100%;
                color: #22e8ff;
                margin-right: 80px;
            }
+
            > :nth-child(2) {
                background: url('/@/assets/indexSun/footerGreen.png') no-repeat;
                background-size: 100% 100%;
                color: #45ffa1;
            }
+
            .count-item {
                width: 240px;
                height: 120px;
@@ -518,6 +541,7 @@
                }
            }
        }
+
        :deep(.modal-box) {
            width: 330px;
            height: 220px;
@@ -525,19 +549,24 @@
            display: flex;
            flex-direction: column;
            justify-content: space-around;
+
            .modal-item {
                display: flex;
                justify-content: space-between;
+
                .item-one {
                    width: 50%;
                }
+
                .item-two {
                    color: #00ccff;
                }
            }
+
            .modal-btn {
                display: flex;
                justify-content: center;
+
                .view-btn {
                    padding: 5px;
                    width: 60%;