update

src/components/chinaMap/chinaHooks.ts

@@ -1,18 +1,31 @@
+import { getAllList } from '/@/components/chinaMap/chinaMapApi.ts';
+
+export enum TabType {
+    all = '', //所有资源
+    youTianYiYuan = '1', //油田医院
+    heZuoYiYuan = '2', //合作医院
+    yiLiaoDian = '3', //医疗点
+}
+
 export const tabList = [
     {
         name: '所有资源',
+        type: TabType.all,
     },
     {
         name: '油田医院',
+        type: TabType.youTianYiYuan,
     },
     {
         name: '医疗点',
+        type: TabType.yiLiaoDian,
     },
     {
         name: '救护车',
     },
     {
         name: '合作医院',
+        type: TabType.heZuoYiYuan,
     },
     {
         name: '地方医院',
@@ -24,6 +37,17 @@ export const tabList = [
         name: '急救路线',
     },
 ];
+
+export function mapApiSwitch(type: string, params: any) {
+    const basicParams = {
+        lat: 34, //纬度34
+        lon: 108, //经度
+    };
+    if ([TabType.all, TabType.yiLiaoDian, TabType.heZuoYiYuan].includes(type)) {
+        return getAllList({ ...basicParams, ...params });
+    }
+}
+
 export const mapIcon1 = new URL('/@/assets/img/mapIcon1.png', import.meta.url).href;
 export const mapIcon2 = new URL('/@/assets/img/mapIcon2.png', import.meta.url).href;
 export const mapIcon3 = new URL('/@/assets/img/mapIcon3.png', import.meta.url).href;

src/components/chinaMap/chinaMap.vue

@@ -60,9 +60,10 @@
 <script lang="ts" setup>
     import { onMounted, ref } from 'vue';
     import * as echarts from 'echarts';
-    import mapJson from '/@/components/chinaMap/json/c';
-    import { tabList, mapIcons, legendList, getTimeStr, getKmStr, createChartOption } from './chinaHooks.ts';
+    import mapJson from '/@/components/chinaMap/json/c.json';
+    import { tabList, mapIcons, legendList, getTimeStr, getKmStr, createChartOption, mapApiSwitch } from '/@/components/chinaMap/chinaHooks';
     import { message } from 'ant-design-vue';
+    import { getAllList } from '/@/components/chinaMap/chinaMapApi';
 
     const formState = ref({
         start: '西安北站',
@@ -85,7 +86,7 @@
         },
     ]);
 
-    function changeTab(i) {
+    function changeTab(i: number) {
         let x = Math.random() + 5 - Math.floor(Math.random() * 10) - i + Math.random() * 3.5;
         let y = Math.floor(Math.random() * 10) - 5 + Math.random() + i + Math.random() * 5;
         const o = {
@@ -98,38 +99,6 @@
             symbolSize: [25, 63],
             symbol: 'image://' + mapIcons[Math.floor(Math.random() * 6)], // 图片 URL
         };
-        const line = {
-            name: '线路',
-            type: 'lines',
-            coordinateSystem: 'geo',
-            zlevel: 100,
-            large: true,
-            effect: {
-                show: true,
-                constantSpeed: 30,
-                symbol: 'arrow', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
-                symbolSize: 0,
-                trailLength: 0,
-            },
-            lineStyle: {
-                normal: {
-                    color: '#0fff17',
-                    width: 2,
-                    opacity: 1.0,
-                    curveness: 0.15,
-                },
-            },
-            data: [
-                {
-                    fromName: '六安',
-                    toName: '合肥市',
-                    coords: [
-                        [116.27, 31.786],
-                        [117.37, 31.386],
-                    ],
-                },
-            ],
-        };
         icons.value = [];
         icons.value.push(o);
         // icons.value.push(line);
@@ -138,11 +107,17 @@
         initMap(myChart);
     }
 
+    async function getMapData(params) {
+        const data = await mapApiSwitch(params.type, {});
+        console.log('--->data', data);
+    }
+
     onMounted(() => {
         console.log('reload');
         let myChart = echarts.init(document.querySelector('.china-map-container'));
         echarts.registerMap('china', mapJson);
         initMap(myChart);
+        getMapData({ type: tabList[0].type });
     });
 
     function initMap(myChart) {
@@ -212,6 +187,10 @@
         panelTitle.value = str;
     }
 
+    /**
+     * @desc 路线规划
+     * @param callback
+     */
     function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
         showRoutePanel.value = false;
         panelTitle.value = '';
@@ -248,7 +227,7 @@
                 setTitle(routes[0]);
                 let arr = [];
                 arr.push(data.originName);
-                routes[0].steps.map((item) => {
+                routes[0].steps.map((item: any) => {
                     arr.push(item.instruction);
                 });
                 arr.push(data.destinationName);
@@ -490,4 +469,4 @@
             }
         }
     }
-</style>
+</style>

src/components/chinaMap/chinaMapApi.ts

@@ -0,0 +1,9 @@
+import {get} from '/@/api/request.ts';
+
+export enum Api {
+    allList = '/health-emergency/emergency/tblAmbulanceGps/getAllList',
+}
+
+// 获取所有资源
+export const getAllList = (params) => get(Api.allList, params);
+//获取救护车GPS信息