绘制备用

src/configs/iscsStyleConfig.ts

@@ -4,7 +4,7 @@ import { IscsStyle } from 'src/api/DraftApi';
 const DA_SHI_ZHI_NENG = [
   {
     menuName: '火灾报警',
-    submenu: [
+    sunMenu: [
       { sunMenuName: '站台报警' },
       { sunMenuName: '站厅报警' },
       { sunMenuName: '系统状态' },
@@ -12,7 +12,7 @@ const DA_SHI_ZHI_NENG = [
   },
   {
     menuName: '机电',
-    submenu: [
+    sunMenu: [
       { sunMenuName: '大系统' },
       { sunMenuName: '小系统' },
       { sunMenuName: '水系统' },
@@ -29,15 +29,15 @@ const DA_SHI_ZHI_NENG = [
   },
   {
     menuName: '广播',
-    submenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [{ sunMenuName: '子目录' }],
   },
   {
     menuName: '乘客信息',
-    submenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [{ sunMenuName: '子目录' }],
   },
   {
     menuName: '闭路电视',
-    submenu: [
+    sunMenu: [
       { sunMenuName: '车站控制' },
       { sunMenuName: '车站时序' },
       { sunMenuName: '车站时序编辑' },
@@ -46,23 +46,23 @@ const DA_SHI_ZHI_NENG = [
   },
   {
     menuName: '屏蔽门',
-    submenu: [{ sunMenuName: '屏蔽门' }],
+    sunMenu: [{ sunMenuName: '屏蔽门' }],
   },
   {
     menuName: '售检票',
-    submenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [{ sunMenuName: '子目录' }],
   },
   {
     menuName: '门禁',
-    submenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [{ sunMenuName: '子目录' }],
   },
   {
     menuName: '防淹门',
-    submenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [{ sunMenuName: '子目录' }],
   },
   {
     menuName: '网络状态',
-    submenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [{ sunMenuName: '子目录' }],
   },
 ];
 

src/layouts/IscsDrawLayout.vue

@@ -1,8 +1,34 @@
 <template>
   <q-layout view="hHh LpR fFf">
     <q-header reveal class="bg-primary text-white">
-      <q-toolbar>
+      <q-toolbar class="q-pa-sm">
         <q-toolbar-title class="q-gutter-sm">
+          <div>
+            <span class="q-pa-sm">地铁站</span>
+            <q-btn-toggle
+              v-model="selectMenuName"
+              toggle-color="orange"
+              :options="menuOption"
+              @update:model-value="selectedMenu"
+            />
+          </div>
+          <div>
+            <span class="q-pa-sm">子菜单</span>
+            <q-btn-toggle
+              v-model="selectSubMenuName"
+              toggle-color="orange"
+              :options="subMenuOption"
+              @update:model-value="selectedSubMenu"
+            />
+          </div>
+          <q-btn-toggle
+            v-model="selectStationName"
+            toggle-color="orange"
+            :options="stationOption"
+            @update:model-value="selectedStation"
+          />
+        </q-toolbar-title>
+        <div class="q-gutter-sm">
           <q-btn color="accent" label="功能菜单">
             <q-menu>
               <q-list style="min-width: 100px">
@@ -18,54 +44,31 @@
               </q-list>
             </q-menu>
           </q-btn>
-          <template v-for="item in iscsTypeConfig" :key="item.menuName">
+          <q-btn square color="purple" icon="search">
-            <q-btn-dropdown color="teal" :label="item.menuName">
+            <q-popup-edit
-              <q-list>
+              ref="popupEdit"
-                <q-item
+              v-model="searchId"
-                  v-for="subItem in item.submenu"
+              :cover="false"
-                  :key="subItem.submenu"
+              :offset="[0, 10]"
-                  clickable
+              v-slot="scope"
-                  v-close-popup
-                  @click="onTopMenuClick(subItem.sunMenuName)"
-                >
-                  <q-item-section>
-                    <q-item-label>{{ subItem.sunMenuName }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-btn-dropdown>
-          </template>
-           <q-btn-toggle
-            v-model="selectStationName"
-            toggle-color="orange"
-            :options="stationOption"
-            @update:model-value="selectedStation"
-          />
-        </q-toolbar-title>
-        <q-btn square color="purple" style="margin-right: 10px" icon="search">
-          <q-popup-edit
-            ref="popupEdit"
-            v-model="searchId"
-            :cover="false"
-            :offset="[0, 10]"
-            v-slot="scope"
-          >
-            <q-input
-              color="accent"
-              v-model="scope.value"
-              label="设备Id"
-              dense
-              autofocus
-              @keyup.enter="scope.set"
             >
-              <template v-slot:prepend>
+              <q-input
-                <q-icon name="search" color="accent" />
+                color="accent"
-              </template>
+                v-model="scope.value"
-            </q-input>
+                label="设备Id"
-          </q-popup-edit>
+                dense
-        </q-btn>
+                autofocus
-        <q-btn color="info" label="返回" @click="backConfirm" />
+                @keyup.enter="scope.set"
-        <q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
+              >
+                <template v-slot:prepend>
+                  <q-icon name="search" color="accent" />
+                </template>
+              </q-input>
+            </q-popup-edit>
+          </q-btn>
+          <q-btn color="info" label="返回" @click="backConfirm" />
+          <q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
+        </div>
       </q-toolbar>
       <q-resize-observer @resize="onHeaderResize" />
     </q-header>
@@ -80,6 +83,13 @@
       <div id="draw-app-container" class="overflow-hidden"></div>
     </q-page-container>
 
+    <q-footer>
+      <q-toolbar>
+        <q-toolbar-title>状态栏</q-toolbar-title>
+      </q-toolbar>
+      <q-resize-observer @resize="onFooterResize" />
+    </q-footer>
+
     <q-dialog
       v-model="saveAsDialog"
       persistent
@@ -233,11 +243,10 @@ const leftMenuConfig = [
   { label: '另存为', click: () => (saveAsDialog.value = true) },
 ];
 
-let iscsTypeConfig = ref([]);
 onMounted(() => {
   console.log('绘制应用layout mounted');
   const dom = document.getElementById('draw-app-container');
-  iscsTypeConfig.value = getIscsStyleConfig(route.query.iscsStyle as IscsStyle);
+  initMunuOption();
   if (dom) {
     drawStore.setDraftId(+route.params.id as number);
     const drawApp = drawStore.initDrawApp();
@@ -271,6 +280,7 @@ onMounted(() => {
 const canvasWidth = ref(0);
 const canvasHeight = ref(0);
 const headerHeight = ref(0);
+const footerHeight = ref(0);
 const rightWidth = ref(0);
 
 function onHeaderResize(size: { height: number; width: number }) {
@@ -278,6 +288,11 @@ function onHeaderResize(size: { height: number; width: number }) {
   onResize();
 }
 
+function onFooterResize(size: { height: number; width: number }) {
+  footerHeight.value = size.height;
+  onResize();
+}
+
 function onRightResize(size: { height: number; width: number }) {
   rightWidth.value = size.width;
   onResize();
@@ -288,7 +303,7 @@ function onResize() {
   const clientHeight = document.documentElement.clientHeight;
   canvasWidth.value =
     clientWidth - (rightDrawerOpen.value ? rightWidth.value : 0);
-  canvasHeight.value = clientHeight - headerHeight.value;
+  canvasHeight.value = clientHeight - headerHeight.value - footerHeight.value;
   const dom = document.getElementById('draw-app-container');
   if (dom) {
     dom.style.width = canvasWidth.value + 'px';
@@ -324,11 +339,6 @@ async function saveAs(name: string) {
   }
 }
 
-function onTopMenuClick(name: string) {
-  drawStore.selectSubmenuAndStation.submenu = name;
-  forceReloadDate();
-}
-
 function forceReloadDate() {
   const drawApp = drawStore.getDrawApp();
   const graphics = drawApp.queryStore.getAllGraphics();
@@ -337,7 +347,43 @@ function forceReloadDate() {
   drawApp.forceReload();
 }
 
-//车站切换
+//目录车站切换
+const selectMenuName = ref('');
+let menuOption = [];
+function selectedMenu(menuName: string) {
+  for (let i = 0; i < iscsTypeConfig.length; i++) {
+    if (iscsTypeConfig[i].menuName == menuName) {
+      subMenuOption.value = iscsTypeConfig[i].sunMenu.map((sunMenu) => {
+        return { label: sunMenu.sunMenuName, value: sunMenu.sunMenuName };
+      });
+      selectSubMenuName.value = subMenuOption.value[0].value;
+      selectedSubMenu(selectSubMenuName.value);
+      break;
+    }
+  }
+}
+
+const selectSubMenuName = ref('');
+const subMenuOption = ref([]);
+function selectedSubMenu(subName: string) {
+  drawStore.selectSubmenuAndStation.submenu = subName;
+  forceReloadDate();
+}
+
+let iscsTypeConfig: { menuName: string; sunMenu: { sunMenuName: string }[] }[] =
+  [];
+function initMunuOption() {
+  iscsTypeConfig = getIscsStyleConfig(route.query.iscsStyle as IscsStyle);
+  menuOption = iscsTypeConfig.map((menu) => {
+    return { label: menu.menuName, value: menu.menuName };
+  });
+  selectMenuName.value = menuOption[0].value;
+  subMenuOption.value = iscsTypeConfig[0].sunMenu.map((sunMenu) => {
+    return { label: sunMenu.sunMenuName, value: sunMenu.sunMenuName };
+  });
+  selectSubMenuName.value = subMenuOption.value[0].value;
+}
+
 const selectStationName = ref('会展中心');
 const stationOption = [
   { label: '会展中心', value: '会展中心' },