逻辑代码如下
downloadExcel() { this.$confirm('将导出为excel文件，确认导出?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) .then(() => { this.export2Excel() }) .catch((e) => { this.$Message.error(e); }) }, // 数据写入excel export2Excel() { import('@/excel/export2Excel').then(excel => { const tHeader = [ '警情编号', '警情性质', '受害人姓名', '受害人账号', '嫌疑人账号', '嫌疑人电话', '涉案总金额', '案发时间', '警情状态' ] // 导出的excel的表头字段 const filterVal = [ 'alarmNo', 'alarmProp', 'informantName', 'informantBankAccount', 'suspectsAccount', 'suspectsMobile', 'fraudAmount', 'crimeTime', 'alarmStatus' ] // 对象属性，对应于tHeader const list = this.$refs.inputTable.data 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 }) }, // 格式转换，直接复制即可 formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => { if (j === 'crimeTime') { return formatDate('YYYY-MM-DD HH:mm:ss', v[j] * 1000) } else if (j === 'alarmProp') { return this.alarmPropOptionsArr[v[j]] } else if (j === 'alarmStatus') { return this.alarmStatusOptionsArr[v[j]] } else { return v[j] } }) ) }参见：https://panjiachen.gitee.io/vue-element-admin-site/zh/feature/component/excel.html
功能实现-数据统计与展示单纯的数据只有存储的价值，而对存储下来的数据进行相应的分析，并加以图表的形式输出，可以更直观地看到数据的变化，体现数据的价值，实现新生代农民工的劳动价值。这边结合echarts对某一个时间段的警情中各部分追查的占比进行了一个统计，除此之外，对该时间段的每月的止付金额进行了一个统计，最终结合扇形和柱形对其进行展示。
翻一翻npm包，笔者物色到了两位包包可以做这件事，考虑到针对本项目对于图表的需求量不是特别大，我也懒得看两套API，就还是用了echarts。
vue-echarts: https://www.npmjs.com/package/vue-echarts
echarts: https://www.npmjs.com/package/echarts
我们会有一个数据接口，前端带上相关的请求参数通过请求/prod-api/statistics/calculate这个接口就能够拿到后端的从数据库处理出来的相关数据，这里因为前后端都是我写的，所以我制定的规则就是，所有的计算都有后端去完成，前端只负责展示，并且约定了相关的参数格式。这样做的一个好处是，省去了前端这边对数据的封装处理。返回的格式如下:
{ "status": 200, "message": "success", "data": { "pieData": [ { "name": "银行查控", "count": 13 }, { "name": "电话查控", "count": 10 }, { "name": "虚拟账号查控", "count": 3 }, { "name": "网站查控", "count": 5 } ], "barData": [ { "name": "2021年1月", "amount": 0 }, { "name": "2021年2月", "amount": 0 }, { "name": "2021年3月", "amount": 0 }, { "name": "2021年4月", "amount": 0 }, { "name": "2021年5月", "amount": 0 }, { "name": "2021年6月", "amount": 0 }, { "name": "2021年7月", "amount": 0 }, { "name": "2021年8月", "amount": 1311601 } ], "totalAmount": 1311601 } }这里以画饼图和柱形图为例，其他的也是类似的，可以参考https://echarts.apache.org/examples/zh/index.html
公共部分npm i echarts -S安装echarts的npm包，然后在相应的文件引入它。
import echarts from 'echarts' 画饼图在template中我们搞一个饼图的div
<div ref="pieChart" />