CQ_JD
/
nazw


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
							<!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">
    <link rel="stylesheet" href="swiper/swiper-bundle.css">
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/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>
        #tdcr>.top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #B7C7DC;
            background: #FFFFFF;
        }

        .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;
        }
        .contentleft>.list .listitm{
            width: 32.5%;
        }

        .swiperimg {
            display: flex;
            justify-content: space-between;
            position: relative;
        }

        .swiper {
            width: 20%;
            min-width: 170px;
            height: 320px;
            margin: auto 0;
        }

        .swiper-slide {
            width: 100%;
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swiper-slide img {
            width: 100%;
            height: 104px;
            cursor: pointer;
        }

        .swiper-button-next,
        .swiper-button-prev {
            /* 移除所有样式 */
            all: unset;
            position: absolute;
            z-index: 20;
            color: #666;
            transform: translateY(-50%) rotate(270deg);
            width: 27px;
            height: 170px;
            background: #FFFFFF;
            right: 71px;
            display: flex;
            align-items: center;
            background-size: 100% 100%;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
            padding-top: 5px;
            box-sizing: border-box;
        }

        .swiper-button-next {
            top: 10px;
        }

        .swiper-button-next img {
            transform: translateY(-50%) rotate(270deg);
        }

        .swiper-button-prev {
            top: 382px;
        }

        .swiper-button-prev img {
            transform: translateY(-50%) rotate(270deg);
        }

        .swiper-button-prev:after,
        .swiper-rtl .swiper-button-next:after {
            content: '';
        }

        .swiper-button-next:after,
        .swiper-rtl .swiper-button-prev:after {
            content: '';
        }

        .swiper-button-prev.swiper-button-disabled,
        .swiper-button-next.swiper-button-disabled {
            display: flex;
            align-items: center;
            justify-content: center;
            /* opacity: 1; */
            padding-top: 5px;
            box-sizing: border-box;
        }

        @media screen and (min-width:1860px) and (max-width:1920px) {

            .swiper-button-next,
            .swiper-button-prev {
                height: 177px;
                right: 74px;
            }

        }

        @media screen and (min-width:1600px) and (max-width:1900px) {

            .swiper-button-next,
            .swiper-button-prev {
                height: 170px;
                right: 71px;
            }
        }

        @media screen and (max-width:1600px) {

            .swiper-button-next,
            .swiper-button-prev {
                height: 170px;
                right: 71px;
            }
        }
    </style>
</head>


<body>
    <div id="tdcr">
        <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="itemname" style="display: flex;flex-direction: column;">
                    <span>{{ tdcrDetail.landName }}</span>
                    <span style="font-size: 26px;">(业主单位：{{
                        tdcrDetail.ownerUnit }})</span>
                </div>
                <div class="swiperimg">
                    <img :src="imgUrl" alt="" style="width: 75%;height: 394px;">
                    <div class="swiper-button-prev"><img src="images/toparrow.png" alt=""></div>
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide list" v-for="(item,index) in swiperList" @click="imgDetail(item)">
                                <img :src="item" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-next"><img src="images/bottomarrow.png" alt=""></div>
                </div> 
                <div class="list">
                    <div class="listitm" style="background-color: #4EB2AD;">
                        <span>占地面积</span>
                        <span>{{ tdcrDetail.landArea?tdcrDetail.landArea:'-' }}&nbsp;亩</span>
                    </div>
                    <div class="listitm" style="background-color: #4BB664;">
                        <span>主导产业</span>
                        <span>{{ tdcrDetail.businessIndustry?tdcrDetail.businessIndustry:'-' }}</span>
                    </div>
                    <!-- <div class="listitm" style="background-color: #4B98F6;">
                        <span>土地用途</span>
                        <span>{{ tdcrDetail.landFunction }}</span>
                    </div>
                    <div class="listitm" style="background-color: #4BB664;">
                        <span>招引产业</span>
                        <span>{{ tdcrDetail.businessIndustry }}</span>
                    </div> -->
                    <div class="listitm" style="background-color: #DFC483;">
                        <span>可用地情况</span>
                        <span>{{ tdcrDetail.landState==1?"可用":"不可用" }}</span>
                    </div>
                </div>
                <div class="text">
                    <!-- <div style="align-items: flex-start;">
                        <span>主导产业：</span>
                        <div class="icon"
                            v-for="(item,index) in (tdcrDetail.landFunction ? tdcrDetail.landFunction.split('、') : [])">
                            {{
                            item }}</div>
                    </div> -->
                    <div><span>详细地址：</span><span>{{ tdcrDetail.addr?tdcrDetail.addr:'-' }}</span></div>
                    <div><span>联系方式：</span><span>{{ tdcrDetail.contactName?tdcrDetail.contactName:'-' }}&nbsp;&nbsp;{{ tdcrDetail.contactPhone
                            }}</span></div>
                </div>
                <div class="buttontz"><span>我要投资</span></div>
                <div class="title">
                    <img src="images/gyy-title1.png" alt="">
                    <span>概况</span>
                </div>
                <div class="gk">
                    {{ tdcrDetail.introduce }}
                </div>
                <div class="title">
                    <img src="images/hyy-yscb.png" alt="">
                    <span>要素成本</span>
                </div>
                <div class="tablecon" v-html="tdcrDetail.cost">
                </div>
            </div>
            <div class="contentright" id="mapcontainer"></div>
        </div>
    </div>
</body>
<script src="swiper/swiper-bundle.js"></script>
<script>
    new Vue({
        el: '#tdcr',
        data: function () {
            return {
                reqPtah: '',
                tdcrDetail: {},
                imgUrl: '',
                swiperList: []
            }
        },
        mounted() {
            const url = new URL(window.location.href);
            const id = url.searchParams.get('tdid');
            this.getLandDetail(id);
            this.$nextTick(() => {
                var swiper = new Swiper(".mySwiper", {
                    observer: true,
                    observeParents: true,
                    direction: "vertical",
                    slidesPerView: 3,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    spaceBetween: 10
                });
            })
        },
        methods: {
            backIndex() {
                window.history.go(-1)
            },
            imgDetail(imgurl) {
                if (imgurl == "images/tdcr0.png") {
                    return
                }
                this.imgUrl = imgurl;
            },
            loadMap(points, namePoint, centerPoint) {
                let map = new BMap.Map("mapcontainer");
              
                map.enableScrollWheelZoom();// 启用滚轮缩放
                map.enableDragging(); // 启用拖拽功能
                // 设定中心点和地图级别
                if (!centerPoint) { map.centerAndZoom(new BMap.Point(106.64100001869987, 29.479255312672327), 17); } else {
                    let centerarr = centerPoint.split(',');
                    map.centerAndZoom(new BMap.Point(centerarr[0], centerarr[1]), 17);
                }
                // map.centerAndZoom(new BMap.Point(106.76976451085417, 29.59703121330567), 17);
                map.setMapType(BMAP_NORMAL_MAP);
                if (!points) 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: "#3d9bee",
                    strokeWeight: 4,
                    strokeOpacity: 0.5,
                    strokeStyle: "solid",
                    fillColor: "#4B98F6",
                    fillOpacity: 0.3
                });
                // 将多边形添加到地图中
                map.addOverlay(polygon);
                // 创建文本标签
                if (!namePoint) return;
                let namearr = namePoint.split(',');
                var opts = {
                    position: new BMap.Point(namearr[0], namearr[1]), // 指定文本标签所在的地理位置
                    offset: new BMap.Size(10, 10) // 设置文本偏移量
                };
                // var opts = {
                //     position: new BMap.Point(106.76806451085417, 29.60233121330567), // 指定文本标签所在的地理位置
                //     offset: new BMap.Size(10, 10) // 设置文本偏移量
                // };
                // 创建文本标签对象，并添加到地图
                var label = new BMap.Label(this.tdcrDetail.landName, opts);
                // 自定义文本标签样式
                label.setStyle({
                    color: "#FFFFFF",
                    fontSize: "18px",
                    height: "auto",
                    lineHeight: "20px",
                    fontFamily: "微软雅黑",
                    fontWeight: 'bold',
                    backgroundColor: 'transparent',
                    border: 'none',
                    textShadow: '0 0 4px #4B97F5',
                    textStrokeColor: "#4B97F5", // 文本描边颜色
                    textStrokeWidth: "4px", // 文本描边宽度
                });
                map.addOverlay(label);

                // // 添加选择地址
                // if (!currPoints) return;
                // let pList = currPoints.split('@');
                // pList.forEach(function (point) {
                //     let arr = point.split(',');
                //     let p = new BMap.Point(arr[0], arr[1]);
                //     let marker = new BMap.Marker(p);
                //     map.addOverlay(marker);
                // });
            },
            getLandDetail(id) {
                let that = this;
                $.ajax({
                    url: conpath + "/sellLand/" + id,
                    type: "get",
                    async: false,
                    dataType: "json",
                    success: function (d) {
                        let data = d.data;
                        console.log(data)
                        if (!data) return;
                        that.tdcrDetail = data;
                        that.swiperList = data.imgUrl ? data.imgUrl.split(",") : [];
                        if (!that.swiperList.length) {
                            that.swiperList.push('images/ztcrlistno.png')
                        }
                        that.imgUrl = that.swiperList[0];
                        let points = data.parkData.addr;
                        that.loadMap(data.point, data.namePoint, data.centerPoint)
                        // that.loadMap("106.644876,29.494949@106.635821,29.481304@106.638048,29.480675@106.645379,29.481744@106.648397,29.479921@106.65429,29.480675@106.66392,29.481367@106.663057,29.486209@106.662985,29.486901@106.666076,29.48885@106.666507,29.490233@106.665573,29.493817@106.66162,29.49564@106.661692,29.493503@106.659105,29.49344@106.658171,29.491868@106.654721,29.492874@106.65314,29.494383@106.651415,29.496143@106.649475,29.493251");
                    }
                });
            }
        }
    })
</script>

</html>