|
|
@@ -0,0 +1,353 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-container>
|
|
|
+ <!-- form表单 -->
|
|
|
+ <el-header>
|
|
|
+ <div class="rect rect-form">
|
|
|
+ <el-form :inline="true" :model="form" @keyup.enter.native="getDataList()" size="mini" ref="form">
|
|
|
+ <el-form-item>
|
|
|
+ <el-select v-model="form.areaId">
|
|
|
+ <el-option v-for="item in column" :key="item.id" :value="item.id" :label="item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:200px">
|
|
|
+ <el-input v-model="form.keyword" style="width:200px" placeholder="请输入摄像头"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="getDataList()" icon="el-icon-search">查 询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-circle-close"
|
|
|
+ @click="clearAll">清 空</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-header>
|
|
|
+ <el-main>
|
|
|
+ <div class="rect" style="margin-top: 20px">
|
|
|
+ <el-form size="mini" :inline="true">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="visible = true">
|
|
|
+ 新 增
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="delAll"
|
|
|
+ type="danger"
|
|
|
+ :disabled="selectList.length <= 0">
|
|
|
+ 删 除
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table
|
|
|
+ :data="dataList"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ v-loading="dataListLoading"
|
|
|
+ style="width: 100%;"
|
|
|
+ @selection-change="selectionChangeHandle"
|
|
|
+ size="mini"
|
|
|
+ height="578"
|
|
|
+ :header-cell-style="{background:'rgb(245,245,245)',color:'#000',height: '45px',fontSize: '13px',fontWeight: 'normal',borderBottom: '1px solid #ccc'}"
|
|
|
+ :cell-style="{color: '#888',fontSize: '13px'}">
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ width="50">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="id"
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ label="id">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ label="区域名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ v-if="isAuth('sys:user:update')"
|
|
|
+ type="text"
|
|
|
+ size="medium"
|
|
|
+ @click="addOrUpdateHandle(scope.row)"
|
|
|
+ style="color: rgb(24,144,255)">
|
|
|
+ 修改
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="isAuth('sys:user:delete')"
|
|
|
+ type="text"
|
|
|
+ size="medium"
|
|
|
+ @click="deleteHandle(scope.row.id)"
|
|
|
+ style="color: rgb(24,144,255)">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <table-footer
|
|
|
+ :totals="total"
|
|
|
+ :size="limit"
|
|
|
+ @sizeChange="sizeChange"
|
|
|
+ @pageChange="pageChange"></table-footer>
|
|
|
+ </div>
|
|
|
+ <!-- 弹框 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="!dataForm.id ? '新增' : '修改'"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :visible.sync="visible"
|
|
|
+ width="600px">
|
|
|
+ <el-form
|
|
|
+ :model="dataForm"
|
|
|
+ :rules="dataRule"
|
|
|
+ ref="dataForm"
|
|
|
+ @keyup.enter.native="dataFormSubmit()"
|
|
|
+ label-width="80px"
|
|
|
+ size="mini"
|
|
|
+ style="margin-left: 20px;width: 500px">
|
|
|
+ <el-form-item label="所属区域" prop="name">
|
|
|
+ <el-select v-model="dataForm.areaId">
|
|
|
+ <el-option v-for="item in column" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="mini" @click="onCancel">关闭</el-button>
|
|
|
+ <el-button size="mini" type="primary" @click="dataFormSubmit()">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import TableFooter from '../../../components/TableFooter'
|
|
|
+export default {
|
|
|
+ name: 'camera',
|
|
|
+ components: {
|
|
|
+ TableFooter
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ keyword: '',
|
|
|
+ areaId: ''
|
|
|
+ },
|
|
|
+ dataList: [],
|
|
|
+ dataListLoading: false,
|
|
|
+ visible: false,
|
|
|
+ selectList: [],
|
|
|
+ total: 0,
|
|
|
+ page: 1,
|
|
|
+ limit: 20,
|
|
|
+ dataForm: {
|
|
|
+ id: '',
|
|
|
+ areaId: '',
|
|
|
+ areaName: '',
|
|
|
+ cameraType: '',
|
|
|
+ account: '',
|
|
|
+ ip: '',
|
|
|
+ name: '',
|
|
|
+ password: '',
|
|
|
+ remark: '',
|
|
|
+ rtsp: '',
|
|
|
+ },
|
|
|
+ dataRule: {
|
|
|
+ name: [
|
|
|
+ {required: true, message: '区域名称不能为空', trigger: 'blur'}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ column: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initArea () {
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/management/pasturearea/findAll'),
|
|
|
+ method: 'get',
|
|
|
+ params: this.$http.adornParams()
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.column = res.data.all
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getDataList () {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ clearAll () {
|
|
|
+ this.form.keyword = ''
|
|
|
+ },
|
|
|
+ delAll () {
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/management/camerainfo/delete'),
|
|
|
+ method: 'post',
|
|
|
+ data: this.$http.adornData(this.selectList, false)
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.init()
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ sizeChange (val) {
|
|
|
+ this.limit = val
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ pageChange (val) {
|
|
|
+ this.page = val
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ init () {
|
|
|
+ this.dataListLoading = true
|
|
|
+ let params = {
|
|
|
+ page: this.page,
|
|
|
+ limit: this.limit,
|
|
|
+ keyword: this.form.keyword,
|
|
|
+ areaId: this.form.areaId
|
|
|
+ }
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/management/camerainfo/list'),
|
|
|
+ method: 'get',
|
|
|
+ params: this.$http.adornParams(params)
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.dataListLoading = false
|
|
|
+ this.dataList = res.data.page.list
|
|
|
+ this.total = res.data.page.totalCount
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectionChangeHandle (val) {
|
|
|
+ this.selectList = []
|
|
|
+ val.forEach(item => {
|
|
|
+ this.selectList.push(item.id)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addOrUpdateHandle (row) {
|
|
|
+ this.dataForm = {
|
|
|
+ id: row.id,
|
|
|
+ name: row.name
|
|
|
+ }
|
|
|
+ this.visible = true
|
|
|
+ },
|
|
|
+ deleteHandle (id) {
|
|
|
+ let ids = [id]
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl('/management/camerainfo/delete'),
|
|
|
+ method: 'post',
|
|
|
+ data: this.$http.adornData(ids, false)
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.$message.success('删除成功！')
|
|
|
+ this.init()
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ dataFormSubmit () {
|
|
|
+ this.$refs['dataForm'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let params = {
|
|
|
+ id: this.dataForm.id == '' ? undefined : this.dataForm.id,
|
|
|
+ name: this.dataForm.name
|
|
|
+ }
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl(`${!this.dataForm.id ? '/management/camerainfo/save' : '/management/camerainfo/update'}`),
|
|
|
+ method: 'post',
|
|
|
+ data: this.$http.adornData(params, true)
|
|
|
+ }).then(({data}) => {
|
|
|
+ if (data && data.code === 0) {
|
|
|
+ this.visible = false
|
|
|
+ this.$message({
|
|
|
+ message: '操作成功',
|
|
|
+ type: 'success',
|
|
|
+ duration: 1500
|
|
|
+ })
|
|
|
+ this.init()
|
|
|
+ this.reset()
|
|
|
+ } else {
|
|
|
+ this.$message.error(data.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 关闭模态框
|
|
|
+ onCancel () {
|
|
|
+ this.visible = false
|
|
|
+ this.reset()
|
|
|
+ },
|
|
|
+ reset () {
|
|
|
+ this.dataForm = {
|
|
|
+ id: '',
|
|
|
+ name: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.initArea()
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.rect {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 30px 15px;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+}
|
|
|
+.rect-form {
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
+.rect-table {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+/deep/ .el-table--mini td, .el-table--mini th {
|
|
|
+ padding: 3px 0 !important;
|
|
|
+ height: 20px !important;
|
|
|
+}
|
|
|
+/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
|
|
|
+ color: rgb(24,144,255);
|
|
|
+ background-color: rgb(24,144,255);
|
|
|
+ border-color: rgb(24,144,255);
|
|
|
+}
|
|
|
+/deep/.el-table .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
|
+ background-color: rgb(24,144,255);
|
|
|
+ border-color: rgb(24,144,255);
|
|
|
+}
|
|
|
+/deep/.el-table .el-checkbox__inner:hover {
|
|
|
+ border-color: rgb(24,144,255);
|
|
|
+}
|
|
|
+/deep/.el-table .el-checkbox__input.is-focus .el-checkbox__inner {
|
|
|
+ border-color: rgb(24,144,255);
|
|
|
+}
|
|
|
+/deep/.el-table #select .cell .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
|
+ background-color: rgb(24,144,255);
|
|
|
+ border-color: rgb(24,144,255);
|
|
|
+}
|
|
|
+</style>
|
