puzhibing
2023-03-22 ecf282fb285fbba74ff129a4be8a129aa0d8ceb1
management/guns-admin/src/main/webapp/WEB-INF/view/system/tOrder/tOrderDetail.html
@@ -9,6 +9,11 @@
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <input hidden id="startLng" value="${startLng}">
                        <input hidden id="startLat" value="${startLat}">
                        <input hidden id="endLng" value="${endLng}">
                        <input hidden id="endLat" value="${endLat}">
                        <hr/>
                        <div class="initialLevel col-sm-12 control-label form-group"  >
                            <div style="background-color: gray;height: 35px;line-height: 35px">
@@ -174,6 +179,36 @@
                            </div>
                        @}
                        @if(startLng != null){
                            <hr/>
                            <div class="initialLevel col-sm-12 control-label form-group"  >
                                <div style="background-color: gray;height: 35px;line-height: 35px">
                                    <label style="color: #0C0C0C">行程轨迹</label>
                                </div>
                            </div>
                            <hr/>
                            <div class="initialLevel col-sm-12 control-label form-group"  >
                                <div id="container" ></div>
                                <div id="panel" ></div>
                            </div>
                        @}
                        <hr/>
                        <div class="initialLevel col-sm-12 control-label form-group"  >
                            <div style="background-color: gray;height: 35px;line-height: 35px">
                                <label style="color: #0C0C0C">行程录音</label>
                            </div>
                        </div>
                        <hr/>
                        <div class="initialLevel col-sm-12 control-label form-group"  >
                            <audio id="audio" autoplay controls muted>
<!--                                <source src="http://www.w3capi.com/upload/audio/audio_example.mp3" type="audio/mpeg">-->
                                <source src="${routeRecord}" type="audio/mpeg">
                            </audio>
                        </div>
                        <div class="hidden-xs" id="TDriverTableToolbar" role="group"  style="text-align: center">
                            <#button name="取消" icon="fa-plus" clickFun="TOrderInfoDlg.close()" />
                        </div>
@@ -186,11 +221,91 @@
</div>
<script src="${ctxPath}/static/modular/system/tOrder/tOrder.js"></script>
<script src="${ctxPath}/static/modular/system/tOrder/tOrder_info.js"></script>
<!--<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=1d43098bcd98ab124623e7e4bcc9595e&plugin=AMap.Driving"></script>-->
<!--<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>-->
<!--<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>-->
<script src="https://webapi.amap.com/loader.js"></script>
<style type="text/css">
    #container {
        background-color: white;
        height: 420px;
        width: 1200px;
    }
    #audio {
        height: 100px;
        width: 600px;
    }
    #panel {
        position: fixed;
        background-color: white;
        max-height: 90%;
        overflow-y: auto;
        top: 10px;
        right: 10px;
        width: 280px;
    }
    #panel .amap-call {
        background-color: #009cf9;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    #panel .amap-lib-driving {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        overflow: hidden;
    }
</style>
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'b62d9146929db08c4c2f4537d045320d',
    };
    laydate.render({
        elem: '#createTime',
        type: 'date',
        range: true
    });
    if(null != $('#startLng').val() && '' != $('#startLng').val()){
        AMapLoader.reset() // 需要把这个reset一下
        AMapLoader.load({
            "key": "1d43098bcd98ab124623e7e4bcc9595e",              // 申请好的Web端开发者Key,首次调用 load 时必填
            "version": "2.0",   // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
            "plugins": ['AMap.Driving'],           // 需要使用的的插件列表,如比例尺'AMap.Scale'等
            "AMapUI": {             // 是否加载 AMapUI,缺省不加载
                "version": '1.1',   // AMapUI 版本
                "plugins":['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
            },
            "Loca":{                // 是否加载 Loca, 缺省不加载
                "version": '2.0'  // Loca 版本
            },
        }).then((AMap)=>{
            //初始化地图对象,加载地图
            var map = new AMap.Map('container', {
                viewMode: '2D', // 默认使用 2D 模式,如果希望使用带有俯仰角的 3D 模式,请设置 viewMode: '3D',
                zoom:13, //初始化地图层级
                center: [$('#startLng').val(), $('#startLat').val()] //初始化地图中心点
            });
            //构造路线导航类
            var driving = new AMap.Driving({
                map: map,
            });
            // 根据起终点经纬度规划驾车导航路线
            driving.search(new AMap.LngLat($('#startLng').val(), $('#startLat').val()), new AMap.LngLat($('#endLng').val(), $('#endLat').val()), function(status, result) {
                // result 即是对应的驾车导航信息,相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {
                    Feng.success('绘制订单路线完成')
                } else {
                    Feng.error('获取驾车数据失败:' + result)
                }
            });
        }).catch((e)=>{
            console.error(e);  //加载错误提示
        });
    }else {
        Feng.info('该订单未完成,无地图路线显示!')
    }
</script>
@}