feat: 实现卡片可见性管理并优化多个组件功能

- 在UserDropdown组件中添加卡片名称映射
- 为sale.vue、seniorManager.vue、topone.vue和secondTop.vue添加卡片可见性控制
- 在CustomerDetail.vue中添加通话数据检查逻辑
- 将https.js中的API基础路径切换为生产环境
This commit is contained in:
2025-09-03 11:41:09 +08:00
parent e94ea6b592
commit f47211b0b0
7 changed files with 148 additions and 40 deletions

View File

@@ -28,7 +28,10 @@
<div v-if="!isRouteNavigation">
<!-- 用户下拉菜单 -->
<UserDropdown />
<UserDropdown
:card-visibility="cardVisibility"
@update-card-visibility="updateCardVisibility"
/>
</div>
</div>
@@ -39,37 +42,52 @@
<!-- Top Section - Center Overview and Action Items -->
<div class="top-section">
<!-- Center Performance Overview -->
<CenterOverview :key="CheckType" :overall-data="overallCenterPerformance" @update-check-type="updateCheckType" />
<CenterOverview
v-if="cardVisibility.centerOverview"
:key="CheckType"
:overall-data="overallCenterPerformance"
@update-check-type="updateCheckType"
/>
<!-- Action Items (Compact) -->
<div class="action-items-compact">
<div v-if="cardVisibility.actionItems" class="action-items-compact">
<ActionItems :selected-group="selectedGroup" />
</div>
</div>
<div class="BB-section">
<!--客户类型占比-->
<CustomerType :customer-data="customerTypeDistribution" @category-change="handleCustomerTypeChange" />
<CustomerType
v-if="cardVisibility.customerType"
:customer-data="customerTypeDistribution"
@category-change="handleCustomerTypeChange"
/>
<!-- 优秀录音 -->
<GoodMusic :quality-calls="excellentRecord" />
<GoodMusic
v-if="cardVisibility.goodMusic"
:quality-calls="excellentRecord"
/>
<!-- 客户问题排行 -->
<ProblemRanking :ranking-data="formattedUrgentNeedData" />
<ProblemRanking
v-if="cardVisibility.problemRanking"
:ranking-data="formattedUrgentNeedData"
/>
</div>
<!-- Bottom Section -->
<div class="bottom-section">
<!-- Left Section - Group Performance Ranking -->
<div class="left-section">
<div v-if="cardVisibility.groupRanking" class="left-section">
<GroupRanking :groups="groups" :selected-group="selectedGroup" :conversion-data="conversionRateVsAverage" @select-group="selectGroup" />
</div>
<!-- Right Section - Group Comparison -->
<div class="right-section">
<div v-if="cardVisibility.groupComparison" class="right-section">
<GroupComparison :groups="groups" :senior-manager-data="seniorManagerList" :group-list="groupList" @select-group="selectGroup" @manager-change="handleManagerChange" />
</div>
</div>
<!-- Team Members Detail Section -->
<div class="team-detail-section" v-if="selectedGroup">
<div class="team-detail-section" v-if="selectedGroup && cardVisibility.teamDetail">
<div class="team-detail-header">
<h2>{{ selectedGroup.name }} - 团队成员详情</h2>
<div class="team-summary">
@@ -241,6 +259,24 @@
// 用户store实例
const userStore = useUserStore();
const CheckType = ref('month')
// 卡片显示状态
const cardVisibility = ref({
centerOverview: true,
actionItems: true,
customerType: true,
goodMusic: true,
problemRanking: true,
groupRanking: true,
groupComparison: true,
teamDetail: true
})
// 更新卡片显示状态
const updateCardVisibility = (newVisibility) => {
Object.assign(cardVisibility.value, newVisibility)
console.log('卡片显示状态已更新:', cardVisibility.value)
}
// 营期调控逻辑
// This would ideally come from a prop or API call based on the logged-in user
const centerData = ref({