Merge branch 'dev'
This commit is contained in:
yoosangwook
commit
56cb5272cf
10656
package-lock.json
generated
Normal file
10656
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
6
public/static/images/canvas/img_check_fail.svg
Normal file
6
public/static/images/canvas/img_check_fail.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="elements">
|
||||||
|
<path id="Vector" d="M6.73735 6.73726L11.2628 11.2627M11.2628 6.73726L6.73735 11.2627" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path id="Ellipse 1334" d="M17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17C13.4183 17 17 13.4183 17 9Z" stroke="white"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 431 B |
4
public/static/images/canvas/img_check_success.svg
Normal file
4
public/static/images/canvas/img_check_success.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M5 9.5L7.5 12L13 6" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17C13.4183 17 17 13.4183 17 9Z" stroke="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 332 B |
4
public/static/images/canvas/img_edit_ico.svg
Normal file
4
public/static/images/canvas/img_edit_ico.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M9.00078 5.7998V12.1998M12.2008 8.9998L5.80078 8.9998" stroke="#141B34" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17C13.4183 17 17 13.4183 17 9Z" stroke="#141B34"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 371 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M27 0.804011L52.9645 33.5H1.03554L27 0.804011Z" stroke="white"/>
|
<path d="M10 1.56205L17.865 11H2.13504L10 1.56205Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 177 B After Width: | Height: | Size: 189 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M43.6009 0.5L53.3736 43.5H0.5V13.537H21.9375H22.4375V13.037V0.5H43.6009Z" stroke="white"/>
|
<path d="M15.4907 1L18.7587 16H1V5.63636H8.14815H9.14815V4.63636V1H15.4907Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 203 B After Width: | Height: | Size: 214 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M10.3991 43.5H53.5V25.537H29.0625H28.5625V25.037V0.5H0.626389L10.3991 43.5Z" stroke="white"/>
|
<path d="M4.5093 16H19V10H10H8.958L9.00085 8.95888L9.32837 1H1.24132L4.5093 16Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 206 B After Width: | Height: | Size: 218 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="57" height="41" viewBox="0 0 57 41" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M30.384 8.3129L30.5329 8.53093H30.7969H39.3543L56.172 40.5H0.896303L25.3336 0.917553L30.384 8.3129Z" stroke="white"/>
|
<path d="M10.8546 3.62169L11.1523 4.0594H11.6816H14.4443L20.3269 15H1.76631L9.65389 1.8558L10.8546 3.62169Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 230 B After Width: | Height: | Size: 246 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="54" height="41" viewBox="0 0 54 41" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M28.7562 8.30253L28.9042 8.53127L29.1766 8.53093L53.5 8.50062V40.5H0.871685L24.0017 0.953657L28.7562 8.30253Z" stroke="white"/>
|
<path d="M11.083 3.75037L11.379 4.06002L11.8074 4.0594L19 4.04906V15H1.69884L9.09691 1.67251L11.083 3.75037Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 240 B After Width: | Height: | Size: 247 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M17.2929 33.5H0.5V0.5H53.5V33.5H36.7071L27.3536 24.1464L27 23.7929L26.6464 24.1464L17.2929 33.5Z" stroke="white"/>
|
<path d="M6.05791 12H1V1H19V12H13.9421L10.7183 8.67188L10 7.93037L9.28173 8.67188L6.05791 12Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 227 B After Width: | Height: | Size: 232 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="40" height="50" viewBox="0 0 40 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="15" height="19" viewBox="0 0 15 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M20 0.64603L39.5 16.6006V49.5H0.5V16.6006L20 0.64603Z" stroke="white"/>
|
<path d="M7.5 1.299L14 6.68809V18H1V6.68809L7.5 1.299Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 184 B After Width: | Height: | Size: 193 B |
@ -1,5 +1,3 @@
|
|||||||
<svg width="54" height="42" viewBox="0 0 54 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M0.971595 41.5L10.2573 28.5H44.727L53.0842 41.5H0.971595Z" fill="#313131" stroke="white"/>
|
<path d="M3.96963 10.3554L4.07692 10.1429V9.90476V1H15.9231V9.90476V10.1429L16.0304 10.3554L18.375 15H1.625L3.96963 10.3554Z" stroke="white" stroke-width="2"/>
|
||||||
<path d="M10.5 0.5H44.5V28.5H10.5V0.5Z" fill="#313131" stroke="white"/>
|
|
||||||
<rect x="11" y="28" width="33" height="1" fill="#313131"/>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 334 B After Width: | Height: | Size: 263 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="58" height="39" viewBox="0 0 58 39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M57.4251 17.0318L46.691 38.5H0.865706L22.7888 0.5H46.728L57.4251 17.0318Z" stroke="white"/>
|
<path d="M20.8541 6.14406L17.5432 14H1.70065L8.93284 1H16.9517L20.8541 6.14406Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 204 B After Width: | Height: | Size: 218 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="58" height="47" viewBox="0 0 58 47" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M57.339 20.1115L40.724 46.5H0.962002L33.1033 0.72297L57.339 20.1115Z" stroke="white"/>
|
<path d="M20.6552 7.73365L14.6298 17H1.88045L12.3752 1.43676L20.6552 7.73365Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 199 B After Width: | Height: | Size: 216 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<rect x="0.5" y="0.5" width="53" height="33" fill="#313131" stroke="white"/>
|
<rect x="1" y="1" width="18" height="10" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 180 B After Width: | Height: | Size: 178 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M0.654784 33.5L9.66306 0.5H44.3369L53.3452 33.5H0.654784Z" stroke="white"/>
|
<path d="M3.98369 1.72462C4.10657 1.29565 4.4988 1 4.94502 1H15.055C15.5012 1 15.8934 1.29565 16.0163 1.72462L18.308 9.72462C18.491 10.3636 18.0113 11 17.3466 11H2.65336C1.98869 11 1.50899 10.3636 1.69202 9.72462L3.98369 1.72462Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 188 B After Width: | Height: | Size: 368 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M43.5 43.5H1.20711L43.5 1.20711V43.5Z" stroke="white"/>
|
<path d="M2.12132 11.2929L11.2929 2.12132C11.9229 1.49136 13 1.93752 13 2.82843V12C13 12.5523 12.5523 13 12 13H2.82843C1.93752 13 1.49136 11.9229 2.12132 11.2929Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 168 B After Width: | Height: | Size: 301 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="34" height="44" viewBox="0 0 34 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M33.5 1.04958V43.5H0.5V27.8255L33.5 1.04958Z" stroke="white"/>
|
<path d="M12 2.11305V16H1V11.132L12 2.11305Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 175 B After Width: | Height: | Size: 183 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M0.6187 33.5L7.70137 0.5H53.3813L46.2986 33.5H0.6187Z" stroke="white"/>
|
<path d="M1.22928 12L3.51619 1H18.7707L16.4838 12H1.22928Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 184 B After Width: | Height: | Size: 197 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M10 23.5H9.5V24V33.5H0.5V0.5H53.5V33.5H44.5V24V23.5H44H10Z" stroke="white"/>
|
<path d="M6.18518 8.17647H5.18518V9.17647V12H1V1H19V12H14.8148V9.17647V8.17647H13.8148H6.18518Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 189 B After Width: | Height: | Size: 234 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M22.4375 13.037V0.5H53.5V43.5H0.5V13.537H21.9375H22.4375V13.037Z" stroke="white"/>
|
<path d="M9.125 5V1H19V16H1V6H8.125H9.125V5Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 195 B After Width: | Height: | Size: 183 B |
@ -1,3 +1,3 @@
|
|||||||
<svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M30.4375 25.037V0.5H53.5V43.5H1.03302L15.242 25.537H29.9375H30.4375V25.037Z" stroke="white"/>
|
<path d="M12.1111 9.27023L12.0905 1H19V16H1.8753L5.71843 10.2727H11.1111H12.1136L12.1111 9.27023Z" stroke="white" stroke-width="2"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 206 B After Width: | Height: | Size: 236 B |
@ -1,11 +1,5 @@
|
|||||||
<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<g id="ico">
|
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/>
|
||||||
<circle id="Ellipse 2012" cx="11.5" cy="12" r="11.5" fill="#45576F"/>
|
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#0191C9"/>
|
||||||
<g id="elements">
|
<path d="M13.186 5.7898C12.6312 5.20223 11.7307 5.20223 11.1759 5.7898L6.99193 10.2206C6.03462 11.2344 6.03462 12.8767 6.99193 13.8905C7.94924 14.9043 9.50003 14.9043 10.4573 13.8905L13.9136 10.2303C14.1615 9.96779 14.5663 9.96779 14.8141 10.2303C15.062 10.4928 15.062 10.9214 14.8141 11.1839L11.3578 14.8441C9.90251 16.3853 7.54676 16.3853 6.09147 14.8441C4.63618 13.303 4.63618 10.8082 6.09147 9.26705L10.2754 4.8362C11.3282 3.72127 13.0337 3.72127 14.0865 4.8362C15.1393 5.95114 15.1393 7.75719 14.0865 8.87212L10.0844 13.1103C9.43409 13.799 8.379 13.799 7.72867 13.1103C7.07834 12.4216 7.07834 11.3043 7.72867 10.6156L11.0031 7.14795C11.2509 6.88547 11.6557 6.88547 11.9035 7.14795C12.1514 7.41042 12.1514 7.83906 11.9035 8.10154L8.62913 11.5692C8.47678 11.7305 8.47678 11.9954 8.62913 12.1567C8.78148 12.3181 9.03161 12.3181 9.18396 12.1567L13.186 7.91853C13.7408 7.33096 13.7408 6.37736 13.186 5.7898Z" fill="#0191C9" stroke="white" stroke-width="0.5"/>
|
||||||
<path id="Vector" d="M9.66678 12.8193C9.7612 12.9739 9.87323 13.1202 10.0029 13.2552C10.8079 14.093 12.0349 14.224 12.9718 13.6481C13.1454 13.5414 13.3091 13.4104 13.4582 13.2552L15.6178 11.0076C16.572 10.0145 16.572 8.40447 15.6178 7.41141C14.6637 6.41836 13.1166 6.41836 12.1625 7.41142L11.6868 7.90648" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
|
||||||
<path id="Vector_2" d="M10.313 16.0933L9.83718 16.5885C8.88301 17.5816 7.33598 17.5816 6.3818 16.5885C5.42762 15.5955 5.42762 13.9854 6.3818 12.9924L8.54141 10.7448C9.49559 9.75174 11.0426 9.75174 11.9968 10.7448C12.1264 10.8797 12.2384 11.026 12.3328 11.1806" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
|
||||||
<path id="Vector_3" d="M17.0003 14.6666H15.6143M13.6669 18L13.6669 16.614" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path id="Vector_4" d="M5 9.33333H6.38593M8.33333 6L8.33333 7.38593" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
7
public/static/images/sub/change_ico.svg
Normal file
7
public/static/images/sub/change_ico.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/>
|
||||||
|
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#909000"/>
|
||||||
|
<path d="M4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4" stroke="#909000" stroke-linecap="round"/>
|
||||||
|
<path d="M5.58914 5.8473C5.67215 5.75932 5.75769 5.67375 5.84566 5.59071M7.5684 4.43768C7.67731 4.38873 7.78788 4.34282 7.9 4.30005M4.3 7.90005C4.34317 7.78681 4.38955 7.67516 4.43904 7.5652" stroke="#909000" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M9.99999 7.59961V12.3996M12.4 9.99961L7.59999 9.99961" stroke="#909000" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 772 B |
@ -1,4 +1,5 @@
|
|||||||
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<circle cx="7" cy="7.5" r="6.5" fill="white" stroke="#F16A6A"/>
|
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/>
|
||||||
<path d="M6.507 9.228L6.276 5.169L6.221 3.629H7.849L7.794 5.169L7.563 9.228H6.507ZM7.035 12.154C6.74167 12.154 6.49967 12.0513 6.309 11.846C6.12567 11.6407 6.034 11.3913 6.034 11.098C6.034 10.79 6.12567 10.537 6.309 10.339C6.49967 10.141 6.74167 10.042 7.035 10.042C7.32833 10.042 7.56667 10.141 7.75 10.339C7.94067 10.537 8.036 10.79 8.036 11.098C8.036 11.3913 7.94067 11.6407 7.75 11.846C7.56667 12.0513 7.32833 12.154 7.035 12.154Z" fill="#F16A6A"/>
|
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#F16A6A"/>
|
||||||
|
<path d="M9.47136 11.228L9.24036 7.169L9.18536 5.629H10.8134L10.7584 7.169L10.5274 11.228H9.47136ZM9.99936 14.154C9.70602 14.154 9.46402 14.0513 9.27336 13.846C9.09002 13.6407 8.99836 13.3913 8.99836 13.098C8.99836 12.79 9.09002 12.537 9.27336 12.339C9.46402 12.141 9.70602 12.042 9.99936 12.042C10.2927 12.042 10.531 12.141 10.7144 12.339C10.905 12.537 11.0004 12.79 11.0004 13.098C11.0004 13.3913 10.905 13.6407 10.7144 13.846C10.531 14.0513 10.2927 14.154 9.99936 14.154Z" fill="#F16A6A"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 620 B After Width: | Height: | Size: 738 B |
6
public/static/images/sub/open_ico.svg
Normal file
6
public/static/images/sub/open_ico.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/>
|
||||||
|
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#3BBB48"/>
|
||||||
|
<path d="M11.3571 4.95962C10.7174 4.31987 10.3975 4 10 4C9.60251 4 9.28264 4.31987 8.64289 4.95962C8.25899 5.34352 7.87857 5.52175 7.33125 5.52175C6.85336 5.52175 6.17346 5.42907 5.8 5.80567C5.4295 6.17929 5.52177 6.85639 5.52177 7.33123C5.52177 7.87857 5.34352 8.25899 4.95961 8.6429C4.31987 9.28264 4.00001 9.60251 4 9.99999C4.00001 10.3975 4.31988 10.7174 4.95963 11.3571C5.38969 11.7872 5.52177 12.0649 5.52177 12.6687C5.52177 13.1466 5.42908 13.8265 5.80569 14.2C6.17931 14.5705 6.85641 14.4782 7.33124 14.4782C7.91409 14.4782 8.19477 14.5922 8.61074 15.0082C8.96495 15.3624 9.43978 16 10 16C10.5602 16 11.0351 15.3624 11.3893 15.0082C11.8052 14.5922 12.0859 14.4782 12.6688 14.4782C13.1436 14.4782 13.8207 14.5705 14.1943 14.2M15.0404 8.6429C15.6801 9.28264 16 9.60251 16 9.99999C16 10.3975 15.6801 10.7174 15.0404 11.3571C14.6103 11.7871 14.4782 12.0649 14.4782 12.6687C14.4782 13.1466 14.5709 13.8265 14.1943 14.2M14.1943 14.2H14.2" stroke="#3BBB48" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M7.9 8.49998L10 10.6L15.4002 4.59998" stroke="#3BBB48" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -1,15 +1,28 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
// import { useEffect } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
|
import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
|
||||||
import { useCommonCode } from '@/hooks/common/useCommonCode'
|
import { useCommonCode } from '@/hooks/common/useCommonCode'
|
||||||
|
import { usePlan } from '@/hooks/usePlan'
|
||||||
import ServerError from './error'
|
import ServerError from './error'
|
||||||
|
|
||||||
import '@/styles/common.scss'
|
import '@/styles/common.scss'
|
||||||
|
|
||||||
export const QcastProvider = ({ children }) => {
|
export const QcastProvider = ({ children }) => {
|
||||||
|
const [planSave, setPlanSave] = useState(false)
|
||||||
|
const { currentCanvasPlan, modifiedPlans, checkUnsavedCanvasPlan } = usePlan()
|
||||||
const { commonCode, findCommonCode } = useCommonCode()
|
const { commonCode, findCommonCode } = useCommonCode()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const targetElement = document.getElementById('canvas')
|
||||||
|
if (!targetElement && currentCanvasPlan?.id && planSave) {
|
||||||
|
setPlanSave((prev) => !prev)
|
||||||
|
checkUnsavedCanvasPlan(currentCanvasPlan.userId)
|
||||||
|
} else if (targetElement && currentCanvasPlan?.id) {
|
||||||
|
setPlanSave(true)
|
||||||
|
}
|
||||||
|
}, [modifiedPlans])
|
||||||
|
|
||||||
// useEffect(() => {
|
// useEffect(() => {
|
||||||
// console.log('commonCode', commonCode)
|
// console.log('commonCode', commonCode)
|
||||||
// console.log(findCommonCode(113600))
|
// console.log(findCommonCode(113600))
|
||||||
|
|||||||
@ -1,9 +1,12 @@
|
|||||||
import Estimate from '@/components/estimate/Estimate'
|
import Estimate from '@/components/estimate/Estimate'
|
||||||
|
|
||||||
export default function EstimatePage() {
|
export default function EstimatePage({ params }) {
|
||||||
|
//floor-plan/estimate/mid/pid
|
||||||
|
//mid :5 견적탭
|
||||||
|
//pid : 넘어온 플랜번호
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Estimate />
|
<Estimate params={params} />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import CanvasFrame from '@/components/floor-plan/CanvasFrame'
|
import CanvasFrame from '@/components/floor-plan/CanvasFrame'
|
||||||
import FloorPlan from '@/components/floor-plan/FloorPlan'
|
|
||||||
|
|
||||||
export default function FloorPlanPage() {
|
export default function FloorPlanPage() {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
import { fabric } from 'fabric'
|
||||||
|
|
||||||
export const MENU = {
|
export const MENU = {
|
||||||
PLAN_DRAWING: 'planDrawing',
|
PLAN_DRAWING: 'planDrawing',
|
||||||
INITIAL_CANVAS_SETTING: 'initialCanvasSetting', // 배치면 초기설정
|
INITIAL_CANVAS_SETTING: 'initialCanvasSetting', // 배치면 초기설정
|
||||||
@ -116,3 +118,44 @@ export const POLYGON_TYPE = {
|
|||||||
ROOF: 'roof',
|
ROOF: 'roof',
|
||||||
TRESTLE: 'trestle',
|
TRESTLE: 'trestle',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const SAVE_KEY = [
|
||||||
|
'selectable',
|
||||||
|
'name',
|
||||||
|
'parentId',
|
||||||
|
'id',
|
||||||
|
'length',
|
||||||
|
'idx',
|
||||||
|
'direction',
|
||||||
|
'parentDirection',
|
||||||
|
'lines',
|
||||||
|
'points',
|
||||||
|
'lockMovementX',
|
||||||
|
'lockMovementY',
|
||||||
|
'lockRotation',
|
||||||
|
'lockScalingX',
|
||||||
|
'lockScalingY',
|
||||||
|
'opacity',
|
||||||
|
'cells',
|
||||||
|
'maxX',
|
||||||
|
'maxY',
|
||||||
|
'minX',
|
||||||
|
'minY',
|
||||||
|
'x',
|
||||||
|
'y',
|
||||||
|
'x1',
|
||||||
|
'x2',
|
||||||
|
'y1',
|
||||||
|
'y2',
|
||||||
|
'attributes',
|
||||||
|
'stickeyPoint',
|
||||||
|
'text',
|
||||||
|
'pitch',
|
||||||
|
'uuid',
|
||||||
|
'originText',
|
||||||
|
'groupYn',
|
||||||
|
'groupName',
|
||||||
|
'lineDirection',
|
||||||
|
]
|
||||||
|
|
||||||
|
export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]
|
||||||
|
|||||||
@ -2,12 +2,14 @@
|
|||||||
import { useEffect } from 'react'
|
import { useEffect } from 'react'
|
||||||
import '@/styles/contents.scss'
|
import '@/styles/contents.scss'
|
||||||
import { useRecoilState } from 'recoil'
|
import { useRecoilState } from 'recoil'
|
||||||
import { contextMenuState } from '@/store/contextMenu'
|
import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
|
||||||
|
|
||||||
export default function QContextMenu(props) {
|
export default function QContextMenu(props) {
|
||||||
const { contextRef, canvasProps, handleKeyup } = props
|
const { contextRef, canvasProps, handleKeyup } = props
|
||||||
const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
|
const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
|
||||||
|
const [contextMenuList, setContextMenuList] = useRecoilState(contextMenuListState)
|
||||||
const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
|
const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
|
||||||
|
|
||||||
let contextType = ''
|
let contextType = ''
|
||||||
|
|
||||||
if (activeObject) {
|
if (activeObject) {
|
||||||
@ -19,12 +21,22 @@ export default function QContextMenu(props) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getYPosition = (e) => {
|
||||||
|
const contextLength = contextMenuList.reduce((acc, cur, index) => {
|
||||||
|
return acc + cur.length
|
||||||
|
}, 0)
|
||||||
|
return e?.clientY - (contextLength * 25 + contextMenuList.length * 2 * 17)
|
||||||
|
}
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!contextRef.current) return
|
if (!contextRef.current) return
|
||||||
|
|
||||||
const handleContextMenu = (e) => {
|
const handleContextMenu = (e) => {
|
||||||
// e.preventDefault() //기존 contextmenu 막고
|
// e.preventDefault() //기존 contextmenu 막고
|
||||||
setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
|
const position = {
|
||||||
|
x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
|
||||||
|
y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY,
|
||||||
|
}
|
||||||
|
setContextMenu({ visible: true, ...position })
|
||||||
document.addEventListener('keyup', (e) => handleKeyup(e))
|
document.addEventListener('keyup', (e) => handleKeyup(e))
|
||||||
canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
|
canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,13 +1,13 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
export default function QSelectBox({ title = '', options, onChange, value }) {
|
export default function QSelectBox({ title = '', options, onChange, value, disabled = false, params = {} }) {
|
||||||
const [openSelect, setOpenSelect] = useState(false)
|
const [openSelect, setOpenSelect] = useState(false)
|
||||||
const [selected, setSelected] = useState(title === '' ? options[0].name : title)
|
const [selected, setSelected] = useState(title === '' ? options[0].name : title)
|
||||||
|
|
||||||
const handleClickSelectOption = (option) => {
|
const handleClickSelectOption = (option) => {
|
||||||
setSelected(option.name)
|
setSelected(option.name)
|
||||||
onChange?.(option)
|
onChange?.(option, params)
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -15,7 +15,7 @@ export default function QSelectBox({ title = '', options, onChange, value }) {
|
|||||||
}, [value])
|
}, [value])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`sort-select ${openSelect ? 'active' : ''}`} onClick={() => setOpenSelect(!openSelect)}>
|
<div className={`sort-select ${openSelect ? 'active' : ''}`} onClick={disabled ? () => {} : () => setOpenSelect(!openSelect)}>
|
||||||
<p>{selected}</p>
|
<p>{selected}</p>
|
||||||
<ul className="select-item-wrap">
|
<ul className="select-item-wrap">
|
||||||
{options?.map((option) => (
|
{options?.map((option) => (
|
||||||
|
|||||||
@ -1,14 +1,48 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import { useEffect, useState } from 'react'
|
|
||||||
import { useMessage } from '@/hooks/useMessage'
|
import { useEffect, useState, useRef } from 'react'
|
||||||
import SingleDatePicker from '../common/datepicker/SingleDatePicker'
|
|
||||||
import { useRecoilValue } from 'recoil'
|
import { useRecoilValue } from 'recoil'
|
||||||
import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
|
import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
|
||||||
|
import { sessionStore } from '@/store/commonAtom'
|
||||||
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
|
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
|
||||||
|
import SingleDatePicker from '../common/datepicker/SingleDatePicker'
|
||||||
|
import EstimateFileUploader from './EstimateFileUploader'
|
||||||
|
|
||||||
export default function Estimate() {
|
export default function Estimate({ params }) {
|
||||||
const { getMessage } = useMessage()
|
const [objectNo, setObjectNo] = useState('')
|
||||||
|
const [files, setFiles] = useState([]) //첨부파일
|
||||||
|
|
||||||
|
const sessionState = useRecoilValue(sessionStore)
|
||||||
const objectRecoil = useRecoilValue(floorPlanObjectState)
|
const objectRecoil = useRecoilValue(floorPlanObjectState)
|
||||||
console.log('견적서화면이군요', objectRecoil.floorPlanObjectNo)
|
const { getMessage } = useMessage()
|
||||||
|
|
||||||
|
const { setMenuNumber } = useCanvasMenu()
|
||||||
|
|
||||||
|
const fileUploadProps = {
|
||||||
|
// objectNo: '',
|
||||||
|
// planNo: params.pid,
|
||||||
|
// category: '10',
|
||||||
|
uploadFiles: files,
|
||||||
|
setUploadFiles: setFiles,
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setObjectNo(objectRecoil.floorPlanObjectNo)
|
||||||
|
}, [objectRecoil])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (objectNo) {
|
||||||
|
//Q101X278191023001
|
||||||
|
console.log('세션정보::::', sessionState)
|
||||||
|
//상세API호출
|
||||||
|
}
|
||||||
|
}, [objectNo])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMenuNumber(5)
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="sub-content estimate">
|
<div className="sub-content estimate">
|
||||||
<div className="sub-content-inner">
|
<div className="sub-content-inner">
|
||||||
@ -18,7 +52,9 @@ export default function Estimate() {
|
|||||||
<div className="estimate-list-wrap one">
|
<div className="estimate-list-wrap one">
|
||||||
<div className="estimate-box">
|
<div className="estimate-box">
|
||||||
<div className="estimate-tit">{getMessage('estimate.detail.objectNo')}</div>
|
<div className="estimate-tit">{getMessage('estimate.detail.objectNo')}</div>
|
||||||
<div className="estimate-name">RX524231020006 (Plan No: 1)</div>
|
<div className="estimate-name">
|
||||||
|
{objectNo} (Plan No: {params.pid})
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="estimate-box">
|
<div className="estimate-box">
|
||||||
<div className="estimate-tit">{getMessage('estimate.detail.estimateNo')}</div>
|
<div className="estimate-tit">{getMessage('estimate.detail.estimateNo')}</div>
|
||||||
@ -105,7 +141,7 @@ export default function Estimate() {
|
|||||||
<tr>
|
<tr>
|
||||||
{/* 주문분류 */}
|
{/* 주문분류 */}
|
||||||
<th>
|
<th>
|
||||||
注文分類/주문분류 <span className="important">*</span>
|
{getMessage('estimate.detail.orderType')} <span className="important">*</span>
|
||||||
</th>
|
</th>
|
||||||
<td colSpan={3}>
|
<td colSpan={3}>
|
||||||
<div className="radio-wrap"></div>
|
<div className="radio-wrap"></div>
|
||||||
@ -113,7 +149,7 @@ export default function Estimate() {
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
{/* 지붕재・사양시공 최대4개*/}
|
{/* 지붕재・사양시공 최대4개*/}
|
||||||
<th>屋根材・仕様施工 / 지붕재・사양시공</th>
|
<th>{getMessage('estimate.detail.roofCns')}</th>
|
||||||
<td colSpan={3}>
|
<td colSpan={3}>
|
||||||
<div className="form-flex-wrap mb5">
|
<div className="form-flex-wrap mb5">
|
||||||
<div className="input-wrap mr5" style={{ width: '610px' }}>
|
<div className="input-wrap mr5" style={{ width: '610px' }}>
|
||||||
@ -131,7 +167,7 @@ export default function Estimate() {
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
{/* 비고 */}
|
{/* 비고 */}
|
||||||
<th>備考 /비고</th>
|
<th>{getMessage('estimate.detail.note')}</th>
|
||||||
<td colSpan={3}>
|
<td colSpan={3}>
|
||||||
<div className="input-wrap">
|
<div className="input-wrap">
|
||||||
<input type="text" className="input-light" />
|
<input type="text" className="input-light" />
|
||||||
@ -146,9 +182,9 @@ export default function Estimate() {
|
|||||||
<div className="title-wrap">
|
<div className="title-wrap">
|
||||||
<h3>{getMessage('estimate.detail.header.fileList1')}</h3>
|
<h3>{getMessage('estimate.detail.header.fileList1')}</h3>
|
||||||
<div className="d-check-box light mr5">
|
<div className="d-check-box light mr5">
|
||||||
<input type="checkbox" id="" />
|
<input type="checkbox" id="next" />
|
||||||
<label htmlFor="" style={{ color: '#101010' }}>
|
<label htmlFor="next" style={{ color: '#101010' }}>
|
||||||
後日資料提出 / 후일자료제출
|
{getMessage('estimate.detail.nextSubmit')}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -163,15 +199,26 @@ export default function Estimate() {
|
|||||||
<tr>
|
<tr>
|
||||||
<th>{getMessage('estimate.detail.header.fileList1')}</th>
|
<th>{getMessage('estimate.detail.header.fileList1')}</th>
|
||||||
<td>
|
<td>
|
||||||
<div className="drag-file-box">
|
<EstimateFileUploader {...fileUploadProps} />
|
||||||
|
{/* <div className="drag-file-box">
|
||||||
<div className="btn-area">
|
<div className="btn-area">
|
||||||
<button className="btn-origin grey">{getMessage('estimate.detail.fileList.btn')}</button>
|
<Button type="button" className="btn-origin grey" onClick={handleButtonClick}>
|
||||||
|
{getMessage('estimate.detail.fileList.btn')}
|
||||||
|
</Button>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
id="fileUpload"
|
||||||
|
name="fileUpload"
|
||||||
|
ref={fileInputRef}
|
||||||
|
onChange={onChangeFiles}
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="drag-file-area">
|
<div className="drag-file-area">
|
||||||
<p>Drag file here</p>
|
<p>Drag file here</p>
|
||||||
<ul className="file-list"></ul>
|
<ul className="file-list"></ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
@ -216,23 +263,23 @@ export default function Estimate() {
|
|||||||
<div className="estimate-wrap">
|
<div className="estimate-wrap">
|
||||||
<div className="estimate-list-wrap one">
|
<div className="estimate-list-wrap one">
|
||||||
<div className="estimate-box">
|
<div className="estimate-box">
|
||||||
<div className="estimate-tit">수량 (PCS)</div>
|
<div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.totPcs')}</div>
|
||||||
<div className="estimate-name blue">74</div>
|
<div className="estimate-name blue">74</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="estimate-box">
|
<div className="estimate-box">
|
||||||
<div className="estimate-tit">용량 (Kw)</div>
|
<div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.vol')}</div>
|
||||||
<div className="estimate-name blue">8300</div>
|
<div className="estimate-name blue">8300</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="estimate-box">
|
<div className="estimate-box">
|
||||||
<div className="estimate-tit">공급가액</div>
|
<div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.netAmt')}</div>
|
||||||
<div className="estimate-name blue">6,798,900</div>
|
<div className="estimate-name blue">6,798,900</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="estimate-box">
|
<div className="estimate-box">
|
||||||
<div className="estimate-tit">부가세 (10％)</div>
|
<div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.vat')}</div>
|
||||||
<div className="estimate-name blue">679,890</div>
|
<div className="estimate-name blue">679,890</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="estimate-box">
|
<div className="estimate-box">
|
||||||
<div className="estimate-tit">총액</div>
|
<div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.totPrice')}</div>
|
||||||
<div className="estimate-name red">7,478,790</div>
|
<div className="estimate-name red">7,478,790</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -260,9 +307,9 @@ export default function Estimate() {
|
|||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgWeight')}</th>
|
<th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgWeight')}</th>
|
||||||
<td>(모듈수량 * 수량) / 100)</td>
|
<td>{getMessage('estimate.detail.sepcialEstimateProductInfo.calcFormula1')}</td>
|
||||||
<th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgPrice')}</th>
|
<th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgPrice')}</th>
|
||||||
<td>PKG단가(W) * PKG용량(W)</td>
|
<td>{getMessage('estimate.detail.sepcialEstimateProductInfo.calcFormula2')}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
91
src/components/estimate/EstimateFileUploader.jsx
Normal file
91
src/components/estimate/EstimateFileUploader.jsx
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useContext, useRef } from 'react'
|
||||||
|
import { v4 as uuidv4 } from 'uuid'
|
||||||
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
|
import { SessionContext } from '@/app/SessionProvider'
|
||||||
|
|
||||||
|
export default function EstimateFileUploader({ uploadFiles, setUploadFiles }) {
|
||||||
|
const fileInputRef = useRef(null)
|
||||||
|
const { getMessage } = useMessage()
|
||||||
|
const { session } = useContext(SessionContext)
|
||||||
|
|
||||||
|
const handleButtonClick = (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
fileInputRef.current.click()
|
||||||
|
}
|
||||||
|
|
||||||
|
const onChangeFiles = async (e) => {
|
||||||
|
// const formData = new FormData()
|
||||||
|
// formData.append('file', e.target.files[0])
|
||||||
|
// formData.append('objectNo', objectNo) // 받아와야 하는 값
|
||||||
|
// formData.append('planNo', planNo) // 받아와야 하는 값
|
||||||
|
// formData.append('category', category) // 받아와야 하는 값
|
||||||
|
// formData.append('userId', session.userId)
|
||||||
|
|
||||||
|
// await promisePost({ url: '/api/file/fileUpload', data: formData }).then((res) => {
|
||||||
|
// if (res.data > 0) setUploadFiles([...files, { name: e.target.files[0].name, id: uuidv4() }])
|
||||||
|
// })
|
||||||
|
setUploadFiles([...uploadFiles, { data: e.target.files[0], id: uuidv4() }])
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteFile = (id) => {
|
||||||
|
setUploadFiles(uploadFiles.filter((file) => file.id !== id))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDrop = (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
|
const fileList = []
|
||||||
|
Array.from(e.dataTransfer.files).forEach((file) => {
|
||||||
|
fileList.push({ data: file, id: uuidv4() })
|
||||||
|
})
|
||||||
|
setUploadFiles([...uploadFiles, ...fileList])
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDragOver = (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDragEnd = (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDragLeave = (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="drag-file-box">
|
||||||
|
<div className="btn-area">
|
||||||
|
<label className="file-upload" htmlFor="img" onClick={handleButtonClick}>
|
||||||
|
{getMessage('estimate.detail.fileList.btn')}
|
||||||
|
</label>
|
||||||
|
<input type="file" name="file" id="img" ref={fileInputRef} style={{ display: 'none' }} onChange={(e) => onChangeFiles(e)} />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="drag-file-area"
|
||||||
|
draggable
|
||||||
|
onDrop={(e) => handleDrop(e)}
|
||||||
|
onDragOver={(e) => handleDragOver(e)}
|
||||||
|
onDragEnd={(e) => handleDragEnd(e)}
|
||||||
|
onDragLeave={(e) => handleDragLeave(e)}
|
||||||
|
>
|
||||||
|
<p>Drag file here</p>
|
||||||
|
<ul className="file-list">
|
||||||
|
{uploadFiles.length > 0 &&
|
||||||
|
uploadFiles.map((file) => (
|
||||||
|
<li className="file-item" key={file.id}>
|
||||||
|
<span>
|
||||||
|
{file.data.name} <button className="delete" onClick={() => deleteFile(file.id)}></button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -39,12 +39,6 @@ export const QLine = fabric.util.createClass(fabric.Line, {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
toObject: function (propertiesToInclude) {
|
|
||||||
return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
|
|
||||||
type: this.type,
|
|
||||||
text: this.text,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
init: function () {
|
init: function () {
|
||||||
this.addLengthText()
|
this.addLengthText()
|
||||||
|
|
||||||
|
|||||||
@ -101,17 +101,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
|||||||
|
|
||||||
this.shape = shape
|
this.shape = shape
|
||||||
},
|
},
|
||||||
|
|
||||||
toObject: function (propertiesToInclude) {
|
|
||||||
return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
|
|
||||||
id: this.id,
|
|
||||||
type: this.type,
|
|
||||||
text: this.text,
|
|
||||||
hips: this.hips,
|
|
||||||
ridges: this.ridges,
|
|
||||||
connectRidges: this.connectRidges,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
init: function () {
|
init: function () {
|
||||||
this.addLengthText()
|
this.addLengthText()
|
||||||
|
|
||||||
|
|||||||
@ -2,14 +2,13 @@
|
|||||||
|
|
||||||
import { useEffect, useRef } from 'react'
|
import { useEffect, useRef } from 'react'
|
||||||
|
|
||||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
import { useRecoilValue } from 'recoil'
|
||||||
|
|
||||||
import { useCanvas } from '@/hooks/useCanvas'
|
import { useCanvas } from '@/hooks/useCanvas'
|
||||||
import { useEvent } from '@/hooks/useEvent'
|
import { useEvent } from '@/hooks/useEvent'
|
||||||
import { usePlan } from '@/hooks/usePlan'
|
import { usePlan } from '@/hooks/usePlan'
|
||||||
import { useContextMenu } from '@/hooks/useContextMenu'
|
import { useContextMenu } from '@/hooks/useContextMenu'
|
||||||
import { currentMenuState, currentObjectState, modifiedPlanFlagState } from '@/store/canvasAtom'
|
import { currentMenuState } from '@/store/canvasAtom'
|
||||||
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
|
|
||||||
import QContextMenu from '@/components/common/context-menu/QContextMenu'
|
import QContextMenu from '@/components/common/context-menu/QContextMenu'
|
||||||
import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
|
import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
|
||||||
import { MENU } from '@/common/common'
|
import { MENU } from '@/common/common'
|
||||||
@ -17,14 +16,11 @@ import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/Panel
|
|||||||
|
|
||||||
export default function CanvasFrame() {
|
export default function CanvasFrame() {
|
||||||
const canvasRef = useRef(null)
|
const canvasRef = useRef(null)
|
||||||
const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState)
|
|
||||||
const { canvas } = useCanvas('canvas')
|
const { canvas } = useCanvas('canvas')
|
||||||
const { handleZoomClear } = useCanvasEvent()
|
|
||||||
const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()
|
const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()
|
||||||
const currentObject = useRecoilValue(currentObjectState)
|
|
||||||
const currentMenu = useRecoilValue(currentMenuState)
|
const currentMenu = useRecoilValue(currentMenuState)
|
||||||
const { contextMenu, handleClick, handleKeyup } = useContextMenu()
|
const { contextMenu, handleClick, handleKeyup } = useContextMenu()
|
||||||
const { selectedPlan, checkCanvasObjectEvent, checkUnsavedCanvasPlan, resetModifiedPlans } = usePlan()
|
const { selectedPlan, modifiedPlanFlag, checkCanvasObjectEvent, resetModifiedPlans } = usePlan()
|
||||||
useEvent()
|
useEvent()
|
||||||
|
|
||||||
const loadCanvas = () => {
|
const loadCanvas = () => {
|
||||||
@ -46,6 +42,12 @@ export default function CanvasFrame() {
|
|||||||
}
|
}
|
||||||
}, [modifiedPlanFlag])
|
}, [modifiedPlanFlag])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return () => {
|
||||||
|
resetModifiedPlans()
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadCanvas()
|
loadCanvas()
|
||||||
resetModifiedPlans()
|
resetModifiedPlans()
|
||||||
@ -56,7 +58,7 @@ export default function CanvasFrame() {
|
|||||||
<canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>
|
<canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>
|
||||||
|
|
||||||
<QContextMenu contextRef={canvasRef} canvasProps={canvas} handleKeyup={handleKeyup}>
|
<QContextMenu contextRef={canvasRef} canvasProps={canvas} handleKeyup={handleKeyup}>
|
||||||
{contextMenu.map((menus, index) => (
|
{contextMenu?.map((menus, index) => (
|
||||||
<ul key={index}>
|
<ul key={index}>
|
||||||
{menus.map((menu) => (
|
{menus.map((menu) => (
|
||||||
<li key={menu.id} onClick={(e) => handleClick(e, menu)}>
|
<li key={menu.id} onClick={(e) => handleClick(e, menu)}>
|
||||||
|
|||||||
@ -1,12 +1,11 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { useContext, useEffect, useState } from 'react'
|
import { useContext, useEffect, useState } from 'react'
|
||||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
import { useRecoilValue } from 'recoil'
|
||||||
import CanvasFrame from './CanvasFrame'
|
import CanvasFrame from './CanvasFrame'
|
||||||
import { useMessage } from '@/hooks/useMessage'
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
import { useSwal } from '@/hooks/useSwal'
|
import { useSwal } from '@/hooks/useSwal'
|
||||||
import { usePlan } from '@/hooks/usePlan'
|
import { usePlan } from '@/hooks/usePlan'
|
||||||
import { modifiedPlansState } from '@/store/canvasAtom'
|
|
||||||
import { globalLocaleStore } from '@/store/localeAtom'
|
import { globalLocaleStore } from '@/store/localeAtom'
|
||||||
import { SessionContext } from '@/app/SessionProvider'
|
import { SessionContext } from '@/app/SessionProvider'
|
||||||
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
|
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
|
||||||
@ -16,12 +15,11 @@ export default function CanvasLayout({ children }) {
|
|||||||
const { menuNumber } = useCanvasMenu()
|
const { menuNumber } = useCanvasMenu()
|
||||||
const { session } = useContext(SessionContext)
|
const { session } = useContext(SessionContext)
|
||||||
const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
|
const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
|
||||||
const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan
|
|
||||||
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
||||||
|
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const { swalFire } = useSwal()
|
const { swalFire } = useSwal()
|
||||||
const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
|
const { plans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadCanvasPlanData(session.userId, objectNo)
|
loadCanvasPlanData(session.userId, objectNo)
|
||||||
|
|||||||
@ -12,14 +12,7 @@ import { useMessage } from '@/hooks/useMessage'
|
|||||||
import { usePlan } from '@/hooks/usePlan'
|
import { usePlan } from '@/hooks/usePlan'
|
||||||
import { useSwal } from '@/hooks/useSwal'
|
import { useSwal } from '@/hooks/useSwal'
|
||||||
import { useEvent } from '@/hooks/useEvent'
|
import { useEvent } from '@/hooks/useEvent'
|
||||||
import {
|
import { canvasSettingState, canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
|
||||||
canvasSettingState,
|
|
||||||
canvasState,
|
|
||||||
canvasZoomState,
|
|
||||||
currentCanvasPlanState,
|
|
||||||
currentMenuState,
|
|
||||||
verticalHorizontalModeState,
|
|
||||||
} from '@/store/canvasAtom'
|
|
||||||
import { sessionStore } from '@/store/commonAtom'
|
import { sessionStore } from '@/store/commonAtom'
|
||||||
import { outerLinePointsState } from '@/store/outerLineAtom'
|
import { outerLinePointsState } from '@/store/outerLineAtom'
|
||||||
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
|
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
|
||||||
@ -33,6 +26,8 @@ import { usePopup } from '@/hooks/usePopup'
|
|||||||
import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
|
import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
|
||||||
import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
|
import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
|
||||||
import { useCommonUtils } from '@/hooks/common/useCommonUtils'
|
import { useCommonUtils } from '@/hooks/common/useCommonUtils'
|
||||||
|
|
||||||
|
import { commonUtilsState } from '@/store/commonUtilsAtom'
|
||||||
import { menusState, menuTypeState } from '@/store/menuAtom'
|
import { menusState, menuTypeState } from '@/store/menuAtom'
|
||||||
import useMenu from '@/hooks/common/useMenu'
|
import useMenu from '@/hooks/common/useMenu'
|
||||||
import { MENU } from '@/common/common'
|
import { MENU } from '@/common/common'
|
||||||
@ -51,7 +46,6 @@ export default function CanvasMenu(props) {
|
|||||||
const setPlacementPoints = useSetRecoilState(placementShapeDrawingPointsState)
|
const setPlacementPoints = useSetRecoilState(placementShapeDrawingPointsState)
|
||||||
const canvasSetting = useRecoilValue(canvasSettingState)
|
const canvasSetting = useRecoilValue(canvasSettingState)
|
||||||
const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
|
const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
|
||||||
const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
|
|
||||||
const sessionState = useRecoilValue(sessionStore)
|
const sessionState = useRecoilValue(sessionStore)
|
||||||
const globalLocale = useRecoilValue(globalLocaleStore)
|
const globalLocale = useRecoilValue(globalLocaleStore)
|
||||||
const canvas = useRecoilValue(canvasState)
|
const canvas = useRecoilValue(canvasState)
|
||||||
@ -59,20 +53,11 @@ export default function CanvasMenu(props) {
|
|||||||
const { handleMenu } = useMenu()
|
const { handleMenu } = useMenu()
|
||||||
|
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const { saveCanvas } = usePlan()
|
const { currentCanvasPlan, saveCanvas } = usePlan()
|
||||||
const { swalFire } = useSwal()
|
const { swalFire } = useSwal()
|
||||||
const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent()
|
const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent()
|
||||||
|
const commonUtils = useRecoilValue(commonUtilsState)
|
||||||
const [commonFunctionState, setCommonFunctionState] = useState({
|
const { commonFunctions } = useCommonUtils()
|
||||||
text: false,
|
|
||||||
dimension: false,
|
|
||||||
distance: false,
|
|
||||||
})
|
|
||||||
const { commonFunctions } = useCommonUtils({
|
|
||||||
commonFunctionState,
|
|
||||||
setCommonFunctionState,
|
|
||||||
})
|
|
||||||
|
|
||||||
const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
|
const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
|
||||||
|
|
||||||
const onClickNav = (menu) => {
|
const onClickNav = (menu) => {
|
||||||
@ -199,9 +184,9 @@ export default function CanvasMenu(props) {
|
|||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
<div className="btn-from">
|
<div className="btn-from">
|
||||||
<button className={`btn01 ${commonFunctionState.text ? 'active' : ''}`} onClick={() => commonFunctions('text')}></button>
|
<button className={`btn01 ${commonUtils.text ? 'active' : ''}`} onClick={() => commonFunctions('text')}></button>
|
||||||
<button className={`btn02 ${commonFunctionState.dimension ? 'active' : ''} `} onClick={() => commonFunctions('dimension')}></button>
|
<button className={`btn02 ${commonUtils.dimension ? 'active' : ''} `} onClick={() => commonFunctions('dimension')}></button>
|
||||||
<button className={`btn03 ${commonFunctionState.distance ? 'active' : ''} `} onClick={() => commonFunctions('distance')}></button>
|
<button className={`btn03 ${commonUtils.distance ? 'active' : ''} `} onClick={() => commonFunctions('distance')}></button>
|
||||||
</div>
|
</div>
|
||||||
<div className="select-box">
|
<div className="select-box">
|
||||||
<QSelectBox title={'瓦53A'} option={SelectOption} />
|
<QSelectBox title={'瓦53A'} option={SelectOption} />
|
||||||
|
|||||||
@ -26,10 +26,6 @@ export default function FloorPlan({ children }) {
|
|||||||
fetchSettings()
|
fetchSettings()
|
||||||
}, [objectNo])
|
}, [objectNo])
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setMenuNumber(1)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="canvas-wrap">
|
<div className="canvas-wrap">
|
||||||
|
|||||||
@ -15,7 +15,11 @@ export default function MenuDepth01() {
|
|||||||
const subMenus = useRecoilValue(subMenusState)
|
const subMenus = useRecoilValue(subMenusState)
|
||||||
|
|
||||||
const onClickMenu = ({ id, menu }) => {
|
const onClickMenu = ({ id, menu }) => {
|
||||||
setCurrentMenu(menu)
|
if (menu === currentMenu) {
|
||||||
|
handleMenu(type)
|
||||||
|
} else {
|
||||||
|
setCurrentMenu(menu)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@ -3,50 +3,79 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|||||||
import { usePopup } from '@/hooks/usePopup'
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
import { useRecoilValue } from 'recoil'
|
import { useRecoilValue } from 'recoil'
|
||||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
export default function AuxiliaryCopy(props) {
|
export default function AuxiliaryCopy(props) {
|
||||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||||
const { id, pos = contextPopupPosition } = props
|
const { id, pos = contextPopupPosition } = props
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const { closePopup } = usePopup()
|
const { closePopup } = usePopup()
|
||||||
|
const [arrow1, setArrow1] = useState(null)
|
||||||
|
const [arrow2, setArrow2] = useState(null)
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={pos}>
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
<div className={`modal-pop-wrap xm`}>
|
<div className={`modal-pop-wrap xm mount`}>
|
||||||
<div className="modal-head">
|
<div className="modal-head">
|
||||||
<h1 className="title">補助線のコピー </h1>
|
<h1 className="title">{getMessage('modal.auxiliary.copy')} </h1>
|
||||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
닫기
|
닫기
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
<div className="grid-option-tit">コピーする方向を入力してください</div>
|
<div className="grid-option-tit">{getMessage('modal.auxiliary.copy.info')}</div>
|
||||||
<div className="grid-option-wrap">
|
<div className="grid-option-wrap">
|
||||||
<div className="grid-option-box">
|
<div className="grid-option-box">
|
||||||
<div className="move-form">
|
<div className="move-form">
|
||||||
<p className="mb5">長さ</p>
|
<p className="mb5">{getMessage('length')}</p>
|
||||||
<div className="input-move-wrap mb5">
|
<div className="input-move-wrap mb5">
|
||||||
<div className="input-move">
|
<div className="input-move">
|
||||||
<input type="text" className="input-origin" defaultValue={910} />
|
<input type="text" className="input-origin" defaultValue={910} />
|
||||||
</div>
|
</div>
|
||||||
<span>mm</span>
|
<span>mm</span>
|
||||||
|
<div className="direction-move-wrap">
|
||||||
|
<button
|
||||||
|
className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setArrow1('↑')
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setArrow1('↓')
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="input-move-wrap">
|
<div className="input-move-wrap">
|
||||||
<div className="input-move">
|
<div className="input-move">
|
||||||
<input type="text" className="input-origin" defaultValue={910} />
|
<input type="text" className="input-origin" defaultValue={910} />
|
||||||
</div>
|
</div>
|
||||||
<span>mm</span>
|
<span>mm</span>
|
||||||
|
<div className="direction-move-wrap">
|
||||||
|
<button
|
||||||
|
className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setArrow2('←')
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setArrow2('→')
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="direction-move-wrap">
|
|
||||||
<button className="direction up"></button>
|
|
||||||
<button className="direction down act"></button>
|
|
||||||
<button className="direction left"></button>
|
|
||||||
<button className="direction right"></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid-btn-wrap">
|
<div className="grid-btn-wrap">
|
||||||
<button className="btn-frame modal act">保存</button>
|
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -5,50 +5,79 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|||||||
import { useRecoilValue } from 'recoil'
|
import { useRecoilValue } from 'recoil'
|
||||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||||
import { usePopup } from '@/hooks/usePopup'
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
export default function AuxiliaryMove(props) {
|
export default function AuxiliaryMove(props) {
|
||||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||||
const { id, pos = contextPopupPosition } = props
|
const { id, pos = contextPopupPosition } = props
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const { closePopup } = usePopup()
|
const { closePopup } = usePopup()
|
||||||
|
const [arrow1, setArrow1] = useState(null)
|
||||||
|
const [arrow2, setArrow2] = useState(null)
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={pos}>
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
<div className={`modal-pop-wrap xm`}>
|
<div className={`modal-pop-wrap xm mount`}>
|
||||||
<div className="modal-head">
|
<div className="modal-head">
|
||||||
<h1 className="title">補助線の移動 </h1>
|
<h1 className="title">{getMessage('modal.auxiliary.move')}</h1>
|
||||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
닫기
|
닫기
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
<div className="grid-option-tit">移動する方向を入力してください</div>
|
<div className="grid-option-tit">{getMessage('modal.auxiliary.move.info')}</div>
|
||||||
<div className="grid-option-wrap">
|
<div className="grid-option-wrap">
|
||||||
<div className="grid-option-box">
|
<div className="grid-option-box">
|
||||||
<div className="move-form">
|
<div className="move-form">
|
||||||
<p className="mb5">長さ</p>
|
<p className="mb5">{getMessage('length')}</p>
|
||||||
<div className="input-move-wrap mb5">
|
<div className="input-move-wrap mb5">
|
||||||
<div className="input-move">
|
<div className="input-move">
|
||||||
<input type="text" className="input-origin" defaultValue={910} />
|
<input type="text" className="input-origin" defaultValue={910} />
|
||||||
</div>
|
</div>
|
||||||
<span>mm</span>
|
<span>mm</span>
|
||||||
|
<div className="direction-move-wrap">
|
||||||
|
<button
|
||||||
|
className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setArrow1('↑')
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setArrow1('↓')
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="input-move-wrap">
|
<div className="input-move-wrap">
|
||||||
<div className="input-move">
|
<div className="input-move">
|
||||||
<input type="text" className="input-origin" defaultValue={910} />
|
<input type="text" className="input-origin" defaultValue={910} />
|
||||||
</div>
|
</div>
|
||||||
<span>mm</span>
|
<span>mm</span>
|
||||||
|
<div className="direction-move-wrap">
|
||||||
|
<button
|
||||||
|
className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setArrow2('←')
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setArrow2('→')
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="direction-move-wrap">
|
|
||||||
<button className="direction up"></button>
|
|
||||||
<button className="direction down act"></button>
|
|
||||||
<button className="direction left"></button>
|
|
||||||
<button className="direction right"></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid-btn-wrap">
|
<div className="grid-btn-wrap">
|
||||||
<button className="btn-frame modal act">保存</button>
|
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -11,9 +11,9 @@ export default function AuxiliarySize(props) {
|
|||||||
const { closePopup } = usePopup()
|
const { closePopup } = usePopup()
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={pos}>
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
<div className={`modal-pop-wrap xm`}>
|
<div className={`modal-pop-wrap xm mount`}>
|
||||||
<div className="modal-head">
|
<div className="modal-head">
|
||||||
<h1 className="title">補助線サイズ変更 </h1>
|
<h1 className="title">{getMessage('modal.auxiliary.size.edit')} </h1>
|
||||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
닫기
|
닫기
|
||||||
</button>
|
</button>
|
||||||
@ -22,7 +22,7 @@ export default function AuxiliarySize(props) {
|
|||||||
<div className="discrimination-box mb10">
|
<div className="discrimination-box mb10">
|
||||||
<div className="d-check-radio pop mb10">
|
<div className="d-check-radio pop mb10">
|
||||||
<input type="radio" name="radio01" id="ra01" />
|
<input type="radio" name="radio01" id="ra01" />
|
||||||
<label htmlFor="ra01">1支店</label>
|
<label htmlFor="ra01">1{getMessage('modal.auxiliary.size.edit.point')}</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="outline-form mb15">
|
<div className="outline-form mb15">
|
||||||
<div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
|
<div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
|
||||||
@ -31,7 +31,7 @@ export default function AuxiliarySize(props) {
|
|||||||
<span className="thin">mm</span>
|
<span className="thin">mm</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="outline-form">
|
<div className="outline-form">
|
||||||
<span style={{ width: 'auto' }}>長さ</span>
|
<span style={{ width: 'auto' }}>{getMessage('length')}</span>
|
||||||
<div className="input-grid mr5">
|
<div className="input-grid mr5">
|
||||||
<input type="text" className="input-origin block" defaultValue={100} />
|
<input type="text" className="input-origin block" defaultValue={100} />
|
||||||
</div>
|
</div>
|
||||||
@ -41,7 +41,7 @@ export default function AuxiliarySize(props) {
|
|||||||
<div className="discrimination-box ">
|
<div className="discrimination-box ">
|
||||||
<div className="d-check-radio pop mb10">
|
<div className="d-check-radio pop mb10">
|
||||||
<input type="radio" name="radio01" id="ra02" />
|
<input type="radio" name="radio01" id="ra02" />
|
||||||
<label htmlFor="ra02">2支店</label>
|
<label htmlFor="ra02">2{getMessage('modal.auxiliary.size.edit.point')}</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="outline-form mb15">
|
<div className="outline-form mb15">
|
||||||
<div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
|
<div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
|
||||||
@ -50,7 +50,7 @@ export default function AuxiliarySize(props) {
|
|||||||
<span className="thin">mm</span>
|
<span className="thin">mm</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="outline-form">
|
<div className="outline-form">
|
||||||
<span style={{ width: 'auto' }}>長さ</span>
|
<span style={{ width: 'auto' }}>{getMessage('length')}</span>
|
||||||
<div className="input-grid mr5">
|
<div className="input-grid mr5">
|
||||||
<input type="text" className="input-origin block" defaultValue={100} />
|
<input type="text" className="input-origin block" defaultValue={100} />
|
||||||
</div>
|
</div>
|
||||||
@ -58,7 +58,7 @@ export default function AuxiliarySize(props) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid-btn-wrap">
|
<div className="grid-btn-wrap">
|
||||||
<button className="btn-frame modal act">保存</button>
|
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,73 +1,138 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react'
|
||||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||||
import { usePopup } from '@/hooks/usePopup'
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
import { useMessage } from '@/hooks/useMessage'
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||||
import QSelectBox from '@/components/common/select/QSelectBox'
|
import QSelectBox from '@/components/common/select/QSelectBox'
|
||||||
import { pitchTextSelector } from '@/store/canvasAtom'
|
import { canvasState, pitchTextSelector } from '@/store/canvasAtom'
|
||||||
|
import { defaultSlope } from '@/store/commonAtom'
|
||||||
|
|
||||||
export default function DimensionLineSetting(props) {
|
export default function DimensionLineSetting(props) {
|
||||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||||
const { id, setIsShow, pos = contextPopupPosition } = props
|
let { id, setIsShow, pos = contextPopupPosition } = props
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const { closePopup } = usePopup()
|
const { closePopup } = usePopup()
|
||||||
|
const canvas = useRecoilValue(canvasState)
|
||||||
const pitchText = useRecoilState(pitchTextSelector)
|
const pitchText = useRecoilState(pitchTextSelector)
|
||||||
const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
|
const SelectOption01 = defaultSlope
|
||||||
|
const [basicLength, setBasicLength] = useState(0)
|
||||||
|
const [slopeAble, setSlopeAble] = useState(false)
|
||||||
|
const changeSlopeRef = useRef()
|
||||||
|
|
||||||
|
let slopeInput1, slopeInput2
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (canvas) {
|
||||||
|
const dimensionObject = canvas.getActiveObject()
|
||||||
|
const id = dimensionObject.groupId
|
||||||
|
const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
|
||||||
|
setBasicLength(parseInt(textObj.text))
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
setBasicLength(0)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleChangeLength = () => {
|
||||||
|
const changeLength = changeSlopeRef.current
|
||||||
|
|
||||||
|
if (canvas) {
|
||||||
|
const dimensionObject = canvas.getActiveObject()
|
||||||
|
const id = dimensionObject.groupId
|
||||||
|
const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
|
||||||
|
let resultText = changeLength.value > 0 ? changeLength.value : '0'
|
||||||
|
|
||||||
|
if (slopeAble) {
|
||||||
|
if (slopeInput1) {
|
||||||
|
resultText = calculateLength(basicLength, slopeInput1.angleValue).toFixed(0)
|
||||||
|
|
||||||
|
if (slopeInput2) {
|
||||||
|
const angle = slopeInput1 + slopeInput2
|
||||||
|
const length = calculateLength(basicLength, angle)
|
||||||
|
resultText = length.toFixed(2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
textObj.set({
|
||||||
|
text: String(resultText),
|
||||||
|
})
|
||||||
|
|
||||||
|
canvas.renderAll()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSelectbox = (option, params) => {
|
||||||
|
const index = params.index
|
||||||
|
if (index === 1) slopeInput1 = option
|
||||||
|
if (index === 2) slopeInput2 = option
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateLength(originalLength, angle) {
|
||||||
|
const angleInRadians = angle * (Math.PI / 180) // 각도를 라디안으로 변환
|
||||||
|
const result = Math.sqrt(Math.pow(originalLength * Math.tan(angleInRadians), 2) + Math.pow(originalLength, 2))
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={pos}>
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
<div className={`modal-pop-wrap xm`}>
|
<div className={`modal-pop-wrap xm mount`}>
|
||||||
<div className="modal-head">
|
<div className="modal-head">
|
||||||
<h1 className="title">表示の変更 </h1>
|
<h1 className="title">{getMessage('contextmenu.display.edit')} </h1>
|
||||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
닫기
|
닫기
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
<div className="guide">寸法線に表示する数値を入力してください</div>
|
<div className="guide">{getMessage('modal.display.edit.info')}</div>
|
||||||
<div className="mb-box">
|
<div className="mb-box">
|
||||||
<div className="slope-wrap">
|
<div className="slope-wrap">
|
||||||
<div className="outline-form mb15">
|
<div className="outline-form mb15">
|
||||||
<span className="mr10">既存の長さ</span>
|
<span className="mr10">{getMessage('modal.display.edit.before.length')}</span>
|
||||||
<div className="input-grid mr5">
|
<div className="input-grid mr5">
|
||||||
<input type="text" className="input-origin block" defaultValue={5933} readOnly />
|
<input type="text" className="input-origin block" value={basicLength} readOnly />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-box">
|
<div className="mb-box">
|
||||||
<div className="outline-form">
|
<div className="outline-form">
|
||||||
<span className="mr10">変更の長さ</span>
|
<span className="mr10">{getMessage('modal.display.edit.after.length')}</span>
|
||||||
<div className="input-grid mr5">
|
<div className="input-grid mr5">
|
||||||
<input type="text" className="input-origin block" defaultValue={0} />
|
<input type="text" className="input-origin block" ref={changeSlopeRef} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-check-box pop">
|
<div className="d-check-box pop">
|
||||||
<input type="checkbox" id="ch99" />
|
<input type="checkbox" id="ch99" onChange={() => setSlopeAble(!slopeAble)} />
|
||||||
<label htmlFor="ch99">コーナー・ゴールの場合</label>
|
<label htmlFor="ch99">{getMessage('modal.display.edit.input.slope')}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="slope-wrap">
|
<div className="slope-wrap">
|
||||||
<div className="warning">傾斜を着せてください。</div>
|
<div className="warning">{getMessage('modal.display.edit.input.slope')}</div>
|
||||||
<div className="display-change-wrap">
|
<div className="display-change-wrap">
|
||||||
<div className="outline-form mb15">
|
<div className="outline-form mb15">
|
||||||
<span className="mr10">傾斜</span>
|
<span className="mr10">{getMessage('slope')}</span>
|
||||||
<div className="grid-select mr10">
|
<div className="grid-select mr10">
|
||||||
<QSelectBox title={'0'} option={SelectOption01} />
|
<QSelectBox title={''} options={SelectOption01} disabled={!slopeAble} params={{ index: 1 }} onChange={handleSelectbox} />
|
||||||
</div>
|
</div>
|
||||||
<span className="thin">{pitchText}</span>
|
<span className="thin">{pitchText}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="outline-form">
|
<div className="outline-form">
|
||||||
<span className="mr10">傾斜</span>
|
<span className="mr10">{getMessage('slope')}</span>
|
||||||
<div className="grid-select mr10">
|
<div className="grid-select mr10">
|
||||||
<QSelectBox title={'0'} option={SelectOption01} />
|
<QSelectBox title={''} options={SelectOption01} disabled={!slopeAble} params={{ index: 2 }} onChange={handleSelectbox} />
|
||||||
</div>
|
</div>
|
||||||
<span className="thin">{pitchText}</span>
|
<span className="thin">{pitchText}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="warning">傾き設定されている場合、入力した数値に傾き計算をした数値が表示されます。</div>
|
<div className="warning">{getMessage('modal.display.edit.input.slope.info')}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid-btn-wrap">
|
<div className="grid-btn-wrap">
|
||||||
<button className="btn-frame modal act">保存</button>
|
<button className="btn-frame modal act" onClick={handleChangeLength}>
|
||||||
|
{getMessage('modal.common.save')}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,20 +1,25 @@
|
|||||||
import WithDraggable from '@/components/common/draggable/withDraggable'
|
import { useRecoilValue } from 'recoil'
|
||||||
import { useMessage } from '@/hooks/useMessage'
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
import { usePopup } from '@/hooks/usePopup'
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
import { useRecoilValue } from 'recoil'
|
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||||
|
|
||||||
export default function Distance(props) {
|
export default function Distance(props) {
|
||||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||||
const { id, pos = contextPopupPosition, distance } = props
|
const { id, pos = contextPopupPosition, distance, deleteDistance } = props
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const { closePopup } = usePopup()
|
const { closePopup } = usePopup()
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
deleteDistance()
|
||||||
|
closePopup(id)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={pos}>
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
<div className={`modal-pop-wrap xxxm`}>
|
<div className={`modal-pop-wrap xxxm`}>
|
||||||
<div className="modal-head">
|
<div className="modal-head">
|
||||||
<h1 className="title">距離測定 </h1>
|
<h1 className="title">{getMessage('modal.distance')} </h1>
|
||||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
닫기
|
닫기
|
||||||
</button>
|
</button>
|
||||||
@ -23,7 +28,7 @@ export default function Distance(props) {
|
|||||||
<div className="slope-wrap">
|
<div className="slope-wrap">
|
||||||
<div className="eaves-keraba-table">
|
<div className="eaves-keraba-table">
|
||||||
<div className="eaves-keraba-item">
|
<div className="eaves-keraba-item">
|
||||||
<div className="eaves-keraba-th">2点間距離</div>
|
<div className="eaves-keraba-th">{getMessage('modal.distance.dual.point')}</div>
|
||||||
<div className="eaves-keraba-td">
|
<div className="eaves-keraba-td">
|
||||||
<div className="outline-form">
|
<div className="outline-form">
|
||||||
<div className="input-grid mr5" style={{ width: '98px' }}>
|
<div className="input-grid mr5" style={{ width: '98px' }}>
|
||||||
@ -34,7 +39,7 @@ export default function Distance(props) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="eaves-keraba-item">
|
<div className="eaves-keraba-item">
|
||||||
<div className="eaves-keraba-th">水平距離</div>
|
<div className="eaves-keraba-th">{getMessage('modal.distance.horizon')}</div>
|
||||||
<div className="eaves-keraba-td">
|
<div className="eaves-keraba-td">
|
||||||
<div className="outline-form">
|
<div className="outline-form">
|
||||||
<div className="input-grid mr5" style={{ width: '98px' }}>
|
<div className="input-grid mr5" style={{ width: '98px' }}>
|
||||||
@ -45,7 +50,7 @@ export default function Distance(props) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="eaves-keraba-item">
|
<div className="eaves-keraba-item">
|
||||||
<div className="eaves-keraba-th">垂直距離</div>
|
<div className="eaves-keraba-th">{getMessage('modal.distance.vertical')}</div>
|
||||||
<div className="eaves-keraba-td">
|
<div className="eaves-keraba-td">
|
||||||
<div className="outline-form">
|
<div className="outline-form">
|
||||||
<div className="input-grid mr5" style={{ width: '98px' }}>
|
<div className="input-grid mr5" style={{ width: '98px' }}>
|
||||||
@ -58,7 +63,7 @@ export default function Distance(props) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid-btn-wrap">
|
<div className="grid-btn-wrap">
|
||||||
<button className="btn-frame modal act">確認</button>
|
<button className="btn-frame modal act" onClick={handleClose}>{getMessage('common.require')}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -60,7 +60,7 @@ export default function FlowDirectionSetting(props) {
|
|||||||
}, [compasDeg])
|
}, [compasDeg])
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={pos}>
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
<div className={`modal-pop-wrap lx`}>
|
<div className={`modal-pop-wrap lx mount`}>
|
||||||
<div className="modal-head">
|
<div className="modal-head">
|
||||||
<h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
|
<h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
|
||||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
|
|||||||
@ -71,7 +71,7 @@ export default function DotLineGrid(props) {
|
|||||||
// 데이터를 최초 한 번만 조회
|
// 데이터를 최초 한 번만 조회
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('DotLineGrid useEffect 실행')
|
console.log('DotLineGrid useEffect 실행')
|
||||||
// fetchGridSettings()
|
fetchGridSettings()
|
||||||
}, [objectNo])
|
}, [objectNo])
|
||||||
|
|
||||||
const HandleClickClose = () => {
|
const HandleClickClose = () => {
|
||||||
@ -100,9 +100,9 @@ export default function DotLineGrid(props) {
|
|||||||
const patternData = {
|
const patternData = {
|
||||||
INTERVAL: {
|
INTERVAL: {
|
||||||
type: res.gridType,
|
type: res.gridType,
|
||||||
horizontalInterval: res.gridHorizon,
|
horizontalInterval: res.gridHorizon * 10,
|
||||||
verticalInterval: res.gridVertical,
|
verticalInterval: res.gridVertical * 10,
|
||||||
ratioInterval: res.gridRatio,
|
ratioInterval: res.gridRatio * 10,
|
||||||
},
|
},
|
||||||
dimension: res.gridDimen,
|
dimension: res.gridDimen,
|
||||||
DOT: res.dotGridDisplay,
|
DOT: res.dotGridDisplay,
|
||||||
|
|||||||
@ -34,20 +34,22 @@ export default function GridMove(props) {
|
|||||||
<input type="text" className="input-origin" defaultValue={910} />
|
<input type="text" className="input-origin" defaultValue={910} />
|
||||||
</div>
|
</div>
|
||||||
<span>mm</span>
|
<span>mm</span>
|
||||||
|
<div className="direction-move-wrap">
|
||||||
|
<button className="direction up"></button>
|
||||||
|
<button className="direction down act"></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="input-move-wrap">
|
<div className="input-move-wrap">
|
||||||
<div className="input-move">
|
<div className="input-move">
|
||||||
<input type="text" className="input-origin" defaultValue={910} />
|
<input type="text" className="input-origin" defaultValue={910} />
|
||||||
</div>
|
</div>
|
||||||
<span>mm</span>
|
<span>mm</span>
|
||||||
|
<div className="direction-move-wrap">
|
||||||
|
<button className="direction left"></button>
|
||||||
|
<button className="direction right"></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="direction-move-wrap">
|
|
||||||
<button className="direction up"></button>
|
|
||||||
<button className="direction down act"></button>
|
|
||||||
<button className="direction left"></button>
|
|
||||||
<button className="direction right"></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid-btn-wrap">
|
<div className="grid-btn-wrap">
|
||||||
|
|||||||
@ -14,7 +14,7 @@ export default function ImageSizeSetting(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={pos}>
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
<div className={`modal-pop-wrap xxxm`}>
|
<div className={`modal-pop-wrap xxxm mount`}>
|
||||||
<div className="modal-head">
|
<div className="modal-head">
|
||||||
<h1 className="title">{getMessage('modal.image.size.setting')} </h1>
|
<h1 className="title">{getMessage('modal.image.size.setting')} </h1>
|
||||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
|
|||||||
@ -19,6 +19,7 @@ export default function Angle({ props }) {
|
|||||||
className="input-origin block"
|
className="input-origin block"
|
||||||
value={angle1}
|
value={angle1}
|
||||||
ref={angle1Ref}
|
ref={angle1Ref}
|
||||||
|
onFocus={(e) => (angle1Ref.current.value = '')}
|
||||||
onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
|
onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
|
||||||
placeholder="45"
|
placeholder="45"
|
||||||
/>
|
/>
|
||||||
@ -38,6 +39,7 @@ export default function Angle({ props }) {
|
|||||||
className="input-origin block"
|
className="input-origin block"
|
||||||
value={length1}
|
value={length1}
|
||||||
ref={length1Ref}
|
ref={length1Ref}
|
||||||
|
onFocus={(e) => (length1Ref.current.value = '')}
|
||||||
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
||||||
placeholder="3000"
|
placeholder="3000"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -35,6 +35,7 @@ export default function Diagonal({ props }) {
|
|||||||
className="input-origin block"
|
className="input-origin block"
|
||||||
value={outerLineDiagonalLength}
|
value={outerLineDiagonalLength}
|
||||||
ref={outerLineDiagonalLengthRef}
|
ref={outerLineDiagonalLengthRef}
|
||||||
|
onFocus={(e) => (outerLineDiagonalLengthRef.current.value = '')}
|
||||||
onChange={(e) => onlyNumberInputChange(e, setOuterLineDiagonalLength)}
|
onChange={(e) => onlyNumberInputChange(e, setOuterLineDiagonalLength)}
|
||||||
placeholder="3000"
|
placeholder="3000"
|
||||||
/>
|
/>
|
||||||
@ -56,6 +57,7 @@ export default function Diagonal({ props }) {
|
|||||||
className="input-origin block"
|
className="input-origin block"
|
||||||
value={length1}
|
value={length1}
|
||||||
ref={length1Ref}
|
ref={length1Ref}
|
||||||
|
onFocus={(e) => (length1Ref.current.value = '')}
|
||||||
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
||||||
placeholder="3000"
|
placeholder="3000"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -55,6 +55,7 @@ export default function DoublePitch({ props }) {
|
|||||||
className="input-origin block"
|
className="input-origin block"
|
||||||
value={angle1}
|
value={angle1}
|
||||||
ref={angle1Ref}
|
ref={angle1Ref}
|
||||||
|
onFocus={(e) => (angle1Ref.current.value = '')}
|
||||||
onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
|
onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
|
||||||
placeholder="45"
|
placeholder="45"
|
||||||
/>
|
/>
|
||||||
@ -71,6 +72,7 @@ export default function DoublePitch({ props }) {
|
|||||||
className="input-origin block"
|
className="input-origin block"
|
||||||
value={length1}
|
value={length1}
|
||||||
ref={length1Ref}
|
ref={length1Ref}
|
||||||
|
onFocus={(e) => (length1Ref.current.value = '')}
|
||||||
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
||||||
placeholder="3000"
|
placeholder="3000"
|
||||||
/>
|
/>
|
||||||
@ -128,9 +130,9 @@ export default function DoublePitch({ props }) {
|
|||||||
className="input-origin block"
|
className="input-origin block"
|
||||||
value={angle2}
|
value={angle2}
|
||||||
ref={angle2Ref}
|
ref={angle2Ref}
|
||||||
|
onFocus={(e) => (angle2Ref.current.value = '')}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
onlyNumberWithDotInputChange(e, setAngle2)
|
onlyNumberWithDotInputChange(e, setAngle2)
|
||||||
console.log(getLength2())
|
|
||||||
setLength2(getLength2())
|
setLength2(getLength2())
|
||||||
}}
|
}}
|
||||||
placeholder="45"
|
placeholder="45"
|
||||||
@ -153,6 +155,7 @@ export default function DoublePitch({ props }) {
|
|||||||
className="input-origin block"
|
className="input-origin block"
|
||||||
value={length2}
|
value={length2}
|
||||||
ref={length2Ref}
|
ref={length2Ref}
|
||||||
|
onFocus={(e) => (length2Ref.current.value = '')}
|
||||||
onChange={(e) => onlyNumberInputChange(e, setLength2)}
|
onChange={(e) => onlyNumberInputChange(e, setLength2)}
|
||||||
readOnly={true}
|
readOnly={true}
|
||||||
placeholder="3000"
|
placeholder="3000"
|
||||||
|
|||||||
@ -18,6 +18,7 @@ export default function OuterLineWall({ props }) {
|
|||||||
className="input-origin block"
|
className="input-origin block"
|
||||||
value={length1}
|
value={length1}
|
||||||
ref={length1Ref}
|
ref={length1Ref}
|
||||||
|
onFocus={(e) => (length1Ref.current.value = '')}
|
||||||
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
||||||
placeholder="3000"
|
placeholder="3000"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -15,6 +15,7 @@ export default function RightAngle({ props }) {
|
|||||||
className="input-origin block"
|
className="input-origin block"
|
||||||
value={length1}
|
value={length1}
|
||||||
ref={length1Ref}
|
ref={length1Ref}
|
||||||
|
onFocus={(e) => (length1Ref.current.value = '')}
|
||||||
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
onChange={(e) => onlyNumberInputChange(e, setLength1)}
|
||||||
placeholder="3000"
|
placeholder="3000"
|
||||||
/>
|
/>
|
||||||
@ -70,6 +71,7 @@ export default function RightAngle({ props }) {
|
|||||||
className="input-origin block"
|
className="input-origin block"
|
||||||
value={length2}
|
value={length2}
|
||||||
ref={length2Ref}
|
ref={length2Ref}
|
||||||
|
onFocus={(e) => (length2Ref.current.value = '')}
|
||||||
onChange={(e) => onlyNumberInputChange(e, setLength2)}
|
onChange={(e) => onlyNumberInputChange(e, setLength2)}
|
||||||
placeholder="3000"
|
placeholder="3000"
|
||||||
/>
|
/>
|
||||||
|
|||||||
48
src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
Normal file
48
src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import WithDraggable from '@/components/common/draggable/withDraggable'
|
||||||
|
import { useRecoilValue } from 'recoil'
|
||||||
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||||
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
|
|
||||||
|
export default function CircuitNumberEdit(props) {
|
||||||
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||||
|
const { id, pos = contextPopupPosition, apply } = props
|
||||||
|
const { closePopup } = usePopup()
|
||||||
|
const { getMessage } = useMessage()
|
||||||
|
const handleApply = () => {
|
||||||
|
if (apply) apply()
|
||||||
|
closePopup(id)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
|
<div className={`modal-pop-wrap xm mount`}>
|
||||||
|
<div className="modal-head">
|
||||||
|
<h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1>
|
||||||
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
|
닫기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="grid-option-tit"> {getMessage('modal.module.circuit.number.edit.info')}</div>
|
||||||
|
<div className="grid-option-wrap">
|
||||||
|
<div className="grid-option-box">
|
||||||
|
<div className="outline-form">
|
||||||
|
<span className="mr10" style={{ width: 'auto' }}>
|
||||||
|
{getMessage('modal.module.circuit.number')}
|
||||||
|
</span>
|
||||||
|
<div className="input-grid mr5">
|
||||||
|
<input type="text" className="input-origin block" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid-btn-wrap">
|
||||||
|
<button className="btn-frame modal act" onClick={handleApply}>
|
||||||
|
{getMessage('modal.common.save')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</WithDraggable>
|
||||||
|
)
|
||||||
|
}
|
||||||
78
src/components/floor-plan/modal/module/PanelEdit.jsx
Normal file
78
src/components/floor-plan/modal/module/PanelEdit.jsx
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||||
|
import { useRecoilValue } from 'recoil'
|
||||||
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||||
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
export default function PanelEdit(props) {
|
||||||
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||||
|
const { id, pos = contextPopupPosition, type = 'move', apply } = props
|
||||||
|
const { closePopup } = usePopup()
|
||||||
|
const [length, setLength] = useState(0)
|
||||||
|
const [direction, setDirection] = useState('')
|
||||||
|
const { getMessage } = useMessage()
|
||||||
|
|
||||||
|
const handleApply = () => {
|
||||||
|
apply()
|
||||||
|
closePopup(id)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
|
<div className={`modal-pop-wrap xm mount`}>
|
||||||
|
<div className="modal-head">
|
||||||
|
<h1 className="title">{getMessage(type === 'move' ? 'modal.move.setting' : 'modal.copy.setting')} </h1>
|
||||||
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
|
닫기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="grid-option-tit">{getMessage(type === 'move' ? 'modal.move.setting.info' : 'modal.copy.setting.info')}</div>
|
||||||
|
<div className="grid-option-wrap">
|
||||||
|
<div className="grid-option-box">
|
||||||
|
<div className="grid-input-form">
|
||||||
|
<span className="mr10">{getMessage('margin')}</span>
|
||||||
|
<div className="input-grid mr5">
|
||||||
|
<input type="text" className="input-origin" defaultValue={0} onClick={(e) => setLength(e.target.value)} />
|
||||||
|
</div>
|
||||||
|
<span>mm</span>
|
||||||
|
</div>
|
||||||
|
<div className="grid-direction">
|
||||||
|
<button
|
||||||
|
className={`direction up ${direction === '↑' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setDirection('↑')
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
className={`direction down ${direction === '↓' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setDirection('↓')
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
className={`direction left ${direction === '←' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setDirection('←')
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
className={`direction right ${direction === '→' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setDirection('→')
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid-btn-wrap">
|
||||||
|
<button className="btn-frame modal mr5" onClick={handleApply}>
|
||||||
|
{getMessage('modal.common.save')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</WithDraggable>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,95 @@
|
|||||||
|
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||||
|
import { useRecoilValue } from 'recoil'
|
||||||
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||||
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import Image from 'next/image'
|
||||||
|
|
||||||
|
export default function ColumnInsert(props) {
|
||||||
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||||
|
const { id, pos = contextPopupPosition, apply } = props
|
||||||
|
const { closePopup } = usePopup()
|
||||||
|
const [selectedType, setSelectedType] = useState(1)
|
||||||
|
const { getMessage } = useMessage()
|
||||||
|
const handleApply = () => {
|
||||||
|
if (apply) apply()
|
||||||
|
closePopup(id)
|
||||||
|
}
|
||||||
|
|
||||||
|
const HandleRadioChange = (e) => {
|
||||||
|
setSelectedType(Number(e.target.value))
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
|
<div className={`modal-pop-wrap r mount`}>
|
||||||
|
<div className="modal-head">
|
||||||
|
<h1 className="title">{getMessage('modal.panel.column.insert')} </h1>
|
||||||
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
|
닫기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="properties-setting-wrap">
|
||||||
|
<div className="setting-tit">{getMessage('modal.panel.column.insert.info')}</div>
|
||||||
|
<div className="additional-wrap">
|
||||||
|
<div className="additional-radio-wrap">
|
||||||
|
<div className="d-check-radio pop">
|
||||||
|
<input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={selectedType === 1} />
|
||||||
|
<label htmlFor="ra01">{getMessage('modal.panel.column.insert.type.left')}</label>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-radio pop">
|
||||||
|
<input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={selectedType === 2} />
|
||||||
|
<label htmlFor="ra02">{getMessage('modal.panel.column.insert.type.right')}</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="additional-img-wrap">
|
||||||
|
{selectedType === 1 && (
|
||||||
|
<Image
|
||||||
|
src="/static/images/canvas/additional-edit01.svg"
|
||||||
|
alt="react"
|
||||||
|
width={0}
|
||||||
|
height={0}
|
||||||
|
style={{ width: 'auto', height: 'auto' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{selectedType === 2 && (
|
||||||
|
<Image
|
||||||
|
src="/static/images/canvas/additional-edit02.svg"
|
||||||
|
alt="react"
|
||||||
|
width={0}
|
||||||
|
height={0}
|
||||||
|
style={{ width: 'auto', height: 'auto' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="properties-setting-wrap">
|
||||||
|
<div className="setting-tit">{getMessage('legend')}</div>
|
||||||
|
<div className="module-table-box">
|
||||||
|
<div className="module-table-inner">
|
||||||
|
<div className="additional-color-wrap">
|
||||||
|
<div className="additional-color-box">
|
||||||
|
<span className="additional-color pink"></span>
|
||||||
|
<span className="normal-font">{getMessage('modal.panel.select.column')}</span>
|
||||||
|
</div>
|
||||||
|
<div className="additional-color-box">
|
||||||
|
<span className="additional-color white"></span>
|
||||||
|
<span className="normal-font">{getMessage('modal.panel.insert.column')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid-btn-wrap">
|
||||||
|
<button className="btn-frame modal act" onClick={handleApply}>
|
||||||
|
{getMessage('modal.common.save')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</WithDraggable>
|
||||||
|
)
|
||||||
|
}
|
||||||
118
src/components/floor-plan/modal/module/column/ColumnRemove.jsx
Normal file
118
src/components/floor-plan/modal/module/column/ColumnRemove.jsx
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||||
|
import { useRecoilValue } from 'recoil'
|
||||||
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||||
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import Image from 'next/image'
|
||||||
|
|
||||||
|
export default function ColumnRemove(props) {
|
||||||
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||||
|
const { id, pos = contextPopupPosition, apply } = props
|
||||||
|
const { closePopup } = usePopup()
|
||||||
|
const [selectedType, setSelectedType] = useState(1)
|
||||||
|
const { getMessage } = useMessage()
|
||||||
|
const types = [
|
||||||
|
{ name: getMessage('modal.panel.column.remove.type.left'), value: 1 },
|
||||||
|
{ name: getMessage('modal.panel.column.remove.type.right'), value: 2 },
|
||||||
|
{ name: getMessage('modal.panel.column.remove.type.side'), value: 3 },
|
||||||
|
{ name: getMessage('modal.panel.column.remove.type.none'), value: 4 },
|
||||||
|
]
|
||||||
|
const handleApply = () => {
|
||||||
|
if (apply) apply()
|
||||||
|
closePopup(id)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
|
<div className={`modal-pop-wrap r mount`}>
|
||||||
|
<div className="modal-head">
|
||||||
|
<h1 className="title">{getMessage('modal.panel.column.remove')} </h1>
|
||||||
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
|
닫기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="properties-setting-wrap">
|
||||||
|
<div className="setting-tit">{getMessage('modal.panel.column.remove.info')}</div>
|
||||||
|
<div className="additional-wrap">
|
||||||
|
<div className="additional-radio-wrap">
|
||||||
|
{types.map((type, index) => {
|
||||||
|
return (
|
||||||
|
<div className="d-check-radio pop">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="radio01"
|
||||||
|
id={`ra0${index + 1}`}
|
||||||
|
onClick={(e) => setSelectedType(Number(e.target.value))}
|
||||||
|
value={type.value}
|
||||||
|
checked={selectedType === type.value}
|
||||||
|
/>
|
||||||
|
<label htmlFor={`ra0${index + 1}`}>{type.name}</label>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div className="additional-img-wrap">
|
||||||
|
{selectedType === 1 && (
|
||||||
|
<Image
|
||||||
|
src="/static/images/canvas/additional_del01.svg"
|
||||||
|
alt="react"
|
||||||
|
width={0}
|
||||||
|
height={0}
|
||||||
|
style={{ width: 'auto', height: 'auto' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{selectedType === 2 && (
|
||||||
|
<Image
|
||||||
|
src="/static/images/canvas/additional_del02.svg"
|
||||||
|
alt="react"
|
||||||
|
width={0}
|
||||||
|
height={0}
|
||||||
|
style={{ width: 'auto', height: 'auto' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{selectedType === 3 && (
|
||||||
|
<Image
|
||||||
|
src="/static/images/canvas/additional_del03.svg"
|
||||||
|
alt="react"
|
||||||
|
width={0}
|
||||||
|
height={0}
|
||||||
|
style={{ width: 'auto', height: 'auto' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{selectedType === 4 && (
|
||||||
|
<Image
|
||||||
|
src="/static/images/canvas/additional_del04.svg"
|
||||||
|
alt="react"
|
||||||
|
width={0}
|
||||||
|
height={0}
|
||||||
|
style={{ width: 'auto', height: 'auto' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="properties-setting-wrap">
|
||||||
|
<div className="setting-tit">{getMessage('legend')}</div>
|
||||||
|
<div className="module-table-box">
|
||||||
|
<div className="module-table-inner">
|
||||||
|
<div className="additional-color-wrap">
|
||||||
|
<div className="additional-color-box">
|
||||||
|
<span className="additional-color pink"></span>
|
||||||
|
<span className="normal-font">{getMessage('modal.panel.select.column')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid-btn-wrap">
|
||||||
|
<button className="btn-frame modal act" onClick={handleApply}>
|
||||||
|
{getMessage('modal.common.save')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</WithDraggable>
|
||||||
|
)
|
||||||
|
}
|
||||||
95
src/components/floor-plan/modal/module/row/RowInsert.jsx
Normal file
95
src/components/floor-plan/modal/module/row/RowInsert.jsx
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
import WithDraggable from '@/components/common/draggable/withDraggable'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { useRecoilValue } from 'recoil'
|
||||||
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||||
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
|
|
||||||
|
export default function RowInsert(props) {
|
||||||
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||||
|
const { id, pos = contextPopupPosition, apply } = props
|
||||||
|
const { closePopup } = usePopup()
|
||||||
|
const [selectedType, setSelectedType] = useState(1)
|
||||||
|
const { getMessage } = useMessage()
|
||||||
|
const handleApply = () => {
|
||||||
|
if (apply) apply()
|
||||||
|
closePopup(id)
|
||||||
|
}
|
||||||
|
|
||||||
|
const HandleRadioChange = (e) => {
|
||||||
|
setSelectedType(Number(e.target.value))
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
|
<div className={`modal-pop-wrap r mount`}>
|
||||||
|
<div className="modal-head">
|
||||||
|
<h1 className="title">{getMessage('modal.row.insert')} </h1>
|
||||||
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
|
닫기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="properties-setting-wrap">
|
||||||
|
<div className="setting-tit">{getMessage('modal.row.insert.info')}</div>
|
||||||
|
<div className="additional-wrap">
|
||||||
|
<div className="additional-radio-wrap">
|
||||||
|
<div className="d-check-radio pop">
|
||||||
|
<input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={selectedType === 1} />
|
||||||
|
<label htmlFor="ra01">{getMessage('modal.row.insert.type.up')}</label>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-radio pop">
|
||||||
|
<input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={selectedType === 2} />
|
||||||
|
<label htmlFor="ra02">{getMessage('modal.row.insert.type.down')}</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="additional-img-wrap">
|
||||||
|
{selectedType === 1 && (
|
||||||
|
<Image
|
||||||
|
src="/static/images/canvas/additional_bundle-edit01.svg"
|
||||||
|
alt="react"
|
||||||
|
width={0}
|
||||||
|
height={0}
|
||||||
|
style={{ width: 'auto', height: 'auto' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{selectedType === 2 && (
|
||||||
|
<Image
|
||||||
|
src="/static/images/canvas/additional_bundle-edit02.svg"
|
||||||
|
alt="react"
|
||||||
|
width={0}
|
||||||
|
height={0}
|
||||||
|
style={{ width: 'auto', height: 'auto' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="properties-setting-wrap">
|
||||||
|
<div className="setting-tit">{getMessage('legend')}</div>
|
||||||
|
<div className="module-table-box">
|
||||||
|
<div className="module-table-inner">
|
||||||
|
<div className="additional-color-wrap">
|
||||||
|
<div className="additional-color-box">
|
||||||
|
<span className="additional-color pink"></span>
|
||||||
|
<span className="normal-font">{getMessage('modal.panel.select.row')}</span>
|
||||||
|
</div>
|
||||||
|
<div className="additional-color-box">
|
||||||
|
<span className="additional-color white"></span>
|
||||||
|
<span className="normal-font">{getMessage('modal.panel.insert.row')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid-btn-wrap">
|
||||||
|
<button className="btn-frame modal act" onClick={handleApply}>
|
||||||
|
{getMessage('modal.common.save')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</WithDraggable>
|
||||||
|
)
|
||||||
|
}
|
||||||
118
src/components/floor-plan/modal/module/row/RowRemove.jsx
Normal file
118
src/components/floor-plan/modal/module/row/RowRemove.jsx
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
import WithDraggable from '@/components/common/draggable/withDraggable'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { useRecoilValue } from 'recoil'
|
||||||
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||||
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
|
|
||||||
|
export default function RowRemove(props) {
|
||||||
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||||
|
const { id, pos = contextPopupPosition, apply } = props
|
||||||
|
const { closePopup } = usePopup()
|
||||||
|
const [selectedType, setSelectedType] = useState(1)
|
||||||
|
const { getMessage } = useMessage()
|
||||||
|
const types = [
|
||||||
|
{ name: getMessage('modal.row.remove.type.up'), value: 1 },
|
||||||
|
{ name: getMessage('modal.row.remove.type.down'), value: 2 },
|
||||||
|
{ name: getMessage('modal.row.remove.type.side'), value: 3 },
|
||||||
|
{ name: getMessage('modal.row.remove.type.none'), value: 4 },
|
||||||
|
]
|
||||||
|
const handleApply = () => {
|
||||||
|
if (apply) apply()
|
||||||
|
closePopup(id)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
|
<div className={`modal-pop-wrap r mount`}>
|
||||||
|
<div className="modal-head">
|
||||||
|
<h1 className="title">{getMessage('modal.row.remove')}</h1>
|
||||||
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
|
닫기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="properties-setting-wrap">
|
||||||
|
<div className="setting-tit">{getMessage('modal.row.remove.info')}</div>
|
||||||
|
<div className="additional-wrap">
|
||||||
|
<div className="additional-radio-wrap">
|
||||||
|
{types.map((type, index) => {
|
||||||
|
return (
|
||||||
|
<div className="d-check-radio pop">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="radio01"
|
||||||
|
id={`ra0${index + 1}`}
|
||||||
|
onClick={() => setSelectedType(Number(e.target.value))}
|
||||||
|
value={type.value}
|
||||||
|
checked={selectedType === type.value}
|
||||||
|
/>
|
||||||
|
<label htmlFor="ra01">{getMessage(type.name)}</label>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div className="additional-img-wrap">
|
||||||
|
{selectedType === 1 && (
|
||||||
|
<Image
|
||||||
|
src="/static/images/canvas/additional_bundle-del01.svg"
|
||||||
|
alt="react"
|
||||||
|
width={0}
|
||||||
|
height={0}
|
||||||
|
style={{ width: 'auto', height: 'auto' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{selectedType === 2 && (
|
||||||
|
<Image
|
||||||
|
src="/static/images/canvas/additional_bundle-del02.svg"
|
||||||
|
alt="react"
|
||||||
|
width={0}
|
||||||
|
height={0}
|
||||||
|
style={{ width: 'auto', height: 'auto' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{selectedType === 3 && (
|
||||||
|
<Image
|
||||||
|
src="/static/images/canvas/additional_bundle-del03.svg"
|
||||||
|
alt="react"
|
||||||
|
width={0}
|
||||||
|
height={0}
|
||||||
|
style={{ width: 'auto', height: 'auto' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{selectedType === 4 && (
|
||||||
|
<Image
|
||||||
|
src="/static/images/canvas/additional_bundle-del04.svg"
|
||||||
|
alt="react"
|
||||||
|
width={0}
|
||||||
|
height={0}
|
||||||
|
style={{ width: 'auto', height: 'auto' }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="properties-setting-wrap">
|
||||||
|
<div className="setting-tit">{getMessage('legend')}</div>
|
||||||
|
<div className="module-table-box">
|
||||||
|
<div className="module-table-inner">
|
||||||
|
<div className="additional-color-wrap">
|
||||||
|
<div className="additional-color-box">
|
||||||
|
<span className="additional-color pink"></span>
|
||||||
|
<span className="normal-font">{getMessage('modal.panel.select.row')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid-btn-wrap">
|
||||||
|
<button className="btn-frame modal act" onClick={handleApply}>
|
||||||
|
{getMessage('modal.common.save')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</WithDraggable>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -4,15 +4,18 @@ import { useState } from 'react'
|
|||||||
import FlowLine from '@/components/floor-plan/modal/movement/type/FlowLine'
|
import FlowLine from '@/components/floor-plan/modal/movement/type/FlowLine'
|
||||||
import Updown from '@/components/floor-plan/modal/movement/type/Updown'
|
import Updown from '@/components/floor-plan/modal/movement/type/Updown'
|
||||||
import { usePopup } from '@/hooks/usePopup'
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
|
import { useMovementSetting } from '@/hooks/roofcover/useMovementSetting'
|
||||||
|
|
||||||
export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
|
export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const { closePopup } = usePopup()
|
const { TYPE, closePopup, buttonType, type, setType, FLOW_LINE_REF, UP_DOWN_REF, handleSave } = useMovementSetting(id)
|
||||||
const [buttonAct, setButtonAct] = useState(1)
|
|
||||||
const buttonMenu = [
|
const flowLineProps = {
|
||||||
{ id: 1, name: getMessage('modal.movement.flow.line.move') },
|
FLOW_LINE_REF,
|
||||||
{ id: 2, name: getMessage('modal.movement.flow.line.updown') },
|
}
|
||||||
]
|
const updownProps = {
|
||||||
|
UP_DOWN_REF,
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={pos}>
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
@ -25,19 +28,21 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
|
|||||||
</div>
|
</div>
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
<div className="modal-btn-wrap">
|
<div className="modal-btn-wrap">
|
||||||
{buttonMenu.map((item) => (
|
{buttonType.map((item) => (
|
||||||
<button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
|
<button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
|
||||||
{item.name}
|
{item.name}
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="properties-setting-wrap outer">
|
<div className="properties-setting-wrap outer">
|
||||||
<div className="setting-tit">{getMessage('setting')}</div>
|
<div className="setting-tit">{getMessage('setting')}</div>
|
||||||
{buttonAct === 1 && <FlowLine />}
|
{type === TYPE.FLOW_LINE && <FlowLine {...flowLineProps} />}
|
||||||
{buttonAct === 2 && <Updown />}
|
{type === TYPE.UP_DOWN && <Updown {...updownProps} />}
|
||||||
</div>
|
</div>
|
||||||
<div className="grid-btn-wrap">
|
<div className="grid-btn-wrap">
|
||||||
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
<button className="btn-frame modal act" onClick={handleSave}>
|
||||||
|
{getMessage('modal.common.save')}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,7 +1,25 @@
|
|||||||
import { useMessage } from '@/hooks/useMessage'
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import { useEvent } from '@/hooks/useEvent'
|
||||||
|
|
||||||
export default function FlowLine({}) {
|
const FLOW_LINE_TYPE = {
|
||||||
|
DOWN_LEFT: 'downLeft',
|
||||||
|
UP_RIGHT: 'upRight',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function FlowLine({ FLOW_LINE_REF }) {
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
|
const [type, setType] = useState(FLOW_LINE_TYPE.DOWN_LEFT)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (type === FLOW_LINE_TYPE.DOWN_LEFT) {
|
||||||
|
FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
|
||||||
|
FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.focus()
|
||||||
|
} else {
|
||||||
|
FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
|
||||||
|
FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.focus()
|
||||||
|
}
|
||||||
|
}, [type])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -11,14 +29,23 @@ export default function FlowLine({}) {
|
|||||||
<div className="eaves-keraba-item">
|
<div className="eaves-keraba-item">
|
||||||
<div className="eaves-keraba-th">
|
<div className="eaves-keraba-th">
|
||||||
<div className="d-check-radio pop">
|
<div className="d-check-radio pop">
|
||||||
<input type="radio" name="radio01" id="ra01" />
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="radio01"
|
||||||
|
id="ra01"
|
||||||
|
defaultChecked={true}
|
||||||
|
ref={FLOW_LINE_REF.DOWN_LEFT_RADIO_REF}
|
||||||
|
onChange={() => {
|
||||||
|
setType(FLOW_LINE_TYPE.DOWN_LEFT)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<label htmlFor="ra01">{getMessage('modal.movement.flow.line.bottom.left')}</label>
|
<label htmlFor="ra01">{getMessage('modal.movement.flow.line.bottom.left')}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="eaves-keraba-td">
|
<div className="eaves-keraba-td">
|
||||||
<div className="outline-form">
|
<div className="outline-form">
|
||||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||||
<input type="text" className="input-origin block" defaultValue={100} />
|
<input type="text" className="input-origin block" readOnly={true} ref={FLOW_LINE_REF.DOWN_LEFT_INPUT_REF} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -26,14 +53,27 @@ export default function FlowLine({}) {
|
|||||||
<div className="eaves-keraba-item">
|
<div className="eaves-keraba-item">
|
||||||
<div className="eaves-keraba-th">
|
<div className="eaves-keraba-th">
|
||||||
<div className="d-check-radio pop">
|
<div className="d-check-radio pop">
|
||||||
<input type="radio" name="radio01" id="ra02" />
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="radio01"
|
||||||
|
id="ra02"
|
||||||
|
ref={FLOW_LINE_REF.UP_RIGHT_RADIO_REF}
|
||||||
|
onChange={() => {
|
||||||
|
setType(FLOW_LINE_TYPE.UP_RIGHT)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<label htmlFor="ra02">{getMessage('modal.movement.flow.line.top.right')}</label>
|
<label htmlFor="ra02">{getMessage('modal.movement.flow.line.top.right')}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="eaves-keraba-td">
|
<div className="eaves-keraba-td">
|
||||||
<div className="outline-form">
|
<div className="outline-form">
|
||||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||||
<input type="text" className="input-origin block" defaultValue={100} />
|
<input
|
||||||
|
type="text"
|
||||||
|
className="input-origin block"
|
||||||
|
readOnly={type !== FLOW_LINE_TYPE.UP_RIGHT}
|
||||||
|
ref={FLOW_LINE_REF.UP_RIGHT_INPUT_REF}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span className="thin">mm</span>
|
<span className="thin">mm</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,7 +1,28 @@
|
|||||||
import { useMessage } from '@/hooks/useMessage'
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import { useEvent } from '@/hooks/useEvent'
|
||||||
|
import { canvasState } from '@/store/canvasAtom'
|
||||||
|
import { useRecoilValue } from 'recoil'
|
||||||
|
|
||||||
export default function Updown({}) {
|
const UP_DOWN_TYPE = {
|
||||||
|
UP: 'up',
|
||||||
|
DOWN: 'down',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Updown({ UP_DOWN_REF }) {
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
|
const [type, setType] = useState(UP_DOWN_TYPE.UP)
|
||||||
|
const canvas = useRecoilValue(canvasState)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (type === UP_DOWN_TYPE.UP) {
|
||||||
|
UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
|
||||||
|
UP_DOWN_REF.UP_INPUT_REF.current.focus()
|
||||||
|
} else {
|
||||||
|
UP_DOWN_REF.UP_INPUT_REF.current.value = ''
|
||||||
|
UP_DOWN_REF.DOWN_INPUT_REF.current.focus()
|
||||||
|
}
|
||||||
|
}, [type])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -11,14 +32,23 @@ export default function Updown({}) {
|
|||||||
<div className="eaves-keraba-item">
|
<div className="eaves-keraba-item">
|
||||||
<div className="eaves-keraba-th">
|
<div className="eaves-keraba-th">
|
||||||
<div className="d-check-radio pop">
|
<div className="d-check-radio pop">
|
||||||
<input type="radio" name="radio01" id="ra01" />
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="radio01"
|
||||||
|
id="ra01"
|
||||||
|
ref={UP_DOWN_REF.UP_RADIO_REF}
|
||||||
|
defaultChecked={true}
|
||||||
|
onChange={() => {
|
||||||
|
setType(UP_DOWN_TYPE.UP)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<label htmlFor="ra01">{getMessage('modal.movement.flow.line.updown.up')}</label>
|
<label htmlFor="ra01">{getMessage('modal.movement.flow.line.updown.up')}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="eaves-keraba-td">
|
<div className="eaves-keraba-td">
|
||||||
<div className="outline-form">
|
<div className="outline-form">
|
||||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||||
<input type="text" className="input-origin block" defaultValue={100} />
|
<input type="text" className="input-origin block" readOnly={true} ref={UP_DOWN_REF.UP_INPUT_REF} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -26,14 +56,22 @@ export default function Updown({}) {
|
|||||||
<div className="eaves-keraba-item">
|
<div className="eaves-keraba-item">
|
||||||
<div className="eaves-keraba-th">
|
<div className="eaves-keraba-th">
|
||||||
<div className="d-check-radio pop">
|
<div className="d-check-radio pop">
|
||||||
<input type="radio" name="radio01" id="ra02" />
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="radio01"
|
||||||
|
id="ra02"
|
||||||
|
ref={UP_DOWN_REF.DOWN_RADIO_REF}
|
||||||
|
onChange={() => {
|
||||||
|
setType(UP_DOWN_TYPE.DOWN)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<label htmlFor="ra02">{getMessage('modal.movement.flow.line.updown.down')}</label>
|
<label htmlFor="ra02">{getMessage('modal.movement.flow.line.updown.down')}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="eaves-keraba-td">
|
<div className="eaves-keraba-td">
|
||||||
<div className="outline-form">
|
<div className="outline-form">
|
||||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||||
<input type="text" className="input-origin block" defaultValue={100} />
|
<input type="text" className="input-origin block" readOnly={type !== UP_DOWN_TYPE.DOWN} ref={UP_DOWN_REF.DOWN_INPUT_REF} />
|
||||||
</div>
|
</div>
|
||||||
<span className="thin">mm</span>
|
<span className="thin">mm</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,15 +3,18 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|||||||
import { useRecoilValue } from 'recoil'
|
import { useRecoilValue } from 'recoil'
|
||||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||||
import { usePopup } from '@/hooks/usePopup'
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
export default function DormerOffset(props) {
|
export default function DormerOffset(props) {
|
||||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||||
const { id, pos = contextPopupPosition } = props
|
const { id, pos = contextPopupPosition } = props
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const { closePopup } = usePopup()
|
const { closePopup } = usePopup()
|
||||||
|
const [arrow1, setArrow1] = useState(null)
|
||||||
|
const [arrow2, setArrow2] = useState(null)
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={pos}>
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
<div className={`modal-pop-wrap xm`}>
|
<div className={`modal-pop-wrap xm mount`}>
|
||||||
<div className="modal-head">
|
<div className="modal-head">
|
||||||
<h1 className="title">{getMessage('contextmenu.dormer.offset')}</h1>
|
<h1 className="title">{getMessage('contextmenu.dormer.offset')}</h1>
|
||||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
@ -29,20 +32,46 @@ export default function DormerOffset(props) {
|
|||||||
<input type="text" className="input-origin" defaultValue={0} />
|
<input type="text" className="input-origin" defaultValue={0} />
|
||||||
</div>
|
</div>
|
||||||
<span>mm</span>
|
<span>mm</span>
|
||||||
|
<div className="direction-move-wrap">
|
||||||
|
<button
|
||||||
|
className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setArrow1('↑')
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setArrow1('↓')
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="input-move-wrap">
|
<div className="input-move-wrap">
|
||||||
<div className="input-move">
|
<div className="input-move">
|
||||||
<input type="text" className="input-origin" defaultValue={0} />
|
<input type="text" className="input-origin" defaultValue={0} />
|
||||||
</div>
|
</div>
|
||||||
<span>mm</span>
|
<span>mm</span>
|
||||||
|
<div className="direction-move-wrap">
|
||||||
|
<button
|
||||||
|
className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setArrow2('←')
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
setArrow2('→')
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="direction-move-wrap">
|
|
||||||
<button className="direction up"></button>
|
|
||||||
<button className="direction down act"></button>
|
|
||||||
<button className="direction left"></button>
|
|
||||||
<button className="direction right"></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid-btn-wrap">
|
<div className="grid-btn-wrap">
|
||||||
|
|||||||
@ -19,7 +19,8 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
|
|||||||
const canvas = useRecoilValue(canvasState)
|
const canvas = useRecoilValue(canvasState)
|
||||||
const [buttonAct, setButtonAct] = useState(1)
|
const [buttonAct, setButtonAct] = useState(1)
|
||||||
const { swalFire } = useSwal()
|
const { swalFire } = useSwal()
|
||||||
const { applyOpeningAndShadow, applyDormers } = useObjectBatch()
|
const [isHidden, setIsHidden] = useState(false)
|
||||||
|
const { applyOpeningAndShadow, applyDormers } = useObjectBatch({ isHidden, setIsHidden })
|
||||||
const { closePopup } = usePopup()
|
const { closePopup } = usePopup()
|
||||||
|
|
||||||
const surfaceShapePolygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
|
const surfaceShapePolygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
|
||||||
@ -63,6 +64,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
|
|||||||
} else {
|
} else {
|
||||||
applyDormers(dormerPlacement, buttonAct, surfaceShapePolygons)
|
applyDormers(dormerPlacement, buttonAct, surfaceShapePolygons)
|
||||||
}
|
}
|
||||||
|
setIsHidden(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
const buttonMenu = [
|
const buttonMenu = [
|
||||||
@ -71,9 +73,10 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
|
|||||||
{ id: 3, name: getMessage('modal.object.setting.type.triangle.dormer') },
|
{ id: 3, name: getMessage('modal.object.setting.type.triangle.dormer') },
|
||||||
{ id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') },
|
{ id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') },
|
||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={pos}>
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
<div className={`modal-pop-wrap lrr`}>
|
<div className={`modal-pop-wrap lrr`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
|
||||||
<div className="modal-head">
|
<div className="modal-head">
|
||||||
<h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
|
<h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
|
||||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
|
|||||||
@ -22,9 +22,9 @@ export default function RoofMaterialSetting(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={pos}>
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
<div className={`modal-pop-wrap xxxm`}>
|
<div className={`modal-pop-wrap xxxm mount`}>
|
||||||
<div className="modal-head">
|
<div className="modal-head">
|
||||||
<h1 className="title">変更 </h1>
|
<h1 className="title">{getMessage('modal.roof.material.edit')} </h1>
|
||||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
닫기
|
닫기
|
||||||
</button>
|
</button>
|
||||||
@ -36,7 +36,7 @@ export default function RoofMaterialSetting(props) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid-btn-wrap">
|
<div className="grid-btn-wrap">
|
||||||
<button className="btn-frame modal act">ストレージ</button>
|
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -16,7 +16,7 @@ export default function SizeSetting(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={pos}>
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
<div className={`modal-pop-wrap ssm`}>
|
<div className={`modal-pop-wrap ssm mount`}>
|
||||||
<div className="modal-head">
|
<div className="modal-head">
|
||||||
<h1 className="title">{getMessage('modal.size.setting')} </h1>
|
<h1 className="title">{getMessage('modal.size.setting')} </h1>
|
||||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
|
|||||||
@ -18,6 +18,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
|||||||
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
|
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
|
||||||
const { closePopup } = usePopup()
|
const { closePopup } = usePopup()
|
||||||
const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
|
const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
|
||||||
|
const [image, setImage] = useState(null)
|
||||||
|
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const { get, post } = useAxios()
|
const { get, post } = useAxios()
|
||||||
@ -479,6 +480,24 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
|||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>{getMessage('common.input.file')}</th>
|
||||||
|
<td>
|
||||||
|
<div className="flex-box">
|
||||||
|
<div className="img-edit-wrap">
|
||||||
|
<label className="img-edit-btn" htmlFor="img_file">
|
||||||
|
<span className="img-edit"></span>
|
||||||
|
{getMessage('common.input.file.load')}
|
||||||
|
</label>
|
||||||
|
<input type="file" id="img_file" style={{ display: 'none' }} onChange={(e) => setImage(e.target.files[0])} />
|
||||||
|
</div>
|
||||||
|
<div className="img-name-wrap">
|
||||||
|
<input type="text" className="input-origin al-l" defaultValue={''} value={image ? image.name : ''} readOnly />
|
||||||
|
{image && <button className="img-check" onClick={() => setImage(null)}></button>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -49,7 +49,8 @@ const PlacementSurface = forwardRef((props, refs) => {
|
|||||||
{lines?.map((line, index) => (
|
{lines?.map((line, index) => (
|
||||||
<div className="eaves-keraba-item" id={index} key={index}>
|
<div className="eaves-keraba-item" id={index} key={index}>
|
||||||
<div className="eaves-keraba-th">
|
<div className="eaves-keraba-th">
|
||||||
{line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}
|
{/*{line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}*/}
|
||||||
|
{num[index]}
|
||||||
</div>
|
</div>
|
||||||
<div className="eaves-keraba-td">
|
<div className="eaves-keraba-td">
|
||||||
<div className="outline-form">
|
<div className="outline-form">
|
||||||
|
|||||||
@ -241,7 +241,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
|
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
|
||||||
<div className={`modal-pop-wrap l-2`}>
|
<div className={`modal-pop-wrap lr-2`}>
|
||||||
<div className="modal-head">
|
<div className="modal-head">
|
||||||
<h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
|
<h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
|
||||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
@ -249,35 +249,45 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
<div className="plane-shape-menu">
|
<div className="plane-frame-wrap">
|
||||||
{types.map((type) => (
|
<div className="plane-shape-wrap">
|
||||||
<button key={type.id} className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`} onClick={() => setSelectedType(type)}>
|
<div className="plane-shape-menu">
|
||||||
<div className="shape-box">
|
{types.map((type) => (
|
||||||
<Image
|
<button
|
||||||
src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
|
key={type.id}
|
||||||
alt="react"
|
className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`}
|
||||||
width={0}
|
onClick={() => setSelectedType(type)}
|
||||||
height={0}
|
>
|
||||||
style={{
|
<div className="shape-box">
|
||||||
width: 'auto',
|
<Image
|
||||||
height: 'auto',
|
src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
|
||||||
transform: getInversionState(),
|
alt="react"
|
||||||
}}
|
width={0}
|
||||||
/>
|
height={0}
|
||||||
</div>
|
style={{
|
||||||
</button>
|
width: 'auto',
|
||||||
))}
|
height: 'auto',
|
||||||
</div>
|
transform: getInversionState(),
|
||||||
<div className="shape-library">
|
}}
|
||||||
<button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
|
/>
|
||||||
<button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
|
</div>
|
||||||
<button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button>
|
</button>
|
||||||
</div>
|
))}
|
||||||
<PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
|
</div>
|
||||||
<div className="grid-btn-wrap">
|
<div className="shape-library">
|
||||||
<button className="btn-frame modal act" onClick={applySurfaces}>
|
<button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
|
||||||
{getMessage('write')}
|
<button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
|
||||||
</button>
|
<button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="plane-detail-wrap">
|
||||||
|
<PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
|
||||||
|
<div className="plane-shape-btn">
|
||||||
|
<button className="btn-frame modal act" onClick={applySurfaces}>
|
||||||
|
{getMessage('write')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -16,7 +16,7 @@ export default function RoofAllocationSetting(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<WithDraggable isShow={true} pos={pos}>
|
<WithDraggable isShow={true} pos={pos}>
|
||||||
<div className={`modal-pop-wrap ml`}>
|
<div className={`modal-pop-wrap ml mount`}>
|
||||||
<div className="modal-head">
|
<div className="modal-head">
|
||||||
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
|
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
|
||||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||||
|
|||||||
@ -39,6 +39,8 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
|
|||||||
handleConfirm,
|
handleConfirm,
|
||||||
handleRollBack,
|
handleRollBack,
|
||||||
pitchText,
|
pitchText,
|
||||||
|
shedPitch,
|
||||||
|
setShedPitch,
|
||||||
} = useRoofShapeSetting(id)
|
} = useRoofShapeSetting(id)
|
||||||
const { closePopup } = usePopup()
|
const { closePopup } = usePopup()
|
||||||
|
|
||||||
@ -61,6 +63,8 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
|
|||||||
setHipAndGableWidth,
|
setHipAndGableWidth,
|
||||||
shedWidth,
|
shedWidth,
|
||||||
setShedWidth,
|
setShedWidth,
|
||||||
|
shedPitch,
|
||||||
|
setShedPitch,
|
||||||
hasSleeve,
|
hasSleeve,
|
||||||
setHasSleeve,
|
setHasSleeve,
|
||||||
buttonAct,
|
buttonAct,
|
||||||
|
|||||||
@ -33,6 +33,8 @@ export default function Side(props) {
|
|||||||
handleConfirm,
|
handleConfirm,
|
||||||
handleRollBack,
|
handleRollBack,
|
||||||
pitchText,
|
pitchText,
|
||||||
|
shedPitch,
|
||||||
|
setShedPitch,
|
||||||
} = props
|
} = props
|
||||||
|
|
||||||
const eavesProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
|
const eavesProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
|
||||||
@ -40,7 +42,7 @@ export default function Side(props) {
|
|||||||
const wallProps = { sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve }
|
const wallProps = { sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve }
|
||||||
const hipAndGableProps = { pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }
|
const hipAndGableProps = { pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }
|
||||||
const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch, pitchText }
|
const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch, pitchText }
|
||||||
const shedProps = { shedWidth, setShedWidth }
|
const shedProps = { shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText }
|
||||||
|
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
|
|
||||||
|
|||||||
@ -1,10 +1,17 @@
|
|||||||
import { useMessage } from '@/hooks/useMessage'
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
import { onlyNumberInputChange } from '@/util/input-utils'
|
import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
|
||||||
|
|
||||||
export default function Shed({ shedWidth, setShedWidth }) {
|
export default function Shed({ shedWidth, setShedWidth, shedPitch, setShedPitch, pitchText }) {
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
<div className="outline-form mb10">
|
||||||
|
<span className="mr10">{getMessage('slope')}</span>
|
||||||
|
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||||
|
<input type="text" className="input-origin block" value={shedPitch} onChange={(e) => onlyNumberWithDotInputChange(e, setShedPitch)} />
|
||||||
|
</div>
|
||||||
|
<span className="thin">{pitchText}</span>
|
||||||
|
</div>
|
||||||
<div className="outline-form">
|
<div className="outline-form">
|
||||||
<span className="mr10">{getMessage('shed.width')}</span>
|
<span className="mr10">{getMessage('shed.width')}</span>
|
||||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||||
|
|||||||
@ -2,216 +2,19 @@ import React, { useEffect, useState } from 'react'
|
|||||||
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
||||||
import { useMessage } from '@/hooks/useMessage'
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
|
|
||||||
//import { useRecoilState, useRecoilValue } from 'recoil'
|
|
||||||
//import { settingModalSecondOptionsState } from '@/store/settingAtom'
|
|
||||||
//import { useAxios } from '@/hooks/useAxios'
|
|
||||||
//import { useSwal } from '@/hooks/useSwal'
|
|
||||||
//import { setSurfaceShapePattern } from '@/util/canvas-util'
|
|
||||||
//import { canvasState } from '@/store/canvasAtom'
|
|
||||||
//import { POLYGON_TYPE } from '@/common/common'
|
|
||||||
|
|
||||||
export default function FirstOption() {
|
export default function FirstOption() {
|
||||||
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
|
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
|
||||||
const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
|
const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
|
||||||
const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
|
const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
|
|
||||||
//const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
|
|
||||||
//const { option1, option2, dimensionDisplay } = settingModalFirstOptions
|
|
||||||
//const { option3, option4 } = settingModalSecondOptions
|
|
||||||
//const { get, post } = useAxios()
|
|
||||||
//const { swalFire } = useSwal()
|
|
||||||
//const canvas = useRecoilValue(canvasState)
|
|
||||||
|
|
||||||
const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
|
const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
|
||||||
|
|
||||||
// 데이터를 최초 한 번만 조회
|
// 데이터를 최초 한 번만 조회
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('FirstOption useEffect 실행')
|
console.log('FirstOption useEffect 실행')
|
||||||
//fetchSettings()
|
|
||||||
//frontSettings()
|
|
||||||
}, [objectNo])
|
}, [objectNo])
|
||||||
|
|
||||||
// // Canvas Setting 조회 및 초기화
|
|
||||||
// const fetchSettings = async () => {
|
|
||||||
// try {
|
|
||||||
// const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
|
|
||||||
// const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
|
|
||||||
// const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
|
|
||||||
// const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
|
|
||||||
// const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
|
|
||||||
// const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
|
|
||||||
|
|
||||||
// // 데이터 설정
|
|
||||||
// setSettingModalFirstOptions({
|
|
||||||
// option1: optionData1,
|
|
||||||
// option2: optionData2,
|
|
||||||
// dimensionDisplay: optionData5,
|
|
||||||
// })
|
|
||||||
|
|
||||||
// setSettingModalSecondOptions({
|
|
||||||
// option3: optionData3,
|
|
||||||
// option4: optionData4,
|
|
||||||
// })
|
|
||||||
// } catch (error) {
|
|
||||||
// console.error('Data fetching error:', error)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const onClickOption = async (option) => {
|
|
||||||
// option.selected = !option.selected
|
|
||||||
|
|
||||||
// setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
|
|
||||||
// setSettingModalSecondOptions({ option3, option4 })
|
|
||||||
|
|
||||||
// try {
|
|
||||||
// // 서버에 전송할 데이터
|
|
||||||
// const dataToSend = {
|
|
||||||
// firstOption1: option1.map((item) => ({
|
|
||||||
// column: item.column,
|
|
||||||
// selected: item.selected,
|
|
||||||
// })),
|
|
||||||
// firstOption2: option2.map((item) => ({
|
|
||||||
// column: item.column,
|
|
||||||
// selected: item.selected,
|
|
||||||
// })),
|
|
||||||
// firstOption3: dimensionDisplay.map((item) => ({
|
|
||||||
// column: item.column,
|
|
||||||
// selected: item.selected,
|
|
||||||
// })),
|
|
||||||
// // secondOption1: secondOptions[0].option1.map((item) => ({
|
|
||||||
// // name: item.id,
|
|
||||||
// // name: item.name,
|
|
||||||
// // // 필요한 경우 데이터 항목 추가
|
|
||||||
// // })),
|
|
||||||
// secondOption2: option4.map((item) => ({
|
|
||||||
// column: item.column,
|
|
||||||
// selected: item.selected,
|
|
||||||
// })),
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const patternData = {
|
|
||||||
// objectNo,
|
|
||||||
// //디스플레이 설정(다중)
|
|
||||||
// allocDisplay: dataToSend.firstOption1[0].selected,
|
|
||||||
// outlineDisplay: dataToSend.firstOption1[1].selected,
|
|
||||||
// gridDisplay: dataToSend.firstOption1[2].selected,
|
|
||||||
// lineDisplay: dataToSend.firstOption1[3].selected,
|
|
||||||
// wordDisplay: dataToSend.firstOption1[4].selected,
|
|
||||||
// circuitNumDisplay: dataToSend.firstOption1[5].selected,
|
|
||||||
// flowDisplay: dataToSend.firstOption1[6].selected,
|
|
||||||
// trestleDisplay: dataToSend.firstOption1[7].selected,
|
|
||||||
// totalDisplay: dataToSend.firstOption1[8].selected,
|
|
||||||
// //차수 표시(다건)
|
|
||||||
// corridorDimension: dataToSend.firstOption3[0].selected,
|
|
||||||
// realDimension: dataToSend.firstOption3[1].selected,
|
|
||||||
// noneDimension: dataToSend.firstOption3[2].selected,
|
|
||||||
// //화면 표시(다중)
|
|
||||||
// onlyBorder: dataToSend.firstOption2[0].selected,
|
|
||||||
// lineHatch: dataToSend.firstOption2[1].selected,
|
|
||||||
// allPainted: dataToSend.firstOption2[2].selected,
|
|
||||||
// //흡착범위 설정(단건)
|
|
||||||
// adsorpRangeSmall: dataToSend.secondOption2[0].selected,
|
|
||||||
// adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
|
|
||||||
// adsorpRangeMedium: dataToSend.secondOption2[2].selected,
|
|
||||||
// adsorpRangeLarge: dataToSend.secondOption2[3].selected,
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // HTTP POST 요청 보내기
|
|
||||||
// await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
|
|
||||||
// swalFire({ text: getMessage(res.returnMessage) })
|
|
||||||
// })
|
|
||||||
// } catch (error) {
|
|
||||||
// swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const onClickOnlyOne = async (item) => {
|
|
||||||
// //화면 표시
|
|
||||||
// if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
|
|
||||||
// const options2 = settingModalFirstOptions?.option2.map((option2) => {
|
|
||||||
// option2.selected = option2.id === item.id
|
|
||||||
// return option2
|
|
||||||
// })
|
|
||||||
|
|
||||||
// const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
|
|
||||||
|
|
||||||
// polygons.forEach((polygon) => {
|
|
||||||
// setSurfaceShapePattern(polygon, item.column)
|
|
||||||
// })
|
|
||||||
|
|
||||||
// //치수 표시
|
|
||||||
// } else {
|
|
||||||
// const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
|
|
||||||
// option.selected = option.id === item.id
|
|
||||||
// return option
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
|
|
||||||
// setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
|
|
||||||
|
|
||||||
// try {
|
|
||||||
// // 서버에 전송할 데이터
|
|
||||||
// const dataToSend = {
|
|
||||||
// firstOption1: option1.map((item) => ({
|
|
||||||
// column: item.column,
|
|
||||||
// selected: item.selected,
|
|
||||||
// })),
|
|
||||||
// firstOption2: option2.map((item) => ({
|
|
||||||
// column: item.column,
|
|
||||||
// selected: item.selected,
|
|
||||||
// })),
|
|
||||||
// firstOption3: dimensionDisplay.map((item) => ({
|
|
||||||
// column: item.column,
|
|
||||||
// selected: item.selected,
|
|
||||||
// })),
|
|
||||||
// // secondOption1: secondOptions[0].option1.map((item) => ({
|
|
||||||
// // name: item.id,
|
|
||||||
// // name: item.name,
|
|
||||||
// // // 필요한 경우 데이터 항목 추가
|
|
||||||
// // })),
|
|
||||||
// secondOption2: option4.map((item) => ({
|
|
||||||
// column: item.column,
|
|
||||||
// selected: item.selected,
|
|
||||||
// })),
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const patternData = {
|
|
||||||
// objectNo,
|
|
||||||
// //디스플레이 설정(다중)
|
|
||||||
// allocDisplay: dataToSend.firstOption1[0].selected,
|
|
||||||
// outlineDisplay: dataToSend.firstOption1[1].selected,
|
|
||||||
// gridDisplay: dataToSend.firstOption1[2].selected,
|
|
||||||
// lineDisplay: dataToSend.firstOption1[3].selected,
|
|
||||||
// wordDisplay: dataToSend.firstOption1[4].selected,
|
|
||||||
// circuitNumDisplay: dataToSend.firstOption1[5].selected,
|
|
||||||
// flowDisplay: dataToSend.firstOption1[6].selected,
|
|
||||||
// trestleDisplay: dataToSend.firstOption1[7].selected,
|
|
||||||
// totalDisplay: dataToSend.firstOption1[8].selected,
|
|
||||||
// //차수 표시(다건)
|
|
||||||
// corridorDimension: dataToSend.firstOption3[0].selected,
|
|
||||||
// realDimension: dataToSend.firstOption3[1].selected,
|
|
||||||
// noneDimension: dataToSend.firstOption3[2].selected,
|
|
||||||
// //화면 표시(다중)
|
|
||||||
// onlyBorder: dataToSend.firstOption2[0].selected,
|
|
||||||
// lineHatch: dataToSend.firstOption2[1].selected,
|
|
||||||
// allPainted: dataToSend.firstOption2[2].selected,
|
|
||||||
// //흡착범위 설정(단건)
|
|
||||||
// adsorpRangeSmall: dataToSend.secondOption2[0].selected,
|
|
||||||
// adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
|
|
||||||
// adsorpRangeMedium: dataToSend.secondOption2[2].selected,
|
|
||||||
// adsorpRangeLarge: dataToSend.secondOption2[3].selected,
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // HTTP POST 요청 보내기
|
|
||||||
// await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
|
|
||||||
// swalFire({ text: getMessage(res.returnMessage) })
|
|
||||||
// })
|
|
||||||
// } catch (error) {
|
|
||||||
// swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="modal-check-btn-wrap">
|
<div className="modal-check-btn-wrap">
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
|
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
|
||||||
//import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
|
|
||||||
import { useMessage } from '@/hooks/useMessage'
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
import React, { useEffect, useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
|
import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
|
||||||
@ -10,20 +9,7 @@ import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/Pl
|
|||||||
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
|
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
|
||||||
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
||||||
|
|
||||||
//import { useAxios } from '@/hooks/useAxios'
|
|
||||||
//import { useSwal } from '@/hooks/useSwal'
|
|
||||||
// import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
|
|
||||||
|
|
||||||
export default function SecondOption() {
|
export default function SecondOption() {
|
||||||
//const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
|
|
||||||
//const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
|
|
||||||
// const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
|
|
||||||
// const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
|
|
||||||
// const { option1, option2, dimensionDisplay } = settingModalFirstOptions
|
|
||||||
// const { option3, option4 } = settingModalSecondOptions
|
|
||||||
// const { get, post } = useAxios()
|
|
||||||
// const { swalFire } = useSwal()
|
|
||||||
|
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const { addPopup, closePopup, closePopups } = usePopup()
|
const { addPopup, closePopup, closePopups } = usePopup()
|
||||||
const [showFontSettingModal, setShowFontSettingModal] = useState(false)
|
const [showFontSettingModal, setShowFontSettingModal] = useState(false)
|
||||||
@ -43,106 +29,6 @@ export default function SecondOption() {
|
|||||||
//fetchSettings()
|
//fetchSettings()
|
||||||
}, [objectNo])
|
}, [objectNo])
|
||||||
|
|
||||||
// Canvas Setting 조회 및 초기화
|
|
||||||
// const fetchSettings = async () => {
|
|
||||||
// try {
|
|
||||||
// const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
|
|
||||||
// const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
|
|
||||||
// const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
|
|
||||||
// const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
|
|
||||||
// const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
|
|
||||||
// const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
|
|
||||||
|
|
||||||
// setSettingModalFirstOptions({
|
|
||||||
// option1: optionData1,
|
|
||||||
// option2: optionData2,
|
|
||||||
// dimensionDisplay: optionData5,
|
|
||||||
// })
|
|
||||||
// setSettingModalSecondOptions({
|
|
||||||
// option3: optionData3,
|
|
||||||
// option4: optionData4,
|
|
||||||
// })
|
|
||||||
// } catch (error) {
|
|
||||||
// console.error('Data fetching error:', error)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const onClickOption = async (option) => {
|
|
||||||
// // option4에서 한 개만 선택 가능하도록 처리
|
|
||||||
// const updatedOption4 = option4.map((item) =>
|
|
||||||
// item.id === option.id
|
|
||||||
// ? { ...item, selected: true }
|
|
||||||
// : {
|
|
||||||
// ...item,
|
|
||||||
// selected: false,
|
|
||||||
// },
|
|
||||||
// )
|
|
||||||
|
|
||||||
// setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
|
|
||||||
// setSettingModalSecondOptions({ option3, option4: updatedOption4 })
|
|
||||||
|
|
||||||
// try {
|
|
||||||
// // 서버에 전송할 데이터
|
|
||||||
// const dataToSend = {
|
|
||||||
// firstOption1: option1.map((item) => ({
|
|
||||||
// column: item.column,
|
|
||||||
// selected: item.selected,
|
|
||||||
// })),
|
|
||||||
// firstOption2: option2.map((item) => ({
|
|
||||||
// column: item.column,
|
|
||||||
// selected: item.selected,
|
|
||||||
// })),
|
|
||||||
// firstOption3: dimensionDisplay.map((item) => ({
|
|
||||||
// column: item.column,
|
|
||||||
// selected: item.selected,
|
|
||||||
// })),
|
|
||||||
// // secondOption1: secondOptions[0].option3.map((item) => ({
|
|
||||||
// // name: item.id,
|
|
||||||
// // name: item.name,
|
|
||||||
// // // 필요한 경우 데이터 항목 추가
|
|
||||||
// // })),
|
|
||||||
// secondOption2: updatedOption4.map((item) => ({
|
|
||||||
// column: item.column,
|
|
||||||
// selected: item.selected,
|
|
||||||
// })),
|
|
||||||
// }
|
|
||||||
// const patternData = {
|
|
||||||
// objectNo,
|
|
||||||
// //디스플레이 설정(다중)
|
|
||||||
// allocDisplay: dataToSend.firstOption1[0].selected,
|
|
||||||
// outlineDisplay: dataToSend.firstOption1[1].selected,
|
|
||||||
// gridDisplay: dataToSend.firstOption1[2].selected,
|
|
||||||
// lineDisplay: dataToSend.firstOption1[3].selected,
|
|
||||||
// wordDisplay: dataToSend.firstOption1[4].selected,
|
|
||||||
// circuitNumDisplay: dataToSend.firstOption1[5].selected,
|
|
||||||
// flowDisplay: dataToSend.firstOption1[6].selected,
|
|
||||||
// trestleDisplay: dataToSend.firstOption1[7].selected,
|
|
||||||
// totalDisplay: dataToSend.firstOption1[8].selected,
|
|
||||||
// //차수 표시(다건)
|
|
||||||
// corridorDimension: dataToSend.firstOption3[0].selected,
|
|
||||||
// realDimension: dataToSend.firstOption3[1].selected,
|
|
||||||
// noneDimension: dataToSend.firstOption3[2].selected,
|
|
||||||
// //화면 표시(다중)
|
|
||||||
// onlyBorder: dataToSend.firstOption2[0].selected,
|
|
||||||
// lineHatch: dataToSend.firstOption2[1].selected,
|
|
||||||
// allPainted: dataToSend.firstOption2[2].selected,
|
|
||||||
// //흡착범위 설정(단건)
|
|
||||||
// adsorpRangeSmall: dataToSend.secondOption2[0].selected,
|
|
||||||
// adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
|
|
||||||
// adsorpRangeMedium: dataToSend.secondOption2[2].selected,
|
|
||||||
// adsorpRangeLarge: dataToSend.secondOption2[3].selected,
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // HTTP POST 요청 보내기
|
|
||||||
// await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
|
|
||||||
// swalFire({ text: getMessage(res.returnMessage) })
|
|
||||||
// })
|
|
||||||
// } catch (error) {
|
|
||||||
// swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
|
|
||||||
// }
|
|
||||||
// setAdsorptionRange(option.range)
|
|
||||||
// }
|
|
||||||
|
|
||||||
let dimensionId = null
|
let dimensionId = null
|
||||||
let fontId = null
|
let fontId = null
|
||||||
let planSizeId = null
|
let planSizeId = null
|
||||||
|
|||||||
@ -89,8 +89,8 @@ export default function Header(props) {
|
|||||||
name: 'header.menus.management',
|
name: 'header.menus.management',
|
||||||
url: '',
|
url: '',
|
||||||
children: [
|
children: [
|
||||||
{ id: 3, name: 'header.menus.management.stuff', url: '/management/stuff', children: [] },
|
{ id: 3, name: 'header.menus.management.newStuff', url: '/management/stuff/tempdetail', children: [] },
|
||||||
{ id: 4, name: 'header.menus.management.plan', url: '/floor-plan', children: [] },
|
{ id: 4, name: 'header.menus.management.stuffList', url: '/management/stuff', children: [] },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -15,7 +15,7 @@ export default function MainContents() {
|
|||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
||||||
const { promiseGet, get } = useAxios(globalLocaleState)
|
const { promiseGet } = useAxios(globalLocaleState)
|
||||||
|
|
||||||
const sessionState = useRecoilValue(sessionStore)
|
const sessionState = useRecoilValue(sessionStore)
|
||||||
|
|
||||||
@ -118,7 +118,7 @@ export default function MainContents() {
|
|||||||
key={row.objectNo}
|
key={row.objectNo}
|
||||||
className="recently-item"
|
className="recently-item"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (row.objectNo.substring(0, 1) === 'R') {
|
if (row.tempFlg === '0') {
|
||||||
router.push(`/management/stuff/detail?objectNo=${row.objectNo.toString()}`)
|
router.push(`/management/stuff/detail?objectNo=${row.objectNo.toString()}`)
|
||||||
} else {
|
} else {
|
||||||
router.push(`/management/stuff/tempdetail?objectNo=${row.objectNo.toString()}`)
|
router.push(`/management/stuff/tempdetail?objectNo=${row.objectNo.toString()}`)
|
||||||
|
|||||||
@ -1,12 +1,11 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import React, { useEffect, useState, useRef } from 'react'
|
import { useEffect, useState, useRef, useContext } from 'react'
|
||||||
import { useRouter, usePathname } from 'next/navigation'
|
import { useRouter, usePathname } from 'next/navigation'
|
||||||
import { Button } from '@nextui-org/react'
|
|
||||||
import { useAxios } from '@/hooks/useAxios'
|
import { useAxios } from '@/hooks/useAxios'
|
||||||
import { useMessage } from '@/hooks/useMessage'
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
import StuffQGrid from './StuffQGrid'
|
import StuffQGrid from './StuffQGrid'
|
||||||
import { useRecoilValue, useRecoilState } from 'recoil'
|
import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil'
|
||||||
import { stuffSearchState } from '@/store/stuffAtom'
|
import { stuffSearchState } from '@/store/stuffAtom'
|
||||||
import { queryStringFormatter, isEmptyArray } from '@/util/common-utils'
|
import { queryStringFormatter, isEmptyArray } from '@/util/common-utils'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
@ -17,10 +16,12 @@ import KO from '@/locales/ko.json'
|
|||||||
import JA from '@/locales/ja.json'
|
import JA from '@/locales/ja.json'
|
||||||
import QPagination from '../common/pagination/QPagination'
|
import QPagination from '../common/pagination/QPagination'
|
||||||
import { sessionStore } from '@/store/commonAtom'
|
import { sessionStore } from '@/store/commonAtom'
|
||||||
|
import { SessionContext } from '@/app/SessionProvider'
|
||||||
|
|
||||||
export default function Stuff() {
|
export default function Stuff() {
|
||||||
const sessionState = useRecoilValue(sessionStore)
|
const sessionState = useRecoilValue(sessionStore)
|
||||||
const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
|
const { session } = useContext(SessionContext)
|
||||||
|
const setAppMessageState = useSetRecoilState(appMessageStore)
|
||||||
const stuffSearchParams = useRecoilValue(stuffSearchState)
|
const stuffSearchParams = useRecoilValue(stuffSearchState)
|
||||||
const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
|
const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
@ -50,12 +51,11 @@ export default function Stuff() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//물건번호 복사버튼 옆에 영역
|
//물건번호 복사버튼 옆에 영역
|
||||||
const onDoubleClick = (e) => {
|
const onDoubleClick = (data) => {
|
||||||
let objectNo = e.target.innerText
|
if (data.tempFlg === '0') {
|
||||||
if (objectNo.substring(0, 1) === 'R') {
|
router.push(`${pathname}/detail?objectNo=${data.objectNo.toString()}`, { scroll: false })
|
||||||
router.push(`${pathname}/detail?objectNo=${objectNo.toString()}`, { scroll: false })
|
|
||||||
} else {
|
} else {
|
||||||
router.push(`${pathname}/tempdetail?objectNo=${objectNo.toString()}`, { scroll: false })
|
router.push(`${pathname}/tempdetail?objectNo=${data.objectNo.toString()}`, { scroll: false })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -71,7 +71,7 @@ export default function Stuff() {
|
|||||||
// headerCheckboxSelectionCurrentPageOnly: true, //페이징시 현재 페이지만 체크되도록
|
// headerCheckboxSelectionCurrentPageOnly: true, //페이징시 현재 페이지만 체크되도록
|
||||||
// checkboxSelection: true,
|
// checkboxSelection: true,
|
||||||
// showDisabledCheckboxes: true,
|
// showDisabledCheckboxes: true,
|
||||||
cellStyle: { textAlign: 'center' },
|
cellStyle: { justifyContent: 'center' },
|
||||||
valueFormatter: function (params) {
|
valueFormatter: function (params) {
|
||||||
if (params.value) {
|
if (params.value) {
|
||||||
return dayjs(params?.value).format('YYYY.MM.DD HH:mm:ss')
|
return dayjs(params?.value).format('YYYY.MM.DD HH:mm:ss')
|
||||||
@ -87,29 +87,31 @@ export default function Stuff() {
|
|||||||
cellRenderer: function (params) {
|
cellRenderer: function (params) {
|
||||||
if (params.data.objectNo) {
|
if (params.data.objectNo) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="copy-ico-wrap" onDoubleClick={() => onDoubleClick(params.data)}>
|
||||||
<Button
|
{(params.data.tempFlg === '0' && (
|
||||||
size="sm"
|
<>
|
||||||
color="default"
|
{params.value.toLocaleString()}
|
||||||
onPress={() => {
|
<button
|
||||||
copyNo(params.value)
|
type="button"
|
||||||
}}
|
className="copy_ico"
|
||||||
>
|
onClick={() => {
|
||||||
복사
|
copyNo(params.value)
|
||||||
</Button>
|
}}
|
||||||
<span onDoubleClick={onDoubleClick}>{params.value}</span>
|
></button>
|
||||||
|
</>
|
||||||
|
)) || <>{getMessage('stuff.gridData.tempObjectNo')}</>}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
cellRendererParams: {
|
cellRendererParams: {
|
||||||
onPress: copyNo,
|
onClick: copyNo,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'planTotCnt',
|
field: 'planTotCnt',
|
||||||
headerName: getMessage('stuff.gridHeader.planTotCnt'),
|
headerName: getMessage('stuff.gridHeader.planTotCnt'),
|
||||||
cellStyle: { textAlign: 'right' },
|
cellStyle: { justifyContent: 'center' },
|
||||||
},
|
},
|
||||||
{ field: 'objectName', headerName: getMessage('stuff.gridHeader.objectName'), cellStyle: { textAlign: 'left' } },
|
{ field: 'objectName', headerName: getMessage('stuff.gridHeader.objectName'), cellStyle: { textAlign: 'left' } },
|
||||||
{
|
{
|
||||||
@ -131,7 +133,7 @@ export default function Stuff() {
|
|||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
cellStyle: { textAlign: 'center' },
|
cellStyle: { justifyContent: 'center' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'createDatetime',
|
field: 'createDatetime',
|
||||||
@ -143,7 +145,7 @@ export default function Stuff() {
|
|||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
cellStyle: { textAlign: 'center' },
|
cellStyle: { justifyContent: 'center' },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
gridCount: 0,
|
gridCount: 0,
|
||||||
@ -156,7 +158,7 @@ export default function Stuff() {
|
|||||||
} else {
|
} else {
|
||||||
//T 면 임시 R은 진짜
|
//T 면 임시 R은 진짜
|
||||||
if (event.data.objectNo) {
|
if (event.data.objectNo) {
|
||||||
if (event.data.objectNo.substring(0, 1) === 'R') {
|
if (event.data.tempFlg === '0') {
|
||||||
router.push(`${pathname}/detail?objectNo=${event.data.objectNo.toString()}`, { scroll: false })
|
router.push(`${pathname}/detail?objectNo=${event.data.objectNo.toString()}`, { scroll: false })
|
||||||
} else {
|
} else {
|
||||||
router.push(`${pathname}/tempdetail?objectNo=${event.data.objectNo.toString()}`, { scroll: false })
|
router.push(`${pathname}/tempdetail?objectNo=${event.data.objectNo.toString()}`, { scroll: false })
|
||||||
@ -223,11 +225,31 @@ export default function Stuff() {
|
|||||||
|
|
||||||
// 진입시 그리드 데이터 조회
|
// 진입시 그리드 데이터 조회
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isObjectNotEmpty(sessionState)) {
|
// if (isObjectNotEmpty(sessionState)) {
|
||||||
//물건 메뉴 눌러서 최초 진입 sessionState
|
if (isObjectNotEmpty(session)) {
|
||||||
|
//물건 메뉴 눌러서 최초 진입
|
||||||
if (stuffSearchParams?.code === 'S') {
|
if (stuffSearchParams?.code === 'S') {
|
||||||
|
// const params = {
|
||||||
|
// saleStoreId: sessionState?.storeId,
|
||||||
|
// schObjectNo: stuffSearchParams?.schObjectNo,
|
||||||
|
// schAddress: stuffSearchParams?.schAddress,
|
||||||
|
// schObjectName: stuffSearchParams?.schObjectName,
|
||||||
|
// schSaleStoreName: stuffSearchParams?.schSaleStoreName,
|
||||||
|
// schReceiveUser: stuffSearchParams?.schReceiveUser,
|
||||||
|
// schDispCompanyName: stuffSearchParams?.schDispCompanyName,
|
||||||
|
// schDateType: stuffSearchParams.schDateType,
|
||||||
|
// schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
|
||||||
|
// schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
|
||||||
|
// startRow: (pageNo - 1) * pageSize + 1,
|
||||||
|
// endRow: pageNo * pageSize,
|
||||||
|
// schSelSaleStoreId: stuffSearchParams?.schOtherSelSaleStoreId
|
||||||
|
// ? stuffSearchParams.schOtherSelSaleStoreId
|
||||||
|
// : stuffSearchParams.schSelSaleStoreId,
|
||||||
|
// schSortType: stuffSearchParams.schSortType,
|
||||||
|
// }
|
||||||
|
|
||||||
const params = {
|
const params = {
|
||||||
saleStoreId: sessionState?.storeId,
|
saleStoreId: session?.storeId,
|
||||||
schObjectNo: stuffSearchParams?.schObjectNo,
|
schObjectNo: stuffSearchParams?.schObjectNo,
|
||||||
schAddress: stuffSearchParams?.schAddress,
|
schAddress: stuffSearchParams?.schAddress,
|
||||||
schObjectName: stuffSearchParams?.schObjectName,
|
schObjectName: stuffSearchParams?.schObjectName,
|
||||||
@ -239,7 +261,9 @@ export default function Stuff() {
|
|||||||
schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
|
schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
|
||||||
startRow: (pageNo - 1) * pageSize + 1,
|
startRow: (pageNo - 1) * pageSize + 1,
|
||||||
endRow: pageNo * pageSize,
|
endRow: pageNo * pageSize,
|
||||||
schSelSaleStoreId: '',
|
schSelSaleStoreId: stuffSearchParams?.schOtherSelSaleStoreId
|
||||||
|
? stuffSearchParams.schOtherSelSaleStoreId
|
||||||
|
: stuffSearchParams.schSelSaleStoreId,
|
||||||
schSortType: stuffSearchParams.schSortType,
|
schSortType: stuffSearchParams.schSortType,
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -255,12 +279,30 @@ export default function Stuff() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
fetchData()
|
fetchData()
|
||||||
} else {
|
} else if (stuffSearchParams?.code === 'M') {
|
||||||
//메인화면에서 진입
|
//메인화면에서 진입
|
||||||
|
// const params = {
|
||||||
|
// saleStoreId: sessionState?.storeId,
|
||||||
|
// schObjectNo: stuffSearchParams.schObjectNo,
|
||||||
|
// schAddress: 'dfdfdfdfdf',
|
||||||
|
// schObjectName: '',
|
||||||
|
// schSaleStoreName: '',
|
||||||
|
// schReceiveUser: '',
|
||||||
|
// schDispCompanyName: '',
|
||||||
|
// schDateType: 'U',
|
||||||
|
// schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
|
||||||
|
// schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
|
||||||
|
// startRow: (pageNo - 1) * pageSize + 1,
|
||||||
|
// endRow: pageNo * pageSize,
|
||||||
|
// schSelSaleStoreId: stuffSearchParams?.schOtherSelSaleStoreId
|
||||||
|
// ? stuffSearchParams.schOtherSelSaleStoreId
|
||||||
|
// : stuffSearchParams.schSelSaleStoreId,
|
||||||
|
// schSortType: 'R',
|
||||||
|
// }
|
||||||
const params = {
|
const params = {
|
||||||
saleStoreId: sessionState?.storeId,
|
saleStoreId: session?.storeId,
|
||||||
schObjectNo: stuffSearchParams.schObjectNo,
|
schObjectNo: stuffSearchParams.schObjectNo,
|
||||||
schAddress: '',
|
schAddress: 'dfdfdfdfdf',
|
||||||
schObjectName: '',
|
schObjectName: '',
|
||||||
schSaleStoreName: '',
|
schSaleStoreName: '',
|
||||||
schReceiveUser: '',
|
schReceiveUser: '',
|
||||||
@ -270,25 +312,31 @@ export default function Stuff() {
|
|||||||
schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
|
schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
|
||||||
startRow: (pageNo - 1) * pageSize + 1,
|
startRow: (pageNo - 1) * pageSize + 1,
|
||||||
endRow: pageNo * pageSize,
|
endRow: pageNo * pageSize,
|
||||||
schSelSaleStoreId: '',
|
schSelSaleStoreId: stuffSearchParams?.schOtherSelSaleStoreId
|
||||||
|
? stuffSearchParams.schOtherSelSaleStoreId
|
||||||
|
: stuffSearchParams.schSelSaleStoreId,
|
||||||
schSortType: 'R',
|
schSortType: 'R',
|
||||||
}
|
}
|
||||||
|
setStuffSearch({
|
||||||
|
...params,
|
||||||
|
})
|
||||||
|
|
||||||
async function fetchData() {
|
// async function fetchData() {
|
||||||
const apiUrl = `/api/object/list?${queryStringFormatter(params)}`
|
// const apiUrl = `/api/object/list?${queryStringFormatter(params)}`
|
||||||
await get({
|
// await get({
|
||||||
url: apiUrl,
|
// url: apiUrl,
|
||||||
}).then((res) => {
|
// }).then((res) => {
|
||||||
if (!isEmptyArray(res)) {
|
// if (!isEmptyArray(res)) {
|
||||||
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
|
// setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
|
||||||
setTotalCount(res[0].totCnt)
|
// setTotalCount(res[0].totCnt)
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
fetchData()
|
// fetchData()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [pageNo, sessionState])
|
// }, [pageNo, sessionState, stuffSearchParams])
|
||||||
|
}, [pageNo, stuffSearchParams])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (stuffSearchParams?.code === 'E') {
|
if (stuffSearchParams?.code === 'E') {
|
||||||
@ -297,9 +345,11 @@ export default function Stuff() {
|
|||||||
stuffSearchParams.schSortType = defaultSortType
|
stuffSearchParams.schSortType = defaultSortType
|
||||||
|
|
||||||
setPageNo(1)
|
setPageNo(1)
|
||||||
|
|
||||||
//조회를 눌렀을때
|
//조회를 눌렀을때
|
||||||
async function fetchData() {
|
async function fetchData() {
|
||||||
const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
|
// const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
|
||||||
|
const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
|
||||||
await get({ url: apiUrl }).then((res) => {
|
await get({ url: apiUrl }).then((res) => {
|
||||||
if (!isEmptyArray(res)) {
|
if (!isEmptyArray(res)) {
|
||||||
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
|
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
|
||||||
@ -319,16 +369,20 @@ export default function Stuff() {
|
|||||||
let startRow = (1 - 1) * e.target.value + 1
|
let startRow = (1 - 1) * e.target.value + 1
|
||||||
stuffSearchParams.startRow = startRow
|
stuffSearchParams.startRow = startRow
|
||||||
stuffSearchParams.endRow = 1 * e.target.value
|
stuffSearchParams.endRow = 1 * e.target.value
|
||||||
|
stuffSearchParams.schSelSaleStoreId = stuffSearchParams?.schOtherSelSaleStoreId
|
||||||
|
? stuffSearchParams.schOtherSelSaleStoreId
|
||||||
|
: stuffSearchParams.schSelSaleStoreId
|
||||||
setPageSize(e.target.value)
|
setPageSize(e.target.value)
|
||||||
setStuffSearch({
|
setStuffSearch({
|
||||||
...stuffSearch,
|
...stuffSearchParams,
|
||||||
code: 'S',
|
// code: 'P',
|
||||||
startRow: startRow,
|
startRow: startRow,
|
||||||
endRow: 1 * e.target.value,
|
endRow: 1 * e.target.value,
|
||||||
})
|
})
|
||||||
|
|
||||||
setPageNo(1)
|
setPageNo(1)
|
||||||
const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
|
// const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
|
||||||
|
const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
|
||||||
get({ url: apiUrl }).then((res) => {
|
get({ url: apiUrl }).then((res) => {
|
||||||
if (!isEmptyArray(res)) {
|
if (!isEmptyArray(res)) {
|
||||||
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
|
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
|
||||||
@ -347,6 +401,9 @@ export default function Stuff() {
|
|||||||
stuffSearchParams.endRow = 1 * pageSize
|
stuffSearchParams.endRow = 1 * pageSize
|
||||||
|
|
||||||
stuffSearchParams.schSortType = e.target.value
|
stuffSearchParams.schSortType = e.target.value
|
||||||
|
stuffSearchParams.schSelSaleStoreId = stuffSearchParams?.schOtherSelSaleStoreId
|
||||||
|
? stuffSearchParams.schOtherSelSaleStoreId
|
||||||
|
: stuffSearchParams.schSelSaleStoreId
|
||||||
setDefaultSortType(e.target.value)
|
setDefaultSortType(e.target.value)
|
||||||
setStuffSearch({
|
setStuffSearch({
|
||||||
...stuffSearch,
|
...stuffSearch,
|
||||||
@ -357,8 +414,8 @@ export default function Stuff() {
|
|||||||
})
|
})
|
||||||
|
|
||||||
setPageNo(1)
|
setPageNo(1)
|
||||||
|
// const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
|
||||||
const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
|
const apiUrl = `/api/object/list?saleStoreId=${session?.storeId}&${queryStringFormatter(stuffSearchParams)}`
|
||||||
get({ url: apiUrl }).then((res) => {
|
get({ url: apiUrl }).then((res) => {
|
||||||
if (!isEmptyArray(res)) {
|
if (!isEmptyArray(res)) {
|
||||||
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
|
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
|
||||||
@ -381,7 +438,9 @@ export default function Stuff() {
|
|||||||
// 페이징 현재페이지 변경
|
// 페이징 현재페이지 변경
|
||||||
const handleChangePage = (page) => {
|
const handleChangePage = (page) => {
|
||||||
stuffSearchParams.code = 'S'
|
stuffSearchParams.code = 'S'
|
||||||
|
stuffSearchParams.schSelSaleStoreId = stuffSearchParams?.schOtherSelSaleStoreId
|
||||||
|
? stuffSearchParams.schOtherSelSaleStoreId
|
||||||
|
: stuffSearchParams.schSelSaleStoreId
|
||||||
setStuffSearch({
|
setStuffSearch({
|
||||||
...stuffSearch,
|
...stuffSearch,
|
||||||
code: 'S',
|
code: 'S',
|
||||||
@ -404,10 +463,7 @@ export default function Stuff() {
|
|||||||
{getMessage('stuff.search.grid.all')}
|
{getMessage('stuff.search.grid.all')}
|
||||||
<span>{convertNumberToPriceDecimal(totalCount)}</span>
|
<span>{convertNumberToPriceDecimal(totalCount)}</span>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li></li>
|
||||||
{/* {getMessage('stuff.search.grid.selected')} */}
|
|
||||||
{/* <span className="red">{convertNumberToPriceDecimal(selectedRowDataCount)}</span> */}
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div className="left-unit-box">
|
<div className="left-unit-box">
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import React, { useState, useEffect, useRef } from 'react'
|
import { useState, useEffect, useRef, useContext } from 'react'
|
||||||
import { useRouter, useSearchParams, usePathname } from 'next/navigation'
|
import { useRouter, useSearchParams, usePathname } from 'next/navigation'
|
||||||
import { Button } from '@nextui-org/react'
|
import { Button } from '@nextui-org/react'
|
||||||
import Select, { components } from 'react-select'
|
import Select, { components } from 'react-select'
|
||||||
@ -12,6 +12,7 @@ import { useMessage } from '@/hooks/useMessage'
|
|||||||
import { useForm } from 'react-hook-form'
|
import { useForm } from 'react-hook-form'
|
||||||
import { useRecoilValue, useSetRecoilState } from 'recoil'
|
import { useRecoilValue, useSetRecoilState } from 'recoil'
|
||||||
import { sessionStore } from '@/store/commonAtom'
|
import { sessionStore } from '@/store/commonAtom'
|
||||||
|
import { SessionContext } from '@/app/SessionProvider'
|
||||||
import FindAddressPop from './popup/FindAddressPop'
|
import FindAddressPop from './popup/FindAddressPop'
|
||||||
import PlanRequestPop from './popup/PlanRequestPop'
|
import PlanRequestPop from './popup/PlanRequestPop'
|
||||||
import WindSelectPop from './popup/WindSelectPop'
|
import WindSelectPop from './popup/WindSelectPop'
|
||||||
@ -22,19 +23,13 @@ import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
|
|||||||
export default function StuffDetail() {
|
export default function StuffDetail() {
|
||||||
const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState) //견적서 화면용 물건번호리코일
|
const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState) //견적서 화면용 물건번호리코일
|
||||||
|
|
||||||
const inputReceiveUserEl = useRef(null) //담당자ref
|
|
||||||
const inputObjectNameEl = useRef(null) //물건명ref
|
|
||||||
const inputZipNoEl = useRef(null) //우편번호ref
|
|
||||||
const inputAddressEl = useRef(null) //주소ref
|
|
||||||
const inputVerticalSnowCoverEl = useRef(null) //수직적설량ref
|
|
||||||
const inputInstallHeightEl = useRef(null) //설치높이ref
|
|
||||||
|
|
||||||
//공통코드
|
//공통코드
|
||||||
const { commonCode, findCommonCode } = useCommonCode()
|
const { commonCode, findCommonCode } = useCommonCode()
|
||||||
const [selOptions, setSelOptions] = useState('') //선택한 1차점
|
const [selOptions, setSelOptions] = useState('') //선택한 1차점
|
||||||
const [otherSelOptions, setOtherSelOptions] = useState('') //선택한 1차점외
|
const [otherSelOptions, setOtherSelOptions] = useState('') //선택한 1차점외
|
||||||
|
|
||||||
const sessionState = useRecoilValue(sessionStore)
|
const sessionState = useRecoilValue(sessionStore)
|
||||||
|
const { session } = useContext(SessionContext)
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const pathname = usePathname()
|
const pathname = usePathname()
|
||||||
@ -262,7 +257,7 @@ export default function StuffDetail() {
|
|||||||
onClick={() => {
|
onClick={() => {
|
||||||
//mid:5(견적서), /pid:플랜번호
|
//mid:5(견적서), /pid:플랜번호
|
||||||
setFloorPlanObjectNo({ floorPlanObjectNo: params.data.objectNo })
|
setFloorPlanObjectNo({ floorPlanObjectNo: params.data.objectNo })
|
||||||
router.push(`/floor-plan/5/${params.data.planNo}`)
|
router.push(`/floor-plan/estimate/5/${params.data.planNo}`)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span className="file"></span>
|
<span className="file"></span>
|
||||||
@ -322,55 +317,91 @@ export default function StuffDetail() {
|
|||||||
//1차점 : X167 T01
|
//1차점 : X167 T01
|
||||||
//2차점 : 10X22, 201X112
|
//2차점 : 10X22, 201X112
|
||||||
let url
|
let url
|
||||||
if (sessionState?.storeId === 'T01') {
|
let firstList
|
||||||
// url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
|
let otherList
|
||||||
url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
|
let favList
|
||||||
|
// if (sessionState?.storeId === 'T01') {
|
||||||
|
if (session?.storeId === 'T01') {
|
||||||
|
url = `/api/object/saleStore/${session?.storeId}/firstList?userId=${session?.userId}`
|
||||||
} else {
|
} else {
|
||||||
url = `/api/object/saleStore/${sessionState?.storeId}/list`
|
if (session.storeLvl === '1') {
|
||||||
|
url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
|
||||||
|
} else {
|
||||||
|
url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${session?.userId}`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
get({ url: url }).then((res) => {
|
get({ url: url }).then((res) => {
|
||||||
if (!isEmptyArray(res)) {
|
if (!isEmptyArray(res)) {
|
||||||
const firstList = res.filter((row) => row.saleStoreLevel === '1')
|
res.map((row) => {
|
||||||
let favList
|
row.value = row.saleStoreId
|
||||||
if (sessionState?.storeId === 'T01') {
|
row.label = row.saleStoreName
|
||||||
|
})
|
||||||
|
if (session?.storeId === 'T01') {
|
||||||
|
firstList = res
|
||||||
firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
|
firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
|
||||||
favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
|
favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
|
||||||
|
|
||||||
setSaleStoreList(firstList)
|
setSaleStoreList(firstList)
|
||||||
setFavoriteStoreList(favList)
|
setFavoriteStoreList(favList)
|
||||||
setShowSaleStoreList(favList)
|
setShowSaleStoreList(favList)
|
||||||
} else {
|
setSelOptions(session?.storeId)
|
||||||
//1차점 셀렉트박스
|
form.setValue('saleStoreId', session?.storeId)
|
||||||
setSaleStoreList(firstList)
|
form.setValue('saleStoreLevel', session?.storeLvl)
|
||||||
}
|
//T01일떄는 1차점을 고른다음 2차점 목록 조회하기
|
||||||
const otherList = res.filter((row) => row.saleStoreLevel !== '1')
|
//디폴트 값(T01)으로 2차점목록 조회하기
|
||||||
let filterOtherList
|
url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=0&userId=${session?.userId}`
|
||||||
if (sessionState?.storeId === 'T01') {
|
get({ url: url }).then((res) => {
|
||||||
filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
|
if (!isEmptyArray(res)) {
|
||||||
|
res.map((row) => {
|
||||||
|
row.value = row.saleStoreId
|
||||||
|
row.label = row.saleStoreName
|
||||||
|
})
|
||||||
|
|
||||||
setOriginOtherSaleStoreList(filterOtherList)
|
otherList = res
|
||||||
setOtherSaleStoreList(filterOtherList)
|
setOtherSaleStoreList(otherList)
|
||||||
|
} else {
|
||||||
|
setOtherSaleStoreList([])
|
||||||
|
}
|
||||||
|
})
|
||||||
} else {
|
} else {
|
||||||
//T01 아니고 2차점 판매점 셀렉트박스
|
if (session?.storeLvl === '1') {
|
||||||
setOriginOtherSaleStoreList(otherList)
|
firstList = res
|
||||||
setOtherSaleStoreList(otherList)
|
favList = res.filter((row) => row.priority !== 'B')
|
||||||
}
|
otherList = res.filter((row) => row.firstAgentYn === 'N')
|
||||||
|
|
||||||
if (sessionState?.storeLvl === '1') {
|
setSaleStoreList(firstList)
|
||||||
setSelOptions(sessionState?.storeId)
|
setFavoriteStoreList(firstList)
|
||||||
form.setValue('saleStoreId', sessionState?.storeId)
|
setShowSaleStoreList(firstList)
|
||||||
form.setValue('saleStoreLevel', sessionState?.storeLvl)
|
setSelOptions(firstList[0].saleStoreId)
|
||||||
} else {
|
form.setValue('saleStoreId', session?.storeId)
|
||||||
setSelOptions(firstList[0].saleStoreId)
|
form.setValue('saleStoreLevel', session?.storeLvl)
|
||||||
setOtherSelOptions(sessionState?.storeId)
|
|
||||||
form.setValue('saleStoreId', firstList[0].saleStoreId)
|
setOtherSaleStoreList(otherList)
|
||||||
form.setValue('otherSaleStoreId', sessionState?.storeId)
|
} else {
|
||||||
form.setValue('otherSaleStoreLevel', sessionState?.storeLvl)
|
//10X22, 201X112,202X217
|
||||||
|
firstList = res.filter((row) => row.firstAgentYn === 'Y')
|
||||||
|
setSaleStoreList(firstList)
|
||||||
|
setFavoriteStoreList(firstList)
|
||||||
|
setShowSaleStoreList(firstList)
|
||||||
|
setSelOptions(firstList[0].saleStoreId)
|
||||||
|
|
||||||
|
form.setValue('saleStoreId', firstList[0].saleStoreId)
|
||||||
|
form.setValue('saleStoreLevel', firstList[0].saleStoreLevel)
|
||||||
|
|
||||||
|
otherList = res.filter((row) => row.firstAgentYn === 'N')
|
||||||
|
setOtherSaleStoreList(otherList)
|
||||||
|
//2차 판매점명/ID는 본인을 셀렉트
|
||||||
|
setOtherSelOptions(session?.storeId)
|
||||||
|
form.setValue('otherSaleStoreId', session?.storeId)
|
||||||
|
form.setValue('otherSaleStoreLevel', session?.storeLvl)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}, [objectNo, sessionState])
|
// }, [objectNo, sessionState])
|
||||||
|
}, [objectNo, session])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const code1 = findCommonCode(200800) //경칭
|
const code1 = findCommonCode(200800) //경칭
|
||||||
@ -400,38 +431,78 @@ export default function StuffDetail() {
|
|||||||
//1차점 : X167 T01
|
//1차점 : X167 T01
|
||||||
//2차점 : 10X22, 201X112
|
//2차점 : 10X22, 201X112
|
||||||
let url
|
let url
|
||||||
if (sessionState?.storeId === 'T01') {
|
let firstList
|
||||||
// url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
|
let otherList
|
||||||
url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
|
let favList
|
||||||
|
// if (sessionState?.storeId === 'T01') {
|
||||||
|
if (session?.storeId === 'T01') {
|
||||||
|
// url = `/api/object/saleStore/${sessionState?.storeId}/firstList?userId=${sessionState?.userId}`
|
||||||
|
url = `/api/object/saleStore/${session?.storeId}/firstList?userId=${session?.userId}`
|
||||||
} else {
|
} else {
|
||||||
url = `/api/object/saleStore/${sessionState?.storeId}/list`
|
// if (sessionState.storeLvl === '1') {
|
||||||
|
if (session.storeLvl === '1') {
|
||||||
|
// url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
|
||||||
|
url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${session?.userId}`
|
||||||
|
} else {
|
||||||
|
// url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
|
||||||
|
url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${session?.userId}`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
get({ url: url }).then((res) => {
|
get({ url: url }).then((res) => {
|
||||||
if (!isEmptyArray(res)) {
|
if (!isEmptyArray(res)) {
|
||||||
const firstList = res.filter((row) => row.saleStoreLevel === '1')
|
// if (sessionState?.storeId === 'T01') {
|
||||||
const otherList = res.filter((row) => row.saleStoreLevel !== '1')
|
if (session?.storeId === 'T01') {
|
||||||
let favList
|
firstList = res.filter((row) => row.saleStoreLevel === '1')
|
||||||
|
|
||||||
if (sessionState?.storeId === 'T01') {
|
|
||||||
firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
|
firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
|
||||||
favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
|
favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
|
||||||
setSaleStoreList(firstList)
|
setSaleStoreList(firstList)
|
||||||
setFavoriteStoreList(favList)
|
setFavoriteStoreList(favList)
|
||||||
setShowSaleStoreList(favList)
|
setShowSaleStoreList(favList)
|
||||||
|
|
||||||
|
form.setValue('saleStoreId', firstList[0].saleStoreId)
|
||||||
|
form.setValue('saleStoreName', firstList[0].saleStoreName)
|
||||||
|
form.setValue('saleStoreLevel', firstList[0].saleStoreLevel)
|
||||||
|
setSelOptions(firstList[0].saleStoreId)
|
||||||
|
|
||||||
|
//상세데이터의 1차점 아이디로 2차점 목록 조회하기
|
||||||
|
// url = `/api/object/saleStore/${detailData?.saleStoreId}/list?firstFlg=0&userId=${sessionState?.userId}`
|
||||||
|
url = `/api/object/saleStore/${detailData?.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
|
||||||
|
|
||||||
|
get({ url: url }).then((res) => {
|
||||||
|
if (!isEmptyArray(res)) {
|
||||||
|
res.map((row) => {
|
||||||
|
row.value = row.saleStoreId
|
||||||
|
row.label = row.saleStoreName
|
||||||
|
})
|
||||||
|
|
||||||
|
otherList = res
|
||||||
|
setOriginOtherSaleStoreList(otherList)
|
||||||
|
setOtherSaleStoreList(otherList)
|
||||||
|
}
|
||||||
|
})
|
||||||
} else {
|
} else {
|
||||||
//1차점 셀렉트박스
|
//1차점 셀렉트박스
|
||||||
setSaleStoreList(firstList)
|
// if (sessionState?.storeLvl === '1') {
|
||||||
}
|
if (session?.storeLvl === '1') {
|
||||||
|
firstList = res
|
||||||
|
favList = res.filter((row) => row.priority !== 'B')
|
||||||
|
otherList = res.filter((row) => row.firstAgentYn === 'N')
|
||||||
|
|
||||||
let filterOtherList
|
setSaleStoreList(firstList)
|
||||||
if (sessionState?.storeId === 'T01') {
|
setFavoriteStoreList(firstList)
|
||||||
filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
|
setShowSaleStoreList(firstList)
|
||||||
setOriginOtherSaleStoreList(filterOtherList)
|
|
||||||
setOtherSaleStoreList(filterOtherList)
|
setOtherSaleStoreList(otherList)
|
||||||
} else {
|
} else {
|
||||||
//1차점 아닌 판매점 셀렉트박스
|
setSelOptions(res[0].saleStoreId)
|
||||||
setOriginOtherSaleStoreList(otherList)
|
form.setValue('saleStoreId', res[0].saleStoreId)
|
||||||
setOtherSaleStoreList(otherList)
|
form.setValue('saleStoreLevel', res[0].storeLvl)
|
||||||
|
setSaleStoreList(res)
|
||||||
|
setFavoriteStoreList(res)
|
||||||
|
setShowSaleStoreList(res)
|
||||||
|
otherList = res.filter((row) => row.firstAgentYn === 'N')
|
||||||
|
setOtherSaleStoreList(otherList)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -442,9 +513,6 @@ export default function StuffDetail() {
|
|||||||
form.setValue('saleStoreId', detailData.saleStoreId)
|
form.setValue('saleStoreId', detailData.saleStoreId)
|
||||||
form.setValue('saleStoreLevel', detailData.saleStoreLevel)
|
form.setValue('saleStoreLevel', detailData.saleStoreLevel)
|
||||||
} else {
|
} else {
|
||||||
setSelOptions(sessionState?.storeId)
|
|
||||||
form.setValue('saleStoreId', sessionState?.storeId)
|
|
||||||
form.setValue('saleStoreLevel', sessionState?.storeLvl)
|
|
||||||
setOtherSelOptions(detailData.saleStoreId)
|
setOtherSelOptions(detailData.saleStoreId)
|
||||||
form.setValue('otherSaleStoreId', detailData.saleStoreId)
|
form.setValue('otherSaleStoreId', detailData.saleStoreId)
|
||||||
form.setValue('otherSaleStoreLevel', detailData.saleStoreLevel)
|
form.setValue('otherSaleStoreLevel', detailData.saleStoreLevel)
|
||||||
@ -504,7 +572,8 @@ export default function StuffDetail() {
|
|||||||
form.setValue('remarks', detailData.remarks)
|
form.setValue('remarks', detailData.remarks)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}, [detailData, sessionState])
|
// }, [detailData, sessionState])
|
||||||
|
}, [detailData, session])
|
||||||
|
|
||||||
//경칭선택 변경 이벤트
|
//경칭선택 변경 이벤트
|
||||||
const onChangeHonorificCode = (key) => {
|
const onChangeHonorificCode = (key) => {
|
||||||
@ -574,6 +643,7 @@ export default function StuffDetail() {
|
|||||||
if (objectNo) {
|
if (objectNo) {
|
||||||
tempObjectNo = objectNo.substring(0, 1)
|
tempObjectNo = objectNo.substring(0, 1)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (tempObjectNo === 'T') {
|
if (tempObjectNo === 'T') {
|
||||||
if (planReqNo) {
|
if (planReqNo) {
|
||||||
if (delFlg) {
|
if (delFlg) {
|
||||||
@ -584,10 +654,21 @@ export default function StuffDetail() {
|
|||||||
form.setValue('saleStoreName', key.saleStoreName)
|
form.setValue('saleStoreName', key.saleStoreName)
|
||||||
form.setValue('saleStoreLevel', key.saleStoreLevel)
|
form.setValue('saleStoreLevel', key.saleStoreLevel)
|
||||||
setSelOptions(key.saleStoreId)
|
setSelOptions(key.saleStoreId)
|
||||||
//선택한 1차점 정보로 2차점 list 추리기
|
let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
|
||||||
//長府工産株式会社 大阪支社
|
let otherList
|
||||||
let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
|
get({ url: url }).then((res) => {
|
||||||
setOtherSaleStoreList(newOtherSaleStoreList)
|
if (!isEmptyArray(res)) {
|
||||||
|
res.map((row) => {
|
||||||
|
row.value = row.saleStoreId
|
||||||
|
row.label = row.saleStoreName
|
||||||
|
})
|
||||||
|
|
||||||
|
otherList = res
|
||||||
|
setOtherSaleStoreList(otherList)
|
||||||
|
} else {
|
||||||
|
setOtherSaleStoreList([])
|
||||||
|
}
|
||||||
|
})
|
||||||
} else {
|
} else {
|
||||||
//X누름
|
//X누름
|
||||||
setSelOptions('')
|
setSelOptions('')
|
||||||
@ -604,15 +685,34 @@ export default function StuffDetail() {
|
|||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (isObjectNotEmpty(key)) {
|
if (isObjectNotEmpty(key)) {
|
||||||
setOtherSaleStoreList(otherSaleStoreList)
|
setSelOptions(key.saleStoreId)
|
||||||
form.setValue('saleStoreId', key.saleStoreId)
|
form.setValue('saleStoreId', key.saleStoreId)
|
||||||
form.setValue('saleStoreName', key.saleStoreName)
|
form.setValue('saleStoreName', key.saleStoreName)
|
||||||
form.setValue('saleStoreLevel', key.saleStoreLevel)
|
form.setValue('saleStoreLevel', key.saleStoreLevel)
|
||||||
setSelOptions(key.saleStoreId)
|
//선택한 1차점 정보로 2차점 조회하기
|
||||||
//선택한 1차점 정보로 2차점 list 추리기
|
let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
|
||||||
//長府工産株式会社 大阪支社
|
let otherList
|
||||||
let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
|
get({ url: url }).then((res) => {
|
||||||
setOtherSaleStoreList(newOtherSaleStoreList)
|
if (!isEmptyArray(res)) {
|
||||||
|
res.map((row) => {
|
||||||
|
row.value = row.saleStoreId
|
||||||
|
row.label = row.saleStoreName
|
||||||
|
})
|
||||||
|
|
||||||
|
otherList = res
|
||||||
|
setOtherSaleStoreList(otherList)
|
||||||
|
setOtherSelOptions('')
|
||||||
|
form.setValue('otherSaleStoreId', '')
|
||||||
|
form.setValue('otherSaleStoreName', '')
|
||||||
|
form.setValue('otherSaleStoreLevel', '')
|
||||||
|
} else {
|
||||||
|
setOtherSelOptions('')
|
||||||
|
form.setValue('otherSaleStoreId', '')
|
||||||
|
form.setValue('otherSaleStoreName', '')
|
||||||
|
form.setValue('otherSaleStoreLevel', '')
|
||||||
|
setOtherSaleStoreList([])
|
||||||
|
}
|
||||||
|
})
|
||||||
} else {
|
} else {
|
||||||
//X누름
|
//X누름
|
||||||
setSelOptions('')
|
setSelOptions('')
|
||||||
@ -634,10 +734,21 @@ export default function StuffDetail() {
|
|||||||
form.setValue('saleStoreName', key.saleStoreName)
|
form.setValue('saleStoreName', key.saleStoreName)
|
||||||
form.setValue('saleStoreLevel', key.saleStoreLevel)
|
form.setValue('saleStoreLevel', key.saleStoreLevel)
|
||||||
setSelOptions(key.saleStoreId)
|
setSelOptions(key.saleStoreId)
|
||||||
//선택한 1차점 정보로 2차점 list 추리기
|
let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
|
||||||
//長府工産株式会社 大阪支社
|
let otherList
|
||||||
let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
|
get({ url: url }).then((res) => {
|
||||||
setOtherSaleStoreList(newOtherSaleStoreList)
|
if (!isEmptyArray(res)) {
|
||||||
|
res.map((row) => {
|
||||||
|
row.value = row.saleStoreId
|
||||||
|
row.label = row.saleStoreName
|
||||||
|
})
|
||||||
|
|
||||||
|
otherList = res
|
||||||
|
setOtherSaleStoreList(otherList)
|
||||||
|
} else {
|
||||||
|
setOtherSaleStoreList([])
|
||||||
|
}
|
||||||
|
})
|
||||||
} else {
|
} else {
|
||||||
//X누름
|
//X누름
|
||||||
setSelOptions('')
|
setSelOptions('')
|
||||||
@ -687,6 +798,7 @@ export default function StuffDetail() {
|
|||||||
if (objectNo) {
|
if (objectNo) {
|
||||||
tempObjectNo = objectNo.substring(0, 1)
|
tempObjectNo = objectNo.substring(0, 1)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (tempObjectNo === 'T') {
|
if (tempObjectNo === 'T') {
|
||||||
if (planReqNo) {
|
if (planReqNo) {
|
||||||
if (delFlg) {
|
if (delFlg) {
|
||||||
@ -1128,9 +1240,10 @@ export default function StuffDetail() {
|
|||||||
// 수정모드일때는 PUT
|
// 수정모드일때는 PUT
|
||||||
await promisePut({ url: apiUrl, data: params }).then((res) => {
|
await promisePut({ url: apiUrl, data: params }).then((res) => {
|
||||||
if (res.status === 201) {
|
if (res.status === 201) {
|
||||||
|
setFloorPlanObjectNo({ floorPlanObjectNo: res.data.objectNo })
|
||||||
alert(getMessage('stuff.detail.save'))
|
alert(getMessage('stuff.detail.save'))
|
||||||
setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
|
// router.refresh()
|
||||||
router.refresh()
|
router.push(`/management/stuff/detail?objectNo=${res.data.objectNo.toString()}`)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -1169,18 +1282,10 @@ export default function StuffDetail() {
|
|||||||
|
|
||||||
//1차점 or 2차점 안고르고 임시저장하면
|
//1차점 or 2차점 안고르고 임시저장하면
|
||||||
if (params.saleStoreId == '') {
|
if (params.saleStoreId == '') {
|
||||||
params.saleStoreId = sessionState.storeId
|
// params.saleStoreId = sessionState.storeId
|
||||||
params.saleStoreLevel = sessionState.storeLvl
|
params.saleStoreId = session.storeId
|
||||||
}
|
// params.saleStoreLevel = sessionState.storeLvl
|
||||||
//수직적설량, 설치높이 0인지 체크
|
params.saleStoreLevel = session.storeLvl
|
||||||
let snow = params.verticalSnowCover
|
|
||||||
let height = params.installHeight
|
|
||||||
|
|
||||||
if (snow === '0') {
|
|
||||||
return alert(getMessage('stuff.detail.save.valierror1'))
|
|
||||||
}
|
|
||||||
if (height === '0') {
|
|
||||||
return alert(getMessage('stuff.detail.save.valierror2'))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
await promisePost({ url: '/api/object/save-object', data: params }).then((res) => {
|
await promisePost({ url: '/api/object/save-object', data: params }).then((res) => {
|
||||||
@ -1256,7 +1361,7 @@ export default function StuffDetail() {
|
|||||||
)) ||
|
)) ||
|
||||||
null}
|
null}
|
||||||
</div>
|
</div>
|
||||||
<Button className="btn-origin grey" onPress={onSearchDesignRequestPopOpen}>
|
<Button type="button" className="btn-origin grey" onPress={onSearchDesignRequestPopOpen}>
|
||||||
{getMessage('stuff.planReqPopup.title')}
|
{getMessage('stuff.planReqPopup.title')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@ -1268,7 +1373,7 @@ export default function StuffDetail() {
|
|||||||
</th>
|
</th>
|
||||||
<td>
|
<td>
|
||||||
<div className="input-wrap" style={{ width: '500px' }}>
|
<div className="input-wrap" style={{ width: '500px' }}>
|
||||||
<input type="text" className="input-light" {...form.register('receiveUser')} ref={inputReceiveUserEl} />
|
<input type="text" className="input-light" {...form.register('receiveUser')} />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -1297,7 +1402,7 @@ export default function StuffDetail() {
|
|||||||
})}
|
})}
|
||||||
{/* 라디오끝 */}
|
{/* 라디오끝 */}
|
||||||
<div className="input-wrap mr5" style={{ width: '545px' }}>
|
<div className="input-wrap mr5" style={{ width: '545px' }}>
|
||||||
<input type="text" className="input-light" {...form.register('objectName')} ref={inputObjectNameEl} />
|
<input type="text" className="input-light" {...form.register('objectName')} />
|
||||||
</div>
|
</div>
|
||||||
<div className="select-wrap" style={{ width: '120px' }}>
|
<div className="select-wrap" style={{ width: '120px' }}>
|
||||||
<Select
|
<Select
|
||||||
@ -1343,7 +1448,8 @@ export default function StuffDetail() {
|
|||||||
</th>
|
</th>
|
||||||
<td>
|
<td>
|
||||||
<div className="flx-box">
|
<div className="flx-box">
|
||||||
{(sessionState?.storeId === 'T01' && (
|
{/* {sessionState?.storeId === 'T01' && ( */}
|
||||||
|
{session?.storeId === 'T01' && (
|
||||||
<>
|
<>
|
||||||
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
||||||
<Select
|
<Select
|
||||||
@ -1357,8 +1463,41 @@ export default function StuffDetail() {
|
|||||||
onChange={onSelectionChange}
|
onChange={onSelectionChange}
|
||||||
getOptionLabel={(x) => x.saleStoreName}
|
getOptionLabel={(x) => x.saleStoreName}
|
||||||
getOptionValue={(x) => x.saleStoreId}
|
getOptionValue={(x) => x.saleStoreId}
|
||||||
isClearable={sessionState?.storeLvl === '1' ? true : false}
|
isClearable={true}
|
||||||
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
|
isDisabled={session?.storeLvl !== '1' ? true : false}
|
||||||
|
value={saleStoreList.filter(function (option) {
|
||||||
|
return option.saleStoreId === selOptions
|
||||||
|
})}
|
||||||
|
></Select>
|
||||||
|
</div>
|
||||||
|
<div className="input-wrap" style={{ width: '216px' }}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="input-light"
|
||||||
|
value={form.watch('saleStoreId') || ''}
|
||||||
|
{...form.register('saleStoreId')}
|
||||||
|
readOnly
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl === '1' && ( */}
|
||||||
|
{session?.storeId !== 'T01' && session?.storeLvl === '1' && (
|
||||||
|
<>
|
||||||
|
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
||||||
|
<Select
|
||||||
|
id="long-value-select1"
|
||||||
|
instanceId="long-value-select1"
|
||||||
|
className="react-select-custom"
|
||||||
|
classNamePrefix="custom"
|
||||||
|
placeholder="Select"
|
||||||
|
options={showSaleStoreList[0]}
|
||||||
|
onChange={onSelectionChange}
|
||||||
|
getOptionLabel={(x) => x.saleStoreName}
|
||||||
|
getOptionValue={(x) => x.saleStoreId}
|
||||||
|
isClearable={false}
|
||||||
|
isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
|
||||||
value={showSaleStoreList.filter(function (option) {
|
value={showSaleStoreList.filter(function (option) {
|
||||||
return option.saleStoreId === selOptions
|
return option.saleStoreId === selOptions
|
||||||
})}
|
})}
|
||||||
@ -1374,7 +1513,9 @@ export default function StuffDetail() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)) || (
|
)}
|
||||||
|
{/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl !== '1' && ( */}
|
||||||
|
{session?.storeId !== 'T01' && session?.storeLvl !== '1' && (
|
||||||
<>
|
<>
|
||||||
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
||||||
<Select
|
<Select
|
||||||
@ -1383,13 +1524,13 @@ export default function StuffDetail() {
|
|||||||
className="react-select-custom"
|
className="react-select-custom"
|
||||||
classNamePrefix="custom"
|
classNamePrefix="custom"
|
||||||
placeholder="Select"
|
placeholder="Select"
|
||||||
options={saleStoreList}
|
options={showSaleStoreList}
|
||||||
onChange={onSelectionChange}
|
onChange={onSelectionChange}
|
||||||
getOptionLabel={(x) => x.saleStoreName}
|
getOptionLabel={(x) => x.saleStoreName}
|
||||||
getOptionValue={(x) => x.saleStoreId}
|
getOptionValue={(x) => x.saleStoreId}
|
||||||
isClearable={sessionState?.storeLvl === '1' ? true : false}
|
isClearable={false}
|
||||||
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
|
isDisabled={true}
|
||||||
value={saleStoreList.filter(function (option) {
|
value={showSaleStoreList.filter(function (option) {
|
||||||
return option.saleStoreId === selOptions
|
return option.saleStoreId === selOptions
|
||||||
})}
|
})}
|
||||||
></Select>
|
></Select>
|
||||||
@ -1432,8 +1573,8 @@ export default function StuffDetail() {
|
|||||||
onChange={onSelectionChange2}
|
onChange={onSelectionChange2}
|
||||||
getOptionLabel={(x) => x.saleStoreName}
|
getOptionLabel={(x) => x.saleStoreName}
|
||||||
getOptionValue={(x) => x.saleStoreId}
|
getOptionValue={(x) => x.saleStoreId}
|
||||||
isDisabled={sessionState?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
|
isDisabled={otherSaleStoreList.length > 1 ? false : true}
|
||||||
isClearable={sessionState?.storeLvl === '1' ? true : false}
|
isClearable={true}
|
||||||
value={otherSaleStoreList.filter(function (option) {
|
value={otherSaleStoreList.filter(function (option) {
|
||||||
return option.saleStoreId === otherSelOptions
|
return option.saleStoreId === otherSelOptions
|
||||||
})}
|
})}
|
||||||
@ -1458,7 +1599,7 @@ export default function StuffDetail() {
|
|||||||
<td>
|
<td>
|
||||||
<div className="flx-box">
|
<div className="flx-box">
|
||||||
<div className="input-wrap mr5" style={{ width: '200px' }}>
|
<div className="input-wrap mr5" style={{ width: '200px' }}>
|
||||||
<input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} ref={inputZipNoEl} />
|
<input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} />
|
||||||
</div>
|
</div>
|
||||||
<Button className="btn-origin grey" onPress={onSearchPostNumberPopOpen}>
|
<Button className="btn-origin grey" onPress={onSearchPostNumberPopOpen}>
|
||||||
{getMessage('stuff.detail.btn.addressPop')}
|
{getMessage('stuff.detail.btn.addressPop')}
|
||||||
@ -1494,13 +1635,7 @@ export default function StuffDetail() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="input-wrap mr5" style={{ width: '580px' }}>
|
<div className="input-wrap mr5" style={{ width: '580px' }}>
|
||||||
<input
|
<input type="text" className="input-light" value={form.watch('address') || ''} {...form.register('address')} />
|
||||||
type="text"
|
|
||||||
className="input-light"
|
|
||||||
value={form.watch('address') || ''}
|
|
||||||
{...form.register('address')}
|
|
||||||
ref={inputAddressEl}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@ -1575,7 +1710,6 @@ export default function StuffDetail() {
|
|||||||
onKeyUp={handleKeyUp}
|
onKeyUp={handleKeyUp}
|
||||||
value={form.watch('verticalSnowCover') || ''}
|
value={form.watch('verticalSnowCover') || ''}
|
||||||
{...register('verticalSnowCover')}
|
{...register('verticalSnowCover')}
|
||||||
ref={inputVerticalSnowCoverEl}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span className="mr10">cm</span>
|
<span className="mr10">cm</span>
|
||||||
@ -1623,7 +1757,6 @@ export default function StuffDetail() {
|
|||||||
onKeyUp={handleKeyUp}
|
onKeyUp={handleKeyUp}
|
||||||
value={form.watch('installHeight') || ''}
|
value={form.watch('installHeight') || ''}
|
||||||
{...register('installHeight')}
|
{...register('installHeight')}
|
||||||
ref={inputInstallHeightEl}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span>m</span>
|
<span>m</span>
|
||||||
@ -1696,7 +1829,7 @@ export default function StuffDetail() {
|
|||||||
<div className="product-input-wrap mr5">
|
<div className="product-input-wrap mr5">
|
||||||
<input type="text" className="product-input" readOnly value={form.watch('planReqNo') || ''} />
|
<input type="text" className="product-input" readOnly value={form.watch('planReqNo') || ''} />
|
||||||
{/* {detailData?.tempFlg === '1' && form.watch('planReqNo') ? ( */}
|
{/* {detailData?.tempFlg === '1' && form.watch('planReqNo') ? ( */}
|
||||||
{objectNo.substring(0, 1) === 'T' && form.watch('planReqNo') ? (
|
{detailData?.tempFlg === '1' && form.watch('planReqNo') ? (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="product-delete"
|
className="product-delete"
|
||||||
@ -1707,7 +1840,7 @@ export default function StuffDetail() {
|
|||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
{/* {detailData?.tempFlg === '1' ? ( */}
|
{/* {detailData?.tempFlg === '1' ? ( */}
|
||||||
{objectNo.substring(0, 1) === 'T' ? (
|
{detailData?.tempFlg === '1' ? (
|
||||||
<>
|
<>
|
||||||
<Button className="btn-origin grey" onPress={onSearchDesignRequestPopOpen}>
|
<Button className="btn-origin grey" onPress={onSearchDesignRequestPopOpen}>
|
||||||
{getMessage('stuff.planReqPopup.title')}
|
{getMessage('stuff.planReqPopup.title')}
|
||||||
@ -1798,10 +1931,12 @@ export default function StuffDetail() {
|
|||||||
</th>
|
</th>
|
||||||
<td>
|
<td>
|
||||||
<div className="flx-box">
|
<div className="flx-box">
|
||||||
{(sessionState?.storeId === 'T01' && (
|
{/* {sessionState?.storeId === 'T01' && ( */}
|
||||||
|
{session?.storeId === 'T01' && (
|
||||||
<>
|
<>
|
||||||
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
||||||
<Select
|
<Select
|
||||||
|
menuPlacement={'auto'}
|
||||||
id="long-value-select1"
|
id="long-value-select1"
|
||||||
instanceId="long-value-select1"
|
instanceId="long-value-select1"
|
||||||
className="react-select-custom"
|
className="react-select-custom"
|
||||||
@ -1812,8 +1947,10 @@ export default function StuffDetail() {
|
|||||||
onChange={onSelectionChange}
|
onChange={onSelectionChange}
|
||||||
getOptionLabel={(x) => x.saleStoreName}
|
getOptionLabel={(x) => x.saleStoreName}
|
||||||
getOptionValue={(x) => x.saleStoreId}
|
getOptionValue={(x) => x.saleStoreId}
|
||||||
isClearable={sessionState?.storeLvl === '1' ? true : false}
|
// isClearable={sessionState?.storeLvl === '1' ? true : false}
|
||||||
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
|
isClearable={session?.storeLvl === '1' ? true : false}
|
||||||
|
// isDisabled={sessionState?.storeLvl !== '1' ? true : false}
|
||||||
|
isDisabled={session?.storeLvl !== '1' ? true : false}
|
||||||
value={saleStoreList.filter(function (option) {
|
value={saleStoreList.filter(function (option) {
|
||||||
return option.saleStoreId === selOptions
|
return option.saleStoreId === selOptions
|
||||||
})}
|
})}
|
||||||
@ -1829,22 +1966,26 @@ export default function StuffDetail() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)) || (
|
)}
|
||||||
|
{/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl === '1' && ( */}
|
||||||
|
{session?.storeId !== 'T01' && session?.storeLvl === '1' && (
|
||||||
<>
|
<>
|
||||||
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
||||||
<Select
|
<Select
|
||||||
|
menuPlacement={'auto'}
|
||||||
id="long-value-select1"
|
id="long-value-select1"
|
||||||
instanceId="long-value-select1"
|
instanceId="long-value-select1"
|
||||||
className="react-select-custom"
|
className="react-select-custom"
|
||||||
classNamePrefix="custom"
|
classNamePrefix="custom"
|
||||||
placeholder="Select"
|
placeholder="Select"
|
||||||
options={saleStoreList}
|
options={showSaleStoreList[0]}
|
||||||
onChange={onSelectionChange}
|
onChange={onSelectionChange}
|
||||||
getOptionLabel={(x) => x.saleStoreName}
|
getOptionLabel={(x) => x.saleStoreName}
|
||||||
getOptionValue={(x) => x.saleStoreId}
|
getOptionValue={(x) => x.saleStoreId}
|
||||||
isClearable={sessionState?.storeLvl === '1' ? true : false}
|
isClearable={false}
|
||||||
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
|
// isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
|
||||||
value={saleStoreList.filter(function (option) {
|
isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
|
||||||
|
value={showSaleStoreList.filter(function (option) {
|
||||||
return option.saleStoreId === selOptions
|
return option.saleStoreId === selOptions
|
||||||
})}
|
})}
|
||||||
/>
|
/>
|
||||||
@ -1860,6 +2001,41 @@ export default function StuffDetail() {
|
|||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
{/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl !== '1' && ( */}
|
||||||
|
{session?.storeId !== 'T01' && session?.storeLvl !== '1' && (
|
||||||
|
<>
|
||||||
|
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
||||||
|
<Select
|
||||||
|
menuPlacement={'auto'}
|
||||||
|
id="long-value-select1"
|
||||||
|
instanceId="long-value-select1"
|
||||||
|
className="react-select-custom"
|
||||||
|
classNamePrefix="custom"
|
||||||
|
placeholder="Select"
|
||||||
|
options={showSaleStoreList[0]}
|
||||||
|
onChange={onSelectionChange}
|
||||||
|
getOptionLabel={(x) => x.saleStoreName}
|
||||||
|
getOptionValue={(x) => x.saleStoreId}
|
||||||
|
isClearable={false}
|
||||||
|
isDisabled={true}
|
||||||
|
value={showSaleStoreList.filter(function (option) {
|
||||||
|
if (option.firstAgentYn === 'Y') {
|
||||||
|
return option.saleStoreId
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="input-wrap" style={{ width: '216px' }}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="input-light"
|
||||||
|
value={form.watch('saleStoreId') || ''}
|
||||||
|
{...form.register('saleStoreId')}
|
||||||
|
readOnly
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -1886,8 +2062,10 @@ export default function StuffDetail() {
|
|||||||
onChange={onSelectionChange2}
|
onChange={onSelectionChange2}
|
||||||
getOptionLabel={(x) => x.saleStoreName}
|
getOptionLabel={(x) => x.saleStoreName}
|
||||||
getOptionValue={(x) => x.saleStoreId}
|
getOptionValue={(x) => x.saleStoreId}
|
||||||
isDisabled={sessionState?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
|
// isDisabled={sessionState?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
|
||||||
isClearable={sessionState?.storeLvl === '1' ? true : false}
|
isDisabled={session?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
|
||||||
|
// isClearable={sessionState?.storeLvl === '1' ? true : false}
|
||||||
|
isClearable={session?.storeLvl === '1' ? true : false}
|
||||||
value={otherSaleStoreList.filter(function (option) {
|
value={otherSaleStoreList.filter(function (option) {
|
||||||
return option.saleStoreId === otherSelOptions
|
return option.saleStoreId === otherSelOptions
|
||||||
})}
|
})}
|
||||||
@ -2120,7 +2298,7 @@ export default function StuffDetail() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* {detailData?.tempFlg === '0' ? ( */}
|
{/* {detailData?.tempFlg === '0' ? ( */}
|
||||||
{objectNo.substring(0, 1) !== 'T' ? (
|
{detailData?.tempFlg === '0' ? (
|
||||||
<>
|
<>
|
||||||
{/* 진짜R 플랜시작 */}
|
{/* 진짜R 플랜시작 */}
|
||||||
<div className="table-box-title-wrap">
|
<div className="table-box-title-wrap">
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import React, { useEffect, useRef, useState } from 'react'
|
import { useEffect, useRef, useState, useContext } from 'react'
|
||||||
import { useAxios } from '@/hooks/useAxios'
|
import { useAxios } from '@/hooks/useAxios'
|
||||||
import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
|
import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
|
||||||
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
|
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
|
||||||
import Select from 'react-select'
|
import Select from 'react-select'
|
||||||
import KO from '@/locales/ko.json'
|
import KO from '@/locales/ko.json'
|
||||||
@ -15,12 +15,17 @@ import SingleDatePicker from '../common/datepicker/SingleDatePicker'
|
|||||||
import { sessionStore } from '@/store/commonAtom'
|
import { sessionStore } from '@/store/commonAtom'
|
||||||
import { useMessage } from '@/hooks/useMessage'
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
import { isObjectNotEmpty } from '@/util/common-utils'
|
import { isObjectNotEmpty } from '@/util/common-utils'
|
||||||
|
|
||||||
|
import { SessionContext } from '@/app/SessionProvider'
|
||||||
|
|
||||||
export default function StuffSearchCondition() {
|
export default function StuffSearchCondition() {
|
||||||
|
const { session } = useContext(SessionContext)
|
||||||
const sessionState = useRecoilValue(sessionStore)
|
const sessionState = useRecoilValue(sessionStore)
|
||||||
const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
|
const setAppMessageState = useSetRecoilState(appMessageStore)
|
||||||
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const ref = useRef()
|
const ref = useRef()
|
||||||
|
const ref2 = useRef()
|
||||||
const { get } = useAxios(globalLocaleState)
|
const { get } = useAxios(globalLocaleState)
|
||||||
|
|
||||||
const objectNoRef = useRef(null)
|
const objectNoRef = useRef(null)
|
||||||
@ -59,6 +64,10 @@ export default function StuffSearchCondition() {
|
|||||||
const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT 전체
|
const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT 전체
|
||||||
const [favoriteStoreList, setFavoriteStoreList] = useState([]) //즐겨찾기한 판매점목록
|
const [favoriteStoreList, setFavoriteStoreList] = useState([]) //즐겨찾기한 판매점목록
|
||||||
const [showSaleStoreList, setShowSaleStoreList] = useState([]) //보여줄 판매점목록
|
const [showSaleStoreList, setShowSaleStoreList] = useState([]) //보여줄 판매점목록
|
||||||
|
|
||||||
|
const [otherSaleStoreList, setOtherSaleStoreList] = useState([]) //1차점 이외 판매점목록
|
||||||
|
const [otherSaleStoreId, setOtherSaleStoreId] = useState('')
|
||||||
|
|
||||||
// 조회
|
// 조회
|
||||||
const onSubmit = () => {
|
const onSubmit = () => {
|
||||||
let diff = dayjs(endDate).diff(startDate, 'day')
|
let diff = dayjs(endDate).diff(startDate, 'day')
|
||||||
@ -73,7 +82,7 @@ export default function StuffSearchCondition() {
|
|||||||
schAddress: address ? address : stuffSearch?.schAddress,
|
schAddress: address ? address : stuffSearch?.schAddress,
|
||||||
schObjectName: objectName ? objectName : stuffSearch?.schObjectName,
|
schObjectName: objectName ? objectName : stuffSearch?.schObjectName,
|
||||||
schDispCompanyName: dispCompanyName ? dispCompanyName : stuffSearch?.schDispCompanyName,
|
schDispCompanyName: dispCompanyName ? dispCompanyName : stuffSearch?.schDispCompanyName,
|
||||||
schSelSaleStoreId: stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId,
|
schSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : stuffSearch.schSelSaleStoreId,
|
||||||
schReceiveUser: receiveUser ? receiveUser : stuffSearch?.schReceiveUser,
|
schReceiveUser: receiveUser ? receiveUser : stuffSearch?.schReceiveUser,
|
||||||
schDateType: stuffSearch?.schDateType ? stuffSearch.schDateType : dateType,
|
schDateType: stuffSearch?.schDateType ? stuffSearch.schDateType : dateType,
|
||||||
schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
|
schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
|
||||||
@ -90,7 +99,7 @@ export default function StuffSearchCondition() {
|
|||||||
schAddress: address ? address : '',
|
schAddress: address ? address : '',
|
||||||
schObjectName: objectName ? objectName : '',
|
schObjectName: objectName ? objectName : '',
|
||||||
schDispCompanyName: dispCompanyName ? dispCompanyName : '',
|
schDispCompanyName: dispCompanyName ? dispCompanyName : '',
|
||||||
schSelSaleStoreId: schSelSaleStoreId ? schSelSaleStoreId : '',
|
schSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : stuffSearch.schSelSaleStoreId,
|
||||||
schReceiveUser: receiveUser ? receiveUser : '',
|
schReceiveUser: receiveUser ? receiveUser : '',
|
||||||
schDateType: dateType,
|
schDateType: dateType,
|
||||||
schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
|
schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
|
||||||
@ -105,6 +114,7 @@ export default function StuffSearchCondition() {
|
|||||||
|
|
||||||
//초기화
|
//초기화
|
||||||
const resetRecoil = () => {
|
const resetRecoil = () => {
|
||||||
|
//T01아니면 자동완성 초기화 막기
|
||||||
objectNoRef.current.value = ''
|
objectNoRef.current.value = ''
|
||||||
saleStoreNameRef.current.value = ''
|
saleStoreNameRef.current.value = ''
|
||||||
addressRef.current.value = ''
|
addressRef.current.value = ''
|
||||||
@ -121,48 +131,158 @@ export default function StuffSearchCondition() {
|
|||||||
setDateType('U')
|
setDateType('U')
|
||||||
setStartDate(dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
|
setStartDate(dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
|
||||||
setEndDate(dayjs(new Date()).format('YYYY-MM-DD'))
|
setEndDate(dayjs(new Date()).format('YYYY-MM-DD'))
|
||||||
setSchSelSaleStoreId('')
|
// if (sessionState?.storeId === 'T01') {
|
||||||
handleClear() //판매대리점선택 자동완성 클리어
|
if (session?.storeId === 'T01') {
|
||||||
resetStuffRecoil()
|
setSchSelSaleStoreId('')
|
||||||
|
handleClear1() //판매대리점선택 자동완성 클리어
|
||||||
|
resetStuffRecoil()
|
||||||
|
setStuffSearch({
|
||||||
|
...stuffSearch,
|
||||||
|
code: 'C',
|
||||||
|
schSelSaleStoreId: '',
|
||||||
|
schOtherSelSaleStoreId: '',
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
if (otherSaleStoreList.length > 1) {
|
||||||
|
handleClear2()
|
||||||
|
setOtherSaleStoreId('')
|
||||||
|
stuffSearch.schObjectNo = ''
|
||||||
|
stuffSearch.schDateType = 'U'
|
||||||
|
} else {
|
||||||
|
stuffSearch.schObjectNo = ''
|
||||||
|
stuffSearch.schDateType = 'U'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isObjectNotEmpty(sessionState)) {
|
// if (isObjectNotEmpty(sessionState)) {
|
||||||
// storeId가 T01 이거나 1차점일때만 판매대리점 선택 활성화
|
if (isObjectNotEmpty(session)) {
|
||||||
|
// storeId가 T01 이거나 storeLvl이 1차점일때만 판매대리점 선택 활성화
|
||||||
let url
|
let url
|
||||||
if (sessionState?.storeId === 'T01') {
|
// if (sessionState?.storeId === 'T01') {
|
||||||
// url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
|
if (session?.storeId === 'T01') {
|
||||||
url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
|
//T01일떄
|
||||||
|
// url = `/api/object/saleStore/${sessionState?.storeId}/firstList?userId=${sessionState?.userId}`
|
||||||
|
url = `/api/object/saleStore/${session?.storeId}/firstList?userId=${session?.userId}`
|
||||||
} else {
|
} else {
|
||||||
url = `/api/object/saleStore/${sessionState?.storeId}/list`
|
// if (sessionState.storeLvl === '1') {
|
||||||
|
if (session.storeLvl === '1') {
|
||||||
|
//T01아닌 1차점일때
|
||||||
|
// url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
|
||||||
|
url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
|
||||||
|
} else {
|
||||||
|
// url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
|
||||||
|
url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=1&userId=${session?.userId}`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
get({ url: url }).then((res) => {
|
get({ url: url }).then((res) => {
|
||||||
if (!isEmptyArray(res)) {
|
if (!isEmptyArray(res)) {
|
||||||
res.map((row) => {
|
res.map((row) => {
|
||||||
row.value = row.saleStoreId
|
row.value = row.saleStoreId
|
||||||
row.label = row.saleStoreName
|
row.label = row.saleStoreName
|
||||||
})
|
})
|
||||||
const allList = res
|
|
||||||
const favList = res.filter((row) => row.priority !== 'B')
|
let allList
|
||||||
setSchSelSaleStoreList(allList)
|
let favList
|
||||||
setFavoriteStoreList(favList)
|
let otherList
|
||||||
setShowSaleStoreList(favList)
|
// if (sessionState?.storeId === 'T01') {
|
||||||
|
if (session?.storeId === 'T01') {
|
||||||
|
allList = res
|
||||||
|
allList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
|
||||||
|
favList = res.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
|
||||||
|
setSchSelSaleStoreList(allList)
|
||||||
|
setFavoriteStoreList(favList)
|
||||||
|
setShowSaleStoreList(favList)
|
||||||
|
// setSchSelSaleStoreId(sessionState?.storeId)
|
||||||
|
setSchSelSaleStoreId(session?.storeId)
|
||||||
|
setStuffSearch({
|
||||||
|
...stuffSearch,
|
||||||
|
code: 'S',
|
||||||
|
// schSelSaleStoreId: sessionState?.storeId,
|
||||||
|
schSelSaleStoreId: session?.storeId,
|
||||||
|
})
|
||||||
|
|
||||||
|
//T01일때 2차 판매점 호출하기 디폴트로 1차점을 본인으로 셋팅해서 세션storeId사용
|
||||||
|
// url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=0&userId=${sessionState?.userId}`
|
||||||
|
url = `/api/object/saleStore/${session?.storeId}/list?firstFlg=0&userId=${session?.userId}`
|
||||||
|
|
||||||
|
get({ url: url }).then((res) => {
|
||||||
|
if (!isEmptyArray(res)) {
|
||||||
|
res.map((row) => {
|
||||||
|
row.value = row.saleStoreId
|
||||||
|
row.label = row.saleStoreName
|
||||||
|
})
|
||||||
|
|
||||||
|
otherList = res
|
||||||
|
setOtherSaleStoreList(otherList)
|
||||||
|
} else {
|
||||||
|
setOtherSaleStoreList([])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// if (sessionState?.storeLvl === '1') {
|
||||||
|
if (session?.storeLvl === '1') {
|
||||||
|
allList = res
|
||||||
|
favList = res.filter((row) => row.priority !== 'B')
|
||||||
|
otherList = res.filter((row) => row.firstAgentYn === 'N')
|
||||||
|
setSchSelSaleStoreList(allList)
|
||||||
|
setFavoriteStoreList(allList)
|
||||||
|
setShowSaleStoreList(allList)
|
||||||
|
setSchSelSaleStoreId(allList[0].saleStoreId)
|
||||||
|
|
||||||
|
setOtherSaleStoreList(otherList)
|
||||||
|
|
||||||
|
setStuffSearch({
|
||||||
|
...stuffSearch,
|
||||||
|
code: 'S',
|
||||||
|
schSelSaleStoreId: allList[0].saleStoreId,
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
//10X22, 201X112 그냥2차점
|
||||||
|
//2차점인데 34들고있는애 202X217
|
||||||
|
setSchSelSaleStoreList(res)
|
||||||
|
setFavoriteStoreList(res)
|
||||||
|
setShowSaleStoreList(res)
|
||||||
|
setSchSelSaleStoreId(res[0].saleStoreId)
|
||||||
|
otherList = res.filter((row) => row.firstAgentYn === 'N')
|
||||||
|
setOtherSaleStoreList(otherList)
|
||||||
|
|
||||||
|
//선택한 2차점 세션으로 자동셋팅
|
||||||
|
// setOtherSaleStoreId(sessionState?.storeId)
|
||||||
|
setOtherSaleStoreId(session?.storeId)
|
||||||
|
setStuffSearch({
|
||||||
|
...stuffSearch,
|
||||||
|
code: 'S',
|
||||||
|
schSelSaleStoreId: otherList[0].saleStoreId,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}, [sessionState])
|
// }, [sessionState])
|
||||||
|
}, [session])
|
||||||
|
|
||||||
//초기화 눌렀을 때 자동완성도..
|
//초기화 눌렀을 때 1차판매점 자동완성도..
|
||||||
const handleClear = () => {
|
const handleClear1 = () => {
|
||||||
if (ref.current) {
|
if (ref.current) {
|
||||||
ref.current.clearValue()
|
ref.current.clearValue()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleClear2 = () => {
|
||||||
|
if (ref2.current) {
|
||||||
|
ref2.current.clearValue()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//자동완성 인풋
|
//자동완성 인풋
|
||||||
const onInputChange = (key) => {
|
const onInputChange = (key) => {
|
||||||
if (key !== '') {
|
if (key !== '') {
|
||||||
setShowSaleStoreList(schSelSaleStoreList)
|
setShowSaleStoreList(schSelSaleStoreList)
|
||||||
|
setOtherSaleStoreList([])
|
||||||
} else {
|
} else {
|
||||||
setShowSaleStoreList(favoriteStoreList)
|
setShowSaleStoreList(favoriteStoreList)
|
||||||
}
|
}
|
||||||
@ -171,15 +291,48 @@ export default function StuffSearchCondition() {
|
|||||||
//판매대리점 자동완성 변경
|
//판매대리점 자동완성 변경
|
||||||
const onSelectionChange = (key) => {
|
const onSelectionChange = (key) => {
|
||||||
if (isObjectNotEmpty(key)) {
|
if (isObjectNotEmpty(key)) {
|
||||||
|
setOtherSaleStoreId('')
|
||||||
setSchSelSaleStoreId(key.saleStoreId)
|
setSchSelSaleStoreId(key.saleStoreId)
|
||||||
setStuffSearch({
|
stuffSearch.schSelSaleStoreId = key.saleStoreId
|
||||||
...stuffSearch,
|
//T01아닌 1차점은 본인으로 디폴트셋팅이고 수정할수없어서 여기안옴
|
||||||
code: 'S',
|
//고른 1차점의 saleStoreId로 2차점 API호출하기
|
||||||
schSelSaleStoreId: key.saleStoreId,
|
// let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${sessionState?.userId}`
|
||||||
|
let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${session?.userId}`
|
||||||
|
let otherList
|
||||||
|
get({ url: url }).then((res) => {
|
||||||
|
if (!isEmptyArray(res)) {
|
||||||
|
res.map((row) => {
|
||||||
|
row.value = row.saleStoreId
|
||||||
|
row.label = row.saleStoreName
|
||||||
|
})
|
||||||
|
|
||||||
|
otherList = res
|
||||||
|
setOtherSaleStoreList(otherList)
|
||||||
|
} else {
|
||||||
|
setOtherSaleStoreList([])
|
||||||
|
}
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
|
//X누름
|
||||||
setSchSelSaleStoreId('')
|
setSchSelSaleStoreId('')
|
||||||
setStuffSearch({ ...stuffSearch, schSelSaleStoreId: '' })
|
stuffSearch.schSelSaleStoreId = ''
|
||||||
|
|
||||||
|
//2차점 판매점목록비우기
|
||||||
|
setOtherSaleStoreList([])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//2차점 자동완성 변경
|
||||||
|
const onSelectionChange2 = (key) => {
|
||||||
|
if (isObjectNotEmpty(key)) {
|
||||||
|
setOtherSaleStoreId(key.saleStoreId)
|
||||||
|
stuffSearch.schOtherSelSaleStoreId = key.saleStoreId
|
||||||
|
} else {
|
||||||
|
//X누르면 검색조건에 1차점으로 셋팅
|
||||||
|
setOtherSaleStoreId('')
|
||||||
|
setSchSelSaleStoreId(schSelSaleStoreId)
|
||||||
|
stuffSearch.schOtherSelSaleStoreId = ''
|
||||||
|
stuffSearch.schSelSaleStoreId = schSelSaleStoreId
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -234,6 +387,8 @@ export default function StuffSearchCondition() {
|
|||||||
<col />
|
<col />
|
||||||
<col style={{ width: '160px' }} />
|
<col style={{ width: '160px' }} />
|
||||||
<col />
|
<col />
|
||||||
|
<col style={{ width: '160px' }} />
|
||||||
|
<col />
|
||||||
</colgroup>
|
</colgroup>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
@ -263,6 +418,7 @@ export default function StuffSearchCondition() {
|
|||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setSaleStoreName(saleStoreNameRef.current.value)
|
setSaleStoreName(saleStoreNameRef.current.value)
|
||||||
}}
|
}}
|
||||||
|
onKeyUp={handleByOnKeyUp}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@ -277,6 +433,22 @@ export default function StuffSearchCondition() {
|
|||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setAddress(addressRef.current.value)
|
setAddress(addressRef.current.value)
|
||||||
}}
|
}}
|
||||||
|
onKeyUp={handleByOnKeyUp}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<th>{getMessage('stuff.search.schDispCompanyName')}</th>
|
||||||
|
<td>
|
||||||
|
<div className="input-wrap">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
ref={dispCompanyNameRef}
|
||||||
|
className="input-light"
|
||||||
|
defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schDispCompanyName : dispCompanyName}
|
||||||
|
onChange={(e) => {
|
||||||
|
setDispCompanyName(dispCompanyNameRef.current.value)
|
||||||
|
}}
|
||||||
|
onKeyUp={handleByOnKeyUp}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@ -293,65 +465,10 @@ export default function StuffSearchCondition() {
|
|||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setobjectName(objectNameRef.current.value)
|
setobjectName(objectNameRef.current.value)
|
||||||
}}
|
}}
|
||||||
|
onKeyUp={handleByOnKeyUp}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<th>{getMessage('stuff.search.schDispCompanyName')}</th>
|
|
||||||
<td>
|
|
||||||
<div className="input-wrap">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
ref={dispCompanyNameRef}
|
|
||||||
className="input-light"
|
|
||||||
defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schDispCompanyName : dispCompanyName}
|
|
||||||
onChange={(e) => {
|
|
||||||
setDispCompanyName(dispCompanyNameRef.current.value)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<th>{getMessage('stuff.search.schSelSaleStoreId')}</th>
|
|
||||||
<td>
|
|
||||||
<div className="select-wrap">
|
|
||||||
{schSelSaleStoreList?.length > 0 && (
|
|
||||||
<Select
|
|
||||||
id="long-value-select1"
|
|
||||||
instanceId="long-value-select1"
|
|
||||||
className="react-select-custom"
|
|
||||||
classNamePrefix="custom"
|
|
||||||
placeholder="Select"
|
|
||||||
ref={ref}
|
|
||||||
// options={schSelSaleStoreList}
|
|
||||||
options={showSaleStoreList}
|
|
||||||
onInputChange={onInputChange}
|
|
||||||
onChange={onSelectionChange}
|
|
||||||
getOptionLabel={(x) => x.saleStoreName}
|
|
||||||
getOptionValue={(x) => x.saleStoreId}
|
|
||||||
// value={schSelSaleStoreList.filter(function (option) {
|
|
||||||
value={showSaleStoreList.filter(function (option) {
|
|
||||||
// console.log('자동완성 value::::', option)
|
|
||||||
if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
|
|
||||||
return false
|
|
||||||
} else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
|
|
||||||
return option.saleStoreId === schSelSaleStoreId
|
|
||||||
} else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
|
|
||||||
return option.saleStoreId === schSelSaleStoreId
|
|
||||||
} else {
|
|
||||||
if (stuffSearch?.schSelSaleStoreId !== '') {
|
|
||||||
return option.saleStoreId === stuffSearch.schSelSaleStoreId
|
|
||||||
} else {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
isDisabled={sessionState?.storeLvl === '1' ? false : true}
|
|
||||||
isClearable={true}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>{getMessage('stuff.search.schReceiveUser')}</th>
|
<th>{getMessage('stuff.search.schReceiveUser')}</th>
|
||||||
<td>
|
<td>
|
||||||
<div className="input-wrap">
|
<div className="input-wrap">
|
||||||
@ -363,11 +480,139 @@ export default function StuffSearchCondition() {
|
|||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setReceiveUser(receiveUserRef.current.value)
|
setReceiveUser(receiveUserRef.current.value)
|
||||||
}}
|
}}
|
||||||
|
onKeyUp={handleByOnKeyUp}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<th>{getMessage('stuff.search.period')}</th>
|
<th>{getMessage('stuff.search.schSelSaleStoreId')}</th>
|
||||||
<td colSpan={3}>
|
<td colSpan={3}>
|
||||||
|
<div className="form-flex-wrap">
|
||||||
|
<div className="select-wrap mr5" style={{ flex: 1 }}>
|
||||||
|
{/* {sessionState?.storeId === 'T01' && ( */}
|
||||||
|
{session?.storeId === 'T01' && (
|
||||||
|
<Select
|
||||||
|
id="long-value-select1"
|
||||||
|
instanceId="long-value-select1"
|
||||||
|
className="react-select-custom"
|
||||||
|
classNamePrefix="custom"
|
||||||
|
placeholder="Select"
|
||||||
|
ref={ref}
|
||||||
|
options={showSaleStoreList}
|
||||||
|
onInputChange={onInputChange}
|
||||||
|
onChange={onSelectionChange}
|
||||||
|
getOptionLabel={(x) => x.saleStoreName}
|
||||||
|
getOptionValue={(x) => x.saleStoreId}
|
||||||
|
value={schSelSaleStoreList.filter(function (option) {
|
||||||
|
if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
|
||||||
|
return false
|
||||||
|
} else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
|
||||||
|
return option.saleStoreId === schSelSaleStoreId
|
||||||
|
} else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
|
||||||
|
return option.saleStoreId === schSelSaleStoreId
|
||||||
|
} else {
|
||||||
|
if (stuffSearch?.schSelSaleStoreId !== '') {
|
||||||
|
return option.saleStoreId === stuffSearch.schSelSaleStoreId
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
// isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
|
||||||
|
isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
|
||||||
|
isClearable={true}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl === '1' && ( */}
|
||||||
|
{session?.storeId !== 'T01' && session?.storeLvl === '1' && (
|
||||||
|
<Select
|
||||||
|
id="long-value-select1"
|
||||||
|
instanceId="long-value-select1"
|
||||||
|
className="react-select-custom"
|
||||||
|
classNamePrefix="custom"
|
||||||
|
placeholder="Select"
|
||||||
|
ref={ref}
|
||||||
|
options={showSaleStoreList[0]}
|
||||||
|
onChange={onSelectionChange}
|
||||||
|
getOptionLabel={(x) => x.saleStoreName}
|
||||||
|
getOptionValue={(x) => x.saleStoreId}
|
||||||
|
value={showSaleStoreList.filter(function (option) {
|
||||||
|
if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
|
||||||
|
return false
|
||||||
|
} else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
|
||||||
|
return option.saleStoreId === schSelSaleStoreId
|
||||||
|
} else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
|
||||||
|
return option.saleStoreId === schSelSaleStoreId
|
||||||
|
} else {
|
||||||
|
if (stuffSearch?.schSelSaleStoreId !== '') {
|
||||||
|
return option.saleStoreId === stuffSearch.schSelSaleStoreId
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
// isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
|
||||||
|
isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
|
||||||
|
isClearable={false}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{/* {sessionState?.storeId !== 'T01' && sessionState?.storeLvl !== '1' && ( */}
|
||||||
|
{session?.storeId !== 'T01' && session?.storeLvl !== '1' && (
|
||||||
|
<Select
|
||||||
|
id="long-value-select1"
|
||||||
|
instanceId="long-value-select1"
|
||||||
|
className="react-select-custom"
|
||||||
|
classNamePrefix="custom"
|
||||||
|
placeholder="Select"
|
||||||
|
ref={ref}
|
||||||
|
options={showSaleStoreList[0]}
|
||||||
|
onChange={onSelectionChange}
|
||||||
|
getOptionLabel={(x) => x.saleStoreName}
|
||||||
|
getOptionValue={(x) => x.saleStoreId}
|
||||||
|
value={showSaleStoreList.filter(function (option) {
|
||||||
|
if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
|
||||||
|
return false
|
||||||
|
} else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
|
||||||
|
return option.saleStoreId === schSelSaleStoreId
|
||||||
|
} else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
|
||||||
|
return option.saleStoreId === schSelSaleStoreId
|
||||||
|
} else {
|
||||||
|
if (stuffSearch?.schSelSaleStoreId !== '') {
|
||||||
|
return option.saleStoreId === stuffSearch.schSelSaleStoreId
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
isDisabled={true}
|
||||||
|
isClearable={false}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="select-wrap" style={{ flex: 1 }}>
|
||||||
|
<Select
|
||||||
|
id="long-value-select2"
|
||||||
|
instanceId="long-value-select2"
|
||||||
|
className="react-select-custom"
|
||||||
|
classNamePrefix="custom"
|
||||||
|
placeholder="Select"
|
||||||
|
ref={ref2}
|
||||||
|
options={otherSaleStoreList}
|
||||||
|
onChange={onSelectionChange2}
|
||||||
|
getOptionLabel={(x) => x.saleStoreName}
|
||||||
|
getOptionValue={(x) => x.saleStoreId}
|
||||||
|
isDisabled={otherSaleStoreList.length > 1 ? false : true}
|
||||||
|
isClearable={true}
|
||||||
|
value={otherSaleStoreList.filter(function (option) {
|
||||||
|
return option.saleStoreId === otherSaleStoreId
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>{getMessage('stuff.search.period')}</th>
|
||||||
|
<td colSpan={7}>
|
||||||
<div className="form-flex-wrap">
|
<div className="form-flex-wrap">
|
||||||
<div className="radio-wrap mr10">
|
<div className="radio-wrap mr10">
|
||||||
<div className="d-check-radio light mr10">
|
<div className="d-check-radio light mr10">
|
||||||
|
|||||||
@ -25,58 +25,90 @@ export default function StuffSubHeader({ type }) {
|
|||||||
const moveFloorPlan = () => {
|
const moveFloorPlan = () => {
|
||||||
setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
|
setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
|
||||||
|
|
||||||
router.push('/floor-plan')
|
//상단 헤더에서 이동할땐 무조건 첫번째 플랜으로
|
||||||
|
router.push('/floor-plan/estimate/5/1')
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="sub-header">
|
<>
|
||||||
<div className="sub-header-inner">
|
<div className="sub-header">
|
||||||
{type === 'list' && (
|
<div className="sub-header-inner">
|
||||||
<Link href={'#'}>
|
{type === 'list' && (
|
||||||
<h1 className="sub-header-title">{getMessage('header.menus.management')}</h1>
|
<>
|
||||||
</Link>
|
<Link href={'#'}>
|
||||||
)}
|
<h1 className="sub-header-title">{getMessage('header.menus.management')}</h1>
|
||||||
{type === 'temp' && (
|
|
||||||
<ul className="sub-header-title-wrap">
|
|
||||||
<li className="title-item">
|
|
||||||
<Link className="sub-header-title" href={'#'}>
|
|
||||||
{getMessage('stuff.temp.subTitle')}
|
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
<ul className="sub-header-location">
|
||||||
</ul>
|
<li className="location-item">
|
||||||
)}
|
<span className="home">
|
||||||
{type === 'detail' && (
|
<Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
|
||||||
<ul className="sub-header-title-wrap">
|
</span>
|
||||||
<li className="title-item">
|
</li>
|
||||||
<Link className="sub-header-title" href={'#'}>
|
<li className="location-item">
|
||||||
{getMessage('stuff.temp.subTitle')}
|
<span>{getMessage('header.menus.management')}</span>
|
||||||
</Link>
|
</li>
|
||||||
</li>
|
<li className="location-item">
|
||||||
<li className="title-item">
|
<span>{getMessage('header.menus.management.stuffList')}</span>
|
||||||
<a className="sub-header-title" onClick={moveFloorPlan}>
|
</li>
|
||||||
<span className="icon drawing"></span>
|
</ul>
|
||||||
{getMessage('plan.menu.plan.drawing')}
|
</>
|
||||||
</a>
|
)}
|
||||||
</li>
|
{type === 'temp' && (
|
||||||
</ul>
|
<>
|
||||||
)}
|
<ul className="sub-header-title-wrap">
|
||||||
|
<li className="title-item">
|
||||||
{type !== 'detail' && (
|
<Link className="sub-header-title" href={'#'}>
|
||||||
<ul className="sub-header-location">
|
{getMessage('stuff.temp.subTitle')}
|
||||||
<li className="location-item">
|
</Link>
|
||||||
<span className="home">
|
</li>
|
||||||
<Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
|
</ul>
|
||||||
</span>
|
<ul className="sub-header-location">
|
||||||
</li>
|
<li className="location-item">
|
||||||
<li className="location-item">
|
<span className="home">
|
||||||
<span>{getMessage('header.menus.management')}</span>
|
<Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
|
||||||
</li>
|
</span>
|
||||||
<li className="location-item">
|
</li>
|
||||||
<span>{getMessage('header.menus.management.stuff')}</span>
|
<li className="location-item">
|
||||||
</li>
|
<span>{getMessage('header.menus.management')}</span>
|
||||||
</ul>
|
</li>
|
||||||
)}
|
<li className="location-item">
|
||||||
|
<span>{getMessage('header.menus.management.newStuff')}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{type === 'detail' && (
|
||||||
|
<>
|
||||||
|
<ul className="sub-header-title-wrap">
|
||||||
|
<li className="title-item">
|
||||||
|
<Link className="sub-header-title" href={'#'}>
|
||||||
|
{getMessage('stuff.temp.subTitle')}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="title-item">
|
||||||
|
<a className="sub-header-title" onClick={moveFloorPlan}>
|
||||||
|
<span className="icon drawing"></span>
|
||||||
|
{getMessage('stuff.temp.subTitle2')}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul className="sub-header-location">
|
||||||
|
<li className="location-item">
|
||||||
|
<span className="home">
|
||||||
|
<Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className="location-item">
|
||||||
|
<span>{getMessage('header.menus.management')}</span>
|
||||||
|
</li>
|
||||||
|
<li className="location-item">
|
||||||
|
<span>{getMessage('header.menus.management.newStuff')}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -59,6 +59,7 @@ export function useCanvasConfigInitialize() {
|
|||||||
|
|
||||||
const canvasLoadInit = () => {
|
const canvasLoadInit = () => {
|
||||||
roofInit() //화면표시 초기화
|
roofInit() //화면표시 초기화
|
||||||
|
groupInit()
|
||||||
}
|
}
|
||||||
|
|
||||||
const gridInit = () => {
|
const gridInit = () => {
|
||||||
@ -94,5 +95,48 @@ export function useCanvasConfigInitialize() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const groupInit = () => {
|
||||||
|
const groups = canvas.getObjects().filter((obj) => obj.groupYn)
|
||||||
|
const groupIds = []
|
||||||
|
|
||||||
|
groups.forEach((group) => {
|
||||||
|
if (!groupIds.includes(group.id)) {
|
||||||
|
groupIds.push(group.id)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
groupIds.forEach((id) => {
|
||||||
|
const groupObjects = canvas.getObjects().filter((obj) => obj.id === id && obj.type !== 'text')
|
||||||
|
const objectsName = canvas.getObjects().filter((obj) => obj.id === id && obj.type !== 'text')[0].groupName
|
||||||
|
const lineDirection = canvas.getObjects().filter((obj) => obj.id === id && obj.name === 'centerLine')[0].lineDirection
|
||||||
|
const text = canvas.getObjects().filter((obj) => obj.id === id && obj.type === 'text')[0]
|
||||||
|
|
||||||
|
let objectArray = []
|
||||||
|
|
||||||
|
if (groupObjects) {
|
||||||
|
groupObjects.forEach((obj) => {
|
||||||
|
objectArray.push(obj)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
objectArray.push(text)
|
||||||
|
|
||||||
|
objectArray.forEach((obj) => {
|
||||||
|
canvas?.remove(obj)
|
||||||
|
})
|
||||||
|
|
||||||
|
const group = new fabric.Group(objectArray, {
|
||||||
|
groupId: id,
|
||||||
|
name: objectsName,
|
||||||
|
selectable: true,
|
||||||
|
lockMovementX: true,
|
||||||
|
lockMovementY: true,
|
||||||
|
originX: 'center',
|
||||||
|
originY: 'center',
|
||||||
|
lineDirection: lineDirection,
|
||||||
|
})
|
||||||
|
canvas.add(group)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
return { canvasLoadInit, gridInit }
|
return { canvasLoadInit, gridInit }
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import { useEffect } from 'react'
|
import { useEffect } from 'react'
|
||||||
import { useRecoilValue } from 'recoil'
|
import { useRecoilValue, useRecoilState } from 'recoil'
|
||||||
import { wordDisplaySelector } from '@/store/settingAtom'
|
import { wordDisplaySelector } from '@/store/settingAtom'
|
||||||
import { useEvent } from '@/hooks/useEvent'
|
import { useEvent } from '@/hooks/useEvent'
|
||||||
import { checkLineOrientation, getDistance } from '@/util/canvas-util'
|
import { checkLineOrientation, getDistance } from '@/util/canvas-util'
|
||||||
@ -9,30 +9,35 @@ import { canvasState } from '@/store/canvasAtom'
|
|||||||
import { v4 as uuidv4 } from 'uuid'
|
import { v4 as uuidv4 } from 'uuid'
|
||||||
import { usePopup } from '@/hooks/usePopup'
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
import Distance from '@/components/floor-plan/modal/distance/Distance'
|
import Distance from '@/components/floor-plan/modal/distance/Distance'
|
||||||
|
import { commonUtilsState } from '@/store/commonUtilsAtom'
|
||||||
|
import { center, point } from '@turf/turf'
|
||||||
|
|
||||||
export function useCommonUtils({ commonFunctionState, setCommonFunctionState }) {
|
export function useCommonUtils() {
|
||||||
const canvas = useRecoilValue(canvasState)
|
const canvas = useRecoilValue(canvasState)
|
||||||
const wordDisplay = useRecoilValue(wordDisplaySelector)
|
const wordDisplay = useRecoilValue(wordDisplaySelector)
|
||||||
const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
|
const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
|
||||||
const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
|
const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
|
||||||
const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText'))
|
const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText'))
|
||||||
const commonTextFont = useRecoilValue(fontSelector('commonText'))
|
const commonTextFont = useRecoilValue(fontSelector('commonText'))
|
||||||
|
const [commonUtils, setCommonUtilsState] = useRecoilState(commonUtilsState)
|
||||||
|
|
||||||
const { addPopup } = usePopup()
|
const { addPopup } = usePopup()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
initEvent()
|
initEvent()
|
||||||
if (commonFunctionState.text) {
|
if (commonUtils.text) {
|
||||||
commonTextMode()
|
commonTextMode()
|
||||||
} else if (commonFunctionState.dimension) {
|
} else if (commonUtils.dimension) {
|
||||||
commonDimensionMode()
|
commonDimensionMode()
|
||||||
} else if (commonFunctionState.distance) {
|
} else if (commonUtils.distance) {
|
||||||
commonDistanceMode()
|
commonDistanceMode()
|
||||||
}
|
}
|
||||||
}, [commonFunctionState, dimensionSettings, commonTextFont, dimensionLineTextFont])
|
}, [commonUtils, dimensionSettings, commonTextFont, dimensionLineTextFont])
|
||||||
|
|
||||||
const commonTextMode = () => {
|
const commonTextMode = () => {
|
||||||
let textbox
|
let textbox
|
||||||
if (commonFunctionState.text) {
|
if (commonUtils.text) {
|
||||||
|
commonTextKeyEvent()
|
||||||
addCanvasMouseEventListener('mouse:down', (event) => {
|
addCanvasMouseEventListener('mouse:down', (event) => {
|
||||||
const pointer = canvas?.getPointer(event.e)
|
const pointer = canvas?.getPointer(event.e)
|
||||||
textbox = new fabric.Textbox('', {
|
textbox = new fabric.Textbox('', {
|
||||||
@ -46,6 +51,11 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
|
|||||||
fontFamily: commonTextFont.fontFamily.value,
|
fontFamily: commonTextFont.fontFamily.value,
|
||||||
fontSize: commonTextFont.fontSize.value,
|
fontSize: commonTextFont.fontSize.value,
|
||||||
fontStyle: commonTextFont.fontWeight.value,
|
fontStyle: commonTextFont.fontWeight.value,
|
||||||
|
selectable: true,
|
||||||
|
lockMovementX: true,
|
||||||
|
lockMovementY: true,
|
||||||
|
originX: 'center',
|
||||||
|
originY: 'center',
|
||||||
})
|
})
|
||||||
|
|
||||||
canvas?.add(textbox)
|
canvas?.add(textbox)
|
||||||
@ -53,70 +63,120 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
|
|||||||
textbox.enterEditing()
|
textbox.enterEditing()
|
||||||
textbox.selectAll()
|
textbox.selectAll()
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
addDocumentEventListener('keydown', document, (e) => {
|
const createDimensionArrow = (x, y, angle, id) => {
|
||||||
if (e.key === 'Enter') {
|
return new fabric.Triangle({
|
||||||
if (commonFunctionState.text) {
|
left: x,
|
||||||
const activeObject = canvas.getActiveObject()
|
top: y,
|
||||||
if (activeObject && activeObject.isEditing) {
|
originX: 'center',
|
||||||
if (activeObject.text === '') {
|
originY: 'center',
|
||||||
canvas?.remove(activeObject)
|
angle: angle,
|
||||||
} else {
|
width: 15,
|
||||||
activeObject.exitEditing()
|
height: 15,
|
||||||
}
|
fill: dimensionSettings.color,
|
||||||
//정책 협의
|
selectable: true,
|
||||||
const texts = canvas.getObjects().filter((obj) => obj.name === 'commonText')
|
name: 'arrow',
|
||||||
texts.forEach((text) => {
|
id: id,
|
||||||
text.set({ editable: false })
|
})
|
||||||
})
|
}
|
||||||
|
|
||||||
canvas.renderAll()
|
const createDimensionExtendLine = (line, lineDirection, extendLength) => {
|
||||||
}
|
let extendLine = []
|
||||||
}
|
|
||||||
}
|
const extendLineLength = extendLength ? extendLength : 0
|
||||||
})
|
|
||||||
|
if (lineDirection === 'horizontal') {
|
||||||
|
if (extendLineLength >= 0) {
|
||||||
|
extendLine = [
|
||||||
|
[line.x1, line.y1 - 20 - extendLineLength, line.x1, line.y1 + 20],
|
||||||
|
[line.x2, line.y2 - 20 - extendLineLength, line.x2, line.y2 + 20],
|
||||||
|
]
|
||||||
|
} else {
|
||||||
|
extendLine = [
|
||||||
|
[line.x1, line.y1 + 20 - extendLineLength, line.x1, line.y1 - 20],
|
||||||
|
[line.x2, line.y2 + 20 - extendLineLength, line.x2, line.y2 - 20],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (extendLineLength >= 0) {
|
||||||
|
extendLine = [
|
||||||
|
[line.x1 - 20 - extendLineLength, line.y1, line.x1 + 20, line.y1],
|
||||||
|
[line.x2 - 20 - extendLineLength, line.y2, line.x2 + 20, line.y2],
|
||||||
|
]
|
||||||
|
} else {
|
||||||
|
extendLine = [
|
||||||
|
[line.x1 - 20 - extendLineLength, line.y1, line.x1 - 20, line.y1],
|
||||||
|
[line.x2 - 20 - extendLineLength, line.y2, line.x2 - 20, line.y2],
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return extendLine
|
||||||
|
}
|
||||||
|
|
||||||
|
const calcDimensionPosition = (lineDirection, p1CenterX, p1CenterY, p2CenterX, p2CenterY) => {
|
||||||
|
// 첫 번째 포인트에 화살표 추가 좌측 -> 우측으로 그릴때
|
||||||
|
let paddingX = lineDirection === 'horizontal' ? p1CenterX + 7.5 : p1CenterX + 0.5
|
||||||
|
let paddingX2 = lineDirection === 'horizontal' ? p2CenterX - 7.5 : p2CenterX + 0.5
|
||||||
|
let paddingY = lineDirection === 'horizontal' ? p1CenterY + 0.5 : p1CenterY + 8
|
||||||
|
let paddingY2 = lineDirection === 'horizontal' ? p2CenterY + 0.5 : p2CenterY - 8
|
||||||
|
let angle1 = lineDirection === 'horizontal' ? -90 : 0
|
||||||
|
let angle2 = lineDirection === 'horizontal' ? 90 : 180
|
||||||
|
|
||||||
|
// 우측 -> 좌측으로 그릴땐 반대
|
||||||
|
if (paddingX > paddingX2 || paddingY > paddingY2) {
|
||||||
|
paddingX = lineDirection === 'horizontal' ? p1CenterX - 7.5 : p1CenterX + 0.5
|
||||||
|
paddingX2 = lineDirection === 'horizontal' ? p2CenterX + 7.5 : p2CenterX + 0.5
|
||||||
|
paddingY = lineDirection === 'horizontal' ? p1CenterY + 0.5 : p1CenterY - 7.5
|
||||||
|
paddingY2 = lineDirection === 'horizontal' ? p2CenterY + 0.5 : p2CenterY + 7.5
|
||||||
|
angle1 = lineDirection === 'horizontal' ? 90 : 180
|
||||||
|
angle2 = lineDirection === 'horizontal' ? 270 : 0
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
paddingX,
|
||||||
|
paddingX2,
|
||||||
|
paddingY,
|
||||||
|
paddingY2,
|
||||||
|
angle1,
|
||||||
|
angle2,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const commonDimensionMode = () => {
|
const commonDimensionMode = () => {
|
||||||
if (commonFunctionState.dimension) {
|
if (commonUtils.dimension) {
|
||||||
|
const uuid = uuidv4()
|
||||||
|
|
||||||
let points = []
|
let points = []
|
||||||
let distanceText = null
|
let distanceText = null
|
||||||
let minX, minY, maxX, maxY
|
let minX, minY, maxX, maxY
|
||||||
|
|
||||||
// 화살표를 생성하는 함수
|
// 화살표를 생성하는 함수
|
||||||
function createArrow(x, y, angle) {
|
|
||||||
return new fabric.Triangle({
|
|
||||||
left: x,
|
|
||||||
top: y,
|
|
||||||
originX: 'center',
|
|
||||||
originY: 'center',
|
|
||||||
angle: angle,
|
|
||||||
width: 15,
|
|
||||||
height: 15,
|
|
||||||
fill: dimensionSettings.color,
|
|
||||||
selectable: false,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const circleOptions = {
|
const circleOptions = {
|
||||||
radius: 5,
|
radius: 5,
|
||||||
strokeWidth: 2,
|
strokeWidth: 2,
|
||||||
stroke: 'red',
|
stroke: 'red',
|
||||||
fill: 'white',
|
fill: 'white',
|
||||||
selectable: false,
|
selectable: true,
|
||||||
}
|
}
|
||||||
|
|
||||||
const lineOptions = {
|
const lineOptions = {
|
||||||
stroke: dimensionSettings.color,
|
stroke: dimensionSettings.color,
|
||||||
strokeWidth: dimensionSettings.pixel,
|
strokeWidth: dimensionSettings.pixel,
|
||||||
name: 'dimensionLine',
|
|
||||||
selectable: true,
|
selectable: true,
|
||||||
|
originX: 'center',
|
||||||
|
originY: 'center',
|
||||||
}
|
}
|
||||||
|
|
||||||
// 캔버스에 클릭 이벤트 추가
|
// 캔버스에 클릭 이벤트 추가
|
||||||
addCanvasMouseEventListener('mouse:down', (e) => {
|
addCanvasMouseEventListener('mouse:down', (e) => {
|
||||||
|
let groupObjects = []
|
||||||
|
|
||||||
const pointer = canvas.getPointer(e.e)
|
const pointer = canvas.getPointer(e.e)
|
||||||
|
|
||||||
let point
|
let point
|
||||||
|
|
||||||
if (points.length === 0) {
|
if (points.length === 0) {
|
||||||
@ -165,40 +225,37 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
|
|||||||
})
|
})
|
||||||
|
|
||||||
// 두 포인트 간에 직선을 그림 (중심을 기준으로)
|
// 두 포인트 간에 직선을 그림 (중심을 기준으로)
|
||||||
const line = new fabric.Line([p1CenterX, p1CenterY, p2CenterX, p2CenterY], lineOptions)
|
const line = new fabric.Line([p1CenterX, p1CenterY, p2CenterX, p2CenterY], {
|
||||||
canvas.add(line)
|
...lineOptions,
|
||||||
|
name: 'centerLine',
|
||||||
|
id: uuid,
|
||||||
|
})
|
||||||
|
// canvas.add(line)
|
||||||
|
|
||||||
|
groupObjects.push(line)
|
||||||
|
|
||||||
const distance = getDistance(p1CenterX, p1CenterY, p2CenterX, p2CenterY)
|
const distance = getDistance(p1CenterX, p1CenterY, p2CenterX, p2CenterY)
|
||||||
const lineDirection = checkLineOrientation(line)
|
const lineDirection = checkLineOrientation(line)
|
||||||
let extendLine = []
|
|
||||||
|
|
||||||
if (lineDirection === 'horizontal') {
|
const extendListArray = createDimensionExtendLine(line, lineDirection)
|
||||||
extendLine = [
|
|
||||||
[line.x1, line.y1 - 20, line.x1, line.y1 + 20],
|
|
||||||
[line.x2, line.y2 - 20, line.x2, line.y2 + 20],
|
|
||||||
]
|
|
||||||
} else {
|
|
||||||
extendLine = [
|
|
||||||
[line.x1 - 20, line.y1, line.x1 + 20, line.y1],
|
|
||||||
[line.x2 - 20, line.y2, line.x2 + 20, line.y2],
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
extendLine.forEach((line) => {
|
extendListArray.forEach((line) => {
|
||||||
const extendLine = new fabric.Line(line, lineOptions)
|
const extendLine = new fabric.Line(line, {
|
||||||
canvas.add(extendLine)
|
...lineOptions,
|
||||||
|
name: 'extendLine',
|
||||||
|
id: uuid,
|
||||||
|
})
|
||||||
|
// canvas.add(extendLine)
|
||||||
|
groupObjects.push(extendLine)
|
||||||
})
|
})
|
||||||
|
|
||||||
// 첫 번째 포인트에 화살표 추가
|
const dimensionPosition = calcDimensionPosition(lineDirection, p1CenterX, p1CenterY, p2CenterX, p2CenterY)
|
||||||
const paddingX = lineDirection === 'horizontal' ? p1CenterX + 7.5 : p1CenterX + 1
|
const arrow1 = createDimensionArrow(dimensionPosition.paddingX, dimensionPosition.paddingY, dimensionPosition.angle1, uuid) // 반대 방향 화살표
|
||||||
const paddingX2 = lineDirection === 'horizontal' ? p2CenterX - 6.5 : p2CenterX + 1
|
const arrow2 = createDimensionArrow(dimensionPosition.paddingX2, dimensionPosition.paddingY2, dimensionPosition.angle2, uuid) // 정방향 화살표
|
||||||
const paddingY = lineDirection === 'horizontal' ? p1CenterY + 1 : p1CenterY + 8
|
// canvas.add(arrow1)
|
||||||
const paddingY2 = lineDirection === 'horizontal' ? p2CenterY + 1 : p2CenterY - 8
|
// canvas.add(arrow2)
|
||||||
|
|
||||||
const arrow1 = createArrow(paddingX, paddingY, lineDirection === 'horizontal' ? -90 : 0) // 반대 방향 화살표
|
groupObjects.push(arrow1, arrow2)
|
||||||
const arrow2 = createArrow(paddingX2, paddingY2, lineDirection === 'horizontal' ? 90 : 180) // 정방향 화살표
|
|
||||||
canvas.add(arrow1)
|
|
||||||
canvas.add(arrow2)
|
|
||||||
|
|
||||||
distanceText = new fabric.Text(`${distance * 10} `, {
|
distanceText = new fabric.Text(`${distance * 10} `, {
|
||||||
left: (p1CenterX + p2CenterX) / 2 + (lineDirection === 'horizontal' ? 0 : -15),
|
left: (p1CenterX + p2CenterX) / 2 + (lineDirection === 'horizontal' ? 0 : -15),
|
||||||
@ -213,18 +270,36 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
|
|||||||
originY: 'center',
|
originY: 'center',
|
||||||
angle: lineDirection === 'horizontal' ? 0 : 270,
|
angle: lineDirection === 'horizontal' ? 0 : 270,
|
||||||
name: 'dimensionLineText',
|
name: 'dimensionLineText',
|
||||||
|
id: uuid,
|
||||||
// lockMovementX: false,
|
// lockMovementX: false,
|
||||||
// lockMovementY: false,
|
// lockMovementY: false,
|
||||||
})
|
})
|
||||||
canvas.add(distanceText)
|
// canvas.add(distanceText)
|
||||||
|
groupObjects.push(distanceText)
|
||||||
|
|
||||||
// minX = p1CenterX
|
const group = new fabric.Group(groupObjects, {
|
||||||
// maxX = p2CenterX
|
name: 'dimensionLine',
|
||||||
// minY = p1CenterY
|
selectable: true,
|
||||||
// maxY = p2CenterY
|
originX: 'center',
|
||||||
|
originY: 'center',
|
||||||
|
lineDirection: lineDirection,
|
||||||
|
groupId: uuid,
|
||||||
|
})
|
||||||
|
|
||||||
|
canvas.add(group)
|
||||||
|
|
||||||
|
// groupObjects.push(distanceText)
|
||||||
|
|
||||||
|
canvas.renderAll()
|
||||||
|
|
||||||
// 거리 계산 후, 다음 측정을 위해 초기화
|
// 거리 계산 후, 다음 측정을 위해 초기화
|
||||||
points = []
|
points = []
|
||||||
|
|
||||||
|
if (setCommonUtilsState)
|
||||||
|
setCommonUtilsState({
|
||||||
|
...commonUtilsState,
|
||||||
|
dimension: false,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 캔버스 다시 그리기
|
// 캔버스 다시 그리기
|
||||||
@ -251,7 +326,7 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
|
|||||||
}
|
}
|
||||||
|
|
||||||
const commonDistanceMode = () => {
|
const commonDistanceMode = () => {
|
||||||
if (commonFunctionState.distance) {
|
if (commonUtils.distance) {
|
||||||
let points = []
|
let points = []
|
||||||
let distanceText = null
|
let distanceText = null
|
||||||
let drawPoints = []
|
let drawPoints = []
|
||||||
@ -261,13 +336,15 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
|
|||||||
strokeWidth: 1,
|
strokeWidth: 1,
|
||||||
originX: 'center',
|
originX: 'center',
|
||||||
originY: 'center',
|
originY: 'center',
|
||||||
|
name: 'distance',
|
||||||
}
|
}
|
||||||
|
|
||||||
const lineOptions = {
|
const lineOptions = {
|
||||||
stroke: 'black',
|
stroke: 'black',
|
||||||
strokeWidth: 2,
|
strokeWidth: 1,
|
||||||
selectable: false,
|
selectable: false,
|
||||||
strokeDashArray: [9, 5],
|
strokeDashArray: [10, 5],
|
||||||
|
name: 'distance',
|
||||||
}
|
}
|
||||||
|
|
||||||
const textOptions = {
|
const textOptions = {
|
||||||
@ -277,11 +354,12 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
|
|||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
originX: 'center',
|
originX: 'center',
|
||||||
originY: 'center',
|
originY: 'center',
|
||||||
|
name: 'distance',
|
||||||
}
|
}
|
||||||
|
|
||||||
// 캔버스에 클릭 이벤트 추가
|
// 캔버스에 클릭 이벤트 추가
|
||||||
addCanvasMouseEventListener('mouse:down', function (options) {
|
addCanvasMouseEventListener('mouse:down', function (e) {
|
||||||
const pointer = canvas.getPointer(options.e)
|
const pointer = canvas.getPointer(e.e)
|
||||||
let point
|
let point
|
||||||
let cross = {}
|
let cross = {}
|
||||||
|
|
||||||
@ -338,7 +416,7 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
|
|||||||
top: (p1CenterY + p2CenterY) / 2,
|
top: (p1CenterY + p2CenterY) / 2,
|
||||||
...textOptions,
|
...textOptions,
|
||||||
})
|
})
|
||||||
// canvas.add(distanceText)
|
canvas.add(distanceText)
|
||||||
|
|
||||||
let distance2 = 0
|
let distance2 = 0
|
||||||
let distance3 = 0
|
let distance3 = 0
|
||||||
@ -355,13 +433,13 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
|
|||||||
top: (p2CenterY + p3.y) / 2,
|
top: (p2CenterY + p3.y) / 2,
|
||||||
...textOptions,
|
...textOptions,
|
||||||
})
|
})
|
||||||
// canvas.add(distanceText)
|
canvas.add(distanceText)
|
||||||
distanceText = new fabric.Text(`${distance3 * 10}`, {
|
distanceText = new fabric.Text(`${distance3 * 10}`, {
|
||||||
left: (p3.x + p1CenterX) / 2,
|
left: (p3.x + p1CenterX) / 2,
|
||||||
top: (p3.y + p1CenterY) / 2,
|
top: (p3.y + p1CenterY) / 2,
|
||||||
...textOptions,
|
...textOptions,
|
||||||
})
|
})
|
||||||
// canvas.add(distanceText)
|
canvas.add(distanceText)
|
||||||
}
|
}
|
||||||
|
|
||||||
const id = uuidv4()
|
const id = uuidv4()
|
||||||
@ -375,9 +453,16 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
|
|||||||
vertical: distance2 * 10,
|
vertical: distance2 * 10,
|
||||||
diagonal: distance1 * 10,
|
diagonal: distance1 * 10,
|
||||||
}}
|
}}
|
||||||
|
deleteDistance={closeDistancePopup}
|
||||||
/>,
|
/>,
|
||||||
)
|
)
|
||||||
|
|
||||||
|
if (setCommonUtilsState)
|
||||||
|
setCommonUtilsState({
|
||||||
|
...commonUtils,
|
||||||
|
distance: false,
|
||||||
|
})
|
||||||
|
|
||||||
// 거리 계산 후, 다음 측정을 위해 초기화
|
// 거리 계산 후, 다음 측정을 위해 초기화
|
||||||
points = []
|
points = []
|
||||||
}
|
}
|
||||||
@ -387,8 +472,36 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const commonTextKeyEvent = () => {
|
||||||
|
//텍스트 모드일때 엔터 이벤트
|
||||||
|
addDocumentEventListener('keydown', document, (e) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
const activeObject = canvas.getActiveObject()
|
||||||
|
if (activeObject && activeObject.name === 'commonText') {
|
||||||
|
if (activeObject && activeObject.isEditing) {
|
||||||
|
if (activeObject.text === '') {
|
||||||
|
canvas?.remove(activeObject)
|
||||||
|
} else {
|
||||||
|
activeObject.exitEditing()
|
||||||
|
}
|
||||||
|
//정책 협의
|
||||||
|
const texts = canvas.getObjects().filter((obj) => obj.name === 'commonText')
|
||||||
|
texts.forEach((text) => {
|
||||||
|
text.set({ editable: false })
|
||||||
|
})
|
||||||
|
|
||||||
|
canvas.renderAll()
|
||||||
|
if (setCommonUtilsState) setCommonUtilsState({ ...commonUtils, text: false })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
initEvent()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const commonFunctions = (mode) => {
|
const commonFunctions = (mode) => {
|
||||||
let tempStates = { ...commonFunctionState }
|
let tempStates = { ...commonUtils }
|
||||||
|
|
||||||
if (tempStates[mode]) {
|
if (tempStates[mode]) {
|
||||||
tempStates[mode] = false
|
tempStates[mode] = false
|
||||||
@ -402,11 +515,266 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState })
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (setCommonFunctionState) setCommonFunctionState(tempStates)
|
if (setCommonUtilsState) setCommonUtilsState(tempStates)
|
||||||
|
}
|
||||||
|
|
||||||
|
const commonDeleteText = (object) => {
|
||||||
|
if (object) {
|
||||||
|
canvas?.remove(object)
|
||||||
|
|
||||||
|
if (object.id) {
|
||||||
|
const group = canvas.getObjects().filter((obj) => obj.id === object.id)
|
||||||
|
group.forEach((obj) => canvas?.remove(obj))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const commonMoveObject = (obj) => {
|
||||||
|
if (obj) {
|
||||||
|
obj.set({
|
||||||
|
lockMovementX: false,
|
||||||
|
lockMovementY: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
const originLeft = obj.left
|
||||||
|
const originTop = obj.top
|
||||||
|
|
||||||
|
addCanvasMouseEventListener('mouse:up', (e) => {
|
||||||
|
obj.set({
|
||||||
|
lockMovementX: true,
|
||||||
|
lockMovementY: true,
|
||||||
|
})
|
||||||
|
initEvent()
|
||||||
|
obj.setCoords()
|
||||||
|
updateGroupObjectCoords(obj, originLeft, originTop)
|
||||||
|
// canvas?.renderAll()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const commonCopyObject = (obj) => {
|
||||||
|
if (obj) {
|
||||||
|
let clonedObj = null
|
||||||
|
|
||||||
|
obj.clone((cloned) => {
|
||||||
|
clonedObj = cloned
|
||||||
|
})
|
||||||
|
|
||||||
|
addCanvasMouseEventListener('mouse:move', (e) => {
|
||||||
|
const pointer = canvas?.getPointer(e.e)
|
||||||
|
if (!clonedObj) return
|
||||||
|
|
||||||
|
canvas
|
||||||
|
.getObjects()
|
||||||
|
.filter((obj) => obj.name === 'clonedObj')
|
||||||
|
.forEach((obj) => canvas?.remove(obj))
|
||||||
|
|
||||||
|
clonedObj.set({
|
||||||
|
left: pointer.x,
|
||||||
|
top: pointer.y,
|
||||||
|
name: 'clonedObj',
|
||||||
|
})
|
||||||
|
canvas.add(clonedObj)
|
||||||
|
})
|
||||||
|
|
||||||
|
addCanvasMouseEventListener('mouse:down', (e) => {
|
||||||
|
clonedObj.set({
|
||||||
|
lockMovementX: true,
|
||||||
|
lockMovementY: true,
|
||||||
|
name: obj.name,
|
||||||
|
editable: false,
|
||||||
|
id: uuidv4(), //복사된 객체라 새로 따준다
|
||||||
|
})
|
||||||
|
initEvent()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const editText = () => {
|
||||||
|
const obj = canvas?.getActiveObject()
|
||||||
|
obj.set({ editable: true })
|
||||||
|
obj.enterEditing()
|
||||||
|
commonTextKeyEvent()
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteObject = () => {
|
||||||
|
const obj = canvas?.getActiveObject()
|
||||||
|
commonDeleteText(obj)
|
||||||
|
}
|
||||||
|
|
||||||
|
const moveObject = () => {
|
||||||
|
const obj = canvas?.getActiveObject()
|
||||||
|
commonMoveObject(obj)
|
||||||
|
}
|
||||||
|
|
||||||
|
const copyObject = () => {
|
||||||
|
const obj = canvas?.getActiveObject()
|
||||||
|
commonCopyObject(obj)
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeDistancePopup = () => {
|
||||||
|
const obj = canvas?.getObjects().filter((obj) => obj.name === 'distance')
|
||||||
|
if (obj) canvas.remove(...obj)
|
||||||
|
}
|
||||||
|
|
||||||
|
//선택된 그룹객체 restore 하고 item으로 다시 그리고 그 그린 객체 가지고 수정해서 재그룹화 시킨다
|
||||||
|
|
||||||
|
const changeDimensionExtendLine = () => {
|
||||||
|
const group = canvas?.getActiveObject()
|
||||||
|
const restoreGroup = group._restoreObjectsState()
|
||||||
|
canvas?.remove(group)
|
||||||
|
canvas?.renderAll()
|
||||||
|
|
||||||
|
restoreGroup._objects.forEach((obj) => {
|
||||||
|
canvas?.add(obj)
|
||||||
|
})
|
||||||
|
|
||||||
|
const id = group.groupId
|
||||||
|
const originLineDirection = group.lineDirection
|
||||||
|
const textObj = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
|
||||||
|
const centerLine = canvas?.getObjects().filter((obj) => obj.name === 'centerLine' && obj.id === id)[0]
|
||||||
|
const extendLine = canvas?.getObjects().filter((obj) => obj.name === 'extendLine' && obj.id === id)
|
||||||
|
const arrows = canvas?.getObjects().filter((obj) => obj.name === 'arrow' && obj.id === id)
|
||||||
|
|
||||||
|
const originX = centerLine.x1
|
||||||
|
const originY = centerLine.y1
|
||||||
|
let reGroupObj = []
|
||||||
|
|
||||||
|
addCanvasMouseEventListener('mouse:down', (e) => {
|
||||||
|
const pointer = canvas?.getPointer(e.e)
|
||||||
|
|
||||||
|
if (originLineDirection === 'horizontal') {
|
||||||
|
centerLine.set({
|
||||||
|
x1: centerLine.x1,
|
||||||
|
y1: pointer.y,
|
||||||
|
x2: centerLine.x2,
|
||||||
|
y2: pointer.y,
|
||||||
|
})
|
||||||
|
|
||||||
|
const differenceY = centerLine.y1 - originY
|
||||||
|
|
||||||
|
extendLine.forEach((obj) => {
|
||||||
|
obj.set({
|
||||||
|
x1: obj.x1,
|
||||||
|
y1: originY,
|
||||||
|
x2: obj.x2,
|
||||||
|
y2: differenceY > 0 ? pointer.y + 20 : pointer.y - 20,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
arrows.forEach((arrow) => {
|
||||||
|
arrow.set({
|
||||||
|
top: pointer.y,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
textObj.set({
|
||||||
|
top: pointer.y + 15,
|
||||||
|
})
|
||||||
|
textObj.setCoords()
|
||||||
|
} else {
|
||||||
|
centerLine.set({
|
||||||
|
x1: pointer.x,
|
||||||
|
y1: centerLine.y1,
|
||||||
|
x2: pointer.x,
|
||||||
|
y2: centerLine.y2,
|
||||||
|
})
|
||||||
|
|
||||||
|
const differenceX = centerLine.x1 - originX
|
||||||
|
|
||||||
|
extendLine.forEach((obj) => {
|
||||||
|
obj.set({
|
||||||
|
x1: originX,
|
||||||
|
y1: obj.y1,
|
||||||
|
x2: differenceX > 0 ? pointer.x + 20 : pointer.x - 20,
|
||||||
|
y2: obj.y2,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
arrows.forEach((arrow) => {
|
||||||
|
arrow.set({
|
||||||
|
left: pointer.x,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
textObj.set({
|
||||||
|
left: pointer.x - 15,
|
||||||
|
})
|
||||||
|
textObj.setCoords()
|
||||||
|
}
|
||||||
|
|
||||||
|
reGroupObj.push(centerLine, ...extendLine, ...arrows, textObj)
|
||||||
|
canvas?.remove(centerLine, ...extendLine, ...arrows, textObj)
|
||||||
|
|
||||||
|
const reGroup = new fabric.Group(reGroupObj, {
|
||||||
|
name: 'dimensionLine',
|
||||||
|
selectable: true,
|
||||||
|
lineDirection: originLineDirection,
|
||||||
|
groupId: id,
|
||||||
|
})
|
||||||
|
|
||||||
|
reGroupObj = []
|
||||||
|
canvas.add(reGroup)
|
||||||
|
initEvent()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 그룹 이동 시 라인 및 각 객체의 좌표를 절대 좌표로 업데이트하는 함수
|
||||||
|
function updateGroupObjectCoords(group, originLeft, originTop) {
|
||||||
|
const diffrenceLeft = group.left - originLeft
|
||||||
|
const diffrenceTop = group.top - originTop
|
||||||
|
|
||||||
|
group.getObjects().forEach((obj) => {
|
||||||
|
// 그룹 내 객체의 절대 좌표를 계산
|
||||||
|
|
||||||
|
const originObjLeft = obj.left
|
||||||
|
const originObjTop = obj.top
|
||||||
|
|
||||||
|
if (obj.type === 'line') {
|
||||||
|
// Line 객체의 경우, x1, y1, x2, y2 절대 좌표 계산
|
||||||
|
|
||||||
|
obj.set({
|
||||||
|
x1: obj.x1 + diffrenceLeft,
|
||||||
|
y1: obj.y1 + diffrenceTop,
|
||||||
|
x2: obj.x2 + diffrenceLeft,
|
||||||
|
y2: obj.y2 + diffrenceTop,
|
||||||
|
})
|
||||||
|
|
||||||
|
obj.set({
|
||||||
|
left: originObjLeft,
|
||||||
|
top: originObjTop,
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 다른 객체의 경우 left, top 절대 좌표 설정
|
||||||
|
obj.set({
|
||||||
|
...obj,
|
||||||
|
left: obj.left,
|
||||||
|
top: obj.top,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
obj.setCoords() // 좌표 반영
|
||||||
|
canvas?.renderAll()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteOuterLineObject = () => {
|
||||||
|
const selectedOuterLine = canvas.getActiveObject()
|
||||||
|
if (selectedOuterLine && selectedOuterLine.name === 'outerLine') {
|
||||||
|
canvas.remove(selectedOuterLine)
|
||||||
|
canvas.renderAll()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
commonFunctions,
|
commonFunctions,
|
||||||
dimensionSettings,
|
dimensionSettings,
|
||||||
|
commonMoveObject,
|
||||||
|
commonDeleteText,
|
||||||
|
deleteObject,
|
||||||
|
moveObject,
|
||||||
|
copyObject,
|
||||||
|
editText,
|
||||||
|
changeDimensionExtendLine,
|
||||||
|
deleteOuterLineObject,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { useRecoilValue } from 'recoil'
|
import { useRecoilValue } from 'recoil'
|
||||||
import { canvasState } from '@/store/canvasAtom'
|
import { canvasState } from '@/store/canvasAtom'
|
||||||
import { fontSelector, globalFontAtom } from '@/store/fontAtom'
|
import { fontSelector } from '@/store/fontAtom'
|
||||||
import { useEffect } from 'react'
|
import { useEffect } from 'react'
|
||||||
|
|
||||||
export function useFont() {
|
export function useFont() {
|
||||||
@ -17,7 +17,8 @@ export function useFont() {
|
|||||||
textObjs.forEach((obj) => {
|
textObjs.forEach((obj) => {
|
||||||
obj.set({
|
obj.set({
|
||||||
fontFamily: commonText.fontFamily.value,
|
fontFamily: commonText.fontFamily.value,
|
||||||
fontWeight: commonText.fontWeight.value,
|
fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||||
|
fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||||
fontSize: commonText.fontSize.value,
|
fontSize: commonText.fontSize.value,
|
||||||
fill: commonText.fontColor.value,
|
fill: commonText.fontColor.value,
|
||||||
})
|
})
|
||||||
@ -32,7 +33,8 @@ export function useFont() {
|
|||||||
textObjs.forEach((obj) => {
|
textObjs.forEach((obj) => {
|
||||||
obj.set({
|
obj.set({
|
||||||
fontFamily: dimensionLineText.fontFamily.value,
|
fontFamily: dimensionLineText.fontFamily.value,
|
||||||
fontWeight: dimensionLineText.fontWeight.value,
|
fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||||
|
fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||||
fontSize: dimensionLineText.fontSize.value,
|
fontSize: dimensionLineText.fontSize.value,
|
||||||
fill: dimensionLineText.fontColor.value,
|
fill: dimensionLineText.fontColor.value,
|
||||||
})
|
})
|
||||||
@ -47,7 +49,8 @@ export function useFont() {
|
|||||||
textObjs.forEach((obj) => {
|
textObjs.forEach((obj) => {
|
||||||
obj.set({
|
obj.set({
|
||||||
fontFamily: flowText.fontFamily.value,
|
fontFamily: flowText.fontFamily.value,
|
||||||
fontWeight: flowText.fontWeight.value,
|
fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||||
|
fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||||
fontSize: flowText.fontSize.value,
|
fontSize: flowText.fontSize.value,
|
||||||
fill: flowText.fontColor.value,
|
fill: flowText.fontColor.value,
|
||||||
})
|
})
|
||||||
@ -62,7 +65,8 @@ export function useFont() {
|
|||||||
textObjs.forEach((obj) => {
|
textObjs.forEach((obj) => {
|
||||||
obj.set({
|
obj.set({
|
||||||
fontFamily: lengthText.fontFamily.value,
|
fontFamily: lengthText.fontFamily.value,
|
||||||
fontWeight: lengthText.fontWeight.value,
|
fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||||
|
fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||||
fontSize: lengthText.fontSize.value,
|
fontSize: lengthText.fontSize.value,
|
||||||
fill: lengthText.fontColor.value,
|
fill: lengthText.fontColor.value,
|
||||||
})
|
})
|
||||||
|
|||||||
@ -4,13 +4,13 @@ import { useRecoilValue } from 'recoil'
|
|||||||
import { canvasState } from '@/store/canvasAtom'
|
import { canvasState } from '@/store/canvasAtom'
|
||||||
import { BATCH_TYPE, INPUT_TYPE } from '@/common/common'
|
import { BATCH_TYPE, INPUT_TYPE } from '@/common/common'
|
||||||
import { useEvent } from '@/hooks/useEvent'
|
import { useEvent } from '@/hooks/useEvent'
|
||||||
import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon, triangleToPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
|
import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon, setSurfaceShapePattern, triangleToPolygon } from '@/util/canvas-util'
|
||||||
import { useSwal } from '@/hooks/useSwal'
|
import { useSwal } from '@/hooks/useSwal'
|
||||||
import * as turf from '@turf/turf'
|
import * as turf from '@turf/turf'
|
||||||
import { usePolygon } from '@/hooks/usePolygon'
|
import { usePolygon } from '@/hooks/usePolygon'
|
||||||
import { QPolygon } from '@/components/fabric/QPolygon'
|
import { QPolygon } from '@/components/fabric/QPolygon'
|
||||||
|
|
||||||
export function useObjectBatch() {
|
export function useObjectBatch({ isHidden, setIsHidden }) {
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const canvas = useRecoilValue(canvasState)
|
const canvas = useRecoilValue(canvasState)
|
||||||
const { addCanvasMouseEventListener, initEvent } = useEvent()
|
const { addCanvasMouseEventListener, initEvent } = useEvent()
|
||||||
@ -21,12 +21,12 @@ export function useObjectBatch() {
|
|||||||
const selectedType = objectPlacement.typeRef.current.find((radio) => radio.checked).value
|
const selectedType = objectPlacement.typeRef.current.find((radio) => radio.checked).value
|
||||||
const isCrossChecked = buttonAct === 1 ? objectPlacement.isCrossRef.current.checked : false
|
const isCrossChecked = buttonAct === 1 ? objectPlacement.isCrossRef.current.checked : false
|
||||||
const objName = buttonAct === 1 ? BATCH_TYPE.OPENING : BATCH_TYPE.SHADOW
|
const objName = buttonAct === 1 ? BATCH_TYPE.OPENING : BATCH_TYPE.SHADOW
|
||||||
const objTempName = buttonAct === 1 ? BATCH_TYPE.OPENING_TEMP : BATCH_TYPE.SHADOW_TEMP
|
|
||||||
|
|
||||||
|
const objTempName = buttonAct === 1 ? BATCH_TYPE.OPENING_TEMP : BATCH_TYPE.SHADOW_TEMP
|
||||||
let rect, isDown, origX, origY
|
let rect, isDown, origX, origY
|
||||||
let selectedSurface
|
let selectedSurface
|
||||||
|
|
||||||
//프리입력
|
//프리입력
|
||||||
|
console.log('useObjectBatch', isHidden)
|
||||||
if (selectedType === INPUT_TYPE.FREE) {
|
if (selectedType === INPUT_TYPE.FREE) {
|
||||||
addCanvasMouseEventListener('mouse:down', (e) => {
|
addCanvasMouseEventListener('mouse:down', (e) => {
|
||||||
isDown = true
|
isDown = true
|
||||||
@ -41,6 +41,7 @@ export function useObjectBatch() {
|
|||||||
if (!selectedSurface) {
|
if (!selectedSurface) {
|
||||||
swalFire({ text: '지붕안에 그려야해요', icon: 'error' })
|
swalFire({ text: '지붕안에 그려야해요', icon: 'error' })
|
||||||
initEvent() //이벤트 초기화
|
initEvent() //이벤트 초기화
|
||||||
|
if (setIsHidden) setIsHidden(false)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -117,6 +118,8 @@ export function useObjectBatch() {
|
|||||||
rect.set({ name: objName })
|
rect.set({ name: objName })
|
||||||
rect.setCoords()
|
rect.setCoords()
|
||||||
initEvent()
|
initEvent()
|
||||||
|
|
||||||
|
if (setIsHidden) setIsHidden(false)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else if (selectedType === INPUT_TYPE.DIMENSION) {
|
} else if (selectedType === INPUT_TYPE.DIMENSION) {
|
||||||
@ -196,6 +199,7 @@ export function useObjectBatch() {
|
|||||||
rect.set({ name: objName })
|
rect.set({ name: objName })
|
||||||
rect.setCoords()
|
rect.setCoords()
|
||||||
initEvent()
|
initEvent()
|
||||||
|
if (setIsHidden) setIsHidden(false)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -399,6 +403,7 @@ export function useObjectBatch() {
|
|||||||
|
|
||||||
isDown = false
|
isDown = false
|
||||||
initEvent()
|
initEvent()
|
||||||
|
if (setIsHidden) setIsHidden(false)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else if (buttonAct === 4) {
|
} else if (buttonAct === 4) {
|
||||||
@ -494,6 +499,7 @@ export function useObjectBatch() {
|
|||||||
//지붕 밖으로 그렸을때
|
//지붕 밖으로 그렸을때
|
||||||
if (!turf.booleanWithin(pentagonPolygon, selectedSurfacePolygon)) {
|
if (!turf.booleanWithin(pentagonPolygon, selectedSurfacePolygon)) {
|
||||||
swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
|
swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
|
||||||
|
|
||||||
//일단 지워
|
//일단 지워
|
||||||
deleteTempObjects()
|
deleteTempObjects()
|
||||||
return
|
return
|
||||||
@ -574,6 +580,7 @@ export function useObjectBatch() {
|
|||||||
|
|
||||||
isDown = false
|
isDown = false
|
||||||
initEvent()
|
initEvent()
|
||||||
|
if (setIsHidden) setIsHidden(false)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -591,6 +598,7 @@ export function useObjectBatch() {
|
|||||||
)
|
)
|
||||||
canvas?.remove(...deleteTarget)
|
canvas?.remove(...deleteTarget)
|
||||||
initEvent() //이벤트 초기화
|
initEvent() //이벤트 초기화
|
||||||
|
if (setIsHidden) setIsHidden(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
const splitDormerTriangle = (triangle, direction) => {
|
const splitDormerTriangle = (triangle, direction) => {
|
||||||
@ -690,28 +698,40 @@ export function useObjectBatch() {
|
|||||||
leftPoints = [
|
leftPoints = [
|
||||||
{ x: points[0].x, y: points[0].y },
|
{ x: points[0].x, y: points[0].y },
|
||||||
{ x: points[0].x - (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
|
{ x: points[0].x - (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
|
||||||
{ x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y - (points[0].x - points[1].x) },
|
{
|
||||||
|
x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y),
|
||||||
|
y: points[0].y - (points[0].x - points[1].x),
|
||||||
|
},
|
||||||
{ x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
|
{ x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
|
||||||
]
|
]
|
||||||
|
|
||||||
rightPoints = [
|
rightPoints = [
|
||||||
{ x: points[0].x, y: points[0].y },
|
{ x: points[0].x, y: points[0].y },
|
||||||
{ x: points[0].x - (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
|
{ x: points[0].x - (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
|
||||||
{ x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y + (points[0].x - points[1].x) },
|
{
|
||||||
|
x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y),
|
||||||
|
y: points[0].y + (points[0].x - points[1].x),
|
||||||
|
},
|
||||||
{ x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
|
{ x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
|
||||||
]
|
]
|
||||||
} else if (direction === 'right') {
|
} else if (direction === 'right') {
|
||||||
leftPoints = [
|
leftPoints = [
|
||||||
{ x: points[0].x, y: points[0].y },
|
{ x: points[0].x, y: points[0].y },
|
||||||
{ x: points[0].x + (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
|
{ x: points[0].x + (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
|
||||||
{ x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y + (points[0].x - points[1].x) },
|
{
|
||||||
|
x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y),
|
||||||
|
y: points[0].y + (points[0].x - points[1].x),
|
||||||
|
},
|
||||||
{ x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
|
{ x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
|
||||||
]
|
]
|
||||||
|
|
||||||
rightPoints = [
|
rightPoints = [
|
||||||
{ x: points[0].x, y: points[0].y },
|
{ x: points[0].x, y: points[0].y },
|
||||||
{ x: points[0].x + (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
|
{ x: points[0].x + (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
|
||||||
{ x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y - (points[0].x - points[1].x) },
|
{
|
||||||
|
x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y),
|
||||||
|
y: points[0].y - (points[0].x - points[1].x),
|
||||||
|
},
|
||||||
{ x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
|
{ x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -39,18 +39,29 @@ export function useCanvasSetting() {
|
|||||||
//fetchSettings()
|
//fetchSettings()
|
||||||
//onClickOption()
|
//onClickOption()
|
||||||
//fetchSettings()
|
//fetchSettings()
|
||||||
|
}, [adsorptionPointMode])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
console.log('useCanvasSetting useEffect 실행3')
|
||||||
|
//fetchSettings()
|
||||||
|
//onClickOption()
|
||||||
|
//fetchSettings()
|
||||||
}, [settingModalFirstOptions, settingModalSecondOptions])
|
}, [settingModalFirstOptions, settingModalSecondOptions])
|
||||||
|
|
||||||
const fetchSettings = async () => {
|
const fetchSettings = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
|
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
|
||||||
|
console.log('res', res)
|
||||||
const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
|
const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
|
||||||
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
|
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
|
||||||
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
|
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
|
||||||
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
|
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
|
||||||
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
|
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item }))
|
||||||
...item,
|
|
||||||
}))
|
const patternData = {
|
||||||
|
adsorpPoint: res.adsorpPoint,
|
||||||
|
}
|
||||||
|
|
||||||
// 데이터 설정
|
// 데이터 설정
|
||||||
setSettingModalFirstOptions({
|
setSettingModalFirstOptions({
|
||||||
option1: optionData1,
|
option1: optionData1,
|
||||||
@ -61,6 +72,10 @@ export function useCanvasSetting() {
|
|||||||
option3: optionData3,
|
option3: optionData3,
|
||||||
option4: optionData4,
|
option4: optionData4,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
setAdsorptionPointMode(patternData.adsorpPoint)
|
||||||
|
|
||||||
|
console.log('adsorptionPointMode', adsorptionPointMode)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Data fetching error:', error)
|
console.error('Data fetching error:', error)
|
||||||
}
|
}
|
||||||
@ -110,8 +125,23 @@ export function useCanvasSetting() {
|
|||||||
|
|
||||||
setSettingModalSecondOptions({ option3, option4: updatedOption4 })
|
setSettingModalSecondOptions({ option3, option4: updatedOption4 })
|
||||||
|
|
||||||
|
//흡착점 ON / OFF
|
||||||
|
} else if (item === 'adsorpPoint') {
|
||||||
|
console.log('흡착점 ON / OFF ', item)
|
||||||
|
const options2 = settingModalFirstOptions?.option2.map((option2) => {
|
||||||
|
option2.selected = option2.id === item.id
|
||||||
|
return option2
|
||||||
|
})
|
||||||
|
|
||||||
|
const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
|
||||||
|
|
||||||
|
polygons.forEach((polygon) => {
|
||||||
|
setSurfaceShapePattern(polygon, item.column)
|
||||||
|
})
|
||||||
|
|
||||||
//디스플레이 설정(다 건 선택)
|
//디스플레이 설정(다 건 선택)
|
||||||
} else {
|
} else {
|
||||||
|
//console.log('디스플레이 설정1 ', item.column)
|
||||||
console.log('디스플레이 설정 ', item)
|
console.log('디스플레이 설정 ', item)
|
||||||
item.selected = !item.selected
|
item.selected = !item.selected
|
||||||
}
|
}
|
||||||
@ -155,7 +185,8 @@ export function useCanvasSetting() {
|
|||||||
circuitNumDisplay: dataToSend.firstOption1[5].selected,
|
circuitNumDisplay: dataToSend.firstOption1[5].selected,
|
||||||
flowDisplay: dataToSend.firstOption1[6].selected,
|
flowDisplay: dataToSend.firstOption1[6].selected,
|
||||||
trestleDisplay: dataToSend.firstOption1[7].selected,
|
trestleDisplay: dataToSend.firstOption1[7].selected,
|
||||||
totalDisplay: dataToSend.firstOption1[8].selected,
|
imageDisplay: dataToSend.firstOption1[8].selected,
|
||||||
|
totalDisplay: dataToSend.firstOption1[9].selected,
|
||||||
//차수 표시(단 건)
|
//차수 표시(단 건)
|
||||||
corridorDimension: dataToSend.firstOption3[0].selected,
|
corridorDimension: dataToSend.firstOption3[0].selected,
|
||||||
realDimension: dataToSend.firstOption3[1].selected,
|
realDimension: dataToSend.firstOption3[1].selected,
|
||||||
@ -169,6 +200,8 @@ export function useCanvasSetting() {
|
|||||||
adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
|
adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
|
||||||
adsorpRangeMedium: dataToSend.secondOption2[2].selected,
|
adsorpRangeMedium: dataToSend.secondOption2[2].selected,
|
||||||
adsorpRangeLarge: dataToSend.secondOption2[3].selected,
|
adsorpRangeLarge: dataToSend.secondOption2[3].selected,
|
||||||
|
//흡착점 ON/OFF
|
||||||
|
adsorpPoint: adsorptionPointMode,
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('patternData ', patternData)
|
console.log('patternData ', patternData)
|
||||||
@ -199,6 +232,7 @@ export function useCanvasSetting() {
|
|||||||
// 'circuitNumDisplay' 회로번호 표시
|
// 'circuitNumDisplay' 회로번호 표시
|
||||||
// 'flowDisplay' 흐름방향 표시 'arrow'
|
// 'flowDisplay' 흐름방향 표시 'arrow'
|
||||||
// 'trestleDisplay' 가대 표시
|
// 'trestleDisplay' 가대 표시
|
||||||
|
// 'imageDisplay' 이미지 표시
|
||||||
// 'totalDisplay' 집계표 표시
|
// 'totalDisplay' 집계표 표시
|
||||||
|
|
||||||
let optionName //옵션명
|
let optionName //옵션명
|
||||||
@ -230,9 +264,12 @@ export function useCanvasSetting() {
|
|||||||
case 'trestleDisplay': //가대 표시
|
case 'trestleDisplay': //가대 표시
|
||||||
optionName = ['8']
|
optionName = ['8']
|
||||||
break
|
break
|
||||||
case 'totalDisplay': //집계표 표시
|
case 'imageDisplay': //이미지 표시
|
||||||
optionName = ['9']
|
optionName = ['9']
|
||||||
break
|
break
|
||||||
|
case 'totalDisplay': //집계표 표시
|
||||||
|
optionName = ['10']
|
||||||
|
break
|
||||||
}
|
}
|
||||||
// 표시 선택 상태(true/false)
|
// 표시 선택 상태(true/false)
|
||||||
optionSelected = option1[i].selected
|
optionSelected = option1[i].selected
|
||||||
@ -259,10 +296,10 @@ export function useCanvasSetting() {
|
|||||||
setSettingModalFirstOptions,
|
setSettingModalFirstOptions,
|
||||||
settingModalSecondOptions,
|
settingModalSecondOptions,
|
||||||
setSettingModalSecondOptions,
|
setSettingModalSecondOptions,
|
||||||
|
adsorptionPointMode,
|
||||||
|
setAdsorptionPointMode,
|
||||||
fetchSettings,
|
fetchSettings,
|
||||||
onClickOption,
|
onClickOption,
|
||||||
frontSettings,
|
frontSettings,
|
||||||
adsorptionPointMode,
|
|
||||||
setAdsorptionPointMode,
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -22,6 +22,7 @@ import { useSwal } from '@/hooks/useSwal'
|
|||||||
import { booleanPointInPolygon } from '@turf/turf'
|
import { booleanPointInPolygon } from '@turf/turf'
|
||||||
import { usePopup } from '@/hooks/usePopup'
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
import { calculateAngle } from '@/util/qpolygon-utils'
|
import { calculateAngle } from '@/util/qpolygon-utils'
|
||||||
|
import { QPolygon } from '@/components/fabric/QPolygon'
|
||||||
|
|
||||||
// 보조선 작성
|
// 보조선 작성
|
||||||
export function useAuxiliaryDrawing(id) {
|
export function useAuxiliaryDrawing(id) {
|
||||||
@ -561,17 +562,62 @@ export function useAuxiliaryDrawing(id) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
|
const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
|
||||||
|
/*const allLines = [...auxiliaryLines]
|
||||||
const allLines = [...auxiliaryLines]
|
|
||||||
|
|
||||||
roofBases.forEach((roofBase) => {
|
roofBases.forEach((roofBase) => {
|
||||||
roofBase.lines.forEach((line) => {
|
allLines.push(...roofBase.lines)
|
||||||
allLines.push(line)
|
})*/
|
||||||
})
|
|
||||||
|
const innerLines = [...auxiliaryLines]
|
||||||
|
const roofLines = []
|
||||||
|
|
||||||
|
roofBases.forEach((roofBase) => {
|
||||||
|
innerLines.push(...roofBase.innerLines)
|
||||||
|
roofLines.push(...roofBase.lines)
|
||||||
})
|
})
|
||||||
|
|
||||||
auxiliaryLines.forEach((line1) => {
|
auxiliaryLines.forEach((line1) => {
|
||||||
allLines.forEach((line2) => {
|
let interSectionPointsWithRoofLines = []
|
||||||
|
|
||||||
|
//지붕선과 만나는 점을 찾는다.
|
||||||
|
roofLines.forEach((line2) => {
|
||||||
|
const intersectionPoint = calculateIntersection(line1, line2)
|
||||||
|
if (!intersectionPoint) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 기존 점과 겹치는지 확인
|
||||||
|
if (interSectionPointsWithRoofLines.some((point) => point.x === intersectionPoint.x && point.y === intersectionPoint.y)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
interSectionPointsWithRoofLines.push(intersectionPoint)
|
||||||
|
})
|
||||||
|
|
||||||
|
//지붕선과 만나는 점이 두개일 경우 넘친 보조선을 잘라준다 (케라바로 만든 마루)
|
||||||
|
if (interSectionPointsWithRoofLines.length === 2) {
|
||||||
|
const newLine = addLine(
|
||||||
|
[
|
||||||
|
interSectionPointsWithRoofLines[0].x,
|
||||||
|
interSectionPointsWithRoofLines[0].y,
|
||||||
|
interSectionPointsWithRoofLines[1].x,
|
||||||
|
interSectionPointsWithRoofLines[1].y,
|
||||||
|
],
|
||||||
|
{
|
||||||
|
stroke: 'black',
|
||||||
|
strokeWidth: 1,
|
||||||
|
selectable: false,
|
||||||
|
name: 'auxiliaryLine',
|
||||||
|
isFixed: true,
|
||||||
|
},
|
||||||
|
)
|
||||||
|
lineHistory.current.push(newLine)
|
||||||
|
removeLine(line1)
|
||||||
|
intersectionPoints.current.push(...interSectionPointsWithRoofLines)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
//보조선과 만나는 점을 찾는다.
|
||||||
|
innerLines.forEach((line2) => {
|
||||||
if (line1 === line2) {
|
if (line1 === line2) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@ -615,6 +661,53 @@ export function useAuxiliaryDrawing(id) {
|
|||||||
lineHistory.current.push(newLine)
|
lineHistory.current.push(newLine)
|
||||||
removeLine(line1)
|
removeLine(line1)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
/*auxiliaryLines.forEach((line1) => {
|
||||||
|
allLines.forEach((line2) => {
|
||||||
|
if (line1 === line2) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const intersectionPoint = calculateIntersection(line1, line2)
|
||||||
|
if (!intersectionPoint) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
roofAdsorptionPoints.current.push(intersectionPoint)
|
||||||
|
intersectionPoints.current.push(intersectionPoint)
|
||||||
|
|
||||||
|
const distance1 = distanceBetweenPoints({ x: line1.x1, y: line1.y1 }, intersectionPoint)
|
||||||
|
const distance2 = distanceBetweenPoints({ x: line1.x2, y: line1.y2 }, intersectionPoint)
|
||||||
|
|
||||||
|
if (distance1 === 0 || distance2 === 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
//historyLine에서 기존 line을 제거한다.
|
||||||
|
lineHistory.current = lineHistory.current.filter((history) => history !== line1)
|
||||||
|
|
||||||
|
let newLine
|
||||||
|
|
||||||
|
if (distance1 >= distance2) {
|
||||||
|
newLine = addLine([line1.x1, line1.y1, intersectionPoint.x, intersectionPoint.y], {
|
||||||
|
stroke: 'black',
|
||||||
|
strokeWidth: 1,
|
||||||
|
selectable: false,
|
||||||
|
name: 'auxiliaryLine',
|
||||||
|
isFixed: true,
|
||||||
|
intersectionPoint,
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
newLine = addLine([line1.x2, line1.y2, intersectionPoint.x, intersectionPoint.y], {
|
||||||
|
stroke: 'black',
|
||||||
|
strokeWidth: 1,
|
||||||
|
selectable: false,
|
||||||
|
name: 'auxiliaryLine',
|
||||||
|
isFixed: true,
|
||||||
|
intersectionPoint,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
lineHistory.current.push(newLine)
|
||||||
|
removeLine(line1)
|
||||||
|
})
|
||||||
|
})*/
|
||||||
})
|
})
|
||||||
addCanvasMouseEventListener('mouse:move', mouseMove)
|
addCanvasMouseEventListener('mouse:move', mouseMove)
|
||||||
}
|
}
|
||||||
@ -650,15 +743,38 @@ export function useAuxiliaryDrawing(id) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
|
const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
|
||||||
const innerLines = [...lineHistory.current]
|
|
||||||
|
//lineHistory.current에 있는 선들 중 startPoint와 endPoint가 겹치는 line은 제거
|
||||||
|
// 겹치는 선 하나는 canvas에서 제거한다.
|
||||||
|
|
||||||
|
const tempLines = [...lineHistory.current]
|
||||||
|
lineHistory.current = []
|
||||||
|
tempLines.forEach((line) => {
|
||||||
|
if (
|
||||||
|
lineHistory.current.some(
|
||||||
|
(history) =>
|
||||||
|
JSON.stringify(history.startPoint) === JSON.stringify(line.startPoint) &&
|
||||||
|
JSON.stringify(history.endPoint) === JSON.stringify(line.endPoint),
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
canvas.remove(line)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
lineHistory.current.push(line)
|
||||||
|
})
|
||||||
|
|
||||||
|
const innerLines = lineHistory.current
|
||||||
|
|
||||||
roofBases.forEach((roofBase) => {
|
roofBases.forEach((roofBase) => {
|
||||||
|
const tempPolygonPoints = [...roofBase.points].map((obj) => {
|
||||||
|
return { x: Math.round(obj.x), y: Math.round(obj.y) }
|
||||||
|
})
|
||||||
const roofInnerLines = innerLines.filter((line) => {
|
const roofInnerLines = innerLines.filter((line) => {
|
||||||
const turfPolygon = polygonToTurfPolygon(roofBase)
|
const inPolygon1 =
|
||||||
|
tempPolygonPoints.some((point) => point.x === line.x1 && point.y === line.y1) || roofBase.inPolygon({ x: line.x1, y: line.y1 })
|
||||||
// innerLines의 두 점이 모두 polygon 안에 있는지 확인
|
const inPolygon2 =
|
||||||
const inPolygon1 = booleanPointInPolygon([line.x1, line.y1], turfPolygon)
|
tempPolygonPoints.some((point) => point.x === line.x2 && point.y === line.y2) || roofBase.inPolygon({ x: line.x2, y: line.y2 })
|
||||||
const inPolygon2 = booleanPointInPolygon([line.x2, line.y2], turfPolygon)
|
|
||||||
|
|
||||||
if (inPolygon1 && inPolygon2) {
|
if (inPolygon1 && inPolygon2) {
|
||||||
line.attributes = { ...line.attributes, roofId: roofBase.id }
|
line.attributes = { ...line.attributes, roofId: roofBase.id }
|
||||||
@ -667,6 +783,8 @@ export function useAuxiliaryDrawing(id) {
|
|||||||
})
|
})
|
||||||
|
|
||||||
roofBase.innerLines = [...roofInnerLines]
|
roofBase.innerLines = [...roofInnerLines]
|
||||||
|
|
||||||
|
canvas.renderAll()
|
||||||
})
|
})
|
||||||
|
|
||||||
closePopup(id)
|
closePopup(id)
|
||||||
|
|||||||
144
src/hooks/roofcover/useMovementSetting.js
Normal file
144
src/hooks/roofcover/useMovementSetting.js
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
import { useRecoilValue } from 'recoil'
|
||||||
|
import { canvasState } from '@/store/canvasAtom'
|
||||||
|
import { usePopup } from '@/hooks/usePopup'
|
||||||
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
|
import { useEffect, useRef, useState } from 'react'
|
||||||
|
import { useEvent } from '@/hooks/useEvent'
|
||||||
|
|
||||||
|
//동선이동 형 올림 내림
|
||||||
|
export function useMovementSetting(id) {
|
||||||
|
const TYPE = {
|
||||||
|
FLOW_LINE: 'flowLine', // 동선이동
|
||||||
|
UP_DOWN: 'updown', //형 올림내림
|
||||||
|
}
|
||||||
|
const canvas = useRecoilValue(canvasState)
|
||||||
|
const { initEvent, addCanvasMouseEventListener } = useEvent()
|
||||||
|
const { closePopup } = usePopup()
|
||||||
|
const { getMessage } = useMessage()
|
||||||
|
const buttonType = [
|
||||||
|
{ id: 1, name: getMessage('modal.movement.flow.line.move'), type: TYPE.FLOW_LINE },
|
||||||
|
{ id: 2, name: getMessage('modal.movement.flow.line.updown'), type: TYPE.UP_DOWN },
|
||||||
|
]
|
||||||
|
const [type, setType] = useState(TYPE.FLOW_LINE)
|
||||||
|
const typeRef = useRef(type)
|
||||||
|
|
||||||
|
const FLOW_LINE_REF = {
|
||||||
|
DOWN_LEFT_INPUT_REF: useRef(null),
|
||||||
|
UP_RIGHT_INPUT_REF: useRef(null),
|
||||||
|
DOWN_LEFT_RADIO_REF: useRef(null),
|
||||||
|
UP_RIGHT_RADIO_REF: useRef(null),
|
||||||
|
}
|
||||||
|
|
||||||
|
const UP_DOWN_REF = {
|
||||||
|
UP_INPUT_REF: useRef(null),
|
||||||
|
DOWN_INPUT_REF: useRef(null),
|
||||||
|
UP_RADIO_REF: useRef(null),
|
||||||
|
DOWN_RADIO_REF: useRef(null),
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
typeRef.current = type
|
||||||
|
}, [type])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine') // 기존 wallLine의 visible false
|
||||||
|
wallLines.forEach((line) => {
|
||||||
|
line.set({ visible: false })
|
||||||
|
})
|
||||||
|
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
|
||||||
|
outerLines.forEach((line) => {
|
||||||
|
line.bringToFront()
|
||||||
|
line.set({ selectable: true })
|
||||||
|
})
|
||||||
|
|
||||||
|
canvas.renderAll()
|
||||||
|
addCanvasMouseEventListener('mouse:move', mouseMoveEvent)
|
||||||
|
return () => {
|
||||||
|
initEvent()
|
||||||
|
const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
|
||||||
|
wallLines.forEach((line) => {
|
||||||
|
line.set({ visible: true })
|
||||||
|
})
|
||||||
|
canvas.renderAll()
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const mouseMoveEvent = (e) => {
|
||||||
|
if (typeRef.current === TYPE.FLOW_LINE) {
|
||||||
|
flowLineEvent(e)
|
||||||
|
} else {
|
||||||
|
updownEvent(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const flowLineEvent = (e) => {}
|
||||||
|
|
||||||
|
const updownEvent = (e) => {
|
||||||
|
const target = canvas.getActiveObject()
|
||||||
|
if (!target) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const direction = target.direction
|
||||||
|
const { top: targetTop, left: targetLeft } = target
|
||||||
|
const currentX = canvas.getPointer(e.e).x
|
||||||
|
const currentY = Math.floor(canvas.getPointer(e.e).y)
|
||||||
|
|
||||||
|
if (direction === 'left' || direction === 'right') {
|
||||||
|
if (targetTop > currentY) {
|
||||||
|
UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
|
||||||
|
UP_DOWN_REF.UP_INPUT_REF.current.value = ''
|
||||||
|
|
||||||
|
UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
|
||||||
|
} else {
|
||||||
|
UP_DOWN_REF.UP_RADIO_REF.current.checked = true
|
||||||
|
UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
|
||||||
|
|
||||||
|
UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (targetLeft > currentX) {
|
||||||
|
UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
|
||||||
|
UP_DOWN_REF.UP_INPUT_REF.current.value = ''
|
||||||
|
|
||||||
|
UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
|
||||||
|
} else {
|
||||||
|
UP_DOWN_REF.UP_RADIO_REF.current.checked = true
|
||||||
|
UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
|
||||||
|
|
||||||
|
UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas?.renderAll()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSave = () => {
|
||||||
|
if (type === TYPE.FLOW_LINE) {
|
||||||
|
// 동선이동
|
||||||
|
if (FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked) {
|
||||||
|
// 높이 변경: 아래, 왼쪽 체크
|
||||||
|
} else {
|
||||||
|
// 높이 변경: 위, 오른쪽 체크
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 형 올림내림
|
||||||
|
if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {
|
||||||
|
// 자릿수를 올리다 체크
|
||||||
|
const length = Number(UP_DOWN_REF.UP_INPUT_REF.current.value)
|
||||||
|
} else {
|
||||||
|
// 자릿수를 내리다 체크
|
||||||
|
const length = Number(UP_DOWN_REF.DOWN_INPUT_REF.current.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
TYPE,
|
||||||
|
closePopup,
|
||||||
|
buttonType,
|
||||||
|
type,
|
||||||
|
setType,
|
||||||
|
FLOW_LINE_REF,
|
||||||
|
UP_DOWN_REF,
|
||||||
|
handleSave,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -115,6 +115,12 @@ export function useOuterLineWall(id, propertiesId) {
|
|||||||
setAngle2(0)
|
setAngle2(0)
|
||||||
|
|
||||||
setOuterLineDiagonalLength(0)
|
setOuterLineDiagonalLength(0)
|
||||||
|
|
||||||
|
const activeElem = document.activeElement
|
||||||
|
|
||||||
|
if (activeElem) {
|
||||||
|
activeElem.blur()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const mouseDown = (e) => {
|
const mouseDown = (e) => {
|
||||||
|
|||||||
@ -29,6 +29,7 @@ export function useRoofShapeSetting(id) {
|
|||||||
const [jerkinHeadWidth, setJerkinHeadWidth] = useState(800) // 반절처 폭
|
const [jerkinHeadWidth, setJerkinHeadWidth] = useState(800) // 반절처 폭
|
||||||
const [jerkinHeadPitch, setJerkinHeadPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20) // 반절처 경사
|
const [jerkinHeadPitch, setJerkinHeadPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20) // 반절처 경사
|
||||||
const [hipAndGableWidth, setHipAndGableWidth] = useState(800) // 팔작지붕 폭
|
const [hipAndGableWidth, setHipAndGableWidth] = useState(800) // 팔작지붕 폭
|
||||||
|
const [shedPitch, setShedPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8) // 팔작지붕 폭
|
||||||
const [shedWidth, setShedWidth] = useState(300) // 한쪽흐름 폭
|
const [shedWidth, setShedWidth] = useState(300) // 한쪽흐름 폭
|
||||||
const [hasSleeve, setHasSleeve] = useState('0')
|
const [hasSleeve, setHasSleeve] = useState('0')
|
||||||
const currentObject = useRecoilValue(currentObjectState)
|
const currentObject = useRecoilValue(currentObjectState)
|
||||||
@ -41,6 +42,7 @@ export function useRoofShapeSetting(id) {
|
|||||||
const isFixRef = useRef(false)
|
const isFixRef = useRef(false)
|
||||||
|
|
||||||
const pitchRef = useRef(null)
|
const pitchRef = useRef(null)
|
||||||
|
const shedPitchRef = useRef(null)
|
||||||
const jerkinHeadPitchRef = useRef(null)
|
const jerkinHeadPitchRef = useRef(null)
|
||||||
|
|
||||||
const history = useRef([])
|
const history = useRef([])
|
||||||
@ -49,6 +51,9 @@ export function useRoofShapeSetting(id) {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
pitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? pitch : getChonByDegree(pitch)
|
pitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? pitch : getChonByDegree(pitch)
|
||||||
}, [pitch])
|
}, [pitch])
|
||||||
|
useEffect(() => {
|
||||||
|
shedPitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? shedPitch : getChonByDegree(shedPitch)
|
||||||
|
}, [shedPitch])
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
jerkinHeadPitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? jerkinHeadPitch : getChonByDegree(jerkinHeadPitch)
|
jerkinHeadPitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? jerkinHeadPitch : getChonByDegree(jerkinHeadPitch)
|
||||||
}, [jerkinHeadPitch])
|
}, [jerkinHeadPitch])
|
||||||
@ -579,8 +584,12 @@ export function useRoofShapeSetting(id) {
|
|||||||
// 한쪽흐름
|
// 한쪽흐름
|
||||||
attributes = {
|
attributes = {
|
||||||
type: LINE_TYPE.WALLLINE.SHED,
|
type: LINE_TYPE.WALLLINE.SHED,
|
||||||
|
pitch: shedPitchRef.current,
|
||||||
width: shedWidth / 10,
|
width: shedWidth / 10,
|
||||||
}
|
}
|
||||||
|
addPitchText(currentObject)
|
||||||
|
selectedLine.set({ strokeWidth: 4 })
|
||||||
|
selectedLine.set({ stroke: '#000000' })
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -648,5 +657,7 @@ export function useRoofShapeSetting(id) {
|
|||||||
handleConfirm,
|
handleConfirm,
|
||||||
handleRollBack,
|
handleRollBack,
|
||||||
pitchText,
|
pitchText,
|
||||||
|
shedPitch,
|
||||||
|
setShedPitch,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -31,9 +31,8 @@ export function useAdsorptionPoint() {
|
|||||||
name: 'adsorptionPoint',
|
name: 'adsorptionPoint',
|
||||||
visible: isGridDisplay,
|
visible: isGridDisplay,
|
||||||
})
|
})
|
||||||
|
|
||||||
canvas.add(adsorptionPoint)
|
canvas.add(adsorptionPoint)
|
||||||
|
setAdsorptionPointMode(true)
|
||||||
canvas.renderAll()
|
canvas.renderAll()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -13,6 +13,7 @@ import { writeImage } from '@/lib/canvas'
|
|||||||
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
|
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
|
||||||
import { useAxios } from '@/hooks/useAxios'
|
import { useAxios } from '@/hooks/useAxios'
|
||||||
import { useFont } from '@/hooks/common/useFont'
|
import { useFont } from '@/hooks/common/useFont'
|
||||||
|
import { OBJECT_PROTOTYPE, RELOAD_TYPE_PROTOTYPE, SAVE_KEY } from '@/common/common'
|
||||||
|
|
||||||
export function useCanvas(id) {
|
export function useCanvas(id) {
|
||||||
const [canvas, setCanvas] = useRecoilState(canvasState)
|
const [canvas, setCanvas] = useRecoilState(canvasState)
|
||||||
@ -103,6 +104,20 @@ export function useCanvas(id) {
|
|||||||
fabric.Object.prototype.cornerStyle = 'rect'
|
fabric.Object.prototype.cornerStyle = 'rect'
|
||||||
fabric.Object.prototype.cornerStrokeColor = '#2BEBC8'
|
fabric.Object.prototype.cornerStrokeColor = '#2BEBC8'
|
||||||
fabric.Object.prototype.cornerSize = 6
|
fabric.Object.prototype.cornerSize = 6
|
||||||
|
|
||||||
|
// 해당 오브젝트 타입의 경우 저장한 값 그대로 불러와야함
|
||||||
|
OBJECT_PROTOTYPE.forEach((type) => {
|
||||||
|
type.toObject = function (propertiesToInclude) {
|
||||||
|
let source = {}
|
||||||
|
for (let key in this) {
|
||||||
|
if (typeof this[key] !== 'function' && SAVE_KEY.includes(key)) {
|
||||||
|
source.key = this[key]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), source)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
fabric.QLine = QLine
|
fabric.QLine = QLine
|
||||||
fabric.QPolygon = QPolygon
|
fabric.QPolygon = QPolygon
|
||||||
QPolygon.prototype.canvas = canvas
|
QPolygon.prototype.canvas = canvas
|
||||||
|
|||||||
@ -1,16 +1,9 @@
|
|||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||||
import { v4 as uuidv4 } from 'uuid'
|
import { v4 as uuidv4 } from 'uuid'
|
||||||
import {
|
import { canvasSizeState, canvasState, canvasZoomState, currentObjectState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
|
||||||
canvasSizeState,
|
|
||||||
canvasState,
|
|
||||||
canvasZoomState,
|
|
||||||
currentObjectState,
|
|
||||||
fontFamilyState,
|
|
||||||
fontSizeState,
|
|
||||||
modifiedPlanFlagState,
|
|
||||||
} from '@/store/canvasAtom'
|
|
||||||
import { QPolygon } from '@/components/fabric/QPolygon'
|
import { QPolygon } from '@/components/fabric/QPolygon'
|
||||||
|
import { usePlan } from '@/hooks/usePlan'
|
||||||
import { fontSelector } from '@/store/fontAtom'
|
import { fontSelector } from '@/store/fontAtom'
|
||||||
|
|
||||||
// 캔버스에 필요한 이벤트
|
// 캔버스에 필요한 이벤트
|
||||||
@ -22,8 +15,8 @@ export function useCanvasEvent() {
|
|||||||
const fontSize = useRecoilValue(fontSizeState)
|
const fontSize = useRecoilValue(fontSizeState)
|
||||||
const fontFamily = useRecoilValue(fontFamilyState)
|
const fontFamily = useRecoilValue(fontFamilyState)
|
||||||
const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
|
const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
|
||||||
const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState)
|
|
||||||
const lengthTextOption = useRecoilValue(fontSelector('lengthText'))
|
const lengthTextOption = useRecoilValue(fontSelector('lengthText'))
|
||||||
|
const { modifiedPlanFlag, setModifiedPlanFlag } = usePlan()
|
||||||
|
|
||||||
// 기본적인 이벤트 필요시 추가
|
// 기본적인 이벤트 필요시 추가
|
||||||
const attachDefaultEventOnCanvas = () => {
|
const attachDefaultEventOnCanvas = () => {
|
||||||
@ -45,10 +38,8 @@ export function useCanvasEvent() {
|
|||||||
onChange: (e) => {
|
onChange: (e) => {
|
||||||
const target = e.target
|
const target = e.target
|
||||||
|
|
||||||
if (target.name !== 'mouseLine') {
|
if (target.name !== 'mouseLine' && !modifiedPlanFlag) {
|
||||||
if (!modifiedPlanFlag) {
|
setModifiedPlanFlag((prev) => !prev)
|
||||||
setModifiedPlanFlag((prev) => !prev)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (target) {
|
if (target) {
|
||||||
@ -65,10 +56,8 @@ export function useCanvasEvent() {
|
|||||||
target.uuid = uuidv4()
|
target.uuid = uuidv4()
|
||||||
}
|
}
|
||||||
|
|
||||||
if (target.name !== 'mouseLine') {
|
if (target.name !== 'mouseLine' && !modifiedPlanFlag) {
|
||||||
if (!modifiedPlanFlag) {
|
setModifiedPlanFlag((prev) => !prev)
|
||||||
setModifiedPlanFlag((prev) => !prev)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (target.type === 'QPolygon' || target.type === 'QLine') {
|
if (target.type === 'QPolygon' || target.type === 'QLine') {
|
||||||
@ -119,7 +108,8 @@ export function useCanvasEvent() {
|
|||||||
target.fill = lengthTextOption.fontColor.value
|
target.fill = lengthTextOption.fontColor.value
|
||||||
target.fontFamily = lengthTextOption.fontFamily.value
|
target.fontFamily = lengthTextOption.fontFamily.value
|
||||||
target.fontSize = lengthTextOption.fontSize.value
|
target.fontSize = lengthTextOption.fontSize.value
|
||||||
target.fontWeight = lengthTextOption.fontWeight.value
|
target.fontStyle = lengthTextOption.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal'
|
||||||
|
target.fontWeight = lengthTextOption.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal'
|
||||||
|
|
||||||
// Add a property to store the previous value
|
// Add a property to store the previous value
|
||||||
const previousValue = target.text
|
const previousValue = target.text
|
||||||
@ -172,7 +162,9 @@ export function useCanvasEvent() {
|
|||||||
|
|
||||||
target.on('moving', (e) => {
|
target.on('moving', (e) => {
|
||||||
target.uuid = uuidv4()
|
target.uuid = uuidv4()
|
||||||
setModifiedPlanFlag((prev) => !prev)
|
if (!modifiedPlanFlag) {
|
||||||
|
setModifiedPlanFlag((prev) => !prev)
|
||||||
|
}
|
||||||
|
|
||||||
if (target.parentDirection === 'left' || target.parentDirection === 'right') {
|
if (target.parentDirection === 'left' || target.parentDirection === 'right') {
|
||||||
const minX = target.minX
|
const minX = target.minX
|
||||||
|
|||||||
@ -10,33 +10,45 @@ import GridMove from '@/components/floor-plan/modal/grid/GridMove'
|
|||||||
import GridCopy from '@/components/floor-plan/modal/grid/GridCopy'
|
import GridCopy from '@/components/floor-plan/modal/grid/GridCopy'
|
||||||
import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
|
import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
|
||||||
import { gridColorState } from '@/store/gridAtom'
|
import { gridColorState } from '@/store/gridAtom'
|
||||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
import { contextPopupPositionState, contextPopupState } from '@/store/popupAtom'
|
||||||
import AuxiliaryCopy from '@/components/floor-plan/modal/auxiliary/AuxiliaryCopy'
|
import AuxiliaryCopy from '@/components/floor-plan/modal/auxiliary/AuxiliaryCopy'
|
||||||
import SizeSetting from '@/components/floor-plan/modal/object/SizeSetting'
|
import SizeSetting from '@/components/floor-plan/modal/object/SizeSetting'
|
||||||
import RoofMaterialSetting from '@/components/floor-plan/modal/object/RoofMaterialSetting'
|
import RoofMaterialSetting from '@/components/floor-plan/modal/object/RoofMaterialSetting'
|
||||||
import DormerOffset from '@/components/floor-plan/modal/object/DormerOffset'
|
import DormerOffset from '@/components/floor-plan/modal/object/DormerOffset'
|
||||||
import FontSetting from '@/components/common/font/FontSetting'
|
import FontSetting from '@/components/common/font/FontSetting'
|
||||||
import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
|
|
||||||
import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
|
import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
|
||||||
import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/LinePropertySetting'
|
import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/LinePropertySetting'
|
||||||
import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting'
|
import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting'
|
||||||
|
|
||||||
|
import { useCommonUtils } from './common/useCommonUtils'
|
||||||
import { useMessage } from '@/hooks/useMessage'
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
|
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
|
||||||
import { contextMenuState } from '@/store/contextMenu'
|
import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
|
||||||
import ImageSizeSetting from '@/components/floor-plan/modal/image/ImageSizeSetting'
|
import ImageSizeSetting from '@/components/floor-plan/modal/image/ImageSizeSetting'
|
||||||
|
import PanelEdit from '@/components/floor-plan/modal/module/PanelEdit'
|
||||||
|
import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
|
||||||
|
import ColumnRemove from '@/components/floor-plan/modal/module/column/ColumnRemove'
|
||||||
|
import ColumnInsert from '@/components/floor-plan/modal/module/column/ColumnInsert'
|
||||||
|
import RowRemove from '@/components/floor-plan/modal/module/row/RowRemove'
|
||||||
|
import RowInsert from '@/components/floor-plan/modal/module/row/RowInsert'
|
||||||
|
import CircuitNumberEdit from '@/components/floor-plan/modal/module/CircuitNumberEdit'
|
||||||
|
|
||||||
export function useContextMenu() {
|
export function useContextMenu() {
|
||||||
const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
|
const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
|
||||||
const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴
|
const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴
|
||||||
const [contextMenu, setContextMenu] = useState([[]]) // 메뉴.object 별 context menu
|
const [contextMenu, setContextMenu] = useRecoilState(contextMenuListState) // 메뉴.object 별 context menu
|
||||||
const [currentContextMenu, setCurrentContextMenu] = useState(null) // 선택한 contextMenu
|
const [currentContextMenu, setCurrentContextMenu] = useRecoilState(contextPopupState) // 선택한 contextMenu
|
||||||
const currentObject = useRecoilValue(currentObjectState)
|
const currentObject = useRecoilValue(currentObjectState)
|
||||||
const { getMessage } = useMessage()
|
const { getMessage } = useMessage()
|
||||||
const { addPopup } = usePopup()
|
const { addPopup } = usePopup()
|
||||||
const [popupId, setPopupId] = useState(uuidv4())
|
const [popupId, setPopupId] = useState(uuidv4())
|
||||||
const [gridColor, setGridColor] = useRecoilState(gridColorState)
|
const [gridColor, setGridColor] = useRecoilState(gridColorState)
|
||||||
|
const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine, deleteOuterLineObject } = useCommonUtils()
|
||||||
const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
|
const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
|
||||||
|
const [cell, setCell] = useState(null)
|
||||||
|
const [column, setColumn] = useState(null)
|
||||||
const { handleZoomClear } = useCanvasEvent()
|
const { handleZoomClear } = useCanvasEvent()
|
||||||
|
|
||||||
const currentMenuSetting = () => {
|
const currentMenuSetting = () => {
|
||||||
switch (currentMenu) {
|
switch (currentMenu) {
|
||||||
case MENU.PLAN_DRAWING:
|
case MENU.PLAN_DRAWING:
|
||||||
@ -104,6 +116,7 @@ export function useContextMenu() {
|
|||||||
{
|
{
|
||||||
id: 'wallLineRemove',
|
id: 'wallLineRemove',
|
||||||
name: getMessage('contextmenu.wallline.remove'),
|
name: getMessage('contextmenu.wallline.remove'),
|
||||||
|
fn: () => deleteOuterLineObject(),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'imageSizeEdit',
|
id: 'imageSizeEdit',
|
||||||
@ -209,9 +222,10 @@ export function useContextMenu() {
|
|||||||
if (menu?.fn) {
|
if (menu?.fn) {
|
||||||
menu.fn()
|
menu.fn()
|
||||||
}
|
}
|
||||||
|
|
||||||
setContextPopupPosition({
|
setContextPopupPosition({
|
||||||
x: e?.clientX,
|
x: window.innerWidth / 2,
|
||||||
y: e?.clientY,
|
y: 180,
|
||||||
})
|
})
|
||||||
setCurrentContextMenu(menu)
|
setCurrentContextMenu(menu)
|
||||||
setQContextMenu({ ...qContextMenu, visible: false })
|
setQContextMenu({ ...qContextMenu, visible: false })
|
||||||
@ -241,6 +255,7 @@ export function useContextMenu() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (currentObject?.name) {
|
if (currentObject?.name) {
|
||||||
|
console.log(currentObject?.name)
|
||||||
switch (currentObject.name) {
|
switch (currentObject.name) {
|
||||||
case 'triangleDormer':
|
case 'triangleDormer':
|
||||||
case 'pentagonDormer':
|
case 'pentagonDormer':
|
||||||
@ -379,14 +394,17 @@ export function useContextMenu() {
|
|||||||
{
|
{
|
||||||
id: 'commonTextRemove',
|
id: 'commonTextRemove',
|
||||||
name: getMessage('contextmenu.remove'),
|
name: getMessage('contextmenu.remove'),
|
||||||
|
fn: () => deleteObject(),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'commonTextMove',
|
id: 'commonTextMove',
|
||||||
name: getMessage('contextmenu.move'),
|
name: getMessage('contextmenu.move'),
|
||||||
|
fn: () => moveObject(),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'commonTextCopy',
|
id: 'commonTextCopy',
|
||||||
name: getMessage('contextmenu.copy'),
|
name: getMessage('contextmenu.copy'),
|
||||||
|
fn: () => copyObject(),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'commonTextFontSetting',
|
id: 'commonTextFontSetting',
|
||||||
@ -396,6 +414,7 @@ export function useContextMenu() {
|
|||||||
{
|
{
|
||||||
id: 'commonTextEdit',
|
id: 'commonTextEdit',
|
||||||
name: getMessage('contextmenu.edit'),
|
name: getMessage('contextmenu.edit'),
|
||||||
|
fn: () => editText(),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
])
|
])
|
||||||
@ -432,14 +451,17 @@ export function useContextMenu() {
|
|||||||
{
|
{
|
||||||
id: 'dimensionLineRemove',
|
id: 'dimensionLineRemove',
|
||||||
name: getMessage('contextmenu.remove'),
|
name: getMessage('contextmenu.remove'),
|
||||||
|
fn: () => deleteObject(),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'dimensionLineMove',
|
id: 'dimensionLineMove',
|
||||||
name: getMessage('contextmenu.move'),
|
name: getMessage('contextmenu.move'),
|
||||||
|
fn: () => moveObject(),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'dimensionAuxiliaryLineEdit',
|
id: 'dimensionAuxiliaryLineEdit',
|
||||||
name: getMessage('contextmenu.dimension.auxiliary.line.edit'),
|
name: getMessage('contextmenu.dimension.auxiliary.line.edit'),
|
||||||
|
fn: () => changeDimensionExtendLine(),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'dimensionLineDisplayEdit',
|
id: 'dimensionLineDisplayEdit',
|
||||||
@ -475,6 +497,110 @@ export function useContextMenu() {
|
|||||||
],
|
],
|
||||||
])
|
])
|
||||||
break
|
break
|
||||||
|
case 'panel':
|
||||||
|
setContextMenu([
|
||||||
|
[
|
||||||
|
{
|
||||||
|
id: 'remove',
|
||||||
|
name: getMessage('contextmenu.remove'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'move',
|
||||||
|
name: getMessage('contextmenu.move'),
|
||||||
|
component: <PanelEdit id={popupId} type={'move'} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'copy',
|
||||||
|
name: getMessage('contextmenu.copy'),
|
||||||
|
component: <PanelEdit id={popupId} type={'copy'} />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
id: 'columnMove',
|
||||||
|
name: getMessage('contextmenu.column.move'),
|
||||||
|
component: <PanelEdit id={popupId} type={'move'} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'columnCopy',
|
||||||
|
name: getMessage('contextmenu.column.copy'),
|
||||||
|
component: <PanelEdit id={popupId} type={'copy'} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'columnRemove',
|
||||||
|
name: getMessage('contextmenu.column.remove'),
|
||||||
|
component: <ColumnRemove id={popupId} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'columnInsert',
|
||||||
|
name: getMessage('contextmenu.column.insert'),
|
||||||
|
component: <ColumnInsert id={popupId} />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
id: 'rowMove',
|
||||||
|
name: getMessage('contextmenu.row.move'),
|
||||||
|
component: <PanelEdit id={popupId} type={'move'} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'rowCopy',
|
||||||
|
name: getMessage('contextmenu.row.copy'),
|
||||||
|
component: <PanelEdit id={popupId} type={'copy'} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'rowRemove',
|
||||||
|
name: getMessage('contextmenu.row.remove'),
|
||||||
|
component: <RowRemove id={popupId} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'rowInsert',
|
||||||
|
name: getMessage('contextmenu.row.insert'),
|
||||||
|
component: <RowInsert id={popupId} />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
])
|
||||||
|
break
|
||||||
|
case 'module':
|
||||||
|
case 'dimensionLineText':
|
||||||
|
setContextMenu([
|
||||||
|
[
|
||||||
|
{
|
||||||
|
id: 'moduleVerticalCenterAlign',
|
||||||
|
name: getMessage('contextmenu.module.vertical.align'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'moduleHorizonCenterAlign',
|
||||||
|
name: getMessage('contextmenu.module.horizon.align'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'moduleLeftAlign',
|
||||||
|
name: getMessage('contextmenu.module.left.align'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'moduleRightAlign',
|
||||||
|
name: getMessage('contextmenu.module.right.align'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'moduleUpAlign',
|
||||||
|
name: getMessage('contextmenu.module.up.align'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'moduleDownAlign',
|
||||||
|
name: getMessage('contextmenu.module.down.align'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'moduleRemove',
|
||||||
|
name: getMessage('contextmenu.module.remove'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'moduleCircuitNumberEdit',
|
||||||
|
name: getMessage('contextmenu.module.circuit.number.edit'),
|
||||||
|
component: <CircuitNumberEdit id={popupId} />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
])
|
||||||
|
break
|
||||||
default:
|
default:
|
||||||
currentMenuSetting()
|
currentMenuSetting()
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,10 +5,12 @@ import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState,
|
|||||||
import { useAxios } from '@/hooks/useAxios'
|
import { useAxios } from '@/hooks/useAxios'
|
||||||
import { useMessage } from '@/hooks/useMessage'
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
import { useSwal } from '@/hooks/useSwal'
|
import { useSwal } from '@/hooks/useSwal'
|
||||||
|
import { SAVE_KEY } from '@/common/common'
|
||||||
|
|
||||||
export function usePlan() {
|
export function usePlan() {
|
||||||
const [planNum, setPlanNum] = useState(0)
|
const [planNum, setPlanNum] = useState(0)
|
||||||
const [selectedPlan, setSelectedPlan] = useState(null)
|
const [selectedPlan, setSelectedPlan] = useState(null)
|
||||||
|
const [currentCanvasStatus, setCurrentCanvasStatus] = useState(null)
|
||||||
|
|
||||||
const [canvas, setCanvas] = useRecoilState(canvasState)
|
const [canvas, setCanvas] = useRecoilState(canvasState)
|
||||||
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
|
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
|
||||||
@ -33,41 +35,7 @@ export function usePlan() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const addCanvas = () => {
|
const addCanvas = () => {
|
||||||
const objs = canvas?.toJSON([
|
const objs = canvas?.toJSON(SAVE_KEY)
|
||||||
'selectable',
|
|
||||||
'name',
|
|
||||||
'parentId',
|
|
||||||
'id',
|
|
||||||
'length',
|
|
||||||
'idx',
|
|
||||||
'direction',
|
|
||||||
'parentDirection',
|
|
||||||
'lines',
|
|
||||||
'points',
|
|
||||||
'lockMovementX',
|
|
||||||
'lockMovementY',
|
|
||||||
'lockRotation',
|
|
||||||
'lockScalingX',
|
|
||||||
'lockScalingY',
|
|
||||||
'opacity',
|
|
||||||
'cells',
|
|
||||||
'maxX',
|
|
||||||
'maxY',
|
|
||||||
'minX',
|
|
||||||
'minY',
|
|
||||||
'x',
|
|
||||||
'y',
|
|
||||||
'x1',
|
|
||||||
'x2',
|
|
||||||
'y1',
|
|
||||||
'y2',
|
|
||||||
'attributes',
|
|
||||||
'stickeyPoint',
|
|
||||||
'text',
|
|
||||||
'pitch',
|
|
||||||
'uuid',
|
|
||||||
'originText',
|
|
||||||
])
|
|
||||||
|
|
||||||
const str = JSON.stringify(objs)
|
const str = JSON.stringify(objs)
|
||||||
|
|
||||||
@ -89,6 +57,31 @@ export function usePlan() {
|
|||||||
*/
|
*/
|
||||||
const currentCanvasData = () => {
|
const currentCanvasData = () => {
|
||||||
removeMouseLines()
|
removeMouseLines()
|
||||||
|
|
||||||
|
const groups = canvas.getObjects().filter((obj) => obj.type === 'group')
|
||||||
|
|
||||||
|
if (groups.length > 0) {
|
||||||
|
groups.forEach((group) => {
|
||||||
|
canvas?.remove(group)
|
||||||
|
canvas?.renderAll()
|
||||||
|
const restore = group._restoreObjectsState()
|
||||||
|
|
||||||
|
restore._objects.forEach((obj) => {
|
||||||
|
obj.set({
|
||||||
|
...obj,
|
||||||
|
groupYn: true,
|
||||||
|
groupName: group.name,
|
||||||
|
lineDirection: group.lineDirection,
|
||||||
|
})
|
||||||
|
|
||||||
|
canvas?.add(obj)
|
||||||
|
obj.setCoords()
|
||||||
|
canvas?.requestRenderAll()
|
||||||
|
canvas?.renderAll()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
return addCanvas()
|
return addCanvas()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -96,11 +89,17 @@ export function usePlan() {
|
|||||||
* 캔버스에서 발생하는 실시간 오브젝트 이벤트를 감지하여 수정 여부를 확인 후 관리
|
* 캔버스에서 발생하는 실시간 오브젝트 이벤트를 감지하여 수정 여부를 확인 후 관리
|
||||||
*/
|
*/
|
||||||
const checkCanvasObjectEvent = (planId) => {
|
const checkCanvasObjectEvent = (planId) => {
|
||||||
|
setCurrentCanvasStatus(currentCanvasData())
|
||||||
if (!modifiedPlans.some((modifiedPlan) => modifiedPlan === planId) && checkModifiedCanvasPlan(planId)) {
|
if (!modifiedPlans.some((modifiedPlan) => modifiedPlan === planId) && checkModifiedCanvasPlan(planId)) {
|
||||||
setModifiedPlans((prev) => [...prev, planId])
|
setModifiedPlans((prev) => [...prev, planId])
|
||||||
setModifiedPlanFlag(false)
|
setModifiedPlanFlag(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
if (currentCanvasStatus) {
|
||||||
|
setCurrentCanvasPlan((prev) => ({ ...prev, canvasStatus: currentCanvasStatus }))
|
||||||
|
}
|
||||||
|
}, [currentCanvasStatus])
|
||||||
/**
|
/**
|
||||||
* 현재 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
|
* 현재 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
|
||||||
*/
|
*/
|
||||||
@ -129,17 +128,21 @@ export function usePlan() {
|
|||||||
setModifiedPlans([])
|
setModifiedPlans([])
|
||||||
setModifiedPlanFlag(false)
|
setModifiedPlanFlag(false)
|
||||||
}
|
}
|
||||||
const checkUnsavedCanvasPlan = (str) => {
|
|
||||||
if (modifiedPlans.length > 0) {
|
/**
|
||||||
swalFire({
|
* 캔버스에 저장되지 않은 변경사항이 있을때 저장 여부를 확인 후 저장
|
||||||
text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
|
*/
|
||||||
type: 'confirm',
|
const checkUnsavedCanvasPlan = async (userId) => {
|
||||||
confirmFn: async () => {
|
swalFire({
|
||||||
await saveCanvas(userId)
|
text: `저장 안된 ${currentCanvasPlan.name} PLAN을 저장하시겠습니까? `,
|
||||||
},
|
type: 'confirm',
|
||||||
})
|
confirmFn: async () => {
|
||||||
setModifiedPlans([])
|
initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)
|
||||||
}
|
? await putCanvasStatus(currentCanvasPlan.canvasStatus)
|
||||||
|
: await postCanvasStatus(userId, currentCanvasPlan.canvasStatus)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
resetModifiedPlans()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -369,8 +372,12 @@ export function usePlan() {
|
|||||||
canvas,
|
canvas,
|
||||||
plans,
|
plans,
|
||||||
selectedPlan,
|
selectedPlan,
|
||||||
|
currentCanvasPlan,
|
||||||
modifiedPlans,
|
modifiedPlans,
|
||||||
|
modifiedPlanFlag,
|
||||||
|
setModifiedPlanFlag,
|
||||||
checkCanvasObjectEvent,
|
checkCanvasObjectEvent,
|
||||||
|
checkUnsavedCanvasPlan,
|
||||||
resetModifiedPlans,
|
resetModifiedPlans,
|
||||||
saveCanvas,
|
saveCanvas,
|
||||||
handleCurrentPlan,
|
handleCurrentPlan,
|
||||||
|
|||||||
@ -1,14 +1,15 @@
|
|||||||
import { useRecoilState } from 'recoil'
|
import { useRecoilState } from 'recoil'
|
||||||
import { popupState } from '@/store/popupAtom'
|
import { contextPopupState, popupState } from '@/store/popupAtom'
|
||||||
|
|
||||||
export function usePopup() {
|
export function usePopup() {
|
||||||
const [popup, setPopup] = useRecoilState(popupState)
|
const [popup, setPopup] = useRecoilState(popupState)
|
||||||
|
const [contextMenuPopup, setContextMenuPopup] = useRecoilState(contextPopupState)
|
||||||
const addPopup = (id, depth, component) => {
|
const addPopup = (id, depth, component) => {
|
||||||
setPopup({ children: [...filterDepth(depth), { id: id, depth: depth, component: component }] })
|
setPopup({ children: [...filterDepth(depth), { id: id, depth: depth, component: component }] })
|
||||||
}
|
}
|
||||||
|
|
||||||
const closePopup = (id) => {
|
const closePopup = (id) => {
|
||||||
|
if (contextMenuPopup) setContextMenuPopup(null)
|
||||||
setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] })
|
setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -3,8 +3,8 @@
|
|||||||
"welcome": "환영합니다. {0}님",
|
"welcome": "환영합니다. {0}님",
|
||||||
"header.menus.home": "ホームへv",
|
"header.menus.home": "ホームへv",
|
||||||
"header.menus.management": "物品及び図面管理",
|
"header.menus.management": "物品及び図面管理",
|
||||||
"header.menus.management.stuff": "新規物件登録",
|
"header.menus.management.newStuff": "新規 物件 登録",
|
||||||
"header.menus.management.plan": "モノ/図面管理",
|
"header.menus.management.stuffList": "物件の状況",
|
||||||
"header.menus.community": "コミュニティ",
|
"header.menus.community": "コミュニティ",
|
||||||
"header.menus.community.notice": "お知らせ",
|
"header.menus.community.notice": "お知らせ",
|
||||||
"header.menus.community.faq": "FAQ",
|
"header.menus.community.faq": "FAQ",
|
||||||
@ -13,7 +13,7 @@
|
|||||||
"header.go": "移動",
|
"header.go": "移動",
|
||||||
"header.online.warranty.system": "オンライン保証シ",
|
"header.online.warranty.system": "オンライン保証シ",
|
||||||
"header.stem": "ステム",
|
"header.stem": "ステム",
|
||||||
"plan.menu.plan.drawing": "도면작성",
|
"plan.menu.plan.drawing": "물건정보(JA)",
|
||||||
"plan.menu.placement.surface.initial.setting": "配置面 初期設定",
|
"plan.menu.placement.surface.initial.setting": "配置面 初期設定",
|
||||||
"modal.placement.initial.setting.plan.drawing.size.stuff": "寸法入力による物品作成",
|
"modal.placement.initial.setting.plan.drawing.size.stuff": "寸法入力による物品作成",
|
||||||
"modal.placement.initial.setting.plan.": "図面の作成方法",
|
"modal.placement.initial.setting.plan.": "図面の作成方法",
|
||||||
@ -284,6 +284,7 @@
|
|||||||
"delete": "삭제(JA)",
|
"delete": "삭제(JA)",
|
||||||
"delete.all": "전체 삭제(JA)",
|
"delete.all": "전체 삭제(JA)",
|
||||||
"refresh": "새로고침(JA)",
|
"refresh": "새로고침(JA)",
|
||||||
|
"margin": "間隔",
|
||||||
"contextmenu.roof.material.placement": "지붕재 배치(JA)",
|
"contextmenu.roof.material.placement": "지붕재 배치(JA)",
|
||||||
"contextmenu.roof.material.edit": "지붕재 변경(JA)",
|
"contextmenu.roof.material.edit": "지붕재 변경(JA)",
|
||||||
"contextmenu.roof.material.remove": "지붕재 삭제(JA)",
|
"contextmenu.roof.material.remove": "지붕재 삭제(JA)",
|
||||||
@ -292,26 +293,91 @@
|
|||||||
"contextmenu.select.move": "선택・이동(JA)",
|
"contextmenu.select.move": "선택・이동(JA)",
|
||||||
"contextmenu.wallline.remove": "외벽선 삭제(JA)",
|
"contextmenu.wallline.remove": "외벽선 삭제(JA)",
|
||||||
"contextmenu.size.edit": "サイズ変更",
|
"contextmenu.size.edit": "サイズ変更",
|
||||||
"contextmenu.auxiliary.move": "보조선 이동(JA)",
|
"modal.auxiliary.size.edit": "補助線サイズ変更",
|
||||||
"contextmenu.auxiliary.copy": "보조선 복사(JA)",
|
"modal.auxiliary.size.edit.point": "支店",
|
||||||
|
"contextmenu.auxiliary.move": "補助線の移動",
|
||||||
|
"modal.auxiliary.move": "補助線の移動",
|
||||||
|
"modal.auxiliary.move.info": "移動する方向を入力してください",
|
||||||
|
"contextmenu.auxiliary.copy": "補助線のコピー",
|
||||||
|
"modal.auxiliary.copy": "補助線のコピー",
|
||||||
|
"modal.auxiliary.copy.info": "コピーする方向を入力してください",
|
||||||
"contextmenu.auxiliary.remove": "보조선 삭제(JA)",
|
"contextmenu.auxiliary.remove": "보조선 삭제(JA)",
|
||||||
"contextmenu.auxiliary.vertical.bisector": "보조선 수직이등분선(JA)",
|
"contextmenu.auxiliary.vertical.bisector": "보조선 수직이등분선(JA)",
|
||||||
"contextmenu.auxiliary.cut": "보조선 절삭(JA)",
|
"contextmenu.auxiliary.cut": "보조선 절삭(JA)",
|
||||||
"contextmenu.auxiliary.remove.all": "보조선 전체 삭제(JA)",
|
"contextmenu.auxiliary.remove.all": "보조선 전체 삭제(JA)",
|
||||||
"contextmenu.line.property.edit": "各辺属性の変更",
|
"contextmenu.line.property.edit": "各辺属性の変更",
|
||||||
|
"contextmenu.column.move": "열 이동(JA)",
|
||||||
|
"contextmenu.column.copy": "열 복사(JA)",
|
||||||
|
"contextmenu.column.remove": "コピー設定",
|
||||||
|
"modal.panel.column.remove": "コピー設定",
|
||||||
|
"modal.panel.column.remove.info": "削除列をどのようにしますか？",
|
||||||
|
"modal.panel.column.remove.type.left": "左に減らす",
|
||||||
|
"modal.panel.column.remove.type.right": "右に減らす",
|
||||||
|
"modal.panel.column.remove.type.side": "両側に減る",
|
||||||
|
"modal.panel.column.remove.type.none": "減らさない",
|
||||||
|
"modal.panel.select.column": "選択列",
|
||||||
|
"modal.panel.select.row": "選択段",
|
||||||
|
"modal.panel.insert.column": "挿入列",
|
||||||
|
"modal.panel.insert.row": "挿入段",
|
||||||
|
"modal.panel.column.insert": "列の挿入",
|
||||||
|
"modal.panel.column.insert.info": "挿入する方向を選択してください。",
|
||||||
|
"modal.panel.column.insert.type.left": "左挿入",
|
||||||
|
"modal.panel.column.insert.type.right": "右挿入",
|
||||||
|
"contextmenu.column.insert": "列の挿入",
|
||||||
|
"contextmenu.row.move": "단 이동(JA)",
|
||||||
|
"contextmenu.row.copy": "단 복사(JA)",
|
||||||
|
"contextmenu.row.remove": "ただし削除",
|
||||||
|
"modal.row.remove": "ただし削除",
|
||||||
|
"modal.row.remove.info": "削除列をどのようにしますか？",
|
||||||
|
"modal.row.remove.type.up": "上向きに減らす",
|
||||||
|
"modal.row.remove.type.down": "下向きに減らす",
|
||||||
|
"modal.row.remove.type.side": "両側に減らす",
|
||||||
|
"modal.row.remove.type.none": "減らさない",
|
||||||
|
"contextmenu.row.insert": "段挿入",
|
||||||
|
"modal.row.insert": "段挿入",
|
||||||
|
"modal.row.insert.info": "挿入する方向を選択してください。",
|
||||||
|
"modal.row.insert.type.up": "上部挿入",
|
||||||
|
"modal.row.insert.type.down": "下の挿入",
|
||||||
|
"modal.move.setting": "移動設定",
|
||||||
|
"modal.move.setting.info": "間隔を設定し、移動方向を選択します。",
|
||||||
|
"modal.copy.setting": "コピー設定",
|
||||||
|
"modal.copy.setting.info": "間隔を設定し、コピー方向を選択します。",
|
||||||
"modal.line.property.edit.info": "属性を変更する辺を選択してください。",
|
"modal.line.property.edit.info": "属性を変更する辺を選択してください。",
|
||||||
"modal.line.property.edit.selected": "選択した値",
|
"modal.line.property.edit.selected": "選択した値",
|
||||||
"contextmenu.flow.direction.edit": "흐름 방향 변경(JA)",
|
"contextmenu.flow.direction.edit": "흐름 방향 변경(JA)",
|
||||||
"contextmenu.font.setting": "폰트 설정(JA)",
|
"contextmenu.font.setting": "폰트 설정(JA)",
|
||||||
"contextmenu.grid.color.edit": "그리드 색 변경(JA)",
|
"contextmenu.grid.color.edit": "그리드 색 변경(JA)",
|
||||||
"contextmenu.dimension.auxiliary.line.edit": "치수 보조선 변경(JA)",
|
"contextmenu.dimension.auxiliary.line.edit": "치수 보조선 변경(JA)",
|
||||||
"contextmenu.display.edit": "표시 변경(JA)",
|
"contextmenu.display.edit": "表示の変更",
|
||||||
|
"modal.display.edit.info": "寸法線に表示する数値を入力してください",
|
||||||
|
"modal.display.edit.before.length": "既存の長さ",
|
||||||
|
"modal.display.edit.after.length": "変更の長さ",
|
||||||
|
"modal.display.edit.corner.valley": "コーナー・ゴールの場合",
|
||||||
|
"modal.display.edit.input.slope": "경사를 傾斜を着せてください。",
|
||||||
|
"modal.display.edit.input.slope.info": "傾き設定されている場合、入力した数値に傾き計算をした数値が表示されます。",
|
||||||
|
"modal.distance": "距離測定",
|
||||||
|
"modal.distance.dual.point": "2点間距離",
|
||||||
|
"modal.distance.horizon": "水平距離",
|
||||||
|
"modal.distance.vertical": "垂直距離",
|
||||||
"contextmenu.opening.offset": "개구 오프셋(JA)",
|
"contextmenu.opening.offset": "개구 오프셋(JA)",
|
||||||
"contextmenu.remove": "삭제(JA)",
|
"contextmenu.remove": "삭제(JA)",
|
||||||
"contextmenu.remove.all": "전체 삭제(JA)",
|
"contextmenu.remove.all": "전체 삭제(JA)",
|
||||||
"contextmenu.move": "이동(JA)",
|
"contextmenu.move": "이동(JA)",
|
||||||
"contextmenu.copy": "복사(JA)",
|
"contextmenu.copy": "복사(JA)",
|
||||||
"contextmenu.edit": "편집(JA)",
|
"contextmenu.edit": "편집(JA)",
|
||||||
|
"contextmenu.module.vertical.align": "모듈 세로 가운데 정렬(JA)",
|
||||||
|
"contextmenu.module.horizon.align": "모듈 가로 가운데 정렬(JA)",
|
||||||
|
"contextmenu.module.left.align": "모듈 왼쪽 정렬(JA)",
|
||||||
|
"contextmenu.module.right.align": "모듈 오른쪽 정렬(JA)",
|
||||||
|
"contextmenu.module.up.align": "모듈 위쪽 정렬(JA)",
|
||||||
|
"contextmenu.module.down.align": "모듈 아래쪽 정렬(JA)",
|
||||||
|
"contextmenu.module.remove": "모듈 일괄 삭제(JA)",
|
||||||
|
"contextmenu.module.move": "모듈 일괄 이동(JA)",
|
||||||
|
"contextmenu.module.copy": "모듈 일괄 복사(JA)",
|
||||||
|
"contextmenu.module.circuit.number.edit": "モジュール一括回路番号の変更",
|
||||||
|
"modal.module.circuit.number.edit": "モジュール一括回路番号の変更",
|
||||||
|
"modal.module.circuit.number.edit.info": "回路番号を入力してください。",
|
||||||
|
"modal.module.circuit.number": "回路番号",
|
||||||
"common.message.no.data": "No data",
|
"common.message.no.data": "No data",
|
||||||
"common.message.no.dataDown": "ダウンロードするデータがありません",
|
"common.message.no.dataDown": "ダウンロードするデータがありません",
|
||||||
"common.message.noData": "表示するデータがありません",
|
"common.message.noData": "表示するデータがありません",
|
||||||
@ -399,7 +465,10 @@
|
|||||||
"common.message.writeToConfirm": "作成解除を実行しますか？",
|
"common.message.writeToConfirm": "作成解除を実行しますか？",
|
||||||
"common.message.password.init.success": "パスワード [{0}] に初期化されました。",
|
"common.message.password.init.success": "パスワード [{0}] に初期化されました。",
|
||||||
"common.message.no.edit.save": "この文書は変更できません。",
|
"common.message.no.edit.save": "この文書は変更できません。",
|
||||||
|
"common.input.file": "ファイルを読み込む",
|
||||||
|
"common.input.file.load": "ファイルの追加",
|
||||||
"common.require": "必須",
|
"common.require": "必須",
|
||||||
|
"common.ok": "確認",
|
||||||
"commons.west": "立つ",
|
"commons.west": "立つ",
|
||||||
"commons.east": "ドン",
|
"commons.east": "ドン",
|
||||||
"commons.south": "南",
|
"commons.south": "南",
|
||||||
@ -504,6 +573,7 @@
|
|||||||
"stuff.gridHeader.receiveUser": "担当者",
|
"stuff.gridHeader.receiveUser": "担当者",
|
||||||
"stuff.gridHeader.specificationConfirmDate": "仕様確認日",
|
"stuff.gridHeader.specificationConfirmDate": "仕様確認日",
|
||||||
"stuff.gridHeader.createDatetime": "登録日",
|
"stuff.gridHeader.createDatetime": "登録日",
|
||||||
|
"stuff.gridData.tempObjectNo": "一時保存物",
|
||||||
"stuff.message.periodError": "最大1年間閲覧可能.",
|
"stuff.message.periodError": "最大1年間閲覧可能.",
|
||||||
"stuff.addressPopup.title": "郵便番号",
|
"stuff.addressPopup.title": "郵便番号",
|
||||||
"stuff.addressPopup.placeholder": "郵便番号の7桁を入力してください。",
|
"stuff.addressPopup.placeholder": "郵便番号の7桁を入力してください。",
|
||||||
@ -516,6 +586,7 @@
|
|||||||
"stuff.addressPopup.btn2": "住所適用",
|
"stuff.addressPopup.btn2": "住所適用",
|
||||||
"stuff.planReqPopup.title": "設計依頼のインポート",
|
"stuff.planReqPopup.title": "設計依頼のインポート",
|
||||||
"stuff.temp.subTitle": "商品情報",
|
"stuff.temp.subTitle": "商品情報",
|
||||||
|
"stuff.temp.subTitle2": "作図",
|
||||||
"stuff.detail.header.message1": "存在しないものです。",
|
"stuff.detail.header.message1": "存在しないものです。",
|
||||||
"stuff.detail.header.message2": "商品番号がコピーされました。",
|
"stuff.detail.header.message2": "商品番号がコピーされました。",
|
||||||
"stuff.detail.header.message3": "存在しないものです。",
|
"stuff.detail.header.message3": "存在しないものです。",
|
||||||
@ -596,7 +667,7 @@
|
|||||||
"stuff.planReqPopup.search.schDateGbnR": "受付日",
|
"stuff.planReqPopup.search.schDateGbnR": "受付日",
|
||||||
"stuff.planReqPopup.error.message1": "設計依頼を選択してください。",
|
"stuff.planReqPopup.error.message1": "設計依頼を選択してください。",
|
||||||
"stuff.search.title": "物件状況",
|
"stuff.search.title": "物件状況",
|
||||||
"stuff.search.btn1": "物件登録",
|
"stuff.search.btn1": "新規 物件 登録",
|
||||||
"stuff.search.btn2": "照会",
|
"stuff.search.btn2": "照会",
|
||||||
"stuff.search.btn3": "初期化",
|
"stuff.search.btn3": "初期化",
|
||||||
"stuff.search.schObjectNo": "品番",
|
"stuff.search.schObjectNo": "品番",
|
||||||
@ -674,6 +745,7 @@
|
|||||||
"shed": "片側の流れ",
|
"shed": "片側の流れ",
|
||||||
"apply": "適用",
|
"apply": "適用",
|
||||||
"module": "モジュール",
|
"module": "モジュール",
|
||||||
|
"legend": "凡例",
|
||||||
"has.sleeve": "袖あり",
|
"has.sleeve": "袖あり",
|
||||||
"has.not.sleeve": "袖なし",
|
"has.not.sleeve": "袖なし",
|
||||||
"jerkinhead.width": "半折先幅",
|
"jerkinhead.width": "半折先幅",
|
||||||
@ -720,14 +792,25 @@
|
|||||||
"estimate.detail.receiveUser": "担当者 ",
|
"estimate.detail.receiveUser": "担当者 ",
|
||||||
"estimate.detail.title": "案件名",
|
"estimate.detail.title": "案件名",
|
||||||
"estimate.detail.remarks": "メモ",
|
"estimate.detail.remarks": "メモ",
|
||||||
|
"estimate.detail.orderType": "注文分類",
|
||||||
|
"estimate.detail.roofCns": "屋根材・仕様施工",
|
||||||
|
"estimate.detail.note": "備考",
|
||||||
|
"estimate.detail.nextSubmit": "後日資料提出",
|
||||||
"estimate.detail.header.fileList1": "ファイル添付",
|
"estimate.detail.header.fileList1": "ファイル添付",
|
||||||
"estimate.detail.fileList.btn": "ファイル選択",
|
"estimate.detail.fileList.btn": "ファイル選択",
|
||||||
"estimate.detail.header.fileList2": "添付ファイル一覧",
|
"estimate.detail.header.fileList2": "添付ファイル一覧",
|
||||||
"estimate.detail.header.specialEstimate": "見積もりの具体的な",
|
"estimate.detail.header.specialEstimate": "見積もりの具体的な",
|
||||||
"estimate.detail.header.specialEstimateProductInfo": "製品情報",
|
"estimate.detail.header.specialEstimateProductInfo": "製品情報",
|
||||||
|
"estimate.detail.sepcialEstimateProductInfo.totPcs": "数量 (PCS)",
|
||||||
|
"estimate.detail.sepcialEstimateProductInfo.vol": "容量 (Kw)",
|
||||||
|
"estimate.detail.sepcialEstimateProductInfo.netAmt": "供給価格",
|
||||||
|
"estimate.detail.sepcialEstimateProductInfo.vat": "付加価値税 (10%)",
|
||||||
|
"estimate.detail.sepcialEstimateProductInfo.totPrice": "総額",
|
||||||
"estimate.detail.sepcialEstimateProductInfo.pkgUnitPrice": "住宅PKG単価 (W)",
|
"estimate.detail.sepcialEstimateProductInfo.pkgUnitPrice": "住宅PKG単価 (W)",
|
||||||
"estimate.detail.sepcialEstimateProductInfo.pkgWeight": "PKG容量 (Kw)",
|
"estimate.detail.sepcialEstimateProductInfo.pkgWeight": "PKG容量 (Kw)",
|
||||||
"estimate.detail.sepcialEstimateProductInfo.pkgPrice": "PKG金額",
|
"estimate.detail.sepcialEstimateProductInfo.pkgPrice": "PKG金額",
|
||||||
|
"estimate.detail.sepcialEstimateProductInfo.calcFormula1": "(モジュール容量 × 数量)÷1000",
|
||||||
|
"estimate.detail.sepcialEstimateProductInfo.calcFormula2": "PKG単価 (W)×PKG容量(W)",
|
||||||
"estimate.detail.header.showPrice": "価格表示",
|
"estimate.detail.header.showPrice": "価格表示",
|
||||||
"estimate.detail.showPrice.btn1": "Pricing",
|
"estimate.detail.showPrice.btn1": "Pricing",
|
||||||
"estimate.detail.showPrice.description": "クリックして製品の特異性を確認する",
|
"estimate.detail.showPrice.description": "クリックして製品の特異性を確認する",
|
||||||
|
|||||||
@ -3,8 +3,8 @@
|
|||||||
"welcome": "환영합니다. {0}님",
|
"welcome": "환영합니다. {0}님",
|
||||||
"header.menus.home": "Home",
|
"header.menus.home": "Home",
|
||||||
"header.menus.management": "물건 및 도면 관리",
|
"header.menus.management": "물건 및 도면 관리",
|
||||||
"header.menus.management.stuff": "신규 물건 등록",
|
"header.menus.management.newStuff": "신규 물건 등록",
|
||||||
"header.menus.management.plan": "사물/도면 관리",
|
"header.menus.management.stuffList": "물건 현황",
|
||||||
"header.menus.community": "커뮤니티",
|
"header.menus.community": "커뮤니티",
|
||||||
"header.menus.community.notice": "공지",
|
"header.menus.community.notice": "공지",
|
||||||
"header.menus.community.faq": "FAQ",
|
"header.menus.community.faq": "FAQ",
|
||||||
@ -13,7 +13,7 @@
|
|||||||
"header.go": "이동",
|
"header.go": "이동",
|
||||||
"header.online.warranty.system": "온라인 보증 시스템",
|
"header.online.warranty.system": "온라인 보증 시스템",
|
||||||
"header.stem": "Stem",
|
"header.stem": "Stem",
|
||||||
"plan.menu.plan.drawing": "도면작성",
|
"plan.menu.plan.drawing": "물건정보",
|
||||||
"plan.menu.placement.surface.initial.setting": "배치면 초기 설정",
|
"plan.menu.placement.surface.initial.setting": "배치면 초기 설정",
|
||||||
"modal.placement.initial.setting.plan.drawing": "도면 작성방법",
|
"modal.placement.initial.setting.plan.drawing": "도면 작성방법",
|
||||||
"modal.placement.initial.setting.plan.drawing.size.stuff": "치수 입력에 의한 물건 작성",
|
"modal.placement.initial.setting.plan.drawing.size.stuff": "치수 입력에 의한 물건 작성",
|
||||||
@ -289,21 +289,65 @@
|
|||||||
"delete": "삭제",
|
"delete": "삭제",
|
||||||
"delete.all": "전체 삭제",
|
"delete.all": "전체 삭제",
|
||||||
"refresh": "새로고침",
|
"refresh": "새로고침",
|
||||||
|
"margin": "간격",
|
||||||
"contextmenu.roof.material.placement": "지붕재 배치",
|
"contextmenu.roof.material.placement": "지붕재 배치",
|
||||||
"contextmenu.roof.material.edit": "지붕재 변경",
|
"contextmenu.roof.material.edit": "지붕재 변경",
|
||||||
|
"modal.roof.material.edit": "지붕재 변경",
|
||||||
"contextmenu.roof.material.remove": "지붕재 삭제",
|
"contextmenu.roof.material.remove": "지붕재 삭제",
|
||||||
"contextmenu.roof.material.remove.all": "지붕재 전체 삭제",
|
"contextmenu.roof.material.remove.all": "지붕재 전체 삭제",
|
||||||
"contextmenu.dormer.offset": "도머 오프셋",
|
"contextmenu.dormer.offset": "도머 오프셋",
|
||||||
"contextmenu.select.move": "선택・이동",
|
"contextmenu.select.move": "선택・이동",
|
||||||
"contextmenu.wallline.remove": "외벽선 삭제",
|
"contextmenu.wallline.remove": "외벽선 삭제",
|
||||||
"contextmenu.size.edit": "사이즈 변경",
|
"contextmenu.size.edit": "사이즈 변경",
|
||||||
|
"modal.auxiliary.size.edit": "보조선 사이즈 변경",
|
||||||
|
"modal.auxiliary.size.edit.point": "지점",
|
||||||
"contextmenu.auxiliary.move": "보조선 이동",
|
"contextmenu.auxiliary.move": "보조선 이동",
|
||||||
|
"modal.auxiliary.move": "보조선 이동",
|
||||||
|
"modal.auxiliary.move.info": "이동할 방향을 입력해주세요.",
|
||||||
"contextmenu.auxiliary.copy": "보조선 복사",
|
"contextmenu.auxiliary.copy": "보조선 복사",
|
||||||
|
"modal.auxiliary.copy": "보조선 복사",
|
||||||
|
"modal.auxiliary.copy.info": "복사할 방향을 입력해주세요.",
|
||||||
"contextmenu.auxiliary.remove": "보조선 삭제",
|
"contextmenu.auxiliary.remove": "보조선 삭제",
|
||||||
"contextmenu.auxiliary.vertical.bisector": "보조선 수직이등분선",
|
"contextmenu.auxiliary.vertical.bisector": "보조선 수직이등분선",
|
||||||
"contextmenu.auxiliary.cut": "보조선 절삭",
|
"contextmenu.auxiliary.cut": "보조선 절삭",
|
||||||
"contextmenu.auxiliary.remove.all": "보조선 전체 삭제",
|
"contextmenu.auxiliary.remove.all": "보조선 전체 삭제",
|
||||||
"contextmenu.line.property.edit": "각 변 속성 변경",
|
"contextmenu.line.property.edit": "각 변 속성 변경",
|
||||||
|
"contextmenu.column.move": "열 이동",
|
||||||
|
"contextmenu.column.copy": "열 복사",
|
||||||
|
"contextmenu.column.remove": "열 삭제",
|
||||||
|
"modal.panel.column.remove": "열 삭제",
|
||||||
|
"modal.panel.column.remove.info": "삭제열을 어떻게 하시겠습니까?",
|
||||||
|
"modal.panel.column.remove.type.left": "왼쪽으로 줄이다",
|
||||||
|
"modal.panel.column.remove.type.right": "오른쪽으로 줄이다",
|
||||||
|
"modal.panel.column.remove.type.side": "양쪽으로 줄이다",
|
||||||
|
"modal.panel.column.remove.type.none": "줄이지 않는다",
|
||||||
|
"modal.panel.select.column": "선택 열",
|
||||||
|
"modal.panel.select.row": "선택 단",
|
||||||
|
"modal.panel.insert.column": "삽입 열",
|
||||||
|
"modal.panel.insert.row": "삽입 단",
|
||||||
|
"contextmenu.column.insert": "열 삽입",
|
||||||
|
"modal.panel.column.insert": "열 삽입",
|
||||||
|
"modal.panel.column.insert.info": "삽입할 방향을 선택해주세요.",
|
||||||
|
"modal.panel.column.insert.type.left": "왼쪽 삽입",
|
||||||
|
"modal.panel.column.insert.type.right": "오른쪽 삽입",
|
||||||
|
"contextmenu.row.move": "단 이동",
|
||||||
|
"contextmenu.row.copy": "단 복사",
|
||||||
|
"contextmenu.row.remove": "단 삭제",
|
||||||
|
"modal.row.remove": "단 삭제",
|
||||||
|
"modal.row.remove.info": "삭제 단을 어떻게 하시겠습니까?",
|
||||||
|
"modal.row.remove.type.up": "위족으로 줄이다",
|
||||||
|
"modal.row.remove.type.down": "아래쪽으로 줄이다",
|
||||||
|
"modal.row.remove.type.side": "양쪽으로 줄이다",
|
||||||
|
"modal.row.remove.type.none": "줄이지 않는다",
|
||||||
|
"contextmenu.row.insert": "단 삽입",
|
||||||
|
"modal.row.insert": "단 삽입",
|
||||||
|
"modal.row.insert.info": "삽입할 방향을 선택해주세요.",
|
||||||
|
"modal.row.insert.type.up": "위쪽 삽입",
|
||||||
|
"modal.row.insert.type.down": "아래쪽 삽입",
|
||||||
|
"modal.move.setting": "이동 설정",
|
||||||
|
"modal.move.setting.info": "간격을 설정하고 이동 방향을 선택하십시오.",
|
||||||
|
"modal.copy.setting": "복사 설정",
|
||||||
|
"modal.copy.setting.info": "간격을 설정하고 복사 방향을 선택하십시오.",
|
||||||
"modal.line.property.edit.info": "속성을 변경할 변을 선택해주세요.",
|
"modal.line.property.edit.info": "속성을 변경할 변을 선택해주세요.",
|
||||||
"modal.line.property.edit.selected": "선택한 값",
|
"modal.line.property.edit.selected": "선택한 값",
|
||||||
"contextmenu.flow.direction.edit": "흐름 방향 변경",
|
"contextmenu.flow.direction.edit": "흐름 방향 변경",
|
||||||
@ -311,12 +355,35 @@
|
|||||||
"contextmenu.grid.color.edit": "그리드 색 변경",
|
"contextmenu.grid.color.edit": "그리드 색 변경",
|
||||||
"contextmenu.dimension.auxiliary.line.edit": "치수 보조선 변경",
|
"contextmenu.dimension.auxiliary.line.edit": "치수 보조선 변경",
|
||||||
"contextmenu.display.edit": "표시 변경",
|
"contextmenu.display.edit": "표시 변경",
|
||||||
|
"modal.display.edit.info": "치수선에 표시할 수치를 입력해 주세요.",
|
||||||
|
"modal.display.edit.before.length": "기존 길이",
|
||||||
|
"modal.display.edit.after.length": "변경 길이",
|
||||||
|
"modal.display.edit.corner.valley": "구석・골의 경우",
|
||||||
|
"modal.display.edit.input.slope": "경사를 입력해주세요.",
|
||||||
|
"modal.display.edit.input.slope.info": "경사 설정되어 있는 경우 입력한 수치에 경사 계산을 한 수치가 표시됩니다.",
|
||||||
|
"modal.distance": "거리 측정",
|
||||||
|
"modal.distance.dual.point": "두 점간 거리",
|
||||||
|
"modal.distance.horizon": "수평 거리",
|
||||||
|
"modal.distance.vertical": "수직 거리",
|
||||||
"contextmenu.opening.offset": "개구 오프셋",
|
"contextmenu.opening.offset": "개구 오프셋",
|
||||||
"contextmenu.remove": "삭제",
|
"contextmenu.remove": "삭제",
|
||||||
"contextmenu.remove.all": "전체 삭제",
|
"contextmenu.remove.all": "전체 삭제",
|
||||||
"contextmenu.move": "이동",
|
"contextmenu.move": "이동",
|
||||||
"contextmenu.copy": "복사",
|
"contextmenu.copy": "복사",
|
||||||
"contextmenu.edit": "편집",
|
"contextmenu.edit": "편집",
|
||||||
|
"contextmenu.module.vertical.align": "모듈 세로 가운데 정렬",
|
||||||
|
"contextmenu.module.horizon.align": "모듈 가로 가운데 정렬",
|
||||||
|
"contextmenu.module.left.align": "모듈 왼쪽 정렬",
|
||||||
|
"contextmenu.module.right.align": "모듈 오른쪽 정렬",
|
||||||
|
"contextmenu.module.up.align": "모듈 위쪽 정렬",
|
||||||
|
"contextmenu.module.down.align": "모듈 아래쪽 정렬",
|
||||||
|
"contextmenu.module.remove": "모듈 일괄 삭제",
|
||||||
|
"contextmenu.module.move": "모듈 일괄 이동",
|
||||||
|
"contextmenu.module.copy": "모듈 일괄 복사",
|
||||||
|
"contextmenu.module.circuit.number.edit": "모듈 일괄 회로 번호 변경",
|
||||||
|
"modal.module.circuit.number.edit": "모듈 일괄 회로 번호 변경",
|
||||||
|
"modal.module.circuit.number.edit.info": "회로 번호를 입력해주세요.",
|
||||||
|
"modal.module.circuit.number": "회로 번호",
|
||||||
"common.message.no.data": "No data",
|
"common.message.no.data": "No data",
|
||||||
"common.message.no.dataDown": "No data to download",
|
"common.message.no.dataDown": "No data to download",
|
||||||
"common.message.noData": "No data to display",
|
"common.message.noData": "No data to display",
|
||||||
@ -404,7 +471,10 @@
|
|||||||
"common.message.writeToConfirm": "작성 해제를 실행하시겠습니까?",
|
"common.message.writeToConfirm": "작성 해제를 실행하시겠습니까?",
|
||||||
"common.message.password.init.success": "비밀번호 [{0}]로 초기화 되었습니다.",
|
"common.message.password.init.success": "비밀번호 [{0}]로 초기화 되었습니다.",
|
||||||
"common.message.no.edit.save": "This document cannot be changed.",
|
"common.message.no.edit.save": "This document cannot be changed.",
|
||||||
|
"common.input.file": "파일 불러오기",
|
||||||
|
"common.input.file.load": "불러오기",
|
||||||
"common.require": "필수",
|
"common.require": "필수",
|
||||||
|
"common.ok": "확인",
|
||||||
"commons.west": "서",
|
"commons.west": "서",
|
||||||
"commons.east": "동",
|
"commons.east": "동",
|
||||||
"commons.south": "남",
|
"commons.south": "남",
|
||||||
@ -509,6 +579,7 @@
|
|||||||
"stuff.gridHeader.receiveUser": "담당자",
|
"stuff.gridHeader.receiveUser": "담당자",
|
||||||
"stuff.gridHeader.specificationConfirmDate": "사양확인일",
|
"stuff.gridHeader.specificationConfirmDate": "사양확인일",
|
||||||
"stuff.gridHeader.createDatetime": "등록일",
|
"stuff.gridHeader.createDatetime": "등록일",
|
||||||
|
"stuff.gridData.tempObjectNo": "임시저장물건",
|
||||||
"stuff.message.periodError": "최대1년 조회 가능합니다.",
|
"stuff.message.periodError": "최대1년 조회 가능합니다.",
|
||||||
"stuff.addressPopup.title": "우편번호",
|
"stuff.addressPopup.title": "우편번호",
|
||||||
"stuff.addressPopup.placeholder": "우편번호의 7자리를 입력하세요.",
|
"stuff.addressPopup.placeholder": "우편번호의 7자리를 입력하세요.",
|
||||||
@ -521,6 +592,7 @@
|
|||||||
"stuff.addressPopup.btn2": "주소적용",
|
"stuff.addressPopup.btn2": "주소적용",
|
||||||
"stuff.planReqPopup.title": "설계의뢰 불러오기",
|
"stuff.planReqPopup.title": "설계의뢰 불러오기",
|
||||||
"stuff.temp.subTitle": "물건정보",
|
"stuff.temp.subTitle": "물건정보",
|
||||||
|
"stuff.temp.subTitle2": "도면작성",
|
||||||
"stuff.detail.header.message1": "존재하지 않는 물건입니다.",
|
"stuff.detail.header.message1": "존재하지 않는 물건입니다.",
|
||||||
"stuff.detail.header.message2": "물건번호가 복사되었습니다.",
|
"stuff.detail.header.message2": "물건번호가 복사되었습니다.",
|
||||||
"stuff.detail.header.message3": "물건번호 복사에 실패했습니다.",
|
"stuff.detail.header.message3": "물건번호 복사에 실패했습니다.",
|
||||||
@ -601,7 +673,7 @@
|
|||||||
"stuff.planReqPopup.search.schDateGbnR": "접수일",
|
"stuff.planReqPopup.search.schDateGbnR": "접수일",
|
||||||
"stuff.planReqPopup.error.message1": "설계의뢰를 선택해주세요.",
|
"stuff.planReqPopup.error.message1": "설계의뢰를 선택해주세요.",
|
||||||
"stuff.search.title": "물건현황",
|
"stuff.search.title": "물건현황",
|
||||||
"stuff.search.btn1": "신규등록",
|
"stuff.search.btn1": "신규 물건 등록",
|
||||||
"stuff.search.btn2": "조회",
|
"stuff.search.btn2": "조회",
|
||||||
"stuff.search.btn3": "초기화",
|
"stuff.search.btn3": "초기화",
|
||||||
"stuff.search.schObjectNo": "물건번호",
|
"stuff.search.schObjectNo": "물건번호",
|
||||||
@ -679,6 +751,7 @@
|
|||||||
"shed": "한쪽흐름",
|
"shed": "한쪽흐름",
|
||||||
"apply": "적용",
|
"apply": "적용",
|
||||||
"module": "모듈",
|
"module": "모듈",
|
||||||
|
"legend": "범례",
|
||||||
"has.sleeve": "소매 있음",
|
"has.sleeve": "소매 있음",
|
||||||
"has.not.sleeve": "소매 없음",
|
"has.not.sleeve": "소매 없음",
|
||||||
"jerkinhead.width": "반절처 폭",
|
"jerkinhead.width": "반절처 폭",
|
||||||
@ -725,14 +798,25 @@
|
|||||||
"estimate.detail.receiveUser": "담당자",
|
"estimate.detail.receiveUser": "담당자",
|
||||||
"estimate.detail.title": "안건명",
|
"estimate.detail.title": "안건명",
|
||||||
"estimate.detail.remarks": "메모",
|
"estimate.detail.remarks": "메모",
|
||||||
|
"estimate.detail.orderType": "주문분류",
|
||||||
|
"estimate.detail.roofCns": "지붕재・사양시공",
|
||||||
|
"estimate.detail.note": "비고",
|
||||||
|
"estimate.detail.nextSubmit": "후일자료제출",
|
||||||
"estimate.detail.header.fileList1": "파일첨부",
|
"estimate.detail.header.fileList1": "파일첨부",
|
||||||
"estimate.detail.fileList.btn": "파일선택",
|
"estimate.detail.fileList.btn": "파일선택",
|
||||||
"estimate.detail.header.fileList2": "첨부파일 목록",
|
"estimate.detail.header.fileList2": "첨부파일 목록",
|
||||||
"estimate.detail.header.specialEstimate": "견적특이사항",
|
"estimate.detail.header.specialEstimate": "견적특이사항",
|
||||||
"estimate.detail.header.specialEstimateProductInfo": "제품정보",
|
"estimate.detail.header.specialEstimateProductInfo": "제품정보",
|
||||||
|
"estimate.detail.sepcialEstimateProductInfo.totPcs": "수량 (PCS)",
|
||||||
|
"estimate.detail.sepcialEstimateProductInfo.vol": "용량 (Kw)",
|
||||||
|
"estimate.detail.sepcialEstimateProductInfo.netAmt": "공급가액",
|
||||||
|
"estimate.detail.sepcialEstimateProductInfo.vat": "부가세 (10％)",
|
||||||
|
"estimate.detail.sepcialEstimateProductInfo.totPrice": "총액",
|
||||||
"estimate.detail.sepcialEstimateProductInfo.pkgUnitPrice": "주택PKG단가 (W)",
|
"estimate.detail.sepcialEstimateProductInfo.pkgUnitPrice": "주택PKG단가 (W)",
|
||||||
"estimate.detail.sepcialEstimateProductInfo.pkgWeight": "PKG 용량 (Kw)",
|
"estimate.detail.sepcialEstimateProductInfo.pkgWeight": "PKG 용량 (Kw)",
|
||||||
"estimate.detail.sepcialEstimateProductInfo.pkgPrice": "PKG 금액",
|
"estimate.detail.sepcialEstimateProductInfo.pkgPrice": "PKG 금액",
|
||||||
|
"estimate.detail.sepcialEstimateProductInfo.calcFormula1": "(모듈수량 * 수량)÷100",
|
||||||
|
"estimate.detail.sepcialEstimateProductInfo.calcFormula2": "PKG단가(W) * PKG용량(W)",
|
||||||
"estimate.detail.header.showPrice": "가격표시",
|
"estimate.detail.header.showPrice": "가격표시",
|
||||||
"estimate.detail.showPrice.btn1": "Pricing",
|
"estimate.detail.showPrice.btn1": "Pricing",
|
||||||
"estimate.detail.showPrice.description": "클릭하여 제품 특이사항 확인",
|
"estimate.detail.showPrice.description": "클릭하여 제품 특이사항 확인",
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user