point

package.json

@@ -13,7 +13,8 @@
     "element-ui": "^2.4.5",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
-    "vuex": "^3.6.0"
+    "vuex": "^3.6.0",
+    "xlsx": "^0.16.9"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -37,8 +37,9 @@
           </el-submenu>
           <el-submenu index="7">
             <template slot="title">安全管控</template>
-            <el-menu-item index="/about">人员矩阵</el-menu-item>
-            <el-menu-item index="/about">全局监视</el-menu-item>
+            <el-menu-item index="7-1">人员矩阵</el-menu-item>
+            <el-menu-item index="7-2">全局监视</el-menu-item>
+            <el-menu-item index="/point">point</el-menu-item>
           </el-submenu>
           <el-submenu index="8">
             <template slot="title">报表管理</template>
@@ -62,7 +63,7 @@ export default {
     };
   },
   created() {
-    datainit();
+    // datainit();
   },
   methods: {
     handleSelect(key, keyPath) {},

src/router/index.js

@@ -18,10 +18,12 @@ const routes = [
   {
     path: '/about',
     name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import('../views/About.vue')
+  },
+  {
+    path: '/point',
+    name: 'point',
+    component: () => import('../views/point.vue')
   }
 ]
 

src/views/point.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <el-upload
+      class="upload-demo"
+      action="https://jsonplaceholder.typicode.com/posts/"
+      :on-change="handleChange"
+    >
+      <el-button size="small" type="primary">点击上传</el-button>
+    </el-upload>
+
+    <el-table :data="tableData" style="width:100%">
+      <el-table-column
+        v-for="i in arr"
+        :key="i"
+        :prop="i"
+        :label="i"
+        width="180"
+      >
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+import XLSX from "xlsx";
+export default {
+  data() {
+    return {
+      tableData: [{}],
+      arr: [],
+    };
+  },
+  mounted() {
+    console.log();
+  },
+  methods: {
+    handleChange(file, fileList) {
+      const fileReader = new FileReader();
+      fileReader.onload = (ev) => {
+        try {
+          const data = ev.target.result;
+          const workbook = XLSX.read(data, {
+            type: "binary",
+          });
+          console.log(workbook);
+          let sheet = Object.keys(workbook.Sheets)[0];
+          const json = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]); //获得以第一列为键名的sheet数组对象
+          console.log(json);
+          var arr=[];
+          for (let v in json) {
+              if(v>100){break;}
+            for (let k in Object.keys(json[v])) {
+              if (arr.indexOf(Object.keys(json[v])[k]) == -1) {
+                arr.push(Object.keys(json[v])[k]);
+              }
+            }
+          }
+          this.arr = arr
+          this.$nextTick(() => {
+            this.tableData = json;
+          });
+        } catch (e) {
+          console.log(e);
+        }
+      };
+      fileReader.readAsBinaryString(file.raw);
+    },
+  },
+};
+</script>