|
@@ -1,6 +1,5 @@
|
|
|
<template>
|
|
|
- <canvas id="myCanvas" class="canvas-dom" style="boder: 1px solid red">
|
|
|
- </canvas>
|
|
|
+ <canvas id="myCanvas" class="canvas-dom"> </canvas>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
@@ -10,6 +9,7 @@ import { getMapInfo } from "@/apis/envmonitor";
|
|
|
import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
|
|
|
import { parseImgUrl } from "@/utils";
|
|
|
import { swiper } from "@/utils/swiper";
|
|
|
+import { getSpaceType, mapIcon } from "@/utils/mapIcon";
|
|
|
|
|
|
export default defineComponent({
|
|
|
components: {
|
|
@@ -26,7 +26,7 @@ export default defineComponent({
|
|
|
spaceName: "",
|
|
|
width: 3361.136,
|
|
|
height: 2729.25,
|
|
|
- scale: 1,
|
|
|
+ scale: 0.6,
|
|
|
ctx: ctx,
|
|
|
centerObj: centerObj,
|
|
|
// 搜索某个空间
|
|
@@ -77,10 +77,30 @@ export default defineComponent({
|
|
|
swipeRight: function (e: any) {},
|
|
|
});
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 设置空间的图标
|
|
|
+ *
|
|
|
+ */
|
|
|
+ setSpaceIcon(item: any) {
|
|
|
+ // if(item.can)
|
|
|
+ if (item.canClick) {
|
|
|
+ // debugger
|
|
|
+ let typeName: any = getSpaceType(item.roomFuncType);
|
|
|
+ item.icon = mapIcon[typeName].icon;
|
|
|
+ item.selectIcon = mapIcon[typeName].selectIcon;
|
|
|
+ item.backgroundColor = mapIcon[typeName].backgroundColor;
|
|
|
+ item.bg = mapIcon[typeName].bg;
|
|
|
+ item.icon = parseImgUrl("map-new-icon", item.icon);
|
|
|
+ item.selectIcon = parseImgUrl("map-new-icon", item.selectIcon);
|
|
|
+ } else {
|
|
|
+ item.icon = "";
|
|
|
+ }
|
|
|
+ },
|
|
|
// canvas画图
|
|
|
initCanvas() {
|
|
|
let canvasDom: any = document.querySelector("#myCanvas");
|
|
|
let ctx: any = canvasDom.getContext("2d");
|
|
|
+ // debugger;
|
|
|
proxyData.drawDpiBegin(
|
|
|
canvasDom,
|
|
|
ctx,
|
|
@@ -88,25 +108,14 @@ export default defineComponent({
|
|
|
proxyData.height
|
|
|
);
|
|
|
proxyData.ctx = ctx;
|
|
|
- ctx.clearRect(0, 0, proxyData.width, proxyData.height);
|
|
|
- ctx.scale(
|
|
|
- proxyData.scale,
|
|
|
- proxyData.scale,
|
|
|
- centerObj.left,
|
|
|
- centerObj.top
|
|
|
- );
|
|
|
-
|
|
|
proxyData.spaceList.map((item: any) => {
|
|
|
- // debugger
|
|
|
if (item.canClick) {
|
|
|
let circleArr: any = item.circlePoint;
|
|
|
ctx.beginPath();
|
|
|
ctx.fillStyle = item.fillColor;
|
|
|
let pointLeftArr: any = [];
|
|
|
let pointTopArr: any = [];
|
|
|
-
|
|
|
item.pointArr.map((childItem: any, index: any) => {
|
|
|
- // debugger
|
|
|
childItem.left = childItem.left;
|
|
|
childItem.top = childItem.top;
|
|
|
if (index == 0) {
|
|
@@ -117,19 +126,13 @@ export default defineComponent({
|
|
|
pointLeftArr.push(childItem.left);
|
|
|
pointTopArr.push(childItem.top);
|
|
|
});
|
|
|
- // debugger;
|
|
|
- console.log(item.devicePoint);
|
|
|
- proxyData.drawIcon(ctx, "coffee.svg", item.devicePoint[0]);
|
|
|
- // proxyData.drawIcon(ctx, "dev.svg", item.devicePoint[1]);
|
|
|
- // proxyData.drawIcon(ctx, "deviceroom.svg", item.devicePoint[2]);
|
|
|
- ctx.closePath();
|
|
|
+ // proxyData.drawIcon(ctx, "coffee.svg", item.devicePoint[0]);
|
|
|
+
|
|
|
ctx.fill();
|
|
|
- ctx.lineWidth = 1;
|
|
|
- ctx.strokeStyle = "rgba(15, 206, 233, 1)";
|
|
|
- ctx.stroke();
|
|
|
+ ctx.closePath();
|
|
|
ctx.beginPath();
|
|
|
if (circleArr && circleArr.length) {
|
|
|
- console.log(circleArr);
|
|
|
+ ctx.fillStyle = item.fillColor;
|
|
|
ctx.lineTo(circleArr[3].left, circleArr[3].top);
|
|
|
ctx.bezierCurveTo(
|
|
|
circleArr[2].left,
|
|
@@ -142,10 +145,6 @@ export default defineComponent({
|
|
|
}
|
|
|
ctx.closePath();
|
|
|
ctx.fill();
|
|
|
- ctx.lineWidth = 1;
|
|
|
- ctx.strokeStyle = "rgba(15, 206, 233, 1)";
|
|
|
- ctx.stroke();
|
|
|
-
|
|
|
let min1: any =
|
|
|
proxyData.MaxAndMin(pointLeftArr)[1] -
|
|
|
proxyData.MaxAndMin(pointLeftArr)[0];
|
|
@@ -156,23 +155,29 @@ export default defineComponent({
|
|
|
ctx.beginPath();
|
|
|
ctx.font = "13px serif";
|
|
|
ctx.textAlign = "center";
|
|
|
- ctx.fillStyle = item.fillColor !== "#ececec" ? "#ffffff" : "red";
|
|
|
- console.log("min===" + min);
|
|
|
+ ctx.fillStyle = item.fillColor === "#fff" ? "#000" : "#8995BA";
|
|
|
if (item.localName && min > 100) {
|
|
|
ctx.fillText(
|
|
|
item.localName,
|
|
|
- item.logPointArr[0].left,
|
|
|
- item.logPointArr[0].top,
|
|
|
+ item.logoPointArr[0].left,
|
|
|
+ item.logoPointArr[0].top,
|
|
|
item.width
|
|
|
);
|
|
|
}
|
|
|
- ctx.closePath();
|
|
|
- if (item.shadow) {
|
|
|
- item.shadowColor = "#000000";
|
|
|
- ctx.shadowOffsetX = -50; //阴影x轴位移。正值向右,负值向左。
|
|
|
- ctx.shadowOffsetY = -50; //阴影y轴位移。正值向下,负值向上。
|
|
|
- ctx.shadowBlur = 10; //阴影模糊滤镜。数据越大,扩散程度越大。
|
|
|
+ let localName: any = item.localName;
|
|
|
+ let drutionLef: any = localName ? item.localName["length"] * 13 : 0;
|
|
|
+ if (item.icon) {
|
|
|
+ proxyData.drawIcon(ctx, item.icon, {
|
|
|
+ left: item.logoPointArr[0].left - drutionLef / 2+15,
|
|
|
+ top: item.logoPointArr[0].top - 35,
|
|
|
+ });
|
|
|
}
|
|
|
+
|
|
|
+ item.shadowColor = "#000000";
|
|
|
+ ctx.shadowOffsetX = -50; //阴影x轴位移。正值向右,负值向左。
|
|
|
+ ctx.shadowOffsetY = -50; //阴影y轴位移。正值向下,负值向上。
|
|
|
+ ctx.shadowBlur = 10; //阴影模糊滤镜。数据越大,扩散程度越大。
|
|
|
+ ctx.closePath();
|
|
|
} else {
|
|
|
let img: any = new Image();
|
|
|
img.src = require("@/assets/svg/bg_disable.png");
|
|
@@ -185,14 +190,12 @@ export default defineComponent({
|
|
|
ctx.lineTo(item.left, item.top);
|
|
|
}
|
|
|
});
|
|
|
- // ctx.fillStyle = "#cfefef";
|
|
|
- // ctx.fill();
|
|
|
let pat: any = ctx.createPattern(img, "repeat");
|
|
|
ctx.fillStyle = pat;
|
|
|
ctx.fill();
|
|
|
ctx.closePath();
|
|
|
- ctx.strokeStyle = "rgba(15, 206, 233, 1)";
|
|
|
- ctx.stroke();
|
|
|
+ // ctx.strokeStyle = "rgba(15, 206, 233, 1)";
|
|
|
+ // ctx.stroke();
|
|
|
};
|
|
|
}
|
|
|
});
|
|
@@ -212,12 +215,19 @@ export default defineComponent({
|
|
|
drawDpiBegin(dom: any, context: any, width: any, height: any) {
|
|
|
context.save();
|
|
|
let scaleValue = window.devicePixelRatio;
|
|
|
- dom.setAttribute("width", width * scaleValue);
|
|
|
- dom.setAttribute("height", height * scaleValue);
|
|
|
+ console.log("ddd", width * scaleValue * proxyData.scale);
|
|
|
+ dom.setAttribute("width", width * scaleValue * proxyData.scale);
|
|
|
+ dom.setAttribute("height", height * scaleValue * proxyData.scale);
|
|
|
|
|
|
- dom.style.width = width + "px";
|
|
|
- dom.style.height = height + "px";
|
|
|
+ dom.style.width = width * proxyData.scale + "px";
|
|
|
+ dom.style.height = height * proxyData.scale + "px";
|
|
|
context.scale(scaleValue, scaleValue);
|
|
|
+ context.clearRect(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ width * proxyData.scale,
|
|
|
+ height * proxyData.scale
|
|
|
+ );
|
|
|
},
|
|
|
// 画图介绍
|
|
|
drawDpiEnd(dom: any, context: any) {
|
|
@@ -228,10 +238,6 @@ export default defineComponent({
|
|
|
let canvasDom: any = document.querySelector("#myCanvas");
|
|
|
let x: any = event.clientX - canvasDom.getBoundingClientRect().left;
|
|
|
let y: any = event.clientY - canvasDom.getBoundingClientRect().top;
|
|
|
- // let ctx: any = canvasDom.getContext("2d");
|
|
|
- // proxyData.initCanvas();
|
|
|
- console.log(event);
|
|
|
- // alert("点击了!");
|
|
|
for (let i = 0; i < proxyData.spaceList.length; i++) {
|
|
|
let item: any = proxyData.spaceList[i];
|
|
|
let devicePoint: any = item.devicePoint;
|
|
@@ -323,7 +329,7 @@ export default defineComponent({
|
|
|
drawIcon(ctx: any, url: any, iconPerstion: any) {
|
|
|
if (iconPerstion) {
|
|
|
let img: any = new Image();
|
|
|
- img.src = require(`@/assets/svg/${url}`);
|
|
|
+ img.src = url;
|
|
|
img.onload = function () {
|
|
|
ctx.drawImage(img, iconPerstion.left, iconPerstion.top, 25, 15);
|
|
|
iconPerstion.width = 30;
|
|
@@ -347,9 +353,31 @@ export default defineComponent({
|
|
|
// 数据格式化
|
|
|
formSpaceData() {
|
|
|
proxyData.spaceList = JSON.parse(proxyData.copySpaceArr);
|
|
|
-
|
|
|
proxyData.spaceList.map((item: any) => {
|
|
|
- item.fillColor = "#ececec";
|
|
|
+ if (item.canClick) {
|
|
|
+ item.fillColor = "#fff";
|
|
|
+ }
|
|
|
+ item.devicePoint.map((dev: any) => {
|
|
|
+ dev.left = dev.left * proxyData.scale;
|
|
|
+ dev.top = dev.top * proxyData.scale;
|
|
|
+ });
|
|
|
+ item.logoPointArr.map((dev: any) => {
|
|
|
+ dev.left = dev.left * proxyData.scale;
|
|
|
+ dev.top = dev.top * proxyData.scale;
|
|
|
+ });
|
|
|
+ item.pointArr.map((dev: any) => {
|
|
|
+ dev.left = dev.left * proxyData.scale;
|
|
|
+ dev.top = dev.top * proxyData.scale;
|
|
|
+ });
|
|
|
+ item.circlePoint.map((dev: any) => {
|
|
|
+ dev.left = dev.left * proxyData.scale;
|
|
|
+ dev.top = dev.top * proxyData.scale;
|
|
|
+ });
|
|
|
+ item.detailPoint.map((dev: any) => {
|
|
|
+ dev.left = dev.left * proxyData.scale;
|
|
|
+ dev.top = dev.top * proxyData.scale;
|
|
|
+ });
|
|
|
+ proxyData.setSpaceIcon(item);
|
|
|
});
|
|
|
},
|
|
|
// 格式化地图数据
|
|
@@ -358,6 +386,7 @@ export default defineComponent({
|
|
|
{
|
|
|
spaceId: "1",
|
|
|
localName: "H301",
|
|
|
+ roomFuncType: "300",
|
|
|
canClick: true,
|
|
|
pointArr: [
|
|
|
{
|
|
@@ -409,36 +438,15 @@ export default defineComponent({
|
|
|
proxyData.copySpaceArr = JSON.stringify(spaceList);
|
|
|
proxyData.formSpaceData();
|
|
|
},
|
|
|
-
|
|
|
- /**
|
|
|
- * 获取地图信息
|
|
|
- */
|
|
|
- getMapInfo() {
|
|
|
- let params: any = {
|
|
|
- projectId: "Pj1101080259",
|
|
|
- floorId: "Fl11010802593241ec348ecb4148806b9034c8957454",
|
|
|
- };
|
|
|
- getMapInfo(params)
|
|
|
- .then((res) => {
|
|
|
- // debugger
|
|
|
- let resData: any = res;
|
|
|
- let data: any = resData?.data ?? null;
|
|
|
- proxyData.width = data.width;
|
|
|
- proxyData.height = data.height;
|
|
|
- proxyData.spaceList = data.spaceList;
|
|
|
- proxyData.setSpaceColor();
|
|
|
- proxyData.initCanvas();
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
- },
|
|
|
- });
|
|
|
- nextTick(() => {
|
|
|
- proxyData.bindEvent();
|
|
|
});
|
|
|
onMounted(() => {
|
|
|
- // proxyData.getMapInfo();
|
|
|
- proxyData.formatePage();
|
|
|
- proxyData.initCanvas();
|
|
|
+ setTimeout(() => {
|
|
|
+ proxyData.formatePage();
|
|
|
+ nextTick(() => {
|
|
|
+ proxyData.initCanvas();
|
|
|
+ proxyData.bindEvent();
|
|
|
+ });
|
|
|
+ }, 500);
|
|
|
});
|
|
|
return {
|
|
|
...toRefs(proxyData),
|