<template>
<div class="tenant">
<div class="query bck" style="padding-bottom: 0px">
<el-form :inline="true" :model="queryForm">
<el-form-item label="查看用户">
<el-select
v-model="selectUser"
multiple
placeholder="请选择用户"
@change="changeUser"
>
<el-option
v-for="item in userList"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.value !== 'all' && selectUser.includes('all')"
/>
</el-select>
</el-form-item>
<el-form-item label="日期">
<el-date-picker
v-model="queryForm.timeArr"
type="daterange"
unlink-panels
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
@change="onQuery"
/>
</el-form-item>
<el-form-item>
<el-button @click="clickBtn(1)" :class="{ btnBck: selectBtn === 1 }"
>近30天</el-button
>
<el-button @click="clickBtn(2)" :class="{ btnBck: selectBtn === 2 }"
>本月</el-button
>
<el-button @click="clickBtn(3)" :class="{ btnBck: selectBtn === 3 }"
>上月</el-button
>
<el-button @click="clickBtn(4)" :class="{ btnBck: selectBtn === 4 }"
>近一年</el-button
>
<el-button @click="clickBtn(5)" :class="{ btnBck: selectBtn === 5 }"
>去年</el-button
>
<el-button @click="clickBtn(6)" :class="{ btnBck: selectBtn === 6 }"
>今年</el-button
>
</el-form-item>
</el-form>
</div>
<div v-loading="loading">
<div style="display: flex; margin-top: 15px">
<div class="bck">
<TitleInfo :content="titleList[0]"></TitleInfo>
<div class="one-row" style="margin-top: 15px">
<div class="one-row-item first" style="margin-right: 15px">
<div class="label">存量客户（人）</div>
<div class="value">
{{ allData.customerSituation.customerCount }}
</div>
</div>
<div class="one-row-item other" style="margin-right: 15px">
<div class="label">新增客户（人）</div>
<div class="value">
{{ allData.customerSituation.customerAddCount }}
</div>
</div>
<div class="one-row-item other" style="margin-right: 15px">
<div class="label">报价客户（人）</div>
<div class="value">
{{ allData.customerSituation.saleQuotationCustomerCount }}
</div>
</div>
<div class="one-row-item other">
<div class="label">成交客户（人）</div>
<div class="value">
{{ allData.customerSituation.contractCustomerCount }}
</div>
</div>
</div>
</div>
<div class="bck" style="margin-left: 20px">
<TitleInfo :content="titleList[1]"></TitleInfo>
<div class="one-row" style="margin-top: 15px">
<div class="one-row-item first" style="margin-right: 15px">
<div class="label">存量产品</div>
<div class="value">
{{ allData.productSituation.productCount }}
</div>
</div>
<div class="one-row-item other">
<div class="label">新增产品</div>
<div class="value">
{{ allData.productSituation.productAddCount }}
</div>
</div>
</div>
</div>
<div class="bck" style="margin-left: 20px; flex: 1">
<TitleInfo :content="titleList[2]"></TitleInfo>
<div class="one-row" style="margin-top: 15px">
<div class="one-row-item first" style="margin-right: 15px">
<div class="label">发件</div>
<div class="value">{{ allData.commMail.sentMailCount }}</div>
</div>
<div class="one-row-item other">
<div class="label">收件</div>
<div class="value">{{ allData.commMail.receiveMailCount }}</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 15px">
<div class="bck scroll">
<TitleInfo :content="titleList[3]"></TitleInfo>
<div class="two-row" style="margin-top: 15px">
<div class="two-row-item first" style="margin-right: 15px">
<div class="label">报价</div>
<div class="value">
<div style="margin-right: 15px">
<div class="child-value">
{{ allData.saleSituation.quotationAddStatistics.count }}
</div>
<div class="text">订单数</div>
</div>
<div>
<div class="child-value color-blue">
CNY
{{
moneyFormat(
allData.saleSituation.quotationAddStatistics.sumAmount,
2
)
}}
</div>
<div class="text">金额</div>
</div>
</div>
</div>
<div class="two-row-item other" style="margin-right: 15px">
<div class="label">成交</div>
<div class="value">
<div style="margin-right: 15px">
<div class="child-value">
{{ allData.saleSituation.contractAddStatistics.count }}
</div>
<div class="text">订单数</div>
</div>
<div>
<div class="child-value color-blue">
CNY
{{
moneyFormat(
allData.saleSituation.contractAddStatistics.sumAmount,
2
)
}}
</div>
<div class="text">金额</div>
</div>
</div>
</div>
<div class="two-row-item other" style="margin-right: 15px">
<div class="label">到账</div>
<div class="value">
<div style="margin-right: 15px">
<div class="child-value">
{{ allData.saleSituation.claimAddStatistics.count }}
</div>
<div class="text">笔</div>
</div>
<div>
<div class="child-value color-blue">
CNY
{{
moneyFormat(
allData.saleSituation.claimAddStatistics.sumAmount,
2
)
}}
</div>
<div class="text">金额</div>
</div>
</div>
</div>
<div class="two-row-item other">
<div class="label">创建单证</div>
<div class="value">
<div style="margin-right: 15px">
<div class="child-value">
{{ allData.saleSituation.documentsCount }}
</div>
<div class="text">套</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 15px">
<div class="bck scroll">
<TitleInfo :content="titleList[4]"></TitleInfo>
<div class="two-row" style="margin-top: 15px">
<div class="two-row-item first" style="margin-right: 15px">
<div class="label">报价</div>
<div class="value">
<div style="margin-right: 15px">
<div class="child-value">
{{ allData.saleAddSituation.quotationAddStatistics.count }}
</div>
<div class="text">订单数</div>
</div>
<div>
<div class="child-value color-blue">
CNY
{{
moneyFormat(
allData.saleAddSituation.quotationAddStatistics
.sumAmount,
2
)
}}
</div>
<div class="text">金额</div>
</div>
</div>
</div>
<div class="two-row-item other" style="margin-right: 15px">
<div class="label">成交</div>
<div class="value">
<div style="margin-right: 15px">
<div class="child-value">
{{ allData.saleAddSituation.contractAddStatistics.count }}
</div>
<div class="text">订单数</div>
</div>
<div>
<div class="child-value color-blue">
CNY
{{
moneyFormat(
allData.saleAddSituation.contractAddStatistics
.sumAmount,
2
)
}}
</div>
<div class="text">金额</div>
</div>
</div>
</div>
<div class="two-row-item other" style="margin-right: 15px">
<div class="label">到账</div>
<div class="value">
<div style="margin-right: 15px">
<div class="child-value">
{{ allData.saleAddSituation.claimAddStatistics.count }}
</div>
<div class="text">笔</div>
</div>
<div>
<div class="child-value color-blue">
CNY
{{
moneyFormat(
allData.saleAddSituation.claimAddStatistics.sumAmount,
2
)
}}
</div>
<div class="text">金额</div>
</div>
</div>
</div>
<div class="two-row-item other">
<div class="label">创建单证</div>
<div class="value">
<div style="margin-right: 15px">
<div class="child-value">
{{ allData.saleAddSituation.documentsCount }}
</div>
<div class="text">套</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display: flex; margin-top: 15px">
<div class="bck" style="width: 100%">
<TitleInfo :content="titleList[5]"></TitleInfo>
<div class="two-row" style="margin-top: 15px; width: 100%">
<div class="two-row-item first" style="margin-right: 15px">
<div class="label">待采购</div>
<div class="value">
<div style="margin-right: 15px">
<div class="child-value">
{{
allData.purchaseStatistics.waitPurchaseStatistics
.contractProductCount
}}
</div>
<div class="text">交接单</div>
</div>
<div>
<div class="child-value color-blue">
{{
allData.purchaseStatistics.waitPurchaseStatistics
.subscribeDetailCount
}}
</div>
<div class="text">申购</div>
</div>
</div>
</div>
<div class="two-row-item other" style="margin-right: 15px">
<div class="label">采购订单</div>
<div class="value">
<div style="margin-right: 15px">
<div class="child-value">
{{ allData.purchaseStatistics.purchaseOrder.purchaseCount }}
</div>
<div class="text">订单数</div>
</div>
<div style="margin-right: 15px">
<div class="child-value color-blue">
CNY
{{
moneyFormat(
allData.purchaseStatistics.purchaseOrder.purchaseAmount,
2
)
}}
</div>
<div class="text">金额</div>
</div>
<div>
<div class="child-value color-blue">
CNY
{{
moneyFormat(
allData.purchaseStatistics.purchaseOrder
.purchasePayAmount,
2
)
}}
</div>
<div class="text">已付款</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="bck" style="margin-left: 20px">
<TitleInfo :content="titleList[6]"></TitleInfo>
<div class="one-row" style="margin-top: 15px">
<div class="one-row-item first" style="margin-right: 15px">
<div class="label">发起</div>
<div class="value">
{{ allData.flowStatistics.flowExampleCount }}
</div>
</div>
<div class="one-row-item other">
<div class="label">待处理</div>
<div class="value">
{{ allData.flowStatistics.waitFlowExampleCount }}
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
</template>
<script setup>
import TitleInfo from "@/components/TitleInfo/index.vue";
import useUserStore from "@/store/modules/user";
import moment from "moment";
const titleList = [
"客户情况",
"产品情况",
"往来邮件",
"销售行为（存量客户）",
"销售行为（新增客户）",
"采购行为",
"流程统计",
];
const userList = ref([]);
const selectUser = ref(["all"]);
const { proxy } = getCurrentInstance();
const loading = ref(false);
const queryForm = reactive({
userIds: [],
beginTime: "",
endTime: "",
timeArr: "",
});
const allData = ref({
customerSituation: {},
productSituation: {},
commMail: {},
flowStatistics: {},
saleSituation: {
quotationAddStatistics: {},
contractAddStatistics: {},
claimAddStatistics: {},
},
saleAddSituation: {
quotationAddStatistics: {},
contractAddStatistics: {},
claimAddStatistics: {},
},
purchaseStatistics: {
waitPurchaseStatistics: {},
purchaseOrder: {},
},
});
const getData = () => {
loading.value = true;
proxy.post("/employeeAnalysis/info", queryForm).then((res) => {
allData.value = res;
loading.value = false;
});
};
const getDict = () => {
proxy
.get("/tenantUser/list", {
pageNum: 1,
pageSize: 10000,
tenantId: useUserStore().user.tenantId,
})
.then((res) => {
userList.value = res.rows.map((item) => {
return {
label: item.nickName,
value: item.userId,
};
});
userList.value.unshift({
label: "全部",
value: "all",
});
});
};
const onQuery = () => {
if (queryForm.timeArr.length > 1) {
queryForm.beginTime = queryForm.timeArr[0];
queryForm.endTime = queryForm.timeArr[1];
} else {
queryForm.beginTime = "";
queryForm.endTime = "";
}
getData();
};
const changeUser = (val) => {
selectUser.value = val.includes("all") ? ["all"] : val;
queryForm.userIds = val.includes("all") ? [] : val;
onQuery();
};
const selectBtn = ref(1);
const clickBtn = (val) => {
selectBtn.value = val;
let today = new Date();
let startDate = null;
let endDate = null;
let year = null;
let month = null;
switch (val) {
case 1:
startDate = new Date(today);
startDate.setDate(today.getDate() - 29);
endDate = new Date(today);
break;
case 2:
year = today.getFullYear();
month = today.getMonth();
startDate = new Date(year, month, 1);
endDate = new Date(year, month + 1, 0);
break;
case 3:
year = today.getFullYear();
month = today.getMonth() - 1;
startDate = new Date(year, month, 1);
endDate = new Date(year, month + 1, 0);
break;
case 4:
year = today.getFullYear();
startDate = new Date(year - 1, today.getMonth(), today.getDate());
endDate = new Date(year, today.getMonth(), today.getDate());
break;
case 5:
year = today.getFullYear();
startDate = new Date(year - 1, 0, 1);
endDate = new Date(year - 1, 11, 31);
break;
case 6:
year = today.getFullYear();
startDate = new Date(year, 0, 1);
endDate = new Date(year, 11, 31);
break;
default:
startDate = new Date(today);
startDate.setDate(today.getDate() - 29);
endDate = new Date(today);
break;
}
queryForm.timeArr = [
moment(startDate).format("yyyy-MM-DD"),
moment(endDate).format("yyyy-MM-DD"),
];
onQuery();
};
getDict();
clickBtn(1);
</script>
<style lang="scss" scoped>
.tenant {
padding: 20px;
}
.bck {
background-color: #fff;
padding: 15px;
}
.one-row {
display: flex;
.one-row-item {
min-width: 160px;
max-width: 180px;
padding: 15px;
border-radius: 10px;
.label {
margin-bottom: 10px;
font-size: 14px;
color: #333333;
}
.value {
font-size: 24px;
font-weight: 700;
}
}
.first {
background: #fff1e1;
.value {
color: #333333;
}
.label::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background: #ff9315;
border-radius: 50%;
margin-right: 10px;
}
}
.other {
background: #eff6ff;
.value {
color: #333333;
}
.label::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background: #0084ff;
border-radius: 50%;
margin-right: 10px;
}
}
}
.two-row {
display: flex;
.two-row-item {
min-width: 320px;
max-width: 320px;
padding: 15px;
border-radius: 10px;
.label {
margin-bottom: 10px;
font-size: 14px;
font-weight: 700;
color: #333333;
}
.value {
display: flex;
font-size: 14px;
justify-content: space-between;
padding-right: 30px;
.child-value {
font-size: 16px;
font-weight: 700;
}
.text {
// color: #333333;
font-size: 14px;
margin-top: 10px;
}
}
}
.first {
background: #fff1e1;
// .child-value {
// color: #333333;
// }
}
.other {
background: #eff6ff;
// .child-value {
// color: #0084ff;
// }
}
.color-blue {
color: #0084ff;
}
}
.btnBck {
background: #0084ff;
color: #fff;
}
.scroll {
overflow-x: auto;
}
</style>