|
|
@@ -1,61 +1,187 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
<nav class="settings-nav">
|
|
|
- <div class="nav-item active">
|
|
|
- <i class="fas fa-cog"></i>
|
|
|
+ <div class="nav-item" :class="{'active': activeIndex === 0}" @click="activeIndex = 0">
|
|
|
+ <img src="@/assets/images/setting/icon1.png" class="nav-icon" v-if="activeIndex !== 0"/>
|
|
|
+ <img src="@/assets/images/setting/icon1a.png" class="nav-icon" v-else/>
|
|
|
<span>基础配置</span>
|
|
|
</div>
|
|
|
- <div class="nav-item">
|
|
|
- <i class="fas fa-camera"></i>
|
|
|
+ <div class="nav-item" :class="{'active': activeIndex === 1}" @click="activeIndex = 1">
|
|
|
+ <img src="@/assets/images/setting/icon2.png" class="nav-icon" v-if="activeIndex !== 1"/>
|
|
|
+ <img src="@/assets/images/setting/icon2a.png" class="nav-icon" v-else/>
|
|
|
<span>拍照设置</span>
|
|
|
</div>
|
|
|
- <div class="nav-item">
|
|
|
- <i class="fas fa-ellipsis-h"></i>
|
|
|
+ <div class="nav-item" :class="{'active': activeIndex === 2}" @click="activeIndex = 2">
|
|
|
+ <img src="@/assets/images/setting/icon3.png" class="nav-icon" v-if="activeIndex !== 2"/>
|
|
|
+ <img src="@/assets/images/setting/icon3a.png" class="nav-icon" v-else/>
|
|
|
<span>其他设置</span>
|
|
|
</div>
|
|
|
- <div class="nav-item">
|
|
|
- <i class="fas fa-gamepad"></i>
|
|
|
+ <div class="nav-item" :class="{'active': activeIndex === 3}" @click="activeIndex = 3">
|
|
|
+ <img src="@/assets/images/setting/icon4.png" class="nav-icon" v-if="activeIndex !== 3"/>
|
|
|
+ <img src="@/assets/images/setting/icon4a.png" class="nav-icon" v-else/>
|
|
|
<span>遥控器设置</span>
|
|
|
</div>
|
|
|
</nav>
|
|
|
|
|
|
<div class="form-container">
|
|
|
- <div class="form-item">
|
|
|
- <label>canpture_one图片输出文件夹：</label>
|
|
|
- <div class="input-group">
|
|
|
- <button class="bg-primary" @click="selectFolder">
|
|
|
- 选择文件夹
|
|
|
- </button>
|
|
|
+ <div class="captureBox" v-if="activeIndex === 0">
|
|
|
+ <div class="form-item">
|
|
|
+ <label>canpture_one图片输出文件夹：</label>
|
|
|
+ <div class="input-group">
|
|
|
+ <el-input v-model="formData.captureOneFolder" readonly></el-input>
|
|
|
+ <div class="select-btn" @click="selectFolder">
|
|
|
+ <img src="@/assets/images/setting/folder.png" /> 选择文件夹
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="error-text">capture one的导出拍照图像自动和智能拍的待处理图像自不一致，请重新选择</p>
|
|
|
+ </div>
|
|
|
+ <div class="selectBox" v-if="activeIndex === 0">
|
|
|
+ <div class="form-item">
|
|
|
+ <label>主图尺寸：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.mainImageSize" placeholder="请选择">
|
|
|
+ <el-option v-for="item in mainImageSizeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>图片输出格式：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.imageFormat" placeholder="请选择">
|
|
|
+ <el-option v-for="item in imageFormatList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>图片锐化：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.imageSharpening" placeholder="请选择">
|
|
|
+ <el-option v-for="item in imageSharpeningList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <p class="error-text">capture one的导出拍照图像自动和智能拍的待处理图像自不一致，请重新选择</p>
|
|
|
-
|
|
|
- <div class="form-item">
|
|
|
- <label>主图尺寸：</label>
|
|
|
- <div class="select-wrapper">
|
|
|
- <select>
|
|
|
- <option>1600</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="form-item">
|
|
|
- <label>图片输出格式：</label>
|
|
|
- <div class="select-wrapper">
|
|
|
- <select>
|
|
|
- <option>png</option>
|
|
|
- </select>
|
|
|
+ <div class="selectBox" style="padding-top: 0px" v-if="activeIndex === 1">
|
|
|
+ <div class="form-item">
|
|
|
+ <label>重复拍摄警告：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.repeatWarning" placeholder="请选择">
|
|
|
+ <el-option v-for="item in repeatWarningList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>单次张数警告：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.singleWarning" placeholder="请选择">
|
|
|
+ <el-option v-for="item in singleWarningList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>累计拍照警告：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.totalWarning" placeholder="请选择">
|
|
|
+ <el-option v-for="item in totalWarningList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>对焦时间：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-input v-model="formData.focusTime" placeholder="请输入">
|
|
|
+ <template #append>秒</template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>拍照停留：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-input v-model="formData.photoTime" placeholder="请输入">
|
|
|
+ <template #append>秒</template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="form-item">
|
|
|
- <label>图片锐化：</label>
|
|
|
- <div class="select-wrapper">
|
|
|
- <select>
|
|
|
- <option>1.0</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="selectBox" style="padding-top: 0px" v-if="activeIndex === 2">
|
|
|
+ <div class="form-item">
|
|
|
+ <label>产品类型：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.productType" placeholder="请选择">
|
|
|
+ <el-option v-for="item in productTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>默认抠图模式：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.defaultCutoutMode" placeholder="请选择">
|
|
|
+ <el-option v-for="item in defaultCutoutModeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>设备运动速度：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.deviceSpeed" placeholder="请选择">
|
|
|
+ <el-option v-for="item in deviceSpeedList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>运行模式：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.runMode" placeholder="请选择">
|
|
|
+ <el-option v-for="item in runModeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="selectBox" style="padding-top: 0px" v-if="activeIndex === 3">
|
|
|
+ <div class="form-item">
|
|
|
+ <label>接收器：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.receiver" placeholder="请选择">
|
|
|
+ <el-option v-for="item in receiverList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>左：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.left" placeholder="请选择">
|
|
|
+ <el-option v-for="item in leftList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>右：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.right" placeholder="请选择">
|
|
|
+ <el-option v-for="item in rightList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>上：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.up" placeholder="请选择">
|
|
|
+ <el-option v-for="item in upList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <label>下：</label>
|
|
|
+ <div class="select-wrapper">
|
|
|
+ <el-select v-model="formData.down" placeholder="请选择">
|
|
|
+ <el-option v-for="item in downList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="text-center mt-8">
|
|
|
- <button class="bg-gradient-to-r from-primary">
|
|
|
+ <button class="bg-gradient-to-r from-primary" @click="saveSetting">
|
|
|
保存
|
|
|
</button>
|
|
|
</div>
|
|
|
@@ -68,6 +194,103 @@
|
|
|
import { ref } from 'vue';
|
|
|
|
|
|
const folderPath = ref('');
|
|
|
+const activeIndex = ref(0);
|
|
|
+const formData = ref({
|
|
|
+ captureOneFolder: '',
|
|
|
+ mainImageSize: '',
|
|
|
+ imageFormat: '',
|
|
|
+ imageSharpening: '',
|
|
|
+ repeatWarning: '',
|
|
|
+ singleWarning: '',
|
|
|
+ totalWarning: '',
|
|
|
+ focusTime: '',
|
|
|
+ photoTime: '',
|
|
|
+ productType: '',
|
|
|
+ defaultCutoutMode: '',
|
|
|
+ deviceSpeed: '',
|
|
|
+ runMode: '',
|
|
|
+ receiver: '',
|
|
|
+ left: '',
|
|
|
+ right: '',
|
|
|
+ up: '',
|
|
|
+ down: '',
|
|
|
+});
|
|
|
+const mainImageSizeList = ref([
|
|
|
+ { label: '1600', value: '1600' },
|
|
|
+ { label: '1200', value: '1200' },
|
|
|
+ { label: '1024', value: '1024' },
|
|
|
+ { label: '800', value: '800' },
|
|
|
+]);
|
|
|
+const imageFormatList = ref([
|
|
|
+ { label: 'jpg', value: 'jpg' },
|
|
|
+ { label: 'png', value: 'png' },
|
|
|
+ { label: 'jpeg', value: 'jpeg' },
|
|
|
+]);
|
|
|
+const imageSharpeningList = ref([
|
|
|
+ { label: '0', value: '0' },
|
|
|
+ { label: '1', value: '1' },
|
|
|
+ { label: '2', value: '2' },
|
|
|
+ { label: '3', value: '3' },
|
|
|
+]);
|
|
|
+const repeatWarningList = ref([
|
|
|
+ { label: '关闭', value: '0' },
|
|
|
+ { label: '开启', value: '1' },
|
|
|
+]);
|
|
|
+const singleWarningList = ref([
|
|
|
+ { label: '11', value: '11' },
|
|
|
+ { label: '12', value: '12' },
|
|
|
+ { label: '13', value: '13' },
|
|
|
+]);
|
|
|
+const totalWarningList = ref([
|
|
|
+ { label: '1.0', value: '1.0' },
|
|
|
+ { label: '1.5', value: '1.5' },
|
|
|
+ { label: '2.0', value: '2.0' },
|
|
|
+]);
|
|
|
+const productTypeList = ref([
|
|
|
+ { label: '鞋类', value: '1' },
|
|
|
+ { label: '服装', value: '2' },
|
|
|
+ { label: '箱包', value: '3' },
|
|
|
+]);
|
|
|
+const defaultCutoutModeList = ref([
|
|
|
+ { label: '普通抠图', value: '1' },
|
|
|
+ { label: '智能抠图', value: '2' },
|
|
|
+ { label: '手动抠图', value: '3' },
|
|
|
+]);
|
|
|
+const deviceSpeedList = ref([
|
|
|
+ { label: '一档', value: '1' },
|
|
|
+ { label: '二档', value: '2' },
|
|
|
+ { label: '三档', value: '3' },
|
|
|
+]);
|
|
|
+const runModeList = ref([
|
|
|
+ { label: '普通模式', value: '1' },
|
|
|
+ { label: '自动模式', value: '2' },
|
|
|
+ { label: '手动模式', value: '3' },
|
|
|
+]);
|
|
|
+const receiverList = ref([
|
|
|
+ { label: '蓝牙', value: '1' },
|
|
|
+ { label: '2.4G', value: '2' },
|
|
|
+ { label: '5.8G', value: '3' },
|
|
|
+]);
|
|
|
+const leftList = ref([
|
|
|
+ { label: '左脚', value: '1' },
|
|
|
+ { label: '右脚', value: '2' },
|
|
|
+ { label: '左右脚', value: '3' },
|
|
|
+]);
|
|
|
+const rightList = ref([
|
|
|
+ { label: '左脚', value: '1' },
|
|
|
+ { label: '右脚', value: '2' },
|
|
|
+ { label: '左右脚', value: '3' },
|
|
|
+]);
|
|
|
+const upList = ref([
|
|
|
+ { label: '上移', value: '1' },
|
|
|
+ { label: '下移', value: '2' },
|
|
|
+ { label: '左右移', value: '3' },
|
|
|
+]);
|
|
|
+const downList = ref([
|
|
|
+ { label: '上移', value: '1' },
|
|
|
+ { label: '下移', value: '2' },
|
|
|
+ { label: '左右移', value: '3' },
|
|
|
+]);
|
|
|
|
|
|
const selectFolder = () => {
|
|
|
// 这里可以添加选择文件夹的逻辑
|
|
|
@@ -88,6 +311,9 @@ const selectFolder = () => {
|
|
|
const path = files[0].webkitRelativePath.split('/')[0];
|
|
|
folderPath.value = path;
|
|
|
|
|
|
+ // 更新表单数据中的captureOneFolder字段
|
|
|
+ formData.value.captureOneFolder = path;
|
|
|
+
|
|
|
// 这里可以添加更新UI或发送到后端的逻辑
|
|
|
console.log('选择的文件夹:', path);
|
|
|
|
|
|
@@ -99,10 +325,12 @@ const selectFolder = () => {
|
|
|
// 触发文件选择对话框
|
|
|
input.click();
|
|
|
}
|
|
|
-
|
|
|
+const saveSetting = () => {
|
|
|
+ console.log(formData.value);
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
body {
|
|
|
min-height: 1024px;
|
|
|
background: #EAECED;
|
|
|
@@ -117,6 +345,7 @@ body {
|
|
|
gap: 40px;
|
|
|
padding: 30px 0;
|
|
|
background: #EDEFF0;
|
|
|
+ border-bottom: 1px solid rgba(0,0,0,0.1);
|
|
|
}
|
|
|
.nav-item {
|
|
|
display: flex;
|
|
|
@@ -125,9 +354,15 @@ body {
|
|
|
cursor: pointer;
|
|
|
color: #666;
|
|
|
transition: all 0.3s;
|
|
|
+ width: 100px;
|
|
|
+ justify-content: center;
|
|
|
+ height: 70px;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
.nav-item.active {
|
|
|
- color: #4080ff;
|
|
|
+ background: #DFE2E3;
|
|
|
+ border-radius: 10px;
|
|
|
+ color: #2957FF;
|
|
|
}
|
|
|
.nav-item i {
|
|
|
font-size: 24px;
|
|
|
@@ -140,13 +375,10 @@ body {
|
|
|
background: #fff;
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
-.nav-item.active i {
|
|
|
- background: #edf2ff;
|
|
|
-}
|
|
|
.form-container {
|
|
|
border-radius: 12px;
|
|
|
padding: 30px;
|
|
|
- max-width: 800px;
|
|
|
+ width: 800px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.form-item {
|
|
|
@@ -156,9 +388,10 @@ body {
|
|
|
}
|
|
|
.form-item label {
|
|
|
display: block;
|
|
|
- margin-bottom: 8px;
|
|
|
- color: #333;
|
|
|
- font-weight: 500;
|
|
|
+ min-width: 98px;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1A1A1A;
|
|
|
}
|
|
|
.input-group {
|
|
|
display: flex;
|
|
|
@@ -174,26 +407,9 @@ body {
|
|
|
.select-wrapper {
|
|
|
position: relative;
|
|
|
width: 200px;
|
|
|
-}
|
|
|
-.select-wrapper select {
|
|
|
- width: 100%;
|
|
|
- padding: 8px 12px;
|
|
|
- border: 1px solid #e5e7eb;
|
|
|
- border-radius: 4px;
|
|
|
- appearance: none;
|
|
|
- background: #DFE2E3;
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
-.select-wrapper::after {
|
|
|
- content: '\f107';
|
|
|
- font-family: "Font Awesome 6 Free";
|
|
|
- font-weight: 900;
|
|
|
- position: absolute;
|
|
|
- right: 12px;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- pointer-events: none;
|
|
|
- color: #666;
|
|
|
+ ::v-deep(.el-input__inner){
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
}
|
|
|
.error-text {
|
|
|
color: #dc2626;
|
|
|
@@ -201,7 +417,38 @@ body {
|
|
|
margin-top: 4px;
|
|
|
}
|
|
|
.from-primary{
|
|
|
+ width: 150px;
|
|
|
+ margin-top: 30px;
|
|
|
+ height: 40px;
|
|
|
color: #FFFFFF;
|
|
|
background: linear-gradient( 135deg, #2FB0FF 0%, #B863FB 100%);
|
|
|
}
|
|
|
+.nav-icon{
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+}
|
|
|
+.captureBox{
|
|
|
+ border-bottom: 1px solid rgba(0,0,0,0.1);
|
|
|
+}
|
|
|
+.selectBox{
|
|
|
+ padding-top: 30px;
|
|
|
+ padding-left: 100px;
|
|
|
+ border-bottom: 1px solid rgba(0,0,0,0.1);
|
|
|
+}
|
|
|
+.select-btn{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 120px;
|
|
|
+ height: 30px;
|
|
|
+ background: #DFE2E3;
|
|
|
+ border-radius: 6px;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2957FF;
|
|
|
+ gap: 5px;
|
|
|
+ img{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
