Merge branch 'StableVersion' into develop
This commit is contained in:
X1627315083
4
.env.dev
4
.env.dev
@@ -3,6 +3,6 @@ NODE_ENV = 'development'
|
|||||||
# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
|
# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
|
||||||
|
|
||||||
# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
|
# 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://develop.api.aida.com.hk'
|
||||||
# VUE_APP_BASE_URL = 'http://192.168.1.9:17088'
|
# VUE_APP_BASE_URL = 'http://192.168.1.9:17088'
|
||||||
# VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
|
VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
|
||||||
|
|||||||
@@ -2,6 +2,6 @@ NODE_ENV = 'production'
|
|||||||
# VUE_APP_BASE_URL = 'https://aida.com.hk/test'
|
# VUE_APP_BASE_URL = 'https://aida.com.hk/test'
|
||||||
# VUE_APP_BASE_URL = 'http://18.167.251.121:10088'
|
# VUE_APP_BASE_URL = 'http://18.167.251.121:10088'
|
||||||
# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
|
# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
|
||||||
VUE_APP_BASE_URL = 'https://test.api.aida.com.hk'
|
# VUE_APP_BASE_URL = 'https://test.api.aida.com.hk'
|
||||||
# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
|
VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: "iconfont"; /* Project id */
|
font-family: "iconfont"; /* Project id */
|
||||||
src: url('iconfont.ttf?t=1701308010197') format('truetype');
|
src: url('iconfont.ttf?t=1709865709415') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
@@ -43,3 +43,47 @@
|
|||||||
content: "\e685";
|
content: "\e685";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-bianji:before {
|
||||||
|
content: "\e600";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-circle:before {
|
||||||
|
content: "\e64f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-sanjiaoxing:before {
|
||||||
|
content: "\e615";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-tuceng:before {
|
||||||
|
content: "\e632";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-move:before {
|
||||||
|
content: "\e616";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-xiangpi_huaban1:before {
|
||||||
|
content: "\e67b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-tx-fill-tuoyuanxing:before {
|
||||||
|
content: "\e64c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zhixian:before {
|
||||||
|
content: "\e602";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-xian:before {
|
||||||
|
content: "\ec5f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-checkbox-full:before {
|
||||||
|
content: "\ea6f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-tuceng1:before {
|
||||||
|
content: "\e62d";
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -60,6 +60,83 @@
|
|||||||
"font_class": "dianwei",
|
"font_class": "dianwei",
|
||||||
"unicode": "e685",
|
"unicode": "e685",
|
||||||
"unicode_decimal": 59013
|
"unicode_decimal": 59013
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "130743908",
|
||||||
|
"name": "编辑",
|
||||||
|
"font_class": "bianji",
|
||||||
|
"unicode": "e600",
|
||||||
|
"unicode_decimal": 58880
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "130743909",
|
||||||
|
"name": "圆形",
|
||||||
|
"font_class": "circle",
|
||||||
|
"unicode": "e64f",
|
||||||
|
"unicode_decimal": 58959
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "130743910",
|
||||||
|
"name": "三角形",
|
||||||
|
"font_class": "sanjiaoxing",
|
||||||
|
"unicode": "e615",
|
||||||
|
"unicode_decimal": 58901
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "130743911",
|
||||||
|
"name": "图层",
|
||||||
|
"font_class": "tuceng",
|
||||||
|
"unicode": "e632",
|
||||||
|
"unicode_decimal": 58930
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "130743912",
|
||||||
|
"name": "平移",
|
||||||
|
"font_class": "move",
|
||||||
|
"unicode": "e616",
|
||||||
|
"unicode_decimal": 58902
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "130743913",
|
||||||
|
"name": "橡皮",
|
||||||
|
"font_class": "xiangpi_huaban1",
|
||||||
|
"unicode": "e67b",
|
||||||
|
"unicode_decimal": 59003
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "130743914",
|
||||||
|
"name": "tx-fill-椭圆形",
|
||||||
|
"font_class": "tx-fill-tuoyuanxing",
|
||||||
|
"unicode": "e64c",
|
||||||
|
"unicode_decimal": 58956
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "130743915",
|
||||||
|
"name": "直线",
|
||||||
|
"font_class": "zhixian",
|
||||||
|
"unicode": "e602",
|
||||||
|
"unicode_decimal": 58882
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "130743916",
|
||||||
|
"name": "线",
|
||||||
|
"font_class": "xian",
|
||||||
|
"unicode": "ec5f",
|
||||||
|
"unicode_decimal": 60511
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "130743917",
|
||||||
|
"name": "正方形",
|
||||||
|
"font_class": "checkbox-full",
|
||||||
|
"unicode": "ea6f",
|
||||||
|
"unicode_decimal": 60015
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "130743918",
|
||||||
|
"name": "图层",
|
||||||
|
"font_class": "tuceng1",
|
||||||
|
"unicode": "e62d",
|
||||||
|
"unicode_decimal": 58925
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
@@ -1001,6 +1001,10 @@ i {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
.mark_loading.bgFFF {
|
||||||
|
background: #ffffff;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
.mark_loading .mark_loading_text {
|
.mark_loading .mark_loading_text {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
@@ -1017,16 +1021,25 @@ i {
|
|||||||
}
|
}
|
||||||
.mark_loading .mark_loading_title {
|
.mark_loading .mark_loading_title {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
text-decoration: underline;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
.mark_loading .mark_loading_intro {
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
font-size: 1.4rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
.mark_loading .mark_loading_title_box {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
.mark_loading .mark_loading_btn,
|
.mark_loading .mark_loading_btn,
|
||||||
.mark_loading .mark_loading_btn2 {
|
.mark_loading .mark_loading_btn2 {
|
||||||
|
display: flex;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 2px solid;
|
border: 2px solid;
|
||||||
display: inline-block;
|
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -1035,9 +1048,10 @@ i {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
border: none;
|
border: none;
|
||||||
margin: 0 2rem;
|
margin: 0 2rem;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
.mark_loading .mark_loading_btn2 {
|
.mark_loading .mark_loading_btn2 {
|
||||||
border: 2px solid #000;
|
border: 2px solid #000;
|
||||||
|
color: #000;
|
||||||
background: rgba(0, 0, 0, 0);
|
background: rgba(0, 0, 0, 0);
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1066,6 +1066,10 @@ i{
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
&.bgFFF{
|
||||||
|
background: rgba(255,255,255, 1);
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
.mark_loading_text{
|
.mark_loading_text{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
@@ -1085,18 +1089,29 @@ i{
|
|||||||
}
|
}
|
||||||
.mark_loading_title{
|
.mark_loading_title{
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
text-decoration: underline;
|
// text-decoration: underline;
|
||||||
cursor: pointer;
|
font-weight: 600;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
// color: #fff;
|
// color: #fff;
|
||||||
}
|
}
|
||||||
|
.mark_loading_intro{
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
font-size: 1.4rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
.mark_loading_title_box{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
.mark_loading_btn,.mark_loading_btn2{
|
.mark_loading_btn,.mark_loading_btn2{
|
||||||
// border: #000;
|
// border: #000;
|
||||||
// color: #fff;
|
// color: #fff;
|
||||||
|
display: flex;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 2px solid;
|
border: 2px solid;
|
||||||
display: inline-block;
|
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -1105,10 +1120,11 @@ i{
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
border: none;
|
border: none;
|
||||||
margin: 0 2rem;
|
margin: 0 2rem;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
.mark_loading_btn2{
|
.mark_loading_btn2{
|
||||||
border: 2px solid #000;
|
border: 2px solid #000;
|
||||||
|
color: #000;
|
||||||
background: rgba(0,0,0,0);
|
background: rgba(0,0,0,0);
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -29,19 +29,19 @@
|
|||||||
<div>Height:</div>
|
<div>Height:</div>
|
||||||
<input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height"/>
|
<input type="number" @input="setMaxInput('height', 10000)" v-model="canvasWH.height"/>
|
||||||
</label>
|
</label>
|
||||||
<div class="exportCanvasBox_title" @click.stop="setCloseNav(0)">
|
<div class="exportCanvasBox_title" @click.stop="setCloseNav('nav')">
|
||||||
Canvas Nav
|
Canvas Nav
|
||||||
<div
|
<div
|
||||||
:class="[
|
:class="[
|
||||||
'icon',
|
'icon',
|
||||||
'iconfont',
|
'iconfont',
|
||||||
'icon-xiala',
|
'icon-xiala',
|
||||||
closeNav==0?'icon-rotate':''
|
closeNav.nav?'icon-rotate':''
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="exportCanvasBox_img" :class="{'closeNav' :closeNav==0}">
|
<div class="exportCanvasBox_img exportCanvasBox_left_item" :class="{'closeNav' :closeNav.nav}">
|
||||||
<div
|
<div
|
||||||
class="exportCanvasBox_allItem"
|
class="exportCanvasBox_allItem"
|
||||||
v-for="(item,key) in allBoardData"
|
v-for="(item,key) in allBoardData"
|
||||||
@@ -65,16 +65,62 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="exportCanvasBox_title" @click.stop="setCloseNav(1)">
|
<div class="exportCanvasBox_title" @click.stop="setCloseNav('tool')">
|
||||||
Canvas Tool
|
Canvas Tool
|
||||||
<div
|
<div
|
||||||
:class="[
|
:class="[
|
||||||
'icon',
|
'icon',
|
||||||
'iconfont',
|
'iconfont',
|
||||||
'icon-xiala',
|
'icon-xiala',
|
||||||
closeNav==1?'icon-rotate':''
|
closeNav.tool?'icon-rotate':''
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
|
||||||
|
<div class="exportCanvasBox_left_tool_item">
|
||||||
|
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
|
||||||
|
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
|
||||||
|
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:operation == 'pencil'}"></i>
|
||||||
|
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}"></i>
|
||||||
|
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}"></i>
|
||||||
|
</div>
|
||||||
|
<div class="exportCanvasBox_left_tool_item">
|
||||||
|
<label>
|
||||||
|
<div >Color</div>
|
||||||
|
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<div >Size:</div>
|
||||||
|
<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
|
||||||
|
More
|
||||||
|
<div
|
||||||
|
:class="[
|
||||||
|
'icon',
|
||||||
|
'iconfont',
|
||||||
|
'icon-xiala',
|
||||||
|
closeNav.move?'icon-rotate':''
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.move}">
|
||||||
|
<div class="exportCanvasBox_left_tool_item">
|
||||||
|
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
|
||||||
|
<i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i>
|
||||||
|
<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>
|
||||||
|
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
|
||||||
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -86,8 +132,6 @@
|
|||||||
<div class="exportCanvasBox_title">
|
<div class="exportCanvasBox_title">
|
||||||
High-definition Download
|
High-definition Download
|
||||||
</div>
|
</div>
|
||||||
<div @click="historyState(stateIndex - 1)">123</div>
|
|
||||||
<div @click="historyState(stateIndex + 1)">321</div>
|
|
||||||
<div class="exportCanvasBox_right_definition">
|
<div class="exportCanvasBox_right_definition">
|
||||||
<label>
|
<label>
|
||||||
<div>Width:</div>
|
<div>Width:</div>
|
||||||
@@ -100,7 +144,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="" @click="multiselect">all</div>
|
<div class="" @click="multiselect">all</div>
|
||||||
<div class="exportCanvasBox_right_btn">
|
<div class="exportCanvasBox_right_btn">
|
||||||
<div class="subitOkPreviewBtn" @click="setExport">HD Export</div>
|
<div class="subitOkPreviewBtn" @click="setHDExport">HD Export</div>
|
||||||
<div class="subitOkPreviewBtn" @click="setExport">Export</div>
|
<div class="subitOkPreviewBtn" @click="setExport">Export</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -114,13 +158,13 @@
|
|||||||
import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
|
import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
import { multiselectJS } from "@/tool/canvasDrawing";
|
|
||||||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
||||||
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
|
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import JSZip, { forEach } from "jszip";
|
import JSZip, { forEach } from "jszip";
|
||||||
import { message, Modal } from "ant-design-vue";
|
import { message, Modal } from "ant-design-vue";
|
||||||
const FileSaver = require("file-saver");
|
const FileSaver = require("file-saver");
|
||||||
|
import { multiselectJS,JSRectUpdata,JSchangeType,JScanvasMouseDown,JScanvasMouseMove,JScreateCheck } from "@/tool/canvasDrawing";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
scaleImage,
|
scaleImage,
|
||||||
@@ -164,10 +208,13 @@ export default defineComponent({
|
|||||||
let disposeMoodboardShow = true;
|
let disposeMoodboardShow = true;
|
||||||
|
|
||||||
|
|
||||||
let canvasState = ref([])//存放canvas操作
|
let canvasState = ref()//存放canvas操作
|
||||||
let stateIndex = ref(-1)//表示撤回数量
|
let reverseCanvasState = ref([])//存放canvas操作
|
||||||
|
let normalCanvasState = ref([])//存放canvas操作
|
||||||
let isLoadCanvas = false//撤回或者反撤回false为撤回
|
let isLoadCanvas = false//撤回或者反撤回false为撤回
|
||||||
let init = () => {
|
let init = () => {
|
||||||
|
normalCanvasState.value = []
|
||||||
|
reverseCanvasState.value = []
|
||||||
showUpgradePlan.value = true;
|
showUpgradePlan.value = true;
|
||||||
nextTick().then(async () => {
|
nextTick().then(async () => {
|
||||||
allBoardData.value.likeDesignCollectionList =
|
allBoardData.value.likeDesignCollectionList =
|
||||||
@@ -187,15 +234,27 @@ export default defineComponent({
|
|||||||
isDrawingMode: false, // 开启绘图模式
|
isDrawingMode: false, // 开启绘图模式
|
||||||
// preserveObjectStacking: true,
|
// preserveObjectStacking: true,
|
||||||
});
|
});
|
||||||
|
JSchangeType(canvas,'init')
|
||||||
canvasOnDrop()//开启鼠标到画布事件
|
canvasOnDrop()//开启鼠标到画布事件
|
||||||
setRemoveImage()//设置元素删除
|
setRemoveImage()//设置元素删除
|
||||||
canvas.on("object:modified", ()=>{
|
canvas.on("object:modified", ()=>{
|
||||||
updateCanvasState()
|
updateCanvasState()
|
||||||
});
|
});
|
||||||
canvas.on('selection:created', ()=>{
|
//鼠标移动
|
||||||
updateCanvasState('created')
|
canvas.on("mouse:move", event =>setCanvasMove(event));
|
||||||
});
|
canvas.on("mouse:out", event=>setCanvasOut(event));
|
||||||
// canvas.on("object:added", updateCanvasState);
|
canvas.on("mouse:down", event=>setCanvasDown(event));
|
||||||
|
canvas.on("mouse:up", event=>setCanvasUp(event));
|
||||||
|
// canvas.on('path:created', (event)=>{updateCanvasState()});
|
||||||
|
// canvas.on("selection:created", (event)=>{setZIndex(event)});
|
||||||
|
// canvas.on('object:removed', function() {
|
||||||
|
// });
|
||||||
|
// canvas.on("object:added", (obj)=>{
|
||||||
|
// obj.target.cornerSize = 10
|
||||||
|
// obj.target.transparentCorners = false
|
||||||
|
// });
|
||||||
|
fabric.Object.prototype.cornerSize = 10
|
||||||
|
fabric.Object.prototype.transparentCorners = false
|
||||||
// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
|
// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
|
||||||
let arr = [
|
let arr = [
|
||||||
"disposeMoodboard",
|
"disposeMoodboard",
|
||||||
@@ -303,24 +362,29 @@ export default defineComponent({
|
|||||||
canvas.setHeight(canvasWH.value.height);
|
canvas.setHeight(canvasWH.value.height);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
updateCanvasState('')//加载完成后记录一下
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
let setRemoveImage = ()=>{
|
let setRemoveImage = ()=>{
|
||||||
let deleteObject = (eventData, transform)=> {
|
let deleteObject = (eventData, transform)=> {
|
||||||
var target = [transform.target];
|
// var target = [transform.target];
|
||||||
if(transform.target._objects){
|
let target = canvas.getActiveObjects()
|
||||||
target = transform.target._objects
|
|
||||||
}
|
|
||||||
// canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
|
|
||||||
// const sel = new fabric.ActiveSelection(canvas.getObjects(), {
|
|
||||||
// canvas
|
|
||||||
// })
|
|
||||||
target.forEach((item)=>{
|
target.forEach((item)=>{
|
||||||
var canvas = item.canvas;
|
// var canvas = item.canvas;
|
||||||
canvas.remove(item);
|
// canvas.remove(item);
|
||||||
|
canvas.fxRemove(item, {
|
||||||
|
onComplete(){
|
||||||
|
canvas.discardActiveObject(); // 丢弃当前选中的对象
|
||||||
|
canvas.renderAll(); // 重新渲染 Canvas
|
||||||
|
}
|
||||||
})
|
})
|
||||||
canvas.requestRenderAll();
|
canvas.FX_DURATION = 300
|
||||||
canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
|
})
|
||||||
|
// canvas.requestRenderAll();
|
||||||
|
// canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
|
||||||
|
// canvas.discardActiveObject(); // 丢弃当前选中的对象
|
||||||
|
// canvas.renderAll(); // 重新渲染 Canvas
|
||||||
|
updateCanvasState('remove')
|
||||||
}
|
}
|
||||||
const deleteIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC"
|
const deleteIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC"
|
||||||
// 创建删除图片元素
|
// 创建删除图片元素
|
||||||
@@ -348,22 +412,7 @@ export default defineComponent({
|
|||||||
cornerSize: 24
|
cornerSize: 24
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
//设置画布监听修改添加事件，用来做撤回功能
|
|
||||||
let updateCanvasState = (str) =>{
|
|
||||||
if (!isLoadCanvas) {
|
|
||||||
const canvasAsJson = JSON.stringify(canvas.toJSON());
|
|
||||||
if(str == 'created'){
|
|
||||||
if(canvasState.value.length == 0){
|
|
||||||
canvasState.value.push(canvasAsJson);
|
|
||||||
}
|
|
||||||
}else{
|
|
||||||
canvasState.value.push(canvasAsJson);
|
|
||||||
}
|
|
||||||
stateIndex.value = canvasState.value.length - 1;
|
|
||||||
} else {
|
|
||||||
isLoadCanvas = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let setImageWidth = (key)=>{
|
let setImageWidth = (key)=>{
|
||||||
let imgWidth = canvasWH.value.width; //这是设置画布等宽
|
let imgWidth = canvasWH.value.width; //这是设置画布等宽
|
||||||
if (
|
if (
|
||||||
@@ -405,12 +454,9 @@ export default defineComponent({
|
|||||||
scaleX:
|
scaleX:
|
||||||
imgWidth / img.width,
|
imgWidth / img.width,
|
||||||
scaleY:(img.width * proportion * scaleWH) / img.height,
|
scaleY:(img.width * proportion * scaleWH) / img.height,
|
||||||
cornerSize: 10, // 选中时，角的大小为20
|
// cornerSize: 10, // 选中时，角的大小为20
|
||||||
// lockRotation:true,
|
// transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
|
||||||
// lockScalingX:true,
|
|
||||||
lockRotation: true,
|
lockRotation: true,
|
||||||
transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
|
|
||||||
// cornerColor: "#a1de93", // 选中时，角的颜色是 青色
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -552,24 +598,19 @@ export default defineComponent({
|
|||||||
canvas.setWidth(canvasWH.value.width);
|
canvas.setWidth(canvasWH.value.width);
|
||||||
};
|
};
|
||||||
|
|
||||||
let closeNav = ref(0)
|
let closeNav = ref({
|
||||||
let setCloseNav = (num)=>{
|
nav:true,
|
||||||
if(closeNav.value == num){
|
tool:false,
|
||||||
closeNav.value = -1
|
move:false,
|
||||||
}else{
|
})
|
||||||
closeNav.value = num
|
let setCloseNav = (key)=>{
|
||||||
|
closeNav.value[key] = !closeNav.value[key]
|
||||||
}
|
}
|
||||||
}
|
|
||||||
// let multiselect = ()=>{
|
|
||||||
// console.log(canvas);
|
|
||||||
// multiselectJS(canvas)
|
|
||||||
// }
|
|
||||||
function multiselect() {//获取整体宽高
|
function multiselect() {//获取整体宽高
|
||||||
canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
|
canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
|
||||||
const sel = new fabric.ActiveSelection(canvas.getObjects(), {
|
const sel = new fabric.ActiveSelection(canvas.getObjects(), {
|
||||||
canvas
|
canvas
|
||||||
})
|
})
|
||||||
// console.log(sel)
|
|
||||||
canvas.setActiveObject(sel)
|
canvas.setActiveObject(sel)
|
||||||
canvas.requestRenderAll()
|
canvas.requestRenderAll()
|
||||||
const activeObject = canvas.getActiveObject(); // 获取当前选中的整体对象
|
const activeObject = canvas.getActiveObject(); // 获取当前选中的整体对象
|
||||||
@@ -579,7 +620,6 @@ export default defineComponent({
|
|||||||
console.log('Total Width:', totalWidth);
|
console.log('Total Width:', totalWidth);
|
||||||
console.log('Total Height:', totalHeight);
|
console.log('Total Height:', totalHeight);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
let currentType = ref({
|
let currentType = ref({
|
||||||
type:'',
|
type:'',
|
||||||
@@ -591,7 +631,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
let canvasOnDrop = ()=>{
|
let canvasOnDrop = ()=>{
|
||||||
canvas.on('drop', (opt)=> {
|
canvas.on('drop', (opt)=> {
|
||||||
// 省略部分代码......
|
|
||||||
let offset = {
|
let offset = {
|
||||||
left: canvas.getSelectionElement().getBoundingClientRect().left,
|
left: canvas.getSelectionElement().getBoundingClientRect().left,
|
||||||
top: canvas.getSelectionElement().getBoundingClientRect().top
|
top: canvas.getSelectionElement().getBoundingClientRect().top
|
||||||
@@ -607,15 +646,16 @@ export default defineComponent({
|
|||||||
setCanvasColor(pointerVpt.y, pointerVpt.x,rect)
|
setCanvasColor(pointerVpt.y, pointerVpt.x,rect)
|
||||||
break
|
break
|
||||||
case 'moodboardFiles':
|
case 'moodboardFiles':
|
||||||
createRect(pointerVpt.y, pointerVpt.x,currentType.value.type)
|
createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
|
||||||
break
|
break
|
||||||
default :
|
default :
|
||||||
createRect(pointerVpt.y, pointerVpt.x,currentType.value.type)
|
createImage(pointerVpt.y, pointerVpt.x,currentType.value.type)
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
// 创建完元素，把当前操作的元素类型设置回 null
|
// 创建完元素，把当前操作的元素类型设置回 null
|
||||||
currentType.value.type = null
|
currentType.value.type = null
|
||||||
currentType.value.data = null
|
currentType.value.data = null
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
let setGroup = (data)=>{
|
let setGroup = (data)=>{
|
||||||
@@ -651,43 +691,274 @@ export default defineComponent({
|
|||||||
top,
|
top,
|
||||||
width: rect.width,
|
width: rect.width,
|
||||||
fill: "rgb(255,255,255)",
|
fill: "rgb(255,255,255)",
|
||||||
cornerSize: 10, // 选中时，角的大小为20
|
|
||||||
transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
|
|
||||||
stroke: "#212121",
|
stroke: "#212121",
|
||||||
strokeWidth: 1,
|
strokeWidth: 1,
|
||||||
});
|
});
|
||||||
// 将矩形对象添加到 canvas 中
|
|
||||||
|
|
||||||
canvas.add(group);
|
canvas.add(group);
|
||||||
return group
|
return group
|
||||||
}
|
}
|
||||||
// 创建矩形
|
// 创建矩形
|
||||||
let createRect = (top, left,key)=> {
|
let createImage = async (top, left,key)=> {
|
||||||
let itemCanvasImg = currentType.value.data.imgUrl
|
let itemCanvasImg = currentType.value.data.imgUrl
|
||||||
if(key == 'likeDesignCollectionList'){
|
if(key == 'likeDesignCollectionList'){
|
||||||
itemCanvasImg = currentType.value.data.designOutfitUrl;
|
itemCanvasImg = currentType.value.data.designOutfitUrl;
|
||||||
}
|
}
|
||||||
|
await new Promise((resolve,reject)=>{
|
||||||
fabric.Image.fromURL(itemCanvasImg,(img) => {
|
fabric.Image.fromURL(itemCanvasImg,(img) => {
|
||||||
setCanvasImage(img,key,left,top)//设置图片
|
setCanvasImage(img,key,left,top)//设置图片
|
||||||
canvas.add(img);
|
canvas.add(img);
|
||||||
|
resolve()
|
||||||
},{ crossOrigin: "Anonymous" });
|
},{ crossOrigin: "Anonymous" });
|
||||||
|
})
|
||||||
|
updateCanvasState()
|
||||||
|
}
|
||||||
|
//设置画布监听修改添加事件，用来做撤回功能
|
||||||
|
let updateCanvasState = (str) =>{
|
||||||
|
const canvasAsJson = JSON.stringify(canvas.toJSON());
|
||||||
|
if(str == 'loadingCompleted'){
|
||||||
|
// reverseCanvasState.value.push(canvasAsJson);
|
||||||
|
}
|
||||||
|
normalCanvasState.value.push(canvasAsJson);
|
||||||
|
if (isLoadCanvas) {
|
||||||
|
reverseCanvasState.value = []
|
||||||
|
isLoadCanvas = false;
|
||||||
|
canvasState.value = canvasAsJson
|
||||||
|
}
|
||||||
}
|
}
|
||||||
//撤回
|
//撤回
|
||||||
let historyState = (index)=> {
|
let historyState = (str)=> {
|
||||||
if(index<=0){
|
if(str == 'reverse' && reverseCanvasState.value.length > 0){
|
||||||
index = 0
|
canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
|
||||||
}else if (index >canvasState.value.length){
|
let obj = reverseCanvasState.value.pop()
|
||||||
index = canvasState.value.length-1
|
normalCanvasState.value.push(obj);
|
||||||
}
|
}else if(str == '' && normalCanvasState.value.length > 1){
|
||||||
|
let obj = normalCanvasState.value.pop()
|
||||||
|
reverseCanvasState.value.push(obj);
|
||||||
|
canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
|
||||||
isLoadCanvas = true;
|
isLoadCanvas = true;
|
||||||
canvas.loadFromJSON(canvasState.value[index], () => {
|
}else{
|
||||||
canvas.forEachObject(function(obj) {
|
return
|
||||||
obj.cornerSize = 10
|
}
|
||||||
obj.transparentCorners=false
|
canvas.loadFromJSON(canvasState.value, () => {});
|
||||||
});
|
}
|
||||||
canvas.renderAll();
|
|
||||||
stateIndex.value = index;
|
//在画布进行画画
|
||||||
|
let operation = ref('move')
|
||||||
|
let operationMode = ref('fill')
|
||||||
|
//铅笔颜色 大小
|
||||||
|
let canvasPencilColor = ref('#000000')
|
||||||
|
let canvasPencilWidth = ref(20)
|
||||||
|
let setOperation = (str)=>{
|
||||||
|
operation.value = str
|
||||||
|
canvas.discardActiveObject();//取消所有选中边框
|
||||||
|
clearPatterning()//临时图形置为空并且添加撤回对象里面
|
||||||
|
if(str == 'pencil'){
|
||||||
|
setPencil()
|
||||||
|
}else if(str == 'move'){
|
||||||
|
setMove()
|
||||||
|
canvas.forEachObject((obj) =>obj.selectable = true);
|
||||||
|
JSchangeType(canvas,'init')
|
||||||
|
}else if(str == 'eraser'){
|
||||||
|
setEraser()
|
||||||
|
}else{
|
||||||
|
canvas.forEachObject((obj) =>obj.selectable = false);
|
||||||
|
canvas.isDrawingMode = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let setOperationMode = (str) =>{
|
||||||
|
operationMode.value = str
|
||||||
|
}
|
||||||
|
let brushIndicator = new fabric.Circle({
|
||||||
|
radius:canvasPencilWidth.value/2,
|
||||||
|
fill: '#fff',
|
||||||
|
stroke: '#000',
|
||||||
|
strokeWidth: 0,
|
||||||
|
originX: 'center',
|
||||||
|
originY: 'center',
|
||||||
|
visible :true,
|
||||||
|
erasable: false,
|
||||||
});
|
});
|
||||||
|
let setPencil =()=>{
|
||||||
|
let pencil = new fabric.PencilBrush(canvas); //笔
|
||||||
|
canvas.preserveObjectStacking = true;
|
||||||
|
canvas.isDrawingMode = true//开启绘画模式
|
||||||
|
canvas.freeDrawingBrush = pencil
|
||||||
|
canvas.freeDrawingBrush.color = canvasPencilColor.value;
|
||||||
|
brushIndicator.set('fill',canvasPencilColor.value)
|
||||||
|
canvas.freeDrawingBrush.isEraser = false
|
||||||
|
canvas.freeDrawingBrush.width = canvasPencilWidth.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
let setMove = () =>{
|
||||||
|
canvas.isDrawingMode = false
|
||||||
|
canvas.forEachObject((obj) =>obj.selectable = true);
|
||||||
|
}
|
||||||
|
let setEraser = ()=>{
|
||||||
|
canvas.isDrawingMode = true
|
||||||
|
let eraser = new fabric.EraserBrush(canvas)
|
||||||
|
canvas.freeDrawingBrush = eraser
|
||||||
|
brushIndicator.set({fill: '#FFF'});
|
||||||
|
canvas.requestRenderAll();
|
||||||
|
canvas.freeDrawingBrush.isEraser = true
|
||||||
|
canvas.freeDrawingBrush.width = canvasPencilWidth.value;
|
||||||
|
}
|
||||||
|
let setTimeOut = {
|
||||||
|
color:null,
|
||||||
|
width:null,
|
||||||
|
}//给切换颜色设置防抖
|
||||||
|
let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
|
||||||
|
clearTimeout(setTimeOut.color)
|
||||||
|
setTimeOut.color = setTimeout(()=>{
|
||||||
|
// brushIndicator.fill = canvasPencilColor.value;
|
||||||
|
if(canvas.freeDrawingBrush.isEraser){
|
||||||
|
|
||||||
|
}else{
|
||||||
|
brushIndicator.set({fill: canvasPencilColor.value});
|
||||||
|
}
|
||||||
|
canvas.freeDrawingBrush.color = canvasPencilColor.value;
|
||||||
|
|
||||||
|
},300)
|
||||||
|
}
|
||||||
|
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
|
||||||
|
clearTimeout(setTimeOut.width)
|
||||||
|
canvasPencilWidth.value = Number(canvasPencilWidth.value)
|
||||||
|
setTimeOut.width = setTimeout(()=>{
|
||||||
|
canvas.freeDrawingBrush.width = canvasPencilWidth.value;
|
||||||
|
// setPencil()
|
||||||
|
},300)
|
||||||
|
}
|
||||||
|
let downPoint = null;//鼠标按下位置
|
||||||
|
let upPoint = null;//鼠标抬起位置
|
||||||
|
let currentPatterning = null//临时图形
|
||||||
|
let polyLineBtn = null
|
||||||
|
let createPatterningIs = false
|
||||||
|
let clearPatterning = () =>{
|
||||||
|
if(createPatterningIs){
|
||||||
|
canvas.remove(currentPatterning)
|
||||||
|
}
|
||||||
|
currentPatterning = null
|
||||||
|
canvas.remove(polyLineBtn)
|
||||||
|
updateCanvasState()
|
||||||
|
}
|
||||||
|
//设置再画布上移动
|
||||||
|
let setCanvasMove = (event)=>{
|
||||||
|
var pointer = canvas.getPointer(event.e);
|
||||||
|
if(canvas.isDrawingMode){
|
||||||
|
canvas.setCursor('none');
|
||||||
|
if(!canvas.contains(brushIndicator)){
|
||||||
|
canvas.add(brushIndicator)
|
||||||
|
canvas.bringToFront(brushIndicator);//设置优先级最高
|
||||||
|
}
|
||||||
|
// brushIndicator.fill = canvasPencilColor.value
|
||||||
|
brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:canvasPencilWidth.value/2 });
|
||||||
|
|
||||||
|
}else{
|
||||||
|
if(createPatterningIs){
|
||||||
|
JScanvasMouseMove(operation.value,event,currentPatterning,downPoint)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
canvas.requestRenderAll()
|
||||||
|
}
|
||||||
|
let setCanvasOut = (event)=>{
|
||||||
|
canvas.remove(brushIndicator)//鼠标移出删除绘画范围的圆形
|
||||||
|
}
|
||||||
|
//设置再画布上按下
|
||||||
|
let setCanvasDown = (event)=>{
|
||||||
|
|
||||||
|
downPoint = event.absolutePointer
|
||||||
|
let arr = ['rect','line','circle','triangle','ellipse','fold']
|
||||||
|
if(arr.indexOf(operation.value) > -1){
|
||||||
|
JSchangeType(canvas,operation.value)
|
||||||
|
createPatterningIs = true
|
||||||
|
if(currentPatterning && operation.value == 'fold'){
|
||||||
|
canvas.skipTargetFind = false
|
||||||
|
currentPatterning.points.push({
|
||||||
|
x: downPoint.x,
|
||||||
|
y: downPoint.y
|
||||||
|
})
|
||||||
|
// currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
|
||||||
|
}else{
|
||||||
|
if(operation.value == 'fold'){
|
||||||
|
polyLineBtn = JScreateCheck(event)
|
||||||
|
polyLineBtn.on('mousedown',()=>{
|
||||||
|
canvas.skipTargetFind = true
|
||||||
|
let points = currentPatterning.points
|
||||||
|
currentPatterning.points.pop()
|
||||||
|
currentPatterning.points.pop()
|
||||||
|
// canvas.remove(currentPatterning)
|
||||||
|
// let polyline = new fabric.Polyline(points, {
|
||||||
|
// fill: 'transparent',
|
||||||
|
// stroke: canvasPencilColor.value,
|
||||||
|
// strokeWidth:canvasPencilWidth.value,
|
||||||
|
// selection:false,
|
||||||
|
// })
|
||||||
|
// canvas.add(polyline)
|
||||||
|
currentPatterning.set({stroke: canvasPencilColor.value})
|
||||||
|
createPatterningIs = false
|
||||||
|
clearPatterning()//临时图形置为空并且添加撤回对象里面
|
||||||
|
})
|
||||||
|
canvas.add(polyLineBtn)
|
||||||
|
}
|
||||||
|
currentPatterning = JScanvasMouseDown(operation.value,event,canvasPencilWidth.value,currentPatterning)
|
||||||
|
canvas.add(currentPatterning)
|
||||||
|
canvas.bringToFront(currentPatterning);//设置优先级最高
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
createPatterningIs = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//设置再画布上抬起
|
||||||
|
let setCanvasUp = (event)=>{
|
||||||
|
upPoint = event.absolutePointer
|
||||||
|
if(canvas.isDrawingMode){
|
||||||
|
canvas.remove(brushIndicator)
|
||||||
|
updateCanvasState()
|
||||||
|
}else{
|
||||||
|
// event.target && (event.target.bringToFront())//设置优先级
|
||||||
|
}
|
||||||
|
if(createPatterningIs){
|
||||||
|
switch (operation.value) {
|
||||||
|
case 'line':
|
||||||
|
currentPatterning.set({stroke: canvasPencilColor.value})
|
||||||
|
break
|
||||||
|
case 'fold':
|
||||||
|
// currentPatterning.set({stroke: canvasPencilColor.value})
|
||||||
|
break
|
||||||
|
default :
|
||||||
|
if(operationMode.value == 'fill'){
|
||||||
|
currentPatterning.set({fill: canvasPencilColor.value})
|
||||||
|
}else if (operationMode.value == 'border'){
|
||||||
|
currentPatterning.set({fill: 'transparent',stroke: canvasPencilColor.value,strokeWidth: canvasPencilWidth.value})
|
||||||
|
}
|
||||||
|
if(JSON.stringify(downPoint) == JSON.stringify(upPoint)){
|
||||||
|
canvas.remove(currentPatterning)
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
if(operation.value == 'fold'){
|
||||||
|
canvas.forEachObject((obj) =>obj.selectable = false);
|
||||||
|
canvas.bringToFront(polyLineBtn);//设置优先级最高
|
||||||
|
}else{
|
||||||
|
createPatterningIs = false
|
||||||
|
clearPatterning()//临时图形置为空并且添加撤回对象里面
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let setHDExport = ()=>{
|
||||||
|
let selectedObject = canvas.getActiveObject();
|
||||||
|
if (selectedObject && selectedObject.type === 'image') {
|
||||||
|
// 如果是图片对象，则可以对其进行操作
|
||||||
|
let selectedImage = selectedObject;
|
||||||
|
let img = new Image
|
||||||
|
img.src = selectedImage.getSrc()
|
||||||
|
img.onload = ()=>{
|
||||||
|
console.log(img.width,img.height);
|
||||||
|
}
|
||||||
|
// 输出图片对象的 URL
|
||||||
|
console.log('Selected image URL:', selectedImage.getSrc());
|
||||||
|
} else {
|
||||||
|
console.log('No image selected.');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
onMounted(() => {});
|
onMounted(() => {});
|
||||||
|
|
||||||
@@ -705,7 +976,15 @@ export default defineComponent({
|
|||||||
multiselect,
|
multiselect,
|
||||||
onDragstart,
|
onDragstart,
|
||||||
historyState,
|
historyState,
|
||||||
stateIndex,
|
operation,
|
||||||
|
operationMode,
|
||||||
|
setOperation,
|
||||||
|
setOperationMode,
|
||||||
|
canvasPencilColor,
|
||||||
|
canvasPencilWidth,
|
||||||
|
setPencilColor,
|
||||||
|
setPencilWidth,
|
||||||
|
setHDExport,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data(prop) {
|
data(prop) {
|
||||||
@@ -780,8 +1059,11 @@ export default defineComponent({
|
|||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding-right: 2rem;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
position: sticky;
|
||||||
|
top: 1rem;
|
||||||
|
background: #f9fafb;
|
||||||
|
z-index: 2;
|
||||||
.icon{
|
.icon{
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
}
|
}
|
||||||
@@ -812,20 +1094,27 @@ export default defineComponent({
|
|||||||
width: 10em;
|
width: 10em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.exportCanvasBox_img.closeNav{
|
.exportCanvasBox_left_item.closeNav{
|
||||||
max-height: 1000rem;
|
// max-height: 1000rem;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.exportCanvasBox_left::-webkit-scrollbar,
|
.exportCanvasBox_left::-webkit-scrollbar,
|
||||||
.exportCanvasBox_right::-webkit-scrollbar{display: none;}
|
.exportCanvasBox_right::-webkit-scrollbar{display: none;}
|
||||||
.exportCanvasBox_left {
|
.exportCanvasBox_left {
|
||||||
|
padding-right: 1rem;
|
||||||
.exportCanvasBox_img {
|
.exportCanvasBox_title {
|
||||||
transition: all .3s;
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
.exportCanvasBox_left_item{
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
// height: auto;
|
transition: all .3s;
|
||||||
max-height: 0;
|
// max-height: 0;
|
||||||
|
height: 0;
|
||||||
transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
.exportCanvasBox_img {
|
||||||
|
// height: auto;
|
||||||
|
|
||||||
.exportCanvasBox_allItem {
|
.exportCanvasBox_allItem {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -862,10 +1151,35 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.exportCanvasBox_left_tool{
|
||||||
|
.exportCanvasBox_left_tool_item{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
&.leftAlign{
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
&.active{
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: .4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.exportCanvasBox_right{
|
.exportCanvasBox_right{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
padding-left: 1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
.exportCanvasBox_right_definition{
|
.exportCanvasBox_right_definition{
|
||||||
// display: flex;
|
// display: flex;
|
||||||
|
|||||||
@@ -217,7 +217,7 @@ export default defineComponent({
|
|||||||
let isTest = ref()
|
let isTest = ref()
|
||||||
let isMurmur = ref()
|
let isMurmur = ref()
|
||||||
let credits = computed(()=>{
|
let credits = computed(()=>{
|
||||||
return store.state.UserHabit.credits.value
|
return Number(store.state.UserHabit.credits.value)
|
||||||
})
|
})
|
||||||
let activeCredits = ref(false)
|
let activeCredits = ref(false)
|
||||||
return {
|
return {
|
||||||
@@ -281,6 +281,7 @@ export default defineComponent({
|
|||||||
this.operateClick();
|
this.operateClick();
|
||||||
document.addEventListener("click", this.operateClick);
|
document.addEventListener("click", this.operateClick);
|
||||||
}
|
}
|
||||||
|
this.getCredits()
|
||||||
this.getLang('')
|
this.getLang('')
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -297,16 +298,22 @@ export default defineComponent({
|
|||||||
UpgradePlan.init()
|
UpgradePlan.init()
|
||||||
},
|
},
|
||||||
Assignment(){//任务
|
Assignment(){//任务
|
||||||
let num = 123+this.credits
|
// let num = 123+this.credits
|
||||||
this.store.commit('setCredits',num)
|
// this.store.commit('setCredits',num)
|
||||||
},
|
},
|
||||||
getCredits(){//刷新当前积分
|
getCredits(){//刷新当前积分
|
||||||
let num = 123+this.credits
|
if(!this.activeCredits){
|
||||||
this.activeCredits = true
|
this.activeCredits = true
|
||||||
|
this.store.dispatch('getCredits').then((rv)=>{
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
this.activeCredits = false
|
this.activeCredits = false
|
||||||
},300)
|
},300)
|
||||||
this.store.commit('setCredits',num)
|
})
|
||||||
|
}else{
|
||||||
|
this.activeCredits = false
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
//点击下拉图标出现操作
|
//点击下拉图标出现操作
|
||||||
changeShowOperateContent() {
|
changeShowOperateContent() {
|
||||||
|
|||||||
@@ -101,8 +101,15 @@
|
|||||||
<div class="UpgradePlan_payList_item_upgrade2 subitOkPreviewBtn" @click="payment">Payment</div>
|
<div class="UpgradePlan_payList_item_upgrade2 subitOkPreviewBtn" @click="payment">Payment</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mark_loading" v-show="isShowMark">
|
<div class="mark_loading bgFFF" v-show="isShowMark">
|
||||||
<div class="mark_loading_title" @click="getTradeQuery">Paid completed</div>
|
<div class="mark_loading_title">Paid 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.</div>
|
||||||
|
|
||||||
|
<div class="mark_loading_title_box">
|
||||||
|
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">Back</div>
|
||||||
|
<div class="mark_loading_btn" @click="getTradeQuery">OK</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
</template>
|
</template>
|
||||||
@@ -132,8 +139,8 @@ export default defineComponent({
|
|||||||
let stepNum = ref(0)
|
let stepNum = ref(0)
|
||||||
let price = ref({
|
let price = ref({
|
||||||
num:1,
|
num:1,
|
||||||
price:15,
|
price:2,
|
||||||
credits:115,
|
credits:45,
|
||||||
})
|
})
|
||||||
let modeOfPayment = ref('paypal')
|
let modeOfPayment = ref('paypal')
|
||||||
let clause = ref(false)//同意条款
|
let clause = ref(false)//同意条款
|
||||||
@@ -214,9 +221,8 @@ export default defineComponent({
|
|||||||
if(this.modeOfPayment == 'paypal'){
|
if(this.modeOfPayment == 'paypal'){
|
||||||
httpsUrl = Https.httpUrls.payPaypal
|
httpsUrl = Https.httpUrls.payPaypal
|
||||||
}
|
}
|
||||||
Https.axiosPost(httpsUrl+`/${this.payIndex}?returnUrl=${url}`, {returnUrl:url}).then(
|
Https.axiosPost(httpsUrl+`/${this.price.num}?returnUrl=${url}`,).then(
|
||||||
(rv: any) => {
|
(rv: any) => {
|
||||||
console.log(rv);
|
|
||||||
var width = 800;
|
var width = 800;
|
||||||
var height = 600;
|
var height = 600;
|
||||||
var left = (screen.width - width) / 2;
|
var left = (screen.width - width) / 2;
|
||||||
@@ -239,16 +245,12 @@ export default defineComponent({
|
|||||||
//查询是否支付
|
//查询是否支付
|
||||||
getTradeQuery(){
|
getTradeQuery(){
|
||||||
this.isShowMark = false
|
this.isShowMark = false
|
||||||
this.newWindow.close();
|
this.newWindow.close();//关闭打开的窗口页面
|
||||||
let num = this.store.state.UserHabit.credits.value+111
|
this.store.dispatch('getCredits')
|
||||||
this.store.commit('setCredits',num)
|
this.cancelDsign()
|
||||||
|
},
|
||||||
// let params = 1
|
setPaidBack(){//点击返回
|
||||||
// Https.axiosGet(Https.httpUrls.tradeQuery,{params:{enumName:params}}).then((rv) => {
|
this.isShowMark = false
|
||||||
// if (rv) {
|
|
||||||
// console.log(rv);
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
},
|
},
|
||||||
cancel(){//取消
|
cancel(){//取消
|
||||||
this.stepNum = 0
|
this.stepNum = 0
|
||||||
@@ -277,6 +279,7 @@ export default defineComponent({
|
|||||||
position: relative;
|
position: relative;
|
||||||
.mark_loading{
|
.mark_loading{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
background: #fff;
|
||||||
}
|
}
|
||||||
.UpgradePlan_content{
|
.UpgradePlan_content{
|
||||||
font-size: var(--aida-fsize2);
|
font-size: var(--aida-fsize2);
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
path: "/",
|
path: "/",
|
||||||
// redirect重定向
|
// redirect重定向
|
||||||
redirect: "/login"
|
redirect: "/login"
|
||||||
// redirect: "/Upgrade"
|
// redirect: "/upgrade"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/login',
|
path: '/login',
|
||||||
@@ -89,15 +89,13 @@ router.beforeEach((to, from, next) => {
|
|||||||
// 检查路由是否存在
|
// 检查路由是否存在
|
||||||
// 机房用户
|
// 机房用户
|
||||||
let userInfo = JSON.parse(getCookie("userInfo") as any);
|
let userInfo = JSON.parse(getCookie("userInfo") as any);
|
||||||
console.log(userInfo);
|
|
||||||
|
|
||||||
|
|
||||||
let murmurStr: any = localStorage.getItem('murmurStr')
|
let murmurStr: any = localStorage.getItem('murmurStr')
|
||||||
let getIsMurmur: any = getCookie("isMurmur")
|
let getIsMurmur: any = getCookie("isMurmur")
|
||||||
let token = getCookie("token");
|
let token = getCookie("token");
|
||||||
let isMurmur = JSON.parse(getIsMurmur)
|
let isMurmur = JSON.parse(getIsMurmur)
|
||||||
let routeList = ['/testClickData']
|
let routeList = ['/testClickData','/trialApproval']//指定页面需要指定id才能进入
|
||||||
let userIdList = [83]
|
let userIdList = [83,88,6]
|
||||||
const routeExists = router.getRoutes().some(({ name }) =>{
|
const routeExists = router.getRoutes().some(({ name }) =>{
|
||||||
if(name){
|
if(name){
|
||||||
return name === to.name
|
return name === to.name
|
||||||
@@ -105,33 +103,31 @@ router.beforeEach((to, from, next) => {
|
|||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
if (routeExists) {
|
||||||
|
if (isMurmur && murmurStr && token) {
|
||||||
|
const toName = to.name === 'login';
|
||||||
|
if (toName) {
|
||||||
|
next({ name: 'home' });
|
||||||
|
} else {
|
||||||
next();
|
next();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (routeList.indexOf(to.path) > -1 ) {
|
||||||
|
|
||||||
// if (routeExists) {
|
if(userIdList.indexOf(userInfo.userId) > -1){
|
||||||
// if (isMurmur && murmurStr && token) {
|
next();
|
||||||
// const toName = to.name === 'login';
|
}else{
|
||||||
// if (toName) {
|
next({ name: 'home' });
|
||||||
// next({ name: 'home' });
|
}
|
||||||
// } else {
|
}else{
|
||||||
// next();
|
next();
|
||||||
// }
|
}
|
||||||
// } else {
|
// 如果页面存在，正常跳转
|
||||||
// if (routeList.indexOf(to.path) > -1 ) {
|
}
|
||||||
|
} else {
|
||||||
// if(userIdList.indexOf(userInfo.userId) > -1){
|
// 如果页面不存在，可以跳转到404页面或者其他页面
|
||||||
// next();
|
next('/404');
|
||||||
// }else{
|
}
|
||||||
// next({ name: 'home' });
|
|
||||||
// }
|
|
||||||
// }else{
|
|
||||||
// next();
|
|
||||||
// }
|
|
||||||
// // 如果页面存在，正常跳转
|
|
||||||
// }
|
|
||||||
// } else {
|
|
||||||
// // 如果页面不存在，可以跳转到404页面或者其他页面
|
|
||||||
// next('/404');
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -45,6 +45,17 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
|
|||||||
// .catch((rv) => {
|
// .catch((rv) => {
|
||||||
// });
|
// });
|
||||||
},
|
},
|
||||||
|
getCredits(context){
|
||||||
|
return new Promise( async (resolve) => {
|
||||||
|
await Https.axiosGet(Https.httpUrls.getCredits,).then((rv) => {
|
||||||
|
context.commit('setCredits',rv)
|
||||||
|
resolve(true)
|
||||||
|
}).catch((res) => {
|
||||||
|
resolve(true)
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -14,6 +14,196 @@ function multiselectJS(canvas) {//获取整体宽高
|
|||||||
console.log('Total Width:', totalWidth);
|
console.log('Total Width:', totalWidth);
|
||||||
console.log('Total Height:', totalHeight);
|
console.log('Total Height:', totalHeight);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
function JSchangeType(canvas, val) {
|
||||||
|
switch (val) {
|
||||||
|
case 'init':
|
||||||
|
canvas.selection = true
|
||||||
|
canvas.selectionColor = 'rgba(0, 0, 0, 0.2)'
|
||||||
|
canvas.selectionBorderColor = 'rgba(255, 255, 255, 0.3)'
|
||||||
|
canvas.skipTargetFind = false
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
canvas.selectionColor = 'transparent'
|
||||||
|
canvas.selectionBorderColor = 'transparent'
|
||||||
|
canvas.skipTargetFind = true // 禁止选中
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//绘制直线
|
||||||
|
function JScanvasMouseDown(str,e, width,patterning) {//创建线
|
||||||
|
let downPoint = e.absolutePointer
|
||||||
|
let currentPatterning
|
||||||
|
switch (str) {
|
||||||
|
case 'rect':
|
||||||
|
let top = Math.min(downPoint.y)
|
||||||
|
let left = Math.min(downPoint.x)
|
||||||
|
// let height = Math.abs(downPoint.y - upPointer.y)
|
||||||
|
// let width = Math.abs(downPoint.x - upPointer.x)
|
||||||
|
currentPatterning = new fabric.Rect({
|
||||||
|
top,
|
||||||
|
left,
|
||||||
|
fill: 'rgba(0, 0, 0, 0.2)',
|
||||||
|
rx:5,
|
||||||
|
ry:5,
|
||||||
|
})
|
||||||
|
break
|
||||||
|
case 'line':
|
||||||
|
currentPatterning = new fabric.Line([
|
||||||
|
downPoint.x, downPoint.y, // 起始点坐标
|
||||||
|
downPoint.x, downPoint.y // 结束点坐标
|
||||||
|
],
|
||||||
|
{
|
||||||
|
stroke: 'rgba(0, 0, 0, 0.2)', // 笔触颜色
|
||||||
|
strokeLineCap: 'round',
|
||||||
|
strokeWidth:Number(width),
|
||||||
|
}
|
||||||
|
)
|
||||||
|
break
|
||||||
|
case 'circle':
|
||||||
|
currentPatterning = new fabric.Circle({
|
||||||
|
top: downPoint.y,
|
||||||
|
left: downPoint.x,
|
||||||
|
radius: 0,
|
||||||
|
fill: 'rgba(0, 0, 0, 0.2)',
|
||||||
|
// fill: 'transparent',
|
||||||
|
// stroke: 'rgba(0, 0, 0, 0.2)'
|
||||||
|
})
|
||||||
|
break
|
||||||
|
case 'triangle':
|
||||||
|
currentPatterning = new fabric.Triangle({
|
||||||
|
top: downPoint.y,
|
||||||
|
left: downPoint.x,
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
fill: 'rgba(0, 0, 0, 0.2)',
|
||||||
|
// fill: 'transparent',
|
||||||
|
// stroke: 'rgba(0, 0, 0, 0.2)'
|
||||||
|
})
|
||||||
|
break
|
||||||
|
case 'ellipse':
|
||||||
|
currentPatterning = new fabric.Ellipse({
|
||||||
|
top: downPoint.y,
|
||||||
|
left: downPoint.x,
|
||||||
|
rx: 0,
|
||||||
|
ry: 0,
|
||||||
|
fill: 'rgba(0, 0, 0, 0.2)',
|
||||||
|
// fill: 'transparent',
|
||||||
|
// stroke: 'rgba(0, 0, 0, 0.2)'
|
||||||
|
})
|
||||||
|
break
|
||||||
|
case 'fold':
|
||||||
|
currentPatterning = new fabric.Polyline([
|
||||||
|
{ x: downPoint.x, y: downPoint.y },
|
||||||
|
{ x: downPoint.x, y: downPoint.y }
|
||||||
|
],{
|
||||||
|
fill: 'transparent',
|
||||||
|
stroke: 'rgba(0, 0, 0, 0.2)',
|
||||||
|
objectCaching: false,
|
||||||
|
strokeWidth:Number(width),
|
||||||
|
selection:false,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
return currentPatterning
|
||||||
|
}
|
||||||
|
function JScreateCheck(e){//创建对号
|
||||||
|
let downPoint = e.absolutePointer
|
||||||
|
|
||||||
|
let rect = new fabric.Rect({
|
||||||
|
width:20,
|
||||||
|
height:20,
|
||||||
|
fill: 'rgba(0, 0, 0, 0.2)',
|
||||||
|
rx:5,
|
||||||
|
ry:5,
|
||||||
|
|
||||||
|
})
|
||||||
|
var path = new fabric.Path('M2 10 L8 16 L18 4', {
|
||||||
|
left: 2.5,
|
||||||
|
top: 2.5,
|
||||||
|
stroke: 'white',
|
||||||
|
strokeWidth: 2,
|
||||||
|
fill:'transparent',
|
||||||
|
});
|
||||||
|
var polyLineBtn = new fabric.Group([rect, path],{
|
||||||
|
top:downPoint.y-40,
|
||||||
|
left:downPoint.x-10,
|
||||||
|
width:20,
|
||||||
|
height:20,
|
||||||
|
hasControls: false, // 禁用控制点
|
||||||
|
hasBorders: false, // 禁用边框线
|
||||||
|
selectable: false, // 禁用选择功能
|
||||||
|
hoverCursor: 'pointer'
|
||||||
|
});
|
||||||
|
return polyLineBtn
|
||||||
|
}
|
||||||
|
function JScanvasMouseMove(str,e, currentPatterning,downPoint) {
|
||||||
|
const currentPoint = e.absolutePointer
|
||||||
|
let width,height,top,left,radius,rx,ry
|
||||||
|
switch (str) {
|
||||||
|
case 'line':
|
||||||
|
currentPatterning.set('x2', currentPoint.x)
|
||||||
|
currentPatterning.set('y2', currentPoint.y)
|
||||||
|
break
|
||||||
|
case 'rect':
|
||||||
|
width = Math.abs(downPoint.x - currentPoint.x)
|
||||||
|
height = Math.abs(downPoint.y - currentPoint.y)
|
||||||
|
|
||||||
|
top = currentPoint.y > downPoint.y ? downPoint.y : currentPoint.y
|
||||||
|
left = currentPoint.x > downPoint.x ? downPoint.x : currentPoint.x
|
||||||
|
|
||||||
|
currentPatterning.set('width', width)
|
||||||
|
currentPatterning.set('height', height)
|
||||||
|
currentPatterning.set('top', top)
|
||||||
|
currentPatterning.set('left', left)
|
||||||
|
break
|
||||||
|
case 'circle':
|
||||||
|
radius = Math.min(Math.abs(downPoint.x - currentPoint.x), Math.abs(downPoint.y - currentPoint.y)) / 2
|
||||||
|
top = currentPoint.y > downPoint.y ? downPoint.y : downPoint.y - radius * 2
|
||||||
|
left = currentPoint.x > downPoint.x ? downPoint.x : downPoint.x - radius * 2
|
||||||
|
|
||||||
|
currentPatterning.set('radius', radius)
|
||||||
|
currentPatterning.set('top', top)
|
||||||
|
currentPatterning.set('left', left)
|
||||||
|
break
|
||||||
|
case 'triangle':
|
||||||
|
width = Math.abs(downPoint.x - currentPoint.x)
|
||||||
|
height = Math.abs(downPoint.y - currentPoint.y)
|
||||||
|
top = currentPoint.y > downPoint.y ? downPoint.y : currentPoint.y
|
||||||
|
left = currentPoint.x > downPoint.x ? downPoint.x : currentPoint.x
|
||||||
|
currentPatterning.set('width', width)
|
||||||
|
currentPatterning.set('height', height)
|
||||||
|
currentPatterning.set('top', top)
|
||||||
|
currentPatterning.set('left', left)
|
||||||
|
break
|
||||||
|
case 'ellipse':
|
||||||
|
rx = Math.abs(downPoint.x - currentPoint.x) / 2
|
||||||
|
ry = Math.abs(downPoint.y - currentPoint.y) / 2
|
||||||
|
|
||||||
|
top = currentPoint.y > downPoint.y ? downPoint.y : downPoint.y - ry * 2
|
||||||
|
left = currentPoint.x > downPoint.x ? downPoint.x : downPoint.x - rx * 2
|
||||||
|
|
||||||
|
currentPatterning.set('rx', rx)
|
||||||
|
currentPatterning.set('ry', ry)
|
||||||
|
currentPatterning.set('top', top)
|
||||||
|
currentPatterning.set('left', left)
|
||||||
|
break
|
||||||
|
case 'fold':
|
||||||
|
let points = currentPatterning.points
|
||||||
|
points[points.length - 1].x = currentPoint.x
|
||||||
|
points[points.length - 1].y = currentPoint.y
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
export default {multiselectJS,}
|
function JSRectUpdata(rect, downPointer, upPointer) {
|
||||||
|
let height = (downPointer.y - upPointer.y)
|
||||||
|
let width = (downPointer.x - upPointer.x)
|
||||||
|
rect.set({
|
||||||
|
height,
|
||||||
|
width
|
||||||
|
})
|
||||||
|
return rect
|
||||||
|
}
|
||||||
|
export { multiselectJS, JSRectUpdata, JSchangeType, JScanvasMouseDown, JScanvasMouseMove,JScreateCheck }
|
||||||
@@ -4,26 +4,23 @@ let flexible = (designWidth, maxWidth,minWidth) =>{
|
|||||||
maxWidth = maxWidth || 2560;
|
maxWidth = maxWidth || 2560;
|
||||||
minWidth = minWidth || 1024;
|
minWidth = minWidth || 1024;
|
||||||
function refreshRem() {
|
function refreshRem() {
|
||||||
console.log(1);
|
|
||||||
var width = docEl.getBoundingClientRect().width;
|
var width = docEl.getBoundingClientRect().width;
|
||||||
maxWidth = maxWidth || 1920;
|
maxWidth = maxWidth || 1920;
|
||||||
width > maxWidth && (width = maxWidth);
|
width > maxWidth && (width = maxWidth);
|
||||||
width > maxWidth && (width = maxWidth);
|
width > maxWidth && (width = maxWidth);
|
||||||
width < minWidth && (width = minWidth);
|
width < minWidth && (width = minWidth);
|
||||||
var rem = width * 10 / designWidth;
|
var rem = width * 10 / designWidth;
|
||||||
console.log(2);
|
docEl.style.fontSize = rem+'px'
|
||||||
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
|
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
|
||||||
}
|
}
|
||||||
if (docEl.firstElementChild) {
|
// if (docEl.firstElementChild) {
|
||||||
console.log(22);
|
// docEl.firstElementChild.appendChild(remStyle);
|
||||||
docEl.firstElementChild.appendChild(remStyle);
|
// } else {
|
||||||
} else {
|
// var wrap = doc.createElement("div");
|
||||||
console.log(33);
|
// wrap.appendChild(remStyle);
|
||||||
var wrap = doc.createElement("div");
|
// doc.write(wrap.innerHTML);
|
||||||
wrap.appendChild(remStyle);
|
// wrap = null;
|
||||||
doc.write(wrap.innerHTML);
|
// }
|
||||||
wrap = null;
|
|
||||||
}
|
|
||||||
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
||||||
refreshRem();
|
refreshRem();
|
||||||
win.addEventListener("resize", function() {
|
win.addEventListener("resize", function() {
|
||||||
|
|||||||
@@ -137,6 +137,7 @@ export const Https = {
|
|||||||
productList:`/api/product/list`, //获取商品列表
|
productList:`/api/product/list`, //获取商品列表
|
||||||
payAlipay:`/api/ali-pay/trade/page/pay`, //支付宝确认支付
|
payAlipay:`/api/ali-pay/trade/page/pay`, //支付宝确认支付
|
||||||
payPaypal:`/api/paypal/trade`, //paypal确认支付
|
payPaypal:`/api/paypal/trade`, //paypal确认支付
|
||||||
|
getCredits:`/api/credits/getCredits`, //查询用户积分
|
||||||
|
|
||||||
orderInfoList:`/api/order-info/list`, //查询订单列表
|
orderInfoList:`/api/order-info/list`, //查询订单列表
|
||||||
tradeRefundAlipay:`/api/ali-pay/trade/refund`, //支付宝退款
|
tradeRefundAlipay:`/api/ali-pay/trade/refund`, //支付宝退款
|
||||||
@@ -203,6 +204,11 @@ export const Https = {
|
|||||||
trialOrderApproval:`/api/account/trialOrderApproval`,//通过审批
|
trialOrderApproval:`/api/account/trialOrderApproval`,//通过审批
|
||||||
trialOrderRefuse:`/api/account/trialOrderRefuse`,//拒绝审批
|
trialOrderRefuse:`/api/account/trialOrderRefuse`,//拒绝审批
|
||||||
|
|
||||||
|
//查询所有试用用户
|
||||||
|
inquiryGetTrial:`/api/inquiry/getTrial`,//拒绝审批
|
||||||
|
//查询某个时间内design点击次数
|
||||||
|
getDesignStatistic:`/api/inquiry/getDesignStatistic`,//拒绝审批
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
axiosGet(url,config) {
|
axiosGet(url,config) {
|
||||||
|
|||||||
@@ -67,7 +67,7 @@
|
|||||||
<template #bodyCell="{ column, text, record ,index}">
|
<template #bodyCell="{ column, text, record ,index}">
|
||||||
<div class="operate_list" v-if="column?.Operations">
|
<div class="operate_list" v-if="column?.Operations">
|
||||||
<div class="operate_item" @click="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div>
|
<div class="operate_item" @click="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div>
|
||||||
<div class="operate_item" @click="renameCollection(record,index)">{{ $t('HistoryPage.Rename') }}</div>
|
<div class="operate_item" @click="renameCollection(record,index)">{{ $t('LibraryPage.Rename') }}</div>
|
||||||
<div class="operate_item" @click="retrieveHome(record)">{{ $t('HistoryPage.Retrieve') }}</div>
|
<div class="operate_item" @click="retrieveHome(record)">{{ $t('HistoryPage.Retrieve') }}</div>
|
||||||
<div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div>
|
<div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -82,6 +82,9 @@
|
|||||||
<setLabel ref="setLabel"></setLabel>
|
<setLabel ref="setLabel"></setLabel>
|
||||||
<RobotAssist></RobotAssist>
|
<RobotAssist></RobotAssist>
|
||||||
<searchLabel ref="searchLabel"></searchLabel>
|
<searchLabel ref="searchLabel"></searchLabel>
|
||||||
|
<div class="mark_loading" v-show="isShowMark">
|
||||||
|
<a-spin size="large" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@@ -110,6 +113,7 @@ export default defineComponent({
|
|||||||
setup() {
|
setup() {
|
||||||
let rangePickerValue:any = ref([])
|
let rangePickerValue:any = ref([])
|
||||||
let renameData:any = ref({}) //修改名字选中的数据
|
let renameData:any = ref({}) //修改名字选中的数据
|
||||||
|
let isShowMark:any = ref(false)
|
||||||
const columns:any = computed(()=>{
|
const columns:any = computed(()=>{
|
||||||
return [
|
return [
|
||||||
{ title: useI18n().t('HistoryPage.CollectionsName'), align:'center', ellipsis: true, width: 150, dataIndex: 'name', key: 'collectionName' },
|
{ title: useI18n().t('HistoryPage.CollectionsName'), align:'center', ellipsis: true, width: 150, dataIndex: 'name', key: 'collectionName' },
|
||||||
@@ -163,6 +167,7 @@ export default defineComponent({
|
|||||||
props,
|
props,
|
||||||
intersection,
|
intersection,
|
||||||
selectCode,
|
selectCode,
|
||||||
|
isShowMark,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
@@ -198,7 +203,6 @@ export default defineComponent({
|
|||||||
"userId": ''
|
"userId": ''
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(data);
|
|
||||||
Https.axiosPost(Https.httpUrls.queryClassification, data).then(
|
Https.axiosPost(Https.httpUrls.queryClassification, data).then(
|
||||||
(rv: any) => {
|
(rv: any) => {
|
||||||
this.options = rv
|
this.options = rv
|
||||||
@@ -236,19 +240,23 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
getHistoryList(){
|
getHistoryList(){
|
||||||
|
this.isShowMark = true
|
||||||
let startDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[0]).getTime(): ''
|
let startDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[0]).getTime(): ''
|
||||||
let endDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[1]).getTime(): ''
|
let endDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[1]).getTime(): ''
|
||||||
let data = {
|
|
||||||
page:this.currentPage,
|
|
||||||
size:this.pageSize,
|
|
||||||
collectionName:this.searchCollectionName,
|
|
||||||
startDate:startDate,
|
|
||||||
endDate:endDate
|
|
||||||
}
|
|
||||||
let labelArr:any = []
|
let labelArr:any = []
|
||||||
this.value.labelValue.forEach((item:any)=>{
|
this.value.labelValue.forEach((item:any)=>{
|
||||||
labelArr.push(item[item.length-1])
|
labelArr.push(item[item.length-1])
|
||||||
})
|
})
|
||||||
|
let data = {
|
||||||
|
classificationIdList:labelArr,
|
||||||
|
page:this.currentPage,
|
||||||
|
size:this.pageSize,
|
||||||
|
collectionName:this.searchCollectionName,
|
||||||
|
startDate:startDate,
|
||||||
|
endDate:endDate,
|
||||||
|
intersection:this.intersection,
|
||||||
|
}
|
||||||
// console.log(this.value.labelValue);
|
// console.log(this.value.labelValue);
|
||||||
|
|
||||||
// let data = {
|
// let data = {
|
||||||
@@ -271,8 +279,11 @@ export default defineComponent({
|
|||||||
this.collectionList = rv.content
|
this.collectionList = rv.content
|
||||||
this.total = rv.total
|
this.total = rv.total
|
||||||
}
|
}
|
||||||
|
this.isShowMark = false
|
||||||
}
|
}
|
||||||
);
|
).catch(res=>{
|
||||||
|
this.isShowMark = false
|
||||||
|
});;
|
||||||
},
|
},
|
||||||
|
|
||||||
//删除分组
|
//删除分组
|
||||||
|
|||||||
@@ -116,7 +116,7 @@
|
|||||||
<div class="button_second Guide_1_31" @click="exportModel()">
|
<div class="button_second Guide_1_31" @click="exportModel()">
|
||||||
{{ $t('HomeView.Export') }}
|
{{ $t('HomeView.Export') }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<!-- <div
|
||||||
:class="[
|
:class="[
|
||||||
'icon',
|
'icon',
|
||||||
'iconfont',
|
'iconfont',
|
||||||
@@ -124,12 +124,12 @@
|
|||||||
isShowOperate ? 'icon_rotate' : '',
|
isShowOperate ? 'icon_rotate' : '',
|
||||||
]"
|
]"
|
||||||
@click.stop="changeShowOperateContent()"
|
@click.stop="changeShowOperateContent()"
|
||||||
></div>
|
></div> -->
|
||||||
<div class="export_nav" v-show="isShowOperate" @click.stop="">
|
<!-- <div class="export_nav" v-show="isShowOperate" @click.stop="">
|
||||||
<a-checkbox v-for="item in exportNav" v-model:checked="item.change" :disabled='item.noChange'>
|
<a-checkbox v-for="item in exportNav" v-model:checked="item.change" :disabled='item.noChange'>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</a-checkbox>
|
</a-checkbox>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,75 +1,87 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="history_page">
|
<div class="trial_page">
|
||||||
<div class="page_content">
|
<div class="page_content">
|
||||||
<img
|
<img
|
||||||
class="page_content_bg"
|
class="page_content_bg"
|
||||||
src="@/assets/images/homePage/bg.png"
|
src="@/assets/images/homePage/bg1.jpg"
|
||||||
/>
|
/>
|
||||||
<div class="page_content_body">
|
<div class="page_content_body">
|
||||||
<HeaderComponent></HeaderComponent>
|
<div class="trial_page_body">
|
||||||
<div class="history_page_body">
|
<div class="trial_table_search">
|
||||||
<div class="history_header">{{ $t('HistoryPage.History') }}</div>
|
<a-range-picker
|
||||||
<div class="history_table_search">
|
class="range_picker"
|
||||||
|
v-model:value="rangePickerValue"
|
||||||
<!-- <div class="content_search_block">
|
:placeholder="[
|
||||||
<input class="search_input" :placeholder="$t('HistoryPage.inputContent1')" v-model="searchCollectionName" @keydown.enter="searchHistoryList()">
|
$t('HistoryPage.StartDate'),
|
||||||
<div class="search_icon_block" @click="searchHistoryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
$t('HistoryPage.EndDate'),
|
||||||
</div> -->
|
]"
|
||||||
<div class="content_search_block">
|
valueFormat="YYYY-MM-DD"
|
||||||
<a-range-picker class="range_picker" v-model:value="rangePickerValue" :placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]" valueFormat="YYYY-MM-DD">
|
>
|
||||||
<template #suffixIcon>
|
<template #suffixIcon>
|
||||||
<span class="icon iconfont range_picker_icon icon-rili"></span>
|
<span
|
||||||
|
class="icon iconfont range_picker_icon icon-rili"
|
||||||
|
></span>
|
||||||
</template>
|
</template>
|
||||||
</a-range-picker>
|
</a-range-picker>
|
||||||
<input class="search_input" :placeholder="$t('LibraryPage.inputContent1')" v-model="searchCollectionName" @keydown.enter="searchHistoryList()">
|
<div class="content_search_block">
|
||||||
<div class="search_cascader">
|
<input
|
||||||
<el-cascader
|
class="search_input"
|
||||||
:options="options"
|
:placeholder="$t('HistoryPage.inputContent1')"
|
||||||
filterable
|
v-model="searchCollectionName"
|
||||||
v-model="value.labelValue"
|
@keydown.enter="searchHistoryList()"
|
||||||
:collapse-tags="true"
|
/>
|
||||||
:show-all-levels="false"
|
<div
|
||||||
:clearable="true"
|
class="search_icon_block"
|
||||||
:placeholder="$t('LibraryPage.Select')"
|
@click="searchHistoryList()"
|
||||||
:max-collapse-tags=3
|
|
||||||
:props="props"
|
|
||||||
:collapse-tags-tooltip="true"
|
|
||||||
ref="cascader"
|
|
||||||
popper-class="libraryPageCascader"
|
|
||||||
@visible-change="dropdownVisibleChange"
|
|
||||||
>
|
>
|
||||||
<template #empty>
|
<span class="icon iconfont icon-sousuo"></span>
|
||||||
<div>
|
|
||||||
{{$t('LibraryPage.Select')}}
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
</el-cascader>
|
|
||||||
</div>
|
|
||||||
<div class="intersection">
|
|
||||||
<div :title="$t('LibraryPage.unionSet')" @click="()=>intersection = 1" v-show="intersection == 0" :class="['icon', 'iconfont','icon-bingji',]"></div>
|
|
||||||
<div :title="$t('LibraryPage.intersection')" @click="()=>intersection = 0" v-show="intersection == 1" :class="['icon', 'iconfont','icon-bingji1',]"></div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="search_icon_block" @click="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div> -->
|
|
||||||
<div class="generage_btn search_icon_block" @click="searchHistoryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="history_table_content" ref="historyTable">
|
<div class="trial_table_content" ref="historyTable">
|
||||||
<a-table :columns="columns" :data-source="collectionList" :scroll="{ y: historyTableHeight }" @change="changePage"
|
<a-table
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="collectionList"
|
||||||
|
:scroll="{ y: historyTableHeight }"
|
||||||
|
@change="changePage"
|
||||||
:pagination="{
|
:pagination="{
|
||||||
showSizeChanger: true,
|
showSizeChanger: true,
|
||||||
current: currentPage,
|
current: currentPage,
|
||||||
pageSize: pageSize,
|
pageSize: pageSize,
|
||||||
total: total,
|
total: total,
|
||||||
showQuickJumper: true,
|
showQuickJumper: true,
|
||||||
bordered:false
|
bordered: false,
|
||||||
}">
|
}"
|
||||||
<template #bodyCell="{ column, text, record ,index}">
|
>
|
||||||
<div class="operate_list" v-if="column?.Operations">
|
<template
|
||||||
<div class="operate_item" @click="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div>
|
#bodyCell="{ column, text, record, index }"
|
||||||
<div class="operate_item" @click="renameCollection(record,index)">{{ $t('HistoryPage.Rename') }}</div>
|
>
|
||||||
<div class="operate_item" @click="retrieveHome(record)">{{ $t('HistoryPage.Retrieve') }}</div>
|
<div
|
||||||
<div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div>
|
class="operate_list"
|
||||||
|
v-if="column?.Operations"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-show="status == 0"
|
||||||
|
class="operate_item"
|
||||||
|
@click="setConsent(record, index)"
|
||||||
|
>
|
||||||
|
consent
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-show="status == 0"
|
||||||
|
class="operate_item"
|
||||||
|
@click="setRefuse(record, index)"
|
||||||
|
>
|
||||||
|
refuse
|
||||||
|
</div>
|
||||||
|
<!-- <div
|
||||||
|
class="operate_item"
|
||||||
|
@click="deleteGroup(record, index)"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</div> -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</a-table>
|
</a-table>
|
||||||
@@ -77,93 +89,138 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<HistoryDetail ref="historyDetail" :groupDetails="groupDetails" :collectionName="collectionName"></HistoryDetail>
|
|
||||||
|
|
||||||
<setLabel ref="setLabel"></setLabel>
|
|
||||||
<RobotAssist></RobotAssist>
|
|
||||||
<searchLabel ref="searchLabel"></searchLabel>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent,ref,createVNode,computed,nextTick,provide} from 'vue'
|
import { defineComponent, ref, createVNode, computed } from "vue";
|
||||||
|
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||||
import HeaderComponent from "@/component/HomePage/Header.vue";
|
import HeaderComponent from "@/component/HomePage/Header.vue";
|
||||||
import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
|
import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
|
||||||
|
import router from "@/router/index";
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
import { formatTime } from "@/tool/util"
|
import { formatTime } from "@/tool/util";
|
||||||
import { Modal,message } from 'ant-design-vue';
|
import { Modal, message } from "ant-design-vue";
|
||||||
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||||
import { ElCascader } from 'element-plus'
|
import { useI18n } from "vue-i18n";
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
import setLabel from '@/component/LibraryPage/setLabel.vue';
|
|
||||||
import searchLabel from '@/component/LibraryPage/searchLabel.vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
HeaderComponent,
|
HeaderComponent,
|
||||||
HistoryDetail,
|
HistoryDetail,
|
||||||
RobotAssist,
|
RobotAssist,
|
||||||
setLabel,
|
|
||||||
ElCascader,
|
|
||||||
searchLabel
|
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
let rangePickerValue:any = ref([])
|
let rangePickerValue: any = ref([]);
|
||||||
let renameData:any = ref({}) //修改名字选中的数据
|
let renameData: any = ref({}); //修改名字选中的数据
|
||||||
const columns: any = computed(() => {
|
const columns: any = computed(() => {
|
||||||
return [
|
return [
|
||||||
{ title: useI18n().t('HistoryPage.CollectionsName'), align:'center', ellipsis: true, width: 150, dataIndex: 'name', key: 'collectionName' },
|
|
||||||
{ title: useI18n().t('HistoryPage.UptateTime'), align:'center', ellipsis: true,width: 150, dataIndex: 'updateDate', key: 'updateTime',customRender:(record:any)=>{
|
|
||||||
let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
|
|
||||||
return time
|
|
||||||
}},
|
|
||||||
{ title: useI18n().t('HistoryPage.SketchCounts'), align:'center', ellipsis: true, width: 150, dataIndex: 'sketchCount', key: 'sketchCounts' },
|
|
||||||
{
|
{
|
||||||
title: useI18n().t('HistoryPage.Operations'),
|
title: 'Email',
|
||||||
key: 'operation',
|
align: "center",
|
||||||
align:'center',
|
ellipsis: true,
|
||||||
fixed: 'right',
|
width: 170,
|
||||||
|
dataIndex: "email",
|
||||||
|
key: "email",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Create Time',
|
||||||
|
align: "center",
|
||||||
|
ellipsis: 200,
|
||||||
|
dataIndex: "updateTime",
|
||||||
|
key: "updateTime",
|
||||||
|
// customRender: (record: any) => {
|
||||||
|
// let time = formatTime(
|
||||||
|
// record.text / 1000,
|
||||||
|
// "YYYY-MM-DD hh:mm:ss"
|
||||||
|
// );
|
||||||
|
// return time;
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'State',
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
width: 150,
|
width: 150,
|
||||||
|
dataIndex: "status",
|
||||||
|
key: "status",
|
||||||
|
customRender: (record: any) => {
|
||||||
|
let str
|
||||||
|
if(record.value == 0){
|
||||||
|
str ='pending'
|
||||||
|
}else if(record.value == 1){
|
||||||
|
str ='consent'
|
||||||
|
}else if(record.value == 2){
|
||||||
|
str ='reject'
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Address',
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
width: 150,
|
||||||
|
dataIndex: "country",
|
||||||
|
key: "country",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Surname',
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
width: 150,
|
||||||
|
dataIndex: "surname",
|
||||||
|
key: "surname",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Name',
|
||||||
|
align: "center",
|
||||||
|
ellipsis: true,
|
||||||
|
width: 150,
|
||||||
|
dataIndex: "userName",
|
||||||
|
key: "userName",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Operations',
|
||||||
|
key: "operation",
|
||||||
|
align: "center",
|
||||||
|
fixed: "right",
|
||||||
|
width: 200,
|
||||||
// slots:{customRender:'action'}
|
// slots:{customRender:'action'}
|
||||||
Operations: true,
|
Operations: true,
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
});
|
});
|
||||||
let collectionList:any = ref([])
|
|
||||||
let {t} = useI18n()
|
let state:any = ref([
|
||||||
const options:any = ref([
|
{
|
||||||
]);
|
name:'all',
|
||||||
let value = ref({
|
value:'',
|
||||||
labelValue:[],
|
},
|
||||||
editLabelValue:[],
|
{
|
||||||
})
|
name:'unprocessed',
|
||||||
let props = {
|
value:0,
|
||||||
multiple: true,
|
},
|
||||||
checkStrictly: true,
|
{
|
||||||
emitPath:true,
|
name:'pending',
|
||||||
children:'childList',
|
value:1,
|
||||||
value:'id',
|
},
|
||||||
label:'classificationName',
|
{
|
||||||
}
|
name:'rejected',
|
||||||
let intersection = ref(1)
|
value:2,
|
||||||
let selectCode = ref('History')
|
},
|
||||||
let type:any = {
|
])
|
||||||
selectCode:selectCode,
|
let collectionList: any = ref([]);
|
||||||
designType:''
|
let status: any = ref(0);
|
||||||
}
|
let voluntarily: any = ref(false);
|
||||||
provide('type',type)
|
|
||||||
return {
|
return {
|
||||||
rangePickerValue,
|
rangePickerValue,
|
||||||
columns,
|
columns,
|
||||||
collectionList,
|
collectionList,
|
||||||
renameData,
|
renameData,
|
||||||
t,
|
status,
|
||||||
options,
|
state,
|
||||||
value,
|
voluntarily,
|
||||||
props,
|
};
|
||||||
intersection,
|
|
||||||
selectCode,
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -171,198 +228,115 @@ export default defineComponent({
|
|||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
total: 0,
|
total: 0,
|
||||||
historyTableHeight: 0,
|
historyTableHeight: 0,
|
||||||
newCollectionName:'',
|
newCollectionName: "",
|
||||||
groupDetails:{},//每个collection的详情
|
renameVisivle: false, //修改名字弹窗
|
||||||
collectionName:'',//选中的名字
|
collectionName: "", //选中的名字
|
||||||
searchCollectionName:'',
|
searchCollectionName: "",
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
let historyTable:any = this.$refs.historyTable
|
let historyTable: any = this.$refs.historyTable;
|
||||||
this.historyTableHeight = historyTable.clientHeight - 130
|
this.historyTableHeight = historyTable.clientHeight - 130;
|
||||||
this.getHistoryList()
|
this.gettrialList();
|
||||||
this.getClass()
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getClass(){
|
|
||||||
let data = {
|
|
||||||
"classificationIdList": [],
|
|
||||||
"classificationName": "",
|
|
||||||
"createTime": "",
|
|
||||||
"deleteConfirm": '',
|
|
||||||
"id": '',
|
|
||||||
"libraryId": '',
|
|
||||||
"parentId": '',
|
|
||||||
"type": this.selectCode,
|
|
||||||
"updateTime": "",
|
|
||||||
"userId": ''
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(data);
|
|
||||||
Https.axiosPost(Https.httpUrls.queryClassification, data).then(
|
|
||||||
(rv: any) => {
|
|
||||||
this.options = rv
|
|
||||||
rv.forEach((rvItem:any,rvIndex:number) => {
|
|
||||||
this.options[rvIndex].value = rvItem.id
|
|
||||||
this.options[rvIndex].label = rvItem.classificationName
|
|
||||||
rvItem.childList.forEach((childItem:any,index:number) => {
|
|
||||||
this.options[rvIndex].childList[index].value = childItem.id
|
|
||||||
this.options[rvIndex].childList[index].label = childItem.classificationName
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
).catch((res)=>{
|
|
||||||
});
|
|
||||||
},
|
|
||||||
turnToDetail(record:any){
|
|
||||||
this.groupDetails = record.groupDetails
|
|
||||||
let historyDetail:any = this.$refs.historyDetail
|
|
||||||
this.collectionName = record.name
|
|
||||||
historyDetail.changeDetailShow()
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
//改变页码
|
//改变页码
|
||||||
changePage(e: any) {
|
changePage(e: any) {
|
||||||
this.currentPage = e.current
|
this.currentPage = e.current;
|
||||||
this.pageSize = e.pageSize
|
this.pageSize = e.pageSize;
|
||||||
this.getHistoryList()
|
this.gettrialList();
|
||||||
},
|
},
|
||||||
|
|
||||||
//查询列表
|
//查询列表
|
||||||
searchHistoryList() {
|
searchHistoryList() {
|
||||||
this.currentPage = 1
|
this.currentPage = 1;
|
||||||
this.getHistoryList()
|
this.gettrialList();
|
||||||
},
|
},
|
||||||
|
|
||||||
getHistoryList(){
|
|
||||||
let startDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[0]).getTime(): ''
|
|
||||||
let endDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[1]).getTime(): ''
|
|
||||||
let data = {
|
|
||||||
page:this.currentPage,
|
|
||||||
size:this.pageSize,
|
|
||||||
collectionName:this.searchCollectionName,
|
|
||||||
startDate:startDate,
|
|
||||||
endDate:endDate
|
|
||||||
}
|
|
||||||
let labelArr:any = []
|
|
||||||
this.value.labelValue.forEach((item:any)=>{
|
|
||||||
labelArr.push(item[item.length-1])
|
|
||||||
})
|
|
||||||
// console.log(this.value.labelValue);
|
|
||||||
|
|
||||||
// let data = {
|
|
||||||
// classificationIdList:labelArr,
|
//获取列表
|
||||||
// level1Type:this.selectCode,
|
gettrialList() {
|
||||||
// level2Type:'',
|
let startDate: any = this.rangePickerValue[0]
|
||||||
// page:1,
|
? this.rangePickerValue[0]+' '+'00:00:00'
|
||||||
// modelSex:'',
|
: "";
|
||||||
// pictureName:this.searchCollectionName,
|
let endDate: any = this.rangePickerValue[1]
|
||||||
// size:this.pageSize,
|
? this.rangePickerValue[1]+' '+'00:00:00'
|
||||||
// intersection:this.intersection,
|
: "";
|
||||||
// }
|
let data = {
|
||||||
Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
|
endTime:startDate,
|
||||||
// Https.axiosPost( Https.httpUrls.queryLibraryPage, data).then(
|
startTime:endDate,
|
||||||
(rv: any) => {
|
|
||||||
if(this.currentPage > 1 && rv.content.length == 0){
|
|
||||||
this.currentPage = 1
|
|
||||||
this.getHistoryList()
|
|
||||||
}else{
|
|
||||||
this.collectionList = rv.content
|
|
||||||
this.total = rv.total
|
|
||||||
}
|
}
|
||||||
|
console.log(data);
|
||||||
|
|
||||||
|
console.log(this.rangePickerValue,startDate,endDate);
|
||||||
|
Https.axiosGet(Https.httpUrls.getDesignStatistic,{params:data}).then((rv: any) => {
|
||||||
|
if (rv) {
|
||||||
|
console.log(rv);
|
||||||
|
|
||||||
|
// this.workspaceItem.position = this.singleTypeList[0].label
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setConsent(record: any, index: number){
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append('ids',record.id)
|
||||||
|
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||||
|
Https.axiosPost(Https.httpUrls.trialOrderApproval, {ids:record.id}).then(
|
||||||
|
(rv: any) => {
|
||||||
|
message.success('同意成功~')
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
setRefuse(record: any, index: number){
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append('ids',record.id)
|
||||||
|
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||||
|
Https.axiosPost(Https.httpUrls.trialOrderRefuse, formData,config).then(
|
||||||
|
(rv: any) => {
|
||||||
|
this.gettrialList();
|
||||||
|
message.success('拒绝成功~')
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
//删除分组
|
//删除分组
|
||||||
deleteGroup(record:any,index:number){
|
// deleteGroup(record: any, index: number) {
|
||||||
let deleteGroupFun = (id:any,index:number) =>{
|
// let deleteGroupFun = (id: any, index: number) => {
|
||||||
let data = {
|
// let data = {
|
||||||
userGroupId:id
|
// userGroupId: id,
|
||||||
}
|
// };
|
||||||
Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
|
// Https.axiosPost(Https.httpUrls.deleteUserGroup, data).then(
|
||||||
(rv: any) => {
|
// (rv: any) => {
|
||||||
message.success(this.t('HistoryPage.jsContent1'))
|
// this.collectionList.splice(index, 1);
|
||||||
this.collectionList.splice(index,1)
|
// }
|
||||||
}
|
// );
|
||||||
);
|
// };
|
||||||
}
|
// Modal.confirm({
|
||||||
Modal.confirm({
|
// title: "",
|
||||||
title: this.t('HistoryPage.jsContent2'),
|
// icon: createVNode(ExclamationCircleOutlined),
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
// okText: "Yes",
|
||||||
okText: 'Yes',
|
// cancelText: "No",
|
||||||
cancelText: 'No',
|
// centered: true,
|
||||||
centered:true,
|
// mask: false,
|
||||||
mask:false,
|
// onOk() {
|
||||||
onOk() {
|
// deleteGroupFun(record.id, index);
|
||||||
deleteGroupFun(record.id,index)
|
// },
|
||||||
}
|
// });
|
||||||
|
// },
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
});
|
});
|
||||||
},
|
|
||||||
|
|
||||||
//修改名字
|
|
||||||
renameCollection(record:any,index:number){
|
|
||||||
let searchLabel:any = this.$refs.searchLabel
|
|
||||||
searchLabel.init(record,index)
|
|
||||||
},
|
|
||||||
|
|
||||||
retrieveHome(record:any){
|
|
||||||
this.$router.push({name:'home',params: {id:record.id}})
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
removeLabel(){
|
|
||||||
let setLabel:any = this.$refs.setLabel
|
|
||||||
let cascader:any = this.$refs.cascader
|
|
||||||
cascader.togglePopperVisible()
|
|
||||||
let event = new Event('click', {"bubbles":true, "cancelable":true});
|
|
||||||
document.dispatchEvent(event);
|
|
||||||
setLabel.init('add',this.options)
|
|
||||||
},
|
|
||||||
dropdownVisibleChange(){
|
|
||||||
let element:any = this.$refs.cascader
|
|
||||||
nextTick().then(()=>{
|
|
||||||
let cascader = document.getElementsByClassName('libraryPageCascader')[0]
|
|
||||||
let cascaderChild = cascader
|
|
||||||
let element:any = this.$refs.cascader
|
|
||||||
if(cascader.children.length > 3 ){
|
|
||||||
}else{
|
|
||||||
let button1:any = document.createElement("span")
|
|
||||||
button1.classList.add('started_btn','cascader_btn1')
|
|
||||||
let button2:any = document.createElement("span")
|
|
||||||
button2.classList.add('started_btn','cascader_btn2')
|
|
||||||
let divMax:any = document.createElement("div")
|
|
||||||
divMax.classList.add('cascader_btn_max')
|
|
||||||
button1.textContent = 'Edit'
|
|
||||||
// button2.textContent = '删除'
|
|
||||||
button1.addEventListener('click',this.removeLabel,false)
|
|
||||||
divMax.appendChild(button1)
|
|
||||||
// divMax.appendChild(button2)
|
|
||||||
cascaderChild?.insertAdjacentElement("afterbegin", divMax);
|
|
||||||
|
|
||||||
// cascader.addEventListener('click',this.cascaderClick)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
let el = element.contentRef?.getElementsByClassName('el-cascader-menu__empty-text')?.[0]
|
|
||||||
if(el){
|
|
||||||
el.innerHTML = this.t('LibraryPage.NoLabel')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.history_page {
|
.trial_page {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 9rem;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
// min-width: 1440px;
|
// min-width: 1440px;
|
||||||
position: relative;
|
position: relative;
|
||||||
.page_content {
|
.page_content {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.page_content_bg {
|
.page_content_bg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -375,28 +349,19 @@ export default defineComponent({
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.history_page_body{
|
.trial_page_body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 7rem);
|
height: calc(100% - 7rem);
|
||||||
padding: 0 2.5rem 4rem;
|
padding: 0 2.5rem 4rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
.trial_table_search {
|
||||||
.history_header{
|
|
||||||
font-size: 1.8rem;
|
|
||||||
height: 6.3rem;
|
|
||||||
line-height: 6.3rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history_table_search{
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-top: 5rem;
|
||||||
|
color: #fff;
|
||||||
.range_picker {
|
.range_picker {
|
||||||
width: 36rem;
|
width: 36rem;
|
||||||
height: 3rem;
|
height: 4.8rem;
|
||||||
margin-right: 2rem;
|
|
||||||
|
|
||||||
.ant-picker-input > input {
|
.ant-picker-input > input {
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
@@ -405,66 +370,51 @@ export default defineComponent({
|
|||||||
.range_picker_icon {
|
.range_picker_icon {
|
||||||
font-size: 2.2rem;
|
font-size: 2.2rem;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.ant-picker:hover, .ant-picker-focused{
|
|
||||||
border-color: #d5d8df;
|
|
||||||
}
|
}
|
||||||
.content_search_block {
|
.content_search_block {
|
||||||
|
margin-left: 4rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
width: 140rem;
|
|
||||||
.search_input {
|
.search_input {
|
||||||
height: 3rem;
|
width: 32.8rem;
|
||||||
border-radius: 0.5rem;
|
|
||||||
width: 20rem;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
||||||
padding-left: 1.5rem;
|
padding-left: 1.5rem;
|
||||||
border: 0.2rem solid #d5d8df;
|
height: 4.8rem;
|
||||||
font-size: 1.2rem;
|
line-height: 4.6rem;
|
||||||
|
background: #ffffff;
|
||||||
|
border: 0.1rem solid #f1f1f1;
|
||||||
|
font-size: 1.6rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
margin-right: 2rem;
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: #C2C2C2;
|
color: #c2c2c2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.search_cascader{
|
|
||||||
// width: 53%;
|
|
||||||
width: 38rem;
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
.search_icon_block {
|
.search_icon_block {
|
||||||
width: 5.2rem;
|
width: 7.2rem;
|
||||||
height: 2.8rem;
|
height: 4.8rem;
|
||||||
line-height: 2.8rem;
|
line-height: 4.8rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #343579;
|
background: #343579;
|
||||||
background-color: #39215b;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 2rem;
|
|
||||||
margin-left: 3rem;
|
|
||||||
.icon-sousuo {
|
.icon-sousuo {
|
||||||
font-size: 1.6rem;
|
font-size: 2rem;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.intersection{
|
|
||||||
margin-left: 3rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.history_table_content{
|
.trial_table_content {
|
||||||
margin-top: 2.6rem;
|
margin-top: 2.6rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 13.7rem);
|
height: calc(100% - 13.7rem);
|
||||||
background: rgba(255, 255, 255, 0.6);
|
background: rgba(255, 255, 255, 0.3);
|
||||||
padding-bottom: 3rem;
|
padding-bottom: 3rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
backdrop-filter: blur(3rem);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.38);
|
||||||
.ant-table {
|
.ant-table {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
@@ -474,25 +424,26 @@ export default defineComponent({
|
|||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
overflow: -moz-scrollbars-none;
|
overflow: -moz-scrollbars-none;
|
||||||
|
|
||||||
&::-webkit-scrollbar { width: 0 !important }
|
&::-webkit-scrollbar {
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-table-thead > tr > th {
|
.ant-table-thead > tr > th {
|
||||||
background: #FFFFFF;
|
background: #ffffff00;
|
||||||
|
color: #fff;
|
||||||
|
border-bottom: none;
|
||||||
|
backdrop-filter: blur(1rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-table-tbody > tr > td {
|
.ant-table-tbody > tr > td {
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
// color: #fff;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-table-tbody > tr {
|
.ant-table-tbody > tr {
|
||||||
|
|
||||||
&:hover > td {
|
&:hover > td {
|
||||||
background: #FFFFFF;
|
background: #ffffff3a;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -518,46 +469,5 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.rename_modal_component{
|
|
||||||
|
|
||||||
.collection_rename_content{
|
|
||||||
padding:2rem 9.2rem 3rem;
|
|
||||||
|
|
||||||
|
|
||||||
.rename_form_content{
|
|
||||||
|
|
||||||
.rename_form_input{
|
|
||||||
width: 100%;
|
|
||||||
height: 4.6rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
border: 0.1rem solid #B4BED7;
|
|
||||||
padding-left: 2.1rem;
|
|
||||||
line-height: 4.6rem;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color:#A5B0C2,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rename_submit_button{
|
|
||||||
height: 4.8rem;
|
|
||||||
line-height: 4.8rem;
|
|
||||||
background: #343579;
|
|
||||||
font-size: 2.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #FFFFFF;
|
|
||||||
width: 16rem;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 4.5rem auto 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -7,7 +7,7 @@
|
|||||||
<div class="upgrade-content-wire"></div>
|
<div class="upgrade-content-wire"></div>
|
||||||
<!-- <div class="upgrade-content-text">System upgrading</div> -->
|
<!-- <div class="upgrade-content-text">System upgrading</div> -->
|
||||||
<div class="upgrade-content-text">System maintenance</div>
|
<div class="upgrade-content-text">System maintenance</div>
|
||||||
<div class="upgrade-content-textab">System maintenance will start at 10:00 and is expected to be completed at 12:00.</div>
|
<div class="upgrade-content-textab">Due to system server upgrades, we will be conducting maintenance on Monday, March 4th, from 10:00 AM to 3:00 PM Hong Kong time. During this period, access to the AiDA system will be temporarily unavailable.<br> We apologize for any inconvenience this may cause and appreciate your understanding.</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -85,6 +85,7 @@ export default defineComponent({
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
color: #8e8e8e;
|
color: #8e8e8e;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -265,12 +265,6 @@ export default defineComponent({
|
|||||||
this.gettrialList();
|
this.gettrialList();
|
||||||
let userInfo:any = getCookie("userInfo")
|
let userInfo:any = getCookie("userInfo")
|
||||||
this.userInfo = JSON.parse(userInfo);
|
this.userInfo = JSON.parse(userInfo);
|
||||||
|
|
||||||
if (this.userInfo.userId == 83 || this.userInfo.userId == 88 || this.userInfo.userId == 6) {
|
|
||||||
} else {
|
|
||||||
router.replace("/home");
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.getIsAutoApproval()
|
this.getIsAutoApproval()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
Reference in New Issue
Block a user