|
@@ -140,6 +140,7 @@ export default {
|
|
|
mounted() {
|
|
|
this.$nextTick(function () {
|
|
|
const rootDiv = document.querySelector('.btstopology');
|
|
|
+
|
|
|
if (rootDiv) {
|
|
|
this.mainData.pageWidth = rootDiv.offsetWidth
|
|
|
this.mainData.pageHeight = rootDiv.offsetHeight - 100
|
|
@@ -156,9 +157,10 @@ export default {
|
|
|
const width = size.gapX >= this.mainData.pageWidth ? size.gapX : this.mainData.pageWidth
|
|
|
const height = size.gapY >= this.mainData.pageHeight ? size.gapY : this.mainData.pageHeight
|
|
|
|
|
|
+ //重设画布大小
|
|
|
var canvas = document.getElementById('myCanvas')
|
|
|
- canvas.width = width
|
|
|
- canvas.height = height
|
|
|
+ canvas.width = width + 100
|
|
|
+ canvas.height = height + 100
|
|
|
},
|
|
|
//画散点图(注意:画布是一个整体,无法为画布上的某个元素单独增加事件)
|
|
|
drawScatterChart(dataList, offset) {
|
|
@@ -167,6 +169,7 @@ 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
|
|
|
|
|
@@ -188,7 +191,9 @@ export default {
|
|
|
ctx.fillText(point.location_type, coordX - 3, coordY - 3) // 上半文本(定位类型)
|
|
|
ctx.fillText(point.location_type, coordX - 3, coordY + 10) // 下半文本(定位类型)
|
|
|
ctx.fillText(`ID${point.bts_id}`, coordX - 18, coordY + 30)//基站ID
|
|
|
- ctx.fillText(`[${point.coord_x / 100}, ${point.coord_y / 100}]`, coordX - 18, coordY + 46)//坐标
|
|
|
+ const x = parseInt(point.coord_x / 100)//去掉坐标小数
|
|
|
+ const y = parseInt(point.coord_y / 100)//去掉坐标小数
|
|
|
+ ctx.fillText(`[${x}, ${y}]`, coordX - 18, coordY + 46)//坐标
|
|
|
ctx.fillText(`F${point.carrier_id}`, coordX + 15, coordY - 3)//载波
|
|
|
ctx.fillText(`T${point.timeslot}`, coordX + 15, coordY + 12)//时隙
|
|
|
})
|
|
@@ -201,7 +206,7 @@ export default {
|
|
|
const x = event.clientX - rect.left
|
|
|
const y = event.clientY - rect.top
|
|
|
|
|
|
- // 坐标转换公式(反向操作)
|
|
|
+ // 坐标转换公式(反向操作,将画布坐标转换成基站坐标)
|
|
|
const coordX = (x - this.mainData.offset.xOffset) * this.mainData.coordScaleX
|
|
|
const coordY = (y - this.mainData.offset.yOffset) * this.mainData.coordScaleY
|
|
|
|