完善绘制风格配置

src/components/Iscs/IscsBottomAlarm.vue

@@ -0,0 +1,3 @@
+<template>
+  <div style="height: 50px; font-size: 24px">状态栏</div>
+</template>

src/configs/iscsStyleConfig.ts

@@ -1,118 +1,182 @@
 import { IscsStyle } from 'src/api/DraftApi';
 
+export interface I_DA_SHI_ZHI_NENG {
+  menuName: string;
+  icon: string;
+  activeIcon: string;
+  sunMenu: {
+    sunMenuName: string;
+    displayForm: DisplayForm;
+    heightPercent?: number; //绘制占的百分比
+  }[];
+}
+
+export enum DisplayForm {
+  draw,
+  component,
+  drawAndComponent,
+}
+
 //达实智能（福州一号线）
-const DA_SHI_ZHI_NENG = [
+const DA_SHI_ZHI_NENG: I_DA_SHI_ZHI_NENG[] = [
   {
     menuName: 'Plan',
     icon: 'svguse:../iscsMenuIcon.svg#icon-Plan',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-Plan-active',
-    sunMenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [
+      { sunMenuName: '设备运行图', displayForm: DisplayForm.draw },
+      { sunMenuName: '站厅布局图', displayForm: DisplayForm.draw },
+      { sunMenuName: '站台布局图', displayForm: DisplayForm.draw },
+      { sunMenuName: '出入口布局图', displayForm: DisplayForm.draw },
+    ],
   },
   {
     menuName: 'PSCADA',
     icon: 'svguse:../iscsMenuIcon.svg#icon-PSCADA',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PSCADA-active',
-    sunMenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [
+      { sunMenuName: '一次图', displayForm: DisplayForm.draw },
+      { sunMenuName: '自动化系统图', displayForm: DisplayForm.draw },
+      { sunMenuName: '定值召唤', displayForm: DisplayForm.draw },
+      { sunMenuName: '实时SOE', displayForm: DisplayForm.draw },
+      { sunMenuName: '历史SOE', displayForm: DisplayForm.draw },
+      { sunMenuName: '光字幕', displayForm: DisplayForm.draw },
+      { sunMenuName: '交流直屏', displayForm: DisplayForm.draw },
+    ],
   },
   {
     menuName: 'BAS',
     icon: 'svguse:../iscsMenuIcon.svg#icon-BAS',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-BAS-active',
-    sunMenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [
+      { sunMenuName: '大系统', displayForm: DisplayForm.draw },
+      { sunMenuName: '小系统', displayForm: DisplayForm.draw },
+      { sunMenuName: '隧道通风系统', displayForm: DisplayForm.draw },
+      { sunMenuName: '水系统', displayForm: DisplayForm.draw },
+      { sunMenuName: '给排水', displayForm: DisplayForm.draw },
+      { sunMenuName: '电扶梯', displayForm: DisplayForm.draw },
+      { sunMenuName: '照明系统', displayForm: DisplayForm.draw },
+      { sunMenuName: '传感器', displayForm: DisplayForm.draw },
+      { sunMenuName: '导向标识/广告', displayForm: DisplayForm.draw },
+      { sunMenuName: '人防门', displayForm: DisplayForm.draw },
+      { sunMenuName: 'BAS系统', displayForm: DisplayForm.draw },
+      { sunMenuName: '模式控制', displayForm: DisplayForm.draw },
+      { sunMenuName: '时间表', displayForm: DisplayForm.draw },
+      { sunMenuName: '操作场所切换', displayForm: DisplayForm.draw },
+    ],
   },
   {
     menuName: 'FAS',
     icon: 'svguse:../iscsMenuIcon.svg#icon-FAS',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-FAS-active',
     sunMenu: [
-      { sunMenuName: '设备分区图' },
+      { sunMenuName: '设备分区图', displayForm: DisplayForm.draw },
-      { sunMenuName: '火灾报警平面图' },
+      { sunMenuName: '火灾报警平面图', displayForm: DisplayForm.draw },
-      { sunMenuName: 'FAS气灭系统图' },
+      { sunMenuName: 'FAS气灭系统图', displayForm: DisplayForm.draw },
     ],
   },
   {
     menuName: 'TFDS',
     icon: 'svguse:../iscsMenuIcon.svg#icon-TFDS',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-TFDS-active',
-    sunMenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [
+      { sunMenuName: '感温光纤状态监视图', displayForm: DisplayForm.draw },
+    ],
   },
   {
     menuName: 'AFC',
     icon: 'svguse:../iscsMenuIcon.svg#icon-AFC',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-AFC-active',
-    sunMenu: [{ sunMenuName: '屏蔽门' }],
+    sunMenu: [
+      { sunMenuName: '自动售检票系统监视图', displayForm: DisplayForm.draw },
+    ],
   },
   {
     menuName: 'CCTV',
     icon: 'svguse:../iscsMenuIcon.svg#icon-CCTV',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-CCTV-active',
-    sunMenu: [{ sunMenuName: '监控布局图' }, { sunMenuName: 'CCTV设备布局图' }],
+    sunMenu: [
+      { sunMenuName: '监控布局图', displayForm: DisplayForm.draw },
+      { sunMenuName: 'CCTV设备布局图', displayForm: DisplayForm.draw },
+    ],
   },
   {
     menuName: 'PIS',
     icon: 'svguse:../iscsMenuIcon.svg#icon-PIS',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PIS-active',
-    sunMenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [{ sunMenuName: 'PIS监控', displayForm: DisplayForm.draw }],
   },
   {
     menuName: 'PA',
     icon: 'svguse:../iscsMenuIcon.svg#icon-PA',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PA-active',
-    sunMenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [{ sunMenuName: 'PA监控', displayForm: DisplayForm.draw }],
   },
   {
     menuName: 'SIG/RAD',
     icon: 'svguse:../iscsMenuIcon.svg#icon-SIG/RAD',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-SIG/RAD-active',
-    sunMenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [{ sunMenuName: '子目录', displayForm: DisplayForm.component }],
   },
   {
     menuName: 'ACS',
     icon: 'svguse:../iscsMenuIcon.svg#icon-ACS',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-ACS-active',
-    sunMenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [
+      { sunMenuName: '门禁总览图', displayForm: DisplayForm.draw },
+      { sunMenuName: '门禁监视布局图-站厅', displayForm: DisplayForm.draw },
+      { sunMenuName: '门禁监视布局图-站台', displayForm: DisplayForm.draw },
+    ],
   },
   {
     menuName: 'PSD',
     icon: 'svguse:../iscsMenuIcon.svg#icon-PSD',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PSD-active',
-    sunMenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [{ sunMenuName: '屏蔽门系统图', displayForm: DisplayForm.draw }],
   },
   {
     menuName: 'FG',
     icon: 'svguse:../iscsMenuIcon.svg#icon-FG',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-FG-active',
-    sunMenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [
+      { sunMenuName: '防淹门状态监视图', displayForm: DisplayForm.draw },
+    ],
   },
   {
     menuName: 'ALM',
     icon: 'svguse:../iscsMenuIcon.svg#icon-ALM',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-ALM-active',
-    sunMenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [{ sunMenuName: '子目录', displayForm: DisplayForm.component }],
   },
   {
     menuName: 'NMS',
     icon: 'svguse:../iscsMenuIcon.svg#icon-NMS',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-NMS-active',
-    sunMenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [{ sunMenuName: '网络状态监视图', displayForm: DisplayForm.draw }],
   },
   {
     menuName: 'OPS',
     icon: 'svguse:../iscsMenuIcon.svg#icon-OPS',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-OPS-active',
-    sunMenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [{ sunMenuName: '子目录', displayForm: DisplayForm.component }],
   },
   {
     menuName: '数据',
     icon: 'svguse:../iscsMenuIcon.svg#icon-Data',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-Data-active',
-    sunMenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [{ sunMenuName: '子目录', displayForm: DisplayForm.component }],
   },
   {
     menuName: '联动',
     icon: 'svguse:../iscsMenuIcon.svg#icon-Linkage',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-Linkage-active',
-    sunMenu: [{ sunMenuName: '子目录' }],
+    sunMenu: [
+      {
+        sunMenuName: '子目录',
+        displayForm: DisplayForm.drawAndComponent,
+        heightPercent: 50,
+      },
+    ],
   },
 ];
 

src/graphics/line/LineDrawAssistant.ts

@@ -110,6 +110,14 @@ export class LineDraw extends GraphicDrawAssistant<LineTemplate, ILineData> {
     }
   }
 
+  onRightClick(): void {
+    if (this.points.length < 2) {
+      this.finish();
+      return;
+    }
+    this.createAndStore(true);
+  }
+
   onEsc(): void {
     if (this.points.length < 2) {
       this.finish();

src/layouts/IscsDrawLayout.vue

@@ -8,6 +8,14 @@
           <span class="data-margin">{{ currentTime }}</span>
         </div>
         <div class="top-menu-right">
+          <q-btn
+            round
+            dense
+            flat
+            color="white"
+            :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
+            @click="$q.fullscreen.toggle()"
+          />
           <q-btn color="accent" label="功能菜单">
             <q-menu>
               <q-list style="min-width: 100px">
@@ -167,13 +175,26 @@
     </q-drawer>
 
     <q-page-container>
-      <div id="draw-app-container" class="overflow-hidden"></div>
+      <div
+        ref="drawAppContainer"
+        v-show="subMenuDisplayForm !== DisplayForm.component"
+        id="draw-app-container"
+        class="overflow-hidden"
+      ></div>
+      <q-separator
+        inset
+        v-show="subMenuDisplayForm == DisplayForm.drawAndComponent"
+      ></q-separator>
+      <div
+        v-if="subMenuDisplayForm !== DisplayForm.draw"
+        class="overflow-hidden"
+      >
+        组件展示
+      </div>
     </q-page-container>
 
     <q-footer>
-      <q-toolbar>
+      <iscs-bottom-alarm />
-        <q-toolbar-title>状态栏</q-toolbar-title>
-      </q-toolbar>
       <q-resize-observer @resize="onFooterResize" />
     </q-footer>
 
@@ -210,16 +231,8 @@
       :height="drawDialogHeight"
       v-model="showDrawTool"
       canNotClose
+      position="left"
     >
-      <!-- <q-btn-toggle
-        v-model="selectUtil"
-        color="brown"
-        text-color="white"
-        toggle-color="orange"
-        toggle-text-color="black"
-        :options="utilsOption"
-        @update:model-value="drawSelect"
-      > -->
       <div class="row wrap">
         <template v-for="(ctl, idx) in utilsOption" :key="idx">
           <q-btn
@@ -232,9 +245,6 @@
           </q-btn>
         </template>
       </div>
-
-      <!-- <q-tooltip>{{ ctl.tip }}</q-tooltip> -->
-      <!-- </q-btn-toggle> -->
     </draggable-dialog>
     <q-resize-observer @resize="onResize" />
   </q-layout>
@@ -250,7 +260,11 @@ import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
 import { Arrow } from 'src/graphics/arrow/Arrow';
 import { TextContent } from 'src/graphics/textContent/TextContent';
 import { Rect } from 'src/graphics/rect/Rect';
-import { getIscsStyleConfig } from 'src/configs/iscsStyleConfig';
+import {
+  DisplayForm,
+  getIscsStyleConfig,
+  I_DA_SHI_ZHI_NENG,
+} from 'src/configs/iscsStyleConfig';
 import { IscsStyle, saveAsDraft } from 'src/api/DraftApi';
 import DraggableDialog from 'src/components/common/DraggableDialog.vue';
 import { successNotify } from 'src/utils/CommonNotify';
@@ -263,6 +277,7 @@ import { JlOperation } from 'jl-graphic';
 import { common } from 'src/protos/common';
 import { toStorageTransform } from 'src/drawApp/graphics/GraphicDataBase';
 import { Circle } from 'src/graphics/circle/Circle';
+import IscsBottomAlarm from 'src/components/Iscs/IscsBottomAlarm.vue';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -531,8 +546,16 @@ function onResize() {
   canvasHeight.value = clientHeight - headerHeight.value - footerHeight.value;
   const dom = document.getElementById('draw-app-container');
   if (dom) {
-    dom.style.width = canvasWidth.value + 'px';
+    if (subMenuDisplayForm.value == DisplayForm.draw) {
-    dom.style.height = canvasHeight.value + 'px';
+      dom.style.width = canvasWidth.value + 'px';
+      dom.style.height = canvasHeight.value + 'px';
+    } else if (subMenuDisplayForm.value == DisplayForm.drawAndComponent) {
+      const heightPercent = subMenuOption.value.find(
+        (subMenu) => subMenu.value == selectSubMenuName.value
+      ).heightPercent;
+      dom.style.width = canvasWidth.value + 'px';
+      dom.style.height = (heightPercent / 100) * canvasHeight.value + 'px';
+    }
   }
 }
 
@@ -575,6 +598,7 @@ const updateTime = () => {
 };
 
 //目录车站切换
+const subMenuDisplayForm = ref(DisplayForm.draw);
 const selectMenuName = ref('');
 let menuOption = [];
 function selectedMenu(menuName: string) {
@@ -582,30 +606,45 @@ 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 };
+        return {
+          label: sunMenu.sunMenuName,
+          value: sunMenu.sunMenuName,
+          displayForm: sunMenu.displayForm,
+          heightPercent: sunMenu?.heightPercent || 0,
+        };
       });
       selectSubMenuName.value = subMenuOption.value[0].value;
       selectedSubMenu(selectSubMenuName.value);
       break;
     }
   }
-  handleUtilsOption();
 }
 
 const selectSubMenuName = ref('');
-const subMenuOption = ref([]);
+const subMenuOption = ref<
+  {
+    label: string;
+    value: string;
+    displayForm: DisplayForm;
+    heightPercent?: number;
+  }[]
+>([]);
 function selectedSubMenu(subName: string) {
   drawStore.selectSubmenuAndStation.submenu = subName;
-  forceReloadDate();
+  subMenuDisplayForm.value = subMenuOption.value.find(
-  handleUtilsOption();
+    (subMenu) => subMenu.value == subName
+  ).displayForm;
+  if (subMenuDisplayForm.value !== DisplayForm.component) {
+    showDrawTool.value = true;
+    forceReloadDate();
+    handleUtilsOption();
+  } else {
+    showDrawTool.value = false;
+  }
+  onResize();
 }
 
-let iscsTypeConfig: {
+let iscsTypeConfig: I_DA_SHI_ZHI_NENG[] = [];
-  menuName: string;
-  icon: string;
-  activeIcon: string;
-  sunMenu: { sunMenuName: string }[];
-}[] = [];
 function initMunuOption() {
   iscsTypeConfig = getIscsStyleConfig(route.query.iscsStyle as IscsStyle);
   menuOption = iscsTypeConfig.map((menu) => {
@@ -618,9 +657,17 @@ function initMunuOption() {
   });
   selectMenuName.value = menuOption[0].value;
   subMenuOption.value = iscsTypeConfig[0].sunMenu.map((sunMenu) => {
-    return { label: sunMenu.sunMenuName, value: sunMenu.sunMenuName };
+    return {
+      label: sunMenu.sunMenuName,
+      value: sunMenu.sunMenuName,
+      displayForm: sunMenu.displayForm,
+      heightPercent: sunMenu?.heightPercent || 0,
+    };
   });
   selectSubMenuName.value = subMenuOption.value[0].value;
+  subMenuDisplayForm.value = subMenuOption.value[0].displayForm;
+  showDrawTool.value =
+    subMenuOption.value[0].displayForm !== DisplayForm.component;
   drawStore.selectSubmenuAndStation.submenu = selectSubMenuName.value;
   drawStore.selectSubmenuAndStation.station = stationOption[0].value;
 }
@@ -733,7 +780,7 @@ onUnmounted(() => {
         top: 10px;
       }
       .menu-nav-text {
-        width: 90px;
+        width: 4.8vw;
         margin-top: 28px;
         text-align: center;
         color: white;