354 lines
11 KiB
Vue
354 lines
11 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();
|
|||
|
|
},
|
|||
|
|
// 查询
|
|||
|
|
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>
|
|||
|
|
|
|||
|
|
<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>
|