|
@@ -5,217 +5,17 @@
|
|
|
>添加客户</el-button
|
|
|
>
|
|
|
</div>
|
|
|
- <div
|
|
|
- style="padding: 20px 20px 0 20px; background: #fff; margin-bottom: 20px"
|
|
|
- >
|
|
|
- <div style="display: flex">
|
|
|
- <div style="font-size: 14px; cursor: pointer" class="by-dropdown">
|
|
|
- <div class="by-dropdown-title">
|
|
|
- <span>{{
|
|
|
- dictValueLabel(
|
|
|
- sourceList.paginationTwo.statisticsType,
|
|
|
- statisticsType
|
|
|
- )
|
|
|
- }}</span>
|
|
|
- <el-icon style="margin-left: 5px; font-size: 16px"
|
|
|
- ><CaretBottom
|
|
|
- /></el-icon>
|
|
|
- </div>
|
|
|
- <ul class="by-dropdown-lists">
|
|
|
- <li
|
|
|
- v-for="item in statisticsType"
|
|
|
- :key="item.value"
|
|
|
- @click="searchItemSelect(item.value)"
|
|
|
- style="
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- "
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- style="
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- margin: 10px 0 0 10px;
|
|
|
- flex-wrap: wrap;
|
|
|
- "
|
|
|
- >
|
|
|
- <div
|
|
|
- style="
|
|
|
- padding: 20px;
|
|
|
- border-radius: 10px;
|
|
|
- width: 200px;
|
|
|
- background-color: #d1caff59;
|
|
|
- margin: 0 20px 20px 0;
|
|
|
- "
|
|
|
- >
|
|
|
- <div style="margin-bottom: 10px; display: flex">
|
|
|
- <div
|
|
|
- style="
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- background-color: #5bacff;
|
|
|
- border-radius: 50px;
|
|
|
- margin-top: 6px;
|
|
|
- "
|
|
|
- ></div>
|
|
|
- <span style="padding-left: 8px">合计</span>
|
|
|
- </div>
|
|
|
- <div style="color: black; font-size: 20px; font-weight: 700">
|
|
|
- {{ statisticalData.countAmount }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <template v-if="sourceList.paginationTwo.statisticsType === 1">
|
|
|
- <div v-for="(item, index) in customerSource" :key="index">
|
|
|
- <div
|
|
|
- v-if="getNum(item.value) > 0"
|
|
|
- style="
|
|
|
- padding: 20px;
|
|
|
- border-radius: 10px;
|
|
|
- width: 200px;
|
|
|
- background-color: #a2d8ff70;
|
|
|
- margin: 0 20px 20px 0;
|
|
|
- "
|
|
|
- >
|
|
|
- <div style="margin-bottom: 10px; display: flex">
|
|
|
- <div
|
|
|
- style="
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- background-color: #5bacff;
|
|
|
- border-radius: 50px;
|
|
|
- margin-top: 6px;
|
|
|
- "
|
|
|
- ></div>
|
|
|
- <el-tooltip class="box-item" effect="light" placement="bottom">
|
|
|
- <template #content>
|
|
|
- <div
|
|
|
- style="
|
|
|
- max-width: 400px;
|
|
|
- max-height: 50vh;
|
|
|
- word-break: break-all;
|
|
|
- "
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div class="statistics-text" style="cursor: pointer">
|
|
|
- {{ item.label }}
|
|
|
- </div>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div style="color: black; font-size: 20px; font-weight: 700">
|
|
|
- {{ getNum(item.value) }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else-if="sourceList.paginationTwo.statisticsType === 2">
|
|
|
- <div v-for="(item, index) in customerStatus" :key="index">
|
|
|
- <div
|
|
|
- v-if="getNum(item.value) > 0"
|
|
|
- style="
|
|
|
- padding: 20px;
|
|
|
- border-radius: 10px;
|
|
|
- width: 200px;
|
|
|
- background-color: #a2d8ff70;
|
|
|
- margin: 0 20px 20px 0;
|
|
|
- "
|
|
|
- >
|
|
|
- <div style="margin-bottom: 10px; display: flex">
|
|
|
- <div
|
|
|
- style="
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- background-color: #5bacff;
|
|
|
- border-radius: 50px;
|
|
|
- margin-top: 6px;
|
|
|
- "
|
|
|
- ></div>
|
|
|
- <el-tooltip class="box-item" effect="light" placement="bottom">
|
|
|
- <template #content>
|
|
|
- <div
|
|
|
- style="
|
|
|
- max-width: 400px;
|
|
|
- max-height: 50vh;
|
|
|
- word-break: break-all;
|
|
|
- "
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div class="statistics-text" style="cursor: pointer">
|
|
|
- {{ item.label }}
|
|
|
- </div>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div style="color: black; font-size: 20px; font-weight: 700">
|
|
|
- {{ getNum(item.value) }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else-if="sourceList.paginationTwo.statisticsType === 3">
|
|
|
- <div v-for="(item, index) in userList" :key="index">
|
|
|
- <div
|
|
|
- v-if="getNum(item.value) > 0"
|
|
|
- style="
|
|
|
- padding: 20px;
|
|
|
- border-radius: 10px;
|
|
|
- width: 200px;
|
|
|
- background-color: #a2d8ff70;
|
|
|
- margin: 0 20px 20px 0;
|
|
|
- "
|
|
|
- >
|
|
|
- <div style="margin-bottom: 10px; display: flex">
|
|
|
- <div
|
|
|
- style="
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- background-color: #5bacff;
|
|
|
- border-radius: 50px;
|
|
|
- margin-top: 6px;
|
|
|
- "
|
|
|
- ></div>
|
|
|
- <el-tooltip class="box-item" effect="light" placement="bottom">
|
|
|
- <template #content>
|
|
|
- <div
|
|
|
- style="
|
|
|
- max-width: 400px;
|
|
|
- max-height: 50vh;
|
|
|
- word-break: break-all;
|
|
|
- "
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div class="statistics-text" style="cursor: pointer">
|
|
|
- {{ item.label }}
|
|
|
- </div>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div style="color: black; font-size: 20px; font-weight: 700">
|
|
|
- {{ getNum(item.value) }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
<byTable
|
|
|
:source="sourceList.data"
|
|
|
:pagination="sourceList.pagination"
|
|
|
:config="config"
|
|
|
:loading="loading"
|
|
|
:selectConfig="selectConfig"
|
|
|
+ :statConfig="statConfig"
|
|
|
highlight-current-row
|
|
|
@moreSearch="moreSearch"
|
|
|
@get-list="getList"
|
|
|
+ ref="table"
|
|
|
>
|
|
|
<template #isTop="{ item }">
|
|
|
<div>
|
|
@@ -933,6 +733,69 @@ const sourceList = ref({
|
|
|
type: null,
|
|
|
},
|
|
|
});
|
|
|
+
|
|
|
+const statConfig = computed(() => [
|
|
|
+ {
|
|
|
+ label: "客户来源统计",
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ label: "合计",
|
|
|
+ num: statisticalData.value.countAmount,
|
|
|
+ type: 2,
|
|
|
+ },
|
|
|
+ ...customerSource.value
|
|
|
+ .filter((a) => getNum(a.value) > 0)
|
|
|
+ .map((b) => {
|
|
|
+ let num = getNum(b.value);
|
|
|
+ return {
|
|
|
+ label: b.label,
|
|
|
+ num,
|
|
|
+ type: 1,
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "客户类型统计",
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ label: "合计",
|
|
|
+ num: statisticalData.value.countAmount,
|
|
|
+ type: 2,
|
|
|
+ },
|
|
|
+ ...customerStatus.value
|
|
|
+ .filter((a) => getNum(a.value) > 0)
|
|
|
+ .map((b) => {
|
|
|
+ let num = getNum(b.value);
|
|
|
+ return {
|
|
|
+ label: b.label,
|
|
|
+ num,
|
|
|
+ type: 1,
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "业务员统计",
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ label: "合计",
|
|
|
+ num: statisticalData.value.countAmount,
|
|
|
+ type: 2,
|
|
|
+ },
|
|
|
+ ...userList.value
|
|
|
+ .filter((a) => getNum(a.value) > 0)
|
|
|
+ .map((b) => {
|
|
|
+ let num = getNum(b.value);
|
|
|
+ return {
|
|
|
+ label: b.label,
|
|
|
+ num,
|
|
|
+ type: 1,
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ ],
|
|
|
+ },
|
|
|
+]);
|
|
|
const selectConfig = computed(() => {
|
|
|
return [
|
|
|
{
|
|
@@ -1705,10 +1568,7 @@ const addTop = (item) => {
|
|
|
item.isTop = 1;
|
|
|
});
|
|
|
};
|
|
|
-const searchItemSelect = (val) => {
|
|
|
- sourceList.value.paginationTwo.statisticsType = val;
|
|
|
- obtainStatisticalData();
|
|
|
-};
|
|
|
+
|
|
|
const statisticalData = ref({
|
|
|
countAmount: 0,
|
|
|
customerList: [],
|
|
@@ -1881,6 +1741,17 @@ const changeSearchTag = (val) => {
|
|
|
addTagSearchShow.value = false;
|
|
|
addSearchTag.value = "";
|
|
|
};
|
|
|
+
|
|
|
+const table = ref(null);
|
|
|
+onMounted(() => {
|
|
|
+ watch(
|
|
|
+ () => table.value.statSelectVal,
|
|
|
+ (val) => {
|
|
|
+ sourceList.value.paginationTwo.statisticsType = val + 1;
|
|
|
+ obtainStatisticalData();
|
|
|
+ }
|
|
|
+ );
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|