feat: 控制器管理
JINGYJ
1 week ago
parent
90786d858b
commit
4090cd6273
@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<!-- 控制器管理弹框 -->
|
||||
<DSDialog
|
||||
title="控制器管理"
|
||||
v-model="show"
|
||||
width="1200"
|
||||
class="controllerManagement-dialog ds-dialog"
|
||||
@close="handleClose"
|
||||
>
|
||||
<div class="controllerManagement-container">
|
||||
<div class="controllerManagement-infoList">
|
||||
<div class="controllerManagement-infoList-title">
|
||||
<span>设备列表</span>
|
||||
<div class="infoList-title-btn" @click="addDevice">+</div>
|
||||
</div>
|
||||
<div class="controllerManagement-infoList-content">
|
||||
<div
|
||||
class="controllerManagement-infoList-item"
|
||||
:class="{ active: deviceTab === item.name }"
|
||||
v-for="(item, index) in deviceBars"
|
||||
:key="index"
|
||||
@click="selectDevice(item)"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
<el-switch v-model="item.enabled" size="small" />
|
||||
</div>
|
||||
<el-empty
|
||||
:image-size="54"
|
||||
:image="NoDataIcon"
|
||||
style="margin-top: 130px"
|
||||
v-if="deviceBars.length === 0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controllerManagement-line-first" />
|
||||
<div class="controllerManagement-content">
|
||||
<el-form label-width="auto" size="default" :model="formDeviceInfo" style="max-width: 100%">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="品牌" label-position="top">
|
||||
<el-select
|
||||
v-model="formDeviceInfo.protocol"
|
||||
placeholder="Select"
|
||||
class="device-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="重命名" label-position="top">
|
||||
<el-input v-model="formDeviceInfo.deviceName" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</DSDialog>
|
||||
<!-- <DeviceDialog v-model:value="isDeviceDialog" /> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: 'controllerManagement'
|
||||
})
|
||||
import { DSButton } from '@/components/Button'
|
||||
import { DSDialog } from '@/components/Dialog'
|
||||
import DeviceDialog from './deviceDialog.vue'
|
||||
interface Props {
|
||||
/** import DeviceDialog from './deviceDialog.vue';
|
||||
弹窗显隐 */
|
||||
value: boolean
|
||||
}
|
||||
interface Emits {
|
||||
(e: 'update:value', val: boolean): void
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
value: false
|
||||
})
|
||||
const emit = defineEmits<Emits>()
|
||||
console.log(props.value)
|
||||
const show = computed({
|
||||
get() {
|
||||
Object.assign(deviceBars, deviceList)
|
||||
return props.value
|
||||
},
|
||||
set(val: boolean) {
|
||||
emit('update:value', val)
|
||||
}
|
||||
})
|
||||
const isDeviceDialog = ref(false)
|
||||
// 中间tab
|
||||
const deviceTab = ref('') // device/receive/send/heartbeat/response
|
||||
const deviceBars = ref([])
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: 'Option1',
|
||||
label: 'Option1'
|
||||
},
|
||||
{
|
||||
value: 'Option2',
|
||||
label: 'Option2'
|
||||
},
|
||||
{
|
||||
value: 'Option3',
|
||||
label: 'Option3'
|
||||
},
|
||||
{
|
||||
value: 'Option4',
|
||||
label: 'Option4'
|
||||
},
|
||||
{
|
||||
value: 'Option5',
|
||||
label: 'Option5'
|
||||
}
|
||||
]
|
||||
// 设备列表
|
||||
const deviceList = ref([
|
||||
{
|
||||
name: '1 Light-1',
|
||||
enabled: false,
|
||||
info: {
|
||||
protocol: '1',
|
||||
deviceName: '1',
|
||||
IP: '1',
|
||||
targetPort: '1',
|
||||
dataUpload: false,
|
||||
reconnect: false,
|
||||
acceptEnd: false,
|
||||
endInfo: '1'
|
||||
}
|
||||
},
|
||||
{ name: '2 Light-2', enabled: false }
|
||||
])
|
||||
// 设备信息表单
|
||||
const formDeviceInfo = reactive({
|
||||
protocol: '',
|
||||
deviceName: '',
|
||||
IP: '',
|
||||
targetPort: '',
|
||||
dataUpload: false,
|
||||
reconnect: false,
|
||||
acceptEnd: false,
|
||||
endInfo: ''
|
||||
})
|
||||
const selectDevice = (device: Device) => {
|
||||
deviceTab.value = device.name
|
||||
Object.assign(formDeviceInfo, device.info)
|
||||
console.log(deviceTab.value)
|
||||
}
|
||||
|
||||
// 添加设备
|
||||
const addDevice = () => {
|
||||
deviceList.value.push({
|
||||
name: `${deviceList.value.length + 1} Light-${deviceList.value.length + 1}`,
|
||||
enabled: false,
|
||||
info: {
|
||||
protocol: '1',
|
||||
deviceName: '1',
|
||||
IP: '1',
|
||||
targetPort: '1',
|
||||
dataUpload: false,
|
||||
reconnect: false,
|
||||
acceptEnd: false,
|
||||
endInfo: '1'
|
||||
}
|
||||
})
|
||||
console.log(isDeviceDialog.value, 'isDeviceDialog.value')
|
||||
}
|
||||
|
||||
// 接收事件内容
|
||||
const receiveData = ref('')
|
||||
// 发送事件内容
|
||||
const sendData = ref('')
|
||||
// 16进制显示
|
||||
const hexDisplay = ref(true)
|
||||
|
||||
// 处理对话框关闭事件
|
||||
const handleClose = () => {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 弹框整体样式 */
|
||||
.controllerManagement-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 766px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.controllerManagement-siderBar {
|
||||
box-sizing: border-box;
|
||||
width: 120px;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.controllerManagement-sidebar-item {
|
||||
margin-bottom: 16px;
|
||||
height: 62px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.controllerManagement-infoList {
|
||||
box-sizing: border-box;
|
||||
width: 250px;
|
||||
.controllerManagement-infoList-title {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
.infoList-title-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #154ddd;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.controllerManagement-infoList-content {
|
||||
.controllerManagement-infoList-item {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.controllerManagement-infoList-item.active {
|
||||
background: #f2f2f7;
|
||||
span {
|
||||
color: #154ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.controllerManagement-content {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
padding: 16px 24px 24px;
|
||||
.device-select {
|
||||
color: #fff;
|
||||
:deep(.el-select__wrapper) {
|
||||
background: #303136;
|
||||
.el-select__selected-item {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-tabs {
|
||||
width: 100%;
|
||||
:deep(.el-tabs__item) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.fixed-height-textarea) {
|
||||
margin-bottom: 8px;
|
||||
height: 110px !important;
|
||||
min-height: 110px !important;
|
||||
max-height: 110px !important;
|
||||
.el-textarea__inner {
|
||||
height: 110px !important;
|
||||
background: #303136;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-device-btn {
|
||||
width: 80px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.event-table {
|
||||
.eventList-table {
|
||||
width: 100%;
|
||||
height: 224px;
|
||||
background: #363940;
|
||||
}
|
||||
.table-add-btn {
|
||||
box-sizing: border-box;
|
||||
width: 128px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.controllerManagement-line-first,
|
||||
.controllerManagement-line-second {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
width: 1px;
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.controllerManagement-line-second {
|
||||
left: 372px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue