| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MindIA - Аналитика заявлений об акцепте договора электроснабжения</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| min-height: 100vh; |
| padding: 20px; |
| } |
| |
| .container { |
| max-width: 1400px; |
| margin: 0 auto; |
| background: white; |
| border-radius: 12px; |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); |
| overflow: hidden; |
| } |
| |
| .header { |
| background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); |
| color: white; |
| padding: 30px; |
| text-align: center; |
| } |
| |
| .header .platform-name { |
| font-size: 16px; |
| font-weight: 600; |
| letter-spacing: 2px; |
| margin-bottom: 15px; |
| opacity: 0.9; |
| } |
| |
| .header h1 { |
| font-size: 24px; |
| margin-bottom: 10px; |
| } |
| |
| .header p { |
| font-size: 14px; |
| opacity: 0.9; |
| } |
| |
| .filters-section { |
| padding: 30px; |
| background: #f8f9fa; |
| border-bottom: 2px solid #e0e0e0; |
| } |
| |
| .filters-title { |
| font-size: 18px; |
| font-weight: 600; |
| margin-bottom: 20px; |
| color: #2c3e50; |
| } |
| |
| .filters-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 20px; |
| margin-bottom: 20px; |
| } |
| |
| .filter-group { |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .filter-group label { |
| font-size: 14px; |
| font-weight: 500; |
| margin-bottom: 8px; |
| color: #495057; |
| } |
| |
| .filter-group input, |
| .filter-group select { |
| padding: 10px 12px; |
| border: 1px solid #ced4da; |
| border-radius: 6px; |
| font-size: 14px; |
| transition: all 0.3s; |
| } |
| |
| .filter-group input:focus, |
| .filter-group select:focus { |
| outline: none; |
| border-color: #667eea; |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
| } |
| |
| .buttons-row { |
| display: flex; |
| gap: 15px; |
| justify-content: flex-start; |
| flex-wrap: wrap; |
| } |
| |
| .btn { |
| padding: 12px 24px; |
| border: none; |
| border-radius: 6px; |
| font-size: 14px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s; |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); |
| } |
| |
| .btn-secondary { |
| background: #6c757d; |
| color: white; |
| } |
| |
| .btn-secondary:hover { |
| background: #5a6268; |
| transform: translateY(-2px); |
| } |
| |
| .btn-success { |
| background: #28a745; |
| color: white; |
| } |
| |
| .btn-success:hover { |
| background: #218838; |
| transform: translateY(-2px); |
| } |
| |
| .btn-danger { |
| background: #dc3545; |
| color: white; |
| } |
| |
| .btn-danger:hover { |
| background: #c82333; |
| transform: translateY(-2px); |
| } |
| |
| .tabs-section { |
| display: flex; |
| background: #e9ecef; |
| padding: 0 30px; |
| } |
| |
| .tab { |
| padding: 15px 30px; |
| cursor: pointer; |
| font-weight: 600; |
| color: #6c757d; |
| border-bottom: 3px solid transparent; |
| transition: all 0.3s; |
| } |
| |
| .tab:hover { |
| background: rgba(102, 126, 234, 0.1); |
| } |
| |
| .tab.active { |
| color: #667eea; |
| border-bottom-color: #667eea; |
| background: white; |
| } |
| |
| .content-section { |
| padding: 30px; |
| } |
| |
| .tab-content { |
| display: none; |
| } |
| |
| .tab-content.active { |
| display: block; |
| } |
| |
| .export-buttons { |
| margin-bottom: 20px; |
| display: flex; |
| gap: 10px; |
| justify-content: flex-end; |
| } |
| |
| .stats-row { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 20px; |
| margin-bottom: 30px; |
| } |
| |
| .stat-card { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| padding: 20px; |
| border-radius: 8px; |
| color: white; |
| } |
| |
| .stat-card h3 { |
| font-size: 14px; |
| opacity: 0.9; |
| margin-bottom: 10px; |
| } |
| |
| .stat-card .stat-value { |
| font-size: 32px; |
| font-weight: 700; |
| } |
| |
| .table-container { |
| overflow-x: auto; |
| border: 1px solid #dee2e6; |
| border-radius: 8px; |
| } |
| |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 14px; |
| } |
| |
| thead { |
| background: #f8f9fa; |
| } |
| |
| th { |
| padding: 15px 12px; |
| text-align: left; |
| font-weight: 600; |
| color: #495057; |
| border-bottom: 2px solid #dee2e6; |
| white-space: nowrap; |
| } |
| |
| td { |
| padding: 12px; |
| border-bottom: 1px solid #dee2e6; |
| } |
| |
| tbody tr:hover { |
| background: #f8f9fa; |
| } |
| |
| tbody tr:last-child td { |
| border-bottom: none; |
| } |
| |
| .badge { |
| display: inline-block; |
| padding: 4px 8px; |
| border-radius: 4px; |
| font-size: 12px; |
| font-weight: 600; |
| } |
| |
| .badge-success { |
| background: #d4edda; |
| color: #155724; |
| } |
| |
| .badge-warning { |
| background: #fff3cd; |
| color: #856404; |
| } |
| |
| .badge-danger { |
| background: #f8d7da; |
| color: #721c24; |
| } |
| |
| .loading { |
| text-align: center; |
| padding: 40px; |
| color: #6c757d; |
| } |
| |
| .empty-state { |
| text-align: center; |
| padding: 60px 20px; |
| color: #6c757d; |
| } |
| |
| .empty-state svg { |
| width: 100px; |
| height: 100px; |
| opacity: 0.3; |
| margin-bottom: 20px; |
| } |
| |
| @media (max-width: 768px) { |
| .filters-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .buttons-row { |
| flex-direction: column; |
| } |
| |
| .btn { |
| width: 100%; |
| justify-content: center; |
| } |
| |
| .tabs-section { |
| overflow-x: auto; |
| padding: 0 15px; |
| } |
| |
| .export-buttons { |
| flex-direction: column; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| |
| <div class="header"> |
| <div class="platform-name"> MindIA</div> |
| <h1>Аналитика и отчетность по заявлениям об акцепте договора электроснабжения</h1> |
| <p>Источники данных: СЭД «Documentolog», Qala-qyzmet, E-Otinish, ИБС "Atlas"</p> |
| </div> |
|
|
| |
| <div class="filters-section"> |
| <div class="filters-title">Параметры отчета</div> |
| <div class="filters-grid"> |
| <div class="filter-group"> |
| <label for="dateFrom">Дата начала:</label> |
| <input type="date" id="dateFrom" name="dateFrom"> |
| </div> |
| <div class="filter-group"> |
| <label for="dateTo">Дата окончания:</label> |
| <input type="date" id="dateTo" name="dateTo"> |
| </div> |
| <div class="filter-group"> |
| <label for="employee">Сотрудник:</label> |
| <select id="employee" name="employee"> |
| <option value="all">Все сотрудники</option> |
| <option value="emp1">Иванов И.И.</option> |
| <option value="emp2">Петров П.П.</option> |
| <option value="emp3">Сидоров С.С.</option> |
| <option value="emp4">Кожабеков К.К.</option> |
| <option value="emp5">Нурланова А.Т.</option> |
| </select> |
| </div> |
| </div> |
| <div class="buttons-row"> |
| <button class="btn btn-primary" onclick="generateReport()"> |
| <span>🔍</span> Сформировать отчет |
| </button> |
| <button class="btn btn-secondary" onclick="resetFilters()"> |
| <span>↻</span> Сбросить фильтры |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="tabs-section"> |
| <div class="tab active" onclick="switchTab('opened')"> |
| Открытые лицевые счета |
| </div> |
| <div class="tab" onclick="switchTab('terminated')"> |
| Расторжение договоров |
| </div> |
| </div> |
|
|
| |
| <div class="content-section"> |
| |
| <div class="stats-row" id="statsRow" style="display: none;"> |
| <div class="stat-card"> |
| <h3>Всего заявлений</h3> |
| <div class="stat-value" id="totalApplications">0</div> |
| </div> |
| <div class="stat-card"> |
| <h3>Обработано</h3> |
| <div class="stat-value" id="processedApplications">0</div> |
| </div> |
| <div class="stat-card"> |
| <h3>В работе</h3> |
| <div class="stat-value" id="pendingApplications">0</div> |
| </div> |
| <div class="stat-card"> |
| <h3>Средний срок обработки</h3> |
| <div class="stat-value" id="avgProcessingTime">0д</div> |
| </div> |
| </div> |
|
|
| |
| <div id="openedTab" class="tab-content active"> |
| <div class="export-buttons"> |
| <button class="btn btn-success" onclick="exportToExcel('opened')"> |
| <span>📊</span> Экспорт в Excel |
| </button> |
| <button class="btn btn-danger" onclick="exportToPDF('opened')"> |
| <span>📄</span> Экспорт в PDF |
| </button> |
| </div> |
| <div class="table-container"> |
| <table id="openedAccountsTable"> |
| <thead> |
| <tr> |
| <th>№</th> |
| <th>Заявление</th> |
| <th>Лицевой счет</th> |
| <th>ФИО</th> |
| <th>Адрес</th> |
| <th>Телефон</th> |
| <th>ИИН</th> |
| <th>Кол-во зарег.</th> |
| <th>Площадь общая</th> |
| <th>Подразделение</th> |
| <th>Участок</th> |
| <th>Сектор</th> |
| <th>Обработка перс. данных</th> |
| <th>Пользователь</th> |
| <th>Заявка</th> |
| <th>Дата подачи</th> |
| </tr> |
| </thead> |
| <tbody id="openedAccountsBody"> |
| <tr> |
| <td colspan="16" class="empty-state"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
| <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| </svg> |
| <h3>Нет данных для отображения</h3> |
| <p>Выберите параметры и нажмите "Сформировать отчет"</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
|
|
| |
| <div id="terminatedTab" class="tab-content"> |
| <div class="export-buttons"> |
| <button class="btn btn-success" onclick="exportToExcel('terminated')"> |
| <span>📊</span> Экспорт в Excel |
| </button> |
| <button class="btn btn-danger" onclick="exportToPDF('terminated')"> |
| <span>📄</span> Экспорт в PDF |
| </button> |
| </div> |
| <div class="table-container"> |
| <table id="terminatedContractsTable"> |
| <thead> |
| <tr> |
| <th>№</th> |
| <th>Заявление</th> |
| <th>Лицевой счет</th> |
| <th>ФИО</th> |
| <th>Адрес</th> |
| <th>Телефон</th> |
| <th>ИИН</th> |
| <th>Кол-во зарег.</th> |
| <th>Площадь общая</th> |
| <th>Подразделение</th> |
| <th>Участок</th> |
| <th>Сектор</th> |
| <th>Обработка перс. данных</th> |
| <th>Пользователь</th> |
| <th>Заявка</th> |
| <th>Дата подачи</th> |
| </tr> |
| </thead> |
| <tbody id="terminatedContractsBody"> |
| <tr> |
| <td colspan="16" class="empty-state"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
| <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| </svg> |
| <h3>Нет данных для отображения</h3> |
| <p>Выберите параметры и нажмите "Сформировать отчет"</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const sampleOpenedAccounts = [ |
| { |
| id: 1, |
| application: 'DOC-2024-001', |
| account: 'ЛС-100001', |
| name: 'Иванов Иван Иванович', |
| address: 'г. Астана, ул. Кабанбай батыра, д. 10, кв. 5', |
| phone: '+7 701 123 4567', |
| iin: '900101300123', |
| registered: 3, |
| area: 65.5, |
| department: 'Отдел №1', |
| district: 'Есильский район', |
| sector: 'Сектор А', |
| dataProcessing: 'Да', |
| user: 'Петров П.П.', |
| request: 'REQ-2024-001', |
| date: '2024-01-15' |
| }, |
| { |
| id: 2, |
| application: 'QALA-2024-002', |
| account: 'ЛС-100002', |
| name: 'Кожабеков Алихан Мухамбетович', |
| address: 'г. Астана, ул. Республики, д. 25, кв. 12', |
| phone: '+7 702 234 5678', |
| iin: '850215400234', |
| registered: 4, |
| area: 78.2, |
| department: 'Отдел №2', |
| district: 'Сарыаркинский район', |
| sector: 'Сектор Б', |
| dataProcessing: 'Да', |
| user: 'Нурланова А.Т.', |
| request: 'REQ-2024-002', |
| date: '2024-01-16' |
| }, |
| { |
| id: 3, |
| application: 'E-OTINISH-2024-003', |
| account: 'ЛС-100003', |
| name: 'Смирнова Елена Петровна', |
| address: 'г. Астана, пр. Мангилик Ел, д. 55, кв. 89', |
| phone: '+7 705 345 6789', |
| iin: '920320500345', |
| registered: 2, |
| area: 52.0, |
| department: 'Отдел №1', |
| district: 'Алматинский район', |
| sector: 'Сектор В', |
| dataProcessing: 'Да', |
| user: 'Иванов И.И.', |
| request: 'REQ-2024-003', |
| date: '2024-01-17' |
| } |
| ]; |
| |
| const sampleTerminatedContracts = [ |
| { |
| id: 1, |
| application: 'DOC-2024-050', |
| account: 'ЛС-200001', |
| name: 'Аманов Серик Болатович', |
| address: 'г. Астана, ул. Туран, д. 33, кв. 45', |
| phone: '+7 707 456 7890', |
| iin: '880505600456', |
| registered: 2, |
| area: 48.5, |
| department: 'Отдел №3', |
| district: 'Есильский район', |
| sector: 'Сектор Г', |
| dataProcessing: 'Да', |
| user: 'Кожабеков К.К.', |
| request: 'REQ-2024-050', |
| date: '2024-01-18' |
| }, |
| { |
| id: 2, |
| application: 'QALA-2024-051', |
| account: 'ЛС-200002', |
| name: 'Петрова Ольга Николаевна', |
| address: 'г. Астана, ул. Достык, д. 18, кв. 7', |
| phone: '+7 708 567 8901', |
| iin: '750610700567', |
| registered: 3, |
| area: 70.0, |
| department: 'Отдел №2', |
| district: 'Байконурский район', |
| sector: 'Сектор Д', |
| dataProcessing: 'Да', |
| user: 'Сидоров С.С.', |
| request: 'REQ-2024-051', |
| date: '2024-01-19' |
| } |
| ]; |
| |
| |
| document.getElementById('dateFrom').valueAsDate = new Date(new Date().setDate(new Date().getDate() - 30)); |
| document.getElementById('dateTo').valueAsDate = new Date(); |
| |
| |
| function switchTab(tabName) { |
| const tabs = document.querySelectorAll('.tab'); |
| const tabContents = document.querySelectorAll('.tab-content'); |
| |
| tabs.forEach(tab => tab.classList.remove('active')); |
| tabContents.forEach(content => content.classList.remove('active')); |
| |
| if (tabName === 'opened') { |
| tabs[0].classList.add('active'); |
| document.getElementById('openedTab').classList.add('active'); |
| } else { |
| tabs[1].classList.add('active'); |
| document.getElementById('terminatedTab').classList.add('active'); |
| } |
| } |
| |
| |
| function generateReport() { |
| const dateFrom = document.getElementById('dateFrom').value; |
| const dateTo = document.getElementById('dateTo').value; |
| const employee = document.getElementById('employee').value; |
| |
| if (!dateFrom || !dateTo) { |
| alert('Пожалуйста, выберите период отчета'); |
| return; |
| } |
| |
| |
| document.getElementById('openedAccountsBody').innerHTML = '<tr><td colspan="16" class="loading">Загрузка данных...</td></tr>'; |
| document.getElementById('terminatedContractsBody').innerHTML = '<tr><td colspan="16" class="loading">Загрузка данных...</td></tr>'; |
| |
| |
| setTimeout(() => { |
| populateTable('openedAccountsBody', sampleOpenedAccounts); |
| populateTable('terminatedContractsBody', sampleTerminatedContracts); |
| updateStatistics(); |
| document.getElementById('statsRow').style.display = 'grid'; |
| }, 1000); |
| } |
| |
| |
| function populateTable(tableBodyId, data) { |
| const tbody = document.getElementById(tableBodyId); |
| |
| if (data.length === 0) { |
| tbody.innerHTML = '<tr><td colspan="16" class="empty-state"><h3>Нет данных</h3><p>По выбранным параметрам данные не найдены</p></td></tr>'; |
| return; |
| } |
| |
| tbody.innerHTML = data.map(item => ` |
| <tr> |
| <td>${item.id}</td> |
| <td>${item.application}</td> |
| <td><strong>${item.account}</strong></td> |
| <td>${item.name}</td> |
| <td>${item.address}</td> |
| <td>${item.phone}</td> |
| <td>${item.iin}</td> |
| <td>${item.registered}</td> |
| <td>${item.area} м²</td> |
| <td>${item.department}</td> |
| <td>${item.district}</td> |
| <td>${item.sector}</td> |
| <td><span class="badge badge-success">${item.dataProcessing}</span></td> |
| <td>${item.user}</td> |
| <td>${item.request}</td> |
| <td>${item.date}</td> |
| </tr> |
| `).join(''); |
| } |
| |
| |
| function updateStatistics() { |
| const total = sampleOpenedAccounts.length + sampleTerminatedContracts.length; |
| document.getElementById('totalApplications').textContent = total; |
| document.getElementById('processedApplications').textContent = total; |
| document.getElementById('pendingApplications').textContent = '0'; |
| document.getElementById('avgProcessingTime').textContent = '2д'; |
| } |
| |
| |
| function resetFilters() { |
| document.getElementById('dateFrom').valueAsDate = new Date(new Date().setDate(new Date().getDate() - 30)); |
| document.getElementById('dateTo').valueAsDate = new Date(); |
| document.getElementById('employee').value = 'all'; |
| document.getElementById('openedAccountsBody').innerHTML = '<tr><td colspan="16" class="empty-state"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><h3>Нет данных для отображения</h3><p>Выберите параметры и нажмите "Сформировать отчет"</p></td></tr>'; |
| document.getElementById('terminatedContractsBody').innerHTML = '<tr><td colspan="16" class="empty-state"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><h3>Нет данных для отображения</h3><p>Выберите параметры и нажмите "Сформировать отчет"</p></td></tr>'; |
| document.getElementById('statsRow').style.display = 'none'; |
| } |
| |
| |
| function exportToExcel(type) { |
| alert('Экспорт в Excel: ' + (type === 'opened' ? 'Открытые лицевые счета' : 'Расторжение договоров')); |
| |
| } |
| |
| |
| function exportToPDF(type) { |
| alert('Экспорт в PDF: ' + (type === 'opened' ? 'Открытые лицевые счета' : 'Расторжение договоров')); |
| |
| } |
| </script> |
| </body> |
| </html> |
