292 lines
7.1 KiB
Plaintext
292 lines
7.1 KiB
Plaintext
<style lang='scss' scoped>
|
|
.projectMap{
|
|
width: 750rpx;
|
|
/* min-height: 1214rpx; */
|
|
}
|
|
/* .projectMap-map{
|
|
position: relative;
|
|
} */
|
|
.projectMap-map-total{
|
|
position: absolute;
|
|
right: 40rpx;
|
|
top: 40rpx;
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
width: 300rpx;
|
|
/* margin-left: -300rpx; */
|
|
border-radius: $uni-border-radius-lg;
|
|
box-shadow: $box-shadow;
|
|
}
|
|
.row{
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding-bottom: 20rpx;
|
|
font-weight: bold;
|
|
}
|
|
.projectMap-map-getPt{
|
|
position: absolute;
|
|
bottom: 260rpx;
|
|
right: 20rpx;
|
|
background-color: #FFFFFF;
|
|
padding: 10rpx;
|
|
border-radius: $uni-border-radius-lg;
|
|
box-shadow: $box-shadow;
|
|
|
|
}
|
|
.row-label{
|
|
font-size: 26rpx;
|
|
}
|
|
.row-value-blue{
|
|
color: #008CFF;
|
|
}
|
|
.row-value-green{
|
|
color: #50CF89;
|
|
}
|
|
.row-value-red{
|
|
color: #FF5E5A;
|
|
}
|
|
.pb0{
|
|
padding-bottom: 0;
|
|
}
|
|
.current-img{
|
|
width: 63rpx;
|
|
height: 63rpx;
|
|
}
|
|
.projectMap-map-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" :style="{width: '100%',height: height}" :latitude="mapCoordinate.latitude" :longitude="mapCoordinate.longitude"
|
|
:markers="mapMarkers" :scale="scale" @callouttap="onClickCallout">
|
|
|
|
</map>
|
|
<view class="projectMap-map-total">
|
|
<view class="row">
|
|
<text class="row-label">项目总数</text>
|
|
<text class="row-value-blue" style="">{{(projectList && projectList.length) || 0}}</text>
|
|
</view>
|
|
<view class="row">
|
|
<text class="row-label">设备总数</text>
|
|
<text class="row-value-green">{{mapDeviceTotal}}</text>
|
|
</view>
|
|
<view class="row">
|
|
<text class="row-label">在线总数</text>
|
|
<text class="row-value-green">{{mapOnlineTotal}}</text>
|
|
</view>
|
|
<view class="row">
|
|
<text class="row-label">报警总数</text>
|
|
<text class="row-value-red">{{mapAlarmTotal}}</text>
|
|
</view>
|
|
<view class="row pb0">
|
|
<text class="row-label">今日报警数</text>
|
|
<text class="row-value-red">{{mapTodayAlarm}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 当前点 -->
|
|
<view class="projectMap-map-getPt" @click="currentLocation">
|
|
<image src="http://static.drgyen.com/app/hc-app-power/images/project/curPosition-btn.png" class="current-img"></image>
|
|
</view>
|
|
|
|
<!-- 操作 -->
|
|
<view class="projectMap-map-option">
|
|
<view class="add" @click="scaleAddFn">
|
|
<image src="http://static.drgyen.com/app/hc-app-power/images/project/addScale.png" class="add-img"></image>
|
|
</view>
|
|
<view class="cut" @click="scaleCutFn">
|
|
<image src="http://static.drgyen.com/app/hc-app-power/images/project/cutScale.png" class="cut-img"></image>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {post,get,DELETE,put} from "@/common/api/request.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
height:'1214rpx',
|
|
projectList:null,
|
|
mapCoordinate:null,
|
|
mapMarkers:[],
|
|
mapAlarmTotal:0,
|
|
mapDeviceTotal:0,
|
|
mapTodayAlarm:0,
|
|
mapOnlineTotal:0,
|
|
includePoints:[],
|
|
scale: 8
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.getSystemInfo();
|
|
// 判断页面带来参数是否有项目
|
|
if(e && e.projectList){
|
|
this.projectList = JSON.parse(e.projectList);
|
|
let list = {
|
|
latitude:this.projectList[0].projectLat,
|
|
longitude:this.projectList[0].projectLng
|
|
}
|
|
this.$set(this,'mapCoordinate',list)
|
|
this.getMarkersListFn();
|
|
} else{
|
|
let list = {
|
|
latitude:26.028788,
|
|
longitude:119.216327
|
|
}
|
|
this.$set(this,'mapCoordinate',list)
|
|
}
|
|
},
|
|
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: {
|
|
// 设置地图高度
|
|
getSystemInfo() {
|
|
let _this = this
|
|
uni.getSystemInfo({
|
|
success: function(res) {
|
|
_this.height = res.windowHeight + 'px'
|
|
}
|
|
})
|
|
},
|
|
getMarkersListFn(){
|
|
let mapMarkerList = [];
|
|
this.projectList.forEach((item)=>{
|
|
this.mapAlarmTotal += item.tenantIndexVo.alarmTotal;
|
|
this.mapDeviceTotal += item.tenantIndexVo.deviceTotal;
|
|
this.mapTodayAlarm += item.tenantIndexVo.todayAlarmTotal;
|
|
this.mapOnlineTotal += item.tenantIndexVo.onlineTotal;
|
|
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},`;
|
|
})
|
|
console.log(processStateList,"processStateList");
|
|
mapMarkerList.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"
|
|
}
|
|
})
|
|
console.log("mapMarkerList",mapMarkerList);
|
|
this.$set(this,'mapMarkers',mapMarkerList)
|
|
this.includePoints.push({
|
|
latitude: item.projectLat,
|
|
longitude: item.projectLng
|
|
})
|
|
this.includePointFn(this.includePoints);
|
|
});
|
|
})
|
|
},
|
|
onClickCallout(e){
|
|
const proId = e.detail.markerId;
|
|
if(proId) {
|
|
uni.navigateTo({
|
|
url: `/pages/project/index?projectId=${proId}`
|
|
})
|
|
}
|
|
},
|
|
// 缩放视野展示所有经纬度
|
|
includePointFn(points){
|
|
this.mapCtx.includePoints({
|
|
padding: [10],
|
|
points: points
|
|
})
|
|
},
|
|
// 获取当前地图缩放大小
|
|
getCurScale() {
|
|
return new Promise((resolve, reject) => {
|
|
this.mapCtx.getScale({
|
|
success(res) {
|
|
resolve(res);
|
|
},
|
|
fail(err) {
|
|
reject(err);
|
|
}
|
|
})
|
|
})
|
|
},
|
|
// 定位到当前位置
|
|
currentLocation() {
|
|
let _this = this;
|
|
//当前位置
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
success(res) {
|
|
_this.mapCoordinate = {
|
|
latitude: res.latitude,
|
|
longitude: res.longitude
|
|
}
|
|
_this.mapCtx.moveToLocation({ //将中心点移回当前位置
|
|
latitude: res.latitude,
|
|
longitude: res.longitude
|
|
})
|
|
},
|
|
fail(err){
|
|
console.log("获取到当前位置失败",err)
|
|
}
|
|
})
|
|
},
|
|
// 放大地图
|
|
scaleAddFn() {
|
|
let _this = this;
|
|
this.getCurScale().then(res => {
|
|
let s = res.scale;
|
|
_this.scale = Number(s) + 1 > 20? 20 : Number(s) + 1;
|
|
})
|
|
},
|
|
// 缩小地图
|
|
scaleCutFn() {
|
|
let _this = this;
|
|
this.getCurScale().then(res => {
|
|
let s = res.scale;
|
|
_this.scale = Number(s) - 1 < 4? 4 : Number(s) - 1;
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|