Merge branch 'localDevelop' into develop
This commit is contained in:
@@ -13,7 +13,7 @@
|
|||||||
:mask="true"
|
:mask="true"
|
||||||
>
|
>
|
||||||
<div class="designOpenrtion_content">
|
<div class="designOpenrtion_content">
|
||||||
<div class="modal_title_text">
|
<div class="design_title_text">
|
||||||
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
|
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="design_closeIcon" @click.stop="closeModal()">
|
<div class="design_closeIcon" @click.stop="closeModal()">
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="modal_img">
|
<div class="modal_img">
|
||||||
<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
|
<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
|
||||||
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
|
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`,'background-image':color?.gradient?`linear-gradient(${color?.gradient?.angle}deg,${setGradient(color.gradient)})`:'none'}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -49,7 +49,27 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<!-- <div>1231239817239871923918723</div> -->
|
<div class="color_setting_operate" v-show="gradientShow">
|
||||||
|
<div class="color_setting_operate_item color_setting_operate_control">
|
||||||
|
<div class="operate_item_box">
|
||||||
|
<div>线性</div>
|
||||||
|
</div>
|
||||||
|
<div class="operate_item_box operate_item_angle">
|
||||||
|
<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event)" @touchstart="mousedownGradientAngle($event)">
|
||||||
|
<div :style="{'transform':`rotate(${gradient.angle}deg)`}"></div>
|
||||||
|
</div>
|
||||||
|
<!-- <input type="number"> -->
|
||||||
|
</div>
|
||||||
|
<div class="operate_item_box">
|
||||||
|
<div>删除</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="color_setting_operate_item color_setting_operate_input">
|
||||||
|
<div class="color_setting_operate_bg" :style="{'background-image':`linear-gradient(90deg,${setGradient(gradient)})`}">
|
||||||
|
</div>
|
||||||
|
<div v-for="item,index in gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient($event,item,index)" @touchstart="mousedownGradient($event,item,index)"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="color_review_block">
|
<!-- <div class="color_review_block">
|
||||||
<div class="clear_button" @click="clearCurrentColor()">Clear</div>
|
<div class="clear_button" @click="clearCurrentColor()">Clear</div>
|
||||||
@@ -125,7 +145,7 @@ import GO from "@/tool/GO";
|
|||||||
import { defineComponent, h,ref,inject, nextTick } from 'vue'
|
import { defineComponent, h,ref,inject, nextTick } from 'vue'
|
||||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||||
import {getCookie} from '@/tool/cookie'
|
import {getCookie} from '@/tool/cookie'
|
||||||
import {getUploadUrl,rgbToHsv} from '@/tool/util'
|
import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
|
||||||
import {useStore} from 'vuex'
|
import {useStore} from 'vuex'
|
||||||
import ColorThief from '@/tool/colorthief/colorthief'
|
import ColorThief from '@/tool/colorthief/colorthief'
|
||||||
import { message,Upload} from 'ant-design-vue';
|
import { message,Upload} from 'ant-design-vue';
|
||||||
@@ -147,6 +167,30 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
let driver__ = inject('driver__')
|
let driver__ = inject('driver__')
|
||||||
let {t} = useI18n()
|
let {t} = useI18n()
|
||||||
|
let gradient = ref({
|
||||||
|
gradientList:[
|
||||||
|
{
|
||||||
|
rgba:{
|
||||||
|
r:117,
|
||||||
|
g:119,
|
||||||
|
b:255,
|
||||||
|
a:1,
|
||||||
|
},
|
||||||
|
left:'0%'
|
||||||
|
},{
|
||||||
|
rgba:{
|
||||||
|
r:0,
|
||||||
|
g:222,
|
||||||
|
b:152,
|
||||||
|
a:1,
|
||||||
|
},
|
||||||
|
left:'100%'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
angle:45,
|
||||||
|
selectIndex:-1,
|
||||||
|
})
|
||||||
|
let gradientShow = ref(false)
|
||||||
return {
|
return {
|
||||||
fileList,
|
fileList,
|
||||||
colorList,
|
colorList,
|
||||||
@@ -154,6 +198,8 @@ export default defineComponent({
|
|||||||
selectColorList,
|
selectColorList,
|
||||||
driver__,
|
driver__,
|
||||||
t,
|
t,
|
||||||
|
gradient,
|
||||||
|
gradientShow,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch:{
|
watch:{
|
||||||
@@ -168,6 +214,21 @@ export default defineComponent({
|
|||||||
handler(newVal,oldVal){
|
handler(newVal,oldVal){
|
||||||
this.colorList[this.selectIndex] = newVal.rgba
|
this.colorList[this.selectIndex] = newVal.rgba
|
||||||
let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
|
let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
|
||||||
|
if(this.gradient.selectIndex>-1 && this.gradientShow){
|
||||||
|
this.gradient.gradientList[this.gradient.selectIndex].color = `rgb(${newVal.rgba.r},${newVal.rgba.g},${newVal.rgba.b})`
|
||||||
|
this.gradient.gradientList[this.gradient.selectIndex].rgba = {
|
||||||
|
r:newVal.rgba.r,
|
||||||
|
g:newVal.rgba.g,
|
||||||
|
b:newVal.rgba.b,
|
||||||
|
a:1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
|
||||||
|
if(this.gradientShow){
|
||||||
|
// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
|
||||||
|
}else{
|
||||||
|
this.colorList[this.selectIndex].gradient = ''
|
||||||
|
}
|
||||||
this.setColorboardList(colorList)
|
this.setColorboardList(colorList)
|
||||||
// this.clearSelectColor()
|
// this.clearSelectColor()
|
||||||
},
|
},
|
||||||
@@ -195,6 +256,27 @@ export default defineComponent({
|
|||||||
return data
|
return data
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
setGradient(){
|
||||||
|
// return this.setGradientAngle(gradient)
|
||||||
|
return (gradient)=>{
|
||||||
|
console.log(gradient,'222');
|
||||||
|
let gradientStr = ''
|
||||||
|
gradient.gradientList.sort((a, b) => {
|
||||||
|
let aArr = a.left.split('%')[0]
|
||||||
|
let bArr = b.left.split('%')[0]
|
||||||
|
return aArr - bArr;
|
||||||
|
});
|
||||||
|
gradient.gradientList.forEach((item,index)=>{
|
||||||
|
let str = ','
|
||||||
|
if(gradient.gradientList.length == index+1)str = ''
|
||||||
|
gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`
|
||||||
|
|
||||||
|
})
|
||||||
|
console.log(`linear-gradient(${gradient.angle}deg, ${gradientStr})`);
|
||||||
|
return `${gradientStr}`
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
@@ -230,8 +312,30 @@ export default defineComponent({
|
|||||||
const backIcon = document.createElement('div');
|
const backIcon = document.createElement('div');
|
||||||
backIcon.classList.add('vc-sketch-color-wrap')
|
backIcon.classList.add('vc-sketch-color-wrap')
|
||||||
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
|
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
|
||||||
|
let colorDom = document.querySelector('.colorboard_upload_modal .vc-chrome-controls .vc-chrome-active-color')
|
||||||
|
// console.log(colorDom);
|
||||||
dropperDom.appendChild(backIcon);
|
dropperDom.appendChild(backIcon);
|
||||||
backIcon.addEventListener('click',async ()=>{
|
colorDom.addEventListener('click',()=>{
|
||||||
|
// this.colorList[this.selectIndex]
|
||||||
|
console.log(123123123123);
|
||||||
|
this.gradient.selectIndex = 0
|
||||||
|
this.gradientShow = !this.gradientShow
|
||||||
|
if(this.gradientShow){
|
||||||
|
if(this.selectColor.rgba.r){
|
||||||
|
this.gradient.gradientList[this.gradient.selectIndex].rgba = {
|
||||||
|
r:this.selectColor.rgba.r,
|
||||||
|
g:this.selectColor.rgba.g,
|
||||||
|
b:this.selectColor.rgba.b,
|
||||||
|
a:1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
|
||||||
|
}else{
|
||||||
|
this.colorList[this.selectIndex].gradient = ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
backIcon.addEventListener('click', async ()=>{
|
||||||
try {
|
try {
|
||||||
const dropper = new EyeDropper();
|
const dropper = new EyeDropper();
|
||||||
const result = await dropper.open();
|
const result = await dropper.open();
|
||||||
@@ -247,7 +351,7 @@ export default defineComponent({
|
|||||||
} catch (e) {
|
} catch (e) {
|
||||||
message.info(this.t('ColorboardUpload.jsContent1'))
|
message.info(this.t('ColorboardUpload.jsContent1'))
|
||||||
}
|
}
|
||||||
},false)
|
})
|
||||||
// this.clearSelectColor()
|
// this.clearSelectColor()
|
||||||
// if ("EyeDropper" in window) {
|
// if ("EyeDropper" in window) {
|
||||||
// console.log(true);
|
// console.log(true);
|
||||||
@@ -270,6 +374,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
//选择不同的色块
|
//选择不同的色块
|
||||||
selectColorItem(index,color){
|
selectColorItem(index,color){
|
||||||
|
this.gradientShow = false
|
||||||
let hex
|
let hex
|
||||||
if(color?.r){
|
if(color?.r){
|
||||||
hex = this.rgbaToHex([color.r,color.g,color.b,color.a?color.a:1])
|
hex = this.rgbaToHex([color.r,color.g,color.b,color.a?color.a:1])
|
||||||
@@ -514,8 +619,59 @@ export default defineComponent({
|
|||||||
this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色
|
this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色
|
||||||
this.store.commit('setColorboardList',colorList)
|
this.store.commit('setColorboardList',colorList)
|
||||||
},
|
},
|
||||||
|
mousedownGradient(event,item,index){
|
||||||
|
event.stopPropagation();
|
||||||
|
this.gradient.selectIndex = index
|
||||||
|
let gradientRgba = this.gradient.gradientList[index].rgba
|
||||||
|
let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1]
|
||||||
|
let hex = this.rgbaToHex(rgba)
|
||||||
|
this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
|
||||||
|
// isMoible() true为移动端
|
||||||
|
let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
|
||||||
|
let position = {
|
||||||
|
x:event.x,
|
||||||
|
left:event.target.style.left?event.target.style.left.split('%')[0]:0
|
||||||
|
}
|
||||||
|
let mousedownGradient = (e)=>{
|
||||||
|
let left = (e.x - position.x)/gradientWidth*100+Number(position.left)
|
||||||
|
left = (left<0?0:left>100?100:left)
|
||||||
|
// event.target.style.left = (left<0?0:left>100?100:left)+'%'
|
||||||
|
item.left = left+'%'
|
||||||
|
}
|
||||||
|
let mouseupGradient = ()=>{
|
||||||
|
window.removeEventListener('mousemove',mousedownGradient)
|
||||||
|
window.removeEventListener('mouseup',mouseupGradient)
|
||||||
|
}
|
||||||
|
window.addEventListener('mousemove',mousedownGradient)
|
||||||
|
window.addEventListener('mouseup',mouseupGradient)
|
||||||
|
// event.target.addEventListener('touchmove',)
|
||||||
|
},
|
||||||
|
mousedownGradientAngle(event){
|
||||||
|
event.stopPropagation();
|
||||||
|
// isMoible() true为移动端
|
||||||
|
console.log(event.target.getBoundingClientRect());
|
||||||
|
let domPosition = event.target.getBoundingClientRect()
|
||||||
|
console.log(domPosition.x+domPosition.width/2);
|
||||||
|
let position = {
|
||||||
|
x:domPosition.x+domPosition.width/2,
|
||||||
|
y:domPosition.y+domPosition.height/2,
|
||||||
|
}
|
||||||
|
let angle = this.gradient.angle
|
||||||
|
let mousedownGradientAngle = (e)=>{
|
||||||
|
let X = position.x
|
||||||
|
let Y = position.y
|
||||||
|
let x = e.x - X
|
||||||
|
let y = Y - e.y
|
||||||
|
angle = Math.atan2(x,y)*(180 / Math.PI)
|
||||||
|
this.gradient.angle = angle
|
||||||
|
}
|
||||||
|
let mouseupGradientAngle = ()=>{
|
||||||
|
window.removeEventListener('mousemove',mousedownGradientAngle)
|
||||||
|
window.removeEventListener('mouseup',mouseupGradientAngle)
|
||||||
|
}
|
||||||
|
window.addEventListener('mousemove',mousedownGradientAngle)
|
||||||
|
window.addEventListener('mouseup',mouseupGradientAngle)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
@@ -842,31 +998,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sileder_color{
|
|
||||||
margin-top:calc(1.3rem*1.2);
|
|
||||||
|
|
||||||
.vc-slider-swatches{
|
|
||||||
display:none
|
|
||||||
}
|
|
||||||
.vc-slider-hue-warp {
|
|
||||||
width: calc(16.5rem*1.2);
|
|
||||||
height: calc(2.4rem*1.2);
|
|
||||||
border-radius: calc(1.2rem*1.2);
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.vc-hue-picker{
|
|
||||||
width: calc(1.4rem*1.2);
|
|
||||||
height: calc(1.4rem*1.2);
|
|
||||||
border-radius: 50%;
|
|
||||||
transform: translate(calc(-0.7rem*1.2), calc(-0.2rem*1.2));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.vc-hue-pointer{
|
|
||||||
top: calc(0.5rem*1.2) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.color_block{
|
.color_block{
|
||||||
// margin-top: calc(1rem;
|
// margin-top: calc(1rem;
|
||||||
// display: flex;
|
// display: flex;
|
||||||
@@ -880,7 +1012,7 @@ export default defineComponent({
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.color_right{
|
.color_right{
|
||||||
width: calc(11rem*1.2);
|
width: 13rem;
|
||||||
font-size: calc(1.2rem*1.2);
|
font-size: calc(1.2rem*1.2);
|
||||||
color: #666666;
|
color: #666666;
|
||||||
.color_rgb_block{
|
.color_rgb_block{
|
||||||
@@ -900,14 +1032,14 @@ export default defineComponent({
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.color_HEX_block,.color_rgb_block{
|
.color_HEX_block,.color_rgb_block{
|
||||||
padding: calc(.2rem*1.2) calc(.5rem*1.2);
|
padding: .25rem .6rem;
|
||||||
box-shadow: inset 0 0 0 1px #ccc;
|
box-shadow: inset 0 0 0 1px #ccc;
|
||||||
border-radius: calc(.4rem*1.2);
|
border-radius: .5rem;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
text-transform:uppercase;
|
text-transform:uppercase;
|
||||||
.color_block_bg{
|
.color_block_bg{
|
||||||
width: calc(1.5rem*1.2);
|
width: 1.8rem;
|
||||||
height: calc(1.5rem*1.2);
|
height: 2.5rem;
|
||||||
// margin-right: .5rem;
|
// margin-right: .5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -918,6 +1050,83 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.color_setting_operate{
|
||||||
|
*{
|
||||||
|
-webkit-touch-callout: none; /* iOS Safari */
|
||||||
|
-webkit-user-select: none; /* Safari */
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.color_setting_operate_item{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.color_setting_operate_control{
|
||||||
|
.operate_item_angle{
|
||||||
|
.operate_item_angle_box{
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
|
border: solid 2px #39215b;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
>div{
|
||||||
|
height: 100%;
|
||||||
|
width: 1rem;
|
||||||
|
position: relative;
|
||||||
|
pointer-events:none;
|
||||||
|
}
|
||||||
|
>div::before{
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
top: 0.2rem;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #39215b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.color_setting_operate_input{
|
||||||
|
width: 80%;
|
||||||
|
// padding: 0 10%;
|
||||||
|
margin: 1.2rem 10%;
|
||||||
|
border-radius: 10%;
|
||||||
|
position: relative;
|
||||||
|
height: 2.5rem;
|
||||||
|
.color_setting_operate_bg{
|
||||||
|
border-radius: .5rem;
|
||||||
|
width: 100%;
|
||||||
|
height: 2.5rem;
|
||||||
|
background: #fff;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.color_setting_operate_btn{
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
left: 0;
|
||||||
|
width: 1rem;
|
||||||
|
height: 110%;
|
||||||
|
border: .2rem solid;
|
||||||
|
border-radius: .5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: content-box;
|
||||||
|
z-index: 2;
|
||||||
|
&.active{
|
||||||
|
border: .3rem solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.color_setting_operate_btn:hover{
|
||||||
|
border: .3rem solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.get_color_block{
|
.get_color_block{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -44,7 +44,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="input_border" >
|
<div v-else class="input_border" >
|
||||||
<div class="input_box Guide_1_5" :class="[inputShow || inputShowEffectPoor?'active':'',]">
|
<div class="input_box Guide_1_5" :class="[inputShow?'active':'',]">
|
||||||
<input
|
<input
|
||||||
class="search_input"
|
class="search_input"
|
||||||
@input="ifMaximumLength"
|
@input="ifMaximumLength"
|
||||||
@@ -254,7 +254,6 @@ export default defineComponent({
|
|||||||
|
|
||||||
let loadingShow = ref(false)
|
let loadingShow = ref(false)
|
||||||
let inputShow = ref(false)//表示是否出现红框
|
let inputShow = ref(false)//表示是否出现红框
|
||||||
let inputShowEffectPoor = ref(false)//表示是否出现红框
|
|
||||||
let inputTime = ref()
|
let inputTime = ref()
|
||||||
let driver__:any = inject('driver__')
|
let driver__:any = inject('driver__')
|
||||||
let {t} = useI18n()
|
let {t} = useI18n()
|
||||||
@@ -292,7 +291,6 @@ export default defineComponent({
|
|||||||
// sketchCatecoryList,
|
// sketchCatecoryList,
|
||||||
workspace,
|
workspace,
|
||||||
inputShow,
|
inputShow,
|
||||||
inputShowEffectPoor,
|
|
||||||
inputTime,
|
inputTime,
|
||||||
driver__,
|
driver__,
|
||||||
t,
|
t,
|
||||||
@@ -624,9 +622,9 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
if(rv.filter((item:any)=>item.status == 'Invalid').length == 4) {
|
if(rv.length == 4 && rv.filter((item:any)=>item.status == 'Invalid').length == 4) {
|
||||||
(this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor')
|
// (this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor')
|
||||||
this.inputShowEffectPoor = true
|
message.info(this.t('Generate.effectPoor'));
|
||||||
}
|
}
|
||||||
if(arr.length == 0){
|
if(arr.length == 0){
|
||||||
nextTick().then(()=>{
|
nextTick().then(()=>{
|
||||||
@@ -678,7 +676,6 @@ export default defineComponent({
|
|||||||
(this.$refs.inputShowText as any).innerHTML = this.t('Generate.maximumLength')
|
(this.$refs.inputShowText as any).innerHTML = this.t('Generate.maximumLength')
|
||||||
this.inputShow = true
|
this.inputShow = true
|
||||||
}else{
|
}else{
|
||||||
this.inputShowEffectPoor = false
|
|
||||||
this.inputShow = false
|
this.inputShow = false
|
||||||
}
|
}
|
||||||
},500)
|
},500)
|
||||||
|
|||||||
@@ -104,7 +104,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-show="openClick == 3" class="modal_accomplish">
|
<div v-show="openClick == 3" class="modal_accomplish">
|
||||||
<div class="input_border">
|
<div class="input_border">
|
||||||
<div class="Guide_1_2_8 input_box" :class="[inputShow || inputShowEffectPoor?'active':'',driver__.driver?'showEvents':'']">
|
<div class="Guide_1_2_8 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
|
||||||
<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
|
<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
|
||||||
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div>
|
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div>
|
||||||
<span ref="inputShowText"></span>
|
<span ref="inputShowText"></span>
|
||||||
@@ -186,7 +186,6 @@ export default defineComponent({
|
|||||||
])
|
])
|
||||||
let loadingShow = ref(false)
|
let loadingShow = ref(false)
|
||||||
let inputShow = ref(false)
|
let inputShow = ref(false)
|
||||||
let inputShowEffectPoor = ref(false)//表示是否出现红框
|
|
||||||
let inputTime = ref()
|
let inputTime = ref()
|
||||||
let driver__:any = inject('driver__')
|
let driver__:any = inject('driver__')
|
||||||
let {t} = useI18n()
|
let {t} = useI18n()
|
||||||
@@ -213,7 +212,6 @@ export default defineComponent({
|
|||||||
generateList,
|
generateList,
|
||||||
loadingShow,
|
loadingShow,
|
||||||
inputShow,
|
inputShow,
|
||||||
inputShowEffectPoor,
|
|
||||||
inputTime,
|
inputTime,
|
||||||
driver__,
|
driver__,
|
||||||
t,
|
t,
|
||||||
@@ -634,7 +632,6 @@ export default defineComponent({
|
|||||||
(this.$refs.inputShowText as any).innerHTML = this.t('PrintboardUpload.maximumLength')
|
(this.$refs.inputShowText as any).innerHTML = this.t('PrintboardUpload.maximumLength')
|
||||||
this.inputShow = true
|
this.inputShow = true
|
||||||
}else{
|
}else{
|
||||||
this.inputShowEffectPoor = false
|
|
||||||
this.inputShow = false
|
this.inputShow = false
|
||||||
}
|
}
|
||||||
},500)
|
},500)
|
||||||
@@ -662,7 +659,8 @@ export default defineComponent({
|
|||||||
|
|
||||||
let data = {
|
let data = {
|
||||||
generateType:generateType,
|
generateType:generateType,
|
||||||
designType:this.useGenerate.designType,
|
// designType:this.useGenerate.designType,
|
||||||
|
designType:'collection',
|
||||||
collectionElementId:this.useGenerate.imgId,
|
collectionElementId:this.useGenerate.imgId,
|
||||||
// collectionElementId:generage?.collectionElementid,
|
// collectionElementId:generage?.collectionElementid,
|
||||||
level1Type:this.upload.level1Type,
|
level1Type:this.upload.level1Type,
|
||||||
@@ -773,9 +771,10 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
// this.generateList = rv;
|
// this.generateList = rv;
|
||||||
if(rv.filter((item:any)=>item.status == 'Invalid').length == 4) {
|
if(rv.length == 4 && rv.filter((item:any)=>item.status == 'Invalid').length == 4) {
|
||||||
(this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor')
|
message.info(this.t('Generate.effectPoor'));
|
||||||
this.inputShowEffectPoor = true
|
|
||||||
|
// (this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor')
|
||||||
}
|
}
|
||||||
if(arr.length == 0){
|
if(arr.length == 0){
|
||||||
nextTick().then(()=>{
|
nextTick().then(()=>{
|
||||||
|
|||||||
@@ -182,7 +182,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-show="openClick == 3" class="modal_accomplish">
|
<div v-show="openClick == 3" class="modal_accomplish">
|
||||||
<div class="input_border">
|
<div class="input_border">
|
||||||
<div class="Guide_1_9_2 input_box" :class="[inputShow || inputShowEffectPoor?'active':'',driver__.driver?'showEvents':'']">
|
<div class="Guide_1_9_2 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
|
||||||
<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
|
<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
|
||||||
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div>
|
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div>
|
||||||
<span ref="inputShowText"></span>
|
<span ref="inputShowText"></span>
|
||||||
@@ -305,7 +305,6 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
let workspace:any = ref({})
|
let workspace:any = ref({})
|
||||||
let inputShow = ref(false)
|
let inputShow = ref(false)
|
||||||
let inputShowEffectPoor = ref(false)//表示是否出现红框
|
|
||||||
let inputTime = ref()
|
let inputTime = ref()
|
||||||
let sketchboardList:any = computed(()=>{
|
let sketchboardList:any = computed(()=>{
|
||||||
return store.state.UploadFilesModule.sketchboard
|
return store.state.UploadFilesModule.sketchboard
|
||||||
@@ -335,7 +334,6 @@ export default defineComponent({
|
|||||||
sketchCatecoryList,
|
sketchCatecoryList,
|
||||||
workspace,
|
workspace,
|
||||||
inputShow,
|
inputShow,
|
||||||
inputShowEffectPoor,
|
|
||||||
inputTime,
|
inputTime,
|
||||||
sketchboardList,
|
sketchboardList,
|
||||||
t,
|
t,
|
||||||
@@ -646,7 +644,6 @@ export default defineComponent({
|
|||||||
(this.$refs.inputShowText as any).innerHTML = this.t('SketchboardUpload.maximumLength')
|
(this.$refs.inputShowText as any).innerHTML = this.t('SketchboardUpload.maximumLength')
|
||||||
this.inputShow = true
|
this.inputShow = true
|
||||||
}else{
|
}else{
|
||||||
this.inputShowEffectPoor = false
|
|
||||||
this.inputShow = false
|
this.inputShow = false
|
||||||
}
|
}
|
||||||
},500)
|
},500)
|
||||||
@@ -770,7 +767,8 @@ export default defineComponent({
|
|||||||
let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
|
let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
|
||||||
let data = {
|
let data = {
|
||||||
generateType:generateType,
|
generateType:generateType,
|
||||||
designType:this.useGenerate.designType,
|
// designType:this.useGenerate.designType,
|
||||||
|
designType:'collection',
|
||||||
collectionElementId:this.useGenerate.imgId,
|
collectionElementId:this.useGenerate.imgId,
|
||||||
level1Type:this.upload.level1Type,
|
level1Type:this.upload.level1Type,
|
||||||
level2Type:this.useGenerate.level2Type,
|
level2Type:this.useGenerate.level2Type,
|
||||||
@@ -882,15 +880,21 @@ export default defineComponent({
|
|||||||
this.generateList[index] = element
|
this.generateList[index] = element
|
||||||
element.imgUrl = element.url
|
element.imgUrl = element.url
|
||||||
element.id_ = GO.id++
|
element.id_ = GO.id++
|
||||||
element.category = generage.level2Type?generage.level2Type:sketchCatecoryList[0].name
|
if(element.category){
|
||||||
element.categoryValue = categoryValue?categoryValue:sketchCatecoryList[0].value
|
this.sketchCatecoryList.forEach((itemCategory:any) => {
|
||||||
|
if(itemCategory.name == element.category){
|
||||||
|
element.categoryValue = itemCategory?.value
|
||||||
|
element.category = itemCategory?.name
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
// this.generateList = rv;
|
// this.generateList = rv;
|
||||||
if(rv.filter((item:any)=>item.status == 'Invalid').length == 4) {
|
if(rv.length == 4 && rv.filter((item:any)=>item.status == 'Invalid').length == 4) {
|
||||||
(this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor')
|
message.info(this.t('Generate.effectPoor'));
|
||||||
this.inputShowEffectPoor = true
|
// (this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor')
|
||||||
}
|
}
|
||||||
if(arr.length == 0){
|
if(arr.length == 0){
|
||||||
nextTick().then(()=>{
|
nextTick().then(()=>{
|
||||||
|
|||||||
@@ -341,7 +341,7 @@ export default {
|
|||||||
currently:'您排在队列中的第{generateLineUp}位',
|
currently:'您排在队列中的第{generateLineUp}位',
|
||||||
Merge:'合成',
|
Merge:'合成',
|
||||||
maximumLength:'输入的内容超过允许输入的最大长度',
|
maximumLength:'输入的内容超过允许输入的最大长度',
|
||||||
effectPoor:'当前输入的内容生成出的效果不佳,请调整输入的内容。',
|
effectPoor:'当前生成的图像质量低于标准。请考虑调整您的提示词并再次尝试。',
|
||||||
Model:'模型',
|
Model:'模型',
|
||||||
jsContent1:"您只能上传图片文件!",
|
jsContent1:"您只能上传图片文件!",
|
||||||
jsContent2:'图片必须小于2MB',
|
jsContent2:'图片必须小于2MB',
|
||||||
|
|||||||
@@ -342,7 +342,7 @@ export default {
|
|||||||
currently:'You are currently in the {generateLineUp} th position in the queue',
|
currently:'You are currently in the {generateLineUp} th position in the queue',
|
||||||
Merge:'Merge',
|
Merge:'Merge',
|
||||||
maximumLength:'The entered content exceeds the maximum length.',
|
maximumLength:'The entered content exceeds the maximum length.',
|
||||||
effectPoor:'The image generated by the current input content effect is poor, please adjust the input content.',
|
effectPoor:'The quality of the generated images currently falls below standard. Please consider adjusting your prompt and trying again.',
|
||||||
Model:'Model',
|
Model:'Model',
|
||||||
jsContent1:"You can only upload Image file!",
|
jsContent1:"You can only upload Image file!",
|
||||||
jsContent2:'Image must smaller than 2MB!',
|
jsContent2:'Image must smaller than 2MB!',
|
||||||
|
|||||||
@@ -204,7 +204,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="input_border">
|
<div class="input_border">
|
||||||
<div class="input_box" :class="{active:inputShow || inputShowEffectPoor}">
|
<div class="input_box" :class="{active:inputShow}">
|
||||||
<input
|
<input
|
||||||
class="search_input "
|
class="search_input "
|
||||||
@input="ifMaximumLength"
|
@input="ifMaximumLength"
|
||||||
@@ -408,7 +408,6 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
let inputShow = ref(false)
|
let inputShow = ref(false)
|
||||||
let inputShowEffectPoor = ref(false)//表示是否出现红框
|
|
||||||
let generateCheckbox:any = ref()
|
let generateCheckbox:any = ref()
|
||||||
let captionGeneration:any = ref()
|
let captionGeneration:any = ref()
|
||||||
let inputTime = ref()
|
let inputTime = ref()
|
||||||
@@ -472,7 +471,6 @@ export default defineComponent({
|
|||||||
uploadGenerate,
|
uploadGenerate,
|
||||||
checkbox,
|
checkbox,
|
||||||
inputShow,
|
inputShow,
|
||||||
inputShowEffectPoor,
|
|
||||||
generateCheckbox,
|
generateCheckbox,
|
||||||
captionGeneration,
|
captionGeneration,
|
||||||
inputTime,
|
inputTime,
|
||||||
@@ -626,7 +624,6 @@ export default defineComponent({
|
|||||||
this.captionGeneration = ''
|
this.captionGeneration = ''
|
||||||
this.selectGenerateList = []
|
this.selectGenerateList = []
|
||||||
this.generateList = []
|
this.generateList = []
|
||||||
this.inputShowEffectPoor = false
|
|
||||||
this.inputShow = false
|
this.inputShow = false
|
||||||
}
|
}
|
||||||
this.upload.level1Type = menu.code
|
this.upload.level1Type = menu.code
|
||||||
@@ -972,7 +969,6 @@ export default defineComponent({
|
|||||||
(this.$refs.inputShowText as any).innerHTML = this.t('LibraryPage.maximumLength')
|
(this.$refs.inputShowText as any).innerHTML = this.t('LibraryPage.maximumLength')
|
||||||
this.inputShow = true
|
this.inputShow = true
|
||||||
}else{
|
}else{
|
||||||
this.inputShowEffectPoor = false
|
|
||||||
this.inputShow = false
|
this.inputShow = false
|
||||||
}
|
}
|
||||||
},500)
|
},500)
|
||||||
@@ -1064,7 +1060,7 @@ export default defineComponent({
|
|||||||
let generageImg = this.selectGenerateList.filter((v:any)=>v.checked)[0]
|
let generageImg = this.selectGenerateList.filter((v:any)=>v.checked)[0]
|
||||||
let data = {
|
let data = {
|
||||||
generateType:generateType,
|
generateType:generateType,
|
||||||
designType:'',
|
designType:'collection',
|
||||||
collectionElementId:generageImg?.id,
|
collectionElementId:generageImg?.id,
|
||||||
level1Type:this.selectCode,
|
level1Type:this.selectCode,
|
||||||
level2Type:this.selectCode == 'Sketchboard'?this.designType.value:'',
|
level2Type:this.selectCode == 'Sketchboard'?this.designType.value:'',
|
||||||
@@ -1184,9 +1180,9 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
if(rv.filter((item:any)=>item.status == 'Invalid').length == 4) {
|
if(rv.length == 4 && rv.filter((item:any)=>item.status == 'Invalid').length == 4) {
|
||||||
(this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor')
|
// (this.$refs.inputShowText as any).innerHTML = this.t('Generate.effectPoor')
|
||||||
this.inputShowEffectPoor = true
|
message.info(this.t('Generate.effectPoor'));
|
||||||
}
|
}
|
||||||
if(arr.length == 0){
|
if(arr.length == 0){
|
||||||
this.generateList = this.generateList.filter((item:any)=>item.status == 'Success')
|
this.generateList = this.generateList.filter((item:any)=>item.status == 'Success')
|
||||||
|
|||||||
Reference in New Issue
Block a user