323 lines
10 KiB
Vue
323 lines
10 KiB
Vue
<template>
|
||
<div class="camera">
|
||
<template v-if="!viewState">
|
||
<div class="conditions-div">
|
||
<el-form :model="formModel" :inline="true">
|
||
<el-form-item label="设备名称">
|
||
<el-input v-model="formModel.cameraName" placeholder="设备名称" clearable></el-input>
|
||
</el-form-item>
|
||
<el-form-item v-if="list" label="设备区域">
|
||
<el-cascader
|
||
:options="areaOptions"
|
||
v-model="formModel.cameraRegion"
|
||
clearable
|
||
:props="{ checkStrictly: true }"
|
||
style="width:350px"
|
||
></el-cascader>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" v-if="list" @click="searchClick()">搜索</el-button>
|
||
<el-button type="primary" v-if="!list" @click="searchClicks()">搜索</el-button>
|
||
</el-form-item>
|
||
<el-form-item style="float: right;">
|
||
<el-button type="primary" v-if="!list" @click="videoMap">数据列表展示</el-button>
|
||
<!-- <el-button type="primary" v-if="list" @click="videoMap">返回地图</el-button> -->
|
||
<el-button type="primary" @click="addOrUpdateClick('add')">新增摄像头</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div v-if="list">
|
||
<el-table :data="cameraList">
|
||
<el-table-column prop="cameraName" label="设备名称" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="cameraRegionFirstlevelBackUp" label="设备区域" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
|
||
<el-table-column label="操作" show-overflow-tooltip width="300">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
type="primary"
|
||
plain
|
||
size="mini"
|
||
@click="addOrUpdateClick('update',scope.row)"
|
||
>编辑</el-button>
|
||
<el-button type="primary" plain size="mini" @click="deleteClick(scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="pageObj.pageNo"
|
||
:page-sizes="[10, 20, 30, 40]"
|
||
:page-size="pageObj.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
></el-pagination>
|
||
</div>
|
||
</template>
|
||
<!-- 查看 -->
|
||
<template v-else>
|
||
<cameraView ref="viewRef" @refreshViewClick="refreshViewClick"></cameraView>
|
||
</template>
|
||
<!-- 新建人脸库 -->
|
||
<cameraAddUpdate ref="addUpdateFaceRef" @refreshClick="refreshClick"></cameraAddUpdate>
|
||
<!-- 摄像头分布图 -->
|
||
<div v-if="!list">
|
||
<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>
|
||
<!-- 上传 -->
|
||
<!-- <cameraUpload ref="uploadFaceRef" @refreshUploadClick="refreshUploadClick"></cameraUpload> -->
|
||
</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 {
|
||
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();
|
||
},
|
||
// 新增/修改
|
||
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>
|
||
|
||
<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>
|