1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330 |
- <template>
- <div class="com-upload" style="position: relative">
- <van-search
- v-model="spaceName"
- class="space-search"
- placeholder="请输入搜索关键词"
- @update:model-value="searchSpace"
- />
- <div
- class="search-bt"
- style="position: fixed; right: 20px; top: 80px; z-index: 999"
- >
- <div @click="zommAdd" style="display: inline-block; font-size: 30px">
- <van-icon name="add-o" color="#1989fa" />
- </div>
- <div @click="zommDel" style="display: inline-block; font-size: 30px">
- <van-icon name="minus" color="#1989fa" />
- </div>
- </div>
- <div class="canvas-box" id="canvasBox">
- <canvas id="myCanvas" class="canvas-dom" style="boder: 1px solid red">
-
- </canvas>
- </div>
- </div>
- </template>
-
- <script lang="ts">
- import { Search } from "vant";
- import { number } from "echarts";
- import { getMapInfo } from "@/apis/envmonitor";
- import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
- import { parseImgUrl } from "@/utils";
- import { swiper } from "@/utils/swiper";
- export default defineComponent({
- components: {
- VanSearch: Search,
- },
- setup() {
- let spaceList: any = [];
- let ctx: any = {};
- let centerObj: any = {};
- const proxyData = reactive({
- spaceList: spaceList,
- copySpaceArr: spaceList,
- parseImgUrl: parseImgUrl,
- spaceName: "",
- width: 4327.5,
- height: 3078.75,
- scale: 1,
- ctx: ctx,
- centerObj: centerObj,
- // 搜索某个空间
- searchSpace() {
- proxyData.spaceList.map((item: any) => {
- // debugger
- console.log(item.localName == proxyData.spaceName);
- console.log("搜索====");
- console.log(item.localName);
- console.log(proxyData.spaceName);
- if (item.localName == proxyData.spaceName) {
- console.log("搜索到某个空间");
- item.fillColor = "red";
- item.shadow = true;
- proxyData.initCanvas();
- } else {
- // item.shadow = false;
- // item.fillColor = "#ececec";
- }
- });
- },
- // 放大
- zommAdd() {
- console.log("被点击了");
- if (proxyData.scale > 3) {
- return;
- }
- proxyData.scale = proxyData.scale + 0.1;
- // debugger;
- proxyData.formSpaceData();
- proxyData.initCanvas();
- },
- // 缩小
- zommDel() {
- if (proxyData.scale < 0.3) {
- return;
- }
- proxyData.scale = proxyData.scale - 0.1;
- proxyData.formSpaceData();
- proxyData.initCanvas();
- },
- sliderSwiper() {
- // 获取当前时间的下标
- let sliderList: any = document.querySelector("#sliderListId");
- sliderList.addEventListener("touchstart", function (e: any) {});
- swiper(sliderList, {
- swipeLeft: function (e: any) {},
- swipeRight: function (e: any) {},
- });
- },
- // canvas画图
- initCanvas() {
- let canvasDom: any = document.querySelector("#myCanvas");
- canvasDom.width = proxyData.width * proxyData.scale;
- canvasDom.height = proxyData.height * proxyData.scale;
- let ctx: any = canvasDom.getContext("2d");
- 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) => {
- 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) {
- ctx.moveTo(childItem.left, childItem.top);
- } else {
- ctx.lineTo(childItem.left, childItem.top);
- }
- pointLeftArr.push(childItem.left);
- pointTopArr.push(childItem.top);
- });
- 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();
- ctx.fill();
- ctx.lineWidth = 1;
- ctx.strokeStyle = "rgba(15, 206, 233, 1)";
- ctx.stroke();
- ctx.beginPath();
- if (circleArr && circleArr.length) {
- console.log(circleArr);
- ctx.lineTo(circleArr[3].left, circleArr[3].top);
- ctx.bezierCurveTo(
- circleArr[2].left,
- circleArr[2].top,
- circleArr[1].left,
- circleArr[1].top,
- circleArr[0].left,
- circleArr[0].top
- );
- }
- 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];
- let min2: any =
- proxyData.MaxAndMin(pointTopArr)[1] -
- proxyData.MaxAndMin(pointTopArr)[0];
- let min: any = min1 < min2 ? min1 : min2;
- ctx.beginPath();
- ctx.font = "13px serif";
- ctx.textAlign = "center";
- ctx.fillStyle = item.fillColor !== "#ececec" ? "#ffffff" : "red";
- console.log("min===" + min);
- if (item.localName && min > 100) {
- ctx.fillText(
- item.localName,
- item.logPointArr[0].left,
- item.logPointArr[0].top,
- item.width
- );
- }
- ctx.closePath();
- if (item.shadow) {
- item.shadowColor = "#000000";
- ctx.shadowOffsetX = -50; //阴影x轴位移。正值向右,负值向左。
- ctx.shadowOffsetY = -50; //阴影y轴位移。正值向下,负值向上。
- ctx.shadowBlur = 10; //阴影模糊滤镜。数据越大,扩散程度越大。
- }
- } else {
- let img: any = new Image();
- img.src = require("@/assets/svg/bg_disable.png");
- img.onload = function () {
- ctx.beginPath();
- item.pointArr.map((item: any, index: any) => {
- if (index === 0) {
- ctx.moveTo(item.left, item.top);
- } else {
- 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();
- };
- }
- });
- },
- MaxAndMin(arr: any) {
- return [Math.min.apply(null, arr), Math.max.apply(null, arr)];
- },
- // 绑定事件
- bindEvent() {
- let canvasDom: any = document.querySelector("#myCanvas");
- // 点击事件
- canvasDom.addEventListener("click", proxyData.detect);
- },
- // 地图点击事件
- detect(event: any) {
- 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;
- let pointArr: any = item.pointArr;
- let iconFlag: any = false;
- devicePoint.map((dev: any, index: any) => {
- if (
- x >= dev.left &&
- x <= dev.left + 20 &&
- y >= dev.top &&
- y < dev.top + 20
- ) {
- // alert("我被点了!");
- // console.log("我被点了!")
- iconFlag = true;
- console.log(`我被点了设备图标!${index}`);
- }
- });
- if (iconFlag) {
- break;
- }
- let dot: any = {
- x: x,
- y: y,
- };
- let coordinates: any = pointArr;
- coordinates.map((item: any) => {
- item.x = item.left;
- item.y = item.top;
- });
- let flag = proxyData.queryPtInPolygon(dot, coordinates);
- // console.log(flag);
- if (flag) {
- console.log("点击了区域"+item.localName);
- break;
- }
- }
- },
- queryPtInPolygon(point: any, polygon: any) {
- let p1: any = "";
- let p2: any = "";
- let p3: any = "";
- let p4: any = "";
- p1 = point;
- p2 = { x: 1000000000000, y: point.y };
- let count: any = 0;
- //对每条边都和射线作对比
- for (let i = 0; i < polygon.length - 1; i++) {
- p3 = polygon[i];
- p4 = polygon[i + 1];
- if (checkCross(p1, p2, p3, p4) == true) {
- count++;
- }
- }
- p3 = polygon[polygon.length - 1];
- p4 = polygon[0];
- if (checkCross(p1, p2, p3, p4) == true) {
- count++;
- }
- return count % 2 == 0 ? false : true;
- //判断两条线段是否相交
- function checkCross(p1: any, p2: any, p3: any, p4: any) {
- let v1: any = { x: p1.x - p3.x, y: p1.y - p3.y };
- let v2: any = { x: p2.x - p3.x, y: p2.y - p3.y };
- let v3: any = { x: p4.x - p3.x, y: p4.y - p3.y };
- let v: any = crossMul(v1, v3) * crossMul(v2, v3);
- v1 = { x: p3.x - p1.x, y: p3.y - p1.y };
- v2 = { x: p4.x - p1.x, y: p4.y - p1.y };
- v3 = { x: p2.x - p1.x, y: p2.y - p1.y };
- return v <= 0 && crossMul(v1, v3) * crossMul(v2, v3) <= 0
- ? true
- : false;
- }
- //计算向量叉乘
- function crossMul(v1: any, v2: any) {
- return v1.x * v2.y - v1.y * v2.x;
- }
- },
- drawIcon(ctx: any, url: any, iconPerstion: any) {
- let img: any = new Image();
- img.src = require(`@/assets/svg/${url}`);
- img.onload = function () {
- ctx.drawImage(img, iconPerstion.left, iconPerstion.top, 25, 15);
- iconPerstion.width = 30;
- iconPerstion.height = 30;
- };
- },
- // 设置区域颜色
- setSpaceColor() {
- proxyData.spaceList.map((item: any, index: any) => {
- if (index % 2 == 0) {
- item.fillColor = "#ffcc33";
- } else if (index % 3 == 0) {
- item.fillColor = "#ccff99";
- } else {
- item.fillColor = "#ececec";
- }
- });
- console.log(proxyData.spaceList);
- },
- // 数据格式化
- formSpaceData() {
- proxyData.spaceList = JSON.parse(proxyData.copySpaceArr);
- proxyData.spaceList.map((item: any) => {
- item.canClick = true;
- item.fillColor = "#ececec";
- // debugger
- item.devicePoint.map((dev: any) => {
- dev.left = dev.left * proxyData.scale;
- dev.top = (proxyData.height - dev.top) * proxyData.scale;
- });
- item.logPointArr.map((dev: any) => {
- dev.left = dev.left * proxyData.scale;
- dev.top = (proxyData.height - dev.top) * proxyData.scale;
- });
- item.pointArr.map((dev: any) => {
- dev.left = dev.left * proxyData.scale;
- dev.top = (proxyData.height - dev.top) * proxyData.scale;
- });
- item.circlePoint.map((dev: any) => {
- dev.left = dev.left * proxyData.scale;
- dev.top = (proxyData.height - dev.top) * proxyData.scale;
- });
- });
- },
- // 格式化地图数据
- formatePage() {
- let spaceList: any = [
- {
- spaceId: "办公室A301",
- localName: "办公室A301",
- canClick: true,
- pointArr: [
- {
- left: "1913.001",
- top: "949.4397",
- },
- {
- left: "1913.001",
- top: "878.5956",
- },
- {
- left: "1781.161",
- top: "742.9783",
- },
- {
- left: "1855.397",
- top: "668.743",
- },
- {
- left: "1820.078",
- top: "633.4244",
- },
- {
- left: "1641.001",
- top: "633.4244",
- },
- {
- left: "1641.001",
- top: "526.7994",
- },
- {
- left: "1613.501",
- top: "526.7994",
- },
- {
- left: "1613.501",
- top: "468.0494",
- },
- {
- left: "1499.376",
- top: "468",
- },
- {
- left: "1499.376",
- top: "401.7994",
- },
- {
- left: "1090.751",
- top: "401.7994",
- },
- {
- left: "1090.751",
- top: "949.4397",
- },
- ],
- devicePoint: [
- {
- left: "1790",
- top: "913",
- },
- {
- left: "1725",
- top: "913",
- },
- {
- left: "1663",
- top: "913",
- },
- ],
- circlePoint: [],
- logPointArr: [
- {
- left: "1355",
- top: "722",
- },
- {
- left: "1355",
- top: "766",
- },
- ],
- },
- {
- spaceId: "办公室A302",
- localName: "办公室A302",
- canClick: true,
- pointArr: [
- {
- left: "1085.751",
- top: "949.4397",
- },
- {
- left: "1085.751",
- top: "401.7994",
- },
- {
- left: "815.0008",
- top: "401.7994",
- },
- {
- left: "815.0008",
- top: "468",
- },
- {
- left: "668.3758",
- top: "468",
- },
- {
- left: "668.3758",
- top: "525.5494",
- },
- {
- left: "530.8758",
- top: "525.5494",
- },
- {
- left: "530.8758",
- top: "949.4397",
- },
- ],
- devicePoint: [
- {
- left: "1021",
- top: "913",
- },
- {
- left: "969",
- top: "913",
- },
- {
- left: "913",
- top: "913",
- },
- ],
- circlePoint: [],
- logPointArr: [
- {
- left: "787",
- top: "724",
- },
- {
- left: "787",
- top: "762",
- },
- ],
- },
- {
- spaceId: "办公室A303",
- localName: "办公室A303",
- canClick: true,
- pointArr: [
- {
- left: "2402.001",
- top: "949.4397",
- },
- {
- left: "2402.001",
- top: "633.4244",
- },
- {
- left: "2246.626",
- top: "633.4244",
- },
- {
- left: "2246.626",
- top: "530.5494",
- },
- {
- left: "2322.876",
- top: "530.8391",
- },
- {
- left: "2322.876",
- top: "394.0305",
- },
- {
- left: "1860.126",
- top: "376.175",
- },
- {
- left: "1860.126",
- top: "553.2639",
- },
- {
- left: "2055.876",
- top: "750.0494",
- },
- {
- left: "2055.876",
- top: "949.4397",
- },
- ],
- devicePoint: [
- {
- left: "2354",
- top: "911",
- },
- {
- left: "2300",
- top: "911",
- },
- {
- left: "2250",
- top: "911",
- },
- ],
- circlePoint: [
- {
- left: "2322.876",
- top: "394.0305",
- },
- {
- left: "2292.682",
- top: "365.171",
- },
- {
- left: "1949.325",
- top: "347.4",
- },
- {
- left: "1860.126",
- top: "376.175",
- },
- ],
- logPointArr: [
- {
- left: "2178",
- top: "735",
- },
- {
- left: "2178",
- top: "786",
- },
- ],
- },
- {
- spaceId: "空间1",
- localName: "空间1",
- canClick: true,
- pointArr: [
- {
- left: "1369.626",
- top: "1178.549",
- },
- {
- left: "1329.594",
- top: "1178.549",
- },
- {
- left: "1294.238",
- top: "1143.194",
- },
- {
- left: "1179.453",
- top: "1257.98",
- },
- {
- left: "1205.969",
- top: "1284.496",
- },
- {
- left: "1202.218",
- top: "1288.248",
- },
- {
- left: "1202.218",
- top: "1296.049",
- },
- {
- left: "1369.626",
- top: "1296.049",
- },
- ],
- devicePoint: [
- {
- left: "1346.8",
- top: "1281.975",
- },
- {
- left: "1326.35",
- top: "1282.4",
- },
- {
- left: "1304.875",
- top: "1282.6",
- },
- ],
- circlePoint: [],
- logPointArr: [
- {
- left: "1286.9",
- top: "1228.5",
- },
- {
- left: "1287.1",
- top: "1239.025",
- },
- ],
- },
- {
- spaceId: "空间2",
- localName: "空间2",
- canClick: true,
- pointArr: [
- {
- left: "1561.053",
- top: "1107.957",
- },
- {
- left: "1500.395",
- top: "1047.299",
- },
- {
- left: "1429.626",
- top: "1047.299",
- },
- {
- left: "1429.626",
- top: "1178.056",
- },
- {
- left: "1460.29",
- top: "1208.72",
- },
- ],
- devicePoint: [
- {
- left: "1489.375",
- top: "1145.875",
- },
- {
- left: "1468.4",
- top: "1143.925",
- },
- {
- left: "1449.35",
- top: "1143.925",
- },
- ],
- circlePoint: [],
- logPointArr: [
- {
- left: "1470.35",
- top: "1103.125",
- },
- {
- left: "1469.95",
- top: "1114.4",
- },
- ],
- },
- {
- spaceId: "空间4",
- localName: "空间4",
- canClick: true,
- pointArr: [
- {
- left: "1801.665",
- top: "1377.289",
- },
- {
- left: "1720.283",
- top: "1295.907",
- },
- {
- left: "1662.513",
- top: "1353.677",
- },
- {
- left: "1743.895",
- top: "1435.059",
- },
- ],
- devicePoint: [
- {
- left: "1763.075",
- top: "1389.925",
- },
- {
- left: "1738.825",
- top: "1390.875",
- },
- {
- left: "1718.05",
- top: "1389.6",
- },
- ],
- circlePoint: [],
- logPointArr: [
- {
- left: "1728.125",
- top: "1350.575",
- },
- {
- left: "1727.175",
- top: "1365.05",
- },
- ],
- },
- {
- spaceId: "空间5",
- localName: "空间5",
- canClick: true,
- pointArr: [
- {
- left: "1803.786",
- top: "1375.167",
- },
- {
- left: "1860.496",
- top: "1318.458",
- },
- {
- left: "1779.114",
- top: "1237.076",
- },
- {
- left: "1722.404",
- top: "1293.785",
- },
- ],
- devicePoint: [
- {
- left: "1820.05",
- top: "1328.225",
- },
- {
- left: "1803.675",
- top: "1326.975",
- },
- {
- left: "1782.275",
- top: "1328.225",
- },
- ],
- circlePoint: [],
- logPointArr: [
- {
- left: "1784.15",
- top: "1292.65",
- },
- {
- left: "1783.525",
- top: "1306.825",
- },
- ],
- },
- {
- spaceId: "空间6",
- localName: "空间6",
- canClick: true,
- pointArr: [
- {
- left: "1839.005",
- top: "1177.184",
- },
- {
- left: "1920.387",
- top: "1258.566",
- },
- {
- left: "1862.617",
- top: "1316.336",
- },
- {
- left: "1781.235",
- top: "1234.954",
- },
- ],
- devicePoint: [
- {
- left: "1877.65",
- top: "1267.8",
- },
- {
- left: "1853.725",
- top: "1267.475",
- },
- {
- left: "1832.625",
- top: "1266.85",
- },
- ],
- circlePoint: [],
- logPointArr: [
- {
- left: "1838.625",
- top: "1236.95",
- },
- {
- left: "1836.725",
- top: "1249.525",
- },
- ],
- },
- {
- spaceId: "空间7",
- localName: "空间7",
- canClick: true,
- pointArr: [
- {
- left: "1905.647",
- top: "1407.436",
- },
- {
- left: "1987.452",
- top: "1325.631",
- },
- {
- left: "1922.509",
- top: "1260.688",
- },
- {
- left: "1840.704",
- top: "1342.493",
- },
- ],
- devicePoint: [
- {
- left: "1937.125",
- top: "1351.825",
- },
- {
- left: "1914.475",
- top: "1352.475",
- },
- {
- left: "1888.35",
- top: "1353.4",
- },
- ],
- circlePoint: [],
- logPointArr: [
- {
- left: "1911.65",
- top: "1318.775",
- },
- {
- left: "1910.7",
- top: "1334.85",
- },
- ],
- },
- {
- spaceId: "空间8",
- localName: "空间8",
- canClick: true,
- pointArr: [
- {
- left: "1810.959",
- top: "1502.123",
- },
- {
- left: "1903.525",
- top: "1409.557",
- },
- {
- left: "1838.582",
- top: "1344.614",
- },
- {
- left: "1746.016",
- top: "1437.18",
- },
- ],
- devicePoint: [
- {
- left: "1838.925",
- top: "1439.65",
- },
- {
- left: "1816.9",
- top: "1439.35",
- },
- {
- left: "1793.6",
- top: "1439.65",
- },
- ],
- circlePoint: [],
- logPointArr: [
- {
- left: "1817.2",
- top: "1402.2",
- },
- {
- left: "1816.575",
- top: "1421.075",
- },
- ],
- },
- {
- spaceId: "空间9",
- localName: "空间9",
- canClick: true,
- pointArr: [
- {
- left: "1840.218",
- top: "1116.879",
- },
- {
- left: "1905.394",
- top: "1116.879",
- },
- {
- left: "1905.394",
- top: "1014.44",
- },
- {
- left: "1808.586",
- top: "1014.44",
- },
- {
- left: "1773.183",
- top: "1049.843",
- },
- ],
- devicePoint: [
- {
- left: "1875",
- top: "1085",
- },
- {
- left: "1856",
- top: "1085",
- },
- {
- left: "1837",
- top: "1086",
- },
- ],
- circlePoint: [],
- logPointArr: [
- {
- left: "1855",
- top: "1051",
- },
- {
- left: "1855",
- top: "1065",
- },
- ],
- },
- {
- spaceId: "空间10",
- localName: "空间10",
- canClick: true,
- pointArr: [
- {
- left: "2062.998",
- top: "1153.577",
- },
- {
- left: "2062.998",
- top: "1014.44",
- },
- {
- left: "1908.394",
- top: "1014.44",
- },
- {
- left: "1908.394",
- top: "1153.577",
- },
- ],
- devicePoint: [
- {
- left: "2008",
- top: "1103",
- },
- {
- left: "1980",
- top: "1102",
- },
- {
- left: "1949",
- top: "1103",
- },
- ],
- circlePoint: [],
- logPointArr: [
- {
- left: "1981",
- top: "1064",
- },
- {
- left: "1980",
- top: "1083",
- },
- ],
- },
- {
- spaceId: "空间11",
- localName: "空间11",
- canClick: true,
- pointArr: [
- {
- left: "2198.338",
- top: "1153.577",
- },
- {
- left: "2198.338",
- top: "1014.44",
- },
- {
- left: "2065.998",
- top: "1014.44",
- },
- {
- left: "2065.998",
- top: "1153.577",
- },
- ],
- devicePoint: [
- {
- left: "2159",
- top: "1102",
- },
- {
- left: "2129",
- top: "1102",
- },
- {
- left: "2093",
- top: "1103",
- },
- ],
- circlePoint: [],
- logPointArr: [
- {
- left: "2131",
- top: "1063",
- },
- {
- left: "2130",
- top: "1084",
- },
- ],
- },
- {
- spaceId: "空间12",
- localName: "空间12",
- canClick: true,
- pointArr: [
- {
- left: "2266.514",
- top: "1116.879",
- },
- {
- left: "2335.317",
- top: "1048.075",
- },
- {
- left: "2301.681",
- top: "1014.44",
- },
- {
- left: "2201.338",
- top: "1014.44",
- },
- {
- left: "2201.338",
- top: "1116.879",
- },
- ],
- devicePoint: [
- {
- left: "2261",
- top: "1078",
- },
- {
- left: "2241",
- top: "1078",
- },
- {
- left: "2220",
- top: "1078",
- },
- ],
- circlePoint: [],
- logPointArr: [
- {
- left: "2241",
- top: "1050",
- },
- {
- left: "2241",
- top: "1063",
- },
- ],
- },
- {
- spaceId: "空间13",
- localName: "空间13",
- canClick: true,
- pointArr: [
- {
- left: "1908.394",
- top: "1185.054",
- },
- {
- left: "1908.361",
- top: "1156.534",
- },
- {
- left: "2051.866",
- top: "1156.577",
- },
- {
- left: "2051.866",
- top: "1283.888",
- },
- {
- left: "2007.227",
- top: "1283.888",
- },
- ],
- devicePoint: [
- {
- left: "2021",
- top: "1230",
- },
- {
- left: "2000",
- top: "1230",
- },
- {
- left: "1979",
- top: "1230",
- },
- ],
- circlePoint: [],
- logPointArr: [
- {
- left: "2000",
- top: "1200",
- },
- {
- left: "2000",
- top: "1216",
- },
- ],
- },
- {
- spaceId: "空间14",
- localName: "空间14",
- canClick: true,
- pointArr: [
- {
- left: "2099.505",
- top: "1283.888",
- },
- {
- left: "2196.718",
- top: "1186.674",
- },
- {
- left: "2196.718",
- top: "1156.577",
- },
- {
- left: "2054.866",
- top: "1156.577",
- },
- {
- left: "2054.866",
- top: "1283.888",
- },
- ],
- devicePoint: [
- {
- left: "2112",
- top: "1230",
- },
- {
- left: "2092",
- top: "1230",
- },
- {
- left: "2072",
- top: "1230",
- },
- ],
- circlePoint: [],
- logPointArr: [
- {
- left: "2092",
- top: "1204",
- },
- {
- left: "2092",
- top: "1218",
- },
- ],
- },
- ];
- 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();
- });
- return {
- ...toRefs(proxyData),
- };
- },
- });
- </script>
- <style lang="scss" scoped>
- .canvas-box {
- width: 100%;
- height: calc(100% - 80px);
- // overflow-x: hidden;
- // overflow-y: hidden;
- }
- .com-upload {
- width: 100%;
- height: 100%;
- // overflow: hidden;
- }
- .space-search {
- position: fixed;
- width: 350px;
- left: 10px;
- top: 50px;
- z-index: 333;
- }
- </style>
-
|