<template>
|
<div class="">
|
<div class="btn-grp">
|
<el-button
|
type="primary"
|
size="mini"
|
v-if="datas.downloadState == 0"
|
@click="importFiles"
|
>导出到平台</el-button
|
>
|
<!-- 取消下载 -->
|
<el-button
|
type="warning"
|
size="mini"
|
v-if="datas.downloadState == 1"
|
@click="cancelDownload"
|
>终止下载</el-button
|
>
|
</div>
|
<!-- 文件列表 -->
|
<el-table
|
:data="tableData"
|
border
|
@selection-change="handleSelectionChange"
|
style="width: 100%"
|
>
|
<el-table-column type="selection" width="55"> </el-table-column>
|
<el-table-column type="index" label="序号" width="80"></el-table-column>
|
<el-table-column
|
v-for="header in headers"
|
:key="header.prop"
|
:prop="header.prop"
|
:label="header.label"
|
:min-width="header.width"
|
align="center"
|
></el-table-column>
|
<!-- <el-table-column label="操作" width="180" align="center">
|
<template slot-scope="scope">
|
<el-button type="primary" size="mini" @click="edit(scope.row)"
|
>编辑</el-button
|
>
|
<el-button type="danger" size="mini" @click="confirmRemove(scope.row)"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column> -->
|
</el-table>
|
<!-- 底部 -->
|
<!-- 底部分页 -->
|
<el-pagination
|
class="pagess"
|
:current-page="pageCurr"
|
@current-change="handleCurrentChange"
|
:page-size="8"
|
layout="total, prev, pager, next, jumper"
|
:disabled="transfer || flag"
|
:total="datas.fileTotal"
|
></el-pagination>
|
</div>
|
</template>
|
|
<script>
|
import {
|
readFileList,
|
downloadFileList,
|
cancleFileList,
|
JudgeDevFileName,
|
} from "./api";
|
|
import createWs from "@/assets/js/websocket";
|
const WSMixin = createWs("fileDownload");
|
|
export default {
|
name: "",
|
mixins: [WSMixin],
|
props: {
|
infos: {
|
type: Object,
|
required: true,
|
},
|
devId: {
|
type: Number,
|
required: true,
|
},
|
transfer: {
|
type: Boolean,
|
required: true,
|
},
|
},
|
data() {
|
return {
|
existFlags: {},
|
// 是否是socket数据
|
isSocketMessage: false,
|
// 下载中状态更新有延时 所以点了导入后 几秒内用这个状态
|
flag: false,
|
datas: {},
|
multipleSelection: [],
|
pageCurr: 1,
|
headers: [
|
{
|
prop: "fileName",
|
label: "文件名",
|
width: "220",
|
},
|
{
|
prop: "process",
|
label: "进度",
|
width: "120",
|
},
|
{
|
prop: "isExist",
|
label: "是否已导入",
|
},
|
],
|
};
|
},
|
components: {},
|
computed: {
|
canDownload() {
|
return this.isWSOpen;
|
},
|
pageTotal() {
|
// let fileTotal = this.infos.fileTotal;
|
let fileTotal = this.datas.fileTotal;
|
let len = Math.floor(fileTotal / 8);
|
return fileTotal % 8 ? len + 1 : len;
|
},
|
tableData() {
|
let list = [];
|
let datas = this.datas;
|
if (!datas) {
|
return list;
|
}
|
if (datas.downloadState == 0 && this.isSocketMessage) {
|
this.stopSocket();
|
}
|
for (let i = 1, j = datas.fileCount; i <= j; i++) {
|
let idx = i - 1;
|
let fileName = datas["fileName" + i];
|
let process =
|
datas["totalDataBlock" + i] > 0
|
? Math.round(
|
(datas["nowDataBlock" + i] /
|
datas["totalDataBlock" + i]) *
|
10000
|
) / 100
|
: 0;
|
let isExist = this.existFlags[fileName] ? "已导入" : "未导入";
|
list.push({
|
idx,
|
fileName,
|
isExist,
|
process: process + "%",
|
});
|
|
}
|
return list;
|
},
|
},
|
watch: {},
|
methods: {
|
handleCurrentChange(val) {
|
this.pageCurr = val;
|
this.getList();
|
},
|
stopSocket() {
|
console.log("stopscocket");
|
// 关闭socket
|
// this.WSClose();
|
// // 重新初始化socket
|
// this.WSInit();
|
|
this.SOCKET.send(JSON.stringify(123456));
|
this.isSocketMessage = false;
|
this.JudgeDevFileName();
|
},
|
//
|
getList() {
|
let battIndex = this.datas.battIndex;
|
let devId = this.devId;
|
let fileIndex = this.pageCurr - 1;
|
let loading = this.$layer.loading();
|
readFileList(battIndex, devId, fileIndex)
|
.then((res) => {
|
let { code, data, data2, msg } = res.data;
|
if (code && data) {
|
this.$message.success(msg);
|
this.datas = data2;
|
this.JudgeDevFileName();
|
} else {
|
this.$message.error(msg);
|
// this.transferFiles = {};
|
}
|
this.$layer.close(loading);
|
})
|
.catch((err) => {
|
this.$layer.close(loading);
|
console.log(err);
|
});
|
},
|
// 判断文件是否存在服务器上
|
JudgeDevFileName() {
|
let devId = this.devId;
|
let battName = this.datas.battnamelist.split(",")[this.datas.battIndex];
|
let fileNames = [1, 2, 3, 4, 5, 6, 7, 8]
|
.map((v) => this.datas["fileName" + v])
|
.join(",");
|
JudgeDevFileName(battName, devId, fileNames)
|
.then((res) => {
|
let { code, data, data2 } = res.data;
|
if (code && data) {
|
this.existFlags = data2;
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
sendMessage() {
|
// console.log("send ", this.isWSOpen, this.SOCKET?.readyState);
|
if (!this.isWSOpen) {
|
setTimeout(this.sendMessage, 500);
|
return false;
|
}
|
let devId = this.devId;
|
this.SOCKET.send(JSON.stringify(devId));
|
},
|
onWSMessage(res) {
|
res = JSON.parse(res.data);
|
let data = res.data2;
|
// console.log(data, "=====data");
|
this.isSocketMessage = true;
|
this.datas = data;
|
},
|
handleSelectionChange(val) {
|
console.log(val, "selection");
|
this.multipleSelection = val;
|
},
|
importFiles() {
|
let battIndex = this.datas.battIndex;
|
let devId = this.devId;
|
if (!this.multipleSelection.length) {
|
this.$message.error("请选择要操作的文件");
|
return false;
|
}
|
let downloadFlag = this.multipleSelection.map((v) => v.idx).join(",");
|
let loading = this.$layer.loading();
|
this.flag = true;
|
setTimeout(() => {
|
this.flag = false;
|
}, 1000 * 2);
|
downloadFileList(devId, battIndex, downloadFlag)
|
.then((res) => {
|
let { code, data } = res.data;
|
if (code && data) {
|
// console.log(data);
|
this.$message.success("操作成功");
|
this.sendMessage();
|
} else {
|
this.$message.error("操作失败");
|
this.flag = false;
|
}
|
this.$layer.close(loading);
|
})
|
.catch((err) => {
|
this.$layer.close(loading);
|
this.flag = false;
|
console.log(err);
|
});
|
},
|
cancelDownload() {
|
let loading = this.$layer.loading();
|
cancleFileList(this.devId)
|
.then((res) => {
|
let { code, data } = res.data;
|
if (code && data) {
|
this.$message.success("操作成功");
|
} else {
|
this.$message.error("操作成功");
|
}
|
this.$layer.close(loading);
|
})
|
.catch((err) => {
|
this.$layer.close(loading);
|
console.log(err);
|
});
|
},
|
},
|
|
mounted() {
|
if (this.transfer) {
|
this.datas = {};
|
this.sendMessage();
|
} else {
|
this.datas = this.infos;
|
|
this.JudgeDevFileName();
|
}
|
},
|
};
|
</script>
|
|
<style scoped>
|
.btn-grp {
|
padding-bottom: 10px;
|
}
|
</style>
|
