From e5e65bb50cbfb973f98191993ab559767eff7a53 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期二, 30 七月 2024 17:06:34 +0800
Subject: [PATCH] 页面添加（知识图谱，数据统计，数据分析，站点管理）
---
src/views/visual/analysis/index.vue | 197 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 194 insertions(+), 3 deletions(-)
diff --git a/src/views/visual/analysis/index.vue b/src/views/visual/analysis/index.vue
index 456942e..b6560cf 100644
--- a/src/views/visual/analysis/index.vue
+++ b/src/views/visual/analysis/index.vue
@@ -1,9 +1,160 @@
<template>
- <div class="atlasBox"></div>
+ <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>
-export default {};
+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
+ // 鐢‵ileReader鏉ヨ鍙�
+ let reader = new FileReader()
+ // 閲嶅啓FileReader涓婄殑readAsBinaryString鏂规硶
+ FileReader.prototype.readAsBinaryString = (f) => {
+ let binary = ''
+ let wb // 璇诲彇瀹屾垚鐨勬暟鎹�
+ let outdata // 浣犻渶瑕佺殑鏁版嵁
+ let reader = new FileReader()
+
+ reader.onload = (e) => {
+ // 璇诲彇鎴怳int8Array锛屽啀杞崲涓篣nicode缂栫爜锛圲nicode鍗犱袱涓瓧鑺傦級
+ let bytes = new Uint8Array(reader.result)
+ let length = bytes.byteLength
+ for (let i = 0; i < length; i++) {
+ binary += String.fromCharCode(bytes[i])
+ }
+
+ // 鎺ヤ笅鏉ュ氨鏄痻lsx浜嗭紝鍏蜂綋鍙湅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>
@@ -13,6 +164,46 @@
position: absolute;
margin: 10px;
border-radius: 5px;
- background: yellowgreen;
+ 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>
--
Gitblit v1.9.3