添加FAS平面图分区

src/components/Iscs/FASPlaneGraph.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <div class="row">
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区一'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区一"
+        @click="changePartition('设备分区一')"
+      ></q-btn>
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区二'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区二"
+        @click="changePartition('设备分区二')"
+      ></q-btn>
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区三'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区三"
+        @click="changePartition('设备分区三')"
+      ></q-btn>
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区四'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区四"
+        @click="changePartition('设备分区四')"
+      ></q-btn>
+    </div>
+    <div class="row">
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区五'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区五"
+        @click="changePartition('设备分区五')"
+      ></q-btn>
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区六'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区六"
+        @click="changePartition('设备分区六')"
+      ></q-btn>
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区七'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区七"
+        @click="changePartition('设备分区七')"
+      ></q-btn>
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区八'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区八"
+        @click="changePartition('设备分区八')"
+      ></q-btn>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDrawStore } from 'src/stores/draw-store';
+const drawStore = useDrawStore();
+
+function changePartition(partition: string) {
+  drawStore.selectSubmenuAndStation.partition = partition;
+}
+</script>
+
+<style lang="scss" scoped></style>

src/drawApp/iscsApp.ts

@@ -273,6 +273,7 @@ export function saveDrawDatas(app: IDrawApp) {
         new iscsGraphicData.FASOfPlatformAlarmStorage({
           stationName: station,
           commonGraphicStorage: new iscsGraphicData.CommonGraphicStorage(),
+          partition: '设备分区一',
         })
       )
     );
@@ -299,6 +300,7 @@ export function saveDrawDatas(app: IDrawApp) {
           fasOfPlatformAlarm = new iscsGraphicData.FASOfPlatformAlarmStorage({
             stationName: drawStore.selectSubmenuAndStation.station,
             commonGraphicStorage: new iscsGraphicData.CommonGraphicStorage(),
+            partition: drawStore.selectSubmenuAndStation.partition,
           });
           const fasStorage = saveCommonDrawDatas(
             app,

src/layouts/IscsDrawLayout.vue

@@ -120,27 +120,26 @@
     </q-header>
 
     <q-drawer show-if-above bordered v-model="rightDrawerOpen" side="right">
-      <q-btn
-        dense
-        color="light-blue-4"
-        style="position: absolute; top: 50%; left: -10%"
-        icon="keyboard_arrow_right"
-        font-size="2em"
-        @click="toggleRightDrawer"
-      />
       <q-resize-observer @resize="onRightResize" />
-
       <draw-properties></draw-properties>
     </q-drawer>
     <q-btn
       dense
       color="light-blue-4"
       font-size="2em"
-      style="position: absolute; top: 50%; z-index: 99; right: 0"
+      style="position: absolute; top: 50%; z-index: 99"
-      icon="keyboard_arrow_left"
+      :style="`right:${rightDrawerOpen ? rightWidth : 0}px`"
+      :icon="`${
+        rightDrawerOpen ? 'keyboard_arrow_right' : 'keyboard_arrow_left'
+      }`"
       @click="toggleRightDrawer"
     />
     <q-page-container>
+      <fAS-plane-graph
+        v-if="drawStore.selectSubmenuAndStation.submenu == '火灾报警平面图'"
+        style="display: inline-block; position: absolute"
+        :style="`right: ${rightDrawerOpen ? rightWidth : 0}px`"
+      ></fAS-plane-graph>
       <div
         ref="drawAppContainer"
         v-show="subMenuDisplayForm !== DisplayForm.component"
@@ -306,6 +305,7 @@ import { toStorageTransform } from 'src/drawApp/graphics/GraphicDataBase';
 import { Circle } from 'src/graphics/circle/Circle';
 import IscsBottomAlarm from 'src/components/Iscs/IscsBottomAlarm.vue';
 import CCTVMonitoring from 'src/components/Iscs/CCTVMonitoring.vue';
+import FASPlaneGraph from 'src/components/Iscs/FASPlaneGraph.vue';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -566,16 +566,19 @@ const showComponent = reactive({
 });
 
 function onHeaderResize(size: { height: number; width: number }) {
+  console.log(size, '11111');
   headerHeight.value = size.height;
   onResize();
 }
 
 function onFooterResize(size: { height: number; width: number }) {
+  console.log(size, '----');
   footerHeight.value = size.height;
   onResize();
 }
 
 function onRightResize(size: { height: number; width: number }) {
+  console.log(size, '===');
   rightWidth.value = size.width;
   onResize();
 }

src/stores/draw-store.ts

@@ -20,7 +20,7 @@ export const useDrawStore = defineStore('draw', {
     selectedGraphics: null as JlGraphic[] | null,
     draftId: null as number | null,
     drawPictureType: null as PictureType | null,
-    selectSubmenuAndStation: { submenu: '', station: '' },
+    selectSubmenuAndStation: { submenu: '', station: '', partition: '' },
   }),
   getters: {
     drawMode: (state) => state.drawAssistant != null,