sposchedule

1
<script setup lang="ts">
2
  import DataTable from 'primevue/datatable';
3
  import Column from 'primevue/column';
4
  import DatePicker from 'primevue/datepicker';
5
  import Button from 'primevue/button';
6
  import { useGroupsQuery } from '@/queries/groups';
7
  import MultiSelect from 'primevue/multiselect';
8
  import { computed, ref } from 'vue';
9
  import { useAnalyticsSchedulesQuery } from '@/queries/schedules';
10
  import { useDateFormat } from '@vueuse/core';
11

12
  const { data: groups } = useGroupsQuery();
13

14
  const rangeDates = ref(null);
15
  const selectedGroups = ref(null);
16

17
  const start_date = computed(() =>
18
    rangeDates.value?.[0]
19
      ? useDateFormat(rangeDates?.value?.[0], 'DD.MM.YYYY').value
20
      : null
21
  );
22
  const end_date = computed(() =>
23
    rangeDates.value?.[1]
24
      ? useDateFormat(rangeDates?.value?.[1], 'DD.MM.YYYY').value
25
      : null
26
  );
27
  const groups_ids = computed(() =>
28
    selectedGroups.value?.map(group => group.id)
29
  );
30

31
  const { data, isLoading } = useAnalyticsSchedulesQuery(
32
    start_date,
33
    end_date,
34
    groups_ids
35
  );
36

37
  const dt = ref();
38

39
  const exportCSV = () => {
40
    // Формируем данные для экспорта
41
    const exportData = [];
42

43
    data.value.forEach(row => {
44
      Object.entries(row.subjects).forEach(([subject, hours]) => {
45
        exportData.push({
46
          group_name: row.group_name,
47
          subject,
48
          hours,
49
        });
50
      });
51
    });
52

53
    // Формируем CSV строку
54
    const csvContent = [
55
      ['Группа', 'Предмет', 'Часы'], // Заголовки
56
      ...exportData.map(item =>
57
        [item.group_name, item.subject, item.hours].join(',')
58
      ), // Данные
59
    ].join('\n');
60

61
    // Создаем ссылку для скачивания файла
62
    const BOM = '\uFEFF'; // Byte Order Mark
63
    const blob = new Blob([BOM + csvContent], {
64
      type: 'text/csv;charset=utf-8;',
65
    });
66
    const url = URL.createObjectURL(blob);
67
    const link = document.createElement('a');
68
    link.setAttribute('href', url);
69
    link.setAttribute(
70
      'download',
71
      `Экспорт ${start_date.value} - ${end_date.value}.csv`
72
    );
73
    link.click();
74
  };
75
</script>
76

77
<template>
78
  <div class="flex flex-col gap-4 mx-auto px-4 py-4">
79
    <div class="flex flex-wrap justify-between items-baseline">
80
      <h1 class="text-2xl">Аналитика</h1>
81
    </div>
82

83
    <div class="">
84
      <form
85
        class="flex flex-wrap items-center gap-2 p-4 rounded-lg bg-surface-100 dark:bg-surface-800"
86
      >
87
        <div class="flex flex-wrap items-center gap-2 justify-start">
88
          <MultiSelect
89
            v-model="selectedGroups"
90
            :options="groups"
91
            option-label="name"
92
            filter
93
            placeholder="Выбрать группы"
94
            :max-selected-labels="3"
95
            class="w-full md:w-60"
96
          />
97
          <DatePicker
98
            v-model="rangeDates"
99
            append-to="self"
100
            placeholder="Период"
101
            date-format="dd.mm.yy"
102
            selection-mode="range"
103
            :manual-input="false"
104
            class="w-full md:w-60"
105
          />
106
        </div>
107
      </form>
108
    </div>
109
    <div class="">
110
      <DataTable
111
        ref="dt"
112
        :loading="isLoading"
113
        :value="data"
114
        row-group-mode="rowspan"
115
        table-style="min-width: 50rem"
116
      >
117
        <template #header>
118
          <div style="text-align: left">
119
            <Button
120
              :disabled="!data"
121
              icon="pi pi-external-link"
122
              label="Экспорт в CSV"
123
              @click="exportCSV()"
124
            />
125
          </div>
126
        </template>
127
        <Column field="group_name" header="Группа" style="min-width: 200px">
128
          <template #body="slotProps">
129
            {{ slotProps.data.group_name }}
130
          </template>
131
        </Column>
132
        <Column
133
          :exportable="true"
134
          :field="
135
            row =>
136
              Object.entries(row.subjects)
137
                .map(([subject, hours]) => `${subject} - ${hours} ак. ч.`)
138
                .join('\n ')
139
          "
140
          header="Предметы"
141
          style="min-width: 200px"
142
        >
143
          <template #body="slotProps">
144
            <div v-for="(value, key) in slotProps.data.subjects" class="">
145
              <p class="leading-normal">
146
                {{ key }} -
147
                <span class="text-lg">{{ value }} ак. ч.</span>
148
              </p>
149
            </div>
150
          </template>
151
        </Column>
152
      </DataTable>
153
    </div>
154
  </div>
155
</template>
156