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.
1055 lines
34 KiB
1055 lines
34 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> |
|
<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" /> |
|
<el-table-column label="心跳时间" align="center" prop="updateTime" /> |
|
<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-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" |
|
v-hasPermi="['web:camera:remove']"> |
|
<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" v-hasPermi="['web:camera:remove']"> |
|
刷新4G信号</el-dropdown-item> |
|
<el-dropdown-item command="openFtpCfg" icon="el-icon-setting" v-hasPermi="['web:camera:remove']">FTP配置 |
|
</el-dropdown-item> |
|
<el-dropdown-item command="showVideo" icon="el-icon-view" v-hasPermi="['web:camera:remove']">查看视频 |
|
</el-dropdown-item> |
|
<el-dropdown-item command="showLog" icon="el-icon-view" v-hasPermi="['web:camera:remove']">查看日志 |
|
</el-dropdown-item> |
|
<el-dropdown-item command="showDate" icon="el-icon-view" v-hasPermi="['web:camera:remove']">补光时间 |
|
</el-dropdown-item> |
|
<el-dropdown-item command="reboot" icon="el-icon-refresh" v-hasPermi="['web:camera:remove']">重启 |
|
</el-dropdown-item> |
|
<el-dropdown-item command="autocfg" icon="el-icon-refresh" v-hasPermi="['web:camera:remove']">自动重启配置 |
|
</el-dropdown-item> |
|
<el-dropdown-item command="setTime" icon="el-icon-refresh" v-hasPermi="['web:camera:remove']">时间校准 |
|
</el-dropdown-item> |
|
<el-dropdown-item command="playVideo" icon="el-icon-view" v-hasPermi="['web:camera:remove']">播放视频 |
|
</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> |
|
</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, |
|
videoData:{ |
|
open: false, |
|
}, |
|
// 查询参数 |
|
queryParams: { |
|
page: 1, |
|
limit: 10, |
|
name: null, |
|
ip: null, |
|
port: null, |
|
username: null, |
|
password: null, |
|
devsn: null, |
|
status: null |
|
}, |
|
// 表单参数 |
|
form: {}, |
|
// 表单校验 |
|
rules: { |
|
}, |
|
// ftp配置 |
|
ftp: { |
|
open: false, |
|
form: { |
|
address: '', |
|
port: '', |
|
username: '', |
|
password: '', |
|
pathRule: '', |
|
isEnable: '', |
|
devsn: '', |
|
accessType: null, |
|
brand: null |
|
}, |
|
|
|
|
|
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"); |
|
}, |
|
// 表单重置 |
|
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 = "修改"; |
|
} |
|
}, |
|
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 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 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>
|
|
|