97 lines
7.4 KiB
JavaScript
97 lines
7.4 KiB
JavaScript
import WithDraggable from "@/components/common/draggable/withDraggable";
|
|
import Qselect from "@/components/common/select/Qselect";
|
|
import { useState } from "react";
|
|
|
|
const SelectOption01 = [
|
|
{name: 'M',}, {name: 'M'}, {name: 'M'}, {name: 'M'}
|
|
]
|
|
|
|
export default function DrawingFlow(){
|
|
const [compasDeg, setCompasDeg] = useState(0);
|
|
return(
|
|
<WithDraggable isShow={true}>
|
|
<div className={`modal-pop-wrap ml`}>
|
|
<div className="modal-head handle">
|
|
<h1 className="title">面フローの設定 </h1>
|
|
<button className="modal-close">닫기</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="drawing-flow-wrap">
|
|
<div className="discrimination-box">
|
|
<div className="discrimination-tit mb15">流れ方向の設定</div>
|
|
<div className="guide">流れ方向を選択してください。</div>
|
|
<div className="object-direction-wrap">
|
|
<div className="plane-direction">
|
|
<span className="top">北</span>
|
|
<span className="right">ドン</span>
|
|
<span className="bottom">南</span>
|
|
<span className="left">立つ</span>
|
|
<button className="plane-btn up"></button>
|
|
<button className="plane-btn right"></button>
|
|
<button className="plane-btn down act"></button>
|
|
<button className="plane-btn left"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="discrimination-box">
|
|
<div className="discrimination-tit mb15">方位設定</div>
|
|
<div className="guide">シミュレーション計算の方向を指定します。面が向いている方位を選択してください。</div>
|
|
<div className="mb-box">
|
|
<div className="d-check-radio pop mb15">
|
|
<input type="radio" name="radio01" id="ra01" />
|
|
<label htmlFor="ra01">8方位に選ぶ</label>
|
|
</div>
|
|
<div className="grid-select ">
|
|
<Qselect title={'M'} option={SelectOption01}/>
|
|
</div>
|
|
</div>
|
|
<div className="mb-box">
|
|
<div className="d-check-radio pop">
|
|
<input type="radio" name="radio02" id="ra02" />
|
|
<label htmlFor="ra02">24方位から選択する (表記は8方位です。)</label>
|
|
</div>
|
|
</div>
|
|
<div className="draw-flow-wrap">
|
|
<div className="compas-box">
|
|
<div className="compas-box-inner">
|
|
<div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>13</i></div>
|
|
<div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}><i>12</i></div>
|
|
<div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}><i>11</i></div>
|
|
<div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}><i>10</i></div>
|
|
<div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}><i>9</i></div>
|
|
<div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}><i>8</i></div>
|
|
<div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>7</i></div>
|
|
<div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}><i>6</i></div>
|
|
<div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}><i>5</i></div>
|
|
<div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}><i>4</i></div>
|
|
<div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}><i>3</i></div>
|
|
<div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}><i>2</i></div>
|
|
<div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>1</i></div>
|
|
<div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}><i>24</i></div>
|
|
<div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}><i>23</i></div>
|
|
<div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}><i>22</i></div>
|
|
<div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}><i>21</i></div>
|
|
<div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}><i>20</i></div>
|
|
<div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>19</i></div>
|
|
<div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}><i>18</i></div>
|
|
<div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}><i>17</i></div>
|
|
<div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}><i>16</i></div>
|
|
<div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}><i>15</i></div>
|
|
<div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}><i>14</i></div>
|
|
<div className="compas">
|
|
<div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act">保存</button>
|
|
</div>
|
|
</div>
|
|
<div className="modal-foot handle"></div>
|
|
</div>
|
|
</WithDraggable>
|
|
)
|
|
} |