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