|
@@ -3,7 +3,14 @@
|
|
|
<canvas id="myCanvas" class="canvasDom">
|
|
|
<img
|
|
|
:style="{ left: item.deviceArr[0].left, top: item.deviceArr[0].top }"
|
|
|
- style="position: absolute; width: 20px; height: 20px; z-index: 999;left: 20px;top:20px;"
|
|
|
+ style="
|
|
|
+ position: absolute;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ z-index: 999;
|
|
|
+ left: 20px;
|
|
|
+ top: 20px;
|
|
|
+ "
|
|
|
:src="parseImgUrl('map-icon', 'device.svg')"
|
|
|
alt=""
|
|
|
:key="index"
|
|
@@ -92,9 +99,9 @@ export default defineComponent({
|
|
|
});
|
|
|
ctx.fillStyle = "#cfefef";
|
|
|
ctx.fill();
|
|
|
- // proxyData.drawIcon(ctx, "coffee.svg", deviceArr[0]);
|
|
|
- // proxyData.drawIcon(ctx, "dev.svg", deviceArr[1]);
|
|
|
- // proxyData.drawIcon(ctx, "deviceroom.svg", deviceArr[2]);
|
|
|
+ proxyData.drawIcon(ctx, "coffee.svg", deviceArr[0]);
|
|
|
+ proxyData.drawIcon(ctx, "dev.svg", deviceArr[1]);
|
|
|
+ proxyData.drawIcon(ctx, "deviceroom.svg", deviceArr[2]);
|
|
|
} else {
|
|
|
let img: any = new Image();
|
|
|
img.src = require("@/assets/svg/bg_disable.png");
|
|
@@ -128,9 +135,24 @@ export default defineComponent({
|
|
|
let x: any = event.clientX - canvasDom.getBoundingClientRect().left;
|
|
|
let y: any = event.clientY - canvasDom.getBoundingClientRect().top;
|
|
|
// let ctx: any = canvasDom.getContext("2d");
|
|
|
- proxyData.initCanvas();
|
|
|
+ // proxyData.initCanvas();
|
|
|
console.log(event);
|
|
|
- alert("点击了!");
|
|
|
+ // alert("点击了!");
|
|
|
+ proxyData.spaceList.map((item: any) => {
|
|
|
+ let deviceArr: any = item.deviceArr;
|
|
|
+ deviceArr.map((dev: any,index:any) => {
|
|
|
+ if (
|
|
|
+ x >= dev.left &&
|
|
|
+ x <= dev.left + 15 &&
|
|
|
+ y >= dev.top &&
|
|
|
+ y < dev.top + 15
|
|
|
+ ) {
|
|
|
+ // alert("我被点了!");
|
|
|
+ // console.log("我被点了!")
|
|
|
+ alert(`我被点了设备图标!${index}`);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
drawIcon(ctx: any, url: any, iconPerstion: any) {
|