示例，楼层

src/designer/Designer.ts

@@ -1,3 +1,27 @@
+import Example1 from './example1'
+import { markRaw, reactive } from 'vue'
+
+/**
+ * 全局设计器
+ */
 export default class Designer {
 
+  data: any = null
+  allLevels: any = null
+  currentFloor: string = null
+
+  constructor() {
+    this.init()
+    this.open()
+  }
+
+  init() {
+    window['designer'] = this
+  }
+
+  open() {
+    system.msg('打开成功')
+    this.data = markRaw(Example1)
+    this.allLevels = reactive(this.data.allLevels)
+  }
 }

src/designer/ModelEditor.vue

@@ -3,13 +3,7 @@
     <div class="section-top-toolbar section-toolbar">
       <el-button type="primary" :icon="renderIcon('element TopLeft')" link></el-button>
       <span class="section-toolbar-line"></span>
-      <el-button type="primary" :icon="renderIcon('element TopRight')" link></el-button>
-      <span class="section-toolbar-line"></span>
-      <el-button type="primary" :icon="renderIcon('icon5 Resize')" link>尺寸</el-button>
-      <span class="section-toolbar-line"></span>
-      <el-button type="primary" :icon="renderIcon('antd SwitcherOutlined')" link>图层</el-button>
-      <span class="section-toolbar-line"></span>
-      <el-button type="primary" :icon="renderIcon('element Setting')" link>设置</el-button>
+      <el-cascader placeholder="选择楼层" size="small" v-model="currentLevel" :options="allLevels" filterable />
     </div>
     <div class="section-content"></div>
     <div class="section-bottom-toolbar section-toolbar">
@@ -25,7 +19,15 @@
         <el-button type="primary" :icon="renderIcon('antd InsertRowLeftOutlined')" link></el-button>
       </div>
       <div class="section-toolbar-right">
-        <el-button type="primary" size="small" round>清空选择</el-button>
+        <el-input v-model="searchKeyword" size="small" style="width: 110px" placeholder="Search">
+          <template #prefix>
+            <component :is="renderIcon('element Search')"></component>
+          </template>
+        </el-input>
+        <span class="section-toolbar-line"></span>
+        <el-text type="warning">1</el-text>
+        <span class="section-toolbar-line"></span>
+        <el-text type="danger">0</el-text>
         <div class="infor">
           X=14.091,Y=12.397
         </div>
@@ -43,6 +45,8 @@ export default {
   },
   data() {
     return {
+      currentLevel: '',
+      searchKeyword: '',
       sectionLeftSearch: '',
       sectionRightSize: 0,
       sectionBottomSize: 0,
@@ -54,6 +58,11 @@ export default {
   },
   methods: {
     renderIcon
+  },
+  computed: {
+    allLevels() {
+      return designer.allLevels
+    }
   }
 }
 </script>

src/designer/example1.js

@@ -0,0 +1,67 @@
+export default {
+  Tool: {
+    Group: [],
+    GlobalVariables: [],
+    UserCommand: [],
+    ProcessFlow: [],
+    Dashboard: [],
+    DataTable: [],
+    Trigger: [
+      { name: 'OnOpen', fn: '' },
+      { name: 'OnReset', fn: '' },
+      { name: 'OnStart', fn: '' },
+      { name: 'OnStop', fn: '' }
+    ]
+  },
+  item: [
+    {
+      name: 'f1',
+      items: []
+    }
+  ],
+  elevator: [],
+  wall: [],
+  pillar: [],
+  allLevels: [
+    {
+      value: 'F', label: '仓库楼层',
+      children: [
+        { value: '-f1', label: '地下室 (-f1)' },
+        { value: 'f1', label: '一楼 (f1)' },
+        { value: 'f2', label: '二楼 (f2)' },
+        { value: 'OUT', label: '外场 (OUT)' },
+        { value: 'fe', label: '楼层电梯 (fe)' }
+      ]
+    },
+    {
+      value: 'M', label: '密集库区域',
+      children: [
+        { value: 'm1', label: 'M1 (m1)' },
+        { value: 'm2', label: 'M2 (m2)' },
+        { value: 'm3', label: 'M3 (m3)' },
+        { value: 'm4', label: 'M4 (m4)' },
+        { value: 'me', label: '提升机 (me)' }
+      ]
+    },
+    {
+      value: 'D', label: '多穿库A',
+      children: [
+        { value: 'd1', label: 'D1 (d1)' },
+        { value: 'd2', label: 'D2 (d2)' },
+        { value: 'd3', label: 'D3 (d3)' },
+        { value: 'd4', label: 'D4 (d4)' },
+        { value: 'de1', label: '提升机 (de1)' }
+      ]
+    },
+    {
+      value: 'E', label: '多穿库B',
+      children: [
+        { value: 'e1', label: 'E1 (e1)' },
+        { value: 'e2', label: 'E2 (e2)' },
+        { value: 'e3', label: 'E3 (e3)' },
+        { value: 'e4', label: 'E4 (e4)' },
+        { value: 'ee1', label: '提升机 (ee1)' }
+      ]
+    }
+  ]
+}

src/designer/viewWidgets/modeltree/ModeltreeView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="title">
-    模型树
+    <el-cascader placeholder="选择楼层" size="small" v-model="currentLevel" :options="allLevels" filterable />
     <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
       <template #prefix>
         <component :is="renderIcon('element Search')"></component>
@@ -58,8 +58,10 @@ import { renderIcon } from '@/utils/webutils.js'
 
 export default {
   name: 'ModeltreeView',
+  emits: ['close'],
   data() {
     return {
+      currentLevel: '',
       searchKeyword: ''
     }
   },
@@ -68,6 +70,11 @@ export default {
     closeMe(name) {
       this.$emit('close', name)
     }
+  },
+  computed: {
+    allLevels() {
+      return designer.allLevels
+    }
   }
 }
 </script>

src/designer/viewWidgets/monitor/MonitorView.vue

@@ -58,6 +58,7 @@ import { renderIcon } from '@/utils/webutils.js'
 
 export default {
   name: 'MonitorView',
+  emits: ['close'],
   data() {
     return {
       searchKeyword: ''

src/designer/viewWidgets/toolbox/ToolboxView.vue

@@ -35,6 +35,7 @@ import { renderIcon } from '@/utils/webutils.js'
 
 export default {
   name: 'ToolboxView',
+  emits: ['close'],
   data() {
     return {
       searchKeyword: '',
@@ -49,7 +50,7 @@ export default {
           ]
         },
         {
-          name: 'line', icon: 'antd LineOutlined', label: '线',
+          name: 'line', icon: 'fa GripLines', label: '线',
           children: [
             { name: 'line', icon: 'antd SmallDashOutlined', label: '辅助线' },
             { name: 'conveyor', icon: 'antd FontSizeOutlined', label: '输送线' },

src/types/global.d.ts

@@ -1,9 +1,11 @@
 import _ from 'lodash'
 import $ from 'jquery'
 import type System from '@/runtime/System'
+import type Designer from '@/designer/Designer'
 
 declare global {
   const $: $
   const _: _
   const system: System
+  const designer: Designer
 }

src/views/ModelMain.vue

@@ -123,19 +123,18 @@ import SplitArea from '@/components/split/split-area.vue'
 
 import Logo from '@/assets/images/logo.png'
 import './ModelMain.less'
-import { ModelMainInit, ModelMainCreated, ModelMainMounted, ModelMainUnmounted } from '@/views/ModelMainInit.js'
+import { ModelMainInit, ModelMainMounted, ModelMainUnmounted } from '@/views/ModelMainInit.js'
 import { getRootMenu } from '@/runtime/DefineMenu.js'
 import { getWidgetByName, getWidgetBySide, getAllWidget } from '@/runtime/DefineWidget.js'
 import ModelEditor from '@/designer/ModelEditor.vue'
 import ModelView from '@/designer/ModelView.vue'
 import { normalizeShortKey } from '@/utils/webutils.ts'
 
-ModelMainInit()
 
 export default {
   components: { ModelEditor, ModelView, Split, SplitArea },
   created() {
-    ModelMainCreated()
+    ModelMainInit()
   },
   mounted() {
     ModelMainMounted()

src/views/ModelMainInit.ts

@@ -15,6 +15,7 @@ import ToolsMenu from '@/designer/menus/Tools.ts'
 import Model3DView from '@/designer/menus/Model3DView.ts'
 import { forEachMenu } from '@/runtime/DefineMenu.ts'
 import { normalizeShortKey } from '@/utils/webutils.ts'
+import Designer from '@/designer/Designer.ts'
 
 /**
  * 初始化模型编辑器的基础控件
@@ -34,33 +35,7 @@ export function ModelMainInit() {
   ToolsMenu.install()
   Model3DView.install()
 
-  // hotkeys('ctrl+s', (event) => {
-  //   system.msg('ctrl+s')
-  //   event.preventDefault()
-  // })
-  // hotkeys('ctrl+c', (event) => {
-  //   system.msg('ctrl+c')
-  //   event.preventDefault()
-  // })
-  // hotkeys('ctrl+v', (event) => {
-  //   system.msg('ctrl+v')
-  //   event.preventDefault()
-  // })
-  // hotkeys('ctrl+a', (event) => {
-  //   system.msg('ctrl+a')
-  //   event.preventDefault()
-  // })
-  // hotkeys('up', (event) => {
-  //   system.msg('ArrowUp')
-  //   event.preventDefault()
-  // })
-  // hotkeys('left', (event) => {
-  //   system.msg('ArrowLeft')
-  //   event.preventDefault()
-  // })
-}
-
-export function ModelMainCreated() {
+  new Designer().init()
 }
 
 export function ModelMainMounted() {