上传离线数据表格渲染

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

@@ -34,3 +34,12 @@ export function getRealTimeTableList() {
     })
 }
 
+
+//离线数据导入
+export function uploadOffLineDataFile(data: any) {
+    return createAxios({
+        url: '/cs-device-boot/portableOfflLog/importEquipment',
+        method: 'POST',
+        data
+    })
+}

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

@@ -514,6 +514,7 @@ const handleClick = async (tab?: any) => {
 //离线数据导入
 const offLineDataImportRef = ref()
 const handleImport = () => {
+    //设备devId&监测点lineId带入组件
     offLineDataImportRef.value && offLineDataImportRef.value.open()
 }
 queryByCode('Device_Type').then(res => {

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

@@ -1,11 +1,15 @@
 <!-- 离线数据导入 -->
 <template>
-    <el-dialog v-model="dialogVisible" title="文件列表" width="60%" draggable>
+    <el-dialog v-model="dialogVisible" title="文件列表" width="70%" draggable>
         <!-- 上传文件列表 -->
         <div class="offline_data">
             <div class="offline_data_btn">
-                <el-button type="primary">开始上传</el-button>
+                <el-button type="primary" @click="handleUpload" ize="small" :disabled="offLineFileList.length == 0">
-                <el-button type="primary">清空文件</el-button>
+                    开始上传
+                </el-button>
+                <el-button type="primary" @click="removeAllFile" size="small" :disabled="offLineFileList.length == 0">
+                    清空文件
+                </el-button>
             </div>
             <div class="offline_data_list">
                 <!-- <el-upload
@@ -26,10 +30,15 @@
                     上传离线数据
                 </el-button>
                 <!-- </el-upload> -->
-                <div v-if="zipFiles.length">
+                <div>
-                    <el-table :data="zipFiles" style="width: 100%" height="280">
+                    <el-table :data="offLineFileList" style="width: 100%" height="280" border stripe>
-                        <el-table-column prop="name" label="文件名" align="left"></el-table-column>
+                        <el-table-column prop="name" label="文件名" align="center"></el-table-column>
-                        <el-table-column prop="status" label="状态" align="left"></el-table-column>
+                        <el-table-column prop="webkitRelativePath" label="文件地址" align="center"></el-table-column>
+                        <el-table-column prop="status" label="状态" align="center" width="100">
+                            <template #default="{ row }">
+                                {{ row.status == 0 ? '等待上传' : '上传成功' }}
+                            </template>
+                        </el-table-column>
                         <el-table-column label="操作" width="100" fixed="right" align="center">
                             <template #default="{ row }">
                                 <!-- <el-button size="small" @click="previewFile(row)">预览</el-button> -->
@@ -53,11 +62,12 @@ import { ref, onMounted } from 'vue'
 import JSZip from 'jszip'
 import { saveAs } from 'file-saver'
 import { ElMessageBox } from 'element-plus'
+import { uploadOffLineDataFile } from '@/api/cs-device-boot/EquipmentDelivery.ts'
 const dialogVisible = ref(false)
 const selectedFile = ref(null)
 
 const loading = ref(false)
-const zipFiles: any = ref([])
+const offLineFileList: any = ref([])
 //上传zip
 const handleFileChange = (file: any, fileList: any) => {
     console.log(fileList, 'fileList555333222')
@@ -65,7 +75,7 @@ const handleFileChange = (file: any, fileList: any) => {
     JSZip.loadAsync(file.raw)
         .then(zip => {
             console.log(file.raw, '++++++++++++hahhahahabvggeiwtei哈哈')
-            zipFiles.value = Object.keys(zip.files).map(name => ({ name }))
+            offLineFileList.value = Object.keys(zip.files).map(name => ({ name }))
             // Object.keys(zip.files).map(entry => {
             //     console.log(entry, 'entryentryentryentryentry')
             //     // return zips.file(entry).then((blob: any) => {
@@ -92,7 +102,7 @@ const handleFileChange = (file: any, fileList: any) => {
         zip.loadAsync(e.target.result).then(zip => {
             console.log(e.target.result, '??????????')
             // 获取压缩包内的文件
-            const files = Object.values(zipFiles.value)
+            const files = Object.values(offLineFileList.value)
                 .map((entry: any) => {
                     if (!entry.dir && entry.name) {
                         // 将压缩包内的文件转换为Blob对象
@@ -129,10 +139,8 @@ const uploadChange = e => {
 }
 const upload = ref()
 const submitUpload = e => {
-    e.preventDefault()
+    // e.preventDefault()
-    // upload.value.submit()
     const input = document.createElement('input')
-    // input["style"] = "background: rgba(255, 255, 255, 0);overflow: hidden;position: fixed;width: 1px;height: 1px;z-index: -1;opacity: 0;";
     input.type = 'file'
     input.setAttribute('allowdirs', 'true')
     input.setAttribute('directory', 'true')
@@ -159,7 +167,8 @@ const submitUpload = e => {
     //     console.log(message, defaultValue) // 可以在这里处理消息和默认值
     //     return null // 始终返回 null 来模拟用户点击“取消”
     // }
-    input.onclick = e => {
+    input.onclick = function (e) {
+        console.log(e)
         e.preventDefault()
     }
     input.onchange = async function (e) {
@@ -172,6 +181,10 @@ const submitUpload = e => {
             console.log(file[i].webkitRelativePath)
         }
         console.log(formData.getAll('files'), '++++++++++++++++')
+        offLineFileList.value = formData.getAll('files')
+        offLineFileList.value.map((item: any) => {
+            item.status = 0
+        })
     }
 }
 
@@ -179,9 +192,19 @@ const previewFile = (file: any) => {
     // 这里可以实现文件预览逻辑，例如图片预览等
     console.log('预览文件:', file.name)
 }
+//清空文件
+const removeAllFile = () => {
+    offLineFileList.value = []
+}
 //移除文件
 const removeFile = async (file: any) => {
     console.log(file, '移除文件指令')
+    const delIndex = offLineFileList.value.findIndex((item: any) => {
+        return item.webkitRelativePath == file.webkitRelativePath && item.name == file.name
+    })
+    console.log(delIndex, '((((((()))))))')
+    offLineFileList.value.splice(delIndex, 1)
+    return
     const zip = new JSZip()
     // 假设有一个zip文件的ArrayBuffer数据
     const zipBuffer = file
@@ -200,6 +223,20 @@ const removeFile = async (file: any) => {
     // 使用FileSaver库保存新的ZIP文件
     saveAs(newZipContent, '5555.zip')
 }
+//开始上传
+const handleUpload = () => {
+    return
+    const obj={
+        devId:'',//设备id
+        lineId:'',//监测点id
+        files:'',//上传文件集
+        paths:''//上传文件路径集
+    }
+    uploadOffLineDataFile(obj).then(res => {
+        if (res.code == 'A0009') {
+        }
+    })
+}
 const open = () => {
     dialogVisible.value = true
 }