|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="min-map">
|
|
<div class="min-map">
|
|
|
<header class="min-map__header">
|
|
<header class="min-map__header">
|
|
|
- <section class="min-map__btn" @click="router.back">
|
|
|
|
|
|
|
+ <section class="min-map__btn" @click="handleBack">
|
|
|
<img :src="rollback">
|
|
<img :src="rollback">
|
|
|
<span>返回</span>
|
|
<span>返回</span>
|
|
|
</section>
|
|
</section>
|
|
@@ -15,7 +15,7 @@
|
|
|
:disabled="!hasBg">
|
|
:disabled="!hasBg">
|
|
|
重置布局
|
|
重置布局
|
|
|
</el-button>
|
|
</el-button>
|
|
|
- <el-button @click="handleSave" type="primary"><img :src="SaveIcon">保存为布局</el-button>
|
|
|
|
|
|
|
+ <el-button @click="handleSave" type="primary">保存</el-button>
|
|
|
</section>
|
|
</section>
|
|
|
</header>
|
|
</header>
|
|
|
|
|
|
|
@@ -58,13 +58,12 @@
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { ElMessage, ElInput, ElMessageBox } from 'element-plus';
|
|
import { ElMessage, ElInput, ElMessageBox } from 'element-plus';
|
|
|
import { Search, Refresh, UploadFilled } from '@element-plus/icons-vue';
|
|
import { Search, Refresh, UploadFilled } from '@element-plus/icons-vue';
|
|
|
-import SaveIcon from '@/assets/images/camera/save.png'
|
|
|
|
|
import rollback from '@/assets/rollback.png'
|
|
import rollback from '@/assets/rollback.png'
|
|
|
import { onMounted, onUnmounted, ref, computed, reactive, nextTick } from 'vue';
|
|
import { onMounted, onUnmounted, ref, computed, reactive, nextTick } from 'vue';
|
|
|
import { updateMinMapViewLayoutApi, getCamerasByWorkShopId, getWorkshopMiniMapLayoutPCApi, getWorkshopMiniMapLayoutMobileApi } from '@/api/scene/scene';
|
|
import { updateMinMapViewLayoutApi, getCamerasByWorkShopId, getWorkshopMiniMapLayoutPCApi, getWorkshopMiniMapLayoutMobileApi } from '@/api/scene/scene';
|
|
|
import KonvaMap from './MapBase/KonvaMap.vue';
|
|
import KonvaMap from './MapBase/KonvaMap.vue';
|
|
|
import useCameraStatus from '@/views/cameras/preview/store/useCameraStatus';
|
|
import useCameraStatus from '@/views/cameras/preview/store/useCameraStatus';
|
|
|
-import { onBeforeRouteLeave, useRoute } from 'vue-router';
|
|
|
|
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
import urlJoin from 'url-join';
|
|
import urlJoin from 'url-join';
|
|
|
import { useGlobSetting } from '@/hooks/setting';
|
|
import { useGlobSetting } from '@/hooks/setting';
|
|
|
import { getHeaders } from '@/utils/http/axios';
|
|
import { getHeaders } from '@/utils/http/axios';
|
|
@@ -244,6 +243,10 @@ const handleAddCamera = (cameraId: string, index: number) => {
|
|
|
|
|
|
|
|
const handleSave = () => {
|
|
const handleSave = () => {
|
|
|
isMap.value = true;
|
|
isMap.value = true;
|
|
|
|
|
+ if(!hasBg.value && isMap.value){
|
|
|
|
|
+ ElMessage.error('请先添加车间地图');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
const layout = konvaMap.value.saveLayout();
|
|
const layout = konvaMap.value.saveLayout();
|
|
|
const cameraList = JSON.parse(layout).cameraList;
|
|
const cameraList = JSON.parse(layout).cameraList;
|
|
|
if (cameraList.length === 0 && hasBg.value) {
|
|
if (cameraList.length === 0 && hasBg.value) {
|
|
@@ -263,7 +266,7 @@ const changeMap = (val) => {
|
|
|
isChange.value = val;
|
|
isChange.value = val;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-onBeforeRouteLeave(async () => {
|
|
|
|
|
|
|
+const handleBack = async() =>{
|
|
|
if (isChange.value) {
|
|
if (isChange.value) {
|
|
|
await ElMessageBox.confirm('是否保存当前修改?', '提示', {
|
|
await ElMessageBox.confirm('是否保存当前修改?', '提示', {
|
|
|
confirmButtonText: '是',
|
|
confirmButtonText: '是',
|
|
@@ -274,12 +277,12 @@ onBeforeRouteLeave(async () => {
|
|
|
handleSave();
|
|
handleSave();
|
|
|
})
|
|
})
|
|
|
.catch(() => {
|
|
.catch(() => {
|
|
|
- return true;
|
|
|
|
|
|
|
+ router.back();
|
|
|
});
|
|
});
|
|
|
} else {
|
|
} else {
|
|
|
- return true;
|
|
|
|
|
|
|
+ router.back();
|
|
|
}
|
|
}
|
|
|
-});
|
|
|
|
|
|
|
+}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
@@ -344,7 +347,6 @@ onBeforeRouteLeave(async () => {
|
|
|
|
|
|
|
|
img {
|
|
img {
|
|
|
width: 14px;
|
|
width: 14px;
|
|
|
- margin-right: 6px;
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|