添加摄像机区域管理应用

hanbaoshan

2020-08-29 21a340c24815a55a07db2dc3d2e5a19e7de440cd

添加摄像机区域管理应用

 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
  })
}

 src/pages/areaManage/index/App.vue

New file
@@ -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>

 src/pages/areaManage/index/main.ts

New file
@@ -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)
});

 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
      }
    ]
  }

 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',

 src/scripts/util.js

 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": {