|
|
@@ -2,29 +2,40 @@
|
|
|
<el-dialog
|
|
|
v-model="dialogVisible"
|
|
|
width="719"
|
|
|
- :title="`预览-${overviewCameraData.name}`"
|
|
|
center
|
|
|
align-center
|
|
|
class="camera-overview-popover--custom"
|
|
|
:close-on-click-modal="false"
|
|
|
@close="emits('update:dialogVisible', false)"
|
|
|
>
|
|
|
+ <template #title>
|
|
|
+ <div class="camera-overview-popover--custom__title">
|
|
|
+ <span>预览-{{ overviewCameraData.name }}</span>
|
|
|
+ <img :src="FullScreenIcon" alt="全屏" @click="toggle" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
<div class="camera-overview-popover--custom__content">
|
|
|
- <main class="main">
|
|
|
- <div class="cameraVideo">
|
|
|
+ <main class="main" ref="videoContainerRef">
|
|
|
+ <div class="cameraVideo" ref="cameraVideoRef">
|
|
|
<CameraLiveVideo ref="cameraLiveVideoRef" />
|
|
|
</div>
|
|
|
<div class="presetAddWrapper" v-if="!!overviewCameraData.isPtz">
|
|
|
<CameraViewScale @update:ControlPerspective="activePresetToken = ''" />
|
|
|
<CameraDirectionControl @update:ControlPerspective="activePresetToken = ''" />
|
|
|
- <ElButton type="primary" style="margin-top: 20px; width: 100px" @click="handleAddPreset" v-show="displayPresetList.length < 10">添加预置位</ElButton>
|
|
|
+ <ElButton
|
|
|
+ type="primary"
|
|
|
+ style="margin-top: 20px; width: 100px"
|
|
|
+ @click="handleAddPreset"
|
|
|
+ v-show="displayPresetList.length < 10"
|
|
|
+ >添加预置位</ElButton
|
|
|
+ >
|
|
|
</div>
|
|
|
</main>
|
|
|
<footer class="footer" v-if="!!overviewCameraData.isPtz && presetList.length > 0">
|
|
|
<div class="footer-header">
|
|
|
<div class="edit-preset-position-icon-wrapper" @click="toggleEditMode">
|
|
|
<img :src="isEditMode ? EditPresetPositionFocusIcon : EditPresetPositionIcon" alt="编辑预置位" />
|
|
|
- <span v-show="isEditMode">完成编辑</span>
|
|
|
+ <span v-show="isEditMode">退出编辑</span>
|
|
|
</div>
|
|
|
<div class="pagination-control" v-if="displayPresetList.length > 0">
|
|
|
<el-button type="text" :disabled="currentPage === 1" @click="prevPage" :icon="ArrowLeft" />
|
|
|
@@ -52,7 +63,10 @@
|
|
|
class="delete-preset-position-icon"
|
|
|
@click="handleDeletePreset(item)"
|
|
|
/>
|
|
|
- <span class="preset-position-name">{{ item.presetName }}</span>
|
|
|
+ <span class="preset-position-name" v-if="item.presetName.length < 8">{{ item.presetName }}</span>
|
|
|
+ <el-tooltip :content="item.presetName" placement="bottom" v-else>
|
|
|
+ <span class="preset-position-name">{{ item.presetName }}</span>
|
|
|
+ </el-tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
@@ -68,6 +82,7 @@
|
|
|
import DeletePresetPositionIcon from '@/assets/icons/delete-preset-position.svg';
|
|
|
import PresetPositionItem from '@/assets/icons/preset-placeholder-img.svg';
|
|
|
import EditPresetPositionFocusIcon from '@/assets/icons/edit-preset-position-focus.svg';
|
|
|
+ import FullScreenIcon from '@/assets/icons/fullscreen.svg';
|
|
|
import { dataURLtoBlob } from '@/utils/file/base64Conver';
|
|
|
import {
|
|
|
getPresetListApi,
|
|
|
@@ -81,6 +96,7 @@
|
|
|
import CameraViewScale from '@/modules/algo-params-setting-base/components/CameraViewSetting/CameraViewScale.vue';
|
|
|
import CameraDirectionControl from '@/modules/algo-params-setting-base/components/CameraDirectionControl/CameraDirectionControl.vue';
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
+ import { useFullscreen } from '@vueuse/core';
|
|
|
|
|
|
const emits = defineEmits(['update:dialogVisible']);
|
|
|
const dialogVisible = ref(false);
|
|
|
@@ -88,7 +104,9 @@
|
|
|
const displayPresetList = ref<PresetListResp[]>([]);
|
|
|
const isEditMode = ref(false);
|
|
|
const activePresetToken = ref<string>(''); // 当前激活的预置位token
|
|
|
- const cameraLiveVideoRef = ref<InstanceType<typeof CameraLiveVideo> | null>(null); // 添加对CameraLiveVideo的引用并指定正确类型
|
|
|
+ const cameraLiveVideoRef = ref<InstanceType<typeof CameraLiveVideo> | null>(null);
|
|
|
+ const cameraVideoRef = ref<HTMLElement>();
|
|
|
+ const { toggle } = useFullscreen(cameraVideoRef);
|
|
|
|
|
|
const props = defineProps<{
|
|
|
dialogVisible: boolean;
|
|
|
@@ -190,6 +208,7 @@
|
|
|
}
|
|
|
const res = await createPresetApi({ presetName: value, cameraId, imageUrl: url.url });
|
|
|
if (res) {
|
|
|
+ activePresetToken.value = res;
|
|
|
ElMessage.success('添加预置位成功');
|
|
|
await getPresetList();
|
|
|
}
|
|
|
@@ -232,6 +251,14 @@
|
|
|
font-weight: bold;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
+ &__title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ img {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
&__content {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -286,28 +313,12 @@
|
|
|
width: 120px;
|
|
|
position: relative;
|
|
|
transition: all 0.3s ease;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
&.active-preset {
|
|
|
transform: scale(1.05);
|
|
|
- box-shadow: 0 0 8px 2px rgba(24, 144, 255, 0.6);
|
|
|
+ border: 2px solid #1890ff;
|
|
|
border-radius: 4px;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border: 2px solid #1890ff;
|
|
|
- border-radius: 4px;
|
|
|
- box-sizing: border-box;
|
|
|
- pointer-events: none;
|
|
|
- }
|
|
|
-
|
|
|
- .preset-position-name {
|
|
|
- background: rgba(24, 144, 255, 0.8);
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.delete-preset-position-icon {
|
|
|
@@ -330,12 +341,16 @@
|
|
|
}
|
|
|
|
|
|
.preset-position-name {
|
|
|
- color: #fff;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 4px;
|
|
|
+ color: rgba(0, 0, 0, 0.88);
|
|
|
font-size: 12px;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
padding: 2px 4px;
|
|
|
border-radius: 2px;
|
|
|
- transition: all 0.3s ease;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
}
|
|
|
}
|
chauncey