CQ_JD
/
nazw


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>载体服务</title>
    <link rel="stylesheet" href="css/mapcon.css">
    <!-- 引入 Vue -->
    <script src="js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入组件库 -->
    <script src="js/index.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7XivTux4H2e1ifKLjvEhxfuayDYxAluq">
    </script>
    <script src="js/urljson.js"></script>
    <style>
        ul {
            padding: 0;
            margin: 0;
        }

        .contentleft {
            width: 50%;
            min-width: 841px;
            background-color: #EDF5FF;
            font-size: 20px;
            color: #333;
            padding: 15px 30px;
            box-sizing: border-box;
            font-family: Microsoft YaHei;
        }

        .term {
            display: flex;
            align-items: flex-start;
            font-size: 16px;
            margin-top: 15px;
        }

        .term .name {
            color: #666666;
            white-space: nowrap;
            margin-right: 20px;
            line-height: 30px;
        }

        .term .item {
            display: flex;
            flex-wrap: wrap;
        }

        .term .item li {
            color: #333;
            cursor: pointer;
            padding: 0 18px;
            width: auto;
            height: 30px;
            line-height: 30px;
            white-space: nowrap;
        }

        .term .item li:first-child {
            width: auto !important;
        }

        .term .item li.active {
            background: #DEEDFF;
            border: 1px solid #4B98F6;
            color: #4B98F6;
            text-align: center;
            cursor: pointer;
        }

        .contentleft>.content {
            width: 100%;
            margin: auto;
            height: calc(100% - 238px);
            overflow-y: scroll;
            margin-top: 30px;
        }

        .contentleft>.content::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }

        .contentleft .content {
            display: flex;
            flex-wrap: wrap;
        }

        .contentleft .content ul {
            list-style-type: none;
            display: flex;
            flex-direction: column;
            padding: 0;
        }

        .contentleft .content ul li {
            margin-bottom: 15px;
        }

        .contentleft .content .list {
            width: 49%;
            height: 455px;
            background: #FFFFFF;
            display: flex;
            margin-bottom: 30px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            margin-right: 1%;
        }

        .contentleft .content .list .left {
            width: 100%;
            height: 231px;
        }

        .contentleft .content .list .left img {
            width: 100%;
            height: 231px;
        }

        .contentleft .content .list .right {
            width: 100%;
            height: calc(100% - 231px);
            display: flex;
            justify-content: space-between;
            padding: 20px 15px;
            box-sizing: border-box;
        }

        .contentleft .content .tjzb {
            width: 86px;
            height: 98px;
            background-image: url(images/znxzlogo.png);
            background-size: 100% 100%;
            font-size: 16px;
            color: #FFFFFF;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .contentright {
            width: 50vw;
            height: 1384px;
        }

        #znxz>.top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #B7C7DC;
            background: #FFFFFF;
        }

        .zwsj {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            font-size: 20px;
            color: #999999;
            flex-direction: column;
        }


        .iconzb {
            width: 100px;
            height: 37px;
            line-height: 37px;
            background: #E3F5E7;
            border-radius: 4px;
            border: 1px solid #4BB664;
            font-size: 20px;
            color: #4BB664;
            text-align: center;
            margin-right: 9px;
        }
    </style>
</head>

<body>
    <div style="width:100%;height:570px" class="header"></div>
    <div id="znxz">
        <div class="top">
            <div class="toplogo">
                <img src="images/gyylogo.png" alt="">
                <span>载体服务</span>
            </div>
            <div class="backbutton" @click="window.history.go(-1)">
                <img src="images/back1.png" alt="">
                <span>返回</span>
            </div>
        </div>
        <div style="display: flex;">
            <div class="contentleft">
                <div class="title">
                    <img src="images/gyy-gk.png" alt="">
                    <span>条件筛选</span>
                </div>
                <div class="term">
                    <div class="name">片区</div>
                    <ul class="item">
                        <li v-for="(item,index) in pqList" :class="{ active: currentPq == item.id }" :key="index"
                            @click="handleParkChange(item)">{{item.title}}</li>
                    </ul>
                </div>
                <div class="term">
                    <div class="name">面积</div>
                    <ul class="item">
                        <li v-for="(item,index) in mjList" :class="{ active: currentmj == item.id }" :key="index"
                            @click="handleSpaceChange(item)">{{item.name}}</li>
                    </ul>
                </div>
                <div class="term">
                    <div class="name">用途</div>
                    <ul class="item">
                        <li v-for="(item,index) in ytList" :class="{ active: currentyt == item.id }" :key="index"
                            @click="handleUseChange(item)">{{item.name}}</li>
                    </ul>
                </div>
                <div class="content">
                    <div class="zwsj" v-if="!this.contentList.length"><img src="images/zwsj.png"
                            alt=""><span>暂无数据</span></div>
                    <div class="list" v-for="(item,index) in contentList" @click="goDeteil(item.id)">
                        <div class="left">
                            <img :src="item.imgUrl ? item.imgUrl.split(',')[0] : backgroundImage" alt="">
                        </div>
                        <div class="right">
                            <ul class="item">
                                <li style="display: flex;">
                                    <div class="iconzb"
                                        v-for="(iteml,indexl) in (item.complement?item.complement.split(','):[])">
                                        {{iteml}}</div>
                                </li>
                                <li><span>载体名称：</span><span>{{item.carrierName}}</span></li>
                                <li><span>可用面积：</span><span>{{item.area}}㎡</span></li>
                                <li><span>所属园区：</span><span>{{item.parkData?item.parkData.title:''}}</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="contentright" id="mapcontainer"></div>
        </div>
    </div>
    <div style="width:100%;" class="footer"></div>
</body>
<script>
    $(function () {
        /*公共部分
        * 导航栏
        * footer CopyRight
        */
        $(".header").load('https://www.cqna.gov.cn/ggbf_search/top/top_style.html');
        $(".footer").load('https://www.cqna.gov.cn/ggbf_search/ggyr/2022foot/bottomBlack.html');
    });
</script>
<script>
    new Vue({
        el: '#znxz',
        data: function () {
            return {
                reqPtah: '',
                pageSize: 10000,
                parkMap: {},
                maptitle: '',
                pointList: [],
                currSpace: '',
                currUse: '',
                currentPq: -1,
                currentmj: 1,
                currentyt: 1,
                pqList: [],
                mjList: [
                    {
                        id: 1,
                        name: "全部",
                        value: "-1"
                    },
                    {
                        id: 2,
                        name: "0-1000m²",
                        value: "1,1000"
                    },
                    {
                        id: 3,
                        name: "1001-5000m²",
                        value: "1001,5000"
                    },
                    {
                        id: 4,
                        name: "5001-10000m²",
                        value: "5001,10000"
                    },
                    {
                        id: 5,
                        name: "10000以上m²",
                        value: "10000"
                    }
                ],
                ytList: [
                    {
                        id: 1,
                        name: "全部"
                    },
                    {
                        id: 2,
                        name: "办公楼宇"
                    },
                    {
                        id: 3,
                        name: "库房"
                    },
                    {
                        id: 4,
                        name: "厂房"
                    },
                    {
                        id: 5,
                        name: "医药库房"
                    },
                    {
                        id: 6,
                        name: "宿舍"
                    },
                    {
                        id: 7,
                        name: "商业"
                    },
                    {
                        id: 8,
                        name: "底商"
                    }
                ],
                contentList: [],
                backgroundImage: 'images/indexsyyg.png',
            }
        },
        mounted() {
            const url = new URL(window.location.href);
            const id = url.searchParams.get('id');
            this.currentPq = id;
            this.getParkData();
            this.getParkDetail();
            this.getSellBuild();
            if (this.id == 4) {
                this.backgroundImage = 'image/ztnp.webp';
            } else if (this.id == 6) {
                this.backgroundImage = 'image/ztdx.webp';
            } else if (this.id == 5) {
                this.backgroundImage = 'image/ztyl.webp';
            } else if (this.id == 3) {
                this.backgroundImage = 'image/ztcjcx.webp';
            } else if (this.id == 2) {
                this.backgroundImage = 'image/ztxj.webp';
            } else {
                this.backgroundImage = 'image/ztcy.webp';
            }
        },
        methods: {
            backIndex() {
                window.history.go(-1)
            },
            handleParkChange(data) {
                this.currentPq = data.id;
                this.getSellBuild();
                this.getParkDetail();
            },
            handleSpaceChange(data) {
                this.currentmj = data.id;
                this.currSpace = data.value;
                this.getSellBuild();
            },
            handleUseChange(data) {
                this.currentyt = data.id;
                this.currUse = data.name;
                this.getSellBuild();
            },
            goDeteil(id) {
                if (id) {
                    window.location.href = "ztcrdetail.html?ztid=" + id;
                }
            },
            getParkDetail() {
                let that = this;
                $.ajax({
                    url: conpath + "/parkData/" + that.currentPq,
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        that.maptitle = data.title;
                    }
                });
            },
            // loadAllMap(allpoints) {
            //     let that = this;
            //     that.parkMap = new BMap.Map("mapcontainer");
            //     that.parkMap.enableScrollWheelZoom();// 启用滚轮缩放
            //     that.parkMap.enableDragging(); // 启用拖拽功能
            //     that.parkMap.centerAndZoom(new BMap.Point(106.651444, 29.48682), 14);
            //     that.parkMap.setMapType(BMAP_NORMAL_MAP);
            //     var allpointList = allpoints.split('?');
            //     for (var i = 0; i < allpointList.length; i++) {
            //         let pointList = allpointList[i].split('@');
            //         let result = [];
            //         pointList.forEach(function (point) {
            //             let arr = point.split(',');
            //             result.push(new BMap.Point(arr[0], arr[1]));
            //         });
            //         // 创建多边形
            //         let polygon = new BMap.Polygon(result, {
            //             strokeColor: "#FFD119",
            //             strokeWeight: 4,
            //             strokeOpacity: 1,
            //             strokeStyle: "solid",
            //             fillColor: "transparent",
            //             fillOpacity: 0.3
            //         });
            //         // 将多边形添加到地图中
            //         that.parkMap.addOverlay(polygon);
            //     }
            // },
            loadMap(points) {
                let that = this;
                that.parkMap = new BMap.Map("mapcontainer");
                that.parkMap.enableScrollWheelZoom();// 启用滚轮缩放
                that.parkMap.enableDragging(); // 启用拖拽功能
                const id = that.currentPq;
                // 设定中心点和地图级别
                // that.parkMap.centerAndZoom(new BMap.Point(106.651444, 29.48682), 15);
                if (id == 1) {
                    that.parkMap.centerAndZoom(new BMap.Point(106.651444, 29.45682), 14);
                } else if (id == 2) {
                    that.parkMap.centerAndZoom(new BMap.Point(106.76723874457288, 29.573276880811712), 14);
                } else if (id == 3) {
                    that.parkMap.centerAndZoom(new BMap.Point(106.69517131217539, 29.51577313312822), 15);
                } else if (id == 4) {
                    that.parkMap.centerAndZoom(new BMap.Point(106.559829995157, 29.501581648208534), 15);
                } else if (id == 5) {
                    that.parkMap.centerAndZoom(new BMap.Point(106.72194027111843, 29.513690776940248), 16);
                } else if (id == 6) {
                    that.parkMap.centerAndZoom(new BMap.Point(106.70580793222035, 29.514020426917684), 16);
                } else {
                    that.parkMap.centerAndZoom(new BMap.Point(106.651444, 29.48682), 14);
                }
                that.parkMap.setMapType(BMAP_NORMAL_MAP);
                if (!points.length) return;
                // let pointList = points.split('@');
                // let result = [];
                // pointList.forEach(function (point) {
                //     let arr = point.split(',');
                //     result.push(new BMap.Point(arr[0], arr[1]));
                // });
                // // 创建多边形
                // let polygon = new BMap.Polygon(result, {
                //     strokeColor: "red",
                //     strokeWeight: 4,
                //     strokeOpacity: 1,
                //     strokeStyle: "solid",
                //     fillColor: "transparent",
                //     fillOpacity: 0.3
                // });
                // // 将多边形添加到地图中
                // that.parkMap.addOverlay(polygon);
                console.log(points)
                points.forEach(function (d) {
                    let pList = d.point.split('@');
                    pList.forEach(function (point) {
                        let arr = point.split(',');
                        let p = new BMap.Point(arr[0], arr[1]);
                        let marker = new BMap.Marker(p);
                        var opts = {
                            position: new BMap.Point(arr[0], arr[1]), // 指定文本标签所在的地理位置
                            offset: new BMap.Size(10, 10) // 设置文本偏移量
                        };

                        // 创建文本标注对象
                        var label = new BMap.Label(d.carrierName, opts);
                        label.setStyle({
                            color: "#186FF0",
                            border: "0",
                            padding: "0",
                            display: "none",
                            background: "transparent",
                            fontWeight: 'bold',
                            backgroundColor: 'transparent',
                            textShadow: '0 0 4px #4B97F5',
                            textStrokeColor: "#4B97F5", // 文本描边颜色
                            textStrokeWidth: "4px", // 文本描边宽度
                            fontSize: "18px",
                            height: "20px",
                            lineHeight: "20px",
                            fontFamily: "微软雅黑"
                        });
                        marker.setLabel(label);

                        marker.addEventListener("mouseover", function (e) {
                            var label = this.getLabel()
                            label.setStyle({ display: "block" });
                        });
                        marker.addEventListener("mouseout", function (e) {
                            var label = this.getLabel()
                            label.setStyle({ display: "none" });
                        });
                        that.parkMap.addOverlay(marker);
                        marker.addEventListener('click', function () {
                            var id = d.id;
                            window.location.href = 'ztcrdetail.html?ztid=' + id;
                        });
                    });
                });
            },
            getParkData() {
                let that = this;
                that.pqList = [];
                that.pqList.push({
                    id: -1,
                    title: "全部"
                });
                $.ajax({
                    url: conpath + "/parkData",
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        data.forEach(function (d) {
                            that.pqList.push(d);
                        });
                    }
                });
            },
            getSellBuild() {
                let that = this;
                $.ajax({
                    url: conpath + "/sellBuild",
                    type: "post",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "currentPage": 1,
                        "pageSize": that.pageSize,
                        "parkId": that.currentPq == -1 ? null : that.currentPq,
                        "space1": that.currSpace == '-1' ? null : that.currSpace,
                        "application": that.currUse == '全部' ? null : that.currUse
                    }),
                    dataType: "json",
                    success: function (data) {
                        let dataList = data.list;
                        that.contentList = dataList;
                        that.pointList = [];
                        dataList.forEach(function (d) {
                            // 添加选择地址
                            if (!d.point) return;
                            let pList = d.point.split('@');
                            pList.forEach(function (point) {
                                that.pointList.push(d);
                            });
                        });
                        that.loadMap(that.pointList);
                    }
                });
            },
        }
    })
</script>

</html>