Добавил новый график Хирургическая активность #7

resources/js/Pages/Statistic/Headquarters.vue

@@ -368,8 +368,15 @@ const unwantedSeries = computed(() => [{
     data: unwantedDepts.value.map(d => d.countUnwanted),
 }])
 
-// --- График: Состав по отделениям ---
+// --- График: Хирургическая активность ---
-const consistOptions = computed(() => ({
+// Формула: (кол-во операций / кол-во выбывших) * 100
+const surgicalActivity = (d) => {
+    const ops = (d.surgical?.plan ?? 0) + (d.surgical?.emergency ?? 0)
+    const outcome = d.outcome ?? 0
+    return outcome > 0 ? Math.round((ops / outcome) * 100) : 0
+}
+
+const surgicalActivityOptions = computed(() => ({
     chart: baseChart('bar'),
     theme: { mode: 'dark' },
     plotOptions: {
@@ -392,6 +399,7 @@ const consistOptions = computed(() => ({
     },
     dataLabels: {
         enabled: true,
+        formatter: v => `${v}%`,
         style: { fontSize: '10px', fontFamily: FONT, fontWeight: 600, colors: [LABEL_COLOR] },
         offsetY: -6,
     },
@@ -401,15 +409,24 @@ const consistOptions = computed(() => ({
         axisBorder: { show: false },
         axisTicks: { show: false },
     },
-    yaxis: { labels: { style: { colors: AXIS_COLOR, fontFamily: FONT } }, tickAmount: 4 },
+    yaxis: { labels: { style: { colors: AXIS_COLOR, fontFamily: FONT }, formatter: v => `${Math.round(v)}%` }, tickAmount: 4 },
-    colors: ['#818cf8'],
+    colors: ['#14b8a6'],
-    tooltip: { ...baseTooltip, y: { formatter: v => `${v} пациентов` } },
+    tooltip: {
+        ...baseTooltip,
+        y: {
+            formatter: (val, { dataPointIndex }) => {
+                const d = departments.value[dataPointIndex]
+                const ops = (d?.surgical?.plan ?? 0) + (d?.surgical?.emergency ?? 0)
+                return `${val}% — ${ops} опер. / ${d?.outcome ?? 0} выб.`
+            },
+        },
+    },
     grid: baseGrid,
 }))
 
-const consistSeries = computed(() => [{
+const surgicalActivitySeries = computed(() => [{
-    name: 'Пациентов',
+    name: 'Хир. активность',
-    data: departments.value.map(d => d.consist ?? 0),
+    data: departments.value.map(d => surgicalActivity(d)),
 }])
 
 // --- Обновление данных через API ---
@@ -655,14 +672,14 @@ onUnmounted(() => {
                 <!-- ── Нижняя сетка: состав + НС + лента ── -->
                 <div class="hq-bottom-grid">
 
-                    <!-- Состав по отделениям -->
+                    <!-- Хирургическая активность -->
-                    <SectionCard title="Состав по отделениям" :icon="TbBed" no-padding>
+                    <SectionCard title="Хирургическая активность" :icon="TbScissors" no-padding>
                         <VueApexCharts
                             v-if="departments.length"
                             type="bar"
                             height="260"
-                            :options="consistOptions"
+                            :options="surgicalActivityOptions"
-                            :series="consistSeries"
+                            :series="surgicalActivitySeries"
                         />
                         <NEl v-else class="chart-empty"><NEmpty description="Нет данных" size="small" /></NEl>
                     </SectionCard>