优化运维中心样式

web_src/src/components/operations.vue

@@ -1,26 +1,26 @@
 <template>
-  <div id="operations" style="width: 100%; height: 100%">
-    <el-container >
-      <el-aside width="200px" style="text-align: left">
+  <div id="operations" >
+    <el-container class="container-box">
+      <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>
+            <template slot="title"><i class="el-icon-s-home"></i>平台信息</template>
           </el-menu-item>
           <el-submenu index="log">
-            <template slot="title"><i class="el-icon-message"></i>日志信息</template>
+            <template slot="title"><i class="el-icon-document"></i>日志信息</template>
             <el-menu-item index="historyLog">历史日志</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-menu-item index="tcpdump">网络抓包</el-menu-item>
           </el-submenu>
         </el-menu>
       </el-aside>
-      <el-main style="background-color: #FFFFFF; margin: 20px">
+      <el-main style="background-color: #FFFFFF; margin: 0 20px 20px 20px">
         <operationsForRealLog v-if="activeIndex==='realTimeLog'"></operationsForRealLog>
         <operationsForHistoryLog v-if="activeIndex==='historyLog'"></operationsForHistoryLog>
+        <operationsForSystemInfo v-if="activeIndex==='systemInfo'"></operationsForSystemInfo>
       </el-main>
     </el-container>
   </div>
@@ -30,12 +30,13 @@
 
 import operationsForRealLog from './operationsForRealLog'
 import operationsForHistoryLog from './operationsForHistoryLog.vue'
+import operationsForSystemInfo from './operationsForSystemInfo.vue'
 
 
 export default {
   name: 'log',
   components: {
-    operationsForRealLog, operationsForHistoryLog
+    operationsForRealLog, operationsForHistoryLog, operationsForSystemInfo
   },
   data() {
     return {
@@ -43,7 +44,7 @@ export default {
       winHeight: (window.innerHeight - 170) + "px",
       data: [],
       filter: "",
-      activeIndex: "historyLog"
+      activeIndex: "systemInfo"
     };
   },
 
@@ -61,55 +62,10 @@ export default {
 </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 {
+.container-box {
   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;
+  top: 80px;
+  width: calc(100% - 20px);
+  height: calc(100% - 80px);
 }
 </style>

web_src/src/components/operationsForHistoryLog.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" style="width: 100%">
+  <div id="app" style="width: 100%; background-color: #FFFFFF">
     <div class="page-header">
       <div class="page-title">
         <div>历史日志</div>
@@ -109,7 +109,7 @@ export default {
       chooseRecord: null, // 媒体服务
 
       updateLooper: 0, //数据刷新轮训标志
-      winHeight: window.innerHeight - 250,
+      winHeight: window.innerHeight - 180,
       loading: false,
       mediaServerObj: new MediaServer(),
 

web_src/src/components/operationsForSystemInfo.vue

@@ -0,0 +1,54 @@
+<template>
+  <div id="operationsForSystemInfo" style="margin: 40px">
+    <el-descriptions v-for="(value, key) in systemInfoList" :key="key" :column="2" :loading="loading">
+      <template slot="title">
+        <span>{{key}}</span>
+      </template>
+      <el-descriptions-item v-for="(childValue, childKey) in value" :key="childKey" >
+        <template slot="label">
+          <span>{{childKey}}</span>
+        </template>
+        {{ childValue }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'operationsForSystemInfo',
+  data() {
+    return {
+      loading: false,
+      winHeight: window.innerHeight - 220,
+      systemInfoList: {
+        "测试": {
+          "qwqew": "1111"
+        }
+      },
+    };
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    initData: function () {
+      this.loading = true;
+      this.$axios({
+        method: 'get',
+        url: `/api/server/info`,
+      }).then((res) => {
+        console.log(res)
+        if (res.data.code === 0) {
+          this.systemInfoList = res.data.data;
+        }
+        this.loading = false;
+      }).catch((error) => {
+        console.log(error);
+        this.loading = false;
+      });
+    },
+  }
+};
+</script>