文件导入功能+页面

严智鑫

2024-03-19 eb87cabfb1b88e0c1bd7ebf091eef5369c7729ad

 Albania_Mes-ui/src/views/home/index.vue

@@ -237,6 +237,74 @@
    height: 15px;
    position: absolute;
}
/*

*/
#fileinput .container {
  width: 800px;
  margin: 0 auto;
}

#fileinput .header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

#fileinput table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid;
}

#fileinput tr,
#fileinput th,
#fileinput td {
  border: 1px solid #000;
  padding: 5px;
}

#fileinput button {
  border: none;
  padding: 5px;
  background-color: #00a297;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 5px;
}

#fileinput tr:nth-child(2n) {
  background-color: #dcdcdc;
}

#fileinput .hide {
  display: none;
}

#fileinput .c1 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 2;
}

#fileinput .c2 {
  background-color: white;
  position: fixed;
  width: 400px;
  height: 300px;
  top: 50%;
  left: 50%;
  z-index: 3;
  margin-top: -150px;
  margin-left: -200px;
}


</style>
<template>
    <el-container>
@@ -253,20 +321,20 @@
            </div>
            <div style="display:flex;justify-content: space-around;width: 95%;margin: 0 auto;">
                <el-button type="primary" @click="showform(1)" :disabled="SoftEmergencyStopState" style="z-index: 999;"
                    :class="SoftEmergencyStopState == true ? 'hide' : ''" style="z-index: 999;">
                    :class="SoftEmergencyStopState == true ? 'hide' : ''">
                    {{ $t('Import order') }}</el-button>

                <el-button type="primary" @click="showform(2)" :disabled="SoftEmergencyStopState" style="z-index: 999;"
                    :class="SoftEmergencyStopState == true ? 'hide' : ''" style="z-index: 999;">
                    :class="SoftEmergencyStopState == true ? 'hide' : ''">
                    {{ $t('Measure') }}</el-button>

                <el-button type="primary" @click="showform(3)" :disabled="SoftEmergencyStopState" style="z-index: 999;"
                    :class="SoftEmergencyStopState == true ? 'hide' : ''" style="z-index: 999;">
                    :class="SoftEmergencyStopState == true ? 'hide' : ''">
                    {{ $t('StorageCage') }}</el-button>
                <el-button type="primary" @click="showform(4)" :disabled="SoftEmergencyStopState" style="z-index: 999;"
                    :class="SoftEmergencyStopState == true ? 'hide' : ''" style="z-index: 999;">
                    :class="SoftEmergencyStopState == true ? 'hide' : ''">
                    {{ $t('Task queue') }}</el-button>
                    

            </div>
            <div style="display: flex;align-items: center;">
                <div class="blocks" style="position: relative;width: 100%;">
@@ -325,6 +393,60 @@

        </el-main>
        <el-dialog :visible.sync="Importorder" :title="$t('Import order')" top="5vh">
            <!--文件导入数据页面-->
            <div id="fileinput" class="container">
                <div class="header">
                    <div class="btn">
                        <button @click="AllAdd">保存</button>
                    </div>
                    <div class="inp">
                        <input type="file" id="uploadExcel" multiple @change="Change" />
                    </div>
                </div>
                <table id="table">
                    <thead>
                        <tr>
                            <th>Customer</th>
                            <th>order</th>
                            <th>base</th>
                            <th>height</th>
                            <th>thickness</th>
                            <th>films</th>
                            <th>quantity</th>
                            <th>tier</th>
                            <th>matching</th>
                            <th>glasstype</th>
                            <th>productname</th>
                        </tr>
                    </thead>
                    <tbody style="text-align: center">
                        <tr v-for="item in dataList" :key="item.id">
                            <!-- <td>{{ item[0] }}</td>
                            <td>{{ item[1] }}</td>
                            <td>{{ item[2] }}</td>
                            <td>{{ item[3] }}</td>
                            <td>{{ item[4] }}</td>
                            <td>{{ item[5] }}</td>
                            <td>{{ item[6] }}</td>
                            <td>{{ item[7] }}</td>
                            <td>{{ item[8] }}</td>
                            <td>{{ item[9] }}</td>
                            <td>{{ item[10] }}</td> -->
                            <td>{{ item.Customer }}</td>
                            <td>{{ item.order }}</td>
                            <td>{{ item.base }}</td>
                            <td>{{ item.height }}</td>
                            <td>{{ item.thickness }}</td>
                            <td>{{ item.films }}</td>
                            <td>{{ item.quantity }}</td>
                            <td>{{ item.tier }}</td>
                            <td>{{ item.matching}}</td>
                            <td>{{ item.glasstype }}</td>
                            <td>{{ item.productname }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="Measure" :title="$t('Measure')" top="5vh"><!--测量页面-->
@@ -332,16 +454,19 @@
            <div>
                <!--功能-->
                <div>
                        <el-button type="primary" @click="ManualMatching()" :disabled="SoftEmergencyStopState" style="z-index: 999;">
                    人工匹配</el-button>
                    
                    <el-button type="primary" @click="ManualMatching()" :disabled="SoftEmergencyStopState"
                        style="z-index: 999;">人工匹配</el-button>
                    <el-button type="primary" @click="ManualTake()" :disabled="SoftEmergencyStopState"
                        style="z-index: 999;">人工匹配</el-button>
                </div>
                <!--显示-->
                <div style="width:100%;height: 600px;border: 1px solid black;">
                    <!--玻璃图-->
                    <div
                        style="top:0;bottom: 0;left: 0;right: 0;margin: auto;position:absolute;width: 100px;height: 200px;background-color: aqua;line-height: 200px;text-align: center;">
                        100*200
                <div style="width:1000px;height: 720px;border: 2px solid #d1d1d1;margin: auto auto;">
                    <!--玻璃图  #81b337-->
                    <div :style="'top:10px;bottom: 10px;left: 10px;right: 10px;margin: auto;position:absolute;width:'
                + (this.LastQueue.glasswidth / 25 * 7) + 'px;height:'
                + (this.LastQueue.glassheight / 25 * 7) + 'px;line-height: '
                + (this.LastQueue.glassheight / 25 * 7) + 'px;background-color: #93d2f3;text-align: center;'">
                        {{ this.LastQueue.glasswidth }}*{{ this.LastQueue.glassheight }}
                    </div>

                </div>
@@ -410,7 +535,7 @@
                </el-table-column>
                <el-table-column prop="state" :label="$t('Task State')">
                    <template slot-scope='scope'>
                        {{ scope.row.state >= 0?scope.row.state == 0 ? $t('Start') : $t('Stop'):"" }}
                        {{ scope.row.state >= 0 ? scope.row.state == 0 ? $t('Start') : $t('Stop') : "" }}
                    </template>
                </el-table-column>
                <el-table-column prop="method" :label="$t('Task Method')">
@@ -476,12 +601,14 @@
} from "../../api/home";


import LanguageMixin from '../../lang/LanguageMixin'
import LanguageMixin from '../../lang/LanguageMixin';
import * as XLSX from "../../../node_modules/xlsx/xlsx.mjs";
let socket;
export default {
    name: "Home",
    data() {
        return {
            dataList: [],
            tableData1: [],
            Measuermode: false,
            confirm1: false,
@@ -576,7 +703,8 @@
            DeviceList: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            GlassIdList: [],
            Scanningmethod: true,
            CurrrentGlassId: ""
            CurrrentGlassId: "",
            LastQueue: {}
        };
    },
    created() {
@@ -639,6 +767,7 @@
                    this.alarm = obj.alarmmg[0];

                    this.tableData1 = obj.OrderTask[0];
                    this.LastQueue = obj.LastQueue[0];


                    //是否允许出片
@@ -736,7 +865,7 @@
                UpdateQueue(this.StorageCageAddInfo[index]).then(res => {
                    if (res.data.message == 200) {
                        this.$message.success(this.$t('Operation successful'));
                    }else{
                    } else {
                        this.$message.error(this.$t('Operation failed'));
                    }
                });
@@ -854,9 +983,53 @@
        },
        //人工匹配
        ManualMatching() {
            this.StorageCageAdd=true;
            this.StorageCageAdd = true;
        },
        //人工拿走
        ManualTake() {

        },
        Change(event) {
            // 获取到文件夹
            let fileList = event.target.files;
            // 如果数据不为空
            if (fileList) {
                // FileReader是一种异步文件读取机制，结合input:file可以很方便的读取本地文件。
                let reader = new FileReader();
                let file = fileList[0]; //拿到第一条数据
                reader.readAsBinaryString(file)// 将文件以二进制形式读入页面
                let _this = this //把data里的数据赋值给新的变量
                // wb:wordbook 工作表  
                reader.addEventListener("load", function (e) {
                    
                    var data = e.target.result; //读取成功后result中的数据
                    var wb = XLSX.read(data, { type: "binary" });  
                    let sheetName = wb.SheetNames[0]; //是获取Sheets中第一个Sheet的名字
                    let sheets = wb.Sheets[sheetName];
                    let dataList2 = JSON.stringify(XLSX.utils.sheet_to_json(sheets));
                    let dataList3 = (JSON.parse(dataList2));
                    _this.dataList = dataList3;//赋值
                    //console.log(dataList2);  
                    console.log(dataList3);

                })
            }
        },
        Add() {
            
        },
        Hide() {
            
        },
        AllAdd() {
            //添加数据进后台
            console.log(this.dataList);
        },
        del() {
            
        }


    }
}
</script>