Skip to content

E
exhibition_backstage
提交 d0654800 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

完善在线抠图界面

上级 b02c6675
隐藏空白字符变更
内嵌 并排
正在显示 包含 259 行增加 和 8 行删除
src/assets/styles/index.scss
浏览文件 @ d0654800
......@@ -63,4 +63,9 @@ $defaultFontFamily: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
min-width: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
// 描述列表项垂直居中
.el-descriptions-item__container {
align-items: center;
}
\ No newline at end of file
src/components/CulturalRelicInfo/index.vue
浏览文件 @ d0654800
......@@ -152,9 +152,6 @@ export default {
::v-deep .el-descriptions-item__content {
flex: 1;
}
::v-deep .el-descriptions-item__container {
align-items: center;
}
.image {
margin-right: 20px;
......
src/utils/appCommon.js 0 → 100644
浏览文件 @ d0654800
// 此文件是一些应用层面的公共方法
const appCommon = {
// 打开弹窗
openDialog($el, refName) {
$el.$refs[refName].visible = true
},
// 打开弹窗
closeDialog($el, refName) {
$el.$refs[refName].visible = true
},
}
export default appCommon
\ No newline at end of file
src/utils/bizUploadFunctions.js
浏览文件 @ d0654800
......@@ -14,6 +14,7 @@ const fileUploadFuctions = {
isFileRaw = file.status && file.status == "ready";
return isFileRaw;
},
/**
* 判断formData中是否有数据
* @param {FormData} formData 文件对象，可能是File可能就是普通对象
......@@ -27,6 +28,7 @@ const fileUploadFuctions = {
}));
return formDataArr.length > 0;
},
/**
* 获取对应媒体下的文件
* @param {string} mediaKey 媒体key
......
src/utils/globalFunctions.js
浏览文件 @ d0654800
......@@ -7,9 +7,11 @@ import { file } from '@/utils/file'
import * as echarts from 'echarts';
import constantsTool from '@/contants/index'
import bizCommon from '@/utils/bizCommon'
import appCommon from '@/utils/appCommon'
Vue.prototype.$getFullUrl = getFullUrl //获取文件的完整链接
Vue.prototype.$echarts = echarts //Echarts
Vue.prototype.$file = file //文件操作
Vue.prototype.$constantsTool = constantsTool //前端定义的常量操作
Vue.prototype.$bizCommon = bizCommon //前端定义的常量操作
\ No newline at end of file
Vue.prototype.$bizCommon = bizCommon //业务层面的公共方法
Vue.prototype.$appCommon = appCommon //应用层面的公共方法
\ No newline at end of file
src/views/matting/components/PreviewDialog.vue
浏览文件 @ d0654800
......@@ -10,11 +10,85 @@
<div class="divider"></div>
<div class="label">抠图详情</div>
</div>
<div class="dialog-content"></div>
<div class="dialog-content">
<el-descriptions title="详细信息">
<el-descriptions-item
:label="item.label"
v-for="(item, index) in tableTitle"
:key="index"
>
<span v-if="item.prop == 'status'">
<el-tag
size="mini"
:type="
$constantsTool.getTagTypeByValue('mattingStatus', info.status)
"
>
{{ $constantsTool.getLabelByValue("mattingStatus", info.status) }}
</el-tag>
</span>
<span v-else>{{ info[item.prop] }}</span>
</el-descriptions-item>
</el-descriptions>
<div class="imgs">
<div class="single" v-if="info.type == '单个'">
<el-image
:src="info.src"
fit="contain"
style="height: 300px"
></el-image>
</div>
<div class="multi" v-else>
<div class="title">
<h3>图片列表</h3>
<div class="right">
<el-button
type="text"
style="margin-right: 10px"
@click="toggleShowCheckbox"
>批量选择</el-button
>
<el-checkbox label="全选" v-if="isShowCheckbox"></el-checkbox>
</div>
</div>
<el-row class="container">
<el-col
:span="4"
v-for="(item, index) in info.imagesVo"
:key="index"
class="multi-item"
>
<div
class="modal"
v-if="isShowCheckbox"
@click="toggleItemCheckbox(item)"
>
<el-checkbox
class="checkbox"
v-if="isShowCheckbox"
v-model="item.checked"
></el-checkbox>
{{ item.checked }}
</div>
<el-image
:src="item.src"
fit="contain"
style="height: 100px"
></el-image>
<div class="name">{{ item.name }}</div>
</el-col>
</el-row>
</div>
</div>
<div class="button">
<el-button plain type="primary" icon="el-icon-download">下载</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import { tableTitle } from "../configs/list";
export default {
name: "PreviewDialog",
components: {},
......@@ -24,16 +98,47 @@ export default {
default: () => ({}),
},
},
computed: {},
computed: {
info() {
if (!(this.detail && this.detail.imagesVo)) {
return;
}
const imagesVo = this.detail.imagesVo.map((item) => {
const newObj = {
...item,
checked: false,
};
return newObj;
});
const newInfo = {
...this.detail,
imagesVo,
};
console.log(123, newInfo);
return newInfo;
},
},
data() {
return {
visible: false,
tableTitle,
isShowCheckbox: false, //是否展示全选按钮
};
},
methods: {
handleClose(done) {
this.visible = false;
},
// 切换展示复选框
toggleShowCheckbox() {
this.isShowCheckbox = !this.isShowCheckbox;
},
toggleItemCheckbox(item) {
const { checked } = item;
item.checked = !checked;
console.log(item);
// this.$set(item, "checked", !checked);
},
},
};
</script>
......@@ -43,4 +148,46 @@ export default {
max-height: 64vh;
overflow: auto;
}
.button {
width: 100%;
display: flex;
justify-content: center;
.el-button {
width: 80%;
}
}
.single {
display: flex;
justify-content: center;
}
.multi {
.title {
display: flex;
justify-content: space-between;
align-items: center;
}
.multi-item {
margin-bottom: 16px;
position: relative;
.modal {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: rgba($color: #fff, $alpha: 0.5);
width: 100%;
height: 100%;
z-index: 9;
}
.name {
display: flex;
justify-content: center;
}
}
.container {
padding: 20px 0;
height: 320px;
overflow: auto;
}
}
</style>
src/views/matting/index.vue
浏览文件 @ d0654800
......@@ -157,8 +157,8 @@ export default {
async handleOperation(value, row) {
switch (value.type) {
case "view":
console.log("view");
this.currentPreviewItem = row;
this.$appCommon.openDialog(this, "PreviewDialog");
break;
case "download":
console.log("download");
......
src/views/matting/mock.js
浏览文件 @ d0654800
// status 0-待处理 1-已处理 2-处理失败
const src = "http://222.85.214.245:9603/files/2023-10-24-2dddc558-d490-4250-a3e8-6aded873aa06/low/DSC_4481.png"
export const records = [
{
title: "图片抠图",
......@@ -7,6 +9,8 @@ export const records = [
status: 0,
createTime: "2023-10-23 14:13:00",
createName: "admin",
src,
type: '单个'
},
{
title: "批量图片抠图",
......@@ -15,6 +19,45 @@ export const records = [
status: 1,
createTime: "2023-10-23 14:14:00",
createName: "admin",
type: '批量',
imagesVo: [
{
name: '测试图片1',
src
},
{
name: '测试图片2',
src
},
{
name: '测试图片3',
src
},
{
name: '测试图片1',
src
},
{
name: '测试图片2',
src
},
{
name: '测试图片3',
src
},
{
name: '测试图片1',
src
},
{
name: '测试图片2',
src
},
{
name: '测试图片3',
src
},
]
},
{
title: "批量图片抠图2",
......@@ -23,5 +66,44 @@ export const records = [
status: -1,
createTime: "2023-10-23 13:14:00",
createName: "admin",
type: '批量',
imagesVo: [
{
name: '测试图片1',
src
},
{
name: '测试图片2',
src
},
{
name: '测试图片3',
src
},
{
name: '测试图片1',
src
},
{
name: '测试图片2',
src
},
{
name: '测试图片3',
src
},
{
name: '测试图片1',
src
},
{
name: '测试图片2',
src
},
{
name: '测试图片3',
src
},
]
},
]
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论