[WIP] Добавил карточку пациента на приеме

src/assets/sass/variables.sass

@@ -94,4 +94,5 @@
   --surface-blue-big: #ecf0fe
   --gray-scondary: #dddde8
   --system-color-red: #f34549
+  --system-color-green: #21ba72
 

src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue

@@ -1,14 +1,130 @@
 <template lang="pug">
-  medcard-form-wrapper(title="Пациент на приеме", title-link="Медкарта")
+  medcard-form-wrapper(v-if="patient", title="Пациент на приеме", title-link="Медкарта")
+    .flex.flex-col
+      .header.flex.px-6.py-5.justify-between
+        .flex.text-base.font-medium.gap-x-3
+          img.h-14.w-14.object-cover.rounded-full(:src="patient?.avatar")
+          .flex.flex-col.justify-center.gap-y-1
+            .font-bold.text-xll {{patient.last_name + " " + patient.first_name + " " + patient.patronymic}}
+            .grey-color.text-smm {{patient?.birthday}}
+        .flex.flex-col.gap-y-1.text-smm.font-medium
+          .flex.items-center.gap-x-2
+            .priority.flex(:class="choiceClass(patient.priority)")
+            .text-smm(:class="choiceColor(patient.priority)") {{choicePriority(patient.priority)}}
+          .grey-color.text-smm Приоритет
+      .flex
+        .data.flex.w-full.h-full(v-for="item in data")
+          .flex.flex-col.px-6.py-4.gap-y-6
+            .text-m.font-bold {{item.title}}
+            .flex.flex-col.text-smm 
+              .grey-color {{item.text1}}
+              .font-medium {{item.first}}
+            .flex.flex-col.text-smm
+              .grey-color {{item.text2}}
+              .font-medium {{item.second}}
 </template>
 
 <script>
 import MedcardFormWrapper from "@/pages/medcards/components/MedcardFormWrapper.vue";
+import { patientList } from "@/pages/newCalendar/utils/calendarConfig";
+import * as moment from "moment";
 
 export default {
   name: "CurrentPatientForm",
   components: { MedcardFormWrapper },
+  data() {
+    return {
+      patient: patientList
+        .find(({ label }) => label === "Пациенты")
+        .data.find(
+          ({ time }) =>
+            time.from <= moment().format("HH:MM") &&
+            time.to >= moment().format("HH:MM")
+        ),
+      prioritys: [
+        { name: "Без приоритета", id: 0, class: "none-priority" },
+        { name: "Высокий", id: 1, class: "high-priority" },
+        { name: "Средний", id: 2, class: "middle-priority" },
+        { name: "Низский", id: 3, class: "low-priority" },
+      ],
+      data: [
+        { title: "Запись", text1: "Дата", text2: "Время" },
+        { title: "Данные", text1: "Телефон", text2: "Email" },
+        { title: "Страхование", text1: "Компания", text2: "Полис" },
+      ],
+    };
+  },
+  methods: {
+    choiceClass(priority) {
+      return this.prioritys.find(({ id }) => id === priority).class;
+    },
+    choicePriority(priority) {
+      return this.prioritys.find(({ id }) => id === priority).name;
+    },
+    choiceColor(priority) {
+      return {
+        "grey-color": !priority,
+        "red-color": priority === 1,
+        "blue-color": priority === 2,
+        "green-color": priority === 3,
+      };
+    },
+  },
+  watch: {
+    patient: {
+      deep: true,
+      immediate: true,
+      handler() {
+        this.data[0].first = moment().format("DD MMMM");
+        this.data[0].second =
+          this.patient?.time?.from + "-" + this.patient?.time?.to;
+
+        this.data[1].first = this.patient?.phone;
+        this.data[1].second = this.patient?.email;
+
+        this.data[2].first = this.patient?.company;
+        this.data[2].second = this.patient?.policy;
+      },
+    },
+  },
 };
 </script>
 
-<style lang="sass" scoped></style>
+<style lang="sass" scoped>
+.header
+  border-bottom: 1px solid var(--gray-scondary)
+
+.priority
+  height: 8px
+  width: 8px
+  border-radius: 50%
+
+.data
+  border-right: 1px solid var(--gray-scondary)
+  &:last-child
+    border-right: none
+
+.high-priority
+  background: var(--system-color-red)
+
+.middle-priority
+  background: var(--btn-blue-color)
+
+.low-priority
+  background: var(--system-color-green)
+
+.none-priority
+  border: 1.5px solid var(--font-grey-color)
+
+.grey-color
+  color: var(--font-grey-color)
+
+.red-color
+  color: var(--system-color-red)
+
+.blue-color
+  color: var(--btn-blue-color)
+
+.green-color
+  color: var(--system-color-green)
+</style>

src/pages/newCalendar/utils/calendarConfig.js

@@ -120,7 +120,12 @@ export const patientList = [
         avatar: personImage,
         check: false,
         reception: "25.07.2023",
-        time: { from: "12:00", to: "14:00" },
+        time: { from: "12:00", to: "23:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 1,
@@ -132,6 +137,11 @@ export const patientList = [
         check: false,
         reception: "25.07.2023",
         time: { from: "11:00", to: "12:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 2,
@@ -142,7 +152,12 @@ export const patientList = [
         avatar: personImage,
         check: false,
         reception: "25.07.2023",
-        time: { from: "09:00", to: "11:00" },
+        time: { from: "14:00", to: "16:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 3,
@@ -154,6 +169,11 @@ export const patientList = [
         check: false,
         reception: "27.07.2023",
         time: { from: "12:00", to: "14:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 4,
@@ -165,6 +185,11 @@ export const patientList = [
         check: false,
         reception: "27.07.2023",
         time: { from: "11:00", to: "14:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 5,
@@ -176,6 +201,11 @@ export const patientList = [
         check: false,
         reception: "28.07.2023",
         time: { from: "18:00", to: "19:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 6,
@@ -187,6 +217,11 @@ export const patientList = [
         check: false,
         reception: "25.07.2023",
         time: { from: "16:00", to: "17:00" },
+        priority: 0,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 7,
@@ -198,6 +233,11 @@ export const patientList = [
         check: false,
         reception: "25.07.2023",
         time: { from: "20:00", to: "21:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 8,
@@ -209,6 +249,11 @@ export const patientList = [
         check: false,
         reception: "31.06.2023",
         time: { from: "12:00", to: "14:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 9,
@@ -220,6 +265,11 @@ export const patientList = [
         check: false,
         reception: "30.07.2023",
         time: { from: "12:00", to: "14:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
       {
         id: 10,
@@ -231,6 +281,11 @@ export const patientList = [
         check: false,
         reception: "27.07.2023",
         time: { from: "09:00", to: "10:00" },
+        priority: 1,
+        phone: "+7 (910) 623–32–23",
+        email: "gaevaia@yandex.ru",
+        company: "ООО «АльфаСтрахование»",
+        policy: "№ 2131-1331-4142",
       },
     ],
     choice: false,

tailwind.config.js

@@ -21,6 +21,7 @@ module.exports = {
         lg: ["18px", { lineHeight: "21px" }],
         lgx: ["22px", { lineHeight: "25.83px" }],
         xl: ["20px", { lineHeight: "23px" }],
+        xll: ["20px", { lineHeight: "24px" }],
         xxl: ["24px", { lineHeight: "26px" }],
         "2xl": ["28px", { lineHeight: "33px" }],
         "3xl": ["60px", { lineHeight: "70px" }],