|
|
<template>
|
|
|
<navigation-general :title="title">
|
|
|
<template v-slot:right>
|
|
|
<view class="nav-right">
|
|
|
<view class="right-item">共{{buildData.length}}户</view>
|
|
|
<view class="right-item">该层未排查{{weiPaimo}}户</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<view class="floor-list" :style="{top:boxTop + 'rpx'}" :msg="mapData" :change:msg="leaflet.receiveMsg">
|
|
|
<view :class="currentIndex == index ? 'active-foolt' : ''" v-for="(item, index) in list" :key="index"
|
|
|
@click="clickFoort(item,index)">
|
|
|
{{ item.name }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view id="map" class="map"></view>
|
|
|
</navigation-general>
|
|
|
</template>
|
|
|
//逻辑层级
|
|
|
<script>
|
|
|
import {
|
|
|
handleColor
|
|
|
} from '@/utils/handlerColor.js'
|
|
|
import buildjson from "./buildjson/buildjson";
|
|
|
import {
|
|
|
getNumNew
|
|
|
} from "@/api/taicangpop/data";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
currentIndex: null,
|
|
|
boxTop: 0,
|
|
|
title: '',
|
|
|
deptname: '',
|
|
|
|
|
|
weiPaimo: 0,
|
|
|
totalHouse: 0,
|
|
|
mapData: null,
|
|
|
buildData: [],
|
|
|
}
|
|
|
},
|
|
|
onLoad(opt) {
|
|
|
const systemData = this.$u.sys()
|
|
|
this.boxTop = (systemData.statusBarHeight + 44) * 2 + 20
|
|
|
this.title = opt.name
|
|
|
this.deptname = opt.deptname + opt.name
|
|
|
this.buildingId = opt.buildingId
|
|
|
|
|
|
},
|
|
|
onShow(){
|
|
|
|
|
|
this.currentIndex = this.currentIndex ? this.currentIndex : 0
|
|
|
this.getBuildData(this.currentIndex)
|
|
|
},
|
|
|
methods: {
|
|
|
// 获取该楼层数据
|
|
|
async getBuildData(index) {
|
|
|
this.list = buildjson[this.deptname.replace("幢", "")];
|
|
|
|
|
|
let res = await getNumNew({
|
|
|
buildingId: this.buildingId,
|
|
|
});
|
|
|
this.buildData = res.data
|
|
|
|
|
|
this.clickFoort(this.list[index],index)
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
filterListData(index) {
|
|
|
this.weiPaimo = 0
|
|
|
this.list[index].json.features.map(item => {
|
|
|
|
|
|
let houseItem = this.buildData.find(
|
|
|
(it) =>
|
|
|
it.name.replace("室", "") == item.properties.TextString
|
|
|
);
|
|
|
if (houseItem && houseItem.id) {
|
|
|
if (item.daycount > 0) {
|
|
|
this.weiPaimo = item.weiPaimo + 1
|
|
|
}
|
|
|
houseItem = handleColor([houseItem])[0]
|
|
|
item.properties = {
|
|
|
...item.properties,
|
|
|
...houseItem
|
|
|
};
|
|
|
}
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
clickFoort(item, index) {
|
|
|
|
|
|
this.filterListData(index)
|
|
|
this.mapData = item
|
|
|
this.currentIndex = index
|
|
|
},
|
|
|
// 接收renderjs发回的数据
|
|
|
|
|
|
reciveMessage(val) {
|
|
|
if (val.isNoHouse) {
|
|
|
uni.showToast({
|
|
|
title: val.title,
|
|
|
icon: 'none'
|
|
|
})
|
|
|
} else if (val.isRouter) {
|
|
|
this.$u.route({
|
|
|
url: 'pages/house/house',
|
|
|
params: val.params
|
|
|
})
|
|
|
}
|
|
|
console.log('receiveRenderData-->', val);
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
//试图层级
|
|
|
<script module="leaflet" lang="renderjs">
|
|
|
import "leaflet/dist/leaflet.css"
|
|
|
import L from "leaflet"
|
|
|
|
|
|
let globalMap = null
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
mapData: null,
|
|
|
mapLayer: {
|
|
|
geoJsonLayer: null,
|
|
|
},
|
|
|
geojson: null,
|
|
|
previousLayer: null,
|
|
|
highlightStyle: {
|
|
|
fill: true,
|
|
|
fillColor: "#FD873F",
|
|
|
fillOpacity: 0.9,
|
|
|
color: "#02F5FF", //描边颜色
|
|
|
weight: 2, //描边宽度
|
|
|
},
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.initMap()
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
initMap() {
|
|
|
globalMap = L.map('map', {
|
|
|
center: [31.47687, 121.11881], // 地图中心[纬度，经度]
|
|
|
zoom: 11, // 地图层级
|
|
|
maxZoom: 22,
|
|
|
minZoom: 11,
|
|
|
zoomControl: false, // 放大缩小按钮
|
|
|
attributionControl: false, // 右下角leaflet图标
|
|
|
})
|
|
|
|
|
|
// L.tileLayer(
|
|
|
// 'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=9813be7882272b227babab98c39a64b6')
|
|
|
// .addTo(globalMap)
|
|
|
globalMap.createPane("geoJsonLayer");
|
|
|
globalMap.getPane("geoJsonLayer").style.zIndex = 502;
|
|
|
globalMap.getPane("geoJsonLayer").style.pointerEvents = "none";
|
|
|
this.mapLayer.geoJsonLayer = L.featureGroup().addTo(globalMap);
|
|
|
|
|
|
globalMap.createPane("marker");
|
|
|
globalMap.getPane("marker").style.zIndex = 503;
|
|
|
globalMap.getPane("marker").style.pointerEvents = "none";
|
|
|
this.mapLayer.marker = L.featureGroup().addTo(globalMap);
|
|
|
|
|
|
globalMap.on("zoomend", (e) => {
|
|
|
let zoom = globalMap.getZoom();
|
|
|
if (zoom <= 19) {
|
|
|
globalMap.removeLayer(this.mapLayer.marker);
|
|
|
} else {
|
|
|
globalMap.addLayer(this.mapLayer.marker);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
|
|
|
// 接收逻辑层发送的数据
|
|
|
receiveMsg(newValue, oldValue, ownerVm, vm) {
|
|
|
console.log('ssss', newValue)
|
|
|
if (!newValue) return
|
|
|
|
|
|
this.clickFloor(newValue)
|
|
|
//数据变化
|
|
|
|
|
|
},
|
|
|
|
|
|
clickFloor(item) {
|
|
|
if (item && item.disable) {
|
|
|
this.sendMsg({
|
|
|
isNoHouse: true,
|
|
|
title: '该楼层功能正在开发中！'
|
|
|
})
|
|
|
|
|
|
return;
|
|
|
}
|
|
|
this.mapLayer.geoJsonLayer.clearLayers();
|
|
|
this.mapLayer.marker.clearLayers();
|
|
|
this.geojson = null;
|
|
|
this.initPolygon(item.json);
|
|
|
},
|
|
|
|
|
|
// 渲染面
|
|
|
initPolygon(json) {
|
|
|
this.geojson = L.geoJSON(json, {
|
|
|
pane: "geoJsonLayer",
|
|
|
style: {
|
|
|
fill: true,
|
|
|
fillColor: "#0B3369",
|
|
|
fillOpacity: 0.9,
|
|
|
color: "#02F5FF", //描边颜色
|
|
|
weight: 2, //描边宽度
|
|
|
},
|
|
|
onEachFeature: (feature, layer) => {
|
|
|
const attr = feature.properties;
|
|
|
// console.log(attr, 'ssss')
|
|
|
|
|
|
|
|
|
const point = layer._bounds.getCenter();
|
|
|
this.addTextMarker(attr, point);
|
|
|
|
|
|
layer.on("click", (e) => {
|
|
|
const item = e.target.feature.properties;
|
|
|
if (item.TextString == null) return;
|
|
|
if (!item.id) {
|
|
|
this.sendMsg({
|
|
|
isNoHouse: true,
|
|
|
title: '该户数据缺失,请联系管理员!'
|
|
|
})
|
|
|
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
|
|
|
if (this.previousLayer) {
|
|
|
this.geojson.resetStyle(this.previousLayer);
|
|
|
}
|
|
|
this.previousLayer = layer;
|
|
|
layer.setStyle(this.highlightStyle);
|
|
|
|
|
|
this.sendMsg({
|
|
|
isRouter: true,
|
|
|
params: {
|
|
|
buildingId: item.building_id,
|
|
|
houseId: item.id,
|
|
|
deptId: item.dept_id,
|
|
|
houseName: item.name
|
|
|
}
|
|
|
})
|
|
|
|
|
|
});
|
|
|
},
|
|
|
}).addTo(this.mapLayer.geoJsonLayer);
|
|
|
|
|
|
globalMap.fitBounds(this.geojson.getBounds());
|
|
|
},
|
|
|
addTextMarker(attr, point) {
|
|
|
if (attr.TextString == null) return;
|
|
|
var myIcon = L.divIcon({
|
|
|
className: "building-marker",
|
|
|
html: `<div class="houser">
|
|
|
<div class="point-color">
|
|
|
<div style="background: red;display:${
|
|
|
attr.daycount > 0 ? "block" : "none"
|
|
|
}"></div>
|
|
|
<div style="background: green;display:${
|
|
|
attr.daycount == 0 ? "block" : "none"
|
|
|
}"></div>
|
|
|
</div>
|
|
|
<div class="house-is">
|
|
|
<div class="is_d is_type" style="display:${attr.is_d ? "block" : "none"}"> </div>
|
|
|
<div class="is_j is_type" style="display:${attr.is_j ? "block" : "none"}"> </div>
|
|
|
<div class="is_k is_type" style="display:${attr.is_k ? "block" : "none"}"> </div>
|
|
|
<div class="is_x is_type" style="display:${attr.is_x ? "block" : "none"}"> </div>
|
|
|
|
|
|
</div>
|
|
|
<div class="house-name">${attr.TextString}</div>
|
|
|
<div class="left-color" style="background:${attr.leftColor}"></div>
|
|
|
<div class="right-color">
|
|
|
<div style=" background: ${attr.rightTopColor} "></div>
|
|
|
<div
|
|
|
class="rigth-bottom"
|
|
|
style="display:${
|
|
|
attr.color == "HF" || attr.color == "NF" ? "block" : "none"
|
|
|
}"
|
|
|
></div>
|
|
|
</div>
|
|
|
</div>`,
|
|
|
});
|
|
|
L.marker([point.lat, point.lng], {
|
|
|
icon: myIcon,
|
|
|
interactive: false, //禁止marker交互，防止遮挡点不到面
|
|
|
}).addTo(this.mapLayer.marker);
|
|
|
},
|
|
|
sendMsg(item) {
|
|
|
// 向页面传参
|
|
|
this.$ownerInstance.callMethod('reciveMessage', item)
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.app-container {
|
|
|
position: relative;
|
|
|
|
|
|
.nav-right {
|
|
|
margin-right: 14rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
|
|
|
.right-item {
|
|
|
box-sizing: border-box;
|
|
|
padding: 0 6rpx;
|
|
|
font-size: 22rpx;
|
|
|
background: #fff;
|
|
|
color: red;
|
|
|
}
|
|
|
|
|
|
.right-item:last-child {
|
|
|
margin-top: 4rpx;
|
|
|
background-color: red;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.floor-list {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
z-index: 600;
|
|
|
width: 260rpx;
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
/* 每行两个元素 */
|
|
|
gap: 10px;
|
|
|
/* 元素之间的间距 */
|
|
|
padding: 16rpx;
|
|
|
|
|
|
/* 容器内边距 */
|
|
|
&>view {
|
|
|
text-align: center;
|
|
|
color: #fff;
|
|
|
cursor: pointer;
|
|
|
padding: 8rpx 12rpx;
|
|
|
font-size: 30rpx;
|
|
|
border: 1px solid #0075b7;
|
|
|
border-radius: 6px;
|
|
|
margin-bottom: 6px;
|
|
|
background: #031c3c;
|
|
|
}
|
|
|
|
|
|
&>div:hover,
|
|
|
.active-foolt {
|
|
|
background: #1292c7 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.map {
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
</style> |
