uskycloud
/
usky-web-pad


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
							<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>设施查看</title>
    <link rel="stylesheet" href="./css/input.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" type="text/css" href="./js/M_select/M_select.css">
    <link rel="stylesheet" type="text/css" href="./js/notification/index.css">
    <style>
        html,
        body,
        #mapF {
            height: 100%;
            width: 100%;
        }
    </style>
    <style>
        @font-face {
            font-family: "iconfont";
            /* Project id 3620854 */
            src: url('https://at.alicdn.com/t/c/font_3620854_18olo3dgg2h.woff2?t=1691473656726') format('woff2'),
                url('https://at.alicdn.com/t/c/font_3620854_18olo3dgg2h.woff?t=1691473656726') format('woff'),
                url('https://at.alicdn.com/t/c/font_3620854_18olo3dgg2h.ttf?t=1691473656726') format('truetype');
        }

        /* 定义使用的样式 iconfont */
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 1rem;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>

<body>
    <div id="mapF" class="map" tabindex="0"></div>

    <div id="myPageTop">
        <!-- <div class="ui-input">
            <i class="iconfont icon">&#xe60d;</i>
            <input id="uiInput" placeholder="请输入设施名称" />
        </div> -->

        <div id="myPageRight">
            <div class="myPageType" style="text-align: center;">
                <i class="iconfont icon" style="font-size: 1.5rem;">&#xe60e;</i>
                <div style="font-size: 12px;">设施</div>
            </div>
            <div style="margin: 5px 0 5px 0;border-bottom: 1px solid #eaeef1;"></div>
            <div class="myPageLabel" style="text-align: center;">
                <i class="iconfont icon" style="font-size: 1.5rem;">&#xe60e;</i>
                <div style="font-size: 12px;">标签</div>
            </div>
        </div>

        <div id="myPageDialog">
            <div class="title">设施汇总（0）</div>
            <div class="center"></div>
            <div class="bottom" style="text-align: center;">
                <i class="iconfont icon" style="color: #a8abb2; font-size: 18px;">&#xe63d;</i>
            </div>
        </div>
    </div>

    <div class="drawer">
        <div class="header">
            <div class="title"></div>
            <i class="iconfont icon close" style="color: #a8abb2; font-size: 12px;">&#xe695;</i>
        </div>
        <div class="center">
            <img src="" alt="">
            <div class="model">
                <div class="content">
                    <i class="iconfont icon" style="color:#0C83FA;font-size: 16px;">&#xe60f;</i>
                    <div class="address"></div>
                </div>
                <div class="content">
                    <i class="iconfont icon" style="color:#01b713;font-size: 16px;">&#xe616;</i>
                    <div class="facilityType"></div>
                </div>
                <div class="content">
                    <i class="iconfont icon" style="color:#ed480e;font-size: 16px;">&#xe617;</i>
                    <div class="branch"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://a.amap.com/jsapi_demos/static/china.js"></script>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: 'ce0e44758ad6b69607e23bf8e6a6ac11',
        }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=14aefebea926bb958032d5daf836fadf">
    </script>

    <script type="text/javascript" src="https://webapi.amap.com/ui/1.1/main.js"></script>
    <script type="text/javascript" src="./js/jquery-2.2.1.min.js"></script>

    <!-- uni 的 SDK -->
    <!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
    <script type="text/javascript" src="./js/uni.webview.1.5.4.js"></script>

    <script type="text/javascript">
        var dataList = [];//初始化数据存储
        var dataListCheckBox = [];//初始化数据选中数据存储
        var facilityNum = 0;//设施汇总数据存储

        var map = [];
        var marker = null;//创建点标记

        var myPageRight = {
            myPageTypeBool: 'none',//设施类型
            myPageLabelBool: 'none',//标签
        };//右侧小按钮绑定值存储

        /**
         * 初始化
         */
        function initMap() {
            map = new AMap.Map("mapF", {
                // mapStyle: 'amap://styles/d0ddc09bd7cbd7331a8e8fa691e5b0da', //设置地图的显示样式
                resizeEnable: true,
                center: [121.4737021, 31.2303904],
                zoom: 13,
                zooms: [3, 16],
            });

            map.setFitView();
        }

        /**
         * 撒点
         */
        function handleMarker(data) {
            AMap.plugin(["AMap.PolygonEditor,AMap.PolylineEditor", "AMap.Marker"], function () {
                map.clearMap(); // 清除地图覆盖物

                if (data.length > 0) {
                    marker = new AMap.Marker({});//初始化点标记

                    var markerData = data.map((item) => {
                        return {
                            position: [Number(item.longitude), Number(item.latitude)],
                            icon: new AMap.Icon({
                                image: item.icon || item.typeImg,
                                size: new AMap.Size(28, 35), //图标大小
                                imageSize: new AMap.Size(28, 35),
                            }),
                            data: item
                        };
                    })

                    for (var i = 0, marker; i < markerData.length; i++) {
                        marker = new AMap.Marker({
                            map: map,
                            icon: markerData[i].icon,
                            position: markerData[i].position,
                            offset: new AMap.Pixel(-10, -10),
                        });
                        marker.data = markerData[i]
                        marker.setLabel({
                            direction: 'top-left',
                            offset: new AMap.Pixel(-5, -10), //设置文本标注偏移量
                            content: `<div class='infoLabel'>${marker.data.data.facilityName}</div>`, //设置文本标注内容
                        });
                        marker.on('click', function (e) {
                            var data = e.target.data.data
                            handleDrawer(data)
                        });
                    }

                    handleRightBtn();
                    marker.setMap(map);
                    map.setFitView(null, false, [150, 60, 100, 60]);
                }
            })
        }

        /**
         * 初始化数据
         */
        function initData() {
            $('#myPageDialog .title').html(`设施汇总（${facilityNum}）`)
            var html = ``
            dataList.forEach(el => {
                html += `
                <div id="${el.typeCode}" class="center-col" onclick="checkbox(${el.typeCode})">
                    <div class="image">
                        <img style="max-width:40px;height:40px;margin: auto;"
                            src="${el.typeImg}" />
                        <div class="badge"> ${el.typeFacilityNum >= 100 ? '99+' : el.typeFacilityNum || 0} </div>
                    </div>
                    <div style="text-align: center;font-size: 12px;margin-bottom: 5px;">${el.typeName}</div>
                </div>
                `
            });

            $('#myPageDialog .center').append(html)


            $('#myPageRight .myPageLabel').on('click', function (e) {
                if (myPageRight.myPageLabelBool == "none") {
                    myPageRight.myPageLabelBool = "block";
                    $('#myPageRight .myPageLabel').css('color', '#2a98ff')
                } else {
                    myPageRight.myPageLabelBool = "none";
                    $('#myPageRight .myPageLabel').css('color', '#000000')
                }

                $('.amap-marker-label').css('display', myPageRight.myPageLabelBool)
            })

            $('#myPageRight .myPageType').on('click', function (e) {
                if (myPageRight.myPageTypeBool == "none") {
                    myPageRight.myPageTypeBool = "block";
                    $('#myPageRight .myPageType').css('color', '#2a98ff')
                } else {
                    myPageRight.myPageTypeBool = "none";
                    $('#myPageRight .myPageType').css('color', '#000000')
                }

                $('#myPageDialog').css('display', myPageRight.myPageTypeBool)
            })

            var display = "flex"
            $('#myPageDialog .bottom').on('click', function (e) {
                if (display == "none") {
                    $('#myPageDialog .bottom').css('transform', 'rotate(-180deg)')
                    display = "flex"
                } else {
                    $('#myPageDialog .bottom').css('transform', 'rotate(0deg)')
                    display = "none"
                }
                $('#myPageDialog .center').css('display', display)
            })

            initMap()
        }


        /**
         * 校验右侧小按钮
         */
        function handleRightBtn() {
            if (myPageRight.myPageLabelBool == 'block') {
                // $('#myPageRight .myPageLabel').trigger('click')
                $('.amap-marker-label').css('display', myPageRight.myPageLabelBool)
            }
        }

        /**
         * 复选事件
         */
        function checkbox(typeCode) {
            if (dataListCheckBox.includes(typeCode)) {
                dataListCheckBox.splice(dataListCheckBox.indexOf(typeCode), 1);
                $(`#${typeCode}`).attr('class', 'center-col')
            } else {
                dataListCheckBox.push(typeCode)
                $(`#${typeCode}`).attr('class', 'center-col mask')
            }

            parentMessage("撒点", dataListCheckBox.join(','));
        }

        /*
         * 抽屉事件
         */
        function handleDrawer(data) {
            $(`.drawer`).attr('class', 'drawer open')
            $(`.drawer .header .title`).html(data.facilityName)
            $(`.drawer .center img`).attr("src", data.imagesUrl ? data.imagesUrl : "../images/404.png")
            $(`.drawer .center .model .content .address`).html(data.address)
            $(`.drawer .center .model .content .facilityType`).html(data.typeName)
            $(`.drawer .center .model .content .branch`).html(data.deptId)

            $(`.drawer .header .close`).on('click', function (e) {
                $(`.drawer`).attr('class', 'drawer')
            })
        }

        /**
         * 向父页面发送数据
         */
        function parentMessage(type, data) {
            var message = {
                funcName: type,
                param: data,
            };

            //APP-PLUS
            uni.postMessage({
                data: message
            });

            //H5
            if (window.parent) {
                window.parent.postMessage(message, '*');
            }
        }

        /**
         * APP-PLUS || H5
         * 接收父页面传过来的值
         */
        window.receiveData = function (msg) {
            analysisData(msg)
        }
        window.addEventListener("message", function (event) {
            analysisData(event.data)
        });

        /**
         * 解析数据
         */
        function analysisData(data) {
            if ("funcName" in data) {
                if (data.funcName == "初始化") {
                    var param = JSON.parse(data.param);
                    dataList = param.baseGgpFacilityTypeNumVO;
                    facilityNum = param.facilityNum;
                    initData();
                } else if (data.funcName == "撒点") {
                    var param = JSON.parse(data.param);
                    param.forEach((e) => {
                        dataList.forEach(el => {
                            if (e.facilityType === el.typeCode) {
                                e.typeImg = el.typeImg
                                e.typeName = el.typeName
                            }
                        });
                    })
                    handleMarker(param)
                }
            }
        }
    </script>
    <style>
        #myPageTop {
            position: absolute;
            left: 8px;
            top: 8px;
            background: transparent;
            font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
            font-size: 13px;
            width: calc(100% - 16px);
        }

        #myPageRight {
            position: absolute;
            right: 0px;
            background-color: #fff;
            margin-top: 8px;
            padding: 5px;
            border-radius: 10px;
            box-shadow: 0px 0px 5px 0px rgba(141, 141, 141, 0.4);
        }

        #myPageTop #myPageDialog {
            position: absolute;
            right: calc(34px + 8px);
            width: 14rem;
            width: calc(100% - 34px - 8px);
            padding: 10px 10px 5px 10px;
            margin-top: 8px;
            background: #fff;
            box-shadow: 0px 0px 5px 0px rgba(141, 141, 141, 0.4);
            display: none;
        }

        #myPageTop #myPageDialog .title {
            font-weight: 600;
            text-align: center;
            margin-bottom: 10px;
        }

        #myPageTop #myPageDialog .center {
            display: flex;
            max-height: 260px;
            overflow: auto;
            flex-wrap: wrap;
        }

        #myPageTop #myPageDialog .center .mask {
            border-radius: 4px;
            background: #c2ddf6;
        }

        #myPageTop #myPageDialog .center .center-col {
            /* max-width: calc(25% - 2.5px);
            flex: 0 0 calc(25% - 2.5px); */

            max-width: calc(25% - 3.75px);
            flex: 0 0 calc(25% - 3.75px);
            margin: 0px 5px 5px 0;
        }

        #myPageTop #myPageDialog .center .center-col:nth-child(4n) {
            margin-right: 0;
        }

        #myPageTop #myPageDialog .center .center-col .image {
            position: relative;
            display: flex;
            margin: 15px 0 5px 0;
        }

        #myPageTop #myPageDialog .bottom {
            transform: rotate(-180deg);
        }
    </style>
</body>

</html>