修改基站拓扑页面，翻转Y坐标，处理X轴和Y轴最大最小值，避免画布过小的问题

ipsomcadmin/src/directives/dragdialog.js

@@ -77,9 +77,12 @@ export default {
         // 组件销毁时的清理
         const cleanup = () => {
             window.removeEventListener('resize', centerDialog)
-            headerEl.removeEventListener('mousedown', startDrag)
-            document.removeEventListener('mousemove', onDrag)
-            document.removeEventListener('mouseup', stopDrag)
+            // headerEl.removeEventListener('mousedown', startDrag)
+            // document.removeEventListener('mousemove', onDrag)
+            // document.removeEventListener('mouseup', stopDrag)
+            headerEl.removeEventListener('mousedown', "")
+            document.removeEventListener('mousemove', "")
+            document.removeEventListener('mouseup', "")
         }
 
         // Vue2销毁钩子

ipsomcadmin/src/views/bparam/btstopology.vue

@@ -122,6 +122,7 @@ export default {
                 },
                 pageWidth: 0,
                 pageHeight: 0,
+                btsMaxY: 0,//基站y坐标最大值
             }
         }
     },
@@ -140,10 +141,9 @@ export default {
     mounted() {
         this.$nextTick(function () {
             const rootDiv = document.querySelector('.btstopology');
-
             if (rootDiv) {
                 this.mainData.pageWidth = rootDiv.offsetWidth
-                this.mainData.pageHeight = rootDiv.offsetHeight - 100
+                this.mainData.pageHeight = rootDiv.offsetHeight
             }
             this.init()
         })
@@ -159,8 +159,8 @@ export default {
 
             //重设画布大小
             var canvas = document.getElementById('myCanvas')
-            canvas.width = width + 100
-            canvas.height = height + 100
+            canvas.width = width
+            canvas.height = height
         },
         //画散点图（注意：画布是一个整体，无法为画布上的某个元素单独增加事件）
         drawScatterChart(dataList, offset) {
@@ -171,7 +171,8 @@ export default {
             dataList.forEach(point => {
                 //将基站坐标转换成画布
                 const coordX = (point.coord_x / this.mainData.coordScaleX) + offset.xOffset
-                const coordY = (point.coord_y / this.mainData.coordScaleY) + offset.yOffset
+                let coordY = (this.mainData.btsMaxY - point.coord_y)//基站Y坐标翻转
+                coordY = (coordY / this.mainData.coordScaleY) + offset.yOffset
 
                 // 绘制上半圆（频率）
                 ctx.beginPath()
@@ -208,7 +209,8 @@ export default {
 
             // 坐标转换公式（反向操作，将画布坐标转换成基站坐标）
             const coordX = (x - this.mainData.offset.xOffset) * this.mainData.coordScaleX
-            const coordY = (y - this.mainData.offset.yOffset) * this.mainData.coordScaleY
+            let coordY = (y - this.mainData.offset.yOffset) * this.mainData.coordScaleY
+            coordY = this.mainData.btsMaxY - coordY//基站y坐标翻转
 
             const found = this.tableData.listData.items.find(bts => {
                 const dx = bts.coord_x - coordX
@@ -279,12 +281,26 @@ export default {
             let minX = Infinity, maxX = -Infinity
             let minY = Infinity, maxY = -Infinity
 
+            //找出基站坐标的最大最小值
             dataList.forEach(point => {
                 minX = Math.min(minX, point.coord_x)
                 maxX = Math.max(maxX, point.coord_x)
                 minY = Math.min(minY, point.coord_y)
                 maxY = Math.max(maxY, point.coord_y)
             })
+            if (minX > 0) {//修正坐标
+                minX = 0
+            }
+            if (maxX < 0) {//修正坐标
+                maxX = 0
+            }
+            if (minY > 0) {//修正坐标
+                minY = 0
+            }
+            if (maxY < 0) {//修正坐标
+                maxY = 0
+            }
+            this.mainData.btsMaxY = maxY//保存基站最大Y坐标值
 
             // 偏移量计算
             const offset = {
@@ -293,10 +309,10 @@ export default {
             }
             this.mainData.offset = offset//保存偏移值
 
-            // 关键修复：画布间隙计算
+            // 计算画布在X轴和Y轴的间隔
             const gap = {
-                gapX: ((maxX - minX) / this.mainData.coordScaleX) + 100,
-                gapY: ((maxY - minY) / this.mainData.coordScaleY) + 100
+                gapX: ((maxX - minX) / (this.mainData.coordScaleX)) + 2 * offset.xOffset,
+                gapY: ((maxY - minY) / (this.mainData.coordScaleY)) + 2 * offset.yOffset
             }
 
             return { offset, gap }