This commit is contained in:
X1627315083
2025-04-16 15:08:59 +08:00
parent c2288a30b2
commit d59d942c8f
5 changed files with 248 additions and 34 deletions

View File

@@ -62,7 +62,7 @@ export default defineComponent({
const store = useStore();
const detailData = reactive({
isShowLoading:false,//懒加载,加载中
uploadList:[],
uploadList:[] as any,
upload:props.segmentation?
props.segmentation:{
isPin: 0,
@@ -90,7 +90,7 @@ export default defineComponent({
input.type = 'file';
input.accept = 'image/*'; // 只允许选择图片文件
input.multiple = true; // 允许多选
input.addEventListener('change', (event) => {
input.addEventListener('change', (event:any) => {
detailData.isShowMark = true; // 显示加载状态
const files = event?.target?.files;
if (!files || files.length === 0) {
@@ -100,8 +100,9 @@ export default defineComponent({
let file = [...Array.from(files)];
let param = new FormData();
param.append('id', '');
param.append('type', props.segmentationType);
file.forEach(image => {
let segmentationType:any = props.segmentationType
param.append('type', segmentationType);
file.forEach((image:any) => {
param.append('file', image);
});

View File

@@ -1,41 +1,207 @@
<template>
<div class="createCloud">
<div class="createCloud" ref="createCloud"></div>
<a-modal
class="createCloud_modal generalModel"
v-model:visible="operationsModal"
:footer="null"
:get-container="() => $refs.createCloud"
width="50%"
:height="'77rem'"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="true"
wrapClassName="#app"
:keyboard="false"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="modal_title_text">
<div>Cloud generation task</div>
</div>
{{ cloudList }}
<div class="allUserPoeration_center admin_page">
<div class="admin_state_item">
<span>Build type <span>*</span></span>
<a-select
v-model:value="buildType"
show-search
allowClear
style="width: 220px"
placeholder="Please select"
:options="cloudList"
></a-select>
</div>
<div class="admin_state_item" >
<span>Image upload</span>
<input
v-model="percentOff"
placeholder="Please enter percentOff"
type="text"
style="width: 220px"
/>
</div>
<div class="admin_state_item" >
<span>Number of images</span>
<input
v-model="numberOfImages"
placeholder="Please enter number"
type="text"
style="width: 220px"
/>
</div>
<div class="admin_state_item" style="width: 100%;">
<span style="margin: 0;">Generation time19min</span>
</div>
<div class="admin_state_item" style="width: 100%;">
<span style="margin: 0;">Cost credit500</span>
</div>
</div>
<div class="allUserPoeration_btn admin_page">
<div class="admin_search_item" @click="cancelDsign">
Close
</div>
<div class="admin_search_item" @click="setOk">
OK
</div>
</div>
</a-modal>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { formatTime,isEmail } from "@/tool/util";
import dayjs, { Dayjs } from 'dayjs';
const md5 = require("md5");
export default defineComponent({
components:{
},
components: {
},
props:{
cloudList:{
type:Array,
default:[]
}
},
emits:[],
setup(props,{emit}) {
const store = useStore();
const data = reactive({
emits: ['searchHistoryList'],
setup(props,{emit}) {
let operations = reactive({
operationsModal:false,
loadingShow:false,
})
const dataDom = reactive({
let operationsData = reactive({
buildType:'',
commissionRate:'',
numberOfImages:'',
})
return{
...toRefs(dataDom),
...toRefs(data),
let init = ()=>{
operations.operationsModal = true
}
},
provide() {
return {
let setAddData = ()=>{
return {
"percentOff": operationsData.percentOff,
"commissionRate": operationsData.commissionRate,
}
}
},
})
let cancelDsign = ()=>{
operationsData.percentOff=''
operationsData.commissionRate=''
operations.operationsModal = false
}
let setOk = ()=>{
let data
data = setAddData()
Https.axiosPost(Https.httpUrls.createCoupon, data).then(
(rv) => {
if (rv) {
cancelDsign()
emit('searchHistoryList')
}
})
}
return {
...toRefs(operations),
...toRefs(operationsData),
cancelDsign,
init,
focus,
blur,
setOk,
};
},
data() {
return {
};
},
mounted() {},
methods: {
},
});
</script>
<style lang="less" scoped>
.createCloud{
width: 100%;
height: 100%;
position: relative;
:deep(.createCloud_modal){
.ant-modal-body{
display: flex;
flex-direction: column;
}
}
</style>
<style lang="less" scoped>
.createCloud_modal {
.closeIcon {
z-index: 2;
}
.allUserPoeration_btn{
display: flex;
flex-direction: row;
height: auto;
justify-content: flex-end;
padding: 1rem 0;
.admin_search_item{
margin-bottom: 0;
}
}
.allUserPoeration_center{
flex: 1;
overflow-y: auto;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
> .admin_state_item{
width: auto;
// width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
> span{
text-align: left;
margin: 0;
margin-bottom: 1.5rem;
font-weight: 600;
}
:deep(> .ant-select > .ant-select-selector){
border-radius: 1.6rem;
}
> input{
border-radius: 1.6rem;
}
}
}
}
</style>

View File

@@ -18,9 +18,21 @@
{{ item.name }}
</div>
</div>
<div class="content"></div>
<div class="content">
<tr v-for="(row, index) in contentList" :key="index">
<td v-for="header in cloudTiltleList" :key="header.value">
<span v-show="header.value != 'operation'">
{{ row[header.value] }}
</span>
<span v-show="header.value == 'operation'" @click="downloadIamge(row)" style="cursor: pointer;">
download
</span>
</td>
</tr>
</div>
</div>
<!-- <createCloud ref="createCloud"></createCloud> -->
{{ generateList }}
<createCloud ref="createCloud" :cloudList="generateList[workflowType]"></createCloud>
</div>
</template>
<script lang="ts">
@@ -92,19 +104,31 @@ export default defineComponent({
},{
name:'Task time',
value:'taskTime',
},{
name:'Operation',
value:'operation',
},
],
] as any,
contentList:[
{ name: '张三', size: 28, upLoadedBy: '1', taskTime: '123' },
{ name: '李四', size: 32, upLoadedBy: '2', taskTime: '321' },
{ name: '王五', size: 25, upLoadedBy: '3', taskTime: '222' }
] as any,
})
const dataDom = reactive({
createCloud,
})
const createClound = ()=>{
dataDom.createCloud.init()
}
const downloadIamge = (item:any)=>{
}
return{
...toRefs(dataDom),
...toRefs(data),
createClound,
downloadIamge,
}
},
provide() {
@@ -163,8 +187,28 @@ export default defineComponent({
flex: 1;
overflow: hidden;
padding-top: 2.5rem;
> .content tr , > .title{
display: flex;
justify-content: space-between;
padding: 0 1.2rem;
}
> .title{
background: #F7F7F7;
> .titleItem{
line-height: 4.6rem;
font-size: 2rem;
color: #666666;
width: calc(100% / 4);
text-align: center;
}
}
.content > tr{
> td{
text-align: center;
width: calc(100% / 4);
line-height: 4.6rem;
font-size: 2.2rem;
}
}
}
}

View File

@@ -21,7 +21,7 @@
<i :class="item.icon"></i>
<span v-show="isUnfold">{{ item.name }}</span>
</div>
<div class="navList list exist" @click="setNav('yun', $event)">
<div class="navList list exist" style="margin-top: auto;" @click="setNav('yun', $event)">
<i class="fi fi-rr-cloud-upload-alt"></i>
<span v-show="isUnfold">云生成</span>
</div>
@@ -109,6 +109,8 @@ export default defineComponent({
transition: all .3s;
width: 7rem;
overflow: hidden;
display: flex;
flex-direction: column;
&.active{
width: 25rem;
}