品牌，区域

src/router/ChildrenRouters.js

@@ -241,6 +241,26 @@ const childrenRouters = [
       parentName: '视频监控'
     }
   },
+  {
+    path: '/areaAdmin',
+    name: 'AreaAdmin',
+    component: () => import('../views/Video/AreaAdmin.vue'),
+    meta: {
+      title: '监控区域',
+      permission: 'areaAdmin',
+      parentName: '视频监控'
+    }
+  },
+  {
+    path: '/cameraBrand',
+    name: 'CameraBrand',
+    component: () => import('../views/Video/CameraBrand.vue'),
+    meta: {
+      title: '摄像头品牌',
+      permission: 'cameraBrand',
+      parentName: '视频监控'
+    }
+  },
 
   /*
   *

src/utils/api.js

@@ -214,3 +214,81 @@ export function delUser(data) {
     params: data
   })
 }
+
+
+/**
+ *
+ * 视频监控部分
+ * **/
+
+// 监控区域列表
+export function areaList(data) {
+  return axios({
+    url: '/video/cameraArea/list',
+    method: 'post',
+    data: data
+  })
+}
+
+// 监控区域删除
+export function delArea(data) {
+  return axios({
+    url: '/video/cameraArea/remove',
+    method: 'get',
+    params: data
+  })
+}
+
+// 监控区域添加
+export function addArea(data) {
+  return axios({
+    url: '/video/cameraArea/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 监控区域编辑
+export function editArea(data) {
+  return axios({
+    url: '/video/cameraArea/update',
+    method: 'post',
+    data: data
+  })
+}
+
+// 摄像头品牌列表
+export function brandList(data) {
+  return axios({
+    url: '/video/cameraBrand/list',
+    method: 'post',
+    data: data
+  })
+}
+
+// 品牌添加
+export function addBarand(data) {
+  return axios({
+    url: '/video/cameraBrand/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 品牌删除
+export function delBarand(data) {
+  return axios({
+    url: '/video/cameraBrand/remove',
+    method: 'get',
+    params: data
+  })
+}
+
+// 品牌编辑
+export function editBarand(data) {
+  return axios({
+    url: '/video/cameraBrand/update',
+    method: 'post',
+    data: data
+  })
+}

src/utils/http.js

@@ -95,6 +95,9 @@ const errorHandle = (status, other) => {
     case 404:
       Message.error('请求的资源不存在');
       break;
+    case 500:
+      Message.error('请求失败，请联系管理员');
+      break;
     default:
       console.log(other);
   }}

src/utils/index.js

@@ -0,0 +1,11 @@
+export function arrToIds(arr){
+    var new_ids = '';
+    for(var i = 0; i < arr.length; i++){
+        new_ids += ','+arr[i].id;
+    }
+
+    if(new_ids!=''){
+        new_ids =  new_ids.substr(1);
+    }
+    return new_ids;
+}

src/utils/permission.js

@@ -4,3 +4,4 @@ export function hasBtnPermission(permission) {
   const myBtns = store.getters.buttons
   return myBtns.indexOf(permission) > -1
 }
+

src/views/Video/AreaAdmin.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="area">
+    <!-- 查询   -->
+    <query-conditions :formItems="searchList" @getQueryParams="handleQuery"></query-conditions>
+    <!--  表格   -->
+    <new-table :title="title" :listData="areaList" :tableItems="tableItems" :shows="tableShows" @selectionChange="selectionChange">
+      <template v-slot:right>
+        <div>
+          <el-button size="mini" type="primary"  v-if="hasPerm('brand:add')" @click="dialogVisible = true">添加区域</el-button>
+
+          <el-button size="mini" type="danger" v-if="hasPerm('area:del')" @click="delAll">批量删除</el-button>
+
+        </div>
+      </template>
+      <template #handler="scope">
+        <el-button size="mini" v-if="hasPerm('area:edit')" @click="edit(scope.row)" style="margin-right: 10px">编辑</el-button>
+        <el-popconfirm
+            title=" 确定要删除这个区域吗？"
+            @confirm="del(scope.row)"
+        >
+          <el-button type="danger" v-if="hasPerm('area:del')" size="mini" slot="reference">删除</el-button>
+        </el-popconfirm>
+      </template>
+    </new-table>
+    <table-footer
+        :totals="total"
+        :size="pageSize"
+        @sizeChange="sizeChange"
+        @pageChange="pageChange"></table-footer>
+    <!-- 新增编辑   -->
+    <el-dialog
+        :title="showType ? '编 辑' : '新 增'"
+        :visible.sync="dialogVisible"
+        width="20%">
+        <div>
+          <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
+            <el-form-item label="区域名称" prop="areaName">
+              <el-input v-model="form.areaName"></el-input>
+            </el-form-item>
+            <el-form-item label="备注">
+              <el-input v-model="form.remark"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="reset">取 消</el-button>
+          <el-button type="primary" @click="onSubmit('form')">{{showType ? '更 新' : '新 增'}}</el-button>
+        </span>
+    </el-dialog>
+
+
+  </div>
+</template>
+
+<script>
+import { areaList, delArea, addArea, editArea } from '../../utils/api.js';
+import { arrToIds } from '../../utils/index.js';
+import QueryConditions from "@/components/bioSafety/QueryConditions";
+import NewTable from "@/components/newTable/NewTable";
+import TableFooter from "@/components/TableFooter";
+export default {
+  name: "AreaAdmin",
+  components: {
+    QueryConditions,
+    NewTable,
+    TableFooter
+  },
+  data() {
+    return {
+      searchList: [
+        {
+          type: 'input',
+          label: '区域搜索：',
+          placeholder: '请输入区域',
+          field: 'keyWord'
+        },
+      ],
+      areaList: [],
+      title: '监控区域列表',
+      tableItems: [
+        {
+          prop: 'id',
+          label: 'ID',
+          minWidth: '50',
+          slotName: 'id'
+        },
+        {
+          prop: 'areaName',
+          label: '区域名称',
+          minWidth: '150',
+          slotName: 'areaName'
+        },
+        {
+          prop: 'remark',
+          label: '备注',
+          minWidth: '150',
+          slotName: 'remark'
+        },
+        {
+          label: '操作',
+          minWidth: '150',
+          slotName: 'handler'
+        }
+      ],
+      tableShows: {
+        showIndex: false,
+        showSelect: true
+      },
+      pageNum: 1,
+      pageSize: 20,
+      total: 0,
+      keyWord: '',
+      selectList: [],
+      showType: false,
+      dialogVisible: false,
+      rules: {
+        areaName: [ { required: true, message: '请输入区域名称', trigger: 'blur' } ]
+      },
+      form: {
+        areaName: '',
+        remark: '',
+      }
+    }
+  },
+  methods: {
+    // 修改size
+    sizeChange(val) {
+      this.size = val;
+      this.init();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum= val;
+      this.init();
+    },
+    init() {
+      let params = {
+        current: this.pageNum,
+        size: this.pageSize,
+        areaName: this.keyWord
+      }
+      areaList(params).then(res => {
+        if(res.code === 10000) {
+          this.areaList = res.data.records;
+          this.total = res.data.total;
+        }
+      })
+    },
+    handleQuery(data) {
+      this.keyWord = data.keyword;
+      this.pageNum = 1;
+      this.init()
+    },
+    // 编辑
+    edit(row) {
+      this.showType = true;
+      this.form.areaName = row.areaName;
+      this.form.remark = row.remark;
+      this.form.id = row.id;
+      this.dialogVisible = true;
+    },
+    // 删除
+    del(row) {
+      let params = {
+        ids: row.id
+      }
+      delArea(params).then(res => {
+        if(res.code === 10000) {
+          this.init();
+          this.$message.success(res.message)
+        } else {
+          this.$message.error('删除失败')
+        }
+      })
+    },
+    // 批量选择
+    selectionChange(rows) {
+      console.log(rows)
+      this.selectList = rows;
+    },
+    // 批量删除
+    delAll() {
+      if(this.selectList.length > 0) {
+        this.$confirm('此操作将永久删除这些区域，是否继续？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          let ids = arrToIds(this.selectList);
+          let params = {
+            ids: ids
+          }
+          delArea(params).then(res => {
+            if(res.code === 10000) {
+              this.init();
+              this.$message.success(res.message)
+            } else {
+              this.$message.error('删除失败')
+            }
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        })
+        // delArea()
+      } else {
+        this.$message.error('请勾选需要删除的区域');
+        return;
+      }
+    },
+    reset() {
+      this.dialogVisible = false;
+      this.form ={
+        areaName: '',
+        remark: '',
+      }
+      this.showType = false;
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.showType) {
+            // 编辑
+            let params = {
+              id: this.form.id,
+              areaName: this.form.areaName,
+              remark: this.form.remark
+            }
+            editArea(params).then(res => {
+              this.reset()
+              if(res.code === 10000) {
+                this.init();
+                this.$message.success(res.message)
+              } else {
+                this.$message.error('编辑失败')
+              }
+            })
+          } else {
+            // 新增
+            let params = {
+              areaName: this.form.areaName,
+              remark: this.form.remark
+            }
+            addArea(params).then(res => {
+              this.reset();
+              if(res.code === 10000) {
+                this.init();
+                this.$message.success(res.message);
+              } else {
+                this.$message.error('添加失败')
+              }
+            })
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      })
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+  .area {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px;
+  }
+</style>

src/views/Video/CameraBrand.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="cameraBrand">
+    <!-- 查询   -->
+    <query-conditions :formItems="searchList" @getQueryParams="handleQuery"></query-conditions>
+    <!--  表格   -->
+    <new-table :title="title" :listData="brandLists" :tableItems="tableItems" :shows="tableShows">
+      <template #right>
+        <div>
+          <el-button size="mini" type="primary"  v-if="hasPerm('brand:add')" @click="dialogVisible = true">添加品牌</el-button>
+
+          <el-button size="mini" type="danger" v-if="hasPerm('brand:del')" @click="delAll">批量删除</el-button>
+
+        </div>
+      </template>
+      <template #streamType="scope">
+        <div>
+          <span v-if="scope.row.streamType === 0">主码流</span>
+          <span v-else>辅码流</span>
+        </div>
+      </template>
+      <template #handler="scope">
+        <el-button size="mini" @click="edit(scope.row)"  v-if="hasPerm('brand:edit')" style="margin-right: 10px">编辑</el-button>
+        <el-popconfirm
+            title=" 确定要删除这个区域吗？"
+            @confirm="del(scope.row)"
+        >
+          <el-button type="danger"  v-if="hasPerm('brand:del')" size="mini" slot="reference">删除</el-button>
+        </el-popconfirm>
+      </template>
+    </new-table>
+
+    <!-- 新增编辑   -->
+    <el-dialog
+        :title="showType ? '编 辑' : '新 增'"
+        :visible.sync="dialogVisible"
+        width="30%">
+      <div>
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
+          <el-form-item label="品牌名称" prop="brandName">
+            <el-input v-model="form.brandName"></el-input>
+          </el-form-item>
+          <el-form-item label="主码流" prop="mainStream">
+            <el-input v-model="form.mainStream"></el-input>
+          </el-form-item>
+          <el-form-item label="副码流" prop="assistStream">
+            <el-input v-model="form.assistStream"></el-input>
+          </el-form-item>
+          <el-form-item label="所用码流" prop="streamType">
+            <el-select v-model="form.streamType">
+              <el-option v-for="item in options" :label="item.name" :value="item.id" :key="item.id"></el-option>
+            </el-select>
+          </el-form-item>
+<!--          <el-form-item label="主码流">-->
+<!--            <el-input v-model="form.mainStream"></el-input>-->
+<!--          </el-form-item>-->
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+          <el-button @click="reset">取 消</el-button>
+          <el-button type="primary" @click="onSubmit('form')">{{showType ? '更 新' : '新 增'}}</el-button>
+        </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import QueryConditions from "@/components/bioSafety/QueryConditions";
+import NewTable from "@/components/newTable/NewTable";
+import { brandList, addBarand, delBarand, editBarand } from '../../utils/api.js';
+export default {
+  name: "CameraBrand",
+  components: {
+    QueryConditions,
+    NewTable
+  },
+  data() {
+    return {
+      searchList: [
+        {
+          type: 'input',
+          label: '品牌搜索：',
+          placeholder: '请输入品牌',
+          field: 'keyWord'
+        },
+      ],
+      brandLists: [],
+      title: '摄像头品牌列表',
+      tableItems: [
+        {
+          prop: 'brandName',
+          label: '品牌名称',
+          minWidth: '150',
+          slotName: 'brandName'
+        },
+        {
+          prop: 'mainStream',
+          label: '主码流',
+          minWidth: '150',
+          slotName: 'mainStream'
+        },
+        {
+          prop: 'assistStream',
+          label: '副码流',
+          minWidth: '150',
+          slotName: 'assistStream'
+        },
+        {
+          prop: 'streamType',
+          label: '所用码流',
+          minWidth: '150',
+          slotName: 'streamType'
+        },
+        {
+          label: '操作',
+          minWidth: '150',
+          slotName: 'handler'
+        }
+      ],
+      tableShows: {
+        showIndex: false,
+        showSelect: true
+      },
+      pageNum: 1,
+      pageSize: 20,
+      total: 0,
+      keyWord: '',
+      form: {
+        brandName: '',
+        mainStream: '',
+        assistStream: '',
+        streamType: 0,
+      },
+      rules: {
+        brandName: [
+          { required: true, message: '请输入品牌名称', trigger: 'blur' }
+        ],
+        mainStream: [
+          { required: true, message: '请输入主码流', trigger: 'blur' }
+        ],
+        assistStream: [
+          { required: true, message: '请输入副码流', trigger: 'blur' }
+        ],
+        streamType: [
+          { required: true, message: '请选择所用码流', trigger: 'change' }
+        ]
+      },
+      options: [
+        {
+          id: 0,
+          name: '主码流'
+        },
+        {
+          id: 1,
+          name: '辅码流'
+        }
+      ],
+      dialogVisible: false,
+      showType: false
+    }
+  },
+  methods: {
+    handleQuery(data) {
+      this.keyWord = data.keyWord;
+    },
+    init() {
+      let params = {
+        current: this.pageNum,
+        size: this.pageSize,
+        brandName: this.keyWord
+      }
+      brandList(params).then(res => {
+        if(res.code === 10000) {
+          this.brandLists = res.data.records;
+          this.total = res.data.total;
+        }
+      })
+    },
+    edit(row) {
+      this.form = {
+        id: row.id,
+        brandName: row.brandName,
+        mainStream: row.mainStream,
+        assistStream: row.assistStream,
+        streamType: row.streamType,
+      }
+      this.dialogVisible = true;
+      this.showType = true;
+    },
+    // 批量删除
+    delAll() {},
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.showType) {
+            // 编辑
+            let params = {
+              id: this.form.id,
+              brandName: this.form.brandName,
+              mainStream: this.form.mainStream,
+              assistStream: this.form.assistStream,
+              streamType: this.form.streamType,
+            }
+            editBarand(params).then(res => {
+              this.reset()
+              if(res.code === 10000) {
+                this.init();
+                this.$message.success(res.message)
+              } else {
+                this.$message.error('编辑失败')
+              }
+            })
+          } else {
+            // 新增
+            let params = {
+              brandName: this.form.brandName,
+              mainStream: this.form.mainStream,
+              assistStream: this.form.assistStream,
+              streamType: this.form.streamType
+            }
+            addBarand(params).then(res => {
+              this.reset();
+              if(res.code === 10000) {
+                this.init();
+                this.$message.success(res.message);
+              } else {
+                this.$message.error('添加失败')
+              }
+            })
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      })
+    },
+    reset() {
+      this.showType = false;
+      this.dialogVisible = false;
+      this.form =  {
+        brandName: '',
+        mainStream: '',
+        assistStream: '',
+        streamType: 0,
+      }
+    },
+    del(row) {
+      let params = {
+        ids: row.id
+      }
+      delBarand(params).then(res =>{
+        if(res.code === 10000) {
+          this.init()
+          this.$message.success(res.message)
+        } else {
+          this.$message.error('删除失败')
+        }
+      })
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+  .cameraBrand {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px;
+  }
+</style>