feat: 成果预览

ruoyi-ui/package.json

@@ -37,6 +37,8 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
+    "@vue-office/excel": "^1.7.11",
+    "@vue/composition-api": "^1.7.2",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",

ruoyi-ui/src/main.js

@@ -8,6 +8,10 @@ import 'echarts'
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
 
+import '@vue/composition-api'
+import VueOfficeExcel from '@vue-office/excel'
+import '@vue-office/excel/lib/index.css'
+
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/ruoyi.scss' // ruoyi css
 import App from './App'
@@ -63,6 +67,7 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
+Vue.component('VueOfficeExcel', VueOfficeExcel);
 
 Vue.use(directive)
 Vue.use(plugins)

ruoyi-ui/src/router/index.js

@@ -51,6 +51,11 @@ export const constantRoutes = [
     component: () => import('@/views/register'),
     hidden: true
   },
+  {
+    path: '/excel',
+    component: () => import('@/views/excel'),
+    hidden: true
+  },
   {
     path: '/404',
     component: () => import('@/views/error/404'),

ruoyi-ui/src/views/analysis/task/index.vue

@@ -58,7 +58,7 @@
             </span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <el-table-column label="操作" width="220" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
             <template v-if="scope.row.status === 0 || scope.row.status === 3">
               <el-button size="mini" type="text" icon="el-icon-edit" @click="goRealTime(scope.row)">实时动态</el-button>
@@ -66,6 +66,7 @@
             </template>
             <template v-else-if="scope.row.status === 2">
               <el-button size="mini" type="text" icon="el-icon-edit" @click="goRealTime(scope.row)">测流成果</el-button>
+              <el-button size="mini" type="text" icon="el-icon-view" @click="handlePreview(scope.row)">成果预览</el-button>
               <el-button size="mini" type="text" icon="el-icon-edit" @click="handleExport(scope.row)">导出</el-button>
             </template>
           </template>
@@ -143,6 +144,10 @@ export default {
     handleExport(task) {
       window.open(`${process.env.VUE_APP_BASE_API}/achievement/downAchievement?resultId=${task.resultId}`, '_blank')
     },
+    handlePreview(task) {
+      const url = `${process.env.VUE_APP_BASE_API}/achievement/downAchievement?resultId=${task.resultId}`;
+      window.open(`/excel?url=${window.encodeURIComponent(url)}`, '_blank')
+    },
     handleStop(task) {
       this.$modal.confirm('是否确认终止编号为"' + task.taskid + '"的测流任务？').then(function() {
         return taskAction(task.siteId, 0);

ruoyi-ui/src/views/excel.vue

@@ -0,0 +1,33 @@
+<template>
+  <vue-office-excel
+    :src="excel"
+    :options="options"
+  />
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options:{
+          xls: false,       //预览xlsx文件设为false；预览xls文件设为true
+          minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
+          minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
+          widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
+          heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
+          beforeTransformData: (workbookData) => {return workbookData}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
+          transformData: (workbookData) => {return workbookData}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
+        },
+        excel: ''
+      }
+    },
+    mounted() {
+      const { url } = this.$route.query;
+      this.excel = url;
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>