8 changed files with 530 additions and 5 deletions
-
5src/assets/styles/lend-manage.scss
-
63src/views/storeManage/listenManage/index.vue
-
159src/views/storeManage/listenManage/listenConfig/index.vue
-
105src/views/storeManage/listenManage/module/bindCamera.vue
-
17src/views/storeManage/listenManage/module/data1.json
-
67src/views/storeManage/listenManage/module/details.vue
-
114src/views/storeManage/listenManage/videoListen/index.vue
-
5src/views/system/notifyManage/index.vue
@ -0,0 +1,63 @@ |
|||||
|
<template> |
||||
|
<div class="app-container lend-container"> |
||||
|
<div class="tab-content"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<span class="right-bottom-line" /> |
||||
|
<ul class="tab-nav"> |
||||
|
<li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">视频监控<i /></li> |
||||
|
<li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">监控配置<i /></li> |
||||
|
<!-- 最右侧装饰img --> |
||||
|
<span class="tab-right-img" /> |
||||
|
</ul> |
||||
|
<component :is="comName" /> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import videoListen from './videoListen/index.vue' |
||||
|
import listenConfig from './listenConfig/index.vue' |
||||
|
|
||||
|
export default { |
||||
|
name: 'ListenManage', |
||||
|
components: { |
||||
|
videoListen, |
||||
|
listenConfig |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeIndex: 0 |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
comName: function() { |
||||
|
if (this.activeIndex === 0) { |
||||
|
return 'videoListen' |
||||
|
} else if (this.activeIndex === 1) { |
||||
|
return 'listenConfig' |
||||
|
} |
||||
|
return 'videoListen' |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeActiveTab(data) { |
||||
|
this.activeIndex = data |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.lend-container{ |
||||
|
.tab-content{ |
||||
|
position: relative; |
||||
|
margin-top: 61px; |
||||
|
border: 1px solid #113d72; |
||||
|
} |
||||
|
} |
||||
|
.tab-content .tab-nav{ |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,159 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="head-container"> |
||||
|
<el-button size="mini" icon="el-icon-video-camera" :disabled="!(selections.length===1)" @click="handleBind">绑定摄像头</el-button> |
||||
|
<el-button icon="el-icon-delete" size="mini" :disabled="!selections.length" @click="delVisible=true">删除</el-button> |
||||
|
<el-select v-model="timeType" class="filter-item" style="width: 155px; height: 30px;margin:0 0 0 10px" @change="crud.toQuery"> |
||||
|
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-select> |
||||
|
<el-input |
||||
|
v-model="keyWord" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入关键词" |
||||
|
style="width: 300px;margin-right:10px;padding-left:10px" |
||||
|
class="input-prepend filter-item" |
||||
|
@keyup.enter.native="crud.toQuery" |
||||
|
> |
||||
|
<el-select slot="prepend" v-model="optionVal" style="width: 100px"> |
||||
|
<el-option |
||||
|
v-for="item in options" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-input> |
||||
|
<date-range-picker v-model="queryTime" class="date-item" /> |
||||
|
<rrOperation /> |
||||
|
</div> |
||||
|
<!-- :cell-class-name="cell" --> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
:data="tableData" |
||||
|
style="width: 100%;" |
||||
|
height="calc(100vh - 356px)" |
||||
|
@row-click="clickRowHandler" |
||||
|
@row-dblclick="handleDbClick" |
||||
|
@selection-change="selectionChangeHandler" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" align="center" /> |
||||
|
<el-table-column type="index" label="序号" width="100" align="center" /> |
||||
|
<el-table-column prop="area" label="所属区域" align="center" min-width="150" /> |
||||
|
<el-table-column prop="" label="设备" align="center" min-width="150" /> |
||||
|
<el-table-column prop="" label="摄像头" align="center" min-width="180" /> |
||||
|
<el-table-column prop="" label="录像保存时长" align="center" min-width="180" /> |
||||
|
<el-table-column prop="create_time" label="操作时间" align="center" min-width="180"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.create_time | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
</el-table> |
||||
|
<pagination /> |
||||
|
<Details ref="DetailsDom" /> |
||||
|
<BindCamera ref="bindDom" /> |
||||
|
<!-- 删除 --> |
||||
|
<el-dialog :visible.sync="delVisible" title="提示"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<p class="delMsg">确定删除所选消息吗？</p> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="handleDelConfirm">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import rrOperation from '@crud/RR.operation' |
||||
|
import CRUD, { presenter, crud, header } from '@crud/crud' |
||||
|
import DateRangePicker from '@/components/DateRangePicker' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import Details from '../module/details.vue' |
||||
|
import BindCamera from '../module/bindCamera.vue' |
||||
|
import data1 from '../module/data1' |
||||
|
// import qs from 'qs' |
||||
|
export default { |
||||
|
name: 'ListenConfig', |
||||
|
components: { rrOperation, DateRangePicker, pagination, Details, BindCamera }, |
||||
|
mixins: [presenter(), crud(), header()], |
||||
|
cruds() { |
||||
|
return CRUD({ |
||||
|
url: 'api/alarmlog/', |
||||
|
sort: ['state'], |
||||
|
optShow: {} |
||||
|
}) |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
delVisible: false, |
||||
|
tableData: [], |
||||
|
selections: [], |
||||
|
keyWord: '', |
||||
|
timeType: 0, |
||||
|
timeOptions: [ |
||||
|
{ value: 0, label: '全部' }, |
||||
|
{ value: 1, label: '事件触发前后10秒' }, |
||||
|
{ value: 2, label: '事件触发前后20秒' }, |
||||
|
{ value: 3, label: '事件触发前后30秒' } |
||||
|
], |
||||
|
optionVal: 1, |
||||
|
options: [ |
||||
|
{ value: 1, label: '所属区域' }, |
||||
|
{ value: 2, label: '设备' } |
||||
|
], |
||||
|
queryTime: null |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.tableData = data1.rows |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取数据前的处理 |
||||
|
// [CRUD.HOOK.beforeRefresh]() { |
||||
|
// this.crud.downloadLoading = true |
||||
|
// this.crud.query.state = null |
||||
|
// // this.crud.query.blurry = this.keyWord |
||||
|
// if (this.oprType > -1) { |
||||
|
// this.crud.query.state = this.oprType |
||||
|
// } |
||||
|
// this.crud.downloadLoading = false |
||||
|
// }, |
||||
|
// 绑定摄像头 |
||||
|
handleBind() { |
||||
|
this.$refs.bindDom.bindVisible = true |
||||
|
}, |
||||
|
// 删除 |
||||
|
handleDelConfirm() { |
||||
|
this.handleDelConfirm = false |
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.toggleRowSelection(row) // 单击选中 |
||||
|
}, |
||||
|
// 双击详情 |
||||
|
handleDbClick(row) { |
||||
|
// console.log(row) |
||||
|
this.$refs.DetailsDom.detailsVisible = true |
||||
|
}, |
||||
|
selectionChangeHandler(val) { |
||||
|
this.selections = val |
||||
|
} |
||||
|
// cell({ row, columnIndex }) { |
||||
|
// if (row.state === true && columnIndex === 2) { |
||||
|
// return 'have-clear' |
||||
|
// } else if (row.state === false && columnIndex === 2) { |
||||
|
// return 'fail-clear' |
||||
|
// } |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import '~@/assets/styles/lend-manage.scss'; |
||||
|
@import "~@/assets/styles/archives-manage.scss"; |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,105 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-dialog append-to-body :close-on-click-modal="false" :visible.sync="bindVisible" title="绑定摄像头"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="head-container"> |
||||
|
<p> |
||||
|
<span class="bule">选择设备</span> |
||||
|
<el-select v-model="devType" class="filter-item" style="width: 155px; height: 30px;margin:0 0 0 10px"> |
||||
|
<el-option v-for="item in devOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-select> |
||||
|
</p> |
||||
|
<p> |
||||
|
<span class="bule">保存录像时长</span> |
||||
|
<el-select v-model="timeType" class="filter-item" style="width: 155px; height: 30px;margin:0 0 0 10px"> |
||||
|
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-select> |
||||
|
</p> |
||||
|
</div> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
:data="tableData" |
||||
|
style="width: 100%;" |
||||
|
height="calc(100vh - 556px)" |
||||
|
@row-click="clickRowHandler" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" align="center" /> |
||||
|
<el-table-column type="index" label="序号" width="80" align="center" /> |
||||
|
<el-table-column prop="area" label="所属区域" min-width="150" align="center" /> |
||||
|
<el-table-column prop="" label="设备类型" align="center" min-width="150" /> |
||||
|
<el-table-column prop="" label="设备名称" align="center" min-width="150" /> |
||||
|
</el-table> |
||||
|
<!-- 分页器 --> |
||||
|
<pagination /> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="handleSave">保存</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import data1 from './data1' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import CRUD, { presenter } from '@crud/crud' |
||||
|
|
||||
|
export default { |
||||
|
components: { pagination }, |
||||
|
mixins: [presenter()], |
||||
|
cruds() { |
||||
|
return CRUD({ |
||||
|
url: 'api/alarmlog/', |
||||
|
sort: ['state'], |
||||
|
optShow: {} |
||||
|
}) |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
tableData: [], |
||||
|
bindVisible: false, |
||||
|
devType: 1, |
||||
|
devOptions: [ |
||||
|
{ value: 1, label: '库房名称-密集架1' }, |
||||
|
{ value: 2, label: '库房名称-密集架2' } |
||||
|
], |
||||
|
timeType: 1, |
||||
|
timeOptions: [ |
||||
|
{ value: 1, label: '事件触发前后10秒' }, |
||||
|
{ value: 2, label: '事件触发前后20秒' }, |
||||
|
{ value: 3, label: '事件触发前后30秒' } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.tableData = data1.rows |
||||
|
}, |
||||
|
methods: { |
||||
|
handleSave() { |
||||
|
this.bindVisible = false |
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.toggleRowSelection(row) // 单击选中 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import '~@/assets/styles/lend-manage.scss'; |
||||
|
@import "~@/assets/styles/archives-manage.scss"; |
||||
|
.head-container{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding-top: 0; |
||||
|
p{ |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
.bule{ |
||||
|
color: #339CFF; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,17 @@ |
|||||
|
{ |
||||
|
"rows":[ |
||||
|
{ |
||||
|
"area":"档案库" |
||||
|
}, |
||||
|
{ |
||||
|
"area":"档案库" |
||||
|
}, |
||||
|
{}, |
||||
|
{}, |
||||
|
{}, |
||||
|
{}, |
||||
|
{}, |
||||
|
{}, |
||||
|
{} |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,67 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-dialog append-to-body :close-on-click-modal="false" :visible.sync="detailsVisible" title="绑定详情"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="head-container"> |
||||
|
<p> |
||||
|
<span class="bule">选择设备：</span> |
||||
|
<span class="white">库房名称-密集架1</span> |
||||
|
</p> |
||||
|
<p> |
||||
|
<span class="bule">保存录像时长：</span> |
||||
|
<span class="white">事件触发前后10秒</span> |
||||
|
</p> |
||||
|
</div> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
:data="tableData" |
||||
|
style="width: 100%;" |
||||
|
height="calc(100vh - 556px)" |
||||
|
> |
||||
|
<el-table-column type="index" label="序号" width="80" align="center" /> |
||||
|
<el-table-column prop="area" label="所属区域" min-width="150" align="center" /> |
||||
|
<el-table-column prop="" label="设备类型" align="center" min-width="150" /> |
||||
|
<el-table-column prop="" label="设备名称" align="center" min-width="150" /> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import data1 from './data1' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
detailsVisible: false |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.tableData = data1.rows |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import '~@/assets/styles/lend-manage.scss'; |
||||
|
@import "~@/assets/styles/archives-manage.scss"; |
||||
|
.head-container{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding-top: 0; |
||||
|
p{ |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
.bule{ |
||||
|
color: #339CFF; |
||||
|
} |
||||
|
.white{ |
||||
|
color: #fff; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,114 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="head-container"> |
||||
|
<el-select v-model="optionVal" class="filter-item" style="width: 125px; height: 30px;margin:0 10px 0 0"> |
||||
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-select> |
||||
|
<date-range-picker v-model="queryTime" class="date-item" /> |
||||
|
<rrOperation /> |
||||
|
</div> |
||||
|
<!-- :cell-class-name="cell" --> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
:data="tableData" |
||||
|
style="width: 100%;" |
||||
|
height="calc(100vh - 356px)" |
||||
|
> |
||||
|
<!-- <el-table-column type="selection" width="55" align="center" /> --> |
||||
|
<el-table-column type="index" label="序号" width="80" align="center" /> |
||||
|
<el-table-column prop="area" label="所属区域" min-width="150" align="center" /> |
||||
|
<el-table-column prop="" label="设备" align="center" min-width="150" /> |
||||
|
<el-table-column prop="" label="摄像头" align="center" min-width="150" /> |
||||
|
<el-table-column prop="" label="事件" align="center" min-width="180" /> |
||||
|
<el-table-column prop="" label="内容描述" align="center" min-width="180" /> |
||||
|
<el-table-column prop="" label="事件发生时间" align="center" min-width="180"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.create_time | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="" label="操作" align="center" min-width="100"> |
||||
|
<template> |
||||
|
<el-button size="mini" style="background:#3A99FD" @click="handleListen">查看监控</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<pagination /> |
||||
|
<!-- 查看监控 --> |
||||
|
<el-dialog append-to-body :close-on-click-modal="false" :visible.sync="lookVisible" title="查看监控"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<!-- --> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import rrOperation from '@crud/RR.operation' |
||||
|
import CRUD, { presenter, crud, header } from '@crud/crud' |
||||
|
import DateRangePicker from '@/components/DateRangePicker' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import data1 from '../module/data1' |
||||
|
// import qs from 'qs' |
||||
|
export default { |
||||
|
name: 'VideoListen', |
||||
|
components: { rrOperation, DateRangePicker, pagination }, |
||||
|
mixins: [presenter(), crud(), header()], |
||||
|
cruds() { |
||||
|
return CRUD({ |
||||
|
url: 'api/alarmlog/', |
||||
|
sort: ['state'], |
||||
|
optShow: {} |
||||
|
}) |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
tableData: [], |
||||
|
lookVisible: false, |
||||
|
optionVal: 0, |
||||
|
options: [ |
||||
|
{ value: 0, label: '全部' }, |
||||
|
{ value: 1, label: '密集架开架' }, |
||||
|
{ value: 2, label: '密集架报警' }, |
||||
|
{ value: 3, label: '通道门报警' } |
||||
|
], |
||||
|
queryTime: null |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.tableData = data1.rows |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取数据前的处理 |
||||
|
// [CRUD.HOOK.beforeRefresh]() { |
||||
|
// this.crud.downloadLoading = true |
||||
|
// this.crud.query.state = null |
||||
|
// // this.crud.query.blurry = this.keyWord |
||||
|
// if (this.oprType > -1) { |
||||
|
// this.crud.query.state = this.oprType |
||||
|
// } |
||||
|
// this.crud.downloadLoading = false |
||||
|
// }, |
||||
|
|
||||
|
// cell({ row, columnIndex }) { |
||||
|
// if (row.state === true && columnIndex === 2) { |
||||
|
// return 'have-clear' |
||||
|
// } else if (row.state === false && columnIndex === 2) { |
||||
|
// return 'fail-clear' |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// 查看监控 |
||||
|
handleListen() { |
||||
|
this.lookVisible = true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import '~@/assets/styles/lend-manage.scss'; |
||||
|
@import "~@/assets/styles/archives-manage.scss"; |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue