From bc15167485769b18c9f0547a883be2cf6b8d0f31 Mon Sep 17 00:00:00 2001
From: zk <k12019@aliyun.com>
Date: Mon, 11 Dec 2023 10:19:17 +0800
Subject: [PATCH] update

---
 .../secondaryScreen/chinaMap/chinaHooks.ts    | 152 --------
 .../secondaryScreen/chinaMap/chinaMap.vue     | 362 ------------------
 .../secondaryScreen/secondMap/secondMap.vue   |  53 +++
 .../secondMapApi.ts}                          |   0
 .../secondMap/secondMapHooks.ts               |  15 +
 src/views/indexSon.vue                        |   4 +-
 6 files changed, 70 insertions(+), 516 deletions(-)
 delete mode 100644 src/components/secondaryScreen/chinaMap/chinaHooks.ts
 delete mode 100644 src/components/secondaryScreen/chinaMap/chinaMap.vue
 create mode 100644 src/components/secondaryScreen/secondMap/secondMap.vue
 rename src/components/secondaryScreen/{chinaMap/chinaMapApi.ts => secondMap/secondMapApi.ts} (100%)
 create mode 100644 src/components/secondaryScreen/secondMap/secondMapHooks.ts

diff --git a/src/components/secondaryScreen/chinaMap/chinaHooks.ts b/src/components/secondaryScreen/chinaMap/chinaHooks.ts
deleted file mode 100644
index 372d3ca..0000000
--- a/src/components/secondaryScreen/chinaMap/chinaHooks.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import { getAllList, getAmbulanceList } from '/@/components/chinaMap/chinaMapApi.ts';
-
-export enum TabType {
-    all = '', //所有资源
-    youTianYiYuan = '1', //油田医院
-    heZuoYiYuan = '2', //合作医院
-    yiLiaoDian = '3', //医疗点
-    jiuHuChe = '4', //救护车
-    zhiShengJi = '5', //直升机
-}
-
-export const tabList = [
-    {
-        name: '所有资源',
-        type: TabType.all,
-    },
-    {
-        name: '油田医院',
-        type: TabType.youTianYiYuan,
-    },
-    {
-        name: '医疗点',
-        type: TabType.yiLiaoDian,
-    },
-    {
-        name: '救护车',
-        type: TabType.jiuHuChe,
-    },
-    {
-        name: '合作医院',
-        type: TabType.heZuoYiYuan,
-    },
-    {
-        name: '地方医院',
-    },
-    {
-        name: '直升机',
-        type: TabType.zhiShengJi,
-    },
-    {
-        name: '急救路线',
-    },
-];
-
-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 aircraft = [
-    {
-        category: 3,
-        lon: '108.861377',
-        lat: '34.35965',
-        img: helicopter,
-        name: '直升机',
-    },
-    {
-        category: 3,
-        lon: '106.267358',
-        lat: '38.520079',
-        img: helicopter,
-        name: '直升机',
-    },
-    {
-        category: 3,
-        lon: '109.505282',
-        lat: '36.579381',
-        img: helicopter,
-        name: '直升机',
-    },
-    {
-        category: 3,
-        lon: '107.638372',
-        lat: '35.734218',
-        img: helicopter,
-        name: '直升机',
-    },
-];
-
-export function mapApiSwitch(type, params: any) {
-    const basicParams = {
-        lat: 34, //纬度34
-        lon: 108, //经度
-    };
-    // 全部 油田 医疗点 合作医院
-    if ([TabType.all, TabType.youTianYiYuan, TabType.yiLiaoDian, TabType.heZuoYiYuan].includes(type)) {
-        return getAllList({ ...basicParams, ...params });
-    }
-    if ([TabType.jiuHuChe].includes(type)) {
-        return getAmbulanceList({});
-    }
-}
-
-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;
-export const mapIcon4 = new URL('/@/assets/img/mapIcon4.png', import.meta.url).href;
-export const mapIcon5 = new URL('/@/assets/img/mapIcon5.png', import.meta.url).href;
-export const mapIcon6 = new URL('/@/assets/img/mapIcon6.png', import.meta.url).href;
-
-export const legend1 = new URL('/@/assets/img/legend1.png', import.meta.url).href;
-export const legend2 = new URL('/@/assets/img/legend2.png', import.meta.url).href;
-export const legend3 = new URL('/@/assets/img/legend3.png', import.meta.url).href;
-export const legend4 = new URL('/@/assets/img/legend4.png', import.meta.url).href;
-export const legend5 = new URL('/@/assets/img/legend5.png', import.meta.url).href;
-export const legend6 = new URL('/@/assets/img/legend6.png', import.meta.url).href;
-
-export const legendList = [
-    { img: legend1, text: '油田医院' },
-    { img: legend2, text: '医疗点' },
-    { img: legend3, text: '救护车' },
-    { img: legend4, text: '合作医院' },
-    { img: legend5, text: '地方医院' },
-    { img: legend6, text: '直升机' },
-];
-
-/**
- * @description 秒转小时
- * */
-export function convertSeconds(seconds: number) {
-    let hours = Math.floor(seconds / 3600);
-    let minutes = Math.floor((seconds % 3600) / 60);
-    let remainingSeconds = seconds % 60;
-    return {
-        hours: hours,
-        minutes: minutes,
-        seconds: remainingSeconds,
-    };
-}
-
-export function getTimeStr(time: number): string {
-    let str = '';
-    const { hours, minutes } = convertSeconds(time);
-    if (hours) {
-        str += hours + '小时';
-    }
-    if (minutes) {
-        str += minutes + '分钟';
-    }
-    return str;
-}
-
-export function convertMetersToKilometers(meters: number): number {
-    let kilometers = meters / 1000;
-    return Math.round(kilometers * 100) / 100;
-}
-
-export function getKmStr(distance: number): string {
-    if (!distance) return '';
-    let d = convertMetersToKilometers(distance);
-    return d >= 1 ? d + '公里' : d * 100 + '米';
-}
\ No newline at end of file
diff --git a/src/components/secondaryScreen/chinaMap/chinaMap.vue b/src/components/secondaryScreen/chinaMap/chinaMap.vue
deleted file mode 100644
index b43bd82..0000000
--- a/src/components/secondaryScreen/chinaMap/chinaMap.vue
+++ /dev/null
@@ -1,362 +0,0 @@
-<template>
-    <div class="center-map">
-        <div class="china-map-box">
-            <!--      <div class="tab-list">-->
-            <!--        <div v-for="(item, i) in list" :class="[currentIndex == i ? 'active' : '']" class="tab"-->
-            <!--             @click="changeTab(item, i)">-->
-            <!--          {{ item.name }}-->
-            <!--        </div>-->
-            <!--      </div>-->
-            <div v-show="currentIndex == list.length - 1" class="route-navigation">
-                <a-form :model="formState" layout="inline">
-                    <a-form-item class="form-item-self" label="起点">
-                        <a-input v-model:value="formState.start"></a-input>
-                    </a-form-item>
-                    <a-form-item class="form-item-self" label="终点">
-                        <a-input v-model:value="formState.end"></a-input>
-                    </a-form-item>
-                    <a-form-item>
-                        <a-button class="reset-btn" @click="removeInput">清空</a-button>
-                        <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="routeList.length" class="has-data">
-                        <div class="line-title"> {{ panelTitle }}</div>
-                        <div class="line-content">
-                            <div class="start">起点</div>
-                            <div class="line-body">
-                                <div class="line"></div>
-                                <div class="line-desc">
-                                    <p v-for="(item, i) in routeList" :key="i">{{ item }}</p>
-                                </div>
-                            </div>
-                            <div class="end">终点</div>
-                        </div>
-                    </div>
-                    <div v-show="!routeList.length" class="empty-data"> 暂无数据</div>
-                </div>
-            </div>
-            <div class="mapContainer" id="mapContainer"></div>
-            <div v-show="false" id="container"></div>
-            <div v-show="false" id="panel"></div>
-            <div class="map-legend">
-                <div v-for="(item, i) in legendList" :key="i" class="legend-item">
-                    <div><img :src="item.img" alt="" class="legend-img" /> {{ item.text }}</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script lang="ts" setup>
-    import { onMounted, ref } from 'vue';
-    import { message } from 'ant-design-vue';
-    import { Map } from '/@/assets/mapUtils/map';
-    import { tabList, legendList, getTimeStr, getKmStr, mapApiSwitch, TabType, aircraft } from '/@/components/chinaMap/chinaHooks';
-
-    const formState = ref({
-        start: '西安北站',
-        end: '',
-    });
-    const list = ref(tabList);
-    const currentIndex = ref(0);
-
-    function changeTab(item, i: number) {
-        // if (i == currentIndex.value) {
-        //     return;
-        // }
-        currentIndex.value = i;
-        // 直升机
-        if (TabType.zhiShengJi == item.type) {
-            Map.createAircraft(aircraft);
-            return;
-        }
-        getMapData(item.type, { type: item.type });
-    }
-
-    async function getMapData(type, params = {}) {
-        const { code, result } = await mapApiSwitch(type, params);
-        if (code == 200 && Array.isArray(result) && result.length > 0) {
-            Map.createOverlay(result);
-        }
-        console.log('--->data', result);
-    }
-
-    onMounted(() => {
-        console.log('reload');
-        initMap();
-        getMapData(tabList[0].type);
-    });
-
-    function initMap() {
-        Map.initMap({ el: 'mapContainer' });
-    }
-
-    const routeList = ref([]);
-    const showRoutePanel = ref(false);
-    const panelTitle = ref();
-
-    function outClick() {
-        showRoutePanel.value = false;
-    }
-
-    function setTitle({ time, distance }) {
-        let str = '全程';
-        str += getTimeStr(time);
-        str += getKmStr(distance);
-        panelTitle.value = str;
-    }
-
-    /**
-     * @desc 路线规划
-     * @param callback
-     */
-    function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
-        showRoutePanel.value = false;
-        panelTitle.value = '';
-        if (!formState.value.start) {
-            return message.warn('请输入起点');
-        }
-        if (!formState.value.end) {
-            return message.warn('请输入终点');
-        }
-        //基本地图加载
-        let map = new AMap.Map('container', {
-            resizeEnable: true,
-            center: [116.397428, 39.90923], //地图中心点
-            zoom: 13, //地图显示的缩放级别
-        });
-        //构造路线导航类
-        let driving = new AMap.Driving({
-            map: map,
-            panel: 'panel',
-        });
-        // 根据起终点名称规划驾车导航路线
-        driving.search([{ keyword: formState.value.start }, { keyword: formState.value.end }], function (status, result) {
-            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
-            if (status === 'complete') {
-                //  console.log('绘制驾车路线完成');
-            } else {
-                //  console.log('获取驾车数据失败：' + result);
-            }
-        });
-        AMap.Event.addListener(driving, 'complete', (res) => {
-            const data = JSON.parse(JSON.stringify(res));
-            if (data.info == 'OK') {
-                const { routes } = data;
-                setTitle(routes[0]);
-                let arr = [];
-                arr.push(data.originName);
-                routes[0].steps.map((item: any) => {
-                    arr.push(item.instruction);
-                });
-                arr.push(data.destinationName);
-                showRoutePanel.value = true;
-                routeList.value = arr;
-            }
-        });
-    }
-
-    function removeInput() {
-        formState.value.start = '';
-        formState.value.end = '';
-    }
-</script>
-<style lang="less" scoped>
-    .center-map {
-        flex: 1;
-        color: #fff;
-        display: flex;
-        flex-direction: column;
-        align-content: space-between;
-
-        .china-map-box {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            position: relative;
-        }
-
-        .tab-list {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-
-            .tab {
-                width: calc(100% / 8);
-                height: 40px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                color: #29f1fa;
-                background: url('/@/assets/img/tab-default.png') no-repeat;
-                background-size: 100% 100%;
-                cursor: pointer;
-                transition: all 0.3s;
-
-                &.active {
-                    color: #fff;
-                    background: url('/@/assets/img/tab-active.png') no-repeat;
-                    background-size: 100% 100%;
-                }
-            }
-        }
-
-        .route-navigation {
-            margin: 12px 0;
-            width: 100%;
-            height: 46px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #002e64;
-            border-radius: 6px;
-            position: absolute;
-            top: 40px;
-            z-index: 999;
-            transition: all 0.3s;
-
-            :deep(.form-item-self) {
-                label {
-                    color: #29f1fa;
-                }
-
-                .ant-input {
-                    width: 280px;
-                    color: #d6d9e0;
-                    background: #2a4164;
-                    border-radius: 2px 2px 2px 2px;
-                    border: 1px solid #1b7ef2;
-                }
-            }
-
-            .reset-btn {
-                width: 64px;
-                height: 32px;
-                border-radius: 5px;
-                color: #45a2ff;
-                background: #002e64;
-                border: 1px solid #45a2ff;
-            }
-
-            .search-btn {
-                margin-left: 10px;
-                width: 88px;
-                height: 32px;
-                color: #efefef;
-                background: #45a2ff;
-                border-radius: 5px;
-                border-color: #45a2ff;
-            }
-
-            .line-container {
-                position: absolute;
-                right: 0;
-                top: 54px;
-                width: 288px;
-                padding: 9px 18px;
-                min-height: 200px;
-                max-height: 473px;
-                overflow: auto;
-                background: #2a4164;
-                border-radius: 2px;
-                border: 1px solid #1b7ef2;
-
-                .line-title {
-                    margin-bottom: 9px;
-                    font-size: 14px;
-                    font-weight: 700;
-                    color: rgba(255, 255, 255, 0.8);
-                }
-
-                .line-content {
-                    font-size: 12px;
-
-                    .start {
-                        display: flex;
-                        align-items: center;
-
-                        &::before {
-                            content: '起';
-                            color: #fff;
-                            width: 20px;
-                            height: 20px;
-                            margin-right: 7px;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            border-radius: 50%;
-                            background: #1478f5;
-                        }
-                    }
-
-                    .end {
-                        display: flex;
-                        align-items: center;
-
-                        &::before {
-                            content: '终';
-                            color: #fff;
-                            width: 20px;
-                            height: 20px;
-                            margin-right: 7px;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            border-radius: 50%;
-                            background: #1478f5;
-                        }
-                    }
-
-                    .line-body {
-                        display: flex;
-                        //max-height: 370px;
-                    }
-
-                    .line {
-                        width: 1px;
-                        //max-height: 370px;
-                        background-color: #1478f5;
-                        margin: 5px 19px 5px 8px;
-                    }
-
-                    .line-sesc {
-                        flex: 1;
-                    }
-                }
-
-                .empty-data {
-                    margin-top: 30%;
-                    text-align: center;
-                }
-            }
-        }
-
-        .mapContainer {
-            flex: 1;
-            margin: 10px 0;
-            //border: 1px solid red;
-        }
-
-        .map-legend {
-            position: absolute;
-            bottom: 20px;
-            left: 0;
-            width: 200px;
-            //border: 1px solid red;
-            display: flex;
-            flex-wrap: wrap;
-
-            .legend-item {
-                width: 50%;
-                font-size: 12px;
-                font-weight: 400;
-                line-height: 30px;
-
-                .legend-img {
-                    width: 20px;
-                }
-            }
-        }
-    }
-</style>
diff --git a/src/components/secondaryScreen/secondMap/secondMap.vue b/src/components/secondaryScreen/secondMap/secondMap.vue
new file mode 100644
index 0000000..bb7f8c5
--- /dev/null
+++ b/src/components/secondaryScreen/secondMap/secondMap.vue
@@ -0,0 +1,53 @@
+<template>
+    <div class="center-map">
+        <div class="china-map-box">
+            <div class="form-container">
+                <!--                <a-select placeholder="选择单位" v-model:value="selectValue" class="type-select" :options="selectOptions">-->
+                <!--                    <a-select-option value="全部数据">全部数据</a-select-option>-->
+                <!--                </a-select>-->
+                <!--                <a-select v-model:value="selectValue" class="type-select" :options="selectOptions">-->
+                <!--                    <a-select-option value="全部数据">全部数据</a-select-option>-->
+                <!--                </a-select>-->
+            </div>
+            <div class="mapContainer" id="mapContainer"></div>
+            <div v-show="false" id="container"></div>
+            <div v-show="false" id="panel"></div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+    import { onMounted, ref } from 'vue';
+    import { message } from 'ant-design-vue';
+    import { Map } from '/@/assets/mapUtils/map';
+
+    async function getMapData(type, params = {}) {}
+
+    onMounted(() => {
+        initMap();
+    });
+
+    function initMap() {
+        Map.initMap({ el: 'mapContainer' });
+    }
+</script>
+<style lang="less" scoped>
+    .center-map {
+        flex: 1;
+        color: #fff;
+        display: flex;
+        flex-direction: column;
+        align-content: space-between;
+
+        .china-map-box {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+
+        .mapContainer {
+            flex: 1;
+            margin: 10px 0;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/secondaryScreen/chinaMap/chinaMapApi.ts b/src/components/secondaryScreen/secondMap/secondMapApi.ts
similarity index 100%
rename from src/components/secondaryScreen/chinaMap/chinaMapApi.ts
rename to src/components/secondaryScreen/secondMap/secondMapApi.ts
diff --git a/src/components/secondaryScreen/secondMap/secondMapHooks.ts b/src/components/secondaryScreen/secondMap/secondMapHooks.ts
new file mode 100644
index 0000000..a13656e
--- /dev/null
+++ b/src/components/secondaryScreen/secondMap/secondMapHooks.ts
@@ -0,0 +1,15 @@
+// export const tabList = [
+//     {
+//         name: '所有资源',
+//         type: TabType.all,
+//     },
+//     {
+//         name: '油田医院',
+//         type: TabType.youTianYiYuan,
+//     },
+//     {
+//         name: '医疗点',
+//         type: TabType.yiLiaoDian,
+//     },
+// ];
+
diff --git a/src/views/indexSon.vue b/src/views/indexSon.vue
index 6106336..c97a1c7 100644
--- a/src/views/indexSon.vue
+++ b/src/views/indexSon.vue
@@ -19,7 +19,7 @@
                 </template>
             </div>
             <div class="body-d-middle">
-                <china-map />
+                <SecondMap />
             </div>
             <div class="body-d-right">
                 <one-r />
@@ -36,7 +36,7 @@
     import OneR from '/@/components/secondaryScreen/screen-right/oneR.vue';
     import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
     import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
-    import ChinaMap from '/@/components/secondaryScreen/chinaMap/chinaMap.vue';
+    import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap.vue';
     import * as dayjs from 'dayjs';
     import router from '/@/router';
     import ItemD from '/@/components/item-d/item-d.vue';