WIP Добавил форму Тонометрии

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MainFactorsForm.vue

@@ -0,0 +1,115 @@
+<template lang="pug">
+  medical-form-wrapper(:title="data.title", :is-edit="isEdit", :open-edit="openEdit", :cancel="cancelEdit")
+    .thermometry-wrapper.grid.gap-x-20.gap-y-5
+      .flex.flex-col.gap-y-4.items-start(v-if="isEdit" v-for="(dataValue, key) in protocol[data.key]")
+        span.font-semibold.text-smm(v-if="data.key === 'thermometry'") {{ data.config[key].title }}
+        base-input-number.w-full(
+          v-model="dataValue.value",
+          :step="data.config[key].step",
+          :min="data.config[key].min",
+          :max="data.config[key].max",
+          reverse-value
+          :label="data.config[key].label",
+          outlined,
+          :shadow-text="data.config[key].shadowText",
+          :placeholder="`0${data.config[key].shadowText}`"
+          mask="###"
+          )
+        .flex.flex-col.gap-y-2.w-full(v-if="data.key === 'thermometry'")
+          base-input.w-full(
+            v-model="dataValue.result",
+            label="Результат",
+            outlined,
+            text-color="black",
+            placeholder="Введите диагноз...",
+          )
+          .results-wrapper.flex.flex-col.rounded.w-full.px-4.py-2
+            .result.flex.w-full.justify-between.items-center.h-9(v-for="result in thermometryMap")
+              .flex.gap-x-4
+                q-radio(
+                  v-model="dataValue.result",
+                  :val="result.value",
+                  :label="result.value",
+                  size="40px",
+                  dense,
+                  checked-icon="check_box",
+                  unchecked-icon="check_box_outline_blank",
+                  )
+              .alert-icon.flex.justify-center.items-center.rounded.w-6.h-6(v-if="result.colorWarning")
+                q-icon(size="13px" name="warning_amber")
+      .flex.flex-col.gap-y-2.items-start(
+        v-else,
+        :class="{'gap-y-4': data.key === 'tonometry'}"
+        )
+        .flex.flex-col.gap-y-3(v-for="(dataValue, key) in protocol[data.key]")
+          .label.font-semibold.text-smm(v-if="data.key === 'tonometry'") {{ data.config[key].label }}
+          .flex.gap-x-1.h-8(v-if="dataValue.value")
+            .flex.h-full.w-20.justify-center.items-center.gap-x-1.rounded(
+              v-if="data.key === 'thermometry'",
+              :style="{'background-color': data.config[key].bg, 'color': data.config[key].color}"
+              )
+              q-icon(size="18px", :name="data.config[key].icon")
+              span.text-smm.font-medium {{ `${dataValue.value}º` }}
+            .flex.items-center.h-full.px-3.font-medium.text-smm.rounded(
+              v-if="dataValue.result || (data.key === 'tonometry' && dataValue.value)", 
+              :style="{'background-color': 'var(--bg-light-grey)'}") {{ dataValue?.result || `${dataValue.value} ${data.config[key].shadowText}` }}
+            .flex.items-center.justify-center.rounded.w-8.h-full(
+              v-if="data.config[key].colorWarning(dataValue?.result || dataValue.value)", 
+              :style="{'background-color': data.config[key].colorWarning(dataValue.result || dataValue.value), 'color': 'white'}")
+              q-icon(size="20px" name="warning_amber")
+  </template>
+
+<script>
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseInputNumber from "@/components/base/BaseInputNumber.vue";
+import { thermometryResultsMap } from "@/pages/newMedicalCard/utils/medicalConfig";
+import { mapState } from "vuex";
+
+export default {
+  name: "ThermometryForm",
+  components: { MedicalFormWrapper, BaseInput, BaseInputNumber },
+  props: {
+    data: Object,
+  },
+  data() {
+    return {
+      isEdit: false,
+      thermometryMap: thermometryResultsMap,
+    };
+  },
+  computed: {
+    ...mapState({
+      protocol: (state) => state.medical.protocolData,
+    }),
+  },
+  methods: {
+    openEdit() {
+      this.isEdit = true;
+    },
+    cancelEdit() {
+      this.isEdit = false;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.thermometry-wrapper
+  grid-template-columns: repeat(2, 1fr),
+  grid-template-rows: 1fr
+  @media(max-width: 1176px)
+    grid-template-columns: 1fr
+    grid-template-rows: repeat(2, 1fr)
+.results-wrapper
+  border: 1px solid var(--border-light-grey-color)
+.alert-icon
+  background-color: var(--bg-light-grey)
+  color: var(--font-grey-color)
+.result
+  border-bottom: 1px solid var(--bg-light-grey)
+  &:last-child
+    border: none
+.label
+  color: var(--font-grey-color)
+</style>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ThermometryForm.vue

@@ -1,104 +0,0 @@
-<template lang="pug">
-  medical-form-wrapper(:title="data.title", :is-edit="isEdit", :open-edit="openEdit", :cancel="cancelEdit")
-    .thermometry-wrapper.grid.gap-x-20.gap-y-5
-      .flex.flex-col.gap-y-4.items-start(v-if="isEdit" v-for="(thermometry, key) in protocol[data.key]")
-        span.font-semibold.text-smm {{ data.config.temperature[key].title }}
-        base-input-number.w-full(
-          v-model="thermometry.temperature",
-          :step="1",
-          :min="1",
-          :max="100",
-          reverse-value
-          label="Температура",
-          outlined,
-          shadow-text="º"
-          placeholder="0º"
-          )
-        .flex.flex-col.gap-y-2.w-full
-          base-input.w-full(
-            v-model="thermometry.result",
-            label="Результат"
-            outlined
-            text-color="black"
-            placeholder="Введите диагноз..."
-          )
-          .results-wrapper.flex.flex-col.rounded.w-full.px-4.py-2
-            .result.flex.w-full.justify-between.items-center.h-9(v-for="result in data.config.results")
-              .flex.gap-x-4
-                q-radio(
-                  v-model="thermometry.result"
-                  :val="result.value"
-                  :label="result.value"
-                  size="40px"
-                  dense
-                  checked-icon="check_box"
-                  unchecked-icon="check_box_outline_blank"
-                  )
-              .alert-icon.flex.justify-center.items-center.rounded.w-6.h-6(v-if="result.colorWarning")
-                q-icon(size="13px" name="warning_amber")
-      .flex.flex-col.gap-y-2.items-start(v-else)
-        .flex.gap-x-1.h-8(v-for="(thermometry, key) in protocol[data.key]")
-          .flex.h-full.w-20.justify-center.items-center.gap-x-1.rounded(
-            :style="{'background-color': data.config.temperature[key].bg, 'color': data.config.temperature[key].color}"
-            )
-            q-icon(size="18px", :name="data.config.temperature[key].icon")
-            span.text-smm.font-medium {{ `${thermometry.temperature}º` }}
-          .flex.items-center.h-full.px-3.font-medium.text-smm.rounded(
-            v-if="thermometry.result", 
-            :style="{'background-color': 'var(--bg-light-grey)'}") {{ thermometry.result }}
-          .flex.items-center.justify-center.rounded.w-8.h-full(
-            v-if="data.config.results.find((el) => el.value === thermometry.result)?.colorWarning", 
-            :style="{'background-color': data.config.results.find((el) => el.value === thermometry.result).colorWarning, 'color': 'white'}")
-            q-icon(size="20px" name="warning_amber")
-</template>
-
-<script>
-import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
-import BaseInputNumber from "@/components/base/BaseInputNumber.vue";
-import { mapState } from "vuex";
-
-export default {
-  name: "ThermometryForm",
-  components: { MedicalFormWrapper, BaseInput, BaseInputNumber },
-  props: {
-    data: Object,
-  },
-  data() {
-    return {
-      isEdit: false,
-    };
-  },
-  computed: {
-    ...mapState({
-      protocol: (state) => state.medical.protocolData,
-    }),
-  },
-  methods: {
-    openEdit() {
-      this.isEdit = true;
-    },
-    cancelEdit() {
-      this.isEdit = false;
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.thermometry-wrapper
-  grid-template-columns: repeat(2, 1fr),
-  grid-template-rows: 1fr
-  @media(max-width: 1176px)
-    grid-template-columns: 1fr
-    grid-template-rows: repeat(2, 1fr)
-.results-wrapper
-  border: 1px solid var(--border-light-grey-color)
-.alert-icon
-  background-color: var(--bg-light-grey)
-  color: var(--font-grey-color)
-.result
-  border-bottom: 1px solid var(--bg-light-grey)
-  &:last-child
-    border: none
-</style>

src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue

@@ -46,7 +46,7 @@ import MedicalFormTag from "@/pages/newMedicalCard/components/InitialInspectionP
 import DataForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
 import IndexForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue";
-import ThermometryForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ThermometryForm.vue";
+import MainFactorsForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MainFactorsForm.vue";
 import { protocolForms } from "@/pages/newMedicalCard/utils/medicalConfig.js";
 
 export default {
@@ -56,7 +56,7 @@ export default {
     DataForm,
     BaseButton,
     IndexForm,
-    ThermometryForm,
+    MainFactorsForm,
   },
   props: { inspection: Boolean, fillInspection: Boolean },
   data() {

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -673,45 +673,98 @@ export const protocolForms = [
   },
   {
     title: "Термометрия (по показаниям)",
-    component: "ThermometryForm",
+    component: "MainFactorsForm",
     key: "thermometry",
     state: "thermometry",
     config: {
-      temperature: {
+      cold: {
-        cold: {
+        step: 1,
-          title: "Реакция на холод",
+        title: "Реакция на холод",
-          color: "var(--font-cold-color)",
+        label: "Температура",
-          bg: "var(--bg-cold-color)",
+        shadowText: "º",
-          icon: "ac_unit",
+        max: 100,
-        },
+        min: 1,
-        heat: {
+        color: "var(--font-cold-color)",
-          title: "Реакция на тепло",
+        bg: "var(--bg-cold-color)",
-          color: "var(--font-heat-color)",
+        icon: "ac_unit",
-          bg: "var(--bg-heat-color)",
+        colorWarning: (val) =>
-          icon: "local_fire_department",
+          thermometryResultsMap.find((el) => el.value === val)?.colorWarning,
+      },
+      heat: {
+        step: 1,
+        title: "Реакция на тепло",
+        label: "Температура",
+        shadowText: "º",
+        max: 100,
+        min: 1,
+        color: "var(--font-heat-color)",
+        bg: "var(--bg-heat-color)",
+        icon: "local_fire_department",
+        colorWarning: (val) =>
+          thermometryResultsMap.find((el) => el.value === val)?.colorWarning,
+      },
+    },
+  },
+  {
+    title: "Тонометрия, ЧСС (по показаниям)",
+    component: "MainFactorsForm",
+    key: "tonometry",
+    state: "tonometry",
+    config: {
+      pulse: {
+        step: 1,
+        label: "Пульс",
+        shadowText: "уд/мин",
+        max: 140,
+        min: 30,
+        colorWarning: (val) => {
+          if (!val) return val;
+          if (val >= 80 && val < 110) {
+            return "var(--bg-yellow-warning)";
+          }
+          if ((0 <= val && val <= 60) || val >= 110) {
+            return "var(--border-red-color)";
+          }
         },
       },
-      results: [
+      pressure: {
-        {
+        step: 1,
-          value: "Нет реакции",
+        label: "Артериальное давление",
-          colorWarning: "var(--border-red-color)",
+        shadowText: "мм.рт.ст.",
+        max: 180,
+        min: 40,
+        colorWarning: (val) => {
+          if (!val) return val;
+          if ((val >= 130 && val < 140) || (val >= 100 && val < 110)) {
+            return "var(--bg-yellow-warning)";
+          }
+          if (val >= 140 || val < 100) {
+            return "var(--border-red-color)";
+          }
         },
-        {
+      },
-          value: "Слабая реакция",
-          colorWarning: "var(--bg-yellow-warning)",
-        },
-        {
-          value: "Реакция нормальная",
-        },
-        {
-          value: "Повышенная чувствительность",
-          colorWarning: "var(--bg-yellow-warning)",
-        },
-        {
-          value: "Непереносимость",
-          colorWarning: "var(--border-red-color)",
-        },
-      ],
     },
   },
 ];
+
+export const thermometryResultsMap = [
+  {
+    value: "Нет реакции",
+    colorWarning: "var(--border-red-color)",
+  },
+  {
+    value: "Слабая реакция",
+    colorWarning: "var(--bg-yellow-warning)",
+  },
+  {
+    value: "Реакция нормальная",
+  },
+  {
+    value: "Повышенная чувствительность",
+    colorWarning: "var(--bg-yellow-warning)",
+  },
+  {
+    value: "Непереносимость",
+    colorWarning: "var(--border-red-color)",
+  },
+];

src/store/modules/medicalCard.js

@@ -132,14 +132,22 @@ const state = () => ({
     KPUIndex: 6.1,
     thermometry: {
       cold: {
-        temperature: 22,
+        value: 22,
-        result: "Нет реакции",
+        result: "Реакция нормальная",
       },
       heat: {
-        temperature: 50,
+        value: 50,
         result: "Повышенная чувствительность",
       },
     },
+    tonometry: {
+      pulse: {
+        value: 84,
+      },
+      pressure: {
+        value: 120,
+      },
+    },
   },
 });