测试地图
This commit is contained in:
parent
e01a137237
commit
59fb58e644
@ -1,27 +1,293 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div>
|
|
||||||
<!-- <iframe style="width: 800px; height: 600px;" src="../../../../020/index.html"/>-->
|
<!-- <iframe style="width: 800px; height: 600px;" src="../../../../020/index.html"/>-->
|
||||||
<!-- <iframe :src="this.txtUrl" width="100%" :style="{height:calHeight}" sandbox></iframe>-->
|
<!-- <iframe :src="this.txtUrl" width="100%" :style="{height:calHeight}" sandbox></iframe>-->
|
||||||
<!-- <iframe src="../../../../public/index.html" width="100%" :style="{height:calHeight}" ></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>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import cameraAddUpdate from "./camera-add-update";
|
||||||
|
import cameraUpload from "./camera-upload";
|
||||||
|
import cameraView from "./camera-view";
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
cameraAddUpdate,
|
||||||
|
cameraView,
|
||||||
|
cameraUpload
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// txtUrl: "../../../../020/index.html",
|
lableOpen: false,
|
||||||
txtUrl:"http://localhost:10101/github.com"
|
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;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
rightmons(type, target) {
|
||||||
//计算属性 , 设置iframe高度为窗口高度少100px
|
this.$nextTick(() => {
|
||||||
calHeight() {
|
this.$refs.addUpdateFaceRef.init("update", type);
|
||||||
return (window.innerHeight - 100) + 'px';
|
});
|
||||||
|
},
|
||||||
|
//摄像头分布图
|
||||||
|
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";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 公共查询
|
||||||
|
this.commonSeach();
|
||||||
|
// 调用树形结构数据
|
||||||
|
this.$http.get("/camera/getRegion").then(res => {
|
||||||
|
if (res.data.code === 0) {
|
||||||
|
this.areaOptions = res.data.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.map {
|
||||||
|
height: 750px;
|
||||||
|
}
|
||||||
|
.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…
x
Reference in New Issue
Block a user