업데이트
This commit is contained in:
익희 김
parent
e63c0b28bd
commit
b5e855d0a6
32
README.md
32
README.md
@ -150,3 +150,35 @@ header-nav 관련해서 수정 요청드립니다.
|
||||
(첨부 5)
|
||||
정보 검색에서 사용하는 필터가 전체/인물정보/국자정보 등의 카테고리별로 구분되어 있는데, 해당 영역은 공용으로 사용하기에 분리가 필요합니다.
|
||||
+) 추가로 각 카테고리에 대한 색상코드를 10개정도만 추가해주실 수 있으면 추가 부탁드립니다.
|
||||
|
||||
|
||||
|
||||
#2024-11-15
|
||||
|
||||
안녕하세요. @김익희 님
|
||||
현재까지 주신 퍼블 모두 적용 완료했고, 과정에서 수정사항이 있어서 요청드립니다.
|
||||
|
||||
1. 주요일정 - 등록 모달에서 셀렉트 박스 퍼블
|
||||
해당 부분 셀렉트 박스 퍼블이 안되어 있어서 요청드립니다.
|
||||
|
||||
2. 주요일정 - 삭제 모달에서 삭제에 대한 confirm 모달이 글자수가 늘어남에 따라 깨지는 현상이 있습니다. (현재 모든 alert, confrim 모달은 mng > outdata > alert에 있는 모달 2개 사용 중)
|
||||
|
||||
>3. 주요일정 - 리스트에서 각 셀에 대한 마우스 커서 포인트로 변경되게 수정 요청드립니다.
|
||||
|
||||
4. 메인 검색 셀렉트 박스 퍼블 적용이 안되어 있습니다.
|
||||
|
||||
5. 정보관리, 정보검색에서 SearchForm 내부 날짜 값에 limit를 걸어두었습니다. 때문에 limit에 걸리는 날짜는 캡쳐본과 같이 회색으로 처리되는 부분이 있어서.. 이 부분 수정 부탁드립니다.
|
||||
|
||||
6. 정보 조회 화면에 대해서 최초 진입 시에 검색이 안되어 있어서 정보 입력에 대한 요청을 하고 있습니다. 현재 퍼블된 내용이 없어서 검색 결과가 없을 때 사용하는 컴포넌트를 수정해서 사용 중입니다. 추가 가능할까요?
|
||||
|
||||
7. 정보관리의 일일정보 탭이 깨지는 현상이 있습니다. 수정 부탁드립니다.
|
||||
|
||||
8. header 부분에 Admin이라는 버튼을 임의로 추가해두었습니다. 권한이 있는 사용자에게 조건부로 보여지는 버튼입니다. 이 부분에 대한 아이콘 추가가 가능할까요?
|
||||
|
||||
9. 현재 정보조회에서 인물정보, 국가정보의 자동완성 길이가 input박스와 맞지 않습니다.
|
||||
|
||||
10. 로그인 창에서 자동완성을 통해 input을 채워넣으면 아이콘이 사라지는 현상이 있습니다.
|
||||
|
||||
----------------------------------------------------------------------
|
||||
|
||||
1~10에 해당하는 캡쳐본 순차적으로 첨부드립니다.
|
||||
|
||||
174
css/default.css
174
css/default.css
@ -284,9 +284,9 @@ button {
|
||||
--editor-search-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5959 11.4069L11.7584 10.2819L17.2476 16.1251L16.0851 17.2501L10.5959 11.4069Z' fill='white'/%3E%3Cpath d='M7.3371 12.7501C10.5471 12.7501 13.1494 10.2317 13.1494 7.12509C13.1494 4.01849 10.5471 1.50009 7.3371 1.50009C4.12704 1.50009 1.52478 4.01849 1.52478 7.12509C1.52478 10.2317 4.12704 12.7501 7.3371 12.7501Z' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
|
||||
--editor-plus-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='8.25009' width='12' height='1.5' fill='%23626894'/%3E%3Crect x='9.75' y='3.00009' width='12' height='1.5' transform='rotate(90 9.75 3.00009)' fill='%23626894'/%3E%3C/svg%3E%0A");
|
||||
--editor-minus-icon: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='8.25009' width='12' height='1.5' fill='%23626894'/%3E%3C/svg%3E%0A");
|
||||
--writing-icon-colored:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M29.0983 4.74692H15.7184L7.69043 12.7749V32.0419C7.69043 33.8154 9.12812 35.2531 10.9016 35.2531H29.0983C30.8717 35.2531 32.3094 33.8154 32.3094 32.0419V7.95809C32.3094 6.18461 30.8717 4.74692 29.0983 4.74692Z' fill='%2350B12A'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5072 12.7748C14.2807 12.7748 15.7184 11.3371 15.7184 9.56367V4.7469L7.69045 12.7748H12.5072Z' fill='%23B9EBA6'/%3E%3Crect x='12.9065' y='19.7324' width='14.7221' height='2.67598' rx='1.33799' fill='%23B9EBA6'/%3E%3Crect x='12.9065' y='25.6195' width='14.7221' height='2.67598' rx='1.33799' fill='%23B9EBA6'/%3E%3C/svg%3E%0A");
|
||||
--translation-icon-colored:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.6504 14.5111C18.4413 14.5111 16.6504 16.302 16.6504 18.5111V32.4667C16.6504 34.6759 18.4413 36.4667 20.6504 36.4667H34.606C36.8152 36.4667 38.606 34.6759 38.606 32.4667V18.5111C38.606 16.302 36.8152 14.5111 34.606 14.5111H20.6504ZM31.2373 32.1437V26.0703H32.9442V24.628H31.2373V19.9704H29.4907V32.1437H31.2373ZM22.5572 30.0663C26.6194 28.0154 27.9955 24.8926 27.9955 21.2274H22.2529V22.6432H26.2357C25.9181 25.3558 24.4229 27.2611 21.5781 28.7299L22.5572 30.0663Z' fill='%23F67199'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.39404 7.53326C1.39404 5.32413 3.1849 3.53326 5.39404 3.53326H19.3497C21.5588 3.53326 23.3497 5.32413 23.3497 7.53326V12.5111H20.6505C18.5321 12.5111 16.6702 13.6089 15.6025 15.2666L13.6294 9.13183H11.0997L7.65408 19.8903H9.83485L10.5909 17.128H14.0801L14.6505 19.2122V25.4889H5.39404C3.1849 25.4889 1.39404 23.698 1.39404 21.4889V7.53326ZM13.295 14.2785C13.1165 13.6807 12.9545 13.0498 12.7914 12.4145L12.7914 12.4144C12.649 11.86 12.5058 11.3022 12.35 10.7601H12.2919C12.0156 11.9378 11.7103 13.159 11.3759 14.2785L11.0561 15.4561H13.6149L13.295 14.2785Z' fill='%23FFAFC8'/%3E%3C/svg%3E%0A");
|
||||
--bulb-icon-colored:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='19.4102' cy='20.5941' r='8.56599' fill='%23FFBA4A'/%3E%3Cpath d='M13.9845 23.7272H24.836L23.1137 32.3285H15.7068L13.9845 23.7272Z' fill='%23FFBA4A'/%3E%3Crect x='16.2377' y='33.29' width='6.34521' height='3.52509' fill='%23FADDAD'/%3E%3Crect x='20.4312' y='3.64395' width='6' height='2.04181' transform='rotate(90 20.4312 3.64395)' fill='%23FADDAD'/%3E%3Crect x='34.1932' y='11.4122' width='6' height='2.04181' transform='rotate(150 34.1932 11.4122)' fill='%23FADDAD'/%3E%3Crect x='35.8093' y='22.8384' width='6' height='2.04181' transform='rotate(-180 35.8093 22.8384)' fill='%23FADDAD'/%3E%3Crect x='9.01123' y='22.8384' width='6' height='2.04181' transform='rotate(-180 9.01123 22.8384)' fill='%23FADDAD'/%3E%3Crect width='6' height='2.04181' transform='matrix(0.866025 0.5 0.5 -0.866025 4.62219 11.4122)' fill='%23FADDAD'/%3E%3C/svg%3E%0A");
|
||||
--writing-icon-colored: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M29.0983 4.74692H15.7184L7.69043 12.7749V32.0419C7.69043 33.8154 9.12812 35.2531 10.9016 35.2531H29.0983C30.8717 35.2531 32.3094 33.8154 32.3094 32.0419V7.95809C32.3094 6.18461 30.8717 4.74692 29.0983 4.74692Z' fill='%2350B12A'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5072 12.7748C14.2807 12.7748 15.7184 11.3371 15.7184 9.56367V4.7469L7.69045 12.7748H12.5072Z' fill='%23B9EBA6'/%3E%3Crect x='12.9065' y='19.7324' width='14.7221' height='2.67598' rx='1.33799' fill='%23B9EBA6'/%3E%3Crect x='12.9065' y='25.6195' width='14.7221' height='2.67598' rx='1.33799' fill='%23B9EBA6'/%3E%3C/svg%3E%0A");
|
||||
--translation-icon-colored: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.6504 14.5111C18.4413 14.5111 16.6504 16.302 16.6504 18.5111V32.4667C16.6504 34.6759 18.4413 36.4667 20.6504 36.4667H34.606C36.8152 36.4667 38.606 34.6759 38.606 32.4667V18.5111C38.606 16.302 36.8152 14.5111 34.606 14.5111H20.6504ZM31.2373 32.1437V26.0703H32.9442V24.628H31.2373V19.9704H29.4907V32.1437H31.2373ZM22.5572 30.0663C26.6194 28.0154 27.9955 24.8926 27.9955 21.2274H22.2529V22.6432H26.2357C25.9181 25.3558 24.4229 27.2611 21.5781 28.7299L22.5572 30.0663Z' fill='%23F67199'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.39404 7.53326C1.39404 5.32413 3.1849 3.53326 5.39404 3.53326H19.3497C21.5588 3.53326 23.3497 5.32413 23.3497 7.53326V12.5111H20.6505C18.5321 12.5111 16.6702 13.6089 15.6025 15.2666L13.6294 9.13183H11.0997L7.65408 19.8903H9.83485L10.5909 17.128H14.0801L14.6505 19.2122V25.4889H5.39404C3.1849 25.4889 1.39404 23.698 1.39404 21.4889V7.53326ZM13.295 14.2785C13.1165 13.6807 12.9545 13.0498 12.7914 12.4145L12.7914 12.4144C12.649 11.86 12.5058 11.3022 12.35 10.7601H12.2919C12.0156 11.9378 11.7103 13.159 11.3759 14.2785L11.0561 15.4561H13.6149L13.295 14.2785Z' fill='%23FFAFC8'/%3E%3C/svg%3E%0A");
|
||||
--bulb-icon-colored: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='19.4102' cy='20.5941' r='8.56599' fill='%23FFBA4A'/%3E%3Cpath d='M13.9845 23.7272H24.836L23.1137 32.3285H15.7068L13.9845 23.7272Z' fill='%23FFBA4A'/%3E%3Crect x='16.2377' y='33.29' width='6.34521' height='3.52509' fill='%23FADDAD'/%3E%3Crect x='20.4312' y='3.64395' width='6' height='2.04181' transform='rotate(90 20.4312 3.64395)' fill='%23FADDAD'/%3E%3Crect x='34.1932' y='11.4122' width='6' height='2.04181' transform='rotate(150 34.1932 11.4122)' fill='%23FADDAD'/%3E%3Crect x='35.8093' y='22.8384' width='6' height='2.04181' transform='rotate(-180 35.8093 22.8384)' fill='%23FADDAD'/%3E%3Crect x='9.01123' y='22.8384' width='6' height='2.04181' transform='rotate(-180 9.01123 22.8384)' fill='%23FADDAD'/%3E%3Crect width='6' height='2.04181' transform='matrix(0.866025 0.5 0.5 -0.866025 4.62219 11.4122)' fill='%23FADDAD'/%3E%3C/svg%3E%0A");
|
||||
cursor: pointer;
|
||||
|
||||
&.download-btn {
|
||||
@ -935,6 +935,24 @@ footer {
|
||||
margin-right: 40px;
|
||||
border-collapse: collapse;
|
||||
|
||||
&.statics {
|
||||
margin-bottom: 80px;
|
||||
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
height: 68px;
|
||||
border-bottom: 1px solid #999999;
|
||||
background-color: #EDF1FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
@ -982,9 +1000,19 @@ footer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&[answer="done"] {
|
||||
color: #3366FF;
|
||||
}
|
||||
|
||||
&[answer="yet"] {
|
||||
color: #EE0000;
|
||||
}
|
||||
|
||||
&[answer="temp"] {
|
||||
color: #04AA04;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -1141,6 +1169,20 @@ footer {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
tfoot {
|
||||
tr {
|
||||
td {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
height: 68px;
|
||||
box-shadow: 0 -1px 0 0 #999999;
|
||||
background-color: #EDF1FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-action {
|
||||
@ -1697,6 +1739,13 @@ footer {
|
||||
|
||||
&.none {
|
||||
margin-top: 0;
|
||||
|
||||
.tab {
|
||||
&.solid {
|
||||
position: relative
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-btn {
|
||||
@ -1831,6 +1880,102 @@ footer {
|
||||
&.all-radius {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
&.statics {
|
||||
height: auto;
|
||||
padding: 40px 0;
|
||||
|
||||
.statics-button-group {
|
||||
padding: 0;
|
||||
|
||||
>[col] {
|
||||
padding: 0 40px;
|
||||
|
||||
>[row] {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -24px;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
box-shadow: 0 1px 0 1px #BDBDBD66;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
&:after {
|
||||
box-shadow: 0 0 0 0 #BDBDBD66;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 49px;
|
||||
display: flex;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
appearance: none;
|
||||
|
||||
&:checked {
|
||||
~p {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
transition: ease all 0.3s;
|
||||
background-color: #3366FF;
|
||||
box-shadow: 0 0 0 1px #3366FF;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:checked) {
|
||||
~p {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
transition: ease all 0.3s;
|
||||
background-color: #FFFFFF1A;
|
||||
box-shadow: 0 0 0 1px #FFFFFF66;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 25.2px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&[type="date"] {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&[active] {
|
||||
@ -2815,6 +2960,7 @@ footer {
|
||||
height: 85px;
|
||||
position: relative;
|
||||
width: calc(50% - 80px);
|
||||
cursor:pointer;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
@ -3047,7 +3193,7 @@ section {
|
||||
box-shadow: 0px 4px 13.8px 0px #00000026;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
padding-left:16px;
|
||||
padding-left: 16px;
|
||||
|
||||
.autocomplete-item {
|
||||
padding: 8px;
|
||||
@ -3180,6 +3326,22 @@ section {
|
||||
}
|
||||
|
||||
|
||||
|
||||
.static-chart {
|
||||
&.column-01 {
|
||||
width: calc(100% - 80px);
|
||||
height: 400px;
|
||||
margin-bottom: 62px;
|
||||
}
|
||||
|
||||
canvas {
|
||||
&:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.spinner-wrap {
|
||||
>div {
|
||||
flex: 1 1 auto;
|
||||
|
||||
@ -319,7 +319,6 @@ container {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
|
||||
&[shrink] {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
@ -337,6 +336,9 @@ container {
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
&[wrap]{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
[col] {
|
||||
|
||||
393
html/statistics/F_0030.html
Normal file
393
html/statistics/F_0030.html
Normal file
@ -0,0 +1,393 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>통계</title>
|
||||
<script src="../../js/amchart.js"></script>
|
||||
<script src="../../js/xy.js"></script>
|
||||
<script src="../../js/Animated.js"></script>
|
||||
<link rel="stylesheet" href="../../../css/global.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../css/default.css" type="text/css" />
|
||||
<script src="../../js/ui.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header open="false">
|
||||
<div>
|
||||
<container>
|
||||
<div row between>
|
||||
<logo></logo>
|
||||
<div row class="menu-first-depth" style="--gap:36px" onmouseenter="uiGnbHandler()">
|
||||
<div>
|
||||
<a href="#" data-current="false">정보등록</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" data-current="false">정보관리</a>
|
||||
<div col class="menu-second-depth" open="false">
|
||||
<a href="#">우리국 자료</a>
|
||||
<a href="#">외부 자료</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" data-current="true">정보조회</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" data-current="false">정보보고</a>
|
||||
<div col class="menu-second-depth" open="false">
|
||||
<a href="#">정보보고</a>
|
||||
<a href="#">통계</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" data-current="false">공지사항</a>
|
||||
</div>
|
||||
</div>
|
||||
<div row class="search-header" style="--gap:17px">
|
||||
<label class="button switch">
|
||||
<input type="checkbox" checked>
|
||||
<div class="switch-label">
|
||||
<span>통합 검색</span>
|
||||
<span>지능형 검색</span>
|
||||
</div>
|
||||
</label>
|
||||
<form class="header-search" style="--width:320px">
|
||||
<input type="search" placeholder="검색어를 입력하세요." />
|
||||
<button type="submit"></button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="user-info" row middle style="--gap:16px">
|
||||
<div col style="--gap:2px">
|
||||
<p>홍길동</p>
|
||||
<span>외교정보기획국</span>
|
||||
</div>
|
||||
<div class="logout"></div>
|
||||
</div>
|
||||
</div>
|
||||
</container>
|
||||
</div>
|
||||
</header>
|
||||
<section style="--section-top:145px">
|
||||
<div class="breadcrumb">
|
||||
<container>
|
||||
<div col style="--gap:12px">
|
||||
<div row middle class="breadcrumb-wrap" style="--gap:4px">
|
||||
<a href="#home"></a>
|
||||
<div class="caret"></div>
|
||||
<a href="#home">정보보고</a>
|
||||
<div class="caret"></div>
|
||||
<a href="#home">통계</a>
|
||||
</div>
|
||||
<h1>
|
||||
통계
|
||||
</h1>
|
||||
</div>
|
||||
</container>
|
||||
</div>
|
||||
</section>
|
||||
<section style="--section-top:40px">
|
||||
<div class="search-section">
|
||||
<container>
|
||||
<div class="tabs none">
|
||||
<div class="tab solid" active>
|
||||
<div class="tab-content statics">
|
||||
<form class="statics-button-group">
|
||||
<div col style="--gap:48px">
|
||||
<div row style="--gap:16px">
|
||||
<div row>
|
||||
<label>
|
||||
<input type="checkbox" checked />
|
||||
<p>#공관</p>
|
||||
</label>
|
||||
</div>
|
||||
<div row wrap>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>#등록건수순</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>#가나다순</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>#대사관</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>#총영사관</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>#대표부</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div row style="--gap:16px">
|
||||
<div row>
|
||||
<label>
|
||||
<input type="checkbox" checked />
|
||||
<p>#공관</p>
|
||||
</label>
|
||||
</div>
|
||||
<div row wrap>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>#5점</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>#4점</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>#3점</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>#2점</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>#1점</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div row style="--gap:16px">
|
||||
<div row>
|
||||
<label>
|
||||
<input type="checkbox" checked />
|
||||
<p>#답변상태</p>
|
||||
</label>
|
||||
</div>
|
||||
<div row wrap>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>#답변미등록</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>#답변완료</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>#임시답변</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div row style="--gap:16px">
|
||||
<div row>
|
||||
<label>
|
||||
<input type="checkbox" checked />
|
||||
<p>#대륙</p>
|
||||
</label>
|
||||
</div>
|
||||
<div row wrap>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>동남아시아</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>동북아시아</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>러시아</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>북미</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>서남아시아태평양</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>아프리카</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>유럽</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>일본</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>중국</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>중남미</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>중동</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>중앙아시아</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div row style="--gap:16px">
|
||||
<div row>
|
||||
<label>
|
||||
<input type="checkbox" checked />
|
||||
<p>#기간</p>
|
||||
</label>
|
||||
</div>
|
||||
<div row wrap>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>#7일</p>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
<p>#30일</p>
|
||||
</label>
|
||||
<div row middle style="--gap:8px">
|
||||
<input type="date" />
|
||||
<span style="--color:#fff">~</span>
|
||||
<input type="date" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div row center style="--gap:16px">
|
||||
<button variant="fill" class="initial" style="--bg:#FFFFFF">
|
||||
초기화
|
||||
</button>
|
||||
<button variant="fill" class="confirm" style="--bg:#3366FF">
|
||||
적용
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</container>
|
||||
</div>
|
||||
</section>
|
||||
<section style="--section-top:44px">
|
||||
<div class="list-section">
|
||||
<div>
|
||||
<container>
|
||||
<div row between class="full-width">
|
||||
<div row style="--gap:4px">
|
||||
</div>
|
||||
<button class="download-btn">엑셀 다운로드</button>
|
||||
</div>
|
||||
<div col class="list-wrap">
|
||||
<table class="statics">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
공관명
|
||||
</th>
|
||||
<th>
|
||||
등록건수
|
||||
</th>
|
||||
<th>
|
||||
배점
|
||||
</th>
|
||||
<th>
|
||||
답변상태
|
||||
</th>
|
||||
<th>
|
||||
대륙
|
||||
</th>
|
||||
<th>
|
||||
등록일
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>A(대)</td>
|
||||
<td>8</td>
|
||||
<td>4</td>
|
||||
<td answer="done">답변완료</td>
|
||||
<td>유럽</td>
|
||||
<td>2024.08.05. 05:30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>B(대)</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
<td answer="yet">답변미등록</td>
|
||||
<td>러시아</td>
|
||||
<td>2024.08.05. 05:30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>C(대)</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
<td answer="temp">임시답변</td>
|
||||
<td>중국</td>
|
||||
<td>2024.08.05. 05:30</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>
|
||||
총합계
|
||||
</td>
|
||||
<td>
|
||||
50
|
||||
</td>
|
||||
<td colspan="4"></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div row center>
|
||||
<p class="p24_b">공관별 등록건수</p>
|
||||
</div>
|
||||
<div class="static-chart column-01" id="chartdiv"></div>
|
||||
</div>
|
||||
</container>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer style="--mt:98px">
|
||||
<container>
|
||||
<div row between middle>
|
||||
<p style="--color:#ffffff99">Copyright ⓒ 대한민국 외교부. All rights reserved</p>
|
||||
<footer-logo />
|
||||
</div>
|
||||
</container>
|
||||
</footer>
|
||||
<script>
|
||||
const data = [
|
||||
{ x: "A(대)", y: 8 },
|
||||
{ x: "B(대)", y: 8 },
|
||||
{ x: "C(대)", y: 4 },
|
||||
{ x: "D(대)", y: 4 },
|
||||
{ x: "E(대)", y: 3 },
|
||||
{ x: "F(대)", y: 3 },
|
||||
{ x: "G(대)", y: 3 },
|
||||
{ x: "H(대)", y: 2 },
|
||||
{ x: "I(대)", y: 2 },
|
||||
{ x: "J(대)", y: 2 },
|
||||
{ x: "K(대)", y: 2 },
|
||||
{ x: "L(대)", y: 2 },
|
||||
{ x: "M(대)", y: 2 },
|
||||
{ x: "N(대)", y: 1 },
|
||||
{ x: "O(대)", y: 1 },
|
||||
{ x: "P(대)", y: 1 },
|
||||
{ x: "Q(대)", y: 1 },
|
||||
{ x: "R(대)", y: 1 },
|
||||
{ x: "S(대)", y: 1 },
|
||||
{ x: "T(대)", y: 1 },
|
||||
{ x: "U(대)", y: 1 },
|
||||
{ x: "V(대)", y: 1 }
|
||||
];
|
||||
uiColumnChartRender({selector:"chartdiv", data:data});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
2
js/Animated.js
Normal file
2
js/Animated.js
Normal file
@ -0,0 +1,2 @@
|
||||
"use strict";(self.webpackChunk_am5=self.webpackChunk_am5||[]).push([[4837],{9295:function(t,e,i){i.r(e),i.d(e,{am5themes_Animated:function(){return r}});var a=i(3409);class n extends a.Q{setupDefaultRules(){super.setupDefaultRules(),this.rule("Component").setAll({interpolationDuration:600}),this.rule("Hierarchy").set("animationDuration",600),this.rule("Scrollbar").set("animationDuration",600),this.rule("Tooltip").set("animationDuration",300),this.rule("MapChart").set("animationDuration",1e3),this.rule("MapChart").set("wheelDuration",300),this.rule("Entity").setAll({stateAnimationDuration:600}),this.rule("Sprite").states.create("default",{stateAnimationDuration:600}),this.rule("Tooltip",["axis"]).setAll({animationDuration:200}),this.rule("WordCloud").set("animationDuration",500),this.rule("Polygon").set("animationDuration",600),this.rule("ArcDiagram").set("animationDuration",600)}}const r=n}},function(t){var e=(9295,t(t.s=9295)),i=window;for(var a in e)i[a]=e[a];e.__esModule&&Object.defineProperty(i,"__esModule",{value:!0})}]);
|
||||
//# sourceMappingURL=Animated.js.map
|
||||
2
js/amchart.js
Normal file
2
js/amchart.js
Normal file
File diff suppressed because one or more lines are too long
66
js/ui.js
66
js/ui.js
@ -292,3 +292,69 @@ function uiCalcSetSpaceHeight(selector) {
|
||||
targetElement.style.height = 'auto';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function uiColumnChartRender({ selector, data }) {
|
||||
am5.ready(function () {
|
||||
const root = am5.Root.new(selector);
|
||||
|
||||
root.setThemes([
|
||||
am5themes_Animated.new(root)
|
||||
]);
|
||||
|
||||
const chart = root.container.children.push(
|
||||
am5xy.XYChart.new(root, {
|
||||
panX: false,
|
||||
panY: false,
|
||||
// wheelX: "panX",
|
||||
// wheelY: "zoomX",
|
||||
// pinchZoomX: true
|
||||
})
|
||||
);
|
||||
|
||||
const xAxis = chart.xAxes.push(
|
||||
am5xy.CategoryAxis.new(root, {
|
||||
categoryField: "x",
|
||||
renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 30 }),
|
||||
tooltip: am5.Tooltip.new(root, {})
|
||||
})
|
||||
);
|
||||
|
||||
const yAxis = chart.yAxes.push(
|
||||
am5xy.ValueAxis.new(root, {
|
||||
renderer: am5xy.AxisRendererY.new(root, {
|
||||
stroke: am5.color('#DCDCDC'),
|
||||
strokeWidth: 1
|
||||
})
|
||||
})
|
||||
);
|
||||
|
||||
const series = chart.series.push(
|
||||
am5xy.ColumnSeries.new(root, {
|
||||
name: "sector",
|
||||
xAxis: xAxis,
|
||||
yAxis: yAxis,
|
||||
valueYField: "y",
|
||||
categoryXField: "x",
|
||||
// tooltip: am5.Tooltip.new(root, {
|
||||
// labelText: "{valueY}"
|
||||
// })
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
series.columns.template.setAll({
|
||||
fill: am5.color("#7292CD"),
|
||||
stroke: am5.color("#7292CD"),
|
||||
cornerRadiusTL: 4,
|
||||
cornerRadiusTR: 4,
|
||||
width: 38
|
||||
});
|
||||
|
||||
xAxis.data.setAll(data);
|
||||
series.data.setAll(data);
|
||||
|
||||
series.appear(0);
|
||||
chart.appear(0, 0);
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user