20 changed files with 484 additions and 41 deletions
-
2src/api/storeManage/deviceManage/device.js
-
4src/views/archivesManage/caseManage/caseList/index.vue
-
43src/views/archivesManage/lendManage/components/lendArchivesList.vue
-
154src/views/archivesManage/lendManage/components/video.vue
-
2src/views/components/WarehouseWarning.vue
-
27src/views/dashboard/PanelGroup.vue
-
6src/views/environmentalScreen/index.vue
-
8src/views/home.vue
-
23src/views/storeManage/deviceManage/module/deviceDetail.vue
-
2src/views/storeManage/listenManage/index.vue
-
19src/views/storeManage/listenManage/listenConfig/index.vue
-
154src/views/storeManage/taskManage/index.vue
-
7src/views/storeManage/warehouse3D/archivesStorage/index.vue
-
2src/views/storeManage/warehouse3D/destroyedFileRoom/index.vue
-
6src/views/storeManage/warehouse3D/index.vue
-
2src/views/storeManage/warehouse3D/infoRoom/index.vue
-
6src/views/system/logManage/deviceLog/index.vue
-
24src/views/system/notifyManage/index.vue
-
2src/views/system/role/index.vue
-
30src/views/system/user/messageCenter/index.vue
@ -0,0 +1,154 @@ |
|||||
|
<template> |
||||
|
<el-dialog :close-on-click-modal="false" :visible.sync="openVideoVisible" :before-close="handleClose" title="实时监控" width="1068px"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<div style="flex: 1; padding: 20px; background-color:#031435;"> |
||||
|
<jsmpeg-player :url="wsUrl" :with-toolbar="false" /> |
||||
|
</div> |
||||
|
<div class="video-list"> |
||||
|
<h4>档案室</h4> |
||||
|
<span v-for="(item,index) in cameraData" :key="index" :class="[{'active': index === videoIndex}]" @click="changeVideo(index)">{{ item.deviceInfo.deviceName }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import JSMpeg from '@/components/jsmpeg' |
||||
|
import JsmpegPlayer from '@/components/jsmpeg-player/jsmpeg-player.vue' |
||||
|
import axios from 'axios' |
||||
|
import qs from 'qs' |
||||
|
export default { |
||||
|
components: { JsmpegPlayer }, |
||||
|
props: { |
||||
|
dialogOpen: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
cameraData: { |
||||
|
type: Array, |
||||
|
default: () => { return [] } |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
videoIndex: 0, |
||||
|
videoTitle: '', |
||||
|
camConfig: null, |
||||
|
player: null, |
||||
|
noSignal: true, |
||||
|
wsUrl: '' |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
rtspUrl: function() { |
||||
|
return 'rtsp://' + this.camConfig.deviceInfo.deviceAccount + ':' + this.camConfig.deviceInfo.devicePassword + '@' + this.camConfig.deviceInfo.deviceIp + ':554/' + this.camConfig.deviceInfo.videoRoute + '/1' |
||||
|
}, |
||||
|
openVideoVisible: { |
||||
|
get() { |
||||
|
return this.dialogOpen |
||||
|
}, |
||||
|
set(value) { |
||||
|
this.$emit('update:dialogOpen', value) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeVideo(index) { |
||||
|
this.videoIndex = index |
||||
|
this.camConfig = this.cameraData[index] |
||||
|
this.play() |
||||
|
}, |
||||
|
handleClose(done) { |
||||
|
this.openVideoVisible = false |
||||
|
// this.myVideo = document.getElementById('canvas') |
||||
|
// this.myVideo.pause() |
||||
|
// $.post('http://127.0.0.1:3000/cameras/close/', { rtspUrl: $('#rtsp').val() }, function(result) { |
||||
|
const data = { rtspUrl: this.rtspUrl } |
||||
|
// console.log(process.env.VUE_APP_CAMERA_API) |
||||
|
const Uri = 'http://' + process.env.VUE_APP_CAMERA_API + '/cameras/close/' |
||||
|
axios.post(Uri, qs.stringify(data), |
||||
|
{ |
||||
|
headers: { |
||||
|
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' |
||||
|
} |
||||
|
} |
||||
|
).then(res => { |
||||
|
this.wsUrl = '' |
||||
|
done() |
||||
|
}) |
||||
|
}, |
||||
|
play() { |
||||
|
const data = { rtspUrl: this.rtspUrl, size: '1024*768', port: process.env.VUE_APP_CAMERA_API.split(':')[1], videoRoute: this.camConfig.deviceInfo.videoRoute } |
||||
|
const Uri = 'http://' + process.env.VUE_APP_CAMERA_API + '/cameras/' |
||||
|
axios.post(Uri, qs.stringify(data), |
||||
|
{ |
||||
|
headers: { |
||||
|
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' |
||||
|
} |
||||
|
} |
||||
|
).then(res => { |
||||
|
// res.data.port |
||||
|
const ip = process.env.VUE_APP_CAMERA_API.split(':')[0] |
||||
|
this.wsUrl = 'ws://' + ip + ':' + res.data.port |
||||
|
// var canvas = document.getElementById('canvas') |
||||
|
// const opt = { |
||||
|
// contianer: this.$refs['canvas-wrap'], |
||||
|
// poster: '0.jpg', |
||||
|
// onSourceEstablished: (source) => { |
||||
|
// console.log('onSourceEstablished') |
||||
|
// // this.flags.noSignal = false |
||||
|
// this.noSignal = false |
||||
|
// // clearTimeout(this.timers.noSignal) |
||||
|
// // this.timers.noSignal = null |
||||
|
// this.$emit('source-established', source) |
||||
|
// } |
||||
|
// } |
||||
|
// this.player = new JSMpeg.Player(this.wsUrl, opt) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
::v-deep .el-dialog { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
.el-dialog__body{ |
||||
|
padding: 0; |
||||
|
} |
||||
|
.setting-dialog{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
min-height: 300px; |
||||
|
} |
||||
|
} |
||||
|
.video-list{ |
||||
|
width: 200px; |
||||
|
padding: 20px; |
||||
|
background-color: #021941; |
||||
|
h4{ |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
color: #339CFF; |
||||
|
line-height: 40px; |
||||
|
} |
||||
|
span{ |
||||
|
display: block; |
||||
|
color: #339CFF; |
||||
|
line-height: 40px; |
||||
|
cursor: pointer; |
||||
|
&:hover{ |
||||
|
color: #fff; |
||||
|
background-image: linear-gradient(90deg, rgba(59, 160, 255, 0) 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%);; |
||||
|
} |
||||
|
&.active{ |
||||
|
color: #fff; |
||||
|
background-image: linear-gradient(90deg, rgba(59, 160, 255, 0) 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%);; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,154 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="head-container"> |
||||
|
<crudOperation :permission="permission" /> |
||||
|
<div class="head-search" style="margin-left: 40px;"> |
||||
|
<!-- 搜索 --> |
||||
|
<el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery"> |
||||
|
<i slot="prefix" class="iconfont icon-zhuangtai-fanbai" /> |
||||
|
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" /> |
||||
|
</el-select> |
||||
|
<el-input v-model="query.blurry" size="small" clearable placeholder="输入任务名称搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
||||
|
<rrOperation /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="app-container container-wrap" style="min-height: calc(100vh - 266px)"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<!--表格渲染--> |
||||
|
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 300px)" @row-click="clickRowHandler" @row-dblclick="handleDbClick" @selection-change="crud.selectionChangeHandler"> |
||||
|
<el-table-column type="selection" width="55" align="center" /> |
||||
|
<el-table-column align="center" prop="username" label="任务名称" /> |
||||
|
<el-table-column align="center" prop="username" label="任务类型" /> |
||||
|
<el-table-column align="center" prop="username" label="目标设备" /> |
||||
|
<el-table-column align="center" prop="username" label="计划" /> |
||||
|
<el-table-column prop="createTime" label="下次运行"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createTime" label="最后运行"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="状态" prop="enabled"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-switch v-model="scope.row.enabled" active-color="#409EFF" inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.enabled)" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination /> |
||||
|
</div> |
||||
|
<!-- form --> |
||||
|
<el-dialog :title="formTitle" :visible.sync="formVisible" :before-close="handleClose"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="dialog-delt"> |
||||
|
111 |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text">取消</el-button> |
||||
|
<el-button type="primary" @click.native="formVisible = false">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import crudRoles from '@/api/system/role' |
||||
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
||||
|
import rrOperation from '@crud/RR.operation' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
|
||||
|
const defaultForm = { id: null, name: null, depts: [], description: null, dataScope: '全部', level: 3 } |
||||
|
|
||||
|
export default { |
||||
|
name: 'TaskManage', |
||||
|
components: { rrOperation, crudOperation, pagination }, |
||||
|
cruds() { |
||||
|
return CRUD({ title: '计划任务管理', url: 'api/roles', crudMethod: crudRoles, |
||||
|
optShow: { |
||||
|
add: true, |
||||
|
edit: true, |
||||
|
del: true, |
||||
|
download: true, |
||||
|
group: false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
||||
|
data() { |
||||
|
return { |
||||
|
formVisible: false, |
||||
|
formTitle: '新增任务', |
||||
|
enabledTypeOptions: [ |
||||
|
{ key: 'true', display_name: '激活' }, |
||||
|
{ key: 'false', display_name: '锁定' } |
||||
|
], |
||||
|
permission: { |
||||
|
add: ['admin', 'task:add'], |
||||
|
edit: ['admin', 'task:edit'], |
||||
|
del: ['admin', 'task:del'] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
methods: { |
||||
|
// 新增与编辑前做的操作 |
||||
|
[CRUD.HOOK.afterToCU](crud, form) { |
||||
|
}, |
||||
|
// 新增前将多选的值设置为空 |
||||
|
[CRUD.HOOK.beforeToAdd]() { |
||||
|
}, |
||||
|
// 初始化编辑时候的角色与岗位 |
||||
|
[CRUD.HOOK.beforeToEdit](crud, form) { |
||||
|
}, |
||||
|
// 提交前做的操作 |
||||
|
[CRUD.HOOK.afterValidateCU](crud) { |
||||
|
return true |
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.toggleRowSelection(row) |
||||
|
}, |
||||
|
// 双击详情 |
||||
|
handleDbClick(row) { |
||||
|
this.$refs.DetailsDom.detailsVisible = true |
||||
|
}, |
||||
|
// 改变状态 |
||||
|
changeEnabled(data, val) { |
||||
|
this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
// crudRoles.edit(data).then(res => { |
||||
|
// this.crud.notify(this.dict.label.user_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS) |
||||
|
// }).catch(() => { |
||||
|
// data.enabled = !data.enabled |
||||
|
// }) |
||||
|
}).catch(() => { |
||||
|
data.enabled = !data.enabled |
||||
|
}) |
||||
|
}, |
||||
|
handleClose() { |
||||
|
this.formVisible = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
::v-deep .head-container{ |
||||
|
display: flex; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.head-search{ |
||||
|
margin-bottom:0 ; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue