sichuan.vue 35 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330
  1. <template>
  2. <div class="com-upload" style="position: relative">
  3. <van-search
  4. v-model="spaceName"
  5. class="space-search"
  6. placeholder="请输入搜索关键词"
  7. @update:model-value="searchSpace"
  8. />
  9. <div
  10. class="search-bt"
  11. style="position: fixed; right: 20px; top: 80px; z-index: 999"
  12. >
  13. <div @click="zommAdd" style="display: inline-block; font-size: 30px">
  14. <van-icon name="add-o" color="#1989fa" />
  15. </div>
  16. <div @click="zommDel" style="display: inline-block; font-size: 30px">
  17. <van-icon name="minus" color="#1989fa" />
  18. </div>
  19. </div>
  20. <div class="canvas-box" id="canvasBox">
  21. <canvas id="myCanvas" class="canvas-dom" style="boder: 1px solid red">
  22. </canvas>
  23. </div>
  24. </div>
  25. </template>
  26. <script lang="ts">
  27. import { Search } from "vant";
  28. import { number } from "echarts";
  29. import { getMapInfo } from "@/apis/envmonitor";
  30. import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
  31. import { parseImgUrl } from "@/utils";
  32. import { swiper } from "@/utils/swiper";
  33. export default defineComponent({
  34. components: {
  35. VanSearch: Search,
  36. },
  37. setup() {
  38. let spaceList: any = [];
  39. let ctx: any = {};
  40. let centerObj: any = {};
  41. const proxyData = reactive({
  42. spaceList: spaceList,
  43. copySpaceArr: spaceList,
  44. parseImgUrl: parseImgUrl,
  45. spaceName: "",
  46. width: 4327.5,
  47. height: 3078.75,
  48. scale: 1,
  49. ctx: ctx,
  50. centerObj: centerObj,
  51. // 搜索某个空间
  52. searchSpace() {
  53. proxyData.spaceList.map((item: any) => {
  54. // debugger
  55. console.log(item.localName == proxyData.spaceName);
  56. console.log("搜索====");
  57. console.log(item.localName);
  58. console.log(proxyData.spaceName);
  59. if (item.localName == proxyData.spaceName) {
  60. console.log("搜索到某个空间");
  61. item.fillColor = "red";
  62. item.shadow = true;
  63. proxyData.initCanvas();
  64. } else {
  65. // item.shadow = false;
  66. // item.fillColor = "#ececec";
  67. }
  68. });
  69. },
  70. // 放大
  71. zommAdd() {
  72. console.log("被点击了");
  73. if (proxyData.scale > 3) {
  74. return;
  75. }
  76. proxyData.scale = proxyData.scale + 0.1;
  77. // debugger;
  78. proxyData.formSpaceData();
  79. proxyData.initCanvas();
  80. },
  81. // 缩小
  82. zommDel() {
  83. if (proxyData.scale < 0.3) {
  84. return;
  85. }
  86. proxyData.scale = proxyData.scale - 0.1;
  87. proxyData.formSpaceData();
  88. proxyData.initCanvas();
  89. },
  90. sliderSwiper() {
  91. // 获取当前时间的下标
  92. let sliderList: any = document.querySelector("#sliderListId");
  93. sliderList.addEventListener("touchstart", function (e: any) {});
  94. swiper(sliderList, {
  95. swipeLeft: function (e: any) {},
  96. swipeRight: function (e: any) {},
  97. });
  98. },
  99. // canvas画图
  100. initCanvas() {
  101. let canvasDom: any = document.querySelector("#myCanvas");
  102. canvasDom.width = proxyData.width * proxyData.scale;
  103. canvasDom.height = proxyData.height * proxyData.scale;
  104. let ctx: any = canvasDom.getContext("2d");
  105. proxyData.ctx = ctx;
  106. ctx.clearRect(0, 0, proxyData.width, proxyData.height);
  107. ctx.scale(
  108. proxyData.scale,
  109. proxyData.scale,
  110. centerObj.left,
  111. centerObj.top
  112. );
  113. proxyData.spaceList.map((item: any) => {
  114. if (item.canClick) {
  115. let circleArr: any = item.circlePoint;
  116. ctx.beginPath();
  117. ctx.fillStyle = item.fillColor;
  118. let pointLeftArr: any = [];
  119. let pointTopArr: any = [];
  120. item.pointArr.map((childItem: any, index: any) => {
  121. // debugger
  122. childItem.left = childItem.left;
  123. childItem.top = childItem.top;
  124. if (index == 0) {
  125. ctx.moveTo(childItem.left, childItem.top);
  126. } else {
  127. ctx.lineTo(childItem.left, childItem.top);
  128. }
  129. pointLeftArr.push(childItem.left);
  130. pointTopArr.push(childItem.top);
  131. });
  132. proxyData.drawIcon(ctx, "coffee.svg", item.devicePoint[0]);
  133. proxyData.drawIcon(ctx, "dev.svg", item.devicePoint[1]);
  134. proxyData.drawIcon(ctx, "deviceroom.svg", item.devicePoint[2]);
  135. ctx.closePath();
  136. ctx.fill();
  137. ctx.lineWidth = 1;
  138. ctx.strokeStyle = "rgba(15, 206, 233, 1)";
  139. ctx.stroke();
  140. ctx.beginPath();
  141. if (circleArr && circleArr.length) {
  142. console.log(circleArr);
  143. ctx.lineTo(circleArr[3].left, circleArr[3].top);
  144. ctx.bezierCurveTo(
  145. circleArr[2].left,
  146. circleArr[2].top,
  147. circleArr[1].left,
  148. circleArr[1].top,
  149. circleArr[0].left,
  150. circleArr[0].top
  151. );
  152. }
  153. ctx.closePath();
  154. ctx.fill();
  155. ctx.lineWidth = 1;
  156. ctx.strokeStyle = "rgba(15, 206, 233, 1)";
  157. ctx.stroke();
  158. let min1: any =
  159. proxyData.MaxAndMin(pointLeftArr)[1] -
  160. proxyData.MaxAndMin(pointLeftArr)[0];
  161. let min2: any =
  162. proxyData.MaxAndMin(pointTopArr)[1] -
  163. proxyData.MaxAndMin(pointTopArr)[0];
  164. let min: any = min1 < min2 ? min1 : min2;
  165. ctx.beginPath();
  166. ctx.font = "13px serif";
  167. ctx.textAlign = "center";
  168. ctx.fillStyle = item.fillColor !== "#ececec" ? "#ffffff" : "red";
  169. console.log("min===" + min);
  170. if (item.localName && min > 100) {
  171. ctx.fillText(
  172. item.localName,
  173. item.logPointArr[0].left,
  174. item.logPointArr[0].top,
  175. item.width
  176. );
  177. }
  178. ctx.closePath();
  179. if (item.shadow) {
  180. item.shadowColor = "#000000";
  181. ctx.shadowOffsetX = -50; //阴影x轴位移。正值向右,负值向左。
  182. ctx.shadowOffsetY = -50; //阴影y轴位移。正值向下,负值向上。
  183. ctx.shadowBlur = 10; //阴影模糊滤镜。数据越大,扩散程度越大。
  184. }
  185. } else {
  186. let img: any = new Image();
  187. img.src = require("@/assets/svg/bg_disable.png");
  188. img.onload = function () {
  189. ctx.beginPath();
  190. item.pointArr.map((item: any, index: any) => {
  191. if (index === 0) {
  192. ctx.moveTo(item.left, item.top);
  193. } else {
  194. ctx.lineTo(item.left, item.top);
  195. }
  196. });
  197. // ctx.fillStyle = "#cfefef";
  198. // ctx.fill();
  199. let pat: any = ctx.createPattern(img, "repeat");
  200. ctx.fillStyle = pat;
  201. ctx.fill();
  202. ctx.closePath();
  203. ctx.strokeStyle = "rgba(15, 206, 233, 1)";
  204. ctx.stroke();
  205. };
  206. }
  207. });
  208. },
  209. MaxAndMin(arr: any) {
  210. return [Math.min.apply(null, arr), Math.max.apply(null, arr)];
  211. },
  212. // 绑定事件
  213. bindEvent() {
  214. let canvasDom: any = document.querySelector("#myCanvas");
  215. // 点击事件
  216. canvasDom.addEventListener("click", proxyData.detect);
  217. },
  218. // 地图点击事件
  219. detect(event: any) {
  220. let canvasDom: any = document.querySelector("#myCanvas");
  221. let x: any = event.clientX - canvasDom.getBoundingClientRect().left;
  222. let y: any = event.clientY - canvasDom.getBoundingClientRect().top;
  223. // let ctx: any = canvasDom.getContext("2d");
  224. // proxyData.initCanvas();
  225. console.log(event);
  226. // alert("点击了!");
  227. for (let i = 0; i < proxyData.spaceList.length; i++) {
  228. let item: any = proxyData.spaceList[i];
  229. let devicePoint: any = item.devicePoint;
  230. let pointArr: any = item.pointArr;
  231. let iconFlag: any = false;
  232. devicePoint.map((dev: any, index: any) => {
  233. if (
  234. x >= dev.left &&
  235. x <= dev.left + 20 &&
  236. y >= dev.top &&
  237. y < dev.top + 20
  238. ) {
  239. // alert("我被点了!");
  240. // console.log("我被点了!")
  241. iconFlag = true;
  242. console.log(`我被点了设备图标!${index}`);
  243. }
  244. });
  245. if (iconFlag) {
  246. break;
  247. }
  248. let dot: any = {
  249. x: x,
  250. y: y,
  251. };
  252. let coordinates: any = pointArr;
  253. coordinates.map((item: any) => {
  254. item.x = item.left;
  255. item.y = item.top;
  256. });
  257. let flag = proxyData.queryPtInPolygon(dot, coordinates);
  258. // console.log(flag);
  259. if (flag) {
  260. console.log("点击了区域"+item.localName);
  261. break;
  262. }
  263. }
  264. },
  265. queryPtInPolygon(point: any, polygon: any) {
  266. let p1: any = "";
  267. let p2: any = "";
  268. let p3: any = "";
  269. let p4: any = "";
  270. p1 = point;
  271. p2 = { x: 1000000000000, y: point.y };
  272. let count: any = 0;
  273. //对每条边都和射线作对比
  274. for (let i = 0; i < polygon.length - 1; i++) {
  275. p3 = polygon[i];
  276. p4 = polygon[i + 1];
  277. if (checkCross(p1, p2, p3, p4) == true) {
  278. count++;
  279. }
  280. }
  281. p3 = polygon[polygon.length - 1];
  282. p4 = polygon[0];
  283. if (checkCross(p1, p2, p3, p4) == true) {
  284. count++;
  285. }
  286. return count % 2 == 0 ? false : true;
  287. //判断两条线段是否相交
  288. function checkCross(p1: any, p2: any, p3: any, p4: any) {
  289. let v1: any = { x: p1.x - p3.x, y: p1.y - p3.y };
  290. let v2: any = { x: p2.x - p3.x, y: p2.y - p3.y };
  291. let v3: any = { x: p4.x - p3.x, y: p4.y - p3.y };
  292. let v: any = crossMul(v1, v3) * crossMul(v2, v3);
  293. v1 = { x: p3.x - p1.x, y: p3.y - p1.y };
  294. v2 = { x: p4.x - p1.x, y: p4.y - p1.y };
  295. v3 = { x: p2.x - p1.x, y: p2.y - p1.y };
  296. return v <= 0 && crossMul(v1, v3) * crossMul(v2, v3) <= 0
  297. ? true
  298. : false;
  299. }
  300. //计算向量叉乘
  301. function crossMul(v1: any, v2: any) {
  302. return v1.x * v2.y - v1.y * v2.x;
  303. }
  304. },
  305. drawIcon(ctx: any, url: any, iconPerstion: any) {
  306. let img: any = new Image();
  307. img.src = require(`@/assets/svg/${url}`);
  308. img.onload = function () {
  309. ctx.drawImage(img, iconPerstion.left, iconPerstion.top, 25, 15);
  310. iconPerstion.width = 30;
  311. iconPerstion.height = 30;
  312. };
  313. },
  314. // 设置区域颜色
  315. setSpaceColor() {
  316. proxyData.spaceList.map((item: any, index: any) => {
  317. if (index % 2 == 0) {
  318. item.fillColor = "#ffcc33";
  319. } else if (index % 3 == 0) {
  320. item.fillColor = "#ccff99";
  321. } else {
  322. item.fillColor = "#ececec";
  323. }
  324. });
  325. console.log(proxyData.spaceList);
  326. },
  327. // 数据格式化
  328. formSpaceData() {
  329. proxyData.spaceList = JSON.parse(proxyData.copySpaceArr);
  330. proxyData.spaceList.map((item: any) => {
  331. item.canClick = true;
  332. item.fillColor = "#ececec";
  333. // debugger
  334. item.devicePoint.map((dev: any) => {
  335. dev.left = dev.left * proxyData.scale;
  336. dev.top = (proxyData.height - dev.top) * proxyData.scale;
  337. });
  338. item.logPointArr.map((dev: any) => {
  339. dev.left = dev.left * proxyData.scale;
  340. dev.top = (proxyData.height - dev.top) * proxyData.scale;
  341. });
  342. item.pointArr.map((dev: any) => {
  343. dev.left = dev.left * proxyData.scale;
  344. dev.top = (proxyData.height - dev.top) * proxyData.scale;
  345. });
  346. item.circlePoint.map((dev: any) => {
  347. dev.left = dev.left * proxyData.scale;
  348. dev.top = (proxyData.height - dev.top) * proxyData.scale;
  349. });
  350. });
  351. },
  352. // 格式化地图数据
  353. formatePage() {
  354. let spaceList: any = [
  355. {
  356. spaceId: "办公室A301",
  357. localName: "办公室A301",
  358. canClick: true,
  359. pointArr: [
  360. {
  361. left: "1913.001",
  362. top: "949.4397",
  363. },
  364. {
  365. left: "1913.001",
  366. top: "878.5956",
  367. },
  368. {
  369. left: "1781.161",
  370. top: "742.9783",
  371. },
  372. {
  373. left: "1855.397",
  374. top: "668.743",
  375. },
  376. {
  377. left: "1820.078",
  378. top: "633.4244",
  379. },
  380. {
  381. left: "1641.001",
  382. top: "633.4244",
  383. },
  384. {
  385. left: "1641.001",
  386. top: "526.7994",
  387. },
  388. {
  389. left: "1613.501",
  390. top: "526.7994",
  391. },
  392. {
  393. left: "1613.501",
  394. top: "468.0494",
  395. },
  396. {
  397. left: "1499.376",
  398. top: "468",
  399. },
  400. {
  401. left: "1499.376",
  402. top: "401.7994",
  403. },
  404. {
  405. left: "1090.751",
  406. top: "401.7994",
  407. },
  408. {
  409. left: "1090.751",
  410. top: "949.4397",
  411. },
  412. ],
  413. devicePoint: [
  414. {
  415. left: "1790",
  416. top: "913",
  417. },
  418. {
  419. left: "1725",
  420. top: "913",
  421. },
  422. {
  423. left: "1663",
  424. top: "913",
  425. },
  426. ],
  427. circlePoint: [],
  428. logPointArr: [
  429. {
  430. left: "1355",
  431. top: "722",
  432. },
  433. {
  434. left: "1355",
  435. top: "766",
  436. },
  437. ],
  438. },
  439. {
  440. spaceId: "办公室A302",
  441. localName: "办公室A302",
  442. canClick: true,
  443. pointArr: [
  444. {
  445. left: "1085.751",
  446. top: "949.4397",
  447. },
  448. {
  449. left: "1085.751",
  450. top: "401.7994",
  451. },
  452. {
  453. left: "815.0008",
  454. top: "401.7994",
  455. },
  456. {
  457. left: "815.0008",
  458. top: "468",
  459. },
  460. {
  461. left: "668.3758",
  462. top: "468",
  463. },
  464. {
  465. left: "668.3758",
  466. top: "525.5494",
  467. },
  468. {
  469. left: "530.8758",
  470. top: "525.5494",
  471. },
  472. {
  473. left: "530.8758",
  474. top: "949.4397",
  475. },
  476. ],
  477. devicePoint: [
  478. {
  479. left: "1021",
  480. top: "913",
  481. },
  482. {
  483. left: "969",
  484. top: "913",
  485. },
  486. {
  487. left: "913",
  488. top: "913",
  489. },
  490. ],
  491. circlePoint: [],
  492. logPointArr: [
  493. {
  494. left: "787",
  495. top: "724",
  496. },
  497. {
  498. left: "787",
  499. top: "762",
  500. },
  501. ],
  502. },
  503. {
  504. spaceId: "办公室A303",
  505. localName: "办公室A303",
  506. canClick: true,
  507. pointArr: [
  508. {
  509. left: "2402.001",
  510. top: "949.4397",
  511. },
  512. {
  513. left: "2402.001",
  514. top: "633.4244",
  515. },
  516. {
  517. left: "2246.626",
  518. top: "633.4244",
  519. },
  520. {
  521. left: "2246.626",
  522. top: "530.5494",
  523. },
  524. {
  525. left: "2322.876",
  526. top: "530.8391",
  527. },
  528. {
  529. left: "2322.876",
  530. top: "394.0305",
  531. },
  532. {
  533. left: "1860.126",
  534. top: "376.175",
  535. },
  536. {
  537. left: "1860.126",
  538. top: "553.2639",
  539. },
  540. {
  541. left: "2055.876",
  542. top: "750.0494",
  543. },
  544. {
  545. left: "2055.876",
  546. top: "949.4397",
  547. },
  548. ],
  549. devicePoint: [
  550. {
  551. left: "2354",
  552. top: "911",
  553. },
  554. {
  555. left: "2300",
  556. top: "911",
  557. },
  558. {
  559. left: "2250",
  560. top: "911",
  561. },
  562. ],
  563. circlePoint: [
  564. {
  565. left: "2322.876",
  566. top: "394.0305",
  567. },
  568. {
  569. left: "2292.682",
  570. top: "365.171",
  571. },
  572. {
  573. left: "1949.325",
  574. top: "347.4",
  575. },
  576. {
  577. left: "1860.126",
  578. top: "376.175",
  579. },
  580. ],
  581. logPointArr: [
  582. {
  583. left: "2178",
  584. top: "735",
  585. },
  586. {
  587. left: "2178",
  588. top: "786",
  589. },
  590. ],
  591. },
  592. {
  593. spaceId: "空间1",
  594. localName: "空间1",
  595. canClick: true,
  596. pointArr: [
  597. {
  598. left: "1369.626",
  599. top: "1178.549",
  600. },
  601. {
  602. left: "1329.594",
  603. top: "1178.549",
  604. },
  605. {
  606. left: "1294.238",
  607. top: "1143.194",
  608. },
  609. {
  610. left: "1179.453",
  611. top: "1257.98",
  612. },
  613. {
  614. left: "1205.969",
  615. top: "1284.496",
  616. },
  617. {
  618. left: "1202.218",
  619. top: "1288.248",
  620. },
  621. {
  622. left: "1202.218",
  623. top: "1296.049",
  624. },
  625. {
  626. left: "1369.626",
  627. top: "1296.049",
  628. },
  629. ],
  630. devicePoint: [
  631. {
  632. left: "1346.8",
  633. top: "1281.975",
  634. },
  635. {
  636. left: "1326.35",
  637. top: "1282.4",
  638. },
  639. {
  640. left: "1304.875",
  641. top: "1282.6",
  642. },
  643. ],
  644. circlePoint: [],
  645. logPointArr: [
  646. {
  647. left: "1286.9",
  648. top: "1228.5",
  649. },
  650. {
  651. left: "1287.1",
  652. top: "1239.025",
  653. },
  654. ],
  655. },
  656. {
  657. spaceId: "空间2",
  658. localName: "空间2",
  659. canClick: true,
  660. pointArr: [
  661. {
  662. left: "1561.053",
  663. top: "1107.957",
  664. },
  665. {
  666. left: "1500.395",
  667. top: "1047.299",
  668. },
  669. {
  670. left: "1429.626",
  671. top: "1047.299",
  672. },
  673. {
  674. left: "1429.626",
  675. top: "1178.056",
  676. },
  677. {
  678. left: "1460.29",
  679. top: "1208.72",
  680. },
  681. ],
  682. devicePoint: [
  683. {
  684. left: "1489.375",
  685. top: "1145.875",
  686. },
  687. {
  688. left: "1468.4",
  689. top: "1143.925",
  690. },
  691. {
  692. left: "1449.35",
  693. top: "1143.925",
  694. },
  695. ],
  696. circlePoint: [],
  697. logPointArr: [
  698. {
  699. left: "1470.35",
  700. top: "1103.125",
  701. },
  702. {
  703. left: "1469.95",
  704. top: "1114.4",
  705. },
  706. ],
  707. },
  708. {
  709. spaceId: "空间4",
  710. localName: "空间4",
  711. canClick: true,
  712. pointArr: [
  713. {
  714. left: "1801.665",
  715. top: "1377.289",
  716. },
  717. {
  718. left: "1720.283",
  719. top: "1295.907",
  720. },
  721. {
  722. left: "1662.513",
  723. top: "1353.677",
  724. },
  725. {
  726. left: "1743.895",
  727. top: "1435.059",
  728. },
  729. ],
  730. devicePoint: [
  731. {
  732. left: "1763.075",
  733. top: "1389.925",
  734. },
  735. {
  736. left: "1738.825",
  737. top: "1390.875",
  738. },
  739. {
  740. left: "1718.05",
  741. top: "1389.6",
  742. },
  743. ],
  744. circlePoint: [],
  745. logPointArr: [
  746. {
  747. left: "1728.125",
  748. top: "1350.575",
  749. },
  750. {
  751. left: "1727.175",
  752. top: "1365.05",
  753. },
  754. ],
  755. },
  756. {
  757. spaceId: "空间5",
  758. localName: "空间5",
  759. canClick: true,
  760. pointArr: [
  761. {
  762. left: "1803.786",
  763. top: "1375.167",
  764. },
  765. {
  766. left: "1860.496",
  767. top: "1318.458",
  768. },
  769. {
  770. left: "1779.114",
  771. top: "1237.076",
  772. },
  773. {
  774. left: "1722.404",
  775. top: "1293.785",
  776. },
  777. ],
  778. devicePoint: [
  779. {
  780. left: "1820.05",
  781. top: "1328.225",
  782. },
  783. {
  784. left: "1803.675",
  785. top: "1326.975",
  786. },
  787. {
  788. left: "1782.275",
  789. top: "1328.225",
  790. },
  791. ],
  792. circlePoint: [],
  793. logPointArr: [
  794. {
  795. left: "1784.15",
  796. top: "1292.65",
  797. },
  798. {
  799. left: "1783.525",
  800. top: "1306.825",
  801. },
  802. ],
  803. },
  804. {
  805. spaceId: "空间6",
  806. localName: "空间6",
  807. canClick: true,
  808. pointArr: [
  809. {
  810. left: "1839.005",
  811. top: "1177.184",
  812. },
  813. {
  814. left: "1920.387",
  815. top: "1258.566",
  816. },
  817. {
  818. left: "1862.617",
  819. top: "1316.336",
  820. },
  821. {
  822. left: "1781.235",
  823. top: "1234.954",
  824. },
  825. ],
  826. devicePoint: [
  827. {
  828. left: "1877.65",
  829. top: "1267.8",
  830. },
  831. {
  832. left: "1853.725",
  833. top: "1267.475",
  834. },
  835. {
  836. left: "1832.625",
  837. top: "1266.85",
  838. },
  839. ],
  840. circlePoint: [],
  841. logPointArr: [
  842. {
  843. left: "1838.625",
  844. top: "1236.95",
  845. },
  846. {
  847. left: "1836.725",
  848. top: "1249.525",
  849. },
  850. ],
  851. },
  852. {
  853. spaceId: "空间7",
  854. localName: "空间7",
  855. canClick: true,
  856. pointArr: [
  857. {
  858. left: "1905.647",
  859. top: "1407.436",
  860. },
  861. {
  862. left: "1987.452",
  863. top: "1325.631",
  864. },
  865. {
  866. left: "1922.509",
  867. top: "1260.688",
  868. },
  869. {
  870. left: "1840.704",
  871. top: "1342.493",
  872. },
  873. ],
  874. devicePoint: [
  875. {
  876. left: "1937.125",
  877. top: "1351.825",
  878. },
  879. {
  880. left: "1914.475",
  881. top: "1352.475",
  882. },
  883. {
  884. left: "1888.35",
  885. top: "1353.4",
  886. },
  887. ],
  888. circlePoint: [],
  889. logPointArr: [
  890. {
  891. left: "1911.65",
  892. top: "1318.775",
  893. },
  894. {
  895. left: "1910.7",
  896. top: "1334.85",
  897. },
  898. ],
  899. },
  900. {
  901. spaceId: "空间8",
  902. localName: "空间8",
  903. canClick: true,
  904. pointArr: [
  905. {
  906. left: "1810.959",
  907. top: "1502.123",
  908. },
  909. {
  910. left: "1903.525",
  911. top: "1409.557",
  912. },
  913. {
  914. left: "1838.582",
  915. top: "1344.614",
  916. },
  917. {
  918. left: "1746.016",
  919. top: "1437.18",
  920. },
  921. ],
  922. devicePoint: [
  923. {
  924. left: "1838.925",
  925. top: "1439.65",
  926. },
  927. {
  928. left: "1816.9",
  929. top: "1439.35",
  930. },
  931. {
  932. left: "1793.6",
  933. top: "1439.65",
  934. },
  935. ],
  936. circlePoint: [],
  937. logPointArr: [
  938. {
  939. left: "1817.2",
  940. top: "1402.2",
  941. },
  942. {
  943. left: "1816.575",
  944. top: "1421.075",
  945. },
  946. ],
  947. },
  948. {
  949. spaceId: "空间9",
  950. localName: "空间9",
  951. canClick: true,
  952. pointArr: [
  953. {
  954. left: "1840.218",
  955. top: "1116.879",
  956. },
  957. {
  958. left: "1905.394",
  959. top: "1116.879",
  960. },
  961. {
  962. left: "1905.394",
  963. top: "1014.44",
  964. },
  965. {
  966. left: "1808.586",
  967. top: "1014.44",
  968. },
  969. {
  970. left: "1773.183",
  971. top: "1049.843",
  972. },
  973. ],
  974. devicePoint: [
  975. {
  976. left: "1875",
  977. top: "1085",
  978. },
  979. {
  980. left: "1856",
  981. top: "1085",
  982. },
  983. {
  984. left: "1837",
  985. top: "1086",
  986. },
  987. ],
  988. circlePoint: [],
  989. logPointArr: [
  990. {
  991. left: "1855",
  992. top: "1051",
  993. },
  994. {
  995. left: "1855",
  996. top: "1065",
  997. },
  998. ],
  999. },
  1000. {
  1001. spaceId: "空间10",
  1002. localName: "空间10",
  1003. canClick: true,
  1004. pointArr: [
  1005. {
  1006. left: "2062.998",
  1007. top: "1153.577",
  1008. },
  1009. {
  1010. left: "2062.998",
  1011. top: "1014.44",
  1012. },
  1013. {
  1014. left: "1908.394",
  1015. top: "1014.44",
  1016. },
  1017. {
  1018. left: "1908.394",
  1019. top: "1153.577",
  1020. },
  1021. ],
  1022. devicePoint: [
  1023. {
  1024. left: "2008",
  1025. top: "1103",
  1026. },
  1027. {
  1028. left: "1980",
  1029. top: "1102",
  1030. },
  1031. {
  1032. left: "1949",
  1033. top: "1103",
  1034. },
  1035. ],
  1036. circlePoint: [],
  1037. logPointArr: [
  1038. {
  1039. left: "1981",
  1040. top: "1064",
  1041. },
  1042. {
  1043. left: "1980",
  1044. top: "1083",
  1045. },
  1046. ],
  1047. },
  1048. {
  1049. spaceId: "空间11",
  1050. localName: "空间11",
  1051. canClick: true,
  1052. pointArr: [
  1053. {
  1054. left: "2198.338",
  1055. top: "1153.577",
  1056. },
  1057. {
  1058. left: "2198.338",
  1059. top: "1014.44",
  1060. },
  1061. {
  1062. left: "2065.998",
  1063. top: "1014.44",
  1064. },
  1065. {
  1066. left: "2065.998",
  1067. top: "1153.577",
  1068. },
  1069. ],
  1070. devicePoint: [
  1071. {
  1072. left: "2159",
  1073. top: "1102",
  1074. },
  1075. {
  1076. left: "2129",
  1077. top: "1102",
  1078. },
  1079. {
  1080. left: "2093",
  1081. top: "1103",
  1082. },
  1083. ],
  1084. circlePoint: [],
  1085. logPointArr: [
  1086. {
  1087. left: "2131",
  1088. top: "1063",
  1089. },
  1090. {
  1091. left: "2130",
  1092. top: "1084",
  1093. },
  1094. ],
  1095. },
  1096. {
  1097. spaceId: "空间12",
  1098. localName: "空间12",
  1099. canClick: true,
  1100. pointArr: [
  1101. {
  1102. left: "2266.514",
  1103. top: "1116.879",
  1104. },
  1105. {
  1106. left: "2335.317",
  1107. top: "1048.075",
  1108. },
  1109. {
  1110. left: "2301.681",
  1111. top: "1014.44",
  1112. },
  1113. {
  1114. left: "2201.338",
  1115. top: "1014.44",
  1116. },
  1117. {
  1118. left: "2201.338",
  1119. top: "1116.879",
  1120. },
  1121. ],
  1122. devicePoint: [
  1123. {
  1124. left: "2261",
  1125. top: "1078",
  1126. },
  1127. {
  1128. left: "2241",
  1129. top: "1078",
  1130. },
  1131. {
  1132. left: "2220",
  1133. top: "1078",
  1134. },
  1135. ],
  1136. circlePoint: [],
  1137. logPointArr: [
  1138. {
  1139. left: "2241",
  1140. top: "1050",
  1141. },
  1142. {
  1143. left: "2241",
  1144. top: "1063",
  1145. },
  1146. ],
  1147. },
  1148. {
  1149. spaceId: "空间13",
  1150. localName: "空间13",
  1151. canClick: true,
  1152. pointArr: [
  1153. {
  1154. left: "1908.394",
  1155. top: "1185.054",
  1156. },
  1157. {
  1158. left: "1908.361",
  1159. top: "1156.534",
  1160. },
  1161. {
  1162. left: "2051.866",
  1163. top: "1156.577",
  1164. },
  1165. {
  1166. left: "2051.866",
  1167. top: "1283.888",
  1168. },
  1169. {
  1170. left: "2007.227",
  1171. top: "1283.888",
  1172. },
  1173. ],
  1174. devicePoint: [
  1175. {
  1176. left: "2021",
  1177. top: "1230",
  1178. },
  1179. {
  1180. left: "2000",
  1181. top: "1230",
  1182. },
  1183. {
  1184. left: "1979",
  1185. top: "1230",
  1186. },
  1187. ],
  1188. circlePoint: [],
  1189. logPointArr: [
  1190. {
  1191. left: "2000",
  1192. top: "1200",
  1193. },
  1194. {
  1195. left: "2000",
  1196. top: "1216",
  1197. },
  1198. ],
  1199. },
  1200. {
  1201. spaceId: "空间14",
  1202. localName: "空间14",
  1203. canClick: true,
  1204. pointArr: [
  1205. {
  1206. left: "2099.505",
  1207. top: "1283.888",
  1208. },
  1209. {
  1210. left: "2196.718",
  1211. top: "1186.674",
  1212. },
  1213. {
  1214. left: "2196.718",
  1215. top: "1156.577",
  1216. },
  1217. {
  1218. left: "2054.866",
  1219. top: "1156.577",
  1220. },
  1221. {
  1222. left: "2054.866",
  1223. top: "1283.888",
  1224. },
  1225. ],
  1226. devicePoint: [
  1227. {
  1228. left: "2112",
  1229. top: "1230",
  1230. },
  1231. {
  1232. left: "2092",
  1233. top: "1230",
  1234. },
  1235. {
  1236. left: "2072",
  1237. top: "1230",
  1238. },
  1239. ],
  1240. circlePoint: [],
  1241. logPointArr: [
  1242. {
  1243. left: "2092",
  1244. top: "1204",
  1245. },
  1246. {
  1247. left: "2092",
  1248. top: "1218",
  1249. },
  1250. ],
  1251. },
  1252. ];
  1253. proxyData.copySpaceArr = JSON.stringify(spaceList);
  1254. proxyData.formSpaceData();
  1255. },
  1256. /**
  1257. * 获取地图信息
  1258. */
  1259. getMapInfo() {
  1260. let params: any = {
  1261. projectId: "Pj1101080259",
  1262. floorId: "Fl11010802593241ec348ecb4148806b9034c8957454",
  1263. };
  1264. getMapInfo(params)
  1265. .then((res) => {
  1266. // debugger
  1267. let resData: any = res;
  1268. let data: any = resData?.data ?? null;
  1269. proxyData.width = data.width;
  1270. proxyData.height = data.height;
  1271. proxyData.spaceList = data.spaceList;
  1272. proxyData.setSpaceColor();
  1273. proxyData.initCanvas();
  1274. })
  1275. .catch(() => {});
  1276. },
  1277. });
  1278. nextTick(() => {
  1279. proxyData.bindEvent();
  1280. });
  1281. onMounted(() => {
  1282. // proxyData.getMapInfo();
  1283. proxyData.formatePage();
  1284. proxyData.initCanvas();
  1285. });
  1286. return {
  1287. ...toRefs(proxyData),
  1288. };
  1289. },
  1290. });
  1291. </script>
  1292. <style lang="scss" scoped>
  1293. .canvas-box {
  1294. width: 100%;
  1295. height: calc(100% - 80px);
  1296. // overflow-x: hidden;
  1297. // overflow-y: hidden;
  1298. }
  1299. .com-upload {
  1300. width: 100%;
  1301. height: 100%;
  1302. // overflow: hidden;
  1303. }
  1304. .space-search {
  1305. position: fixed;
  1306. width: 350px;
  1307. left: 10px;
  1308. top: 50px;
  1309. z-index: 333;
  1310. }
  1311. </style>