diff --git a/README.md b/README.md
index 91a2ea6..9034403 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-08-17 16:19:13
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-03-23 15:49:25
+ * @LastEditTime: 2023-03-24 18:07:06
  * @FilePath: \TelpoH5FrontendWeb\README.md
  * @description: 项目说明
 -->
@@ -271,3 +271,12 @@ feat
 - packageList，packageBuy
     - 增加 下单接口iccid参数
 
+
+
+## v1.0.32
+`2023.3.24`
+feature
+- alarmDetails
+    - 增加 涉水区域告警页面
+- amap.js
+    - 增加 高德地图js
\ No newline at end of file
diff --git a/src/config/amap.js b/src/config/amap.js
new file mode 100644
index 0000000..b96e890
--- /dev/null
+++ b/src/config/amap.js
@@ -0,0 +1,40 @@
+export default function MapLoader(isSyncLoad = false, pluginsArr = []) {
+    // plugin: 字符串数组[ 'AMap.Geocoder', ... ]
+    return new Promise((resolve, reject) => {
+        try {
+            if (window.AMap && (pluginsArr === null || pluginsArr === undefined || pluginsArr.length === 0)) {
+                resolve(window.AMap);
+            } else {
+                var script = document.createElement('script');
+                script.type = 'text/javascript';
+                script.async = !isSyncLoad;
+                script.src = 'https://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key='
+                    + '6e4a6c39ea6d18b8dd3151baa3a7c0d5'
+                    + '&plugin=AMap.BezierCurveEditor'
+                    + (pluginsArr ? ',' + pluginsArr.join(',') : '');
+                script.onerror = reject;
+                document.head.appendChild(script);
+
+                var script1 = document.createElement('script');
+                script1.type = 'text/javascript';
+                script1.async = false;
+                script1.src = 'https://webapi.amap.com/ui/1.0/main.js?v=1.0.11';
+                script1.onerror = reject;
+                if (isSyncLoad) {
+                    document.head.appendChild(script1);
+                }
+
+            }
+            window.initAMap = () => {
+                resolve(window.AMap);
+            }
+            // JSAPI key搭配静态安全密钥以明文设置, 详情见: https://lbs.amap.com/api/jsapi-v2/guide/abc/load
+            window._AMapSecurityConfig = {
+                securityJsCode:'6a421e1233cd12dd4899e373e11bb641',
+            }
+        } catch (e) {
+            console.log(e);
+        }
+
+    })
+}
\ No newline at end of file
diff --git a/src/config/models.js b/src/config/models.js
index 8c8258a..02be0a7 100644
--- a/src/config/models.js
+++ b/src/config/models.js
@@ -1,11 +1,11 @@
 /*
  * @Date: 2021-11-20 10:26:39
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-03-13 09:35:07
+ * @LastEditTime: 2023-03-24 18:07:12
  * @FilePath: \TelpoH5FrontendWeb\src\config\models.js
  * @description:
  */
-export const VERSION_MODEL = '1.0.31F'; //版本号
+export const VERSION_MODEL = '1.0.32F'; //版本号
 export const IMAGE_URL = {
     production: 'http://zfb.ssjlai.com/web/',
     test: 'http://zfb.ssjlai.com/web/',
diff --git a/src/main.js b/src/main.js
index 46e0df2..dbe4580 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 /*
  * @Date: 2022-01-19 10:08:26
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-02-26 14:40:46
+ * @LastEditTime: 2023-03-24 17:54:06
  * @FilePath: \TelpoH5FrontendWeb\src\main.js
  * @description:
  */
@@ -53,6 +53,7 @@ import {
     TabbarItem,
     Tabs,
     Toast,
+    ActionSheet,
 } from 'vant'; //按需加载vant组件
 
 Vue
@@ -94,6 +95,7 @@ Vue
 .use(TabbarItem)
 .use(Tabs)
 .use(Toast)
+.use(ActionSheet)
 
 Vue.config.productionTip = false;
 Vue.config.devtools = true;
diff --git a/src/router/index.js b/src/router/index.js
index 66c6911..88fa066 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,7 @@
 /*
  * @Date: 2023-02-25 16:34:35
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-03-14 09:33:17
+ * @LastEditTime: 2023-03-24 14:40:54
  * @FilePath: \TelpoH5FrontendWeb\src\router\index.js
  * @description:
  */
@@ -30,7 +30,7 @@ const routes = [
     { path: '/activeStatus', name: 'activeStatus', component: resolve => require(['@/views/active-status'], resolve) },
     { path: '/cardActive', name: 'cardActive', component: resolve => require(['@/views/card-active'], resolve) },
 
-
+    { path: '/alarmDetails', name: 'alarmDetails', component: resolve => require(['@/views/alarm/alarm-details'], resolve) },
 ];
 
 const router = new VueRouter({
diff --git a/src/views/alarm/alarm-details.vue b/src/views/alarm/alarm-details.vue
new file mode 100644
index 0000000..855f610
--- /dev/null
+++ b/src/views/alarm/alarm-details.vue
@@ -0,0 +1,315 @@
+<template>
+    <div class="alarm-container">
+        <van-nav-bar :title="title" left-arrow :border="true" @click-left="onNavBack"></van-nav-bar>
+        <div id="details_map" class="details_map" style="width: 100%;height: 100vh"></div>
+        <div class="notice">{{ alarm.message + '' }}</div>
+        <div class="refresh">
+            <van-icon name="replay" size="25"/>
+            <span>刷新</span>
+        </div>
+        <div class="bottom">
+            <div class="address">
+                <div class="title">
+                    <p>{{ alarm.address }}</p>
+                </div>
+                <div class="time">
+                    <span>{{ alarm.time }}</span>
+                </div>
+            </div>
+            <div class="action">
+                <van-button
+                    v-for="(item, index) in buttonList"
+                    :key="index"
+                    :type="item.type"
+                    :icon="item.icon"
+                    @click="onClick(item.name)"
+                >{{ item.text }}</van-button>
+            </div>
+        </div>
+        <!-- 外部地图app选择弹窗 -->
+        <van-action-sheet
+            class="actionSheet"
+            v-model="actionSheetShow"
+            title="即将打开以下外部APP进行导航"
+            :actions="mapAppList"
+            :closeable="false"
+            cancel-text="取消"
+            @select="onSelect"
+        />
+    </div>
+</template>
+
+<script>
+import MapLoader from "@/config/amap.js";
+export default {
+  name: 'alarm-details',
+  data(){
+   return {
+       title: '进入涉水区域警报',
+       alarm: {
+           message: '您的孩子，进入涉水区域',
+           address: '桂城街道深海路25号平洲桂城广东天波教育科技有限公司',
+           time: '2023-03-14 14:16:55',
+           glng: '113.175203274874',
+           glat: '23.0261293630648'
+       },
+       currentAddress: {
+           address: '',
+           lng: '',
+           lat: ''
+       },
+       buttonList: [
+        { name: 'goHere', text: '去这里', type: 'primary', icon: 'guide-o' },
+        { name: 'errorReport', text: '误报', type: 'primary', icon: 'warn-o' },
+       ],
+       map: {
+           geocoder: null,
+           instance: null,
+           resizeEnable: true,
+           zoom: 18,
+           centerMarker: null,
+           center: [113.175203274874, 23.0261293630648],
+       },
+       markers: null,
+       actionSheetShow: false,
+       mapAppList: [
+           { name: "高德地图", wakeUpUrl: "https://uri.amap.com/marker?", number: 0 },
+           { name: "腾讯地图", wakeUpUrl: "https://apis.map.qq.com/tools/poimarker?", number: 1 }
+       ]
+   }
+  },
+  created() {
+    this.initAmap()
+  },
+  methods: {
+    onNavBack() {},
+    // 初始化地图
+    initAmap() {
+        MapLoader(false, [ 'AMap.PolyEditor', 'AMap.MouseTool', 'AMap.Geocoder', 'AMap.Geolocation' ]).then(
+            AMap => {
+                this.map.instance = new AMap.Map("details_map", {
+                    center: this.map.center,
+                    resizeEnable: this.map.resizeEnable,
+                    zoom: this.map.zoom,
+                    zoomEnable: true
+                });
+                this.map.geocoder = new AMap.Geocoder({
+                    extensions: "all"
+                });
+                this.initCenterMarker();
+            },
+            err => {
+                this.$toast.clear();
+                console.log("加载地图失败:::", err);
+            }
+        );
+    },
+    // 初始化marker
+    initCenterMarker() {
+        const content = '<div class="centerMarker"><i class="cir"></i></div>';
+        let position = this.map.instance.getCenter();
+        console.log("position", position);
+        position = [ position.lng, position.lat ];
+        if(this.map.centerMarker) {
+            // 如果 存在marker，则清掉前一个marker，防止出现多个marker的情况
+            this.map.instance.remove(this.map.centerMarker);
+        }
+        // 创建一个 Icon
+        let markerIcon = new AMap.Icon({
+            size: new AMap.Size(25, 34),
+            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
+            imageSize: new AMap.Size(135, 40),
+            imageOffset: new AMap.Pixel(-95, -3)
+        });
+        this.map.centerMarker = new AMap.Marker({
+            position: position,
+            icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
+            offset: new AMap.Pixel(-13, -30)
+        });
+        this.map.instance.add(this.map.centerMarker);
+    },
+    geocoder(lngLat) {
+        this.map.geocoder.getAddress(lngLat, (status, result) => {
+            if (status == "complete" && result.info == "OK") {
+                this.currentAddress.address = result.regeocode.formattedAddress;
+            }
+        });
+    },
+    // 调用高德定位api获取当前位置
+    createGeolocation() {
+        this.map.geolocation = new AMap.Geolocation({
+            nableHighAccuracy: true, //是否使用高精度定位，默认:true
+            timeout: 10000,           //超过10秒后停止定位，默认：5s
+            zoomToAccuracy: false,     //定位成功后是否自动调整地图视野到定位点
+            buttonPosition:'LT',      //定位按钮的停靠位置
+            showButton: process.env.NODE_ENV !== 'production',
+            buttonOffset: new AMap.Pixel(20, 400), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
+            showMarker: false,        // 定位成功后是否显示marker
+            showCircle: false,        // 定位成功并且有精度信息时，是否用一个圆圈circle表示精度范围，默认值：true
+        });
+        this.map.instance.addControl(this.map.geolocation);
+        const _this = this;
+        const localeLoading = this.$toast.loading('获取定位中...');
+        this.map.geolocation.getCurrentPosition(function (status, result) {
+            try {
+                if(status == 'complete') {
+                    console.log('定位完成:::', result);
+                    const position = [ result.position.lng, result.position.lat ];
+                    _this.geocoder(position);
+                } else {
+                    console.error('用户未授权定位:::');
+                    console.error('status:::', status);
+                    console.error('result:::', result);
+                    _this.$notify({
+                        type: 'warning',
+                        message: '您未打开定位服务，前往设置可打开'
+                    });
+                }
+            } catch (e) {
+                console.log(e);
+            } finally {
+                localeLoading.clear();
+            }
+        })
+    },
+    onClick(name) {
+        if(name === 'goHere') {
+            // 根据选择的地图跳转不同地图app的url
+            this.actionSheetShow = true;
+        }
+    },
+    onSelect(item) {
+        if(item.number === 0) {
+            // 高德
+            this.wakeUpGaodeMap(item.wakeUpUrl);
+        } else if (item.number === 1) {
+            this.wakeUpTencentMap(item.wakeUpUrl);
+        }
+    },
+    wakeUpGaodeMap(wakeUpUrl) {
+        const position = this.alarm.glng + ',' +this.alarm.glat;
+        const name = this.alarm.address;
+        window.location.href = `${wakeUpUrl}position=${position}&name=${name}&callnative=1`;
+    },
+    wakeUpTencentMap(wakeUpUrl) {
+        const position = this.alarm.glat + ',' + this.alarm.glng ;
+        const address = this.alarm.address;
+        const key = 'UHFBZ-I5ECQ-GSA5B-GW3UW-V2NL5-A3FNY';
+        const myAppName = 'ssjlqqmap';
+        window.location.href = `${wakeUpUrl}type=0&marker=coord:${position};title:${address};addr:${address}&key=${key}&referer=${myAppName}`;
+    }
+  }
+}
+</script>
+<style lang="scss">
+    .alarm-container {
+        .details_map {
+            $width: 50PX;
+            $cirWidth: 15PX;
+            .centerMarker {
+                position: relative;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                z-index: 999;
+            }
+
+            .centerMarker i.cir {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: $width;
+                height: $width;
+                background: rgba(255, 178, 128, 0.4);
+                border-radius: 50%;
+            }
+            .centerMarker i.cir:after {
+                content: " ";
+                width: $cirWidth;
+                height: $cirWidth;
+                background: #ff9625;
+                border: 2PX solid #fff;
+                border-radius: 50%;
+            }
+        }
+    }
+</style>
+<style scoped lang="scss">
+.alarm-container {
+    position: relative;
+    height: 100vh;
+    width: 100%;
+    .van-nav-bar {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+    }
+    .notice {
+        position: absolute;
+        top: 40px;
+        height: 40px;
+        width: 100%;
+        background-color: #ee0a24;
+        color: #fff;
+        font-size: 14px;
+        @include center();
+    }
+    .refresh {
+        position: absolute;
+        top: 100px;
+        right: 20px;
+        height: 50px;
+        width: 50px;
+        background-color: #fff;
+        box-shadow: 0 0 5px 1px rgba(185, 185, 185, 0.4);
+        border-radius: 5px;
+        @include center();
+        flex-direction: column;
+        span {
+            font-size: 14px;
+        }
+    }
+    .bottom {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background-color: $background;
+        z-index: 999;
+        .address {
+            padding: 10px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-direction: column;
+            font-size: 14px;
+            margin: 10px 10px 0 10px;
+            .title {
+                width: 100%;
+                text-align: left;
+                font-weight: bold;
+            }
+            .time {
+                width: 100%;
+                background-color: #fff;
+                padding: 5px 0;
+                margin: 5px 0;
+                font-weight: 400;
+                text-align: left;
+                border-radius: 5px;
+                span {
+                    margin-left: 5px;
+                }
+            }
+        }
+        .action {
+            display: flex;
+            justify-content: space-around;
+            padding-bottom: 15px;
+            .van-button {
+                width: 120px;
+            }
+        }
+    }
+}
+</style>