退件统计
Showing
4 changed files
with
171 additions
and
66 deletions
src/api/tjfx.js
0 → 100644
| 1 | /* | ||
| 2 | * @Description: 信息备案 | ||
| 3 | * @Autor: | ||
| 4 | * @LastEditTime: 2023-09-11 11:25:22 | ||
| 5 | */ | ||
| 6 | |||
| 7 | import request from '@/utils/request' | ||
| 8 | let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl')) | ||
| 9 | |||
| 10 | /** | ||
| 11 | * @description: cstj | ||
| 12 | * @author: | ||
| 13 | * @param params | ||
| 14 | */ | ||
| 15 | export function cstj (params) { | ||
| 16 | return request({ | ||
| 17 | url: SERVER.SERVERAPI + '/rest/tjfx/xn/cstj?startAt='+params.startAt + '&endAt=' + params.endAt, | ||
| 18 | method: 'post' | ||
| 19 | }) | ||
| 20 | } | ||
| 21 | |||
| 22 | /** | ||
| 23 | * @description: exportCstj | ||
| 24 | * @author: | ||
| 25 | * @param params | ||
| 26 | */ | ||
| 27 | export function exportCstj (params) { | ||
| 28 | return request({ | ||
| 29 | url: SERVER.SERVERAPI + '/rest/tjfx/xn/exportCstj?startAt='+params.startAt + '&endAt=' + params.endAt, | ||
| 30 | method: 'post', | ||
| 31 | responseType: 'blob' | ||
| 32 | }) | ||
| 33 | } | ||
| 34 | |||
| 35 | /** | ||
| 36 | * @description: tjtj | ||
| 37 | * @author: | ||
| 38 | * @param data | ||
| 39 | */ | ||
| 40 | export function tjtj (data) { | ||
| 41 | return request({ | ||
| 42 | url: SERVER.SERVERAPI + '/rest/tjfx/xn/tjtj', | ||
| 43 | method: 'post', | ||
| 44 | data | ||
| 45 | }) | ||
| 46 | } | ||
| 47 | |||
| 48 | /** | ||
| 49 | * @description: exportTjtj | ||
| 50 | * @author: | ||
| 51 | * @param data | ||
| 52 | */ | ||
| 53 | export function exportTjtj (data) { | ||
| 54 | return request({ | ||
| 55 | url: SERVER.SERVERAPI + '/rest/tjfx/xn/exportTjtj', | ||
| 56 | method: 'post', | ||
| 57 | data, | ||
| 58 | responseType: 'blob' | ||
| 59 | }) | ||
| 60 | } |
| ... | @@ -50,6 +50,7 @@ | ... | @@ -50,6 +50,7 @@ |
| 50 | </template> | 50 | </template> |
| 51 | <script> | 51 | <script> |
| 52 | import * as echarts from "echarts"; | 52 | import * as echarts from "echarts"; |
| 53 | import {cstj, exportCstj} from "@/api/tjfx.js"; | ||
| 53 | import XLSX from "xlsx"; | 54 | import XLSX from "xlsx"; |
| 54 | export default { | 55 | export default { |
| 55 | components: {}, | 56 | components: {}, |
| ... | @@ -69,50 +70,62 @@ export default { | ... | @@ -69,50 +70,62 @@ export default { |
| 69 | chooseIndex: 0, // 日期快捷选择项索引 | 70 | chooseIndex: 0, // 日期快捷选择项索引 |
| 70 | dateRange: [], // 自定义列表 - 日期范围 | 71 | dateRange: [], // 自定义列表 - 日期范围 |
| 71 | queryForm: {}, | 72 | queryForm: {}, |
| 72 | data1: [12, 10, 15, 12, 15, 19, 15], | 73 | data1: [], |
| 73 | data2: [1, 2, 2, 3, 2, 3, 2], | 74 | data2: [], |
| 74 | data3: [], | 75 | data3: [], |
| 76 | selectDate : { | ||
| 77 | startAt:'2020-01-03 02:57:57', | ||
| 78 | endAt:'2025-01-03 02:57:57' | ||
| 79 | }, | ||
| 75 | xAxisData: [ | 80 | xAxisData: [ |
| 76 | "赵龙龙", | 81 | |
| 77 | "刘刚", | ||
| 78 | "任启亮", | ||
| 79 | "梁亚博", | ||
| 80 | "李含", | ||
| 81 | "周路", | ||
| 82 | ], | 82 | ], |
| 83 | }; | 83 | }; |
| 84 | }, | 84 | }, |
| 85 | mounted() { | 85 | mounted() { |
| 86 | this.setdata(); | 86 | this.setdata(); |
| 87 | |||
| 88 | }, | ||
| 89 | methods: { | ||
| 90 | |||
| 91 | cstj () { | ||
| 92 | cstj(this.selectDate).then(res => { | ||
| 93 | if (res.code == 200) { | ||
| 94 | let dataSource = res.result; | ||
| 95 | if (dataSource != null) { | ||
| 96 | this.xAxisData = dataSource.map(item => item.assignee) | ||
| 97 | this.data1 = dataSource.map(item => item.total) | ||
| 98 | this.data2 = dataSource.map(item => item.count) | ||
| 99 | this.data3 = dataSource.map(item => item.cumulativeTimeout) | ||
| 100 | } | ||
| 101 | console.log(this.xAxisData) | ||
| 102 | console.log(this.data1) | ||
| 103 | console.log(this.data2) | ||
| 104 | console.log(this.data3) | ||
| 87 | // 创建一个 ECharts 实例 | 105 | // 创建一个 ECharts 实例 |
| 88 | this.chart = echarts.init(this.$refs.chart); | 106 | this.chart = echarts.init(this.$refs.chart); |
| 89 | // 在 ECharts 实例中配置图表 | 107 | // 在 ECharts 实例中配置图表 |
| 90 | this.chart.setOption(this.getOption()); | 108 | this.chart.setOption(this.getOption()); |
| 91 | this.chooseDateQuick(0); | 109 | } |
| 110 | }) | ||
| 92 | }, | 111 | }, |
| 93 | methods: { | 112 | |
| 94 | setdata() { | 113 | setdata() { |
| 95 | for (let i = 0; i < this.data1.length; i++) { | 114 | this.chooseDateQuick(7) |
| 96 | let sum = (this.data2[i] / this.data1[i]) * 100; | 115 | this.cstj() |
| 97 | this.data3.push(Number(sum).toFixed(0)); | ||
| 98 | } | ||
| 99 | }, | 116 | }, |
| 100 | // 导出 | 117 | // 导出 |
| 101 | derive() { | 118 | derive() { |
| 102 | this.exdata = [["受理人员", "收件数", "退件数", "推荐率"]]; | 119 | exportCstj(this.selectDate).then(res => { |
| 103 | this.xAxisData.forEach((item, index) => { | 120 | const link=document.createElement("a"); |
| 104 | console.log("this.exdata[index+1]", this.exdata[index + 1]); | 121 | let blob=new Blob([res], { type: "application/vnd.ms-excel" }); //类型excel |
| 105 | this.exdata.push([]); | 122 | link.style.display="none"; |
| 106 | this.exdata[index + 1].push(item); | 123 | link.href=URL.createObjectURL(blob); |
| 107 | this.exdata[index + 1].push(this.data1[index]); | 124 | link.setAttribute("download", this.dateRange[0]+'~'+ this.dateRange[1] +'超时统计'); |
| 108 | this.exdata[index + 1].push(this.data2[index]); | 125 | document.body.appendChild(link); |
| 109 | this.exdata[index + 1].push(this.data3[index]); | 126 | link.click(); |
| 110 | }); | 127 | document.body.removeChild(link); |
| 111 | console.log("this.exdata", this.exdata); | 128 | }) |
| 112 | const ws = XLSX.utils.aoa_to_sheet(this.exdata); | ||
| 113 | const wb = XLSX.utils.book_new(); | ||
| 114 | XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); | ||
| 115 | XLSX.writeFile(wb, "收件与超时统计情况.xlsx"); | ||
| 116 | }, | 129 | }, |
| 117 | // 查询 | 130 | // 查询 |
| 118 | chchch() { | 131 | chchch() { |
| ... | @@ -140,15 +153,21 @@ export default { | ... | @@ -140,15 +153,21 @@ export default { |
| 140 | }, | 153 | }, |
| 141 | // 如果需要自定义 tooltip样式,需要使用formatter | 154 | // 如果需要自定义 tooltip样式,需要使用formatter |
| 142 | formatter: (params) => { | 155 | formatter: (params) => { |
| 143 | console.log("paramsssssssssssssssssss", params); | 156 | if (params.seriesName == '超时时间') { |
| 144 | return `<div font-size: 14px;line-height: 24px> | 157 | return `<div font-size: 14px;line-height: 24px> |
| 145 | ${params.seriesName} | 158 | ${params.seriesName} |
| 146 | <br> | 159 | <br> |
| 147 | <span font-size: 16px; font-weight: 600;"> ${params.name}: ${ | 160 | <span font-size: 16px; font-weight: 600;"> ${params.name}: ${ |
| 148 | Number(params.value).toFixed(2) + "%" | 161 | Number(params.value).toFixed(2) + "小时" |
| 162 | } </span> | ||
| 163 | </div>`; | ||
| 164 | } | ||
| 165 | return `<div font-size: 14px;line-height: 24px> | ||
| 166 | ${params.seriesName} | ||
| 167 | <br> | ||
| 168 | <span font-size: 16px; font-weight: 600;"> ${params.name}: ${ | ||
| 169 | Number(params.value).toFixed(2) + "件" | ||
| 149 | } </span> | 170 | } </span> |
| 150 | |||
| 151 | |||
| 152 | </div>`; | 171 | </div>`; |
| 153 | }, | 172 | }, |
| 154 | }, | 173 | }, |
| ... | @@ -279,6 +298,9 @@ export default { | ... | @@ -279,6 +298,9 @@ export default { |
| 279 | this.formatDate(new Date(year - 1, 11, 31)) | 298 | this.formatDate(new Date(year - 1, 11, 31)) |
| 280 | ); | 299 | ); |
| 281 | } | 300 | } |
| 301 | this.selectDate.startAt = this.dateRange[0] + " 00:00:00" | ||
| 302 | this.selectDate.endAt = this.dateRange[1] + " 00:00:00" | ||
| 303 | this.cstj() | ||
| 282 | }, | 304 | }, |
| 283 | // 日期范围选择器事件 | 305 | // 日期范围选择器事件 |
| 284 | chooseDateRange() { | 306 | chooseDateRange() { | ... | ... |
| ... | @@ -53,6 +53,7 @@ | ... | @@ -53,6 +53,7 @@ |
| 53 | </template> | 53 | </template> |
| 54 | <script> | 54 | <script> |
| 55 | import * as echarts from "echarts"; | 55 | import * as echarts from "echarts"; |
| 56 | import {tjtj, exportTjtj} from "@/api/tjfx.js"; | ||
| 56 | import XLSX from 'xlsx'; | 57 | import XLSX from 'xlsx'; |
| 57 | export default { | 58 | export default { |
| 58 | components: {}, | 59 | components: {}, |
| ... | @@ -69,62 +70,68 @@ export default { | ... | @@ -69,62 +70,68 @@ export default { |
| 69 | { code: "7", name: "今年" }, | 70 | { code: "7", name: "今年" }, |
| 70 | { code: "8", name: "去年" }, | 71 | { code: "8", name: "去年" }, |
| 71 | ], | 72 | ], |
| 73 | selectDate : { | ||
| 74 | startAt:'2020-01-03 02:57:57', | ||
| 75 | endAt:'2025-01-03 02:57:57' | ||
| 76 | }, | ||
| 72 | chooseIndex: 0, // 日期快捷选择项索引 | 77 | chooseIndex: 0, // 日期快捷选择项索引 |
| 73 | dateRange: [], // 自定义列表 - 日期范围 | 78 | dateRange: [], // 自定义列表 - 日期范围 |
| 74 | queryForm: {}, | 79 | queryForm: {}, |
| 75 | data1: [23, 45, 23, 11, 15, 19, 35], | 80 | data1: [], |
| 76 | data2: [1, 4, 1, 3, 2, 3, 4], | 81 | data2: [], |
| 77 | data3: [], | 82 | data3: [], |
| 78 | xAxisData: [ | 83 | xAxisData: [], |
| 79 | "任超", | ||
| 80 | "杨威", | ||
| 81 | "魏娜", | ||
| 82 | "张祎旋", | ||
| 83 | "苗菁", | ||
| 84 | "王文刚", | ||
| 85 | "单帅旗", | ||
| 86 | ], | ||
| 87 | }; | 84 | }; |
| 88 | }, | 85 | }, |
| 89 | mounted() { | 86 | mounted() { |
| 90 | this.setdata(); | 87 | this.setdata(); |
| 88 | }, | ||
| 89 | methods: { | ||
| 90 | |||
| 91 | tjtj () { | ||
| 92 | tjtj(this.selectDate).then(res => { | ||
| 93 | if (res.code == 200) { | ||
| 94 | let dataSource = res.result; | ||
| 95 | if (dataSource != null) { | ||
| 96 | this.xAxisData = dataSource.map(item => item.assignee) | ||
| 97 | this.data1 = dataSource.map(item => item.sj) | ||
| 98 | this.data2 = dataSource.map(item => item.tj) | ||
| 99 | this.data3 = dataSource.map(item => item.tjl) | ||
| 100 | } | ||
| 101 | console.log(this.xAxisData) | ||
| 102 | console.log(this.data1) | ||
| 103 | console.log(this.data2) | ||
| 104 | console.log(this.data3) | ||
| 91 | // 创建一个 ECharts 实例 | 105 | // 创建一个 ECharts 实例 |
| 92 | this.chart = echarts.init(this.$refs.chart); | 106 | this.chart = echarts.init(this.$refs.chart); |
| 93 | // 在 ECharts 实例中配置图表 | 107 | // 在 ECharts 实例中配置图表 |
| 94 | this.chart.setOption(this.getOption()); | 108 | this.chart.setOption(this.getOption()); |
| 95 | this.chooseDateQuick(0); | 109 | } |
| 96 | 110 | }) | |
| 97 | }, | 111 | }, |
| 98 | methods: { | 112 | |
| 99 | setdata() { | 113 | setdata() { |
| 100 | for (let i = 0; i < this.data1.length; i++) { | 114 | this.chooseDateQuick(7) |
| 101 | let sum = (this.data2[i] / this.data1[i]) * 100; | 115 | this.tjtj() |
| 102 | this.data3.push(Number(sum).toFixed(0)); | ||
| 103 | } | ||
| 104 | }, | 116 | }, |
| 105 | // 导出 | 117 | // 导出 |
| 106 | // 导出 | 118 | // 导出 |
| 107 | derive() { | 119 | derive() { |
| 108 | this.exdata = [ | 120 | exportTjtj(this.selectDate).then(res => { |
| 109 | ['受理人员', '收件数','退件数','推荐率'] | 121 | const link=document.createElement("a"); |
| 110 | ]; | 122 | let blob=new Blob([res], { type: "application/vnd.ms-excel" }); //类型excel |
| 111 | this.xAxisData.forEach((item,index) => { | 123 | link.style.display="none"; |
| 112 | console.log("this.exdata[index+1]",this.exdata[index+1]); | 124 | link.href=URL.createObjectURL(blob); |
| 113 | this.exdata.push([]) | 125 | link.setAttribute("download", this.dateRange[0]+'~'+ this.dateRange[1] +'收件退件统计'); |
| 114 | this.exdata[index+1].push(item) | 126 | document.body.appendChild(link); |
| 115 | this.exdata[index+1].push(this.data1[index]) | 127 | link.click(); |
| 116 | this.exdata[index+1].push(this.data2[index]) | 128 | document.body.removeChild(link); |
| 117 | this.exdata[index+1].push(this.data3[index]) | 129 | }) |
| 118 | }) | ||
| 119 | console.log("this.exdata",this.exdata); | ||
| 120 | const ws = XLSX.utils.aoa_to_sheet(this.exdata); | ||
| 121 | const wb = XLSX.utils.book_new(); | ||
| 122 | XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); | ||
| 123 | XLSX.writeFile(wb, '收件与退件统计情况.xlsx'); | ||
| 124 | }, | 130 | }, |
| 125 | // 查询 | 131 | // 查询 |
| 126 | chchch() { | 132 | chchch() { |
| 127 | console.log("dateRange", this.dateRange); | 133 | console.log("dateRange", this.dateRange); |
| 134 | this.setdata() | ||
| 128 | }, | 135 | }, |
| 129 | getOption() { | 136 | getOption() { |
| 130 | return { | 137 | return { |
| ... | @@ -148,6 +155,7 @@ console.log("this.exdata",this.exdata); | ... | @@ -148,6 +155,7 @@ console.log("this.exdata",this.exdata); |
| 148 | }, | 155 | }, |
| 149 | // 如果需要自定义 tooltip样式,需要使用formatter | 156 | // 如果需要自定义 tooltip样式,需要使用formatter |
| 150 | formatter: (params) => { | 157 | formatter: (params) => { |
| 158 | if (params.seriesName == '退件率') { | ||
| 151 | return `<div font-size: 14px;line-height: 24px> | 159 | return `<div font-size: 14px;line-height: 24px> |
| 152 | ${params.seriesName} | 160 | ${params.seriesName} |
| 153 | <br> | 161 | <br> |
| ... | @@ -155,6 +163,14 @@ console.log("this.exdata",this.exdata); | ... | @@ -155,6 +163,14 @@ console.log("this.exdata",this.exdata); |
| 155 | Number(params.value).toFixed(2) + "%" | 163 | Number(params.value).toFixed(2) + "%" |
| 156 | } </span> | 164 | } </span> |
| 157 | </div>`; | 165 | </div>`; |
| 166 | } | ||
| 167 | return `<div font-size: 14px;line-height: 24px> | ||
| 168 | ${params.seriesName} | ||
| 169 | <br> | ||
| 170 | <span font-size: 16px; font-weight: 600;"> ${params.name}: ${ | ||
| 171 | Number(params.value).toFixed(2) + "件" | ||
| 172 | } </span> | ||
| 173 | </div>`; | ||
| 158 | }, | 174 | }, |
| 159 | }, | 175 | }, |
| 160 | 176 | ||
| ... | @@ -284,6 +300,9 @@ console.log("this.exdata",this.exdata); | ... | @@ -284,6 +300,9 @@ console.log("this.exdata",this.exdata); |
| 284 | this.formatDate(new Date(year - 1, 11, 31)) | 300 | this.formatDate(new Date(year - 1, 11, 31)) |
| 285 | ); | 301 | ); |
| 286 | } | 302 | } |
| 303 | this.selectDate.startAt = this.dateRange[0] + " 00:00:00" | ||
| 304 | this.selectDate.endAt = this.dateRange[1] + " 00:00:00" | ||
| 305 | this.tjtj() | ||
| 287 | }, | 306 | }, |
| 288 | // 日期范围选择器事件 | 307 | // 日期范围选择器事件 |
| 289 | chooseDateRange() { | 308 | chooseDateRange() { | ... | ... |
-
Please register or sign in to post a comment