Skip to content

E
electron-printer
Commit 3409f5ee by zhuzhequan
Options

处理胡总提出的问题

parent be4f635b
Showing with 277 additions and 265 deletions
config/env.json
{
"apiApiHost":"https://factory.jomalls.com/api",
"fileApiUrl":"https://factory.jomalls.com/upload/factory",
"visionUrl":"https://console.jomalls.com"
"apiApiHost":"https://factory.jomalls.com/api",
"fileApiUrl":"https://factory.jomalls.com/upload/factory",
"visionUrl":"https://console.jomalls.com"
}
src/components/PicScrollbarBox.vue
......@@ -13,7 +13,7 @@
>裁切</el-button
> -->
</div>
<el-scrollbar class="scrollbarBox">
<div class="scrollbarBox">
<slot v-if="$slots.mainContent" name="mainContent"></slot>
<!-- <el-checkbox-group
v-if="imglist.length"
......@@ -35,7 +35,7 @@
</el-checkbox></el-checkbox-group
> -->
<el-empty v-else :description="emptyTitle"></el-empty>
</el-scrollbar>
</div>
</div>
</template>
<script>
......@@ -63,6 +63,12 @@ export default {
};
</script>
<style lang="less" scoped>
.scrollbarBox{
overflow-x: auto;
overflow-y: hidden;
width: 100%;
white-space: nowrap;
}
.title {
padding: 10px;
font-size: 20px;
......@@ -70,9 +76,13 @@ export default {
}
.el-scrollbar {
overflow-y: hidden;
:v-deep.el-scrollbar__wrap {
margin-bottom: 0 !important;
}
//::v-deep .el-scrollbar__wrap {
// margin-bottom: 0 !important;
//}
//::v-deep .el-scrollbar__view {
// display: flex;
// flex-wrap: nowrap;
//}
}
::v-deep.el-empty {
padding-top: 0;
......
src/views/design/head/index.vue
......@@ -17,10 +17,10 @@ export default {
user: {
default: {
avatar: "",
factory: {},
factory: {}
},
type: Object,
},
type: Object
}
},
data() {
return {
......@@ -30,20 +30,20 @@ export default {
cacheList: [
{
label: "清除当前登录信息",
value: "token",
value: "token"
},
{
label: "登录记录",
value: "userList",
value: "userList"
},
{
label: "打印预设",
value: "print-setting",
value: "print-setting"
},
{
label: "系统设置",
value: "setting",
},
value: "setting"
}
],
selectGridIndex: 0,
pkg,
......@@ -58,7 +58,7 @@ export default {
unit: "mm",
language: "cn",
autoPrint: false,
gridSpacing: 10,
gridSpacing: 10
},
imgList: [],
detail: null,
......@@ -77,15 +77,15 @@ export default {
"hsva(120, 40, 94, 0.5)",
"hsl(181, 100%, 37%)",
"hsla(209, 100%, 56%, 0.73)",
"#c7158577",
"#c7158577"
],
grid,
grid
};
},
computed: {
actionList() {
return this.$store.getters.getActionList;
},
}
},
mounted() {
// console.log(pkg, "pkg");
......@@ -106,12 +106,12 @@ export default {
this.$dataStore.set("setting", this.setting);
bus.$emit("busEmit", { type: "updateSystemSetting" });
},
deep: true,
},
deep: true
}
},
methods: {
checkUpdate() {
this.$refs.updateDialog.checkUpdate().then((data) => {
this.$refs.updateDialog.checkUpdate().then(data => {
if (data) {
// 有新版本更新
this.$refs.updateDialog.open(data);
......@@ -126,7 +126,7 @@ export default {
this.$confirm("是否退出登录?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
type: "warning"
})
.then(() => {
this.$dataStore.delete("user");
......@@ -153,7 +153,7 @@ export default {
this.$confirm(`确定生产完成？`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
type: "warning"
}).then(async () => {
await this.setData(this.detail);
});
......@@ -165,15 +165,15 @@ export default {
this.$confirm("是否确定清除?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
type: "warning"
})
.then(() => {
for (let k of this.checkList) {
if (k === "print-setting" || k === "deviceId") {
let list = Object.keys(this.$dataStore.store).filter((el) =>
let list = Object.keys(this.$dataStore.store).filter(el =>
el.includes(k)
);
list.forEach((el) => {
list.forEach(el => {
this.$dataStore.delete(el);
});
} else if (k === "token") {
......@@ -194,9 +194,9 @@ export default {
try {
axios
.get(item?.src, {
responseType: "blob",
responseType: "blob"
})
.then((res) => {
.then(res => {
var url = URL.createObjectURL(res.data);
let img = new Image();
img.crossorigin = "";
......@@ -215,7 +215,7 @@ export default {
resolve();
};
})
.catch((e) => {
.catch(e => {
console.log(e);
reject(e);
});
......@@ -235,7 +235,7 @@ export default {
canvas.width = canvasItem.canvasWidth;
canvas.height = canvasItem.canvasHeight;
let objects = canvasItem.options.objects.filter(
(el) => el.type === "image"
el => el.type === "image"
);
let list = [];
for (let i in objects) {
......@@ -269,7 +269,7 @@ export default {
return this.$message.warning("请扫描生产单号");
let params = {
productionNo: this.detail.factorySubOrderNumber,
imgList: this.imgList,
imgList: this.imgList
};
let res = await this.$api.post("/downloadByDesignId", params);
......@@ -291,12 +291,12 @@ export default {
const findByPodProductionNo = await this.$api.post(
"/findByPodProductionNo",
{
thirdSubOrderNumber: this.productionNo,
thirdSubOrderNumber: this.productionNo
}
);
this.detail = findByPodProductionNo.data;
let imageResList = [];
let designImagesCanvasJsonList = this.detail.drParam;
let designImagesCanvasJsonList = this.detail.drParam;
if (designImagesCanvasJsonList) {
designImagesCanvasJsonList = JSON.parse(designImagesCanvasJsonList);
let imageList = await this.canvasToImage(designImagesCanvasJsonList);
......@@ -312,27 +312,29 @@ export default {
});
imageResList = Sres.data;
this.imgList = [];
if (this.checked) {
imageResList = await this.cutImgFn(imageResList);
imageResList.forEach(el=>{
el.isCut = true
})
}
}
this.$store.commit("setProductDetail", findByPodProductionNo.data);
ipcRenderer.send("win-subScreen", findByPodProductionNo.data);
if (imageResList && imageResList.length) {
if (this.checked) {
this.$message.warning({
message: "该生产单为直接打印单不可裁切，已取消自动裁切选项",
duration: 3000, // 设置显示时间为 5000 毫秒（5 秒）
});
this.checked = false;
}
let obj = {
type: "sendFile",
value: imageResList,
value: imageResList
};
if (this.detail.mssWidth && this.detail.mssHeight) {
if (
this.detail.mssWidth &&
this.detail.adjustable &&
this.detail.mssHeight
) {
obj.size = {
width: this.detail.mssWidth,
height: this.detail.mssHeight,
height: this.detail.mssHeight
};
}
bus.$emit("busEmit", obj);
......@@ -340,26 +342,29 @@ export default {
// 根据生产单号查找 素材图片 下载到本地 然后返回本地地址去显示
let res = await this.$api.post("/downloadBySubOrderNumber", [
this.detail.id,
this.$store.state.desktopDevice,
this.$store.state.desktopDevice
]);
if (res.data.length === 0)
return this.$message.warning("未找到素材图！");
this.imgList = [];
res.data.forEach((el) => {
res.data.forEach(el => {
this.imgList = this.imgList.concat(el.list || []);
});
let arr = [];
res.data.forEach((el) => {
res.data.forEach(el => {
if (el.list) {
el.list.forEach((it) => {
el.list.forEach(it => {
arr.push(it);
});
}
});
res.data = arr.filter((el) => el.type !== 1);
res.data = arr.filter(el => el.type !== 1);
let newImgList;
if (this.checked) {
newImgList = await this.cutImgFn(res.data);
newImgList.forEach(el=>{
el.isCut = true
})
} else {
newImgList = res.data;
}
......@@ -381,12 +386,16 @@ export default {
console.log(260, res.data);
let obj = {
type: "sendFile",
value: newImgList,
value: newImgList
};
if (this.detail.mssWidth && this.detail.mssHeight) {
if (
this.detail.mssWidth &&
this.detail.adjustable &&
this.detail.mssHeight
) {
obj.size = {
width: this.detail.mssWidth,
height: this.detail.mssHeight,
height: this.detail.mssHeight
};
}
bus.$emit("busEmit", obj);
......@@ -408,7 +417,7 @@ export default {
const command = `start explorer /select, "${path}"`;
// 检查路径是否存在
if (fs.existsSync(path)) {
exec(`cmd /c "${command}"`, (err) => {
exec(`cmd /c "${command}"`, err => {
if (err) console.error("激活窗口失败:", err);
});
} else {
......@@ -436,7 +445,7 @@ export default {
unit: "mm",
language: "cn",
autoPrint: false,
gridSpacing: 10,
gridSpacing: 10
};
this.$message.success("重置应用程序设置成功");
},
......@@ -457,8 +466,8 @@ export default {
formData.append("file", f);
let { data } = await this.$api.post("/uploadImage", formData, {
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
"Content-Type": "application/x-www-form-urlencoded"
}
});
bus.$emit("busEmit", { type: "uploadImage", value: data });
return false;
......@@ -468,7 +477,7 @@ export default {
this.setting.gridValue = i;
this.$store.commit("updateSystemSetting", {
field: "gridValue",
value: this.grid[i],
value: this.grid[i]
});
bus.$emit("busEmit", { type: "grid", value: this.grid[i] });
},
......@@ -484,21 +493,21 @@ export default {
if (!arr.length) return;
try {
const processQueue = await Promise.all(
arr.map(async (el) => {
arr.map(async el => {
try {
const outputDir = path.dirname(el.productionFile);
const outputFileName = `${uuid.v4()}.png`;
const outputPath = path.join(outputDir, outputFileName);
const params = {
inputPath: el.productionFile,
outputPath: outputPath,
outputPath: outputPath
};
const res = await this.$api.post("/processImage", params);
fs.unlinkSync(el.productionFile);
return {
fileName: outputFileName,
productionFile: res.msg[0]?.outputPath,
designId: el.designId,
designId: el.designId
};
} catch (error) {
console.error(`处理失败: ${el.productionFile}`, error);
......@@ -507,9 +516,9 @@ export default {
);
// 等待所有异步操作完成
await new Promise((resolve) => setTimeout(resolve, 100));
const newMap = new Map(processQueue.map((el) => [el.designId, el]));
processQueue.forEach((el) => {
await new Promise(resolve => setTimeout(resolve, 100));
const newMap = new Map(processQueue.map(el => [el.designId, el]));
processQueue.forEach(el => {
if (newMap.has(el.designId)) {
el.fileName = newMap.get(el.designId).fileName;
el.productionFile = newMap.get(el.designId).productionFile;
......@@ -521,8 +530,8 @@ export default {
console.error("错误", error);
return [];
}
},
},
}
}
};
</script>
<style scoped>
......@@ -640,7 +649,7 @@ export default {
>
<el-form-item prop="setting" label="网格显示">
<el-select
@change="(e) => settingChange('gridShow', e)"
@change="e => settingChange('gridShow', e)"
clearable
v-model="setting.gridShow"
>
......@@ -650,7 +659,7 @@ export default {
</el-form-item>
<el-form-item prop="gridSpacing" label="单位">
<el-select
@change="(e) => settingChange('unit', e)"
@change="e => settingChange('unit', e)"
clearable
v-model="setting.unit"
>
......@@ -660,7 +669,7 @@ export default {
</el-form-item>
<el-form-item prop="gridSpacing" label="网格间隔">
<el-select
@change="(e) => settingChange('gridSpacing', e)"
@change="e => settingChange('gridSpacing', e)"
clearable
v-model="setting.gridSpacing"
>
......@@ -688,7 +697,7 @@ export default {
</el-form-item>
<el-form-item prop="language" label="语言设置">
<el-select
@change="(e) => settingChange('language', e)"
@change="e => settingChange('language', e)"
clearable
v-model="setting.language"
>
......
src/views/design/head/printDialog.vue
......@@ -375,12 +375,12 @@ export default {
w = this.numberToStr4(w);
h = this.numberToStr4(h);
console.log("print", w, h);
if (w > 4200 || h > 4700) {
return this.$message.warning(
"打印图片素材宽度不能超过410mm,长度不能超过450mm"
);
}
//
// if (w > 4200 || h > 4700) {
// return this.$message.warning(
// "打印图片素材宽度不能超过410mm,长度不能超过450mm"
// );
// }
r = Number(r).toFixed(0);
const imgFileName = this.imgList[0].fileName;
let position = ""; // 位置
......
src/views/design/main/imgSetting.vue
......@@ -145,149 +145,147 @@ export default {
</script>
<template>
<el-scrollbar class="scrollbarDrawer">
<div class="drawer">
<div class="img-form">
<div class="title">
图片编辑（单位：{{ $dataStore.get("setting").unit }}）
</div>
<el-form
size="small"
:disabled="!(item && !isPreView)"
style=""
:model="form"
label-position="left"
label-width="30px"
>
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="x：" prop="x">
<div class="form-content">
<el-input @blur="formChange" v-model="form.x"></el-input>
<div class="set-value">
<i @click="addValue('x')" class="el-icon-arrow-up"></i>
<i @click="reduceValue('x')" class="el-icon-arrow-down"></i>
</div>
<div class="drawer">
<div class="img-form">
<div class="title">
图片编辑（单位：{{ $dataStore.get("setting").unit }}）
</div>
<el-form
size="small"
:disabled="!(item && !isPreView)"
style=""
:model="form"
label-position="left"
label-width="30px"
>
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="x：" prop="x">
<div class="form-content">
<el-input @blur="formChange" v-model="form.x"></el-input>
<div class="set-value">
<i @click="addValue('x')" class="el-icon-arrow-up"></i>
<i @click="reduceValue('x')" class="el-icon-arrow-down"></i>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="y：">
<div class="form-content">
<el-input @blur="formChange" v-model="form.y"></el-input>
<div class="set-value">
<i @click="addValue('y')" class="el-icon-arrow-up"></i>
<i @click="reduceValue('y')" class="el-icon-arrow-down"></i>
</div>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="y：">
<div class="form-content">
<el-input @blur="formChange" v-model="form.y"></el-input>
<div class="set-value">
<i @click="addValue('y')" class="el-icon-arrow-up"></i>
<i @click="reduceValue('y')" class="el-icon-arrow-down"></i>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="r：">
<div class="form-content">
<el-input maxlength="3" @blur="formChange" v-model="form.r">
</el-input>
<div class="set-value">
<i @click="addValue('r')" class="el-icon-arrow-up"></i>
<i @click="reduceValue('r')" class="el-icon-arrow-down"></i>
</div>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="r：">
<div class="form-content">
<el-input maxlength="3" @blur="formChange" v-model="form.r">
</el-input>
<div class="set-value">
<i @click="addValue('r')" class="el-icon-arrow-up"></i>
<i @click="reduceValue('r')" class="el-icon-arrow-down"></i>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="w：">
<div class="form-content">
<el-input @blur="formChange('w')" v-model="form.w"></el-input>
<div class="set-value">
<i @click="addValue('w')" class="el-icon-arrow-up"></i>
<i @click="reduceValue('w')" class="el-icon-arrow-down"></i>
</div>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="w：">
<div class="form-content">
<el-input @blur="formChange('w')" v-model="form.w"></el-input>
<div class="set-value">
<i @click="addValue('w')" class="el-icon-arrow-up"></i>
<i @click="reduceValue('w')" class="el-icon-arrow-down"></i>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="h：">
<div class="form-content">
<el-input @blur="formChange('h')" v-model="form.h"></el-input>
<div class="set-value">
<i @click="addValue('h')" class="el-icon-arrow-up"></i>
<i @click="reduceValue('h')" class="el-icon-arrow-down"></i>
</div>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="h：">
<div class="form-content">
<el-input @blur="formChange('h')" v-model="form.h"></el-input>
<div class="set-value">
<i @click="addValue('h')" class="el-icon-arrow-up"></i>
<i @click="reduceValue('h')" class="el-icon-arrow-down"></i>
</div>
</el-form-item>
</el-col>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="z：">
<div class="form-content">
<el-input @blur="formChange" v-model="form.zIndex">
</el-input>
<div class="set-value">
<i @click="addValue('zIndex')" class="el-icon-arrow-up"></i>
<i
@click="reduceValue('zIndex')"
class="el-icon-arrow-down"
></i>
</div>
<el-col :span="8">
<el-form-item label="z：">
<div class="form-content">
<el-input @blur="formChange" v-model="form.zIndex">
</el-input>
<div class="set-value">
<i @click="addValue('zIndex')" class="el-icon-arrow-up"></i>
<i
@click="reduceValue('zIndex')"
class="el-icon-arrow-down"
></i>
</div>
</el-form-item>
</el-col>
<el-col
:span="24"
style="display: flex;justify-content: space-between;padding:0 30px;"
>
<el-tooltip content="居中">
<el-button @click="$emit('ev', 'center')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/juzhong-01.png"
alt=""
/>
</el-button>
</el-tooltip>
<el-tooltip content="垂直居中">
<el-button @click="$emit('ev', 'y_center')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/vertical.png"
alt=""
/>
</el-button>
</el-tooltip>
<el-tooltip content="水平居中">
<el-button @click="$emit('ev', 'x_center')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/shuipingjuzhong.png"
alt=""
/>
</el-button>
</el-tooltip>
<el-tooltip content="上移一层">
<el-button @click="$emit('ev', 'add_index')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/shangyi.png"
alt=""
/>
</el-button>
</el-tooltip>
<el-tooltip content="下移一层">
<el-button @click="$emit('ev', 'reduce_index')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/xiayi.png"
alt=""
/>
</el-button>
</el-tooltip>
</el-col>
</el-row>
</el-form>
</div>
<slot name="content"></slot>
</div>
</el-form-item>
</el-col>
<el-col
:span="24"
style="display: flex;justify-content: space-between;padding:0 30px;"
>
<el-tooltip content="居中">
<el-button @click="$emit('ev', 'center')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/juzhong-01.png"
alt=""
/>
</el-button>
</el-tooltip>
<el-tooltip content="垂直居中">
<el-button @click="$emit('ev', 'y_center')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/vertical.png"
alt=""
/>
</el-button>
</el-tooltip>
<el-tooltip content="水平居中">
<el-button @click="$emit('ev', 'x_center')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/shuipingjuzhong.png"
alt=""
/>
</el-button>
</el-tooltip>
<el-tooltip content="上移一层">
<el-button @click="$emit('ev', 'add_index')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/shangyi.png"
alt=""
/>
</el-button>
</el-tooltip>
<el-tooltip content="下移一层">
<el-button @click="$emit('ev', 'reduce_index')" class="btn">
<img
style="width: 13px;height: 13px"
src="@/static/icon/xiayi.png"
alt=""
/>
</el-button>
</el-tooltip>
</el-col>
</el-row>
</el-form>
</div>
</el-scrollbar>
<slot name="content"></slot>
</div>
</template>
<style lang="less" scoped>
......
src/views/design/main/index.vue
......@@ -360,8 +360,9 @@ export default {
},
selectImg(it, i) {
if (this.isView) {
return;
this.isView = false
}
// this.selectImgIndexList.push(i)
let item = this.imgList.find((img) => img.fileName === it.fileName);
if (item) return;
......@@ -373,10 +374,11 @@ export default {
height: this.detail.mssHeight,
};
}
// this.selectImgIndexList = Array.from(new Set(this.selectImgIndexList))
this.getBackFile({ files: [it], size }, (file) => {
this.getBackFile({files:[it],size:this.detail.adjustable}, (file) => {
this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
});
})
// this.selectImgIndexList = Array.from(new Set(this.selectImgIndexList))
// this.getBackFile({ files: [it], size });
},
ev(type) {
if (this.selectIndex < 0 && this.imgList.length) {
......@@ -546,14 +548,14 @@ export default {
let that = this;
let bw = document.getElementById("line");
bw = bw.clientWidth;
// bw = Number(bw.replace("px", ""));
this.isView =false
// bw = Number(bw.replsace("px", ""));
for (let i = 0; i < files.length; i++) {
files[i].url = files[i].productionFile || files[i].url;
that.$nextTick(async () => {
let w = bw / 2;
let width_px, height_px, rate, x, y;
if (size) {
if (size && !files[i].isCut) {
width_px = that.WHproportion * mmToPx(size.width);
height_px = that.WHproportion * mmToPx(size.height);
x = w * that.WHproportion;
......@@ -564,8 +566,8 @@ export default {
rate = data.height / data.width;
width_px = bw * (2 / 3);
x = w;
y = height_px / 2;
height_px = width_px * rate;
y = height_px / 2;
}
that.imgList = [];
......@@ -585,6 +587,9 @@ export default {
that.$nextTick(() => {
that.ev("center");
});
setTimeout(()=>{
that.ev("center");
},10000)
if (i === files.length - 1) {
callback && callback();
}
......@@ -696,22 +701,13 @@ export default {
// 图片导出为 png 格式
let imgType = "png";
let imgData = canvas.toDataURL(imgType);
callback && callback(imgData);
};
return img;
},
async cutImgFn() {
if (!this.checkList?.length) return;
if (this.detail.mssHeight && this.detail.mssWidth) {
return this.$confirm(`该生产单为直接打印单不可进行裁切！`, "提示", {
confirmButtonText: "确定",
showCancelButton: false,
type: "warning",
});
}
this.checkList = JSON.parse(JSON.stringify(this.selectImgList))
try {
const processQueue = await Promise.all(
this.checkList.map(async (el) => {
......@@ -742,6 +738,8 @@ export default {
this.selectImgList.forEach((el) => {
if (newMap.has(el.designId)) {
el.fileName = newMap.get(el.designId).fileName;
el.url = newMap.get(el.designId).productionFile;
el.isCut = true
el.productionFile = newMap.get(el.designId).productionFile;
}
});
......@@ -758,8 +756,7 @@ export default {
}
this.checkList = [];
this.selectImg(this.selectImgList[0]);
this.getBackFile({files:[this.selectImgList[0]]})
} catch (error) {
console.error("错误", error);
}
......@@ -774,8 +771,8 @@ export default {
// 确保点击的元素在包含 container 类名的元素内
if (currentElement.closest(".container")) {
// 如果点击的元素不是 boxShaow，执行方法
if (!currentElement.closest(".boxShaow") && !this.isView) {
this.isView = true;
if (!currentElement.closest(".boxShaow")) {
this.isView = !this.isView;
console.log(723, this.isView);
}
}
......@@ -991,6 +988,7 @@ export default {
>
<img width="150px" :src="img.url" />
</div>
</div>
</template>
</PicScrollbarBox>
......@@ -1005,25 +1003,10 @@ export default {
>
</template>
<template #mainContent>
<el-checkbox-group
v-if="selectImgList.length"
v-model="checkList"
style="display: flex;flex-wrap:nowrap;width: 100%;"
>
<el-checkbox
v-for="img in selectImgList"
:key="img.designId"
:class="{
imgchecked: checkList.includes(img),
}"
:label="img"
>
<div class="img-item" @click.stop.prevent="selectImg(img)">
<img style="width:100%" :src="img.productionFile" />
<!-- <span>{{ img.designId }}</span> -->
</div>
</el-checkbox></el-checkbox-group
>
<div v-for="(img,i) in selectImgList" class="img-item" @click.stop.prevent="selectImg(img)">
<img :key="i" style="width:100%" :src="img.productionFile" />
<!-- <span>{{ img.designId }}</span> -->
</div>
</template>
</PicScrollbarBox>
<!-- <div>
......@@ -1161,7 +1144,7 @@ export default {
class="main-bg"
:style="{ 'background-color': !isView ? '#77797a' : '#fff' }"
>
<div class="container">
<div class="container">
<div style="width: 100%;height: 100%; ">
<div v-if="isView" id="img">
<div
......@@ -1190,6 +1173,7 @@ export default {
:angle="item.r / WHproportion"
style="pointer-events: auto;cursor: default"
>
<div
ref="sucaitu-img"
:style="{ zIndex: item.zIndex }"
......@@ -1345,7 +1329,7 @@ export default {
position: absolute;
bottom: 16px;
font-size: 24px;
left: 20%;
left: 25%;
}
.page-main {
display: flex;
......@@ -1369,7 +1353,6 @@ export default {
// z-index: 2;
left: 5%;
top: 50%;
transform: translate(0, -50%);
background-color: #f0f2f6;
}
......@@ -1426,6 +1409,7 @@ export default {
justify-content: center;
// width: auto;
position: absolute;
z-index: 2;
left: 5%;
img {
pointer-events: none;
......@@ -1509,15 +1493,21 @@ img {
.img-item {
// height: 150px;
width: 200px;
max-height: 200px;
overflow: hidden;
padding: 5px;
display: flex;
box-sizing: border-box;
background: #ececec;
display: inline-block;
cursor: pointer;
// margin-bottom: 20px;
border: 2px dashed transparent;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 5px;
box-sizing: border-box;
img{
width: 100%;
height: auto;
}
span {
font-size: 14px;
// margin: 5px 0;
......@@ -1623,7 +1613,7 @@ img {
display: flex;
flex: 50%;
font-size: 12px;
margin-bottom: 10px;
margin-bottom: 6px;
.item-label {
flex: 1;
text-align: right;
......@@ -1668,11 +1658,16 @@ img {
.active::before {
display: none;
}
::v-deep .drr:hover:before {
outline: none;
}
//::v-deep .drr:hover:before {
// outline: none;
//}
}
// ::v-deep.el-table thead {
// color: black;
// }
.fixed-border{
position: fixed;
z-index: 69;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment