|
@@ -6,21 +6,13 @@
|
|
<el-button :icon="Back" circle type="default" @click="router.back()" />
|
|
<el-button :icon="Back" circle type="default" @click="router.back()" />
|
|
</div>
|
|
</div>
|
|
<div class="nav_container">
|
|
<div class="nav_container">
|
|
- <div
|
|
|
|
- class="nav_item"
|
|
|
|
- :class="{ active: isCurrentTab(0) }"
|
|
|
|
- @click="handleTabs(0)"
|
|
|
|
- >
|
|
|
|
|
|
+ <div class="nav_item" :class="{ active: isCurrentTab(0) }" @click="handleTabs(0)">
|
|
<el-icon size="20">
|
|
<el-icon size="20">
|
|
<LocationInformation />
|
|
<LocationInformation />
|
|
</el-icon>
|
|
</el-icon>
|
|
<span>坐标</span>
|
|
<span>坐标</span>
|
|
</div>
|
|
</div>
|
|
- <div
|
|
|
|
- class="nav_item"
|
|
|
|
- :class="{ active: isCurrentTab(1) }"
|
|
|
|
- @click="handleTabs(1)"
|
|
|
|
- >
|
|
|
|
|
|
+ <div class="nav_item" :class="{ active: isCurrentTab(1) }" @click="handleTabs(1)">
|
|
<el-icon size="20">
|
|
<el-icon size="20">
|
|
<Grid />
|
|
<Grid />
|
|
</el-icon>
|
|
</el-icon>
|
|
@@ -31,57 +23,26 @@
|
|
</Teleport>
|
|
</Teleport>
|
|
<div id="map" class="map-container" ref="mapContainer" @click.stop>
|
|
<div id="map" class="map-container" ref="mapContainer" @click.stop>
|
|
<div class="map-component">
|
|
<div class="map-component">
|
|
- <el-select
|
|
|
|
- v-model="tileType"
|
|
|
|
- placeholder="选择底图"
|
|
|
|
- style="width: 120px"
|
|
|
|
- class="tile-type-select"
|
|
|
|
- >
|
|
|
|
- <el-option
|
|
|
|
- v-for="item in tileOptions"
|
|
|
|
- :key="item"
|
|
|
|
- :label="item"
|
|
|
|
- :value="item"
|
|
|
|
- />
|
|
|
|
|
|
+ <el-select v-model="tileType" placeholder="选择底图" style="width: 120px" class="tile-type-select">
|
|
|
|
+ <el-option v-for="item in tileOptions" :key="item" :label="item" :value="item" />
|
|
</el-select>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="board" ref="boardContainer"></div>
|
|
<div class="board" ref="boardContainer"></div>
|
|
</div>
|
|
</div>
|
|
<div class="right-control">
|
|
<div class="right-control">
|
|
- <MapRight
|
|
|
|
- v-if="isCurrentTab(0)"
|
|
|
|
- @fly-point="flyScenePoint"
|
|
|
|
- @fly-scene="flyScene"
|
|
|
|
- @goto-point="gotoPointPage"
|
|
|
|
- />
|
|
|
|
- <MapRightPoly
|
|
|
|
- @del="handlePolysDel"
|
|
|
|
- @edit="handlePolysEdit"
|
|
|
|
- :data="boardData"
|
|
|
|
- v-if="isCurrentTab(1)"
|
|
|
|
- >
|
|
|
|
|
|
+ <MapRight v-if="isCurrentTab(0)" @fly-point="flyScenePoint" @fly-scene="flyScene" @goto-point="gotoPointPage" />
|
|
|
|
+ <MapRightPoly @del="handlePolysDel" @edit="handlePolysEdit" :data="boardData" v-if="isCurrentTab(1)">
|
|
</MapRightPoly>
|
|
</MapRightPoly>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<Teleport to="body" v-if="isMounted">
|
|
<Teleport to="body" v-if="isMounted">
|
|
- <el-button class="temp_btn" @click="clearPolys">后端全清</el-button>
|
|
|
|
- <div
|
|
|
|
- class="draw-global-icon"
|
|
|
|
- v-if="isCurrentTab(1) && !isEditDrawingMode"
|
|
|
|
- @click="handleBoardDraw"
|
|
|
|
- >
|
|
|
|
|
|
+ <!-- <el-button class="temp_btn" @click="clearPolys">后端全清</el-button> -->
|
|
|
|
+ <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"
|
|
|
|
- >
|
|
|
|
- <path
|
|
|
|
- fill="currentColor"
|
|
|
|
- d="M2 4.621a.5.5 0 0 1 .854-.353l6.01 6.01c.126.126.17.31.15.487a2 2 0 1 0 1.751-1.751a.586.586 0 0 1-.487-.15l-6.01-6.01A.5.5 0 0 1 4.62 2H11a9 9 0 0 1 8.468 12.054l2.24 2.239a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.415 0l-2.239-2.239A9 9 0 0 1 2 11z"
|
|
|
|
- />
|
|
|
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
|
|
|
+ <path fill="currentColor"
|
|
|
|
+ d="M2 4.621a.5.5 0 0 1 .854-.353l6.01 6.01c.126.126.17.31.15.487a2 2 0 1 0 1.751-1.751a.586.586 0 0 1-.487-.15l-6.01-6.01A.5.5 0 0 1 4.62 2H11a9 9 0 0 1 8.468 12.054l2.24 2.239a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.415 0l-2.239-2.239A9 9 0 0 1 2 11z" />
|
|
</svg>
|
|
</svg>
|
|
</el-icon>
|
|
</el-icon>
|
|
</div>
|
|
</div>
|
|
@@ -178,16 +139,18 @@ watch(
|
|
if (mapManage && !autoInitPos()) {
|
|
if (mapManage && !autoInitPos()) {
|
|
flyUserCenter(mapManage);
|
|
flyUserCenter(mapManage);
|
|
}
|
|
}
|
|
- const points = scenePosTransform(scenes.value);
|
|
|
|
- console.log("scenePosTransform", points, scenes.value);
|
|
|
|
- board.setData(
|
|
|
|
- {
|
|
|
|
- points: points,
|
|
|
|
- lines: [],
|
|
|
|
- polygons: [],
|
|
|
|
- },
|
|
|
|
- router.currentRoute.value.params.relicsId as string
|
|
|
|
- );
|
|
|
|
|
|
+ // const points = scenePosTransform(scenes.value);
|
|
|
|
+ // console.log("scenePosTransform", points, scenes.value);
|
|
|
|
+ // board.setData(
|
|
|
|
+ // {
|
|
|
|
+ // points: points,
|
|
|
|
+ // lines: [],
|
|
|
|
+ // polygons: [],
|
|
|
|
+ // },
|
|
|
|
+ // router.currentRoute.value.params.relicsId as string
|
|
|
|
+ // );
|
|
|
|
+ initCroodTabdata();
|
|
|
|
+
|
|
board.polygon().bus.on("clickPoint", (bpoint) => {
|
|
board.polygon().bus.on("clickPoint", (bpoint) => {
|
|
const point =
|
|
const point =
|
|
bpoint.id &&
|
|
bpoint.id &&
|
|
@@ -304,65 +267,59 @@ const patchPolyName = (data: DrawingDataType) => {
|
|
const poly = data.polygons;
|
|
const poly = data.polygons;
|
|
poly?.forEach((item) => {
|
|
poly?.forEach((item) => {
|
|
if (!item.name) {
|
|
if (!item.name) {
|
|
- item.name = "";
|
|
|
|
|
|
+ item.name = "本体边界" + item.id;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
};
|
|
};
|
|
|
|
|
|
watch(
|
|
watch(
|
|
currentTab,
|
|
currentTab,
|
|
- (tab) => {
|
|
|
|
|
|
+ (tab, oldTab) => {
|
|
console.log("tab", tab);
|
|
console.log("tab", tab);
|
|
if (tab === 1) {
|
|
if (tab === 1) {
|
|
initPolyTabData();
|
|
initPolyTabData();
|
|
}
|
|
}
|
|
|
|
+ if (oldTab == 1 && tab === 0) {
|
|
|
|
+ console.log('1-0')
|
|
|
|
+ initCroodTabdata();
|
|
|
|
+ }
|
|
},
|
|
},
|
|
{ deep: true }
|
|
{ deep: true }
|
|
);
|
|
);
|
|
|
|
+const initCroodTabdata = async () => {
|
|
|
|
+ const points = scenePosTransform(scenes.value);
|
|
|
|
+ console.log("initCroodTabdata", points, scenes.value);
|
|
|
|
+ board.setData(
|
|
|
|
+ {
|
|
|
|
+ points: points,
|
|
|
|
+ lines: [],
|
|
|
|
+ polygons: [],
|
|
|
|
+ },
|
|
|
|
+ String(relicsId.value)
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
|
|
const initPolyTabData = async () => {
|
|
const initPolyTabData = async () => {
|
|
try {
|
|
try {
|
|
setTimeout(async () => {
|
|
setTimeout(async () => {
|
|
const res = await getDrawingDetailFetch(String(relicsId.value));
|
|
const res = await getDrawingDetailFetch(String(relicsId.value));
|
|
- console.log("res", res.data);
|
|
|
|
|
|
+ const points = scenePosTransform(scenes.value);
|
|
|
|
+ console.log("res", points, res.data);
|
|
if (res.data) {
|
|
if (res.data) {
|
|
boardData.value = res.data;
|
|
boardData.value = res.data;
|
|
|
|
+ boardData.value.points = points.concat(res.data.points)
|
|
board.setData(boardData.value, String(relicsId.value));
|
|
board.setData(boardData.value, String(relicsId.value));
|
|
}
|
|
}
|
|
}, 500);
|
|
}, 500);
|
|
- } catch (error) {}
|
|
|
|
|
|
+ } catch (error) { }
|
|
};
|
|
};
|
|
|
|
|
|
const handlePolysDel = (id: string) => {
|
|
const handlePolysDel = (id: string) => {
|
|
try {
|
|
try {
|
|
- // const data = board.getData() as any as DrawingDataType;
|
|
|
|
- // const obj: DrawingDataType = JSON.parse(JSON.stringify(data))
|
|
|
|
- // const index = obj.polygons.findIndex(i => id === i.id)
|
|
|
|
- // console.log('handlePolysDel', id, index)
|
|
|
|
- // const points = [];
|
|
|
|
- // if (index > -1) {
|
|
|
|
- // data.polygons[index].lineIds.forEach(id => {
|
|
|
|
- // // 当前poly下线段与点都删除
|
|
|
|
- // const line = data.lines.find(l => l.id === id);
|
|
|
|
- // line && line.pointIds.forEach(p => points.push(p));
|
|
|
|
-
|
|
|
|
- // const lIndex = obj.lines.findIndex(l => l.id === id);
|
|
|
|
- // lIndex > -1 && obj.lines.splice(lIndex, 1)
|
|
|
|
- // });
|
|
|
|
- // new Set(points).forEach((_, i) => {
|
|
|
|
- // const pIndex = obj.points.findIndex(p => p.id === i);
|
|
|
|
- // // console.log('pIndex', pIndex, obj.points)
|
|
|
|
- // obj.points.splice(pIndex, 1)
|
|
|
|
- // })
|
|
|
|
- // console.log('points', new Set(points))
|
|
|
|
- // obj.polygons.splice(index, 1);
|
|
|
|
- // }
|
|
|
|
board.polygon().removePolygon(id);
|
|
board.polygon().removePolygon(id);
|
|
- // board.setData({
|
|
|
|
- // points: obj.points,
|
|
|
|
- // lines: obj.lines,
|
|
|
|
- // polygons: obj.polygons,
|
|
|
|
- // }, obj.id)
|
|
|
|
|
|
+ handleSyncDataToServer();
|
|
|
|
+
|
|
} catch (error) {
|
|
} catch (error) {
|
|
console.error("handlePolysDel", error);
|
|
console.error("handlePolysDel", error);
|
|
}
|
|
}
|
|
@@ -467,7 +424,7 @@ const clearPolys = async () => {
|
|
&.light {
|
|
&.light {
|
|
--color: #fff;
|
|
--color: #fff;
|
|
|
|
|
|
- > div {
|
|
|
|
|
|
+ >div {
|
|
text-shadow: 0 0 2px #000;
|
|
text-shadow: 0 0 2px #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -475,7 +432,7 @@ const clearPolys = async () => {
|
|
&.dark {
|
|
&.dark {
|
|
--color: #000;
|
|
--color: #000;
|
|
|
|
|
|
- > div {
|
|
|
|
|
|
+ >div {
|
|
text-shadow: 0 0 2px #fff;
|
|
text-shadow: 0 0 2px #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|