<template>
|
<div class="dictionaryBox">
|
<My-bread :list="[
|
`${$t('dataManage.dataManage')}`,
|
`${$t('dataManage.dataAnalysis')}`,
|
]"></My-bread>
|
<el-divider />
|
<div class="mainBox">
|
<div class="mainHeader">
|
|
<el-form :model="formInline" :inline="true" class="demo-form-inline">
|
<el-form-item label="上传数据">
|
<el-input v-model="formInline.file" size="small" disabled placeholder="请选择要上传的数据"> <i slot="suffix"
|
class="el-input__icon el-icon-upload2" @click="setFileInsert"></i></el-input>
|
|
|
<input size="small" id="selectDataFile" type="file" style="display: none;" accept=".xlsx,.xls"
|
@change="handleSelectFileChange"></input>
|
|
</el-form-item>
|
<el-form-item>
|
<el-button class="el-button--small" type="primary" size="mini" icon="el-icon-setting"
|
@click="setLoadingTrue">分析</el-button>
|
<el-button class="el-button--small" size="mini" icon="el-icon-refresh" @click="setRefresh">重置</el-button>
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<el-divider />
|
|
<div class="mainContent">
|
<!-- <div > -->
|
<el-carousel v-show="showTable == false" style="height: 100%;">
|
<el-carousel-item v-for=" (item, key) in imgOption" :key="key">
|
|
<el-image class="image" :src="item.url" :preview-src-list="item.srcList">
|
</el-image>
|
</el-carousel-item>
|
</el-carousel>
|
|
|
<el-table v-show="showTable == true" style="w5d" :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>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
</template>
|
|
<script>
|
|
import {
|
scatterplot
|
} from "../../api/api";
|
import MyBread from "../../components/MyBread.vue";
|
import $ from "jquery";
|
import {
|
getTreeData
|
} from "../../utils/treeData.js"
|
import { nextTick } from 'vue';
|
import XLSX from 'xlsx'
|
|
export default {
|
name: "dictionaryManage",
|
components: { MyBread },
|
data() {
|
return {
|
formInline: {
|
file: null,
|
|
},
|
showTable: true,
|
loading: false,
|
imgOption: [
|
|
],
|
tableDataHeader: [],
|
tableData: [],
|
};
|
},
|
watch: {
|
|
|
},
|
created() {
|
|
},
|
methods: {
|
setRefresh() {
|
this.formInline = {
|
file: null,
|
|
}
|
this.showTable = true;
|
this.tableDataHeader = []
|
this.tableData = []
|
},
|
setFileInsert() {
|
$("#selectDataFile").click();
|
},
|
handleSelectFileChange(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 = function (f) {
|
let binary = ''
|
let wb // 读取完成的数据
|
let outdata // 你需要的数据
|
let reader = new FileReader()
|
|
reader.onload = function (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)
|
|
},
|
|
setLoadingTrue() {
|
this.$store.state.setLoading = true;
|
var fs1 = document.getElementById("selectDataFile");
|
if (fs1.files.length == 0) {
|
this.$store.state.setLoading = false;
|
return this.$message("请选择需要上传的数据文件");
|
}
|
setTimeout(() => {
|
this.setFileAnalysis()
|
}, 1000);
|
},
|
|
setFileAnalysis() {
|
var that = this;
|
var fs1 = document.getElementById("selectDataFile");
|
var formFile = new FormData();
|
var fileObj = fs1.files[0]
|
formFile.append("file", fileObj); //加入文件对象
|
$.ajax(
|
BASE_Fast_URL + "/scatterplot",
|
{
|
type: 'POST',
|
data: formFile,
|
async: true,
|
cache: false,
|
contentType: false,
|
processData: false,
|
success: (rs) => {
|
that.showTable = false;
|
that.setShowImage(rs);
|
|
},
|
error: (rs) => {
|
|
},
|
})
|
},
|
setShowImage(res) {
|
this.$store.state.setLoading = false;
|
|
var imgUrl1 = BASE_Fast_URL + '/image?file_name=' + res.image1;
|
var imgUrl2 = BASE_Fast_URL + '/image?file_name=' + res.image2;
|
this.imgOption = [
|
{
|
url: imgUrl1,
|
srcList: [imgUrl1]
|
}, {
|
url: imgUrl2,
|
srcList: [imgUrl2]
|
}
|
]
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.dictionaryBox {
|
height: 98%;
|
width: 98%;
|
padding: 0.5%;
|
|
|
.mainBox {
|
padding-top: 10px;
|
width: 100%;
|
height: calc(100% - 50px);
|
display: flex;
|
flex-direction: column;
|
|
.mainHeader {
|
margin-left: 20px;
|
|
}
|
|
.el-divider--horizontal {
|
margin: 10px 0px;
|
|
}
|
|
.mainContent {
|
flex: 1;
|
|
.image {
|
width: 100%;
|
height: 98%;
|
}
|
|
/deep/.el-carousel__container {
|
height: 100%;
|
|
}
|
|
/deep/.el-carousel__button {
|
background: #409EFF !important
|
}
|
}
|
}
|
|
/deep/.el-button--small {
|
padding: 7px 15px !important;
|
}
|
|
/deep/.el-form-item {
|
margin-bottom: 0px !important;
|
}
|
}
|
</style>
|
