|
|
@@ -33,7 +33,7 @@
|
|
|
<div class="building-information-title">
|
|
|
{{ BuildingInformationProperties.c_resource_name || BuildingInformationProperties.c_parcel_number+'地块' }}
|
|
|
</div>
|
|
|
- <div style="overflow-y: auto;overflow-x: hidden;max-height: 50vh;">
|
|
|
+ <div style="overflow-y: auto;overflow-x: hidden;max-height: 50vh;padding: 0px 10px;">
|
|
|
<!-- <div>
|
|
|
企业服务专员{{
|
|
|
BuildingInformationProperties.c_building_manager_name +
|
|
|
@@ -43,9 +43,17 @@
|
|
|
</div> -->
|
|
|
<div class="info-item">
|
|
|
<!-- <span class="info-icon industry-icon"></span> -->
|
|
|
-
|
|
|
- <div style="padding: 10px 0;" v-for="(item, index) in BuildingInformationProperties.cy_lable.split('、')" :key="index">
|
|
|
- <span class="cy_lable">{{item}}</span>
|
|
|
+ <!-- 地块颜色 areaColors 0为商业 1为商办/办公/混合 2为研发 -->
|
|
|
+ <div style="padding: 10px 0px 0px 0px" v-for="(item, index) in BuildingInformationProperties.cy_lable.split('、')" :key="index">
|
|
|
+ <div v-if="BuildingInformationProperties.column_name == '地块表'">
|
|
|
+ <span v-if="item.includes('商业')" class="cy_lable dk_sy">{{item}}</span>
|
|
|
+ <span v-else-if="item.includes('研发')" class="cy_lable dk_yf">{{item}}</span>
|
|
|
+ <span v-else class="cy_lable dk_other">{{item}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <span class="cy_lable">{{item}}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="info-item" v-if="isDataTypeFlag == 1">
|
|
|
@@ -60,7 +68,7 @@
|
|
|
<div class="area-stat-item">
|
|
|
<!-- <div class="circle-icon"></div> -->
|
|
|
<div class="area-info">
|
|
|
- <div class=""><img
|
|
|
+ <div class="" v-if="isDataTypeFlag == 1"><img
|
|
|
:src="buildingImg"
|
|
|
mode="scaleToFill"
|
|
|
/></div>
|
|
|
@@ -73,7 +81,7 @@
|
|
|
<div class="area-stat-item">
|
|
|
<!-- <div class="circle-icon"></div> -->
|
|
|
<div class="area-info">
|
|
|
- <div class=""><img
|
|
|
+ <div class="" v-if="isDataTypeFlag == 1"><img
|
|
|
:src="chartImg"
|
|
|
mode="scaleToFill"
|
|
|
/></div>
|
|
|
@@ -86,7 +94,7 @@
|
|
|
<div class="area-stat-item">
|
|
|
<!-- <div class="circle-icon"></div> -->
|
|
|
<div class="area-info">
|
|
|
- <div class=""><img
|
|
|
+ <div class="" v-if="isDataTypeFlag == 1"><img
|
|
|
:src="homeImg"
|
|
|
mode="scaleToFill"
|
|
|
/></div>
|
|
|
@@ -97,12 +105,12 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="info-item" v-if="isDataTypeFlag == 1">
|
|
|
+ <div class="info-item" style="margin-top: 0px;" v-if="isDataTypeFlag == 1">
|
|
|
占地面积
|
|
|
</div>
|
|
|
<div class="info-item" v-if="isDataTypeFlag == 1">
|
|
|
<span>{{BuildingInformationProperties.c_floor_area}}m²</span>
|
|
|
- <span style="color: #787575cc;padding-left: 20px;"> 租金{{BuildingInformationProperties.c_rent}}</span>
|
|
|
+ <span style="color: #787575cc;padding-left: 20px;font-size: 14px;">租金{{BuildingInformationProperties.c_rent}}</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="info-item" v-if="isDataTypeFlag == 1">
|
|
|
@@ -110,7 +118,7 @@
|
|
|
</div>
|
|
|
<div class="info-item" v-if="isDataTypeFlag == 1">
|
|
|
<span>{{BuildingInformationProperties.c_building_area}}m²</span>
|
|
|
- <span style="color: #787575cc;padding-left: 20px;"> 物业费{{BuildingInformationProperties.c_property_fee}}</span>
|
|
|
+ <span style="color: #787575cc;padding-left: 20px;font-size: 14px;">物业费{{BuildingInformationProperties.c_property_fee}}</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="info-item" v-if="isDataTypeFlag == 1">
|
|
|
@@ -118,7 +126,7 @@
|
|
|
</div>
|
|
|
<div class="info-item" v-if="isDataTypeFlag == 1">
|
|
|
<span>{{BuildingInformationProperties.c_vacant_area}}m²</span>
|
|
|
- <span style="color: #787575cc;padding-left: 20px;"> 楼栋{{ BuildingInformationProperties.buildCount }}栋</span>
|
|
|
+ <span style="color: #787575cc;padding-left: 20px;font-size: 14px;">楼栋{{ BuildingInformationProperties.buildCount }}栋</span>
|
|
|
</div>
|
|
|
|
|
|
<!-- <div>
|
|
|
@@ -163,7 +171,12 @@
|
|
|
<label class="layer-checkbox" v-if="URLParams.type == 2 || URLParams.type == undefined">
|
|
|
<input type="checkbox" v-model="showPlotLayer" />
|
|
|
<span class="custom-checkbox"></span>
|
|
|
- <span class="checkbox-label" style="color: #409eff">地块</span>
|
|
|
+ <span class="checkbox-label" style="color: #4facfe">地块</span>
|
|
|
+ </label>
|
|
|
+ <label class="layer-checkbox" v-if="URLParams.type == 2 || URLParams.type == undefined">
|
|
|
+ <input type="checkbox" v-model="showXZPlotLayer" />
|
|
|
+ <span class="custom-checkbox"></span>
|
|
|
+ <span class="checkbox-label" style="color: #4facfe">地块性质</span>
|
|
|
</label>
|
|
|
<label class="layer-checkbox" v-if="URLParams.type == 1 || URLParams.type == undefined">
|
|
|
<input type="checkbox" v-model="showBuildingLayer" />
|
|
|
@@ -230,6 +243,7 @@ export default {
|
|
|
searchTimer: null, // 新增防抖定时器
|
|
|
oauthToken: "",
|
|
|
showPlotLayer: true, // 地块图层显示状态
|
|
|
+ showXZPlotLayer: true, // 地块性质图层显示状态
|
|
|
showBuildingLayer: true, // 楼宇图层显示状态
|
|
|
// 测距相关状态
|
|
|
isMeasuring: false, // 是否正在测距
|
|
|
@@ -254,6 +268,7 @@ export default {
|
|
|
homeImg:require("../../public/static/image/home.png"),
|
|
|
chartImg:require("../../public/static/image/chart.png"),
|
|
|
buildingImg:require("../../public/static/image/building.png"),
|
|
|
+ areaColors:['rgba(255, 0, 0, 1)','rgba(192, 0, 0, 1)','rgba(255, 127, 0, 1)'] // 索引 0为商业 1为商办/办公/混合 2为研发
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -268,6 +283,9 @@ export default {
|
|
|
showPlotLayer(newVal) {
|
|
|
this.toggleLayer("dkModelColChName", newVal);
|
|
|
},
|
|
|
+ showXZPlotLayer(newVal) {
|
|
|
+ this.toggleLayer("dkXZModelColChName", newVal);
|
|
|
+ },
|
|
|
showBuildingLayer(newVal) {
|
|
|
this.toggleLayer("lyModelColChName", newVal);
|
|
|
},
|
|
|
@@ -517,13 +535,15 @@ export default {
|
|
|
});
|
|
|
return layer;
|
|
|
},
|
|
|
- addPolygon(feature, color, configKey, groupsName) {
|
|
|
+ addPolygon(feature, color, configKey, groupsName, fillOpacity,itemName) {
|
|
|
+
|
|
|
let polygon = L.polygon(feature.geometry.coordinates, {
|
|
|
color: color,
|
|
|
weight: 1,
|
|
|
fillColor: color,
|
|
|
opacity: 1,
|
|
|
- fillOpacity: 0.15,
|
|
|
+ fillOpacity: fillOpacity,
|
|
|
+ itemName:itemName
|
|
|
}).addTo(map2DViewer.groups[groupsName + "_polygon"]);
|
|
|
|
|
|
// 计算多边形质心（使用turf.js提高精度，如果未引入可使用边界框中心）
|
|
|
@@ -548,15 +568,17 @@ export default {
|
|
|
// 创建marker并添加浮动动画
|
|
|
const marker = L.marker(centroid, {
|
|
|
icon: customIcon,
|
|
|
+ itemName:itemName,
|
|
|
riseOnHover: true,
|
|
|
}).addTo(map2DViewer.groups[groupsName + "_polygon"]);
|
|
|
|
|
|
marker.on("click", (e) => {
|
|
|
- // console.log("wwwwww"+JSON.stringify(e));
|
|
|
+ // console.log("wwwwww"+e);
|
|
|
this.BuildingInformationShow = true;
|
|
|
// 创建弹窗内容
|
|
|
const properties = feature.properties;
|
|
|
-
|
|
|
+ // console.log("properties"+JSON.stringify(properties));
|
|
|
+ properties.itemName = e.target.options.itemName
|
|
|
if(properties.column_name == '楼宇表'){
|
|
|
this.isDataTypeFlag = 1
|
|
|
}else{
|
|
|
@@ -600,6 +622,7 @@ export default {
|
|
|
this.BuildingInformationShow = true;
|
|
|
// 创建弹窗内容
|
|
|
const properties = feature.properties;
|
|
|
+ properties.itemName = e.target.options.itemName
|
|
|
if(properties.column_name == '楼宇表'){
|
|
|
this.isDataTypeFlag = 1
|
|
|
}else{
|
|
|
@@ -733,11 +756,16 @@ export default {
|
|
|
if (map2DViewer.map.hasLayer(map2DViewer.groups["dkModelColChName_polygon"])) {
|
|
|
map2DViewer.groups["dkModelColChName_polygon"].remove();
|
|
|
}
|
|
|
+ if (map2DViewer.map.hasLayer(map2DViewer.groups["dkXZModelColChName_polygon"])) {
|
|
|
+ map2DViewer.groups["dkXZModelColChName_polygon"].remove();
|
|
|
+ }
|
|
|
// 请求并渲染新的区域图层
|
|
|
get(baseUrl+"static/json/地块数据-20250820.geojson", "").then((geoJson) => {
|
|
|
// 存放所有的面数据
|
|
|
map2DViewer.groups["dkModelColChName_polygon"] = L.featureGroup();
|
|
|
map2DViewer.groups["dkModelColChName_polygon"].addTo(map2DViewer.map);
|
|
|
+ map2DViewer.groups["dkXZModelColChName_polygon"] = L.featureGroup();
|
|
|
+ map2DViewer.groups["dkXZModelColChName_polygon"].addTo(map2DViewer.map);
|
|
|
geoJson.features.map((feature) => {
|
|
|
let correctCordArr = JSON.parse(JSON.stringify(feature.geometry.coordinates));
|
|
|
let newCorrectCoordArr = publicFun.latLngsToReverseByLngLat(correctCordArr);
|
|
|
@@ -763,22 +791,33 @@ export default {
|
|
|
}
|
|
|
|
|
|
if(flag == true){
|
|
|
+ let color = that.areaColors[0]
|
|
|
+ if(feature.properties.content.includes('商业')){
|
|
|
+ color = that.areaColors[0]
|
|
|
+ }else if(feature.properties.content.includes('研发')){
|
|
|
+ color = that.areaColors[2]
|
|
|
+ }else{
|
|
|
+ color = that.areaColors[1]
|
|
|
+ }
|
|
|
if(that.URLParams.code){
|
|
|
if(feature.properties.c_parcel_number == that.URLParams.code){
|
|
|
const markerName =
|
|
|
feature.properties.c_parcel_name ||
|
|
|
"未命名区域";
|
|
|
this.landDatas[markerName] = feature;
|
|
|
- this.addPolygon(feature, "#409EFF", configKey, "dkModelColChName");
|
|
|
+ this.addPolygon(feature, color, configKey, "dkModelColChName", 1,'地块');
|
|
|
+
|
|
|
+ this.addPolygon(feature, '#4facfe', configKey, "dkXZModelColChName", 0.15,'地块性质');
|
|
|
}
|
|
|
}else{
|
|
|
const markerName =
|
|
|
feature.properties.c_parcel_name ||
|
|
|
"未命名区域";
|
|
|
this.landDatas[markerName] = feature;
|
|
|
- this.addPolygon(feature, "#409EFF", configKey, "dkModelColChName");
|
|
|
+ this.addPolygon(feature, color, configKey, "dkModelColChName", 1,'地块');
|
|
|
+
|
|
|
+ this.addPolygon(feature, '#4facfe', configKey, "dkXZModelColChName", 0.15,'地块性质');
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
@@ -823,14 +862,14 @@ export default {
|
|
|
feature.properties.c_resource_name ||
|
|
|
"未命名区域";
|
|
|
this.landDatas[markerName] = feature;
|
|
|
- this.addPolygon(feature, "#67C23A", configKey, "lyModelColChName");
|
|
|
+ this.addPolygon(feature, "#67C23A", configKey, "lyModelColChName", 0.15,'楼宇');
|
|
|
}
|
|
|
}else{
|
|
|
const markerName =
|
|
|
feature.properties.c_resource_name ||
|
|
|
"未命名区域";
|
|
|
this.landDatas[markerName] = feature;
|
|
|
- this.addPolygon(feature, "#67C23A", configKey, "lyModelColChName");
|
|
|
+ this.addPolygon(feature, "#67C23A", configKey, "lyModelColChName", 0.15,'楼宇');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -1303,7 +1342,7 @@ export default {
|
|
|
position: fixed;
|
|
|
top: 1rem;
|
|
|
left: 1rem;
|
|
|
- max-width: 500px;
|
|
|
+ max-width: 340px;
|
|
|
width: calc(100vw - 6rem);
|
|
|
z-index: 999;
|
|
|
border-radius: 0.5rem;
|
|
|
@@ -1312,20 +1351,21 @@ export default {
|
|
|
.building-information {
|
|
|
position: absolute;
|
|
|
top: 3rem;
|
|
|
- max-width: 500px;
|
|
|
+ max-width: 340px;
|
|
|
width: calc(100vw - 3rem);
|
|
|
max-height: 60vh;
|
|
|
z-index: 9999;
|
|
|
border-radius: 0.5rem;
|
|
|
background: #fff;
|
|
|
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
|
|
|
- padding: 0.5rem;
|
|
|
+ // padding: 0.5rem;
|
|
|
overflow: hidden;
|
|
|
// overflow-y: auto;
|
|
|
&-title {
|
|
|
font-size: 1.5rem;
|
|
|
font-weight: bold;
|
|
|
padding: 0.5rem;
|
|
|
+ padding: 0.5rem 0.5rem 0 1rem;
|
|
|
// border-bottom: 1px solid #eee;
|
|
|
}
|
|
|
}
|
|
|
@@ -1334,7 +1374,7 @@ export default {
|
|
|
.info-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- margin: 10px;
|
|
|
+ margin: 10px 5px;
|
|
|
flex-wrap: wrap;
|
|
|
// justify-content: space-between;
|
|
|
.cy_lable{
|
|
|
@@ -1344,6 +1384,16 @@ export default {
|
|
|
border-radius: 5px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
+ // 索引 0为商业 1为商办/办公/混合 2为研发
|
|
|
+ .dk_sy{
|
|
|
+ background: rgba(255, 0, 0, 1) !important;
|
|
|
+ }
|
|
|
+ .dk_yf{
|
|
|
+ background: rgba(255, 127, 0, 1) !important;
|
|
|
+ }
|
|
|
+ .dk_other{
|
|
|
+ background: rgba(192, 0, 0, 1) !important;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.info-icon {
|
|
|
@@ -1677,7 +1727,8 @@ export default {
|
|
|
.area-stats-container {
|
|
|
display: flex;
|
|
|
gap: 12px;
|
|
|
- padding: 10px 0;
|
|
|
+ // padding: 10px 0;
|
|
|
+ padding: 0px 10px 10px 10px;
|
|
|
}
|
|
|
|
|
|
.area-stat-item {
|
mork