<template>
|
<div class="areas">
|
<div class="top-operation">
|
<el-button type="primary" size="small" @click="createArea">新增区域</el-button>
|
</div>
|
<el-table :data="groups" border height="calc(100% - 100px)">
|
<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
|
<el-table-column prop="name" label="区域名称" align="center" sortable></el-table-column>
|
<el-table-column prop="id" label="区域ID" align="center" sortable></el-table-column>
|
<el-table-column prop="desc" label="描述" align="center"></el-table-column>
|
<el-table-column width="100" label="操作" align="center">
|
<template slot-scope="scope">
|
<div class="operation">
|
<i class="el-icon-edit primary" @click="edit(scope.row)"></i>
|
<i class="el-icon-delete red" @click="removeItem(scope.row.id)"></i>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-dialog title="摄像机区域管理" :visible.sync="dialogFormVisible" style="min-width:765px">
|
<el-form :model="areaForm" class="formArea">
|
<div class>
|
<el-form-item label="区域名称:">
|
<el-input v-model="areaForm.name" size="small"></el-input>
|
</el-form-item>
|
<el-form-item label="区域ID:" class="area-id">
|
<!-- <span v-if="isEdit">{{areaForm.id}}</span> -->
|
<el-input v-model="areaForm.id" size="small" :disabled="isEdit"></el-input>
|
<el-button v-if="!isEdit" size="small" type="primary" @click="getIdCode">生成ID</el-button>
|
</el-form-item>
|
<el-form-item label="区域描述:">
|
<el-input type="textarea" v-model="areaForm.desc" resize="none"></el-input>
|
</el-form-item>
|
</div>
|
<div class="checklist">
|
<el-form-item style="margin-right:0">
|
<!-- <el-transfer v-model="checkedData" :props="{key:'model',label:'label'}" :titles="['全部区域', '选中区域']" :button-texts="['左移','右移']" filterable @change="handleChange" :data="areaData"></el-transfer> -->
|
<el-transfer
|
v-model="checkedData"
|
:props="{key:'symbol',label:'label',}"
|
:titles="['全部区域', '选中区域']"
|
:button-texts="['左移','右移']"
|
filterable
|
@change="handleChange"
|
:data="areaData"
|
></el-transfer>
|
</el-form-item>
|
</div>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogFormVisible = false" size="small">取消</el-button>
|
<el-button type="primary" @click="save" size="small">保存</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import { guid } from '@/scripts/util.js'
|
import { findAllPolygons, getAllAreas, saveAreaInfo, delArea } from '@/api/camera'
|
export default {
|
data() {
|
return {
|
isEdit: false,
|
groups: [],
|
dialogFormVisible: false,
|
areaForm: {
|
name: '',
|
id: '',
|
desc: '',
|
camPolygons: [],
|
|
},
|
camPolygon: {
|
cameraId: '',
|
cameraName: '',
|
pgns: []
|
},
|
pgn: {
|
polygonId: '',
|
polygonName: ''
|
},
|
area: {
|
name: '',
|
id: ''
|
},
|
|
areaData: [{
|
cameraId: '123',
|
cameraName: '123',
|
polygonId: '234',
|
polygonName: '234'
|
}, {
|
cameraId: '133',
|
cameraName: '133',
|
polygonId: '254',
|
polygonName: '254'
|
}], //cameraId cameraName
|
checkedData: []
|
}
|
},
|
mounted() {
|
this.renderTable();
|
this.getAllPolygons();
|
},
|
methods: {
|
renderTable() {
|
getAllAreas().then(res => {
|
if (res.code == 200) {
|
this.groups = res.data
|
}
|
})
|
},
|
getAllPolygons() {
|
findAllPolygons().then(res => {
|
if (res.code == 200) {
|
this.areaData = res.data.map(item => {
|
return {
|
cameraId: item.camera_id,
|
cameraName: item.camera_name,
|
polygonId: item.id,
|
polygonName: item.name,
|
label: item.camera_name + ' - ' + item.name,
|
//model: JSON.stringify({cameraId:item.camera_id,cameraName: item.camera_name,polygonId: item.id,polygonName: item.name}),
|
symbol: item.camera_id + '&' + item.id
|
}
|
})
|
}
|
});
|
},
|
edit(row) {
|
this.isEdit = true;
|
this.dialogFormVisible = true;
|
this.areaForm = row;
|
//回显穿梭框
|
let _this = this;
|
_this.checkedData = [];
|
row.camPolygons.forEach(camPolygon => {
|
camPolygon.pgns.forEach(polygon => {
|
let symbol = camPolygon.cameraId + '&' + polygon.polygonId
|
// let checkedItem = {};
|
// checkedItem.cameraId = camPolygon.cameraId;
|
// checkedItem.cameraName = camPolygon.cameraName;
|
// checkedItem.polygonName = polygon.polygonName;
|
// checkedItem.polygonId = polygon.polygonId;
|
_this.checkedData.push(symbol);
|
})
|
});
|
console.log(this.checkedData)
|
},
|
createArea() {
|
this.isEdit = false;
|
this.dialogFormVisible = true;
|
this.areaForm = JSON.parse(JSON.stringify(this.areaForm));
|
this.areaForm.name = '';
|
this.areaForm.id = '';
|
this.areaForm.desc = '';
|
this.areaForm.camPolygons = [];
|
this.checkedData = [];
|
},
|
removeItem(id) {
|
this.$confirm('确定删除该项吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
delArea({ ids: [id] }).then(res => {
|
if (res.code == 200) {
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
this.renderTable()
|
}
|
})
|
}).catch(() => {
|
|
});
|
},
|
getIdCode() {
|
this.areaForm.id = guid();
|
},
|
handleChange(value, direction, movedKeys) {
|
console.log(value, direction, movedKeys);
|
|
},
|
save() {
|
if (this.areaForm.id === "") {
|
this.$notify({
|
type: 'error',
|
message: '区域ID不能为空'
|
});
|
|
return;
|
}
|
let sameOne = this.groups.findIndex(item => item.id == this.areaForm.id);
|
if(sameOne>=0){
|
this.$notify({
|
type: 'error',
|
message: '区域ID不能重复'
|
});
|
return;
|
}
|
let tempArr = [];
|
let tempIdArr = [];
|
this.areaForm.camPolygons = [];
|
this.checkedData.forEach(item => {
|
let tempCameraItem = { pgns: [] };
|
let cameraId = item.split('&')[0];
|
tempCameraItem.cameraId = cameraId;
|
if (tempArr.indexOf(cameraId) < 0) {
|
tempIdArr.push(cameraId)
|
}
|
let polygonId = item.split('&')[1];
|
this.areaData.forEach(area => {
|
if (area.polygonId == polygonId && area.cameraId == cameraId) {
|
this.pgn.polygonId = polygonId;
|
this.pgn.polygonName = area.polygonName;
|
if (tempArr.indexOf(cameraId) >= 0) {
|
let cpg = this.areaForm.camPolygons.find(camPolygon => camPolygon.cameraId == cameraId);
|
cpg.pgns.push(JSON.parse(JSON.stringify(this.pgn)));
|
} else {
|
//this.camPolygon.pgns.push(JSON.parse(JSON.stringify(this.pgn)));
|
tempCameraItem.pgns.push(JSON.parse(JSON.stringify(this.pgn)));
|
//this.camPolygon.cameraId = cameraId;
|
//this.camPolygon.cameraName = area.cameraName;
|
tempCameraItem.cameraName = area.cameraName;
|
this.areaForm.camPolygons.push(JSON.parse(JSON.stringify(tempCameraItem)));
|
//this.areaForm.camPolygons.push(JSON.parse(JSON.stringify(this.camPolygon)));
|
}
|
|
}
|
});
|
})
|
let _this = this;
|
console.log(this.areaForm);
|
saveAreaInfo(this.areaForm).then(res => {
|
if (res.code == 200) {
|
_this.$notify({
|
type: 'success',
|
message: '保存成功!'
|
});
|
_this.dialogFormVisible = false;
|
_this.renderTable();
|
}
|
}).catch(e => {
|
console.log(e)
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.primary {
|
color: #3d68e1;
|
}
|
.red {
|
color: rgb(255, 94, 0);
|
}
|
.areas{
|
width: 100%;
|
height: calc(100% - 60px);
|
}
|
.top-operation {
|
padding: 30px 30px 20px;
|
display: flex;
|
justify-content: flex-end;
|
}
|
.el-table {
|
width: calc(100% - 60px);
|
margin: 0 auto;
|
}
|
/deep/.el-table th {
|
background: #f5f5f5 !important;
|
color: #222;
|
}
|
.operation i {
|
font-size: 18px;
|
margin: 0 5px;
|
}
|
.formArea {
|
padding: 0 20px;
|
}
|
.flex-box {
|
display: flex;
|
justify-content: center;
|
}
|
.el-form-item {
|
display: flex;
|
}
|
.el-form-item label {
|
font-weight: bold;
|
}
|
.checklist .el-form-item__content {
|
margin: 10px auto;
|
}
|
/deep/.el-form-item__label {
|
width: 80px;
|
text-align: left;
|
}
|
.area-id .el-form-item__content {
|
display: flex;
|
margin-right: 0;
|
align-items: center;
|
}
|
.area-id .el-button {
|
margin-left: 5px;
|
margin-top: 3px;
|
}
|
.el-form .el-input {
|
width: 300px;
|
}
|
/deep/.el-transfer-panel {
|
text-align: left !important;
|
}
|
.el-transfer-panel__list {
|
text-align: left;
|
}
|
/deep/.el-button--primary.is-disabled {
|
background: #9eb4f0 !important;
|
border-color: #9eb4f0 !important;
|
}
|
/deep/.el-dialog {
|
min-width: 940px;
|
}
|
/deep/.el-textarea__inner {
|
width: 763px;
|
height: 60px;
|
}
|
/deep/.el-transfer-panel__item.el-checkbox .el-checkbox__label {
|
overflow: visible;
|
}
|
/deep/.el-transfer-panel__item.el-checkbox .el-checkbox__label {
|
overflow: visible;
|
}
|
/deep/.el-transfer-panel__item.el-checkbox .el-checkbox__label span {
|
font-size: 12px !important;
|
padding-right: 20px;
|
}
|
/deep/.el-transfer-panel
|
.el-transfer-panel__header
|
.el-checkbox
|
.el-checkbox__label {
|
font-size: 14px !important;
|
}
|
/deep/.el-transfer-panel {
|
width: 300px;
|
}
|
</style>
|
