408 lines
12 KiB
Vue
408 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<!-- 未用到 -->
|
|||
|
|
<div class="mapBox">
|
|||
|
|
<div class="headerBox">
|
|||
|
|
<div class="mapBack" v-if="showMapBack" @click="goBack">
|
|||
|
|
<i class="el-icon-arrow-left"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="mapTitle">
|
|||
|
|
{{ backArr.length > 0 ? backArr[backArr.length - 1].name : "集团" }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="selectContainer">
|
|||
|
|
<!-- <div class="selectBox" @click="showMapDialog=!showMapDialog" v-show="backArr.length==1">城市列表
|
|||
|
|
<i v-show="!showMapDialog" class="el-icon-arrow-up"></i>
|
|||
|
|
<i v-show="showMapDialog" class="el-icon-arrow-down"></i>
|
|||
|
|
</div> -->
|
|||
|
|
<div
|
|||
|
|
class="selectBox"
|
|||
|
|
@click="showMapDialog = !showMapDialog"
|
|||
|
|
v-show="backArr.length == 2"
|
|||
|
|
>
|
|||
|
|
项目列表
|
|||
|
|
<i v-show="!showMapDialog" class="el-icon-arrow-up"></i>
|
|||
|
|
<i v-show="showMapDialog" class="el-icon-arrow-down"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="selectContent" v-show="showMapDialog">
|
|||
|
|
<vue-scroll style="height:100%">
|
|||
|
|
<div
|
|||
|
|
class="selectItem"
|
|||
|
|
@click="mapJumpToNext(index)"
|
|||
|
|
v-for="(item, index) in mapData"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<p class="title">{{ item.name }}</p>
|
|||
|
|
<div class="datas">
|
|||
|
|
<div class="numBox2">
|
|||
|
|
<p>{{ item.videoNum }}</p>
|
|||
|
|
<p>视频数</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="numBox2">
|
|||
|
|
<p>{{ item.ufaceDevNum }}</p>
|
|||
|
|
<p>门禁数</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="numBox2" v-show="!item.projectName">
|
|||
|
|
<p>{{ item.projectNum }}</p>
|
|||
|
|
<p>项目数</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</vue-scroll>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="map"></div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import { getComapnyStatisticsListApi } from "@/assets/js/api/company/project";
|
|||
|
|
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
mapObj: null,
|
|||
|
|
mapName: "",
|
|||
|
|
mapData: [],
|
|||
|
|
backArr: [],
|
|||
|
|
searchsn: "",
|
|||
|
|
showMapDialog: false,
|
|||
|
|
showMapBack: false,
|
|||
|
|
userInfo: null,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
// console.log("sessionStorage.getItem('userInfo')",sessionStorage.getItem('userInfo'))
|
|||
|
|
// this.userInfo=sessionStorage.getItem('userInfo')
|
|||
|
|
// this.getQuery("data");
|
|||
|
|
// this.initMap();
|
|||
|
|
this.$nextTick(()=>{
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
if (window.UniAppJSBridge){
|
|||
|
|
console.log("556564646464666")
|
|||
|
|
}else{
|
|||
|
|
document.addEventListener('UniAppJSBridgeReady', function() {
|
|||
|
|
console.log("jsbridge")
|
|||
|
|
// uni.getEnv(function(res) {
|
|||
|
|
// console.log('当前环境：' + JSON.stringify(res));
|
|||
|
|
// });
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},2000)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getQuery(name) {
|
|||
|
|
console.log("getQuery");
|
|||
|
|
// console.log(window.location.href)
|
|||
|
|
var data = window.location.href.split("data=")[1];
|
|||
|
|
// console.log(decodeURIComponent(data))
|
|||
|
|
this.userInfo = JSON.parse(decodeURIComponent(data));
|
|||
|
|
console.log(this.userInfo);
|
|||
|
|
this.$store.commit("setUserInfo", this.userInfo);
|
|||
|
|
this.$http.defaults.headers.common["Authorization"] =
|
|||
|
|
"Bearer" + " " + this.userInfo.token;
|
|||
|
|
//
|
|||
|
|
|
|||
|
|
//获取地图数据
|
|||
|
|
this.initData(true);
|
|||
|
|
},
|
|||
|
|
//获取所有企业下区域数据
|
|||
|
|
loadData(type) {
|
|||
|
|
//type：true代表第一调用
|
|||
|
|
// console.log('type,',type)
|
|||
|
|
getComapnyStatisticsListApi({
|
|||
|
|
sn: this.searchsn,
|
|||
|
|
}).then((res) => {
|
|||
|
|
this.mapData = res.result.companyList
|
|||
|
|
? res.result.companyList
|
|||
|
|
: res.result.projectList;
|
|||
|
|
if (type) {
|
|||
|
|
// this.showMapBack=false
|
|||
|
|
this.backArr = [];
|
|||
|
|
// if(this.userInfo.accountType==4){
|
|||
|
|
if (res.result.parentCompany) {
|
|||
|
|
this.backArr.push({
|
|||
|
|
name: res.result.parentCompany.companyName,
|
|||
|
|
sn: res.result.parentCompany.companySn,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// }
|
|||
|
|
// if(this.userInfo.accountType==3||this.userInfo.accountType==4){
|
|||
|
|
if (res.result.companyInfo) {
|
|||
|
|
this.backArr.push({
|
|||
|
|
name: res.result.companyInfo.companyName,
|
|||
|
|
sn: res.result.companyInfo.companySn,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// }
|
|||
|
|
if (
|
|||
|
|
(this.backArr.length == 0 && this.userInfo.accountType == 2) ||
|
|||
|
|
(this.backArr.length == 1 && this.userInfo.accountType == 3) ||
|
|||
|
|
(this.backArr.length == 2 && this.userInfo.accountType == 4)
|
|||
|
|
) {
|
|||
|
|
this.showMapBack = false;
|
|||
|
|
} else {
|
|||
|
|
this.showMapBack = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (this.mapData.length > 0) {
|
|||
|
|
this.mapObj.clearMap();
|
|||
|
|
this.setAreaMarker();
|
|||
|
|
} else {
|
|||
|
|
this.$message("该区域下没有数据！");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
initData(type) {
|
|||
|
|
//
|
|||
|
|
if (this.backArr.length > 0) {
|
|||
|
|
this.searchsn = this.backArr[this.backArr.length - 1].sn;
|
|||
|
|
} else {
|
|||
|
|
switch (Number(this.userInfo.accountType)) {
|
|||
|
|
case 2:
|
|||
|
|
this.searchsn = this.userInfo.headquartersSn;
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
this.searchsn = this.userInfo.sn;
|
|||
|
|
break;
|
|||
|
|
case 4:
|
|||
|
|
this.searchsn = this.userInfo.sn;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (
|
|||
|
|
(this.backArr.length == 0 && this.userInfo.accountType == 2) ||
|
|||
|
|
(this.backArr.length == 1 && this.userInfo.accountType == 3) ||
|
|||
|
|
(this.backArr.length == 2 && this.userInfo.accountType == 4)
|
|||
|
|
) {
|
|||
|
|
this.showMapBack = false;
|
|||
|
|
} else {
|
|||
|
|
this.showMapBack = true;
|
|||
|
|
}
|
|||
|
|
if (this.backArr.length == 3) {
|
|||
|
|
this.getProjectDetail();
|
|||
|
|
} else {
|
|||
|
|
this.loadData(type);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//获取项目详细
|
|||
|
|
getProjectDetail() {
|
|||
|
|
let data = {
|
|||
|
|
projectSn: this.searchsn,
|
|||
|
|
};
|
|||
|
|
getProjectDetail(data).then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
if (res.result) {
|
|||
|
|
this.mapData = [res.result];
|
|||
|
|
this.mapObj.clearMap();
|
|||
|
|
this.setAreaMarker();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
initMap() {
|
|||
|
|
//地图加载
|
|||
|
|
this.mapObj = new AMap.Map("map", {
|
|||
|
|
resizeEnable: true,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
goBack() {
|
|||
|
|
//
|
|||
|
|
if (this.backArr.length == 1) {
|
|||
|
|
this.backArr = [];
|
|||
|
|
} else {
|
|||
|
|
this.backArr = this.backArr.splice(0, this.backArr.length - 1);
|
|||
|
|
}
|
|||
|
|
this.initData();
|
|||
|
|
},
|
|||
|
|
setAreaMarker() {
|
|||
|
|
var _this = this;
|
|||
|
|
this.mapData.forEach((element) => {
|
|||
|
|
var marker = new AMap.Marker({
|
|||
|
|
position: [element.longitude, element.latitude],
|
|||
|
|
size: new AMap.Size(230, 43), //图标大小
|
|||
|
|
imageSize: new AMap.Size(230, 43),
|
|||
|
|
});
|
|||
|
|
var htmls = "";
|
|||
|
|
if (!element.projectName) {
|
|||
|
|
htmls = `<div class='datas'>
|
|||
|
|
<p class='num'>${element.projectNum} 项目</p>
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
marker.setLabel({
|
|||
|
|
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
|
|||
|
|
// content: `<div class='mapInfo'>
|
|||
|
|
// <div class='areaName datas'>${element.name}</div>${htmls}
|
|||
|
|
// <div class='datas'><p class='num'>${element.videoNum}</p>
|
|||
|
|
// <p class='text'>${this.$t('message.firmProject.marker.videoNum')}</p>
|
|||
|
|
// </div>
|
|||
|
|
// <div class='datas'><p class='num'>${element.ufaceDevNum}</p>
|
|||
|
|
// <p class='text'>${this.$t('message.firmProject.marker.guardNum')}</p>
|
|||
|
|
// </div>
|
|||
|
|
// </div>`,
|
|||
|
|
content: `<div class='mapInfo'>
|
|||
|
|
<div class='areaName datas'>${element.name}</div>${htmls}
|
|||
|
|
</div>`,
|
|||
|
|
direction: "center", //设置文本标注方位
|
|||
|
|
});
|
|||
|
|
marker.setMap(this.mapObj);
|
|||
|
|
this.mapObj.setFitView();
|
|||
|
|
});
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
var infoList = document.getElementsByClassName("mapInfo");
|
|||
|
|
infoList.forEach((element, index) => {
|
|||
|
|
if (!_this.mapData[0].projectName) {
|
|||
|
|
element.addEventListener("click", function () {
|
|||
|
|
_this.mapJumpToNext(index);
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
// document.addEventListener('UniAppJSBridgeReady', function() {
|
|||
|
|
element.addEventListener("click", function () {
|
|||
|
|
console.log("点击项目名称");
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/projectManage/projectManage",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
// });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//地图跳转到下一级
|
|||
|
|
mapJumpToNext(index) {
|
|||
|
|
var _this = this;
|
|||
|
|
if (_this.mapData[index].list) {
|
|||
|
|
var json = {
|
|||
|
|
sn: _this.mapData[index].companySn,
|
|||
|
|
name: _this.mapData[index].name,
|
|||
|
|
};
|
|||
|
|
_this.backArr.push(json);
|
|||
|
|
_this.showMapDialog = false;
|
|||
|
|
_this.initData();
|
|||
|
|
} else {
|
|||
|
|
if (_this.mapData[index].projectName && _this.backArr.length < 3) {
|
|||
|
|
var json = {
|
|||
|
|
sn: _this.mapData[index].projectSn,
|
|||
|
|
name: _this.mapData[index].name,
|
|||
|
|
};
|
|||
|
|
_this.backArr.push(json);
|
|||
|
|
_this.showMapDialog = false;
|
|||
|
|
_this.initData();
|
|||
|
|
} else {
|
|||
|
|
_this.$message("该区域下没有数据！");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.mapBox {
|
|||
|
|
height: calc(100% - 52px);
|
|||
|
|
}
|
|||
|
|
#map {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
/deep/ .amap-marker-label {
|
|||
|
|
background-color: @--color-primary;
|
|||
|
|
color: #ffffff;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
max-width: 230px;
|
|||
|
|
min-width: 120px;
|
|||
|
|
.mapInfo {
|
|||
|
|
background-color: @--color-primary;
|
|||
|
|
// display: flex;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 5px 0;
|
|||
|
|
cursor: pointer;
|
|||
|
|
// .datas {
|
|||
|
|
// flex: 1;
|
|||
|
|
// text-align: center;
|
|||
|
|
// align-self: center;
|
|||
|
|
// }
|
|||
|
|
.areaName {
|
|||
|
|
// display: block;
|
|||
|
|
// align-items: center;
|
|||
|
|
// justify-content: center;
|
|||
|
|
// border-right: 1px solid #ddd;
|
|||
|
|
padding-bottom: 5px;
|
|||
|
|
white-space: normal;
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.mapTitle {
|
|||
|
|
font-size: 18px;
|
|||
|
|
background-color: rgb(255, 255, 255);
|
|||
|
|
color: #262d47;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 48px;
|
|||
|
|
}
|
|||
|
|
.mapBack {
|
|||
|
|
width: 30px;
|
|||
|
|
height: 30px;
|
|||
|
|
// border-radius: 50%;
|
|||
|
|
font-size: 25px;
|
|||
|
|
color: #262d47;
|
|||
|
|
padding: 9px;
|
|||
|
|
position: absolute;
|
|||
|
|
// background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
// z-index: 9999;
|
|||
|
|
text-align: center;
|
|||
|
|
// line-height: 30px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.selectBox {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 10px;
|
|||
|
|
top: 9px;
|
|||
|
|
color: @--color-primary;
|
|||
|
|
font-size: 12px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
text-align: center;
|
|||
|
|
width: 80px;
|
|||
|
|
height: 30px;
|
|||
|
|
line-height: 30px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
z-index: 9999;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.selectContent {
|
|||
|
|
padding: 10px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-size: 14px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
width: 230px;
|
|||
|
|
height: calc(100% - 60px);
|
|||
|
|
top: 50px;
|
|||
|
|
right: 10px;
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 9999;
|
|||
|
|
.selectItem {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
margin: 10px 0 5px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.datas {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
font-size: 12px;
|
|||
|
|
height: 40px;
|
|||
|
|
background-color: #fbfbfb;
|
|||
|
|
.numBox2 {
|
|||
|
|
p:first-child {
|
|||
|
|
color: @--color-primary;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|