From f27c2f7544c83dcc8f2a7571349122c5efd755c8 Mon Sep 17 00:00:00 2001 From: SunTao <328867980@qq.com> Date: Fri, 22 Nov 2024 15:14:32 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E7=97=85=E5=AE=B3=E7=AD=9B?= =?UTF-8?q?=E6=9F=A5=E5=BC=B9=E7=AA=97=E4=BF=AE=E6=94=B9=E9=80=BB=E8=BE=91?= =?UTF-8?q?=EF=BC=8C=E9=81=93=E8=B7=AF=E7=BA=BF=E9=81=93=E8=B7=AF=E6=AE=B5?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=8C=E5=9C=B0=E5=9B=BE=E6=9B=B4=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/xj/section.js | 9 + src/components/map/fssm-map.vue | 240 ++++++++++++-- .../big-screen/components/img-dialog.vue | 38 ++- src/views/big-screen/index.vue | 4 +- src/views/xj/route/route-line/index.vue | 310 ++++++++---------- .../route-scope/components/scope-add.vue | 39 ++- src/views/xj/route/route-scope/index.vue | 4 +- .../route-section/components/section-add.vue | 242 +++++--------- src/views/xj/route/route-section/index.vue | 107 +++++- 9 files changed, 612 insertions(+), 381 deletions(-) diff --git a/src/api/xj/section.js b/src/api/xj/section.js index d04a1ce..d448763 100644 --- a/src/api/xj/section.js +++ b/src/api/xj/section.js @@ -44,3 +44,12 @@ export function updateSection(query) { }); } + // 查询管理站下拉数据 + export function getDeptList(params) { + return request({ + url: "/system/dept/listDropDown", + method: "get", + params, + }); + } + diff --git a/src/components/map/fssm-map.vue b/src/components/map/fssm-map.vue index c0f509d..04ad10a 100644 --- a/src/components/map/fssm-map.vue +++ b/src/components/map/fssm-map.vue @@ -11,9 +11,14 @@
+ +
+ + +
- +
@@ -55,7 +60,7 @@ import { defaults as defaultInteractions, } from "ol/interaction"; import * as styleExports from "ol/style"; -import { Polygon } from "ol/geom"; +import { Polygon, LineString } from "ol/geom"; export default { name: "FssmMap", @@ -72,11 +77,16 @@ export default { type: String, default: "10", }, - // 是否显示绘图功能 + // 是否显示绘制多边形功能 showDraw: { type: Boolean, default: false, }, + // 是否显示绘制线段功能 + showLine: { + type: Boolean, + default: false, + }, // 是否显示地图放大缩小 showZoom: { type: Boolean, @@ -106,6 +116,11 @@ export default { type: Array, default: () => [], }, + // 接收传过来的绘制线段数组 + editCoordinatesLine:{ + type: Array, + default: () => [], + }, // 接收传过来的底图类型 baseMap: { type: String, @@ -120,14 +135,26 @@ export default { mapType: "cva_c", // 地图图层 mapLayers: [], - // 绘制图层 + // 绘制多边形图层 draw: null, + // 绘制线段图层 + drawLine: null, + // 绘制图层源 source: new VectorSource(), - // 绘制图形保存的点位 - drawMarkers: [], + // 绘制线段图层源 + sourceLine: new VectorSource(), // 当前地图层级 sendZoom: "", + // 当前选中得图层 selectSingClick: null, + // 绘制图形保存的点位 + drawMarkers: [], + // 绘制多边形图层layer + drawLayer: null, + // 绘制线段保存的点位 + drawLineMarkers: [], + // 绘制线段图层layer + drawLineLayer: null, }; }, watch: { @@ -140,22 +167,87 @@ export default { }); this.drawMarkers = aa; const map = this.instance.get("map"); + // 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构 + const snap = new Snap({ + source: this.source, + }); + map.addInteraction(snap); + // 添加修改元素使得绘制的多边形可以编辑 + const modify = new Modify({ source: this.source }); + map.addInteraction(modify); // 增加绘图层 - const drawLayer = new VectorLayer({ + this.drawLayer = new VectorLayer({ source: this.source, id: "draw", + style: new styleExports.Style({ + stroke: new styleExports.Stroke({ + color: "blue", + size: 2, + }), + }), }); const feature = new Feature({ geometry: new Polygon([aa]), }); - drawLayer.getSource().addFeature(feature); - map.addLayer(drawLayer); + this.drawLayer.getSource().addFeature(feature); + map.addLayer(this.drawLayer); + modify.on("modifyend", (e) => { + e.features.forEach((feature) => { + this.drawMarkers = feature.getGeometry().getCoordinates().flat(); + this.$emit("endEoordinate", this.drawMarkers); + }); + }); }); }, deep: true, immediate: true, }, + /* 监听传过来的绘制线段坐标 */ + editCoordinatesLine: { + handler(val) { + this.$nextTick(() => { + const aa = val.map((item) => { + return [item[0] * 1, item[1] * 1]; + }); + this.drawLineMarkers = aa; + const map = this.instance.get("map"); + // 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构 + const snap = new Snap({ + source: this.sourceLine, + }); + map.addInteraction(snap); + // 添加修改元素使得绘制的多边形可以编辑 + const modify = new Modify({ source: this.sourceLine }); + map.addInteraction(modify); + // 增加绘图层 + this.drawLineLayer = new VectorLayer({ + source: this.sourceLine, + id: "drawLine", + style: new styleExports.Style({ + stroke: new styleExports.Stroke({ + color: "red", + size: 4, + }), + }), + }); + const feature = new Feature({ + geometry: new LineString(aa), + }); + this.drawLineLayer.getSource().addFeature(feature); + map.addLayer(this.drawLineLayer); + modify.on("modifyend", (e) => { + e.features.forEach((feature) => { + this.drawLineMarkers = feature.getGeometry().getCoordinates(); + this.$emit("endEoordinateLine", this.drawLineMarkers); + }); + }); + }); + }, + immediate: true, + deep: true, + }, + /* 监听传过来的底图类型 */ baseMap: { handler(val) { @@ -313,7 +405,7 @@ export default { this.instance.set("map", map); this.instance.set("overlay-list", []); }, - + /** * @description: 删除图层选择对象 * @return {*} @@ -323,18 +415,18 @@ export default { }, /** - * @description: 绘制地图 + * @description: 绘制多边形地图 * @return {*} */ drawMap() { if (this.drawMarkers.length < 1) { const map = this.instance.get("map"); // 增加绘图层 - const drawLayer = new VectorLayer({ + this.drawLayer = new VectorLayer({ source: this.source, id: "draw", }); - map.addLayer(drawLayer); + map.addLayer(this.drawLayer); // 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构 const snap = new Snap({ source: this.source, @@ -367,6 +459,8 @@ export default { this.drawend(e); }); modify.on("modifyend", (e) => { + console.log(11111111); + e.features.forEach((feature) => { this.drawMarkers = feature.getGeometry().getCoordinates().flat(); this.$emit("endEoordinate", this.drawMarkers); @@ -376,7 +470,7 @@ export default { }, /** - * @description: 监听绘制完成的事件 + * @description: 监听绘制多边形完成的事件 * @param {*} event * @return {*} */ @@ -389,9 +483,10 @@ export default { // 在 drawend 结束后检查是否有交叉的线段 if (coordinates.length > 3 && this.isSelfCrossing(coordinates)) { this.$modal.msgWarning("线段交叉，请重新绘制"); - this.deletedraw(); - this.drawMap(); - // map.removeInteraction(this.draw); + this.$nextTick(() => { + this.deletedraw(); + this.drawMap(); + }); } else { const map = this.instance.get("map"); map.removeInteraction(this.draw); @@ -399,6 +494,75 @@ export default { this.$emit("endEoordinate", this.drawMarkers); }, + /** + * @description: 绘制线段地图 + * @return {*} + */ + drawLineMap() { + if (this.drawLineMarkers.length < 1) { + const map = this.instance.get("map"); + // 增加绘图层 + this.drawLineLayer = new VectorLayer({ + source: this.sourceLine, + id: "drawLine", + }); + map.addLayer(this.drawLineLayer); + // 增加snap吸附功能 ，还有就是snap交互可以在编辑和画features时候保持拓扑结构 + const snap = new Snap({ + source: this.sourceLine, + }); + map.addInteraction(snap); + // 添加修改元素使得绘制的多边形可以编辑 + const modify = new Modify({ source: this.sourceLine }); + map.addInteraction(modify); + this.drawLine = new Draw({ + source: this.sourceLine, + type: "LineString", + style: new styleExports.Style({ + image: new styleExports.Circle({ + radius: 5, + fill: new styleExports.Fill({ + color: "blue", + }), + }), + stroke: new styleExports.Stroke({ + color: "blue", + width: 2, + }), + fill: new styleExports.Fill({ + color: "rgba(0, 0, 255, 0.2)", + }), + }), + }); + map.addInteraction(this.drawLine); + this.drawLine.on("drawend", (e) => { + this.drawLineend(e); + }); + modify.on("modifyend", (e) => { + e.features.forEach((feature) => { + this.drawLineMarkers = feature.getGeometry().getCoordinates(); + this.$emit("endEoordinateLine", this.drawLineMarkers); + }); + }); + } + }, + + /** + * @description: 监听绘制线段完成的事件 + * @param {*} e + * @return {*} + */ + drawLineend(e) { + const feature = e.feature; + const geometry = feature.getGeometry(); + // 获取区域点位 + const coordinates = geometry.getCoordinates(); + this.drawLineMarkers = coordinates; + this.$emit("endEoordinateLine", this.drawLineMarkers); + const map = this.instance.get("map"); + map.removeInteraction(this.drawLine); + }, + /** * @description: 检测交叉点位方法 * @param {*} coordinates @@ -453,22 +617,35 @@ export default { }, /** - * @description: 删除绘制功能 + * @description: 删除绘制多边形功能 * @return {*} */ deletedraw() { const map = this.instance.get("map"); map.removeInteraction(this.draw); - const [layer] = map.getAllLayers().filter((item) => { - return item.get("id") === "draw"; - }); - map.removeLayer(layer); + this.drawLayer.getSource().clear(); + map.removeLayer(this.drawLayer); this.draw = null; this.source = new VectorSource(); this.drawMarkers = []; this.$emit("endEoordinate", []); }, + /** + * @description: 删除绘制线段功能 + * @return {*} + */ + deleteLinedraw(){ + const map = this.instance.get("map"); + map.removeInteraction(this.drawLine); + this.drawLineLayer.getSource().clear(); + map.removeLayer(this.drawLineLayer); + this.drawLine = null; + this.source = new VectorSource(); + this.drawLineMarkers = []; + this.$emit("endEoordinateLine", []); + }, + /** * @description: 修改地图底图样式 * @param {*} item @@ -612,6 +789,25 @@ export default { position: absolute; // left: 1rem; // top: 1rem; + .draw-line { + width: 1.5rem; + height: 3rem; + background-color: rgb(198, 216, 216); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + i { + cursor: pointer; + padding: 0.1rem 0; + font-size: 1.2rem; + } + + .change-map-click { + background-color: rgb(240, 240, 240); + } + } .draw-map { width: 1.5rem; diff --git a/src/views/big-screen/components/img-dialog.vue b/src/views/big-screen/components/img-dialog.vue index ee2eb9b..97f1cbd 100644 --- a/src/views/big-screen/components/img-dialog.vue +++ b/src/views/big-screen/components/img-dialog.vue @@ -133,10 +133,7 @@ :style="getRectStyle(item.rectPosition, index)" @click="clickImage(item)" > -
+
目标详情>>
@@ -281,8 +278,8 @@ export default { this.defectData.length > this.currentIndex ) { // this.showImage(this.currentIndex); - return this.defectData[this.currentIndex].items[this.selectedThumbnail] - .img; + const index = this.defectData[this.currentIndex].items.length - 1; + return this.defectData[this.currentIndex].items[index].img; } }, // 下方小列表数据 @@ -488,8 +485,10 @@ export default { // if (this.currentIndex === this.defectData.length - 1) { // this.loadMoreBottomImages(); // } + this.currentIndex = index; - this.selectedThumbnail = 0; // Reset to the first thumbnail when changing the main item + const indexInfo = this.defectData[this.currentIndex].items.length - 1; + this.selectedThumbnail = indexInfo; // Reset to the first thumbnail when changing the main item this.scrollToCurrentImage(); this.$nextTick(() => { this.updateRects(); @@ -572,7 +571,8 @@ export default { event.preventDefault(); if (this.currentIndex > 0) { this.currentIndex--; - this.selectedThumbnail = 0; // Reset when changing main images via keyboard + const index = this.defectData[this.currentIndex].items.length - 1; + this.selectedThumbnail = index; // Reset when changing main images via keyboard this.scrollToCurrentImage(); this.updateRects(); } @@ -582,7 +582,8 @@ export default { this.currentIndex === this.defectData.length - 1 ? this.currentIndex : this.currentIndex++; - this.selectedThumbnail = 0; // Reset when changing main images via keyboard + const index = this.defectData[this.currentIndex].items.length - 1; + this.selectedThumbnail = index; // Reset when changing main images via keyboard this.scrollToCurrentImage(); this.updateRects(); } else { @@ -610,6 +611,13 @@ export default { updateRects() { this.rectItem = []; if (this.defectData.length > 0) { + if ( + this.selectedThumbnail > + this.defectData[this.currentIndex]?.items.length - 1 + ) { + this.selectedThumbnail = + this.defectData[this.currentIndex]?.items.length - 1; + } this.rectItem = this.defectData[this.currentIndex]?.items[ this.selectedThumbnail ].children.map((item) => { @@ -665,7 +673,8 @@ export default {