278 lines
7.1 KiB
Vue
278 lines
7.1 KiB
Vue
<style lang='scss' scoped>
|
|
.kong{display:inline-block;width:30rpx;}
|
|
.row-number{
|
|
display: flex;
|
|
}
|
|
.projectMap{
|
|
width: 100%;
|
|
height: 100%;
|
|
&-map{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
&-total{
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 20rpx;
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
padding-right: 0;
|
|
width: 200rpx;
|
|
border-radius: $uni-border-radius-lg;
|
|
box-shadow: $box-shadow;
|
|
.row{
|
|
/* #ifndef APP-PLUS */
|
|
display: flex;
|
|
/* #endif */
|
|
justify-content: space-between;
|
|
padding-bottom: 40rpx;
|
|
font-weight: bold;
|
|
font-family: -apple-system;
|
|
&:last-child{
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-getPt{
|
|
position: absolute;
|
|
bottom: 260rpx;
|
|
right: 20rpx;
|
|
background-color: #FFFFFF;
|
|
padding: 10rpx;
|
|
border-radius: $uni-border-radius-lg;
|
|
box-shadow: $box-shadow;
|
|
.current-img{
|
|
width: 63rpx;
|
|
height: 63rpx;
|
|
}
|
|
}
|
|
|
|
&-option{
|
|
position: absolute;
|
|
bottom: 80rpx;
|
|
right: 20rpx;
|
|
background-color: #FFFFFF;
|
|
padding: 10rpx;
|
|
border-radius: $uni-border-radius-lg;
|
|
box-shadow: $box-shadow;
|
|
.add{
|
|
border-bottom: 1rpx solid #ececec;
|
|
}
|
|
.add-img{
|
|
width: 63rpx;
|
|
height: 63rpx;
|
|
}
|
|
.cut-img{
|
|
width: 63rpx;
|
|
height: 63rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="projectMap">
|
|
<map id="maps" class="projectMap-map"
|
|
:latitude="mapCoordinate.latitude"
|
|
:longitude="mapCoordinate.longitude"
|
|
:markers="mapMarkers"
|
|
:show-location="true"
|
|
:scale="scale"
|
|
@callouttap="onClickCallout">
|
|
|
|
<!-- 汇总 -->
|
|
<cover-view class="projectMap-map-total">
|
|
<cover-view class="row">
|
|
<cover-view>项目总数</cover-view>
|
|
<cover-view class="row-number" style="color: #008CFF;">{{(projectList && projectList.length) || 0}}<cover-view class="kong"></cover-view></cover-view>
|
|
|
|
</cover-view>
|
|
<cover-view class="row">
|
|
<cover-view>设备总数</cover-view>
|
|
<cover-view class="row-number" style="color: #50CF89;">{{mapDeviceTotal}}<cover-view class="kong"></cover-view></cover-view>
|
|
|
|
</cover-view>
|
|
<cover-view class="row">
|
|
<cover-view>在线总数</cover-view>
|
|
<cover-view class="row-number" style="color: #50CF89;">{{mapOnlineTotal}}<cover-view class="kong"></cover-view></cover-view>
|
|
|
|
</cover-view>
|
|
<cover-view class="row">
|
|
<cover-view>报警总数</cover-view>
|
|
<cover-view class="row-number" style="color: #FF5E5A;">{{mapAlarmTotal}}<cover-view class="kong"></cover-view></cover-view>
|
|
|
|
</cover-view>
|
|
<cover-view class="row">
|
|
<cover-view>今日报警数</cover-view>
|
|
<cover-view class="row-number" style="color: #FF5E5A;">{{mapTodayAlarm}}<cover-view class="kong"></cover-view></cover-view>
|
|
|
|
</cover-view>
|
|
</cover-view>
|
|
|
|
<!-- 当前点 -->
|
|
<cover-view class="projectMap-map-getPt" @click="currentLocation">
|
|
<cover-image src="http://static.drgyen.com/app/hc-app-power/images/project/curPosition-btn.png" class="current-img"></cover-image>
|
|
</cover-view>
|
|
|
|
<!-- 操作 -->
|
|
<cover-view class="projectMap-map-option">
|
|
<cover-view class="add" @click="scaleAddFn">
|
|
<cover-image src="http://static.drgyen.com/app/hc-app-power/images/project/addScale.png" class="add-img"></cover-image>
|
|
</cover-view>
|
|
<cover-view class="cut" @click="scaleCutFn">
|
|
<cover-image src="http://static.drgyen.com/app/hc-app-power/images/project/cutScale.png" class="cut-img"></cover-image>
|
|
</cover-view>
|
|
</cover-view>
|
|
</map>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
var _this;
|
|
export default {
|
|
data() {
|
|
return {
|
|
projectList:null,
|
|
mapCoordinate:null,
|
|
mapCtx: null,
|
|
mapMarkers:[],
|
|
mapAlarmTotal:0,
|
|
mapDeviceTotal:0,
|
|
mapTodayAlarm:0,
|
|
mapOnlineTotal:0,
|
|
includePoints: [],
|
|
scale: 8
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
_this = this;
|
|
if(e && e.projectList){
|
|
this.projectList = JSON.parse(e.projectList);
|
|
this.mapCoordinate = {
|
|
latitude:this.projectList[0].projectLat,
|
|
longitude:this.projectList[0].projectLng
|
|
}
|
|
// console.log(this.projectList,"projectList");
|
|
this.getMarkersListFn();
|
|
} else{
|
|
this.mapCoordinate = {
|
|
latitude:26.028788,
|
|
longitude:119.216327
|
|
}
|
|
}
|
|
},
|
|
onReady() {
|
|
console.log('onReady')
|
|
if (!this.mapCtx) {
|
|
this.mapCtx = uni.createMapContext("maps"); // map 组件绑定，操作对应的 map 组件
|
|
}
|
|
setTimeout(() => {
|
|
this.includePointFn(this.includePoints);
|
|
this.getCurScale().then(res => {
|
|
let s = res.scale;
|
|
_this.scale = Number(s);
|
|
})
|
|
}, 500)
|
|
},
|
|
methods: {
|
|
getMarkersListFn(){
|
|
this.projectList.forEach((item)=>{
|
|
this.mapAlarmTotal += item.tenantIndexVo.alarmTotal;
|
|
this.mapDeviceTotal += item.tenantIndexVo.deviceTotal;
|
|
this.mapTodayAlarm += item.tenantIndexVo.todayAlarmTotal;
|
|
this.mapOnlineTotal += item.tenantIndexVo.onlineTotal;
|
|
this.$get("/app/alarm/table",{projectId:item.projectId,alarmDivide:"ALARM"}).then((res)=>{
|
|
let processStateList = res.rows.filter((item)=>{
|
|
return item.processState == 1;
|
|
})
|
|
let alarmStr = "";
|
|
processStateList.forEach((item)=>{
|
|
// alarmStr += `${item.spaceName}${item.deviceName}发生${item.typeName},`;
|
|
alarmStr += `${item.typeName},`;
|
|
})
|
|
this.mapMarkers.push({
|
|
id:item.projectId,
|
|
latitude: item.projectLat,
|
|
longitude: item.projectLng,
|
|
iconPath: 'http://static.drgyen.com/app/hc-app-power/images/project/location-blue.png',
|
|
width:20,
|
|
height:22,
|
|
callout:{//终点的点击气泡
|
|
content: `设备数：${item.tenantIndexVo.deviceTotal}`,
|
|
borderRadius:6,
|
|
bgColor:"#FFFFFF",
|
|
padding: 8,
|
|
display:"ALWAYS",
|
|
textAlign:"center"
|
|
}
|
|
})
|
|
this.includePoints.push({
|
|
latitude: item.projectLat,
|
|
longitude: item.projectLng
|
|
})
|
|
|
|
});
|
|
})
|
|
},
|
|
includePointFn(points){
|
|
this.mapCtx.includePoints({
|
|
padding: [10],
|
|
points: points
|
|
})
|
|
},
|
|
currentLocation() {
|
|
//当前位置
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
success(res) {
|
|
_this.mapCoordinate = {
|
|
latitude: res.latitude,
|
|
longitude: res.longitude
|
|
}
|
|
_this.mapCtx.moveToLocation({ //将中心点移回当前位置
|
|
latitude: res.latitude,
|
|
longitude: res.longitude
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getCurScale() {
|
|
return new Promise((resolve, reject) => {
|
|
this.mapCtx.getScale({
|
|
success(res) {
|
|
resolve(res);
|
|
},
|
|
fail(err) {
|
|
reject(err);
|
|
}
|
|
})
|
|
})
|
|
},
|
|
scaleAddFn() {
|
|
this.getCurScale().then(res => {
|
|
let s = res.scale;
|
|
_this.scale = Number(s) + 1 > 20? 20 : Number(s) + 1;
|
|
console.log(_this.scale);
|
|
})
|
|
},
|
|
scaleCutFn() {
|
|
this.getCurScale().then(res => {
|
|
let s = res.scale;
|
|
_this.scale = Number(s) - 1 < 4? 4 : Number(s) - 1;
|
|
console.log(_this.scale);
|
|
})
|
|
},
|
|
onClickCallout(e) {
|
|
console.log(e)
|
|
const proId = e.detail.markerId;
|
|
if(proId) {
|
|
uni.navigateTo({
|
|
url: `/pages/project/index?projectId=${proId}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|