feat: 实现卡片可见性管理并优化多个组件功能
- 在UserDropdown组件中添加卡片名称映射 - 为sale.vue、seniorManager.vue、topone.vue和secondTop.vue添加卡片可见性控制 - 在CustomerDetail.vue中添加通话数据检查逻辑 - 将https.js中的API基础路径切换为生产环境
This commit is contained in:
@@ -27,7 +27,12 @@
|
||||
|
||||
<div v-if="!isRouteNavigation">
|
||||
<!-- 用户下拉菜单 -->
|
||||
<UserDropdown class="header-ringht" style="margin-left: auto;" />
|
||||
<UserDropdown
|
||||
class="header-ringht"
|
||||
style="margin-left: auto;"
|
||||
:card-visibility="cardVisibility"
|
||||
@update-card-visibility="updateCardVisibility"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -36,15 +41,17 @@
|
||||
<main class="dashboard-main">
|
||||
<div class="top-section">
|
||||
<CenterOverview
|
||||
v-if="cardVisibility.centerOverview"
|
||||
style="height: 330px;"
|
||||
:overallTeamPerformance="overallTeamPerformance"
|
||||
@update-check-type="updateCheckType"
|
||||
/>
|
||||
<div class="action-items-compact">
|
||||
<div v-if="cardVisibility.teamAlerts" class="action-items-compact">
|
||||
<TeamAlerts style="height: 300px;" :abnormalData="teamAlerts" />
|
||||
</div>
|
||||
</div>
|
||||
<StatisticalIndicators
|
||||
v-if="cardVisibility.statisticalIndicators"
|
||||
:customerCommunicationRate="statisticalIndicators.customerCommunicationRate"
|
||||
:averageResponseTime="statisticalIndicators.averageResponseTime"
|
||||
:timeoutResponseRate="statisticalIndicators.timeoutResponseRate"
|
||||
@@ -54,19 +61,19 @@
|
||||
<!-- 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"
|
||||
@select-group="selectGroup"
|
||||
/>
|
||||
</div>
|
||||
<div class="problem-ranking">
|
||||
<div v-if="cardVisibility.problemRanking" class="problem-ranking">
|
||||
<!-- 客户迫切解决的问题 -->
|
||||
<ProblemRanking :problemRanking="problemRanking" />
|
||||
</div>
|
||||
<!-- Right Section - Group Comparison -->
|
||||
<div class="right-section">
|
||||
<div v-if="cardVisibility.groupComparison" class="right-section">
|
||||
<GroupComparison
|
||||
:groups="groups"
|
||||
:teamRanking="teamRanking"
|
||||
@@ -76,7 +83,7 @@
|
||||
</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 v-if="isTeamDetailLoading" class="team-loading">
|
||||
<div class="loading-spinner"></div>
|
||||
@@ -311,6 +318,23 @@ const updateCheckType = async (newValue) => {
|
||||
console.log('数据已根据新的统计模式重新加载')
|
||||
}
|
||||
|
||||
// 卡片显示状态
|
||||
const cardVisibility = ref({
|
||||
centerOverview: true,
|
||||
teamAlerts: true,
|
||||
statisticalIndicators: true,
|
||||
groupRanking: true,
|
||||
problemRanking: true,
|
||||
groupComparison: true,
|
||||
teamDetail: true
|
||||
})
|
||||
|
||||
// 更新卡片显示状态
|
||||
const updateCardVisibility = (newVisibility) => {
|
||||
Object.assign(cardVisibility.value, newVisibility)
|
||||
console.log('卡片显示状态已更新:', cardVisibility.value)
|
||||
}
|
||||
|
||||
const userStore = useUserStore()
|
||||
// 路由实例
|
||||
const router = useRouter()
|
||||
|
||||
Reference in New Issue
Block a user