aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083
2024-08-05 16:16:08 +08:00
parent adf5c97587
commit 4a21079775
32 changed files with 5983 additions and 1337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
src/assets/style/style.css
View File

@@ -424,6 +424,9 @@ li {
box-shadow: 0 0 0 2px rgba(83, 83, 83, 0.3);
border: 1px solid #d9d9d9;
}
.ant-picker-suffix {
display: flex;
}
.ant-picker-range .ant-picker-active-bar {
background: #353535;
}
@@ -1080,17 +1083,32 @@ li {
display: flex;
flex-direction: column;
}
.admin_page .admin_table_search {
margin-top: 2rem;
padding: 2rem 3.5rem 5rem 2.8rem;
background: #fff;
.admin_page .admin_state_item {
margin-right: 2rem;
margin-bottom: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.admin_page .admin_table_search .admin_search {
width: 40%;
.admin_page .admin_state_item > span:nth-child(1) {
font-size: 1.6rem;
font-weight: 400;
color: #030303;
margin-right: 15px;
flex-shrink: 0;
display: block;
width: 100px;
text-align: right;
}
.admin_page .admin_table_search .admin_search .admin_search_item {
.admin_page .admin_state_item > input {
padding: 4px 11px 4px;
line-height: 1.5715;
font-size: 14px;
}
.admin_page .admin_state_item .active {
cursor: no-drop;
background-color: #f5f5f5;
}
.admin_page .admin_search_item {
background: #343579;
border-color: #343579;
height: 4rem;
@@ -1100,27 +1118,48 @@ li {
display: inline-block;
color: #fff;
cursor: pointer;
margin: 0 2rem 2rem 0;
}
.admin_page .admin_search_item:last-child {
margin: 0;
}
.admin_page .admin_table_search {
flex-wrap: wrap;
margin-top: 2rem;
padding: 2rem 3.5rem 5rem 2.8rem;
background: #fff;
display: flex;
justify-content: space-between;
}
.admin_page .admin_table_search .admin_search {
width: 20%;
}
.admin_page .admin_table_search .admin_state_list {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width: 100%;
margin-top: 2rem;
}
.admin_page .admin_table_search .admin_state_list .admin_state_list_item {
cursor: pointer;
width: auto;
border-radius: 1rem;
padding: 1rem 2rem;
border: 1px solid #b6b6b6;
background: #39215b;
color: #fff;
margin: 0 2rem 2rem 0;
font-size: 1.8rem;
font-weight: 600;
}
.admin_page .admin_table_search .admin_state_list .admin_state_list_item:last-child {
margin: 0;
}
.admin_page .admin_table_search .admin_state {
position: relative;
cursor: pointer;
width: 60%;
}
.admin_page .admin_table_search .admin_state .admin_state_item {
margin-right: 2rem;
margin-bottom: 2rem;
display: flex;
align-items: center;
}
.admin_page .admin_table_search .admin_state .admin_state_item > span {
font-size: 1.6rem;
font-weight: 400;
color: #030303;
margin-right: 15px;
flex-shrink: 0;
display: block;
min-width: 13rem;
text-align: right;
width: 80%;
}
.admin_page .admin_table_search .admin_state .admin_current {
background: #fff;
@@ -1171,13 +1210,12 @@ li {
width: 0 !important;
}
.admin_page .admin_table_content .ant-table-thead > tr > th {
background: #ffffff00;
background: #ffffff;
border-bottom: none;
backdrop-filter: blur(1rem);
}
.admin_page .admin_table_content .ant-table-tbody > tr > td {
border: none;
background: transparent;
background: #fff;
}
.admin_page .admin_table_content .operate_list {
display: flex;
@@ -1193,7 +1231,7 @@ li {
cursor: pointer;
}
.admin_page .admin_table_content .ant-table-tbody > tr:hover > td {
background: #ffffff3a;
background: #cacaca;
}
.admin_page .admin_table_content .ant-table-pagination-right {
padding-right: 3.5rem;
@@ -1449,7 +1487,8 @@ textarea:focus {
.collection_modal_body .input_border,
.design_detail_modal_component .input_border,
.library_page .input_border,
.productImg_modal .input_border {
.productImg_modal .input_border,
.accountEdit_page .input_border {
z-index: 2;
display: flex;
align-items: center;
@@ -1463,7 +1502,8 @@ textarea:focus {
.collection_modal_body .input_border .input_box,
.design_detail_modal_component .input_border .input_box,
.library_page .input_border .input_box,
.productImg_modal .input_border .input_box {
.productImg_modal .input_border .input_box,
.accountEdit_page .input_border .input_box {
position: relative;
z-index: 2;
flex: 1;
@@ -1474,7 +1514,8 @@ textarea:focus {
.collection_modal_body .input_border .input_box .inputShowText,
.design_detail_modal_component .input_border .input_box .inputShowText,
.library_page .input_border .input_box .inputShowText,
.productImg_modal .input_border .input_box .inputShowText {
.productImg_modal .input_border .input_box .inputShowText,
.accountEdit_page .input_border .input_box .inputShowText {
width: 100%;
display: none;
}
@@ -1482,17 +1523,20 @@ textarea:focus {
.design_detail_modal_component .input_border .input_box.active .input_box_btnBox,
.library_page .input_border .input_box.active .input_box_btnBox,
.productImg_modal .input_border .input_box.active .input_box_btnBox,
.accountEdit_page .input_border .input_box.active .input_box_btnBox,
.collection_modal_body .input_border .input_box.active textarea,
.design_detail_modal_component .input_border .input_box.active textarea,
.library_page .input_border .input_box.active textarea,
.productImg_modal .input_border .input_box.active textarea {
.productImg_modal .input_border .input_box.active textarea,
.accountEdit_page .input_border .input_box.active textarea {
border: 1px solid #ff0001;
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
}
.collection_modal_body .input_border .input_box.active span,
.design_detail_modal_component .input_border .input_box.active span,
.library_page .input_border .input_box.active span,
.productImg_modal .input_border .input_box.active span {
.productImg_modal .input_border .input_box.active span,
.accountEdit_page .input_border .input_box.active span {
opacity: 1;
display: block;
color: rgba(255, 0, 0.7);
@@ -1500,14 +1544,16 @@ textarea:focus {
.collection_modal_body .input_border .search_keyword,
.design_detail_modal_component .input_border .search_keyword,
.library_page .input_border .search_keyword,
.productImg_modal .input_border .search_keyword {
.productImg_modal .input_border .search_keyword,
.accountEdit_page .input_border .search_keyword {
height: 0;
flex-basis: 100%;
}
.collection_modal_body .input_border .search_keyword .search_keyword_center,
.design_detail_modal_component .input_border .search_keyword .search_keyword_center,
.library_page .input_border .search_keyword .search_keyword_center,
.productImg_modal .input_border .search_keyword .search_keyword_center {
.productImg_modal .input_border .search_keyword .search_keyword_center,
.accountEdit_page .input_border .search_keyword .search_keyword_center {
justify-content: space-between;
display: flex;
width: var(--width);
@@ -1524,7 +1570,8 @@ textarea:focus {
.collection_modal_body .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_left {
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left {
display: flex;
overflow: hidden;
flex: 1;
@@ -1533,7 +1580,8 @@ textarea:focus {
.collection_modal_body .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
border-radius: 0.4rem;
border: solid 1px #39215b;
background-color: #8156bd;
@@ -1548,13 +1596,15 @@ textarea:focus {
.collection_modal_body .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child {
.productImg_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child {
margin-right: 0;
}
.collection_modal_body .input_border .input_box_btnBox,
.design_detail_modal_component .input_border .input_box_btnBox,
.library_page .input_border .input_box_btnBox,
.productImg_modal .input_border .input_box_btnBox {
.productImg_modal .input_border .input_box_btnBox,
.accountEdit_page .input_border .input_box_btnBox {
border: calc(0.1rem*1.2) solid #F1F1F1;
width: var(--width);
display: flex;
@@ -1563,13 +1613,15 @@ textarea:focus {
.collection_modal_body .input_border .input_box_btnBox .ant-spin-text,
.design_detail_modal_component .input_border .input_box_btnBox .ant-spin-text,
.library_page .input_border .input_box_btnBox .ant-spin-text,
.productImg_modal .input_border .input_box_btnBox .ant-spin-text {
.productImg_modal .input_border .input_box_btnBox .ant-spin-text,
.accountEdit_page .input_border .input_box_btnBox .ant-spin-text {
font-size: 1.2rem;
}
.collection_modal_body .input_border .input_box_btnBox .search_seed,
.design_detail_modal_component .input_border .input_box_btnBox .search_seed,
.library_page .input_border .input_box_btnBox .search_seed,
.productImg_modal .input_border .input_box_btnBox .search_seed {
.productImg_modal .input_border .input_box_btnBox .search_seed,
.accountEdit_page .input_border .input_box_btnBox .search_seed {
padding: 0;
width: 4rem;
text-align: center;
@@ -1579,14 +1631,16 @@ textarea:focus {
.collection_modal_body .input_border .upload_item .upload_file_item,
.design_detail_modal_component .input_border .upload_item .upload_file_item,
.library_page .input_border .upload_item .upload_file_item,
.productImg_modal .input_border .upload_item .upload_file_item {
.productImg_modal .input_border .upload_item .upload_file_item,
.accountEdit_page .input_border .upload_item .upload_file_item {
width: 8rem;
height: 8rem;
}
.collection_modal_body .input_border input,
.design_detail_modal_component .input_border input,
.library_page .input_border input,
.productImg_modal .input_border input {
.productImg_modal .input_border input,
.accountEdit_page .input_border input {
width: 100%;
border-radius: calc(0.5rem*1.2);
border: 1px solid rgba(0, 0, 0, 0.15);
@@ -1598,37 +1652,43 @@ textarea:focus {
.collection_modal_body .input_border inputinput:-moz-placeholder,
.design_detail_modal_component .input_border inputinput:-moz-placeholder,
.library_page .input_border inputinput:-moz-placeholder,
.productImg_modal .input_border inputinput:-moz-placeholder {
.productImg_modal .input_border inputinput:-moz-placeholder,
.accountEdit_page .input_border inputinput:-moz-placeholder {
color: rgba(0, 0, 0, 0.15);
}
.collection_modal_body .input_border inputinput:-ms-input-placeholder,
.design_detail_modal_component .input_border inputinput:-ms-input-placeholder,
.library_page .input_border inputinput:-ms-input-placeholder,
.productImg_modal .input_border inputinput:-ms-input-placeholder {
.productImg_modal .input_border inputinput:-ms-input-placeholder,
.accountEdit_page .input_border inputinput:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.15);
}
.collection_modal_body .input_border inputinput::-webkit-input-placeholder,
.design_detail_modal_component .input_border inputinput::-webkit-input-placeholder,
.library_page .input_border inputinput::-webkit-input-placeholder,
.productImg_modal .input_border inputinput::-webkit-input-placeholder {
.productImg_modal .input_border inputinput::-webkit-input-placeholder,
.accountEdit_page .input_border inputinput::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.15);
}
.collection_modal_body .input_border input.forbidden,
.design_detail_modal_component .input_border input.forbidden,
.library_page .input_border input.forbidden,
.productImg_modal .input_border input.forbidden {
.productImg_modal .input_border input.forbidden,
.accountEdit_page .input_border input.forbidden {
cursor: no-drop;
}
.collection_modal_body .input_border .input_box_btnBox_upImg,
.design_detail_modal_component .input_border .input_box_btnBox_upImg,
.library_page .input_border .input_box_btnBox_upImg,
.productImg_modal .input_border .input_box_btnBox_upImg {
.productImg_modal .input_border .input_box_btnBox_upImg,
.accountEdit_page .input_border .input_box_btnBox_upImg {
height: 100%;
}
.collection_modal_body .input_border .fi,
.design_detail_modal_component .input_border .fi,
.library_page .input_border .fi,
.productImg_modal .input_border .fi {
.productImg_modal .input_border .fi,
.accountEdit_page .input_border .fi {
margin-right: 1rem;
display: flex;
cursor: pointer;
@@ -1643,26 +1703,30 @@ textarea:focus {
.collection_modal_body .input_border .fi.fi-br-loading,
.design_detail_modal_component .input_border .fi.fi-br-loading,
.library_page .input_border .fi.fi-br-loading,
.productImg_modal .input_border .fi.fi-br-loading {
.productImg_modal .input_border .fi.fi-br-loading,
.accountEdit_page .input_border .fi.fi-br-loading {
height: 100%;
background-color: rgba(0, 0, 0, 0);
}
.collection_modal_body .input_border .fi.active,
.design_detail_modal_component .input_border .fi.active,
.library_page .input_border .fi.active,
.productImg_modal .input_border .fi.active {
.productImg_modal .input_border .fi.active,
.accountEdit_page .input_border .fi.active {
transform: rotate(180deg);
}
.collection_modal_body .input_border .fi.forbidden,
.design_detail_modal_component .input_border .fi.forbidden,
.library_page .input_border .fi.forbidden,
.productImg_modal .input_border .fi.forbidden {
.productImg_modal .input_border .fi.forbidden,
.accountEdit_page .input_border .fi.forbidden {
cursor: no-drop;
}
.collection_modal_body .input_border .search_upImg,
.design_detail_modal_component .input_border .search_upImg,
.library_page .input_border .search_upImg,
.productImg_modal .input_border .search_upImg {
.productImg_modal .input_border .search_upImg,
.accountEdit_page .input_border .search_upImg {
width: 4rem;
height: 100%;
position: absolute;
@@ -1672,14 +1736,16 @@ textarea:focus {
.collection_modal_body .input_border .search_upImg span,
.design_detail_modal_component .input_border .search_upImg span,
.library_page .input_border .search_upImg span,
.productImg_modal .input_border .search_upImg span {
.productImg_modal .input_border .search_upImg span,
.accountEdit_page .input_border .search_upImg span {
position: absolute;
width: 100%;
}
.collection_modal_body .input_border .search_upImg .ant-upload-select-picture-card,
.design_detail_modal_component .input_border .search_upImg .ant-upload-select-picture-card,
.library_page .input_border .search_upImg .ant-upload-select-picture-card,
.productImg_modal .input_border .search_upImg .ant-upload-select-picture-card {
.productImg_modal .input_border .search_upImg .ant-upload-select-picture-card,
.accountEdit_page .input_border .search_upImg .ant-upload-select-picture-card {
width: 100%;
height: 100%;
display: block !important;
@@ -1687,7 +1753,8 @@ textarea:focus {
.collection_modal_body .input_border .search_textarea,
.design_detail_modal_component .input_border .search_textarea,
.library_page .input_border .search_textarea,
.productImg_modal .input_border .search_textarea {
.productImg_modal .input_border .search_textarea,
.accountEdit_page .input_border .search_textarea {
z-index: 3;
height: auto;
position: absolute;
@@ -1702,20 +1769,23 @@ textarea:focus {
.collection_modal_body .input_border .generage_btn,
.design_detail_modal_component .input_border .generage_btn,
.library_page .input_border .generage_btn,
.productImg_modal .input_border .generage_btn {
.productImg_modal .input_border .generage_btn,
.accountEdit_page .input_border .generage_btn {
margin-left: 2rem;
}
.collection_modal_body .upload_item,
.design_detail_modal_component .upload_item,
.library_page .upload_item,
.productImg_modal .upload_item {
.productImg_modal .upload_item,
.accountEdit_page .upload_item {
display: flex;
flex-wrap: wrap;
}
.collection_modal_body .upload_item .upload_file_item,
.design_detail_modal_component .upload_item .upload_file_item,
.library_page .upload_item .upload_file_item,
.productImg_modal .upload_item .upload_file_item {
.productImg_modal .upload_item .upload_file_item,
.accountEdit_page .upload_item .upload_file_item {
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
display: inline-block;
width: calc(10rem*1.2);
@@ -1728,7 +1798,8 @@ textarea:focus {
.collection_modal_body .upload_item .upload_file_item.active,
.design_detail_modal_component .upload_item .upload_file_item.active,
.library_page .upload_item .upload_file_item.active,
.productImg_modal .upload_item .upload_file_item.active {
.productImg_modal .upload_item .upload_file_item.active,
.accountEdit_page .upload_item .upload_file_item.active {
opacity: 0.5;
border-radius: calc(1rem*1.2);
transform: scale(0.9);
@@ -1736,19 +1807,22 @@ textarea:focus {
.collection_modal_body .upload_item .upload_file_item.active .delete_file_block,
.design_detail_modal_component .upload_item .upload_file_item.active .delete_file_block,
.library_page .upload_item .upload_file_item.active .delete_file_block,
.productImg_modal .upload_item .upload_file_item.active .delete_file_block {
.productImg_modal .upload_item .upload_file_item.active .delete_file_block,
.accountEdit_page .upload_item .upload_file_item.active .delete_file_block {
pointer-events: none;
}
.collection_modal_body .upload_item .upload_file_item.active .operate_file_block,
.design_detail_modal_component .upload_item .upload_file_item.active .operate_file_block,
.library_page .upload_item .upload_file_item.active .operate_file_block,
.productImg_modal .upload_item .upload_file_item.active .operate_file_block {
.productImg_modal .upload_item .upload_file_item.active .operate_file_block,
.accountEdit_page .upload_item .upload_file_item.active .operate_file_block {
pointer-events: none;
}
.collection_modal_body .upload_item .upload_file_item.upload_component,
.design_detail_modal_component .upload_item .upload_file_item.upload_component,
.library_page .upload_item .upload_file_item.upload_component,
.productImg_modal .upload_item .upload_file_item.upload_component {
.productImg_modal .upload_item .upload_file_item.upload_component,
.accountEdit_page .upload_item .upload_file_item.upload_component {
border: none;
display: flex;
align-items: center;
@@ -1757,8 +1831,10 @@ textarea:focus {
.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
.design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
.library_page .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
.productImg_modal .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper) {
.productImg_modal .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper),
.accountEdit_page .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper) {
position: absolute;
width: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@@ -1766,7 +1842,8 @@ textarea:focus {
.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
.design_detail_modal_component .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
.library_page .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
.productImg_modal .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) {
.productImg_modal .upload_item .upload_file_item :deep(.ant-upload-select-picture-card),
.accountEdit_page .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) {
width: calc(6rem*1.2);
height: calc(6rem*1.2);
border: calc(0.3rem*1.2) solid #ededed;
@@ -1776,7 +1853,8 @@ textarea:focus {
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content,
.library_page .upload_item .upload_file_item .upload_file_item_content,
.productImg_modal .upload_item .upload_file_item .upload_file_item_content {
.productImg_modal .upload_item .upload_file_item .upload_file_item_content,
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content {
display: flex;
align-items: center;
justify-content: center;
@@ -1787,19 +1865,22 @@ textarea:focus {
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover div,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover div,
.library_page .upload_item .upload_file_item .upload_file_item_content:hover div,
.productImg_modal .upload_item .upload_file_item .upload_file_item_content:hover div {
.productImg_modal .upload_item .upload_file_item .upload_file_item_content:hover div,
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content:hover div {
opacity: 1;
}
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
.library_page .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
.productImg_modal .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block {
.productImg_modal .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block,
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block {
display: block;
}
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .upload_img,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .upload_img,
.library_page .upload_item .upload_file_item .upload_file_item_content .upload_img,
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .upload_img {
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .upload_img,
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .upload_img {
display: block;
height: 100%;
width: auto;
@@ -1809,7 +1890,8 @@ textarea:focus {
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block {
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block,
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block {
display: none;
width: 100%;
cursor: pointer;
@@ -1826,7 +1908,8 @@ textarea:focus {
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop {
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop,
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop {
width: calc(3.2rem*1.2);
height: calc(3.2rem*1.2);
background: rgba(0, 0, 0, 0.6);
@@ -1841,20 +1924,23 @@ textarea:focus {
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
.design_detail_modal_component .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
.library_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu {
.productImg_modal .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu,
.accountEdit_page .upload_item .upload_file_item .upload_file_item_content .delete_file_block.rightTop .icon-shanchu {
font-size: calc(1.6rem*1.2);
color: #fff;
}
.collection_modal_body .upload_item .upload_file_item .upload_img_icon,
.design_detail_modal_component .upload_item .upload_file_item .upload_img_icon,
.library_page .upload_item .upload_file_item .upload_img_icon,
.productImg_modal .upload_item .upload_file_item .upload_img_icon {
.productImg_modal .upload_item .upload_file_item .upload_img_icon,
.accountEdit_page .upload_item .upload_file_item .upload_img_icon {
width: calc(4.6rem*1.2);
}
.collection_modal_body .upload_item .upload_file_item:last-child,
.design_detail_modal_component .upload_item .upload_file_item:last-child,
.library_page .upload_item .upload_file_item:last-child,
.productImg_modal .upload_item .upload_file_item:last-child {
.productImg_modal .upload_item .upload_file_item:last-child,
.accountEdit_page .upload_item .upload_file_item:last-child {
margin: 0;
}
.generalModel_modal .ant-modal-content {

108
src/assets/style/style.less
View File

@@ -473,6 +473,9 @@ input:focus{
box-shadow: 0 0 0 2px rgba(83, 83, 83, 0.3);
border: 1px solid #d9d9d9;
}
.ant-picker-suffix{
display: flex;
}
.ant-picker-range .ant-picker-active-bar{
background: #353535;
}
@@ -1208,47 +1211,87 @@ input:focus{
position: relative;
display: flex;
flex-direction: column;
.admin_state_item{
margin-right: 2rem;
margin-bottom: 2rem;
display: flex;
align-items: center;
>span:nth-child(1){
font-size: 1.6rem;
font-weight: 400;
color: #030303;
margin-right: 15px;
flex-shrink: 0;
display: block;
// min-width: 20%;
width: 100px;
text-align: right;
}
>input{
padding: 4px 11px 4px;
line-height: 1.5715;
font-size: 14px;
}
.active{
cursor: no-drop;
background-color: #f5f5f5;
}
}
.admin_search_item{
background: #343579;
border-color: #343579;
height: 4rem;
padding: .64rem 1.5rem;
font-size: 1.6rem;
border-radius: 2px;
display: inline-block;
color: #fff;
cursor: pointer;
margin: 0 2rem 2rem 0;
}
.admin_search_item:last-child{
margin: 0;
}
.admin_table_search {
display: flex;
flex-wrap: wrap;
margin-top: 2rem;
padding: 2rem 3.5rem 5rem 2.8rem;
background: #fff;
display: flex;
justify-content: space-between;
.admin_search{
width: 40%;
.admin_search_item{
background: #343579;
border-color: #343579;
height: 4rem;
padding: .64rem 1.5rem;
font-size: 1.6rem;
border-radius: 2px;
display: inline-block;
color: #fff;
width: 20%;
}
.admin_state_list{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width: 100%;
margin-top: 2rem;
.admin_state_list_item{
cursor: pointer;
width: auto;
border-radius: 1rem;
padding: 1rem 2rem;
border: 1px solid #b6b6b6;
background: #39215b;
color: #fff;
margin: 0 2rem 2rem 0;
font-size: 1.8rem;
font-weight: 600;
}
.admin_state_list_item:last-child{
margin: 0;
}
}
.admin_state {
position: relative;
cursor: pointer;
width: 60%;
.admin_state_item{
margin-right: 2rem;
margin-bottom: 2rem;
display: flex;
align-items: center;
>span{
font-size: 1.6rem;
font-weight: 400;
color: #030303;
margin-right: 15px;
flex-shrink: 0;
display: block;
min-width: 13rem;
text-align: right;
}
}
width: 80%;
.admin_current{
background: #fff;
width: 100%;
@@ -1302,14 +1345,14 @@ input:focus{
}
}
.ant-table-thead > tr > th {
background: #ffffff00;
background: #ffffff;
border-bottom: none;
backdrop-filter: blur(1rem);
// backdrop-filter: blur(1rem);
}
.ant-table-tbody > tr > td {
border: none;
background: transparent;
background: #fff;
// color: #fff;
}
.operate_list{
@@ -1328,7 +1371,7 @@ input:focus{
}
.ant-table-tbody > tr {
&:hover > td {
background: #ffffff3a;
background: rgb(202, 202, 202)
}
}
.ant-table-pagination-right {
@@ -1530,7 +1573,7 @@ textarea:focus{
outline: none; /* 清除默认焦点样式 */
}
//设计input和上传按钮样式
.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_modal{
.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_modal,.accountEdit_page{
.input_border{
z-index: 2;
display: flex;
@@ -1758,6 +1801,7 @@ textarea:focus{
}
:deep(.ant-upload-picture-card-wrapper) {
position: absolute;
width: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

148
src/component/Account/account.vue Normal file
View File

@@ -0,0 +1,148 @@
<template>
<div class="account_page">
<div class="account_page_titleImg">
<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
</div>
<div class="account_page_content_box">
<div class="account_page_content">
<div class="account_page_content_left">
<div class="content_left_item">
<div>个人中心</div>
</div>
<!-- {{ router.path }} -->
<router-link class="content_left_item" v-for="item in rootSubmenuKeys" :class="{active: $route.path == item.route}" :to="item.route">
<i class="fi" :class="item.icon"></i>
<div>
{{item.name}}
</div>
</router-link>
<!-- <div class="content_left_item" v-for="item in rootSubmenuKeys" :class="{active: $route.path == item.route}">
<i class="fi" :class="item.icon"></i>
<router-link :to="item.route">
{{item.name}}
</router-link>
</div> -->
</div>
<div class="account_page_content_right">
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { useRouter,useRoute } from 'vue-router'
import { useStore } from "vuex";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
},
setup() {
const store = useStore();
let accountHomeData = reactive({
rootSubmenuKeys:[
{
name:'首页',
route:'/home/account/accountHome',
icon:'fi-rr-house-chimney'
},{
name:'我的信息',
route:'/home/account/accountEdit',
icon:'fi-rr-user'
},{
name:'消息中心',
route:'/home/account/accountMessage',
icon:'fi-rr-envelope'
},{
name:'粉丝&关注',
route:'/home/account/accountFollowFans',
icon:'fi-rr-envelope'
},
]
})
const router = useRouter()
// provide('exhibitionList',exhibitionList)
let handleClick = (event:any) => {
// state.selectedKeys = [Number(event.key)]
// state.nowPageName = event.item.name
router.push({path:event.item.route})
}
return{
...toRefs(accountHomeData),
router,
handleClick,
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.account_page{
height: 100%;
overflow-y: auto;
.account_page_titleImg{
img{
width: 100%;
height: 30rem;
object-fit: cover;
}
}
.account_page_content_box{
padding: 5rem 10rem;
.account_page_content{
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
border: 1px solid #e9eaec;
border-radius: 5px;
display: flex;
.account_page_content_left{
width: 20%;
text-align: center;
background: #fafafa;
border-right: 1px solid #e9eaec;
}
.account_page_content_right{
width: 80%;
}
.content_left_item{
display: flex;
align-items: center;
justify-content: center;
height: 10rem;
color: #232323;
div{
width: 15rem;
color: #232323;
text-align-last: justify;
font-size: 3rem;
}
i{
color: #cfcfcf;
font-size: 2.5rem;
display: flex;
margin-right: 2rem;
}
&.active{
color: #fff;
background: #39215b;
div{
color: #fff;
font-weight: 900;
}
i{
color: #fff;
}
}
}
}
}
}
</style>

203
src/component/Account/accountEdit.vue Normal file
View File

@@ -0,0 +1,203 @@
<template>
<div class="accountEdit_page">
<div class="accountEdit_page_head">
<div class="upload_item">
<div class="upload_file_item">
<a-upload
:action="uploadUrl + '/api/element/upload'"
:capture="null"
list-type="picture-card"
:before-upload="beforeUpload"
:headers="{Authorization:token}"
v-model:file-list="fileList"
:customRequest="function(){}"
:maxCount="1"
accept=".jpg,.png,.jpeg,.bmp"
@change="fileUploadChange"
>
<div
class="upload_tip_block"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
<img src="../../assets/images/homePage/alipay.svg" alt="">
</div>
<div class="accountEdit_page_body">
<div class="accountEdit_page_body_item">
<div class="accountEdit_page_body_item_name">昵称:</div>
<div class="accountEdit_page_body_item_inut">
<input type="text">
</div>
</div>
<div class="accountEdit_page_body_item">
<div class="accountEdit_page_body_item_name">用户名:</div>
<div class="accountEdit_page_body_item_inut">
<textarea style="max-height: 200px; min-height: 90px;"></textarea>
</div>
</div>
<div class="accountEdit_page_body_item">
<div class="accountEdit_page_body_item_name">我的签名:</div>
<div class="accountEdit_page_body_item_inut">
<input type="text">
</div>
</div>
<div class="accountEdit_page_body_item">
<div class="started_btn">
Submit
</div>
</div>
</div>
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isRound="true"></Cropper>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import Cropper from '@/component/HomePage/Cropper.vue'
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
Cropper,
},
setup() {
const store = useStore();
let accountHomeData = reactive({
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
uploadUrl:'',
token:'',
fileList:[]
})
let Cropper = ref()
// provide('exhibitionList',exhibitionList)
let handleCropperSuccess = (event:any)=>{
let {file, fileData} =event
console.log(file,fileData);
Cropper.value.closeCropper()
}
let beforeUpload=(file:any,fileList:any)=>{
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
if (!isJpgOrPng) {
message.info(useI18n().t('PrintboardUpload.jsContent1'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(useI18n().t('PrintboardUpload.jsContent2'));
}
if(isJpgOrPng && isLt2M){
// }else{
// return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
}
}
let fileUploadChange = (data:any)=>{
let file = data.file
// file.id = res.data.id?res.data.id:""
var reader = new FileReader();
reader.onload = (e:any) => {
let data_new;
if (typeof e.target.result === 'object') {
// 把Array Buffer转化为blob 如果是base64不需要
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
} else {
data_new = e.target.result;
}
Cropper.value.getOptionImg(data_new)
};
// 转化为base64
// reader.readAsDataURL(file)
// 转化为blob
reader.readAsArrayBuffer(file.originFileObj);
Cropper.value.changeShowModal(true)
}
let deletUploadFile = () => {
accountHomeData.fileList = []
// let index = -1
// this.fileList.forEach((ele:any,index1:any) => {
// if(this.cropperFileData.uid === ele.uid){
// index = index1
// }
// });
// if(index > -1){
// this.fileList.splice(index, 1)
// }
}
return{
...toRefs(accountHomeData),
Cropper,
handleCropperSuccess,
beforeUpload,
fileUploadChange,
deletUploadFile,
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.accountEdit_page{
padding: 8rem 5rem;
.accountEdit_page_head{
display: flex;
align-items: center;
justify-content: center;
width: 20rem;
margin: 0 auto;
position: relative;
img{
width: 20rem;
height: 20rem;
border-radius: 50%;
}
.accountEdit_page_head_upload{
width: auto;
}
.upload_item{
position: absolute;
left: 0;
transform: translateX(-100%);
}
margin-bottom: 5rem;
}
.accountEdit_page_body{
.accountEdit_page_body_item{
display: flex;
margin-bottom: 5rem;
width: 100%;
.started_btn{
text-align: center;
}
input,textarea{
padding-left: 2rem;
border-radius: 4px;
border: 1px solid #dcdfe6;
width: 100%;
}
.accountEdit_page_body_item_name{
color: #606266;
width: 14rem;
text-align: right;
}
.accountEdit_page_body_item_inut{
margin-left: 2rem;
flex: 1;
}
}
.accountEdit_page_body_item:last-child{
justify-content: center;
}
}
}
</style>

84
src/component/Account/accountFollowFans.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<div class="account_message">
<div class="account_message_title modal_title_text">
<div class="">
消息中心
</div>
<div class="account_message_title_setting">设置</div>
</div>
<a-tabs class="account_message_body" v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="系统消息">Content of Tab Pane 1</a-tab-pane>
<a-tab-pane key="2" tab="私信" force-render>Content of Tab Pane 2</a-tab-pane>
<a-tab-pane key="3" tab="评论">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="4" tab="点赞">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="5" tab="客服">Content of Tab Pane 3</a-tab-pane>
</a-tabs>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
import { Https } from "@/tool/https";
import { useRouter,useRoute } from 'vue-router'
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
},
setup() {
const router = useRouter()
const store = useStore();
let accountMessage = reactive({
activeKey: ref('1'),
})
// provide('exhibitionList',exhibitionList)
let setUserData = ()=>{
router.push({path:'/home/account/accountEdit'})
}
return{
...toRefs(accountMessage),
setUserData,
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.account_message{
width: 100%;
.account_message_title{
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 5rem;
border-bottom: 1px solid #e9eaec;
.account_message_title_setting{
cursor: pointer;
}
}
.account_message_body{
padding: 0rem 5rem;
:deep(.ant-tabs-nav){
.ant-tabs-nav-wrap{
.ant-tabs-tab-active{
.ant-tabs-tab-btn{
color: #39215b;
font-weight: 900;
}
}
}
.ant-tabs-tab:hover{
color: #39215b;
}
.ant-tabs-ink-bar{
background: #39215b;
}
}
}
}
</style>

213
src/component/Account/accountHome.vue Normal file
View File

@@ -0,0 +1,213 @@
<template>
<div class="account_home">
<div class="account_home_content">
<div class="content_item content_item_user">
<div class="content_item_user_left">
<div class="content_item_user_left_detail">
<img src="../../assets/images/homePage/alipay.svg" alt="">
</div>
<div class="content_item_user_left_detail">
<div class="modal_title_text">
<div>用户名</div>
<div class="modal_title_text_intro">个性签名</div>
<div class="modal_title_text_assistant">Credits: 2222</div>
</div>
<div class="content_item_user_left_detail_bottom">
<div>
<span>关注：</span>22
</div>
<div>
<span>粉丝：</span>22
</div>
</div>
</div>
</div>
<div class="content_item_user_right">
<div @click="setUserData">修改资料</div>
</div>
</div>
<div class="content_item content_item_task">
<div class="content_item_title">
<i>icon</i>
<div>每日奖励</div>
</div>
<div class="content_item_task_max">
<div class="content_item_task_item">
<div class="content_item_task_item_state">
<div class="state_credits">20 Credits</div>
<i class="fi fi-br-check"></i>
</div>
<div class="content_item_task_item_title">
每日点赞
</div>
<div class="content_item_task_item_award">
已完成 0 / 10
</div>
</div>
<div class="content_item_task_item active">
<div class="content_item_task_item_state">
<div class="state_credits">20 Credits</div>
<i class="fi fi-br-check"></i>
</div>
<div class="content_item_task_item_title">
每日发布作品
</div>
<div class="content_item_task_item_award">
20 Credits 到手
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
import { Https } from "@/tool/https";
import { useRouter,useRoute } from 'vue-router'
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
},
setup() {
const router = useRouter()
const store = useStore();
let accountHomeData = reactive({
})
// provide('exhibitionList',exhibitionList)
let setUserData = ()=>{
router.push({path:'/home/account/accountEdit'})
}
return{
...toRefs(accountHomeData),
setUserData,
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.account_home{
width: 100%;
.account_home_content{
.content_item{
padding: 8rem 5rem;
border-bottom: 1px solid #e9eaec;
.content_item_title{
display: flex;
align-items: center;
i{
margin-right: 1rem;
}
}
}
.content_item:last-child{
border-bottom: none;
}
.content_item_user{
display: flex;
justify-content: space-between;
align-items: center;
.content_item_user_left{
display: flex;
.content_item_user_left_detail{
img{
border-radius: 50%;
width: 10rem;
height: 10rem
}
.content_item_user_left_detail_bottom{
display: flex;
font-size: 1.8rem;
>div{
font-weight: 900;
width: 10rem;
span{
font-weight: 600;
color: rgba(0,0,0,.45);
}
}
}
}
.content_item_user_left_detail:last-child{
margin-left: 4rem;
}
}
.content_item_user_right{
border: 1px solid #e9eaec;
color: #6f767f;
font-size: 1.8rem;
cursor: pointer;
display: flex;
padding: 0 1rem;
border-radius: 4px;
}
}
.content_item_task{
.content_item_task_max{
display: flex;
margin-top: 4rem;
}
.content_item_task_item{
display: flex;
flex-direction: column;
align-items: center;
width: 25%;
.content_item_task_item_state{
width: 10rem;
height: 10rem;
background: linear-gradient(135deg, #cdacfc 50%, #a46ef0 50%) 00px 0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.state_credits{
font-size: 1.6rem;
font-weight: 900;
color: #fff;
}
i{
font-size: 3rem;
font-weight: 900;
display: none;
color: #fff;
}
}
.content_item_task_item_title{
margin: 2rem 0 ;
}
.content_item_task_item_award{
font-size: 1.8rem;
background: #fff;
border-radius: 4px;
padding: 0 1rem;
color: #99a2aa;
}
&.active{
.content_item_task_item_state{
background: linear-gradient(135deg, #4ddda8 50%, #3bcd98 50%) 00px 0;
.state_credits{
display: none;
}
i{
display: flex;
}
}
.content_item_task_item_award{
background: #8a95a8;
color: #fff;
}
}
}
}
}
}
</style>

107
src/component/Account/accountMessage.vue Normal file
View File

@@ -0,0 +1,107 @@
<template>
<div class="account_message">
<div class="account_message_title modal_title_text">
<div class="">
消息中心
</div>
<div class="account_message_title_setting">设置</div>
</div>
<a-tabs class="account_message_body" v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="系统消息">
<system ref="system"></system>
</a-tab-pane>
<a-tab-pane key="2" tab="私信" force-render>
<privateChat ref="privateChat"></privateChat>
</a-tab-pane>
<a-tab-pane key="3" tab="评论">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="4" tab="点赞">Content of Tab Pane 3</a-tab-pane>
<a-tab-pane key="6" tab="新增粉丝">
<newFollow ref="newFollow"></newFollow>
</a-tab-pane>
<a-tab-pane key="5" tab="客服">Content of Tab Pane 3</a-tab-pane>
</a-tabs>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
import { Https } from "@/tool/https";
import { useRouter,useRoute } from 'vue-router'
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import system from '@/component/Account/message/system.vue'
import privateChat from '@/component/Account/message/privateChat.vue'
import newFollow from '@/component/Account/message/newFollow.vue'
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
system,
privateChat,
newFollow,
},
setup() {
const router = useRouter()
const store = useStore();
let accountMessage = reactive({
activeKey: ref('1'),
})
// provide('exhibitionList',exhibitionList)
let setUserData = ()=>{
router.push({path:'/home/account/accountEdit'})
}
return{
...toRefs(accountMessage),
setUserData,
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.account_message{
width: 100%;
.account_message_title{
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 5rem;
border-bottom: 1px solid #e9eaec;
.account_message_title_setting{
cursor: pointer;
}
}
.account_message_body{
padding: 0rem 5rem;
:deep(.ant-tabs-nav){
.ant-tabs-nav-wrap{
.ant-tabs-tab-btn{
font-size: 2.4rem;
}
.ant-tabs-tab-btn:active{
color: #39215b;
}
.ant-tabs-tab-active{
.ant-tabs-tab-btn{
color: #39215b;
font-weight: 900;
}
}
}
.ant-tabs-tab:hover{
color: #39215b;
}
.ant-tabs-ink-bar{
background: #39215b;
}
}
:deep(.ant-tabs-content){
min-height: 80rem;
padding-bottom: 3rem;
}
}
}
</style>

104
src/component/Account/message/newFollow.vue Normal file
View File

@@ -0,0 +1,104 @@
<template>
<div class="account_systemMessage">
<div class="account_systemMessage_title modal_title_text">
系统消息
</div>
<div class="account_systemMessage_item modal_title_text">
<div class="account_systemMessage_item_title">
<div>Open Call for International Young Fashion Talent</div>
<div class="modal_title_text_intro">31 Aug 2024</div>
</div>
<div class="modal_title_text_intro">
10 selected young fashion talent will be mentored by the AiDA development team to learn and explore the possibilities of AiDA. Each selected young fashion talent will create a 4-outfit collection themed “Culture” with AiDA. They will receive full technical support and subsidies for the associated production fee. Selected International/ Mainland young talent will also be able to attend the Culture X AI Internation Fashion Show in Hong Kong that is scheduled on 11 March 2025.
<span class="account_systemMessage_item_link">网页链接</span>
</div>
</div>
<div></div>
<div></div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { useRouter,useRoute } from 'vue-router'
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
},
setup() {
const router = useRouter()
const store = useStore();
let accountMessage = reactive({
activeKey: ref('1'),
})
// let ws = new WebSocket('ws://127.0.0.1:3000')
// console.log(ws);
// ws.onopen = ()=>{
// console.log(222);
// let data = {
// cmd:4,
// data:{
// msg:'222'
// }
// }
// ws.send(JSON.stringify(data))
// // ws.onmessage = (data)=>{
// // console.log(data);
// // }
// }
// provide('exhibitionList',exhibitionList)
onMounted (()=>{
})
return{
...toRefs(accountMessage),
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.account_systemMessage{
width: 100%;
.account_systemMessage_title{
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 5rem;
border-bottom: 1px solid #e9eaec;
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
border: 1px solid #e9eaec;
border-radius: 5px;
.account_systemMessage_title_setting{
cursor: pointer;
}
}
.account_systemMessage_item{
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
border: 1px solid #e9eaec;
border-radius: 5px;
padding: 5rem 5rem;
.account_systemMessage_item_title{
display: flex;
align-items: center;
margin-bottom: 2rem;
.modal_title_text_intro{
margin-left: 4rem;
}
}
.account_systemMessage_item_link{
color: #39215b;
cursor: pointer;
font-weight: 600;
}
}
}
</style>

438
src/component/Account/message/privateChat.vue Normal file
View File

@@ -0,0 +1,438 @@
<template>
<div class="account_privateChatMessage">
<div class="account_privateChatMessage_title modal_title_text">
私信
</div>
<div class="account_privateChatMessage_content">
<div class="content_left">
<div class="content_left_item" v-for="item,index in privateChatList" :class="{active:item.active}" @click.stop="openPrivateChat(item,index)">
<div class="content_left_item_btn" @click.stop="deletePrivateChat(item,index)">
<i class="fi fi-rr-cross-small"></i>
</div>
<!-- <img :src="item.img" alt=""> -->
<img src="../../../assets/images/homePage/alipay.svg" alt="">
<div class="modal_title_text">
<div class="modal_title_text_assistant" :title="item.title">{{item.title}}</div>
<div class="modal_title_text_intro" :title="item.intro">{{item.intro}}</div>
</div>
</div>
</div>
<div class="content_right" v-if="currentPrivateChat >= 0">
<div class="content_right_top">
<div class="modal_title_text">
<div class="">{{ privateChat[currentPrivateChat]?.title }}</div>
</div>
</div>
<div class="content_right_record">
<div class="content_right_record_item" v-for="item in privateChat[currentPrivateChat]?.messageList">
<div v-if="item.type == 'time'" class="content_right_record_item_time">
{{ item.data }}
</div>
<div v-else class="content_right_record_item_content" :class="{active:item.type == 'user'}">
<div class="content_right_record_item_HeadImg">
<img src="../../../assets/images/homePage/alipay.svg" alt="">
</div>
<div class="content_right_record_item_text">
{{ item.data }}
</div>
</div>
</div>
</div>
<div class="content_right_send">
<div class="content_right_operation">
<div>icon</div>
<div>icon</div>
<div>icon</div>
</div>
<div class="content_right_input">
<textarea ref="textarea" v-if="privateChat[currentPrivateChat]?.title" v-model="privateChat[currentPrivateChat].temporary"></textarea>
</div>
<div class="content_right_btn modal_title_text">
<div class="content_right_btn_astrict modal_title_text_intro">
<span :style="{color:privateChat[currentPrivateChat]?.temporary.length>500?'red':''}">
{{privateChat[currentPrivateChat]?.temporary.length}}
</span>
/500</div>
<div class="content_right_btn_send started_btn" @click="sendCli">发送</div>
</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
<div class="content_right content_right_null" v-else>
您还未选中或者发起聊天，快去跟好友聊一聊吧
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { useRouter,useRoute } from 'vue-router'
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
},
setup() {
const router = useRouter()
const store = useStore();
let accountPrivateChat:any = reactive({
activeKey: ref('1'),
privateChatList:[
{
title:'AI Fashion Designer1',
intro:'333',
img:'../../../assets/images/homePage/alipay.svg',
active:false,
id:1,
},
{
title:'AI Fashion Designer2',
intro:'222',
img:'../../../assets/images/homePage/alipay.svg',
active:false,
id:2,
},
{
title:'AI Fashion Designer3',
intro:'111',
img:'../../../assets/images/homePage/alipay.svg',
active:false,
id:3,
}
],
currentPrivateChat:-1,
privateChat:{
1:{
title:'ABC',
temporary:'',
messageList:[
{
type:'time',
data:'2022-12-12 12:12:12'
},{
type:'opposite',
img:'../../../assets/images/homePage/alipay.svg',
data:'hello,'
},{
type:'user',
img:'../../../assets/images/homePage/alipay.svg',
data:'hello,'
},{
type:'user',
img:'../../../assets/images/homePage/alipay.svg',
data:'hello,'
},{
type:'time',
data:'2022-12-22 12:12:12'
},{
type:'user',
img:'../../../assets/images/homePage/alipay.svg',
data:'hello,'
},{
type:'user',
img:'../../../assets/images/homePage/alipay.svg',
data:'hello,'
},{
type:'user',
img:'../../../assets/images/homePage/alipay.svg',
data:'hello,'
},{
type:'user',
img:'../../../assets/images/homePage/alipay.svg',
data:'hello,'
},{
type:'user',
img:'../../../assets/images/homePage/alipay.svg',
data:'hello,'
},
]
}
},
})
let loadingShow = ref(false)
let textarea = ref()
// let ws = new WebSocket('ws://127.0.0.1:3000')
// console.log(ws);
// ws.onopen = ()=>{
// console.log(222);
// let data = {
// cmd:4,
// data:{
// msg:'222'
// }
// }
// ws.send(JSON.stringify(data))
// // ws.onmessage = (data)=>{
// // console.log(data);
// // }
// }
// provide('exhibitionList',exhibitionList)
let openPrivateChat = (data:any,index:number)=>{
accountPrivateChat.privateChatList.forEach((item:any)=>{
item.active = false
})
// accountPrivateChat.privateChat
accountPrivateChat.currentPrivateChat = data.id
data.active = true
getPrivateChat(data)
}
let deletePrivateChat = (data:any,index:number)=>{
if(data.active){
accountPrivateChat.privateChatList[0].active = true
getPrivateChat(data)
accountPrivateChat.currentPrivateChat = accountPrivateChat.privateChatList[0].id
}
accountPrivateChat.privateChatList.splice(index,1)
}
let getPrivateChat = async (data:any)=>{
if(!accountPrivateChat.privateChat[data.id]){
loadingShow.value = true
await new Promise((resolve:any, reject:any) => {
setTimeout(()=>{
accountPrivateChat.privateChat[data.id] = JSON.parse(JSON.stringify(accountPrivateChat.privateChat[1]))
loadingShow.value = false
resolve('')
},1000)
})
// Https.axiosGet(Https.httpUrls.accountBindEmail,{}).then((res:any)=>{
// console.log(res);
// })
}
nextTick(()=>{
if(textarea.value){
textarea.value.focus()
}
})
}
let sendCli = ()=>{
if(accountPrivateChat.privateChat[accountPrivateChat.currentPrivateChat]?.temporary.length>500){
return message.info('输入的内容超过最大限制')
}
}
onMounted (()=>{
})
return{
...toRefs(accountPrivateChat),
loadingShow,
textarea,
openPrivateChat,
deletePrivateChat,
sendCli,
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.account_privateChatMessage{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.account_privateChatMessage_title{
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 5rem;
border-bottom: 1px solid #e9eaec;
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
border: 1px solid #e9eaec;
border-radius: 5px;
.account_privateChatMessage_title_setting{
cursor: pointer;
}
}
.account_privateChatMessage_content{
flex: 1;
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
border: 1px solid #e9eaec;
border-radius: 5px;
display: flex;
.content_left{
width: 20%;
border-right: 1px solid #e9eaec;
height: 100%;
.content_left_item {
display: flex;
align-items: center;
padding: 2rem 2rem;
padding-left: 0;
border-bottom: 1px solid #e9eaec;
cursor: pointer;
overflow: hidden;
&.active{
background: #e4e5e6;
}
img{
width: 6rem;
height: 6rem;
border-radius: 50%;
margin-right: 2rem;
}
.modal_title_text{
width: calc(100% - 6rem - 2rem - 4rem);
margin-bottom: 0;
div{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.content_left_item_btn{
transform: translateX(-100%);
transition: all .3s;
i{
width: 4rem;
height: 4rem;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.content_left_item:hover{
background: #e4e5e6;
.content_left_item_btn{
transform: translateX(0%);
}
}
}
.content_right{
width: 80%;
display: flex;
flex-direction: column;
background: #f4f5f7;
position: relative;
.mark_loading{
position: absolute;
}
&.content_right_null{
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
color: #bec9d2;
font-weight: 900;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.content_right_top{
.modal_title_text{
margin: 0;
text-align: center;
background: #fff;
padding: 1.5rem 0
}
border-bottom: 1px solid #e9eaec;
}
.content_right_record{
flex: 1;
overflow-y: auto;
max-height: 38.5rem;
&.content_right_record::-webkit-scrollbar {
display: none;
}
.content_right_record_item{
display: flex;
margin: 2rem 0;
padding: 0 2rem;
.content_right_record_item_time{
width: 100%;
text-align: center;
}
.content_right_record_item_content{
display: flex;
width: 100%;
align-items: flex-start;
.content_right_record_item_HeadImg{
img{
width: 5rem;
height: 5rem;
border-radius: 50%;
margin-right: 2rem;
}
}
.content_right_record_item_text{
background: #fff;
padding: 1rem;
transform: translateY(1rem);
border-radius: 0 2rem 2rem 2rem;
}
&.active{
flex-direction: row-reverse;
.content_right_record_item_HeadImg{
margin-left: 2rem;
margin-right: 0rem;
}
.content_right_record_item_text{
border-radius: 2rem 0rem 2rem 2rem;
background: #39215b;
color: #fff;
}
}
}
}
}
.content_right_send{
border-top: 1px solid #e9eaec;
height: 20rem;
width: 100%;
padding: 1rem 2rem;
display: flex;
flex-direction: column;
.content_right_operation{
height: 4rem;
display: flex;
div{
margin-right: 1rem;
}
div:last-child{
margin-right: 0;
}
}
.content_right_input{
flex: 1;
textarea{
width: 100%;
border: none;
max-height: 100%;
min-height: 100%;
background: rgba(0, 0, 0, 0);
}
}
.content_right_btn{
display: flex;
margin: 0;
margin-left: auto;
margin-top: 1rem;
.content_right_btn_astrict{
margin-right: 2rem;
}
.content_right_btn_send{
}
}
}
}
}
}
</style>

104
src/component/Account/message/system.vue Normal file
View File

@@ -0,0 +1,104 @@
<template>
<div class="account_systemMessage">
<div class="account_systemMessage_title modal_title_text">
系统消息
</div>
<div class="account_systemMessage_item modal_title_text">
<div class="account_systemMessage_item_title">
<div>Open Call for International Young Fashion Talent</div>
<div class="modal_title_text_intro">31 Aug 2024</div>
</div>
<div class="modal_title_text_intro">
10 selected young fashion talent will be mentored by the AiDA development team to learn and explore the possibilities of AiDA. Each selected young fashion talent will create a 4-outfit collection themed “Culture” with AiDA. They will receive full technical support and subsidies for the associated production fee. Selected International/ Mainland young talent will also be able to attend the Culture X AI Internation Fashion Show in Hong Kong that is scheduled on 11 March 2025.
<span class="account_systemMessage_item_link">网页链接</span>
</div>
</div>
<div></div>
<div></div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { useRouter,useRoute } from 'vue-router'
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
},
setup() {
const router = useRouter()
const store = useStore();
let accountMessage = reactive({
activeKey: ref('1'),
})
// let ws = new WebSocket('ws://127.0.0.1:3000')
// console.log(ws);
// ws.onopen = ()=>{
// console.log(222);
// let data = {
// cmd:4,
// data:{
// msg:'222'
// }
// }
// ws.send(JSON.stringify(data))
// // ws.onmessage = (data)=>{
// // console.log(data);
// // }
// }
// provide('exhibitionList',exhibitionList)
onMounted (()=>{
})
return{
...toRefs(accountMessage),
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.account_systemMessage{
width: 100%;
.account_systemMessage_title{
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 5rem;
border-bottom: 1px solid #e9eaec;
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
border: 1px solid #e9eaec;
border-radius: 5px;
.account_systemMessage_title_setting{
cursor: pointer;
}
}
.account_systemMessage_item{
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
border: 1px solid #e9eaec;
border-radius: 5px;
padding: 5rem 5rem;
.account_systemMessage_item_title{
display: flex;
align-items: center;
margin-bottom: 2rem;
.modal_title_text_intro{
margin-left: 4rem;
}
}
.account_systemMessage_item_link{
color: #39215b;
cursor: pointer;
font-weight: 600;
}
}
}
</style>

26
src/component/Administrator/TestClickData.vue
View File

@@ -4,8 +4,9 @@
<div class="admin_state">
<div class="admin_state_item">
<span>State Time:</span>
<span>Start Date:</span>
<a-range-picker
style="width:280px"
class="range_picker"
v-model:value="rangePickerValue"
:placeholder="[
@@ -22,8 +23,8 @@
</a-range-picker>
</div>
<div class="admin_state_item">
<span>End Time:</span>
<a-time-range-picker class="range_picker" valueFormat="HH:mm:ss" v-model:value="rangeTimeValue" />
<span>Start Time:</span>
<a-time-range-picker style="width:280px" class="range_picker" valueFormat="HH:mm:ss" v-model:value="rangeTimeValue" />
</div>
</div>
@@ -177,24 +178,6 @@ export default defineComponent({
];
});
let state:any = ref([
{
name:'all',
value:'',
},
{
name:'unprocessed',
value:0,
},
{
name:'pending',
value:1,
},
{
name:'rejected',
value:2,
},
])
let dataList: any = ref([]);
let status: any = ref(0);
return {
@@ -204,7 +187,6 @@ export default defineComponent({
dataList,
renameData,
status,
state,
};
},
data() {

173
src/component/Administrator/administratorEcharts copy.vue
View File

@@ -1,173 +0,0 @@
<template>
<div class="adminEcharts admin_page">
<div class="admin_table_search">
</div>
<div class="allUser_table_content">
<div class="allUser_table_content_item">
<div>123123123</div>
<!-- <div class="allUser_table_content_item_canvas" id="echarts1"></div> -->
</div>
<div></div>
<div></div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed, onMounted } from "vue";
import { Https } from "@/tool/https";
import * as echarts from "echarts/core";
import {
TitleComponent,
ToolboxComponent,
TooltipComponent,
GridComponent,
LegendComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
export default defineComponent({
components: {},
setup() {
let rangePickerValue: any = ref([]);
let rangeTimeValue: any = ref([]);
let renameData: any = ref({}); //修改名字选中的数据
onMounted(() => {
echarts.use([
TitleComponent,
ToolboxComponent,
TooltipComponent,
GridComponent,
LegendComponent,
LineChart,
CanvasRenderer,
UniversalTransition,
]);
var chartDom = document.getElementById("echarts1");
console.log(chartDom);
var myChart = echarts.init(chartDom);
var option = {
title: {
text: "",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
legend: {
data: [
"新增用户数量",
"活跃用户数量",
"参加活动用户数量",
"Search Engine",
],
},
toolbox: {
feature: {
saveAsImage: {},
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "新增用户数量",
type: "line",
stack: "Total",
areaStyle: {},
emphasis: {
focus: "series",
},
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: "活跃用户数量",
type: "line",
stack: "Total",
areaStyle: {},
emphasis: {
focus: "series",
},
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: "参加活动用户数量",
type: "line",
stack: "Total",
areaStyle: {},
emphasis: {
focus: "series",
},
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: "Search Engine",
type: "line",
stack: "Total",
label: {
show: true,
position: "top",
},
areaStyle: {},
emphasis: {
focus: "series",
},
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
};
// option && myChart.setOption(option);
});
return {};
},
data() {
return {};
},
mounted() {},
methods: {},
});
</script>
<style lang="less" scoped>
.adminEcharts {
.allUser_table_content{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
.allUser_table_content_item{
width: 49%;
height: 49%;
.allUser_table_content_item_canvas{
width: 100%;
height: 100%;
}
}
}
}
</style>

591
src/component/Administrator/allUser.vue
View File

@@ -1,159 +1,510 @@
<template>
<div class="admin_page">
<div class="admin_table_search">
</div>
<div class="admin_table_search">
<div class="admin_state">
<div class="admin_state_item">
<span>Create Time:</span>
<a-range-picker
style="width: 250px"
class="range_picker"
v-model:value="rangePickerValue"
:placeholder="[
$t('HistoryPage.StartDate'),
$t('HistoryPage.EndDate'),
]"
valueFormat="YYYY-MM-DD"
>
<template #suffixIcon>
<span
class="icon iconfont range_picker_icon icon-rili"
></span>
</template>
</a-range-picker>
</div>
<!-- <div class="admin_state_item">
<span>Type:</span>
<a-select v-model:value="userType" size="large" style="width:250px" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
</div> -->
<div class="admin_state_item">
<span>Country:</span>
<a-select
v-model:value="country"
:allowClear="true"
show-search
style="width: 250px"
:filter-option="filterOption"
placeholder="Select Item..."
max-tag-count="responsive"
:options="allCountry"
></a-select>
</div>
<div class="admin_state_item">
<span>Email:</span>
<input
v-model="email"
placeholder="Please enter email"
@keydown.enter="gettrialList"
type="text"
style="width: 250px"
/>
</div>
<div class="admin_state_item">
<span>User Name:</span>
<a-select
v-model:value="ids"
mode="multiple"
style="width: 250px"
:filter-option="filterOption"
placeholder="Select Item..."
max-tag-count="responsive"
:options="allUserList"
@keydown.enter="gettrialList"
></a-select>
</div>
<div class="admin_state_item">
<span>User Type:</span>
<a-select
v-model:value="systemUser"
size="large"
style="width: 250px"
optionFilterProp="label"
:options="state"
placeholder="Please select"
allowClear
show-search
></a-select>
</div>
</div>
<div class="admin_search">
<div class="admin_search_item" @click="searchHistoryList">
Search
</div>
<div class="admin_search_item" @click="addhHistoryList">
Add
</div>
</div>
<div class="admin_state_list">
<div
class="admin_state_list_item"
@click="lastGeTrialList('year')"
>
Last year
</div>
<div
class="admin_state_list_item"
@click="lastGeTrialList('month')"
>
Last month
</div>
<div
class="admin_state_list_item"
@click="lastGeTrialList('week')"
>
Last week
</div>
</div>
</div>
<div class="admin_table_content" ref="historyTable">
<a-table
:columns="columns"
:data-source="dataList"
:scroll="{ y: historyTableHeight}"
@change="changePage"
@resizeColumn="handleResizeColumn"
:pagination="{
showSizeChanger: true,
current: currentPage,
pageSize: pageSize,
total: total,
showQuickJumper: true,
bordered: false,
}"
>
<!-- <template
#bodyCell="{ column, text, record, index }"
>
</template> -->
</a-table>
</div>
<div class="admin_table_content" ref="historyTable">
<a-table
@resizeColumn="handleResizeColumn"
:loading="tableLoading"
:columns="columns"
:data-source="dataList"
:scroll="{ y: historyTableHeight }"
@change="changePage"
:showSorterTooltip='false'
:pagination="{
showSizeChanger: true,
current: currentPage,
pageSize: pageSize,
total: total,
showQuickJumper: true,
bordered: false,
}"
>
<template #bodyCell="{ column, text, record, index }">
<div class="operate_list" v-if="column?.Operations">
<div
class="operate_item"
@click="setAagree(record)"
>
Edit
</div>
<!-- <div
class="operate_item"
@click="deleteGroup(record, index)"
>
Delete
</div> -->
</div>
</template>
</a-table>
</div>
<allUserPoerationsVue ref="allUserPoerationsVue" @searchHistoryList="searchHistoryList"></allUserPoerationsVue>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed } from "vue";
import {
defineComponent,
ref,
createVNode,
computed,
reactive,
toRefs,
onMounted,
} from "vue";
import { formatTime } from "@/tool/util";
import { Https } from "@/tool/https";
import type { TableColumnsType } from 'ant-design-vue';
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import allUserPoerationsVue from "./allUserPoerations.vue";
export default defineComponent({
components: {
},
components: {allUserPoerationsVue,},
setup() {
let filter: any = reactive({
dataList: [],
tableLoading: false,
allUserList: [],
allCountry:[]
});
let filterData: any = reactive({
rangePickerValue: [],
currentPage: 1,
pageSize: 10,
total: 0,
country: "",
email: "",
userType: "",
ids: [],
occupation: "",
systemUser: "",
order: "", //'Ascending 升序 Descending 降序'
orderBy:'',
userName: "",
});
let state: any = ref([
{
label: "all",
value: "",
},
{
label: "visitor",
value: "1",
},
{
label: "trial",
value: "2",
},
{
label: "official",
value: "3",
},
{
label: "userInEvent",
value: "4",
},
]);
let renameData: any = ref({}); //修改名字选中的数据
const columns: any = ref<TableColumnsType>([
const columns: any = computed(() => {
return [
{
title: 'Email',
title: "User Id",
align: "center",
ellipsis: true,
width: 50,
dataIndex: "email",
key: "email",
},
{
title: 'User Id',
align: "center",
width: 50,
dataIndex: "id",
key: "id",
},
{
title: 'User Name',
align: "center",
ellipsis: true,
width: 50,
dataIndex: "userName",
key: "userName",
},
{
title: 'Given Name',
align: "center",
ellipsis: true,
width: 50,
dataIndex: "givenName",
key: "givenName",
width:100,
fixed: "left",
sorter: true,
},
{
title: 'Create Time',
title: "Email",
align: "center",
width: 50,
dataIndex: "createTime",
key: "createTime",
dataIndex: "userEmail",
key: "userEmail",
width:200,
ellipsis:true
},
{
title: 'Title',
{
title: "User Name",
align: "center",
ellipsis: true,
width: 50,
//
dataIndex: "title",
key: "title",
dataIndex: "userName",
key: "userName",
width:150,
ellipsis:true
// customRender: (record: any) => {
// let time = formatTime(
// record.text / 1000,
// "YYYY-MM-DD hh:mm:ss"
// );
// return time;
// },
},
{
title: 'Country',
{
title: "language",
align: "center",
dataIndex: "language",
key: "language",
width:100,
ellipsis:true,
},
{
title: "Valid Start Time",
align: "center",
dataIndex: "validstartTime",
key: "validstartTime",
width:200,
ellipsis:true
},
{
title: "Valid End Time",
align: "center",
dataIndex: "validendTime",
key: "validendTime",
width:200,
ellipsis:true
},
{
title: "Country",
align: "center",
width: 50,
ellipsis: true,
dataIndex: "country",
key: "country",
width:100,
},
]
);
let dataList: any = ref([]);
let userInfo: any = {};
{
title: "Create Date",
align: "center",
dataIndex: "createDate",
key: "createDate",
width:200,
sorter: true,
},
{
title: "Is Beginner",
align: "center",
dataIndex: "isBeginner",
key: "isBeginner",
width:80,
ellipsis:true,
customRender: (record: any) => {
let str;
if (record.value == 1) {
str = "Yes";
} else {
str = "No";
}
return str;
},
},
{
title: 'Machine Room Ip',
align: "center",
dataIndex: "browserIdentifiers",
key: "browserIdentifiers",
width:200,
sorter: true,
},
{
title: "Credits",
align: "center",
// width: 150,
// minWidth: 100,
// maxWidth: 200,
// resizable: true,
dataIndex: "credits",
key: "credits",
width:100,
sorter: true,
},
{
title: 'User Type',
align: "center",
// width: 150,
// minWidth: 100,
// maxWidth: 200,
// resizable: true,
dataIndex: "systemUser",
key: "systemUser",
width:100,
customRender: (record: any) => {
let str;
if (record.value == 0) {
str = "visitor";
} else if (record.value == 1) {
str = "yearly";
} else if (record.value == 2) {
str = "monthly";
} else if (record.value == 3) {
str = "trial";
} else if (record.value == 4) {
str = "userInEvent";
}
return str;
},
},
{
title: "Operations",
key: "operation",
width:120,
align: "center",
fixed: "right",
// slots:{customRender:'action'}
Operations: true,
},
];
});
//改变页码
let changePage = (e: any, filters, sorter) => {
filterData.currentPage = e.current;
filterData.pageSize = e.pageSize;
if(sorter.order){
if(sorter.columnKey == 'id'){
filterData.orderBy = 'id'
}else if(sorter.columnKey == "createDate"){
filterData.orderBy = 'time'
}else if(sorter.columnKey == "credits"){
filterData.orderBy = 'credits'
}
}
filterData.order = sorter.order == "descend" ? "Descending" : "Ascending";
gettrialList();
};
//查询列表
let searchHistoryList = () => {
filterData.currentPage = 1;
gettrialList();
};
let clearHistoryList = () => {
filterData.rangePickerValue = [],
filterData.currentPage = 1,
filterData.pageSize = 10,
filterData.total = 0,
filterData.country = "",
filterData.email = "",
filterData.userType = "",
filterData.ids = [],
filterData.occupation = "",
filterData.order = "", //'Ascending 升序 Descending 降序'
filterData.orderBy = "", //'Ascending 升序 Descending 降序'
filterData.systemUser = "",
filterData.userName = "";
};
let setHistoryListData = () => {
let startDate: any = filterData.rangePickerValue?.[0]
? filterData.rangePickerValue[0] + " " + "00:00:00"
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1] + " " + "00:00:00"
: "";
let data = {
endTime: endDate,
startTime: startDate,
size: filterData.pageSize,
page: filterData.currentPage,
systemUser: filterData.systemUser,
country: filterData.country,
email: filterData.email,
userType: filterData.userType,
ids: filterData.ids,
occupation: filterData.occupation,
order: filterData.order,
orderBy: filterData.orderBy,
userName: filterData.userName,
};
return data;
};
//获取列表
let gettrialList = () => {
filter.tableLoading = true;
let data = setHistoryListData();
Https.axiosPost(Https.httpUrls.getUserInfo, data).then(
(rv: any) => {
if (rv) {
// this.dataList = rv
filter.dataList = rv.records;
filterData.total = rv.total;
filter.tableLoading = false;
// this.workspaceItem.position = this.singleTypeList[0].label
}
}
);
};
let lastGeTrialList = (str: string) => {
clearHistoryList();
let currentDate = new Date();
let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
// 计算30天前的时间戳
let thirtyDaysAgoTimestamp;
if (str == "year") {
thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60;
} else if (str == "month") {
thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60;
} else if (str == "week") {
thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60;
}
filterData.rangePickerValue[0] = formatTime(
thirtyDaysAgoTimestamp,
"YYYY-MM-DD"
);
gettrialList();
};
let filterOption = (input: any, option: any) => {
// 使用 option.label 进行搜索
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
let addhHistoryList = () => {
allUserPoerationsVue.value.init('Add','')
};
let allUserPoerationsVue = ref()
let setAagree = (data:any) =>{
allUserPoerationsVue.value.init('Edit',data)
}
onMounted(() => {
let allUserList: any = sessionStorage.getItem("allUserList");
if (allUserList) {
filter.allUserList = JSON.parse(allUserList);
}
let allCountry: any = sessionStorage.getItem("allCountry");
if (allCountry) {
filter.allCountry = JSON.parse(allCountry);
}
gettrialList();
});
return {
...toRefs(filter),
...toRefs(filterData),
state,
columns,
dataList,
renameData,
userInfo,
handleResizeColumn: (w:any, col:any) => {
col.width = w;
},
changePage,
searchHistoryList,
addhHistoryList,
lastGeTrialList,
gettrialList,
filterOption,
allUserPoerationsVue,
setAagree,
};
},
data() {
return {
currentPage: 1,
pageSize: 10,
total: 0,
historyTableHeight: 0,
newCollectionName: "",
renameVisivle: false, //修改名字弹窗
collectionName: "", //选中的名字
searchCollectionName: "",
handleResizeColumn: (w: any, col: any) => {
col.width = w;
},
};
},
mounted() {
let historyTable: any = this.$refs.historyTable;
this.historyTableHeight = historyTable.clientHeight - 200;
this.gettrialList();
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
},
methods: {
//改变页码
changePage(e: any) {
this.currentPage = e.current;
this.pageSize = e.pageSize;
// this.gettrialList();
},
//查询列表
searchHistoryList() {
this.currentPage = 1;
this.gettrialList();
},
//获取列表
gettrialList() {
Https.axiosGet(Https.httpUrls.inquiryGetTrial).then((rv)=>{
this.dataList = rv
})
},
},
methods: {},
});
</script>
</script>
<style lang="less" scoped>
.admin_page .admin_table_search .admin_state {
display: flex;
flex-wrap: wrap;
}
</style>

302
src/component/Administrator/allUserPoerations.vue Normal file
View File

@@ -0,0 +1,302 @@
<template>
<a-modal
class="allUserPoeration_modal generalModel"
v-model:visible="operationsModal"
:footer="null"
width="50%"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="false"
wrapClassName="#app"
:keyboard="false"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
</div>
</div>
<div class="modal_title_text">
<div>{{ title }} User</div>
</div>
<div class="allUserPoeration_center admin_page">
<div class="admin_state_item">
<span style="width: 100px;">User Name:</span>
<input
:readonly="title != 'Add'"
:class="{active:title != 'Add'}"
v-model="userName"
placeholder="Please enter user name"
type="text"
style="width: 250px"
/>
</div>
<div class="admin_state_item">
<span style="width: 100px;">User Email:</span>
<input
:readonly="title != 'Add'"
:class="{active:title != 'Add'}"
v-model="userEmail"
placeholder="Please enter email"
type="text"
style="width: 250px"
/>
</div>
<div class="admin_state_item">
<span style="width: 100px;">Create Time:</span>
<a-date-picker :disabled="title != 'Add'" style="width: 250px" valueFormat="YYYY-MM-DDTHH:mm:ss" class="range_picker" show-time placeholder="Create Time" v-model:value="validStartTime">
<template #suffixIcon>
<span
class="icon iconfont range_picker_icon icon-rili"
></span>
</template>
</a-date-picker>
</div>
<div class="admin_state_item">
<span style="width: 100px;">End Time:</span>
<a-date-picker style="width: 250px" valueFormat="YYYY-MM-DDTHH:mm:ss" class="range_picker" show-time placeholder="End Time" v-model:value="validEndTime">
<template #suffixIcon>
<span
class="icon iconfont range_picker_icon icon-rili"
></span>
</template>
</a-date-picker>
</div>
<div class="admin_state_item">
<span style="width: 100px;">User Type:</span>
<a-select
v-model:value="systemUser"
size="large"
style="width: 250px"
optionFilterProp="label"
:options="state"
placeholder="Please select"
allowClear
show-search
></a-select>
</div>
<div class="admin_state_item">
<span style="width: 100px;">Credits:</span>
<input
v-model="credits"
placeholder="Please enter credits"
type="text"
style="width: 250px"
/>
</div>
<div class="admin_state_item">
<span style="width: 100px;">Country:</span>
<input
:readonly="title != 'Add'"
:class="{active:title != 'Add'}"
v-model="country"
placeholder="Please enter country"
type="text"
style="width: 250px"
/>
</div>
</div>
<div class="allUserPoeration_btn admin_page">
<div class="admin_search_item" @click="cancelDsign">
Close
</div>
<div class="admin_search_item" @click="setOk">
OK
</div>
</div>
</a-modal>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { setCookie, getCookie } from "@/tool/cookie";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { formatTime } from "@/tool/util";
import allOrder from "@/component/Pay/allOrder.vue";
import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
creditsDetail,
allOrder,
},
emits: ['searchHistoryList'],
setup(props,{emit}) {
let operations = reactive({
operationsModal:false,
operationsEdit:false,
loadingShow:false,
title:''
})
let operationsData = reactive({
accountId:-1,
userName:'',
userEmail:'',
validStartTime:'',
validEndTime:'',
systemUser:'',
credits:'',
country:'',
})
let state = ref([
{
label:'visitor',
value:'0',
},
{
label:'yearly',
value:'1',
},
{
label:'monthly',
value:'2',
},
{
label:'trial',
value:'3',
},
]);
let init = (funStr,data)=>{
operations.operationsModal = true
operations.operationsEdit = true
operations.title = funStr
if(funStr == 'Add') operations.operationsEdit = false
if(funStr == 'Edit'){
let startTime = data.validStartTime?formatTime(data.validStartTime / 1000,"YYYY-MM-DDThh:mm:ss"):''
let endTime = data.validEndTime?formatTime(data.validEndTime / 1000,"YYYY-MM-DDThh:mm:ss"):''
operationsData.accountId=data.id
operationsData.userName=data.userName
operationsData.userEmail=data.userEmail
// operationsData.validStartTime='2024-08-05T00:00:06'
// operationsData.validEndTime='2024-08-05T00:00:06'
operationsData.validStartTime=startTime
operationsData.validEndTime=endTime
operationsData.systemUser=String(data.systemUser)
operationsData.credits=data.credits
operationsData.country=data.country
// operationsData.accountId = data.accountId
// operationsData.userName = data.userName
// operationsData.userEmail = data.userEmail
// operationsData.validStartTime = formatTime(data.validStartTime)
// operationsData.validEndTime = formatTime(data.validEndTime)
}
}
let setTime = (time) =>{
const date = new Date(time);
const timestamp = date.getTime(); // 转换为秒数
return timestamp
}
let setAddData = ()=>{
setTime(operationsData.validStartTime)
return {
"country": operationsData.country,
"credits": operationsData.credits,
"systemUser": operationsData.systemUser,
"userEmail": operationsData.userEmail,
"userName": operationsData.userName,
"validEndTime": setTime(operationsData.validEndTime),
"validStartTime": setTime(operationsData.validStartTime)
}
}
let setEditData = ()=>{
return {
"accountId": operationsData.accountId,
"credits": operationsData.credits,
"systemUser": operationsData.systemUser,
"validEndTime": setTime(operationsData.validEndTime),
}
}
let cancelDsign = ()=>{
operationsData.accountId=-1
operationsData.userName=''
operationsData.userEmail=''
operationsData.validStartTime=''
operationsData.validEndTime=''
operationsData.systemUser=''
operationsData.credits=''
operationsData.country=''
operations.operationsModal = false
}
let setOk = ()=>{
let data
if(operations.title == 'Add'){
data = setAddData()
Https.axiosPost(Https.httpUrls.adminAddUser, data).then(
(rv) => {
if (rv) {
cancelDsign()
emit('searchHistoryList')
}
}
);
}else{
data = setEditData()
Https.axiosPost(Https.httpUrls.modifyUser,{},{params:data}).then(
(rv) => {
if (rv) {
cancelDsign()
emit('searchHistoryList')
}
}
);
}
}
return {
...toRefs(operations),
...toRefs(operationsData),
state,
cancelDsign,
init,
setOk,
};
},
data() {
return {
};
},
mounted() {},
methods: {
},
});
</script>
<style lang="less">
.allUserPoeration_modal{
.ant-modal-body{
height: auto;
}
}
</style>
<style lang="less" scoped>
.allUserPoeration_modal {
.closeIcon {
z-index: 2;
}
.allUserPoeration_btn{
display: flex;
flex-direction: row;
height: auto;
justify-content: flex-end;
padding: 1rem 0;
.admin_search_item{
margin-bottom: 0;
}
}
.allUserPoeration_center{
height: 85%;
overflow-y: auto
}
}
</style>

228
src/component/Administrator/recentActiveChart.vue Normal file
View File

@@ -0,0 +1,228 @@
<template>
<div class="recentActiveChart admin_page">
<div class="admin_table_search">
<div class="admin_state">
<div class="admin_state_item">
<span>State Time:</span>
<a-range-picker
style="width:280px"
class="range_picker"
v-model:value="rangePickerValue"
:allowClear="false"
:placeholder="[
$t('HistoryPage.StartDate'),
$t('HistoryPage.EndDate'),
]"
valueFormat="YYYY-MM-DD"
>
<template #suffixIcon>
<span
class="icon iconfont range_picker_icon icon-rili"
></span>
</template>
</a-range-picker>
</div>
<div class="admin_state_item">
<span>User:</span>
<a-select
v-model:value="userIdList"
mode="multiple"
style="width: 280px"
:filter-option="filterOption"
placeholder="Select Item..."
max-tag-count="responsive"
:options="dataList"
></a-select>
</div>
</div>
<div class="admin_search">
<div class="admin_search_item" @click="searchHistoryList">Search</div>
</div>
<div class="admin_state_list">
<div class="admin_state_list_item" @click="lastGeTrialList('year')">Last year</div>
<div class="admin_state_list_item" @click="lastGeTrialList('month')">Last month</div>
<div class="admin_state_list_item" @click="lastGeTrialList('week')">Last week</div>
</div>
</div>
<div class="admin_table_content" ref="pageChartDom">
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed, reactive, toRefs, onMounted } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
export default defineComponent({
components: {
},
setup() {
let filter:any = reactive({
dataList:[],
})
let filterData:any = reactive({
rangePickerValue:[],
userIdList:[]
})
//查询列表
let searchHistoryList = ()=> {
gettrialList();
}
let getUserIDName = ()=>{
let allUserList:any = sessionStorage.getItem('allUserList');
if(allUserList){
filter.dataList = JSON.parse(allUserList)
}
// Https.axiosGet(Https.httpUrls.getAllUserId,).then((rv: any) => {
// if (rv) {
// let username = sessionStorage.getItem('allUserList');
// sessionStorage.setItem('allUserList',rv);
// filter.dataList = rv
// }
// })
}
//获取列表
let gettrialList = async () =>{
filter.tableLoading = true
let startDate: any = filterData.rangePickerValue?.[0]
? filterData.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1]+' '+'00:00:00'
: "";
let data = {
endTime:endDate,
startTime:startDate,
userIdList:filterData.userIdList.join(','),
}
Https.axiosGet(Https.httpUrls.getActiveUserFunc,{params:data}).then((rv: any) => {
if (rv) {
let data:any = []
rv.names.forEach((item:any,index:number) => {
let obj = {
name : item,
value:rv.values[index],
}
data.push(obj)
});
setEcharts(data)
// this.workspaceItem.position = this.singleTypeList[0].label
}
})
}
let myChart:any
let setEcharts = (data:any) =>{
if (myChart) {
myChart.setOption({
series: [{
data: data
}]
});
}else{
echarts.use([
TooltipComponent,
LegendComponent,
PieChart,
CanvasRenderer,
LabelLayout
]);
var chartDom = pageChartDom.value;
myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 30,
fontWeight: 'bold'
},
},
labelLine: {
show: false
},
stillShowZeroSum:true,
data: data
}
]
};
option && myChart.setOption(option);
}
}
let lastGeTrialList = (str:string)=>{
let currentDate = new Date();
let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
// 计算30天前的时间戳
let thirtyDaysAgoTimestamp
if(str == 'year'){
thirtyDaysAgoTimestamp = currentTimestamp - (360 * 24 * 60 * 60);
}else if(str == 'month'){
thirtyDaysAgoTimestamp = currentTimestamp - (30 * 24 * 60 * 60);
}else if(str == 'week'){
thirtyDaysAgoTimestamp = currentTimestamp - (7 * 24 * 60 * 60);
}
filterData.rangePickerValue[0] = formatTime(thirtyDaysAgoTimestamp,'YYYY-MM-DD')
filterData.rangePickerValue[1] = formatTime(currentTimestamp,'YYYY-MM-DD')
gettrialList();
}
let pageChartDom:any = ref()
let filterOption = (input:any, option:any)=>{
// 使用 option.label 进行搜索
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
}
onMounted(()=>{
lastGeTrialList('month')
getUserIDName()
})
return {
...toRefs(filter),
...toRefs(filterData),
searchHistoryList,
gettrialList,
pageChartDom,
lastGeTrialList,
filterOption,
};
},
data() {
return {
};
},
methods: {
},
});
</script>

303
src/component/Administrator/recentActiveUser.vue Normal file
View File

@@ -0,0 +1,303 @@
<template>
<div class="recentActiveChart admin_page">
<div class="admin_table_search">
<div class="admin_state">
<div class="admin_state_item">
<span>State Time:</span>
<a-range-picker
style="width:280px"
class="range_picker"
v-model:value="rangePickerValue"
:allowClear="false"
:placeholder="[
$t('HistoryPage.StartDate'),
$t('HistoryPage.EndDate'),
]"
valueFormat="YYYY-MM-DD"
>
<template #suffixIcon>
<span
class="icon iconfont range_picker_icon icon-rili"
></span>
</template>
</a-range-picker>
</div>
</div>
<div class="admin_search">
<div class="admin_search_item" @click="searchHistoryList">Search</div>
</div>
<div class="admin_state_list">
<div class="admin_state_list_item" @click="lastGeTrialList('year')">Last year</div>
<div class="admin_state_list_item" @click="lastGeTrialList('month')">Last month</div>
<div class="admin_state_list_item" @click="lastGeTrialList('week')">Last week</div>
</div>
</div>
<div class="admin_table_content" ref="historyTable">
<a-table
@resizeColumn="handleResizeColumn"
:loading="tableLoading"
:columns="columns"
:data-source="dataList"
:scroll="{ y: historyTableHeight }"
@change="changePage"
:pagination="{
showSizeChanger: true,
current: currentPage,
pageSize: pageSize,
total: total,
showQuickJumper: true,
bordered: false,
}"
>
</a-table>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed, reactive, toRefs, onMounted } from "vue";
import { formatTime } from "@/tool/util";
import { Https } from "@/tool/https";
export default defineComponent({
components: {
},
setup() {
let filter:any = reactive({
dataList:[],
tableLoading:false,
})
let filterData:any = reactive({
rangePickerValue:[],
currentPage: 1,
pageSize: 10,
total: 0,
})
let renameData: any = ref({}); //修改名字选中的数据
const columns: any = computed(() => {
return [
{
title: "User Id",
align: "center",
dataIndex: "id",
key: "id",
width:100,
fixed: "left",
sorter: true,
},
{
title: "Email",
align: "center",
dataIndex: "userEmail",
key: "userEmail",
width:200,
ellipsis:true
},
{
title: "User Name",
align: "center",
dataIndex: "userName",
key: "userName",
width:150,
ellipsis:true
// customRender: (record: any) => {
// let time = formatTime(
// record.text / 1000,
// "YYYY-MM-DD hh:mm:ss"
// );
// return time;
// },
},
{
title: "language",
align: "center",
dataIndex: "language",
key: "language",
width:100,
ellipsis:true,
},
{
title: "Valid Start Time",
align: "center",
dataIndex: "validstartTime",
key: "validstartTime",
width:200,
ellipsis:true
},
{
title: "Valid End Time",
align: "center",
dataIndex: "validendTime",
key: "validendTime",
width:200,
ellipsis:true
},
{
title: "Country",
align: "center",
dataIndex: "country",
key: "country",
width:100,
},
{
title: "Create Date",
align: "center",
dataIndex: "createDate",
key: "createDate",
width:200,
sorter: true,
},
{
title: "Is Beginner",
align: "center",
dataIndex: "isBeginner",
key: "isBeginner",
width:80,
ellipsis:true,
customRender: (record: any) => {
let str;
if (record.value == 1) {
str = "Yes";
} else {
str = "No";
}
return str;
},
},
{
title: 'Machine Room Ip',
align: "center",
dataIndex: "browserIdentifiers",
key: "browserIdentifiers",
width:200,
sorter: true,
},
{
title: "Credits",
align: "center",
// width: 150,
// minWidth: 100,
// maxWidth: 200,
// resizable: true,
dataIndex: "credits",
key: "credits",
width:100,
sorter: true,
},
{
title: 'User Type',
align: "center",
// width: 150,
// minWidth: 100,
// maxWidth: 200,
// resizable: true,
dataIndex: "systemUser",
key: "systemUser",
width:100,
customRender: (record: any) => {
let str;
if (record.value == 0) {
str = "visitor";
} else if (record.value == 1) {
str = "yearly";
} else if (record.value == 2) {
str = "monthly";
} else if (record.value == 3) {
str = "trial";
} else if (record.value == 4) {
str = "userInEvent";
}
return str;
},
},
];
});
//改变页码
let changePage = (e: any) => {
filterData.currentPage = e.current;
filterData.pageSize = e.pageSize;
// gettrialList();
}
//查询列表
let searchHistoryList = ()=> {
filterData.currentPage = 1;
gettrialList();
}
//获取列表
let gettrialList = () =>{
filter.tableLoading = true
let startDate: any = filterData.rangePickerValue?.[0]
? filterData.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1]+' '+'00:00:00'
: "";
let data = {
endTime:endDate,
startTime:startDate,
size:filterData.pageSize,
page:filterData.currentPage,
}
Https.axiosGet(Https.httpUrls.recentActiveUser,{params:data}).then((rv: any) => {
if (rv) {
// this.dataList = rv
filter.dataList = rv.records
console.log(rv);
filterData.total = rv.total
filter.tableLoading = false
// this.workspaceItem.position = this.singleTypeList[0].label
}
})
}
let lastGeTrialList = (str:string)=>{
let currentDate = new Date();
let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
// 计算30天前的时间戳
let thirtyDaysAgoTimestamp
if(str == 'year'){
thirtyDaysAgoTimestamp = currentTimestamp - (360 * 24 * 60 * 60);
}else if(str == 'month'){
thirtyDaysAgoTimestamp = currentTimestamp - (30 * 24 * 60 * 60);
}else if(str == 'week'){
thirtyDaysAgoTimestamp = currentTimestamp - (7 * 24 * 60 * 60);
}
filterData.rangePickerValue[0] = formatTime(thirtyDaysAgoTimestamp,'YYYY-MM-DD')
filterData.rangePickerValue[1] = formatTime(currentTimestamp,'YYYY-MM-DD')
gettrialList();
}
onMounted(()=>{
lastGeTrialList('month')
})
return {
...toRefs(filter),
...toRefs(filterData),
columns,
renameData,
changePage,
searchHistoryList,
lastGeTrialList,
gettrialList,
};
},
data() {
return {
historyTableHeight: 0,
handleResizeColumn: (w:any, col:any) => {
col.width = w;
},
};
},
mounted() {
let historyTable: any = this.$refs.historyTable;
this.historyTableHeight = historyTable.clientHeight - 200;
},
methods: {
},
});
</script>

196
src/component/Administrator/recentActiveUserChart.vue Normal file
View File

@@ -0,0 +1,196 @@
<template>
<div class="recentActiveChart admin_page">
<div class="admin_table_search">
<div class="admin_state">
<div class="admin_state_item">
<span>State Time:</span>
<a-range-picker
style="width:280px"
class="range_picker"
v-model:value="rangePickerValue"
:allowClear="false"
:placeholder="[
$t('HistoryPage.StartDate'),
$t('HistoryPage.EndDate'),
]"
valueFormat="YYYY-MM-DD"
>
<template #suffixIcon>
<span
class="icon iconfont range_picker_icon icon-rili"
></span>
</template>
</a-range-picker>
</div>
</div>
<div class="admin_search">
<div class="admin_search_item" @click="searchHistoryList">Search</div>
</div>
<div class="admin_state_list">
<div class="admin_state_list_item" @click="lastGeTrialList('year')">Last year</div>
<div class="admin_state_list_item" @click="lastGeTrialList('month')">Last month</div>
<div class="admin_state_list_item" @click="lastGeTrialList('week')">Last week</div>
</div>
</div>
<div class="admin_table_content" ref="pageChartDom">
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed, reactive, toRefs, onMounted } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
export default defineComponent({
components: {
},
setup() {
let filter:any = reactive({
dataList:{},
})
let filterData:any = reactive({
rangePickerValue:[],
})
//查询列表
let searchHistoryList = ()=> {
gettrialList();
}
//获取列表
let gettrialList = async () =>{
filter.tableLoading = true
let startDate: any = filterData.rangePickerValue?.[0]
? filterData.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1]+' '+'00:00:00'
: "";
let data = {
endTime:endDate,
startTime:startDate,
}
Https.axiosGet(Https.httpUrls.recentActiveUserChart,{params:data}).then((rv: any) => {
if (rv) {
let data:any = []
rv.names.forEach((item:any,index:number) => {
let obj = {
name : item,
value:rv.values[index],
}
data.push(obj)
});
filter.dataList = data
setEcharts(data)
// this.workspaceItem.position = this.singleTypeList[0].label
}
})
}
let myChart:any
let setEcharts = (data:any) =>{
if (myChart) {
myChart.setOption({
series: [{
data: data
}]
});
}else{
echarts.use([
TooltipComponent,
LegendComponent,
PieChart,
CanvasRenderer,
LabelLayout
]);
var chartDom = pageChartDom.value;
myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 30,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
stillShowZeroSum:true,
data: data
}
]
};
option && myChart.setOption(option);
}
}
let lastGeTrialList = (str:string)=>{
let currentDate = new Date();
let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
// 计算30天前的时间戳
let thirtyDaysAgoTimestamp
if(str == 'year'){
thirtyDaysAgoTimestamp = currentTimestamp - (360 * 24 * 60 * 60);
}else if(str == 'month'){
thirtyDaysAgoTimestamp = currentTimestamp - (30 * 24 * 60 * 60);
}else if(str == 'week'){
thirtyDaysAgoTimestamp = currentTimestamp - (7 * 24 * 60 * 60);
}
filterData.rangePickerValue[0] = formatTime(thirtyDaysAgoTimestamp,'YYYY-MM-DD')
filterData.rangePickerValue[1] = formatTime(currentTimestamp,'YYYY-MM-DD')
gettrialList();
}
let pageChartDom:any = ref()
onMounted(()=>{
lastGeTrialList('month')
})
return {
...toRefs(filter),
...toRefs(filterData),
searchHistoryList,
gettrialList,
pageChartDom,
lastGeTrialList,
};
},
data() {
return {
};
},
methods: {
},
});
</script>

321
src/component/Administrator/recentNewUser.vue Normal file
View File

@@ -0,0 +1,321 @@
<template>
<div class="recentNewUser admin_page">
<div class="admin_table_search">
<div class="admin_state">
<div class="admin_state_item">
<span>State Time:</span>
<a-range-picker
style="width:280px"
class="range_picker"
v-model:value="rangePickerValue"
:allowClear="false"
:placeholder="[
$t('HistoryPage.StartDate'),
$t('HistoryPage.EndDate'),
]"
valueFormat="YYYY-MM-DD"
>
<template #suffixIcon>
<span
class="icon iconfont range_picker_icon icon-rili"
></span>
</template>
</a-range-picker>
</div>
<div class="admin_state_item">
<span>Type:</span>
<a-select v-model:value="userType" size="large" style="width:280px" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
</div>
</div>
<div class="admin_search">
<div class="admin_search_item" @click="searchHistoryList">Search</div>
</div>
<div class="admin_state_list">
<div class="admin_state_list_item" @click="lastGeTrialList('year')">Last year</div>
<div class="admin_state_list_item" @click="lastGeTrialList('month')">Last month</div>
<div class="admin_state_list_item" @click="lastGeTrialList('week')">Last week</div>
</div>
</div>
<div class="admin_table_content" ref="historyTable">
<a-table
@resizeColumn="handleResizeColumn"
:loading="tableLoading"
:columns="columns"
:data-source="dataList"
:scroll="{ y: historyTableHeight }"
@change="changePage"
:pagination="{
showSizeChanger: true,
current: currentPage,
pageSize: pageSize,
total: total,
showQuickJumper: true,
bordered: false,
}"
>
</a-table>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed, reactive, toRefs, onMounted } from "vue";
import { formatTime } from "@/tool/util";
import { Https } from "@/tool/https";
export default defineComponent({
components: {
},
setup() {
let filter:any = reactive({
dataList:[],
tableLoading:false,
})
let filterData:any = reactive({
rangePickerValue:[],
currentPage: 1,
pageSize: 10,
total: 0,
userType:'',
})
let state:any = ref([
{
label:'all',
value:'',
},
{
label:'visitor',
value:'0',
},
{
label:'yearly',
value:'1',
},
{
label:'monthly',
value:'2',
},
{
label:'trial',
value:'3',
},
])
let renameData: any = ref({}); //修改名字选中的数据
const columns: any = computed(() => {
return [
{
title: 'User Id',
align: "center",
ellipsis: true,
dataIndex: "id",
key: "id",
fixed: 'left'
},
{
title: 'Email',
align: "center",
ellipsis: true,
dataIndex: "userEmail",
key: "userEmail",
},
{
title: 'User Name',
align: "center",
ellipsis: 200,
dataIndex: "userName",
key: "userName",
// customRender: (record: any) => {
// let time = formatTime(
// record.text / 1000,
// "YYYY-MM-DD hh:mm:ss"
// );
// return time;
// },
},
{
title: 'language',
align: "center",
ellipsis: true,
dataIndex: "language",
key: "language",
},
{
title: 'Valid Start Time',
align: "center",
ellipsis: true,
dataIndex: "validstartTime",
key: "validstartTime",
},
{
title: 'Valid End Time',
align: "center",
ellipsis: true,
dataIndex: "validendTime",
key: "validendTime",
},
{
title: 'Country',
align: "center",
ellipsis: true,
dataIndex: "country",
key: "country",
},
{
title: 'Create Date',
align: "center",
ellipsis: true,
dataIndex: "createDate",
key: "createDate",
},
{
title: 'Is Beginner',
align: "center",
ellipsis: true,
dataIndex: "isBeginner",
key: "isBeginner",
customRender: (record: any) => {
let str
if(record.value == 1){
str ='Yes'
}else{
str ='No'
}
return str;
},
},
{
title: 'Machine Room Ip',
align: "center",
ellipsis: true,
dataIndex: "browserIdentifiers",
key: "browserIdentifiers",
},
{
title: 'Credits',
align: "center",
ellipsis: true,
// width: 150,
// minWidth: 100,
// maxWidth: 200,
// resizable: true,
dataIndex: "credits",
key: "credits",
},
{
title: 'User Type',
align: "center",
ellipsis: true,
// width: 150,
// minWidth: 100,
// maxWidth: 200,
// resizable: true,
dataIndex: "systemUser",
key: "systemUser",
customRender: (record: any) => {
let str
if(record.value == 0){
str ='visitor'
}else if(record.value == 1){
str ='yearly'
}else if(record.value == 2){
str ='monthly'
}else if(record.value == 3){
str ='trial'
}else if(record.value == 4){
str ='userInEvent'
}
return str;
},
},
];
});
//改变页码
let changePage = (e: any) => {
filterData.currentPage = e.current;
filterData.pageSize = e.pageSize;
// gettrialList();
}
//查询列表
let searchHistoryList = ()=> {
filterData.currentPage = 1;
gettrialList();
}
//获取列表
let gettrialList = () =>{
filter.tableLoading = true
let startDate: any = filterData.rangePickerValue?.[0]
? filterData.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1]+' '+'00:00:00'
: "";
let data = {
endTime:endDate,
startTime:startDate,
size:filterData.pageSize,
page:filterData.currentPage,
userType:filterData.userType,
}
Https.axiosGet(Https.httpUrls.recentNewUser,{params:data}).then((rv: any) => {
if (rv) {
// this.dataList = rv
filter.dataList = rv.records
filterData.total = rv.total
filter.tableLoading = false
// this.workspaceItem.position = this.singleTypeList[0].label
}
})
}
let lastGeTrialList = (str:string)=>{
let currentDate = new Date();
let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
// 计算30天前的时间戳
let thirtyDaysAgoTimestamp
if(str == 'year'){
thirtyDaysAgoTimestamp = currentTimestamp - (360 * 24 * 60 * 60);
}else if(str == 'month'){
thirtyDaysAgoTimestamp = currentTimestamp - (30 * 24 * 60 * 60);
}else if(str == 'week'){
thirtyDaysAgoTimestamp = currentTimestamp - (7 * 24 * 60 * 60);
}
filterData.rangePickerValue[0] = formatTime(thirtyDaysAgoTimestamp,'YYYY-MM-DD')
filterData.rangePickerValue[1] = formatTime(currentTimestamp,'YYYY-MM-DD')
gettrialList();
}
onMounted(()=>{
lastGeTrialList('month')
})
return {
...toRefs(filter),
...toRefs(filterData),
state,
columns,
renameData,
changePage,
searchHistoryList,
lastGeTrialList,
gettrialList,
};
},
data() {
return {
historyTableHeight: 0,
handleResizeColumn: (w:any, col:any) => {
col.width = w;
},
};
},
mounted() {
let historyTable: any = this.$refs.historyTable;
this.historyTableHeight = historyTable.clientHeight - 200;
},
methods: {
},
});
</script>

224
src/component/Administrator/recentNewUserChart.vue Normal file
View File

@@ -0,0 +1,224 @@
<template>
<div class="recentNewUserChart admin_page">
<div class="admin_table_search">
<div class="admin_state">
<div class="admin_state_item">
<span>State Time:</span>
<a-range-picker
style="width:280px"
class="range_picker"
v-model:value="rangePickerValue"
:allowClear="false"
:placeholder="[
$t('HistoryPage.StartDate'),
$t('HistoryPage.EndDate'),
]"
valueFormat="YYYY-MM-DD"
>
<template #suffixIcon>
<span
class="icon iconfont range_picker_icon icon-rili"
></span>
</template>
</a-range-picker>
</div>
<div class="admin_state_item">
<span>Type:</span>
<a-select v-model:value="userType" size="large" style="width:280px" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
</div>
</div>
<div class="admin_search">
<div class="admin_search_item" @click="searchHistoryList">Search</div>
</div>
<div class="admin_state_list">
<div class="admin_state_list_item" @click="lastGeTrialList('year')">Last year</div>
<div class="admin_state_list_item" @click="lastGeTrialList('month')">Last month</div>
<div class="admin_state_list_item" @click="lastGeTrialList('week')">Last week</div>
</div>
</div>
<div class="admin_table_content" ref="pageChartDom">
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed, reactive, toRefs, onMounted } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
export default defineComponent({
components: {
},
setup() {
let filter:any = reactive({
dataList:{},
})
let filterData:any = reactive({
rangePickerValue:[],
userType:''
})
let state:any = ref([
{
label:'all',
value:'',
},
{
label:'visitor',
value:'0',
},
{
label:'yearly',
value:'1',
},
{
label:'monthly',
value:'2',
},
{
label:'trial',
value:'3',
},
])
//查询列表
let searchHistoryList = ()=> {
gettrialList();
}
//获取列表
let gettrialList = async () =>{
filter.tableLoading = true
let startDate: any = filterData.rangePickerValue?.[0]
? filterData.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1]+' '+'00:00:00'
: "";
let data = {
endTime:endDate,
startTime:startDate,
userType:filterData.userType
}
Https.axiosGet(Https.httpUrls.recentNewUserChart,{params:data}).then((rv: any) => {
if (rv) {
let data:any = []
rv.names.forEach((item:any,index:number) => {
let obj = {
name : item,
value:rv.values[index],
}
data.push(obj)
});
filter.dataList = data
setEcharts(data)
// this.workspaceItem.position = this.singleTypeList[0].label
}
})
}
let myChart:any
let setEcharts = (data:any) =>{
if (myChart) {
myChart.setOption({
series: [{
data: data
}]
});
}else{
echarts.use([
TooltipComponent,
LegendComponent,
PieChart,
CanvasRenderer,
LabelLayout
]);
var chartDom = pageChartDom.value;
myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center',
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 30,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
stillShowZeroSum:true,
data: data
}
]
};
option && myChart.setOption(option);
}
}
let lastGeTrialList = (str:string)=>{
let currentDate = new Date();
let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
// 计算30天前的时间戳
let thirtyDaysAgoTimestamp
if(str == 'year'){
thirtyDaysAgoTimestamp = currentTimestamp - (360 * 24 * 60 * 60);
}else if(str == 'month'){
thirtyDaysAgoTimestamp = currentTimestamp - (30 * 24 * 60 * 60);
}else if(str == 'week'){
thirtyDaysAgoTimestamp = currentTimestamp - (7 * 24 * 60 * 60);
}
filterData.rangePickerValue[0] = formatTime(thirtyDaysAgoTimestamp,'YYYY-MM-DD')
filterData.rangePickerValue[1] = formatTime(currentTimestamp,'YYYY-MM-DD')
gettrialList();
}
let pageChartDom:any = ref()
onMounted(()=>{
lastGeTrialList('month')
})
return {
...toRefs(filter),
...toRefs(filterData),
state,
searchHistoryList,
gettrialList,
pageChartDom,
lastGeTrialList,
};
},
data() {
return {
};
},
methods: {
},
});
</script>

242
src/component/Administrator/trialAllUser.vue Normal file
View File

@@ -0,0 +1,242 @@
<template>
<div class="admin_page">
<div class="admin_table_search">
<div class="admin_state">
<div class="admin_state_item">
<span>State Time:</span>
<a-range-picker
style="width:280px"
class="range_picker"
v-model:value="rangePickerValue"
:allowClear="false"
:placeholder="[
$t('HistoryPage.StartDate'),
$t('HistoryPage.EndDate'),
]"
valueFormat="YYYY-MM-DD"
>
<template #suffixIcon>
<span
class="icon iconfont range_picker_icon icon-rili"
></span>
</template>
</a-range-picker>
</div>
</div>
<div class="admin_search">
<div class="admin_search_item" @click="searchHistoryList">Search</div>
</div>
<div class="admin_state_list">
<div class="admin_state_list_item" @click="lastGeTrialList('year')">Last year</div>
<div class="admin_state_list_item" @click="lastGeTrialList('month')">Last month</div>
<div class="admin_state_list_item" @click="lastGeTrialList('week')">Last week</div>
</div>
</div>
<div class="admin_table_content" ref="historyTable">
<a-table
@resizeColumn="handleResizeColumn"
:loading="tableLoading"
:columns="columns"
:data-source="dataList"
:scroll="{ y: historyTableHeight }"
@change="changePage"
:showSorterTooltip='false'
:pagination="{
showSizeChanger: true,
current: currentPage,
pageSize: pageSize,
total: total,
showQuickJumper: true,
bordered: false,
}"
>
</a-table>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed, reactive, toRefs, onMounted } from "vue";
import { formatTime } from "@/tool/util";
import { Https } from "@/tool/https";
export default defineComponent({
components: {
},
setup() {
let filter:any = reactive({
dataList:[],
tableLoading:false,
})
let filterData:any = reactive({
rangePickerValue:[],
currentPage: 1,
pageSize: 10,
total: 0,
order: "", //'Ascending 升序 Descending 降序'
orderBy:'',
})
let renameData: any = ref({}); //修改名字选中的数据
const columns: any = computed(() => {
return [
{
title: 'User Id',
align: "center",
width: 100,
fixed: "left",
sorter: true,
dataIndex: "id",
key: "id",
},
{
title: 'User Name',
align: "center",
ellipsis: true,
width: 150,
dataIndex: "userName",
key: "userName",
},
{
title: 'Email',
align: "center",
ellipsis: true,
width: 200,
dataIndex: "email",
key: "email",
},
{
title: 'Given Name',
align: "center",
ellipsis: true,
width: 100,
dataIndex: "givenName",
key: "givenName",
},
{
title: 'Create Date',
align: "center",
width: 200,
ellipsis:true,
dataIndex: "createTime",
key: "createTime",
sorter: true,
},
{
title: 'Title',
align: "center",
ellipsis: true,
width: 100,
//
dataIndex: "title",
key: "title",
},
{
title: 'Country',
align: "center",
width: 100,
ellipsis: true,
dataIndex: "country",
key: "country",
},
];
});
//改变页码
let changePage = (e: any, filters, sorter) => {
filterData.currentPage = e.current;
filterData.pageSize = e.pageSize;
if(sorter.order){
if(sorter.columnKey == 'id'){
filterData.orderBy = 'id'
}else if(sorter.columnKey == "createDate"){
filterData.orderBy = 'time'
}
}
filterData.order = sorter.order == "descend" ? "Descending" : "Ascending";
gettrialList();
}
//查询列表
let searchHistoryList = ()=> {
filterData.currentPage = 1;
gettrialList();
}
//获取列表
let gettrialList = () =>{
filter.tableLoading = true
let startDate: any = filterData.rangePickerValue?.[0]
? filterData.rangePickerValue[0]+' '+'00:00:00'
: "";
let endDate: any = filterData.rangePickerValue?.[1]
? filterData.rangePickerValue[1]+' '+'00:00:00'
: "";
let data = {
endTime:endDate,
startTime:startDate,
size:filterData.pageSize,
page:filterData.currentPage,
order: filterData.order,
orderBy: filterData.orderBy,
}
Https.axiosPost(Https.httpUrls.inquiryGetTrial,data).then((rv: any) => {
if (rv) {
// this.dataList = rv
filter.dataList = rv.records
filterData.total = rv.total
filter.tableLoading = false
// this.workspaceItem.position = this.singleTypeList[0].label
}
})
}
let lastGeTrialList = (str:string)=>{
let currentDate = new Date();
let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
// 计算30天前的时间戳
let thirtyDaysAgoTimestamp
if(str == 'year'){
thirtyDaysAgoTimestamp = currentTimestamp - (360 * 24 * 60 * 60);
}else if(str == 'month'){
thirtyDaysAgoTimestamp = currentTimestamp - (30 * 24 * 60 * 60);
}else if(str == 'week'){
thirtyDaysAgoTimestamp = currentTimestamp - (7 * 24 * 60 * 60);
}
filterData.rangePickerValue[0] = formatTime(thirtyDaysAgoTimestamp,'YYYY-MM-DD')
filterData.rangePickerValue[1] = formatTime(currentTimestamp,'YYYY-MM-DD')
gettrialList();
}
onMounted(()=>{
lastGeTrialList('month')
})
return {
...toRefs(filter),
...toRefs(filterData),
columns,
renameData,
changePage,
searchHistoryList,
lastGeTrialList,
gettrialList,
};
},
data() {
return {
historyTableHeight: 0,
handleResizeColumn: (w:any, col:any) => {
col.width = w;
},
};
},
mounted() {
let historyTable: any = this.$refs.historyTable;
this.historyTableHeight = historyTable.clientHeight - 200;
},
methods: {
},
});
</script>

7
src/component/Administrator/trialApproval.vue
View File

@@ -140,7 +140,7 @@ export default defineComponent({
key: "surname",
},
{
title: 'Name',
title: 'User Name',
align: "center",
ellipsis: true,
@@ -293,3 +293,8 @@ export default defineComponent({
},
});
</script>
<style lang="less" scoped>
.admin_page .admin_table_content .operate_list{
justify-content: space-between;
}
</style>

149
src/component/Administrator/trialUserConversionRateChart.vue Normal file
View File

@@ -0,0 +1,149 @@
<template>
<div class="recentNewUserChart admin_page">
<div class="admin_table_search">
<div class="admin_state">
</div>
<div class="admin_search">
</div>
</div>
<div class="admin_table_content" ref="pageChartDom"></div>
</div>
</template>
<script lang="ts">
import {
defineComponent,
ref,
createVNode,
computed,
reactive,
toRefs,
onMounted,
} from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import * as echarts from "echarts/core";
import { TooltipComponent, LegendComponent } from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
export default defineComponent({
components: {},
setup() {
let filter: any = reactive({
dataList: {},
});
let filterData: any = reactive({
rangePickerValue: [],
});
//查询列表
let searchHistoryList = () => {
gettrialList();
};
//获取列表
let gettrialList = async () => {
Https.axiosGet(Https.httpUrls.conversionRate).then((rv: any) => {
if (rv) {
let entries:any = Object.entries(rv);
let data: any = [];
for (let [key, value] of entries) {
if(key != 'conversionRate'){
let obj = {
name: key,
value: value
}
data.push(obj);
}
}
filter.dataList = data;
setEcharts(data);
// this.workspaceItem.position = this.singleTypeList[0].label
}
});
};
let myChart: any;
let setEcharts = (data: any) => {
if (myChart) {
myChart.setOption({
series: [
{
data: data,
},
],
});
} else {
echarts.use([
TooltipComponent,
LegendComponent,
PieChart,
CanvasRenderer,
LabelLayout,
]);
var chartDom = pageChartDom.value;
myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: "item",
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name:'Rate',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 30,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: data
}
]
};
option && myChart.setOption(option);
}
};
let pageChartDom: any = ref();
onMounted(() => {
gettrialList();
});
return {
...toRefs(filter),
...toRefs(filterData),
searchHistoryList,
gettrialList,
pageChartDom,
};
},
data() {
return {};
},
methods: {},
});
</script>

152
src/component/Administrator/trialUserCountry.vue Normal file
View File

@@ -0,0 +1,152 @@
<template>
<div class="recentNewUserChart admin_page">
<div class="admin_table_search">
<div class="admin_state">
</div>
<div class="admin_search">
</div>
</div>
<div class="admin_table_content" ref="pageChartDom"></div>
</div>
</template>
<script lang="ts">
import {
defineComponent,
ref,
createVNode,
computed,
reactive,
toRefs,
onMounted,
} from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import * as echarts from "echarts/core";
import { TooltipComponent, LegendComponent } from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
export default defineComponent({
components: {},
setup() {
let filter: any = reactive({
dataList: {},
});
let filterData: any = reactive({
rangePickerValue: [],
userType: "",
});
let state: any = ref([
{
label: "all",
value: "",
},
{
label: "visitor",
value: "visitor",
},
{
label: "trial",
value: "trial",
},
{
label: "official",
value: "official",
},
]);
//查询列表
let searchHistoryList = () => {
gettrialList();
};
//获取列表
let gettrialList = async () => {
Https.axiosGet(Https.httpUrls.trialUserCountry).then((rv: any) => {
if (rv) {
let data: any = [];
rv.names.forEach((item: any, index: number) => {
let obj = {
name: item,
value: rv.values[index],
};
data.push(obj);
});
filter.dataList = data;
setEcharts(data);
// this.workspaceItem.position = this.singleTypeList[0].label
}
});
};
let myChart: any;
let setEcharts = (data: any) => {
if (myChart) {
myChart.setOption({
series: [
{
data: data,
},
],
});
} else {
echarts.use([
TooltipComponent,
LegendComponent,
PieChart,
CanvasRenderer,
LabelLayout,
]);
var chartDom = pageChartDom.value;
myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: "item",
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
type: "pie",
radius: "55%",
center: ["40%", "50%"],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
option && myChart.setOption(option);
}
};
let pageChartDom: any = ref();
onMounted(() => {
gettrialList();
});
return {
...toRefs(filter),
...toRefs(filterData),
state,
searchHistoryList,
gettrialList,
pageChartDom,
};
},
data() {
return {};
},
methods: {},
});
</script>

27
src/component/HomePage/Cropper.vue
View File

@@ -29,8 +29,9 @@
:outputSize="option.size"
:outputType="option.outputType"
:auto-crop="option.autoCrop"
:fixedBox="isRound"
:auto-crop-width="option.autoCropWidth"
:auto-crop-height="option.autoCropHeight"
:auto-crop-height="option.autoCropWidth"
:center-box="option.centerBox"
:can-move="option.canMove" :can-move-box="option.canMoveBox"
@real-time="realTime"
@@ -51,8 +52,8 @@
</div>
<div class="cut_picture_review_block">
<div class="cut_picture_review_item">
<div class="cut_picture_review_content" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
<div :style="previews.div" >
<div class="cut_picture_review_content" :class="{active:isRound}" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
<div :style="previews.div">
<img class="previews_image" :style="previews.img" :src="previews.url">
</div>
</div>
@@ -76,17 +77,14 @@ import { VueCropper } from "vue-cropper";
// import { openGuide,driverObj__ } from "@/tool/guide";
import {base64toFile} from '@/tool/util'
export default defineComponent({
props:['cropperFileData','isUpload'],
props:['cropperFileData','isUpload','isRound'],
components:{
VueCropper,
},
setup(){
let driver__:any = inject('driver__')
return {
driver__
}
},
data(){
data(prop){
return {
cutPicuterModal:false,
option: {
@@ -97,16 +95,19 @@ export default defineComponent({
outputType: 'png',
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 360,
autoCropHeight: 360,
autoCropWidth: prop.isRound?100:360,
autoCropHeight: prop.isRound?100:360,
max: 99999,
centerBox:true,
canMove:true,
canMoveBox:true,
fixedBox:false,
},
previews:{},
}
},
mounted(){
},
methods:{
rotateLeft() {
@@ -350,6 +351,10 @@ export default defineComponent({
background: rgba(91,94,105,0.8);
box-shadow: 0 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
border-radius: calc(1rem*1.2);
&.active{
border-radius: 50%;
overflow: hidden
}
}
.cut_picture_review_block_sec{

4
src/component/HomePage/Generate.vue
View File

@@ -335,7 +335,7 @@ export default defineComponent({
},
workspaceCom(newVal,oldVal){
this.workspace = newVal
this.upload.gender = newVal?.sexEnum?.name
this.upload.gender = newVal?.sexEnum?.value
},
scene:{
handler(newVal,oldVal){
@@ -785,7 +785,7 @@ export default defineComponent({
},
});
</script>
<style lang="less">
<style lang="less" scoped>
.generate {
flex: 1;
// height: 30rem;

1762
src/component/HomePage/productImg.vue
View File

File diff suppressed because it is too large Load Diff

63
src/router/index.ts
View File

@@ -68,6 +68,37 @@ const routes: Array<RouteRecordRaw> = [
path:'eventsDetail',
name:'eventsDetail',
component: _import_component('Events/eventsDetail.vue'),
},{
path:'account',
name:'account',
component: _import_component('Account/account.vue'),
children:[
{
path: "",
name:'accountChil',
redirect: "/home/account/accountHome"
},
{
path:'accountHome',
name:'accountHome',
component: _import_component('Account/accountHome.vue'),
},
{
path:'accountEdit',
name:'accountEdit',
component: _import_component('Account/accountEdit.vue'),
},
{
path:'accountMessage',
name:'accountMessage',
component: _import_component('Account/accountMessage.vue'),
},
{
path:'accountFollowFans',
name:'accountFollowFans',
component: _import_component('Account/accountFollowFans.vue'),
}
]
}
]
},
@@ -140,6 +171,38 @@ const routes: Array<RouteRecordRaw> = [
path:'questionnaire',
name:'questionnaire',
component: _import_component('Administrator/questionnaire.vue'),
},{
path:'recentActiveChart',
name:'recentActiveChart',
component: _import_component('Administrator/recentActiveChart.vue'),
},{
path:'recentActiveUser',
name:'recentActiveUser',
component: _import_component('Administrator/recentActiveUser.vue'),
},{
path:'recentActiveUserChart',
name:'recentActiveUserChart',
component: _import_component('Administrator/recentActiveUserChart.vue'),
},{
path:'recentNewUser',
name:'recentNewUser',
component: _import_component('Administrator/recentNewUser.vue'),
},{
path:'recentNewUserChart',
name:'recentNewUserChart',
component: _import_component('Administrator/recentNewUserChart.vue'),
},{
path:'trialUserCountry',
name:'trialUserCountry',
component: _import_component('Administrator/trialUserCountry.vue'),
},{
path:'trialUserConversionRateChart',
name:'trialUserConversionRateChart',
component: _import_component('Administrator/trialUserConversionRateChart.vue'),
},{
path:'trialAllUser',
name:'trialAllUser',
component: _import_component('Administrator/trialAllUser.vue'),
},
]
},

663
src/tool/country.js Normal file
View File

@@ -0,0 +1,663 @@
let country = [
{
label: "Albania",
value: "Albania"
},
{
label: "Algeria",
value: "Algeria"
},
{
label: "Andorra",
value: "Andorra"
},
{
label: "Angola",
value: "Angola"
},
{
label: "Antigua and Barbuda",
value: "Antigua and Barbuda"
},
{
label: "Argentina",
value: "Argentina"
},
{
label: "Armenia",
value: "Armenia"
},
{
label: "Australia",
value: "Australia"
},
{
label: "Austria",
value: "Austria"
},
{
label: "Azerbaijan",
value: "Azerbaijan"
},
{
label: "Bahamas",
value: "Bahamas"
},
{
label: "Bangladesh",
value: "Bangladesh"
},
{
label: "Barbados",
value: "Barbados"
},
{
label: "Belgium",
value: "Belgium"
},
{
label: "Belize",
value: "Belize"
},
{
label: "Benin",
value: "Benin"
},
{
label: "Bhutan",
value: "Bhutan"
},
{
label: "Bolivia",
value: "Bolivia"
},
{
label: "Bosnia and Herzegovina",
value: "Bosnia and Herzegovina"
},
{
label: "Botswana",
value: "Botswana"
},
{
label: "Brazil",
value: "Brazil"
},
{
label: "Brunei",
value: "Brunei"
},
{
label: "Bulgaria",
value: "Bulgaria"
},
{
label: "Burkina Faso",
value: "Burkina Faso"
},
{
label: "Cabo Verde",
value: "Cabo Verde"
},
{
label: "Canada",
value: "Canada"
},
{
label: "China",
value: "China"
},
{
label: "Chile",
value: "Chile"
},
{
label: "Colombia",
value: "Colombia"
},
{
label: "Comoros",
value: "Comoros"
},
{
label: "Congo",
value: "Congo"
},
{
label: "Costa Rica",
value: "Costa Rica"
},
{
label: "Côte d'Ivoire",
value: "Côte d'Ivoire"
},
{
label: "Croatia",
value: "Croatia"
},
{
label: "Cyprus",
value: "Cyprus"
},
{
label: "Czech Republic",
value: "Czech Republic"
},
{
label: "Denmark",
value: "Denmark"
},
{
label: "Djibouti",
value: "Djibouti"
},
{
label: "Dominica",
value: "Dominica"
},
{
label: "Dominican Republic",
value: "Dominican Republic"
},
{
label: "Ecuador",
value: "Ecuador"
},
{
label: "El Salvador",
value: "El Salvador"
},
{
label: "Estonia",
value: "Estonia"
},
{
label: "Fiji",
value: "Fiji"
},
{
label: "Finland",
value: "Finland"
},
{
label: "France",
value: "France"
},
{
label: "Gabon",
value: "Gabon"
},
{
label: "Gambia",
value: "Gambia"
},
{
label: "Georgia",
value: "Georgia"
},
{
label: "Germany",
value: "Germany"
},
{
label: "Ghana",
value: "Ghana"
},
{
label: "Greece",
value: "Greece"
},
{
label: "Grenada",
value: "Grenada"
},
{
label: "Guatemala",
value: "Guatemala"
},
{
label: "Guinea",
value: "Guinea"
},
{
label: "Guinea-Bissau",
value: "Guinea-Bissau"
},
{
label: "Guyana",
value: "Guyana"
},
{
label: "Haiti",
value: "Haiti"
},
{
label: "Holy See",
value: "Holy See"
},
{
label: "Honduras",
value: "Honduras"
},
{
label: "Hong Kong, China",
value: "Hong Kong, China"
},
{
label: "Hungary",
value: "Hungary"
},
{
label: "Iceland",
value: "Iceland"
},
{
label: "India",
value: "India"
},
{
label: "Indonesia",
value: "Indonesia"
},
{
label: "Iraq",
value: "Iraq"
},
{
label: "Ireland",
value: "Ireland"
},
{
label: "Israel",
value: "Israel"
},
{
label: "Italy",
value: "Italy"
},
{
label: "Jamaica",
value: "Jamaica"
},
{
label: "Japan",
value: "Japan"
},
{
label: "Jordan",
value: "Jordan"
},
{
label: "Kazakhstan",
value: "Kazakhstan"
},
{
label: "Kenya",
value: "Kenya"
},
{
label: "Kiribati",
value: "Kiribati"
},
{
label: "Kuwait",
value: "Kuwait"
},
{
label: "Kyrgyzstan",
value: "Kyrgyzstan"
},
{
label: "Latvia",
value: "Latvia"
},
{
label: "Lebanon",
value: "Lebanon"
},
{
label: "Lesotho",
value: "Lesotho"
},
{
label: "Liberia",
value: "Liberia"
},
{
label: "Liechtenstein",
value: "Liechtenstein"
},
{
label: "Lithuania",
value: "Lithuania"
},
{
label: "Luxembourg",
value: "Luxembourg"
},
{
label: "Madagascar",
value: "Madagascar"
},
{
label: "Malawi",
value: "Malawi"
},
{
label: "Malaysia",
value: "Malaysia"
},
{
label: "Maldives",
value: "Maldives"
},
{
label: "Mali",
value: "Mali"
},
{
label: "Malta",
value: "Malta"
},
{
label: "Marshall Islands",
value: "Marshall Islands"
},
{
label: "Mauritania",
value: "Mauritania"
},
{
label: "Mauritius",
value: "Mauritius"
},
{
label: "Mexico",
value: "Mexico"
},
{
label: "Micronesia",
value: "Micronesia"
},
{
label: "Moldova",
value: "Moldova"
},
{
label: "Monaco",
value: "Monaco"
},
{
label: "Mongolia",
value: "Mongolia"
},
{
label: "Montenegro",
value: "Montenegro"
},
{
label: "Morocco",
value: "Morocco"
},
{
label: "Mozambique",
value: "Mozambique"
},
{
label: "Myanmar",
value: "Myanmar"
},
{
label: "Namibia",
value: "Namibia"
},
{
label: "Nauru",
value: "Nauru"
},
{
label: "Nepal",
value: "Nepal"
},
{
label: "Netherlands",
value: "Netherlands"
},
{
label: "New Zealand",
value: "New Zealand"
},
{
label: "Nicaragua",
value: "Nicaragua"
},
{
label: "Niger",
value: "Niger"
},
{
label: "Nigeria",
value: "Nigeria"
},
{
label: "North Macedonia",
value: "North Macedonia"
},
{
label: "Norway",
value: "Norway"
},
{
label: "Oman",
value: "Oman"
},
{
label: "Pakistan",
value: "Pakistan"
},
{
label: "Palau",
value: "Palau"
},
{
label: "Palestine",
value: "Palestine"
},
{
label: "Panama",
value: "Panama"
},
{
label: "Papua New Guinea",
value: "Papua New Guinea"
},
{
label: "Paraguay",
value: "Paraguay"
},
{
label: "Peru",
value: "Peru"
},
{
label: "Philippines",
value: "Philippines"
},
{
label: "Poland",
value: "Poland"
},
{
label: "Portugal",
value: "Portugal"
},
{
label: "Qatar",
value: "Qatar"
},
{
label: "Romania",
value: "Romania"
},
{
label: "Rwanda",
value: "Rwanda"
},
{
label: "Saint Kitts and Nevis",
value: "Saint Kitts and Nevis"
},
{
label: "Saint Lucia",
value: "Saint Lucia"
},
{
label: "Saint Vincent and the Grenadines",
value: "Saint Vincent and the Grenadines"
},
{
label: "Samoa",
value: "Samoa"
},
{
label: "San Marino",
value: "San Marino"
},
{
label: "Sao Tome and Principe",
value: "Sao Tome and Principe"
},
{
label: "Senegal",
value: "Senegal"
},
{
label: "Serbia",
value: "Serbia"
},
{
label: "Seychelles",
value: "Seychelles"
},
{
label: "Sierra Leone",
value: "Sierra Leone"
},
{
label: "Singapore",
value: "Singapore"
},
{
label: "Slovakia",
value: "Slovakia"
},
{
label: "Slovenia",
value: "Slovenia"
},
{
label: "Solomon Islands",
value: "Solomon Islands"
},
{
label: "South Africa",
value: "South Africa"
},
{
label: "South Korea",
value: "South Korea"
},
{
label: "Spain",
value: "Spain"
},
{
label: "Sri Lanka",
value: "Sri Lanka"
},
{
label: "Suriname",
value: "Suriname"
},
{
label: "Sweden",
value: "Sweden"
},
{
label: "Switzerland",
value: "Switzerland"
},
{
label: "Taiwan, China",
value: "Taiwan, China"
},
{
label: "Tanzania",
value: "Tanzania"
},
{
label: "Thailand",
value: "Thailand"
},
{
label: "Timor-Leste",
value: "Timor-Leste"
},
{
label: "Togo",
value: "Togo"
},
{
label: "Tonga",
value: "Tonga"
},
{
label: "Trinidad and Tobago",
value: "Trinidad and Tobago"
},
{
label: "Tunisia",
value: "Tunisia"
},
{
label: "Turkey",
value: "Turkey"
},
{
label: "Tuvalu",
value: "Tuvalu"
},
{
label: "Uganda",
value: "Uganda"
},
{
label: "Ukraine",
value: "Ukraine"
},
{
label: "United Arab Emirates",
value: "United Arab Emirates"
},
{
label: "United Kingdom",
value: "United Kingdom"
},
{
label: "United States of America",
value: "United States of America"
},
{
label: "Uruguay",
value: "Uruguay"
},
{
label: "Vanuatu",
value: "Vanuatu"
},
{
label: "Zambia",
value: "Zambia"
}
]
export {country}

2
src/tool/flexible.js
View File

@@ -10,7 +10,7 @@ let flexible = (designWidth, maxWidth,minWidth) =>{
if(width/height>1.98) width = height * 1.98;
width > maxWidth && (width = maxWidth);
width < minWidth && (width = minWidth);
var rem = width * 10 / designWidth;
var rem = Math.round(width * 10 / designWidth);
docEl.style.fontSize = rem+'px'
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}

17
src/tool/https.js
View File

@@ -235,12 +235,23 @@ export const Https = {
//管理员接口
//查询所有试用用户
inquiryGetTrial:`/api/inquiry/getTrial`,//拒绝审批
inquiryGetTrial:`/api/inquiry/getTrial`,//查询所有试用用户
getUserInfo:`/api/inquiry/getUserInfo`,//查询所有用户
//查询某个时间内design点击次数
getDesignStatistic:`/api/inquiry/getDesignStatistic`,//拒绝审批
getAllQuestionnaire:`/api/inquiry/getAllQuestionnaire`,//拒绝审批
getActiveUserFunc:`/api/inquiry/getActiveUserFunc`,//获取各模块功能
recentActiveUser:`/api/inquiry/recentActiveUser`,//获取近期活跃用户
recentActiveUserChart:`/api/inquiry/recentActiveUserChart`,//获取近期活跃用户图表数据
recentNewUser:`/api/inquiry/recentNewUser`,//获取近期新增用户
recentNewUserChart:`/api/inquiry/recentNewUserChart`,//获取新增用户图表
trialUserCountry:`/api/inquiry/trialUserCountry`,//试用用户国家-城市分布
conversionRate:`/api/inquiry/conversionRate`,//试用用户国家-城市分布
getAllUserId:`/api/inquiry/getAllUserId`,//获取所有用户id和Name
adminAddUser:`/api/inquiry/addUser`,//添加用户
modifyUser:`/api/inquiry/modifyUser`,//修改用户
getTasksList:`/api/tasks/getList`,//获取w为执行完的所有任务
getTasksHistory:`/api/tasks/getAllTask`,//获取所有任务列表
prepareForSR:`/api/python/prepareForSR`,//超分

100
src/views/Administrator.vue
View File

@@ -18,21 +18,21 @@
@click="handleClick"
>
<div v-for="(menu) in rootSubmenuKeys" :key="menu.key" >
<div v-for="(menu) in rootSubmenuKeys" :key="menu.key" >
<a-menu-item :key="menu.key" :name="menu.name" :route="menu.route" v-if="!menu.children">
<template #icon>
<span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span>
</template>
<span class="menu_title">{{menu.name}}</span>
<span class="menu_title" :title="menu.name">{{menu.name}}</span>
</a-menu-item>
<a-sub-menu :key="menu.key" v-else>
<template #icon>
<span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span>
</template>
<template #expandIcon><span :class="['icon','iconfont', 'menu_icon', menu.expandIcon]"></span></template>
<template #title><span class="menu_title">{{menu.name}}</span></template>
<template #title><span class="menu_title" :title="menu.name">{{menu.name}}</span></template>
<div >
<a-menu-item v-for="child in menu.children" :key="child.key" :name="child.name" :route="child.route"><span class="menu_title">{{child.name}}</span></a-menu-item>
<a-menu-item v-for="child in menu.children" :key="child.key" :name="child.name" :route="child.route"><span class="menu_title" :title="child.name">{{child.name}}</span></a-menu-item>
</div>
</a-sub-menu>
</div>
@@ -75,6 +75,7 @@ import { useStore } from "vuex";
import { useRouter,useRoute } from 'vue-router'
import GO from "@/tool/GO";
import { getCookie } from "@/tool/cookie";
import { country } from "@/tool/country";
import { getUploadUrl } from "@/tool/util";
// import { forEach } from "jszip";
import scaleImage from "@/component/HomePage/scaleImage.vue";
@@ -92,7 +93,7 @@ export default defineComponent({
const route:any = useRoute()
const state:any = reactive({
rootSubmenuKeys: [{
name:'Trial User',
name:'All User',
route:'/administrator/allUser',
icon:'yonghu',
expandIcon:'icon-xiala',
@@ -123,16 +124,75 @@ export default defineComponent({
key:'sub2',
isShow:true,
},{
name:'Trial User Approval',
route:'/administrator/trialApproval',
name:'Trial User',
icon:'usetime',
key:'sub3',
expandIcon:'icon-xiala',
key:'sub3',
isShow:true,
children:[
{
name:'Trial All User',
route:'/administrator/trialAllUser',
icon:'usetime',
key:'sub3-1',
isShow:true,
},{
name:'Trial User Approval',
route:'/administrator/trialApproval',
icon:'usetime',
key:'sub3-2',
isShow:true,
},{
name:'Trial User CHART',
route:'/administrator/trialUserCountry',
icon:'',
key:'sub3-3',
isShow:true,
},{
name:'Conversion Rate',
route:'/administrator/trialUserConversionRateChart',
icon:'',
key:'sub3-4',
isShow:true,
},
]
},{
name:'Function Use CHART',
route:'/administrator/recentActiveChart',
icon:'usetime',
key:'sub4',
isShow:true,
},{
name:'Active User',
icon:'usetime',
route:'/administrator/recentActiveUser',
key:'sub5',
isShow:true,
},{
name:'New User',
icon:'usetime',
expandIcon:'icon-xiala',
key:'sub6',
isShow:true,
children:[
{
name:'New User List',
route:'/administrator/recentNewUser',
icon:'',
key:'sub6-1',
isShow:true,
},{
name:'New User CHART',
route:'/administrator/recentNewUserChart',
icon:'',
key:'sub6-2',
isShow:true,
},
]
},{
name:'Events',
icon:'usetime',
key:'sub4',
key:'sub9',
expandIcon:'icon-xiala',
isShow:true,
children: [
@@ -140,7 +200,7 @@ export default defineComponent({
name:'Questionnaire Survey',
route:'/administrator/questionnaire',
icon:'',
key:'sub4-1',
key:'sub9-1',
isShow:true,
},
// {
@@ -200,6 +260,14 @@ export default defineComponent({
}
}
});
//储存所有用户id和name
Https.axiosGet(Https.httpUrls.getAllUserId,).then((rv: any) => {
if (rv) {
sessionStorage.setItem('allUserList',JSON.stringify(rv));
}
})
let allCountry = country
sessionStorage.setItem('allCountry',JSON.stringify(allCountry));
// state.nowPageName = state.rootSubmenuKeys[0].name
// router.push(state.rootSubmenuKeys[0].route)
@@ -268,6 +336,7 @@ export default defineComponent({
}
}
.administrator_page_left{
width: 20%;
padding-top: 20px;
.modal_title_text{
// font-size: var(--aida-fsize1-8);
@@ -276,11 +345,15 @@ export default defineComponent({
}
.ant-menu-dark.menu_list_content{
padding-left: 1.8rem;
width: 30rem;
height: calc(100% - 59px);
// width: 30rem;
width: 100%;
height: calc(100% - 16rem);
background: #FFFFFF;
flex-shrink: 0;
overflow-y: auto;
&::-webkit-scrollbar{
width: 0;
}
.menu_icon{
font-size: 2.4rem;
color: #808185;
@@ -331,6 +404,7 @@ export default defineComponent({
}
.administrator_page_right{
flex: 1;
width: 80%;
.administrator_page_right_header{
display: flex;
justify-content: space-between;

23
src/views/HomeMain.vue
View File

@@ -3,18 +3,20 @@
<header class="homeMain_heade">
<div class="homeMain_right_content">
<div class="homeMain_user">
<div class="homeMain_user_icon">
<div class="homeMain_user_icon" @click="openAccount">
</div>
<div class="homeMain_user_detail">
<div v-if="isTest" class="username">{{$t('Header.hello')}}@{{ $t('isTest.userName') }}</div>
<div v-else class="username">{{$t('Header.hello')}}@{{ userInfo?.userName }}</div>
<div class="homeMain_user_detail_item homeMain_user_detail_attention">
<div class="attention_item attention_item_active">
<div class="attention_item">
<!-- 点击事件就用下面的div -->
<!-- <div class="attention_item attention_item_active"> -->
<div>123</div>
<span>关注</span>
</div>
<div class="attention_item attention_item_active">
<div class="attention_item">
<div>321</div>
<span>粉丝</span>
</div>
@@ -23,7 +25,7 @@
<span>作品数</span>
</div>
</div>
<div class="homeMain_user_detail_item homeMain_user_detail_setUser">
<div class="homeMain_user_detail_item homeMain_user_detail_setUser" @click="openAccount">
<i class="fi fi-rr-user"></i>
<div>个人中心</div>
<i class="icon iconfont icon-xiala"></i>
@@ -318,6 +320,9 @@ export default defineComponent({
}, 500);
})
heradeRight.addEventListener('mouseleave',(event)=>{
if(overTime){
clearTimeout(overTime)
}
if(!state)return
clearTimeout(outTime)
outTime = setTimeout(() => {
@@ -522,8 +527,11 @@ export default defineComponent({
let taskPage = this.$refs.TaskPage
taskPage.init(data)
},
openAccount(){
this.$router.push("/home/account")
},
openMessage(){
this.$router.push("/home/account/accountMessage")
},
},
});
@@ -626,6 +634,8 @@ export default defineComponent({
display: flex;
flex-direction: column;
align-items: center;
}
.attention_item_active{
cursor: pointer;
}
.attention_item_active:hover{
@@ -634,9 +644,6 @@ export default defineComponent({
color: #39215b;
}
}
.attention_item:last-child{
cursor: auto;
}
span{
font-size: 1.4rem;
color: #949eae;