From 21a340c24815a55a07db2dc3d2e5a19e7de440cd Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期六, 29 八月 2020 19:27:57 +0800
Subject: [PATCH] 添加摄像机区域管理应用
---
src/scripts/util.js | 0
src/api/camera.ts | 31 +++
vue.config.js | 4
src/pages/library/components/upload.vue | 2
src/pages/desktop/index/mock/userData.json | 22 ++
src/pages/areaManage/index/main.ts | 13 +
src/pages/areaManage/index/App.vue | 349 +++++++++++++++++++++++++++++++++++++++++++
7 files changed, 418 insertions(+), 3 deletions(-)
diff --git a/src/api/camera.ts b/src/api/camera.ts
index 47dafc8..f7d7cc6 100644
--- a/src/api/camera.ts
+++ b/src/api/camera.ts
@@ -140,4 +140,35 @@
data: params
});
};
+//
+//鏌ユ壘鎵�鏈�(澶氳竟褰�)鍖哄煙
+export const findAllPolygons = () => {
+ return request({
+ url: "/data/api-v/polygon/findAll",
+ method: "get"
+ })
+}
+//鏌ユ壘鎵�鏈�(灞曞尯)鍖哄煙
+export const getAllAreas = () => {
+ return request({
+ url: "/data/api-v/acp/findAll",
+ method: "get"
+ })
+}
+//鍒犻櫎(灞曞尯)
+export const delArea = (data:any) => {
+ return request({
+ url: "/data/api-v/acp/delete",
+ method: "post",
+ data
+ })
+}
+//淇濆瓨鍖哄煙缂栬緫
+export const saveAreaInfo = (data:any) => {
+ return request({
+ url: "/data/api-v/acp/save",
+ method: "post",
+ data
+ })
+}
\ No newline at end of file
diff --git a/src/pages/areaManage/index/App.vue b/src/pages/areaManage/index/App.vue
new file mode 100644
index 0000000..c7e1025
--- /dev/null
+++ b/src/pages/areaManage/index/App.vue
@@ -0,0 +1,349 @@
+<template>
+ <div>
+ <div class="top-operation">
+ <el-button type="primary" size="small" @click="createArea">鏂板鍖哄煙</el-button>
+ </div>
+ <el-table :data="groups" border>
+ <el-table-column type="index" width="50" label="搴忓彿" align="center"></el-table-column>
+ <el-table-column prop="name" label="鍖哄煙鍚嶇О" align="center"></el-table-column>
+ <el-table-column prop="id" label="鍖哄煙ID" align="center"></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>
+ <!-- <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) {
+ debugger
+ 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;
+ debugger
+ //鍥炴樉绌挎妗�
+ let _this = this;
+ row.camPolygons.forEach(camPolygon => {
+ camPolygon.pgns.forEach(polygon => {
+ debugger
+ 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.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 () {
+ // this.checkedData.forEach(item=>{
+ // let node = JSON.parse(item);
+ // this.camPolygon.cameraId = node.cameraId;
+ // this.camPolygon.cameraName = node.cameraName;
+ // this.pgn.polygonId = node.polygonId;
+ // this.pgn.polygonName = node.polygonName;
+ // this.camPolygon.pgns.push(this.pgn);
+ // this.areaForm.camPolygons.push(this.camPolygon);
+ // let _this = this;
+ // saveAreaInfo(this.areaForm).then(res=>{
+ // if(res.code==200){
+ // _this.$notify({
+ // type:'success',
+ // message:'淇濆瓨鎴愬姛!'
+ // });
+ // _this.dialogFormVisible = false;
+ // _this.getAllAreas();
+ // }
+ // })
+ // });
+ let tempArr = [];
+ let tempIdArr = [];
+ this.areaForm.camPolygons = [];
+ debugger
+ 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);
+ debugger
+ 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);
+}
+.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;
+ margin-right: 40px;
+}
+.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: 764px;
+}
+/deep/.el-textarea__inner {
+ width: 566px;
+ 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;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/areaManage/index/main.ts b/src/pages/areaManage/index/main.ts
new file mode 100644
index 0000000..72eb673
--- /dev/null
+++ b/src/pages/areaManage/index/main.ts
@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import App from './App.vue'
+
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import "@/assets/css/element-variables.scss";
+
+Vue.use(ElementUI);
+
+new Vue({
+ el: '#app',
+ render: h => h(App)
+});
diff --git a/src/pages/desktop/index/mock/userData.json b/src/pages/desktop/index/mock/userData.json
index 3b284b4..1ef5859 100644
--- a/src/pages/desktop/index/mock/userData.json
+++ b/src/pages/desktop/index/mock/userData.json
@@ -134,6 +134,28 @@
"title": "绯荤粺缁存姢",
"width": 760,
"height": 534
+ },
+ {
+ "id": "19",
+ "name": "heatCamera",
+ "src": "../../images/app-mid/algorithm-manage.png",
+ "alt": "鐑姏鍥�",
+ "type": "2",
+ "url": "/view/heatCamera",
+ "title": "鐑姏鍥�",
+ "width": 760,
+ "height": 600
+ },
+ {
+ "id": "20",
+ "name": "areaManage",
+ "src": "../../images/app-mid/device.png",
+ "alt": "鎽勫儚鏈哄尯鍩熺鐞�",
+ "type": "2",
+ "url": "/view/areaManage",
+ "title": "鎽勫儚鏈哄尯鍩熺鐞�",
+ "width": 1200,
+ "height": 600
}
]
}
diff --git a/src/pages/library/components/upload.vue b/src/pages/library/components/upload.vue
index 37e34e2..58585ed 100644
--- a/src/pages/library/components/upload.vue
+++ b/src/pages/library/components/upload.vue
@@ -46,7 +46,7 @@
</template>
<script>
import axios from 'axios'
-import { guid } from './util.js'
+import { guid } from '@/scripts/util.js'
export default {
name: 'upload',
diff --git a/src/pages/library/components/util.js b/src/scripts/util.js
similarity index 100%
rename from src/pages/library/components/util.js
rename to src/scripts/util.js
diff --git a/vue.config.js b/vue.config.js
index 58eb47a..a763d16 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -49,8 +49,8 @@
changeOrigin: true,
},
"/api-v": {
- //target: 'http://192.168.20.145:8000',
- target: 'http://192.168.20.10:8000',
+ target: 'http://192.168.20.145:8000',
+ //target: 'http://192.168.20.10:8000',
changeOrigin: true
},
"/api-f": {
--
Gitblit v1.8.0