Merge branch 'ASTRA-110' into 'master'

[WIP] Добавил отображение искусственного зуба

See merge request andrusyakka/urban-couscous!414

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue

@@ -1,6 +1,21 @@
 <template lang="pug">
   .flex.p-1
     .wrapper-tooth.flex.h-250px.w-28.flex-col.rounded.justify-around.items-center
+      detailed-tooth-svg(
+        part-tooth="general",
+        :tooth-config="cellConfig",
+        jaw-position="upper",
+        :view="data.general === 'ИЗ' ? 'artificial': 'native'",
+        editable
+        )
+      .flex.items-center.justify-center(
+        :style="{'width': '35px', 'height': '35px'}"
+        )
+        detailed-tooth-svg(
+          part-tooth="crown",
+          :view="data.general === 'ИЗ' ? 'artificial': 'native'",
+          editable
+          )
       span.text-base.font-medium {{cellConfig.tooth_number}}
     .flex.flex-col.pt-2.pl-4.pr-1.gap-y-2.w-350px.h-250px
       span.font-bold.text-m Состояние зуба
@@ -65,9 +80,11 @@
 <script>
 import { getFilledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
 import { toothConditions } from "@/pages/newMedicalCard/utils/medicalConfig";
+import DetailedToothSvg from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DetailedToothSvg.vue";
 
 export default {
   name: "DentalConditionForm",
+  components: { DetailedToothSvg },
   data() {
     return {
       isOpenInfoSelected: false,

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DetailedToothSvg.vue

@@ -1,66 +1,114 @@
 <template lang="pug">
-  svg(
+  svg.flex.items-center(
     v-if="partTooth === 'crown'",
-    width="41",
+    :width="getSizeSvg.width",
-    height="40",
+    :height="getSizeSvg.height",
-    viewBox="0 0 41 40",
+    :viewBox="getSizeSvg.viewBox",
     fill="none",
     xmlns="http://www.w3.org/2000/svg"
   )
     g(clip-path="url(#clip0_4088_279519)")
+      g(v-if="view === 'artificial'")
+        path(
+          d="M16.7175 16.7175C15.8354 17.5997 14.7881 18.2994 13.6355 18.7769C12.4829 19.2543 11.2476 19.5 10 19.5C8.75244 19.5 7.5171 19.2543 6.36451 18.7769L6.17316 19.2388L6.36451 18.7769C5.21191 18.2994 4.16464 17.5997 3.28249 16.7175C2.40033 15.8354 1.70056 14.7881 1.22314 13.6355C0.745725 12.4829 0.5 11.2476 0.5 10C0.5 8.75244 0.745725 7.5171 1.22314 6.36451C1.70056 5.21191 2.40033 4.16464 3.28249 3.28249C4.16464 2.40033 5.21192 1.70056 6.36451 1.22314C7.5171 0.745725 8.75244 0.5 10 0.5C11.2476 0.5 12.4829 0.745725 13.6355 1.22314C14.7881 1.70056 15.8354 2.40033 16.7175 3.28249C17.5997 4.16464 18.2994 5.21191 18.7769 6.36451C19.2543 7.5171 19.5 8.75244 19.5 10C19.5 11.2476 19.2543 12.4829 18.7769 13.6355C18.2994 14.7881 17.5997 15.8354 16.7175 16.7175Z",
+          stroke="#252850"
+          )
+        circle(
+          cx="10",
+          cy="10",
+          r="7.5",
+          fill="#D3D4DC"
+          )
+      g(v-else)
         g
           path(
             d="M26.1322 26.1118C22.6171 29.624 16.918 29.624 13.4029 26.1118M13.3926 26.1015C9.89147 22.5922 9.89126 16.9137 13.392 13.4041M13.4029 13.3932C16.918 9.88102 22.6171 9.88102 26.1322 13.3932M26.1431 13.4041C29.6439 16.9137 29.6437 22.5922 26.1425 26.1015M25.7788 25.7581C22.459 29.0752 17.0762 29.0752 13.7563 25.7581C10.4367 22.4413 10.4367 17.0637 13.7563 13.7469C17.0762 10.4298 22.459 10.4298 25.7788 13.7469C29.0985 17.0637 29.0985 22.4413 25.7788 25.7581ZM7.75075 32.4661L13.4121 26.8095C17.0188 30.0581 22.5164 30.0581 26.1231 26.8095L31.7844 32.4661C30.2369 33.9263 28.4346 35.0932 26.4654 35.9082C24.342 36.787 22.066 37.2394 19.7676 37.2394C17.4691 37.2394 15.1932 36.787 13.0697 35.9082C11.1006 35.0932 9.2983 33.9263 7.75075 32.4661ZM32.4919 31.7593L26.8305 26.1027C30.0813 22.4989 30.0813 17.0061 26.8305 13.4023L32.4919 7.74571C33.9536 9.29209 35.1216 11.093 35.9374 13.0607C36.8169 15.1823 37.2696 17.4561 37.2696 19.7525C37.2696 22.0488 36.8169 24.3227 35.9374 26.4443C35.1216 28.412 33.9536 30.2129 32.4919 31.7593ZM26.1231 12.6955C22.5164 9.44691 17.0188 9.44691 13.4121 12.6955L7.75075 7.03892C9.2983 5.57869 11.1006 4.41176 13.0697 3.59679C15.1932 2.71796 17.4691 2.26562 19.7676 2.26562C22.066 2.26563 24.342 2.71796 26.4654 3.59679C28.4346 4.41176 30.2369 5.57869 31.7844 7.03892L26.1231 12.6955ZM12.7047 26.1027L7.04333 31.7593C5.58161 30.2129 4.41354 28.412 3.59783 26.4443C2.71831 24.3227 2.26562 22.0488 2.26562 19.7525C2.26562 17.4561 2.7183 15.1823 3.59783 13.0607C4.41354 11.093 5.58161 9.29209 7.04333 7.74571L12.7047 13.4023C9.45391 17.0061 9.45391 22.4989 12.7047 26.1027Z",
             stroke="#252850"
           )
           path(
-          :class="{'edit-part': isEdit}",
+            :class="{'edit-part': editable}",
             d="M29.5234 31.7754C29.802 32.0662 29.7555 32.5373 29.4182 32.7575C26.5287 34.6441 23.1246 36.0162 19.6995 35.9394C16.2673 35.8624 12.8886 34.7337 10.0788 32.7673C9.75567 32.5412 9.72375 32.0808 10.0001 31.7996L13.1122 28.6337C13.3445 28.3973 13.7156 28.3737 13.9901 28.5594C15.7771 29.7687 17.5777 30.0976 19.8296 30.1481C22.0882 30.1988 23.8151 29.7034 25.6461 28.5283C25.9184 28.3536 26.2784 28.3877 26.5021 28.6212L29.5234 31.7754Z",
             fill="#D3D4DC"
           )
           path(
-          :class="{'edit-part': isEdit}",
+            :class="{'edit-part': editable}",
             d="M10.02 7.83259C9.73773 7.54247 9.78271 7.06817 10.1218 6.84692C13.0102 4.96209 16.4123 3.59159 19.8354 3.66837C23.2653 3.74529 26.6418 4.87262 29.4506 6.83662C29.7757 7.06395 29.8058 7.52786 29.5252 7.80822L26.2828 11.048C26.0499 11.2806 25.6816 11.3026 25.4106 11.1157C23.6415 9.89566 21.9585 9.51017 19.7053 9.45964C17.4456 9.40896 15.8222 9.95753 14.0063 11.1421C13.737 11.3177 13.3792 11.2851 13.155 11.0547L10.02 7.83259Z",
             fill="#D3D4DC"
           )
           path(
-          :class="{'edit-part': isEdit}",
+            :class="{'edit-part': editable}",
             d="M31.759 10.0672C32.0484 9.7804 32.5272 9.82331 32.75 10.1644C34.6342 13.049 36.0037 16.4456 35.9269 19.8633C35.8499 23.2903 34.7217 26.6639 32.756 29.4704C32.5285 29.7952 32.0642 29.8253 31.7836 29.5449L28.5411 26.3052C28.3083 26.0725 28.2862 25.7045 28.4733 25.4337C29.6944 23.6662 30.0802 21.9845 30.1308 19.7333C30.1815 17.4738 29.6311 15.9223 28.4438 14.1173C28.2686 13.8509 28.2992 13.4965 28.5257 13.2719L31.759 10.0672Z",
             fill="#D3D4DC"
           )
           path(
-          :class="{'edit-part': isEdit}",
+            :class="{'edit-part': editable}",
             d="M7.84119 10.0499C7.55039 9.77014 7.07763 9.81602 6.85683 10.1537C4.96938 13.0404 3.59672 16.4408 3.67359 19.8623C3.75057 23.2893 4.87885 26.663 6.8445 29.4694C7.07202 29.7943 7.53632 29.8243 7.81691 29.544L11.0594 26.3042C11.2922 26.0716 11.3143 25.7036 11.1272 25.4328C9.90611 23.6652 9.52029 21.9836 9.46972 19.7323C9.41901 17.4751 9.92564 15.7802 11.1039 13.9551C11.2789 13.684 11.2454 13.3252 11.0129 13.1015L7.84119 10.0499Z",
             fill="#D3D4DC"
           )
         g
           ellipse(
-          :class="{'edit-part': isEdit}",
+            :class="{'edit-part': editable}",
             cx="19.7675",
             cy="19.7948",
             rx="7.0722",
             ry="7.06627",
             fill="#D3D4DC"
           )
-    g
-      defs
-        clipPath(id="clip0_4088_279519")
-         rect(
-          width="40",
-          height="40",
-          fill="white",
-          transform="translate(0.25)"
-          )
   svg(
     v-if="partTooth === 'general'",
-    :class="{'rotate-180': jawPosition === 'upper' }",
+    :class="{'rotate-180': rotateSvg}",
-    :width="size[toothConfig.type].width",
+    :width="getSizeSvg.width",
-    :height="size[toothConfig.type].height",
+    :height="getSizeSvg.height",
-    :viewBox="size[toothConfig.type].viewBox",
+    :viewBox="getSizeSvg.viewBox",
     fill="none",
     xmlns="http://www.w3.org/2000/svg"
     )
     g(v-if="toothConfig.type === 'molars'")
+      g(v-if="view === 'artificial'")
+        path(
+          d="M14.5 12.8096L29.5 15.178V13.1904L14.5 10.822V12.8096Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M21.735 3.75569C21.8971 3.65435 22.1029 3.65435 22.265 3.75569L28.2566 7.50044H15.7434L21.735 3.75569Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M14.5 8.50044H29.5V12.178L14.5 9.80959V8.50044Z",
+          fill="#D3D4DC"
+          )
+        path(
+          fill-rule="evenodd",
+          clip-rule="evenodd",
+          d="M13.5 9.5H12.5C12.239 9.5 12.022 9.70072 12.0016 9.96089C11.9811 10.2211 12.1643 10.4532 12.422 10.4939L13.5 10.6641V12.5H12.5C12.239 12.5 12.022 12.7007 12.0016 12.9609C11.9811 13.2211 12.1643 13.4532 12.422 13.4939L13.5 13.6641V15.5H12.5C12.239 15.5 12.022 15.7007 12.0016 15.9609C11.9811 16.2211 12.1643 16.4532 12.422 16.4939L13.5 16.6641V18.5H12.5C12.239 18.5 12.022 18.7007 12.0016 18.9609C11.9811 19.2211 12.1643 19.4532 12.422 19.4939L13.5 19.6641V21.5H12.5C12.239 21.5 12.022 21.7007 12.0016 21.9609C11.9811 22.2211 12.1643 22.4532 12.422 22.4939L13.5 22.6641V24.5H12.5C12.239 24.5 12.022 24.7007 12.0016 24.9609C11.9811 25.2211 12.1643 25.4532 12.422 25.4939L13.5 25.6641V37.0004C13.5 37.8289 14.1716 38.5004 15 38.5004H29C29.8284 38.5004 30.5 37.8289 30.5 37.0004V28.5H31.5C31.761 28.5 31.9781 28.2993 31.9985 28.0391C32.0189 27.7789 31.8358 27.5468 31.578 27.5061L30.5 27.3359V25.5H31.5C31.761 25.5 31.9781 25.2993 31.9985 25.0391C32.0189 24.7789 31.8358 24.5468 31.578 24.5061L30.5 24.3359V22.5H31.5C31.761 22.5 31.9781 22.2993 31.9985 22.0391C32.0189 21.7789 31.8358 21.5468 31.578 21.5061L30.5 21.3359V19.5H31.5C31.761 19.5 31.9781 19.2993 31.9985 19.0391C32.0189 18.7789 31.8358 18.5468 31.578 18.5061L30.5 18.3359V16.5H31.5C31.761 16.5 31.9781 16.2993 31.9985 16.0391C32.0189 15.7789 31.8358 15.5468 31.578 15.5061L30.5 15.3359V13.5H31.5C31.761 13.5 31.9781 13.2993 31.9985 13.0391C32.0189 12.7789 31.8358 12.5468 31.578 12.5061L30.5 12.3359V7.72332L22.795 2.90769C22.3086 2.60369 21.6914 2.60369 21.205 2.90769L13.5 7.72332V9.5ZM22.265 3.75569C22.1029 3.65435 21.8971 3.65435 21.735 3.75569L15.7434 7.50044H28.2566L22.265 3.75569ZM29.5 8.50044H14.5V9.80959L29.5 12.178V8.50044ZM14.5 37.0004V25.822L29.5 28.1904V37.0004C29.5 37.2766 29.2761 37.5004 29 37.5004H15C14.7239 37.5004 14.5 37.2766 14.5 37.0004ZM29.5 27.178L14.5 24.8096V22.822L29.5 25.1904V27.178ZM29.5 22.1904V24.178L14.5 21.8096V19.822L29.5 22.1904ZM29.5 21.178L14.5 18.8096V16.822L29.5 19.1904V21.178ZM29.5 16.1904V18.178L14.5 15.8096V13.822L29.5 16.1904ZM29.5 15.178L14.5 12.8096V10.822L29.5 13.1904V15.178Z",
+          fill="#252850"
+          )
+        path(
+          d="M29.5 18.178V16.1904L14.5 13.822V15.8096L29.5 18.178Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M14.5 18.8096L29.5 21.178V19.1904L14.5 16.822V18.8096Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M29.5 24.178V22.1904L14.5 19.822V21.8096L29.5 24.178Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M14.5 24.8096L29.5 27.178V25.1904L14.5 22.822V24.8096Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M14.5 25.822V37.0004C14.5 37.2766 14.7239 37.5004 15 37.5004H29C29.2761 37.5004 29.5 37.2766 29.5 37.0004V28.1904L14.5 25.822Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M22.0714 54.7484L21.6827 54.268L21.2941 54.7484C19.5099 56.9533 16.7835 58.3617 13.7278 58.3617C8.35529 58.3617 4 54.0063 4 48.6337V45.4516C4 43.1632 5.82085 40.964 9.05365 39.3072C12.26 37.6639 16.7242 36.6328 21.6827 36.6328C26.6412 36.6328 31.1055 37.6639 34.3118 39.3072C37.5446 40.964 39.3655 43.1632 39.3655 45.4516V48.6337C39.3655 54.0063 35.0102 58.3617 29.6377 58.3617C26.582 58.3617 23.8556 56.9533 22.0714 54.7484Z",
+          fill="#D3D4DC",
+          stroke="#252850"
+          )
+      g(v-else)
         path(
           d="M36.2801 11.7305C36.7934 24.8374 35.8401 55.1414 32.5406 55.1426C27.5631 55.1444 30.5612 27.6442 25.5018 27.6424C20.3477 27.6406 22.4222 41.5053 18.6826 41.5053C14.9431 41.5053 17.0173 27.6372 11.8632 27.6389C6.80382 27.6407 9.80148 55.1426 4.82406 55.1408C1.5246 55.1396 0.571265 24.8384 1.08438 11.7305H18.6822H36.2801Z",
           fill="white"
@@ -76,33 +124,78 @@
           stroke="#252850"
           )
         path(
-        :class="{'edit-part': isEdit}",
+          :class="{'edit-part': editable}",
           d="M34.5713 13.3113C34.5713 17.2416 27.0496 20.4277 18.8213 20.4277C10.593 20.4277 3.07129 17.2416 3.07129 13.3113V10.8813C3.07129 6.56757 6.95639 3.07059 11.5848 3.07059C14.2175 3.07059 17.2849 5.80103 18.8213 7.57059C20.3577 5.80103 23.4251 3.07059 26.0578 3.07059C30.6862 3.07059 34.5713 6.56757 34.5713 10.8813V13.3113Z",
           fill="#D3D4DC"
           )
         path(
-        :class="{'edit-part': isEdit}",
+          :class="{'edit-part': editable}",
           d="M4.81804 51.5043C3.25298 49.9392 3.08382 32.4872 3.07204 22.6833C3.07152 22.2535 3.68699 22.002 4.03135 22.2593C4.96781 22.9589 6.28013 23.7063 7.28315 24.161C7.45558 24.2392 7.56669 24.4067 7.55941 24.5959C7.17711 34.5275 6.43755 53.1238 4.81804 51.5043Z",
           fill="#D3D4DC"
           )
         path(
-        :class="{'edit-part': isEdit}",
+          :class="{'edit-part': editable}",
           d="M32.3199 51.5043C33.8853 49.9389 34.5356 31.7491 34.5891 21.8825C34.5915 21.4526 34.0164 21.2387 33.7092 21.5394C32.7619 22.4667 31.3903 23.6221 30.3561 24.1534C30.1877 24.2399 30.0761 24.4067 30.0831 24.5959C30.4552 34.5275 30.7004 53.1238 32.3199 51.5043Z",
           fill="#D3D4DC"
           )
         path(
-        :class="{'edit-part': isEdit}",
+          :class="{'edit-part': editable}",
           d="M16.669 25.9951C17.4383 32.3528 16.9336 38.7773 18.6832 38.7773C20.4366 38.7773 20.1845 32.3251 20.9795 25.9541C21.0207 25.6243 20.7074 25.3586 20.3838 25.4346C18.9844 25.7636 18.0072 25.6611 17.2903 25.4763C16.9589 25.3908 16.6278 25.6553 16.669 25.9951Z",
           fill="#D3D4DC"
           )
     g(v-if="toothConfig.type === 'pre-molars' || toothConfig.type === 'fangs'")
+      g(v-if="view === 'artificial'")
+        path(
+          d="M14.5 12.8096L29.5 15.178V13.1904L14.5 10.822V12.8096Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M21.735 3.75569C21.8971 3.65435 22.1029 3.65435 22.265 3.75569L28.2566 7.50044H15.7434L21.735 3.75569Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M14.5 8.50044H29.5V12.178L14.5 9.80959V8.50044Z",
+          fill="#D3D4DC"
+          )
+        path(
+          fill-rule="evenodd",
+          clip-rule="evenodd",
+          d="M13.5 9.5H12.5C12.239 9.5 12.022 9.70072 12.0016 9.96089C11.9811 10.2211 12.1643 10.4532 12.422 10.4939L13.5 10.6641V12.5H12.5C12.239 12.5 12.022 12.7007 12.0016 12.9609C11.9811 13.2211 12.1643 13.4532 12.422 13.4939L13.5 13.6641V15.5H12.5C12.239 15.5 12.022 15.7007 12.0016 15.9609C11.9811 16.2211 12.1643 16.4532 12.422 16.4939L13.5 16.6641V18.5H12.5C12.239 18.5 12.022 18.7007 12.0016 18.9609C11.9811 19.2211 12.1643 19.4532 12.422 19.4939L13.5 19.6641V21.5H12.5C12.239 21.5 12.022 21.7007 12.0016 21.9609C11.9811 22.2211 12.1643 22.4532 12.422 22.4939L13.5 22.6641V24.5H12.5C12.239 24.5 12.022 24.7007 12.0016 24.9609C11.9811 25.2211 12.1643 25.4532 12.422 25.4939L13.5 25.6641V37.0004C13.5 37.8289 14.1716 38.5004 15 38.5004H29C29.8284 38.5004 30.5 37.8289 30.5 37.0004V28.5H31.5C31.761 28.5 31.9781 28.2993 31.9985 28.0391C32.0189 27.7789 31.8358 27.5468 31.578 27.5061L30.5 27.3359V25.5H31.5C31.761 25.5 31.9781 25.2993 31.9985 25.0391C32.0189 24.7789 31.8358 24.5468 31.578 24.5061L30.5 24.3359V22.5H31.5C31.761 22.5 31.9781 22.2993 31.9985 22.0391C32.0189 21.7789 31.8358 21.5468 31.578 21.5061L30.5 21.3359V19.5H31.5C31.761 19.5 31.9781 19.2993 31.9985 19.0391C32.0189 18.7789 31.8358 18.5468 31.578 18.5061L30.5 18.3359V16.5H31.5C31.761 16.5 31.9781 16.2993 31.9985 16.0391C32.0189 15.7789 31.8358 15.5468 31.578 15.5061L30.5 15.3359V13.5H31.5C31.761 13.5 31.9781 13.2993 31.9985 13.0391C32.0189 12.7789 31.8358 12.5468 31.578 12.5061L30.5 12.3359V7.72332L22.795 2.90769C22.3086 2.60369 21.6914 2.60369 21.205 2.90769L13.5 7.72332V9.5ZM22.265 3.75569C22.1029 3.65435 21.8971 3.65435 21.735 3.75569L15.7434 7.50044H28.2566L22.265 3.75569ZM29.5 8.50044H14.5V9.80959L29.5 12.178V8.50044ZM14.5 37.0004V25.822L29.5 28.1904V37.0004C29.5 37.2766 29.2761 37.5004 29 37.5004H15C14.7239 37.5004 14.5 37.2766 14.5 37.0004ZM29.5 27.178L14.5 24.8096V22.822L29.5 25.1904V27.178ZM29.5 22.1904V24.178L14.5 21.8096V19.822L29.5 22.1904ZM29.5 21.178L14.5 18.8096V16.822L29.5 19.1904V21.178ZM29.5 16.1904V18.178L14.5 15.8096V13.822L29.5 16.1904ZM29.5 15.178L14.5 12.8096V10.822L29.5 13.1904V15.178Z",
+          fill="#252850"
+          )
+        path(
+          d="M29.5 18.178V16.1904L14.5 13.822V15.8096L29.5 18.178Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M14.5 18.8096L29.5 21.178V19.1904L14.5 16.822V18.8096Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M29.5 24.178V22.1904L14.5 19.822V21.8096L29.5 24.178Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M14.5 24.8096L29.5 27.178V25.1904L14.5 22.822V24.8096Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M14.5 25.822V37.0004C14.5 37.2766 14.7239 37.5004 15 37.5004H29C29.2761 37.5004 29.5 37.2766 29.5 37.0004V28.1904L14.5 25.822Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M39.625 41.6719C39.625 43.3156 38.9524 45.2796 37.7882 47.3289C36.6289 49.3695 35.0063 51.4523 33.1651 53.323C31.3239 55.1938 29.2763 56.8401 27.2749 58.0154C25.264 59.1962 23.3451 59.875 21.75 59.875C20.1549 59.875 18.236 59.1962 16.2251 58.0154C14.2237 56.8401 12.1761 55.1938 10.3349 53.323C8.49369 51.4523 6.87111 49.3695 5.71184 47.3289C4.54763 45.2796 3.875 43.3156 3.875 41.6719C3.875 38.3586 5.79677 35.5467 9.02112 33.5398C12.2498 31.5302 16.7467 30.3594 21.75 30.3594C26.7533 30.3594 31.2502 31.5302 34.4789 33.5398C37.7032 35.5467 39.625 38.3586 39.625 41.6719Z",
+          fill="#D3D4DC",
+          stroke="#252850"
+          )
+      g(v-else)
         path(
           d="M36.6163 19.8282C36.5326 22.3195 35.8468 25.8084 34.7419 29.7043C33.564 33.8575 31.9208 38.4352 30.0632 42.6914C28.2041 46.9511 26.1384 50.8698 24.1203 53.715C23.1104 55.1386 22.125 56.2756 21.1971 57.0517C20.2606 57.8351 19.4397 58.2032 18.75 58.2032C18.0603 58.2032 17.2394 57.8351 16.3029 57.0517C15.375 56.2756 14.3896 55.1386 13.3797 53.715C11.3616 50.8698 9.29587 46.9511 7.43677 42.6914C5.57916 38.4352 3.93603 33.8575 2.75813 29.7043C1.65321 25.8084 0.967415 22.3195 0.883675 19.8282L1.81897 19.8282L5.75689 19.8284L18.75 19.8286L31.7431 19.8284L35.681 19.8282L36.6163 19.8282Z",
           fill="white",
           stroke="#252850"
           )
         path(
-        :class="{'edit-part': isEdit}",
+          :class="{'edit-part': editable}",
           d="M27.6106 31.75C27.9904 31.5726 28.5857 31.8793 28.5671 32.298C28.193 40.7601 23.9204 54.7656 18.75 54.7656C13.5545 54.7656 8.9633 40.6236 8.60111 32.175C8.58393 31.7742 9.10691 31.4947 9.47075 31.6638C10.7255 32.2471 13.473 33.1093 18.75 33.1093C23.7725 33.1093 26.3734 32.3282 27.6106 31.75Z",
           fill="#D3D4DC"
           )
@@ -112,11 +205,56 @@
           stroke="#252850"
           )
         path(
-        :class="{'edit-part': isEdit}",
+          :class="{'edit-part': editable}",
           d="M33.8438 18.8624C33.8438 13.0868 24.4102 3.57812 18.75 3.57812C13.0898 3.57812 3.65625 13.0868 3.65625 18.8624C3.65625 24.638 10.414 28.5156 18.75 28.5156C27.086 28.5156 33.8438 24.638 33.8438 18.8624Z",
           fill="#D3D4DC"
           )
     g(v-if="toothConfig.type === 'incisors'")
+      g(v-if="view === 'artificial'")
+        path(
+          d="M13.5 12.8096L28.5 15.178V13.1904L13.5 10.822V12.8096Z", 
+          fill="#D3D4DC"
+          )
+        path(
+          d="M20.735 3.75569C20.8971 3.65435 21.1029 3.65435 21.265 3.75569L27.2566 7.50044H14.7434L20.735 3.75569Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M13.5 8.50044H28.5V12.178L13.5 9.80959V8.50044Z",
+          fill="#D3D4DC"
+          )
+        path(
+          fill-rule="evenodd",
+          clip-rule="evenodd",
+          d="M12.5 9.5H11.5C11.239 9.5 11.022 9.70072 11.0016 9.96089C10.9811 10.2211 11.1643 10.4532 11.422 10.4939L12.5 10.6641V12.5H11.5C11.239 12.5 11.022 12.7007 11.0016 12.9609C10.9811 13.2211 11.1643 13.4532 11.422 13.4939L12.5 13.6641V15.5H11.5C11.239 15.5 11.022 15.7007 11.0016 15.9609C10.9811 16.2211 11.1643 16.4532 11.422 16.4939L12.5 16.6641V18.5H11.5C11.239 18.5 11.022 18.7007 11.0016 18.9609C10.9811 19.2211 11.1643 19.4532 11.422 19.4939L12.5 19.6641V21.5H11.5C11.239 21.5 11.022 21.7007 11.0016 21.9609C10.9811 22.2211 11.1643 22.4532 11.422 22.4939L12.5 22.6641V24.5H11.5C11.239 24.5 11.022 24.7007 11.0016 24.9609C10.9811 25.2211 11.1643 25.4532 11.422 25.4939L12.5 25.6641V37.0004C12.5 37.8289 13.1716 38.5004 14 38.5004H28C28.8284 38.5004 29.5 37.8289 29.5 37.0004V28.5H30.5C30.761 28.5 30.9781 28.2993 30.9985 28.0391C31.0189 27.7789 30.8358 27.5468 30.578 27.5061L29.5 27.3359V25.5H30.5C30.761 25.5 30.9781 25.2993 30.9985 25.0391C31.0189 24.7789 30.8358 24.5468 30.578 24.5061L29.5 24.3359V22.5H30.5C30.761 22.5 30.9781 22.2993 30.9985 22.0391C31.0189 21.7789 30.8358 21.5468 30.578 21.5061L29.5 21.3359V19.5H30.5C30.761 19.5 30.9781 19.2993 30.9985 19.0391C31.0189 18.7789 30.8358 18.5468 30.578 18.5061L29.5 18.3359V16.5H30.5C30.761 16.5 30.9781 16.2993 30.9985 16.0391C31.0189 15.7789 30.8358 15.5468 30.578 15.5061L29.5 15.3359V13.5H30.5C30.761 13.5 30.9781 13.2993 30.9985 13.0391C31.0189 12.7789 30.8358 12.5468 30.578 12.5061L29.5 12.3359V7.72332L21.795 2.90769C21.3086 2.60369 20.6914 2.60369 20.205 2.90769L12.5 7.72332V9.5ZM21.265 3.75569C21.1029 3.65435 20.8971 3.65435 20.735 3.75569L14.7434 7.50044H27.2566L21.265 3.75569ZM28.5 8.50044H13.5V9.80959L28.5 12.178V8.50044ZM13.5 37.0004V25.822L28.5 28.1904V37.0004C28.5 37.2766 28.2761 37.5004 28 37.5004H14C13.7239 37.5004 13.5 37.2766 13.5 37.0004ZM28.5 27.178L13.5 24.8096V22.822L28.5 25.1904V27.178ZM28.5 22.1904V24.178L13.5 21.8096V19.822L28.5 22.1904ZM28.5 21.178L13.5 18.8096V16.822L28.5 19.1904V21.178ZM28.5 16.1904V18.178L13.5 15.8096V13.822L28.5 16.1904ZM28.5 15.178L13.5 12.8096V10.822L28.5 13.1904V15.178Z",
+          fill="#252850"
+          )
+        path(
+          d="M28.5 18.178V16.1904L13.5 13.822V15.8096L28.5 18.178Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M13.5 18.8096L28.5 21.178V19.1904L13.5 16.822V18.8096Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M28.5 24.178V22.1904L13.5 19.822V21.8096L28.5 24.178Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M13.5 24.8096L28.5 27.178V25.1904L13.5 22.822V24.8096Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M13.5 25.822V37.0004C13.5 37.2766 13.7239 37.5004 14 37.5004H28C28.2761 37.5004 28.5 37.2766 28.5 37.0004V28.1904L13.5 25.822Z",
+          fill="#D3D4DC"
+          )
+        path(
+          d="M38.7973 43.6406C38.7973 45.8222 38.8488 47.7201 38.8969 49.3673C38.9003 49.4849 38.9037 49.6011 38.9071 49.7161C38.9511 51.2152 38.9886 52.4911 38.9768 53.5867C38.951 55.9801 38.6835 57.3419 37.9037 58.1911C37.1244 59.0397 35.7199 59.4972 33.0292 59.7073C30.7528 59.8851 27.6757 59.8815 23.4964 59.8767C22.7807 59.8759 22.0326 59.875 21.2507 59.875C20.8514 59.875 20.461 59.8751 20.0791 59.8752C15.3488 59.8766 11.9416 59.8775 9.47669 59.6616C6.79044 59.4262 5.38278 58.9408 4.6005 58.0717C3.81627 57.2005 3.54946 55.8239 3.52364 53.4482C3.51178 52.3563 3.54948 51.0884 3.59365 49.6028C3.59688 49.4941 3.60015 49.3843 3.60343 49.2733C3.65149 47.6486 3.70294 45.7813 3.70294 43.6406C3.70294 40.2981 5.5742 36.9856 8.73114 34.492C11.8833 32.0022 16.2852 30.3594 21.2507 30.3594C26.2161 30.3594 30.6177 32.0022 33.7696 34.492C36.9263 36.9856 38.7973 40.298 38.7973 43.6406Z",
+          fill="#D3D4DC",
+          stroke="#252850"
+          )
+      g(v-else)
         path(
           d="M37.8045 21.8282C37.7267 24.3241 37.089 27.8166 36.0628 31.7134C34.9686 35.8679 33.4425 40.4466 31.7173 44.7036C29.9906 48.9641 28.072 52.8836 26.1978 55.7292C25.2598 57.1533 24.3453 58.2893 23.4856 59.0636C22.615 59.8478 21.8654 60.2031 21.25 60.2031C20.6346 60.2031 19.885 59.8478 19.0144 59.0636C18.1547 58.2892 17.2402 57.1533 16.3022 55.7291C14.428 52.8836 12.5094 48.9641 10.7827 44.7036C9.05748 40.4465 7.53135 35.8678 6.43725 31.7133C5.41102 27.8165 4.77328 24.3241 4.69554 21.8282L5.52833 21.8282L9.18497 21.8284L21.25 21.8286L33.315 21.8284L36.9717 21.8282L37.8045 21.8282Z",
           fill="white",
@@ -128,52 +266,68 @@
           stroke="#252850"
         )
         path(
-        :class="{'edit-part': isEdit}",
+          :class="{'edit-part': editable}",
           d="M36.1934 18.8948C36.1934 5.05857 38.9103 5.5807 21.2504 5.5807C3.59053 5.5807 6.3065 5.31963 6.3065 18.8948C6.3065 24.5178 12.8475 29.8594 21.2504 29.8594C29.6533 29.8594 36.1934 24.5178 36.1934 18.8948Z",
           fill="#D3D4DC"
         )
         path(
-        :class="{'edit-part': isEdit}",
+          :class="{'edit-part': editable}",
           d="M30.1106 33.75C30.4904 33.5726 31.0857 33.8793 31.0671 34.2981C30.693 42.7601 26.4204 56.7656 21.25 56.7656C16.0796 56.7656 11.807 42.7601 11.4329 34.2981C11.4143 33.8793 12.0096 33.5726 12.3894 33.75C13.6266 34.3282 16.2275 35.1094 21.25 35.1094C26.2725 35.1094 28.8734 34.3282 30.1106 33.75Z",
           fill="#D3D4DC"
         )
 </template>
 
 <script>
+import { sizesDetailedSvg } from "@/pages/newMedicalCard/utils/medicalConfig";
+
 export default {
   name: "SimpleToothSvg",
   data() {
     return {
-      size: {
+      sizesDetailedSvg,
-        molars: {
-          width: "37",
-          height: "56",
-          viewBox: "0 0 37 56",
-        },
-        "pre-molars": {
-          width: "38",
-          height: "59",
-          viewBox: "0 0 38 59",
-        },
-        incisors: {
-          width: "43",
-          height: "63",
-          viewBox: "0 0 43 63",
-        },
-        fangs: {
-          width: "38",
-          height: "59",
-          viewBox: "0 0 38 59",
-        },
-      },
     };
   },
   props: {
     partTooth: String,
     toothConfig: Object,
     jawPosition: String,
+    view: {
+      default: "native",
+      type: String,
+    },
+    editable: Boolean,
+    oversized: {
+      default: 0,
+      type: Number,
+    },
     data: Object,
-    isEdit: Boolean,
+  },
+  computed: {
+    rotateSvg() {
+      if (this.view === "artificial") {
+        if (this.jawPosition === "lower") {
+          return true;
+        }
+      } else {
+        if (this.jawPosition === "upper") {
+          return true;
+        }
+      }
+      return false;
+    },
+    getSizeSvg() {
+      let size = this.sizesDetailedSvg[this.partTooth][this.view];
+      if (this.partTooth === "general" && this.view === "native") {
+        size = size[this.toothConfig?.type];
+      }
+      return {
+        width: `${size.width + this.oversized}`,
+        height: `${size.height + this.oversized}`,
+        viewBox: `0 0 ${size.width + this.oversized} ${
+          size.height + this.oversized
+        }`,
+      };
+    },
   },
 };
 </script>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue

@@ -36,14 +36,14 @@
       .flex.flex-toogle.h-10.p-1.rounded(:style="{'backgroundColor': 'var(--bg-light-grey)'}")
         q-btn.w-12.h-full.rounded(
           size="12px",
-          :style="{'backgroundColor': isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
+          :style="{'backgroundColor': !isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
-          @click="()=>{ isShowSecondView=true }",
+          @click="()=>{ isShowSecondView=false }",
         )
           img(:src="teeth")
         q-btn.w-12.h-full.rounded(
           size="12px",
-          :style="{'backgroundColor': !isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
+          :style="{'backgroundColor': isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
-          @click="()=>{ isShowSecondView=false }",
+          @click="()=>{ isShowSecondView=true }",
         )
           img(:src="teeth_2")
 </template>
@@ -66,7 +66,7 @@ export default {
       filtredTooths: [],
       isEdit: false,
       component: false,
-      isShowSecondView: true,
+      isShowSecondView: false,
     };
   },
   props: {
@@ -81,6 +81,7 @@ export default {
   methods: {
     openEdit() {
       this.isEdit = true;
+      this.isShowSecondView = false;
     },
     cancelEdit() {
       this.isEdit = false;

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue

@@ -3,7 +3,7 @@
     :class="{'rounded-t': config.name === 'upper', 'rounded-b': config.name === 'lower','border-botton-none': config.name === 'upper',}",
     )
     .row.flex.w-full(
-      v-if="viewType"
+      v-if="!viewType"
       v-for="row in config.rowMap",
       :key="`${config.name}_${row.key}`",
       :style="{'height': heightRow[row.key]}"
@@ -27,17 +27,19 @@
         :style="{'width': '6.25%', 'minWidth': '55px'}",
         )
         span.text-smm.font-medium {{cell.tooth_number}}
+        .flex.items-center.justify-center(
+          :style="{'width': '35px', 'height': '35px'}"
+        )
           detailed-tooth-svg(
             part-tooth="crown",
-          :data="data.formula[cell.tooth_number].dental_condition",
+            :tooth-config="cell",
-          :is-edit="isEdit"
+            :view="data.formula[cell.tooth_number].dental_condition.general === 'ИЗ' ? 'artificial': 'native'",
             )
         detailed-tooth-svg(
           part-tooth="general",
+          :view="data.formula[cell.tooth_number].dental_condition.general === 'ИЗ' ? 'artificial': 'native'",
           :tooth-config="cell",
           :jaw-position="config.name",
-          :data="data.formula[cell.tooth_number].dental_condition",
-          :is-edit="isEdit"
           )
 </template>
 

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -1309,3 +1309,40 @@ export const thermometryResultsMap = [
     colorWarning: "var(--border-red-color)",
   },
 ];
+
+export const sizesDetailedSvg = {
+  general: {
+    native: {
+      molars: {
+        width: 37,
+        height: 56,
+      },
+      "pre-molars": {
+        width: 38,
+        height: 59,
+      },
+      incisors: {
+        width: 43,
+        height: 63,
+      },
+      fangs: {
+        width: 38,
+        height: 59,
+      },
+    },
+    artificial: {
+      width: 43,
+      height: 63,
+    },
+  },
+  crown: {
+    native: {
+      width: 41,
+      height: 40,
+    },
+    artificial: {
+      width: 20,
+      height: 20,
+    },
+  },
+};