<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-25 08:59:04
-->
<template>
<div class="tjltj">
<div class="inquire">
<el-form :model="queryForm" ref="queryForm" label-width="100px">
<el-row>
<el-col :span="19">
<div class="rowAc">
<div
v-for="(item, index) in dateQuickSelection"
:key="index"
class="rowAc dateQuickItem"
@click="chooseDateQuick(index)"
>
{{ item.name }}
</div>
<el-date-picker
v-model="dateRange"
type="daterange"
value-format="yyyy-MM-dd"
end-placeholder="结束日期"
start-placeholder="开始日期"
:clearable="false"
range-separator="-"
class="dataRangePicker"
@change="chooseDateRange"
></el-date-picker>
</div>
</el-col>
<el-col :span="5" class="btnColRight">
<el-form-item>
<el-button
type="primary"
native-type="submit"
@click="chchch"
>查询</el-button
>
<el-button type="primary" native-type="submit" @click="derive"
>导出</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div ref="chart" style="width: 100%; height: 92%"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import XLSX from 'xlsx';
export default {
components: {},
data() {
return {
dateQuickSelection: [
// 日期快捷选择列表
{ code: "1", name: "今日" },
{ code: "2", name: "昨日" },
{ code: "3", name: "本周" },
{ code: "4", name: "上周" },
{ code: "5", name: "本月" },
{ code: "6", name: "上月" },
{ code: "7", name: "今年" },
{ code: "8", name: "去年" },
],
chooseIndex: 0, // 日期快捷选择项索引
dateRange: [], // 自定义列表 - 日期范围
queryForm: {},
data1: [23, 45, 23, 11, 15, 19, 35],
data2: [1, 4, 1, 3, 2, 3, 4],
data3: [],
xAxisData: [
"任超",
"杨威",
"魏娜",
"张祎旋",
"苗菁",
"王文刚",
"单帅旗",
],
};
},
mounted() {
this.setdata();
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
this.chooseDateQuick(0);
},
methods: {
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));
}
},
// 导出
// 导出
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');
},
// 查询
chchch() {
console.log("dateRange", this.dateRange);
},
getOption() {
return {
title: {
text: "收件与退件统计情况 ", // 主标题名称
textStyle: {
//主标题文本设置
fontSize: 26, //大小
},
itemGap: 3, //主副标题间距
x: "center", //主副标题的水平位置
y: "top", //主副标题的垂直位置
},
tooltip: {
trigger: "item",
textStyle: {
fontSize: 14,
lineHeight: 22,
},
// 如果需要自定义 tooltip样式，需要使用formatter
formatter: (params) => {
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>`;
},
},
legend: {
data: ["收件", "退件", "退件率"],
bottom: "3%",
itemWidth: 20,
itemHeight: 20,
//文字样式
textStyle: {
fontSize: 17, //设置文字大小
},
},
grid: [{ right: "3%", top: "10%", bottom: "15%", left: "3%" }],
color: ["#94ae0a", "#115fa6", "#a61120"],
xAxis: {
data: this.xAxisData,
axisLabel: {
// 轴文字
fontSize: 18,
},
},
yAxis: {
axisLabel: {
// 轴文字
fontSize: 18,
},
},
series: [
{
name: "收件",
type: "bar",
data: this.data1,
label: {
normal: {
show: true,
fontSize: 13,
position: "top",
},
},
},
{
name: "退件",
type: "bar",
data: this.data2,
label: {
normal: {
show: true,
fontSize: 13,
position: "top",
},
},
},
{
name: "退件率",
type: "bar",
data: this.data3,
label: {
normal: {
show: true,
fontSize: 13,
position: "top",
},
},
},
],
};
},
// 日期快捷选择事件
chooseDateQuick(index) {
this.chooseIndex = index;
var tempCode = this.dateQuickSelection.find(
(ele) => this.chooseIndex === Number(ele.code) - 1
).code;
var tempDate = new Date();
var year = tempDate.getFullYear();
var month = tempDate.getMonth();
var day = tempDate.getDate();
var week = tempDate.getDay();
this.dateRange = [];
if (tempCode === "1") {
// 今日
this.dateRange.push(
this.formatDate(tempDate),
this.formatDate(tempDate)
);
} else if (tempCode === "2") {
// 昨日
this.dateRange.push(
this.jumpNumDay(tempDate, -1, "-"),
this.jumpNumDay(tempDate, -1, "-")
);
} else if (tempCode === "3") {
// 本周
this.dateRange.push(
this.formatDate(new Date(year, month, day - week + 1)),
this.formatDate(tempDate)
);
} else if (tempCode === "4") {
// 上周
this.dateRange.push(
this.formatDate(new Date(year, month, day - week - 6)),
this.formatDate(new Date(year, month, day - week))
);
} else if (tempCode === "5") {
// 本月
this.dateRange.push(
this.formatDate(new Date(year, month, 1)),
this.formatDate(tempDate)
);
} else if (tempCode === "6") {
// 上月
this.dateRange.push(
this.formatDate(new Date(year, month - 1, 1)),
this.formatDate(new Date(year, month, 0))
);
} else if (tempCode === "7") {
// 今年
this.dateRange.push(
this.formatDate(new Date(year, 0, 1)),
this.formatDate(tempDate)
);
} else if (tempCode === "8") {
// 去年
this.dateRange.push(
this.formatDate(new Date(year - 1, 0, 1)),
this.formatDate(new Date(year - 1, 11, 31))
);
}
},
// 日期范围选择器事件
chooseDateRange() {
this.chooseIndex = null;
},
// 数字转换
changeNum(num) {
if (num >= 10) {
return num;
} else {
return "0" + num;
}
},
// 格式化日期
formatDate(date) {
var year = date.getFullYear();
var month = this.changeNum(date.getMonth() + 1);
var day = this.changeNum(date.getDate());
return `${year}-${month}-${day}`;
},
// 某日期向前/向后num天
jumpNumDay(date, num, linkStr = '-') {
date = new Date(date.getTime() + (num * 24 * 60 * 60 * 1000))
return date.getFullYear() + linkStr + this.changeNum(date.getMonth() + 1) + linkStr + this.changeNum(date.getDate())
},
},
};
</script>
<style scoped lang="scss">
.tjltj {
width: 100%;
height: 100%;
.inquire {
width: 100%;
height: 40px;
padding-top: 3px;
background-color: #ffffff;
margin-bottom: 10px;
}
.rowAc {
margin-left: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.dateQuickItem {
padding: 1px 8px;
margin-right: 16px;
color: #3c4353;
font-size: 14px;
line-height: 22px;
font-weight: 400;
border: 1px solid #dcdee0;
border-radius: 16px;
background: #ffffff;
cursor: pointer;
box-sizing: border-box;
}
.dateQuickItem:hover,
.dateQuickItem.active {
color: #1b58f4;
border: 1px solid #1b58f4;
}
.dateQuickItem.disabled {
color: #c8c9cc;
border: 1px solid #dcdee0;
background: #f7f8f9;
cursor: not-allowed; // 禁止鼠标事件
}
.dataRangePicker {
width: 240px !important;
height: 32px !important;
}
.dataRangePicker.el-date-editor .el-range-separator {
line-height: 24px;
}
.dataRangePicker.el-date-editor .el-range__icon {
margin-left: 0px;
line-height: 24px;
}
.dataRangePicker.el-date-editor .el-range-input {
width: 95px;
}
}
</style>