增加运维中心前端模块

web_src/package.json

@@ -14,7 +14,6 @@
     "@femessage/log-viewer": "^1.5.0",
     "@liveqing/liveplayer": "^2.7.10",
     "@wchbrad/vue-easy-tree": "^1.0.12",
-    "ansi_up": "^6.0.2",
     "axios": "^0.24.0",
     "core-js": "^2.6.5",
     "defineProperty": "link:@babel/runtime/helpers/defineProperty",

web_src/src/components/log.vue

@@ -1,105 +0,0 @@
-<template>
-  <div id="log" style="width: 100%;height: 100%">
-    <log-viewer :log="data" :loading="loading" :auto-scroll="false" :height="winHeight" />
-
-  </div>
-</template>
-
-<script>
-// import uiHeader from '../layout/UiHeader.vue'
-import {AnsiUp} from 'ansi_up'
-
-
-export default {
-  name: 'log',
-  components: {},
-  data() {
-    return {
-      loading: false,
-      winHeight: window.innerHeight - 120,
-      data: '',
-      ansiUp: new AnsiUp()
-    };
-  },
-
-  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"
-      }
-      websocket.onerror = e => {
-        console.log(`conn err`)
-        console.error(e)
-      }
-      websocket.onopen = e => {
-        console.log(`conn open: ${e}`);
-      }
-    },
-  }
-};
-</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/operations.vue

@@ -0,0 +1,113 @@
+<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" @select="handleSelect">
+          <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="logFile">日志文件</el-menu-item>
+            <el-menu-item index="realTimeLog">实时日志</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>
+        <operationsForRealLog v-if="activeIndex==='realTimeLog'"></operationsForRealLog>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+
+import operationsForRealLog from './operationsForRealLog'
+
+
+export default {
+  name: 'log',
+  components: {
+    operationsForRealLog
+  },
+  data() {
+    return {
+      loading: false,
+      winHeight: (window.innerHeight - 160) + "px",
+      data: [],
+      filter: "",
+      activeIndex: "logFile"
+    };
+  },
+
+  created() {
+    console.log('created');
+  },
+  destroyed() {
+  },
+  methods: {
+    handleSelect: function (index) {
+      this.activeIndex = index;
+    },
+  }
+};
+</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/operationsForLogFile.vue

@@ -0,0 +1,144 @@
+<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

@@ -0,0 +1,135 @@
+<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">
+        <span style="width: 5vw">过滤: </span>
+        <el-input size="mini" v-model="filter" placeholder="请输入过滤关键字" style="width: 10vw"></el-input>
+      </div>
+      <div></div>
+    </div>
+    <log-viewer :log="getLogData()" :loading="loading" :auto-scroll="true" :height="winHeight" />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'log',
+  components: {},
+  data() {
+    return {
+      loading: false,
+      winHeight: window.innerHeight - 160,
+      data: [],
+      filter: "",
+      websocket: null,
+    };
+  },
+
+  created() {
+    console.log('created');
+    this.initData();
+  },
+  destroyed() {
+    console.log('destroyed');
+    window.websocket.close();
+  },
+  methods: {
+    initData: function () {
+      console.log(window.location.host)
+      let url = "ws://localhost:18080/channel/log";
+      if (process.env.NODE_ENV !== 'development') {
+        url = `ws://${window.location.host}/channel/log`
+      }
+      window.websocket = new WebSocket(url);
+      window.websocket.onclose = e => {
+        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 => {
+        console.log(`conn err`)
+        console.error(e)
+      }
+      window.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/layout/UiHeader.vue

@@ -19,6 +19,7 @@
       <el-menu-item index="/mediaServerManger">节点管理</el-menu-item>
       <el-menu-item index="/platformList/15/1">国标级联</el-menu-item>
       <el-menu-item v-if="editUser" index="/userManager">用户管理</el-menu-item>
+      <el-menu-item index="/operations">运维中心</el-menu-item>
 
       <!--            <el-submenu index="/setting">-->
       <!--              <template slot="title">系统设置</template>-->

web_src/src/router/index.js

@@ -25,7 +25,7 @@ import wasmPlayer from '../components/common/jessibuca.vue'
 import rtcPlayer from '../components/dialog/rtcPlayer.vue'
 import region from '../components/region.vue'
 import group from '../components/group.vue'
-import log from '../components/log.vue'
+import operations from '../components/operations.vue'
 
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push(location) {
@@ -145,8 +145,8 @@ export default new VueRouter({
           component: group,
         },
         {
-          path: '/log',
+          path: '/operations',
-          component: log,
+          component: operations,
         },
         ]
     },