fed50ecb by 赵千

退件统计

1 parent 7bd46e67
/*
* @Description: 信息备案
* @Autor:
* @LastEditTime: 2023-09-11 11:25:22
*/
import request from '@/utils/request'
let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl'))
/**
* @description: cstj
* @author:
* @param params
*/
export function cstj (params) {
return request({
url: SERVER.SERVERAPI + '/rest/tjfx/xn/cstj?startAt='+params.startAt + '&endAt=' + params.endAt,
method: 'post'
})
}
/**
* @description: exportCstj
* @author:
* @param params
*/
export function exportCstj (params) {
return request({
url: SERVER.SERVERAPI + '/rest/tjfx/xn/exportCstj?startAt='+params.startAt + '&endAt=' + params.endAt,
method: 'post',
responseType: 'blob'
})
}
/**
* @description: tjtj
* @author:
* @param data
*/
export function tjtj (data) {
return request({
url: SERVER.SERVERAPI + '/rest/tjfx/xn/tjtj',
method: 'post',
data
})
}
/**
* @description: exportTjtj
* @author:
* @param data
*/
export function exportTjtj (data) {
return request({
url: SERVER.SERVERAPI + '/rest/tjfx/xn/exportTjtj',
method: 'post',
data,
responseType: 'blob'
})
}
......@@ -50,6 +50,7 @@
</template>
<script>
import * as echarts from "echarts";
import {cstj, exportCstj} from "@/api/tjfx.js";
import XLSX from "xlsx";
export default {
components: {},
......@@ -69,50 +70,62 @@ export default {
chooseIndex: 0, // 日期快捷选择项索引
dateRange: [], // 自定义列表 - 日期范围
queryForm: {},
data1: [12, 10, 15, 12, 15, 19, 15],
data2: [1, 2, 2, 3, 2, 3, 2],
data1: [],
data2: [],
data3: [],
selectDate : {
startAt:'2020-01-03 02:57:57',
endAt:'2025-01-03 02:57:57'
},
xAxisData: [
"赵龙龙",
"刘刚",
"任启亮",
"梁亚博",
"李含",
"周路",
],
};
},
mounted() {
this.setdata();
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
this.chooseDateQuick(0);
},
methods: {
cstj () {
cstj(this.selectDate).then(res => {
if (res.code == 200) {
let dataSource = res.result;
if (dataSource != null) {
this.xAxisData = dataSource.map(item => item.assignee)
this.data1 = dataSource.map(item => item.total)
this.data2 = dataSource.map(item => item.count)
this.data3 = dataSource.map(item => item.cumulativeTimeout)
}
console.log(this.xAxisData)
console.log(this.data1)
console.log(this.data2)
console.log(this.data3)
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
}
})
},
setdata() {
for (let i = 0; i < this.data1.length; i++) {
let sum = (this.data2[i] / this.data1[i]) * 100;
this.data3.push(Number(sum).toFixed(0));
}
this.chooseDateQuick(7)
this.cstj()
},
// 导出
derive() {
this.exdata = [["受理人员", "收件数", "退件数", "推荐率"]];
this.xAxisData.forEach((item, index) => {
console.log("this.exdata[index+1]", this.exdata[index + 1]);
this.exdata.push([]);
this.exdata[index + 1].push(item);
this.exdata[index + 1].push(this.data1[index]);
this.exdata[index + 1].push(this.data2[index]);
this.exdata[index + 1].push(this.data3[index]);
});
console.log("this.exdata", this.exdata);
const ws = XLSX.utils.aoa_to_sheet(this.exdata);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, "收件与超时统计情况.xlsx");
exportCstj(this.selectDate).then(res => {
const link=document.createElement("a");
let blob=new Blob([res], { type: "application/vnd.ms-excel" }); //类型excel
link.style.display="none";
link.href=URL.createObjectURL(blob);
link.setAttribute("download", this.dateRange[0]+'~'+ this.dateRange[1] +'超时统计');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
},
// 查询
chchch() {
......@@ -140,15 +153,21 @@ export default {
},
// 如果需要自定义 tooltip样式,需要使用formatter
formatter: (params) => {
console.log("paramsssssssssssssssssss", params);
if (params.seriesName == '超时时间') {
return `<div font-size: 14px;line-height: 24px>
${params.seriesName}
<br>
<span font-size: 16px; font-weight: 600;"> ${params.name}: ${
Number(params.value).toFixed(2) + "小时"
} </span>
</div>`;
}
return `<div font-size: 14px;line-height: 24px>
${params.seriesName}
<br>
<span font-size: 16px; font-weight: 600;"> ${params.name}: ${
Number(params.value).toFixed(2) + "%"
Number(params.value).toFixed(2) + ""
} </span>
</div>`;
},
},
......@@ -279,6 +298,9 @@ export default {
this.formatDate(new Date(year - 1, 11, 31))
);
}
this.selectDate.startAt = this.dateRange[0] + " 00:00:00"
this.selectDate.endAt = this.dateRange[1] + " 00:00:00"
this.cstj()
},
// 日期范围选择器事件
chooseDateRange() {
......
......@@ -53,6 +53,7 @@
</template>
<script>
import * as echarts from "echarts";
import {tjtj, exportTjtj} from "@/api/tjfx.js";
import XLSX from 'xlsx';
export default {
components: {},
......@@ -69,62 +70,68 @@ export default {
{ code: "7", name: "今年" },
{ code: "8", name: "去年" },
],
selectDate : {
startAt:'2020-01-03 02:57:57',
endAt:'2025-01-03 02:57:57'
},
chooseIndex: 0, // 日期快捷选择项索引
dateRange: [], // 自定义列表 - 日期范围
queryForm: {},
data1: [23, 45, 23, 11, 15, 19, 35],
data2: [1, 4, 1, 3, 2, 3, 4],
data1: [],
data2: [],
data3: [],
xAxisData: [
"任超",
"杨威",
"魏娜",
"张祎旋",
"苗菁",
"王文刚",
"单帅旗",
],
xAxisData: [],
};
},
mounted() {
this.setdata();
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
this.chooseDateQuick(0);
},
methods: {
tjtj () {
tjtj(this.selectDate).then(res => {
if (res.code == 200) {
let dataSource = res.result;
if (dataSource != null) {
this.xAxisData = dataSource.map(item => item.assignee)
this.data1 = dataSource.map(item => item.sj)
this.data2 = dataSource.map(item => item.tj)
this.data3 = dataSource.map(item => item.tjl)
}
console.log(this.xAxisData)
console.log(this.data1)
console.log(this.data2)
console.log(this.data3)
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
}
})
},
setdata() {
for (let i = 0; i < this.data1.length; i++) {
let sum = (this.data2[i] / this.data1[i]) * 100;
this.data3.push(Number(sum).toFixed(0));
}
this.chooseDateQuick(7)
this.tjtj()
},
// 导出
// 导出
derive() {
this.exdata = [
['受理人员', '收件数','退件数','推荐率']
];
this.xAxisData.forEach((item,index) => {
console.log("this.exdata[index+1]",this.exdata[index+1]);
this.exdata.push([])
this.exdata[index+1].push(item)
this.exdata[index+1].push(this.data1[index])
this.exdata[index+1].push(this.data2[index])
this.exdata[index+1].push(this.data3[index])
})
console.log("this.exdata",this.exdata);
const ws = XLSX.utils.aoa_to_sheet(this.exdata);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, '收件与退件统计情况.xlsx');
exportTjtj(this.selectDate).then(res => {
const link=document.createElement("a");
let blob=new Blob([res], { type: "application/vnd.ms-excel" }); //类型excel
link.style.display="none";
link.href=URL.createObjectURL(blob);
link.setAttribute("download", this.dateRange[0]+'~'+ this.dateRange[1] +'收件退件统计');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
},
// 查询
chchch() {
console.log("dateRange", this.dateRange);
this.setdata()
},
getOption() {
return {
......@@ -148,11 +155,20 @@ console.log("this.exdata",this.exdata);
},
// 如果需要自定义 tooltip样式,需要使用formatter
formatter: (params) => {
if (params.seriesName == '退件率') {
return `<div font-size: 14px;line-height: 24px>
${params.seriesName}
<br>
<span font-size: 16px; font-weight: 600;"> ${params.name}: ${
Number(params.value).toFixed(2) + "%"
} </span>
</div>`;
}
return `<div font-size: 14px;line-height: 24px>
${params.seriesName}
<br>
<span font-size: 16px; font-weight: 600;"> ${params.name}: ${
Number(params.value).toFixed(2) + "%"
Number(params.value).toFixed(2) + ""
} </span>
</div>`;
},
......@@ -284,6 +300,9 @@ console.log("this.exdata",this.exdata);
this.formatDate(new Date(year - 1, 11, 31))
);
}
this.selectDate.startAt = this.dateRange[0] + " 00:00:00"
this.selectDate.endAt = this.dateRange[1] + " 00:00:00"
this.tjtj()
},
// 日期范围选择器事件
chooseDateRange() {
......
<!--
* @Description:
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-12-29 16:35:50
-->
......@@ -113,6 +113,10 @@
label: "收费人员",
},
{
prop: "sfkmmc",
label: "收费科目名称",
},
{
prop: "sjffr",
label: "实际付费人",
},
......@@ -227,4 +231,4 @@
margin-left: 10px;
}
}
</style>
\ No newline at end of file
</style>
......