Skip to content

B
binhai-video
Commit acc6aed8 authored by 刘怀志's avatar 刘怀志
Browse files
Options

暂存

parent 3ff6d2ce
Hide whitespace changes
Inline Side-by-side
Showing with 359 additions and 0 deletions
src/router/index.js
View file @ acc6aed8
......@@ -340,6 +340,35 @@ export const constantRoutes = [
meta: { title: '智能运维管理', icon: 'dashboard' }
}
]
},
// 实时过车监控
{
path: '/passingMonitoring',
component: Layout,
redirect: '/passingMonitoring/index',
children: [
{
path: 'index',
component: () => import('@/views/picturePlayback/passingMonitoring'),
name: 'PassingMonitoring',
meta: { title: '实时过车监控', icon: 'dashboard' }
}
]
},
// 实时过车监控
{
path: '/passingMonitoringIframe',
component: Layout,
redirect: '/passingMonitoringIframe/index',
hidden: true,
children: [
{
path: 'index',
component: () => import('@/views/picturePlayback/passingMonitoring'),
name: 'PassingMonitoringIframe',
meta: { title: '实时过车监控', icon: 'dashboard' }
}
]
}
]
......
src/views/picturePlayback/passingMonitoring.vue 0 → 100644
View file @ acc6aed8
<template>
<div class="app-container">
<el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true">
<el-form-item label="区域名称" prop="area">
<el-select
v-model="queryParams.area"
clearable
placeholder="请选择区域"
style="width: 100%"
>
<el-option
v-for="(item, index) in dict.type.bhsp_area"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="路口" prop="crossName">
<el-select
v-model="queryParams.crossName"
clearable
placeholder="请选择路口"
style="width: 100%"
>
<el-option
v-for="(item, index) in crossNameOption"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="车道名称" prop="road">
<el-select
v-model="queryParams.road"
clearable
placeholder="请选择道路"
style="width: 100%"
>
<el-option
v-for="(item, index) in dict.type.bhsp_road"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
</el-form-item>
</el-form>
<!-- <el-row :gutter="10" class="mb8">-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="el-icon-plus"-->
<!-- size="mini"-->
<!-- @click="addDevice"-->
<!-- >新增设备</el-button>-->
<!-- </el-col>-->
<!-- &lt;!&ndash; <el-col :span="1.5">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-button&ndash;&gt;-->
<!-- &lt;!&ndash; type="danger"&ndash;&gt;-->
<!-- &lt;!&ndash; plain&ndash;&gt;-->
<!-- &lt;!&ndash; icon="el-icon-delete"&ndash;&gt;-->
<!-- &lt;!&ndash; size="mini"&ndash;&gt;-->
<!-- &lt;!&ndash; @click="batchDelete"&ndash;&gt;-->
<!-- &lt;!&ndash; >删除</el-button>&ndash;&gt;-->
<!-- &lt;!&ndash; </el-col>&ndash;&gt;-->
<!-- </el-row>-->
<el-table
v-if="refreshTable"
v-loading="loading"
:data="divceList"
row-key="menuId"
>
<!-- <el-table-column-->
<!-- type="selection"-->
<!-- width="55"-->
<!-- />-->
<el-table-column prop="area" label="区域名称" :show-overflow-tooltip="true">
<template slot-scope="scope">
<dict-tag :options="dict.type.bhsp_area" :value="scope.row.area" />
</template>
</el-table-column>
<el-table-column prop="road" label="车道名称" :show-overflow-tooltip="true">
<template slot-scope="scope">
<dict-tag :options="dict.type.bhsp_road" :value="scope.row.road" />
</template>
</el-table-column>
<el-table-column prop="cameraName" label="监控设备名称" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="playVideo(scope.row)"
>播放</el-button>
</template>
</el-table-column>
</el-table>
<pagination
:limit.sync="queryParams.pageSize"
:page.sync="queryParams.pageNum"
:total="total"
style="margin-bottom: unset !important;"
@pagination="getList"
/>
<!-- // 播放视频-->
<el-dialog :visible.sync="isShow" :close-on-click-modal="false" class="video-modle" :title="title" @close="onClose">
<video-player
ref="videoPlayer"
class="video-player vjs-custom-skin vjs-big-play-centered"
:options="videoPlayerOptions"
:playsinline="true"
@canplay="canplay($event)"
/>
</el-dialog>
</div>
</template>
<script>
import { getDeviceList, selectDisCrossname } from '@/api/business/settingDevice'
// 引入第三方工具包
import { mapGetters } from 'vuex'
import videoA from '@/assets/video/a.mp4'
import videoB from '@/assets/video/b.mp4'
export default {
name: 'PassingMonitoring',
// 数据字典
dicts: ['bhsp_area', 'bhsp_road'],
data() {
return {
chooseVideo: null, // 选中的视频
videoArray: [videoA, videoB],
player: null, // 播放器实例
isShow: false,
crossNameOption: [],
deptIdsOptions: [
{
label: '全部',
value: ''
}, {
label: '未关联',
value: '0'
},
{
label: '已关联',
value: '1'
}
],
addLoading: false,
// 新增设备表单
formAddDevice: {
'area': null,
'cameraName': null,
'crossName': null,
'deptIds': null,
'detailAddr': null,
'latitude': null,
'longitude': null,
'road': null,
'userId': null
},
rulesAddDevice: {
area: [
{ required: true, message: '请选择所属区域', trigger: 'change' }
],
road: [
{ required: true, message: '请选择所属道路', trigger: 'change' }
],
cameraName: [
{ required: true, message: '请输入摄像头名称', trigger: 'blur' }
],
crossName: [
{ required: true, message: '请输入路口名称', trigger: 'blur' }
],
detailAddr: [
{ required: true, message: '请输入详细地址', trigger: 'blur' }
],
deptIds: [
{ required: true, message: '请选择关联配置', trigger: 'change' }
]
},
openAddDevice: false, // 新增设备对话框标识符
divceList: [],
deviceLoading: false, // 提交loading
// 总条数
total: 0,
diologData: [], // 批量设置数据
multipleSelection: [], // 表格选中项
defaultChecks: [], // 部门树默认选中
// 部门树选项
deptOptions: undefined,
defaultProps: {
children: 'children',
label: 'label'
},
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 表格树数据
divce: [],
// 菜单树选项
menuOptions: [],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 是否展开，默认全部折叠
isExpandAll: false,
// 重新渲染表格状态
refreshTable: true,
// 查询参数
queryParams: {
road: '',
area: '',
cameraName: '',
pageNum: 1,
pageSize: 20
// deptIds: ''
},
// 表单参数
form: {
deptName: '',
deptIds: []
},
// 表单校验
rules: {
maxStorage: [
{ required: true, message: '请输入存储空间', trigger: 'blur' },
{ pattern: /^[1-9]\d*$/, message: '仅支持正整数', trigger: 'change' }
],
judgeInterval: [
{ required: true, message: '请输入判断间隔', trigger: 'blur' },
{ pattern: /^[1-9]\d*$/, message: '仅支持正整数', trigger: 'blur' }
],
fullStoragePrompt: [
{ required: true, message: '请选择存满提示', trigger: 'change' }
],
cyclicStorage: [
{ required: true, message: '请选择循环存储', trigger: 'change' }
]
}
}
},
computed: {
...mapGetters(['userId']),
videoPlayerOptions() {
const temp = {
height: '400px',
width: '353px',
autoplay: false,
muted: false,
language: 'zh-CN',
controlBar: {
// 去除播放按钮
play: false
},
preload: 'auto',
sources: [{ type: 'video/mp4', src: '' }],
notSupportedMessage: '很抱歉，您的浏览器不支持H5 Video播放器'
}
temp.sources[0]['src'] = this.chooseVideo
return temp
}
},
created() {
this.getList()
this.getRoad()
},
mounted() {
},
methods: {
getRandomVideo() {
// 生成一个随机索引
const randomIndex = Math.floor(Math.random() * this.videoArray.length)
// 返回随机选择的视频元素
this.chooseVideo = this.videoArray[randomIndex]
},
playVideo() {
this.isShow = true
this.getRandomVideo()
},
// 播放关闭回调
onClose() {
this.chooseVideo = null
},
getRoad() {
selectDisCrossname(this.userId).then(res => {
this.crossNameOption = res.data.map(item => {
return {
label: item,
value: item
}
})
})
},
/** 查询设备列表 */
getList() {
this.loading = true
const temp = {
...this.queryParams
}
getDeviceList(temp).then(response => {
this.divceList = response.rows
this.total = response.total
this.loading = false
})
},
// 取消按钮
cancel() {
this.defaultChecks = []
this.open = false
this.reset()
},
/** 搜索按钮操作 */
handleQuery() {
this.getList()
}
}
}
</script>
<style lang="scss" scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment