<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>