|
@@ -13,10 +13,16 @@ import {
|
|
|
exportFile
|
|
|
} from './api';
|
|
|
import { downloadFile } from '@/utils/tools';
|
|
|
+import { dealWithTranslation } from '@/utils/translationProcessing'
|
|
|
+import personnelSearch from '@/components/translationComponent/personnelSearch/personnelSearch.vue';
|
|
|
+import treeSelect from '@/components/translationComponent/treeSelect/treeSelect.vue'
|
|
|
+import { useStore } from '@/store/index'
|
|
|
+import { storeToRefs } from 'pinia';
|
|
|
|
|
|
+const { userInfo } = storeToRefs(useStore());
|
|
|
const isLoading = ref(false);
|
|
|
const dataSource = ref([]);
|
|
|
-const form = reactive({ type: 1, date: undefined, member: undefined });
|
|
|
+const form = reactive({ type: 1, date: undefined, member: '' });
|
|
|
const memberOptions: any = ref([]);
|
|
|
// 0 客户总量 1 客户转化率
|
|
|
const dataType = ref<0 | 1>(0);
|
|
@@ -76,6 +82,19 @@ const queryOverall = async (payload?: RequestProps) => {
|
|
|
name: form.type === 1 ? d.name : d.departmentName
|
|
|
}));
|
|
|
|
|
|
+ const sourceData = data.map((d: any) => ({
|
|
|
+ name: form.type === 1 ? d.name : d.departmentName,
|
|
|
+ ['成交客户数']: d.customerDeal,
|
|
|
+ ['新增客户数']: d.customertotal
|
|
|
+ }))
|
|
|
+
|
|
|
+ const sourceDataTypes = sourceData.map((item: any) => {
|
|
|
+ return {
|
|
|
+ type: form.type === 1 ? 'userName' : 'departmentName',
|
|
|
+ id: item.name
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
// @ts-ignore
|
|
|
chartOptions.series = [
|
|
|
{ type: 'bar', barWidth: 20 },
|
|
@@ -84,11 +103,12 @@ const queryOverall = async (payload?: RequestProps) => {
|
|
|
// @ts-ignore
|
|
|
chartOptions.dataset.dimensions = ['name', '成交客户数', '新增客户数'];
|
|
|
// @ts-ignore
|
|
|
- chartOptions.dataset.source = data.map((d) => ({
|
|
|
- name: form.type === 1 ? d.name : d.departmentName,
|
|
|
- ['成交客户数']: d.customerDeal,
|
|
|
- ['新增客户数']: d.customertotal
|
|
|
- }));
|
|
|
+ chartOptions.dataset.source = userInfo.userNameNeedTranslate == 1 ? dealWithTranslation(sourceDataTypes, sourceData) : sourceData
|
|
|
+ // chartOptions.dataset.source = data.map((d) => ({
|
|
|
+ // name: form.type === 1 ? d.name : d.departmentName,
|
|
|
+ // ['成交客户数']: d.customerDeal,
|
|
|
+ // ['新增客户数']: d.customertotal
|
|
|
+ // }));
|
|
|
chartOptions.legend = {};
|
|
|
};
|
|
|
|
|
@@ -103,15 +123,28 @@ const queryConversion = async (payload?: RequestProps) => {
|
|
|
dealRate: d.dealRate * 100
|
|
|
}));
|
|
|
|
|
|
+ const sourceData = data.map((d: any) => ({
|
|
|
+ name: form.type === 1 ? d.name : d.departmentName,
|
|
|
+ ['客户转化率(%)']: d.dealRate * 100
|
|
|
+ }))
|
|
|
+
|
|
|
+ const sourceDataTypes = sourceData.map((item: any) => {
|
|
|
+ return {
|
|
|
+ type: form.type === 1 ? 'userName' : 'departmentName',
|
|
|
+ id: item.name
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
// @ts-ignore
|
|
|
chartOptions.series = [{ type: 'bar', barWidth: 20 }];
|
|
|
// @ts-ignore
|
|
|
chartOptions.dataset.dimensions = ['name', '客户转化率(%)'];
|
|
|
// @ts-ignore
|
|
|
- chartOptions.dataset.source = data.map((d) => ({
|
|
|
- name: form.type === 1 ? d.name : d.departmentName,
|
|
|
- ['客户转化率(%)']: d.dealRate * 100
|
|
|
- }));
|
|
|
+ chartOptions.dataset.source = userInfo.userNameNeedTranslate == 1 ? dealWithTranslation(sourceDataTypes, sourceData) : sourceData
|
|
|
+ // chartOptions.dataset.source = data.map((d) => ({
|
|
|
+ // name: form.type === 1 ? d.name : d.departmentName,
|
|
|
+ // ['客户转化率(%)']: d.dealRate * 100
|
|
|
+ // }));
|
|
|
chartOptions.legend = undefined;
|
|
|
};
|
|
|
|
|
@@ -144,13 +177,13 @@ watchEffect(async () => {
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-select v-model="form.type" @change="form.member = undefined" style="width: 112px">
|
|
|
+ <el-select v-model="form.type" @change="form.member = ''" style="width: 112px">
|
|
|
<el-option label="按部门" :value="0" />
|
|
|
<el-option label="按员工" :value="1" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-select
|
|
|
+ <!-- <el-select
|
|
|
style="width: 208px"
|
|
|
clearable
|
|
|
v-model="form.member"
|
|
@@ -162,7 +195,13 @@ watchEffect(async () => {
|
|
|
:label="date.name"
|
|
|
:value="date.id"
|
|
|
/>
|
|
|
- </el-select>
|
|
|
+ </el-select> -->
|
|
|
+ <template v-if="form.type == 1">
|
|
|
+ <personnel-search v-model="form.member" :size="''" placeholder="选择员工" width="240px"></personnel-search>
|
|
|
+ </template>
|
|
|
+ <template v-if="form.type == 0">
|
|
|
+ <tree-select v-model="form.member" :size="''" checkStrictly placeholder="选择部门" width="240px"></tree-select>
|
|
|
+ </template>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<!-- :loading="isLoading" -->
|
|
@@ -180,7 +219,7 @@ watchEffect(async () => {
|
|
|
@tab-change="
|
|
|
() => {
|
|
|
form.date = undefined;
|
|
|
- form.member = undefined;
|
|
|
+ form.member = '';
|
|
|
form.type = 1;
|
|
|
dataSource = [];
|
|
|
}
|
|
@@ -194,7 +233,11 @@ watchEffect(async () => {
|
|
|
<Echarts :option="chartOptions"></Echarts>
|
|
|
</div>
|
|
|
<el-table :data="dataSource">
|
|
|
- <el-table-column prop="name" label="名称" />
|
|
|
+ <el-table-column prop="name" label="名称">
|
|
|
+ <template #default="scope">
|
|
|
+ <TextTranslation translationTypes="userName" :translationValue="scope.row.name"></TextTranslation>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column prop="dealRate" label="客户转化率(%)" v-if="dataType === 1" />
|
|
|
<template v-else>
|
|
|
<el-table-column prop="customertotal" label="新增客户数" />
|