|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div class="konva-map" ref="konvaMapRef">
|
|
|
<v-stage ref="stageAll" :config="stageConfig" @click="handleStageClick">
|
|
|
<v-layer ref="layer">
|
|
|
<v-image :config="bgConfig" v-show="bgImgUrl" />
|
|
|
@@ -16,18 +16,19 @@
|
|
|
:style="{ position: 'absolute', left: posX + 'px', top: posY + 'px' }">
|
|
|
<div class="opt-item" :class="{ disabled: disabledSet }" @click="setDefaultCamera">设为默认相机</div>
|
|
|
<div class="opt-item" @click="previewCamera">预览相机</div>
|
|
|
+ <div class="opt-item" @click="handleDeleteLabel">删除标签</div>
|
|
|
</div>
|
|
|
|
|
|
<CameraPreview v-if="isShow" :last-pos-x="posX!" :last-pos-y="posY!" :video-url="videoUrl" @close="closePreview" />
|
|
|
|
|
|
- <DefaultTip v-show="tipShow" :position="pos"
|
|
|
+ <DefaultTip v-show="selectCameraId" :position="pos" :is-default="isDefaultCamera" :camera-info="cameraInfo"
|
|
|
:style="{ position: 'absolute', left: posTipX + 'px', top: posTipY + 'px' }" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
|
|
|
-import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
+import { ref, onMounted, watch } from 'vue';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
import DefaultTip from '../components/DefaultTip.vue';
|
|
|
import cameraImgSrc from '@/assets/camera/cameraImg.png';
|
|
|
import favoritesImgSrc from '@/assets/camera/favorites.png';
|
|
|
@@ -38,6 +39,7 @@ import { cloneDeep } from 'lodash-es';
|
|
|
import { updateMinMapViewLayoutApi } from '@/api/scene/scene';
|
|
|
import CameraPreview from './CameraPreview.vue';
|
|
|
import { ShopMapCamera } from '@/types/scene/type'
|
|
|
+import { openMessageBox } from '@/views/system-config/business-scene/components/MessageBox';
|
|
|
|
|
|
// const miniMap = useMiniMap();
|
|
|
// const { shopCameraList } = storeToRefs(miniMap);
|
|
|
@@ -67,10 +69,11 @@ const lastClickedGroupId = ref<string | null>(null);
|
|
|
const lastClickedVideoUrl = ref<string | null>(null);
|
|
|
|
|
|
const bgImgUrl = ref<string | null>('');
|
|
|
+const cameraInfo = ref<camerasGroupType>();
|
|
|
const cameras = ref<camerasGroupType[]>([]);
|
|
|
//默认相机id
|
|
|
const defaultCameraId = ref('');
|
|
|
-const tipShow = ref(false);
|
|
|
+const isDefaultCamera = ref(false);
|
|
|
const disabledSet = ref(false);
|
|
|
const videoUrl = ref<string>('');
|
|
|
|
|
|
@@ -124,7 +127,8 @@ const defaultIconConfig = ref({
|
|
|
id: 'defaultIcon',
|
|
|
image: favoritesImg,
|
|
|
});
|
|
|
-
|
|
|
+//选中相机的id
|
|
|
+const selectCameraId = ref();
|
|
|
//取消
|
|
|
const handleMouseOver = (e) => {
|
|
|
document.oncontextmenu = () => {
|
|
|
@@ -132,32 +136,37 @@ const handleMouseOver = (e) => {
|
|
|
};
|
|
|
|
|
|
const group = e.target.parent;
|
|
|
- if (group.id() === defaultCameraId.value) {
|
|
|
- tipShow.value = true;
|
|
|
- const stage = transformer.value.getNode().getStage();
|
|
|
- const defaultNode = stage.findOne('#defaultIcon');
|
|
|
- const tipPosition = defaultNode.absolutePosition();
|
|
|
- posTipX.value = Number(tipPosition?.x.toFixed(2)) || 0;
|
|
|
- posTipY.value = Number(tipPosition?.y.toFixed(2)) || 0;
|
|
|
- const angle = group.rotation() >= 0 ? group.rotation() : group.rotation() + 360;
|
|
|
- if (angle >= 30) {
|
|
|
- if (angle <= 150) {
|
|
|
- pos.value = TipPositionEnum.RIGHT;
|
|
|
- posTipX.value += 26;
|
|
|
- posTipY.value -= 17;
|
|
|
- } else if (angle <= 210) {
|
|
|
- pos.value = TipPositionEnum.BOTTOM;
|
|
|
- posTipY.value += 26;
|
|
|
- posTipX.value -= 50;
|
|
|
- } else {
|
|
|
- pos.value = TipPositionEnum.LEFT;
|
|
|
- posTipX.value -= 121;
|
|
|
- posTipY.value -= 25;
|
|
|
- }
|
|
|
+ selectCameraId.value = group.id();
|
|
|
+ cameraInfo.value = cameras.value.find((camera) => camera.id === selectCameraId.value)
|
|
|
+ let defaultNode;
|
|
|
+ const stage = transformer.value.getNode().getStage();
|
|
|
+ if (selectCameraId.value === defaultCameraId.value) {
|
|
|
+ isDefaultCamera.value = true;
|
|
|
+ defaultNode = stage.findOne('#defaultIcon');
|
|
|
+ } else {
|
|
|
+ defaultNode = stage.findOne(`#${selectCameraId.value}`);
|
|
|
+ }
|
|
|
+ const tipPosition = defaultNode.absolutePosition();
|
|
|
+ posTipX.value = Number(tipPosition?.x.toFixed(2)) || 0;
|
|
|
+ posTipY.value = Number(tipPosition?.y.toFixed(2)) || 0;
|
|
|
+ const angle = group.rotation() >= 0 ? group.rotation() : group.rotation() + 360;
|
|
|
+ if (angle >= 30) {
|
|
|
+ if (angle <= 150) {
|
|
|
+ pos.value = TipPositionEnum.RIGHT;
|
|
|
+ posTipX.value += 26;
|
|
|
+ posTipY.value -= 17;
|
|
|
+ } else if (angle <= 210) {
|
|
|
+ pos.value = TipPositionEnum.BOTTOM;
|
|
|
+ posTipY.value += 26;
|
|
|
+ posTipX.value -= 50;
|
|
|
} else {
|
|
|
- posTipY.value -= 61;
|
|
|
- posTipX.value -= 43;
|
|
|
+ pos.value = TipPositionEnum.LEFT;
|
|
|
+ posTipX.value -= 121;
|
|
|
+ posTipY.value -= 25;
|
|
|
}
|
|
|
+ } else {
|
|
|
+ posTipY.value -= 80;
|
|
|
+ posTipX.value -= 43;
|
|
|
}
|
|
|
};
|
|
|
// 还原浏览器默认鼠标事件
|
|
|
@@ -165,11 +174,12 @@ const handleMouseLeave = () => {
|
|
|
document.oncontextmenu = () => {
|
|
|
return true;
|
|
|
};
|
|
|
- tipShow.value = false;
|
|
|
+ isDefaultCamera.value = false;
|
|
|
+ selectCameraId.value = null;
|
|
|
};
|
|
|
|
|
|
const handleDragStart = () => {
|
|
|
- tipShow.value = false;
|
|
|
+ isDefaultCamera.value = false;
|
|
|
emit('change', true);
|
|
|
};
|
|
|
|
|
|
@@ -213,7 +223,7 @@ const handleStageClick = (e: any) => {
|
|
|
};
|
|
|
|
|
|
const handleCameraClick = (camera) => {
|
|
|
- tipShow.value = false;
|
|
|
+ isDefaultCamera.value = false;
|
|
|
const transformerNode = transformer.value.getNode();
|
|
|
const stage = transformerNode.getStage();
|
|
|
const cameraNode = stage.findOne('#' + camera.id);
|
|
|
@@ -353,7 +363,6 @@ const saveLayout = () => {
|
|
|
item.groupConfig.rotation = groups[index].attrs.rotation || 0;
|
|
|
item.groupConfig.scaleX = groups[index].attrs.scaleX || 1;
|
|
|
item.groupConfig.scaleY = groups[index].attrs.scaleY || 1;
|
|
|
- // item.config.url = cameraImgSrc;
|
|
|
return item;
|
|
|
});
|
|
|
const layout = {
|
|
|
@@ -366,42 +375,31 @@ const saveLayout = () => {
|
|
|
emit('change', false);
|
|
|
return JSON.stringify(layout);
|
|
|
};
|
|
|
-
|
|
|
-//删除相机
|
|
|
-const handleKeyDown = (e) => {
|
|
|
- if (e.keyCode === 46 || e.code === 'Delete' || e.keyCode === 8 || e.code === 'Backspace') {
|
|
|
- if (lastClickedGroupId.value === defaultCameraId.value) {
|
|
|
- // ElMessage.error({
|
|
|
- // message: '无法删除默认相机',
|
|
|
- // });
|
|
|
- // return;
|
|
|
- ElMessageBox.confirm('此相机为默认相机,您确认要删除此相机?', 'Warning', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- const index = cameras.value.findIndex((item) => item.id === lastClickedGroupId.value);
|
|
|
- index >= 0 && cameras.value.splice(index, 1);
|
|
|
- lastClickedGroupId.value = '';
|
|
|
-
|
|
|
- //取消transformer
|
|
|
- const transformerNode = transformer.value.getNode();
|
|
|
- transformerNode.nodes([]);
|
|
|
- })
|
|
|
- .catch(() => { });
|
|
|
- } else {
|
|
|
- const index = cameras.value.findIndex((item) => item.id === lastClickedGroupId.value);
|
|
|
- index >= 0 && cameras.value.splice(index, 1);
|
|
|
- lastClickedGroupId.value = '';
|
|
|
-
|
|
|
- //取消transformer
|
|
|
- const transformerNode = transformer.value.getNode();
|
|
|
- transformerNode.nodes([]);
|
|
|
- }
|
|
|
- emit('change', true);
|
|
|
+const deleteLabelFn = () => {
|
|
|
+ const index = cameras.value.findIndex((item) => item.id === lastClickedGroupId.value);
|
|
|
+ index >= 0 && cameras.value.splice(index, 1);
|
|
|
+ lastClickedGroupId.value = '';
|
|
|
+ //取消transformer
|
|
|
+ const transformerNode = transformer.value.getNode();
|
|
|
+ transformerNode.nodes([]);
|
|
|
+ if (!defaultShow.value) return;
|
|
|
+ defaultShow.value = false;
|
|
|
+}
|
|
|
+const handleDeleteLabel = () => {
|
|
|
+ if (lastClickedGroupId.value === defaultCameraId.value) {
|
|
|
+ openMessageBox('警告', '此相机为默认相机,您确认要删除此相机?', deleteLabelFn)
|
|
|
+ } else {
|
|
|
+ deleteLabelFn();
|
|
|
+ ElMessage.success('删除成功!')
|
|
|
}
|
|
|
-};
|
|
|
+ emit('change', true);
|
|
|
+}
|
|
|
+//删除相机
|
|
|
+// const handleKeyDown = (e) => {
|
|
|
+// if (e.keyCode === 46 || e.code === 'Delete' || e.keyCode === 8 || e.code === 'Backspace') {
|
|
|
+// handleDeleteLabel();
|
|
|
+// }
|
|
|
+// };
|
|
|
|
|
|
//重置
|
|
|
const resetMap = () => {
|
|
|
@@ -471,11 +469,6 @@ defineExpose({
|
|
|
});
|
|
|
onMounted(() => {
|
|
|
camImg.src = cameraImgSrc;
|
|
|
- window.addEventListener('keydown', handleKeyDown);
|
|
|
-});
|
|
|
-
|
|
|
-onBeforeUnmount(() => {
|
|
|
- window.removeEventListener('keydown', handleKeyDown);
|
|
|
});
|
|
|
</script>
|
|
|
|