refactor(views): 统一将 period 相关命名改为 periods
修改多个组件中的 class 名称、变量名和事件名，将 period 改为 periods 以保持命名一致性 移除部分注释掉的代码和冗余注释
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<h3>沟通总数据</h3>
|
||||
<span class="metric-period">本周</span>
|
||||
<span class="metric-periods">本周</span>
|
||||
</div>
|
||||
<div class="communication-cards">
|
||||
<div class="comm-card">
|
||||
@@ -68,7 +68,7 @@ defineProps({
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.metric-period {
|
||||
.metric-periods {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<h3>转化对比图</h3>
|
||||
<div class="time-selector">
|
||||
<select v-model="selectedTimeRange" @change="handleTimeRangeChange" class="time-select">
|
||||
<option value="period">本期 vs 上期</option>
|
||||
<option value="periods">本期 vs 上期</option>
|
||||
<option value="month">本月 vs 上月</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -67,15 +67,15 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(['time-range-change']);
|
||||
|
||||
const selectedTimeRange = ref('period');
|
||||
const selectedTimeRange = ref('periods');
|
||||
|
||||
// 计算属性：当前和上一期的标签
|
||||
const currentPeriodLabel = computed(() => {
|
||||
return selectedTimeRange.value === 'period' ? '本期' : '本月';
|
||||
return selectedTimeRange.value === 'periods' ? '本期' : '本月';
|
||||
});
|
||||
|
||||
const previousPeriodLabel = computed(() => {
|
||||
return selectedTimeRange.value === 'period' ? '上期' : '上月';
|
||||
return selectedTimeRange.value === 'periods' ? '上期' : '上月';
|
||||
});
|
||||
|
||||
// 计算属性：图表数据
|
||||
|
||||
@@ -73,7 +73,7 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['period-change', 'ranking-type-change']);
|
||||
const emit = defineEmits(['periods-change', 'ranking-type-change']);
|
||||
|
||||
const rankingPeriod = ref('month');
|
||||
const rankingType = ref('red'); // 'red' 为红榜，'black' 为黑榜
|
||||
@@ -94,7 +94,7 @@ const displayData = computed(() => {
|
||||
});
|
||||
|
||||
const handlePeriodChange = () => {
|
||||
emit('period-change', rankingPeriod.value);
|
||||
emit('periods-change', rankingPeriod.value);
|
||||
};
|
||||
|
||||
const handleRankingTypeChange = (type) => {
|
||||
@@ -168,7 +168,7 @@ const handleRankingTypeChange = (type) => {
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.period-select {
|
||||
.periods-select {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
@@ -178,11 +178,11 @@ const handleRankingTypeChange = (type) => {
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.period-select:hover {
|
||||
.periods-select:hover {
|
||||
border-color: #3498db;
|
||||
}
|
||||
|
||||
.period-select:focus {
|
||||
.periods-select:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<h3>团队业绩排行榜</h3>
|
||||
<select v-model="rankingPeriod" class="period-select" @change="onPeriodChange">
|
||||
<select v-model="rankingPeriod" class="periods-select" @change="onPeriodChange">
|
||||
<option value="periods">本期</option>
|
||||
<option value="month">月度</option>
|
||||
<option value="year">年度</option>
|
||||
@@ -17,9 +17,9 @@
|
||||
<div class="employee-info">
|
||||
<div class="employee-name">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="employee-dept">转化率：{{ item.average_deals_per_member }}</div>
|
||||
<!-- <div class="employee-dept">转化率：{{ item.average_deals_per_member }}</div> -->
|
||||
<div class="performance-value">
|
||||
成交单数：{{ formatNumber(item.performance) }}
|
||||
成单数：{{ formatNumber(item.performance) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -37,12 +37,12 @@ defineProps({
|
||||
getRankClass: Function
|
||||
});
|
||||
|
||||
const emit = defineEmits(['period-change']);
|
||||
const emit = defineEmits(['periods-change']);
|
||||
|
||||
const rankingPeriod = ref('periods');
|
||||
|
||||
const onPeriodChange = () => {
|
||||
emit('period-change', rankingPeriod.value);
|
||||
emit('periods-change', rankingPeriod.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -70,7 +70,7 @@ const onPeriodChange = () => {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.period-select {
|
||||
.periods-select {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 6px 10px;
|
||||
|
||||
@@ -50,7 +50,7 @@ defineProps({
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.metric-period {
|
||||
.metric-periods {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
:ranking-data="formattedSalesRankingData"
|
||||
:format-number="formatNumber"
|
||||
:get-rank-class="getRankClass"
|
||||
@period-change="handleRankingPeriodChange"
|
||||
@periods-change="handleRankingPeriodChange"
|
||||
@ranking-type-change="getCompanySalesRank"
|
||||
/>
|
||||
<!-- 优质通话 -->
|
||||
@@ -51,7 +51,7 @@
|
||||
:ranking-data="formattedRankingData"
|
||||
:format-number="formatNumber"
|
||||
:get-rank-class="getRankClass"
|
||||
@period-change="getCenterSalesRank"
|
||||
@periods-change="getCenterSalesRank"
|
||||
/>
|
||||
<!-- 客户类型占比 -->
|
||||
<customer-type :customer-data="customerTypeRatio" @category-change="getCustomerTypeRatio" />
|
||||
@@ -433,7 +433,7 @@ const formattedComparisonData = computed(() => {
|
||||
}
|
||||
|
||||
// 根据 check_type 确定时间范围键
|
||||
const timeRangeKey = checkType === 'month' ? 'month' : 'period';
|
||||
const timeRangeKey = checkType === 'month' ? 'month' : 'periods';
|
||||
const stageOrder = ['线索总数', '加微', '到课', '付定金', '成交'];
|
||||
|
||||
const comparisonArray = stageOrder.map(stageName => ({
|
||||
@@ -445,7 +445,7 @@ const formattedComparisonData = computed(() => {
|
||||
|
||||
// 同时返回period和month两个键，确保组件能找到对应数据
|
||||
const result = {
|
||||
period: comparisonArray,
|
||||
periods: comparisonArray,
|
||||
month: comparisonArray
|
||||
};
|
||||
|
||||
@@ -455,7 +455,7 @@ const formattedComparisonData = computed(() => {
|
||||
|
||||
async function getConversionComparison(data) {
|
||||
const params={
|
||||
check_type:data
|
||||
check_type:data //month periods
|
||||
}
|
||||
try {
|
||||
const res = await getCompanyConversionRateVsLast(params)
|
||||
@@ -567,7 +567,7 @@ const formattedSalesRankingData = computed(() => {
|
||||
});
|
||||
|
||||
// 处理销售排行榜期间变化
|
||||
const handleRankingPeriodChange = (period) => {
|
||||
const handleRankingPeriodChange = (periods) => {
|
||||
// 根据期间参数调用相应的函数，这里默认调用红榜数据
|
||||
getCompanySalesRank('red');
|
||||
};
|
||||
@@ -579,165 +579,6 @@ async function getCompanySalesRank(Rank) {
|
||||
try {
|
||||
const res = await getSalesMonthlyPerformance(params)
|
||||
companySalesRank.value = res.data
|
||||
/**
|
||||
* "data": {
|
||||
"user_name": "赵世敬",
|
||||
"user_level": 5,
|
||||
"rank_type": "red",
|
||||
"sales_monthly_performance_red": [
|
||||
{
|
||||
"name": "贾星草",
|
||||
"department": "洋葱管理层",
|
||||
"deal_count": 2,
|
||||
"conversion_rate": "2.78%",
|
||||
"rank": 1
|
||||
},
|
||||
{
|
||||
"name": "常志洁",
|
||||
"department": "星火二部--王志恒",
|
||||
"deal_count": 2,
|
||||
"conversion_rate": "4.17%",
|
||||
"rank": 2
|
||||
},
|
||||
{
|
||||
"name": "李俊",
|
||||
"department": "星火二部--王志恒",
|
||||
"deal_count": 2,
|
||||
"conversion_rate": "3.77%",
|
||||
"rank": 3
|
||||
},
|
||||
{
|
||||
"name": "高有桔",
|
||||
"department": "勇士一部-张茂华",
|
||||
"deal_count": 2,
|
||||
"conversion_rate": "3.12%",
|
||||
"rank": 4
|
||||
},
|
||||
{
|
||||
"name": "马肖剑",
|
||||
"department": "星耀三部-周毅",
|
||||
"deal_count": 1,
|
||||
"conversion_rate": "1.05%",
|
||||
"rank": 5
|
||||
},
|
||||
{
|
||||
"name": "刘思雨",
|
||||
"department": "星耀三部-周毅",
|
||||
"deal_count": 1,
|
||||
"conversion_rate": "2.27%",
|
||||
"rank": 6
|
||||
},
|
||||
{
|
||||
"name": "王慧",
|
||||
"department": "聚星三部--张卓",
|
||||
"deal_count": 1,
|
||||
"conversion_rate": "2.00%",
|
||||
"rank": 7
|
||||
},
|
||||
{
|
||||
"name": "寇帅杰",
|
||||
"department": "巅峰一部-贾星草",
|
||||
"deal_count": 1,
|
||||
"conversion_rate": "2.13%",
|
||||
"rank": 8
|
||||
},
|
||||
{
|
||||
"name": "王奥博",
|
||||
"department": "巅峰二部-纪洋洋",
|
||||
"deal_count": 1,
|
||||
"conversion_rate": "1.14%",
|
||||
"rank": 9
|
||||
},
|
||||
{
|
||||
"name": "董富忠",
|
||||
"department": "巅峰三部--刘东洋",
|
||||
"deal_count": 1,
|
||||
"conversion_rate": "0.95%",
|
||||
"rank": 10
|
||||
}
|
||||
]
|
||||
}
|
||||
*/
|
||||
// 黑榜数据
|
||||
/**
|
||||
* "data": {
|
||||
"user_name": "赵世敬",
|
||||
"user_level": 5,
|
||||
"rank_type": "black",
|
||||
"sales_monthly_performance_black": [
|
||||
{
|
||||
"name": "马然",
|
||||
"department": "美团业务支持部",
|
||||
"deal_count": 0,
|
||||
"conversion_rate": "0.00%",
|
||||
"rank": 1
|
||||
},
|
||||
{
|
||||
"name": "郭可英",
|
||||
"department": "技术部",
|
||||
"deal_count": 0,
|
||||
"conversion_rate": "0.00%",
|
||||
"rank": 2
|
||||
},
|
||||
{
|
||||
"name": "杨启晨",
|
||||
"department": "星火一部--张瑾",
|
||||
"deal_count": 0,
|
||||
"conversion_rate": "0.00%",
|
||||
"rank": 3
|
||||
},
|
||||
{
|
||||
"name": "程慧仟",
|
||||
"department": "星耀三部-周毅",
|
||||
"deal_count": 0,
|
||||
"conversion_rate": "0.00%",
|
||||
"rank": 4
|
||||
},
|
||||
{
|
||||
"name": "常琳",
|
||||
"department": "亮剑二部-田贵星",
|
||||
"deal_count": 0,
|
||||
"conversion_rate": "0.00%",
|
||||
"rank": 5
|
||||
},
|
||||
{
|
||||
"name": "李晓雪",
|
||||
"department": "星火一部--张瑾",
|
||||
"deal_count": 0,
|
||||
"conversion_rate": "0.00%",
|
||||
"rank": 6
|
||||
},
|
||||
{
|
||||
"name": "杨朵朵",
|
||||
"department": "星耀三部-周毅",
|
||||
"deal_count": 0,
|
||||
"conversion_rate": "0.00%",
|
||||
"rank": 7
|
||||
},
|
||||
{
|
||||
"name": "张明起",
|
||||
"department": "星耀一部-吕明月",
|
||||
"deal_count": 0,
|
||||
"conversion_rate": "0.00%",
|
||||
"rank": 8
|
||||
},
|
||||
{
|
||||
"name": "刘英杰",
|
||||
"department": "星耀一部-吕明月",
|
||||
"deal_count": 0,
|
||||
"conversion_rate": "0.00%",
|
||||
"rank": 9
|
||||
},
|
||||
{
|
||||
"name": "孟凡玉",
|
||||
"department": "星耀一部-吕明月",
|
||||
"deal_count": 0,
|
||||
"conversion_rate": "0.00%",
|
||||
"rank": 10
|
||||
}
|
||||
]
|
||||
}
|
||||
*/
|
||||
} catch (error) {
|
||||
console.error("获取销售月度业绩红黑榜失败:", error);
|
||||
}
|
||||
@@ -805,55 +646,6 @@ async function CusotomGetLevelTree() {
|
||||
const res = await getLevelTree()
|
||||
console.log(1222222,res)
|
||||
levelTree.value = res.data
|
||||
/**
|
||||
* "data": {
|
||||
"user_name": "赵世敬",
|
||||
"user_level": 5,
|
||||
"level_tree": {
|
||||
"center_leaders": [
|
||||
{
|
||||
"name": "郭可英",
|
||||
"advanced_managers": [
|
||||
{
|
||||
"name": "李小燕",
|
||||
"managers": []
|
||||
},
|
||||
{
|
||||
"name": "郭子奇",
|
||||
"managers": [
|
||||
{
|
||||
"name": "杨朵朵"
|
||||
},
|
||||
{
|
||||
"name": "张明起"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "刘瑞",
|
||||
"advanced_managers": [
|
||||
{
|
||||
"name": "陈盼良",
|
||||
"managers": [
|
||||
{
|
||||
"name": "马然"
|
||||
},
|
||||
{
|
||||
"name": "杨启晨"
|
||||
},
|
||||
{
|
||||
"name": "韦少杰"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
*/
|
||||
} catch (error) {
|
||||
console.error("获取级别树失败:", error);
|
||||
}
|
||||
@@ -862,19 +654,15 @@ async function CusotomGetLevelTree() {
|
||||
const detailData = ref({});
|
||||
async function getDetailData(params) {
|
||||
if(params?.center_leader){
|
||||
// alert(11111)
|
||||
try {
|
||||
const res = await getDetailedDataTable(params)
|
||||
console.log('详细数据表格:', res)
|
||||
detailData.value = res.data
|
||||
} catch (error) {
|
||||
console.error("获取详细数据表格失败:", error);
|
||||
}
|
||||
}else{
|
||||
// alert(22222)
|
||||
try {
|
||||
const res = await getDetailedDataTable()
|
||||
console.log('详细数据表格:', res)
|
||||
detailData.value = res.data
|
||||
} catch (error) {
|
||||
console.error("获取详细数据表格失败:", error);
|
||||
@@ -978,7 +766,7 @@ onMounted(async() => {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.metric-period {
|
||||
.metric-periods {
|
||||
font-size: 12px;
|
||||
color: #718096;
|
||||
background: #edf2f7;
|
||||
@@ -1317,7 +1105,7 @@ onMounted(async() => {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.period-select {
|
||||
.periods-select {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 4px;
|
||||
|
||||
Reference in New Issue
Block a user