|
@@ -38,7 +38,7 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<Teleport to="body" v-if="isMounted">
|
|
<Teleport to="body" v-if="isMounted">
|
|
- <div class="draw-global-icon" v-if="isCurrentTab(1)" @click="handleBoardDraw">
|
|
|
|
|
|
+ <div class="draw-global-icon" v-if="isCurrentTab(1) && !isEditDrawingMode" @click="handleBoardDraw">
|
|
<el-icon size="30">
|
|
<el-icon size="30">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
|
<path fill="currentColor"
|
|
<path fill="currentColor"
|
|
@@ -61,6 +61,7 @@ import { onMounted, ref, watchEffect, watch, onUnmounted, computed } from "vue";
|
|
import { createBoard, scenePosTransform } from "./board";
|
|
import { createBoard, scenePosTransform } from "./board";
|
|
import MapRightPoly from "./map-right-poly.vue";
|
|
import MapRightPoly from "./map-right-poly.vue";
|
|
import { Back } from "@element-plus/icons-vue";
|
|
import { Back } from "@element-plus/icons-vue";
|
|
|
|
+import { addOrUpdateDrawingFetch, getDrawingDetailFetch, DrawingParamsType, DrawingDataType } from '@/request/drawing.ts'
|
|
// import { relicsPolyginsFetch } from "@/request";
|
|
// import { relicsPolyginsFetch } from "@/request";
|
|
import {
|
|
import {
|
|
Grid,
|
|
Grid,
|
|
@@ -75,6 +76,7 @@ import {
|
|
tileType,
|
|
tileType,
|
|
} from "./map-flow";
|
|
} from "./map-flow";
|
|
|
|
|
|
|
|
+
|
|
const relicsId = computed(() => router.currentRoute.value.params.relicsId || '')
|
|
const relicsId = computed(() => router.currentRoute.value.params.relicsId || '')
|
|
|
|
|
|
const gotoPointPage = (point: ScenePoint) => {
|
|
const gotoPointPage = (point: ScenePoint) => {
|
|
@@ -87,7 +89,7 @@ const gotoPointPage = (point: ScenePoint) => {
|
|
const isMounted = ref(false)
|
|
const isMounted = ref(false)
|
|
const currentTab = ref(0);
|
|
const currentTab = ref(0);
|
|
const isCurrentTab = ref((index: number) => currentTab.value === index)
|
|
const isCurrentTab = ref((index: number) => currentTab.value === index)
|
|
-
|
|
|
|
|
|
+const isEditDrawingMode = ref(false);
|
|
|
|
|
|
|
|
|
|
const autoInitPos = () => {
|
|
const autoInitPos = () => {
|
|
@@ -204,17 +206,23 @@ onMounted(async () => {
|
|
mapManage = mapManageInit(mapContainer.value!);
|
|
mapManage = mapManageInit(mapContainer.value!);
|
|
board = (window as any).board = boardInit(boardContainer.value!, mapManage);
|
|
board = (window as any).board = boardInit(boardContainer.value!, mapManage);
|
|
isMounted.value = true
|
|
isMounted.value = true
|
|
|
|
+ try {
|
|
|
|
+ const res = await getDrawingDetailFetch(String(relicsId.value));
|
|
|
|
+ console.log('res', res.data)
|
|
|
|
+ setTimeout(() => { })
|
|
|
|
+
|
|
|
|
+ // board.setData(res.data, String(relicsId.value))
|
|
|
|
+ } catch (error) {
|
|
|
|
|
|
|
|
+ }
|
|
const borardPolyData = computed(() => board.getData());
|
|
const borardPolyData = computed(() => board.getData());
|
|
|
|
|
|
|
|
+
|
|
watch(borardPolyData, (updater) => {
|
|
watch(borardPolyData, (updater) => {
|
|
if (updater) {
|
|
if (updater) {
|
|
- console.log('borardPolyData', updater);
|
|
|
|
|
|
+ // console.log('borardPolyData', updater);
|
|
console.log('borardPolyData', JSON.stringify(updater));
|
|
console.log('borardPolyData', JSON.stringify(updater));
|
|
}
|
|
}
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
}, { immediate: true, deep: true })
|
|
}, { immediate: true, deep: true })
|
|
});
|
|
});
|
|
|
|
|
|
@@ -229,18 +237,40 @@ const handleTabs = (index: number) => {
|
|
}
|
|
}
|
|
|
|
|
|
const handleBoardDraw = () => {
|
|
const handleBoardDraw = () => {
|
|
-
|
|
|
|
- console.log('handleBoardDraw--开始start draw', String(relicsId.value), board.polygon())
|
|
|
|
|
|
+ console.log('开始start draw', String(relicsId.value), board.polygon())
|
|
try {
|
|
try {
|
|
board.polygon().editPolygon();
|
|
board.polygon().editPolygon();
|
|
- // const endHandler = board.polygon().editPolygon();
|
|
|
|
|
|
+ isEditDrawingMode.value = true;
|
|
|
|
+ board.polygon().bus.on('penEndHandler', handleSyncDataToServer)
|
|
|
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
console.error('error', error)
|
|
console.error('error', error)
|
|
}
|
|
}
|
|
|
|
+}
|
|
|
|
+const handleSyncDataToServer = async () => {
|
|
|
|
+ console.log('handleSyncDataToServer')
|
|
|
|
+ const data = board.getData() as any as DrawingDataType;
|
|
|
|
+ const param: DrawingParamsType = {
|
|
|
|
+ data: data,
|
|
|
|
+ relicsId: String(relicsId.value),
|
|
|
|
+ // drawingId: String(relicsId.value)
|
|
|
|
+ }
|
|
|
|
+ patchPolyName(data);
|
|
|
|
+ await addOrUpdateDrawingFetch(param);
|
|
|
|
+ isEditDrawingMode.value = false;
|
|
|
|
+ board.polygon().bus.off('penEndHandler');
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+const patchPolyName = (data: DrawingDataType) => {
|
|
|
|
+ const poly = data.polygons
|
|
|
|
+ poly?.forEach(item => {
|
|
|
|
+ if (!item.name) {
|
|
|
|
+ item.name = ''
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|