duhongyu
/
ShuangHui_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>统计报表</title>

	<link href="../css/mui.css" rel="stylesheet" />

	<script src="../js/tailwindcss3.4.16.js"></script>

	<link href="../css/mui.picker.css" rel="stylesheet" />

	<link href="../css/mui.poppicker.css" rel="stylesheet" />

	<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />

	<script>

		tailwind.config = {

			theme: {

				extend: {

					colors: {

						primary: '#4F46E5',

						secondary: '#10B981'

					},

					borderRadius: {

						'none': '0px',

						'sm': '2px',

						DEFAULT: '4px',

						'md': '8px',

						'lg': '12px',

						'xl': '16px',

						'2xl': '20px',

						'3xl': '24px',

						'full': '9999px',

						'button': '4px'

					}

				}

			}

		}

	</script>
    <link rel="stylesheet" href="../css/all.min.css">

	<script src="../js/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
        }
        
        .container {
            max-width: 100%;
            padding: 0 10px;
        }
        
        /* 顶部导航 */
        .header {
            /* background: linear-gradient(to right, #1a73e8, #0d5bb0); */

			background-color: #5470C6;
            color: white;
            padding: 15px 0;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .header h1 {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 15px;
            letter-spacing: 0.5px;
        }
        
        /* Tab切换 */
        .tabs-container {
            position: relative;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            white-space: nowrap;
            padding: 0 10px;
            margin-top: 10px;
            scrollbar-width: none;
        }
        
        .tabs-container::-webkit-scrollbar {
            display: none;
        }
        
        .tabs {
            display: inline-flex;
            gap: 8px;
        }
        
        .tab {
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .tab.active {
            background: white;
            color: #5470C6;

            font-weight: 600;
        }
        
        /* 控制区域 */
        .controls {
            display: flex;
            padding: 15px 10px;
            gap: 10px;
            background: white;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 78px;
            z-index: 90;
        }
        
        .date-picker, .search-box {
            flex: 1;
            padding: 0px 15px;
            border-radius: 8px;
            border: 1px solid #ddd;
            font-size: 0.9rem;
            background: #f9f9f9;
        }
        
        .search-box {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .search-box input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            font-size: 0.9rem;
        }
        
        /* 数据卡片 */
        .summary-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            padding: 15px 10px;
        }
        
        .card {
            background: white;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            text-align: center;
        }
        
        .card-title {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 8px;
        }
        
        .card-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1a73e8;
        }
        
        .card-change {
            font-size: 0.8rem;
            margin-top: 4px;
            color: #4caf50;
        }
        
        .card-change.negative {
            color: #f44336;
        }
        
        /* 报表区域 */
        .report-container {

			margin-top: 10px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }
        
        .report-header {
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 180px;
            background: white;
            z-index: 80;
        }
        
        .report-header h2 {
            font-size: 1.1rem;
            color: #1a73e8;
        }
        
        .export-btn {
            background: #e8f0fe;
            color: #1a73e8;
            border: none;
            padding: 8px 15px;
            border-radius: 6px;
            font-size: 0.9rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 表格样式 */
        .table-container {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            /* min-width: 700px; */
        }
        
        thead {
            background-color: #f8f9fa;
           /* position: sticky;
            top: 230px;
            z-index: 70; */
        }
        
        th {
            padding: 14px 6px;
            text-align: center;
            font-weight: 600;
            color: #444;
            font-size: 0.8rem;
            border-bottom: 2px solid #eee;
        }
        
        td {
            padding: 6px;

			text-align: center;
            border-bottom: 1px solid #eee;
            font-size: 0.8rem;
        }
        
        tr:last-child td {
            border-bottom: none;
        }
        
        tr:nth-child(even) {
            background-color: #fcfcfc;
        }
        
        .completion-rate {
            color: #4caf50;
            font-weight: 600;
        }
        /* 响应式调整 */
        @media (min-width: 768px) {
            .container {
                max-width: 768px;
                margin: 0 auto;
            }
            
            .summary-cards {
                grid-template-columns: repeat(4, 1fr);
            }
            
            .card {
                padding: 20px;
            }
        }

		.chart-container {

			width: 100%;

			height: 200px;

		}

		

		.rate-chart {

			height: 120px;

		}

		

		.tab_div{

			display: none;

		}

		.submit{

			background-color: #5470C6;

			border-radius: 5px;

			color: #ffffff;

			display: inline-block;

			padding: 8px;

		}

		.type_con{

			width: 40% !important; 

			text-align: center !important;

			margin: 0 !important;

			padding: 0 !important;

		}
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部标题和Tab -->
        <header class="header">
            <!-- <h1>统计报表</h1> -->
            <div class="tabs-container">
                <div class="tabs">
                    <div class="tab active">投诉报表</div>
                    <div class="tab">区域分析</div>
                </div>
            </div>
        </header>
        <div class="tab_div" style="display: block;">

        	<div class="container mx-auto px-4 py-4">

        	

        		<div class="bg-white rounded-lg shadow-sm p-6 mb-6">

        			<div class="flex justify-between items-center mb-4">

        				<h2 class="text-xl font-medium">总投诉数 <span id="total">0</span> / <span name="selectType">周</span></h2>

        				<button class="text-gray-600 hover:text-gray-900" id="changeBut">

        	            <span name="selectType">周</span> <i class="fas fa-exchange ml-1"></i>

        	        </button>

        			</div>

        			<div class="flex flex-col gap-4">

        				<div class="relative w-full h-6 bg-gray-100 rounded-full overflow-hidden">

        					<div class="absolute left-0 top-0 h-full bg-primary" style="width: 50%;" id="total_rate"></div>

        					<!--<div class="absolute left-[50%] top-0 h-full bg-gray-300" style="width: 50%;"></div>-->

        				</div>

        				<div class="flex items-center justify-between">

        					<div>

        						<div class="text-gray-600">三大类投诉数 <span id="thisnumber">0</span></div>

        						<div class="text-green-500 text-sm mt-1" id="thiscontrast_div">

        							<i class="fas fa-arrow-up mr-1" id="thiscontrast_i"></i> 较上周 <span id="thiscontrast">0</span>

        						</div>

        					</div>

        					<div>

        						<div class="text-gray-600">其他投诉数 <span id="otherthisnumber">0</span></div>

        						<div class="text-red-500 text-sm mt-1" id="othercontrast_div">

        							<i class="fas fa-arrow-down mr-1" id="othercontrast_i"></i> 较上周 <span id="othercontrast">0</span>

        						</div>

        					</div>

        				</div>

        			</div>

        		</div>

        		<div class="bg-white rounded-lg shadow-sm p-6 mb-6">

        			<h2 class="text-xl font-medium mb-6">三大类投诉情况</h2>

        			<div class="flex flex-col lg:flex-row gap-6">

        				<div id="complaintPie" class="chart-container lg:w-1/2"></div>

        				<div class="flex flex-col gap-4 lg:w-1/2">

        					<div class="space-y-2 bg-blue-50 p-4 rounded-lg cursor-pointer hover:bg-blue-100 transition-colors" onclick="highlightPieSection(0, '破袋发霉')">

        						<div class="flex items-center justify-between">

        							<div class="flex items-center gap-2">

        								<div class="w-3 h-3 bg-[#5470c6]"></div>

        								<span class="text-gray-600">破袋发霉</span>

        							</div>

        							<span class="font-medium" id="mustiness">0</span>

        						</div>

        						<div class="flex justify-between text-sm">

        							<span class="text-gray-500">占比 <span id="mustinessRate">0%</span></span>

        							<span class="text-green-500" id="mustinesscontrast_span"><i class="fas fa-arrow-up mr-1" id="mustinesscontrast_i"></i>较上周  <span id="mustinesscontrast">0</span></span>

        						</div>

        					</div>

        					<div class="space-y-2 bg-blue-50 p-4 rounded-lg cursor-pointer hover:bg-blue-100 transition-colors" onclick="highlightPieSection(1, '杂质异物')">

        						<div class="flex items-center justify-between">

        							<div class="flex items-center gap-2">

        								<div class="w-3 h-3 bg-[#91cc75]"></div>

        								<span class="text-gray-600">杂质异物</span>

        							</div>

        							<span class="font-medium" id="impurity">0</span>

        						</div>

        						<div class="flex justify-between text-sm">

        							<span class="text-gray-500">占比 <span id="impurityRate">0</span></span>

        							<span class="text-red-500" id="impuritycontrast_span"><i class="fas fa-arrow-down mr-1" id="impuritycontrast_i"></i>较上周  <span id="impuritycontrast">0</span></span>

        						</div>

        					</div>

        					<div class="space-y-2 bg-blue-50 p-4 rounded-lg cursor-pointer hover:bg-blue-100 transition-colors" onclick="highlightPieSection(2, '变质异味')">

        						<div class="flex items-center justify-between">

        							<div class="flex items-center gap-2">

        								<div class="w-3 h-3 bg-[#fac858]"></div>

        								<span class="text-gray-600">变质异味</span>

        							</div>

        							<span class="font-medium" id="gobad">0</span>

        						</div>

        						<div class="flex justify-between text-sm">

        							<span class="text-gray-500">占比 <span id="gobadRate">0</span></span>

        							<span class="text-green-500" id="gobadcontrast_span"><i class="fas fa-arrow-up mr-1" id="gobadcontrast_i"></i>较上周 <span id="gobadcontrast">0</span></span>

        						</div>

        					</div>

        				</div>

        			</div>

        		</div>

        		<div class="grid grid-cols-2 gap-4 mb-6">

        			<div class="bg-white rounded-lg shadow-sm p-6">

        				<h3 class="text-lg font-medium mb-4">接单率</h3>

        				<div id="acceptanceRate" class="chart-container rate-chart"></div>

        			</div>

        			<div class="bg-white rounded-lg shadow-sm p-6">

        				<h3 class="text-lg font-medium mb-4">完结率</h3>

        				<div id="completionRate" class="chart-container rate-chart"></div>

        			</div>

        		</div>

        		<div class="bg-white rounded-lg shadow-sm p-6">

        			<h2 class="text-xl font-medium mb-6">三大类投诉趋势</h2>

        			<div id="trendLine" class="chart-container"></div>

        		</div>

        	

        	</div>

        </div>

		

		<div class="tab_div" style="display: none;">

			<!-- 控制区域 -->

			<div class="controls">

			    <div class="search-box">

			        <i class="fas fa-search"></i>

					

					<input type="text" id='start_data'  data-options='{"type":"date","beginYear":2010,"endYear":2023}' class="ui-alert type_con btn" data-index="" readonly="readonly" placeholder="开始日期"  />

					至

					<input type="text" id='end_data'  data-options='{"type":"date","beginYear":2010,"endYear":2023}' class="ui-alert type_con btn1" data-index="" readonly="readonly" placeholder="结束日期" />

					

				</div>

				<button type="button" class="submit">查询</button>

				<!-- <div></div> -->

				<!-- <ul class="mui-table-view">

					<li class="mui-table-view-cell btn" data-options='{"type":"date","beginYear":2010,"endYear":2023}'>

						<div class="mui-input-row">

							<label class="label">开始日期：</label> 

							

							<a href=""><span class="type_down mui-icon mui-icon-arrowdown mui-pull-right"></span></a>

						</div>

					</li>

					<li class="mui-table-view-cell btn1" data-options='{"type":"date","beginYear":2010,"endYear":2023}'>

						<div class="mui-input-row">

							<label class="label">结束日期：</label>

							<input type="text" id='end_data' class="ui-alert type_con size-14" data-index="" readonly="readonly" />

							<a href=""><span class="type_down mui-icon mui-icon-arrowdown mui-pull-right"></span></a>

						</div>

					</li>

				</ul> -->

			</div>

			

			<!-- 数据概览卡片 -->

			<!-- <div class="summary-cards"></div> -->

			

			<!-- 报表区域 -->

			<div class="report-container">

			    <!-- <div class="report-header">

			        <h2>大区工单统计明细</h2>

			        <button class="export-btn">

			            <i class="fas fa-download"></i> 导出

			        </button>

			    </div> -->

			    <div class="table-container">

			        <table id="workOrderTable">

			            <thead>

			                <tr>

			                    <th>序号</th>

			                    <th>大区</th>

			                    <th>工单总数</th>

			                    <th>处理中</th>

			                    <th>已完结</th>

			                    <th>完结率</th>

			                </tr>

			            </thead>

			            <tbody></tbody>

			        </table>

			    </div>

			

			</div>

		</div>

		

		

		
        
    </div>
	

	<script src="../js/mui.min.js?"></script>

	<script src="../js/mui.poppicker.js"></script>

	<script src="../js/mui.picker.min.js"></script>

	<script src="../js/zepto.js"></script>

	<script src="../js/jquery.min.js"></script>

	<script src="../js/mui.poppicker.js"></script>

	<script src="../js/mui.picker.min.js"></script>

	<script src="../js/huayi.config.js"></script>

	<script src="js/index.js"></script>

	
    <script>
        // Tab切换功能
        const tabs = document.querySelectorAll('.tab');

		var token = localStorage.getItem("token");
        tabs.forEach((tab,index) => {

            tab.addEventListener('click', () => {

                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');

				$('.tab_div').hide();

				$('.tab_div').eq(index).fadeIn();
            });
        });
		$(document).ready(function(){

			// 获取当前日期

			const today = new Date();

			// 获取本月1号

			const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);

			$("#start_data").val(formatDate(firstDayOfMonth))

			$("#end_data").val(formatDate(today))

			getAPPAfterprogress()

		})

		$(".submit").click(function(){

			getAPPAfterprogress()

		})
        // 格式化日期为 "年-月-日" 格式

        function formatDate(date) {

          const year = date.getFullYear();

          // 月份从0开始，需要加1

          const month = String(date.getMonth() + 1).padStart(2, '0');

          const day = String(date.getDate()).padStart(2, '0');

          return `${year}-${month}-${day}`;

        }

		function getAPPAfterprogress() {

			

			$.ajax({

				url:huayi.config.callcenter_url + 'Business/APPAfterprogress', 

				data: {

					token: token, 

					stime:$("#start_data").val(),

					endtime:$("#end_data").val()

				},

				dataType: 'json', //服务器返回json格式数据

				crossDomain: true,

				type: 'get', //HTTP请求类型

				timeout: 10000, //超时时间设置为10秒；

				headers: {

					'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'

				},

				success: function(data) {

					if(data.state === "success"){

						var resultData = JSON.parse(data.data).aftersalelist

						 // 获取表格tbody元素

						const tableBody = $('#workOrderTable tbody');

						tableBody.html('')

						$('.summary-cards').html('')

						// 遍历数据数组，动态生成表格行

						// $.each(resultData, function(index, item) {});

						for(var i = 0; i <resultData.length; i++) {

							// 创建表格行

							const row = $('<tr>');

							// 添加表格单元格

							row.append(`<td>${resultData[i].serialnumbe}</td>`); // 序号（索引+1）

							row.append(`<td>${resultData[i].area}</td>`);

							row.append(`<td>${resultData[i].total}</td>`);

							row.append(`<td>${resultData[i].processingnumber}</td>`);

							row.append(`<td>${resultData[i].processednumber}</td>`);

							row.append(`<td class="completion-rate">${resultData[i].processedrate}</td>`);

							// if(resultData[i].serialnumbe === '合计'){

							// 		$('<div class="card"><div class="card-title">工单总数</div><div class="card-value">'+resultData[i].total+'</div></div>'+

							// 		'<div class="card"><div class="card-title">处理中</div><div class="card-value">'+resultData[i].processingnumber+'</div></div>'+

							// 		'<div class="card"><div class="card-title">已完结</div><div class="card-value">'+resultData[i].processednumber+'</div></div>'+

							// 		'<div class="card"><div class="card-title">平均完结率</div><div class="card-value">'+resultData[i].processedrate+'</div></div>').appendTo('.summary-cards');

							// }

							// 将行添加到tbody

							tableBody.append(row);

						}

						// for(var i = 0; i<resultData.length; i++) {

						// 	$('<tr>' +

						// 		'<td>'+resultData[i].serialnumbe+'</td>' +

						// 		'<td>'+resultData[i].serialnumbe+'</td>' +

						// 		'<td>'+resultData[i].serialnumbe+'</td>' +

						// 		'<td>'+resultData[i].serialnumbe+'</td>' +

						// 		'<td>'+resultData[i].serialnumbe+'</td>' +

						// 		'<td>'+resultData[i].serialnumbe+'</td>' +

						// 		'</tr>').appendTo('#workOrderTable tbody');

						// }

					}

					

				},

				error: function(xhr, type, errorThrown) {

					//异常处理；

				}

			})

		}

		
        // 搜索功能
        // const searchInput = document.querySelector('.search-box input');
        // searchInput.addEventListener('input', function() {
        //     const searchTerm = this.value.toLowerCase();
        //     const rows = document.querySelectorAll('tbody tr');
            
        //     rows.forEach(row => {
        //         const region = row.cells[1].textContent.toLowerCase();
        //         if (region.includes(searchTerm)) {
        //             row.style.display = '';
        //         } else {
        //             row.style.display = 'none';
        //         }
        //     });
        // });
    </script>
</body>
</html>