fix

packages/admin/package.json

@@ -19,7 +19,8 @@
     "vant": "^2.12.45",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
-    "wangeditor": "^4.7.11"
+    "wangeditor": "^4.7.11",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

packages/admin/src/utils/xlsxExport.js

@@ -0,0 +1,22 @@
+import * as xlsx from 'xlsx'
+
+export function exportExcelFile (
+  array,
+  width,
+  fileName = '展馆预约记录',
+  sheetName = '表1'
+) {
+  // 设置列宽或默认150
+  const columnWidths = width
+    ? width.map((w, index) => ({ wpx: w }))
+    : Array(Object.keys(array[0]).length).fill({ wpx: 150 })
+  const jsonWorkSheet = xlsx.utils.json_to_sheet(array)
+  jsonWorkSheet['!cols'] = columnWidths
+  const workBook = {
+    SheetNames: [sheetName],
+    Sheets: {
+      [sheetName]: jsonWorkSheet
+    }
+  }
+  return xlsx.writeFile(workBook, `${fileName}.xlsx`)
+}

packages/admin/src/views/tab1Main/one.vue

@@ -22,6 +22,7 @@
         <!-- 照片墙 -->
         <el-form-item label="上传图片：">
           <el-upload
+            multiple
             accept=".png,.jpg,.jpeg"
             :action="baseURL + '/cms/content/upload'"
             :data="{
@@ -40,9 +41,9 @@
             :before-upload="beforethumbUploadImg"
             :on-success="upload_thumb_successImg"
           >
-            <i class="el-icon-plus"></i>
+            <i class="el-icon-plus"><p>按住Ctrl键或框选可多选图片</p></i>
             <div slot="tip" class="el-upload__tip">
-              支持格式：jpg, png，最大支持 20M
+              支持格式：jpg, png，最大支持 20M，最多上传 20 张图片
             </div>
           </el-upload>
         </el-form-item>
@@ -313,6 +314,17 @@ export default {
     padding: 30px 20px;
     height: calc(100% - 70px);
     overflow-y: auto;
+    .el-icon-plus{
+      position: relative;
+      & >p{
+        width: 122px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, 122%);
+        font-size: 14px;
+      }
+    }
   }
   .btnn {
     border-top: 1px solid #d7d7d7;

packages/admin/src/views/tab3/index.vue

@@ -3,7 +3,7 @@
     <div class="insideTop">
       数据统计
       <div class="addBtn">
-        <el-button type="primary" v-show="0">导出</el-button>
+        <el-button type="primary" @click="handleExport">导出</el-button>
       </div>
     </div>
     <div class="obstruct"></div>
@@ -60,6 +60,7 @@ import {
 } from 'echarts/components'
 import { BarChart } from 'echarts/charts'
 import { CanvasRenderer } from 'echarts/renderers'
+import { exportExcelFile } from '../../utils/xlsxExport'
 echarts.use([
   TitleComponent,
   TooltipComponent,
@@ -80,7 +81,11 @@ export default {
         { name: '累计点赞数', num: '0', img: '3.png' },
         { name: '页面分享数', num: '0', img: '4.png' }
       ],
-      dakaData: []
+      dakaData: [],
+      objTemp: {
+        name: [],
+        num: []
+      }
     }
   },
   // 监听属性 类似于data概念
@@ -88,7 +93,18 @@ export default {
   // 监控data中的数据变化
   watch: {},
   // 方法集合
-  methods: {},
+  methods: {
+    handleExport () {
+      const combinedNames = [...this.data1.map(item => item.name), { name: '', num: '' }, ...this.objTemp.name]
+      const combinedNums = [...this.data1.map(item => item.num), { name: '', num: '' }, ...this.objTemp.num]
+      const result = combinedNames.map((name, index) => ({
+        明细: name,
+        访问量: combinedNums[index]
+      }))
+      const width = [...Array(4).fill(150), ...Array(12).fill(130)]
+      exportExcelFile(result, width, '数据统计')
+    }
+  },
   // 生命周期 - 创建完成（可以访问当前this实例）
   async created () {
     // 获取列表
@@ -114,13 +130,10 @@ export default {
     this.data1[1].num = res.data.visitToday
     this.data1[2].num = res.data.starCount
     this.data1[3].num = res.data.shareCount
-    const objTemp = {
-      name: [],
-      num: []
-    }
+
     res.data.village.forEach((v) => {
-      objTemp.name.push(v.name)
-      objTemp.num.push(v.visit)
+      this.objTemp.name.push(v.name)
+      this.objTemp.num.push(v.visit)
     })
     const chartDom = document.getElementById('echaBox')
     const myChart = echarts.init(chartDom)
@@ -146,7 +159,7 @@ export default {
       yAxis: {
         inverse: true,
         type: 'category',
-        data: objTemp.name,
+        data: this.objTemp.name,
         axisTick: {
           // y轴刻度线
           show: false
@@ -159,7 +172,7 @@ export default {
       series: [
         {
           type: 'bar',
-          data: objTemp.num,
+          data: this.objTemp.num,
           itemStyle: {
             normal: {
               label: {
@@ -189,7 +202,7 @@ export default {
   activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
 }
 </script>
-<style lang='less' scoped>
+<style lang="less" scoped>
 .botRowBox::-webkit-scrollbar {
   /*滚动条整体样式*/
   width: 10px; /*高宽分别对应横竖滚动条的尺寸*/