1130 lines
29 KiB
Vue
1130 lines
29 KiB
Vue
<template>
|
||
<div v-if="modelValue" class="dialog-overlay">
|
||
<div class="dialog-box">
|
||
<div class="dialog-header">
|
||
<div class="dialog-title">{{ getDialogTitle() }} - I3M工业图像智能管理平台</div>
|
||
<div class="dialog-header-btns">
|
||
<button class="dialog-help-btn">?</button>
|
||
<button class="dialog-close-btn" @click="closeDialog">×</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dialog-body">
|
||
<!-- 左侧步骤指示器 -->
|
||
<div class="steps-sidebar">
|
||
<div class="step" :class="{ active: currentStep === 1 }">
|
||
<span v-if="currentStep === 1" class="step-arrow">➔</span>
|
||
<span class="step-number">1.</span>
|
||
<span class="step-text">选择部件</span>
|
||
</div>
|
||
<div class="step" :class="{ active: currentStep === 2 }">
|
||
<span v-if="currentStep === 2" class="step-arrow">➔</span>
|
||
<span class="step-number">2.</span>
|
||
<span class="step-text">导入图像</span>
|
||
</div>
|
||
<div class="step" :class="{ active: currentStep === 3 }">
|
||
<span v-if="currentStep === 3" class="step-arrow">➔</span>
|
||
<span class="step-number">3.</span>
|
||
<span class="step-text">设置信息</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧内容区域 -->
|
||
<div class="dialog-content-container">
|
||
<!-- 步骤1: 选择部件 -->
|
||
<div v-if="currentStep === 1" class="dialog-content">
|
||
<div class="select-part-content">
|
||
<div class="section-title">选择要导入图像的部件：</div>
|
||
|
||
<div class="parts-container">
|
||
<div
|
||
v-for="part in availableParts"
|
||
:key="getPartId(part)"
|
||
class="part-item"
|
||
:class="{ selected: String(selectedPartId) === String(getPartId(part)) }"
|
||
@click="selectPart(part)"
|
||
:title="`部件ID: ${getPartId(part)}, 选中: ${String(selectedPartId) === String(getPartId(part))}`"
|
||
>
|
||
<div class="part-icon">
|
||
<svg v-if="part.partType === 'engine'" width="40" height="40" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
|
||
<rect x="10" y="20" width="50" height="30" fill="#a6c1ed" stroke="#5773a8" stroke-width="1" />
|
||
<rect x="20" y="15" width="10" height="5" fill="#a6c1ed" stroke="#5773a8" stroke-width="1" />
|
||
<rect x="40" y="15" width="10" height="5" fill="#a6c1ed" stroke="#5773a8" stroke-width="1" />
|
||
<rect x="15" y="50" width="10" height="5" fill="#a6c1ed" stroke="#5773a8" stroke-width="1" />
|
||
<rect x="45" y="50" width="10" height="5" fill="#a6c1ed" stroke="#5773a8" stroke-width="1" />
|
||
</svg>
|
||
<svg v-if="part.partType === 'blade'" width="40" height="40" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
|
||
<ellipse cx="35" cy="35" rx="20" ry="20" fill="#a6c1ed" stroke="#5773a8" stroke-width="1" />
|
||
<path d="M35,15 L15,35 L35,55 L55,35 z" fill="#a6c1ed" stroke="#5773a8" stroke-width="1" />
|
||
</svg>
|
||
<svg v-if="part.partType === 'tower'" width="40" height="40" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
|
||
<rect x="30" y="10" width="10" height="50" fill="#a6c1ed" stroke="#5773a8" stroke-width="1" />
|
||
<rect x="25" y="60" width="20" height="5" fill="#a6c1ed" stroke="#5773a8" stroke-width="1" />
|
||
<rect x="20" y="65" width="30" height="3" fill="#a6c1ed" stroke="#5773a8" stroke-width="1" />
|
||
</svg>
|
||
</div>
|
||
<div class="part-name">{{ getPartName(part) }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="part-info" v-if="selectedPart">
|
||
<div class="info-line">
|
||
<div class="info-label">部件:</div>
|
||
<div class="info-value">{{ getPartName(selectedPart) }}</div>
|
||
</div>
|
||
<div class="info-line">
|
||
<div class="info-label">类型:</div>
|
||
<div class="info-value">{{ getPartTypeText(selectedPart.partType) }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤2: 导入图像 -->
|
||
<div v-if="currentStep === 2" class="dialog-content">
|
||
<div class="import-image-content">
|
||
<div class="section-title">导入图像到部件"{{ selectedPart ? getPartName(selectedPart) : '' }}"</div>
|
||
|
||
<div class="image-actions">
|
||
<button class="action-button" @click="handleAddImages">
|
||
<span class="button-icon">+</span>
|
||
添加图像
|
||
</button>
|
||
<button class="action-button" @click="handleRemoveImages" :disabled="!hasSelectedImages">
|
||
<span class="button-icon">-</span>
|
||
移除图像
|
||
</button>
|
||
<!-- 隐藏的文件输入框 -->
|
||
<input
|
||
type="file"
|
||
ref="fileInput"
|
||
accept="image/*"
|
||
style="display: none;"
|
||
multiple
|
||
@change="handleFileSelected"
|
||
/>
|
||
</div>
|
||
|
||
<div class="image-list-container">
|
||
<table class="image-list">
|
||
<thead>
|
||
<tr>
|
||
<th class="checkbox-column">
|
||
<input type="checkbox" @change="toggleSelectAll" :checked="allImagesSelected">
|
||
</th>
|
||
<th class="preview-column">预览</th>
|
||
<th>图像名称</th>
|
||
<th>路径</th>
|
||
<th>尺寸</th>
|
||
<th>拍摄时间</th>
|
||
<th>像素(mm)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(image, index) in importImages" :key="index" @click="toggleImageSelection(image)">
|
||
<td>
|
||
<input type="checkbox" v-model="image.selected" @click.stop>
|
||
</td>
|
||
<td class="preview-cell">
|
||
<img v-if="image.previewUrl" :src="image.previewUrl" class="preview-thumbnail" alt="预览">
|
||
<div v-else class="no-preview">无预览</div>
|
||
</td>
|
||
<td>{{ image.name }}</td>
|
||
<td>{{ image.path }}</td>
|
||
<td>{{ image.width }} x {{ image.height }}</td>
|
||
<td>{{ formatDate(image.timestamp) }}</td>
|
||
<td>{{ image.pixelSize || '155.00' }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤3: 设置图像采集信息 -->
|
||
<div v-if="currentStep === 3" class="dialog-content">
|
||
<div class="image-info-content">
|
||
<div class="section-title">步骤3: 设置图像采集信息</div>
|
||
|
||
<div class="form-container">
|
||
<div class="form-row">
|
||
<div class="form-label">拍摄时间范围</div>
|
||
<div class="form-input datetime-range">
|
||
<input type="text" v-model="imageInfo.startTime" placeholder="开始时间">
|
||
<span class="range-separator">至</span>
|
||
<input type="text" v-model="imageInfo.endTime" placeholder="结束时间">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-label">天气</div>
|
||
<div class="form-input">
|
||
<select v-model="imageInfo.weather">
|
||
<option value="晴天">晴天</option>
|
||
<option value="阴天">阴天</option>
|
||
<option value="多云">多云</option>
|
||
<option value="雨天">雨天</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-label">环境温度(°C)</div>
|
||
<div class="form-input temperature-range">
|
||
<div class="range-input-group">
|
||
<button class="range-btn" @click="imageInfo.minTemperature = Math.max(0, imageInfo.minTemperature - 1)">-</button>
|
||
<input type="number" v-model="imageInfo.minTemperature" step="0.1" min="0" max="50">
|
||
<button class="range-btn" @click="imageInfo.minTemperature = Math.min(50, imageInfo.minTemperature + 1)">+</button>
|
||
</div>
|
||
<span class="range-separator">～</span>
|
||
<div class="range-input-group">
|
||
<button class="range-btn" @click="imageInfo.maxTemperature = Math.max(0, imageInfo.maxTemperature - 1)">-</button>
|
||
<input type="number" v-model="imageInfo.maxTemperature" step="0.1" min="0" max="50">
|
||
<button class="range-btn" @click="imageInfo.maxTemperature = Math.min(50, imageInfo.maxTemperature + 1)">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-label">湿度(%)</div>
|
||
<div class="form-input">
|
||
<div class="range-input-group">
|
||
<button class="range-btn" @click="imageInfo.humidity = Math.max(0, imageInfo.humidity - 1)">-</button>
|
||
<input type="number" v-model="imageInfo.humidity" min="0" max="100">
|
||
<button class="range-btn" @click="imageInfo.humidity = Math.min(100, imageInfo.humidity + 1)">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-label">风力</div>
|
||
<div class="form-input">
|
||
<select v-model="imageInfo.windLevel">
|
||
<option value="0级（无风）">0级（无风）</option>
|
||
<option value="1级（软风）">1级（软风）</option>
|
||
<option value="2级（轻风）">2级（轻风）</option>
|
||
<option value="3级（微风）">3级（微风）</option>
|
||
<option value="4级（和风）">4级（和风）</option>
|
||
<option value="5级（清风）">5级（清风）</option>
|
||
<option value="6级（强风）">6级（强风）</option>
|
||
<option value="7级（疾风）">7级（疾风）</option>
|
||
<option value="8级（大风）">8级（大风）</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-label">拍摄方式</div>
|
||
<div class="form-input capture-method">
|
||
<label class="radio-option">
|
||
<input type="radio" v-model="imageInfo.captureMethod" value="无人机航拍">
|
||
<span class="radio-label">无人机航拍</span>
|
||
</label>
|
||
<label class="radio-option">
|
||
<input type="radio" v-model="imageInfo.captureMethod" value="人工拍摄">
|
||
<span class="radio-label">人工拍摄</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-label">拍摄距离(米)</div>
|
||
<div class="form-input">
|
||
<div class="range-input-group">
|
||
<button class="range-btn" @click="imageInfo.captureDistance = Math.max(0, imageInfo.captureDistance - 1)">-</button>
|
||
<input type="number" v-model="imageInfo.captureDistance" min="0">
|
||
<button class="range-btn" @click="imageInfo.captureDistance = imageInfo.captureDistance + 1">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-label">采集员</div>
|
||
<div class="form-input">
|
||
<input type="text" v-model="imageInfo.operator">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-label">相机型号</div>
|
||
<div class="form-input">
|
||
<input type="text" v-model="imageInfo.cameraModel">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dialog-footer">
|
||
<button
|
||
v-if="currentStep > 1"
|
||
class="dialog-button"
|
||
@click="currentStep--"
|
||
>上一步</button>
|
||
<button
|
||
v-if="currentStep < 3"
|
||
class="dialog-button"
|
||
@click="nextStep"
|
||
:disabled="!canGoNext"
|
||
>下一步</button>
|
||
<button
|
||
v-if="currentStep === 3"
|
||
class="dialog-button primary"
|
||
@click="finishImport"
|
||
>完成导入</button>
|
||
<button class="dialog-button" @click="closeDialog">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, reactive, onBeforeUnmount } from 'vue'
|
||
import { Message } from '@arco-design/web-vue'
|
||
|
||
// 定义部件接口
|
||
interface Part {
|
||
id: string
|
||
name: string
|
||
partType: string
|
||
description?: string
|
||
manufacturer?: string
|
||
model?: string
|
||
}
|
||
|
||
// 定义图像接口
|
||
interface ImportImage {
|
||
file?: File
|
||
name: string
|
||
path: string
|
||
width: number
|
||
height: number
|
||
timestamp: string
|
||
pixelSize: string
|
||
selected: boolean
|
||
previewUrl?: string
|
||
}
|
||
|
||
// 定义图像信息接口
|
||
interface ImageInfo {
|
||
startTime: string
|
||
endTime: string
|
||
weather: string
|
||
humidity: number
|
||
minTemperature: number
|
||
maxTemperature: number
|
||
windPower: number
|
||
windLevel: string
|
||
captureMethod: string
|
||
captureDistance: number
|
||
operator: string
|
||
cameraModel: string
|
||
}
|
||
|
||
// 组件props
|
||
const props = defineProps<{
|
||
modelValue: boolean
|
||
selectedTurbineId?: string
|
||
availableParts?: Part[]
|
||
}>()
|
||
|
||
// 发出的事件
|
||
const emit = defineEmits<{
|
||
'update:modelValue': [value: boolean]
|
||
'import-success': [data: {
|
||
part: Part
|
||
images: File[]
|
||
imageInfo: ImageInfo
|
||
}]
|
||
}>()
|
||
|
||
// 当前步骤
|
||
const currentStep = ref(1)
|
||
|
||
// 文件选择器引用
|
||
const fileInput = ref<HTMLInputElement | null>(null)
|
||
|
||
// 选中的部件ID
|
||
const selectedPartId = ref('')
|
||
|
||
// 计算选中的部件对象
|
||
const selectedPart = computed(() => {
|
||
if (!selectedPartId.value) return null
|
||
return props.availableParts?.find(part => String(getPartId(part)) === String(selectedPartId.value))
|
||
})
|
||
|
||
// 待导入的图像列表
|
||
const importImages = ref<ImportImage[]>([])
|
||
|
||
// 图像采集信息
|
||
const imageInfo = reactive<ImageInfo>({
|
||
startTime: formatCurrentDate() + ' 00:00',
|
||
endTime: formatCurrentDate() + ' 23:59',
|
||
weather: '晴天',
|
||
humidity: 50,
|
||
minTemperature: 15,
|
||
maxTemperature: 25,
|
||
windPower: 0,
|
||
windLevel: '3级（微风）',
|
||
captureMethod: '无人机航拍',
|
||
captureDistance: 50,
|
||
operator: '',
|
||
cameraModel: 'ILCE-7RM4'
|
||
})
|
||
|
||
// 格式化当前日期
|
||
function formatCurrentDate() {
|
||
const now = new Date()
|
||
const year = now.getFullYear()
|
||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||
const day = String(now.getDate()).padStart(2, '0')
|
||
return `${year}/${month}/${day}`
|
||
}
|
||
|
||
// 获取对话框标题
|
||
function getDialogTitle() {
|
||
switch (currentStep.value) {
|
||
case 1: return '选择部件'
|
||
case 2: return `导入图像到部件"${selectedPart.value ? getPartName(selectedPart.value) : ''}"`
|
||
case 3: return '设置图像采集信息'
|
||
default: return '导入工业图像'
|
||
}
|
||
}
|
||
|
||
// 获取部件类型文本
|
||
function getPartTypeText(type: string) {
|
||
switch (type) {
|
||
case 'engine': return '机舱'
|
||
case 'blade': return '叶片'
|
||
case 'tower': return '塔筒'
|
||
default: return type
|
||
}
|
||
}
|
||
|
||
// 获取部件ID（兼容不同的字段名）
|
||
function getPartId(part: any): string {
|
||
return part.partId || part.id || ''
|
||
}
|
||
|
||
// 获取部件名称（兼容不同的字段名）
|
||
function getPartName(part: any): string {
|
||
return part.partName || part.name || ''
|
||
}
|
||
|
||
// 选择部件
|
||
function selectPart(part: any) {
|
||
const partId = getPartId(part)
|
||
|
||
if (!part || !partId) {
|
||
console.error('部件数据无效:', part)
|
||
return
|
||
}
|
||
|
||
selectedPartId.value = String(partId)
|
||
}
|
||
|
||
// 触发添加图像
|
||
function handleAddImages() {
|
||
fileInput.value?.click()
|
||
}
|
||
|
||
// 处理文件选择
|
||
function handleFileSelected(event: Event) {
|
||
const target = event.target as HTMLInputElement
|
||
if (target.files && target.files.length > 0) {
|
||
const newImages: ImportImage[] = Array.from(target.files).map(file => {
|
||
// 生成文件的本地URL预览
|
||
const previewUrl = URL.createObjectURL(file)
|
||
|
||
// 创建一个新的图像对象
|
||
return {
|
||
file,
|
||
name: file.name,
|
||
path: `E:/I3M/data/Data3/2B/${file.name}`,
|
||
width: 6186,
|
||
height: 4126,
|
||
timestamp: new Date().toISOString(),
|
||
pixelSize: '155.00',
|
||
selected: false,
|
||
previewUrl
|
||
}
|
||
})
|
||
|
||
// 添加到图像列表
|
||
importImages.value = [...importImages.value, ...newImages]
|
||
}
|
||
|
||
// 重置文件输入，允许再次选择相同文件
|
||
if (fileInput.value) fileInput.value.value = ''
|
||
}
|
||
|
||
// 移除选中的图像
|
||
function handleRemoveImages() {
|
||
// 清理被移除图像的URL对象
|
||
importImages.value.filter(image => image.selected).forEach(image => {
|
||
if (image.previewUrl) {
|
||
URL.revokeObjectURL(image.previewUrl)
|
||
}
|
||
})
|
||
|
||
importImages.value = importImages.value.filter(image => !image.selected)
|
||
}
|
||
|
||
// 切换图像选择状态
|
||
function toggleImageSelection(image: ImportImage) {
|
||
image.selected = !image.selected
|
||
}
|
||
|
||
// 全选/取消全选图像
|
||
function toggleSelectAll(event: Event) {
|
||
const checked = (event.target as HTMLInputElement).checked
|
||
importImages.value.forEach(image => image.selected = checked)
|
||
}
|
||
|
||
// 判断是否有选中的图像
|
||
const hasSelectedImages = computed(() => {
|
||
return importImages.value.some(image => image.selected)
|
||
})
|
||
|
||
// 判断是否所有图像都被选中
|
||
const allImagesSelected = computed(() => {
|
||
return importImages.value.length > 0 && importImages.value.every(image => image.selected)
|
||
})
|
||
|
||
// 格式化日期
|
||
function formatDate(dateString: string) {
|
||
try {
|
||
const date = new Date(dateString)
|
||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
|
||
} catch (e) {
|
||
return dateString
|
||
}
|
||
}
|
||
|
||
// 判断是否可以进入下一步
|
||
const canGoNext = computed(() => {
|
||
if (currentStep.value === 1) {
|
||
return !!selectedPartId.value
|
||
} else if (currentStep.value === 2) {
|
||
return importImages.value.length > 0
|
||
}
|
||
return true
|
||
})
|
||
|
||
// 进入下一步
|
||
function nextStep() {
|
||
if (!canGoNext.value) return
|
||
currentStep.value++
|
||
}
|
||
|
||
// 完成导入
|
||
function finishImport() {
|
||
if (!selectedPart.value) {
|
||
Message.error('请选择部件')
|
||
return
|
||
}
|
||
|
||
if (importImages.value.length === 0) {
|
||
Message.error('请添加图像')
|
||
return
|
||
}
|
||
|
||
// 准备导入的数据
|
||
const files = importImages.value.map(image => image.file!).filter(Boolean)
|
||
|
||
// 构建统一的部件数据格式
|
||
const partData = {
|
||
partId: getPartId(selectedPart.value),
|
||
id: getPartId(selectedPart.value), // 兼容字段
|
||
name: getPartName(selectedPart.value),
|
||
partName: getPartName(selectedPart.value), // 兼容字段
|
||
partType: selectedPart.value.partType
|
||
}
|
||
|
||
// 发送导入事件
|
||
emit('import-success', {
|
||
part: partData,
|
||
images: files,
|
||
imageInfo: { ...imageInfo }
|
||
})
|
||
|
||
Message.success('图像导入成功')
|
||
|
||
// 关闭对话框
|
||
closeDialog()
|
||
}
|
||
|
||
// 关闭对话框
|
||
function closeDialog() {
|
||
emit('update:modelValue', false)
|
||
// 重置状态
|
||
resetState()
|
||
}
|
||
|
||
// 重置状态
|
||
function resetState() {
|
||
currentStep.value = 1
|
||
selectedPartId.value = ''
|
||
|
||
// 清理图像URL对象
|
||
importImages.value.forEach(image => {
|
||
if (image.previewUrl) {
|
||
URL.revokeObjectURL(image.previewUrl)
|
||
}
|
||
})
|
||
importImages.value = []
|
||
|
||
// 重置图像信息
|
||
Object.assign(imageInfo, {
|
||
startTime: formatCurrentDate() + ' 00:00',
|
||
endTime: formatCurrentDate() + ' 23:59',
|
||
weather: '晴天',
|
||
humidity: 70,
|
||
minTemperature: 20,
|
||
maxTemperature: 35,
|
||
windPower: 0,
|
||
captureMethod: '无人机拍摄',
|
||
captureDistance: 15,
|
||
operator: ''
|
||
})
|
||
}
|
||
|
||
// 在组件卸载时清理URL对象
|
||
onBeforeUnmount(() => {
|
||
// 清理所有创建的对象URL以防止内存泄漏
|
||
importImages.value.forEach(image => {
|
||
if (image.previewUrl) {
|
||
URL.revokeObjectURL(image.previewUrl)
|
||
}
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dialog-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.dialog-box {
|
||
width: 800px;
|
||
max-height: 90vh;
|
||
background-color: #f0f0f0;
|
||
border: 1px solid #999;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.dialog-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: linear-gradient(to right, #4a6eaf, #7a9cd3);
|
||
color: white;
|
||
padding: 3px 5px;
|
||
height: 22px;
|
||
}
|
||
|
||
.dialog-title {
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.dialog-header-btns {
|
||
display: flex;
|
||
}
|
||
|
||
.dialog-help-btn,
|
||
.dialog-close-btn {
|
||
width: 16px;
|
||
height: 16px;
|
||
background-color: #f0f0f0;
|
||
border: 1px solid #999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 2px;
|
||
font-size: 10px;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
}
|
||
|
||
.dialog-close-btn {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.dialog-body {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex: 1;
|
||
min-height: 500px;
|
||
max-height: 70vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 左侧步骤指示器 */
|
||
.steps-sidebar {
|
||
width: 100px;
|
||
background-color: #f0f0f0;
|
||
border-right: 1px solid #ddd;
|
||
padding: 15px 10px 15px 15px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.step {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #666;
|
||
font-size: 12px;
|
||
padding: 6px 0;
|
||
position: relative;
|
||
}
|
||
|
||
.step.active {
|
||
color: #0050ab;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.step-arrow {
|
||
position: absolute;
|
||
left: -10px;
|
||
color: #0050ab;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.step-number {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.step-text {
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 右侧内容区域 */
|
||
.dialog-content-container {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.dialog-content {
|
||
flex: 1;
|
||
padding: 10px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin-bottom: 15px;
|
||
color: #374151;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
}
|
||
|
||
/* 选择部件样式 */
|
||
.select-part-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
|
||
.parts-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
padding: 10px;
|
||
border: 1px solid #ddd;
|
||
background-color: #fff;
|
||
margin-bottom: 10px;
|
||
overflow-y: auto;
|
||
max-height: 320px;
|
||
}
|
||
|
||
.part-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 100px;
|
||
height: 100px;
|
||
border: 2px solid transparent;
|
||
padding: 5px;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.part-item:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.part-item.selected {
|
||
border-color: #0050ab;
|
||
background-color: #e6f0ff;
|
||
}
|
||
|
||
.part-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 60px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.part-name {
|
||
font-size: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
.part-info {
|
||
padding: 10px;
|
||
background-color: #f5f5f5;
|
||
border: 1px solid #ddd;
|
||
margin-top: auto;
|
||
}
|
||
|
||
.info-line {
|
||
display: flex;
|
||
font-size: 12px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.info-label {
|
||
width: 60px;
|
||
text-align: right;
|
||
margin-right: 10px;
|
||
color: #666;
|
||
}
|
||
|
||
.info-value {
|
||
color: #333;
|
||
}
|
||
|
||
/* 导入图像样式 */
|
||
.import-image-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
|
||
.image-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.action-button {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #f0f0f0;
|
||
border: 1px solid #ccc;
|
||
border-radius: 3px;
|
||
padding: 4px 8px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.action-button:hover {
|
||
background-color: #e0e0e0;
|
||
}
|
||
|
||
.action-button:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.button-icon {
|
||
margin-right: 5px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.image-list-container {
|
||
flex: 1;
|
||
border: 1px solid #ddd;
|
||
overflow: auto;
|
||
}
|
||
|
||
.image-list {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.image-list th {
|
||
background-color: #f0f0f0;
|
||
border-bottom: 1px solid #ddd;
|
||
padding: 4px 8px;
|
||
text-align: left;
|
||
font-weight: normal;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.image-list td {
|
||
border-bottom: 1px solid #eee;
|
||
padding: 4px 8px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.image-list tr:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.checkbox-column {
|
||
width: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 预览列样式 */
|
||
.preview-column {
|
||
width: 80px;
|
||
}
|
||
|
||
.preview-cell {
|
||
text-align: center;
|
||
}
|
||
|
||
.preview-thumbnail {
|
||
width: 60px;
|
||
height: 40px;
|
||
object-fit: cover;
|
||
border: 1px solid #ddd;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.no-preview {
|
||
color: #999;
|
||
font-size: 11px;
|
||
}
|
||
|
||
/* 设置信息样式 */
|
||
.image-info-content {
|
||
padding: 10px;
|
||
}
|
||
|
||
.form-container {
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 6px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.form-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
padding: 5px 0;
|
||
}
|
||
|
||
.form-label {
|
||
width: 120px;
|
||
text-align: left;
|
||
margin-right: 10px;
|
||
font-size: 12px;
|
||
color: #333;
|
||
}
|
||
|
||
.form-label.secondary {
|
||
width: auto;
|
||
margin-left: 15px;
|
||
color: #666;
|
||
}
|
||
|
||
.form-input {
|
||
flex: 1;
|
||
position: relative;
|
||
max-width: 300px;
|
||
}
|
||
|
||
.form-input input,
|
||
.form-input select {
|
||
width: 100%;
|
||
padding: 6px 10px;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
transition: border-color 0.2s ease;
|
||
}
|
||
|
||
.form-input input:focus,
|
||
.form-input select:focus {
|
||
outline: none;
|
||
border-color: #3b82f6;
|
||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
|
||
}
|
||
|
||
.form-input select {
|
||
height: 30px;
|
||
}
|
||
|
||
.datetime-range {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.temperature-range {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.datetime-range input {
|
||
width: 150px;
|
||
height: 30px;
|
||
}
|
||
|
||
.temperature-range .range-input-group {
|
||
width: 90px;
|
||
}
|
||
|
||
.range-separator {
|
||
margin: 0 5px;
|
||
color: #666;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.number-input {
|
||
width: 100px;
|
||
flex: none;
|
||
}
|
||
|
||
.unit-label {
|
||
position: absolute;
|
||
right: 5px;
|
||
top: 3px;
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
/* 新增的表单元素样式 */
|
||
.range-input-group {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 120px;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
height: 30px;
|
||
}
|
||
|
||
.range-btn {
|
||
width: 30px;
|
||
height: 100%;
|
||
background-color: #f8f9fa;
|
||
border: none;
|
||
border-right: 1px solid #d1d5db;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.range-btn:hover {
|
||
background-color: #e5e7eb;
|
||
}
|
||
|
||
.range-btn:last-child {
|
||
border-right: none;
|
||
border-left: 1px solid #d1d5db;
|
||
}
|
||
|
||
.range-input-group input {
|
||
flex: 1;
|
||
text-align: center;
|
||
border: none;
|
||
outline: none;
|
||
padding: 4px;
|
||
font-size: 12px;
|
||
min-width: 30px;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.capture-method {
|
||
display: flex;
|
||
gap: 20px;
|
||
align-items: center;
|
||
}
|
||
|
||
.radio-option {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
padding: 4px 8px;
|
||
border-radius: 3px;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.radio-option:hover {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.radio-option input[type="radio"] {
|
||
width: auto;
|
||
margin-right: 8px;
|
||
accent-color: #3b82f6;
|
||
}
|
||
|
||
.radio-label {
|
||
color: #374151;
|
||
}
|
||
|
||
/* 对话框底部 */
|
||
.dialog-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding: 10px;
|
||
background-color: #f0f0f0;
|
||
border-top: 1px solid #ccc;
|
||
}
|
||
|
||
.dialog-button {
|
||
padding: 8px 16px;
|
||
margin-left: 8px;
|
||
background-color: #f8f9fa;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.dialog-button:hover {
|
||
background-color: #e5e7eb;
|
||
border-color: #9ca3af;
|
||
}
|
||
|
||
.dialog-button:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.dialog-button.primary {
|
||
background-color: #3b82f6;
|
||
color: white;
|
||
border-color: #3b82f6;
|
||
}
|
||
|
||
.dialog-button.primary:hover {
|
||
background-color: #2563eb;
|
||
}
|
||
</style> |