<template>
|
<div class="atlasBox" v-loading="gLoading">
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
<el-form-item label="上传数据">
|
<el-input :placeholder="placeholder" v-model="formInline.file">
|
|
<i slot="suffix" @click="onClickInputFile" class="el-input__icon el-icon-upload2"></i>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button type="primary" size="small" plain icon="el-icon-setting" @click="onSubmit">分 析</el-button>
|
<el-button type="info" size="small" plain icon="el-icon-refresh" @click="onRefresh">重 置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<input size="small" id="fromFile" type="file" style="display: none;" accept=".xlsx,.xls"
|
@change="onFileInputChange"></input>
|
<el-divider />
|
<div class="atlasContnt">
|
<el-table v-show="showTable" height=" calc(100% - 1px)" style=" width:100%" :data="tableData">
|
<el-table-column v-for="(item, index) in tableDataHeader" :key="index" align="center" :prop="item.name
|
" :label="item.name"></el-table-column>
|
</el-table>
|
|
<el-carousel v-show="!showTable" style="height: 100%;" :interval="5000" arrow="always">
|
<el-carousel-item v-for="(item, key) in carouseList" :key="key">
|
<el-image class="image" :src="item.src" :preview-src-list="[item.src]">
|
</el-image>
|
</el-carousel-item>
|
</el-carousel>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import XLSX from 'xlsx'
|
import $ from "jquery";
|
export default {
|
data() {
|
return {
|
formInline: {
|
file: ''
|
},
|
placeholder: "请选择要上传的数据",
|
selectFileType: ".xlsx,.xls",
|
tableData: [],
|
tableDataHeader: [],
|
gLoading: false,
|
showTable: true,
|
carouseList: [],
|
}
|
},
|
methods: {
|
onSubmit() {
|
var fs = document.getElementById("fromFile");
|
if (fs.files.length == 0) {
|
this.$store.state.setLoading = false;
|
return this.$message("请选择需要上传的数据文件");
|
}
|
this.gLoading = true;
|
var formFile = new FormData();
|
var fileObj = fs.files[0]
|
formFile.append("file", fileObj); //加入文件对象
|
document.getElementById('fromFile').vlaue = "";
|
this.formInline.file = ''
|
const that = this;
|
$.ajax(
|
config.pyServices + "/scatterplot",
|
{
|
type: 'POST',
|
data: formFile,
|
async: true,
|
cache: false,
|
contentType: false,
|
processData: false,
|
success: (rs) => {
|
that.showTable = false;
|
that.setShowImage(rs);
|
that.gLoading = false
|
|
},
|
error: (rs) => {
|
that.gLoading = false
|
},
|
})
|
},
|
onRefresh() {
|
this.gLoading = false;
|
this.showTable = true;
|
this.carouseList = [];
|
this.tableData = [];
|
this.tableDataHeader = [];
|
document.getElementById('fromFile').vlaue = "";
|
this.formInline.file = ''
|
},
|
setShowImage(response) {
|
|
const std = [];
|
for (var key in response) {
|
std.push({
|
src: config.pyServices + '/image?file_name=' + response[key]
|
})
|
}
|
this.carouseList = std
|
},
|
onClickInputFile() {
|
document.getElementById('fromFile').click();
|
},
|
onFileInputChange(event) {
|
|
var that = this
|
// 拿取文件对象
|
let f = event.currentTarget.files[0]
|
|
this.formInline.file = f.name
|
// 用FileReader来读取
|
let reader = new FileReader()
|
// 重写FileReader上的readAsBinaryString方法
|
FileReader.prototype.readAsBinaryString = (f) => {
|
let binary = ''
|
let wb // 读取完成的数据
|
let outdata // 你需要的数据
|
let reader = new FileReader()
|
|
reader.onload = (e) => {
|
// 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
|
let bytes = new Uint8Array(reader.result)
|
let length = bytes.byteLength
|
for (let i = 0; i < length; i++) {
|
binary += String.fromCharCode(bytes[i])
|
}
|
|
// 接下来就是xlsx了，具体可看api
|
wb = XLSX.read(binary, {
|
type: 'binary'
|
})
|
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
|
var str = outdata[0];
|
var std = [];
|
for (var key in str) {
|
|
std.push({ name: key })
|
|
}
|
that.tableDataHeader = std
|
that.tableData = outdata
|
}
|
|
reader.readAsArrayBuffer(f)
|
}
|
reader.readAsBinaryString(f)
|
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.atlasBox {
|
width: calc(100% - 20px);
|
height: calc(100% - 20px);
|
position: absolute;
|
margin: 10px;
|
border-radius: 5px;
|
display: flex;
|
flex-direction: column;
|
|
// background: yellowgreen;
|
::v-deep.el-divider--horizontal {
|
margin: 0px;
|
margin-bottom: 10px;
|
}
|
|
::v-deep.el-form-item {
|
margin-bottom: 15px;
|
margin-top: 10px;
|
}
|
|
.atlasContnt {
|
flex: 1;
|
|
.image {
|
width: 100%;
|
height: 95%;
|
}
|
|
::v-deep.el-carousel__container {
|
height: 100%;
|
|
}
|
|
::v-deep.el-carousel__button {
|
background: #409EFF !important
|
}
|
|
// background: skyblue;
|
// ::v-deep.el-carousel__container {
|
// height: 100%;
|
|
// }
|
|
// ::v-deep.el-carousel__button {
|
// background: #409EFF !important
|
// }
|
}
|
}
|
</style>
|
