jwebfs/vue/afvue/src/views/Flist.vue

<template>
    <div id="fexeplore">
        
        <div class="wfbox">
            <div class="wfso">
                <input class="wfinput" type="text" placeholder="请输入文件路径" v-model="spath">
                <button class="wfbtn">GO</button>
            </div>
            <div class="fbox">
                <div class="ftit">
                    <span>文件名称</span>
                    <span>文件大小</span>
                    <span>文件哈希</span>
                </div>
                <div class="fcon" v-for="item in flist" :key="item">
                   <span class="fcline">
                        {{ item.path }}
                   </span> 
                    <span class="fcline">{{ item.size }}KB</span>
                    <span class="fcline">{{ item.hash }}</span>
                </div>
            </div>
            <!-- 说明 -->
             <div class="wdesc">
                <p>说明：默认监视目录为/www/wwwroot/</p>
                <p>文件名称：文件的名称，包括文件的路径和文件名。</p>
                <p>文件大小：文件的大小，单位为字节（B）、千字节（KB）、兆字节（MB）等。</p>
                <p>文件哈希：文件的哈希值，用于唯一标识文件的内容。</p>
             </div>
        </div>
    </div>
</template>

<script>
import { GetFileList } from '@/api/scinfo'

export default {
    name: 'Flist',
    data() {
        return {
            srcip: '',
            dstip: '',
            flist: [],
            spath: '/', // 当前的目录
            sport: 9098, // 服务器运行端口
        }
    },
    mounted() {
        this.srcip = this.$route.query.srcip
        this.sport = this.$route.query.sport
        this.getFlist()
    },
    methods: {
        getFlist() {
            GetFileList({
                srcip: this.srcip,
                path: this.spath,
                sport: this.sport

            }).then(res => {
                // console.log(res)
                this.flist = res.data.list
            })
        }
    }
}
</script>

<style scoped>

    .wfbox{
        padding:12px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .wfso{
        padding-left: 20px;
    }
    .wfso .wfinput{
        padding-left: 12px;
        width: 90%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #ccc;
        border-top: none;
        border-left: none;
        border-right: none;
    }
    .wfso .wfinput:focus{
        /* border: none; */
        outline: none;
    }
    .wfso .wfbtn{
        width: 8%;
        /* padding-left: 2%; */
        height: 40px;
        line-height: 40px;
        border: none;
        background-color: #007bff;
        color: #fff;
    }
    .fbox{
        width: 100%;
        margin-top: 20px;
    }
    .fbox .ftit{
        background-color: #f6f6f6;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;

    }
    .fbox .ftit span{
        display: block;
        text-align: left;
        float: left;
        font-weight: bold;
    }
    
    .fbox  span:first-child{
        width: 42%;
    }
    .fbox  span:nth-child(2){
        width: 20%;
    }
    .fbox span:nth-child(3){
        width: 38%;
        /* background-color: #f6f6f6; */
        font-size: 12px;
    }
    .fcon{
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
    }
    .fcon .fcline{
        border-bottom: 1px solid #ccc;
        float: left;
    }
    .fcon:hover{
        background-color: #c4bcbc;
        cursor: default;
    }
    .wdesc{
        padding-left: 12px;
        margin-top: 20px;
        color: #ccc;
        font-size: 12px;
    }
</style>