<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="100px"
>
<el-form-item label="选择日期" prop="selDate">
<el-date-picker
v-model="queryParams.sDate"
type="month"
value-format="yyyy-MM"
clearable
placeholder="请输起始月"
/>
<el-date-picker
v-model="queryParams.eDate"
type="month"
value-format="yyyy-MM"
clearable
placeholder="请输截止月"
/>
</el-form-item>
<el-form-item label="同比年份" prop="duibiYear">
<el-date-picker
v-model="queryParams.duibiYear"
type="year"
value-format="yyyy"
placeholder="请选择同比年份"
/>
</el-form-item>
<el-form-item label="部门" prop="deptid" v-show="showDept">
<treeselect
v-model="queryParams.deptid"
:options="deptOptions"
:show-count="true"
:placeholder="$t('请选择部门')"
:normalizer="normalizer"
/>
</el-form-item>
<el-form-item
label="客户经理"
prop="salesmanid"
v-show="showCustomsManage"
>
<user-selector
manage
v-model="queryParams.salesmanid"
clearable
@change="handleQuery"
:prepend="{ id: 0, nickname: $t('未分配客户经理') }"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">{{
$t("搜索")
}}</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">
{{ $t("重置") }}</el-button
>
</el-form-item>
<el-form-item> </el-form-item>
</el-form>
<el-row>
<el-form size="small" :inline="true" label-width="150px">
<el-form-item label="">
<el-button
type="primary"
icon="el-icon-search"
@click="hhandleQueryAnalysis"
>
{{ $t("更多") }}
</el-button>
</el-form-item>
</el-form>
</el-row>
<div
ref="mainBar"
:class="className"
:style="{ height: height, width: width }"
></div>
<!--
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>-->
</div>
</template>
<script>
import UserSelector from "@/components/UserSelector";
import Treeselect from "@riophae/vue-treeselect";
//自定义目录数样式
import "@/assets/styles/vue-treeselect.css";
import { listSimpleDepts } from "@/api/system/dept";
import * as echarts from "echarts";
require("echarts/theme/macarons");
import resize from "../../dashboard/mixins/resize";
import { getReportResult } from "@/api/report/customerreport";
import {
getCurUserPermission,
getDeptChild,
} from "@/api/report/EcwReportPermission";
import { MessageBox } from "element-ui";
const CurDate = new Date();
function currentTime() {
var date = new Date();
var year = date.getFullYear();
//月份从0~11，所以加一
let month = date.getMonth() + 1;
//如果格式是MM则需要此步骤，如果是M格式则此处注释掉
if (month >= 1 && month <= 9) {
month = "0" + month;
}
let strDate = year + "-" + month;
return strDate;
}
function getLastYear() {
//获取上一年份
var date = new Date();
date.setFullYear(date.getFullYear() - 1);
let year = date.getFullYear();
return year.toString();
}
//2024-05-01合并
export default {
name: "ReportCustomerreportIndex",
components: {
UserSelector,
Treeselect,
},
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "500px",
},
autoResize: {
type: Boolean,
default: true,
},
},
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 总条数
total: 0,
// 显示搜索条件
showSearch: true,
showDept: true, //是否显示部门选择过滤条件
showCustomsManage: true, //是否显示客户经理过滤条件
deptOptions: undefined,
chart: null,
dateRangeCreateTime: [],
queryParams: {
sDate: CurDate.getFullYear() + "-01",
eDate: currentTime(), //结束日期
duibiYear: getLastYear(), //对比年份
deptid: undefined, //部门
salesmanid: undefined, //客户经理
number: undefined, //客户编号
pageNo: 1,
pageSize: 30,
},
//报表权限信息
objEcwReportPermission: {},
DeptEx: { id: undefined, name: undefined, parentId: undefined },
resultList: [],
};
},
watch: {},
mounted() {
/*
this.$nextTick(() => {
this.initChart();
});*/
},
created() {
//获取当前用户报表权限
getCurUserPermission().then((response) => {
this.objEcwReportPermission = response.data;
if (this.objEcwReportPermission.permissionFw == 1) {
//本人权限
this.showCustomsManage = false;
this.showDept = false;
this.queryParams.salesmanid = this.objEcwReportPermission.userId;
} else if (this.objEcwReportPermission.permissionFw == 2) {
this.showCustomsManage = true;
this.showDept = true;
this.queryParams.deptid = parseInt(this.objEcwReportPermission.deptId);
} else if (this.objEcwReportPermission.permissionFw == 3) {
//全公司权限
this.showCustomsManage = true;
this.showDept = true;
}
this.getTreeselect();
//获取权限后再初始化统计图表
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
var chartDom = this.$refs["mainBar"];
this.chart = echarts.init(chartDom, "macarons");
this.chart.on("click", (params) => {
if (this.isRight() == false) return;
let p = {};
this.queryParams.salesmanid = parseInt(
this.resultList[params.dataIndex].salesmanid
);
this.queryParams.number = this.resultList[params.dataIndex].number;
Object.assign(p, this.queryParams);
this.$router.push({
path: "/report/customer_analysis",
query: p,
});
});
this.setOptions();
},
setOptions() {
this.loading = true;
getReportResult(this.queryParams).then((response) => {
//全部列表数据
this.total = response.data.total;
this.resultList = response.data.resultList;
let resultList2 = response.data.resultList;
this.loading = false;
this.chart.setOption({
title: {
text: "客户贡献排名",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
// 自定义提示框内容，使用回调函数
formatter: function (params) {
//params 是一个数组，数组中每个元素代表一个系列的数据信息
var result = "";
params.forEach(function (item) {
//var s=JSON.stringify(item);
//alert(s);
//在数据中查询
let sN = item.name;
var arr = sN.split("_");
let vR = resultList2.filter((r) => r.number === arr[1]);
result += "客户：" + item.name + "<br/>";
result += "客户编号：" + vR[0].number + "<br/>";
result += "客户经理：" + vR[0].salesman + "<br/>";
result += "总V值：" + item.value + "<br/>";
result += "海运V值：" + vR[0].sumvolume1 + "<br/>";
result += "空运V值：" + vR[0].sumweight3 + "<br/>";
result += "对比年份：" + vR[0].duibiYear + "<br/>";
result += "同比：" + vR[0].allsumvolumeTbMsg + "<br/>";
result += "环比：" + vR[0].allsumvolumeTbMsg + "<br/>";
});
return result;
},
},
legend: {},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "value",
boundaryGap: [0, 0.5],
},
yAxis: response.data.objyAxis,
series: response.data.obSseries,
});
});
},
hhandleQueryAnalysis() {
if (this.isRight() == false) return;
let p = {};
Object.assign(p, this.queryParams);
this.$router.push({
path: "/report/customer_analysis",
query: p,
});
},
isRight() {
//校验查询参数 lanbm 2024-04-07 add
if (this.queryParams.sDate == undefined) {
MessageBox("请输入起始月份。");
return false;
}
if (this.queryParams.eDate == undefined) {
MessageBox("请输入截止月份。");
return false;
}
if (this.queryParams.duibiYear == undefined) {
MessageBox("请输入对比年份。");
return false;
} else {
let y = parseInt(this.queryParams.duibiYear);
if (y < 2023) {
MessageBox("对比年份只能选2023年和2023年之后的年份。");
return false;
}
var date = new Date();
var year = date.getFullYear();
if (y > year) {
MessageBox("对比年份只能选当前年份之前的年份。");
return false;
}
}
return true;
},
handleQuery() {
if (this.isRight() == false) return;
//查询统计结果
this.initChart();
},
getList() {
//this.initChart();
},
resetQuery() {
this.queryParams = {
sDate: undefined, //开始日期
eDate: undefined, //结束日期
duibiYear: undefined, //对比年份
deptid: undefined, //部门
salesmanid: undefined, //客户经理
pageNo: 1,
pageSize: 30,
};
},
handleAdd() {},
handleExport() {},
/** 查询部门下拉树结构 + 岗位下拉 */
getTreeselect() {
if (this.objEcwReportPermission.permissionFw == 3) {
listSimpleDepts().then((response) => {
// 处理deptOptions 参数
this.deptOptions = [];
this.deptOptions.push(...this.handleTree(response.data, "id"));
});
} else if (this.objEcwReportPermission.permissionFw == 2) {
this.DeptEx.id = this.objEcwReportPermission.deptId;
getDeptChild(this.DeptEx).then((response) => {
// 处理deptOptions 参数
this.deptOptions = [];
this.deptOptions.push(...this.handleTree(response.data, "id"));
});
}
},
//格式化部门的下拉框
normalizer(node) {
return {
id: node.id,
label: node.name,
children: node.children,
};
},
},
};
</script>