From 9a498cd9f07b3de4c2b9acb8de8a1e33d4a55274 Mon Sep 17 00:00:00 2001 From: ggchinazhangwei <714349513@qq.com> Date: Wed, 9 Apr 2025 13:55:02 +0800 Subject: [PATCH] faat --- src/.DS_Store | Bin 8196 -> 10244 bytes src/components/.DS_Store | Bin 6148 -> 6148 bytes src/components/commonCa/index.less | 12 +++ src/components/commonCa/index.tsx | 123 +++++++++++++++++++++++++++++ 4 files changed, 135 insertions(+) create mode 100644 src/components/commonCa/index.less create mode 100644 src/components/commonCa/index.tsx diff --git a/src/.DS_Store b/src/.DS_Store index 39f728c55e008a86721db86f503878475d72ebf4..a1cae78b58da68b9632c599113f6b25d7b6d7838 100644 GIT binary patch literal 10244 zcmeHMU2GIp6h5c)XJ%;a6ezHTg$*mpPl5i?g7UNN7Nr5C(gIxyEVDb)c4T&D-I?vL z#U{qYA2iVf6cUZm7YPqUjJ`-rd_j272PA?f#Q5NYzG&iu!D#f{JF`pKZJ$h($lT4` zbLXCO?$4R;+;i_;0Kkr{+6WK=0D&Gx(qEzD5)DT6|2XMfK(JsSECX6C! zzrweGZvo!|z6E>>_!hVqEI=`vC1I{h{oJ>JZvo!|c?+=hAw&O%5)CkIw6lnJUZo4u1amXrw8;@(K}+Gt4{n76DJz+=#)!cbwF1g(CZn!6AJR) zNiW330V6K;bKe5K1&S@e&h8bUK$?E*r=Q=g1aX)%U7+Xfzj&e&Ksia<^wXHMd)Cj( zK1%#mv&kk#>~zB5vR4ynL${rVh8tKir?jlRLJ%ZDs*;ZM3|S*Rj^bqP4kgpi-ntcM zDB+cREz8K4mBayE8;Q#cqL%3>x~XNjvaV_*a`>Qbs@6z{l{HnHx6|V?1VI$UxV(5` zqPexPKGd|SVX{6n(bm>bA8KiCotzYfMJpS(b{$KNjZZu?dEyM8GN8BWK(+gx&(Bin zE`#XFVQ-T7X>O9=$#QO*qBOU%>VayxX5Rdo1vRy`3l}Y}4b;^wjmz^BO7i$%h7CAs z8CIsl$ZGwA8C~s3D@olP>~pkHr$-;x;_|!#(S4eF^iEapSej%O+^OKrJ)Y4tlef2b zV8GU#zG>xHT&}j08Ot!bEn9bV%Zwei$@E>0mg+JGEb4KXOuaYFSoQ%eV-qdX>5D0u zjA9OI9b-ofC7~I6%?`_PtQ3=EttBn9JEO6d`gAI@xrDd>;+irX*_A7-atktq-2y;3 zGBw1@f{eYUWon`rj&yrm0oFo0?12Mt9LC`_cni+KCvXLB!Ow6TD=>g7a4ojrR@{y| z@k!i=y%@to*zf9>WDR>b>aGDLujkz3CVFcCIY(e;m$WMnk7DE;Oj<@Z zW!iDMCaD<7tf4qsyJ0Xa*?A8+WLp`BP)~w!S#nOx(ji(rOh+HkwaoqzU3G?Hik;LdJRlubX>@xmmGz>^9|bq*u;)R_wq!{D1t126i z5RQ00%WWXaY%dpp70?1(pc`VK!U&v%Q*avIh4b(+T!PE+C42>6!wt9z-@}j0RpEE| z1OCKvtj49d43}dFSK~%(#Wsv!J4Ue+yU2Naa6cZvepFGzK^#I8M{pF!aRQ&illTh0 zif`aMcmY4ai})d4!przMUcsw)4R7F0_Y>z`ez*Ic%kf((&4yZUQ7?(jgxcVa$E4_g zirQ~-QDs5xvhb>PO>J8u`43v~9jBv-!^g!3$4w3w{6pRaNCxUa-4ZFdpWvm97D74) zb-9AMfN(uPI0=S=D+EG~?7glGJ}eNfNP=0o}7!@fp6vA*;5T1jJ@ELpo*9d&K;0O2#enTMO zRpLSdUI@eZAg;vqxB(lniARoY9t3ye6WGmTNIxFII37aCJ*u~2NHo}wrd0|Nsi1A_nqLlQ#~Ln1>7LncH1#6tDS1|lqzZCT7F tZ(uXpEXEAfrumuV>XX!iE%%d z1zWQ%cYs3Qqd|&#r=e;F;R4$=I0c*ntEK?IyPH%YpPKZJ67R1H(8HgFM<@^eXoE+z zMOCmv>QF#^criRhk$LN{qkg2Kq>k!?Iivx#DV*nvofLl^e1)ed>Zh1rQcOuTJqn+m zVk85KQ~cj4{x^KOPP$e*ZOJJ@@0w!1@iP!fW3TUUu4}v%&9aWSA(H@on1Yt;wp#^)4p3f#H^{C)6H7|Rx?2KA={l|BLh zvuM@^pMM%S#pZxp$KOf|-oB~dP|4IRot<`H4Ov&!83zOr$)({ + width: 0, + height: 0 + }); + const calibrationRef = useRef(null); + + const generateElement = useCallback( + (item?: boolean, num?: number) => { + if (calibrationRef.current) { + let createSpan = document.createElement("div"); + createSpan.className = "calibrationLine"; + createSpan.style.backgroundColor = "#ccc"; + calibrationRef.current.style.display = "flex"; + calibrationRef.current.style.justifyContent = "space-between"; + if (direction === "up") { + calibrationRef.current.style.marginLeft = "50px"; + createSpan.style.width = "1px"; + createSpan.style.height = "6px"; + createSpan.style.display = "inline-block"; + } else { + calibrationRef.current.style.flexDirection = "column"; + createSpan.style.height = "1px"; + createSpan.style.width = "6px"; + } + if (item) { + let createSpanContent = document.createElement("span"); + if (direction === "up") { + createSpan.style.height = "12px"; + createSpanContent.style.transform = "translate3d(-4px, 20px, 0px)"; + createSpan.style.transform = "translateY(0px)"; + } else { + createSpan.style.width = "12px"; + createSpanContent.style.paddingLeft = "20px"; + } + createSpanContent.style.display = "block"; + createSpanContent.className = "calibrationNumber"; + createSpanContent.innerHTML = num! * 5 + ""; + createSpan.appendChild(createSpanContent); + } + calibrationRef.current.appendChild(createSpan); + } + }, + [direction] + ); + + useEffect(() => { + if (calibrationRef.current) { + let calibration = calibrationRef.current.getBoundingClientRect(); + setCalibration({ width: calibration.width, height: calibration.height }); + let length = direction === "up" ? calibration.width : calibration.height; + for (let i = 0; i < length / 5; i++) { + if (i % 10 === 0) { + generateElement(true, i); + } else { + generateElement(); + } + } + } + }, [direction, generateElement]); + + useEffect(() => { + if (calibrationRef.current) { + let width = calibrationLength.width + ? calibrationLength.width + : calibrationRef.current.getBoundingClientRect().width; + let height = calibrationLength.height + ? calibrationLength.height + : calibrationRef.current.getBoundingClientRect().height; + let arr = [ + ...Array.from( + calibrationRef.current.querySelectorAll(".calibrationLine") + ) + ]; + if (arr.length) { + if (direction === "up") { + calibrationRef.current.style.width = + parseFloat(multiple.toFixed(1)) * width + "px"; + arr.forEach(el => { + let dom = [ + ...Array.from(el.querySelectorAll(".calibrationNumber")) + ][0] as HTMLElement; + if (dom) { + dom.style.transform = `translate3d(-4px, 16px, 0px) scale(${( + multiple + 0.1 + ).toFixed(1)})`; + } + }); + } else { + calibrationRef.current.style.height = + parseFloat(multiple.toFixed(1)) * height + "px"; + arr.forEach(el => { + let dom = [ + ...Array.from(el.querySelectorAll(".calibrationNumber")) + ][0] as HTMLElement; + if (dom) { + dom.style.transform = `translate3d(-4px, -8px, 0px) scale(${( + multiple + 0.1 + ).toFixed(1)})`; + } + }); + } + } + } + }, [calibrationLength.height, calibrationLength.width, direction, multiple]); + + return
; +}