文件服务-文件目录/下载功能

src/api/cs-device-boot/fileService.ts

@@ -0,0 +1,41 @@
+import createAxios from '@/utils/request'
+
+// 设备文件根目录查询
+export function getDeviceRootPath(nDid) {
+    return createAxios({
+        url: '/cs-device-boot/deviceFile/askDeviceRootPath?nDid=' + nDid,
+        method: 'POST'
+    })
+}
+
+// 设备文件-目录信息询问
+export function getFileServiceFileOrDir(data) {
+    return createAxios({
+        url: `cs-device-boot/deviceFile/askDeviceFileOrDir?nDid=${data.nDid}&name=${data.name}&type=${data.type}`,
+        method: 'POST'
+    })
+}
+
+//设备文件下载
+export function downLoadDeviceFile(data) {
+    return createAxios({
+        url: `/cs-device-boot/deviceFile/downloadFile?nDid=${data.nDid}&name=${data.name}&fileCheck=${data.fileCheck}&size=${data.size}`,
+        method: 'POST'
+    })
+}
+
+//上传文件至装置
+export function uploadDeviceFile(data) {
+    let form = new FormData()
+    form.append('file', data.file)
+    form.append('filePath', data.filePath)
+    form.append('id', data.id)
+    return createAxios({
+        url: `/access-boot/analyzeModel/uploadDevFile`,
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        data: form
+    })
+}

src/views/auth/menu/popupApi.vue

@@ -59,7 +59,7 @@ const rules = {
     code: [
         { required: true, message: '标识不能为空', trigger: 'blur' },
         {
-            pattern: /^[a-zA-Z_]{1}[a-zA-Z0-9_]{2,15}$/,
+            pattern: /^[a-zA-Z_]{1}[a-zA-Z0-9_]{2,20}$/,
             message: '请输入至少3-20位英文',
             min: 3,
             max: 20,

src/views/govern/device/control/analysisList/index.vue

@@ -80,7 +80,7 @@ const updateViewportHeight = async () => {
     // height.value = window.innerHeight;
     height.value = window.innerHeight < 1080 ? 180 : 400
     tableStore.table.publicHeight = height.value
-    await tableStore.index()
+    // await tableStore.index()
 }
 
 onMounted(() => {

src/views/govern/device/fileService/index.vue

@@ -0,0 +1,239 @@
+<!-- 文件管理 -->
+<template>
+    <div class="default-main main" :style="{ height: pageHeight.height }">
+        <div class="main_left">
+            <DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
+        </div>
+        <div class="main_right" v-loading="loading">
+            <div class="menu" v-if="activePathList.length != 0">
+                <el-breadcrumb :separator-icon="ArrowRight">
+                    <el-breadcrumb-item
+                        v-for="(item, index) in activePathList"
+                        style="cursor: pointer"
+                        :key="index"
+                        @click="handleIntoByPath(item)"
+                    >
+                        <span>{{ index > 1 ? item.path.replace(activePathList[1].path, ' ') : item.path }}</span>
+                    </el-breadcrumb-item>
+                </el-breadcrumb>
+            </div>
+            <div class="list">
+                <div class="list_item" v-for="(item, index) in dirList" :key="index" @click="handleIntoDir(item)">
+                    <div class="item_download">
+                        <el-button v-if="item?.type == 'file'" size="small" circle>
+                            <el-icon @click="handleDownLoad(item)"><Download /></el-icon>
+                        </el-button>
+                    </div>
+                    <img v-if="item?.type == 'dir'" src="@/assets/img/wenjianjia.svg" />
+                    <img class="img_file" v-if="item?.type == 'file'" src="@/assets/img/wenjian.svg" />
+                    <span v-if="!item.type">暂无内容</span>
+                    <p>
+                        {{
+                            item &&
+                            item?.prjDataPath &&
+                            item?.prjDataPath.includes(activePath) &&
+                            item?.prjDataPath.length > activePath.length
+                                ? item?.prjDataPath.replace(activePath, ' ')
+                                : item?.prjDataPath
+                        }}
+                    </p>
+                </div>
+            </div>
+        </div>
+        <popup ref="fileRef"></popup>
+    </div>
+</template>
+
+<script setup lang="ts">
+import DeviceTree from '@/components/tree/govern/deviceTree.vue'
+import { mainHeight } from '@/utils/layout'
+import { ref, reactive, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { ArrowLeft, ArrowRight, Download } from '@element-plus/icons-vue'
+import { getDeviceRootPath, getFileServiceFileOrDir, downLoadDeviceFile,uploadDeviceFile } from '@/api/cs-device-boot/fileService.ts'
+import popup from './popup.vue'
+defineOptions({
+    name: 'govern/device/fileService'
+})
+const pageHeight = mainHeight(20)
+const loading = ref(false)
+//nDid
+const nDid = ref<string>('')
+// 树节点点击
+
+//当前目录
+const activePath = ref<string>('')
+//储存所有点击过的目录
+const activePathList: any = ref([])
+const nodeClick = (e: any) => {
+    loading.value = true
+    if (e.level == 2) {
+        nDid.value = e.ndid
+        getDeviceRootPath(nDid.value).then(res => {
+            loading.value = false
+            dirList.value = [res.data]
+            activePath.value = res.data.prjDataPath
+            activePathList.value.map((item: any, index: any) => {
+                if (item.path.indexOf(res.data.prjDataPath) == -1) {
+                    activePathList.value.push({ path: activePath.value })
+                }
+            })
+        })
+    }
+}
+
+// 进入文件夹
+const dirList = ref([])
+const handleIntoDir = (row: any) => {
+    if (!row.type||row.type == 'file') return
+    loading.value = true
+    const obj = {
+        nDid: nDid.value,
+        name: row.prjDataPath,
+        type: row.type
+    }
+    //当前点击的目录
+    activePath.value = row.prjDataPath
+    if (activePathList.value.indexOf(obj.name) == -1) {
+        activePathList.value.push({ path: obj.name })
+    }
+    getFileServiceFileOrDir(obj).then(res => {
+        dirList.value = res.data
+        loading.value = false
+        activePathList.value.map((item: any, index: any) => {
+            if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
+                activePathList.value.splice(index, 1)
+            }
+        })
+    })
+}
+
+//上传文件
+const uploadFile=(file:any)=>{
+    const obj={
+        id:nDid.value,
+        file:file,
+        filePath:'/'
+    }
+    uploadDeviceFile().then((res)=>{
+
+    })
+}
+
+//根据面包屑导航切换
+const handleIntoByPath = async (val: any) => {
+    const obj = {
+        nDid: nDid.value,
+        name: val.path,
+        type: 'dir'
+    }
+    activePath.value = val.path
+    getFileServiceFileOrDir(obj).then(res => {
+        dirList.value = res.data
+        activePathList.value.map((item: any, index: any) => {
+            if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
+                activePathList.value.splice(index, 1)
+            }
+        })
+    })
+}
+
+//下载文件
+const fileRef = ref()
+const handleDownLoad = async (row: any) => {
+    await fileRef.value && fileRef.value.open(row, nDid.value)
+}
+watch(
+    () => activePathList.value,
+    async (val, oldVal) => {
+        if (val) {
+            val.map((item: any, index: any) => {
+                if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
+                    val.splice(index, 1)
+                }
+            })
+        }
+    },
+    {
+        immediate: true,
+        deep: true
+    }
+)
+</script>
+
+<style lang="scss">
+.main {
+    display: flex;
+    justify-content: space-between;
+    .main_left {
+        // width: 280px;
+    }
+    .main_right {
+        overflow: hidden;
+        flex: 1;
+        padding: 10px 10px 10px 10px;
+        margin-left: 10px;
+        border: 1px solid #eee;
+        .menu {
+            width: 100%;
+            height: 50px;
+            display: flex;
+            justify-content: flex-start;
+            overflow-x: auto;
+            align-items: center;
+            background-color: var(--el-color-primary);
+            border-radius: 4px;
+            span {
+                font-size: 14px;
+                font-weight: 800;
+                padding: 0 5px;
+                color: #fff;
+                cursor: pointer;
+            }
+        }
+        .list {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-start;
+            overflow-y: auto;
+            margin-top: 20px;
+            height: 100%;
+            padding-bottom: 200px;
+            z-index: 100;
+            .list_item {
+                flex: none;
+                width: 23.3%;
+                height: 100px;
+                border: 1px solid var(--el-color-primary);
+                margin: 10px 0.5%;
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+                justify-content: center;
+                border-radius: 6px;
+                cursor: pointer;
+                position: relative;
+                z-index: 1001 !important;
+                .item_download {
+                    position: absolute;
+                    top: 10px;
+                    right: 10px;
+                    z-index: 2001;
+                }
+                .img_file {
+                    width: 60px;
+                    height: 60px;
+                }
+                img {
+                    width: 50px;
+                    height: 50px;
+                    cursor: pointer !important;
+                }
+                p {
+                    margin-top: 10px;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/govern/device/fileService/popup.vue

@@ -0,0 +1,83 @@
+<!-- 设备文件下载 -->
+<template>
+    <div :class="downLoading ? 'all_disabled' : ''">
+        <el-dialog v-model="dialogVisible" title="文件信息" width="50%" @closed="handleClose">
+            <el-descriptions title="" style="margin: 10px 0" :column="2" :border="true" v-loading="loading">
+                <el-descriptions-item label="文件名称">
+                    {{ fileData?.prjDataPath ? fileData?.prjDataPath : '/' }}
+                </el-descriptions-item>
+                <el-descriptions-item label="文件大小">
+                    {{ fileData?.size ? fileData?.size + '字节' : '/' }}
+                </el-descriptions-item>
+                <el-descriptions-item label="文件时间">
+                    {{ fileData?.startTime ? fileData?.startTime : '/' }}
+                </el-descriptions-item>
+                <el-descriptions-item label="文件校验码">
+                    {{ fileData?.fileCheck ? fileData?.fileCheck : '/' }}
+                </el-descriptions-item>
+            </el-descriptions>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="handleClose">取消</el-button>
+                    <el-button type="primary" @click="handleDownLoad" :loading="downLoading">
+                        {{ downLoading ? '下载中...' : '下载' }}
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, defineExpose, onBeforeUnmount, onUnmounted, defineEmits } from 'vue'
+import { getFileServiceFileOrDir, downLoadDeviceFile } from '@/api/cs-device-boot/fileService.ts'
+const dialogVisible = ref(false)
+const loading = ref(false)
+const downLoading = ref(false)
+const emit = defineEmits(['downLoadFile'])
+const handleClose = () => {
+    dialogVisible.value = false
+}
+//文件信息
+const fileData: any = ref({})
+const open = (row: any, id: any) => {
+    dialogVisible.value = true
+    const obj = {
+        nDid: id,
+        name: row.prjDataPath,
+        type: row.type
+    }
+    loading.value = true
+    getFileServiceFileOrDir(obj).then(res => {
+        if (res.code == 'A0000') {
+            fileData.value = res.data[0]
+            fileData.value.nDid = id
+            loading.value = false
+        }
+    })
+}
+const handleDownLoad = () => {
+    const obj = {
+        nDid: fileData.value.nDid,
+        name: fileData.value.prjDataPath,
+        size: fileData.value.size,
+        fileCheck: fileData.value.fileCheck
+    }
+    downLoading.value = true
+    downLoadDeviceFile(obj).then(res => {
+        if (res.code == 'A0000') {
+            window.open(res.data, '_blank')
+            downLoading.value = false
+        } else if (res.code && res.code != 'A0000') {
+            downLoading.value = false
+        }
+    })
+}
+onMounted(() => {})
+onUnmounted(() => {})
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.all_disabled {
+    pointer-events: none;
+}
+</style>