绘制组件调整

src/components/Iscs/CCTVMonitoring.vue

@@ -2,8 +2,8 @@
   <div>
     <div class="monitoring-title">{{ props.stationName }}摄像头监控</div>
     <div class="monitoring-layout">
-      <div class="video-control">
+      <div class="video-control-text">视频控制</div>
-        <div class="video-text">视频控制</div>
+      <div class="video-control-content">
         <div>
           <div class="video-control-item">
             <div>画面布局：</div>
@@ -11,7 +11,15 @@
               dense
               outlined
               v-model="pictureLayout"
-              :options="options"
+              :options="pictureLayoutOtions"
+              style="width: 125px"
+            />
+            <q-btn
+              class="btn-padding"
+              style="margin-left: 15px"
+              label="全屏显示"
+              color="white"
+              text-color="black"
             />
           </div>
           <div class="video-control-item">
@@ -20,8 +28,9 @@
               dense
               outlined
               disable
-              v-model="pictureLayout"
+              v-model="chooseStation"
-              :options="options"
+              :options="stationOptions"
+              style="width: 220px"
             />
           </div>
           <div class="video-control-item">
@@ -30,8 +39,9 @@
               dense
               outlined
               disable
-              v-model="pictureLayout"
+              v-model="chooseTrain"
-              :options="options"
+              :options="trainOptions"
+              style="width: 220px"
             />
           </div>
           <div class="video-control-item">
@@ -39,80 +49,293 @@
             <q-select
               dense
               outlined
-              v-model="pictureLayout"
+              v-model="chooseCamera"
-              :options="options"
+              :options="cameraOptions"
+              emit-value
+              map-options
+              options-dense
+              style="width: 205px"
             />
           </div>
-          <div>
+          <q-separator />
+          <div class="mode-handle">
             <div>模式操作</div>
             <div class="video-control-item">
-              <div>显示模式操作：</div>
+              <div>显示模式选择：</div>
               <q-select
                 dense
                 outlined
-                v-model="pictureLayout"
+                v-model="chooseDisplayMode"
-                :options="options"
+                :options="displayModeOptions"
+                style="width: 190px"
               />
             </div>
-            <div class="q-gutter-sm">
+            <div class="display-mode-button">
-              <q-btn label="新增" color="white" text-color="black" />
+              <q-btn
-              <q-btn label="删除" color="white" text-color="black" />
+                class="btn-padding"
+                label="新增"
+                color="white"
+                text-color="black"
+              />
+              <q-btn
+                class="btn-padding"
+                label="删除"
+                color="white"
+                text-color="black"
+              />
             </div>
-            <div class="video-control-item">
+            <div class="video-control-item poll-mode">
-              <div>轮询模式操作：</div>
+              <div>轮询模式选择：</div>
               <q-select
                 dense
                 outlined
-                v-model="pictureLayout"
+                v-model="choosePollMode"
-                :options="options"
+                :options="pollModeOptions"
+                style="width: 190px"
               />
             </div>
-            <div class="q-gutter-sm">
+            <div class="poll-mode-button">
-              <q-btn label="启动" color="white" text-color="black" />
+              <q-btn
-              <q-btn label="停止" color="white" text-color="black" />
+                class="btn-padding"
-              <q-btn label="新增" color="white" text-color="black" />
+                label="启动"
-              <q-btn label="修改" color="white" text-color="black" />
+                color="white"
-              <q-btn label="删除" color="white" text-color="black" />
+                text-color="black"
+              />
+              <q-btn
+                class="btn-padding"
+                label="停止"
+                color="white"
+                text-color="black"
+              />
+              <q-btn
+                class="btn-padding"
+                label="新增"
+                color="white"
+                text-color="black"
+              />
+              <q-btn
+                class="btn-padding"
+                label="修改"
+                color="white"
+                text-color="black"
+              />
+              <q-btn
+                class="btn-padding"
+                label="删除"
+                color="white"
+                text-color="black"
+              />
             </div>
           </div>
+          <q-separator />
           <div>
             <div>预置位管理</div>
+            <div class="preset-manage">
               <div class="video-control-item">
                 <div>预置位选择：</div>
                 <q-select
                   dense
                   outlined
-                v-model="pictureLayout"
+                  v-model="choosePresetPosition"
-                :options="options"
+                  :options="presetPositionOptions"
+                  style="width: 175px"
                 />
               </div>
               <div class="video-control-item">
                 <div>预置位名称：</div>
-              <q-input dense outlined v-model="presetPositionName" />
+                <q-input
+                  dense
+                  outlined
+                  v-model="presetPositionName"
+                  style="width: 175px"
+                />
               </div>
-            <div class="q-gutter-sm">
+              <div class="perset-button">
-              <q-btn label="保存" color="white" text-color="black" />
+                <q-btn
-              <q-btn label="重命名" color="white" text-color="black" />
+                  class="btn-padding"
-              <q-btn label="删除" color="white" text-color="black" />
+                  label="保存"
+                  color="white"
+                  text-color="black"
+                />
+                <q-btn
+                  class="btn-padding"
+                  label="重命名"
+                  color="white"
+                  text-color="black"
+                />
+                <q-btn
+                  class="btn-padding"
+                  label="删除"
+                  color="white"
+                  text-color="black"
+                />
               </div>
             </div>
           </div>
         </div>
-      <div>云台控制</div>
+      </div>
+      <q-separator />
+      <div class="ptz-control">云台控制</div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
+import { CCTV_Camera_name } from 'src/configs/cctvCamera';
 
 const props = defineProps<{
   stationName: string;
 }>();
 
 const pictureLayout = ref('2x2');
-const options = ['1x1', '2x2'];
+const pictureLayoutOtions = ['1x1', '2x2'];
+const chooseStation = ref('');
+const stationOptions = [];
+const chooseTrain = ref('');
+const trainOptions = [];
+const chooseCamera = ref(0);
+const cameraOptions = [
+  {
+    label: '备品柜',
+    value: CCTV_Camera_name.SparePartsCabinet,
+  },
+  {
+    label: '备品区',
+    value: CCTV_Camera_name.PartsArea,
+  },
+  {
+    label: '站厅',
+    value: CCTV_Camera_name.StationHall,
+  },
+  {
+    label: '上行站台',
+    value: CCTV_Camera_name.UpPlatform,
+  },
+  {
+    label: '下行站台',
+    value: CCTV_Camera_name.DownPlatform,
+  },
+  {
+    label: '站厅A出口',
+    value: CCTV_Camera_name.StationHallAExit,
+  },
+  {
+    label: 'A入口',
+    value: CCTV_Camera_name.AEntrance,
+  },
+  {
+    label: 'A口通道',
+    value: CCTV_Camera_name.APassage,
+  },
+  {
+    label: '站厅B出口',
+    value: CCTV_Camera_name.StationHallBExit,
+  },
+  {
+    label: 'B入口',
+    value: CCTV_Camera_name.BEntrance,
+  },
+  {
+    label: 'B口通道',
+    value: CCTV_Camera_name.BPassage,
+  },
+  {
+    label: '站厅C出口',
+    value: CCTV_Camera_name.StationHallCExit,
+  },
+  {
+    label: 'C入口',
+    value: CCTV_Camera_name.CEntrance,
+  },
+  {
+    label: 'C口通道',
+    value: CCTV_Camera_name.CPassage,
+  },
+  {
+    label: '站厅D出口',
+    value: CCTV_Camera_name.StationHallDExit,
+  },
+  {
+    label: 'D入口',
+    value: CCTV_Camera_name.DEntrance,
+  },
+  {
+    label: 'D口通道',
+    value: CCTV_Camera_name.DPassage,
+  },
+  {
+    label: 'A端扶梯下部开关',
+    value: CCTV_Camera_name.ALowerStepSwitch,
+  },
+  {
+    label: 'A端TVM',
+    value: CCTV_Camera_name.ATVM,
+  },
+  {
+    label: 'A端进站闸机',
+    value: CCTV_Camera_name.AInboundGate,
+  },
+  {
+    label: 'A端出站闸机',
+    value: CCTV_Camera_name.AExitGate,
+  },
+  {
+    label: 'A端扶梯上部',
+    value: CCTV_Camera_name.AUpperStep,
+  },
+  {
+    label: 'A端扶梯下部',
+    value: CCTV_Camera_name.ALowerStep,
+  },
+  {
+    label: 'A端站厅步梯口',
+    value: CCTV_Camera_name.AGangway,
+  },
+  {
+    label: 'B端扶梯下部开关',
+    value: CCTV_Camera_name.BLowerStepSwitch,
+  },
+  {
+    label: 'B端TVM',
+    value: CCTV_Camera_name.BTVM,
+  },
+  {
+    label: 'B端进站闸机',
+    value: CCTV_Camera_name.BInboundGate,
+  },
+  {
+    label: 'B端出站闸机',
+    value: CCTV_Camera_name.BExitGate,
+  },
+  {
+    label: 'B端扶梯上部',
+    value: CCTV_Camera_name.BUpperStep,
+  },
+  {
+    label: 'B端扶梯下部',
+    value: CCTV_Camera_name.BLowerStep,
+  },
+  {
+    label: 'B端站厅步梯口',
+    value: CCTV_Camera_name.BGangway,
+  },
+  {
+    label: '商铺',
+    value: CCTV_Camera_name.Shop,
+  },
+];
+const chooseDisplayMode = ref('');
+const displayModeOptions = [];
+const choosePollMode = ref('');
+const pollModeOptions = [];
+const choosePresetPosition = ref('');
+const presetPositionOptions = [];
 const presetPositionName = ref('');
+
+onMounted(() => {
+  chooseStation.value = props.stationName;
+});
 </script>
 
 <style lang="scss" scoped>
@@ -124,18 +347,54 @@ const presetPositionName = ref('');
   font-size: 28px;
 }
 .monitoring-layout {
-  width: 370px;
+  width: 320px;
   background-color: white;
-  .video-control {
+  .video-control-text {
-    padding: 10px;
+    margin-left: 5px;
-    .video-text {
     font-size: 16px;
+    font-weight: 600;
   }
+  .video-control-content {
+    margin-bottom: 8px;
+    padding: 0 15px;
     .video-control-item {
       display: flex;
       align-items: center;
       margin-bottom: 20px;
     }
+    .mode-handle {
+      margin-bottom: 10px;
+      .display-mode-button {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 45px;
+      }
+      .poll-mode {
+        margin-top: 10px;
+      }
+      .poll-mode-button {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+    }
+    .preset-manage {
+      margin-left: 28px;
+    }
+    .perset-button {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+  .ptz-control {
+    margin-left: 5px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+  .btn-padding {
+    padding: 0px 10px;
   }
 }
 </style>

src/configs/cctvCamera.ts

@@ -0,0 +1,41 @@
+export enum CCTV_Camera_name{
+	//VehicleControlRoom,//车控室
+	SparePartsCabinet,//备品柜
+	PartsArea,//备品区
+	StationHall,//站厅
+	UpPlatform,//上行站台
+	DownPlatform,//下行站台
+	//APassageway,//A出入口
+	StationHallAExit,//站厅A出口
+	AEntrance,//A入口
+	APassage,//A口通道
+	//BPassageway,//B出入口
+	StationHallBExit,//站厅B出口
+	BEntrance,//B入口
+	BPassage,//B口通道
+	//CPassageway,//C出入口
+	StationHallCExit,//站厅C出口
+	CEntrance,//C入口
+	CPassage,//C口通道
+	//DPassageway,//D出入口
+	StationHallDExit,//站厅D出口
+	DEntrance,//D入口
+	DPassage,//D口通道
+	//StaionHallA,//站厅A端
+	ALowerStepSwitch,//A端扶梯下部开关
+	ATVM,//A端TVM
+	AInboundGate,//A端进站闸机
+	AExitGate,//A端出站闸机
+	AUpperStep,//A端扶梯上部
+	ALowerStep,//A端扶梯下部
+	AGangway,//A端站厅步梯口
+	//StationHallB,//站厅B端
+	BLowerStepSwitch,//B端扶梯下部开关
+	BTVM,//B端TVM
+	BInboundGate,//B端进站闸机
+	BExitGate,//B端出站闸机
+	BUpperStep,//B端扶梯上部
+	BLowerStep,//B端扶梯下部
+	BGangway,//B端站厅步梯口
+	Shop,//商铺
+}

src/layouts/IscsDrawLayout.vue

@@ -155,7 +155,7 @@
         id="component-container"
       >
         <q-scroll-area
-          :style="`width: ${showComponent.width}px;height: ${showComponent.height}px`"
+          :style="`width: ${showComponent.width}px;height: ${showComponent.height}px;background-color: #c8d0f1;`"
         >
           <div class="show-component">
             <cCTV-monitoring
@@ -1019,7 +1019,6 @@ onUnmounted(() => {
 .show-component {
   display: flex;
   justify-content: center;
-  background-color: #c8d0f1;
   overflow: auto;
 }
 </style>