测试地图
parent
e01a137237
commit
59fb58e644
|
|
@ -1,27 +1,293 @@
|
|||
<template>
|
||||
|
||||
<div>
|
||||
|
||||
<!-- <iframe style="width: 800px; height: 600px;" src="../../../../020/index.html"/>-->
|
||||
<!-- <iframe :src="this.txtUrl" width="100%" :style="{height:calHeight}" sandbox></iframe>-->
|
||||
<!-- <iframe src="../../../../public/index.html" width="100%" :style="{height:calHeight}" ></iframe>-->
|
||||
<iframe src="http://www.baidu.com/" width="100%" :style="{height:calHeight}" ></iframe>
|
||||
<!-- <iframe src="http://www.baidu.com/" width="100%" :style="{height:calHeight}" ></iframe>-->
|
||||
<!-- 摄像头分布图 -->
|
||||
<div >
|
||||
<baidu-map
|
||||
class="map"
|
||||
:scroll-wheel-zoom="true"
|
||||
:double-click-zoom="false"
|
||||
@zoomend="mouseEvent"
|
||||
:center="{lng: 103.943382, lat: 30.750594 }"
|
||||
:zoom="zoom">
|
||||
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
|
||||
<bm-marker
|
||||
:icon="iconUrl"
|
||||
v-for="(item,key ) of this.mapList"
|
||||
:key="key"
|
||||
:position="{'lng':item.cameraLongitude,'lat':item.cameraLatitude}"
|
||||
@rightclick="rightmons(item.idFaceCamera)"
|
||||
:dragging="false"
|
||||
>
|
||||
<bm-label
|
||||
:massClear="false"
|
||||
@dblclick="deletePoint(item)"
|
||||
v-if="lableOpen"
|
||||
:content="'<div style=display:'+item.displayCss+ '><div >名称:' + item.cameraName+'</div>'+ '<div>位置:' + item.cameraRegionFirstlevelBackUp+'</div>'+'<div>坐标:' + item.cameraLongitude+','+ item.cameraLatitude+'</div></div >'"
|
||||
:labelStyle="{backgroundColor :'0.05',border :'0',color: 'blue', fontSize : '14px' ,padding:'10px'}"
|
||||
:offset="{width: -100, height: -90}"
|
||||
/>
|
||||
</bm-marker>
|
||||
</baidu-map>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import cameraAddUpdate from "./camera-add-update";
|
||||
import cameraUpload from "./camera-upload";
|
||||
import cameraView from "./camera-view";
|
||||
export default {
|
||||
components: {
|
||||
cameraAddUpdate,
|
||||
cameraView,
|
||||
cameraUpload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// txtUrl: "../../../../020/index.html",
|
||||
txtUrl:"http://localhost:10101/github.com"
|
||||
lableOpen: false,
|
||||
zoom: 14,
|
||||
iconUrl: {
|
||||
url: require("../../../assets/img/video.png"),
|
||||
size: { width: 30, height: 30 }
|
||||
},
|
||||
list: true,
|
||||
mapList: [],
|
||||
position: { lng: 103.931057, lat: 30.755467 },
|
||||
mapOpen: false,
|
||||
// camera 和 camreaView切换，camreaView暂时不用
|
||||
viewState: false,
|
||||
// 表单查询
|
||||
formModel: {
|
||||
cameraName: "",
|
||||
cameraRegion: [],
|
||||
cameratLocationtypeId: ""
|
||||
},
|
||||
// table 列表
|
||||
cameraList: [],
|
||||
// 分页
|
||||
total: 0,
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
note: {}
|
||||
},
|
||||
// 设备区域
|
||||
areaOptions: [],
|
||||
areaProps: {
|
||||
multiple: true
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
deletePoint(e) {
|
||||
let arr = [];
|
||||
this.mapList.forEach(item => {
|
||||
if (e.idFaceCamera == item.idFaceCamera) {
|
||||
item.displayCss = "none";
|
||||
}
|
||||
arr.push(item);
|
||||
});
|
||||
this.mapList = arr;
|
||||
},
|
||||
//鼠标缩放触发函数
|
||||
mouseEvent(type, target) {
|
||||
//14 大于 14 显示 小于14 隐藏
|
||||
if (type.currentTarget.Oa > 14) {
|
||||
this.lableOpen = true;
|
||||
} else {
|
||||
this.lableOpen = false;
|
||||
}
|
||||
},
|
||||
rightmons(type, target) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addUpdateFaceRef.init("update", type);
|
||||
});
|
||||
},
|
||||
//摄像头分布图
|
||||
videoMap() {
|
||||
this.list = !this.list;
|
||||
},
|
||||
// el-pagination
|
||||
handleSizeChange: function(pageSize) {
|
||||
this.pageObj.pageSize = pageSize;
|
||||
this.handleCurrentChange();
|
||||
},
|
||||
handleCurrentChange: function(pageNo) {
|
||||
this.pageObj.pageNo = pageNo;
|
||||
this.pageObj.note = {
|
||||
...this.pageObj.note,
|
||||
...this.formModel
|
||||
};
|
||||
if (this.pageObj.note.cameraRegion.length === 0) {
|
||||
this.pageObj.note.cameraRegion = "";
|
||||
} else {
|
||||
this.pageObj.note.cameraRegion = String(
|
||||
this.pageObj.note.cameraRegion[
|
||||
this.pageObj.note.cameraRegion.length - 1
|
||||
]
|
||||
);
|
||||
}
|
||||
this.commonSeach();
|
||||
},
|
||||
// 查询
|
||||
searchClick() {
|
||||
this.pageObj.note = {
|
||||
...this.pageObj.note,
|
||||
...this.formModel
|
||||
};
|
||||
if (this.pageObj.note.cameraName != "") {
|
||||
this.pageObj.pageNo = 1;
|
||||
} else if (this.pageObj.note.cameratLocationtypeId != "") {
|
||||
this.pageObj.pageNo = 1;
|
||||
}
|
||||
if (this.pageObj.note.cameraRegion.length === 0) {
|
||||
this.pageObj.note.cameraRegion = "";
|
||||
} else {
|
||||
this.pageObj.note.cameraRegion = String(
|
||||
this.pageObj.note.cameraRegion[
|
||||
this.pageObj.note.cameraRegion.length - 1
|
||||
]
|
||||
);
|
||||
this.pageObj.pageNo = 1;
|
||||
}
|
||||
this.commonSeach();
|
||||
},
|
||||
searchClicks() {
|
||||
this.$http
|
||||
.get(`/camera/getAllList?cameraName=${this.formModel.cameraName}`)
|
||||
.then(res => {
|
||||
this.mapList = res.data.data;
|
||||
});
|
||||
},
|
||||
// 新增/修改
|
||||
addOrUpdateClick(param, row = {}) {
|
||||
console.log(this.$refs.reference);
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addUpdateFaceRef.init(param, row.idFaceCamera);
|
||||
});
|
||||
},
|
||||
// 新增/修改回调
|
||||
refreshClick(param) {
|
||||
param === "add" ? (this.pageObj.pageNo = 1) : this.pageObj.pageNo;
|
||||
this.pageObj.note = {
|
||||
...this.pageObj.note,
|
||||
...this.formModel
|
||||
};
|
||||
if (this.pageObj.note.cameraName != "") {
|
||||
this.pageObj.pageNo = 1;
|
||||
} else if (this.pageObj.note.cameratLocationtypeId != "") {
|
||||
this.pageObj.pageNo = 1;
|
||||
}
|
||||
if (this.pageObj.note.cameraRegion.length === 0) {
|
||||
this.pageObj.note.cameraRegion = "";
|
||||
} else {
|
||||
this.pageObj.note.cameraRegion = String(
|
||||
this.pageObj.note.cameraRegion[
|
||||
this.pageObj.note.cameraRegion.length - 1
|
||||
]
|
||||
);
|
||||
this.pageObj.pageNo = 1;
|
||||
}
|
||||
this.commonSeach();
|
||||
},
|
||||
// 删除
|
||||
deleteClick(row) {
|
||||
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
this.$http.get(`/camera/delete/${row.idFaceCamera}`).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.pageObj.note = { ...this.pageObj.note, ...this.formModel };
|
||||
if (this.pageObj.note.cameraName != "") {
|
||||
this.pageObj.pageNo = 1;
|
||||
} else if (this.pageObj.note.cameratLocationtypeId != "") {
|
||||
this.pageObj.pageNo = 1;
|
||||
}
|
||||
if (this.pageObj.note.cameraRegion.length === 0) {
|
||||
this.pageObj.note.cameraRegion = "";
|
||||
} else {
|
||||
this.pageObj.note.cameraRegion = String(
|
||||
this.pageObj.note.cameraRegion[
|
||||
this.pageObj.note.cameraRegion.length - 1
|
||||
]
|
||||
);
|
||||
this.pageObj.pageNo = 1;
|
||||
}
|
||||
if (this.cameraList.length === 1 && this.pageObj.pageNo > 1) {
|
||||
this.pageObj.pageNo = this.pageObj.pageNo - 1;
|
||||
}
|
||||
this.commonSeach();
|
||||
this.$message.success("删除成功");
|
||||
} else {
|
||||
this.$message.warning(res.data.message);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.info("已取消删除");
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
// 公共查询
|
||||
commonSeach(pageObj = this.pageObj) {
|
||||
this.$http.post("/camera/getList", pageObj).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.cameraList = res.data.data.records;
|
||||
this.total = Number(res.data.data.total);
|
||||
} else if (res.data.code == 60001) {
|
||||
this.$message.warning(res.data.message);
|
||||
} else {
|
||||
console.log(res);
|
||||
}
|
||||
});
|
||||
this.$http.get("/camera/getAllList").then(res => {
|
||||
this.mapList = res.data.data;
|
||||
this.mapList.forEach(item => {
|
||||
item.displayCss = "block";
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
//计算属性 , 设置iframe高度为窗口高度少100px
|
||||
calHeight() {
|
||||
return (window.innerHeight - 100) + 'px';
|
||||
}
|
||||
created() {
|
||||
// 公共查询
|
||||
this.commonSeach();
|
||||
// 调用树形结构数据
|
||||
this.$http.get("/camera/getRegion").then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.areaOptions = res.data.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.map {
|
||||
height: 750px;
|
||||
}
|
||||
</script>
|
||||
.conditions-div {
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
/*
|
||||
去除百度地图版权
|
||||
去除右上角[地图、卫星、三维]控件
|
||||
去除百度地图右上角平移缩放控件的市县区文字
|
||||
*/
|
||||
.map >>> .anchorBL,
|
||||
.map >>> .anchorTR,
|
||||
.map >>> .BMap_zlHolder {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
.conditions-div >>> .el-form-item {
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue