|
|
@@ -16,6 +16,7 @@
|
|
|
</view>
|
|
|
|
|
|
<view
|
|
|
+ catchtouchmove="true"
|
|
|
v-for="(item, index) in modules"
|
|
|
:key="index"
|
|
|
class="moduleContent"
|
|
|
@@ -54,8 +55,6 @@
|
|
|
transition: 'transform 1s linear',
|
|
|
willChange: 'transform',
|
|
|
zIndex: 9999,
|
|
|
- top: '0',
|
|
|
- left: '0',
|
|
|
width: '50rpx',
|
|
|
height: '50rpx',
|
|
|
}"
|
|
|
@@ -95,7 +94,7 @@
|
|
|
<text>{{ item.name }}</text>
|
|
|
<text
|
|
|
>({{ item.width }}*{{
|
|
|
- item.length
|
|
|
+ item.height
|
|
|
}})cm</text
|
|
|
>
|
|
|
</view>
|
|
|
@@ -257,6 +256,7 @@ import {
|
|
|
convert_furniture_r2c,
|
|
|
rotateRect_ccw,
|
|
|
convert_region_c2r,
|
|
|
+ convert_point_r2c,
|
|
|
} from "../../utils/changezb.js";
|
|
|
|
|
|
export default {
|
|
|
@@ -414,15 +414,20 @@ export default {
|
|
|
clientId: null,
|
|
|
|
|
|
// 重新计算雷达坐标位置
|
|
|
- x_radar: 250,
|
|
|
- y_radar: 250,
|
|
|
+ x_radar: 300,
|
|
|
+ y_radar: 300,
|
|
|
rotatedRect: {},
|
|
|
+
|
|
|
+ // 处理点位
|
|
|
+ point: "",
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
methods: {
|
|
|
onTouchMove(index, event) {
|
|
|
if (this.draggingIndex === null) return;
|
|
|
+ event.preventDefault && event.preventDefault();
|
|
|
+ event.stopPropagation && event.stopPropagation();
|
|
|
const { modules, startX, startY } = this;
|
|
|
const currentX = event.touches[0].clientX;
|
|
|
const currentY = event.touches[0].clientY;
|
|
|
@@ -455,7 +460,7 @@ export default {
|
|
|
onTouchStart(index, event) {
|
|
|
const selectedItem = this.modules[index];
|
|
|
const selectedItemWidth = selectedItem.width / 40;
|
|
|
- const selectedItemHeight = selectedItem.length / 40;
|
|
|
+ const selectedItemHeight = selectedItem.height / 40;
|
|
|
this.draggingIndex = index;
|
|
|
this.selectedIndex = index;
|
|
|
this.startX = event.touches[0].clientX;
|
|
|
@@ -465,7 +470,7 @@ export default {
|
|
|
this.selectedItemHeight = selectedItemHeight;
|
|
|
this.selectImg = this.modules[index].type;
|
|
|
this.selectWidth = this.modules[index].width;
|
|
|
- this.selectHeight = this.modules[index].length;
|
|
|
+ this.selectHeight = this.modules[index].height;
|
|
|
},
|
|
|
onTouchEnd(index, event) {
|
|
|
// this.draggingIndex = null;
|
|
|
@@ -484,91 +489,109 @@ export default {
|
|
|
case "bed":
|
|
|
component.width = 80;
|
|
|
component.length = 120;
|
|
|
+ component.height = 120;
|
|
|
component.name = "床";
|
|
|
break;
|
|
|
case "bed_cabinet":
|
|
|
component.width = 40;
|
|
|
component.length = 80;
|
|
|
+ component.height = 80;
|
|
|
component.name = "柜子";
|
|
|
break;
|
|
|
case "bed_dressing_chair":
|
|
|
component.width = 40;
|
|
|
component.length = 40;
|
|
|
+ component.height = 40;
|
|
|
component.name = "化妆椅";
|
|
|
break;
|
|
|
case "bed_dressing_mirror":
|
|
|
component.width = 40;
|
|
|
component.length = 80;
|
|
|
+ component.height = 80;
|
|
|
component.name = "化妆镜";
|
|
|
break;
|
|
|
case "bed_table":
|
|
|
component.width = 40;
|
|
|
component.length = 40;
|
|
|
+ component.height = 40;
|
|
|
component.name = "床头柜";
|
|
|
break;
|
|
|
case "bath_basin":
|
|
|
component.width = 40;
|
|
|
component.length = 80;
|
|
|
+ component.height = 80;
|
|
|
component.name = "脸盆";
|
|
|
break;
|
|
|
case "bath_door":
|
|
|
component.width = 40;
|
|
|
component.length = 40;
|
|
|
+ component.height = 40;
|
|
|
component.name = "门";
|
|
|
break;
|
|
|
case "bath_shower":
|
|
|
component.width = 40;
|
|
|
component.length = 60;
|
|
|
+ component.height = 60;
|
|
|
component.name = "淋浴";
|
|
|
break;
|
|
|
case "bath_toilet":
|
|
|
component.width = 40;
|
|
|
component.length = 40;
|
|
|
+ component.height = 40;
|
|
|
component.name = "马桶";
|
|
|
break;
|
|
|
case "dining_table_rect":
|
|
|
component.width = 40;
|
|
|
component.length = 40;
|
|
|
+ component.height = 40;
|
|
|
component.name = "餐桌(方形)";
|
|
|
break;
|
|
|
case "dining_table":
|
|
|
component.width = 40;
|
|
|
component.length = 80;
|
|
|
+ component.height = 80;
|
|
|
component.name = "餐桌";
|
|
|
break;
|
|
|
case "dining_chair":
|
|
|
component.width = 40;
|
|
|
component.length = 80;
|
|
|
+ component.height = 80;
|
|
|
component.name = "餐椅";
|
|
|
break;
|
|
|
case "dining_fridge":
|
|
|
component.width = 40;
|
|
|
component.length = 80;
|
|
|
+ component.height = 80;
|
|
|
component.name = "冰箱";
|
|
|
break;
|
|
|
case "living_bookcase":
|
|
|
component.width = 40;
|
|
|
component.length = 80;
|
|
|
+ component.height = 80;
|
|
|
component.name = "书柜";
|
|
|
break;
|
|
|
case "living_sofa":
|
|
|
component.width = 40;
|
|
|
component.length = 80;
|
|
|
+ component.height = 80;
|
|
|
component.name = "沙发";
|
|
|
break;
|
|
|
case "living_tea_table":
|
|
|
component.width = 40;
|
|
|
component.length = 80;
|
|
|
+ component.height = 80;
|
|
|
component.name = "茶几";
|
|
|
break;
|
|
|
case "living_tv_stand":
|
|
|
component.width = 40;
|
|
|
component.length = 80;
|
|
|
+ component.height = 80;
|
|
|
component.name = "电视柜";
|
|
|
break;
|
|
|
case "living_sofa_single":
|
|
|
component.width = 40;
|
|
|
component.length = 40;
|
|
|
+ component.height = 80;
|
|
|
component.name = "单人沙发";
|
|
|
break;
|
|
|
default:
|
|
|
@@ -587,6 +610,7 @@ export default {
|
|
|
return this.showModal("提示", "家具长宽不能小于0");
|
|
|
}
|
|
|
this.modules[this.draggingIndex].length = this.selectHeight;
|
|
|
+ this.modules[this.draggingIndex].height = this.selectHeight;
|
|
|
this.modules[this.draggingIndex].width = this.selectWidth;
|
|
|
},
|
|
|
|
|
|
@@ -624,7 +648,7 @@ export default {
|
|
|
this.editfntShow = true;
|
|
|
const selectedItem = this.modules[index];
|
|
|
const selectedItemWidth = selectedItem.width / 40;
|
|
|
- const selectedItemHeight = selectedItem.length / 40;
|
|
|
+ const selectedItemHeight = selectedItem.height / 40;
|
|
|
this.draggingIndex = index;
|
|
|
this.selectedIndex = index;
|
|
|
this.selectedItem = selectedItem;
|
|
|
@@ -632,7 +656,7 @@ export default {
|
|
|
this.selectedItemHeight = selectedItemHeight;
|
|
|
this.selectImg = this.modules[index].type;
|
|
|
this.selectWidth = this.modules[index].width;
|
|
|
- this.selectHeight = this.modules[index].length;
|
|
|
+ this.selectHeight = this.modules[index].height;
|
|
|
},
|
|
|
|
|
|
// 提取公共的模态框方法
|
|
|
@@ -658,6 +682,7 @@ export default {
|
|
|
console.log(this.modules, pRadar, "下发之前");
|
|
|
let copyModule = JSON.parse(JSON.stringify(this.modules));
|
|
|
copyModule.forEach((item) => {
|
|
|
+ item.length = item.height;
|
|
|
const rect = rotateRect_ccw(item, pRadar, pRadar.angle);
|
|
|
const rotatedRect = convert_region_c2r(rect, pRadar);
|
|
|
item.width = item.width;
|
|
|
@@ -672,8 +697,8 @@ export default {
|
|
|
if (
|
|
|
item.top < 0 ||
|
|
|
item.left < 0 ||
|
|
|
- item.top + (item.length - 0) > 500 ||
|
|
|
- item.left + (item.width - 0) > 500
|
|
|
+ item.top + (item.length - 0) > 600 ||
|
|
|
+ item.left + (item.width - 0) > 600
|
|
|
) {
|
|
|
uni.showToast({
|
|
|
title: `${item.name}超出画布区域,请调整位置后再保存`,
|
|
|
@@ -853,6 +878,13 @@ export default {
|
|
|
const [x, y, z, id] = item;
|
|
|
currentIds.add(id.toString());
|
|
|
|
|
|
+ const pRadar = { x: this.x_radar, y: this.y_radar };
|
|
|
+ this.point = convert_point_r2c(
|
|
|
+ { x, y },
|
|
|
+ pRadar,
|
|
|
+ uni.getStorageSync("northAngle")
|
|
|
+ );
|
|
|
+
|
|
|
// 处理新点或更新现有点
|
|
|
if (!this.targetPoints[id]) {
|
|
|
newTargetPoints[id] = this.createNewTargetPoint(
|
|
|
@@ -884,46 +916,17 @@ export default {
|
|
|
...this.targetPoints,
|
|
|
...newTargetPoints,
|
|
|
};
|
|
|
- // console.log(this.targetPoints, "更新后的点位数据2222");
|
|
|
- const northAngle = uni.getStorageSync("northAngle");
|
|
|
- const radar = [this.x_radar, this.y_radar];
|
|
|
- let points = [];
|
|
|
- if (Array.isArray(this.targetPoints)) {
|
|
|
- points = this.targetPoints;
|
|
|
- } else if (
|
|
|
- this.targetPoints &&
|
|
|
- typeof this.targetPoints === "object"
|
|
|
- ) {
|
|
|
- points = Object.values(this.targetPoints);
|
|
|
- }
|
|
|
- this.targetPoints = points.map((p) => {
|
|
|
- return this.rotatePoint(p, radar, northAngle);
|
|
|
- });
|
|
|
- // console.log(this.targetPoints, "更新后的点位数据333");
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- rotatePoint(point, radar, angle) {
|
|
|
- const cx = this.x_radar;
|
|
|
- const cy = this.y_radar;
|
|
|
- const rad = (angle * Math.PI) / 180;
|
|
|
- const cosA = Math.cos(rad);
|
|
|
- const sinA = Math.sin(rad);
|
|
|
- const xRot = point.x * cosA + point.y * sinA;
|
|
|
- const yRot = -point.x * sinA + point.y * cosA;
|
|
|
-
|
|
|
- point.displayX = cx + xRot;
|
|
|
- point.displayY = cy - yRot;
|
|
|
- return point;
|
|
|
- },
|
|
|
createNewTargetPoint(x, y, z, id) {
|
|
|
return {
|
|
|
x,
|
|
|
y,
|
|
|
z,
|
|
|
id,
|
|
|
- displayX: x,
|
|
|
- displayY: y,
|
|
|
+ displayX: this.point.x,
|
|
|
+ displayY: this.point.y - 12,
|
|
|
lastX: x,
|
|
|
lastY: y,
|
|
|
};
|
|
|
@@ -941,8 +944,8 @@ export default {
|
|
|
z,
|
|
|
lastX: x,
|
|
|
lastY: y,
|
|
|
- displayX: x,
|
|
|
- displayY: y,
|
|
|
+ displayX: this.point.x,
|
|
|
+ displayY: this.point.y - 12,
|
|
|
};
|
|
|
}
|
|
|
|
|
|
@@ -1098,8 +1101,8 @@ export default {
|
|
|
.radar-box {
|
|
|
margin: 0 auto;
|
|
|
position: relative;
|
|
|
- width: 500rpx;
|
|
|
- height: 500rpx;
|
|
|
+ width: 600rpx;
|
|
|
+ height: 600rpx;
|
|
|
background: #ffffff;
|
|
|
border-radius: 37.5rpx;
|
|
|
box-sizing: border-box;
|