From 7ab1e2e129537384ed1632c6238d30c5ee20a68a Mon Sep 17 00:00:00 2001 From: DwCay Date: Mon, 19 Jun 2023 17:51:01 +0300 Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE?= =?UTF-8?q?=D1=82=D0=B0=D0=BB=20=D0=BF=D0=BE=D0=BA=D1=80=D0=B0=D1=81=D0=BA?= =?UTF-8?q?=D1=83=20=D0=B8=20=D0=B4=D0=B5=D1=82=D0=B0=D0=BB=D0=B8=D0=B7?= =?UTF-8?q?=D0=B0=D1=86=D0=B8=D1=8E=20=D0=B8=D0=B7=D0=BE=D0=B1=D1=80=D0=B0?= =?UTF-8?q?=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B7=D1=83=D0=B1=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ToothFormula/DentalConditionForm.vue | 30 ++++--- .../Forms/ToothFormula/DetailedToothSvg.vue | 54 +++++++++-- .../Forms/ToothFormula/tooths/IncorsTooth.vue | 78 +++++++++------- .../Forms/ToothFormula/tooths/MolarsTooth.vue | 90 ++++++++++--------- .../tooths/PreMolarsFangsTooth.vue | 84 +++++++++-------- .../newMedicalCard/utils/gettersObjects.js | 16 ++-- .../newMedicalCard/utils/medicalConfig.js | 2 +- 7 files changed, 215 insertions(+), 139 deletions(-) diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue index f4347b4..09f56b7 100644 --- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue +++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue @@ -30,7 +30,7 @@ ) .general-expaction.flex.flex-col.pl-4(v-if="!type?.partsTooth") .condition-item.flex.gap-11px.items-center.h-10.w-full( - v-for="option in type.options" + v-for="option in type.options", ) q-radio( v-model="data[key]", @@ -46,7 +46,7 @@ .flex.flex-col.pl-4(v-else) .flex.flex-col.gap-y-3 .part-item.flex.flex-col(v-for="(part, partKey) in type?.partsTooth") - span.part-label.text-smm.font-medium {{part.label}} + span.part-label.text-smm.font-medium(:ref="`${key}_${partKey}`") {{part.label}} .condition-item.flex.gap-11px.items-center.h-10.w-full.pr-4(v-for="option in type.options") q-checkbox( v-model="data[key][partKey]", @@ -65,11 +65,11 @@ no-parent-event, :offset="[4,0]" ) - .h-258px.w-240px.flex.flex-col.pl-4.pr-2.py-2.gap-y-3 + .h-258px.flex.flex-col.pl-4.pr-2.py-2.gap-y-3 .flex.gap-x-2.text-m.font-bold span Выбранное span(:style="{'color': 'var(--font-grey-color)'}") {{listSelected.map((el) => el.value).flat().length}} - .scroll.flex.flex-col.gap-y-3.h-full + .scroll.flex.flex-col.gap-y-3.h-full.pr-2 .flex.flex-col.gap-y-2.text-smm.font-medium(v-for="condition in listSelected") .flex.gap-x-6px.items-center.whitespace-nowrap span.part-label {{formConfig.conditions[condition.type].label}} @@ -117,13 +117,21 @@ export default { }, methods: { clickPart(id) { - let arrayRefs = id.split("_"); - Object.keys(this.isOpenExpansion).forEach((key) => { - if (key === arrayRefs[0]) { - this.isOpenExpansion[key] = true; - } else { - this.isOpenExpansion[key] = false; - } + new Promise((resolve) => { + let arrayRefs = id.split("_"); + Object.keys(this.isOpenExpansion).forEach((key) => { + if (key === arrayRefs[0]) { + this.isOpenExpansion[key] = true; + } else { + this.isOpenExpansion[key] = false; + } + }); + return resolve(id); + }).then((id) => { + this.$refs[id][0].scrollIntoView({ + block: "center", + behavior: "smooth", + }); }); }, updateConditions() { diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DetailedToothSvg.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DetailedToothSvg.vue index acd02b8..ab635a1 100644 --- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DetailedToothSvg.vue +++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DetailedToothSvg.vue @@ -48,43 +48,79 @@ ) path( @click="(el) => clickPart(el.target.id)", - :id="editable && 'crown_bottom'", + :id="editable && 'crown_lower'", :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" + :fill="data.crown.lower.fill" ) path( @click="(el) => clickPart(el.target.id)", - :id="editable && 'crown_top'", + :id="editable && 'crown_upper'", :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" + :fill="data.crown.upper.fill" ) path( @click="(el) => clickPart(el.target.id)", :id="editable && 'crown_right'", :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" + :fill="data.crown.right.fill" ) path( @click="(el) => clickPart(el.target.id)", :id="editable && 'crown_left'", :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" + :fill="data.crown.left.fill" ) - g ellipse( @click="(el) => clickPart(el.target.id)", - :id="editable && 'crown_centeral'", + :id="editable && 'crown_central'", :class="{'edit-part': editable}", cx="19.7675", cy="19.7948", rx="7.0722", ry="7.06627", - fill="#D3D4DC" + :fill="data.crown.central.fill" ) + circle( + v-if="data.crown.central.injury", + cx="2.89014", + cy="2" r="2", + fill="#252850", + transform="translate(16.8 17.6)" + ) + circle( + v-if="data.crown.left.injury", + cx="2.89014", + cy="2" r="2", + fill="#252850", + transform="translate(3.7 17.6)" + ) + circle( + v-if="data.crown.right.injury", + cx="2.89014", + cy="2", + r="2", + fill="#252850", + transform="translate(30 17.6)" + ) + circle( + v-if="data.crown.upper.injury", + cx="2.89014", + cy="2" r="2", + fill="#252850", + transform="translate(16.8 4.6)" + ) + circle( + v-if="data.crown.lower.injury", + cx="2.89014", + cy="2", + r="2", + fill="#252850", + transform="translate(16.8 30.9)" + ) svg( v-if="partTooth === 'general'", :class="{'rotate-180': rotateSvg}", diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/tooths/IncorsTooth.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/tooths/IncorsTooth.vue index b35c538..6e974ea 100644 --- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/tooths/IncorsTooth.vue +++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/tooths/IncorsTooth.vue @@ -70,14 +70,22 @@ 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", - stroke="#252850" ) path( @click="(el) => clickPart(el.target.id)", :id="editable && 'root_central'", :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" + :fill="data.root.central.fill" + ) + g(v-if="data.root.central.injury" transform="translate(3.6 20)") + mask(id="mask0_4460_281702" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="35" height="40") + path(d="M34.3045 0.8282C34.2267 3.3241 33.589 6.81658 32.5628 10.7134C31.4686 14.8679 29.9425 19.4466 28.2173 23.7036C26.4906 27.9641 24.572 31.8836 22.6978 34.7292C21.7598 36.1533 20.8453 37.2893 19.9856 38.0636C19.115 38.8478 18.3654 39.2031 17.75 39.2031C17.1346 39.2031 16.385 38.8478 15.5144 38.0636C14.6547 37.2892 13.7402 36.1533 12.8022 34.7291C10.928 31.8836 9.0094 27.9641 7.28273 23.7036C5.55748 19.4465 4.03135 14.8678 2.93725 10.7133C1.91102 6.81654 1.27328 3.32405 1.19554 0.828156L2.02833 0.828205L5.68497 0.828381L17.75 0.828636L29.815 0.828404L33.4717 0.828244L34.3045 0.8282Z" fill="white" stroke="#252850") + g(mask="url(#mask0_4460_281702)") + circle(cx="9" cy="9" r="9" transform="matrix(1 0 0 -1 8.5 45)" fill="#C23333" stroke="white") + 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", + stroke="#252850" ) g(v-if="['ИЗ','ИК'].includes(data.general)" transform="translate(-6.5)") rect(y="14" width="56" height="4" rx="2" fill="#252850") @@ -121,14 +129,38 @@ fill="white", stroke="#252850" ) - path( - v-if="data.general !== 'В'", - @click="(el) => clickPart(el.target.id)", - :id="editable && 'crown'", - :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" - ) + g(v-if="data.general !== 'В'") + path( + @click="(el) => clickPart(el.target.id)", + :id="editable && 'crown_central'", + :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="data.crown.general.fill" + ) + g(v-if="data.crown.general.injury" transform="translate(-0.8 0)") + mask( + id="mask0_4460_281746", + style="mask-type:alpha", + maskUnits="userSpaceOnUse", + x="3", + y="2", + width="37", + height="32" + ) + path( + d="M39.2973 19.3594C39.2973 17.1778 39.3487 15.2799 39.3968 13.6327C39.4002 13.5151 39.4036 13.3989 39.407 13.2839C39.451 11.7848 39.4885 10.5089 39.4767 9.41334C39.451 7.01994 39.1835 5.65809 38.4036 4.8089C37.6243 3.96035 36.2199 3.50281 33.5292 3.29267C31.2528 3.11489 28.1757 3.11846 23.9964 3.1233C23.2807 3.12413 22.5326 3.125 21.7507 3.125C21.3514 3.125 20.961 3.12489 20.5791 3.12478C15.8488 3.12343 12.4416 3.12246 9.97672 3.33842C7.29048 3.57378 5.88282 4.05918 5.10055 4.92826C4.31632 5.7995 4.04951 7.17611 4.02369 9.55182C4.01183 10.6437 4.04953 11.9116 4.0937 13.3972C4.09693 13.5059 4.1002 13.6157 4.10348 13.7267C4.15154 15.3514 4.20298 17.2187 4.20298 19.3594C4.20298 22.7019 6.07424 26.0144 9.23117 28.508C12.3834 30.9978 16.7852 32.6406 21.7507 32.6406C26.7161 32.6406 31.1177 30.9978 34.2696 28.508C37.4263 26.0144 39.2973 22.702 39.2973 19.3594Z", + fill="white", + stroke="#252850" + ) + g(mask="url(#mask0_4460_281746)") + circle( + cx="9", + cy="9", + r="9", + transform="matrix(1 0 0.01 -1 13 17)", + fill="#252850", + stroke="white" + ) g(v-if="data.general === 'В'" transform="translate(2.5 2)") path(d="M18.7505 31.1406C8.60226 31.1406 0.703384 24.2816 0.703125 17.4223C18.7497 17.4223 13.8937 0.828266 18.7505 0.828266C23.3064 0.828266 18.7505 17.3594 36.797 17.3594C36.797 24.7218 28.8987 31.1406 18.7505 31.1406Z" fill="#252850") mask(id="mask0_4460_281524" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="37" height="32") @@ -144,30 +176,8 @@ rect(width="2" height="48" transform="matrix(-0.866025 0.5 0.5 0.866025 -4.73584 4.43353)" fill="white" fill-opacity="0.3") rect(width="2" height="48" transform="matrix(-0.866025 0.5 0.5 0.866025 -8.19995 6.43353)" fill="white" fill-opacity="0.3") path(d="M10.7458 15.2351C8.56819 16.8046 5.53252 17.8416 1.21765 17.9178C1.39722 20.9921 3.23273 24.0833 6.23201 26.4619C9.38576 28.9631 13.7877 30.6406 18.7505 30.6406C28.509 30.6406 35.9373 24.6321 36.2843 17.8549C31.9674 17.7793 28.9144 16.7463 26.715 15.184C24.4306 13.5614 23.1171 11.4033 22.2518 9.28272C21.8197 8.22373 21.4976 7.16958 21.223 6.19433C21.1316 5.86978 21.0462 5.55694 20.9641 5.25603C20.7964 4.64144 20.6423 4.07664 20.4782 3.56353C20.2332 2.79724 19.9879 2.22215 19.697 1.84288C19.425 1.48818 19.1343 1.32827 18.7505 1.32827C18.3164 1.32827 17.9966 1.50101 17.7094 1.85587C17.4023 2.23532 17.1457 2.81036 16.8946 3.57676C16.7122 4.1334 16.5436 4.75425 16.3593 5.43291C16.2909 5.68489 16.2203 5.94483 16.146 6.21242C15.8747 7.19 15.5599 8.2476 15.1376 9.30995C14.2921 11.4373 13.0076 13.6049 10.7458 15.2351Z" stroke="#252850") - g(v-if="data.crown.general.injury") - mask( - id="mask0_4460_281746", - style="mask-type:alpha", - maskUnits="userSpaceOnUse", - x="3", - y="2", - width="37", - height="32" - ) - path( - d="M39.2973 19.3594C39.2973 17.1778 39.3487 15.2799 39.3968 13.6327C39.4002 13.5151 39.4036 13.3989 39.407 13.2839C39.451 11.7848 39.4885 10.5089 39.4767 9.41334C39.451 7.01994 39.1835 5.65809 38.4036 4.8089C37.6243 3.96035 36.2199 3.50281 33.5292 3.29267C31.2528 3.11489 28.1757 3.11846 23.9964 3.1233C23.2807 3.12413 22.5326 3.125 21.7507 3.125C21.3514 3.125 20.961 3.12489 20.5791 3.12478C15.8488 3.12343 12.4416 3.12246 9.97672 3.33842C7.29048 3.57378 5.88282 4.05918 5.10055 4.92826C4.31632 5.7995 4.04951 7.17611 4.02369 9.55182C4.01183 10.6437 4.04953 11.9116 4.0937 13.3972C4.09693 13.5059 4.1002 13.6157 4.10348 13.7267C4.15154 15.3514 4.20298 17.2187 4.20298 19.3594C4.20298 22.7019 6.07424 26.0144 9.23117 28.508C12.3834 30.9978 16.7852 32.6406 21.7507 32.6406C26.7161 32.6406 31.1177 30.9978 34.2696 28.508C37.4263 26.0144 39.2973 22.702 39.2973 19.3594Z", - fill="white", - stroke="#252850" - ) - g(mask="url(#mask0_4460_281746)") - circle( - cx="9", - cy="9", - r="9", - transform="matrix(1 0 0 -1 13 17)", - fill="#252850", - stroke="white" - ) + g(v-if="data.crown.general.seal") + path(d="M40.4489 9.76331C40.4489 8.50504 40.5071 7.4112 40.5609 6.46817C40.5647 6.40263 40.5684 6.33791 40.5721 6.274C40.6216 5.41073 40.6628 4.69477 40.6499 4.08281C40.6361 3.4256 40.5597 2.94088 40.3946 2.56649C40.2373 2.20961 39.9865 1.92397 39.5582 1.6857C39.1149 1.43905 38.4773 1.24139 37.5522 1.09263C36.6308 0.944462 35.456 0.849421 33.9572 0.789614C31.3963 0.687426 27.9377 0.689489 23.2622 0.692278C22.4613 0.692755 21.6247 0.693254 20.7507 0.693254C20.3012 0.693254 19.8616 0.69319 19.4315 0.693125C14.1463 0.692337 10.3193 0.691765 7.54653 0.815899C6.04823 0.882975 4.87372 0.985922 3.95277 1.14147C3.02833 1.2976 2.39034 1.50195 1.94637 1.75397C1.51685 1.99779 1.26448 2.28827 1.10628 2.64835C0.940712 3.02521 0.864407 3.50982 0.850534 4.16209C0.837567 4.77177 0.878938 5.48308 0.928707 6.3388C0.932211 6.39904 0.935756 6.45999 0.939326 6.52167C0.993167 7.45178 1.05128 8.52824 1.05128 9.76331C1.05128 10.5815 1.49902 11.4558 2.44923 12.3324C3.39643 13.2061 4.7976 14.037 6.57884 14.7559C10.138 16.1924 15.1222 17.1445 20.7507 17.1445C26.3793 17.1445 31.3631 16.1924 34.922 14.7559C36.7031 14.037 38.1041 13.2061 39.0512 12.3324C40.0013 11.4559 40.4489 10.5815 40.4489 9.76331Z" fill="#FFB931" stroke="white")