<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>
      