绘制组件调整
This commit is contained in:
parent
124c9a2784
commit
d16bedfbf4
|
@ -2,8 +2,8 @@
|
||||||
<div>
|
<div>
|
||||||
<div class="monitoring-title">{{ props.stationName }}摄像头监控</div>
|
<div class="monitoring-title">{{ props.stationName }}摄像头监控</div>
|
||||||
<div class="monitoring-layout">
|
<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>
|
||||||
<div class="video-control-item">
|
<div class="video-control-item">
|
||||||
<div>画面布局:</div>
|
<div>画面布局:</div>
|
||||||
|
@ -11,7 +11,15 @@
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
v-model="pictureLayout"
|
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>
|
||||||
<div class="video-control-item">
|
<div class="video-control-item">
|
||||||
|
@ -20,8 +28,9 @@
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
disable
|
disable
|
||||||
v-model="pictureLayout"
|
v-model="chooseStation"
|
||||||
:options="options"
|
:options="stationOptions"
|
||||||
|
style="width: 220px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="video-control-item">
|
<div class="video-control-item">
|
||||||
|
@ -30,8 +39,9 @@
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
disable
|
disable
|
||||||
v-model="pictureLayout"
|
v-model="chooseTrain"
|
||||||
:options="options"
|
:options="trainOptions"
|
||||||
|
style="width: 220px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="video-control-item">
|
<div class="video-control-item">
|
||||||
|
@ -39,80 +49,293 @@
|
||||||
<q-select
|
<q-select
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
v-model="pictureLayout"
|
v-model="chooseCamera"
|
||||||
:options="options"
|
:options="cameraOptions"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
options-dense
|
||||||
|
style="width: 205px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<q-separator />
|
||||||
|
<div class="mode-handle">
|
||||||
<div>模式操作</div>
|
<div>模式操作</div>
|
||||||
<div class="video-control-item">
|
<div class="video-control-item">
|
||||||
<div>显示模式操作:</div>
|
<div>显示模式选择:</div>
|
||||||
<q-select
|
<q-select
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
v-model="pictureLayout"
|
v-model="chooseDisplayMode"
|
||||||
:options="options"
|
:options="displayModeOptions"
|
||||||
|
style="width: 190px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
||||||
<div class="video-control-item">
|
<div class="video-control-item poll-mode">
|
||||||
<div>轮询模式操作:</div>
|
<div>轮询模式选择:</div>
|
||||||
<q-select
|
<q-select
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
v-model="pictureLayout"
|
v-model="choosePollMode"
|
||||||
:options="options"
|
:options="pollModeOptions"
|
||||||
|
style="width: 190px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
<q-separator />
|
||||||
<div>
|
<div>
|
||||||
<div>预置位管理</div>
|
<div>预置位管理</div>
|
||||||
<div class="video-control-item">
|
<div class="preset-manage">
|
||||||
<div>预置位选择:</div>
|
<div class="video-control-item">
|
||||||
<q-select
|
<div>预置位选择:</div>
|
||||||
dense
|
<q-select
|
||||||
outlined
|
dense
|
||||||
v-model="pictureLayout"
|
outlined
|
||||||
:options="options"
|
v-model="choosePresetPosition"
|
||||||
/>
|
:options="presetPositionOptions"
|
||||||
</div>
|
style="width: 175px"
|
||||||
<div class="video-control-item">
|
/>
|
||||||
<div>预置位名称:</div>
|
</div>
|
||||||
<q-input dense outlined v-model="presetPositionName" />
|
<div class="video-control-item">
|
||||||
</div>
|
<div>预置位名称:</div>
|
||||||
<div class="q-gutter-sm">
|
<q-input
|
||||||
<q-btn label="保存" color="white" text-color="black" />
|
dense
|
||||||
<q-btn label="重命名" color="white" text-color="black" />
|
outlined
|
||||||
<q-btn label="删除" color="white" text-color="black" />
|
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>
|
||||||
</div>
|
</div>
|
||||||
<div>云台控制</div>
|
<q-separator />
|
||||||
|
<div class="ptz-control">云台控制</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { CCTV_Camera_name } from 'src/configs/cctvCamera';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
stationName: string;
|
stationName: string;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const pictureLayout = ref('2x2');
|
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('');
|
const presetPositionName = ref('');
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
chooseStation.value = props.stationName;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@ -124,18 +347,54 @@ const presetPositionName = ref('');
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
}
|
}
|
||||||
.monitoring-layout {
|
.monitoring-layout {
|
||||||
width: 370px;
|
width: 320px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
.video-control {
|
.video-control-text {
|
||||||
padding: 10px;
|
margin-left: 5px;
|
||||||
.video-text {
|
font-size: 16px;
|
||||||
font-size: 16px;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
.video-control-content {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding: 0 15px;
|
||||||
.video-control-item {
|
.video-control-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 20px;
|
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>
|
</style>
|
||||||
|
|
|
@ -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,//商铺
|
||||||
|
}
|
|
@ -155,7 +155,7 @@
|
||||||
id="component-container"
|
id="component-container"
|
||||||
>
|
>
|
||||||
<q-scroll-area
|
<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">
|
<div class="show-component">
|
||||||
<cCTV-monitoring
|
<cCTV-monitoring
|
||||||
|
@ -1019,7 +1019,6 @@ onUnmounted(() => {
|
||||||
.show-component {
|
.show-component {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: #c8d0f1;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue