feat(DetailedDataTable): 重构筛选器为层级联动选择并添加禁用状态

重构筛选器组件，将原有的独立下拉框改为基于组织架构的层级联动选择（中心领导->高级经理->经理），并添加禁用状态逻辑。当未选择上级时，下级选择器将被禁用。同时移除注释掉的代码和调试日志。
feat(数据分析): 重构客户问题排行榜和客户类型图表数据处理
2025-08-18 12:13:57 +08:00 · 2025-08-18 12:00:11 +08:00
3 changed files with 285 additions and 139 deletions
--- a/my-vue-app/src/views/secondTop/components/CustomerType.vue
+++ b/my-vue-app/src/views/secondTop/components/CustomerType.vue
@@ -40,10 +40,133 @@ const chartData = computed(() => {
    return []
  }
  
-  return props.customerData.customer_type_distribution.map(item => ({
+  let processedData = props.customerData.customer_type_distribution.map(item => ({
    name: item.category,
    value: parseFloat(item.ratio.replace('%', '')) || 0
  }))
+  
+  // 如果是地域类型，需要按省份进行数据整理
+  if (customerTypeCategory.value === 'region') {
+    const provinceMap = new Map()
+    
+    processedData.forEach(item => {
+       // 提取省份名称，处理"山东省 临沂市 莒南县"这种空格分隔的格式
+       let provinceName = item.name
+       
+       // 处理空格分隔的地域数据格式（如："山东省 临沂市 莒南县"）
+       if (item.name.includes(' ')) {
+         const parts = item.name.split(' ')
+         provinceName = parts[0] // 取第一部分作为省份
+       }
+       // 处理横线分隔的格式
+       else if (item.name.includes('-')) {
+         provinceName = item.name.split('-')[0]
+       }
+       // 处理包含省字的格式
+       else if (item.name.includes('省') || item.name.includes('市') || item.name.includes('区')) {
+         // 如果已经包含省份标识，直接使用
+         if (item.name.includes('省') || item.name.includes('自治区') || item.name.endsWith('市')) {
+           provinceName = item.name
+         } else {
+           // 根据城市名推断省份
+           const cityToProvince = {
+              '北京': '北京市',
+              '上海': '上海市',
+              '天津': '天津市',
+              '重庆': '重庆市',
+              '广州': '广东省',
+              '深圳': '广东省',
+              '珠海': '广东省',
+              '佛山': '广东省',
+              '东莞': '广东省',
+              '中山': '广东省',
+              '杭州': '浙江省',
+              '宁波': '浙江省',
+              '温州': '浙江省',
+              '南京': '江苏省',
+              '苏州': '江苏省',
+              '无锡': '江苏省',
+              '常州': '江苏省',
+              '成都': '四川省',
+              '绵阳': '四川省',
+              '武汉': '湖北省',
+              '宜昌': '湖北省',
+              '西安': '陕西省',
+              '郑州': '河南省',
+              '洛阳': '河南省',
+              '济南': '山东省',
+              '青岛': '山东省',
+              '烟台': '山东省',
+              '潍坊': '山东省',
+              '临沂': '山东省',
+              '大连': '辽宁省',
+              '沈阳': '辽宁省',
+              '长春': '吉林省',
+              '哈尔滨': '黑龙江省',
+              '石家庄': '河北省',
+              '唐山': '河北省',
+              '太原': '山西省',
+              '呼和浩特': '内蒙古自治区',
+              '南宁': '广西壮族自治区',
+              '桂林': '广西壮族自治区',
+              '海口': '海南省',
+              '三亚': '海南省',
+              '昆明': '云南省',
+              '贵阳': '贵州省',
+              '拉萨': '西藏自治区',
+              '兰州': '甘肃省',
+              '西宁': '青海省',
+              '银川': '宁夏回族自治区',
+              '乌鲁木齐': '新疆维吾尔自治区',
+              '合肥': '安徽省',
+              '芜湖': '安徽省',
+              '福州': '福建省',
+              '厦门': '福建省',
+              '泉州': '福建省',
+              '南昌': '江西省',
+              '长沙': '湖南省',
+              '株洲': '湖南省',
+              // 港澳台地区
+              '香港': '香港特别行政区',
+              '澳门': '澳门特别行政区',
+              '台北': '台湾省',
+              '高雄': '台湾省',
+              '台中': '台湾省',
+              '台南': '台湾省',
+              '桃园': '台湾省',
+              '新竹': '台湾省',
+              '基隆': '台湾省',
+              '嘉义': '台湾省',
+              '台东': '台湾省',
+              '花莲': '台湾省',
+              '宜兰': '台湾省',
+              '屏东': '台湾省',
+              '彰化': '台湾省',
+              '南投': '台湾省',
+              '云林': '台湾省',
+              '苗栗': '台湾省',
+              '澎湖': '台湾省'
+            }
+           provinceName = cityToProvince[item.name] || item.name
+         }
+       }
+      
+      // 聚合同一省份的数据
+      if (provinceMap.has(provinceName)) {
+        provinceMap.set(provinceName, provinceMap.get(provinceName) + item.value)
+      } else {
+        provinceMap.set(provinceName, item.value)
+      }
+    })
+    
+    // 转换为数组格式
+    processedData = Array.from(provinceMap.entries()).map(([name, value]) => ({
+      name,
+      value
+    }))
+  }
+  
+  return processedData
 })

 const updateChart = () => {
@@ -71,36 +194,46 @@ const updateChart = () => {
  
  const option = {
    tooltip: {
-      trigger: 'axis', 
-      axisPointer: { type: 'shadow' },
+      trigger: 'item',
      formatter: function(params) {
-        return params[0].name + '<br/>' + params[0].seriesName + ': ' + params[0].value + '%'
+        return params.name + '<br/>' + '占比: ' + params.value + '%' + ' (' + params.percent + '%)'
      }
    },
-    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
-    xAxis: { 
-      type: 'category', 
-      data: currentData.map(item => item.name), 
-      axisTick: { alignWithLabel: true },
-      axisLabel: {
-        interval: 0,
-        rotate: currentData.length > 5 ? 45 : 0
-      }
-    },
-    yAxis: { 
-      type: 'value',
-      axisLabel: {
-        formatter: '{value}%'
+    legend: {
+      orient: 'vertical',
+      left: 'left',
+      top: 'center',
+      textStyle: {
+        fontSize: 12
      }
    },
    series: [{
-      name: '占比', 
-      type: 'bar', 
-      barWidth: '60%',
-      data: currentData.map(item => item.value),
-      itemStyle: {
-        color: (params) => ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'][params.dataIndex % 5]
+      name: '客户类型占比',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      center: ['65%', '50%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: '16',
+          fontWeight: 'bold'
        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: currentData.map((item, index) => ({
+        name: item.name,
+        value: item.value,
+        itemStyle: {
+          color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#fc8452', '#9a60b4'][index % 7]
+        }
+      }))
    }]
  };
  customerTypeChart.setOption(option, true);
--- a/my-vue-app/src/views/topOne/components/DetailedDataTable.vue
+++ b/my-vue-app/src/views/topOne/components/DetailedDataTable.vue
@@ -6,10 +6,33 @@
    <div class="data-table-container">
      <!-- 筛选器 -->
      <div class="table-filters">
-        <div class="filter-group"><label>中心:</label><select v-model="filters.department"><option value="">全部中心</option><option>销售一部</option><option>销售二部</option><option>销售三部</option></select></div>
-        <div class="filter-group"><label>高级经理:</label><select v-model="filters.position"><option value="">全部高级经理</option><option>经理1</option><option>经理2</option><option>经理3</option></select></div>
-        <div class="filter-group"><label>经理:</label><select v-model="filters.timeRange"><option value="today">经理1</option><option value="week">经理2</option><option value="month">经理3</option></select></div>
-        <!-- <div class="filter-group"><label>成交状态:</label><select v-model="filters.dealStatus"><option value="">全部</option><option>已成交</option><option>跟进中</option><option>已失效</option></select></div> -->
+        <div class="filter-group">
+          <label>中心领导:</label>
+          <select v-model="filters.centerLeader" @change="onCenterLeaderChange">
+            <option value="">全部中心领导</option>
+            <option v-for="leader in centerLeaders" :key="leader.name" :value="leader.name">
+              {{ leader.name }}
+            </option>
+          </select>
+        </div>
+        <div class="filter-group">
+          <label>高级经理:</label>
+          <select v-model="filters.advancedManager" @change="onAdvancedManagerChange" :disabled="!filters.centerLeader">
+            <option value="">全部高级经理</option>
+            <option v-for="manager in availableAdvancedManagers" :key="manager.name" :value="manager.name">
+              {{ manager.name }}
+            </option>
+          </select>
+        </div>
+        <div class="filter-group">
+          <label>经理:</label>
+          <select v-model="filters.manager" :disabled="!filters.advancedManager">
+            <option value="">全部经理</option>
+            <option v-for="manager in availableManagers" :key="manager.name" :value="manager.name">
+              {{ manager.name }}
+            </option>
+          </select>
+        </div>
      </div>
      
      <!-- 数据表格 -->
@@ -59,24 +82,51 @@ import { ref, computed } from 'vue';

 const props = defineProps({
   tableData: { type: Array, required: true },
-  selectedPerson: { type: Object, default: null }
+   selectedPerson: { type: Object, default: null },
+   levelTree: { type: Object, default: () => ({}) }
 });
 defineEmits(['update:selectedPerson']);

-const filters = ref({ department: '', position: '', timeRange: 'month', dealStatus: '' });
+const filters = ref({ centerLeader: '', advancedManager: '', manager: '', dealStatus: '' });
 const sortField = ref('dealRate');
 const sortOrder = ref('desc');

+const centerLeaders = computed(() => {
+   return props.levelTree?.level_tree?.center_leaders || [];
+ });
+ 
+ const availableAdvancedManagers = computed(() => {
+   if (!filters.value.centerLeader) return [];
+   const leader = centerLeaders.value.find(l => l.name === filters.value.centerLeader);
+   return leader ? leader.advanced_managers || [] : [];
+ });
+ 
+ const availableManagers = computed(() => {
+   if (!filters.value.advancedManager) return [];
+   const manager = availableAdvancedManagers.value.find(m => m.name === filters.value.advancedManager);
+   return manager ? manager.managers || [] : [];
+ });
+
 const filteredTableData = computed(() => {
  let filtered = props.tableData;
-  if (filters.value.department) filtered = filtered.filter(item => item.department === filters.value.department);
-  if (filters.value.position) filtered = filtered.filter(item => item.position === filters.value.position);
+  if (filters.value.centerLeader) filtered = filtered.filter(item => item.centerLeader === filters.value.centerLeader);
+  if (filters.value.advancedManager) filtered = filtered.filter(item => item.advancedManager === filters.value.advancedManager);
+  if (filters.value.manager) filtered = filtered.filter(item => item.manager === filters.value.manager);
  return filtered.sort((a, b) => {
    const aValue = a[sortField.value], bValue = b[sortField.value];
    return sortOrder.value === 'desc' ? bValue - aValue : aValue - bValue;
  });
 });

+const onCenterLeaderChange = () => {
+  filters.value.advancedManager = '';
+  filters.value.manager = '';
+};
+
+const onAdvancedManagerChange = () => {
+  filters.value.manager = '';
+};
+
 const sortBy = (field) => {
  if (sortField.value === field) sortOrder.value = sortOrder.value === 'desc' ? 'asc' : 'desc';
  else { sortField.value = field; sortOrder.value = 'desc'; }
@@ -100,6 +150,7 @@ const formatDuration = (minutes) => {
 .filter-group { display: flex; flex-direction: column; gap: 4px; }
 .filter-group label { font-size: 12px; font-weight: 600; color: #4a5568; }
 .filter-group select { padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 6px; }
+.filter-group select:disabled { background-color: #f7fafc; color: #a0aec0; cursor: not-allowed; }
 .data-table { overflow-x: auto; border-radius: 8px; border: 1px solid #e2e8f0; }
 table { width: 100%; border-collapse: collapse; }
 th { background: #f7fafc; padding: 12px 16px; text-align: left; font-weight: 600; color: #4a5568; border-bottom: 1px solid #e2e8f0; font-size: 12px; }
--- a/my-vue-app/src/views/topOne/topone.vue
+++ b/my-vue-app/src/views/topOne/topone.vue
@@ -70,6 +70,7 @@
    <div class="dashboard-row row-4">
      <DetailedDataTable
        :table-data="tableData"
+        :level-tree="levelTree"
        v-model:selected-person="selectedPerson"
      />
      <DataDetailCard :selected-person="selectedPerson" />
@@ -280,16 +281,18 @@ const customerTypeData = ref([
  { name: "55岁以上", value: 50 },
 ]);

-// 客户问题排行榜数据
-const problemRankingData = ref([
-  { name: "提高学习成绩", value: "65%" },
-  { name: "课程费用咨询", value: "58%" },
-  { name: "师资力量了解", value: "52%" },
-  { name: "时间安排问题", value: "48%" },
-  { name: "学习兴趣培养", value: "42%" },
-  { name: "学习方法指导", value: "38%" },
-  { name: "课程内容详情", value: "35%" },
-]);
+// 客户问题排行榜数据 - 计算属性：将API数据转换为组件所需格式
+const problemRankingData = computed(() => {
+  if (!customerUrgency.value || !customerUrgency.value.company_urgent_issue_ratio) {
+    return []
+  }
+  
+  const ratioData = customerUrgency.value.company_urgent_issue_ratio
+  return Object.entries(ratioData).map(([name, value]) => ({
+    name,
+    value
+  }))
+})

 // 表格数据和筛选
 const tableData = ref([
@@ -672,34 +675,6 @@ async function getConversionComparison(data) {
    const res = await getCompanyConversionRateVsLast(params)
    console.log(111111,res)
    conversionComparison.value = res.data
-    /**
-     *     "data": {
-        "user_name": "赵世敬",
-        "user_level": 5,
-        "check_type": "month",
-        "company_current_rate": {
-            "线索总数": 14050,
-            "加微": 3238,
-            "到课": 7613,
-            "付定金": 167,
-            "成交": 135
-        },
-        "company_last_rate": {
-            "线索总数": 17598,
-            "加微": 3328,
-            "到课": 3543,
-            "付定金": 0,
-            "成交": 0
-        },
-        "company_current_vs_last_rate": {
-            "线索总数": "-20.16%",
-            "加微": "-2.70%",
-            "到课": "+114.87%",
-            "付定金": "+∞%",
-            "成交": "+∞%"
-        }
-    }
-     */
  } catch (error) {
    console.error("获取转化对比失败:", error);
  }
@@ -940,25 +915,6 @@ async function getCenterSalesRank(data) {
    const res = await getCenterPerformanceRank(params)
    console.log(1222222,res)
    centerSalesRank.value = res.data
-    /**
-     *     "data": {
-        "user_name": "赵世敬",
-        "user_level": 5,
-        "rank_type": "periods",
-        "center_performance_periods_rank": [
-            {
-                "center_leader": "郭可英",
-                "total_deals": 0,
-                "average_deals_per_member": 0
-            },
-            {
-                "center_leader": "刘瑞",
-                "total_deals": 4,
-                "average_deals_per_member": 0
-            }
-        ]
-    }
-     */
  } catch (error) {
    console.error("获取全中心业绩排行榜失败:", error);
  }
@@ -973,49 +929,6 @@ async function getCustomerTypeRatio(data) {
    const res = await getCustomerTypeDistribution(params)
    console.log(1222222,res)
    customerTypeRatio.value = res.data
-    /**
-     * data
-: 
-customer_type_distribution
-: 
-Array(7)
-0
-: 
-{category: '初二', ratio: '37.50%'}
-1
-: 
-{category: '高一', ratio: '18.75%'}
-2
-: 
-{category: '初一', ratio: '12.50%'}
-3
-: 
-{category: '五年级', ratio: '12.50%'}
-4
-: 
-{category: '六年级', ratio: '6.25%'}
-5
-: 
-{category: '三年级以下', ratio: '6.25%'}
-6
-: 
-{category: '高三', ratio: '6.25%'}
-length
-: 
-7
-[[Prototype]]
-: 
-Array(0)
-distribution_type
-: 
-"child_education"
-user_level
-: 
-5
-user_name
-: 
-"赵世敬"
-     */
  } catch (error) {
    console.error("获取客户类型占比失败:", error);
  }
@@ -1038,6 +951,55 @@ 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);
  }
@@ -1064,9 +1026,9 @@ onMounted(async() => {
  // await getConversionComparison('month')
  // await getCompanySalesRank('red')
  // await getCenterSalesRank('periods')
-  await getCustomerTypeRatio('child_education')
-  await getCustomerUrgency()
-
+  // await getCustomerTypeRatio('child_education')
+  // await getCustomerUrgency()
+await CusotomGetLevelTree()

 });
 </script>