#

luxiaotao1123

2022-02-26 9bfdc39e8e7aade92db4e7c57586a90e2a4c91bf

 src/main/webapp/views/home/console.html

@@ -409,204 +409,204 @@
    // option && myChart.setOption(option);

    // 地图 -----------------------------------------------------------------
    var map = new AMap.Map('map', {
        zoom: 4.85,
        pitch: 40,
        viewMode: '3D',
        center: [105.202202,32.699006],
        // mapStyle: 'amap://styles/8108947b4fec714c52ef08aa183a2237',
        // mapStyle: 'amap://styles/4fd4357cc9f7c46f0c227c9763f67a2d',
        mapStyle: 'amap://styles/7f20373ddc5b2456e7095fce1dab4aba',
        // mapStyle: 'amap://styles/dd57f58da78602dc3871efc29b2ba43d',
    });

    var loca = new Loca.Container({
        map,
    });

    var geo;
    var iconLayer = new Loca.IconLayer({
        zIndex: 10,
        opacity: 1,
    });
    function getMapData() {
        $.ajax({
            url: baseUrl + "/sensor/map/auth",
            headers: {'token': localStorage.getItem('token')},
            method: 'GET',
            success: function (res) {
                if (res.code === 200) {
                    geo = new Loca.GeoJSONSource({
                        data: res.data,
                    });
                    iconLayer.setSource(geo);
                    iconLayer.setStyle({
                        unit: 'px',
                        icon: (index, feature) => {
                            let data = feature.properties.rawData;
                            return trafficIcons[data.type % Object.keys(trafficIcons).length];
                        },
                        iconSize: [20,20],
                        rotation: 0,
                    })
                    loca.add(iconLayer);
                } else if (res.code === 403) {
                    top.location.href = baseUrl + "/";
                } else {
                    layer.msg(res.msg, {icon: 2})
                }
            }
        })
    }
    getMapData();


    // 拾取
    map.on('click', (e) => {
        const feat = iconLayer.queryFeature(e.pixel.toArray());
        if (feat) {
            map.setZoomAndCenter(19, new AMap.LngLat(feat.properties.rawData.lng, feat.properties.rawData.lat));
            iconLayer.setStyle({
                unit: 'px',
                icon: (index, feature) => {
                    let data = feature.properties.rawData;
                    return trafficIcons[data.type % Object.keys(trafficIcons).length];
                },
                iconSize: (i, feature) => {
                    if (feature === feat) {
                        return [40, 40];
                    }
                    return [20, 20];
                },
            });
            top.sensorByMap = feat.properties.rawData.sensorId;
            layer.open({
                type: 2
                ,id: 'LAY_adminPopupR'
                ,area: '700px'
                // ,url: 'sensor_detl.html'
                ,anim: -1
                ,title: false
                ,closeBtn: false
                ,offset: 'r'
                ,shade: 0.1
                ,shadeClose: true
                ,window: 'top'
                ,skin: 'layui-anim layui-anim-rl layui-layer-adminRight0'
                ,content: '../sensor_detl.html'
            });
        }
    });

    // --------------------------------------

    // https://www.highcharts.com.cn/demo/highcharts/3d-area-multiple
    // https://echarts.apache.org/examples/zh/editor.html?c=scatter3D-dataset&gl=1&version=5.2.1
    layui.config({
        base: baseUrl + "/static/layui/lay/modules/"
    }).extend({
        dropdown: 'dropdown/dropdown'
    }).use(['layer', 'carousel', 'element', 'admin', 'dropdown'], function () {
        var element = layui.element;
        var $ = layui.jquery;
        var layer = layui.layer;
        var carousel = layui.carousel;
        var device = layui.device();
        var admin = layui.admin;

        // 数据中心
        $('#toDataV').click(function () {
            window.open("https://lbs.amap.com/tools/picker");
        })

        getHeaderData();
        getBodyData();

        setInterval(function () {
            getHeaderData();
            getBodyData();
        }, 3000)

        // 渲染轮播
        carousel.render({
            elem: '#workplaceNewsCarousel',
            width: '100%',
            height: '70px',
            arrow: 'none',
            autoplay: true,
            trigger: device.ios || device.android ? 'click' : 'hover',
            anim: 'fade'
        });

        // 头部
        function getHeaderData() {
            $.ajax({
                url: baseUrl + "/console/header/auth",
                headers: {'token': localStorage.getItem('token')},
                method: 'GET',
                success: function (res) {
                    if (res.code === 200) {
                        var result = res.data;
                        $('#logQtyDay').text(result.logQtyDay);
                        $('#logQty').text(result.logQty);

                        $('#sensorQty').text(result.sensorQty);
                        $('#sensorOnlineQty').text(result.sensorOnlineQty);

                        $('#commandQty').text(result.commandQty);
                        $('#commandQtyMonth').text(result.commandQtyMonth);

                        $('#usersQty').text(result.usersQty);
                        $('#deptQty').text(result.deptQty);
                        $('#optQty').text(result.optQty);
                    } else if (res.code === 403) {
                        top.location.href = baseUrl + "/";
                    } else {
                        layer.msg(res.msg, {icon: 2})
                    }
                }
            })
        }

        // 主体
        function getBodyData() {
            $.ajax({
                url: baseUrl + "/console/body/auth",
                headers: {'token': localStorage.getItem('token')},
                method: 'GET',
                success: function (res) {
                    if (res.code === 200) {
                        // 安全库存
                        var tpl = $('#safeQuaTpl').html();
                        var template = Handlebars.compile(tpl);
                        var html = template(res.data);
                        $('#warnList').html(html);
                    } else if (res.code === 403) {
                        top.location.href = baseUrl + "/";
                    } else {
                        layer.msg(res.msg, {icon: 2})
                    }
                }
            })
        }

    });

    // 地图重置
    document.getElementById("map-reset").addEventListener("click", function () {
        map.setZoomAndCenter(4.85, new AMap.LngLat(105.202202, 32.699006));
        map.setRotation(0);
        map.setPitch(40);
        iconLayer.setStyle({
            unit: 'px',
            icon: (index, feature) => {
                let data = feature.properties.rawData;
                return trafficIcons[data.type % Object.keys(trafficIcons).length];
            },
            iconSize: [20,20],
            rotation: 0,
        })
    })
    // var map = new AMap.Map('map', {
    //     zoom: 4.85,
    //     pitch: 40,
    //     viewMode: '3D',
    //     center: [105.202202,32.699006],
    //     // mapStyle: 'amap://styles/8108947b4fec714c52ef08aa183a2237',
    //     // mapStyle: 'amap://styles/4fd4357cc9f7c46f0c227c9763f67a2d',
    //     mapStyle: 'amap://styles/7f20373ddc5b2456e7095fce1dab4aba',
    //     // mapStyle: 'amap://styles/dd57f58da78602dc3871efc29b2ba43d',
    // });
    //
    // var loca = new Loca.Container({
    //     map,
    // });
    //
    // var geo;
    // var iconLayer = new Loca.IconLayer({
    //     zIndex: 10,
    //     opacity: 1,
    // });
    // function getMapData() {
    //     $.ajax({
    //         url: baseUrl + "/sensor/map/auth",
    //         headers: {'token': localStorage.getItem('token')},
    //         method: 'GET',
    //         success: function (res) {
    //             if (res.code === 200) {
    //                 geo = new Loca.GeoJSONSource({
    //                     data: res.data,
    //                 });
    //                 iconLayer.setSource(geo);
    //                 iconLayer.setStyle({
    //                     unit: 'px',
    //                     icon: (index, feature) => {
    //                         let data = feature.properties.rawData;
    //                         return trafficIcons[data.type % Object.keys(trafficIcons).length];
    //                     },
    //                     iconSize: [20,20],
    //                     rotation: 0,
    //                 })
    //                 loca.add(iconLayer);
    //             } else if (res.code === 403) {
    //                 top.location.href = baseUrl + "/";
    //             } else {
    //                 layer.msg(res.msg, {icon: 2})
    //             }
    //         }
    //     })
    // }
    // getMapData();
    //
    //
    // // 拾取
    // map.on('click', (e) => {
    //     const feat = iconLayer.queryFeature(e.pixel.toArray());
    //     if (feat) {
    //         map.setZoomAndCenter(19, new AMap.LngLat(feat.properties.rawData.lng, feat.properties.rawData.lat));
    //         iconLayer.setStyle({
    //             unit: 'px',
    //             icon: (index, feature) => {
    //                 let data = feature.properties.rawData;
    //                 return trafficIcons[data.type % Object.keys(trafficIcons).length];
    //             },
    //             iconSize: (i, feature) => {
    //                 if (feature === feat) {
    //                     return [40, 40];
    //                 }
    //                 return [20, 20];
    //             },
    //         });
    //         top.sensorByMap = feat.properties.rawData.sensorId;
    //         layer.open({
    //             type: 2
    //             ,id: 'LAY_adminPopupR'
    //             ,area: '700px'
    //             // ,url: 'sensor_detl.html'
    //             ,anim: -1
    //             ,title: false
    //             ,closeBtn: false
    //             ,offset: 'r'
    //             ,shade: 0.1
    //             ,shadeClose: true
    //             ,window: 'top'
    //             ,skin: 'layui-anim layui-anim-rl layui-layer-adminRight0'
    //             ,content: '../sensor_detl.html'
    //         });
    //     }
    // });
    //
    // // --------------------------------------
    //
    // // https://www.highcharts.com.cn/demo/highcharts/3d-area-multiple
    // // https://echarts.apache.org/examples/zh/editor.html?c=scatter3D-dataset&gl=1&version=5.2.1
    // layui.config({
    //     base: baseUrl + "/static/layui/lay/modules/"
    // }).extend({
    //     dropdown: 'dropdown/dropdown'
    // }).use(['layer', 'carousel', 'element', 'admin', 'dropdown'], function () {
    //     var element = layui.element;
    //     var $ = layui.jquery;
    //     var layer = layui.layer;
    //     var carousel = layui.carousel;
    //     var device = layui.device();
    //     var admin = layui.admin;
    //
    //     // 数据中心
    //     $('#toDataV').click(function () {
    //         window.open("https://lbs.amap.com/tools/picker");
    //     })
    //
    //     getHeaderData();
    //     getBodyData();
    //
    //     setInterval(function () {
    //         getHeaderData();
    //         getBodyData();
    //     }, 3000)
    //
    //     // 渲染轮播
    //     carousel.render({
    //         elem: '#workplaceNewsCarousel',
    //         width: '100%',
    //         height: '70px',
    //         arrow: 'none',
    //         autoplay: true,
    //         trigger: device.ios || device.android ? 'click' : 'hover',
    //         anim: 'fade'
    //     });
    //
    //     // 头部
    //     function getHeaderData() {
    //         $.ajax({
    //             url: baseUrl + "/console/header/auth",
    //             headers: {'token': localStorage.getItem('token')},
    //             method: 'GET',
    //             success: function (res) {
    //                 if (res.code === 200) {
    //                     var result = res.data;
    //                     $('#logQtyDay').text(result.logQtyDay);
    //                     $('#logQty').text(result.logQty);
    //
    //                     $('#sensorQty').text(result.sensorQty);
    //                     $('#sensorOnlineQty').text(result.sensorOnlineQty);
    //
    //                     $('#commandQty').text(result.commandQty);
    //                     $('#commandQtyMonth').text(result.commandQtyMonth);
    //
    //                     $('#usersQty').text(result.usersQty);
    //                     $('#deptQty').text(result.deptQty);
    //                     $('#optQty').text(result.optQty);
    //                 } else if (res.code === 403) {
    //                     top.location.href = baseUrl + "/";
    //                 } else {
    //                     layer.msg(res.msg, {icon: 2})
    //                 }
    //             }
    //         })
    //     }
    //
    //     // 主体
    //     function getBodyData() {
    //         $.ajax({
    //             url: baseUrl + "/console/body/auth",
    //             headers: {'token': localStorage.getItem('token')},
    //             method: 'GET',
    //             success: function (res) {
    //                 if (res.code === 200) {
    //                     // 安全库存
    //                     var tpl = $('#safeQuaTpl').html();
    //                     var template = Handlebars.compile(tpl);
    //                     var html = template(res.data);
    //                     $('#warnList').html(html);
    //                 } else if (res.code === 403) {
    //                     top.location.href = baseUrl + "/";
    //                 } else {
    //                     layer.msg(res.msg, {icon: 2})
    //                 }
    //             }
    //         })
    //     }
    //
    // });
    //
    // // 地图重置
    // document.getElementById("map-reset").addEventListener("click", function () {
    //     map.setZoomAndCenter(4.85, new AMap.LngLat(105.202202, 32.699006));
    //     map.setRotation(0);
    //     map.setPitch(40);
    //     iconLayer.setStyle({
    //         unit: 'px',
    //         icon: (index, feature) => {
    //             let data = feature.properties.rawData;
    //             return trafficIcons[data.type % Object.keys(trafficIcons).length];
    //         },
    //         iconSize: [20,20],
    //         rotation: 0,
    //     })
    // })

</script>
<script type="text/template" id="safeQuaTpl">