|
|
@@ -68,6 +68,43 @@
|
|
|
background: #FFFFFF;
|
|
|
}
|
|
|
|
|
|
+ .tjdz {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tjdz li {
|
|
|
+ /* width: 165px; */
|
|
|
+ width: auto;
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid #DADADA;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tjdz li:hover {
|
|
|
+ background: #DEEDFF;
|
|
|
+ border: 1px solid #4B98F6;
|
|
|
+ color: #4B98F6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tjdz li.active {
|
|
|
+ background: #4B98F6;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border: 1px solid #4B98F6;
|
|
|
+ }
|
|
|
+ .contentleft>.content{
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
.content .search {
|
|
|
display: flex;
|
|
|
margin: 10px;
|
|
|
@@ -105,10 +142,12 @@
|
|
|
.content .con {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- margin-top: 25px;
|
|
|
- height: calc(100% - 103px);
|
|
|
+ margin-top: 15px;
|
|
|
+ height: calc(100% - 273px);
|
|
|
overflow-y: scroll;
|
|
|
align-content: flex-start;
|
|
|
+ background: #fff;
|
|
|
+ padding: 10px;
|
|
|
}
|
|
|
|
|
|
.content .con::-webkit-scrollbar {
|
|
|
@@ -192,10 +231,10 @@
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: center;
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #999999;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
@@ -215,12 +254,19 @@
|
|
|
<div style="display: flex;">
|
|
|
<div class="contentleft">
|
|
|
<div class="content">
|
|
|
- <div class="search">
|
|
|
- <input v-model="inputValue" class="input" placeholder="请输入关键字进行搜索"></input>
|
|
|
- <div class="btn" @click="searchData">搜索</div>
|
|
|
+ <div style="background: #fff;padding:10px;">
|
|
|
+ <div class="tjdz">
|
|
|
+ <li v-for="(item,index) in pqList" :class="{ active: currentPq == item.id }" :key="index"
|
|
|
+ @click="handleParkChange(item)">{{item.title}}</li>
|
|
|
+ </div>
|
|
|
+ <div class="search">
|
|
|
+ <input v-model="inputValue" class="input" placeholder="请输入关键字进行搜索"></input>
|
|
|
+ <div class="btn" @click="searchData">搜索</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="con">
|
|
|
- <div class="zwsj" v-if="!this.contentList.length">暂无数据</div>
|
|
|
+ <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="goToLink('tdcr.html?tdid=' + item.id)">
|
|
|
<div class="bg">
|
|
|
@@ -245,11 +291,13 @@
|
|
|
return {
|
|
|
// reqPtah: 'http://172.16.99.105:8082',
|
|
|
reqPtah: '',
|
|
|
- currentPq: 1,
|
|
|
contentList: [],
|
|
|
pageSize: 1000,
|
|
|
pointList: [],
|
|
|
- inputValue: ''
|
|
|
+ currentPq: -1,
|
|
|
+ inputValue: '',
|
|
|
+ pqList: [
|
|
|
+ ],
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -257,7 +305,7 @@
|
|
|
const id = url.searchParams.get('id');
|
|
|
this.currentPq = id;
|
|
|
this.getParkDetail();
|
|
|
- this.getSellBuild(id);
|
|
|
+ this.getParkData();
|
|
|
this.getSellLand(id);
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -266,8 +314,13 @@
|
|
|
window.location.href = "ztcrdetail.html?ztid=" + id;
|
|
|
}
|
|
|
},
|
|
|
+ handleParkChange(data) {
|
|
|
+ this.currentPq = data.id;
|
|
|
+ this.inputValue='';
|
|
|
+ this.getParkDetail();
|
|
|
+ this.getSellLand(data.id);
|
|
|
+ },
|
|
|
searchData() {
|
|
|
- console.log(this.inputValue);
|
|
|
const url = new URL(window.location.href);
|
|
|
const id = url.searchParams.get('id');
|
|
|
this.getSellLand(id);
|
|
|
@@ -279,6 +332,24 @@
|
|
|
window.location.href = url + '?id=' + 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);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
getSellLand(id) {
|
|
|
let that = this;
|
|
|
$.ajax({
|
|
|
@@ -316,8 +387,7 @@
|
|
|
that.parkMap = new BMap.Map("mapcontainer");
|
|
|
that.parkMap.enableScrollWheelZoom();// 启用滚轮缩放
|
|
|
that.parkMap.enableDragging(); // 启用拖拽功能
|
|
|
- const addr = new URL(window.location.href);
|
|
|
- const id = addr.searchParams.get('id');
|
|
|
+ const id = that.currentPq;
|
|
|
// 设定中心点和地图级别
|
|
|
if (id == 1) {
|
|
|
that.parkMap.centerAndZoom(new BMap.Point(106.651444, 29.45682), 14);
|
|
|
@@ -344,13 +414,22 @@
|
|
|
});
|
|
|
// 创建多边形
|
|
|
let polygon = new BMap.Polygon(result, {
|
|
|
- strokeColor: "blue",
|
|
|
+ strokeColor: "#FFD119",
|
|
|
strokeWeight: 4,
|
|
|
- strokeOpacity: 0.5,
|
|
|
+ strokeOpacity: 1,
|
|
|
strokeStyle: "solid",
|
|
|
- fillColor: "#4B98F6",
|
|
|
+ fillColor: "transparent",
|
|
|
fillOpacity: 0.3
|
|
|
});
|
|
|
+ setInterval(function () {
|
|
|
+ var strColor = polygon.getStrokeColor();
|
|
|
+ console.log(strColor)
|
|
|
+ if (strColor == "#FFD119") {
|
|
|
+ polygon.setStrokeColor('red');
|
|
|
+ } else {
|
|
|
+ polygon.setStrokeColor('#FFD119');
|
|
|
+ }
|
|
|
+ }, 500)
|
|
|
// 将多边形添加到地图中
|
|
|
that.parkMap.addOverlay(polygon);
|
|
|
|
zhao
