joylink
/
rtsa-client
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

绘制组件调整

This commit is contained in:
joylink_zhaoerwei 2024-10-18 16:21:27 +08:00
parent 124c9a2784
commit d16bedfbf4
3 changed files with 353 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

363
src/components/Iscs/CCTVMonitoring.vue
View File

@ -2,8 +2,8 @@
<div>
<div class="monitoring-title">{{ props.stationName }}摄像头监控</div>
<div class="monitoring-layout">
<div class="video-control">
<div class="video-text">视频控制</div>
<div class="video-control-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"
:options="options"
v-model="chooseStation"
:options="stationOptions"
style="width: 220px"
/>
</div>
<div class="video-control-item">
@ -30,8 +39,9 @@
dense
outlined
disable
v-model="pictureLayout"
:options="options"
v-model="chooseTrain"
:options="trainOptions"
style="width: 220px"
/>
</div>
<div class="video-control-item">
@ -39,80 +49,293 @@
<q-select
dense
outlined
v-model="pictureLayout"
:options="options"
v-model="chooseCamera"
: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"
:options="options"
v-model="chooseDisplayMode"
:options="displayModeOptions"
style="width: 190px"
/>
</div>
<div class="q-gutter-sm">
<q-btn label="新增" color="white" text-color="black" />
<q-btn label="删除" color="white" text-color="black" />
<div class="display-mode-button">
<q-btn
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>轮询模式操作：</div>
<div class="video-control-item poll-mode">
<div>轮询模式选择：</div>
<q-select
dense
outlined
v-model="pictureLayout"
:options="options"
v-model="choosePollMode"
:options="pollModeOptions"
style="width: 190px"
/>
</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 class="poll-mode-button">
<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"
/>
<q-btn
class="btn-padding"
label="删除"
color="white"
text-color="black"
/>
</div>
</div>
<q-separator />
<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 class="preset-manage">
<div class="video-control-item">
<div>预置位选择：</div>
<q-select
dense
outlined
v-model="choosePresetPosition"
:options="presetPositionOptions"
style="width: 175px"
/>
</div>
<div class="video-control-item">
<div>预置位名称：</div>
<q-input
dense
outlined
v-model="presetPositionName"
style="width: 175px"
/>
</div>
<div class="perset-button">
<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>
</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 {
padding: 10px;
.video-text {
font-size: 16px;
}
.video-control-text {
margin-left: 5px;
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>

41
src/configs/cctvCamera.ts Normal file
View File

@ -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,//商铺
}

3
src/layouts/IscsDrawLayout.vue
View File

@ -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>