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

- 在UserDropdown组件中添加卡片名称映射 - 为sale.vue、seniorManager.vue、topone.vue和secondTop.vue添加卡片可见性控制 - 在CustomerDetail.vue中添加通话数据检查逻辑 - 将https.js中的API基础路径切换为生产环境
2025-09-03 11:41:09 +08:00
parent e94ea6b592
commit f47211b0b0
7 changed files with 148 additions and 40 deletions
--- a/my-vue-app/src/components/UserDropdown.vue
+++ b/my-vue-app/src/components/UserDropdown.vue
@@ -271,11 +271,35 @@ watch(() => props.cardVisibility, (newVal) => {
 // 获取卡片显示名称
 const getCardDisplayName = (key) => {
  const nameMap = {
+    // sale.vue 页面的卡片
    timeline: '销售时间线',
    rawData: '原始数据',
    customerDetail: '客户详情',
    analytics: '数据分析',
-    weekAnalysis: '周期分析'
+    weekAnalysis: '周期分析',
+    // seniorManager.vue 页面的卡片
+    centerOverview: '中心概览',
+    teamAlerts: '团队预警',
+    statisticalIndicators: '统计指标',
+    groupRanking: '组别排名',
+    problemRanking: '问题排名',
+    groupComparison: '组别对比',
+    teamDetail: '团队详情',
+    // secondTop.vue 页面的卡片
+    actionItems: '行动项目',
+    customerType: '客户类型',
+    goodMusic: '优秀录音',
+    // topone.vue 页面的卡片
+    kpiMetrics: '核心业绩指标',
+    salesProgress: '销售实时进度',
+    periodStage: '各中心营期阶段',
+    funnelChart: '转化漏斗',
+    personalSalesRanking: '销售个人业绩排行榜',
+    qualityCalls: '优质通话',
+    rankingList: '业绩排行榜',
+    problemRanking: '客户迫切解决的问题排行榜',
+    campManagement: '营期管理',
+    detailedDataTable: '详细数据表格'
  }
  return nameMap[key] || key
 }
--- a/my-vue-app/src/utils/https.js
+++ b/my-vue-app/src/utils/https.js
@@ -5,8 +5,8 @@ import { useUserStore } from '@/stores/user'

 // 创建axios实例
 const service = axios.create({
-  // baseURL: 'https://mldash.nycjy.cn/' || '', // API基础路径，支持完整URL
-    baseURL: 'http://192.168.15.121:8889' || '', // API基础路径，支持完整URL
+  baseURL: 'https://mldash.nycjy.cn/' || '', // API基础路径，支持完整URL
+    // baseURL: 'http://192.168.15.121:8889' || '', // API基础路径，支持完整URL
  timeout: 100000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
@@ -45,12 +45,7 @@ service.interceptors.request.use(
 // 响应拦截器
 service.interceptors.response.use(
  response => {
-    // 隐藏加载状态
-    // console.log('隐藏加载中...')
-    
-    // 对响应数据做点什么
-    // console.log('收到响应:', response)
-    
+   
    const { data, status } = response
    
    // HTTP状态码检查
--- a/my-vue-app/src/views/person/components/CustomerDetail.vue
+++ b/my-vue-app/src/views/person/components/CustomerDetail.vue
@@ -15,9 +15,9 @@
          <button 
            @click="startSopAnalysis" 
            class="analysis-button sop-button"
-            :disabled="isSopAnalysisLoading"
+            :disabled="isSopAnalysisLoading || !hasCallData"
          >
-            {{ isSopAnalysisLoading ? 'SOP分析中...' : 'SOP通话分析' }}
+            {{ isSopAnalysisLoading ? 'SOP分析中...' : (hasCallData ? 'SOP通话分析' : '暂无通话数据') }}
          </button>
          <!-- <button 
            @click="startDemandAnalysis" 
@@ -157,6 +157,11 @@ const formattedDemandAnalysis = computed(() => {
  return md.render(demandAnalysisResult.value);
 });

+// 计算属性：检查是否有通话数据
+const hasCallData = computed(() => {
+  return props.callRecords && props.callRecords.length > 0;
+});
+
 // 监听selectedContact变化，重置所有分析结果
 watch(() => props.selectedContact, (newContact) => {
  if (newContact) {
--- a/my-vue-app/src/views/person/sale.vue
+++ b/my-vue-app/src/views/person/sale.vue
@@ -17,10 +17,6 @@
            <div class="user-name">
              {{ routeUserName }}
            </div>
-            <UserDropdown 
-              :card-visibility="cardVisibility"
-              @update-card-visibility="updateCardVisibility"
-            />
          </div>
        </div>

@@ -66,7 +62,7 @@
    </section>
    
    <!-- 原始数据卡片区域 -->
-    <section v-if="cardVisibility.rawData" class="raw-data-section">
+    <section v-if="cardVisibility.rawData && selectedContact" class="raw-data-section">
      <div class="section-header">
        <h2>原始数据</h2>
        <p class="section-subtitle">客户互动的原始记录和数据</p>
@@ -89,7 +85,7 @@
      <!-- 主要工作区域 -->
      <main class="main-content">
        <!-- 客户详情区域 -->
-        <section v-if="cardVisibility.customerDetail" class="detail-section">
+        <section v-if="cardVisibility.customerDetail && selectedContact" class="detail-section">
          <div class="section-header">
            <h2>客户详情</h2>
          </div>
@@ -125,7 +121,7 @@
    </section>
    
    <!-- 周期分析区域 -->
-    <section v-if="cardVisibility.weekAnalysis" class="week-analysis-section" style="width: 100%; margin-top: 24px;">
+    <section v-if="cardVisibility.weekAnalysis===false" class="week-analysis-section" style="width: 100%; margin-top: 24px;">
      <div class="section-content">
        <WeekAnalize :week-data="weekAnalysisData" />
      </div>
--- a/my-vue-app/src/views/secondTop/secondTop.vue
+++ b/my-vue-app/src/views/secondTop/secondTop.vue
@@ -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({
--- a/my-vue-app/src/views/senorManger/seniorManager.vue
+++ b/my-vue-app/src/views/senorManger/seniorManager.vue
@@ -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()
--- a/my-vue-app/src/views/topOne/topone.vue
+++ b/my-vue-app/src/views/topOne/topone.vue
@@ -4,28 +4,33 @@
    <div class="dashboard-header">
      <h1>管理者数据看板</h1>
      <!-- 头像 -->
-      <UserDropdown />
+      <UserDropdown 
+        :card-visibility="cardVisibility" 
+        @update-card-visibility="updateCardVisibility" 
+      />
    </div>

    <!-- 第一行：核心业绩指标、销售实时进度 -->
    <div class="dashboard-row row-1">
      <!-- 核心业绩指标 -->
-      <kpi-metrics :kpi-data="totalDeals" :format-number="formatNumber" />
+      <kpi-metrics v-if="cardVisibility.kpiMetrics" :kpi-data="totalDeals" :format-number="formatNumber" />
      <!-- 销售实时进度 -->
-      <sales-progress :sales-data="realTimeProgress" />
+      <sales-progress v-if="cardVisibility.salesProgress" :sales-data="realTimeProgress" />
      <!-- 各中心营期阶段 -->
-      <period-stage />
+      <period-stage v-if="cardVisibility.periodStage" />
    </div>
    <!-- 第二行 -->
    <div class="dashboard-row row-3">
      <!-- 转化漏斗 -->
      <funnel-chart 
+          v-if="cardVisibility.funnelChart"
          :funnel-data="formattedFunnelData" 
          :comparison-data="formattedComparisonData"
          @time-range-change="handleTimeRangeChange"
        />
      <!-- 销售个人业绩排行榜 -->
      <personal-sales-ranking
+        v-if="cardVisibility.personalSalesRanking"
        :ranking-data="formattedSalesRankingData"
        :format-number="formatNumber"
        :get-rank-class="getRankClass"
@@ -34,6 +39,7 @@
      />
      <!-- 优质通话 -->
      <quality-calls
+        v-if="cardVisibility.qualityCalls"
        :quality-calls="excellentRecord"
        @play-call="playCall"
        @download-call="downloadCall"
@@ -43,21 +49,23 @@
    <div class="dashboard-row row-3">
      <!-- 业绩排行榜 -->
      <ranking-list
+        v-if="cardVisibility.rankingList"
        :format-number="formatNumber"
        :get-rank-class="getRankClass"
      />
      <!-- 客户类型占比 -->
-      <customer-type :customer-data="customerTypeRatio" @category-change="getCustomerTypeRatio" />
+      <customer-type v-if="cardVisibility.customerType" :customer-data="customerTypeRatio" @category-change="getCustomerTypeRatio" />
      <!-- 客户迫切解决的问题排行榜 -->
-      <problem-ranking :ranking-data="problemRankingData" />
+      <problem-ranking v-if="cardVisibility.problemRanking" :ranking-data="problemRankingData" />
    </div>
    <!-- 第四行：详细数据表格和数据详情 -->
    <div class="dashboard-row" v-show="false">
-      <CampManagement />
+      <CampManagement v-if="cardVisibility.campManagement" />
    </div>
    <!-- 第五行 -->
    <div class="dashboard-row" >
      <DetailedDataTable
+        v-if="cardVisibility.detailedDataTable"
        :table-data="detailData"
        :level-tree="levelTree"
        v-model:selected-person="selectedPerson"
@@ -213,6 +221,26 @@ const selectedPerson = ref(null);

 const userStore = useUserStore();

+// 卡片显示状态管理
+const cardVisibility = ref({
+  kpiMetrics: true,
+  salesProgress: true,
+  periodStage: true,
+  funnelChart: true,
+  personalSalesRanking: true,
+  qualityCalls: true,
+  rankingList: true,
+  customerType: true,
+  problemRanking: true,
+  campManagement: true,
+  detailedDataTable: true
+});
+
+// 更新卡片显示状态
+const updateCardVisibility = (newVisibility) => {
+  Object.assign(cardVisibility.value, newVisibility);
+};
+
 // 计算属性
 const filteredTableData = computed(() => {
  let filtered = tableData.value;