feature（运行拓扑）

src/views/business-analysis/runningTopology/SQLCall/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="ob-sql-content">
+    <img src="../images/sql-chart.png">
+  </div>
+</template>
+<script>
+export default {
+}
+</script>
+<style lang="scss" scoped>
+.ob-sql-content{
+    padding:20px;
+    padding-top:100px;
+    display: flex;
+    img{
+        width: 100%;
+    }
+}
+</style>

src/views/business-analysis/runningTopology/abnormal/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="ob-abnormal-content">
+    <img src="../images/abnoraml-chart.png">
+  </div>
+</template>
+<script>
+export default {
+}
+</script>
+<style lang="scss" scoped>
+.ob-abnormal-content{
+    padding:20px;
+    padding-top:100px;
+    display: flex;
+    img{
+        width: 100%;
+    }
+    .marginTop20{
+        margin-top:20px;
+    }
+}
+</style>

src/views/business-analysis/runningTopology/callChain/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="ob-chain-content">
+    <div class="ob-left-box">
+      <img src="../images/chain-table.png">
+    </div>
+    <div class="ob-right-box">
+      <div>
+        <div style="text-align: right;margin-bottom: 10px;">
+          <el-switch
+            v-model="switchValue"
+            active-color="#165DFF"
+            inactive-color="#C9CDD4"
+          />
+        </div>
+        <img v-if="switchValue" src="../images/chart2.jpg">
+        <img v-else src="../images/chart1.png">
+      </div>
+      <div class="marginTop20">
+        <img src="../images/fenwei.png">
+      </div>
+      <div class="ob-right-table"><img src="../images/pic-table.jpg"></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      switchValue: false
+    }
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ob-chain-content{
+    padding:20px;
+    padding-top:100px;
+    display: flex;
+    .ob-left-box{
+      width:40%;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    .ob-right-box{
+      width:60%;
+      img{
+        width: 100%;
+      }
+    }
+    .marginTop20{
+      margin-top:20px;
+    }
+    .ob-right-table{
+      margin-left:5px;
+      padding:10px;
+      background: white;
+      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12);
+      border-radius: 12px;
+      margin-top:15px;
+      img{
+        width: 100%;
+      }
+    }
+}
+
+</style>

src/views/business-analysis/runningTopology/index.vue

@@ -15,10 +15,10 @@
       </div>
     </div>
     <div class="ob-right-box">
-      <img src="./images/btn.png">
+      <!-- <img src="./images/btn.png"> -->
       <img src="./images/tuopu.png" class="ob-tuopu" @click="openDrawer">
     </div>
-    <TopologyDrawer :drawer-flag="drawerFlag" @handleClose="handleClose"/>
+    <TopologyDrawer :drawer-flag="drawerFlag" @handleClose="handleClose" />
   </div>
 </template>
 <script>
@@ -127,13 +127,10 @@ export default {
     overflow: overlay;
     cursor: pointer;
     padding:10px;
+    padding-top:30px;
     .ob-tuopu{
       width: 100%;
     }
-    img:first-child{
-      float: right;
-      margin-bottom: 40px;
-    }
   }
   .ob-left-header{
     width:93%;

src/views/business-analysis/runningTopology/log/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="ob-log-content">
+    <img src="../images/log-chart.png">
+  </div>
+</template>
+<script>
+export default {
+}
+</script>
+<style lang="scss" scoped>
+  .ob-log-content{
+      padding:20px;
+      padding-top:100px;
+      display: flex;
+    img{
+        width: 100%;
+    }
+    .marginTop20{
+        margin-top:20px;
+    }
+}
+
+</style>

src/views/business-analysis/runningTopology/noSQLCall/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="ob-nosql-content">
+    <img src="../images/nospl-chart.png">
+  </div>
+</template>
+<script>
+export default {
+}
+</script>
+<style lang="scss" scoped>
+.ob-nosql-content{
+    padding:20px;
+    padding-top:100px;
+    display: flex;
+    img{
+        width: 100%;
+    }
+}
+</style>

src/views/business-analysis/runningTopology/topologyDrawer.vue

@@ -5,7 +5,6 @@
       :visible.sync="drawerFlag"
       direction="rtl"
       size="70%"
-      :wrapper-closable="false"
       :before-close="handleClose"
     >
       <el-tabs v-model="activeName" @tab-click="handleClick" class="customdrawer">
@@ -23,11 +22,21 @@
 import TopologyOverview from './topologyOverview/index.vue'
 import JVM from './jvm/index.vue'
 import ServiceRelationship from './serviceRelationship/index.vue'
+import CallChain from './callChain/index.vue'
+import Log from './log/index.vue'
+import Abnormal from './abnormal/index.vue'
+import SQLCall from './SQLCall/index.vue'
+import NoSQLCall from './noSQLCall/index.vue'
 export default {
   components: {
     TopologyOverview,
     JVM,
-    ServiceRelationship
+    ServiceRelationship,
+    CallChain,
+    Log,
+    Abnormal,
+    SQLCall,
+    NoSQLCall
   },
   props: {
     drawerFlag: {
@@ -80,7 +89,12 @@ export default {
       const obj = {
         '概览': 'TopologyOverview',
         'JVM/GC': 'JVM',
-        '服务关系': 'ServiceRelationship'
+        '服务关系': 'ServiceRelationship',
+        '调用链(业务)': 'CallChain',
+        '日志': 'Log',
+        '异常': 'Abnormal',
+        'SQL调用': 'SQLCall',
+        'NoSQL调用': 'NoSQLCall'
       }
       this.currentComponent = obj[this.activeName]
     }

src/views/business-analysis/runningTopology/topologyOverview/index.vue

@@ -40,13 +40,13 @@ export default {
   padding: 20px;
   padding-top:100px;
   .ob-main-left{
-    width: 350px;
+    width: 40%;
     img{
-        width: 100%;
+      width: 100%;
     }
   }
   .ob-main-right{
-    flex:1;
+    width: 60%;
     margin-left: 24px;
     background: #FFFFFF;
     border-radius: 12px;

vue.config.js

@@ -6,7 +6,6 @@ const defaultSettings = require('./src/settings.js')
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
-
 const name = defaultSettings.title || 'go-dmin' // page title
 
 // If your port is set to 80,
@@ -15,7 +14,6 @@ const name = defaultSettings.title || 'go-dmin' // page title
 // You can change the port by the following method:
 // port = 9527 npm run dev OR npm run dev --port = 9527
 const port = process.env.port || process.env.npm_config_port || 9527 // dev port
-
 // const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
@@ -60,7 +58,7 @@ module.exports = {
   configureWebpack: {
     plugins: [
       new CompressionPlugin({
-        cache:false,
+        cache: false,
         algorithm: 'gzip',
         test: /\.js$|\.html$|\.css/, // 匹配文件名
         threshold: 10240, // 对超过10kb的数据进行压缩