feat: 控制器管理

src/renderer/src/config/designControl.ts

@@ -28,12 +28,12 @@ export const navControlsConf: ControlsItemType[] = [
   {
     icon: PrevIcon,
     text: '上一步',
-    type: 'undo'
+    type: 'prev'
   },
   {
     icon: NextIcon,
     text: '下一步',
-    type: 'redo'
+    type: 'next'
   },
   {
     icon: LockIcon,
@@ -42,42 +42,52 @@ export const navControlsConf: ControlsItemType[] = [
   },
   {
     icon: CameraIcon,
-    text: '相机管理'
+    text: '相机管理',
+    type: 'camera'
   },
   {
     icon: ControlIcon,
-    text: '控制器管理'
+    text: '控制器管理',
+    type: 'control'
   },
   {
     icon: GlobalIcon,
-    text: '全局变量'
+    text: '全局变量',
+    type: 'global'
   },
   {
     icon: CommIcon,
-    text: '通信管理'
+    text: '通信管理',
+    type: 'comm'
   },
   {
     icon: TriggerIcon,
-    text: '全局触发'
+    text: '全局触发',
+    type: 'trigger'
   },
   {
     icon: ScriptIcon,
-    text: '全局脚本'
+    text: '全局脚本',
+    type: 'script'
   },
   {
     icon: SingleExecIcon,
-    text: '单次执行'
+    text: '单次执行',
+    type: 'singleExec'
   },
   {
     icon: ContinuousExecIcon,
-    text: '连续执行'
+    text: '连续执行',
+    type: 'continuousExec'
   },
   {
     icon: RunInterfaceIcon,
-    text: '编辑运行界面'
+    text: '编辑运行界面',
+    type: 'runInterface'
   },
   {
     icon: RunModelIcon,
-    text: '运行模型'
+    text: '运行模型',
+    type: 'runModel'
   }
 ]

src/renderer/src/views/Design/ControllerManagement/controllerManagement.vue

@@ -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>

src/renderer/src/views/Design/index.vue

@@ -14,7 +14,7 @@
         @open-log="handleSystemClick"
         @system-click="handleSystemClick"
       />
-      <NavCtrl @design-flow="handleDesignFlow" />
+      <NavCtrl @design-flow="handleNavClick" />
     </div>
     <div class="flex design-content">
       <!-- 侧边栏--流程操作 -->
@@ -47,6 +47,7 @@
   <SettingList v-model:value="isOpenSetting" />
   <LogList v-model:value="isOpenLog" />
   <CommManagement v-model:value="isOpenCommManagement" />
+  <ControllerManagement v-model:value="isOpenControllerManagement" />
 </template>
 
 <script setup lang="ts">
@@ -59,9 +60,11 @@ import ResultsView from './Workflow/resultsView.vue'
 import SettingList from './Settings/settingList.vue'
 import LogList from './LogManagement/logList.vue'
 import CommManagement from './CommManagement/commManagement.vue'
+import ControllerManagement from './ControllerManagement/controllerManagement.vue'
 const isOpenSetting = ref<boolean>(false) // 打开设置
 const isOpenLog = ref<boolean>(false) // 打开日志
 const isOpenCommManagement = ref<boolean>(false) // 打开通信管理
+const isOpenControllerManagement = ref<boolean>(false) // 打开控制器管理
 
 // 处理 TitleBar 系统 传递的点击事件
 const handleSystemClick = (command: string) => {
@@ -82,10 +85,15 @@ const handleSystemClick = (command: string) => {
   }
 }
 
-// 流程图关联操作
+// 点击Nav导航栏
-const logicFlowRef = ref(null)
+const handleNavClick = (command: any) => {
-const handleDesignFlow = (record) => {
+  console.log(command)
-  logicFlowRef.value.initDesignFlow(record)
+  if (command.type === 'comm') {
+    isOpenCommManagement.value = true
+  } else if (command.type === 'control') {
+    console.log('111')
+    isOpenControllerManagement.value = true
+  }
 }
 </script>
 <style scoped>