语言适配英文
This commit is contained in:
X1627315083
@@ -1,6 +1,6 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id */
|
||||
src: url('iconfont.ttf?t=1710811554594') format('truetype');
|
||||
src: url('iconfont.ttf?t=1711431581952') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@@ -119,7 +119,15 @@
|
||||
content: "\e68b";
|
||||
}
|
||||
|
||||
.icon-renwu:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.icon-caizhi:before {
|
||||
content: "\e647";
|
||||
}
|
||||
|
||||
.icon-shangchuantupian:before {
|
||||
content: "\e61e";
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
@@ -424,6 +424,250 @@ li {
|
||||
.modal_component .ant-modal-content .ant-modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
.ant-drawer-content-wrapper {
|
||||
width: 50rem !important;
|
||||
}
|
||||
.generalModel_page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search {
|
||||
margin-top: 2rem;
|
||||
padding: 2rem 3.5rem 5rem 2.8rem;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search .generalModel_search {
|
||||
width: auto;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search .generalModel_search .generalModel_search_item {
|
||||
background: #343579;
|
||||
border-color: #343579;
|
||||
height: 4rem;
|
||||
padding: 0.64rem 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search .generalModel_state {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search .generalModel_state .generalModel_state_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search .generalModel_state .generalModel_state_item > span {
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
color: #030303;
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
min-width: 5rem;
|
||||
text-align: left;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search .generalModel_state .generalModel_state_item .ant-picker-range {
|
||||
height: 5rem;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search .generalModel_state .generalModel_state_item .ant-select-lg {
|
||||
font-size: 14px;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search .generalModel_state .generalModel_state_item .ant-select-lg .ant-select-selector {
|
||||
height: 5rem;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search .generalModel_state .generalModel_state_item .ant-select-lg .ant-select-selector .ant-select-selection-item {
|
||||
line-height: 5rem;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search .generalModel_state .generalModel_state_item .ant-select-lg .ant-select-selector input {
|
||||
line-height: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search .generalModel_state .generalModel_current {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search .generalModel_state .header_user_content {
|
||||
position: absolute;
|
||||
border: 2px solid;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
transform: translateY(6rem);
|
||||
z-index: 2;
|
||||
display: none;
|
||||
margin-left: -2rem;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search .generalModel_state .header_user_content .username {
|
||||
padding: 0 2rem;
|
||||
color: #000;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search .generalModel_state .header_user_content .username:hover {
|
||||
background: #e1e1e1;
|
||||
}
|
||||
.generalModel_page .generalModel_table_search .generalModel_state .header_user_content.active {
|
||||
display: block;
|
||||
}
|
||||
.generalModel_table_content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
padding-bottom: 3rem;
|
||||
background: #fff;
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.generalModel_table_content .ant-table {
|
||||
background: transparent;
|
||||
}
|
||||
.generalModel_table_content .ant-table-body {
|
||||
overflow-y: auto !important;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
}
|
||||
.generalModel_table_content .ant-table-body::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
.generalModel_table_content .ant-table-thead > tr > th {
|
||||
background: #ffffff00;
|
||||
border-bottom: none;
|
||||
backdrop-filter: blur(1rem);
|
||||
}
|
||||
.generalModel_table_content .ant-table-tbody > tr > td {
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
.generalModel_table_content .ant-table-tbody > tr > td img {
|
||||
max-width: 100%;
|
||||
max-height: 10rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
.generalModel_table_content .ant-table-tbody > tr:hover > td {
|
||||
background: #ffffff3a;
|
||||
}
|
||||
.generalModel_table_content .ant-table-pagination-right {
|
||||
padding-right: 3.5rem;
|
||||
}
|
||||
.generalModel_table_content .operate_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
.generalModel_table_content .operate_list .operate_item {
|
||||
font-size: 1.4rem;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
color: #343579;
|
||||
cursor: pointer;
|
||||
}
|
||||
.generalModelOperate {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
position: relative;
|
||||
}
|
||||
.generalModelOperate .ant-modal-content {
|
||||
border-radius: calc(1rem * 1.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
.generalModelOperate .ant-modal-content .ant-modal-header {
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
}
|
||||
.generalModelOperate .ant-modal-content .ant-modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: calc(5rem * 1.2) calc(5rem * 1.2) !important;
|
||||
background: #f9fafb;
|
||||
}
|
||||
.generalModelOperate .ant-modal-content .ant-progress-circle.ant-progress-status-success .ant-progress-text {
|
||||
color: #000;
|
||||
}
|
||||
.generalModelOperate .ant-modal-content .ant-progress-circle .ant-progress-text {
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
font-size: calc(1.6rem * 1.2);
|
||||
}
|
||||
.generalModelOperate .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
|
||||
border-color: #d9d9d9;
|
||||
box-shadow: none;
|
||||
}
|
||||
.generalModelOperate .ant-select:hover .ant-select-selector {
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
.generalModelOperate .generalModelOperate_title {
|
||||
font-size: var(--aida-fsize2);
|
||||
font-weight: 900;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.generalModelOperate .generalModelOperate_closeIcon {
|
||||
top: calc(2rem * 1.2);
|
||||
right: calc(2rem * 1.2);
|
||||
cursor: pointer;
|
||||
width: calc(4rem * 1.2);
|
||||
height: calc(4rem * 1.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
}
|
||||
.generalModelOperate .generalModelOperate_closeIcon .fi-rr-cross-small::before {
|
||||
padding: calc(0.2rem * 1.2);
|
||||
border-radius: 5px;
|
||||
border: solid 2px rgba(0, 0, 0, 0.25);
|
||||
transition: 1s all;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
.generalModelOperate .generalModelOperate_closeIcon.generalModelOperate_closeIcon:hover .fi-rr-cross-small::before {
|
||||
border: solid 2px rgba(0, 0, 0, 0.55);
|
||||
color: #000000;
|
||||
}
|
||||
.generalModelOperate .generalModelOperate_endBtn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.generalModelOperate .generalModelOperate_endBtn > div {
|
||||
height: 3.2rem;
|
||||
padding: 4px 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
}
|
||||
.generalModelOperate .generalModelOperate_endBtn .generalModelOperate_btn_cancel {
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
.generalModelOperate .generalModelOperate_endBtn .generalModelOperate_btn_cancel:hover {
|
||||
color: #39215b;
|
||||
border-color: #39215b;
|
||||
}
|
||||
.generalModelOperate .generalModelOperate_endBtn .generalModelOperate_btn_ok {
|
||||
margin-left: 10rem;
|
||||
background: #39215b;
|
||||
border-color: #39215b;
|
||||
color: #fff;
|
||||
}
|
||||
.generalModelOperate .generalModelOperate_endBtn .generalModelOperate_btn_ok:hover {
|
||||
border-color: #543087;
|
||||
background: #543087;
|
||||
}
|
||||
.ant-modal-body {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
@@ -507,6 +507,265 @@ input:focus{
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-drawer-content-wrapper{//抽屉
|
||||
width: 50rem !important;
|
||||
}
|
||||
.generalModel_page {//常用查询列表样式
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9rem;
|
||||
overflow: hidden;
|
||||
// min-width: 1440px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.generalModel_table_search {
|
||||
display: flex;
|
||||
margin-top: 2rem;
|
||||
padding: 2rem 3.5rem 5rem 2.8rem;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.generalModel_search{
|
||||
width: auto;
|
||||
.generalModel_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;
|
||||
}
|
||||
}
|
||||
.generalModel_state {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
flex-wrap: wrap;
|
||||
.generalModel_state_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 5rem;
|
||||
>span{
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
color: #030303;
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
min-width: 5rem;
|
||||
text-align: left;
|
||||
}
|
||||
.ant-picker-range{
|
||||
height: 5rem;
|
||||
}
|
||||
.ant-select-lg{
|
||||
font-size: 14px;
|
||||
.ant-select-selector{
|
||||
height: 5rem;
|
||||
.ant-select-selection-item{
|
||||
line-height: 5rem;
|
||||
}
|
||||
input{
|
||||
line-height: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.generalModel_current{
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header_user_content {
|
||||
position: absolute;
|
||||
border: 2px solid;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
transform: translateY(6rem);
|
||||
z-index: 2;
|
||||
display: none;
|
||||
margin-left: -2rem;
|
||||
.username{
|
||||
padding: 0 2rem;
|
||||
color: #000;
|
||||
}
|
||||
.username:hover{
|
||||
background: #e1e1e1;
|
||||
}
|
||||
&.active{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.generalModel_table_content {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
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;
|
||||
img{
|
||||
max-width: 100%;
|
||||
max-height: 10rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
justify-content: center;
|
||||
.operate_item {
|
||||
font-size: 1.4rem;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
color: #343579;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.generalModelOperate{//常用model样式
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
position: relative;
|
||||
.ant-modal-content {
|
||||
border-radius: calc(1rem * 1.2);
|
||||
overflow: hidden;
|
||||
.ant-modal-header {
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
}
|
||||
.ant-modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: calc(5rem * 1.2) calc(5rem * 1.2) !important;
|
||||
// height: calc(65vh - 6.4rem);
|
||||
background: #f9fafb;
|
||||
}
|
||||
//进度完成字体颜色
|
||||
.ant-progress-circle.ant-progress-status-success .ant-progress-text {
|
||||
color: #000;
|
||||
}
|
||||
.ant-progress-circle .ant-progress-text {
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
font-size: calc(1.6rem * 1.2);
|
||||
}
|
||||
}
|
||||
.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{
|
||||
border-color: #d9d9d9;
|
||||
box-shadow: none;
|
||||
}
|
||||
.ant-select:hover .ant-select-selector{
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
.generalModelOperate_title {
|
||||
font-size: var(--aida-fsize2);
|
||||
font-weight: 900;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.generalModelOperate_closeIcon {
|
||||
top: calc(2rem * 1.2);
|
||||
right: calc(2rem * 1.2);
|
||||
cursor: pointer;
|
||||
width: calc(4rem * 1.2);
|
||||
height: calc(4rem * 1.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
.fi-rr-cross-small::before {
|
||||
padding: calc(0.2rem * 1.2);
|
||||
border-radius: 5px;
|
||||
border: solid 2px rgba(0, 0, 0, 0.25);
|
||||
transition: 1s all;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
&.generalModelOperate_closeIcon:hover .fi-rr-cross-small::before {
|
||||
border: solid 2px rgba(0, 0, 0, 0.55);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
.generalModelOperate_endBtn{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
>div{
|
||||
height: 3.2rem;
|
||||
padding: 4px 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
transition: all .3s;
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
}
|
||||
.generalModelOperate_btn_cancel{
|
||||
border-color: #d9d9d9;
|
||||
|
||||
}
|
||||
.generalModelOperate_btn_cancel:hover{
|
||||
color: #39215b;
|
||||
border-color: #39215b;
|
||||
}
|
||||
|
||||
.generalModelOperate_btn_ok{
|
||||
margin-left: 10rem;
|
||||
background: #39215b;
|
||||
border-color: #39215b;
|
||||
color: #fff;
|
||||
}
|
||||
.generalModelOperate_btn_ok:hover{
|
||||
border-color: #543087;
|
||||
background: #543087;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-modal-body{
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="modal_component Export"
|
||||
class="modal_component Export generalModelOperate"
|
||||
v-model:visible="showUpgradePlan"
|
||||
:footer="null"
|
||||
width="78%"
|
||||
@@ -9,29 +9,29 @@
|
||||
:closable="false"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="UpgradePlan_closeIcon">
|
||||
<div class="UpgradePlan_closeIcon generalModelOperate_closeIcon ">
|
||||
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
|
||||
</div>
|
||||
<div class="UpgradePlan_content">
|
||||
<div>Edit & Export</div>
|
||||
<div class="UpgradePlan_content generalModelOperate">
|
||||
<div>{{ $t('exportModel.EditExport') }}</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<canvas ref="exportCanvas"></canvas>
|
||||
</div> -->
|
||||
<div class="exportCanvasBox">
|
||||
<div class="exportCanvasBox_left">
|
||||
<div class="exportCanvasBox_title">Canvas Size</div>
|
||||
<div class="exportCanvasBox_title">{{ $t('exportModel.CanvasSize') }}</div>
|
||||
|
||||
<label>
|
||||
<!-- <label>
|
||||
<div>Width:</div>
|
||||
<input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
|
||||
</label>
|
||||
</label> -->
|
||||
<label>
|
||||
<div>Height:</div>
|
||||
<div>{{ $t('exportModel.Height') }}:</div>
|
||||
<input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height" />
|
||||
</label>
|
||||
<div class="exportCanvasBox_title" @click.stop="setCloseNav('nav')">
|
||||
Canvas Nav
|
||||
{{ $t('exportModel.CanvasNav') }}
|
||||
<div
|
||||
:class="[
|
||||
'icon',
|
||||
@@ -46,8 +46,13 @@
|
||||
<div
|
||||
class="exportCanvasBox_allItem"
|
||||
v-for="(item,key) in allBoardData"
|
||||
>
|
||||
<div v-if="item[0]" class="exportCanvasBox_intro">{{ key }}</div>
|
||||
>
|
||||
|
||||
<div v-if="item[0] && key == 'disposeMoodboard'" class="exportCanvasBox_intro">Entirety Moodboard</div>
|
||||
<div v-if="item[0] && key == 'moodboardFiles'" class="exportCanvasBox_intro">Moodboard</div>
|
||||
<div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
|
||||
<div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
|
||||
<div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
|
||||
<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'" v-for="colorItem in item" draggable="true" @dragstart="onDragstart(key,colorItem)">
|
||||
<img src="" alt="">
|
||||
<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
|
||||
@@ -62,12 +67,14 @@
|
||||
draggable
|
||||
@dragstart="onDragstart(key,imgItem)"
|
||||
>
|
||||
<img :src="key == 'likeDesignCollectionList'?imgItem.designOutfitUrl:imgItem.imgUrl" alt="" />
|
||||
<div class="exportCanvasBox_img">
|
||||
<img :src="key == 'likeDesignCollectionList'?imgItem.designOutfitUrl:imgItem.imgUrl" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exportCanvasBox_title" @click.stop="setCloseNav('tool')">
|
||||
Canvas Tool
|
||||
{{ $t('exportModel.CanvasTool') }}
|
||||
<div
|
||||
:class="[
|
||||
'icon',
|
||||
@@ -91,15 +98,15 @@
|
||||
|
||||
<div class="exportCanvasBox_left_tool_item">
|
||||
<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
|
||||
<div >Color</div>
|
||||
<div >{{ $t('exportModel.Color') }}</div>
|
||||
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
|
||||
</label>
|
||||
<label v-show="operation != 'move'">
|
||||
<div >Size:</div>
|
||||
<div >{{ $t('exportModel.Size') }}:</div>
|
||||
<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
|
||||
</label>
|
||||
<label v-show="operation == 'pencil'">
|
||||
<div >Brushwork:</div>
|
||||
<div >{{ $t('exportModel.Brushwork') }}:</div>
|
||||
<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
|
||||
style="flex: 1"
|
||||
@change="brushworkChange"
|
||||
@@ -111,7 +118,7 @@
|
||||
</a-select>
|
||||
</label>
|
||||
<label v-show="operation == 'texture'" class="texture">
|
||||
<div >Texture:</div>
|
||||
<div >{{ $t('exportModel.Texture') }}:</div>
|
||||
<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
|
||||
style="flex: 1"
|
||||
@change="textureValueChange"
|
||||
@@ -123,14 +130,14 @@
|
||||
</a-select>
|
||||
</label>
|
||||
<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'texture'">
|
||||
<div >FillBack:</div>
|
||||
<div >{{ $t('exportModel.FillBack') }}:</div>
|
||||
<div class="exportCanvasBox_left_tool_item leftAlign">
|
||||
<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
|
||||
<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
|
||||
</div>
|
||||
</label>
|
||||
<label v-show="operation === 'move'">
|
||||
<div >Layer:</div>
|
||||
<div >{{ $t('exportModel.Layer') }}:</div>
|
||||
<div class="exportCanvasBox_left_tool_item">
|
||||
<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
|
||||
<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
|
||||
@@ -141,7 +148,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
|
||||
More
|
||||
{{ $t('exportModel.More') }}
|
||||
<div
|
||||
:class="[
|
||||
'icon',
|
||||
@@ -160,15 +167,27 @@
|
||||
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
|
||||
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
|
||||
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
|
||||
<label class="uploadImage">
|
||||
<i class="icon iconfont icon-shangchuantupian" :class="{active:operation == 'ellipse'}"></i>
|
||||
<input type="file" @change="uploadImage">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="exportCanvasBox_left_bottom">
|
||||
<div class="exportCanvasBox_left_credits" v-show="credits<1">
|
||||
<div><span class="icon iconfont icon-zhuyi"></span>{{ $t('exportModel.insufficient') }}</div>
|
||||
</div>
|
||||
<div class="exportCanvasBox_left_btn">
|
||||
<div class="subitOkPreviewBtn" :class="{active:credits<1}" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div>
|
||||
<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">{{ $t('exportModel.Export') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="exportCanvasBox_center">
|
||||
<!-- <canvas ref="canvasDom" id="exportCanvas"></canvas> -->
|
||||
</div>
|
||||
<!-- <ExportNewCoolection ref="ExportNewCoolection"></ExportNewCoolection> -->
|
||||
<div class="exportCanvasBox_right">
|
||||
<!-- <div class="exportCanvasBox_right">
|
||||
<div class="exportCanvasBox_title">
|
||||
High-definition Download
|
||||
</div>
|
||||
@@ -178,19 +197,52 @@
|
||||
<input type="number" @input="setMaxInput('scale', 500)" v-model="scaleSR"/>
|
||||
</label>
|
||||
</div>
|
||||
<!-- <div class="" @click="multiselect">all</div> -->
|
||||
<div class="" @click="multiselect">all</div>
|
||||
<div class="exportCanvasBox_right_credits" v-show="credits<1">
|
||||
<div><span class="icon iconfont icon-zhuyi"></span>Your points balance is insufficient, if you need to use this feature, please click the top left corner to recharge</div>
|
||||
</div>
|
||||
<div class="exportCanvasBox_right_btn">
|
||||
<div class="subitOkPreviewBtn" :class="{active:credits<1}" @click="setHDExport">HD Export</div>
|
||||
<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">Export</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
<a-modal
|
||||
v-model:visible="showSRExport"
|
||||
class="modal_component SRExport generalModelOperate"
|
||||
width="48%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:keyboard="false"
|
||||
:footer="null"
|
||||
:mask="false"
|
||||
>
|
||||
<div class="generalModelOperate_closeIcon">
|
||||
<i class="fi fi-rr-cross-small" @click.stop="cancelSRExport()"></i>
|
||||
</div>
|
||||
<div class="modal_title_text">
|
||||
<div class="modal_title_text_max">{{ $t('exportModel.SR') }}</div>
|
||||
<div class="modal_title_text_intro">{{ $t('exportModel.requiresCredits') }}</div>
|
||||
</div>
|
||||
<div class="SRExport_operate">
|
||||
<label>
|
||||
<div>{{ $t('exportModel.Scale') }}:</div>
|
||||
<input type="number" @input="setMaxInput('scale', 500)" v-model="scaleSR"/>
|
||||
</label>
|
||||
<div :class="['check_all_block',allChecked ? 'check_all' : '']" @click="selectAllImg()">
|
||||
<div class="check_block"><div class="check_block_body"></div></div>
|
||||
<div>all</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="SRExport_img">
|
||||
<img v-for="item in allExportSR" @click="selectImg(item)" class="SRExport_img_item" :class="[item.checked? 'active':'']" :src="item.imgUrl" alt="">
|
||||
</div>
|
||||
<div class="generalModelOperate_endBtn">
|
||||
<div class="generalModelOperate_btn_cancel" @click="cancelSRExport">{{ $t('exportModel.Cancel') }}</div>
|
||||
<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*30)?'active':'']" @click="setExportSR">OK</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
@@ -204,9 +256,11 @@ import { useStore } from "vuex";
|
||||
import JSZip, { forEach } from "jszip";
|
||||
// import fabric from 'fabric';
|
||||
import { message, Modal } from "ant-design-vue";
|
||||
import domTurnImg from '@/tool/domTurnImg'
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
const FileSaver = require("file-saver");
|
||||
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
scaleImage,
|
||||
@@ -214,6 +268,7 @@ export default defineComponent({
|
||||
},
|
||||
props: ["msg", "sketchCatecoryList"],
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n()
|
||||
let driver__ = computed(()=>{
|
||||
return store.state.Guide.guide
|
||||
})
|
||||
@@ -226,8 +281,9 @@ export default defineComponent({
|
||||
width: 400,
|
||||
height: 1200,
|
||||
});
|
||||
canvasWH.value.width = [window.innerWidth/2.4]
|
||||
canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
|
||||
|
||||
// canvasWH.value.width = [window.innerWidth/2.4]
|
||||
// canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
|
||||
let credits = computed(() => {
|
||||
return store.state.UserHabit.credits.value;
|
||||
});
|
||||
@@ -260,6 +316,8 @@ export default defineComponent({
|
||||
reverseCanvasState.value = []
|
||||
showUpgradePlan.value = true;
|
||||
nextTick().then(async () => {
|
||||
let exportCanvasBoxCanvas = document.querySelector('.exportCanvasBox_center')
|
||||
canvasWH.value.width = exportCanvasBoxCanvas.offsetWidth - 10
|
||||
allBoardData.value.likeDesignCollectionList =
|
||||
likeDesignCollectionList;
|
||||
let canvasBox = document.querySelector(
|
||||
@@ -631,17 +689,28 @@ export default defineComponent({
|
||||
};
|
||||
//关闭画布
|
||||
let cancelDsign = () => {
|
||||
showUpgradePlan.value = false;
|
||||
position = {
|
||||
//设置每个图形位置的初始值
|
||||
x: 0,
|
||||
y: 0,
|
||||
height: 0,
|
||||
};
|
||||
operation.value = 'move'
|
||||
operation.value = 'fill'
|
||||
|
||||
|
||||
Modal.confirm({
|
||||
title: 'Canvas edit content is not saved, whether to leave the page',
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
showUpgradePlan.value = false;
|
||||
position = {
|
||||
//设置每个图形位置的初始值
|
||||
x: 0,
|
||||
y: 0,
|
||||
height: 0,
|
||||
};
|
||||
operation.value = 'move'
|
||||
operation.value = 'fill'
|
||||
},
|
||||
// onCancel(){
|
||||
// _this.isShowMark = false
|
||||
// resolve(false)
|
||||
// }
|
||||
});
|
||||
};
|
||||
//设置画布宽高
|
||||
let setMaxInput = (str, maxNum) => {
|
||||
@@ -944,6 +1013,23 @@ export default defineComponent({
|
||||
let setOperationMode = (str) =>{
|
||||
operationMode.value = str
|
||||
}
|
||||
let uploadImage = (event)=>{
|
||||
console.log(event);
|
||||
let input = document.querySelector('.uploadImage input')
|
||||
const file = event.target.files[0];
|
||||
console.log(file);
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
fabric.Image.fromURL(e.target.result,(img) => {
|
||||
setCanvasImage(img,"sketchboardFiles",0,canvas.wrapperEl.parentNode.scrollTop)
|
||||
canvas.add(img);
|
||||
},{ crossOrigin: "Anonymous" })
|
||||
input.value = ''
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
let setLayerIndex = (str) =>{//设置优先级
|
||||
var activeObject = canvas.getActiveObject();
|
||||
switch (str) {
|
||||
@@ -1230,59 +1316,147 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
let setHDExport = async ()=>{//获取选中内容的位置信息
|
||||
let {url,imageType} = await exportSele(canvas,'jpeg')
|
||||
if(!imageType){
|
||||
message.info('Please select the region of SR')
|
||||
if(allBoardData.value.printboardFiles.length <= 0){
|
||||
message.info('Your print is empty')
|
||||
return
|
||||
}
|
||||
let img = new Image
|
||||
img.src = url
|
||||
let imgStyle = {
|
||||
'width': '80%',
|
||||
'max-height': '30rem',
|
||||
'object-fit': 'contain',
|
||||
'position': 'relative',
|
||||
'left': '50%',
|
||||
'transform': 'translateX(-50%)',
|
||||
if(credits.value < 30){
|
||||
message.info('Your points are less than one SR')
|
||||
// return
|
||||
}
|
||||
let imgElement = createVNode('img',{src:url,style:imgStyle})
|
||||
img.onload = ()=>{
|
||||
Modal.confirm({
|
||||
title: 'SR needs 300 points, whether to continue？',
|
||||
icon: false,
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
content: imgElement,
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
if(img.width*scaleSR.value>4069 || img.height*scaleSR.value>4069){
|
||||
message.info('Your selected area and SR magnification are more than 4096 pixels,Please re-select.')
|
||||
return
|
||||
}
|
||||
let data = {
|
||||
images: url,
|
||||
scale: scaleSR.value,
|
||||
uniqueId: "",
|
||||
imageType:imageType,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
|
||||
console.log(rv);
|
||||
store.dispatch('getCredits')
|
||||
emit('setTask')
|
||||
});
|
||||
},
|
||||
// onCancel(){
|
||||
// _this.isShowMark = false
|
||||
// resolve(false)
|
||||
// }
|
||||
});
|
||||
showSRExport.value = true
|
||||
let arr = []
|
||||
if(allBoardData.value.printboardFiles){
|
||||
allBoardData.value.printboardFiles.forEach((item)=>{
|
||||
arr.push({
|
||||
imgUrl:item.imgUrl,
|
||||
checked:true,
|
||||
})
|
||||
})
|
||||
}
|
||||
allExportSR.value = arr
|
||||
allChecked.value = true
|
||||
|
||||
//多选导出转高清暂时不用
|
||||
|
||||
// let {url,imageType} = await exportSele(canvas,'jpeg')
|
||||
// if(!imageType){
|
||||
// message.info('Please select the region of SR')
|
||||
// return
|
||||
// }
|
||||
// let img = new Image
|
||||
// img.src = url
|
||||
// let imgStyle = {
|
||||
// 'width': '80%',
|
||||
// 'max-height': '30rem',
|
||||
// 'object-fit': 'contain',
|
||||
// 'position': 'relative',
|
||||
// 'left': '50%',
|
||||
// 'transform': 'translateX(-50%)',
|
||||
// }
|
||||
// let imgElement = createVNode('img',{src:url,style:imgStyle})
|
||||
// img.onload = ()=>{
|
||||
// Modal.confirm({
|
||||
// title: 'SR needs 300 points, whether to continue？',
|
||||
// icon: false,
|
||||
// okText: 'Yes',
|
||||
// cancelText: 'No',
|
||||
// content: imgElement,
|
||||
// mask:false,
|
||||
// centered:true,
|
||||
// onOk() {
|
||||
// if(img.width*scaleSR.value>4069 || img.height*scaleSR.value>4069){
|
||||
// message.info('Your selected area and SR magnification are more than 4096 pixels,Please re-select.')
|
||||
// return
|
||||
// }
|
||||
// let data = {
|
||||
// images: url,
|
||||
// scale: scaleSR.value,
|
||||
// uniqueId: "",
|
||||
// imageType:imageType,
|
||||
// }
|
||||
// Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
|
||||
// console.log(rv);
|
||||
// store.dispatch('getCredits')
|
||||
// emit('setTask')
|
||||
// });
|
||||
// },
|
||||
// // onCancel(){
|
||||
// // _this.isShowMark = false
|
||||
// // resolve(false)
|
||||
// // }
|
||||
// });
|
||||
// }
|
||||
}
|
||||
let allExportSR = ref([])
|
||||
let scaleSR = ref(2);
|
||||
let showSRExport = ref(false)
|
||||
let cancelSRExport = ()=>{
|
||||
allExportSR.value = []
|
||||
showSRExport.value = false
|
||||
}
|
||||
let allChecked = ref(false)
|
||||
let selectImg = (item)=>{
|
||||
item.checked = !item.checked
|
||||
let arr = allExportSR.value.filter((item)=>item.checked)
|
||||
if(arr.length == allExportSR.value.length){
|
||||
allChecked.value = true
|
||||
}else{
|
||||
allChecked.value = false
|
||||
}
|
||||
}
|
||||
let scaleSR = ref(2);
|
||||
let selectAllImg = ()=>{
|
||||
allChecked.value = !allChecked.value
|
||||
allExportSR.value.forEach((item)=>{
|
||||
item.checked = allChecked.value
|
||||
})
|
||||
}
|
||||
let setExportSR = ()=>{
|
||||
let arr = []
|
||||
let data = []
|
||||
console.log(allExportSR.value);
|
||||
if(allExportSR.value.filter(item=> item.checked ).length <= 0){
|
||||
message.info('Your print is empty')
|
||||
return
|
||||
}
|
||||
if(credits < (allExportSR.value.filter(item=> item.checked ).length*30)){
|
||||
message.info('Your points balance is insufficient')
|
||||
return
|
||||
}
|
||||
allExportSR.value.forEach(async (item,index)=>{
|
||||
let obj = {}
|
||||
await new Promise((resolve,reject)=>{
|
||||
if(item.checked){
|
||||
obj = {
|
||||
images:item.imgUrl,
|
||||
scale: scaleSR.value,
|
||||
uniqueId: "",
|
||||
}
|
||||
data.push(obj)
|
||||
let img = new Image
|
||||
img.onload = ()=>{
|
||||
if(img.width*scaleSR.value>4069 || img.height*scaleSR.value>4069){
|
||||
arr.push(index)
|
||||
}
|
||||
}
|
||||
img.src = item.imgUrl
|
||||
}
|
||||
})
|
||||
})
|
||||
if(arr.length > 0){
|
||||
let str = arr.join(',')
|
||||
message.info(`You selected the ${str} image and zoom ratio more than 4090,`)
|
||||
return
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
|
||||
store.dispatch('getCredits')
|
||||
emit('setTask')
|
||||
cancelSRExport()
|
||||
});
|
||||
}
|
||||
onMounted(() => {});
|
||||
|
||||
return {
|
||||
t,
|
||||
showUpgradePlan,//当前弹窗是否打开
|
||||
canvasWH,//画布初始宽高
|
||||
credits,//积分 用来判断HD导出积分是否够用
|
||||
@@ -1301,6 +1475,7 @@ export default defineComponent({
|
||||
operationMode,//设置矩形是边框还是填充
|
||||
setOperation,//设置当前鼠标状态绘画或者矩形或者移动方法
|
||||
setOperationMode,//设置矩形是边框还是填充方法
|
||||
uploadImage,//上传图帕
|
||||
setLayerIndex,//设置选中元素的层级
|
||||
brushList,//笔触列表
|
||||
textureList,//材质列表
|
||||
@@ -1314,6 +1489,14 @@ export default defineComponent({
|
||||
brushworkValue,//当前笔触
|
||||
textureValue,//当前材质
|
||||
scaleSR,
|
||||
//SR页面
|
||||
showSRExport,
|
||||
allExportSR,
|
||||
cancelSRExport,//关闭高清导出
|
||||
allChecked,//全选
|
||||
selectAllImg,//控制全选
|
||||
selectImg,//选中单个图片
|
||||
setExportSR,//设置SR导出
|
||||
};
|
||||
},
|
||||
data(prop) {
|
||||
@@ -1340,41 +1523,12 @@ export default defineComponent({
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.Export {
|
||||
flex: 1;
|
||||
// height: 30rem;
|
||||
// overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
position: relative;
|
||||
.UpgradePlan_content {
|
||||
font-size: var(--aida-fsize2);
|
||||
font-weight: 900;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.UpgradePlan_closeIcon {
|
||||
top: calc(2rem * 1.2);
|
||||
right: calc(2rem * 1.2);
|
||||
cursor: pointer;
|
||||
width: calc(4rem * 1.2);
|
||||
height: calc(4rem * 1.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
.fi-rr-cross-small::before {
|
||||
padding: calc(0.2rem * 1.2);
|
||||
border-radius: 5px;
|
||||
border: solid 2px rgba(0, 0, 0, 0.25);
|
||||
transition: 1s all;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
&.UpgradePlan_closeIcon:hover .fi-rr-cross-small::before {
|
||||
border: solid 2px rgba(0, 0, 0, 0.55);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.exportCanvasBox {
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
@@ -1448,7 +1602,28 @@ export default defineComponent({
|
||||
.exportCanvasBox_left::-webkit-scrollbar,
|
||||
.exportCanvasBox_right::-webkit-scrollbar{display: none;}
|
||||
.exportCanvasBox_left {
|
||||
padding-right: 1rem;
|
||||
padding-right: 1rem;
|
||||
margin-right: 2rem;
|
||||
.exportCanvasBox_left_bottom{
|
||||
position: sticky;
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
bottom: 0;
|
||||
.exportCanvasBox_left_btn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 2rem;
|
||||
.subitOkPreviewBtn{
|
||||
position: initial;
|
||||
transform: none;
|
||||
&.active{
|
||||
opacity: .7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.exportCanvasBox_title {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
@@ -1467,13 +1642,29 @@ export default defineComponent({
|
||||
flex-wrap: wrap;
|
||||
.exportCanvasBox_item {
|
||||
text-align: center;
|
||||
img {
|
||||
max-width: 7rem;
|
||||
max-height: 7rem;
|
||||
object-fit: contain;
|
||||
.exportCanvasBox_img{
|
||||
position: relative;
|
||||
margin-right: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
img {
|
||||
max-width: 7rem;
|
||||
max-height: 7rem;
|
||||
object-fit: contain;
|
||||
|
||||
}
|
||||
.exportCanvasBox_img_SR{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 2rem;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.exportCanvasBox_item_color{
|
||||
width: 8rem;
|
||||
@@ -1521,37 +1712,34 @@ export default defineComponent({
|
||||
border-radius: .4rem;
|
||||
}
|
||||
}
|
||||
.uploadImage{
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
input{
|
||||
height: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.exportCanvasBox_right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 1rem;
|
||||
position: relative;
|
||||
.exportCanvasBox_right_definition{
|
||||
// display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
.exportCanvasBox_right_credits{
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.exportCanvasBox_right_btn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.subitOkPreviewBtn{
|
||||
position: initial;
|
||||
transform: none;
|
||||
&.active{
|
||||
opacity: .7;
|
||||
cursor: not-allowed;
|
||||
pointer-events:none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// .exportCanvasBox_right{
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// padding-left: 1rem;
|
||||
// position: relative;
|
||||
// .exportCanvasBox_right_definition{
|
||||
// // display: flex;
|
||||
// flex: 1;
|
||||
// }
|
||||
// .exportCanvasBox_right_credits{
|
||||
// margin-bottom: 2rem;
|
||||
// }
|
||||
|
||||
// }
|
||||
.exportCanvasBox_center {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@@ -1566,36 +1754,11 @@ export default defineComponent({
|
||||
<style lang="less">
|
||||
.Export {
|
||||
.ant-modal-content {
|
||||
border-radius: calc(1rem * 1.2);
|
||||
overflow: hidden;
|
||||
.ant-modal-header {
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
}
|
||||
.ant-modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: calc(5rem * 1.2) calc(5rem * 1.2) !important;
|
||||
// height: calc(65vh - 6.4rem);
|
||||
height: calc(65rem * 1.2);
|
||||
background: #f9fafb;
|
||||
}
|
||||
//进度完成字体颜色
|
||||
.ant-progress-circle.ant-progress-status-success .ant-progress-text {
|
||||
color: #000;
|
||||
}
|
||||
.ant-progress-circle .ant-progress-text {
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
font-size: calc(1.6rem * 1.2);
|
||||
}
|
||||
}
|
||||
.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{
|
||||
border-color: #d9d9d9;
|
||||
box-shadow: none;
|
||||
}
|
||||
.ant-select:hover .ant-select-selector{
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
|
||||
}
|
||||
.label_select_item{
|
||||
img{
|
||||
@@ -1604,4 +1767,87 @@ export default defineComponent({
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.SRExport{
|
||||
.ant-modal-body{
|
||||
height: calc(35rem* 1.2);
|
||||
}
|
||||
.SRExport_img{
|
||||
margin-bottom: 2rem;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
img{
|
||||
width: 10rem;
|
||||
max-height: 10rem;
|
||||
object-fit: contain;
|
||||
text-align: center;
|
||||
margin-right: 2rem;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
transform: scale(.8);
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.check_all_block{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.6rem;
|
||||
color: #64686D;
|
||||
cursor: pointer;
|
||||
justify-content: flex-end;
|
||||
&.check_all{
|
||||
color: #1A1A1A;
|
||||
.check_block{
|
||||
.check_block_body{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.check_block{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
background: #EBECF4;
|
||||
border: 0.1rem solid #64686D;
|
||||
padding: 0.3rem;
|
||||
margin-right: 0.7rem;
|
||||
.check_block_body{
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
height: 100%;
|
||||
background: #343579;
|
||||
}
|
||||
}
|
||||
}
|
||||
.SRExport_operate{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
width: 100%;
|
||||
div {
|
||||
width: 8rem;
|
||||
}
|
||||
input {
|
||||
// width: 10em;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
.generalModelOperate_endBtn{
|
||||
.generalModelOperate_btn_ok{
|
||||
&.active{
|
||||
opacity: .6;
|
||||
cursor: no-drop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -3,15 +3,15 @@
|
||||
v-model:visible="visible"
|
||||
class="task_page"
|
||||
style="color: #000"
|
||||
title="Task List"
|
||||
:title="$t('taskPage.TaskList')"
|
||||
placement="right"
|
||||
@after-visible-change="afterVisibleChange"
|
||||
>
|
||||
<template #extra>
|
||||
<div class="button_second" @click="openTaskDetailPage">Detailed Task</div>
|
||||
</template>
|
||||
<div class="task_content">
|
||||
<div class="task_content_item" v-for="item in taskList">
|
||||
<div class="task_content_select">
|
||||
<a-select @visibleChange="visibleChange()" v-model:value="currentState.value" size="large" optionFilterProp="label" :options="state" placeholder="Please select" :getPopupContainer="getPopupContainer" allowClear show-search></a-select>
|
||||
</div>
|
||||
<!-- <div class="task_content_item" v-for="item in taskList">
|
||||
<img v-if="item.status !== 'success'" src="@/assets/images/homePage/loading.gif" alt="">
|
||||
<img v-else :src="item.inputParam.images" alt="">
|
||||
<div class="task_content_item_text">
|
||||
@@ -23,16 +23,14 @@
|
||||
<div class="task_content_item_text_left_titile">{{ item.status }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task_content_more" v-show="taskListMore.length == 0" @click="getTaskMoreList">
|
||||
</div> -->
|
||||
<!-- <div class="task_content_more" v-show="taskListMore.length == 0" @click="getTaskMoreList">
|
||||
点击查看更多
|
||||
</div>
|
||||
<div class="task_content_select" v-show="taskListMore.length > 0">
|
||||
<a-select :visibleChange="visibleChange()" v-model:value="currentState.value" size="large" optionFilterProp="label" :options="state" placeholder="Please select" :getPopupContainer="getPopupContainer" allowClear show-search></a-select>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="task_content_item" v-for="item in taskListMore">
|
||||
<img v-if="item.status !== 'success'" src="@/assets/images/homePage/loading.gif" alt="">
|
||||
<img v-else :src="item.inputParam.images" alt="">
|
||||
<img v-if="item.status == 'Waiting' || item.status == 'Executing'" src="@/assets/images/homePage/loading.gif" alt="">
|
||||
<img v-else :src="item.inputImage" alt="">
|
||||
<div class="task_content_item_text">
|
||||
<div class="task_content_item_text_left modal_title_text">
|
||||
<div class="task_content_item_text_left_titile">{{ item.imageName }}</div>
|
||||
@@ -40,6 +38,7 @@
|
||||
</div>
|
||||
<div class="task_content_item_text_right modal_title_text">
|
||||
<div class="task_content_item_text_left_titile">{{ item.status }}</div>
|
||||
<div v-show="item.status === 'success'" @click="setDownloadIamge(item)" class="task_content_item_text_left_into modal_title_text_intro ">{{ $t('taskPage.download') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,29 +46,34 @@
|
||||
<img src="@/assets/images/homePage/loading.gif" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<TaskDetailPage ref="TaskDetailPage"></TaskDetailPage>
|
||||
<!-- <TaskDetailPage ref="TaskDetailPage"></TaskDetailPage> -->
|
||||
</a-drawer>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { message, Upload } from "ant-design-vue";
|
||||
import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
|
||||
import { defineComponent, computed, h, ref,toRefs, nextTick, inject,reactive } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { downloadIamge } from "@/tool/util";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useStore } from "vuex";
|
||||
// import { forEach } from "jszip";
|
||||
import TaskDetailPage from "@/component/HomePage/TaskDetailPage.vue";
|
||||
// import TaskDetailPage from "@/component/HomePage/TaskDetailPage.vue";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
TaskDetailPage,
|
||||
// TaskDetailPage,
|
||||
},
|
||||
props: ["msg",'sketchCatecoryList'],
|
||||
setup() {
|
||||
let { t } = useI18n();
|
||||
// console.log(prop.msg);
|
||||
let filter = reactive({
|
||||
currentPage:1,
|
||||
pageSize:10,
|
||||
total:0
|
||||
})
|
||||
const store = useStore();
|
||||
let visible = ref<boolean>(false);
|
||||
let taskList = ref([
|
||||
|
||||
])
|
||||
let taskListUnfinished:any = ref([])
|
||||
let taskListMore:any = ref([])
|
||||
let state:any = ref([
|
||||
{
|
||||
@@ -85,72 +89,52 @@ export default defineComponent({
|
||||
value:'SR',
|
||||
})
|
||||
let getTaskTime:any = null
|
||||
let oldTaskListMore:any = ref([])
|
||||
return {
|
||||
...toRefs(filter),
|
||||
store,
|
||||
visible,
|
||||
taskList,
|
||||
taskListUnfinished,
|
||||
taskListMore,
|
||||
state,
|
||||
currentState,
|
||||
getTaskTime,
|
||||
oldTaskListMore,
|
||||
t,
|
||||
};
|
||||
},
|
||||
data(prop) {
|
||||
data() {
|
||||
return {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 99,
|
||||
// currentPage: 1,
|
||||
// pageSize: 10,
|
||||
// total: 0,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
directives:{
|
||||
// observe:{
|
||||
// mounted (el,binding) {
|
||||
// // console.log(binding.instance);
|
||||
// const ob = new IntersectionObserver(callback,{
|
||||
// root:null,
|
||||
// threshold:[0.1]
|
||||
// })
|
||||
// ob.observe(el)
|
||||
// // this.currentPage = 1
|
||||
// // this.pageSize = 12
|
||||
// let this_:any = binding.instance
|
||||
// function callback(entries:any, observer:any) {
|
||||
// entries.forEach((entry:any) => {
|
||||
// if (entry.isIntersecting) {
|
||||
// this_.getTaskMoreList()
|
||||
// } else {
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
observe:{
|
||||
mounted (el,binding) {
|
||||
// console.log(binding.instance);
|
||||
const ob = new IntersectionObserver(callback,{
|
||||
root:null,
|
||||
threshold:[0.1]
|
||||
})
|
||||
ob.observe(el)
|
||||
// this.currentPage = 1
|
||||
// this.pageSize = 12
|
||||
let this_:any = binding.instance
|
||||
function callback(entries:any, observer:any) {
|
||||
entries.forEach((entry:any) => {
|
||||
if (entry.isIntersecting) {
|
||||
this_.getTaskMoreList()
|
||||
} else {
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
taskList:{
|
||||
handler(newVal,oldVal){
|
||||
if(oldVal.length > 0){
|
||||
let newSuccess = newVal.filter((item:any)=>item.status == 'success')
|
||||
let oldSuccess = oldVal.filter((item:any)=>item.status == 'success')
|
||||
// const exportSR = newSuccess.filter((item:any) => !oldSuccess.includes(item));
|
||||
// console.log(JSON.parse(JSON.stringify(newSuccess)),JSON.parse(JSON.stringify(oldSuccess)));
|
||||
// console.log(exportSR);
|
||||
let difference = newSuccess.filter((objA:any) => !oldSuccess.some((objB:any) => objA.id === objB.id));
|
||||
if(difference.length > 0){
|
||||
difference.forEach((item:any)=>{
|
||||
downloadIamge(item.outputImage,item.imageName)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
getPopupContainer(){
|
||||
@@ -159,7 +143,8 @@ export default defineComponent({
|
||||
},
|
||||
init(){
|
||||
this.visible = true
|
||||
this.getTaskList()
|
||||
// this.getTaskList()
|
||||
this.getTaskMoreList()
|
||||
},
|
||||
sort(arr:any){
|
||||
arr.sort((a:any, b:any) => {
|
||||
@@ -171,45 +156,85 @@ export default defineComponent({
|
||||
},
|
||||
afterVisibleChange(bool:any){
|
||||
if(!bool){
|
||||
this.taskListMore = []
|
||||
// clearTimeout(this.getTaskTime)
|
||||
// this.taskListMore = []
|
||||
}
|
||||
},
|
||||
|
||||
openTaskDetailPage(){
|
||||
let taskDetailPage:any = this.$refs.TaskDetailPage
|
||||
this.visible = false
|
||||
taskDetailPage.init()
|
||||
},
|
||||
visibleChange(){
|
||||
this.pageSize = 10
|
||||
this.currentPage = 1
|
||||
this.total = 0
|
||||
this.taskListMore = []
|
||||
this.getTaskMoreList()
|
||||
},
|
||||
getTaskList(){
|
||||
clearTimeout(this.getTaskTime)
|
||||
Https.axiosGet(Https.httpUrls.getTasksList).then((rv)=>{
|
||||
this.taskList = this.sort(rv)
|
||||
let isSuccess = rv.filter((item:any) => item.status == 'Waiting' || item.status == 'Executing')
|
||||
if(isSuccess.length>0){
|
||||
let arr = this.taskListUnfinished.map((item:any) => item.taskId)
|
||||
console.log(arr,this.taskListUnfinished);
|
||||
if(arr <= 0){
|
||||
return
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getTasksList,arr).then((rv)=>{
|
||||
this.taskListUnfinished.forEach((item:any,index:number) => {
|
||||
let rvIndex = rv.findIndex((rvItem:any)=>{
|
||||
if(rvItem.status == 'success'){
|
||||
downloadIamge(item.outputImage,item.imageName)
|
||||
}
|
||||
return rvItem.taskId == item.taskId
|
||||
})
|
||||
item = rv[rvIndex]
|
||||
this.taskListMore[item.index] = rv[rvIndex]
|
||||
console.log(this.taskListUnfinished);
|
||||
});
|
||||
this.taskListUnfinished.filter((unfinishedItem:any)=>{
|
||||
return unfinishedItem.status == 'Waiting' || unfinishedItem.status == 'Executing'
|
||||
})
|
||||
// this.taskList = this.sort(rv)
|
||||
// let isSuccess = rv.filter((item:any) => item.status == 'Waiting' || item.status == 'Executing')
|
||||
if(this.taskListUnfinished.length>0){
|
||||
this.getTaskTime = setTimeout(() => {
|
||||
this.getTaskList()
|
||||
}, 4000);
|
||||
}
|
||||
})
|
||||
},
|
||||
// getTaskMoreList(){
|
||||
// let data = {
|
||||
// size:this.pageSize,
|
||||
// page: this.currentPage,
|
||||
// type:this.currentState.value,
|
||||
// endTime: "",
|
||||
// startTime: "",
|
||||
// }
|
||||
// this.currentPage += 1
|
||||
// Https.axiosPost(Https.httpUrls.getTasksHistory,data).then((rv)=>{
|
||||
// this.taskListMore = rv
|
||||
// })
|
||||
// }
|
||||
getTaskMoreList(){
|
||||
let data = {
|
||||
size:this.pageSize,
|
||||
page: this.currentPage,
|
||||
type:this.currentState.value,
|
||||
endTime: "",
|
||||
startTime: "",
|
||||
}
|
||||
this.currentPage += 1
|
||||
Https.axiosPost(Https.httpUrls.getTasksHistory,data).then((rv)=>{
|
||||
if(this.currentPage > 1 && rv.content.length == 0){
|
||||
this.currentPage = 1
|
||||
this.getTaskMoreList()
|
||||
}else{
|
||||
this.taskListMore.push(...rv.content)
|
||||
this.total = rv.total
|
||||
this.taskListUnfinished = []
|
||||
this.taskListMore.forEach((item:any,index:number)=>{
|
||||
if(item.status == 'Waiting' || item.status == 'Executing'){
|
||||
item.index = index
|
||||
this.taskListUnfinished.push(item)
|
||||
}
|
||||
})
|
||||
console.log(this.getTaskTime);
|
||||
|
||||
if(!this.getTaskTime){
|
||||
this.getTaskList()
|
||||
}
|
||||
// if(this.taskListMore.indexOf('success'))
|
||||
}
|
||||
})
|
||||
},
|
||||
setDownloadIamge(item:any){
|
||||
console.log(item);
|
||||
downloadIamge(item.outputImage,item.imageName)
|
||||
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
|
||||
</div>
|
||||
<div class="UpgradePlan_content">
|
||||
<div>Buy credlts</div>
|
||||
<div>{{ $t('payOrder.BuyCredlts') }}</div>
|
||||
</div>
|
||||
<!-- <div v-show="stepNum == 0" class="UpgradePlan_nav">
|
||||
<div class="UpgradePlan_nav_content">
|
||||
@@ -59,20 +59,20 @@
|
||||
<div class="UpgradePlan_payList2_img">
|
||||
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_premium_thumb-300x300.jpg" alt="">
|
||||
</div>
|
||||
<div class="UpgradePlan_payList2_name">{{ price.credits * price.num }} credits</div>
|
||||
<div class="UpgradePlan_payList2_name">{{ price.credits * price.num }} {{ $t('payOrder.credits') }}</div>
|
||||
<div class="UpgradePlan_payList2_unitPrice">${{ price.price * price.num }} <span @click="setUnit">HKD</span></div>
|
||||
<div class="UpgradePlan_payList2_input">
|
||||
<div class="UpgradePlan_payList2_input_remo" @click="removePriceNum">-</div>
|
||||
<input type="number" v-model="price.num">
|
||||
<div class="UpgradePlan_payList2_input_add" @click="addPriceNum">+</div>
|
||||
</div>
|
||||
<div class="UpgradePlan_payList2_describe">All credits are shared within the {{ }} name organization</div>
|
||||
<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(1)">Continue</div>
|
||||
<div class="UpgradePlan_payList2_describe">{{ $t('payOrder.organization') }}</div>
|
||||
<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(1)">{{ $t('payOrder.Continue') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
|
||||
<div class="UpgradePlan_payAffirm_title">Select payment method</div>
|
||||
<div class="UpgradePlan_payAffirm_title">{{ $t('payOrder.payment') }}</div>
|
||||
<div class="UpgradePlan_payAffirm_content">
|
||||
<label>
|
||||
<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
|
||||
@@ -98,16 +98,16 @@
|
||||
</label>
|
||||
</div>
|
||||
<div class="UpgradePlan_payList_item_upgrade_btn">
|
||||
<div class="UpgradePlan_payList_item_upgrade1 subitOkPreviewBtn" @click="cancel">Cancel</div>
|
||||
<div class="UpgradePlan_payList_item_upgrade2 subitOkPreviewBtn" @click="payment">Payment</div>
|
||||
<div class="UpgradePlan_payList_item_upgrade1 subitOkPreviewBtn" @click="cancel">{{ $t('payOrder.Cancel') }}</div>
|
||||
<div class="UpgradePlan_payList_item_upgrade2 subitOkPreviewBtn" @click="payment">{{ $t('payOrder.Payment') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading bgFFF" v-show="isShowMark">
|
||||
<div class="mark_loading_title">Is payment completed</div>
|
||||
<div class="mark_loading_intro">Please keep the window open until the payment is completed. If you are unable to open the payment window, please check your browser settings to see if pop-ups are being blocked.Points may be delayed after successful payment. Please wait 1-3 minutes and click the credits refresh button</div>
|
||||
<div class="mark_loading_title">{{ $t('payOrder.completed') }}</div>
|
||||
<div class="mark_loading_intro">{{ $t('payOrder.hint') }}</div>
|
||||
|
||||
<div class="mark_loading_title_box">
|
||||
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">Back</div>
|
||||
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">{{ $t('payOrder.Back') }}</div>
|
||||
<div class="mark_loading_btn" @click="getTradeQuery">OK</div>
|
||||
</div>
|
||||
|
||||
@@ -120,6 +120,7 @@ import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import GO from "@/tool/GO";
|
||||
import { useI18n } from "vue-i18n";
|
||||
// import { forEach } from "jszip";
|
||||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
||||
export default defineComponent({
|
||||
@@ -129,6 +130,7 @@ export default defineComponent({
|
||||
props: ["msg",'sketchCatecoryList'],
|
||||
setup() {
|
||||
// console.log(prop.msg);
|
||||
let { t } = useI18n();
|
||||
const store = useStore();
|
||||
let showUpgradePlan = ref(false)
|
||||
let planNum = ref(2)
|
||||
@@ -145,6 +147,7 @@ export default defineComponent({
|
||||
let isShowMark = ref(false)
|
||||
let newWindow:any = ref()
|
||||
return {
|
||||
t,
|
||||
store,
|
||||
showUpgradePlan,
|
||||
planNum,
|
||||
|
||||
@@ -265,170 +265,8 @@ export default defineComponent({
|
||||
</script>
|
||||
<style lang="less">
|
||||
// .generalModel_modal {
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
}
|
||||
.generalModel_page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9rem;
|
||||
overflow: hidden;
|
||||
// min-width: 1440px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.generalModel_table_search {
|
||||
display: flex;
|
||||
margin-top: 2rem;
|
||||
padding: 2rem 3.5rem 5rem 2.8rem;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.generalModel_search{
|
||||
width: auto;
|
||||
.generalModel_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;
|
||||
}
|
||||
}
|
||||
.generalModel_state {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
flex-wrap: wrap;
|
||||
.generalModel_state_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 5rem;
|
||||
>span{
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
color: #030303;
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
min-width: 5rem;
|
||||
text-align: left;
|
||||
}
|
||||
.ant-picker-range{
|
||||
height: 5rem;
|
||||
}
|
||||
.ant-select-lg{
|
||||
font-size: 14px;
|
||||
.ant-select-selector{
|
||||
height: 5rem;
|
||||
.ant-select-selection-item{
|
||||
line-height: 5rem;
|
||||
}
|
||||
input{
|
||||
line-height: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.generalModel_current{
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header_user_content {
|
||||
position: absolute;
|
||||
border: 2px solid;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
transform: translateY(6rem);
|
||||
z-index: 2;
|
||||
display: none;
|
||||
margin-left: -2rem;
|
||||
.username{
|
||||
padding: 0 2rem;
|
||||
color: #000;
|
||||
}
|
||||
.username:hover{
|
||||
background: #e1e1e1;
|
||||
}
|
||||
&.active{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// }
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
}
|
||||
.generalModel_table_content {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
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;
|
||||
img{
|
||||
max-width: 100%;
|
||||
max-height: 10rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
justify-content: center;
|
||||
.operate_item {
|
||||
font-size: 1.4rem;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
color: #343579;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="generalModel_table_search">
|
||||
<div class="generalModel_state">
|
||||
<div class="generalModel_state_item">
|
||||
<span>Time:</span>
|
||||
<span>{{$t('allOrder.Time')}}:</span>
|
||||
<a-range-picker
|
||||
class="range_picker"
|
||||
v-model:value="rangePickerValue"
|
||||
@@ -79,38 +79,39 @@ export default defineComponent({
|
||||
},
|
||||
setup() {
|
||||
let renameData: any = ref({}); //修改名字选中的数据
|
||||
const {t} = useI18n()
|
||||
const columns: any = computed(() => {
|
||||
return [
|
||||
{
|
||||
title: "Serial",
|
||||
title: useI18n().t('allOrder.Serial'),
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
dataIndex: "orderNo",
|
||||
key: "orderNo",
|
||||
},
|
||||
{
|
||||
title: "Title",
|
||||
title: useI18n().t('allOrder.Title'),
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
dataIndex: "title",
|
||||
key: "title",
|
||||
},
|
||||
{
|
||||
title: "Money",
|
||||
title: useI18n().t('allOrder.Money'),
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
dataIndex: "totalFee",
|
||||
key: "totalFee",
|
||||
},
|
||||
{
|
||||
title: "Payment",
|
||||
title: useI18n().t('allOrder.Payment'),
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
dataIndex: "paymentType",
|
||||
key: "paymentType",
|
||||
},
|
||||
{
|
||||
title: "State",
|
||||
title: useI18n().t('allOrder.State'),
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
dataIndex: "orderStatus",
|
||||
@@ -152,6 +153,7 @@ export default defineComponent({
|
||||
userInfo,
|
||||
currentState,
|
||||
state,
|
||||
t,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -219,5 +221,6 @@ export default defineComponent({
|
||||
padding: 0 !important;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.generalModel_page {
|
||||
}
|
||||
</style>
|
||||
@@ -83,38 +83,39 @@ export default defineComponent({
|
||||
},
|
||||
setup() {
|
||||
let renameData: any = ref({}); //修改名字选中的数据
|
||||
const {t} = useI18n()
|
||||
const columns: any = computed(() => {
|
||||
return [
|
||||
{
|
||||
title: "Serial",
|
||||
{
|
||||
title: useI18n().t('allOrder.Serial'),
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
dataIndex: "orderNo",
|
||||
key: "orderNo",
|
||||
},
|
||||
{
|
||||
title: "Title",
|
||||
title: useI18n().t('allOrder.Title'),
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
dataIndex: "title",
|
||||
key: "title",
|
||||
},
|
||||
{
|
||||
title: "Money",
|
||||
title: useI18n().t('allOrder.Money'),
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
dataIndex: "totalFee",
|
||||
key: "totalFee",
|
||||
},
|
||||
{
|
||||
title: "Payment",
|
||||
title: useI18n().t('allOrder.Payment'),
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
dataIndex: "paymentType",
|
||||
key: "paymentType",
|
||||
},
|
||||
{
|
||||
title: "State",
|
||||
title: useI18n().t('allOrder.State'),
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
dataIndex: "orderStatus",
|
||||
@@ -139,11 +140,11 @@ export default defineComponent({
|
||||
})
|
||||
let state:any = ref([
|
||||
{
|
||||
label:'Income',
|
||||
label:useI18n().t('allOrder.Income'),
|
||||
value:'income',
|
||||
},
|
||||
{
|
||||
label:'Expend',
|
||||
label:useI18n().t('allOrder.Expend'),
|
||||
value:'expend',
|
||||
},
|
||||
])
|
||||
@@ -156,6 +157,7 @@ export default defineComponent({
|
||||
userInfo,
|
||||
currentState,
|
||||
state,
|
||||
t,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
|
||||
@@ -16,8 +16,8 @@
|
||||
</div>
|
||||
<div class="payOrder_page">
|
||||
<div class="payOrder_page_title">
|
||||
<div class="payOrder_page_title_item" @click="setState('paypal')" :class="{active:presentState == 'paypal'}">订单信息</div>
|
||||
<div class="payOrder_page_title_item" @click="setState('credits')" :class="{active:presentState == 'credits'}">积分信息</div>
|
||||
<div class="payOrder_page_title_item" @click="setState('paypal')" :class="{active:presentState == 'paypal'}">{{ $t('payOrder.OrderInformation') }}</div>
|
||||
<div class="payOrder_page_title_item" @click="setState('credits')" :class="{active:presentState == 'credits'}">{{ $t('payOrder.CreditsInformation') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="payOrder_table_content" ref="historyTable">
|
||||
|
||||
@@ -14,10 +14,66 @@ export default {
|
||||
verification:'Enter verification code',
|
||||
SentTo:'Sent to',
|
||||
Resend:'Resend',
|
||||
Credits:'Credits',
|
||||
TaskList:'Task List',
|
||||
ViewOrders:'View Orders',
|
||||
|
||||
jsContent1:'The email format is incorrect',
|
||||
jsContent2:'Succeeded in binding the mailbox.',
|
||||
jsContent3:`You have not performed any operation for a long time. You must be active;otherwise, you will log out in {numTime} S`,
|
||||
},
|
||||
allOrder:{
|
||||
Time:'Time',
|
||||
Serial:'Serial',
|
||||
Title:'Title',
|
||||
Money:'Money',
|
||||
Payment:'Payment',
|
||||
State:'State',
|
||||
Income:'Income',
|
||||
Expend:'Expend',
|
||||
},
|
||||
payOrder:{
|
||||
OrderInformation:'Order Information',
|
||||
CreditsInformation:'Credits Information',
|
||||
},
|
||||
exportModel:{
|
||||
EditExport:'>Edit & Export',
|
||||
CanvasSize:'Canvas Size',
|
||||
Height:'Height',
|
||||
CanvasNav:'Canvas Nav',
|
||||
CanvasTool:'Canvas Tool',
|
||||
Color:'Color',
|
||||
Size:'Size',
|
||||
Brushwork:'Brushwork',
|
||||
Texture:'Texture',
|
||||
FillBack:'FillBack',
|
||||
Layer:'Layer',
|
||||
More:'More',
|
||||
insufficient:'Your points balance is insufficient, if you need to use this feature, please click the top left corner to recharge',
|
||||
HDExport:'HD Export',
|
||||
Export:'Export',
|
||||
SR:'Please select the picture that requires SR',
|
||||
requiresCredits:'Each picture requires 300 credits',
|
||||
Scale:'Scale',
|
||||
Cancel:'Cancel',
|
||||
},
|
||||
upgradePlan:{
|
||||
BuyCredlts:'Buy credlts',
|
||||
credits:'credits',
|
||||
organization:'All credits are shared within the name organization',
|
||||
Continue:'Continue',
|
||||
payment:'Select payment method',
|
||||
Cancel:'Cancel',
|
||||
Payment:'Payment',
|
||||
completed:'Is payment completed',
|
||||
hint:'Please keep the window open until the payment is completed. If you are unable to open the payment window, please check your browser settings to see if pop-ups are being blocked.Points may be delayed after successful payment. Please wait 1-3 minutes and click the credits refresh button',
|
||||
Back:'Back',
|
||||
},
|
||||
taskPage:{
|
||||
TaskList:'Task List',
|
||||
download:'Download',
|
||||
|
||||
},
|
||||
Habit:{
|
||||
Workspace:'Workspace',
|
||||
WorkspaceSetting:'Workspace Setting',
|
||||
|
||||
@@ -211,8 +211,8 @@ export const Https = {
|
||||
//查询某个时间内design点击次数
|
||||
getDesignStatistic:`/api/inquiry/getDesignStatistic`,//拒绝审批
|
||||
|
||||
getTasksList:`/api/tasks/getList`,//获取当前那任务列表
|
||||
getTasksHistory:`/api/tasks/getHistory`,//获取所有任务列表
|
||||
getTasksList:`/api/tasks/getList`,//获取w为执行完的所有任务
|
||||
getTasksHistory:`/api/tasks/getAllTask`,//获取所有任务列表
|
||||
prepareForSR:`/api/python/prepareForSR`,//超分
|
||||
|
||||
|
||||
|
||||
@@ -28,7 +28,6 @@ function blobToFile(blob, fileName) {//给blob文件设置名字和日期
|
||||
blob.name = fileName;
|
||||
return blob;
|
||||
}
|
||||
|
||||
//下载图片
|
||||
function downloadIamge(imgsrc, name) { // 下载图片地址和图片名
|
||||
var image = new Image()
|
||||
|
||||
@@ -18,11 +18,10 @@
|
||||
></div>
|
||||
|
||||
</div>
|
||||
<div @click="openTask">abc</div>
|
||||
<div
|
||||
class="trialApproval button_second credits hideChecked"
|
||||
>
|
||||
Credits:
|
||||
{{$t('Header.Credits')}}:
|
||||
<span :title="credits">
|
||||
<!-- <div>{{ String(credits.value[credits.value.legnth-1]) }}</div> -->
|
||||
<div class="credits_item" v-for="item in String(credits)" :style="{'transform': 'translateY('+item*-100+'%)'}">
|
||||
@@ -62,10 +61,15 @@
|
||||
<span class="icon iconfont icon-yuyan"></span>
|
||||
<span class="select_item_des">{{$t('Header.language')}}</span>
|
||||
</div>
|
||||
<div class="select_item" @click="openTask()">
|
||||
|
||||
<i class="icon iconfont icon-renwu"></i>
|
||||
<span class="select_item_des">{{$t('Header.TaskList')}}</span>
|
||||
</div>
|
||||
<div class="select_item" @click="orderForm()">
|
||||
|
||||
<i class="fi fi-rs-notebook"></i>
|
||||
<span class="select_item_des">View Orders</span>
|
||||
<span class="select_item_des">{{$t('Header.ViewOrders')}}</span>
|
||||
</div>
|
||||
<div class="select_item" @click="logout()">
|
||||
<span class="icon iconfont icon-tuichu"></span
|
||||
|
||||
Reference in New Issue
Block a user