Роли, переделывание отчета, изменение на главной странице

resources/js/Pages/Statistic/Index.vue

@@ -1,58 +1,135 @@
 <script setup>
+import {NDataTable} from 'naive-ui'
 import AppLayout from "../../Layouts/AppLayout.vue";
-import {NList, NListItem, NFlex, NText, NH1, NTag} from 'naive-ui'
+import {ref} from "vue";
 
 const props = defineProps({
-    is_view_only: {
-        type: Boolean,
-        default: false
-    },
-    period: {
+    data: {
         type: Object,
-        default: {}
-    },
-    group: {
-        type: Object,
-        default: {}
-    },
-    metrics: {
-        type: Object,
-        default: {}
-    },
-    form: {
-        type: Object,
-        default: {}
-    },
+        default: []
+    }
 })
+
+const columns = ref([
+    {
+        title: 'Отделение',
+        key: 'department',
+        width: 240,
+        titleAlign: 'center'
+    },
+    {
+        title: 'Кол-во коек',
+        key: 'beds',
+        width: 60,
+        titleAlign: 'center',
+        align: 'center'
+    },
+    {
+        title: 'Состояло',
+        key: 'beds',
+        width: 84,
+        titleAlign: 'center',
+        align: 'center'
+    },
+    {
+        title: 'Поступило',
+        key: 'received',
+        titleAlign: 'center',
+        children: [
+            {
+                title: 'Всего',
+                key: 'all',
+                width: 60,
+                titleAlign: 'center',
+                align: 'center'
+            },
+            {
+                title: 'План',
+                key: 'plan',
+                width: 60,
+                titleAlign: 'center',
+                align: 'center'
+            },
+            {
+                title: 'Экстр',
+                key: 'emergency',
+                width: 60,
+                titleAlign: 'center',
+                align: 'center'
+            },
+            {
+                title: 'Перевод',
+                key: '',
+                width: 84,
+                titleAlign: 'center',
+                align: 'center'
+            },
+        ]
+    },
+    {
+        title: 'Выбыло',
+        key: 'leave',
+        width: 84,
+        titleAlign: 'center',
+        align: 'center'
+    },
+    {
+        title: 'Состоит',
+        key: 'consist',
+        width: 84,
+        titleAlign: 'center',
+        align: 'center'
+    },
+    {
+        title: '% загруженности',
+        key: 'percentLoadedBeds',
+        width: 84,
+        titleAlign: 'center',
+        align: 'center'
+    },
+    {
+        title: 'Операции',
+        key: '',
+        titleAlign: 'center',
+        children: [
+            {
+                title: 'Э',
+                key: '',
+                width: 60,
+                titleAlign: 'center',
+                align: 'center'
+            },
+            {
+                title: 'П',
+                key: '',
+                width: 60,
+                titleAlign: 'center',
+                align: 'center'
+            },
+        ]
+    },
+])
 </script>
 
 <template>
-    <AppLayout>
-        <div class="max-w-6xl mx-auto mt-4 mb-4">
-            <div class="flex items-center justify-between">
-                <div>
-                    <n-h1 class="!mb-2">{{ group.name }}</n-h1>
-                    <n-text depth="3" v-if="group.description">
-                        {{ group.description }}
-                    </n-text>
-                </div>
-            </div>
-            <NList>
-                <NListItem v-for="metric in metrics.values">
-                    <NFlex justify="space-between" align="center" class="w-full px-4">
-                        <div>
-                            {{metric.item_name}}
-                        </div>
-                        <div>
-                            {{metric.sum}}
-                        </div>
-                    </NFlex>
-                </NListItem>
-            </NList>
-        </div>
-    </AppLayout>
+  <AppLayout>
+      <NDataTable :columns="columns"
+                  :data="data"
+                  size="small"
+                  :single-line="false"
+                  striped
+                  min-height="calc(100vh - 48px - 70px)"
+                  max-height="calc(100vh - 48px - 70px)"
+      >
+
+      </NDataTable>
+  </AppLayout>
 </template>
 
 <style scoped>
-
+:deep(.n-data-table-th),
+:deep(.n-data-table-td) {
+    //white-space: nowrap !important;
+    font-size: var(--n-font-size);
+}
 </style>