ModelMain 主界面改造

src/designer/viewWidgets/alarm/AlarmView.vue

@@ -1,3 +1,75 @@
 <template>
-  AlarmView
+  <div class="title">
+    告警面板
+    <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
+      <template #prefix>
+        <component :is="renderIcon('element Search')"></component>
+      </template>
+    </el-input>
+    <span class="close" @click="closeMe('hideReft')">
+      <component :is="renderIcon('element Close')" />
+    </span>
+  </div>
+  <div class="calc-right-panel">
+    AlarmView_1<br />
+    AlarmView_2<br />
+    AlarmView_3<br />
+    AlarmView_4<br />
+    AlarmView_5<br />
+    AlarmView_6<br />
+    AlarmView_7<br />
+    AlarmView_8<br />
+    AlarmView_9<br />
+    AlarmView_10<br />
+    AlarmView_11<br />
+    AlarmView_12<br />
+    AlarmView_13<br />
+    AlarmView_14<br />
+    AlarmView_15<br />
+    AlarmView_16<br />
+    AlarmView_17<br />
+    AlarmView_18<br />
+    AlarmView_19<br />
+    AlarmView_20<br />
+    AlarmView_21<br />
+    AlarmView_22<br />
+    AlarmView_23<br />
+    AlarmView_24<br />
+    AlarmView_25<br />
+    AlarmView_26<br />
+    AlarmView_27<br />
+    AlarmView_28<br />
+    AlarmView_29<br />
+    AlarmView_30<br />
+    AlarmView_31<br />
+    AlarmView_32<br />
+    AlarmView_33<br />
+    AlarmView_34<br />
+    AlarmView_35<br />
+    AlarmView_36<br />
+    AlarmView_37<br />
+    AlarmView_38<br />
+    AlarmView_39<br />
+    AlarmView_40<br />
+  </div>
+
 </template>
+<script>
+import { renderIcon } from '@/utils/webutils.js'
+
+export default {
+  name: 'AlarmView',
+  emits: ['close'],
+  data() {
+    return {
+      searchKeyword: ''
+    }
+  },
+  methods: {
+    renderIcon,
+    closeMe() {
+      this.$emit('close')
+    }
+  }
+}
+</script>

src/designer/viewWidgets/logger/LoggerView.vue

@@ -1,4 +1,16 @@
 <template>
+  <div class="title">
+    系统日志
+    <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
+      <template #prefix>
+        <component :is="renderIcon('element Search')"></component>
+      </template>
+    </el-input>
+    <span class="close" @click="closeMe">
+      <component :is="renderIcon('element Close')"></component>
+    </span>
+  </div>
+  <div class="calc-bottom-panel">
     LoggerView1<br />
     LoggerView2<br />
     LoggerView3<br />
@@ -39,4 +51,24 @@
     LoggerView38<br />
     LoggerView39<br />
     LoggerView40<br />
+  </div>
 </template>
+<script>
+import { renderIcon } from '@/utils/webutils.js'
+
+export default {
+  name: 'LoggerView',
+  emits: ['close'],
+  data() {
+    return {
+      searchKeyword: ''
+    }
+  },
+  methods: {
+    renderIcon,
+    closeMe() {
+      this.$emit('close')
+    }
+  }
+}
+</script>

src/designer/viewWidgets/property/PropertyView.vue

@@ -1,4 +1,16 @@
 <template>
+  <div class="title">
+    属性面板
+    <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
+      <template #prefix>
+        <component :is="renderIcon('element Search')"></component>
+      </template>
+    </el-input>
+    <span class="close" @click="closeMe('hideReft')">
+      <component :is="renderIcon('element Close')" />
+    </span>
+  </div>
+  <div class="calc-right-panel">
     PropertyView1<br />
     PropertyView2<br />
     PropertyView3<br />
@@ -39,6 +51,25 @@
     PropertyView38<br />
     PropertyView39<br />
     PropertyView40<br />
+  </div>
+
 </template>
-<script setup lang="ts">
+<script>
+import { renderIcon } from '@/utils/webutils.js'
+
+export default {
+  name: 'PropertyView',
+  emits: ['close'],
+  data() {
+    return {
+      searchKeyword: ''
+    }
+  },
+  methods: {
+    renderIcon,
+    closeMe() {
+      this.$emit('close')
+    }
+  }
+}
 </script>

src/designer/viewWidgets/script/ScriptView.vue

@@ -1,3 +1,35 @@
 <template>
+  <div class="title">
+    脚本编辑
+    <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
+      <template #prefix>
+        <component :is="renderIcon('element Search')"></component>
+      </template>
+    </el-input>
+    <span class="close" @click="closeMe">
+      <component :is="renderIcon('element Close')"></component>
+    </span>
+  </div>
+  <div class="calc-bottom-panel">
     ScriptView
+  </div>
 </template>
+<script>
+import { renderIcon } from '@/utils/webutils.js'
+
+export default {
+  name: 'ScriptView',
+  emits: ['close'],
+  data() {
+    return {
+      searchKeyword: ''
+    }
+  },
+  methods: {
+    renderIcon,
+    closeMe() {
+      this.$emit('close')
+    }
+  }
+}
+</script>

src/designer/viewWidgets/task/TaskView.vue

@@ -1,4 +1,16 @@
 <template>
+  <div class="title">
+    任务监视
+    <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
+      <template #prefix>
+        <component :is="renderIcon('element Search')"></component>
+      </template>
+    </el-input>
+    <span class="close" @click="closeMe">
+      <component :is="renderIcon('element Close')"></component>
+    </span>
+  </div>
+  <div class="calc-bottom-panel">
     TaskView1<br />
     TaskView2<br />
     TaskView3<br />
@@ -19,4 +31,24 @@
     TaskView18<br />
     TaskView19<br />
     TaskView20<br />
+  </div>
 </template>
+<script>
+import { renderIcon } from '@/utils/webutils.js'
+
+export default {
+  name: 'TaskView',
+  emits: ['close'],
+  data() {
+    return {
+      searchKeyword: ''
+    }
+  },
+  methods: {
+    renderIcon,
+    closeMe() {
+      this.$emit('close')
+    }
+  }
+}
+</script>

src/views/ModelMain.vue

@@ -65,41 +65,16 @@
             </SplitArea>
             <SplitArea v-show="!hideRight" class="section-right" :size="hideRight ? 0 : sectionRightSize">
               <div class="section-item-wrap">
-                <div class="title">
+                <component v-if="calcRightPanel?.component" :is="calcRightPanel.component"
-                  <component :is="calcRightPanel?.icon" />
+                           @close="()=>closeMe('hideRight')" />
-                  {{ calcRightPanel?.title }}
-                  <el-input v-model="sectionLeftSearch" size="small" style="width: 240px" placeholder="Search">
-                    <template #prefix>
-                      <component :is="renderIcon('element Search')"></component>
-                    </template>
-                  </el-input>
-                  <span class="close" @click="closeMe('hideReft')"><component
-                    :is="renderIcon('element Close')"></component></span>
-                </div>
-                <div class="calc-right-panel">
-                  <component v-if="calcRightPanel?.component" :is="calcRightPanel.component" />
-                </div>
               </div>
             </SplitArea>
           </Split>
         </SplitArea>
         <SplitArea v-show="!hideBottom" :class="['section-bottom']" :size="hideBottom ? 0 : bottomSize" :min-size="0">
           <div class="section-item-wrap">
-            <div class="title">
+            <component v-if="calcBottomPanel?.component" :is="calcBottomPanel.component"
-              <component :is="calcBottomPanel?.icon" />
+                       @close="()=>closeMe('hideBottom')" />
-              {{ calcBottomPanel?.title }}
-              <el-input v-model="sectionLeftSearch" size="small" style="width: 240px" placeholder="Search">
-                <template #prefix>
-                  <component :is="renderIcon('element Search')"></component>
-                </template>
-              </el-input>
-              <span class="close" @click="closeMe('hideBottom')">
-                <component :is="renderIcon('element Close')"></component>
-              </span>
-            </div>
-            <div class="calc-bottom-panel">
-              <component v-if="calcBottomPanel?.component" :is="calcBottomPanel.component" />
-            </div>
           </div>
         </SplitArea>
       </Split>