806 lines
44 KiB
HTML
806 lines
44 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>经营报表</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#5A7BDF',
|
||
cardBg: '#A3E4D7',
|
||
textDark: '#333333',
|
||
textLight: '#666666',
|
||
redDot: '#E74C3C',
|
||
blueDot: '#3498DB',
|
||
},
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
/* 隐藏子层级的默认样式，通过JS切换显示/隐藏 */
|
||
.sub-level-hide {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-100 font-sans">
|
||
<!-- 顶部导航 -->
|
||
<div class="bg-primary text-white py-3 px-4 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<i class="fa fa-arrow-left mr-2"></i>
|
||
<h1 class="text-lg font-medium">经营报表</h1>
|
||
</div>
|
||
<div class="flex items-center space-x-3">
|
||
<i class="fa fa-filter"></i>
|
||
<i class="fa fa-ellipsis-v"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 日期选择 -->
|
||
<div class="bg-white py-3 px-4 flex items-center justify-between">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="flex items-center">
|
||
<span>2026-02-01</span>
|
||
<i class="fa fa-chevron-down ml-1 text-xs"></i>
|
||
</div>
|
||
<span class="text-gray-400">至</span>
|
||
<div class="flex items-center">
|
||
<span>2026-02-02</span>
|
||
<i class="fa fa-chevron-down ml-1 text-xs"></i>
|
||
</div>
|
||
</div>
|
||
<div class="text-primary flex items-center">
|
||
<i class="fa fa-filter mr-1"></i>
|
||
<span>筛选</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据概览卡片 -->
|
||
<div class="grid grid-cols-3 gap-0 px-4 py-3">
|
||
<div class="bg-cardBg text-white p-3 text-center">
|
||
<p class="text-xs opacity-90">客单数量/笔</p>
|
||
<p class="text-xl font-bold mt-1">284,867</p>
|
||
</div>
|
||
<div class="bg-cardBg text-white p-3 text-center border-x border-white/20">
|
||
<p class="text-xs opacity-90">商品出售/件</p>
|
||
<p class="text-xl font-bold mt-1">827,997.87</p>
|
||
</div>
|
||
<div class="bg-cardBg text-white p-3 text-center">
|
||
<p class="text-xs opacity-90">商品均价/元</p>
|
||
<p class="text-xl font-bold mt-1">9.52</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 经营报表列表（四级/三级嵌套，默认全收起） -->
|
||
<div class="bg-white mx-4 my-3 rounded-lg shadow-sm">
|
||
<div class="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
|
||
<h2 class="text-sm font-medium text-textDark">经营报表</h2>
|
||
<i class="fa fa-refresh text-xs text-textLight"></i>
|
||
</div>
|
||
|
||
<!-- 第一个一级公司：安徽驿达运营管理有限公司（四级结构，默认收起） -->
|
||
<div class="px-4 py-3 border-b border-gray-100 flex justify-between items-center cursor-pointer" id="company1-toggle">
|
||
<div>
|
||
<p class="text-sm text-textDark">安徽驿达运营管理有限公司</p>
|
||
<p class="text-lg font-bold text-textDark mt-1">¥9,876,543.21</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">总营收占比</p>
|
||
<p class="text-sm font-medium text-textDark mt-1">75.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight" id="company1-icon"></i>
|
||
</div>
|
||
|
||
<!-- 公司1的二级容器（默认收起） -->
|
||
<div class="px-4 py-0 sub-level-hide" id="company1-level2-container">
|
||
<!-- 二级分类1：快餐、正餐（默认收起） -->
|
||
<div class="py-3 border-b border-gray-100 flex justify-between items-center cursor-pointer" data-company1-level2="cate1">
|
||
<div>
|
||
<p class="text-sm text-textDark">餐饮主食</p>
|
||
<p class="text-base font-bold text-textDark mt-1">¥3,265,418.90</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">营收占比</p>
|
||
<p class="text-sm font-medium text-textDark mt-1">33.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 二级1的三级容器（默认收起） -->
|
||
<div class="px-2 py-1 ml-4 sub-level-hide" data-company1-level3="cate1">
|
||
<!-- 三级分类1：皖中片区管理中心（默认收起） -->
|
||
<div class="py-2 border-b border-gray-100 flex justify-between items-center cursor-pointer" data-company1-level3-item="area1">
|
||
<div>
|
||
<p class="text-sm text-textDark">皖中片区管理中心</p>
|
||
<p class="text-sm font-bold text-textDark mt-1">¥1,077,688.24</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-xs text-textLight">片区占比</p>
|
||
<p class="text-xs font-medium text-textDark mt-1">33.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 三级1的四级容器（服务区，默认收起） -->
|
||
<div class="px-2 py-1 ml-8 sub-level-hide" data-company1-level4="area1">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-redDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">洪林服务区</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">19.99%</p>
|
||
<p class="text-sm text-textDark">¥392,399.00</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-blueDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">清溪服务区</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">10.05%</p>
|
||
<p class="text-sm text-textDark">¥197,154.71</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 三级分类2：皖东片区管理中心（默认收起） -->
|
||
<div class="py-2 border-b border-gray-100 flex justify-between items-center cursor-pointer" data-company1-level3-item="area2">
|
||
<div>
|
||
<p class="text-sm text-textDark">皖东片区管理中心</p>
|
||
<p class="text-sm font-bold text-textDark mt-1">¥1,012,279.86</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-xs text-textLight">片区占比</p>
|
||
<p class="text-xs font-medium text-textDark mt-1">31.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 三级2的四级容器（服务区，默认收起） -->
|
||
<div class="px-2 py-1 ml-8 sub-level-hide" data-company1-level4="area2">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-redDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">太白岛服务区</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">8.99%</p>
|
||
<p class="text-sm text-textDark">¥176,245.38</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-blueDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">福山服务区</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">7.48%</p>
|
||
<p class="text-sm text-textDark">¥146,857.29</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 三级分类3：皖西片区管理中心（默认收起） -->
|
||
<div class="py-2 border-b border-gray-100 flex justify-between items-center cursor-pointer" data-company1-level3-item="area3">
|
||
<div>
|
||
<p class="text-sm text-textDark">皖西片区管理中心</p>
|
||
<p class="text-sm font-bold text-textDark mt-1">¥689,345.72</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-xs text-textLight">片区占比</p>
|
||
<p class="text-xs font-medium text-textDark mt-1">21.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 三级3的四级容器（服务区，默认收起） -->
|
||
<div class="px-2 py-1 ml-8 sub-level-hide" data-company1-level4="area3">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-redDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">天门服务区</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">6.66%</p>
|
||
<p class="text-sm text-textDark">¥130,611.85</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 三级分类4：皖南片区管理中心（默认收起） -->
|
||
<div class="py-2 border-b border-gray-100 flex justify-between items-center cursor-pointer" data-company1-level3-item="area4">
|
||
<div>
|
||
<p class="text-sm text-textDark">皖南片区管理中心</p>
|
||
<p class="text-sm font-bold text-textDark mt-1">¥348,765.98</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-xs text-textLight">片区占比</p>
|
||
<p class="text-xs font-medium text-textDark mt-1">10.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 三级4的四级容器（服务区，默认收起） -->
|
||
<div class="px-2 py-1 ml-8 sub-level-hide" data-company1-level4="area4">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-blueDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">寒亭服务区</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">6.01%</p>
|
||
<p class="text-sm text-textDark">¥117,867.16</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 三级分类5：皖北片区管理中心（默认收起） -->
|
||
<div class="py-2 flex justify-between items-center cursor-pointer" data-company1-level3-item="area5">
|
||
<div>
|
||
<p class="text-sm text-textDark">皖北片区管理中心</p>
|
||
<p class="text-sm font-bold text-textDark mt-1">¥137,339.10</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-xs text-textLight">片区占比</p>
|
||
<p class="text-xs font-medium text-textDark mt-1">5.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 三级5的四级容器（服务区，默认收起） -->
|
||
<div class="px-2 py-1 ml-8 sub-level-hide" data-company1-level4="area5">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-redDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">新竹服务区</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">5.27%</p>
|
||
<p class="text-sm text-textDark">¥103,372.87</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 二级分类2：零售（默认收起） -->
|
||
<div class="py-3 border-b border-gray-100 flex justify-between items-center cursor-pointer" data-company1-level2="cate2">
|
||
<div>
|
||
<p class="text-sm text-textDark">休闲小吃</p>
|
||
<p class="text-base font-bold text-textDark mt-1">¥2,469,135.80</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">营收占比</p>
|
||
<p class="text-sm font-medium text-textDark mt-1">25.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 二级2的三级容器（默认收起，预留片区结构） -->
|
||
<div class="px-2 py-1 ml-4 sub-level-hide" data-company1-level3="cate2">
|
||
<div class="py-2 flex justify-between items-center cursor-pointer" data-company1-level3-item="area6">
|
||
<div>
|
||
<p class="text-sm text-textDark">皖中片区管理中心</p>
|
||
<p class="text-sm font-bold text-textDark mt-1">¥1,234,567.90</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-xs text-textLight">片区占比</p>
|
||
<p class="text-xs font-medium text-textDark mt-1">50.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<div class="px-2 py-1 ml-8 sub-level-hide" data-company1-level4="area6">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-blueDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">南陵服务区</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">5.12%</p>
|
||
<p class="text-sm text-textDark">¥100,495.62</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 二级分类3：小吃（默认收起） -->
|
||
<div class="py-3 border-b border-gray-100 flex justify-between items-center cursor-pointer" data-company1-level2="cate3">
|
||
<div>
|
||
<p class="text-sm text-textDark">饮品水果</p>
|
||
<p class="text-base font-bold text-textDark mt-1">¥1,679,210.50</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">营收占比</p>
|
||
<p class="text-sm font-medium text-textDark mt-1">17.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 二级3的三级容器（默认收起，预留结构） -->
|
||
<div class="px-2 py-1 ml-4 sub-level-hide" data-company1-level3="cate3">
|
||
<div class="py-2 flex justify-between items-center cursor-pointer" data-company1-level3-item="area7">
|
||
<div>
|
||
<p class="text-sm text-textDark">皖东片区管理中心</p>
|
||
<p class="text-sm font-bold text-textDark mt-1">¥839,605.25</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-xs text-textLight">片区占比</p>
|
||
<p class="text-xs font-medium text-textDark mt-1">50.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<div class="px-2 py-1 ml-8 sub-level-hide" data-company1-level4="area7">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-redDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">千军服务区</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">4.50%</p>
|
||
<p class="text-sm text-textDark">¥88,363.48</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 二级分类4：果饮（默认收起） -->
|
||
<div class="py-3 border-b border-gray-100 flex justify-between items-center cursor-pointer" data-company1-level2="cate4">
|
||
<div>
|
||
<p class="text-sm text-textDark">生活零售</p>
|
||
<p class="text-base font-bold text-textDark mt-1">¥1,234,567.89</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">营收占比</p>
|
||
<p class="text-sm font-medium text-textDark mt-1">12.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 二级4的三级容器（默认收起，预留结构） -->
|
||
<div class="px-2 py-1 ml-4 sub-level-hide" data-company1-level3="cate4">
|
||
<div class="py-2 flex justify-between items-center cursor-pointer" data-company1-level3-item="area8">
|
||
<div>
|
||
<p class="text-sm text-textDark">皖南片区管理中心</p>
|
||
<p class="text-sm font-bold text-textDark mt-1">¥617,283.95</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-xs text-textLight">片区占比</p>
|
||
<p class="text-xs font-medium text-textDark mt-1">50.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<div class="px-2 py-1 ml-8 sub-level-hide" data-company1-level4="area8">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-blueDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">顺安服务区</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">4.03%</p>
|
||
<p class="text-sm text-textDark">¥79,000.02</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 二级分类5：综合服务（默认收起） -->
|
||
<div class="py-3 flex justify-between items-center cursor-pointer" data-company1-level2="cate5">
|
||
<div>
|
||
<p class="text-sm text-textDark">司乘体验</p>
|
||
<p class="text-base font-bold text-textDark mt-1">¥1,228,210.12</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">营收占比</p>
|
||
<p class="text-sm font-medium text-textDark mt-1">13.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 二级5的三级容器（默认收起，预留结构） -->
|
||
<div class="px-2 py-1 ml-4 sub-level-hide" data-company1-level3="cate5">
|
||
<div class="py-2 flex justify-between items-center cursor-pointer" data-company1-level3-item="area9">
|
||
<div>
|
||
<p class="text-sm text-textDark">皖北片区管理中心</p>
|
||
<p class="text-sm font-bold text-textDark mt-1">¥614,105.06</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-xs text-textLight">片区占比</p>
|
||
<p class="text-xs font-medium text-textDark mt-1">50.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<div class="px-2 py-1 ml-8 sub-level-hide" data-company1-level4="area9">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-redDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">凤阳服务区</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">3.88%</p>
|
||
<p class="text-sm text-textDark">¥75,689.12</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二个一级公司：安徽驿佳商贸有限公司（三级结构，默认收起） -->
|
||
<div class="px-4 py-3 border-b border-gray-100 flex justify-between items-center cursor-pointer" id="company2-toggle">
|
||
<div>
|
||
<p class="text-sm text-textDark">安徽驿佳商贸有限公司</p>
|
||
<p class="text-lg font-bold text-textDark mt-1">¥3,292,181.07</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">总营收占比</p>
|
||
<p class="text-sm font-medium text-textDark mt-1">25.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight" id="company2-icon"></i>
|
||
</div>
|
||
|
||
<!-- 公司2的二级容器（默认收起） -->
|
||
<div class="px-4 py-0 sub-level-hide" id="company2-level2-container">
|
||
<!-- 二级分类1：服务区便利店（默认收起） -->
|
||
<div class="py-3 border-b border-gray-100 flex justify-between items-center cursor-pointer" data-company2-level2="shop1">
|
||
<div>
|
||
<p class="text-sm text-textDark">服务区便利店</p>
|
||
<p class="text-base font-bold text-textDark mt-1">¥1,975,308.64</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">营收占比</p>
|
||
<p class="text-sm font-medium text-textDark mt-1">60.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 二级1的三级容器（服务区，默认收起） -->
|
||
<div class="px-2 py-1 ml-4 sub-level-hide" data-company2-level3="shop1">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-redDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">洪林服务区便利店</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">15.00%</p>
|
||
<p class="text-sm text-textDark">¥296,296.30</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-blueDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">清溪服务区便利店</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">10.00%</p>
|
||
<p class="text-sm text-textDark">¥197,530.86</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 二级分类2：城市便利店（默认收起） -->
|
||
<div class="py-3 border-b border-gray-100 flex justify-between items-center cursor-pointer" data-company2-level2="shop2">
|
||
<div>
|
||
<p class="text-sm text-textDark">城市便利店</p>
|
||
<p class="text-base font-bold text-textDark mt-1">¥921,810.70</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">营收占比</p>
|
||
<p class="text-sm font-medium text-textDark mt-1">28.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 二级2的三级容器（服务区/门店，默认收起） -->
|
||
<div class="px-2 py-1 ml-4 sub-level-hide" data-company2-level3="shop2">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-redDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">合肥包河万达店</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">12.00%</p>
|
||
<p class="text-sm text-textDark">¥110,617.28</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 二级分类3：线上商城（默认收起） -->
|
||
<div class="py-3 flex justify-between items-center cursor-pointer" data-company2-level2="shop3">
|
||
<div>
|
||
<p class="text-sm text-textDark">线上商城</p>
|
||
<p class="text-base font-bold text-textDark mt-1">¥395,061.73</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">营收占比</p>
|
||
<p class="text-sm font-medium text-textDark mt-1">12.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 二级3的三级容器（服务区对应线上，默认收起） -->
|
||
<div class="px-2 py-1 ml-4 sub-level-hide" data-company2-level3="shop3">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-blueDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">皖中片区线上配送</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">8.00%</p>
|
||
<p class="text-sm text-textDark">¥31,604.94</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新增：第三个一级公司：安徽百和餐饮有限公司（三级结构，默认收起） -->
|
||
<div class="px-4 py-3 border-b border-gray-100 flex justify-between items-center cursor-pointer" id="company3-toggle">
|
||
<div>
|
||
<p class="text-sm text-textDark">安徽百和餐饮有限公司</p>
|
||
<p class="text-lg font-bold text-textDark mt-1">¥1,646,090.54</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">总营收占比</p>
|
||
<p class="text-sm font-medium text-textDark mt-1">10.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight" id="company3-icon"></i>
|
||
</div>
|
||
|
||
<!-- 公司3的二级容器（默认收起） -->
|
||
<div class="px-4 py-0 sub-level-hide" id="company3-level2-container">
|
||
<!-- 二级分类1：餐饮（默认收起） -->
|
||
<div class="py-3 border-b border-gray-100 flex justify-between items-center cursor-pointer" data-company3-level2="food1">
|
||
<div>
|
||
<p class="text-sm text-textDark">餐饮</p>
|
||
<p class="text-base font-bold text-textDark mt-1">¥823,045.27</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">营收占比</p>
|
||
<p class="text-sm font-medium text-textDark mt-1">50.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 二级1的三级容器（服务区，默认收起） -->
|
||
<div class="px-2 py-1 ml-4 sub-level-hide" data-company3-level3="food1">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-redDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">洪林服务区餐饮区</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">30.00%</p>
|
||
<p class="text-sm text-textDark">¥246,913.58</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-blueDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">清溪服务区餐饮区</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">20.00%</p>
|
||
<p class="text-sm text-textDark">¥164,609.05</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 二级分类2：咖啡（默认收起） -->
|
||
<div class="py-3 border-b border-gray-100 flex justify-between items-center cursor-pointer" data-company3-level2="food2">
|
||
<div>
|
||
<p class="text-sm text-textDark">咖啡</p>
|
||
<p class="text-base font-bold text-textDark mt-1">¥329,218.11</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">营收占比</p>
|
||
<p class="text-sm font-medium text-textDark mt-1">20.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 二级2的三级容器（服务区，默认收起） -->
|
||
<div class="px-2 py-1 ml-4 sub-level-hide" data-company3-level3="food2">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-redDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">太白岛服务区咖啡站</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">15.00%</p>
|
||
<p class="text-sm text-textDark">¥246,913.58</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 二级分类3：老乡鸡（默认收起） -->
|
||
<div class="py-3 border-b border-gray-100 flex justify-between items-center cursor-pointer" data-company3-level2="food3">
|
||
<div>
|
||
<p class="text-sm text-textDark">老乡鸡</p>
|
||
<p class="text-base font-bold text-textDark mt-1">¥329,218.11</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">营收占比</p>
|
||
<p class="text-sm font-medium text-textDark mt-1">20.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 二级3的三级容器（服务区，默认收起） -->
|
||
<div class="px-2 py-1 ml-4 sub-level-hide" data-company3-level3="food3">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-blueDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">天门服务区老乡鸡门店</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">12.00%</p>
|
||
<p class="text-sm text-textDark">¥197,530.87</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 二级分类4：肯德基（默认收起） -->
|
||
<div class="py-3 flex justify-between items-center cursor-pointer" data-company3-level2="food4">
|
||
<div>
|
||
<p class="text-sm text-textDark">肯德基</p>
|
||
<p class="text-base font-bold text-textDark mt-1">¥164,609.05</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">营收占比</p>
|
||
<p class="text-sm font-medium text-textDark mt-1">10.00%</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-3 text-xs text-textLight"></i>
|
||
</div>
|
||
<!-- 二级4的三级容器（服务区，默认收起） -->
|
||
<div class="px-2 py-1 ml-4 sub-level-hide" data-company3-level3="food4">
|
||
<div class="px-2 py-2 flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<span class="inline-block w-2 h-2 bg-redDot rounded-full mr-2"></span>
|
||
<p class="text-sm text-textDark">寒亭服务区肯德基门店</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-textLight">10.00%</p>
|
||
<p class="text-sm text-textDark">¥164,609.05</p>
|
||
</div>
|
||
<i class="fa fa-chevron-right ml-2 text-xs text-textLight"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// ---------------------- 第一层级：两个公司的展开/收起 ----------------------
|
||
// 公司1：安徽驿达运营管理有限公司
|
||
const company1Toggle = document.getElementById('company1-toggle');
|
||
const company1Icon = document.getElementById('company1-icon');
|
||
const company1Level2Container = document.getElementById('company1-level2-container');
|
||
|
||
company1Toggle.addEventListener('click', function() {
|
||
const isHidden = company1Level2Container.classList.contains('sub-level-hide');
|
||
if (isHidden) {
|
||
company1Level2Container.classList.remove('sub-level-hide');
|
||
company1Icon.className = 'fa fa-chevron-down ml-3 text-xs text-textLight';
|
||
} else {
|
||
company1Level2Container.classList.add('sub-level-hide');
|
||
company1Icon.className = 'fa fa-chevron-right ml-3 text-xs text-textLight';
|
||
}
|
||
});
|
||
|
||
// 公司2：安徽驿佳商贸有限公司
|
||
const company2Toggle = document.getElementById('company2-toggle');
|
||
const company2Icon = document.getElementById('company2-icon');
|
||
const company2Level2Container = document.getElementById('company2-level2-container');
|
||
|
||
company2Toggle.addEventListener('click', function() {
|
||
const isHidden = company2Level2Container.classList.contains('sub-level-hide');
|
||
if (isHidden) {
|
||
company2Level2Container.classList.remove('sub-level-hide');
|
||
company2Icon.className = 'fa fa-chevron-down ml-3 text-xs text-textLight';
|
||
} else {
|
||
company2Level2Container.classList.add('sub-level-hide');
|
||
company2Icon.className = 'fa fa-chevron-right ml-3 text-xs text-textLight';
|
||
}
|
||
});
|
||
|
||
// 新增：公司3：安徽百和餐饮有限公司
|
||
const company3Toggle = document.getElementById('company3-toggle');
|
||
const company3Icon = document.getElementById('company3-icon');
|
||
const company3Level2Container = document.getElementById('company3-level2-container');
|
||
|
||
company3Toggle.addEventListener('click', function() {
|
||
const isHidden = company3Level2Container.classList.contains('sub-level-hide');
|
||
if (isHidden) {
|
||
company3Level2Container.classList.remove('sub-level-hide');
|
||
company3Icon.className = 'fa fa-chevron-down ml-3 text-xs text-textLight';
|
||
} else {
|
||
company3Level2Container.classList.add('sub-level-hide');
|
||
company3Icon.className = 'fa fa-chevron-right ml-3 text-xs text-textLight';
|
||
}
|
||
});
|
||
|
||
// ---------------------- 第二层级：公司1的二级分类（快餐/零售等）展开/收起 ----------------------
|
||
const company1Level2Items = document.querySelectorAll('[data-company1-level2]');
|
||
company1Level2Items.forEach(item => {
|
||
item.addEventListener('click', function() {
|
||
const cate = this.getAttribute('data-company1-level2');
|
||
const level3Container = document.querySelector(`[data-company1-level3="${cate}"]`);
|
||
const icon = this.querySelector('i');
|
||
|
||
const isHidden = level3Container.classList.contains('sub-level-hide');
|
||
if (isHidden) {
|
||
level3Container.classList.remove('sub-level-hide');
|
||
icon.className = 'fa fa-chevron-down ml-3 text-xs text-textLight';
|
||
} else {
|
||
level3Container.classList.add('sub-level-hide');
|
||
icon.className = 'fa fa-chevron-right ml-3 text-xs text-textLight';
|
||
}
|
||
});
|
||
});
|
||
|
||
// ---------------------- 第三层级：公司1的三级分类（片区管理中心）展开/收起 ----------------------
|
||
const company1Level3Items = document.querySelectorAll('[data-company1-level3-item]');
|
||
company1Level3Items.forEach(item => {
|
||
item.addEventListener('click', function() {
|
||
const area = this.getAttribute('data-company1-level3-item');
|
||
const level4Container = document.querySelector(`[data-company1-level4="${area}"]`);
|
||
const icon = this.querySelector('i');
|
||
|
||
const isHidden = level4Container.classList.contains('sub-level-hide');
|
||
if (isHidden) {
|
||
level4Container.classList.remove('sub-level-hide');
|
||
icon.className = 'fa fa-chevron-down ml-3 text-xs text-textLight';
|
||
} else {
|
||
level4Container.classList.add('sub-level-hide');
|
||
icon.className = 'fa fa-chevron-right ml-3 text-xs text-textLight';
|
||
}
|
||
});
|
||
});
|
||
|
||
// ---------------------- 第二层级：公司2的二级分类（便利店/线上商城等）展开/收起 ----------------------
|
||
const company2Level2Items = document.querySelectorAll('[data-company2-level2]');
|
||
company2Level2Items.forEach(item => {
|
||
item.addEventListener('click', function() {
|
||
const shop = this.getAttribute('data-company2-level2');
|
||
const level3Container = document.querySelector(`[data-company2-level3="${shop}"]`);
|
||
const icon = this.querySelector('i');
|
||
|
||
const isHidden = level3Container.classList.contains('sub-level-hide');
|
||
if (isHidden) {
|
||
level3Container.classList.remove('sub-level-hide');
|
||
icon.className = 'fa fa-chevron-down ml-3 text-xs text-textLight';
|
||
} else {
|
||
level3Container.classList.add('sub-level-hide');
|
||
icon.className = 'fa fa-chevron-right ml-3 text-xs text-textLight';
|
||
}
|
||
});
|
||
});
|
||
|
||
// 新增：第二层级：公司3的二级分类（餐饮/咖啡/老乡鸡/肯德基）展开/收起
|
||
const company3Level2Items = document.querySelectorAll('[data-company3-level2]');
|
||
company3Level2Items.forEach(item => {
|
||
item.addEventListener('click', function() {
|
||
const food = this.getAttribute('data-company3-level2');
|
||
const level3Container = document.querySelector(`[data-company3-level3="${food}"]`);
|
||
const icon = this.querySelector('i');
|
||
|
||
const isHidden = level3Container.classList.contains('sub-level-hide');
|
||
if (isHidden) {
|
||
level3Container.classList.remove('sub-level-hide');
|
||
icon.className = 'fa fa-chevron-down ml-3 text-xs text-textLight';
|
||
} else {
|
||
level3Container.classList.add('sub-level-hide');
|
||
icon.className = 'fa fa-chevron-right ml-3 text-xs text-textLight';
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |