feat: 多图采集模块初始化
parent
badb802edc
commit
24b390daa0
@ -0,0 +1,55 @@
|
||||
/* 弹框 */
|
||||
.ds-dialog {
|
||||
--el-dialog-padding-primary: 0; // 弹窗内边距
|
||||
--el-dialog-bg-color: var(--ds-dialog-background-color) !important; // 弹窗背景颜色
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
.el-dialog__header {
|
||||
background-color: var(--ds-color-primary);
|
||||
.el-dialog__title {
|
||||
color: var(--ds-color-info);
|
||||
line-height: var(--ds-dialog-header-height);
|
||||
padding-left: var(--ds-dialog-header-padding);
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
color: var(--ds-color-info);
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
--el-dialog-padding-primary: 0; // 弹窗内边距
|
||||
}
|
||||
.el-dialog__headerbtn,
|
||||
.el-dialog__headerbtn:hover {
|
||||
width: 68px;
|
||||
height: var(--ds-dialog-header-height);
|
||||
.ds-dialog-header {
|
||||
height: var(--ds-dialog-header-height);
|
||||
}
|
||||
.el-dialog__close {
|
||||
font-size: 20px;
|
||||
color: var(--ds-color-info);
|
||||
}
|
||||
}
|
||||
.el-dialog__header {
|
||||
height: var(--ds-dialog-header-height);
|
||||
}
|
||||
}
|
||||
// 表单弹框
|
||||
.ds-dialog-form-container {
|
||||
.el-select__wrapper {
|
||||
background: var(--ds-dialog-form-background-color) !important;
|
||||
.el-select__selected-item {
|
||||
color: var(--ds-color-info) !important;
|
||||
}
|
||||
}
|
||||
.el-input-number {
|
||||
width: 100% !important;
|
||||
.el-input-number__increase,
|
||||
.el-input-number__decrease {
|
||||
background: transparent !important;
|
||||
color: var(--ds-color-info) !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
@import url("./base.scss");
|
||||
@import url("./global.scss");
|
||||
@import url("./element-plus.scss");
|
||||
@import url("./ds-dialog.scss");
|
||||
@import url("./design.scss");
|
||||
@ -0,0 +1,130 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-07-03 11:12:04
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-07-24 13:44:05
|
||||
* @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\FlowImagesCapture\imageNodeModel.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<DSDialog
|
||||
v-model="show"
|
||||
width="800"
|
||||
@close="handleClose"
|
||||
class="settings-dialog ds-dialog"
|
||||
title="图像源"
|
||||
>
|
||||
<div class="settings-container">
|
||||
<div class="settings-sidebar">
|
||||
<div
|
||||
class="flex flex-col items-center justify-center sidebar-item"
|
||||
:class="{ active: activeTab === v.value }"
|
||||
@click="setActiveTab(v)"
|
||||
v-for="(v, k) in settings"
|
||||
:key="k"
|
||||
>
|
||||
<img src="@/assets/electron.svg" alt="" class="w-[32px]" />
|
||||
<span>{{ v.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-line"></div>
|
||||
<ul class="settings-content">
|
||||
<li v-if="activeTab === 'permission'"></li>
|
||||
<!-- Add other tabs' content here -->
|
||||
<li v-if="activeTab === 'software'">
|
||||
<p>Software Settings Content</p>
|
||||
</li>
|
||||
<li v-if="activeTab === 'plan'">
|
||||
<p>Plan Settings Content</p>
|
||||
</li>
|
||||
<li v-if="activeTab === 'strategy'">
|
||||
<p>Strategy Settings Content</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="flex justify-end pt-0 dialog-footer">
|
||||
<DSButton type="primary" size="default" @click="handleConfirm" class="mr-[24px] mb-[24px]"
|
||||
>确定</DSButton
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</DSDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// import ThemeSwitcher from '@/components/Theme/themeSwitcher.vue'
|
||||
import { DSButton } from '@/components/Button'
|
||||
import { DSDialog } from '@/components/Dialog'
|
||||
|
||||
interface Props {
|
||||
/** 弹窗显隐 */
|
||||
value: boolean
|
||||
info: Record<string, any>
|
||||
}
|
||||
interface Emits {
|
||||
(e: 'update:value', val: boolean): void
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
value: false
|
||||
})
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 处理对话框关闭事件
|
||||
const handleClose = () => {
|
||||
// emits('close');
|
||||
}
|
||||
|
||||
const show = computed({
|
||||
get() {
|
||||
return props.value
|
||||
},
|
||||
set(val: boolean) {
|
||||
emit('update:value', val)
|
||||
}
|
||||
})
|
||||
const activeTab = ref('permission')
|
||||
|
||||
interface SettingItem {
|
||||
label: string
|
||||
value: string // 可以是路由地址或者其他唯一标识
|
||||
icon?: string // 可选的图标类名或URL
|
||||
}
|
||||
|
||||
const settings: SettingItem[] = [
|
||||
{
|
||||
label: '权限设置',
|
||||
value: 'permission',
|
||||
icon: 'fa fa-cog' // 或者自定义的图标类名
|
||||
},
|
||||
{
|
||||
label: '软件设置',
|
||||
value: 'software',
|
||||
icon: 'fa fa-file-code-o' // 或者自定义的图标类名
|
||||
},
|
||||
{
|
||||
label: '方案设置',
|
||||
value: 'scheme',
|
||||
icon: 'fa fa-clipboard' // 或者自定义的图标类名
|
||||
},
|
||||
{
|
||||
label: '运行策略',
|
||||
value: 'strategy',
|
||||
icon: 'fa fa-play-circle-o' // 或者自定义的图标类名
|
||||
}
|
||||
]
|
||||
|
||||
const setActiveTab = (tab: SettingItem) => {
|
||||
activeTab.value = tab.value
|
||||
}
|
||||
|
||||
const handleConfirm = () => {
|
||||
console.log('Confirm')
|
||||
// Implement confirm logic here (e.g., save the changes)
|
||||
show.value = false // Close the dialog
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import url('./imageNodeModel.scss');
|
||||
</style>
|
||||
@ -0,0 +1,14 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-07-23 16:19:16
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-07-23 16:37:17
|
||||
* @FilePath: \Robot-Al-Platform-Web\src\renderer\src\views\Design\FlowImagesCapture\index.ts
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import imageNodeModel from './imageNodeModel.vue'
|
||||
import multiImageNodeModel from './multiImageNodeModel.vue'
|
||||
|
||||
export const FlowImageNodeModel = imageNodeModel
|
||||
|
||||
export const FlowMultiImageNodeModel = multiImageNodeModel
|
||||
@ -0,0 +1,40 @@
|
||||
/* 弹框整体样式 */
|
||||
.controllerManagement-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 766px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
.controllerManagement-content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
padding: 16px 24px 24px;
|
||||
|
||||
.form-device-btn {
|
||||
width: 80px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-table {
|
||||
.customList-table {
|
||||
width: 100%;
|
||||
height: 190px;
|
||||
background: #363940;
|
||||
}
|
||||
}
|
||||
|
||||
.table-add-btn {
|
||||
/* 按钮样式 */
|
||||
box-sizing: border-box;
|
||||
width: 128px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue