绘制加组件显示

src/components/Iscs/CCTVMonitoring.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <div class="monitoring-title">{{ props.stationName }}摄像头监控</div>
+    <div class="monitoring-layout">
+      <div class="video-control">
+        <div class="video-text">视频控制</div>
+        <div>
+          <div class="video-control-item">
+            <div>画面布局：</div>
+            <q-select
+              dense
+              outlined
+              v-model="pictureLayout"
+              :options="options"
+            />
+          </div>
+          <div class="video-control-item">
+            <div>选择车站：</div>
+            <q-select
+              dense
+              outlined
+              disable
+              v-model="pictureLayout"
+              :options="options"
+            />
+          </div>
+          <div class="video-control-item">
+            <div>选择列车：</div>
+            <q-select
+              dense
+              outlined
+              disable
+              v-model="pictureLayout"
+              :options="options"
+            />
+          </div>
+          <div class="video-control-item">
+            <div>选择摄像头：</div>
+            <q-select
+              dense
+              outlined
+              v-model="pictureLayout"
+              :options="options"
+            />
+          </div>
+          <div>
+            <div>模式操作</div>
+            <div class="video-control-item">
+              <div>显示模式操作：</div>
+              <q-select
+                dense
+                outlined
+                v-model="pictureLayout"
+                :options="options"
+              />
+            </div>
+            <div class="q-gutter-sm">
+              <q-btn label="新增" color="white" text-color="black" />
+              <q-btn label="删除" color="white" text-color="black" />
+            </div>
+            <div class="video-control-item">
+              <div>轮询模式操作：</div>
+              <q-select
+                dense
+                outlined
+                v-model="pictureLayout"
+                :options="options"
+              />
+            </div>
+            <div class="q-gutter-sm">
+              <q-btn label="启动" color="white" text-color="black" />
+              <q-btn label="停止" color="white" text-color="black" />
+              <q-btn label="新增" color="white" text-color="black" />
+              <q-btn label="修改" color="white" text-color="black" />
+              <q-btn label="删除" color="white" text-color="black" />
+            </div>
+          </div>
+          <div>
+            <div>预置位管理</div>
+            <div class="video-control-item">
+              <div>预置位选择：</div>
+              <q-select
+                dense
+                outlined
+                v-model="pictureLayout"
+                :options="options"
+              />
+            </div>
+            <div class="video-control-item">
+              <div>预置位名称：</div>
+              <q-input dense outlined v-model="presetPositionName" />
+            </div>
+            <div class="q-gutter-sm">
+              <q-btn label="保存" color="white" text-color="black" />
+              <q-btn label="重命名" color="white" text-color="black" />
+              <q-btn label="删除" color="white" text-color="black" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>云台控制</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps<{
+  stationName: string;
+}>();
+
+const pictureLayout = ref('2x2');
+const options = ['1x1', '2x2'];
+const presetPositionName = ref('');
+</script>
+
+<style lang="scss" scoped>
+.monitoring-title {
+  height: 50px;
+  margin-bottom: 10px;
+  line-height: 50px;
+  text-align: center;
+  font-size: 28px;
+}
+.monitoring-layout {
+  width: 370px;
+  background-color: white;
+  .video-control {
+    padding: 10px;
+    .video-text {
+      font-size: 16px;
+    }
+    .video-control-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+  }
+}
+</style>

src/components/Iscs/IscsBottomAlarm.vue

@@ -46,10 +46,7 @@
     </q-markup-table>
     <div class="bottom-alarm-right">
       <div class="right-text">
-        <q-img
-          src="https://joylink.club/oss-rtss/logo/favicon_login.png"
-          class="right-img"
-        />玖链科技
+        <q-img :src="icon" class="right-img" />玖链科技
       </div>
       <div class="right-icon">
         <q-btn flat class="icon-button">
@@ -71,6 +68,7 @@ import { reactive, onMounted } from 'vue';
 import { useQuasar, type QTableColumn } from 'quasar';
 import { PagingQueryParams, userPageQuery } from 'src/api/UserApi';
 import { ApiError } from 'src/boot/axios';
+import icon from '/icons/favicon-96x96.png';
 
 const $q = useQuasar();
 

src/configs/iscsStyleConfig.ts

@@ -96,7 +96,7 @@ const DA_SHI_ZHI_NENG: I_DA_SHI_ZHI_NENG[] = [
     icon: 'svguse:../iscsMenuIcon.svg#icon-CCTV',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-CCTV-active',
     sunMenu: [
-      { sunMenuName: '监控布局图', displayForm: DisplayForm.draw },
+      { sunMenuName: '监控布局图', displayForm: DisplayForm.component },
       { sunMenuName: 'CCTV设备布局图', displayForm: DisplayForm.draw },
     ],
   },

src/layouts/IscsDrawLayout.vue

@@ -1,61 +1,12 @@
 <template>
   <q-layout view="hHh LpR fFf">
     <q-header class="bg-primary text-white">
-      <div class="top-menu">
+      <div class="top-menu" v-if="false">
         <div class="top-menu-left">成都地铁</div>
         <div class="top-menu-middle">
           <span class="data-margin">{{ currentData }}</span>
           <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">
-                <q-item
-                  v-for="item in leftMenuConfig"
-                  :key="item.label"
-                  clickable
-                  v-close-popup
-                  @click="item.click"
-                >
-                  <q-item-section>{{ item.label }}</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-          <q-btn square color="purple" 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-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>
       </div>
       <div class="menu-nav">
         <span class="menu-nav-leftTxet">{{
@@ -201,11 +152,67 @@
         v-show="subMenuDisplayForm == DisplayForm.drawAndComponent"
       ></q-separator>
       <div
-        v-if="subMenuDisplayForm !== DisplayForm.draw"
-        class="overflow-hidden"
+        v-show="subMenuDisplayForm !== DisplayForm.draw"
+        id="component-container"
+        class="show-component"
       >
-        组件展示
+        <cCTV-monitoring
+          v-if="drawStore.selectSubmenuAndStation.submenu == '监控布局图'"
+          :stationName="drawStore.selectSubmenuAndStation.station"
+        />
       </div>
+      <q-page-sticky position="bottom-right" :offset="fabPos">
+        <q-fab
+          icon="add"
+          direction="up"
+          color="primary"
+          :disable="draggingFab"
+          v-touch-pan.prevent.mouse="moveFab"
+        >
+          <q-fab-action
+            @click="$q.fullscreen.toggle()"
+            color="primary"
+            :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
+            :disable="draggingFab"
+          />
+          <q-fab-action color="primary" icon="search" :disable="draggingFab">
+            <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-icon name="search" color="accent" />
+                </template>
+              </q-input>
+            </q-popup-edit>
+          </q-fab-action>
+          <q-fab-action
+            color="info"
+            label="返回"
+            :disable="draggingFab"
+            @click="backConfirm"
+          />
+          <q-fab-action
+            v-for="item in leftMenuConfig"
+            :key="item.label"
+            color="info"
+            :label="item.label"
+            :disable="draggingFab"
+            @click="item.click"
+          />
+        </q-fab>
+      </q-page-sticky>
     </q-page-container>
 
     <q-footer>
@@ -293,6 +300,7 @@ 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';
+import CCTVMonitoring from 'src/components/Iscs/CCTVMonitoring.vue';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -392,10 +400,20 @@ function handleUtilsOption() {
   drawDialogHeight.value = 44 * Math.ceil(utilsOption.length / 2);
 }
 //左侧功能按钮
+const fabPos = ref([18, 18]);
+const draggingFab = ref(false);
 const leftMenuConfig = [
   { label: '保存', click: saveAllDrawDatas },
-  { label: '另存为', click: () => (saveAsDialog.value = true) },
+  { label: '另存', click: () => (saveAsDialog.value = true) },
 ];
+function moveFab(ev: {
+  isFirst: boolean;
+  isFinal: boolean;
+  delta: { x: number; y: number };
+}) {
+  draggingFab.value = ev.isFirst !== true && ev.isFinal !== true;
+  fabPos.value = [fabPos.value[0] - ev.delta.x, fabPos.value[1] - ev.delta.y];
+}
 
 onMounted(() => {
   console.log('绘制应用layout mounted');
@@ -560,16 +578,20 @@ function onResize() {
     clientWidth - (rightDrawerOpen.value ? rightWidth.value : 0);
   canvasHeight.value = clientHeight - headerHeight.value - footerHeight.value;
   const dom = document.getElementById('draw-app-container');
+  const componentDom = document.getElementById('component-container');
   if (dom) {
+    dom.style.width = canvasWidth.value + 'px';
     if (subMenuDisplayForm.value == DisplayForm.draw) {
-      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';
+      componentDom.style.height =
+        (1 - heightPercent / 100) * canvasHeight.value - 1 + 'px';
+    } else {
+      componentDom.style.height = canvasHeight.value + 'px';
     }
   }
 }
@@ -966,4 +988,10 @@ onUnmounted(() => {
     }
   }
 }
+.show-component {
+  display: flex;
+  justify-content: center;
+  background-color: #c8d0f1;
+  overflow: auto;
+}
 </style>