调整对比页面

vue/afvue/src/router/index.js

@@ -17,7 +17,7 @@ const router = new VueRouter({
     {
       path: '/compare',
       name: 'compare',
-      component: () => import('../views/Compare.vue')
+      component: () => import('../views/Sfilecompare.vue')
     },
     {
       path: '/setting',

vue/afvue/src/views/Compare.vue

@@ -16,7 +16,6 @@
                 <select class="selbox" name="srcip" ref="srcip">
                     <option>请选择源服务器</option>
                     <option v-for="item in uslist" :value="item.addr">{{ item.addr }}</option>
-
                 </select>
             </div>
             <div class="serbox">
@@ -289,11 +288,11 @@ export default {
     },
     // create
     created() {
-        this.setupSSE();
+        // this.setupSSE();
     },
     // 销毁
     beforeDestroy() {
-        this.eventSource.close();
+        // this.eventSource.close();
     },
     mounted() {
         // 获取使用中的服务器

vue/afvue/src/views/Sfilecompare.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="sfcbox">
+        <!-- 第一个服务器的文件列表 -->
+        <div class="sfcon">
+            <div class="sfind">
+                <!-- 选择服务器 -->
+                <select class="selbox" name="fsip" ref="fsip">
+                    <option value="0">请选择源服务器</option>
+                    <option v-for="item in uslist" :value="item.addr+':'+item.port">{{ item.addr+':'+item.port }}</option>
+                </select>
+                <input type="text" placeholder="/"  v-model="fspath">
+                <button @click="getFlist">Go</button>
+            </div>
+            <div class="sflist">
+                <ul v-for="item in fsclist" :key="item">
+                    <li >{{item.path}}</li>
+                </ul>
+            </div>
+        </div>
+        <!-- 第二个服务器的文件列表 -->
+        <div class="sfcon">
+            <div class="sfind">
+                <!-- 选择服务器 -->
+                <select class="selbox" name="ssip" ref="ssip">
+                    <option value="0">请选择源服务器</option>
+                    <option v-for="item in uslist" :value="item.addr+':'+item.port">{{ item.addr+':'+item.port }}</option>
+                </select>
+                <input type="text" placeholder="192.168.66.92:9098" v-model="sspath">
+                <button @click="getSflist">GO</button>
+            </div>
+        
+            <div class="sflist">
+                <ul v-for="item in ssclist" :key="item">
+                    <li >{{item.path}}</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { GetFileList,SerlistInUsing } from '@/api/scinfo'
+
+export default {
+    name: 'Sfilecompare',
+    data() {
+        return {
+            fsip: '',
+            ssip: '',
+            fsclist: {}, // 第一台文件列表
+            ssclist: {}, // 第二台文件列表
+            uslist:[], //使用中的服务器
+            fspath:'/', // 第一个服务器的路径
+            sspath:'/', // 第二个服务器的路径
+        }
+    },
+    mounted() {
+        // 使用中的服务器
+        SerlistInUsing().then(res => {
+            this.uslist = res.data;
+        })
+    
+    },
+    methods: {
+        // 获取第一个服务器的文件列表
+        getFlist() {
+            // 获取第一个服务器
+            let fsip = this.$refs.fsip.value
+            let sstr = fsip.split(":")
+            let sport = sstr[1]
+            let scip = btoa(sstr[0])
+
+            let rt = this.FileList(scip,sport,this.fspath)
+            console.log(rt,"rt")
+        },
+        // 获取第二个服务器的文件列表
+        getSflist() {
+            let sstr = this.ssip.split(":")
+            let sport = sstr[1]
+            let scip = btoa(sstr[0])
+            //
+            this.ssclist = this.FileList(scip,sport,this.sspath)
+        },
+
+        // 通用的查询方法
+        FileList(ip,port,path){
+            let retlist=[]
+            GetFileList({
+                srcip: ip,
+                path: path,
+                sport: port
+            }).then(res => {
+                retlist= res.data
+            })
+            return retlist
+        }
+    }
+}
+</script>
+
+<style scoped>
+.sfcbox {
+    float: left;
+    width: 100%;
+    /* overflow-y: auto; */
+    margin: 20px auto;
+    margin-top: 12px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 12px 12px 0 0;
+}
+.sfcon{
+    padding: 20px;
+    float: left;
+    width: 100%;
+    min-height: 560px;
+}
+.sfcon:nth-child(2){
+    border-right: 1px solid #ccc;
+    margin-top: 22px;
+}
+.sfind{
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+}
+.sfcon .sflist{
+    min-height: 560px;
+    overflow-y: auto;
+    background-color: #f5f5f5;
+}
+.sfcon .sflist ul{
+    margin-top: 20px;
+    display: block;
+    width: 100%;
+}
+.sfcon .sflist ul li{
+    list-style: none;
+    width: 100%;
+    float: left;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px dashed #ccc;
+}
+</style>