实现日志文件检索和日志文件下载接口
648540858
parent
9789fcd3fa
commit
a6993b35fd
|
|
@ -25,6 +25,8 @@ import java.util.ArrayList;
|
|||
@Component
|
||||
public class JwtAuthenticationFilter extends OncePerRequestFilter {
|
||||
|
||||
private final static String WSHeader = "sec-websocket-protocol";
|
||||
|
||||
|
||||
@Autowired
|
||||
private UserSetting userSetting;
|
||||
|
|
@ -56,11 +58,14 @@ public class JwtAuthenticationFilter extends OncePerRequestFilter {
|
|||
String jwt = request.getHeader(JwtUtils.getHeader());
|
||||
// 这里如果没有jwt，继续往后走，因为后面还有鉴权管理器等去判断是否拥有身份凭证，所以是可以放行的
|
||||
// 没有jwt相当于匿名访问，若有一些接口是需要权限的，则不能访问这些接口
|
||||
System.out.println("sec-websocket-protocol==" + request.getHeader("sec-websocket-protocol"));
|
||||
|
||||
// websocket 鉴权信息默认存储在这里
|
||||
String secWebsocketProtocolHeader = request.getHeader(WSHeader);
|
||||
if (StringUtils.isBlank(jwt)) {
|
||||
String secWebsocketProtocolHeader = request.getHeader("sec-websocket-protocol");
|
||||
|
||||
if (secWebsocketProtocolHeader != null) {
|
||||
jwt = secWebsocketProtocolHeader;
|
||||
response.setHeader(WSHeader, secWebsocketProtocolHeader);
|
||||
}else {
|
||||
jwt = request.getParameter(JwtUtils.getHeader());
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
|
|||
import java.util.ArrayList;
|
||||
import java.util.Arrays;
|
||||
import java.util.Collections;
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* 配置Spring Security
|
||||
|
|
@ -104,6 +105,16 @@ public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
|
|||
|
||||
@Override
|
||||
protected void configure(HttpSecurity http) throws Exception {
|
||||
|
||||
List<String> defaultExcludes = userSetting.getInterfaceAuthenticationExcludes();
|
||||
defaultExcludes.add("/api/user/login");
|
||||
defaultExcludes.add("/index/hook/**");
|
||||
defaultExcludes.add("/api/device/query/snap/**");
|
||||
defaultExcludes.add("/index/hook/abl/**");
|
||||
defaultExcludes.add("/swagger-ui/**");
|
||||
defaultExcludes.add("/doc.html#/**");
|
||||
// defaultExcludes.add("/channel/log");
|
||||
|
||||
http.headers().contentTypeOptions().disable()
|
||||
.and().cors().configurationSource(configurationSource())
|
||||
.and().csrf().disable()
|
||||
|
|
@ -114,8 +125,7 @@ public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
|
|||
.and()
|
||||
.authorizeRequests()
|
||||
.requestMatchers(CorsUtils::isPreFlightRequest).permitAll()
|
||||
.antMatchers(userSetting.getInterfaceAuthenticationExcludes().toArray(new String[0])).permitAll()
|
||||
.antMatchers("/api/user/login", "/index/hook/**","/index/hook/abl/**", "/swagger-ui/**", "/doc.html#/**").permitAll()
|
||||
.antMatchers(defaultExcludes.toArray(new String[0])).permitAll()
|
||||
.anyRequest().authenticated()
|
||||
// 异常处理器
|
||||
.and()
|
||||
|
|
|
|||
|
|
@ -5,10 +5,11 @@ import lombok.extern.slf4j.Slf4j;
|
|||
import javax.websocket.*;
|
||||
import javax.websocket.server.ServerEndpoint;
|
||||
import java.io.IOException;
|
||||
import java.util.Map;
|
||||
import java.util.concurrent.ConcurrentHashMap;
|
||||
import java.util.concurrent.ConcurrentMap;
|
||||
|
||||
@ServerEndpoint(value = "/channel/log")
|
||||
@ServerEndpoint(value = "/channel/log")
|
||||
@Slf4j
|
||||
public class LogChannel {
|
||||
|
||||
|
|
@ -30,6 +31,7 @@ public class LogChannel {
|
|||
public void onOpen(Session session, EndpointConfig endpointConfig) {
|
||||
this.session = session;
|
||||
this.session.setMaxIdleTimeout(0);
|
||||
System.out.println();
|
||||
CHANNELS.put(this.session.getId(), this);
|
||||
|
||||
log.info("[Web-Log] 连接已建立: id={}", this.session.getId());
|
||||
|
|
@ -45,9 +47,11 @@ public class LogChannel {
|
|||
|
||||
@OnError
|
||||
public void onError(Throwable throwable) throws IOException {
|
||||
log.info("[Web-Log] 连接错误: id={}, err= ", this.session.getId(), throwable);
|
||||
log.info("[Web-Log] 连接错误: id={}, err= {}", this.session.getId(), throwable.getMessage());
|
||||
if (this.session.isOpen()) {
|
||||
this.session.close(new CloseReason(CloseReason.CloseCodes.UNEXPECTED_CONDITION, throwable.getMessage()));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Push messages to all clients
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
package com.genersoft.iot.vmp.service;
|
||||
|
||||
import com.genersoft.iot.vmp.service.bean.LogFileInfo;
|
||||
|
||||
import java.io.File;
|
||||
import java.util.List;
|
||||
|
||||
public interface ILogService {
|
||||
List<LogFileInfo> queryList(String query, String startTime, String endTime);
|
||||
|
||||
File getFileByName(String fileName);
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
package com.genersoft.iot.vmp.service.bean;
|
||||
|
||||
import lombok.Data;
|
||||
|
||||
@Data
|
||||
public class LogFileInfo {
|
||||
|
||||
private String fileName;
|
||||
private String startTime;
|
||||
private String endTime;
|
||||
|
||||
public static LogFileInfo getInstance(String fileName, String startTime, String endTime) {
|
||||
LogFileInfo logFileInfo = new LogFileInfo();
|
||||
logFileInfo.setFileName(fileName);
|
||||
logFileInfo.setStartTime(startTime);
|
||||
logFileInfo.setEndTime(endTime);
|
||||
return logFileInfo;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
package com.genersoft.iot.vmp.service.impl;
|
||||
|
||||
import ch.qos.logback.classic.Logger;
|
||||
import ch.qos.logback.core.rolling.RollingFileAppender;
|
||||
import com.genersoft.iot.vmp.conf.exception.ControllerException;
|
||||
import com.genersoft.iot.vmp.service.ILogService;
|
||||
import com.genersoft.iot.vmp.service.bean.LogFileInfo;
|
||||
import com.genersoft.iot.vmp.utils.DateUtil;
|
||||
import com.genersoft.iot.vmp.vmanager.bean.ErrorCode;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.apache.commons.io.input.ReversedLinesFileReader;
|
||||
import org.apache.commons.lang3.ObjectUtils;
|
||||
import org.slf4j.LoggerFactory;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
import java.io.*;
|
||||
import java.nio.charset.Charset;
|
||||
import java.nio.file.Files;
|
||||
import java.nio.file.attribute.BasicFileAttributes;
|
||||
import java.nio.file.attribute.FileTime;
|
||||
import java.util.ArrayList;
|
||||
import java.util.Collections;
|
||||
import java.util.List;
|
||||
|
||||
@Service
|
||||
@Slf4j
|
||||
public class LogServiceImpl implements ILogService {
|
||||
|
||||
@Override
|
||||
public List<LogFileInfo> queryList(String query, String startTime, String endTime) {
|
||||
File logFile = getLogDir();
|
||||
if (logFile == null && !logFile.exists()) {
|
||||
throw new ControllerException(ErrorCode.ERROR100.getCode(), "获取日志文件目录失败");
|
||||
}
|
||||
File[] files = logFile.listFiles();
|
||||
List<LogFileInfo> result = new ArrayList<>();
|
||||
if (files == null || files.length == 0) {
|
||||
return result;
|
||||
}
|
||||
for (File file : files) {
|
||||
LogFileInfo logFileInfo = new LogFileInfo();
|
||||
logFileInfo.setFileName(file.getName());
|
||||
if (query != null && !file.getName().contains(query)) {
|
||||
continue;
|
||||
}
|
||||
// 读取文件创建时间作为开始时间，修改时间为结束时间
|
||||
|
||||
Long startTimestamp = null;
|
||||
if (startTime != null) {
|
||||
startTimestamp = DateUtil.yyyy_MM_dd_HH_mm_ssToTimestamp(startTime);
|
||||
}
|
||||
Long endTimestamp = null;
|
||||
if (startTime != null) {
|
||||
endTimestamp = DateUtil.yyyy_MM_dd_HH_mm_ssToTimestamp(endTime);
|
||||
}
|
||||
try {
|
||||
String[] fileAttributes = getFileAttributes(file);
|
||||
if (fileAttributes == null) {
|
||||
continue;
|
||||
}
|
||||
logFileInfo.setStartTime(fileAttributes[0]);
|
||||
logFileInfo.setEndTime(fileAttributes[1]);
|
||||
if (startTimestamp != null && startTimestamp > DateUtil.yyyy_MM_dd_HH_mm_ssToTimestampMs(fileAttributes[0])) {
|
||||
continue;
|
||||
}
|
||||
if (endTimestamp != null && endTimestamp < DateUtil.yyyy_MM_dd_HH_mm_ssToTimestampMs(fileAttributes[1])) {
|
||||
continue;
|
||||
}
|
||||
} catch (IOException e) {
|
||||
log.error("[读取日志文件列表] 获取创建时间和修改时间失败", e);
|
||||
continue;
|
||||
}
|
||||
result.add(logFileInfo);
|
||||
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
private File getLogDir() {
|
||||
Logger logger = (Logger) LoggerFactory.getLogger("com.genersoft.iot.vmp");
|
||||
RollingFileAppender rollingFileAppender = (RollingFileAppender) logger.getAppender("RollingFile");
|
||||
File rollingFile = new File(rollingFileAppender.getFile());
|
||||
return rollingFile.getParentFile();
|
||||
}
|
||||
|
||||
String[] getFileAttributes(File file) throws IOException {
|
||||
BufferedReader bufferedReader = new BufferedReader(new FileReader(file));
|
||||
String startLine = bufferedReader.readLine();
|
||||
if (startLine== null) {
|
||||
return null;
|
||||
}
|
||||
String startTime = startLine.substring(0, 19);
|
||||
|
||||
|
||||
String lastLine = "";
|
||||
try (ReversedLinesFileReader reversedLinesReader = new ReversedLinesFileReader(file, Charset.defaultCharset())) {
|
||||
lastLine = reversedLinesReader.readLine();
|
||||
} catch (Exception e) {
|
||||
log.error("file read error, msg:{}", e.getMessage(), e);
|
||||
}
|
||||
String endTime = lastLine.substring(0, 19);
|
||||
return new String[]{startTime, endTime};
|
||||
}
|
||||
|
||||
@Override
|
||||
public File getFileByName(String fileName) {
|
||||
File logDir = getLogDir();
|
||||
|
||||
return new File(logDir, fileName);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
package com.genersoft.iot.vmp.vmanager.log;
|
||||
|
||||
import ch.qos.logback.classic.Logger;
|
||||
import ch.qos.logback.core.rolling.RollingFileAppender;
|
||||
import com.alibaba.fastjson2.JSONArray;
|
||||
import com.genersoft.iot.vmp.conf.exception.ControllerException;
|
||||
import com.genersoft.iot.vmp.conf.security.JwtUtils;
|
||||
import com.genersoft.iot.vmp.gb28181.service.ICloudRecordService;
|
||||
import com.genersoft.iot.vmp.media.bean.MediaServer;
|
||||
import com.genersoft.iot.vmp.media.service.IMediaServerService;
|
||||
import com.genersoft.iot.vmp.service.ILogService;
|
||||
import com.genersoft.iot.vmp.service.bean.CloudRecordItem;
|
||||
import com.genersoft.iot.vmp.service.bean.DownloadFileInfo;
|
||||
import com.genersoft.iot.vmp.service.bean.LogFileInfo;
|
||||
import com.genersoft.iot.vmp.utils.DateUtil;
|
||||
import com.genersoft.iot.vmp.vmanager.bean.ErrorCode;
|
||||
import com.genersoft.iot.vmp.vmanager.cloudRecord.bean.CloudRecordUrl;
|
||||
import com.github.pagehelper.PageInfo;
|
||||
import io.swagger.v3.oas.annotations.Operation;
|
||||
import io.swagger.v3.oas.annotations.Parameter;
|
||||
import io.swagger.v3.oas.annotations.security.SecurityRequirement;
|
||||
import io.swagger.v3.oas.annotations.tags.Tag;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.apache.commons.compress.utils.IOUtils;
|
||||
import org.apache.commons.lang3.ObjectUtils;
|
||||
import org.slf4j.LoggerFactory;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.http.MediaType;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
|
||||
import javax.servlet.ServletOutputStream;
|
||||
import javax.servlet.http.HttpServletRequest;
|
||||
import javax.servlet.http.HttpServletResponse;
|
||||
import java.io.File;
|
||||
import java.io.FileInputStream;
|
||||
import java.io.IOException;
|
||||
import java.io.InputStream;
|
||||
import java.nio.file.Files;
|
||||
import java.util.ArrayList;
|
||||
import java.util.Calendar;
|
||||
import java.util.List;
|
||||
import java.util.zip.ZipEntry;
|
||||
import java.util.zip.ZipOutputStream;
|
||||
|
||||
@SuppressWarnings("rawtypes")
|
||||
@Tag(name = "日志文件查询接口")
|
||||
@Slf4j
|
||||
@RestController
|
||||
@RequestMapping("/api/log")
|
||||
public class LogController {
|
||||
|
||||
@Autowired
|
||||
private ILogService logService;
|
||||
|
||||
|
||||
@ResponseBody
|
||||
@GetMapping("/list")
|
||||
@Operation(summary = "分页查询日志文件", security = @SecurityRequirement(name = JwtUtils.HEADER))
|
||||
@Parameter(name = "query", description = "检索内容", required = false)
|
||||
@Parameter(name = "startTime", description = "开始时间(yyyy-MM-dd HH:mm:ss)", required = false)
|
||||
@Parameter(name = "endTime", description = "结束时间(yyyy-MM-dd HH:mm:ss)", required = false)
|
||||
public List<LogFileInfo> queryList(@RequestParam(required = false) String query, @RequestParam(required = false) String startTime, @RequestParam(required = false) String endTime
|
||||
|
||||
) {
|
||||
return logService.queryList(query, startTime, endTime);
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载指定日志文件
|
||||
*/
|
||||
@ResponseBody
|
||||
@GetMapping("/file")
|
||||
public void downloadFile(HttpServletResponse response, @RequestParam(required = true) String fileName) {
|
||||
try {
|
||||
File file = logService.getFileByName(fileName);
|
||||
if (file == null || !file.exists() || !file.isFile()) {
|
||||
throw new ControllerException(ErrorCode.ERROR400);
|
||||
}
|
||||
final InputStream in = Files.newInputStream(file.toPath());
|
||||
response.setContentType(MediaType.TEXT_PLAIN_VALUE);
|
||||
ServletOutputStream outputStream = response.getOutputStream();
|
||||
IOUtils.copy(in, response.getOutputStream());
|
||||
in.close();
|
||||
outputStream.close();
|
||||
} catch (IOException e) {
|
||||
response.setStatus(HttpServletResponse.SC_NO_CONTENT);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -25,6 +25,7 @@
|
|||
"postcss-pxtorem": "^5.1.1",
|
||||
"screenfull": "5.1.0",
|
||||
"slicedToArray": "link:@babel/runtime/helpers/slicedToArray",
|
||||
"strip-ansi": "^7.1.0",
|
||||
"uuid": "^8.3.2",
|
||||
"v-charts": "^1.19.0",
|
||||
"vue": "^2.6.11",
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</el-menu-item>
|
||||
<el-submenu index="log">
|
||||
<template slot="title"><i class="el-icon-message"></i>日志信息</template>
|
||||
<el-menu-item index="logFile">日志文件</el-menu-item>
|
||||
<el-menu-item index="historyLog">历史日志</el-menu-item>
|
||||
<el-menu-item index="realTimeLog">实时日志</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="senior">
|
||||
|
|
@ -18,8 +18,9 @@
|
|||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<el-main style="background-color: #FFFFFF; margin: 20px">
|
||||
<operationsForRealLog v-if="activeIndex==='realTimeLog'"></operationsForRealLog>
|
||||
<operationsForHistoryLog v-if="activeIndex==='historyLog'"></operationsForHistoryLog>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
|
|
@ -28,20 +29,21 @@
|
|||
<script>
|
||||
|
||||
import operationsForRealLog from './operationsForRealLog'
|
||||
import operationsForHistoryLog from './operationsForHistoryLog.vue'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'log',
|
||||
components: {
|
||||
operationsForRealLog
|
||||
operationsForRealLog, operationsForHistoryLog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
winHeight: (window.innerHeight - 150) + "px",
|
||||
winHeight: (window.innerHeight - 170) + "px",
|
||||
data: [],
|
||||
filter: "",
|
||||
activeIndex: "logFile"
|
||||
activeIndex: "historyLog"
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,291 @@
|
|||
<template>
|
||||
<div id="app" style="width: 100%">
|
||||
<div class="page-header">
|
||||
<div class="page-title">
|
||||
<div >历史日志</div>
|
||||
</div>
|
||||
|
||||
<div class="page-header-btn">
|
||||
搜索:
|
||||
<el-input @input="getFileList" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
|
||||
prefix-icon="el-icon-search" v-model="search" clearable></el-input>
|
||||
开始时间:
|
||||
<el-date-picker
|
||||
v-model="startTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
@change="getMediaServerList"
|
||||
placeholder="选择日期时间">
|
||||
</el-date-picker>
|
||||
结束时间:
|
||||
<el-date-picker
|
||||
v-model="endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
@change="getMediaServerList"
|
||||
placeholder="选择日期时间">
|
||||
</el-date-picker>
|
||||
<!-- <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteRecord()">批量删除</el-button>-->
|
||||
<el-button icon="el-icon-refresh-right" circle size="mini" :loading="loading"
|
||||
@click="getFileList()"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!--日志列表-->
|
||||
<el-table size="medium" :data="fileList" style="width: 100%" :height="winHeight">
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column prop="app" label="应用名">
|
||||
</el-table-column>
|
||||
<el-table-column prop="stream" label="流ID" width="380">
|
||||
</el-table-column>
|
||||
<el-table-column label="开始时间">
|
||||
<template slot-scope="scope">
|
||||
{{formatTimeStamp(scope.row.startTime)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="结束时间">
|
||||
<template slot-scope="scope">
|
||||
{{formatTimeStamp(scope.row.endTime)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="时长">
|
||||
<template slot-scope="scope">
|
||||
<el-tag>{{formatTime(scope.row.timeLen)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="fileName" label="文件名称">
|
||||
</el-table-column>
|
||||
<el-table-column prop="mediaServerId" label="流媒体">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="medium" icon="el-icon-video-play" type="text" @click="play(scope.row)">播放
|
||||
</el-button>
|
||||
<el-button size="medium" icon="el-icon-download" type="text" @click="downloadFile(scope.row)">下载
|
||||
</el-button>
|
||||
<!-- <el-button size="medium" icon="el-icon-delete" type="text" style="color: #f56c6c"-->
|
||||
<!-- @click="deleteRecord(scope.row)">删除-->
|
||||
<!-- </el-button>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
style="text-align: right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="currentChange"
|
||||
:current-page="currentPage"
|
||||
:page-size="count"
|
||||
:page-sizes="[15, 25, 35, 50]"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
<el-dialog
|
||||
:title="playerTitle"
|
||||
:visible.sync="showPlayer"
|
||||
width="50%">
|
||||
<easyPlayer ref="recordVideoPlayer" :videoUrl="videoUrl" :height="false" ></easyPlayer>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uiHeader from '../layout/UiHeader.vue'
|
||||
import MediaServer from './service/MediaServer'
|
||||
import easyPlayer from './common/easyPlayer.vue'
|
||||
import moment from 'moment'
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
uiHeader,easyPlayer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
showPlayer: false,
|
||||
playerTitle: '',
|
||||
videoUrl: '',
|
||||
playerStyle: {
|
||||
"margin": "auto",
|
||||
"margin-bottom": "20px",
|
||||
"width": window.innerWidth/2 + "px",
|
||||
"height": this.winHeight/2 + "px",
|
||||
},
|
||||
mediaServerList: [], // 滅体节点列表
|
||||
mediaServerId: "", // 媒体服务
|
||||
mediaServerPath: null, // 媒体服务地址
|
||||
fileList: [], // 设备列表
|
||||
chooseRecord: null, // 媒体服务
|
||||
|
||||
updateLooper: 0, //数据刷新轮训标志
|
||||
winHeight: window.innerHeight - 250,
|
||||
currentPage: 1,
|
||||
count: 15,
|
||||
total: 0,
|
||||
loading: false,
|
||||
mediaServerObj: new MediaServer(),
|
||||
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.initData();
|
||||
},
|
||||
destroyed() {
|
||||
this.$destroy('recordVideoPlayer');
|
||||
},
|
||||
methods: {
|
||||
initData: function () {
|
||||
// 获取媒体节点列表
|
||||
this.getMediaServerList();
|
||||
this.getFileList();
|
||||
},
|
||||
currentChange: function (val) {
|
||||
this.currentPage = val;
|
||||
this.getFileList();
|
||||
},
|
||||
handleSizeChange: function (val) {
|
||||
this.count = val;
|
||||
this.getFileList();
|
||||
},
|
||||
getMediaServerList: function () {
|
||||
let that = this;
|
||||
that.mediaServerObj.getOnlineMediaServerList((data) => {
|
||||
that.mediaServerList = data.data;
|
||||
})
|
||||
},
|
||||
setMediaServerPath: function (serverId) {
|
||||
let that = this;
|
||||
let i;
|
||||
for (i = 0; i < that.mediaServerList.length; i++) {
|
||||
if (serverId === that.mediaServerList[i].id) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
let port = that.mediaServerList[i].httpPort;
|
||||
if (location.protocol === "https:" && that.mediaServerList[i].httpSSlPort) {
|
||||
port = that.mediaServerList[i].httpSSlPort
|
||||
}
|
||||
that.mediaServerPath = location.protocol + "//" + that.mediaServerList[i].streamIp + ":" + port
|
||||
console.log(that.mediaServerPath)
|
||||
},
|
||||
getFileList: function () {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/cloud/record/list`,
|
||||
params: {
|
||||
app: '',
|
||||
stream: '',
|
||||
query: this.search,
|
||||
startTime: this.startTime,
|
||||
endTime: this.endTime,
|
||||
mediaServerId: this.mediaServerId,
|
||||
page: this.currentPage,
|
||||
count: this.count
|
||||
}
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
if (res.data.code === 0) {
|
||||
this.total = res.data.data.total;
|
||||
this.fileList = res.data.data.list;
|
||||
}
|
||||
this.loading = false;
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
play(row) {
|
||||
console.log(row)
|
||||
this.chooseRecord = row;
|
||||
this.showPlayer = true;
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/cloud/record/play/path`,
|
||||
params: {
|
||||
recordId: row.id,
|
||||
}
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
if (res.data.code === 0) {
|
||||
if (location.protocol === "https:") {
|
||||
this.videoUrl = res.data.data.httpsPath;
|
||||
}else {
|
||||
this.videoUrl = res.data.data.httpPath;
|
||||
}
|
||||
console.log(222 )
|
||||
console.log(this.videoUrl )
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
downloadFile(file){
|
||||
console.log(file)
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/cloud/record/play/path`,
|
||||
params: {
|
||||
recordId: file.id,
|
||||
}
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
const link = document.createElement('a');
|
||||
link.target = "_blank";
|
||||
if (res.data.code === 0) {
|
||||
if (location.protocol === "https:") {
|
||||
link.href = res.data.data.httpsPath + "&save_name=" + file.fileName;
|
||||
}else {
|
||||
link.href = res.data.data.httpPath + "&save_name=" + file.fileName;
|
||||
}
|
||||
link.click();
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
deleteRecord() {
|
||||
// TODO
|
||||
let that = this;
|
||||
this.$axios({
|
||||
method: 'delete',
|
||||
url: `/record_proxy/api/record/delete`,
|
||||
params: {
|
||||
page: that.currentPage,
|
||||
count: that.count
|
||||
}
|
||||
}).then(function (res) {
|
||||
console.log(res)
|
||||
if (res.data.code === 0) {
|
||||
that.total = res.data.data.total;
|
||||
that.fileList = res.data.data.list;
|
||||
}
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
formatTime(time) {
|
||||
const h = parseInt(time / 3600 / 1000)
|
||||
const minute = parseInt((time - h * 3600 * 1000) / 60 / 1000)
|
||||
let second = Math.ceil((time - h * 3600 * 1000 - minute * 60 * 1000) / 1000)
|
||||
if (second < 0) {
|
||||
second = 0;
|
||||
}
|
||||
return (h > 0 ? h + `小时` : '') + (minute > 0 ? minute + '分' : '') + (second > 0 ? second + '秒' : '')
|
||||
},
|
||||
formatTimeStamp(time) {
|
||||
return moment.unix(time/1000).format('yyyy-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
<template>
|
||||
<div id="operations" style="width: 100%;height: 100%">
|
||||
<el-container style="height: 82vh;">
|
||||
<el-aside width="200px" style="text-align: left">
|
||||
<el-menu :default-active="activeIndex" :height="winHeight">
|
||||
<el-menu-item index="systemInfo">
|
||||
<template slot="title"><i class="el-icon-message"></i>平台信息</template>
|
||||
</el-menu-item>
|
||||
<el-submenu index="log">
|
||||
<template slot="title"><i class="el-icon-message"></i>日志信息</template>
|
||||
<el-menu-item index="realTimeLog">日志文件</el-menu-item>
|
||||
<el-menu-item index="logFile">实时日志</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="senior">
|
||||
<template slot="title"><i class="el-icon-setting"></i>高级维护</template>
|
||||
<el-menu-item disabled="disabled" index="tcpdump">网络抓包</el-menu-item>
|
||||
<el-menu-item disabled="disabled" index="networkCard">网卡信息</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-main style="padding: 5px;">
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: 'log',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
winHeight: (window.innerHeight - 160) + "px",
|
||||
activeIndex: 'systemInfo',
|
||||
data: [],
|
||||
filter: "",
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
console.log('created');
|
||||
this.initData();
|
||||
},
|
||||
destroyed() {
|
||||
},
|
||||
methods: {
|
||||
initData: function () {
|
||||
console.log('initData');
|
||||
const websocket = new WebSocket("ws://localhost:18080/channel/log");
|
||||
websocket.onclose = e => {
|
||||
console.log(`conn closed: code=${e.code}, reason=${e.reason}, wasClean=${e.wasClean}`)
|
||||
}
|
||||
websocket.onmessage = e => {
|
||||
console.log(e.data);
|
||||
// this.data += e.data + "\r\n"
|
||||
|
||||
this.data.push(e.data);
|
||||
}
|
||||
websocket.onerror = e => {
|
||||
console.log(`conn err`)
|
||||
console.error(e)
|
||||
}
|
||||
websocket.onopen = e => {
|
||||
console.log(`conn open: ${e}`);
|
||||
}
|
||||
},
|
||||
getLogData: function () {
|
||||
if (this.data.length === 0) {
|
||||
return "";
|
||||
} else {
|
||||
let result = '';
|
||||
for (let i = 0; i < this.data.length; i++) {
|
||||
if (this.filter.length === 0) {
|
||||
result += this.data[i] + "\r\n"
|
||||
} else {
|
||||
if (this.data[i].indexOf(this.filter) > -1) {
|
||||
result += this.data[i] + "\r\n"
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.videoList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.video-item {
|
||||
position: relative;
|
||||
width: 15rem;
|
||||
height: 10rem;
|
||||
margin-right: 1rem;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.video-item-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-item-img:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background-image: url("../assets/loading.png");
|
||||
background-size: cover;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.video-item-title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
color: #000000;
|
||||
background-color: #ffffff;
|
||||
line-height: 1.5rem;
|
||||
padding: 0.3rem;
|
||||
width: 14.4rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
<template>
|
||||
<div id="log" style="width: 100%;height: 100%">
|
||||
<div style="width: 100%; height: 40px">
|
||||
<div style="width: 15vw; text-align: center; line-height: 40px">
|
||||
<div id="log" style="width: 100%;height: 100%;">
|
||||
<div style="width: 100%; height: 40px; display: grid; grid-template-columns: 1fr 1fr">
|
||||
<div style="text-align: left; line-height: 40px;">
|
||||
<span style="width: 5vw">过滤: </span>
|
||||
<el-input size="mini" v-model="filter" placeholder="请输入过滤关键字" style="width: 10vw"></el-input>
|
||||
<el-input size="mini" v-model="filter" placeholder="请输入过滤关键字" style="width: 20vw"></el-input>
|
||||
</div>
|
||||
<div style="text-align: right; line-height: 40px;">
|
||||
<el-button size="mini" icon="el-icon-download" @click="downloadFile()">下载
|
||||
</el-button>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<log-viewer :log="getLogData()" :loading="loading" :auto-scroll="true" :height="winHeight" />
|
||||
</div>
|
||||
|
|
@ -14,6 +17,8 @@
|
|||
<script>
|
||||
|
||||
import userService from "./service/UserService";
|
||||
import moment from "moment/moment";
|
||||
import stripAnsi from "strip-ansi";
|
||||
|
||||
export default {
|
||||
name: 'log',
|
||||
|
|
@ -21,7 +26,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
winHeight: window.innerHeight - 180,
|
||||
winHeight: window.innerHeight - 220,
|
||||
data: [],
|
||||
filter: "",
|
||||
websocket: null,
|
||||
|
|
@ -52,9 +57,6 @@ export default {
|
|||
console.log(`conn closed: code=${e.code}, reason=${e.reason}, wasClean=${e.wasClean}`)
|
||||
}
|
||||
window.websocket.onmessage = e => {
|
||||
console.log(e.data);
|
||||
// this.data += e.data + "\r\n"
|
||||
|
||||
this.data.push(e.data);
|
||||
}
|
||||
window.websocket.onerror = e => {
|
||||
|
|
@ -82,6 +84,38 @@ export default {
|
|||
return result;
|
||||
}
|
||||
},
|
||||
getLogDataWithOutAnsi: function () {
|
||||
if (this.data.length === 0) {
|
||||
return "";
|
||||
}else {
|
||||
let result = '';
|
||||
for (let i = 0; i < this.data.length; i++) {
|
||||
if (this.filter.length === 0) {
|
||||
result += stripAnsi(this.data[i]) + "\r\n"
|
||||
}else {
|
||||
if (this.data[i].indexOf(this.filter) > -1) {
|
||||
result += stripAnsi(this.data[i]) + "\r\n"
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
},
|
||||
downloadFile() {
|
||||
let blob = new Blob([this.getLogDataWithOutAnsi()], {
|
||||
type: "text/plain;charset=utf-8"
|
||||
});
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(blob);
|
||||
reader.onload = function(e) {
|
||||
let a = document.createElement('a');
|
||||
a.download = `wvp-${moment().format('yyyy-MM-DD')}.log`;
|
||||
a.href = e.target.result;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue