拓扑图

ruoyi-ui/src/App.vue

@@ -9,7 +9,7 @@
 <template>
   <div id="app">
     <router-view />
-    <websocket />
+    <!-- <websocket /> -->
     <!-- <websocket_phone /> -->
   </div>
 </template>

ruoyi-ui/src/views/JiHeExpressway/pages/perception/topology/index.vue

@@ -1,16 +1,47 @@
 <template>
   <div class='topolog'>
-    <p>网络拓扑</p>
+    <div class="list">
+      <div v-for="(item,index) in list" class="listItem  keep-ratio">
+        {{ item.switchName }}
+      </div>
+    </div>
+    <div class="card">
+      <div class="title">
+        <view class="t-left">{{ list[selIndex].switchName }}</view>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import request from '@/utils/request'
+import { Message } from "element-ui";
 
 export default {
   name: 'InDevelopment',
   components: {
   },
+  
+  data() {
+    return {
+      list: [],
+      selIndex: 0
+    }
+  },
   mounted() {
+    this.bind()
+  },
+  methods:{
+    bind(){
+      request({
+          url: '/business/switch/list',
+          method: 'get'
+        }).then(result=>{
+          if (result.code != 200) return Message.error(result?.msg);
+          this.list = result.data
+          console.log(this.list)
+        })
+    }
   }
 }
 </script>
@@ -30,4 +61,25 @@ export default {
     font-size: 200px;
   }
 }
+.list{
+  width: 20vw;
+  height: 100%;
+  color: white;
+  margin: 0px 20px;
+  .listItem{
+    background-image: url(../topology/left-bg.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    height: 44px;
+    width: 100%;
+    text-align: center;
+    line-height: 44px;
+    margin-top: 20px;
+  }
+  
+}
+.card{
+  flex: 1;
+  
+}
 </style>

ruoyi-ui/vue.config.js

@@ -44,7 +44,7 @@ module.exports = {
         // target: `http://10.0.81.201:8080`,
         // target: `http://10.168.73.36:8080`, // 周乐
         // target: `http://10.168.77.209:8087`, // 刘朋
-        // target: `http://10.168.66.196:8080`, //刘文阁
+        target: `http://10.168.66.196:8087`, //刘文阁
         // target: `http://10.168.56.206:8087`, //孟
         // target: `http://10.168.78.135:8087`, //孟
         // target: `http://10.168.78.135:8087`,
@@ -54,7 +54,7 @@ module.exports = {
         // target: `http://10.168.78.135:8087`,  //王钦
         // target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
         // target: `http://10.168.68.42:8087`, //王思祥
-        target: `http://10.168.72.174:8087`, //赵祥龙
+        // target: `http://10.168.72.174:8087`, //赵祥龙
         // target: `http://10.168.65.156:8097`, //孟
         // target: `http://10.168.56.165:8087`, //王家宝
         // target: `http://10.168.77.128:8087`, //王兴琳