You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1113 lines
36 KiB
1113 lines
36 KiB
<template> |
||
<div class="app-container"> |
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> |
||
<el-form-item label="设备名" prop="name"> |
||
<el-input v-model="queryParams.name" placeholder="请输入设备名" clearable @keyup.enter.native="handleQuery" /> |
||
</el-form-item> |
||
<el-form-item label="序列号" prop="devsn"> |
||
<el-input v-model="queryParams.devsn" placeholder="请输入设备序列号" clearable @keyup.enter.native="handleQuery" /> |
||
</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="handleAdd" |
||
v-hasPermi="['web:camera:add']">新增</el-button> |
||
</el-col> |
||
<el-col :span="1.5"> |
||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" |
||
v-hasPermi="['web:camera:remove']">删除</el-button> |
||
</el-col> |
||
<el-col :span="1.5"> |
||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" |
||
v-hasPermi="['web:camera:export']">导出</el-button> |
||
</el-col> |
||
<el-col :span="1.5"> |
||
<el-button type="success" plain icon="el-icon-refresh" size="mini" @click="register" |
||
v-hasPermi="['web:camera:reboot']">重启服务</el-button> |
||
</el-col> |
||
<el-col :span="1.5"> |
||
<el-button type="success" plain icon="el-icon-refresh" size="mini" @click="restartM3u8" |
||
v-hasPermi="['web:camera:m3u8']">重启视频服务</el-button> |
||
</el-col> |
||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
||
</el-row> |
||
|
||
<el-table v-loading="loading" :data="cameraList" @selection-change="handleSelectionChange"> |
||
<el-table-column type="selection" width="55" align="center" /> |
||
<el-table-column min-width="60" align="center" label="序号"> |
||
<template slot-scope="scope"> |
||
<span>{{ (queryParams.page - 1) * queryParams.limit + scope.$index + 1 }}</span> |
||
</template> |
||
</el-table-column> |
||
<el-table-column label="设备名" align="center" prop="name" /> |
||
<el-table-column label="设备ip" align="center" prop="ip" /> |
||
<el-table-column label="设备序列号" align="center" prop="devsn" /> |
||
<el-table-column label="首次注册时间" align="center" prop="firstTime" width="220"/> |
||
<el-table-column label="心跳时间" align="center" prop="updateTime" width="220"/> |
||
<el-table-column label="4G强度" align="center" prop="rssiLevel" /> |
||
<el-table-column label="接入方式" align="center" prop="accessType"> |
||
<template slot-scope="scope"> |
||
<dict-tag :options="dict.type.camera_access_type" :value="scope.row.accessType"/> |
||
</template> |
||
</el-table-column> |
||
<el-table-column label="摄像机品牌" align="center" prop="brand"> |
||
<template slot-scope="scope"> |
||
<div v-for="item in brandList"> |
||
{{(scope.row.brand == item.id)?item.name:''}} |
||
</div> |
||
</template> |
||
</el-table-column> |
||
<el-table-column label="状态" align="center" prop="status"> |
||
<template slot-scope="scope"> |
||
<span v-if="scope.row.status == 1"> |
||
<el-tag type="success">在线</el-tag> |
||
</span> |
||
<span v-if="scope.row.status == 0"> |
||
<el-tag type="info">离线</el-tag> |
||
</span> |
||
</template> |
||
</el-table-column> |
||
<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-setting" |
||
@click="openFtpCfg(scope.row)" |
||
v-hasPermi="['web:camera:remove']" |
||
>FTP配置</el-button> |
||
<el-button |
||
size="mini" |
||
type="text" |
||
icon="el-icon-search" |
||
@click="showVideo(scope.row)" |
||
v-hasPermi="['web:camera:remove']" |
||
>查看视频</el-button> --> |
||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" |
||
v-hasPermi="['web:camera:edit']">修改</el-button> |
||
<!-- <el-button |
||
size="mini" |
||
type="text" |
||
icon="el-icon-refresh" |
||
@click="reboot(scope.row)" |
||
v-hasPermi="['web:camera:remove']" |
||
v-loading.fullscreen.lock="fullscreenLoading" |
||
>重启</el-button> --> |
||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" |
||
v-hasPermi="['web:camera:remove']">删除</el-button> |
||
|
||
|
||
<el-button size="mini" type="text" icon="el-icon-view" @click="playVideo(scope.row)" |
||
v-hasPermi="['web:camera:net']">播放视频</el-button> |
||
|
||
|
||
<el-button size="mini" type="text" icon="el-icon-setting" @click="setConfig(scope.row)" |
||
v-hasPermi="['web:camera:config']">参数</el-button> |
||
|
||
<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" |
||
v-hasPermi="['web:camera:4g']"> |
||
<span class="el-dropdown-link"> |
||
<i class="el-icon-d-arrow-right el-icon--right"></i>更多 |
||
</span> |
||
<el-dropdown-menu slot="dropdown"> |
||
<el-dropdown-item command="refreshRssi" icon="el-icon-s-operation"> |
||
刷新4G信号</el-dropdown-item> |
||
<el-dropdown-item command="openFtpCfg" icon="el-icon-setting">FTP配置 |
||
</el-dropdown-item> |
||
<el-dropdown-item command="showVideo" icon="el-icon-view">查看视频 |
||
</el-dropdown-item> |
||
<el-dropdown-item command="showLog" icon="el-icon-view">查看日志 |
||
</el-dropdown-item> |
||
<el-dropdown-item command="showDate" icon="el-icon-view">补光时间 |
||
</el-dropdown-item> |
||
<el-dropdown-item command="reboot" icon="el-icon-refresh">重启 |
||
</el-dropdown-item> |
||
<el-dropdown-item command="autocfg" icon="el-icon-refresh">自动重启配置 |
||
</el-dropdown-item> |
||
<el-dropdown-item command="setTime" icon="el-icon-refresh">时间校准 |
||
</el-dropdown-item> |
||
</el-dropdown-menu> |
||
</el-dropdown> |
||
</template> |
||
</el-table-column> |
||
</el-table> |
||
|
||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" |
||
@pagination="getList" /> |
||
|
||
<!-- 添加或修改摄像机对话框 --> |
||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> |
||
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> |
||
<el-form-item label="设备名" prop="name"> |
||
<el-input v-model="form.name" placeholder="请输入设备名" /> |
||
</el-form-item> |
||
<el-form-item label="设备ip" prop="ip"> |
||
<el-input v-model="form.ip" placeholder="请输入设备ip" /> |
||
</el-form-item> |
||
<el-form-item label="设备端口" prop="port"> |
||
<el-input v-model="form.port" placeholder="请输入设备端口" /> |
||
</el-form-item> |
||
<el-form-item label="设备登录账号" prop="username"> |
||
<el-input v-model="form.username" placeholder="请输入设备登录账号" /> |
||
</el-form-item> |
||
<el-form-item label="设备登录密码" prop="password"> |
||
<el-input v-model="form.password" placeholder="请输入设备登录密码" /> |
||
</el-form-item> |
||
<el-form-item label="设备序列号" prop="devsn"> |
||
<el-input v-model="form.devsn" placeholder="请输入设备序列号" /> |
||
</el-form-item> |
||
<el-form-item label="接入方式" prop="accessType"> |
||
<el-select v-model="form.accessType" placeholder="请选择接入方式"> |
||
<el-option |
||
v-for="dict in dict.type.camera_access_type" |
||
:key="dict.value" |
||
:label="dict.label" |
||
:value="parseInt(dict.value)" |
||
></el-option> |
||
</el-select> |
||
</el-form-item> |
||
<el-form-item label="摄像机品牌" prop="brand"> |
||
<el-select v-model="form.brand" placeholder="请选择摄像机品牌"> |
||
<el-option |
||
v-for="dict in brandList" |
||
:key="dict.id" |
||
:label="dict.name" |
||
:value="parseInt(dict.id)" |
||
></el-option> |
||
</el-select> |
||
</el-form-item> |
||
</el-form> |
||
<div slot="footer" class="dialog-footer"> |
||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||
<el-button @click="cancel">取 消</el-button> |
||
</div> |
||
</el-dialog> |
||
|
||
<!-- ftp配置对话框 --> |
||
<el-dialog title="FTP配置" :visible.sync="ftp.open"> |
||
<div class="container"> |
||
<!-- 表单 --> |
||
<div class="ftpform"> |
||
<el-form :model="ftp.form" :label-width="ftp.width"> |
||
<el-form-item label="启用"> |
||
<el-switch v-model="ftp.run"></el-switch> |
||
</el-form-item> |
||
<el-form-item label="服务器地址"> |
||
<el-input v-model="ftp.form.address"></el-input> |
||
</el-form-item> |
||
<el-form-item label="服务器端口"> |
||
<el-input v-model="ftp.form.port"></el-input> |
||
</el-form-item> |
||
<el-form-item label="用户名"> |
||
<el-input v-model="ftp.form.username"></el-input> |
||
</el-form-item> |
||
<el-form-item label="密码"> |
||
<el-input v-model="ftp.form.password"></el-input> |
||
</el-form-item> |
||
<el-form-item label="FTP图片路径"> |
||
<el-input v-model="ftp.form.pathRule" type="textarea" :rows="3"></el-input> |
||
</el-form-item> |
||
</el-form> |
||
</div> |
||
<!-- 参考表格 --> |
||
<div class="table"> |
||
<div class="head">路径配置参考</div> |
||
<div class="content"> |
||
<div class="tips"> |
||
<span>%Y: 年</span> |
||
<span>%M: 月</span> |
||
<span>%D: 日</span> |
||
<span>%h: 时</span> |
||
<span>%m: 分</span> |
||
<span>%s: 秒</span> |
||
<span>%u: 毫秒</span> |
||
<span>%c: 通道</span> |
||
<span>%n: 设备序列号</span> |
||
<span>%i: 设备ip</span> |
||
<span>%e: 事件名称</span> |
||
<span>%a: MAC地址</span> |
||
</div> |
||
<div class="notice"> |
||
<div>注意: </div> |
||
<div> |
||
文件夹名以/隔开; 多个%%自动转为一个%; |
||
不可出现路径代码提示中没有的"%"+字符组合, 否则将保存失败! |
||
</div> |
||
</div> |
||
</div> |
||
</div> |
||
</div> |
||
<div slot="footer" class="dialog-footer"> |
||
<el-button @click="ftp.open = false">取 消</el-button> |
||
<el-button type="primary" @click="ftpConfirm">确 定</el-button> |
||
</div> |
||
</el-dialog> |
||
<!-- 自动重启配置对话框 --> |
||
<el-dialog title="自动重启配置" :visible.sync="restartcfg.open"> |
||
<div class="container"> |
||
<!-- 表单 --> |
||
<div class="restartcfgform"> |
||
<el-form> |
||
<el-form-item label="启用"> |
||
<el-switch v-model="restartcfg.run"></el-switch> |
||
</el-form-item> |
||
<el-select v-model="restartcfg.form.uWeekDay" placeholder="选择星期"> |
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="parseInt(item.value)"> |
||
</el-option> |
||
</el-select> |
||
<el-time-select v-model="restartcfg.form.uHour" :picker-options="{ |
||
start: '00:00', |
||
step: '01:00', |
||
end: '23:00' |
||
}" placeholder="选择时间"> |
||
</el-time-select> |
||
</el-form> |
||
</div> |
||
</div> |
||
<div slot="footer" class="dialog-footer"> |
||
<el-button @click="restartcfg.open = false">取 消</el-button> |
||
<el-button type="primary" @click="restartcfgConfirm">确 定</el-button> |
||
</div> |
||
</el-dialog> |
||
<!-- 日志详情对话框 --> |
||
<el-dialog title="日志查询" :visible.sync="logform.open"> |
||
<div > |
||
<!-- 表单 --> |
||
<el-form :model="logform.queryForm" ref="queryForm" size="small" :inline="true" label-width="200px"> |
||
|
||
<el-date-picker v-model="timeStage" type="datetimerange" range-separator="至" start-placeholder="开始日期" |
||
end-placeholder="结束日期" @change="chooseTimeRange" :picker-options="setDateRange"> |
||
</el-date-picker> |
||
<el-form-item> |
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleAutoQuery">查询</el-button> |
||
</el-form-item> |
||
<el-table :data="logInfoList" stripe style="width: 100%"> |
||
|
||
<el-table-column label="记录时间" align="center" prop="clogTime" /> |
||
<el-table-column label="用户名" align="center" prop="coperUserName" /> |
||
<el-table-column label="主类型" align="center" prop="cmainType" /> |
||
<el-table-column label="次类型" align="center" prop="csubType" /> |
||
<el-table-column label="远程IP" align="center" prop="cremoteIP" /> |
||
|
||
</el-table> |
||
|
||
|
||
</el-form> |
||
|
||
</div> |
||
|
||
|
||
</el-dialog> |
||
<el-dialog title="查看时间" :visible.sync="updateDate.open"> |
||
<div> |
||
<el-form :model="updateDate.queryForm" label-width="80px"> |
||
<el-form-item label="模式"> |
||
<el-select v-model="updateDate.queryForm.emMode" placeholder="请选择模式" style="width: 200px;"> |
||
<el-option |
||
v-for="item in modelList" |
||
:key="item.value" |
||
:label="item.label" |
||
:value="item.value"> |
||
</el-option> |
||
</el-select> |
||
</el-form-item> |
||
<el-form-item label="预设亮度"> |
||
<el-input-number v-model="updateDate.queryForm.nPreValue" controls-position="right" :min="1" :max="100"></el-input-number> |
||
</el-form-item> |
||
<el-form-item label="亮度"> |
||
<el-input-number v-model="updateDate.queryForm.nBrightness" controls-position="right" :min="1" :max="100"></el-input-number> |
||
</el-form-item> |
||
<el-form-item v-if="updateDate.queryForm.emMode=='3'" label="时间段1"> |
||
<el-time-picker |
||
size="small" |
||
align="center" |
||
format="HH:mm:ss" |
||
style="width: 150px;margin-right: 5px;" |
||
v-model="updateDate.queryForm.startTime1" |
||
:picker-options="{ |
||
selectableRange: '00:00:00 - 23:59:59' |
||
}" |
||
placeholder="任意时间点"> |
||
</el-time-picker> |
||
<el-time-picker |
||
size="small" |
||
align="center" |
||
style="width: 150px" |
||
v-model="updateDate.queryForm.endTime1" |
||
:picker-options="{ |
||
selectableRange: '00:00:00 - 23:59:59' |
||
}" |
||
placeholder="任意时间点"> |
||
</el-time-picker> |
||
</el-form-item> |
||
<el-form-item v-if="updateDate.queryForm.emMode=='3'" label="时间段2"> |
||
<el-time-picker |
||
size="small" |
||
align="center" |
||
style="width: 150px;margin-right: 5px;" |
||
v-model="updateDate.queryForm.startTime2" |
||
:picker-options="{ |
||
selectableRange: '00:00:00 - 23:59:59' |
||
}" |
||
placeholder="任意时间点"> |
||
</el-time-picker> |
||
<el-time-picker |
||
size="small" |
||
align="center" |
||
style="width: 150px" |
||
v-model="updateDate.queryForm.endTime2" |
||
:picker-options="{ |
||
selectableRange: '00:00:00 - 23:59:59' |
||
}" |
||
placeholder="任意时间点"> |
||
</el-time-picker> |
||
</el-form-item> |
||
</el-form> |
||
<div slot="footer" class="dialog-footer"> |
||
<el-button @click="updateDate.open = false">取 消</el-button> |
||
<el-button type="primary" @click="setLightCfg()">确 定</el-button> |
||
</div> |
||
</div> |
||
</el-dialog> |
||
|
||
<!-- <el-dialog title="播放视频" :visible.sync="videoData.open"> |
||
<div> |
||
<video |
||
id="my-video" |
||
class="video-js vjs-default-skin" |
||
controls |
||
preload="auto" |
||
width="500px" |
||
> |
||
<source src="http://192.168.1.219/hls/192_168_1_40/live.m3u8" type="application/x-mpegURL" /> |
||
</video> |
||
</div> |
||
</el-dialog>--> |
||
|
||
<el-dialog |
||
title="播放视频" |
||
:visible.sync="videoData.open" |
||
:close-on-click-modal="false" |
||
:append-to-body="true" |
||
@close="closeVideo" |
||
align="center" |
||
> |
||
<div v-html="videoHtml"> |
||
</div> |
||
</el-dialog> |
||
|
||
<el-dialog title="水尺参数" :visible.sync="configopen" width="600px" append-to-body> |
||
<el-form ref="cform" :model="configform" label-width="100px"> |
||
<el-form-item label="总长度" prop="tLen"> |
||
<el-input type="number" v-model="configform.tlen" placeholder="某一时刻水位+水位上水尺长度（单位米）" /> |
||
</el-form-item> |
||
<el-form-item label="出水长度" prop="cLen"> |
||
<el-input type="number" v-model="configform.clen" placeholder="某一时刻水面上水尺长度（单位米）" /> |
||
</el-form-item> |
||
<el-form-item label="出水长度" prop="cP"> |
||
<el-input type="number" v-model="configform.cp" placeholder="水面上的水尺长度对应像素" /> |
||
</el-form-item> |
||
</el-form> |
||
<div slot="footer" class="dialog-footer"> |
||
<el-button type="primary" @click="configSubmit">确 定</el-button> |
||
</div> |
||
</el-dialog> |
||
|
||
</div> |
||
</template> |
||
|
||
<script> |
||
import { formatDate } from "../../../utils/common"; |
||
import { Message } from 'element-ui' |
||
import videojs from "video.js"; |
||
import "videojs-contrib-hls"; |
||
|
||
export default { |
||
name: "Camera", |
||
dicts: ['camera_access_type'], |
||
data() { |
||
return { |
||
videoHtml: '', |
||
// 遮罩层 |
||
loading: true, |
||
|
||
fullscreenLoading: false, |
||
// 选中数组 |
||
ids: [], |
||
// 非单个禁用 |
||
single: true, |
||
// 非多个禁用 |
||
multiple: true, |
||
// 显示搜索条件 |
||
showSearch: true, |
||
// 总条数 |
||
total: 0, |
||
// 摄像机表格数据 |
||
cameraList: [], |
||
// 弹出层标题 |
||
title: "", |
||
// 是否显示弹出层 |
||
open: false, |
||
configopen: false, |
||
videoData:{ |
||
open: false, |
||
}, |
||
// 查询参数 |
||
queryParams: { |
||
page: 1, |
||
limit: 10, |
||
name: null, |
||
ip: null, |
||
port: null, |
||
username: null, |
||
password: null, |
||
devsn: null, |
||
status: null |
||
}, |
||
// 表单参数 |
||
form: {}, |
||
configform: {}, |
||
// 表单校验 |
||
rules: { |
||
}, |
||
// ftp配置 |
||
ftp: { |
||
open: false, |
||
form: { |
||
address: '', |
||
port: '', |
||
username: '', |
||
password: '', |
||
pathRule: '', |
||
isEnable: '', |
||
devsn: '', |
||
accessType: null, |
||
brand: null |
||
}, |
||
run: false, |
||
width: '100px' |
||
}, |
||
modelList:[ |
||
{ |
||
value: '0', label: '强制关闭' |
||
}, |
||
{ |
||
value: '1', label: '强制开启' |
||
}, |
||
{ |
||
value: '2', label: '自动' |
||
}, |
||
{ |
||
value: '3', label: '自动时间' |
||
} |
||
], |
||
//自动重启设置 |
||
restartcfg: { |
||
open: false, |
||
form: { |
||
id: '', |
||
bEnable: '', |
||
uHour: '', |
||
uWeekDay: '', |
||
}, |
||
run: false, |
||
}, |
||
//日志 |
||
logform: { |
||
open: false, |
||
queryForm: { |
||
id: '', |
||
startTime: '', |
||
endTime: '' |
||
}, |
||
|
||
run: false, |
||
}, |
||
updateDate:{ |
||
open: false, |
||
queryForm: { |
||
id: '', |
||
emMode: '', |
||
nPreValue: '1', |
||
nBrightness: '1', |
||
startTime1: new Date(2022, 9, 10, 18, 40), |
||
endTime1: new Date(2022, 9, 10, 18, 40), |
||
startTime2: new Date(2022, 9, 10, 18, 40), |
||
endTime2: new Date(2022, 9, 10, 18, 40), |
||
}, |
||
}, |
||
logInfoList: [], |
||
options: [{ |
||
value: '0', |
||
label: '星期日' |
||
}, { |
||
value: '1', |
||
label: '星期一' |
||
}, { |
||
value: '2', |
||
label: '星期二' |
||
}, { |
||
value: '3', |
||
label: '星期三' |
||
}, { |
||
value: '4', |
||
label: '星期四' |
||
}, { |
||
value: '5', |
||
label: '星期五' |
||
}, { |
||
value: '6', |
||
label: '星期六' |
||
}], |
||
// 摄像机品牌列表 |
||
brandList: [], |
||
timeStage: [], |
||
num: Date.now(), |
||
// 设置可选择的时间段，*** 必须在 data 返回数据 *** |
||
setDateRange: { |
||
|
||
// 设置不能选择的日期 |
||
onPick: ({ |
||
maxDate, |
||
minDate |
||
}) => { |
||
if (minDate) { //如果默认有最小日期 |
||
this.choiceDate0 = minDate.getTime(); |
||
} else { //如果最小日期被清空，则最小日期为当天 |
||
this.choiceDate0 = new Date(); |
||
} |
||
if (maxDate) { |
||
this.choiceDate0 = ''; |
||
} |
||
}, |
||
disabledDate: (time) => { |
||
let choiceDateTime = new Date(this.choiceDate0).getTime(); //选中的第一个日期 |
||
if (this.choiceDate0) { |
||
//间隔15天，则加减14天---“这主要看需求” |
||
//14天的时间戳：14*24*3600*1000=1209600000 |
||
return (time.getTime() > (choiceDateTime + 86400000)) || (time.getTime() < (choiceDateTime - 86400000)); |
||
} |
||
}, |
||
|
||
}, |
||
}; |
||
}, |
||
created() { |
||
this.getList(); |
||
this.geBrandList(); |
||
}, |
||
mounted() { |
||
this.$nextTick(() => { |
||
this.getVideo() |
||
}) |
||
}, |
||
methods: { |
||
/** 查询brand列表 */ |
||
async geBrandList() { |
||
let res = await this.$axiosGet('/web/brand/brands'); |
||
if(res.code === 0){ |
||
this.brandList = res.data; |
||
} |
||
}, |
||
|
||
/** 查询摄像机列表 */ |
||
async getList() { |
||
this.loading = true; |
||
let res = await this.$axiosGet('/web/camera/list', this.queryParams); |
||
if (res.code === 0) { |
||
this.cameraList = res.data; |
||
this.total = res.count; |
||
} |
||
this.loading = false; |
||
}, |
||
// 取消按钮 |
||
cancel() { |
||
this.open = false; |
||
this.reset(); |
||
}, |
||
// 表单重置 |
||
reset() { |
||
this.form = { |
||
id: null, |
||
name: null, |
||
ip: null, |
||
port: null, |
||
username: null, |
||
password: null, |
||
devsn: null, |
||
status: "0", |
||
accessType: null, |
||
brand: null |
||
}; |
||
this.resetForm("form"); |
||
}, |
||
configreset() { |
||
this.configform = { |
||
id: null, |
||
lstart: null, |
||
tlen: null, |
||
clen: null, |
||
cp: null |
||
}; |
||
this.resetForm("configform"); |
||
}, |
||
// 表单重置 |
||
ftpCfgReset() { |
||
this.ftp.form = { |
||
address: '', |
||
port: '', |
||
username: '', |
||
password: '', |
||
pathRule: '', |
||
isEnable: '', |
||
devsn: '' |
||
}; |
||
this.resetForm("form"); |
||
}, |
||
updateDateReset(){ |
||
this.updateDate.queryForm= { |
||
id: '', |
||
emMode: '2', |
||
nPreValue: '1', |
||
nBrightness: '1', |
||
startTime1: new Date(2022, 9, 10, 18, 40), |
||
endTime1: new Date(2022, 9, 10, 18, 40), |
||
startTime2: new Date(2022, 9, 10, 18, 40), |
||
endTime2: new Date(2022, 9, 10, 18, 40), |
||
} |
||
|
||
}, |
||
/** 搜索按钮操作 */ |
||
handleQuery() { |
||
this.queryParams.page = 1; |
||
this.getList(); |
||
}, |
||
/** 重置按钮操作 */ |
||
resetQuery() { |
||
this.resetForm("queryForm"); |
||
this.handleQuery(); |
||
}, |
||
// 多选框选中数据 |
||
handleSelectionChange(selection) { |
||
this.ids = selection.map(item => item.id) |
||
this.single = selection.length !== 1 |
||
this.multiple = !selection.length |
||
}, |
||
/** 新增按钮操作 */ |
||
handleAdd() { |
||
this.reset(); |
||
this.open = true; |
||
this.title = "添加摄像机"; |
||
}, |
||
// 更多操作触发 |
||
handleCommand(command, row) { |
||
switch (command) { |
||
case "refreshRssi": |
||
this.refreshRssi(row); |
||
break; |
||
case "openFtpCfg": |
||
this.openFtpCfg(row); |
||
break; |
||
case "showVideo": |
||
this.showVideo(row); |
||
break; |
||
case "showLog": |
||
this.showLog(row); |
||
break; |
||
case "showDate": |
||
this.showDate(row); |
||
break; |
||
case "reboot": |
||
this.reboot(row); |
||
break; |
||
case "autocfg": |
||
this.autocfg(row); |
||
break; |
||
case "setTime": |
||
this.setTime(row); |
||
break; |
||
case "playVideo": |
||
this.playVideo(row); |
||
break; |
||
default: |
||
break; |
||
} |
||
}, |
||
/** 播放视频 */ |
||
playVideo(row){ |
||
this.videoData.open = true; |
||
this.$nextTick(() => { |
||
this.getVideo('http://192.168.1.219/hls/192_168_1_40/live.m3u8') |
||
}) |
||
}, |
||
//初始化播放器 |
||
getVideo(url) { |
||
this.videoHtml = '<video id="myVideo" width="810px" class="video-js vjs-default-skin" controls></video>'; |
||
this.$nextTick(() => { |
||
let options = { |
||
autoplay: true, // 设置自动播放 |
||
controls: true, // 显示播放的控件 |
||
sources: [ //如果需要切换视频源，src需要动态设置 |
||
{ |
||
src: url, |
||
type: "application/x-mpegURL" // 告诉videojs,这是一个hls流 |
||
} |
||
] |
||
}; |
||
// videoJs的第一个参数表示的是，文档中video的id |
||
setTimeout(() => { |
||
this.player = videojs("myVideo", options); |
||
},2000) |
||
}) |
||
}, |
||
//通过移除DOM彻底关闭视频，避免关闭窗口后依然获取视频流占用资源 |
||
closeVideo() { |
||
if (this.player) { |
||
this.player.dispose(); // 该方法会重置videojs的内部状态并移除dom |
||
this.videoHtml = ''; |
||
} |
||
//注意关闭窗口时间，要在控件销毁之后，否则会有问题 |
||
this.videoData.open = false |
||
}, |
||
|
||
|
||
/** 修改按钮操作 */ |
||
async handleUpdate(row) { |
||
this.reset(); |
||
const id = row.id || this.ids |
||
let res = await this.$axiosGet('/web/camera/info/' + id); |
||
if (res.code === 0) { |
||
this.form = res.data; |
||
this.open = true; |
||
this.title = "修改"; |
||
} |
||
}, |
||
setConfig(row){ |
||
this.configreset(); |
||
this.configform = row.paramsObject; |
||
this.configform.id = row.id; |
||
this.configopen = true; |
||
}, |
||
async refreshRssi(row) { |
||
const id = row.id; |
||
const status = row.status; |
||
if (status != 1) { |
||
this.$modal.msg("设备未在线"); |
||
return; |
||
} |
||
let res = await this.$axiosGet('/web/camera/refreshRssi/' + id); |
||
if (res.code === 0) { |
||
this.$modal.msgSuccess("执行成功"); |
||
this.getList(); |
||
} |
||
}, |
||
async openFtpCfg(row) { |
||
this.ftpCfgReset(); |
||
const id = row.id; |
||
const status = row.status; |
||
if (status != 1) { |
||
this.$modal.msg("设备未在线"); |
||
return; |
||
} |
||
let res = await this.$axiosGet('/camera/ftp/getNetCfg', { 'cameraId': id }); |
||
if (res.code === 0) { |
||
this.ftp.form = res.data; |
||
this.ftp.run = this.ftp.form.isEnable == 1; |
||
this.ftp.open = true; |
||
} |
||
}, |
||
// 发送ftp配置表单 |
||
async ftpConfirm() { |
||
this.ftp.form.isEnable = this.ftp.run ? 1 : 0; |
||
let res = await this.$axiosPost('/camera/ftp/editNetCfg', this.ftp.form); |
||
if (res.code === 0) { |
||
this.$modal.msgSuccess("修改成功"); |
||
this.ftp.open = false; |
||
} |
||
}, |
||
async autocfg(row) { |
||
|
||
this.restartcfg.form.id = row.id; |
||
|
||
const status = row.status; |
||
if (status != 1) { |
||
this.$modal.msg("设备未在线"); |
||
return; |
||
} |
||
let res = await this.$axiosGet('/web/camera/getautocfg/' + this.restartcfg.form.id); |
||
|
||
if (res.code === 0) { |
||
|
||
this.restartcfg.form = res.data; |
||
if(this.restartcfg.form.uHour <10){ |
||
this.restartcfg.form.uHour="0"+this.restartcfg.form.uHour+":00" |
||
}else{ |
||
this.restartcfg.form.uHour+=":00" |
||
} |
||
this.restartcfg.form.id = row.id; |
||
this.restartcfg.run = this.restartcfg.form.bEnable == 1; |
||
this.restartcfg.open = true; |
||
} |
||
}, |
||
async setTime(row) { |
||
const status = row.status; |
||
if (status != 1) { |
||
this.$modal.msg("设备未在线"); |
||
return; |
||
} |
||
let res = await this.$axiosGet('/web/camera/setNowTime/' + row.id); |
||
if (res.code === 0) { |
||
this.$modal.msgSuccess("执行成功"); |
||
} |
||
}, |
||
|
||
//发送自动重启配置表单 |
||
async restartcfgConfirm() { |
||
|
||
|
||
this.restartcfg.form.bEnable = this.restartcfg.run ? 1 : 0; |
||
this.restartcfg.form.uHour = this.restartcfg.form.uHour.substring(0, 2) |
||
let res = await this.$axiosPost('/web/camera/setautocfg', this.restartcfg.form); |
||
if (res.code === 0) { |
||
this.$modal.msgSuccess("修改成功"); |
||
this.restartcfg.open = false; |
||
} |
||
}, |
||
// 显示时间 |
||
showDate(row){ |
||
const status = row.status; |
||
if (status != 1) { |
||
this.$modal.msg("设备未在线"); |
||
return; |
||
} |
||
// 重置表单 |
||
this.updateDateReset() |
||
this.updateDate.queryForm.id = row.id; |
||
this.getLigntCfg(row.id); |
||
}, |
||
// 查询时间 |
||
async getLigntCfg(id){ |
||
let res = await this.$axiosGet('/web/camera/getLigntCfg/' + id); |
||
if(res.code === 0){ |
||
let objDate = res.data |
||
this.updateDate.queryForm.emMode = objDate.emMode + ''; |
||
this.updateDate.queryForm.nPreValue = objDate.nPreValue; |
||
this.updateDate.queryForm.nBrightness = objDate.nBrightness; |
||
this.updateDate.queryForm.startTime1 = new Date(2022,12,12,objDate.startHour,objDate.startMinute,objDate.startSecond) |
||
this.updateDate.queryForm.endTime1 = new Date(2022,12,12,objDate.endHour,objDate.endMinute,objDate.endSecond) |
||
this.updateDate.queryForm.startTime2 = new Date(2022,12,12,objDate.startHour2,objDate.startMinute2,objDate.startSecond2) |
||
this.updateDate.queryForm.endTime2 = new Date(2022,12,12,objDate.endHour2,objDate.endMinute2,objDate.endSecond2) |
||
this.updateDate.open = true; |
||
} |
||
}, |
||
//修改时间 |
||
async setLightCfg(){ |
||
let queryData = { |
||
id: this.updateDate.queryForm.id, |
||
emMode: this.updateDate.queryForm.emMode, |
||
nPreValue: this.updateDate.queryForm.nPreValue, |
||
nBrightness: this.updateDate.queryForm.nBrightness, |
||
startTime1:formatDate(this.updateDate.queryForm.startTime1).split(' ')[1], |
||
endTime1: formatDate(this.updateDate.queryForm.endTime1).split(' ')[1], |
||
startTime2: formatDate(this.updateDate.queryForm.startTime2).split(' ')[1], |
||
endTime2: formatDate(this.updateDate.queryForm.endTime2).split(' ')[1], |
||
}; |
||
let res = await this.$axiosPost('/web/camera/setLightCfg',queryData); |
||
if (res.code === 0){ |
||
Message.success(res.msg) |
||
this.updateDate.open = false; |
||
}else{ |
||
Message.error(res.msg) |
||
} |
||
}, |
||
reboot(row) { |
||
const id = row.id; |
||
const status = row.status; |
||
if (status != 1) { |
||
this.$modal.msg("设备未在线"); |
||
return; |
||
} |
||
this.$modal.confirm('是否确认重启？').then(() => { |
||
this.exeReboot(id) |
||
}).catch(() => { }); |
||
}, |
||
async exeReboot(id) { |
||
const loading = this.$loading({ |
||
lock: true, |
||
text: 'Loading', |
||
spinner: 'el-icon-loading', |
||
background: 'rgba(0, 0, 0, 0.7)' |
||
}); |
||
// this.fullscreenLoading = true; |
||
let res = await this.$axiosGet('/web/camera/reboot/' + id); |
||
if (res.code === 0) { |
||
// this.fullscreenLoading = false; |
||
loading.close(); |
||
this.$modal.msgSuccess("执行成功,请稍等几分钟后继续操作"); |
||
this.getList(); |
||
} |
||
}, |
||
async showVideo(row) { |
||
const id = row.id |
||
const status = row.status; |
||
if (status != 1) { |
||
this.$modal.msg("设备未在线"); |
||
return; |
||
} |
||
let res = await this.$axiosGet('/web/camera/showVideo/' + id); |
||
if (res.code === 500) { |
||
this.$modal.msg(res.msg); |
||
} |
||
}, |
||
async showLog(row) { |
||
this.logform.queryForm.id = row.id |
||
const status = row.status; |
||
if (status != 1) { |
||
this.$modal.msg("设备未在线"); |
||
return; |
||
} |
||
this.logform.open = true; |
||
}, |
||
chooseTimeRange() { |
||
|
||
if (this.timeStage != null) { |
||
this.logform.queryForm.startTime = formatDate(this.timeStage[0], 'yyyy-MM-dd hh:mm:ss'); |
||
this.logform.queryForm.endTime = formatDate(this.timeStage[1], 'yyyy-MM-dd hh:mm:ss'); |
||
} |
||
|
||
|
||
|
||
}, |
||
async handleAutoQuery() { |
||
if(this.timeStage == null || this.timeStage.length == 0 ){ |
||
this.$modal.msg("请选择时间"); |
||
return; |
||
} |
||
let res = await this.$axiosGet('/web/camera/getloginfo', this.logform.queryForm); |
||
|
||
if (res.code === 0) { |
||
this.logInfoList = res.data; |
||
this.$modal.msgSuccess("查询成功"); |
||
} |
||
}, |
||
async register() { |
||
let res = await this.$axiosGet('/web/camera/register'); |
||
if (res.code === 0) { |
||
this.$modal.msgSuccess("执行成功"); |
||
} |
||
}, |
||
async restartM3u8() { |
||
let res = await this.$axiosGet('/web/camera/retartPullM3u8'); |
||
if (res.code === 0) { |
||
this.$modal.msgSuccess("执行成功，请等待几分钟..."); |
||
} |
||
}, |
||
async addMethod() { |
||
let res = await this.$axiosPost('/web/camera/add', this.form); |
||
if (res.code === 0) { |
||
this.$modal.msgSuccess("新增成功"); |
||
this.open = false; |
||
this.getList(); |
||
} |
||
}, |
||
async editMethod() { |
||
let res = await this.$axiosPost('/web/camera/edit', this.form); |
||
if (res.code === 0) { |
||
this.$modal.msgSuccess("修改成功"); |
||
this.open = false; |
||
this.getList(); |
||
} |
||
}, |
||
/** 提交按钮 */ |
||
submitForm() { |
||
this.$refs["form"].validate(valid => { |
||
if (valid) { |
||
if (this.form.id != null) { |
||
this.editMethod(); |
||
} else { |
||
this.addMethod(); |
||
} |
||
} |
||
}); |
||
}, |
||
async configSubmit() { |
||
let res = await this.$axiosPost('/web/camera/setConfig', this.configform); |
||
if (res.code === 0) { |
||
this.$modal.msgSuccess("设置成功"); |
||
this.configopen = false; |
||
} |
||
}, |
||
/** 删除按钮操作 */ |
||
async handleDelete(row) { |
||
const ids = row.id || this.ids; |
||
let res = await this.$axiosDelete('/web/camera/delete/' + ids); |
||
if (res.code === 0) { |
||
this.$modal.msgSuccess("删除成功"); |
||
this.getList(); |
||
} |
||
}, |
||
/** 导出按钮操作 */ |
||
handleExport() { |
||
this.download('web/camera/export', { |
||
...this.queryParams |
||
}, `camera_${new Date().getTime()}.xlsx`) |
||
} |
||
} |
||
}; |
||
</script> |
||
|
||
<style scoped> |
||
.container { |
||
display: flex; |
||
} |
||
|
||
.ftpform { |
||
width: 300px; |
||
margin-right: 50px; |
||
} |
||
|
||
.ftpform .el-form { |
||
width: 100%; |
||
} |
||
|
||
.table { |
||
flex: 1; |
||
} |
||
|
||
.head { |
||
font-size: 24px; |
||
line-height: 36px; |
||
text-align: center; |
||
height: 36px; |
||
margin: 0 auto; |
||
border-radius: 2px; |
||
box-shadow: |
||
1px 1px 2px hsla(200, 88%, 55%, .22), |
||
inset -2px -2px 2px hsla(200, 88%, 55%, .22), |
||
inset 0 0 1px hsla(200, 88%, 55%, .22); |
||
} |
||
|
||
.tips { |
||
margin: 10px 0; |
||
} |
||
|
||
.tips span { |
||
display: grid; |
||
grid: 1fr/1fr 10px; |
||
} |
||
|
||
.notice { |
||
color: #f33; |
||
padding-right: 20px; |
||
display: flex; |
||
} |
||
|
||
.notice div:first-child { |
||
width: 80px; |
||
} |
||
</style>
|
||
|