mirror of
https://gitlab.com/MoonTestUse1/AdministrationItDepartmens.git
synced 2025-08-14 00:25:46 +02:00
test
This commit is contained in:
MoonTestUse1
204
frontend/src/views/admin/AdminDashboard.vue
Normal file
204
frontend/src/views/admin/AdminDashboard.vue
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
<template>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="mb-6">
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Панель администратора</h1>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
<div class="bg-white p-4 rounded-lg shadow">
|
||||||
|
<h3 class="text-lg font-semibold mb-2">Новые заявки</h3>
|
||||||
|
<p class="text-3xl font-bold text-blue-600">{{ statistics.by_status?.new || 0 }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-4 rounded-lg shadow">
|
||||||
|
<h3 class="text-lg font-semibold mb-2">В работе</h3>
|
||||||
|
<p class="text-3xl font-bold text-yellow-600">{{ statistics.by_status?.in_progress || 0 }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-4 rounded-lg shadow">
|
||||||
|
<h3 class="text-lg font-semibold mb-2">Завершено</h3>
|
||||||
|
<p class="text-3xl font-bold text-green-600">{{ statistics.by_status?.completed || 0 }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-4 rounded-lg shadow">
|
||||||
|
<h3 class="text-lg font-semibold mb-2">Отклонено1</h3>
|
||||||
|
<p class="text-3xl font-bold text-red-600">{{ statistics.by_status?.rejected || 0 }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-lg shadow p-6">
|
||||||
|
<h2 class="text-xl font-bold mb-4">Последние заявки</h2>
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="min-w-full table-auto">
|
||||||
|
<thead>
|
||||||
|
<tr class="bg-gray-100">
|
||||||
|
<th class="px-4 py-2 text-left">ID</th>
|
||||||
|
<th class="px-4 py-2 text-left">Сотрудник</th>
|
||||||
|
<th class="px-4 py-2 text-left">Тип</th>
|
||||||
|
<th class="px-4 py-2 text-left">Приоритет</th>
|
||||||
|
<th class="px-4 py-2 text-left">Статус</th>
|
||||||
|
<th class="px-4 py-2 text-left">Дата создания</th>
|
||||||
|
<th class="px-4 py-2 text-left">Действия</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="request in requests" :key="request.id" class="border-b">
|
||||||
|
<td class="px-4 py-2">#{{ request.id }}</td>
|
||||||
|
<td class="px-4 py-2">{{ request.employee_name }}</td>
|
||||||
|
<td class="px-4 py-2">{{ request.request_type }}</td>
|
||||||
|
<td class="px-4 py-2">
|
||||||
|
<span :class="getPriorityClass(request.priority)">
|
||||||
|
{{ request.priority }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2">
|
||||||
|
<span :class="getStatusClass(request.status)">
|
||||||
|
{{ request.status }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-4 py-2">{{ formatDate(request.created_at) }}</td>
|
||||||
|
<td class="px-4 py-2">
|
||||||
|
<button @click="openRequestDetails(request)" class="text-blue-600 hover:text-blue-800">
|
||||||
|
Подробнее
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted, watch } from 'vue'
|
||||||
|
import axios from '@/plugins/axios'
|
||||||
|
import { wsClient } from '@/plugins/websocket'
|
||||||
|
import { formatDate } from '@/utils/date'
|
||||||
|
|
||||||
|
const requests = ref([])
|
||||||
|
const statistics = ref({
|
||||||
|
total: 0,
|
||||||
|
by_status: {
|
||||||
|
new: 0,
|
||||||
|
in_progress: 0,
|
||||||
|
completed: 0,
|
||||||
|
rejected: 0
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Обработчик WebSocket сообщений
|
||||||
|
const handleWebSocketMessage = (data: any) => {
|
||||||
|
console.log('AdminDashboard: Received WebSocket message:', data)
|
||||||
|
|
||||||
|
if (data.type === 'new_request' || data.type === 'status_update') {
|
||||||
|
if (data.statistics) {
|
||||||
|
console.log('AdminDashboard: Old statistics:', statistics.value)
|
||||||
|
console.log('AdminDashboard: Updating statistics:', data.statistics)
|
||||||
|
|
||||||
|
// Обновляем статистику
|
||||||
|
statistics.value = {
|
||||||
|
total: data.statistics.total,
|
||||||
|
by_status: {
|
||||||
|
new: data.statistics.by_status?.new || 0,
|
||||||
|
in_progress: data.statistics.by_status?.in_progress || 0,
|
||||||
|
completed: data.statistics.by_status?.completed || 0,
|
||||||
|
rejected: data.statistics.by_status?.rejected || 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('AdminDashboard: New statistics:', statistics.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.type === 'new_request' && data.data) {
|
||||||
|
console.log('AdminDashboard: Adding new request:', data.data)
|
||||||
|
// Добавляем новую заявку в начало списка
|
||||||
|
requests.value = [data.data, ...requests.value]
|
||||||
|
} else if (data.type === 'status_update' && data.data) {
|
||||||
|
console.log('AdminDashboard: Updating request status:', data.data)
|
||||||
|
// Обновляем статус заявки в списке
|
||||||
|
const request = requests.value.find(r => r.id === data.data.id)
|
||||||
|
if (request) {
|
||||||
|
request.status = data.data.status
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Загрузка данных
|
||||||
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
console.log('AdminDashboard: Fetching data')
|
||||||
|
const [requestsResponse, statsResponse] = await Promise.all([
|
||||||
|
axios.get('/api/requests/admin'),
|
||||||
|
axios.get('/api/requests/statistics')
|
||||||
|
])
|
||||||
|
requests.value = requestsResponse.data
|
||||||
|
console.log('AdminDashboard: Received statistics:', statsResponse.data)
|
||||||
|
|
||||||
|
// Обновляем статистику
|
||||||
|
statistics.value = {
|
||||||
|
total: statsResponse.data.total,
|
||||||
|
by_status: {
|
||||||
|
new: statsResponse.data.by_status?.new || 0,
|
||||||
|
in_progress: statsResponse.data.by_status?.in_progress || 0,
|
||||||
|
completed: statsResponse.data.by_status?.completed || 0,
|
||||||
|
rejected: statsResponse.data.by_status?.rejected || 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching data:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getPriorityClass = (priority: string) => {
|
||||||
|
const classes = {
|
||||||
|
high: 'text-red-600',
|
||||||
|
medium: 'text-yellow-600',
|
||||||
|
low: 'text-green-600'
|
||||||
|
}
|
||||||
|
return classes[priority] || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStatusClass = (status: string) => {
|
||||||
|
const classes = {
|
||||||
|
new: 'text-blue-600',
|
||||||
|
in_progress: 'text-yellow-600',
|
||||||
|
completed: 'text-green-600',
|
||||||
|
rejected: 'text-red-600'
|
||||||
|
}
|
||||||
|
return classes[status] || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const openRequestDetails = (request: any) => {
|
||||||
|
// Здесь можно добавить логику открытия модального окна с деталями заявки
|
||||||
|
console.log('Opening request details:', request)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Подключение к WebSocket при монтировании компонента
|
||||||
|
onMounted(() => {
|
||||||
|
console.log('AdminDashboard: Component mounted')
|
||||||
|
fetchData()
|
||||||
|
|
||||||
|
// Добавляем небольшую задержку перед подключением WebSocket
|
||||||
|
setTimeout(() => {
|
||||||
|
console.log('AdminDashboard: Connecting to WebSocket')
|
||||||
|
wsClient.connect('admin')
|
||||||
|
wsClient.addMessageHandler(handleWebSocketMessage)
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Переподключение WebSocket при потере соединения
|
||||||
|
watch(() => wsClient.isConnected, (isConnected) => {
|
||||||
|
console.log('AdminDashboard: WebSocket connection status changed:', isConnected)
|
||||||
|
if (!isConnected) {
|
||||||
|
console.log('AdminDashboard: Attempting to reconnect')
|
||||||
|
setTimeout(() => {
|
||||||
|
wsClient.connect('admin')
|
||||||
|
}, 3000)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Отключение от WebSocket при размонтировании компонента
|
||||||
|
onUnmounted(() => {
|
||||||
|
console.log('AdminDashboard: Component unmounting')
|
||||||
|
wsClient.removeMessageHandler(handleWebSocketMessage)
|
||||||
|
wsClient.disconnect()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user