# up export log

package.json

@@ -41,6 +41,7 @@
     "dropzone": "5.2.0",
     "echarts": "3.8.5",
     "element-ui": "2.3.2",
+    "eslint-plugin-vue": "^6.2.2",
     "file-saver": "1.3.3",
     "font-awesome": "4.7.0",
     "js-cookie": "2.2.0",

src/utils/request.js

@@ -6,7 +6,7 @@ import { getToken } from '@/utils/auth'
 // create an axios instance
 const service = axios.create({
   baseURL: process.env.BASE_API, // api的base_url
-  timeout: 5000 // request timeout
+  timeout: 5000 * 2 // request timeout
 })
 
 // request interceptor

src/views/counter/logs.vue

@@ -18,10 +18,12 @@
         />
       </div>
       <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
+      <el-button :disabled="downloadDisabled" class="filter-item export" :loading="downloadLoading" size="small"
+        type="primary" icon="el-icon-document" @click="handleDownload">{{ $t('table.export') }}</el-button>
     </div>
     <el-table
       v-loading="listLoading"
-    :data="deviceCount"
+      :data="logList"
       style="width: 100%"
       :default-sort = "{prop: 'calc_time', order: 'descending'}"
     >
@@ -60,7 +62,7 @@
       <el-table-column
         prop="coordinate"
         :label="$t('counter.coordinate')"
-        min-width="180"
+        min-width="280px"
         :formatter="coordinate">
       </el-table-column>
       <el-table-column
@@ -83,6 +85,7 @@
 <script>
 import { fetchDeviceLogs } from '@/api/counter'
 import waves from '@/directive/waves' // 水波纹指令
+import { parseTime } from '@/utils'
 export default {
   name: 'count',
   directives: {
@@ -90,7 +93,8 @@ export default {
   },
   data() {
     return {
-      deviceCount: [],
+      logList: [],
+      logExportList: [],
       listLoading: true,
       total: 0,
       logsListQuery: {
@@ -101,17 +105,22 @@ export default {
         end: undefined
       },
       pickerOptions: null,
-      dateRange: undefined
+      dateRange: undefined,
+      downloadLoading: false,
+      downloadDisabled: false,
+      filename: undefined
     }
   },
   methods: {
-    getDeviceLogs(params) {
-      fetchDeviceLogs(params).then(response => {
-        this.deviceCount = response.data.results
-        // 页码
-        // this.total = Math.ceil(response.data.count / 8) * 10
+    async getDeviceLogs(params, type = 'table') {
+      await fetchDeviceLogs(params).then(response => {
+        if (type === 'table') {
+          this.logList = response.data.results
+        }
+        if (type === 'export') {
+          this.logExportList = response.data.results
+        }
         this.total = response.data.count
-        // console.log(this.total)
         this.listLoading = false
       })
     },
@@ -142,6 +151,46 @@ export default {
         this.logsListQuery.end = end
       }
       // this.getDeviceLogs(this.logsListQuery)
+    },
+    async handleDownload() {
+      const start = this.logsListQuery.start
+      const end = this.logsListQuery.end
+      if (!start || !end) {
+        this.$message({
+          message: 'Please select the start/end date',
+          type: 'warning'
+        })
+        return
+      }
+      this.downloadLoading = true
+      this.logsListQuery.limit = 10000
+      await this.getDeviceLogs(this.logsListQuery, 'export')
+      this.filename = 'Device Log List ' + String(start).replace(/-/g, '') + '_' + String(end).replace(/-/, '') + '.xlsx'
+
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['Id', 'Time', 'Device ID', 'Device Name', 'Signal', 'Count', 'Energy', 'Coordinate']
+        const filterVal = ['id', 'calc_time', 'device_id', 'device_name', 'signal', 'mosq_count', 'energy', 'coordinate']
+        const list = this.logExportList
+        const data = this.formatJson(filterVal, list)
+        excel.export_json_to_excel({
+          header: tHeader,
+          data,
+          filename: this.filename,
+          autoWidth: this.autoWidth,
+          bookType: this.bookType
+        })
+        this.downloadLoading = false
+        this.logsListQuery.limit = 10
+      })
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => {
+        if (j === 'timestamp') {
+          return parseTime(v[j])
+        } else {
+          return v[j]
+        }
+      }))
     }
   },
   created() {