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

调整管理员页面

Browse Source
This commit is contained in:
X1627315083
2024-08-05 16:15:43 +08:00
parent ce7892e574
commit 12ea743827
22 changed files with 3762 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.dev
View File

@@ -4,7 +4,7 @@ NODE_ENV = 'development'
# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
VUE_APP_BASE_URL = 'https://api.aida.com.hk'
# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
# 佩佩
# VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
# 海波

59
package-lock.json generated
View File

@@ -15,6 +15,7 @@
"axios": "^1.4.0",
"core-js": "^3.8.3",
"driver.js": "^1.3.1",
"echarts": "^5.5.1",
"element-plus": "^2.4.2",
"file-saver": "^2.0.5",
"fingerprintjs2": "^2.1.4",
@@ -5475,6 +5476,20 @@
"node": ">=6.0.0"
}
},
"node_modules/echarts": {
"version": "5.5.1",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
"integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.6.0"
}
},
"node_modules/echarts/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"node_modules/ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -12449,6 +12464,19 @@
"resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz",
"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
"dev": true
},
"node_modules/zrender": {
"version": "5.6.0",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
"integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
"dependencies": {
"tslib": "2.3.0"
}
},
"node_modules/zrender/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
},
"dependencies": {
@@ -16631,6 +16659,22 @@
"integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
"dev": true
},
"echarts": {
"version": "5.5.1",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
"integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
"requires": {
"tslib": "2.3.0",
"zrender": "5.6.0"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -22120,6 +22164,21 @@
"dev": true
}
}
},
"zrender": {
"version": "5.6.0",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
"integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
"requires": {
"tslib": "2.3.0"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
}
}
}

1
package.json
View File

@@ -19,6 +19,7 @@
"axios": "^1.4.0",
"core-js": "^3.8.3",
"driver.js": "^1.3.1",
"echarts": "^5.5.1",
"element-plus": "^2.4.2",
"file-saver": "^2.0.5",
"fingerprintjs2": "^2.1.4",

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%);

29
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() {
@@ -292,6 +274,3 @@ export default defineComponent({
},
});
</script>
<style lang="less">
</style>

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

@@ -1,224 +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="allUser_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:any, sorter:any) => {
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>
<style lang="less">
.admin_page {
width: 100%;
height: 100%;
overflow: hidden;
// min-width: 1440px;
position: relative;
.allUser_table_content {
margin-top: 2.6rem;
width: 100%;
height: calc(100% - 13.7rem);
padding-bottom: 3rem;
background: #fff;
border-radius: 2rem;
overflow: hidden;
.ant-table {
background: transparent;
}
.ant-table-body {
overflow-y: auto !important;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
&::-webkit-scrollbar {
width: 0 !important;
}
}
.ant-table-thead > tr > th {
background: #ffffff00;
border-bottom: none;
backdrop-filter: blur(1rem);
}
.ant-table-tbody > tr > td {
border: none;
background: transparent;
// color: #fff;
}
.ant-table-tbody > tr {
&:hover > td {
background: #ffffff3a;
}
}
.ant-table-pagination-right {
padding-right: 3.5rem;
}
.operate_list {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
.operate_item {
font-size: 1.4rem;
font-family: Roboto;
font-weight: 400;
color: #343579;
cursor: pointer;
}
}
}
<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>

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

@@ -0,0 +1,227 @@
<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 = [formatTime(thirtyDaysAgoTimestamp,'YYYY-MM-DD'),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 }"
:showSorterTooltip='false'
@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 = [formatTime(thirtyDaysAgoTimestamp,'YYYY-MM-DD'),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>

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

@@ -0,0 +1,195 @@
<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: '10%',
left: 'center'
},
series: [
{
type: 'pie',
radius: ['30%', '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 = [formatTime(thirtyDaysAgoTimestamp,'YYYY-MM-DD'),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>

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

@@ -0,0 +1,320 @@
<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 = [formatTime(thirtyDaysAgoTimestamp,'YYYY-MM-DD'),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>

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

@@ -0,0 +1,223 @@
<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 = [formatTime(thirtyDaysAgoTimestamp,'YYYY-MM-DD'),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>

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

@@ -0,0 +1,310 @@
<template>
<div class="admin_page">
<div class="admin_table_search">
<div class="admin_state">
<div class="admin_state_item">
<span>Select 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>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>
<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,
allUserList: [],
allCountry:[]
})
let filterData:any = reactive({
rangePickerValue:[],
currentPage: 1,
pageSize: 10,
total: 0,
country: "",
email: "",
userType: "",
ids: [],
occupation: "",
order: "", //'Ascending 升序 Descending 降序'
orderBy:'',
userName: "",
})
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:any, sorter:any) => {
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,
country: filterData.country,
email: filterData.email,
userType: filterData.userType,
ids: filterData.ids,
occupation: filterData.occupation,
order: filterData.order,
orderBy: filterData.orderBy,
userName: filterData.userName,
}
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 filterOption = (input: any, option: any) => {
// 使用 option.label 进行搜索
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
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 = [formatTime(thirtyDaysAgoTimestamp,'YYYY-MM-DD'),formatTime(currentTimestamp,'YYYY-MM-DD')]
gettrialList();
}
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);
}
lastGeTrialList('month')
})
return {
...toRefs(filter),
...toRefs(filterData),
columns,
renameData,
changePage,
filterOption,
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>
<style lang="less" scoped>
.admin_page .admin_table_search .admin_state {
display: flex;
flex-wrap: wrap;
}
</style>

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

@@ -16,7 +16,7 @@
</div>
</div>
<div class="allUser_table_content" ref="historyTable">
<div class="admin_table_content" ref="historyTable">
<a-table
:columns="columns"
:data-source="collectionList"
@@ -140,7 +140,7 @@ export default defineComponent({
key: "surname",
},
{
title: 'Name',
title: 'User Name',
align: "center",
ellipsis: true,
@@ -293,6 +293,8 @@ export default defineComponent({
},
});
</script>
<style lang="less">
<style lang="less" scoped>
.admin_page .admin_table_content .operate_list{
justify-content: space-between;
}
</style>

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

@@ -0,0 +1,158 @@
<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) {
let str
console.log(key);
if(key != 'conversionRate'){
if(key == 'trialToOfficialCount'){
str = 'Trial To Official'
}else{
str = 'Trial User'
}
let obj = {
name: str,
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: '10%',
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: ["50%", "55%"],
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>

4
src/component/Detail/habit.vue
View File

@@ -813,6 +813,7 @@ export default defineComponent({
// this.store.commit("setTemplateData", event);
// },
async setWorkspaceStyle(data: any){
// this.workspaceItem.styleId = data.id
this.workspaceItem.styleName = data.name
this.workspaceItem.style = data.value
@@ -820,6 +821,9 @@ export default defineComponent({
if(data.isRevampModel){
await this.getMannequins(true)
}
if(!this.workspaceItem.overallSingle){
this.workspaceItem.position = 'Overall'
}
this.putWorkspace(this.workspaceItem,this.workspaceItem.id)
},
setStyle(){

32
src/router/index.ts
View File

@@ -140,6 +140,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}

15
src/tool/https.js
View File

@@ -235,11 +235,22 @@ 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`,//获取所有任务列表

100
src/views/Administrator.vue
View File

@@ -18,7 +18,7 @@
@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>
@@ -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;
@@ -315,12 +388,6 @@ export default defineComponent({
font-family: Adobe Heiti Std;
font-weight: normal;
color: #808185;
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 溢出隐藏 */
text-overflow: ellipsis; /* 文本溢出时显示省略号 */
width: 100%;
display: block;
}
.ant-menu-item-selected{
background: #F3F4F8;
@@ -337,6 +404,7 @@ export default defineComponent({
}
.administrator_page_right{
flex: 1;
width: 80%;
.administrator_page_right_header{
display: flex;
justify-content: space-between;