修改下载文件

.env.development

@@ -2,6 +2,6 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = 'http://192.168.3.177:8080/api'
+VUE_APP_BASE_API = 'https://53670u39m2.goho.co/api'
 VUE_APP_WS = 'ws://192.168.3.177:8080/ws'
 VUE_APP_VIDEO = 'ws://192.168.3.177:8082/ws'

package-lock.json

@@ -33,6 +33,7 @@
         "tui-editor": "1.3.3",
         "vue": "2.6.10",
         "vue-count-to": "1.0.13",
+        "vue-loading-easy": "^1.0.0",
         "vue-router": "3.0.2",
         "vue-splitpane": "1.0.4",
         "vuedraggable": "2.20.0",
@@ -21481,6 +21482,14 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/vue-loading-easy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vue-loading-easy/-/vue-loading-easy-1.0.0.tgz",
+      "integrity": "sha512-PVQqibYsjNz68KY/L5BzJL6Jw0ZbleONQTA9UF/NPVrDdiCisPOpx4/UC3od/+3qQ7NLgBlWh54cE0h/2ePIuQ==",
+      "dependencies": {
+        "vue": "^2.4.4"
+      }
+    },
     "node_modules/vue-router": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.2.tgz",
@@ -40211,6 +40220,14 @@
         }
       }
     },
+    "vue-loading-easy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vue-loading-easy/-/vue-loading-easy-1.0.0.tgz",
+      "integrity": "sha512-PVQqibYsjNz68KY/L5BzJL6Jw0ZbleONQTA9UF/NPVrDdiCisPOpx4/UC3od/+3qQ7NLgBlWh54cE0h/2ePIuQ==",
+      "requires": {
+        "vue": "^2.4.4"
+      }
+    },
     "vue-router": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.2.tgz",

package.json

@@ -39,6 +39,7 @@
     "tui-editor": "1.3.3",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
+    "vue-loading-easy": "^1.0.0",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",

src/api/downfile.js

@@ -0,0 +1,26 @@
+import request from '@/utils/requestfile'
+
+//导出数据列表
+export function exportList(data) {
+  return request({
+    url: '/export/list',
+    method: 'post',
+    data
+  })
+}
+//生成导出文件
+export function exportFile(data) {
+  return request({
+    url: '/log/export',
+    method: 'post',
+    data
+  })
+}
+//删除数据导出列表
+export function deleteExportData(id) {
+  return request({
+    url: `/export/delete/${id}`,
+    method: 'post',
+    data
+  })
+}

src/api/log.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import * as requestfile from '@/utils/requestfile'
 
 //日志数据字典
 export function logModel(data) {
@@ -50,7 +51,7 @@ export function bmsList(data) {
 }
 //导出数据列表
 export function exportList(data) {
-  return request({
+  return requestfile({
     url: '/export/list',
     method: 'post',
     data
@@ -66,35 +67,9 @@ export function exportFile(data) {
 }
 //删除数据导出列表
 export function deleteExportData(id) {
-  return request({
+  return requestfile({
     url: `/export/delete/${id}`,
     method: 'post',
     data
   })
 }
-//导出结果
-export function RecordFile(Fileurl,fileName){
-  return request({
-    url: Fileurl,
-    method: 'get',
-    responseType: 'blob',
-  }).then(data=>{
-    console.log("RecordFile then", data)
-    if (!data) return alert('文件下载失败');
-    // let fileName = '统计表计';
-    if (typeof window.navigator.msSaveBlob !== 'undefined') {
-        // window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xlsx');
-        window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName);
-    } else {
-        let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }));
-        let link = document.createElement('a');
-        link.style.display = 'none';
-        link.href = url;
-        link.setAttribute('download', fileName);
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link); //下载完成移除元素
-        window.URL.revokeObjectURL(url); //释放掉blob对象
-    }
-  })
-}

src/main.js

@@ -13,6 +13,7 @@ import './utils/error-log' // error log
 import * as filters from './filters' // global filters
 import * as echarts from 'echarts'
 import moment from "moment"
+import Loading from 'vue-loading-easy'
 //表格宽度自适应
 import AFTableColumn from 'af-table-column'
 
@@ -20,6 +21,7 @@ Vue.use(Element, {
   size: Cookies.get('size') || 'medium', // set element-ui default size
 })
 Vue.use(AFTableColumn)
+Vue.use(Loading)
 // register global utility filters
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])

src/utils/requestfile.js

@@ -0,0 +1,71 @@
+import axios from 'axios'
+import { Message } from 'element-ui'
+import store from '@/store'
+import { tansParams } from '@/utils/zk'
+const service = axios.create({
+  // baseURL: httpurl.devServer.proxy['/api'].target+'/api',
+  baseURL:process.env.VUE_APP_BASE_API,
+  timeout:3600000
+})
+// request interceptor
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+service.interceptors.request.use(
+  config => {
+    if (config.method === 'get' && config.params) {
+      let url = config.url + '?' + tansParams(config.params)
+      url = url.slice(0, -1)
+      config.params = {}
+      config.url = url
+    }
+    if (store.getters.token) {
+      config.headers['Authorization'] = store.getters.token
+    }
+    return config
+  },
+  error => {
+    console.log(error)
+    return Promise.reject(error)
+  }
+)
+// response interceptor
+service.interceptors.response.use(
+  response => {
+    const res = response.data
+    if (res.code === 1) {
+      Message({
+        message: res.msg || 'Error',
+        type: 'error',
+        duration: 5 * 1000
+      })
+    }else if(res.code === -3){
+      Message({
+        message: '登录过期!',
+        type: 'error',
+      })
+      window.location.href = '/login'
+    }
+     else {
+      return res
+    }
+  },
+
+  error => {
+    console.log('err' + error)
+    let { message } = error
+    if (message == 'Network Error') {
+      message = '后端接口连接异常'
+    } else if (message.includes('timeout')) {
+      message = '系统接口请求超时'
+    } else if (message.includes('Request failed with status code')) {
+      message = '系统接口' + message.substr(message.length - 3) + '异常'
+    }
+    Message({
+      message: message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/views/manage-log/data-export.vue

@@ -27,13 +27,13 @@
         <div class="charge-table">
             <div class="charge-table-bottom">
                 <el-table :data="datalist" :header-cell-style="{
-                    background: '#1d283e',
-                    borderColor: '#2f3c86',
-                    height: '36px',
-                    lineHeight: '36px',
-                    color: 'white',
-                    fontSize: '15px',
-                }" stripe fit :height="tableheight" style="width: 100%">
+                        background: '#1d283e',
+                        borderColor: '#2f3c86',
+                        height: '36px',
+                        lineHeight: '36px',
+                        color: 'white',
+                        fontSize: '15px',
+                    }" stripe fit :height="tableheight" style="width: 100%">
                     <el-table-column prop="exportName" label="导出任务名称" />
                     <el-table-column label="日志类型">
                         <template slot-scope="scope">
@@ -45,7 +45,8 @@
                     <el-table-column prop="exporterName" label="创建人" />
                     <el-table-column label="状态" width="400">
                         <template slot-scope="scope">
-                            <span v-if="scope.row.exportStatus !== 2">{{ scope.row.exportStatus === 0 ? '完成' : '失败' }}</span>
+                            <span v-if="scope.row.exportStatus !== 2">{{ scope.row.exportStatus === 0 ? '完成' : '失败'
+                            }}</span>
                             <span v-else><el-progress :percentage="scope.row.exportProgress"></el-progress></span>
                         </template>
                     </el-table-column>
@@ -54,17 +55,19 @@
                         <template slot-scope="scope">
                             <span v-if="scope.row.exportStatus === 0">
                                 <el-button type="primary" class="handle" size="small"
-                                @click="handleDownFile(scope.row.exportFilePath,scope.row.exportName)">下载</el-button>
+                                    @click="handleDownFile(scope.row.exportFilePath, scope.row.exportName)">下载</el-button>
                             </span>
                             <span v-if="scope.row.exportStatus !== 2">
                                 <el-button type="primary" class="handle" size="small"
-                                @click="handleDelete(scope.row.id)">删除</el-button>
+                                    @click="handleDelete(scope.row.id)">删除</el-button>
                             </span>
-                            
+
                             <span v-else>— —</span>
                         </template>
                     </el-table-column>
                 </el-table>
+                <vue-loading :isLoading="showTotip" type="loading3" text="下载中..." color="lightgreen"
+                    scale="1"></vue-loading>
             </div>
             <div class="pageblock">
                 <el-pagination :current-page="queryParams.page" :page-sizes="[10, 20, 30, 40]"
@@ -77,33 +80,36 @@
 
 <script>
 import "./log.scss";
-import { exportList,deleteExportData,RecordFile } from "@/api/log";
+import { exportList, deleteExportData } from "@/api/downfile";
+import request from '@/utils/requestfile';
 export default {
     name: "DataExport",
     components: {},
     data() {
         return {
+            //下载提示框
+            showTotip: false,
             // 查询时间数组
             dateTime: "",
             // 导出类型
             LogTypeArr: [
                 {
-                    id:1,
-                    value:'机器人',
+                    id: 1,
+                    value: '机器人',
                 },
                 {
-                    id:2,
-                    value:'充电机',
+                    id: 2,
+                    value: '充电机',
                 },
                 {
-                    id:3,
-                    value:'BMS',
+                    id: 3,
+                    value: 'BMS',
                 }
             ],//日志类型
             // 数据列表
             datalist: [],
-            exportLogType:undefined,
-            exporterId:0, //导出人id
+            exportLogType: undefined,
+            exporterId: 0, //导出人id
             // 查询参数
             queryParams: {
                 page: 1, // 当前页
@@ -114,13 +120,13 @@ export default {
                 endTime: undefined,
                 orderByField: 'createTime', // 排序字段
                 orderByWays: 'desc',// 排序方式
-                exporterId:this.$store.getters.userId
+                exporterId: this.$store.getters.userId
             },
             total: 0, // 总条数，
             tableheight: 0, // 表格高度设置
             loading: false,
             heightTimer: false,
-            exportTimer:null,//定时器
+            exportTimer: null,//定时器
         };
     },
     watch: {
@@ -136,7 +142,7 @@ export default {
             }
         },
     },
-    destroyed(){
+    destroyed() {
         this.clearListTimer()
     },
     mounted() {
@@ -149,15 +155,15 @@ export default {
     },
     methods: {
         //定时请求导出列表
-        setListTimer(){
+        setListTimer() {
             this.getExportList()
-            this.exportTimer=setInterval(() => {
+            this.exportTimer = setInterval(() => {
                 this.getExportList()
             }, 1000);
         },
         //清除定时器
-        clearListTimer(){
-            if(this.exportTimer){
+        clearListTimer() {
+            if (this.exportTimer) {
                 clearInterval(this.exportTimer)
             }
         },
@@ -179,7 +185,7 @@ export default {
         dialogClose() { },
         //获取换电记录列表
         getExportList() {
-            exportList(this.queryParams).then( res=> {
+            exportList(this.queryParams).then(res => {
                 this.datalist = res.data.list;
                 this.total = res.data.total;
             });
@@ -211,28 +217,67 @@ export default {
             window.location.reload();
         },
         //删除导出任务列表
-        handleDelete(id){
+        handleDelete(id) {
             this.$confirm('删除数据将丢失,请确认是否删除', '确认删除', {
                 confirmButtonText: '确认',
                 cancelButtonText: '取消',
                 type: 'warning'
             })
-            .then(async() => {
-            await deleteExportData(id)
-            this.$message({
-                type: 'success',
-                message: '删除成功！'
-            })
-            this.getExportList()
-            })
-            .catch(err => { console.error(err) })
+                .then(async () => {
+                    await deleteExportData(id)
+                    this.$message({
+                        type: 'success',
+                        message: '删除成功！'
+                    })
+                    this.getExportList()
+                })
+                .catch(err => { console.error(err) })
         },
         //下载文件
-        async handleDownFile(url,fileName){
-            //window.location.href=url
-            const fileDownName=fileName+'_'+(new Date().getTime())
-            const resUrl=await RecordFile(url, fileDownName)
-        }
+        async handleDownFile(url, fileName) {
+            this.showTotip = true;
+            // const execlUrl = process.env.VUE_APP_BASE_API + "/excel/" + url;
+            const fileDownName = fileName + '_' + (new Date().getTime())
+            const resUrl = await this.RecordFile(url, fileDownName)
+        },
+        RecordFile(Fileurl, fileName) {
+            setTimeout(() => {
+                this.showTotip = false
+            }, 5000)
+            //接口方法
+            return request({
+                url: Fileurl,
+                method: "get",
+                responseType: "blob",
+            }).then((data) => {
+                console.log("RecordFile then", data);
+                if (!data) {
+                    this.showTotip = false
+                    return alert("文件下载失败");
+                }
+                // let fileName = '统计表计';
+                if (typeof window.navigator.msSaveBlob !== "undefined") {
+                    // window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xlsx');
+                    window.navigator.msSaveBlob(
+                        new Blob([data], { type: "application/vnd.ms-excel" }),
+                        fileName
+                    );
+                } else {
+                    let url = window.URL.createObjectURL(
+                        new Blob([data], { type: "application/vnd.ms-excel" })
+                    );
+                    let link = document.createElement("a");
+                    link.style.display = "none";
+                    link.href = url;
+                    link.setAttribute("download", fileName);
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link); //下载完成移除元素
+                    window.URL.revokeObjectURL(url); //释放掉blob对象
+                }
+                this.showTotip = false
+            });
+        },
     },
 };
 </script>