实现日志文件检索和日志文件下载接口

src/main/java/com/genersoft/iot/vmp/conf/security/JwtAuthenticationFilter.java

@@ -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());
             }

src/main/java/com/genersoft/iot/vmp/conf/security/WebSecurityConfig.java

@@ -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(defaultExcludes.toArray(new String[0])).permitAll()
-                .antMatchers("/api/user/login", "/index/hook/**","/index/hook/abl/**", "/swagger-ui/**", "/doc.html#/**").permitAll()
                 .anyRequest().authenticated()
                 // 异常处理器
                 .and()

src/main/java/com/genersoft/iot/vmp/conf/webLog/LogChannel.java

@@ -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,8 +47,10 @@ 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());
-        this.session.close(new CloseReason(CloseReason.CloseCodes.UNEXPECTED_CONDITION, throwable.getMessage()));
+        if (this.session.isOpen()) {
+            this.session.close(new CloseReason(CloseReason.CloseCodes.UNEXPECTED_CONDITION, throwable.getMessage()));
+        }
     }
 
     /**

src/main/java/com/genersoft/iot/vmp/service/ILogService.java

@@ -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);
+}

src/main/java/com/genersoft/iot/vmp/service/bean/LogFileInfo.java

@@ -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;
+    }
+
+}

src/main/java/com/genersoft/iot/vmp/service/impl/LogServiceImpl.java

@@ -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);
+    }
+}

src/main/java/com/genersoft/iot/vmp/vmanager/log/LogController.java

@@ -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);
+        }
+    }
+
+}

web_src/package.json

@@ -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",

web_src/src/components/operations.vue

@@ -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"
     };
   },
 

web_src/src/components/operationsForHistoryLog.vue

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

web_src/src/components/operationsForLogFile.vue

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

web_src/src/components/operationsForRealLog.vue

@@ -1,11 +1,14 @@
 <template>
-  <div id="log" style="width: 100%;height: 100%">
+  <div id="log" style="width: 100%;height: 100%;">
-    <div style="width: 100%; height: 40px">
+    <div style="width: 100%; height: 40px; display: grid; grid-template-columns: 1fr 1fr">
-      <div style="width: 15vw; text-align: center; line-height: 40px">
+      <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>