页面添加（知识图谱，数据统计，数据分析，站点管理）

suerprisePlus

2024-07-30 e5e65bb50cbfb973f98191993ab559767eff7a53

 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
            // 用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>
@@ -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>